npm - @veltra/desktop - Versions diffs - 1.7.7 → 1.7.9 - Mend

@veltra/desktop 1.7.7 → 1.7.9

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 (58) hide show

package/dist/components/cascade/use-check.js CHANGED Viewed

@@ -22,10 +22,13 @@ function useCheck(options) {
 		const checkedArr = Array.from(checkedSet.value);
 		const targetValues = checkedArr.map((item) => item.value);
 		const targetLabels = checkedArr.map((item) => item.label);
-		const targetItems = checkedArr.map((item) => item.data);
+		const targetItems = checkedArr.map((item) => {
+			const data = item.data;
+			return data ? Object.assign({}, data, { fullLabel: item.label }) : data;
+		});
 		emit("update:modelValue", targetValues);
 		emit("update:label", targetLabels.length ? targetLabels : void 0);
-		emit("change", targetItems);
+		emit("change", targetItems, targetLabels.length ? targetLabels : void 0);
 	}
 	const restTag = computed(() => {
 		const { visibilityLimit, modelValue } = props;

package/dist/components/cascade/use-check.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-check.js","names":[],"sources":["../../../src/components/cascade/use-check.ts"],"sourcesContent":["import { dfs, type Forest } from '@cat-kit/core'\nimport {\n computed,\n shallowRef,\n triggerRef,\n watch,\n type ComputedRef,\n type Ref,\n type ShallowRef\n} from 'vue'\n\nimport type { CascadeProps, CascadeEmits, CascadeNode } from '../../types'\n\ninterface CheckOptions {\n props: CascadeProps\n emit: CascadeEmits\n dataMap: ShallowRef<Map<string, CascadeNode>>\n disabled: Ref<boolean>\n readonly: Ref<boolean>\n forest: Ref<Forest<Record<string, unknown>, any>>\n isUserActive: () => boolean\n getPanelItemList: (data?: CascadeNode[]) => void\n}\n\ninterface UseCheckReturned {\n hovered: ShallowRef<boolean>\n tags: ComputedRef<CascadeNode[]>\n checkedSet: ShallowRef<Set<CascadeNode>>\n restTag: ComputedRef<number>\n handleCloseTag: (tag: CascadeNode) => void\n updateMultipleValue: () => void\n checkItem: (item: CascadeNode, checked: boolean) => void\n}\n\nexport function useCheck(options: CheckOptions): UseCheckReturned {\n const { props, emit, dataMap, disabled, readonly, forest, isUserActive, getPanelItemList } =\n options\n\n const hovered = shallowRef(false)\n\n const checkedSet = shallowRef(new Set<CascadeNode>())\n\n const tags = computed(() => {\n const { modelValue, multiple } = props\n let tags: CascadeNode[] = []\n\n if (!multiple \|\| !Array.isArray(modelValue)) return tags\n\n let { visibilityLimit } = props\n if (visibilityLimit! < 0) {\n visibilityLimit = 0\n }\n\n // 禁用时，显示全部\n if (disabled.value \|\| readonly.value) {\n visibilityLimit = props.modelValue?.length ?? 0\n }\n\n modelValue.slice(0, visibilityLimit).forEach((k) => {\n const option = dataMap.value.get(k)\n option && tags.push(option)\n })\n\n return tags\n })\n\n function updateMultipleValue() {\n const checkedArr = Array.from(checkedSet.value)\n const targetValues = checkedArr.map((item) => item.value)\n const targetLabels = checkedArr.map((item) => item.label)\n const targetItems = checkedArr.map((item) => item.data as Record<string, any>)\n emit('update:modelValue', targetValues)\n emit('update:label', targetLabels.length ? targetLabels : undefined)\n emit('change', targetItems)\n }\n\n const restTag = computed(() => {\n const { visibilityLimit, modelValue } = props\n\n return Math.max((modelValue?.length ?? 0) - visibilityLimit!, 0)\n })\n\n function handleCloseTag(tag: CascadeNode) {\n checkedSet.value.delete(tag)\n updateMultipleValue()\n }\n\n function checkItem(item: CascadeNode, checked: boolean) {\n const childrenKey = props.childrenKey ?? 'children'\n if (checked) {\n dfs(\n item as unknown as Record<string, unknown>,\n (node) => {\n checkedSet.value.add(node as unknown as CascadeNode)\n },\n childrenKey\n )\n } else {\n dfs(\n item as unknown as Record<string, unknown>,\n (node) => {\n checkedSet.value.delete(node as unknown as CascadeNode)\n },\n childrenKey\n )\n }\n\n triggerRef(checkedSet)\n\n updateMultipleValue()\n }\n\n function initMultipleCheck() {\n const { modelValue } = props\n getPanelItemList()\n if (Array.isArray(modelValue)) {\n checkedSet.value = new Set(modelValue.map((v) => dataMap.value.get(v)!))\n }\n }\n\n watch(\n [() => props.multiple, () => props.modelValue, forest],\n ([multiple]) => {\n if (!multiple \|\| isUserActive()) return\n initMultipleCheck()\n },\n { immediate: false }\n )\n\n return { hovered, tags, checkedSet, restTag, handleCloseTag, updateMultipleValue, checkItem }\n}\n"],"mappings":";;;AAkCA,SAAgB,SAAS,SAAyC;CAChE,MAAM,EAAE,OAAO,MAAM,SAAS,UAAU,UAAU,QAAQ,cAAc,qBACtE;CAEF,MAAM,UAAU,WAAW,KAAK;CAEhC,MAAM,aAAa,2BAAW,IAAI,IAAiB,CAAC;CAEpD,MAAM,OAAO,eAAe;EAC1B,MAAM,EAAE,YAAY,aAAa;EACjC,IAAI,OAAsB,CAAC;EAE3B,IAAI,CAAC,YAAY,CAAC,MAAM,QAAQ,UAAU,GAAG,OAAO;EAEpD,IAAI,EAAE,oBAAoB;EAC1B,IAAI,kBAAmB,GACrB,kBAAkB;EAIpB,IAAI,SAAS,SAAS,SAAS,OAC7B,kBAAkB,MAAM,YAAY,UAAU;EAGhD,WAAW,MAAM,GAAG,eAAe,CAAC,CAAC,SAAS,MAAM;GAClD,MAAM,SAAS,QAAQ,MAAM,IAAI,CAAC;GAClC,UAAU,KAAK,KAAK,MAAM;EAC5B,CAAC;EAED,OAAO;CACT,CAAC;CAED,SAAS,sBAAsB;EAC7B,MAAM,aAAa,MAAM,KAAK,WAAW,KAAK;EAC9C,MAAM,eAAe,WAAW,KAAK,SAAS,KAAK,KAAK;EACxD,MAAM,eAAe,WAAW,KAAK,SAAS,KAAK,KAAK;EACxD,MAAM,cAAc,WAAW,KAAK,SAAS,KAAK,~~IAA2B~~;~~EAC7E~~,KAAK,qBAAqB,YAAY;EACtC,KAAK,gBAAgB,aAAa,SAAS,eAAe,KAAA,CAAS;EACnE,KAAK,UAAU,~~WAAW~~;~~CAC5B~~;CAEA,MAAM,UAAU,eAAe;EAC7B,MAAM,EAAE,iBAAiB,eAAe;EAExC,OAAO,KAAK,KAAK,YAAY,UAAU,KAAK,iBAAkB,CAAC;CACjE,CAAC;CAED,SAAS,eAAe,KAAkB;EACxC,WAAW,MAAM,OAAO,GAAG;EAC3B,oBAAoB;CACtB;CAEA,SAAS,UAAU,MAAmB,SAAkB;EACtD,MAAM,cAAc,MAAM,eAAe;EACzC,IAAI,SACF,IACE,OACC,SAAS;GACR,WAAW,MAAM,IAAI,IAA8B;EACrD,GACA,WACF;OAEA,IACE,OACC,SAAS;GACR,WAAW,MAAM,OAAO,IAA8B;EACxD,GACA,WACF;EAGF,WAAW,UAAU;EAErB,oBAAoB;CACtB;CAEA,SAAS,oBAAoB;EAC3B,MAAM,EAAE,eAAe;EACvB,iBAAiB;EACjB,IAAI,MAAM,QAAQ,UAAU,GAC1B,WAAW,QAAQ,IAAI,IAAI,WAAW,KAAK,MAAM,QAAQ,MAAM,IAAI,CAAC,CAAE,CAAC;CAE3E;CAEA,MACE;QAAO,MAAM;QAAgB,MAAM;EAAY;CAAM,IACpD,CAAC,cAAc;EACd,IAAI,CAAC,YAAY,aAAa,GAAG;EACjC,kBAAkB;CACpB,GACA,EAAE,WAAW,MAAM,CACrB;CAEA,OAAO;EAAE;EAAS;EAAM;EAAY;EAAS;EAAgB;EAAqB;CAAU;AAC9F"}
1	+ {"version":3,"file":"use-check.js","names":[],"sources":["../../../src/components/cascade/use-check.ts"],"sourcesContent":["import { dfs, type Forest } from '@cat-kit/core'\nimport {\n computed,\n shallowRef,\n triggerRef,\n watch,\n type ComputedRef,\n type Ref,\n type ShallowRef\n} from 'vue'\n\nimport type { CascadeProps, CascadeEmits, CascadeNode } from '../../types'\n\ninterface CheckOptions {\n props: CascadeProps\n emit: CascadeEmits\n dataMap: ShallowRef<Map<string, CascadeNode>>\n disabled: Ref<boolean>\n readonly: Ref<boolean>\n forest: Ref<Forest<Record<string, unknown>, any>>\n isUserActive: () => boolean\n getPanelItemList: (data?: CascadeNode[]) => void\n}\n\ninterface UseCheckReturned {\n hovered: ShallowRef<boolean>\n tags: ComputedRef<CascadeNode[]>\n checkedSet: ShallowRef<Set<CascadeNode>>\n restTag: ComputedRef<number>\n handleCloseTag: (tag: CascadeNode) => void\n updateMultipleValue: () => void\n checkItem: (item: CascadeNode, checked: boolean) => void\n}\n\nexport function useCheck(options: CheckOptions): UseCheckReturned {\n const { props, emit, dataMap, disabled, readonly, forest, isUserActive, getPanelItemList } =\n options\n\n const hovered = shallowRef(false)\n\n const checkedSet = shallowRef(new Set<CascadeNode>())\n\n const tags = computed(() => {\n const { modelValue, multiple } = props\n let tags: CascadeNode[] = []\n\n if (!multiple \|\| !Array.isArray(modelValue)) return tags\n\n let { visibilityLimit } = props\n if (visibilityLimit! < 0) {\n visibilityLimit = 0\n }\n\n // 禁用时，显示全部\n if (disabled.value \|\| readonly.value) {\n visibilityLimit = props.modelValue?.length ?? 0\n }\n\n modelValue.slice(0, visibilityLimit).forEach((k) => {\n const option = dataMap.value.get(k)\n option && tags.push(option)\n })\n\n return tags\n })\n\n function updateMultipleValue() {\n const checkedArr = Array.from(checkedSet.value)\n const targetValues = checkedArr.map((item) => item.value)\n const targetLabels = checkedArr.map((item) => item.label)\n const targetItems = checkedArr.map((item) => {\n const data = item.data as Record<string, any>\n return data ? Object.assign({}, data, { fullLabel: item.label }) : data\n })\n emit('update:modelValue', targetValues)\n emit('update:label', targetLabels.length ? targetLabels : undefined)\n emit('change', targetItems, targetLabels.length ? targetLabels : undefined)\n }\n\n const restTag = computed(() => {\n const { visibilityLimit, modelValue } = props\n\n return Math.max((modelValue?.length ?? 0) - visibilityLimit!, 0)\n })\n\n function handleCloseTag(tag: CascadeNode) {\n checkedSet.value.delete(tag)\n updateMultipleValue()\n }\n\n function checkItem(item: CascadeNode, checked: boolean) {\n const childrenKey = props.childrenKey ?? 'children'\n if (checked) {\n dfs(\n item as unknown as Record<string, unknown>,\n (node) => {\n checkedSet.value.add(node as unknown as CascadeNode)\n },\n childrenKey\n )\n } else {\n dfs(\n item as unknown as Record<string, unknown>,\n (node) => {\n checkedSet.value.delete(node as unknown as CascadeNode)\n },\n childrenKey\n )\n }\n\n triggerRef(checkedSet)\n\n updateMultipleValue()\n }\n\n function initMultipleCheck() {\n const { modelValue } = props\n getPanelItemList()\n if (Array.isArray(modelValue)) {\n checkedSet.value = new Set(modelValue.map((v) => dataMap.value.get(v)!))\n }\n }\n\n watch(\n [() => props.multiple, () => props.modelValue, forest],\n ([multiple]) => {\n if (!multiple \|\| isUserActive()) return\n initMultipleCheck()\n },\n { immediate: false }\n )\n\n return { hovered, tags, checkedSet, restTag, handleCloseTag, updateMultipleValue, checkItem }\n}\n"],"mappings":";;;AAkCA,SAAgB,SAAS,SAAyC;CAChE,MAAM,EAAE,OAAO,MAAM,SAAS,UAAU,UAAU,QAAQ,cAAc,qBACtE;CAEF,MAAM,UAAU,WAAW,KAAK;CAEhC,MAAM,aAAa,2BAAW,IAAI,IAAiB,CAAC;CAEpD,MAAM,OAAO,eAAe;EAC1B,MAAM,EAAE,YAAY,aAAa;EACjC,IAAI,OAAsB,CAAC;EAE3B,IAAI,CAAC,YAAY,CAAC,MAAM,QAAQ,UAAU,GAAG,OAAO;EAEpD,IAAI,EAAE,oBAAoB;EAC1B,IAAI,kBAAmB,GACrB,kBAAkB;EAIpB,IAAI,SAAS,SAAS,SAAS,OAC7B,kBAAkB,MAAM,YAAY,UAAU;EAGhD,WAAW,MAAM,GAAG,eAAe,CAAC,CAAC,SAAS,MAAM;GAClD,MAAM,SAAS,QAAQ,MAAM,IAAI,CAAC;GAClC,UAAU,KAAK,KAAK,MAAM;EAC5B,CAAC;EAED,OAAO;CACT,CAAC;CAED,SAAS,sBAAsB;EAC7B,MAAM,aAAa,MAAM,KAAK,WAAW,KAAK;EAC9C,MAAM,eAAe,WAAW,KAAK,SAAS,KAAK,KAAK;EACxD,MAAM,eAAe,WAAW,KAAK,SAAS,KAAK,KAAK;EACxD,MAAM,cAAc,WAAW,KAAK,SAAS;GAC3C,MAAM,OAAO,KAAK;GAClB,OAAO,OAAO,OAAO,OAAO,CAAC,GAAG,MAAM,EAAE,WAAW,KAAK,MAAM,CAAC,IAAI;EACrE,CAAC;EACD,KAAK,qBAAqB,YAAY;EACtC,KAAK,gBAAgB,aAAa,SAAS,eAAe,KAAA,CAAS;EACnE,KAAK,UAAU,aAAa,aAAa,SAAS,eAAe,KAAA,CAAS;CAC5E;CAEA,MAAM,UAAU,eAAe;EAC7B,MAAM,EAAE,iBAAiB,eAAe;EAExC,OAAO,KAAK,KAAK,YAAY,UAAU,KAAK,iBAAkB,CAAC;CACjE,CAAC;CAED,SAAS,eAAe,KAAkB;EACxC,WAAW,MAAM,OAAO,GAAG;EAC3B,oBAAoB;CACtB;CAEA,SAAS,UAAU,MAAmB,SAAkB;EACtD,MAAM,cAAc,MAAM,eAAe;EACzC,IAAI,SACF,IACE,OACC,SAAS;GACR,WAAW,MAAM,IAAI,IAA8B;EACrD,GACA,WACF;OAEA,IACE,OACC,SAAS;GACR,WAAW,MAAM,OAAO,IAA8B;EACxD,GACA,WACF;EAGF,WAAW,UAAU;EAErB,oBAAoB;CACtB;CAEA,SAAS,oBAAoB;EAC3B,MAAM,EAAE,eAAe;EACvB,iBAAiB;EACjB,IAAI,MAAM,QAAQ,UAAU,GAC1B,WAAW,QAAQ,IAAI,IAAI,WAAW,KAAK,MAAM,QAAQ,MAAM,IAAI,CAAC,CAAE,CAAC;CAE3E;CAEA,MACE;QAAO,MAAM;QAAgB,MAAM;EAAY;CAAM,IACpD,CAAC,cAAc;EACd,IAAI,CAAC,YAAY,aAAa,GAAG;EACjC,kBAAkB;CACpB,GACA,EAAE,WAAW,MAAM,CACrB;CAEA,OAAO;EAAE;EAAS;EAAM;EAAY;EAAS;EAAgB;EAAqB;CAAU;AAC9F"}

package/dist/components/cascade/use-select.js CHANGED Viewed

@@ -55,9 +55,13 @@ function useSelect(options) {
 		const targetValue = showFullPath ? keys.length ? keys.join(separator) : void 0 : leafKey;
 		const targetLabel = showFullPath ? keys.map((key) => dataMap.value.get(key)?.label).filter(Boolean).join(separator) : leafLabel;
 		const leafNode = leafKey ? dataMap.value.get(leafKey) : void 0;
+		const changeItem = leafNode?.data ? {
+			...leafNode.data,
+			fullLabel: targetLabel
+		} : void 0;
 		emit("update:modelValue", targetValue);
 		emit("update:label", targetLabel);
-		emit("change", leafNode?.data);
+		emit("change", changeItem, targetLabel);
 	}
 	/**
 	* 单选选择

package/dist/components/cascade/use-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-select.js","names":[],"sources":["../../../src/components/cascade/use-select.ts"],"sourcesContent":["import { Forest } from '@cat-kit/core'\nimport { createIncrease } from '@veltra/utils'\nimport {\n computed,\n nextTick,\n shallowRef,\n triggerRef,\n watch,\n type ComputedRef,\n type Ref,\n type ShallowRef\n} from 'vue'\n\nimport type {\n CascadeProps,\n CascadeEmits,\n CascadeNode,\n DropdownExposed,\n PanelItem\n} from '../../types'\n\ninterface SelectOptions {\n props: CascadeProps\n emit: CascadeEmits\n isUserActive: () => boolean\n forest: Ref<Forest<Record<string, unknown>, any>>\n dataMap: Ref<Map<string, CascadeNode>>\n dropdownRef: Ref<DropdownExposed \| undefined>\n}\n\nfunction buildPathKeys(leaf: CascadeNode): string[] {\n const keys: string[] = []\n let node: CascadeNode \| undefined = leaf\n while (node) {\n keys.unshift(node.value)\n node = node.parent\n }\n return keys\n}\n\ninterface UseSelectReturned {\n displayedValue: ComputedRef<string \| undefined>\n selectItem: (panelIndex: number, item: CascadeNode) => void\n selectedNodeKeys: ShallowRef<string[]>\n updateSingleValue: () => void\n initSingleSelect: () => void\n panelItemList: ShallowRef<PanelItem[]>\n getPanelItemList: (data?: CascadeNode[]) => void\n setPanelItem: (panelIndex: number, panelData?: CascadeNode[]) => void\n createPanelItem: (nodes: CascadeNode[]) => PanelItem\n}\n\nexport function useSelect(options: SelectOptions): UseSelectReturned {\n const { props, emit, dataMap, isUserActive, dropdownRef, forest } = options\n\n /** 选中的节点key /\n const selectedNodeKeys = shallowRef<string[]>([])\n\n /* 面板数据 /\n const panelItemList = shallowRef<PanelItem[]>([])\n const uid = createIncrease()\n function createPanelItem(nodes: CascadeNode[]): PanelItem {\n return { key: uid(), nodes: nodes.filter((node) => node.visible) }\n }\n\n const displayedValue = computed(() => {\n const { modelValue, separator, showFullPath } = props\n if (!modelValue \|\| typeof modelValue !== 'string') return ''\n\n if (showFullPath) {\n return modelValue\n .split(separator!)\n .map((v) => dataMap.value.get(v)?.label ?? v)\n .join(separator)\n }\n return dataMap.value.get(modelValue)?.label ?? modelValue\n })\n\n function getPanelItemList(data?: CascadeNode[]) {\n const _panelItemList: Array<PanelItem> = []\n if (!data?.length) return panelItemList\n _panelItemList.push(createPanelItem(data))\n\n selectedNodeKeys.value.slice(0, -1).forEach((key) => {\n const node = dataMap.value.get(key)\n node?.children?.length && _panelItemList.push(createPanelItem(node.children))\n })\n\n panelItemList.value = _panelItemList\n }\n\n function setPanelItem(panelIndex: number, panelData?: CascadeNode[]) {\n if (panelData?.length) {\n panelItemList.value[panelIndex + 1] = createPanelItem(panelData)\n panelItemList.value.splice(panelIndex + 2)\n } else {\n panelItemList.value.splice(panelIndex + 1)\n }\n\n triggerRef(panelItemList)\n }\n\n function updateSingleValue() {\n const { separator, showFullPath } = props\n const keys = selectedNodeKeys.value\n const leafKey = keys.length ? keys[keys.length - 1] : undefined\n const leafLabel = leafKey ? dataMap.value.get(leafKey)?.label : undefined\n\n const targetValue = showFullPath ? (keys.length ? keys.join(separator!) : undefined) : leafKey\n const targetLabel = showFullPath\n ? keys\n .map((key) => dataMap.value.get(key)?.label)\n .filter(Boolean)\n .join(separator!)\n : leafLabel\n\n const leafNode = leafKey ? dataMap.value.get(leafKey) : undefined\n\n emit('update:modelValue', targetValue)\n emit('update:label', targetLabel)\n emit('change', ~~leafNode?.data as Record<string~~, ~~any> \| undefined~~)\n }\n\n /\n 单选选择\n \n @param panelIndex 面板索引\n * @param item 选中的节点\n */\n function selectItem(panelIndex: number, item: CascadeNode) {\n // 设置选中的节点\n selectedNodeKeys.value[panelIndex] = item.value\n selectedNodeKeys.value.splice(panelIndex + 1)\n triggerRef(selectedNodeKeys)\n\n // 展开子级面板\n setPanelItem(panelIndex, item.children)\n\n nextTick(() => {\n dropdownRef.value?.updateDropdown()\n })\n\n if (!item.children?.length && !props.multiple) {\n dropdownRef.value?.close()\n }\n }\n\n function initSingleSelect() {\n const { modelValue, separator, showFullPath } = props\n\n if (modelValue && typeof modelValue === 'string') {\n let keys: string[]\n if (showFullPath) {\n keys = modelValue.split(separator!)\n } else {\n const leaf = dataMap.value.get(modelValue)\n keys = leaf ? buildPathKeys(leaf) : [modelValue]\n }\n selectedNodeKeys.value = keys\n getPanelItemList(forest.value.roots)\n } else {\n selectedNodeKeys.value = []\n getPanelItemList(forest.value.roots)\n }\n }\n\n watch(\n [() => props.multiple, () => props.modelValue, forest],\n ([multiple]) => {\n if (multiple \|\| isUserActive()) return\n initSingleSelect()\n },\n { immediate: true }\n )\n\n return {\n displayedValue,\n selectItem,\n selectedNodeKeys,\n updateSingleValue,\n initSingleSelect,\n panelItemList,\n getPanelItemList,\n setPanelItem,\n createPanelItem\n }\n}\n"],"mappings":";;;;AA8BA,SAAS,cAAc,MAA6B;CAClD,MAAM,OAAiB,CAAC;CACxB,IAAI,OAAgC;CACpC,OAAO,MAAM;EACX,KAAK,QAAQ,KAAK,KAAK;EACvB,OAAO,KAAK;CACd;CACA,OAAO;AACT;AAcA,SAAgB,UAAU,SAA2C;CACnE,MAAM,EAAE,OAAO,MAAM,SAAS,cAAc,aAAa,WAAW;;CAGpE,MAAM,mBAAmB,WAAqB,CAAC,CAAC;;CAGhD,MAAM,gBAAgB,WAAwB,CAAC,CAAC;CAChD,MAAM,MAAM,eAAe;CAC3B,SAAS,gBAAgB,OAAiC;EACxD,OAAO;GAAE,KAAK,IAAI;GAAG,OAAO,MAAM,QAAQ,SAAS,KAAK,OAAO;EAAE;CACnE;CAEA,MAAM,iBAAiB,eAAe;EACpC,MAAM,EAAE,YAAY,WAAW,iBAAiB;EAChD,IAAI,CAAC,cAAc,OAAO,eAAe,UAAU,OAAO;EAE1D,IAAI,cACF,OAAO,WACJ,MAAM,SAAU,CAAC,CACjB,KAAK,MAAM,QAAQ,MAAM,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAC5C,KAAK,SAAS;EAEnB,OAAO,QAAQ,MAAM,IAAI,UAAU,CAAC,EAAE,SAAS;CACjD,CAAC;CAED,SAAS,iBAAiB,MAAsB;EAC9C,MAAM,iBAAmC,CAAC;EAC1C,IAAI,CAAC,MAAM,QAAQ,OAAO;EAC1B,eAAe,KAAK,gBAAgB,IAAI,CAAC;EAEzC,iBAAiB,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,QAAQ;GACnD,MAAM,OAAO,QAAQ,MAAM,IAAI,GAAG;GAClC,MAAM,UAAU,UAAU,eAAe,KAAK,gBAAgB,KAAK,QAAQ,CAAC;EAC9E,CAAC;EAED,cAAc,QAAQ;CACxB;CAEA,SAAS,aAAa,YAAoB,WAA2B;EACnE,IAAI,WAAW,QAAQ;GACrB,cAAc,MAAM,aAAa,KAAK,gBAAgB,SAAS;GAC/D,cAAc,MAAM,OAAO,aAAa,CAAC;EAC3C,OACE,cAAc,MAAM,OAAO,aAAa,CAAC;EAG3C,WAAW,aAAa;CAC1B;CAEA,SAAS,oBAAoB;EAC3B,MAAM,EAAE,WAAW,iBAAiB;EACpC,MAAM,OAAO,iBAAiB;EAC9B,MAAM,UAAU,KAAK,SAAS,KAAK,KAAK,SAAS,KAAK,KAAA;EACtD,MAAM,YAAY,UAAU,QAAQ,MAAM,IAAI,OAAO,CAAC,EAAE,QAAQ,KAAA;EAEhE,MAAM,cAAc,eAAgB,KAAK,SAAS,KAAK,KAAK,SAAU,IAAI,KAAA,IAAa;EACvF,MAAM,cAAc,eAChB,KACG,KAAK,QAAQ,QAAQ,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,CAAC,CAC3C,OAAO,OAAO,CAAC,CACf,KAAK,SAAU,IAClB;EAEJ,MAAM,WAAW,UAAU,QAAQ,MAAM,IAAI,OAAO,IAAI,KAAA;~~EAExD~~,KAAK,qBAAqB,WAAW;EACrC,KAAK,gBAAgB,WAAW;EAChC,KAAK,UAAU,~~UAAU~~,~~IAAuC~~;~~CAClE~~;;;;;;;CAQA,SAAS,WAAW,YAAoB,MAAmB;EAEzD,iBAAiB,MAAM,cAAc,KAAK;EAC1C,iBAAiB,MAAM,OAAO,aAAa,CAAC;EAC5C,WAAW,gBAAgB;EAG3B,aAAa,YAAY,KAAK,QAAQ;EAEtC,eAAe;GACb,YAAY,OAAO,eAAe;EACpC,CAAC;EAED,IAAI,CAAC,KAAK,UAAU,UAAU,CAAC,MAAM,UACnC,YAAY,OAAO,MAAM;CAE7B;CAEA,SAAS,mBAAmB;EAC1B,MAAM,EAAE,YAAY,WAAW,iBAAiB;EAEhD,IAAI,cAAc,OAAO,eAAe,UAAU;GAChD,IAAI;GACJ,IAAI,cACF,OAAO,WAAW,MAAM,SAAU;QAC7B;IACL,MAAM,OAAO,QAAQ,MAAM,IAAI,UAAU;IACzC,OAAO,OAAO,cAAc,IAAI,IAAI,CAAC,UAAU;GACjD;GACA,iBAAiB,QAAQ;GACzB,iBAAiB,OAAO,MAAM,KAAK;EACrC,OAAO;GACL,iBAAiB,QAAQ,CAAC;GAC1B,iBAAiB,OAAO,MAAM,KAAK;EACrC;CACF;CAEA,MACE;QAAO,MAAM;QAAgB,MAAM;EAAY;CAAM,IACpD,CAAC,cAAc;EACd,IAAI,YAAY,aAAa,GAAG;EAChC,iBAAiB;CACnB,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
1	+ {"version":3,"file":"use-select.js","names":[],"sources":["../../../src/components/cascade/use-select.ts"],"sourcesContent":["import { Forest } from '@cat-kit/core'\nimport { createIncrease } from '@veltra/utils'\nimport {\n computed,\n nextTick,\n shallowRef,\n triggerRef,\n watch,\n type ComputedRef,\n type Ref,\n type ShallowRef\n} from 'vue'\n\nimport type {\n CascadeProps,\n CascadeEmits,\n CascadeNode,\n DropdownExposed,\n PanelItem\n} from '../../types'\n\ninterface SelectOptions {\n props: CascadeProps\n emit: CascadeEmits\n isUserActive: () => boolean\n forest: Ref<Forest<Record<string, unknown>, any>>\n dataMap: Ref<Map<string, CascadeNode>>\n dropdownRef: Ref<DropdownExposed \| undefined>\n}\n\nfunction buildPathKeys(leaf: CascadeNode): string[] {\n const keys: string[] = []\n let node: CascadeNode \| undefined = leaf\n while (node) {\n keys.unshift(node.value)\n node = node.parent\n }\n return keys\n}\n\ninterface UseSelectReturned {\n displayedValue: ComputedRef<string \| undefined>\n selectItem: (panelIndex: number, item: CascadeNode) => void\n selectedNodeKeys: ShallowRef<string[]>\n updateSingleValue: () => void\n initSingleSelect: () => void\n panelItemList: ShallowRef<PanelItem[]>\n getPanelItemList: (data?: CascadeNode[]) => void\n setPanelItem: (panelIndex: number, panelData?: CascadeNode[]) => void\n createPanelItem: (nodes: CascadeNode[]) => PanelItem\n}\n\nexport function useSelect(options: SelectOptions): UseSelectReturned {\n const { props, emit, dataMap, isUserActive, dropdownRef, forest } = options\n\n /** 选中的节点key /\n const selectedNodeKeys = shallowRef<string[]>([])\n\n /* 面板数据 /\n const panelItemList = shallowRef<PanelItem[]>([])\n const uid = createIncrease()\n function createPanelItem(nodes: CascadeNode[]): PanelItem {\n return { key: uid(), nodes: nodes.filter((node) => node.visible) }\n }\n\n const displayedValue = computed(() => {\n const { modelValue, separator, showFullPath } = props\n if (!modelValue \|\| typeof modelValue !== 'string') return ''\n\n if (showFullPath) {\n return modelValue\n .split(separator!)\n .map((v) => dataMap.value.get(v)?.label ?? v)\n .join(separator)\n }\n return dataMap.value.get(modelValue)?.label ?? modelValue\n })\n\n function getPanelItemList(data?: CascadeNode[]) {\n const _panelItemList: Array<PanelItem> = []\n if (!data?.length) return panelItemList\n _panelItemList.push(createPanelItem(data))\n\n selectedNodeKeys.value.slice(0, -1).forEach((key) => {\n const node = dataMap.value.get(key)\n node?.children?.length && _panelItemList.push(createPanelItem(node.children))\n })\n\n panelItemList.value = _panelItemList\n }\n\n function setPanelItem(panelIndex: number, panelData?: CascadeNode[]) {\n if (panelData?.length) {\n panelItemList.value[panelIndex + 1] = createPanelItem(panelData)\n panelItemList.value.splice(panelIndex + 2)\n } else {\n panelItemList.value.splice(panelIndex + 1)\n }\n\n triggerRef(panelItemList)\n }\n\n function updateSingleValue() {\n const { separator, showFullPath } = props\n const keys = selectedNodeKeys.value\n const leafKey = keys.length ? keys[keys.length - 1] : undefined\n const leafLabel = leafKey ? dataMap.value.get(leafKey)?.label : undefined\n\n const targetValue = showFullPath ? (keys.length ? keys.join(separator!) : undefined) : leafKey\n const targetLabel = showFullPath\n ? keys\n .map((key) => dataMap.value.get(key)?.label)\n .filter(Boolean)\n .join(separator!)\n : leafLabel\n\n const leafNode = leafKey ? dataMap.value.get(leafKey) : undefined\n const changeItem = leafNode?.data ? { ...leafNode.data, fullLabel: targetLabel } : undefined\n\n emit('update:modelValue', targetValue)\n emit('update:label', targetLabel)\n emit('change', changeItem, targetLabel)\n }\n\n /\n 单选选择\n \n @param panelIndex 面板索引\n * @param item 选中的节点\n */\n function selectItem(panelIndex: number, item: CascadeNode) {\n // 设置选中的节点\n selectedNodeKeys.value[panelIndex] = item.value\n selectedNodeKeys.value.splice(panelIndex + 1)\n triggerRef(selectedNodeKeys)\n\n // 展开子级面板\n setPanelItem(panelIndex, item.children)\n\n nextTick(() => {\n dropdownRef.value?.updateDropdown()\n })\n\n if (!item.children?.length && !props.multiple) {\n dropdownRef.value?.close()\n }\n }\n\n function initSingleSelect() {\n const { modelValue, separator, showFullPath } = props\n\n if (modelValue && typeof modelValue === 'string') {\n let keys: string[]\n if (showFullPath) {\n keys = modelValue.split(separator!)\n } else {\n const leaf = dataMap.value.get(modelValue)\n keys = leaf ? buildPathKeys(leaf) : [modelValue]\n }\n selectedNodeKeys.value = keys\n getPanelItemList(forest.value.roots)\n } else {\n selectedNodeKeys.value = []\n getPanelItemList(forest.value.roots)\n }\n }\n\n watch(\n [() => props.multiple, () => props.modelValue, forest],\n ([multiple]) => {\n if (multiple \|\| isUserActive()) return\n initSingleSelect()\n },\n { immediate: true }\n )\n\n return {\n displayedValue,\n selectItem,\n selectedNodeKeys,\n updateSingleValue,\n initSingleSelect,\n panelItemList,\n getPanelItemList,\n setPanelItem,\n createPanelItem\n }\n}\n"],"mappings":"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"}

package/dist/components/code-editor/langs/bash/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { LanguageSupport, StreamLanguage } from "../../../../node_modules/.bun/@codemirror_language@6.12.4/node_modules/@codemirror/language/dist/index.js";
-import { shell } from "../../../../node_modules/.bun/@codemirror_legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/shell.js";
+import { shell } from "../../../../node_modules/.bun/@codemirror_legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/shell.js";
 //#region src/components/code-editor/langs/bash/index.ts
 /** Bash / shell 脚本语言支持（基于 CodeMirror legacy shell mode） */
 function bash() {

package/dist/components/code-editor/langs/powershell/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { LanguageSupport, StreamLanguage } from "../../../../node_modules/.bun/@codemirror_language@6.12.4/node_modules/@codemirror/language/dist/index.js";
-import { powerShell } from "../../../../node_modules/.bun/@codemirror_legacy-modes@6.5.3/node_modules/@codemirror/legacy-modes/mode/powershell.js";
+import { powerShell } from "../../../../node_modules/.bun/@codemirror_legacy-modes@6.5.4/node_modules/@codemirror/legacy-modes/mode/powershell.js";
 //#region src/components/code-editor/langs/powershell/index.ts
 /** PowerShell 语言支持（基于 CodeMirror legacy powershell mode） */
 function powershell() {

package/dist/components/image-cropper/draw-crop.js ADDED Viewed

@@ -0,0 +1,63 @@
+//#region src/components/image-cropper/draw-crop.ts
+/**
+* 把选区按当前旋转 / 翻转变换绘制到目标 canvas，预览（P4）与 getResult()（P5）共用。
+* 输出为屏幕上看到的裁剪结果：先旋转后翻转，与舞台 transform 链一致
+*/
+function drawCropToCanvas(img, selection, transform, canvas, outSize) {
+	const { rotation, flipX, flipY } = transform;
+	const swapped = rotation % 180 !== 0;
+	const baseW = swapped ? selection.height : selection.width;
+	const baseH = swapped ? selection.width : selection.height;
+	const outW = Math.max(1, Math.round(outSize?.width ?? (outSize?.height ?? baseH) / baseH * baseW));
+	const outH = Math.max(1, Math.round(outSize?.height ?? (outSize?.width ?? baseW) / baseW * baseH));
+	canvas.width = outW;
+	canvas.height = outH;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return;
+	ctx.translate(outW / 2, outH / 2);
+	ctx.rotate(rotation * Math.PI / 180);
+	ctx.scale((flipX ? -1 : 1) * outW / baseW, (flipY ? -1 : 1) * outH / baseH);
+	ctx.drawImage(img, selection.x, selection.y, selection.width, selection.height, -selection.width / 2, -selection.height / 2, selection.width, selection.height);
+}
+/**
+* canvas 导出为 Blob。
+* 跨域图片污染画布时 toBlob 同步抛 SecurityError，包装为可捕获的 Promise 拒绝
+*/
+function canvasToBlob(canvas) {
+	return new Promise((resolve, reject) => {
+		try {
+			canvas.toBlob((blob) => {
+				if (blob) resolve(blob);
+				else reject(/* @__PURE__ */ new Error("Export crop result failed: canvas.toBlob got null"));
+			}, "image/png");
+		} catch (err) {
+			reject(new Error("Export crop result failed: canvas is tainted by cross-origin image", { cause: err }));
+		}
+	});
+}
+/** Blob 读取为 dataURL 形式的 base64 */
+function blobToBase64(blob) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(reader.result);
+		reader.onerror = () => reject(reader.error ?? /* @__PURE__ */ new Error("Export crop result failed: read blob as base64 failed"));
+		reader.readAsDataURL(blob);
+	});
+}
+/**
+* 输出选区裁剪结果：离屏 canvas 经 drawCropToCanvas 按原图像素绘制后导出 Blob + base64。
+* outSize 缺省为原图选区像素尺寸，传入则按该尺寸缩放输出
+*/
+async function cropToResult(img, selection, transform, outSize) {
+	const canvas = document.createElement("canvas");
+	drawCropToCanvas(img, selection, transform, canvas, outSize);
+	const blob = await canvasToBlob(canvas);
+	return {
+		blob,
+		base64: await blobToBase64(blob)
+	};
+}
+//#endregion
+export { cropToResult, drawCropToCanvas };
+//# sourceMappingURL=draw-crop.js.map

package/dist/components/image-cropper/draw-crop.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"draw-crop.js","names":[],"sources":["../../../src/components/image-cropper/draw-crop.ts"],"sourcesContent":["import type { ImageCropperResult } from '../../types'\nimport type { SelectionRect } from './use-selection'\n\n/** 影响裁剪输出的变换（缩放 / 平移只影响画布展示，与输出无关） */\nexport interface CropTransform {\n /** 90° 步进角度：0 / 90 / 180 / 270 */\n rotation: number\n flipX: boolean\n flipY: boolean\n}\n\n/** 输出尺寸，缺省维度按选区比例推算，都不传则为原图选区像素尺寸 */\nexport interface CropOutputSize {\n width?: number\n height?: number\n}\n\n/**\n * 把选区按当前旋转 / 翻转变换绘制到目标 canvas，预览（P4）与 getResult()（P5）共用。\n * 输出为屏幕上看到的裁剪结果：先旋转后翻转，与舞台 transform 链一致\n */\nexport function drawCropToCanvas(\n img: HTMLImageElement,\n selection: SelectionRect,\n transform: CropTransform,\n canvas: HTMLCanvasElement,\n outSize?: CropOutputSize\n): void {\n const { rotation, flipX, flipY } = transform\n // 旋转 90° / 270° 后输出的宽为选区高、高为选区宽\n const swapped = rotation % 180 !== 0\n const baseW = swapped ? selection.height : selection.width\n const baseH = swapped ? selection.width : selection.height\n\n const outW = Math.max(\n 1,\n Math.round(outSize?.width ?? ((outSize?.height ?? baseH) / baseH) * baseW)\n )\n const outH = Math.max(\n 1,\n Math.round(outSize?.height ?? ((outSize?.width ?? baseW) / baseW) * baseH)\n )\n canvas.width = outW\n canvas.height = outH\n\n const ctx = canvas.getContext('2d')\n if (!ctx) return\n\n ctx.translate(outW / 2, outH / 2)\n ctx.rotate((rotation * Math.PI) / 180)\n ctx.scale(((flipX ? -1 : 1) * outW) / baseW, ((flipY ? -1 : 1) * outH) / baseH)\n // 以画布中心为锚绘制选区，旋转 / 翻转由上面的变换承担\n ctx.drawImage(\n img,\n selection.x,\n selection.y,\n selection.width,\n selection.height,\n -selection.width / 2,\n -selection.height / 2,\n selection.width,\n selection.height\n )\n}\n\n/**\n * canvas 导出为 Blob。\n * 跨域图片污染画布时 toBlob 同步抛 SecurityError，包装为可捕获的 Promise 拒绝\n */\nfunction canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {\n return new Promise((resolve, reject) => {\n try {\n canvas.toBlob((blob) => {\n if (blob) resolve(blob)\n else reject(new Error('Export crop result failed: canvas.toBlob got null'))\n }, 'image/png')\n } catch (err) {\n reject(\n new Error('Export crop result failed: canvas is tainted by cross-origin image', {\n cause: err\n })\n )\n }\n })\n}\n\n/** Blob 读取为 dataURL 形式的 base64 */\nfunction blobToBase64(blob: Blob): Promise<string> {\n return new Promise((resolve, reject) => {\n const reader = new FileReader()\n reader.onload = () => resolve(reader.result as string)\n reader.onerror = () =>\n reject(reader.error ?? new Error('Export crop result failed: read blob as base64 failed'))\n reader.readAsDataURL(blob)\n })\n}\n\n/**\n * 输出选区裁剪结果：离屏 canvas 经 drawCropToCanvas 按原图像素绘制后导出 Blob + base64。\n * outSize 缺省为原图选区像素尺寸，传入则按该尺寸缩放输出\n */\nexport async function cropToResult(\n img: HTMLImageElement,\n selection: SelectionRect,\n transform: CropTransform,\n outSize?: CropOutputSize\n): Promise<ImageCropperResult> {\n const canvas = document.createElement('canvas')\n drawCropToCanvas(img, selection, transform, canvas, outSize)\n const blob = await canvasToBlob(canvas)\n return { blob, base64: await blobToBase64(blob) }\n}\n"],"mappings":";;;;;AAqBA,SAAgB,iBACd,KACA,WACA,WACA,QACA,SACM;CACN,MAAM,EAAE,UAAU,OAAO,UAAU;CAEnC,MAAM,UAAU,WAAW,QAAQ;CACnC,MAAM,QAAQ,UAAU,UAAU,SAAS,UAAU;CACrD,MAAM,QAAQ,UAAU,UAAU,QAAQ,UAAU;CAEpD,MAAM,OAAO,KAAK,IAChB,GACA,KAAK,MAAM,SAAS,UAAW,SAAS,UAAU,SAAS,QAAS,KAAK,CAC3E;CACA,MAAM,OAAO,KAAK,IAChB,GACA,KAAK,MAAM,SAAS,WAAY,SAAS,SAAS,SAAS,QAAS,KAAK,CAC3E;CACA,OAAO,QAAQ;CACf,OAAO,SAAS;CAEhB,MAAM,MAAM,OAAO,WAAW,IAAI;CAClC,IAAI,CAAC,KAAK;CAEV,IAAI,UAAU,OAAO,GAAG,OAAO,CAAC;CAChC,IAAI,OAAQ,WAAW,KAAK,KAAM,GAAG;CACrC,IAAI,OAAQ,QAAQ,KAAK,KAAK,OAAQ,QAAS,QAAQ,KAAK,KAAK,OAAQ,KAAK;CAE9E,IAAI,UACF,KACA,UAAU,GACV,UAAU,GACV,UAAU,OACV,UAAU,QACV,CAAC,UAAU,QAAQ,GACnB,CAAC,UAAU,SAAS,GACpB,UAAU,OACV,UAAU,MACZ;AACF;;;;;AAMA,SAAS,aAAa,QAA0C;CAC9D,OAAO,IAAI,SAAS,SAAS,WAAW;EACtC,IAAI;GACF,OAAO,QAAQ,SAAS;IACtB,IAAI,MAAM,QAAQ,IAAI;SACjB,uBAAO,IAAI,MAAM,mDAAmD,CAAC;GAC5E,GAAG,WAAW;EAChB,SAAS,KAAK;GACZ,OACE,IAAI,MAAM,sEAAsE,EAC9E,OAAO,IACT,CAAC,CACH;EACF;CACF,CAAC;AACH;;AAGA,SAAS,aAAa,MAA6B;CACjD,OAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,SAAS,IAAI,WAAW;EAC9B,OAAO,eAAe,QAAQ,OAAO,MAAgB;EACrD,OAAO,gBACL,OAAO,OAAO,yBAAS,IAAI,MAAM,uDAAuD,CAAC;EAC3F,OAAO,cAAc,IAAI;CAC3B,CAAC;AACH;;;;;AAMA,eAAsB,aACpB,KACA,WACA,WACA,SAC6B;CAC7B,MAAM,SAAS,SAAS,cAAc,QAAQ;CAC9C,iBAAiB,KAAK,WAAW,WAAW,QAAQ,OAAO;CAC3D,MAAM,OAAO,MAAM,aAAa,MAAM;CACtC,OAAO;EAAE;EAAM,QAAQ,MAAM,aAAa,IAAI;CAAE;AAClD"}

package/dist/components/image-cropper/image-cropper.js ADDED Viewed

@@ -0,0 +1,344 @@
+import _sfc_main$1 from "../icon/icon.js";
+import { cropToResult } from "./draw-crop.js";
+import { useImageLoader } from "./use-image-loader.js";
+import { usePreview } from "./use-preview.js";
+import { SELECTION_HANDLES, useSelection } from "./use-selection.js";
+import { useTransform } from "./use-transform.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, reactive, renderList, renderSlot, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { useResizeObserver } from "@veltra/compositions";
+import { bem } from "@veltra/utils";
+import { ArrowUpdown, Refresh, RotateLeft, RotateRight, ZoomIn, ZoomOut } from "@veltra/icons/normal";
+//#region src/components/image-cropper/image-cropper.vue
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["src"];
+const _hoisted_3 = ["data-handle"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "ImageCropper",
+	__name: "image-cropper",
+	props: {
+		src: {},
+		aspectRatio: {},
+		showToolbar: {
+			type: Boolean,
+			default: true
+		},
+		showPreview: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["crop-change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const cls = bem("image-cropper");
+		const canvasRef = shallowRef();
+		const selectionRef = shallowRef();
+		const previewCanvasRef = shallowRef();
+		const { imageUrl, loaded, naturalWidth, naturalHeight, imageEl } = useImageLoader({ src: () => props.src });
+		const canvasSize = reactive({
+			width: 0,
+			height: 0
+		});
+		/** 宽高比预设，value 为 undefined 表示自由比例 */
+		const RATIO_PRESETS = [
+			{
+				label: "自由",
+				value: void 0
+			},
+			{
+				label: "1:1",
+				value: 1
+			},
+			{
+				label: "4:3",
+				value: 4 / 3
+			},
+			{
+				label: "16:9",
+				value: 16 / 9
+			}
+		];
+		/** 当前生效的宽高比：工具栏预设可覆盖 prop，prop 变化时同步回来 */
+		const currentRatio = shallowRef(props.aspectRatio);
+		function setAspectRatio(ratio) {
+			currentRatio.value = ratio;
+		}
+		const { transform, fit, reset, resetTransform, zoomIn, zoomOut, rotate, flip, toImageDelta } = useTransform({
+			target: canvasRef,
+			canvasSize: () => canvasSize,
+			imageWidth: () => naturalWidth.value,
+			imageHeight: () => naturalHeight.value,
+			onReset: () => initSelection()
+		});
+		const { selection, initSelection, clearSelection } = useSelection({
+			target: selectionRef,
+			imageWidth: () => naturalWidth.value,
+			imageHeight: () => naturalHeight.value,
+			toImageDelta,
+			aspectRatio: () => currentRatio.value
+		});
+		usePreview({
+			canvas: previewCanvasRef,
+			image: imageEl,
+			selection,
+			transform,
+			canvasSize: () => canvasSize
+		});
+		useResizeObserver({
+			targets: canvasRef,
+			onResize([entry]) {
+				if (!entry) return;
+				canvasSize.width = entry.contentRect.width;
+				canvasSize.height = entry.contentRect.height;
+				if (loaded.value) fit();
+			}
+		});
+		watch(() => props.src, () => {
+			reset();
+			clearSelection();
+		});
+		watch(() => props.aspectRatio, (ratio) => {
+			currentRatio.value = ratio;
+		});
+		watch(loaded, (isLoaded) => {
+			if (!isLoaded) return;
+			fit();
+			initSelection();
+		});
+		watch([selection, () => ({ ...transform })], () => {
+			const sel = selection.value;
+			if (!sel) return;
+			emit("crop-change", {
+				selection: { ...sel },
+				transform: {
+					rotation: transform.rotation,
+					flipX: transform.flipX,
+					flipY: transform.flipY
+				}
+			});
+		});
+		/** 输出当前选区裁剪结果：默认原图选区像素，options 传入目标宽 / 高时按该尺寸缩放 */
+		async function getResult(options) {
+			const img = imageEl.value;
+			const sel = selection.value;
+			if (!img || !sel) throw new Error("Export crop result failed: image not loaded or no selection");
+			return cropToResult(img, sel, transform, options);
+		}
+		__expose({ getResult });
+		/** 舞台样式：图片与选区层共用同一变换，选区以图片像素坐标定位 */
+		const stageStyle = computed(() => {
+			const { translateX, translateY, rotation, scale, flipX, flipY } = transform;
+			return {
+				width: `${naturalWidth.value}px`,
+				height: `${naturalHeight.value}px`,
+				transform: `translate(${translateX}px, ${translateY}px) rotate(${rotation}deg) scale(${(flipX ? -1 : 1) * scale}, ${(flipY ? -1 : 1) * scale})`,
+				"--u-image-cropper-inv-scale": String(1 / scale)
+			};
+		});
+		const selectionStyle = computed(() => {
+			const sel = selection.value;
+			if (!sel) return {};
+			return {
+				left: `${sel.x}px`,
+				top: `${sel.y}px`,
+				width: `${sel.width}px`,
+				height: `${sel.height}px`
+			};
+		});
+		/** 选区外上 / 下 / 左 / 右四向遮罩 */
+		const maskStyles = computed(() => {
+			const sel = selection.value;
+			if (!sel) return [];
+			const W = naturalWidth.value;
+			const H = naturalHeight.value;
+			const right = sel.x + sel.width;
+			const bottom = sel.y + sel.height;
+			return [
+				{
+					left: "0px",
+					top: "0px",
+					width: `${W}px`,
+					height: `${sel.y}px`
+				},
+				{
+					left: "0px",
+					top: `${bottom}px`,
+					width: `${W}px`,
+					height: `${H - bottom}px`
+				},
+				{
+					left: "0px",
+					top: `${sel.y}px`,
+					width: `${sel.x}px`,
+					height: `${sel.height}px`
+				},
+				{
+					left: `${right}px`,
+					top: `${sel.y}px`,
+					width: `${W - right}px`,
+					height: `${sel.height}px`
+				}
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cls).b) }, [
+				__props.showToolbar ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("toolbar"))
+				}, [renderSlot(_ctx.$slots, "toolbar", {
+					zoomIn: unref(zoomIn),
+					zoomOut: unref(zoomOut),
+					rotate: unref(rotate),
+					flip: unref(flip),
+					reset: unref(resetTransform),
+					setAspectRatio,
+					aspectRatio: currentRatio.value
+				}, () => [
+					createCommentVNode(" 宽高比预设 "),
+					createElementVNode("div", { class: normalizeClass(unref(cls).e("tool-group")) }, [(openBlock(), createElementBlock(Fragment, null, renderList(RATIO_PRESETS, (preset) => {
+						return createElementVNode("button", {
+							key: preset.label,
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(bem).is("active", preset.value === currentRatio.value)]),
+							onClick: ($event) => setAspectRatio(preset.value)
+						}, toDisplayString(preset.label), 11, _hoisted_1);
+					}), 64))], 2),
+					createCommentVNode(" 缩放 / 旋转 / 翻转 / 重置 "),
+					createElementVNode("div", { class: normalizeClass(unref(cls).e("tool-group")) }, [
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "缩小",
+							title: "缩小",
+							onClick: _cache[0] || (_cache[0] = ($event) => unref(zoomOut)())
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(ZoomOut))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "放大",
+							title: "放大",
+							onClick: _cache[1] || (_cache[1] = ($event) => unref(zoomIn)())
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(ZoomIn))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "逆时针旋转 90°",
+							title: "逆时针旋转 90°",
+							onClick: _cache[2] || (_cache[2] = ($event) => unref(rotate)(-1))
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(RotateLeft))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "顺时针旋转 90°",
+							title: "顺时针旋转 90°",
+							onClick: _cache[3] || (_cache[3] = ($event) => unref(rotate)(1))
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(RotateRight))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "水平翻转",
+							title: "水平翻转",
+							onClick: _cache[4] || (_cache[4] = ($event) => unref(flip)("horizontal"))
+						}, [createVNode(unref(_sfc_main$1), {
+							size: 15,
+							class: normalizeClass(unref(cls).e("flip-icon"))
+						}, {
+							default: withCtx(() => [createVNode(unref(ArrowUpdown))]),
+							_: 1
+						}, 8, ["class"])], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "垂直翻转",
+							title: "垂直翻转",
+							onClick: _cache[5] || (_cache[5] = ($event) => unref(flip)("vertical"))
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(ArrowUpdown))]),
+							_: 1
+						})], 2),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([unref(cls).e("tool"), unref(cls).em("tool", "icon")]),
+							"aria-label": "重置",
+							title: "重置",
+							onClick: _cache[6] || (_cache[6] = ($event) => unref(resetTransform)())
+						}, [createVNode(unref(_sfc_main$1), { size: 15 }, {
+							default: withCtx(() => [createVNode(unref(Refresh))]),
+							_: 1
+						})], 2)
+					], 2)
+				])], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", {
+					class: normalizeClass(unref(cls).e("canvas")),
+					ref_key: "canvasRef",
+					ref: canvasRef
+				}, [unref(loaded) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("stage")),
+					style: normalizeStyle(stageStyle.value)
+				}, [createElementVNode("img", {
+					class: normalizeClass(unref(cls).e("image")),
+					src: unref(imageUrl),
+					draggable: "false",
+					alt: ""
+				}, null, 10, _hoisted_2), unref(selection) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					createCommentVNode(" 选区外半透明遮罩 "),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(maskStyles.value, (style, i) => {
+						return openBlock(), createElementBlock("div", {
+							key: i,
+							class: normalizeClass(unref(cls).e("mask")),
+							style: normalizeStyle(style)
+						}, null, 6);
+					}), 128)),
+					createCommentVNode(" 裁剪选区：整体拖动 + 8 个手柄调整大小 "),
+					createElementVNode("div", {
+						class: normalizeClass(unref(cls).e("selection")),
+						ref_key: "selectionRef",
+						ref: selectionRef,
+						style: normalizeStyle(selectionStyle.value)
+					}, [
+						createCommentVNode(" 3×3 网格线，顺序对应 style.scss 中 nth-child 的定位 "),
+						(openBlock(), createElementBlock(Fragment, null, renderList(4, (i) => {
+							return createElementVNode("i", {
+								key: i,
+								class: normalizeClass(unref(cls).e("grid-line"))
+							}, null, 2);
+						}), 64)),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(SELECTION_HANDLES), (handle) => {
+							return openBlock(), createElementBlock("i", {
+								key: handle,
+								class: normalizeClass(unref(cls).e("handle")),
+								"data-handle": handle
+							}, null, 10, _hoisted_3);
+						}), 128))
+					], 6)
+				], 64)) : createCommentVNode("v-if", true)], 6)) : createCommentVNode("v-if", true)], 2),
+				__props.showPreview && unref(loaded) ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(cls).e("preview"))
+				}, [createElementVNode("canvas", {
+					class: normalizeClass(unref(cls).e("preview-canvas")),
+					ref_key: "previewCanvasRef",
+					ref: previewCanvasRef
+				}, null, 2)], 2)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+//# sourceMappingURL=image-cropper.js.map

package/dist/components/image-cropper/image-cropper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"image-cropper.js","names":[],"sources":["../../../src/components/image-cropper/image-cropper.vue"],"sourcesContent":["<template>\n <div :class=\"cls.b\">\n <div v-if=\"showToolbar\" :class=\"cls.e('toolbar')\">\n <slot\n name=\"toolbar\"\n :zoom-in=\"zoomIn\"\n :zoom-out=\"zoomOut\"\n :rotate=\"rotate\"\n :flip=\"flip\"\n :reset=\"resetTransform\"\n :set-aspect-ratio=\"setAspectRatio\"\n :aspect-ratio=\"currentRatio\"\n >\n \n <div :class=\"cls.e('tool-group')\">\n <button\n v-for=\"preset in RATIO_PRESETS\"\n :key=\"preset.label\"\n type=\"button\"\n :class=\"[cls.e('tool'), bem.is('active', preset.value === currentRatio)]\"\n @click=\"setAspectRatio(preset.value)\"\n >\n {{ preset.label }}\n </button>\n </div>\n\n \n <div :class=\"cls.e('tool-group')\">\n <button\n type=\"button\"\n :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n aria-label=\"缩小\"\n title=\"缩小\"\n @click=\"zoomOut()\"\n >\n <u-icon :size=\"15\"><ZoomOut /></u-icon>\n </button>\n <button\n type=\"button\"\n :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n aria-label=\"放大\"\n title=\"放大\"\n @click=\"zoomIn()\"\n >\n <u-icon :size=\"15\"><ZoomIn /></u-icon>\n </button>\n <button\n type=\"button\"\n :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n aria-label=\"逆时针旋转 90°\"\n title=\"逆时针旋转 90°\"\n @click=\"rotate(-1)\"\n >\n <u-icon :size=\"15\"><RotateLeft /></u-icon>\n </button>\n <button\n type=\"button\"\n :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n aria-label=\"顺时针旋转 90°\"\n title=\"顺时针旋转 90°\"\n @click=\"rotate(1)\"\n >\n <u-icon :size=\"15\"><RotateRight /></u-icon>\n </button>\n <button\n type=\"button\"\n :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n aria-label=\"水平翻转\"\n title=\"水平翻转\"\n @click=\"flip('horizontal')\"\n >\n <u-icon :size=\"15\" :class=\"cls.e('flip-icon')\"><ArrowUpdown /></u-icon>\n </button>\n <button\n type=\"button\"\n :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n aria-label=\"垂直翻转\"\n title=\"垂直翻转\"\n @click=\"flip('vertical')\"\n >\n <u-icon :size=\"15\"><ArrowUpdown /></u-icon>\n </button>\n <button\n type=\"button\"\n :class=\"[cls.e('tool'), cls.em('tool', 'icon')]\"\n aria-label=\"重置\"\n title=\"重置\"\n @click=\"resetTransform()\"\n >\n <u-icon :size=\"15\"><Refresh /></u-icon>\n </button>\n </div>\n </slot>\n </div>\n\n <div :class=\"cls.e('canvas')\" ref=\"canvasRef\">\n <div v-if=\"loaded\" :class=\"cls.e('stage')\" :style=\"stageStyle\">\n <img :class=\"cls.e('image')\" :src=\"imageUrl\" draggable=\"false\" alt=\"\" />\n\n <template v-if=\"selection\">\n \n <div v-for=\"(style, i) in maskStyles\" :key=\"i\" :class=\"cls.e('mask')\" :style=\"style\" />\n\n \n <div :class=\"cls.e('selection')\" ref=\"selectionRef\" :style=\"selectionStyle\">\n \n <i v-for=\"i in 4\" :key=\"i\" :class=\"cls.e('grid-line')\" />\n <i\n v-for=\"handle in SELECTION_HANDLES\"\n :key=\"handle\"\n :class=\"cls.e('handle')\"\n :data-handle=\"handle\"\n />\n </div>\n </template>\n </div>\n </div>\n\n <div v-if=\"showPreview && loaded\" :class=\"cls.e('preview')\">\n <canvas :class=\"cls.e('preview-canvas')\" ref=\"previewCanvasRef\" />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useResizeObserver } from '@veltra/compositions'\nimport {\n ArrowUpdown,\n Refresh,\n RotateLeft,\n RotateRight,\n ZoomIn,\n ZoomOut\n} from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, reactive, shallowRef, watch } from 'vue'\n\nimport type {\n ImageCropperProps,\n ImageCropperEmits,\n ImageCropperResult,\n ImageCropperResultOptions,\n _ImageCropperExposed\n} from '../../types'\nimport { UIcon } from '../icon'\nimport { cropToResult } from './draw-crop'\nimport { useImageLoader } from './use-image-loader'\nimport { usePreview } from './use-preview'\nimport { SELECTION_HANDLES, useSelection } from './use-selection'\nimport { useTransform } from './use-transform'\n\ndefineOptions({ name: 'ImageCropper' })\n\nconst props = withDefaults(defineProps<ImageCropperProps>(), {\n showToolbar: true,\n showPreview: true\n})\n\nconst emit = defineEmits<ImageCropperEmits>()\n\nconst cls = bem('image-cropper')\n\nconst canvasRef = shallowRef<HTMLElement>()\nconst selectionRef = shallowRef<HTMLElement>()\nconst previewCanvasRef = shallowRef<HTMLCanvasElement>()\n\nconst { imageUrl, loaded, naturalWidth, naturalHeight, imageEl } = useImageLoader({\n src: () => props.src\n})\n\nconst canvasSize = reactive({ width: 0, height: 0 })\n\n/** 宽高比预设，value 为 undefined 表示自由比例 */\nconst RATIO_PRESETS: { label: string; value?: number }[] = [\n { label: '自由', value: undefined },\n { label: '1:1', value: 1 },\n { label: '4:3', value: 4 / 3 },\n { label: '16:9', value: 16 / 9 }\n]\n\n/** 当前生效的宽高比：工具栏预设可覆盖 prop，prop 变化时同步回来 */\nconst currentRatio = shallowRef(props.aspectRatio)\n\nfunction setAspectRatio(ratio: number | undefined) {\n currentRatio.value = ratio\n}\n\nconst { transform, fit, reset, resetTransform, zoomIn, zoomOut, rotate, flip, toImageDelta } =\n useTransform({\n target: canvasRef,\n canvasSize: () => canvasSize,\n imageWidth: () => naturalWidth.value,\n imageHeight: () => naturalHeight.value,\n onReset: () => initSelection()\n })\n\nconst { selection, initSelection, clearSelection } = useSelection({\n target: selectionRef,\n imageWidth: () => naturalWidth.value,\n imageHeight: () => naturalHeight.value,\n toImageDelta,\n aspectRatio: () => currentRatio.value\n})\n\nusePreview({\n canvas: previewCanvasRef,\n image: imageEl,\n selection,\n transform,\n canvasSize: () => canvasSize\n})\n\nuseResizeObserver({\n targets: canvasRef,\n onResize([entry]) {\n if (!entry) return\n canvasSize.width = entry.contentRect.width\n canvasSize.height = entry.contentRect.height\n if (loaded.value) fit()\n }\n})\n\nwatch(\n () => props.src,\n () => {\n reset()\n clearSelection()\n }\n)\n\nwatch(\n () => props.aspectRatio,\n (ratio) => {\n currentRatio.value = ratio\n }\n)\n\nwatch(loaded, (isLoaded) => {\n if (!isLoaded) return\n fit()\n initSelection()\n})\n\n// 选区或图片变换变化时发出裁剪变化事件，载荷为当前选区（图片像素坐标）与变换摘要\nwatch([selection, () => ({ ...transform })], () => {\n const sel = selection.value\n if (!sel) return\n emit('crop-change', {\n selection: { ...sel },\n transform: { rotation: transform.rotation, flipX: transform.flipX, flipY: transform.flipY }\n })\n})\n\n/** 输出当前选区裁剪结果：默认原图选区像素，options 传入目标宽 / 高时按该尺寸缩放 */\nasync function getResult(options?: ImageCropperResultOptions): Promise<ImageCropperResult> {\n const img = imageEl.value\n const sel = selection.value\n if (!img || !sel) throw new Error('Export crop result failed: image not loaded or no selection')\n return cropToResult(img, sel, transform, options)\n}\n\ndefineExpose<_ImageCropperExposed>({ getResult })\n\n/** 舞台样式：图片与选区层共用同一变换，选区以图片像素坐标定位 */\nconst stageStyle = computed(() => {\n const { translateX, translateY, rotation, scale, flipX, flipY } = transform\n return {\n width: `${naturalWidth.value}px`,\n height: `${naturalHeight.value}px`,\n transform: `translate(${translateX}px, ${translateY}px) rotate(${rotation}deg) scale(${(flipX ? -1 : 1) * scale}, ${(flipY ? -1 : 1) * scale})`,\n // 逆缩放系数：选区边框 / 网格线 / 手柄在缩放后保持屏幕恒定尺寸\n '--u-image-cropper-inv-scale': String(1 / scale)\n }\n})\n\nconst selectionStyle = computed(() => {\n const sel = selection.value\n if (!sel) return {}\n return {\n left: `${sel.x}px`,\n top: `${sel.y}px`,\n width: `${sel.width}px`,\n height: `${sel.height}px`\n }\n})\n\n/** 选区外上 / 下 / 左 / 右四向遮罩 */\nconst maskStyles = computed(() => {\n const sel = selection.value\n if (!sel) return []\n const W = naturalWidth.value\n const H = naturalHeight.value\n const right = sel.x + sel.width\n const bottom = sel.y + sel.height\n return [\n { left: '0px', top: '0px', width: `${W}px`, height: `${sel.y}px` },\n { left: '0px', top: `${bottom}px`, width: `${W}px`, height: `${H - bottom}px` },\n { left: '0px', top: `${sel.y}px`, width: `${sel.x}px`, height: `${sel.height}px` },\n { left: `${right}px`, top: `${sel.y}px`, width: `${W - right}px`, height: `${sel.height}px` }\n ]\n})\n</script>\n"],"mappings":"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"}

package/dist/components/image-cropper/style.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {}

package/dist/components/image-cropper/style.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./style2.css";