@bitrix24/b24ui-nuxt 0.5.10 → 0.5.11

package/dist/runtime/components/Countdown.vue

@@ -1,205 +1,345 @@
-<script>
-import _appConfig from "#build/app.config";
-import theme from "#build/b24ui/countdown";
-import { tv } from "../utils/tv";
-const appConfigCountdown = _appConfig;
-const countdown = tv({ extend: tv(theme), ...appConfigCountdown.b24ui?.countdown || {} });
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/countdown'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { tv } from '../utils/tv'
+import type { AvatarProps } from '../types'
+
+const appConfigCountdown = _appConfig as AppConfig & { b24ui: { countdown: Partial<typeof theme> } }
+
+const countdown = tv({ extend: tv(theme), ...(appConfigCountdown.b24ui?.countdown || {}) })
+
+type CountdownVariants = VariantProps<typeof countdown>
+
+export interface CountdownData {
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+  totalDays: number
+  totalHours: number
+  totalMinutes: number
+  totalSeconds: number
+  totalMilliseconds: number
+}
+
+export interface CountdownProps extends Omit<UseComponentIconsProps, 'loading' | 'trailing' | 'trailingIcon'> {
+  /**
+   * The element or component this component should render as
+   * @defaultValue 'span'
+   */
+  as?: any
+  /**
+   * @defaultValue 'md'
+   */
+  size?: CountdownVariants['size']
+  /**
+   * Emits the countdown events
+   * @defaultValue true
+   */
+  emitEvents?: boolean
+  /**
+   * Number of seconds to countdown
+   * @defaultValue 0
+   */
+  seconds?: number | string
+  /**
+   * Should seconds be divided into minutes?
+   * @defaultValue true
+   */
+  showMinutes?: boolean
+  /**
+   * Shows a `Circle` around the countdown
+   * @defaultValue false
+   */
+  useCircle?: boolean
+  /**
+   * The interval time (in milliseconds) of the countdown progress
+   * @defaultValue 1000
+   */
+  interval?: number
+  /**
+   * Starts the countdown automatically when initialized
+   * @defaultValue true
+   */
+  needStartImmediately?: boolean
+  /**
+   * Generate the current time of a specific time zone
+   * @defaultValue Date.now()
+   */
+  now?: () => number
+  class?: any
+  b24ui?: Partial<typeof countdown.slots>
+}
+
+export interface CountdownEmits {
+  (e: 'start' | 'end' | 'abort'): void
+  (e: 'progress', payload: CountdownData): void
+}
+
+export interface CountdownSlots {
+  leading(props?: {}): any
+  default(props: CountdownData & { formatTime: string }): any
+}
 </script>
 
-<script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
-import { useComponentIcons } from "../composables/useComponentIcons";
-const MILLISECONDS_SECOND = 1e3;
-const MILLISECONDS_MINUTE = 60 * MILLISECONDS_SECOND;
-const MILLISECONDS_HOUR = 60 * MILLISECONDS_MINUTE;
-const MILLISECONDS_DAY = 24 * MILLISECONDS_HOUR;
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  as: {
-    type: null,
-    required: false,
-    default: "span"
-  },
-  size: {
-    type: null,
-    required: false
-  },
-  emitEvents: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  seconds: {
-    type: [Number, String],
-    required: false,
-    default: 0
-  },
-  showMinutes: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  useCircle: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  interval: {
-    type: Number,
-    required: false,
-    default: 1e3
-  },
-  needStartImmediately: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  now: {
-    type: Function,
-    required: false,
-    default: () => Date.now()
-  },
-  class: {
-    type: null,
-    required: false
-  },
-  b24ui: {
-    type: Object,
-    required: false
-  },
-  icon: {
-    type: [Function, Object],
-    required: false
-  },
-  avatar: {
-    type: Object,
-    required: false
-  }
-});
-const emits = defineEmits(["start", "end", "abort", "progress"]);
-defineSlots();
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { Primitive } from 'reka-ui'
+import B24Avatar from './Avatar.vue'
+
+const MILLISECONDS_SECOND = 1000
+const MILLISECONDS_MINUTE = 60 * MILLISECONDS_SECOND
+const MILLISECONDS_HOUR = 60 * MILLISECONDS_MINUTE
+const MILLISECONDS_DAY = 24 * MILLISECONDS_HOUR
+
+defineOptions({ inheritAttrs: false })
+
+// region data ////
+
+const props = withDefaults(defineProps<CountdownProps>(), {
+  as: 'span',
+  needStartImmediately: true,
+  emitEvents: true,
+  interval: 1000,
+  now: () => Date.now(),
+  seconds: 0,
+  showMinutes: true,
+  useCircle: false
+})
+
+const emits = defineEmits<CountdownEmits>()
+defineSlots<CountdownSlots>()
+
 const { isLeading, leadingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: false }))
-);
+)
+
 const b24ui = computed(() => countdown({
   size: props.size,
   leading: Boolean(isLeading.value),
   useCircle: Boolean(props.useCircle)
-}));
-const counting = ref(false);
-const endTime = ref(0);
-const totalMilliseconds = ref(0);
-const requestId = ref(0);
+}))
+
+/**
+ * It is counting down.
+ */
+const counting = ref<boolean>(false)
+/**
+ * The absolute end time.
+ */
+const endTime = ref<number>(0)
+/**
+ * The remaining milliseconds.
+ */
+const totalMilliseconds = ref<number>(0)
+/**
+ * The request ID of the requestAnimationFrame.
+ */
+const requestId = ref<number>(0)
+// endregion ////
+
+// region events ////
 onMounted(() => {
-  document.addEventListener("visibilitychange", handleVisibilityChange.bind(this));
-});
+  document.addEventListener('visibilitychange', handleVisibilityChange.bind(this))
+})
+
 onBeforeUnmount(() => {
-  document.removeEventListener("visibilitychange", handleVisibilityChange.bind(this));
-  pause();
-});
+  document.removeEventListener('visibilitychange', handleVisibilityChange.bind(this))
+  pause()
+})
+// endregion ////
+
+// region watch ////
+/**
+ * Update the countdown when props changed.
+ */
 watch(
   () => props,
   () => {
-    totalMilliseconds.value = Number(props.seconds) * 1e3;
-    endTime.value = props.now() + Number(props.seconds) * 1e3;
+    totalMilliseconds.value = Number(props.seconds) * 1000
+    endTime.value = props.now() + Number(props.seconds) * 1000
+
     if (props.needStartImmediately) {
-      start();
+      start()
     }
   },
   {
     deep: true,
     immediate: true
   }
-);
-const days = computed(() => {
-  return Math.floor(totalMilliseconds.value / MILLISECONDS_DAY);
-});
-const hours = computed(() => {
-  return Math.floor(totalMilliseconds.value % MILLISECONDS_DAY / MILLISECONDS_HOUR);
-});
-const minutes = computed(() => {
-  return Math.floor(totalMilliseconds.value % MILLISECONDS_HOUR / MILLISECONDS_MINUTE);
-});
-const secondsValue = computed(() => {
-  return Math.floor(totalMilliseconds.value % MILLISECONDS_MINUTE / MILLISECONDS_SECOND);
-});
-const milliseconds = computed(() => {
-  return Math.floor(totalMilliseconds.value % MILLISECONDS_SECOND);
-});
-const totalDays = computed(() => {
-  return days.value;
-});
-const totalHours = computed(() => {
-  return Math.floor(totalMilliseconds.value / MILLISECONDS_HOUR);
-});
-const totalMinutes = computed(() => {
-  return Math.floor(totalMilliseconds.value / MILLISECONDS_MINUTE);
-});
-const totalSeconds = computed(() => {
-  return Math.floor(totalMilliseconds.value / MILLISECONDS_SECOND);
-});
-const formatTime = computed(() => {
+)
+// endregion ////
+
+// region computed ////
+/**
+ * Remaining days.
+ */
+const days = computed((): number => {
+  return Math.floor(totalMilliseconds.value / MILLISECONDS_DAY)
+})
+
+/**
+ * Remaining hours.
+ */
+const hours = computed((): number => {
+  return Math.floor((totalMilliseconds.value % MILLISECONDS_DAY) / MILLISECONDS_HOUR)
+})
+
+/**
+ * Remaining minutes.
+ */
+const minutes = computed((): number => {
+  return Math.floor((totalMilliseconds.value % MILLISECONDS_HOUR) / MILLISECONDS_MINUTE)
+})
+
+/**
+ * Remaining seconds.
+ */
+const secondsValue = computed((): number => {
+  return Math.floor((totalMilliseconds.value % MILLISECONDS_MINUTE) / MILLISECONDS_SECOND)
+})
+
+/**
+ * Remaining milliseconds.
+ */
+const milliseconds = computed((): number => {
+  return Math.floor(totalMilliseconds.value % MILLISECONDS_SECOND)
+})
+
+/**
+ * Total remaining days.
+ */
+const totalDays = computed((): number => {
+  return days.value
+})
+
+/**
+ * Total remaining hours.
+ */
+const totalHours = computed((): number => {
+  return Math.floor(totalMilliseconds.value / MILLISECONDS_HOUR)
+})
+
+/**
+ * Total remaining minutes.
+ */
+const totalMinutes = computed((): number => {
+  return Math.floor(totalMilliseconds.value / MILLISECONDS_MINUTE)
+})
+
+/**
+ * Total remaining seconds.
+ */
+const totalSeconds = computed((): number => {
+  return Math.floor(totalMilliseconds.value / MILLISECONDS_SECOND)
+})
+
+const formatTime = computed((): string => {
   if (props.showMinutes && !props.useCircle) {
-    return `${totalMinutes.value < 10 ? "0" : ""}${totalMinutes.value}:${secondsValue.value < 10 ? "0" : ""}${secondsValue.value}`;
+    return `${totalMinutes.value < 10 ? '0' : ''}${totalMinutes.value}:${secondsValue.value < 10 ? '0' : ''}${secondsValue.value}`
   } else if (props.useCircle) {
-    return `:${totalSeconds.value}`;
+    return `:${totalSeconds.value}`
   }
-  return String(totalSeconds.value);
-});
-function start() {
+
+  return String(totalSeconds.value)
+})
+// endregion ////
+
+// region actions ////
+/**
+ * Starts to countdown.
+ */
+function start(): void {
   if (counting.value) {
-    return;
+    return
   }
-  counting.value = true;
+
+  counting.value = true
+
   if (!props.needStartImmediately) {
-    totalMilliseconds.value = Number(props.seconds) * 1e3;
-    endTime.value = props.now() + Number(props.seconds) * 1e3;
+    totalMilliseconds.value = Number(props.seconds) * 1000
+    endTime.value = props.now() + Number(props.seconds) * 1000
   }
+
   if (props.emitEvents) {
-    emits("start");
+    emits('start')
   }
-  if (document?.visibilityState === "visible") {
-    continueProcess();
+
+  if (document?.visibilityState === 'visible') {
+    continueProcess()
   }
 }
-function continueProcess() {
+
+/**
+ * Continues the countdown.
+ */
+function continueProcess(): void {
   if (!counting.value) {
-    return;
+    return
   }
-  const delay = Math.min(totalMilliseconds.value, props.interval);
+
+  const delay = Math.min(totalMilliseconds.value, props.interval)
+
   if (delay > 0) {
-    let init;
-    let prev;
-    const step = (now) => {
+    let init: number
+    let prev: number
+    const step = (now: number) => {
       if (!init) {
-        init = now;
+        init = now
       }
+
       if (!prev) {
-        prev = now;
+        prev = now
       }
-      const range = now - init;
-      if (range >= delay || range + (now - prev) / 2 >= delay) {
-        progress();
+
+      const range = now - init
+
+      if (
+        range >= delay
+        // Avoid losing time about one second per minute (now - prev ≈ 16ms)
+        || range + ((now - prev) / 2) >= delay
+      ) {
+        progress()
       } else {
-        requestId.value = requestAnimationFrame(step);
+        requestId.value = requestAnimationFrame(step)
       }
-      prev = now;
-    };
-    requestId.value = requestAnimationFrame(step);
+
+      prev = now
+    }
+
+    requestId.value = requestAnimationFrame(step)
   } else {
-    stop();
+    stop()
   }
 }
-function pause() {
-  cancelAnimationFrame(requestId.value);
+
+/**
+ * Pauses the countdown.
+ */
+function pause(): void {
+  cancelAnimationFrame(requestId.value)
 }
-function progress() {
+
+/**
+ * Progresses to countdown.
+ */
+function progress(): void {
   if (!counting.value) {
-    return;
+    return
   }
-  update();
+
+  update()
+
   if (props.emitEvents && totalMilliseconds.value > 0) {
-    emits("progress", {
+    /**
+     * Countdown progress event.
+     */
+    emits('progress', {
       days: days.value,
       hours: hours.value,
       minutes: minutes.value,
@@ -210,74 +350,114 @@ function progress() {
       totalMinutes: totalMinutes.value,
       totalSeconds: totalSeconds.value,
       totalMilliseconds: totalMilliseconds.value
-    });
+    })
   }
-  continueProcess();
+
+  continueProcess()
 }
-function abort() {
+
+/**
+ * Aborts the countdown.
+ */
+function abort(): void {
   if (!counting.value) {
-    return;
+    return
   }
-  pause();
-  counting.value = false;
+
+  pause()
+  counting.value = false
+
   if (props.emitEvents) {
-    emits("abort");
+    /**
+     * Countdown abort event.
+     */
+    emits('abort')
   }
 }
-function stop() {
+
+/**
+ * Stop the countdown.
+ */
+function stop(): void {
   if (!counting.value) {
-    return;
+    return
   }
-  pause();
-  totalMilliseconds.value = 0;
-  counting.value = false;
+
+  pause()
+  totalMilliseconds.value = 0
+  counting.value = false
+
   if (props.emitEvents) {
-    emits("end");
+    /**
+     * Countdown end event.
+     */
+    emits('end')
   }
 }
-function update() {
+
+/**
+ * Updates the count.
+ */
+function update(): void {
   if (counting.value) {
-    totalMilliseconds.value = Math.max(0, endTime.value - props.now());
+    totalMilliseconds.value = Math.max(0, endTime.value - props.now())
   }
 }
-function restart() {
-  pause();
-  totalMilliseconds.value = Number(props.seconds) * 1e3;
-  endTime.value = props.now() + Number(props.seconds) * 1e3;
-  counting.value = false;
-  start();
+
+/**
+ * Restarts the count.
+ */
+function restart(): void {
+  pause()
+  totalMilliseconds.value = Number(props.seconds) * 1000
+  endTime.value = props.now() + Number(props.seconds) * 1000
+  counting.value = false
+  start()
 }
-function handleVisibilityChange() {
+
+/**
+ * Visibility change event handler.
+ */
+function handleVisibilityChange(): void {
   switch (document?.visibilityState) {
-    case "visible":
-      update();
-      continueProcess();
-      break;
-    case "hidden":
-      pause();
-      break;
+    case 'visible':
+      update()
+      continueProcess()
+      break
+
+    case 'hidden':
+      pause()
+      break
   }
 }
-const fullDashArray = computed(() => {
-  const fullDashArray2 = 283;
-  const calculateTimeFraction = () => {
+// endregion ////
+
+// region Round ////
+const fullDashArray = computed((): string => {
+  const fullDashArray = 283
+
+  const calculateTimeFraction = (): number => {
     if (Number(props.seconds) < 0) {
-      return 1;
+      return 1
     }
-    const rawTimeFraction = totalSeconds.value / Number(props.seconds);
-    return rawTimeFraction - 1 / Number(props.seconds) * (1 - rawTimeFraction);
-  };
+
+    const rawTimeFraction = totalSeconds.value / Number(props.seconds)
+    return rawTimeFraction - (1 / Number(props.seconds)) * (1 - rawTimeFraction)
+  }
+
   return [
-    (calculateTimeFraction() * fullDashArray2).toFixed(0),
-    fullDashArray2
-  ].join(" ");
-});
+    (calculateTimeFraction() * fullDashArray).toFixed(0),
+    fullDashArray
+  ].join(' ')
+})
+// endregion ////
+
 defineExpose({
   start,
   abort,
   stop,
   restart
-});
+})
 </script>
 
 <template>
@@ -311,12 +491,12 @@ defineExpose({
     <slot name="leading">
       <Component
         :is="leadingIconName"
-        v-if="isLeading && typeof leadingIconName !== 'undefined'"
+        v-if="isLeading && (typeof leadingIconName !== 'undefined')"
         :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
       />
       <B24Avatar
         v-else-if="!!avatar"
-        :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+        :size="((props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
         v-bind="avatar"
         :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
       />