@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js

@@ -1,157 +1,264 @@
-import { defineComponent as P, openBlock as g, createElementBlock as S, unref as a, normalizeClass as O, withModifiers as k, createElementVNode as h, renderSlot as A, normalizeProps as C, guardReactiveProps as G, createTextVNode as b, toDisplayString as $, Fragment as M, renderList as E, createBlock as I, mergeProps as N, withCtx as B } from "vue";
-import { nanoid as D } from "nanoid";
-const R = "VV_ACCORDION_GROUP", x = {
+import { unref as l, inject as M, computed as d, toRef as N, toRefs as k, defineComponent as R, useAttrs as D, ref as S, openBlock as g, createElementBlock as h, normalizeClass as B, withModifiers as L, createElementVNode as G, renderSlot as A, normalizeProps as V, guardReactiveProps as b, createTextVNode as C, toDisplayString as E, isRef as T, provide as z, watchEffect as F, Fragment as J, renderList as K, createBlock as U, mergeProps as Y, withCtx as O } from "vue";
+import { nanoid as q } from "nanoid";
+import { useToggle as x } from "@vueuse/core";
+const I = Symbol.for("accordionGroup");
+function H(t) {
+  return ((e) => e == null || e === "" || Array.isArray(e) && e.length === 0 || !(e instanceof Date) && typeof e == "object" && Object.keys(e).length === 0)(l(t));
+}
+function Q(t) {
+  const e = M(t, void 0), r = d(() => !H(e));
+  function s(o, c, v) {
+    if (e != null && e.value) {
+      const i = l(e.value)[o];
+      return d({
+        get() {
+          return i == null ? void 0 : i.value;
+        },
+        set(f) {
+          i.value = f;
+        }
+      });
+    }
+    const m = N(c, o);
+    return d({
+      get() {
+        return m.value;
+      },
+      set(i) {
+        v && v(`update:${o}`, i);
+      }
+    });
+  }
+  return {
+    group: e,
+    isInGroup: r,
+    getGroupOrLocalRef: s
+  };
+}
+const W = {
+  /**
+   * Accordion name
+   */
   name: String,
+  /**
+   * Header title
+   */
   title: String,
+  /**
+   * Content text
+   */
   content: String,
+  /**
+   * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+   */
   modelValue: {
     type: Boolean,
     default: void 0
   },
+  /**
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   */
   modifiers: [String, Array],
+  /**
+   * If true, the accordion will be disabled
+   */
   disabled: Boolean
-}, z = ["update:modelValue"];
-function L(s, m) {
-  const { group: t, isInGroup: l, getGroupOrLocalRef: e } = useInjectedGroupState(R), { title: p, content: v } = toRefs(s), f = e("modelValue", s, m), d = e("disabled", s), c = e("collapse", s), r = e("modifiers", s);
+}, X = ["update:modelValue"];
+function Z(t, e) {
+  const { group: r, isInGroup: s, getGroupOrLocalRef: o } = Q(
+    I
+  ), { title: c, content: v } = k(t), m = o("modelValue", t, e), i = o("disabled", t), f = o("collapse", t), n = o("modifiers", t);
   return {
-    modelValue: f,
-    disabled: d,
-    isInGroup: l,
-    group: t,
-    collapse: c,
-    modifiers: r,
-    title: p,
+    // group props
+    modelValue: m,
+    disabled: i,
+    isInGroup: s,
+    group: r,
+    collapse: f,
+    modifiers: n,
+    // local props
+    title: c,
     content: v
   };
 }
-const T = ["id", "open"], U = ["aria-controls", "aria-expanded"], j = ["aria-hidden"], F = {
+function P(t, e, r) {
+  return d(() => {
+    const s = {
+      [t]: !0
+    }, o = typeof (e == null ? void 0 : e.value) == "string" ? e.value.split(" ") : e == null ? void 0 : e.value;
+    return o && Array.isArray(o) && o.forEach((c) => {
+      s[`${t}--${c}`] = !0;
+    }), r && Object.keys(r.value).forEach((c) => {
+      s[`${t}--${c}`] = l(r.value[c]);
+    }), s;
+  });
+}
+const w = ["id", "open"], ee = ["aria-controls", "aria-expanded"], oe = ["aria-hidden"], te = {
   name: "VvAccordion"
-}, q = /* @__PURE__ */ P({
-  ...F,
-  props: x,
-  emits: z,
-  setup(s, { emit: m }) {
-    const t = s, l = useAttrs(), e = t.name || (l == null ? void 0 : l.id) || D(), {
-      modifiers: p,
+}, re = /* @__PURE__ */ R({
+  ...te,
+  props: W,
+  emits: X,
+  setup(t, { emit: e }) {
+    const r = t, s = D(), o = d(
+      () => r.name || (s == null ? void 0 : s.id) || q()
+    ), {
+      modifiers: c,
       title: v,
-      content: f,
-      disabled: d,
-      collapse: c,
-      modelValue: r,
-      isInGroup: _
-    } = L(t, m), o = ref(!1), u = computed({
-      get: () => _.value ? c.value && Array.isArray(r.value) ? r.value.includes(e) : r.value === e : r.value === void 0 ? o.value : r.value,
-      set: (i) => {
-        if (_.value) {
-          if (c.value && Array.isArray(r.value)) {
-            if (i) {
-              r.value.push(e);
+      content: m,
+      disabled: i,
+      collapse: f,
+      modelValue: n,
+      isInGroup: a
+    } = Z(r, e), $ = S(!1), u = d({
+      get: () => a.value ? f.value && Array.isArray(n.value) ? n.value.includes(o.value) : n.value === o.value : n.value === void 0 ? $.value : n.value,
+      set: (p) => {
+        if (a.value) {
+          if (f.value && Array.isArray(n.value)) {
+            if (p) {
+              n.value.push(o.value);
               return;
             }
-            r.value = r.value.filter(
-              (V) => V !== e
+            n.value = n.value.filter(
+              (_) => _ !== o.value
             );
             return;
           }
-          r.value = i ? e : null;
+          n.value = p ? o.value : null;
           return;
         }
-        if (r.value === void 0 && typeof i == "boolean") {
-          o.value = i;
+        if (n.value === void 0 && typeof p == "boolean") {
+          $.value = p;
           return;
         }
-        r.value = i;
+        n.value = p;
       }
-    }), { bemCssClasses: n } = useBemModifiers("vv-accordion", {
-      modifiers: p,
-      disabled: d
-    }), y = useToggle(u);
-    return (i, V) => (g(), S("details", {
-      id: a(e),
-      class: O(a(n)),
-      open: a(u),
-      onClick: V[0] || (V[0] = k((Q) => a(y)(), ["prevent"]))
+    }), y = P(
+      "vv-accordion",
+      c,
+      d(() => ({
+        disabled: i.value
+      }))
+    ), j = x(u);
+    return (p, _) => (g(), h("details", {
+      id: l(o),
+      class: B(l(y)),
+      open: l(u),
+      onClick: _[0] || (_[0] = L((ie) => l(j)(), ["prevent"]))
     }, [
-      h("summary", {
-        "aria-controls": a(e),
-        "aria-expanded": a(u),
+      G("summary", {
+        "aria-controls": l(o),
+        "aria-expanded": l(u),
         class: "vv-collapse__summary"
       }, [
-        A(i.$slots, "summary", C(G({ open: a(u) })), () => [
-          b($(a(v)), 1)
+        A(p.$slots, "summary", V(b({ open: l(u) })), () => [
+          C(E(l(v)), 1)
         ])
-      ], 8, U),
-      h("div", {
-        "aria-hidden": !a(u),
+      ], 8, ee),
+      G("div", {
+        "aria-hidden": !l(u),
         class: "vv-collapse__content"
       }, [
-        A(i.$slots, "details", C(G({ open: a(u) })), () => [
-          b($(a(f)), 1)
+        A(p.$slots, "details", V(b({ open: l(u) })), () => [
+          C(E(l(m)), 1)
         ])
-      ], 8, j)
-    ], 10, T));
+      ], 8, oe)
+    ], 10, w));
   }
-}), H = {
+}), ae = {
+  /**
+   * VModel
+   */
   modelValue: [String, Array],
+  /**
+   * Accordion items
+   * @type VvAccordionGroupItem
+   */
   items: { type: Array, default: () => [] },
+  /**
+   * If true, accordion items stay open when another item is opened
+   */
   collapse: Boolean,
+  /**
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion-group--'
+   */
   modifiers: [String, Array],
+  /**
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   */
   itemModifiers: {
     type: [String, Array],
     default: ""
   },
+  /**
+   * If true, the accordion items will be disabled
+   */
   disabled: Boolean
-}, J = ["update:modelValue"], K = {
+}, ne = ["update:modelValue"];
+function le(t) {
+  if (Object.keys(t).some(
+    (e) => e !== "key" && !T(t[e])
+  ))
+    throw Error("One or more groupState props aren't ref.");
+  z(
+    t.key,
+    d(() => t)
+  );
+}
+const se = {
   name: "VvAccordionGroup"
-}, Y = /* @__PURE__ */ P({
-  ...K,
-  props: H,
-  emits: J,
-  setup(s, { emit: m }) {
-    const t = s, { disabled: l, collapse: e, modifiers: p, itemModifiers: v, items: f } = toRefs(t);
-    watchEffect(() => {
-      typeof t.modelValue == "string" && e.value && console.warn(
+}, ve = /* @__PURE__ */ R({
+  ...se,
+  props: ae,
+  emits: ne,
+  setup(t, { emit: e }) {
+    const r = t, { disabled: s, collapse: o, modifiers: c, itemModifiers: v, items: m } = k(r);
+    F(() => {
+      typeof r.modelValue == "string" && o.value && console.warn(
         "[VvAccordionGroup]: modelValue is a string but collapse is true."
       );
     });
-    const d = ref([]), c = computed({
+    const i = S([]), f = d({
       get: () => {
-        var o;
-        return t.modelValue !== void 0 ? e.value ? t.modelValue : Array.isArray(t.modelValue) ? t.modelValue[0] : t.modelValue : e.value ? d.value : (o = d.value) == null ? void 0 : o[0];
+        var a;
+        return r.modelValue !== void 0 ? o.value ? r.modelValue : Array.isArray(r.modelValue) ? r.modelValue[0] : r.modelValue : o.value ? i.value : (a = i.value) == null ? void 0 : a[0];
       },
-      set: (o) => {
-        if (t.modelValue !== void 0)
-          return (Array.isArray(t.modelValue) || e.value) && !Array.isArray(o) && (o = [o]), m("update:modelValue", o);
-        d.value = Array.isArray(o) ? o : [o];
+      set: (a) => {
+        if (r.modelValue !== void 0)
+          return (Array.isArray(r.modelValue) || o.value) && !Array.isArray(a) && (a = [a]), e("update:modelValue", a);
+        i.value = Array.isArray(a) ? a : [a];
       }
-    }), r = {
-      key: R,
-      modelValue: c,
-      disabled: l,
-      collapse: e,
+    });
+    le({
+      key: I,
+      modelValue: f,
+      disabled: s,
+      collapse: o,
       modifiers: v
-    };
-    useProvideGroupState(r);
-    const { bemCssClasses: _ } = useBemModifiers("vv-accordion-group", {
-      modifiers: p,
-      disabled: l
     });
-    return (o, u) => (g(), S("div", {
-      class: O(a(_))
+    const n = P(
+      "vv-accordion-group",
+      c,
+      d(() => ({
+        disabled: s.value
+      }))
+    );
+    return (a, $) => (g(), h("div", {
+      class: B(l(n))
     }, [
-      A(o.$slots, "default", {}, () => [
-        (g(!0), S(M, null, E(a(f), (n) => (g(), I(q, N({
-          key: n.title
+      A(a.$slots, "default", {}, () => [
+        (g(!0), h(J, null, K(l(m), (u) => (g(), U(re, Y({
+          key: u.title
         }, {
-          name: n.name,
-          title: n.title,
-          content: n.content
+          name: u.name,
+          title: u.title,
+          content: u.content
         }), {
-          header: B((y) => [
-            A(o.$slots, `header::${n.name}`, C(G(y)))
+          header: O((y) => [
+            A(a.$slots, `header::${u.name}`, V(b(y)))
           ]),
-          details: B((y) => [
-            A(o.$slots, `details::${n.name}`, C(G(y)))
+          details: O((y) => [
+            A(a.$slots, `details::${u.name}`, V(b(y)))
           ]),
           _: 2
         }, 1040))), 128))
@@ -160,5 +267,5 @@ const T = ["id", "open"], U = ["aria-controls", "aria-expanded"], j = ["aria-hid
   }
 });
 export {
-  Y as default
+  ve as default
 };

package/dist/components/VvAccordionGroup/VvAccordionGroup.umd.js

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

package/dist/components/VvAccordionGroup/VvAccordionGroup.vue.d.ts

@@ -79,8 +79,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    collapse: boolean;
     disabled: boolean;
+    collapse: boolean;
     items: import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
     itemModifiers: string | string[];
 }>, Record<string, (_: any) => any> & Record<string, (_: {

package/dist/components/VvAction/VvAction.es.js

@@ -0,0 +1,170 @@
+import { inject as v, defineComponent as D, ref as I, watch as L, computed as c, openBlock as P, createBlock as E, resolveDynamicComponent as R, unref as f, mergeProps as V, withCtx as B, renderSlot as x, createTextVNode as M, toDisplayString as w } from "vue";
+var d = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(d || {}), _ = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(_ || {}), p = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(p || {}), b = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(b || {}), n = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(n || {}), O = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(O || {});
+const J = Symbol.for("volver"), K = Symbol.for("dropdownTrigger"), W = Symbol.for("dropdownAction"), Y = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (e) => Object.values(O).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, G = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+}, T = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, $ = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, z = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+p.before;
+d.bottom;
+const A = {
+  ...G,
+  ...z,
+  ...$,
+  ...T,
+  ...Y,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: b.button,
+    validator: (e) => Object.values(b).includes(e)
+  }
+}, F = ["click", "mouseover", "mouseleave"], q = A;
+function H() {
+  return v(J);
+}
+function Q() {
+  return v(K, {});
+}
+function U() {
+  return v(W, {});
+}
+const X = {
+  name: "VvAction"
+}, te = /* @__PURE__ */ D({
+  ...X,
+  props: q,
+  emits: F,
+  setup(e, { expose: k, emit: s }) {
+    const r = e, a = H(), l = I(null);
+    k({ $el: l });
+    const {
+      reference: m,
+      bus: o,
+      aria: u,
+      expanded: i
+    } = Q();
+    L(
+      () => l.value,
+      (t) => {
+        m && (m.value = t);
+      }
+    );
+    const g = c(() => r.pressed || (i == null ? void 0 : i.value)), { role: S } = U(), y = c(() => {
+      switch (!0) {
+        case r.disabled:
+          return n.button;
+        case r.to !== void 0:
+          return a != null && a.nuxt ? n.nuxtLink : n.routerLink;
+        case r.href !== void 0:
+          return n.a;
+        default:
+          return n.button;
+      }
+    }), h = c(() => {
+      const t = {
+        ...u == null ? void 0 : u.value,
+        "aria-pressed": g.value ? !0 : void 0,
+        role: S
+      };
+      switch (y.value) {
+        case n.a:
+          return {
+            ...t,
+            href: r.href,
+            target: r.target,
+            rel: r.rel
+          };
+        case n.routerLink:
+        case n.nuxtLink:
+          return {
+            ...t,
+            to: r.to,
+            target: r.target
+          };
+        default:
+          return {
+            ...t,
+            type: r.type,
+            disabled: r.disabled
+          };
+      }
+    }), j = (t) => {
+      if (r.disabled) {
+        t.preventDefault();
+        return;
+      }
+      o == null || o.emit("click", t), s("click", t);
+    }, N = (t) => {
+      o == null || o.emit("mouseover", t), s("mouseover", t);
+    }, C = (t) => {
+      o == null || o.emit("mouseleave", t), s("mouseleave", t);
+    };
+    return (t, Z) => (P(), E(R(f(y)), V(f(h), {
+      ref_key: "element",
+      ref: l,
+      class: {
+        active: t.active,
+        pressed: f(g),
+        disabled: t.disabled
+      },
+      onClickPassive: j,
+      onMouseoverPassive: N,
+      onMouseleavePassive: C
+    }), {
+      default: B(() => [
+        x(t.$slots, "default", {}, () => [
+          M(w(t.label), 1)
+        ])
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
+export {
+  te as default
+};

package/dist/components/VvAction/VvAction.umd.js

@@ -0,0 +1 @@
+(function(t,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(t=typeof globalThis<"u"?globalThis:t||self,t.VvAction=a(t.vue))})(this,function(t){"use strict";var a=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(a||{}),b=(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(b||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),n=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(n||{}),m=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(m||{});const _=Symbol.for("volver"),O=Symbol.for("dropdownTrigger"),h=Symbol.for("dropdownAction"),k={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(m).includes(e)},rel:{type:String,default:"noopener noreferrer"}},j={disabled:Boolean},S={active:Boolean},N={pressed:Boolean},C={label:[String,Number]};i.before,a.bottom;const D={...j,...C,...N,...S,...k,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)}},I=["click","mouseover","mouseleave"],L=D;function P(){return t.inject(_)}function V(){return t.inject(O,{})}function E(){return t.inject(h,{})}const R={name:"VvAction"};return t.defineComponent({...R,props:L,emits:I,setup(e,{expose:x,emit:u}){const o=e,c=P(),f=t.ref(null);x({$el:f});const{reference:g,bus:s,aria:d,expanded:p}=V();t.watch(()=>f.value,r=>{g&&(g.value=r)});const v=t.computed(()=>o.pressed||(p==null?void 0:p.value)),{role:B}=E(),y=t.computed(()=>{switch(!0){case o.disabled:return n.button;case o.to!==void 0:return c!=null&&c.nuxt?n.nuxtLink:n.routerLink;case o.href!==void 0:return n.a;default:return n.button}}),M=t.computed(()=>{const r={...d==null?void 0:d.value,"aria-pressed":v.value?!0:void 0,role:B};switch(y.value){case n.a:return{...r,href:o.href,target:o.target,rel:o.rel};case n.routerLink:case n.nuxtLink:return{...r,to:o.to,target:o.target};default:return{...r,type:o.type,disabled:o.disabled}}}),T=r=>{if(o.disabled){r.preventDefault();return}s==null||s.emit("click",r),u("click",r)},w=r=>{s==null||s.emit("mouseover",r),u("mouseover",r)},J=r=>{s==null||s.emit("mouseleave",r),u("mouseleave",r)};return(r,W)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(y)),t.mergeProps(t.unref(M),{ref_key:"element",ref:f,class:{active:r.active,pressed:t.unref(v),disabled:r.disabled},onClickPassive:T,onMouseoverPassive:w,onMouseleavePassive:J}),{default:t.withCtx(()=>[t.renderSlot(r.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(r.label),1)])]),_:3},16,["class"]))}})});

package/dist/components/VvAction/VvAction.vue.d.ts

@@ -0,0 +1,63 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    type: {
+        type: StringConstructor;
+        default: import("@/constants").ButtonType;
+        validator: (value: import("@/constants").ButtonType) => boolean;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    href: StringConstructor;
+    target: {
+        type: import("vue").PropType<import("@/constants").AnchorTarget>;
+        validator: (value: import("@/constants").AnchorTarget) => boolean;
+    };
+    rel: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: BooleanConstructor;
+    pressed: BooleanConstructor;
+    label: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+}, {
+    $el: import("vue").Ref<HTMLElement | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: import("@/constants").ButtonType;
+        validator: (value: import("@/constants").ButtonType) => boolean;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+    };
+    href: StringConstructor;
+    target: {
+        type: import("vue").PropType<import("@/constants").AnchorTarget>;
+        validator: (value: import("@/constants").AnchorTarget) => boolean;
+    };
+    rel: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: BooleanConstructor;
+    pressed: BooleanConstructor;
+    label: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    type: string;
+    rel: string;
+    active: boolean;
+    pressed: boolean;
+}>, {
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};