@varlet/ui 3.3.2 → 3.3.4

package/es/dialog/Dialog.mjs

@@ -93,60 +93,66 @@ function __render__(_ctx, _cache) {
             6
             /* CLASS, STYLE */
           ),
-          _createElementVNode(
-            "div",
-            {
-              class: _normalizeClass(_ctx.n("actions"))
-            },
-            [
-              _ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
-                key: 0,
-                class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("cancel-button"))),
-                "var-dialog-cover": "",
-                text: "",
-                "text-color": _ctx.cancelButtonTextColor,
-                color: _ctx.cancelButtonColor,
-                onClick: _ctx.cancel
-              }, {
-                default: _withCtx(() => {
-                  var _a;
-                  return [
-                    _createTextVNode(
-                      _toDisplayString((_a = _ctx.cancelButtonText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("dialogCancelButtonText")),
-                      1
-                      /* TEXT */
-                    )
-                  ];
-                }),
-                _: 1
-                /* STABLE */
-              }, 8, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true),
-              _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, {
-                key: 1,
-                class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("confirm-button"))),
-                "var-dialog-cover": "",
-                text: "",
-                "text-color": _ctx.confirmButtonTextColor,
-                color: _ctx.confirmButtonColor,
-                onClick: _ctx.confirm
-              }, {
-                default: _withCtx(() => {
-                  var _a;
-                  return [
-                    _createTextVNode(
-                      _toDisplayString((_a = _ctx.confirmButtonText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("dialogConfirmButtonText")),
-                      1
-                      /* TEXT */
-                    )
-                  ];
-                }),
-                _: 1
-                /* STABLE */
-              }, 8, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true)
-            ],
-            2
-            /* CLASS */
-          )
+          _renderSlot(_ctx.$slots, "actions", {
+            slotClass: _ctx.n("actions"),
+            cancel: _ctx.cancel,
+            confirm: _ctx.confirm
+          }, () => [
+            _createElementVNode(
+              "div",
+              {
+                class: _normalizeClass(_ctx.n("actions"))
+              },
+              [
+                _ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
+                  key: 0,
+                  class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("cancel-button"))),
+                  "var-dialog-cover": "",
+                  text: "",
+                  "text-color": _ctx.cancelButtonTextColor,
+                  color: _ctx.cancelButtonColor,
+                  onClick: _ctx.cancel
+                }, {
+                  default: _withCtx(() => {
+                    var _a;
+                    return [
+                      _createTextVNode(
+                        _toDisplayString((_a = _ctx.cancelButtonText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("dialogCancelButtonText")),
+                        1
+                        /* TEXT */
+                      )
+                    ];
+                  }),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true),
+                _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, {
+                  key: 1,
+                  class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("confirm-button"))),
+                  "var-dialog-cover": "",
+                  text: "",
+                  "text-color": _ctx.confirmButtonTextColor,
+                  color: _ctx.confirmButtonColor,
+                  onClick: _ctx.confirm
+                }, {
+                  default: _withCtx(() => {
+                    var _a;
+                    return [
+                      _createTextVNode(
+                        _toDisplayString((_a = _ctx.confirmButtonText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("dialogConfirmButtonText")),
+                        1
+                        /* TEXT */
+                      )
+                    ];
+                  }),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true)
+              ],
+              2
+              /* CLASS */
+            )
+          ])
         ],
         16
         /* FULL_PROPS */

package/es/index.bundle.mjs

@@ -265,7 +265,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.3.2'
+const version = '3.3.4'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -176,7 +176,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.3.2'
+const version = '3.3.4'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/option/Option.mjs

@@ -4,16 +4,17 @@ import Hover from "../hover/index.mjs";
 import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
 import { defineComponent, computed, ref, watch } from "vue";
 import { useSelect } from "./provide.mjs";
-import { createNamespace } from "../utils/components.mjs";
+import { createNamespace, MaybeVNode } from "../utils/components.mjs";
 import { props } from "./props.mjs";
-import { preventDefault } from "@varlet/shared";
+import { preventDefault, isFunction } from "@varlet/shared";
 import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("option");
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
 const _hoisted_1 = ["tabindex"];
 function __render__(_ctx, _cache) {
   const _component_var_checkbox = _resolveComponent("var-checkbox");
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   const _directive_ripple = _resolveDirective("ripple");
   const _directive_hover = _resolveDirective("hover");
@@ -57,9 +58,11 @@ function __render__(_ctx, _cache) {
         {
           class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
         },
-        _toDisplayString(_ctx.label),
-        3
-        /* TEXT, CLASS */
+        [
+          _createVNode(_component_maybe_v_node, { is: _ctx.labelVNode }, null, 8, ["is"])
+        ],
+        2
+        /* CLASS */
       )
     ]),
     _createVNode(_component_var_hover_overlay, {
@@ -76,7 +79,8 @@ const __sfc__ = defineComponent({
   directives: { Ripple, Hover },
   components: {
     VarCheckbox,
-    VarHoverOverlay
+    VarHoverOverlay,
+    MaybeVNode
   },
   props,
   setup(props2) {
@@ -84,13 +88,25 @@ const __sfc__ = defineComponent({
     const isFocusing = ref(false);
     const optionSelected = ref(false);
     const selected = computed(() => optionSelected.value);
-    const label = computed(() => props2.label);
+    const labelVNode = 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 = 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
@@ -141,6 +157,7 @@ const __sfc__ = defineComponent({
       focusColor,
       hovering,
       isFocusing,
+      labelVNode,
       n,
       classes,
       handleHovering,

package/es/option/props.mjs

@@ -1,7 +1,9 @@
 const props = {
   label: {},
   value: {},
-  disabled: Boolean
+  disabled: Boolean,
+  // internal
+  option: Object
 };
 export {
   props

package/es/ripple/style/index.mjs

@@ -1,2 +1,2 @@
-import '../ripple.css'
 import '../../styles/common.css'
+import '../ripple.css'

package/es/select/Select.mjs

@@ -1,12 +1,13 @@
 import VarIcon from "../icon/index.mjs";
 import VarMenu from "../menu/index.mjs";
 import VarChip from "../chip/index.mjs";
+import VarOption from "../option/index.mjs";
 import VarFieldDecorator from "../field-decorator/index.mjs";
 import VarFormDetails from "../form-details/index.mjs";
 import { computed, defineComponent, ref, watch, nextTick } from "vue";
-import { isArray, isEmpty, call, preventDefault, doubleRaf } from "@varlet/shared";
+import { isArray, isEmpty, call, preventDefault, doubleRaf, isFunction } from "@varlet/shared";
 import { props } from "./props.mjs";
-import { useValidation, createNamespace } from "../utils/components.mjs";
+import { useValidation, createNamespace, MaybeVNode } from "../utils/components.mjs";
 import { useOptions } from "./provide.mjs";
 import { useForm } from "../form/provide.mjs";
 import { focusChildElementByKey, toPxNum } from "../utils/elements.mjs";
@@ -14,14 +15,15 @@ import { error } from "../utils/logger.mjs";
 import { useSelectController } from "./useSelectController.mjs";
 import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("select");
-import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createSlots as _createSlots, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createSlots as _createSlots, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
 const _hoisted_1 = ["tabindex"];
-const _hoisted_2 = { key: 1 };
 function __render__(_ctx, _cache) {
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
   const _component_var_chip = _resolveComponent("var-chip");
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_field_decorator = _resolveComponent("var-field-decorator");
+  const _component_var_option = _resolveComponent("var-option");
   const _component_var_menu = _resolveComponent("var-menu");
   const _component_var_form_details = _resolveComponent("var-form-details");
   return _openBlock(), _createElementBlock("div", {
@@ -54,6 +56,21 @@ function __render__(_ctx, _cache) {
             class: _normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
           },
           [
+            _ctx.selectOptions.length ? (_openBlock(true), _createElementBlock(
+              _Fragment,
+              { key: 0 },
+              _renderList(_ctx.selectOptions, (option) => {
+                return _openBlock(), _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 */
+            )) : _createCommentVNode("v-if", true),
             _renderSlot(_ctx.$slots, "default")
           ],
           2
@@ -134,11 +151,7 @@ function __render__(_ctx, _cache) {
                                       onClose: () => _ctx.handleClose(l)
                                     }, {
                                       default: _withCtx(() => [
-                                        _createTextVNode(
-                                          _toDisplayString(l),
-                                          1
-                                          /* TEXT */
-                                        )
+                                        _createVNode(_component_maybe_v_node, { is: l }, null, 8, ["is"])
                                       ]),
                                       _: 2
                                       /* DYNAMIC */
@@ -156,20 +169,40 @@ function __render__(_ctx, _cache) {
                                 key: 1,
                                 class: _normalizeClass(_ctx.n("values"))
                               },
-                              _toDisplayString(_ctx.labels.join(_ctx.separator)),
-                              3
-                              /* TEXT, CLASS */
+                              [
+                                (_openBlock(true), _createElementBlock(
+                                  _Fragment,
+                                  null,
+                                  _renderList(_ctx.labels, (l, labelIndex) => {
+                                    return _openBlock(), _createElementBlock(
+                                      _Fragment,
+                                      { key: l },
+                                      [
+                                        _createVNode(_component_maybe_v_node, { is: l }, null, 8, ["is"]),
+                                        _createTextVNode(
+                                          _toDisplayString(labelIndex !== _ctx.labels.length - 1 ? _ctx.separator : ""),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ],
+                                      64
+                                      /* STABLE_FRAGMENT */
+                                    );
+                                  }),
+                                  128
+                                  /* KEYED_FRAGMENT */
+                                ))
+                              ],
+                              2
+                              /* CLASS */
                             ))
                           ],
                           64
                           /* STABLE_FRAGMENT */
-                        )) : (_openBlock(), _createElementBlock(
-                          "span",
-                          _hoisted_2,
-                          _toDisplayString(_ctx.label),
-                          1
-                          /* TEXT */
-                        ))
+                        )) : (_openBlock(), _createBlock(_component_maybe_v_node, {
+                          key: 1,
+                          is: _ctx.label
+                        }, null, 8, ["is"]))
                       ]) : _createCommentVNode("v-if", true)
                     ],
                     2
@@ -235,8 +268,10 @@ const __sfc__ = defineComponent({
     VarIcon,
     VarMenu,
     VarChip,
+    VarOption,
     VarFieldDecorator,
-    VarFormDetails
+    VarFormDetails,
+    MaybeVNode
   },
   props,
   setup(props2) {
@@ -247,6 +282,7 @@ const __sfc__ = defineComponent({
     const focusColor = computed(() => props2.focusColor);
     const isEmptyModelValue = computed(() => isEmpty(props2.modelValue));
     const cursor = computed(() => props2.disabled || props2.readonly ? "" : "pointer");
+    const selectOptions = computed(() => isArray(props2.options) ? props2.options : []);
     const offsetY = ref(0);
     const { bindForm, form } = useForm();
     const { length, options, bindOptions } = useOptions();
@@ -462,6 +498,8 @@ const __sfc__ = defineComponent({
       cursor,
       placeholderColor,
       enableCustomPlaceholder,
+      selectOptions,
+      isFunction,
       n,
       classes,
       handleFocus,

package/es/select/props.mjs

@@ -21,6 +21,15 @@ const props = __spreadValues({
     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],

package/es/select/style/index.mjs

@@ -5,5 +5,6 @@ import '../../menu/menu.css'
 import '../../field-decorator/fieldDecorator.css'
 import '../../form-details/formDetails.css'
 import '../../chip/chip.css'
+import '../../option/option.css'
 import '../select.css'
 import '../SelectSfc.css'

package/es/utils/components.mjs

@@ -50,7 +50,7 @@ import {
 } from "vue";
 import { createNamespaceFn, isArray, isPlainObject, isString } from "@varlet/shared";
 function pickProps(props, propsKey) {
-  return Array.isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
+  return isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
     pickedProps[key] = props[key];
     return pickedProps;
   }, {}) : props[propsKey];