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

package/assets/style/global.css

@@ -0,0 +1 @@
+@import "var.css";

package/assets/style/var/Wuxing.css

@@ -0,0 +1,71 @@
+:root {
+  /*木 春*/
+  --m-color-piaobi: #C0D695; /*缥碧*/
+  --m-color-qingqing: #4F6F46; /*青青*/
+  --m-color-cuiqiu: #446A37; /*翠虬*/
+  --m-color-qingshou: #284852; /*青绶*/
+  --m-color-qingluan: #9AA7B1; /*青鸾*/
+  --m-color-songlan: #6B798E; /*菘蓝*/
+  --m-color-qingdai: #45465E; /*青黛*/
+  --m-color-luozidai: #13393E; /*螺子黛*/
+  --m-color-qiling: #12264F; /*麒麟*/
+  --m-color-cuiwei: #4C8045; /*翠微*/
+  --m-color-tingwulv: #68945C; /*庭芜绿*/
+  --m-color-cangjia: #A8BF8F; /*苍葭*/
+  --m-color-huangliliu: #FEDC5E; /*黄栗留*/
+  --m-color-zhizi: #FAC03D; /*栀子*/
+
+  /*火 夏*/
+  --m-color-zhuyantuo: #F29A76; /*朱颜酡*/
+  --m-color-wozhe: #DD6B7B; /*渥赭*/
+  --m-color-chunzhi: #C25160; /*唇脂*/
+  --m-color-danji: #E60012; /*丹罽*/
+  --m-color-daran: #A81C2B; /*大繎*/
+  --m-color-jiangsha: #B27777; /*绛纱*/
+  --m-color-xilan: #E3ADB9; /*夕岚*/
+
+  /*金 秋*/
+  --m-color-gaoyu: #EFEFEF; /*缟羽*/
+  --m-color-yuse: #EAE4D1; /*玉色*/
+  --m-color-luanhua: #C0AD5E; /*栾华*/
+  --m-color-xinzi: #DA9233; /*杏子*/
+  --m-color-moge: #9F5221; /*靺鞈*/
+  --m-color-chenxiang: #99806C; /*沉香*/
+  --m-color-mihe: #DFD7C2; /*蜜合*/
+  --m-color-huaqing: #1A2847; /*花青*/
+
+  /*水 冬*/
+  --m-color-yuebai: #D4E5EF; /*月白*/
+  --m-color-qingshan: #A3BBDB; /*晴山*/
+  --m-color-ziyuan: #757CBB; /*紫苑*/
+  --m-color-zhengqing: #6CA8AF; /*正青*/
+  --m-color-yuyangran: #576470; /*育阳染*/
+  --m-color-jingyuan: #31322C; /*京元*/
+  --m-color-tieli: #46433B; /*驖骊*/
+  --m-color-tajian: #151D29; /*獭见*/
+  --m-color-jieshizi: #602641; /*芥拾紫*/
+  --m-color-shiyin: #C8B6BB; /*石英*/
+
+  /*土*/
+  --m-color-xiaoyaoyou: #B2BFC3; /*逍遥游*/
+  --m-color-huangliang: #C4B798; /*黄梁*/
+  --m-color-tanhe: #945635; /*檀褐*/
+  --m-color-jijin: #896D47; /*吉金*/
+  --m-color-youhulu: #644D31; /*油葫芦*/
+
+  --m-color-jin-yang: var(--m-color-xinzi); /*金-阳*/
+  --m-color-jin-yin: var(--m-color-gaoyu); /*金-阴*/
+
+  --m-color-mu-yang: var(--m-color-cuiqiu); /*木-阳*/
+  --m-color-mu-yin: var(--m-color-piaobi); /*木-阴*/
+
+  --m-color-shui-yang: var(--m-color-tajian); /*水-阳*/
+  --m-color-shui-yin: var(--m-color-qingshan); /*水-阴*/
+
+  --m-color-huo-yang: var(--m-color-daran); /*火-阳*/
+  --m-color-huo-yin: var(--m-color-wozhe); /*火-阴*/
+
+  --m-color-tu-yang: var(--m-color-tanhe); /*土-阳*/
+  --m-color-tu-yin: var(--m-color-huangliang); /*土-阴*/
+
+}

package/assets/style/var.css

@@ -0,0 +1,23 @@
+@import "./var/Wuxing.css";
+
+:root{
+  --m-color-text: #2B333E;
+  --m-color-text-disabled: #74787A;
+  --m-color-text-dark: #0F1423;
+  --m-color-divider: #0F142333;
+  --m-color-success: #4A9992;
+  --m-color-error: #861717;
+  --m-color-background: #0F142320;
+  --m-color-green2: #1A3B32;
+  --m-color-pink: #CC163A;
+  --m-color-warn: #E8B004;
+
+  --m-color-main: #861717;
+  --m-color-border: #5E616D;
+  --m-color-orange: #FCA104;
+  --m-color-blue: #1661AB;
+  --m-color-green: #223E36;
+
+
+  --m-color-disabled: #DBDADD;
+}

package/components/base/affix/api.ts

@@ -0,0 +1,16 @@
+/**
+ * @description affix api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO } from '../../types/props';
+import { AffixProps } from './props';
+
+export const props: MCOPO<AffixProps> = {
+  offsetTop: { type: Number, default: undefined },
+  offsetBottom: { type: Number, default: undefined },
+  target: { type: String, default: '' },
+};

package/components/base/affix/index.ts

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

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

@@ -0,0 +1,34 @@
+/**
+ * @description affix props type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * @name k-affix
+ * @docDescription Affix（固钉）组件，滚动时将内容固定在可视区域。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type AffixProps = {
+  /**
+   * @description 距顶部的偏移量（px），与 offsetBottom 二选一
+   * @type number
+   */
+  offsetTop?: number,
+  /**
+   * @description 距底部的偏移量（px），与 offsetTop 二选一
+   * @type number
+   */
+  offsetBottom?: number,
+  /**
+   * @description 触发滚动监听的目标元素 CSS 选择器，默认监听 window
+   * @type string
+   * @default ''
+   */
+  target?: string,
+};
+
+export declare type AffixEmits = {
+  onChange?: (affixed: boolean) => void,
+};

package/components/base/affix/useAffix.ts

@@ -0,0 +1,123 @@
+/**
+ * @description affix hook
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref, onMounted, onUnmounted } from 'vue';
+import { AffixProps } from './props';
+
+export default function useAffix(
+  props: Required<AffixProps>,
+  emit: (event: string, ...args: unknown[]) => void,
+) {
+  const affixed = ref(false);
+  // 固定后占位元素的高度（撑开文档流）
+  const placeholderHeight = ref(0);
+  // 固定后的位置样式
+  const affixStyle = ref<Record<string, string>>({});
+
+  const wrapperRef = ref<HTMLElement | null>(null);
+  const wrapRef = ref<HTMLElement | null>(null);
+
+  const findScrollParent = (node: HTMLElement | null): HTMLElement | Window => {
+    let el = node?.parentElement;
+    while (el) {
+      const { overflowY } = getComputedStyle(el);
+      if (overflowY === 'auto' || overflowY === 'scroll') {
+        return el;
+      }
+      el = el.parentElement;
+    }
+    return window;
+  };
+
+  let scrollTarget: HTMLElement | Window | null = null;
+
+  const getScrollTarget = (): HTMLElement | Window => {
+    if (scrollTarget) { return scrollTarget; }
+    if (props.target) {
+      const el = document.querySelector<HTMLElement>(props.target);
+      if (el) { scrollTarget = el; return el; }
+    }
+    scrollTarget = findScrollParent(wrapperRef.value);
+    return scrollTarget;
+  };
+
+  const getContainerRect = (): DOMRect => {
+    const t = getScrollTarget();
+    if (t === window) {
+      return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+    }
+    return (t as HTMLElement).getBoundingClientRect();
+  };
+
+  const update = () => {
+    if (!wrapperRef.value || !wrapRef.value) { return; }
+
+    // 用 wrapper（始终在文档流中）的位置来判断，避免 fixed 元素位置不准
+    const wrapRect = wrapperRef.value.getBoundingClientRect();
+    const containerRect = getContainerRect();
+    let shouldAffix = false;
+    const style: Record<string, string> = {};
+
+    const contentWidth = affixed.value
+      ? wrapRef.value.getBoundingClientRect().width
+      : wrapRef.value.offsetWidth;
+
+    if (props.offsetTop !== undefined) {
+      const threshold = containerRect.top + props.offsetTop;
+      if (wrapRect.top <= threshold) {
+        shouldAffix = true;
+        style.position = 'fixed';
+        style.top = `${containerRect.top + props.offsetTop}px`;
+        style.width = `${contentWidth}px`;
+        style.zIndex = '100';
+      }
+    } else if (props.offsetBottom !== undefined) {
+      const threshold = containerRect.bottom - props.offsetBottom;
+      if (wrapRect.bottom >= threshold) {
+        shouldAffix = true;
+        style.position = 'fixed';
+        style.bottom = `${window.innerHeight - containerRect.bottom + props.offsetBottom}px`;
+        style.width = `${contentWidth}px`;
+        style.zIndex = '100';
+      }
+    }
+
+    if (shouldAffix !== affixed.value) {
+      if (shouldAffix) {
+        placeholderHeight.value = wrapRect.height;
+      } else {
+        placeholderHeight.value = 0;
+      }
+      affixed.value = shouldAffix;
+      emit('change', shouldAffix);
+    }
+
+    affixStyle.value = shouldAffix ? style : {};
+  };
+
+  onMounted(() => {
+    const target = getScrollTarget();
+    target.addEventListener('scroll', update, { passive: true });
+    window.addEventListener('resize', update, { passive: true });
+    update();
+  });
+
+  onUnmounted(() => {
+    const target = getScrollTarget();
+    target.removeEventListener('scroll', update);
+    window.removeEventListener('resize', update);
+  });
+
+  return {
+    wrapperRef,
+    wrapRef,
+    affixed,
+    affixStyle,
+    placeholderHeight,
+  };
+}

package/components/base/alert/api.ts

@@ -0,0 +1,18 @@
+/**
+ * @description alert api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { AlertProps } from './props';
+
+export const props: MCOPO<AlertProps> = {
+  type: { type: String as MPropType<'success' | 'warning' | 'error' | 'info'>, default: 'info' },
+  title: { type: String, default: undefined },
+  description: { type: String, default: undefined },
+  closable: { type: Boolean, default: false },
+  showIcon: { type: Boolean, default: false },
+};

package/components/base/alert/index.ts

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

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

@@ -0,0 +1,50 @@
+/**
+ * @description alert api type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * @name m-alert
+ * @docDescription Alert component with shuimo-ui style.
+ *                 水墨组件的警告提示组件。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type AlertProps = {
+  /**
+   * @description 提示类型
+   * @type 'success' | 'warning' | 'error' | 'info'
+   * @default 'info'
+   */
+  type?: 'success' | 'warning' | 'error' | 'info';
+  /**
+   * @description 标题
+   * @type string
+   */
+  title?: string;
+  /**
+   * @description 描述内容
+   * @type string
+   */
+  description?: string;
+  /**
+   * @description 是否可关闭
+   * @type boolean
+   * @default false
+   */
+  closable?: boolean;
+  /**
+   * @description 是否显示图标
+   * @type boolean
+   * @default false
+   */
+  showIcon?: boolean;
+};
+
+export declare type AlertEvents = {
+  /**
+   * @description 关闭时触发
+   */
+  onClose?: () => void;
+};

package/components/base/anchor/api.ts

@@ -0,0 +1,20 @@
+/**
+ * @description anchor api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { AnchorProps, AnchorLinkProps } from './props';
+
+export const props: MCOPO<AnchorProps> = {
+  offsetTop: { type: Number, default: 0 },
+  bounds: { type: Number, default: 5 },
+};
+
+export const anchorLinkProps: MCOPO<AnchorLinkProps> = {
+  href: { type: String as MPropType<string>, required: true },
+  title: { type: String, default: '' },
+};

package/components/base/anchor/index.ts

@@ -0,0 +1,16 @@
+/**
+ * @description anchor core
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props, anchorLinkProps } from './api.ts';
+import useAnchor from './useAnchor';
+
+export const AnchorCore = {
+  props,
+  anchorLinkProps,
+  useAnchor,
+};

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

@@ -0,0 +1,46 @@
+/**
+ * @description anchor props type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * @name k-anchor
+ * @docDescription Anchor（锚点导航）组件，根据滚动位置高亮当前锚点。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type AnchorProps = {
+  /**
+   * @description 滚动锚定时距顶部的偏移量（px）
+   * @type number
+   * @default 0
+   */
+  offsetTop?: number,
+  /**
+   * @description 锚点区域边界值，达到对应 bound 距离顶部就切换高亮（px）
+   * @type number
+   * @default 5
+   */
+  bounds?: number,
+};
+
+export declare type AnchorEmits = {
+  onChange?: (currentLink: string) => void,
+  onClick?: (href: string) => void,
+};
+
+/** AnchorLink 子组件 props */
+export declare type AnchorLinkProps = {
+  /**
+   * @description 锚点目标的 hash（如 #section-1）
+   * @type string
+   */
+  href: string,
+  /**
+   * @description 显示的标题文本
+   * @type string
+   * @default ''
+   */
+  title?: string,
+};

package/components/base/anchor/useAnchor.ts

@@ -0,0 +1,83 @@
+/**
+ * @description anchor hook
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref, onMounted, onUnmounted } from 'vue';
+import { AnchorProps } from './props';
+
+export default function useAnchor(
+  props: Required<AnchorProps>,
+  emit: (event: string, ...args: unknown[]) => void,
+) {
+  const currentLink = ref('');
+  // 由子组件注册的 href 列表（按 DOM 顺序）
+  const links = ref<string[]>([]);
+
+  /** 子组件调用此方法注册自己的 href */
+  const registerLink = (href: string) => {
+    if (!links.value.includes(href)) {
+      links.value.push(href);
+    }
+  };
+
+  const unregisterLink = (href: string) => {
+    const idx = links.value.indexOf(href);
+    if (idx !== -1) {
+      links.value.splice(idx, 1);
+    }
+  };
+
+  const getTargetEl = (href: string): HTMLElement | null => {
+    if (!href.startsWith('#')) { return null; }
+    return document.querySelector<HTMLElement>(href);
+  };
+
+  const onScroll = () => {
+    const scrollTop = window.scrollY + props.offsetTop + props.bounds;
+    let active = '';
+
+    // 从下往上遍历，找到第一个顶部距离小于等于 scrollTop 的元素
+    for (let i = links.value.length - 1; i >= 0; i--) {
+      const href = links.value[i];
+      const el = getTargetEl(href);
+      if (el && el.offsetTop <= scrollTop) {
+        active = href;
+        break;
+      }
+    }
+
+    if (active !== currentLink.value) {
+      currentLink.value = active;
+      emit('change', active);
+    }
+  };
+
+  const handleClick = (href: string) => {
+    emit('click', href);
+    const el = getTargetEl(href);
+    if (el) {
+      const top = el.offsetTop - props.offsetTop;
+      window.scrollTo({ top, behavior: 'smooth' });
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll);
+  });
+
+  return {
+    currentLink,
+    registerLink,
+    unregisterLink,
+    handleClick,
+  };
+}

package/components/base/autoComplete/api.ts

@@ -0,0 +1,24 @@
+/**
+ * @description autoComplete api
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { AutoCompleteProps, AutoCompleteOption } from './props';
+
+export const props: MCOPO<AutoCompleteProps> = {
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '请输入...' },
+  disabled: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  debounce: { type: Number, default: 300 },
+  fetchSuggestions: {
+    type: Function as MPropType<(query: string) => Promise<AutoCompleteOption[]> | AutoCompleteOption[]>,
+    default: undefined,
+  },
+  triggerOnFocus: { type: Boolean, default: false },
+  highlight: { type: Boolean, default: false },
+};

package/components/base/autoComplete/index.ts

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

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

@@ -0,0 +1,75 @@
+/**
+ * @description autoComplete api type
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * AutoComplete 是 freetype 模式的 Select：
+ * 输入值不限于选项，选项只是建议；
+ * 搜索来源由外部 fetchSuggestions 驱动。
+ */
+
+/**
+ * 建议项类型
+ */
+export declare type AutoCompleteOption = {
+  /** 值（也是输入框显示的文本） */
+  value: string;
+  /** 可选的展示标签，不传则使用 value */
+  label?: string;
+  /** 允许附加任意业务字段 */
+  [key: string]: unknown;
+};
+
+export declare type AutoCompleteProps = {
+  /**
+   * @description 当前输入值（双向绑定）
+   * @type string
+   * @default ''
+   */
+  modelValue?: string;
+  /**
+   * @description 输入框占位文字
+   * @type string
+   * @default '请输入...'
+   */
+  placeholder?: string;
+  /**
+   * @description 是否禁用
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @description 是否可清空
+   * @type boolean
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * @description 输入 debounce 延迟（毫秒），超过此时间后才触发 onSearch / fetchSuggestions
+   * @type number
+   * @default 300
+   */
+  debounce?: number;
+  /**
+   * @description 获取建议列表的函数，可返回 Promise 或同步数组
+   * @type Function
+   * @default undefined
+   */
+  fetchSuggestions?: (query: string) => Promise<AutoCompleteOption[]> | AutoCompleteOption[];
+  /**
+   * @description 聚焦时是否立即触发一次搜索（query 为当前 modelValue）
+   * @type boolean
+   * @default false
+   */
+  triggerOnFocus?: boolean;
+  /**
+   * @description 是否高亮匹配文字
+   * @type boolean
+   * @default false
+   */
+  highlight?: boolean;
+};