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

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,22 @@
+/**
+ * @description slider 运行时 props
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } 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 },
+  readonly: { type: Boolean, default: false },
+  size: { type: String as unknown as MPropType<NonNullable<SliderProps['size']>>, default: undefined },
+};

package/components/base/slider/index.ts

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

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

@@ -0,0 +1,79 @@
+/**
+ * @description slider 类型定义
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * @name m-slider
+ * @docDescription Slider component.
+ *                 滑动条组件。
+ * @docUrl https://shuimo.design/slider
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { KineSize } from '../../types/props';
+
+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;
+  /**
+   * @description slider readonly. 是否只读
+   * @type boolean
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * @description 尺寸
+   * @type KineSize
+   * @default undefined
+   */
+  size?: KineSize;
+};

package/components/base/slider/useSlider.ts

@@ -0,0 +1,87 @@
+/**
+ * @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';
+import { type HookContext } from '../../types/hook';
+
+export function useSlider(props: Required<SliderProps>, ctx: HookContext) {
+  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): DragPosition => {
+    if (props.readonly) {
+      return position;
+    }
+    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';
+};

package/components/base/steps/__tests__/useSteps.test.ts

@@ -0,0 +1,46 @@
+/**
+ * @description resolveStepStatus 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it } from 'vitest';
+import { resolveStepStatus, type StepsContext } from '../useSteps';
+
+const createCtx = (active: number): StepsContext => ({
+  active,
+  finishStatus: 'finish',
+  processStatus: 'process',
+  total: 4,
+  direction: 'horizontal',
+});
+
+describe('resolveStepStatus', () => {
+  it('显式状态优先', () => {
+    expect(resolveStepStatus(0, 'error', createCtx(2))).toBe('error');
+  });
+
+  it('index < active 返回 finishStatus', () => {
+    expect(resolveStepStatus(0, undefined, createCtx(2))).toBe('finish');
+    expect(resolveStepStatus(1, undefined, createCtx(2))).toBe('finish');
+  });
+
+  it('index === active 返回 processStatus', () => {
+    expect(resolveStepStatus(2, undefined, createCtx(2))).toBe('process');
+  });
+
+  it('index > active 返回 wait', () => {
+    expect(resolveStepStatus(3, undefined, createCtx(2))).toBe('wait');
+  });
+
+  it('active=0 时第一步为 process', () => {
+    expect(resolveStepStatus(0, undefined, createCtx(0))).toBe('process');
+  });
+
+  it('自定义 finishStatus=success', () => {
+    const ctx = { ...createCtx(2), finishStatus: 'success' as const };
+    expect(resolveStepStatus(0, undefined, ctx)).toBe('success');
+  });
+});

package/components/base/steps/api.ts

@@ -0,0 +1,30 @@
+/**
+ * @description steps runtime props 定义
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { StepsProps, StepProps, StepsDirection, StepStatus } from './props';
+
+/**
+ * Steps 容器组件运行时 props
+ */
+export const stepsProps: MCOPO<StepsProps> = {
+  active: { type: Number, default: 0 },
+  direction: { type: String as MPropType<StepsDirection>, default: 'horizontal' },
+  finishStatus: { type: String as MPropType<'success' | 'finish'>, default: 'finish' },
+  processStatus: { type: String as MPropType<'process' | 'finish'>, default: 'process' },
+};
+
+/**
+ * Step 单个步骤组件运行时 props
+ */
+export const stepProps: MCOPO<StepProps> = {
+  title: { type: String, required: true },
+  description: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  status: { type: String as MPropType<StepStatus>, default: undefined },
+};

package/components/base/steps/index.ts

@@ -0,0 +1,22 @@
+/**
+ * @description steps core 导出
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { stepsProps, stepProps } from './api';
+import { useSteps, useStep, stepsContextKey, resolveStepStatus } from './useSteps';
+
+export const StepsCore = {
+  stepsProps,
+  stepProps,
+  useSteps,
+  useStep,
+  stepsContextKey,
+  resolveStepStatus,
+};
+
+export type { StepsProps, StepProps, StepItem, StepStatus, StepsDirection } from './props';
+export type { StepsContext } from './useSteps';

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

@@ -0,0 +1,88 @@
+/**
+ * @description steps 组件 props 类型定义
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/**
+ * 步骤状态类型
+ */
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+
+/**
+ * 步骤条方向
+ */
+export type StepsDirection = 'horizontal' | 'vertical';
+
+/**
+ * 单个步骤数据（用于数据驱动模式）
+ */
+export declare type StepItem = {
+  /**
+   * @description 步骤标题
+   */
+  title: string;
+  /**
+   * @description 步骤描述
+   */
+  description?: string;
+  /**
+   * @description 自定义图标
+   */
+  icon?: string;
+  /**
+   * @description 强制指定步骤状态，不指定时由 active 自动推算
+   */
+  status?: StepStatus;
+};
+
+/**
+ * Steps 容器组件 props
+ */
+export declare type StepsProps = {
+  /**
+   * @description 当前激活步骤（从 0 开始）
+   * @default 0
+   */
+  active?: number;
+  /**
+   * @description 步骤条方向
+   * @default 'horizontal'
+   */
+  direction?: StepsDirection;
+  /**
+   * @description 已完成步骤的状态
+   * @default 'finish'
+   */
+  finishStatus?: 'success' | 'finish';
+  /**
+   * @description 当前步骤的状态
+   * @default 'process'
+   */
+  processStatus?: 'process' | 'finish';
+};
+
+/**
+ * Step 单个步骤组件 props
+ */
+export declare type StepProps = {
+  /**
+   * @description 步骤标题
+   */
+  title: string;
+  /**
+   * @description 步骤描述
+   */
+  description?: string;
+  /**
+   * @description 自定义图标
+   */
+  icon?: string;
+  /**
+   * @description 强制指定步骤状态，不指定时由父级 Steps 推算
+   */
+  status?: StepStatus;
+};

package/components/base/steps/useSteps.ts

@@ -0,0 +1,101 @@
+/**
+ * @description steps composable
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { computed, InjectionKey, provide, inject } from 'vue';
+import { StepsProps, StepStatus } from './props';
+
+/**
+ * Steps 向子 Step 注入的上下文结构
+ */
+export interface StepsContext {
+  /** 当前激活步骤索引 */
+  active: number;
+  /** 已完成步骤状态 */
+  finishStatus: 'success' | 'finish';
+  /** 当前步骤状态 */
+  processStatus: 'process' | 'finish';
+  /** 步骤总数（由子步骤注册后更新） */
+  total: number;
+  /** 方向 */
+  direction: 'horizontal' | 'vertical';
+}
+
+/** 注入键 */
+export const stepsContextKey: InjectionKey<StepsContext> = Symbol('stepsContext');
+
+/**
+ * Steps 容器 composable
+ * 负责将当前激活状态通过 provide 下发给 MStep 子组件
+ */
+export function useSteps(props: StepsProps) {
+  const context: StepsContext = {
+    get active() { return props.active ?? 0; },
+    get finishStatus() { return props.finishStatus ?? 'finish'; },
+    get processStatus() { return props.processStatus ?? 'process'; },
+    get direction() { return props.direction ?? 'horizontal'; },
+    total: 0,
+  };
+
+  provide(stepsContextKey, context);
+
+  /** 容器 class 列表 */
+  const stepsClass = computed(() => [
+    'm-steps',
+    `m-steps-${props.direction ?? 'horizontal'}`,
+  ]);
+
+  return { stepsClass, context };
+}
+
+/**
+ * 根据步骤索引和父级上下文推算当前步骤状态
+ * @param index 当前步骤序号（从 0 开始）
+ * @param overrideStatus 显式指定的状态，优先级最高
+ * @param ctx 父级 Steps 上下文
+ */
+export function resolveStepStatus(
+  index: number,
+  overrideStatus: StepStatus | undefined,
+  ctx: StepsContext,
+): StepStatus {
+  // 显式指定时直接使用
+  if (overrideStatus) return overrideStatus;
+
+  const active = ctx.active;
+  if (index < active) return ctx.finishStatus as StepStatus;
+  if (index === active) return ctx.processStatus as StepStatus;
+  return 'wait';
+}
+
+/**
+ * Step 单个步骤 composable
+ * 从父级注入 StepsContext，计算当前步骤的状态与样式类
+ */
+export function useStep(index: number, overrideStatus?: StepStatus) {
+  const ctx = inject(stepsContextKey, null);
+
+  const status = computed<StepStatus>(() => {
+    if (!ctx) {
+      // 未嵌套在 Steps 中时默认为 wait
+      return overrideStatus ?? 'wait';
+    }
+    return resolveStepStatus(index, overrideStatus, ctx);
+  });
+
+  const stepClass = computed(() => [
+    'm-step',
+    `m-step-${status.value}`,
+  ]);
+
+  const isLast = computed(() => {
+    if (!ctx) return true;
+    return index >= ctx.total - 1;
+  });
+
+  return { status, stepClass, isLast, ctx };
+}

package/components/base/switch/api.ts

@@ -0,0 +1,22 @@
+/**
+ * @description switch api
+ * @author 阿怪
+ * @date 2023/4/23 11:52
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { SwitchProps } from './props';
+
+
+export const props: MCOPO<SwitchProps> = {
+  modelValue: { type: undefined, required: true },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  activeInfo: { type: String, default: '' },
+  inactiveInfo: { type: String, default: '' },
+  activeValue: { type: undefined, default: undefined },
+  inactiveValue: { type: undefined, default: undefined },
+  onControl: { type: Boolean, default: false },
+};

package/components/base/switch/index.ts

@@ -0,0 +1,19 @@
+/**
+ * @description
+ * @author 阿怪
+ * @date 2025/1/13 10:35
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+import { useSwitch, getIsActive, switchIsBoolean } from './useSwitch';
+
+export const SwitchCore = {
+  props,
+  switchIsBoolean,
+  getIsActive,
+  useSwitch,
+};
+
+export type { SwitchProps } from './props';