@volverjs/ui-vue 0.0.3 → 0.0.4

package/LICENSE

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

@@ -26,13 +26,13 @@
 
 ```bash
 # pnpm
-pnpm add @volverjs/style @volverjs/ui-vue
+pnpm add @volverjs/ui-vue
 
 # yarn
-yarn add @volverjs/style @volverjs/ui-vue
+yarn add @volverjs/ui-vue
 
 # npm
-npm install @volverjs/style @volverjs/ui-vue --save
+npm install @volverjs/ui-vue --save
 ```
 
 <br />
@@ -42,6 +42,7 @@ npm install @volverjs/style @volverjs/ui-vue --save
 Install the plugin in your `main.ts` file.
 
 ```typescript
+// main.ts
 import { createApp } from 'vue'
 import App from './App.vue'
 
@@ -50,19 +51,38 @@ import { VolverPlugin } from '@volverjs/ui-vue'
 // import @volverjs/ui-vue icons collections
 import iconsCollections from '@volverjs/ui-vue/icons'
 /*
- * import @volverjs/style reset and props
- * for scss support you can import the scss files
- * import '@volverjs/style/scss/reset'
- * import '@volverjs/style/scss/props'
+ * import @volverjs/style base style with reset and props
+ * for scss support you can import the scss file
+ * import '@volverjs/style/scss/base'
  */
-import '@volverjs/style/reset'
-import '@volverjs/style/props'
+import '@volverjs/style/base'
 
 const app = createApp(App).mount('#app')
 
 // install the plugin
 app.use(VolverPlugin, {
-  iconsCollections
+  iconsCollections,
+  /*
+   * if you want can import components globally
+   * components: { VvButton, VvInputText }
+   */
+  compoments: undefined,
+  /*
+   * if you want can import directives globally
+   * directives: { toolip: VTooltip }
+   */
+  directives: undefined,
+  /*
+   * if you want can create components aliases
+   * aliases: { Btn: VvButton, BtnDanger: VvButton}
+   */
+  aliases: undefined,
+  /*
+   * if you want can change default props
+   * for globally imported components and aliases
+   * defaults: { VvButton: { modifiers: 'secondary', BtnDanger: { modifiers: 'danger' } }
+   */
+  defaults: undefined
 })
 ```
 
@@ -70,6 +90,12 @@ Than you can import components and use them in your templates.
 
 ```html
 <script setup lang="ts">
+  // MyComponent.vue
+  /*
+   * import the component
+   * all components are also available with a dedicated export
+   * import VvButton from '@volverjs/ui-vue/vv-button'
+   */
   import { VvButton } from '@volverjs/ui-vue'
   /*
    * import the component style
@@ -107,9 +133,22 @@ export default defineConfig({
     Components({
       resolvers: [
         VolverResolver({
-          // enable/disable import of style
-          // default: false
-          importStyle: 'css' // or 'scss'
+          /*
+           * enable/disable auto import of components style
+           * also accept 'scss' for scss support
+           * default: false
+           */
+          importStyle: false,
+          /*
+           * enable/disable auto import of directives
+           * default: false
+           */
+          directives: false,
+          /*
+           * Change components prefix
+           * default: 'vv'
+           */
+          prefix: 'vv'
         })
       ]
     })

package/dist/Volver.d.ts

@@ -1,5 +1,5 @@
 import { type IconifyIcon, type IconifyJSON, type PartialIconifyAPIConfig } from '@iconify/vue';
-import type { Component, Plugin } from 'vue';
+import type { Component, Directive, Plugin } from 'vue';
 export declare function useDefaultProps(component: Component, defaults?: Record<string, unknown>, name?: string): Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
 export type DefaultOptions = Record<string, Record<string, unknown>>;
 export type VolverOptions = {
@@ -34,6 +34,10 @@ export type VolverOptions = {
      * Alias to install
      */
     aliases?: Record<string, Component>;
+    /**
+     * Directives to install
+     */
+    directives?: Record<string, Directive>;
     /**
      * Default props for components
      */

package/dist/components/VvAccordion/VvAccordion.es.js

@@ -1,6 +1,41 @@
-import { defineComponent as h, openBlock as I, createElementBlock as N, unref as t, normalizeClass as O, withModifiers as B, createElementVNode as y, renderSlot as g, normalizeProps as A, guardReactiveProps as C, createTextVNode as b, toDisplayString as S } from "vue";
-import { nanoid as E } from "nanoid";
-const P = Symbol.for("accordionGroup"), R = {
+import { unref as r, inject as E, computed as i, toRef as S, toRefs as $, defineComponent as I, useAttrs as V, ref as j, openBlock as k, createElementBlock as B, normalizeClass as N, withModifiers as P, createElementVNode as g, renderSlot as A, normalizeProps as b, guardReactiveProps as C, createTextVNode as G, toDisplayString as O } from "vue";
+import { nanoid as D } from "nanoid";
+import { useToggle as M } from "@vueuse/core";
+const T = Symbol.for("accordionGroup");
+function z(o) {
+  return ((e) => e == null || e === "" || Array.isArray(e) && e.length === 0 || !(e instanceof Date) && typeof e == "object" && Object.keys(e).length === 0)(r(o));
+}
+function L(o) {
+  const e = E(o, void 0), l = i(() => !z(e));
+  function a(t, s, d) {
+    if (e != null && e.value) {
+      const u = r(e.value)[t];
+      return i({
+        get() {
+          return u == null ? void 0 : u.value;
+        },
+        set(v) {
+          u.value = v;
+        }
+      });
+    }
+    const p = S(s, t);
+    return i({
+      get() {
+        return p.value;
+      },
+      set(u) {
+        d && d(`update:${t}`, u);
+      }
+    });
+  }
+  return {
+    group: e,
+    isInGroup: l,
+    getGroupOrLocalRef: a
+  };
+}
+const x = {
   /**
    * Accordion name
    */
@@ -28,97 +63,109 @@ const P = Symbol.for("accordionGroup"), R = {
    * If true, the accordion will be disabled
    */
   disabled: Boolean
-}, k = ["update:modelValue"];
-function x(n, d) {
-  const { group: l, isInGroup: s, getGroupOrLocalRef: o } = useInjectedGroupState(
-    P
-  ), { title: c, content: v } = toRefs(n), m = o("modelValue", n, d), p = o("disabled", n), i = o("collapse", n), e = o("modifiers", n);
+}, J = ["update:modelValue"];
+function K(o, e) {
+  const { group: l, isInGroup: a, getGroupOrLocalRef: t } = L(
+    T
+  ), { title: s, content: d } = $(o), p = t("modelValue", o, e), u = t("disabled", o), v = t("collapse", o), n = t("modifiers", o);
   return {
     // group props
-    modelValue: m,
-    disabled: p,
-    isInGroup: s,
+    modelValue: p,
+    disabled: u,
+    isInGroup: a,
     group: l,
-    collapse: i,
-    modifiers: e,
+    collapse: v,
+    modifiers: n,
     // local props
-    title: c,
-    content: v
+    title: s,
+    content: d
   };
 }
-const M = ["id", "open"], T = ["aria-controls", "aria-expanded"], $ = ["aria-hidden"], z = {
+function U(o, e, l) {
+  return i(() => {
+    const a = {
+      [o]: !0
+    }, t = typeof (e == null ? void 0 : e.value) == "string" ? e.value.split(" ") : e == null ? void 0 : e.value;
+    return t && Array.isArray(t) && t.forEach((s) => {
+      a[`${o}--${s}`] = !0;
+    }), l && Object.keys(l.value).forEach((s) => {
+      a[`${o}--${s}`] = r(l.value[s]);
+    }), a;
+  });
+}
+const Y = ["id", "open"], q = ["aria-controls", "aria-expanded"], F = ["aria-hidden"], H = {
   name: "VvAccordion"
-}, K = /* @__PURE__ */ h({
-  ...z,
-  props: R,
-  emits: k,
-  setup(n, { emit: d }) {
-    const l = n, s = useAttrs(), o = computed(
-      () => l.name || (s == null ? void 0 : s.id) || E()
+}, w = /* @__PURE__ */ I({
+  ...H,
+  props: x,
+  emits: J,
+  setup(o, { emit: e }) {
+    const l = o, a = V(), t = i(
+      () => l.name || (a == null ? void 0 : a.id) || D()
     ), {
-      modifiers: c,
-      title: v,
-      content: m,
-      disabled: p,
-      collapse: i,
-      modelValue: e,
-      isInGroup: f
-    } = x(l, d), _ = ref(!1), r = computed({
-      get: () => f.value ? i.value && Array.isArray(e.value) ? e.value.includes(o.value) : e.value === o.value : e.value === void 0 ? _.value : e.value,
-      set: (a) => {
-        if (f.value) {
-          if (i.value && Array.isArray(e.value)) {
-            if (a) {
-              e.value.push(o.value);
+      modifiers: s,
+      title: d,
+      content: p,
+      disabled: u,
+      collapse: v,
+      modelValue: n,
+      isInGroup: y
+    } = K(l, e), _ = j(!1), f = i({
+      get: () => y.value ? v.value && Array.isArray(n.value) ? n.value.includes(t.value) : n.value === t.value : n.value === void 0 ? _.value : n.value,
+      set: (c) => {
+        if (y.value) {
+          if (v.value && Array.isArray(n.value)) {
+            if (c) {
+              n.value.push(t.value);
               return;
             }
-            e.value = e.value.filter(
-              (u) => u !== o.value
+            n.value = n.value.filter(
+              (m) => m !== t.value
             );
             return;
           }
-          e.value = a ? o.value : null;
+          n.value = c ? t.value : null;
           return;
         }
-        if (e.value === void 0 && typeof a == "boolean") {
-          _.value = a;
+        if (n.value === void 0 && typeof c == "boolean") {
+          _.value = c;
           return;
         }
-        e.value = a;
+        n.value = c;
       }
-    }), G = useBemModifiers(
+    }), R = U(
       "vv-accordion",
-      c,
-      computed(() => ({
-        disabled: p.value
+      s,
+      i(() => ({
+        disabled: u.value
       }))
-    ), V = useToggle(r);
-    return (a, u) => (I(), N("details", {
-      id: t(o),
-      class: O(t(G)),
-      open: t(r),
-      onClick: u[0] || (u[0] = B((D) => t(V)(), ["prevent"]))
+    ), h = M(f);
+    return (c, m) => (k(), B("details", {
+      id: r(t),
+      class: N(r(R)),
+      open: r(f),
+      onClick: m[0] || (m[0] = P((Q) => r(h)(), ["prevent"]))
     }, [
-      y("summary", {
-        "aria-controls": t(o),
-        "aria-expanded": t(r),
+      g("summary", {
+        "aria-controls": r(t),
+        "aria-expanded": r(f),
         class: "vv-collapse__summary"
       }, [
-        g(a.$slots, "summary", A(C({ open: t(r) })), () => [
-          b(S(t(v)), 1)
+        A(c.$slots, "summary", b(C({ open: r(f) })), () => [
+          G(O(r(d)), 1)
         ])
-      ], 8, T),
-      y("div", {
-        "aria-hidden": !t(r),
+      ], 8, q),
+      g("div", {
+        "aria-hidden": !r(f),
         class: "vv-collapse__content"
       }, [
-        g(a.$slots, "details", A(C({ open: t(r) })), () => [
-          b(S(t(m)), 1)
+        A(c.$slots, "details", b(C({ open: r(f) })), () => [
+          G(O(r(p)), 1)
         ])
-      ], 8, $)
-    ], 10, M));
+      ], 8, F)
+    ], 10, Y));
   }
 });
 export {
-  K as default
+  w as default
 };

package/dist/components/VvAccordion/VvAccordion.umd.js

@@ -1 +1 @@
-(function(e,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","nanoid"],s):(e=typeof globalThis<"u"?globalThis:e||self,e.VvAccordion=s(e.vue,e.nanoid))})(this,function(e,s){"use strict";const g=Symbol.for("accordionGroup"),A={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean},S=["update:modelValue"];function V(r,u){const{group:l,isInGroup:a,getGroupOrLocalRef:n}=useInjectedGroupState(g),{title:f,content:p}=toRefs(r),m=n("modelValue",r,u),v=n("disabled",r),d=n("collapse",r),o=n("modifiers",r);return{modelValue:m,disabled:v,isInGroup:a,group:l,collapse:d,modifiers:o,title:f,content:p}}const h=["id","open"],C=["aria-controls","aria-expanded"],N=["aria-hidden"],b={name:"VvAccordion"};return e.defineComponent({...b,props:A,emits:S,setup(r,{emit:u}){const l=r,a=useAttrs(),n=computed(()=>l.name||(a==null?void 0:a.id)||s.nanoid()),{modifiers:f,title:p,content:m,disabled:v,collapse:d,modelValue:o,isInGroup:_}=V(l,u),y=ref(!1),i=computed({get:()=>_.value?d.value&&Array.isArray(o.value)?o.value.includes(n.value):o.value===n.value:o.value===void 0?y.value:o.value,set:t=>{if(_.value){if(d.value&&Array.isArray(o.value)){if(t){o.value.push(n.value);return}o.value=o.value.filter(c=>c!==n.value);return}o.value=t?n.value:null;return}if(o.value===void 0&&typeof t=="boolean"){y.value=t;return}o.value=t}}),G=useBemModifiers("vv-accordion",f,computed(()=>({disabled:v.value}))),P=useToggle(i);return(t,c)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(n),class:e.normalizeClass(e.unref(G)),open:e.unref(i),onClick:c[0]||(c[0]=e.withModifiers(I=>e.unref(P)(),["prevent"]))},[e.createElementVNode("summary",{"aria-controls":e.unref(n),"aria-expanded":e.unref(i),class:"vv-collapse__summary"},[e.renderSlot(t.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(i)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(p)),1)])],8,C),e.createElementVNode("div",{"aria-hidden":!e.unref(i),class:"vv-collapse__content"},[e.renderSlot(t.$slots,"details",e.normalizeProps(e.guardReactiveProps({open:e.unref(i)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(m)),1)])],8,N)],10,h))}})});
+(function(e,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("nanoid"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","nanoid","@vueuse/core"],p):(e=typeof globalThis<"u"?globalThis:e||self,e.VvAccordion=p(e.vue,e.nanoid,e.core))})(this,function(e,p,g){"use strict";const h=Symbol.for("accordionGroup");function v(o){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(o))}function R(o){const n=e.inject(o,void 0),s=e.computed(()=>!v(n));function a(t,i,u){if(n!=null&&n.value){const c=e.unref(n.value)[t];return e.computed({get(){return c==null?void 0:c.value},set(d){c.value=d}})}const m=e.toRef(i,t);return e.computed({get(){return m.value},set(c){u&&u(`update:${t}`,c)}})}return{group:n,isInGroup:s,getGroupOrLocalRef:a}}const S={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean},b=["update:modelValue"];function C(o,n){const{group:s,isInGroup:a,getGroupOrLocalRef:t}=R(h),{title:i,content:u}=e.toRefs(o),m=t("modelValue",o,n),c=t("disabled",o),d=t("collapse",o),r=t("modifiers",o);return{modelValue:m,disabled:c,isInGroup:a,group:s,collapse:d,modifiers:r,title:i,content:u}}function E(o,n,s){return e.computed(()=>{const a={[o]:!0},t=typeof(n==null?void 0:n.value)=="string"?n.value.split(" "):n==null?void 0:n.value;return t&&Array.isArray(t)&&t.forEach(i=>{a[`${o}--${i}`]=!0}),s&&Object.keys(s.value).forEach(i=>{a[`${o}--${i}`]=e.unref(s.value[i])}),a})}const G=["id","open"],O=["aria-controls","aria-expanded"],V=["aria-hidden"],$={name:"VvAccordion"};return e.defineComponent({...$,props:S,emits:b,setup(o,{emit:n}){const s=o,a=e.useAttrs(),t=e.computed(()=>s.name||(a==null?void 0:a.id)||p.nanoid()),{modifiers:i,title:u,content:m,disabled:c,collapse:d,modelValue:r,isInGroup:_}=C(s,n),A=e.ref(!1),f=e.computed({get:()=>_.value?d.value&&Array.isArray(r.value)?r.value.includes(t.value):r.value===t.value:r.value===void 0?A.value:r.value,set:l=>{if(_.value){if(d.value&&Array.isArray(r.value)){if(l){r.value.push(t.value);return}r.value=r.value.filter(y=>y!==t.value);return}r.value=l?t.value:null;return}if(r.value===void 0&&typeof l=="boolean"){A.value=l;return}r.value=l}}),I=E("vv-accordion",i,e.computed(()=>({disabled:c.value}))),j=g.useToggle(f);return(l,y)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(t),class:e.normalizeClass(e.unref(I)),open:e.unref(f),onClick:y[0]||(y[0]=e.withModifiers(P=>e.unref(j)(),["prevent"]))},[e.createElementVNode("summary",{"aria-controls":e.unref(t),"aria-expanded":e.unref(f),class:"vv-collapse__summary"},[e.renderSlot(l.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(f)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(u)),1)])],8,O),e.createElementVNode("div",{"aria-hidden":!e.unref(f),class:"vv-collapse__content"},[e.renderSlot(l.$slots,"details",e.normalizeProps(e.guardReactiveProps({open:e.unref(f)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(m)),1)])],8,V)],10,G))}})});