@volverjs/ui-vue 0.0.10-beta.3 → 0.0.10-beta.31

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/Button/Button.settings.d.ts

@@ -89,7 +89,6 @@ export declare const argTypes: {
         };
     };
     target: {
-        options: string[];
         description: string;
         control: {
             type: string;

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,17 +1,4 @@
-import type { Meta } from '@storybook/vue3';
+import type { ArgTypes, Meta } from '@storybook/vue3';
 import type { VvTab } from '@/components';
 export declare const defaultArgs: Meta<typeof VvTab>['args'];
-export declare const defaultArgTypes: {
-    tabId: {
-        description: string;
-        control: {
-            type: string;
-        };
-        table: {
-            category: string;
-            type: {
-                summary: string;
-            };
-        };
-    };
-};
+export declare const defaultArgTypes: ArgTypes;

package/dist/test/expect.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="jest" />
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 declare global {
     namespace jest {
         interface Matchers<R> {

package/dist/types/alert.d.ts

@@ -1,13 +1,15 @@
-export type AlertModifiers = 'success' | 'info' | 'warning' | 'danger' | 'brand' | 'accent';
+import type { VvIconProps } from '@/components/VvIcon';
+import { AlertRole } from '@/constants';
+export type AlertModifier = 'success' | 'info' | 'warning' | 'danger' | 'brand' | 'accent' | string;
 export type Alert = {
     id: string | number;
-    group: string;
     title?: string;
-    icon: string | Record<string, unknown>;
+    icon?: string | VvIconProps;
     content?: string;
     footer?: string;
-    modifiers: AlertModifiers;
-    dismissable: boolean;
-    autoClose: number;
-    timestamp: number;
+    modifiers?: AlertModifier | AlertModifier[];
+    dismissable?: boolean;
+    autoClose?: number;
+    closeLabel?: string;
+    role?: AlertRole;
 };

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/generic.d.ts

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

package/dist/types/group.d.ts

@@ -1,37 +1,59 @@
 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;
-}
+import type { Emitter } from 'mitt';
 /**
  * State shared in a group of inputs
  */
-export interface InputGroupState extends GroupState {
+export type InputGroupState = {
+    modelValue: Ref<unknown>;
     readonly: Ref<boolean>;
     disabled: Ref<boolean>;
     valid: Ref<boolean>;
     invalid: Ref<boolean>;
-}
+};
 /**
  * State shared in a group of buttons
  */
-export interface ButtonGroupState extends GroupState {
+export type ButtonGroupState = {
     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>;
+export type AccordionGroupBusEvents = {
+    toggle: {
+        name: string;
+        value: boolean;
+    };
+    register: {
+        name: string;
+    };
+    unregister: {
+        name: string;
+    };
+    expand: {
+        name?: string | string[];
+    };
+    collapse: {
+        name?: string | string[];
+    };
+};
+export type AccordionGroupState = {
     disabled: Ref<boolean>;
     modifiers: Ref<string[] | string | undefined>;
-    not: Ref<boolean>;
-}
+    bus: Emitter<AccordionGroupBusEvents>;
+};
+/**
+ * State shared in a group of alerts
+ */
+export type AlertGroupBusEvents = {
+    close: string;
+};
+export type AlertGroupState = {
+    name?: Ref<string | undefined>;
+    bus?: Emitter<AlertGroupBusEvents>;
+};

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

@@ -1,16 +1,16 @@
-import type { AnchorTarget } from '@/constants';
 export type NavItem = {
     label: string;
     ariaLabel?: string;
     title?: string;
     to?: string | Record<string, unknown>;
     href?: string;
-    target?: `${AnchorTarget}`;
+    target?: string;
     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 S.r.l.",
   "license": "MIT",
   "keywords": [
     "vue",
@@ -19,10 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/ui-vue/issues"
   },
-  "version": "0.0.10-beta.3",
-  "engines": {
-    "node": ">= 16.x"
-  },
+  "version": "0.0.10-beta.31",
   "packageManager": "pnpm@8.7.0",
   "type": "module",
   "main": "./dist/Volver.umd.js",
@@ -38,94 +35,89 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.0.2",
-    "@iconify/tools": "^3.0.5",
+    "@floating-ui/vue": "^1.0.6",
+    "@iconify/tools": "^4.0.4",
     "@iconify/vue": "^4.1.1",
-    "@vueuse/core": "^10.4.1",
-    "jsdom": "^22.1.0",
+    "@storybook/test": "^8.0.6",
+    "@vueuse/core": "^10.9.0",
+    "blurhash": "^2.0.5",
+    "comlink": "^4.4.1",
+    "jsdom": "^24.0.0",
     "mitt": "^3.0.1",
-    "nanoid": "^5.0.1",
+    "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.21",
+    "vue-imask": "^7.5.0",
+    "vuedraggable": "^4.1.0"
   },
   "peerDependencies": {
     "@volverjs/style": "0.*"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.17",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-typescript": "^7.24.1",
     "@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.1",
-    "@storybook/addon-actions": "^7.4.1",
-    "@storybook/addon-docs": "^7.4.1",
-    "@storybook/addon-essentials": "^7.4.1",
-    "@storybook/addon-interactions": "^7.4.1",
-    "@storybook/addon-links": "^7.4.1",
-    "@storybook/channel-postmessage": "^7.4.1",
-    "@storybook/channel-websocket": "^7.4.1",
-    "@storybook/cli": "^7.4.1",
-    "@storybook/client-api": "^7.4.1",
-    "@storybook/client-logger": "^7.4.1",
-    "@storybook/core-common": "^7.4.1",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/preview-api": "^7.4.1",
-    "@storybook/preview-web": "^7.4.1",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/vue3": "^7.4.1",
-    "@storybook/vue3-vite": "^7.4.1",
-    "@tsconfig/node18": "^18.2.2",
-    "@types/jest-axe": "^3.5.5",
-    "@types/jsdom": "^21.1.2",
-    "@types/node": "^20.6.0",
-    "@types/react": "^18.2.21",
-    "@types/yargs": "^17.0.24",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@volverjs/style": "0.1.12-beta.8",
-    "@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",
-    "chokidar": "^3.5.3",
-    "eslint": "^8.49.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",
+    "@iconify/utils": "^2.1.22",
+    "@nabla/vite-plugin-eslint": "^2.0.2",
+    "@rushstack/eslint-patch": "^1.10.1",
+    "@storybook/addon-a11y": "^8.0.6",
+    "@storybook/addon-actions": "^8.0.6",
+    "@storybook/addon-docs": "^8.0.6",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-interactions": "^8.0.6",
+    "@storybook/addon-links": "^8.0.6",
+    "@storybook/cli": "^8.0.6",
+    "@storybook/client-logger": "^8.0.6",
+    "@storybook/core-common": "^8.0.6",
+    "@storybook/preview-api": "^8.0.6",
+    "@storybook/test-runner": "^0.17.0",
+    "@storybook/vue3": "^8.0.6",
+    "@storybook/vue3-vite": "^8.0.6",
+    "@tsconfig/node18": "^18.2.4",
+    "@types/jest-axe": "^3.5.9",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^20.12.5",
+    "@types/pica": "^9.0.4",
+    "@types/yargs": "^17.0.32",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@volverjs/style": "0.1.12-beta.15",
+    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "change-case": "^5.4.4",
+    "chokidar": "^3.6.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-mdx": "^3.1.5",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-vue": "^9.24.0",
     "glob": "7.2.3",
     "jest-axe": "^8.0.0",
     "jest-diff": "^29.7.0",
     "jest-get-type": "^29.6.3",
-    "jsdom": "^22.1.0",
+    "jsdom": "^24.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.5",
     "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.1",
+    "remark": "^15.0.1",
+    "sass": "^1.74.1",
+    "storybook": "^8.0.6",
     "storybook-addon-markdown-docs": "^2.0.0",
-    "storybook-dark-mode": "^3.0.1",
-    "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",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-externalize-deps": "^0.7.0",
-    "vue-tsc": "^1.8.11",
+    "storybook-dark-mode": "^4.0.1",
+    "terser": "^5.30.3",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.4.4",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.2.8",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vue-tsc": "^2.0.11",
     "yargs": "^17.7.2"
   },
   "typesVersions": {
@@ -220,6 +212,9 @@
       "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"
       ],
@@ -408,6 +403,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",
@@ -471,7 +471,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)
 			})
 		}