@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
132 lines (131 loc) • 3.39 kB
JavaScript
import { a as e, d as t } from "../../resizable_utils-BComtrMV.js";
import { computed as n, createElementBlock as r, createElementVNode as i, inject as a, normalizeClass as o, normalizeStyle as s, onMounted as c, onUnmounted as l, openBlock as u, renderSlot as d, unref as f, watch as p } from "vue";
//#region components/resizable/resizable_panel.vue
var m = ["id", "data-panel-id"], h = {
__name: "resizable_panel",
props: {
id: {
type: String,
required: !0
},
initialSize: {
type: String,
default: void 0
},
userMinSize: {
type: String,
default: void 0
},
userMaxSize: {
type: String,
default: void 0
},
systemMinSize: {
type: String,
default: void 0
},
systemMaxSize: {
type: String,
default: void 0
},
collapseSize: {
type: String,
default: void 0
},
resizable: {
type: Boolean,
default: !0
},
collapsible: {
type: Boolean,
default: !1
},
collapsed: {
type: Boolean,
default: !1
},
class: {
type: [
String,
Object,
Array
],
default: ""
}
},
setup(h) {
let g = h, _ = [
"initialSize",
"userMinSize",
"userMaxSize",
"systemMinSize",
"systemMaxSize",
"collapseSize"
];
p(() => _.map((e) => g[e]), (t) => t.forEach((t, n) => {
t !== void 0 && !e(t) && console.error(`[DtResizablePanel] Invalid ${_[n]}: "${t}".`);
}), { immediate: !0 });
let v = a(t, null), y = v?.layout ?? n(() => ({
panels: /* @__PURE__ */ new Map(),
handles: []
})), b = v?.isResizing ?? n(() => !1), x = v?.offsetContentStyles ?? n(() => ({})), S = v?.registerPanel ?? null, C = v?.unregisterPanel ?? null, w = n(() => ({
id: g.id,
initialSize: g.initialSize,
userMinSize: g.userMinSize,
userMaxSize: g.userMaxSize,
systemMinSize: g.systemMinSize,
systemMaxSize: g.systemMaxSize,
collapseSize: g.collapseSize,
resizable: g.resizable ?? !0,
collapsible: g.collapsible ?? !1,
collapsed: g.collapsed ?? !1
}));
c(() => {
S && S(w.value);
}), l(() => {
C && C(g.id);
}), p(w, () => {
S && S(w.value);
}, { deep: !0 });
let T = v?.collapsePanel ?? null, E = v?.isInitializing ?? n(() => !1);
p(() => g.collapsed, (e) => {
E.value || T && e !== void 0 && T(g.id, e);
}, { immediate: !0 });
let D = v?.panelMap ?? n(() => /* @__PURE__ */ new Map()), O = n(() => D.value.get(g.id)), k = n(() => {
let e = y.value.panels.get(g.id);
return e ? e.collapsed ? {
insetInlineStart: `${e.left}px`,
inlineSize: "0px",
overflow: "hidden",
pointerEvents: "none"
} : {
insetInlineStart: `${e.left}px`,
insetInlineEnd: `${e.right}px`
} : {
insetInlineStart: "0px",
inlineSize: "0px",
pointerEvents: "none"
};
});
return (e, t) => (u(), r("div", {
id: `dt-resizable-panel-${g.id}`,
class: o(["d-resizable-panel", [g.class, {
"d-resizable-panel--collapsed": O.value && O.value.collapsed === !0,
"d-resizable-panel--fixed": O.value && O.value.resizable === !1
}]]),
style: s(k.value),
"data-panel-id": g.id,
"data-qa": "d-resizable-panel"
}, [i("div", {
class: "d-resizable-panel__content",
style: s(f(x))
}, [d(e.$slots, "default", {
panel: O.value,
isCollapsed: O.value?.collapsed,
isResizing: f(b)
})], 4)], 14, m));
}
};
//#endregion
export { h as default };
//# sourceMappingURL=resizable-panel.js.map