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

package/components/base/cascader/useCascader.ts

@@ -0,0 +1,335 @@
+/**
+ * @description Cascader 组件核心 composable
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 核心逻辑：
+ * - 面板展开：按层级维护 activePath（当前激活的选项路径）
+ * - 路径追踪：selectedPath 记录已选中的完整路径节点
+ * - 搜索过滤：filterable 模式下递归扁平化所有叶子路径进行匹配
+ * - 多选：selectedPaths 记录多条已选路径
+ */
+import { computed, ref, toRef, watch } from 'vue';
+import { CascaderOption, CascaderProps } from './props';
+import { type HookContext } from '../../types/hook';
+
+/** 扁平化后的叶子路径，用于搜索 */
+export interface FlatCascaderOption {
+  /** 从根到当前节点的完整路径节点列表 */
+  path: CascaderOption[];
+  /** 路径标签拼接（用于搜索匹配） */
+  pathLabel: string;
+}
+
+/**
+ * 递归扁平化选项树，收集所有叶子节点路径
+ */
+const flattenOptions = (
+  options: CascaderOption[],
+  path: CascaderOption[] = [],
+): FlatCascaderOption[] => {
+  const result: FlatCascaderOption[] = [];
+  for (const option of options) {
+    const currentPath = [...path, option];
+    if (!option.children || option.children.length === 0 || option.leaf) {
+      // 叶子节点
+      result.push({
+        path: currentPath,
+        pathLabel: currentPath.map(o => o.label).join(' '),
+      });
+    } else {
+      // 非叶子节点，继续递归
+      result.push(...flattenOptions(option.children, currentPath));
+    }
+  }
+  return result;
+};
+
+/**
+ * 根据值路径从选项树中找到对应节点路径
+ */
+const findPathByValues = (
+  options: CascaderOption[],
+  values: (string | number)[],
+): CascaderOption[] | null => {
+  if (!values.length) return null;
+  const [head, ...rest] = values;
+  const found = options.find(o => o.value === head);
+  if (!found) return null;
+  if (!rest.length) return [found];
+  if (!found.children?.length) return null;
+  const subPath = findPathByValues(found.children, rest);
+  return subPath ? [found, ...subPath] : null;
+};
+
+export function useCascader(props: CascaderProps, ctx: HookContext) {
+  const optionsRef = toRef(() => props.options ?? []);
+  const modelValueRef = toRef(() => props.modelValue ?? []);
+  const multipleRef = toRef(() => props.multiple ?? false);
+
+  // --- 状态 ---
+  /** 下拉面板是否展开 */
+  const isOpen = ref(false);
+  /** 搜索关键词 */
+  const searchQuery = ref('');
+  /** 当前各列激活的选项（hover/click 展开下一列用） */
+  const activePath = ref<CascaderOption[]>([]);
+
+  // --- 计算属性 ---
+
+  /**
+   * 各列可见的选项列表
+   * 第 0 列 = 根选项，第 N 列 = activePath[N-1].children
+   */
+  const columns = computed<CascaderOption[][]>(() => {
+    const cols: CascaderOption[][] = [optionsRef.value];
+    for (const node of activePath.value) {
+      if (node.children?.length) {
+        cols.push(node.children);
+      }
+    }
+    return cols;
+  });
+
+  /** 扁平化叶子路径（filterable 模式下使用） */
+  const flatOptions = computed<FlatCascaderOption[]>(() => {
+    if (!props.filterable) return [];
+    return flattenOptions(optionsRef.value);
+  });
+
+  /** 过滤后的扁平选项（搜索模式下显示） */
+  const filteredOptions = computed<FlatCascaderOption[]>(() => {
+    if (!searchQuery.value) return flatOptions.value;
+    const q = searchQuery.value.toLowerCase();
+    return flatOptions.value.filter(item =>
+      item.pathLabel.toLowerCase().includes(q),
+    );
+  });
+
+  /** 是否处于搜索模式 */
+  const isSearching = computed(() => props.filterable && searchQuery.value.length > 0);
+
+  /** 单选：当前已选路径的节点列表 */
+  const selectedPath = computed<CascaderOption[]>(() => {
+    if (multipleRef.value) return [];
+    const mv = modelValueRef.value as (string | number)[];
+    if (!mv.length) return [];
+    return findPathByValues(optionsRef.value, mv) ?? [];
+  });
+
+  /** 多选：当前已选的路径列表 */
+  const selectedPaths = computed<CascaderOption[][]>(() => {
+    if (!multipleRef.value) return [];
+    const mv = modelValueRef.value as (string | number)[][];
+    return mv
+      .map(vals => findPathByValues(optionsRef.value, vals))
+      .filter((p): p is CascaderOption[] => p !== null);
+  });
+
+  /** 触发器展示文字 */
+  const displayLabel = computed<string>(() => {
+    if (multipleRef.value) return '';
+    if (!selectedPath.value.length) return '';
+    if (props.showAllLevels) {
+      return selectedPath.value.map(o => o.label).join(` ${props.separator ?? '/'} `);
+    }
+    return selectedPath.value[selectedPath.value.length - 1]?.label ?? '';
+  });
+
+  /** 多选标签列表 */
+  const selectedTags = computed<string[]>(() => {
+    if (!multipleRef.value) return [];
+    return selectedPaths.value.map(path => {
+      if (props.showAllLevels) {
+        return path.map(o => o.label).join(` ${props.separator ?? '/'} `);
+      }
+      return path[path.length - 1]?.label ?? '';
+    });
+  });
+
+  // --- 事件处理 ---
+
+  /** 打开面板时，用已选路径初始化 activePath */
+  const initActivePath = () => {
+    if (multipleRef.value || !selectedPath.value.length) {
+      activePath.value = [];
+      return;
+    }
+    // 已选路径去掉最后一个叶子节点（只保留展开路径）
+    activePath.value = selectedPath.value.slice(0, -1);
+  };
+
+  /** 打开下拉面板 */
+  const open = () => {
+    if (props.disabled) return;
+    initActivePath();
+    isOpen.value = true;
+  };
+
+  /** 关闭下拉面板 */
+  const close = () => {
+    isOpen.value = false;
+    searchQuery.value = '';
+  };
+
+  /** 点击触发器 */
+  const onTriggerClick = () => {
+    if (isOpen.value) {
+      close();
+    } else {
+      open();
+    }
+  };
+
+  /**
+   * 悬停/点击某列的某个选项，展开下一列
+   * @param option 被激活的选项
+   * @param colIndex 所在列的索引
+   */
+  const onOptionEnter = (option: CascaderOption, colIndex: number) => {
+    if (option.disabled) return;
+    // 截断 activePath 到当前列
+    activePath.value = [...activePath.value.slice(0, colIndex), option];
+  };
+
+  /**
+   * 点击选项（单选叶子节点 → 选中并关闭；多选叶子节点 → 切换选中）
+   */
+  const onOptionClick = (option: CascaderOption, colIndex: number) => {
+    if (option.disabled) return;
+
+    // 先更新展开路径
+    onOptionEnter(option, colIndex);
+
+    const isLeaf = !option.children?.length || option.leaf;
+    if (!isLeaf) return; // 非叶子节点只展开，不选中
+
+    // 构造完整的值路径
+    const fullPath = [...activePath.value.slice(0, colIndex), option];
+    const valuePath = fullPath.map(o => o.value);
+
+    if (multipleRef.value) {
+      // 多选：切换
+      const currentMv = (modelValueRef.value as (string | number)[][]) ?? [];
+      const existIndex = currentMv.findIndex(
+        p => p.length === valuePath.length && p.every((v, i) => v === valuePath[i]),
+      );
+      let newMv: (string | number)[][];
+      if (existIndex >= 0) {
+        newMv = currentMv.filter((_, i) => i !== existIndex);
+      } else {
+        newMv = [...currentMv, valuePath];
+      }
+      ctx.emit('update:modelValue', newMv);
+      ctx.emit('change', newMv);
+    } else {
+      // 单选：选中并关闭
+      ctx.emit('update:modelValue', valuePath);
+      ctx.emit('change', valuePath);
+      close();
+    }
+  };
+
+  /** 搜索模式下点击扁平选项 */
+  const onFlatOptionClick = (item: FlatCascaderOption) => {
+    const valuePath = item.path.map(o => o.value);
+
+    if (multipleRef.value) {
+      const currentMv = (modelValueRef.value as (string | number)[][]) ?? [];
+      const existIndex = currentMv.findIndex(
+        p => p.length === valuePath.length && p.every((v, i) => v === valuePath[i]),
+      );
+      let newMv: (string | number)[][];
+      if (existIndex >= 0) {
+        newMv = currentMv.filter((_, i) => i !== existIndex);
+      } else {
+        newMv = [...currentMv, valuePath];
+      }
+      ctx.emit('update:modelValue', newMv);
+      ctx.emit('change', newMv);
+    } else {
+      ctx.emit('update:modelValue', valuePath);
+      ctx.emit('change', valuePath);
+      close();
+    }
+  };
+
+  /** 删除多选标签 */
+  const onDeleteTag = (tagIndex: number) => {
+    const currentMv = (modelValueRef.value as (string | number)[][]) ?? [];
+    const newMv = currentMv.filter((_, i) => i !== tagIndex);
+    ctx.emit('update:modelValue', newMv);
+    ctx.emit('change', newMv);
+  };
+
+  /** 清空选中值 */
+  const onClear = (e: MouseEvent) => {
+    e.stopPropagation();
+    const emptyValue = multipleRef.value ? [] : [];
+    ctx.emit('update:modelValue', emptyValue);
+    ctx.emit('change', emptyValue);
+    close();
+  };
+
+  /** 判断某个选项是否在当前激活路径中 */
+  const isActiveOption = (option: CascaderOption, colIndex: number) => {
+    return activePath.value[colIndex]?.value === option.value;
+  };
+
+  /** 判断某个选项是否为已选路径的一部分（高亮） */
+  const isSelectedOption = (option: CascaderOption, colIndex: number) => {
+    if (multipleRef.value) {
+      return selectedPaths.value.some(path => path[colIndex]?.value === option.value);
+    }
+    return selectedPath.value[colIndex]?.value === option.value;
+  };
+
+  /** 判断扁平选项是否被选中（多选） */
+  const isFlatOptionSelected = (item: FlatCascaderOption) => {
+    const valuePath = item.path.map(o => o.value);
+    if (multipleRef.value) {
+      const currentMv = (modelValueRef.value as (string | number)[][]) ?? [];
+      return currentMv.some(
+        p => p.length === valuePath.length && p.every((v, i) => v === valuePath[i]),
+      );
+    }
+    const mv = modelValueRef.value as (string | number)[];
+    return mv.length === valuePath.length && valuePath.every((v, i) => v === mv[i]);
+  };
+
+  // options 变化时触发 expandChange
+  watch(activePath, (newPath) => {
+    ctx.emit('expandChange', newPath.map(o => o.value));
+  });
+
+  return {
+    // 状态
+    isOpen,
+    searchQuery,
+    activePath,
+    // 计算
+    columns,
+    filteredOptions,
+    isSearching,
+    selectedPath,
+    selectedPaths,
+    displayLabel,
+    selectedTags,
+    // 事件
+    open,
+    close,
+    onTriggerClick,
+    onOptionEnter,
+    onOptionClick,
+    onFlatOptionClick,
+    onDeleteTag,
+    onClear,
+    // 工具
+    isActiveOption,
+    isSelectedOption,
+    isFlatOptionSelected,
+  };
+}

package/components/base/checkbox/api.ts

@@ -0,0 +1,24 @@
+/**
+ * @description checkbox api
+ * @author 阿怪
+ * @date 2023/4/20 21:55
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { CheckboxGroupProps, CheckboxProps } from './props';
+
+export const props: MCOPO<CheckboxProps> = {
+  label: { type: String, default: '' },
+  checked: { type: Boolean, default: undefined },
+  value: { type: null, default: undefined },
+  modelValue: { type: null, default: undefined },
+  indeterminate: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+};
+
+export const checkboxGroupProps: MCOPO<CheckboxGroupProps> = {
+  value: { type: Array, default: () => [] },
+  type: { type: String as MPropType<'single' | 'multiple'>, default: 'single' },
+};

package/components/base/checkbox/index.ts

@@ -0,0 +1,17 @@
+/**
+ * @description
+ * @author 阿怪
+ * @date 2024/12/24 10:59
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+import { useCheckbox } from './useCheckbox';
+
+export const CheckboxCore = {
+  props,
+  useCheckbox,
+};
+
+export type { CheckboxProps } from './props';

package/components/base/checkbox/props.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @description checkbox api type
+ * @author youus
+ * @date 2022/4/7 00:02
+ * @version v1.0.0
+ *
+ * @name m-checkbox
+ * @docDescription Checkbox component with shuimo-ui style.
+ *                 水墨组件的复选框组件。
+ * @docUrl https://shuimo.design/checkbox
+ *
+ * Hello, humor
+ */
+import { HTMLElementEvent } from '../../../types/common/common';
+
+export declare type CheckboxProps = {
+  /**
+   * @description checkbox label text, will replace slot
+   *              文本 会覆盖slot
+   * @type string
+   * @default ''
+   */
+  label?: string,
+  /**
+   * @description checkbox checked
+   *              是否选中
+   * @default undefined
+   */
+  checked?: boolean | undefined | null,
+  /**
+   * @description checkbox value
+   * @default undefined
+   */
+  value?: any,
+  /**
+   * @description value
+   *              绑定值
+   * @type any
+   * @default ''
+   */
+  modelValue?: any,
+  /**
+   * @description checkbox indeterminate
+   *              是否为不确定状态
+   * @default undefined
+   */
+  indeterminate?: boolean,
+  /**
+   * @description checkbox disabled
+   *              是否禁用 todo 暂未支持
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean
+};
+
+
+export declare type CheckboxEvents = {
+  onChange?: (e: HTMLElementEvent<HTMLInputElement>) => void,
+  onInput?: (value: any) => void
+};
+
+export declare type CheckboxGroupProps = {
+  /**
+   * @description checkbox value group
+   * @type array
+   * @default []
+   */
+  value?: any[],
+  /**
+   * @description type
+   * @type string
+   * @default single
+   * @enum 'single' | 'multiple'
+   */
+  type?: 'single' | 'multiple'
+};

package/components/base/checkbox/useCheckbox.ts

@@ -0,0 +1,43 @@
+/**
+ * @description
+ * @author 阿怪
+ * @date 2024/12/24 10:58
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref, watch } from 'vue';
+import { getNewModelValue, initChecked } from '../../../compositions/input/useBooleanInput.ts';
+import { CheckboxProps } from './props';
+import { type HookContext } from '../../types/hook';
+
+
+export function useCheckbox<
+  Props extends Required<CheckboxProps>,
+>(props: Props, ctx: HookContext) {
+  const checkboxClass = ['m-checkbox', { 'm-disabled': props.disabled, 'm-indeterminate': props.indeterminate }];
+
+  const checked = ref(initChecked(props));
+
+  watch(() => props.modelValue, () => {
+    checked.value = initChecked(props);
+  });
+
+  const onClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (props.disabled) {
+      return;
+    }
+    checked.value = !checked.value;
+    const newVal = getNewModelValue(props, checked.value);
+    ctx.emit('change', newVal);
+    ctx.emit('update:modelValue', newVal);
+  }
+
+  return {
+    checkboxClass,
+    checked,
+    indeterminate: props.indeterminate,
+    onClick
+  };
+}

package/components/base/collapse/api.ts

@@ -0,0 +1,21 @@
+/**
+ * @description collapse 运行时 props
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { CollapseItemProps, CollapseProps } from './props';
+
+export const props: MCOPO<CollapseProps> = {
+  modelValue: { type: [Array, String, Number], required: true },
+  accordion: { type: Boolean, default: false },
+};
+
+export const itemProps: MCOPO<CollapseItemProps> = {
+  name: { type: [String, Number], required: true },
+  title: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+};

package/components/base/collapse/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @description collapse core 导出
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props, itemProps } from './api';
+import { useCollapse } from './useCollapse';
+
+export const CollapseCore = {
+  props,
+  itemProps,
+  useCollapse,
+};
+
+export type { CollapseProps, CollapseItemProps } from './props';

package/components/base/collapse/props.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @description collapse api type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type CollapseProps = {
+  /**
+   * @description 当前展开的面板名，手风琴模式为单值，普通模式为数组
+   * @type (string | number)[] | string | number
+   */
+  modelValue: (string | number)[] | string | number;
+  /**
+   * @description 是否开启手风琴模式（同时只允许一个面板展开）
+   * @type boolean
+   * @default false
+   */
+  accordion?: boolean;
+};
+
+export declare type CollapseItemProps = {
+  /**
+   * @description 面板唯一标识
+   * @type string | number
+   */
+  name: string | number;
+  /**
+   * @description 面板标题
+   * @type string
+   */
+  title?: string;
+  /**
+   * @description 是否禁用该面板
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean;
+};
+
+export declare type CollapseEvents = {
+  onChange?: (activeNames: (string | number)[]) => void;
+};

package/components/base/collapse/useCollapse.ts

@@ -0,0 +1,81 @@
+/**
+ * @description collapse composable
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { computed } from 'vue';
+import { CollapseProps } from './props';
+import { type HookContext } from '../../types/hook';
+
+export function useCollapse(props: Required<CollapseProps>, ctx: HookContext) {
+  const { emit } = ctx;
+
+  /**
+   * 将 modelValue 规范化为数组，统一内部处理
+   */
+  const activeNames = computed<(string | number)[]>(() => {
+    const val = props.modelValue;
+    if (Array.isArray(val)) { return val; }
+    if (val === undefined || val === null || val === '') { return []; }
+    return [val];
+  });
+
+  /**
+   * 判断指定面板是否处于展开状态
+   */
+  const isActive = (name: string | number): boolean => {
+    return activeNames.value.includes(name);
+  };
+
+  /**
+   * 切换面板展开/收起
+   * - 手风琴模式：同时只允许一个展开
+   * - 普通模式：在数组中添加/移除
+   */
+  const toggle = (name: string | number, disabled: boolean) => {
+    if (disabled) { return; }
+
+    let next: (string | number)[];
+
+    if (props.accordion) {
+      // 手风琴：已展开则收起，否则切换为仅展开当前
+      next = isActive(name) ? [] : [name];
+    } else {
+      if (isActive(name)) {
+        next = activeNames.value.filter(n => n !== name);
+      } else {
+        next = [...activeNames.value, name];
+      }
+    }
+
+    // 向父组件同步值
+    emit('update:modelValue', props.accordion ? (next[0] ?? '') : next);
+    emit('change', next);
+  };
+
+  // ---- class 计算 ----
+
+  const collapseClass = computed(() => ['m-collapse']);
+
+  const getItemClass = (name: string | number, disabled: boolean) => [
+    'm-collapse-item',
+    { 'm-collapse-item-active': isActive(name) },
+    { 'm-collapse-item-disabled': disabled },
+  ];
+
+  const headerClass = ['m-collapse-header'];
+  const contentClass = ['m-collapse-content'];
+
+  return {
+    activeNames,
+    isActive,
+    toggle,
+    collapseClass,
+    getItemClass,
+    headerClass,
+    contentClass,
+  };
+}