@xto/core 1.2.0 → 1.2.2

package/es/hooks/index.d.ts

@@ -0,0 +1,248 @@
+import { Ref, ComputedRef } from 'vue';
+import { UseToggleReturn, UseVisibleReturn, UseDisabledReturn, UseLoadingReturn, UseFocusReturn } from '../types';
+/**
+ * 布尔值切换 Hook
+ *
+ * @param defaultValue 默认值，默认为 false
+ * @returns 切换工具对象
+ *
+ * @example
+ * ```ts
+ * const { value, toggle, setTrue, setFalse } = useToggle()
+ *
+ * console.log(value.value) // false
+ * toggle() // 切换为 true
+ * setFalse() // 设置为 false
+ * setTrue() // 设置为 true
+ * ```
+ */
+export declare function useToggle(defaultValue?: boolean): UseToggleReturn;
+/**
+ * 双向绑定 Hook
+ * 用于实现 v-model 双向绑定
+ *
+ * @param props 组件 props
+ * @param emit emit 函数
+ * @param key 绑定的 prop 名称，默认为 'modelValue'
+ * @param defaultValue 默认值
+ * @returns 响应式计算属性
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const props = defineProps<{ modelValue?: string }>()
+ * const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+ *
+ * const value = useModel(props, emit)
+ * </script>
+ *
+ * <template>
+ *   <input v-model="value" />
+ * </template>
+ * ```
+ */
+export declare function useModel<T>(props: Record<string, any>, emit: (event: string, value: any) => void, key?: string, defaultValue?: T): ComputedRef<T>;
+/**
+ * 可见性控制 Hook
+ * 用于控制元素的显示/隐藏
+ *
+ * @param defaultVisible 默认可见状态，默认为 false
+ * @returns 可见性控制对象
+ *
+ * @example
+ * ```ts
+ * const { visible, show, hide, toggle } = useVisible()
+ *
+ * show() // 显示
+ * hide() // 隐藏
+ * toggle() // 切换
+ * ```
+ */
+export declare function useVisible(defaultVisible?: boolean): UseVisibleReturn;
+/**
+ * 禁用状态控制 Hook
+ * 用于控制元素的禁用/启用状态
+ *
+ * @param defaultDisabled 默认禁用状态，默认为 false
+ * @returns 禁用控制对象
+ *
+ * @example
+ * ```ts
+ * const { disabled, enable, disable } = useDisabled()
+ *
+ * disable() // 禁用
+ * enable() // 启用
+ * ```
+ */
+export declare function useDisabled(defaultDisabled?: boolean): UseDisabledReturn;
+/**
+ * 加载状态控制 Hook
+ * 用于控制加载状态
+ *
+ * @param defaultLoading 默认加载状态，默认为 false
+ * @returns 加载控制对象
+ *
+ * @example
+ * ```ts
+ * const { loading, setLoading, start, end } = useLoading()
+ *
+ * start() // 开始加载
+ * end() // 结束加载
+ * setLoading(true) // 设置加载状态
+ * ```
+ */
+export declare function useLoading(defaultLoading?: boolean): UseLoadingReturn;
+/**
+ * 点击外部检测 Hook
+ * 当点击目标元素外部时触发回调
+ *
+ * @param target 目标元素 Ref
+ * @param callback 点击外部时的回调函数
+ *
+ * @example
+ * ```ts
+ * const dropdownRef = ref<HTMLElement>()
+ *
+ * useClickOutside(dropdownRef, () => {
+ *   // 点击外部，关闭下拉菜单
+ *   closeDropdown()
+ * })
+ * ```
+ */
+export declare function useClickOutside(target: Ref<HTMLElement | undefined>, callback: () => void): void;
+/**
+ * ESC 键检测 Hook
+ * 当按下 ESC 键时触发回调
+ *
+ * @param callback 按下 ESC 时的回调函数
+ *
+ * @example
+ * ```ts
+ * useEscape(() => {
+ *   // 按下 ESC，关闭模态框
+ *   closeModal()
+ * })
+ * ```
+ */
+export declare function useEscape(callback: () => void): void;
+/**
+ * 元素尺寸变化监听 Hook
+ * 当目标元素尺寸变化时触发回调
+ *
+ * @param target 目标元素 Ref
+ * @param callback 尺寸变化时的回调函数
+ *
+ * @example
+ * ```ts
+ * const containerRef = ref<HTMLElement>()
+ *
+ * useResize(containerRef, (width, height) => {
+ *   console.log('尺寸变化:', width, height)
+ * })
+ * ```
+ */
+export declare function useResize(target: Ref<HTMLElement | undefined>, callback: (width: number, height: number) => void): void;
+/**
+ * DOM 变化监听 Hook
+ * 当目标 DOM 发生变化时触发回调
+ *
+ * @param target 目标元素 Ref
+ * @param options MutationObserver 配置选项
+ * @param callback DOM 变化时的回调函数
+ *
+ * @example
+ * ```ts
+ * const containerRef = ref<HTMLElement>()
+ *
+ * useDOMObserver(
+ *   containerRef,
+ *   { childList: true },
+ *   (mutations) => {
+ *     console.log('DOM 变化:', mutations)
+ *   }
+ * )
+ * ```
+ */
+export declare function useDOMObserver(target: Ref<HTMLElement | undefined>, options: MutationObserverInit | undefined, callback: (mutations: MutationRecord[]) => void): void;
+/**
+ * 滚动监听 Hook
+ * 当目标元素滚动时触发回调
+ *
+ * @param target 目标元素 Ref
+ * @param callback 滚动时的回调函数
+ *
+ * @example
+ * ```ts
+ * const containerRef = ref<HTMLElement>()
+ *
+ * useScroll(containerRef, (scrollTop, scrollLeft) => {
+ *   console.log('滚动位置:', scrollTop, scrollLeft)
+ * })
+ * ```
+ */
+export declare function useScroll(target: Ref<HTMLElement | undefined | Window>, callback: (scrollTop: number, scrollLeft: number) => void): void;
+/**
+ * 焦点控制 Hook
+ * 监听元素的焦点状态
+ *
+ * @param target 目标元素 Ref
+ * @param callback 焦点变化时的回调函数（可选）
+ * @returns 焦点状态对象
+ *
+ * @example
+ * ```ts
+ * const inputRef = ref<HTMLElement>()
+ * const { focused } = useFocus(inputRef)
+ *
+ * watch(focused, (isFocused) => {
+ *   console.log('焦点状态:', isFocused)
+ * })
+ * ```
+ */
+export declare function useFocus(target: Ref<HTMLElement | undefined>, callback?: (focused: boolean) => void): UseFocusReturn;
+/**
+ * 交叉观察器 Hook
+ * 监听元素是否进入视口
+ *
+ * @param target 目标元素 Ref
+ * @param callback 交叉状态变化时的回调函数
+ * @param options IntersectionObserver 配置选项
+ *
+ * @example
+ * ```ts
+ * const elementRef = ref<HTMLElement>()
+ *
+ * useIntersectionObserver(
+ *   elementRef,
+ *   (isIntersecting) => {
+ *     if (isIntersecting) {
+ *       console.log('元素进入视口')
+ *     }
+ *   },
+ *   { threshold: 0.5 }
+ * )
+ * ```
+ */
+export declare function useIntersectionObserver(target: Ref<HTMLElement | undefined>, callback: (isIntersecting: boolean) => void, options?: IntersectionObserverInit): void;
+/**
+ * 延迟动作 Hook
+ * 延迟执行某个动作，可取消
+ *
+ * @param delay 延迟时间（毫秒）
+ * @returns 延迟控制对象
+ *
+ * @example
+ * ```ts
+ * const { execute, cancel } = useDelayedAction(300)
+ *
+ * execute(() => {
+ *   console.log('延迟执行')
+ * })
+ *
+ * cancel() // 取消执行
+ * ```
+ */
+export declare function useDelayedAction(delay?: number): {
+    execute: (callback: () => void) => void;
+    cancel: () => void;
+};

package/es/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @xto/core
+ * XTO UI 核心模块
+ * 提供类型定义、工具函数、组合式函数、主题配置和国际化
+ */
+export * from './types';
+export * from './theme';
+export * from './utils';
+export * from './hooks';
+export * from './locale';
+export declare const version = "1.0.0";