@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
307 lines (306 loc) • 9.65 kB
JavaScript
import { d as e, f as t, s as n } from "./resizable_utils-BComtrMV.js";
import { t as r } from "./useResizableCalculations-DAajatT4.js";
import { computed as i, createElementBlock as a, createElementVNode as o, getCurrentInstance as s, inject as c, normalizeClass as l, normalizeStyle as u, onMounted as d, onUnmounted as f, openBlock as p, ref as m, unref as h } from "vue";
//#region components/resizable/composables/useResizableKeyboard.ts
var g = {
resizeAnnouncement: "{beforeId}: {beforePx}px, {afterId}: {afterPx}px",
collapseAnnouncement: "{panelId} collapsed",
expandAnnouncement: "{panelId} expanded",
resetAnnouncement: "{beforeId} and {afterId} reset",
ariaValueText: "{panelId}: {pixels}px",
handleAriaLabel: "Resize handle between {before} and {after} panels"
}, _ = {
fine: 1,
normal: 8,
large: 24
};
function v(e) {
let { panels: n, direction: i, containerSize: a, beforePanelId: o, afterPanelId: s, handleElement: c, onResize: l, onCollapse: u, onReset: d, onSizeAnnouncement: f, messages: p } = e, h = {
...g,
...p
}, v = m(!1), y = r(() => a.value);
function b() {
return {
beforePanel: n.value.find((e) => e.id === o.value),
afterPanel: n.value.find((e) => e.id === s.value)
};
}
function x(e) {
return e.metaKey || e.ctrlKey ? _.fine : e.shiftKey ? _.large : _.normal;
}
function S(e, t) {
return t === "row" ? {
ArrowLeft: "decrease",
ArrowRight: "increase"
}[e] || null : {
ArrowUp: "decrease",
ArrowDown: "increase"
}[e] || null;
}
function C(e, t) {
let n = Math.round(e.pixelSize), r = Math.round(t.pixelSize);
return h.resizeAnnouncement.replace("{beforeId}", e.id).replace("{afterId}", t.id).replace("{beforePx}", String(n)).replace("{afterPx}", String(r));
}
function w(e, t, n, r, i) {
e.style.insetInlineStart = e.style.insetInlineStart || "0px", e.style.insetInlineEnd = `${i}px`, e.style.inlineSize = "", t.style.insetInlineStart = `${r}px`, t.style.inlineSize = "", n && (n.style.insetInlineStart = `${Math.max(0, r - 2)}px`);
}
function T(e, t, n) {
e.style.insetInlineStart = "", e.style.insetInlineEnd = "", e.style.inlineSize = "", t.style.insetInlineStart = "", t.style.inlineSize = "", n && (n.style.insetInlineStart = "");
}
function E(e, n, r, i) {
let u = Math.round(r), d = Math.round(i), f = r, p = c.value?.closest(".d-resizable"), m = null, h = null, g = null;
if (p && (m = p.querySelector(`[data-panel-id="${o.value}"]`), h = p.querySelector(`[data-panel-id="${s.value}"]`), g = p.querySelector(`[data-handle-id="${t(o.value, s.value)}"]`), m && h)) {
let e = a.value - f;
w(m, h, g, f, e);
}
l(o.value, u, s.value, d), m && h && T(m, h, g);
}
function D(e, r, i, c) {
let l = i === "increase" ? c : -c, u = e.pixelSize + l, d = y.processResizeMove(u, e, r, a.value, t(o.value, s.value), n.value, 0);
return d.isValidResize ? (E(e, r, d.beforePanelSize, d.afterPanelSize), f && f(C(e, r)), !0) : !1;
}
function O(e) {
let t = S(e.key, i.value);
if (!t) return;
e.preventDefault(), e.stopPropagation();
let { beforePanel: n, afterPanel: r } = b();
!n || !r || D(n, r, t, x(e));
}
function k(e) {
let { beforePanel: t } = b();
if (!t?.collapsible || !u) return;
e.preventDefault();
let n = !t.collapsed;
u(t.id, n), f && f((n ? h.collapseAnnouncement : h.expandAnnouncement).replace("{panelId}", t.id));
}
function A(e) {
e.preventDefault();
let { beforePanel: t, afterPanel: n } = b();
if (!t || !n) return;
let r = (t.userMinSizePixels ?? 10) - t.pixelSize;
r !== 0 && D(t, n, r > 0 ? "increase" : "decrease", Math.abs(r));
}
function j(e) {
e.preventDefault();
let { beforePanel: t, afterPanel: n } = b();
if (!t || !n) return;
let r = n.userMinSizePixels ?? 10, i = t.userMaxSizePixels ?? a.value - r, o = Math.min(i, a.value - r) - t.pixelSize;
o !== 0 && D(t, n, o > 0 ? "increase" : "decrease", Math.abs(o));
}
function M(e) {
if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
e.preventDefault();
let { beforePanel: t, afterPanel: n } = b();
!t || !n || !d || (d(t.id, n.id), f && f(h.resetAnnouncement.replace("{beforeId}", t.id).replace("{afterId}", n.id)));
}
function N(e) {
e.preventDefault(), c.value?.blur();
}
function P(e) {
if (v.value) {
switch (e.key) {
case "Enter":
k(e);
return;
case "Home":
A(e);
return;
case "End":
j(e);
return;
case "r":
case "R":
M(e);
return;
case "Escape":
N(e);
return;
}
O(e);
}
}
function F() {
v.value = !0;
}
function I() {
v.value = !1;
}
function L() {
c.value?.focus();
}
return {
isFocused: v,
focusHandle: L,
handleKeyDown: P,
handleFocus: F,
handleBlur: I,
KEYBOARD_INCREMENTS: _
};
}
//#endregion
//#region components/resizable/resizable_handle.vue
var y = [
"data-handle-id",
"tabindex",
"aria-orientation",
"aria-label",
"aria-valuenow",
"aria-valuemin",
"aria-valuemax",
"aria-controls",
"aria-valuetext",
"aria-disabled"
], b = {
__name: "resizable_handle",
props: {
beforePanelId: {
type: String,
default: null
},
afterPanelId: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: !1
},
class: {
type: [
String,
Object,
Array
],
default: ""
},
disableResetOnDoubleClick: {
type: Boolean,
default: !1
},
resetBehavior: {
type: String,
default: "both"
},
ariaLabel: {
type: String,
default: null
}
},
setup(r) {
let g = r, _ = c(e, null), b = _?.layout ?? i(() => ({
panels: /* @__PURE__ */ new Map(),
handles: []
})), x = _?.panels ?? i(() => []), S = _?.direction ?? i(() => "row"), C = _?.containerSize ?? i(() => 1e3), w = _?.activeHandleId ?? i(() => void 0), T = _?.startResize ?? (() => {}), E = _?.resetPanels ?? (() => {}), D = _?.registerHandle ?? (() => 0), O = _?.unregisterHandle ?? (() => {}), k = _?.saveToStorage ?? null, A = _?.collapsePanel ?? null, j = _?.commitPanelSize ?? null, M = _?.announce ?? null, N = _?.panelMap ?? i(() => /* @__PURE__ */ new Map()), P = _?.messages ?? {}, F = s(), I = m(0), L = i(() => {
let e = b.value;
if (e.handles.length === 0) return null;
if (g.beforePanelId && g.afterPanelId) {
let n = t(g.beforePanelId, g.afterPanelId);
return e.handles.find((e) => e.id === n) ?? null;
}
return e.handles[I.value] ?? null;
}), R = i(() => L.value?.id ?? ""), z = i(() => L.value?.beforePanelId ?? g.beforePanelId ?? ""), B = i(() => L.value?.afterPanelId ?? g.afterPanelId ?? ""), V = i(() => !!(R.value && w.value === R.value)), H = i(() => g.disabled || (L.value?.disabled ?? !1)), U = S, W = i(() => {
let e = L.value;
return e ? {
insetInlineStart: `${Math.max(0, e.left)}px`,
visibility: "",
...Q.value
} : { visibility: "hidden" };
}), G = i(() => {
if (g.ariaLabel) return g.ariaLabel;
let e = z.value || "first", t = B.value || "second";
return (P.handleAriaLabel ?? "Resize handle between {before} and {after} panels").replace("{before}", e).replace("{after}", t);
}), K = i(() => {
let e = N.value.get(z.value);
return e ? (P.ariaValueText ?? "{panelId}: {pixels}px").replace("{panelId}", z.value).replace("{pixels}", String(Math.round(e.pixelSize))) : "";
}), q = i(() => {
let e = N.value.get(z.value), t = C.value;
return !e || !t ? 0 : Math.floor(n(e.collapsed ? 0 : e.pixelSize || 0, t));
}), J = i(() => {
let e = N.value.get(z.value), t = C.value;
return !e || !t ? 0 : Math.floor(n(e.userMinSizePixels || 0, t));
}), Y = i(() => {
let e = N.value.get(z.value), t = C.value;
return !e || !t ? 100 : Math.floor(n(e.userMaxSizePixels || t, t));
}), X = m(null), Z = v({
panels: x,
direction: S,
containerSize: C,
beforePanelId: z,
afterPanelId: B,
handleElement: X,
onResize(e, t, n, r) {
j ? (j(e, t), j(n, r)) : k?.();
},
onCollapse(e, t) {
A?.(e, t);
},
onReset(e, t) {
E?.(e, t, "both");
},
onSizeAnnouncement(e) {
M?.(e);
},
messages: P
}), Q = _?.offsetHandleStyles ?? i(() => ({}));
d(() => {
D(F);
let e = X.value;
if (e?.parentElement) {
let t = Array.from(e.parentElement.querySelectorAll(".d-resizable-handle")).indexOf(e);
t >= 0 && (I.value = t);
}
}), f(() => {
O(F);
});
function $(e) {
H.value || (e.preventDefault(), T(R.value));
}
function ee() {
if (g.disableResetOnDoubleClick || H.value) return;
let e = z.value, t = B.value;
!e || !t || E(e, t, g.resetBehavior);
}
function te(e) {
Z.handleKeyDown(e);
}
function ne() {
Z.handleFocus();
}
function re() {
Z.handleBlur();
}
return (e, t) => (p(), a("div", {
ref_key: "handleElement",
ref: X,
class: l([
"d-resizable-handle",
`d-resizable-handle--${h(U)}`,
g.class,
{
"d-resizable-handle--active": V.value,
"d-resizable-handle--disabled": H.value
}
]),
style: u(W.value),
"data-handle-id": R.value,
tabindex: H.value ? "-1" : "0",
role: "separator",
"aria-orientation": h(U) === "row" ? "vertical" : "horizontal",
"aria-label": G.value,
"aria-valuenow": q.value,
"aria-valuemin": J.value,
"aria-valuemax": Y.value,
"aria-controls": `dt-resizable-panel-${z.value}`,
"aria-valuetext": K.value,
"aria-disabled": H.value || void 0,
onPointerdown: $,
onDblclick: ee,
onKeydown: te,
onFocus: ne,
onBlur: re
}, [...t[0] || (t[0] = [o("div", { class: "d-resizable-handle__indicator" }, null, -1)])], 46, y));
}
};
//#endregion
export { b as t };
//# sourceMappingURL=resizable_handle-BlKBiWnx.js.map