@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/DataTableCard-BpsxPMb7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCard-BpsxPMb7.js","names":[],"sources":["../../src/components/compositions/cards/useDataTableData.ts","../../src/components/compositions/cards/DataTableCard.vue","../../src/components/compositions/cards/DataTableCard.vue"],"sourcesContent":["/**\n * Source-of-rows composable for `DataTableCard`.\n *\n * Resolves the row array from one of three sources, in priority order:\n *\n *   1. `searchRoute` — remote fetch. Currently a STUB that logs a debug\n *      message and returns `[]`. Real HTTP integration (axios) lands in\n *      a follow-up task.\n *   2. `listKey` — nested array read off `item[listKey]`.\n *   3. `listData` — inline static rows on the card.\n *\n * Falls back to an empty array when no source is configured.\n *\n * Exposed as a composable so tests can intercept the row source\n * without mocking the network layer.\n */\nimport { computed, type ComputedRef, type Ref } from \"vue\"\nimport type { DataTableOptions } from \"@/definitions/cards/DataTableCard\"\n\nexport interface UseDataTableDataOptions {\n  listKey: Ref<string | undefined> | ComputedRef<string | undefined>\n  listData: Ref<unknown[] | undefined> | ComputedRef<unknown[] | undefined>\n  options: Ref<DataTableOptions | undefined> | ComputedRef<DataTableOptions | undefined>\n  item: Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>\n}\n\nexport interface UseDataTableDataReturn {\n  rows: ComputedRef<Record<string, unknown>[]>\n}\n\nexport function useDataTableData(\n  opts: UseDataTableDataOptions,\n): UseDataTableDataReturn {\n  const rows = computed<Record<string, unknown>[]>(() => {\n    const i = opts.item.value\n    const o = opts.options.value\n    const listKey = opts.listKey.value\n    const listData = opts.listData.value\n\n    if (o?.searchRoute) {\n      // eslint-disable-next-line no-console\n      console.debug(\n        \"[DataTableCard] searchRoute fetch is stubbed; returning empty rows.\",\n        o.searchRoute,\n      )\n      return []\n    }\n\n    if (listKey) {\n      const raw = i[listKey]\n      if (Array.isArray(raw)) {\n        return raw as Record<string, unknown>[]\n      }\n      return []\n    }\n\n    if (Array.isArray(listData)) {\n      return listData as Record<string, unknown>[]\n    }\n\n    return []\n  })\n\n  return { rows }\n}\n","<script setup lang=\"ts\">\n/**\n * Props-driven `datatable` composition.\n *\n * Renders a paginated, searchable, sortable table from `headers` + a\n * row source determined in priority order:\n *\n *   1. `options.searchRoute` — remote fetch (stubbed; future HTTP).\n *   2. `listKey` — read sub-array from `item[listKey]` (nested).\n *   3. `listData` — inline static rows.\n *   4. Otherwise: empty.\n *\n * Sorting, search, and pagination all run client-side over the\n * resolved rows. Column rendering branches on `header.type`.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <DataTableCard\n *     :headers=\"[{ key: 'name', sortable: true }]\"\n *     :list-data=\"rows\"\n *     @action=\"onRowAction\"\n *   />\n */\nimport { computed, ref, watch, toRef } from \"vue\"\nimport type {\n  CreateConfig,\n  DeleteConfig,\n  UpdateConfig,\n} from \"@/definitions/shared/crud\"\nimport type {\n  DataTableColumn,\n  DataTableOptions,\n  ExportConfig,\n  TableAction,\n} from \"@/definitions/cards/DataTableCard\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { useDataTableData } from \"./useDataTableData\"\n\nexport interface DataTableCardProps {\n  /** Title rendered above the table. Falls back to the more generic `title`. */\n  tableTitle?: string\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  classList?: string[] | string\n  /** Column definitions. */\n  headers?: DataTableColumn[]\n  /** Behaviour and toolbar configuration. */\n  options?: DataTableOptions\n  /** Sub-array path on `item` when rendering nested tables. */\n  listKey?: string\n  /** Static (non-paginated) row source. */\n  listData?: unknown[]\n  /** Per-row action buttons (also merged with `options.additionalActions`). */\n  actions?: TableAction[]\n  /** Enable row selection. */\n  selectable?: boolean\n  /** Bulk action buttons. */\n  bulkActions?: TableAction[]\n  /** Empty-state message. */\n  emptyMessage?: string\n  /** Page-level data model. Used as the row source when `listKey` is set. */\n  item?: Record<string, unknown>\n  /** Create-modal configuration. */\n  createConfig?: CreateConfig\n  /** Inline update configuration. */\n  updateConfig?: UpdateConfig\n  /** Delete configuration. */\n  deleteConfig?: DeleteConfig\n}\n\nconst props = withDefaults(defineProps<DataTableCardProps>(), {\n  headers: () => [],\n  selectable: false,\n  showCard: true,\n  item: () => ({}),\n})\n\nconst emit = defineEmits<{\n  (e: \"action\", payload: { action: TableAction; row: Record<string, unknown> }): void\n  (e: \"export\", payload: { export: ExportConfig }): void\n}>()\n\nconst sortState = ref<{ key: string; direction: \"asc\" | \"desc\" } | null>(\n  props.options?.defaultSortBy\n    ? {\n        key: props.options.defaultSortBy,\n        direction: props.options.defaultSortDirection ?? \"asc\",\n      }\n    : null,\n)\n\nconst searchQuery = ref(\"\")\nconst currentPage = ref(1)\n\nconst perPage = computed<number>(() => {\n  const opts = props.options\n  return (\n    opts?.perPage ??\n    opts?.defaultItemsPerPage ??\n    25\n  )\n})\n\nconst paginated = computed<boolean>(() => props.options?.paginated === true)\n\nconst visibleHeaders = computed<DataTableColumn[]>(() =>\n  (props.headers ?? []).filter((h) => h.visible !== false),\n)\n\nconst emptyMessageText = computed<string>(() => {\n  return (\n    props.emptyMessage ??\n    props.options?.emptyText ??\n    \"No results\"\n  )\n})\n\nconst exports = computed<ExportConfig[]>(\n  () => props.options?.exports ?? [],\n)\n\nconst tableActions = computed<TableAction[]>(() => {\n  const base = props.actions ?? []\n  const additional = props.options?.additionalActions ?? []\n  return [...base, ...additional]\n})\n\nconst showSearch = computed<boolean>(() => {\n  const sr = props.options?.searchRoute\n  if (sr && sr.hide) {\n    return false\n  }\n  // Always show search when there is any data source (client-side filter).\n  return true\n})\n\n/** Underlying row source — composable that can be mocked in tests. */\nconst { rows: sourceRows } = useDataTableData({\n  listKey: toRef(props, \"listKey\"),\n  listData: toRef(props, \"listData\"),\n  options: toRef(props, \"options\"),\n  item: toRef(props, \"item\"),\n})\n\n/** Read a dot-notation path on a row, returning unknown. */\nfunction readPath(row: Record<string, unknown>, path: string): unknown {\n  if (!path) {\n    return undefined\n  }\n  const segments = path.split(\".\")\n  let value: unknown = row\n  for (const seg of segments) {\n    if (value == null || typeof value !== \"object\") {\n      return undefined\n    }\n    value = (value as Record<string, unknown>)[seg]\n  }\n  return value\n}\n\nfunction toComparable(value: unknown): number | string {\n  if (value == null) {\n    return \"\"\n  }\n  if (typeof value === \"number\") {\n    return value\n  }\n  if (typeof value === \"boolean\") {\n    return value ? 1 : 0\n  }\n  if (value instanceof Date) {\n    return value.getTime()\n  }\n  return String(value).toLowerCase()\n}\n\nconst filteredRows = computed<Record<string, unknown>[]>(() => {\n  const query = searchQuery.value.trim().toLowerCase()\n  if (!query) {\n    return sourceRows.value\n  }\n  return sourceRows.value.filter((row) => {\n    return visibleHeaders.value.some((h) => {\n      const v = readPath(row, h.key)\n      if (v == null) {\n        return false\n      }\n      return String(v).toLowerCase().includes(query)\n    })\n  })\n})\n\nconst sortedRows = computed<Record<string, unknown>[]>(() => {\n  const state = sortState.value\n  if (!state) {\n    return filteredRows.value\n  }\n  const dir = state.direction === \"asc\" ? 1 : -1\n  return [...filteredRows.value].sort((a, b) => {\n    const av = toComparable(readPath(a, state.key))\n    const bv = toComparable(readPath(b, state.key))\n    if (av < bv) {\n      return -1 * dir\n    }\n    if (av > bv) {\n      return 1 * dir\n    }\n    return 0\n  })\n})\n\nconst pageCount = computed<number>(() => {\n  if (!paginated.value) {\n    return 1\n  }\n  return Math.max(1, Math.ceil(sortedRows.value.length / perPage.value))\n})\n\nconst pagedRows = computed<Record<string, unknown>[]>(() => {\n  if (!paginated.value) {\n    return sortedRows.value\n  }\n  const start = (currentPage.value - 1) * perPage.value\n  return sortedRows.value.slice(start, start + perPage.value)\n})\n\n// Reset pagination if filtering shrinks the result below the current page.\nwatch([filteredRows, perPage], () => {\n  if (currentPage.value > pageCount.value) {\n    currentPage.value = 1\n  }\n})\n\nfunction toggleSort(header: DataTableColumn): void {\n  if (!header.sortable) {\n    return\n  }\n  const state = sortState.value\n  if (!state || state.key !== header.key) {\n    sortState.value = { key: header.key, direction: \"asc\" }\n    return\n  }\n  if (state.direction === \"asc\") {\n    sortState.value = { key: header.key, direction: \"desc\" }\n    return\n  }\n  sortState.value = null\n}\n\nfunction sortIndicator(header: DataTableColumn): string {\n  const state = sortState.value\n  if (!state || state.key !== header.key) {\n    return \"\"\n  }\n  return state.direction === \"asc\" ? \"↑\" : \"↓\"\n}\n\nfunction alignClass(header: DataTableColumn): string {\n  const a = header.align\n  if (a === \"center\") {\n    return \"text-center\"\n  }\n  if (a === \"end\" || a === \"right\") {\n    return \"text-right\"\n  }\n  return \"text-left\"\n}\n\nfunction previousPage(): void {\n  if (currentPage.value > 1) {\n    currentPage.value -= 1\n  }\n}\n\nfunction nextPage(): void {\n  if (currentPage.value < pageCount.value) {\n    currentPage.value += 1\n  }\n}\n\nfunction formatTimestamp(value: unknown): string {\n  if (value == null) {\n    return \"\"\n  }\n  const date =\n    value instanceof Date\n      ? value\n      : new Date(typeof value === \"number\" ? value : String(value))\n  if (Number.isNaN(date.getTime())) {\n    return String(value)\n  }\n  return new Intl.DateTimeFormat(undefined, {\n    year: \"numeric\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  }).format(date)\n}\n\nfunction statusColor(value: unknown): string {\n  const s = String(value ?? \"\").toLowerCase()\n  if (s === \"success\" || s === \"active\" || s === \"ok\" || s === \"paid\") {\n    return \"bg-green-500\"\n  }\n  if (s === \"warning\" || s === \"pending\") {\n    return \"bg-yellow-500\"\n  }\n  if (s === \"danger\" || s === \"error\" || s === \"failed\" || s === \"unpaid\") {\n    return \"bg-red-500\"\n  }\n  if (s === \"info\") {\n    return \"bg-blue-500\"\n  }\n  return \"bg-gray-400\"\n}\n\nfunction onAction(action: TableAction, row: Record<string, unknown>): void {\n  emit(\"action\", { action, row })\n}\n\nfunction onExport(config: ExportConfig): void {\n  emit(\"export\", { export: config })\n}\n</script>\n\n<template>\n  <section\n    :class=\"[\n      'gxp-datatable-card flex flex-col gap-3',\n      showCard !== false\n        ? 'rounded-lg border bg-card text-card-foreground shadow-sm p-4'\n        : '',\n    ]\"\n    data-testid=\"datatable-card\"\n  >\n    <header\n      v-if=\"tableTitle || title || subtitle\"\n      class=\"flex flex-col gap-0.5\"\n    >\n      <h3\n        v-if=\"tableTitle || title\"\n        class=\"text-base font-semibold\"\n      >\n        {{ tableTitle ?? title }}\n      </h3>\n      <p\n        v-if=\"subtitle\"\n        class=\"text-sm text-muted-foreground\"\n      >\n        {{ subtitle }}\n      </p>\n    </header>\n\n    <div\n      v-if=\"exports.length > 0 || showSearch\"\n      class=\"flex flex-wrap items-center justify-between gap-2\"\n    >\n      <div\n        v-if=\"exports.length > 0\"\n        class=\"flex items-center gap-2\"\n        data-testid=\"datatable-exports\"\n      >\n        <Button\n          v-for=\"(ex, i) in exports\"\n          :key=\"i\"\n          variant=\"outline\"\n          size=\"sm\"\n          type=\"button\"\n          @click=\"onExport(ex)\"\n        >\n          {{ ex.label ?? \"Export\" }}\n        </Button>\n      </div>\n\n      <div v-if=\"showSearch\" class=\"ml-auto w-full max-w-xs\">\n        <Input\n          v-model=\"searchQuery\"\n          type=\"search\"\n          placeholder=\"Search...\"\n          data-testid=\"datatable-search\"\n        />\n      </div>\n    </div>\n\n    <Table>\n      <TableHeader>\n        <TableRow>\n          <TableHead\n            v-for=\"h in visibleHeaders\"\n            :key=\"h.key\"\n            :class=\"alignClass(h)\"\n            :style=\"h.width ? { width: h.width } : undefined\"\n          >\n            <button\n              v-if=\"h.sortable\"\n              type=\"button\"\n              class=\"inline-flex items-center gap-1 hover:text-foreground\"\n              :data-testid=\"`sort-${h.key}`\"\n              @click=\"toggleSort(h)\"\n            >\n              <span>{{ h.title ?? h.key }}</span>\n              <span class=\"text-xs\">{{ sortIndicator(h) }}</span>\n            </button>\n            <span v-else>{{ h.title ?? h.key }}</span>\n          </TableHead>\n          <TableHead\n            v-if=\"tableActions.length > 0\"\n            class=\"text-right\"\n          >\n            Actions\n          </TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <template v-if=\"pagedRows.length > 0\">\n          <TableRow\n            v-for=\"(row, ri) in pagedRows\"\n            :key=\"ri\"\n            :data-testid=\"`datatable-row-${ri}`\"\n          >\n            <TableCell\n              v-for=\"h in visibleHeaders\"\n              :key=\"h.key\"\n              :class=\"alignClass(h)\"\n            >\n              <template v-if=\"h.type === 'timestamp' || h.type === 'laravel-timestamp'\">\n                <span data-testid=\"cell-timestamp\">{{ formatTimestamp(readPath(row, h.key)) }}</span>\n              </template>\n              <template v-else-if=\"h.type === 'boolean'\">\n                <span\n                  data-testid=\"cell-boolean\"\n                  :class=\"readPath(row, h.key) ? 'text-green-600' : 'text-red-600'\"\n                  :aria-label=\"readPath(row, h.key) ? 'true' : 'false'\"\n                >\n                  {{ readPath(row, h.key) ? \"✓\" : \"✗\" }}\n                </span>\n              </template>\n              <template v-else-if=\"h.type === 'image'\">\n                <img\n                  data-testid=\"cell-image\"\n                  :src=\"String(readPath(row, h.key) ?? '')\"\n                  :alt=\"h.title ?? h.key\"\n                  class=\"h-8 w-8 rounded object-cover\"\n                >\n              </template>\n              <template v-else-if=\"h.type === 'status_circle'\">\n                <span class=\"inline-flex items-center gap-2\">\n                  <span\n                    data-testid=\"cell-status-circle\"\n                    :class=\"['inline-block h-2.5 w-2.5 rounded-full', statusColor(readPath(row, h.key))]\"\n                  />\n                  <span>{{ readPath(row, h.key) }}</span>\n                </span>\n              </template>\n              <template v-else>\n                <span>\n                  <template v-if=\"h.prepend\">{{ h.prepend }}</template>\n                  {{ readPath(row, h.key) ?? \"\" }}\n                  <template v-if=\"h.append\">{{ h.append }}</template>\n                </span>\n              </template>\n            </TableCell>\n            <TableCell\n              v-if=\"tableActions.length > 0\"\n              class=\"text-right\"\n            >\n              <div class=\"inline-flex items-center justify-end gap-1\">\n                <Button\n                  v-for=\"(action, ai) in tableActions\"\n                  :key=\"ai\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  type=\"button\"\n                  :data-testid=\"`datatable-action-${action.slug ?? ai}`\"\n                  @click=\"onAction(action, row)\"\n                >\n                  {{ action.label ?? action.tooltip ?? action.slug ?? \"Action\" }}\n                </Button>\n              </div>\n            </TableCell>\n          </TableRow>\n        </template>\n        <template v-else>\n          <TableRow>\n            <TableCell\n              :colspan=\"visibleHeaders.length + (tableActions.length > 0 ? 1 : 0)\"\n              class=\"text-center text-muted-foreground\"\n            >\n              <span data-testid=\"datatable-empty\">{{ emptyMessageText }}</span>\n            </TableCell>\n          </TableRow>\n        </template>\n      </TableBody>\n    </Table>\n\n    <footer\n      v-if=\"paginated && sortedRows.length > 0\"\n      class=\"flex items-center justify-between gap-2\"\n      data-testid=\"datatable-pagination\"\n    >\n      <span class=\"text-sm text-muted-foreground\">\n        Page {{ currentPage }} of {{ pageCount }}\n      </span>\n      <div class=\"flex items-center gap-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          type=\"button\"\n          :disabled=\"currentPage <= 1\"\n          data-testid=\"datatable-prev\"\n          @click=\"previousPage\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          type=\"button\"\n          :disabled=\"currentPage >= pageCount\"\n          data-testid=\"datatable-next\"\n          @click=\"nextPage\"\n        >\n          Next\n        </Button>\n      </div>\n    </footer>\n  </section>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven `datatable` composition.\n *\n * Renders a paginated, searchable, sortable table from `headers` + a\n * row source determined in priority order:\n *\n *   1. `options.searchRoute` — remote fetch (stubbed; future HTTP).\n *   2. `listKey` — read sub-array from `item[listKey]` (nested).\n *   3. `listData` — inline static rows.\n *   4. Otherwise: empty.\n *\n * Sorting, search, and pagination all run client-side over the\n * resolved rows. Column rendering branches on `header.type`.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <DataTableCard\n *     :headers=\"[{ key: 'name', sortable: true }]\"\n *     :list-data=\"rows\"\n *     @action=\"onRowAction\"\n *   />\n */\nimport { computed, ref, watch, toRef } from \"vue\"\nimport type {\n  CreateConfig,\n  DeleteConfig,\n  UpdateConfig,\n} from \"@/definitions/shared/crud\"\nimport type {\n  DataTableColumn,\n  DataTableOptions,\n  ExportConfig,\n  TableAction,\n} from \"@/definitions/cards/DataTableCard\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { useDataTableData } from \"./useDataTableData\"\n\nexport interface DataTableCardProps {\n  /** Title rendered above the table. Falls back to the more generic `title`. */\n  tableTitle?: string\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  classList?: string[] | string\n  /** Column definitions. */\n  headers?: DataTableColumn[]\n  /** Behaviour and toolbar configuration. */\n  options?: DataTableOptions\n  /** Sub-array path on `item` when rendering nested tables. */\n  listKey?: string\n  /** Static (non-paginated) row source. */\n  listData?: unknown[]\n  /** Per-row action buttons (also merged with `options.additionalActions`). */\n  actions?: TableAction[]\n  /** Enable row selection. */\n  selectable?: boolean\n  /** Bulk action buttons. */\n  bulkActions?: TableAction[]\n  /** Empty-state message. */\n  emptyMessage?: string\n  /** Page-level data model. Used as the row source when `listKey` is set. */\n  item?: Record<string, unknown>\n  /** Create-modal configuration. */\n  createConfig?: CreateConfig\n  /** Inline update configuration. */\n  updateConfig?: UpdateConfig\n  /** Delete configuration. */\n  deleteConfig?: DeleteConfig\n}\n\nconst props = withDefaults(defineProps<DataTableCardProps>(), {\n  headers: () => [],\n  selectable: false,\n  showCard: true,\n  item: () => ({}),\n})\n\nconst emit = defineEmits<{\n  (e: \"action\", payload: { action: TableAction; row: Record<string, unknown> }): void\n  (e: \"export\", payload: { export: ExportConfig }): void\n}>()\n\nconst sortState = ref<{ key: string; direction: \"asc\" | \"desc\" } | null>(\n  props.options?.defaultSortBy\n    ? {\n        key: props.options.defaultSortBy,\n        direction: props.options.defaultSortDirection ?? \"asc\",\n      }\n    : null,\n)\n\nconst searchQuery = ref(\"\")\nconst currentPage = ref(1)\n\nconst perPage = computed<number>(() => {\n  const opts = props.options\n  return (\n    opts?.perPage ??\n    opts?.defaultItemsPerPage ??\n    25\n  )\n})\n\nconst paginated = computed<boolean>(() => props.options?.paginated === true)\n\nconst visibleHeaders = computed<DataTableColumn[]>(() =>\n  (props.headers ?? []).filter((h) => h.visible !== false),\n)\n\nconst emptyMessageText = computed<string>(() => {\n  return (\n    props.emptyMessage ??\n    props.options?.emptyText ??\n    \"No results\"\n  )\n})\n\nconst exports = computed<ExportConfig[]>(\n  () => props.options?.exports ?? [],\n)\n\nconst tableActions = computed<TableAction[]>(() => {\n  const base = props.actions ?? []\n  const additional = props.options?.additionalActions ?? []\n  return [...base, ...additional]\n})\n\nconst showSearch = computed<boolean>(() => {\n  const sr = props.options?.searchRoute\n  if (sr && sr.hide) {\n    return false\n  }\n  // Always show search when there is any data source (client-side filter).\n  return true\n})\n\n/** Underlying row source — composable that can be mocked in tests. */\nconst { rows: sourceRows } = useDataTableData({\n  listKey: toRef(props, \"listKey\"),\n  listData: toRef(props, \"listData\"),\n  options: toRef(props, \"options\"),\n  item: toRef(props, \"item\"),\n})\n\n/** Read a dot-notation path on a row, returning unknown. */\nfunction readPath(row: Record<string, unknown>, path: string): unknown {\n  if (!path) {\n    return undefined\n  }\n  const segments = path.split(\".\")\n  let value: unknown = row\n  for (const seg of segments) {\n    if (value == null || typeof value !== \"object\") {\n      return undefined\n    }\n    value = (value as Record<string, unknown>)[seg]\n  }\n  return value\n}\n\nfunction toComparable(value: unknown): number | string {\n  if (value == null) {\n    return \"\"\n  }\n  if (typeof value === \"number\") {\n    return value\n  }\n  if (typeof value === \"boolean\") {\n    return value ? 1 : 0\n  }\n  if (value instanceof Date) {\n    return value.getTime()\n  }\n  return String(value).toLowerCase()\n}\n\nconst filteredRows = computed<Record<string, unknown>[]>(() => {\n  const query = searchQuery.value.trim().toLowerCase()\n  if (!query) {\n    return sourceRows.value\n  }\n  return sourceRows.value.filter((row) => {\n    return visibleHeaders.value.some((h) => {\n      const v = readPath(row, h.key)\n      if (v == null) {\n        return false\n      }\n      return String(v).toLowerCase().includes(query)\n    })\n  })\n})\n\nconst sortedRows = computed<Record<string, unknown>[]>(() => {\n  const state = sortState.value\n  if (!state) {\n    return filteredRows.value\n  }\n  const dir = state.direction === \"asc\" ? 1 : -1\n  return [...filteredRows.value].sort((a, b) => {\n    const av = toComparable(readPath(a, state.key))\n    const bv = toComparable(readPath(b, state.key))\n    if (av < bv) {\n      return -1 * dir\n    }\n    if (av > bv) {\n      return 1 * dir\n    }\n    return 0\n  })\n})\n\nconst pageCount = computed<number>(() => {\n  if (!paginated.value) {\n    return 1\n  }\n  return Math.max(1, Math.ceil(sortedRows.value.length / perPage.value))\n})\n\nconst pagedRows = computed<Record<string, unknown>[]>(() => {\n  if (!paginated.value) {\n    return sortedRows.value\n  }\n  const start = (currentPage.value - 1) * perPage.value\n  return sortedRows.value.slice(start, start + perPage.value)\n})\n\n// Reset pagination if filtering shrinks the result below the current page.\nwatch([filteredRows, perPage], () => {\n  if (currentPage.value > pageCount.value) {\n    currentPage.value = 1\n  }\n})\n\nfunction toggleSort(header: DataTableColumn): void {\n  if (!header.sortable) {\n    return\n  }\n  const state = sortState.value\n  if (!state || state.key !== header.key) {\n    sortState.value = { key: header.key, direction: \"asc\" }\n    return\n  }\n  if (state.direction === \"asc\") {\n    sortState.value = { key: header.key, direction: \"desc\" }\n    return\n  }\n  sortState.value = null\n}\n\nfunction sortIndicator(header: DataTableColumn): string {\n  const state = sortState.value\n  if (!state || state.key !== header.key) {\n    return \"\"\n  }\n  return state.direction === \"asc\" ? \"↑\" : \"↓\"\n}\n\nfunction alignClass(header: DataTableColumn): string {\n  const a = header.align\n  if (a === \"center\") {\n    return \"text-center\"\n  }\n  if (a === \"end\" || a === \"right\") {\n    return \"text-right\"\n  }\n  return \"text-left\"\n}\n\nfunction previousPage(): void {\n  if (currentPage.value > 1) {\n    currentPage.value -= 1\n  }\n}\n\nfunction nextPage(): void {\n  if (currentPage.value < pageCount.value) {\n    currentPage.value += 1\n  }\n}\n\nfunction formatTimestamp(value: unknown): string {\n  if (value == null) {\n    return \"\"\n  }\n  const date =\n    value instanceof Date\n      ? value\n      : new Date(typeof value === \"number\" ? value : String(value))\n  if (Number.isNaN(date.getTime())) {\n    return String(value)\n  }\n  return new Intl.DateTimeFormat(undefined, {\n    year: \"numeric\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  }).format(date)\n}\n\nfunction statusColor(value: unknown): string {\n  const s = String(value ?? \"\").toLowerCase()\n  if (s === \"success\" || s === \"active\" || s === \"ok\" || s === \"paid\") {\n    return \"bg-green-500\"\n  }\n  if (s === \"warning\" || s === \"pending\") {\n    return \"bg-yellow-500\"\n  }\n  if (s === \"danger\" || s === \"error\" || s === \"failed\" || s === \"unpaid\") {\n    return \"bg-red-500\"\n  }\n  if (s === \"info\") {\n    return \"bg-blue-500\"\n  }\n  return \"bg-gray-400\"\n}\n\nfunction onAction(action: TableAction, row: Record<string, unknown>): void {\n  emit(\"action\", { action, row })\n}\n\nfunction onExport(config: ExportConfig): void {\n  emit(\"export\", { export: config })\n}\n</script>\n\n<template>\n  <section\n    :class=\"[\n      'gxp-datatable-card flex flex-col gap-3',\n      showCard !== false\n        ? 'rounded-lg border bg-card text-card-foreground shadow-sm p-4'\n        : '',\n    ]\"\n    data-testid=\"datatable-card\"\n  >\n    <header\n      v-if=\"tableTitle || title || subtitle\"\n      class=\"flex flex-col gap-0.5\"\n    >\n      <h3\n        v-if=\"tableTitle || title\"\n        class=\"text-base font-semibold\"\n      >\n        {{ tableTitle ?? title }}\n      </h3>\n      <p\n        v-if=\"subtitle\"\n        class=\"text-sm text-muted-foreground\"\n      >\n        {{ subtitle }}\n      </p>\n    </header>\n\n    <div\n      v-if=\"exports.length > 0 || showSearch\"\n      class=\"flex flex-wrap items-center justify-between gap-2\"\n    >\n      <div\n        v-if=\"exports.length > 0\"\n        class=\"flex items-center gap-2\"\n        data-testid=\"datatable-exports\"\n      >\n        <Button\n          v-for=\"(ex, i) in exports\"\n          :key=\"i\"\n          variant=\"outline\"\n          size=\"sm\"\n          type=\"button\"\n          @click=\"onExport(ex)\"\n        >\n          {{ ex.label ?? \"Export\" }}\n        </Button>\n      </div>\n\n      <div v-if=\"showSearch\" class=\"ml-auto w-full max-w-xs\">\n        <Input\n          v-model=\"searchQuery\"\n          type=\"search\"\n          placeholder=\"Search...\"\n          data-testid=\"datatable-search\"\n        />\n      </div>\n    </div>\n\n    <Table>\n      <TableHeader>\n        <TableRow>\n          <TableHead\n            v-for=\"h in visibleHeaders\"\n            :key=\"h.key\"\n            :class=\"alignClass(h)\"\n            :style=\"h.width ? { width: h.width } : undefined\"\n          >\n            <button\n              v-if=\"h.sortable\"\n              type=\"button\"\n              class=\"inline-flex items-center gap-1 hover:text-foreground\"\n              :data-testid=\"`sort-${h.key}`\"\n              @click=\"toggleSort(h)\"\n            >\n              <span>{{ h.title ?? h.key }}</span>\n              <span class=\"text-xs\">{{ sortIndicator(h) }}</span>\n            </button>\n            <span v-else>{{ h.title ?? h.key }}</span>\n          </TableHead>\n          <TableHead\n            v-if=\"tableActions.length > 0\"\n            class=\"text-right\"\n          >\n            Actions\n          </TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <template v-if=\"pagedRows.length > 0\">\n          <TableRow\n            v-for=\"(row, ri) in pagedRows\"\n            :key=\"ri\"\n            :data-testid=\"`datatable-row-${ri}`\"\n          >\n            <TableCell\n              v-for=\"h in visibleHeaders\"\n              :key=\"h.key\"\n              :class=\"alignClass(h)\"\n            >\n              <template v-if=\"h.type === 'timestamp' || h.type === 'laravel-timestamp'\">\n                <span data-testid=\"cell-timestamp\">{{ formatTimestamp(readPath(row, h.key)) }}</span>\n              </template>\n              <template v-else-if=\"h.type === 'boolean'\">\n                <span\n                  data-testid=\"cell-boolean\"\n                  :class=\"readPath(row, h.key) ? 'text-green-600' : 'text-red-600'\"\n                  :aria-label=\"readPath(row, h.key) ? 'true' : 'false'\"\n                >\n                  {{ readPath(row, h.key) ? \"✓\" : \"✗\" }}\n                </span>\n              </template>\n              <template v-else-if=\"h.type === 'image'\">\n                <img\n                  data-testid=\"cell-image\"\n                  :src=\"String(readPath(row, h.key) ?? '')\"\n                  :alt=\"h.title ?? h.key\"\n                  class=\"h-8 w-8 rounded object-cover\"\n                >\n              </template>\n              <template v-else-if=\"h.type === 'status_circle'\">\n                <span class=\"inline-flex items-center gap-2\">\n                  <span\n                    data-testid=\"cell-status-circle\"\n                    :class=\"['inline-block h-2.5 w-2.5 rounded-full', statusColor(readPath(row, h.key))]\"\n                  />\n                  <span>{{ readPath(row, h.key) }}</span>\n                </span>\n              </template>\n              <template v-else>\n                <span>\n                  <template v-if=\"h.prepend\">{{ h.prepend }}</template>\n                  {{ readPath(row, h.key) ?? \"\" }}\n                  <template v-if=\"h.append\">{{ h.append }}</template>\n                </span>\n              </template>\n            </TableCell>\n            <TableCell\n              v-if=\"tableActions.length > 0\"\n              class=\"text-right\"\n            >\n              <div class=\"inline-flex items-center justify-end gap-1\">\n                <Button\n                  v-for=\"(action, ai) in tableActions\"\n                  :key=\"ai\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  type=\"button\"\n                  :data-testid=\"`datatable-action-${action.slug ?? ai}`\"\n                  @click=\"onAction(action, row)\"\n                >\n                  {{ action.label ?? action.tooltip ?? action.slug ?? \"Action\" }}\n                </Button>\n              </div>\n            </TableCell>\n          </TableRow>\n        </template>\n        <template v-else>\n          <TableRow>\n            <TableCell\n              :colspan=\"visibleHeaders.length + (tableActions.length > 0 ? 1 : 0)\"\n              class=\"text-center text-muted-foreground\"\n            >\n              <span data-testid=\"datatable-empty\">{{ emptyMessageText }}</span>\n            </TableCell>\n          </TableRow>\n        </template>\n      </TableBody>\n    </Table>\n\n    <footer\n      v-if=\"paginated && sortedRows.length > 0\"\n      class=\"flex items-center justify-between gap-2\"\n      data-testid=\"datatable-pagination\"\n    >\n      <span class=\"text-sm text-muted-foreground\">\n        Page {{ currentPage }} of {{ pageCount }}\n      </span>\n      <div class=\"flex items-center gap-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          type=\"button\"\n          :disabled=\"currentPage <= 1\"\n          data-testid=\"datatable-prev\"\n          @click=\"previousPage\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          type=\"button\"\n          :disabled=\"currentPage >= pageCount\"\n          data-testid=\"datatable-next\"\n          @click=\"nextPage\"\n        >\n          Next\n        </Button>\n      </div>\n    </footer>\n  </section>\n</template>\n"],"mappings":";;;;;;AA8BA,SAAgB,EACd,GACwB;CA+BxB,OAAO,EAAE,MA9BI,QAA0C;EACrD,IAAM,IAAI,EAAK,KAAK,OACd,IAAI,EAAK,QAAQ,OACjB,IAAU,EAAK,QAAQ,OACvB,IAAW,EAAK,SAAS;EAE/B,IAAI,GAAG,aAML,OAJA,QAAQ,MACN,uEACA,EAAE,WACJ,GACO,CAAC;EAGV,IAAI,GAAS;GACX,IAAM,IAAM,EAAE;GAId,OAHI,MAAM,QAAQ,CAAG,IACZ,IAEF,CAAC;EACV;EAMA,OAJI,MAAM,QAAQ,CAAQ,IACjB,IAGF,CAAC;CACV,CAES,EAAK;AAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECgBA,IAAM,IAAQ,GAOR,IAAO,GAKP,IAAY,EAChB,EAAM,SAAS,gBACX;GACE,KAAK,EAAM,QAAQ;GACnB,WAAW,EAAM,QAAQ,wBAAwB;EACnD,IACA,IACN,GAEM,IAAc,EAAI,EAAE,GACpB,IAAc,EAAI,CAAC,GAEnB,IAAU,QAAuB;GACrC,IAAM,IAAO,EAAM;GACnB,OACE,GAAM,WACN,GAAM,uBACN;EAEJ,CAAC,GAEK,IAAY,QAAwB,EAAM,SAAS,cAAc,EAAI,GAErE,IAAiB,SACpB,EAAM,WAAW,CAAC,GAAG,QAAQ,MAAM,EAAE,YAAY,EAAK,CACzD,GAEM,KAAmB,QAErB,EAAM,gBACN,EAAM,SAAS,aACf,YAEH,GAEK,IAAU,QACR,EAAM,SAAS,WAAW,CAAC,CACnC,GAEM,IAAe,QAA8B;GACjD,IAAM,IAAO,EAAM,WAAW,CAAC,GACzB,IAAa,EAAM,SAAS,qBAAqB,CAAC;GACxD,OAAO,CAAC,GAAG,GAAM,GAAG,CAAU;EAChC,CAAC,GAEK,IAAa,QAAwB;GACzC,IAAM,IAAK,EAAM,SAAS;GAK1B,OAJA,EAAI,KAAM,EAAG;EAKf,CAAC,GAGK,EAAE,MAAM,MAAe,EAAiB;GAC5C,SAAS,EAAM,GAAO,SAAS;GAC/B,UAAU,EAAM,GAAO,UAAU;GACjC,SAAS,EAAM,GAAO,SAAS;GAC/B,MAAM,EAAM,GAAO,MAAM;EAC3B,CAAC;EAGD,SAAS,EAAS,GAA8B,GAAuB;GACrE,IAAI,CAAC,GACH;GAEF,IAAM,IAAW,EAAK,MAAM,GAAG,GAC3B,IAAiB;GACrB,KAAK,IAAM,KAAO,GAAU;IAC1B,IAAqB,OAAO,KAAU,aAAlC,GACF;IAEF,IAAS,EAAkC;GAC7C;GACA,OAAO;EACT;EAEA,SAAS,EAAa,GAAiC;GAarD,OAZI,KAAS,OACJ,KAEL,OAAO,KAAU,WACZ,IAEL,OAAO,KAAU,YACZ,OAEL,aAAiB,OACZ,EAAM,QAAQ,IAEhB,OAAO,CAAK,EAAE,YAAY;EACnC;EAEA,IAAM,IAAe,QAA0C;GAC7D,IAAM,IAAQ,EAAY,MAAM,KAAK,EAAE,YAAY;GAInD,OAHK,IAGE,EAAW,MAAM,QAAQ,MACvB,EAAe,MAAM,MAAM,MAAM;IACtC,IAAM,IAAI,EAAS,GAAK,EAAE,GAAG;IAI7B,OAHI,KAAK,OACA,KAEF,OAAO,CAAC,EAAE,YAAY,EAAE,SAAS,CAAK;GAC/C,CAAC,CACF,IAVQ,EAAW;EAWtB,CAAC,GAEK,IAAa,QAA0C;GAC3D,IAAM,IAAQ,EAAU;GACxB,IAAI,CAAC,GACH,OAAO,EAAa;GAEtB,IAAM,IAAM,EAAM,cAAc,QAAQ,IAAI;GAC5C,OAAO,CAAC,GAAG,EAAa,KAAK,EAAE,MAAM,GAAG,MAAM;IAC5C,IAAM,IAAK,EAAa,EAAS,GAAG,EAAM,GAAG,CAAC,GACxC,IAAK,EAAa,EAAS,GAAG,EAAM,GAAG,CAAC;IAO9C,OANI,IAAK,IACA,KAAK,IAEV,IAAK,IACA,IAAI,IAEN;GACT,CAAC;EACH,CAAC,GAEK,IAAY,QACX,EAAU,QAGR,KAAK,IAAI,GAAG,KAAK,KAAK,EAAW,MAAM,SAAS,EAAQ,KAAK,CAAC,IAF5D,CAGV,GAEK,IAAY,QAA0C;GAC1D,IAAI,CAAC,EAAU,OACb,OAAO,EAAW;GAEpB,IAAM,KAAS,EAAY,QAAQ,KAAK,EAAQ;GAChD,OAAO,EAAW,MAAM,MAAM,GAAO,IAAQ,EAAQ,KAAK;EAC5D,CAAC;EAGD,EAAM,CAAC,GAAc,CAAO,SAAS;GACnC,AAAI,EAAY,QAAQ,EAAU,UAChC,EAAY,QAAQ;EAExB,CAAC;EAED,SAAS,GAAW,GAA+B;GACjD,IAAI,CAAC,EAAO,UACV;GAEF,IAAM,IAAQ,EAAU;GACxB,IAAI,CAAC,KAAS,EAAM,QAAQ,EAAO,KAAK;IACtC,EAAU,QAAQ;KAAE,KAAK,EAAO;KAAK,WAAW;IAAM;IACtD;GACF;GACA,IAAI,EAAM,cAAc,OAAO;IAC7B,EAAU,QAAQ;KAAE,KAAK,EAAO;KAAK,WAAW;IAAO;IACvD;GACF;GACA,EAAU,QAAQ;EACpB;EAEA,SAAS,GAAc,GAAiC;GACtD,IAAM,IAAQ,EAAU;GAIxB,OAHI,CAAC,KAAS,EAAM,QAAQ,EAAO,MAC1B,KAEF,EAAM,cAAc,QAAQ,MAAM;EAC3C;EAEA,SAAS,EAAW,GAAiC;GACnD,IAAM,IAAI,EAAO;GAOjB,OANI,MAAM,WACD,gBAEL,MAAM,SAAS,MAAM,UAChB,eAEF;EACT;EAEA,SAAS,IAAqB;GAC5B,AAAI,EAAY,QAAQ,KACtB,IAAY;EAEhB;EAEA,SAAS,KAAiB;GACxB,AAAI,EAAY,QAAQ,EAAU,UAChC,EAAY,SAAS;EAEzB;EAEA,SAAS,GAAgB,GAAwB;GAC/C,IAAI,KAAS,MACX,OAAO;GAET,IAAM,IACJ,aAAiB,OACb,IACA,IAAI,KAAK,OAAO,KAAU,WAAW,IAAQ,OAAO,CAAK,CAAC;GAIhE,OAHI,OAAO,MAAM,EAAK,QAAQ,CAAC,IACtB,OAAO,CAAK,IAEd,IAAI,KAAK,eAAe,KAAA,GAAW;IACxC,MAAM;IACN,OAAO;IACP,KAAK;IACL,MAAM;IACN,QAAQ;GACV,CAAC,EAAE,OAAO,CAAI;EAChB;EAEA,SAAS,GAAY,GAAwB;GAC3C,IAAM,IAAI,OAAO,KAAS,EAAE,EAAE,YAAY;GAa1C,OAZI,MAAM,aAAa,MAAM,YAAY,MAAM,QAAQ,MAAM,SACpD,iBAEL,MAAM,aAAa,MAAM,YACpB,kBAEL,MAAM,YAAY,MAAM,WAAW,MAAM,YAAY,MAAM,WACtD,eAEL,MAAM,SACD,gBAEF;EACT;EAEA,SAAS,GAAS,GAAqB,GAAoC;GACzE,EAAK,UAAU;IAAE;IAAQ;GAAI,CAAC;EAChC;EAEA,SAAS,GAAS,GAA4B;GAC5C,EAAK,UAAU,EAAE,QAAQ,EAAO,CAAC;EACnC;yBAIE,EAwMU,WAAA;GAvMP,OAAK,EAAA,CAAA,0CAA0D,EAAA,aAAQ,KAAA,KAAA,8DAAA,CAAA;GAMxE,eAAY;;GAGJ,EAAA,cAAc,EAAA,SAAS,EAAA,YAAA,EAAA,GAD/B,EAgBS,UAhBT,GAgBS,CAXC,EAAA,cAAc,EAAA,SAAA,EAAA,GADtB,EAKK,MALL,GAKK,EADA,EAAA,cAAc,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAGhB,EAAA,YAAA,EAAA,GADR,EAKI,KALJ,IAKI,EADC,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAKP,EAAA,MAAQ,SAAM,KAAQ,EAAA,SAAA,EAAA,GAD9B,EA6BM,OA7BN,IA6BM,CAxBI,EAAA,MAAQ,SAAM,KAAA,EAAA,GADtB,EAeM,OAfN,IAeM,EAAA,EAAA,EAAA,GAVJ,EASS,GAAA,MAAA,EARW,EAAA,QAAV,GAAI,YADd,EASS,EAAA,CAAA,GAAA;IAPN,KAAK;IACN,SAAQ;IACR,MAAK;IACL,MAAK;IACJ,UAAK,MAAE,GAAS,CAAE;;qBAEO,CAAA,EAAA,EAAvB,EAAG,SAAK,QAAA,GAAA,CAAA,CAAA,CAAA;;kDAIJ,EAAA,SAAA,EAAA,GAAX,EAOM,OAPN,IAOM,CANJ,EAKE,EAAA,CAAA,GAAA;gBAJS,EAAA;6CAAW,QAAA;IACpB,MAAK;IACL,aAAY;IACZ,eAAY;;GAKlB,EA6GQ,EAAA,CAAA,GAAA,MAAA;qBAjFQ,CA3Bd,EA2Bc,EAAA,CAAA,GAAA,MAAA;sBADD,CAzBX,EAyBW,EAAA,CAAA,GAAA,MAAA;uBAvBoB,EAAA,EAAA,EAAA,GAD7B,EAiBY,GAAA,MAAA,EAhBE,EAAA,QAAL,YADT,EAiBY,EAAA,CAAA,GAAA;OAfT,KAAK,EAAE;OACP,OAAK,EAAE,EAAW,CAAC,CAAA;OACnB,OAAK,EAAE,EAAE,QAAK,EAAA,OAAY,EAAE,MAAK,IAAK,KAAA,CAAS;;wBAWvC,CARD,EAAE,YAAA,EAAA,GADV,EASS,UAAA;;QAPP,MAAK;QACL,OAAM;QACL,eAAW,QAAU,EAAE;QACvB,UAAK,MAAE,GAAW,CAAC;WAEpB,EAAmC,QAAA,MAAA,EAA1B,EAAE,SAAS,EAAE,GAAG,GAAA,CAAA,GACzB,EAAmD,QAAnD,IAAmD,EAA1B,GAAc,CAAC,CAAA,GAAA,CAAA,CAAA,GAAA,GAAA,EAAA,MAAA,EAAA,GAE1C,EAA0C,QAAA,IAAA,EAA1B,EAAE,SAAS,EAAE,GAAG,GAAA,CAAA,EAAA,CAAA;;6CAG1B,EAAA,MAAa,SAAM,KAAA,EAAA,GAD3B,EAKY,EAAA,CAAA,GAAA;;OAHV,OAAM;;wBAGR,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFC,aAED,EAAA,CAAA,CAAA,CAAA;;;;;;QAGJ,EA+EY,EAAA,CAAA,GAAA,MAAA;sBAXC,CAnEK,EAAA,MAAU,SAAM,KAAA,EAAA,EAAA,GAC9B,EAiEW,GAAA,EAAA,KAAA,EAAA,GAAA,EAhEW,EAAA,QAAZ,GAAK,YADf,EAiEW,EAAA,CAAA,GAAA;MA/DR,KAAK;MACL,eAAW,iBAAmB;;uBAGF,EAAA,EAAA,EAAA,GAD7B,EAyCY,GAAA,MAAA,EAxCE,EAAA,QAAL,YADT,EAyCY,EAAA,CAAA,GAAA;OAvCT,KAAK,EAAE;OACP,OAAK,EAAE,EAAW,CAAC,CAAA;;wBAIT,CAFK,EAAE,SAAI,eAAoB,EAAE,SAAI,uBAAA,EAAA,GAC9C,EAAqF,QAArF,IAAqF,EAA/C,GAAgB,EAAS,GAAK,EAAE,GAAG,CAAA,CAAA,GAAA,CAAA,KAEtD,EAAE,SAAI,aAAA,EAAA,GACzB,EAMO,QAAA;;QALL,eAAY;QACX,OAAK,EAAE,EAAS,GAAK,EAAE,GAAG,IAAA,mBAAA,cAAA;QAC1B,cAAY,EAAS,GAAK,EAAE,GAAG,IAAA,SAAA;YAE7B,EAAS,GAAK,EAAE,GAAG,IAAA,MAAA,GAAA,GAAA,IAAA,EAAA,KAGL,EAAE,SAAI,WAAA,EAAA,GACzB,EAKC,OAAA;;QAJC,eAAY;QACX,KAAK,OAAO,EAAS,GAAK,EAAE,GAAG,KAAA,EAAA;QAC/B,KAAK,EAAE,SAAS,EAAE;QACnB,OAAM;0BAGW,EAAE,SAAI,mBAAA,EAAA,GACzB,EAMO,QANP,IAMO,CALL,EAGE,QAAA;QAFA,eAAY;QACX,OAAK,EAAA,CAAA,yCAA4C,GAAY,EAAS,GAAK,EAAE,GAAG,CAAA,CAAA,CAAA;oBAEnF,EAAuC,QAAA,MAAA,EAA9B,EAAS,GAAK,EAAE,GAAG,CAAA,GAAA,CAAA,CAAA,CAAA,MAAA,EAAA,GAI9B,EAIO,QAAA,IAAA;QAHW,EAAE,WAAA,EAAA,GAAlB,EAAqD,GAAA,EAAA,KAAA,EAAA,GAAA,CAAA,EAAA,EAAvB,EAAE,OAAO,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA;UAAc,MACrD,EAAG,EAAS,GAAK,EAAE,GAAG,KAAA,EAAA,IAAU,KAChC,CAAA;QAAgB,EAAE,UAAA,EAAA,GAAlB,EAAmD,GAAA,EAAA,KAAA,EAAA,GAAA,CAAA,EAAA,EAAtB,EAAE,MAAM,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA;;;oCAKnC,EAAA,MAAa,SAAM,KAAA,EAAA,GAD3B,EAiBY,EAAA,CAAA,GAAA;;OAfV,OAAM;;wBAcA,CAZN,EAYM,OAZN,IAYM,EAAA,EAAA,EAAA,GAXJ,EAUS,GAAA,MAAA,EATgB,EAAA,QAAf,GAAQ,YADlB,EAUS,EAAA,CAAA,GAAA;QARN,KAAK;QACN,SAAQ;QACR,MAAK;QACL,MAAK;QACJ,eAAW,oBAAsB,EAAO,QAAQ;QAChD,UAAK,MAAE,GAAS,GAAQ,CAAG;;yBAEmC,CAAA,EAAA,EAA5D,EAAO,SAAS,EAAO,WAAW,EAAO,QAAI,QAAA,GAAA,CAAA,CAAA,CAAA;;;;;;gDAOxD,EAOW,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;uBADG,CALZ,EAKY,EAAA,CAAA,GAAA;OAJT,SAAS,EAAA,MAAe,SAAU,IAAA,MAAa,SAAM;OACtD,OAAM;;wBAE2D,CAAjE,EAAiE,QAAjE,IAAiE,EAA1B,GAAA,KAAgB,GAAA,CAAA,CAAA,CAAA;;;;;;;;;GAQzD,EAAA,SAAa,EAAA,MAAW,SAAM,KAAA,EAAA,GADtC,EA8BS,UA9BT,GA8BS,CAzBP,EAEO,QAFP,GAA4C,WACrC,EAAG,EAAA,KAAW,IAAG,SAAI,EAAG,EAAA,KAAS,GAAA,CAAA,GAExC,EAqBM,OArBN,GAqBM,CApBJ,EASS,EAAA,CAAA,GAAA;IARP,SAAQ;IACR,MAAK;IACL,MAAK;IACJ,UAAU,EAAA,SAAW;IACtB,eAAY;IACX,SAAO;;qBAGV,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFC,cAED,EAAA,CAAA,CAAA,CAAA;;wBACA,EASS,EAAA,CAAA,GAAA;IARP,SAAQ;IACR,MAAK;IACL,MAAK;IACJ,UAAU,EAAA,SAAe,EAAA;IAC1B,eAAY;IACX,SAAO;;qBAGV,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFC,UAED,EAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/DatatableCard-BNMi1Bqa.js

@@ -0,0 +1,114 @@
+import { n as e } from "./utils-DAErOi9O.js";
+import { n as t, o as n, r, s as i } from "./card-DAfWnvro.js";
+import { a, c as o, n as s, r as c, s as l, t as u } from "./table-CanciZAw.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createTextVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, openBlock as b, renderList as x, toDisplayString as S, unref as C, withCtx as w } from "vue";
+//#region src/components/compositions/elements/card/DatatableCard.vue?vue&type=script&setup=true&lang.ts
+var T = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, E = /* @__PURE__ */ v({
+	__name: "DatatableCard",
+	props: {
+		label: {},
+		title: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		tableColumns: { default: () => [] },
+		rows: { default: () => [] },
+		dataRoute: {},
+		item: { default: () => ({}) },
+		name: {},
+		classList: {}
+	},
+	setup(v) {
+		let E = v, D = f(() => E.title ?? E.label), O = f(() => {
+			if (E.rows && E.rows.length > 0) return E.rows;
+			let e = E.name;
+			if (e && E.item[e]) {
+				let t = E.item[e];
+				if (Array.isArray(t)) return t;
+			}
+			return [];
+		});
+		function k(e, t) {
+			let n = e[t.key];
+			return n == null ? "—" : String(n);
+		}
+		return (f, v) => E.showCard === !1 ? (b(), h("div", {
+			key: 1,
+			class: y(C(e)(E.classList))
+		}, [E.tableColumns.length ? (b(), p(C(o), { key: 0 }, {
+			default: w(() => [_(C(s), null, {
+				default: w(() => [_(C(u), null, {
+					default: w(() => [(b(!0), h(d, null, x(E.tableColumns, (e) => (b(), p(C(c), { key: e.key }, {
+						default: w(() => [g(S(e.label), 1)]),
+						_: 2
+					}, 1024))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}), _(C(l), null, {
+				default: w(() => [(b(!0), h(d, null, x(O.value, (e, t) => (b(), p(C(u), { key: t }, {
+					default: w(() => [(b(!0), h(d, null, x(E.tableColumns, (t) => (b(), p(C(a), { key: t.key }, {
+						default: w(() => [g(S(k(e, t)), 1)]),
+						_: 2
+					}, 1024))), 128))]),
+					_: 2
+				}, 1024))), 128))]),
+				_: 1
+			})]),
+			_: 1
+		})) : m("", !0)], 2)) : (b(), p(C(i), {
+			key: 0,
+			class: y(C(e)(E.classList))
+		}, {
+			default: w(() => [D.value ? (b(), p(C(r), { key: 0 }, {
+				default: w(() => [_(C(t), null, {
+					default: w(() => [g(S(D.value), 1)]),
+					_: 1
+				})]),
+				_: 1
+			})) : m("", !0), _(C(n), null, {
+				default: w(() => [E.tableColumns.length ? (b(), p(C(o), { key: 0 }, {
+					default: w(() => [_(C(s), null, {
+						default: w(() => [_(C(u), null, {
+							default: w(() => [(b(!0), h(d, null, x(E.tableColumns, (e) => (b(), p(C(c), { key: e.key }, {
+								default: w(() => [g(S(e.label), 1)]),
+								_: 2
+							}, 1024))), 128))]),
+							_: 1
+						})]),
+						_: 1
+					}), _(C(l), null, {
+						default: w(() => [(b(!0), h(d, null, x(O.value, (e, t) => (b(), p(C(u), { key: t }, {
+							default: w(() => [(b(!0), h(d, null, x(E.tableColumns, (t) => (b(), p(C(a), { key: t.key }, {
+								default: w(() => [g(S(k(e, t)), 1)]),
+								_: 2
+							}, 1024))), 128))]),
+							_: 2
+						}, 1024))), 128)), O.value.length ? m("", !0) : (b(), p(C(u), { key: 0 }, {
+							default: w(() => [_(C(a), {
+								colspan: E.tableColumns.length || 1,
+								class: "text-center text-muted-foreground"
+							}, {
+								default: w(() => [g(S(E.dataRoute ? `Data fetched from: ${E.dataRoute}` : "No data."), 1)]),
+								_: 1
+							}, 8, ["colspan"])]),
+							_: 1
+						}))]),
+						_: 1
+					})]),
+					_: 1
+				})) : (b(), h("p", T, "No columns configured."))]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=DatatableCard-BNMi1Bqa.js.map

package/dist/chunks/DatatableCard-BNMi1Bqa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatatableCard-BNMi1Bqa.js","names":[],"sources":["../../src/components/compositions/elements/card/DatatableCard.vue","../../src/components/compositions/elements/card/DatatableCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * `card.datatable` element composition.\n *\n * Renders a simple sortable data table. Column definitions come from\n * `tableColumns`; row data is either supplied via `item[name]` or fetched\n * from `dataRoute`. Full pagination/filter support is handled by the\n * platform's DataTableCard when used in the card-tier — this element-tier\n * variant is intentionally lightweight for inline embedding.\n */\nimport { computed } from \"vue\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TableColumn {\n  key: string\n  label: string\n  sortable?: boolean\n}\n\nexport interface DatatableCardProps {\n  label?: string\n  title?: string\n  showCard?: boolean\n  tableColumns?: TableColumn[]\n  /** Data rows supplied inline (e.g. from `item[name]`). */\n  rows?: Array<Record<string, unknown>>\n  /** API route for fetching rows (displayed as a hint when rows is empty). */\n  dataRoute?: string\n  item?: Record<string, unknown>\n  name?: string | null\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<DatatableCardProps>(), {\n  showCard: true,\n  tableColumns: () => [],\n  rows: () => [],\n  item: () => ({}),\n})\n\nconst heading = computed(() => props.title ?? props.label)\n\nconst resolvedRows = computed<Array<Record<string, unknown>>>(() => {\n  if (props.rows && props.rows.length > 0) return props.rows\n  const name = props.name\n  if (name && props.item[name]) {\n    const val = props.item[name]\n    if (Array.isArray(val)) return val as Array<Record<string, unknown>>\n  }\n  return []\n})\n\nfunction cellValue(row: Record<string, unknown>, col: TableColumn): string {\n  const val = row[col.key]\n  return val !== undefined && val !== null ? String(val) : \"—\"\n}\n</script>\n\n<template>\n  <Card v-if=\"props.showCard !== false\" :class=\"cn(props.classList)\">\n    <CardHeader v-if=\"heading\">\n      <CardTitle>{{ heading }}</CardTitle>\n    </CardHeader>\n    <CardContent>\n      <Table v-if=\"props.tableColumns.length\">\n        <TableHeader>\n          <TableRow>\n            <TableHead\n              v-for=\"col in props.tableColumns\"\n              :key=\"col.key\"\n            >\n              {{ col.label }}\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow\n            v-for=\"(row, i) in resolvedRows\"\n            :key=\"i\"\n          >\n            <TableCell\n              v-for=\"col in props.tableColumns\"\n              :key=\"col.key\"\n            >\n              {{ cellValue(row, col) }}\n            </TableCell>\n          </TableRow>\n          <TableRow v-if=\"!resolvedRows.length\">\n            <TableCell\n              :colspan=\"props.tableColumns.length || 1\"\n              class=\"text-center text-muted-foreground\"\n            >\n              {{ props.dataRoute ? `Data fetched from: ${props.dataRoute}` : \"No data.\" }}\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n      <p v-else class=\"text-sm text-muted-foreground\">No columns configured.</p>\n    </CardContent>\n  </Card>\n\n  <div v-else :class=\"cn(props.classList)\">\n    <Table v-if=\"props.tableColumns.length\">\n      <TableHeader>\n        <TableRow>\n          <TableHead v-for=\"col in props.tableColumns\" :key=\"col.key\">{{ col.label }}</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <TableRow v-for=\"(row, i) in resolvedRows\" :key=\"i\">\n          <TableCell v-for=\"col in props.tableColumns\" :key=\"col.key\">{{ cellValue(row, col) }}</TableCell>\n        </TableRow>\n      </TableBody>\n    </Table>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * `card.datatable` element composition.\n *\n * Renders a simple sortable data table. Column definitions come from\n * `tableColumns`; row data is either supplied via `item[name]` or fetched\n * from `dataRoute`. Full pagination/filter support is handled by the\n * platform's DataTableCard when used in the card-tier — this element-tier\n * variant is intentionally lightweight for inline embedding.\n */\nimport { computed } from \"vue\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TableColumn {\n  key: string\n  label: string\n  sortable?: boolean\n}\n\nexport interface DatatableCardProps {\n  label?: string\n  title?: string\n  showCard?: boolean\n  tableColumns?: TableColumn[]\n  /** Data rows supplied inline (e.g. from `item[name]`). */\n  rows?: Array<Record<string, unknown>>\n  /** API route for fetching rows (displayed as a hint when rows is empty). */\n  dataRoute?: string\n  item?: Record<string, unknown>\n  name?: string | null\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<DatatableCardProps>(), {\n  showCard: true,\n  tableColumns: () => [],\n  rows: () => [],\n  item: () => ({}),\n})\n\nconst heading = computed(() => props.title ?? props.label)\n\nconst resolvedRows = computed<Array<Record<string, unknown>>>(() => {\n  if (props.rows && props.rows.length > 0) return props.rows\n  const name = props.name\n  if (name && props.item[name]) {\n    const val = props.item[name]\n    if (Array.isArray(val)) return val as Array<Record<string, unknown>>\n  }\n  return []\n})\n\nfunction cellValue(row: Record<string, unknown>, col: TableColumn): string {\n  const val = row[col.key]\n  return val !== undefined && val !== null ? String(val) : \"—\"\n}\n</script>\n\n<template>\n  <Card v-if=\"props.showCard !== false\" :class=\"cn(props.classList)\">\n    <CardHeader v-if=\"heading\">\n      <CardTitle>{{ heading }}</CardTitle>\n    </CardHeader>\n    <CardContent>\n      <Table v-if=\"props.tableColumns.length\">\n        <TableHeader>\n          <TableRow>\n            <TableHead\n              v-for=\"col in props.tableColumns\"\n              :key=\"col.key\"\n            >\n              {{ col.label }}\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow\n            v-for=\"(row, i) in resolvedRows\"\n            :key=\"i\"\n          >\n            <TableCell\n              v-for=\"col in props.tableColumns\"\n              :key=\"col.key\"\n            >\n              {{ cellValue(row, col) }}\n            </TableCell>\n          </TableRow>\n          <TableRow v-if=\"!resolvedRows.length\">\n            <TableCell\n              :colspan=\"props.tableColumns.length || 1\"\n              class=\"text-center text-muted-foreground\"\n            >\n              {{ props.dataRoute ? `Data fetched from: ${props.dataRoute}` : \"No data.\" }}\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n      <p v-else class=\"text-sm text-muted-foreground\">No columns configured.</p>\n    </CardContent>\n  </Card>\n\n  <div v-else :class=\"cn(props.classList)\">\n    <Table v-if=\"props.tableColumns.length\">\n      <TableHeader>\n        <TableRow>\n          <TableHead v-for=\"col in props.tableColumns\" :key=\"col.key\">{{ col.label }}</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <TableRow v-for=\"(row, i) in resolvedRows\" :key=\"i\">\n          <TableCell v-for=\"col in props.tableColumns\" :key=\"col.key\">{{ cellValue(row, col) }}</TableCell>\n        </TableRow>\n      </TableBody>\n    </Table>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/chunks/DatePicker-Cr_aYdU2.js

@@ -0,0 +1,131 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./button-BAwcISlK.js";
+import { f as r } from "./calendar-Cy0jbT6X.js";
+import { n as i, s as a, t as o } from "./popover-_VzKSUl8.js";
+import { t as s } from "./field-frame-n5oLDNBT.js";
+import { computed as c, createBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, normalizeClass as m, openBlock as h, ref as g, toDisplayString as _, unref as v, useModel as y, withCtx as b } from "vue";
+import { Calendar as x } from "@lucide/vue";
+import { CalendarDate as S, parseDate as C } from "@internationalized/date";
+//#region src/components/compositions/elements/picker/DatePicker.vue?vue&type=script&setup=true&lang.ts
+var w = /* @__PURE__ */ f({
+	__name: "DatePicker",
+	props: /* @__PURE__ */ p({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		minDate: {},
+		maxDate: {},
+		format: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let f = e, p = y(e, "modelValue"), w = g(!1), T = c(() => {
+			let e = p.value;
+			if (e) return k(e);
+		}), E = c(() => f.minDate ? k(f.minDate) : void 0), D = c(() => f.maxDate ? k(f.maxDate) : void 0), O = c(() => {
+			let e = p.value;
+			return e ? A(e, f.format) : "";
+		});
+		function k(e) {
+			try {
+				return C(e.includes("T") ? e.slice(0, 10) : e);
+			} catch {
+				return;
+			}
+		}
+		function A(e, t) {
+			let n = k(e);
+			if (!n) return e;
+			if (!t || t === "yyyy-MM-dd") return n.toString();
+			let r = new Date(n.year, n.month - 1, n.day);
+			try {
+				return new Intl.DateTimeFormat(void 0, {
+					year: "numeric",
+					month: "short",
+					day: "2-digit"
+				}).format(r);
+			} catch {
+				return n.toString();
+			}
+		}
+		function j(e) {
+			if (!e) {
+				p.value = null;
+				return;
+			}
+			p.value = (e instanceof S ? e : new S(e.year, e.month, e.day)).toString(), w.value = !1;
+		}
+		return (c, f) => (h(), l(v(s), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: b(() => [d(v(a), {
+				open: w.value,
+				"onUpdate:open": f[0] ||= (e) => w.value = e
+			}, {
+				default: b(() => [d(v(o), { "as-child": "" }, {
+					default: b(() => [d(v(n), {
+						type: "button",
+						variant: "outline",
+						disabled: e.disabled,
+						class: m(v(t)("w-full justify-start text-left font-normal", !p.value && "text-muted-foreground")),
+						"data-element-name": e.name ?? void 0,
+						"data-readonly": e.readonly || void 0
+					}, {
+						default: b(() => [d(v(x), { class: "mr-2 size-4" }), u("span", null, _(O.value || e.placeholder || "Pick a date"), 1)]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"class",
+						"data-element-name",
+						"data-readonly"
+					])]),
+					_: 1
+				}), d(v(i), { class: "w-auto p-0" }, {
+					default: b(() => [d(v(r), {
+						"model-value": T.value,
+						"min-value": E.value,
+						"max-value": D.value,
+						placeholder: T.value ?? E.value ?? D.value,
+						"onUpdate:modelValue": j
+					}, null, 8, [
+						"model-value",
+						"min-value",
+						"max-value",
+						"placeholder"
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), T = /* @__PURE__ */ e({ default: () => E }), E = w;
+//#endregion
+export { T as n, E as t };
+
+//# sourceMappingURL=DatePicker-Cr_aYdU2.js.map

package/dist/chunks/DatePicker-Cr_aYdU2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker-Cr_aYdU2.js","names":[],"sources":["../../src/components/compositions/elements/picker/DatePicker.vue","../../src/components/compositions/elements/picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven date picker composition. Popover trigger Button shows the\n * formatted current date; the popover hosts the shadcn `Calendar`.\n * Values round-trip as ISO date strings (`yyyy-MM-dd` by default).\n *\n *   <DatePicker v-model=\"startsAt\" label=\"Starts at\" />\n *\n * Self-contained — no Pinia / store coupling. Composes `FieldFrame` for\n * label / helpText / errors chrome.\n */\nimport { computed, ref } from \"vue\"\nimport { Calendar as CalendarIcon } from \"@lucide/vue\"\nimport {\n  CalendarDate,\n  parseDate,\n  type DateValue,\n} from \"@internationalized/date\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DatePickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** ISO date string, e.g. \"2024-06-10\" */\n  minDate?: string\n  /** ISO date string, e.g. \"2024-06-25\" */\n  maxDate?: string\n  /** Display format. Default `yyyy-MM-dd`. */\n  format?: string\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  const iso = model.value\n  if (!iso) {\n    return undefined\n  }\n  return safeParseDate(iso)\n})\n\nconst min = computed<DateValue | undefined>(() =>\n  props.minDate ? safeParseDate(props.minDate) : undefined,\n)\n\nconst max = computed<DateValue | undefined>(() =>\n  props.maxDate ? safeParseDate(props.maxDate) : undefined,\n)\n\nconst displayValue = computed<string>(() => {\n  const iso = model.value\n  if (!iso) {\n    return \"\"\n  }\n  return formatDate(iso, props.format)\n})\n\nfunction safeParseDate(value: string): DateValue | undefined {\n  try {\n    // Accept full ISO datetime (\"2024-06-15T00:00:00Z\") or date-only.\n    const dateOnly = value.includes(\"T\") ? value.slice(0, 10) : value\n    return parseDate(dateOnly)\n  } catch {\n    return undefined\n  }\n}\n\nfunction formatDate(iso: string, format?: string): string {\n  const parsed = safeParseDate(iso)\n  if (!parsed) {\n    return iso\n  }\n  if (!format || format === \"yyyy-MM-dd\") {\n    return parsed.toString()\n  }\n  const date = new Date(parsed.year, parsed.month - 1, parsed.day)\n  try {\n    return new Intl.DateTimeFormat(undefined, {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"2-digit\",\n    }).format(date)\n  } catch {\n    return parsed.toString()\n  }\n}\n\nfunction onSelect(value: DateValue | undefined): void {\n  if (!value) {\n    model.value = null\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  model.value = calendar.toString()\n  open.value = false\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          :disabled=\"disabled\"\n          :class=\"\n            cn(\n              'w-full justify-start text-left font-normal',\n              !model && 'text-muted-foreground',\n            )\n          \"\n          :data-element-name=\"name ?? undefined\"\n          :data-readonly=\"readonly || undefined\"\n        >\n          <CalendarIcon class=\"mr-2 size-4\" />\n          <span>{{ displayValue || placeholder || \"Pick a date\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :min-value=\"min\"\n          :max-value=\"max\"\n          :placeholder=\"calendarValue ?? min ?? max\"\n          @update:model-value=\"onSelect\"\n        />\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven date picker composition. Popover trigger Button shows the\n * formatted current date; the popover hosts the shadcn `Calendar`.\n * Values round-trip as ISO date strings (`yyyy-MM-dd` by default).\n *\n *   <DatePicker v-model=\"startsAt\" label=\"Starts at\" />\n *\n * Self-contained — no Pinia / store coupling. Composes `FieldFrame` for\n * label / helpText / errors chrome.\n */\nimport { computed, ref } from \"vue\"\nimport { Calendar as CalendarIcon } from \"@lucide/vue\"\nimport {\n  CalendarDate,\n  parseDate,\n  type DateValue,\n} from \"@internationalized/date\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DatePickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** ISO date string, e.g. \"2024-06-10\" */\n  minDate?: string\n  /** ISO date string, e.g. \"2024-06-25\" */\n  maxDate?: string\n  /** Display format. Default `yyyy-MM-dd`. */\n  format?: string\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  const iso = model.value\n  if (!iso) {\n    return undefined\n  }\n  return safeParseDate(iso)\n})\n\nconst min = computed<DateValue | undefined>(() =>\n  props.minDate ? safeParseDate(props.minDate) : undefined,\n)\n\nconst max = computed<DateValue | undefined>(() =>\n  props.maxDate ? safeParseDate(props.maxDate) : undefined,\n)\n\nconst displayValue = computed<string>(() => {\n  const iso = model.value\n  if (!iso) {\n    return \"\"\n  }\n  return formatDate(iso, props.format)\n})\n\nfunction safeParseDate(value: string): DateValue | undefined {\n  try {\n    // Accept full ISO datetime (\"2024-06-15T00:00:00Z\") or date-only.\n    const dateOnly = value.includes(\"T\") ? value.slice(0, 10) : value\n    return parseDate(dateOnly)\n  } catch {\n    return undefined\n  }\n}\n\nfunction formatDate(iso: string, format?: string): string {\n  const parsed = safeParseDate(iso)\n  if (!parsed) {\n    return iso\n  }\n  if (!format || format === \"yyyy-MM-dd\") {\n    return parsed.toString()\n  }\n  const date = new Date(parsed.year, parsed.month - 1, parsed.day)\n  try {\n    return new Intl.DateTimeFormat(undefined, {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"2-digit\",\n    }).format(date)\n  } catch {\n    return parsed.toString()\n  }\n}\n\nfunction onSelect(value: DateValue | undefined): void {\n  if (!value) {\n    model.value = null\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  model.value = calendar.toString()\n  open.value = false\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          :disabled=\"disabled\"\n          :class=\"\n            cn(\n              'w-full justify-start text-left font-normal',\n              !model && 'text-muted-foreground',\n            )\n          \"\n          :data-element-name=\"name ?? undefined\"\n          :data-readonly=\"readonly || undefined\"\n        >\n          <CalendarIcon class=\"mr-2 size-4\" />\n          <span>{{ displayValue || placeholder || \"Pick a date\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :min-value=\"min\"\n          :max-value=\"max\"\n          :placeholder=\"calendarValue ?? min ?? max\"\n          @update:model-value=\"onSelect\"\n        />\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ,GAIR,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAO,EAAI,EAAK,GAEhB,IAAgB,QAAsC;GAC1D,IAAM,IAAM,EAAM;GACb,OAGL,OAAO,EAAc,CAAG;EAC1B,CAAC,GAEK,IAAM,QACV,EAAM,UAAU,EAAc,EAAM,OAAO,IAAI,KAAA,CACjD,GAEM,IAAM,QACV,EAAM,UAAU,EAAc,EAAM,OAAO,IAAI,KAAA,CACjD,GAEM,IAAe,QAAuB;GAC1C,IAAM,IAAM,EAAM;GAIlB,OAHK,IAGE,EAAW,GAAK,EAAM,MAAM,IAF1B;EAGX,CAAC;EAED,SAAS,EAAc,GAAsC;GAC3D,IAAI;IAGF,OAAO,EADU,EAAM,SAAS,GAAG,IAAI,EAAM,MAAM,GAAG,EAAE,IAAI,CACnC;GAC3B,QAAQ;IACN;GACF;EACF;EAEA,SAAS,EAAW,GAAa,GAAyB;GACxD,IAAM,IAAS,EAAc,CAAG;GAChC,IAAI,CAAC,GACH,OAAO;GAET,IAAI,CAAC,KAAU,MAAW,cACxB,OAAO,EAAO,SAAS;GAEzB,IAAM,IAAO,IAAI,KAAK,EAAO,MAAM,EAAO,QAAQ,GAAG,EAAO,GAAG;GAC/D,IAAI;IACF,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;KACxC,MAAM;KACN,OAAO;KACP,KAAK;IACP,CAAC,EAAE,OAAO,CAAI;GAChB,QAAQ;IACN,OAAO,EAAO,SAAS;GACzB;EACF;EAEA,SAAS,EAAS,GAAoC;GACpD,IAAI,CAAC,GAAO;IACV,EAAM,QAAQ;IACd;GACF;GAMA,AADA,EAAM,SAHJ,aAAiB,IACb,IACA,IAAI,EAAa,EAAM,MAAM,EAAM,OAAO,EAAM,GAAG,GAClC,SAAS,GAChC,EAAK,QAAQ;EACf;yBAIE,EAqCa,EAAA,CAAA,GAAA;GApCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA8BC,CA5BV,EA4BU,EAAA,CAAA,GAAA;IA5BO,MAAM,EAAA;uCAAI,QAAA;;qBAkBR,CAjBjB,EAiBiB,EAAA,CAAA,GAAA,EAjBD,YAAA,GAAQ,GAAA;sBAgBb,CAfT,EAeS,EAAA,CAAA,GAAA;MAdP,MAAK;MACL,SAAQ;MACP,UAAU,EAAA;MACV,OAAK,EAAe,EAAA,CAAA,EAAA,8CAAA,CAA+E,EAAA,SAAK,uBAAA,CAAA;MAMxG,qBAAmB,EAAA,QAAQ,KAAA;MAC3B,iBAAe,EAAA,YAAY,KAAA;;uBAEQ,CAApC,EAAoC,EAAA,CAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,GACjC,EAA+D,QAAA,MAAA,EAAtD,EAAA,SAAgB,EAAA,eAAW,aAAA,GAAA,CAAA,CAAA,CAAA;;;;;;;;;QAGxC,EAQiB,EAAA,CAAA,GAAA,EARD,OAAM,aAAY,GAAA;sBAO9B,CANF,EAME,EAAA,CAAA,GAAA;MALC,eAAa,EAAA;MACb,aAAW,EAAA;MACX,aAAW,EAAA;MACX,aAAa,EAAA,SAAiB,EAAA,SAAO,EAAA;MACrC,uBAAoB"}

package/dist/chunks/DateTimePicker-mDoHjV_R.js

@@ -0,0 +1,160 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./button-BAwcISlK.js";
+import { f as r } from "./calendar-Cy0jbT6X.js";
+import { t as i } from "./input-tw5ZQGKQ.js";
+import { n as a, s as o, t as s } from "./popover-_VzKSUl8.js";
+import { t as c } from "./field-frame-n5oLDNBT.js";
+import { computed as l, createBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, openBlock as g, ref as _, toDisplayString as v, unref as y, useModel as b, watchEffect as x, withCtx as S } from "vue";
+import { Calendar as C, Clock as w } from "@lucide/vue";
+import { CalendarDate as T, parseDate as E } from "@internationalized/date";
+//#region src/components/compositions/elements/picker/DateTimePicker.vue?vue&type=script&setup=true&lang.ts
+var D = { class: "flex items-center gap-2 border-t p-3" }, O = /* @__PURE__ */ p({
+	__name: "DateTimePicker",
+	props: /* @__PURE__ */ m({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let p = b(e, "modelValue"), m = _(""), O = _(""), k = _("");
+		x(() => {
+			let e = p.value;
+			if (!e) {
+				m.value = "", O.value = "", k.value = "";
+				return;
+			}
+			let [t, n] = e.split("T");
+			if (m.value = t ?? "", n) {
+				let [e, t] = n.split(":");
+				O.value = e ?? "", k.value = (t ?? "").slice(0, 2);
+			} else O.value = "", k.value = "";
+		});
+		let A = _(!1), j = l(() => {
+			if (m.value) try {
+				return E(m.value);
+			} catch {
+				return;
+			}
+		});
+		function M() {
+			if (!m.value) {
+				p.value = null;
+				return;
+			}
+			if (O.value === "" && k.value === "") {
+				p.value = m.value;
+				return;
+			}
+			let e = N(O.value || "0"), t = N(k.value || "0");
+			p.value = `${m.value}T${e}:${t}:00`;
+		}
+		function N(e) {
+			return Math.max(0, parseInt(e, 10) || 0).toString().padStart(2, "0");
+		}
+		function P(e) {
+			if (!e) {
+				m.value = "", M();
+				return;
+			}
+			m.value = (e instanceof T ? e : new T(e.year, e.month, e.day)).toString(), M(), A.value = !1;
+		}
+		function F(e) {
+			O.value = Math.min(23, Math.max(0, parseInt(String(e ?? ""), 10) || 0)).toString(), M();
+		}
+		function I(e) {
+			k.value = Math.min(59, Math.max(0, parseInt(String(e ?? ""), 10) || 0)).toString(), M();
+		}
+		let L = l(() => m.value ? O.value === "" && k.value === "" ? m.value : `${m.value} ${N(O.value || "0")}:${N(k.value || "0")}` : "");
+		return (l, p) => (g(), u(y(c), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: S(() => [f(y(o), {
+				open: A.value,
+				"onUpdate:open": p[0] ||= (e) => A.value = e
+			}, {
+				default: S(() => [f(y(s), { "as-child": "" }, {
+					default: S(() => [f(y(n), {
+						type: "button",
+						variant: "outline",
+						disabled: e.disabled,
+						class: h(y(t)("w-full justify-start text-left font-normal", !L.value && "text-muted-foreground")),
+						"data-element-name": e.name ?? void 0,
+						"data-readonly": e.readonly || void 0
+					}, {
+						default: S(() => [f(y(C), { class: "mr-2 size-4" }), d("span", null, v(L.value || e.placeholder || "Pick a date & time"), 1)]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"class",
+						"data-element-name",
+						"data-readonly"
+					])]),
+					_: 1
+				}), f(y(a), { class: "w-auto p-0" }, {
+					default: S(() => [f(y(r), {
+						"model-value": j.value,
+						placeholder: j.value,
+						"onUpdate:modelValue": P
+					}, null, 8, ["model-value", "placeholder"]), d("div", D, [
+						f(y(w), { class: "size-4 text-muted-foreground" }),
+						f(y(i), {
+							type: "number",
+							min: "0",
+							max: "23",
+							"model-value": O.value,
+							class: "w-16",
+							disabled: e.disabled,
+							placeholder: "HH",
+							"data-testid": "datetime-hour",
+							"onUpdate:modelValue": F
+						}, null, 8, ["model-value", "disabled"]),
+						p[1] ||= d("span", { class: "text-muted-foreground" }, ":", -1),
+						f(y(i), {
+							type: "number",
+							min: "0",
+							max: "59",
+							"model-value": k.value,
+							class: "w-16",
+							disabled: e.disabled,
+							placeholder: "MM",
+							"data-testid": "datetime-minute",
+							"onUpdate:modelValue": I
+						}, null, 8, ["model-value", "disabled"])
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), k = /* @__PURE__ */ e({ default: () => A }), A = O;
+//#endregion
+export { k as n, A as t };
+
+//# sourceMappingURL=DateTimePicker-mDoHjV_R.js.map

package/dist/chunks/DateTimePicker-mDoHjV_R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker-mDoHjV_R.js","names":[],"sources":["../../src/components/compositions/elements/picker/DateTimePicker.vue","../../src/components/compositions/elements/picker/DateTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven date+time picker composition. DatePicker-style Popover\n * (Calendar) plus two numeric inputs for hour/minute. Round-trips ISO\n * 8601 (e.g. `2024-06-15T13:30:00`). When only the date half is set the\n * value falls back to a date-only ISO string.\n *\n *   <DateTimePicker v-model=\"when\" label=\"Starts at\" />\n */\nimport { computed, ref, watchEffect } from \"vue\"\nimport { Calendar as CalendarIcon, Clock } from \"@lucide/vue\"\nimport {\n  CalendarDate,\n  parseDate,\n  type DateValue,\n} from \"@internationalized/date\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DateTimePickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<DateTimePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst datePart = ref<string>(\"\")\nconst hourPart = ref<string>(\"\")\nconst minutePart = ref<string>(\"\")\n\nwatchEffect(() => {\n  const iso = model.value\n  if (!iso) {\n    datePart.value = \"\"\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n    return\n  }\n  const [d, t] = iso.split(\"T\")\n  datePart.value = d ?? \"\"\n  if (t) {\n    const [hh, mm] = t.split(\":\")\n    hourPart.value = hh ?? \"\"\n    minutePart.value = (mm ?? \"\").slice(0, 2)\n  } else {\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n  }\n})\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  if (!datePart.value) {\n    return undefined\n  }\n  try {\n    return parseDate(datePart.value)\n  } catch {\n    return undefined\n  }\n})\n\nfunction emitCombined(): void {\n  if (!datePart.value) {\n    model.value = null\n    return\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    model.value = datePart.value\n    return\n  }\n  const hh = padTwo(hourPart.value || \"0\")\n  const mm = padTwo(minutePart.value || \"0\")\n  model.value = `${datePart.value}T${hh}:${mm}:00`\n}\n\nfunction padTwo(value: string): string {\n  const n = Math.max(0, parseInt(value, 10) || 0)\n  return n.toString().padStart(2, \"0\")\n}\n\nfunction onDateSelected(value: DateValue | undefined): void {\n  if (!value) {\n    datePart.value = \"\"\n    emitCombined()\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  datePart.value = calendar.toString()\n  emitCombined()\n  open.value = false\n}\n\nfunction onHourInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(23, Math.max(0, parseInt(next, 10) || 0))\n  hourPart.value = numeric.toString()\n  emitCombined()\n}\n\nfunction onMinuteInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(59, Math.max(0, parseInt(next, 10) || 0))\n  minutePart.value = numeric.toString()\n  emitCombined()\n}\n\nconst displayValue = computed<string>(() => {\n  if (!datePart.value) {\n    return \"\"\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    return datePart.value\n  }\n  return `${datePart.value} ${padTwo(hourPart.value || \"0\")}:${padTwo(minutePart.value || \"0\")}`\n})\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          :disabled=\"disabled\"\n          :class=\"\n            cn(\n              'w-full justify-start text-left font-normal',\n              !displayValue && 'text-muted-foreground',\n            )\n          \"\n          :data-element-name=\"name ?? undefined\"\n          :data-readonly=\"readonly || undefined\"\n        >\n          <CalendarIcon class=\"mr-2 size-4\" />\n          <span>{{ displayValue || placeholder || \"Pick a date & time\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :placeholder=\"calendarValue\"\n          @update:model-value=\"onDateSelected\"\n        />\n        <div class=\"flex items-center gap-2 border-t p-3\">\n          <Clock class=\"size-4 text-muted-foreground\" />\n          <Input\n            type=\"number\"\n            min=\"0\"\n            max=\"23\"\n            :model-value=\"hourPart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"HH\"\n            data-testid=\"datetime-hour\"\n            @update:model-value=\"onHourInput\"\n          />\n          <span class=\"text-muted-foreground\">:</span>\n          <Input\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            :model-value=\"minutePart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"MM\"\n            data-testid=\"datetime-minute\"\n            @update:model-value=\"onMinuteInput\"\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven date+time picker composition. DatePicker-style Popover\n * (Calendar) plus two numeric inputs for hour/minute. Round-trips ISO\n * 8601 (e.g. `2024-06-15T13:30:00`). When only the date half is set the\n * value falls back to a date-only ISO string.\n *\n *   <DateTimePicker v-model=\"when\" label=\"Starts at\" />\n */\nimport { computed, ref, watchEffect } from \"vue\"\nimport { Calendar as CalendarIcon, Clock } from \"@lucide/vue\"\nimport {\n  CalendarDate,\n  parseDate,\n  type DateValue,\n} from \"@internationalized/date\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DateTimePickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<DateTimePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst datePart = ref<string>(\"\")\nconst hourPart = ref<string>(\"\")\nconst minutePart = ref<string>(\"\")\n\nwatchEffect(() => {\n  const iso = model.value\n  if (!iso) {\n    datePart.value = \"\"\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n    return\n  }\n  const [d, t] = iso.split(\"T\")\n  datePart.value = d ?? \"\"\n  if (t) {\n    const [hh, mm] = t.split(\":\")\n    hourPart.value = hh ?? \"\"\n    minutePart.value = (mm ?? \"\").slice(0, 2)\n  } else {\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n  }\n})\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  if (!datePart.value) {\n    return undefined\n  }\n  try {\n    return parseDate(datePart.value)\n  } catch {\n    return undefined\n  }\n})\n\nfunction emitCombined(): void {\n  if (!datePart.value) {\n    model.value = null\n    return\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    model.value = datePart.value\n    return\n  }\n  const hh = padTwo(hourPart.value || \"0\")\n  const mm = padTwo(minutePart.value || \"0\")\n  model.value = `${datePart.value}T${hh}:${mm}:00`\n}\n\nfunction padTwo(value: string): string {\n  const n = Math.max(0, parseInt(value, 10) || 0)\n  return n.toString().padStart(2, \"0\")\n}\n\nfunction onDateSelected(value: DateValue | undefined): void {\n  if (!value) {\n    datePart.value = \"\"\n    emitCombined()\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  datePart.value = calendar.toString()\n  emitCombined()\n  open.value = false\n}\n\nfunction onHourInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(23, Math.max(0, parseInt(next, 10) || 0))\n  hourPart.value = numeric.toString()\n  emitCombined()\n}\n\nfunction onMinuteInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(59, Math.max(0, parseInt(next, 10) || 0))\n  minutePart.value = numeric.toString()\n  emitCombined()\n}\n\nconst displayValue = computed<string>(() => {\n  if (!datePart.value) {\n    return \"\"\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    return datePart.value\n  }\n  return `${datePart.value} ${padTwo(hourPart.value || \"0\")}:${padTwo(minutePart.value || \"0\")}`\n})\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          :disabled=\"disabled\"\n          :class=\"\n            cn(\n              'w-full justify-start text-left font-normal',\n              !displayValue && 'text-muted-foreground',\n            )\n          \"\n          :data-element-name=\"name ?? undefined\"\n          :data-readonly=\"readonly || undefined\"\n        >\n          <CalendarIcon class=\"mr-2 size-4\" />\n          <span>{{ displayValue || placeholder || \"Pick a date & time\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :placeholder=\"calendarValue\"\n          @update:model-value=\"onDateSelected\"\n        />\n        <div class=\"flex items-center gap-2 border-t p-3\">\n          <Clock class=\"size-4 text-muted-foreground\" />\n          <Input\n            type=\"number\"\n            min=\"0\"\n            max=\"23\"\n            :model-value=\"hourPart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"HH\"\n            data-testid=\"datetime-hour\"\n            @update:model-value=\"onHourInput\"\n          />\n          <span class=\"text-muted-foreground\">:</span>\n          <Input\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            :model-value=\"minutePart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"MM\"\n            data-testid=\"datetime-minute\"\n            @update:model-value=\"onMinuteInput\"\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}