@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/input-tag/index.js

@@ -0,0 +1,474 @@
+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"
+};
+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"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "px-input-tag-icon-placeholder"
+};
+const _hoisted_7 = {
+  key: 2,
+  class: "px-input-tag-loading-wrapper"
+};
+const _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 */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/input-tag/type.d.ts

@@ -0,0 +1,212 @@
+import type { NumberOrPercentage } from '../share/type';
+import type { TagProps } from '../tag/type';
+export type InputTagProps = {
+    /**
+     * @property {string[] | null} [modelValue]
+     * @version 0.0.2
+     */
+    modelValue?: string[] | null;
+    /**
+     * @property {string[] | null} [defaultValue]
+     * @version 0.0.2
+     */
+    defaultValue?: string[] | null;
+    /**
+     * @property {string | null} [inputValue]
+     * @version 0.0.2
+     */
+    inputValue?: string | null;
+    /**
+     * @property {string | null} [defaultInputValue]
+     * @version 0.0.2
+     */
+    defaultInputValue?: string | null;
+    /**
+     * @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 {'default' | 'round'} [shape='default']
+     * @version 0.0.2
+     */
+    shape?: 'default' | 'round';
+    /**
+     * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
+     * @version 0.0.2
+     */
+    borderRadius?: NumberOrPercentage | NumberOrPercentage[];
+    /**
+     * @property {number} [maxLength]
+     * @version 0.0.2
+     */
+    maxLength?: number;
+    /**
+     * @property {boolean} [collapseTags=false]
+     * @version 0.0.2
+     */
+    collapseTags?: boolean;
+    /**
+     * @property {number} [collapseTags]
+     * @version 0.0.2
+     */
+    maxDisplayTags?: number;
+    /**
+     * @property {boolean} [collapseTagsPopover=true]
+     * @version 0.0.2
+     */
+    collapseTagsPopover?: boolean;
+    /**
+     * @property {'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'} [tagTheme='info']
+     * @version 0.0.2
+     */
+    tagTheme?: TagProps['theme'];
+    /**
+     * @property {'primary' | 'plain' | 'outline'} [tagVariant='plain']
+     * @version 0.0.2
+     */
+    tagVariant?: TagProps['variant'];
+    /**
+     * @property {string} [tagColor]
+     * @version 0.0.2
+     */
+    tagColor?: TagProps['color'];
+    /**
+     * @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 InputTagEvents = {
+    /**
+     * @event update:modelValue
+     * @param {string[]} value
+     * @version 0.0.2
+     */
+    'update:modelValue': [value: string[]];
+    /**
+     * @event tagAdd
+     * @param {string} value
+     * @param {KeyboardEvent} e
+     * @version 0.0.2
+     */
+    tagAdd: [value: string, e: KeyboardEvent];
+    /**
+     * @event tagClose
+     * @param {string} value
+     * @param {number} index
+     * @param {MouseEvent} e
+     * @version 0.0.2
+     */
+    tagClose: [value: string, index: number, e: MouseEvent];
+    /**
+     * @event change
+     * @param {string[]} value
+     * @version 0.0.2
+     */
+    change: [value: string[]];
+    /**
+     * @event input
+     * @param {string} value
+     * @param {Event} e
+     * @version 0.0.2
+     */
+    input: [value: string, e: Event];
+    /**
+     * @event update:inputValue
+     * @param {string} value
+     * @version 0.0.2
+     */
+    'update:inputValue': [value: string];
+    /**
+     * @event inputChange
+     * @param {string} value
+     * @param {Event | undefined} e
+     * @version 0.0.2
+     */
+    inputChange: [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 InputTagSlots = {
+    /**
+     * @slot prefix
+     * @version 0.0.2
+     */
+    prefix: {};
+    /**
+     * @slot suffix
+     * @version 0.0.2
+     */
+    suffix: {};
+    /**
+     * @slot tag
+     * @param {string} tag
+     * @param {number} index
+     * @version 0.0.2
+     */
+    tag: {};
+};
+export type InputTagExpose = {
+    /**
+     * @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;
+};

package/es/link/css.js

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