@varlet/ui 2.11.3 → 2.11.5

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.11.3'
+const version = '2.11.5'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.11.3'
+const version = '2.11.5'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/pagination/Pagination.mjs

@@ -91,10 +91,10 @@ function __render__(_ctx, _cache) {
     key: 2,
     class: _normalizeClass(_ctx.classes(_ctx.n('size'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, [_createVNode(_component_var_menu, {
+    placement: "cover-top",
     disabled: _ctx.disabled,
     show: _ctx.menuVisible,
-    "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event),
-    "offset-x": -4
+    "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event)
   }, {
     menu: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sizeOption, (option, index) => {
       return _withDirectives((_openBlock(), _createBlock(_component_var_cell, {
@@ -139,7 +139,7 @@ function __render__(_ctx, _cache) {
   /* CLASS */
   )) : _createCommentVNode("v-if", true), _ctx.showQuickJumper && !_ctx.simple ? (_openBlock(), _createElementBlock("li", {
     key: 3,
-    class: _normalizeClass(_ctx.classes(_ctx.n('quickly'), [_ctx.disabled, 'item--disabled']))
+    class: _normalizeClass(_ctx.classes(_ctx.n('quickly'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, [_createTextVNode(_toDisplayString(_ctx.pack.paginationJump) + " ", 1
   /* TEXT */
   ), _createVNode(_component_var_input, {
@@ -155,7 +155,7 @@ function __render__(_ctx, _cache) {
   /* CLASS */
   )) : _createCommentVNode("v-if", true), _ctx.totalText ? (_openBlock(), _createElementBlock("li", {
     key: 4,
-    class: _normalizeClass(_ctx.n('total'))
+    class: _normalizeClass(_ctx.classes(_ctx.n('total'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, _toDisplayString(_ctx.totalText), 3
   /* TEXT, CLASS */
   )) : _createCommentVNode("v-if", true)], 2

package/es/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent;}.var-pagination__item--disabled { cursor: default; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: default;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-field-decorator__middle,.var-pagination__simple [var-pagination-cover] .var-field-decorator__middle { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}
+:root { --pagination-text-color: #555; --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: rgba(85, 85, 85, 0.15); --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-item-simple-border-radius: 50%; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0; color: var(--pagination-text-color);}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent; border-radius: var(--pagination-item-simple-border-radius);}.var-pagination__item--disabled { cursor: not-allowed; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: inherit;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-list-active-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-field-decorator__middle,.var-pagination__simple [var-pagination-cover] .var-field-decorator__middle { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}

package/es/rate/Rate.mjs

@@ -100,6 +100,7 @@ var __sfc__ = defineComponent({
       hovering
     } = useHoverOverlay();
     var currentHoveringValue = ref(-1);
+    var lastScore = Number(props.modelValue);
 
     var getStyle = val => {
       var {
@@ -161,13 +162,23 @@ var __sfc__ = defineComponent({
     };
 
     var changeValue = (score, event) => {
-      if (props.half) {
+      var {
+        half,
+        clearable
+      } = props;
+
+      if (half) {
         var {
           offsetWidth
         } = event.target;
         if (event.offsetX <= Math.floor(offsetWidth / 2)) score -= 0.5;
-      }
+      } // set score to 0 when last score is equal to current score
+      // and the value of clearable is true
+
+
+      if (lastScore === score && clearable) score = 0; // update last score
 
+      lastScore = score;
       call(props['onUpdate:modelValue'], score);
     };
 

package/es/rate/props.mjs

@@ -54,6 +54,10 @@ export var props = {
     type: Boolean,
     default: true
   },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
   rules: {
     type: Array
   },

package/es/step/Step.mjs

@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { props } from './props.mjs';
 import { useSteps } from './provide.mjs';
 import VarIcon from '../icon/index.mjs';
@@ -7,7 +7,7 @@ var {
   n,
   classes
 } = createNamespace('step');
-import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -22,9 +22,6 @@ function __render__(_ctx, _cache) {
     class: _normalizeClass(_ctx.n())
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n(_ctx.direction))
-  }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.n(_ctx.direction + "-main")),
-    ref: _ctx.getRef
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(_ctx.direction + "-tag"), [_ctx.isActive || _ctx.isCurrent, _ctx.n(_ctx.direction + "-tag--active")])),
     style: _normalizeStyle({
@@ -65,17 +62,11 @@ function __render__(_ctx, _cache) {
     })
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
-  )], 2
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n(_ctx.direction + "-line"))
+  }, null, 2
   /* CLASS */
-  ), !_ctx.isLastChild ? (_openBlock(), _createElementBlock("div", {
-    key: 0,
-    class: _normalizeClass(_ctx.n(_ctx.direction + "-line")),
-    style: _normalizeStyle({
-      margin: _ctx.lineMargin
-    })
-  }, null, 6
-  /* CLASS, STYLE */
-  )) : _createCommentVNode("v-if", true)], 2
+  )], 2
   /* CLASS */
   )], 2
   /* CLASS */
@@ -90,9 +81,6 @@ var __sfc__ = defineComponent({
   props,
 
   setup() {
-    var main = ref(null);
-    var lineMargin = ref('');
-    var isLastChild = ref(false);
     var {
       index,
       steps,
@@ -100,7 +88,6 @@ var __sfc__ = defineComponent({
     } = useSteps();
     var {
       active,
-      length,
       activeColor,
       inactiveColor,
       direction,
@@ -114,35 +101,17 @@ var __sfc__ = defineComponent({
 
     var click = () => clickStep(index.value);
 
-    var getRef = el => {
-      if (direction.value === 'horizontal') {
-        main.value = el;
-      }
-    };
-
     bindSteps(stepProvider);
-    watch(length, newLength => {
-      isLastChild.value = newLength - 1 === index.value;
-
-      if (main.value) {
-        var margin = main.value.offsetWidth / 2 - 14;
-        lineMargin.value = "0 -" + margin + "px";
-      }
-    });
     return {
       n,
       classes,
-      main,
       index,
       isActive,
       isCurrent,
       direction,
-      lineMargin,
       activeColor,
       inactiveColor,
-      isLastChild,
-      click,
-      getRef
+      click
     };
   }
 

package/es/step/step.css

@@ -1 +1 @@
-:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-vertical-min-height: 30px; --step-vertical-tag-margin: 0 4px; --step-vertical-line-height: calc(100% - 30px); --step-vertical-line-min-height: 20px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { display: flex; position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step__horizontal { display: flex; width: 100%;}.var-step__horizontal-main { display: flex; flex-direction: column; align-items: center; flex-basis: 100%;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: relative; top: 14px; flex: 1; height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { width: 100%;}.var-step__vertical-main { display: flex; align-items: flex-start; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { flex-shrink: 0; margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: relative; height: var(--step-vertical-line-height); left: 14px; top: calc(-100% + 45px); min-height: var(--step-vertical-line-min-height); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}
+:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-line-gap: 8px; --step-min-size: calc(var(--step-tag-size) + var(--step-line-gap)); --step-line-size: calc(100% - var(--step-min-size)); --step-vertical-tag-margin: 0 4px; --step-vertical-min-height: 50px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step:last-child .var-step__horizontal-line { width: 0;}.var-step:last-child .var-step__vertical-line { height: 0;}.var-step__horizontal { display: flex; flex-direction: column; align-items: center;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: absolute; top: calc(var(--step-min-size) / 2); left: calc(50% + var(--step-min-size) / 2); width: var(--step-line-size); height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { display: flex; height: 100%; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { flex-shrink: 0; margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: absolute; height: var(--step-line-size); left: calc(var(--step-min-size) / 2); top: calc(var(--step-min-size) - var(--step-line-gap) / 2); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}

package/es/steps/Steps.mjs

@@ -28,7 +28,6 @@ var __sfc__ = defineComponent({
     var inactiveColor = computed(() => props.inactiveColor);
     var direction = computed(() => props.direction);
     var {
-      length,
       bindStep
     } = useStep();
 
@@ -38,7 +37,6 @@ var __sfc__ = defineComponent({
 
     var stepsProvider = {
       active,
-      length,
       direction,
       activeColor,
       inactiveColor,

package/es/steps/provide.mjs

@@ -3,11 +3,9 @@ export var STEPS_BIND_STEP_KEY = Symbol('STEPS_BIND_STEP_KEY');
 export function useStep() {
   var {
     bindChildren,
-    length,
     childProviders
   } = useChildren(STEPS_BIND_STEP_KEY);
   return {
-    length,
     step: childProviders,
     bindStep: bindChildren
   };