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

package/components/base/inputNumber/__tests__/useInputNumber.test.ts

@@ -0,0 +1,189 @@
+/**
+ * @description useInputNumber 归一 / emit 保真单测
+ * @author 阿怪
+ * @date 2026/4/24
+ * @version v1.0.0
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { nextTick, reactive } from 'vue';
+import { useInputNumber } from '../useInputNumber';
+import type { InputNumberProps } from '../props';
+import type { HookContext } from '../../../types/hook';
+
+type PropsShape = Required<InputNumberProps>;
+
+const defaultProps: PropsShape = {
+  modelValue: null,
+  max: Infinity,
+  min: -Infinity,
+  step: 1,
+  precision: 0,
+  disabled: false,
+  readonly: false,
+  placeholder: '',
+  controls: true,
+  size: 'medium' as PropsShape['size'],
+};
+
+function setup(overrides: Partial<PropsShape> = {}) {
+  const props = reactive<PropsShape>({ ...defaultProps, ...overrides }) as PropsShape;
+  const emit = vi.fn();
+  const ctx: HookContext = { emit, slots: {} };
+  const hook = useInputNumber(props, ctx);
+  return { props, emit, ...hook };
+}
+
+const lastUpdate = (emit: ReturnType<typeof vi.fn>) =>
+  emit.mock.calls.filter((c: unknown[]) => c[0] === 'update:modelValue').at(-1)!;
+
+describe('useInputNumber emit 归一', () => {
+  it('number 入 → number 出', () => {
+    const { validate, emit } = setup({ modelValue: 1 });
+    validate(5);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(5);
+    expect(typeof call[1]).toBe('number');
+  });
+
+  it('string 入 → string 出', () => {
+    const { validate, emit } = setup({ modelValue: '1' });
+    validate('5');
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe('5');
+    expect(typeof call[1]).toBe('string');
+  });
+
+  it('null 入 → 用户输入整数后默认 number 出', () => {
+    const { validate, emit } = setup({ modelValue: null });
+    validate(3);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(3);
+    expect(typeof call[1]).toBe('number');
+  });
+
+  it('空字符串 currentValue → emit null（不是空串）', () => {
+    const { validate, emit } = setup({ modelValue: 5 });
+    validate(null);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBeNull();
+  });
+
+  it('中间态 "-" → emit null（未输完）', () => {
+    const { validate, emit } = setup({ modelValue: null });
+    validate('-');
+    const call = lastUpdate(emit);
+    expect(call[1]).toBeNull();
+  });
+
+  it('输入 "0." → emit 0（末尾小数点归一）', () => {
+    const { validate, emit } = setup({ modelValue: null, precision: 2 });
+    validate('0.');
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(0);
+  });
+
+  it('非法字符串 → emit 原样不变（validate 不触发 emit）', () => {
+    const { validate, emit } = setup({ modelValue: 5 });
+    emit.mockClear();
+    validate('abc' as unknown as number);
+    // 非法输入不触发 emit
+    expect(emit).not.toHaveBeenCalled();
+  });
+
+  it('跨类型 watch：外部传 1（number）→ 不会重复 emit 成 string', async () => {
+    const { props, emit } = setup({ modelValue: 1 });
+    emit.mockClear();
+    // 模拟外部 bind 把内部 string '1' 回传 number 1：这在真实 v-model 里是 watch 触发的
+    props.modelValue = 1;
+    await nextTick();
+    // 内部 '1' 和外部 1 的 String 归一相等，不该触发 emit
+    expect(emit).not.toHaveBeenCalled();
+  });
+
+  it('blur 末尾小数点归一：内部 "1." → emit 1', () => {
+    const { handleInputChange, handleInputBlur, emit } = setup({ modelValue: null, precision: 2 });
+    handleInputChange({ target: { value: '1.' } } as never);
+    emit.mockClear();
+    handleInputBlur();
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(1);
+  });
+
+  it('max 截断仍然保真类型', () => {
+    const { validate, emit } = setup({ modelValue: '10', max: 100 });
+    validate(150);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe('100');
+    expect(typeof call[1]).toBe('string');
+  });
+
+  it('min 截断仍然保真类型', () => {
+    const { validate, emit } = setup({ modelValue: 10, min: 0 });
+    validate(-5);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(0);
+    expect(typeof call[1]).toBe('number');
+  });
+});
+
+describe('useInputNumber 输入流程', () => {
+  it('合法数字输入触发 emit', () => {
+    const { handleInputChange, emit } = setup({ modelValue: 0 });
+    emit.mockClear();
+    handleInputChange({ target: { value: '88' } } as never);
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(88);
+  });
+
+  it('increment 按 step 递增', () => {
+    const { increment, emit } = setup({ modelValue: 5, step: 3 });
+    emit.mockClear();
+    increment();
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(8);
+  });
+
+  it('decrement 按 step 递减', () => {
+    const { decrement, emit } = setup({ modelValue: 5, step: 2 });
+    emit.mockClear();
+    decrement();
+    const call = lastUpdate(emit);
+    expect(call[1]).toBe(3);
+  });
+
+  it('disabled 时 increment 和 decrement 为 no-op', () => {
+    const { increment, decrement, emit } = setup({ modelValue: 5, disabled: true });
+    emit.mockClear();
+    increment();
+    decrement();
+    // disabled 状态下不触发任何 emit
+    expect(emit).not.toHaveBeenCalled();
+  });
+
+  it('readonly 时 increment 和 decrement 为 no-op', () => {
+    const { increment, decrement, emit } = setup({ modelValue: 5, readonly: true });
+    emit.mockClear();
+    increment();
+    decrement();
+    // readonly 状态下不触发任何 emit
+    expect(emit).not.toHaveBeenCalled();
+  });
+});
+
+describe('useInputNumber 中间态处理', () => {
+  it('validate(".") 为中间态 → emit null', () => {
+    const { validate, emit } = setup({ modelValue: null });
+    validate('.' as unknown as number);
+    // "." 经 handleInputChange 会被转为 "0."，但直接 validate('.') 是非法输入
+    // validate 里 isNaN(+'.') 为 true 且不是 '' 也不是 '-'，所以不触发 emit
+    expect(emit.mock.calls.filter((c: unknown[]) => c[0] === 'update:modelValue')).toHaveLength(0);
+  });
+
+  it('validate("-.") 为非法输入 → 不触发 emit', () => {
+    const { validate, emit } = setup({ modelValue: null });
+    emit.mockClear();
+    validate('-.' as unknown as number);
+    // '-.' → isNaN(+'-.')=true, 不是 '' 不是 '-'，走非法输入分支
+    expect(emit).not.toHaveBeenCalled();
+  });
+});

package/components/base/inputNumber/api.ts

@@ -0,0 +1,23 @@
+/**
+ * @description inputNumber 运行时 props
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { InputNumberProps } from './props';
+
+export const props: MCOPO<InputNumberProps> = {
+  modelValue: { type: null, default: null },
+  placeholder: { type: String, default: '' },
+  max: { type: Number, default: Infinity },
+  min: { type: Number, default: -Infinity },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  step: { type: Number, default: 1 },
+  precision: { type: Number, default: 0 },
+  controls: { type: Boolean, default: true },
+  size: { type: String as unknown as MPropType<NonNullable<InputNumberProps['size']>>, default: undefined },
+};

package/components/base/inputNumber/index.ts

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

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

@@ -0,0 +1,78 @@
+/**
+ * @description inputNumber 类型定义
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * @name m-input-number
+ * @docDescription InputNumber component.
+ *                 数字输入框组件。
+ * @docUrl https://shuimo.design/input#number
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { KineSize } from '../../types/props';
+
+export declare type InputNumberProps = {
+  /**
+   * @description input-number modelValue
+   * @type number | string
+   * @default ''
+   */
+  modelValue?: number | string | null,
+  /**
+   * @description input-number max
+   * @type number
+   * @default Infinity
+   */
+  max?: number,
+  /**
+   * @description input-number min
+   * @type number
+   * @default -Infinity
+   */
+  min?: number,
+  /**
+   * @description input-number step. 步长，每次增减的幅度
+   * @type number
+   * @default 1
+   */
+  step?: number,
+  /**
+   * @description input-number precision
+   * @type number
+   * @default 0
+   */
+  precision?: number,
+  /**
+   * @description input-number disabled
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean,
+  /**
+   * @description input readonly. 是否只读
+   * @type boolean
+   * @default false
+   */
+  readonly?: boolean,
+  /**
+   * @description input-number placeholder
+   * @type string
+   * @default ''
+   */
+  placeholder?: string,
+  /**
+   * @description whether to show increase/decrease buttons. 是否显示增减按钮
+   * @type boolean
+   * @default true
+   */
+  controls?: boolean,
+  /**
+   * @description 尺寸
+   * @type KineSize
+   * @default undefined
+   */
+  size?: KineSize
+};

package/components/base/inputNumber/useInputNumber.ts

@@ -0,0 +1,182 @@
+/**
+ * @description inputNumber composable
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.2.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * v1.2.0 changelog:
+ * - emit 类型保真：string 入 string 出，number 入 number 出；空值一律 emit null
+ * - 内部 currentValue 保留中间态（'-' / '0.' / ''），仅在 emit 时归一
+ */
+import { ref, watch } from 'vue';
+import { InputNumberProps } from './props';
+import { HTMLElementEvent } from '../../types/template';
+import { type HookContext } from '../../types/hook';
+
+export type InputNumber = string | number | null;
+
+/** 用户输入中间态：不构成可 emit 的数字，emit null */
+const MID_STATES = new Set(['', '-', '.', '-.']);
+
+/**
+ * 把任意内部值归一为 number | null。
+ * 规则：
+ * - null/undefined/中间态 → null
+ * - 末尾小数点去掉（'1.' → '1'）
+ * - 非法 NaN → null
+ * - 其他 → Number(v)
+ */
+const normalize = (v: string | number | null | undefined): number | null => {
+  if (v === null || v === undefined) return null;
+  const s = String(v);
+  if (MID_STATES.has(s)) return null;
+  const cleaned = s.endsWith('.') ? s.slice(0, -1) : s;
+  const n = Number(cleaned);
+  return Number.isNaN(n) ? null : n;
+};
+
+export function useInputNumber(props: Required<InputNumberProps>, ctx: HookContext) {
+  const currentValue = ref<string | number>(props.modelValue ?? '');
+
+  /**
+   * 按外部 modelValue 的当前 typeof 决定出参类型，保真 v-model 声明。
+   * - null/undefined → null
+   * - 外部当前是 string → emit String(n)
+   * - 否则 → emit n（默认 number）
+   */
+  const toEmitValue = (n: number | null): number | string | null => {
+    if (n === null) return null;
+    return typeof props.modelValue === 'string' ? String(n) : n;
+  };
+
+  const updateInput = (oldVal: InputNumber) => {
+    const out = toEmitValue(normalize(currentValue.value));
+    ctx.emit('update:modelValue', out);
+    ctx.emit('change', out, oldVal);
+  };
+
+  const setCurrentValue = (newVal: string | number, e?: HTMLElementEvent<HTMLInputElement>) => {
+    const oldVal = currentValue.value;
+    const { min, max, precision } = props;
+    // 字符串归一比较：'1' 和 1 视为同值，避免跨类型重复 emit；'-' vs '-' 也命中
+    if (String(oldVal) === String(newVal)) {
+      return;
+    } else if (+newVal >= +max) {
+      // 超过最大值，截断到 max
+      newVal = max;
+    } else if (+newVal <= +min) {
+      // 低于最小值，截断到 min
+      newVal = min;
+    } else if (
+      precision !== 0 &&
+      String(newVal).includes('.') &&
+      (`${newVal}`.length - (`${newVal}`.indexOf('.') + 1) >= precision)
+    ) {
+      // 按精度截断小数位
+      newVal = Number(`${newVal}`.substring(0, `${newVal}`.indexOf('.') + (precision + 1)));
+    }
+    if (e) { e.target.value = String(newVal); }
+    currentValue.value = newVal;
+    updateInput(oldVal);
+  };
+
+  const validate = (value: InputNumber, e?: HTMLElementEvent<HTMLInputElement>) => {
+    if (value === null || value === undefined) {
+      const oldVal = currentValue.value;
+      currentValue.value = '';
+      updateInput(oldVal);
+      return;
+    }
+    // 合法值：数字、空字符串、负号前缀（用户正在输入负数）
+    if (!isNaN(+value) || value === '' || value === '-') {
+      setCurrentValue(value, e);
+    } else {
+      // 非法输入，还原为当前值
+      if (e) e.target.value = String(currentValue.value);
+    }
+  };
+
+  const handleInputChange = (e: HTMLElementEvent<HTMLInputElement>) => {
+    let val = e.target.value;
+    // 处理以小数点开头的输入，补充整数部分 0
+    if (val.indexOf('.') === 0) {
+      val = val.replace(/^\./g, '0.');
+    }
+    // 处理整数部分多余前导零
+    if (/^-?\d+$/.test(val) && val.indexOf('0') === 0) {
+      val = `${Number(val)}`;
+      e.target.value = val;
+    }
+    validate(val, e);
+  };
+
+  const handleInputBlur = () => {
+    const oldVal = currentValue.value;
+    // blur 时清理末尾的负号
+    if (currentValue.value === '-') {
+      currentValue.value = '';
+    } else if (currentValue.value === '-0') {
+      currentValue.value = 0;
+    } else {
+      const str = String(currentValue.value);
+      // 清理末尾小数点
+      if (str.indexOf('.') === str.length - 1 && str.length > 0) {
+        currentValue.value = str.replace(/\.$/g, '');
+      }
+    }
+    // blur 后内部归一到数字（避免 '1' 和 1 并存）
+    const n = normalize(currentValue.value);
+    currentValue.value = n === null ? '' : n;
+    updateInput(oldVal);
+  };
+
+  /**
+   * 按步长增加当前值，不超过 max
+   */
+  const increment = () => {
+    if (props.disabled || props.readonly) { return; }
+    const base = currentValue.value === '' ? 0 : +currentValue.value;
+    const next = base + props.step;
+    validate(next);
+  };
+
+  /**
+   * 按步长减少当前值，不低于 min
+   */
+  const decrement = () => {
+    if (props.disabled || props.readonly) { return; }
+    const base = currentValue.value === '' ? 0 : +currentValue.value;
+    const next = base - props.step;
+    validate(next);
+  };
+
+  /**
+   * 键盘上/下箭头按步长增减
+   */
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      increment();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      decrement();
+    }
+  };
+
+  // 监听外部 modelValue 变化，同步内部值
+  watch(() => props.modelValue, val => {
+    validate(val);
+  });
+
+  return {
+    currentValue,
+    handleInputChange,
+    handleInputBlur,
+    handleKeydown,
+    increment,
+    decrement,
+    validate,
+  };
+}

package/components/base/li/api.ts

@@ -0,0 +1,15 @@
+/**
+ * @description li api
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { LiProps } from './props';
+
+export const props: MCOPO<LiProps> = {
+  active: { type: Boolean, default: false },
+  marker: { type: Boolean, default: true },
+};

package/components/base/li/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @description li core
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+
+export const LiCore = {
+  props,
+};
+
+export type { LiProps } from './props';

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

@@ -0,0 +1,30 @@
+/**
+ * @description li props type
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * @name m-li
+ * @docDescription Li component.
+ *                 列表项组件。
+ * @docUrl https://shuimo.design/li
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type LiProps = {
+  /**
+   * @description is active style or not
+   *              是否激活样式
+   * @type boolean
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * @description show marker or not
+   *              是否显示标记
+   * @type boolean
+   * @default true
+   */
+  marker?: boolean;
+};

package/components/base/list/api.ts

@@ -0,0 +1,16 @@
+/**
+ * @description list api
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { ListProps } from './props';
+
+export const props: MCOPO<ListProps> = {
+  data: { type: Array, default: () => [] },
+  autoActive: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+};

package/components/base/list/index.ts

@@ -0,0 +1,17 @@
+/**
+ * @description list core
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+import { useList } from './useList';
+
+export const ListCore = {
+  props,
+  useList,
+};
+
+export type { ListProps } from './props';

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

@@ -0,0 +1,33 @@
+/**
+ * @description list props type
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * @name m-list
+ * @docDescription List component.
+ *                 列表组件。
+ * @docUrl https://shuimo.design/list
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type ListProps = {
+  /**
+   * @description List data
+   *              列表数据
+   * @default []
+   */
+  data?: Record<string, unknown>[],
+  /**
+   * @description all item use active style
+   *              所有项使用激活样式
+   * @default false
+   */
+  autoActive?: boolean,
+  /**
+   * @description 加载中状态
+   * @default false
+   */
+  loading?: boolean
+};

package/components/base/list/useList.ts

@@ -0,0 +1,36 @@
+/**
+ * @description list hook
+ * @author 阿怪
+ * @date 2025/02/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/**
+ * @description 基础渲染，将数据转为字符串
+ */
+const baseRender = (item: unknown) => {
+  if (['string', 'number'].includes(typeof item)) {
+    return String(item);
+  }
+  if (typeof item === 'object') {
+    return JSON.stringify(item);
+  }
+  return '';
+};
+
+export function useList<T>() {
+  const dataValidate = (data: T[] | undefined) => {
+    if (!Array.isArray(data)) {
+      console.warn('[shuimo-list] data必须是数组');
+      return false;
+    }
+    return true;
+  };
+
+  return {
+    baseRender,
+    dataValidate,
+  };
+}

package/components/base/loading/api.ts

@@ -0,0 +1,17 @@
+/**
+ * @description loading api
+ * @author 阿怪
+ * @date 2026/2/27
+ * @version v1.1.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { LoadingProps } from './props';
+
+export const props: MCOPO<LoadingProps> = {
+  modelValue: { type: Boolean, default: false },
+  size: { type: String as unknown as MPropType<NonNullable<LoadingProps['size']>>, default: undefined },
+  mask: { type: Boolean, default: false },
+  text: { type: String, default: undefined },
+};

package/components/base/loading/index.ts

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