@volverjs/ui-vue 0.0.4 → 0.0.5-beta.1

package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js

@@ -1,18 +1,64 @@
-import { computed as S, unref as _, defineComponent as j, toRefs as O, openBlock as u, createElementBlock as i, normalizeClass as g, createElementVNode as y, Fragment as k, renderList as E, createBlock as N, resolveDynamicComponent as $, mergeProps as C, withCtx as L, renderSlot as P, normalizeProps as V, guardReactiveProps as z, createTextVNode as A, toDisplayString as D } from "vue";
-function R(t, r, s) {
-  return S(() => {
-    const n = {
-      [t]: !0
-    }, e = typeof (r == null ? void 0 : r.value) == "string" ? r.value.split(" ") : r == null ? void 0 : r.value;
-    return e && Array.isArray(e) && e.forEach((l) => {
-      n[`${t}--${l}`] = !0;
-    }), s && Object.keys(s.value).forEach((l) => {
-      n[`${t}--${l}`] = _(s.value[l]);
-    }), n;
+import { computed, unref, defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
+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;
   });
 }
-var p = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(p || {}), h = /* @__PURE__ */ ((t) => (t.topStart = "top-start", t.topEnd = "top-end", t.bottomStart = "bottom-start", t.bottomEnd = "bottom-end", t.leftStart = "left-start", t.leftEnd = "left-end", t.rightStart = "right-start", t.rightEnd = "right-end", t))(h || {}), c = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(c || {}), b = /* @__PURE__ */ ((t) => (t.button = "button", t.submit = "submit", t.reset = "reset", t))(b || {}), B = /* @__PURE__ */ ((t) => (t._blank = "_blank", t._self = "_self", t._parent = "_parent", t._top = "_top", t))(B || {});
-const w = {
+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/)
@@ -29,7 +75,7 @@ const w = {
    */
   target: {
     type: String,
-    validator: (t) => Object.values(B).includes(t)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -38,96 +84,212 @@ const w = {
     type: String,
     default: "noopener noreferrer"
   }
-}, F = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, M = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, I = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, W = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, q = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
 };
-c.before;
-p.bottom;
 ({
-  ...F,
-  ...W,
-  ...I,
-  ...M,
-  ...w,
+  /**
+   * 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 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: b.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-const G = {
-  ...q,
+const VvBreadcrumbProps = {
+  ...ModifiersProps,
   routes: Array
-}, H = { class: "vv-breadcrumb__list" }, J = ["content"], K = {
+};
+const _hoisted_1 = { class: "vv-breadcrumb__list" };
+const _hoisted_2 = ["content"];
+const __default__ = {
   name: "VvBreadcrumb"
-}, U = /* @__PURE__ */ j({
-  ...K,
-  props: G,
-  setup(t) {
-    const r = t, { modifiers: s } = O(r), n = R("vv-breadcrumb", s);
-    return (e, l) => (u(), i("nav", {
-      class: g(_(n)),
-      "aria-label": "breadcrumbs"
-    }, [
-      y("ol", H, [
-        (u(!0), i(k, null, E(e.routes, (a, o) => {
-          var d, f, m, v;
-          return u(), i("li", {
-            key: `${a.label}-${o}`,
-            class: g({
-              "vv-breadcrumb__item": o < Number((d = e.routes) == null ? void 0 : d.length) - 1,
-              "vv-breadcrumb__item-active": o === Number((f = e.routes) == null ? void 0 : f.length) - 1
-            }),
-            itemprop: "itemListElement",
-            itemtype: "https://schema.org/ListItem",
-            itemscope: ""
-          }, [
-            (u(), N($(a.to ? "router-link" : a.href ? "a" : "span"), C(a, {
-              class: {
-                "vv-breadcrumb__link": o < Number((m = e.routes) == null ? void 0 : m.length) - 1
-              },
-              "aria-current": o === Number((v = e.routes) == null ? void 0 : v.length) - 1 ? "page" : void 0,
-              itemprop: "item"
-            }), {
-              default: L(() => [
-                P(e.$slots, "label", V(z({ route: a, index: o })), () => [
-                  A(D(a.label), 1)
-                ])
-              ]),
-              _: 2
-            }, 1040, ["class", "aria-current"])),
-            y("meta", {
-              itemprop: "position",
-              content: `${o + 1}`
-            }, null, 8, J)
-          ], 2);
-        }), 128))
-      ])
-    ], 2));
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvBreadcrumbProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-breadcrumb", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        class: normalizeClass(unref(bemCssClasses)),
+        "aria-label": "breadcrumbs"
+      }, [
+        createElementVNode("ol", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.routes, (route, index) => {
+            var _a, _b, _c, _d;
+            return openBlock(), createElementBlock("li", {
+              key: `${route.label}-${index}`,
+              class: normalizeClass({
+                "vv-breadcrumb__item": index < Number((_a = _ctx.routes) == null ? void 0 : _a.length) - 1,
+                "vv-breadcrumb__item-active": index === Number((_b = _ctx.routes) == null ? void 0 : _b.length) - 1
+              }),
+              itemprop: "itemListElement",
+              itemtype: "https://schema.org/ListItem",
+              itemscope: ""
+            }, [
+              (openBlock(), createBlock(resolveDynamicComponent(route.to ? "router-link" : route.href ? "a" : "span"), mergeProps(route, {
+                class: {
+                  "vv-breadcrumb__link": index < Number((_c = _ctx.routes) == null ? void 0 : _c.length) - 1
+                },
+                "aria-current": index === Number((_d = _ctx.routes) == null ? void 0 : _d.length) - 1 ? "page" : void 0,
+                itemprop: "item"
+              }), {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps({ route, index })), () => [
+                    createTextVNode(toDisplayString(route.label), 1)
+                  ])
+                ]),
+                _: 2
+              }, 1040, ["class", "aria-current"])),
+              createElementVNode("meta", {
+                itemprop: "position",
+                content: `${index + 1}`
+              }, null, 8, _hoisted_2)
+            ], 2);
+          }), 128))
+        ])
+      ], 2);
+    };
   }
 });
 export {
-  U as default
+  _sfc_main as default
 };

package/dist/components/VvBreadcrumb/VvBreadcrumb.umd.js

@@ -1 +1 @@
-(function(e,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue")):typeof define=="function"&&define.amd?define(["vue"],s):(e=typeof globalThis<"u"?globalThis:e||self,e.VvBreadcrumb=s(e.vue))})(this,function(e){"use strict";function s(t,o,l){return e.computed(()=>{const i={[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(c=>{i[`${t}--${c}`]=!0}),l&&Object.keys(l.value).forEach(c=>{i[`${t}--${c}`]=e.unref(l.value[c])}),i})}var p=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(p||{}),d=(t=>(t.topStart="top-start",t.topEnd="top-end",t.bottomStart="bottom-start",t.bottomEnd="bottom-end",t.leftStart="left-start",t.leftEnd="left-end",t.rightStart="right-start",t.rightEnd="right-end",t))(d||{}),u=(t=>(t.before="before",t.after="after",t))(u||{}),b=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(b||{}),f=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(f||{});const B={to:{type:[String,Object]},href:String,target:{type:String,validator:t=>Object.values(f).includes(t)},rel:{type:String,default:"noopener noreferrer"}},h={disabled:Boolean},v={active:Boolean},S={pressed:Boolean},j={label:[String,Number]},k={modifiers:[String,Array]};u.before,p.bottom,{...h,...j,...S,...v,...B,type:b.button};const O={...k,routes:Array},E={class:"vv-breadcrumb__list"},N=["content"],C={name:"VvBreadcrumb"};return e.defineComponent({...C,props:O,setup(t){const o=t,{modifiers:l}=e.toRefs(o),i=s("vv-breadcrumb",l);return(r,c)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(i)),"aria-label":"breadcrumbs"},[e.createElementVNode("ol",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.routes,(n,a)=>{var m,g,y,_;return e.openBlock(),e.createElementBlock("li",{key:`${n.label}-${a}`,class:e.normalizeClass({"vv-breadcrumb__item":a<Number((m=r.routes)==null?void 0:m.length)-1,"vv-breadcrumb__item-active":a===Number((g=r.routes)==null?void 0:g.length)-1}),itemprop:"itemListElement",itemtype:"https://schema.org/ListItem",itemscope:""},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.to?"router-link":n.href?"a":"span"),e.mergeProps(n,{class:{"vv-breadcrumb__link":a<Number((y=r.routes)==null?void 0:y.length)-1},"aria-current":a===Number((_=r.routes)==null?void 0:_.length)-1?"page":void 0,itemprop:"item"}),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"label",e.normalizeProps(e.guardReactiveProps({route:n,index:a})),()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:2},1040,["class","aria-current"])),e.createElementVNode("meta",{itemprop:"position",content:`${a+1}`},null,8,N)],2)}),128))])],2))}})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvBreadcrumb=t(e.vue)}(this,(function(e){"use strict";var t=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(t||{}),o=(e=>(e.before="before",e.after="after",e))(o||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{});Boolean,Boolean,Boolean;const n={modifiers:[String,Array]};o.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,r.button;const l={...n,routes:Array},a={class:"vv-breadcrumb__list"},i=["content"];return e.defineComponent({name:"VvBreadcrumb",props:l,setup(t){const o=t,{modifiers:r}=e.toRefs(o),n=function(t,o,r){return e.computed((()=>{const n={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(n[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{n[`${t}--${o}`]=e.unref(r.value[o])})),n}))}("vv-breadcrumb",r);return(t,o)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(n)),"aria-label":"breadcrumbs"},[e.createElementVNode("ol",a,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.routes,((o,r)=>{var n,l,a,u;return e.openBlock(),e.createElementBlock("li",{key:`${o.label}-${r}`,class:e.normalizeClass({"vv-breadcrumb__item":r<Number(null==(n=t.routes)?void 0:n.length)-1,"vv-breadcrumb__item-active":r===Number(null==(l=t.routes)?void 0:l.length)-1}),itemprop:"itemListElement",itemtype:"https://schema.org/ListItem",itemscope:""},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.to?"router-link":o.href?"a":"span"),e.mergeProps(o,{class:{"vv-breadcrumb__link":r<Number(null==(a=t.routes)?void 0:a.length)-1},"aria-current":r===Number(null==(u=t.routes)?void 0:u.length)-1?"page":void 0,itemprop:"item"}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"label",e.normalizeProps(e.guardReactiveProps({route:o,index:r})),(()=>[e.createTextVNode(e.toDisplayString(o.label),1)]))])),_:2},1040,["class","aria-current"])),e.createElementVNode("meta",{itemprop:"position",content:`${r+1}`},null,8,i)],2)})),128))])],2))}})}));

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

@@ -1,9 +1,9 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     routes: {
-        (arrayLength: number): import("@/components/VvBreadcrumb").Route[];
-        (...items: import("@/components/VvBreadcrumb").Route[]): import("@/components/VvBreadcrumb").Route[];
-        new (arrayLength: number): import("@/components/VvBreadcrumb").Route[];
-        new (...items: import("@/components/VvBreadcrumb").Route[]): import("@/components/VvBreadcrumb").Route[];
+        (arrayLength: number): import(".").Route[];
+        (...items: import(".").Route[]): import(".").Route[];
+        new (arrayLength: number): import(".").Route[];
+        new (...items: import(".").Route[]): import(".").Route[];
         isArray(arg: any): arg is any[];
         readonly prototype: any[];
         from<T>(arrayLike: ArrayLike<T>): T[];
@@ -13,13 +13,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         of<T_4>(...items: T_4[]): T_4[];
         readonly [Symbol.species]: ArrayConstructor;
     };
-    modifiers: import("vue").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<{
     routes: {
-        (arrayLength: number): import("@/components/VvBreadcrumb").Route[];
-        (...items: import("@/components/VvBreadcrumb").Route[]): import("@/components/VvBreadcrumb").Route[];
-        new (arrayLength: number): import("@/components/VvBreadcrumb").Route[];
-        new (...items: import("@/components/VvBreadcrumb").Route[]): import("@/components/VvBreadcrumb").Route[];
+        (arrayLength: number): import(".").Route[];
+        (...items: import(".").Route[]): import(".").Route[];
+        new (arrayLength: number): import(".").Route[];
+        new (...items: import(".").Route[]): import(".").Route[];
         isArray(arg: any): arg is any[];
         readonly prototype: any[];
         from<T>(arrayLike: ArrayLike<T>): T[];
@@ -29,10 +29,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         of<T_4>(...items: T_4[]): T_4[];
         readonly [Symbol.species]: ArrayConstructor;
     };
-    modifiers: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
 }>>, {}>, {
     label: (_: {
-        route: import("@/components/VvBreadcrumb").Route;
+        route: import(".").Route;
         index: number;
     }) => any;
 }>;

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

@@ -21,5 +21,5 @@ export declare const VvBreadcrumbProps: {
         of<T_4>(...items: T_4[]): T_4[];
         readonly [Symbol.species]: ArrayConstructor;
     };
-    modifiers: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
 };