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

package/dist/directives/index.es.js

@@ -1,6 +1,41 @@
-import { computed as p, unref as i, defineComponent as b, toRefs as d, openBlock as v, createElementBlock as y, normalizeClass as g, renderSlot as S, createTextVNode as j, toDisplayString as O, h as B, render as _ } from "vue";
-var l = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(l || {}), f = /* @__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))(f || {}), s = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(s || {}), u = /* @__PURE__ */ ((t) => (t.button = "button", t.submit = "submit", t.reset = "reset", t))(u || {}), c = /* @__PURE__ */ ((t) => (t._blank = "_blank", t._self = "_self", t._parent = "_parent", t._top = "_top", t))(c || {});
-const m = {
+import { computed, unref, defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, h, render, ref } from "vue";
+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/)
@@ -17,7 +52,7 @@ const m = {
    */
   target: {
     type: String,
-    validator: (t) => Object.values(c).includes(t)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -26,103 +61,277 @@ const m = {
     type: String,
     default: "noopener noreferrer"
   }
-}, h = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, E = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, k = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, C = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, $ = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
 };
-s.before;
-l.bottom;
 ({
-  ...h,
-  ...C,
-  ...k,
-  ...E,
-  ...m,
+  /**
+   * 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: u.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-const N = {
-  ...$,
+const VvTooltipProps = {
+  ...ModifiersProps,
   /**
    * Define the tooltip position
    * @default Side.bottom
    */
   position: {
     type: String,
-    default: l.bottom
+    default: Side.bottom
   },
   value: {
     type: String
   }
 };
-function M(t, e, o) {
-  return p(() => {
-    const a = {
-      [t]: !0
-    }, r = typeof (e == null ? void 0 : e.value) == "string" ? e.value.split(" ") : e == null ? void 0 : e.value;
-    return r && Array.isArray(r) && r.forEach((n) => {
-      a[`${t}--${n}`] = !0;
-    }), o && Object.keys(o.value).forEach((n) => {
-      a[`${t}--${n}`] = i(o.value[n]);
-    }), a;
+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 V = /* @__PURE__ */ b({
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "VvTooltip",
-  props: N,
-  setup(t) {
-    const e = t, { modifiers: o } = d(e), a = M(
+  props: VvTooltipProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
       "vv-tooltip",
-      o,
-      p(() => ({
-        [e.position]: !0
+      modifiers,
+      computed(() => ({
+        [props.position]: true
       }))
     );
-    return (r, n) => (v(), y("span", {
-      class: g(i(a)),
-      role: "tooltip",
-      inert: ""
-    }, [
-      S(r.$slots, "default", {}, () => [
-        j(O(r.value), 1)
-      ])
-    ], 2));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: "tooltip",
+        inert: ""
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ])
+      ], 2);
+    };
   }
-}), z = {
-  beforeMount(t, e) {
-    const o = B(V, {
-      value: e.value,
-      position: e.arg
+});
+const tooltip = {
+  beforeMount(el, binding) {
+    const tooltip2 = h(_sfc_main, {
+      value: binding.value,
+      position: binding.arg
     });
-    _(o, t);
+    render(tooltip2, el);
   }
-}, D = {
-  tooltip: z
+};
+const contextmenu = {
+  beforeUpdate(el, binding) {
+    var _a, _b, _c;
+    const clientX = ref(0);
+    const clientY = ref(0);
+    const virtualEl = {
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: clientX.value,
+          y: clientY.value,
+          top: clientY.value,
+          left: clientX.value,
+          right: clientX.value,
+          bottom: clientY.value
+        };
+      }
+    };
+    if ((_a = binding.value) == null ? void 0 : _a.init) {
+      (_c = (_b = binding.value).init) == null ? void 0 : _c.call(_b, virtualEl);
+    }
+    el.addEventListener(
+      "contextmenu",
+      function(ev) {
+        var _a2, _b2, _c2;
+        if ((_a2 = binding.value) == null ? void 0 : _a2.show) {
+          ev.preventDefault();
+          clientX.value = ev.clientX;
+          clientY.value = ev.clientY;
+          (_c2 = (_b2 = binding.value).show) == null ? void 0 : _c2.call(_b2);
+          return false;
+        }
+      },
+      false
+    );
+  }
+};
+const index = {
+  tooltip,
+  contextmenu
 };
 export {
-  D as default
+  index as default
 };

package/dist/directives/index.umd.js

@@ -1 +1 @@
-(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.directives=r(e.vue))})(this,function(e){"use strict";var r=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(r||{}),u=(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))(u||{}),i=(t=>(t.before="before",t.after="after",t))(i||{}),p=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(p||{}),f=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(f||{});const d={to:{type:[String,Object]},href:String,target:{type:String,validator:t=>Object.values(f).includes(t)},rel:{type:String,default:"noopener noreferrer"}},c={disabled:Boolean},b={active:Boolean},y={pressed:Boolean},g={label:[String,Number]},v={modifiers:[String,Array]};i.before,r.bottom,{...c,...g,...y,...b,...d,type:p.button};const S={...v,position:{type:String,default:r.bottom},value:{type:String}};function j(t,o,n){return e.computed(()=>{const s={[t]:!0},a=typeof(o==null?void 0:o.value)=="string"?o.value.split(" "):o==null?void 0:o.value;return a&&Array.isArray(a)&&a.forEach(l=>{s[`${t}--${l}`]=!0}),n&&Object.keys(n.value).forEach(l=>{s[`${t}--${l}`]=e.unref(n.value[l])}),s})}const m=e.defineComponent({__name:"VvTooltip",props:S,setup(t){const o=t,{modifiers:n}=e.toRefs(o),s=j("vv-tooltip",n,e.computed(()=>({[o.position]:!0})));return(a,l)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(e.unref(s)),role:"tooltip",inert:""},[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(a.value),1)])],2))}});return{tooltip:{beforeMount(t,o){const n=e.h(m,{value:o.value,position:o.arg});e.render(n,t)}}}});
+!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).directives=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||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{});Boolean,Boolean,Boolean;const l={modifiers:[String,Array]};o.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,n.button;const i={...l,position:{type:String,default:t.bottom},value:{type:String}};const r=e.defineComponent({__name:"VvTooltip",props:i,setup(t){const o=t,{modifiers:n}=e.toRefs(o),l=function(t,o,n){return e.computed((()=>{const l={[t]:!0},i="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return i&&Array.isArray(i)&&i.forEach((e=>{e&&(l[`${t}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((o=>{l[`${t}--${o}`]=e.unref(n.value[o])})),l}))}("vv-tooltip",n,e.computed((()=>({[o.position]:!0}))));return(t,o)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(e.unref(l)),role:"tooltip",inert:""},[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.value),1)]))],2))}});return{tooltip:{beforeMount(t,o){const n=e.h(r,{value:o.value,position:o.arg});e.render(n,t)}},contextmenu:{beforeUpdate(t,o){var n,l,i;const r=e.ref(0),u=e.ref(0),a={getBoundingClientRect:()=>({width:0,height:0,x:r.value,y:u.value,top:u.value,left:r.value,right:r.value,bottom:u.value})};(null==(n=o.value)?void 0:n.init)&&(null==(i=(l=o.value).init)||i.call(l,a)),t.addEventListener("contextmenu",(function(e){var t,n,l;if(null==(t=o.value)?void 0:t.show)return e.preventDefault(),r.value=e.clientX,u.value=e.clientY,null==(l=(n=o.value).show)||l.call(n),!1}),!1)}}}}));

package/dist/directives/v-contextmenu.d.ts

@@ -0,0 +1,3 @@
+import type { Directive } from 'vue';
+declare const contextmenu: Directive;
+export default contextmenu;

package/dist/directives/v-contextmenu.es.js

@@ -0,0 +1,42 @@
+import { ref } from "vue";
+const contextmenu = {
+  beforeUpdate(el, binding) {
+    var _a, _b, _c;
+    const clientX = ref(0);
+    const clientY = ref(0);
+    const virtualEl = {
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: clientX.value,
+          y: clientY.value,
+          top: clientY.value,
+          left: clientX.value,
+          right: clientX.value,
+          bottom: clientY.value
+        };
+      }
+    };
+    if ((_a = binding.value) == null ? void 0 : _a.init) {
+      (_c = (_b = binding.value).init) == null ? void 0 : _c.call(_b, virtualEl);
+    }
+    el.addEventListener(
+      "contextmenu",
+      function(ev) {
+        var _a2, _b2, _c2;
+        if ((_a2 = binding.value) == null ? void 0 : _a2.show) {
+          ev.preventDefault();
+          clientX.value = ev.clientX;
+          clientY.value = ev.clientY;
+          (_c2 = (_b2 = binding.value).show) == null ? void 0 : _c2.call(_b2);
+          return false;
+        }
+      },
+      false
+    );
+  }
+};
+export {
+  contextmenu as default
+};

package/dist/directives/v-contextmenu.umd.js

@@ -0,0 +1 @@
+!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)["v-contextmenu"]=t(e.vue)}(this,(function(e){"use strict";return{beforeUpdate(t,l){var n,u,i;const o=e.ref(0),a=e.ref(0),v={getBoundingClientRect:()=>({width:0,height:0,x:o.value,y:a.value,top:a.value,left:o.value,right:o.value,bottom:a.value})};(null==(n=l.value)?void 0:n.init)&&(null==(i=(u=l.value).init)||i.call(u,v)),t.addEventListener("contextmenu",(function(e){var t,n,u;if(null==(t=l.value)?void 0:t.show)return e.preventDefault(),o.value=e.clientX,a.value=e.clientY,null==(u=(n=l.value).show)||u.call(n),!1}),!1)}}}));