@volverjs/ui-vue 0.0.6-beta.1 → 0.0.6-beta.3

package/README.md

@@ -165,10 +165,10 @@ The following features are planned for the next releases:
 - [x] (v0.0.3) Rewrite of `VvDropdown` to get it applicable to any element;
 - [x] (v0.0.5) Input masks for `VvInputText` component;
 - [x] `VvAvatar` component;
-- [ ] `VvAvatarGroup` component;
+- [x] `VvAvatarGroup` component;
+- [x] Menus, navigation and tabs with `VvNav`;
 - [ ] Alerts, notifications and toasts with `VvAlert` and `VvToast` component;
 - [ ] Loaders with `VvLoader` and `VvSkeleton`;
-- [ ] Menus, navigation and tabs with `VvNav`;
 - [ ] `VvTable` component with sort, filters, pagination and cell editing;
 - [ ] Multiple uploads, image crop and file previews with `VvInputFile`;
 - [ ] Carousel and galleries with `VvCarousel` component;

package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js

@@ -0,0 +1,363 @@
+import { computed, unref, defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, Fragment, renderList, createBlock, mergeProps, withCtx, toDisplayString, createTextVNode } from "vue";
+import { nanoid } from "nanoid";
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const LinkProps = {
+  /**
+   * 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: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
+({
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+});
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+});
+const VvAvatarGroupProps = {
+  ...ModifiersProps,
+  /**
+   * avatar items
+   */
+  items: {
+    type: Array,
+    default: () => [],
+    required: true
+  },
+  toShow: {
+    type: Number,
+    default: 3
+  },
+  totalItems: {
+    type: Number
+  },
+  avatarModifiers: [String, Array]
+};
+const VvAvatarProps = {
+  ...ModifiersProps,
+  /**
+   * Image src for avatar
+   */
+  imgSrc: String
+};
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
+  });
+}
+const _hoisted_1$1 = ["role", "aria-label"];
+const _hoisted_2 = ["src"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "VvAvatar",
+  props: VvAvatarProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-avatar", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: _ctx.imgSrc ? void 0 : "img",
+        "aria-label": _ctx.imgSrc ? void 0 : "avatar"
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          _ctx.imgSrc ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: _ctx.imgSrc,
+            alt: "avatar"
+          }, null, 8, _hoisted_2)) : createCommentVNode("", true)
+        ])
+      ], 10, _hoisted_1$1);
+    };
+  }
+});
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const _hoisted_1 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VvAvatarGroup",
+  props: VvAvatarGroupProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers, items, toShow, totalItems, avatarModifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-avatar-group", modifiers);
+    const stringModifiers = computed(() => {
+      if ((avatarModifiers == null ? void 0 : avatarModifiers.value) && Array.isArray(avatarModifiers == null ? void 0 : avatarModifiers.value)) {
+        return avatarModifiers.value.join(" ");
+      }
+      return (avatarModifiers == null ? void 0 : avatarModifiers.value) || "";
+    });
+    const avatarItems = computed(() => {
+      return items.value.slice(0, toShow.value).map((item) => {
+        let modifiers2 = [];
+        let itemModifiers = [];
+        if (avatarModifiers == null ? void 0 : avatarModifiers.value) {
+          modifiers2 = Array.isArray(avatarModifiers == null ? void 0 : avatarModifiers.value) ? avatarModifiers == null ? void 0 : avatarModifiers.value : [avatarModifiers == null ? void 0 : avatarModifiers.value];
+        }
+        if (item.modifiers) {
+          itemModifiers = Array.isArray(item.modifiers) ? item.modifiers : [item.modifiers];
+        }
+        return {
+          ...item,
+          key: item.key || useUniqueId().value,
+          modifiers: [...modifiers2, ...itemModifiers]
+        };
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(avatarItems), (avatarItem) => {
+            return openBlock(), createBlock(_sfc_main$1, mergeProps({
+              key: avatarItem.key
+            }, {
+              modifiers: avatarItem.modifiers,
+              imgSrc: avatarItem.imgSrc
+            }), {
+              default: withCtx(() => [
+                avatarItem.text ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(avatarItem.text), 1)) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1040);
+          }), 128)),
+          (unref(totalItems) || unref(items).length) > unref(toShow) ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            modifiers: `${unref(stringModifiers)} surface bordered`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(`+${(unref(totalItems) || unref(items).length) - unref(toShow)}`), 1)
+            ]),
+            _: 1
+          }, 8, ["modifiers"])) : createCommentVNode("", true)
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/VvAvatarGroup/VvAvatarGroup.umd.js

@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("nanoid")):"function"==typeof define&&define.amd?define(["vue","nanoid"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAvatarGroup=o(e.vue,e.nanoid)}(this,(function(e,o){"use strict";var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),t=(e=>(e.before="before",e.after="after",e))(t||{}),a=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(a||{});Boolean,Boolean,Boolean;const n={modifiers:[String,Array]};t.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,a.button;const l={...n,items:{type:Array,default:()=>[],required:!0},toShow:{type:Number,default:3},totalItems:{type:Number},avatarModifiers:[String,Array]},i={...n,imgSrc:String};function u(o,r,t){return e.computed((()=>{const a={[o]:!0},n="string"==typeof(null==r?void 0:r.value)?r.value.split(" "):null==r?void 0:r.value;return n&&Array.isArray(n)&&n.forEach((e=>{e&&(a[`${o}--${e}`]=!0)})),t&&Object.keys(t.value).forEach((r=>{a[`${o}--${r}`]=e.unref(t.value[r])})),a}))}const s=["role","aria-label"],d=["src"],f=e.defineComponent({__name:"VvAvatar",props:i,setup(o){const r=o,{modifiers:t}=e.toRefs(r),a=u("vv-avatar",t);return(o,r)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(e.unref(a)),role:o.imgSrc?void 0:"img","aria-label":o.imgSrc?void 0:"avatar"},[e.renderSlot(o.$slots,"default",{},(()=>[o.imgSrc?(e.openBlock(),e.createElementBlock("img",{key:0,src:o.imgSrc,alt:"avatar"},null,8,d)):e.createCommentVNode("",!0)]))],10,s))}}),m={key:0};return e.defineComponent({__name:"VvAvatarGroup",props:l,setup(r){const t=r,{modifiers:a,items:n,toShow:l,totalItems:i,avatarModifiers:s}=e.toRefs(t),d=u("vv-avatar-group",a),c=e.computed((()=>(null==s?void 0:s.value)&&Array.isArray(null==s?void 0:s.value)?s.value.join(" "):(null==s?void 0:s.value)||"")),v=e.computed((()=>n.value.slice(0,l.value).map((r=>{let t=[],a=[];return(null==s?void 0:s.value)&&(t=Array.isArray(null==s?void 0:s.value)?null==s?void 0:s.value:[null==s?void 0:s.value]),r.modifiers&&(a=Array.isArray(r.modifiers)?r.modifiers:[r.modifiers]),{...r,key:r.key||e.computed((()=>String((null==n?void 0:n.value)||o.nanoid()))).value,modifiers:[...t,...a]};var n}))));return(o,r)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(e.unref(d))},[e.renderSlot(o.$slots,"default",{},(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),(o=>(e.openBlock(),e.createBlock(f,e.mergeProps({key:o.key},{modifiers:o.modifiers,imgSrc:o.imgSrc}),{default:e.withCtx((()=>[o.text?(e.openBlock(),e.createElementBlock("span",m,e.toDisplayString(o.text),1)):e.createCommentVNode("",!0)])),_:2},1040)))),128)),(e.unref(i)||e.unref(n).length)>e.unref(l)?(e.openBlock(),e.createBlock(f,{key:0,modifiers:`${e.unref(c)} surface bordered`},{default:e.withCtx((()=>[e.createTextVNode(e.toDisplayString("+"+((e.unref(i)||e.unref(n).length)-e.unref(l))),1)])),_:1},8,["modifiers"])):e.createCommentVNode("",!0)]))],2))}})}));

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

@@ -0,0 +1,68 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    items: {
+        type: {
+            (arrayLength: number): import("@/components/VvAvatarGroup").AvatarItem[];
+            (...items: import("@/components/VvAvatarGroup").AvatarItem[]): import("@/components/VvAvatarGroup").AvatarItem[];
+            new (arrayLength: number): import("@/components/VvAvatarGroup").AvatarItem[];
+            new (...items: import("@/components/VvAvatarGroup").AvatarItem[]): import("@/components/VvAvatarGroup").AvatarItem[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+        required: boolean;
+    };
+    toShow: {
+        type: NumberConstructor;
+        default: number;
+    };
+    totalItems: {
+        type: NumberConstructor;
+    };
+    avatarModifiers: globalThis.PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: {
+            (arrayLength: number): import("@/components/VvAvatarGroup").AvatarItem[];
+            (...items: import("@/components/VvAvatarGroup").AvatarItem[]): import("@/components/VvAvatarGroup").AvatarItem[];
+            new (arrayLength: number): import("@/components/VvAvatarGroup").AvatarItem[];
+            new (...items: import("@/components/VvAvatarGroup").AvatarItem[]): import("@/components/VvAvatarGroup").AvatarItem[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+        required: boolean;
+    };
+    toShow: {
+        type: NumberConstructor;
+        default: number;
+    };
+    totalItems: {
+        type: NumberConstructor;
+    };
+    avatarModifiers: globalThis.PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
+}>>, {
+    items: import("@/components/VvAvatarGroup").AvatarItem[];
+    toShow: number;
+}>, {
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,38 @@
+export type AvatarItem = {
+    key?: string;
+    text?: string;
+    imgSrc?: string;
+    modifiers?: string | string[];
+};
+export declare const VvAvatarGroupProps: {
+    /**
+     * avatar items
+     */
+    items: {
+        type: {
+            (arrayLength: number): AvatarItem[];
+            (...items: AvatarItem[]): AvatarItem[];
+            new (arrayLength: number): AvatarItem[];
+            new (...items: AvatarItem[]): AvatarItem[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+        required: boolean;
+    };
+    toShow: {
+        type: NumberConstructor;
+        default: number;
+    };
+    totalItems: {
+        type: NumberConstructor;
+    };
+    avatarModifiers: globalThis.PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
+};