@bitrix24/b24ui-nuxt 0.5.11 → 0.6.0

package/dist/runtime/components/Countdown.vue

@@ -1,345 +1,160 @@
-<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>
+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>
 
-<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>()
-
+<script setup>
+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 = 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();
 const { isLeading, leadingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: false }))
-)
-
+);
 const b24ui = computed(() => countdown({
   size: props.size,
   leading: Boolean(isLeading.value),
   useCircle: Boolean(props.useCircle)
-}))
-
-/**
- * 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 ////
+}));
+const counting = ref(false);
+const endTime = ref(0);
+const totalMilliseconds = ref(0);
+const requestId = ref(0);
 onMounted(() => {
-  document.addEventListener('visibilitychange', handleVisibilityChange.bind(this))
-})
-
+  document.addEventListener("visibilitychange", handleVisibilityChange.bind(this));
+});
 onBeforeUnmount(() => {
-  document.removeEventListener('visibilitychange', handleVisibilityChange.bind(this))
-  pause()
-})
-// endregion ////
-
-// region watch ////
-/**
- * Update the countdown when props changed.
- */
+  document.removeEventListener("visibilitychange", handleVisibilityChange.bind(this));
+  pause();
+});
 watch(
   () => props,
   () => {
-    totalMilliseconds.value = Number(props.seconds) * 1000
-    endTime.value = props.now() + Number(props.seconds) * 1000
-
+    totalMilliseconds.value = Number(props.seconds) * 1e3;
+    endTime.value = props.now() + Number(props.seconds) * 1e3;
     if (props.needStartImmediately) {
-      start()
+      start();
     }
   },
   {
     deep: true,
     immediate: true
   }
-)
-// 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 => {
+);
+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(() => {
   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)
-})
-// endregion ////
-
-// region actions ////
-/**
- * Starts to countdown.
- */
-function start(): void {
+  return String(totalSeconds.value);
+});
+function start() {
   if (counting.value) {
-    return
+    return;
   }
-
-  counting.value = true
-
+  counting.value = true;
   if (!props.needStartImmediately) {
-    totalMilliseconds.value = Number(props.seconds) * 1000
-    endTime.value = props.now() + Number(props.seconds) * 1000
+    totalMilliseconds.value = Number(props.seconds) * 1e3;
+    endTime.value = props.now() + Number(props.seconds) * 1e3;
   }
-
   if (props.emitEvents) {
-    emits('start')
+    emits("start");
   }
-
-  if (document?.visibilityState === 'visible') {
-    continueProcess()
+  if (document?.visibilityState === "visible") {
+    continueProcess();
   }
 }
-
-/**
- * Continues the countdown.
- */
-function continueProcess(): void {
+function continueProcess() {
   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: number
-    let prev: number
-    const step = (now: number) => {
+    let init;
+    let prev;
+    const step = (now) => {
       if (!init) {
-        init = now
+        init = now;
       }
-
       if (!prev) {
-        prev = now
+        prev = now;
       }
-
-      const range = now - init
-
-      if (
-        range >= delay
-        // Avoid losing time about one second per minute (now - prev ≈ 16ms)
-        || range + ((now - prev) / 2) >= delay
-      ) {
-        progress()
+      const range = now - init;
+      if (range >= delay || 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();
   }
 }
-
-/**
- * Pauses the countdown.
- */
-function pause(): void {
-  cancelAnimationFrame(requestId.value)
+function pause() {
+  cancelAnimationFrame(requestId.value);
 }
-
-/**
- * Progresses to countdown.
- */
-function progress(): void {
+function progress() {
   if (!counting.value) {
-    return
+    return;
   }
-
-  update()
-
+  update();
   if (props.emitEvents && totalMilliseconds.value > 0) {
-    /**
-     * Countdown progress event.
-     */
-    emits('progress', {
+    emits("progress", {
       days: days.value,
       hours: hours.value,
       minutes: minutes.value,
@@ -350,114 +165,74 @@ function progress(): void {
       totalMinutes: totalMinutes.value,
       totalSeconds: totalSeconds.value,
       totalMilliseconds: totalMilliseconds.value
-    })
+    });
   }
-
-  continueProcess()
+  continueProcess();
 }
-
-/**
- * Aborts the countdown.
- */
-function abort(): void {
+function abort() {
   if (!counting.value) {
-    return
+    return;
   }
-
-  pause()
-  counting.value = false
-
+  pause();
+  counting.value = false;
   if (props.emitEvents) {
-    /**
-     * Countdown abort event.
-     */
-    emits('abort')
+    emits("abort");
   }
 }
-
-/**
- * Stop the countdown.
- */
-function stop(): void {
+function stop() {
   if (!counting.value) {
-    return
+    return;
   }
-
-  pause()
-  totalMilliseconds.value = 0
-  counting.value = false
-
+  pause();
+  totalMilliseconds.value = 0;
+  counting.value = false;
   if (props.emitEvents) {
-    /**
-     * Countdown end event.
-     */
-    emits('end')
+    emits("end");
   }
 }
-
-/**
- * Updates the count.
- */
-function update(): void {
+function update() {
   if (counting.value) {
-    totalMilliseconds.value = Math.max(0, endTime.value - props.now())
+    totalMilliseconds.value = Math.max(0, endTime.value - props.now());
   }
 }
-
-/**
- * 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 restart() {
+  pause();
+  totalMilliseconds.value = Number(props.seconds) * 1e3;
+  endTime.value = props.now() + Number(props.seconds) * 1e3;
+  counting.value = false;
+  start();
 }
-
-/**
- * Visibility change event handler.
- */
-function handleVisibilityChange(): void {
+function handleVisibilityChange() {
   switch (document?.visibilityState) {
-    case 'visible':
-      update()
-      continueProcess()
-      break
-
-    case 'hidden':
-      pause()
-      break
+    case "visible":
+      update();
+      continueProcess();
+      break;
+    case "hidden":
+      pause();
+      break;
   }
 }
-// endregion ////
-
-// region Round ////
-const fullDashArray = computed((): string => {
-  const fullDashArray = 283
-
-  const calculateTimeFraction = (): number => {
+const fullDashArray = computed(() => {
+  const fullDashArray2 = 283;
+  const calculateTimeFraction = () => {
     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() * fullDashArray).toFixed(0),
-    fullDashArray
-  ].join(' ')
-})
-// endregion ////
-
+    (calculateTimeFraction() * fullDashArray2).toFixed(0),
+    fullDashArray2
+  ].join(" ");
+});
 defineExpose({
   start,
   abort,
   stop,
   restart
-})
+});
 </script>
 
 <template>
@@ -491,12 +266,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()) as AvatarProps['size'])"
+        :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
         v-bind="avatar"
         :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
       />