@volverjs/ui-vue 0.0.10-beta.2 → 0.0.10-beta.21

package/dist/stories/AlertGroup/AlertGroupWithComposable.stories.d.ts

@@ -3,4 +3,4 @@ import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue';
 import { type Story } from './AlertGroup.stories';
 declare const meta: Meta<typeof VvAlertGroup>;
 export default meta;
-export declare const UseComposable: Story;
+export declare const Default: Story;

package/dist/stories/Blurhash/BlurhashComposable.stories.d.ts

@@ -0,0 +1,4 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;

package/dist/stories/Combobox/Combobox.settings.d.ts

@@ -332,6 +332,14 @@ export declare const argTypes: {
             };
         };
     };
+    'update:search': {
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
     placement: {
         description: string;
         options: (import("../../constants").Side | import("../../constants").Placement)[];

package/dist/stories/Icon/Icon.settings.d.ts

@@ -1,6 +1,7 @@
 export declare const defaultArgs: {
     name: string;
     width: number;
+    prefix: import("@/components/VvIcon").IconPrefix;
 };
 export declare const argTypes: {
     modifiers: {

package/dist/stories/InputFile/InputFile.settings.d.ts

@@ -0,0 +1,56 @@
+export declare const defaultArgs: {
+    name: string;
+    label: string;
+};
+export declare const argTypes: {
+    modifiers: {
+        options: string[];
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    'drop-area': {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'update:model-value': {
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    hintLabel: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+    };
+    hint: {
+        description: string;
+        control: {
+            type: string;
+        };
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+};

package/dist/stories/InputFile/InputFile.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof VvInputFile>;
+export declare const Default: Story;
+export declare const Readonly: Story;
+export declare const Valid: Story;
+export declare const Invalid: Story;
+export declare const Hint: Story;
+export declare const Loading: Story;
+export declare const Progress: Story;

package/dist/stories/InputFile/InputFileDropArea.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue';
+declare const meta: Meta<typeof VvInputFile>;
+export default meta;
+type Story = StoryObj<typeof VvInputFile>;
+export declare const Default: Story;
+export declare const InputHidden: Story;
+export declare const Square: Story;
+export declare const Circle: Story;

package/dist/stories/InputFile/InputFileIconPosition.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue';
+declare const meta: Meta<typeof VvInputFile>;
+export default meta;
+type Story = StoryObj<typeof VvInputFile>;
+export declare const DefaultPosition: Story;
+export declare const After: Story;
+export declare const Src: Story;

package/dist/stories/InputFile/InputFileSlots.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue';
+declare const meta: Meta<typeof VvInputFile>;
+export default meta;
+type Story = StoryObj<typeof VvInputFile>;
+export declare const DropArea: Story;
+export declare const Hint: Story;

package/dist/stories/Tab/Tab.settings.d.ts

@@ -1,37 +1,4 @@
-export declare const defaultArgs: {
-    items: ({
-        title: string;
-        href: string;
-        to?: undefined;
-        id?: undefined;
-        on?: undefined;
-    } | {
-        title: string;
-        to: string;
-        href?: undefined;
-        id?: undefined;
-        on?: undefined;
-    } | {
-        id: string;
-        title: string;
-        to: string;
-        on: {
-            click: () => void;
-        };
-        href?: undefined;
-    })[];
-};
-export declare const defaultArgTypes: {
-    tabId: {
-        description: string;
-        control: {
-            type: string;
-        };
-        table: {
-            category: string;
-            type: {
-                summary: string;
-            };
-        };
-    };
-};
+import type { ArgTypes, Meta } from '@storybook/vue3';
+import type { VvTab } from '@/components';
+export declare const defaultArgs: Meta<typeof VvTab>['args'];
+export declare const defaultArgTypes: ArgTypes;

package/dist/types/alert.d.ts

@@ -0,0 +1,13 @@
+export type AlertModifiers = 'success' | 'info' | 'warning' | 'danger' | 'brand' | 'accent';
+export type Alert = {
+    id: string | number;
+    group: string;
+    title?: string;
+    icon: string | Record<string, unknown>;
+    content?: string;
+    footer?: string;
+    modifiers: AlertModifiers;
+    dismissable: boolean;
+    autoClose: number;
+    timestamp: number;
+};

package/dist/types/blurhash.d.ts

@@ -0,0 +1,12 @@
+declare class ValidationError extends Error {
+}
+export type BlurhashWorkerType = {
+    encode: (pixels: Uint8ClampedArray, width: number, height: number, componentX: number, componentY: number) => string;
+    decode: (blurhash: string, width: number, height: number, punch?: number) => Uint8ClampedArray;
+    isBlurhashValid: (blurhash: string) => {
+        result: boolean;
+        errorReason?: string;
+    };
+    ValidationError: ValidationError;
+};
+export {};

package/dist/types/floating-ui.d.ts

@@ -0,0 +1,6 @@
+import type { flip, autoPlacement, shift, offset, size } from '@floating-ui/vue';
+export type AutoPlacementOptions = Parameters<typeof autoPlacement>[0];
+export type FlipOptions = Parameters<typeof flip>[0];
+export type ShiftOptions = Parameters<typeof shift>[0];
+export type OffsetOptions = Parameters<typeof offset>[0];
+export type SizeOptions = Parameters<typeof size>[0];

package/dist/types/generic.d.ts

@@ -0,0 +1,4 @@
+export type Nullable<T> = T | null | undefined;
+export type Option = Record<string | number | symbol, any> & {
+    options?: Option[];
+};

package/dist/types/group.d.ts

@@ -0,0 +1,37 @@
+import type { Ref } from 'vue';
+/**
+ * State shared for a group of elements
+ */
+export default interface GroupState {
+    [itemKey: string]: Ref<unknown> | unknown | undefined;
+    key: string | number | symbol;
+}
+/**
+ * State shared in a group of inputs
+ */
+export interface InputGroupState extends GroupState {
+    readonly: Ref<boolean>;
+    disabled: Ref<boolean>;
+    valid: Ref<boolean>;
+    invalid: Ref<boolean>;
+}
+/**
+ * State shared in a group of buttons
+ */
+export interface ButtonGroupState extends GroupState {
+    modelValue: Ref<string | number | boolean | (string | number | boolean)[] | undefined>;
+    disabled: Ref<boolean>;
+    toggle: Ref<boolean>;
+    multiple: Ref<boolean>;
+    unselectable: Ref<boolean>;
+    modifiers: Ref<string | string[] | undefined>;
+}
+/**
+ * State shared in a group of accordions
+ */
+export interface AccordionGroupState extends GroupState {
+    collapse: Ref<boolean>;
+    disabled: Ref<boolean>;
+    modifiers: Ref<string[] | string | undefined>;
+    not: Ref<boolean>;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from './alert';
+export * from './floating-ui';
+export * from './generic';
+export * from './group';
+export * from './nav';
+export * from './blurhash';
+export * from './input-file';

package/dist/types/input-file.d.ts

@@ -0,0 +1,16 @@
+export type UploadedFile<Source = undefined> = Source extends undefined ? {
+    name: string;
+    size: number;
+    type: string;
+    url: string;
+    thumbnailUrl?: string;
+    lastModified?: number;
+} : {
+    name: string;
+    size: number;
+    type: string;
+    url: string;
+    thumbnailUrl?: string;
+    lastModified?: number;
+    source: Source;
+};

package/dist/types/nav.d.ts

@@ -0,0 +1,18 @@
+import type { AnchorTarget } from '@/constants';
+export type NavItem = {
+    label: string;
+    ariaLabel?: string;
+    title?: string;
+    to?: string | Record<string, unknown>;
+    href?: string;
+    target?: `${AnchorTarget}`;
+    rel?: string;
+    disabled?: boolean;
+    current?: boolean;
+    class?: string | string[];
+    on?: Record<'click' | string, () => void>;
+    data?: Record<string, unknown>;
+};
+export type NavItemTab = NavItem & {
+    tab?: string;
+};

package/dist/utils/ObjectUtilities.d.ts

@@ -80,4 +80,3 @@ export declare function propsToObject(props: any): Record<string, unknown>;
  * @return {object[]}
  */
 export declare function filterArray<T = Record<string, unknown>>(list: T[], filter: T[] | string[], key: string): T[];
-export declare function kebabCase(value: string): string | undefined;

package/dist/workers/blurhash.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volverjs/ui-vue",
   "description": "@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.",
-  "author": "24/Consulting",
+  "author": "8 Wave",
   "license": "MIT",
   "keywords": [
     "vue",
@@ -19,10 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/ui-vue/issues"
   },
-  "version": "0.0.10-beta.2",
-  "engines": {
-    "node": ">= 16.x"
-  },
+  "version": "0.0.10-beta.21",
   "packageManager": "pnpm@8.7.0",
   "type": "module",
   "main": "./dist/Volver.umd.js",
@@ -39,93 +36,97 @@
   ],
   "dependencies": {
     "@floating-ui/vue": "^1.0.2",
-    "@iconify/tools": "^3.0.5",
+    "@iconify/tools": "^4.0.0",
     "@iconify/vue": "^4.1.1",
-    "@vueuse/core": "^10.4.1",
-    "jsdom": "^22.1.0",
+    "@vueuse/core": "^10.7.1",
+    "blurhash": "^2.0.5",
+    "comlink": "^4.4.1",
+    "jsdom": "^23.0.1",
     "mitt": "^3.0.1",
-    "nanoid": "^4.0.2",
+    "pica": "^9.0.1",
     "ts-dot-prop": "^2.1.3",
-    "vue": "^3.3.4",
-    "vue-imask": "^7.1.3"
+    "uid": "^2.0.2",
+    "vue": "^3.4.0",
+    "vue-imask": "^7.3.0"
   },
   "peerDependencies": {
     "@volverjs/style": "0.*"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-typescript": "^7.23.3",
     "@iconify/types": "^2.0.0",
-    "@iconify/utils": "^2.1.9",
-    "@mdx-js/react": "^2.3.0",
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@storybook/addon-a11y": "^7.4.0",
-    "@storybook/addon-actions": "^7.4.0",
-    "@storybook/addon-docs": "^7.4.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/channel-postmessage": "^7.4.0",
-    "@storybook/channel-websocket": "^7.4.0",
-    "@storybook/cli": "^7.4.0",
-    "@storybook/client-api": "^7.4.0",
-    "@storybook/client-logger": "^7.4.0",
-    "@storybook/core-common": "^7.4.0",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/preview-api": "^7.4.0",
-    "@storybook/preview-web": "^7.4.0",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/vue3": "^7.4.0",
-    "@storybook/vue3-vite": "^7.4.0",
-    "@tsconfig/node18": "^18.2.1",
-    "@types/jest-axe": "^3.5.5",
-    "@types/jsdom": "^21.1.2",
-    "@types/node": "^20.5.9",
-    "@types/react": "^18.2.21",
-    "@types/yargs": "^17.0.24",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@volverjs/style": "0.1.12-beta.4",
-    "@vue/compiler-sfc": "^3.3.4",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "^2.4.1",
-    "@vue/tsconfig": "^0.4.0",
-    "change-case": "^4.1.2",
+    "@iconify/utils": "^2.1.14",
+    "@mdx-js/react": "^3.0.0",
+    "@rushstack/eslint-patch": "^1.6.1",
+    "@storybook/addon-a11y": "^7.6.6",
+    "@storybook/addon-actions": "^7.6.6",
+    "@storybook/addon-docs": "^7.6.6",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/channel-postmessage": "^7.6.6",
+    "@storybook/channel-websocket": "^7.6.6",
+    "@storybook/cli": "^7.6.6",
+    "@storybook/client-api": "^7.6.6",
+    "@storybook/client-logger": "^7.6.6",
+    "@storybook/core-common": "^7.6.6",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/preview-api": "^7.6.6",
+    "@storybook/preview-web": "^7.6.6",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/vue3": "^7.6.6",
+    "@storybook/vue3-vite": "^7.6.6",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/jest-axe": "^3.5.9",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^20.10.5",
+    "@types/pica": "^9.0.4",
+    "@types/react": "^18.2.46",
+    "@types/yargs": "^17.0.32",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@volverjs/style": "0.1.12-beta.15",
+    "@vue/compiler-sfc": "^3.4.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.1",
+    "change-case": "^5.3.0",
     "chokidar": "^3.5.3",
-    "eslint": "^8.48.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-mdx": "^2.2.0",
-    "eslint-plugin-mdx": "^2.2.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-storybook": "^0.6.13",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-mdx": "^3.1.1",
+    "eslint-plugin-mdx": "^3.1.1",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-vue": "^9.19.2",
     "glob": "7.2.3",
     "jest-axe": "^8.0.0",
-    "jest-diff": "^29.6.4",
+    "jest-diff": "^29.7.0",
     "jest-get-type": "^29.6.3",
-    "jsdom": "^22.1.0",
+    "jsdom": "^23.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
-    "pretty-format": "^29.6.3",
+    "prettier": "^3.1.1",
+    "pretty-format": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "remark": "^14.0.3",
-    "sass": "^1.66.1",
-    "storybook": "^7.4.0",
+    "remark": "^15.0.1",
+    "sass": "^1.69.6",
+    "storybook": "^7.6.6",
     "storybook-addon-markdown-docs": "^2.0.0",
-    "storybook-dark-mode": "^3.0.1",
+    "storybook-dark-mode": "^3.0.3",
     "storybook-version": "^0.1.1",
-    "terser": "^5.19.4",
-    "ts-node": "^10.9.1",
-    "typescript": "~5.2.2",
-    "unplugin-auto-import": "^0.16.6",
-    "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.4.9",
+    "terser": "^5.26.0",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.3.3",
+    "unplugin-auto-import": "^0.17.3",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.0.10",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-externalize-deps": "^0.7.0",
-    "vue-tsc": "^1.8.8",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vue-tsc": "^1.8.27",
     "yargs": "^17.7.2"
   },
   "typesVersions": {
@@ -220,14 +221,20 @@
       "vv-icon": [
         "dist/components/VvIcon/VvIcon.vue.d.ts"
       ],
+      "vv-input-file": [
+        "dist/components/VvInputFile/VvInputFile.vue.d.ts"
+      ],
       "vv-input-text": [
         "dist/components/VvInputText/VvInputText.vue.d.ts"
       ],
       "vv-nav": [
         "dist/components/VvNav/VvNav.vue.d.ts"
       ],
-      "vv-nav-item-title": [
-        "dist/components/VvNavItemTitle/VvNavItemTitle.vue.d.ts"
+      "vv-nav-item": [
+        "dist/components/VvNavItem/VvNavItem.vue.d.ts"
+      ],
+      "vv-nav-separator": [
+        "dist/components/VvNavSeparator/VvNavSeparator.vue.d.ts"
       ],
       "vv-progress": [
         "dist/components/VvProgress/VvProgress.vue.d.ts"
@@ -405,6 +412,11 @@
       "import": "./dist/components/VvIcon/VvIcon.es.js",
       "default": "./dist/components/VvIcon/VvIcon.umd.js"
     },
+    "./vv-input-file": {
+      "types": "./dist/components/VvInputFile/VvInputFile.vue.d.ts",
+      "import": "./dist/components/VvInputFile/VvInputFile.es.js",
+      "default": "./dist/components/VvInputFile/VvInputFile.umd.js"
+    },
     "./vv-input-text": {
       "types": "./dist/components/VvInputText/VvInputText.vue.d.ts",
       "import": "./dist/components/VvInputText/VvInputText.es.js",
@@ -415,10 +427,15 @@
       "import": "./dist/components/VvNav/VvNav.es.js",
       "default": "./dist/components/VvNav/VvNav.umd.js"
     },
-    "./vv-nav-item-title": {
-      "types": "./dist/components/VvNavItemTitle/VvNavItemTitle.vue.d.ts",
-      "import": "./dist/components/VvNavItemTitle/VvNavItemTitle.es.js",
-      "default": "./dist/components/VvNavItemTitle/VvNavItemTitle.umd.js"
+    "./vv-nav-item": {
+      "types": "./dist/components/VvNavItem/VvNavItem.vue.d.ts",
+      "import": "./dist/components/VvNavItem/VvNavItem.es.js",
+      "default": "./dist/components/VvNavItem/VvNavItem.umd.js"
+    },
+    "./vv-nav-separator": {
+      "types": "./dist/components/VvNavSeparator/VvNavSeparator.vue.d.ts",
+      "import": "./dist/components/VvNavSeparator/VvNavSeparator.es.js",
+      "default": "./dist/components/VvNavSeparator/VvNavSeparator.umd.js"
     },
     "./vv-progress": {
       "types": "./dist/components/VvProgress/VvProgress.vue.d.ts",
@@ -463,7 +480,7 @@
     "hot": "node ./scripts/build.js --hot",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.ts,.mdx --fix",
-    "generate-icons": "ts-node-esm ./scripts/icons.ts --srcPath=src/assets/icons",
+    "generate-icons": "node --loader ts-node/esm ./scripts/icons.ts --srcPath=src/assets/icons",
     "generate-tsd": "vue-tsc --declaration --emitDeclarationOnly",
     "test-local": "test-storybook --stories-json",
     "test-remote": "test-storybook --stories-json --url https://volver-ui-vue.vercel.app",

package/src/Volver.ts

@@ -1,12 +1,13 @@
+import type { App, Component, Directive, Plugin, Ref } from 'vue'
 import {
-	addCollection,
-	addIcon,
-	addAPIProvider,
 	type IconifyIcon,
 	type IconifyJSON,
 	type PartialIconifyAPIConfig,
+	addCollection,
+	addIcon,
+	addAPIProvider,
 } from '@iconify/vue'
-import type { App, Component, Directive, Plugin, Ref } from 'vue'
+import { kebabCase } from 'change-case'
 import { DEFAULT_ICONIFY_PROVIDER, INJECTION_KEY_VOLVER } from './constants'
 
 export function useDefaultProps(
@@ -36,25 +37,31 @@ export function useDefaultProps(
 	return {
 		...component,
 		name: componentName,
-		props: Object.keys(props).reduce((acc, key) => {
-			if (!(key in componentDefaults)) {
-				acc[key] = props[key]
-				return acc
-			}
-			const customDefault = componentDefaults[key]
-			if (typeof props[key] === 'function' || Array.isArray(props[key])) {
+		props: Object.keys(props).reduce(
+			(acc, key) => {
+				if (!(key in componentDefaults)) {
+					acc[key] = props[key]
+					return acc
+				}
+				const customDefault = componentDefaults[key]
+				if (
+					typeof props[key] === 'function' ||
+					Array.isArray(props[key])
+				) {
+					acc[key] = {
+						type: props[key],
+						default: customDefault,
+					}
+					return acc
+				}
 				acc[key] = {
-					type: props[key],
+					...(props[key] as Record<string, unknown>),
 					default: customDefault,
 				}
 				return acc
-			}
-			acc[key] = {
-				...(props[key] as Record<string, unknown>),
-				default: customDefault,
-			}
-			return acc
-		}, {} as Record<string, unknown>),
+			},
+			{} as Record<string, unknown>,
+		),
 	}
 }
 
@@ -248,7 +255,7 @@ const VolverPlugin: Plugin = {
 	 * @param {App} Vue
 	 * @param {Object} options
 	 */
-	install(app: App, options: VolverOptions) {
+	install(app: App, options: VolverOptions = {}) {
 		const volver = new Volver(options)
 
 		// register global methods
@@ -277,6 +284,10 @@ const VolverPlugin: Plugin = {
 		// register directives
 		if (options.directives) {
 			Object.entries(options.directives).forEach(([name, directive]) => {
+				const kebabName = kebabCase(name)
+				if (kebabName.startsWith('v-')) {
+					name = kebabName.substring(2).toLocaleLowerCase()
+				}
 				app.directive(name, directive)
 			})
 		}