balmjs / balm-ui Goto Github PK

I was wondering between other UI Framework or this one. Other UI Framework has cleaner documentation UI, but I love this one because, this, has more compatibility with browsers, and doesn't break.

It would be nice, if the documentation page was cleaner. We can take example on stasson - vue-mdc-adapter documentation page.

A glimpse on the website structure:
https://github.com/stasson/vue-mdc-adapter/blob/master/demo/component.vue

I would be glad to help :)

It would be nice to have a speed dial component like vuetify has.
Here is an example: https://vuetifyjs.com/en/components/floating-action-buttons/#speed-dial

Development Relevant Information:

• BalmUI version: 8.18.0
• Browser: Edge 88 (Chromium)
• Operating System: Windows 10

Description:

Thanks for this amazing implementation of Material Design for Vue.

I've been looking at the source code and I haven't been able to find a way to use anchors <a href="">. All the button implementations wraps the component in <button> tags, which is useful, but for SEO reasons is better to use an anchor.

I've also tried to wrap the <ui-button> with <a></a> tags but this changes the looks in the label and this doesn't look pretty anymore.

For now I'm implementing a link component myself calling directly the Material Design classes, but this could be handled as a <ui-button type="link">

Steps To Reproduce:

• Create a <ui-button>
• • wrap it in an <a></a>

ui-textfield对应form表单中的<input />

所以我觉得ui-textfield改名为ui-input会更合适一些

这样的话：
<ui-input type='text'></ui-input>对应 <input type='text' />
<ui-input type='password'></ui-input>对应 <input type='password' />
<ui-input type='email'></ui-input>对应 <input type='email' />

会更清晰一些

Hi

If i put a v-if on a ui-form-field the component didn't have the class mdc-form__item and the lignment is broken.

bug implemented with the last version of balm-ui for vue3

Hi,

Is it possible to use router-link as a ui-nav-item in ui-drawer?

Hi,

I want to access dialog actions buttons from dialog object but $dialog buttons_ propertie is empty

<ui-dialog ref="dialogCreate" class="mdc-dialog--not-scrollable" v-model="dialogCreateOpen">
  <ui-dialog-title><?= _('New user') ?></ui-dialog-title>
  <ui-dialog-content class="pt2">
    <ui-form type="|">
      <ui-form-field>
        <ui-autocomplete v-model="addUser.name" :source="addUserSource" fullwidth remote required outlined delay="500" @search="searchUserCreate" @selected="onSelectUser"><?= _('Name') ?></ui-autocomplete>
      </ui-form-field>
      <ui-form-field>
        <ui-select outlined fixed fullwidth v-model="addUser.role" :options="roles"><?= _('Role') ?></ui-select>
      </ui-form-field>
    </ui-form>
  </ui-dialog-content>
  <ui-dialog-actions>
    <ui-button @click="closeDialogCreate"><?= _('Cancel') ?></ui-button>
    <ui-button @click="saveDialogCreate"><?= _('Save') ?></ui-button>
  </ui-dialog-actions>
</ui-dialog>

export default {
  methods: {
    closeDialogCreate() {
      console.log(this.$ref.dialogCreate.buttons_) //undefined
    }
  }
}

I didn't find a solution for accessing dialog buttons on $dialog object too

Any solution ?

Thank's

Hi,

The hotspot for the "native elements" (input, textarea) is smaller than div.mdc-text-field (see the image below).
I'm actually not sure if it caused by balm-ui or material-components-web..

The last update induce a position bug of $toast module

When we put a ui-autocomplete inside a dialog,
the dropdown list being cut by the dialog.

Using the menu component is working just fine on chrome, however, it throws this error on IE11:

Obviously, IE didn't register the custom event.

Hi,

First of all, thank you for the great work on BalmUI!
Love the fact that it follows MDC very closely.

I'm experiencing an issue with the validator though.
The form does validate (response is not valid when printed to the console), but the invalid class isn't bound to the faulty element, nor does it update the validation message.

Can you see what is the matter?

`

<div
    class="mc-login"
    :class="{
        'mc-login--user' : step == 1,
        'mc-login--pass' : step == 2
    }"
>
    <div class="mc-login-box">
        <ui-form>
            <!-- Step 1 -->
            <div class="mc-login-step mc-login-step--one">
                <div class="mc-login-user">
                    <header class="mc-login-step__hdr">
                        <h1 class="md-t4 text-primary">Subscribe</h1>
                    </header>
                    <ui-form-field class="form-item">
                        <ui-textfield
                            id="user"
                            v-model="userData.user"
                            :attrs="{name: 'naam'}"
                            maxlength="64"
                            @enter="gotoPass"
                            helper-text-id="mobile-helper-text"
                            outlined
                        >
                           Customernr.
                        </ui-textfield>
                        <ui-textfield-helper
                                id="user-helper-text"
                                v-model="validMsg.user"
                        ></ui-textfield-helper>
                    </ui-form-field>
                </div>
                <div class="mc-login-step__btns">
                    <ui-button
                        class="mdc-button--login"
                        unelevated
                        @click="gotoPass"
                    >
                        next
                    </ui-button>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="mc-login-step mc-login-step--two">
                <div class="mc-login-pass">
                    <span class="mc-login-step-back">
                        <ui-icon-button
                            class="mdc-icon-button--back-login"
                            @click="backtoUser"
                        >
                            <span class="material-icons-outlined">arrow_back</span>
                        </ui-icon-button>
                        {{ customer }}
                    </span>
                    <header class="mc-login-step__hdr">
                        <h1 class="md-t4 text-primary">Password</h1>
                    </header>
                    <div class="text-field-wrapper">
                        <ui-textfield
                            id="pwd"
                            v-model="passData.password"
                            :input-type="passWordType"
                            :attrs="{name: 'password'}"
                            maxlength="64"
                            outlined
                        >
                            Password
                        </ui-textfield>
                        <div class="toggle-input-type">
                            <ui-icon-button
                                @click="toggleInputType"
                                class="mdc-icon-button--visibility"
                            >
                                <template #default="{ onClass, offClass }">
                                    <span class="material-icons-outlined" :class="onClass">visibility_off</span>
                                    <span class="material-icons-outlined" :class="offClass">visibility</span>
                                </template>
                            </ui-icon-button>
                        </div>
                    </div>
                </div>
                <ui-form-field class="mc-login-step__btns">
                    <ui-button
                        class="mdc-button--login"
                        unelevated
                        @click="gotoPass"
                    >
                        Volgende
                    </ui-button>
                </ui-form-field>
            </div>

        </ui-form>
    </div>

</div>

Kind regards,

Marco

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.

I believe the title says it all.

component :

<template>
  <ui-grid :style="{ border: 'solid blue', height: '100%' }">
    <ui-grid-cell class="yellow"></ui-grid-cell>
    <ui-grid-cell class="yellow" align="bottom">hello</ui-grid-cell>
    <ui-grid-cell class="yellow"></ui-grid-cell>
  </ui-grid>
</template>

<script>
export default {}
</script>

<style lang="scss">
@use 'balm-ui/dist/balm-ui.scss';
.yellow {
  background: yellow;
}
</style>

component with limited workaround:

div.mdc-layout-grid__inner {
  height: 100%;
  background: cyan;
}

Hi Elf-Mouse,

If one extends the (flatpickr) configuration for the datepicker, issues with the focussed style on the textfield seem to occur.

If I choose altinput: true (human readable date), the texfield never gets the focussed styling,

If I choose minDate: new Date().fp_incr(15) (15 days from today), the texfield never releases the focussed styling

full config:

config: {
                    altInput: true,
                    altFormat: "j F Y",
                    dateFormat: 'd-m-Y',
                    defaultDate: 'today',
                    minDate: new Date().fp_incr(15),
                    maxDate: new Date().fp_incr(100),
                    locale: lang.nl,
                    disable: [
                        function(date) {
                            return (date.getDay() === 0 || date.getDay() === 6);

                        }
                    ],
                },

kind regards,

Marco

nmp reported 5 vulnerabilities in the dependencies during installation.

                       === npm audit security report ===                        
                                                                                
                                                                                
                                 Manual Review                                  
             Some vulnerabilities require your attention to resolve             
                                                                                
          Visit https://go.npm.me/audit-guide for additional guidance           
                                                                                
                                                                                
  Moderate        Sandbox Breakout / Arbitrary Code Execution                   
                                                                                
  Package         static-eval                                                   
                                                                                
  Patched in      >=2.0.2                                                       
                                                                                
  Dependency of   balm [dev]                                                    
                                                                                
  Path            balm > gulp.spritesmith > spritesmith > pixelsmith >          
                  ndarray-fill > cwise > static-module > static-eval            
                                                                                
  More info       https://npmjs.com/advisories/758                              
                                                                                
                                                                                
  Moderate        Sandbox Breakout / Arbitrary Code Execution                   
                                                                                
  Package         static-eval                                                   
                                                                                
  Patched in      >=2.0.0                                                       
                                                                                
  Dependency of   balm [dev]                                                    
                                                                                
  Path            balm > gulp.spritesmith > spritesmith > pixelsmith >          
                  ndarray-fill > cwise > static-module > static-eval            
                                                                                
  More info       https://npmjs.com/advisories/548                              
                                                                                
                                                                                
  Low             Regular Expression Denial of Service                          
                                                                                
  Package         braces                                                        
                                                                                
  Patched in      >=2.3.1                                                       
                                                                                
  Dependency of   balm [dev]                                                    
                                                                                
  Path            balm > browser-sync > micromatch > braces                     
                                                                                
  More info       https://npmjs.com/advisories/786                              
                                                                                
                                                                                
  Low             Regular Expression Denial of Service                          
                                                                                
  Package         braces                                                        
                                                                                
  Patched in      >=2.3.1                                                       
                                                                                
  Dependency of   balm [dev]                                                    
                                                                                
  Path            balm > gulp-load-plugins > findup-sync > micromatch > braces  
                                                                                
  More info       https://npmjs.com/advisories/786                              
                                                                                
                                                                                
  Low             Regular Expression Denial of Service                          
                                                                                
  Package         braces                                                        
                                                                                
  Patched in      >=2.3.1                                                       
                                                                                
  Dependency of   balm [dev]                                                    
                                                                                
  Path            balm > gulp-load-plugins > micromatch > braces                
                                                                                
  More info       https://npmjs.com/advisories/786                              
                                                                                
found 5 vulnerabilities (3 low, 2 moderate) in 24690 scanned packages
  5 vulnerabilities require manual review. See the full report for details.

drawer is not fixed as it supposed to be, it scrolls and covers the top bar.

this is the component:

<template>
  <div>
    <ui-top-app-bar fixed :navIcon="false" contentSelector="#below-nav" :class="$themeColor('secondary-bg')" >
      test
      <template v-slot:toolbar>
        <ui-button @click="logout">Logout</ui-button>
      </template>
    </ui-top-app-bar>

    <div id="below-nav">
      <ui-drawer viewportHeight>
        <ui-drawer-header>
          <ui-drawer-title>Title</ui-drawer-title>
          <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>
        </ui-drawer-header>
        <ui-drawer-content>
          <ui-nav #default="{ itemClass, activeClass }">
            <a :class="[itemClass, activeClass]">Active link</a>
            <a :class="itemClass">Unactive link</a>
          </ui-nav>
        </ui-drawer-content>
      </ui-drawer>
      <div>
        main content
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

the only global custom styling is:

html, body {
  padding: 0;
  margin: 0;
}

the fix btw is to add to css:

.mdc-drawer {
  position: fixed;
  z-index: 0;
}

Hi,

What's the plan regarding support for Vue 3?

Thanks

Hi. How can I extend/override styles via scss without balmcli? Sorry for nood question, but I came from Vuetify and it has complete guide how to do that even without big experience in frontend

Hi,

it is possible to add the possibility to set a data attr to any data input ui-textfield, ui-select and others ?

something like <ui-textfield input-data-old-val="foo"><ui-textfield>

Thanks for your hard work !

Development Relevant Information:

• BalmUI version: https://cdn.jsdelivr.net/npm/balm-ui
• Browser: Chrome
• Operating System: OSX

Description:

When using a Select field, it gets immediately validated (when mounted) and renders an error state (red label, red line at the bottom) in case it's invalid (eg required field with empty value in first option).
This is in contrast to Textfields, which only get validated once the user leaves the field (on blur).
The only way of rendering Select fields the same as Textfields initially is by setting 'options' to an empty array.

Steps To Reproduce:

see https://codepen.io/schellmax01/pen/GRWvwBP

Is possible to add some style on the select component to look like this

Instead of this

Thanks in advance

Can I use balm-ui in vue ssr?

Hi,

I try to set a form validator with the compiled version of balmui ('/node_modules/balm-ui/dist/balm-ui.js')
balmui is integrated by a script balise

<script type="text/javascript" src="/node_modules/vue/dist/vue.global.js"></script>
<script type="text/javascript" src="/node_modules/balm-ui/dist/balm-ui.js"></script>

<ui-dialog class="dialogMetalRejections" v-model="production.metalRejectionsCauses.dialog">
  <ui-dialog-title>Cause(s) des rejets</ui-dialog-title>
  <ui-dialog-content>
    <ui-form v-if="production.metalRejectionsCauses.new" class="mt1" type="|">
      <ui-form-field>
        <ui-textfield v-model="production.metalRejectionsCauses.datas.gap" required fullwidth>&Eacute;cart/Cause</ui-textfield>
      </ui-form-field>
      <ui-form-field>
        <ui-textfield v-model="production.metalRejectionsCauses.datas.actions" required fullwidth>Action</ui-textfield>
      </ui-form-field>
      <ui-form-field>
        <ui-button raised @click="newMetalRejectionsCauses()" icon="add">Ajouter</ui-button>
      </ui-form-field>
    </ui-form>
  </ui-dialog-content>
  <ui-dialog-actions>
    <ui-button outlined @click="showMetalRejectionsCauses()"><?= Framework::_('Close') ?></ui-button>
  </ui-dialog-actions>
</ui-dialog>

var pageMixin = {
  data() {
    return {
      formsValidation: {
        validator: BalmUI.useValidator(),
        metalRejections: {
          gap: {
            label: 'Gap',
            validator: 'required, minRule, maxRule',
            minRule: {
              validate(value) {
                return value.trim().length >= 6;
              },
              message: '%s minLength >= 6'
            },
            maxRule: {
              validate(value) {
                return value.trim().length <= 8;
              },
              message: '%s maxLength <= 8'
            }
          },
          actions: {
            validator: 'required'
          }
        }
      },
      production: {
        metalRejectionsCauses: {
        datas: {
            gap:'',
            actions:''
          },
        }
      }
    }
  },
  newMetalRejectionsCauses() {
    this.formsValidation.validator.setValidations(this.formsValidation.metalRejections);
    let res = this.formsValidation.validator.validate(this.production.metalRejectionsCauses.datas);
    console.log(res);
  }
}

const appGlobal = {
  mixins: [pageMixin]
}

const app = Vue.createApp(appGlobal);
app.use(BalmUI);
app.mount('#app');

I have no validFields and no ìnvalidFields in the validate response.

balm-ui版本9.0.2，脚手架vite，使用import { detectIE } from 'balm-ui';时浏览器控制台报错

// 一段使用了import { detectIE } from 'balm-ui';的代码
import { detectIE } from 'balm-ui';
if(detectIE()) { ... }

浏览器控制台报错

Uncaught SyntaxError: The requested module '/@modules/balm-ui.js' does not provide an export named 'detectIE'

但是使用 import detectIE from 'balm-ui/utils/ie'; 就不会有报错

Hi,

I'm trying to create and import an ui-chip in the dom.

let chip = Vue.createVNode(BalmUI.UiChip);
Vue.render(chip, el);

the ui-chip didn't appear in the DOM.

have you an idea ?

Hello,
When I use code for drawer i have this error :
'contentSelector' is required

TopAppBar animation working, but don't have shadow. The opening of the drawer is impossible.

https://material.balmjs.com/#/navigation/dismissible-drawer-full-height-drawer

thx

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 (material-components/material-components-web#5590 (comment))

An argument like fullwidth will be very appreciated :)

Thanks

BalmUI 版本： 6.6.1
问题：在App.vue中初始化主题色为#2196F3，对应的颜色后，text-field的 hint 的 actived状态颜色未跟着主题色改变，依然是默认色浅紫色

相关代码

    this.$setTheme("primary","#2196F3")  
    this.$setTheme("sencondary","#2196F3")

起初以为是自己的问题，查看官方文档，并将主题切换成shrine后（其他样例主题也有同样的问题），text-field的 hint 的 actived 状态颜色也是浅紫色，并未跟随主题色变化

Hi,

When i set the prop align on a tbody templated element the class mdc-data-table__cell--right is not present

Ex on the slot actions:

<ui-table
  v-model="selectedRows"
  fullwidth
  :data="data"
  :thead="thead"
  :tbody="tbody"
  :tfoot="tfoot"
  row-checkbox
  selected-key="id"
>
  <template #th-dessert>
    Dessert
    <ui-icon v-tooltip="'100g serving'" aria-describedby="th-cell-1">
      error_outline
    </ui-icon>
  </template>
  <template #dessert="{ data }">
    <div class="dessert">{{ data.dessert }}</div>
  </template>
  <template #actions="{ data }">
    <ui-icon @click="show(data)">description</ui-icon>
    <ui-icon @click="show(data)">edit</ui-icon>
    <ui-icon @click="show(data)">delete</ui-icon>
  </template>

  <ui-pagination
    v-model="page"
    :total="total"
    show-total
    @change="onPage"
  ></ui-pagination>
</ui-table>

export default {
  data() {
    return {
      data: [],
      thead: [
        {
          value: 'ID',
          sort: 'asc',
          columnId: 'id'
        },
        {
          slot: 'th-dessert',
          class: 'gg',
          sort: 'none',
          columnId: 'dessert'
        },
        'Calories',
        'Fat (g)',
        'Carbs (g)',
        'Protein (g)',
        'Actions',
      ],
      tbody: [
        'id',
        {
          slot: 'dessert'
        },
        {
          field: 'calories',
          numeric: true,
          class: 'test'
        },
        {
          field: 'fat',
          fn: data => {
            return data.fat.toFixed(1);
          }
        },
        'carbs',
        {
          field: 'protein',
          class: data => {
            return data.protein > 5 ? 'red' : 'green';
          }
        },
        {
          slot: 'actions',
          align:'right'
        }
      ],
      tfoot: [
        {
          field: 'id',
          fnName: 'count'
        },
        null,
        {
          field: 'calories',
          fnName: 'sum',
          align: 'right',
          class: 'test'
        },
        {
          field: 'fat',
          fnName: 'avg'
        },
        {
          field: 'carbs',
          fnName: 'max'
        },
        {
          field: 'protein',
          fnName: 'min'
        }
      ],
      selectedRows: [1, 2, 4],
      page: 1,
      total: 12
    };
  },
  created() {
    let { data } = await this.$http.get('/api/getData');
    this.data = data;
  },
  methods: {
    show(data) {
      console.log(data);
    },
    onPage(page) {
      // your code
    }
  }
};

Hi,

I'm experiencing problems with invalid textfields losing the invalid class on focus out / blur event of input field.
The same behavior can also be seen on the demo page https://material.balmjs.com/#/data-input/textfield below 1.1.
If you select Use Helper Text, Make helper text persistent, and Use helper text as validation message, then at first the invalid class is on the mdc-textfield div: mdc-text-field mdc-text-field--filled mdc-ripple-upgraded mdc-text-field--invalid.
However, when you click outside the textfield, the textfield loses its --invalid class and appears to be normal input again, while it should still be invalid: mdc-text-field mdc-text-field--filled mdc-ripple-upgraded.

If you look at how it should be working according to the specs (https://material.io/components/text-fields/) :

and if you then focus out:

Am I doing something wrong, or what should I do to enforce the --invalid class to stay on the invalid input?

I am looking forward to hearing from you soon. Thanks in advance.

Kind regards,
Marijn

Note: I'm using the CDN version here!

Most colors can be changed at runtime inside vue using

this.$setTheme('primary', 'black');

But some colors seem to be hardcoded, and require overrides in css, such as:

.mdc-select__menu .mdc-list .mdc-list-item--selected{
  color:black; background-color:#ccc;
}
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{
  color:black;
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label{
  color:black;
}

This can easily be reproduced in the docs at https://material.balmjs.com/#/theme/color
Changing the color (button in the top right corner) won't affect the following:

• Focused Textfield Label (purple)
• Select Options - Selected Item (purple background)

Development Relevant Information:

• BalmUI version: 8.10
• Browser: IE11
• Operating System: Windows 10

Description:

The UiFile component doesn't work in IE 11. The following error message is written to the javascript console:
Unhandled promise rejection TypeError: Unable to get property 'getRandomValues' of undefined or null reference
The problem seems to be window.crypto.getRandomValues(arr); in utils/file.js. IE implements window.crypto under the window.msCrypto name.

Steps To Reproduce:

Load UiFile's official documentation in IE 11. Try to open a file with one of the examples.

Thanks, thanks thanks for offering a Vue (v3) Material Component lib.. it has really saved my day. I am however in need of a Top App Bar, card drop down menu component. Is this achievable with the current set of components?

Thanks,
Bob

Followed instructions given here: [https://next-material.balmjs.com/#/guide/quickstart]

Executing balm init vue#next my-project generates following error:

(node:11801) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'latest' of undefined
at /Users/kale/.config/yarn/global/node_modules/balm-cli/lib/check-version.js:21:47
at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use node --trace-warnings ... to show where the warning was created)
(node:11801) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:11801) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

macOS: 10.15.7; balm cli: 2.4.0; balm-core: 3.7.0

Hi,

Tooltip on a ui-icon-button inside a ui-list never appear

Currently ui-button component sets the button type to button without any option to change it to submit.
An API like inputType in ui-text-field component would be awesome.

Thanks

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

Hi,

I made a ui-dialog with a ui-grid of ui-select.

On mobile the list of the ui-select appear in the wrong place.

<ui-dialog scrollable>
  <ui-dialog-title>Dialog title</ui-dialog-title>
  <ui-dialog-content>
    <ui-tabs>
      <ui-tab>Contrôles avant lancement</ui-tab>
      <ui-tab>Lancement</ui-tab>
    </ui-tabs>
    <ui-panels>
      <ui-panel>
        <ui-grid>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <h3>CCP: intégrité tamis</h3>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <ui-select :with-leading-icon="this.production.correctiveActions.datas.tamis_integrity_start != undefined" ref="tamis_integrity_start" @selected="needCorrectiveActions($event, 'tamis_integrity_start')" required fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Intégrité du tamis
              <template v-if="this.production.correctiveActions.datas.tamis_integrity_start" #icon>
                <ui-select-icon @click="showCorrectiveActions($event, 'tamis_integrity_start')">flaky</ui-select-icon>
              </template>
            </ui-select>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <ui-select required fixed fullwidth :options="configurations.boolean" :defaultValue="configurations.defaultVal" default-label=" ">
              &Eacute;lément(s) retrouvé sur le tamis
            </ui-select>
          </ui-grid-cell>
          <ui-grid-cell columns="12" v-if="production.launchBatch.tamis_element_start === '1'">
            <ui-textfield fullwidth>&Eacute;lément(s) retrouvé(s)</ui-textfield>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <h3>Contrôle impression</h3>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <ui-select required fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Qualité/Paramétrage impression
            </ui-select>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:6, tablet:8, phone:4}">
            <h3>CCP: bon fonctionnement détecteur de métaux début de conditionnement</h3>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:4, tablet:8, phone:4}">
            <ui-select required helper-text-id="debut-ferreux" fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Ferreux
            </ui-select>
            <ui-select-helper visible id="debut-ferreux">2mm - N°F414</ui-select-helper>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:4, tablet:8, phone:4}">
            <ui-select required helper-text-id="debut-nonferreux" fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Non ferreux
            </ui-select>
            <ui-select-helper visible id="debut-nonferreux">2,5mm - N°B083</ui-select-helper>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:4, tablet:8, phone:4}">
            <ui-select required helper-text-id="debut-inox" fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Inox
            </ui-select>
            <ui-select-helper visible id="debut-inox">2,5mm - N°S103</ui-select-helper>
          </ui-grid-cell>
        </ui-grid>
      </ui-panel>
    </ui-panels>
  </ui-dialog-content>
</ui-dialog>

Hi,

Itis possible to implement a prop to prevent ui-dialog close on pressing escape key ?

Thank you for your hard work

Hi,

thanks for the amazing work you have been pulling out!
It seems so complete!

Unfortunately I've been struggling with SSR on Nuxt.js :(

I'm not sure if you're familiar with Nuxt or not.
If not here is a quick explaination:

Nuxt plugins

To include an external library we use what they call plugins
A plugin can be invoked:

• on both server & client (default)
• or server only
• or client only

SSR attempt

If I try something like this on the server:

import Vue from 'vue';
import UiButton from 'balm-ui/components/button';

Vue.use(UiButton);

On my page.

<ui-button>a balm ui button</ui-button>

I have this error on the rendering:

ReferenceError
window is not defined

Which is logical beacause NodeJS has no window object…

CSR attempt

The same plugin code will be used.
But in my config I toggle the client only mode

module.exports = {
  plugins: [{ src: `~/plugins/balm-ui-components.js`, mode: `client` }],
};

But by doing this I have some errors on the browser:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Which is expected.

The Nuxt way to prevent this is to wrap the component inside a client only

<client-only>
  <ui-button>a balm ui button</ui-button>
</client-only>

And it's working but “flashing” on first hydration.

The question

I've tried to figured how I could setup this Server Side without the window is not defined…
…but I din't succeeded.

Do you have any ideas where I can search for that kind of things?

Thanks in advance.

Using the example code from https://material.balmjs.com/#/guide/quickstart (3. For 'script') with latest version 9.0.2 from jsdelivr:

https://jsfiddle.net/schellmax/da69Lbje/2/

doesn't work, error in the console is:

Uncaught TypeError: Object(...) is not a function
at Module.FZBc (VM29 balm-ui.js:1)

As mentioned in the docs at https://material.balmjs.com/#/data-input/textfield Textfield labels are passed through the default slot:

<ui-textfield>Label Text</ui-textfield>

and end up in the rendered HTML wrapped in a 'span' tag:

<span class="mdc-floating-label">Label Text</span>

In the original Material Design Component at https://material-components.github.io/material-components-web-catalog/#/component/text-field the appropriate 'label' element is used instead:

<label for="text-field-hero-input" class="mdc-floating-label">Name</label>

There is also a 'label' prop mentioned in the docs, but it seems not to be used by the component.

Label elements are critical for accessibility and should therefore be used for every form input. Balm UI already uses label elements e.g. for checkbox components; usage in Textfields would be highly appreciated.

ui-select prop helper-text-id is not detected

<ui-select helper-text-id="helper-bagmatching" fixed fullwidth>Sacherie correspondant au produit</ui-select>
<ui-select-helper visible id="helper-bagmatching">Sacherie bleu pour pharma</ui-select-helper>

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.

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?

I try to make select icon clickable but event is never fired

<ui-select 
  with-leading-icon
  ref="tamis_integrity_start"
  @selected="needCorrectiveActions($event, 'tamis_integrity_start')"
  required
  v-model="production.launchBatch.tamis_integrity_start"
  :options="configurations.conformity">
    Integrity
    <template #icon>
      <ui-select-icon @click="showCorrectiveActions('tamis_integrity_start')">flaky</ui-select-icon>
    </template>
</ui-select>

<ui-textfield v-model="data.msgStr" @blur="blurField(data)" fullWidth outlined></ui-textfield>

Uncaught TypeError: Cannot read property '0' of undefined at Object.isCheckboxAtRowIndexChecked (balm-ui.js:formatted:17010) at e.handleRowCheckboxChange (balm-ui.js:formatted:16782) at HTMLTableSectionElement.handleRowCheckboxChange (balm-ui.js:formatted:16880)

Error appear only when a value is entered. If you blur without changing value no error happen