@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/textarea/index.js

@@ -1,267 +1,279 @@
 import './css.js'
-import { defineComponent, shallowRef, computed, ref, watch, onMounted, nextTick, createElementBlock, openBlock, normalizeClass, createElementVNode, unref, withModifiers, normalizeStyle, createCommentVNode, createVNode, renderSlot, toDisplayString } from "vue";
-import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
-import { d as draw } from "./draw.js";
-import { g as getGlobalThemeColor } from "../share/util/color.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 { a as Ne, N } from "../aside/index.js";
-import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
-import { u as useTextareaHeight } from "../share/hook/use-textarea-height.js";
-import { a as canvasPreprocess, c as calcPixelSize } from "../share/util/plot.js";
-import { u as useControlledMode } from "../share/hook/use-controlled-mode.js";
-const _hoisted_1 = ["value", "placeholder", "disabled", "autofocus", "rows"];
-const _hoisted_2 = { class: "px-textarea-addition-wrapper" };
-const _hoisted_3 = {
-  key: 0,
-  class: "px-textarea-close-wrapper"
+import { O as Ue, V as spinner_third_solid_default, _ as E, l as times_circle_solid_default } from "../vendor.js";
+import { i as canvasPreprocess, n as calcPixelSize } 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 { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { i as FORM_ITEM_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 draw } from "./draw.js";
+import { t as useTextareaHeight } from "../share/hook/use-textarea-height.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, watch, withModifiers } from "vue";
+var _hoisted_1 = [
+	"value",
+	"placeholder",
+	"disabled",
+	"autofocus",
+	"rows"
+];
+var _hoisted_2 = { class: "px-textarea-addition-wrapper" };
+var _hoisted_3 = {
+	key: 0,
+	class: "px-textarea-close-wrapper"
 };
-const _hoisted_4 = {
-  key: 1,
-  class: "px-textarea-count-wrapper"
+var _hoisted_4 = {
+	key: 1,
+	class: "px-textarea-count-wrapper"
 };
-const _hoisted_5 = {
-  key: 2,
-  class: "px-textarea-loading-wrapper"
+var _hoisted_5 = {
+	key: 2,
+	class: "px-textarea-loading-wrapper"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Textarea"
-  },
-  __name: "index",
-  props: {
-    modelValue: null,
-    defaultValue: null,
-    rows: null,
-    minRows: { default: 1 },
-    maxRows: { default: Infinity },
-    autoResize: { type: Boolean, default: false },
-    resize: { type: Boolean, default: true },
-    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" },
-    maxLength: null,
-    showCount: { type: Boolean, default: false },
-    countGraphemes: { type: Function },
-    sliceGraphemes: { type: Function },
-    status: { default: "normal" },
-    autofocus: { type: Boolean }
-  },
-  emits: ["input", "update:modelValue", "change", "clear", "blur", "focus"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const [isComposing, compositionStartHandler, compositionUpdateHandler] = useComposition({
-      afterComposition: (e) => {
-        nextTick(() => {
-          inputHandler(e);
-        });
-      }
-    });
-    const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
-      defaultField: "defaultValue",
-      transform: (e) => {
-        return e || "";
-      }
-    });
-    const wrapperRef = shallowRef(null);
-    const canvasRef = shallowRef(null);
-    const inputRef = shallowRef(null);
-    const [height, minHeight, maxHeight, refreshHeight] = useTextareaHeight(inputRef, props);
-    const currentLength = computed(() => {
-      return modelValue.value ? props.countGraphemes ? props.countGraphemes(modelValue.value) : modelValue.value.length : 0;
-    });
-    const inputHandler = async (e) => {
-      const target = e.target;
-      let newValue = target.value;
-      modelValue.value = newValue;
-      if (isComposing.value) {
-        return;
-      }
-      if (props.maxLength) {
-        if (props.countGraphemes && props.sliceGraphemes) {
-          await nextTick();
-          newValue = props.sliceGraphemes(newValue, props.maxLength);
-        } else {
-          newValue = newValue.slice(0, props.maxLength);
-        }
-      }
-      modelValue.value = newValue;
-      emits("input", newValue, e);
-      updateModelValue(newValue);
-    };
-    const clearHandler = async () => {
-      await updateModelValue("");
-      emits("change", "");
-      emits("clear", "");
-    };
-    const changeHandler = (e) => {
-      const target = e.target;
-      refreshHeight();
-      emits("change", target.value, e);
-    };
-    const focusMode = ref(false);
-    const setHeight = () => {
-      if (props.autoResize && inputRef.value && height.value) {
-        inputRef.value.style.height = height.value + "px";
-      }
-    };
-    watch(height, () => {
-      setHeight();
-    });
-    const blurHandler = () => {
-      setHeight();
-      focusMode.value = false;
-    };
-    const focusHandler = () => {
-      setHeight();
-      focusMode.value = true;
-    };
-    const showClose = computed(() => {
-      return props.clearable && focusMode.value && !props.disabled && !props.readonly && !!modelValue.value;
-    });
-    const focusInputHandler = () => {
-      var _a;
-      (_a = inputRef.value) == null ? void 0 : _a.focus();
-    };
-    const hoverFlag = ref(false);
-    const mouseenterHandler = () => {
-      hoverFlag.value = true;
-    };
-    const mouseleaveHandler = () => {
-      hoverFlag.value = false;
-    };
-    __expose({
-      focus: () => {
-        var _a;
-        (_a = inputRef.value) == null ? void 0 : _a.focus();
-      },
-      blur: () => {
-        var _a;
-        (_a = inputRef.value) == null ? void 0 : _a.blur();
-      },
-      clear: () => clearHandler(),
-      select: () => {
-        var _a;
-        (_a = inputRef.value) == null ? void 0 : _a.select();
-      }
-    });
-    const darkMode = useDarkMode();
-    watch([() => props.size, () => props.disabled, darkMode, hoverFlag, focusMode], () => {
-      setTimeout(() => {
-        drawPixelDebounce();
-      });
-    });
-    const drawPixel = () => {
-      const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
-      if (!preprocessData) {
-        return;
-      }
-      const { ctx, width, height: height2 } = preprocessData;
-      const pixelSize = calcPixelSize();
-      const borderColor = props.status !== "normal" ? getGlobalThemeColor(props.status === "error" ? "danger" : props.status, 6) : (hoverFlag.value || focusMode.value) && !props.disabled && !props.readonly ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10);
-      const backgroundColor = props.disabled ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
-      draw(ctx, width, height2, borderColor, backgroundColor, pixelSize);
-    };
-    const drawPixelDebounce = Ne(drawPixel, 0, {
-      maxWait: 50
-    });
-    onMounted(() => {
-      nextTick(() => {
-        drawPixel();
-      });
-      setTimeout(() => {
-        setHeight();
-      });
-    });
-    useResizeObserver(wrapperRef, drawPixelDebounce);
-    useWatchGlobalCssVal(drawPixelDebounce);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["pixelium px-textarea", {
-            [`px-textarea__${props.size}`]: !!props.size,
-            "px-textarea__disabled": !!props.disabled,
-            "px-textarea__resize": !!props.resize
-          }]),
-          ref_key: "wrapperRef",
-          ref: wrapperRef,
-          onClick: focusInputHandler,
-          onMouseenter: mouseenterHandler,
-          onMouseleave: mouseleaveHandler
-        },
-        [
-          createElementVNode("textarea", {
-            class: "px-textarea-inner",
-            value: unref(modelValue),
-            ref_key: "inputRef",
-            ref: inputRef,
-            placeholder: props.placeholder,
-            disabled: props.disabled || props.readonly,
-            autofocus: __props.autofocus,
-            rows: props.rows,
-            style: normalizeStyle({
-              minHeight: unref(minHeight) ? unref(minHeight) + "px" : void 0,
-              maxHeight: unref(maxHeight) ? unref(maxHeight) + "px" : void 0
-            }),
-            onInput: withModifiers(inputHandler, ["stop"]),
-            onChange: withModifiers(changeHandler, ["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))
-          }, null, 44, _hoisted_1),
-          createElementVNode("div", _hoisted_2, [
-            showClose.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
-              createVNode(unref(TimesCircleSolid), {
-                class: "px-textarea-icon",
-                onClick: clearHandler
-              })
-            ])) : createCommentVNode("v-if", true),
-            props.showCount ? (openBlock(), createElementBlock("div", _hoisted_4, [
-              renderSlot(_ctx.$slots, "count", {
-                value: unref(modelValue),
-                count: currentLength.value,
-                maxLength: props.maxLength
-              }, () => [
-                createElementVNode(
-                  "span",
-                  null,
-                  toDisplayString(currentLength.value) + toDisplayString(unref(N)(props.maxLength) ? "" : " / " + props.maxLength),
-                  1
-                  /* TEXT */
-                )
-              ])
-            ])) : createCommentVNode("v-if", true),
-            props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, [
-              createVNode(unref(SpinnerThirdSolid), { class: "px-textarea-icon px-animation__loading" })
-            ])) : createCommentVNode("v-if", true)
-          ]),
-          createElementVNode(
-            "canvas",
-            {
-              class: "px-textarea-canvas",
-              ref_key: "canvasRef",
-              ref: canvasRef
-            },
-            null,
-            512
-            /* NEED_PATCH */
-          )
-        ],
-        34
-        /* CLASS, NEED_HYDRATION */
-      );
-    };
-  }
+var textarea_default = /* @__PURE__ */ defineComponent({
+	name: "Textarea",
+	__name: "index",
+	props: {
+		modelValue: null,
+		defaultValue: null,
+		rows: null,
+		minRows: { default: 1 },
+		maxRows: { default: Infinity },
+		autoResize: {
+			type: Boolean,
+			default: false
+		},
+		resize: {
+			type: Boolean,
+			default: true
+		},
+		placeholder: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		size: null,
+		maxLength: null,
+		showCount: {
+			type: Boolean,
+			default: false
+		},
+		countGraphemes: { type: Function },
+		sliceGraphemes: { type: Function },
+		status: { default: "normal" },
+		autofocus: { type: Boolean }
+	},
+	emits: [
+		"input",
+		"update:modelValue",
+		"change",
+		"clear",
+		"blur",
+		"focus"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
+		const emits = __emit;
+		const [isComposing, compositionStartHandler, compositionUpdateHandler] = useComposition({ afterComposition: (e) => {
+			nextTick(() => {
+				inputHandler(e);
+			});
+		} });
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform: (e) => {
+				return e || "";
+			}
+		});
+		const disabledComputed = createProvideComputed("disabled", [formItemProvide, props], "or");
+		const readonlyComputed = createProvideComputed("readonly", [formItemProvide, props], "or");
+		const sizeComputed = createProvideComputed("size", () => [
+			props.size && props,
+			formItemProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const statusComputed = createProvideComputed("status", [formItemProvide, props]);
+		const wrapperRef = shallowRef(null);
+		const canvasRef = shallowRef(null);
+		const inputRef = shallowRef(null);
+		const [height, minHeight, maxHeight, refreshHeight] = useTextareaHeight(inputRef, props);
+		const currentLength = computed(() => {
+			return modelValue.value ? props.countGraphemes ? props.countGraphemes(modelValue.value) : modelValue.value.length : 0;
+		});
+		const inputHandler = async (e) => {
+			let newValue = e.target.value;
+			modelValue.value = newValue;
+			if (isComposing.value) return;
+			if (props.maxLength) if (props.countGraphemes && props.sliceGraphemes) {
+				await nextTick();
+				newValue = props.sliceGraphemes(newValue, props.maxLength);
+			} else newValue = newValue.slice(0, props.maxLength);
+			modelValue.value = newValue;
+			emits("input", newValue, e);
+			updateModelValue(newValue);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.inputHandler();
+		};
+		const clearHandler = async () => {
+			await updateModelValue("");
+			emits("change", "");
+			emits("clear", "");
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const changeHandler = (e) => {
+			const target = e.target;
+			refreshHeight();
+			emits("change", target.value, e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const focusMode = ref(false);
+		const setHeight = () => {
+			if (props.autoResize && inputRef.value && height.value) inputRef.value.style.height = height.value + "px";
+		};
+		watch(height, () => {
+			setHeight();
+		});
+		const blurHandler = (e) => {
+			setHeight();
+			focusMode.value = false;
+			emits("blur", e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const focusHandler = (e) => {
+			setHeight();
+			focusMode.value = true;
+			emits("focus", e);
+		};
+		const showClose = computed(() => {
+			return props.clearable && focusMode.value && !disabledComputed.value && !readonlyComputed.value && !!modelValue.value;
+		});
+		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;
+		};
+		__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(),
+			select: () => {
+				var _inputRef$value4;
+				(_inputRef$value4 = inputRef.value) === null || _inputRef$value4 === void 0 || _inputRef$value4.select();
+			}
+		});
+		watch([
+			sizeComputed,
+			disabledComputed,
+			readonlyComputed,
+			useDarkMode(),
+			hoverFlag,
+			focusMode,
+			statusComputed
+		], () => {
+			setTimeout(() => {
+				drawPixelDebounce();
+			});
+		});
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height: height$1 } = preprocessData;
+			const pixelSize = calcPixelSize();
+			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 backgroundColor = disabledComputed.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
+			if (borderColor && backgroundColor) draw(ctx, width, height$1, borderColor, backgroundColor, pixelSize);
+		};
+		const drawPixelDebounce = Ue(drawPixel, 0, { maxWait: 50 });
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+			});
+			setTimeout(() => {
+				setHeight();
+			});
+		});
+		useResizeObserver(wrapperRef, drawPixelDebounce);
+		useWatchGlobalCssVal(drawPixelDebounce);
+		useTransitionEnd(wrapperRef, drawPixel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-textarea", {
+					[`px-textarea__${unref(sizeComputed)}`]: !!unref(sizeComputed),
+					"px-textarea__disabled": !!unref(disabledComputed),
+					"px-textarea__resize": !!props.resize
+				}]),
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				onClick: focusInputHandler,
+				onMouseenter: mouseenterHandler,
+				onMouseleave: mouseleaveHandler,
+				onFocusout: blurHandler,
+				onFocusin: focusHandler
+			}, [
+				createElementVNode("textarea", {
+					class: "px-textarea-inner",
+					value: unref(modelValue),
+					ref_key: "inputRef",
+					ref: inputRef,
+					placeholder: props.placeholder,
+					disabled: unref(disabledComputed) || unref(readonlyComputed),
+					autofocus: __props.autofocus,
+					rows: props.rows,
+					style: normalizeStyle({
+						minHeight: unref(minHeight) ? unref(minHeight) + "px" : void 0,
+						maxHeight: unref(maxHeight) ? unref(maxHeight) + "px" : void 0
+					}),
+					onInput: withModifiers(inputHandler, ["stop"]),
+					onChange: withModifiers(changeHandler, ["stop"]),
+					onCompositionstart: _cache[0] || (_cache[0] = (...args) => unref(compositionStartHandler) && unref(compositionStartHandler)(...args)),
+					onCompositionend: _cache[1] || (_cache[1] = (...args) => unref(compositionUpdateHandler) && unref(compositionUpdateHandler)(...args))
+				}, null, 44, _hoisted_1),
+				createElementVNode("div", _hoisted_2, [
+					showClose.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(times_circle_solid_default), {
+						class: "px-textarea-icon",
+						onClick: clearHandler
+					})])) : createCommentVNode("v-if", true),
+					props.showCount ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "count", {
+						value: unref(modelValue),
+						count: currentLength.value,
+						maxLength: props.maxLength
+					}, () => [createElementVNode("span", null, toDisplayString(currentLength.value) + toDisplayString(unref(E)(props.maxLength) ? "" : " / " + props.maxLength), 1)])])) : createCommentVNode("v-if", true),
+					props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(unref(spinner_third_solid_default), { class: "px-textarea-icon px-animation__loading" })])) : createCommentVNode("v-if", true)
+				]),
+				createElementVNode("canvas", {
+					class: "px-textarea-canvas",
+					ref_key: "canvasRef",
+					ref: canvasRef
+				}, null, 512)
+			], 34);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { textarea_default as t };