@rotki/ui-library 2.8.1 → 2.8.2

package/dist/components/time-picker/RuiTimePicker.vue2.js

@@ -0,0 +1,414 @@
+import { defineComponent, mergeModels, useModel, ref, useTemplateRef, computed, onMounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, toDisplayString, normalizeStyle, Fragment, renderList, nextTick } from "vue";
+import { TimeAccuracy } from "../../consts/time-accuracy.js";
+import { assert } from "../../utils/assert.js";
+import { isDefined } from "@vueuse/core";
+import { get, set } from "@vueuse/shared";
+const _hoisted_1 = { class: "flex justify-center items-center gap-1" };
+const _hoisted_2 = {
+  key: 0,
+  class: "text-2xl font-semibold"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "text-lg font-semibold"
+};
+const _hoisted_4 = { class: "text-xl" };
+const _hoisted_5 = ["onClick"];
+const FULL_CIRCLE = 360;
+const TWELVE_HOURS = 12;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RuiTimePicker",
+  props: /* @__PURE__ */ mergeModels({
+    accuracy: { default: TimeAccuracy.MINUTE },
+    borderless: { type: Boolean, default: false }
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {},
+    "hour": {},
+    "hourModifiers": {},
+    "minute": {},
+    "minuteModifiers": {},
+    "second": {},
+    "secondModifiers": {},
+    "millisecond": {},
+    "millisecondModifiers": {},
+    "selection": { default: "hour" },
+    "selectionModifiers": {}
+  }),
+  emits: ["update:modelValue", "update:hour", "update:minute", "update:second", "update:millisecond", "update:selection"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    const selectedHour = useModel(__props, "hour");
+    const selectedMinute = useModel(__props, "minute");
+    const selectedSecond = useModel(__props, "second");
+    const selectedMillisecond = useModel(__props, "millisecond");
+    const editMode = useModel(__props, "selection");
+    const props = __props;
+    const totalItemsPerMode = {
+      hour: 12,
+      minute: 60,
+      second: 60,
+      millisecond: 1e3
+    };
+    const intervals = {
+      hour: 1,
+      minute: 5,
+      second: 5,
+      millisecond: 100
+    };
+    const isDragging = ref(false);
+    const clockFace = useTemplateRef("clockFace");
+    const showSecond = computed(() => props.accuracy === TimeAccuracy.SECOND || props.accuracy === TimeAccuracy.MILLISECOND);
+    const showMillisecond = computed(() => props.accuracy === TimeAccuracy.MILLISECOND);
+    const period = computed(() => isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? "PM" : "AM");
+    const displayHour = computed(() => {
+      if (!isDefined(selectedHour)) {
+        return void 0;
+      }
+      const hourValue = get(selectedHour);
+      const hour = hourValue % TWELVE_HOURS;
+      return hour === 0 ? TWELVE_HOURS : hour;
+    });
+    const editedValue = computed(() => {
+      const mode = get(editMode);
+      if (mode === "hour") {
+        return get(displayHour);
+      } else if (mode === "minute") {
+        return get(selectedMinute);
+      } else if (mode === "second") {
+        return get(selectedSecond);
+      } else {
+        return get(selectedMillisecond);
+      }
+    });
+    const displayClockHandCircle = computed(() => {
+      const mode = get(editMode);
+      if (mode === "hour" || !isDefined(editedValue)) {
+        return false;
+      } else {
+        const interval = intervals[mode];
+        const value = get(editedValue);
+        return value % interval !== 0;
+      }
+    });
+    const dotStyle = computed(() => ({
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    }));
+    const clockHandStyle = computed(() => {
+      if (!isDefined(editedValue)) {
+        return {};
+      }
+      const currentValue = get(editedValue);
+      const totalItems = totalItemsPerMode[get(editMode)];
+      const angle = currentValue * (FULL_CIRCLE / totalItems);
+      return {
+        height: "36%",
+        top: "14%",
+        left: "50%",
+        transformOrigin: "bottom center",
+        transform: `translateX(-50%) rotate(${angle}deg)`,
+        zIndex: 10
+      };
+    });
+    const clockHandCircleStyle = computed(() => {
+      if (!isDefined(editedValue)) {
+        return {};
+      }
+      const radius = "38%";
+      const currentValue = get(editedValue);
+      const totalItems = totalItemsPerMode[get(editMode)];
+      const angle = currentValue * (FULL_CIRCLE / totalItems);
+      const radians = angle * Math.PI / 180;
+      const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);
+      const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);
+      return {
+        position: "absolute",
+        top: `${y}%`,
+        left: `${x}%`,
+        width: "10px",
+        height: "10px",
+        borderRadius: "50%",
+        transform: "translate(-50%, -50%)",
+        zIndex: 11
+      };
+    });
+    const clockNumbers = computed(() => {
+      const mode = get(editMode);
+      const interval = intervals[mode];
+      const total = totalItemsPerMode[mode];
+      const numbers = generateNumbers(total, interval);
+      if (mode === "hour") {
+        numbers[0] = 12;
+      }
+      return numbers;
+    });
+    function getModelHours() {
+      return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : void 0;
+    }
+    function getModelMinutes() {
+      return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : void 0;
+    }
+    function getModelSeconds() {
+      const acceptedAccuracy = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];
+      return acceptedAccuracy.includes(props.accuracy) && isDefined(modelValue) ? new Date(get(modelValue)).getSeconds() : void 0;
+    }
+    function getModelMilliseconds() {
+      return props.accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue) ? new Date(get(modelValue)).getMilliseconds() : void 0;
+    }
+    function generateNumbers(total, interval) {
+      const numbers = [];
+      for (let i = 0; i < total; i += interval) {
+        numbers.push(i);
+      }
+      return numbers;
+    }
+    function formatValue(value, padding = 2) {
+      return value !== void 0 ? value.toString().padStart(padding, "0") : "-".repeat(padding);
+    }
+    function numberStyle(num) {
+      const radius = "38%";
+      const totalItems = totalItemsPerMode[get(editMode)];
+      const angle = num * (FULL_CIRCLE / totalItems) - 90;
+      const radians = angle * Math.PI / 180;
+      const x = 50 + parseFloat(radius) * Math.cos(radians);
+      const y = 50 + parseFloat(radius) * Math.sin(radians);
+      return {
+        top: `${y}%`,
+        left: `${x}%`,
+        transform: "translate(-50%, -50%)"
+      };
+    }
+    function isSelectedNumber(num) {
+      if (!isDefined(editedValue)) {
+        return false;
+      }
+      const mode = get(editMode);
+      if (mode === "hour") {
+        return get(displayHour) === num;
+      } else {
+        const value = get(editedValue);
+        const interval = intervals[mode];
+        return value === num || value % interval === 0 && value === num;
+      }
+    }
+    function toggleAmPm() {
+      if (!isDefined(selectedHour)) {
+        return;
+      }
+      if (get(selectedHour) < TWELVE_HOURS) {
+        set(selectedHour, get(selectedHour) + TWELVE_HOURS);
+      } else {
+        set(selectedHour, get(selectedHour) - TWELVE_HOURS);
+      }
+      updateModelValue();
+    }
+    function startDrag(event) {
+      event.preventDefault();
+      set(isDragging, true);
+      const handleMove = (moveEvent) => {
+        if (!get(isDragging) || !isDefined(clockFace))
+          return;
+        const rect = get(clockFace).getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        let clientX, clientY;
+        if ("touches" in moveEvent) {
+          const touch = moveEvent.touches[0];
+          assert(touch);
+          clientX = touch.clientX;
+          clientY = touch.clientY;
+        } else {
+          clientX = moveEvent.clientX;
+          clientY = moveEvent.clientY;
+        }
+        const x = clientX - centerX;
+        const y = clientY - centerY;
+        let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;
+        if (angle < 0)
+          angle += FULL_CIRCLE;
+        const mode = get(editMode);
+        const unit = Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];
+        if (mode === "hour") {
+          let hour;
+          hour = unit;
+          if (hour === 0)
+            hour = TWELVE_HOURS;
+          if (get(period) === "PM" && hour < TWELVE_HOURS) {
+            hour += TWELVE_HOURS;
+          } else if (get(period) === "AM" && hour === TWELVE_HOURS) {
+            hour = 0;
+          }
+          set(selectedHour, hour);
+        } else if (mode === "minute") {
+          set(selectedMinute, unit);
+        } else if (mode === "second") {
+          set(selectedSecond, unit);
+        } else {
+          set(selectedMillisecond, unit);
+        }
+        updateModelValue();
+      };
+      const handleEnd = () => {
+        set(isDragging, false);
+        document.removeEventListener("mousemove", handleMove);
+        document.removeEventListener("touchmove", handleMove);
+        document.removeEventListener("mouseup", handleEnd);
+        document.removeEventListener("touchend", handleEnd);
+        if (get(editMode) === "hour") {
+          set(editMode, "minute");
+        } else if (get(showSecond) && get(editMode) === "minute") {
+          set(editMode, "second");
+        } else if (get(showMillisecond) && get(editMode) === "second") {
+          set(editMode, "millisecond");
+        }
+      };
+      document.addEventListener("mousemove", handleMove);
+      document.addEventListener("touchmove", handleMove);
+      document.addEventListener("mouseup", handleEnd);
+      document.addEventListener("touchend", handleEnd);
+      handleMove(event);
+    }
+    function selectByClick(num) {
+      const mode = get(editMode);
+      if (mode === "hour") {
+        let newHour = num;
+        if (get(period) === "PM" && newHour < TWELVE_HOURS) {
+          newHour += TWELVE_HOURS;
+        }
+        set(selectedHour, newHour);
+        set(editMode, "minute");
+      } else if (mode === "minute") {
+        set(selectedMinute, num);
+        if (get(showSecond))
+          set(editMode, "second");
+      } else if (mode === "second") {
+        set(selectedSecond, num);
+        if (get(showMillisecond)) {
+          set(editMode, "millisecond");
+        }
+      } else if (mode === "millisecond") {
+        set(selectedMillisecond, num);
+      }
+      updateModelValue();
+    }
+    function updateModelValue() {
+      if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {
+        return;
+      }
+      nextTick(() => {
+        const date = isDefined(modelValue) ? new Date(get(modelValue)) : /* @__PURE__ */ new Date();
+        date.setHours(get(selectedHour));
+        date.setMinutes(get(selectedMinute));
+        date.setSeconds(get(selectedSecond) ?? 0);
+        date.setMilliseconds(get(selectedMillisecond) ?? 0);
+        set(modelValue, date);
+      });
+    }
+    onMounted(() => {
+      set(selectedHour, getModelHours());
+      set(selectedMinute, getModelMinutes());
+      set(selectedSecond, getModelSeconds());
+      set(selectedMillisecond, getModelMilliseconds());
+      set(editMode, "hour");
+    });
+    watch(modelValue, () => {
+      set(selectedHour, getModelHours());
+      set(selectedMinute, getModelMinutes());
+      set(selectedSecond, getModelSeconds());
+      set(selectedMillisecond, getModelMilliseconds());
+    }, { deep: true });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({
+          [_ctx.$style["rui-timepicker"]]: true,
+          [_ctx.$style.bordered]: !__props.borderless
+        })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["rui-digital-display"])
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", {
+              class: normalizeClass({
+                [_ctx.$style["rui-digit"]]: true,
+                [_ctx.$style.active]: editMode.value === "hour"
+              }),
+              onClick: _cache[0] || (_cache[0] = ($event) => editMode.value = "hour")
+            }, toDisplayString(formatValue(displayHour.value)), 3),
+            _cache[7] || (_cache[7] = createElementVNode("div", { class: "text-2xl font-semibold" }, " : ", -1)),
+            createElementVNode("div", {
+              class: normalizeClass({
+                [_ctx.$style["rui-digit"]]: true,
+                [_ctx.$style.active]: editMode.value === "minute"
+              }),
+              onClick: _cache[1] || (_cache[1] = ($event) => editMode.value = "minute")
+            }, toDisplayString(formatValue(selectedMinute.value)), 3),
+            showSecond.value ? (openBlock(), createElementBlock("div", _hoisted_2, " : ")) : createCommentVNode("", true),
+            showSecond.value ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass({
+                [_ctx.$style["rui-digit"]]: true,
+                [_ctx.$style.active]: editMode.value === "second"
+              }),
+              onClick: _cache[2] || (_cache[2] = ($event) => editMode.value = "second")
+            }, toDisplayString(formatValue(selectedSecond.value)), 3)) : createCommentVNode("", true),
+            showMillisecond.value ? (openBlock(), createElementBlock("div", _hoisted_3, " . ")) : createCommentVNode("", true),
+            showMillisecond.value ? (openBlock(), createElementBlock("div", {
+              key: 3,
+              class: normalizeClass(["!text-lg", {
+                [_ctx.$style.active]: editMode.value === "millisecond",
+                [_ctx.$style["rui-digit"]]: true
+              }]),
+              onClick: _cache[3] || (_cache[3] = ($event) => editMode.value = "millisecond")
+            }, toDisplayString(formatValue(selectedMillisecond.value, 3)), 3)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", {
+                class: "rui-time-picker-period cursor-pointer",
+                onClick: _cache[4] || (_cache[4] = ($event) => toggleAmPm())
+              }, toDisplayString(period.value), 1)
+            ])
+          ])
+        ], 2),
+        createElementVNode("div", {
+          ref_key: "clockFace",
+          ref: clockFace,
+          class: normalizeClass(_ctx.$style["rui-clock-face"]),
+          onMousedown: _cache[5] || (_cache[5] = ($event) => startDrag($event)),
+          onTouchstart: _cache[6] || (_cache[6] = ($event) => startDrag($event))
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["rui-center-dot"]),
+            style: normalizeStyle(dotStyle.value)
+          }, null, 6),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["rui-clock-hand"]),
+            style: normalizeStyle(clockHandStyle.value)
+          }, null, 6),
+          displayClockHandCircle.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style["rui-clock-hand-circle"]),
+            style: normalizeStyle(clockHandCircleStyle.value)
+          }, null, 6)) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(clockNumbers.value, (num) => {
+            return openBlock(), createElementBlock("div", {
+              key: `num-${num}`,
+              class: normalizeClass({
+                [_ctx.$style["rui-clock-number"]]: true,
+                [_ctx.$style["is-selected"]]: isSelectedNumber(num),
+                [`rui-${editMode.value}-${num.toString().padStart(2, "0")}`]: true
+              }),
+              style: normalizeStyle(numberStyle(num)),
+              onClick: ($event) => selectByClick(num)
+            }, toDisplayString(num), 15, _hoisted_5);
+          }), 128))
+        ], 34)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiTimePicker.vue2.js.map

package/dist/components/time-picker/RuiTimePicker.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTimePicker.vue2.js","sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';\n\nexport interface RuiTimePickerProps {\n  accuracy?: TimeAccuracy;\n  borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date | undefined>({ required: true });\n\nconst selectedHour = defineModel<number | undefined>('hour');\nconst selectedMinute = defineModel<number | undefined>('minute');\nconst selectedSecond = defineModel<number | undefined>('second');\nconst selectedMillisecond = defineModel<number | undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst props = withDefaults(defineProps<RuiTimePickerProps>(), {\n  accuracy: TimeAccuracy.MINUTE,\n  borderless: false,\n});\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n  hour: 12,\n  minute: 60,\n  second: 60,\n  millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n  hour: 1,\n  minute: 5,\n  second: 5,\n  millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(() => props.accuracy === TimeAccuracy.SECOND || props.accuracy === TimeAccuracy.MILLISECOND);\nconst showMillisecond = computed<boolean>(() => props.accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() => isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM');\n\nconst displayHour = computed<number | undefined>(() => {\n  if (!isDefined(selectedHour)) {\n    return undefined;\n  }\n  const hourValue = get(selectedHour);\n  const hour = hourValue % TWELVE_HOURS;\n  return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number | undefined>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour);\n  }\n  else if (mode === 'minute') {\n    return get(selectedMinute);\n  }\n  else if (mode === 'second') {\n    return get(selectedSecond);\n  }\n  else {\n    return get(selectedMillisecond);\n  }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour' || !isDefined(editedValue)) {\n    return false;\n  }\n  else {\n    const interval = intervals[mode];\n    const value = get(editedValue);\n    return value % interval !== 0;\n  }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = (currentValue * (FULL_CIRCLE / totalItems));\n\n  return {\n    height: '36%',\n    top: '14%',\n    left: '50%',\n    transformOrigin: 'bottom center',\n    transform: `translateX(-50%) rotate(${angle}deg)`,\n    zIndex: 10,\n  };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const radius = '38%';\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = (currentValue * (FULL_CIRCLE / totalItems));\n\n  const radians = (angle * Math.PI) / 180;\n\n  const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n  const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n  return {\n    position: 'absolute',\n    top: `${y}%`,\n    left: `${x}%`,\n    width: '10px',\n    height: '10px',\n    borderRadius: '50%',\n    transform: 'translate(-50%, -50%)',\n    zIndex: 11,\n  };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n  const mode = get(editMode);\n  const interval = intervals[mode];\n  const total = totalItemsPerMode[mode];\n  const numbers = generateNumbers(total, interval);\n  if (mode === 'hour') {\n    numbers[0] = 12;\n  }\n  return numbers;\n});\n\nfunction getModelHours() {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes() {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds() {\n  const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n  return acceptedAccuracy.includes(props.accuracy) && isDefined(modelValue)\n    ? new Date(get(modelValue)).getSeconds()\n    : undefined;\n}\n\nfunction getModelMilliseconds() {\n  return props.accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n    ? new Date(get(modelValue)).getMilliseconds()\n    : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n  const numbers: number[] = [];\n  for (let i = 0; i < total; i += interval) {\n    numbers.push(i);\n  }\n  return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n  return value !== undefined\n    ? value.toString().padStart(padding, '0')\n    : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n  const radius = '38%';\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = (num * (FULL_CIRCLE / totalItems)) - 90;\n\n  const radians = (angle * Math.PI) / 180;\n  const x = 50 + parseFloat(radius) * Math.cos(radians);\n  const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n  return {\n    top: `${y}%`,\n    left: `${x}%`,\n    transform: 'translate(-50%, -50%)',\n  };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n  if (!isDefined(editedValue)) {\n    return false;\n  }\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour) === num;\n  }\n  else {\n    const value = get(editedValue);\n    const interval = intervals[mode];\n    return value === num || (value % interval === 0 && value === num);\n  }\n}\n\nfunction toggleAmPm() {\n  if (!isDefined(selectedHour)) {\n    return;\n  }\n  if (get(selectedHour) < TWELVE_HOURS) {\n    set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n  }\n  else {\n    set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n  }\n\n  updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent | TouchEvent) {\n  event.preventDefault();\n  set(isDragging, true);\n\n  const handleMove = (moveEvent: MouseEvent | TouchEvent) => {\n    if (!get(isDragging) || !isDefined(clockFace))\n      return;\n\n    const rect = get(clockFace).getBoundingClientRect();\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n\n    let clientX, clientY;\n\n    if ('touches' in moveEvent) {\n      const touch = moveEvent.touches[0];\n      assert(touch);\n      clientX = touch.clientX;\n      clientY = touch.clientY;\n    }\n    else {\n      clientX = moveEvent.clientX;\n      clientY = moveEvent.clientY;\n    }\n\n    const x = clientX - centerX;\n    const y = clientY - centerY;\n\n    let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n    if (angle < 0)\n      angle += FULL_CIRCLE;\n\n    const mode = get(editMode);\n    const unit = Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n    if (mode === 'hour') {\n      let hour;\n\n      hour = unit;\n      if (hour === 0)\n        hour = TWELVE_HOURS;\n\n      if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n        hour += TWELVE_HOURS;\n      }\n      else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n        hour = 0;\n      }\n\n      set(selectedHour, hour);\n    }\n    else if (mode === 'minute') {\n      set(selectedMinute, unit);\n    }\n    else if (mode === 'second') {\n      set(selectedSecond, unit);\n    }\n    else {\n      set(selectedMillisecond, unit);\n    }\n\n    updateModelValue();\n  };\n\n  const handleEnd = (): void => {\n    set(isDragging, false);\n    document.removeEventListener('mousemove', handleMove);\n    document.removeEventListener('touchmove', handleMove);\n    document.removeEventListener('mouseup', handleEnd);\n    document.removeEventListener('touchend', handleEnd);\n\n    if (get(editMode) === 'hour') {\n      set(editMode, 'minute');\n    }\n    else if (get(showSecond) && get(editMode) === 'minute') {\n      set(editMode, 'second');\n    }\n    else if (get(showMillisecond) && get(editMode) === 'second') {\n      set(editMode, 'millisecond');\n    }\n  };\n\n  document.addEventListener('mousemove', handleMove);\n  document.addEventListener('touchmove', handleMove);\n  document.addEventListener('mouseup', handleEnd);\n  document.addEventListener('touchend', handleEnd);\n\n  handleMove(event);\n}\n\nfunction selectByClick(num: number) {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    let newHour = num;\n\n    if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n      newHour += TWELVE_HOURS;\n    }\n\n    set(selectedHour, newHour);\n    set(editMode, 'minute');\n  }\n  else if (mode === 'minute') {\n    set(selectedMinute, num);\n    if (get(showSecond))\n      set(editMode, 'second');\n  }\n  else if (mode === 'second') {\n    set(selectedSecond, num);\n    if (get(showMillisecond)) {\n      set(editMode, 'millisecond');\n    }\n  }\n  else if (mode === 'millisecond') {\n    set(selectedMillisecond, num);\n  }\n\n  updateModelValue();\n}\n\nfunction updateModelValue() {\n  if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n    return;\n  }\n  nextTick(() => {\n    const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n    date.setHours(get(selectedHour));\n    date.setMinutes(get(selectedMinute));\n    date.setSeconds(get(selectedSecond) ?? 0);\n    date.setMilliseconds(get(selectedMillisecond) ?? 0);\n    set(modelValue, date);\n  });\n}\n\nonMounted(() => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n  set(editMode, 'hour');\n});\n\nwatch(modelValue, () => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n}, { deep: true });\n</script>\n\n<template>\n  <div\n    :class=\"{\n      [$style['rui-timepicker']]: true,\n      [$style.bordered]: !borderless,\n    }\"\n  >\n    <div :class=\"$style['rui-digital-display']\">\n      <div class=\"flex justify-center items-center gap-1\">\n        <div\n          :class=\"{\n            [$style['rui-digit']]: true,\n            [$style.active]: editMode === 'hour',\n          }\"\n          @click=\"editMode = 'hour'\"\n        >\n          {{ formatValue(displayHour) }}\n        </div>\n        <div class=\"text-2xl font-semibold\">\n          :\n        </div>\n        <div\n          :class=\"{\n            [$style['rui-digit']]: true,\n            [$style.active]: editMode === 'minute',\n          }\"\n          @click=\"editMode = 'minute'\"\n        >\n          {{ formatValue(selectedMinute) }}\n        </div>\n        <div\n          v-if=\"showSecond\"\n          class=\"text-2xl font-semibold\"\n        >\n          :\n        </div>\n        <div\n          v-if=\"showSecond\"\n          :class=\"{\n            [$style['rui-digit']]: true,\n            [$style.active]: editMode === 'second',\n          }\"\n          @click=\"editMode = 'second'\"\n        >\n          {{ formatValue(selectedSecond) }}\n        </div>\n\n        <div\n          v-if=\"showMillisecond\"\n          class=\"text-lg font-semibold\"\n        >\n          .\n        </div>\n\n        <div\n          v-if=\"showMillisecond\"\n          class=\"!text-lg\"\n          :class=\"{\n            [$style.active]: editMode === 'millisecond',\n            [$style['rui-digit']]: true,\n          }\"\n          @click=\"editMode = 'millisecond'\"\n        >\n          {{ formatValue(selectedMillisecond, 3) }}\n        </div>\n        <div class=\"text-xl\">\n          <div\n            class=\"rui-time-picker-period cursor-pointer\"\n            @click=\"toggleAmPm()\"\n          >\n            {{ period }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      ref=\"clockFace\"\n      :class=\"$style['rui-clock-face']\"\n      @mousedown=\"startDrag($event)\"\n      @touchstart=\"startDrag($event)\"\n    >\n      <div\n        :class=\"$style['rui-center-dot']\"\n        :style=\"dotStyle\"\n      />\n\n      <div\n        :class=\"$style['rui-clock-hand']\"\n        :style=\"clockHandStyle\"\n      />\n\n      <div\n        v-if=\"displayClockHandCircle\"\n        :class=\"$style['rui-clock-hand-circle']\"\n        :style=\"clockHandCircleStyle\"\n      />\n\n      <div\n        v-for=\"num in clockNumbers\"\n        :key=\"`num-${num}`\"\n        :class=\"{\n          [$style['rui-clock-number']]: true,\n          [$style['is-selected']]: isSelectedNumber(num),\n          [`rui-${editMode}-${num.toString().padStart(2, '0')}`]: true,\n        }\"\n        :style=\"numberStyle(num)\"\n        @click=\"selectByClick(num)\"\n      >\n        {{ num }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.rui-timepicker {\n  @apply bg-white overflow-hidden text-rui-text p-3;\n\n  &.bordered {\n    @apply rounded-md shadow-sm border border-rui-grey-200;\n  }\n}\n\n.rui-digital-display {\n  @apply mb-2 text-center;\n}\n\n.rui-digit {\n  @apply text-2xl font-semibold cursor-pointer;\n\n  &.active {\n    @apply text-rui-primary;\n  }\n}\n\n.rui-clock-face {\n  @apply relative rounded-full w-64 h-64 mx-auto border border-rui-grey-200;\n}\n\n.rui-center-dot {\n  @apply absolute rounded-full bg-rui-primary w-3 h-3;\n}\n\n.rui-clock-hand {\n  @apply absolute w-[1.5px] bg-rui-primary rounded-full;\n}\n\n.rui-clock-hand-circle {\n  @apply absolute border-2 border-rui-primary;\n}\n\n.rui-clock-number {\n  @apply absolute text-center text-sm font-medium w-8 h-8 flex items-center justify-center hover:bg-rui-primary-lighter cursor-pointer rounded-full;\n\n  &.is-selected {\n    @apply bg-rui-primary text-rui-dark-text dark:text-rui-light-text z-10 font-bold;\n  }\n}\n\n:global(.dark) {\n  .rui-timepicker {\n    @apply bg-rui-grey-900;\n\n    &.bordered {\n      @apply border-rui-grey-800;\n    }\n  }\n\n  .rui-clock-face {\n    @apply border-rui-grey-800;\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","$style","_createElementVNode","_toDisplayString","_Fragment","_renderList","_normalizeStyle"],"mappings":"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"}

package/dist/components/time-picker/RuiTimePicker.vue3.js

@@ -0,0 +1,21 @@
+const bordered = "_bordered_nsdj7_4";
+const active = "_active_nsdj7_15";
+const style0 = {
+  "rui-timepicker": "_rui-timepicker_nsdj7_1",
+  bordered,
+  "rui-digital-display": "_rui-digital-display_nsdj7_8",
+  "rui-digit": "_rui-digit_nsdj7_8",
+  active,
+  "rui-clock-face": "_rui-clock-face_nsdj7_19",
+  "rui-center-dot": "_rui-center-dot_nsdj7_23",
+  "rui-clock-hand": "_rui-clock-hand_nsdj7_27",
+  "rui-clock-hand-circle": "_rui-clock-hand-circle_nsdj7_31",
+  "rui-clock-number": "_rui-clock-number_nsdj7_35",
+  "is-selected": "_is-selected_nsdj7_38"
+};
+export {
+  active,
+  bordered,
+  style0 as default
+};
+//# sourceMappingURL=RuiTimePicker.vue3.js.map

package/dist/components/time-picker/RuiTimePicker.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTimePicker.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/composables/breakpoint.js

@@ -0,0 +1,49 @@
+import { useWindowSize, breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+import { camelCase } from "scule";
+import { assert } from "../utils/assert.js";
+import { computed } from "vue";
+import { get } from "@vueuse/shared";
+function useBreakpoint() {
+  const { width } = useWindowSize();
+  const breakpointList = {
+    xs: 0,
+    ...breakpointsTailwind
+  };
+  const breakpoints = useBreakpoints(breakpointList);
+  const getKeys = Object.keys;
+  const list = getKeys(breakpointList);
+  const rawSizes = list.map(
+    (breakpoint, index) => {
+      if (index < list.length - 1) {
+        const nextBreakpoint = list[index + 1];
+        assert(nextBreakpoint);
+        return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];
+      }
+      return [breakpoint, breakpoints[breakpoint]];
+    }
+  );
+  const sizes = rawSizes.map(([breakpoint, value]) => [
+    camelCase(`is_${breakpoint}`),
+    value
+  ]);
+  const sizesUp = list.map((breakpoint) => [
+    camelCase(`is_${breakpoint}_and_up`),
+    breakpoints.greaterOrEqual(breakpoint)
+  ]);
+  const sizesDown = list.map((breakpoint) => [
+    camelCase(`is_${breakpoint}_and_down`),
+    breakpoints.smaller(breakpoint)
+  ]);
+  const name = computed(() => rawSizes.find((item) => get(item[1]))?.[0] || "");
+  return {
+    ...Object.fromEntries(sizes),
+    ...Object.fromEntries(sizesUp),
+    ...Object.fromEntries(sizesDown),
+    name,
+    width
+  };
+}
+export {
+  useBreakpoint
+};
+//# sourceMappingURL=breakpoint.js.map

package/dist/composables/breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint.js","sources":["../../src/composables/breakpoint.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { breakpointsTailwind } from '@vueuse/core';\nimport { camelCase } from 'scule';\nimport { assert } from '@/utils/assert';\n\nexport function useBreakpoint() {\n  const { width } = useWindowSize();\n\n  const breakpointList = {\n    xs: 0,\n    ...breakpointsTailwind,\n  } as const;\n\n  type Breakpoint = keyof typeof breakpointList;\n\n  const breakpoints = useBreakpoints(breakpointList);\n\n  const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;\n\n  const list = getKeys(breakpointList);\n\n  const rawSizes: [Breakpoint, Ref<boolean>][] = list.map(\n    (breakpoint, index) => {\n      if (index < list.length - 1) {\n        const nextBreakpoint = list[index + 1];\n        assert(nextBreakpoint);\n        return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];\n      }\n      return [breakpoint, breakpoints[breakpoint]];\n    },\n  );\n\n  const sizes = rawSizes.map(([breakpoint, value]) => [\n    camelCase(`is_${breakpoint}`),\n    value,\n  ]);\n\n  const sizesUp = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_up`),\n    breakpoints.greaterOrEqual(breakpoint),\n  ]);\n\n  const sizesDown = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_down`),\n    breakpoints.smaller(breakpoint),\n  ]);\n\n  const name = computed(() => rawSizes.find(item => get(item[1]))?.[0] || '');\n\n  return {\n    ...Object.fromEntries(sizes),\n    ...Object.fromEntries(sizesUp),\n    ...Object.fromEntries(sizesDown),\n    name,\n    width,\n  };\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,gBAAgB;AAC9B,QAAM,EAAE,MAAA,IAAU,cAAA;AAElB,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA;AAKL,QAAM,cAAc,eAAe,cAAc;AAEjD,QAAM,UAAU,OAAO;AAEvB,QAAM,OAAO,QAAQ,cAAc;AAEnC,QAAM,WAAyC,KAAK;AAAA,IAClD,CAAC,YAAY,UAAU;AACrB,UAAI,QAAQ,KAAK,SAAS,GAAG;AAC3B,cAAM,iBAAiB,KAAK,QAAQ,CAAC;AACrC,eAAO,cAAc;AACrB,eAAO,CAAC,YAAY,YAAY,QAAQ,YAAY,cAAc,CAAC;AAAA,MACrE;AACA,aAAO,CAAC,YAAY,YAAY,UAAU,CAAC;AAAA,IAC7C;AAAA,EAAA;AAGF,QAAM,QAAQ,SAAS,IAAI,CAAC,CAAC,YAAY,KAAK,MAAM;AAAA,IAClD,UAAU,MAAM,UAAU,EAAE;AAAA,IAC5B;AAAA,EAAA,CACD;AAED,QAAM,UAAU,KAAK,IAAI,CAAA,eAAc;AAAA,IACrC,UAAU,MAAM,UAAU,SAAS;AAAA,IACnC,YAAY,eAAe,UAAU;AAAA,EAAA,CACtC;AAED,QAAM,YAAY,KAAK,IAAI,CAAA,eAAc;AAAA,IACvC,UAAU,MAAM,UAAU,WAAW;AAAA,IACrC,YAAY,QAAQ,UAAU;AAAA,EAAA,CAC/B;AAED,QAAM,OAAO,SAAS,MAAM,SAAS,KAAK,CAAA,SAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;AAE1E,SAAO;AAAA,IACL,GAAG,OAAO,YAAY,KAAK;AAAA,IAC3B,GAAG,OAAO,YAAY,OAAO;AAAA,IAC7B,GAAG,OAAO,YAAY,SAAS;AAAA,IAC/B;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/composables/defaults/table.js

@@ -0,0 +1,23 @@
+import { inject, ref } from "vue";
+const TableSymbol = Symbol.for("rui:table");
+function createTableDefaults(options) {
+  return {
+    globalItemsPerPage: false,
+    itemsPerPage: ref(10),
+    limits: [10, 25, 50, 100],
+    stickyOffset: ref(0),
+    ...options
+  };
+}
+function useTable() {
+  const options = inject(TableSymbol);
+  if (!options)
+    throw new Error("Could not find rui table options injection");
+  return options;
+}
+export {
+  TableSymbol,
+  createTableDefaults,
+  useTable
+};
+//# sourceMappingURL=table.js.map

package/dist/composables/defaults/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../../src/composables/defaults/table.ts"],"sourcesContent":["import type { InjectionKey, MaybeRef, Ref } from 'vue';\n\nexport interface TableOptions {\n  itemsPerPage: Ref<number>;\n  globalItemsPerPage: MaybeRef<boolean>;\n  limits: MaybeRef<number[]>;\n  stickyOffset: MaybeRef<number>;\n}\n\nexport const TableSymbol: InjectionKey<TableOptions> = Symbol.for('rui:table');\n\nexport function createTableDefaults(options?: Partial<TableOptions>): TableOptions {\n  return {\n    globalItemsPerPage: false,\n    itemsPerPage: ref(10),\n    limits: [10, 25, 50, 100],\n    stickyOffset: ref(0),\n    ...options,\n  };\n}\n\nexport function useTable() {\n  const options = inject(TableSymbol);\n\n  if (!options)\n    throw new Error('Could not find rui table options injection');\n\n  return options;\n}\n"],"names":[],"mappings":";AASO,MAAM,cAA0C,OAAO,IAAI,WAAW;AAEtE,SAAS,oBAAoB,SAA+C;AACjF,SAAO;AAAA,IACL,oBAAoB;AAAA,IACpB,cAAc,IAAI,EAAE;AAAA,IACpB,QAAQ,CAAC,IAAI,IAAI,IAAI,GAAG;AAAA,IACxB,cAAc,IAAI,CAAC;AAAA,IACnB,GAAG;AAAA,EAAA;AAEP;AAEO,SAAS,WAAW;AACzB,QAAM,UAAU,OAAO,WAAW;AAElC,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,4CAA4C;AAE9D,SAAO;AACT;"}