routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+236
@@ -0,0 +1,236 @@
|
||||
import { Ft as onMounted, Kn as ref, Nt as onDeactivated, Qn as toRef, U as computed, Ut as provide, Wn as reactive, Yn as shallowRef, cn as useId, jt as onBeforeUnmount, kt as onActivated, xt as inject } from "./vue.runtime.esm-bundler-BvoXUmaf.js";
|
||||
import { T as findChildrenWithProvide, _ as convertToUnit, it as consoleWarn, l as propsFactory, s as getCurrentInstance } from "./defineComponent-DB6xIcDy.js";
|
||||
import { t as useResizeObserver } from "./resizeObserver-C12jWpYk.js";
|
||||
//#region node_modules/vuetify/lib/composables/layout.js
|
||||
var VuetifyLayoutKey = Symbol.for("vuetify:layout");
|
||||
var VuetifyLayoutItemKey = Symbol.for("vuetify:layout-item");
|
||||
var ROOT_ZINDEX = 1e3;
|
||||
var makeLayoutProps = propsFactory({
|
||||
overlaps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
fullHeight: Boolean
|
||||
}, "layout");
|
||||
var makeLayoutItemProps = propsFactory({
|
||||
name: { type: String },
|
||||
order: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
absolute: Boolean
|
||||
}, "layout-item");
|
||||
function useLayout() {
|
||||
const layout = inject(VuetifyLayoutKey);
|
||||
if (!layout) throw new Error("[Vuetify] Could not find injected layout");
|
||||
return {
|
||||
getLayoutItem: layout.getLayoutItem,
|
||||
mainRect: layout.mainRect,
|
||||
mainStyles: layout.mainStyles
|
||||
};
|
||||
}
|
||||
function useLayoutItem(options) {
|
||||
const layout = inject(VuetifyLayoutKey);
|
||||
if (!layout) throw new Error("[Vuetify] Could not find injected layout");
|
||||
const id = options.id ?? `layout-item-${useId()}`;
|
||||
const vm = getCurrentInstance("useLayoutItem");
|
||||
provide(VuetifyLayoutItemKey, { id });
|
||||
const isKeptAlive = shallowRef(false);
|
||||
onDeactivated(() => isKeptAlive.value = true);
|
||||
onActivated(() => isKeptAlive.value = false);
|
||||
const { layoutItemStyles, layoutItemScrimStyles } = layout.register(vm, {
|
||||
...options,
|
||||
active: computed(() => isKeptAlive.value ? false : options.active.value),
|
||||
id
|
||||
});
|
||||
onBeforeUnmount(() => layout.unregister(id));
|
||||
return {
|
||||
layoutItemStyles,
|
||||
layoutRect: layout.layoutRect,
|
||||
layoutItemScrimStyles
|
||||
};
|
||||
}
|
||||
var generateLayers = (layout, positions, layoutSizes, activeItems) => {
|
||||
let previousLayer = {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
};
|
||||
const layers = [{
|
||||
id: "",
|
||||
layer: { ...previousLayer }
|
||||
}];
|
||||
for (const id of layout) {
|
||||
const position = positions.get(id);
|
||||
const amount = layoutSizes.get(id);
|
||||
const active = activeItems.get(id);
|
||||
if (!position || !amount || !active) continue;
|
||||
const layer = {
|
||||
...previousLayer,
|
||||
[position.value]: parseInt(previousLayer[position.value], 10) + (active.value ? parseInt(amount.value, 10) : 0)
|
||||
};
|
||||
layers.push({
|
||||
id,
|
||||
layer
|
||||
});
|
||||
previousLayer = layer;
|
||||
}
|
||||
return layers;
|
||||
};
|
||||
function createLayout(props) {
|
||||
const parentLayout = inject(VuetifyLayoutKey, null);
|
||||
const rootZIndex = computed(() => parentLayout ? parentLayout.rootZIndex.value - 100 : ROOT_ZINDEX);
|
||||
const registered = ref([]);
|
||||
const positions = reactive(/* @__PURE__ */ new Map());
|
||||
const layoutSizes = reactive(/* @__PURE__ */ new Map());
|
||||
const priorities = reactive(/* @__PURE__ */ new Map());
|
||||
const activeItems = reactive(/* @__PURE__ */ new Map());
|
||||
const disabledTransitions = reactive(/* @__PURE__ */ new Map());
|
||||
const { resizeRef, contentRect: layoutRect } = useResizeObserver();
|
||||
const computedOverlaps = computed(() => {
|
||||
const map = /* @__PURE__ */ new Map();
|
||||
const overlaps = props.overlaps ?? [];
|
||||
for (const overlap of overlaps.filter((item) => item.includes(":"))) {
|
||||
const [top, bottom] = overlap.split(":");
|
||||
if (!registered.value.includes(top) || !registered.value.includes(bottom)) continue;
|
||||
const topPosition = positions.get(top);
|
||||
const bottomPosition = positions.get(bottom);
|
||||
const topAmount = layoutSizes.get(top);
|
||||
const bottomAmount = layoutSizes.get(bottom);
|
||||
if (!topPosition || !bottomPosition || !topAmount || !bottomAmount) continue;
|
||||
map.set(bottom, {
|
||||
position: topPosition.value,
|
||||
amount: parseInt(topAmount.value, 10)
|
||||
});
|
||||
map.set(top, {
|
||||
position: bottomPosition.value,
|
||||
amount: -parseInt(bottomAmount.value, 10)
|
||||
});
|
||||
}
|
||||
return map;
|
||||
});
|
||||
const layers = computed(() => {
|
||||
const uniquePriorities = [...new Set([...priorities.values()].map((p) => p.value))].sort((a, b) => a - b);
|
||||
const layout = [];
|
||||
for (const p of uniquePriorities) {
|
||||
const items = registered.value.filter((id) => priorities.get(id)?.value === p);
|
||||
layout.push(...items);
|
||||
}
|
||||
return generateLayers(layout, positions, layoutSizes, activeItems);
|
||||
});
|
||||
const transitionsEnabled = computed(() => {
|
||||
return !Array.from(disabledTransitions.values()).some((ref) => ref.value);
|
||||
});
|
||||
const mainRect = computed(() => {
|
||||
return layers.value[layers.value.length - 1].layer;
|
||||
});
|
||||
const mainStyles = toRef(() => {
|
||||
return {
|
||||
"--v-layout-left": convertToUnit(mainRect.value.left),
|
||||
"--v-layout-right": convertToUnit(mainRect.value.right),
|
||||
"--v-layout-top": convertToUnit(mainRect.value.top),
|
||||
"--v-layout-bottom": convertToUnit(mainRect.value.bottom),
|
||||
...transitionsEnabled.value ? void 0 : { transition: "none" }
|
||||
};
|
||||
});
|
||||
const items = computed(() => {
|
||||
return layers.value.slice(1).map(({ id }, index) => {
|
||||
const { layer } = layers.value[index];
|
||||
const size = layoutSizes.get(id);
|
||||
const position = positions.get(id);
|
||||
return {
|
||||
id,
|
||||
...layer,
|
||||
size: Number(size.value),
|
||||
position: position.value
|
||||
};
|
||||
});
|
||||
});
|
||||
const getLayoutItem = (id) => {
|
||||
return items.value.find((item) => item.id === id);
|
||||
};
|
||||
const rootVm = getCurrentInstance("createLayout");
|
||||
const isMounted = shallowRef(false);
|
||||
onMounted(() => {
|
||||
isMounted.value = true;
|
||||
});
|
||||
provide(VuetifyLayoutKey, {
|
||||
register: (vm, { id, order, position, layoutSize, elementSize, active, disableTransitions, absolute }) => {
|
||||
priorities.set(id, order);
|
||||
positions.set(id, position);
|
||||
layoutSizes.set(id, layoutSize);
|
||||
activeItems.set(id, active);
|
||||
disableTransitions && disabledTransitions.set(id, disableTransitions);
|
||||
const instanceIndex = findChildrenWithProvide(VuetifyLayoutItemKey, rootVm?.vnode).indexOf(vm);
|
||||
if (instanceIndex > -1) registered.value.splice(instanceIndex, 0, id);
|
||||
else registered.value.push(id);
|
||||
const index = computed(() => items.value.findIndex((i) => i.id === id));
|
||||
const zIndex = computed(() => rootZIndex.value + layers.value.length * 2 - index.value * 2);
|
||||
return {
|
||||
layoutItemStyles: computed(() => {
|
||||
const isHorizontal = position.value === "left" || position.value === "right";
|
||||
const isOppositeHorizontal = position.value === "right";
|
||||
const isOppositeVertical = position.value === "bottom";
|
||||
const size = Number(elementSize.value ?? layoutSize.value);
|
||||
const transformFunction = `translate${isHorizontal ? "X" : "Y"}`;
|
||||
const transformValue = active.value ? 0 : (size === 0 ? 100 : size + 1) * (isOppositeHorizontal || isOppositeVertical ? 1 : -1);
|
||||
const unit = size === 0 ? "%" : "px";
|
||||
const styles = {
|
||||
[position.value]: 0,
|
||||
zIndex: zIndex.value,
|
||||
transform: `${transformFunction}(${transformValue}${unit})`,
|
||||
position: absolute.value || rootZIndex.value !== ROOT_ZINDEX ? "absolute" : "fixed",
|
||||
...transitionsEnabled.value ? void 0 : { transition: "none" }
|
||||
};
|
||||
if (!isMounted.value) return styles;
|
||||
const item = items.value[index.value];
|
||||
if (!item) consoleWarn(`[Vuetify] Could not find layout item "${id}"`);
|
||||
const overlap = computedOverlaps.value.get(id);
|
||||
if (overlap) item[overlap.position] += overlap.amount;
|
||||
return {
|
||||
...styles,
|
||||
height: isHorizontal ? `calc(100% - ${item.top}px - ${item.bottom}px)` : elementSize.value ? `${elementSize.value}px` : void 0,
|
||||
left: isOppositeHorizontal ? void 0 : `${item.left}px`,
|
||||
right: isOppositeHorizontal ? `${item.right}px` : void 0,
|
||||
top: position.value !== "bottom" ? `${item.top}px` : void 0,
|
||||
bottom: position.value !== "top" ? `${item.bottom}px` : void 0,
|
||||
width: !isHorizontal ? `calc(100% - ${item.left}px - ${item.right}px)` : elementSize.value ? `${elementSize.value}px` : void 0
|
||||
};
|
||||
}),
|
||||
layoutItemScrimStyles: computed(() => ({ zIndex: zIndex.value - 1 })),
|
||||
zIndex
|
||||
};
|
||||
},
|
||||
unregister: (id) => {
|
||||
priorities.delete(id);
|
||||
positions.delete(id);
|
||||
layoutSizes.delete(id);
|
||||
activeItems.delete(id);
|
||||
disabledTransitions.delete(id);
|
||||
registered.value = registered.value.filter((v) => v !== id);
|
||||
},
|
||||
mainRect,
|
||||
mainStyles,
|
||||
getLayoutItem,
|
||||
items,
|
||||
layoutRect,
|
||||
rootZIndex
|
||||
});
|
||||
return {
|
||||
layoutClasses: toRef(() => ["v-layout", { "v-layout--full-height": props.fullHeight }]),
|
||||
layoutStyles: toRef(() => ({
|
||||
zIndex: parentLayout ? rootZIndex.value : void 0,
|
||||
position: parentLayout ? "relative" : void 0,
|
||||
overflow: parentLayout ? "hidden" : void 0
|
||||
})),
|
||||
getLayoutItem,
|
||||
items,
|
||||
layoutRect,
|
||||
layoutRef: resizeRef
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
export { useLayoutItem as a, useLayout as i, makeLayoutItemProps as n, makeLayoutProps as r, createLayout as t };
|
||||
|
||||
//# sourceMappingURL=layout-C9QMoF7I.js.map
|
||||
Reference in New Issue
Block a user