@varlet/ui 3.3.3 → 3.3.5-alpha.1720530125141

package/README.md

@@ -3,7 +3,7 @@
     <img src="https://varlet.pages.dev/logo.svg" width="150">
   </a>
   <h1>VARLET</h1>
-  <p>A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.</p>
+  <p>A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.</p>
   <p>
     <a href="https://varlet.pages.dev/#/en-US/index">Documentation(Cloudflare)</a> |
     <a href="https://varlet-varletjs.vercel.app/#/en-US/index">Documentation(Vercel)</a> |
@@ -24,7 +24,7 @@
 
 ### Intro
 
-Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by `varletjs` community team.
+Varlet is a `Vue3` component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by `varletjs` organization.
 
 
 ### Features

package/README.zh-CN.md

@@ -4,7 +4,7 @@
     <img src="https://varlet.pages.dev/logo.svg" width="150">
   </a>
   <h1>VARLET</h1>
-  <p>一个移动端组件库，基于 Vue3, Material Design 2, Material Design 3，并支持桌面端开发。</p>
+  <p>一个 Vue3 组件库，基于 Material Design 2 和 3，支持移动端、桌面端。</p>
   <p>
     <a href="https://varlet.pages.dev">文档(Cloudflare)</a> | 
     <a href="https://varlet-varletjs.vercel.app">文档(Vercel)</a> | 
@@ -25,7 +25,7 @@
 
 ### 介绍
 
-Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由 `varletjs` 社区团队进行维护。
+Varlet 是一个 `Vue3` 组件库，基于 Material Design 2 和 3，支持移动端、桌面端，由 `varletjs` 组织维护。
 
 ### 特性
 
@@ -130,7 +130,7 @@ createApp(App).use(Varlet).mount('#app')
 
 ### 反馈和交流
 
-我们推荐使用`issue`列表进行最直接有效的反馈，也可以下面的方式
+我们推荐使用 [issue](https://github.com/varletjs/varlet/issues) 列表进行最直接有效的反馈，也可以下面的方式
 
 * 微信
 

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.3'
+const version = '3.3.5-alpha.1720530125141'
 
 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.3'
+const version = '3.3.5-alpha.1720530125141'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/input/Input.mjs

@@ -252,7 +252,7 @@ const __sfc__ = defineComponent({
       if (props2.type === "number") {
         value = formatNumber(value);
       }
-      const targetValue = withMaxlength(withTrim(value));
+      const targetValue = withMaxlength(value);
       if (targetValue === props2.modelValue) {
         target.value = targetValue;
       }
@@ -278,7 +278,10 @@ const __sfc__ = defineComponent({
       validateWithTrigger("onInput");
     }
     function handleChange(e) {
-      const value = updateValue(e);
+      const value = withTrim(updateValue(e));
+      if (props2.modelModifiers.trim) {
+        call(props2["onUpdate:modelValue"], value);
+      }
       call(props2.onChange, value, e);
       validateWithTrigger("onChange");
     }

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/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/snackbar/style/index.mjs

@@ -1,7 +1,7 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.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];