@vmz/ui 0.2.8 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/components/Accordion.vmz +1 -1
- package/src/components/Autocomplete.vmz +1 -1
- package/src/components/BulkActions.vmz +1 -1
- package/src/components/Button.vmz +2 -2
- package/src/components/Card.vmz +1 -1
- package/src/components/ConsoleShell.vmz +1 -1
- package/src/components/DatePicker.vmz +2 -2
- package/src/components/Field.vmz +1 -1
- package/src/components/Flex.vmz +1 -1
- package/src/components/Grid.vmz +1 -1
- package/src/components/Icon.vmz +1 -1
- package/src/components/List.vmz +1 -1
- package/src/components/Menu.vmz +1 -1
- package/src/components/Progress.vmz +1 -1
- package/src/components/Segmented.vmz +1 -1
- package/src/components/Select.vmz +3 -3
- package/src/components/Space.vmz +1 -1
- package/src/components/Steps.vmz +1 -1
- package/src/components/Tabs.vmz +1 -1
- package/src/components/TextArea.vmz +1 -1
- package/src/components/Tree.vmz +2 -2
- package/src/components/Upload.vmz +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vmz/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"components"
|
|
85
85
|
],
|
|
86
86
|
"peerDependencies": {
|
|
87
|
-
"@vmz/ui-icons": "0.
|
|
87
|
+
"@vmz/ui-icons": "0.3.1"
|
|
88
88
|
},
|
|
89
89
|
"peerDependenciesMeta": {
|
|
90
90
|
"@vmz/ui-icons": {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div data-vmz-ui="accordion" :aria-label="label" class="vmz-ui-accordion">
|
|
3
3
|
<div v-for="item in items" :key="item.id" :data-vmz-accordion="item.id" class="vmz-ui-accordion__item">
|
|
4
4
|
<h3 class="vmz-ui-accordion__heading">
|
|
5
|
-
<button type="button" :id="item.triggerId" :data-vmz-accordion-trigger="item.id" :aria-expanded=
|
|
5
|
+
<button type="button" :id="item.triggerId" :data-vmz-accordion-trigger="item.id" :aria-expanded="openId === item.id ? 'true' : 'false'" :aria-controls="item.panelId" @click="(() => toggle(item.id))" class="vmz-ui-accordion__trigger">
|
|
6
6
|
{{ item.title }}
|
|
7
7
|
</button>
|
|
8
8
|
</h3>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<label v-if="label" :for="controlId" class="vmz-ui-autocomplete__label">
|
|
4
4
|
{{ label }}
|
|
5
5
|
</label>
|
|
6
|
-
<input :id="controlId" type="text" role="combobox" autocomplete="off" aria-autocomplete="list" :aria-expanded="openAttr" :aria-controls="listId" :aria-invalid=
|
|
6
|
+
<input :id="controlId" type="text" role="combobox" autocomplete="off" aria-autocomplete="list" :aria-expanded="openAttr" :aria-controls="listId" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :value="value" :disabled="disabled" @input="onDomInput" :onKeyDown="onKeyDown" class="vmz-ui-autocomplete__control" />
|
|
7
7
|
<ul v-if="listOpen" :id="listId" role="listbox" data-vmz-autocomplete="list" @click="onListClick" class="vmz-ui-autocomplete__list">
|
|
8
8
|
<li v-for="opt in options" :key="opt.value" role="option" :data-vmz-option="opt.value" tabindex="-1" class="vmz-ui-autocomplete__option">
|
|
9
9
|
{{ opt.label }}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div data-vmz-ui="bulk-actions" role="region" :aria-label="label" :data-open=
|
|
2
|
+
<div data-vmz-ui="bulk-actions" role="region" :aria-label="label" :data-open="selectedCount ? 'true' : 'false'" class="vmz-ui-bulk-actions">
|
|
3
3
|
<p data-vmz-fixture="bulk-count" class="vmz-ui-bulk-actions__count">
|
|
4
4
|
{{ countLabel }}
|
|
5
5
|
</p>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<a v-if="href" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block=
|
|
2
|
+
<a v-if="href" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block="block ? 'true' : 'false'" :href="href" :target="target" :rel="rel" @click="onDomClick" class="vmz-ui-btn">
|
|
3
3
|
<span v-if="loading" aria-hidden="true" class="vmz-ui-btn__spinner" />
|
|
4
4
|
<slot />
|
|
5
5
|
</a>
|
|
6
|
-
<button v-else :type="type" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block=
|
|
6
|
+
<button v-else :type="type" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block="block ? 'true' : 'false'" :data-loading="loading ? 'true' : 'false'" :disabled="disabled" :aria-busy="loading ? 'true' : 'false'" :aria-haspopup="ariaHaspopup" :aria-controls="ariaControls" @click="onDomClick" class="vmz-ui-btn">
|
|
7
7
|
<span v-if="loading" aria-hidden="true" class="vmz-ui-btn__spinner" />
|
|
8
8
|
<slot />
|
|
9
9
|
</button>
|
package/src/components/Card.vmz
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<section data-vmz-ui="card" :data-size="size" :data-bordered=
|
|
2
|
+
<section data-vmz-ui="card" :data-size="size" :data-bordered="bordered ? 'true' : 'false'" :data-hoverable="hoverable ? 'true' : 'false'" class="vmz-ui-card">
|
|
3
3
|
<header v-if="title" class="vmz-ui-card__header">
|
|
4
4
|
<h2 class="vmz-ui-card__title">
|
|
5
5
|
{{ title }}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{{ brand }}
|
|
6
6
|
</a>
|
|
7
7
|
<nav class="vmz-ui-console-shell__nav">
|
|
8
|
-
<a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id" :data-active=
|
|
8
|
+
<a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id" :data-active="item.id === activeNavId ? 'true' : null" :aria-current="item.id === activeNavId ? 'page' : null">
|
|
9
9
|
{{ item.title }}
|
|
10
10
|
</a>
|
|
11
11
|
</nav>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<label v-if="label" :for="controlId" class="vmz-ui-date-picker__label">
|
|
4
4
|
{{ label }}
|
|
5
5
|
</label>
|
|
6
|
-
<button type="button" :id="controlId" :disabled="disabled" aria-haspopup="dialog" :aria-expanded=
|
|
6
|
+
<button type="button" :id="controlId" :disabled="disabled" aria-haspopup="dialog" :aria-expanded="open ? 'true' : 'false'" :aria-controls="panelId" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" @click="toggle" :onKeyDown="onTriggerKeyDown" class="vmz-ui-date-picker__control">
|
|
7
7
|
<span data-vmz-date="value" class="vmz-ui-date-picker__value">
|
|
8
8
|
{{ displayLabel }}
|
|
9
9
|
</span>
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
</span>
|
|
46
46
|
</div>
|
|
47
47
|
<div role="grid" :aria-labelledby="panelId" class="vmz-ui-date-picker__grid">
|
|
48
|
-
<button v-for="day in days" :key="day.key" type="button" role="gridcell" :data-vmz-date-iso="day.iso" :aria-selected=
|
|
48
|
+
<button v-for="day in days" :key="day.key" type="button" role="gridcell" :data-vmz-date-iso="day.iso" :aria-selected="day.selected ? 'true' : 'false'" :aria-disabled="day.disabled ? 'true' : 'false'" :disabled="day.disabled" @click="onDayClick" :class='"vmz-ui-date-picker__day" + (day.inMonth ? "" : " is-outside") + (day.selected ? " is-on" : "") + (day.inRange ? " is-in-range" : "") + (day.rangeEdge ? " is-range-edge" : "") + (day.disabled ? " is-disabled" : "")'>
|
|
49
49
|
{{ day.label }}
|
|
50
50
|
</button>
|
|
51
51
|
</div>
|
package/src/components/Field.vmz
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<label v-if="label" :for="controlId" class="vmz-ui-field__label">
|
|
4
4
|
{{ label }}
|
|
5
5
|
</label>
|
|
6
|
-
<input :id="controlId" :type="type" :value="value" :min="min" :max="max" :step="step" :disabled="disabled" :aria-invalid=
|
|
6
|
+
<input :id="controlId" :type="type" :value="value" :min="min" :max="max" :step="step" :disabled="disabled" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" @input="onDomInput" class="vmz-ui-field__control" />
|
|
7
7
|
<p v-if="description" :id="descriptionId" class="vmz-ui-field__description">
|
|
8
8
|
{{ description }}
|
|
9
9
|
</p>
|
package/src/components/Flex.vmz
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div data-vmz-ui="flex" :data-vertical=
|
|
2
|
+
<div data-vmz-ui="flex" :data-vertical="vertical ? 'true' : 'false'" :data-wrap="wrap ? 'true' : 'false'" class="vmz-ui-flex">
|
|
3
3
|
<slot />
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
package/src/components/Grid.vmz
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div data-vmz-ui="grid" class="vmz-ui-grid" :style='
|
|
2
|
+
<div data-vmz-ui="grid" class="vmz-ui-grid" :style="'--ui-grid-columns:' + columns + ';--ui-grid-gap:' + gap">
|
|
3
3
|
<slot />
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
package/src/components/Icon.vmz
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<span data-vmz-ui="icon" :data-name="name" :data-size="size" :role=
|
|
2
|
+
<span data-vmz-ui="icon" :data-name="name" :data-size="size" :role="decorative ? 'presentation' : 'img'" :aria-hidden="decorative ? 'true' : 'false'" :aria-label="decorative ? '' : label" class="vmz-ui-icon">
|
|
3
3
|
<span v-if="isTextBadge()" class="vmz-ui-icon__badge">
|
|
4
4
|
{{ badgeLabel() }}
|
|
5
5
|
</span>
|
package/src/components/List.vmz
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
{{ label }}
|
|
5
5
|
</p>
|
|
6
6
|
<ul role="listbox" :aria-labelledby="labelId" :aria-label="label" @click="onListClick" :onKeyDown="onListKeyDown" class="vmz-ui-list__items">
|
|
7
|
-
<li v-for="item in items" :key="item.id" role="option" :id="item.id" :data-vmz-list-item="item.id" :aria-selected=
|
|
7
|
+
<li v-for="item in items" :key="item.id" role="option" :id="item.id" :data-vmz-list-item="item.id" :aria-selected="selected === item.id ? 'true' : 'false'" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-list__item">
|
|
8
8
|
{{ item.title }}
|
|
9
9
|
</li>
|
|
10
10
|
</ul>
|
package/src/components/Menu.vmz
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div data-vmz-ui="menu" :data-vmz-overlay-open="open" class="vmz-ui-menu">
|
|
3
|
-
<button type="button" data-vmz-menu="trigger" aria-haspopup="menu" :aria-expanded=
|
|
3
|
+
<button type="button" data-vmz-menu="trigger" aria-haspopup="menu" :aria-expanded="open ? 'true' : 'false'" :aria-controls="menuId" @click="toggle" :onKeyDown="onTriggerKeyDown" class="vmz-ui-menu__trigger">
|
|
4
4
|
{{ label }}
|
|
5
5
|
</button>
|
|
6
6
|
<div v-if="open" :id="menuId" role="menu" data-vmz-overlay="menu" data-vmz-overlay-owner="menu" data-vmz-focus="enter" tabindex="-1" :onKeyDown="onMenuKeyDown" class="vmz-ui-menu__panel">
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div data-vmz-ui="progress" role="progressbar" :aria-valuemin="0" :aria-valuemax="100" :aria-valuenow="percent" class="vmz-ui-progress">
|
|
3
3
|
<div class="vmz-ui-progress__track">
|
|
4
|
-
<span :style='
|
|
4
|
+
<span :style="'width:' + percent + '%'" />
|
|
5
5
|
</div>
|
|
6
6
|
<span v-if="showInfo" class="vmz-ui-progress__text">
|
|
7
7
|
{{ percent }}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div data-vmz-ui="segmented" role="group" :aria-label="label" class="vmz-ui-segmented">
|
|
3
|
-
<button v-for="opt in options" :key="opt.value" type="button" :data-vmz-segment="opt.value" :aria-pressed=
|
|
3
|
+
<button v-for="opt in options" :key="opt.value" type="button" :data-vmz-segment="opt.value" :aria-pressed="opt.value === value ? 'true' : 'false'" @click="(() => onPick(opt.value))">
|
|
4
4
|
{{ opt.label }}
|
|
5
5
|
</button>
|
|
6
6
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<label v-if="label" :for="controlId" class="vmz-ui-select__label">
|
|
4
4
|
{{ label }}
|
|
5
5
|
</label>
|
|
6
|
-
<button type="button" :id="controlId" role="combobox" :disabled="disabled" aria-haspopup="listbox" :aria-expanded=
|
|
6
|
+
<button type="button" :id="controlId" role="combobox" :disabled="disabled" aria-haspopup="listbox" :aria-expanded="open ? 'true' : 'false'" :aria-controls="listId" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :aria-multiselectable="isMultiple ? 'true' : 'false'" @click="toggle" :onKeyDown="onTriggerKeyDown" class="vmz-ui-select__control">
|
|
7
7
|
<span class="vmz-ui-select__value">
|
|
8
8
|
{{ displayLabel }}
|
|
9
9
|
</span>
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
<div v-if="searchable" class="vmz-ui-select__search">
|
|
14
14
|
<input type="search" data-vmz-select="search" :value="searchQuery" :placeholder="searchPlaceholder" :aria-label="searchPlaceholder" @input="onSearchInput" :onKeyDown="onSearchKeyDown" class="vmz-ui-select__search-input" />
|
|
15
15
|
</div>
|
|
16
|
-
<ul role="listbox" :aria-multiselectable=
|
|
16
|
+
<ul role="listbox" :aria-multiselectable="isMultiple ? 'true' : 'false'" tabindex="-1" :onKeyDown="onListKeyDown" class="vmz-ui-select__list">
|
|
17
17
|
<li v-if="showEmpty" role="presentation" class="vmz-ui-select__empty">
|
|
18
18
|
{{ emptyText }}
|
|
19
19
|
</li>
|
|
20
20
|
<li v-for="opt in visibleOptions" :key="opt.value" role="presentation">
|
|
21
|
-
<button type="button" role="option" :data-vmz-option="opt.value" :aria-selected=
|
|
21
|
+
<button type="button" role="option" :data-vmz-option="opt.value" :aria-selected="opt.selected ? 'true' : 'false'" @click="onOptionClick" :class='"vmz-ui-select__option" + (opt.selected ? " is-on" : "")'>
|
|
22
22
|
{{ opt.label }}
|
|
23
23
|
</button>
|
|
24
24
|
</li>
|
package/src/components/Space.vmz
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div data-vmz-ui="space" :data-direction="direction" :data-size="size" :data-wrap=
|
|
2
|
+
<div data-vmz-ui="space" :data-direction="direction" :data-size="size" :data-wrap="wrap ? 'true' : 'false'" class="vmz-ui-space">
|
|
3
3
|
<slot />
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
package/src/components/Steps.vmz
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<ol data-vmz-ui="steps" :aria-label="label" class="vmz-ui-steps">
|
|
3
|
-
<li v-for="item in items" :key="item.id" :data-vmz-step="item.id" :data-status="item.status" :aria-current=
|
|
3
|
+
<li v-for="item in items" :key="item.id" :data-vmz-step="item.id" :data-status="item.status" :aria-current="current === item.id ? 'step' : 'false'" class="vmz-ui-steps__item">
|
|
4
4
|
<span :data-vmz-step-index="item.id" class="vmz-ui-steps__index">
|
|
5
5
|
{{ item.index }}
|
|
6
6
|
</span>
|
package/src/components/Tabs.vmz
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div data-vmz-ui="tabs" class="vmz-ui-tabs">
|
|
3
3
|
<div role="tablist" :aria-label="label" :onKeyDown="onListKeyDown" @click="onListClick" class="vmz-ui-tabs__list">
|
|
4
|
-
<button v-for="item in items" :key="item.id" type="button" role="tab" :id="item.id" :data-vmz-tab="item.id" :aria-selected=
|
|
4
|
+
<button v-for="item in items" :key="item.id" type="button" role="tab" :id="item.id" :data-vmz-tab="item.id" :aria-selected="selected === item.id ? 'true' : 'false'" :aria-controls="item.controls" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tabs__tab">
|
|
5
5
|
{{ item.title }}
|
|
6
6
|
</button>
|
|
7
7
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<label v-if="label" :for="controlId" class="vmz-ui-textarea__label">
|
|
4
4
|
{{ label }}
|
|
5
5
|
</label>
|
|
6
|
-
<textarea :id="controlId" :rows="rows" :value="value" :disabled="disabled" :readonly="readonly" :aria-invalid=
|
|
6
|
+
<textarea :id="controlId" :rows="rows" :value="value" :disabled="disabled" :readonly="readonly" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" @input="onDomInput" class="vmz-ui-textarea__control" />
|
|
7
7
|
<p v-if="description" :id="descriptionId" class="vmz-ui-textarea__description">
|
|
8
8
|
{{ description }}
|
|
9
9
|
</p>
|
package/src/components/Tree.vmz
CHANGED
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
{{ label }}
|
|
5
5
|
</p>
|
|
6
6
|
<ul role="tree" :aria-labelledby="labelId" :aria-label="label" @click="onTreeClick" :onKeyDown="onTreeKeyDown" class="vmz-ui-tree__items">
|
|
7
|
-
<li v-for="item in items" :key="item.id" role="treeitem" :id="item.id" :data-vmz-tree-item="item.id" :data-depth="item.depth" :aria-selected=
|
|
7
|
+
<li v-for="item in items" :key="item.id" role="treeitem" :id="item.id" :data-vmz-tree-item="item.id" :data-depth="item.depth" :aria-selected="selected === item.id ? 'true' : 'false'" :aria-expanded="item.expandedAttr" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tree__item" :style="item.padStyle">
|
|
8
8
|
<button v-if="item.expandable" type="button" :data-vmz-tree-twist="item.id" :aria-label="item.twistLabel" tabindex="-1" class="vmz-ui-tree__twist">
|
|
9
|
-
{{ item.expanded ?
|
|
9
|
+
{{ item.expanded ? '−' : '+' }}
|
|
10
10
|
</button>
|
|
11
11
|
<span v-if="!item.expandable" aria-hidden="true" class="vmz-ui-tree__twist-spacer" />
|
|
12
12
|
<span :data-vmz-tree-title="item.id" class="vmz-ui-tree__title">
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
{{ label }}
|
|
5
5
|
</label>
|
|
6
6
|
<div data-vmz-upload="zone" class="vmz-ui-upload__zone">
|
|
7
|
-
<input :id="controlId" type="file" :accept="accept" :multiple="multiple" :disabled="inputDisabled" :aria-invalid=
|
|
7
|
+
<input :id="controlId" type="file" :accept="accept" :multiple="multiple" :disabled="inputDisabled" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :data-vmz-upload-directory="directoryAttr" @change="onPick" class="vmz-ui-upload__control" />
|
|
8
8
|
<p data-vmz-upload="hint" class="vmz-ui-upload__hint">
|
|
9
9
|
{{ zoneHint }}
|
|
10
10
|
</p>
|