@volverjs/ui-vue 0.0.1-beta.8 → 0.0.1

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

@@ -1,104 +1,39 @@
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            open: boolean;
-            iconRight: boolean;
-            bordered: boolean;
-            disabled: boolean;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            title: StringConstructor;
-            content: StringConstructor;
-            open: BooleanConstructor;
-            iconRight: BooleanConstructor;
-            bordered: BooleanConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
-            disabled: BooleanConstructor;
-        }>> & {
-            [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "open" | "iconRight" | "bordered" | "disabled">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $emit: (event: string, ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            title: StringConstructor;
-            content: StringConstructor;
-            open: BooleanConstructor;
-            iconRight: BooleanConstructor;
-            bordered: BooleanConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
-            disabled: BooleanConstructor;
-        }>> & {
-            [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, {
-            open: boolean;
-            iconRight: boolean;
-            bordered: boolean;
-            disabled: boolean;
-        }, {}, string> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<{
-        title: StringConstructor;
-        content: StringConstructor;
-        open: BooleanConstructor;
-        iconRight: BooleanConstructor;
-        bordered: BooleanConstructor;
-        modifiers: (StringConstructor | ArrayConstructor)[];
-        disabled: BooleanConstructor;
-    }>> & {
-        [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    name: StringConstructor;
     title: StringConstructor;
     content: StringConstructor;
-    open: BooleanConstructor;
-    iconRight: BooleanConstructor;
-    bordered: BooleanConstructor;
-    modifiers: (StringConstructor | ArrayConstructor)[];
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modifiers: (ArrayConstructor | StringConstructor)[];
+    disabled: BooleanConstructor;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    title: StringConstructor;
+    content: StringConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modifiers: (ArrayConstructor | StringConstructor)[];
     disabled: BooleanConstructor;
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, {
-    open: boolean;
-    iconRight: boolean;
-    bordered: boolean;
+}, {
+    modelValue: boolean;
     disabled: boolean;
-}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {
-        header: (_: {}) => any;
-        details: (_: {}) => any;
-    };
-});
+}>, {
+    summary: (_: {
+        open: boolean;
+    }) => any;
+    details: (_: {
+        open: boolean;
+    }) => any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VvAccordion/index.d.ts

@@ -0,0 +1,46 @@
+import { type ExtractPropTypes, type Ref } from 'vue';
+import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState';
+export declare const VvAccordionProps: {
+    /**
+     * Accordion name
+     */
+    name: StringConstructor;
+    /**
+     * Header title
+     */
+    title: StringConstructor;
+    /**
+     * Content text
+     */
+    content: StringConstructor;
+    /**
+     * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+     */
+    modifiers: (ArrayConstructor | StringConstructor)[];
+    /**
+     * If true, the accordion will be disabled
+     */
+    disabled: BooleanConstructor;
+};
+export declare const VvAccordionEvents: string[];
+export type VvAccordionPropsTypes = ExtractPropTypes<typeof VvAccordionProps>;
+/**
+ * Merges local and group props
+ */
+export declare function useGroupProps(props: VvAccordionPropsTypes, emit: (event: string, value: unknown) => void): {
+    modelValue: import("vue").WritableComputedRef<unknown>;
+    disabled: Ref<boolean>;
+    isInGroup: import("vue").ComputedRef<boolean>;
+    group: Ref<IAccordionGroupState> | undefined;
+    collapse: Ref<boolean>;
+    modifiers: Ref<string | string[]>;
+    title: Ref<string | undefined> | undefined;
+    content: Ref<string | undefined> | undefined;
+};

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

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

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

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