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

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

@@ -1,182 +1,19 @@
-import { ButtonIconPosition } from './VvButton';
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            disabled: boolean;
-            iconPosition: ButtonIconPosition;
-            loading: boolean;
-            loadingIcon: string;
-            loadingLabel: string;
-            block: boolean;
-            active: boolean;
-            rounded: boolean;
-            fullBleed: boolean;
-            action: boolean;
-            actionQuiet: boolean;
-            selected: boolean;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            icon: StringConstructor;
-            iconPosition: {
-                type: import("vue").PropType<ButtonIconPosition>;
-                default: ButtonIconPosition;
-                validator: (value: string) => boolean;
-            };
-            label: StringConstructor;
-            loading: BooleanConstructor;
-            loadingIcon: {
-                type: StringConstructor;
-                default: string;
-            };
-            loadingLabel: {
-                type: StringConstructor;
-                default: string;
-            };
-            to: {
-                type: (StringConstructor | ObjectConstructor)[];
-            };
-            href: StringConstructor;
-            target: {
-                type: import("vue").PropType<import("./VvButton").ButtonTarget>;
-                validator: (value: string) => boolean;
-            };
-            block: BooleanConstructor;
-            active: BooleanConstructor;
-            rounded: BooleanConstructor;
-            disabled: BooleanConstructor;
-            fullBleed: BooleanConstructor;
-            action: BooleanConstructor;
-            actionQuiet: BooleanConstructor;
-            selected: BooleanConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "iconPosition" | "loading" | "loadingIcon" | "loadingLabel" | "block" | "active" | "rounded" | "fullBleed" | "action" | "actionQuiet" | "selected">;
-        $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<{
-            icon: StringConstructor;
-            iconPosition: {
-                type: import("vue").PropType<ButtonIconPosition>;
-                default: ButtonIconPosition;
-                validator: (value: string) => boolean;
-            };
-            label: StringConstructor;
-            loading: BooleanConstructor;
-            loadingIcon: {
-                type: StringConstructor;
-                default: string;
-            };
-            loadingLabel: {
-                type: StringConstructor;
-                default: string;
-            };
-            to: {
-                type: (StringConstructor | ObjectConstructor)[];
-            };
-            href: StringConstructor;
-            target: {
-                type: import("vue").PropType<import("./VvButton").ButtonTarget>;
-                validator: (value: string) => boolean;
-            };
-            block: BooleanConstructor;
-            active: BooleanConstructor;
-            rounded: BooleanConstructor;
-            disabled: BooleanConstructor;
-            fullBleed: BooleanConstructor;
-            action: BooleanConstructor;
-            actionQuiet: BooleanConstructor;
-            selected: BooleanConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
-        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-            disabled: boolean;
-            iconPosition: ButtonIconPosition;
-            loading: boolean;
-            loadingIcon: string;
-            loadingLabel: string;
-            block: boolean;
-            active: boolean;
-            rounded: boolean;
-            fullBleed: boolean;
-            action: boolean;
-            actionQuiet: boolean;
-            selected: 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<{
-        icon: StringConstructor;
-        iconPosition: {
-            type: import("vue").PropType<ButtonIconPosition>;
-            default: ButtonIconPosition;
-            validator: (value: string) => boolean;
-        };
-        label: StringConstructor;
-        loading: BooleanConstructor;
-        loadingIcon: {
-            type: StringConstructor;
-            default: string;
-        };
-        loadingLabel: {
-            type: StringConstructor;
-            default: string;
-        };
-        to: {
-            type: (StringConstructor | ObjectConstructor)[];
-        };
-        href: StringConstructor;
-        target: {
-            type: import("vue").PropType<import("./VvButton").ButtonTarget>;
-            validator: (value: string) => boolean;
-        };
-        block: BooleanConstructor;
-        active: BooleanConstructor;
-        rounded: BooleanConstructor;
-        disabled: BooleanConstructor;
-        fullBleed: BooleanConstructor;
-        action: BooleanConstructor;
-        actionQuiet: BooleanConstructor;
-        selected: BooleanConstructor;
-        modifiers: (StringConstructor | ArrayConstructor)[];
-    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    icon: StringConstructor;
+import { ButtonIconPosition } from '@/components/VvButton';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    icon: {
+        type: (ObjectConstructor | StringConstructor)[];
+        /**
+         * @description The tag defined by props.
+         * @returns {string} The tag.
+         */
+        default: string;
+    };
     iconPosition: {
         type: import("vue").PropType<ButtonIconPosition>;
         default: ButtonIconPosition;
         validator: (value: string) => boolean;
     };
-    label: StringConstructor;
+    label: (StringConstructor | NumberConstructor)[];
     loading: BooleanConstructor;
     loadingIcon: {
         type: StringConstructor;
@@ -187,42 +24,114 @@ declare const _default: {
         default: string;
     };
     to: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("./VvButton").ButtonTarget>;
+        type: import("vue").PropType<import("@/components/VvButton").ButtonTarget>;
         validator: (value: string) => boolean;
     };
-    block: BooleanConstructor;
     active: BooleanConstructor;
-    rounded: BooleanConstructor;
+    pressed: BooleanConstructor;
+    rel: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: import("@/components/VvButton").ButtonType;
+        validator: (value: string) => boolean;
+    };
+    toggle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: StringConstructor;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
-    fullBleed: BooleanConstructor;
-    action: BooleanConstructor;
-    actionQuiet: BooleanConstructor;
-    selected: BooleanConstructor;
-    modifiers: (StringConstructor | ArrayConstructor)[];
-}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    modifiers: import("vue").PropType<string | string[]>;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: (ObjectConstructor | StringConstructor)[];
+        /**
+         * @description The tag defined by props.
+         * @returns {string} The tag.
+         */
+        default: string;
+    };
+    iconPosition: {
+        type: import("vue").PropType<ButtonIconPosition>;
+        default: ButtonIconPosition;
+        validator: (value: string) => boolean;
+    };
+    label: (StringConstructor | NumberConstructor)[];
+    loading: BooleanConstructor;
+    loadingIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    loadingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+    };
+    href: StringConstructor;
+    target: {
+        type: import("vue").PropType<import("@/components/VvButton").ButtonTarget>;
+        validator: (value: string) => boolean;
+    };
+    active: BooleanConstructor;
+    pressed: BooleanConstructor;
+    rel: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: import("@/components/VvButton").ButtonType;
+        validator: (value: string) => boolean;
+    };
+    toggle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: StringConstructor;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: BooleanConstructor;
+    modifiers: import("vue").PropType<string | string[]>;
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
+    type: string;
+    icon: string | Record<string, any>;
+    toggle: boolean;
+    unselectable: boolean;
     iconPosition: ButtonIconPosition;
     loading: boolean;
     loadingIcon: string;
     loadingLabel: string;
-    block: boolean;
     active: boolean;
-    rounded: boolean;
-    fullBleed: boolean;
-    action: boolean;
-    actionQuiet: boolean;
-    selected: boolean;
-}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {
-        default: (_: {}) => any;
-        loading: (_: {}) => any;
-        before: (_: {}) => any;
-        label: (_: {}) => any;
-        after: (_: {}) => any;
-    };
-});
+    pressed: boolean;
+    rel: string;
+}>, {
+    default: (_: {}) => any;
+    loading: (_: {}) => any;
+    before: (_: {}) => any;
+    label: (_: {}) => any;
+    after: (_: {}) => any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,132 @@
+import { type Ref, type PropType, type ExtractPropTypes } from 'vue';
+import type IButtonGroupState from '@/composables/group/types/IButtonGroupState';
+export declare enum ButtonIconPosition {
+    left = "left",
+    right = "right",
+    top = "top",
+    bottom = "bottom"
+}
+export declare enum ButtonType {
+    button = "button",
+    submit = "submit",
+    reset = "reset"
+}
+export declare enum ButtonTag {
+    nuxtLink = "nuxt-link",
+    routerLink = "router-link",
+    a = "a",
+    button = "button"
+}
+export declare enum ButtonTarget {
+    _blank = "_blank",
+    _self = "_self",
+    _parent = "_parent",
+    _top = "_top"
+}
+export declare const VvButtonEvents: string[];
+export declare const VvButtonProps: {
+    /**
+     * Button icon
+     */
+    icon: {
+        type: (ObjectConstructor | StringConstructor)[];
+        default: string;
+    };
+    /**
+     * Button icon position
+     */
+    iconPosition: {
+        type: PropType<ButtonIconPosition>;
+        default: ButtonIconPosition;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Button label
+     */
+    label: (StringConstructor | NumberConstructor)[];
+    /**
+     * Loading status
+     */
+    loading: BooleanConstructor;
+    /**
+     * Loading icon
+     */
+    loadingIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Loading label
+     */
+    loadingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 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: (ObjectConstructor | StringConstructor)[];
+    };
+    /**
+     * Link href
+     */
+    href: StringConstructor;
+    /**
+     * Link target
+     */
+    target: {
+        type: PropType<ButtonTarget>;
+        validator: (value: string) => boolean;
+    };
+    active: BooleanConstructor;
+    /**
+     * Button pressed mode
+     */
+    pressed: BooleanConstructor;
+    /**
+     * Link rel
+     */
+    rel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Button type
+     */
+    type: {
+        type: StringConstructor;
+        default: ButtonType;
+        validator: (value: string) => boolean;
+    };
+    toggle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: StringConstructor;
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: BooleanConstructor;
+    modifiers: PropType<string | string[]>;
+};
+export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>;
+/**
+ * Merges local and group props
+ */
+export declare function useGroupProps(props: VvButtonPropsTypes, emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void): {
+    modelValue: Ref<string | string[] | undefined>;
+    disabled: Ref<boolean>;
+    toggle: Ref<boolean>;
+    isInGroup: import("vue").ComputedRef<boolean>;
+    group: Ref<IButtonGroupState> | undefined;
+    modifiers: Ref<string | string[]>;
+    multiple: Ref<boolean>;
+    unselectable: Ref<boolean>;
+    pressed: Ref<boolean>;
+    iconPosition: Ref<ButtonIconPosition>;
+    icon: Ref<string | Record<string, any>>;
+    label: Ref<string | number | undefined> | undefined;
+};

package/dist/components/VvButtonGroup/VvButtonGroup.es.js

@@ -0,0 +1,108 @@
+import { isRef as y, provide as b, computed as d, unref as m, defineComponent as A, toRefs as V, watchEffect as v, openBlock as g, createElementBlock as B, normalizeClass as _, renderSlot as C } from "vue";
+const k = "VV_BUTTON_GROUP";
+function G(e) {
+  if (Object.keys(e).some(
+    (t) => t !== "key" && !y(e[t])
+  ))
+    throw Error("One or more groupState props aren't ref.");
+  b(
+    e.key,
+    d(() => e)
+  );
+}
+function c(e) {
+  var t, r;
+  if (e)
+    return (r = (t = e.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 : t.join("-")) == null ? void 0 : r.toLowerCase();
+}
+function O(e, t) {
+  const r = { [`${e}`]: !0 };
+  return {
+    bemCssClasses: d(() => Object.keys(t).reduce((l, a) => {
+      const o = m(t[a]) || !1;
+      if (!o)
+        return l;
+      if (a === "modifiers") {
+        const u = Array.isArray(o) ? o : o.split(" ");
+        return {
+          ...l,
+          ...u.reduce(
+            (n, i) => ({
+              ...n,
+              [`${e}--${c(i)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...l,
+          [`${e}--${c(a)}`]: o
+        };
+    }, r) || {})
+  };
+}
+const P = {
+  disabled: Boolean
+}, $ = {
+  modifiers: [String, Array]
+}, M = {
+  ...$,
+  ...P,
+  itemModifiers: {
+    type: [String, Array],
+    default: ""
+  },
+  toggle: { type: Boolean, default: !1 },
+  multiple: { type: Boolean, default: !1 },
+  unselectable: { type: Boolean, default: !0 },
+  modelValue: { type: [String, Array], default: void 0 }
+}, S = ["update:modelValue"], h = {
+  name: "VvButtonGroup"
+}, U = /* @__PURE__ */ A({
+  ...h,
+  props: M,
+  emits: S,
+  setup(e, { emit: t }) {
+    const r = e, {
+      disabled: f,
+      toggle: l,
+      modifiers: a,
+      multiple: o,
+      unselectable: u,
+      itemModifiers: n
+    } = V(r);
+    v(() => {
+      typeof r.modelValue == "string" && o.value && console.warn(
+        "[VvButtonGroup]: modelValue is a string but multiple is true."
+      );
+    });
+    const i = d({
+      get: () => o.value ? r.modelValue : Array.isArray(r.modelValue) ? r.modelValue[0] : r.modelValue,
+      set: (s) => (s !== void 0 && (Array.isArray(r.modelValue) || o.value) && !Array.isArray(s) && (s = [s]), t("update:modelValue", s))
+    });
+    G({
+      key: k,
+      modelValue: i,
+      disabled: f,
+      toggle: l,
+      multiple: o,
+      unselectable: u,
+      modifiers: n
+    });
+    const { bemCssClasses: p } = O("vv-button-group", {
+      modifiers: a
+    });
+    return (s, R) => (g(), B("div", {
+      class: _(m(p)),
+      role: "group"
+    }, [
+      C(s.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  U as default
+};

package/dist/components/VvButtonGroup/VvButtonGroup.umd.js

@@ -0,0 +1 @@
+(function(e,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(e=typeof globalThis<"u"?globalThis:e||self,e.VvButtonGroup=i(e.vue))})(this,function(e){"use strict";const i="VV_BUTTON_GROUP";function m(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 p(t){var r,o;if(t)return(o=(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:o.toLowerCase()}function y(t,r){const o={[`${t}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(r).reduce((u,l)=>{const s=e.unref(r[l])||!1;if(!s)return u;if(l==="modifiers"){const a=Array.isArray(s)?s:s.split(" ");return{...u,...a.reduce((d,f)=>({...d,[`${t}--${p(f)}`]:!0}),{})}}else return{...u,[`${t}--${p(l)}`]:s}},o)||{})}}const b={...{modifiers:[String,Array]},...{disabled:Boolean},itemModifiers:{type:[String,Array],default:""},toggle:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},unselectable:{type:Boolean,default:!0},modelValue:{type:[String,Array],default:void 0}},V=["update:modelValue"],A={name:"VvButtonGroup"};return e.defineComponent({...A,props:b,emits:V,setup(t,{emit:r}){const o=t,{disabled:c,toggle:u,modifiers:l,multiple:s,unselectable:a,itemModifiers:d}=e.toRefs(o);e.watchEffect(()=>{typeof o.modelValue=="string"&&s.value&&console.warn("[VvButtonGroup]: modelValue is a string but multiple is true.")});const f=e.computed({get:()=>s.value?o.modelValue:Array.isArray(o.modelValue)?o.modelValue[0]:o.modelValue,set:n=>(n!==void 0&&(Array.isArray(o.modelValue)||s.value)&&!Array.isArray(n)&&(n=[n]),r("update:modelValue",n))});m({key:i,modelValue:f,disabled:c,toggle:u,multiple:s,unselectable:a,modifiers:d});const{bemCssClasses:_}=y("vv-button-group",{modifiers:l});return(n,P)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(_)),role:"group"},[e.renderSlot(n.$slots,"default")],2))}})});