@volverjs/ui-vue 0.0.10-beta.8 → 0.0.10

package/dist/composables/alert/useAlert.d.ts

@@ -1,4 +1,8 @@
 import type { Alert } from '@/types/alert';
+type AlertInGroup = Alert & {
+    timestamp: number;
+    group: string;
+};
 /**
  * @description Composable to access alert groups, alerts and functions to add, remove and get alerts by group.
  * @example
@@ -16,12 +20,73 @@ import type { Alert } from '@/types/alert';
  *      addAlert: Function to add alert,
  *      removeAlert: Function to remove alert,
  *      getAlerts: Function to get alerts by group
- *  }
+ *  } the reactive list of alerts, groups, addAlert, removeAlert and getAlerts functions
  */
-export declare const useAlert: () => {
-    groups: Map<string, Map<string, Alert>>;
-    alerts: globalThis.ComputedRef<Alert[]>;
-    addAlert: ({ id, group, title, icon, content, footer, modifiers, dismissable, autoClose, }?: Partial<Alert>) => void;
+export declare function useAlert(): {
+    groups: import("vue").Reactive<Map<string, Map<string, AlertInGroup>>>;
+    alerts: globalThis.ComputedRef<{
+        id: string | number;
+        title?: string | undefined;
+        icon?: string | {
+            name: string;
+            color?: string | undefined;
+            width?: string | number | undefined;
+            height?: string | number | undefined;
+            provider?: string | undefined;
+            prefix?: (import("../../components/VvIcon").IconPrefix | string) | undefined;
+            src?: string | undefined;
+            horizontalFlip?: boolean | undefined;
+            verticalFlip?: boolean | undefined;
+            flip?: string | undefined;
+            mode?: import("@iconify/vue").IconifyRenderMode | undefined;
+            inline?: boolean | undefined;
+            rotate?: number | string | undefined;
+            onLoad?: ((icon: import("@iconify/types").IconifyIcon) => void) | undefined;
+            svg?: string | undefined;
+            modifiers?: string | string[] | undefined;
+        } | undefined;
+        content?: string | undefined;
+        footer?: string | undefined;
+        modifiers?: (import("@/types/alert").AlertModifier | import("@/types/alert").AlertModifier[]) | undefined;
+        dismissable?: boolean | undefined;
+        autoClose?: number | undefined;
+        closeLabel?: string | undefined;
+        role?: import("@/constants").AlertRole | undefined;
+        timestamp: number;
+        group: string;
+    }[]>;
+    addAlert: ({ id, group, title, icon, content, footer, modifiers, dismissable, autoClose, timestamp, }?: Partial<AlertInGroup>) => void;
     removeAlert: (id: string | number, group?: string) => void;
-    getAlerts: (group?: string) => globalThis.ComputedRef<Alert[]>;
+    getAlerts: (group?: string) => globalThis.ComputedRef<{
+        id: string | number;
+        title?: string | undefined;
+        icon?: string | {
+            name: string;
+            color?: string | undefined;
+            width?: string | number | undefined;
+            height?: string | number | undefined;
+            provider?: string | undefined;
+            prefix?: (import("../../components/VvIcon").IconPrefix | string) | undefined;
+            src?: string | undefined;
+            horizontalFlip?: boolean | undefined;
+            verticalFlip?: boolean | undefined;
+            flip?: string | undefined;
+            mode?: import("@iconify/vue").IconifyRenderMode | undefined;
+            inline?: boolean | undefined;
+            rotate?: number | string | undefined;
+            onLoad?: ((icon: import("@iconify/types").IconifyIcon) => void) | undefined;
+            svg?: string | undefined;
+            modifiers?: string | string[] | undefined;
+        } | undefined;
+        content?: string | undefined;
+        footer?: string | undefined;
+        modifiers?: (import("@/types/alert").AlertModifier | import("@/types/alert").AlertModifier[]) | undefined;
+        dismissable?: boolean | undefined;
+        autoClose?: number | undefined;
+        closeLabel?: string | undefined;
+        role?: import("@/constants").AlertRole | undefined;
+        timestamp: number;
+        group: string;
+    }[]>;
 };
+export {};

package/dist/composables/alert/{useProvideAlert.d.ts → useAlertProvide.d.ts}

@@ -3,7 +3,7 @@ import type { Ref } from 'vue';
  * Share the alert group name with all its children.
  * @param {Ref<string | undefined>} name the alert group name
  */
-export declare function useProvideAlertGroup({ name, }: {
+export declare function useAlertProvideGroup({ name, }: {
     name: Ref<string | undefined>;
 }): import("mitt").Emitter<{
     close: string;

package/dist/composables/dropdown/useDropdownContextmenu.d.ts

@@ -0,0 +1,18 @@
+import type { Ref } from 'vue';
+import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue';
+export declare function useDropdownContextmenu(dropdownEl: Ref<typeof VvDropdown>, targetEl?: Ref<HTMLElement> | HTMLElement): {
+    x: Ref<number, number>;
+    y: Ref<number, number>;
+    getBoundingClientRect: () => {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+    };
+    onContextmenu: (event: MouseEvent) => void;
+    onScroll: (event: HTMLElementEventMap["scroll"]) => void;
+};

package/dist/composables/dropdown/useDropdownInject.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Injects dropdown reference and the event bus
+ */
+export declare function useInjectedDropdownTrigger(): import("../../constants").DropdownTriggerState;
+/**
+ * Injects dropdown item role
+ */
+export declare function useInjectedDropdownItem(): import("../../constants").DropdownItemState;
+/**
+ * Injects dropdown action role
+ */
+export declare function useInjectedDropdownAction(): import("../../constants").DropdownActionState;

package/dist/composables/dropdown/{useProvideDropdown.d.ts → useDropdownProvide.d.ts}

@@ -1,11 +1,12 @@
-import { type Ref } from 'vue';
-import { DropdownRole, DropdownItemRole } from '../../constants';
+import type { Ref } from 'vue';
+import type { DropdownItemState } from '../../constants';
+import { DropdownItemRole, DropdownRole } from '../../constants';
 /**
  * Share the dropdown reference and the event bus with all its children.
  * @param {Ref<HTMLElement | null>} reference the dropdown reference
  */
-export declare function useProvideDropdownTrigger({ reference, id, expanded, aria, }: {
-    reference: Ref<HTMLElement | null>;
+export declare function useDropdownProvideTrigger({ reference, id, expanded, aria, }: {
+    reference: Ref<HTMLElement | null | undefined>;
     id: Ref<string | number>;
     expanded: Ref<boolean>;
     aria: Ref<{
@@ -19,15 +20,14 @@ export declare function useProvideDropdownTrigger({ reference, id, expanded, ari
         mouseover: Event;
         mouseleave: Event;
     }>;
-    component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+    component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 };
 /**
  * Share the dropdown item role with all its children.
  * @param {Ref<string>} role the dropdown item role
  */
-export declare function useProvideDropdownItem({ role, expanded, }: {
+export declare function useDropdownProvideItem({ role, ...others }: Omit<DropdownItemState, 'role'> & {
     role: Ref<`${DropdownRole}`>;
-    expanded: Ref<boolean>;
 }): {
     itemRole: globalThis.ComputedRef<DropdownItemRole>;
 };
@@ -35,6 +35,6 @@ export declare function useProvideDropdownItem({ role, expanded, }: {
  * Share the dropdown item role with all its children.
  * @param {Ref<string>} role the dropdown item role
  */
-export declare function useProvideDropdownAction({ expanded, }: {
+export declare function useDropdownProvideAction({ expanded, }: {
     expanded?: Ref<boolean>;
 }): void;

package/dist/composables/dropdown/useDropdownVirtualElement.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue';
+export declare function useDropdownVirtualElement(dropdownEl: Ref<typeof VvDropdown>): {
+    x: Ref<number, number>;
+    y: Ref<number, number>;
+    getBoundingClientRect: () => {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+    };
+    onScroll: (event: HTMLElementEventMap["scroll"]) => void;
+};

package/dist/composables/group/useGroupStateInject.d.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey } from 'vue';
+/**
+ * Injects a group state
+ */
+export declare function useGroupStateInject<GroupStateType>(groupKey: InjectionKey<GroupStateType>): {
+    group: GroupStateType | undefined;
+    isInGroup: globalThis.ComputedRef<boolean>;
+    getGroupOrLocalRef: <TProps extends object, TName extends keyof GroupStateType>(propName: TName, props: TProps, emit?: (event: string, ...args: unknown[]) => void) => GroupStateType[TName];
+};

package/dist/composables/group/useGroupStateProvide.d.ts

@@ -0,0 +1,6 @@
+import type { Emitter } from 'mitt';
+import type { InjectionKey, Ref } from 'vue';
+/**
+ * Share part of the state of the component with all its children.
+ */
+export declare function useGroupStateProvide<TGroupState extends Record<string, Ref<unknown> | Emitter<any>>>(key: InjectionKey<TGroupState>, groupState: TGroupState): void;

package/dist/composables/index.d.ts

@@ -1 +1,4 @@
 export { useAlert } from './alert/useAlert';
+export { useDropdownContextmenu } from './dropdown/useDropdownContextmenu';
+export { useDropdownVirtualElement } from './dropdown/useDropdownVirtualElement';
+export { useBlurhash } from './useBlurhash';

package/dist/composables/index.es.js

@@ -1,4 +1,6 @@
-import { reactive, computed } from "vue";
+import { reactive, computed, unref, getCurrentInstance, onMounted, onUnmounted, ref } from "vue";
+import { wrap } from "comlink";
+import Pica from "pica";
 const DEFAULT_ALERT_AUTO_CLOSE = 1e4;
 const DEFAULT_ALERT_MODIFIERS = "info";
 const DEFAULT_ALERT_DISMISSABLE = true;
@@ -18,7 +20,7 @@ const groups = reactive(
     [DEFAULT_ALERT_GROUP, /* @__PURE__ */ new Map()]
   ])
 );
-const useAlert = () => {
+function useAlert() {
   const addAlert = ({
     id = crypto.randomUUID(),
     group = DEFAULT_ALERT_GROUP,
@@ -28,7 +30,8 @@ const useAlert = () => {
     footer,
     modifiers = DEFAULT_ALERT_MODIFIERS,
     dismissable = DEFAULT_ALERT_DISMISSABLE,
-    autoClose = DEFAULT_ALERT_AUTO_CLOSE
+    autoClose = DEFAULT_ALERT_AUTO_CLOSE,
+    timestamp = Date.now()
   } = {}) => {
     if (!groups.has(group)) {
       groups.set(group, /* @__PURE__ */ new Map());
@@ -43,7 +46,7 @@ const useAlert = () => {
         icon = DefaultAlertIconMap.get(alertModifier);
       }
     }
-    groupMap == null ? void 0 : groupMap.set(id.toString(), {
+    groupMap?.set(id.toString(), {
       id,
       group,
       title,
@@ -53,17 +56,17 @@ const useAlert = () => {
       modifiers,
       dismissable,
       autoClose,
-      timestamp: Date.now()
+      timestamp
     });
   };
   const removeAlert = (id, group = DEFAULT_ALERT_GROUP) => {
     const groupMap = groups.get(group);
-    groupMap == null ? void 0 : groupMap.delete(id.toString());
+    groupMap?.delete(id.toString());
   };
   const getAlerts = (group = DEFAULT_ALERT_GROUP) => {
     return computed(() => {
       const groupMap = groups.get(group);
-      return groupMap && groupMap instanceof Map ? Array.from(groupMap == null ? void 0 : groupMap.values()).sort(
+      return groupMap && groupMap instanceof Map ? Array.from(groupMap?.values()).sort(
         (a, b) => a.timestamp - b.timestamp
       ) : [];
     });
@@ -75,7 +78,170 @@ const useAlert = () => {
     removeAlert,
     getAlerts
   };
-};
+}
+function useDropdownContextmenu(dropdownEl, targetEl) {
+  const { x, y, getBoundingClientRect, onScroll } = useDropdownVirtualElement(dropdownEl);
+  const onContextmenu = (event) => {
+    x.value = event.clientX;
+    y.value = event.clientY;
+    event.preventDefault();
+    dropdownEl.value.show();
+  };
+  const target = computed(() => unref(targetEl));
+  if (target && getCurrentInstance()) {
+    onMounted(() => {
+      target.value?.addEventListener("contextmenu", onContextmenu, false);
+    });
+    onUnmounted(() => {
+      target.value?.removeEventListener("contextmenu", onContextmenu);
+    });
+  }
+  return { x, y, getBoundingClientRect, onContextmenu, onScroll };
+}
+function findScrollContainer(element) {
+  if (!element) {
+    return void 0;
+  }
+  let parent = element.parentElement;
+  while (parent) {
+    const { overflow } = window.getComputedStyle(parent);
+    if (overflow.split(" ").every((item) => item === "auto" || item === "scroll")) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return document.documentElement;
+}
+function useDropdownVirtualElement(dropdownEl) {
+  const x = ref(0);
+  const y = ref(0);
+  const scrollContainerEl = ref();
+  let scrollXDelta = 0;
+  let scrollYDelta = 0;
+  let lastScrollTop = 0;
+  let lastScrollLeft = 0;
+  const onScroll = (event) => {
+    const scrollEl = event.target;
+    scrollXDelta = scrollEl.scrollLeft - lastScrollLeft;
+    scrollYDelta = scrollEl.scrollTop - lastScrollTop;
+    y.value = y.value - scrollYDelta;
+    x.value = x.value - scrollXDelta;
+    lastScrollLeft = scrollEl.scrollLeft;
+    lastScrollTop = scrollEl.scrollTop;
+  };
+  const getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    x: x.value,
+    y: y.value,
+    top: y.value,
+    left: x.value,
+    right: x.value,
+    bottom: y.value
+  });
+  if (getCurrentInstance()) {
+    onMounted(() => {
+      if (dropdownEl.value) {
+        dropdownEl.value.init({
+          getBoundingClientRect
+        });
+        scrollContainerEl.value = findScrollContainer(dropdownEl.value.$el);
+        if (scrollContainerEl.value) {
+          scrollContainerEl.value.addEventListener("scroll", onScroll);
+        }
+      }
+    });
+    onUnmounted(() => {
+      if (scrollContainerEl.value) {
+        scrollContainerEl.value.removeEventListener("scroll", onScroll);
+      }
+    });
+  }
+  return { x, y, getBoundingClientRect, onScroll };
+}
+const jsContent = '!function(){"use strict";var t=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],e=e=>{let n=0;for(let r=0;r<e.length;r++){let a=e[r];n=83*n+t.indexOf(a)}return n},n=(e,n)=>{var r="";for(let a=1;a<=n;a++){let o=Math.floor(e)/Math.pow(83,n-a)%83;r+=t[Math.floor(o)]}return r},r=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},a=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.trunc(12.92*e*255+.5):Math.trunc(255*(1.055*Math.pow(e,.4166666666666667)-.055)+.5)},o=(t,e)=>(t=>t<0?-1:1)(t)*Math.pow(Math.abs(t),e),s=class extends Error{constructor(t){super(t),this.name="ValidationError",this.message=t}},i=t=>{if(!t||t.length<6)throw new s("The blurhash string must be at least 6 characters");let n=e(t[0]),r=Math.floor(n/9)+1,a=n%9+1;if(t.length!==4+2*a*r)throw new s(`blurhash length mismatch: length is ${t.length} but it should be ${4+2*a*r}`)},l=t=>{let e=t>>8&255,n=255&t;return[r(t>>16),r(e),r(n)]},c=(t,e)=>{let n=Math.floor(t/361),r=Math.floor(t/19)%19,a=t%19;return[o((n-9)/9,2)*e,o((r-9)/9,2)*e,o((a-9)/9,2)*e]},h=(t,n,r,o)=>{i(t),o|=1;let s=e(t[0]),h=Math.floor(s/9)+1,u=s%9+1,f=(e(t[1])+1)/166,p=new Array(u*h);for(let a=0;a<p.length;a++)if(0===a){let n=e(t.substring(2,6));p[a]=l(n)}else{let n=e(t.substring(4+2*a,6+2*a));p[a]=c(n,f*o)}let m=4*n,g=new Uint8ClampedArray(m*r);for(let e=0;e<r;e++)for(let t=0;t<n;t++){let o=0,s=0,i=0;for(let a=0;a<h;a++)for(let l=0;l<u;l++){let c=Math.cos(Math.PI*t*l/n)*Math.cos(Math.PI*e*a/r),h=p[l+a*u];o+=h[0]*c,s+=h[1]*c,i+=h[2]*c}let l=a(o),c=a(s),f=a(i);g[4*t+0+e*m]=l,g[4*t+1+e*m]=c,g[4*t+2+e*m]=f,g[4*t+3+e*m]=255}return g},u=(t,e,n,a)=>{let o=0,s=0,i=0,l=4*e;for(let h=0;h<e;h++){let e=4*h;for(let c=0;c<n;c++){let n=e+c*l,u=a(h,c);o+=u*r(t[n]),s+=u*r(t[n+1]),i+=u*r(t[n+2])}}let c=1/(e*n);return[o*c,s*c,i*c]},f=(t,e,r,i,l)=>{if(i<1||i>9||l<1||l>9)throw new s("BlurHash must have between 1 and 9 components");if(e*r*4!==t.length)throw new s("Width and height must match the pixels array");let c=[];for(let n=0;n<l;n++)for(let a=0;a<i;a++){let o=0==a&&0==n?1:2,s=u(t,e,r,(t,s)=>o*Math.cos(Math.PI*a*t/e)*Math.cos(Math.PI*n*s/r));c.push(s)}let h,f=c[0],p=c.slice(1),m="";if(m+=n(i-1+9*(l-1),1),p.length>0){let t=Math.max(...p.map(t=>Math.max(...t))),e=Math.floor(Math.max(0,Math.min(82,Math.floor(166*t-.5))));h=(e+1)/166,m+=n(e,1)}else h=1,m+=n(0,1);return m+=n((t=>(a(t[0])<<16)+(a(t[1])<<8)+a(t[2]))(f),4),p.forEach(t=>{m+=n(((t,e)=>19*Math.floor(Math.max(0,Math.min(18,Math.floor(9*o(t[0]/e,.5)+9.5))))*19+19*Math.floor(Math.max(0,Math.min(18,Math.floor(9*o(t[1]/e,.5)+9.5))))+Math.floor(Math.max(0,Math.min(18,Math.floor(9*o(t[2]/e,.5)+9.5)))))(t,h),2)}),m};\n/**\n   * @license\n   * Copyright 2019 Google LLC\n   * SPDX-License-Identifier: Apache-2.0\n   */\nconst p=Symbol("Comlink.proxy"),m=Symbol("Comlink.endpoint"),g=Symbol("Comlink.releaseProxy"),M=Symbol("Comlink.finalizer"),d=Symbol("Comlink.thrown"),y=t=>"object"==typeof t&&null!==t||"function"==typeof t,w=new Map([["proxy",{canHandle:t=>y(t)&&t[p],serialize(t){const{port1:e,port2:n}=new MessageChannel;return b(t,e),[n,[n]]},deserialize:t=>(t.start(),function(t,e){const n=new Map;return t.addEventListener("message",function(t){const{data:e}=t;if(!e||!e.id)return;const r=n.get(e.id);if(r)try{r(e)}finally{n.delete(e.id)}}),P(t,n,[],e)}(t))}],["throw",{canHandle:t=>y(t)&&d in t,serialize({value:t}){let e;return e=t instanceof Error?{isError:!0,value:{message:t.message,name:t.name,stack:t.stack}}:{isError:!1,value:t},[e,[]]},deserialize(t){if(t.isError)throw Object.assign(new Error(t.value.message),t.value);throw t.value}}]]);function b(t,e=globalThis,n=["*"]){e.addEventListener("message",function r(a){if(!a||!a.data)return;if(!function(t,e){for(const n of t){if(e===n||"*"===n)return!0;if(n instanceof RegExp&&n.test(e))return!0}return!1}(n,a.origin))return void console.warn(`Invalid origin \'${a.origin}\' for comlink proxy`);const{id:o,type:s,path:i}=Object.assign({path:[]},a.data),l=(a.data.argumentList||[]).map(L);let c;try{const e=i.slice(0,-1).reduce((t,e)=>t[e],t),n=i.reduce((t,e)=>t[e],t);switch(s){case"GET":c=n;break;case"SET":e[i.slice(-1)[0]]=L(a.data.value),c=!0;break;case"APPLY":c=n.apply(e,l);break;case"CONSTRUCT":c=function(t){return Object.assign(t,{[p]:!0})}(new n(...l));break;case"ENDPOINT":{const{port1:e,port2:n}=new MessageChannel;b(t,n),c=function(t,e){return T.set(t,e),t}(e,[e])}break;case"RELEASE":c=void 0;break;default:return}}catch(h){c={value:h,[d]:0}}Promise.resolve(c).catch(t=>({value:t,[d]:0})).then(n=>{const[a,i]=R(n);e.postMessage(Object.assign(Object.assign({},a),{id:o}),i),"RELEASE"===s&&(e.removeEventListener("message",r),E(e),M in t&&"function"==typeof t[M]&&t[M]())}).catch(t=>{const[n,r]=R({value:new TypeError("Unserializable return value"),[d]:0});e.postMessage(Object.assign(Object.assign({},n),{id:o}),r)})}),e.start&&e.start()}function E(t){(function(t){return"MessagePort"===t.constructor.name})(t)&&t.close()}function v(t){if(t)throw new Error("Proxy has been released and is not useable")}function S(t){return O(t,new Map,{type:"RELEASE"}).then(()=>{E(t)})}const x=new WeakMap,k="FinalizationRegistry"in globalThis&&new FinalizationRegistry(t=>{const e=(x.get(t)||0)-1;x.set(t,e),0===e&&S(t)});function P(t,e,n=[],r=function(){}){let a=!1;const o=new Proxy(r,{get(r,s){if(v(a),s===g)return()=>{!function(t){k&&k.unregister(t)}(o),S(t),e.clear(),a=!0};if("then"===s){if(0===n.length)return{then:()=>o};const r=O(t,e,{type:"GET",path:n.map(t=>t.toString())}).then(L);return r.then.bind(r)}return P(t,e,[...n,s])},set(r,o,s){v(a);const[i,l]=R(s);return O(t,e,{type:"SET",path:[...n,o].map(t=>t.toString()),value:i},l).then(L)},apply(r,o,s){v(a);const i=n[n.length-1];if(i===m)return O(t,e,{type:"ENDPOINT"}).then(L);if("bind"===i)return P(t,e,n.slice(0,-1));const[l,c]=A(s);return O(t,e,{type:"APPLY",path:n.map(t=>t.toString()),argumentList:l},c).then(L)},construct(r,o){v(a);const[s,i]=A(o);return O(t,e,{type:"CONSTRUCT",path:n.map(t=>t.toString()),argumentList:s},i).then(L)}});return function(t,e){const n=(x.get(e)||0)+1;x.set(e,n),k&&k.register(t,e,t)}(o,t),o}function A(t){const e=t.map(R);return[e.map(t=>t[0]),(n=e.map(t=>t[1]),Array.prototype.concat.apply([],n))];var n}const T=new WeakMap;function R(t){for(const[e,n]of w)if(n.canHandle(t)){const[r,a]=n.serialize(t);return[{type:"HANDLER",name:e,value:r},a]}return[{type:"RAW",value:t},T.get(t)||[]]}function L(t){switch(t.type){case"HANDLER":return w.get(t.name).deserialize(t.value);case"RAW":return t.value}}function O(t,e,n,r){return new Promise(a=>{const o=new Array(4).fill(0).map(()=>Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(16)).join("-");e.set(o,a),t.start&&t.start(),t.postMessage(Object.assign({id:o},n),r)})}b({ValidationError:s,encode:f,decode:h,isBlurhashValid:t=>{try{i(t)}catch(e){return{result:!1,errorReason:e.message}}return{result:!0}}})}();\n';
+const blob = typeof self !== "undefined" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", jsContent], { type: "text/javascript;charset=utf-8" });
+function WorkerWrapper(options) {
+  let objURL;
+  try {
+    objURL = blob && (self.URL || self.webkitURL).createObjectURL(blob);
+    if (!objURL) throw "";
+    const worker = new Worker(objURL, {
+      name: options?.name
+    });
+    worker.addEventListener("error", () => {
+      (self.URL || self.webkitURL).revokeObjectURL(objURL);
+    });
+    return worker;
+  } catch (e) {
+    return new Worker(
+      "data:text/javascript;charset=utf-8," + encodeURIComponent(jsContent),
+      {
+        name: options?.name
+      }
+    );
+  }
+}
+const remoteFunction = wrap(new WorkerWrapper());
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = (...args) => reject(args);
+    img.src = src;
+  });
+}
+function getWidthHeightFromMaxSize(width, height, maxSize) {
+  if (width > height) {
+    return {
+      width: maxSize,
+      height: Math.round(maxSize * (height / width))
+    };
+  }
+  return {
+    width: Math.round(maxSize * (width / height)),
+    height: maxSize
+  };
+}
+async function resizeImage(image, width, height) {
+  const resizer = new Pica();
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const result = await resizer.resize(image, canvas);
+  return result.getContext("2d")?.getImageData(0, 0, width, height).data;
+}
+function useBlurhash() {
+  async function encode(file) {
+    const imageUrl = URL.createObjectURL(file);
+    const image = await loadImage(imageUrl);
+    if ("width" in image && "height" in image) {
+      const { width: newWidth, height: newHeight } = getWidthHeightFromMaxSize(
+        image.width,
+        image.height,
+        32
+      );
+      const imageData = await resizeImage(
+        image,
+        newWidth,
+        newHeight
+      );
+      if (imageData) {
+        return remoteFunction.encode(
+          imageData,
+          newWidth,
+          newHeight,
+          4,
+          4
+        );
+      }
+    }
+  }
+  return { encode, decode: remoteFunction.decode, loadImage };
+}
 export {
-  useAlert
+  useAlert,
+  useBlurhash,
+  useDropdownContextmenu,
+  useDropdownVirtualElement
 };

package/dist/composables/index.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).composables={},e.vue)}(this,(function(e,t){"use strict";const o="default",n="information",i=new Map([["success","check-circle"],["info",n],["warning","warning"],["danger","error"]]),s=t.reactive(new Map([[o,new Map]]));e.useAlert=()=>{const e=(e=o)=>t.computed((()=>{const t=s.get(e);return t&&t instanceof Map?Array.from(null==t?void 0:t.values()).sort(((e,t)=>e.timestamp-t.timestamp)):[]}));return{groups:s,alerts:e(),addAlert:({id:e=crypto.randomUUID(),group:t=o,title:r,icon:a=n,content:l,footer:u,modifiers:c="info",dismissable:f=true,autoClose:d=1e4}={})=>{s.has(t)||s.set(t,new Map);const p=s.get(t),m="string"==typeof c?c.split(" "):c;if(!a){const e=m.find((e=>i.has(e)));e&&(a=i.get(e))}null==p||p.set(e.toString(),{id:e,group:t,title:r,icon:a,content:l,footer:u,modifiers:c,dismissable:f,autoClose:d,timestamp:Date.now()})},removeAlert:(e,t=o)=>{const n=s.get(t);null==n||n.delete(e.toString())},getAlerts:e}},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue"),require("comlink"),require("pica")):"function"==typeof define&&define.amd?define(["exports","vue","comlink","pica"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).composables={},t.vue,t.comlink,t.Pica)}(this,function(t,e,n,r){"use strict";const a="default",o="information",i=new Map([["success","check-circle"],["info",o],["warning","warning"],["danger","error"]]),s=e.reactive(new Map([[a,new Map]]));function l(t){const n=e.ref(0),r=e.ref(0),a=e.ref();let o=0,i=0,s=0,l=0;const c=t=>{const e=t.target;o=e.scrollLeft-l,i=e.scrollTop-s,r.value=r.value-i,n.value=n.value-o,l=e.scrollLeft,s=e.scrollTop},u=()=>({width:0,height:0,x:n.value,y:r.value,top:r.value,left:n.value,right:n.value,bottom:r.value});return e.getCurrentInstance()&&(e.onMounted(()=>{t.value&&(t.value.init({getBoundingClientRect:u}),a.value=function(t){if(!t)return;let e=t.parentElement;for(;e;){const{overflow:t}=window.getComputedStyle(e);if(t.split(" ").every(t=>"auto"===t||"scroll"===t))return e;e=e.parentElement}return document.documentElement}(t.value.$el),a.value&&a.value.addEventListener("scroll",c))}),e.onUnmounted(()=>{a.value&&a.value.removeEventListener("scroll",c)})),{x:n,y:r,getBoundingClientRect:u,onScroll:c}}const c='!function(){"use strict";var t=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],e=e=>{let n=0;for(let r=0;r<e.length;r++){let a=e[r];n=83*n+t.indexOf(a)}return n},n=(e,n)=>{var r="";for(let a=1;a<=n;a++){let o=Math.floor(e)/Math.pow(83,n-a)%83;r+=t[Math.floor(o)]}return r},r=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},a=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.trunc(12.92*e*255+.5):Math.trunc(255*(1.055*Math.pow(e,.4166666666666667)-.055)+.5)},o=(t,e)=>(t=>t<0?-1:1)(t)*Math.pow(Math.abs(t),e),s=class extends Error{constructor(t){super(t),this.name="ValidationError",this.message=t}},i=t=>{if(!t||t.length<6)throw new s("The blurhash string must be at least 6 characters");let n=e(t[0]),r=Math.floor(n/9)+1,a=n%9+1;if(t.length!==4+2*a*r)throw new s(`blurhash length mismatch: length is ${t.length} but it should be ${4+2*a*r}`)},l=t=>{let e=t>>8&255,n=255&t;return[r(t>>16),r(e),r(n)]},c=(t,e)=>{let n=Math.floor(t/361),r=Math.floor(t/19)%19,a=t%19;return[o((n-9)/9,2)*e,o((r-9)/9,2)*e,o((a-9)/9,2)*e]},h=(t,n,r,o)=>{i(t),o|=1;let s=e(t[0]),h=Math.floor(s/9)+1,u=s%9+1,f=(e(t[1])+1)/166,p=new Array(u*h);for(let a=0;a<p.length;a++)if(0===a){let n=e(t.substring(2,6));p[a]=l(n)}else{let n=e(t.substring(4+2*a,6+2*a));p[a]=c(n,f*o)}let m=4*n,g=new Uint8ClampedArray(m*r);for(let e=0;e<r;e++)for(let t=0;t<n;t++){let o=0,s=0,i=0;for(let a=0;a<h;a++)for(let l=0;l<u;l++){let c=Math.cos(Math.PI*t*l/n)*Math.cos(Math.PI*e*a/r),h=p[l+a*u];o+=h[0]*c,s+=h[1]*c,i+=h[2]*c}let l=a(o),c=a(s),f=a(i);g[4*t+0+e*m]=l,g[4*t+1+e*m]=c,g[4*t+2+e*m]=f,g[4*t+3+e*m]=255}return g},u=(t,e,n,a)=>{let o=0,s=0,i=0,l=4*e;for(let h=0;h<e;h++){let e=4*h;for(let c=0;c<n;c++){let n=e+c*l,u=a(h,c);o+=u*r(t[n]),s+=u*r(t[n+1]),i+=u*r(t[n+2])}}let c=1/(e*n);return[o*c,s*c,i*c]},f=(t,e,r,i,l)=>{if(i<1||i>9||l<1||l>9)throw new s("BlurHash must have between 1 and 9 components");if(e*r*4!==t.length)throw new s("Width and height must match the pixels array");let c=[];for(let n=0;n<l;n++)for(let a=0;a<i;a++){let o=0==a&&0==n?1:2,s=u(t,e,r,(t,s)=>o*Math.cos(Math.PI*a*t/e)*Math.cos(Math.PI*n*s/r));c.push(s)}let h,f=c[0],p=c.slice(1),m="";if(m+=n(i-1+9*(l-1),1),p.length>0){let t=Math.max(...p.map(t=>Math.max(...t))),e=Math.floor(Math.max(0,Math.min(82,Math.floor(166*t-.5))));h=(e+1)/166,m+=n(e,1)}else h=1,m+=n(0,1);return m+=n((t=>(a(t[0])<<16)+(a(t[1])<<8)+a(t[2]))(f),4),p.forEach(t=>{m+=n(((t,e)=>19*Math.floor(Math.max(0,Math.min(18,Math.floor(9*o(t[0]/e,.5)+9.5))))*19+19*Math.floor(Math.max(0,Math.min(18,Math.floor(9*o(t[1]/e,.5)+9.5))))+Math.floor(Math.max(0,Math.min(18,Math.floor(9*o(t[2]/e,.5)+9.5)))))(t,h),2)}),m};\n/**\n   * @license\n   * Copyright 2019 Google LLC\n   * SPDX-License-Identifier: Apache-2.0\n   */\nconst p=Symbol("Comlink.proxy"),m=Symbol("Comlink.endpoint"),g=Symbol("Comlink.releaseProxy"),M=Symbol("Comlink.finalizer"),d=Symbol("Comlink.thrown"),y=t=>"object"==typeof t&&null!==t||"function"==typeof t,w=new Map([["proxy",{canHandle:t=>y(t)&&t[p],serialize(t){const{port1:e,port2:n}=new MessageChannel;return b(t,e),[n,[n]]},deserialize:t=>(t.start(),function(t,e){const n=new Map;return t.addEventListener("message",function(t){const{data:e}=t;if(!e||!e.id)return;const r=n.get(e.id);if(r)try{r(e)}finally{n.delete(e.id)}}),P(t,n,[],e)}(t))}],["throw",{canHandle:t=>y(t)&&d in t,serialize({value:t}){let e;return e=t instanceof Error?{isError:!0,value:{message:t.message,name:t.name,stack:t.stack}}:{isError:!1,value:t},[e,[]]},deserialize(t){if(t.isError)throw Object.assign(new Error(t.value.message),t.value);throw t.value}}]]);function b(t,e=globalThis,n=["*"]){e.addEventListener("message",function r(a){if(!a||!a.data)return;if(!function(t,e){for(const n of t){if(e===n||"*"===n)return!0;if(n instanceof RegExp&&n.test(e))return!0}return!1}(n,a.origin))return void console.warn(`Invalid origin \'${a.origin}\' for comlink proxy`);const{id:o,type:s,path:i}=Object.assign({path:[]},a.data),l=(a.data.argumentList||[]).map(L);let c;try{const e=i.slice(0,-1).reduce((t,e)=>t[e],t),n=i.reduce((t,e)=>t[e],t);switch(s){case"GET":c=n;break;case"SET":e[i.slice(-1)[0]]=L(a.data.value),c=!0;break;case"APPLY":c=n.apply(e,l);break;case"CONSTRUCT":c=function(t){return Object.assign(t,{[p]:!0})}(new n(...l));break;case"ENDPOINT":{const{port1:e,port2:n}=new MessageChannel;b(t,n),c=function(t,e){return T.set(t,e),t}(e,[e])}break;case"RELEASE":c=void 0;break;default:return}}catch(h){c={value:h,[d]:0}}Promise.resolve(c).catch(t=>({value:t,[d]:0})).then(n=>{const[a,i]=R(n);e.postMessage(Object.assign(Object.assign({},a),{id:o}),i),"RELEASE"===s&&(e.removeEventListener("message",r),E(e),M in t&&"function"==typeof t[M]&&t[M]())}).catch(t=>{const[n,r]=R({value:new TypeError("Unserializable return value"),[d]:0});e.postMessage(Object.assign(Object.assign({},n),{id:o}),r)})}),e.start&&e.start()}function E(t){(function(t){return"MessagePort"===t.constructor.name})(t)&&t.close()}function v(t){if(t)throw new Error("Proxy has been released and is not useable")}function S(t){return O(t,new Map,{type:"RELEASE"}).then(()=>{E(t)})}const x=new WeakMap,k="FinalizationRegistry"in globalThis&&new FinalizationRegistry(t=>{const e=(x.get(t)||0)-1;x.set(t,e),0===e&&S(t)});function P(t,e,n=[],r=function(){}){let a=!1;const o=new Proxy(r,{get(r,s){if(v(a),s===g)return()=>{!function(t){k&&k.unregister(t)}(o),S(t),e.clear(),a=!0};if("then"===s){if(0===n.length)return{then:()=>o};const r=O(t,e,{type:"GET",path:n.map(t=>t.toString())}).then(L);return r.then.bind(r)}return P(t,e,[...n,s])},set(r,o,s){v(a);const[i,l]=R(s);return O(t,e,{type:"SET",path:[...n,o].map(t=>t.toString()),value:i},l).then(L)},apply(r,o,s){v(a);const i=n[n.length-1];if(i===m)return O(t,e,{type:"ENDPOINT"}).then(L);if("bind"===i)return P(t,e,n.slice(0,-1));const[l,c]=A(s);return O(t,e,{type:"APPLY",path:n.map(t=>t.toString()),argumentList:l},c).then(L)},construct(r,o){v(a);const[s,i]=A(o);return O(t,e,{type:"CONSTRUCT",path:n.map(t=>t.toString()),argumentList:s},i).then(L)}});return function(t,e){const n=(x.get(e)||0)+1;x.set(e,n),k&&k.register(t,e,t)}(o,t),o}function A(t){const e=t.map(R);return[e.map(t=>t[0]),(n=e.map(t=>t[1]),Array.prototype.concat.apply([],n))];var n}const T=new WeakMap;function R(t){for(const[e,n]of w)if(n.canHandle(t)){const[r,a]=n.serialize(t);return[{type:"HANDLER",name:e,value:r},a]}return[{type:"RAW",value:t},T.get(t)||[]]}function L(t){switch(t.type){case"HANDLER":return w.get(t.name).deserialize(t.value);case"RAW":return t.value}}function O(t,e,n,r){return new Promise(a=>{const o=new Array(4).fill(0).map(()=>Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(16)).join("-");e.set(o,a),t.start&&t.start(),t.postMessage(Object.assign({id:o},n),r)})}b({ValidationError:s,encode:f,decode:h,isBlurhashValid:t=>{try{i(t)}catch(e){return{result:!1,errorReason:e.message}}return{result:!0}}})}();\n',u="undefined"!=typeof self&&self.Blob&&new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);",c],{type:"text/javascript;charset=utf-8"});const h=n.wrap(new function(t){let e;try{if(e=u&&(self.URL||self.webkitURL).createObjectURL(u),!e)throw"";const n=new Worker(e,{name:t?.name});return n.addEventListener("error",()=>{(self.URL||self.webkitURL).revokeObjectURL(e)}),n}catch(n){return new Worker("data:text/javascript;charset=utf-8,"+encodeURIComponent(c),{name:t?.name})}});function f(t){return new Promise((e,n)=>{const r=new Image;r.onload=()=>e(r),r.onerror=(...t)=>n(t),r.src=t})}t.useAlert=function(){const t=(t=a)=>e.computed(()=>{const e=s.get(t);return e&&e instanceof Map?Array.from(e?.values()).sort((t,e)=>t.timestamp-e.timestamp):[]});return{groups:s,alerts:t(),addAlert:({id:t=crypto.randomUUID(),group:e=a,title:n,icon:r=o,content:l,footer:c,modifiers:u="info",dismissable:h=true,autoClose:f=1e4,timestamp:m=Date.now()}={})=>{s.has(e)||s.set(e,new Map);const d=s.get(e),p="string"==typeof u?u.split(" "):u;if(!r){const t=p.find(t=>i.has(t));t&&(r=i.get(t))}d?.set(t.toString(),{id:t,group:e,title:n,icon:r,content:l,footer:c,modifiers:u,dismissable:h,autoClose:f,timestamp:m})},removeAlert:(t,e=a)=>{const n=s.get(e);n?.delete(t.toString())},getAlerts:t}},t.useBlurhash=function(){return{encode:async function(t){const e=URL.createObjectURL(t),n=await f(e);if("width"in n&&"height"in n){const{width:t,height:e}=(a=n.width,o=n.height,i=32,a>o?{width:i,height:Math.round(i*(o/a))}:{width:Math.round(i*(a/o)),height:i}),s=await async function(t,e,n){const a=new r,o=document.createElement("canvas");o.width=e,o.height=n;const i=await a.resize(t,o);return i.getContext("2d")?.getImageData(0,0,e,n).data}(n,t,e);if(s)return h.encode(s,t,e,4,4)}var a,o,i},decode:h.decode,loadImage:f}},t.useDropdownContextmenu=function(t,n){const{x:r,y:a,getBoundingClientRect:o,onScroll:i}=l(t),s=e=>{r.value=e.clientX,a.value=e.clientY,e.preventDefault(),t.value.show()},c=e.computed(()=>e.unref(n));return c&&e.getCurrentInstance()&&(e.onMounted(()=>{c.value?.addEventListener("contextmenu",s,!1)}),e.onUnmounted(()=>{c.value?.removeEventListener("contextmenu",s)})),{x:r,y:a,getBoundingClientRect:o,onContextmenu:s,onScroll:i}},t.useDropdownVirtualElement=l,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/dist/composables/useBlurhash.d.ts

@@ -0,0 +1,7 @@
+declare function loadImage(src: string): Promise<CanvasImageSource>;
+export declare function useBlurhash(): {
+    encode: (file: File) => Promise<string | undefined>;
+    decode: import("comlink").Remote<(blurhash: string, width: number, height: number, punch?: number) => Uint8ClampedArray>;
+    loadImage: typeof loadImage;
+};
+export {};

package/dist/composables/useComponentFocus.d.ts

@@ -1,4 +1,4 @@
 import type { MaybeElement, MaybeElementRef } from '@vueuse/core';
-export declare function useComponentFocus(inputTemplateRef: MaybeElementRef<MaybeElement>, emit: (event: 'focus' | 'blur', value: unknown) => void): {
-    focused: globalThis.Ref<boolean>;
+export declare function useComponentFocus(inputTemplateRef: MaybeElementRef<MaybeElement>, emit: ((name: 'blur', ...args: any[]) => void) & ((name: 'focus', ...args: any[]) => void) & ((name: any, ...args: any[]) => void)): {
+    focused: globalThis.WritableComputedRef<boolean, boolean>;
 };

package/dist/composables/useComponentIcon.d.ts

@@ -1,10 +1,11 @@
 import type { Ref } from 'vue';
-export declare function useComponentIcon(icon: Ref<string | object | undefined> | undefined, iconPosition: Ref<string>): {
-    hasIcon: globalThis.ComputedRef<object | undefined>;
-    hasIconLeft: globalThis.ComputedRef<boolean>;
-    hasIconRight: globalThis.ComputedRef<boolean>;
-    hasIconTop: globalThis.ComputedRef<boolean>;
-    hasIconBottom: globalThis.ComputedRef<boolean>;
-    hasIconBefore: globalThis.ComputedRef<boolean>;
-    hasIconAfter: globalThis.ComputedRef<boolean>;
+import type { VvIconProps } from '../components/VvIcon';
+export declare function useComponentIcon(icon?: Ref<string | VvIconProps | undefined>, iconPosition?: Ref<string | undefined>): {
+    hasIcon: globalThis.ComputedRef<VvIconProps | undefined>;
+    hasIconLeft: globalThis.ComputedRef<VvIconProps | undefined>;
+    hasIconRight: globalThis.ComputedRef<VvIconProps | undefined>;
+    hasIconTop: globalThis.ComputedRef<VvIconProps | undefined>;
+    hasIconBottom: globalThis.ComputedRef<VvIconProps | undefined>;
+    hasIconBefore: globalThis.ComputedRef<VvIconProps | undefined>;
+    hasIconAfter: globalThis.ComputedRef<VvIconProps | undefined>;
 };

package/dist/composables/useOptions.d.ts

@@ -1,8 +1,8 @@
 import type { Option } from '../types/generic';
 export declare function useOptions(props: any): {
-    options: globalThis.Ref<any>;
-    getOptionLabel: (option: string | Option) => string;
-    getOptionValue: (option: string | Option) => any;
-    isOptionDisabled: (option: string | Option) => boolean;
-    getOptionGrouped: (option: string | Option) => Option[];
+    options: globalThis.Ref<any, any>;
+    getOptionLabel: <T extends string | Option>(option: T) => string;
+    getOptionValue: <T extends string | Option>(option: T) => any;
+    isOptionDisabled: <T extends string | Option>(option: T) => boolean;
+    getOptionGrouped: <T extends string | Option>(option: T) => T[];
 };

package/dist/composables/usePersistence.d.ts

@@ -0,0 +1,3 @@
+import type { Ref } from 'vue';
+import { StorageType } from '@/constants';
+export declare function usePersistence<T>(storageKey: Ref<string | undefined> | undefined, storageType?: Ref<`${StorageType}`> | `${StorageType}`, defaultValue?: T): Ref<T | undefined, T | undefined>;

package/dist/composables/useUniqueId.d.ts

@@ -1,2 +1,2 @@
 import type { Ref } from 'vue';
-export declare const useUniqueId: (id?: Ref<string | number | undefined>) => globalThis.ComputedRef<string>;
+export declare function useUniqueId(id?: Ref<string | number | undefined>): globalThis.ComputedRef<string>;

package/dist/composables/useVolver.d.ts

@@ -1 +1,4 @@
+/**
+ * Injects volver
+ */
 export declare function useVolver(): import("..").Volver | undefined;