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

package/components/base/select/useSelect.ts

@@ -0,0 +1,280 @@
+/**
+ * @description select 核心 composable
+ * @author 阿怪
+ * @date 2026/2/25 14:40
+ * @version v1.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 用 computed + ref 替代原 class 继承方案
+ * 单选/多选通过 props.multiple 分支处理
+ * fetch 通过 IntersectionObserver 观察最后一个选项实现
+ * v1.0.1 新增 filterable 支持：开启后 inputReadonly 为 false，可输入过滤 阿怪 2026/2/27
+ */
+import { computed, ref, watch, toRef, onBeforeUnmount } from 'vue';
+import { SelectProps } from './props';
+import { useSelectTools } from './useSelectTools';
+
+export interface SelectOptionItem {
+  /** 原始值 */
+  value: any;
+  /** 在 options 数组中的索引 */
+  index: number;
+  /** 是否选中 */
+  isSelected: boolean;
+}
+
+export function useSelect(props: SelectProps, ctx: any) {
+  const tools = useSelectTools(props);
+  const optionsRef = toRef(() => props.options ?? []);
+  const modelValueRef = toRef(() => props.modelValue);
+  const multipleRef = toRef(() => props.multiple ?? false);
+
+  /**
+   * 输入框是否只读：
+   * - filterable=true 时强制可编辑（忽略 readonly prop）
+   * - 否则沿用 props.readonly（默认 true）
+   */
+  const inputReadonly = toRef(() => props.filterable ? false : (props.readonly ?? true));
+
+  // --- 状态 ---
+  const inputValue = ref('');
+  const isOpen = ref(false);
+  const fetchLoading = ref(false);
+
+  // --- 选中状态 ---
+  /** 多选时记录选中的索引集合 */
+  const selectedIndices = ref<Set<number>>(new Set());
+
+  /** 判断某个 option 是否选中 */
+  const isSelected = (option: any, index: number): boolean => {
+    if (multipleRef.value) {
+      return selectedIndices.value.has(index);
+    }
+    if (props.toMatch) {
+      return props.toMatch(option, modelValueRef.value);
+    }
+    return modelValueRef.value === tools.getModelValue(option);
+  };
+
+  // --- 选项列表 ---
+  /** 全量选项（带 isSelected 标记） */
+  const allOptions = computed<SelectOptionItem[]>(() => {
+    return optionsRef.value.map((o, i) => ({
+      value: o,
+      index: i,
+      isSelected: isSelected(o, i),
+    }));
+  });
+
+  /** 过滤后的显示选项 */
+  const displayOptions = computed<SelectOptionItem[]>(() => {
+    return allOptions.value.filter(o => {
+      // 只读模式（非 filterable 且 readonly）直接不过滤
+      if (inputReadonly.value) return true;
+      // 没有输入值时不过滤
+      if (!inputValue.value) return true;
+      // 优先使用自定义过滤函数（filterable 或 readonly=false 场景均生效）
+      if (props.filter) {
+        return props.filter(o.value, inputValue.value);
+      }
+      // 默认：输入值包含在 optionParam 显示值中（大小写不敏感）
+      return tools.getOptionValue(o.value).toLowerCase().includes(inputValue.value.toLowerCase());
+    });
+  });
+
+  /** 多选已选标签 */
+  const selectedTags = computed<SelectOptionItem[]>(() => {
+    if (!multipleRef.value) return [];
+    return allOptions.value.filter(o => o.isSelected);
+  });
+
+  // --- 初始化 inputValue ---
+  const syncInputFromModelValue = () => {
+    if (multipleRef.value) {
+      inputValue.value = '';
+      return;
+    }
+    const mv = modelValueRef.value;
+    if (mv == null || mv === '') {
+      inputValue.value = '';
+      return;
+    }
+    const found = optionsRef.value.find(o => {
+      if (props.toMatch) return props.toMatch(o, mv);
+      return tools.getModelValue(o) === mv;
+    });
+    inputValue.value = found ? tools.getInputValue(found) : '';
+  };
+
+  /** 初始化多选选中状态 */
+  const syncSelectedFromModelValue = () => {
+    if (!multipleRef.value) return;
+    const mv = modelValueRef.value;
+    const newSet = new Set<number>();
+    if (Array.isArray(mv)) {
+      optionsRef.value.forEach((o, i) => {
+        const val = tools.getModelValue(o);
+        if (mv.includes(val)) {
+          newSet.add(i);
+        }
+        if (props.toMatch && mv.some((v: any) => props.toMatch!(o, v))) {
+          newSet.add(i);
+        }
+      });
+    }
+    selectedIndices.value = newSet;
+  };
+
+  // 初始同步
+  syncSelectedFromModelValue();
+  syncInputFromModelValue();
+
+  // --- 事件处理 ---
+
+  /** 点击选项 */
+  const onSelect = (index: number) => {
+    const option = optionsRef.value[index];
+    if (!option) return;
+    if (option.disabled) return;
+
+    if (multipleRef.value) {
+      // 多选：切换选中
+      const newSet = new Set(selectedIndices.value);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        newSet.add(index);
+      }
+      selectedIndices.value = newSet;
+      inputValue.value = '';
+
+      const newModelValue = optionsRef.value
+        .filter((_, i) => newSet.has(i))
+        .map(o => tools.getModelValue(o));
+      ctx.emit('update:modelValue', newModelValue);
+      ctx.emit('select', option);
+    } else {
+      // 单选：选中并关闭
+      inputValue.value = tools.getInputValue(option);
+      ctx.emit('update:modelValue', tools.getModelValue(option));
+      ctx.emit('select', option);
+      isOpen.value = false;
+    }
+  };
+
+  /** 删除多选标签 */
+  const onDeleteTag = (index: number) => {
+    const newSet = new Set(selectedIndices.value);
+    newSet.delete(index);
+    selectedIndices.value = newSet;
+
+    const newModelValue = optionsRef.value
+      .filter((_, i) => newSet.has(i))
+      .map(o => tools.getModelValue(o));
+    ctx.emit('update:modelValue', newModelValue);
+  };
+
+  /** 输入事件 */
+  const onInput = () => {
+    ctx.emit('input', inputValue.value);
+  };
+
+  /** 聚焦 */
+  const onFocus = (e: FocusEvent) => {
+    if (inputReadonly.value) return;
+    ctx.emit('focus', e, inputValue.value);
+  };
+
+  /** 失焦 */
+  const onBlur = (e: FocusEvent) => {
+    if (inputReadonly.value) return;
+    ctx.emit('blur', e, inputValue.value);
+
+    // 单选失焦时，如果输入值不匹配任何选项，清空
+    if (!multipleRef.value) {
+      const matched = displayOptions.value.find(o => o.isSelected);
+      if (matched && inputValue.value === tools.getInputValue(matched.value)) return;
+      if (!inputValue.value) {
+        ctx.emit('update:modelValue', undefined);
+      }
+    }
+  };
+
+  // --- Fetch（IntersectionObserver 观察最后一个选项） ---
+  const lastOptionRef = ref<HTMLElement | null>(null);
+  const optionsContainerRef = ref<HTMLElement | null>(null);
+  let fetchObserver: IntersectionObserver | undefined;
+
+  const cleanupFetchObserver = () => {
+    if (fetchObserver) {
+      fetchObserver.disconnect();
+      fetchObserver = undefined;
+    }
+  };
+
+  /** 更新 fetch observer：观察最后一个选项元素 */
+  const updateFetchObserver = () => {
+    cleanupFetchObserver();
+    if (!props.needFetch || !lastOptionRef.value || !optionsContainerRef.value) return;
+
+    fetchObserver = new IntersectionObserver(
+      async (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting && props.needFetch) {
+          fetchLoading.value = true;
+          await props.fetch?.();
+          fetchLoading.value = false;
+        }
+      },
+      { root: optionsContainerRef.value, threshold: 1 },
+    );
+    fetchObserver.observe(lastOptionRef.value);
+  };
+
+  // --- Watch ---
+
+  // modelValue 变化时同步输入框和选中状态
+  watch(modelValueRef, () => {
+    syncSelectedFromModelValue();
+    syncInputFromModelValue();
+  });
+
+  // options 变化时重新同步
+  watch(optionsRef, () => {
+    syncSelectedFromModelValue();
+    syncInputFromModelValue();
+  }, { deep: true });
+
+  // lastOptionRef 变化时更新 fetch observer
+  watch(lastOptionRef, () => {
+    updateFetchObserver();
+  });
+
+  onBeforeUnmount(cleanupFetchObserver);
+
+  return {
+    // 状态
+    inputValue,
+    isOpen,
+    fetchLoading,
+    // 输入框是否只读（filterable=true 时为 false）
+    inputReadonly,
+    // 列表
+    displayOptions,
+    selectedTags,
+    // DOM refs（fetch 用）
+    lastOptionRef,
+    optionsContainerRef,
+    // 事件
+    onSelect,
+    onDeleteTag,
+    onInput,
+    onFocus,
+    onBlur,
+    // 工具
+    tools,
+    // fetch
+    updateFetchObserver,
+  };
+}

package/components/base/select/useSelectTools.ts

@@ -0,0 +1,60 @@
+/**
+ * @description select 参数映射工具
+ * @author 阿怪
+ * @date 2026/2/25 14:40
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 处理 options 中对象数据的 key 映射
+ * inputParam: 选中后输入框显示哪个字段
+ * optionParam: 下拉列表中显示哪个字段
+ * valueParam: modelValue 绑定哪个字段
+ */
+import { SelectProps } from './props';
+
+export type SelectParamKeys = 'optionParam' | 'valueParam' | 'inputParam';
+
+export function useSelectTools(props: SelectProps) {
+
+  /** 从 option 中取指定 key 的值 */
+  const getInfoWithKey = (option: any, key: SelectParamKeys): any => {
+    const paramKey = props[key];
+    if (!paramKey) {
+      if (option && typeof option === 'object') {
+        if ('label' in option) return option.label;
+        if ('name' in option) return option.name;
+        if ('text' in option) return option.text;
+      }
+      return option;
+    }
+    try {
+      return option[paramKey];
+    } catch {
+      return option;
+    }
+  };
+
+  /** 输入框显示值 */
+  const getInputValue = (option: any): string => {
+    return String(getInfoWithKey(option, 'inputParam') ?? '');
+  };
+
+  /** 下拉列表显示值 */
+  const getOptionValue = (option: any): string => {
+    return String(getInfoWithKey(option, 'optionParam') ?? '');
+  };
+
+  /** modelValue 绑定值 */
+  const getModelValue = (option: any): any => {
+    if (props.valueParam) {
+      return getInfoWithKey(option, 'valueParam');
+    }
+    if (option && typeof option === 'object' && 'value' in option) {
+      return option.value;
+    }
+    return option;
+  };
+
+  return { getInfoWithKey, getInputValue, getOptionValue, getModelValue };
+}

package/components/base/skeleton/api.ts

@@ -0,0 +1,18 @@
+/**
+ * @description skeleton api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { SkeletonProps } from './props';
+
+export const props: MCOPO<SkeletonProps> = {
+  loading: { type: Boolean, default: true },
+  rows: { type: Number, default: 3 },
+  animated: { type: Boolean, default: true },
+  avatar: { type: Boolean, default: false },
+  title: { type: Boolean, default: true },
+};

package/components/base/skeleton/index.ts

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

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

@@ -0,0 +1,41 @@
+/**
+ * @description skeleton api type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type SkeletonProps = {
+  /**
+   * @description 是否显示骨架屏（true=显示骨架，false=显示真实内容）
+   * @type boolean
+   * @default true
+   */
+  loading?: boolean,
+  /**
+   * @description 文本行数
+   * @type number
+   * @default 3
+   */
+  rows?: number,
+  /**
+   * @description 是否开启脉冲动画
+   * @type boolean
+   * @default true
+   */
+  animated?: boolean,
+  /**
+   * @description 是否显示头像占位圆
+   * @type boolean
+   * @default false
+   */
+  avatar?: boolean,
+  /**
+   * @description 是否显示标题占位条（较宽）
+   * @type boolean
+   * @default true
+   */
+  title?: boolean,
+};

package/components/base/slider/api.ts

@@ -0,0 +1,20 @@
+/**
+ * @description slider 运行时 props
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { SliderProps } from './props';
+
+export const props: MCOPO<SliderProps> = {
+  modelValue: { type: Number, default: 0 },
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  step: { type: Number, default: 1 },
+  disabled: { type: Boolean, default: false },
+  showInfo: { type: Boolean, default: false },
+  showStops: { type: Boolean, default: false },
+};

package/components/base/slider/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @description slider core 导出
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api.ts';
+import useSlider from './useSlider.ts';
+
+export const SliderCore = {
+  props,
+  useSlider,
+};

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

@@ -0,0 +1,65 @@
+/**
+ * @description slider 类型定义
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * @name m-slider
+ * @docDescription Slider component.
+ *                 滑动条组件。
+ * @docUrl https://shuimo.design/slider
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type SliderProps = {
+  /**
+   * @description slider value
+   *              滑动条绑定值
+   * @type number
+   * @default 0
+   */
+  modelValue?: number;
+  /**
+   * @description slider min
+   *             滑动条最小值
+   * @type number
+   * @default 0
+   */
+  min?: number;
+  /**
+   * @description slider max
+   *             滑动条最大值
+   * @type number
+   * @default 100
+   */
+  max?: number;
+  /**
+   * @description slider step
+   *             滑动条步长
+   * @type number
+   * @default 1
+   */
+  step?: number;
+  /**
+   * @description slider disabled
+   *             是否禁用
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @description slider show-info
+   *             是否显示信息
+   * @type boolean
+   * @default false
+   */
+  showInfo?: boolean;
+  /**
+   * @description slider show-stops
+   *             是否显示刻度点
+   * @type boolean
+   * @default false
+   */
+  showStops?: boolean;
+};

package/components/base/slider/useSlider.ts

@@ -0,0 +1,83 @@
+/**
+ * @description slider composable
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { onMounted, ref } from 'vue';
+import { SliderProps } from './props';
+import { useElementSize } from '../../../compositions/common/useElementSize.ts';
+import useDrag, { DragOption, DragPosition, InteractEvent } from '../../../compositions/common/useDrag.ts';
+
+export default function useSlider(props: Required<SliderProps>, ctx: any) {
+  const sliderRef = ref<HTMLElement | null>(null);
+  const sliderSize = useElementSize(sliderRef);
+
+  const perRef = ref(0);
+
+  const option: DragOption = { startAxis: 'x', lockAxis: 'x' };
+
+  // 按钮宽度固定值，用于计算可拖拽区域
+  const btnW = 20;
+
+  const sub = props.max - props.min;
+
+  // 处理拖拽移动，计算并约束位置，更新百分比
+  const movePositionHandler = (event: InteractEvent, position: DragPosition) => {
+    const totalW = sliderSize.w.value - btnW;
+
+    let positionX = position.x + event.dx;
+    if (positionX > totalW) {
+      positionX = totalW;
+    } else if (positionX < 0) {
+      positionX = 0;
+    }
+    perRef.value = positionX / totalW;
+    ctx.emit('update:modelValue', getValue());
+    return { x: positionX > 0 ? positionX : 0, y: 0 };
+  };
+
+  // 根据当前百分比和 step 计算实际 value
+  const getValue = () => {
+    const addStep = Math.round(perRef.value * sub / props.step) * props.step;
+    return props.min + addStep;
+  };
+
+  const { init: initDrag, domRef: btnRef } = useDrag({
+    direction: 'top-right',
+    event: {
+      getOption: () => option,
+      movePositionHandler,
+    },
+  });
+
+  // 根据当前 modelValue 初始化按钮位置
+  const init = () => {
+    if (btnRef.value) {
+      const { max, min, modelValue } = props;
+      const per = (modelValue - min) / (max - min);
+      if (window && sliderRef.value) {
+        const w = Number.parseFloat(window.getComputedStyle(sliderRef.value).width);
+
+        const totalW = w - btnW;
+        perRef.value = per;
+        const x = per * totalW;
+        btnRef.value.style.transform = `translate(${x}px, 0)`;
+
+        initDrag({ x });
+      }
+    }
+  };
+
+  onMounted(() => {
+    init();
+  });
+
+  return {
+    btnRef,
+    sliderRef,
+    perRef,
+  };
+}

package/components/base/space/api.ts

@@ -0,0 +1,17 @@
+/**
+ * @description space api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { SpaceProps } from './props';
+
+export const props: MCOPO<SpaceProps> = {
+  direction: { type: String as MPropType<'horizontal' | 'vertical'>, default: 'horizontal' },
+  size: { type: [String, Number] as MPropType<'small' | 'medium' | 'large' | number>, default: 'medium' },
+  wrap: { type: Boolean, default: false },
+  align: { type: String as MPropType<'start' | 'center' | 'end' | 'baseline'>, default: 'center' },
+};

package/components/base/space/index.ts

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

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

@@ -0,0 +1,39 @@
+/**
+ * @description space api type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * @name m-space
+ * @docDescription Space component with shuimo-ui style.
+ *                 水墨组件的间距组件。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type SpaceProps = {
+  /**
+   * @description 排列方向
+   * @type 'horizontal' | 'vertical'
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * @description 间距大小，支持预设或数字（px）
+   * @type 'small' | 'medium' | 'large' | number
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large' | number;
+  /**
+   * @description 是否自动换行（仅水平方向有效）
+   * @type boolean
+   * @default false
+   */
+  wrap?: boolean;
+  /**
+   * @description 交叉轴对齐方式
+   * @type 'start' | 'center' | 'end' | 'baseline'
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | 'end' | 'baseline';
+};