@kine-design/core 0.0.1-beta.1 → 0.0.1-beta.2

package/compositions/common/useDebounceFn.ts

@@ -0,0 +1,27 @@
+/**
+ * @description 防抖hook
+ * @author youus
+ * @date 2022/8/19 23:47
+ * @version v1.0.0
+ *
+ * Hello, humor
+ */
+import type { DebounceFilterOptions, FunctionArgs } from '../utils/filters';
+import { createFilterWrapper, debounceFilter } from '../utils/filters';
+
+/**
+ * Debounce execution of a function.
+ *
+ * @see https://vueuse.org/useDebounceFn
+ * @param  fn          A function to be executed after delay milliseconds debounced.
+ * @param  ms          A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+ * @param  opts        options
+ *
+ * @return A new, debounce, function.
+ */
+export default function useDebounceFn<T extends FunctionArgs>(fn: T, ms: number = 200, options: DebounceFilterOptions = {}): T {
+  return createFilterWrapper(
+    debounceFilter(ms, options),
+    fn,
+  );
+}

package/compositions/common/useDrag.ts

@@ -0,0 +1,65 @@
+/**
+ * @description drag hook
+ * @author 阿怪
+ * @date 2023/5/23 16:42
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import * as _interactjsModule from 'interactjs';
+// interactjs 是 UMD 格式，Vite ESM 不提供 default export，需兼容处理
+const interactjs = (_interactjsModule as any).default ?? _interactjsModule;
+import { Ref, ref } from 'vue';
+
+// 方向类型，内联定义避免引用 lib 的 MessageDirectionType
+export type DragDirectionType = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | string;
+export type InteractEvent = any;
+export type DragPosition = { x: number, y: number };
+export type DragOption = { startAxis: 'x' | 'y', lockAxis: 'x' | 'y' };
+
+
+export default function useDrag(config: {
+  direction: DragDirectionType,
+  value?: {
+    domRef?: Ref<HTMLElement | null>
+  },
+  event?: {
+    getOption?: () => DragOption,
+    movePositionHandler?: (event: InteractEvent, position: DragPosition) => DragPosition,
+    onDragLeave?: (event: InteractEvent) => void
+  }
+}) {
+  const domRef = config.value?.domRef ?? ref();
+
+  const init = (basePosition?: { x?: number, y?: number }) => {
+    if (!domRef.value) {
+      return;
+    }
+    const position: DragPosition = { x: basePosition?.x ?? 0, y: basePosition?.y ?? 0 };
+    return interactjs(domRef.value)
+      .styleCursor(false)
+      .draggable({
+        ...config.event?.getOption?.(),
+        listeners: {
+          end: (event: InteractEvent) => {
+            config.event?.onDragLeave?.(event);
+          },
+          move: (event: InteractEvent) => {
+            const { x, y } = config.event?.movePositionHandler?.(event, position) ?? {
+              x: position.x + event.dx, y: position.y + event.dy,
+            };
+            position.x = x;
+            position.y = y;
+            event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;
+          },
+        },
+      });
+  };
+
+
+  return {
+    domRef,
+    init,
+  };
+
+}

package/compositions/common/useElementSize.ts

@@ -0,0 +1,37 @@
+/**
+ * @description element size hook
+ * @author 阿怪
+ * @date 2023/6/24 16:17
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * Learn from vueuse useElementSize
+ */
+import { Ref, ref } from 'vue';
+import { useResizeObserver } from './useResizeObserver';
+
+
+export function useElementSize(
+  target: Ref<HTMLElement | null>,
+  // initialSize = { w: 0, h: 0 },
+  // options: ResizeObserverOptions = {},
+) {
+
+  const w = ref(0);
+  const h = ref(0);
+
+  useResizeObserver(target, () => {
+    const ele = target.value;
+    if (window && ele) {
+      const styles = window.getComputedStyle(ele);
+      w.value = Number.parseFloat(styles.width);
+      h.value = Number.parseFloat(styles.height);
+    }
+  });
+
+
+  return {
+    w, h,
+  };
+}

package/compositions/common/useEventListener.ts

@@ -0,0 +1,48 @@
+/**
+ * @description event listener hook
+ * @author 阿怪
+ * @date 2023/5/12 00:57
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+
+export type EventListenerOptions = {
+  target: any,
+  event: string,
+  handler: EventListenerOrEventListenerObject,
+};
+
+export default function useEventListener(options: EventListenerOptions) {
+
+  const getTarget = () => {
+    if (typeof options.target === 'function') {
+      return options.target();
+    }
+    return options.target;
+  };
+
+  const add = () => {
+    getTarget().addEventListener(options.event, options.handler);
+  };
+
+  const remove = () => {
+    getTarget().removeEventListener(options.event, options.handler);
+  };
+
+  const onMounted = () => {
+    add();
+  };
+
+  const onBeforeDestroy = () => {
+    remove();
+  };
+
+  return {
+    add, remove,
+    onMounted,
+    onBeforeDestroy,
+  };
+
+}

package/compositions/common/usePopover.ts

@@ -0,0 +1,45 @@
+/**
+ * @description popover hook, for component like select, datepicker, etc.
+ * @author 阿怪
+ * @date 2023/5/19 00:12
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { PopoverProps } from '../../components/message/popover/props';
+import { arrow, flip, offset, type OffsetOptions, shift } from '@floating-ui/dom';
+
+export {
+  flip,
+  offset,
+  shift,
+  arrow,
+};
+
+export default function usePopover(
+  props?: Partial<PopoverProps>,
+  middleware?: {
+    offset?: OffsetOptions
+    extends?: any[]
+  },
+) {
+
+  const offsetOptions = middleware?.offset ?? { crossAxis: 3 };
+
+
+  const popoverOptions: PopoverProps = {
+    placement: props?.placement ?? 'bottom-start',
+    popper: {
+      middleware: [
+        offset(offsetOptions),
+        flip(),
+        shift(),
+        ...middleware?.extends ?? [],
+      ],
+    },
+  };
+
+  return {
+    popoverOptions,
+  };
+}

package/compositions/common/useResizeObserver.ts

@@ -0,0 +1,43 @@
+/**
+ * @description resizeObserver hook
+ * @author 阿怪
+ * @date 2023/6/24 16:08
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * Learn from vueuse useResizeObserver
+ */
+
+import { Ref, watch } from 'vue';
+
+export function useResizeObserver(
+  target: Ref<HTMLElement | null>,
+  callback: ResizeObserverCallback,
+  options: ResizeObserverOptions = {},
+) {
+
+  let observer: ResizeObserver | undefined;
+
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+
+  // vueuse used watch
+  watch(target, () => {
+    if (target.value) {
+      cleanup();
+      observer = new ResizeObserver(callback);
+      observer.observe(target.value, options);
+    }
+  });
+
+
+  return {
+    cleanup,
+  };
+
+}

package/compositions/common/useTeleport.ts

@@ -0,0 +1,24 @@
+/**
+ * @description teleport hook
+ * @author 阿怪
+ * @date 2023/5/5 10:40
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { h, Teleport, TeleportProps, VNode } from 'vue';
+import { MTeleportProps } from '../../types/common/common';
+
+export default function useTeleport(options: {
+  teleportProps?: MTeleportProps | true,
+  slot: VNode | VNode[]
+}) {
+  return h(Teleport, initTeleportOptions(options.teleportProps as TeleportProps), options.slot);
+}
+
+export const initTeleportOptions = (options: TeleportProps | true | undefined) => {
+  if (options === true || options === undefined) {
+    return { to: 'body' };
+  }
+  return options;
+};

package/compositions/input/useBooleanInput.ts

@@ -0,0 +1,52 @@
+/**
+ * @description boolean input like checkbox/radio... hooks
+ * @author 阿怪
+ * @date 2023/4/23 15:22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { isBoolean, notEmpty } from '../../tools';
+
+export const initChecked = (props: {
+  checked: boolean | null | undefined,
+  modelValue: any,
+  value: any
+}) => {
+  if (props.checked) {
+    return props.checked;
+  }
+
+  if (notEmpty(props.modelValue)) {
+    if (notEmpty(props.value)) {
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(props.value);
+      }
+      return props.value === props.modelValue;
+    }
+
+    if (isBoolean(props.modelValue)) {
+      return props.modelValue;
+    }
+  }
+
+  return false;
+};
+
+
+export const getNewModelValue = (props: { value: any, modelValue?: any }, checked: boolean) => {
+  if (props.value) {
+    if (Array.isArray(props.modelValue)) {
+      const arr = [...props.modelValue];
+      if (checked) {
+        if (!arr.includes(props.value)) arr.push(props.value);
+      } else {
+        const idx = arr.indexOf(props.value);
+        if (idx !== -1) arr.splice(idx, 1);
+      }
+      return arr;
+    }
+    return checked ? props.value : undefined;
+  }
+  return checked;
+};

package/compositions/modal/useModal.ts

@@ -0,0 +1,72 @@
+/**
+ * @description 模态框公共 composable（dialog / drawer / confirm 共用）
+ * @author 阿怪
+ * @date 2026/2/25 16:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 处理 visible 状态、遮罩层点击关闭、emit 同步
+ */
+import { ref, watch } from 'vue';
+import { ModelMask } from '../../types/common/model';
+
+export interface UseModalProps {
+  visible?: boolean;
+  mask?: ModelMask;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useModal(props: UseModalProps, emit: (...args: any[]) => void) {
+  const visible = ref(props.visible ?? false);
+
+  watch(() => props.visible, (val) => {
+    visible.value = val ?? false;
+  });
+
+  /** 打开 */
+  const open = () => {
+    visible.value = true;
+    emit('update:visible', true);
+  };
+
+  /** 关闭 */
+  const close = () => {
+    visible.value = false;
+    emit('update:visible', false);
+  };
+
+  /** 切换 */
+  const toggle = () => {
+    if (visible.value) { close(); } else { open(); }
+  };
+
+  /** 遮罩层点击 */
+  const onMaskClick = () => {
+    const mask = props.mask;
+    const clickClose = mask?.clickClose ?? true;
+    if (clickClose) {
+      close();
+    }
+  };
+
+  /** 是否显示遮罩 */
+  const showMask = () => {
+    return props.mask?.show ?? true;
+  };
+
+  /** 阻止内容区域点击冒泡到遮罩 */
+  const onContentClick = (e: MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  return {
+    visible,
+    open,
+    close,
+    toggle,
+    onMaskClick,
+    showMask,
+    onContentClick,
+  };
+}

package/compositions/popper/useClickAway.ts

@@ -0,0 +1,41 @@
+/**
+ * @description click away hook
+ * @author 阿怪
+ * @date 2023/5/12 01:02
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import useEventListener from '../common/useEventListener';
+
+
+const event = 'pointerdown';
+export default function useClickAway(options: {
+  target: any,
+  handler: (event: any) => void
+}) {
+  if (typeof window === 'undefined' || !window) {
+    return;
+  }
+
+  const listener = (event: any) => {
+    const el = typeof options.target === 'function' ? options.target() : options.target;
+    if (!el) {
+      return;
+    }
+
+    if (el === event.target || event.composedPath().includes(el)) {
+      return;
+    }
+
+    options.handler(event);
+  };
+
+  return useEventListener({
+    target: window,
+    event,
+    handler: listener,
+  });
+
+
+}

package/compositions/popper/usePopper.ts

@@ -0,0 +1,63 @@
+/**
+ * @description popper hook
+ * @author 阿怪
+ * @date 2023/1/29 10:21
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { arrow, autoUpdate, computePosition, ComputePositionConfig } from '@floating-ui/dom';
+
+export type Placement =
+  | 'top' | 'top-start' | 'top-end'
+  | 'right' | 'right-start' | 'right-end'
+  | 'bottom' | 'bottom-start' | 'bottom-end'
+  | 'left' | 'left-start' | 'left-end';
+export type PopperConfig = Partial<ComputePositionConfig>;
+
+type DomStyle = { left: string; top: string; display: string; position: string };
+export type PositionStyle = { style: DomStyle; arrowStyle: DomStyle, placement: Placement };
+
+export const usePopper = (
+  triggerNode: HTMLElement,
+  popperNode: HTMLElement,
+  update: (data: PositionStyle) => void,
+  arrowNode?: HTMLElement,
+  config?: PopperConfig,
+) => {
+
+  const getPositionStyle = async () => {
+    if (arrowNode && config?.middleware) {
+      config.middleware.push(arrow({ element: arrowNode }));
+    }
+
+
+    const { x, y, placement, middlewareData } = await computePosition(triggerNode, popperNode, config);
+    const res: PositionStyle = {
+      style: {
+        left: `${x}px`,
+        top: `${y}px`,
+        display: 'block',
+        position: 'absolute',
+      },
+      arrowStyle: {
+        left: `${middlewareData.arrow?.x ?? 0}px`,
+        top: `${middlewareData.arrow?.y ?? 0}px`,
+        display: 'block',
+        position: 'absolute',
+      },
+      placement,
+    };
+    update(res);
+
+    return res;
+  };
+
+  const clear = autoUpdate(triggerNode, popperNode, getPositionStyle);
+
+
+  return {
+    getPositionStyle,
+    clear,
+  };
+};

package/compositions/utils/filters.ts

@@ -0,0 +1,135 @@
+/**
+ * @description event filter(防抖、节流)
+ * @author youus
+ * @date 2022/8/20 00:17
+ * @version v1.0.0
+ *
+ * Hello, humor
+ */
+
+
+export type FunctionArgs<Args extends any[] = any[], Return = void> = (...args: Args) => Return;
+
+export interface FunctionWrapperOptions<Args extends any[] = any[], This = any> {
+  fn: FunctionArgs<Args, This>,
+  args: Args,
+  thisArg: This
+}
+
+export type EventFilter<Args extends any[] = any[], This = any> = (
+  invoke: () => void,
+  options: FunctionWrapperOptions<Args, This>,
+) => void;
+
+export interface DebounceFilterOptions {
+  /**
+   * The maximum time allowed to be delayed before it's invoked.
+   * In milliseconds.
+   */
+  maxWait?: number;
+}
+
+/**
+ * @internal
+ */
+export function createFilterWrapper<T extends FunctionArgs>(filter: EventFilter, fn: T) {
+  function wrapper(this: any, ...args: any[]) {
+    filter(() => fn.apply(this, args), { fn, thisArg: this, args });
+  }
+
+  return wrapper as any as T;
+}
+
+/**
+ * Create an EventFilter that debounce the events
+ *
+ * @param ms
+ * @param options
+ */
+export function debounceFilter(ms: number, options: DebounceFilterOptions = {}) {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let maxTimer: ReturnType<typeof setTimeout> | undefined | null;
+
+  const filter: EventFilter = invoke => {
+    const duration = ms;
+    const maxDuration = options.maxWait;
+
+    if (timer) clearTimeout(timer);
+
+    if (duration <= 0 || (maxDuration !== undefined && maxDuration <= 0)) {
+      if (maxTimer) {
+        clearTimeout(maxTimer);
+        maxTimer = null;
+      }
+      return invoke();
+    }
+
+    // Create the maxTimer. Clears the regular timer on invoke
+    if (maxDuration && !maxTimer) {
+      maxTimer = setTimeout(() => {
+        if (timer) clearTimeout(timer);
+        maxTimer = null;
+        invoke();
+      }, maxDuration);
+    }
+
+    // Create the regular timer. Clears the max timer on invoke
+    timer = setTimeout(() => {
+      if (maxTimer) clearTimeout(maxTimer);
+      maxTimer = null;
+      invoke();
+    }, duration);
+  };
+
+  return filter;
+}
+
+/**
+ * Create an EventFilter that throttle the events
+ *
+ * @param ms
+ * @param [trailing=true]
+ * @param [leading=true]
+ */
+export function throttleFilter(ms: number, trailing = true, leading = true) {
+  let lastExec = 0;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let isLeading = true;
+
+  const clear = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  };
+
+  const filter: EventFilter = invoke => {
+    const duration = ms;
+    const elapsed = Date.now() - lastExec;
+
+    clear();
+
+    if (duration <= 0) {
+      lastExec = Date.now();
+      return invoke();
+    }
+
+    if (elapsed > duration && (leading || !isLeading)) {
+      lastExec = Date.now();
+      invoke();
+    } else if (trailing) {
+      timer = setTimeout(() => {
+        lastExec = Date.now();
+        isLeading = true;
+        clear();
+        invoke();
+      }, duration);
+    }
+
+    if (!leading && !timer) timer = setTimeout(() => (isLeading = true), duration);
+
+    isLeading = false;
+  };
+
+  return filter;
+}