@volverjs/ui-vue 0.0.13 → 0.0.15

package/dist/stories/Tooltip/Tooltip.stories.d.ts

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

package/dist/stories/Tooltip/Tooltip.test.d.ts

@@ -0,0 +1,2 @@
+import type { PlayAttributes } from '@/test/types';
+export declare function defaultTest({ canvasElement, args }: PlayAttributes): Promise<void>;

package/dist/stories/Tooltip/TooltipDirective.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue';
+declare const meta: Meta<typeof VvTooltip>;
+export default meta;
+type Story = StoryObj<typeof VvTooltip>;
+export declare const DefaultDirective: Story;
+export declare const Top: Story;
+export declare const Bottom: Story;
+export declare const Right: Story;
+export declare const Left: Story;

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

@@ -0,0 +1,5 @@
+import type { ArgTypes } from '@storybook/vue3-vite';
+export declare const defaultArgs: {
+    items: string[];
+};
+export declare const argTypes: ArgTypes;

package/dist/stories/VirtualScroll/VirtualScroll.stories.d.ts

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

package/dist/stories/VirtualScroll/VirtualScroll.test.d.ts

@@ -0,0 +1,2 @@
+import type { PlayAttributes } from '@/test/types';
+export declare function defaultTest({ canvasElement, args }?: PlayAttributes): Promise<void>;

package/dist/stories/VirtualScroll/VirtualScrollWithComposable.stories.d.ts

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

package/dist/stories/argTypes.d.ts

@@ -0,0 +1,56 @@
+import type { ArgTypes } from '@storybook/vue3-vite';
+export declare const ValidArgTypes: ArgTypes;
+export declare const InvalidArgTypes: ArgTypes;
+export declare const LoadingArgTypes: ArgTypes;
+export declare const DisabledArgTypes: ArgTypes;
+export declare const ReadonlyArgTypes: ArgTypes;
+export declare const ModifiersArgTypes: ArgTypes;
+export declare const IconArgTypes: ArgTypes;
+export declare const OptionsArgTypes: ArgTypes;
+export declare const CountArgTypes: ArgTypes;
+export declare const DebounceArgTypes: ArgTypes;
+export declare const DefaultSlotArgTypes: ArgTypes;
+export declare const HintArgTypes: ArgTypes;
+export declare const TabindexArgTypes: ArgTypes;
+export declare const IdNameArgTypes: ArgTypes;
+export declare const DropdownArgTypes: ArgTypes;
+export declare const UnselectableArgTypes: ArgTypes;
+export declare const FloatingLabelArgTypes: ArgTypes;
+export declare const AutofocusArgTypes: ArgTypes;
+export declare const AutocompleteArgTypes: ArgTypes;
+export declare const InputTextareaArgTypes: {
+    minlength: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    maxlength: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    placeholder: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    required: {
+        description: string;
+        table: {
+            defaultValue: {
+                summary: boolean;
+            };
+        };
+    };
+    label: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+};
+export declare const CheckboxRadioArgTypes: ArgTypes;
+export declare const CheckboxRadioGroupArgTypes: ArgTypes;

package/dist/test/expect.d.ts

@@ -0,0 +1,18 @@
+import { expect } from 'storybook/test';
+declare global {
+    namespace jest {
+        interface Matchers<R> {
+            toBeChecked: (expected?: HTMLElement) => CustomMatcherResult;
+        }
+        interface Matchers<R> {
+            toBeClicked: (expected?: HTMLElement) => CustomMatcherResult;
+        }
+        interface Matchers<R> {
+            toHaveClass: (className: string | string[], expected?: HTMLElement) => CustomMatcherResult;
+        }
+        interface Matchers<R> {
+            toHaveImgChild: (imgTag: string, expected?: HTMLElement) => CustomMatcherResult;
+        }
+    }
+}
+export { expect };

package/dist/test/options.d.ts

@@ -0,0 +1 @@
+export declare function getOptionValue(args: any, index: number): any;

package/dist/test/sleep.d.ts

@@ -0,0 +1 @@
+export declare function sleep(ms?: number): Promise<unknown>;

package/dist/types/alert.d.ts

@@ -0,0 +1,15 @@
+import type { VvIconProps } from '@/components/VvIcon';
+import type { AlertRole } from '@/constants';
+export type AlertModifier = 'success' | 'info' | 'warning' | 'danger' | 'brand' | 'accent' | (string & {});
+export type Alert = {
+    id: string | number;
+    title?: string;
+    icon?: string | VvIconProps;
+    content?: string;
+    footer?: string;
+    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/floating-ui.d.ts

@@ -0,0 +1,15 @@
+import type { autoPlacement, flip, offset, shift, size } from '@floating-ui/vue';
+export type { MiddlewareState } from '@floating-ui/core';
+export type { Middleware } from '@floating-ui/vue';
+/**
+ * Drop the `Derivable` (callback) variant from a floating-ui option type.
+ * The components only ever pass plain option objects, and keeping the
+ * callback variant leaks non-portable floating-ui internals
+ * (`Derivable`, `MiddlewareState`) into the emitted declaration files.
+ */
+type NonDerivable<T> = Exclude<T, (...args: never[]) => unknown>;
+export type AutoPlacementOptions = NonDerivable<Parameters<typeof autoPlacement>[0]>;
+export type FlipOptions = NonDerivable<Parameters<typeof flip>[0]>;
+export type ShiftOptions = NonDerivable<Parameters<typeof shift>[0]>;
+export type OffsetOptions = NonDerivable<Parameters<typeof offset>[0]>;
+export type SizeOptions = NonDerivable<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,59 @@
+import type { Emitter } from 'mitt';
+import type { Ref } from 'vue';
+/**
+ * State shared in a group of inputs
+ */
+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 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 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>;
+    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 './blurhash';
+export * from './floating-ui';
+export * from './generic';
+export * from './group';
+export * from './input-file';
+export * from './nav';

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

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

package/dist/types/nav.d.ts

@@ -0,0 +1,17 @@
+export type NavItem = {
+    label: string;
+    ariaLabel?: string;
+    title?: string;
+    to?: string | Record<string, unknown>;
+    href?: string;
+    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/DateUtilities.d.ts

@@ -0,0 +1,14 @@
+export declare function isDateIsoString(dateString: unknown): boolean;
+/**
+ * Converts a Date object to a string value for input element
+ * @param date - Date object or string
+ * @param typeOfInput - Type of HTML input element
+ * @param withSeconds - Include seconds in time value
+ * @returns String value for input element
+ * @example
+ * getInputValueFromDate(new Date(), 'date') // '2021-12-31'
+ * getInputValueFromDate(new Date(), 'time') // '23:59'
+ * getInputValueFromDate(new Date(), 'datetime-local') // '2021-12-31T23:59'
+ */
+export declare function getInputValueFromDate(date: Date | string, typeOfInput?: 'date' | 'time' | 'month' | 'datetime-local', withSeconds?: boolean): string;
+export declare function getDateFromInputValue(value: string, typeOfInput?: 'date' | 'time' | 'month' | 'datetime-local'): Date | null;

package/dist/utils/DomUtilities.d.ts

@@ -0,0 +1 @@
+export declare function findScrollContainer(element: HTMLElement | null): HTMLElement | undefined;

package/dist/utils/FileUtilities.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Validates if all files in a FileList meet the restrictions of the accept attribute
+ * @param {FileList} fileList - The FileList object to validate
+ * @param {string} [acceptValue] - The value of the accept attribute (e.g. ".jpg,.png,image/*")
+ * @returns {boolean} - true if all files are valid, false otherwise
+ */
+export declare function validateFileList(fileList: FileList, acceptValue?: string): boolean;
+/**
+ * Filters a FileList and returns only the files that match the accept attribute criteria
+ * @param {FileList} fileList - The FileList object to filter
+ * @param {string} [acceptValue] - The value of the accept attribute (e.g. ".jpg,.png,image/*")
+ * @returns {File[]} - Array of files that match the accept criteria
+ */
+export declare function filterFileList(fileList: FileList, acceptValue?: string): File[];

package/dist/utils/ObjectUtilities.d.ts

@@ -0,0 +1,76 @@
+import type { Ref } from 'vue';
+/**
+ * Compare objects, primitives, array, dates, regexp
+ * @param {any} obj1 first literal
+ * @param {any} obj2 second literal
+ * @param {string} field optional field of obj1 and obj2 (also nested dotted field "prop1.prop12")
+ * @returns {boolean}
+ */
+export declare function equals(obj1: any, obj2: any, field?: string): boolean;
+export declare function deepEquals(a: any, b: any): boolean;
+/**
+ * Find and return field or nested field from object (also nested dotted field)
+ * @param {object} data object that contains the field
+ * @param {string} field ex: "prop1" or "prop1.prop12"
+ * @returns {boolean} the field value
+ */
+export declare function resolveFieldData(data: Record<string, unknown>, field: string): unknown;
+/**
+ * @param {any} obj data to check
+ * @returns {boolean}
+ */
+export declare function isFunction(obj: any): boolean;
+/**
+ * Return the index of value in list array
+ * @param {any} value the element to find
+ * @param {Array<any>} list array list
+ * @returns {number} the index
+ */
+export declare function findIndexInList<Type = unknown>(value: Type, list: Type[]): number;
+/**
+ * Return the index of value in list array
+ * @param {any} value the element to find
+ * @param {Array<any>} list array list
+ * @returns {boolean} the index
+ */
+export declare function contains<Type = unknown>(value: Type, list: Type[]): boolean;
+/**
+ * @param {boolean | string | null | undefined | number | Array<unknown> | object} value element to checj
+ * @returns {boolean} true if value is empty
+ */
+export declare function isEmpty(value: boolean | string | null | undefined | number | unknown[] | object | Ref): boolean;
+/**
+ * Return the object entries that match the predicate passed
+ * @param {object} value
+ * @param {Function} predicate
+ * @returns {object} the object entries
+ */
+export declare function pickBy(value: Record<string, unknown>, predicate: (k: string) => boolean): {
+    [k: string]: unknown;
+};
+/**
+ * Remove a value from an Array
+ * @param {any} value the element to remove
+ * @param {Array<any>} list
+ * @returns {Array<any>} the list without the value
+ */
+export declare function removeFromList<Type = unknown>(value: Type, list: Type[]): Type[];
+/**
+ * @param {any} value
+ * @returns {boolean} true if value is a string
+ */
+export declare function isString(value: unknown): value is string;
+/**
+ * Convert props definition to object with "prop" as key and default as value
+ * @param {ComponentObjectPropsOptions} props vue component props
+ * @returns {object}
+ */
+export declare function propsToObject(props: any): Record<string, unknown>;
+/**
+ * Filter array objects by filter array
+ * @param {object[]} list the listo to filter
+ * @param {object[] | string[]} filter the filter list, array of string or array of object
+ * @param {string} key
+ * @return {object[]}
+ */
+export declare function filterArray<T = Record<string, unknown>>(list: T[], filter: T[] | string[], key: string): T[];

package/dist/workers/blurhash.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volverjs/ui-vue",
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.",
   "author": "8 wave S.r.l.",
   "license": "MIT",
@@ -496,7 +496,8 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "styleguide": "storybook build",
-    "build": "npm run generate-icons && npm run generate-tsd && node ./scripts/build.js",
+    "build": "npm run clean && npm run generate-icons && npm run generate-tsd && node ./scripts/build.js",
+    "clean": "node ./scripts/clean.js",
     "hot": "node ./scripts/build.js --hot",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint .",

package/src/Volver.ts

@@ -9,6 +9,8 @@ import {
 import { kebabCase } from 'change-case'
 import { DEFAULT_ICONIFY_PROVIDER, INJECTION_KEY_VOLVER } from './constants'
 
+const DEFAULT_FETCH_ICON_OPTIONS: RequestInit = { cache: 'force-cache' }
+
 export function useDefaultProps(
     component: Component,
     defaults?: Record<string, unknown>,
@@ -171,11 +173,11 @@ export interface VolverInterface {
 }
 
 export class Volver implements VolverInterface {
-    private _fetchOptions: RequestInit = {}
-    private _iconsCollections: IconifyJSON[] = []
-    private _iconsProvider = DEFAULT_ICONIFY_PROVIDER
-    private _nuxt = false
-    private _experimentalFeatures: VolverExperimentalFeatures = {}
+    private readonly _fetchOptions: RequestInit = {}
+    private readonly _iconsCollections: IconifyJSON[] = []
+    private readonly _iconsProvider: string = DEFAULT_ICONIFY_PROVIDER
+    private readonly _nuxt: boolean = false
+    private readonly _experimentalFeatures: VolverExperimentalFeatures = {}
 
     defaults: Ref<DefaultOptions> = ref({})
 
@@ -260,7 +262,7 @@ export class Volver implements VolverInterface {
 
     async fetchIcon(
         src: string,
-        options: RequestInit = { cache: 'force-cache' },
+        options: RequestInit = DEFAULT_FETCH_ICON_OPTIONS,
     ): Promise<string | undefined> {
         const response = await fetch(src, {
             ...this._fetchOptions,

package/src/components/VvAction/index.ts

@@ -1,5 +1,3 @@
-import { ActionProps } from '../../props'
-
 export const VvActionEvents = ['click', 'mouseover', 'mouseleave']
 
-export const VvActionProps = ActionProps
+export { ActionProps as VvActionProps } from '../../props'

package/src/components/VvButton/VvButton.vue

@@ -78,7 +78,7 @@ const { hasIcon } = useComponentIcon(icon)
  * @description Catch click event
  */
 const toggleValue = computed(() => {
-    return props.value !== undefined ? props.value : name.value
+    return props.value === undefined ? name.value : props.value
 })
 const hasListeners = computed(() => {
     if (!toggle.value) {

package/src/components/VvCheckboxGroup/index.ts

@@ -1,5 +1,3 @@
-import { CheckboxRadioGroupProps } from '../../props'
-
-export const VvCheckboxGroupProps = CheckboxRadioGroupProps
+export { CheckboxRadioGroupProps as VvCheckboxGroupProps } from '../../props'
 
 export const VvCheckboxGroupEvents = ['update:modelValue', 'change']

package/src/components/VvCombobox/VvCombobox.vue

@@ -398,10 +398,10 @@ function onInput(option: string | Option) {
             return item !== optionValue
         })
     } else if (!isSelected && isSelectable.value) {
-        if (!props.multiple) {
-            localModelValue.value = [optionValue]
-        } else {
+        if (props.multiple) {
             localModelValue.value = [...localModelValue.value, optionValue]
+        } else {
+            localModelValue.value = [optionValue]
         }
     }
     if (!props.multiple && !props.keepOpen) {

package/src/components/VvDropdown/VvDropdown.vue

@@ -69,14 +69,14 @@ onMounted(() => {
         floatingEl.value,
         () => {
             hasCustomPosition.value
-                = window
+                = globalThis
                     .getComputedStyle(floatingEl.value)
                     .getPropertyValue('--dropdown-custom-position')
                     ?.trim() === 'true'
         },
         {
             attributeFilter: ['style'],
-            window,
+            window: globalThis.window,
         },
     )
 })
@@ -216,13 +216,13 @@ const arrowPlacement = computed(() => {
     }[side.value]
     return {
         left:
-				middlewareData.value.arrow?.x !== undefined
-				    ? `${middlewareData.value.arrow?.x}px`
-				    : undefined,
+				middlewareData.value.arrow?.x === undefined
+				    ? undefined
+				    : `${middlewareData.value.arrow?.x}px`,
         top:
-				middlewareData.value.arrow?.y !== undefined
-				    ? `${middlewareData.value.arrow?.y}px`
-				    : undefined,
+				middlewareData.value.arrow?.y === undefined
+				    ? undefined
+				    : `${middlewareData.value.arrow?.y}px`,
         [staticSide]: `${-(arrowEl.value?.offsetWidth ?? 0) / 2}px`,
     }
 })

package/src/components/VvIcon/VvIcon.vue

@@ -59,15 +59,12 @@ const icon = computed(() => {
  * @return {SVGSVGElement | null} https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement
  */
 function getSvgContent(svg: string): SVGSVGElement | null {
-    const domParser = typeof window !== 'undefined'
-        ? new window.DOMParser()
-        : null
-    if (!domParser) {
+    if (globalThis.window === undefined) {
         return null
     }
+    const domParser = new globalThis.DOMParser()
     const svgDomString = domParser.parseFromString(svg, 'text/html')
-    const svgEl = svgDomString.querySelector('svg')
-    return svgEl
+    return svgDomString.querySelector('svg')
 }
 
 /**

package/src/components/VvInputFile/VvInputFile.vue

@@ -176,7 +176,7 @@ function onClickDropArea() {
 }
 
 function onRemoveIndex(index: number) {
-    const toRemove = !Array.isArray(localModelValue.value) ? localModelValue.value : localModelValue.value[index]
+    const toRemove = Array.isArray(localModelValue.value) ? localModelValue.value[index] : localModelValue.value
     if (!toRemove) {
         return
     }
@@ -194,7 +194,7 @@ function onRemoveIndex(index: number) {
 }
 
 const selectedFileIndex = ref(0)
-const PREVIEW_MIME_TYPES = ['image/jpeg', 'image/png']
+const PREVIEW_MIME_TYPES = new Set(['image/jpeg', 'image/png'])
 const previewSrc = computed(() => {
     if (props.hidePreview) {
         return undefined
@@ -207,7 +207,7 @@ const previewSrc = computed(() => {
     }
     if (files.value[selectedFileIndex.value] instanceof File) {
         const currentFile = files.value[selectedFileIndex.value] as File
-        if (!PREVIEW_MIME_TYPES.includes(currentFile.type)) {
+        if (!PREVIEW_MIME_TYPES.has(currentFile.type)) {
             return undefined
         }
         return URL.createObjectURL(currentFile)
@@ -216,7 +216,7 @@ const previewSrc = computed(() => {
     if (currentFile.thumbnailUrl) {
         return currentFile.thumbnailUrl
     }
-    if (!PREVIEW_MIME_TYPES.includes(currentFile.type)) {
+    if (!PREVIEW_MIME_TYPES.has(currentFile.type)) {
         return undefined
     }
     return currentFile.url
@@ -241,7 +241,7 @@ function formatBytes(bytes?: number, decimals?: number) {
     if (bytes === 0)
         return '0 Bytes'
     const k = 1024
-    const dm = !decimals ? 2 : decimals <= 0 ? 0 : decimals
+    const dm = Math.max(0, decimals ?? 2)
     const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
     const i = Math.floor(Math.log(bytes) / Math.log(k))
     return `${Number.parseFloat((bytes / (k ** i)).toFixed(dm))} ${sizes[i]}`
@@ -258,7 +258,7 @@ function onDownloadFile(file: File | UploadedFile) {
     link.setAttribute('download', file.name)
     document.body.appendChild(link)
     link.click()
-    document.body.removeChild(link)
+    link.remove()
     URL.revokeObjectURL(link.href)
 }