:diamonds: A modular and customizable UI library based on Material Design and Vue

Overview

BalmUI BalmUI version MDC version

Next Generation Material UI for Vue.js

Introduction

BalmUI is a modular and customizable Material Design UI library for Vue.js.

๐ŸŽ‰ NOW, [email protected] (v9.0) supports for Vue 3.0

Features

  • Enterprise-class UI designed for web applications
  • A set of high-quality Vue components/plugins/directives/utils out of the box
  • Powerful theme customization in every detail
  • Integrated a complete set of the latest Material Icons
  • All components and plugins is highly customizable, and can be used individually

Documentation & Demos

Quick Start

Requirements

1. For Balm CLI (Recommended)

1.0 Create a project

balm init vue my-project
cd my-project

1.1 Installing balm-ui

yarn add balm-ui
# OR
npm install --save balm-ui

1.2 Configuration

update balm.config.js

  • get Material Icons without downloading (or, download and extract to /path/to/my-project/app/fonts)

    const api = (mix) => {
      if (mix.env.isDev) {
        mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');
      }
    };
  • edit my-project/config/balmrc.js for using Dart Sass

    module.exports = {
      styles: {
        extname: 'scss',
        dartSass: true
      }
      // Other Options...
    };

1.3 Usage

Default Usage
  • edit my-project/app/styles/global/_vendor.scss

    /* import BalmUI styles */
    @use 'balm-ui/dist/balm-ui';

    Recommend to use Sass in /path/to/your-project/styles/_vendor.scss, and you can use more advanced style usage of the BalmUI.

  • edit my-project/app/scripts/main.js

    import Vue from 'vue';
    import BalmUI from 'balm-ui'; // Official Google Material Components
    import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components
    
    Vue.use(BalmUI); // Mandatory
    Vue.use(BalmUIPlus); // Optional
Standalone Usage
  • edit my-project/app/styles/global/_vendor.scss

    @use 'balm-ui/components/core';
    @use 'balm-ui/components/button/button';
    @use 'balm-ui/components/icon/icon';
    @use 'balm-ui/components/dialog/dialog';
    @use 'balm-ui/plugins/alert/alert';
  • edit my-project/app/scripts/main.js

    import Vue from 'vue';
    import UiButton from 'balm-ui/components/button';
    import $alert from 'balm-ui/plugins/alert';
    
    Vue.use(UiButton);
    Vue.use($alert);

1.4 Development and testing

npm run dev
  • edit a vue component: my-project/app/scripts/views/components/hello.vue

    <template>
      <div class="hello">
        ...
        <!-- Add a test button -->
        <ui-button @click="$alert('Hello BalmUI')">Click Me</ui-button>
      </div>
    </template>

1.5 Bundling and deployment

npm run prod

2. For Vue CLI

2.0 Create a project

vue create my-project
cd my-project

2.1 Installing balm-ui

yarn add balm-ui
# OR
npm install --save balm-ui

2.2 Usage

  • edit /path/to/main.js

    import Vue from 'vue';
    import BalmUI from 'balm-ui'; // Official Google Material Components
    import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components
    import 'balm-ui/dist/balm-ui.css';
    
    Vue.use(BalmUI); // Mandatory
    Vue.use(BalmUIPlus); // Optional

3. For <script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello BalmUI</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui.css"
    />
  </head>
  <body>
    <div id="app">
      <ui-button @click="$alert(message)" icon="add">SayHi</ui-button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/balm-ui"></script>
    <script src="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui-plus.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello BalmUI'
        }
      });
    </script>
  </body>
</html>

Enjoy ๐Ÿ‘ป

Contributing

We'd love for you to contribute and make BalmUI even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.

Browser support

We officially support the last two versions of every major browser. Specifically, we test on the following browsers:

  • Chrome on Android, Windows, macOS, and Linux
  • Firefox on Windows, macOS, and Linux
  • Safari on iOS and macOS
  • Edge on Windows
  • IE 11 on Windows

Special Thanks to

Comments
  • Add support for

    Add support for "mdc-menu-surface--fixed" in ui-select

    Hi,

    In order to use the select component inside of an element that has overflow: hidden without the droplist being cut we need to add the "mdc-menu-surface--fixed" class to the ".mdc-select__menu" element (https://github.com/material-components/material-components-web/issues/5590#issuecomment-657032119)

    An argument like fullwidth will be very appreciated :)

    Thanks

    opened by leibale 15
  • The dependency

    The dependency "vue" is incorrectly capitalized in v9

    ERROR  Failed to compile with 2 errors
    
    This dependency was not found:
    
    * Vue in ./node_modules/balm-ui/dist/balm-ui-plus.js, ./node_modules/balm-ui/dist/balm-ui.js
    
    To install it, you can run: npm install --save Vue
    
    opened by XiaoPangxie732 15
  • Select inside data table row not rendering select menu outside of row

    Select inside data table row not rendering select menu outside of row

    Development Relevant Information:

    BalmUI version: 9.38.2 Browser: Chrome Operating System: Win 10

    Hi,

    I've got a select input sat inside a slot in a datatable (simplified example):

    Markup:

    <ui-table :data="requestData"
                    :thead="thead"
                    :tbody=tbody"
    
       <template #selectInput="{ data }">
                         <ui-select v-model='mySelectedValue'
                                          :options='myOptions'>
                            Label
                         </ui-select>
    </ui-table>
    

    data:

    data() {
       return {
          thead: [
             'selectColumn'
          ],
          tbody: [
             {
                slot: 'selectInput'
             }
          ],
          requestData: [
             mySelectedValue: '',
             myOptions: [
                 {
                    label: 'option 1',
                    value: 1
                 },
                 {
                    label: 'option 2',
                    value: 2
                 }
             ]
          ]
       }
    }
    

    However when you click the ui-select to drop down it's selectable options, the menu doesn't render outside of the table row (i.e. you can barely see any more than the original select input).

    I've had a quick look at the CSS applied hoping there was maybe an overflow: hidden on the table row but I can't see anything.

    Any ideas?

    Cheers.

    opened by Kestami 10
  • Overriding global scss

    Overriding global scss

    Hi,

    I'm wondering what needs to be done in order to override scss?

    Looking at the data table SCSS example section, I should be able to just import the following;

    @use '@material/data-table' with (
      $fill-color: red,
      $header-row-fill-color: green,
    );
    
    

    This seems to have no effect though? I have other scss in the same file that updates correctly so it's nothing to do with not loading the file etc.

    Any ideas / example? Thanks in advance

    opened by Kestami 9
  • ui-autocomplete source personnalisation

    ui-autocomplete source personnalisation

    Hey,

    I'm working on a private project. i'm using a lot of ui-autocomplete for searching elements.

    With the actual source prop for ui-autocomplete i have to format all my call for matching {'label': '', value: ''}

    It's possible to have a source format parameter ?

    app.use(BalmUIPlus, {
      UiAutocomplete: {
        sourceFormat: {
          label: 'name',
          value: 'id'
        }
      }
    });
    

    Thank you

    opened by jfrag 9
  • Issue updating data table content

    Issue updating data table content

    Hello! Firstly, love using balm ui, I am running into an issue, specifically relating to updating data tables after the fact, my app pulls data from a websocket and displays it in the table, when doing this I get errors logged in the console relating to nextTick. When a message is received it is decoded, and the contents of the data array in the table is updated.

    [Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'hideProgress')"

    If I am doing something wrong please do tell me. Thanks In Advance, Adam Mathieson

    opened by winer222 8
  • bundle size weirdness

    bundle size weirdness

    First of all, thanks for this excellent library!

    balm-ui 8.10.0

    I found that importing the default BalmUI module results in smaller js bundle size than importing the individual components/directives/plugins. The css bundle, by contrast, is larger in the default case, as expected.

    Bundle | Size --- | --- chunk-vendors...js (default) | 611.63 KiB chunk-vendors...js (individual) | 911.78 KiB app...css (default) | 417.97 KiB app...css (individual) | 210.83 KiB

    The imported individual components/directives/plugins were:

    import $theme from 'balm-ui/plugins/theme'
    import $typography from 'balm-ui/plugins/typography'
    import UiIcon from 'balm-ui/components/icon'
    import UiButton from 'balm-ui/components/button'
    import UiIconButton from 'balm-ui/components/icon-button'
    import UiTopAppBar from 'balm-ui/components/top-app-bar'
    import UiGridComponents from 'balm-ui/components/grid'
    import UiForm from 'balm-ui/components/form'
    import UiFormField from 'balm-ui/components/form-field'
    import UiDivider from 'balm-ui/components/divider'
    import UiDrawerComponents from 'balm-ui/components/drawer'
    import UiMenuComponents from 'balm-ui/components/menu'
    import UiTextfieldComponents from 'balm-ui/components/textfield'
    import UiCheckbox from 'balm-ui/components/checkbox'
    import UiListComponents from 'balm-ui/components/list'
    import UiCardComponents from 'balm-ui/components/card'
    import vRipple from 'balm-ui/directives/ripple'
    

    Am I missing something?

    opened by gvas 8
  • BalmUI clashes with vuex types

    BalmUI clashes with vuex types

    "balm-ui": "^10.4.0" "vuex": "^4.0.2", "vue": "3"

    I have a file shims-vuex.d.ts with the following content:

    import { SharedState, TeacherState, StudentState } from "./store/types";
    import { Store } from "vuex";
    
    declare module "@vue/runtime-core" {
      interface State {
        shared: SharedState;
        teacher: TeacherState;
        student: StudentState;
      }
    
      interface ComponentCustomProperties {
        $store: Store<State>;
      }
    }
    

    as soon as I use BamlUI in my main.ts file like this:

    import BalmUI from "balm-ui";
    import "balm-ui-css";
    
    const app = createApp(App);
    app
      .use(BalmUI)
      .mount("#app")
    

    all the spots where I do this.$store in my components raise errors like: Property 'getters' does not exist on type 'ComponentInternalInstance'. and the project fails to compile.

    I suspect for some reason the type Store being used when I try to access $store in my components is BalmUI's and not the one I defined inside of my shims file.

    How can this be fixed?

    opened by samul-1 7
  • Text Field questions in password type.

    Text Field questions in password type.

    Development Relevant Information:

    • BalmUI version: 9.41.0โœจ
    • Browser: Microsoft Edge ็‰ˆๆœฌ 97.0.1072.76 (ๅฎ˜ๆ–นๅ†…้ƒจ็‰ˆๆœฌ) (64 ไฝ)
    • Operating System: Windows 10 pro

    Description:

    1. The button that shows the plaintext seems to only appear when the text field is empty, I don't know if that's what you planned, but I would like to be able to show the button when the text field is empty, or add an option for this, if not, that's fine. GIF demo
    2. I want that effect image But if I write it this way, it doesn't seem to work. image image image I don't know what went wrong.

    Steps To Reproduce:

    n/a

    opened by ltxhhz 7
  • xd.a is not a constructor

    xd.a is not a constructor

    Hello, I am running the latest version on Balm ui on vue3 and I have the following error in the console (it's also blocking all my component from loading) image

    opened by zarbi4734 7
  • Error when running 'npm run prod'

    Error when running 'npm run prod'

    It's me ! Again...

    Sorry to bother you @elf-mouse

    When i try to compile to prod i got an error.

    > [email protected] docs J:\balm-ui
    > cross-env NODE_ENV=production balm -p --docs
    
    BalmJS version: 3.9.1
    [19:53:48] BalmJS i <clean task> 'assets' is local directory: true
    [19:53:48] BalmJS โ€ผ <clean task> { deletedPaths: [ 'J:\\balm-ui\\dist' ] }
    Hash: be5b3d1d4ce72632fec1
    Version: webpack 4.44.2
    Time: 12492ms
    Built at: 2020-11-27 19:54:07
                                  Asset       Size  Chunks                                Chunk Names
                              js/app.js   1.38 MiB       0  [emitted]              [big]  app
               js/assets/1.0fb9c0ac.jpg   30.8 KiB          [emitted] [immutable]
               js/assets/1.859e0c2f.jpg   15.6 KiB          [emitted] [immutable]
              js/assets/10.88157fee.jpg   33.8 KiB          [emitted] [immutable]
              js/assets/11.d0880493.jpg   36.9 KiB          [emitted] [immutable]
              js/assets/12.147ee708.jpg   27.2 KiB          [emitted] [immutable]
              js/assets/13.975a9bf1.jpg   31.7 KiB          [emitted] [immutable]
              js/assets/14.ca7fe944.jpg   28.3 KiB          [emitted] [immutable]
              js/assets/15.d850efb7.jpg   30.2 KiB          [emitted] [immutable]
              js/assets/16.816c91d0.jpg   33.7 KiB          [emitted] [immutable]
               js/assets/2.7e817c3c.jpg     31 KiB          [emitted] [immutable]
               js/assets/2.e7480c88.jpg   36.5 KiB          [emitted] [immutable]
               js/assets/3.5d1dde2f.jpg     14 KiB          [emitted] [immutable]
               js/assets/3.a28c3e60.jpg   38.1 KiB          [emitted] [immutable]
               js/assets/4.d875b9e4.jpg   26.2 KiB          [emitted] [immutable]
               js/assets/4.ed598cbb.jpg   29.3 KiB          [emitted] [immutable]
               js/assets/5.1da36d8c.jpg   23.1 KiB          [emitted] [immutable]
               js/assets/5.654a4b0e.jpg   22.9 KiB          [emitted] [immutable]
               js/assets/6.c6d607fe.jpg   21.9 KiB          [emitted] [immutable]
               js/assets/6.e0f7a437.jpg   24.3 KiB          [emitted] [immutable]
               js/assets/7.3f8032b7.jpg     34 KiB          [emitted] [immutable]
               js/assets/7.6694d7b2.jpg   34.4 KiB          [emitted] [immutable]
               js/assets/8.2903d41b.jpg   40.5 KiB          [emitted] [immutable]
               js/assets/8.c6de9b29.jpg   35.9 KiB          [emitted] [immutable]
               js/assets/9.f1f0a835.jpg   31.8 KiB          [emitted] [immutable]
    js/assets/card-media-h.e728c270.png   36.1 KiB          [emitted] [immutable]
    js/assets/card-media-v.0495eb73.png   27.2 KiB          [emitted] [immutable]
                js/async/10.ea7e791f.js   1.88 KiB      10  [emitted] [immutable]
                js/async/11.707e9649.js   2.56 KiB      11  [emitted] [immutable]
                js/async/12.5b227932.js   1.85 KiB      12  [emitted] [immutable]
                js/async/13.005a7291.js  696 bytes      13  [emitted] [immutable]
                js/async/14.08cf3476.js   1.39 KiB      14  [emitted] [immutable]
                js/async/15.b5b5c7c7.js   2.11 KiB      15  [emitted] [immutable]
                js/async/16.62114161.js   4.15 KiB      16  [emitted] [immutable]
                js/async/17.f0826a27.js   4.34 KiB      17  [emitted] [immutable]
                js/async/18.0b3c17be.js   2.29 KiB      18  [emitted] [immutable]
                js/async/19.6a992d18.js   3.76 KiB      19  [emitted] [immutable]
                js/async/20.4a2b71e6.js   5.13 KiB      20  [emitted] [immutable]
                js/async/21.1350339e.js   2.12 KiB      21  [emitted] [immutable]
                js/async/22.3ada3462.js    4.8 KiB      22  [emitted] [immutable]
                js/async/23.28b2fd69.js   4.93 KiB      23  [emitted] [immutable]
                js/async/24.8502d170.js   3.67 KiB      24  [emitted] [immutable]
                js/async/25.9b39e737.js   1.75 KiB      25  [emitted] [immutable]
                js/async/26.dd337051.js   9.68 KiB      26  [emitted] [immutable]
                js/async/27.45d60bf9.js   5.74 KiB      27  [emitted] [immutable]
                js/async/28.8bff8f07.js   7.18 KiB      28  [emitted] [immutable]
                js/async/29.b37e8278.js   9.19 KiB      29  [emitted] [immutable]
                 js/async/3.e11569c4.js   5.48 KiB       3  [emitted] [immutable]
                js/async/30.1f03b0da.js   2.17 KiB      30  [emitted] [immutable]
                js/async/31.78d999a7.js   2.05 KiB      31  [emitted] [immutable]
                js/async/32.b4ed9b65.js   3.68 KiB      32  [emitted] [immutable]
                js/async/33.791b1279.js   1.13 KiB      33  [emitted] [immutable]
                js/async/34.2febd084.js  646 bytes      34  [emitted] [immutable]
                js/async/35.4f9f3bf3.js   8.04 KiB      35  [emitted] [immutable]
                js/async/36.798efbad.js   1.71 KiB      36  [emitted] [immutable]
                js/async/37.e7bcb41b.js   3.29 KiB      37  [emitted] [immutable]
                js/async/38.7ab936b9.js   2.06 KiB      38  [emitted] [immutable]
                js/async/39.1f09e840.js   1.34 KiB      39  [emitted] [immutable]
                 js/async/4.a2450fa7.js   20.8 KiB       4  [emitted] [immutable]
                js/async/40.9cecac9c.js   1.92 KiB      40  [emitted] [immutable]
                js/async/41.64cccc3f.js   3.62 KiB      41  [emitted] [immutable]
                js/async/42.9278a9cf.js   10.4 KiB      42  [emitted] [immutable]
                js/async/43.57e3f644.js   11.7 KiB      43  [emitted] [immutable]
                js/async/44.8a4e6a30.js   1.49 KiB      44  [emitted] [immutable]
                js/async/45.dbc728bc.js   3.58 KiB      45  [emitted] [immutable]
                js/async/46.f294f4bd.js   2.07 KiB      46  [emitted] [immutable]
                js/async/47.1f5073c3.js   1.65 KiB      47  [emitted] [immutable]
                js/async/48.25f0411c.js   3.23 KiB      48  [emitted] [immutable]
                js/async/49.a18b466b.js   1.76 KiB      49  [emitted] [immutable]
                 js/async/5.60f9b4de.js   7.61 KiB       5  [emitted] [immutable]
                js/async/50.6ab4ee43.js   1.72 KiB      50  [emitted] [immutable]
                js/async/51.3d51b730.js   1.86 KiB      51  [emitted] [immutable]
                js/async/52.9a959c17.js   2.58 KiB      52  [emitted] [immutable]
                js/async/53.f0c62ecb.js   1.99 KiB      53  [emitted] [immutable]
                js/async/54.8653c2be.js   1.75 KiB      54  [emitted] [immutable]
                js/async/55.55eac751.js   1.71 KiB      55  [emitted] [immutable]
                js/async/56.348c4847.js  445 bytes      56  [emitted] [immutable]
                js/async/57.9f0179ec.js  387 bytes      57  [emitted] [immutable]
                js/async/58.bb11943a.js  382 bytes      58  [emitted] [immutable]
                js/async/59.d6f386c9.js  436 bytes      59  [emitted] [immutable]
                 js/async/6.44305576.js   7.11 KiB       6  [emitted] [immutable]
                js/async/60.926b1284.js  356 bytes      60  [emitted] [immutable]
                js/async/61.1794a259.js  577 bytes      61  [emitted] [immutable]
                js/async/62.8fb71dc5.js   1.07 KiB      62  [emitted] [immutable]
                js/async/63.7b9a710a.js   1.27 KiB      63  [emitted] [immutable]
                js/async/64.53e205fb.js   2.97 KiB      64  [emitted] [immutable]
                js/async/65.07f4afae.js  473 bytes      65  [emitted] [immutable]
                js/async/66.94af1b2d.js  742 bytes      66  [emitted] [immutable]
                js/async/67.7ac2da5e.js   2.69 KiB      67  [emitted] [immutable]
                js/async/68.97613f21.js   6.53 KiB      68  [emitted] [immutable]
                js/async/69.5626c96f.js  254 bytes      69  [emitted] [immutable]
                 js/async/7.2ce3d650.js   1.42 KiB       7  [emitted] [immutable]
                js/async/70.191c217e.js  484 bytes      70  [emitted] [immutable]
                 js/async/8.fa1e68a5.js   1.25 KiB       8  [emitted] [immutable]
                 js/async/9.39d03011.js   3.86 KiB       9  [emitted] [immutable]
                     js\vendor\hello.js    271 KiB       1  [emitted]              [big]  hello.js
                        js\vendor\ui.js   85.6 KiB       2  [emitted]                     ui.js
    Entrypoint app [big] = js\vendor\ui.js js\vendor\hello.js js/app.js
    
    WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
    This can impact web performance.
    Assets:
      js/app.js (1.38 MiB)
      js\vendor\hello.js (271 KiB)
    
    WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
    Entrypoints:
      app (1.73 MiB)
          js\vendor\ui.js
          js\vendor\hello.js
          js/app.js
    
    [19:54:07] BalmJS ร— <image task> EPERM: operation not permitted, futime
    J:\balm-ui\node_modules\async-done\index.js:18
        throw err;
        ^
    
    Error [ERR_UNHANDLED_ERROR]: Unhandled error. ({
      uid: 9,
      name: 'balm:image',
      branch: false,
      error: Error: premature close
          at onclosenexttick (J:\balm-ui\node_modules\end-of-stream\index.js:53:86)
          at processTicksAndRejections (internal/process/task_queues.js:79:11),
      duration: [ 0, 59933100 ],
      time: 1606503247365
    })
        at Gulp.emit (events.js:303:17)
        at Gulp.EventEmitter.emit (domain.js:483:12)
        at Object.error (J:\balm-ui\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
        at handler (J:\balm-ui\node_modules\now-and-later\lib\mapSeries.js:47:14)
        at f (J:\balm-ui\node_modules\once\once.js:25:25)
        at f (J:\balm-ui\node_modules\once\once.js:25:25)
        at tryCatch (J:\balm-ui\node_modules\async-done\index.js:24:15)
        at Pumpify.done (J:\balm-ui\node_modules\async-done\index.js:40:12)
        at Pumpify.f (J:\balm-ui\node_modules\once\once.js:25:25)
        at onclosenexttick (J:\balm-ui\node_modules\end-of-stream\index.js:53:73)
        at processTicksAndRejections (internal/process/task_queues.js:79:11) {
      code: 'ERR_UNHANDLED_ERROR',
      context: {
        uid: 9,
        name: 'balm:image',
        branch: false,
        error: Error: premature close
            at onclosenexttick (J:\balm-ui\node_modules\end-of-stream\index.js:53:86)
            at processTicksAndRejections (internal/process/task_queues.js:79:11),
        duration: [ 0, 59933100 ],
        time: 1606503247365
      }
    }
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] docs: `cross-env NODE_ENV=production balm -p --docs`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] docs script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\JFRAG\AppData\Roaming\npm-cache\_logs\2020-11-27T18_54_07_445Z-debug.log
    The terminal process "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run docs" terminated with exit code: 1.
    
    opened by jfrag 7
  • Select options not showing outside of data grid row template again

    Select options not showing outside of data grid row template again

    Hi @elf-mouse ,

    I've just tried updating my version of balm-ui from 10.9.3 to 10.13.4 and noticed that where I have select inputs inside of data grid row templates, the select options now don't show outside of the current row, cutting off basically the entirety of the content of the select options. I believe this was an issue in the past that we resolved, would you mind having a look if this is something that's broken again?

    edit: Similar to the original issue from here: https://github.com/balmjs/balm-ui/issues/91

    Cheers.

    opened by HDShabe 0
  • chore(deps): bump json5 from 2.2.1 to 2.2.3

    chore(deps): bump json5 from 2.2.1 to 2.2.3

    Bumps json5 from 2.2.1 to 2.2.3.

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump loader-utils from 2.0.2 to 2.0.4

    chore(deps): bump loader-utils from 2.0.2 to 2.0.4

    Bumps loader-utils from 2.0.2 to 2.0.4.

    Release notes

    Sourced from loader-utils's releases.

    v2.0.4

    2.0.4 (2022-11-11)

    Bug Fixes

    v2.0.3

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Changelog

    Sourced from loader-utils's changelog.

    2.0.4 (2022-11-11)

    Bug Fixes

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Scroll issue when using tabs in Single Page Appplication

    Scroll issue when using tabs in Single Page Appplication

    Development Relevant Information:

    • BalmUI version: 10.12.0
    • Browser: Chrome
    • Vue version: 3.2.38

    Description:

    I'm using<ui-tabs> in a vue component in a single page application that uses vue-router. The problem is thatmdc-tab-bar seems to hijack the app's scroll position, so that it is exactly set at the middle of the viewport (with the first tab focused).

    Schermafbeelding 2022-10-04 om 14 03 57

    Expected behavior is that that the tab won't receive focus and will certainly not hijack the scroll position.

    Any help is greatly appreciated!

    kind regards, Marco

    opened by MarcoTroost 0
  • ripple / underline not working in latest 10.x for ui-textfield

    ripple / underline not working in latest 10.x for ui-textfield

    Development Relevant Information:

    • BalmUI version: 10.12.10
    • Browser: Chrome 89 & MS Edge 87 (Chrome 105 on Ubuntu 22.04)
    • Operating System: Windows 10

    Description:

    Using the latest VueJS 3 created using npm init [email protected] (included balm-test.zip file) and then setting up following the documentation on the balm-ui website, the textfields do not have the expected ripple / underline.

    Steps To Reproduce:

    Included minimal repro project... extract project run yarn install in the project folder run yarn dev to start the app browse to http://localhost://5173

    Expected ripple to be shown like in the documentation for a filled input, actual result attached.

    Simple minimal example: balm-test.zip

    Expected to look something like this: expected-ripple

    Ends up looking like this (notice the missing underline): actual-missing-ripple

    A couple of things to note, the "expected" image shows the input in it's non-focused form, however when you click on it, the label moves up and the underline changes to purple.

    The "actual" image shows the input in it's focused state. The ripple / underline does not appear in either the focused or non-focused state

    opened by davija 0
Owner
BalmJS
For Fun, For Code...
BalmJS
Vue Bootstrap with Material Design - Powerful and free UI KIT

Vue Bootstrap with Material Design Based on the latest Bootstrap 4 and Vue. 400+ material UI elemens, 600+ material icons, 74 CSS animations, SASS fil

MDBootstrap 902 Jan 4, 2023
Vue2 material design icons with easy access to icons names and types

vue-material-icons Vue2 material design icons with easy access to icons names and types (all available in IDE hints). Hints were tested on IntelliJ ID

Dominik Betka 0 May 11, 2022
Material design for Vue.js

Material Design for Vue.js Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs Build well-designed app

Vue Material 9.7k Jan 5, 2023
Material Design styled components for Vue.js

Material Components Vue Material Design styled components for Vue.js Material-components-vue integrates the mdc-web (by google) vanilla components fol

Mats Pfeiffer 307 Dec 25, 2022
Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

MDBootstrap 899 Dec 29, 2022
Bootstrap4 Material Design Components for Vue.js

Vue MDBootstrap Vue MDBootstrap is a collection of VueJs components and built according to the Google Material Design specs. They can be used to built

Ahmad Fajar 3 Dec 23, 2022
Build material design interfaces in record time... without stress for devs... ๐Ÿบ๐Ÿ’›

Beercss Build material design interfaces in record time... ...without stress for devs ?? ?? Cheers, www.beercss.com Why? It's based on latest material

beercss 359 Jan 3, 2023
๐ŸงฌEqual UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

??Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Yan Savinov 873 Jan 3, 2023
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Fundamental Vue Description The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles. Fundamental Library for

SAP 188 Jan 1, 2023
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 1.1k Jan 2, 2023
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 1.1k Dec 30, 2022
A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.

Naive UI A Vue 3 Component Library Fairly Complete, Customizable Themes, Uses TypeScript, Not too Slow Kinda Interesting English | ไธญๆ–‡ Documentation ww

TuSimple 11.3k Jan 4, 2023
Flow-UI is a highly customizable UI framework based Seajs/jQueryใ€‚

English | ไธญๆ–‡ Flow-UI ?? Flow-UI is a highly customizable UI framework based Seajs/jQueryใ€‚ Introduction Flow-UI has built-in CSS components, JS plug-in

Flow-UI 84 Jul 26, 2022
๐ŸŒˆ An enterprise-class UI components based on Ant Design and Vue. ๐Ÿœ

Ant Design Vue An enterprise-class UI components based on Ant Design and Vue. English | ็ฎ€ไฝ“ไธญๆ–‡ Features An enterprise-class UI design system for desktop

vueComponent 17.6k Jan 4, 2023
Business React components for Bootstrap and Material-UI

DevExtreme Reactive ยท DevExtreme Reactive is a set of business React components that deeply integrate with Bootstrap and Material-UI libraries. Common

Developer Express Inc. 1.9k Dec 25, 2022
๐Ÿ‰ Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 36.2k Dec 30, 2022
Vue wrapper arround Material Components for the Web

Material Components for Vue Vue components (Vue 3.0) for Material Web Components which uses the Using Foundations and Adapters integration technique.

null 102 Dec 20, 2022
The material-ripple directive for Vue that actually works

v-wave The material-ripple directive for Vue that actually works Support for both Vue 2 and Vue 3! Why did I make this? Because every ripple-plugin I'

Justin Taddei 167 Dec 29, 2022
๐Ÿ“• Material Components for @vuejs

@lbzui/vue Material Components for Vue.js @lbzui/vue is now available in BETA, but you can read in more depth on API documentation and documentation w

LBZUI 40 Jul 10, 2022