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

package/dist/components/VvAlertGroup/VvAlertGroup.es.js

@@ -0,0 +1,799 @@
+import { provide, computed, unref, inject, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, withModifiers, createElementBlock, normalizeProps, guardReactiveProps, createElementVNode, renderSlot, toDisplayString, createTextVNode, createVNode, TransitionGroup, withCtx, Fragment, renderList } from "vue";
+import mitt from "mitt";
+import { iconExists, Icon, addIcon } from "@iconify/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 INJECTION_KEY_VOLVER = Symbol.for("volver");
+const INJECTION_KEY_ALERT_GROUP = Symbol.for(
+  "alertGroup"
+);
+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]
+};
+const IconProps = {
+  /**
+   * 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)
+  }
+};
+const IdProps = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+({
+  /**
+   * 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
+  },
+  /**
+   * Keep open dropdown on click outside
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 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)
+  }
+});
+function useProvideAlertGroup({
+  name
+}) {
+  const bus = mitt();
+  provide(INJECTION_KEY_ALERT_GROUP, {
+    name,
+    bus
+  });
+  return bus;
+}
+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 VvAlertGroupProps = {
+  ...ModifiersProps,
+  name: {
+    type: String,
+    required: true
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  stack: {
+    type: Boolean,
+    default: false
+  },
+  reverse: {
+    type: Boolean,
+    default: false
+  },
+  inline: {
+    type: String,
+    default: void 0
+  },
+  block: {
+    type: String,
+    default: void 0
+  },
+  position: {
+    type: String,
+    default: void 0
+  },
+  transition: {
+    type: String,
+    default: void 0
+  }
+};
+const VvAlertGroupEvents = ["close"];
+const useVvAlertGroup = (props, emit) => {
+  const bus = useProvideAlertGroup({ name: computed(() => props.name) });
+  if (props.block && !props.inline || !props.block && props.inline) {
+    console.warn(
+      `[VvAlertGroup]: block and inline props must coexist at the same time.`
+    );
+  }
+  const hasClass = computed(() => {
+    const toReturn = [
+      useModifiers(
+        "vv-alert-group",
+        computed(() => props.modifiers),
+        computed(() => ({
+          stack: props.stack,
+          reverse: props.reverse,
+          absolute: props.position === "absolute",
+          fixed: props.position === "fixed"
+        }))
+      ).value
+    ];
+    if (props.inline && props.block) {
+      toReturn.push(`vv-alert-group--${props.block}-${props.inline}`);
+    }
+    return toReturn;
+  });
+  const hasTransition = computed(() => {
+    if (props.transition) {
+      return props.transition;
+    }
+    if (!props.position) {
+      return "vv-alert--fade";
+    }
+    if (props.inline === "start") {
+      return "vv-alert--fade-inline-start";
+    }
+    if (props.inline === "end") {
+      return "vv-alert--fade-inline-end";
+    }
+    if (props.block === "top") {
+      return "vv-alert--fade-block-top";
+    }
+    if (props.block === "bottom") {
+      return "vv-alert--fade-block-bottom";
+    }
+    return "vv-alert--fade";
+  });
+  bus.on("close", (id) => {
+    emit("close", id);
+  });
+  return {
+    hasTransition,
+    hasProps: computed(() => ({
+      class: hasClass.value
+    }))
+  };
+};
+const VvIconProps = {
+  /**
+   * Color
+   */
+  color: String,
+  /**
+   * Width
+   */
+  width: {
+    type: [String, Number]
+  },
+  /**
+   * Height
+   */
+  height: {
+    type: [String, Number]
+  },
+  /**
+   * Icon name
+   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
+   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
+  name: {
+    type: String,
+    required: true
+  },
+  /**
+   * By default 'vv'
+   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
+   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
+  provider: {
+    type: String
+  },
+  /**
+   * The name of icon set.
+   * Icon default options prefix: simple | normal | detailed
+   */
+  prefix: {
+    type: String,
+    default: "normal"
+  },
+  /**
+   * Url remote SVG icon
+   */
+  src: String,
+  /**
+   * Horizontal flip
+   */
+  horizontalFlip: Boolean,
+  /**
+   * Vertical flip
+   */
+  verticalFlip: Boolean,
+  /**
+   * String alternative to "horizontalFlip" and "verticalFlip".
+   * Example: https://docs.iconify.design/icon-components/vue/transform.html
+   */
+  flip: String,
+  /**
+   * Icon render mode
+   * 'style' = 'bg' or 'mask', depending on icon content
+   * 'bg' = span with style using `background`
+   * 'mask' = span with style using `mask`
+   * 'svg' = svg
+   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+   */
+  mode: String,
+  /**
+   * Toggles inline or block mode
+   * Example https://docs.iconify.design/icon-components/vue/inline.html
+   */
+  inline: Boolean,
+  /**
+   * rotates icon
+   * Example https://docs.iconify.design/icon-components/vue/transform.html
+   */
+  rotate: [Number, String],
+  /**
+   * A callback that is called when icon data has been loaded
+   */
+  onLoad: Function,
+  /**
+   * SVG icon string
+   */
+  svg: String,
+  /**
+   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
+   * @values string | string[]
+   */
+  modifiers: {
+    type: [String, Array]
+  }
+};
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+const __default__$2 = {
+  name: "VvIcon"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  props: VvIconProps,
+  setup(__props) {
+    const props = __props;
+    const hasRotate = computed(() => {
+      if (typeof props.rotate === "string") {
+        return parseFloat(props.rotate);
+      }
+      return props.rotate;
+    });
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
+    });
+    const icon = computed(() => {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconExists(iconName)) {
+        return iconName;
+      }
+      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconExists(icon2);
+        }
+      );
+      if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
+      }
+      return name;
+    });
+    function getSvgContent(svg) {
+      let dom;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
+      }
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
+    }
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
+      }
+    }
+    if (volver) {
+      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      }
+    }
+    if (props.svg) {
+      addIconFromSvg(props.svg);
+    }
+    return (_ctx, _cache) => {
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: unref(hasRotate),
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("", true);
+    };
+  }
+});
+function useInjectedAlertGroup() {
+  return inject(INJECTION_KEY_ALERT_GROUP, {});
+}
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const VvAlertProps = {
+  ...IdProps,
+  ...ModifiersProps,
+  ...IconProps,
+  /**
+   * The alert is dismissable
+   * @default false
+   * @type boolean
+   */
+  dismissable: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * The alert auto close after the specified time in milliseconds
+   * @default 0
+   * @type number
+   */
+  autoClose: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * The alert close label
+   * @default 'Close'
+   * @type string
+   */
+  closeLabel: {
+    type: String,
+    default: "Close"
+  },
+  /**
+   * The alert title
+   * @default ''
+   * @type string
+   */
+  title: {
+    type: String,
+    default: ""
+  },
+  /**
+   * The alert content
+   * @default ''
+   * @type string
+   */
+  content: {
+    type: String,
+    default: ""
+  },
+  /**
+   * The alert footer
+   * @default ''
+   * @type string
+   */
+  footer: {
+    type: String,
+    default: ""
+  },
+  /**
+   * The alert role
+   * @default 'alert'
+   * @type string
+   * @values 'alert', 'alertdialog'
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
+   */
+  role: {
+    type: String,
+    default: "alert"
+  }
+};
+const VvAlertEvents = ["close"];
+const useVvAlert = (props, emit) => {
+  const { bus } = useInjectedAlertGroup();
+  const hasId = useUniqueId(computed(() => props.id));
+  const hasTitleId = computed(() => `${hasId.value}-title`);
+  const hasIcon = computed(
+    () => typeof props.icon === "string" ? { name: props.icon } : props.icon
+  );
+  const hasClass = useModifiers(
+    "vv-alert",
+    computed(() => props.modifiers),
+    computed(() => ({
+      dismissable: props.autoClose > 0 || props.dismissable,
+      "auto-close": props.autoClose > 0,
+      hover: isMouseover.value
+    }))
+  );
+  const hasStyle = computed(() => ({
+    "--alert-duration": `${props.autoClose}ms`
+  }));
+  const close = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    emit("close", hasId.value);
+    bus == null ? void 0 : bus.emit("close", hasId.value);
+  };
+  let timeout;
+  watch(
+    () => props.autoClose,
+    (value) => {
+      if (value > 0) {
+        timeout = setTimeout(close, value);
+        return;
+      }
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  const isMouseover = ref(false);
+  const onMouseover = withModifiers(() => {
+    isMouseover.value = true;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  }, ["passive"]);
+  const onMouseleave = withModifiers(() => {
+    isMouseover.value = false;
+    if (props.autoClose > 0) {
+      timeout = setTimeout(close, props.autoClose);
+    }
+  }, ["passive"]);
+  return {
+    close,
+    hasIcon,
+    hasTitleId,
+    hasProps: computed(() => ({
+      onMouseover,
+      onMouseleave,
+      class: hasClass.value,
+      style: hasStyle.value,
+      role: props.role,
+      "aria-labelledby": hasTitleId.value
+    }))
+  };
+};
+const _hoisted_1 = { class: "vv-alert__header" };
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
+const _hoisted_5 = [
+  _hoisted_4
+];
+const _hoisted_6 = {
+  key: 0,
+  class: "vv-alert__content"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "vv-alert__footer"
+};
+const __default__$1 = {
+  name: "VvAlert"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvAlertProps,
+  emits: VvAlertEvents,
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit);
+    __expose({ close });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(hasProps))), [
+        createElementVNode("div", _hoisted_1, [
+          unref(hasIcon) ? (openBlock(), createBlock(_sfc_main$2, mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }), null, 16)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "header", {}, () => [
+            renderSlot(_ctx.$slots, "title::before"),
+            createElementVNode("strong", {
+              id: unref(hasTitleId),
+              class: "vv-alert__title"
+            }, toDisplayString(_ctx.title), 9, _hoisted_2),
+            renderSlot(_ctx.$slots, "title::after")
+          ]),
+          _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("button", {
+            key: 1,
+            class: "vv-alert__close",
+            type: "button",
+            "aria-label": _ctx.closeLabel,
+            onClick: _cache[0] || (_cache[0] = withModifiers(
+              //@ts-ignore
+              (...args) => unref(close) && unref(close)(...args),
+              ["stop"]
+            ))
+          }, _hoisted_5, 8, _hoisted_3)) : createCommentVNode("", true)
+        ]),
+        _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.content), 1)
+          ])
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          renderSlot(_ctx.$slots, "footer", {}, () => [
+            createTextVNode(toDisplayString(_ctx.footer), 1)
+          ])
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const __default__ = {
+  name: "VvAlertGroup"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvAlertGroupProps,
+  emits: VvAlertGroupEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const { hasProps, hasTransition } = useVvAlertGroup(props, emit);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(hasProps))), [
+        renderSlot(_ctx.$slots, "before"),
+        createVNode(TransitionGroup, {
+          tag: "div",
+          role: "group",
+          name: unref(hasTransition),
+          class: "vv-alert-group__list"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+                return openBlock(), createBlock(_sfc_main$1, mergeProps(item, {
+                  key: item.id
+                }), null, 16);
+              }), 128))
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"]),
+        renderSlot(_ctx.$slots, "after")
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};