@vmz/ui 0.1.31 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/ui",
-  "version": "0.1.31",
+  "version": "0.2.0",
   "type": "module",
   "description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
   "license": "MIT",

package/src/components/Accordion.vmz

@@ -9,7 +9,7 @@
             :data-vmz-accordion-trigger="item.id"
             :aria-expanded="openId === item.id ? 'true' : 'false'"
             :aria-controls="item.panelId"
-            @click="() => this.toggle(item.id)"
+            @click="() => toggle(item.id)"
           >
             {{ item.title }}
           </button>

package/src/components/Autocomplete.vmz

@@ -19,8 +19,8 @@
         :aria-describedby="describedBy"
         :value="value"
         :disabled="disabled"
-        @input="this.onDomInput"
-        :onKeyDown="this.onKeyDown"
+        @input="onDomInput"
+        :onKeyDown="onKeyDown"
       />
       <ul
         v-if="listOpen"
@@ -28,7 +28,7 @@
         class="vmz-ui-autocomplete__list"
         role="listbox"
         data-vmz-autocomplete="list"
-        @click="this.onListClick"
+        @click="onListClick"
       >
         <li
           v-for="opt in options"

package/src/components/Button.vmz

@@ -11,7 +11,7 @@
       :href="href"
       :target="target"
       :rel="rel"
-      @click="this.onDomClick"
+      @click="onDomClick"
     >
       <span v-if="loading" class="vmz-ui-btn__spinner" aria-hidden="true"></span>
       <slot />
@@ -29,7 +29,7 @@
       :data-loading="loading ? 'true' : 'false'"
       :disabled="disabled"
       :aria-busy="loading ? 'true' : 'false'"
-      @click="this.onDomClick"
+      @click="onDomClick"
     >
       <span v-if="loading" class="vmz-ui-btn__spinner" aria-hidden="true"></span>
       <slot />

package/src/components/Checkbox.vmz

@@ -7,7 +7,7 @@
         :checked="checked"
         :disabled="disabled"
         :aria-describedby="describedBy"
-        @click="this.onToggle"
+        @click="onToggle"
       />
       <span class="vmz-ui-checkbox__label">{{ label }}</span>
     </label>

package/src/components/CodeBlock.vmz

@@ -2,7 +2,7 @@
   <figure class="vmz-ui-code-block" data-vmz-ui="code-block">
       <div class="vmz-ui-code-block__bar">
         <figcaption v-if="caption" class="vmz-ui-code-block__caption">{{ caption }}</figcaption>
-        <Button type="button" variant="ghost" @click="this.onCopy">{{ copyLabel }}</Button>
+        <Button type="button" variant="ghost" @click="onCopy">{{ copyLabel }}</Button>
       </div>
       <pre class="vmz-ui-code-block__pre"><code class="vmz-ui-code-block__code">{{ code }}</code></pre>
     </figure>

package/src/components/DataTable.vmz

@@ -7,7 +7,7 @@
       :data-selected-count="selectedCount"
     >
       <table class="vmz-ui-datatable">
-        <thead @click="this.onHeadClick">
+        <thead @click="onHeadClick">
           <tr>
             <th scope="col" class="vmz-ui-datatable__check">
               <input
@@ -26,7 +26,7 @@
             <th v-if="hasRowAction" scope="col">{{ actionTitle }}</th>
           </tr>
         </thead>
-        <tbody @click="this.onBodyClick">
+        <tbody @click="onBodyClick">
           <tr
             v-for="row in rows"
             :key="row.id"

package/src/components/DatePicker.vmz

@@ -16,8 +16,8 @@
         :aria-controls="panelId"
         :aria-invalid="error ? 'true' : 'false'"
         :aria-describedby="describedBy"
-        @click="this.toggle"
-        :onKeyDown="this.onTriggerKeyDown"
+        @click="toggle"
+        :onKeyDown="onTriggerKeyDown"
       >
         <span class="vmz-ui-date-picker__value" data-vmz-date="value">{{ displayLabel }}</span>
         <span class="vmz-ui-date-picker__chev" aria-hidden="true"></span>
@@ -34,7 +34,7 @@
         data-vmz-overlay-owner="date-picker"
         data-vmz-focus="enter"
         data-vmz-date="panel"
-        :onKeyDown="this.onPanelKeyDown"
+        :onKeyDown="onPanelKeyDown"
       >
         <div class="vmz-ui-date-picker__monthbar">
           <button
@@ -42,7 +42,7 @@
             class="vmz-ui-date-picker__nav"
             data-vmz-date="prev"
             aria-label="Previous month"
-            @click="this.prevMonth"
+            @click="prevMonth"
           >‹</button>
           <p class="vmz-ui-date-picker__month" data-vmz-date="month">{{ monthLabel }}</p>
           <button
@@ -50,7 +50,7 @@
             class="vmz-ui-date-picker__nav"
             data-vmz-date="next"
             aria-label="Next month"
-            @click="this.nextMonth"
+            @click="nextMonth"
           >›</button>
         </div>
         <div class="vmz-ui-date-picker__weekdays" aria-hidden="true">
@@ -72,7 +72,7 @@
             :aria-selected="day.selected ? 'true' : 'false'"
             :aria-disabled="day.disabled ? 'true' : 'false'"
             :disabled="day.disabled"
-            @click="this.onDayClick"
+            @click="onDayClick"
           >{{ day.label }}</button>
         </div>
       </div>

package/src/components/Dialog.vmz

@@ -16,7 +16,7 @@
           class="vmz-ui-dialog__backdrop"
           data-vmz-overlay-layer="backdrop"
           aria-label="Dismiss dialog"
-          @click="this.dismiss"
+          @click="dismiss"
         ></button>
         <div
           class="vmz-ui-dialog__panel"
@@ -28,14 +28,14 @@
           data-vmz-focus="enter"
           data-vmz-motion="overlay-enter"
           data-vmz-motion-token="motion.overlay"
-          :onKeyDown="this.onPanelKeyDown"
+          :onKeyDown="onPanelKeyDown"
         >
           <h2 :id="titleId" class="vmz-ui-dialog__title">{{ title }}</h2>
           <div class="vmz-ui-dialog__body">
             <slot />
           </div>
           <div class="vmz-ui-dialog__actions">
-            <button type="button" class="vmz-ui-dialog__close" data-vmz-focus="close" @click="this.dismiss">
+            <button type="button" class="vmz-ui-dialog__close" data-vmz-focus="close" @click="dismiss">
               Close
             </button>
           </div>

package/src/components/Drawer.vmz

@@ -16,7 +16,7 @@
           class="vmz-ui-drawer__backdrop"
           data-vmz-overlay-layer="backdrop"
           aria-label="Dismiss drawer"
-          @click="this.dismiss"
+          @click="dismiss"
         ></button>
         <div
           class="vmz-ui-drawer__panel"
@@ -28,14 +28,14 @@
           data-vmz-focus="enter"
           data-vmz-motion="overlay-enter"
           data-vmz-motion-token="motion.overlay"
-          :onKeyDown="this.onPanelKeyDown"
+          :onKeyDown="onPanelKeyDown"
         >
           <h2 :id="titleId" class="vmz-ui-drawer__title">{{ title }}</h2>
           <div class="vmz-ui-drawer__body">
             <slot />
           </div>
           <div class="vmz-ui-drawer__actions">
-            <button type="button" class="vmz-ui-drawer__close" data-vmz-focus="close" @click="this.dismiss">
+            <button type="button" class="vmz-ui-drawer__close" data-vmz-focus="close" @click="dismiss">
               Close
             </button>
           </div>

package/src/components/Field.vmz

@@ -12,7 +12,7 @@
         :disabled="disabled"
         :aria-invalid="error ? 'true' : 'false'"
         :aria-describedby="describedBy"
-        @input="this.onDomInput"
+        @input="onDomInput"
       />
       <p v-if="description" :id="descriptionId" class="vmz-ui-field__description">{{ description }}</p>
       <p v-if="error" :id="errorId" class="vmz-ui-field__error" role="alert">{{ error }}</p>

package/src/components/Form.vmz

@@ -6,8 +6,8 @@
       data-novalidate="true"
       :aria-label="label"
       :aria-describedby="describedBy"
-      @submit="this.onSubmitGuard"
-      @reset="this.onResetGuard"
+      @submit="onSubmitGuard"
+      @reset="onResetGuard"
     >
       <div v-if="errorSummary" :id="summaryId" class="vmz-ui-form__summary" role="alert" data-vmz-form="summary">
         {{ errorSummary }}

package/src/components/List.vmz

@@ -6,8 +6,8 @@
         role="listbox"
         :aria-labelledby="labelId"
         :aria-label="label"
-        @click="this.onListClick"
-        :onKeyDown="this.onListKeyDown"
+        @click="onListClick"
+        :onKeyDown="onListKeyDown"
       >
         <li
           v-for="item in items"

package/src/components/Menu.vmz

@@ -7,8 +7,8 @@
         aria-haspopup="menu"
         :aria-expanded="open ? 'true' : 'false'"
         :aria-controls="menuId"
-        @click="this.toggle"
-        :onKeyDown="this.onTriggerKeyDown"
+        @click="toggle"
+        :onKeyDown="onTriggerKeyDown"
       >
         {{ label }}
       </button>
@@ -21,7 +21,7 @@
         data-vmz-overlay-owner="menu"
         data-vmz-focus="enter"
         tabindex="-1"
-        :onKeyDown="this.onMenuKeyDown"
+        :onKeyDown="onMenuKeyDown"
       >
         <button
           v-for="item in items"
@@ -30,7 +30,7 @@
           class="vmz-ui-menu__item"
           role="menuitem"
           :data-vmz-menu-item="item.id"
-          @click="this.onItemClick"
+          @click="onItemClick"
         >
           {{ item.title }}
         </button>

package/src/components/Pagination.vmz

@@ -4,7 +4,7 @@
         type="button"
         class="vmz-ui-pagination__btn"
         :disabled="prevDisabled"
-        @click="this.onPrevClick"
+        @click="onPrevClick"
       >
         Previous
       </button>
@@ -13,7 +13,7 @@
         type="button"
         class="vmz-ui-pagination__btn"
         :disabled="nextDisabled"
-        @click="this.onNextClick"
+        @click="onNextClick"
       >
         Next
       </button>

package/src/components/Popover.vmz

@@ -16,7 +16,7 @@
           class="vmz-ui-popover__backdrop"
           data-vmz-overlay-layer="backdrop"
           aria-label="Dismiss popover"
-          @click="this.dismiss"
+          @click="dismiss"
         ></button>
         <div
           class="vmz-ui-popover__panel"
@@ -26,14 +26,14 @@
           tabindex="-1"
           data-vmz-overlay-layer="panel"
           data-vmz-focus="enter"
-          :onKeyDown="this.onPanelKeyDown"
+          :onKeyDown="onPanelKeyDown"
         >
           <h2 :id="titleId" class="vmz-ui-popover__title">{{ title }}</h2>
           <div class="vmz-ui-popover__body">
             <slot />
           </div>
           <div class="vmz-ui-popover__actions">
-            <button type="button" class="vmz-ui-popover__close" data-vmz-focus="close" @click="this.dismiss">
+            <button type="button" class="vmz-ui-popover__close" data-vmz-focus="close" @click="dismiss">
               Close
             </button>
           </div>

package/src/components/QueryForm.vmz

@@ -4,7 +4,7 @@
       data-vmz-ui="query-form"
       data-dense="true"
       :aria-label="label"
-      @submit="this.onSubmitGuard"
+      @submit="onSubmitGuard"
     >
       <slot />
     </form>

package/src/components/RadioGroup.vmz

@@ -7,7 +7,7 @@
       :disabled="disabled"
     >
       <legend class="vmz-ui-radio-group__legend">{{ label }}</legend>
-      <div class="vmz-ui-radio-group__list" role="radiogroup" :aria-label="label" @click="this.onListClick">
+      <div class="vmz-ui-radio-group__list" role="radiogroup" :aria-label="label" @click="onListClick">
         <label
           v-for="item in items"
           :key="item.value"

package/src/components/Segmented.vmz

@@ -6,7 +6,7 @@
       type="button"
       :data-vmz-segment="opt.value"
       :aria-pressed="opt.value === value ? 'true' : 'false'"
-      @click="() => this.onPick(opt.value)"
+      @click="() => onPick(opt.value)"
     >{{ opt.label }}</button>
   </div>
 </template>

package/src/components/Select.vmz

@@ -19,8 +19,8 @@
         :aria-invalid="error ? 'true' : 'false'"
         :aria-describedby="describedBy"
         :aria-multiselectable="isMultiple ? 'true' : 'false'"
-        @click="this.toggle"
-        :onKeyDown="this.onTriggerKeyDown"
+        @click="toggle"
+        :onKeyDown="onTriggerKeyDown"
       >
         <span class="vmz-ui-select__value">{{ displayLabel }}</span>
         <span class="vmz-ui-select__chev" aria-hidden="true"></span>
@@ -41,8 +41,8 @@
             :value="searchQuery"
             :placeholder="searchPlaceholder"
             :aria-label="searchPlaceholder"
-            @input="this.onSearchInput"
-            :onKeyDown="this.onSearchKeyDown"
+            @input="onSearchInput"
+            :onKeyDown="onSearchKeyDown"
           />
         </div>
         <ul
@@ -50,7 +50,7 @@
           role="listbox"
           :aria-multiselectable="isMultiple ? 'true' : 'false'"
           tabindex="-1"
-          :onKeyDown="this.onListKeyDown"
+          :onKeyDown="onListKeyDown"
         >
           <li v-if="showEmpty" class="vmz-ui-select__empty" role="presentation">{{ emptyText }}</li>
           <li v-for="opt in visibleOptions" :key="opt.value" role="presentation">
@@ -60,12 +60,12 @@
               role="option"
               :data-vmz-option="opt.value"
               :aria-selected="opt.selected ? 'true' : 'false'"
-              @click="this.onOptionClick"
+              @click="onOptionClick"
             >{{ opt.label }}</button>
           </li>
         </ul>
         <div v-if="isMultiple" class="vmz-ui-select__footer">
-          <button type="button" class="vmz-ui-select__done" data-vmz-select="done" @click="this.close">Done</button>
+          <button type="button" class="vmz-ui-select__done" data-vmz-select="done" @click="close">Done</button>
         </div>
       </div>
       <p v-if="description" :id="descriptionId" class="vmz-ui-select__description">{{ description }}</p>

package/src/components/Switch.vmz

@@ -8,8 +8,8 @@
         :aria-checked="checked"
         :aria-describedby="describedBy"
         :disabled="disabled"
-        @click="this.toggle"
-        :onKeyDown="this.onKeyDown"
+        @click="toggle"
+        :onKeyDown="onKeyDown"
       >
         <span class="vmz-ui-switch__thumb" aria-hidden="true"></span>
       </button>

package/src/components/Table.vmz

@@ -1,7 +1,7 @@
 <template>
   <div class="vmz-ui-table-wrap" data-vmz-ui="table" :data-sort-key="sortKey" :data-sort-dir="sortDir">
       <table class="vmz-ui-table">
-        <thead @click="this.onHeadClick">
+        <thead @click="onHeadClick">
           <tr>
             <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id">
               <button type="button" class="vmz-ui-table__sort" :data-vmz-sort="col.id">
@@ -11,7 +11,7 @@
             <th v-if="hasRowAction" scope="col">{{ actionTitle }}</th>
           </tr>
         </thead>
-        <tbody @click="this.onBodyClick">
+        <tbody @click="onBodyClick">
           <tr v-for="row in rows" :key="row.id" :data-vmz-row="row.id">
             <td v-for="cell in row.cells">{{ cell }}</td>
             <td v-if="hasRowAction">

package/src/components/Tabs.vmz

@@ -4,8 +4,8 @@
         class="vmz-ui-tabs__list"
         role="tablist"
         :aria-label="label"
-        :onKeyDown="this.onListKeyDown"
-        @click="this.onListClick"
+        :onKeyDown="onListKeyDown"
+        @click="onListClick"
       >
         <button
           v-for="item in items"

package/src/components/TextArea.vmz

@@ -10,7 +10,7 @@
         :readonly="readonly"
         :aria-invalid="error ? 'true' : 'false'"
         :aria-describedby="describedBy"
-        @input="this.onDomInput"
+        @input="onDomInput"
       ></textarea>
       <p v-if="description" :id="descriptionId" class="vmz-ui-textarea__description">{{ description }}</p>
       <p v-if="error" :id="errorId" class="vmz-ui-textarea__error" role="alert">{{ error }}</p>

package/src/components/Tree.vmz

@@ -6,8 +6,8 @@
         role="tree"
         :aria-labelledby="labelId"
         :aria-label="label"
-        @click="this.onTreeClick"
-        :onKeyDown="this.onTreeKeyDown"
+        @click="onTreeClick"
+        :onKeyDown="onTreeKeyDown"
       >
         <li
           v-for="item in items"

package/src/components/Upload.vmz

@@ -10,10 +10,10 @@
       :data-invalid="invalidAttr"
       :data-vmz-upload-status="status"
       :data-progress="progress"
-      :onDragEnter="this.onDragEnter"
-      :onDragOver="this.onDragOver"
-      :onDragLeave="this.onDragLeave"
-      :onDrop="this.onDrop"
+      :onDragEnter="onDragEnter"
+      :onDragOver="onDragOver"
+      :onDragLeave="onDragLeave"
+      :onDrop="onDrop"
     >
       <label v-if="label" class="vmz-ui-upload__label" :for="controlId">{{ label }}</label>
 
@@ -28,7 +28,7 @@
           :aria-invalid="error ? 'true' : 'false'"
           :aria-describedby="describedBy"
           :data-vmz-upload-directory="directoryAttr"
-          @change="this.onPick"
+          @change="onPick"
         />
         <p class="vmz-ui-upload__hint" data-vmz-upload="hint">{{ zoneHint }}</p>
       </div>
@@ -58,10 +58,10 @@
       <p v-if="resultText" class="vmz-ui-upload__result" data-vmz-upload="result">{{ resultText }}</p>
 
       <div v-if="showActions" class="vmz-ui-upload__actions" data-vmz-upload="actions">
-        <button v-if="canCancel" type="button" class="vmz-ui-upload__cancel" data-vmz-upload="cancel" @click="this.onCancelClick">
+        <button v-if="canCancel" type="button" class="vmz-ui-upload__cancel" data-vmz-upload="cancel" @click="onCancelClick">
           {{ cancelLabel }}
         </button>
-        <button v-if="canResume" type="button" class="vmz-ui-upload__resume" data-vmz-upload="resume" @click="this.onResumeClick">
+        <button v-if="canResume" type="button" class="vmz-ui-upload__resume" data-vmz-upload="resume" @click="onResumeClick">
           {{ resumeLabel }}
         </button>
       </div>