vue-devui 1.0.0-alpha.6 → 1.0.0-beta.12

package/select/index.es.js

@@ -1 +1,706 @@
-var e=Object.defineProperty,l=Object.defineProperties,t=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,i=(l,t,o)=>t in l?e(l,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):l[t]=o,d=(e,l)=>{for(var t in l||(l={}))n.call(l,t)&&i(e,t,l[t]);if(o)for(var t of o(l))a.call(l,t)&&i(e,t,l[t]);return e},u=(e,o)=>l(e,t(o));"undefined"!=typeof require&&require;import{defineComponent as r,createVNode as c,inject as s,computed as p,mergeProps as m,toRef as v,provide as h,onMounted as f,onBeforeUnmount as g,ref as b,Transition as y,withDirectives as k,vShow as w}from"vue";const C={modelValue:{type:[String,Number,Array],default:""},"onUpdate:modelValue":{type:Function,default:void 0},options:{type:Array,default:()=>[]},size:{type:String,default:"md"},overview:{type:String,default:"border"},placeholder:{type:String,default:"请选择"},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},allowClear:{type:Boolean,default:!1},optionDisabledKey:{type:String,default:""},onToggleChange:{type:Function,default:void 0},onValueChange:{type:Function,default:void 0}};var V=r({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup:e=>d({},e),render(){const{name:e,size:l,color:t,classPrefix:o}=this;return c("i",{class:`${o} ${o}-${e}`,style:{fontSize:l,color:t}},null)}});V.install=function(e){e.component(V.name,V)};const S={name:{type:String,default:void 0},isShowTitle:{type:Boolean,default:!0},color:{type:String,default:void 0},showAnimation:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},beforeChange:{type:Function,default:void 0}},x=u(d({},S),{halfchecked:{type:Boolean,default:!1},checked:{type:Boolean,default:!1},value:{type:String},label:{type:String,default:void 0},title:{type:String,default:void 0},"onUpdate:checked":{type:Function,default:void 0},onChange:{type:Function,default:void 0},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}}),A=u(d({},S),{modelValue:{type:Array,required:!0},direction:{type:String,default:"column"},itemWidth:{type:Number,default:void 0},options:{type:Array,default:()=>[]},onChange:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}}),O=Symbol("d-checkbox-group");var P=r({name:"DCheckbox",props:x,emits:["change","update:checked","update:modelValue"],setup(e,l){const t=s(O,null),o=p((()=>e.checked||e.modelValue)),n=p((()=>(null==t?void 0:t.disabled.value)||e.disabled)),a=p((()=>{var l,n;return null!=(n=null==(l=null==t?void 0:t.isItemChecked)?void 0:l.call(t,e.value))?n:o.value})),i=p((()=>{var l;return null!=(l=null==t?void 0:t.isShowTitle)?l:e.isShowTitle})),d=p((()=>{var l;return null!=(l=null==t?void 0:t.showAnimation)?l:e.showAnimation})),u=p((()=>{var l;return null!=(l=null==t?void 0:t.color)?l:e.color})),r=null==t?void 0:t.itemWidth.value,c=null==t?void 0:t.direction.value;return{itemWidth:r,direction:c,mergedColor:u,mergedDisabled:n,mergedIsShowTitle:i,mergedChecked:a,mergedShowAnimation:d,handleClick:()=>{((l,o)=>{var a;if(n.value)return Promise.resolve(!1);const i=null!=(a=e.beforeChange)?a:null==t?void 0:t.beforeChange;if(i){const e=i(l,o);return"boolean"==typeof e?Promise.resolve(e):e}return Promise.resolve(!0)})(!o.value,e.value).then((n=>n&&(()=>{const n=!o.value;null==t||t.toggleGroupVal(e.value),l.emit("update:checked",n),l.emit("update:modelValue",n),l.emit("change",n)})()))}}},render(){var e;const{itemWidth:l,direction:t,mergedChecked:o,mergedDisabled:n,mergedIsShowTitle:a,mergedShowAnimation:i,halfchecked:d,title:u,label:r,handleClick:s,name:p,value:v,mergedColor:h,$slots:f}=this,g={"devui-checkbox-column-margin":"column"===t,"devui-checkbox-wrap":void 0!==l},b=l?[`width: ${l}px`]:[],y={"devui-checkbox":!0,active:o,halfchecked:d,disabled:n,unchecked:!o},k=a?u||r:"",w=[`border-color:${(o||d)&&h?h:""}`,`background-image:${h&&d||h?`linear-gradient(${h}, ${h})`:""}`,`background-color:${h&&d?h:""}`],C={"devui-checkbox-material":!0,"custom-color":h,"devui-checkbox-no-label":!r&&!f.default,"devui-no-animation":!i,"devui-checkbox-default-background":!d},V={"devui-tick":!0,"devui-no-animation":!i},S=e=>e.stopPropagation();return c("div",{class:g,style:b},[c("div",{class:y},[c("label",{title:k,onClick:s},[c("input",m({name:p||v,class:"devui-checkbox-input",type:"checkbox"},{indeterminate:d},{checked:o,disabled:n,onClick:S,onChange:S}),null),c("span",{style:w,class:C},[c("span",{class:"devui-checkbox-halfchecked-bg"},null),c("svg",{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"devui-checkbox-tick"},[c("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[c("polygon",{"fill-rule":"nonzero",points:"5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",class:V},null)])])]),r||(null==(e=f.default)?void 0:e.call(f))])])])}}),D=r({name:"DCheckboxGroup",props:A,emits:["change","update:modelValue"],setup(e,l){const t=v(e,"modelValue");return h(O,{disabled:v(e,"disabled"),isShowTitle:v(e,"isShowTitle"),color:v(e,"color"),showAnimation:v(e,"showAnimation"),beforeChange:e.beforeChange,isItemChecked:e=>t.value.includes(e),toggleGroupVal:e=>{const o=t.value.findIndex((l=>l===e));if(-1===o){const o=[...t.value,e];return l.emit("update:modelValue",o),void l.emit("change",o)}t.value.splice(o,1),l.emit("update:modelValue",t.value),l.emit("change",t.value)},itemWidth:v(e,"itemWidth"),direction:v(e,"direction")}),{defaultOpt:{checked:!1,isShowTitle:!0,halfchecked:!1,showAnimation:!0,disabled:!1}}},render(){var e;const{direction:l,$slots:t,defaultOpt:o,options:n}=this;let a=null==(e=t.default)?void 0:e.call(t);return(null==n?void 0:n.length)>0&&(a=n.map((e=>{const l=Object.assign({},o,e);return c(P,l,null)}))),c("div",{class:"devui-checkbox-group"},[c("div",{class:{"devui-checkbox-list-inline":"row"===l}},[a])])}});function $(e,l){let t=e;return"object"==typeof l&&Object.keys(l).forEach((e=>{l[e]&&(t+=` ${e}`)})),t}P.install=function(e){e.component(P.name,P)},D.install=function(e){e.component(D.name,D)};var j=r({name:"DSelect",props:C,emits:["toggleChange","valueChange","update:modelValue"],setup(e,l){const t=b(null),o=b(null),n=b(!1);function a(t){e.disabled||(n.value=t,l.emit("toggleChange",t))}!function(e,l,t){function o(o){var n,a;let i=o.target;i.shadowRoot&&o.composed&&(i=o.composedPath()[0]||i);const d=[null==(n=e[0])?void 0:n.value,null==(a=e[1])?void 0:a.value];l.value&&d.every((e=>e&&!e.contains(i)&&e!==i))&&t(!1)}f((()=>{document.body.addEventListener("mousedown",o,!1)})),g((()=>{document.body.addEventListener("mousedown",o,!1)}))}([t,o],n,a);const i=p((()=>{const{multiple:l,modelValue:t}=e;return e.options.map((e=>{let o;return o="object"==typeof e?d({name:e.name?e.name:e.value+"",value:e.value,_checked:!1},e):{name:e+"",value:e,_checked:!1},l&&(Array.isArray(t)?o._checked=t.includes(o.value):o._checked=!1),o}))})),u=function(e){const l=p((()=>{const l=new Map;return e.value.forEach((e=>{l.set(e.value,e)})),l}));return e=>e.map((e=>l.value.get(e)))}(i),r=p((()=>{var l;if(e.multiple&&Array.isArray(e.modelValue)){return u(e.modelValue).map((e=>e.name)).join(",")}return Array.isArray(e.modelValue)?"":(null==(l=u([e.modelValue])[0])?void 0:l.name)||""})),c=p((()=>!e.disabled&&e.allowClear&&r.value.length>0));return{isOpen:n,containerRef:t,dropdownRef:o,inputValue:r,mergeOptions:i,mergeClearable:c,valueChange:function(t,o){const{multiple:n,optionDisabledKey:d}=e;let{modelValue:u}=e;d&&t[d]||(n?(t._checked=!t._checked,u=i.value.filter((e=>e._checked)).map((e=>e.value)),l.emit("update:modelValue",u)):(l.emit("update:modelValue",t.value),a(!1)),l.emit("valueChange",t,o))},toggleChange:a,getItemClassName:function(l){const{optionDisabledKey:t}=e;return $("devui-select-item",{active:l.value===e.modelValue,disabled:!!t&&!!l[t]})},handleClear:function(t){t.preventDefault(),t.stopPropagation(),e.multiple?l.emit("update:modelValue",[]):l.emit("update:modelValue","")}}},render(){const{mergeOptions:e,isOpen:l,inputValue:t,size:o,multiple:n,disabled:a,optionDisabledKey:i,placeholder:d,overview:u,valueChange:r,toggleChange:s,getItemClassName:p,mergeClearable:m,handleClear:v}=this,h=$("devui-select",{"devui-select-open":l,"devui-dropdown-menu-multiple":n,"devui-select-lg":"lg"===o,"devui-select-sm":"sm"===o,"devui-select-underlined":"underlined"===u,"devui-select-disabled":a}),f=$("devui-select-input",{"devui-select-input-lg":"lg"===o,"devui-select-input-sm":"sm"===o}),g=$("devui-select-selection",{"devui-select-clearable":m});return c("div",{class:h,ref:"containerRef"},[c("div",{class:g,onClick:()=>s(!l)},[c("input",{value:t,type:"text",class:f,placeholder:d,readonly:!0,disabled:a},null),c("span",{onClick:v,class:"devui-select-clear"},[c(V,{name:"close"},null)]),c("span",{class:"devui-select-arrow"},[c(V,{name:"select-arrow"},null)])]),c(y,{name:"fade",ref:"dropdownRef"},{default:()=>[k(c("div",{class:"devui-select-dropdown"},[c("ul",{class:"devui-select-dropdown-list devui-scrollbar"},[e.map(((e,l)=>c("li",{onClick:t=>{t.preventDefault(),t.stopPropagation(),r(e,l)},class:p(e),key:l},[n?c(P,{modelValue:e._checked,label:e.name,disabled:!!i&&!!e[i]},null):e.name])))])]),[[w,l]])]})])}});j.install=function(e){e.component(j.name,j)};var B={title:"Select 下拉框",category:"数据录入",status:"已完成",install(e){e.use(j)}};export{j as Select,B as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { defineComponent, createVNode, inject, computed, mergeProps, toRef, provide, onMounted, onBeforeUnmount, ref, Transition, withDirectives, vShow } from "vue";
+const selectProps = {
+  modelValue: {
+    type: [String, Number, Array],
+    default: ""
+  },
+  "onUpdate:modelValue": {
+    type: Function,
+    default: void 0
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  overview: {
+    type: String,
+    default: "border"
+  },
+  placeholder: {
+    type: String,
+    default: "\u8BF7\u9009\u62E9"
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  allowClear: {
+    type: Boolean,
+    default: false
+  },
+  optionDisabledKey: {
+    type: String,
+    default: ""
+  },
+  onToggleChange: {
+    type: Function,
+    default: void 0
+  },
+  onValueChange: {
+    type: Function,
+    default: void 0
+  }
+};
+var Icon = defineComponent({
+  name: "DIcon",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: String,
+      default: "inherit"
+    },
+    color: {
+      type: String,
+      default: "inherit"
+    },
+    classPrefix: {
+      type: String,
+      default: "icon"
+    }
+  },
+  setup(props) {
+    return __spreadValues({}, props);
+  },
+  render() {
+    const {
+      name,
+      size,
+      color,
+      classPrefix
+    } = this;
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
+      "src": name,
+      "alt": name.split("/")[name.split("/").length - 1],
+      "style": {
+        width: size,
+        verticalAlign: "text-bottom"
+      }
+    }, null) : createVNode("i", {
+      "class": `${classPrefix} ${classPrefix}-${name}`,
+      "style": {
+        fontSize: size,
+        color
+      }
+    }, null);
+  }
+});
+Icon.install = function(app) {
+  app.component(Icon.name, Icon);
+};
+var checkbox = "";
+const commonProps = {
+  name: {
+    type: String,
+    default: void 0
+  },
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  isShowTitle: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String
+  },
+  color: {
+    type: String,
+    default: void 0
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  beforeChange: {
+    type: Function,
+    default: void 0
+  }
+};
+const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String
+  },
+  label: {
+    type: String,
+    default: void 0
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  "onUpdate:checked": {
+    type: Function,
+    default: void 0
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  modelValue: {
+    type: Boolean
+  },
+  "onUpdate:modelValue": {
+    type: Function
+  }
+});
+const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  direction: {
+    type: String,
+    default: "column"
+  },
+  itemWidth: {
+    type: Number,
+    default: void 0
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  "onUpdate:modelValue": {
+    type: Function,
+    default: void 0
+  }
+});
+const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+var Checkbox = defineComponent({
+  name: "DCheckbox",
+  props: checkboxProps,
+  emits: ["change", "update:checked", "update:modelValue"],
+  setup(props, ctx) {
+    const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+    const isChecked = computed(() => props.checked || props.modelValue);
+    const mergedDisabled = computed(() => {
+      return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
+    });
+    const mergedChecked = computed(() => {
+      var _a, _b;
+      return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
+    });
+    const mergedIsShowTitle = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
+    });
+    const mergedShowAnimation = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
+    });
+    const mergedColor = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
+    });
+    const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
+    const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
+    const canChange = (isChecked2, val) => {
+      var _a;
+      if (mergedDisabled.value) {
+        return Promise.resolve(false);
+      }
+      const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
+      if (beforeChange) {
+        const res = beforeChange(isChecked2, val);
+        if (typeof res === "boolean") {
+          return Promise.resolve(res);
+        }
+        return res;
+      }
+      return Promise.resolve(true);
+    };
+    const toggle = () => {
+      const current = !isChecked.value;
+      checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
+      ctx.emit("update:checked", current);
+      ctx.emit("update:modelValue", current);
+      ctx.emit("change", current);
+    };
+    const handleClick = () => {
+      canChange(!isChecked.value, props.label).then((res) => res && toggle());
+    };
+    return {
+      itemWidth,
+      direction,
+      mergedColor,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedChecked,
+      mergedShowAnimation,
+      handleClick
+    };
+  },
+  render() {
+    var _a;
+    const {
+      itemWidth,
+      direction,
+      mergedChecked,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedShowAnimation,
+      halfchecked,
+      title,
+      label,
+      handleClick,
+      name,
+      value,
+      mergedColor,
+      $slots
+    } = this;
+    const wrapperCls = {
+      "devui-checkbox-column-margin": direction === "column",
+      "devui-checkbox-wrap": typeof itemWidth !== "undefined"
+    };
+    const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
+    const checkboxCls = {
+      "devui-checkbox": true,
+      active: mergedChecked,
+      halfchecked,
+      disabled: mergedDisabled,
+      unchecked: !mergedChecked
+    };
+    const labelTitle = mergedIsShowTitle ? title || label : "";
+    const bgImgStyle = mergedColor && halfchecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
+    const spanStyle = [`border-color:${(mergedChecked || halfchecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfchecked ? mergedColor : ""}`];
+    const spanCls = {
+      "devui-checkbox-material": true,
+      "custom-color": mergedColor,
+      "devui-checkbox-no-label": !label && !$slots.default,
+      "devui-no-animation": !mergedShowAnimation,
+      "devui-checkbox-default-background": !halfchecked
+    };
+    const polygonCls = {
+      "devui-tick": true,
+      "devui-no-animation": !mergedShowAnimation
+    };
+    const stopPropagation = ($event) => $event.stopPropagation();
+    const inputProps = {
+      indeterminate: halfchecked
+    };
+    return createVNode("div", {
+      "class": wrapperCls,
+      "style": wrapperStyle
+    }, [createVNode("div", {
+      "class": checkboxCls
+    }, [createVNode("label", {
+      "title": labelTitle,
+      "onClick": handleClick
+    }, [createVNode("input", mergeProps({
+      "name": name || value,
+      "class": "devui-checkbox-input",
+      "type": "checkbox"
+    }, inputProps, {
+      "checked": mergedChecked,
+      "disabled": mergedDisabled,
+      "onClick": stopPropagation,
+      "onChange": stopPropagation
+    }), null), createVNode("span", {
+      "style": spanStyle,
+      "class": spanCls
+    }, [createVNode("span", {
+      "class": "devui-checkbox-halfchecked-bg"
+    }, null), createVNode("svg", {
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "class": "devui-checkbox-tick"
+    }, [createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("polygon", {
+      "fill-rule": "nonzero",
+      "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
+      "class": polygonCls
+    }, null)])])]), label || ((_a = $slots.default) == null ? void 0 : _a.call($slots))])])]);
+  }
+});
+var checkboxGroup = "";
+var CheckboxGroup = defineComponent({
+  name: "DCheckboxGroup",
+  props: checkboxGroupProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, ctx) {
+    const valList = toRef(props, "modelValue");
+    const defaultOpt = {
+      checked: false,
+      isShowTitle: true,
+      halfchecked: false,
+      showAnimation: true,
+      disabled: false
+    };
+    const toggleGroupVal = (val) => {
+      let index2 = -1;
+      if (typeof valList.value[0] === "string") {
+        index2 = valList.value.findIndex((item) => item === val);
+      } else if (typeof valList.value[0] === "object") {
+        index2 = valList.value.findIndex((item) => item.value === val);
+      }
+      if (index2 === -1) {
+        if (typeof props.options[0] === "object") {
+          const newOne = props.options.find((item) => item.value === val);
+          const res2 = [...valList.value, newOne];
+          ctx.emit("update:modelValue", res2);
+          ctx.emit("change", res2);
+          return;
+        }
+        const res = [...valList.value, val];
+        ctx.emit("update:modelValue", res);
+        ctx.emit("change", res);
+        return;
+      }
+      valList.value.splice(index2, 1);
+      ctx.emit("update:modelValue", valList.value);
+      ctx.emit("change", valList.value);
+    };
+    const isItemChecked = (itemVal) => {
+      if (typeof valList.value[0] === "string") {
+        return valList.value.includes(itemVal);
+      } else if (typeof valList.value[0] === "object") {
+        return valList.value.some((item) => item.value === itemVal);
+      }
+    };
+    provide(checkboxGroupInjectionKey, {
+      disabled: toRef(props, "disabled"),
+      isShowTitle: toRef(props, "isShowTitle"),
+      color: toRef(props, "color"),
+      showAnimation: toRef(props, "showAnimation"),
+      beforeChange: props.beforeChange,
+      isItemChecked,
+      toggleGroupVal,
+      itemWidth: toRef(props, "itemWidth"),
+      direction: toRef(props, "direction")
+    });
+    return {
+      defaultOpt
+    };
+  },
+  render() {
+    var _a;
+    const {
+      direction,
+      $slots,
+      defaultOpt,
+      options
+    } = this;
+    let children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
+    if ((options == null ? void 0 : options.length) > 0) {
+      children = options.map((opt) => {
+        let mergedOpt = null;
+        if (typeof opt === "string") {
+          mergedOpt = Object.assign({}, defaultOpt, {
+            label: opt,
+            value: opt
+          });
+        } else if (typeof opt === "object") {
+          mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
+            label: opt.name
+          }));
+        }
+        return createVNode(Checkbox, mergedOpt, null);
+      });
+    }
+    return createVNode("div", {
+      "class": "devui-checkbox-group"
+    }, [createVNode("div", {
+      "class": {
+        "devui-checkbox-list-inline": direction === "row"
+      }
+    }, [children])]);
+  }
+});
+Checkbox.install = function(app) {
+  app.component(Checkbox.name, Checkbox);
+};
+CheckboxGroup.install = function(app) {
+  app.component(CheckboxGroup.name, CheckboxGroup);
+};
+function className(classStr, classOpt) {
+  let classname = classStr;
+  if (typeof classOpt === "object") {
+    Object.keys(classOpt).forEach((key) => {
+      classOpt[key] && (classname += ` ${key}`);
+    });
+  }
+  return classname;
+}
+function useCacheOptions(mergeOptions) {
+  const cacheOptions = computed(() => {
+    const map = new Map();
+    mergeOptions.value.forEach((item) => {
+      map.set(item.value, item);
+    });
+    return map;
+  });
+  const getValuesOption = (values) => values.map((value) => cacheOptions.value.get(value));
+  return getValuesOption;
+}
+function useSelectOutsideClick(refs, isOpen, toggleChange) {
+  function onGlobalMouseDown(e) {
+    var _a, _b;
+    let target = e.target;
+    if (target.shadowRoot && e.composed) {
+      target = e.composedPath()[0] || target;
+    }
+    const element = [(_a = refs[0]) == null ? void 0 : _a.value, (_b = refs[1]) == null ? void 0 : _b.value];
+    if (isOpen.value && element.every((el) => el && !el.contains(target) && el !== target)) {
+      toggleChange(false);
+    }
+  }
+  onMounted(() => {
+    document.body.addEventListener("mousedown", onGlobalMouseDown, false);
+  });
+  onBeforeUnmount(() => {
+    document.body.addEventListener("mousedown", onGlobalMouseDown, false);
+  });
+}
+var select = "";
+var Select = defineComponent({
+  name: "DSelect",
+  props: selectProps,
+  emits: ["toggleChange", "valueChange", "update:modelValue"],
+  setup(props, ctx) {
+    const containerRef = ref(null);
+    const dropdownRef = ref(null);
+    const isOpen = ref(false);
+    function toggleChange(bool) {
+      if (props.disabled)
+        return;
+      isOpen.value = bool;
+      ctx.emit("toggleChange", bool);
+    }
+    useSelectOutsideClick([containerRef, dropdownRef], isOpen, toggleChange);
+    const mergeOptions = computed(() => {
+      const {
+        multiple,
+        modelValue
+      } = props;
+      return props.options.map((item) => {
+        let option;
+        if (typeof item === "object") {
+          option = __spreadValues({
+            name: item.name ? item.name : item.value + "",
+            value: item.value,
+            _checked: false
+          }, item);
+        } else {
+          option = {
+            name: item + "",
+            value: item,
+            _checked: false
+          };
+        }
+        if (multiple) {
+          if (Array.isArray(modelValue)) {
+            option._checked = modelValue.includes(option.value);
+          } else {
+            option._checked = false;
+          }
+        }
+        return option;
+      });
+    });
+    const getValuesOption = useCacheOptions(mergeOptions);
+    const inputValue = computed(() => {
+      var _a;
+      if (props.multiple && Array.isArray(props.modelValue)) {
+        const selectedOptions = getValuesOption(props.modelValue);
+        return selectedOptions.map((item) => item.name).join(",");
+      } else if (!Array.isArray(props.modelValue)) {
+        return ((_a = getValuesOption([props.modelValue])[0]) == null ? void 0 : _a.name) || "";
+      }
+      return "";
+    });
+    const mergeClearable = computed(() => {
+      return !props.disabled && props.allowClear && inputValue.value.length > 0;
+    });
+    function valueChange(item, index2) {
+      const {
+        multiple,
+        optionDisabledKey: disabledKey
+      } = props;
+      let {
+        modelValue
+      } = props;
+      if (disabledKey && !!item[disabledKey])
+        return;
+      if (multiple) {
+        item._checked = !item._checked;
+        modelValue = mergeOptions.value.filter((item2) => item2._checked).map((item2) => item2.value);
+        ctx.emit("update:modelValue", modelValue);
+      } else {
+        ctx.emit("update:modelValue", item.value);
+        toggleChange(false);
+      }
+      ctx.emit("valueChange", item, index2);
+    }
+    function getItemClassName(item) {
+      const {
+        optionDisabledKey: disabledKey
+      } = props;
+      return className("devui-select-item", {
+        active: item.value === props.modelValue,
+        disabled: disabledKey ? !!item[disabledKey] : false
+      });
+    }
+    function handleClear(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (props.multiple) {
+        ctx.emit("update:modelValue", []);
+      } else {
+        ctx.emit("update:modelValue", "");
+      }
+    }
+    return {
+      isOpen,
+      containerRef,
+      dropdownRef,
+      inputValue,
+      mergeOptions,
+      mergeClearable,
+      valueChange,
+      toggleChange,
+      getItemClassName,
+      handleClear
+    };
+  },
+  render() {
+    const {
+      mergeOptions,
+      isOpen,
+      inputValue,
+      size,
+      multiple,
+      disabled,
+      optionDisabledKey: disabledKey,
+      placeholder,
+      overview,
+      valueChange,
+      toggleChange,
+      getItemClassName,
+      mergeClearable,
+      handleClear
+    } = this;
+    const selectCls = className("devui-select", {
+      "devui-select-open": isOpen,
+      "devui-dropdown-menu-multiple": multiple,
+      "devui-select-lg": size === "lg",
+      "devui-select-sm": size === "sm",
+      "devui-select-underlined": overview === "underlined",
+      "devui-select-disabled": disabled
+    });
+    const inputCls = className("devui-select-input", {
+      "devui-select-input-lg": size === "lg",
+      "devui-select-input-sm": size === "sm"
+    });
+    const selectionCls = className("devui-select-selection", {
+      "devui-select-clearable": mergeClearable
+    });
+    return createVNode("div", {
+      "class": selectCls,
+      "ref": "containerRef"
+    }, [createVNode("div", {
+      "class": selectionCls,
+      "onClick": () => toggleChange(!isOpen)
+    }, [createVNode("input", {
+      "value": inputValue,
+      "type": "text",
+      "class": inputCls,
+      "placeholder": placeholder,
+      "readonly": true,
+      "disabled": disabled
+    }, null), createVNode("span", {
+      "onClick": handleClear,
+      "class": "devui-select-clear"
+    }, [createVNode(Icon, {
+      "name": "close"
+    }, null)]), createVNode("span", {
+      "class": "devui-select-arrow"
+    }, [createVNode(Icon, {
+      "name": "select-arrow"
+    }, null)])]), createVNode(Transition, {
+      "name": "fade",
+      "ref": "dropdownRef"
+    }, {
+      default: () => [withDirectives(createVNode("div", {
+        "class": "devui-select-dropdown"
+      }, [createVNode("ul", {
+        "class": "devui-select-dropdown-list devui-scrollbar"
+      }, [mergeOptions.map((item, i) => createVNode("li", {
+        "onClick": (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          valueChange(item, i);
+        },
+        "class": getItemClassName(item),
+        "key": i
+      }, [multiple ? createVNode(Checkbox, {
+        "modelValue": item._checked,
+        "label": item.name,
+        "disabled": disabledKey ? !!item[disabledKey] : false
+      }, null) : item.name]))])]), [[vShow, isOpen]])]
+    })]);
+  }
+});
+Select.install = function(app) {
+  app.component(Select.name, Select);
+};
+var index = {
+  title: "Select \u4E0B\u62C9\u6846",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "10%",
+  install(app) {
+    app.use(Select);
+  }
+};
+export { Select, index as default };