@varlet/ui 2.18.0 → 2.18.1

package/lib/varlet.cjs.js

@@ -1542,10 +1542,13 @@ var stdin_default$3q = {
     }
   },
   datePickerSelected: "个被选择",
+  datePickerHint: "选择日期",
   // pagination
   paginationItem: "条",
   paginationPage: "页",
-  paginationJump: "前往"
+  paginationJump: "前往",
+  // time-picker
+  timePickerHint: "选择时间"
 };
 var stdin_default$3p = {
   // Dialog
@@ -1644,10 +1647,13 @@ var stdin_default$3p = {
     }
   },
   datePickerSelected: " selected",
+  datePickerHint: "SELECT DATE",
   // pagination
   paginationItem: "",
   paginationPage: "page",
-  paginationJump: "Go to"
+  paginationJump: "Go to",
+  // time-picker
+  timePickerHint: "SELECT TIME"
 };
 var stdin_default$3o = {
   // Dialog
@@ -5038,7 +5044,9 @@ const props$W = {
     default: true
   },
   block: Boolean,
+  /** @deprecated Use closeable to instead. */
   closable: Boolean,
+  closeable: Boolean,
   onClose: defineListenerProp()
 };
 const { name: name$W, n: n$11, classes: classes$S } = createNamespace("chip");
@@ -5068,7 +5076,7 @@ function __render__$11(_ctx, _cache) {
             /* CLASS */
           ),
           vue.renderSlot(_ctx.$slots, "right"),
-          _ctx.closable ? (vue.openBlock(), vue.createElementBlock(
+          _ctx.closeable || _ctx.closable ? (vue.openBlock(), vue.createElementBlock(
             "span",
             {
               key: 0,
@@ -8228,7 +8236,7 @@ function __render__$Y(_ctx, _cache) {
             [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")],
             [_ctx.errorMessage, _ctx.n("--error")]
           ),
-          style: { background: _ctx.color ? _ctx.color : void 0 }
+          style: { background: _ctx.color }
         }, _ctx.$attrs),
         [
           vue.createVNode(_component_var_button, {
@@ -9016,9 +9024,12 @@ const props$Q = {
     type: String,
     default: "date"
   },
+  hint: String,
   allowedDates: Function,
   color: String,
+  /** @deprecated Use titleColor to instead. */
   headerColor: String,
+  titleColor: String,
   elevation: {
     type: [Boolean, Number, String],
     default: false
@@ -9447,6 +9458,7 @@ function __render__$V(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "ul",
     {
+      ref: "panel",
       class: vue.normalizeClass(_ctx.n())
     },
     [
@@ -9482,6 +9494,7 @@ const __sfc__$W = vue.defineComponent({
   },
   emits: ["choose-year"],
   setup(props2, { emit }) {
+    const panel = vue.ref();
     const yearList = vue.computed(() => {
       const list2 = [];
       const {
@@ -9516,7 +9529,7 @@ const __sfc__$W = vue.defineComponent({
       emit("choose-year", year);
     };
     onSmartMounted(() => {
-      const activeEl = document.querySelector(`.${n$V("item--active")}`);
+      const activeEl = panel.value.querySelector(`.${n$V("item--active")}`);
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: "center"
       });
@@ -9524,6 +9537,7 @@ const __sfc__$W = vue.defineComponent({
     return {
       n: n$V,
       classes: classes$N,
+      panel,
       yearList,
       chooseYear,
       toNumber
@@ -9903,6 +9917,7 @@ var __async$c = (__this, __arguments, generator) => {
 };
 const { name: name$Q, n: n$T, classes: classes$L } = createNamespace("date-picker");
 function __render__$T(_ctx, _cache) {
+  var _a;
   const _component_year_picker_panel = vue.resolveComponent("year-picker-panel");
   const _component_month_picker_panel = vue.resolveComponent("month-picker-panel");
   const _component_day_picker_panel = vue.resolveComponent("day-picker-panel");
@@ -9916,23 +9931,42 @@ function __render__$T(_ctx, _cache) {
         "div",
         {
           class: vue.normalizeClass(_ctx.n("title")),
-          style: vue.normalizeStyle({ background: _ctx.headerColor || _ctx.color })
+          style: vue.normalizeStyle({ background: _ctx.titleColor || _ctx.headerColor || _ctx.color })
         },
         [
           vue.createElementVNode(
             "div",
             {
-              class: vue.normalizeClass(_ctx.classes(_ctx.n("title-year"), [_ctx.isYearPanel, _ctx.n("title-year--active")])),
-              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
+              class: vue.normalizeClass(_ctx.n("title-select"))
             },
             [
-              vue.renderSlot(_ctx.$slots, "year", { year: _ctx.chooseYear }, () => [
-                vue.createTextVNode(
-                  vue.toDisplayString(_ctx.chooseYear),
-                  1
-                  /* TEXT */
-                )
-              ])
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(_ctx.n("title-hint"))
+                },
+                vue.toDisplayString((_a = _ctx.hint) != null ? _a : _ctx.pack.datePickerHint),
+                3
+                /* TEXT, CLASS */
+              ),
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(_ctx.classes(_ctx.n("title-year"), [_ctx.isYearPanel, _ctx.n("title-year--active")])),
+                  onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
+                },
+                [
+                  vue.renderSlot(_ctx.$slots, "year", { year: _ctx.chooseYear }, () => [
+                    vue.createTextVNode(
+                      vue.toDisplayString(_ctx.chooseYear),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ],
+                2
+                /* CLASS */
+              )
             ],
             2
             /* CLASS */
@@ -9948,10 +9982,10 @@ function __render__$T(_ctx, _cache) {
                 name: _ctx.multiple ? "" : `${_ctx.n()}${_ctx.reverse ? "-reverse" : ""}-translatey`
               }, {
                 default: vue.withCtx(() => {
-                  var _a, _b, _c;
+                  var _a2, _b, _c;
                   return [
                     _ctx.type === "month" ? (vue.openBlock(), vue.createElementBlock("div", {
-                      key: `${_ctx.chooseYear}${(_a = _ctx.chooseMonth) == null ? void 0 : _a.index}`
+                      key: `${_ctx.chooseYear}${(_a2 = _ctx.chooseMonth) == null ? void 0 : _a2.index}`
                     }, [
                       _ctx.range ? vue.renderSlot(_ctx.$slots, "range", {
                         key: 0,
@@ -10420,6 +10454,7 @@ const __sfc__$U = vue.defineComponent({
       componentProps,
       slotProps,
       formatRange,
+      pack,
       n: n$T,
       classes: classes$L,
       clickEl,
@@ -13651,7 +13686,10 @@ const __sfc__$N = vue.defineComponent({
       const target = event.target;
       const eventFromContent = contentRef.value === target || ((_a = contentRef.value) == null ? void 0 : _a.contains(target));
       if (eventFromContent && !props2.contentDraggable) {
-        if (isReachTop(contentRef.value) || isReachBottom(contentRef.value)) {
+        return;
+      }
+      if (eventFromContent && props2.contentDraggable && visibleHeight.value >= maxAnchor.value && !isReachTop(contentRef.value)) {
+        if (isReachBottom(contentRef.value)) {
           preventDefault(event);
         }
         return;
@@ -19146,7 +19184,7 @@ const _RadioGroupComponent = stdin_default$1t;
 var stdin_default$1s = stdin_default$1t;
 const props$j = {
   modelValue: {
-    type: [String, Number],
+    type: Number,
     default: 0
   },
   count: {
@@ -19258,7 +19296,7 @@ const __sfc__$q = vue.defineComponent({
     const { form, bindForm } = useForm();
     const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
     const { hovering } = useHoverOverlay();
-    let lastScore = Number(props2.modelValue);
+    let lastScore = toNumber(props2.modelValue);
     const rateProvider = {
       reset,
       validate,
@@ -19300,10 +19338,10 @@ const __sfc__$q = vue.defineComponent({
       if (disabled || (form == null ? void 0 : form.disabled.value)) {
         iconColor = disabledColor;
       }
-      if (index <= toNumber(modelValue)) {
+      if (index <= modelValue) {
         return { color: iconColor, name: icon2, namespace };
       }
-      if (half2 && index <= toNumber(modelValue) + 0.5) {
+      if (half2 && index <= modelValue + 0.5) {
         return { color: iconColor, name: halfIcon, namespace: halfIconNamespace };
       }
       return {
@@ -19321,22 +19359,24 @@ const __sfc__$q = vue.defineComponent({
       if (lastScore === score && clearable) {
         score = 0;
       }
+      if (lastScore !== score) {
+        call(props2["onUpdate:modelValue"], score);
+        call(props2.onChange, score);
+      }
       lastScore = score;
-      call(props2["onUpdate:modelValue"], score);
     }
     function validate() {
-      return v(props2.rules, toNumber(props2.modelValue));
+      return v(props2.rules, props2.modelValue);
     }
     function validateWithTrigger() {
       return vue.nextTick(() => vt(["onChange"], "onChange", props2.rules, props2.modelValue));
     }
     function handleClick(score, event) {
-      const { readonly, disabled, onChange } = props2;
+      const { readonly, disabled } = props2;
       if (readonly || disabled || (form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value)) {
         return;
       }
       changeValue(score, event);
-      call(onChange, score);
       validateWithTrigger();
     }
     function createHoverHandler(value) {
@@ -19940,7 +19980,7 @@ function __render__$g(_ctx, _cache) {
                                       return vue.openBlock(), vue.createBlock(_component_var_chip, {
                                         class: vue.normalizeClass(_ctx.n("chip")),
                                         "var-select-cover": "",
-                                        closable: "",
+                                        closeable: "",
                                         size: "small",
                                         type: _ctx.errorMessage ? "danger" : void 0,
                                         key: l,
@@ -22873,8 +22913,11 @@ const props$2 = {
     type: [Boolean, Number, String],
     default: false
   },
+  hint: String,
   color: String,
+  /** @deprecated Use titleColor to instead. */
   headerColor: String,
+  titleColor: String,
   format: {
     type: String,
     default: "ampm"
@@ -23289,6 +23332,7 @@ const _hoisted_1$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.crea
 ));
 const _hoisted_2$2 = { key: 0 };
 function __render__$2(_ctx, _cache) {
+  var _a;
   const _component_clock = vue.resolveComponent("clock");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -23301,83 +23345,102 @@ function __render__$2(_ctx, _cache) {
         "div",
         {
           class: vue.normalizeClass(_ctx.n("title")),
-          style: vue.normalizeStyle({ background: _ctx.headerColor || _ctx.color })
+          style: vue.normalizeStyle({ background: _ctx.titleColor || _ctx.headerColor || _ctx.color })
         },
         [
           vue.createElementVNode(
             "div",
             {
-              class: vue.normalizeClass(_ctx.n("title-time"))
+              class: vue.normalizeClass(_ctx.n("title-hint"))
             },
-            [
-              vue.createElementVNode(
-                "div",
-                {
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "hour", _ctx.n("title-btn--active")])),
-                  onClick: _cache[0] || (_cache[0] = ($event) => _ctx.checkPanel("hour"))
-                },
-                vue.toDisplayString(_ctx.time.hour),
-                3
-                /* TEXT, CLASS */
-              ),
-              _hoisted_1$2,
-              vue.createElementVNode(
-                "div",
-                {
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "minute", _ctx.n("title-btn--active")])),
-                  onClick: _cache[1] || (_cache[1] = ($event) => _ctx.checkPanel("minute"))
-                },
-                vue.toDisplayString(_ctx.time.minute),
-                3
-                /* TEXT, CLASS */
-              ),
-              _ctx.useSeconds ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, ":")) : vue.createCommentVNode("v-if", true),
-              _ctx.useSeconds ? (vue.openBlock(), vue.createElementBlock(
-                "div",
-                {
-                  key: 1,
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "second", _ctx.n("title-btn--active")])),
-                  onClick: _cache[2] || (_cache[2] = ($event) => _ctx.checkPanel("second"))
-                },
-                vue.toDisplayString(_ctx.time.second),
-                3
-                /* TEXT, CLASS */
-              )) : vue.createCommentVNode("v-if", true)
-            ],
-            2
-            /* CLASS */
+            vue.toDisplayString((_a = _ctx.hint) != null ? _a : _ctx.pack.timePickerHint),
+            3
+            /* TEXT, CLASS */
           ),
-          _ctx.format === "ampm" ? (vue.openBlock(), vue.createElementBlock(
+          vue.createElementVNode(
             "div",
             {
-              key: 0,
-              class: vue.normalizeClass(_ctx.n("title-ampm"))
+              class: vue.normalizeClass(_ctx.n("title-time-container"))
             },
             [
               vue.createElementVNode(
                 "div",
                 {
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.ampm === "am", _ctx.n("title-btn--active")])),
-                  onClick: _cache[3] || (_cache[3] = ($event) => _ctx.checkAmpm("am"))
+                  class: vue.normalizeClass(_ctx.n("title-time"))
                 },
-                "AM",
+                [
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "hour", _ctx.n("title-btn--active")])),
+                      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.checkPanel("hour"))
+                    },
+                    vue.toDisplayString(_ctx.time.hour),
+                    3
+                    /* TEXT, CLASS */
+                  ),
+                  _hoisted_1$2,
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "minute", _ctx.n("title-btn--active")])),
+                      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.checkPanel("minute"))
+                    },
+                    vue.toDisplayString(_ctx.time.minute),
+                    3
+                    /* TEXT, CLASS */
+                  ),
+                  _ctx.useSeconds ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, ":")) : vue.createCommentVNode("v-if", true),
+                  _ctx.useSeconds ? (vue.openBlock(), vue.createElementBlock(
+                    "div",
+                    {
+                      key: 1,
+                      class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.type === "second", _ctx.n("title-btn--active")])),
+                      onClick: _cache[2] || (_cache[2] = ($event) => _ctx.checkPanel("second"))
+                    },
+                    vue.toDisplayString(_ctx.time.second),
+                    3
+                    /* TEXT, CLASS */
+                  )) : vue.createCommentVNode("v-if", true)
+                ],
                 2
                 /* CLASS */
               ),
-              vue.createElementVNode(
+              _ctx.format === "ampm" ? (vue.openBlock(), vue.createElementBlock(
                 "div",
                 {
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.ampm === "pm", _ctx.n("title-btn--active")])),
-                  onClick: _cache[4] || (_cache[4] = ($event) => _ctx.checkAmpm("pm"))
+                  key: 0,
+                  class: vue.normalizeClass(_ctx.n("title-ampm"))
                 },
-                "PM",
+                [
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.ampm === "am", _ctx.n("title-btn--active")])),
+                      onClick: _cache[3] || (_cache[3] = ($event) => _ctx.checkAmpm("am"))
+                    },
+                    " AM ",
+                    2
+                    /* CLASS */
+                  ),
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: vue.normalizeClass(_ctx.classes(_ctx.n("title-btn"), [_ctx.ampm === "pm", _ctx.n("title-btn--active")])),
+                      onClick: _cache[4] || (_cache[4] = ($event) => _ctx.checkAmpm("pm"))
+                    },
+                    " PM ",
+                    2
+                    /* CLASS */
+                  )
+                ],
                 2
                 /* CLASS */
-              )
+              )) : vue.createCommentVNode("v-if", true)
             ],
             2
             /* CLASS */
-          )) : vue.createCommentVNode("v-if", true)
+          )
         ],
         6
         /* CLASS, STYLE */
@@ -23670,6 +23733,7 @@ const __sfc__$2 = vue.defineComponent({
       isPreventNextUpdate,
       n: n$2,
       classes: classes$2,
+      pack,
       moveHand,
       checkPanel,
       checkAmpm,
@@ -24640,7 +24704,7 @@ const uploader = "";
 const UploaderSfc = "";
 const watermark = "";
 const WatermarkSfc = "";
-const version = "2.18.0";
+const version = "2.18.1";
 function install(app) {
   stdin_default$3k.install && app.use(stdin_default$3k);
   stdin_default$3i.install && app.use(stdin_default$3i);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.18.0",
+  "version": "2.18.1",
   "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/use": "2.18.0",
-    "@varlet/icons": "2.18.0",
-    "@varlet/shared": "2.18.0"
+    "@varlet/icons": "2.18.1",
+    "@varlet/use": "2.18.1",
+    "@varlet/shared": "2.18.1"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.3.4",
@@ -66,9 +66,9 @@
     "typescript": "^5.1.5",
     "vue": "3.3.4",
     "vue-router": "4.2.0",
-    "@varlet/cli": "2.18.0",
-    "@varlet/ui": "2.18.0",
-    "@varlet/touch-emulator": "2.18.0"
+    "@varlet/touch-emulator": "2.18.1",
+    "@varlet/cli": "2.18.1",
+    "@varlet/ui": "2.18.1"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/backTop.d.ts

@@ -10,7 +10,7 @@ export interface BackTopProps extends BasicAttributes {
   right?: number | string
   elevation?: boolean | number | string
   bottom?: number | string
-  onClick?: ListenerProp<(e: MouseEvent) => void>
+  onClick?: ListenerProp<(e: Event) => void>
 }
 
 export class BackTop extends VarComponent {

package/types/chip.d.ts

@@ -15,7 +15,9 @@ export interface ChipProps extends BasicAttributes {
   plain?: boolean
   round?: boolean
   block?: boolean
+  /** @deprecated Use closeable to instead. */
   closable?: boolean
+  closeable?: boolean
   onClose?: ListenerProp<(e: Event) => void>
 }
 

package/types/datePicker.d.ts

@@ -10,7 +10,10 @@ export interface DatePickerProps extends BasicAttributes {
   type?: DatePickerType
   allowedDates?: (val: string) => boolean
   color?: string
-  headerColor?: string
+  hint?: string
+  /** @deprecated Use titleColor to instead. */
+  headerColor: string
+  titleColor: string
   elevation?: boolean | string | number
   buttonElevation?: boolean | string | number
   firstDayOfWeek?: string | number

package/types/rate.d.ts

@@ -3,7 +3,7 @@ import { VarComponent, BasicAttributes, ListenerProp } from './varComponent'
 export declare const rateProps: Record<string, any>
 
 export interface RateProps extends BasicAttributes {
-  modelValue?: string | number
+  modelValue?: number
   count?: string | number
   color?: string
   emptyColor?: string
@@ -22,8 +22,8 @@ export interface RateProps extends BasicAttributes {
   clearable?: boolean
   ripple?: boolean
   rules?: Array<(value: any) => any>
-  onChange?: ListenerProp<(value: string | number) => void>
-  'onUpdate:modelValue'?: ListenerProp<(value: string | number) => void>
+  onChange?: ListenerProp<(value: number) => void>
+  'onUpdate:modelValue'?: ListenerProp<(value: number) => void>
 }
 
 export class Rate extends VarComponent {

package/types/switch.d.ts

@@ -15,7 +15,7 @@ export interface SwitchProps extends BasicAttributes {
   closeColor?: string
   size?: string | number
   rules?: Array<(value: any) => any>
-  onClick?: ListenerProp<(event: MouseEvent) => void>
+  onClick?: ListenerProp<(event: Event) => void>
   onChange?: ListenerProp<(value: boolean) => void>
   'onUpdate:modelValue'?: ListenerProp<(value: boolean) => void>
 }

package/types/timePicker.d.ts

@@ -14,7 +14,10 @@ export interface TimePickerProps extends BasicAttributes {
   modelValue?: string
   elevation?: boolean | string | number
   color?: string
+  hint?: string
+  /** @deprecated Use titleColor to instead. */
   headerColor?: string
+  titleColor?: string
   allowedTime?: AllowedTime
   format?: TimePickerFormat
   min?: string