@koi-design/uxd-ui 12.1.36-beta.0

package/lib/components/Select/Selection/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../../src/components/Select/Selection/Input.vue"],"sourcesContent":["<template>\n  <input\n    :id=\"id\"\n    :ref=\"inputRef\"\n    :class=\"`${prefixCls}-selection-search-input`\"\n    :style=\"computedStyle\"\n    role=\"combobox\"\n    :aria-expanded=\"open\"\n    aria-haspopup=\"listbox\"\n    :aria-own=\"`${id}_list`\"\n    :aria-controls=\"`${id}_list`\"\n    aria-autocomplete=\"list\"\n    :aria-activedescendant=\"`${id}_list_${accessibilityIndex}`\"\n    :disabled=\"disabled\"\n    :tabindex=\"tabindex\"\n    :autocomplete=\"autocomplete || 'off'\"\n    :autofocus=\"autofocus\"\n    :value=\"editable ? value : ''\"\n    :readonly=\"!editable\"\n    :unselectable=\"!editable ? 'on' : undefined\"\n    @focus=\"onFocus\"\n    @blur=\"onBlur\"\n    @mousedown=\"onMousedown\"\n    @keydown=\"onKeydown\"\n    @paste=\"onPaste\"\n    @input=\"onChange\"\n    @compositionstart=\"onCompositionstart\"\n    @compositionend=\"onCompositionend\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue';\nimport type { PropType, CSSProperties, ComponentPublicInstance } from 'vue';\nimport type { SelectContext } from '../Select.type';\n\nexport default defineComponent({\n  name: 'SelectInput',\n  props: {\n    inputRef: {\n      type: Function as PropType<(el: Element | ComponentPublicInstance | null) => void>\n    },\n    prefixCls: {\n      type: String\n    },\n    id: {\n      type: String\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    autofocus: {\n      type: Boolean,\n      default: false\n    },\n    autocomplete: {\n      type: String\n    },\n    accessibilityIndex: {\n      type: Number\n    },\n    editable: {\n      type: Boolean,\n      default: false\n    },\n    value: {\n      type: String\n    },\n    open: {\n      type: Boolean,\n      default: false\n    },\n    tabindex: {\n      type: Number\n    }\n  },\n  emits: ['keydown', 'mousedown', 'change', 'paste', 'compositionstart', 'compositionend'],\n  setup(props, { emit, attrs }) {\n    const selectContext = inject<SelectContext | null>('SelectContext', null);\n\n    let blurTimeout: any = null;\n\n    const computedStyle = computed(() => {\n      return {\n        opacity: props.editable ? null : 0,\n        ...(attrs.style as CSSProperties)\n      } as CSSProperties;\n    });\n\n    return {\n      computedStyle,\n      onChange: (e: any) => {\n        emit('change', e);\n      },\n      onMousedown: (e: any) => {\n        emit('mousedown', e);\n      },\n      onKeydown: (e: any) => {\n        emit('keydown', e);\n      },\n      onPaste: (e: any) => {\n        emit('paste', e);\n      },\n      onCompositionstart: (e: any) => {\n        emit('compositionstart', e);\n      },\n      onCompositionend: (e: any) => {\n        emit('compositionend', e);\n      },\n      onFocus: (args: any) => {\n        clearTimeout(blurTimeout);\n        selectContext?.focus(args);\n      },\n      onBlur: (args: any) => {\n        blurTimeout = setTimeout(() => {\n          selectContext?.blur(args);\n        }, 200);\n      }\n    };\n  }\n});\n</script>\n"],"names":["defineComponent","inject","computed","_createElementBlock","_normalizeClass","_normalizeStyle"],"mappings":";;;;;;;AAoCA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,UAAU;AAAA,MACR,MAAM;AAAA;AACR,IACA,WAAW;AAAA,MACT,MAAM;AAAA;AACR,IACA,IAAI;AAAA,MACF,MAAM;AAAA;AACR,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,cAAc;AAAA,MACZ,MAAM;AAAA;AACR,IACA,oBAAoB;AAAA,MAClB,MAAM;AAAA;AACR,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,OAAO;AAAA,MACL,MAAM;AAAA;AACR,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,UAAU;AAAA,MACR,MAAM;AAAA;AACR;AACF,EACA,OAAO,CAAC,WAAW,aAAa,UAAU,SAAS,oBAAoB,gBAAgB;AAAA,EACvF,MAAM,OAAO,EAAE,MAAM,SAAS;UACtB,gBAAgBC,WAA6B,iBAAiB,IAAI;QAEpE,cAAmB;UAEjB,gBAAgBC,aAAS,MAAM;aAC5B;AAAA,QACL,SAAS,MAAM,WAAW,OAAO;AAAA,QACjC,GAAI,MAAM;AAAA;AACZ,KACD;WAEM;AAAA,MACL;AAAA,MACA,UAAU,CAAC,MAAW;aACf,UAAU,CAAC;AAAA;AAClB,MACA,aAAa,CAAC,MAAW;aAClB,aAAa,CAAC;AAAA;AACrB,MACA,WAAW,CAAC,MAAW;aAChB,WAAW,CAAC;AAAA;AACnB,MACA,SAAS,CAAC,MAAW;aACd,SAAS,CAAC;AAAA;AACjB,MACA,oBAAoB,CAAC,MAAW;aACzB,oBAAoB,CAAC;AAAA;AAC5B,MACA,kBAAkB,CAAC,MAAW;aACvB,kBAAkB,CAAC;AAAA;AAC1B,MACA,SAAS,CAAC,SAAc;qBACT,WAAW;uDACT,MAAM;AAAA;AACvB,MACA,QAAQ,CAAC,SAAc;sBACP,WAAW,MAAM;yDACd,KAAK;AAAA,WACnB,GAAG;AAAA;AACR;AACF;AAEJ,CAAC;;;0BAxHCC,uBA2BE;IA1BC,IAAI;IACJ,KAAK;IACL,OAAKC,sBAAK,uCAAS;AAAA,IACnB,OAAKC,mBAAE,kBAAa;AAAA,IACrB,MAAK;AAAA,IACJ,iBAAe;IAChB,iBAAc;AAAA,IACb,YAAQ,GAAK;IACb,iBAAa,GAAK;IACnB,qBAAkB;AAAA,IACjB,yBAAqB,GAAK,gBAAW;IACrC,UAAU;IACV,UAAU;IACV,cAAc,qBAAY;AAAA,IAC1B,WAAW;IACX,OAAO,gBAAW,aAAK;AAAA,IACvB,UAAQ,CAAG;IACX,cAAY,CAAG,gBAAQ,OAAU;AAAA,IACjC,SAAK,uCAAE;IACP,QAAI,uCAAE;IACN,aAAS,uCAAE;IACX,WAAO,uCAAE;IACT,SAAK,uCAAE;IACP,SAAK,uCAAE;IACP,oBAAgB,uCAAE;IAClB,kBAAc,uCAAE;;;;;;;"}

package/lib/components/Select/Selection/Input.vue.d.ts

@@ -0,0 +1,101 @@
+import type { PropType, CSSProperties, ComponentPublicInstance } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    inputRef: {
+        type: PropType<(el: Element | ComponentPublicInstance | null) => void>;
+    };
+    prefixCls: {
+        type: StringConstructor;
+    };
+    id: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autocomplete: {
+        type: StringConstructor;
+    };
+    accessibilityIndex: {
+        type: NumberConstructor;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: StringConstructor;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tabindex: {
+        type: NumberConstructor;
+    };
+}, {
+    computedStyle: import("vue").ComputedRef<CSSProperties>;
+    onChange: (e: any) => void;
+    onMousedown: (e: any) => void;
+    onKeydown: (e: any) => void;
+    onPaste: (e: any) => void;
+    onCompositionstart: (e: any) => void;
+    onCompositionend: (e: any) => void;
+    onFocus: (args: any) => void;
+    onBlur: (args: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("paste" | "change" | "compositionend" | "compositionstart" | "keydown" | "mousedown")[], "change" | "mousedown" | "keydown" | "paste" | "compositionend" | "compositionstart", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    inputRef: {
+        type: PropType<(el: Element | ComponentPublicInstance | null) => void>;
+    };
+    prefixCls: {
+        type: StringConstructor;
+    };
+    id: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autocomplete: {
+        type: StringConstructor;
+    };
+    accessibilityIndex: {
+        type: NumberConstructor;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: StringConstructor;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tabindex: {
+        type: NumberConstructor;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    onMousedown?: (...args: any[]) => any;
+    onKeydown?: (...args: any[]) => any;
+    onPaste?: (...args: any[]) => any;
+    onCompositionend?: (...args: any[]) => any;
+    onCompositionstart?: (...args: any[]) => any;
+}, {
+    disabled: boolean;
+    autofocus: boolean;
+    open: boolean;
+    editable: boolean;
+}, {}>;
+export default _default;

package/lib/components/Select/Selection/Multiple.js

@@ -0,0 +1,162 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Multiple_vue_vue_type_script_lang = require('./Multiple.vue_vue_type_script_lang.js');
+var vue = require('vue');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Render = vue.resolveComponent("Render");
+  const _component_URoundClose = vue.resolveComponent("URoundClose");
+  const _component_UIcon = vue.resolveComponent("UIcon");
+  const _component_UPopover = vue.resolveComponent("UPopover");
+  const _component_SelectInput = vue.resolveComponent("SelectInput");
+  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    vue.createCommentVNode(' <transition-group :appear="motionAppear" :name="tagTransitionName"> '),
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.displayValues, (item) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        key: item.key
+      }, [
+        _ctx.isNotRender ? (vue.openBlock(), vue.createElementBlock("span", {
+          key: 0,
+          class: vue.normalizeClass({
+            [`${item.class}`]: item.class,
+            [`${_ctx.prefixCls}-selection-item`]: true,
+            [`${_ctx.prefixCls}-selection-item-disabled`]: item.disabled
+          })
+        }, [
+          item.key === _ctx.REST_TAG_KEY || _ctx.isShowTagTooltip ? (vue.openBlock(), vue.createBlock(_component_UPopover, vue.mergeProps({
+            key: 0,
+            disabled: !_ctx.maxTagTooltip,
+            trigger: "hover",
+            "show-arrow": true,
+            placement: "top",
+            ref_for: true
+          }, _ctx.popoverProps), {
+            content: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(`${_ctx.prefixCls}-selection-tooltip`),
+                style: vue.normalizeStyle({ maxWidth: `${_ctx.maxTagTooltipWidth}px` })
+              }, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.values, (tipItem) => {
+                  return vue.openBlock(), vue.createElementBlock("span", {
+                    key: tipItem.key,
+                    class: vue.normalizeClass({
+                      [`${_ctx.prefixCls}-selection-item`]: true
+                    })
+                  }, [
+                    vue.createElementVNode("span", {
+                      class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-content`)
+                    }, [
+                      vue.createVNode(_component_Render, {
+                        render: _ctx.getRender(tipItem.displayLabel)
+                      }, null, 8, ["render"])
+                    ], 2),
+                    _ctx.closable(tipItem) ? (vue.openBlock(), vue.createBlock(_component_UIcon, {
+                      key: 0,
+                      class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-remove`),
+                      onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                      }, ["stop", "prevent"])),
+                      onClick: (e) => _ctx.onClose(tipItem.value, e)
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(_component_URoundClose)
+                      ]),
+                      _: 2
+                    }, 1032, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
+                  ], 2);
+                }), 128))
+              ], 6)
+            ]),
+            default: vue.withCtx(() => [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-content`)
+              }, [
+                vue.createVNode(_component_Render, {
+                  render: _ctx.getRender(item.displayLabel)
+                }, null, 8, ["render"])
+              ], 2)
+            ]),
+            _: 2
+          }, 1040, ["disabled"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createElementVNode("span", {
+              class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-content`)
+            }, [
+              vue.createCommentVNode(" {{ item.displayLabel }} "),
+              vue.createVNode(_component_Render, {
+                render: _ctx.getRender(item.displayLabel)
+              }, null, 8, ["render"])
+            ], 2),
+            _ctx.closable(item) ? (vue.openBlock(), vue.createBlock(_component_UIcon, {
+              key: 0,
+              class: vue.normalizeClass(`${_ctx.prefixCls}-selection-item-remove`),
+              onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+              }, ["stop", "prevent"])),
+              onClick: (e) => _ctx.onClose(item.value, e)
+            }, {
+              default: vue.withCtx(() => [
+                _ctx.removeIcon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.removeIcon), { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_URoundClose, { key: 1 }))
+              ]),
+              _: 2
+            }, 1032, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
+          ], 64))
+        ], 2)) : (vue.openBlock(), vue.createElementBlock("span", {
+          key: 1,
+          class: vue.normalizeClass(item.class),
+          onMousedown: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+          }, ["stop", "prevent"]))
+        }, [
+          vue.createVNode(_component_Render, {
+            render: () => {
+              var _a;
+              return (_a = _ctx.tagRender) == null ? void 0 : _a.call(_ctx, {
+                ...item,
+                closable: _ctx.closable(item),
+                onClose: (e) => {
+                  _ctx.onClose(item.value, e);
+                }
+              });
+            }
+          }, null, 8, ["render"])
+        ], 34))
+      ], 64);
+    }), 128)),
+    vue.createCommentVNode(" </transition-group> "),
+    vue.createElementVNode("span", {
+      class: vue.normalizeClass(`${_ctx.prefixCls}-selection-search`),
+      style: vue.normalizeStyle({ width: `${_ctx.inputWidth}px` })
+    }, [
+      vue.createVNode(_component_SelectInput, {
+        "input-ref": _ctx.inputRef,
+        "prefix-cls": _ctx.prefixCls,
+        autocomplete: "off",
+        disabled: _ctx.disabled,
+        editable: _ctx.inputEditable,
+        value: _ctx.inputValue,
+        onMousedown: _ctx.onInputMouseDown,
+        onChange: _ctx.onInputChange,
+        onKeydown: _ctx.onInputKeydown,
+        onCompositionstart: _ctx.onInputCompositionStart,
+        onCompositionend: _ctx.onInputCompositionEnd,
+        onPaste: _ctx.onInputPaste
+      }, null, 8, ["input-ref", "prefix-cls", "disabled", "editable", "value", "onMousedown", "onChange", "onKeydown", "onCompositionstart", "onCompositionend", "onPaste"]),
+      vue.createElementVNode("span", {
+        ref: "measureRef",
+        class: vue.normalizeClass(`${_ctx.prefixCls}-selection-search-mirror`),
+        "aria-hidden": ""
+      }, vue.toDisplayString(_ctx.inputValue) + "\xA0 ", 3)
+    ], 6),
+    vue.withDirectives(vue.createElementVNode("div", {
+      class: vue.normalizeClass(`${_ctx.prefixCls}-selection-placeholder`)
+    }, [
+      vue.renderSlot(_ctx.$slots, "placeholder")
+    ], 2), [
+      [vue.vShow, _ctx.showPlaceholder]
+    ])
+  ], 64);
+}
+var Multiple = /* @__PURE__ */ pluginVue_exportHelper["default"](Multiple_vue_vue_type_script_lang["default"], [["render", _sfc_render], ["__file", "E:\\br-fe\\uxd-ui\\src\\components\\Select\\Selection\\Multiple.vue"]]);
+
+exports["default"] = Multiple;
+//# sourceMappingURL=Multiple.js.map

package/lib/components/Select/Selection/Multiple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Multiple.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Select/Selection/Multiple.vue.d.ts

@@ -0,0 +1,170 @@
+import type { PropType, ComponentPublicInstance, VNodeChild } from 'vue';
+import type { JSX } from 'vue/jsx-runtime';
+import type { DisplayOption, SingleValueType, TagRenderFunction } from '../Select.type';
+import type { IconPropType } from '../../../utils/globalType';
+import type { PopoverProps } from '../../Popover';
+declare const _default: import("vue").DefineComponent<{
+    prefixCls: {
+        type: StringConstructor;
+    };
+    values: {
+        type: PropType<DisplayOption[]>;
+        default: () => DisplayOption[];
+    };
+    searchValue: {
+        type: StringConstructor;
+    };
+    filterable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    inputRef: {
+        type: PropType<(el: Element | ComponentPublicInstance | null) => void>;
+    };
+    tagTransitionName: {
+        type: StringConstructor;
+    };
+    maxTagCount: {
+        type: NumberConstructor;
+    };
+    maxTagTextLength: {
+        type: NumberConstructor;
+    };
+    maxTagPlaceholder: {
+        type: PropType<(rest: DisplayOption[]) => string | VNodeChild | JSX.Element>;
+        default: (ommittedValus: string[]) => string;
+    };
+    maxTagTooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxTagTooltipWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tagRender: {
+        type: PropType<TagRenderFunction>;
+    };
+    removeIcon: {
+        type: PropType<IconPropType>;
+    };
+    isShowTagTooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popoverProps: {
+        type: PropType<PopoverProps>;
+        default: () => {};
+    };
+}, {
+    getRender: (children: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | VNodeChild) => () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+    REST_TAG_KEY: string;
+    motionAppear: import("vue").Ref<boolean, boolean>;
+    measureRef: import("vue").Ref<any, any>;
+    inputWidth: import("vue").Ref<number, number>;
+    inputValue: import("vue").ComputedRef<string>;
+    inputEditable: import("vue").ComputedRef<boolean>;
+    showPlaceholder: import("vue").ComputedRef<boolean>;
+    isNotRender: import("vue").ComputedRef<boolean>;
+    displayValues: import("vue").ComputedRef<DisplayOption[]>;
+    closable: (item: DisplayOption) => boolean;
+    onClose: (value: SingleValueType, e: any) => void;
+    onInputMouseDown: () => void;
+    onInputChange: (val: any) => void;
+    onInputKeydown: (e: KeyboardEvent) => void;
+    onInputCompositionStart: (e: CompositionEvent) => void;
+    onInputCompositionEnd: (e: CompositionEvent) => void;
+    onInputPaste: (e: ClipboardEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "input-mousedown" | "input-change" | "input-keydown" | "input-compositionstart" | "input-compositionend" | "input-paste")[], "select" | "input-mousedown" | "input-change" | "input-keydown" | "input-compositionstart" | "input-compositionend" | "input-paste", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+    };
+    values: {
+        type: PropType<DisplayOption[]>;
+        default: () => DisplayOption[];
+    };
+    searchValue: {
+        type: StringConstructor;
+    };
+    filterable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    inputRef: {
+        type: PropType<(el: Element | ComponentPublicInstance | null) => void>;
+    };
+    tagTransitionName: {
+        type: StringConstructor;
+    };
+    maxTagCount: {
+        type: NumberConstructor;
+    };
+    maxTagTextLength: {
+        type: NumberConstructor;
+    };
+    maxTagPlaceholder: {
+        type: PropType<(rest: DisplayOption[]) => string | VNodeChild | JSX.Element>;
+        default: (ommittedValus: string[]) => string;
+    };
+    maxTagTooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxTagTooltipWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tagRender: {
+        type: PropType<TagRenderFunction>;
+    };
+    removeIcon: {
+        type: PropType<IconPropType>;
+    };
+    isShowTagTooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popoverProps: {
+        type: PropType<PopoverProps>;
+        default: () => {};
+    };
+}>> & {
+    onSelect?: (...args: any[]) => any;
+    "onInput-mousedown"?: (...args: any[]) => any;
+    "onInput-change"?: (...args: any[]) => any;
+    "onInput-keydown"?: (...args: any[]) => any;
+    "onInput-compositionstart"?: (...args: any[]) => any;
+    "onInput-compositionend"?: (...args: any[]) => any;
+    "onInput-paste"?: (...args: any[]) => any;
+}, {
+    values: DisplayOption[];
+    disabled: boolean;
+    open: boolean;
+    filterable: boolean;
+    maxTagPlaceholder: (rest: DisplayOption[]) => string | VNodeChild | JSX.Element;
+    maxTagTooltip: boolean;
+    maxTagTooltipWidth: number;
+    isShowTagTooltip: boolean;
+    popoverProps: PopoverProps;
+}, {}>;
+export default _default;

package/lib/components/Select/Selection/Multiple.vue_vue_type_script_lang.js

@@ -0,0 +1,202 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var index$1 = require('../../Icon/index.js');
+var index = require('../../Popover/index.js');
+var uxdIcon = require('@koi-design/uxd-icon');
+var Render = require('../../base/Render.js');
+var slots = require('../../../utils/slots.js');
+var Input = require('./Input.js');
+
+const REST_TAG_KEY = "__UUI_SELECT_MAX_REST_COUNT__";
+const defaultMaxTagPlaceholder = (ommittedValus) => `+ ${ommittedValus.length}...`;
+var _sfc_main = vue.defineComponent({
+  name: "MutipleSelector",
+  components: {
+    SelectInput: Input["default"],
+    Render: Render["default"],
+    UPopover: index.UPopover,
+    UIcon: index$1.UIcon,
+    URoundClose: uxdIcon.URoundClose
+  },
+  inheritAttrs: false,
+  props: {
+    prefixCls: {
+      type: String
+    },
+    values: {
+      type: Array,
+      default: () => []
+    },
+    searchValue: {
+      type: String
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    inputRef: {
+      type: Function
+    },
+    tagTransitionName: {
+      type: String
+    },
+    maxTagCount: {
+      type: Number
+    },
+    maxTagTextLength: {
+      type: Number
+    },
+    maxTagPlaceholder: {
+      type: Function,
+      default: defaultMaxTagPlaceholder
+    },
+    maxTagTooltip: {
+      type: Boolean,
+      default: false
+    },
+    maxTagTooltipWidth: {
+      type: Number,
+      default: 99900
+    },
+    tagRender: {
+      type: Function
+    },
+    removeIcon: {
+      type: [String, Object]
+    },
+    isShowTagTooltip: {
+      type: Boolean,
+      default: false
+    },
+    popoverProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["select", "input-mousedown", "input-change", "input-keydown", "input-compositionstart", "input-compositionend", "input-paste"],
+  setup(props, {
+    emit
+  }) {
+    const motionAppear = vue.ref(false);
+    const measureRef = vue.ref();
+    const inputWidth = vue.ref(0);
+    const inputValue = vue.computed(() => {
+      return props.searchValue;
+    });
+    const inputEditable = vue.computed(() => {
+      return props.filterable && props.open;
+    });
+    const showPlaceholder = vue.computed(() => {
+      return !props.values.length && !inputValue.value;
+    });
+    vue.onMounted(() => {
+      motionAppear.value = true;
+      vue.watch(inputValue, () => {
+        inputWidth.value = measureRef.value.scrollWidth;
+      }, {
+        flush: "post"
+      });
+    });
+    const isNotRender = vue.computed(() => {
+      return !props.tagRender;
+    });
+    const displayValues = vue.computed(() => {
+      const {
+        values,
+        maxTagCount,
+        maxTagTextLength,
+        maxTagPlaceholder
+      } = props;
+      let restCount = 0;
+      let _display = values;
+      if (typeof maxTagCount === "number") {
+        restCount = values.length - maxTagCount;
+        _display = values.slice(0, maxTagCount);
+      }
+      if (typeof maxTagTextLength === "number") {
+        _display = _display.map(({
+          displayLabel,
+          ...rest
+        }) => {
+          let _label = displayLabel;
+          if (typeof displayLabel === "string" || typeof displayLabel === "number") {
+            const strLabel = String(_label);
+            if (strLabel.length > maxTagTextLength) {
+              _label = `${strLabel.slice(0, maxTagTextLength)}...`;
+            }
+          }
+          return {
+            ...rest,
+            displayLabel: _label
+          };
+        });
+      }
+      if (restCount > 0) {
+        const rest = values.slice(maxTagCount);
+        _display.push({
+          key: REST_TAG_KEY,
+          value: REST_TAG_KEY,
+          displayLabel: maxTagPlaceholder(rest)
+        });
+      }
+      return _display;
+    });
+    const closable = (item) => {
+      return item.key !== REST_TAG_KEY && !item.disabled;
+    };
+    const onClose = (value, e) => {
+      if (e && e.stopPropagation) {
+        e.stopPropagation();
+      }
+      emit("select", value, {
+        selected: false
+      });
+    };
+    return {
+      getRender: slots.getRender,
+      REST_TAG_KEY,
+      motionAppear,
+      measureRef,
+      inputWidth,
+      inputValue,
+      inputEditable,
+      showPlaceholder,
+      isNotRender,
+      displayValues,
+      closable,
+      onClose,
+      onInputMouseDown: () => {
+        emit("input-mousedown");
+      },
+      onInputChange: (val) => {
+        emit("input-change", val);
+      },
+      onInputKeydown: (e) => {
+        emit("input-keydown", e);
+      },
+      onInputCompositionStart: (e) => {
+        emit("input-compositionstart", e);
+      },
+      onInputCompositionEnd: (e) => {
+        emit("input-compositionend", e);
+      },
+      onInputPaste: (e) => {
+        emit("input-paste", e);
+      }
+    };
+  }
+});
+
+exports["default"] = _sfc_main;
+//# sourceMappingURL=Multiple.vue_vue_type_script_lang.js.map

package/lib/components/Select/Selection/Multiple.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Multiple.vue_vue_type_script_lang.js","sources":["../../../../../src/components/Select/Selection/Multiple.vue"],"sourcesContent":["<template>\n  <!-- <transition-group :appear=\"motionAppear\" :name=\"tagTransitionName\"> -->\n  <template v-for=\"item in displayValues\" :key=\"item.key\">\n    <span\n      v-if=\"isNotRender\"\n      :class=\"{\n        [`${item.class}`]: item.class,\n        [`${prefixCls}-selection-item`]: true,\n        [`${prefixCls}-selection-item-disabled`]: item.disabled\n      }\"\n    >\n      <template v-if=\"item.key === REST_TAG_KEY || isShowTagTooltip\">\n        <UPopover :disabled=\"!maxTagTooltip\" trigger=\"hover\" :show-arrow=\"true\" placement=\"top\" v-bind=\"popoverProps\">\n          <span :class=\"`${prefixCls}-selection-item-content`\">\n            <Render :render=\"getRender(item.displayLabel)\" />\n          </span>\n          <template #content>\n            <div :class=\"`${prefixCls}-selection-tooltip`\" :style=\"{ maxWidth: `${maxTagTooltipWidth}px` }\">\n              <span\n                v-for=\"tipItem in values\"\n                :key=\"tipItem.key\"\n                :class=\"{\n                  [`${prefixCls}-selection-item`]: true\n                }\"\n              >\n                <span :class=\"`${prefixCls}-selection-item-content`\">\n                  <Render :render=\"getRender(tipItem.displayLabel)\" />\n                </span>\n                <UIcon\n                  v-if=\"closable(tipItem)\"\n                  :class=\"`${prefixCls}-selection-item-remove`\"\n                  @mousedown.stop.prevent\n                  @click=\"(e) => onClose(tipItem.value, e)\"\n                >\n                  <URoundClose />\n                </UIcon>\n              </span>\n            </div>\n          </template>\n        </UPopover>\n      </template>\n      <template v-else>\n        <span :class=\"`${prefixCls}-selection-item-content`\">\n          <!-- {{ item.displayLabel }} -->\n          <Render :render=\"getRender(item.displayLabel)\" />\n        </span>\n        <UIcon v-if=\"closable(item)\" :class=\"`${prefixCls}-selection-item-remove`\" @mousedown.stop.prevent @click=\"(e) => onClose(item.value, e)\">\n          <component :is=\"removeIcon\" v-if=\"removeIcon\" />\n          <URoundClose v-else />\n        </UIcon>\n      </template>\n    </span>\n    <span v-else :class=\"item.class\" @mousedown.stop.prevent>\n      <Render\n        :render=\"\n          () => {\n            return tagRender?.({\n              ...item,\n              closable: closable(item),\n              onClose: (e) => {\n                onClose(item.value, e);\n              }\n            });\n          }\n        \"\n      />\n    </span>\n  </template>\n  <!-- </transition-group> -->\n  <span :class=\"`${prefixCls}-selection-search`\" :style=\"{ width: `${inputWidth}px` }\">\n    <SelectInput\n      :input-ref=\"inputRef\"\n      :prefix-cls=\"prefixCls\"\n      autocomplete=\"off\"\n      :disabled=\"disabled\"\n      :editable=\"inputEditable\"\n      :value=\"inputValue\"\n      @mousedown=\"onInputMouseDown\"\n      @change=\"onInputChange\"\n      @keydown=\"onInputKeydown\"\n      @compositionstart=\"onInputCompositionStart\"\n      @compositionend=\"onInputCompositionEnd\"\n      @paste=\"onInputPaste\"\n    />\n    <span ref=\"measureRef\" :class=\"`${prefixCls}-selection-search-mirror`\" aria-hidden> {{ inputValue }}&nbsp; </span>\n  </span>\n  <div v-show=\"showPlaceholder\" :class=\"`${prefixCls}-selection-placeholder`\">\n    <slot name=\"placeholder\" />\n  </div>\n</template>\n\n<script lang=\"tsx\">\nimport { defineComponent, ref, computed, watch, onMounted } from 'vue';\nimport type { PropType, ComponentPublicInstance, VNodeChild } from 'vue';\nimport UIcon from '@uxd-ui/components/Icon';\nimport UPopover from '@uxd-ui/components/Popover';\nimport { URoundClose } from '@koi-design/uxd-icon';\nimport type { JSX } from 'vue/jsx-runtime';\nimport Render from '../../base/Render';\nimport { getRender } from '../../../utils/slots';\nimport SelectInput from './Input.vue';\nimport type { DisplayOption, SingleValueType, TagRenderFunction } from '../Select.type';\nimport type { IconPropType } from '../../../utils/globalType';\nimport type { PopoverProps } from '../../Popover';\n\nconst REST_TAG_KEY = '__UUI_SELECT_MAX_REST_COUNT__';\nconst defaultMaxTagPlaceholder = (ommittedValus: string[]) => `+ ${ommittedValus.length}...`;\n\nexport default defineComponent({\n  name: 'MutipleSelector',\n  components: {\n    SelectInput,\n    Render,\n    UPopover,\n    UIcon,\n    URoundClose\n  },\n  inheritAttrs: false,\n  props: {\n    prefixCls: {\n      type: String\n    },\n    values: {\n      type: Array as PropType<DisplayOption[]>,\n      default: () => [] as DisplayOption[]\n    },\n    searchValue: {\n      type: String\n    },\n    filterable: {\n      type: Boolean,\n      default: false\n    },\n    disabled: {\n      type: Boolean,\n      default: undefined as undefined\n    },\n    open: {\n      type: Boolean,\n      default: undefined as undefined\n    },\n    inputRef: {\n      type: Function as PropType<(el: Element | ComponentPublicInstance | null) => void>\n    },\n    tagTransitionName: {\n      type: String\n    },\n    maxTagCount: {\n      type: Number\n    },\n    maxTagTextLength: {\n      type: Number\n    },\n    maxTagPlaceholder: {\n      type: Function as PropType<(rest: DisplayOption[]) => string | VNodeChild | JSX.Element>,\n      default: defaultMaxTagPlaceholder\n    },\n    maxTagTooltip: {\n      type: Boolean,\n      default: false\n    },\n    maxTagTooltipWidth: {\n      type: Number,\n      default: 99900\n    },\n    tagRender: {\n      type: Function as PropType<TagRenderFunction>\n    },\n    removeIcon: {\n      type: [String, Object] as PropType<IconPropType>\n    },\n    isShowTagTooltip: {\n      type: Boolean,\n      default: false\n    },\n    popoverProps: {\n      type: Object as PropType<PopoverProps>,\n      default: () => ({})\n    }\n  },\n  emits: ['select', 'input-mousedown', 'input-change', 'input-keydown', 'input-compositionstart', 'input-compositionend', 'input-paste'],\n  setup(props, { emit }) {\n    const motionAppear = ref(false);\n    const measureRef = ref();\n    const inputWidth = ref(0);\n\n    const inputValue = computed(() => {\n      return props.searchValue;\n    });\n    const inputEditable = computed(() => {\n      return props.filterable && props.open;\n    });\n\n    const showPlaceholder = computed(() => {\n      return !props.values.length && !inputValue.value;\n    });\n\n    onMounted(() => {\n      motionAppear.value = true;\n      watch(\n        inputValue,\n        () => {\n          inputWidth.value = measureRef.value.scrollWidth;\n        },\n        { flush: 'post' }\n      );\n    });\n\n    const isNotRender = computed(() => {\n      return !props.tagRender;\n    });\n\n    const displayValues = computed(() => {\n      const { values, maxTagCount, maxTagTextLength, maxTagPlaceholder } = props;\n      let restCount = 0;\n      let _display = values;\n      if (typeof maxTagCount === 'number') {\n        restCount = values.length - maxTagCount;\n        _display = values.slice(0, maxTagCount);\n      }\n\n      if (typeof maxTagTextLength === 'number') {\n        _display = _display.map(({ displayLabel, ...rest }) => {\n          let _label = displayLabel;\n          if (typeof displayLabel === 'string' || typeof displayLabel === 'number') {\n            const strLabel = String(_label);\n            if (strLabel.length > maxTagTextLength) {\n              _label = `${strLabel.slice(0, maxTagTextLength)}...`;\n            }\n          }\n          return {\n            ...rest,\n            displayLabel: _label\n          };\n        });\n      }\n\n      if (restCount > 0) {\n        const rest = values.slice(maxTagCount);\n        _display.push({\n          key: REST_TAG_KEY,\n          value: REST_TAG_KEY,\n          displayLabel: maxTagPlaceholder(rest)\n        });\n      }\n      return _display;\n    });\n\n    const closable = (item: DisplayOption) => {\n      return item.key !== REST_TAG_KEY && !item.disabled;\n    };\n\n    const onClose = (value: SingleValueType, e: any) => {\n      if (e && e.stopPropagation) {\n        e.stopPropagation();\n      }\n      emit('select', value, { selected: false });\n    };\n\n    return {\n      getRender,\n      REST_TAG_KEY,\n      motionAppear,\n      measureRef,\n      inputWidth,\n      inputValue,\n      inputEditable,\n      showPlaceholder,\n      isNotRender,\n      displayValues,\n      closable,\n      onClose,\n      onInputMouseDown: () => {\n        emit('input-mousedown');\n      },\n      onInputChange: (val: any) => {\n        emit('input-change', val);\n      },\n      onInputKeydown: (e: KeyboardEvent) => {\n        emit('input-keydown', e);\n      },\n      onInputCompositionStart: (e: CompositionEvent) => {\n        emit('input-compositionstart', e);\n      },\n      onInputCompositionEnd: (e: CompositionEvent) => {\n        emit('input-compositionend', e);\n      },\n      onInputPaste: (e: ClipboardEvent) => {\n        emit('input-paste', e);\n      }\n    };\n  }\n});\n</script>\n"],"names":["REST_TAG_KEY","defaultMaxTagPlaceholder","ommittedValus","length","defineComponent","name","components","SelectInput","Render","UPopover","UIcon","URoundClose","inheritAttrs","props","prefixCls","type","String","values","Array","default","searchValue","filterable","Boolean","disabled","undefined","open","inputRef","Function","tagTransitionName","maxTagCount","Number","maxTagTextLength","maxTagPlaceholder","maxTagTooltip","maxTagTooltipWidth","tagRender","removeIcon","Object","isShowTagTooltip","popoverProps","emits","setup","emit","motionAppear","ref","measureRef","inputWidth","inputValue","computed","inputEditable","showPlaceholder","value","onMounted","watch","scrollWidth","flush","isNotRender","displayValues","restCount","_display","slice","map","displayLabel","rest","_label","strLabel","push","key","closable","item","onClose","e","stopPropagation","selected","getRender","onInputMouseDown","onInputChange","val","onInputKeydown","onInputCompositionStart","onInputCompositionEnd","onInputPaste"],"mappings":"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"}