@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/auto-complete/draw.js

@@ -0,0 +1,52 @@
+import { d as drawCircle } from "../share/util/plot.js";
+import { r as rgbaColor2string } from "../share/util/color.js";
+const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, inner, first, last) => {
+  ctx.fillStyle = rgbaColor2string(borderColor);
+  for (let i = 0; i < 4; i++) {
+    if (borderRadius[i] <= pixelSize) {
+      continue;
+    }
+    if (i === 1 || i === 2 ? inner && last || !inner : true) {
+      drawCircle(
+        ctx,
+        center[i][0],
+        center[i][1],
+        borderRadius[i],
+        rad[i][0],
+        rad[i][1],
+        pixelSize
+      );
+    }
+  }
+  if (center[1][0] + pixelSize > center[0][0]) {
+    ctx.fillRect(center[0][0], 0, center[1][0] - center[0][0] + pixelSize, pixelSize);
+  }
+  if (center[2][1] + pixelSize > center[1][1] && (inner && last || !inner)) {
+    ctx.fillRect(
+      width - pixelSize,
+      center[1][1],
+      pixelSize,
+      center[2][1] - center[1][1] + pixelSize
+    );
+  }
+  if (center[3][0] < center[2][0] + pixelSize) {
+    ctx.fillRect(
+      center[3][0],
+      height - pixelSize,
+      center[2][0] - center[3][0] + pixelSize,
+      pixelSize
+    );
+  }
+  if (center[3][1] + pixelSize > center[0][1] && !(inner && !first)) {
+    ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
+  }
+  if (inner && !first) {
+    ctx.fillRect(pixelSize / 2, 0, pixelSize / 2, height);
+  }
+  if (inner && !last) {
+    ctx.fillRect(width - 2 * pixelSize - 1, 0, pixelSize, height);
+  }
+};
+export {
+  drawBorder as d
+};

package/es/auto-complete/index.css

@@ -0,0 +1,123 @@
+div.px-auto-complete {
+  font-size: var(--text-size);
+}
+.px-auto-complete {
+  --auto-complete-size: var(--px-medium-size);
+  --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);
+  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;
+  padding: 0 var(--padding-x-size);
+  box-sizing: border-box;
+  height: var(--auto-complete-size);
+  cursor: text;
+}
+.px-auto-complete__inner {
+  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
+}
+.px-auto-complete__inner:last-child {
+  padding-right: var(--padding-x-size);
+}
+.px-auto-complete-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;
+}
+.px-auto-complete-inner:focus-visible {
+  outline-color: var(--px-neutral-10);
+  outline-offset: var(--px-bit);
+}
+.px-auto-complete-inner:disabled {
+  color: var(--px-neutral-10);
+}
+.px-auto-complete-inner::placeholder {
+  color: var(--px-neutral-8);
+  opacity: 1;
+}
+.px-auto-complete__large {
+  --padding-x-size: var(--px-large-padding-x);
+  --text-size: var(--px-large-font-size);
+  --auto-complete-size: var(--px-large-size);
+}
+.px-auto-complete__small {
+  --padding-x-size: var(--px-small-padding-x);
+  --auto-complete-size: var(--px-small-size);
+  --text-size: var(--px-small-font-size);
+}
+.px-auto-complete__disabled {
+  cursor: not-allowed;
+}
+.px-auto-complete__disabled .px-auto-complete-inner:disabled {
+  cursor: not-allowed;
+  color: var(--px-neutral-8);
+}
+.px-auto-complete-prefix-wrapper,
+.px-auto-complete-suffix-wrapper,
+.px-auto-complete-loading-wrapper,
+.px-auto-complete-close-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.px-auto-complete-prefix-wrapper {
+  margin-right: var(--px-interval-2);
+}
+.px-auto-complete-suffix-wrapper,
+.px-auto-complete-loading-wrapper,
+.px-auto-complete-close-wrapper {
+  margin-left: var(--px-interval-2);
+}
+.px-auto-complete-close-wrapper .px-auto-complete-icon-placeholder {
+  width: var(--text-size);
+  height: var(--text-size);
+}
+.px-auto-complete-close-wrapper .px-auto-complete-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  cursor: pointer;
+  fill: var(--px-neutral-8);
+  transition: 0.25s;
+}
+.px-auto-complete-close-wrapper .px-auto-complete-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-auto-complete-close-wrapper .px-auto-complete-icon:active {
+  fill: var(--px-neutral-9);
+}
+.px-auto-complete-loading-wrapper .px-auto-complete-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  fill: var(--px-primary-6);
+}
+.px-auto-complete-prefix-wrapper,
+.px-auto-complete-suffix-wrapper {
+  color: var(--px-neutral-10);
+}
+.px-auto-complete-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}
+.px-auto-complete-empty {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}

package/es/auto-complete/index.d.ts

@@ -0,0 +1,35 @@
+import type { AutoCompleteGroupOption, AutoCompleteOption, AutoCompleteProps } from './type';
+declare const _default: import("vue").DefineComponent<AutoCompleteProps, {
+    focus: () => void;
+    blur: () => void;
+    clear: () => Promise<void>;
+    select: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (value: string, e: Event) => any;
+    select: (value: string, option: string | AutoCompleteOption, e: MouseEvent) => 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<AutoCompleteProps> & Readonly<{
+    onInput?: ((value: string, e: Event) => any) | undefined;
+    onSelect?: ((value: string, option: string | AutoCompleteOption, e: MouseEvent) => 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;
+}>, {
+    shape: "default" | "round";
+    size: "medium" | "large" | "small";
+    disabled: boolean;
+    loading: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    status: "success" | "warning" | "error" | "normal";
+    options: (string | AutoCompleteOption | AutoCompleteGroupOption)[];
+    showPopoverEmpty: boolean;
+    append: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/auto-complete/index.js

@@ -0,0 +1,402 @@
+import './css.js'
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, useAttrs, getCurrentInstance, ref, inject, computed, shallowRef, useSlots, watch, onMounted, nextTick, createVNode, Fragment, h } 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 { c as calcPixelSize, a as canvasPreprocess, 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 { 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 "../popover/index.js";
+import { _ as _sfc_main$4 } from "../empty/index.js";
+import { _ as _sfc_main$3 } from "../option-list/index.js";
+import { d as defaultFilter } from "../share/util/common.js";
+import { p } from "../aside/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 SpinnerThirdSolid = /* @__PURE__ */ defineComponent({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "svg",
+        {
+          class: "px-icon-hn",
+          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24"
+        },
+        [..._cache[0] || (_cache[0] = [
+          createElementVNode(
+            "path",
+            { d: "M23 9v6h-1v2h-3v-2h1V9h-1V7h-1V6h-1V5h-2V4h-2V3h-1V1h3v1h2v1h2v1h1v1h1v2h1v2z" },
+            null,
+            -1
+            /* CACHED */
+          )
+        ])],
+        4
+        /* STYLE */
+      );
+    };
+  }
+});
+const TimesCircleSolid = /* @__PURE__ */ defineComponent({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "svg",
+        {
+          class: "px-icon-hn",
+          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24"
+        },
+        [..._cache[0] || (_cache[0] = [
+          createElementVNode(
+            "path",
+            { d: "M22 9V7h-1V5h-1V4h-1V3h-2V2h-2V1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1V9zm-8 7v-1h-1v-1h-2v1h-1v1H9v1H8v-1H7v-1h1v-1h1v-1h1v-2H9v-1H8V9H7V8h1V7h1v1h1v1h1v1h2V9h1V8h1V7h1v1h1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h-1v1h-1v-1z" },
+            null,
+            -1
+            /* CACHED */
+          )
+        ])],
+        4
+        /* STYLE */
+      );
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "AutoComplete"
+  },
+  __name: "index",
+  props: {
+    modelValue: null,
+    defaultValue: null,
+    options: {
+      default: () => []
+    },
+    placeholder: null,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    showPopoverEmpty: {
+      type: Boolean,
+      default: false
+    },
+    shouldShowPopover: {
+      type: Function
+    },
+    filter: {
+      type: Function
+    },
+    append: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      default: "medium"
+    },
+    shape: {
+      default: "default"
+    },
+    borderRadius: null,
+    status: {
+      default: "normal"
+    },
+    autofocus: {
+      type: Boolean
+    }
+  },
+  emits: ["input", "update:modelValue", "change", "clear", "blur", "focus", "select"],
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    var _a;
+    const attrs = useAttrs();
+    const pixelSize = calcPixelSize();
+    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 [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 triggerPopover = async () => {
+      await nextTick();
+      if (props.shouldShowPopover) {
+        popoverVisible.value = !!props.shouldShowPopover(modelValue.value || "", optionsFiltered.value);
+        return;
+      }
+      if (modelValue.value && (!props.showPopoverEmpty && optionsFiltered.value.length || props.showPopoverEmpty)) {
+        popoverVisible.value = true;
+      } else {
+        popoverVisible.value = false;
+      }
+    };
+    const closePopover = async () => {
+      popoverVisible.value = false;
+    };
+    const inputHandler = async (e) => {
+      e.stopPropagation();
+      const target = e.target;
+      const newValue = target.value;
+      modelValue.value = newValue;
+      if (isComposing.value) {
+        return;
+      }
+      emits("input", newValue, e);
+      await updateModelValue(newValue);
+      triggerPopover();
+    };
+    const clearHandler = async () => {
+      await updateModelValue("");
+      emits("change", "");
+      emits("clear", "");
+    };
+    const changeHandler = (e) => {
+      e.stopPropagation();
+      const target = e.target;
+      emits("change", target.value, e);
+    };
+    const focusMode = ref(false);
+    const blurHandler = () => {
+      focusMode.value = false;
+    };
+    const focusHandler = () => {
+      focusMode.value = true;
+    };
+    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 selectHandler = async (value, option, e) => {
+      const nextValue = props.append ? modelValue.value + value : value;
+      await updateModelValue(nextValue);
+      closePopover();
+      emits("select", nextValue, option, e);
+    };
+    const slots = useSlots();
+    const optionsFiltered = computed(() => {
+      if (props.filter) {
+        return props.filter(modelValue.value || "", props.options || []);
+      }
+      if (!modelValue.value || !modelValue.value.trim()) {
+        return [];
+      }
+      return defaultFilter(modelValue.value, props.options || []);
+    });
+    __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(),
+      select: () => {
+        var _a2;
+        (_a2 = inputRef.value) == null ? void 0 : _a2.select();
+      }
+    });
+    const popoverVisible = ref(false);
+    const popoverVisibleUpdateHandler = (value) => {
+      if (!value) {
+        popoverVisible.value = value;
+      }
+    };
+    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 pixelSize2 = calcPixelSize();
+      const borderRadius = getBorderRadius(canvas, pixelSize2, 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, pixelSize2);
+      const rad = BORDER_CORNER_RAD_RANGE;
+      drawBorder(ctx, width, height, center, borderRadius, rad, borderColor, pixelSize2, 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 () => {
+      const Inner = createVNode(Fragment, null, [slots.prefix && createVNode("div", {
+        "class": "px-auto-complete-prefix-wrapper"
+      }, [slots.prefix()]), createVNode("input", {
+        "ref": inputRef,
+        "class": "px-auto-complete-inner",
+        "value": modelValue.value,
+        "placeholder": props.placeholder,
+        "disabled": disabledComputed.value || props.readonly,
+        "autofocus": props.autofocus,
+        "onInput": inputHandler,
+        "onChange": changeHandler,
+        "onBlur": blurHandler,
+        "onFocus": focusHandler,
+        "onCompositionstart": compositionStartHandler,
+        "onCompositionend": compositionUpdateHandler
+      }, null), showClose.value && createVNode("div", {
+        "class": "px-auto-complete-close-wrapper"
+      }, [hoverFlag.value && modelValue.value ? createVNode(TimesCircleSolid, {
+        "class": "px-auto-complete-icon",
+        "onClick": clearHandler
+      }, null) : createVNode("div", {
+        "class": "px-auto-complete-icon-placeholder"
+      }, null)]), props.loading && createVNode("div", {
+        "class": "px-auto-complete-loading-wrapper"
+      }, [createVNode(SpinnerThirdSolid, {
+        "class": "px-auto-complete-icon px-animation__loading"
+      }, null)]), slots.suffix && createVNode("div", {
+        "class": "px-auto-complete-suffix-wrapper"
+      }, [slots.suffix()]), createVNode("canvas", {
+        "ref": canvasRef,
+        "class": "px-auto-complete-canvas"
+      }, null)]);
+      const scopeObj = {};
+      const scopeId = instance == null ? void 0 : instance.vnode.scopeId;
+      const parentScopeId = instance == null ? void 0 : instance.vnode.scopeId;
+      if (scopeId) {
+        scopeObj[scopeId] = "";
+      }
+      if (parentScopeId) {
+        scopeObj[parentScopeId] = "";
+      }
+      const Render = createVNode(_sfc_main$2, {
+        "placement": "bottom",
+        "offset": 0,
+        "width-equal": true,
+        "arrow": false,
+        "visible": popoverVisible.value,
+        "onUpdate:visible": popoverVisibleUpdateHandler,
+        "trigger": "click",
+        "contentStyle": {
+          padding: `${pixelSize}px`
+        }
+      }, {
+        default: () => h("div", {
+          ref: wrapperRef,
+          class: ["pixelium px-auto-complete", sizeComputed.value && `px-auto-complete__${sizeComputed.value}`, shapeComputed.value && `px-auto-complete__${shapeComputed.value}`, {
+            "px-auto-complete__inner": innerInputGroup.value
+          }, {
+            "px-auto-complete__disabled": disabledComputed.value
+          }],
+          onClick: focusInputHandler,
+          onMouseenter: mouseenterHandler,
+          onMouseleave: mouseleaveHandler,
+          ...scopeObj,
+          ...attrs
+        }, [Inner]),
+        content: () => optionsFiltered.value.length ? createVNode(_sfc_main$3, {
+          "options": optionsFiltered.value,
+          "onSelect": selectHandler
+        }, {
+          "group-label": ({
+            option
+          }) => slots["group-label"] ? slots["group-label"]({
+            option
+          }) : option.label,
+          option: ({
+            option
+          }) => slots.option ? slots.option({
+            option
+          }) : p(option) ? option : option.label
+        }) : createVNode("div", {
+          "class": "px-auto-complete-empty"
+        }, [createVNode(_sfc_main$4, null, null)])
+      });
+      return Render;
+    };
+  }
+});
+export {
+  SpinnerThirdSolid as S,
+  TimesCircleSolid as T,
+  _sfc_main as _
+};