@varlet/ui 1.22.0-alpha.7 → 1.22.1

package/es/pagination/Pagination.js

@@ -0,0 +1,353 @@
+import Menu from '../menu';
+import Ripple from '../ripple';
+import Icon from '../icon';
+import Cell from '../cell';
+import Input from '../input';
+import { defineComponent, ref, computed, watch } from 'vue';
+import { props } from './porps';
+import { isNumber, toNumber } from '../utils/shared';
+import { pack } from '../locale';
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, createElementVNode as _createElementVNode, withDirectives as _withDirectives, withKeys as _withKeys, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+
+var _hoisted_1 = {
+  class: "var-pagination"
+};
+var _hoisted_2 = ["item-mode", "onClick"];
+var _hoisted_3 = {
+  key: 4,
+  class: "var-pagination__total"
+};
+export function render(_ctx, _cache) {
+  var _component_var_icon = _resolveComponent("var-icon");
+
+  var _component_var_input = _resolveComponent("var-input");
+
+  var _component_var_cell = _resolveComponent("var-cell");
+
+  var _component_var_menu = _resolveComponent("var-menu");
+
+  var _directive_ripple = _resolveDirective("ripple");
+
+  return _openBlock(), _createElementBlock("ul", _hoisted_1, [_withDirectives(_createElementVNode("li", {
+    class: _normalizeClass(["var-pagination__item var-pagination__prev", {
+      'var-pagination__item-disabled': _ctx.current <= 1 || _ctx.disabled,
+      'var-pagination__item-hover': _ctx.simple,
+      'var-elevation--2': !_ctx.simple
+    }]),
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.clickItem('prev'))
+  }, [_renderSlot(_ctx.$slots, "prev", {}, () => [_createVNode(_component_var_icon, {
+    name: "chevron-left"
+  })])], 2
+  /* CLASS */
+  ), [[_directive_ripple, {
+    disabled: _ctx.current <= 1 || _ctx.disabled
+  }]]), _ctx.simple ? (_openBlock(), _createElementBlock("li", {
+    key: 0,
+    class: _normalizeClass(["var-pagination__simple", {
+      'var-pagination__item-disabled': _ctx.disabled
+    }])
+  }, [_createVNode(_component_var_input, {
+    modelValue: _ctx.simpleValue,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.simpleValue = $event),
+    disabled: _ctx.disabled,
+    "var-pagination-cover": "",
+    onBlur: _cache[2] || (_cache[2] = $event => _ctx.setPage('simple', _ctx.simpleValue, $event)),
+    onKeydown: _cache[3] || (_cache[3] = _withKeys($event => _ctx.setPage('simple', _ctx.simpleValue, $event), ["enter"]))
+  }, null, 8
+  /* PROPS */
+  , ["modelValue", "disabled"]), _createTextVNode(" / " + _toDisplayString(_ctx.pageCount), 1
+  /* TEXT */
+  )], 2
+  /* CLASS */
+  )) : (_openBlock(true), _createElementBlock(_Fragment, {
+    key: 1
+  }, _renderList(_ctx.pageList, (item, index) => {
+    return _withDirectives((_openBlock(), _createElementBlock("li", {
+      key: item + index,
+      "item-mode": _ctx.getMode(item, index),
+      class: _normalizeClass(["var-pagination__item var-elevation--2", {
+        'var-pagination__item-active': item === _ctx.current && !_ctx.disabled,
+        'var-pagination__item-hide': _ctx.isHideEllipsis(item, index),
+        'var-pagination__item-disabled': _ctx.disabled,
+        'var-pagination__item-disabled-active': item === _ctx.current && _ctx.disabled
+      }]),
+      onClick: $event => _ctx.clickItem(item, index)
+    }, [_createTextVNode(_toDisplayString(item), 1
+    /* TEXT */
+    )], 10
+    /* CLASS, PROPS */
+    , _hoisted_2)), [[_directive_ripple, {
+      disabled: _ctx.disabled
+    }]]);
+  }), 128
+  /* KEYED_FRAGMENT */
+  )), _withDirectives(_createElementVNode("li", {
+    class: _normalizeClass(["var-pagination__item var-pagination__next", {
+      'var-pagination__item-disabled': _ctx.current >= _ctx.pageCount || _ctx.disabled,
+      'var-pagination__item-hover': _ctx.simple,
+      'var-elevation--2': !_ctx.simple
+    }]),
+    onClick: _cache[4] || (_cache[4] = $event => _ctx.clickItem('next'))
+  }, [_renderSlot(_ctx.$slots, "next", {}, () => [_createVNode(_component_var_icon, {
+    name: "chevron-right"
+  })])], 2
+  /* CLASS */
+  ), [[_directive_ripple, {
+    disabled: _ctx.current >= _ctx.pageCount || _ctx.disabled
+  }]]), _ctx.showSizeChanger ? (_openBlock(), _createElementBlock("li", {
+    key: 2,
+    class: _normalizeClass(["var-pagination__size", {
+      'var-pagination__item-disabled': _ctx.disabled
+    }])
+  }, [_createVNode(_component_var_menu, {
+    show: _ctx.menuVisible,
+    "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event),
+    "offset-x": -4
+  }, {
+    menu: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sizeOption, (option, index) => {
+      return _withDirectives((_openBlock(), _createBlock(_component_var_cell, {
+        class: _normalizeClass(["var-pagination__list", {
+          'var-pagination__list-active': _ctx.size === option
+        }]),
+        key: index,
+        onClick: $event => _ctx.clickSize(option)
+      }, {
+        default: _withCtx(() => [_createTextVNode(_toDisplayString(option) + _toDisplayString(_ctx.pack.paginationItem) + " / " + _toDisplayString(_ctx.pack.paginationPage), 1
+        /* TEXT */
+        )]),
+        _: 2
+        /* DYNAMIC */
+
+      }, 1032
+      /* PROPS, DYNAMIC_SLOTS */
+      , ["class", "onClick"])), [[_directive_ripple]]);
+    }), 128
+    /* KEYED_FRAGMENT */
+    ))]),
+    default: _withCtx(() => [_createElementVNode("div", {
+      class: "var-pagination__size-open",
+      style: {
+        "display": "flex"
+      },
+      onClick: _cache[5] || (_cache[5] = (...args) => _ctx.showMenu && _ctx.showMenu(...args))
+    }, [_createElementVNode("span", null, _toDisplayString(_ctx.size) + _toDisplayString(_ctx.pack.paginationItem) + " / " + _toDisplayString(_ctx.pack.paginationPage), 1
+    /* TEXT */
+    ), _createVNode(_component_var_icon, {
+      class: "var-pagination__size-open-icon",
+      "var-pagination-cover": "",
+      name: "menu-down"
+    })])]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["show"])], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.showQuickJumper && !_ctx.simple ? (_openBlock(), _createElementBlock("li", {
+    key: 3,
+    class: _normalizeClass(["var-pagination__quickly", {
+      'var-pagination__item-disabled': _ctx.disabled
+    }])
+  }, [_createTextVNode(_toDisplayString(_ctx.pack.paginationJump) + " ", 1
+  /* TEXT */
+  ), _createVNode(_component_var_input, {
+    modelValue: _ctx.inputValue,
+    "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.inputValue = $event),
+    disabled: _ctx.disabled,
+    "var-pagination-cover": "",
+    onBlur: _cache[8] || (_cache[8] = $event => _ctx.setPage('quick', _ctx.inputValue, $event)),
+    onKeydown: _cache[9] || (_cache[9] = _withKeys($event => _ctx.setPage('quick', _ctx.inputValue, $event), ["enter"]))
+  }, null, 8
+  /* PROPS */
+  , ["modelValue", "disabled"])], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.totalText ? (_openBlock(), _createElementBlock("li", _hoisted_3, _toDisplayString(_ctx.totalText), 1
+  /* TEXT */
+  )) : _createCommentVNode("v-if", true)]);
+}
+export default defineComponent({
+  render,
+  name: 'VarPagination',
+  components: {
+    [Menu.name]: Menu,
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [Input.name]: Input
+  },
+  directives: {
+    Ripple
+  },
+  props,
+
+  setup(props) {
+    var menuVisible = ref(false);
+    var inputValue = ref('');
+    var simpleValue = ref('1');
+    var isHideEllipsisHead = ref(false);
+    var isHideEllipsisTail = ref(false);
+    var current = ref(toNumber(props.current) || 1);
+    var size = ref(toNumber(props.size) || 10);
+    var pageList = ref([]);
+    var activePosition = computed(() => Math.ceil(props.maxPagerCount / 2));
+    var pageCount = computed(() => Math.ceil(toNumber(props.total) / toNumber(size.value)));
+    var range = computed(() => {
+      var start = size.value * (current.value - 1) + 1;
+      var end = Math.min(size.value * current.value, toNumber(props.total));
+      return [start, end];
+    });
+    var totalText = computed(() => {
+      if (!props.showTotal) return '';
+      return props.showTotal(toNumber(props.total), range.value);
+    });
+
+    var isHideEllipsis = (item, index) => {
+      if (isNumber(item)) return false;
+      return index === 1 ? isHideEllipsisHead.value : isHideEllipsisTail.value;
+    };
+
+    var getMode = (item, index) => {
+      if (isNumber(item)) return 'basic';
+      return index === 1 ? 'head' : 'tail';
+    };
+
+    var clickItem = (item, index) => {
+      if (item === current.value || props.disabled) return;
+      if (isNumber(item)) current.value = item;else if (item === 'prev') current.value > 1 && (current.value -= 1);else if (item === 'next') current.value < pageCount.value && (current.value += 1);else if (item === '...') {
+        if (index === 1) {
+          current.value = Math.max(current.value - props.maxPagerCount, 1);
+        } else {
+          current.value = Math.min(current.value + props.maxPagerCount, pageCount.value);
+        }
+      }
+    };
+
+    var showMenu = () => {
+      if (props.disabled) return;
+      menuVisible.value = true;
+    };
+
+    var clickSize = option => {
+      size.value = option;
+      menuVisible.value = false;
+    };
+
+    var isValidatePage = value => {
+      var pattern = /^[1-9][0-9]*$/;
+      return pattern.test(value);
+    };
+
+    var setPage = (type, value, event) => {
+      ;
+      event.target.blur();
+
+      if (isValidatePage(value)) {
+        var valueNum = toNumber(value);
+
+        if (valueNum > pageCount.value) {
+          valueNum = pageCount.value;
+          simpleValue.value = "" + valueNum;
+        }
+
+        if (valueNum !== current.value) current.value = valueNum;
+      }
+
+      if (type === 'quick') inputValue.value = '';
+      if (type === 'simple' && !isValidatePage(value)) simpleValue.value = "" + current.value;
+    };
+
+    watch([() => props.current, () => props.size], ([newCurrent, newSize]) => {
+      current.value = toNumber(newCurrent) || 1;
+      size.value = toNumber(newSize || 10);
+    });
+    watch([current, pageCount], ([newCurrent, newCount], [oldCurrent, oldCount]) => {
+      if (newCurrent > newCount) {
+        current.value = newCount;
+        return;
+      }
+
+      var list = [];
+      var {
+        maxPagerCount
+      } = props;
+      var rEllipseSign = newCount - (maxPagerCount - activePosition.value) - 1;
+      simpleValue.value = "" + newCurrent;
+
+      if (newCount - 2 > maxPagerCount) {
+        if (oldCurrent === undefined || newCount !== oldCount) {
+          for (var i = 2; i < maxPagerCount + 2; i++) {
+            list.push(i);
+          }
+        } // 左边不需要出现省略符号占位
+
+
+        if (newCurrent <= maxPagerCount && newCurrent < rEllipseSign) {
+          list = [];
+
+          for (var _i = 1; _i < maxPagerCount + 1; _i++) {
+            list.push(_i + 1);
+          }
+
+          isHideEllipsisHead.value = true;
+          isHideEllipsisTail.value = false;
+        } // 两边都需要出现省略符号占位
+
+
+        if (newCurrent > maxPagerCount && newCurrent < rEllipseSign) {
+          list = [];
+
+          for (var _i2 = 1; _i2 < maxPagerCount + 1; _i2++) {
+            list.push(newCurrent + _i2 - activePosition.value);
+          } // 针对 maxPagerCount===1 的特殊处理
+
+
+          isHideEllipsisHead.value = newCurrent === 2 && maxPagerCount === 1;
+          isHideEllipsisTail.value = false;
+        } // 右边不需要出现省略符号占位
+
+
+        if (newCurrent >= rEllipseSign) {
+          list = [];
+
+          for (var _i3 = 1; _i3 < maxPagerCount + 1; _i3++) {
+            list.push(newCount - (maxPagerCount - _i3) - 1);
+          }
+
+          isHideEllipsisHead.value = false;
+          isHideEllipsisTail.value = true;
+        }
+
+        list = [1, '...', ...list, '...', newCount];
+      } else {
+        for (var _i4 = 1; _i4 <= newCount; _i4++) {
+          list.push(_i4);
+        }
+      }
+
+      pageList.value = list;
+      if (oldCurrent !== undefined) props.onChange == null ? void 0 : props.onChange(newCurrent, size.value);
+    }, {
+      immediate: true
+    });
+    return {
+      pack,
+      current,
+      menuVisible,
+      size,
+      pageCount,
+      pageList,
+      inputValue,
+      simpleValue,
+      totalText,
+      getMode,
+      isHideEllipsis,
+      clickItem,
+      showMenu,
+      clickSize,
+      setPage
+    };
+  }
+
+});

package/es/pagination/index.js

@@ -0,0 +1,8 @@
+import Pagination from './Pagination.js'
+
+Pagination.install = function (app) {
+  app.component(Pagination.name, Pagination);
+};
+
+export var _PaginationComponent = Pagination;
+export default Pagination;

package/es/pagination/pagination.css

@@ -0,0 +1 @@
+:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #f5f5f5; --pagination-total-margin: 0 12px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #dbe4fd; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled);}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; 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.3s; user-select: none;}.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-disabled-active { background: var(--pagination-bg-disabled-color);}.var-pagination__item-hide { display: none;}.var-pagination__item-disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item-disabled:hover { background-color: unset;}.var-pagination__item-hover:hover { background: inherit;}.var-pagination__prev { margin-left: 0;}.var-pagination__total { margin: var(--pagination-total-margin); display: flex; white-space: nowrap; align-items: center;}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; margin: var(--pagination-item-margin);}.var-pagination__size-open { cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer;}.var-pagination__list:hover { 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-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { 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 { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size-open-icon { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}

package/es/pagination/pagination.less

@@ -0,0 +1,163 @@
+@pagination-font-size: var(--font-size-md);
+@pagination-active-color: #fff;
+@pagination-active-bg-color: var(--color-primary);
+@pagination-hover-bg-color: rgb(245, 245, 245);
+@pagination-total-margin: 0 12px;
+@pagination-item-width: 32px;
+@pagination-item-height: 32px;
+@pagination-item-margin: 0 6px;
+@pagination-item-border-radius: 4px;
+@pagination-list-bg-color: #fff;
+@pagination-list-active-bg-color: #dbe4fd;
+@pagination-list-active-color: var(--color-primary);
+@pagination-input-width: 32px;
+@pagination-simple-padding: 0 0 2px 0;
+@pagination-disabled-color: var(--color-text-disabled);
+@pagination-bg-disabled-color: var(--color-disabled);
+
+:root {
+  --pagination-font-size: @pagination-font-size;
+  --pagination-active-color: @pagination-active-color;
+  --pagination-active-bg-color: @pagination-active-bg-color;
+  --pagination-hover-bg-color: @pagination-hover-bg-color;
+  --pagination-total-margin: @pagination-total-margin;
+  --pagination-item-width: @pagination-item-width;
+  --pagination-item-height: @pagination-item-height;
+  --pagination-item-margin: @pagination-item-margin;
+  --pagination-item-border-radius: @pagination-item-border-radius;
+  --pagination-list-bg-color: @pagination-list-bg-color;
+  --pagination-list-active-bg-color: @pagination-list-active-bg-color;
+  --pagination-list-active-color: @pagination-list-active-color;
+  --pagination-input-width: @pagination-input-width;
+  --pagination-simple-padding: @pagination-simple-padding;
+  --pagination-disabled-color: @pagination-disabled-color;
+  --pagination-bg-disabled-color: @pagination-bg-disabled-color;
+}
+
+// Mixins
+.pagination-flex-nowrap {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.var-pagination {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  font-size: var(--pagination-font-size);
+  padding: 0;
+
+  &__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.3s;
+    user-select: none;
+
+    &:hover {
+      background-color: var(--pagination-hover-bg-color);
+    }
+
+    &-active {
+      color: var(--pagination-active-color);
+      background-color: var(--pagination-active-bg-color) !important;
+    }
+
+    &-disabled-active {
+      background: var(--pagination-bg-disabled-color);
+    }
+
+    &-hide {
+      display: none;
+    }
+
+    &-disabled {
+      cursor: default !important;
+      color: var(--pagination-disabled-color);
+
+      &:hover {
+        background-color: unset;
+      }
+    }
+
+    &-hover {
+      &:hover {
+        background: inherit;
+      }
+    }
+  }
+
+  &__prev {
+    margin-left: 0;
+  }
+
+  &__total {
+    margin: var(--pagination-total-margin);
+    .pagination-flex-nowrap();
+  }
+
+  &__size {
+    .pagination-flex-nowrap();
+
+    margin: var(--pagination-item-margin);
+
+    &-open {
+      cursor: pointer;
+    }
+  }
+
+  &__list {
+    background-color: var(--pagination-list-bg-color);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--pagination-hover-bg-color);
+    }
+
+    &-active {
+      background-color: var(--pagination-list-active-bg-color) !important;
+      color: var(--pagination-list-active-color);
+    }
+  }
+
+  &__quickly,
+  &__simple {
+    .pagination-flex-nowrap();
+
+    [var-pagination-cover] {
+      width: var(--pagination-input-width);
+
+      .var-input__wrap {
+        padding: 0;
+      }
+
+      .var-input__input {
+        height: auto;
+        text-align: center;
+      }
+    }
+  }
+
+  &__quickly {
+    margin: var(--pagination-item-margin);
+
+    [var-pagination-cover] {
+      margin-left: 6px;
+    }
+  }
+
+  &__size-open-icon {
+    font-size: inherit;
+  }
+
+  &--simple-padding {
+    padding: var(--pagination-simple-padding);
+  }
+}

package/es/pagination/porps.js

@@ -0,0 +1,43 @@
+export var props = {
+  current: {
+    type: [Number, String]
+  },
+  size: {
+    type: [Number, String],
+    default: 10
+  },
+  total: {
+    type: [Number, String],
+    default: 0
+  },
+  maxPagerCount: {
+    type: Number,
+    default: 3
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  simple: {
+    type: Boolean,
+    default: true
+  },
+  showSizeChanger: {
+    type: Boolean,
+    default: true
+  },
+  showQuickJumper: {
+    type: Boolean,
+    default: false
+  },
+  sizeOption: {
+    type: Array,
+    default: () => [10, 20, 50, 100]
+  },
+  showTotal: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  }
+};

package/es/pagination/style/index.js

@@ -0,0 +1,8 @@
+import '../../styles/common.css'
+import '../../menu/menu.css'
+import '../../cell/cell.css'
+import '../../input/input.css'
+import '../../ripple/ripple.css'
+import '../../icon/icon.css'
+import '../pagination.css'
+import '../PaginationSfc.css'

package/es/pagination/style/less.js

@@ -0,0 +1,8 @@
+import '../../styles/common.less'
+import '../../menu/menu.less'
+import '../../cell/cell.less'
+import '../../input/input.less'
+import '../../ripple/ripple.less'
+import '../../icon/icon.less'
+import '../pagination.less'
+import '../PaginationSfc.less'

package/es/radio/radio.css

@@ -1 +1 @@
-:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: #aaa; --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; align-items: center; padding: var(--radio-action-padding); border-radius: 50%;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color);}.var-radio--error { color: var(--radio-error-color);}
+:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; align-items: center; padding: var(--radio-action-padding); border-radius: 50%;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color);}.var-radio--error { color: var(--radio-error-color);}

package/es/radio/radio.less

@@ -1,6 +1,6 @@
 @radio-checked-color: var(--color-primary);
 @radio-unchecked-color: #555;
-@radio-disabled-color: #aaa;
+@radio-disabled-color: var(--color-text-disabled);
 @radio-error-color: var(--color-danger);
 @radio-icon-size: 24px;
 @radio-action-padding: 6px;

package/es/rate/rate.css

@@ -1 +1 @@
-:root { --rate-disabled-color: #aaa; --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__content { padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate--disabled { color: var(--rate-disabled-color) !important;}.var-rate--error { color: var(--rate-error-color) !important;}.var-rate--primary { color: var(--rate-primary-color);}
+:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__content { padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate--disabled { color: var(--rate-disabled-color) !important;}.var-rate--error { color: var(--rate-error-color) !important;}.var-rate--primary { color: var(--rate-primary-color);}

package/es/rate/rate.less

@@ -1,4 +1,4 @@
-@rate-disabled-color: #aaa;
+@rate-disabled-color: var(--color-text-disabled);
 @rate-error-color: var(--color-danger);
 @rate-action-padding: 4px;
 @rate-primary-color: var(--color-primary);

package/es/ripple/ripple.css

@@ -1 +1 @@
-.var-ripple { position: absolute; transition: transform 0.2s cubic-bezier(0.68, 0.01, 0.62, 0.6), opacity 0.08s linear; top: 0; left: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; pointer-events: none; z-index: 100;}
+:root { --ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);}.var-ripple { position: absolute; transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear; top: 0; left: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; pointer-events: none; z-index: 100;}

package/es/ripple/ripple.less

@@ -1,6 +1,12 @@
+@ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
+
+:root {
+  --ripple-cubic-bezier: @ripple-cubic-bezier;
+}
+
 .var-ripple {
   position: absolute;
-  transition: transform 0.2s cubic-bezier(0.68, 0.01, 0.62, 0.6), opacity 0.08s linear;
+  transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear;
   top: 0;
   left: 0;
   border-radius: 50%;

package/es/select/select.css

@@ -1 +1 @@
-:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: #aaa;}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); overflow-x: auto;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); overflow-x: auto;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}

package/es/select/select.less

@@ -14,7 +14,7 @@
 @select-line-size: 1px;
 @select-line-spread-size: 2px;
 @select-arrow-size: 20px;
-@select-disabled-color: #aaa;
+@select-disabled-color: var(--color-text-disabled);
 
 :root {
   --select-select-text-color: @select-select-text-color;