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

package/dist/directives/index.es.js

@@ -0,0 +1,288 @@
+import { computed, unref, defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, h, render } 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/)
+   */
+  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 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 VvTooltipProps = {
+  ...ModifiersProps,
+  /**
+   * Define the tooltip position
+   * @default Side.bottom
+   */
+  position: {
+    type: String,
+    default: Side.bottom
+  },
+  value: {
+    type: 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 _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VvTooltip",
+  props: VvTooltipProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-tooltip",
+      modifiers,
+      computed(() => ({
+        [props.position]: true
+      }))
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: "tooltip",
+        inert: ""
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ])
+      ], 2);
+    };
+  }
+});
+const tooltip = {
+  beforeMount(el, binding) {
+    const tooltip2 = h(_sfc_main, {
+      value: binding.value,
+      position: binding.arg
+    });
+    render(tooltip2, el);
+  }
+};
+const index = {
+  tooltip
+};
+export {
+  index as default
+};

package/dist/directives/index.umd.js

@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue")):"function"==typeof define&&define.amd?define(["vue"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).directives=o(e.vue)}(this,(function(e){"use strict";var o=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(o||{}),t=(e=>(e.before="before",e.after="after",e))(t||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{});Boolean,Boolean,Boolean;const r={modifiers:[String,Array]};t.before,o.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,n.button;const l={...r,position:{type:String,default:o.bottom},value:{type:String}};const i=e.defineComponent({__name:"VvTooltip",props:l,setup(o){const t=o,{modifiers:n}=e.toRefs(t),r=function(o,t,n){return e.computed((()=>{const r={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${o}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((t=>{r[`${o}--${t}`]=e.unref(n.value[t])})),r}))}("vv-tooltip",n,e.computed((()=>({[t.position]:!0}))));return(o,t)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(e.unref(r)),role:"tooltip",inert:""},[e.renderSlot(o.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(o.value),1)]))],2))}});return{tooltip:{beforeMount(o,t){const n=e.h(i,{value:t.value,position:t.arg});e.render(n,o)}}}}));

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

@@ -0,0 +1,285 @@
+import { computed, unref, defineComponent, toRefs, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, h, render } 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/)
+   */
+  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 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 VvTooltipProps = {
+  ...ModifiersProps,
+  /**
+   * Define the tooltip position
+   * @default Side.bottom
+   */
+  position: {
+    type: String,
+    default: Side.bottom
+  },
+  value: {
+    type: 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 _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VvTooltip",
+  props: VvTooltipProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-tooltip",
+      modifiers,
+      computed(() => ({
+        [props.position]: true
+      }))
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: "tooltip",
+        inert: ""
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ])
+      ], 2);
+    };
+  }
+});
+const tooltip = {
+  beforeMount(el, binding) {
+    const tooltip2 = h(_sfc_main, {
+      value: binding.value,
+      position: binding.arg
+    });
+    render(tooltip2, el);
+  }
+};
+export {
+  tooltip as default
+};

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

@@ -0,0 +1 @@
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue")):"function"==typeof define&&define.amd?define(["vue"],o):(e="undefined"!=typeof globalThis?globalThis:e||self)["v-tooltip"]=o(e.vue)}(this,(function(e){"use strict";var o=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(o||{}),t=(e=>(e.before="before",e.after="after",e))(t||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{});Boolean,Boolean,Boolean;const r={modifiers:[String,Array]};t.before,o.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,n.button;const l={...r,position:{type:String,default:o.bottom},value:{type:String}};const i=e.defineComponent({__name:"VvTooltip",props:l,setup(o){const t=o,{modifiers:n}=e.toRefs(t),r=function(o,t,n){return e.computed((()=>{const r={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${o}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((t=>{r[`${o}--${t}`]=e.unref(n.value[t])})),r}))}("vv-tooltip",n,e.computed((()=>({[t.position]:!0}))));return(o,t)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(e.unref(r)),role:"tooltip",inert:""},[e.renderSlot(o.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(o.value),1)]))],2))}});return{beforeMount(o,t){const n=e.h(i,{value:t.value,position:t.arg});e.render(n,o)}}}));

package/dist/icons.es.js

@@ -1,5 +1,6 @@
-const r = "normal";
-const t = {
+const prefix$2 = "normal";
+const lastModified$2 = 1678182049;
+const icons$3 = {
   add: {
     body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 12h16m-8-8v16"/>'
   },
@@ -602,13 +603,19 @@ const t = {
   "zoom-out": {
     body: '<g stroke="currentColor" stroke-miterlimit="10" stroke-width="2"><path fill="currentColor" stroke-linecap="round" d="m15 15 6 6"/><g fill="none" transform="translate(3 3)"><circle cx="7" cy="7" r="7" stroke="none"/><circle cx="7" cy="7" r="6"/></g><path fill="none" stroke-linecap="round" d="M8 10h4"/></g>'
   }
-}, o = 24, e = 24, l = {
-  prefix: r,
-  lastModified: 1675271672,
-  icons: t,
-  width: o,
-  height: e
-}, n = "detailed", i = 1675271672, a = {
+};
+const width$1 = 24;
+const height$1 = 24;
+const normal = {
+  prefix: prefix$2,
+  lastModified: lastModified$2,
+  icons: icons$3,
+  width: width$1,
+  height: height$1
+};
+const prefix$1 = "detailed";
+const lastModified$1 = 1678182049;
+const icons$2 = {
   add: {
     body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 15.999h24m-12-12v24"/>'
   },
@@ -1209,13 +1216,19 @@ const t = {
   "zoom-out": {
     body: '<g stroke="currentColor" stroke-miterlimit="10" stroke-width="2"><path fill="currentColor" stroke-linecap="round" d="m18 18 10 10"/><g fill="none" transform="translate(3 3)"><circle cx="9" cy="9" r="9" stroke="none"/><circle cx="9" cy="9" r="8"/></g></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M9 11.999h6"/>'
   }
-}, c = 32, h = 32, s = {
-  prefix: n,
-  lastModified: i,
-  icons: a,
-  width: c,
-  height: h
-}, d = "simple", k = 1675271672, m = {
+};
+const width = 32;
+const height = 32;
+const detailed = {
+  prefix: prefix$1,
+  lastModified: lastModified$1,
+  icons: icons$2,
+  width,
+  height
+};
+const prefix = "simple";
+const lastModified = 1678182049;
+const icons$1 = {
   add: {
     body: '<path fill="none" stroke="currentColor" stroke-linecap="round" d="M.5 8h15M8 .5v15"/>'
   },
@@ -1881,12 +1894,14 @@ const t = {
   "zoom-out": {
     body: '<g stroke="currentColor" stroke-miterlimit="10"><path fill="currentColor" stroke-linecap="round" d="m9 9 6 6"/><g fill="none"><circle cx="5.5" cy="5.5" r="5.5" stroke="none"/><circle cx="5.5" cy="5.5" r="5"/></g></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" d="M2.5 5.5h6"/>'
   }
-}, g = {
-  prefix: d,
-  lastModified: k,
-  icons: m
-}, u = [l, s, g];
+};
+const simple = {
+  prefix,
+  lastModified,
+  icons: icons$1
+};
+const icons = [normal, detailed, simple];
 export {
-  u as default,
-  l as normal
+  icons as default,
+  normal
 };