@varlet/ui 3.3.16 → 3.5.0-alpha.1726249557629

package/es/index.mjs

@@ -1,5 +1,6 @@
 import ActionSheet from './action-sheet/index.mjs'
 import AppBar from './app-bar/index.mjs'
+import AutoComplete from './auto-complete/index.mjs'
 import Avatar from './avatar/index.mjs'
 import AvatarGroup from './avatar-group/index.mjs'
 import BackTop from './back-top/index.mjs'
@@ -89,6 +90,7 @@ import Watermark from './watermark/index.mjs'
 
 export * from './action-sheet/index.mjs'
 export * from './app-bar/index.mjs'
+export * from './auto-complete/index.mjs'
 export * from './avatar/index.mjs'
 export * from './avatar-group/index.mjs'
 export * from './back-top/index.mjs'
@@ -176,11 +178,12 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.3.16'
+const version = '3.5.0-alpha.1726249557629'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
   AppBar.install && app.use(AppBar)
+  AutoComplete.install && app.use(AutoComplete)
   Avatar.install && app.use(Avatar)
   AvatarGroup.install && app.use(AvatarGroup)
   BackTop.install && app.use(BackTop)
@@ -274,6 +277,7 @@ export {
   install,
   ActionSheet,
   AppBar,
+  AutoComplete,
   Avatar,
   AvatarGroup,
   BackTop,
@@ -367,6 +371,7 @@ export default {
   install,
   ActionSheet,
   AppBar,
+  AutoComplete,
   Avatar,
   AvatarGroup,
   BackTop,

package/es/input/Input.mjs

@@ -7,11 +7,11 @@ import { useValidation, createNamespace } from "../utils/components.mjs";
 import { useForm } from "../form/provide.mjs";
 import { onSmartMounted, useClientId } from "@varlet/use";
 const { name, n, classes } = createNamespace("input");
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, withModifiers as _withModifiers, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
 const _hoisted_1 = ["placeholder", "enterkeyhint"];
-const _hoisted_2 = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
-const _hoisted_3 = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
+const _hoisted_2 = ["autocomplete", "id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
+const _hoisted_3 = ["autocomplete", "id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
 function __render__(_ctx, _cache) {
   const _component_var_field_decorator = _resolveComponent("var-field-decorator");
   const _component_var_form_details = _resolveComponent("var-form-details");
@@ -19,7 +19,7 @@ function __render__(_ctx, _cache) {
     "div",
     {
       class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
-      onMousedown: _cache[13] || (_cache[13] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
+      onMousedown: _cache[12] || (_cache[12] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
     },
     [
       _createVNode(
@@ -35,8 +35,8 @@ function __render__(_ctx, _cache) {
           textColor: _ctx.textColor,
           focusColor: _ctx.focusColor,
           blurColor: _ctx.blurColor,
-          isFocusing: _ctx.isFocusing,
-          errorMessage: _ctx.errorMessage,
+          isFocusing: _ctx.isForceFocusingEffect != null ? _ctx.isForceFocusingEffect : _ctx.isFocusing,
+          isError: _ctx.isForceErrorEffect != null ? _ctx.isForceErrorEffect : !!_ctx.errorMessage,
           formDisabled: _ctx.formDisabled,
           disabled: _ctx.disabled,
           clearable: _ctx.clearable,
@@ -76,7 +76,7 @@ function __render__(_ctx, _cache) {
                 )
               ),
               ref: "el",
-              autocomplete: "new-password",
+              autocomplete: _ctx.autocomplete ? _ctx.autocomplete : "new-password",
               id: _ctx.id,
               disabled: _ctx.formDisabled || _ctx.disabled,
               readonly: _ctx.formReadonly || _ctx.readonly,
@@ -110,7 +110,7 @@ function __render__(_ctx, _cache) {
                 )
               ),
               ref: "el",
-              autocomplete: "new-password",
+              autocomplete: _ctx.autocomplete ? _ctx.autocomplete : "new-password",
               id: _ctx.id,
               disabled: _ctx.formDisabled || _ctx.disabled,
               readonly: _ctx.formReadonly || _ctx.readonly,
@@ -147,11 +147,10 @@ function __render__(_ctx, _cache) {
         1040
         /* FULL_PROPS, DYNAMIC_SLOTS */
       ),
-      _createVNode(_component_var_form_details, {
+      _ctx.isShowFormDetails ? (_openBlock(), _createBlock(_component_var_form_details, {
+        key: 0,
         "error-message": _ctx.errorMessage,
-        "extra-message": _ctx.maxlengthText,
-        onMousedown: _cache[12] || (_cache[12] = _withModifiers(() => {
-        }, ["stop"]))
+        "extra-message": _ctx.maxlengthText
       }, _createSlots({
         _: 2
         /* DYNAMIC */
@@ -163,7 +162,7 @@ function __render__(_ctx, _cache) {
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["error-message", "extra-message"])
+      ]), 1032, ["error-message", "extra-message"])) : _createCommentVNode("v-if", true)
     ],
     34
     /* CLASS, NEED_HYDRATION */

package/es/input/props.mjs

@@ -1,4 +1,6 @@
 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;
@@ -14,9 +16,10 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { defineListenerProp, pickProps } from "../utils/components.mjs";
 import { fieldDecoratorProps } from "../field-decorator/index.mjs";
-const props = __spreadValues({
+const props = __spreadProps(__spreadValues({
   modelValue: String,
   modelModifiers: {
     type: Object,
@@ -39,7 +42,7 @@ const props = __spreadValues({
     type: Array,
     default: () => ["onInput", "onClear"]
   },
-  rules: Array,
+  rules: [Array, Function, Object],
   enterkeyhint: String,
   onFocus: defineListenerProp(),
   onBlur: defineListenerProp(),
@@ -59,7 +62,23 @@ const props = __spreadValues({
   "disabled",
   "clearable",
   "onClick"
-]));
+])), {
+  // internal start
+  autocomplete: String,
+  isForceFocusingEffect: {
+    type: Boolean,
+    default: void 0
+  },
+  isForceErrorEffect: {
+    type: Boolean,
+    default: void 0
+  },
+  isShowFormDetails: {
+    type: Boolean,
+    default: true
+  }
+  // internal end
+});
 export {
   props
 };

package/es/menu-option/MenuOption.mjs

@@ -51,10 +51,13 @@ function __render__(_ctx, _cache) {
       _createElementVNode(
         "div",
         {
-          class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
+          class: _normalizeClass(_ctx.classes(_ctx.n("text")))
         },
         [
-          _createVNode(_component_maybe_v_node, { is: _ctx.labelVNode }, null, 8, ["is"])
+          _createVNode(_component_maybe_v_node, {
+            class: _normalizeClass(_ctx.n("$--ellipsis")),
+            is: _ctx.labelVNode
+          }, null, 8, ["class", "is"])
         ],
         2
         /* CLASS */

package/es/menu-option/menuOption.css

@@ -1 +1 @@
-:root { --menu-option-normal-height: 38px; --menu-option-small-height: 30px; --menu-option-mini-height: 24px; --menu-option-large-height: 46px; --menu-option-padding: 0 12px; --menu-option-normal-font-size: var(--font-size-md); --menu-option-small-font-size: var(--font-size-sm); --menu-option-mini-font-size: var(--font-size-xs); --menu-option-large-font-size: var(--font-size-lg); --menu-option-selected-background: var(--color-primary); --menu-option-text-color: #555; --menu-option-disabled-color: var(--color-text-disabled);}.var-menu-option { position: relative; display: flex; align-items: center; padding: var(--menu-option-padding); cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--menu-option-text-color); outline: none;}.var-menu-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-menu-option__text { display: flex; align-items: center;}.var-menu-option--normal { height: var(--menu-option-normal-height); font-size: var(--menu-option-normal-font-size);}.var-menu-option--large { height: var(--menu-option-large-height); font-size: var(--menu-option-large-font-size);}.var-menu-option--small { height: var(--menu-option-small-height); font-size: var(--menu-option-small-font-size);}.var-menu-option--mini { height: var(--menu-option-mini-height); font-size: var(--menu-option-mini-font-size);}.var-menu-option--selected-background { background: var(--menu-option-selected-background);}.var-menu-option--selected-color { color: var(--menu-option-selected-background);}.var-menu-option--disabled { color: var(--menu-option-disabled-color); cursor: not-allowed;}
+:root { --menu-option-normal-height: 38px; --menu-option-small-height: 30px; --menu-option-mini-height: 24px; --menu-option-large-height: 46px; --menu-option-padding: 0 12px; --menu-option-normal-font-size: var(--font-size-md); --menu-option-small-font-size: var(--font-size-sm); --menu-option-mini-font-size: var(--font-size-xs); --menu-option-large-font-size: var(--font-size-lg); --menu-option-selected-background: var(--color-primary); --menu-option-text-color: #555; --menu-option-disabled-color: var(--color-text-disabled);}.var-menu-option { position: relative; display: flex; align-items: center; padding: var(--menu-option-padding); cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--menu-option-text-color); outline: none;}.var-menu-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-menu-option__text { display: flex; align-items: center; overflow-x: hidden;}.var-menu-option--normal { height: var(--menu-option-normal-height); font-size: var(--menu-option-normal-font-size);}.var-menu-option--large { height: var(--menu-option-large-height); font-size: var(--menu-option-large-font-size);}.var-menu-option--small { height: var(--menu-option-small-height); font-size: var(--menu-option-small-font-size);}.var-menu-option--mini { height: var(--menu-option-mini-height); font-size: var(--menu-option-mini-font-size);}.var-menu-option--selected-background { background: var(--menu-option-selected-background);}.var-menu-option--selected-color { color: var(--menu-option-selected-background);}.var-menu-option--disabled { color: var(--menu-option-disabled-color); cursor: not-allowed;}

package/es/menu-select/MenuSelect.mjs

@@ -5,7 +5,7 @@ import { props } from "./props.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { useMenuOptions } from "./provide.mjs";
 import { useSelectController } from "../select/useSelectController.mjs";
-import { call, isArray, preventDefault } from "@varlet/shared";
+import { call, preventDefault } from "@varlet/shared";
 import { useEventListener, useVModel } from "@varlet/use";
 import { focusChildElementByKey } from "../utils/elements.mjs";
 const { name, n, classes } = createNamespace("menu-select");
@@ -47,10 +47,10 @@ function __render__(_ctx, _cache) {
           class: _normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.formatElevation(_ctx.elevation, 3), [_ctx.scrollable, _ctx.n("--scrollable")]))
         },
         [
-          _ctx.menuSelectOptions.length ? (_openBlock(true), _createElementBlock(
+          _ctx.options.length ? (_openBlock(true), _createElementBlock(
             _Fragment,
             { key: 0 },
-            _renderList(_ctx.menuSelectOptions, (option) => {
+            _renderList(_ctx.options, (option) => {
               return _openBlock(), _createBlock(_component_var_menu_option, {
                 key: option[_ctx.valueKey],
                 label: option[_ctx.labelKey],
@@ -84,7 +84,6 @@ const __sfc__ = defineComponent({
     const menu = ref(null);
     const menuOptionsRef = ref(null);
     const show = useVModel(props2, "show");
-    const menuSelectOptions = computed(() => isArray(props2.options) ? props2.options : []);
     const { menuOptions, length, bindMenuOptions } = useMenuOptions();
     const { computeLabel, getSelectedValue } = useSelectController({
       modelValue: () => props2.modelValue,
@@ -119,6 +118,7 @@ const __sfc__ = defineComponent({
       if (key === "Escape") {
         menu.value.$el.focus();
         close();
+        call(props2.onKeyEscape);
         return;
       }
       if (key === "ArrowDown" || key === "ArrowUp") {
@@ -141,7 +141,6 @@ const __sfc__ = defineComponent({
       show,
       menu,
       menuOptionsRef,
-      menuSelectOptions,
       n,
       classes,
       formatElevation,

package/es/menu-select/props.mjs

@@ -1,4 +1,6 @@
 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;
@@ -14,14 +16,18 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { menuProps } from "../menu/index.mjs";
 import { defineListenerProp, pickProps } from "../utils/components.mjs";
-const props = __spreadValues({
+const props = __spreadProps(__spreadValues({
   modelValue: {
     type: [String, Number, Boolean, Array],
     default: void 0
   },
-  options: Array,
+  options: {
+    type: Array,
+    default: () => []
+  },
   labelKey: {
     type: String,
     default: "label"
@@ -61,7 +67,11 @@ const props = __spreadValues({
   "onClosed",
   "onClickOutside",
   "onUpdate:show"
-]));
+])), {
+  // internal start
+  onKeyEscape: defineListenerProp()
+  // internal end
+});
 export {
   props
 };

package/es/radio/props.mjs

@@ -25,7 +25,7 @@ const props = {
     type: Array,
     default: () => ["onChange"]
   },
-  rules: Array,
+  rules: [Array, Function, Object],
   onClick: defineListenerProp(),
   onChange: defineListenerProp(),
   "onUpdate:modelValue": defineListenerProp()

package/es/radio-group/RadioGroup.mjs

@@ -5,7 +5,7 @@ import { props } from "./props.mjs";
 import { useValidation, createNamespace, MaybeVNode } from "../utils/components.mjs";
 import { useRadios } from "./provide.mjs";
 import { useForm } from "../form/provide.mjs";
-import { call, preventDefault, isArray, isFunction } from "@varlet/shared";
+import { call, preventDefault, isFunction } from "@varlet/shared";
 import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("radio-group");
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
@@ -25,10 +25,10 @@ function __render__(_ctx, _cache) {
           class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n(`--${_ctx.direction}`)))
         },
         [
-          _ctx.radioGroupOptions.length ? (_openBlock(true), _createElementBlock(
+          _ctx.options.length ? (_openBlock(true), _createElementBlock(
             _Fragment,
             { key: 0 },
-            _renderList(_ctx.radioGroupOptions, (option) => {
+            _renderList(_ctx.options, (option) => {
               return _openBlock(), _createBlock(_component_var_radio, {
                 key: option[_ctx.valueKey],
                 "checked-value": option[_ctx.valueKey],
@@ -71,7 +71,6 @@ const __sfc__ = defineComponent({
       // expose
       resetValidation
     } = useValidation();
-    const radioGroupOptions = computed(() => isArray(props2.options) ? props2.options : []);
     const radioGroupErrorMessage = computed(() => errorMessage.value);
     const radioGroupProvider = {
       onToggle,
@@ -153,8 +152,7 @@ const __sfc__ = defineComponent({
       reset,
       validate,
       resetValidation,
-      isFunction,
-      radioGroupOptions
+      isFunction
     };
   }
 });

package/es/radio-group/props.mjs

@@ -8,7 +8,10 @@ const props = {
     type: String,
     default: "horizontal"
   },
-  options: Array,
+  options: {
+    type: Array,
+    default: () => []
+  },
   labelKey: {
     type: String,
     default: "label"
@@ -21,7 +24,7 @@ const props = {
     type: Array,
     default: () => ["onChange"]
   },
-  rules: Array,
+  rules: [Array, Function, Object],
   onChange: defineListenerProp(),
   "onUpdate:modelValue": defineListenerProp()
 };

package/es/select/Select.mjs

@@ -56,10 +56,10 @@ function __render__(_ctx, _cache) {
             class: _normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
           },
           [
-            _ctx.selectOptions.length ? (_openBlock(true), _createElementBlock(
+            _ctx.options.length ? (_openBlock(true), _createElementBlock(
               _Fragment,
               { key: 0 },
-              _renderList(_ctx.selectOptions, (option) => {
+              _renderList(_ctx.options, (option) => {
                 return _openBlock(), _createBlock(_component_var_option, {
                   key: option[_ctx.valueKey],
                   label: option[_ctx.labelKey],
@@ -91,7 +91,7 @@ function __render__(_ctx, _cache) {
             focusColor: _ctx.focusColor,
             blurColor: _ctx.blurColor,
             isFocusing: _ctx.isFocusing,
-            errorMessage: _ctx.errorMessage,
+            isError: !!_ctx.errorMessage,
             formDisabled: _ctx.formDisabled,
             disabled: _ctx.disabled,
             clearable: _ctx.clearable,
@@ -282,7 +282,6 @@ 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();
@@ -498,7 +497,6 @@ const __sfc__ = defineComponent({
       cursor,
       placeholderColor,
       enableCustomPlaceholder,
-      selectOptions,
       isFunction,
       n,
       classes,

package/es/select/props.mjs

@@ -21,7 +21,10 @@ const props = __spreadValues({
     type: [String, Number, Boolean, Array],
     default: void 0
   },
-  options: Array,
+  options: {
+    type: Array,
+    default: () => []
+  },
   labelKey: {
     type: String,
     default: "label"
@@ -49,7 +52,7 @@ const props = __spreadValues({
     type: Array,
     default: () => ["onChange", "onClear", "onClose"]
   },
-  rules: Array,
+  rules: [Array, Function, Object],
   onFocus: defineListenerProp(),
   onBlur: defineListenerProp(),
   onClose: defineListenerProp(),

package/es/slider/props.mjs

@@ -39,7 +39,7 @@ const props = {
     type: String,
     default: "horizontal"
   },
-  rules: Array,
+  rules: [Array, Function, Object],
   onChange: defineListenerProp(),
   onStart: defineListenerProp(),
   onEnd: defineListenerProp(),