@varlet/ui 3.3.3 → 3.3.4

package/highlight/web-types.en-US.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -5997,6 +5997,33 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "options _**3.3.4**_",
+              "description": "Specifies options",
+              "default": "-",
+              "value": {
+                "type": "SelectOption[]",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "label-key _**3.3.4**_",
+              "description": "As the key that uniquely identifies label",
+              "default": "label",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "value-key _**3.3.4**_",
+              "description": "As the key that uniquely identifies value",
+              "default": "value",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "validate-trigger",
               "description": "Timing to trigger validation, optional value is `onFocus` `onBlur` `onChange` `onClick` `onClear` `onClose`",

package/highlight/web-types.zh-CN.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -6328,6 +6328,33 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "options _**3.3.4**_",
+              "description": "指定可选项",
+              "default": "-",
+              "value": {
+                "type": "SelectOption[]",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "label-key _**3.3.4**_",
+              "description": "作为 label 唯一标识的键名",
+              "default": "label",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "value-key _**3.3.4**_",
+              "description": "作为 value 唯一标识的键名",
+              "default": "value",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "validate-trigger",
               "description": "触发验证的时机，可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onClose`",

package/lib/varlet.cjs.js

@@ -41,7 +41,7 @@ var isURL = (val) => {
   }
   return /^(http)|(\.*\/)/.test(val);
 };
-var isEmpty = (val) => val === void 0 || val === null || val === "" || Array.isArray(val) && !val.length;
+var isEmpty = (val) => val === void 0 || val === null || val === "" || isArray(val) && !val.length;
 var isWindow = (val) => val === window;
 var supportTouch = () => inBrowser() && "ontouchstart" in window;
 var inBrowser = () => typeof window !== "undefined";
@@ -388,7 +388,7 @@ function flatVNodes(subTree) {
       flat(subTree2 == null ? void 0 : subTree2.component.subTree);
       return;
     }
-    if (Array.isArray(subTree2 == null ? void 0 : subTree2.children)) {
+    if (isArray(subTree2 == null ? void 0 : subTree2.children)) {
       subTree2.children.forEach((child) => {
         if (vue.isVNode(child)) {
           vNodes.push(child);
@@ -668,7 +668,7 @@ var __async$i = (__this, __arguments, generator) => {
   });
 };
 function pickProps(props2, propsKey) {
-  return Array.isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
+  return isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
     pickedProps[key] = props2[key];
     return pickedProps;
   }, {}) : props2[propsKey];
@@ -3048,7 +3048,7 @@ const props$1c = {
 const isInternalSize$1 = (size) => ["mini", "small", "normal", "large"].includes(size);
 const { name: name$1c, n: n$1j, classes: classes$14 } = createNamespace("avatar");
 const _hoisted_1$y = ["src", "alt", "lazy-loading", "lazy-error"];
-const _hoisted_2$g = ["src", "alt"];
+const _hoisted_2$f = ["src", "alt"];
 function __render__$1i(_ctx, _cache) {
   const _directive_lazy = vue.resolveDirective("lazy");
   return vue.openBlock(), vue.createElementBlock(
@@ -3099,7 +3099,7 @@ function __render__$1i(_ctx, _cache) {
             style: vue.normalizeStyle({ objectFit: _ctx.fit }),
             onLoad: _cache[1] || (_cache[1] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
             onError: _cache[2] || (_cache[2] = (...args) => _ctx.handleError && _ctx.handleError(...args))
-          }, null, 46, _hoisted_2$g))
+          }, null, 46, _hoisted_2$f))
         ],
         64
         /* STABLE_FRAGMENT */
@@ -3255,7 +3255,7 @@ const _hoisted_1$x = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.cr
   -1
   /* HOISTED */
 ));
-const _hoisted_2$f = [
+const _hoisted_2$e = [
   _hoisted_1$x
 ];
 function __render__$1g(_ctx, _cache) {
@@ -3311,7 +3311,7 @@ function __render__$1g(_ctx, _cache) {
                     color: _ctx.color
                   })
                 },
-                [..._hoisted_2$f],
+                [..._hoisted_2$e],
                 6
                 /* CLASS, STYLE */
               )
@@ -5035,7 +5035,7 @@ const props$$ = {
 };
 const { name: name$$, n: n$16 } = createNamespace("form-details");
 const _hoisted_1$t = { key: 0 };
-const _hoisted_2$e = { key: 0 };
+const _hoisted_2$d = { key: 0 };
 function __render__$15(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(vue.Transition, {
     name: _ctx.n()
@@ -5086,7 +5086,7 @@ function __render__$15(_ctx, _cache) {
                   vue.renderSlot(_ctx.$slots, "extra-message", {}, () => [
                     _ctx.extraMessage ? (vue.openBlock(), vue.createElementBlock(
                       "div",
-                      _hoisted_2$e,
+                      _hoisted_2$d,
                       vue.toDisplayString(_ctx.extraMessage),
                       1
                       /* TEXT */
@@ -15125,7 +15125,7 @@ const props$G = {
 };
 const { name: name$G, n: n$J, classes: classes$B } = createNamespace("image");
 const _hoisted_1$n = ["alt", "title", "referrerpolicy", "lazy-loading", "lazy-error"];
-const _hoisted_2$d = ["alt", "title", "referrerpolicy", "src"];
+const _hoisted_2$c = ["alt", "title", "referrerpolicy", "src"];
 function __render__$J(_ctx, _cache) {
   var _a;
   const _directive_lazy = vue.resolveDirective("lazy");
@@ -15168,7 +15168,7 @@ function __render__$J(_ctx, _cache) {
         onLoad: _cache[2] || (_cache[2] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
         onError: _cache[3] || (_cache[3] = (...args) => _ctx.handleError && _ctx.handleError(...args)),
         onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-      }, null, 46, _hoisted_2$d)) : vue.createCommentVNode("v-if", true),
+      }, null, 46, _hoisted_2$c)) : vue.createCommentVNode("v-if", true),
       _ctx.showErrorSlot ? vue.renderSlot(_ctx.$slots, "error", { key: 2 }) : vue.createCommentVNode("v-if", true)
     ],
     6
@@ -15905,7 +15905,7 @@ const ANIMATION_DURATION = 200;
 const LONG_PRESS_DELAY = 500;
 const BASE_RATIO = 1;
 const _hoisted_1$k = ["onTouchstart"];
-const _hoisted_2$c = ["src", "alt"];
+const _hoisted_2$b = ["src", "alt"];
 function __render__$G(_ctx, _cache) {
   const _component_var_swipe_item = vue.resolveComponent("var-swipe-item");
   const _component_var_swipe = vue.resolveComponent("var-swipe");
@@ -15968,7 +15968,7 @@ function __render__$G(_ctx, _cache) {
                       class: vue.normalizeClass(_ctx.classes(_ctx.n("image"), [_ctx.isPreventDefault, _ctx.n("--prevent")])),
                       src: image,
                       alt: image
-                    }, null, 10, _hoisted_2$c)
+                    }, null, 10, _hoisted_2$b)
                   ], 46, _hoisted_1$k)
                 ]),
                 _: 2
@@ -16694,7 +16694,7 @@ const props$B = __spreadValues$a({
 ]));
 const { name: name$A, n: n$D, classes: classes$w } = createNamespace("input");
 const _hoisted_1$i = ["placeholder", "enterkeyhint"];
-const _hoisted_2$b = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
+const _hoisted_2$a = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
 const _hoisted_3$a = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
 function __render__$D(_ctx, _cache) {
   const _component_var_field_decorator = vue.resolveComponent("var-field-decorator");
@@ -16783,7 +16783,7 @@ function __render__$D(_ctx, _cache) {
               onChange: _cache[3] || (_cache[3] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
               onCompositionstart: _cache[4] || (_cache[4] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
               onCompositionend: _cache[5] || (_cache[5] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args))
-            }, null, 46, _hoisted_2$b)) : (vue.openBlock(), vue.createElementBlock("input", {
+            }, null, 46, _hoisted_2$a)) : (vue.openBlock(), vue.createElementBlock("input", {
               key: 2,
               class: vue.normalizeClass(
                 _ctx.classes(
@@ -18203,12 +18203,15 @@ function useSelect() {
 const props$s = {
   label: {},
   value: {},
-  disabled: Boolean
+  disabled: Boolean,
+  // internal
+  option: Object
 };
 const { name: name$s, n: n$v, classes: classes$p } = createNamespace("option");
 const _hoisted_1$g = ["tabindex"];
 function __render__$x(_ctx, _cache) {
   const _component_var_checkbox = vue.resolveComponent("var-checkbox");
+  const _component_maybe_v_node = vue.resolveComponent("maybe-v-node");
   const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
   const _directive_ripple = vue.resolveDirective("ripple");
   const _directive_hover = vue.resolveDirective("hover");
@@ -18252,9 +18255,11 @@ function __render__$x(_ctx, _cache) {
         {
           class: vue.normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
         },
-        vue.toDisplayString(_ctx.label),
-        3
-        /* TEXT, CLASS */
+        [
+          vue.createVNode(_component_maybe_v_node, { is: _ctx.labelVNode }, null, 8, ["is"])
+        ],
+        2
+        /* CLASS */
       )
     ]),
     vue.createVNode(_component_var_hover_overlay, {
@@ -18271,7 +18276,8 @@ const __sfc__$y = vue.defineComponent({
   directives: { Ripple: stdin_default$5W, Hover: stdin_default$5P },
   components: {
     VarCheckbox: stdin_default$59,
-    VarHoverOverlay: stdin_default$5Q
+    VarHoverOverlay: stdin_default$5Q,
+    MaybeVNode
   },
   props: props$s,
   setup(props2) {
@@ -18279,13 +18285,25 @@ const __sfc__$y = vue.defineComponent({
     const isFocusing = vue.ref(false);
     const optionSelected = vue.ref(false);
     const selected = vue.computed(() => optionSelected.value);
-    const label = vue.computed(() => props2.label);
+    const labelVNode = vue.computed(
+      () => {
+        var _a;
+        return isFunction(props2.label) ? props2.label(
+          (_a = props2.option) != null ? _a : {
+            label: props2.label,
+            value: props2.value,
+            disabled: props2.disabled
+          },
+          optionSelected.value
+        ) : props2.label;
+      }
+    );
     const value = vue.computed(() => props2.value);
     const { select, bindSelect } = useSelect();
     const { multiple, focusColor, onSelect, computeLabel } = select;
     const { hovering, handleHovering } = useHoverOverlay();
     const optionProvider = {
-      label,
+      label: labelVNode,
       value,
       selected,
       sync
@@ -18336,6 +18354,7 @@ const __sfc__$y = vue.defineComponent({
       focusColor,
       hovering,
       isFocusing,
+      labelVNode,
       n: n$v,
       classes: classes$p,
       handleHovering,
@@ -19033,7 +19052,7 @@ const TRANSITION_DURATION = 200;
 const MOMENTUM_TRANSITION_DURATION = 1e3;
 let sid$1 = 0;
 const _hoisted_1$e = ["onTouchstartPassive", "onTouchmove", "onTouchend"];
-const _hoisted_2$a = ["onTransitionend"];
+const _hoisted_2$9 = ["onTransitionend"];
 const _hoisted_3$9 = ["onClick"];
 function __render__$u(_ctx, _cache) {
   const _component_var_button = vue.resolveComponent("var-button");
@@ -19189,7 +19208,7 @@ function __render__$u(_ctx, _cache) {
                           128
                           /* KEYED_FRAGMENT */
                         ))
-                      ], 46, _hoisted_2$a)
+                      ], 46, _hoisted_2$9)
                     ], 42, _hoisted_1$e);
                   }),
                   128
@@ -19625,7 +19644,7 @@ const RADIUS = 20;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 const { name: name$n, n: n$q, classes: classes$l } = createNamespace("progress");
 const _hoisted_1$d = ["aria-valuenow"];
-const _hoisted_2$9 = ["viewBox"];
+const _hoisted_2$8 = ["viewBox"];
 const _hoisted_3$8 = { key: 0 };
 const _hoisted_4$3 = ["id"];
 const _hoisted_5$1 = ["offset", "stop-color"];
@@ -19779,7 +19798,7 @@ function __render__$t(_ctx, _cache) {
               transformOrigin: "50% 50%"
             })
           }, null, 14, _hoisted_7)
-        ], 10, _hoisted_2$9)),
+        ], 10, _hoisted_2$8)),
         _ctx.label ? (vue.openBlock(), vue.createElementBlock(
           "div",
           {
@@ -20802,7 +20821,7 @@ const _hoisted_1$a = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "2 3.6 20 20"
 };
-const _hoisted_2$8 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$7 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   { d: "M11,9H13V7H11M11,20H13V11H11V20Z" },
   null,
@@ -20810,7 +20829,7 @@ const _hoisted_2$8 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ vue.cr
   /* HOISTED */
 ));
 const _hoisted_3$7 = [
-  _hoisted_2$8
+  _hoisted_2$7
 ];
 function __render__$o(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$a, [..._hoisted_3$7]);
@@ -20823,7 +20842,7 @@ const _hoisted_1$9 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "2 2 20 20"
 };
-const _hoisted_2$7 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$6 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   { d: "M19,3V5H19V19M17,8.4L13.4,12L17,15.6L15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4Z" },
   null,
@@ -20831,7 +20850,7 @@ const _hoisted_2$7 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ vue.cr
   /* HOISTED */
 ));
 const _hoisted_3$6 = [
-  _hoisted_2$7
+  _hoisted_2$6
 ];
 function __render__$n(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$9, [..._hoisted_3$6]);
@@ -20844,7 +20863,7 @@ const _hoisted_1$8 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "-6 -4 35 35"
 };
-const _hoisted_2$6 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$5 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   { d: "M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61M1,11" },
   null,
@@ -20852,7 +20871,7 @@ const _hoisted_2$6 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ vue.cr
   /* HOISTED */
 ));
 const _hoisted_3$5 = [
-  _hoisted_2$6
+  _hoisted_2$5
 ];
 function __render__$m(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$8, [..._hoisted_3$5]);
@@ -20961,7 +20980,7 @@ const _hoisted_1$7 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "-3 -3 30 30"
 };
-const _hoisted_2$5 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   { d: "M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" },
   null,
@@ -20969,7 +20988,7 @@ const _hoisted_2$5 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ vue.cr
   /* HOISTED */
 ));
 const _hoisted_3$4 = [
-  _hoisted_2$5
+  _hoisted_2$4
 ];
 function __render__$k(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$7, [..._hoisted_3$4]);
@@ -20979,7 +20998,7 @@ __sfc__$l.render = __render__$k;
 var stdin_default$3G = __sfc__$l;
 const _withScopeId$1 = (n2) => (vue.pushScopeId(""), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$6 = { viewBox: "-4 -4 32 32" };
-const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   {
     fill: "currentColor",
@@ -20990,7 +21009,7 @@ const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.cr
   /* HOISTED */
 ));
 const _hoisted_3$3 = [
-  _hoisted_2$4
+  _hoisted_2$3
 ];
 function __render__$j(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, [..._hoisted_3$3]);
@@ -21216,6 +21235,15 @@ const props$g = __spreadValues$6({
     type: [String, Number, Boolean, Array],
     default: void 0
   },
+  options: Array,
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
   multiple: Boolean,
   offsetY: {
     type: [String, Number],
@@ -21257,11 +21285,12 @@ const props$g = __spreadValues$6({
 ]));
 const { name: name$g, n: n$i, classes: classes$e } = createNamespace("select");
 const _hoisted_1$5 = ["tabindex"];
-const _hoisted_2$3 = { key: 1 };
 function __render__$g(_ctx, _cache) {
+  const _component_maybe_v_node = vue.resolveComponent("maybe-v-node");
   const _component_var_chip = vue.resolveComponent("var-chip");
   const _component_var_icon = vue.resolveComponent("var-icon");
   const _component_var_field_decorator = vue.resolveComponent("var-field-decorator");
+  const _component_var_option = vue.resolveComponent("var-option");
   const _component_var_menu = vue.resolveComponent("var-menu");
   const _component_var_form_details = vue.resolveComponent("var-form-details");
   return vue.openBlock(), vue.createElementBlock("div", {
@@ -21294,6 +21323,21 @@ function __render__$g(_ctx, _cache) {
             class: vue.normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
           },
           [
+            _ctx.selectOptions.length ? (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              { key: 0 },
+              vue.renderList(_ctx.selectOptions, (option) => {
+                return vue.openBlock(), vue.createBlock(_component_var_option, {
+                  key: option[_ctx.valueKey],
+                  label: option[_ctx.labelKey],
+                  value: option[_ctx.valueKey],
+                  option,
+                  disabled: option.disabled
+                }, null, 8, ["label", "value", "option", "disabled"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )) : vue.createCommentVNode("v-if", true),
             vue.renderSlot(_ctx.$slots, "default")
           ],
           2
@@ -21374,11 +21418,7 @@ function __render__$g(_ctx, _cache) {
                                       onClose: () => _ctx.handleClose(l)
                                     }, {
                                       default: vue.withCtx(() => [
-                                        vue.createTextVNode(
-                                          vue.toDisplayString(l),
-                                          1
-                                          /* TEXT */
-                                        )
+                                        vue.createVNode(_component_maybe_v_node, { is: l }, null, 8, ["is"])
                                       ]),
                                       _: 2
                                       /* DYNAMIC */
@@ -21396,20 +21436,40 @@ function __render__$g(_ctx, _cache) {
                                 key: 1,
                                 class: vue.normalizeClass(_ctx.n("values"))
                               },
-                              vue.toDisplayString(_ctx.labels.join(_ctx.separator)),
-                              3
-                              /* TEXT, CLASS */
+                              [
+                                (vue.openBlock(true), vue.createElementBlock(
+                                  vue.Fragment,
+                                  null,
+                                  vue.renderList(_ctx.labels, (l, labelIndex) => {
+                                    return vue.openBlock(), vue.createElementBlock(
+                                      vue.Fragment,
+                                      { key: l },
+                                      [
+                                        vue.createVNode(_component_maybe_v_node, { is: l }, null, 8, ["is"]),
+                                        vue.createTextVNode(
+                                          vue.toDisplayString(labelIndex !== _ctx.labels.length - 1 ? _ctx.separator : ""),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ],
+                                      64
+                                      /* STABLE_FRAGMENT */
+                                    );
+                                  }),
+                                  128
+                                  /* KEYED_FRAGMENT */
+                                ))
+                              ],
+                              2
+                              /* CLASS */
                             ))
                           ],
                           64
                           /* STABLE_FRAGMENT */
-                        )) : (vue.openBlock(), vue.createElementBlock(
-                          "span",
-                          _hoisted_2$3,
-                          vue.toDisplayString(_ctx.label),
-                          1
-                          /* TEXT */
-                        ))
+                        )) : (vue.openBlock(), vue.createBlock(_component_maybe_v_node, {
+                          key: 1,
+                          is: _ctx.label
+                        }, null, 8, ["is"]))
                       ]) : vue.createCommentVNode("v-if", true)
                     ],
                     2
@@ -21475,8 +21535,10 @@ const __sfc__$h = vue.defineComponent({
     VarIcon: stdin_default$5S,
     VarMenu: stdin_default$47,
     VarChip: stdin_default$55,
+    VarOption: stdin_default$41,
     VarFieldDecorator: stdin_default$4z,
-    VarFormDetails: stdin_default$5b
+    VarFormDetails: stdin_default$5b,
+    MaybeVNode
   },
   props: props$g,
   setup(props2) {
@@ -21487,6 +21549,7 @@ const __sfc__$h = vue.defineComponent({
     const focusColor = vue.computed(() => props2.focusColor);
     const isEmptyModelValue = vue.computed(() => isEmpty(props2.modelValue));
     const cursor = vue.computed(() => props2.disabled || props2.readonly ? "" : "pointer");
+    const selectOptions = vue.computed(() => isArray(props2.options) ? props2.options : []);
     const offsetY = vue.ref(0);
     const { bindForm, form } = useForm();
     const { length, options, bindOptions } = useOptions();
@@ -21702,6 +21765,8 @@ const __sfc__$h = vue.defineComponent({
       cursor,
       placeholderColor,
       enableCustomPlaceholder,
+      selectOptions,
+      isFunction,
       n: n$i,
       classes: classes$e,
       handleFocus,
@@ -28869,7 +28934,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.3.3";
+const version = "3.3.4";
 function install(app) {
   stdin_default$5G.install && app.use(stdin_default$5G);
   stdin_default$5E.install && app.use(stdin_default$5E);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.3.3",
-    "@varlet/shared": "3.3.3",
-    "@varlet/use": "3.3.3"
+    "@varlet/icons": "3.3.4",
+    "@varlet/shared": "3.3.4",
+    "@varlet/use": "3.3.4"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -64,9 +64,9 @@
     "typescript": "^5.1.5",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/cli": "3.3.3",
-    "@varlet/ui": "3.3.3",
-    "@varlet/touch-emulator": "3.3.3"
+    "@varlet/ui": "3.3.4",
+    "@varlet/cli": "3.3.4",
+    "@varlet/touch-emulator": "3.3.4"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/select.d.ts

@@ -9,8 +9,23 @@ export type SelectTextAlign = 'left' | 'right' | 'center'
 
 export type SelectSize = 'small' | 'normal'
 
+export type SelectOptionLabelRender = (option: SelectOption, checked: boolean) => VNodeChild
+
+export type SelectOptionLabel = string | VNode | SelectOptionLabelRender
+
+export interface SelectOption {
+  label?: SelectOptionLabel
+  value?: any
+  disabled?: boolean
+
+  [key: PropertyKey]: any
+}
+
 export interface SelectProps extends BasicAttributes {
   modelValue?: any
+  options?: Array<SelectOption>
+  labelKey?: string
+  valueKey?: string
   variant?: SelectVariant
   size?: SelectSize
   placeholder?: string