@tagplus/components 5.3.4 → 5.3.6

package/dist/lib/src/components/Autosuggest/core.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../../../node_modules/@element-plus/icons-vue/dist/index.js");
+const selectDropdown = require("./select-dropdown.vue.js");
+const option = require("./option.vue.js");
+const useSelect = require("./useSelect.js");
+function autosuggestCore(component_name, propsDefinition) {
+  return {
+    name: component_name,
+    componentName: component_name,
+    directives: {
+      ClickOutside: elementPlus.ClickOutside
+    },
+    components: {
+      ArrowDown: index.ArrowDown,
+      ElOption: option.default,
+      ElSelectMenu: selectDropdown.default,
+      ElTooltip: elementPlus.ElTooltip,
+      ElDivider: elementPlus.ElDivider,
+      ElTag: elementPlus.ElTag,
+      ElIcon: elementPlus.ElIcon,
+      ElRow: elementPlus.ElRow,
+      ElScrollbar: elementPlus.ElScrollbar
+    },
+    props: propsDefinition,
+    emits: [
+      "update:modelValue",
+      "change",
+      "remove-tag",
+      "clear",
+      "visible-change",
+      "focus",
+      "blur"
+    ],
+    setup(props, context) {
+      const API = useSelect.useSelect(props, context);
+      vue.provide(
+        "select",
+        vue.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
+      };
+    }
+  };
+}
+exports.default = autosuggestCore;

package/dist/lib/src/components/Autosuggest/multisuggest-props.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const autosuggestProps = require("./autosuggest-props.js");
+const multisuggestProps = {
+  ...autosuggestProps.default,
+  multiple: {
+    type: Boolean,
+    default: true
+  }
+};
+exports.default = multisuggestProps;

package/dist/lib/src/components/Autosuggest/option.vue.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const useOption = require("./useOption.js");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
+const index = require("../../../node_modules/element-plus/es/hooks/use-namespace/index.js");
+const index$1 = require("../../../node_modules/element-plus/es/hooks/use-id/index.js");
+const _sfc_main = vue.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 = index.useNamespace("select");
+    const id = index$1.useId();
+    const containerKls = vue.computed(() => [
+      ns.be("dropdown", "item"),
+      ns.is("disabled", vue.unref(isDisabled)),
+      ns.is("selected", vue.unref(itemSelected)),
+      ns.is("hovering", vue.unref(hover))
+    ]);
+    const states = vue.reactive({
+      index: -1,
+      groupDisabled: false,
+      visible: true,
+      hover: false
+    });
+    const {
+      currentLabel,
+      itemSelected,
+      isDisabled,
+      select,
+      hoverItem,
+      updateOption
+    } = useOption.useOption(props, states);
+    const { visible, hover } = vue.toRefs(states);
+    const vm = vue.getCurrentInstance().proxy;
+    select.onOptionCreate(vm);
+    vue.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;
+      });
+      vue.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 vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
+    id: _ctx.id,
+    class: vue.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] = vue.withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
+  }, [
+    vue.renderSlot(_ctx.$slots, "default", {}, () => [
+      vue.createElementVNode("span", null, vue.toDisplayString(_ctx.currentLabel), 1)
+    ])
+  ], 42, _hoisted_1)), [
+    [vue.vShow, _ctx.visible]
+  ]);
+}
+const ElOption = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = ElOption;

package/dist/lib/src/components/Autosuggest/select-dropdown.vue.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const index = require("../../../node_modules/@vueuse/core/index.js");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
+const index$1 = require("../../../node_modules/element-plus/es/hooks/use-namespace/index.js");
+const _sfc_main = vue.defineComponent({
+  name: "ElSelectDropdown",
+  componentName: "ElSelectDropdown",
+  inject: ["select"],
+  setup() {
+    const ns = index$1.useNamespace("select");
+    const minWidth = vue.ref("");
+    return {
+      ns,
+      minWidth
+    };
+  },
+  computed: {
+    popperClass() {
+      return this.select.popperClass;
+    },
+    isMultiple() {
+      return this.select.multiple;
+    },
+    isFitInputWidth() {
+      return this.select.fitInputWidth;
+    }
+  },
+  mounted() {
+    this.updateMinWidth();
+    index.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 vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([_ctx.ns.b("dropdown"), _ctx.ns.is("multiple", _ctx.isMultiple), _ctx.popperClass]),
+    style: vue.normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
+  }, [
+    _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: vue.normalizeClass(_ctx.ns.be("dropdown", "header"))
+    }, [
+      vue.renderSlot(_ctx.$slots, "header")
+    ], 2)) : vue.createCommentVNode("", true),
+    vue.renderSlot(_ctx.$slots, "default"),
+    _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 1,
+      class: vue.normalizeClass(_ctx.ns.be("dropdown", "footer"))
+    }, [
+      vue.renderSlot(_ctx.$slots, "footer")
+    ], 2)) : vue.createCommentVNode("", true)
+  ], 6);
+}
+const ElSelectMenu = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = ElSelectMenu;

package/dist/lib/src/components/Autosuggest/useOption.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const lodashEs = require("lodash-es");
+const strings = require("../../utils/strings.js");
+const shared_esmBundler = require("../../../node_modules/@vue/shared/dist/shared.esm-bundler.js");
+function useOption(props, states) {
+  const select = vue.inject("select");
+  const selectGroup = vue.inject("ElSelectGroup", { disabled: false });
+  const itemSelected = vue.computed(() => {
+    if (select.props.multiple) {
+      return contains(select.props.modelValue, props.value);
+    } else {
+      return contains([select.props.modelValue], props.value);
+    }
+  });
+  const limitReached = vue.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 = vue.computed(() => {
+    return props.label || (shared_esmBundler.isObject(props.value) ? "" : props.value);
+  });
+  const currentValue = vue.computed(() => {
+    return props.value || props.label || "";
+  });
+  const isDisabled = vue.computed(() => {
+    return props.disabled || states.groupDisabled || limitReached.value;
+  });
+  const instance = vue.getCurrentInstance();
+  const contains = (arr = [], target) => {
+    if (!shared_esmBundler.isObject(props.value)) {
+      return arr && arr.includes(target);
+    } else {
+      const valueKey = select.props.valueKey;
+      return arr && arr.some((item) => {
+        return vue.toRaw(lodashEs.get(item, valueKey)) === lodashEs.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(strings.escapeStringRegexp(query), "i");
+    states.visible = regexp.test(currentLabel.value) || props.created;
+  };
+  vue.watch(
+    () => currentLabel.value,
+    () => {
+      if (!props.created && !select.props.remote) select.setSelected();
+    }
+  );
+  vue.watch(
+    () => props.value,
+    (val, oldVal) => {
+      const { remote, valueKey } = select.props;
+      if (!lodashEs.isEqual(val, oldVal)) {
+        select.onOptionDestroy(oldVal, instance.proxy);
+        select.onOptionCreate(instance.proxy);
+      }
+      if (!props.created && !remote) {
+        if (valueKey && shared_esmBundler.isObject(val) && shared_esmBundler.isObject(oldVal) && val[valueKey] === oldVal[valueKey]) {
+          return;
+        }
+        select.setSelected();
+      }
+    }
+  );
+  vue.watch(
+    () => selectGroup.disabled,
+    () => {
+      states.groupDisabled = selectGroup.disabled;
+    },
+    { immediate: true }
+  );
+  return {
+    select,
+    currentLabel,
+    currentValue,
+    itemSelected,
+    isDisabled,
+    hoverItem,
+    updateOption
+  };
+}
+exports.useOption = useOption;