@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.70

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>
 
@@ -44,14 +44,14 @@ npm install @volverjs/ui-vue --save
 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'
+// main.ts
+import { createApp } from 'vue'
+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
 })
 ```
 
@@ -123,38 +123,38 @@ To learn more about icons collections, check [icons documentation](src/component
 You can use `@volverjs/ui-vue` with [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) to automatically import components and styles.
 
 ```typescript
+import { VolverResolver } from '@volverjs/ui-vue/resolvers/unplugin'
+import Components from 'unplugin-vue-components/vite'
 // vite.config.ts
 import { defineConfig } from 'vite'
-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,100 @@ 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 +326,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/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,null==i?void 0:i.prefix);Object.keys(c).length?Object.keys(c).forEach((e=>{!async function(e,n,i,c){const a=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),(null==c?void 0:c.keepColors)||await t.parseColors(n,{defaultColor:"currentColor",callback:(e,o,r)=>!r||t.isEmptyColor(r)||o.includes("var(")?o:"currentColor"}),await t.runSVGO(n);const i=r.replace(/^.*[\\/]/,"").split(".")[0].replace(/ /g,"-").replace(/[^a-z0-9-]/gi,"");a.fromSVG(i,n)}catch(f){console.error(f)}const l=a.export();try{s.validateIconSet(l)}catch(f){throw new Error(`Icon set is not valid: ${null==f?void 0:f.message}`)}const d=`${i}/${l.prefix}.json`;o.mkdirSync(r.dirname(d),{recursive:!0}),o.writeFileSync(d,JSON.stringify(l))}(e,c[e],n,i),console.info(`Icons generated in: ${n}/${e}.json\n`)})):console.error(`There are no files in ${e}`)}const d=n(i.hideBin(process.argv)).argv,f=d.srcPath,u=d.destPath||f;f&&u||(console.error("Please specify the srcPath and destPath with --srcPath and --destPath"),process.exit());const p={prefix:d.prefix,keepColors:d.keepColors};d.watch?(l(f,u,p),c.watch(f,{ignoreInitial:!0}).on("add",(()=>{l(f,u,p)})).on("change",(()=>{l(f,u,p)}))):l(f,u,p),e.createIconifyJsonFiles=l,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package/bin/icons.js

@@ -1,15 +1,16 @@
-import fileSystem from "fs";
+#!/usr/bin/env node
+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)];
@@ -18,23 +19,29 @@ function getAllFiles(dirPath, prefix = "iconify", objectFiles = {}) {
   });
   return objectFiles;
 }
-async function generateIcons(prefix, files, destPath2) {
+async function generateIcons(prefix, files, destPath2, options2) {
   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";
+    try {
+      const content = await fileSystem.promises.readFile(file, {
+        encoding: "utf-8"
+      });
+      const svg = new SVG(content);
+      await cleanupSVG(svg);
+      if (!(options2 == null ? void 0 : options2.keepColors)) {
+        await parseColors(svg, {
+          defaultColor: "currentColor",
+          callback: (_attr, colorStr, color) => {
+            return !color || isEmptyColor(color) || colorStr.includes("var(") ? colorStr : "currentColor";
+          }
+        });
       }
-    });
-    await runSVGO(svg);
-    const fileName = file.replace(/^.*[\\/]/, "").split(".")[0].replace(/ /g, "-").replace(/[^a-z0-9-]/gi, "");
-    iconSet.fromSVG(fileName, svg);
+      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 {
@@ -48,14 +55,14 @@ async function generateIcons(prefix, files, destPath2) {
   fileSystem.mkdirSync(path.dirname(filename), { recursive: true });
   fileSystem.writeFileSync(filename, JSON.stringify(iconifyJson));
 }
-function createIconifyJsonFiles(srcPath2, destPath2, prefix) {
-  const objectFiles = getAllFiles(srcPath2, prefix);
+function createIconifyJsonFiles(srcPath2, destPath2, options2) {
+  const objectFiles = getAllFiles(srcPath2, options2 == null ? void 0 : options2.prefix);
   if (!Object.keys(objectFiles).length) {
     console.error(`There are no files in ${srcPath2}`);
   } else {
-    Object.keys(objectFiles).forEach((prefix2) => {
-      generateIcons(prefix2, objectFiles[prefix2], destPath2);
-      console.info(`Icons generated in: ${destPath2}/${prefix2}.json
+    Object.keys(objectFiles).forEach((prefix) => {
+      generateIcons(prefix, objectFiles[prefix], destPath2, options2);
+      console.info(`Icons generated in: ${destPath2}/${prefix}.json
 `);
     });
   }
@@ -69,14 +76,18 @@ if (!srcPath || !destPath) {
   );
   process.exit();
 }
+const options = { prefix: argv.prefix, keepColors: argv.keepColors };
 if (argv.watch) {
-  chokidar.watch(srcPath).on("add", () => {
-    createIconifyJsonFiles(srcPath, destPath, argv.prefix);
+  createIconifyJsonFiles(srcPath, destPath, options);
+  chokidar.watch(srcPath, {
+    ignoreInitial: true
+  }).on("add", () => {
+    createIconifyJsonFiles(srcPath, destPath, options);
   }).on("change", () => {
-    createIconifyJsonFiles(srcPath, destPath, argv.prefix);
+    createIconifyJsonFiles(srcPath, destPath, options);
   });
 } else {
-  createIconifyJsonFiles(srcPath, destPath, argv.prefix);
+  createIconifyJsonFiles(srcPath, destPath, options);
 }
 export {
   createIconifyJsonFiles

package/dist/Volver.d.ts

@@ -1,7 +1,13 @@
-import { type IconifyIcon, type IconifyJSON, type PartialIconifyAPIConfig } from '@iconify/vue';
+import type { IconifyIcon, IconifyJSON, PartialIconifyAPIConfig } from '@iconify/vue';
 import type { Component, Directive, Plugin, Ref } from 'vue';
 export declare function useDefaultProps(component: Component, defaults?: Record<string, unknown>, name?: string): Component;
 export type DefaultOptions = Record<string, Record<string, unknown>>;
+export type VolverExperimentalFeatures = {
+    /**
+     * Force suggestions in `VvInputText` and `VvTextarea` component
+     */
+    forceInputSuggestions?: boolean;
+};
 export type VolverOptions = {
     /**
      * If true set "fetchOptions" with credentials: 'include'
@@ -42,36 +48,40 @@ export type VolverOptions = {
      * Default props for components
      */
     defaults?: DefaultOptions;
+    /**
+     * Experimental features
+     */
+    experimentalFeatures?: VolverExperimentalFeatures;
 };
 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
      */
@@ -95,11 +105,13 @@ export declare class Volver implements VolverInterface {
     private _iconsCollections;
     private _iconsProvider;
     private _nuxt;
+    private _experimentalFeatures;
     defaults: Ref<DefaultOptions>;
-    constructor({ fetchWithCredentials, fetchOptions, iconsProvider, nuxt, iconsCollections, defaults, }?: VolverOptions);
+    constructor({ fetchWithCredentials, fetchOptions, iconsProvider, nuxt, iconsCollections, defaults, experimentalFeatures, }?: VolverOptions);
     get nuxt(): boolean;
     get iconsProvider(): string;
     get iconsCollections(): IconifyJSON[];
+    get experimentalFeatures(): VolverExperimentalFeatures;
     addCollection(collection: IconifyJSON, providerName?: string): boolean;
     addIcon(name: string, data: IconifyIcon): boolean;
     addIconsAPIProvider(provider: string, customConfig: PartialIconifyAPIConfig): boolean;
@@ -107,4 +119,3 @@ export declare class Volver implements VolverInterface {
 }
 declare const VolverPlugin: Plugin;
 export default VolverPlugin;
-export * from './types';