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

package/components/base/empty/api.ts

@@ -0,0 +1,15 @@
+/**
+ * @description empty api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { EmptyProps } from './props';
+
+export const props: MCOPO<EmptyProps> = {
+  description: { type: String, default: '暂无数据' },
+  image: { type: String, default: undefined },
+};

package/components/base/empty/index.ts

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

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

@@ -0,0 +1,26 @@
+/**
+ * @description empty api type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * @name m-empty
+ * @docDescription Empty state component with shuimo-ui style.
+ *                 水墨组件的空状态组件。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type EmptyProps = {
+  /**
+   * @description 描述文字
+   * @type string
+   * @default '暂无数据'
+   */
+  description?: string;
+  /**
+   * @description 自定义图片地址
+   * @type string
+   */
+  image?: string;
+};

package/components/base/image/__tests__/useImage.test.ts

@@ -0,0 +1,176 @@
+/**
+ * @description useImage 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { useImage } from '../useImage';
+
+const defaultProps = {
+  src: 'test.png',
+  alt: '',
+  fit: 'cover' as const,
+  lazy: false,
+  previewSrcList: [] as string[],
+  initialIndex: 0,
+  width: '' as string | number,
+  height: '' as string | number,
+  zIndex: 2000,
+};
+
+describe('useImage', () => {
+  const createEmit = () => vi.fn();
+
+  it('初始状态为 loading', () => {
+    const emit = createEmit();
+    const { status } = useImage(defaultProps, emit);
+    expect(status.value).toBe('loading');
+  });
+
+  it('handleLoad 设置状态为 loaded 并触发 emit', () => {
+    const emit = createEmit();
+    const { status, handleLoad } = useImage(defaultProps, emit);
+    // Vitest node 环境下由 happy-dom/jsdom 提供 Event 构造函数，
+    // handleLoad 仅需接收 Event 实例作为参数传给 emit，不依赖 DOM 行为
+    const event = new Event('load');
+
+    handleLoad(event);
+    expect(status.value).toBe('loaded');
+    expect(emit).toHaveBeenCalledWith('load', event);
+  });
+
+  it('handleError 设置状态为 error 并触发 emit', () => {
+    const emit = createEmit();
+    const { status, handleError } = useImage(defaultProps, emit);
+    const event = new Event('error');
+
+    handleError(event);
+    expect(status.value).toBe('error');
+    expect(emit).toHaveBeenCalledWith('error', event);
+  });
+
+  // 预览功能
+  it('openPreview 无 previewSrcList 时不打开', () => {
+    const emit = createEmit();
+    const { previewVisible, openPreview } = useImage(defaultProps, emit);
+
+    openPreview();
+    expect(previewVisible.value).toBe(false);
+  });
+
+  it('openPreview 有 previewSrcList 时打开并定位', () => {
+    const emit = createEmit();
+    const props = { ...defaultProps, previewSrcList: ['a.png', 'test.png', 'c.png'] };
+    const { previewVisible, previewIndex, openPreview } = useImage(props, emit);
+
+    openPreview();
+    expect(previewVisible.value).toBe(true);
+    expect(previewIndex.value).toBe(1); // test.png 在索引 1
+  });
+
+  it('openPreview src 不在列表中时定位到 0', () => {
+    const emit = createEmit();
+    const props = { ...defaultProps, src: 'unknown.png', previewSrcList: ['a.png', 'b.png'] };
+    const { previewIndex, openPreview } = useImage(props, emit);
+
+    openPreview();
+    expect(previewIndex.value).toBe(0);
+  });
+
+  it('closePreview 关闭预览', () => {
+    const emit = createEmit();
+    const props = { ...defaultProps, previewSrcList: ['a.png'] };
+    const { previewVisible, openPreview, closePreview } = useImage(props, emit);
+
+    openPreview();
+    closePreview();
+    expect(previewVisible.value).toBe(false);
+  });
+
+  it('previewNext / previewPrev 循环切换', () => {
+    const emit = createEmit();
+    const props = { ...defaultProps, src: 'a.png', previewSrcList: ['a.png', 'b.png', 'c.png'] };
+    const { previewIndex, openPreview, previewNext, previewPrev } = useImage(props, emit);
+
+    openPreview(); // index = 0
+
+    previewNext(); // index = 1
+    expect(previewIndex.value).toBe(1);
+    expect(emit).toHaveBeenCalledWith('switch', 1);
+
+    previewNext(); // index = 2
+    expect(previewIndex.value).toBe(2);
+
+    previewNext(); // 循环回 0
+    expect(previewIndex.value).toBe(0);
+
+    previewPrev(); // 循环到 2
+    expect(previewIndex.value).toBe(2);
+  });
+
+  it('zoomIn 放大', () => {
+    const emit = createEmit();
+    const props = { ...defaultProps, previewSrcList: ['a.png'] };
+    const { previewScale, openPreview, zoomIn } = useImage(props, emit);
+
+    openPreview();
+    expect(previewScale.value).toBe(1);
+
+    zoomIn();
+    expect(previewScale.value).toBe(1.25);
+
+    // 最大 5
+    for (let i = 0; i < 20; i++) zoomIn();
+    expect(previewScale.value).toBe(5);
+  });
+
+  it('zoomOut 缩小', () => {
+    const emit = createEmit();
+    const props = { ...defaultProps, previewSrcList: ['a.png'] };
+    const { previewScale, openPreview, zoomOut } = useImage(props, emit);
+
+    openPreview();
+    zoomOut();
+    expect(previewScale.value).toBe(0.75);
+
+    // 最小 0.25
+    for (let i = 0; i < 20; i++) zoomOut();
+    expect(previewScale.value).toBe(0.25);
+  });
+
+  it('rotate 旋转 90°', () => {
+    const emit = createEmit();
+    const props = { ...defaultProps, previewSrcList: ['a.png'] };
+    const { previewRotate, openPreview, rotate } = useImage(props, emit);
+
+    openPreview();
+    rotate();
+    expect(previewRotate.value).toBe(90);
+
+    rotate();
+    expect(previewRotate.value).toBe(180);
+
+    rotate();
+    rotate();
+    expect(previewRotate.value).toBe(0); // 360 % 360 = 0
+  });
+
+  it('切换预览图片时重置缩放和旋转', () => {
+    const emit = createEmit();
+    const props = { ...defaultProps, src: 'a.png', previewSrcList: ['a.png', 'b.png'] };
+    const { previewScale, previewRotate, openPreview, zoomIn, rotate, previewNext } = useImage(props, emit);
+
+    openPreview();
+    zoomIn();
+    rotate();
+    expect(previewScale.value).toBe(1.25);
+    expect(previewRotate.value).toBe(90);
+
+    previewNext();
+    expect(previewScale.value).toBe(1);
+    expect(previewRotate.value).toBe(0);
+  });
+});

package/components/base/image/api.ts

@@ -0,0 +1,25 @@
+/**
+ * @description image api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { ImageProps } from './props';
+
+export const props: MCOPO<ImageProps> = {
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+  fit: {
+    type: String as MPropType<'contain' | 'cover' | 'fill' | 'none' | 'scale-down'>,
+    default: 'cover',
+    enum: ['contain', 'cover', 'fill', 'none', 'scale-down'],
+  },
+  width: { type: [String, Number], default: undefined },
+  height: { type: [String, Number], default: undefined },
+  lazy: { type: Boolean, default: false },
+  previewSrcList: { type: Array as MPropType<string[]>, default: () => [] },
+  zIndex: { type: Number, default: 2000 },
+};

package/components/base/image/index.ts

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

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

@@ -0,0 +1,67 @@
+/**
+ * @description image props type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * @name m-image
+ * @docDescription Image component with lazy loading and preview support.
+ *                 图片组件，支持懒加载和全屏预览。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type ImageProps = {
+  /**
+   * @description 图片地址
+   * @type string
+   */
+  src: string,
+  /**
+   * @description 图片 alt 描述
+   * @type string
+   * @default ''
+   */
+  alt?: string,
+  /**
+   * @description 图片填充模式，对应 object-fit
+   * @type string
+   * @default 'cover'
+   * @enum contain|cover|fill|none|scale-down
+   */
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down',
+  /**
+   * @description 是否开启懒加载
+   * @type boolean
+   * @default false
+   */
+  lazy?: boolean,
+  /**
+   * @description 开启预览的图片列表，传入后点击可全屏预览
+   * @type string[]
+   * @default []
+   */
+  previewSrcList?: string[],
+  /**
+   * @description 图片宽度
+   * @type string | number
+   */
+  width?: string | number,
+  /**
+   * @description 图片高度
+   * @type string | number
+   */
+  height?: string | number,
+  /**
+   * @description 预览弹层的 z-index
+   * @type number
+   * @default 2000
+   */
+  zIndex?: number,
+};
+
+export declare type ImageEvents = {
+  onLoad?: (e: Event) => void,
+  onError?: (e: Event) => void,
+  onSwitch?: (index: number) => void,
+};

package/components/base/image/useImage.ts

@@ -0,0 +1,119 @@
+/**
+ * @description image hook
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref, watch, onMounted } from 'vue';
+import { ImageProps } from './props';
+
+/** 图片加载状态 */
+export type ImageLoadStatus = 'loading' | 'loaded' | 'error';
+
+export function useImage(
+  props: Required<ImageProps>,
+  emit: (event: 'load' | 'error' | 'switch', payload: Event | number) => void,
+) {
+  const status = ref<ImageLoadStatus>('loading');
+  // 预览弹层是否可见
+  const previewVisible = ref(false);
+  // 预览当前索引（在 previewSrcList 中的位置）
+  const previewIndex = ref(0);
+  // 预览缩放比例
+  const previewScale = ref(1);
+  // 预览旋转角度
+  const previewRotate = ref(0);
+
+  /** 重置加载状态（src 变化时调用） */
+  const reset = () => {
+    status.value = 'loading';
+  };
+
+  const handleLoad = (e: Event) => {
+    status.value = 'loaded';
+    emit('load', e);
+  };
+
+  const handleError = (e: Event) => {
+    status.value = 'error';
+    emit('error', e);
+  };
+
+  /** 打开全屏预览，定位到 src 在 previewSrcList 中的位置 */
+  const openPreview = () => {
+    if (!props.previewSrcList || props.previewSrcList.length === 0) { return; }
+    const idx = props.previewSrcList.indexOf(props.src);
+    previewIndex.value = idx >= 0 ? idx : 0;
+    previewScale.value = 1;
+    previewRotate.value = 0;
+    previewVisible.value = true;
+  };
+
+  const closePreview = () => {
+    previewVisible.value = false;
+  };
+
+  /** 预览切换到上一张 */
+  const previewPrev = () => {
+    const total = props.previewSrcList.length;
+    if (total === 0) { return; }
+    previewIndex.value = ((previewIndex.value - 1) + total) % total;
+    previewScale.value = 1;
+    previewRotate.value = 0;
+    emit('switch', previewIndex.value);
+  };
+
+  /** 预览切换到下一张 */
+  const previewNext = () => {
+    const total = props.previewSrcList.length;
+    if (total === 0) { return; }
+    previewIndex.value = (previewIndex.value + 1) % total;
+    previewScale.value = 1;
+    previewRotate.value = 0;
+    emit('switch', previewIndex.value);
+  };
+
+  /** 预览放大 */
+  const zoomIn = () => {
+    previewScale.value = Math.min(previewScale.value + 0.25, 5);
+  };
+
+  /** 预览缩小 */
+  const zoomOut = () => {
+    previewScale.value = Math.max(previewScale.value - 0.25, 0.25);
+  };
+
+  /** 顺时针旋转 90° */
+  const rotate = () => {
+    previewRotate.value = (previewRotate.value + 90) % 360;
+  };
+
+  // src 变化时重置加载状态
+  watch(() => props.src, reset);
+
+  onMounted(() => {
+    if (props.lazy) {
+      // 懒加载：交由 img 标签的 loading="lazy" 处理
+      status.value = 'loading';
+    }
+  });
+
+  return {
+    status,
+    previewVisible,
+    previewIndex,
+    previewScale,
+    previewRotate,
+    handleLoad,
+    handleError,
+    openPreview,
+    closePreview,
+    previewPrev,
+    previewNext,
+    zoomIn,
+    zoomOut,
+    rotate,
+  };
+}

package/components/base/input/api.ts

@@ -0,0 +1,23 @@
+/**
+ * @description input api
+ * @author 阿怪
+ * @date 2023/4/20 17:31
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { InputProps } from './props';
+
+export const props: MCOPO<InputProps> = {
+  type: { type: String, default: 'text' },
+  placeholder: { type: String, default: '' },
+  modelValue: { type: [String, Number], default: '' },
+  readonly: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  autofocus: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  size: { type: String as unknown as MPropType<NonNullable<InputProps['size']>>, default: undefined },
+  maxlength: { type: Number, default: undefined },
+  showWordLimit: { type: Boolean, default: false },
+};

package/components/base/input/index.ts

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

package/components/base/input/input.css

@@ -0,0 +1,19 @@
+:root{
+  --m-input-w: 244px;
+  --m-color-disabled: #DBDADD;
+}
+
+.m-input{
+  box-sizing: content-box;
+  width: var(--m-input-w);
+  height: 31px;
+  line-height: 31px;
+
+  &.m-input-disabled {
+
+    .m-input-inner, .m-textarea-inner {
+      background-color: var(--m-color-disabled) !important;
+    }
+
+  }
+}

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

@@ -0,0 +1,85 @@
+/**
+ * @description input api type
+ * @author 阿怪
+ * @date 2022/4/6 10:50 PM
+ * @version v1.0.0
+ *
+ * @name m-input
+ * @docDescription Input component with shuimo-ui style.
+ *              水墨组件的输入组件。
+ * @docUrl https://shuimo.design/input
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { HTMLElementEvent } from '../../types/template';
+import { KineSize } from '../../types/props';
+
+export declare type InputProps = {
+  /**
+   * @description input type. 输入框类型
+   * @type string
+   * @default input
+   * @enum input|textarea
+   */
+  type?: string,
+  /**
+   * @description input placeholder. 提示语
+   * @type string
+   * @default ''
+   */
+  placeholder?: string,
+  /**
+   * @description input value. 输入框绑定值
+   * @type string|number
+   * @default ''
+   */
+  modelValue?: string | number,
+  /**
+   * @description input readonly. 是否只读
+   * @type boolean
+   * @default false
+   */
+  readonly?: boolean,
+  /**
+   * @description input disabled. 是否禁用
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * @description input autofocus. 是否自动聚焦
+   * @type boolean
+   * @default false
+   */
+  autofocus?: boolean,
+  /**
+   * @description whether to show clear button. 是否可清空
+   * @type boolean
+   * @default false
+   */
+  clearable?: boolean,
+  /**
+   * @description input size. 输入框尺寸
+   * @type KineSize
+   * @default undefined
+   */
+  size?: KineSize,
+  /**
+   * @description max character length. 最大输入长度
+   * @type number
+   * @default undefined
+   */
+  maxlength?: number,
+  /**
+   * @description whether to show word count. 是否显示字数统计
+   * @type boolean
+   * @default false
+   */
+  showWordLimit?: boolean
+};
+
+export declare type InputEvents = {
+  onInput?: (e: HTMLElementEvent<HTMLInputElement>) => void
+  onFocus?: (e: FocusEvent) => void
+  onBlur?: (e: FocusEvent) => void
+};

package/components/base/input/useInput.ts

@@ -0,0 +1,63 @@
+/**
+ * @description
+ * @author 阿怪
+ * @date 2024/11/29 10:15
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { HTMLElementEvent } from '../../types/template';
+import { type HookContext } from '../../types/hook';
+
+
+export function useInput<
+  Props extends Record<string, any>,
+>(props: Props, ctx: HookContext) {
+
+  const isInput = props.type !== 'textarea';
+  const inputType = isInput ? 'input' : 'textarea';
+  const inputClass = isInput ? 'm-input-inner' : 'm-textarea-inner';
+  const rowInfo = isInput ? {} : { rows: 10 };
+
+  const baseProps = {
+    autofocus: props.autofocus,
+    value: props.modelValue,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    type: props.type,
+    readOnly: props.readonly,
+    maxLength: props.maxlength,
+  }
+
+  const onInput = (e: HTMLElementEvent<HTMLInputElement>)=>{
+    ctx.emit('update:modelValue', e.target.value);
+    ctx.emit('input', e.target.value);
+  }
+
+  const onFocus = (e: FocusEvent)=>{
+    ctx.emit('focus', e);
+  }
+
+  const onBlur = (e: FocusEvent)=>{
+    ctx.emit('blur', e);
+  }
+
+  const onClear = () => {
+    ctx.emit('update:modelValue', '');
+    ctx.emit('input', '');
+    ctx.emit('clear');
+  }
+
+  return {
+    baseProps,
+    inputType,
+    inputClass,
+    rowInfo,
+    onInput,
+    onFocus,
+    onBlur,
+    onClear,
+  }
+
+}