pxd 0.0.39 → 0.0.41

package/dist/components/time-picker/index.vue

@@ -0,0 +1,281 @@
+<script setup>
+import CalendarIcon from "@gdsicon/vue/calendar";
+import { computed, ref, shallowRef, watch } from "vue";
+import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { dayjs } from "../../utils/date";
+import { sleep } from "../../utils/event";
+import { clampValue } from "../../utils/format";
+import { throttle } from "../../utils/throttle";
+import PInput from "../input/index.vue";
+import PPopover from "../popover/index.vue";
+defineOptions({
+  name: "PTimePicker",
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  allowClear: { type: Boolean, required: false },
+  presets: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false },
+  modelValue: { type: [Date, String, Number], required: false, default: "" },
+  prefixIcon: { type: Boolean, required: false, default: true },
+  placeholder: { type: String, required: false },
+  closeOnPressEscape: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["change", "select", "update:modelValue"]);
+const HEIGHT = 32;
+const VALUE_POSITION_MAP = {
+  hours: 0,
+  minutes: 1,
+  seconds: 2
+};
+const config = useConfigProvider();
+const inputRef = shallowRef();
+const timeHoursRef = shallowRef();
+const timeMinutesRef = shallowRef();
+const timeSecondsRef = shallowRef();
+const popoverVisible = shallowRef(false);
+const modelValueList = ref([]);
+const modelValue = computed({
+  get() {
+    return modelValueList.value.join(":");
+  },
+  set(value) {
+    emits("update:modelValue", value);
+  }
+});
+const onTimeListScroll = throttle((ev) => {
+  const target = ev.target;
+  const type = target.dataset.type;
+  const value = Math.ceil(target.scrollTop / HEIGHT);
+  const index = VALUE_POSITION_MAP[type];
+  modelValueList.value[index] = padStringZero(value);
+}, 150, { edges: ["leading", "trailing"] });
+function padStringZero(value) {
+  return String(value).padStart(2, "0");
+}
+function showPopover() {
+  popoverVisible.value = true;
+  setTimesScrollTop();
+}
+function hidePopover() {
+  popoverVisible.value = false;
+}
+function parseTimeValue(value, max) {
+  const numberValue = value ? Number.parseInt(value.slice(0, 2)) : 0;
+  if (!numberValue) {
+    return "00";
+  }
+  return clampValue(numberValue, 0, max).toString();
+}
+function updateValueList(value) {
+  modelValueList.value = getFormattedValue(value).split(":");
+}
+function getFormattedValue(value) {
+  if (value == null || value === "") {
+    return "";
+  }
+  let _value;
+  if (typeof value === "string") {
+    const formatDate = dayjs(/* @__PURE__ */ new Date()).format("YYYY-MM-DD");
+    _value = `${formatDate} ${value}`;
+  } else if (value instanceof Date) {
+    _value = value;
+  } else {
+    _value = new Date(value);
+  }
+  return dayjs(_value).format("HH:mm:ss");
+}
+async function setTimesScrollTop() {
+  await sleep(10);
+  const elList = [timeHoursRef.value, timeMinutesRef.value, timeSecondsRef.value];
+  elList.forEach((el, i) => {
+    const scrollTop = Number(modelValueList.value[i] || 0) * HEIGHT;
+    el?.scrollTo({ top: scrollTop });
+  });
+}
+function onTimesContainerClick(ev) {
+  const target = ev.target;
+  if (target.tagName !== "LI") {
+    return;
+  }
+  const scrollContainer = target.parentNode;
+  if (!scrollContainer) {
+    return;
+  }
+  const containerRect = scrollContainer.getBoundingClientRect();
+  const targetRect = target.getBoundingClientRect();
+  const containerCenter = containerRect.height / 2;
+  const targetCenter = targetRect.height / 2;
+  const targetOffsetFromTop = targetRect.top - containerRect.top + scrollContainer.scrollTop;
+  const newScrollTop = targetOffsetFromTop - containerCenter + targetCenter;
+  scrollContainer.scrollTo({
+    top: Math.max(0, newScrollTop),
+    behavior: "smooth"
+  });
+}
+function onCancelClick() {
+  updateValueList(props.modelValue);
+  hidePopover();
+}
+function onConfirmClick() {
+  updateValueList(modelValueList.value.join(":"));
+  modelValue.value = modelValueList.value.join(":");
+  hidePopover();
+}
+function onNowBtnClick(date) {
+  const newValue = getFormattedValue(date ?? /* @__PURE__ */ new Date());
+  modelValue.value = newValue;
+  modelValueList.value = newValue.split(":");
+  hidePopover();
+}
+function onInputValueChange(value) {
+  if (!value) {
+    modelValue.value = "";
+    modelValueList.value = [];
+    return;
+  }
+  const [h, m, s] = value.split(":");
+  const hh = parseTimeValue(h, 23);
+  const mm = parseTimeValue(m, 59);
+  const ss = parseTimeValue(s, 59);
+  modelValue.value = getFormattedValue(`${hh}:${mm}:${ss}`);
+  modelValueList.value = [padStringZero(hh), padStringZero(mm), padStringZero(ss)];
+}
+function onUpdateModelValue(value) {
+  if (value) {
+    return;
+  }
+  modelValue.value = "";
+  modelValueList.value = [];
+}
+function onPresetClick(ev) {
+  const target = ev.target;
+  if (target.tagName !== "BUTTON") {
+    return;
+  }
+  const index = Number(target.dataset.index);
+  if (Number.isNaN(index)) {
+    return;
+  }
+  const presetValue = props.presets[index].getDate();
+  if (!presetValue) {
+    return;
+  }
+  onNowBtnClick(presetValue);
+}
+watch(() => props.modelValue, updateValueList, { immediate: true });
+</script>
+
+<template>
+  <PPopover
+    enterable
+    scroll-hidden
+    trigger="manual"
+    :show-delay="0"
+    :hide-delay="100"
+    disabled-show-transition
+    :visible="popoverVisible"
+    :close-on-press-escape="closeOnPressEscape"
+    class="pxd-time-picker"
+    trigger-class="w-full"
+    v-bind="$attrs"
+    @trigger-click="showPopover"
+    @outside-click="onConfirmClick"
+  >
+    <PInput
+      ref="inputRef"
+      :disabled="disabled"
+      :allow-clear="allowClear"
+      :model-value="modelValue"
+      :placeholder="placeholder"
+      :prefix-style="false"
+      @change="onInputValueChange"
+      @update:model-value="onUpdateModelValue"
+    >
+      <template v-if="prefixIcon" #prefix>
+        <CalendarIcon class="ml-3 pointer-events-none" />
+      </template>
+    </PInput>
+
+    <template #content>
+      <div class="rounded-xl bg-background-100 shadow-border-menu">
+        <div class="text-sm flex max-w-full transform-gpu tabular-nums outline-none select-none" @click.stop="onTimesContainerClick">
+          <div class="p-2 gap-1 relative flex items-center">
+            <div class="pxd-time-picker--list relative">
+              <ul ref="timeHoursRef" data-type="hours" class="w-8 h-40 py-16 scrollbar-hidden snap-y snap-mandatory list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none" @scroll.stop="onTimeListScroll">
+                <li v-for="_, i of 24" :key="i" class="h-8 leading-8 cursor-pointer snap-center">
+                  {{ padStringZero(i) }}
+                </li>
+              </ul>
+            </div>
+            <div class="pxd-time-picker--list relative">
+              <ul ref="timeMinutesRef" data-type="minutes" class="w-8 h-40 py-16 scrollbar-hidden snap-y snap-mandatory list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none" @scroll.stop="onTimeListScroll">
+                <li v-for="_, i of 60" :key="i" class="h-8 leading-8 cursor-pointer snap-center">
+                  {{ padStringZero(i) }}
+                </li>
+              </ul>
+            </div>
+            <div class="pxd-time-picker--list relative">
+              <ul ref="timeSecondsRef" data-type="seconds" class="w-8 h-40 py-16 scrollbar-hidden snap-y snap-mandatory list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none" @scroll.stop="onTimeListScroll">
+                <li v-for="_, i of 60" :key="i" class="h-8 leading-8 cursor-pointer snap-center">
+                  {{ padStringZero(i) }}
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div v-if="presets?.length" class="w-26 p-2 h-44 gap-1 scrollbar-hidden flex flex-wrap content-start overflow-auto border-l outline-none" @click="onPresetClick">
+            <button
+              v-for="preset, i in presets"
+              :key="preset.label"
+              :data-index="i"
+              class="h-5 px-1.5 cursor-pointer appearance-none rounded-sm bg-gray-300 text-13px whitespace-nowrap text-foreground self-focus-ring outline-none motion-safe:transition-all"
+            >
+              {{ preset.label }}
+            </button>
+          </div>
+        </div>
+
+        <div class="p-2 gap-1 flex items-center justify-between border-t" @click.stop>
+          <PButton size="xs" variant="ghost" class="!px-0 text-13px" @click="onNowBtnClick()">
+            {{ config.locale.date.now }}
+          </PButton>
+
+          <PButton size="xs" variant="ghost" class="!px-0 text-13px" @click="onCancelClick">
+            {{ config.locale.confirm.cancel }}
+          </PButton>
+        </div>
+      </div>
+    </template>
+  </PPopover>
+</template>
+
+<style>
+.pxd-time-picker--list::before {
+  content: '';
+  position: fixed;
+  top: 72px;
+  width: 32px;
+  height: 32px;
+  z-index: -1;
+  border-radius: var(--radius-md);
+  background: var(--color-gray-alpha-200);
+  pointer-events: none;
+}
+
+.pxd-time-picker--list:nth-child(1)::before {
+  left: 8px;
+}
+
+.pxd-time-picker--list:nth-child(2)::before {
+  left: 44px;
+}
+
+.pxd-time-picker--list:nth-child(3)::before {
+  left: 80px;
+}
+</style>

package/dist/components/tooltip/index.vue

@@ -16,9 +16,9 @@ const props = defineProps({
   showArrow: { type: Boolean, required: false, default: true },
   desktopOnly: { type: Boolean, required: false },
   triggerClass: { type: [String, Array, Object], required: false },
-  popoverClass: { type: [String, Array, Object], required: false, default: "" },
+  contentClass: { type: [String, Array, Object], required: false },
   triggerStyle: { type: [Object, String], required: false },
-  popoverStyle: { type: [Object, String], required: false, default: "" }
+  contentStyle: { type: [Object, String], required: false }
 });
 const VARIANTS = {
   primary: {
@@ -42,11 +42,11 @@ const computedVariant = computed(() => getFallbackValue(props.variant, VARIANTS,
 const computedDisabled = computed(() => {
   return props.disabled || props.desktopOnly && isTouchDevice();
 });
-const computedPopoverClass = computed(() => {
+const mergedClasses = computed(() => {
   return [
-    "px-3 py-2 rounded-md text-[13px] break-words whitespace-pre-line shadow-border-tooltip bg-(--c)",
+    "px-3 py-2 rounded-md text-13px break-words whitespace-pre-line shadow-border-tooltip bg-(--popover-bg)",
     computedVariant.value.text,
-    props.popoverClass
+    props.contentClass
   ].join(" ");
 });
 </script>
@@ -60,8 +60,8 @@ const computedPopoverClass = computed(() => {
     :arrow-color="computedVariant.bg"
     :trigger-class="triggerClass"
     :trigger-style="triggerStyle"
-    :popover-class="computedPopoverClass"
-    :popover-style="popoverStyle"
+    :content-style="contentStyle"
+    :content-class="mergedClasses"
     v-bind="$attrs"
   >
     <slot />

package/dist/composables/index.d.ts

@@ -6,6 +6,7 @@ export * from './use-countdown.js';
 export * from './use-delay-change.js';
 export * from './use-delay-destroy.js';
 export * from './use-focus-trap.js';
+export * from './use-loading-bar.js';
 export * from './use-media-query.js';
 export * from './use-message.js';
 export * from './use-model-value.js';

package/dist/composables/index.js

@@ -6,6 +6,7 @@ export * from "./use-countdown.js";
 export * from "./use-delay-change.js";
 export * from "./use-delay-destroy.js";
 export * from "./use-focus-trap.js";
+export * from "./use-loading-bar.js";
 export * from "./use-media-query.js";
 export * from "./use-message.js";
 export * from "./use-model-value.js";

package/dist/composables/use-browser-observer.d.ts

@@ -1,10 +1,10 @@
-import type { MaybeRef } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
 import type { Nullable } from '../types/shared/utils';
-export declare const useIntersectionObserver: (target: TargetRef, callback: IntersectionObserverCallback, options?: MaybeRef<IntersectionObserverInit>) => ObserverReturnType<IntersectionObserver>;
-export declare const useMutationObserver: (target: TargetRef, callback: MutationCallback, options?: MaybeRef<MutationObserverInit>) => ObserverReturnType<MutationObserver>;
-export declare const useResizeObserver: (target: TargetRef, callback: ResizeObserverCallback, options?: MaybeRef<ResizeObserverOptions>) => ObserverReturnType<ResizeObserver>;
+export declare const useIntersectionObserver: (target: TargetRef, callback: IntersectionObserverCallback, options?: MaybeRefOrGetter<IntersectionObserverInit>) => ObserverReturnType<IntersectionObserver>;
+export declare const useMutationObserver: (target: TargetRef, callback: MutationCallback, options?: MaybeRefOrGetter<MutationObserverInit>) => ObserverReturnType<MutationObserver>;
+export declare const useResizeObserver: (target: TargetRef, callback: ResizeObserverCallback, options?: MaybeRefOrGetter<ResizeObserverOptions>) => ObserverReturnType<ResizeObserver>;
 type Observers = IntersectionObserver | ResizeObserver | MutationObserver;
-type TargetRef = MaybeRef<Nullable<HTMLElement>> | MaybeRef<Nullable<HTMLElement>>[];
+type TargetRef = MaybeRefOrGetter<Nullable<HTMLElement>> | MaybeRefOrGetter<Nullable<HTMLElement>>[];
 interface ObserverReturnType<T extends Observers> {
     observer: T | undefined;
     stop: () => void;

package/dist/composables/use-color-scheme.d.ts

@@ -1,7 +1,11 @@
 export type ColorScheme = 'light' | 'dark';
 export type ColorPreference = ColorScheme | 'auto';
-export declare function useColorScheme(): {
+interface Options {
+    syncStatus?: boolean;
+}
+export declare function useColorScheme(options?: Options): {
     isDark: import("vue").ComputedRef<boolean>;
     colorScheme: import("vue").ShallowRef<ColorPreference, ColorPreference>;
     toggleDarkMode: () => void;
 };
+export {};

package/dist/composables/use-color-scheme.js

@@ -1,7 +1,10 @@
 import { computed, onBeforeUnmount, shallowRef, watchEffect } from "vue";
+import { on } from "../utils/event.js";
 import { isServer } from "../utils/is.js";
 import { PRESET_MEDIA_QUERIES, useMediaQuery } from "./use-media-query.js";
-export function useColorScheme() {
+export function useColorScheme(options = {}) {
+  const RANDOM_KEY = Math.random();
+  const EVENT_NAME = "#toggle-color-scheme";
   const STORAGE_KEY = "fe.system.color-scheme";
   const colorScheme = shallowRef("auto");
   const preferredDark = useMediaQuery(PRESET_MEDIA_QUERIES.COLOR_SCHEME_DARK);
@@ -47,6 +50,16 @@ export function useColorScheme() {
     }
     updateStorages();
     removeDisableTransitionStyle();
+    if (options.syncStatus) {
+      const payload = { id: RANDOM_KEY, mode: colorScheme.value };
+      window.dispatchEvent(new CustomEvent(EVENT_NAME, { detail: payload }));
+    }
+  }
+  function onToggleModeType({ detail }) {
+    if (detail.id === RANDOM_KEY) {
+      return;
+    }
+    colorScheme.value = detail.mode;
   }
   if (!isServer) {
     const stored = localStorage.getItem(STORAGE_KEY);
@@ -62,8 +75,14 @@ export function useColorScheme() {
         htmlEl.classList.remove("dark");
       }
     });
+    let unbindSubscriber = () => {
+    };
+    if (options.syncStatus) {
+      unbindSubscriber = on(window, EVENT_NAME, onToggleModeType);
+    }
     onBeforeUnmount(() => {
       stopEffect();
+      unbindSubscriber();
     });
   }
   return {

package/dist/composables/use-config-provider-context.d.ts

@@ -4,4 +4,4 @@ export interface ConfigProviderProps {
     size?: ComponentSize;
     locale?: Record<string, any>;
 }
-export declare const provideConfigProvider: (contextValue: Required<ConfigProviderProps>) => Required<ConfigProviderProps>, useConfigProvider: ((fallback?: Required<ConfigProviderProps>) => Required<ConfigProviderProps>) & ((fallback: null) => Required<ConfigProviderProps>);
+export declare const provideConfigProvider: (contextValue: Required<ConfigProviderProps>) => Required<ConfigProviderProps>, useConfigProvider: ((fallback?: Required<ConfigProviderProps> | undefined) => Required<ConfigProviderProps>) & ((fallback: null) => Required<ConfigProviderProps> | null);

package/dist/composables/use-countdown.d.ts

@@ -46,6 +46,12 @@ export interface Options {
      * @default true
      */
     millisecond?: boolean;
+    /**
+     * 是否启用人性化时间显示（向上取整到秒）
+     * Whether to enable human-friendly time display (ceil to seconds).
+     * @default false
+     */
+    intuitive?: boolean;
 }
 export declare function useCountdown<T extends Record<string, any>>(props: Options, emits: EmitFn<T>): {
     stop: () => void;

package/dist/composables/use-countdown.js

@@ -1,5 +1,5 @@
 import { computed, shallowRef, watch } from "vue";
-const UPDATE_INTERVAL = Math.ceil(1e3 / 25);
+const UPDATE_INTERVAL = 100;
 export function useCountdown(props, emits) {
   let startTimestamp = -1;
   let isFinished = false;
@@ -24,22 +24,36 @@ export function useCountdown(props, emits) {
     return props.millisecond ? Math.round(time) : Math.round(time * 1e3);
   }
   function getCurrent(now) {
-    return props.invert ? now - startTimestamp : totalDuration.value + startTimestamp - now;
+    const rawCurrent = props.invert ? now - startTimestamp : totalDuration.value + startTimestamp - now;
+    if (props.intuitive && !props.invert && rawCurrent > 0) {
+      const seconds = Math.ceil(rawCurrent / 1e3);
+      return Math.max(0, seconds * 1e3);
+    }
+    return rawCurrent;
   }
   function setCurrent() {
     const startAtValue = formatTime(props.startAt);
     if (props.invert) {
       timeRef.value = isInfiniteCountup.value ? startAtValue : Math.min(startAtValue, totalDuration.value);
     } else {
-      timeRef.value = Math.max(0, totalDuration.value - startAtValue);
+      const rawTime = Math.max(0, totalDuration.value - startAtValue);
+      if (props.intuitive && rawTime > 0) {
+        const seconds = Math.ceil(rawTime / 1e3);
+        timeRef.value = Math.max(0, seconds * 1e3);
+      } else {
+        timeRef.value = rawTime;
+      }
     }
   }
   function shouldFinish(current) {
     if (!props.invert) {
+      if (props.intuitive) {
+        const actualCurrent = totalDuration.value + startTimestamp - performance.now();
+        return actualCurrent <= 0;
+      }
       return current <= 0;
-    } else {
-      return !isInfiniteCountup.value && current >= totalDuration.value;
     }
+    return !isInfiniteCountup.value && current >= totalDuration.value;
   }
   function finish() {
     timeRef.value = props.invert ? totalDuration.value : 0;
@@ -56,7 +70,7 @@ export function useCountdown(props, emits) {
       frame();
     }
   }
-  function frame(timestamp) {
+  function frame() {
     const now = performance.now();
     const current = getCurrent(now);
     let isLastFrame = false;
@@ -71,7 +85,7 @@ export function useCountdown(props, emits) {
       requestAnimationFrame(frame);
       return;
     }
-    previousFrameTime = timestamp;
+    previousFrameTime = now;
     if (shouldFinish(current)) {
       finish();
       return;

package/dist/composables/use-delay-destroy.d.ts

@@ -3,11 +3,11 @@ interface Options {
     default?: boolean;
     delay?: number;
 }
-interface ReturnType {
+interface UseDelayDestroyReturnType {
     render: Ref<boolean>;
     visible: Ref<boolean>;
-    open: () => void;
-    close: () => void;
+    open: () => Promise<boolean>;
+    close: () => Promise<boolean>;
 }
-export declare function useDelayDestroy(valueOrOptions?: boolean | Options): ReturnType;
+export declare function useDelayDestroy(valueOrOptions?: boolean | Options): UseDelayDestroyReturnType;
 export {};

package/dist/composables/use-delay-destroy.js

@@ -1,4 +1,4 @@
-import { shallowRef } from "vue";
+import { nextTick, shallowRef } from "vue";
 export function useDelayDestroy(valueOrOptions = {}) {
   const {
     delay = 300,
@@ -6,19 +6,23 @@ export function useDelayDestroy(valueOrOptions = {}) {
   } = typeof valueOrOptions === "boolean" ? { default: valueOrOptions, delay: 300 } : valueOrOptions;
   const render = shallowRef(value);
   const visible = shallowRef(value);
-  let delayTimeoutId = -1;
-  const open = () => {
-    clearTimeout(delayTimeoutId);
-    render.value = true;
-    Promise.resolve().then(() => {
-      visible.value = true;
+  let delayTimeoutId;
+  const open = async () => {
+    return new Promise((resolve) => {
+      clearTimeout(delayTimeoutId);
+      render.value = true;
+      nextTick().then(() => {
+        resolve(visible.value = true);
+      });
     });
   };
   const close = () => {
-    visible.value = false;
-    delayTimeoutId = window.setTimeout(() => {
-      render.value = false;
-    }, delay);
+    return new Promise((resolve) => {
+      visible.value = false;
+      delayTimeoutId = setTimeout(() => {
+        resolve(render.value = false);
+      }, delay);
+    });
   };
   return {
     open,

package/dist/composables/use-focus-trap.d.ts

@@ -1,4 +1,4 @@
-import type { DOMRef } from '../types/shared/utils';
-export declare function useFocusTrap(container: DOMRef): {
+import type { MaybeElementRef } from '../types/shared/utils';
+export declare function useFocusTrap(container: MaybeElementRef<HTMLElement>): {
     stop: import("vue").WatchHandle;
 };

package/dist/composables/use-focus-trap.js

@@ -1,5 +1,5 @@
 import { nextTick, onBeforeUnmount, watch } from "vue";
-import { on } from "../utils/events.js";
+import { on } from "../utils/event.js";
 import { toValue } from "../utils/ref.js";
 export function useFocusTrap(container) {
   const FOCUSABLE_SELECTORS = [
@@ -34,19 +34,19 @@ export function useFocusTrap(container) {
     const nextFocusIndex = (focusIndex + offset + elements.length) % elements.length;
     elements[nextFocusIndex]?.focus();
   }
-  const unwatch = watch(() => toValue(container), (container2, _, onCleanup) => {
-    if (!container2) {
+  const unwatch = watch(() => toValue(container), (target, _, onCleanup) => {
+    if (!target) {
       previousFocusedElement?.focus();
       return;
     }
     previousFocusedElement = document.activeElement;
     nextTick(() => {
-      const unbindEvent = on(container2, "keydown", onContainerKeydown);
-      elements = Array.from(container2.querySelectorAll(FOCUSABLE_SELECTORS));
+      const unbindEvent = on(target, "keydown", onContainerKeydown);
+      elements = Array.from(target.querySelectorAll(FOCUSABLE_SELECTORS));
       if (elements.length) {
         elements[0].focus();
       } else {
-        container2.focus({ preventScroll: true });
+        target.focus({ preventScroll: true });
       }
       onCleanup(() => {
         unbindEvent();

package/dist/composables/use-loading-bar.d.ts

@@ -0,0 +1,25 @@
+export declare const START_LOADING_BAR_EVENT_NAME = "#start-loading-bar";
+export declare const ERROR_LOADING_BAR_EVENT_NAME = "#error-loading-bar";
+export declare const FINISH_LOADING_BAR_EVENT_NAME = "#finish-loading-bar";
+export declare const INCREASE_LOADING_BAR_EVENT_NAME = "#increase-loading-bar";
+declare const LOADING_BAR_EVENTS: {
+    readonly start: "#start-loading-bar";
+    readonly error: "#error-loading-bar";
+    readonly finish: "#finish-loading-bar";
+    readonly increase: "#increase-loading-bar";
+};
+interface Options extends Record<string, any> {
+    type?: keyof typeof LOADING_BAR_EVENTS;
+}
+export interface LoadingBarEventParams {
+    group: string;
+    value?: number;
+}
+export declare function useLoadingBar(options?: Options): void;
+export declare namespace useLoadingBar {
+    var start: (group?: string) => void;
+    var error: (group?: string) => void;
+    var finish: (group?: string) => void;
+    var increase: (group?: string, value?: number) => void;
+}
+export {};

package/dist/composables/use-loading-bar.js

@@ -0,0 +1,27 @@
+export const START_LOADING_BAR_EVENT_NAME = "#start-loading-bar";
+export const ERROR_LOADING_BAR_EVENT_NAME = "#error-loading-bar";
+export const FINISH_LOADING_BAR_EVENT_NAME = "#finish-loading-bar";
+export const INCREASE_LOADING_BAR_EVENT_NAME = "#increase-loading-bar";
+const LOADING_BAR_EVENTS = {
+  start: START_LOADING_BAR_EVENT_NAME,
+  error: ERROR_LOADING_BAR_EVENT_NAME,
+  finish: FINISH_LOADING_BAR_EVENT_NAME,
+  increase: INCREASE_LOADING_BAR_EVENT_NAME
+};
+export function useLoadingBar(options = {}) {
+  const { type = "start", ...data } = options;
+  const event = LOADING_BAR_EVENTS[type];
+  window.dispatchEvent(new CustomEvent(event, { detail: data }));
+}
+useLoadingBar.start = function(group = "default") {
+  useLoadingBar({ type: "start", group });
+};
+useLoadingBar.error = function(group = "default") {
+  useLoadingBar({ type: "error", group });
+};
+useLoadingBar.finish = function(group = "default") {
+  useLoadingBar({ type: "finish", group });
+};
+useLoadingBar.increase = function(group = "default", value) {
+  useLoadingBar({ type: "increase", group, value });
+};

package/dist/composables/use-media-query.js

@@ -1,5 +1,5 @@
 import { onBeforeUnmount, shallowRef } from "vue";
-import { on } from "../utils/events.js";
+import { on } from "../utils/event.js";
 import { isServer } from "../utils/is.js";
 const CACHED_QUERIES = {};
 export const PRESET_MEDIA_QUERIES = {