前端初始化
This commit is contained in:
“hsc”
+4
@@ -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 };
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import { useContainer } from "./useContainer.mjs";
|
||||
import { getPct, getPx, isPct, isPx, useSize } from "./useSize.mjs";
|
||||
import { useResize } from "./useResize.mjs";
|
||||
export { getPct, getPx, isPct, isPx, useContainer, useResize, useSize };
|
||||
+10
@@ -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 };
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import { useElementSize } from "@vueuse/core";
|
||||
import { computed, ref } from "vue";
|
||||
//#region ../../packages/components/splitter/src/hooks/useContainer.ts
|
||||
function useContainer(layout) {
|
||||
const containerEl = ref();
|
||||
const { width, height } = useElementSize(containerEl);
|
||||
return {
|
||||
containerEl,
|
||||
containerSize: computed(() => {
|
||||
return layout.value === "horizontal" ? width.value : height.value;
|
||||
})
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
export { useContainer };
|
||||
|
||||
//# sourceMappingURL=useContainer.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"useContainer.mjs","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,cAAc,KAAqB;CACzC,MAAM,EAAE,OAAO,WAAW,eAAe,YAAY;CAMrD,OAAO;EAAE;EAAa,eAJA,eAAe;GACnC,OAAO,OAAO,UAAU,eAAe,MAAM,QAAQ,OAAO;IAG3B;EAAE"}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import { PanelItemState } from "../type.js";
|
||||
|
||||
//#region ../../packages/components/splitter/src/hooks/usePanel.d.ts
|
||||
declare function getCollapsible(collapsible: boolean | {
|
||||
start?: boolean;
|
||||
end?: boolean;
|
||||
}): {
|
||||
start?: boolean;
|
||||
end?: boolean;
|
||||
};
|
||||
declare function isCollapsible(panel: PanelItemState | null | undefined, size: number, nextPanel: PanelItemState | null | undefined, nextSize: number): boolean;
|
||||
//#endregion
|
||||
export { getCollapsible, isCollapsible };
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import { isObject } from "../../../../utils/types.mjs";
|
||||
//#region ../../packages/components/splitter/src/hooks/usePanel.ts
|
||||
function getCollapsible(collapsible) {
|
||||
if (collapsible && 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
|
||||
export { getCollapsible, isCollapsible };
|
||||
|
||||
//# sourceMappingURL=usePanel.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"usePanel.mjs","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;CACA,IAAI,eAAe,SAAS,YAAY,EACtC,OAAO;CAET,OAAO;EACL,OAAO,CAAC,CAAC;EACT,KAAK,CAAC,CAAC;EACR;;AAGH,SAAgB,cACd,OACA,MACA,WACA,UACA;CAEA,IAAI,OAAO,YAAY,OAAO,OAAO,GACnC,OAAO;CAIT,IAAI,WAAW,YAAY,SAAS,aAAa,KAAK,OAAO,GAC3D,OAAO;CAGT,OAAO"}
|
||||
+23
@@ -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 };
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
import { NOOP } from "../../../../utils/functions.mjs";
|
||||
import { getPct, getPx, isPct, isPx } from "./useSize.mjs";
|
||||
import { clamp } from "lodash-unified";
|
||||
import { computed, ref, watch } from "vue";
|
||||
//#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 (isPct(str)) return ptg2px(getPct(str));
|
||||
else if (isPx(str)) return getPx(str);
|
||||
return str ?? defaultLimit;
|
||||
}
|
||||
const lazyOffset = ref(0);
|
||||
const movingIndex = ref(null);
|
||||
let cachePxSizes = [];
|
||||
let updatePanelSizes = NOOP;
|
||||
const limitSizes = computed(() => panels.value.map((item) => [item.min, item.max]));
|
||||
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 = 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.map((size, i) => size <= 0 ? getLimitSize(limitSizes.value[i]?.[0], 0) : size));
|
||||
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 = clamp(cacheCollapsedSize[index], 0, totalSize);
|
||||
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
|
||||
export { useResize };
|
||||
|
||||
//# sourceMappingURL=useResize.mjs.map
|
||||
+1
File diff suppressed because one or more lines are too long
+14
@@ -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 };
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
import { isString } from "../../../../utils/types.mjs";
|
||||
import { computed, ref, watch } from "vue";
|
||||
//#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 isString(itemSize) && itemSize.endsWith("%");
|
||||
}
|
||||
function isPx(itemSize) {
|
||||
return isString(itemSize) && itemSize.endsWith("px");
|
||||
}
|
||||
function useSize(panels, containerSize) {
|
||||
const propSizes = computed(() => panels.value.map((i) => i.size));
|
||||
const panelCounts = computed(() => panels.value.length);
|
||||
const percentSizes = ref([]);
|
||||
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: computed(() => percentSizes.value.map(ptg2px))
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
export { getPct, getPx, isPct, isPx, useSize };
|
||||
|
||||
//# sourceMappingURL=useSize.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"useSize.mjs","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;CAClC,OAAO,OAAO,IAAI,MAAM,GAAG,GAAG,CAAC,GAAG;;AAGpC,SAAgB,MAAM,KAAa;CACjC,OAAO,OAAO,IAAI,MAAM,GAAG,GAAG,CAAC;;AAGjC,SAAgB,MACd,UACoB;CACpB,OAAO,SAAS,SAAS,IAAI,SAAS,SAAS,IAAI;;AAGrD,SAAgB,KACd,UACoB;CACpB,OAAO,SAAS,SAAS,IAAI,SAAS,SAAS,KAAK;;AAGtD,SAAgB,QACd,QACA,eACA;CACA,MAAM,YAAY,eAAe,OAAO,MAAM,KAAK,MAAM,EAAE,KAAK,CAAC;CAEjE,MAAM,cAAc,eAAe,OAAO,MAAM,OAAO;CAEvD,MAAM,eAAe,IAAc,EAAE,CAAC;CAEtC,MAAM;EAAC;EAAW;EAAa;EAAc,QAAQ;EACnD,IAAI,UAAkC,EAAE;EACxC,IAAI,aAAa;EAGjB,KAAK,IAAI,IAAI,GAAG,IAAI,YAAY,OAAO,KAAK,GAAG;GAC7C,MAAM,WAAW,OAAO,MAAM,IAAI;GAElC,IAAI,MAAM,SAAS,EACjB,QAAQ,KAAK,OAAO,SAAS;QACxB,IAAI,KAAK,SAAS,EACvB,QAAQ,KAAK,MAAM,SAAS,GAAG,cAAc;QACxC,IAAI,YAAY,aAAa,GAAG;IACrC,MAAM,MAAM,OAAO,SAAS;IAE5B,IAAI,CAAC,OAAO,MAAM,IAAI,EACpB,QAAQ,KAAK,MAAM,cAAc;UAE9B;IACL,cAAc;IACd,QAAQ,KAAK,KAAA;;;EAIjB,MAAM,WAAW,QAAQ,QAAgB,KAAK,QAAQ,OAAO,OAAO,IAAI,EAAE;EAE1E,IAAI,WAAW,KAAK,CAAC,YAAY;GAE/B,MAAM,QAAQ,IAAI;GAClB,UAAU,QAAQ,KAAK,QAAS,QAAQ,KAAA,IAAY,IAAI,MAAM,MAAO;SAChE;GAEL,MAAM,WAAW,IAAI,YAAY;GACjC,UAAU,QAAQ,KAAK,QAAS,QAAQ,KAAA,IAAY,UAAU,IAAK;;EAGrE,aAAa,QAAQ;GACrB;CAEF,MAAM,UAAU,QAAgB,MAAM,cAAc;CAGpD,OAAO;EAAE;EAAc,SAFP,eAAe,aAAa,MAAM,IAAI,OAAO,CAE/B;EAAE"}
|
||||
Reference in New Issue
Block a user