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

package/dist/components/VvButton/VvButton.es.js

@@ -0,0 +1,427 @@
+import { unref as v, computed as g, defineComponent as I, ref as G, toRefs as M, inject as P, openBlock as b, createBlock as A, mergeProps as C, createCommentVNode as $, toRef as T, useAttrs as X, useSlots as K, resolveDynamicComponent as Q, withCtx as W, renderSlot as _, createElementBlock as O, toDisplayString as j, Fragment as Y, createTextVNode as ee } from "vue";
+import { nanoid as te } from "nanoid";
+import { iconExists as w, Icon as ne, addIcon as re } from "@iconify/vue";
+function V(e, t, r) {
+  return r ? B(e, r) === B(t, r) : L(e, t);
+}
+function L(e, t) {
+  if (e === t)
+    return !0;
+  if (e && t && typeof e == "object" && typeof t == "object") {
+    const r = Array.isArray(e), u = Array.isArray(t);
+    let o, i, a;
+    if (r && u) {
+      if (i = e.length, i != t.length)
+        return !1;
+      for (o = i; o-- !== 0; )
+        if (!L(e[o], t[o]))
+          return !1;
+      return !0;
+    }
+    if (r != u)
+      return !1;
+    const d = e instanceof Date, s = t instanceof Date;
+    if (d != s)
+      return !1;
+    if (d && s)
+      return e.getTime() == t.getTime();
+    const c = e instanceof RegExp, n = t instanceof RegExp;
+    if (c != n)
+      return !1;
+    if (c && n)
+      return e.toString() == t.toString();
+    const l = Object.keys(e);
+    if (i = l.length, i !== Object.keys(t).length)
+      return !1;
+    for (o = i; o-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(t, l[o]))
+        return !1;
+    for (o = i; o-- !== 0; )
+      if (a = l[o], !L(e[a], t[a]))
+        return !1;
+    return !0;
+  }
+  return e !== e && t !== t;
+}
+function B(e, t) {
+  if (e && Object.keys(e).length && t) {
+    if (t.indexOf(".") === -1)
+      return e[t];
+    {
+      const r = t.split(".");
+      let u = e;
+      for (let o = 0, i = r.length; o < i; ++o) {
+        if (e == null)
+          return null;
+        u = u[r[o]];
+      }
+      return u;
+    }
+  } else
+    return null;
+}
+function F(e, t) {
+  if (e != null && t && t.length) {
+    for (const r of t)
+      if (V(e, r))
+        return !0;
+  }
+  return !1;
+}
+function oe(e) {
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(v(e));
+}
+function R(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();
+}
+const N = "ds";
+function q(e, t) {
+  const r = { [`${e}`]: !0 };
+  return {
+    bemCssClasses: g(() => Object.keys(t).reduce((o, i) => {
+      const a = v(t[i]) || !1;
+      if (!a)
+        return o;
+      if (i === "modifiers") {
+        const d = Array.isArray(a) ? a : a.split(" ");
+        return {
+          ...o,
+          ...d.reduce(
+            (s, c) => ({
+              ...s,
+              [`${e}--${R(c)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...o,
+          [`${e}--${R(i)}`]: a
+        };
+    }, r) || {})
+  };
+}
+const se = {
+  color: String,
+  width: {
+    type: [String, Number]
+  },
+  height: {
+    type: [String, Number]
+  },
+  name: {
+    type: String,
+    required: !0
+  },
+  provider: {
+    type: String
+  },
+  prefix: {
+    type: String,
+    default: "normal"
+  },
+  src: String,
+  horizontalFlip: Boolean,
+  verticalFlip: Boolean,
+  flip: String,
+  mode: String,
+  inline: Boolean,
+  rotate: [Number, String],
+  onLoad: Function,
+  svg: String,
+  modifiers: {
+    type: [String, Array]
+  }
+}, ie = {
+  name: "VvIcon"
+}, E = /* @__PURE__ */ I({
+  ...ie,
+  props: se,
+  setup(e) {
+    const t = e, r = G(!0), { modifiers: u } = M(t), o = P(N), { bemCssClasses: i } = q("vv-icon", {
+      modifiers: u
+    }), a = g(() => t.provider || (o == null ? void 0 : o.provider)), d = g(() => {
+      const n = t.name ?? "", l = `@${a.value}:${t.prefix}:${t.name}`;
+      return w(n) ? n : w(l) ? l : (o == null ? void 0 : o.iconsCollections.find((p) => {
+        const y = `@${a.value}:${p.prefix}:${n}`;
+        if (w(y))
+          return y;
+      })) || n;
+    });
+    function s(n) {
+      let l = null;
+      if (typeof window > "u") {
+        const { JSDOM: h } = require("jsdom");
+        l = new h().window;
+      }
+      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
+    }
+    function c(n) {
+      const l = s(n), p = (l == null ? void 0 : l.innerHTML.trim()) || "";
+      l && p && re(`@${a.value}:${t.prefix}:${t.name}`, {
+        body: p,
+        height: l.viewBox.baseVal.height,
+        width: l.viewBox.baseVal.width
+      });
+    }
+    return o && (t.src && !w(`@${a.value}:${t.prefix}:${t.name}`) ? (r.value = !1, o.fetchIcon(t.src).then((n) => {
+      n && (c(n), r.value = !0);
+    }).catch((n) => {
+      throw new Error(`During fetch icon: ${n == null ? void 0 : n.message}`);
+    })) : t.svg && c(t.svg)), (n, l) => r.value ? (b(), A(v(ne), C({
+      key: 0,
+      class: v(i)
+    }, {
+      inline: n.inline,
+      width: n.width,
+      height: n.height,
+      horizontalFlip: n.horizontalFlip,
+      verticalFlip: n.verticalFlip,
+      flip: n.flip,
+      rotate: n.rotate,
+      color: n.color,
+      onLoad: n.onLoad,
+      icon: v(d)
+    }), null, 16, ["class"])) : $("", !0);
+  }
+}), le = {
+  disabled: Boolean
+}, ae = {
+  modifiers: [String, Array]
+};
+function ue(e) {
+  const t = P(e, void 0), r = g(() => !oe(t));
+  function u(o, i, a) {
+    if (t != null && t.value) {
+      const s = v(t.value)[o];
+      return g({
+        get() {
+          return s == null ? void 0 : s.value;
+        },
+        set(c) {
+          s.value = c;
+        }
+      });
+    }
+    const d = T(i, o);
+    return g({
+      get() {
+        return d.value;
+      },
+      set(s) {
+        a && a(`update:${o}`, s);
+      }
+    });
+  }
+  return {
+    group: t,
+    isInGroup: r,
+    getGroupOrLocalRef: u
+  };
+}
+const ce = "VV_BUTTON_GROUP";
+var k = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(k || {}), z = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(z || {}), m = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(m || {}), U = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(U || {});
+const fe = ["update:modelValue"], de = {
+  ...ae,
+  ...le,
+  icon: {
+    type: [String, Object],
+    default: ""
+  },
+  iconPosition: {
+    type: String,
+    default: "left",
+    validator: (e) => e in k
+  },
+  label: [String, Number],
+  loading: Boolean,
+  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  },
+  to: {
+    type: [String, Object]
+  },
+  href: String,
+  target: {
+    type: String,
+    validator: (e) => e in U
+  },
+  active: Boolean,
+  pressed: Boolean,
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  },
+  type: {
+    type: String,
+    default: "button",
+    validator: (e) => e in z
+  },
+  toggle: {
+    type: Boolean,
+    default: !1
+  },
+  modelValue: String,
+  unselectable: { type: Boolean, default: !0 }
+};
+function ge(e, t) {
+  var h;
+  const { group: r, isInGroup: u, getGroupOrLocalRef: o } = ue(ce), { iconPosition: i, icon: a, label: d, pressed: s } = M(e), c = o("modelValue", e, t), n = o("disabled", e), l = o("toggle", e), p = o(
+    "unselectable",
+    e
+  ), y = o("modifiers", e), S = ((h = r == null ? void 0 : r.value) == null ? void 0 : h.multiple) ?? G(!1);
+  return {
+    modelValue: c,
+    disabled: n,
+    toggle: l,
+    isInGroup: u,
+    group: r,
+    modifiers: y,
+    multiple: S,
+    unselectable: p,
+    pressed: s,
+    iconPosition: i,
+    icon: a,
+    label: d
+  };
+}
+const ve = {
+  key: 1,
+  class: "vv-button__label"
+}, pe = {
+  key: 1,
+  class: "vv-button__label"
+}, me = {
+  name: "VvButton"
+}, ke = /* @__PURE__ */ I({
+  ...me,
+  props: de,
+  emits: fe,
+  setup(e, { emit: t }) {
+    const r = e, u = X(), o = K(), i = (u == null ? void 0 : u.name) || te(), {
+      modifiers: a,
+      iconPosition: d,
+      icon: s,
+      label: c,
+      modelValue: n,
+      disabled: l,
+      toggle: p,
+      unselectable: y
+    } = ge(r, t), S = P(N), h = g(() => {
+      switch (!0) {
+        case l.value:
+          return m.button;
+        case r.to !== void 0:
+          return S != null && S.nuxt ? m.nuxtLink : m.routerLink;
+        case r.href !== void 0:
+          return m.a;
+        default:
+          return m.button;
+      }
+    }), D = g(() => p.value ? Array.isArray(n.value) ? F(i, n.value) : V(i, n.value) : r.pressed), { bemCssClasses: Z } = q("vv-button", {
+      modifiers: a,
+      active: r.active,
+      pressed: D,
+      disabled: l,
+      reverse: g(
+        () => [k.right, k.bottom].includes(
+          d.value
+        )
+      ),
+      column: g(
+        () => [k.top, k.bottom].includes(
+          d.value
+        )
+      ),
+      iconOnly: g(
+        () => (s == null ? void 0 : s.value) && !(c != null && c.value) && !o.default
+      )
+    }), x = g(
+      () => typeof (s == null ? void 0 : s.value) == "string" ? { name: s == null ? void 0 : s.value } : s == null ? void 0 : s.value
+    ), H = g(() => {
+      const f = {
+        class: Z.value,
+        "aria-pressed": D.value ? !0 : void 0
+      };
+      switch (h.value) {
+        case m.a:
+          return {
+            ...f,
+            role: "button",
+            href: r.href,
+            target: r.target,
+            rel: r.rel
+          };
+        case m.routerLink:
+        case m.nuxtLink:
+          return {
+            ...f,
+            role: "button",
+            to: r.to,
+            target: r.target
+          };
+        default:
+          return {
+            ...f,
+            type: r.type,
+            disabled: l.value
+          };
+      }
+    }), J = () => {
+      if (p.value) {
+        if (Array.isArray(n.value)) {
+          if (F(i, n.value)) {
+            y.value && (n.value = n.value.filter(
+              (f) => f !== i
+            ));
+            return;
+          }
+          n.value.push(i);
+          return;
+        }
+        if (V(i, n.value) && y.value) {
+          n.value = void 0;
+          return;
+        }
+        n.value = i;
+      }
+    };
+    return (f, ye) => (b(), A(Q(v(h)), C(v(H), { onClickPassive: J }), {
+      default: W(() => [
+        _(f.$slots, "default", {}, () => [
+          f.loading ? _(f.$slots, "loading", { key: 0 }, () => [
+            f.loadingIcon ? (b(), A(E, {
+              key: 0,
+              class: "vv-button__loading-icon",
+              name: f.loadingIcon
+            }, null, 8, ["name"])) : $("", !0),
+            f.loadingLabel ? (b(), O("span", ve, j(f.loadingLabel), 1)) : $("", !0)
+          ]) : (b(), O(Y, { key: 1 }, [
+            _(f.$slots, "before"),
+            v(s) ? (b(), A(E, C({
+              key: 0,
+              class: "vv-button__icon"
+            }, v(x)), null, 16)) : $("", !0),
+            v(c) ? (b(), O("span", pe, [
+              _(f.$slots, "label", {}, () => [
+                ee(j(v(c)), 1)
+              ])
+            ])) : $("", !0),
+            _(f.$slots, "after")
+          ], 64))
+        ])
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  ke as default
+};

package/dist/components/VvButton/VvButton.umd.js

@@ -0,0 +1 @@
+(function(e,_){typeof exports=="object"&&typeof module<"u"?module.exports=_(require("vue"),require("nanoid"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","nanoid","@iconify/vue"],_):(e=typeof globalThis<"u"?globalThis:e||self,e.VvButton=_(e.vue,e.nanoid,e.vue$1))})(this,function(e,_,b){"use strict";function C(t,n,o){return o?B(t,o)===B(n,o):w(t,n)}function w(t,n){if(t===n)return!0;if(t&&n&&typeof t=="object"&&typeof n=="object"){const o=Array.isArray(t),u=Array.isArray(n);let s,l,c;if(o&&u){if(l=t.length,l!=n.length)return!1;for(s=l;s--!==0;)if(!w(t[s],n[s]))return!1;return!0}if(o!=u)return!1;const p=t instanceof Date,i=n instanceof Date;if(p!=i)return!1;if(p&&i)return t.getTime()==n.getTime();const f=t instanceof RegExp,r=n instanceof RegExp;if(f!=r)return!1;if(f&&r)return t.toString()==n.toString();const a=Object.keys(t);if(l=a.length,l!==Object.keys(n).length)return!1;for(s=l;s--!==0;)if(!Object.prototype.hasOwnProperty.call(n,a[s]))return!1;for(s=l;s--!==0;)if(c=a[s],!w(t[c],n[c]))return!1;return!0}return t!==t&&n!==n}function B(t,n){if(t&&Object.keys(t).length&&n){if(n.indexOf(".")===-1)return t[n];{const o=n.split(".");let u=t;for(let s=0,l=o.length;s<l;++s){if(t==null)return null;u=u[o[s]]}return u}}else return null}function V(t,n){if(t!=null&&n&&n.length){for(const o of n)if(C(t,o))return!0}return!1}function E(t){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(t))}function v(t){var n,o;if(t)return(o=(n=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:n.join("-"))==null?void 0:o.toLowerCase()}const A="ds";function $(t,n){const o={[`${t}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((s,l)=>{const c=e.unref(n[l])||!1;if(!c)return s;if(l==="modifiers"){const p=Array.isArray(c)?c:c.split(" ");return{...s,...p.reduce((i,f)=>({...i,[`${t}--${v(f)}`]:!0}),{})}}else return{...s,[`${t}--${v(l)}`]:c}},o)||{})}}const D={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},R={name:"VvIcon"},O=e.defineComponent({...R,props:D,setup(t){const n=t,o=e.ref(!0),{modifiers:u}=e.toRefs(n),s=e.inject(A),{bemCssClasses:l}=$("vv-icon",{modifiers:u}),c=e.computed(()=>n.provider||(s==null?void 0:s.provider)),p=e.computed(()=>{const r=n.name??"",a=`@${c.value}:${n.prefix}:${n.name}`;return b.iconExists(r)?r:b.iconExists(a)?a:(s==null?void 0:s.iconsCollections.find(m=>{const y=`@${c.value}:${m.prefix}:${r}`;if(b.iconExists(y))return y}))||r});function i(r){let a=null;if(typeof window>"u"){const{JSDOM:h}=require("jsdom");a=new h().window}return(a?new a.DOMParser:new window.DOMParser).parseFromString(r,"text/html").querySelector("svg")}function f(r){const a=i(r),m=(a==null?void 0:a.innerHTML.trim())||"";a&&m&&b.addIcon(`@${c.value}:${n.prefix}:${n.name}`,{body:m,height:a.viewBox.baseVal.height,width:a.viewBox.baseVal.width})}return s&&(n.src&&!b.iconExists(`@${c.value}:${n.prefix}:${n.name}`)?(o.value=!1,s.fetchIcon(n.src).then(r=>{r&&(f(r),o.value=!0)}).catch(r=>{throw new Error(`During fetch icon: ${r==null?void 0:r.message}`)})):n.svg&&f(n.svg)),(r,a)=>o.value?(e.openBlock(),e.createBlock(e.unref(b.Icon),e.mergeProps({key:0,class:e.unref(l)},{inline:r.inline,width:r.width,height:r.height,horizontalFlip:r.horizontalFlip,verticalFlip:r.verticalFlip,flip:r.flip,rotate:r.rotate,color:r.color,onLoad:r.onLoad,icon:e.unref(p)}),null,16,["class"])):e.createCommentVNode("",!0)}}),F={disabled:Boolean},I={modifiers:[String,Array]};function N(t){const n=e.inject(t,void 0),o=e.computed(()=>!E(n));function u(s,l,c){if(n!=null&&n.value){const i=e.unref(n.value)[s];return e.computed({get(){return i==null?void 0:i.value},set(f){i.value=f}})}const p=e.toRef(l,s);return e.computed({get(){return p.value},set(i){c&&c(`update:${s}`,i)}})}return{group:n,isInGroup:o,getGroupOrLocalRef:u}}const q="VV_BUTTON_GROUP";var S=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(S||{}),P=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(P||{}),g=(t=>(t.nuxtLink="nuxt-link",t.routerLink="router-link",t.a="a",t.button="button",t))(g||{}),L=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(L||{});const G=["update:modelValue"],x={...I,...F,icon:{type:[String,Object],default:""},iconPosition:{type:String,default:"left",validator:t=>t in S},label:[String,Number],loading:Boolean,loadingIcon:{type:String,default:"eos-icons:bubble-loading"},loadingLabel:{type:String,default:"Loading..."},to:{type:[String,Object]},href:String,target:{type:String,validator:t=>t in L},active:Boolean,pressed:Boolean,rel:{type:String,default:"noopener noreferrer"},type:{type:String,default:"button",validator:t=>t in P},toggle:{type:Boolean,default:!1},modelValue:String,unselectable:{type:Boolean,default:!0}};function M(t,n){var h;const{group:o,isInGroup:u,getGroupOrLocalRef:s}=N(q),{iconPosition:l,icon:c,label:p,pressed:i}=e.toRefs(t),f=s("modelValue",t,n),r=s("disabled",t),a=s("toggle",t),m=s("unselectable",t),y=s("modifiers",t),k=((h=o==null?void 0:o.value)==null?void 0:h.multiple)??e.ref(!1);return{modelValue:f,disabled:r,toggle:a,isInGroup:u,group:o,modifiers:y,multiple:k,unselectable:m,pressed:i,iconPosition:l,icon:c,label:p}}const z={key:1,class:"vv-button__label"},U={key:1,class:"vv-button__label"},Z={name:"VvButton"};return e.defineComponent({...Z,props:x,emits:G,setup(t,{emit:n}){const o=t,u=e.useAttrs(),s=e.useSlots(),l=(u==null?void 0:u.name)||_.nanoid(),{modifiers:c,iconPosition:p,icon:i,label:f,modelValue:r,disabled:a,toggle:m,unselectable:y}=M(o,n),k=e.inject(A),h=e.computed(()=>{switch(!0){case a.value:return g.button;case o.to!==void 0:return k!=null&&k.nuxt?g.nuxtLink:g.routerLink;case o.href!==void 0:return g.a;default:return g.button}}),j=e.computed(()=>m.value?Array.isArray(r.value)?V(l,r.value):C(l,r.value):o.pressed),{bemCssClasses:T}=$("vv-button",{modifiers:c,active:o.active,pressed:j,disabled:a,reverse:e.computed(()=>[S.right,S.bottom].includes(p.value)),column:e.computed(()=>[S.top,S.bottom].includes(p.value)),iconOnly:e.computed(()=>(i==null?void 0:i.value)&&!(f!=null&&f.value)&&!s.default)}),H=e.computed(()=>typeof(i==null?void 0:i.value)=="string"?{name:i==null?void 0:i.value}:i==null?void 0:i.value),J=e.computed(()=>{const d={class:T.value,"aria-pressed":j.value?!0:void 0};switch(h.value){case g.a:return{...d,role:"button",href:o.href,target:o.target,rel:o.rel};case g.routerLink:case g.nuxtLink:return{...d,role:"button",to:o.to,target:o.target};default:return{...d,type:o.type,disabled:a.value}}}),X=()=>{if(m.value){if(Array.isArray(r.value)){if(V(l,r.value)){y.value&&(r.value=r.value.filter(d=>d!==l));return}r.value.push(l);return}if(C(l,r.value)&&y.value){r.value=void 0;return}r.value=l}};return(d,Q)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(h)),e.mergeProps(e.unref(J),{onClickPassive:X}),{default:e.withCtx(()=>[e.renderSlot(d.$slots,"default",{},()=>[d.loading?e.renderSlot(d.$slots,"loading",{key:0},()=>[d.loadingIcon?(e.openBlock(),e.createBlock(O,{key:0,class:"vv-button__loading-icon",name:d.loadingIcon},null,8,["name"])):e.createCommentVNode("",!0),d.loadingLabel?(e.openBlock(),e.createElementBlock("span",z,e.toDisplayString(d.loadingLabel),1)):e.createCommentVNode("",!0)]):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(d.$slots,"before"),e.unref(i)?(e.openBlock(),e.createBlock(O,e.mergeProps({key:0,class:"vv-button__icon"},e.unref(H)),null,16)):e.createCommentVNode("",!0),e.unref(f)?(e.openBlock(),e.createElementBlock("span",U,[e.renderSlot(d.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(f)),1)])])):e.createCommentVNode("",!0),e.renderSlot(d.$slots,"after")],64))])]),_:3},16))}})});