@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022-2023 24/Consulting
+Copyright (c) 2022-present 8 Wave S.r.l. and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  
+
 [![volverjs](.storybook/static/volverjs-ui-vue.svg)](https://volverjs.github.io/ui-vue)
 
 ## @volverjs/ui-vue
@@ -16,7 +16,7 @@ maintained with ❤️ by
 
 <br>
 
-[![24/Consulting](.storybook/static/24consulting.svg)](https://24consulting.it)
+[![8 Wave](.storybook/static/8wave.svg)](https://8wave.it)
 
 <br>
 
@@ -46,12 +46,12 @@ Install the plugin in your `main.ts` file.
 ```typescript
 // main.ts
 import { createApp } from 'vue'
-import App from './App.vue'
 
 // import @volverjs/ui-vue plugin
 import { VolverPlugin } from '@volverjs/ui-vue'
 // import @volverjs/ui-vue icons collections
 import iconsCollections from '@volverjs/ui-vue/icons'
+import App from './App.vue'
 /*
  * import @volverjs/style base style with reset and props
  * for scss support you can import the scss file
@@ -63,28 +63,28 @@ const app = createApp(App).mount('#app')
 
 // install the plugin
 app.use(VolverPlugin, {
-  iconsCollections,
-  /*
+    iconsCollections,
+    /*
    * if you want can import components globally
    * components: { VvButton, VvInputText }
    */
-  components: undefined,
-  /*
+    components: undefined,
+    /*
    * if you want can import directives globally
    * directives: { toolip: VTooltip }
    */
-  directives: undefined,
-  /*
+    directives: undefined,
+    /*
    * if you want can create components aliases
    * aliases: { Btn: VvButton, BtnDanger: VvButton}
    */
-  aliases: undefined,
-  /*
+    aliases: undefined,
+    /*
    * if you want can change default props
    * for globally imported components and aliases
    * defaults: { VvButton: { modifiers: 'secondary', BtnDanger: { modifiers: 'danger' } }
    */
-  defaults: undefined
+    defaults: undefined
 })
 ```
 
@@ -129,32 +129,32 @@ import Components from 'unplugin-vue-components/vite'
 import { VolverResolver } from '@volverjs/ui-vue/resolvers/unplugin'
 
 export default defineConfig({
-  // ...
-  plugins: [
     // ...
-    Components({
-      resolvers: [
-        VolverResolver({
-          /*
+    plugins: [
+    // ...
+        Components({
+            resolvers: [
+                VolverResolver({
+                    /*
            * enable/disable auto import of components style
            * also accept 'scss' for scss support
            * default: false
            */
-          importStyle: false,
-          /*
+                    importStyle: false,
+                    /*
            * enable/disable auto import of directives
            * default: false
            */
-          directives: false,
-          /*
+                    directives: false,
+                    /*
            * Change components prefix
            * default: 'vv'
            */
-          prefix: 'vv'
+                    prefix: 'vv'
+                })
+            ]
         })
-      ]
-    })
-  ]
+    ]
 })
 ```
 
@@ -167,27 +167,28 @@ export default defineConfig({
 Used to show alert messages and notifications
 
 ```typescript
-export type AlertModifiers =
-  | 'success'
-  | 'info'
-  | 'warning'
-  | 'danger'
-  | 'brand'
-  | 'accent'
+export type AlertModifier =
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger'
+    | 'brand'
+    | 'accent'
+    | string
 ```
 
 ```typescript
 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
+    id: string | number
+    title?: string
+    icon?: string | VvIconProps
+    content?: string
+    footer?: string
+    modifiers?: AlertModifier | AlertModifier[]
+    dismissable?: boolean
+    autoClose?: number
+    closeLabel?: string
+    role?: AlertRole
 }
 ```
 
@@ -199,10 +200,10 @@ import { useAlert } from '@volverjs/ui-vue/composables'
 const { addAlert, removeAlert, alerts } = useAlert()
 
 function showSuccess() {
-  addAlert({
-    title: 'Success!',
-    modifiers: 'success'
-  })
+    addAlert({
+        title: 'Success!',
+        modifiers: 'success'
+    })
 }
 ```
 
@@ -219,7 +220,101 @@ function showSuccess() {
 </div>
 ```
 
-###
+### useBlurhash
+
+Used to create blurred preview image ([blurhash](https://blurha.sh/))
+
+##### Example
+
+```typescript
+import { useBlurhash } from '@volverjs/ui-vue/composables'
+
+const { encode, decode, loadImage } = useBlurhash()
+
+const isLoading = ref(false)
+const file = ref({})
+const canvas = ref()
+const isImgLoaded = ref(false)
+const blurhash = ref('')
+const imageUrl = ref('')
+const image = ref()
+
+watch(
+    file,
+    async (newValue) => {
+        if (newValue?.size) {
+            this.imageUrl = URL.createObjectURL(newValue)
+            this.image = await this.loadImage(this.imageUrl)
+            this.blurhash = await this.encode(newValue)
+        }
+        else {
+            this.image = null
+            this.imageUrl = ''
+            this.blurhash = ''
+        }
+    },
+    { immediate: true }
+)
+
+watch(blurhash, async (newValue) => {
+    if (this.image) {
+        const blurhashDecoded = await this.decode(
+            newValue,
+            this.image.width,
+            this.image.height
+        )
+
+        if (this.canvas) {
+            this.canvas.width = this.image.width
+            this.canvas.height = this.image.height
+            const ctx = this.canvas.getContext('2d')
+            const imageData = ctx.createImageData(
+                this.canvas.width,
+                this.canvas.height
+            )
+            imageData.data.set(blurhashDecoded)
+            ctx.putImageData(imageData, 0, 0)
+        }
+    }
+})
+```
+
+```html
+<div
+  class="w-full grid gap-md grid-cols-3 h-150"
+  :class="{ 'vv-skeleton': isLoading }"
+>
+  <div class="w-150 h-150 col-span-1">
+    <div class="text-20 font-semibold mb-md">Upload image</div>
+    <vv-input-file
+      v-model="file"
+      name="input-file"
+      modifiers="drop-area square hidden"
+      accept=".gif,.jpg,.jpeg,.png,image/gif,image/jpeg,image/png"
+    />
+  </div>
+  <div v-show="blurhash" class="h-150 col-span-2">
+    <picture class="flex gap-md justify-center">
+      <div>
+        <div class="text-20 font-semibold mb-md">Blurhash</div>
+        <canvas ref="canvas" class="w-150 h-150 block object-cover" />
+      </div>
+      <div>
+        <div class="text-20 font-semibold mb-md">Image</div>
+        <img
+          v-if="image"
+          class="w-150 h-150 block object-cover"
+          :class="{ 'vv-skeleton__item': isLoading }"
+          :src="imageUrl"
+          alt="image"
+          :width="image.width"
+          :height="image.height"
+        />
+      </div>
+    </picture>
+  </div>
+</div>
+```
 
 ## Roadmap
 
@@ -232,9 +327,11 @@ The following features are planned for the next releases:
 - [x] (v0.0.6) `VvAvatar` and `VvAvatarGroup` component;
 - [x] (v0.0.6) Menus, navigation and tabs with `VvNav` and `VvTab`;
 - [x] (v0.0.6) Alerts, notifications and toasts with `VvAlert` and `VvAlertGroup` component;
+- [x] (v0.0.10) Multiple uploads with `VvInputFile`;
+- [x] (v0.0.10) `useBlurhash` composable;
+- [ ] Image crop and file previews;
 - [ ] Loaders with `VvLoader` and `VvSkeleton`;
 - [ ] `VvTable` component with sort, filters, pagination and cell editing;
-- [ ] Multiple uploads, image crop and file previews with `VvInputFile`;
 - [ ] Carousel and galleries with `VvCarousel` component;
 - [ ] Calendar and date picker with `VvCalendar` component.
 

package/auto-imports.d.ts

@@ -42,6 +42,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isEmpty: typeof import('./src/utils/ObjectUtilities')['isEmpty']
   const isFunction: typeof import('./src/utils/ObjectUtilities')['isFunction']
@@ -50,7 +51,6 @@ declare global {
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const isString: typeof import('./src/utils/ObjectUtilities')['isString']
-  const kebabCase: typeof import('./src/utils/ObjectUtilities')['kebabCase']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
@@ -75,6 +75,7 @@ declare global {
   const pickBy: typeof import('./src/utils/ObjectUtilities')['pickBy']
   const propsToObject: typeof import('./src/utils/ObjectUtilities')['propsToObject']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -136,11 +137,13 @@ declare global {
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBlurhash: typeof import('./src/composables/useBlurhash')['useBlurhash']
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useComponentFocus: typeof import('./src/composables/useComponentFocus')['useComponentFocus']
@@ -224,6 +227,7 @@ declare global {
   const useParentElement: typeof import('@vueuse/core')['useParentElement']
   const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePersistence: typeof import('./src/composables/usePersistence')['usePersistence']
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
@@ -312,5 +316,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }

package/bin/icons.cjs

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("fs"),require("yargs"),require("yargs/helpers"),require("@iconify/tools"),require("path"),require("@iconify/utils"),require("chokidar")):"function"==typeof define&&define.amd?define(["exports","fs","yargs","yargs/helpers","@iconify/tools","path","@iconify/utils","chokidar"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self)["generate-icons"]={},e.fileSystem,e.yargs,e.helpers,e.tools,e.path,e.utils,e.chokidar)}(this,(function(e,o,r,i,t,n,s,c){"use strict";function a(e,r="iconify",i={}){return o.readdirSync(e).forEach((function(t){o.statSync(e+"/"+t).isDirectory()?i=a(e+"/"+t,t,i):t.includes(".svg")&&(i[r]?i[r].push(n.join(e,"/",t)):i[r]=[n.join(e,"/",t)])})),i}function l(e,r,i){const c=a(e,i);Object.keys(c).length?Object.keys(c).forEach((e=>{!async function(e,r,i){const c=t.blankIconSet(e);for(const n of r){const e=await o.promises.readFile(n,{encoding:"utf-8"}),r=new t.SVG(e);await t.cleanupSVG(r),await t.parseColors(r,{defaultColor:"currentColor",callback:(e,o,r)=>!r||t.isEmptyColor(r)?o:"currentColor"}),await t.runSVGO(r);const i=n.replace(/^.*[\\/]/,"").split(".")[0].replace(/ /g,"-").replace(/[^a-z0-9-]/gi,"");c.fromSVG(i,r)}const a=c.export();try{s.validateIconSet(a)}catch(f){throw new Error(`Icon set is not valid: ${null==f?void 0:f.message}`)}const l=`${i}/${a.prefix}.json`;o.mkdirSync(n.dirname(l),{recursive:!0}),o.writeFileSync(l,JSON.stringify(a))}(e,c[e],r),console.info(`Icons generated in: ${r}/${e}.json\n`)})):console.error(`There are no files in ${e}`)}const f=r(i.hideBin(process.argv)).argv,d=f.srcPath,u=f.destPath||d;d&&u||(console.error("Please specify the srcPath and destPath with --srcPath and --destPath"),process.exit()),f.watch?c.watch(d).on("add",(()=>{l(d,u,f.prefix)})).on("change",(()=>{l(d,u,f.prefix)})):l(d,u,f.prefix),e.createIconifyJsonFiles=l,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("node:fs"),require("node:path"),require("yargs"),require("yargs/helpers"),require("@iconify/tools"),require("@iconify/utils"),require("chokidar")):"function"==typeof define&&define.amd?define(["exports","node:fs","node:path","yargs","yargs/helpers","@iconify/tools","@iconify/utils","chokidar"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self)["generate-icons"]={},e.fileSystem,e.path,e.yargs,e.helpers,e.tools,e.utils,e.chokidar)}(this,(function(e,o,r,n,i,t,s,c){"use strict";function a(e,n="iconify",i={}){return o.readdirSync(e).forEach((t=>{o.statSync(`${e}/${t}`).isDirectory()?i=a(`${e}/${t}`,t,i):t.includes(".svg")&&(i[n]?i[n].push(r.join(e,"/",t)):i[n]=[r.join(e,"/",t)])})),i}function l(e,n,i){const c=a(e,i);Object.keys(c).length?Object.keys(c).forEach((e=>{!async function(e,n,i){const c=t.blankIconSet(e);for(const r of n)try{const e=await o.promises.readFile(r,{encoding:"utf-8"}),n=new t.SVG(e);await t.cleanupSVG(n),await t.parseColors(n,{defaultColor:"currentColor",callback:(e,o,r)=>!r||t.isEmptyColor(r)?o:"currentColor"}),await t.runSVGO(n);const i=r.replace(/^.*[\\/]/,"").split(".")[0].replace(/ /g,"-").replace(/[^a-z0-9-]/gi,"");c.fromSVG(i,n)}catch(f){console.error(f)}const a=c.export();try{s.validateIconSet(a)}catch(f){throw new Error(`Icon set is not valid: ${null==f?void 0:f.message}`)}const l=`${i}/${a.prefix}.json`;o.mkdirSync(r.dirname(l),{recursive:!0}),o.writeFileSync(l,JSON.stringify(a))}(e,c[e],n),console.info(`Icons generated in: ${n}/${e}.json\n`)})):console.error(`There are no files in ${e}`)}const f=n(i.hideBin(process.argv)).argv,d=f.srcPath,u=f.destPath||d;d&&u||(console.error("Please specify the srcPath and destPath with --srcPath and --destPath"),process.exit()),f.watch?(l(d,u,f.prefix),c.watch(d,{ignoreInitial:!0}).on("add",(()=>{l(d,u,f.prefix)})).on("change",(()=>{l(d,u,f.prefix)}))):l(d,u,f.prefix),e.createIconifyJsonFiles=l,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package/bin/icons.js

@@ -1,15 +1,15 @@
-import fileSystem from "fs";
+import fileSystem from "node:fs";
+import path from "node:path";
 import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
 import { blankIconSet, SVG, cleanupSVG, parseColors, isEmptyColor, runSVGO } from "@iconify/tools";
-import path from "path";
 import { validateIconSet } from "@iconify/utils";
 import chokidar from "chokidar";
 function getAllFiles(dirPath, prefix = "iconify", objectFiles = {}) {
   const files = fileSystem.readdirSync(dirPath);
-  files.forEach(function(file) {
-    if (fileSystem.statSync(dirPath + "/" + file).isDirectory()) {
-      objectFiles = getAllFiles(dirPath + "/" + file, file, objectFiles);
+  files.forEach((file) => {
+    if (fileSystem.statSync(`${dirPath}/${file}`).isDirectory()) {
+      objectFiles = getAllFiles(`${dirPath}/${file}`, file, objectFiles);
     } else {
       if (file.includes(".svg")) {
         objectFiles[prefix] ? objectFiles[prefix].push(path.join(dirPath, "/", file)) : objectFiles[prefix] = [path.join(dirPath, "/", file)];
@@ -21,20 +21,24 @@ function getAllFiles(dirPath, prefix = "iconify", objectFiles = {}) {
 async function generateIcons(prefix, files, destPath2) {
   const iconSet = blankIconSet(prefix);
   for (const file of files) {
-    const content = await fileSystem.promises.readFile(file, {
-      encoding: "utf-8"
-    });
-    const svg = new SVG(content);
-    await cleanupSVG(svg);
-    await parseColors(svg, {
-      defaultColor: "currentColor",
-      callback: (attr, colorStr, color) => {
-        return !color || isEmptyColor(color) ? colorStr : "currentColor";
-      }
-    });
-    await runSVGO(svg);
-    const fileName = file.replace(/^.*[\\/]/, "").split(".")[0].replace(/ /g, "-").replace(/[^a-z0-9-]/gi, "");
-    iconSet.fromSVG(fileName, svg);
+    try {
+      const content = await fileSystem.promises.readFile(file, {
+        encoding: "utf-8"
+      });
+      const svg = new SVG(content);
+      await cleanupSVG(svg);
+      await parseColors(svg, {
+        defaultColor: "currentColor",
+        callback: (attr, colorStr, color) => {
+          return !color || isEmptyColor(color) ? colorStr : "currentColor";
+        }
+      });
+      await runSVGO(svg);
+      const fileName = file.replace(/^.*[\\/]/, "").split(".")[0].replace(/ /g, "-").replace(/[^a-z0-9-]/gi, "");
+      iconSet.fromSVG(fileName, svg);
+    } catch (error) {
+      console.error(error);
+    }
   }
   const iconifyJson = iconSet.export();
   try {
@@ -70,7 +74,10 @@ if (!srcPath || !destPath) {
   process.exit();
 }
 if (argv.watch) {
-  chokidar.watch(srcPath).on("add", () => {
+  createIconifyJsonFiles(srcPath, destPath, argv.prefix);
+  chokidar.watch(srcPath, {
+    ignoreInitial: true
+  }).on("add", () => {
     createIconifyJsonFiles(srcPath, destPath, argv.prefix);
   }).on("change", () => {
     createIconifyJsonFiles(srcPath, destPath, argv.prefix);

package/dist/Volver.d.ts

@@ -1,5 +1,5 @@
-import { type IconifyIcon, type IconifyJSON, type PartialIconifyAPIConfig } from '@iconify/vue';
 import type { Component, Directive, Plugin, Ref } from 'vue';
+import { type IconifyIcon, type IconifyJSON, type PartialIconifyAPIConfig } from '@iconify/vue';
 export declare function useDefaultProps(component: Component, defaults?: Record<string, unknown>, name?: string): Component;
 export type DefaultOptions = Record<string, Record<string, unknown>>;
 export type VolverOptions = {
@@ -45,33 +45,33 @@ export type VolverOptions = {
 };
 export interface VolverInterface {
     /**
-     * @param {String} src Icon source path (url)
+     * @param {string} src Icon source path (url)
      * @param {RequestInit} options
      * @returns {Promise<string | undefined>} String SVG if exist
      */
-    fetchIcon(src: string, options?: RequestInit): Promise<string | undefined>;
+    fetchIcon: (src: string, options?: RequestInit) => Promise<string | undefined>;
     /**
      * Add iconify collection to library
      * @see https://docs.iconify.design/icon-components/vue/add-collection.html
      * @param {IconifyJSON} collection
-     * @param {String} providerName Optional provider name
+     * @param {string} providerName Optional provider name
      */
-    addCollection(collection: IconifyJSON, providerName?: string): boolean;
+    addCollection: (collection: IconifyJSON, providerName?: string) => boolean;
     /**
      * Add icon to collection
      * @see https://docs.iconify.design/icon-components/vue/add-icon.html
-     * @param {String} name
+     * @param {string} name
      * @param {IconifyIcon} data
-     * @returns {Boolean} true on success, false if something is wrong with data
+     * @returns {boolean} true on success, false if something is wrong with data
      */
-    addIcon(name: string, data: IconifyIcon): boolean;
+    addIcon: (name: string, data: IconifyIcon) => boolean;
     /**
      * Add custom config for icons provider
-     * @param {String} provider
+     * @param {string} provider
      * @param {PartialIconifyAPIConfig} customConfig
-     * @returns {Boolean} true on success, false if something is wrong with data
+     * @returns {boolean} true on success, false if something is wrong with data
      */
-    addIconsAPIProvider(provider: string, customConfig: PartialIconifyAPIConfig): boolean;
+    addIconsAPIProvider: (provider: string, customConfig: PartialIconifyAPIConfig) => boolean;
     /**
      * Current provider
      */