@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/time-picker/TimePicker.js

@@ -0,0 +1,409 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _esm = _interopRequireDefault(require("dayjs/esm"));
+
+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 }; }
+
+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: (0, _esm.default)().hour(hour).format(hourFormat),
+        minute: (0, _esm.default)().minute(minute).format('mm'),
+        second: (0, _esm.default)().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 = (0, _esm.default)().hour(hour).format('hh');
+        var formatHour24 = (0, _esm.default)().hour(hour).format('HH');
+        var formatMinute = (0, _esm.default)().minute(minute).format('mm');
+        var formatSecond = (0, _esm.default)().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;