@pixelium/web-vue 0.0.1-beta → 0.0.2-fix

package/es/textarea/index.css

@@ -0,0 +1,108 @@
+div.px-textarea {
+  font-size: var(--text-size);
+}
+.px-textarea {
+  --px-medium-padding-x: var(--px-interval-2);
+  --px-large-padding-x: var(--px-interval-3);
+  --px-small-padding-x: var(--px-interval-2);
+  --padding-x-size: var(--px-medium-padding-x);
+  --text-size: var(--px-medium-font-size);
+  --textarea-size: var(--px-medium-size);
+  z-index: 0;
+  position: relative;
+  background-color: transparent;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  border-style: solid;
+  color: var(--px-neutral-10);
+  display: flex;
+  box-sizing: border-box;
+}
+.px-textarea-inner {
+  height: 100%;
+  border: 0;
+  background-color: transparent;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: var(--text-size);
+  line-height: var(--px-line-height);
+  font-family: var(--px-font);
+  padding: 0 var(--padding-x-size);
+  min-height: calc(var(--textarea-size) - var(--px-bit) * 2);
+  resize: none;
+}
+.px-textarea-inner:focus-visible {
+  outline-color: var(--px-neutral-10);
+  outline-offset: var(--px-bit);
+}
+.px-textarea-inner:disabled {
+  color: var(--px-neutral-10);
+}
+.px-textarea-inner::placeholder {
+  color: var(--px-neutral-8);
+  opacity: 1;
+}
+.px-textarea__resize .px-textarea-inner {
+  resize: vertical;
+}
+.px-textarea__large {
+  --padding-x-size: var(--px-large-padding-x);
+  --text-size: var(--px-large-font-size);
+  --input-size: var(--px-large-size);
+}
+.px-textarea__small {
+  --padding-x-size: var(--px-small-padding-x);
+  --input-size: var(--px-small-size);
+  --text-size: var(--px-small-font-size);
+}
+.px-textarea__disabled {
+  cursor: not-allowed;
+}
+.px-textarea__disabled .px-textarea-inner:disabled {
+  cursor: not-allowed;
+  color: var(--px-neutral-8);
+}
+.px-textarea-addition-wrapper {
+  position: absolute;
+  bottom: 0;
+  right: var(--padding-x-size);
+  display: flex;
+  align-items: center;
+}
+.px-textarea-count-wrapper,
+.px-textarea-loading-wrapper,
+.px-textarea-close-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-left: var(--px-interval-2);
+}
+.px-textarea-close-wrapper .px-textarea-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  cursor: pointer;
+  fill: var(--px-neutral-8);
+  transition: 0.25s;
+}
+.px-textarea-close-wrapper .px-textarea-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-textarea-close-wrapper .px-textarea-icon:active {
+  fill: var(--px-neutral-9);
+}
+.px-textarea-loading-wrapper .px-textarea-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  fill: var(--px-primary-6);
+}
+.px-textarea-count-wrapper {
+  color: var(--px-neutral-8);
+}
+.px-textarea-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}

package/es/textarea/index.d.ts

@@ -0,0 +1,49 @@
+import type { TextareaProps } from './type';
+import { type Nullish } from 'parsnip-kit';
+declare var __VLS_9: {
+    value: string | Nullish;
+    count: number;
+    maxLength: number | undefined;
+};
+type __VLS_Slots = {} & {
+    count?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TextareaProps, {
+    focus: () => void;
+    blur: () => void;
+    clear: () => Promise<void>;
+    select: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (value: string, e: Event) => any;
+    change: (value: string, e?: Event | undefined) => any;
+    clear: (value: string) => any;
+    blur: (e: FocusEvent) => any;
+    focus: (e: FocusEvent) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{
+    onInput?: ((value: string, e: Event) => any) | undefined;
+    onChange?: ((value: string, e?: Event | undefined) => any) | undefined;
+    onClear?: ((value: string) => any) | undefined;
+    onBlur?: ((e: FocusEvent) => any) | undefined;
+    onFocus?: ((e: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    size: "medium" | "large" | "small";
+    disabled: boolean;
+    loading: boolean;
+    resize: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    showCount: boolean;
+    status: "success" | "warning" | "error" | "normal";
+    minRows: number;
+    maxRows: number;
+    autoResize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/textarea/index.js

@@ -0,0 +1,267 @@
+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"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "px-textarea-count-wrapper"
+};
+const _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 */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/textarea/type.d.ts

@@ -0,0 +1,169 @@
+export type TextareaProps = {
+    /**
+     * @property {string | null} [modelValue]
+     * @version 0.0.2
+     */
+    modelValue?: string | null;
+    /**
+     * @property {string | null} [defaultValue]
+     * @version 0.0.2
+     */
+    defaultValue?: string | null;
+    /**
+     * @property {number} [rows]
+     * @version 0.0.2
+     */
+    rows?: number;
+    /**
+     * @property {number} [minRows=1]
+     * @version 0.0.2
+     */
+    minRows?: number;
+    /**
+     * @property {number} [maxRows=Infinity]
+     * @version 0.0.2
+     */
+    maxRows?: number;
+    /**
+     * @property {boolean} [autoResize=false]
+     * @version 0.0.2
+     */
+    autoResize?: boolean;
+    /**
+     * @property {boolean} [resize=true]
+     * @version 0.0.2
+     */
+    resize?: boolean;
+    /**
+     * @property {string} [placeholder]
+     * @version 0.0.2
+     */
+    placeholder?: string;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.2
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.2
+     */
+    readonly?: boolean;
+    /**
+     * @property {boolean} [clearable=false]
+     * @version 0.0.2
+     */
+    clearable?: boolean;
+    /**
+     * @property {boolean} [loading=false]
+     * @version 0.0.2
+     */
+    loading?: boolean;
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.2
+     */
+    size?: 'medium' | 'large' | 'small';
+    /**
+     * @property {number} [maxLength]
+     * @version 0.0.2
+     */
+    maxLength?: number;
+    /**
+     * @property {boolean} [showCount=false]
+     * @version 0.0.2
+     */
+    showCount?: boolean;
+    /**
+     * @property {(value: string) => number} [countGraphemes]
+     * @version 0.0.2
+     */
+    countGraphemes?: (value: string) => number;
+    /**
+     * @property {(value: string, limit: number) => string} [sliceGraphemes]
+     * @version 0.0.2
+     */
+    sliceGraphemes?: (value: string, limit: number) => string;
+    /**
+     * @property {'success' | 'warning' | 'error' | 'normal'} [status='normal']
+     * @version 0.0.2
+     */
+    status?: 'success' | 'warning' | 'error' | 'normal';
+    /**
+     * @property {boolean} [autofocus=false]
+     * @version 0.0.2
+     */
+    autofocus?: boolean;
+};
+export type TextareaEvents = {
+    /**
+     * @event input
+     * @param {string} value
+     * @param {Event} e
+     * @version 0.0.2
+     */
+    input: [value: string, e: Event];
+    /**
+     * @event update:modelValue
+     * @param {string} value
+     * @version 0.0.2
+     */
+    'update:modelValue': [value: string];
+    /**
+     * @event change
+     * @param {string} value
+     * @param {Event | undefined} e
+     * @version 0.0.2
+     */
+    change: [value: string, e?: Event];
+    /**
+     * @event clear
+     * @param {string} value
+     * @version 0.0.2
+     */
+    clear: [value: string];
+    /**
+     * @event blur
+     * @param {FocusEvent} e
+     * @version 0.0.2
+     */
+    blur: [e: FocusEvent];
+    /**
+     * @event focus
+     * @param {FocusEvent} e
+     * @version 0.0.2
+     */
+    focus: [e: FocusEvent];
+};
+export type TextareaSlots = {
+    /**
+     * @slot count
+     * @param {number} inputValue
+     * @param {number} currentLength
+     * @param {number} maxLength
+     * @version 0.0.2
+     */
+    count: {};
+};
+export type TextareaExpose = {
+    /**
+     * @property {() => void} focus
+     * @version 0.0.2
+     */
+    focus: () => void;
+    /**
+     * @property {() => void} blur
+     * @version 0.0.2
+     */
+    blur: () => void;
+    /**
+     * @property {() => void} clear
+     * @version 0.0.2
+     */
+    clear: () => void;
+    /**
+     * @property {() => void} select
+     * @version 0.0.2
+     */
+    select: () => void;
+};

package/es/tooltip/css.js

@@ -0,0 +1 @@
+import '../index.css'

package/es/tooltip/index.d.ts

@@ -0,0 +1,20 @@
+import type { TooltipProps } from './type';
+declare const _default: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e: MouseEvent) => any;
+    open: (e: MouseEvent) => any;
+    "update:visible": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{
+    onClose?: ((e: MouseEvent) => any) | undefined;
+    onOpen?: ((e: MouseEvent) => any) | undefined;
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+}>, {
+    variant: "dark" | "light";
+    placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    root: HTMLElement | string;
+    offset: number;
+    visible: boolean | null;
+    defaultVisible: boolean | null;
+    arrow: boolean;
+    trigger: "hover" | "click";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;