@varlet/ui 2.18.0-alpha.1697608760113 → 2.18.1

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-outline-color: rgba(0, 0, 0, 0.12); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { padding: var(--card-close-button-padding); width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}
+:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-outline-color: rgba(0, 0, 0, 0.12); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}

package/es/chip/Chip.mjs

@@ -30,7 +30,7 @@ function __render__(_ctx, _cache) {
             /* CLASS */
           ),
           _renderSlot(_ctx.$slots, "right"),
-          _ctx.closable ? (_openBlock(), _createElementBlock(
+          _ctx.closeable || _ctx.closable ? (_openBlock(), _createElementBlock(
             "span",
             {
               key: 0,

package/es/chip/props.mjs

@@ -19,7 +19,9 @@ const props = {
     default: true
   },
   block: Boolean,
+  /** @deprecated Use closeable to instead. */
   closable: Boolean,
+  closeable: Boolean,
   onClose: defineListenerProp()
 };
 export {

package/es/counter/Counter.mjs

@@ -34,7 +34,7 @@ function __render__(_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),
         [
           _createVNode(_component_var_button, {

package/es/date-picker/DatePicker.mjs

@@ -33,8 +33,9 @@ import { createNamespace, call, formatElevation } from "../utils/components.mjs"
 import { padStart } from "../utils/shared.mjs";
 import { pack } from "../locale/index.mjs";
 const { name, n, classes } = createNamespace("date-picker");
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue";
+import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue";
 function __render__(_ctx, _cache) {
+  var _a;
   const _component_year_picker_panel = _resolveComponent("year-picker-panel");
   const _component_month_picker_panel = _resolveComponent("month-picker-panel");
   const _component_day_picker_panel = _resolveComponent("day-picker-panel");
@@ -48,23 +49,42 @@ function __render__(_ctx, _cache) {
         "div",
         {
           class: _normalizeClass(_ctx.n("title")),
-          style: _normalizeStyle({ background: _ctx.headerColor || _ctx.color })
+          style: _normalizeStyle({ background: _ctx.titleColor || _ctx.headerColor || _ctx.color })
         },
         [
           _createElementVNode(
             "div",
             {
-              class: _normalizeClass(_ctx.classes(_ctx.n("title-year"), [_ctx.isYearPanel, _ctx.n("title-year--active")])),
-              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
+              class: _normalizeClass(_ctx.n("title-select"))
             },
             [
-              _renderSlot(_ctx.$slots, "year", { year: _ctx.chooseYear }, () => [
-                _createTextVNode(
-                  _toDisplayString(_ctx.chooseYear),
-                  1
-                  /* TEXT */
-                )
-              ])
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("title-hint"))
+                },
+                _toDisplayString((_a = _ctx.hint) != null ? _a : _ctx.pack.datePickerHint),
+                3
+                /* TEXT, CLASS */
+              ),
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.classes(_ctx.n("title-year"), [_ctx.isYearPanel, _ctx.n("title-year--active")])),
+                  onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickEl("year"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "year", { year: _ctx.chooseYear }, () => [
+                    _createTextVNode(
+                      _toDisplayString(_ctx.chooseYear),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ],
+                2
+                /* CLASS */
+              )
             ],
             2
             /* CLASS */
@@ -80,10 +100,10 @@ function __render__(_ctx, _cache) {
                 name: _ctx.multiple ? "" : `${_ctx.n()}${_ctx.reverse ? "-reverse" : ""}-translatey`
               }, {
                 default: _withCtx(() => {
-                  var _a, _b, _c;
+                  var _a2, _b, _c;
                   return [
                     _ctx.type === "month" ? (_openBlock(), _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 ? _renderSlot(_ctx.$slots, "range", {
                         key: 0,
@@ -552,6 +572,7 @@ const __sfc__ = defineComponent({
       componentProps,
       slotProps,
       formatRange,
+      pack,
       n,
       classes,
       clickEl,

package/es/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --picker-header-padding: 4px 16px; --picker-header-color: #555; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --year-picker-item-color: #555; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--picker-header-color);}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--year-picker-item-color);}.var-date-picker .var-year-picker__item--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
+:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --picker-header-padding: 4px 16px; --picker-header-color: #555; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --year-picker-item-color: #555; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom);}.var-date-picker__title-hint { font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--picker-header-color);}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--year-picker-item-color);}.var-date-picker .var-year-picker__item--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}

package/es/date-picker/props.mjs

@@ -66,9 +66,12 @@ const props = {
     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

package/es/date-picker/src/year-picker-panel.mjs

@@ -1,5 +1,5 @@
 import dayjs from "dayjs/esm";
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, ref } from "vue";
 import { toNumber } from "@varlet/shared";
 import { createNamespace } from "../../utils/components.mjs";
 import { onSmartMounted } from "@varlet/use";
@@ -11,6 +11,7 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "ul",
     {
+      ref: "panel",
       class: _normalizeClass(_ctx.n())
     },
     [
@@ -46,6 +47,7 @@ const __sfc__ = defineComponent({
   },
   emits: ["choose-year"],
   setup(props, { emit }) {
+    const panel = ref();
     const yearList = computed(() => {
       const list = [];
       const {
@@ -80,7 +82,7 @@ const __sfc__ = defineComponent({
       emit("choose-year", year);
     };
     onSmartMounted(() => {
-      const activeEl = document.querySelector(`.${n("item--active")}`);
+      const activeEl = panel.value.querySelector(`.${n("item--active")}`);
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: "center"
       });
@@ -88,6 +90,7 @@ const __sfc__ = defineComponent({
     return {
       n,
       classes,
+      panel,
       yearList,
       chooseYear,
       toNumber

package/es/floating-panel/FloatingPanel.mjs

@@ -21,7 +21,9 @@ function __render__(_ctx, _cache) {
         style: _normalizeStyle({
           height: `${_ctx.toSizeUnit(_ctx.maxAnchor)}`,
           transform: `translateY(calc(100% - ${_ctx.toSizeUnit(_ctx.visibleHeight)}))`,
-          transition: _ctx.touching ? "none" : `transform ${_ctx.toNumber(_ctx.duration)}ms var(--floating-panel-transition-timing-function)`
+          transition: _ctx.touching ? "none" : `transform ${_ctx.toNumber(
+            _ctx.duration
+          )}ms var(--floating-panel-transition-timing-function), background-color 0.25s`
         }),
         onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
         onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
@@ -107,7 +109,10 @@ const __sfc__ = 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;

package/es/floating-panel/floatingPanel.css

@@ -1 +1 @@
-:root { --floating-panel-z-index: 999; --floating-panel-border-top: none; --floating-panel-border-radius: 0; --floating-panel-background: #fff; --floating-panel-header-height: 40px; --floating-panel-toolbar-width: 20px; --floating-panel-toolbar-height: 3px; --floating-panel-toolbar-border-radius: 10px; --floating-panel-toolbar-background: #ddd; --floating-panel-transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);}.var-floating-panel { position: fixed; left: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; z-index: var(--floating-panel-z-index); border-top: var(--floating-panel-border-top); border-top-left-radius: var(--floating-panel-border-radius); border-top-right-radius: var(--floating-panel-border-radius); border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: var(--floating-panel-background); will-change: transform; touch-action: none;}.var-floating-panel::after { content: ''; display: block; position: absolute; bottom: -100vh; height: 100vh; width: 100%; background-color: inherit; box-shadow: 0 -1px var(--floating-panel-background);}.var-floating-panel__header { height: var(--floating-panel-header-height); display: flex; justify-content: center; align-items: center; cursor: grab; user-select: none;}.var-floating-panel__header-toolbar { width: var(--floating-panel-toolbar-width); height: var(--floating-panel-toolbar-height); border-radius: var(--floating-panel-toolbar-border-radius); background: var(--floating-panel-toolbar-background);}.var-floating-panel__content { flex: 1; overflow-y: auto;}.var-floating-panel--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}
+:root { --floating-panel-z-index: 999; --floating-panel-border-top: none; --floating-panel-border-radius: 0; --floating-panel-background: #fff; --floating-panel-header-height: 30px; --floating-panel-toolbar-width: 20px; --floating-panel-toolbar-height: 3px; --floating-panel-toolbar-border-radius: 10px; --floating-panel-toolbar-background: #ddd; --floating-panel-transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);}.var-floating-panel { position: fixed; left: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; z-index: var(--floating-panel-z-index); border-top: var(--floating-panel-border-top); border-top-left-radius: var(--floating-panel-border-radius); border-top-right-radius: var(--floating-panel-border-radius); border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: var(--floating-panel-background); will-change: transform; touch-action: none;}.var-floating-panel::after { content: ''; display: block; position: absolute; bottom: -100vh; height: 100vh; width: 100%; background-color: inherit; box-shadow: 0 -1px var(--floating-panel-background);}.var-floating-panel__header { height: var(--floating-panel-header-height); display: flex; justify-content: center; align-items: center; cursor: grab; user-select: none;}.var-floating-panel__header-toolbar { width: var(--floating-panel-toolbar-width); height: var(--floating-panel-toolbar-height); border-radius: var(--floating-panel-toolbar-border-radius); background: var(--floating-panel-toolbar-background);}.var-floating-panel__content { flex: 1; overflow-y: auto;}.var-floating-panel--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}

package/es/index.bundle.mjs

@@ -259,7 +259,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.18.0-alpha.1697608760113'
+const version = '2.18.1'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -172,7 +172,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.18.0-alpha.1697608760113'
+const version = '2.18.1'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/locale/en-US.mjs

@@ -95,10 +95,13 @@ var stdin_default = {
     }
   },
   datePickerSelected: " selected",
+  datePickerHint: "SELECT DATE",
   // pagination
   paginationItem: "",
   paginationPage: "page",
-  paginationJump: "Go to"
+  paginationJump: "Go to",
+  // time-picker
+  timePickerHint: "SELECT TIME"
 };
 export {
   stdin_default as default

package/es/locale/zh-CN.mjs

@@ -95,10 +95,13 @@ var stdin_default = {
     }
   },
   datePickerSelected: "\u4E2A\u88AB\u9009\u62E9",
+  datePickerHint: "\u9009\u62E9\u65E5\u671F",
   // pagination
   paginationItem: "\u6761",
   paginationPage: "\u9875",
-  paginationJump: "\u524D\u5F80"
+  paginationJump: "\u524D\u5F80",
+  // time-picker
+  timePickerHint: "\u9009\u62E9\u65F6\u95F4"
 };
 export {
   stdin_default as default

package/es/rate/Rate.mjs

@@ -84,7 +84,7 @@ const __sfc__ = 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,
@@ -126,10 +126,10 @@ const __sfc__ = defineComponent({
       if (disabled || (form == null ? void 0 : form.disabled.value)) {
         iconColor = disabledColor;
       }
-      if (index <= toNumber(modelValue)) {
+      if (index <= modelValue) {
         return { color: iconColor, name: icon, namespace };
       }
-      if (half && index <= toNumber(modelValue) + 0.5) {
+      if (half && index <= modelValue + 0.5) {
         return { color: iconColor, name: halfIcon, namespace: halfIconNamespace };
       }
       return {
@@ -147,22 +147,24 @@ const __sfc__ = 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 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) {

package/es/rate/props.mjs

@@ -2,7 +2,7 @@ import { defineListenerProp, pickProps } from "../utils/components.mjs";
 import { iconProps } from "../icon/index.mjs";
 const props = {
   modelValue: {
-    type: [String, Number],
+    type: Number,
     default: 0
   },
   count: {

package/es/select/Select.mjs

@@ -119,7 +119,7 @@ function __render__(_ctx, _cache) {
                                       return _openBlock(), _createBlock(_component_var_chip, {
                                         class: _normalizeClass(_ctx.n("chip")),
                                         "var-select-cover": "",
-                                        closable: "",
+                                        closeable: "",
                                         size: "small",
                                         type: _ctx.errorMessage ? "danger" : void 0,
                                         key: l,