balmjs / balm-ui Goto Github PK
View Code? Open in Web Editor NEW:diamonds: A modular and customizable UI library based on Material Design and Vue
Home Page: https://material.balmjs.com
License: MIT License
:diamonds: A modular and customizable UI library based on Material Design and Vue
Home Page: https://material.balmjs.com
License: MIT License
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.
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:
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
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>É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.
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' />
会更清晰一些
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
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;
}
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 :)
Hi,
What's the plan regarding support for Vue 3?
Thanks
<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
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 ?
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,
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
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
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,
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/) :
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
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';
就不会有报错
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,
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 !
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:
To include an external library we use what they call plugins
A plugin can be invoked:
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…
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.
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.
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 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,
Is it possible to use router-link
as a ui-nav-item
in ui-drawer
?
Can I use balm-ui in vue ssr?
Hi,
Itis possible to implement a prop to prevent ui-dialog
close on pressing escape key ?
Thank you for your hard work
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
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;
}
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.
Development Relevant Information:
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.
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
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.
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=" ">
É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>É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>
Development Relevant Information:
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.
Load UiFile's official documentation in IE 11. Try to open a file with one of the examples.
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
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
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
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>
Hi,
Tooltip on a ui-icon-button
inside a ui-list
never appear
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
Development Relevant Information:
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">
<ui-button>
<a></a>
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?
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>
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.