@dialpad/dialtone/dist/vue3/lib/resizable/resizable-panel.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"resizable-panel.cjs","names":[],"sources":["../../../components/resizable/resizable_panel.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"`dt-resizable-panel-${props.id}`\"\n    class=\"d-resizable-panel\"\n    :class=\"[\n      props.class,\n      {\n        'd-resizable-panel--collapsed': panel && panel.collapsed === true,\n        'd-resizable-panel--fixed': panel && panel.resizable === false,\n      },\n    ]\"\n    :style=\"panelStyles\"\n    :data-panel-id=\"props.id\"\n    data-qa=\"d-resizable-panel\"\n  >\n    <div\n      class=\"d-resizable-panel__content\"\n      :style=\"offsetContentStyles\"\n    >\n      <!-- @slot Panel content. Provides panel state and collapsed/resizing flags. -->\n      <slot\n        :panel=\"panel\"\n        :is-collapsed=\"panel?.collapsed\"\n        :is-resizing=\"isResizing\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, inject, onMounted, onUnmounted, watch } from 'vue';\nimport { RESIZABLE_CONTEXT_KEY } from './resizable_constants';\nimport { isValidSizing } from './resizable_utils';\n\nconst props = defineProps({\n  /** Unique panel identifier. Must be unique within its DtResizable parent. */\n  id: { type: String, required: true },\n  /** Initial size as a percentage token (e.g., '25p' for 25%) or Dialtone size token. */\n  initialSize: { type: String, default: undefined },\n  /** Minimum size for user drag interactions (hard floor). */\n  userMinSize: { type: String, default: undefined },\n  /** Maximum size for user drag interactions (hard ceiling). */\n  userMaxSize: { type: String, default: undefined },\n  /** Minimum size for system viewport scaling. Falls back to userMinSize. */\n  systemMinSize: { type: String, default: undefined },\n  /** Maximum size for system viewport scaling. Falls back to userMaxSize. */\n  systemMaxSize: { type: String, default: undefined },\n  /** Container width threshold that triggers auto-collapse. */\n  collapseSize: { type: String, default: undefined },\n  /** Whether this panel can be resized by dragging. */\n  resizable: { type: Boolean, default: true },\n  /** Whether this panel can be collapsed to zero width. */\n  collapsible: { type: Boolean, default: false },\n  /** Initial collapsed state. */\n  collapsed: { type: Boolean, default: false },\n  /** Additional CSS classes applied to the panel element. */\n  class: { type: [String, Object, Array], default: '' },\n});\n\nconst SIZE_PROPS = ['initialSize', 'userMinSize', 'userMaxSize', 'systemMinSize', 'systemMaxSize', 'collapseSize'];\nwatch(\n  () => SIZE_PROPS.map(n => props[n]),\n  vals => vals.forEach((v, i) => {\n    if (v !== undefined && !isValidSizing(v)) {\n      console.error(`[DtResizablePanel] Invalid ${SIZE_PROPS[i]}: \"${v}\".`);\n    }\n  }),\n  { immediate: true },\n);\n\nconst ctx = inject(RESIZABLE_CONTEXT_KEY, null);\nconst layoutRef = ctx?.layout ?? computed(() => ({ panels: new Map(), handles: [] }));\nconst isResizing = ctx?.isResizing ?? computed(() => false);\nconst offsetContentStyles = ctx?.offsetContentStyles ?? computed(() => ({}));\n\nconst registerPanel = ctx?.registerPanel ?? null;\nconst unregisterPanel = ctx?.unregisterPanel ?? null;\n\nconst panelConfig = computed(() => ({\n  id: props.id,\n  initialSize: props.initialSize,\n  userMinSize: props.userMinSize,\n  userMaxSize: props.userMaxSize,\n  systemMinSize: props.systemMinSize,\n  systemMaxSize: props.systemMaxSize,\n  collapseSize: props.collapseSize,\n  resizable: props.resizable ?? true,\n  collapsible: props.collapsible ?? false,\n  collapsed: props.collapsed ?? false,\n}));\n\nonMounted(() => {\n  if (registerPanel) {\n    registerPanel(panelConfig.value);\n  }\n});\n\nonUnmounted(() => {\n  if (unregisterPanel) {\n    unregisterPanel(props.id);\n  }\n});\n\n// Re-register on config change (watch each config field explicitly)\nwatch(panelConfig, () => {\n  if (registerPanel) registerPanel(panelConfig.value);\n}, { deep: true });\n\nconst collapsePanel = ctx?.collapsePanel ?? null;\nconst isInitializing = ctx?.isInitializing ?? computed(() => false);\n\nwatch(\n  () => props.collapsed,\n  newCollapsed => {\n    if (isInitializing.value) return;\n    if (collapsePanel && newCollapsed !== undefined) {\n      collapsePanel(props.id, newCollapsed);\n    }\n  },\n  { immediate: true },\n);\n\nconst panelMap = ctx?.panelMap ?? computed(() => new Map());\nconst panel = computed(() => panelMap.value.get(props.id));\n\nconst panelStyles = computed(() => {\n  const position = layoutRef.value.panels.get(props.id);\n\n  if (!position) {\n    return { insetInlineStart: '0px', inlineSize: '0px', pointerEvents: 'none' };\n  }\n\n  if (position.collapsed) {\n    return {\n      insetInlineStart: `${position.left}px`,\n      inlineSize: '0px',\n      overflow: 'hidden',\n      pointerEvents: 'none',\n    };\n  }\n\n  return {\n    insetInlineStart: `${position.left}px`,\n    insetInlineEnd: `${position.right}px`,\n  };\n});\n</script>\n"],"mappings":"4sBAkCA,IAAM,EAAQ,EAyBR,EAAa,CAAC,cAAe,cAAe,cAAe,gBAAiB,gBAAiB,eAAe,EAClH,EAAA,EAAA,WACQ,EAAW,IAAI,GAAK,EAAM,GAAG,CACnC,GAAQ,EAAK,SAAS,EAAG,IAAM,CACzB,IAAM,IAAA,IAAa,CAAC,EAAA,EAAc,EAAE,EACtC,QAAQ,MAAM,8BAA8B,EAAW,GAAG,KAAK,EAAE,IAAI,EAEvE,CACF,CAAE,UAAW,GAAM,CACpB,CAED,IAAM,GAAA,EAAA,EAAA,QAAa,EAAA,EAAuB,KAAK,CACzC,EAAY,GAAK,SAAA,EAAA,EAAA,eAA0B,CAAE,OAAQ,IAAI,IAAO,QAAS,EAAE,CAAE,EAAE,CAC/E,EAAa,GAAK,aAAA,EAAA,EAAA,cAA6B,GAAM,CACrD,EAAsB,GAAK,sBAAA,EAAA,EAAA,eAAuC,EAAE,EAAE,CAEtE,EAAgB,GAAK,eAAiB,KACtC,EAAkB,GAAK,iBAAmB,KAE1C,GAAA,EAAA,EAAA,eAA8B,CAClC,GAAI,EAAM,GACV,YAAa,EAAM,YACnB,YAAa,EAAM,YACnB,YAAa,EAAM,YACnB,cAAe,EAAM,cACrB,cAAe,EAAM,cACrB,aAAc,EAAM,aACpB,UAAW,EAAM,WAAa,GAC9B,YAAa,EAAM,aAAe,GAClC,UAAW,EAAM,WAAa,GAC/B,EAAE,EAEH,EAAA,EAAA,eAAgB,CACV,GACF,EAAc,EAAY,MAAM,EAElC,EAEF,EAAA,EAAA,iBAAkB,CACZ,GACF,EAAgB,EAAM,GAAG,EAE3B,EAGF,EAAA,EAAA,OAAM,MAAmB,CACnB,GAAe,EAAc,EAAY,MAAM,EAClD,CAAE,KAAM,GAAM,CAAC,CAElB,IAAM,EAAgB,GAAK,eAAiB,KACtC,EAAiB,GAAK,iBAAA,EAAA,EAAA,cAAiC,GAAM,EAEnE,EAAA,EAAA,WACQ,EAAM,UACZ,GAAgB,CACV,EAAe,OACf,GAAiB,IAAiB,IAAA,IACpC,EAAc,EAAM,GAAI,EAAa,EAGzC,CAAE,UAAW,GAAM,CACpB,CAED,IAAM,EAAW,GAAK,WAAA,EAAA,EAAA,cAA2B,IAAI,IAAM,CACrD,GAAA,EAAA,EAAA,cAAuB,EAAS,MAAM,IAAI,EAAM,GAAG,CAAC,CAEpD,GAAA,EAAA,EAAA,cAA6B,CACjC,IAAM,EAAW,EAAU,MAAM,OAAO,IAAI,EAAM,GAAG,CAerD,OAbK,EAID,EAAS,UACJ,CACL,iBAAkB,GAAG,EAAS,KAAK,IACnC,WAAY,MACZ,SAAU,SACV,cAAe,OAChB,CAGI,CACL,iBAAkB,GAAG,EAAS,KAAK,IACnC,eAAgB,GAAG,EAAS,MAAM,IACnC,CAfQ,CAAE,iBAAkB,MAAO,WAAY,MAAO,cAAe,OAAQ,EAgB9E,0DAvHM,MAAA,CAxBH,GAAE,sBAAwB,EAAM,KACjC,OAAA,EAAA,EAAA,gBAAK,CAAC,oBAAmB,CACT,EAAM,MAAA,gCAAuD,EAAA,OAAS,EAAA,MAAM,YAAS,8BAA+C,EAAA,OAAS,EAAA,MAAM,YAAS,OAO3K,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAW,CAClB,gBAAe,EAAM,GACtB,UAAQ,+CAYF,MAAA,CATJ,MAAM,6BACL,OAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,OAAO,EAAmB,CAAA,oBAOzB,EAAA,OAAA,UAAA,CAHC,MAAO,EAAA,MACP,YAAc,EAAA,OAAO,UACrB,YAAA,EAAA,EAAA,OAAa,EAAU"}