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

package/components/base/dropdown/useDropdown.ts

@@ -0,0 +1,123 @@
+/**
+ * @description dropdown composable
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { DropdownItemProps, DropdownProps } from './props';
+import useClickAway from '../../../compositions/popper/useClickAway';
+
+export default function useDropdown(props: Required<DropdownProps>, ctx: any) {
+  const { emit } = ctx;
+
+  // 下拉菜单是否展开
+  const visible = ref(false);
+
+  // 触发器 DOM 引用，用于 clickAway 检测
+  const triggerRef = ref<HTMLElement>();
+  const menuRef = ref<HTMLElement>();
+
+  /** 打开下拉菜单 */
+  const open = () => {
+    if (props.disabled) { return; }
+    visible.value = true;
+  };
+
+  /** 关闭下拉菜单 */
+  const close = () => {
+    visible.value = false;
+  };
+
+  /** 切换下拉菜单展开/收起 */
+  const toggle = () => {
+    if (visible.value) {
+      close();
+    } else {
+      open();
+    }
+  };
+
+  // 点击外部自动关闭
+  let clickAwayInstance: ReturnType<typeof useClickAway>;
+
+  onMounted(() => {
+    clickAwayInstance = useClickAway({
+      // 以 trigger 容器为边界，点击 trigger 或 menu 内部不触发关闭
+      target: () => triggerRef.value?.parentElement,
+      handler: () => {
+        close();
+      },
+    });
+    clickAwayInstance?.add();
+  });
+
+  onBeforeUnmount(() => {
+    clickAwayInstance?.remove();
+  });
+
+  // ---- 触发器事件处理 ----
+
+  /** click 触发模式下点击处理 */
+  const handleTriggerClick = () => {
+    if (props.trigger !== 'click') { return; }
+    toggle();
+  };
+
+  /** hover 触发模式下鼠标进入处理 */
+  const handleMouseenter = () => {
+    if (props.trigger !== 'hover') { return; }
+    open();
+  };
+
+  /** hover 触发模式下鼠标离开处理 */
+  const handleMouseleave = () => {
+    if (props.trigger !== 'hover') { return; }
+    close();
+  };
+
+  // ---- 选项点击处理 ----
+
+  /**
+   * 选项被点击时：触发 command 事件并关闭菜单
+   */
+  const handleItemClick = (item: DropdownItemProps) => {
+    if (item.disabled) { return; }
+    emit('command', item.command);
+    close();
+  };
+
+  // ---- class 计算 ----
+
+  const dropdownClass = computed(() => [
+    'm-dropdown',
+    { 'm-dropdown-open': visible.value },
+    { 'm-dropdown-disabled': props.disabled },
+  ]);
+
+  const menuClass = computed(() => ['m-dropdown-menu']);
+
+  const getItemClass = (item: DropdownItemProps) => [
+    'm-dropdown-item',
+    { 'm-dropdown-item-disabled': item.disabled },
+    { 'm-dropdown-item-divided': item.divided },
+  ];
+
+  return {
+    visible,
+    triggerRef,
+    menuRef,
+    open,
+    close,
+    toggle,
+    handleTriggerClick,
+    handleMouseenter,
+    handleMouseleave,
+    handleItemClick,
+    dropdownClass,
+    menuClass,
+    getItemClass,
+  };
+}

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/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,19 @@
+/**
+ * @description input api
+ * @author 阿怪
+ * @date 2023/4/20 17:31
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } 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 },
+};

package/components/base/input/index.ts

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

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,60 @@
+/**
+ * @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';
+
+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
+};
+
+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,53 @@
+/**
+ * @description
+ * @author 阿怪
+ * @date 2024/11/29 10:15
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { HTMLElementEvent } from '../../types/template';
+
+
+export default function useInput<
+  Props extends Record<string, any>,
+>(props: Props, ctx: any) {
+
+  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,
+  }
+
+  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);
+  }
+
+  return {
+    baseProps,
+    inputType,
+    inputClass,
+    rowInfo,
+    onInput,
+    onFocus,
+    onBlur
+  }
+
+}

package/components/base/inputNumber/api.ts

@@ -0,0 +1,21 @@
+/**
+ * @description inputNumber 运行时 props
+ * @author 阿怪
+ * @date 2026/2/25 00:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } 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 },
+};

package/components/base/inputNumber/index.ts

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

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

@@ -0,0 +1,64 @@
+/**
+ * @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
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+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
+};