@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
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