@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/input-tag/index.js

@@ -1,474 +1,449 @@
 import './css.js'
-import { defineComponent, getCurrentInstance, ref, inject, computed, shallowRef, useSlots, watch, onMounted, nextTick, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, unref, renderSlot, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, withKeys, withModifiers } from "vue";
-import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
-import { d as drawBorder } from "./draw.js";
-import { g as getGlobalThemeColor } from "../share/util/color.js";
-import { a as canvasPreprocess, c as calcPixelSize, g as getBorderRadius, b as calcBorderCornerCenter, f as floodFill } from "../share/util/plot.js";
-import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
-import { u as useComposition } from "../share/hook/use-composition.js";
-import { T as TimesCircleSolid, S as SpinnerThirdSolid } from "../auto-complete/index.js";
-import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
-import { _ as _sfc_main$1 } from "../input-group/index.js";
-import { I as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
-import { u as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
-import { I as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
-import { _ as _sfc_main$2 } from "../tag/index.js";
-import { k, $ } from "../aside/index.js";
-import { _ as _sfc_main$3 } from "../popover/index.js";
-import { B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
-import { u as useControlledMode } from "../share/hook/use-controlled-mode.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "px-input-tag-prefix-wrapper"
+import { D as S, V as spinner_third_solid_default, g as A, l as times_circle_solid_default } from "../vendor.js";
+import { o as POPUP_CONTENT_DEFAULT_MAX_WIDTH, t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { i as canvasPreprocess, l as getBorderRadius, n as calcPixelSize, s as floodFill, t as calcBorderCornerCenter } from "../share/util/plot.js";
+import { n as getGlobalThemeColor } from "../share/util/color.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { t as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { i as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { n as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
+import { i as FORM_ITEM_PROVIDE, s as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
+import { t as createProvideComputed } from "../share/util/reactivity.js";
+import { t as useTransitionEnd } from "../share/hook/use-transition-end.js";
+import { t as useComposition } from "../share/hook/use-composition.js";
+import { t as useControlledMode } from "../share/hook/use-controlled-mode.js";
+import { t as tag_default } from "../tag/index.js";
+import { t as drawBorder } from "./draw.js";
+import { t as popover_default } from "../popover/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useSlots, watch, withCtx, withKeys, withModifiers } from "vue";
+var _hoisted_1 = {
+	key: 0,
+	class: "px-input-tag-prefix-wrapper"
 };
-const _hoisted_2 = { class: "px-input-tag-content" };
-const _hoisted_3 = { class: "px-input-tag-content" };
-const _hoisted_4 = ["value", "placeholder", "disabled", "autofocus"];
-const _hoisted_5 = {
-  key: 1,
-  class: "px-input-tag-close-wrapper"
+var _hoisted_2 = { class: "px-input-tag-content" };
+var _hoisted_3 = { class: "px-input-tag-content" };
+var _hoisted_4 = [
+	"value",
+	"placeholder",
+	"disabled",
+	"autofocus"
+];
+var _hoisted_5 = {
+	key: 1,
+	class: "px-input-tag-close-wrapper"
 };
-const _hoisted_6 = {
-  key: 1,
-  class: "px-input-tag-icon-placeholder"
+var _hoisted_6 = {
+	key: 1,
+	class: "px-input-tag-icon-placeholder"
 };
-const _hoisted_7 = {
-  key: 2,
-  class: "px-input-tag-loading-wrapper"
+var _hoisted_7 = {
+	key: 2,
+	class: "px-input-tag-loading-wrapper"
 };
-const _hoisted_8 = {
-  key: 3,
-  class: "px-input-tag-suffix-wrapper"
+var _hoisted_8 = {
+	key: 3,
+	class: "px-input-tag-suffix-wrapper"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "InputTag"
-  },
-  __name: "index",
-  props: {
-    modelValue: null,
-    defaultValue: null,
-    inputValue: null,
-    defaultInputValue: null,
-    placeholder: null,
-    disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    clearable: { type: Boolean, default: false },
-    loading: { type: Boolean, default: false },
-    size: { default: "medium" },
-    shape: { default: "default" },
-    borderRadius: null,
-    maxLength: null,
-    collapseTags: { type: Boolean, default: false },
-    maxDisplayTags: null,
-    collapseTagsPopover: { type: Boolean, default: true },
-    tagTheme: { default: "info" },
-    tagVariant: { default: "plain" },
-    tagColor: null,
-    status: { default: "normal" },
-    autofocus: { type: Boolean }
-  },
-  emits: ["update:modelValue", "tagAdd", "tagClose", "change", "input", "update:inputValue", "inputChange", "clear", "blur", "focus"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    var _a;
-    const props = __props;
-    const emits = __emit;
-    const [isComposing, compositionStartHandler, compositionUpdateHandler] = useComposition({
-      afterComposition: (e) => {
-        nextTick(() => {
-          inputHandler(e);
-        });
-      }
-    });
-    const instance = getCurrentInstance();
-    const innerInputGroup = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
-    const [_, first, last] = innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [ref(0), ref(false), ref(false)];
-    const inputGroupProps = inject(INPUT_GROUP_PROVIDE);
-    const borderRadiusComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.borderRadius : props.borderRadius;
-    });
-    const sizeComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.size : props.size;
-    });
-    const shapeComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.shape : props.shape;
-    });
-    const disabledComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.disabled || props.disabled : props.disabled;
-    });
-    const tagSize = computed(() => {
-      return sizeComputed.value === "small" ? "small" : "medium";
-    });
-    const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
-      defaultField: "defaultValue",
-      transform: (value) => {
-        if ($(value)) {
-          return [...value];
-        }
-        return [];
-      }
-    });
-    const [inputValue, updateInputValue] = useControlledMode("inputValue", props, emits, {
-      defaultField: "defaultInputValue",
-      transform: (value) => {
-        return value || "";
-      }
-    });
-    const wrapperRef = shallowRef(null);
-    const canvasRef = shallowRef(null);
-    const inputRef = shallowRef(null);
-    const inputHandler = async (e) => {
-      const target = e.target;
-      const newValue = target.value;
-      inputValue.value = newValue;
-      if (isComposing.value) {
-        return;
-      }
-      emits("input", newValue, e);
-      updateInputValue(newValue);
-    };
-    const clearHandler = async () => {
-      const newTags = [];
-      await updateModelValue(newTags);
-      await updateInputValue("");
-      emits("clear", newTags);
-      emits("change", newTags);
-      emits("inputChange", "");
-    };
-    const tagCloseHandler = async (index, e) => {
-      const currentTags = modelValue.value ? [...modelValue.value] : [];
-      const closed = currentTags.splice(index, 1);
-      await updateModelValue(currentTags);
-      emits("tagClose", closed[0], index, e);
-      emits("change", currentTags);
-    };
-    const inputChangeHandler = (e) => {
-      const target = e.target;
-      emits("inputChange", target.value, e);
-    };
-    const focusMode = ref(false);
-    const blurHandler = async () => {
-      focusMode.value = false;
-      await updateInputValue("");
-      emits("inputChange", "");
-    };
-    const focusHandler = () => {
-      focusMode.value = true;
-    };
-    const enterDownHandler = async (e) => {
-      const currentValue = (inputValue.value || "").trim();
-      if (!currentValue || props.maxLength && modelValue.value && modelValue.value.length >= props.maxLength) {
-        return;
-      }
-      const currentTags = modelValue.value ? [...modelValue.value] : [];
-      currentTags.push(currentValue);
-      await updateModelValue(currentTags);
-      await updateInputValue("");
-      emits("tagAdd", currentValue, e);
-      emits("change", currentTags);
-      emits("inputChange", "");
-    };
-    const focusInputHandler = () => {
-      var _a2;
-      (_a2 = inputRef.value) == null ? void 0 : _a2.focus();
-    };
-    const hoverFlag = ref(false);
-    const mouseenterHandler = () => {
-      hoverFlag.value = true;
-    };
-    const mouseleaveHandler = () => {
-      hoverFlag.value = false;
-    };
-    const showClose = computed(() => {
-      return props.clearable && !disabledComputed.value && !props.readonly;
-    });
-    const tagCanClose = computed(() => {
-      return !disabledComputed.value && !props.readonly;
-    });
-    const slots = useSlots();
-    __expose({
-      focus: () => {
-        var _a2;
-        (_a2 = inputRef.value) == null ? void 0 : _a2.focus();
-      },
-      blur: () => {
-        var _a2;
-        (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
-      },
-      clear: () => clearHandler()
-    });
-    const shouldCollapseTags = computed(() => {
-      return !!props.collapseTags && k(props.maxDisplayTags) && props.maxDisplayTags >= 0;
-    });
-    const tagsShowed = computed(() => {
-      return modelValue.value ? shouldCollapseTags.value ? modelValue.value.slice(0, props.maxDisplayTags) : modelValue.value : [];
-    });
-    const tagsCollapsed = computed(() => {
-      return modelValue.value ? shouldCollapseTags.value ? modelValue.value.slice(props.maxDisplayTags) : [] : [];
-    });
-    const darkMode = useDarkMode();
-    watch(
-      [
-        first,
-        last,
-        borderRadiusComputed,
-        shapeComputed,
-        sizeComputed,
-        disabledComputed,
-        () => slots,
-        darkMode,
-        focusMode,
-        hoverFlag
-      ],
-      () => {
-        setTimeout(() => {
-          drawPixel();
-        });
-      }
-    );
-    const drawPixel = () => {
-      const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
-      if (!preprocessData) {
-        return;
-      }
-      const { ctx, width, height, canvas } = preprocessData;
-      const pixelSize = calcPixelSize();
-      const borderRadius = getBorderRadius(
-        canvas,
-        pixelSize,
-        borderRadiusComputed.value,
-        shapeComputed.value,
-        sizeComputed.value || "medium",
-        innerInputGroup.value,
-        first.value,
-        last.value
-      );
-      const borderColor = props.status !== "normal" ? getGlobalThemeColor(props.status === "error" ? "danger" : props.status, 6) : (hoverFlag.value || focusMode.value) && !disabledComputed.value && !props.readonly ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10);
-      const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
-      const rad = BORDER_CORNER_RAD_RANGE;
-      drawBorder(
-        ctx,
-        width,
-        height,
-        center,
-        borderRadius,
-        rad,
-        borderColor,
-        pixelSize,
-        innerInputGroup.value,
-        first.value,
-        last.value
-      );
-      const backgroundColor = disabledComputed.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
-      floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
-    };
-    onMounted(() => {
-      nextTick(() => {
-        drawPixel();
-      });
-    });
-    useResizeObserver(wrapperRef, drawPixel);
-    useWatchGlobalCssVal(drawPixel);
-    return (_ctx, _cache) => {
-      var _a2;
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["pixelium px-input-tag", {
-            [`px-input-tag__${sizeComputed.value}`]: !!sizeComputed.value,
-            [`px-input-tag__${shapeComputed.value}`]: !!shapeComputed.value,
-            "px-input-tag__inner": innerInputGroup.value,
-            "px-input-tag__disabled": !!disabledComputed.value
-          }]),
-          ref_key: "wrapperRef",
-          ref: wrapperRef,
-          onClick: focusInputHandler,
-          onMouseenter: mouseenterHandler,
-          onMouseleave: mouseleaveHandler
-        },
-        [
-          unref(slots).prefix ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            renderSlot(_ctx.$slots, "prefix")
-          ])) : createCommentVNode("v-if", true),
-          createElementVNode("div", _hoisted_2, [
-            (openBlock(true), createElementBlock(
-              Fragment,
-              null,
-              renderList(tagsShowed.value, (tag, index) => {
-                return openBlock(), createBlock(_sfc_main$2, {
-                  key: index,
-                  size: tagSize.value,
-                  variant: props.tagVariant,
-                  theme: props.tagTheme,
-                  closable: tagCanClose.value,
-                  disabled: disabledComputed.value,
-                  color: props.tagColor,
-                  onClose: (e) => tagCloseHandler(index, e)
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "tag", {
-                      tag,
-                      index
-                    }, () => [
-                      createTextVNode(
-                        toDisplayString(tag),
-                        1
-                        /* TEXT */
-                      )
-                    ])
-                  ]),
-                  _: 2
-                  /* DYNAMIC */
-                }, 1032, ["size", "variant", "theme", "closable", "disabled", "color", "onClose"]);
-              }),
-              128
-              /* KEYED_FRAGMENT */
-            )),
-            tagsCollapsed.value.length && shouldCollapseTags.value ? (openBlock(), createElementBlock(
-              Fragment,
-              { key: 0 },
-              [
-                !props.collapseTagsPopover ? (openBlock(), createBlock(_sfc_main$2, {
-                  key: 0,
-                  size: tagSize.value,
-                  variant: props.tagVariant,
-                  theme: props.tagTheme,
-                  disabled: disabledComputed.value,
-                  color: props.tagColor
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "tag", {
-                      tag: `+${tagsCollapsed.value.length}`,
-                      index: -1
-                    }, () => [
-                      createTextVNode(
-                        "+" + toDisplayString(tagsCollapsed.value.length),
-                        1
-                        /* TEXT */
-                      )
-                    ])
-                  ]),
-                  _: 3
-                  /* FORWARDED */
-                }, 8, ["size", "variant", "theme", "disabled", "color"])) : (openBlock(), createBlock(_sfc_main$3, { key: 1 }, {
-                  content: withCtx(() => [
-                    createElementVNode("div", _hoisted_3, [
-                      (openBlock(true), createElementBlock(
-                        Fragment,
-                        null,
-                        renderList(tagsCollapsed.value, (tag, index) => {
-                          return openBlock(), createBlock(_sfc_main$2, {
-                            key: index,
-                            size: tagSize.value,
-                            variant: props.tagVariant,
-                            theme: props.tagTheme,
-                            closable: tagCanClose.value,
-                            disabled: disabledComputed.value,
-                            color: props.tagColor,
-                            onClose: (e) => tagCloseHandler(index + Math.floor(props.maxDisplayTags), e)
-                          }, {
-                            default: withCtx(() => [
-                              renderSlot(_ctx.$slots, "tag", {
-                                tag,
-                                index: index + Math.floor(props.maxDisplayTags)
-                              }, () => [
-                                createTextVNode(
-                                  toDisplayString(tag),
-                                  1
-                                  /* TEXT */
-                                )
-                              ])
-                            ]),
-                            _: 2
-                            /* DYNAMIC */
-                          }, 1032, ["size", "variant", "theme", "closable", "disabled", "color", "onClose"]);
-                        }),
-                        128
-                        /* KEYED_FRAGMENT */
-                      ))
-                    ])
-                  ]),
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$2, {
-                      size: tagSize.value,
-                      variant: props.tagVariant,
-                      theme: props.tagTheme,
-                      disabled: disabledComputed.value,
-                      color: props.tagColor
-                    }, {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "tag", {
-                          tag: `+${tagsCollapsed.value.length}`,
-                          index: -1
-                        }, () => [
-                          createTextVNode(
-                            "+" + toDisplayString(tagsCollapsed.value.length),
-                            1
-                            /* TEXT */
-                          )
-                        ])
-                      ]),
-                      _: 3
-                      /* FORWARDED */
-                    }, 8, ["size", "variant", "theme", "disabled", "color"])
-                  ]),
-                  _: 3
-                  /* FORWARDED */
-                }))
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : createCommentVNode("v-if", true),
-            createElementVNode("input", {
-              class: "px-input-tag-inner",
-              value: unref(inputValue),
-              ref_key: "inputRef",
-              ref: inputRef,
-              placeholder: unref(modelValue) && unref(modelValue).length ? "" : props.placeholder,
-              disabled: disabledComputed.value || props.readonly,
-              autofocus: __props.autofocus,
-              onInput: withModifiers(inputHandler, ["stop"]),
-              onChange: withModifiers(inputChangeHandler, ["stop"]),
-              onBlur: blurHandler,
-              onFocus: focusHandler,
-              onCompositionstart: _cache[0] || (_cache[0] = //@ts-ignore
-              (...args) => unref(compositionStartHandler) && unref(compositionStartHandler)(...args)),
-              onCompositionend: _cache[1] || (_cache[1] = //@ts-ignore
-              (...args) => unref(compositionUpdateHandler) && unref(compositionUpdateHandler)(...args)),
-              onKeydown: withKeys(enterDownHandler, ["enter"])
-            }, null, 40, _hoisted_4)
-          ]),
-          showClose.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
-            hoverFlag.value && !!((_a2 = unref(modelValue)) == null ? void 0 : _a2.length) ? (openBlock(), createBlock(unref(TimesCircleSolid), {
-              key: 0,
-              class: "px-input-tag-icon",
-              onClick: clearHandler
-            })) : (openBlock(), createElementBlock("div", _hoisted_6))
-          ])) : createCommentVNode("v-if", true),
-          props.loading ? (openBlock(), createElementBlock("div", _hoisted_7, [
-            createVNode(unref(SpinnerThirdSolid), { class: "px-input-tag-icon px-animation__loading" })
-          ])) : createCommentVNode("v-if", true),
-          unref(slots).suffix ? (openBlock(), createElementBlock("div", _hoisted_8, [
-            renderSlot(_ctx.$slots, "suffix")
-          ])) : createCommentVNode("v-if", true),
-          createElementVNode(
-            "canvas",
-            {
-              class: "px-input-tag-canvas",
-              ref_key: "canvasRef",
-              ref: canvasRef
-            },
-            null,
-            512
-            /* NEED_PATCH */
-          )
-        ],
-        34
-        /* CLASS, NEED_HYDRATION */
-      );
-    };
-  }
+var input_tag_default = /* @__PURE__ */ defineComponent({
+	name: "InputTag",
+	__name: "index",
+	props: {
+		modelValue: null,
+		defaultValue: null,
+		inputValue: null,
+		defaultInputValue: null,
+		placeholder: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		size: null,
+		shape: null,
+		borderRadius: null,
+		maxLength: null,
+		collapseTags: {
+			type: Boolean,
+			default: false
+		},
+		maxDisplayTags: null,
+		collapseTagsPopover: {
+			type: Boolean,
+			default: true
+		},
+		tagProps: null,
+		status: { default: "normal" },
+		autofocus: { type: Boolean },
+		tagTheme: { default: "info" },
+		tagVariant: { default: "plain" },
+		tagColor: null,
+		popoverProps: null
+	},
+	emits: [
+		"update:modelValue",
+		"tagAdd",
+		"tagClose",
+		"change",
+		"input",
+		"update:inputValue",
+		"inputChange",
+		"clear",
+		"blur",
+		"focus"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		var _instance$parent;
+		const props = __props;
+		const emits = __emit;
+		const [isComposing, compositionStartHandler, compositionUpdateHandler] = useComposition({ afterComposition: (e) => {
+			nextTick(() => {
+				inputHandler(e);
+			});
+		} });
+		const instance = getCurrentInstance();
+		const innerInputGroup = ref((instance === null || instance === void 0 || (_instance$parent = instance.parent) === null || _instance$parent === void 0 ? void 0 : _instance$parent.type.name) === "InputGroup");
+		const [index, first, last] = innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [
+			ref(0),
+			ref(false),
+			ref(false)
+		];
+		const inputGroupProvide = inject(INPUT_GROUP_PROVIDE, void 0);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
+		const borderRadiusComputed = createProvideComputed("borderRadius", [innerInputGroup.value && inputGroupProvide, props]);
+		const sizeComputed = createProvideComputed("size", () => [
+			innerInputGroup.value && inputGroupProvide,
+			props.size && props,
+			formItemProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const shapeComputed = createProvideComputed("shape", [innerInputGroup.value && inputGroupProvide, props], "nullish", (val) => val || "rect");
+		const disabledComputed = createProvideComputed("disabled", [
+			innerInputGroup.value && inputGroupProvide,
+			formItemProvide,
+			props
+		], "or");
+		const readonlyComputed = createProvideComputed("readonly", [
+			innerInputGroup.value && inputGroupProvide,
+			formItemProvide,
+			props
+		], "or");
+		const statusComputed = createProvideComputed("status", [formItemProvide, props]);
+		const nextIsTextButton = computed(() => {
+			if (index.value >= 0) {
+				var _inputGroupProvide$ch;
+				return innerInputGroup.value ? !!((inputGroupProvide === null || inputGroupProvide === void 0 || (_inputGroupProvide$ch = inputGroupProvide.childrenInfo.value.find((e) => e.index === index.value + 1)) === null || _inputGroupProvide$ch === void 0 ? void 0 : _inputGroupProvide$ch.variant) === "text") : false;
+			} else return false;
+		});
+		const tagSize = computed(() => {
+			return sizeComputed.value === "small" ? "small" : "medium";
+		});
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform: (value) => {
+				if (S(value)) return [...value];
+				return [];
+			}
+		});
+		const [inputValue, updateInputValue] = useControlledMode("inputValue", props, emits, {
+			defaultField: "defaultInputValue",
+			transform: (value) => {
+				return value || "";
+			}
+		});
+		const wrapperRef = shallowRef(null);
+		const canvasRef = shallowRef(null);
+		const inputRef = shallowRef(null);
+		const inputHandler = async (e) => {
+			const newValue = e.target.value;
+			inputValue.value = newValue;
+			if (isComposing.value) return;
+			emits("input", newValue, e);
+			updateInputValue(newValue);
+		};
+		const clearHandler = async () => {
+			const newTags = [];
+			await updateModelValue(newTags);
+			await updateInputValue("");
+			emits("clear", newTags);
+			emits("change", newTags);
+			emits("inputChange", "");
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const tagCloseHandler = async (index$1, e) => {
+			const currentTags = modelValue.value ? [...modelValue.value] : [];
+			const closed = currentTags.splice(index$1, 1);
+			await updateModelValue(currentTags);
+			emits("tagClose", closed[0], index$1, e);
+			emits("change", currentTags);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const inputChangeHandler = (e) => {
+			const target = e.target;
+			emits("inputChange", target.value, e);
+		};
+		const focusMode = ref(false);
+		const blurHandler = async (e) => {
+			focusMode.value = false;
+			await updateInputValue("");
+			emits("inputChange", "");
+			emits("blur", e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const focusHandler = (e) => {
+			focusMode.value = true;
+			emits("focus", e);
+		};
+		const enterDownHandler = async (e) => {
+			const currentValue = (inputValue.value || "").trim();
+			if (!currentValue || props.maxLength && modelValue.value && modelValue.value.length >= props.maxLength) return;
+			const currentTags = modelValue.value ? [...modelValue.value] : [];
+			currentTags.push(currentValue);
+			await updateModelValue(currentTags);
+			await updateInputValue("");
+			emits("tagAdd", currentValue, e);
+			emits("change", currentTags);
+			emits("inputChange", "");
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const focusInputHandler = () => {
+			var _inputRef$value;
+			(_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.focus();
+		};
+		const hoverFlag = ref(false);
+		const mouseenterHandler = () => {
+			hoverFlag.value = true;
+		};
+		const mouseleaveHandler = () => {
+			hoverFlag.value = false;
+		};
+		const showClose = computed(() => {
+			return props.clearable && !disabledComputed.value && !readonlyComputed.value;
+		});
+		const tagCanClose = computed(() => {
+			return !disabledComputed.value && !readonlyComputed.value;
+		});
+		const slots = useSlots();
+		__expose({
+			focus: () => {
+				var _inputRef$value2;
+				(_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || _inputRef$value2.focus();
+			},
+			blur: () => {
+				var _inputRef$value3;
+				(_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 || _inputRef$value3.blur();
+			},
+			clear: () => clearHandler()
+		});
+		const shouldCollapseTags = computed(() => {
+			return !!props.collapseTags && A(props.maxDisplayTags) && props.maxDisplayTags >= 0;
+		});
+		const tagsShowed = computed(() => {
+			return modelValue.value ? shouldCollapseTags.value ? modelValue.value.slice(0, props.maxDisplayTags) : modelValue.value : [];
+		});
+		const tagsCollapsed = computed(() => {
+			return modelValue.value ? shouldCollapseTags.value ? modelValue.value.slice(props.maxDisplayTags) : [] : [];
+		});
+		const popoverProps = computed(() => {
+			var _props$popoverProps;
+			return {
+				...props.popoverProps,
+				contentStyle: {
+					maxWidth: `400px`,
+					...(_props$popoverProps = props.popoverProps) === null || _props$popoverProps === void 0 ? void 0 : _props$popoverProps.contentStyle
+				}
+			};
+		});
+		watch([
+			first,
+			last,
+			borderRadiusComputed,
+			shapeComputed,
+			sizeComputed,
+			readonlyComputed,
+			disabledComputed,
+			() => slots,
+			useDarkMode(),
+			focusMode,
+			hoverFlag,
+			statusComputed,
+			nextIsTextButton
+		], () => {
+			setTimeout(() => {
+				drawPixel();
+			});
+		});
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height, canvas } = preprocessData;
+			const pixelSize = calcPixelSize();
+			const borderRadius = getBorderRadius(canvas, pixelSize, borderRadiusComputed.value, shapeComputed.value, sizeComputed.value || "medium", innerInputGroup.value, first.value, last.value);
+			const borderColor = statusComputed.value !== "normal" ? getGlobalThemeColor(statusComputed.value === "error" ? "danger" : statusComputed.value, 6) : (hoverFlag.value || focusMode.value) && !disabledComputed.value && !readonlyComputed.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10);
+			const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+			const rad = BORDER_CORNER_RAD_RANGE;
+			if (borderColor) drawBorder(ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, innerInputGroup.value, first.value, last.value, nextIsTextButton.value);
+			const backgroundColor = disabledComputed.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
+			if (backgroundColor) floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
+		};
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+			});
+		});
+		useResizeObserver(wrapperRef, drawPixel);
+		useWatchGlobalCssVal(drawPixel);
+		useTransitionEnd(wrapperRef, drawPixel);
+		return (_ctx, _cache) => {
+			var _unref2;
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-input-tag", {
+					[`px-input-tag__${unref(sizeComputed)}`]: !!unref(sizeComputed),
+					[`px-input-tag__${unref(shapeComputed)}`]: !!unref(shapeComputed),
+					"px-input-tag__inner": innerInputGroup.value,
+					"px-input-tag__disabled": !!unref(disabledComputed)
+				}]),
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				onClick: focusInputHandler,
+				onMouseenter: mouseenterHandler,
+				onMouseleave: mouseleaveHandler,
+				onFocusout: blurHandler,
+				onFocusin: focusHandler
+			}, [
+				unref(slots).prefix ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_2, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(tagsShowed.value, (tag, index$1) => {
+						return openBlock(), createBlock(tag_default, mergeProps({
+							key: index$1,
+							size: tagSize.value,
+							variant: props.tagVariant,
+							theme: props.tagTheme,
+							closable: tagCanClose.value,
+							disabled: unref(disabledComputed),
+							color: props.tagColor
+						}, { ref_for: true }, props.tagProps, { onClose: (e) => tagCloseHandler(index$1, e) }), {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "tag", {
+								tag,
+								index: index$1
+							}, () => [createTextVNode(toDisplayString(tag), 1)])]),
+							_: 2
+						}, 1040, [
+							"size",
+							"variant",
+							"theme",
+							"closable",
+							"disabled",
+							"color",
+							"onClose"
+						]);
+					}), 128)),
+					tagsCollapsed.value.length && shouldCollapseTags.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [!props.collapseTagsPopover ? (openBlock(), createBlock(tag_default, mergeProps({
+						key: 0,
+						size: tagSize.value,
+						variant: props.tagVariant,
+						theme: props.tagTheme,
+						disabled: unref(disabledComputed),
+						color: props.tagColor
+					}, props.tagProps), {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "tag", {
+							tag: `+${tagsCollapsed.value.length}`,
+							index: -1
+						}, () => [createTextVNode("+" + toDisplayString(tagsCollapsed.value.length), 1)])]),
+						_: 3
+					}, 16, [
+						"size",
+						"variant",
+						"theme",
+						"disabled",
+						"color"
+					])) : (openBlock(), createBlock(popover_default, normalizeProps(mergeProps({ key: 1 }, popoverProps.value)), {
+						content: withCtx(() => [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(tagsCollapsed.value, (tag, index$1) => {
+							return openBlock(), createBlock(tag_default, mergeProps({
+								key: index$1,
+								size: tagSize.value,
+								variant: props.tagVariant,
+								theme: props.tagTheme,
+								closable: tagCanClose.value,
+								disabled: unref(disabledComputed),
+								color: props.tagColor
+							}, { ref_for: true }, props.tagProps, { onClose: (e) => tagCloseHandler(index$1 + Math.floor(props.maxDisplayTags), e) }), {
+								default: withCtx(() => [renderSlot(_ctx.$slots, "tag", {
+									tag,
+									index: index$1 + Math.floor(props.maxDisplayTags)
+								}, () => [createTextVNode(toDisplayString(tag), 1)])]),
+								_: 2
+							}, 1040, [
+								"size",
+								"variant",
+								"theme",
+								"closable",
+								"disabled",
+								"color",
+								"onClose"
+							]);
+						}), 128))])]),
+						default: withCtx(() => [createVNode(tag_default, mergeProps({
+							size: tagSize.value,
+							variant: props.tagVariant,
+							theme: props.tagTheme,
+							disabled: unref(disabledComputed),
+							color: props.tagColor
+						}, props.tagProps), {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "tag", {
+								tag: `+${tagsCollapsed.value.length}`,
+								index: -1
+							}, () => [createTextVNode("+" + toDisplayString(tagsCollapsed.value.length), 1)])]),
+							_: 3
+						}, 16, [
+							"size",
+							"variant",
+							"theme",
+							"disabled",
+							"color"
+						])]),
+						_: 3
+					}, 16))], 64)) : createCommentVNode("v-if", true),
+					createElementVNode("input", {
+						class: "px-input-tag-inner",
+						value: unref(inputValue),
+						ref_key: "inputRef",
+						ref: inputRef,
+						placeholder: unref(modelValue) && unref(modelValue).length ? "" : props.placeholder,
+						disabled: unref(disabledComputed) || unref(readonlyComputed),
+						autofocus: __props.autofocus,
+						onInput: withModifiers(inputHandler, ["stop"]),
+						onChange: withModifiers(inputChangeHandler, ["stop"]),
+						onCompositionstart: _cache[0] || (_cache[0] = (...args) => unref(compositionStartHandler) && unref(compositionStartHandler)(...args)),
+						onCompositionend: _cache[1] || (_cache[1] = (...args) => unref(compositionUpdateHandler) && unref(compositionUpdateHandler)(...args)),
+						onKeydown: withKeys(enterDownHandler, ["enter"])
+					}, null, 40, _hoisted_4)
+				]),
+				showClose.value ? (openBlock(), createElementBlock("div", _hoisted_5, [hoverFlag.value && !!((_unref2 = unref(modelValue)) === null || _unref2 === void 0 ? void 0 : _unref2.length) ? (openBlock(), createBlock(unref(times_circle_solid_default), {
+					key: 0,
+					class: "px-input-tag-icon",
+					onClick: clearHandler
+				})) : (openBlock(), createElementBlock("div", _hoisted_6))])) : createCommentVNode("v-if", true),
+				props.loading ? (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(unref(spinner_third_solid_default), { class: "px-input-tag-icon px-animation__loading" })])) : createCommentVNode("v-if", true),
+				unref(slots).suffix ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("v-if", true),
+				createElementVNode("canvas", {
+					class: "px-input-tag-canvas",
+					ref_key: "canvasRef",
+					ref: canvasRef
+				}, null, 512)
+			], 34);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { input_tag_default as t };