@varlet/ui 1.23.4-alpha.8 → 1.23.4

package/lib/time-picker/TimePicker.js

@@ -1,413 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var dayjs = _interopRequireWildcard(require("dayjs"));
-
-var _clock = _interopRequireDefault(require("./clock.js"));
-
-var _props = require("./props");
-
-var _shared = require("../utils/shared");
-
-var _utils = require("./utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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-title__time"
-};
-
-var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("span", null, ":", -1
-/* HOISTED */
-));
-
-var _hoisted_3 = {
-  key: 0
-};
-var _hoisted_4 = {
-  key: 0,
-  class: "var-time-picker-title__ampm"
-};
-var _hoisted_5 = {
-  class: "var-time-picker-body"
-};
-
-function render(_ctx, _cache) {
-  var _component_clock = (0, _vue.resolveComponent)("clock");
-
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker", [_ctx.shadow ? 'var-elevation--2' : null]]),
-    ref: "picker"
-  }, [(0, _vue.createElementVNode)("div", {
-    class: "var-time-picker-title",
-    style: (0, _vue.normalizeStyle)({
-      background: _ctx.headerColor || _ctx.color
-    })
-  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.type === 'hour' ? 'var-time-picker-title__btn--active' : null]),
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.checkPanel('hour'))
-  }, (0, _vue.toDisplayString)(_ctx.time.hour), 3
-  /* TEXT, CLASS */
-  ), _hoisted_2, (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.type === 'minute' ? 'var-time-picker-title__btn--active' : null]),
-    onClick: _cache[1] || (_cache[1] = $event => _ctx.checkPanel('minute'))
-  }, (0, _vue.toDisplayString)(_ctx.time.minute), 3
-  /* TEXT, CLASS */
-  ), _ctx.useSeconds ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_3, ":")) : (0, _vue.createCommentVNode)("v-if", true), _ctx.useSeconds ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    key: 1,
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.type === 'second' ? 'var-time-picker-title__btn--active' : null]),
-    onClick: _cache[2] || (_cache[2] = $event => _ctx.checkPanel('second'))
-  }, (0, _vue.toDisplayString)(_ctx.time.second), 3
-  /* TEXT, CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.format === 'ampm' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_4, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.ampm === 'am' ? 'var-time-picker-title__btn--active' : null]),
-    onClick: _cache[3] || (_cache[3] = $event => _ctx.checkAmpm('am'))
-  }, " AM ", 2
-  /* CLASS */
-  ), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-time-picker-title__btn", _ctx.ampm === 'pm' ? 'var-time-picker-title__btn--active' : null]),
-    onClick: _cache[4] || (_cache[4] = $event => _ctx.checkAmpm('pm'))
-  }, " PM ", 2
-  /* CLASS */
-  )])) : (0, _vue.createCommentVNode)("v-if", true)], 4
-  /* STYLE */
-  ), (0, _vue.createElementVNode)("div", _hoisted_5, [(0, _vue.createElementVNode)("div", {
-    class: "var-time-picker-clock__container",
-    onTouchstart: _cache[5] || (_cache[5] = (...args) => _ctx.moveHand && _ctx.moveHand(...args)),
-    onTouchmove: _cache[6] || (_cache[6] = (...args) => _ctx.moveHand && _ctx.moveHand(...args)),
-    onTouchend: _cache[7] || (_cache[7] = (...args) => _ctx.end && _ctx.end(...args)),
-    ref: "container"
-  }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: "var-time-picker-panel-fade"
-  }, {
-    default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_clock, {
-      key: _ctx.type,
-      ref: "inner",
-      type: _ctx.type,
-      ampm: _ctx.ampm,
-      color: _ctx.color,
-      "is-inner": _ctx.isInner,
-      format: _ctx.format,
-      "allowed-time": _ctx.allowedTime,
-      rad: _ctx.getRad,
-      time: _ctx.time,
-      "prevent-next-update": _ctx.isPreventNextUpdate,
-      "use-seconds": _ctx.useSeconds,
-      max: _ctx.max,
-      min: _ctx.min,
-      onUpdate: _ctx.update,
-      onChangePreventUpdate: _ctx.changePreventUpdate
-    }, null, 8
-    /* PROPS */
-    , ["type", "ampm", "color", "is-inner", "format", "allowed-time", "rad", "time", "prevent-next-update", "use-seconds", "max", "min", "onUpdate", "onChangePreventUpdate"])]),
-    _: 1
-    /* STABLE */
-
-  })], 544
-  /* HYDRATE_EVENTS, NEED_PATCH */
-  )])], 2
-  /* CLASS */
-  );
-}
-
-var _default = (0, _vue.defineComponent)({
-  render,
-  name: 'VarTimePicker',
-  components: {
-    Clock: _clock.default
-  },
-  props: _props.props,
-
-  setup(props) {
-    var container = (0, _vue.ref)(null);
-    var picker = (0, _vue.ref)(null);
-    var inner = (0, _vue.ref)(null);
-    var isInner = (0, _vue.ref)(false);
-    var isPreventNextUpdate = (0, _vue.ref)(false);
-    var isActualInner = (0, _vue.ref)(false);
-    var isChosenUsableHour = (0, _vue.ref)(false);
-    var isChosenUsableMinute = (0, _vue.ref)(false);
-    var hourRad = (0, _vue.ref)(undefined);
-    var minuteRad = (0, _vue.ref)(0);
-    var secondRad = (0, _vue.ref)(0);
-    var type = (0, _vue.ref)('hour');
-    var ampm = (0, _vue.ref)('am');
-    var isDisableHour = (0, _vue.ref)(false);
-    var isDisableMinute = (0, _vue.ref)(false);
-    var time = (0, _vue.ref)({
-      hour: '00',
-      minute: '00',
-      second: '00'
-    });
-    var center = (0, _vue.reactive)({
-      x: 0,
-      y: 0
-    });
-    var innerRange = (0, _vue.reactive)({
-      x: [],
-      y: []
-    });
-    var getRad = (0, _vue.computed)(() => {
-      if (type.value === 'hour') return hourRad.value;
-      if (type.value === 'minute') return minuteRad.value;
-      return secondRad.value;
-    });
-
-    var update = newTime => {
-      var _props$onUpdateModel;
-
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, newTime);
-      props.onChange == null ? void 0 : props.onChange(newTime);
-    };
-
-    var rad2deg = rad => {
-      return rad * 57.29577951308232;
-    };
-
-    var checkPanel = panelType => {
-      isChosenUsableHour.value = false;
-      isDisableMinute.value = false;
-      type.value = panelType;
-    };
-
-    var findAvailableHour = ampm => {
-      var {
-        disableHour
-      } = inner.value;
-
-      var index = _props.hoursAmpm.findIndex(hour => (0, _shared.toNumber)(hour) === (0, _shared.toNumber)(time.value.hour));
-
-      var hours = ampm === 'am' ? _props.hoursAmpm : _props.hours24;
-      var realignmentHours = [...hours.slice(index), ...hours.slice(0, index)];
-      return realignmentHours.find((hour, index) => {
-        isPreventNextUpdate.value = index !== 0;
-        return !disableHour.includes(hour);
-      });
-    };
-
-    var checkAmpm = ampmType => {
-      if (props.readonly) return;
-      ampm.value = ampmType;
-      var newHour = findAvailableHour(ampmType);
-      if (!newHour) return;
-      var second = props.useSeconds ? ":" + time.value.second : '';
-      var newTime = newHour.padStart(2, '0') + ":" + time.value.minute + second;
-      update(newTime);
-    };
-
-    var getInner = (clientX, clientY) => {
-      var xIsInRange = clientX >= innerRange.x[0] && clientX <= innerRange.x[1];
-      var yIsInRange = clientY >= innerRange.y[0] && clientY <= innerRange.y[1];
-      return xIsInRange && yIsInRange;
-    };
-
-    var getTime = value => {
-      var hourFormat = props.format === '24hr' ? 'HH' : 'hh';
-      var {
-        hour,
-        minute,
-        second
-      } = (0, _utils.getNumberTime)(value);
-      return {
-        hour: dayjs().hour(hour).format(hourFormat),
-        minute: dayjs().minute(minute).format('mm'),
-        second: dayjs().second(second).format('ss')
-      };
-    };
-
-    var getHourIndex = rad => {
-      var value = rad / 30;
-      return value >= 0 ? value : value + 12;
-    };
-
-    var getRangeSize = () => {
-      var {
-        width: innerWidth,
-        height: innerHeight
-      } = inner.value.getSize();
-      var rangeXMin = center.x - innerWidth / 2 - 8;
-      var rangeXMax = center.x + innerWidth / 2 + 8;
-      var rangeYMin = center.y - innerHeight / 2 - 8;
-      var rangeYMax = center.y + innerHeight / 2 + 8;
-      return {
-        rangeXMin,
-        rangeXMax,
-        rangeYMin,
-        rangeYMax
-      };
-    };
-
-    var setHourRad = (clientX, clientY, roundDeg) => {
-      var {
-        disableHour
-      } = inner.value;
-      isActualInner.value = getInner(clientX, clientY);
-      var rad = Math.round(roundDeg / 30) * 30 + 90;
-      var index = getHourIndex(rad);
-      var anotherHour = isInner.value ? _props.hoursAmpm[index] : _props.hours24[index];
-
-      if (!disableHour.includes(anotherHour)) {
-        isInner.value = props.format === '24hr' ? getInner(clientX, clientY) : false;
-      }
-
-      if (isInner.value !== isActualInner.value) return;
-      var newHour = isInner.value || ampm.value === 'pm' ? _props.hours24[index] : _props.hoursAmpm[index];
-      isDisableHour.value = disableHour.includes(newHour);
-      if (isDisableHour.value) return;
-      hourRad.value = rad;
-      isChosenUsableHour.value = true;
-    };
-
-    var setMinuteRad = roundDeg => {
-      var {
-        disableHour
-      } = inner.value;
-      var rad = Math.round(roundDeg / 6) * 6 + 90;
-      var radToMin = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60;
-      var values = {
-        time: radToMin,
-        format: props.format,
-        ampm: ampm.value,
-        hour: time.value.hour,
-        max: props.max,
-        min: props.min,
-        disableHour,
-        allowedTime: props.allowedTime
-      };
-      isDisableMinute.value = (0, _utils.getIsDisableMinute)(values);
-      if (isDisableMinute.value) return;
-      minuteRad.value = rad;
-      isChosenUsableMinute.value = true;
-    };
-
-    var setSecondRad = roundDeg => {
-      var {
-        disableHour
-      } = inner.value;
-      var rad = Math.round(roundDeg / 6) * 6 + 90;
-      var radToSec = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60;
-      var values = {
-        time: radToSec,
-        format: props.format,
-        ampm: ampm.value,
-        hour: time.value.hour,
-        minute: (0, _shared.toNumber)(time.value.minute),
-        max: props.max,
-        min: props.min,
-        disableHour,
-        allowedTime: props.allowedTime
-      };
-      if (!(0, _utils.getIsDisableSecond)(values)) secondRad.value = rad;
-    };
-
-    var setCenterAndRange = () => {
-      var {
-        left,
-        top,
-        width,
-        height
-      } = container.value.getBoundingClientRect();
-      center.x = left + width / 2;
-      center.y = top + height / 2;
-
-      if (type.value === 'hour' && props.format === '24hr') {
-        var {
-          rangeXMin,
-          rangeXMax,
-          rangeYMin,
-          rangeYMax
-        } = getRangeSize();
-        innerRange.x = [rangeXMin, rangeXMax];
-        innerRange.y = [rangeYMin, rangeYMax];
-      }
-    };
-
-    var moveHand = event => {
-      event.preventDefault();
-      if (props.readonly) return;
-      setCenterAndRange();
-      var {
-        clientX,
-        clientY
-      } = event.touches[0];
-      var x = clientX - center.x;
-      var y = clientY - center.y;
-      var roundDeg = Math.round(rad2deg(Math.atan2(y, x)));
-      if (type.value === 'hour') setHourRad(clientX, clientY, roundDeg);else if (type.value === 'minute') setMinuteRad(roundDeg);else setSecondRad(roundDeg);
-    };
-
-    var end = () => {
-      if (props.readonly) return;
-
-      if (type.value === 'hour' && isChosenUsableHour.value) {
-        type.value = 'minute';
-        return;
-      }
-
-      if (type.value === 'minute' && props.useSeconds && isChosenUsableMinute.value) {
-        type.value = 'second';
-      }
-    };
-
-    var changePreventUpdate = () => {
-      isPreventNextUpdate.value = false;
-    };
-
-    (0, _vue.watch)(() => props.modelValue, value => {
-      if (value) {
-        var {
-          hour,
-          minute,
-          second
-        } = (0, _utils.getNumberTime)(value);
-        var formatHour12 = dayjs().hour(hour).format('hh');
-        var formatHour24 = dayjs().hour(hour).format('HH');
-        var formatMinute = dayjs().minute(minute).format('mm');
-        var formatSecond = dayjs().second(second).format('ss');
-        hourRad.value = (formatHour12 === '12' ? 0 : (0, _shared.toNumber)(formatHour12)) * 30;
-        minuteRad.value = (0, _shared.toNumber)(formatMinute) * 6;
-        secondRad.value = (0, _shared.toNumber)(formatSecond) * 6;
-        time.value = getTime(value);
-
-        if (props.format !== '24hr') {
-          ampm.value = ("" + hour).padStart(2, '0') === formatHour24 && _props.hours24.includes(formatHour24) ? 'pm' : 'am';
-        }
-
-        isInner.value = props.format === '24hr' && _props.hours24.includes(formatHour24);
-      }
-    }, {
-      immediate: true
-    });
-    return {
-      getRad,
-      time,
-      container,
-      inner,
-      picker,
-      isInner,
-      type,
-      ampm,
-      isPreventNextUpdate,
-      moveHand,
-      checkPanel,
-      checkAmpm,
-      end,
-      update,
-      changePreventUpdate
-    };
-  }
-
-});
-
-exports.default = _default;