@kine-design/core 0.0.1-beta.4 → 0.0.1-beta.6

package/components/template/menu/__tests__/useMenu.test.ts

@@ -0,0 +1,157 @@
+/**
+ * @description useMenu 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { useMenu } from '../useMenu';
+
+const SAMPLE_DATA = [
+  {
+    key: 'home', label: '首页',
+  },
+  {
+    key: 'system', label: '系统管理', children: [
+      { key: 'user', label: '用户管理' },
+      { key: 'role', label: '角色管理' },
+    ],
+  },
+  {
+    key: 'about', label: '关于',
+  },
+];
+
+describe('useMenu', () => {
+  it('initNodes 构建节点树', () => {
+    const { nodesRef, nodeMap } = useMenu({ data: SAMPLE_DATA });
+
+    expect(nodesRef.value).toHaveLength(3);
+    expect(nodeMap.size).toBe(5); // 3 + 2 children
+  });
+
+  it('根节点 isRoot=true，子节点有 parent', () => {
+    const { nodeMap } = useMenu({ data: SAMPLE_DATA });
+
+    expect(nodeMap.get('home')!.isRoot).toBe(true);
+    expect(nodeMap.get('user')!.isRoot).toBe(false);
+    expect(nodeMap.get('user')!.parent).toBe(nodeMap.get('system'));
+  });
+
+  it('defaultExpandAll 展开所有节点', () => {
+    const { nodeMap } = useMenu({ data: SAMPLE_DATA, defaultExpandAll: true });
+    expect(nodeMap.get('system')!.expand).toBe(true);
+  });
+
+  it('默认不展开', () => {
+    const { nodeMap } = useMenu({ data: SAMPLE_DATA });
+    expect(nodeMap.get('system')!.expand).toBe(false);
+  });
+
+  it('toggleExpand 切换展开', () => {
+    const { nodeMap, toggleExpand } = useMenu({ data: SAMPLE_DATA });
+    const node = nodeMap.get('system')!;
+
+    expect(node.expand).toBe(false);
+    toggleExpand(node);
+    expect(node.expand).toBe(true);
+    toggleExpand(node);
+    expect(node.expand).toBe(false);
+  });
+
+  it('setActive 激活节点并取消其他激活', () => {
+    const emit = vi.fn();
+    const { nodeMap, setActive } = useMenu({ data: SAMPLE_DATA }, emit);
+
+    setActive(nodeMap.get('home')!);
+    expect(nodeMap.get('home')!.isActive).toBe(true);
+    expect(emit).toHaveBeenCalledWith('update:active', 'home');
+
+    setActive(nodeMap.get('about')!);
+    expect(nodeMap.get('home')!.isActive).toBe(false);
+    expect(nodeMap.get('about')!.isActive).toBe(true);
+  });
+
+  it('受控 active 初始化', () => {
+    const { nodeMap } = useMenu({ data: SAMPLE_DATA, active: 'about' });
+    expect(nodeMap.get('about')!.isActive).toBe(true);
+    expect(nodeMap.get('home')!.isActive).toBe(false);
+  });
+
+  it('toggleChecked 切换选中', () => {
+    const { nodeMap, toggleChecked } = useMenu({ data: SAMPLE_DATA });
+    const node = nodeMap.get('user')!;
+
+    toggleChecked(node, true);
+    expect(node.checked).toBe(true);
+    expect(node.indeterminate).toBe(false);
+
+    toggleChecked(node, false);
+    expect(node.checked).toBe(false);
+  });
+
+  it('getCheckedKeys 获取选中 key', () => {
+    const { nodeMap, toggleChecked, getCheckedKeys } = useMenu({ data: SAMPLE_DATA });
+
+    toggleChecked(nodeMap.get('user')!, true);
+    toggleChecked(nodeMap.get('about')!, true);
+
+    const keys = getCheckedKeys();
+    expect(keys).toContain('user');
+    expect(keys).toContain('about');
+    expect(keys).toHaveLength(2);
+  });
+
+  it('半选节点不计入 getCheckedKeys', () => {
+    const { nodeMap, getCheckedKeys } = useMenu({ data: SAMPLE_DATA });
+    const node = nodeMap.get('system')!;
+    node.indeterminate = true;
+    node.checked = false;
+
+    expect(getCheckedKeys()).not.toContain('system');
+  });
+
+  it('getNodesByKeys 批量获取节点', () => {
+    const { getNodesByKeys } = useMenu({ data: SAMPLE_DATA });
+    const nodes = getNodesByKeys(['home', 'user']);
+    expect(nodes).toHaveLength(2);
+  });
+
+  it('getNodesByKeys 过滤不存在的 key', () => {
+    const { getNodesByKeys } = useMenu({ data: SAMPLE_DATA });
+    const nodes = getNodesByKeys(['home', 'nonexistent']);
+    expect(nodes).toHaveLength(1);
+  });
+
+  it('checkedKeys 初始化选中', () => {
+    const { nodeMap } = useMenu({ data: SAMPLE_DATA, checkedKeys: ['user', 'about'] });
+    expect(nodeMap.get('user')!.checked).toBe(true);
+    expect(nodeMap.get('about')!.checked).toBe(true);
+    expect(nodeMap.get('home')!.checked).toBe(false);
+  });
+
+  it('initNodes 重新初始化', () => {
+    const { initNodes, nodesRef, nodeMap } = useMenu({ data: SAMPLE_DATA });
+
+    initNodes([{ key: 'new', label: '新节点' }]);
+    expect(nodesRef.value).toHaveLength(1);
+    expect(nodeMap.size).toBe(1);
+    expect(nodeMap.get('new')!.label).toBe('新节点');
+  });
+
+  it('自定义 config 字段映射', () => {
+    const data = [
+      { id: 'a', name: '菜单A', items: [{ id: 'b', name: '子菜单B' }] },
+    ];
+    const { nodeMap } = useMenu({
+      data: data as any,
+      config: { key: 'id', label: 'name', children: 'items' },
+    });
+
+    expect(nodeMap.size).toBe(2);
+    expect(nodeMap.get('a')).toBeDefined();
+    expect(nodeMap.get('b')).toBeDefined();
+  });
+});

package/components/template/pagination/__tests__/usePagination.test.ts

@@ -0,0 +1,138 @@
+/**
+ * @description usePagination 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { usePagination, type Pager } from '../usePagination';
+
+/** 提取页码列表中的值 */
+const values = (list: Pager[]) => list.map(p => p.value);
+/** 提取页码列表中当前页标记 */
+const currentFlags = (list: Pager[]) => list.filter(p => p.isCurrent).map(p => p.value);
+
+describe('usePagination', () => {
+  describe('getPageBtnLength', () => {
+    it('计算总页数', () => {
+      const current = ref(1);
+      const { getPageBtnLength } = usePagination({ total: 100, pageSize: 10 }, current);
+      expect(getPageBtnLength()).toBe(10);
+    });
+
+    it('向上取整', () => {
+      const current = ref(1);
+      const { getPageBtnLength } = usePagination({ total: 101, pageSize: 10 }, current);
+      expect(getPageBtnLength()).toBe(11);
+    });
+
+    it('默认 total=0, pageSize=10', () => {
+      const current = ref(1);
+      const { getPageBtnLength } = usePagination({}, current);
+      expect(getPageBtnLength()).toBe(0);
+    });
+  });
+
+  describe('getPageNumList', () => {
+    it('只有一页时返回 [1]', () => {
+      const current = ref(1);
+      const { getPageNumList } = usePagination({ total: 5, pageSize: 10 }, current);
+      const list = getPageNumList();
+      expect(values(list)).toEqual([1]);
+    });
+
+    it('总页数 <= maxPageBtn 时不折叠', () => {
+      const current = ref(1);
+      const { getPageNumList } = usePagination({
+        total: 80, pageSize: 10, maxPageBtn: 10,
+      }, current);
+      const list = getPageNumList();
+      expect(values(list)).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
+    });
+
+    it('当前页靠左时右侧折叠', () => {
+      const current = ref(1);
+      const { getPageNumList } = usePagination({
+        total: 200, pageSize: 10, foldedMaxPageBtn: 5, maxPageBtn: 10,
+      }, current);
+      const list = getPageNumList();
+
+      // 应包含折叠符 "..."
+      expect(list.some(p => p.type === 'folded')).toBe(true);
+      // 最后一个应是尾页 20
+      expect(list[list.length - 1].value).toBe(20);
+      // isCurrent 标记正确
+      expect(currentFlags(list)).toEqual([1]);
+    });
+
+    it('当前页靠右时左侧折叠', () => {
+      const current = ref(20);
+      const { getPageNumList } = usePagination({
+        total: 200, pageSize: 10, foldedMaxPageBtn: 5, maxPageBtn: 10,
+      }, current);
+      const list = getPageNumList();
+
+      expect(list[0].value).toBe(1); // 首页
+      expect(list[1].type).toBe('folded'); // 左折叠
+      expect(currentFlags(list)).toEqual([20]);
+    });
+
+    it('当前页居中时两侧折叠', () => {
+      const current = ref(10);
+      const { getPageNumList } = usePagination({
+        total: 200, pageSize: 10, foldedMaxPageBtn: 5, maxPageBtn: 10,
+      }, current);
+      const list = getPageNumList();
+
+      expect(list[0].value).toBe(1); // 首页
+      expect(list[list.length - 1].value).toBe(20); // 尾页
+      // 两个折叠符
+      const foldedCount = list.filter(p => p.type === 'folded').length;
+      expect(foldedCount).toBe(2);
+      expect(currentFlags(list)).toEqual([10]);
+    });
+
+    it('showEdgePageNum=false 不显示首尾页', () => {
+      const current = ref(10);
+      const { getPageNumList } = usePagination({
+        total: 200, pageSize: 10, foldedMaxPageBtn: 5, maxPageBtn: 10, showEdgePageNum: false,
+      }, current);
+      const list = getPageNumList();
+
+      // 不应以 1 开头
+      expect(list[0].value).not.toBe(1);
+      expect(list[list.length - 1].value).not.toBe(20);
+    });
+
+    it('折叠符的 jump 值正确', () => {
+      const current = ref(10);
+      const { getPageNumList } = usePagination({
+        total: 200, pageSize: 10, foldedMaxPageBtn: 5, maxPageBtn: 10,
+      }, current);
+      const list = getPageNumList();
+
+      const foldedPagers = list.filter(p => p.type === 'folded');
+      // 每个折叠符都应有 jump 值
+      foldedPagers.forEach(p => {
+        expect(p.jump).toBeGreaterThan(0);
+      });
+    });
+
+    it('isCurrent 标记正确跟随 currentValue', () => {
+      const current = ref(5);
+      const { getPageNumList } = usePagination({
+        total: 80, pageSize: 10,
+      }, current);
+      const list = getPageNumList();
+
+      expect(currentFlags(list)).toEqual([5]);
+
+      current.value = 3;
+      const list2 = getPageNumList();
+      expect(currentFlags(list2)).toEqual([3]);
+    });
+  });
+});

package/components/template/table/__tests__/useTable.test.ts

@@ -0,0 +1,139 @@
+/**
+ * @description useTable 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { useTable } from '../useTable';
+
+describe('useTable', () => {
+  const createRenders = () => ({
+    empty: 'EMPTY',
+    tbodyTr: (opt: any) => `TD:${opt.param}:${opt.data}`,
+    theadTh: (opt: any) => `TH:${opt.param}:${opt.label}`,
+    thead: (ths: string[]) => `THEAD:[${ths.join(',')}]`,
+    tbody: (trs: string[]) => `TBODY:[${trs.join(',')}]`,
+    tbodyTrs: (tds: string[], i: number) => `TR${i}:[${tds.join(',')}]`,
+    initSlot: () => undefined,
+  });
+
+  it('initTable 正确构建表头和表体', () => {
+    const { initTable } = useTable();
+    const columns = [
+      { props: { param: 'name', label: '姓名' } },
+      { props: { param: 'age', label: '年龄' } },
+    ];
+    const data = [
+      { name: '张三', age: 25 },
+      { name: '李四', age: 30 },
+    ];
+
+    const result = initTable(createRenders(), columns, data);
+
+    expect(result.thead).toBe('THEAD:[TH:name:姓名,TH:age:年龄]');
+    expect(result.tbody).toContain('TD:name:张三');
+    expect(result.tbody).toContain('TD:age:30');
+  });
+
+  it('数据为空时渲染 empty', () => {
+    const { initTable } = useTable();
+    const columns = [{ props: { param: 'name', label: '姓名' } }];
+
+    const result = initTable(createRenders(), columns, []);
+    expect(result.tbody).toBe('EMPTY');
+  });
+
+  it('列没有 props 时被过滤', () => {
+    const { initTable } = useTable();
+    const errorSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const columns = [
+      { props: { param: 'name', label: '姓名' } },
+      {}, // 无 props
+    ];
+    const data = [{ name: '张三' }];
+
+    const result = initTable(createRenders(), columns, data);
+    expect(result.thead).toBe('THEAD:[TH:name:姓名]');
+    expect(errorSpy).toHaveBeenCalled();
+
+    errorSpy.mockRestore();
+  });
+
+  it('列宽 number 转换为 px', () => {
+    const { initTable } = useTable();
+    const renders = {
+      ...createRenders(),
+      theadTh: (opt: any) => `TH:${opt.style?.width}`,
+    };
+    const columns = [{ props: { param: 'name', label: '姓名', width: 200 } }];
+
+    const result = initTable(renders, columns, [{ name: 'test' }]);
+    expect(result.thead).toContain('200px');
+  });
+
+  it('列宽 string 直接使用', () => {
+    const { initTable } = useTable();
+    const renders = {
+      ...createRenders(),
+      theadTh: (opt: any) => `TH:${opt.style?.width}`,
+    };
+    const columns = [{ props: { param: 'name', label: '姓名', width: '50%' } }];
+
+    const result = initTable(renders, columns, [{ name: 'test' }]);
+    expect(result.thead).toContain('50%');
+  });
+
+  it('data 中缺少字段时返回空字符串', () => {
+    const { initTable } = useTable();
+    const columns = [{ props: { param: 'missing', label: '缺失' } }];
+    const data = [{ name: 'test' }];
+
+    const result = initTable(createRenders(), columns, data);
+    expect(result.tbody).toContain('TD:missing:');
+  });
+
+  it('initSlot 返回 slot 时传递给 tbodyTr', () => {
+    const { initTable } = useTable();
+    const bodySlot = () => 'custom';
+    const renders = {
+      ...createRenders(),
+      initSlot: () => ({ body: bodySlot, head: undefined }),
+      tbodyTr: (opt: any) => `TD:${opt.slot ? 'has-slot' : 'no-slot'}`,
+    };
+    const columns = [{ props: { param: 'name', label: '姓名' } }];
+    const data = [{ name: 'test' }];
+
+    const result = initTable(renders, columns, data);
+    expect(result.tbody).toContain('has-slot');
+  });
+
+  it('slotInfo 包含行数据和索引', () => {
+    const { initTable } = useTable();
+    let capturedSlotInfo: any;
+    const renders = {
+      ...createRenders(),
+      tbodyTr: (opt: any) => {
+        capturedSlotInfo = opt.slotInfo;
+        return 'TD';
+      },
+    };
+    const columns = [{ props: { param: 'name', label: '姓名' } }];
+    const data = [{ name: '张三' }];
+
+    initTable(renders, columns, data);
+    expect(capturedSlotInfo).toEqual({ data: { name: '张三' }, index: 0 });
+  });
+
+  it('error 输出带前缀的警告', () => {
+    const { error } = useTable();
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    error('test error');
+    expect(spy).toHaveBeenCalledWith('[水墨UI表格组件] test error');
+
+    spy.mockRestore();
+  });
+});

package/components/template/table/useTable.ts

@@ -49,10 +49,8 @@ export function useTable() {
 
     /** 从 data[i] 中安全取值 */
     const getData = (i: number, param: string) => {
-      if (data[i] && data[i][param]) {
-        return data[i][param];
-      }
-      return '';
+      if (data[i] == null) return '';
+      return data[i][param] ?? '';
     };
 
     /** 向每行的 td 列表中追加一列 */

package/components/types/hook.d.ts

@@ -10,4 +10,15 @@ import { SlotsType } from '@vue/runtime-core';
 
 export type UseHookResult<Props, S extends SlotsType, Return> = Return;
 
+/**
+ * Core hook 所需的最小 context 类型。
+ * 使用 `(...args: any[]) => void` 而非 `(event: string, ...) => void`，
+ * 以兼容 Vue defineComponent typed emits 产生的窄化 emit 签名。
+ */
+export type HookContext = {
+  emit: (...args: any[]) => void;
+  slots: Readonly<Record<string, ((...args: any[]) => any) | undefined>>;
+  expose?: (exposed?: Record<string, any>) => void;
+};
+
 

package/components/types/props.d.ts

@@ -50,3 +50,8 @@ type MPropMethod<T, TConstructor = any> = [T] extends [
   : never
 
 export type MPropType<T> = MPropConstructor<T> | MPropConstructor<T>[];
+
+/**
+ * @description unified component size variants
+ */
+export type KineSize = 'large' | 'medium' | 'small';

package/compositions/common/__tests__/useDebounceFn.test.ts

@@ -0,0 +1,62 @@
+/**
+ * @description useDebounceFn 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import useDebounceFn from '../useDebounceFn';
+
+beforeEach(() => { vi.useFakeTimers(); });
+afterEach(() => { vi.useRealTimers(); });
+
+describe('useDebounceFn', () => {
+  it('返回防抖后的函数', () => {
+    const fn = vi.fn();
+    const debounced = useDebounceFn(fn, 100);
+
+    debounced();
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('默认延迟 200ms', () => {
+    const fn = vi.fn();
+    const debounced = useDebounceFn(fn);
+
+    debounced();
+    vi.advanceTimersByTime(199);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(1);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('支持 maxWait 选项', () => {
+    const fn = vi.fn();
+    const debounced = useDebounceFn(fn, 100, { maxWait: 150 });
+
+    debounced();
+    vi.advanceTimersByTime(80);
+    debounced();
+    vi.advanceTimersByTime(80);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it('多次调用只执行最后一次', () => {
+    const fn = vi.fn();
+    const debounced = useDebounceFn(fn, 50);
+
+    debounced('a');
+    debounced('b');
+    debounced('c');
+
+    vi.advanceTimersByTime(50);
+    expect(fn).toHaveBeenCalledOnce();
+    expect(fn).toHaveBeenCalledWith('c');
+  });
+});

package/compositions/common/__tests__/useEventListener.test.ts

@@ -0,0 +1,71 @@
+/**
+ * @description useEventListener 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it, vi } from 'vitest';
+import useEventListener from '../useEventListener';
+
+describe('useEventListener', () => {
+  it('add 注册事件，remove 移除事件', () => {
+    const handler = vi.fn();
+    const target = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    };
+
+    const { add, remove } = useEventListener({
+      target,
+      event: 'click',
+      handler,
+    });
+
+    add();
+    expect(target.addEventListener).toHaveBeenCalledWith('click', handler);
+
+    remove();
+    expect(target.removeEventListener).toHaveBeenCalledWith('click', handler);
+  });
+
+  it('onMounted 调用 add，onBeforeUnmount 调用 remove', () => {
+    const handler = vi.fn();
+    const target = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    };
+
+    const { onMounted, onBeforeUnmount } = useEventListener({
+      target,
+      event: 'scroll',
+      handler,
+    });
+
+    onMounted();
+    expect(target.addEventListener).toHaveBeenCalledOnce();
+
+    onBeforeUnmount();
+    expect(target.removeEventListener).toHaveBeenCalledOnce();
+  });
+
+  it('target 为函数时延迟求值', () => {
+    const handler = vi.fn();
+    const realTarget = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    };
+    const targetFn = vi.fn(() => realTarget);
+
+    const { add } = useEventListener({
+      target: targetFn,
+      event: 'click',
+      handler,
+    });
+
+    add();
+    expect(targetFn).toHaveBeenCalled();
+    expect(realTarget.addEventListener).toHaveBeenCalledWith('click', handler);
+  });
+});

package/compositions/common/__tests__/usePopover.test.ts

@@ -0,0 +1,38 @@
+/**
+ * @description usePopover（common）测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it } from 'vitest';
+import usePopover from '../usePopover';
+
+describe('usePopover', () => {
+  it('默认 placement 为 bottom-start', () => {
+    const { popoverOptions } = usePopover();
+    expect(popoverOptions.placement).toBe('bottom-start');
+  });
+
+  it('自定义 placement', () => {
+    const { popoverOptions } = usePopover({ placement: 'top-end' });
+    expect(popoverOptions.placement).toBe('top-end');
+  });
+
+  it('默认 middleware 包含 offset、flip、shift', () => {
+    const { popoverOptions } = usePopover();
+    expect(popoverOptions.popper?.middleware).toHaveLength(3);
+  });
+
+  it('自定义 offset', () => {
+    const { popoverOptions } = usePopover(undefined, { offset: 10 });
+    expect(popoverOptions.popper?.middleware).toHaveLength(3);
+  });
+
+  it('扩展 middleware', () => {
+    const customMiddleware = { name: 'custom', fn: () => ({}) };
+    const { popoverOptions } = usePopover(undefined, { extends: [customMiddleware as any] });
+    expect(popoverOptions.popper?.middleware).toHaveLength(4);
+  });
+});

package/compositions/common/__tests__/useTeleport.test.ts

@@ -0,0 +1,25 @@
+/**
+ * @description useTeleport / initTeleportOptions 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it } from 'vitest';
+import { initTeleportOptions } from '../useTeleport';
+
+describe('initTeleportOptions', () => {
+  it('true 默认 teleport 到 body', () => {
+    expect(initTeleportOptions(true)).toEqual({ to: 'body' });
+  });
+
+  it('undefined 默认 teleport 到 body', () => {
+    expect(initTeleportOptions(undefined)).toEqual({ to: 'body' });
+  });
+
+  it('自定义配置直接返回', () => {
+    const custom = { to: '#app', disabled: false };
+    expect(initTeleportOptions(custom as any)).toBe(custom);
+  });
+});

package/compositions/common/useComponentSize.ts

@@ -0,0 +1,17 @@
+/**
+ * @description composable for unified component size with global injection support
+ * @author 阿怪
+ * @date 2026/4/7
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { computed, inject, type InjectionKey, type Ref } from 'vue';
+import { KineSize } from '../../components/types/props';
+
+export const KINE_SIZE_KEY: InjectionKey<Ref<KineSize>> = Symbol('kine-size');
+
+export function useComponentSize(props: { size?: KineSize }): Ref<KineSize> {
+  const globalSize = inject(KINE_SIZE_KEY, undefined);
+  return computed(() => props.size ?? globalSize?.value ?? 'medium');
+}