@tagplus/components 5.3.4 → 5.3.5

package/dist/es/src/components/Autosuggest/core.mjs

@@ -0,0 +1,62 @@
+import { provide, reactive } from "vue";
+import { ElScrollbar, ElRow, ElIcon, ElTag, ElDivider, ElTooltip, ClickOutside } from "element-plus";
+import { ArrowDown as arrow_down_default } from "../../../node_modules/@element-plus/icons-vue/dist/index.mjs";
+import ElSelectMenu from "./select-dropdown.vue.mjs";
+import ElOption from "./option.vue.mjs";
+import { useSelect } from "./useSelect.mjs";
+function autosuggestCore(component_name, propsDefinition) {
+  return {
+    name: component_name,
+    componentName: component_name,
+    directives: {
+      ClickOutside
+    },
+    components: {
+      ArrowDown: arrow_down_default,
+      ElOption,
+      ElSelectMenu,
+      ElTooltip,
+      ElDivider,
+      ElTag,
+      ElIcon,
+      ElRow,
+      ElScrollbar
+    },
+    props: propsDefinition,
+    emits: [
+      "update:modelValue",
+      "change",
+      "remove-tag",
+      "clear",
+      "visible-change",
+      "focus",
+      "blur"
+    ],
+    setup(props, context) {
+      const API = useSelect(props, context);
+      provide(
+        "select",
+        reactive({
+          props,
+          states: API.states,
+          optionsArray: API.optionsArray,
+          handleOptionSelect: API.handleOptionSelect,
+          onOptionCreate: API.onOptionCreate,
+          onOptionDestroy: API.onOptionDestroy,
+          selectRef: API.selectRef,
+          setSelected: API.setSelected
+        })
+      );
+      return API;
+    },
+    data() {
+      return {
+        visible: false,
+        tooltipVisible: false
+      };
+    }
+  };
+}
+export {
+  autosuggestCore as default
+};

package/dist/es/src/components/Autosuggest/multisuggest-props.mjs

@@ -0,0 +1,11 @@
+import autosuggestProps from "./autosuggest-props.mjs";
+const multisuggestProps = {
+  ...autosuggestProps,
+  multiple: {
+    type: Boolean,
+    default: true
+  }
+};
+export {
+  multisuggestProps as default
+};

package/dist/es/src/components/Autosuggest/option.vue.mjs

@@ -0,0 +1,118 @@
+import { defineComponent, withDirectives, createElementBlock, openBlock, withModifiers, normalizeClass, renderSlot, createElementVNode, toDisplayString, vShow, computed, unref, toRefs, reactive, getCurrentInstance, onBeforeUnmount, nextTick } from "vue";
+import { useOption } from "./useOption.mjs";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import { useNamespace } from "../../../node_modules/element-plus/es/hooks/use-namespace/index.mjs";
+import { useId } from "../../../node_modules/element-plus/es/hooks/use-id/index.mjs";
+const _sfc_main = defineComponent({
+  name: "ElOption",
+  componentName: "ElOption",
+  props: {
+    /**
+     * @description value of option
+     */
+    value: {
+      required: true,
+      type: [String, Number, Boolean, Object, null]
+    },
+    /**
+     * @description label of option, same as `value` if omitted
+     */
+    label: [String, Number],
+    created: Boolean,
+    /**
+     * @description whether option is disabled
+     */
+    disabled: Boolean,
+    /**
+     * @tagplus
+     * @description recebe o item inteiro para ser emitido, ao inves de somente key/value
+     */
+    item: {
+      type: [String, Number, Boolean, Object],
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("select");
+    const id = useId();
+    const containerKls = computed(() => [
+      ns.be("dropdown", "item"),
+      ns.is("disabled", unref(isDisabled)),
+      ns.is("selected", unref(itemSelected)),
+      ns.is("hovering", unref(hover))
+    ]);
+    const states = reactive({
+      index: -1,
+      groupDisabled: false,
+      visible: true,
+      hover: false
+    });
+    const {
+      currentLabel,
+      itemSelected,
+      isDisabled,
+      select,
+      hoverItem,
+      updateOption
+    } = useOption(props, states);
+    const { visible, hover } = toRefs(states);
+    const vm = getCurrentInstance().proxy;
+    select.onOptionCreate(vm);
+    onBeforeUnmount(() => {
+      const key = vm.value;
+      const { selected } = select.states;
+      const selectedOptions = select.props.multiple ? selected : [selected];
+      const doesSelected = selectedOptions.some((item) => {
+        return item.value === vm.value;
+      });
+      nextTick(() => {
+        if (select.states.cachedOptions.get(key) === vm && !doesSelected) {
+          select.states.cachedOptions.delete(key);
+        }
+      });
+      select.onOptionDestroy(key, vm);
+    });
+    function selectOptionClick() {
+      if (props.disabled !== true && states.groupDisabled !== true) {
+        select.handleOptionSelect(vm);
+      }
+    }
+    return {
+      ns,
+      id,
+      containerKls,
+      currentLabel,
+      itemSelected,
+      isDisabled,
+      select,
+      hoverItem,
+      updateOption,
+      visible,
+      hover,
+      selectOptionClick,
+      states
+    };
+  }
+});
+const _hoisted_1 = ["id", "aria-disabled", "aria-selected"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return withDirectives((openBlock(), createElementBlock("li", {
+    id: _ctx.id,
+    class: normalizeClass(_ctx.containerKls),
+    role: "option",
+    "aria-disabled": _ctx.isDisabled || void 0,
+    "aria-selected": _ctx.itemSelected,
+    onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
+    onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
+  }, [
+    renderSlot(_ctx.$slots, "default", {}, () => [
+      createElementVNode("span", null, toDisplayString(_ctx.currentLabel), 1)
+    ])
+  ], 42, _hoisted_1)), [
+    [vShow, _ctx.visible]
+  ]);
+}
+const ElOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  ElOption as default
+};

package/dist/es/src/components/Autosuggest/select-dropdown.vue.mjs

@@ -0,0 +1,62 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, renderSlot, ref } from "vue";
+import { useResizeObserver } from "../../../node_modules/@vueuse/core/index.mjs";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import { useNamespace } from "../../../node_modules/element-plus/es/hooks/use-namespace/index.mjs";
+const _sfc_main = defineComponent({
+  name: "ElSelectDropdown",
+  componentName: "ElSelectDropdown",
+  inject: ["select"],
+  setup() {
+    const ns = useNamespace("select");
+    const minWidth = ref("");
+    return {
+      ns,
+      minWidth
+    };
+  },
+  computed: {
+    popperClass() {
+      return this.select.popperClass;
+    },
+    isMultiple() {
+      return this.select.multiple;
+    },
+    isFitInputWidth() {
+      return this.select.fitInputWidth;
+    }
+  },
+  mounted() {
+    this.updateMinWidth();
+    useResizeObserver(this.select.selectRef, this.updateMinWidth);
+  },
+  methods: {
+    updateMinWidth() {
+      var _a;
+      this.minWidth = `${(_a = this.select.selectRef) == null ? void 0 : _a.offsetWidth}px`;
+    }
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([_ctx.ns.b("dropdown"), _ctx.ns.is("multiple", _ctx.isMultiple), _ctx.popperClass]),
+    style: normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
+  }, [
+    _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: normalizeClass(_ctx.ns.be("dropdown", "header"))
+    }, [
+      renderSlot(_ctx.$slots, "header")
+    ], 2)) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "default"),
+    _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: normalizeClass(_ctx.ns.be("dropdown", "footer"))
+    }, [
+      renderSlot(_ctx.$slots, "footer")
+    ], 2)) : createCommentVNode("", true)
+  ], 6);
+}
+const ElSelectMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  ElSelectMenu as default
+};

package/dist/es/src/components/Autosuggest/useOption.mjs

@@ -0,0 +1,93 @@
+import { inject, computed, getCurrentInstance, toRaw, watch } from "vue";
+import { get, isEqual } from "lodash-es";
+import { escapeStringRegexp } from "../../utils/strings.mjs";
+import { isObject } from "../../../node_modules/@vue/shared/dist/shared.esm-bundler.mjs";
+function useOption(props, states) {
+  const select = inject("select");
+  const selectGroup = inject("ElSelectGroup", { disabled: false });
+  const itemSelected = computed(() => {
+    if (select.props.multiple) {
+      return contains(select.props.modelValue, props.value);
+    } else {
+      return contains([select.props.modelValue], props.value);
+    }
+  });
+  const limitReached = computed(() => {
+    if (select.props.multiple) {
+      const modelValue = select.props.modelValue || [];
+      return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
+    } else {
+      return false;
+    }
+  });
+  const currentLabel = computed(() => {
+    return props.label || (isObject(props.value) ? "" : props.value);
+  });
+  const currentValue = computed(() => {
+    return props.value || props.label || "";
+  });
+  const isDisabled = computed(() => {
+    return props.disabled || states.groupDisabled || limitReached.value;
+  });
+  const instance = getCurrentInstance();
+  const contains = (arr = [], target) => {
+    if (!isObject(props.value)) {
+      return arr && arr.includes(target);
+    } else {
+      const valueKey = select.props.valueKey;
+      return arr && arr.some((item) => {
+        return toRaw(get(item, valueKey)) === get(target, valueKey);
+      });
+    }
+  };
+  const hoverItem = () => {
+    if (!props.disabled && !selectGroup.disabled) {
+      select.states.hoveringIndex = select.optionsArray.indexOf(instance.proxy);
+    }
+  };
+  const updateOption = (query) => {
+    const regexp = new RegExp(escapeStringRegexp(query), "i");
+    states.visible = regexp.test(currentLabel.value) || props.created;
+  };
+  watch(
+    () => currentLabel.value,
+    () => {
+      if (!props.created && !select.props.remote) select.setSelected();
+    }
+  );
+  watch(
+    () => props.value,
+    (val, oldVal) => {
+      const { remote, valueKey } = select.props;
+      if (!isEqual(val, oldVal)) {
+        select.onOptionDestroy(oldVal, instance.proxy);
+        select.onOptionCreate(instance.proxy);
+      }
+      if (!props.created && !remote) {
+        if (valueKey && isObject(val) && isObject(oldVal) && val[valueKey] === oldVal[valueKey]) {
+          return;
+        }
+        select.setSelected();
+      }
+    }
+  );
+  watch(
+    () => selectGroup.disabled,
+    () => {
+      states.groupDisabled = selectGroup.disabled;
+    },
+    { immediate: true }
+  );
+  return {
+    select,
+    currentLabel,
+    currentValue,
+    itemSelected,
+    isDisabled,
+    hoverItem,
+    updateOption
+  };
+}
+export {
+  useOption
+};