@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/time-picker/clock.js

@@ -0,0 +1,345 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _esm = _interopRequireDefault(require("dayjs/esm"));
+
+var _props = require("./props");
+
+var _utils = require("./utils");
+
+var _shared = require("../utils/shared");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 = (0, _esm.default)().minute(radToMinSec).format('mm');
+        var second = props.useSeconds ? ":" + props.time.second : '';
+        newTime = hourStr + ":" + newMinute + second;
+      }
+
+      if (props.type === 'second') {
+        var newSecond = (0, _esm.default)().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

@@ -0,0 +1,17 @@
+"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

@@ -0,0 +1,59 @@
+"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

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

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

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

package/lib/time-picker/timePicker.css

@@ -0,0 +1 @@
+: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

@@ -0,0 +1,236 @@
+@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;
+  }
+}