feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+14
View File
@@ -0,0 +1,14 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { SplitterEmits, SplitterInstance, SplitterProps, SplitterPropsPublic, splitterEmits, splitterProps } from "./src/splitter.js";
import { _default } from "./src/splitter.vue.js";
import { SplitterPanelEmits, SplitterPanelInstance, SplitterPanelProps, SplitterPanelPropsPublic, splitterPanelEmits, splitterPanelProps } from "./src/split-panel.js";
import { _default as _default$1 } from "./src/split-panel.vue.js";
//#region ../../packages/components/splitter/index.d.ts
declare const ElSplitter: SFCWithInstall<typeof _default> & {
SplitPanel: typeof _default$1;
};
declare const ElSplitterPanel: SFCWithInstall<typeof _default$1>;
//#endregion
export { ElSplitter, ElSplitter as default, ElSplitterPanel, SplitterEmits, SplitterInstance, SplitterPanelEmits, SplitterPanelInstance, SplitterPanelProps, SplitterPanelPropsPublic, SplitterProps, SplitterPropsPublic, splitterEmits, splitterPanelEmits, splitterPanelProps, splitterProps };
+20
View File
@@ -0,0 +1,20 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_splitter = require('./src/splitter.js');
const require_splitter$1 = require('./src/splitter2.js');
const require_split_panel = require('./src/split-panel.js');
const require_split_panel$1 = require('./src/split-panel2.js');
//#region ../../packages/components/splitter/index.ts
const ElSplitter = require_install.withInstall(require_splitter$1.default, { SplitPanel: require_split_panel$1.default });
const ElSplitterPanel = require_install.withNoopInstall(require_split_panel$1.default);
//#endregion
exports.ElSplitter = ElSplitter;
exports.default = ElSplitter;
exports.ElSplitterPanel = ElSplitterPanel;
exports.splitterEmits = require_splitter.splitterEmits;
exports.splitterPanelEmits = require_split_panel.splitterPanelEmits;
exports.splitterPanelProps = require_split_panel.splitterPanelProps;
exports.splitterProps = require_splitter.splitterProps;
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","Splitter","withNoopInstall","SplitPanel"],"sources":["../../../../../packages/components/splitter/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Splitter from './src/splitter.vue'\nimport SplitPanel from './src/split-panel.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElSplitter: SFCWithInstall<typeof Splitter> & {\n SplitPanel: typeof SplitPanel\n} = withInstall(Splitter, {\n SplitPanel,\n})\nexport default ElSplitter\n\nexport const ElSplitterPanel: SFCWithInstall<typeof SplitPanel> =\n withNoopInstall(SplitPanel)\n\nexport * from './src/splitter'\nexport * from './src/split-panel'\n"],"mappings":";;;;;;;;AAMA,MAAa,aAETA,4BAAYC,4BAAU,EACxB,2CACD,CAAC;AAGF,MAAa,kBACXC,gCAAgBC,8BAAW"}
@@ -0,0 +1,4 @@
import { useContainer } from "./useContainer.js";
import { useResize } from "./useResize.js";
import { getPct, getPx, isPct, isPx, useSize } from "./useSize.js";
export { getPct, getPx, isPct, isPx, useContainer, useResize, useSize };
@@ -0,0 +1,12 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_useContainer = require('./useContainer.js');
const require_useSize = require('./useSize.js');
const require_useResize = require('./useResize.js');
exports.getPct = require_useSize.getPct;
exports.getPx = require_useSize.getPx;
exports.isPct = require_useSize.isPct;
exports.isPx = require_useSize.isPx;
exports.useContainer = require_useContainer.useContainer;
exports.useResize = require_useResize.useResize;
exports.useSize = require_useSize.useSize;
@@ -0,0 +1,10 @@
import * as vue from "vue";
import { Ref } from "vue";
//#region ../../packages/components/splitter/src/hooks/useContainer.d.ts
declare function useContainer(layout: Ref<'horizontal' | 'vertical'>): {
containerEl: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
containerSize: vue.ComputedRef<number>;
};
//#endregion
export { useContainer };
@@ -0,0 +1,20 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
//#region ../../packages/components/splitter/src/hooks/useContainer.ts
function useContainer(layout) {
const containerEl = (0, vue.ref)();
const { width, height } = (0, _vueuse_core.useElementSize)(containerEl);
return {
containerEl,
containerSize: (0, vue.computed)(() => {
return layout.value === "horizontal" ? width.value : height.value;
})
};
}
//#endregion
exports.useContainer = useContainer;
//# sourceMappingURL=useContainer.js.map
@@ -0,0 +1 @@
{"version":3,"file":"useContainer.js","names":[],"sources":["../../../../../../../packages/components/splitter/src/hooks/useContainer.ts"],"sourcesContent":["import { computed, ref } from 'vue'\nimport { useElementSize } from '@vueuse/core'\n\nimport type { Ref } from 'vue'\n\nexport function useContainer(layout: Ref<'horizontal' | 'vertical'>) {\n const containerEl = ref<HTMLDivElement>()\n const { width, height } = useElementSize(containerEl)\n\n const containerSize = computed(() => {\n return layout.value === 'horizontal' ? width.value : height.value\n })\n\n return { containerEl, containerSize }\n}\n"],"mappings":";;;;;;AAKA,SAAgB,aAAa,QAAwC;CACnE,MAAM,4BAAmC;CACzC,MAAM,EAAE,OAAO,4CAA0B,YAAY;AAMrD,QAAO;EAAE;EAAa,uCAJe;AACnC,UAAO,OAAO,UAAU,eAAe,MAAM,QAAQ,OAAO;IAC5D;EAEmC"}
@@ -0,0 +1,22 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/splitter/src/hooks/usePanel.ts
function getCollapsible(collapsible) {
if (collapsible && (0, _vue_shared.isObject)(collapsible)) return collapsible;
return {
start: !!collapsible,
end: !!collapsible
};
}
function isCollapsible(panel, size, nextPanel, nextSize) {
if (panel?.collapsible.end && size > 0) return true;
if (nextPanel?.collapsible.start && nextSize === 0 && size > 0) return true;
return false;
}
//#endregion
exports.getCollapsible = getCollapsible;
exports.isCollapsible = isCollapsible;
//# sourceMappingURL=usePanel.js.map
@@ -0,0 +1 @@
{"version":3,"file":"usePanel.js","names":[],"sources":["../../../../../../../packages/components/splitter/src/hooks/usePanel.ts"],"sourcesContent":["import { isObject } from '@element-plus/utils'\n\nimport type { PanelItemState } from '../type'\n\nexport function getCollapsible(\n collapsible: boolean | { start?: boolean; end?: boolean }\n) {\n if (collapsible && isObject(collapsible)) {\n return collapsible\n }\n return {\n start: !!collapsible,\n end: !!collapsible,\n }\n}\n\nexport function isCollapsible(\n panel: PanelItemState | null | undefined,\n size: number,\n nextPanel: PanelItemState | null | undefined,\n nextSize: number\n) {\n // If the current panel is collapsible and has size, then it can be collapsed\n if (panel?.collapsible.end && size > 0) {\n return true\n }\n\n // If the next panel is collapsible and has no size, but the current panel has size, then it can be collapsed\n if (nextPanel?.collapsible.start && nextSize === 0 && size > 0) {\n return true\n }\n\n return false\n}\n"],"mappings":";;;;;AAIA,SAAgB,eACd,aACA;AACA,KAAI,yCAAwB,YAAY,CACtC,QAAO;AAET,QAAO;EACL,OAAO,CAAC,CAAC;EACT,KAAK,CAAC,CAAC;EACR;;AAGH,SAAgB,cACd,OACA,MACA,WACA,UACA;AAEA,KAAI,OAAO,YAAY,OAAO,OAAO,EACnC,QAAO;AAIT,KAAI,WAAW,YAAY,SAAS,aAAa,KAAK,OAAO,EAC3D,QAAO;AAGT,QAAO"}
@@ -0,0 +1,23 @@
import { PanelItemState } from "../type.js";
import { ComputedRef, Ref } from "vue";
//#region ../../packages/components/splitter/src/hooks/useResize.d.ts
declare function useResize(panels: Ref<PanelItemState[]>, containerSize: ComputedRef<number>, pxSizes: ComputedRef<number[]>, lazy: Ref<boolean>): {
lazyOffset: Ref<number, number>;
onMoveStart: (index: number) => void;
onMoving: (index: number, offset: number) => void;
onMoveEnd: () => void;
movingIndex: Ref<{
index: number;
confirmed: boolean;
} | null, {
index: number;
confirmed: boolean;
} | {
index: number;
confirmed: boolean;
} | null>;
onCollapse: (index: number, type: "start" | "end") => void;
};
//#endregion
export { useResize };
@@ -0,0 +1,116 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_useSize = require('./useSize.js');
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/splitter/src/hooks/useResize.ts
function useResize(panels, containerSize, pxSizes, lazy) {
const ptg2px = (ptg) => ptg * containerSize.value || 0;
function getLimitSize(str, defaultLimit) {
if (require_useSize.isPct(str)) return ptg2px(require_useSize.getPct(str));
else if (require_useSize.isPx(str)) return require_useSize.getPx(str);
return str ?? defaultLimit;
}
const lazyOffset = (0, vue.ref)(0);
const movingIndex = (0, vue.ref)(null);
let cachePxSizes = [];
let updatePanelSizes = _vue_shared.NOOP;
const limitSizes = (0, vue.computed)(() => panels.value.map((item) => [item.min, item.max]));
(0, vue.watch)(lazy, () => {
if (lazyOffset.value) {
const mouseup = new MouseEvent("mouseup", { bubbles: true });
window.dispatchEvent(mouseup);
}
});
const onMoveStart = (index) => {
lazyOffset.value = 0;
movingIndex.value = {
index,
confirmed: false
};
cachePxSizes = pxSizes.value;
};
const onMoving = (index, offset) => {
let confirmedIndex = null;
if ((!movingIndex.value || !movingIndex.value.confirmed) && offset !== 0) {
if (offset > 0) {
confirmedIndex = index;
movingIndex.value = {
index,
confirmed: true
};
} else for (let i = index; i >= 0; i -= 1) if (cachePxSizes[i] > 0) {
confirmedIndex = i;
movingIndex.value = {
index: i,
confirmed: true
};
break;
}
}
const mergedIndex = confirmedIndex ?? movingIndex.value?.index ?? index;
const numSizes = [...cachePxSizes];
const nextIndex = mergedIndex + 1;
const startMinSize = getLimitSize(limitSizes.value[mergedIndex][0], 0);
const endMinSize = getLimitSize(limitSizes.value[nextIndex][0], 0);
const startMaxSize = getLimitSize(limitSizes.value[mergedIndex][1], containerSize.value || 0);
const endMaxSize = getLimitSize(limitSizes.value[nextIndex][1], containerSize.value || 0);
let mergedOffset = offset;
if (numSizes[mergedIndex] + mergedOffset < startMinSize) mergedOffset = startMinSize - numSizes[mergedIndex];
if (numSizes[nextIndex] - mergedOffset < endMinSize) mergedOffset = numSizes[nextIndex] - endMinSize;
if (numSizes[mergedIndex] + mergedOffset > startMaxSize) mergedOffset = startMaxSize - numSizes[mergedIndex];
if (numSizes[nextIndex] - mergedOffset > endMaxSize) mergedOffset = numSizes[nextIndex] - endMaxSize;
numSizes[mergedIndex] += mergedOffset;
numSizes[nextIndex] -= mergedOffset;
lazyOffset.value = mergedOffset;
updatePanelSizes = () => {
panels.value.forEach((panel, index) => {
panel.size = numSizes[index];
});
updatePanelSizes = _vue_shared.NOOP;
};
if (!lazy.value) updatePanelSizes();
};
const onMoveEnd = () => {
if (lazy.value) updatePanelSizes();
lazyOffset.value = 0;
movingIndex.value = null;
cachePxSizes = [];
};
const cacheCollapsedSize = [];
const onCollapse = (index, type) => {
if (!cacheCollapsedSize.length) cacheCollapsedSize.push(...pxSizes.value);
const currentSizes = pxSizes.value;
const currentIndex = type === "start" ? index : index + 1;
const targetIndex = type === "start" ? index + 1 : index;
const currentSize = currentSizes[currentIndex];
const targetSize = currentSizes[targetIndex];
if (currentSize !== 0 && targetSize !== 0) {
currentSizes[currentIndex] = 0;
currentSizes[targetIndex] += currentSize;
cacheCollapsedSize[index] = currentSize;
} else {
const totalSize = currentSize + targetSize;
const targetCacheCollapsedSize = cacheCollapsedSize[index];
const currentCacheCollapsedSize = totalSize - targetCacheCollapsedSize;
currentSizes[targetIndex] = targetCacheCollapsedSize;
currentSizes[currentIndex] = currentCacheCollapsedSize;
}
panels.value.forEach((panel, index) => {
panel.size = currentSizes[index];
});
};
return {
lazyOffset,
onMoveStart,
onMoving,
onMoveEnd,
movingIndex,
onCollapse
};
}
//#endregion
exports.useResize = useResize;
//# sourceMappingURL=useResize.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,14 @@
import { PanelItemState } from "../type.js";
import { ComputedRef, Ref } from "vue";
//#region ../../packages/components/splitter/src/hooks/useSize.d.ts
declare function getPct(str: string): number;
declare function getPx(str: string): number;
declare function isPct(itemSize: string | number | undefined): itemSize is string;
declare function isPx(itemSize: string | number | undefined): itemSize is string;
declare function useSize(panels: Ref<PanelItemState[]>, containerSize: ComputedRef<number>): {
percentSizes: Ref<number[], number[]>;
pxSizes: ComputedRef<number[]>;
};
//#endregion
export { getPct, getPx, isPct, isPx, useSize };
@@ -0,0 +1,65 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/splitter/src/hooks/useSize.ts
function getPct(str) {
return Number(str.slice(0, -1)) / 100;
}
function getPx(str) {
return Number(str.slice(0, -2));
}
function isPct(itemSize) {
return (0, _vue_shared.isString)(itemSize) && itemSize.endsWith("%");
}
function isPx(itemSize) {
return (0, _vue_shared.isString)(itemSize) && itemSize.endsWith("px");
}
function useSize(panels, containerSize) {
const propSizes = (0, vue.computed)(() => panels.value.map((i) => i.size));
const panelCounts = (0, vue.computed)(() => panels.value.length);
const percentSizes = (0, vue.ref)([]);
(0, vue.watch)([
propSizes,
panelCounts,
containerSize
], () => {
let ptgList = [];
let emptyCount = 0;
for (let i = 0; i < panelCounts.value; i += 1) {
const itemSize = panels.value[i]?.size;
if (isPct(itemSize)) ptgList[i] = getPct(itemSize);
else if (isPx(itemSize)) ptgList[i] = getPx(itemSize) / containerSize.value;
else if (itemSize || itemSize === 0) {
const num = Number(itemSize);
if (!Number.isNaN(num)) ptgList[i] = num / containerSize.value;
} else {
emptyCount += 1;
ptgList[i] = void 0;
}
}
const totalPtg = ptgList.reduce((acc, ptg) => acc + (ptg || 0), 0);
if (totalPtg > 1 || !emptyCount) {
const scale = 1 / totalPtg;
ptgList = ptgList.map((ptg) => ptg === void 0 ? 0 : ptg * scale);
} else {
const avgRest = (1 - totalPtg) / emptyCount;
ptgList = ptgList.map((ptg) => ptg === void 0 ? avgRest : ptg);
}
percentSizes.value = ptgList;
});
const ptg2px = (ptg) => ptg * containerSize.value;
return {
percentSizes,
pxSizes: (0, vue.computed)(() => percentSizes.value.map(ptg2px))
};
}
//#endregion
exports.getPct = getPct;
exports.getPx = getPx;
exports.isPct = isPct;
exports.isPx = isPx;
exports.useSize = useSize;
//# sourceMappingURL=useSize.js.map
@@ -0,0 +1 @@
{"version":3,"file":"useSize.js","names":[],"sources":["../../../../../../../packages/components/splitter/src/hooks/useSize.ts"],"sourcesContent":["import { computed, ref, watch } from 'vue'\nimport { isString } from '@element-plus/utils'\n\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PanelItemState } from '../type'\n\nexport function getPct(str: string) {\n return Number(str.slice(0, -1)) / 100\n}\n\nexport function getPx(str: string) {\n return Number(str.slice(0, -2))\n}\n\nexport function isPct(\n itemSize: string | number | undefined\n): itemSize is string {\n return isString(itemSize) && itemSize.endsWith('%')\n}\n\nexport function isPx(\n itemSize: string | number | undefined\n): itemSize is string {\n return isString(itemSize) && itemSize.endsWith('px')\n}\n\nexport function useSize(\n panels: Ref<PanelItemState[]>,\n containerSize: ComputedRef<number>\n) {\n const propSizes = computed(() => panels.value.map((i) => i.size))\n\n const panelCounts = computed(() => panels.value.length)\n\n const percentSizes = ref<number[]>([])\n\n watch([propSizes, panelCounts, containerSize], () => {\n let ptgList: (number | undefined)[] = []\n let emptyCount = 0\n\n // Convert the passed props size to a percentage\n for (let i = 0; i < panelCounts.value; i += 1) {\n const itemSize = panels.value[i]?.size\n\n if (isPct(itemSize)) {\n ptgList[i] = getPct(itemSize)\n } else if (isPx(itemSize)) {\n ptgList[i] = getPx(itemSize) / containerSize.value\n } else if (itemSize || itemSize === 0) {\n const num = Number(itemSize)\n\n if (!Number.isNaN(num)) {\n ptgList[i] = num / containerSize.value\n }\n } else {\n emptyCount += 1\n ptgList[i] = undefined\n }\n }\n\n const totalPtg = ptgList.reduce<number>((acc, ptg) => acc + (ptg || 0), 0)\n\n if (totalPtg > 1 || !emptyCount) {\n // If it is greater than 1, the scaling ratio\n const scale = 1 / totalPtg\n ptgList = ptgList.map((ptg) => (ptg === undefined ? 0 : ptg * scale))\n } else {\n // If it is less than 1, the filling ratio\n const avgRest = (1 - totalPtg) / emptyCount\n ptgList = ptgList.map((ptg) => (ptg === undefined ? avgRest : ptg))\n }\n\n percentSizes.value = ptgList as number[]\n })\n\n const ptg2px = (ptg: number) => ptg * containerSize.value\n const pxSizes = computed(() => percentSizes.value.map(ptg2px))\n\n return { percentSizes, pxSizes }\n}\n"],"mappings":";;;;;;AAMA,SAAgB,OAAO,KAAa;AAClC,QAAO,OAAO,IAAI,MAAM,GAAG,GAAG,CAAC,GAAG;;AAGpC,SAAgB,MAAM,KAAa;AACjC,QAAO,OAAO,IAAI,MAAM,GAAG,GAAG,CAAC;;AAGjC,SAAgB,MACd,UACoB;AACpB,kCAAgB,SAAS,IAAI,SAAS,SAAS,IAAI;;AAGrD,SAAgB,KACd,UACoB;AACpB,kCAAgB,SAAS,IAAI,SAAS,SAAS,KAAK;;AAGtD,SAAgB,QACd,QACA,eACA;CACA,MAAM,oCAA2B,OAAO,MAAM,KAAK,MAAM,EAAE,KAAK,CAAC;CAEjE,MAAM,sCAA6B,OAAO,MAAM,OAAO;CAEvD,MAAM,4BAA6B,EAAE,CAAC;AAEtC,gBAAM;EAAC;EAAW;EAAa;EAAc,QAAQ;EACnD,IAAI,UAAkC,EAAE;EACxC,IAAI,aAAa;AAGjB,OAAK,IAAI,IAAI,GAAG,IAAI,YAAY,OAAO,KAAK,GAAG;GAC7C,MAAM,WAAW,OAAO,MAAM,IAAI;AAElC,OAAI,MAAM,SAAS,CACjB,SAAQ,KAAK,OAAO,SAAS;YACpB,KAAK,SAAS,CACvB,SAAQ,KAAK,MAAM,SAAS,GAAG,cAAc;YACpC,YAAY,aAAa,GAAG;IACrC,MAAM,MAAM,OAAO,SAAS;AAE5B,QAAI,CAAC,OAAO,MAAM,IAAI,CACpB,SAAQ,KAAK,MAAM,cAAc;UAE9B;AACL,kBAAc;AACd,YAAQ,KAAK;;;EAIjB,MAAM,WAAW,QAAQ,QAAgB,KAAK,QAAQ,OAAO,OAAO,IAAI,EAAE;AAE1E,MAAI,WAAW,KAAK,CAAC,YAAY;GAE/B,MAAM,QAAQ,IAAI;AAClB,aAAU,QAAQ,KAAK,QAAS,QAAQ,SAAY,IAAI,MAAM,MAAO;SAChE;GAEL,MAAM,WAAW,IAAI,YAAY;AACjC,aAAU,QAAQ,KAAK,QAAS,QAAQ,SAAY,UAAU,IAAK;;AAGrE,eAAa,QAAQ;GACrB;CAEF,MAAM,UAAU,QAAgB,MAAM,cAAc;AAGpD,QAAO;EAAE;EAAc,iCAFQ,aAAa,MAAM,IAAI,OAAO,CAAC;EAE9B"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_split_bar_vue_vue_type_script_setup_true_lang = require('./split-bar.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/splitter/src/split-bar.vue
var split_bar_default = require_split_bar_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = split_bar_default;
//# sourceMappingURL=split-bar.js.map
@@ -0,0 +1 @@
{"version":3,"file":"split-bar.js","names":[],"sources":["../../../../../../packages/components/splitter/src/split-bar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport {\n ArrowDown,\n ArrowLeft,\n ArrowRight,\n ArrowUp,\n} from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nconst ns = useNamespace('splitter-bar')\n\ndefineOptions({\n name: 'ElSplitterBar',\n})\n\nconst props = defineProps({\n index: {\n type: Number,\n required: true,\n },\n layout: {\n type: String,\n values: ['horizontal', 'vertical'] as const,\n default: 'horizontal',\n },\n resizable: {\n type: Boolean,\n default: true,\n },\n lazy: Boolean,\n startCollapsible: Boolean,\n endCollapsible: Boolean,\n})\n\nconst emit = defineEmits(['moveStart', 'moving', 'moveEnd', 'collapse'])\n\nconst isHorizontal = computed(() => props.layout === 'horizontal')\n\nconst barWrapStyles = computed(() => {\n if (isHorizontal.value) {\n return { width: 0 }\n }\n return { height: 0 }\n})\n\nconst draggerStyles = computed(() => {\n return {\n width: isHorizontal.value ? '16px' : '100%',\n height: isHorizontal.value ? '100%' : '16px',\n cursor: !props.resizable\n ? 'auto'\n : isHorizontal.value\n ? 'ew-resize'\n : 'ns-resize',\n touchAction: 'none',\n }\n})\n\nconst draggerPseudoClass = computed(() => {\n const prefix = ns.e('dragger')\n return {\n [`${prefix}-horizontal`]: isHorizontal.value,\n [`${prefix}-vertical`]: !isHorizontal.value,\n [`${prefix}-active`]: !!startPos.value,\n }\n})\n\nconst startPos = ref<[x: number, y: number] | null>(null)\n\n// Start dragging\nconst onMousedown = (e: MouseEvent) => {\n if (!props.resizable) return\n startPos.value = [e.pageX, e.pageY]\n emit('moveStart', props.index)\n window.addEventListener('mouseup', onMouseUp)\n window.addEventListener('mousemove', onMouseMove)\n}\n\nconst onTouchStart = (e: TouchEvent) => {\n if (props.resizable && e.touches.length === 1) {\n e.preventDefault()\n const touch = e.touches[0]\n startPos.value = [touch.pageX, touch.pageY]\n emit('moveStart', props.index)\n window.addEventListener('touchend', onTouchEnd)\n window.addEventListener('touchmove', onTouchMove)\n }\n}\n\n// During dragging\nconst onMouseMove = (e: MouseEvent) => {\n const { pageX, pageY } = e\n const offsetX = pageX - startPos.value![0]\n const offsetY = pageY - startPos.value![1]\n const offset = isHorizontal.value ? offsetX : offsetY\n emit('moving', props.index, offset)\n}\n\nconst onTouchMove = (e: TouchEvent) => {\n if (e.touches.length === 1) {\n e.preventDefault()\n const touch = e.touches[0]\n const offsetX = touch.pageX - startPos.value![0]\n const offsetY = touch.pageY - startPos.value![1]\n const offset = isHorizontal.value ? offsetX : offsetY\n emit('moving', props.index, offset)\n }\n}\n\n// End dragging\nconst onMouseUp = () => {\n startPos.value = null\n window.removeEventListener('mouseup', onMouseUp)\n window.removeEventListener('mousemove', onMouseMove)\n emit('moveEnd', props.index)\n}\n\nconst onTouchEnd = () => {\n startPos.value = null\n window.removeEventListener('touchend', onTouchEnd)\n window.removeEventListener('touchmove', onTouchMove)\n emit('moveEnd', props.index)\n}\n\nconst StartIcon = computed(() => (isHorizontal.value ? ArrowLeft : ArrowUp))\nconst EndIcon = computed(() => (isHorizontal.value ? ArrowRight : ArrowDown))\n</script>\n\n<template>\n <div :class=\"[ns.b()]\" :style=\"barWrapStyles\">\n <div\n v-if=\"startCollapsible\"\n :class=\"[ns.e('collapse-icon'), ns.e(`${layout}-collapse-icon-start`)]\"\n @click=\"emit('collapse', index, 'start')\"\n >\n <slot name=\"start-collapsible\">\n <component :is=\"StartIcon\" style=\"width: 12px; height: 12px\" />\n </slot>\n </div>\n\n <div\n :class=\"[\n ns.e('dragger'),\n draggerPseudoClass,\n ns.is('disabled', !resizable),\n ns.is('lazy', resizable && lazy),\n ]\"\n :style=\"draggerStyles\"\n @mousedown=\"onMousedown\"\n @touchstart=\"onTouchStart\"\n />\n <div\n v-if=\"endCollapsible\"\n :class=\"[ns.e('collapse-icon'), ns.e(`${layout}-collapse-icon-end`)]\"\n @click=\"emit('collapse', index, 'end')\"\n >\n <slot name=\"end-collapsible\">\n <component :is=\"EndIcon\" style=\"width: 12px; height: 12px\" />\n </slot>\n </div>\n </div>\n</template>\n"],"mappings":""}
@@ -0,0 +1,147 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
let _element_plus_icons_vue = require("@element-plus/icons-vue");
let vue = require("vue");
//#region ../../packages/components/splitter/src/split-bar.vue?vue&type=script&setup=true&lang.ts
var split_bar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElSplitterBar",
__name: "split-bar",
props: {
index: {
type: Number,
required: true
},
layout: {
type: String,
values: ["horizontal", "vertical"],
default: "horizontal"
},
resizable: {
type: Boolean,
default: true
},
lazy: Boolean,
startCollapsible: Boolean,
endCollapsible: Boolean
},
emits: [
"moveStart",
"moving",
"moveEnd",
"collapse"
],
setup(__props, { emit: __emit }) {
const ns = require_index.useNamespace("splitter-bar");
const props = __props;
const emit = __emit;
const isHorizontal = (0, vue.computed)(() => props.layout === "horizontal");
const barWrapStyles = (0, vue.computed)(() => {
if (isHorizontal.value) return { width: 0 };
return { height: 0 };
});
const draggerStyles = (0, vue.computed)(() => {
return {
width: isHorizontal.value ? "16px" : "100%",
height: isHorizontal.value ? "100%" : "16px",
cursor: !props.resizable ? "auto" : isHorizontal.value ? "ew-resize" : "ns-resize",
touchAction: "none"
};
});
const draggerPseudoClass = (0, vue.computed)(() => {
const prefix = ns.e("dragger");
return {
[`${prefix}-horizontal`]: isHorizontal.value,
[`${prefix}-vertical`]: !isHorizontal.value,
[`${prefix}-active`]: !!startPos.value
};
});
const startPos = (0, vue.ref)(null);
const onMousedown = (e) => {
if (!props.resizable) return;
startPos.value = [e.pageX, e.pageY];
emit("moveStart", props.index);
window.addEventListener("mouseup", onMouseUp);
window.addEventListener("mousemove", onMouseMove);
};
const onTouchStart = (e) => {
if (props.resizable && e.touches.length === 1) {
e.preventDefault();
const touch = e.touches[0];
startPos.value = [touch.pageX, touch.pageY];
emit("moveStart", props.index);
window.addEventListener("touchend", onTouchEnd);
window.addEventListener("touchmove", onTouchMove);
}
};
const onMouseMove = (e) => {
const { pageX, pageY } = e;
const offsetX = pageX - startPos.value[0];
const offsetY = pageY - startPos.value[1];
const offset = isHorizontal.value ? offsetX : offsetY;
emit("moving", props.index, offset);
};
const onTouchMove = (e) => {
if (e.touches.length === 1) {
e.preventDefault();
const touch = e.touches[0];
const offsetX = touch.pageX - startPos.value[0];
const offsetY = touch.pageY - startPos.value[1];
const offset = isHorizontal.value ? offsetX : offsetY;
emit("moving", props.index, offset);
}
};
const onMouseUp = () => {
startPos.value = null;
window.removeEventListener("mouseup", onMouseUp);
window.removeEventListener("mousemove", onMouseMove);
emit("moveEnd", props.index);
};
const onTouchEnd = () => {
startPos.value = null;
window.removeEventListener("touchend", onTouchEnd);
window.removeEventListener("touchmove", onTouchMove);
emit("moveEnd", props.index);
};
const StartIcon = (0, vue.computed)(() => isHorizontal.value ? _element_plus_icons_vue.ArrowLeft : _element_plus_icons_vue.ArrowUp);
const EndIcon = (0, vue.computed)(() => isHorizontal.value ? _element_plus_icons_vue.ArrowRight : _element_plus_icons_vue.ArrowDown);
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).b()]),
style: (0, vue.normalizeStyle)(barWrapStyles.value)
}, [
__props.startCollapsible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("collapse-icon"), (0, vue.unref)(ns).e(`${__props.layout}-collapse-icon-start`)]),
onClick: _cache[0] || (_cache[0] = ($event) => emit("collapse", __props.index, "start"))
}, [(0, vue.renderSlot)(_ctx.$slots, "start-collapsible", {}, () => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(StartIcon.value), { style: {
"width": "12px",
"height": "12px"
} }))])], 2)) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.createElementVNode)("div", {
class: (0, vue.normalizeClass)([
(0, vue.unref)(ns).e("dragger"),
draggerPseudoClass.value,
(0, vue.unref)(ns).is("disabled", !__props.resizable),
(0, vue.unref)(ns).is("lazy", __props.resizable && __props.lazy)
]),
style: (0, vue.normalizeStyle)(draggerStyles.value),
onMousedown,
onTouchstart: onTouchStart
}, null, 38),
__props.endCollapsible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 1,
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("collapse-icon"), (0, vue.unref)(ns).e(`${__props.layout}-collapse-icon-end`)]),
onClick: _cache[1] || (_cache[1] = ($event) => emit("collapse", __props.index, "end"))
}, [(0, vue.renderSlot)(_ctx.$slots, "end-collapsible", {}, () => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(EndIcon.value), { style: {
"width": "12px",
"height": "12px"
} }))])], 2)) : (0, vue.createCommentVNode)("v-if", true)
], 6);
};
}
});
//#endregion
exports.default = split_bar_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=split-bar.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,50 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { _default } from "./split-panel.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/splitter/src/split-panel.d.ts
interface SplitterPanelProps {
min?: string | number;
max?: string | number;
size?: string | number;
resizable?: boolean;
collapsible?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `SplitterPanelProps` instead.
*/
declare const splitterPanelProps: {
readonly min: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly max: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly size: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly resizable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly collapsible: BooleanConstructor;
};
/**
* @deprecated Removed after 3.0.0, Use `SplitterPanelProps` instead.
*/
type SplitterPanelPropsPublic = ExtractPublicPropTypes<typeof splitterPanelProps>;
type SplitterPanelInstance = InstanceType<typeof _default> & unknown;
declare const splitterPanelEmits: {
'update:size': (value: number | string) => boolean;
};
type SplitterPanelEmits = typeof splitterPanelEmits;
//#endregion
export { SplitterPanelEmits, SplitterPanelInstance, SplitterPanelProps, SplitterPanelPropsPublic, splitterPanelEmits, splitterPanelProps };
@@ -0,0 +1,23 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
//#region ../../packages/components/splitter/src/split-panel.ts
/**
* @deprecated Removed after 3.0.0, Use `SplitterPanelProps` instead.
*/
const splitterPanelProps = require_runtime.buildProps({
min: { type: [String, Number] },
max: { type: [String, Number] },
size: { type: [String, Number] },
resizable: {
type: Boolean,
default: true
},
collapsible: Boolean
});
const splitterPanelEmits = { "update:size": (value) => typeof value === "number" || typeof value === "string" };
//#endregion
exports.splitterPanelEmits = splitterPanelEmits;
exports.splitterPanelProps = splitterPanelProps;
//# sourceMappingURL=split-panel.js.map
@@ -0,0 +1 @@
{"version":3,"file":"split-panel.js","names":["buildProps"],"sources":["../../../../../../packages/components/splitter/src/split-panel.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type SplitterPanel from './split-panel.vue'\n\nexport interface SplitterPanelProps {\n min?: string | number\n max?: string | number\n size?: string | number\n resizable?: boolean\n collapsible?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `SplitterPanelProps` instead.\n */\nexport const splitterPanelProps = buildProps({\n min: {\n type: [String, Number],\n },\n max: {\n type: [String, Number],\n },\n size: {\n type: [String, Number],\n },\n resizable: {\n type: Boolean,\n default: true,\n },\n collapsible: Boolean,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `SplitterPanelProps` instead.\n */\nexport type SplitterPanelPropsPublic = ExtractPublicPropTypes<\n typeof splitterPanelProps\n>\nexport type SplitterPanelInstance = InstanceType<typeof SplitterPanel> & unknown\n\nexport const splitterPanelEmits = {\n 'update:size': (value: number | string) =>\n typeof value === 'number' || typeof value === 'string',\n}\n\nexport type SplitterPanelEmits = typeof splitterPanelEmits\n"],"mappings":";;;;;;;AAgBA,MAAa,qBAAqBA,2BAAW;CAC3C,KAAK,EACH,MAAM,CAAC,QAAQ,OAAO,EACvB;CACD,KAAK,EACH,MAAM,CAAC,QAAQ,OAAO,EACvB;CACD,MAAM,EACJ,MAAM,CAAC,QAAQ,OAAO,EACvB;CACD,WAAW;EACT,MAAM;EACN,SAAS;EACV;CACD,aAAa;CACd,CAAU;AAUX,MAAa,qBAAqB,EAChC,gBAAgB,UACd,OAAO,UAAU,YAAY,OAAO,UAAU,UACjD"}
@@ -0,0 +1,30 @@
import { SplitterPanelProps } from "./split-panel.js";
import * as vue from "vue";
//#region ../../packages/components/splitter/src/split-panel.vue.d.ts
declare var __VLS_1: {}, __VLS_15: {}, __VLS_18: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_1) => any;
} & {
'start-collapsible'?: (props: typeof __VLS_15) => any;
} & {
'end-collapsible'?: (props: typeof __VLS_18) => any;
};
declare const __VLS_base: vue.DefineComponent<SplitterPanelProps, {
/** @description splitter-panel html element */splitterPanelRef: vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
"update:size": (value: string | number) => void;
}, string, vue.PublicProps, Readonly<SplitterPanelProps> & Readonly<{
"onUpdate:size"?: ((value: string | number) => any) | undefined;
}>, {
resizable: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,136 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_error = require('../../../utils/error.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_useSize = require('./hooks/useSize.js');
const require_type = require('./type.js');
const require_split_panel = require('./split-panel.js');
const require_usePanel = require('./hooks/usePanel.js');
const require_split_bar = require('./split-bar.js');
let vue = require("vue");
//#region ../../packages/components/splitter/src/split-panel.vue?vue&type=script&setup=true&lang.ts
const COMPONENT_NAME = "ElSplitterPanel";
var split_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: COMPONENT_NAME,
__name: "split-panel",
props: require_split_panel.splitterPanelProps,
emits: require_split_panel.splitterPanelEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const ns = require_index.useNamespace("splitter-panel");
const props = __props;
const emits = __emit;
const splitterContext = (0, vue.inject)(require_type.splitterRootContextKey);
if (!splitterContext) require_error.throwError(COMPONENT_NAME, "usage: <el-splitter><el-splitter-panel /></el-splitter/>");
const { panels, layout, lazy, containerSize, pxSizes } = (0, vue.toRefs)(splitterContext);
const { registerPanel, unregisterPanel, onCollapse, onMoveEnd, onMoveStart, onMoving } = splitterContext;
const panelEl = (0, vue.ref)();
const instance = (0, vue.getCurrentInstance)();
const uid = instance.uid;
const index = (0, vue.ref)(0);
const panel = (0, vue.computed)(() => panels.value[index.value]);
const setIndex = (val) => {
index.value = val;
};
const panelSize = (0, vue.computed)(() => {
if (!panel.value) return 0;
return pxSizes.value[index.value] ?? 0;
});
const nextSize = (0, vue.computed)(() => {
if (!panel.value) return 0;
return pxSizes.value[index.value + 1] ?? 0;
});
const nextPanel = (0, vue.computed)(() => {
if (panel.value) return panels.value[index.value + 1];
return null;
});
const isResizable = (0, vue.computed)(() => {
if (!nextPanel.value) return false;
return props.resizable && nextPanel.value?.resizable && (panelSize.value !== 0 || !props.min) && (nextSize.value !== 0 || !nextPanel.value.min);
});
const isShowBar = (0, vue.computed)(() => {
if (!panel.value) return false;
return index.value !== panels.value.length - 1;
});
const startCollapsible = (0, vue.computed)(() => require_usePanel.isCollapsible(panel.value, panelSize.value, nextPanel.value, nextSize.value));
const endCollapsible = (0, vue.computed)(() => require_usePanel.isCollapsible(nextPanel.value, nextSize.value, panel.value, panelSize.value));
function sizeToPx(str) {
if (require_useSize.isPct(str)) return require_useSize.getPct(str) * containerSize.value || 0;
else if (require_useSize.isPx(str)) return require_useSize.getPx(str);
return str ?? 0;
}
let isSizeUpdating = false;
(0, vue.watch)(() => props.size, () => {
if (!isSizeUpdating && panel.value) {
if (!containerSize.value) {
panel.value.size = props.size;
return;
}
const size = sizeToPx(props.size);
const maxSize = sizeToPx(props.max);
const minSize = sizeToPx(props.min);
const finalSize = Math.min(Math.max(size, minSize || 0), maxSize || size);
if (finalSize !== size) emits("update:size", finalSize);
panel.value.size = finalSize;
}
});
(0, vue.watch)(() => panel.value?.size, (val) => {
if (val !== props.size) {
isSizeUpdating = true;
emits("update:size", val);
(0, vue.nextTick)(() => isSizeUpdating = false);
}
});
(0, vue.watch)(() => props.resizable, (val) => {
if (panel.value) panel.value.resizable = val;
});
const _panel = (0, vue.reactive)({
uid,
getVnode: () => instance.vnode,
setIndex,
...props,
collapsible: (0, vue.computed)(() => require_usePanel.getCollapsible(props.collapsible))
});
registerPanel(_panel);
(0, vue.onBeforeUnmount)(() => unregisterPanel(_panel));
__expose({ splitterPanelRef: panelEl });
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
ref_key: "panelEl",
ref: panelEl,
class: [(0, vue.unref)(ns).b()],
style: { flexBasis: `${panelSize.value}px` }
}, _ctx.$attrs), [(0, vue.renderSlot)(_ctx.$slots, "default")], 16), isShowBar.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_split_bar.default, {
key: 0,
index: index.value,
layout: (0, vue.unref)(layout),
lazy: (0, vue.unref)(lazy),
resizable: isResizable.value,
"start-collapsible": startCollapsible.value,
"end-collapsible": endCollapsible.value,
onMoveStart: (0, vue.unref)(onMoveStart),
onMoving: (0, vue.unref)(onMoving),
onMoveEnd: (0, vue.unref)(onMoveEnd),
onCollapse: (0, vue.unref)(onCollapse)
}, {
"start-collapsible": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "start-collapsible")]),
"end-collapsible": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "end-collapsible")]),
_: 3
}, 8, [
"index",
"layout",
"lazy",
"resizable",
"start-collapsible",
"end-collapsible",
"onMoveStart",
"onMoving",
"onMoveEnd",
"onCollapse"
])) : (0, vue.createCommentVNode)("v-if", true)], 64);
};
}
});
//#endregion
exports.default = split_panel_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=split-panel.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_split_panel_vue_vue_type_script_setup_true_lang = require('./split-panel.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/splitter/src/split-panel.vue
var split_panel_default = require_split_panel_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = split_panel_default;
//# sourceMappingURL=split-panel2.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,32 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { Layout } from "./type.js";
import { _default } from "./splitter.vue.js";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/splitter/src/splitter.d.ts
interface SplitterProps {
layout?: Layout;
lazy?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `SplitterProps` instead.
*/
declare const splitterProps: {
readonly layout: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
readonly lazy: BooleanConstructor;
};
/**
* @deprecated Removed after 3.0.0, Use `SplitterProps` instead.
*/
type SplitterPropsPublic = ExtractPublicPropTypes<typeof splitterProps>;
type SplitterInstance = InstanceType<typeof _default> & unknown;
declare const splitterEmits: {
resizeStart: (index: number, sizes: number[]) => boolean;
resize: (index: number, sizes: number[]) => boolean;
resizeEnd: (index: number, sizes: number[]) => boolean;
collapse: (index: number, type: "start" | "end", sizes: number[]) => boolean;
};
type SplitterEmits = typeof splitterEmits;
//#endregion
export { SplitterEmits, SplitterInstance, SplitterProps, SplitterPropsPublic, splitterEmits, splitterProps };
@@ -0,0 +1,26 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
//#region ../../packages/components/splitter/src/splitter.ts
/**
* @deprecated Removed after 3.0.0, Use `SplitterProps` instead.
*/
const splitterProps = require_runtime.buildProps({
layout: {
type: String,
default: "horizontal",
values: ["horizontal", "vertical"]
},
lazy: Boolean
});
const splitterEmits = {
resizeStart: (index, sizes) => true,
resize: (index, sizes) => true,
resizeEnd: (index, sizes) => true,
collapse: (index, type, sizes) => true
};
//#endregion
exports.splitterEmits = splitterEmits;
exports.splitterProps = splitterProps;
//# sourceMappingURL=splitter.js.map
@@ -0,0 +1 @@
{"version":3,"file":"splitter.js","names":["buildProps"],"sources":["../../../../../../packages/components/splitter/src/splitter.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type Splitter from './splitter.vue'\nimport type { Layout } from './type'\n\nexport interface SplitterProps {\n layout?: Layout\n lazy?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `SplitterProps` instead.\n */\nexport const splitterProps = buildProps({\n layout: {\n type: String,\n default: 'horizontal',\n values: ['horizontal', 'vertical'] as const,\n },\n lazy: Boolean,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `SplitterProps` instead.\n */\nexport type SplitterPropsPublic = ExtractPublicPropTypes<typeof splitterProps>\nexport type SplitterInstance = InstanceType<typeof Splitter> & unknown\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\nexport const splitterEmits = {\n resizeStart: (index: number, sizes: number[]) => true,\n resize: (index: number, sizes: number[]) => true,\n resizeEnd: (index: number, sizes: number[]) => true,\n collapse: (index: number, type: 'start' | 'end', sizes: number[]) => true,\n}\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\nexport type SplitterEmits = typeof splitterEmits\n"],"mappings":";;;;;;;AAcA,MAAa,gBAAgBA,2BAAW;CACtC,QAAQ;EACN,MAAM;EACN,SAAS;EACT,QAAQ,CAAC,cAAc,WAAW;EACnC;CACD,MAAM;CACP,CAAU;AASX,MAAa,gBAAgB;CAC3B,cAAc,OAAe,UAAoB;CACjD,SAAS,OAAe,UAAoB;CAC5C,YAAY,OAAe,UAAoB;CAC/C,WAAW,OAAe,MAAuB,UAAoB;CACtE"}
@@ -0,0 +1,31 @@
import { Layout } from "./type.js";
import { SplitterProps } from "./splitter.js";
import * as vue from "vue";
//#region ../../packages/components/splitter/src/splitter.vue.d.ts
declare var __VLS_1: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_1) => any;
};
declare const __VLS_base: vue.DefineComponent<SplitterProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
resize: (index: number, sizes: number[]) => void;
collapse: (index: number, type: "end" | "start", sizes: number[]) => void;
resizeStart: (index: number, sizes: number[]) => void;
resizeEnd: (index: number, sizes: number[]) => void;
}, string, vue.PublicProps, Readonly<SplitterProps> & Readonly<{
onResize?: ((index: number, sizes: number[]) => any) | undefined;
onCollapse?: ((index: number, type: "end" | "start", sizes: number[]) => any) | undefined;
onResizeStart?: ((index: number, sizes: number[]) => any) | undefined;
onResizeEnd?: ((index: number, sizes: number[]) => any) | undefined;
}>, {
layout: Layout;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,89 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_index$1 = require('../../../hooks/use-ordered-children/index.js');
const require_splitter = require('./splitter.js');
const require_useContainer = require('./hooks/useContainer.js');
const require_useSize = require('./hooks/useSize.js');
const require_useResize = require('./hooks/useResize.js');
const require_type = require('./type.js');
let vue = require("vue");
//#region ../../packages/components/splitter/src/splitter.vue?vue&type=script&setup=true&lang.ts
var splitter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElSplitter",
__name: "splitter",
props: require_splitter.splitterProps,
emits: require_splitter.splitterEmits,
setup(__props, { emit: __emit }) {
const ns = require_index.useNamespace("splitter");
const emits = __emit;
const props = __props;
const layout = (0, vue.toRef)(props, "layout");
const lazy = (0, vue.toRef)(props, "lazy");
const { containerEl, containerSize } = require_useContainer.useContainer(layout);
const { removeChild: unregisterPanel, children: panels, addChild: registerPanel, ChildrenSorter: PanelsSorter } = require_index$1.useOrderedChildren((0, vue.getCurrentInstance)(), "ElSplitterPanel");
(0, vue.watch)(panels, () => {
movingIndex.value = null;
panels.value.forEach((instance, index) => {
instance.setIndex(index);
});
});
const { percentSizes, pxSizes } = require_useSize.useSize(panels, containerSize);
const { lazyOffset, movingIndex, onMoveStart, onMoving, onMoveEnd, onCollapse } = require_useResize.useResize(panels, containerSize, pxSizes, lazy);
const splitterStyles = (0, vue.computed)(() => {
return { [ns.cssVarBlockName("bar-offset")]: lazy.value ? `${lazyOffset.value}px` : void 0 };
});
const onResizeStart = (index) => {
onMoveStart(index);
emits("resizeStart", index, pxSizes.value);
};
const onResize = (index, offset) => {
onMoving(index, offset);
if (!lazy.value) emits("resize", index, pxSizes.value);
};
const onResizeEnd = async (index) => {
onMoveEnd();
await (0, vue.nextTick)();
emits("resizeEnd", index, pxSizes.value);
};
const onCollapsible = (index, type) => {
onCollapse(index, type);
emits("collapse", index, type, pxSizes.value);
};
(0, vue.provide)(require_type.splitterRootContextKey, (0, vue.reactive)({
panels,
percentSizes,
pxSizes,
layout,
lazy,
movingIndex,
containerSize,
onMoveStart: onResizeStart,
onMoving: onResize,
onMoveEnd: onResizeEnd,
onCollapse: onCollapsible,
registerPanel,
unregisterPanel
}));
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
ref_key: "containerEl",
ref: containerEl,
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).b(), (0, vue.unref)(ns).e(layout.value)]),
style: (0, vue.normalizeStyle)(splitterStyles.value)
}, [
(0, vue.renderSlot)(_ctx.$slots, "default"),
(0, vue.createVNode)((0, vue.unref)(PanelsSorter)),
(0, vue.createCommentVNode)(" Prevent iframe touch events from breaking "),
(0, vue.unref)(movingIndex) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("mask"), (0, vue.unref)(ns).e(`mask-${layout.value}`)])
}, null, 2)) : (0, vue.createCommentVNode)("v-if", true)
], 6);
};
}
});
//#endregion
exports.default = splitter_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=splitter.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"splitter.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/splitter/src/splitter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n computed,\n getCurrentInstance,\n nextTick,\n provide,\n reactive,\n toRef,\n watch,\n} from 'vue'\nimport { useNamespace, useOrderedChildren } from '@element-plus/hooks'\nimport { useContainer, useResize, useSize } from './hooks'\nimport { splitterEmits } from './splitter'\nimport { splitterRootContextKey } from './type'\n\nimport type { PanelItemState } from './type'\nimport type { SplitterProps } from './splitter'\n\nconst ns = useNamespace('splitter')\n\ndefineOptions({\n name: 'ElSplitter',\n})\n\nconst emits = defineEmits(splitterEmits)\n\nconst props = withDefaults(defineProps<SplitterProps>(), {\n layout: 'horizontal',\n})\nconst layout = toRef(props, 'layout')\nconst lazy = toRef(props, 'lazy')\n\nconst { containerEl, containerSize } = useContainer(layout)\n\nconst {\n removeChild: unregisterPanel,\n children: panels,\n addChild: registerPanel,\n ChildrenSorter: PanelsSorter,\n} = useOrderedChildren<PanelItemState>(getCurrentInstance()!, 'ElSplitterPanel')\n\nwatch(panels, () => {\n movingIndex.value = null\n panels.value.forEach((instance: PanelItemState, index: number) => {\n instance.setIndex(index)\n })\n})\n\nconst { percentSizes, pxSizes } = useSize(panels, containerSize)\n\nconst {\n lazyOffset,\n movingIndex,\n onMoveStart,\n onMoving,\n onMoveEnd,\n onCollapse,\n} = useResize(panels, containerSize, pxSizes, lazy)\n\nconst splitterStyles = computed(() => {\n return {\n [ns.cssVarBlockName('bar-offset')]: lazy.value\n ? `${lazyOffset.value}px`\n : undefined,\n }\n})\n\nconst onResizeStart = (index: number) => {\n onMoveStart(index)\n emits('resizeStart', index, pxSizes.value)\n}\n\nconst onResize = (index: number, offset: number) => {\n onMoving(index, offset)\n\n if (!lazy.value) {\n emits('resize', index, pxSizes.value)\n }\n}\n\nconst onResizeEnd = async (index: number) => {\n onMoveEnd()\n await nextTick()\n emits('resizeEnd', index, pxSizes.value)\n}\n\nconst onCollapsible = (index: number, type: 'start' | 'end') => {\n onCollapse(index, type)\n emits('collapse', index, type, pxSizes.value)\n}\n\nprovide(\n splitterRootContextKey,\n reactive({\n panels,\n percentSizes,\n pxSizes,\n layout,\n lazy,\n movingIndex,\n containerSize,\n onMoveStart: onResizeStart,\n onMoving: onResize,\n onMoveEnd: onResizeEnd,\n onCollapse: onCollapsible,\n registerPanel,\n unregisterPanel,\n })\n)\n</script>\n\n<template>\n <div\n ref=\"containerEl\"\n :class=\"[ns.b(), ns.e(layout)]\"\n :style=\"splitterStyles\"\n >\n <slot />\n <panels-sorter />\n <!-- Prevent iframe touch events from breaking -->\n <div v-if=\"movingIndex\" :class=\"[ns.e('mask'), ns.e(`mask-${layout}`)]\" />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAkBA,MAAM,KAAK,2BAAa,WAAU;EAMlC,MAAM,QAAQ;EAEd,MAAM,QAAQ;EAGd,MAAM,wBAAe,OAAO,SAAQ;EACpC,MAAM,sBAAa,OAAO,OAAM;EAEhC,MAAM,EAAE,aAAa,kBAAkB,kCAAa,OAAM;EAE1D,MAAM,EACJ,aAAa,iBACb,UAAU,QACV,UAAU,eACV,gBAAgB,iBACd,gEAAuD,EAAG,kBAAiB;AAE/E,iBAAM,cAAc;AAClB,eAAY,QAAQ;AACpB,UAAO,MAAM,SAAS,UAA0B,UAAkB;AAChE,aAAS,SAAS,MAAK;KACxB;IACF;EAED,MAAM,EAAE,cAAc,YAAY,wBAAQ,QAAQ,cAAa;EAE/D,MAAM,EACJ,YACA,aACA,aACA,UACA,WACA,eACE,4BAAU,QAAQ,eAAe,SAAS,KAAI;EAElD,MAAM,yCAAgC;AACpC,UAAO,GACJ,GAAG,gBAAgB,aAAa,GAAG,KAAK,QACrC,GAAG,WAAW,MAAM,MACpB,QACN;IACD;EAED,MAAM,iBAAiB,UAAkB;AACvC,eAAY,MAAK;AACjB,SAAM,eAAe,OAAO,QAAQ,MAAK;;EAG3C,MAAM,YAAY,OAAe,WAAmB;AAClD,YAAS,OAAO,OAAM;AAEtB,OAAI,CAAC,KAAK,MACR,OAAM,UAAU,OAAO,QAAQ,MAAK;;EAIxC,MAAM,cAAc,OAAO,UAAkB;AAC3C,cAAU;AACV,4BAAe;AACf,SAAM,aAAa,OAAO,QAAQ,MAAK;;EAGzC,MAAM,iBAAiB,OAAe,SAA0B;AAC9D,cAAW,OAAO,KAAI;AACtB,SAAM,YAAY,OAAO,MAAM,QAAQ,MAAK;;AAG9C,mBACE,uDACS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GACA,aAAa;GACb,UAAU;GACV,WAAW;GACX,YAAY;GACZ;GACA;GACD,CAAA,CACH;;4DAaQ,OAAA;aARA;IAAJ,KAAI;IACH,+BAAK,gBAAG,GAAE,CAAC,GAAC,iBAAI,GAAE,CAAC,EAAE,OAAA,MAAM,CAAA,CAAA;IAC3B,+BAAO,eAAA,MAAc;;wBAEd,KAAA,QAAA,UAAA;wCACS,aAAA,CAAA;gCACjB,8CAAkD;mBACvC,YAAW,sDAAoD,OAAA;;KAAjD,+BAAK,gBAAG,GAAE,CAAC,EAAC,OAAA,iBAAU,GAAE,CAAC,EAAC,QAAS,OAAA,QAAM,CAAA,CAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_splitter_vue_vue_type_script_setup_true_lang = require('./splitter.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/splitter/src/splitter.vue
var splitter_default = require_splitter_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = splitter_default;
//# sourceMappingURL=splitter2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"splitter2.js","names":[],"sources":["../../../../../../packages/components/splitter/src/splitter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n computed,\n getCurrentInstance,\n nextTick,\n provide,\n reactive,\n toRef,\n watch,\n} from 'vue'\nimport { useNamespace, useOrderedChildren } from '@element-plus/hooks'\nimport { useContainer, useResize, useSize } from './hooks'\nimport { splitterEmits } from './splitter'\nimport { splitterRootContextKey } from './type'\n\nimport type { PanelItemState } from './type'\nimport type { SplitterProps } from './splitter'\n\nconst ns = useNamespace('splitter')\n\ndefineOptions({\n name: 'ElSplitter',\n})\n\nconst emits = defineEmits(splitterEmits)\n\nconst props = withDefaults(defineProps<SplitterProps>(), {\n layout: 'horizontal',\n})\nconst layout = toRef(props, 'layout')\nconst lazy = toRef(props, 'lazy')\n\nconst { containerEl, containerSize } = useContainer(layout)\n\nconst {\n removeChild: unregisterPanel,\n children: panels,\n addChild: registerPanel,\n ChildrenSorter: PanelsSorter,\n} = useOrderedChildren<PanelItemState>(getCurrentInstance()!, 'ElSplitterPanel')\n\nwatch(panels, () => {\n movingIndex.value = null\n panels.value.forEach((instance: PanelItemState, index: number) => {\n instance.setIndex(index)\n })\n})\n\nconst { percentSizes, pxSizes } = useSize(panels, containerSize)\n\nconst {\n lazyOffset,\n movingIndex,\n onMoveStart,\n onMoving,\n onMoveEnd,\n onCollapse,\n} = useResize(panels, containerSize, pxSizes, lazy)\n\nconst splitterStyles = computed(() => {\n return {\n [ns.cssVarBlockName('bar-offset')]: lazy.value\n ? `${lazyOffset.value}px`\n : undefined,\n }\n})\n\nconst onResizeStart = (index: number) => {\n onMoveStart(index)\n emits('resizeStart', index, pxSizes.value)\n}\n\nconst onResize = (index: number, offset: number) => {\n onMoving(index, offset)\n\n if (!lazy.value) {\n emits('resize', index, pxSizes.value)\n }\n}\n\nconst onResizeEnd = async (index: number) => {\n onMoveEnd()\n await nextTick()\n emits('resizeEnd', index, pxSizes.value)\n}\n\nconst onCollapsible = (index: number, type: 'start' | 'end') => {\n onCollapse(index, type)\n emits('collapse', index, type, pxSizes.value)\n}\n\nprovide(\n splitterRootContextKey,\n reactive({\n panels,\n percentSizes,\n pxSizes,\n layout,\n lazy,\n movingIndex,\n containerSize,\n onMoveStart: onResizeStart,\n onMoving: onResize,\n onMoveEnd: onResizeEnd,\n onCollapse: onCollapsible,\n registerPanel,\n unregisterPanel,\n })\n)\n</script>\n\n<template>\n <div\n ref=\"containerEl\"\n :class=\"[ns.b(), ns.e(layout)]\"\n :style=\"splitterStyles\"\n >\n <slot />\n <panels-sorter />\n <!-- Prevent iframe touch events from breaking -->\n <div v-if=\"movingIndex\" :class=\"[ns.e('mask'), ns.e(`mask-${layout}`)]\" />\n </div>\n</template>\n"],"mappings":""}
@@ -0,0 +1,19 @@
import { InjectionKey, UnwrapRef, VNode } from "vue";
//#region ../../packages/components/splitter/src/type.d.ts
type Layout = 'horizontal' | 'vertical';
type PanelItemState = UnwrapRef<{
uid: number;
getVnode: () => VNode;
collapsible: {
start?: boolean;
end?: boolean;
};
max?: number | string;
min?: number | string;
resizable: boolean;
size?: number | string;
setIndex: (val: number) => void;
}>;
//#endregion
export { Layout, PanelItemState };
@@ -0,0 +1,8 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/splitter/src/type.ts
const splitterRootContextKey = Symbol("splitterRootContextKey");
//#endregion
exports.splitterRootContextKey = splitterRootContextKey;
//# sourceMappingURL=type.js.map
@@ -0,0 +1 @@
{"version":3,"file":"type.js","names":[],"sources":["../../../../../../packages/components/splitter/src/type.ts"],"sourcesContent":["import type { InjectionKey, UnwrapRef, VNode } from 'vue'\n\nexport type Layout = 'horizontal' | 'vertical'\n\nexport type PanelItemState = UnwrapRef<{\n uid: number\n getVnode: () => VNode\n collapsible: { start?: boolean; end?: boolean }\n max?: number | string\n min?: number | string\n resizable: boolean\n size?: number | string\n setIndex: (val: number) => void\n}>\n\nexport interface SplitterRootContext {\n panels: PanelItemState[]\n layout: Layout\n lazy: boolean\n containerSize: number\n movingIndex: { index: number; confirmed: boolean } | null\n percentSizes: number[]\n pxSizes: number[]\n registerPanel: (pane: PanelItemState) => void\n unregisterPanel: (pane: PanelItemState) => void\n onCollapse: (index: number, type: 'start' | 'end') => void\n onMoveEnd: (index: number) => Promise<void>\n onMoveStart: (index: number) => void\n onMoving: (index: number, offset: number) => void\n}\n\nexport const splitterRootContextKey: InjectionKey<SplitterRootContext> = Symbol(\n 'splitterRootContextKey'\n)\n"],"mappings":";;;AA+BA,MAAa,yBAA4D,OACvE,yBACD"}
@@ -0,0 +1,3 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require("element-plus/theme-chalk/el-splitter.css");
@@ -0,0 +1,3 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require("element-plus/theme-chalk/src/splitter.scss");