@will-ui/vue 1.0.0

package/dist/use/toggle/useToggleArray.js

@@ -0,0 +1,36 @@
+import { isObject } from "../../util/tools.js";
+import { useToggleCycle } from "./useToggleCycle.js";
+//#region use/toggle/useToggleArray.ts
+/**
+* 在数组项之间环形切换。
+*
+* @example
+* const { toggle, item, index, set } = useToggleArray(data, { index: 0 })
+* const { toggle, item } = useToggleArray(data, reactive({ item: computed(() => model) }))
+*/
+function useToggleArray(data, current, keyField) {
+	const cycle = useToggleCycle(data, current);
+	function setByKey(k, localKeyField) {
+		const field = localKeyField || keyField;
+		if (!field) return;
+		const i = cycle.list.value.findIndex((el) => {
+			if (isObject(el)) return k === el[field];
+			return false;
+		});
+		if (i > -1) cycle.set({ index: i });
+	}
+	return {
+		toggle: cycle.toggle,
+		next: cycle.next,
+		prev: cycle.prev,
+		item: cycle.item,
+		index: cycle.index,
+		set: cycle.set,
+		setByKey,
+		get: cycle.get
+	};
+}
+//#endregion
+export { useToggleArray as default };
+
+//# sourceMappingURL=useToggleArray.js.map

package/dist/use/toggle/useToggleArray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggleArray.js","names":[],"sources":["../../../use/toggle/useToggleArray.ts"],"sourcesContent":["import type { MaybeRefOrGetter } from 'vue'\r\nimport { isObject } from '../../util'\r\nimport type { ToggleInitOptions, ToggleKey, UseToggleCycleReturn } from './types'\r\nimport { useToggleCycle } from './useToggleCycle'\r\n\r\nexport type { ToggleInitOptions, ToggleKey, TogglePosition, UseToggleCycleReturn } from './types'\r\n\r\nexport type UseToggleArrayReturn<T> = UseToggleCycleReturn<T> & {\r\n  setByKey: (k: ToggleKey, localKeyField?: string) => void\r\n}\r\n\r\n/**\r\n * 在数组项之间环形切换。\r\n *\r\n * @example\r\n * const { toggle, item, index, set } = useToggleArray(data, { index: 0 })\r\n * const { toggle, item } = useToggleArray(data, reactive({ item: computed(() => model) }))\r\n */\r\nexport default function useToggleArray<T>(\r\n  data: MaybeRefOrGetter<readonly T[]>,\r\n  current?: ToggleInitOptions<T>,\r\n  keyField?: string,\r\n): UseToggleArrayReturn<T> {\r\n  const cycle = useToggleCycle(data, current)\r\n\r\n  function setByKey(k: ToggleKey, localKeyField?: string) {\r\n    const field = localKeyField || keyField\r\n    if (!field) return\r\n    const i = cycle.list.value.findIndex((el) => {\r\n      if (isObject(el)) {\r\n        return k === (el as Record<string, unknown>)[field]\r\n      }\r\n      return false\r\n    })\r\n    if (i > -1) {\r\n      cycle.set({ index: i })\r\n    }\r\n  }\r\n\r\n  return {\r\n    toggle: cycle.toggle,\r\n    next: cycle.next,\r\n    prev: cycle.prev,\r\n    item: cycle.item,\r\n    index: cycle.index,\r\n    set: cycle.set,\r\n    setByKey,\r\n    get: cycle.get,\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;AAkBA,SAAwB,eACtB,MACA,SACA,UACyB;CACzB,MAAM,QAAQ,eAAe,MAAM,OAAO;CAE1C,SAAS,SAAS,GAAc,eAAwB;EACtD,MAAM,QAAQ,iBAAiB;EAC/B,IAAI,CAAC,OAAO;EACZ,MAAM,IAAI,MAAM,KAAK,MAAM,WAAW,OAAO;GAC3C,IAAI,SAAS,EAAE,GACb,OAAO,MAAO,GAA+B;GAE/C,OAAO;EACT,CAAC;EACD,IAAI,IAAI,IACN,MAAM,IAAI,EAAE,OAAO,EAAE,CAAC;CAE1B;CAEA,OAAO;EACL,QAAQ,MAAM;EACd,MAAM,MAAM;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,KAAK,MAAM;EACX;EACA,KAAK,MAAM;CACb;AACF"}

package/dist/use/toggle/useToggleCycle.d.ts

@@ -0,0 +1,11 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { ToggleInitOptions, UseToggleCycleReturn } from './types';
+/**
+ * 基于列表的环形切换核心。
+ * - `set({ item })`：按引用全等定位；找不到时 index 为 -1，仍保留传入的 item（与历史行为一致）
+ * - `set({ index })`：直接落位，不做取模（越界时 item 为 undefined）
+ * - `toggle` / `prev`：按长度取模环形
+ */
+export declare function useToggleCycle<T>(source: MaybeRefOrGetter<readonly T[]>, current?: ToggleInitOptions<T>): UseToggleCycleReturn<T> & {
+    list: Ref<T[]>;
+};

package/dist/use/toggle/useToggleCycle.js

@@ -0,0 +1,88 @@
+import { computed, ref, toValue, watch } from "vue";
+//#region use/toggle/useToggleCycle.ts
+/**
+* 基于列表的环形切换核心。
+* - `set({ item })`：按引用全等定位；找不到时 index 为 -1，仍保留传入的 item（与历史行为一致）
+* - `set({ index })`：直接落位，不做取模（越界时 item 为 undefined）
+* - `toggle` / `prev`：按长度取模环形
+*/
+function useToggleCycle(source, current) {
+	const list = computed(() => {
+		const raw = toValue(source);
+		return raw ? [...raw] : [];
+	});
+	const index = ref(0);
+	const item = ref();
+	function get() {
+		return {
+			item: list.value[index.value],
+			index: index.value
+		};
+	}
+	function applyByIndex(i) {
+		index.value = i;
+		item.value = list.value[i];
+	}
+	function applyByItem(target) {
+		item.value = target;
+		index.value = list.value.findIndex((d) => d === target);
+	}
+	function wrapIndex(from, delta) {
+		const len = list.value.length;
+		if (len <= 0) return;
+		applyByIndex(((from + delta) % len + len) % len);
+	}
+	function applyInit(init) {
+		if (!init) {
+			applyByIndex(index.value);
+			return;
+		}
+		if ("item" in init) {
+			applyByItem(toValue(init.item));
+			return;
+		}
+		if ("index" in init) {
+			const i = toValue(init.index);
+			if (i !== void 0) applyByIndex(i);
+		}
+	}
+	function toggle() {
+		wrapIndex(index.value, 1);
+		return {
+			item: item.value,
+			index: index.value
+		};
+	}
+	function prev() {
+		wrapIndex(index.value, -1);
+		return {
+			item: item.value,
+			index: index.value
+		};
+	}
+	function set(next) {
+		applyInit(next);
+	}
+	applyInit(current ?? { index: 0 });
+	watch([
+		() => toValue(current?.index),
+		() => toValue(current?.item),
+		list
+	], () => {
+		applyInit(current ?? { index: index.value });
+	});
+	return {
+		toggle,
+		next: toggle,
+		prev,
+		item,
+		index,
+		set,
+		get,
+		list
+	};
+}
+//#endregion
+export { useToggleCycle };
+
+//# sourceMappingURL=useToggleCycle.js.map

package/dist/use/toggle/useToggleCycle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggleCycle.js","names":[],"sources":["../../../use/toggle/useToggleCycle.ts"],"sourcesContent":["import {\r\n  computed,\r\n  ref,\r\n  toValue,\r\n  watch,\r\n  type MaybeRefOrGetter,\r\n  type Ref,\r\n} from 'vue'\r\nimport type {\r\n  ToggleInitOptions,\r\n  TogglePosition,\r\n  UseToggleCycleReturn,\r\n} from './types'\r\n\r\n/**\r\n * 基于列表的环形切换核心。\r\n * - `set({ item })`：按引用全等定位；找不到时 index 为 -1，仍保留传入的 item（与历史行为一致）\r\n * - `set({ index })`：直接落位，不做取模（越界时 item 为 undefined）\r\n * - `toggle` / `prev`：按长度取模环形\r\n */\r\nexport function useToggleCycle<T>(\r\n  source: MaybeRefOrGetter<readonly T[]>,\r\n  current?: ToggleInitOptions<T>,\r\n): UseToggleCycleReturn<T> & { list: Ref<T[]> } {\r\n  const list = computed(() => {\r\n    const raw = toValue(source)\r\n    return (raw ? [...raw] : []) as T[]\r\n  })\r\n\r\n  const index = ref(0)\r\n  const item = ref<T>() as Ref<T | undefined>\r\n\r\n  function get(): TogglePosition<T> {\r\n    return {\r\n      item: list.value[index.value],\r\n      index: index.value,\r\n    }\r\n  }\r\n\r\n  function applyByIndex(i: number) {\r\n    index.value = i\r\n    item.value = list.value[i]\r\n  }\r\n\r\n  function applyByItem(target: T | undefined) {\r\n    item.value = target\r\n    index.value = list.value.findIndex((d) => d === target)\r\n  }\r\n\r\n  function wrapIndex(from: number, delta: number) {\r\n    const len = list.value.length\r\n    if (len <= 0) return\r\n    applyByIndex(((from + delta) % len + len) % len)\r\n  }\r\n\r\n  function applyInit(init?: ToggleInitOptions<T>) {\r\n    if (!init) {\r\n      applyByIndex(index.value)\r\n      return\r\n    }\r\n    // item 优先（与历史 `'item' in current` 一致）\r\n    if ('item' in init) {\r\n      applyByItem(toValue(init.item) as T | undefined)\r\n      return\r\n    }\r\n    if ('index' in init) {\r\n      const i = toValue(init.index)\r\n      if (i !== undefined) applyByIndex(i)\r\n    }\r\n  }\r\n\r\n  function toggle(): TogglePosition<T> {\r\n    wrapIndex(index.value, 1)\r\n    return {\r\n      item: item.value,\r\n      index: index.value,\r\n    }\r\n  }\r\n\r\n  function prev(): TogglePosition<T> {\r\n    wrapIndex(index.value, -1)\r\n    return {\r\n      item: item.value,\r\n      index: index.value,\r\n    }\r\n  }\r\n\r\n  function set(next: ToggleInitOptions<T>) {\r\n    applyInit(next)\r\n  }\r\n\r\n  applyInit(current ?? { index: 0 })\r\n\r\n  watch(\r\n    [\r\n      () => toValue(current?.index),\r\n      () => toValue(current?.item),\r\n      list,\r\n    ],\r\n    () => {\r\n      applyInit(current ?? { index: index.value })\r\n    },\r\n  )\r\n\r\n  return {\r\n    toggle,\r\n    next: toggle,\r\n    prev,\r\n    item,\r\n    index,\r\n    set,\r\n    get,\r\n    list,\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;AAoBA,SAAgB,eACd,QACA,SAC8C;CAC9C,MAAM,OAAO,eAAe;EAC1B,MAAM,MAAM,QAAQ,MAAM;EAC1B,OAAQ,MAAM,CAAC,GAAG,GAAG,IAAI,CAAC;CAC5B,CAAC;CAED,MAAM,QAAQ,IAAI,CAAC;CACnB,MAAM,OAAO,IAAO;CAEpB,SAAS,MAAyB;EAChC,OAAO;GACL,MAAM,KAAK,MAAM,MAAM;GACvB,OAAO,MAAM;EACf;CACF;CAEA,SAAS,aAAa,GAAW;EAC/B,MAAM,QAAQ;EACd,KAAK,QAAQ,KAAK,MAAM;CAC1B;CAEA,SAAS,YAAY,QAAuB;EAC1C,KAAK,QAAQ;EACb,MAAM,QAAQ,KAAK,MAAM,WAAW,MAAM,MAAM,MAAM;CACxD;CAEA,SAAS,UAAU,MAAc,OAAe;EAC9C,MAAM,MAAM,KAAK,MAAM;EACvB,IAAI,OAAO,GAAG;EACd,eAAe,OAAO,SAAS,MAAM,OAAO,GAAG;CACjD;CAEA,SAAS,UAAU,MAA6B;EAC9C,IAAI,CAAC,MAAM;GACT,aAAa,MAAM,KAAK;GACxB;EACF;EAEA,IAAI,UAAU,MAAM;GAClB,YAAY,QAAQ,KAAK,IAAI,CAAkB;GAC/C;EACF;EACA,IAAI,WAAW,MAAM;GACnB,MAAM,IAAI,QAAQ,KAAK,KAAK;GAC5B,IAAI,MAAM,KAAA,GAAW,aAAa,CAAC;EACrC;CACF;CAEA,SAAS,SAA4B;EACnC,UAAU,MAAM,OAAO,CAAC;EACxB,OAAO;GACL,MAAM,KAAK;GACX,OAAO,MAAM;EACf;CACF;CAEA,SAAS,OAA0B;EACjC,UAAU,MAAM,OAAO,EAAE;EACzB,OAAO;GACL,MAAM,KAAK;GACX,OAAO,MAAM;EACf;CACF;CAEA,SAAS,IAAI,MAA4B;EACvC,UAAU,IAAI;CAChB;CAEA,UAAU,WAAW,EAAE,OAAO,EAAE,CAAC;CAEjC,MACE;QACQ,QAAQ,SAAS,KAAK;QACtB,QAAQ,SAAS,IAAI;EAC3B;CACF,SACM;EACJ,UAAU,WAAW,EAAE,OAAO,MAAM,MAAM,CAAC;CAC7C,CACF;CAEA,OAAO;EACL;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/use/toggle/useToggleMap.d.ts

@@ -0,0 +1,10 @@
+import { MaybeRef, MaybeRefOrGetter } from 'vue';
+import { UseToggleCycleReturn } from './types';
+export type { TogglePosition, UseToggleCycleReturn } from './types';
+export type MapEntry<K = unknown, V = unknown> = [K, V];
+export type UseToggleMapReturn<K, V> = UseToggleCycleReturn<MapEntry<K, V>>;
+/**
+ * 在 Map 的 entries 之间环形切换。
+ * `item` 为 `[key, value]`；`currentKey` 变化时定位到对应项（找不到则落在第一项）。
+ */
+export default function useToggleMap<K = unknown, V = unknown>(data: MaybeRefOrGetter<Map<K, V>>, currentKey?: MaybeRef<K | undefined>): UseToggleMapReturn<K, V>;

package/dist/use/toggle/useToggleObject.d.ts

@@ -0,0 +1,13 @@
+import { MaybeRef, MaybeRefOrGetter } from 'vue';
+import { UseToggleCycleReturn } from './types';
+export type { TogglePosition, UseToggleCycleReturn } from './types';
+export type ObjectEntry<K extends PropertyKey = PropertyKey, V = unknown> = [
+    K,
+    V
+];
+export type UseToggleObjectReturn<K extends PropertyKey, V> = UseToggleCycleReturn<ObjectEntry<K, V>>;
+/**
+ * 在对象 `Object.entries` 之间环形切换。
+ * `item` 为 `[key, value]`；`currentKey` 变化时定位到对应项（找不到则落在第一项）。
+ */
+export default function useToggleObject<T extends Record<PropertyKey, unknown>, K extends keyof T & PropertyKey = keyof T & PropertyKey>(data: MaybeRefOrGetter<T>, currentKey?: MaybeRef<K | undefined>): UseToggleObjectReturn<K, T[K]>;

package/dist/use/useAudioPlayer.d.ts

@@ -0,0 +1,160 @@
+import { MaybeRefOrGetter } from 'vue';
+export type AudioPlayMode = 'sequential' | 'random' | 'single-loop' | 'list-loop';
+export interface AudioTrack {
+    id?: string | number;
+    title?: string;
+    name?: string;
+    artist?: string;
+    cover?: string;
+    src?: string;
+    url?: string;
+    blob?: Blob;
+    file?: Blob;
+    arrayBuffer?: ArrayBuffer;
+    mimeType?: string;
+    duration?: number;
+    [key: string]: any;
+}
+export interface AudioPlaylist {
+    id?: string | number;
+    name: string;
+    tracks?: AudioTrack[];
+    [key: string]: any;
+}
+export interface InternalAudioTrack extends Omit<AudioTrack, 'id'> {
+    id: string;
+}
+export interface InternalAudioPlaylist extends Omit<AudioPlaylist, 'id' | 'tracks'> {
+    id: string;
+    tracks: InternalAudioTrack[];
+}
+export interface LoadSourceOptions {
+    autoplay?: boolean;
+}
+export interface UseAudioPlayerOptions {
+    playlists?: MaybeRefOrGetter<AudioPlaylist[]>;
+    source?: MaybeRefOrGetter<AudioTrack | null>;
+    activePlaylistId?: MaybeRefOrGetter<string | number | null | undefined>;
+    activeTrackId?: MaybeRefOrGetter<string | number | null | undefined>;
+    playMode?: MaybeRefOrGetter<AudioPlayMode>;
+    autoplay?: MaybeRefOrGetter<boolean>;
+    preload?: MaybeRefOrGetter<'none' | 'metadata' | 'auto'>;
+    defaultVolume?: number;
+    defaultMuted?: boolean;
+    onPlay?: (track: InternalAudioTrack | null) => void;
+    onPause?: (track: InternalAudioTrack | null) => void;
+    onEnded?: (track: InternalAudioTrack | null) => void;
+    onTimeUpdate?: (payload: {
+        currentTime: number;
+        duration: number;
+        progressPercent: number;
+        track: InternalAudioTrack | null;
+    }) => void;
+    onVolumeChange?: (payload: {
+        muted: boolean;
+        volumePercent: number;
+    }) => void;
+    onTrackChange?: (track: InternalAudioTrack | null) => void;
+    onPlaylistChange?: (playlist: InternalAudioPlaylist | null) => void;
+    onPlaylistsChange?: (playlists: InternalAudioPlaylist[]) => void;
+    onPlayModeChange?: (mode: AudioPlayMode) => void;
+    onLoaded?: (track: InternalAudioTrack | null) => void;
+    onError?: (error: unknown) => void;
+    onUpdateActivePlaylistId?: (id: string | null) => void;
+    onUpdateActiveTrackId?: (id: string | null) => void;
+    onUpdatePlayMode?: (mode: AudioPlayMode) => void;
+}
+export declare const formatAudioTime: (seconds: number) => string;
+export default function useAudioPlayer(options?: UseAudioPlayerOptions): {
+    audioElement: HTMLAudioElement;
+    playlists: import('vue').Ref<{
+        [x: string]: any;
+        [x: number]: any;
+        id: string;
+        tracks: {
+            [x: string]: any;
+            [x: number]: any;
+            id: string;
+        }[];
+    }[], InternalAudioPlaylist[] | {
+        [x: string]: any;
+        [x: number]: any;
+        id: string;
+        tracks: {
+            [x: string]: any;
+            [x: number]: any;
+            id: string;
+        }[];
+    }[]>;
+    currentPlaylist: import('vue').ComputedRef<{
+        [x: string]: any;
+        [x: number]: any;
+        id: string;
+        tracks: {
+            [x: string]: any;
+            [x: number]: any;
+            id: string;
+        }[];
+    }>;
+    currentPlaylistId: import('vue').Ref<string, string>;
+    currentTrack: import('vue').ComputedRef<{
+        [x: string]: any;
+        [x: number]: any;
+        id: string;
+    }>;
+    currentTrackId: import('vue').Ref<string, string>;
+    currentTrackIndex: import('vue').ComputedRef<number>;
+    playMode: import('vue').Ref<AudioPlayMode, AudioPlayMode>;
+    isPlaying: import('vue').Ref<boolean, boolean>;
+    isPaused: import('vue').ComputedRef<boolean>;
+    isLoading: import('vue').Ref<boolean, boolean>;
+    isReady: import('vue').Ref<boolean, boolean>;
+    isMuted: import('vue').Ref<boolean, boolean>;
+    isSeeking: import('vue').Ref<boolean, boolean>;
+    hasTrack: import('vue').ComputedRef<boolean>;
+    currentTime: import('vue').Ref<number, number>;
+    duration: import('vue').Ref<number, number>;
+    bufferedTime: import('vue').Ref<number, number>;
+    progressPercent: import('vue').ComputedRef<number>;
+    displayProgressPercent: import('vue').ComputedRef<number>;
+    bufferedPercent: import('vue').ComputedRef<number>;
+    seekPreviewPercent: import('vue').Ref<number, number>;
+    volumePercent: import('vue').Ref<number, number>;
+    displayCurrentTime: import('vue').ComputedRef<number>;
+    formattedCurrentTime: import('vue').ComputedRef<string>;
+    formattedDuration: import('vue').ComputedRef<string>;
+    formattedDisplayCurrentTime: import('vue').ComputedRef<string>;
+    canPlayPrev: import('vue').ComputedRef<boolean>;
+    canPlayNext: import('vue').ComputedRef<boolean>;
+    errorMessage: import('vue').Ref<string, string>;
+    play: () => Promise<boolean>;
+    pause: () => void;
+    togglePlay: () => Promise<boolean>;
+    seek: (time: number) => void;
+    seekByPercent: (percent: number) => void;
+    beginSeeking: (percent?: number) => void;
+    updateSeekingByPercent: (percent: number) => void;
+    commitSeeking: (percent?: number) => Promise<void>;
+    cancelSeeking: () => void;
+    getTimeByPercent: (percent: number) => number;
+    setVolume: (volume: number) => void;
+    setVolumeByPercent: (percent: number) => void;
+    toggleMute: () => void;
+    setPlayMode: (mode: AudioPlayMode) => void;
+    prev: () => Promise<boolean>;
+    next: () => Promise<boolean>;
+    playTrack: (trackIdOrIndex: string | number, playlistId?: string | number) => Promise<boolean>;
+    switchPlaylist: (playlistId: string | number, switchOptions?: LoadSourceOptions & {
+        trackId?: string | number;
+    }) => Promise<boolean>;
+    loadSource: (source: AudioTrack, loadOptions?: LoadSourceOptions) => Promise<boolean>;
+    clearSource: () => void;
+    createPlaylist: (name: string, tracks?: AudioTrack[]) => InternalAudioPlaylist;
+    renamePlaylist: (playlistId: string | number, name: string) => boolean;
+    deletePlaylist: (playlistId: string | number) => boolean;
+    addTracksToPlaylist: (playlistId: string | number, tracks: AudioTrack[]) => InternalAudioTrack[];
+    removeTracksFromPlaylist: (playlistId: string | number, trackIds: Array<string | number>) => boolean;
+    setPlaylists: (nextPlaylists: AudioPlaylist[]) => void;
+    reset: () => void;
+    formatTime: (seconds: number) => string;
+};