@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/time-picker/clock.js

@@ -1,347 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var dayjs = _interopRequireWildcard(require("dayjs"));
-
-var _props = require("./props");
-
-var _utils = require("./utils");
-
-var _shared = require("../utils/shared");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-time-picker-clock"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-time-picker-clock__inner",
-  ref: "inner"
-};
-
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: "var-time-picker-clock__hand",
-    style: (0, _vue.normalizeStyle)(_ctx.handStyle)
-  }, null, 4
-  /* STYLE */
-  ), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.timeScales, (timeScale, index) => {
-    return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: (0, _vue.normalizeClass)(["var-time-picker-clock__item", [_ctx.isActive(index, false) ? 'var-time-picker-clock__item--active' : null, _ctx.isDisable(timeScale) ? 'var-time-picker-clock__item--disable' : null]]),
-      key: timeScale,
-      style: (0, _vue.normalizeStyle)(_ctx.getStyle(index, timeScale, false))
-    }, (0, _vue.toDisplayString)(timeScale), 7
-    /* TEXT, CLASS, STYLE */
-    );
-  }), 128
-  /* KEYED_FRAGMENT */
-  )), _ctx.format === '24hr' && _ctx.type === 'hour' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.hours24, (hour, index) => {
-    return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: (0, _vue.normalizeClass)(["var-time-picker-clock__item", [_ctx.isActive(index, true) ? 'var-time-picker-clock__item--active' : null, _ctx.isDisable(hour) ? 'var-time-picker-clock__item--disable' : null]]),
-      key: hour,
-      style: (0, _vue.normalizeStyle)(_ctx.getStyle(index, hour, true))
-    }, (0, _vue.toDisplayString)(hour), 7
-    /* TEXT, CLASS, STYLE */
-    );
-  }), 128
-  /* KEYED_FRAGMENT */
-  ))], 512
-  /* NEED_PATCH */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]);
-}
-
-var _default = (0, _vue.defineComponent)({
-  render,
-  name: 'Clock',
-  props: {
-    isInner: {
-      type: Boolean,
-      required: true
-    },
-    rad: {
-      type: Number
-    },
-    format: {
-      type: String,
-      default: 'ampm'
-    },
-    allowedTime: {
-      type: Object
-    },
-    time: {
-      type: Object,
-      required: true
-    },
-    useSeconds: {
-      type: Boolean,
-      default: false
-    },
-    preventNextUpdate: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: 'hour'
-    },
-    ampm: {
-      type: String,
-      default: 'am'
-    },
-    color: {
-      type: String
-    },
-    min: {
-      type: String
-    },
-    max: {
-      type: String
-    }
-  },
-  emits: ['update', 'change-prevent-update'],
-
-  setup(props, {
-    emit
-  }) {
-    var inner = (0, _vue.ref)(null);
-    var disableHour = (0, _vue.ref)([]);
-    var disable24HourIndex = (0, _vue.ref)([]);
-    var handStyle = (0, _vue.computed)(() => ({
-      transform: "rotate(" + (0, _shared.toNumber)(props.rad) + "deg)",
-      height: props.isInner && props.type === 'hour' ? 'calc(50% - 40px)' : 'calc(50% - 4px)',
-      backgroundColor: getHandleColor(),
-      borderColor: getHandleColor()
-    }));
-    var activeItemIndex = (0, _vue.computed)(() => {
-      if (props.rad === undefined) return;
-      var value = props.rad / 30;
-      return value >= 0 ? value : value + 12;
-    });
-    var timeScales = (0, _vue.computed)(() => {
-      if (props.type === 'hour') return _props.hoursAmpm;
-      return _props.minSec;
-    });
-
-    var isDisableMinSec = (time, isDisable) => {
-      var _time;
-
-      time = (_time = time) != null ? _time : props.type === 'minute' ? props.time.minute : props.time.second;
-      var disableMethod = props.type === 'minute' ? _utils.getIsDisableMinute : _utils.getIsDisableSecond;
-      var values = {
-        time: (0, _shared.toNumber)(time),
-        format: props.format,
-        ampm: props.ampm,
-        hour: props.time.hour,
-        minute: (0, _shared.toNumber)(props.time.minute),
-        max: props.max,
-        min: props.min,
-        allowedTime: props.allowedTime,
-        disableHour: disableHour.value
-      };
-      if (isDisable && props.type === 'minute') Reflect.deleteProperty(values, 'minute');
-      return disableMethod(values);
-    };
-
-    var getHandleColor = () => {
-      if (activeItemIndex.value === undefined) return props.color;
-      var hour = props.isInner ? _props.hours24[activeItemIndex.value] : timeScales.value[activeItemIndex.value];
-
-      if (timeScales.value === _props.minSec) {
-        return isDisableMinSec() ? '#bdbdbd' : props.color;
-      }
-
-      return isDisable(hour) ? '#bdbdbd' : props.color;
-    };
-
-    var isActive = (index, inner) => {
-      if (inner) return activeItemIndex.value === index && props.isInner;
-      return activeItemIndex.value === index && (!props.isInner || props.type !== 'hour');
-    };
-
-    var isDisable = time => {
-      if (props.type === 'hour') {
-        if ((0, _utils.notConvert)(props.format, props.ampm)) return disableHour.value.includes(time);
-
-        var timeIndex = _props.hoursAmpm.findIndex(hour => hour === time);
-
-        return disable24HourIndex.value.includes(timeIndex);
-      }
-
-      return isDisableMinSec(time, true);
-    };
-
-    var getStyle = (index, hour, inner) => {
-      var rad = 2 * Math.PI / 12 * index - Math.PI / 2;
-      var left = 50 * (1 + Math.cos(rad));
-      var top = 50 * (1 + Math.sin(rad));
-
-      var computedColor = () => {
-        if (!isActive(index, inner)) {
-          return {
-            backgroundColor: undefined,
-            color: undefined
-          };
-        }
-
-        if (isDisable(hour)) {
-          return {
-            backgroundColor: '#bdbdbd',
-            color: '#fff'
-          };
-        }
-
-        return {
-          backgroundColor: props.color,
-          color: undefined
-        };
-      };
-
-      var {
-        backgroundColor,
-        color
-      } = computedColor();
-      return {
-        left: left + "%",
-        top: top + "%",
-        backgroundColor,
-        color
-      };
-    };
-
-    var getSize = () => {
-      var {
-        width,
-        height
-      } = inner.value.getBoundingClientRect();
-      return {
-        width,
-        height
-      };
-    };
-
-    var getHour = () => {
-      if (activeItemIndex.value === undefined) return undefined;
-      var hours = props.ampm === 'am' ? _props.hoursAmpm : _props.hours24;
-      return hours[activeItemIndex.value].padStart(2, '0');
-    };
-
-    (0, _vue.watch)([activeItemIndex, () => props.isInner], ([index, inner], [oldIndex, oldInner]) => {
-      var isSame = index === oldIndex && inner === oldInner;
-      if (isSame || props.type !== 'hour' || activeItemIndex.value === undefined) return;
-      var newHour = inner ? _props.hours24[activeItemIndex.value] : getHour();
-      var second = props.useSeconds ? ":" + props.time.second : '';
-      var newTime = newHour + ":" + props.time.minute + second;
-      if (!props.preventNextUpdate) emit('update', newTime);
-      emit('change-prevent-update');
-    });
-    (0, _vue.watch)(() => props.rad, (rad, oldRad) => {
-      if (props.type === 'hour' || rad === undefined || oldRad === undefined) return;
-      var radToMinSec = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60;
-      var oldRadToMinSec = oldRad / 6 >= 0 ? oldRad / 6 : oldRad / 6 + 60;
-      if (radToMinSec === oldRadToMinSec) return;
-      var newTime;
-      var {
-        hourStr
-      } = (0, _utils.convertHour)(props.format, props.ampm, props.time.hour);
-
-      if (props.type === 'minute') {
-        var newMinute = dayjs().minute(radToMinSec).format('mm');
-        var second = props.useSeconds ? ":" + props.time.second : '';
-        newTime = hourStr + ":" + newMinute + second;
-      }
-
-      if (props.type === 'second') {
-        var newSecond = dayjs().second(radToMinSec).format('ss');
-
-        var _second = props.useSeconds ? ":" + newSecond : '';
-
-        newTime = hourStr + ":" + props.time.minute + _second;
-      }
-
-      emit('update', newTime);
-    });
-    (0, _vue.watch)([() => props.max, () => props.min, () => props.allowedTime], ([max, min, allowedTime]) => {
-      disableHour.value = [];
-
-      if (max && !min) {
-        var {
-          hour: maxHour
-        } = (0, _utils.getNumberTime)(max);
-
-        var disableAmpmHours = _props.hoursAmpm.filter(hour => (0, _shared.toNumber)(hour) > maxHour);
-
-        var disable24Hours = _props.hours24.filter(hour => (0, _shared.toNumber)(hour) > maxHour);
-
-        disableHour.value = [...disableAmpmHours, ...disable24Hours];
-      }
-
-      if (!max && min) {
-        var {
-          hour: minHour
-        } = (0, _utils.getNumberTime)(min);
-
-        var _disableAmpmHours = _props.hoursAmpm.filter(hour => (0, _shared.toNumber)(hour) < minHour);
-
-        var _disable24Hours = _props.hours24.filter(hour => (0, _shared.toNumber)(hour) < minHour);
-
-        disableHour.value = [..._disableAmpmHours, ..._disable24Hours];
-      }
-
-      if (max && min) {
-        var {
-          hour: _maxHour
-        } = (0, _utils.getNumberTime)(max);
-        var {
-          hour: _minHour
-        } = (0, _utils.getNumberTime)(min);
-
-        var _disableAmpmHours2 = _props.hoursAmpm.filter(hour => (0, _shared.toNumber)(hour) < _minHour || (0, _shared.toNumber)(hour) > _maxHour);
-
-        var _disable24Hours2 = _props.hours24.filter(hour => (0, _shared.toNumber)(hour) < _minHour || (0, _shared.toNumber)(hour) > _maxHour);
-
-        disableHour.value = [..._disableAmpmHours2, ..._disable24Hours2];
-      }
-
-      if (allowedTime != null && allowedTime.hours) {
-        var {
-          hours
-        } = allowedTime;
-
-        var _disableAmpmHours3 = _props.hoursAmpm.filter(hour => !hours((0, _shared.toNumber)(hour)));
-
-        var _disable24Hours3 = _props.hours24.filter(hour => !hours((0, _shared.toNumber)(hour)));
-
-        disableHour.value = [...new Set([...disableHour.value, ..._disableAmpmHours3, ..._disable24Hours3])];
-      }
-
-      disable24HourIndex.value = disableHour.value.map(hour => _props.hours24.findIndex(hour24 => hour === hour24)).filter(hour => hour >= 0);
-    }, {
-      immediate: true
-    });
-    return {
-      hours24: _props.hours24,
-      timeScales,
-      inner,
-      handStyle,
-      disableHour,
-      isActive,
-      isDisable,
-      getSize,
-      getStyle,
-      activeItemIndex
-    };
-  }
-
-});
-
-exports.default = _default;

package/lib/time-picker/index.js

@@ -1,17 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = exports._TimePickerComponent = void 0;
-
-var _TimePicker = _interopRequireDefault(require("./TimePicker.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-_TimePicker.default.install = function (app) {
-  app.component(_TimePicker.default.name, _TimePicker.default);
-};
-
-var _TimePickerComponent = _TimePicker.default;
-exports._TimePickerComponent = _TimePickerComponent;
-var _default = _TimePicker.default;
-exports.default = _default;

package/lib/time-picker/props.js

@@ -1,59 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.props = exports.minSec = exports.hours24 = exports.hoursAmpm = void 0;
-var hoursAmpm = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
-exports.hoursAmpm = hoursAmpm;
-var hours24 = ['00', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
-exports.hours24 = hours24;
-var minSec = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
-exports.minSec = minSec;
-
-function formatValidator(type) {
-  return ['ampm', '24hr'].includes(type);
-}
-
-var props = {
-  modelValue: {
-    type: String
-  },
-  shadow: {
-    type: Boolean,
-    default: false
-  },
-  color: {
-    type: String
-  },
-  headerColor: {
-    type: String
-  },
-  format: {
-    type: String,
-    default: 'ampm',
-    validator: formatValidator
-  },
-  allowedTime: {
-    type: Object
-  },
-  min: {
-    type: String
-  },
-  max: {
-    type: String
-  },
-  useSeconds: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  'onUpdate:modelValue': {
-    type: Function
-  },
-  onChange: {
-    type: Function
-  }
-};
-exports.props = props;

package/lib/time-picker/style/index.js

@@ -1,4 +0,0 @@
-require('../../styles/common.css')
-require('../../styles/elevation.css')
-require('../timePicker.css')
-require('../TimePickerSfc.css')

package/lib/time-picker/style/less.js

@@ -1,4 +0,0 @@
-require('../../styles/common.less')
-require('../../styles/elevation.less')
-require('../timePicker.less')
-require('../TimePickerSfc.less')

package/lib/time-picker/timePicker.css

@@ -1 +0,0 @@
-:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-padding: 16px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 270px; --time-picker-clock-container-height: 270px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); height: var(--time-picker-height); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker-title { padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker-title__btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker-title__btn--active { opacity: 1;}.var-time-picker-title__time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker-title__time .var-time-picker-title__btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker-title__ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker-body { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--time-picker-body-background);}.var-time-picker-clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker-clock__container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker-clock__hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker-clock__hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker-clock__hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker-clock__item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%);}.var-time-picker-clock__item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker-clock__item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker-clock__inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}

package/lib/time-picker/timePicker.less

@@ -1,236 +0,0 @@
-@time-picker-border-radius: 4px;
-@time-picker-font-size: var(--font-size-md);
-@time-picker-min-width: 290px;
-@time-picker-height: 385px;
-@time-picker-title-padding: 16px;
-@time-picker-title-color: #fff;
-@time-picker-title-background: var(--color-primary);
-@time-picker-title-time-font-size: 50px;
-@time-picker-title-time-margin: 0 5px;
-@time-picker-title-ampm-margin-left: 5px;
-@time-picker-clock-left: 27px;
-@time-picker-clock-right: 27px;
-@time-picker-clock-top: 27px;
-@time-picker-clock-bottom: 27px;
-@time-picker-clock-container-width: 270px;
-@time-picker-clock-container-height: 270px;
-@time-picker-clock-container-background: #e0e0e0;
-@time-picker-clock-hand-height: calc(50% - 4px);
-@time-picker-clock-hand-width: 2px;
-@time-picker-clock-hand-bottom: 50%;
-@time-picker-clock-hand-left: calc(50% - 1px);
-@time-picker-clock-hand-background: var(--color-primary);
-@time-picker-clock-hand-border-color: var(--color-primary);
-@time-picker-clock-hand-before-width: 10px;
-@time-picker-clock-hand-before-height: 10px;
-@time-picker-clock-hand-before-border-width: 2px;
-@time-picker-clock-hand-after-width: 4px;
-@time-picker-clock-hand-after-height: 4px;
-@time-picker-clock-item-height: 32px;
-@time-picker-clock-item-width: 32px;
-@time-picker-clock-item-active-background: var(--color-primary);
-@time-picker-clock-item-active-color: #fff;
-@time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26);
-@time-picker-body-background: #fff;
-@time-picker-inner-left: 36px;
-@time-picker-inner-right: 36px;
-@time-picker-inner-top: 36px;
-@time-picker-inner-bottom: 36px;
-
-:root {
-  --time-picker-border-radius: @time-picker-border-radius;
-  --time-picker-font-size: @time-picker-font-size;
-  --time-picker-min-width: @time-picker-min-width;
-  --time-picker-height: @time-picker-height;
-  --time-picker-title-padding: @time-picker-title-padding;
-  --time-picker-title-color: @time-picker-title-color;
-  --time-picker-title-background: @time-picker-title-background;
-  --time-picker-title-time-font-size: @time-picker-title-time-font-size;
-  --time-picker-title-time-margin: @time-picker-title-time-margin;
-  --time-picker-title-ampm-margin-left: @time-picker-title-ampm-margin-left;
-  --time-picker-clock-left: @time-picker-clock-left;
-  --time-picker-clock-right: @time-picker-clock-right;
-  --time-picker-clock-top: @time-picker-clock-top;
-  --time-picker-clock-bottom: @time-picker-clock-bottom;
-  --time-picker-clock-container-width: @time-picker-clock-container-width;
-  --time-picker-clock-container-height: @time-picker-clock-container-height;
-  --time-picker-clock-container-background: @time-picker-clock-container-background;
-  --time-picker-clock-hand-height: @time-picker-clock-hand-height;
-  --time-picker-clock-hand-width: @time-picker-clock-hand-width;
-  --time-picker-clock-hand-bottom: @time-picker-clock-hand-bottom;
-  --time-picker-clock-hand-left: @time-picker-clock-hand-left;
-  --time-picker-clock-hand-background: @time-picker-clock-hand-background;
-  --time-picker-clock-hand-border-color: @time-picker-clock-hand-border-color;
-  --time-picker-clock-hand-before-width: @time-picker-clock-hand-before-width;
-  --time-picker-clock-hand-before-height: @time-picker-clock-hand-before-height;
-  --time-picker-clock-hand-before-border-width: @time-picker-clock-hand-before-border-width;
-  --time-picker-clock-hand-after-width: @time-picker-clock-hand-after-width;
-  --time-picker-clock-hand-after-height: @time-picker-clock-hand-after-height;
-  --time-picker-clock-item-height: @time-picker-clock-item-height;
-  --time-picker-clock-item-width: @time-picker-clock-item-width;
-  --time-picker-clock-item-active-background: @time-picker-clock-item-active-background;
-  --time-picker-clock-item-active-color: @time-picker-clock-item-active-color;
-  --time-picker-clock-item-disable-color: @time-picker-clock-item-disable-color;
-  --time-picker-inner-left: @time-picker-inner-left;
-  --time-picker-inner-right: @time-picker-inner-right;
-  --time-picker-inner-top: @time-picker-inner-top;
-  --time-picker-inner-bottom: @time-picker-inner-bottom;
-  --time-picker-body-background: @time-picker-body-background;
-}
-
-// Mixins
-.after-before-basic {
-  content: '';
-  position: absolute;
-  border-radius: 100%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.var-time-picker {
-  border-radius: var(--time-picker-border-radius);
-  contain: layout style;
-  display: flex;
-  flex-direction: column;
-  font-size: var(--time-picker-font-size);
-  position: relative;
-  min-width: var(--time-picker-min-width);
-  height: var(--time-picker-height);
-  overflow: hidden;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-  &-title {
-    padding: var(--time-picker-title-padding);
-    color: var(--time-picker-title-color);
-    background: var(--time-picker-title-background);
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-
-    &__btn {
-      opacity: 0.6;
-      cursor: pointer;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      transition: 0.3s var(--cubic-bezier);
-      white-space: nowrap;
-
-      &--active {
-        opacity: 1;
-      }
-    }
-
-    &__time {
-      display: flex;
-      justify-content: flex-end;
-      font-size: var(--time-picker-title-time-font-size);
-
-      .var-time-picker-title__btn {
-        align-items: center;
-        margin: var(--time-picker-title-time-margin);
-      }
-    }
-
-    &__ampm {
-      margin-left: var(--time-picker-title-ampm-margin-left);
-    }
-  }
-
-  &-body {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--time-picker-body-background);
-  }
-
-  &-clock {
-    position: absolute;
-    bottom: var(--time-picker-clock-bottom);
-    left: var(--time-picker-clock-left);
-    right: var(--time-picker-clock-right);
-    top: var(--time-picker-clock-top);
-
-    &__container {
-      width: var(--time-picker-clock-container-width);
-      height: var(--time-picker-clock-container-height);
-      background: var(--time-picker-clock-container-background);
-      border-radius: 50%;
-      position: relative;
-    }
-
-    &__hand {
-      height: var(--time-picker-clock-hand-height);
-      width: var(--time-picker-clock-hand-width);
-      bottom: var(--time-picker-clock-hand-bottom);
-      left: var(--time-picker-clock-hand-left);
-      transform-origin: center bottom;
-      position: absolute;
-      will-change: transform;
-      z-index: 1;
-      background-color: var(--time-picker-clock-hand-background);
-      border-color: var(--time-picker-clock-hand-border-color);
-
-      &::before {
-        .after-before-basic();
-
-        background: transparent;
-        border: var(--time-picker-clock-hand-before-border-width) solid;
-        width: var(--time-picker-clock-hand-before-width);
-        height: var(--time-picker-clock-hand-before-height);
-        top: -5px;
-        border-color: inherit;
-      }
-
-      &::after {
-        .after-before-basic();
-
-        border-color: inherit;
-        height: var(--time-picker-clock-hand-after-height);
-        width: var(--time-picker-clock-hand-after-width);
-        top: 100%;
-        border-style: solid;
-        background-color: inherit;
-      }
-    }
-
-    &__item {
-      align-items: center;
-      border-radius: 100%;
-      display: flex;
-      justify-content: center;
-      height: var(--time-picker-clock-item-height);
-      position: absolute;
-      width: var(--time-picker-clock-item-width);
-      user-select: none;
-      transform: translate(-50%, -50%);
-
-      &--active {
-        background: var(--time-picker-clock-item-active-background);
-        z-index: 2;
-        color: var(--time-picker-clock-item-active-color);
-      }
-
-      &--disable {
-        color: var(--time-picker-clock-item-disable-color);
-      }
-    }
-
-    &__inner {
-      position: absolute;
-      bottom: var(--time-picker-inner-bottom);
-      left: var(--time-picker-inner-left);
-      right: var(--time-picker-inner-right);
-      top: var(--time-picker-inner-top);
-    }
-  }
-
-  &-panel-fade-enter-from,
-  &-panel-fade-leave-to {
-    transition: 0.3s var(--cubic-bezier);
-    opacity: 0;
-  }
-
-  &-panel-fade-leave-active {
-    position: absolute;
-  }
-}