maz-ui 3.22.4 → 3.23.1

package/components/chunks/MazInputTags-7a463b81.mjs

@@ -1,526 +0,0 @@
-import "../assets/MazInputTags.css";
-import { computed, defineComponent, defineAsyncComponent, ref, getCurrentInstance, onMounted, useSlots, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createVNode, unref, createCommentVNode, withDirectives, mergeProps, toHandlers, vModelDynamic, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, withKeys } from "vue";
-function debounce(fn, delay) {
-  let timeout;
-  return function(...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      fn.apply(this, args);
-    }, delay);
-  };
-}
-const useInstanceUniqId = ({
-  componentName,
-  instance,
-  providedId
-}) => {
-  return computed(() => providedId ?? `${componentName}-${instance == null ? void 0 : instance.uid}`);
-};
-const _hoisted_1$1 = {
-  key: 0,
-  class: "m-input-wrapper-left"
-};
-const _hoisted_2$1 = { class: "m-input-wrapper-input" };
-const _hoisted_3$1 = ["id", "type", "name", "placeholder", "aria-label", "disabled", "readonly", "required"];
-const _hoisted_4 = { key: 0 };
-const _hoisted_5 = {
-  key: 1,
-  class: "m-input-wrapper-right"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "MazInput",
-  props: {
-    style: { type: [String, Array, Object], default: void 0 },
-    class: { type: String, default: void 0 },
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: void 0
-    },
-    placeholder: { type: String, default: void 0 },
-    color: {
-      type: String,
-      default: "primary"
-    },
-    label: { type: String, default: void 0 },
-    name: { type: String, default: "input" },
-    type: {
-      type: String,
-      default: "text",
-      validator: (value) => {
-        return [
-          "text",
-          "date",
-          "number",
-          "tel",
-          "search",
-          "url",
-          "password",
-          "month",
-          "time",
-          "week",
-          "email"
-        ].includes(value);
-      }
-    },
-    required: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    id: { type: String, default: void 0 },
-    error: { type: Boolean, default: false },
-    success: { type: Boolean, default: false },
-    warning: { type: Boolean, default: false },
-    hint: { type: String, default: void 0 },
-    inputClasses: { type: String, default: void 0 },
-    noBorder: { type: Boolean, default: false },
-    noRadius: { type: Boolean, default: false },
-    size: {
-      type: String,
-      default: "md",
-      validator: (value) => {
-        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
-      }
-    },
-    debounce: { type: Boolean, default: false },
-    debounceDelay: { type: Number, default: 500 },
-    validButton: { type: Boolean, default: false },
-    validButtonLoading: { type: Boolean, default: false },
-    autoFocus: { type: Boolean, default: false },
-    borderActive: { type: Boolean, default: false },
-    leftIcon: { type: String, default: void 0 },
-    rightIcon: { type: String, default: void 0 }
-  },
-  emits: ["focus", "blur", "update:model-value", "click", "change", "update"],
-  setup(__props, { emit: __emit }) {
-    const MazBtn = defineAsyncComponent(() => import("./MazBtn-b42e3575.mjs"));
-    const MazIcon = defineAsyncComponent(() => import("./MazIcon-bda198b4.mjs"));
-    const EyeOffIcon = defineAsyncComponent(() => import("./eye-slash-342420ff.mjs"));
-    const EyeIcon = defineAsyncComponent(() => import("./eye-fbb13657.mjs"));
-    const CheckIcon = defineAsyncComponent(() => import("./check-f2fcce10.mjs"));
-    const props = __props;
-    const emits = __emit;
-    const hasPasswordVisible = ref(false);
-    const isFocused = ref(false);
-    const input = ref();
-    const instance = getCurrentInstance();
-    const instanceId = useInstanceUniqId({
-      componentName: "MazInput",
-      instance,
-      providedId: props.id
-    });
-    onMounted(() => {
-      var _a;
-      if (props.autoFocus) {
-        (_a = input.value) == null ? void 0 : _a.focus();
-      }
-    });
-    const inheritClasses = computed(() => props.class);
-    const isPasswordType = computed(() => props.type === "password");
-    const inputType = computed(() => hasPasswordVisible.value ? "text" : props.type);
-    const borderStyle = computed(() => {
-      if (props.noBorder)
-        return void 0;
-      if (props.error)
-        return "maz-border-danger";
-      if (props.success)
-        return "maz-border-success";
-      if (props.warning)
-        return "maz-border-warning";
-      if (isFocused.value || props.borderActive) {
-        if (props.color === "black")
-          return "maz-border-black";
-        if (props.color === "danger")
-          return "maz-border-danger";
-        if (props.color === "info")
-          return "maz-border-info";
-        if (props.color === "primary")
-          return "maz-border-primary";
-        if (props.color === "secondary")
-          return "maz-border-secondary";
-        if (props.color === "success")
-          return "maz-border-success";
-        if (props.color === "warning")
-          return "maz-border-warning";
-        if (props.color === "white")
-          return "maz-border-white";
-      }
-      return "--default-border";
-    });
-    const slots = useSlots();
-    const computedPlaceholder = computed(() => {
-      const { required, placeholder } = props;
-      if (!placeholder)
-        return void 0;
-      return required ? `${placeholder} *` : placeholder;
-    });
-    const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
-    const inputValue = computed({
-      get: () => props.modelValue,
-      set: (value) => emitValue(value)
-    });
-    const shouldUp = computed(() => {
-      return (!!props.label || !!props.hint) && (isFocused.value || !!hasValue.value || !!props.placeholder || ["date", "month", "week"].includes(props.type));
-    });
-    const hasLabel = computed(() => !!props.label || !!props.hint);
-    const hasRightPart = () => {
-      return !!slots["right-icon"] || isPasswordType.value || !!slots["valid-button"] || props.validButton || !!props.rightIcon;
-    };
-    const hasLeftPart = () => {
-      return !!slots["left-icon"] || !!props.leftIcon;
-    };
-    const focus = (event) => {
-      emits("focus", event);
-      isFocused.value = true;
-    };
-    const blur = (event) => {
-      emits("blur", event);
-      isFocused.value = false;
-    };
-    const change = (event) => emits("change", event);
-    const debounceEmitValue = debounce((value) => {
-      emits("update:model-value", value);
-    }, props.debounceDelay);
-    const emitValue = (value) => {
-      if (props.debounce)
-        return debounceEmitValue(value);
-      emits("update:model-value", value);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["m-input", [
-            {
-              "--is-focused": isFocused.value || __props.borderActive,
-              "--should-up": shouldUp.value,
-              "--has-label": hasLabel.value,
-              "--is-disabled": __props.disabled,
-              "--is-readonly": __props.readonly,
-              "--has-z-2": __props.error || __props.warning || __props.success,
-              "--has-state": __props.error || __props.warning || __props.success
-            },
-            inheritClasses.value,
-            `--${__props.color}`,
-            `--${__props.size}`
-          ]]),
-          style: normalizeStyle(__props.style)
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(["m-input-wrapper", [__props.inputClasses, borderStyle.value, { "maz-rounded": !__props.noRadius }]])
-            },
-            [
-              hasLeftPart() ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
-                _ctx.$slots["left-icon"] || __props.leftIcon ? renderSlot(_ctx.$slots, "left-icon", { key: 0 }, () => [
-                  createVNode(unref(MazIcon), {
-                    name: __props.leftIcon,
-                    class: "maz-text-xl maz-text-muted"
-                  }, null, 8, ["name"])
-                ], true) : createCommentVNode("v-if", true)
-              ])) : createCommentVNode("v-if", true),
-              createElementVNode("div", _hoisted_2$1, [
-                withDirectives(createElementVNode("input", mergeProps({
-                  id: unref(instanceId),
-                  ref_key: "input",
-                  ref: input,
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
-                  type: inputType.value,
-                  name: __props.name
-                }, _ctx.$attrs, {
-                  placeholder: computedPlaceholder.value,
-                  "aria-label": __props.label || __props.placeholder,
-                  disabled: __props.disabled,
-                  readonly: __props.readonly,
-                  required: __props.required,
-                  class: "m-input-input"
-                }, toHandlers({
-                  blur,
-                  focus,
-                  change
-                }, true), {
-                  onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
-                }), null, 16, _hoisted_3$1), [
-                  [vModelDynamic, inputValue.value]
-                ]),
-                __props.label || __props.hint ? (openBlock(), createElementBlock(
-                  "span",
-                  {
-                    key: 0,
-                    ref: "label",
-                    class: normalizeClass(["m-input-label", [
-                      {
-                        "maz-text-danger-600": __props.error,
-                        "maz-text-success-600": __props.success,
-                        "maz-text-warning-600": __props.warning
-                      }
-                    ]])
-                  },
-                  [
-                    createTextVNode(
-                      toDisplayString(__props.hint || __props.label) + " ",
-                      1
-                      /* TEXT */
-                    ),
-                    __props.required ? (openBlock(), createElementBlock("sup", _hoisted_4, "*")) : createCommentVNode("v-if", true)
-                  ],
-                  2
-                  /* CLASS */
-                )) : createCommentVNode("v-if", true)
-              ]),
-              hasRightPart() ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                _ctx.$slots["right-icon"] || __props.rightIcon ? renderSlot(_ctx.$slots, "right-icon", { key: 0 }, () => [
-                  createVNode(unref(MazIcon), {
-                    name: __props.rightIcon,
-                    class: "maz-text-xl maz-text-muted"
-                  }, null, 8, ["name"])
-                ], true) : createCommentVNode("v-if", true),
-                isPasswordType.value ? (openBlock(), createBlock(unref(MazBtn), {
-                  key: 1,
-                  color: "transparent",
-                  tabindex: "-1",
-                  size: "mini",
-                  onClick: _cache[2] || (_cache[2] = withModifiers(($event) => hasPasswordVisible.value = !hasPasswordVisible.value, ["stop"]))
-                }, {
-                  default: withCtx(() => [
-                    hasPasswordVisible.value ? (openBlock(), createBlock(unref(EyeOffIcon), {
-                      key: 0,
-                      class: "maz-text-xl maz-text-muted"
-                    })) : (openBlock(), createBlock(unref(EyeIcon), {
-                      key: 1,
-                      class: "maz-text-xl maz-text-muted"
-                    }))
-                  ]),
-                  _: 1
-                  /* STABLE */
-                })) : createCommentVNode("v-if", true),
-                _ctx.$slots["valid-button"] || __props.validButton ? renderSlot(_ctx.$slots, "valid-button", { key: 2 }, () => [
-                  createVNode(unref(MazBtn), {
-                    color: "transparent",
-                    disabled: __props.disabled,
-                    tabindex: "-1",
-                    loading: __props.validButtonLoading,
-                    class: "m-input-valid-button",
-                    size: "mini",
-                    type: "submit"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(CheckIcon), { class: "maz-text-2xl maz-text-normal" })
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["disabled", "loading"])
-                ], true) : createCommentVNode("v-if", true)
-              ])) : createCommentVNode("v-if", true)
-            ],
-            2
-            /* CLASS */
-          )
-        ],
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
-});
-const MazInput_vue_vue_type_style_index_0_scoped_32fa5093_lang = "";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const MazInput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-32fa5093"]]);
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "1em",
-  height: "1em",
-  fill: "none",
-  viewBox: "0 0 24 24"
-};
-const _hoisted_2 = /* @__PURE__ */ createElementVNode(
-  "path",
-  {
-    stroke: "currentColor",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "1.5",
-    d: "M6 18 18 6M6 6l12 12"
-  },
-  null,
-  -1
-  /* HOISTED */
-);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, [..._hoisted_3]);
-}
-const XIcon = { render };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "MazInputTags",
-  props: {
-    // Input value, can be a `Array` of `String` or `null`
-    modelValue: {
-      type: Array,
-      default: void 0
-    },
-    // input placeholder
-    placeholder: { type: String, default: void 0 },
-    label: { type: String, default: void 0 },
-    // When is `true` the input is disable
-    disabled: { type: Boolean, default: false },
-    // When is `true` the input has the error style (red)
-    error: { type: Boolean, default: false },
-    success: { type: Boolean, default: false },
-    warning: { type: Boolean, default: false },
-    size: {
-      type: String,
-      default: "md",
-      validator: (value) => {
-        return ["mini", "xs", "sm", "md", "lg", "xl"].includes(value);
-      }
-    },
-    color: {
-      type: String,
-      default: "primary"
-    }
-  },
-  emits: ["update:model-value"],
-  setup(__props, { emit: __emit }) {
-    const MazBtn = defineAsyncComponent(() => import("./MazBtn-b42e3575.mjs"));
-    const props = __props;
-    const isFocused = ref(false);
-    const inputValue = ref();
-    const emits = __emit;
-    const addTags = (event) => {
-      if (inputValue.value) {
-        event.preventDefault();
-        const values = inputValue.value.trim().split(",").map((value) => value.trim() === "," ? void 0 : value.trim()).filter(Boolean);
-        emits("update:model-value", props.modelValue ? [...props.modelValue, ...values] : [...values]);
-        inputValue.value = void 0;
-      }
-    };
-    const borderStyle = computed(() => {
-      if (props.error)
-        return "maz-border-danger";
-      if (props.success)
-        return "maz-border-success";
-      if (props.warning)
-        return "maz-border-warning";
-      if (isFocused.value) {
-        if (props.color === "primary")
-          return "maz-border-primary";
-        if (props.color === "secondary")
-          return "maz-border-secondary";
-        if (props.color === "info")
-          return "maz-border-info";
-        if (props.color === "danger")
-          return "maz-border-danger";
-        if (props.color === "success")
-          return "maz-border-success";
-        if (props.color === "warning")
-          return "maz-border-warning";
-        if (props.color === "black")
-          return "maz-border-black";
-        if (props.color === "white")
-          return "maz-border-white";
-      }
-      return "maz-border-gray-200";
-    });
-    const removeLastTag = () => {
-      if (!inputValue.value || inputValue.value === "") {
-        const tagsArray = JSON.parse(JSON.stringify(props.modelValue));
-        tagsArray.pop();
-        emits("update:model-value", tagsArray);
-      }
-    };
-    const removeTag = (index) => {
-      const tagsArray = JSON.parse(JSON.stringify(props.modelValue));
-      tagsArray.splice(index, 1);
-      emits("update:model-value", tagsArray);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["m-input-tags", [borderStyle.value, `--${__props.color}`]]),
-          onFocusCapture: _cache[1] || (_cache[1] = ($event) => isFocused.value = true),
-          onBlurCapture: _cache[2] || (_cache[2] = ($event) => isFocused.value = false)
-        },
-        [
-          createVNode(TransitionGroup, { name: "maz-tags" }, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(
-                Fragment,
-                null,
-                renderList(__props.modelValue, (tag, i) => {
-                  return openBlock(), createElementBlock("div", {
-                    key: `tag-${i}`
-                  }, [
-                    createVNode(unref(MazBtn), {
-                      class: "m-input-tags__tag",
-                      disabled: __props.disabled,
-                      size: __props.size,
-                      color: __props.color,
-                      onClick: withModifiers(($event) => removeTag(i), ["stop"])
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(
-                          toDisplayString(tag),
-                          1
-                          /* TEXT */
-                        )
-                      ]),
-                      "right-icon": withCtx(() => [
-                        createVNode(unref(XIcon), { class: "m-input-tags__tag__icon" })
-                      ]),
-                      _: 2
-                      /* DYNAMIC */
-                    }, 1032, ["disabled", "size", "color", "onClick"])
-                  ]);
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ]),
-            _: 1
-            /* STABLE */
-          }),
-          createVNode(MazInput, mergeProps({
-            key: "input-tags",
-            modelValue: inputValue.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
-          }, _ctx.$attrs, {
-            placeholder: __props.placeholder,
-            label: __props.label,
-            "aria-label": __props.label || __props.placeholder,
-            error: __props.error,
-            disabled: __props.disabled,
-            color: __props.color,
-            size: __props.size,
-            "no-border": "",
-            class: "m-input-tags__input maz-flex-1",
-            onKeydown: [
-              withKeys(addTags, ["enter"]),
-              withKeys(removeLastTag, ["delete"])
-            ]
-          }), null, 16, ["modelValue", "placeholder", "label", "aria-label", "error", "disabled", "color", "size", "onKeydown"])
-        ],
-        34
-        /* CLASS, HYDRATE_EVENTS */
-      );
-    };
-  }
-});
-const MazInputTags_vue_vue_type_style_index_0_scoped_82c91368_lang = "";
-const MazInputTags = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82c91368"]]);
-export {
-  MazInputTags as M,
-  _export_sfc as _
-};