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

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022-2023 24/Consulting
+Copyright (c) 2022-2023 8 Wave
 
 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

@@ -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>
 
@@ -167,27 +167,28 @@ export default defineConfig({
 Used to show alert messages and notifications
 
 ```typescript
-export type AlertModifiers =
+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>
+  icon?: string | VvIconProps
   content?: string
   footer?: string
-  modifiers: AlertModifiers
-  dismissable: boolean
-  autoClose: number
-  timestamp: number
+  modifiers?: AlertModifier | AlertModifier[]
+  dismissable?: boolean
+  autoClose?: number
+  closeLabel?: string
+  role?: AlertRole
 }
 ```
 
@@ -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/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,r){"object"==typeof exports&&"undefined"!=typeof module?r(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"],r):r((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,r,o,i,t,n,s,c){"use strict";function a(e,o="iconify",i={}){return r.readdirSync(e).forEach((function(t){r.statSync(e+"/"+t).isDirectory()?i=a(e+"/"+t,t,i):t.includes(".svg")&&(i[o]?i[o].push(n.join(e,"/",t)):i[o]=[n.join(e,"/",t)])})),i}function l(e,o,i){const c=a(e,i);Object.keys(c).length?Object.keys(c).forEach((e=>{!async function(e,o,i){const c=t.blankIconSet(e);for(const n of o)try{const e=await r.promises.readFile(n,{encoding:"utf-8"}),o=new t.SVG(e);await t.cleanupSVG(o),await t.parseColors(o,{defaultColor:"currentColor",callback:(e,r,o)=>!o||t.isEmptyColor(o)?r:"currentColor"}),await t.runSVGO(o);const i=n.replace(/^.*[\\/]/,"").split(".")[0].replace(/ /g,"-").replace(/[^a-z0-9-]/gi,"");c.fromSVG(i,o)}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`;r.mkdirSync(n.dirname(l),{recursive:!0}),r.writeFileSync(l,JSON.stringify(a))}(e,c[e],o),console.info(`Icons generated in: ${o}/${e}.json\n`)})):console.error(`There are no files in ${e}`)}const f=o(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

@@ -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/.storybook/main.d.ts

@@ -0,0 +1,3 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+declare const config: StorybookConfig;
+export default config;

package/dist/.storybook/preview.d.ts

@@ -0,0 +1,89 @@
+import './style.scss';
+export declare const parameters: {
+    controls: {
+        expanded: boolean;
+        matchers: {
+            color: RegExp;
+            date: RegExp;
+        };
+    };
+    docs: {
+        theme: import("@storybook/theming").ThemeVars;
+    };
+    version: {
+        major: string | number;
+        minor: string | number;
+        patch: string | number;
+        postfix: string | undefined;
+    };
+    darkMode: {
+        classTarget: string;
+        darkClass: string;
+        lightClass: string;
+        stylePreview: boolean;
+        dark: {
+            brandImage: string;
+            base: "light" | "dark";
+            colorPrimary: string;
+            colorSecondary: string;
+            appBg: string;
+            appContentBg: string;
+            appPreviewBg: string;
+            appBorderColor: string;
+            appBorderRadius: number;
+            fontBase: string;
+            fontCode: string;
+            textColor: string;
+            textInverseColor: string;
+            textMutedColor: string;
+            barTextColor: string;
+            barHoverColor: string;
+            barSelectedColor: string;
+            barBg: string;
+            buttonBg: string;
+            buttonBorder: string;
+            booleanBg: string;
+            booleanSelectedBg: string;
+            inputBg: string;
+            inputBorder: string;
+            inputTextColor: string;
+            inputBorderRadius: number;
+            brandTitle?: string | undefined;
+            brandUrl?: string | undefined;
+            brandTarget?: string | undefined;
+            gridCellSize?: number | undefined;
+        };
+        light: {
+            brandImage: string;
+            base: "light" | "dark";
+            colorPrimary: string;
+            colorSecondary: string;
+            appBg: string;
+            appContentBg: string;
+            appPreviewBg: string;
+            appBorderColor: string;
+            appBorderRadius: number;
+            fontBase: string;
+            fontCode: string;
+            textColor: string;
+            textInverseColor: string;
+            textMutedColor: string;
+            barTextColor: string;
+            barHoverColor: string;
+            barSelectedColor: string;
+            barBg: string;
+            buttonBg: string;
+            buttonBorder: string;
+            booleanBg: string;
+            booleanSelectedBg: string;
+            inputBg: string;
+            inputBorder: string;
+            inputTextColor: string;
+            inputBorderRadius: number;
+            brandTitle?: string | undefined;
+            brandUrl?: string | undefined;
+            brandTarget?: string | undefined;
+            gridCellSize?: number | undefined;
+        };
+    };
+};