@xleddyl/443-components-vue 0.2.3 → 0.3.0

package/dist/components/forms/FileInput.vue

@@ -8,7 +8,8 @@
     'is-over': over,
     'is-disabled': control.disabled.value,
     'is-invalid': control.invalid.value,
-    'has-files': files.length > 0
+    'is-loading': loading,
+    'has-files': list && files.length > 0
   },
   props.class
 ]"
@@ -22,7 +23,8 @@
          :disabled="control.disabled.value || void 0"
          :aria-required="control.required.value ? 'true' : void 0"
          :aria-invalid="control.invalid.value ? 'true' : void 0"
-         :aria-disabled="readonly ? 'true' : void 0"
+         :aria-disabled="readonly || loading ? 'true' : void 0"
+         :aria-busy="loading ? 'true' : void 0"
          :aria-describedby="
   joinIds(
     $attrs['aria-describedby'],
@@ -35,11 +37,12 @@
          @click="browse"
       >
          <span class="k-file-input-dropzone-icon" aria-hidden="true">
-            <Icon :name="over ? 'arrow-up-tray' : icon" />
+            <Spinner v-if="loading" size="sm" decorative />
+            <Icon v-else :name="over ? 'arrow-up-tray' : icon" />
          </span>
          <span class="k-file-input-dropzone-text">
             <span class="k-file-input-dropzone-title">
-               <slot name="title" :over="over">{{ over ? dropLabel : titleLabel }}</slot>
+               <slot name="title" :over="over" :loading="loading">{{ currentTitle }}</slot>
             </span>
             <span v-if="hint" :id="hintId" class="k-file-input-dropzone-hint">{{ hint }}</span>
          </span>
@@ -52,19 +55,21 @@
          aria-hidden="true"
          :name="formName"
          :accept="acceptAttr"
-         :multiple="multiple || void 0"
+         :multiple="isMultiple || void 0"
          :capture="capture"
          :disabled="control.disabled.value || void 0"
          @change="onNativeChange"
       />
-      <ul v-if="files.length" role="list" class="k-file-input-list" :aria-label="listText">
+      <ul v-if="list && files.length" role="list" class="k-file-input-list" :aria-label="listText">
          <li v-for="file in files" :key="fileKey(file)" class="k-file-input-item">
             <span class="k-file-input-thumb" aria-hidden="true">
                <img v-if="previews[fileKey(file)]" :src="previews[fileKey(file)]" alt="" />
                <Icon v-else name="document" />
             </span>
             <span class="k-file-input-meta">
-               <span class="k-file-input-name" :title="file.name">{{ file.name }}</span>
+               <span class="k-file-input-name" :title="filePath(file)">{{
+                  directory ? filePath(file) : file.name
+               }}</span>
                <span class="k-file-input-size">{{ formatBytes(file.size, resolvedLocale) }}</span>
             </span>
             <Button
@@ -73,7 +78,7 @@
                variant="ghost"
                tone="neutral"
                icon="x-mark"
-               :aria-label="`${removeText} ${file.name}`"
+               :aria-label="`${removeText} ${directory ? filePath(file) : file.name}`"
                :title="removeText"
                @click="removeFile(file)"
             />
@@ -96,17 +101,20 @@ import {
 } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { useLocale } from "../../composables/useLocale";
-import { useFileDrop } from "../../composables/useFileDrop";
 import { joinIds } from "../../internal/forms/control";
+import { readDroppedFiles, useFileDrop } from "../../composables/useFileDrop";
 import {
   fileKey,
+  filePath,
   formatBytes,
   isImageFile,
   matchesAccept,
-  parseAccept
+  parseAccept,
+  setFilePath
 } from "../../internal/forms/files";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
+import Spinner from "../core/Spinner.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   name: { type: String, required: false },
@@ -114,6 +122,10 @@ const props = defineProps({
   maxSize: { type: Number, required: false },
   maxFiles: { type: Number, required: false },
   multiple: { type: Boolean, required: false },
+  directory: { type: Boolean, required: false },
+  list: { type: Boolean, required: false, default: true },
+  loading: { type: Boolean, required: false },
+  loadingText: { type: String, required: false },
   capture: { type: String, required: false },
   previews: { type: Boolean, required: false, default: true },
   size: { type: String, required: false, default: "md" },
@@ -134,13 +146,19 @@ const props = defineProps({
 });
 const { locale: appLocale, t } = useLocale();
 const resolvedLocale = computed(() => props.locale ?? appLocale.value.code);
-const titleLabel = computed(() => props.title ?? t("fileInput.title"));
+const titleLabel = computed(
+  () => props.title ?? t(props.directory ? "fileInput.directoryTitle" : "fileInput.title")
+);
+const loadingLabel = computed(() => props.loadingText ?? t("fileInput.loading"));
 const dropLabel = computed(() => props.dropText ?? t("fileInput.drop"));
 const removeText = computed(() => props.removeLabel ?? t("common.remove"));
 const listText = computed(() => props.listLabel ?? t("fileInput.list"));
 function announceCount(count) {
   return props.announce ? props.announce(count) : t("fileInput.selected", { count });
 }
+function announceAdded(count) {
+  return props.announce ? props.announce(count) : t("fileInput.added", { count });
+}
 const model = defineModel({ type: null });
 const emit = defineEmits(["invalid", "add", "remove"]);
 const hintId = `${useId()}-hint`;
@@ -163,10 +181,27 @@ const files = computed(() => {
 const acceptList = computed(() => parseAccept(props.accept));
 const acceptAttr = computed(() => acceptList.value.join(",") || void 0);
 const formName = computed(() => props.name ?? control.field?.name.value);
-const interactive = computed(() => !control.disabled.value && !props.readonly);
+const interactive = computed(() => !control.disabled.value && !props.readonly && !props.loading);
+const isMultiple = computed(() => props.multiple || props.directory);
+const currentTitle = computed(() => {
+  if (props.loading) return loadingLabel.value;
+  return over.value ? dropLabel.value : titleLabel.value;
+});
+function toEntries(list) {
+  return list.map((file) => ({ file, path: filePath(file) }));
+}
 const { over } = useFileDrop(rootRef, {
   disabled: () => !interactive.value,
-  onDrop: (dropped) => addFiles(dropped)
+  onDrop: (dropped, event) => {
+    const transfer = event.dataTransfer;
+    if (!props.directory) {
+      addEntries(toEntries(dropped), { source: "drop", event, dataTransfer: transfer });
+      return;
+    }
+    void readDroppedFiles(transfer).then(
+      (entries) => addEntries(entries, { source: "drop", event, dataTransfer: transfer })
+    );
+  }
 });
 function browse() {
   if (!interactive.value) return;
@@ -180,12 +215,23 @@ function validate(file) {
   return void 0;
 }
 function addFiles(incoming) {
-  if (!interactive.value || !incoming.length) return;
+  addEntries(toEntries(incoming), {
+    source: "browse",
+    event: new Event("add"),
+    dataTransfer: null
+  });
+}
+function addEntries(incomingEntries, origin) {
+  if (!interactive.value || !incomingEntries.length) return;
+  for (const entry of incomingEntries) setFilePath(entry.file, entry.path);
+  const incoming = incomingEntries.map((entry) => entry.file);
+  const multiple = isMultiple.value;
   const accepted = [];
-  const existing = new Set(files.value.map(fileKey));
-  const limit = props.multiple ? props.maxFiles ?? Infinity : 1;
-  const room = props.multiple ? limit - files.value.length : 1;
-  for (const file of props.multiple ? incoming : incoming.slice(0, 1)) {
+  const kept = props.list ? files.value : [];
+  const existing = new Set(kept.map(fileKey));
+  const limit = multiple ? props.maxFiles ?? Infinity : 1;
+  const room = multiple ? limit - kept.length : 1;
+  for (const file of multiple ? incoming : incoming.slice(0, 1)) {
     const problem = validate(file);
     if (problem) {
       emit("invalid", problem);
@@ -199,23 +245,29 @@ function addFiles(incoming) {
     accepted.push(file);
     existing.add(fileKey(file));
   }
-  if (!props.multiple && incoming.length > 1)
+  if (!multiple && incoming.length > 1)
     for (const file of incoming.slice(1)) emit("invalid", { reason: "count", file, limit: 1 });
   if (!accepted.length) return;
-  model.value = props.multiple ? [...files.value, ...accepted] : accepted[0];
-  emit("add", accepted);
-  announcement.value = announceCount(props.multiple ? files.value.length : 1);
+  if (props.list) model.value = multiple ? [...files.value, ...accepted] : accepted[0];
+  emit("add", accepted, { ...origin, entries: toEntries(accepted) });
+  announcement.value = props.list ? announceCount(multiple ? files.value.length : 1) : announceAdded(accepted.length);
 }
 function onNativeChange(event) {
   const target = event.target;
-  addFiles(Array.from(target.files ?? []));
+  const picked = Array.from(target.files ?? []);
+  addEntries(toEntries(picked), { source: "browse", event, dataTransfer: null });
   target.value = "";
 }
+function syncDirectory() {
+  const input = inputRef.value;
+  if (!input) return;
+  input.webkitdirectory = props.directory;
+}
 function removeFile(file) {
   const key = fileKey(file);
-  model.value = props.multiple ? files.value.filter((entry) => fileKey(entry) !== key) : null;
+  model.value = isMultiple.value ? files.value.filter((entry) => fileKey(entry) !== key) : null;
   emit("remove", file);
-  announcement.value = announceCount(props.multiple ? files.value.length : 0);
+  announcement.value = announceCount(isMultiple.value ? files.value.length : 0);
   buttonRef.value?.focus();
 }
 function syncPreviews(current) {
@@ -234,7 +286,7 @@ function syncPreviews(current) {
 }
 function syncNativeInput(current) {
   const input = inputRef.value;
-  if (!input || typeof DataTransfer === "undefined") return;
+  if (!input || !props.list || typeof DataTransfer === "undefined") return;
   try {
     const transfer = new DataTransfer();
     for (const file of current) transfer.items.add(file);
@@ -247,8 +299,10 @@ watch(files, (current) => {
   syncPreviews(current);
   syncNativeInput(current);
 });
+watch(() => props.directory, syncDirectory);
 onMounted(() => {
   mounted.value = true;
+  syncDirectory();
   syncPreviews(files.value);
 });
 onBeforeUnmount(() => {

package/dist/components/forms/FileInput.vue.d.ts

@@ -1,13 +1,14 @@
 import type { IconName } from '../../composables/useIcons';
 import type { FieldSize } from '../core/types';
-import type { FileInvalidEvent } from './types';
+import type { FileAddDetail, FileInvalidEvent } from './types';
 declare function browse(): void;
 declare function addFiles(incoming: File[]): void;
-declare var __VLS_6: {
+declare var __VLS_11: {
     over: boolean;
+    loading: boolean;
 };
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_6) => any;
+    title?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     name?: string | undefined;
@@ -15,6 +16,10 @@ declare const __VLS_base: import("vue").DefineComponent<{
     maxSize?: number;
     maxFiles?: number;
     multiple?: boolean;
+    directory?: boolean;
+    list?: boolean;
+    loading?: boolean;
+    loadingText?: string;
     capture?: "user" | "environment";
     previews?: boolean;
     size?: FieldSize;
@@ -39,8 +44,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     form?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    type?: "submit" | "reset" | "button" | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -141,6 +144,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -151,7 +155,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -188,6 +192,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -239,7 +244,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (file: File) => any;
     invalid: (event: FileInvalidEvent) => any;
-    add: (files: File[]) => any;
+    add: (files: File[], detail: FileAddDetail) => any;
     "update:modelValue": (value: File | File[] | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
     name?: string | undefined;
@@ -247,6 +252,10 @@ declare const __VLS_base: import("vue").DefineComponent<{
     maxSize?: number;
     maxFiles?: number;
     multiple?: boolean;
+    directory?: boolean;
+    list?: boolean;
+    loading?: boolean;
+    loadingText?: string;
     capture?: "user" | "environment";
     previews?: boolean;
     size?: FieldSize;
@@ -271,8 +280,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     form?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    type?: "submit" | "reset" | "button" | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -373,6 +380,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -383,7 +391,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -420,6 +428,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -467,11 +476,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{
     onRemove?: ((file: File) => any) | undefined;
     onInvalid?: ((event: FileInvalidEvent) => any) | undefined;
-    onAdd?: ((files: File[]) => any) | undefined;
+    onAdd?: ((files: File[], detail: FileAddDetail) => any) | undefined;
     "onUpdate:modelValue"?: ((value: File | File[] | null | undefined) => any) | undefined;
 }>, {
     icon: IconName;
     invalid: boolean;
+    list: boolean;
     size: FieldSize;
     previews: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/forms/InputAddon.vue.d.ts

@@ -63,7 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -259,7 +259,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/components/forms/InputGroup.vue.d.ts

@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -256,7 +256,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/components/forms/NumberInput.vue.d.ts

@@ -31,8 +31,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     name?: string | undefined | undefined;
-    type?: import("vue").InputTypeHTMLAttribute | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -135,6 +133,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: import("vue").InputTypeHTMLAttribute | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
@@ -146,7 +145,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -183,6 +182,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -275,8 +275,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     name?: string | undefined | undefined;
-    type?: import("vue").InputTypeHTMLAttribute | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -379,6 +377,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: import("vue").InputTypeHTMLAttribute | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
@@ -390,7 +389,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -427,6 +426,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;

package/dist/components/forms/PasswordInput.vue.d.ts

@@ -34,8 +34,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
-    type?: string | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -138,6 +136,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    type?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
@@ -186,6 +185,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     step?: (string | number) | undefined;
@@ -232,6 +232,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
     formtarget?: string | undefined;
     popovertarget?: string;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction;
+    onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     clearable?: boolean;
     clearLabel?: string;
     noAutofill?: boolean;
@@ -248,12 +254,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
-    onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
 }, {
     focus: () => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -293,8 +293,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
-    type?: string | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -397,6 +395,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    type?: string | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
@@ -445,6 +444,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     step?: (string | number) | undefined;
@@ -491,6 +491,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
     formtarget?: string | undefined;
     popovertarget?: string;
     popovertargetaction?: import("../../index.ts").PopoverTargetAction;
+    onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     clearable?: boolean;
     clearLabel?: string;
     noAutofill?: boolean;
@@ -507,12 +513,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     src?: string | undefined;
     onCancel?: ((payload: Event) => void) | undefined;
     modelModifiers?: Partial<Record<"number" | "trim", true>>;
-    onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
 }> & Readonly<{
     onGenerate?: ((password: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;

package/dist/components/forms/PinInput.vue.d.ts

@@ -29,8 +29,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     name?: string | undefined | undefined;
-    type?: import("vue").InputTypeHTMLAttribute | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -133,6 +131,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: import("vue").InputTypeHTMLAttribute | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
@@ -144,7 +143,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -181,6 +180,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     step?: (string | number) | undefined;
@@ -273,8 +273,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     name?: string | undefined | undefined;
-    type?: import("vue").InputTypeHTMLAttribute | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -377,6 +375,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     height?: (string | number) | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: import("vue").InputTypeHTMLAttribute | undefined;
     width?: (string | number) | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
@@ -388,7 +387,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -425,6 +424,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     step?: (string | number) | undefined;