@veltra/desktop 1.0.9 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/components/batch-edit/batch-edit.js.map +1 -1
  2. package/dist/components/batch-edit/batch-edit.vue.d.ts +2 -2
  3. package/dist/components/batch-edit/style.js +2 -2
  4. package/dist/components/batch-edit/use-edit.js.map +1 -1
  5. package/dist/components/button/button.js.map +1 -1
  6. package/dist/components/cascade/cascade.vue.d.ts +5 -5
  7. package/dist/components/cascade/use-select.js.map +1 -1
  8. package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
  9. package/dist/components/checkbox-group/checkbox-group.vue.d.ts +2 -2
  10. package/dist/components/date-panel/date-panel.js.map +1 -1
  11. package/dist/components/drawer/drawer.js.map +1 -1
  12. package/dist/components/expression-editor/expression-editor.js.map +1 -1
  13. package/dist/components/expression-editor/internal/editor-runtime/create-runtime.js.map +1 -1
  14. package/dist/components/expression-editor/internal/features/commands/register-command-packs.js.map +1 -1
  15. package/dist/components/expression-editor/internal/features/insertion/insertion-service.js.map +1 -1
  16. package/dist/components/expression-editor/use-decorators.js.map +1 -1
  17. package/dist/components/expression-editor/use-expression-drag-drop.js.map +1 -1
  18. package/dist/components/file-picker/file-picker.js.map +1 -1
  19. package/dist/components/file-viewer/previewers/sheet-previewer.js.map +1 -1
  20. package/dist/components/form/form-model.js +2 -1
  21. package/dist/components/form/form-model.js.map +1 -1
  22. package/dist/components/grid/grid.js.map +1 -1
  23. package/dist/components/grid/use-responsive.js.map +1 -1
  24. package/dist/components/input/input.vue.d.ts +2 -2
  25. package/dist/components/list/list.js.map +1 -1
  26. package/dist/components/loading/directive.js.map +1 -1
  27. package/dist/components/menu/menu-item.js.map +1 -1
  28. package/dist/components/message/message2.js.map +1 -1
  29. package/dist/components/multi-select/multi-select.js.map +1 -1
  30. package/dist/components/multi-select/multi-select.vue.d.ts +3 -3
  31. package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +5 -5
  32. package/dist/components/notification/index.js.map +1 -1
  33. package/dist/components/number-input/number-input.js.map +1 -1
  34. package/dist/components/number-range-input/number-range-input.vue.d.ts +1 -1
  35. package/dist/components/palette/color-transform.js.map +1 -1
  36. package/dist/components/palette/palette-sv.js.map +1 -1
  37. package/dist/components/pop-confirm/pop-confirm.vue.d.ts +1 -1
  38. package/dist/components/progress/progress.js +1 -1
  39. package/dist/components/progress/progress.js.map +1 -1
  40. package/dist/components/progress-nodes/progress-nodes.js.map +1 -1
  41. package/dist/components/progress-nodes/progress-nodes.vue.d.ts +3 -3
  42. package/dist/components/radio-group/radio-group.vue.d.ts +2 -2
  43. package/dist/components/rich-text-editor/rich-text-editor.js.map +1 -1
  44. package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts +1 -1
  45. package/dist/components/rich-text-editor/toolbar.js.map +1 -1
  46. package/dist/components/scroll/scroll.js.map +1 -1
  47. package/dist/components/select/select.vue.d.ts +2 -2
  48. package/dist/components/slider/slider-thumb.js.map +1 -1
  49. package/dist/components/table/di.js.map +1 -1
  50. package/dist/components/table/style.js +1 -1
  51. package/dist/components/table/table-row.js +1 -2
  52. package/dist/components/table/table-row.js.map +1 -1
  53. package/dist/components/table/table.js +1 -2
  54. package/dist/components/table/table.js.map +1 -1
  55. package/dist/components/table/table.vue.d.ts +2 -2
  56. package/dist/components/table/use-columns.js +4 -0
  57. package/dist/components/table/use-columns.js.map +1 -1
  58. package/dist/components/table/use-table.js +25 -0
  59. package/dist/components/table/use-table.js.map +1 -1
  60. package/dist/components/tabs/style2.css +3 -2
  61. package/dist/components/tabs/tabs-horizontal.js +2 -2
  62. package/dist/components/tabs/tabs-horizontal.js.map +1 -1
  63. package/dist/components/tabs/tabs-horizontal.vue.d.ts +14 -3
  64. package/dist/components/tabs/tabs-vertical.js +2 -2
  65. package/dist/components/tabs/tabs-vertical.js.map +1 -1
  66. package/dist/components/tabs/tabs-vertical.vue.d.ts +13 -3
  67. package/dist/components/tabs/tabs.vue.d.ts +2 -2
  68. package/dist/components/text/text.js.map +1 -1
  69. package/dist/components/textarea/textarea.js.map +1 -1
  70. package/dist/components/textarea/textarea.vue.d.ts +3 -3
  71. package/dist/components/theme/theme.js.map +1 -1
  72. package/dist/components/tip/tip.vue.d.ts +1 -1
  73. package/dist/components/tree/tree-node2.js.map +1 -1
  74. package/dist/components/tree/tree.vue.d.ts +4 -4
  75. package/dist/components/tree/use-tree-nodes.js.map +1 -1
  76. package/dist/components/tree-select/tree-select.vue.d.ts +5 -5
  77. package/dist/components/watermark/watermark.vue.d.ts +1 -1
  78. package/package.json +11 -11
  79. package/src/components/progress/progress.vue +1 -1
  80. package/src/components/table/di.ts +51 -53
  81. package/src/components/table/table.vue +0 -1
  82. package/src/components/tabs/style.scss +7 -4
  83. package/src/components/tabs/tabs-horizontal.vue +10 -7
  84. package/src/components/tabs/tabs-vertical.vue +3 -1
@@ -1 +1 @@
1
- {"version":3,"file":"palette-sv.js","names":[],"sources":["../../../src/components/palette/palette-sv.vue"],"sourcesContent":["<template>\n <!-- 调色画布 -->\n <div :class=\"cls.e('sv')\" ref=\"svRef\">\n <div :class=\"cls.e('sv-s')\" :style=\"{ backgroundImage: canvasBackground }\"></div>\n <div :class=\"cls.e('sv-v')\">{{}}</div>\n\n <div\n :class=\"cls.e('sv-thumb')\"\n ref=\"svThumbRef\"\n @click.stop\n @mousedown.stop\n :style=\"svThumbStyle\"\n ></div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, reactive, shallowRef, onMounted } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteSV'\n})\n\nconst { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey)!\n\nconst svRef = shallowRef<HTMLDivElement>()\n\nconst canvasSize = {\n width: 0,\n height: 0\n}\n\nconst rangeX = [0, 0] as [number, number]\nconst rangeY = [0, 0] as [number, number]\n\nconst getCanvasSize = () => {\n if (!svRef.value) return\n const { offsetHeight, offsetWidth } = svRef.value!\n\n canvasSize.width = offsetWidth\n rangeX[1] = offsetWidth\n\n canvasSize.height = offsetHeight\n rangeY[1] = offsetHeight\n}\n\nconst transform = reactive({\n x: 0,\n y: 0\n})\n\nconst svThumbStyle = computed(() => {\n return {\n transform: `translate(${transform.x}px, ${transform.y}px)`\n }\n})\n\nconst updateThumb = userAction((offsetX: number, offsetY: number) => {\n transform.x = offsetX\n transform.y = offsetY\n\n // 根据画布位置计算饱和度和亮度\n // 水平方向表示饱和度,从左到右饱和度逐渐增高\n // 垂直方向表示亮度,上亮下暗\n const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))\n const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))\n\n // 更新饱和度和亮度\n updateSV({ s, v })\n})\n\nconst svDragger = useDrag({\n target: svRef,\n rangeX,\n rangeY,\n\n onDrag({ offsetX, offsetY }) {\n updateThumb(offsetX, offsetY)\n },\n onDragStart(e) {\n getCanvasSize()\n\n const { offsetX, offsetY } = e\n\n updateThumb(offsetX, offsetY)\n\n svDragger.update({ offsetX, offsetY })\n }\n})\n\nconst canvasBackground = computed(() => {\n const { r, g, b } = hueRGB.value\n return `linear-gradient(to right, rgb(255, 255, 255), rgb(${r}, ${g}, ${b}))`\n})\n\nfunction init(): void {\n getCanvasSize()\n transform.x = canvasSize.width * HSV.s\n transform.y = canvasSize.height * (1 - HSV.v)\n}\n\nonMounted(() => {\n init()\n})\n\ndefineExpose({\n init\n})\n</script>\n"],"mappings":";;;;;;;;EA0BA,MAAM,EAAE,KAAK,QAAQ,KAAK,UAAU,eAAe,OAAO,aAAa;EAEvE,MAAM,QAAQ,YAA2B;EAEzC,MAAM,aAAa;GACjB,OAAO;GACP,QAAQ;GACV;EAEA,MAAM,SAAS,CAAC,GAAG,EAAE;EACrB,MAAM,SAAS,CAAC,GAAG,EAAE;EAErB,MAAM,sBAAsB;AAC1B,OAAI,CAAC,MAAM,MAAO;GAClB,MAAM,EAAE,cAAc,gBAAgB,MAAM;AAE5C,cAAW,QAAQ;AACnB,UAAO,KAAK;AAEZ,cAAW,SAAS;AACpB,UAAO,KAAK;;EAGd,MAAM,YAAY,SAAS;GACzB,GAAG;GACH,GAAG;GACJ,CAAA;EAED,MAAM,eAAe,eAAe;AAClC,UAAO,EACL,WAAW,aAAa,UAAU,EAAE,MAAM,UAAU,EAAE,MACxD;IACD;EAED,MAAM,cAAc,YAAY,SAAiB,YAAoB;AACnE,aAAU,IAAI;AACd,aAAU,IAAI;AASd,YAAS;IAAE,GAJD,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,WAAW,MAAM,CAAA;IAI/C,GAHJ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,UAAU,WAAW,OAAO,CAAA;IAGjD,CAAA;IAClB;EAED,MAAM,YAAY,QAAQ;GACxB,QAAQ;GACR;GACA;GAEA,OAAO,EAAE,SAAS,WAAW;AAC3B,gBAAY,SAAS,QAAO;;GAE9B,YAAY,GAAG;AACb,mBAAc;IAEd,MAAM,EAAE,SAAS,YAAY;AAE7B,gBAAY,SAAS,QAAO;AAE5B,cAAU,OAAO;KAAE;KAAS;KAAS,CAAA;;GAExC,CAAA;EAED,MAAM,mBAAmB,eAAe;GACtC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;AAC3B,UAAO,qDAAqD,EAAE,IAAI,EAAE,IAAI,EAAE;IAC3E;EAED,SAAS,OAAa;AACpB,kBAAc;AACd,aAAU,IAAI,WAAW,QAAQ,IAAI;AACrC,aAAU,IAAI,WAAW,UAAU,IAAI,IAAI;;AAG7C,kBAAgB;AACd,SAAK;IACN;AAED,WAAa,EACX,MACD,CAAA;;2DA7GC,mBAAA,SAAa,EACb,mBAWM,OAAA;IAXA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,KAAA,CAAA;aAAY;IAAJ,KAAI;;IAC5B,mBAAiF,OAAA;KAA3E,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA;KAAW,OAAK,eAAA,EAAA,iBAAqB,iBAAA,OAAgB,CAAA;;IACvE,mBAAsC,OAAA,EAAhC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA,EAAA,EAAA,iBAAA,EAAA,EAAA;IAElB,mBAMO,OAAA;KALJ,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;KACb,KAAI;KACH,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;KACV,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAe,CAAA,OAAA,CAAA;KACd,OAAK,eAAE,aAAA,MAAY"}
1
+ {"version":3,"file":"palette-sv.js","names":[],"sources":["../../../src/components/palette/palette-sv.vue"],"sourcesContent":["<template>\n <!-- 调色画布 -->\n <div :class=\"cls.e('sv')\" ref=\"svRef\">\n <div :class=\"cls.e('sv-s')\" :style=\"{ backgroundImage: canvasBackground }\"></div>\n <div :class=\"cls.e('sv-v')\">{{}}</div>\n\n <div\n :class=\"cls.e('sv-thumb')\"\n ref=\"svThumbRef\"\n @click.stop\n @mousedown.stop\n :style=\"svThumbStyle\"\n ></div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, reactive, shallowRef, onMounted } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n name: 'PaletteSV'\n})\n\nconst { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey)!\n\nconst svRef = shallowRef<HTMLDivElement>()\n\nconst canvasSize = {\n width: 0,\n height: 0\n}\n\nconst rangeX = [0, 0] as [number, number]\nconst rangeY = [0, 0] as [number, number]\n\nconst getCanvasSize = () => {\n if (!svRef.value) return\n const { offsetHeight, offsetWidth } = svRef.value!\n\n canvasSize.width = offsetWidth\n rangeX[1] = offsetWidth\n\n canvasSize.height = offsetHeight\n rangeY[1] = offsetHeight\n}\n\nconst transform = reactive({\n x: 0,\n y: 0\n})\n\nconst svThumbStyle = computed(() => {\n return {\n transform: `translate(${transform.x}px, ${transform.y}px)`\n }\n})\n\nconst updateThumb = userAction((offsetX: number, offsetY: number) => {\n transform.x = offsetX\n transform.y = offsetY\n\n // 根据画布位置计算饱和度和亮度\n // 水平方向表示饱和度,从左到右饱和度逐渐增高\n // 垂直方向表示亮度,上亮下暗\n const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))\n const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))\n\n // 更新饱和度和亮度\n updateSV({ s, v })\n})\n\nconst svDragger = useDrag({\n target: svRef,\n rangeX,\n rangeY,\n\n onDrag({ offsetX, offsetY }) {\n updateThumb(offsetX, offsetY)\n },\n onDragStart(e) {\n getCanvasSize()\n\n const { offsetX, offsetY } = e\n\n updateThumb(offsetX, offsetY)\n\n svDragger.update({ offsetX, offsetY })\n }\n})\n\nconst canvasBackground = computed(() => {\n const { r, g, b } = hueRGB.value\n return `linear-gradient(to right, rgb(255, 255, 255), rgb(${r}, ${g}, ${b}))`\n})\n\nfunction init(): void {\n getCanvasSize()\n transform.x = canvasSize.width * HSV.s\n transform.y = canvasSize.height * (1 - HSV.v)\n}\n\nonMounted(() => {\n init()\n})\n\ndefineExpose({\n init\n})\n</script>\n"],"mappings":";;;;;;;;EA0BA,MAAM,EAAE,KAAK,QAAQ,KAAK,UAAU,eAAe,OAAO,aAAa;EAEvE,MAAM,QAAQ,YAA2B;EAEzC,MAAM,aAAa;GACjB,OAAO;GACP,QAAQ;GACV;EAEA,MAAM,SAAS,CAAC,GAAG,EAAE;EACrB,MAAM,SAAS,CAAC,GAAG,EAAE;EAErB,MAAM,sBAAsB;AAC1B,OAAI,CAAC,MAAM,MAAO;GAClB,MAAM,EAAE,cAAc,gBAAgB,MAAM;AAE5C,cAAW,QAAQ;AACnB,UAAO,KAAK;AAEZ,cAAW,SAAS;AACpB,UAAO,KAAK;;EAGd,MAAM,YAAY,SAAS;GACzB,GAAG;GACH,GAAG;GACJ,CAAA;EAED,MAAM,eAAe,eAAe;AAClC,UAAO,EACL,WAAW,aAAa,UAAU,EAAE,MAAM,UAAU,EAAE,MACxD;IACD;EAED,MAAM,cAAc,YAAY,SAAiB,YAAoB;AACnE,aAAU,IAAI;AACd,aAAU,IAAI;AASd,YAAS;IAAE,GAJD,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,WAAW,MAAM,CAIlD;IAAG,GAHJ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,UAAU,WAAW,OAAO,CAGpD;IAAG,CAAA;IAClB;EAED,MAAM,YAAY,QAAQ;GACxB,QAAQ;GACR;GACA;GAEA,OAAO,EAAE,SAAS,WAAW;AAC3B,gBAAY,SAAS,QAAO;;GAE9B,YAAY,GAAG;AACb,mBAAc;IAEd,MAAM,EAAE,SAAS,YAAY;AAE7B,gBAAY,SAAS,QAAO;AAE5B,cAAU,OAAO;KAAE;KAAS;KAAS,CAAA;;GAExC,CAAA;EAED,MAAM,mBAAmB,eAAe;GACtC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;AAC3B,UAAO,qDAAqD,EAAE,IAAI,EAAE,IAAI,EAAE;IAC3E;EAED,SAAS,OAAa;AACpB,kBAAc;AACd,aAAU,IAAI,WAAW,QAAQ,IAAI;AACrC,aAAU,IAAI,WAAW,UAAU,IAAI,IAAI;;AAG7C,kBAAgB;AACd,SAAK;IACN;AAED,WAAa,EACX,MACD,CAAA;;2DA7GC,mBAAA,SAAa,EACb,mBAWM,OAAA;IAXA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,KAAA,CAAA;aAAY;IAAJ,KAAI;;IAC5B,mBAAiF,OAAA;KAA3E,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA;KAAW,OAAK,eAAA,EAAA,iBAAqB,iBAAA,OAAgB,CAAA;;IACvE,mBAAsC,OAAA,EAAhC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA,EAAA,EAAA,iBAAA,EAAA,EAAA;IAElB,mBAMO,OAAA;KALJ,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;KACb,KAAI;KACH,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;KACV,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAe,CAAA,OAAA,CAAA;KACd,OAAK,eAAE,aAAA,MAAY"}
@@ -14,9 +14,9 @@ declare const __VLS_base: _$vue.DefineComponent<PopConfirmProps, {}, {}, {}, {},
14
14
  onConfirm?: (() => any) | undefined;
15
15
  onCancel?: (() => any) | undefined;
16
16
  }>, {
17
- icon: _$vue.Component;
18
17
  trigger: "hover" | "click";
19
18
  direction: TipDirection;
19
+ icon: _$vue.Component;
20
20
  iconColor: string;
21
21
  confirmText: string;
22
22
  cancelText: string;
@@ -43,7 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
43
43
  });
44
44
  /** 描边 */
45
45
  const stroke = computed(() => {
46
- return `var(--color-${type.value})`;
46
+ return `var(--u-color-${type.value})`;
47
47
  });
48
48
  const c = 2 * Math.PI * r;
49
49
  const offset = c / 4;
@@ -1 +1 @@
1
- {"version":3,"file":"progress.js","names":[],"sources":["../../../src/components/progress/progress.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <!-- 条形进度条 -->\n <div :class=\"cls.e('bar-wrap')\" v-if=\"!circle\">\n <div :class=\"cls.e('bar')\" :style=\"{ width: percentage + '%' }\">\n <slot v-bind=\"{ percentage, type }\">{{ percentage }}%</slot>\n </div>\n </div>\n\n <!-- 环形进度条 -->\n <div\n v-else\n :class=\"cls.e('circle')\"\n :style=\"{ height: withUnit(size, 'px'), width: withUnit(size, 'px') }\"\n >\n <svg viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" :r=\"r\" fill=\"none\" stroke=\"#f5f8fa\" stroke-width=\"8\" />\n <circle\n :class=\"cls.e('circle-ring')\"\n cx=\"50\"\n cy=\"50\"\n :r=\"r\"\n fill=\"none\"\n :stroke=\"stroke\"\n stroke-width=\"8\"\n :stroke-dasharray=\"dashArray\"\n :stroke-dashoffset=\"offset\"\n :stroke-linecap=\"percentage === 0 ? undefined : 'round'\"\n />\n </svg>\n\n <div :class=\"cls.e('circle-content')\">\n <slot v-bind=\"{ percentage, type }\"> {{ percentage }}% </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n } from '@cat-kit/core'\nimport { bem, withUnit } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { ProgressProps, ColorType } from '../../types'\n\ndefineOptions({\n name: 'Progress'\n})\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n type: 'primary',\n circle: false\n})\n\ndefineSlots<{\n default: (props: {\n /** 进度百分比 */\n percentage: number\n /** 样式类型 */\n type: ColorType\n }) => any\n}>()\n\nconst cls = bem('progress')\n\nconst percentage = computed(() => {\n return n(props.percentage ?? 0).range(0, 100)\n})\n\nconst type = computed<ColorType>(() => {\n const { type } = props\n return typeof type === 'function' ? type(percentage.value) : type\n})\n\nconst className = computed(() => {\n return [cls.b, bem.is('circle', props.circle), cls.m(type.value)]\n})\n\n/** 描边 */\nconst stroke = computed(() => {\n return `var(--color-${type.value})`\n})\n\nconst r = 44\nconst c = 2 * Math.PI * r\nconst offset = c / 4\n\n/** 圆周 */\nconst dashArray = computed(() => {\n const dashLen = (c * percentage.value) / 100\n return `${dashLen}, ${c - dashLen}`\n})\n</script>\n"],"mappings":";;;;;;;;;;AAmFA,MAAM,IAAI;;;;;;;;;;;;;;;;;EAlCV,MAAM,QAAQ;EAcd,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,aAAa,eAAe;AAChC,UAAO,EAAE,MAAM,cAAc,EAAE,CAAC,MAAM,GAAG,IAAG;IAC7C;EAED,MAAM,OAAO,eAA0B;GACrC,MAAM,EAAE,SAAS;AACjB,UAAO,OAAO,SAAS,aAAa,KAAK,WAAW,MAAM,GAAG;IAC9D;EAED,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,GAAG,UAAU,MAAM,OAAO;IAAE,IAAI,EAAE,KAAK,MAAM;IAAA;IACjE;;EAGD,MAAM,SAAS,eAAe;AAC5B,UAAO,eAAe,KAAK,MAAM;IAClC;EAGD,MAAM,IAAI,IAAI,KAAK,KAAK;EACxB,MAAM,SAAS,IAAI;;EAGnB,MAAM,YAAY,eAAe;GAC/B,MAAM,UAAW,IAAI,WAAW,QAAS;AACzC,UAAO,GAAG,QAAQ,IAAI,IAAI;IAC3B;;uBA1FC,mBAkCM,OAAA,EAlCA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA,CACpB,mBAAA,UAAc,EAAA,CACyB,QAAA,UAAA,WAAA,EAAvC,mBAIM,OAAA;;IAJA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;OAChB,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,MAAA,CAAA;IAAU,OAAK,eAAA,EAAA,OAAW,WAAA,QAAU,KAAA,CAAA;OACpD,WAA4D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA5C,WAAA;IAAU,MAAE,KAAA;IAAI,CAAA,CAAA,QAA4B,CAAA,gBAAA,gBAArB,WAAA,MAAU,GAAG,KAAC,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,KAAA,WAAA,EAKzD,mBAwBM,UAAA,EAAA,KAAA,GAAA,EAAA,CAzBN,mBAAA,UAAc,EACd,mBAwBM,OAAA;IAtBH,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;IACZ,OAAK,eAAA;KAAA,QAAY,MAAA,SAAQ,CAAC,QAAA,MAAI,KAAA;KAAA,OAAgB,MAAA,SAAQ,CAAC,QAAA,MAAI,KAAA;KAAA,CAAA;qBAE5D,mBAcM,OAdN,YAcM,CAbJ,mBAA+E,UAAA;IAAvE,IAAG;IAAK,IAAG;IAAS;IAAG,MAAK;IAAO,QAAO;IAAU,gBAAa;OACzE,mBAWE,UAAA;IAVC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;IACb,IAAG;IACH,IAAG;IACC;IACJ,MAAK;IACJ,QAAQ,OAAA;IACT,gBAAa;IACZ,oBAAkB,UAAA;IAClB,qBAAmB;IACnB,kBAAgB,WAAA,UAAU,IAAS,KAAA,IAAS;gCAIjD,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,iBAAA,CAAA,EAAA,EAAA,CAChB,WAA8D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA9C,WAAA;IAAU,MAAE,KAAA;IAAI,CAAA,CAAA,QAA8B,CAAA,gBAAA,gBAAtB,WAAA,MAAU,GAAG,MAAE,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,EAAA"}
1
+ {"version":3,"file":"progress.js","names":[],"sources":["../../../src/components/progress/progress.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <!-- 条形进度条 -->\n <div :class=\"cls.e('bar-wrap')\" v-if=\"!circle\">\n <div :class=\"cls.e('bar')\" :style=\"{ width: percentage + '%' }\">\n <slot v-bind=\"{ percentage, type }\">{{ percentage }}%</slot>\n </div>\n </div>\n\n <!-- 环形进度条 -->\n <div\n v-else\n :class=\"cls.e('circle')\"\n :style=\"{ height: withUnit(size, 'px'), width: withUnit(size, 'px') }\"\n >\n <svg viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" :r=\"r\" fill=\"none\" stroke=\"#f5f8fa\" stroke-width=\"8\" />\n <circle\n :class=\"cls.e('circle-ring')\"\n cx=\"50\"\n cy=\"50\"\n :r=\"r\"\n fill=\"none\"\n :stroke=\"stroke\"\n stroke-width=\"8\"\n :stroke-dasharray=\"dashArray\"\n :stroke-dashoffset=\"offset\"\n :stroke-linecap=\"percentage === 0 ? undefined : 'round'\"\n />\n </svg>\n\n <div :class=\"cls.e('circle-content')\">\n <slot v-bind=\"{ percentage, type }\"> {{ percentage }}% </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n } from '@cat-kit/core'\nimport { bem, withUnit } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { ProgressProps, ColorType } from '../../types'\n\ndefineOptions({\n name: 'Progress'\n})\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n type: 'primary',\n circle: false\n})\n\ndefineSlots<{\n default: (props: {\n /** 进度百分比 */\n percentage: number\n /** 样式类型 */\n type: ColorType\n }) => any\n}>()\n\nconst cls = bem('progress')\n\nconst percentage = computed(() => {\n return n(props.percentage ?? 0).range(0, 100)\n})\n\nconst type = computed<ColorType>(() => {\n const { type } = props\n return typeof type === 'function' ? type(percentage.value) : type\n})\n\nconst className = computed(() => {\n return [cls.b, bem.is('circle', props.circle), cls.m(type.value)]\n})\n\n/** 描边 */\nconst stroke = computed(() => {\n return `var(--u-color-${type.value})`\n})\n\nconst r = 44\nconst c = 2 * Math.PI * r\nconst offset = c / 4\n\n/** 圆周 */\nconst dashArray = computed(() => {\n const dashLen = (c * percentage.value) / 100\n return `${dashLen}, ${c - dashLen}`\n})\n</script>\n"],"mappings":";;;;;;;;;;AAmFA,MAAM,IAAI;;;;;;;;;;;;;;;;;EAlCV,MAAM,QAAQ;EAcd,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,aAAa,eAAe;AAChC,UAAO,EAAE,MAAM,cAAc,EAAE,CAAC,MAAM,GAAG,IAAG;IAC7C;EAED,MAAM,OAAO,eAA0B;GACrC,MAAM,EAAE,SAAS;AACjB,UAAO,OAAO,SAAS,aAAa,KAAK,WAAW,MAAM,GAAG;IAC9D;EAED,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,GAAG,UAAU,MAAM,OAAO;IAAE,IAAI,EAAE,KAAK,MAAM;IAAA;IACjE;;EAGD,MAAM,SAAS,eAAe;AAC5B,UAAO,iBAAiB,KAAK,MAAM;IACpC;EAGD,MAAM,IAAI,IAAI,KAAK,KAAK;EACxB,MAAM,SAAS,IAAI;;EAGnB,MAAM,YAAY,eAAe;GAC/B,MAAM,UAAW,IAAI,WAAW,QAAS;AACzC,UAAO,GAAG,QAAQ,IAAI,IAAI;IAC3B;;uBA1FC,mBAkCM,OAAA,EAlCA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA,CACpB,mBAAA,UAAc,EAAA,CACyB,QAAA,UAAA,WAAA,EAAvC,mBAIM,OAAA;;IAJA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;OAChB,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,MAAA,CAAA;IAAU,OAAK,eAAA,EAAA,OAAW,WAAA,QAAU,KAAA,CAAA;OACpD,WAA4D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA5C,WAAA;IAAU,MAAE,KAAA;IAAI,CAAA,CAAA,QAA4B,CAAA,gBAAA,gBAArB,WAAA,MAAU,GAAG,KAAC,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,KAAA,WAAA,EAKzD,mBAwBM,UAAA,EAAA,KAAA,GAAA,EAAA,CAzBN,mBAAA,UAAc,EACd,mBAwBM,OAAA;IAtBH,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;IACZ,OAAK,eAAA;KAAA,QAAY,MAAA,SAAQ,CAAC,QAAA,MAAI,KAAA;KAAA,OAAgB,MAAA,SAAQ,CAAC,QAAA,MAAI,KAAA;KAAA,CAAA;qBAE5D,mBAcM,OAdN,YAcM,CAbJ,mBAA+E,UAAA;IAAvE,IAAG;IAAK,IAAG;IAAS;IAAG,MAAK;IAAO,QAAO;IAAU,gBAAa;OACzE,mBAWE,UAAA;IAVC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;IACb,IAAG;IACH,IAAG;IACC;IACJ,MAAK;IACJ,QAAQ,OAAA;IACT,gBAAa;IACZ,oBAAkB,UAAA;IAClB,qBAAmB;IACnB,kBAAgB,WAAA,UAAU,IAAS,KAAA,IAAS;gCAIjD,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,iBAAA,CAAA,EAAA,EAAA,CAChB,WAA8D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA9C,WAAA;IAAU,MAAE,KAAA;IAAI,CAAA,CAAA,QAA8B,CAAA,gBAAA,gBAAtB,WAAA,MAAU,GAAG,MAAE,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,EAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"progress-nodes.js","names":[],"sources":["../../../src/components/progress-nodes/progress-nodes.vue"],"sourcesContent":["<template>\n <div ref=\"container\" :class=\"className\" :style=\"containerStyle\" @scroll=\"checkScroll\">\n <ul :class=\"cls.e('list')\">\n <li\n v-for=\"(node, index) in nodes\"\n :key=\"node.key ?? index\"\n :class=\"[\n cls.e('item'),\n bem.is('checked', isChecked(node, index)),\n bem.is('active', isActive(node))\n ]\"\n @click=\"handleClick(node, index)\"\n >\n <div :class=\"cls.e('node')\">\n <!-- 虚线连接 -->\n <div v-if=\"index !== nodes.length - 1\" :class=\"cls.e('link')\"></div>\n\n <!-- 节点圆点 -->\n <span :class=\"cls.e('dot')\">\n <slot name=\"icon\" :node=\"node\" :index=\"index\" />\n </span>\n </div>\n\n <div :class=\"cls.e('label')\">\n <slot :node=\"node\" :index=\"index\">\n {{ getLabel(node) }}\n </slot>\n </div>\n </li>\n </ul>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useDrag, useResizeObserver } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef, toRefs, useTemplateRef, watch, nextTick } from 'vue'\n\nimport type { ProgressNodesProps, ProgressNodesEmits } from '../../types'\n\ndefineOptions({\n name: 'ProgressNodes'\n})\n\nconst props = withDefaults(defineProps<ProgressNodesProps>(), {\n colorType: 'primary',\n labelKey: 'label',\n valueKey: 'value'\n})\n\nconst emit = defineEmits<ProgressNodesEmits>()\n\nconst { nodes } = toRefs(props)\n\nconst cls = bem('progress-nodes')\nconst containerRef = useTemplateRef('container')\nconst isDragging = shallowRef(false)\nconst isScrollable = shallowRef(false)\nconst showMaskStart = shallowRef(false)\nconst showMaskEnd = shallowRef(false)\n\nconst className = computed(() => [\n cls.b,\n cls.m(props.colorType),\n bem.is('scrollable', isScrollable.value),\n bem.is('dragging', isDragging.value),\n bem.is('mask-start', showMaskStart.value),\n bem.is('mask-end', showMaskEnd.value)\n])\n\nconst containerStyle = computed(() => {\n const style: Record<string, string> = {}\n const maxWidth = toCssSize(props.maxWidth)\n if (maxWidth) style.maxWidth = maxWidth\n return style\n})\n\nlet startScrollLeft = 0\n\nuseDrag({\n target: containerRef,\n onDragStart() {\n if (!isScrollable.value) return\n const container = containerRef.value\n if (!container) return\n isDragging.value = true\n startScrollLeft = container.scrollLeft\n },\n onDrag({ x }) {\n if (!isScrollable.value) return\n const container = containerRef.value\n if (!container) return\n container.scrollLeft = startScrollLeft - x\n },\n onDragEnd() {\n isDragging.value = false\n }\n})\n\nuseResizeObserver({\n targets: containerRef,\n onResize: checkScroll\n})\n\nwatch(\n nodes,\n () => {\n nextTick(checkScroll)\n },\n { deep: true }\n)\n\nfunction checkScroll() {\n const container = containerRef.value\n if (!container) return\n\n const { scrollLeft, scrollWidth, clientWidth } = container\n isScrollable.value = scrollWidth > clientWidth + 1\n showMaskStart.value = scrollLeft > 0\n showMaskEnd.value = scrollLeft + clientWidth < scrollWidth - 1\n}\n\nfunction isChecked(node: Record<string, any>, index: number) {\n return props.check?.(node, index) ?? false\n}\n\nfunction isActive(node: Record<string, any>) {\n const value = o(node).get(props.valueKey)\n return props.modelValue === value\n}\n\nfunction getLabel(node: Record<string, any>) {\n return o(node).get(props.labelKey)\n}\n\nfunction handleClick(node: Record<string, any>, index: number) {\n const value = o(node).get(props.valueKey)\n emit('update:modelValue', value)\n emit('click', node, index)\n}\n\nfunction toCssSize(value?: number | string) {\n if (value === undefined) return undefined\n return typeof value === 'number' ? `${value}px` : value\n}\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"progress-nodes.js","names":[],"sources":["../../../src/components/progress-nodes/progress-nodes.vue"],"sourcesContent":["<template>\n <div ref=\"container\" :class=\"className\" :style=\"containerStyle\" @scroll=\"checkScroll\">\n <ul :class=\"cls.e('list')\">\n <li\n v-for=\"(node, index) in nodes\"\n :key=\"node.key ?? index\"\n :class=\"[\n cls.e('item'),\n bem.is('checked', isChecked(node, index)),\n bem.is('active', isActive(node))\n ]\"\n @click=\"handleClick(node, index)\"\n >\n <div :class=\"cls.e('node')\">\n <!-- 虚线连接 -->\n <div v-if=\"index !== nodes.length - 1\" :class=\"cls.e('link')\"></div>\n\n <!-- 节点圆点 -->\n <span :class=\"cls.e('dot')\">\n <slot name=\"icon\" :node=\"node\" :index=\"index\" />\n </span>\n </div>\n\n <div :class=\"cls.e('label')\">\n <slot :node=\"node\" :index=\"index\">\n {{ getLabel(node) }}\n </slot>\n </div>\n </li>\n </ul>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useDrag, useResizeObserver } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef, toRefs, useTemplateRef, watch, nextTick } from 'vue'\n\nimport type { ProgressNodesProps, ProgressNodesEmits } from '../../types'\n\ndefineOptions({\n name: 'ProgressNodes'\n})\n\nconst props = withDefaults(defineProps<ProgressNodesProps>(), {\n colorType: 'primary',\n labelKey: 'label',\n valueKey: 'value'\n})\n\nconst emit = defineEmits<ProgressNodesEmits>()\n\nconst { nodes } = toRefs(props)\n\nconst cls = bem('progress-nodes')\nconst containerRef = useTemplateRef('container')\nconst isDragging = shallowRef(false)\nconst isScrollable = shallowRef(false)\nconst showMaskStart = shallowRef(false)\nconst showMaskEnd = shallowRef(false)\n\nconst className = computed(() => [\n cls.b,\n cls.m(props.colorType),\n bem.is('scrollable', isScrollable.value),\n bem.is('dragging', isDragging.value),\n bem.is('mask-start', showMaskStart.value),\n bem.is('mask-end', showMaskEnd.value)\n])\n\nconst containerStyle = computed(() => {\n const style: Record<string, string> = {}\n const maxWidth = toCssSize(props.maxWidth)\n if (maxWidth) style.maxWidth = maxWidth\n return style\n})\n\nlet startScrollLeft = 0\n\nuseDrag({\n target: containerRef,\n onDragStart() {\n if (!isScrollable.value) return\n const container = containerRef.value\n if (!container) return\n isDragging.value = true\n startScrollLeft = container.scrollLeft\n },\n onDrag({ x }) {\n if (!isScrollable.value) return\n const container = containerRef.value\n if (!container) return\n container.scrollLeft = startScrollLeft - x\n },\n onDragEnd() {\n isDragging.value = false\n }\n})\n\nuseResizeObserver({\n targets: containerRef,\n onResize: checkScroll\n})\n\nwatch(\n nodes,\n () => {\n nextTick(checkScroll)\n },\n { deep: true }\n)\n\nfunction checkScroll() {\n const container = containerRef.value\n if (!container) return\n\n const { scrollLeft, scrollWidth, clientWidth } = container\n isScrollable.value = scrollWidth > clientWidth + 1\n showMaskStart.value = scrollLeft > 0\n showMaskEnd.value = scrollLeft + clientWidth < scrollWidth - 1\n}\n\nfunction isChecked(node: Record<string, any>, index: number) {\n return props.check?.(node, index) ?? false\n}\n\nfunction isActive(node: Record<string, any>) {\n const value = o(node).get(props.valueKey)\n return props.modelValue === value\n}\n\nfunction getLabel(node: Record<string, any>) {\n return o(node).get(props.labelKey)\n}\n\nfunction handleClick(node: Record<string, any>, index: number) {\n const value = o(node).get(props.valueKey)\n emit('update:modelValue', value)\n emit('click', node, index)\n}\n\nfunction toCssSize(value?: number | string) {\n if (value === undefined) return undefined\n return typeof value === 'number' ? `${value}px` : value\n}\n</script>\n"],"mappings":"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"}
@@ -16,15 +16,15 @@ type __VLS_Slots = {} & {
16
16
  default?: (props: typeof __VLS_3) => any;
17
17
  };
18
18
  declare const __VLS_base: _$vue.DefineComponent<ProgressNodesProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
19
- click: (node: Record<string, any>, index: number) => any;
20
19
  "update:modelValue": (value: string | number) => any;
20
+ click: (node: Record<string, any>, index: number) => any;
21
21
  }, string, _$vue.PublicProps, Readonly<ProgressNodesProps> & Readonly<{
22
- onClick?: ((node: Record<string, any>, index: number) => any) | undefined;
23
22
  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
23
+ onClick?: ((node: Record<string, any>, index: number) => any) | undefined;
24
24
  }>, {
25
- colorType: _$_veltra_utils0.ColorType;
26
25
  labelKey: string;
27
26
  valueKey: string;
27
+ colorType: _$_veltra_utils0.ColorType;
28
28
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
29
29
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
30
30
  declare const _default: typeof __VLS_export;
@@ -16,10 +16,10 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
16
16
  "onUpdate:modelValue"?: ((value: any) => any) | undefined;
17
17
  onChange?: ((item: Record<string, any>) => any) | undefined;
18
18
  }>, {
19
- disabled: boolean;
20
- readonly: boolean;
21
19
  labelKey: string;
22
20
  valueKey: string;
21
+ disabled: boolean;
22
+ readonly: boolean;
23
23
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
24
24
  declare const _default: typeof __VLS_export;
25
25
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <toolbar\n v-if=\"!isReadonly && toolbarItems.length > 0\"\n :editor=\"editor\"\n :toolbar=\"toolbarItems\"\n :disabled=\"isDisabled\"\n />\n <div :class=\"cls.e('content')\">\n <div\n ref=\"editorContainer\"\n :class=\"cls.e('editable')\"\n :contenteditable=\"!isDisabled && !isReadonly\"\n ></div>\n <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n {{ placeholder }}\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n paragraph: 'u-rte-paragraph',\n heading: {\n h1: 'u-rte-h1',\n h2: 'u-rte-h2',\n h3: 'u-rte-h3',\n h4: 'u-rte-h4',\n h5: 'u-rte-h5',\n h6: 'u-rte-h6'\n },\n text: {\n bold: 'u-rte-bold',\n italic: 'u-rte-italic',\n underline: 'u-rte-underline',\n strikethrough: 'u-rte-strikethrough'\n },\n list: {\n ul: 'u-rte-ul',\n ol: 'u-rte-ol',\n listitem: 'u-rte-li',\n nested: { listitem: 'u-rte-li--nested' }\n },\n quote: 'u-rte-blockquote',\n\n link: 'u-rte-link',\n image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n 'undo',\n 'redo',\n '|',\n 'heading',\n '|',\n 'bold',\n 'italic',\n 'underline',\n 'strikethrough',\n '|',\n 'bullet-list',\n 'ordered-list',\n '|',\n 'blockquote',\n '|',\n 'link'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { RichTextEditorProps } from '../../types'\nimport Toolbar from './toolbar.vue'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n disabled: undefined,\n readonly: undefined,\n format: 'html',\n toolbar: () => DEFAULT_TOOLBAR,\n placeholder: ''\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', isDisabled.value),\n bem.is('readonly', isReadonly.value)\n ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n return props.toolbar ?? DEFAULT_TOOLBAR\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nfunction initEditor() {\n if (!editorContainer.value) return\n\n const editorInstance = createEditor({\n namespace: 'URichTextEditor',\n theme: LEXICAL_THEME,\n nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],\n editable: !isDisabled.value && !isReadonly.value,\n onError: (error: Error) => {\n console.error('Lexical error:', error)\n }\n })\n\n editorInstance.setRootElement(editorContainer.value)\n\n // Register plugins\n cleanupFns.push(registerRichText(editorInstance))\n cleanupFns.push(registerList(editorInstance))\n cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n // Set initial value\n if (model.value) {\n setEditorContent(editorInstance, model.value)\n }\n\n // Listen for content changes\n cleanupFns.push(\n editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const root = $getRoot()\n const textContent = root.getTextContent()\n showPlaceholder.value = textContent.trim().length === 0\n\n if (isComposing) return\n\n let value: string\n if (props.format === 'json') {\n value = JSON.stringify(editorState.toJSON())\n } else {\n value = $generateHtmlFromNodes(editorInstance)\n }\n\n // Avoid circular updates: only emit if content really changed\n if (value !== model.value) {\n isComposing = true\n model.value = value\n // Use microtask to reset after Vue processes the update\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n })\n )\n\n // Composing event listeners for IME\n const rootElement = editorInstance.getRootElement()\n if (rootElement) {\n const onCompositionStart = () => {\n isComposing = true\n }\n const onCompositionEnd = () => {\n isComposing = false\n }\n rootElement.addEventListener('compositionstart', onCompositionStart)\n rootElement.addEventListener('compositionend', onCompositionEnd)\n cleanupFns.push(() => {\n rootElement.removeEventListener('compositionstart', onCompositionStart)\n rootElement.removeEventListener('compositionend', onCompositionEnd)\n })\n }\n\n editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n editorInstance.update(() => {\n const root = $getRoot()\n root.clear()\n\n if (props.format === 'json') {\n try {\n const parsedState = editorInstance.parseEditorState(value)\n editorInstance.setEditorState(parsedState)\n } catch {\n // If JSON parse fails, treat as empty\n root.append($createParagraphNode())\n }\n } else {\n // HTML format\n const parser = new DOMParser()\n const dom = parser.parseFromString(value, 'text/html')\n const nodes = $generateNodesFromDOM(editorInstance, dom)\n root.append(...nodes)\n }\n })\n}\n\n// Watch external model changes\nwatch(model, (newVal) => {\n if (!editor.value || isComposing) return\n\n const editorInstance = editor.value\n\n // Compare current content to avoid circular updates\n editorInstance.getEditorState().read(() => {\n let currentValue: string\n if (props.format === 'json') {\n currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())\n } else {\n currentValue = $generateHtmlFromNodes(editorInstance)\n }\n\n if (currentValue !== newVal) {\n isComposing = true\n setEditorContent(editorInstance, newVal ?? '')\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n if (editor.value) {\n editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n }\n})\n\nonMounted(() => {\n initEditor()\n})\n\nonBeforeUnmount(() => {\n cleanupFns.forEach((fn) => fn())\n cleanupFns = []\n editor.value = null\n})\n</script>\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB;CACpB,WAAW;CACX,SAAS;EACP,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACD,MAAM;EACJ,MAAM;EACN,QAAQ;EACR,WAAW;EACX,eAAe;EAChB;CACD,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,UAAU;EACV,QAAQ,EAAE,UAAU,oBAAmB;EACxC;CACD,OAAO;CAEP,MAAM;CACN,OAAO;CACT;AAEA,MAAM,kBAAiC;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ;EAQd,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,MAAM,IAAI,mBAAkB;EAElC,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,aAAa,eAAe,CAAC,CAAC,SAAS,MAAK;EAClD,MAAM,aAAa,eAAe,CAAC,CAAC,SAAS,MAAK;EAElD,MAAM,YAAY,eAAyB;AACzC,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,IAAI,GAAG,YAAY,WAAW,MAAM;IACpC,IAAI,GAAG,YAAY,WAAW,MAAK;IACrC;IACD;EAED,MAAM,eAAe,eAA8B;AACjD,UAAO,MAAM,WAAW;IACzB;EAED,MAAM,kBAAkB,eAAe,kBAAiB;EACxD,MAAM,SAAS,WAAiC,KAAI;EACpD,MAAM,kBAAkB,IAAI,KAAI;EAChC,IAAI,cAAc;EAClB,IAAI,aAA6B,EAAC;EAElC,SAAS,aAAa;AACpB,OAAI,CAAC,gBAAgB,MAAO;GAE5B,MAAM,iBAAiB,aAAa;IAClC,WAAW;IACX,OAAO;IACP,OAAO;KAAC;KAAa;KAAW;KAAU;KAAc;KAAU;KAAa;IAC/E,UAAU,CAAC,WAAW,SAAS,CAAC,WAAW;IAC3C,UAAU,UAAiB;AACzB,aAAQ,MAAM,kBAAkB,MAAK;;IAExC,CAAA;AAED,kBAAe,eAAe,gBAAgB,MAAK;AAGnD,cAAW,KAAK,iBAAiB,eAAe,CAAA;AAChD,cAAW,KAAK,aAAa,eAAe,CAAA;AAC5C,cAAW,KAAK,gBAAgB,gBAAgB,yBAAyB,EAAE,IAAI,CAAA;AAG/E,OAAI,MAAM,MACR,kBAAiB,gBAAgB,MAAM,MAAK;AAI9C,cAAW,KACT,eAAe,wBAAwB,EAAE,kBAAkB;AACzD,gBAAY,WAAW;AAGrB,qBAAgB,QAFH,UAAS,CACG,gBAAe,CACJ,MAAM,CAAC,WAAW;AAEtD,SAAI,YAAa;KAEjB,IAAI;AACJ,SAAI,MAAM,WAAW,OACnB,SAAQ,KAAK,UAAU,YAAY,QAAQ,CAAA;SAE3C,SAAQ,uBAAuB,eAAc;AAI/C,SAAI,UAAU,MAAM,OAAO;AACzB,oBAAc;AACd,YAAM,QAAQ;AAEd,2BAAqB;AACnB,qBAAc;QACf;;MAEJ;KACF,CACH;GAGA,MAAM,cAAc,eAAe,gBAAe;AAClD,OAAI,aAAa;IACf,MAAM,2BAA2B;AAC/B,mBAAc;;IAEhB,MAAM,yBAAyB;AAC7B,mBAAc;;AAEhB,gBAAY,iBAAiB,oBAAoB,mBAAkB;AACnE,gBAAY,iBAAiB,kBAAkB,iBAAgB;AAC/D,eAAW,WAAW;AACpB,iBAAY,oBAAoB,oBAAoB,mBAAkB;AACtE,iBAAY,oBAAoB,kBAAkB,iBAAgB;MACnE;;AAGH,UAAO,QAAQ;;EAGjB,SAAS,iBAAiB,gBAA+B,OAAe;AACtE,kBAAe,aAAa;IAC1B,MAAM,OAAO,UAAS;AACtB,SAAK,OAAM;AAEX,QAAI,MAAM,WAAW,OACnB,KAAI;KACF,MAAM,cAAc,eAAe,iBAAiB,MAAK;AACzD,oBAAe,eAAe,YAAW;YACnC;AAEN,UAAK,OAAO,sBAAsB,CAAA;;SAE/B;KAIL,MAAM,QAAQ,sBAAsB,gBAFrB,IAAI,WAAU,CACV,gBAAgB,OAAO,YAAW,CACE;AACvD,UAAK,OAAO,GAAG,MAAK;;KAEvB;;AAIH,QAAM,QAAQ,WAAW;AACvB,OAAI,CAAC,OAAO,SAAS,YAAa;GAElC,MAAM,iBAAiB,OAAO;AAG9B,kBAAe,gBAAgB,CAAC,WAAW;IACzC,IAAI;AACJ,QAAI,MAAM,WAAW,OACnB,gBAAe,KAAK,UAAU,eAAe,gBAAgB,CAAC,QAAQ,CAAA;QAEtE,gBAAe,uBAAuB,eAAc;AAGtD,QAAI,iBAAiB,QAAQ;AAC3B,mBAAc;AACd,sBAAiB,gBAAgB,UAAU,GAAE;AAC7C,0BAAqB;AACnB,oBAAc;OACf;;KAEJ;IACF;AAGD,QAAM,CAAC,YAAY,WAAW,QAAQ;AACpC,OAAI,OAAO,MACT,QAAO,MAAM,YAAY,CAAC,WAAW,SAAS,CAAC,WAAW,MAAK;IAElE;AAED,kBAAgB;AACd,eAAW;IACZ;AAED,wBAAsB;AACpB,cAAW,SAAS,OAAO,IAAI,CAAA;AAC/B,gBAAa,EAAC;AACd,UAAO,QAAQ;IAChB;;uBAtQC,mBAiBM,OAAA,EAjBA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA,CAAA,CAEX,WAAA,SAAc,aAAA,MAAa,SAAM,KAAA,WAAA,EAD1C,YAKE,aAAA;;IAHC,QAAQ,OAAA;IACR,SAAS,aAAA;IACT,UAAU,WAAA;;;;;2CAEb,mBASM,OAAA,EATA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,UAAA,CAAA,EAAA,EAAA,CAChB,mBAIO,OAAA;aAHD;IAAJ,KAAI;IACH,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;IACZ,iBAAe,CAAG,WAAA,SAAU,CAAK,WAAA;6BAEzB,gBAAA,SAAA,WAAA,EAAX,mBAEM,OAAA;;IAFuB,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;sBACpC,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}
1
+ {"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n <div :class=\"className\">\n <toolbar\n v-if=\"!isReadonly && toolbarItems.length > 0\"\n :editor=\"editor\"\n :toolbar=\"toolbarItems\"\n :disabled=\"isDisabled\"\n />\n <div :class=\"cls.e('content')\">\n <div\n ref=\"editorContainer\"\n :class=\"cls.e('editable')\"\n :contenteditable=\"!isDisabled && !isReadonly\"\n ></div>\n <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n {{ placeholder }}\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n paragraph: 'u-rte-paragraph',\n heading: {\n h1: 'u-rte-h1',\n h2: 'u-rte-h2',\n h3: 'u-rte-h3',\n h4: 'u-rte-h4',\n h5: 'u-rte-h5',\n h6: 'u-rte-h6'\n },\n text: {\n bold: 'u-rte-bold',\n italic: 'u-rte-italic',\n underline: 'u-rte-underline',\n strikethrough: 'u-rte-strikethrough'\n },\n list: {\n ul: 'u-rte-ul',\n ol: 'u-rte-ol',\n listitem: 'u-rte-li',\n nested: { listitem: 'u-rte-li--nested' }\n },\n quote: 'u-rte-blockquote',\n\n link: 'u-rte-link',\n image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n 'undo',\n 'redo',\n '|',\n 'heading',\n '|',\n 'bold',\n 'italic',\n 'underline',\n 'strikethrough',\n '|',\n 'bullet-list',\n 'ordered-list',\n '|',\n 'blockquote',\n '|',\n 'link'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { createEditor, $getRoot, $createParagraphNode, type LexicalEditor } from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { RichTextEditorProps } from '../../types'\nimport Toolbar from './toolbar.vue'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n disabled: undefined,\n readonly: undefined,\n format: 'html',\n toolbar: () => DEFAULT_TOOLBAR,\n placeholder: ''\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n return [\n cls.b,\n cls.m(size.value),\n bem.is('disabled', isDisabled.value),\n bem.is('readonly', isReadonly.value)\n ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n return props.toolbar ?? DEFAULT_TOOLBAR\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nfunction initEditor() {\n if (!editorContainer.value) return\n\n const editorInstance = createEditor({\n namespace: 'URichTextEditor',\n theme: LEXICAL_THEME,\n nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode],\n editable: !isDisabled.value && !isReadonly.value,\n onError: (error: Error) => {\n console.error('Lexical error:', error)\n }\n })\n\n editorInstance.setRootElement(editorContainer.value)\n\n // Register plugins\n cleanupFns.push(registerRichText(editorInstance))\n cleanupFns.push(registerList(editorInstance))\n cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n // Set initial value\n if (model.value) {\n setEditorContent(editorInstance, model.value)\n }\n\n // Listen for content changes\n cleanupFns.push(\n editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const root = $getRoot()\n const textContent = root.getTextContent()\n showPlaceholder.value = textContent.trim().length === 0\n\n if (isComposing) return\n\n let value: string\n if (props.format === 'json') {\n value = JSON.stringify(editorState.toJSON())\n } else {\n value = $generateHtmlFromNodes(editorInstance)\n }\n\n // Avoid circular updates: only emit if content really changed\n if (value !== model.value) {\n isComposing = true\n model.value = value\n // Use microtask to reset after Vue processes the update\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n })\n )\n\n // Composing event listeners for IME\n const rootElement = editorInstance.getRootElement()\n if (rootElement) {\n const onCompositionStart = () => {\n isComposing = true\n }\n const onCompositionEnd = () => {\n isComposing = false\n }\n rootElement.addEventListener('compositionstart', onCompositionStart)\n rootElement.addEventListener('compositionend', onCompositionEnd)\n cleanupFns.push(() => {\n rootElement.removeEventListener('compositionstart', onCompositionStart)\n rootElement.removeEventListener('compositionend', onCompositionEnd)\n })\n }\n\n editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n editorInstance.update(() => {\n const root = $getRoot()\n root.clear()\n\n if (props.format === 'json') {\n try {\n const parsedState = editorInstance.parseEditorState(value)\n editorInstance.setEditorState(parsedState)\n } catch {\n // If JSON parse fails, treat as empty\n root.append($createParagraphNode())\n }\n } else {\n // HTML format\n const parser = new DOMParser()\n const dom = parser.parseFromString(value, 'text/html')\n const nodes = $generateNodesFromDOM(editorInstance, dom)\n root.append(...nodes)\n }\n })\n}\n\n// Watch external model changes\nwatch(model, (newVal) => {\n if (!editor.value || isComposing) return\n\n const editorInstance = editor.value\n\n // Compare current content to avoid circular updates\n editorInstance.getEditorState().read(() => {\n let currentValue: string\n if (props.format === 'json') {\n currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())\n } else {\n currentValue = $generateHtmlFromNodes(editorInstance)\n }\n\n if (currentValue !== newVal) {\n isComposing = true\n setEditorContent(editorInstance, newVal ?? '')\n queueMicrotask(() => {\n isComposing = false\n })\n }\n })\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n if (editor.value) {\n editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n }\n})\n\nonMounted(() => {\n initEditor()\n})\n\nonBeforeUnmount(() => {\n cleanupFns.forEach((fn) => fn())\n cleanupFns = []\n editor.value = null\n})\n</script>\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB;CACpB,WAAW;CACX,SAAS;EACP,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACD,MAAM;EACJ,MAAM;EACN,QAAQ;EACR,WAAW;EACX,eAAe;EAChB;CACD,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,UAAU;EACV,QAAQ,EAAE,UAAU,oBAAmB;EACxC;CACD,OAAO;CAEP,MAAM;CACN,OAAO;CACT;AAEA,MAAM,kBAAiC;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ;EAQd,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,MAAM,IAAI,mBAAkB;EAElC,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,aAAa,eAAe,CAAC,CAAC,SAAS,MAAK;EAClD,MAAM,aAAa,eAAe,CAAC,CAAC,SAAS,MAAK;EAElD,MAAM,YAAY,eAAyB;AACzC,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,IAAI,GAAG,YAAY,WAAW,MAAM;IACpC,IAAI,GAAG,YAAY,WAAW,MAAK;IACrC;IACD;EAED,MAAM,eAAe,eAA8B;AACjD,UAAO,MAAM,WAAW;IACzB;EAED,MAAM,kBAAkB,eAAe,kBAAiB;EACxD,MAAM,SAAS,WAAiC,KAAI;EACpD,MAAM,kBAAkB,IAAI,KAAI;EAChC,IAAI,cAAc;EAClB,IAAI,aAA6B,EAAC;EAElC,SAAS,aAAa;AACpB,OAAI,CAAC,gBAAgB,MAAO;GAE5B,MAAM,iBAAiB,aAAa;IAClC,WAAW;IACX,OAAO;IACP,OAAO;KAAC;KAAa;KAAW;KAAU;KAAc;KAAU;KAAa;IAC/E,UAAU,CAAC,WAAW,SAAS,CAAC,WAAW;IAC3C,UAAU,UAAiB;AACzB,aAAQ,MAAM,kBAAkB,MAAK;;IAExC,CAAA;AAED,kBAAe,eAAe,gBAAgB,MAAK;AAGnD,cAAW,KAAK,iBAAiB,eAAe,CAAA;AAChD,cAAW,KAAK,aAAa,eAAe,CAAA;AAC5C,cAAW,KAAK,gBAAgB,gBAAgB,yBAAyB,EAAE,IAAI,CAAA;AAG/E,OAAI,MAAM,MACR,kBAAiB,gBAAgB,MAAM,MAAK;AAI9C,cAAW,KACT,eAAe,wBAAwB,EAAE,kBAAkB;AACzD,gBAAY,WAAW;AAGrB,qBAAgB,QAFH,UACO,CAAK,gBACD,CAAY,MAAM,CAAC,WAAW;AAEtD,SAAI,YAAa;KAEjB,IAAI;AACJ,SAAI,MAAM,WAAW,OACnB,SAAQ,KAAK,UAAU,YAAY,QAAQ,CAAA;SAE3C,SAAQ,uBAAuB,eAAc;AAI/C,SAAI,UAAU,MAAM,OAAO;AACzB,oBAAc;AACd,YAAM,QAAQ;AAEd,2BAAqB;AACnB,qBAAc;QACf;;MAEJ;KACF,CACH;GAGA,MAAM,cAAc,eAAe,gBAAe;AAClD,OAAI,aAAa;IACf,MAAM,2BAA2B;AAC/B,mBAAc;;IAEhB,MAAM,yBAAyB;AAC7B,mBAAc;;AAEhB,gBAAY,iBAAiB,oBAAoB,mBAAkB;AACnE,gBAAY,iBAAiB,kBAAkB,iBAAgB;AAC/D,eAAW,WAAW;AACpB,iBAAY,oBAAoB,oBAAoB,mBAAkB;AACtE,iBAAY,oBAAoB,kBAAkB,iBAAgB;MACnE;;AAGH,UAAO,QAAQ;;EAGjB,SAAS,iBAAiB,gBAA+B,OAAe;AACtE,kBAAe,aAAa;IAC1B,MAAM,OAAO,UAAS;AACtB,SAAK,OAAM;AAEX,QAAI,MAAM,WAAW,OACnB,KAAI;KACF,MAAM,cAAc,eAAe,iBAAiB,MAAK;AACzD,oBAAe,eAAe,YAAW;YACnC;AAEN,UAAK,OAAO,sBAAsB,CAAA;;SAE/B;KAIL,MAAM,QAAQ,sBAAsB,gBADxB,IADO,WACP,CAAO,gBAAgB,OAAO,YACU,CAAG;AACvD,UAAK,OAAO,GAAG,MAAK;;KAEvB;;AAIH,QAAM,QAAQ,WAAW;AACvB,OAAI,CAAC,OAAO,SAAS,YAAa;GAElC,MAAM,iBAAiB,OAAO;AAG9B,kBAAe,gBAAgB,CAAC,WAAW;IACzC,IAAI;AACJ,QAAI,MAAM,WAAW,OACnB,gBAAe,KAAK,UAAU,eAAe,gBAAgB,CAAC,QAAQ,CAAA;QAEtE,gBAAe,uBAAuB,eAAc;AAGtD,QAAI,iBAAiB,QAAQ;AAC3B,mBAAc;AACd,sBAAiB,gBAAgB,UAAU,GAAE;AAC7C,0BAAqB;AACnB,oBAAc;OACf;;KAEJ;IACF;AAGD,QAAM,CAAC,YAAY,WAAW,QAAQ;AACpC,OAAI,OAAO,MACT,QAAO,MAAM,YAAY,CAAC,WAAW,SAAS,CAAC,WAAW,MAAK;IAElE;AAED,kBAAgB;AACd,eAAW;IACZ;AAED,wBAAsB;AACpB,cAAW,SAAS,OAAO,IAAI,CAAA;AAC/B,gBAAa,EAAC;AACd,UAAO,QAAQ;IAChB;;uBAtQC,mBAiBM,OAAA,EAjBA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA,CAAA,CAEX,WAAA,SAAc,aAAA,MAAa,SAAM,KAAA,WAAA,EAD1C,YAKE,aAAA;;IAHC,QAAQ,OAAA;IACR,SAAS,aAAA;IACT,UAAU,WAAA;;;;;2CAEb,mBASM,OAAA,EATA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,UAAA,CAAA,EAAA,EAAA,CAChB,mBAIO,OAAA;aAHD;IAAJ,KAAI;IACH,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;IACZ,iBAAe,CAAG,WAAA,SAAU,CAAK,WAAA;6BAEzB,gBAAA,SAAA,WAAA,EAAX,mBAEM,OAAA;;IAFuB,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;sBACpC,QAAA,YAAW,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}
@@ -12,10 +12,10 @@ declare const __VLS_export: _$vue.DefineComponent<RichTextEditorProps & {
12
12
  }> & Readonly<{
13
13
  "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
14
14
  }>, {
15
- format: RichTextFormat;
16
15
  disabled: boolean;
17
16
  readonly: boolean;
18
17
  placeholder: string;
18
+ format: RichTextFormat;
19
19
  toolbar: ToolbarItem[];
20
20
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
21
21
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/components/rich-text-editor/toolbar.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('toolbar')\">\n <template v-for=\"(item, index) in toolbar\" :key=\"index\">\n <div v-if=\"item === '|'\" :class=\"cls.e('separator')\"></div>\n\n <div v-else-if=\"item === 'heading'\" :class=\"[cls.e('toolbar-dropdown')]\">\n <select\n :class=\"[cls.e('heading-select'), { 'is-disabled': disabled }]\"\n :value=\"activeHeading\"\n :disabled=\"disabled\"\n @change=\"onHeadingChange\"\n >\n <option value=\"paragraph\">正文</option>\n <option value=\"h1\">Heading 1</option>\n <option value=\"h2\">Heading 2</option>\n <option value=\"h3\">Heading 3</option>\n <option value=\"h4\">Heading 4</option>\n <option value=\"h5\">Heading 5</option>\n <option value=\"h6\">Heading 6</option>\n </select>\n </div>\n\n <button\n v-else\n type=\"button\"\n :class=\"[\n cls.e('toolbar-btn'),\n { 'is-active': isActive(item) },\n { 'is-disabled': disabled }\n ]\"\n :disabled=\"disabled\"\n :title=\"getTitle(item)\"\n @click=\"onToolbarAction(item)\"\n >\n <span :class=\"cls.e('toolbar-icon')\" v-html=\"getIcon(item)\"></span>\n </button>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from '@lexical/list'\nimport { $createHeadingNode, $isHeadingNode, type HeadingTagType } from '@lexical/rich-text'\nimport { $isQuoteNode, $createQuoteNode } from '@lexical/rich-text'\nimport { $setBlocksType } from '@lexical/selection'\nimport { $getNearestNodeOfType } from '@lexical/utils'\nimport { bem } from '@veltra/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n FORMAT_TEXT_COMMAND,\n UNDO_COMMAND,\n REDO_COMMAND,\n type LexicalEditor,\n $createParagraphNode,\n type RangeSelection\n} from 'lexical'\nimport { ref, onBeforeUnmount, watch } from 'vue'\n\nimport type { ToolbarItem } from '../../types'\n\nconst props = defineProps<{\n editor: LexicalEditor | null\n toolbar: ToolbarItem[]\n disabled: boolean\n}>()\n\nconst cls = bem('rich-text-editor')\n\n// Active states\nconst isBold = ref(false)\nconst isItalic = ref(false)\nconst isUnderline = ref(false)\nconst isStrikethrough = ref(false)\nconst isLink = ref(false)\nconst isBulletList = ref(false)\nconst isOrderedList = ref(false)\nconst isBlockquote = ref(false)\nconst activeHeading = ref('paragraph')\n\nlet cleanupListener: (() => void) | null = null\n\nfunction setupListener(editorInstance: LexicalEditor) {\n cleanupListener?.()\n cleanupListener = editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n updateToolbarState(selection)\n })\n })\n}\n\nfunction updateToolbarState(selection: RangeSelection) {\n isBold.value = selection.hasFormat('bold')\n isItalic.value = selection.hasFormat('italic')\n isUnderline.value = selection.hasFormat('underline')\n isStrikethrough.value = selection.hasFormat('strikethrough')\n\n // Check block type\n const anchorNode = selection.anchor.getNode()\n let element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow()\n\n if ($isHeadingNode(element)) {\n activeHeading.value = (element as any).getTag()\n } else {\n activeHeading.value = 'paragraph'\n }\n\n // Check list\n const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n if (parentList) {\n const listType = (parentList as any).getListType()\n isBulletList.value = listType === 'bullet'\n isOrderedList.value = listType === 'number'\n } else {\n isBulletList.value = false\n isOrderedList.value = false\n }\n\n // Check blockquote\n isBlockquote.value = $isQuoteNode(element)\n\n // Check link\n const parent = anchorNode.getParent()\n isLink.value = $isLinkNode(parent)\n}\n\nwatch(\n () => props.editor,\n (editorInstance) => {\n if (editorInstance) {\n setupListener(editorInstance)\n }\n },\n { immediate: true }\n)\n\nfunction isActive(item: ToolbarItem): boolean {\n switch (item) {\n case 'bold':\n return isBold.value\n case 'italic':\n return isItalic.value\n case 'underline':\n return isUnderline.value\n case 'strikethrough':\n return isStrikethrough.value\n case 'bullet-list':\n return isBulletList.value\n case 'ordered-list':\n return isOrderedList.value\n case 'blockquote':\n return isBlockquote.value\n case 'link':\n return isLink.value\n default:\n return false\n }\n}\n\nfunction onToolbarAction(item: ToolbarItem) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n switch (item) {\n case 'bold':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n break\n case 'italic':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n break\n case 'underline':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\n break\n case 'strikethrough':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\n break\n case 'code':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')\n break\n case 'bullet-list':\n editorInstance.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n break\n case 'ordered-list':\n editorInstance.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\n break\n case 'blockquote':\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (isBlockquote.value) {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createQuoteNode())\n }\n }\n })\n break\n case 'link':\n toggleLink(editorInstance)\n break\n case 'undo':\n editorInstance.dispatchCommand(UNDO_COMMAND, undefined)\n break\n case 'redo':\n editorInstance.dispatchCommand(REDO_COMMAND, undefined)\n break\n }\n\n // Keep focus on editor\n editorInstance.focus()\n}\n\nfunction onHeadingChange(event: Event) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n const value = (event.target as HTMLSelectElement).value\n\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (value === 'paragraph') {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createHeadingNode(value as HeadingTagType))\n }\n }\n })\n\n editorInstance.focus()\n}\n\nfunction toggleLink(editorInstance: LexicalEditor) {\n editorInstance.getEditorState().read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n const anchorNode = selection.anchor.getNode()\n const parent = anchorNode.getParent()\n\n if ($isLinkNode(parent)) {\n // Remove link\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n } else {\n // Insert link with prompt\n const url = prompt('请输入链接地址:', 'https://')\n if (url && url !== 'https://') {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n }\n }\n })\n}\n\nfunction getTitle(item: ToolbarItem): string {\n const titles: Record<string, string> = {\n bold: '加粗',\n italic: '斜体',\n underline: '下划线',\n strikethrough: '删除线',\n code: '行内代码',\n 'bullet-list': '无序列表',\n 'ordered-list': '有序列表',\n blockquote: '引用',\n 'code-block': '代码块',\n link: '链接',\n undo: '撤销',\n redo: '重做'\n }\n return titles[item] ?? item\n}\n\nfunction getIcon(item: ToolbarItem): string {\n const icons: Record<string, string> = {\n bold: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/></svg>',\n italic:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/></svg>',\n underline:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3\"/><line x1=\"4\" y1=\"21\" x2=\"20\" y2=\"21\"/></svg>',\n strikethrough:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 4H9a3 3 0 0 0-2.83 4\"/><path d=\"M14 12a4 4 0 0 1 0 8H6\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/></svg>',\n code: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/></svg>',\n 'bullet-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"/></svg>',\n 'ordered-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"10\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"10\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"10\" y1=\"18\" x2=\"21\" y2=\"18\"/><path d=\"M4 6h1v4\"/><path d=\"M4 10h2\"/><path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\"/></svg>',\n blockquote:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z\"/><path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z\"/></svg>',\n 'code-block':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"/><path d=\"m8 10-3 2 3 2\"/><path d=\"m16 10 3 2-3 2\"/><path d=\"m13 7-2 10\"/></svg>',\n link: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/></svg>',\n undo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>',\n redo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\"/></svg>'\n }\n return icons[item] ?? ''\n}\n\nonBeforeUnmount(() => {\n cleanupListener?.()\n cleanupListener = null\n})\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/components/rich-text-editor/toolbar.vue"],"sourcesContent":["<template>\n <div :class=\"cls.e('toolbar')\">\n <template v-for=\"(item, index) in toolbar\" :key=\"index\">\n <div v-if=\"item === '|'\" :class=\"cls.e('separator')\"></div>\n\n <div v-else-if=\"item === 'heading'\" :class=\"[cls.e('toolbar-dropdown')]\">\n <select\n :class=\"[cls.e('heading-select'), { 'is-disabled': disabled }]\"\n :value=\"activeHeading\"\n :disabled=\"disabled\"\n @change=\"onHeadingChange\"\n >\n <option value=\"paragraph\">正文</option>\n <option value=\"h1\">Heading 1</option>\n <option value=\"h2\">Heading 2</option>\n <option value=\"h3\">Heading 3</option>\n <option value=\"h4\">Heading 4</option>\n <option value=\"h5\">Heading 5</option>\n <option value=\"h6\">Heading 6</option>\n </select>\n </div>\n\n <button\n v-else\n type=\"button\"\n :class=\"[\n cls.e('toolbar-btn'),\n { 'is-active': isActive(item) },\n { 'is-disabled': disabled }\n ]\"\n :disabled=\"disabled\"\n :title=\"getTitle(item)\"\n @click=\"onToolbarAction(item)\"\n >\n <span :class=\"cls.e('toolbar-icon')\" v-html=\"getIcon(item)\"></span>\n </button>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from '@lexical/list'\nimport { $createHeadingNode, $isHeadingNode, type HeadingTagType } from '@lexical/rich-text'\nimport { $isQuoteNode, $createQuoteNode } from '@lexical/rich-text'\nimport { $setBlocksType } from '@lexical/selection'\nimport { $getNearestNodeOfType } from '@lexical/utils'\nimport { bem } from '@veltra/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n FORMAT_TEXT_COMMAND,\n UNDO_COMMAND,\n REDO_COMMAND,\n type LexicalEditor,\n $createParagraphNode,\n type RangeSelection\n} from 'lexical'\nimport { ref, onBeforeUnmount, watch } from 'vue'\n\nimport type { ToolbarItem } from '../../types'\n\nconst props = defineProps<{\n editor: LexicalEditor | null\n toolbar: ToolbarItem[]\n disabled: boolean\n}>()\n\nconst cls = bem('rich-text-editor')\n\n// Active states\nconst isBold = ref(false)\nconst isItalic = ref(false)\nconst isUnderline = ref(false)\nconst isStrikethrough = ref(false)\nconst isLink = ref(false)\nconst isBulletList = ref(false)\nconst isOrderedList = ref(false)\nconst isBlockquote = ref(false)\nconst activeHeading = ref('paragraph')\n\nlet cleanupListener: (() => void) | null = null\n\nfunction setupListener(editorInstance: LexicalEditor) {\n cleanupListener?.()\n cleanupListener = editorInstance.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n updateToolbarState(selection)\n })\n })\n}\n\nfunction updateToolbarState(selection: RangeSelection) {\n isBold.value = selection.hasFormat('bold')\n isItalic.value = selection.hasFormat('italic')\n isUnderline.value = selection.hasFormat('underline')\n isStrikethrough.value = selection.hasFormat('strikethrough')\n\n // Check block type\n const anchorNode = selection.anchor.getNode()\n let element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow()\n\n if ($isHeadingNode(element)) {\n activeHeading.value = (element as any).getTag()\n } else {\n activeHeading.value = 'paragraph'\n }\n\n // Check list\n const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n if (parentList) {\n const listType = (parentList as any).getListType()\n isBulletList.value = listType === 'bullet'\n isOrderedList.value = listType === 'number'\n } else {\n isBulletList.value = false\n isOrderedList.value = false\n }\n\n // Check blockquote\n isBlockquote.value = $isQuoteNode(element)\n\n // Check link\n const parent = anchorNode.getParent()\n isLink.value = $isLinkNode(parent)\n}\n\nwatch(\n () => props.editor,\n (editorInstance) => {\n if (editorInstance) {\n setupListener(editorInstance)\n }\n },\n { immediate: true }\n)\n\nfunction isActive(item: ToolbarItem): boolean {\n switch (item) {\n case 'bold':\n return isBold.value\n case 'italic':\n return isItalic.value\n case 'underline':\n return isUnderline.value\n case 'strikethrough':\n return isStrikethrough.value\n case 'bullet-list':\n return isBulletList.value\n case 'ordered-list':\n return isOrderedList.value\n case 'blockquote':\n return isBlockquote.value\n case 'link':\n return isLink.value\n default:\n return false\n }\n}\n\nfunction onToolbarAction(item: ToolbarItem) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n switch (item) {\n case 'bold':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n break\n case 'italic':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n break\n case 'underline':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\n break\n case 'strikethrough':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\n break\n case 'code':\n editorInstance.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')\n break\n case 'bullet-list':\n editorInstance.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n break\n case 'ordered-list':\n editorInstance.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\n break\n case 'blockquote':\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (isBlockquote.value) {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createQuoteNode())\n }\n }\n })\n break\n case 'link':\n toggleLink(editorInstance)\n break\n case 'undo':\n editorInstance.dispatchCommand(UNDO_COMMAND, undefined)\n break\n case 'redo':\n editorInstance.dispatchCommand(REDO_COMMAND, undefined)\n break\n }\n\n // Keep focus on editor\n editorInstance.focus()\n}\n\nfunction onHeadingChange(event: Event) {\n const editorInstance = props.editor\n if (!editorInstance || props.disabled) return\n\n const value = (event.target as HTMLSelectElement).value\n\n editorInstance.update(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n if (value === 'paragraph') {\n $setBlocksType(selection, () => $createParagraphNode())\n } else {\n $setBlocksType(selection, () => $createHeadingNode(value as HeadingTagType))\n }\n }\n })\n\n editorInstance.focus()\n}\n\nfunction toggleLink(editorInstance: LexicalEditor) {\n editorInstance.getEditorState().read(() => {\n const selection = $getSelection()\n if (!$isRangeSelection(selection)) return\n\n const anchorNode = selection.anchor.getNode()\n const parent = anchorNode.getParent()\n\n if ($isLinkNode(parent)) {\n // Remove link\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n } else {\n // Insert link with prompt\n const url = prompt('请输入链接地址:', 'https://')\n if (url && url !== 'https://') {\n editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)\n }\n }\n })\n}\n\nfunction getTitle(item: ToolbarItem): string {\n const titles: Record<string, string> = {\n bold: '加粗',\n italic: '斜体',\n underline: '下划线',\n strikethrough: '删除线',\n code: '行内代码',\n 'bullet-list': '无序列表',\n 'ordered-list': '有序列表',\n blockquote: '引用',\n 'code-block': '代码块',\n link: '链接',\n undo: '撤销',\n redo: '重做'\n }\n return titles[item] ?? item\n}\n\nfunction getIcon(item: ToolbarItem): string {\n const icons: Record<string, string> = {\n bold: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/><path d=\"M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z\"/></svg>',\n italic:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/></svg>',\n underline:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3\"/><line x1=\"4\" y1=\"21\" x2=\"20\" y2=\"21\"/></svg>',\n strikethrough:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 4H9a3 3 0 0 0-2.83 4\"/><path d=\"M14 12a4 4 0 0 1 0 8H6\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/></svg>',\n code: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"/><polyline points=\"8 6 2 12 8 18\"/></svg>',\n 'bullet-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"/></svg>',\n 'ordered-list':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"10\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"10\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"10\" y1=\"18\" x2=\"21\" y2=\"18\"/><path d=\"M4 6h1v4\"/><path d=\"M4 10h2\"/><path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\"/></svg>',\n blockquote:\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z\"/><path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z\"/></svg>',\n 'code-block':\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"/><path d=\"m8 10-3 2 3 2\"/><path d=\"m16 10 3 2-3 2\"/><path d=\"m13 7-2 10\"/></svg>',\n link: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/></svg>',\n undo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>',\n redo: '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\"/></svg>'\n }\n return icons[item] ?? ''\n}\n\nonBeforeUnmount(() => {\n cleanupListener?.()\n cleanupListener = null\n})\n</script>\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"scroll.js","names":[],"sources":["../../../src/components/scroll/scroll.vue"],"sourcesContent":["<template>\n <div :class=\"className\" :style=\"style\" ref=\"scrollRef\">\n <div\n ref=\"containerRef\"\n :class=\"[cls.e('container'), containerClass]\"\n @scroll.passive=\"handleScroll\"\n :style=\"containerStyle\"\n >\n <component\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"[cls.e('content'), contentClass]\"\n :is=\"tag\"\n >\n <slot />\n </component>\n </div>\n\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { type CSSProperties, computed, provide, shallowRef } from 'vue'\n\nimport type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'\nimport { ScrollDIKey } from './di'\nimport UScrollBar from './scroll-bar.vue'\n\ndefineOptions({\n name: 'Scroll'\n})\n\nconst props = withDefaults(defineProps<ScrollProps>(), {\n tag: 'div'\n})\n\nconst emit = defineEmits<ScrollEmits>()\n\ndefineSlots<{\n /** 默认插槽 */\n default(): any\n /** 内容插槽 */\n content(): any\n}>()\n\nconst cls = bem('scroll')\nconst className = computed(() => {\n return [cls.b, bem.is('always', props.always)]\n})\n\n// 样式-------------------------------------------------------------\nconst style = computed<CSSProperties>(() => {\n return {\n height: withUnit(props.height, 'px')\n }\n})\n\n// 模板引用------------------------------------------------\n/** 内容引用 */\nconst contentRef = shallowRef<HTMLElement>()\n/** 滚动根元素引用 */\nconst scrollRef = shallowRef<HTMLElement>()\n/** 容器引用 */\nconst containerRef = shallowRef<HTMLElement>()\nconst barX = shallowRef<InstanceType<typeof UScrollBar>>()\nconst barY = shallowRef<InstanceType<typeof UScrollBar>>()\nconst minSize = 20\n\nconst trackSize = {\n width: 0,\n height: 0\n}\n\nuseResizeObserver({\n targets: [contentRef, scrollRef],\n onResize: (entries) => {\n if (entries.length && scrollRef.value) {\n const { clientHeight, clientWidth } = scrollRef.value\n\n trackSize.width = clientWidth\n trackSize.height = clientHeight\n\n barX.value?.setTrackSize(trackSize.width)\n barY.value?.setTrackSize(trackSize.height)\n updateBar()\n\n emit(\n 'resize',\n entries.map((entry) => entry.target as HTMLElement)\n )\n }\n }\n})\n\n// 更新滚动条\nconst updateBar = () => {\n if (!containerRef.value) return\n\n const {\n scrollHeight,\n clientHeight,\n scrollTop,\n\n scrollWidth,\n clientWidth,\n scrollLeft\n } = containerRef.value\n\n emit('scroll', {\n x: scrollLeft,\n y: scrollTop,\n sw: scrollWidth,\n sh: scrollHeight,\n cw: clientWidth,\n ch: clientHeight\n })\n\n if (scrollHeight !== clientHeight) {\n const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)\n\n const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)\n\n barY.value?.update(barYHeight, barYTop)\n } else {\n barY.value?.update(0, 0)\n }\n\n if (scrollWidth !== clientWidth) {\n const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)\n\n const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)\n\n barX.value?.update(barXWidth, barXLeft)\n } else {\n barX.value?.update(0, 0)\n }\n}\n\n// 滚动条拖拽\nconst handleDragX = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value!\n const { clientWidth, scrollWidth } = container\n\n container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleDragY = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value!\n const { clientHeight, scrollHeight } = container\n container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)\n },\n props.dragDebounce ?? 0,\n false\n)\n\n// 滚动事件\nconst handleScroll = (e) => {\n updateBar()\n}\n\n// 滚动至------------------------------------------------\nconst scrollToLeft = (left: number) => {\n const container = containerRef.value\n if (!container) return\n\n container.scrollTo({\n left\n })\n}\n\nconst scrollToTop = (top: number) => {\n const container = containerRef.value\n if (!container) return\n\n container.scrollTo({\n top\n })\n}\n\nconst scrollTo = (position: ScrollPosition) => {\n if (position.x !== undefined) scrollToLeft(position.x)\n if (position.y !== undefined) scrollToTop(position.y)\n}\n\nprovide(ScrollDIKey, {\n cls\n})\n\nconst exposed: _ScrollExposed = {\n el: scrollRef,\n contentRef,\n containerRef,\n scrollTo,\n update: updateBar\n}\n\ndefineExpose(exposed)\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"scroll.js","names":[],"sources":["../../../src/components/scroll/scroll.vue"],"sourcesContent":["<template>\n <div :class=\"className\" :style=\"style\" ref=\"scrollRef\">\n <div\n ref=\"containerRef\"\n :class=\"[cls.e('container'), containerClass]\"\n @scroll.passive=\"handleScroll\"\n :style=\"containerStyle\"\n >\n <component\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"[cls.e('content'), contentClass]\"\n :is=\"tag\"\n >\n <slot />\n </component>\n </div>\n\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { type CSSProperties, computed, provide, shallowRef } from 'vue'\n\nimport type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'\nimport { ScrollDIKey } from './di'\nimport UScrollBar from './scroll-bar.vue'\n\ndefineOptions({\n name: 'Scroll'\n})\n\nconst props = withDefaults(defineProps<ScrollProps>(), {\n tag: 'div'\n})\n\nconst emit = defineEmits<ScrollEmits>()\n\ndefineSlots<{\n /** 默认插槽 */\n default(): any\n /** 内容插槽 */\n content(): any\n}>()\n\nconst cls = bem('scroll')\nconst className = computed(() => {\n return [cls.b, bem.is('always', props.always)]\n})\n\n// 样式-------------------------------------------------------------\nconst style = computed<CSSProperties>(() => {\n return {\n height: withUnit(props.height, 'px')\n }\n})\n\n// 模板引用------------------------------------------------\n/** 内容引用 */\nconst contentRef = shallowRef<HTMLElement>()\n/** 滚动根元素引用 */\nconst scrollRef = shallowRef<HTMLElement>()\n/** 容器引用 */\nconst containerRef = shallowRef<HTMLElement>()\nconst barX = shallowRef<InstanceType<typeof UScrollBar>>()\nconst barY = shallowRef<InstanceType<typeof UScrollBar>>()\nconst minSize = 20\n\nconst trackSize = {\n width: 0,\n height: 0\n}\n\nuseResizeObserver({\n targets: [contentRef, scrollRef],\n onResize: (entries) => {\n if (entries.length && scrollRef.value) {\n const { clientHeight, clientWidth } = scrollRef.value\n\n trackSize.width = clientWidth\n trackSize.height = clientHeight\n\n barX.value?.setTrackSize(trackSize.width)\n barY.value?.setTrackSize(trackSize.height)\n updateBar()\n\n emit(\n 'resize',\n entries.map((entry) => entry.target as HTMLElement)\n )\n }\n }\n})\n\n// 更新滚动条\nconst updateBar = () => {\n if (!containerRef.value) return\n\n const {\n scrollHeight,\n clientHeight,\n scrollTop,\n\n scrollWidth,\n clientWidth,\n scrollLeft\n } = containerRef.value\n\n emit('scroll', {\n x: scrollLeft,\n y: scrollTop,\n sw: scrollWidth,\n sh: scrollHeight,\n cw: clientWidth,\n ch: clientHeight\n })\n\n if (scrollHeight !== clientHeight) {\n const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)\n\n const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)\n\n barY.value?.update(barYHeight, barYTop)\n } else {\n barY.value?.update(0, 0)\n }\n\n if (scrollWidth !== clientWidth) {\n const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)\n\n const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)\n\n barX.value?.update(barXWidth, barXLeft)\n } else {\n barX.value?.update(0, 0)\n }\n}\n\n// 滚动条拖拽\nconst handleDragX = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value!\n const { clientWidth, scrollWidth } = container\n\n container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleDragY = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value!\n const { clientHeight, scrollHeight } = container\n container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)\n },\n props.dragDebounce ?? 0,\n false\n)\n\n// 滚动事件\nconst handleScroll = (e) => {\n updateBar()\n}\n\n// 滚动至------------------------------------------------\nconst scrollToLeft = (left: number) => {\n const container = containerRef.value\n if (!container) return\n\n container.scrollTo({\n left\n })\n}\n\nconst scrollToTop = (top: number) => {\n const container = containerRef.value\n if (!container) return\n\n container.scrollTo({\n top\n })\n}\n\nconst scrollTo = (position: ScrollPosition) => {\n if (position.x !== undefined) scrollToLeft(position.x)\n if (position.y !== undefined) scrollToTop(position.y)\n}\n\nprovide(ScrollDIKey, {\n cls\n})\n\nconst exposed: _ScrollExposed = {\n el: scrollRef,\n contentRef,\n containerRef,\n scrollTo,\n update: updateBar\n}\n\ndefineExpose(exposed)\n</script>\n"],"mappings":"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"}
@@ -26,10 +26,10 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
26
26
  "onUpdate:text"?: ((value: any) => any) | undefined;
27
27
  "onUpdate:label"?: ((label?: string | undefined) => any) | undefined;
28
28
  }>, {
29
- disabled: boolean;
30
- readonly: boolean;
31
29
  labelKey: string;
32
30
  valueKey: string;
31
+ disabled: boolean;
32
+ readonly: boolean;
33
33
  placeholder: string;
34
34
  clearable: boolean;
35
35
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
@@ -1 +1 @@
1
- {"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../src/components/slider/slider-thumb.vue"],"sourcesContent":["<template>\n <div ref=\"thumb\" :class=\"cls.e('thumb')\" :style></div>\n</template>\n<script lang=\"ts\" setup>\nimport { useDrag, useUserAction } from '@veltra/compositions'\nimport { computed, inject, useTemplateRef, watch } from 'vue'\n\nimport { sliderContextKey } from './di'\n\nconst props = defineProps<{\n modelValue: number\n}>()\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: number): void\n}>()\n\nconst { cls, range, disabled, sliderProps, getOffsetByStep } = inject(sliderContextKey)!\n\nconst thumbRef = useTemplateRef('thumb')\n\nconst style = computed(() => {\n if (sliderProps.vertical) {\n return {\n transform: `translate(0, ${props.modelValue}px)`\n }\n }\n return {\n transform: `translate(${props.modelValue}px, 0)`\n }\n})\n\nconst { userAction, isUserActive } = useUserAction()\n\nfunction updateModel(offset: number) {\n offset = getOffsetByStep(offset)\n emit('update:modelValue', offset)\n return offset\n}\n\nconst dragger = useDrag({\n target: computed(() => (disabled.value ? null : thumbRef.value)),\n\n onDrag: userAction(({ offsetX, offsetY }) => {\n updateModel(sliderProps.vertical ? offsetY : offsetX)\n }),\n rangeX: range,\n rangeY: range,\n onDragEnd: userAction(({ offsetX, offsetY }) => {\n const offset = updateModel(sliderProps.vertical ? offsetY : offsetX)\n updateDragger(offset)\n })\n})\n\nfunction updateDragger(offset: number) {\n if (sliderProps.vertical) {\n dragger.update({ offsetY: offset })\n } else {\n dragger.update({ offsetX: offset })\n }\n}\n\nwatch(\n () => props.modelValue,\n (offset) => {\n if (isUserActive()) return\n updateDragger(offset)\n }\n)\n</script>\n"],"mappings":";;;;;;;;;EASA,MAAM,QAAQ;EAId,MAAM,OAAO;EAIb,MAAM,EAAE,KAAK,OAAO,UAAU,aAAa,oBAAoB,OAAO,iBAAiB;EAEvF,MAAM,WAAW,eAAe,QAAO;EAEvC,MAAM,QAAQ,eAAe;AAC3B,OAAI,YAAY,SACd,QAAO,EACL,WAAW,gBAAgB,MAAM,WAAW,MAC9C;AAEF,UAAO,EACL,WAAW,aAAa,MAAM,WAAW,SAC3C;IACD;EAED,MAAM,EAAE,YAAY,iBAAiB,eAAc;EAEnD,SAAS,YAAY,QAAgB;AACnC,YAAS,gBAAgB,OAAM;AAC/B,QAAK,qBAAqB,OAAM;AAChC,UAAO;;EAGT,MAAM,UAAU,QAAQ;GACtB,QAAQ,eAAgB,SAAS,QAAQ,OAAO,SAAS,MAAO;GAEhE,QAAQ,YAAY,EAAE,SAAS,cAAc;AAC3C,gBAAY,YAAY,WAAW,UAAU,QAAO;KACpD;GACF,QAAQ;GACR,QAAQ;GACR,WAAW,YAAY,EAAE,SAAS,cAAc;AAE9C,kBADe,YAAY,YAAY,WAAW,UAAU,QAAO,CAC/C;KACrB;GACF,CAAA;EAED,SAAS,cAAc,QAAgB;AACrC,OAAI,YAAY,SACd,SAAQ,OAAO,EAAE,SAAS,QAAQ,CAAA;OAElC,SAAQ,OAAO,EAAE,SAAS,QAAQ,CAAA;;AAItC,cACQ,MAAM,aACX,WAAW;AACV,OAAI,cAAc,CAAE;AACpB,iBAAc,OAAM;IAExB;;uBAnEE,mBAAsD,OAAA;IAAjD,KAAI;IAAS,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;IAAY,OAAK,eAAL,MAAA,MAAK"}
1
+ {"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../src/components/slider/slider-thumb.vue"],"sourcesContent":["<template>\n <div ref=\"thumb\" :class=\"cls.e('thumb')\" :style></div>\n</template>\n<script lang=\"ts\" setup>\nimport { useDrag, useUserAction } from '@veltra/compositions'\nimport { computed, inject, useTemplateRef, watch } from 'vue'\n\nimport { sliderContextKey } from './di'\n\nconst props = defineProps<{\n modelValue: number\n}>()\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: number): void\n}>()\n\nconst { cls, range, disabled, sliderProps, getOffsetByStep } = inject(sliderContextKey)!\n\nconst thumbRef = useTemplateRef('thumb')\n\nconst style = computed(() => {\n if (sliderProps.vertical) {\n return {\n transform: `translate(0, ${props.modelValue}px)`\n }\n }\n return {\n transform: `translate(${props.modelValue}px, 0)`\n }\n})\n\nconst { userAction, isUserActive } = useUserAction()\n\nfunction updateModel(offset: number) {\n offset = getOffsetByStep(offset)\n emit('update:modelValue', offset)\n return offset\n}\n\nconst dragger = useDrag({\n target: computed(() => (disabled.value ? null : thumbRef.value)),\n\n onDrag: userAction(({ offsetX, offsetY }) => {\n updateModel(sliderProps.vertical ? offsetY : offsetX)\n }),\n rangeX: range,\n rangeY: range,\n onDragEnd: userAction(({ offsetX, offsetY }) => {\n const offset = updateModel(sliderProps.vertical ? offsetY : offsetX)\n updateDragger(offset)\n })\n})\n\nfunction updateDragger(offset: number) {\n if (sliderProps.vertical) {\n dragger.update({ offsetY: offset })\n } else {\n dragger.update({ offsetX: offset })\n }\n}\n\nwatch(\n () => props.modelValue,\n (offset) => {\n if (isUserActive()) return\n updateDragger(offset)\n }\n)\n</script>\n"],"mappings":";;;;;;;;;EASA,MAAM,QAAQ;EAId,MAAM,OAAO;EAIb,MAAM,EAAE,KAAK,OAAO,UAAU,aAAa,oBAAoB,OAAO,iBAAiB;EAEvF,MAAM,WAAW,eAAe,QAAO;EAEvC,MAAM,QAAQ,eAAe;AAC3B,OAAI,YAAY,SACd,QAAO,EACL,WAAW,gBAAgB,MAAM,WAAW,MAC9C;AAEF,UAAO,EACL,WAAW,aAAa,MAAM,WAAW,SAC3C;IACD;EAED,MAAM,EAAE,YAAY,iBAAiB,eAAc;EAEnD,SAAS,YAAY,QAAgB;AACnC,YAAS,gBAAgB,OAAM;AAC/B,QAAK,qBAAqB,OAAM;AAChC,UAAO;;EAGT,MAAM,UAAU,QAAQ;GACtB,QAAQ,eAAgB,SAAS,QAAQ,OAAO,SAAS,MAAO;GAEhE,QAAQ,YAAY,EAAE,SAAS,cAAc;AAC3C,gBAAY,YAAY,WAAW,UAAU,QAAO;KACpD;GACF,QAAQ;GACR,QAAQ;GACR,WAAW,YAAY,EAAE,SAAS,cAAc;AAE9C,kBADe,YAAY,YAAY,WAAW,UAAU,QAC9C,CAAM;KACrB;GACF,CAAA;EAED,SAAS,cAAc,QAAgB;AACrC,OAAI,YAAY,SACd,SAAQ,OAAO,EAAE,SAAS,QAAQ,CAAA;OAElC,SAAQ,OAAO,EAAE,SAAS,QAAQ,CAAA;;AAItC,cACQ,MAAM,aACX,WAAW;AACV,OAAI,cAAc,CAAE;AACpB,iBAAc,OAAM;IAExB;;uBAnEE,mBAAsD,OAAA;IAAjD,KAAI;IAAS,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;IAAY,OAAK,eAAL,MAAA,MAAK"}
@@ -1 +1 @@
1
- {"version":3,"file":"di.js","names":[],"sources":["../../../src/components/table/di.ts"],"sourcesContent":["import type { VirtualItem } from '@veltra/compositions'\nimport type { BEM } from '@veltra/utils'\nimport type { ComputedRef, InjectionKey, ShallowRef, Slots } from 'vue'\n\nimport type {\n TableProps,\n TableColumnSlotsScope,\n TableColumnRenderContext,\n TableRow,\n RenderReturn,\n TableColumn,\n TableRowSlotsScope\n} from '../../types'\nimport type { ColumnNode } from './node/col'\nimport type { ColumnConfig } from './use-columns'\n\nexport const TableDIKey: InjectionKey<\n {\n /** 表格属性 */\n tableProps: TableProps\n /** 表格插槽 */\n tableSlots: Slots\n /** 类 */\n cls: BEM<'table'>\n /** 行 */\n rows: ShallowRef<TableRow[]>\n /** 选中行 */\n checkedRows: ShallowRef<Set<TableRow>>\n /** 结构化列 */\n columnConfig: ColumnConfig\n /** 事件处理方法 */\n handleRowClick: (row: TableRow, ev: MouseEvent) => void\n /** 单元格点击 */\n handleCellClick: (row: TableRow, column: TableColumn, ev: MouseEvent) => void\n /** 表格列插槽node */\n getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn\n /** 展开行插槽node */\n getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn\n /** 表头插槽node */\n getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn\n\n /** 展开/隐藏子节点 */\n toggleTreeRowExpand: (row: TableRow) => void\n\n /** 获取单元格的类 */\n getCellClass: (column: ColumnNode) => string\n\n /** 获取表头单元格的类 */\n getHeaderCellClass: (column: ColumnNode) => string\n\n /** 获取单元格上下文 */\n getCellCtx: (\n row: TableRow,\n column: ColumnNode\n ) => TableColumnSlotsScope | TableColumnRenderContext\n\n /**\n * 当前渲染窗口的虚拟项列表。\n *\n * 由 `useVirtualizer` 拆分出的 `items` shallowRef:仅在底层 `items`\n * 引用变化时才更新,`isScrolling` / 纯尺寸变化不会导致此 ref 更新。\n */\n virtualList: ShallowRef<VirtualItem[]>\n /** 是否启用虚拟列表 */\n virtualEnabled: ComputedRef<boolean>\n /**\n * 测量行元素尺寸(参数顺序与底层 `Virtualizer.measureElement` 一致)。\n *\n * 元素卸载(`el === null`)时会从底层解绑,避免被移除的 `<tr>` 继续触发\n * size=0 测量回调。\n */\n measureElement: (index: number, el: Element | null) => void\n }\n> = Symbol('TableDIKey')\n\nexport const TableResizeKey: InjectionKey<{\n handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n headerRef: ShallowRef<HTMLElement | undefined>\n}> = Symbol('TableResizeKey')\n"],"mappings":";AAgBA,MAAa,aAyDT,OAAO,aAAa;AAExB,MAAa,iBAGR,OAAO,iBAAiB"}
1
+ {"version":3,"file":"di.js","names":[],"sources":["../../../src/components/table/di.ts"],"sourcesContent":["import type { VirtualItem } from '@veltra/compositions'\nimport type { BEM } from '@veltra/utils'\nimport type { ComputedRef, InjectionKey, ShallowRef, Slots } from 'vue'\n\nimport type {\n TableProps,\n TableColumnSlotsScope,\n TableColumnRenderContext,\n TableRow,\n RenderReturn,\n TableColumn,\n TableRowSlotsScope\n} from '../../types'\nimport type { ColumnNode } from './node/col'\nimport type { ColumnConfig } from './use-columns'\n\nexport const TableDIKey: InjectionKey<{\n /** 表格属性 */\n tableProps: TableProps\n /** 表格插槽 */\n tableSlots: Slots\n /** 类 */\n cls: BEM<'table'>\n /** 行 */\n rows: ShallowRef<TableRow[]>\n /** 选中行 */\n checkedRows: ShallowRef<Set<TableRow>>\n /** 结构化列 */\n columnConfig: ColumnConfig\n /** 事件处理方法 */\n handleRowClick: (row: TableRow, ev: MouseEvent) => void\n /** 单元格点击 */\n handleCellClick: (row: TableRow, column: TableColumn, ev: MouseEvent) => void\n /** 表格列插槽node */\n getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn\n /** 展开行插槽node */\n getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn\n /** 表头插槽node */\n getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn\n\n /** 展开/隐藏子节点 */\n toggleTreeRowExpand: (row: TableRow) => void\n\n /** 获取单元格的类 */\n getCellClass: (column: ColumnNode) => string\n\n /** 获取表头单元格的类 */\n getHeaderCellClass: (column: ColumnNode) => string\n\n /** 获取单元格上下文 */\n getCellCtx: (\n row: TableRow,\n column: ColumnNode\n ) => TableColumnSlotsScope | TableColumnRenderContext\n\n /**\n * 当前渲染窗口的虚拟项列表。\n *\n * 由 `useVirtualizer` 拆分出的 `items` shallowRef:仅在底层 `items`\n * 引用变化时才更新,`isScrolling` / 纯尺寸变化不会导致此 ref 更新。\n */\n virtualList: ShallowRef<VirtualItem[]>\n /** 是否启用虚拟列表 */\n virtualEnabled: ComputedRef<boolean>\n /**\n * 测量行元素尺寸(参数顺序与底层 `Virtualizer.measureElement` 一致)。\n *\n * 元素卸载(`el === null`)时会从底层解绑,避免被移除的 `<tr>` 继续触发\n * size=0 测量回调。\n */\n measureElement: (index: number, el: Element | null) => void\n}> = Symbol('TableDIKey')\n\nexport const TableResizeKey: InjectionKey<{\n handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n headerRef: ShallowRef<HTMLElement | undefined>\n}> = Symbol('TableResizeKey')\n"],"mappings":";AAgBA,MAAa,aAuDR,OAAO,aAAa;AAEzB,MAAa,iBAGR,OAAO,iBAAiB"}
@@ -3,6 +3,6 @@ import "../button/style.js";
3
3
  import "../tip/style.js";
4
4
  import "../scroll/style.js";
5
5
  import "../checkbox/style.js";
6
- import "../empty/style.js";
7
6
  import "../radio/style.js";
7
+ import "../empty/style.js";
8
8
  import "./style2.css";
@@ -94,9 +94,8 @@ const UTableRow = defineComponent({
94
94
  }
95
95
  }
96
96
  const mod = rowModCls(row);
97
- const rowCls = mod ? rowBaseCls + " " + mod : rowBaseCls;
98
97
  return createVNode("tr", {
99
- "class": rowCls,
98
+ "class": mod ? rowBaseCls + " " + mod : rowBaseCls,
100
99
  "onClick": (e) => handleRowClick(row, e),
101
100
  "ref": getMeasureRef(props.index),
102
101
  "key": row.uid
@@ -1 +1 @@
1
- {"version":3,"file":"table-row.js","names":["ArrowRight","defineComponent","DefineComponent","inject","onUnmounted","JSX","TableRow","ITableRow","UButton","UIcon","TableDIKey","UTabelCell","_isSlot","s","Object","prototype","toString","call","_isVNode","ROW_MOD_CLASS","const","rowModCls","row","i","isCurrent","checked","expanded","UTableRow","index","name","props","type","required","Number","setup","cls","columnConfig","getColumnSlotsNode","toggleTreeRowExpand","getCellCtx","handleRowClick","handleCellClick","tableProps","measureElement","getCellClass","rowBaseCls","e","expandToggleCls","expandSpaceCls","measureRefCache","Map","el","getMeasureRef","ref","get","undefined","Element","set","clear","columns","expandColumn","_expandColumn","value","expandCell","expandCtx","cellSpan","mergeCell","colspan","rowspan","marginLeft","tree","depth","_createVNode","_mergeProps","style","left","right","uid","key","default","isLeaf","expandable","isExpandRow","stopPropagation","mod","rowCls","map","column","cellCtx","cellNode","UExpandTableRow","getExpandRowSlotsNode","leafColumns","cellCls","measureRef","node","rowData","data","length"],"sources":["../../../src/components/table/table-row.tsx"],"sourcesContent":["import { ArrowRight } from '@veltra/icons/normal'\nimport { defineComponent, type DefineComponent } from 'vue'\nimport { inject, onUnmounted } from 'vue'\nimport type { JSX } from 'vue/jsx-runtime'\n\nimport type { TableRow as ITableRow } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\nimport { TableDIKey } from './di'\nimport UTabelCell from './table-cell.vue'\n\n/**\n * A3:行修饰类组合静态查找表。\n *\n * 位模式:bit2 = isCurrent, bit1 = checked, bit0 = expanded。\n * 与 `bem.is('...')` 对于 `'current' | 'checked' | 'expanded'` 的输出完全等价,\n * 直接从 index 读字符串,消除每行渲染期间的字符串拼接和 3 次 bem.is 调用。\n *\n * 放在模块顶层使所有 TableRow 实例共享一份引用(不会随 setup 重建)。\n */\nconst ROW_MOD_CLASS: readonly string[] = [\n '',\n 'is-expanded',\n 'is-checked',\n 'is-checked is-expanded',\n 'is-current',\n 'is-current is-expanded',\n 'is-current is-checked',\n 'is-current is-checked is-expanded'\n] as const\n\nfunction rowModCls(row: ITableRow): string {\n const i = (row.isCurrent ? 4 : 0) | (row.checked ? 2 : 0) | (row.expanded ? 1 : 0)\n return ROW_MOD_CLASS[i]!\n}\n\nexport const UTableRow: DefineComponent<{ row: ITableRow; index: number }> = defineComponent({\n name: 'TableRow',\n\n props: {\n row: { type: Object as () => ITableRow, required: true },\n index: { type: Number, required: true }\n },\n\n setup(props) {\n const {\n cls,\n columnConfig,\n getColumnSlotsNode,\n toggleTreeRowExpand,\n getCellCtx,\n handleRowClick,\n handleCellClick,\n tableProps,\n measureElement,\n getCellClass\n } = inject(TableDIKey)!\n\n // A1:把 cls.e('row') / cls.e('expand-toggle') 等静态字符串提升到 setup 一次性计算,\n // 避免每次 render 重新走 `cls.e` 拼接。\n const rowBaseCls = cls.e('row')\n const expandToggleCls = cls.e('expand-toggle')\n const expandSpaceCls = cls.e('expand-space')\n\n // A2:measureRef 按 index 缓存闭包。\n // 行虚拟化下,同一 TableRow 实例的 props.index 大多稳定,但在虚拟化重排或展开行切换时\n // 仍会发生变化;把 (index) → refFn 缓存起来,既保证引用稳定(利于 Vue 的 ref diff),\n // 又避免在未来可能的\"同实例跨 index 复用\"情形下重复分配闭包。\n const measureRefCache = new Map<number, (el: unknown) => void>()\n const getMeasureRef = (index: number): ((el: unknown) => void) => {\n let ref = measureRefCache.get(index)\n if (ref === undefined) {\n ref = (el: unknown) => {\n measureElement(index, el as Element | null)\n }\n measureRefCache.set(index, ref)\n }\n return ref\n }\n onUnmounted(() => {\n measureRefCache.clear()\n })\n\n const { columns, expandColumn } = columnConfig\n\n return () => {\n const { row } = props\n const _expandColumn = expandColumn.value\n\n let expandCell: JSX.Element | null = null\n if (_expandColumn) {\n const expandCtx = getCellCtx(row, _expandColumn)\n const cellSpan = tableProps.mergeCell?.(expandCtx)\n\n if (!cellSpan || (cellSpan.colspan && cellSpan.rowspan)) {\n const marginLeft = tableProps.tree ? (row.depth - 1) * 14 : 0\n expandCell = (\n <UTabelCell\n cellClass={getCellClass(_expandColumn)}\n left={_expandColumn.style.left}\n right={_expandColumn.style.right}\n key={row.uid + _expandColumn.key}\n {...tableProps.mergeCell?.(expandCtx)}\n >\n {!row.isLeaf || (tableProps.expandable && !row.isExpandRow) ? (\n <UButton\n text\n class={expandToggleCls}\n type='primary'\n size='small'\n circle\n onClick={(e) => {\n e.stopPropagation()\n toggleTreeRowExpand(row)\n }}\n style={`margin-left: ${marginLeft}px`}\n >\n <UIcon>\n <ArrowRight />\n </UIcon>\n </UButton>\n ) : (\n <i class={expandSpaceCls} style={`margin-left: ${marginLeft}px`}></i>\n )}\n\n {getColumnSlotsNode(expandCtx)}\n </UTabelCell>\n )\n }\n }\n\n // A3:行 class 由 base + 3-bit 组合查找产出,避免 Vue 的 class 数组归一化开销。\n const mod = rowModCls(row)\n const rowCls = mod ? rowBaseCls + ' ' + mod : rowBaseCls\n\n return (\n <tr\n class={rowCls}\n onClick={(e) => handleRowClick(row, e)}\n ref={getMeasureRef(props.index)}\n key={row.uid}\n >\n {expandCell}\n\n {columns.value.map((column) => {\n const cellCtx = getCellCtx(row, column)\n const cellSpan = tableProps.mergeCell?.(cellCtx)\n if (cellSpan && (!cellSpan.colspan || !cellSpan.rowspan)) {\n return null\n }\n\n const cellNode = getColumnSlotsNode(cellCtx)\n\n return (\n <UTabelCell\n cellClass={getCellClass(column)}\n left={column.style.left}\n right={column.style.right}\n key={row.uid + column.key}\n // @ts-ignore\n onClick={(e) => handleCellClick(row, column, e)}\n {...cellSpan}\n >\n {cellNode}\n </UTabelCell>\n )\n })}\n </tr>\n )\n }\n }\n})\n\nexport const UExpandTableRow = defineComponent({\n name: 'ExpandTableRow',\n props: {\n row: { type: Object as () => ITableRow, required: true },\n index: { type: Number, required: true }\n },\n setup(props) {\n const { getExpandRowSlotsNode, cls, measureElement, columnConfig } = inject(TableDIKey)!\n const { leafColumns } = columnConfig\n\n const rowBaseCls = cls.e('row')\n const cellCls = cls.e('cell')\n\n const measureRef = (el: unknown) => {\n measureElement(props.index, el as Element | null)\n }\n\n return () => {\n const { row } = props\n const node = getExpandRowSlotsNode({\n row,\n index: row.index,\n columns: leafColumns.value,\n rowData: row.data\n })\n return (\n <tr class={rowBaseCls} ref={measureRef}>\n <td colspan={leafColumns.value.length} class={cellCls}>\n {node}\n </td>\n </tr>\n )\n }\n }\n})\n"],"mappings":"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"}
1
+ {"version":3,"file":"table-row.js","names":["ArrowRight","defineComponent","DefineComponent","inject","onUnmounted","JSX","TableRow","ITableRow","UButton","UIcon","TableDIKey","UTabelCell","_isSlot","s","Object","prototype","toString","call","_isVNode","ROW_MOD_CLASS","const","rowModCls","row","i","isCurrent","checked","expanded","UTableRow","index","name","props","type","required","Number","setup","cls","columnConfig","getColumnSlotsNode","toggleTreeRowExpand","getCellCtx","handleRowClick","handleCellClick","tableProps","measureElement","getCellClass","rowBaseCls","e","expandToggleCls","expandSpaceCls","measureRefCache","Map","el","getMeasureRef","ref","get","undefined","Element","set","clear","columns","expandColumn","_expandColumn","value","expandCell","expandCtx","cellSpan","mergeCell","colspan","rowspan","marginLeft","tree","depth","_createVNode","_mergeProps","style","left","right","uid","key","default","isLeaf","expandable","isExpandRow","stopPropagation","mod","rowCls","map","column","cellCtx","cellNode","UExpandTableRow","getExpandRowSlotsNode","leafColumns","cellCls","measureRef","node","rowData","data","length"],"sources":["../../../src/components/table/table-row.tsx"],"sourcesContent":["import { ArrowRight } from '@veltra/icons/normal'\nimport { defineComponent, type DefineComponent } from 'vue'\nimport { inject, onUnmounted } from 'vue'\nimport type { JSX } from 'vue/jsx-runtime'\n\nimport type { TableRow as ITableRow } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\nimport { TableDIKey } from './di'\nimport UTabelCell from './table-cell.vue'\n\n/**\n * A3:行修饰类组合静态查找表。\n *\n * 位模式:bit2 = isCurrent, bit1 = checked, bit0 = expanded。\n * 与 `bem.is('...')` 对于 `'current' | 'checked' | 'expanded'` 的输出完全等价,\n * 直接从 index 读字符串,消除每行渲染期间的字符串拼接和 3 次 bem.is 调用。\n *\n * 放在模块顶层使所有 TableRow 实例共享一份引用(不会随 setup 重建)。\n */\nconst ROW_MOD_CLASS: readonly string[] = [\n '',\n 'is-expanded',\n 'is-checked',\n 'is-checked is-expanded',\n 'is-current',\n 'is-current is-expanded',\n 'is-current is-checked',\n 'is-current is-checked is-expanded'\n] as const\n\nfunction rowModCls(row: ITableRow): string {\n const i = (row.isCurrent ? 4 : 0) | (row.checked ? 2 : 0) | (row.expanded ? 1 : 0)\n return ROW_MOD_CLASS[i]!\n}\n\nexport const UTableRow: DefineComponent<{ row: ITableRow; index: number }> = defineComponent({\n name: 'TableRow',\n\n props: {\n row: { type: Object as () => ITableRow, required: true },\n index: { type: Number, required: true }\n },\n\n setup(props) {\n const {\n cls,\n columnConfig,\n getColumnSlotsNode,\n toggleTreeRowExpand,\n getCellCtx,\n handleRowClick,\n handleCellClick,\n tableProps,\n measureElement,\n getCellClass\n } = inject(TableDIKey)!\n\n // A1:把 cls.e('row') / cls.e('expand-toggle') 等静态字符串提升到 setup 一次性计算,\n // 避免每次 render 重新走 `cls.e` 拼接。\n const rowBaseCls = cls.e('row')\n const expandToggleCls = cls.e('expand-toggle')\n const expandSpaceCls = cls.e('expand-space')\n\n // A2:measureRef 按 index 缓存闭包。\n // 行虚拟化下,同一 TableRow 实例的 props.index 大多稳定,但在虚拟化重排或展开行切换时\n // 仍会发生变化;把 (index) → refFn 缓存起来,既保证引用稳定(利于 Vue 的 ref diff),\n // 又避免在未来可能的\"同实例跨 index 复用\"情形下重复分配闭包。\n const measureRefCache = new Map<number, (el: unknown) => void>()\n const getMeasureRef = (index: number): ((el: unknown) => void) => {\n let ref = measureRefCache.get(index)\n if (ref === undefined) {\n ref = (el: unknown) => {\n measureElement(index, el as Element | null)\n }\n measureRefCache.set(index, ref)\n }\n return ref\n }\n onUnmounted(() => {\n measureRefCache.clear()\n })\n\n const { columns, expandColumn } = columnConfig\n\n return () => {\n const { row } = props\n const _expandColumn = expandColumn.value\n\n let expandCell: JSX.Element | null = null\n if (_expandColumn) {\n const expandCtx = getCellCtx(row, _expandColumn)\n const cellSpan = tableProps.mergeCell?.(expandCtx)\n\n if (!cellSpan || (cellSpan.colspan && cellSpan.rowspan)) {\n const marginLeft = tableProps.tree ? (row.depth - 1) * 14 : 0\n expandCell = (\n <UTabelCell\n cellClass={getCellClass(_expandColumn)}\n left={_expandColumn.style.left}\n right={_expandColumn.style.right}\n key={row.uid + _expandColumn.key}\n {...tableProps.mergeCell?.(expandCtx)}\n >\n {!row.isLeaf || (tableProps.expandable && !row.isExpandRow) ? (\n <UButton\n text\n class={expandToggleCls}\n type='primary'\n size='small'\n circle\n onClick={(e) => {\n e.stopPropagation()\n toggleTreeRowExpand(row)\n }}\n style={`margin-left: ${marginLeft}px`}\n >\n <UIcon>\n <ArrowRight />\n </UIcon>\n </UButton>\n ) : (\n <i class={expandSpaceCls} style={`margin-left: ${marginLeft}px`}></i>\n )}\n\n {getColumnSlotsNode(expandCtx)}\n </UTabelCell>\n )\n }\n }\n\n // A3:行 class 由 base + 3-bit 组合查找产出,避免 Vue 的 class 数组归一化开销。\n const mod = rowModCls(row)\n const rowCls = mod ? rowBaseCls + ' ' + mod : rowBaseCls\n\n return (\n <tr\n class={rowCls}\n onClick={(e) => handleRowClick(row, e)}\n ref={getMeasureRef(props.index)}\n key={row.uid}\n >\n {expandCell}\n\n {columns.value.map((column) => {\n const cellCtx = getCellCtx(row, column)\n const cellSpan = tableProps.mergeCell?.(cellCtx)\n if (cellSpan && (!cellSpan.colspan || !cellSpan.rowspan)) {\n return null\n }\n\n const cellNode = getColumnSlotsNode(cellCtx)\n\n return (\n <UTabelCell\n cellClass={getCellClass(column)}\n left={column.style.left}\n right={column.style.right}\n key={row.uid + column.key}\n // @ts-ignore\n onClick={(e) => handleCellClick(row, column, e)}\n {...cellSpan}\n >\n {cellNode}\n </UTabelCell>\n )\n })}\n </tr>\n )\n }\n }\n})\n\nexport const UExpandTableRow = defineComponent({\n name: 'ExpandTableRow',\n props: {\n row: { type: Object as () => ITableRow, required: true },\n index: { type: Number, required: true }\n },\n setup(props) {\n const { getExpandRowSlotsNode, cls, measureElement, columnConfig } = inject(TableDIKey)!\n const { leafColumns } = columnConfig\n\n const rowBaseCls = cls.e('row')\n const cellCls = cls.e('cell')\n\n const measureRef = (el: unknown) => {\n measureElement(props.index, el as Element | null)\n }\n\n return () => {\n const { row } = props\n const node = getExpandRowSlotsNode({\n row,\n index: row.index,\n columns: leafColumns.value,\n rowData: row.data\n })\n return (\n <tr class={rowBaseCls} ref={measureRef}>\n <td colspan={leafColumns.value.length} class={cellCls}>\n {node}\n </td>\n </tr>\n )\n }\n }\n})\n"],"mappings":"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"}
@@ -9,7 +9,7 @@ import { useColumns } from "./use-columns.js";
9
9
  import { useFixedColumns } from "./use-fixed-columns.js";
10
10
  import { useRows } from "./use-rows.js";
11
11
  import { useTable } from "./use-table.js";
12
- import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, shallowRef, toDisplayString, toRef, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
12
+ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, shallowRef, toRef, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
13
13
  import { bem, withUnit } from "@veltra/utils";
14
14
  import { useFallbackProps, useVirtualizer } from "@veltra/compositions";
15
15
  //#region src/components/table/table.vue
@@ -181,7 +181,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
181
181
  onScroll: unref(handleScroll)
182
182
  }, {
183
183
  default: withCtx(() => [
184
- createTextVNode(toDisplayString(console.log(1)) + " ", 1),
185
184
  createElementVNode("table", { class: normalizeClass(unref(cls).e("wrap")) }, [
186
185
  createElementVNode("colgroup", {
187
186
  ref_key: "colgroupRef",
@@ -1 +1 @@
1
- {"version":3,"file":"table.js","names":[],"sources":["../../../src/components/table/table.vue"],"sourcesContent":["<template>\n <u-scroll\n :class=\"[\n cls.b,\n cls.m(size),\n bem.is('border', border),\n bem.is('all-expanded', allExpanded),\n bem.is('text-ellipsis', textEllipsis)\n ]\"\n ref=\"scrollRef\"\n :content-class=\"cls.e('content')\"\n @scroll=\"handleScroll\"\n >\n {{ console.log(1) }}\n <table :class=\"cls.e('wrap')\">\n <colgroup ref=\"colgroupRef\">\n <col\n v-for=\"column of leafColumns\"\n :key=\"column.key\"\n :class=\"column.fixed\"\n :style=\"{\n width: withUnit(column.width, 'px'),\n minWidth: withUnit(column.minWidth, 'px')\n }\"\n />\n </colgroup>\n <UTableHead />\n\n <!--\n 虚拟滚动上占位:替代 tbody transform,避免 table-layout: fixed 下列宽抖动。\n 高度由 useVirtualizer 命令式写入 `style.height`,不经过模板响应式绑定,\n 因此滚动窗口变化不会引起表格模板重渲染。\n -->\n <tbody v-if=\"virtualEnabled\" aria-hidden=\"true\">\n <tr ref=\"beforeSpacerRef\">\n <td :colspan=\"leafColumns.length\" style=\"padding: 0; border: none\"></td>\n </tr>\n </tbody>\n\n <u-table-body>\n <slot name=\"body\" :columns=\"leafColumns\" :rows=\"rows\" />\n\n <template #empty v-if=\"slots.empty\">\n <slot name=\"empty\" />\n </template>\n </u-table-body>\n\n <!-- 虚拟滚动下占位(高度由 useVirtualizer 命令式写入) -->\n <tbody v-if=\"virtualEnabled\" aria-hidden=\"true\">\n <tr ref=\"afterSpacerRef\">\n <td :colspan=\"leafColumns.length\" style=\"padding: 0; border: none\"></td>\n </tr>\n </tbody>\n\n <u-table-foot ref=\"tableFoot\">\n <slot name=\"foot\" :columns=\"leafColumns\" :rows=\"rows\" />\n </u-table-foot>\n </table>\n\n <slot name=\"append\" />\n\n <div v-if=\"showResizeLine\" :class=\"cls.e('resize-line')\" ref=\"resizeLineRef\"></div>\n\n <!-- <u-tip v-if=\"textEllipsis\" ref=\"tip\"> </u-tip> -->\n </u-scroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { computed, provide, shallowRef, toRef, useTemplateRef, watch } from 'vue'\n\nimport type {\n TableProps,\n TableEmits,\n _TableExposed,\n TableColumnSlotsScope,\n ComponentSize,\n ScrollExposed,\n TableRowSlotsScope\n} from '../../types'\nimport { UScroll } from '../scroll'\nimport { TableDIKey } from './di'\nimport type { ColumnNode } from './node/col'\nimport type { TableRowNode } from './node/row'\nimport UTableBody from './table-body.vue'\nimport UTableFoot from './table-foot.vue'\n// import { UTip } from '../tip'\nimport UTableHead from './table-head'\nimport { useCheck } from './use-check'\nimport { useColResize } from './use-col-resize'\nimport { useColumns } from './use-columns'\nimport { useFixedColumns } from './use-fixed-columns'\nimport { useRows } from './use-rows'\nimport { useTable } from './use-table'\n\ndefineOptions({ name: 'Table' })\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tree: false,\n stripe: true,\n textOverflow: 'line-break',\n virtualThreshold: 80\n})\nconst emit = defineEmits<TableEmits>()\n\nconst slots = defineSlots<{\n [key: `column:${string}`]: (props: TableColumnSlotsScope) => any\n [key: `header:${string}`]: (props: { column: ColumnNode }) => any\n 'row:expand'?: (props: TableRowSlotsScope) => any\n foot?: (props: { columns: ColumnNode[]; rows: TableRowNode[] }) => any\n body?: (props: { columns: ColumnNode[]; rows: TableRowNode[] }) => any\n empty?: () => any\n append?: () => any\n}>()\n\nconst cls = bem('table')\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst scrollRef = shallowRef<ScrollExposed>()\n\n// 占位 tr 的 DOM 句柄;交给 useVirtualizer 直接命令式写 style.height。\nconst beforeSpacerRef = useTemplateRef<HTMLElement>('beforeSpacerRef')\nconst afterSpacerRef = useTemplateRef<HTMLElement>('afterSpacerRef')\n\n// 行(useRows / useFixedColumns 需要 isScrolling,而虚拟化 hook 又依赖 rows.length;\n// 先用中继占位,下方 isScrolling 到位后 watch 回灌)。\nconst isScrollingRelay = shallowRef(false)\n\nconst {\n rows,\n toggleTreeRowExpand,\n allExpanded,\n toggleAllTreeRowExpand,\n rowForest,\n handleRowClick,\n handleCellClick,\n getRowByData\n} = useRows({ props, emit, isScrolling: isScrollingRelay })\n\nconst { createCheckColumn, createSelectColumn, clearChecked, clearSelected, checkedRows } =\n useCheck({ size, props, rows, rowForest, emit, cls })\n\nconst columnConfig = useColumns({\n props,\n createCheckColumn,\n createSelectColumn,\n toggleAllTreeRowExpand,\n cls\n})\n\nconst { leafColumns } = columnConfig\n\nconst { handleScroll, leftFixed, rightFixed } = useFixedColumns({\n isScrolling: isScrollingRelay\n})\n\nconst {\n getColumnSlotsNode,\n getExpandRowSlotsNode,\n getHeaderSlotsNode,\n getCellClass,\n getCellCtx,\n getHeaderCellClass\n} = useTable({ props, cls, leftFixed, rightFixed })\n\nconst { showResizeLine, resizeLineRef, colgroupRef } = useColResize({ scrollRef, leafColumns })\n\nconst { virtualizer, items, isScrolling } = useVirtualizer({\n count: computed(() => rows.value.length),\n scrollEl: () => scrollRef.value?.containerRef ?? null,\n beforeEl: beforeSpacerRef,\n afterEl: afterSpacerRef,\n estimateSize: () => 41,\n // 注意:getItemKey 在构造期一次性写入底层 Virtualizer;闭包每次读的是当前 rows.value,\n // rows 引用整体替换后 key 仍有效(无需再 setOptions)。\n getItemKey: (i) => rows.value[i]?.uid ?? i\n})\n\nconst virtualEnabled = computed(() => {\n const t = props.virtualThreshold\n return t ? rows.value.length > t : true\n})\n\n// 把虚拟化 isScrolling 回灌到中继,供 useRows / useFixedColumns 读取。\nwatch(isScrolling, (v) => {\n isScrollingRelay.value = v\n})\n\n/**\n * E1:数据替换时的条件置顶。\n *\n * 旧实现无差别地 `scrollTo({ y: 0 })`,在「行内增删 / 排序 / 单行更新」等\n * 场景会把用户当前阅读位置跳走;仅在「翻页 / 显著数据集替换」时才需要复位。\n *\n * 判定阈值:|Δlen| / max(newLen, oldLen) ≥ 0.5,即行数变化量超过更大侧的一半时视为显著变化。\n * 选择 0.5 是因为典型的分页/搜索场景会带来 50% 以上的行数差(通常完全替换数据集),\n * 而行内追加 / 删除个位数通常只带来 <5% 的变化;两者区分度足够宽。\n */\nconst LENGTH_DELTA_RATIO_TO_RESET_SCROLL = 0.5\n\nwatch(\n () => props.data,\n (next, prev) => {\n const nextLen = next?.length ?? 0\n const prevLen = prev?.length ?? 0\n const denom = Math.max(nextLen, prevLen, 1)\n const ratio = Math.abs(nextLen - prevLen) / denom\n if (ratio >= LENGTH_DELTA_RATIO_TO_RESET_SCROLL) {\n scrollRef.value?.scrollTo({ y: 0 })\n }\n }\n)\n\n// const tipRef = useTemplateRef('tip')\n\nprovide(TableDIKey, {\n tableProps: props,\n tableSlots: slots,\n cls,\n rows,\n checkedRows,\n columnConfig,\n handleRowClick,\n handleCellClick,\n getColumnSlotsNode,\n getExpandRowSlotsNode,\n getHeaderSlotsNode,\n getCellClass,\n getCellCtx,\n getHeaderCellClass,\n // tipRef,\n toggleTreeRowExpand,\n virtualList: items,\n virtualEnabled,\n measureElement: (index, el) => virtualizer.measureElement(index, el)\n})\n\nconst tableFootRef = useTemplateRef('tableFoot')\n\ndefineExpose<_TableExposed>({\n el: toRef(() => scrollRef.value?.el),\n clearChecked,\n clearSelected,\n getRowByData,\n getSummaryRow: () => tableFootRef.value!.getSummaryRow()\n})\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"table.js","names":[],"sources":["../../../src/components/table/table.vue"],"sourcesContent":["<template>\n <u-scroll\n :class=\"[\n cls.b,\n cls.m(size),\n bem.is('border', border),\n bem.is('all-expanded', allExpanded),\n bem.is('text-ellipsis', textEllipsis)\n ]\"\n ref=\"scrollRef\"\n :content-class=\"cls.e('content')\"\n @scroll=\"handleScroll\"\n >\n <table :class=\"cls.e('wrap')\">\n <colgroup ref=\"colgroupRef\">\n <col\n v-for=\"column of leafColumns\"\n :key=\"column.key\"\n :class=\"column.fixed\"\n :style=\"{\n width: withUnit(column.width, 'px'),\n minWidth: withUnit(column.minWidth, 'px')\n }\"\n />\n </colgroup>\n <UTableHead />\n\n <!--\n 虚拟滚动上占位:替代 tbody transform,避免 table-layout: fixed 下列宽抖动。\n 高度由 useVirtualizer 命令式写入 `style.height`,不经过模板响应式绑定,\n 因此滚动窗口变化不会引起表格模板重渲染。\n -->\n <tbody v-if=\"virtualEnabled\" aria-hidden=\"true\">\n <tr ref=\"beforeSpacerRef\">\n <td :colspan=\"leafColumns.length\" style=\"padding: 0; border: none\"></td>\n </tr>\n </tbody>\n\n <u-table-body>\n <slot name=\"body\" :columns=\"leafColumns\" :rows=\"rows\" />\n\n <template #empty v-if=\"slots.empty\">\n <slot name=\"empty\" />\n </template>\n </u-table-body>\n\n <!-- 虚拟滚动下占位(高度由 useVirtualizer 命令式写入) -->\n <tbody v-if=\"virtualEnabled\" aria-hidden=\"true\">\n <tr ref=\"afterSpacerRef\">\n <td :colspan=\"leafColumns.length\" style=\"padding: 0; border: none\"></td>\n </tr>\n </tbody>\n\n <u-table-foot ref=\"tableFoot\">\n <slot name=\"foot\" :columns=\"leafColumns\" :rows=\"rows\" />\n </u-table-foot>\n </table>\n\n <slot name=\"append\" />\n\n <div v-if=\"showResizeLine\" :class=\"cls.e('resize-line')\" ref=\"resizeLineRef\"></div>\n\n <!-- <u-tip v-if=\"textEllipsis\" ref=\"tip\"> </u-tip> -->\n </u-scroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { computed, provide, shallowRef, toRef, useTemplateRef, watch } from 'vue'\n\nimport type {\n TableProps,\n TableEmits,\n _TableExposed,\n TableColumnSlotsScope,\n ComponentSize,\n ScrollExposed,\n TableRowSlotsScope\n} from '../../types'\nimport { UScroll } from '../scroll'\nimport { TableDIKey } from './di'\nimport type { ColumnNode } from './node/col'\nimport type { TableRowNode } from './node/row'\nimport UTableBody from './table-body.vue'\nimport UTableFoot from './table-foot.vue'\n// import { UTip } from '../tip'\nimport UTableHead from './table-head'\nimport { useCheck } from './use-check'\nimport { useColResize } from './use-col-resize'\nimport { useColumns } from './use-columns'\nimport { useFixedColumns } from './use-fixed-columns'\nimport { useRows } from './use-rows'\nimport { useTable } from './use-table'\n\ndefineOptions({ name: 'Table' })\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tree: false,\n stripe: true,\n textOverflow: 'line-break',\n virtualThreshold: 80\n})\nconst emit = defineEmits<TableEmits>()\n\nconst slots = defineSlots<{\n [key: `column:${string}`]: (props: TableColumnSlotsScope) => any\n [key: `header:${string}`]: (props: { column: ColumnNode }) => any\n 'row:expand'?: (props: TableRowSlotsScope) => any\n foot?: (props: { columns: ColumnNode[]; rows: TableRowNode[] }) => any\n body?: (props: { columns: ColumnNode[]; rows: TableRowNode[] }) => any\n empty?: () => any\n append?: () => any\n}>()\n\nconst cls = bem('table')\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst scrollRef = shallowRef<ScrollExposed>()\n\n// 占位 tr 的 DOM 句柄;交给 useVirtualizer 直接命令式写 style.height。\nconst beforeSpacerRef = useTemplateRef<HTMLElement>('beforeSpacerRef')\nconst afterSpacerRef = useTemplateRef<HTMLElement>('afterSpacerRef')\n\n// 行(useRows / useFixedColumns 需要 isScrolling,而虚拟化 hook 又依赖 rows.length;\n// 先用中继占位,下方 isScrolling 到位后 watch 回灌)。\nconst isScrollingRelay = shallowRef(false)\n\nconst {\n rows,\n toggleTreeRowExpand,\n allExpanded,\n toggleAllTreeRowExpand,\n rowForest,\n handleRowClick,\n handleCellClick,\n getRowByData\n} = useRows({ props, emit, isScrolling: isScrollingRelay })\n\nconst { createCheckColumn, createSelectColumn, clearChecked, clearSelected, checkedRows } =\n useCheck({ size, props, rows, rowForest, emit, cls })\n\nconst columnConfig = useColumns({\n props,\n createCheckColumn,\n createSelectColumn,\n toggleAllTreeRowExpand,\n cls\n})\n\nconst { leafColumns } = columnConfig\n\nconst { handleScroll, leftFixed, rightFixed } = useFixedColumns({\n isScrolling: isScrollingRelay\n})\n\nconst {\n getColumnSlotsNode,\n getExpandRowSlotsNode,\n getHeaderSlotsNode,\n getCellClass,\n getCellCtx,\n getHeaderCellClass\n} = useTable({ props, cls, leftFixed, rightFixed })\n\nconst { showResizeLine, resizeLineRef, colgroupRef } = useColResize({ scrollRef, leafColumns })\n\nconst { virtualizer, items, isScrolling } = useVirtualizer({\n count: computed(() => rows.value.length),\n scrollEl: () => scrollRef.value?.containerRef ?? null,\n beforeEl: beforeSpacerRef,\n afterEl: afterSpacerRef,\n estimateSize: () => 41,\n // 注意:getItemKey 在构造期一次性写入底层 Virtualizer;闭包每次读的是当前 rows.value,\n // rows 引用整体替换后 key 仍有效(无需再 setOptions)。\n getItemKey: (i) => rows.value[i]?.uid ?? i\n})\n\nconst virtualEnabled = computed(() => {\n const t = props.virtualThreshold\n return t ? rows.value.length > t : true\n})\n\n// 把虚拟化 isScrolling 回灌到中继,供 useRows / useFixedColumns 读取。\nwatch(isScrolling, (v) => {\n isScrollingRelay.value = v\n})\n\n/**\n * E1:数据替换时的条件置顶。\n *\n * 旧实现无差别地 `scrollTo({ y: 0 })`,在「行内增删 / 排序 / 单行更新」等\n * 场景会把用户当前阅读位置跳走;仅在「翻页 / 显著数据集替换」时才需要复位。\n *\n * 判定阈值:|Δlen| / max(newLen, oldLen) ≥ 0.5,即行数变化量超过更大侧的一半时视为显著变化。\n * 选择 0.5 是因为典型的分页/搜索场景会带来 50% 以上的行数差(通常完全替换数据集),\n * 而行内追加 / 删除个位数通常只带来 <5% 的变化;两者区分度足够宽。\n */\nconst LENGTH_DELTA_RATIO_TO_RESET_SCROLL = 0.5\n\nwatch(\n () => props.data,\n (next, prev) => {\n const nextLen = next?.length ?? 0\n const prevLen = prev?.length ?? 0\n const denom = Math.max(nextLen, prevLen, 1)\n const ratio = Math.abs(nextLen - prevLen) / denom\n if (ratio >= LENGTH_DELTA_RATIO_TO_RESET_SCROLL) {\n scrollRef.value?.scrollTo({ y: 0 })\n }\n }\n)\n\n// const tipRef = useTemplateRef('tip')\n\nprovide(TableDIKey, {\n tableProps: props,\n tableSlots: slots,\n cls,\n rows,\n checkedRows,\n columnConfig,\n handleRowClick,\n handleCellClick,\n getColumnSlotsNode,\n getExpandRowSlotsNode,\n getHeaderSlotsNode,\n getCellClass,\n getCellCtx,\n getHeaderCellClass,\n // tipRef,\n toggleTreeRowExpand,\n virtualList: items,\n virtualEnabled,\n measureElement: (index, el) => virtualizer.measureElement(index, el)\n})\n\nconst tableFootRef = useTemplateRef('tableFoot')\n\ndefineExpose<_TableExposed>({\n el: toRef(() => scrollRef.value?.el),\n clearChecked,\n clearSelected,\n getRowByData,\n getSummaryRow: () => tableFootRef.value!.getSummaryRow()\n})\n</script>\n"],"mappings":"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"}
@@ -23,16 +23,16 @@ type __VLS_Slots = {
23
23
  append?: () => any;
24
24
  };
25
25
  declare const __VLS_base: _$vue.DefineComponent<TableProps, _TableExposed, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
26
- "update:checked": (value: Record<string, any>[]) => any;
27
26
  "update:selected": (value: Record<string, any> | undefined) => any;
27
+ "update:checked": (value: Record<string, any>[]) => any;
28
28
  "update:rows": (rows: TableRow[]) => any;
29
29
  "update:forest": (rows?: _$_cat_kit_core0.Forest<Record<string, unknown>, any> | undefined) => any;
30
30
  "update:current": (row?: TableRow | undefined) => any;
31
31
  "cell-click": (row: TableRow, column: TableColumn, ev: MouseEvent) => any;
32
32
  "row-click": (row: TableRow, ev: MouseEvent) => any;
33
33
  }, string, _$vue.PublicProps, Readonly<TableProps> & Readonly<{
34
- "onUpdate:checked"?: ((value: Record<string, any>[]) => any) | undefined;
35
34
  "onUpdate:selected"?: ((value: Record<string, any> | undefined) => any) | undefined;
35
+ "onUpdate:checked"?: ((value: Record<string, any>[]) => any) | undefined;
36
36
  "onUpdate:rows"?: ((rows: TableRow[]) => any) | undefined;
37
37
  "onUpdate:forest"?: ((rows?: _$_cat_kit_core0.Forest<Record<string, unknown>, any> | undefined) => any) | undefined;
38
38
  "onUpdate:current"?: ((row?: TableRow | undefined) => any) | undefined;