@vueland/ui 0.0.1 → 0.0.3

package/dist/types.d.ts

@@ -1,41 +1,60 @@
-import { ComponentInstance, FunctionalComponent, Directive, Plugin } from 'vue';
+/// <reference path="./components/global-components.d.ts" />
+import { Component, ComponentInstance, FunctionalComponent, Directive, Plugin } from 'vue';
+
+declare enum BreakpointLabels {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    XXL = "xxl"
+}
 
 declare enum IconAliases {
     DROPDOWN = "dropdown",
     CHECKBOX_ON = "checkboxOn",
     CHECKBOX_OFF = "checkboxOff",
-    CALENDAR = "calendar"
+    CALENDAR = "calendar",
+    CHEVRON_LEFT = "chevronLeft",
+    CHEVRON_RIGHT = "chevronRight",
+    RADIO_ON = "radioOn",
+    RADIO_OFF = "radioOff",
+    CLOSE = "close"
 }
 
-type IconsOptions = {
-    dir?: string;
-    aliases?: Partial<Record<IconAliases, any>>;
-};
-interface LibOptions {
-    components: Record<string, ComponentInstance<any> | FunctionalComponent>;
-    directives?: Record<string, Directive>;
-    themes?: Record<string, any>;
-    icons?: IconsOptions;
-    presets?: Record<string, Record<string, any>>;
-    ssr?: boolean;
+type IconMode = 'lib' | 'sprite' | 'component' | 'raw' | string;
+interface UseIconOptions {
+    name?: string | number;
+    source?: IconMode;
+    component?: Component | null;
+    body?: string;
+    viewBox?: string;
+    spritePrefix?: string;
+    spritePath?: string;
 }
+type IconResolverResult = {
+    kind: 'svg';
+    body: string;
+    viewBox?: string;
+} | {
+    kind: 'font';
+    className: string;
+    text?: string;
+} | {
+    kind: 'component';
+    component: Component;
+} | {
+    kind: 'sprite';
+    href: string;
+    viewBox?: string;
+} | null | undefined;
+type IconResolver = (name: string | number, options: UseIconOptions) => IconResolverResult;
 
-type Maybe<T> = T | undefined;
-
-interface DimensionsProps {
-    width?: number | string;
-    height?: number | string;
-    minWidth?: number | string;
-    maxWidth?: number | string;
-    minHeight?: number | string;
-    maxHeight?: number | string;
-}
-
-type ButtonPreset = {
+type CButtonPreset = {
     root?: string[];
     label?: string[];
 };
-type MenuPreset = {
+type CMenuPreset = {
     root?: string[];
     opened?: {
         root?: string[];
@@ -44,58 +63,104 @@ type MenuPreset = {
         root?: string[];
     };
 };
-type InputPreset = {
+type CFieldZone = {
     root?: string[];
-    field?: string[];
     input?: string[];
     label?: string[];
+};
+type CFieldCompoundState = CFieldZone & {
+    focused?: CFieldZone;
+    filled?: CFieldZone;
+};
+type CFieldPreset = CFieldZone & {
+    focused?: CFieldZone;
+    filled?: CFieldZone;
+    error?: CFieldCompoundState;
+    disabled?: CFieldCompoundState;
+    readonly?: CFieldCompoundState;
+    prepended?: CFieldZone;
+    appended?: CFieldZone;
+};
+type CInputZone = {
+    root?: string[];
+    label?: string[];
+    input?: string[];
     details?: string[];
-    prepend?: string[];
-    append?: string[];
-    focused?: {
-        root?: string[];
-        field?: string[];
-        label?: string[];
-        append?: string[];
-    };
-    error?: {
-        root?: string[];
-        field?: string[];
-        label?: string[];
-        input?: string[];
-        details?: string[];
-    };
-    disabled?: {
-        root?: string[];
-        field?: string[];
-        input?: string[];
-        label?: string[];
-    };
-    readonly?: {
-        root?: string[];
-        field?: string[];
-        input?: string[];
-    };
-    hasValue?: {
-        root?: string[];
-        label?: string[];
-    };
-    hasPrepend?: {
-        root?: string[];
-        field?: string[];
-        input?: string[];
-        label?: string[];
-        prepend?: string[];
-    };
-    hasAppend?: {
-        root?: string[];
-        field?: string[];
-        input?: string[];
-        append?: string[];
-    };
 };
+type CInputCompoundState = CInputZone & {
+    focused?: CInputZone;
+    filled?: CInputZone;
+};
+type CInputPreset = CInputZone & {
+    focused?: CInputZone;
+    filled?: CInputZone;
+    error?: CInputCompoundState;
+    disabled?: CInputCompoundState;
+    readonly?: CInputCompoundState;
+    prepended?: CInputZone;
+    appended?: CInputZone;
+};
+
+interface DimensionsProps {
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+}
+
+type ThemeDefinition = {
+    primary?: string;
+    onPrimary?: string;
+    secondary?: string;
+    success?: string;
+    error?: string;
+    warning?: string;
+    info?: string;
+    accent?: string;
+    background?: string;
+    surface?: string;
+    surfaceVariant?: string;
+    onSurface?: string;
+    text?: string;
+    textSecondary?: string;
+    placeholder?: string;
+    disabled?: string;
+    disabledBg?: string;
+    disabledOpacity?: string;
+    readonly?: string;
+    readonlyBg?: string;
+    focus?: string;
+    errorBg?: string;
+    hover?: string;
+    overlay?: string;
+    shadow?: string;
+    border?: string;
+    radius?: string;
+    [key: string]: string | undefined;
+};
+type ThemesOptions = Record<string, ThemeDefinition>;
+
+type Maybe<T> = T | undefined;
+
+type IconsOptions = {
+    dir?: string;
+    aliases?: Partial<Record<IconAliases, any>>;
+    sets?: Record<string, any>;
+};
+interface LibOptions {
+    components: Record<string, ComponentInstance<any> | FunctionalComponent>;
+    directives?: Record<string, Directive>;
+    themes?: ThemesOptions;
+    breakpoints?: Record<BreakpointLabels, number>;
+    icons?: IconsOptions;
+    presets?: Record<string, Record<string, any>>;
+    theme?: string;
+    ssr?: boolean;
+}
 
 declare function createVuelandUI(options: LibOptions): Plugin;
 
 export { createVuelandUI };
-export type { ButtonPreset, DimensionsProps, InputPreset, Maybe, MenuPreset };
+export type { CButtonPreset, CFieldPreset, CFieldZone, CInputPreset, CMenuPreset, DimensionsProps, IconMode, IconResolver, IconResolverResult, Maybe, ThemeDefinition, ThemesOptions, UseIconOptions };

package/dist/utils/aria.js

@@ -0,0 +1,95 @@
+import { ARIA } from '../constants/aria.js';
+
+function attr(key, value) {
+  if (value === void 0) return {};
+  return { [key]: `${value}` };
+}
+function ariaExpanded(value) {
+  return attr(ARIA.EXPANDED, value);
+}
+function ariaHaspopup(value = true) {
+  return attr(ARIA.HASPOPUP, value);
+}
+function ariaControls(id) {
+  return attr(ARIA.CONTROLS, id);
+}
+function ariaLabel(value) {
+  return attr(ARIA.LABEL, value);
+}
+function ariaLabelledBy(id) {
+  return attr(ARIA.LABELLEDBY, id);
+}
+function ariaDescribedBy(id) {
+  return attr(ARIA.DESCRIBEDBY, id);
+}
+function ariaErrorMessage(id) {
+  return attr(ARIA.ERRORMESSAGE, id);
+}
+function ariaHidden(value) {
+  return attr(ARIA.HIDDEN, value);
+}
+function ariaDisabled(value) {
+  if (!value) return {};
+  return attr(ARIA.DISABLED, true);
+}
+function ariaInvalid(value) {
+  if (!value) return {};
+  return attr(ARIA.INVALID, true);
+}
+function ariaReadonly(value) {
+  if (!value) return {};
+  return attr(ARIA.READONLY, true);
+}
+function ariaRequired(value) {
+  if (!value) return {};
+  return attr(ARIA.REQUIRED, true);
+}
+function ariaSelected(value) {
+  return attr(ARIA.SELECTED, value);
+}
+function ariaMultiselectable(value) {
+  if (!value) return {};
+  return attr(ARIA.MULTISELECTABLE, true);
+}
+function ariaLive(value) {
+  return attr(ARIA.LIVE, value);
+}
+function ariaCurrent(value) {
+  if (!value) return {};
+  return attr(ARIA.CURRENT, value);
+}
+function ariaPressed(value) {
+  return attr(ARIA.PRESSED, value);
+}
+function ariaChecked(value) {
+  return attr(ARIA.CHECKED, value);
+}
+function ariaValue(opts) {
+  return {
+    ...attr(ARIA.VALUENOW, opts.now !== void 0 ? String(opts.now) : void 0),
+    ...attr(ARIA.VALUEMIN, opts.min !== void 0 ? String(opts.min) : void 0),
+    ...attr(ARIA.VALUEMAX, opts.max !== void 0 ? String(opts.max) : void 0),
+    ...attr(ARIA.VALUETEXT, opts.text)
+  };
+}
+function ariaModal(value = true) {
+  return attr(ARIA.MODAL, value);
+}
+function ariaActiveDescendant(id) {
+  return attr(ARIA.ACTIVEDESCENDANT, id);
+}
+function ariaAutocomplete(value) {
+  return attr(ARIA.AUTOCOMPLETE, value);
+}
+function ariaOrientation(value) {
+  return attr(ARIA.ORIENTATION, value);
+}
+function ariaExpandable(expanded, opts = {}) {
+  return {
+    ...ariaExpanded(expanded),
+    ...opts.haspopup !== void 0 ? ariaHaspopup(opts.haspopup) : {},
+    ...ariaControls(opts.controls)
+  };
+}
+
+export { ariaActiveDescendant, ariaAutocomplete, ariaChecked, ariaControls, ariaCurrent, ariaDescribedBy, ariaDisabled, ariaErrorMessage, ariaExpandable, ariaExpanded, ariaHaspopup, ariaHidden, ariaInvalid, ariaLabel, ariaLabelledBy, ariaLive, ariaModal, ariaMultiselectable, ariaOrientation, ariaPressed, ariaReadonly, ariaRequired, ariaSelected, ariaValue };

package/dist/utils/compile-css-classes.js

@@ -161,20 +161,13 @@ const plainColorUtilsProcessor = {
       const className = escapeClassName(meta.cleanName);
       const value = resolveCssValue(entry.value, meta.kind, ctx.options.colorKinds);
       chunks.push(
-        formatRule(
-          `.${className}`,
-          [createDecl(meta.property, value)],
-          ctx.options.minify
-        )
+        formatRule(`.${className}`, [createDecl(meta.property, value)], ctx.options.minify)
       );
       if (ctx.options.generateStates.hover && (meta.kind === "bg" || meta.kind === "clr")) {
         chunks.push(
           formatRule(
             `.hover\\:${className}:hover`,
-            [
-              createDecl(meta.property, value),
-              createTransitionDecl(meta.property)
-            ],
+            [createDecl(meta.property, value), createTransitionDecl(meta.property)],
             ctx.options.minify
           )
         );
@@ -183,10 +176,7 @@ const plainColorUtilsProcessor = {
         chunks.push(
           formatRule(
             `.active\\:${className}:active`,
-            [
-              createDecl(meta.property, value),
-              createTransitionDecl(meta.property)
-            ],
+            [createDecl(meta.property, value), createTransitionDecl(meta.property)],
             ctx.options.minify
           )
         );

package/dist/utils/create-simple-functional.js

@@ -5,11 +5,7 @@ const createSimpleInstance = (c, el = "div", name = "") => {
   return defineComponent({
     name: _name,
     setup(_, { slots }) {
-      const propsData = {
-        class: {
-          [c.trim()]: true
-        }
-      };
+      const propsData = { class: { [c.trim()]: true } };
       return () => h(el, propsData, slots.default && slots.default());
     }
   });

package/dist/utils/index.d.ts

@@ -1,16 +1,43 @@
 import * as vue from 'vue';
 import { FunctionalComponent } from 'vue';
 
-declare function throttle<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
-
-declare function convertToUnit(str: string | number, unit?: string): string;
-
-declare const createSimpleInstance: (c: string, el?: string, name?: string) => vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare function createFunctionalComponent(cls: string, tag?: string): FunctionalComponent;
+type AriaHaspopup = 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+type AriaLive = 'off' | 'polite' | 'assertive';
+type AriaCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
 
-declare const IN_BROWSER: boolean;
+type AriaAttrs = Partial<Record<string, string>>;
+declare function ariaExpanded(value: boolean): AriaAttrs;
+declare function ariaHaspopup(value?: AriaHaspopup | boolean): AriaAttrs;
+declare function ariaControls(id: string | undefined): AriaAttrs;
+declare function ariaLabel(value: string | undefined): AriaAttrs;
+declare function ariaLabelledBy(id: string | undefined): AriaAttrs;
+declare function ariaDescribedBy(id: string | undefined): AriaAttrs;
+declare function ariaErrorMessage(id: string | undefined): AriaAttrs;
+declare function ariaHidden(value: boolean): AriaAttrs;
+declare function ariaDisabled(value: boolean | undefined): AriaAttrs;
+declare function ariaInvalid(value: boolean | undefined): AriaAttrs;
+declare function ariaReadonly(value: boolean | undefined): AriaAttrs;
+declare function ariaRequired(value: boolean | undefined): AriaAttrs;
+declare function ariaSelected(value: boolean | undefined): AriaAttrs;
+declare function ariaMultiselectable(value: boolean | undefined): AriaAttrs;
+declare function ariaLive(value: AriaLive): AriaAttrs;
+declare function ariaCurrent(value: AriaCurrent | boolean | undefined): AriaAttrs;
+declare function ariaPressed(value: boolean | undefined): AriaAttrs;
+declare function ariaChecked(value: boolean | 'mixed' | undefined): AriaAttrs;
+declare function ariaValue(opts: {
+    now?: number;
+    min?: number;
+    max?: number;
+    text?: string;
+}): AriaAttrs;
+declare function ariaModal(value?: boolean): AriaAttrs;
+declare function ariaActiveDescendant(id: string | undefined): AriaAttrs;
+declare function ariaAutocomplete(value: 'none' | 'inline' | 'list' | 'both'): AriaAttrs;
+declare function ariaOrientation(value: 'horizontal' | 'vertical'): AriaAttrs;
+declare function ariaExpandable(expanded: boolean, opts?: {
+    haspopup?: AriaHaspopup | boolean;
+    controls?: string;
+}): AriaAttrs;
 
 type ThemeTokensInput = Record<string, string> | string[];
 type PropertyMap = Record<string, string>;
@@ -27,4 +54,15 @@ interface CompileThemeCssOptions {
 }
 declare function compileCssClasses(input: ThemeTokensInput, options?: CompileThemeCssOptions): string;
 
-export { IN_BROWSER, compileCssClasses, convertToUnit, createFunctionalComponent, createSimpleInstance, throttle };
+declare function convertToUnit(str: string | number, unit?: string): string;
+
+declare const createSimpleInstance: (c: string, el?: string, name?: string) => vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare function createFunctionalComponent(cls: string, tag?: string): FunctionalComponent;
+
+declare const IN_BROWSER: boolean;
+
+declare function throttle<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
+
+export { IN_BROWSER, ariaActiveDescendant, ariaAutocomplete, ariaChecked, ariaControls, ariaCurrent, ariaDescribedBy, ariaDisabled, ariaErrorMessage, ariaExpandable, ariaExpanded, ariaHaspopup, ariaHidden, ariaInvalid, ariaLabel, ariaLabelledBy, ariaLive, ariaModal, ariaMultiselectable, ariaOrientation, ariaPressed, ariaReadonly, ariaRequired, ariaSelected, ariaValue, compileCssClasses, convertToUnit, createFunctionalComponent, createSimpleInstance, throttle };

package/dist/utils/index.js

@@ -1,5 +1,6 @@
-export { throttle } from './throttle.js';
+export { ariaActiveDescendant, ariaAutocomplete, ariaChecked, ariaControls, ariaCurrent, ariaDescribedBy, ariaDisabled, ariaErrorMessage, ariaExpandable, ariaExpanded, ariaHaspopup, ariaHidden, ariaInvalid, ariaLabel, ariaLabelledBy, ariaLive, ariaModal, ariaMultiselectable, ariaOrientation, ariaPressed, ariaReadonly, ariaRequired, ariaSelected, ariaValue } from './aria.js';
+export { compileCssClasses } from './compile-css-classes.js';
 export { convertToUnit } from './convert-to-unit.js';
 export { createFunctionalComponent, createSimpleInstance } from './create-simple-functional.js';
 export { IN_BROWSER } from './globals.js';
-export { compileCssClasses } from './compile-css-classes.js';
+export { throttle } from './throttle.js';

package/package.json

@@ -1,9 +1,19 @@
 {
   "name": "@vueland/ui",
   "description": "Vue 3 component library for the Vueland platform",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
+  "license": "MIT",
   "type": "module",
+  "author": {
+    "name": "Anar Allakhverdiev",
+    "url": "https://github.com/wiseadme"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vueland/vueland.git",
+    "directory": "/"
+  },
   "sideEffects": [
     "**/*.scss",
     "**/*.css"
@@ -20,8 +30,6 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
-    "./styles.css": "./dist/styles.css",
-    "./css/utils/*": "./dist/css/utils/*",
     "./components": {
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js",
@@ -37,6 +45,11 @@
       "import": "./dist/directives/index.js",
       "require": "./dist/directives/index.js"
     },
+    "./resolvers": {
+      "types": "./dist/resolvers/index.d.ts",
+      "import": "./dist/resolvers/index.js",
+      "require": "./dist/resolvers/index.js"
+    },
     "./constants": {
       "types": "./dist/constants/index.d.ts",
       "import": "./dist/constants/index.js",
@@ -52,11 +65,23 @@
       "import": "./dist/utils/index.js",
       "require": "./dist/utils/index.js"
     },
-    "./css/themes/default-theme.css": "./dist/css/themes/default-theme.css"
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.d.ts"
+    },
+    "./css/lib.css": "./dist/css/lib.css",
+    "./styles.css": "./dist/styles.css",
+    "./css/utils/*": "./dist/css/utils/*",
+    "./styles/scss/styles.scss": "./dist/scss/styles.scss",
+    "./styles/scss/lib.scss": "./dist/scss/lib.scss"
   },
   "peerDependencies": {
     "vue": "^3.5.27"
   },
+  "engines": {
+    "node": ">=20.19.0",
+    "pnpm": ">=10"
+  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
@@ -64,6 +89,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vitest/coverage-v8": "^4.0.18",
     "@vue/compiler-sfc": "^3.5.27",
     "@vue/test-utils": "^2.4.6",
@@ -84,17 +110,17 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "pnpm run clean && pnpm run build:js && pnpm run build:types",
-    "build:deploy": "pnpm run build:types && rollup -c ./build/rollup.config.mjs && pnpm run copy:all && pnpm run types:clean",
-    "copy:all": "node ./build/copy-dts.mjs && node ./build/insert-ref.mjs",
+    "build": "pnpm run clean && pnpm run build:js && pnpm run build:types && pnpm run build:scss",
     "build:js": "rollup -c ./build/rollup.config.mjs",
-    "build-lib": "pnpm run build:types && rollup -c ./build/rollup.config.mjs",
+    "build:scss": "node ./build/copy-scss.mjs",
+    "build-lib": "pnpm run build:types && rollup -c ./build/rollup.config.mjs && pnpm run gen:globals && node ./build/insert-ref.mjs && pnpm run build:scss",
     "build:types": "vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly",
     "test:lib": "vitest run -c vitest.config.ts",
     "test:deploy": "vitest run -c vitest.config.ts",
     "test:watch": "vitest -c vitest.config.ts",
     "typecheck": "vue-tsc -p tsconfig.build.json --noEmit",
     "types:clean": "rimraf dist/temp-types",
-    "lint:lib": "eslint ."
+    "lint:lib": "eslint .",
+    "gen:globals": "node ./build/generate-global-components.mjs"
   }
 }

package/dist/components/CItems/CItems.js

@@ -1,66 +0,0 @@
-import { defineComponent, h } from 'vue';
-import { CListItemTitle } from '../CList/index.js';
-import _sfc_main from '../CList/CList.js';
-import _sfc_main$1 from '../CList/CListItem.js';
-
-const CItems = defineComponent({
-  name: "CItems",
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [Array, Object, String, Number],
-      default: () => []
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    items: {
-      type: Array,
-      default: () => []
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    mandatory: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["update:modelValue"],
-  slots: {},
-  setup(props, { emit, slots }) {
-    var _a;
-    const { extKey, noItemsMessage } = (_a = props.options) != null ? _a : {};
-    const genItemTitle = (value) => h(CListItemTitle, {}, {
-      default: () => value
-    });
-    const genItem = (item) => h(_sfc_main$1, {
-      value: item
-    }, {
-      default: () => [
-        genItemTitle(extKey ? item[extKey] : item)
-      ]
-    });
-    const genEmptyMessage = () => h(_sfc_main$1, null, {
-      default: () => {
-        var _a2, _b;
-        return genItemTitle((_b = (_a2 = slots["no-items-message"]) == null ? void 0 : _a2.call(slots)) != null ? _b : noItemsMessage);
-      }
-    });
-    return () => h(_sfc_main, {
-      modelValue: props.modelValue,
-      items: props.items,
-      multiple: props.multiple,
-      mandatory: props.mandatory,
-      ["onUpdate:modelValue"]: (val) => {
-        emit("update:modelValue", val);
-      }
-    }, {
-      default: () => props.items.length ? props.items.map(genItem) : genEmptyMessage()
-    });
-  }
-});
-
-export { CItems };

package/dist/composables/use-field-attrs.js

@@ -1,43 +0,0 @@
-import { computed } from 'vue';
-
-const FIELD_ATTRS = /* @__PURE__ */ new Set([
-  "type",
-  "name",
-  "id",
-  "placeholder",
-  "autocomplete",
-  "autofocus",
-  "inputmode",
-  "pattern",
-  "min",
-  "max",
-  "step",
-  "minlength",
-  "maxlength",
-  "readonly",
-  "disabled",
-  "required",
-  "tabindex",
-  "enterkeyhint"
-]);
-function useFieldAttrs({ props, attrs, errors, uid }) {
-  return computed(() => {
-    const map = Object.entries(attrs).reduce((acc, [k, v]) => {
-      if (!props[k] && FIELD_ATTRS.has(k) || k.startsWith("aria-") || k.startsWith("data-")) {
-        acc[k] = v;
-      }
-      return acc;
-    }, {});
-    return {
-      "aria-labelledby": `${uid}-label`,
-      ...!props.noDetails ? { "aria-describedby": `${uid}-details` } : {},
-      ...errors.hasError ? { "aria-invalid": errors.hasError } : {},
-      ...errors.errorMessage ? { "aria-errormessage": errors.errorMessage } : {},
-      ...props.readonly ? { "aria-readonly": props.readonly } : {},
-      ...props.disabled ? { "aria-disabled": props.disabled } : {},
-      ...map
-    };
-  });
-}
-
-export { useFieldAttrs };