@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/select/index.js

@@ -0,0 +1,674 @@
+import './css.js'
+import { defineComponent, useAttrs, getCurrentInstance, ref, inject, computed, shallowRef, watch, useSlots, onMounted, nextTick, createVNode, Fragment, withDirectives, vShow, 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 { 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$3 } from "../popover/index.js";
+import { _ as _sfc_main$5 } from "../empty/index.js";
+import { _ as _sfc_main$4 } from "../option-list/index.js";
+import { d as defaultFilter, a as findSameOption } from "../share/util/common.js";
+import { p, d, k, N, P as Pn, e as en, $ } from "../aside/index.js";
+import { G as GROUP_OPTION_TYPE, B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { u as useClickOutsideListener } from "../share/hook/use-click-outside-listener.js";
+import { _ as _sfc_main$2 } from "../tag/index.js";
+import { u as useControlledMode } from "../share/hook/use-controlled-mode.js";
+const ANIMATION_DURATION = 250;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Select"
+  },
+  __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
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    inputValue: null,
+    defaultInputValue: null,
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    shouldShowPopover: {
+      type: Function
+    },
+    filter: {
+      type: Function
+    },
+    creatable: {
+      type: Boolean
+    },
+    collapseTags: {
+      type: Boolean,
+      default: false
+    },
+    maxDisplayTags: null,
+    collapseTagsPopover: {
+      type: Boolean,
+      default: true
+    },
+    tagTheme: {
+      default: "info"
+    },
+    tagVariant: {
+      default: "plain"
+    },
+    tagColor: null,
+    size: {
+      default: "medium"
+    },
+    shape: {
+      default: "default"
+    },
+    borderRadius: null,
+    status: {
+      default: "normal"
+    }
+  },
+  emits: ["input", "update:modelValue", "update:inputValue", "change", "inputChange", "clear", "blur", "focus", "select", "tagClose"],
+  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 modelValueIsFalse = (modelValue2) => {
+      return Pn(modelValue2) || en(modelValue2) || props.multiple && $(modelValue2) && modelValue2.length === 0;
+    };
+    const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+      defaultField: "defaultValue",
+      transform: (nextValue) => {
+        if (!props.multiple) {
+          return nextValue;
+        } else {
+          if (N(nextValue)) {
+            return;
+          } else if ($(nextValue)) {
+            return [...nextValue];
+          } else {
+            return [nextValue];
+          }
+        }
+      }
+    });
+    const [inputValue, updateInputValue] = useControlledMode("inputValue", props, emits, {
+      defaultField: "defaultInputValue",
+      transform: (nextValue) => {
+        return nextValue || "";
+      }
+    });
+    const currentLabelSelectedMultiple = computed(() => {
+      if (!props.multiple) {
+        return [];
+      }
+      if (!props.options.length) {
+        return [];
+      }
+      if (modelValueIsFalse(modelValue.value)) {
+        return [];
+      }
+      const labelMap = /* @__PURE__ */ new Map();
+      props.options.forEach((option) => {
+        if (p(option)) {
+          labelMap.set(option, option);
+        } else if ("type" in option && option.type === GROUP_OPTION_TYPE) {
+          return option.children.some((child) => {
+            if (p(child)) {
+              labelMap.set(child, child);
+            } else {
+              labelMap.set(child.value, child.label);
+            }
+          });
+        } else {
+          labelMap.set(option.value, option.label);
+        }
+      });
+      return modelValue.value.map((e) => labelMap.has(e) ? labelMap.get(e) : String(e));
+    });
+    const currentLabelSelected = computed(() => {
+      if (props.multiple) {
+        return "";
+      }
+      if (!props.options.length) {
+        return "";
+      }
+      if (modelValueIsFalse(modelValue.value)) {
+        return "";
+      }
+      let currentLabel = String(modelValue.value);
+      props.options.some((option) => {
+        if (p(option)) {
+          return modelValue.value === option;
+        } else if ("type" in option && option.type === GROUP_OPTION_TYPE) {
+          return option.children.some((child) => {
+            if (p(child)) {
+              return modelValue.value === child;
+            } else {
+              if (child.value === modelValue.value) {
+                currentLabel = child.label;
+                return true;
+              }
+              return false;
+            }
+          });
+        } else {
+          if (option.value === modelValue.value) {
+            currentLabel = option.label;
+            return true;
+          }
+          return false;
+        }
+      });
+      return currentLabel;
+    });
+    const wrapperRef = shallowRef(null);
+    const canvasRef = shallowRef(null);
+    const inputRef = shallowRef(null);
+    const popoverRef = shallowRef(null);
+    const closeRef = shallowRef(null);
+    watch(() => props.multiple, (val, old) => {
+      if (val && !old) {
+        updateModelValue([modelValue.value]);
+      } else {
+        updateModelValue(modelValue.value[0] || null);
+      }
+    });
+    const triggerPopover = async () => {
+      await nextTick();
+      if (props.shouldShowPopover) {
+        popoverVisible.value = !!props.shouldShowPopover(inputValue.value || "", optionsFiltered.value);
+        return;
+      }
+      popoverVisible.value = true;
+    };
+    const closePopover = async () => {
+      popoverVisible.value = false;
+    };
+    const inputHandler = async (e) => {
+      e.stopPropagation();
+      const target = e.target;
+      const newValue = target.value;
+      inputValue.value = newValue;
+      if (isComposing.value) {
+        return;
+      }
+      emits("input", newValue, e);
+      updateInputValue(newValue);
+      await emits("update:inputValue", newValue);
+      triggerPopover();
+    };
+    const clearHandler = async () => {
+      await new Promise((res) => {
+        setTimeout(() => {
+          res();
+        });
+      });
+      const nextModelValue = props.multiple ? [] : null;
+      await updateInputValue("");
+      await updateModelValue(nextModelValue);
+      emits("change", nextModelValue);
+      emits("clear", nextModelValue);
+      emits("inputChange", "");
+    };
+    const changeHandler = (e) => {
+      e.stopPropagation();
+      const target = e.target;
+      emits("inputChange", target.value, e);
+    };
+    const focusMode = ref(false);
+    const focusImpl = () => {
+      focusMode.value = true;
+      nextTick(() => {
+        if (inputRef.value && props.filterable) {
+          inputRef.value.focus();
+          if (props.multiple) {
+            return;
+          }
+          const nextInput = modelValueIsFalse(modelValue.value) ? inputValue.value || "" : currentLabelSelected.value;
+          updateInputValue(nextInput);
+        }
+      });
+      triggerPopover();
+      emits("focus");
+    };
+    const focusInputHandler = (e) => {
+      var _a2;
+      const target = e.target;
+      if (target instanceof HTMLElement || target instanceof SVGElement) {
+        if ((_a2 = closeRef.value) == null ? void 0 : _a2.$el.contains(target)) {
+          return;
+        }
+      }
+      focusImpl();
+    };
+    const blurSelect = async () => {
+      var _a2;
+      focusMode.value = false;
+      popoverVisible.value = false;
+      (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
+      setTimeout(async () => {
+        await updateInputValue("");
+        emits("inputChange", "");
+      }, ANIMATION_DURATION);
+      emits("blur");
+    };
+    useClickOutsideListener([wrapperRef, () => {
+      var _a2, _b;
+      return (_b = (_a2 = popoverRef.value) == null ? void 0 : _a2.triggerContent) == null ? void 0 : _b.content;
+    }], blurSelect);
+    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 getNextModelValue = (value) => {
+      if (!props.multiple) {
+        return value;
+      } else {
+        if ($(modelValue.value)) {
+          const nextValue = [...modelValue.value];
+          const idx = nextValue.findIndex((e) => e === value);
+          if (idx === -1) {
+            nextValue.push(value);
+          } else {
+            nextValue.splice(idx, 1);
+          }
+          return nextValue;
+        } else {
+          return [value];
+        }
+      }
+    };
+    const selectHandler = async (value, option, e) => {
+      await new Promise((res) => {
+        setTimeout(() => {
+          res();
+        });
+      });
+      const nextValue = getNextModelValue(value);
+      const nextInputValue = "";
+      await updateModelValue(nextValue);
+      if (!props.multiple) {
+        focusMode.value = false;
+        closePopover();
+        emits("select", nextValue, option, e);
+        setTimeout(async () => {
+          await updateInputValue(nextInputValue);
+        }, ANIMATION_DURATION);
+      }
+    };
+    const slots = useSlots();
+    const optionsFiltered = computed(() => {
+      const options = props.options || [];
+      if (!props.filterable) {
+        return options;
+      }
+      let ans = [];
+      if (props.filter) {
+        ans = props.filter(inputValue.value || "", options);
+      } else {
+        ans = defaultFilter(inputValue.value || "", options);
+      }
+      if (props.multiple) {
+        if (!modelValueIsFalse(modelValue.value)) {
+          modelValue.value.forEach((e) => {
+            const dataInAns4E = findSameOption(e, ans);
+            const dataInOptions4E = findSameOption(e, options);
+            if (!dataInAns4E.length) {
+              if (!dataInOptions4E.length) {
+                ans.push(e);
+              } else if (dataInOptions4E.length === 1) {
+                ans.push(dataInOptions4E[0]);
+              } else {
+                const group = dataInOptions4E[1];
+                const idx = ans.findIndex((e2) => d(e2) && "type" in e2 && e2.type === GROUP_OPTION_TYPE && e2.key === group.key);
+                if (idx) {
+                  ans[idx].children.push(dataInOptions4E[0]);
+                } else {
+                  ans.push({
+                    ...group,
+                    children: [dataInOptions4E[0]]
+                  });
+                }
+              }
+            }
+          });
+        }
+      }
+      if (props.creatable && inputValue.value) {
+        const flag = findSameOption(inputValue.value, ans, true).length;
+        if (!flag) {
+          ans.push(inputValue.value);
+        }
+      }
+      return ans;
+    });
+    __expose({
+      focus: focusImpl,
+      blur: blurSelect,
+      clear: () => clearHandler()
+    });
+    const popoverVisible = ref(false);
+    const popoverVisibleUpdateHandler = (value) => {
+      if (!value) {
+        popoverVisible.value = value;
+      }
+    };
+    const showPlaceholder = computed(() => {
+      return modelValueIsFalse(modelValue.value) && (!props.multiple && !currentLabelSelected.value || props.multiple);
+    });
+    const tagSize = computed(() => {
+      return sizeComputed.value === "small" ? "small" : "medium";
+    });
+    const tagCanClose = computed(() => {
+      return !disabledComputed.value && !props.readonly;
+    });
+    const tagCloseHandler = async (value, e) => {
+      const nextValue = [...modelValue.value];
+      const idx = nextValue.findIndex((e2) => e2 === value);
+      if (idx === -1) {
+        return;
+      }
+      nextValue.splice(idx, 1);
+      await updateModelValue(nextValue);
+      emits("tagClose", value, e);
+      emits("change", nextValue);
+    };
+    const shouldCollapseTags = computed(() => {
+      return !!props.collapseTags && k(props.maxDisplayTags) && props.maxDisplayTags >= 0;
+    });
+    const tagsShowed = computed(() => {
+      if (!props.multiple) {
+        return [];
+      }
+      if (!props.options.length) {
+        return [];
+      }
+      if (N(modelValue.value)) {
+        return [];
+      }
+      return shouldCollapseTags.value ? modelValue.value.slice(0, props.maxDisplayTags) : modelValue.value;
+    });
+    const tagsCollapsed = computed(() => {
+      if (!props.multiple) {
+        return [];
+      }
+      if (!props.options.length) {
+        return [];
+      }
+      if (N(modelValue.value)) {
+        return [];
+      }
+      return 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 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);
+    const stopHandler = (e) => {
+      e.stopPropagation();
+    };
+    return () => {
+      const Inner = createVNode(Fragment, null, [slots.prefix && createVNode("div", {
+        "class": "px-select-prefix-wrapper"
+      }, [slots.prefix()]), createVNode("div", {
+        "class": "px-select-content"
+      }, [props.multiple && tagsShowed.value.map((e, index) => {
+        return createVNode(_sfc_main$2, {
+          "key": e,
+          "size": tagSize.value,
+          "variant": props.tagVariant,
+          "theme": props.tagTheme,
+          "closable": tagCanClose.value,
+          "disabled": disabledComputed.value,
+          "color": props.tagColor,
+          "onClose": (event) => tagCloseHandler(e, event)
+        }, {
+          default: () => slots.tag ? slots.tag({
+            value: e,
+            label: currentLabelSelectedMultiple.value[index],
+            index
+          }) : currentLabelSelectedMultiple.value[index]
+        });
+      }), props.multiple && !!tagsCollapsed.value.length && shouldCollapseTags.value && createVNode(Fragment, null, [!props.collapseTagsPopover ? createVNode(_sfc_main$2, {
+        "size": tagSize.value,
+        "variant": props.tagVariant,
+        "theme": props.tagTheme,
+        "disabled": disabledComputed.value,
+        "color": props.tagColor
+      }, {
+        default: () => slots.tag ? slots.tag({
+          value: null,
+          label: `+${tagsCollapsed.value.length}`,
+          index: -1
+        }) : `+${tagsCollapsed.value.length}`
+      }) : createVNode(_sfc_main$3, null, {
+        default: () => createVNode(_sfc_main$2, {
+          "size": tagSize.value,
+          "variant": props.tagVariant,
+          "theme": props.tagTheme,
+          "disabled": disabledComputed.value,
+          "color": props.tagColor
+        }, {
+          default: () => slots.tag ? slots.tag({
+            value: null,
+            label: `+${tagsCollapsed.value.length}`,
+            index: -1
+          }) : `+${tagsCollapsed.value.length}`
+        }),
+        content: () => createVNode("div", {
+          "class": "px-input-tag-content"
+        }, [tagsCollapsed.value.map((e, index) => {
+          return createVNode(_sfc_main$2, {
+            "key": e,
+            "size": tagSize.value,
+            "variant": props.tagVariant,
+            "theme": props.tagTheme,
+            "disabled": disabledComputed.value,
+            "color": props.tagColor,
+            "closable": tagCanClose.value,
+            "onClose": (event) => tagCloseHandler(e, event)
+          }, {
+            default: () => {
+              const currentIndex = index + Math.floor(props.maxDisplayTags);
+              return slots.tag ? slots.tag({
+                value: e,
+                label: currentLabelSelectedMultiple.value[currentIndex],
+                index: currentIndex
+              }) : currentLabelSelectedMultiple.value[currentIndex];
+            }
+          });
+        })])
+      })]), withDirectives(createVNode("input", {
+        "ref": inputRef,
+        "class": "px-select-inner",
+        "value": inputValue.value,
+        "disabled": disabledComputed.value || props.readonly,
+        "onInput": inputHandler,
+        "onChange": changeHandler,
+        "onFocus": stopHandler,
+        "onBlur": stopHandler,
+        "onCompositionstart": compositionStartHandler,
+        "onCompositionend": compositionUpdateHandler,
+        "placeholder": showPlaceholder.value ? props.placeholder : ""
+      }, null), [[vShow, props.filterable && focusMode.value]]), withDirectives(createVNode("div", {
+        "class": {
+          "px-select-placeholder": true
+        }
+      }, [props.placeholder]), [[vShow, showPlaceholder.value && (!props.filterable || !focusMode.value)]]), !props.multiple && withDirectives(createVNode("div", {
+        "class": {
+          "px-select-label": true,
+          "px-select-label__disabled": disabledComputed.value
+        }
+      }, [currentLabelSelected.value]), [[vShow, !showPlaceholder.value && (!props.filterable || !focusMode.value)]])]), showClose.value && createVNode("div", {
+        "class": "px-select-close-wrapper"
+      }, [hoverFlag.value && !modelValueIsFalse(modelValue.value) ? createVNode(TimesCircleSolid, {
+        "class": "px-select-icon",
+        "onClick": clearHandler,
+        "ref": (el) => {
+          closeRef.value = el;
+        }
+      }, null) : createVNode("div", {
+        "class": "px-select-icon-placeholder"
+      }, null)]), props.loading && createVNode("div", {
+        "class": "px-select-loading-wrapper"
+      }, [createVNode(SpinnerThirdSolid, {
+        "class": "px-select-icon px-animation__loading"
+      }, null)]), slots.suffix && createVNode("div", {
+        "class": "px-select-suffix-wrapper"
+      }, [slots.suffix()]), createVNode("canvas", {
+        "ref": canvasRef,
+        "class": "px-select-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$3, {
+        "placement": "bottom",
+        "offset": 0,
+        "width-equal": true,
+        "arrow": false,
+        "visible": popoverVisible.value,
+        "onUpdate:visible": popoverVisibleUpdateHandler,
+        "trigger": "click",
+        "contentStyle": {
+          padding: `${pixelSize}px`
+        },
+        "ref": popoverRef
+      }, {
+        default: () => h("div", {
+          ref: wrapperRef,
+          class: ["pixelium px-select", sizeComputed.value && `px-select__${sizeComputed.value}`, shapeComputed.value && `px-select__${shapeComputed.value}`, {
+            "px-select__inner": innerInputGroup.value
+          }, {
+            "px-select__disabled": disabledComputed.value
+          }],
+          onClick: focusInputHandler,
+          onMouseenter: mouseenterHandler,
+          onMouseleave: mouseleaveHandler,
+          ...scopeObj,
+          ...attrs
+        }, [Inner]),
+        content: () => optionsFiltered.value.length ? createVNode(_sfc_main$4, {
+          "options": optionsFiltered.value,
+          "onSelect": selectHandler,
+          "activeValues": props.multiple ? modelValue.value : [modelValue.value]
+        }, {
+          "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-select-empty"
+        }, [createVNode(_sfc_main$5, null, null)])
+      });
+      return Render;
+    };
+  }
+});
+export {
+  _sfc_main as _
+};