@alfakit/vue 0.0.0-stage → 0.1.0

package/dist/components/table/SummaryRow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,85 @@
+import { useFormatter as e } from "../../context.js";
+import { cn as t } from "../../lib/utils.js";
+import { colorClass as n, textColorClasses as r } from "../../lib/colors.js";
+import i from "../../lib/Icon.js";
+import a from "../ui/TableCell.js";
+import o from "../ui/TableRow.js";
+import { Fragment as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, renderList as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+//#region src/components/table/SummaryRow.vue?vue&type=script&setup=true&lang.ts
+var b = {
+	key: 0,
+	class: "text-muted-foreground text-xs font-medium"
+}, x = { class: "flex flex-col gap-0.5" }, S = {
+	key: 0,
+	class: "text-muted-foreground text-xs font-medium"
+}, C = {
+	key: 1,
+	"data-slot": "summary-icons",
+	class: "flex flex-wrap items-center gap-x-3 gap-y-1"
+}, w = {
+	key: 0,
+	class: "font-medium"
+}, T = { class: "font-medium tabular-nums" }, E = {
+	key: 2,
+	class: "font-medium tabular-nums"
+}, D = /*@__PURE__*/ p({
+	__name: "SummaryRow",
+	props: {
+		columns: {},
+		values: {},
+		label: {},
+		leading: {},
+		trailing: {}
+	},
+	setup(p) {
+		let D = p, O = e(), k = { number: (e) => O.value.number(e) }, A = {
+			start: "text-start",
+			center: "text-center",
+			end: "text-end",
+			between: "text-start",
+			justify: "text-justify"
+		};
+		return (e, p) => (h(), c(o, {
+			"data-slot": "table-summary",
+			class: "bg-muted/30 hover:bg-muted/30"
+		}, {
+			default: y(() => [
+				D.leading > 0 ? (h(), c(a, {
+					key: 0,
+					colspan: D.leading
+				}, {
+					default: y(() => [D.label ? (h(), u("span", b, _(D.label), 1)) : l("", !0)]),
+					_: 1
+				}, 8, ["colspan"])) : l("", !0),
+				(h(!0), u(s, null, g(D.columns, (e, o) => (h(), c(a, {
+					key: e.name,
+					class: m(v(t)("align-top", A[e.alignment ?? "start"]))
+				}, {
+					default: y(() => [d("div", x, [D.leading === 0 && o === 0 && D.label ? (h(), u("span", S, _(D.label), 1)) : l("", !0), (h(!0), u(s, null, g(D.values[e.name] ?? [], (e, a) => (h(), u("div", {
+						key: a,
+						class: "flex flex-col"
+					}, [e.label ? (h(), u("span", {
+						key: 0,
+						class: m(v(t)("text-muted-foreground text-xs", e.hiddenLabel && "sr-only"))
+					}, _(e.label), 3)) : l("", !0), e.icons ? (h(), u("span", C, [e.icons.length === 0 ? (h(), u("span", w, "—")) : l("", !0), (h(!0), u(s, null, g(e.icons, (e, a) => (h(), u("span", {
+						key: a,
+						class: "inline-flex items-center gap-1"
+					}, [f(v(i), {
+						name: e.icon,
+						class: m(v(t)("size-4", v(n)(v(r), e.color ?? void 0, "gray")))
+					}, null, 8, ["name", "class"]), d("span", T, _(k.number(e.count)), 1)]))), 128))])) : (h(), u("span", E, _(e.value ?? "—"), 1))]))), 128))])]),
+					_: 2
+				}, 1032, ["class"]))), 128)),
+				D.trailing > 0 ? (h(), c(a, {
+					key: 1,
+					colspan: D.trailing
+				}, null, 8, ["colspan"])) : l("", !0)
+			]),
+			_: 1
+		}));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=SummaryRow.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/table/SummaryRow.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryRow.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","TableRow","_withCtx","TableCell","_createElementBlock","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_normalizeClass","_unref","_createElementVNode","_createVNode","Icon","Icon_default","TableCell_default","TableRow_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","SummaryRow_vue_vue_type_script_setup_true_lang_default","props","__props","formatter","useFormatter","format","value","ALIGN","openBlock","createBlock","withCtx","createElementBlock","toDisplayString","createCommentVNode","Fragment","renderList","column","normalizeClass","unref","cn","createElementVNode","index","position","summary","iconIndex","createVNode","item","colorClass","textColorClasses"],"sources":["../../../src/components/table/SummaryRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColumnSchema, ColumnSummariesSchema } from '@alfakit/core'\nimport { useFormatter } from '../../context'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport TableCell from '../ui/TableCell.vue'\nimport TableRow from '../ui/TableRow.vue'\n\n/** One row of column summaries (`data-slot=\"table-summary\"`). */\nconst props = defineProps<{\n  columns: ColumnSchema[]\n  values: ColumnSummariesSchema\n  /** Shown in the leading cells, or above the first column's values. */\n  label?: string\n  /** Cells before the columns (selection, reorder handle, leading actions). */\n  leading: number\n  /** Cells after the columns (trailing actions). */\n  trailing: number\n}>()\n\nconst formatter = useFormatter()\nconst format = { number: (value: number) => formatter.value.number(value) }\n\nconst ALIGN: Record<string, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n  between: 'text-start',\n  justify: 'text-justify',\n}\n</script>\n\n<template>\n  <TableRow data-slot=\"table-summary\" class=\"bg-muted/30 hover:bg-muted/30\">\n    <TableCell v-if=\"props.leading > 0\" :colspan=\"props.leading\">\n      <span v-if=\"props.label\" class=\"text-muted-foreground text-xs font-medium\">{{\n        props.label\n      }}</span>\n    </TableCell>\n    <TableCell\n      v-for=\"(column, index) in props.columns\"\n      :key=\"column.name\"\n      :class=\"cn('align-top', ALIGN[column.alignment ?? 'start'])\"\n    >\n      <div class=\"flex flex-col gap-0.5\">\n        <span\n          v-if=\"props.leading === 0 && index === 0 && props.label\"\n          class=\"text-muted-foreground text-xs font-medium\"\n          >{{ props.label }}</span\n        >\n        <div\n          v-for=\"(summary, position) in props.values[column.name] ?? []\"\n          :key=\"position\"\n          class=\"flex flex-col\"\n        >\n          <span\n            v-if=\"summary.label\"\n            :class=\"cn('text-muted-foreground text-xs', summary.hiddenLabel && 'sr-only')\"\n            >{{ summary.label }}</span\n          >\n          <!-- `Count::icons()`: each icon with how often it occurs. -->\n          <span\n            v-if=\"summary.icons\"\n            data-slot=\"summary-icons\"\n            class=\"flex flex-wrap items-center gap-x-3 gap-y-1\"\n          >\n            <span v-if=\"summary.icons.length === 0\" class=\"font-medium\">—</span>\n            <span\n              v-for=\"(item, iconIndex) in summary.icons\"\n              :key=\"iconIndex\"\n              class=\"inline-flex items-center gap-1\"\n            >\n              <Icon\n                :name=\"item.icon\"\n                :class=\"cn('size-4', colorClass(textColorClasses, item.color ?? undefined, 'gray'))\"\n              />\n              <span class=\"font-medium tabular-nums\">{{ format.number(item.count) }}</span>\n            </span>\n          </span>\n          <span v-else class=\"font-medium tabular-nums\">{{ summary.value ?? '—' }}</span>\n        </div>\n      </div>\n    </TableCell>\n    <TableCell v-if=\"props.trailing > 0\" :colspan=\"props.trailing\" />\n  </TableRow>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAM0B,IAAQC,GAWRC,IAAYC,EAAa,GACzBC,IAAS,EAAE,SAAS,MAAkBF,EAAU,MAAM,OAAOG,CAAK,EAAE,GAEpEC,IAAgC;GACpC,OAAO;GACP,QAAQ;GACR,KAAK;GACL,SAAS;GACT,SAAS;EACX;oBAIEhC,EAAA,GAAAC,EAmDWC,GAAA;GAnDD,aAAU;GAAgB,OAAM;;GACxC,SAAAC,QAIY;IAJKuB,EAAM,UAAO,KAA9B1B,EAAA,GAAAC,EAIYG,GAAA;;KAJyB,SAASsB,EAAM;;KAClD,SAAAvB,QAES,CAFGuB,EAAM,SAAlB1B,EAAA,GAAAK,EAES,QAFTa,GAESZ,EADPoB,EAAM,KAAK,GAAA,CAAA,KAAAY,EAAA,IAAA,EAAA,CAAA,CAAA;;;KAGftC,EAAA,EAAA,GAAAK,EA2CYG,GAAA,MAAAC,EA1CgBiB,EAAM,UAAxB,GAAQ,OADlB1B,EAAA,GAAAC,EA2CYG,GAAA;KAzCT,KAAKqC,EAAO;KACZ,OAAK/B,EAAEC,EAAAiC,CAAA,CAAE,CAAA,aAAcZ,EAAMS,EAAO,aAAS,QAAA,CAAA;;KAE9C,SAAAtC,QAqCM,CArCNS,EAqCM,OArCNO,GAqCM,CAnCIO,EAAM,YAAO,KAAUoB,MAAK,KAAUpB,EAAM,SADpD1B,EAAA,GAAAK,EAIC,QAJDe,GAICd,EADKoB,EAAM,KAAK,GAAA,CAAA,KAAAY,EAAA,IAAA,EAAA,IAEjBtC,EAAA,EAAA,GAAAK,EA8BMG,GAAA,MAAAC,EA7B0BiB,EAAM,OAAOe,EAAO,SAAI,CAAA,IAA9C,GAAS,OADnBzC,EAAA,GAAAK,EA8BM,OAAA;MA5BH,KAAK0C;MACN,OAAM;KAGE,GAAA,CAAAC,EAAQ,SADhBhD,EAAA,GAAAK,EAIC,QAAA;;MAFE,OAAKK,EAAEC,EAAAiC,CAAA,CAAE,CAAA,iCAAkCI,EAAQ,eAAW,SAAA,CAAA;KAC3D,GAAA1C,EAAA0C,EAAQ,KAAK,GAAA,CAAA,KAAAV,EAAA,IAAA,EAAA,GAIXU,EAAQ,SADhBhD,EAAA,GAAAK,EAiBO,QAjBPgB,GAiBO,CAZO2B,EAAQ,MAAM,WAAM,KAAhChD,EAAA,GAAAK,EAAoE,QAApEiB,GAA4D,GAAC,KAAAgB,EAAA,IAAA,EAAA,IAC7DtC,EAAA,EAAA,GAAAK,EAUOG,GAAA,MAAAC,EATuBuC,EAAQ,QAA5B,GAAM,OADhBhD,EAAA,GAAAK,EAUO,QAAA;MARJ,KAAK4C;MACN,OAAM;KAENpC,GAAAA,CAAAA,EAGEF,EAAAG,CAAA,GAAA;MAFC,MAAMqC,EAAK;MACX,OAAKzC,EAAEC,EAAAiC,CAAA,CAAE,CAAA,UAAWjC,EAAAyC,CAAA,CAAU,CAACzC,EAAA0C,CAAA,GAAkBF,EAAK,SAAS,KAAA,GAAS,MAAA,CAAA,CAAA;KAE3EvC,GAAAA,MAAAA,GAAAA,CAAAA,QAAAA,OAAAA,CAAAA,GAAAA,EAA6E,QAA7EW,GAA6EjB,EAAnCwB,EAAO,OAAOqB,EAAK,KAAK,CAAA,GAAA,CAAA,CAAA,CAAA,EAGtEnD,GAAAA,GAAAA,EAAAA,CAAAA,MAAAA,EAAA,GAAAK,EAA+E,QAA/EmB,GAA+ElB,EAA9B0C,EAAQ,SAAK,GAAA,GAAA,CAAA,EAAA,CAAA;;;IAInDtB,EAAM,WAAQ,KAA/B1B,EAAA,GAAAC,EAAiEG,GAAA;;KAA3B,SAASsB,EAAM"}

package/dist/components/table/TableCellContent.js

@@ -0,0 +1,7 @@
+import e from "./TableCellContent.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/table/TableCellContent.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TableCellContent.js.map

package/dist/components/table/TableCellContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellContent.js","names":["_sfc_main","TableCellContent_vue_vue_type_script_setup_true_lang_default","TableCellContent_default"],"sources":["../../../src/components/table/TableCellContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColorColumnSchema, IconColumnSchema } from '@alfakit/core'\nimport {\n  columnRegistryKey,\n  remainingTextSizeClass,\n  stackedImageStyle,\n  usesDefaultImageStack,\n} from '@alfakit/core'\nimport { CheckIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { useRegistry, useT } from '../../context'\nimport { colorClass, iconSizeClasses, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport FormattedText from '../entries/FormattedText.vue'\nimport BooleanCell from './BooleanCell.vue'\nimport type { CellProps } from './cell-update'\nimport SelectCell from './SelectCell.vue'\nimport SelectComboboxCell from './SelectComboboxCell.vue'\nimport TextInputCell from './TextInputCell.vue'\n\nconst props = defineProps<CellProps>()\nconst registry = useRegistry()\n// A component registered as `column:<type>` replaces the built-in cell renderer.\nconst custom = computed(() => registry.resolve(columnRegistryKey(props.column)))\nconst t = useT()\n// `ViewColumn`: the application component registered under the column's `view()` name.\nconst viewName = computed(() => (props.column as { component?: string }).component ?? '')\nconst view = computed(() =>\n  props.column.type === 'ViewColumn' && viewName.value\n    ? registry.resolve(viewName.value)\n    : undefined,\n)\n\nconst imageSchema = computed(\n  () =>\n    props.column as {\n      circular?: boolean\n      square?: boolean\n      size?: number | string\n      height?: number | string\n      width?: string\n      stacked?: boolean\n      limit?: number\n      limitedRemainingText?: boolean\n      limitedRemainingTextSize?: string\n      wrap?: boolean\n      ring?: number\n      overlap?: number\n    },\n)\nconst defaultImageStack = computed(() => usesDefaultImageStack(imageSchema.value))\nconst imageUrls = computed(() =>\n  Array.isArray(props.cell.state) ? (props.cell.state as string[]) : [],\n)\nconst imageLimit = computed(() => imageSchema.value.limit ?? imageUrls.value.length)\nconst toCss = (value: number | string | undefined) =>\n  typeof value === 'number' ? `${value}px` : value\nconst imageStyle = computed(() => {\n  const size = imageSchema.value.size ?? 40\n\n  return {\n    height: toCss(imageSchema.value.height ?? size),\n    width: toCss(\n      imageSchema.value.width ??\n        (imageSchema.value.square || imageSchema.value.circular ? size : undefined),\n    ),\n  }\n})\nconst colors = computed(() =>\n  Array.isArray(props.cell.state)\n    ? (props.cell.state as string[])\n    : props.cell.state\n      ? [String(props.cell.state)]\n      : [],\n)\nconst colorSchema = computed(() => props.column as ColorColumnSchema)\nconst copiedColor = ref<string | null>(null)\nconst copyColor = (color: string) => {\n  void navigator.clipboard?.writeText(color).then(() => {\n    copiedColor.value = color\n    setTimeout(() => {\n      copiedColor.value = null\n    }, colorSchema.value.copyMessageDuration ?? 1500)\n  })\n}\nconst textSchema = computed(() => ({\n  ...(props.column as object),\n  color: props.cell.color,\n  icon: props.cell.icon,\n  iconPosition: props.cell.iconPosition,\n  iconColor: props.cell.iconColor,\n  itemColors: props.cell.itemColors,\n  itemIcons: props.cell.itemIcons,\n  itemUrls: props.cell.itemUrls,\n}))\n// `SelectColumn::native(false)` renders a combobox.\nconst isComboboxSelect = computed(\n  () =>\n    props.column.type === 'SelectColumn' && (props.column as { native?: boolean }).native === false,\n)\nconst descriptionPosition = computed(\n  () =>\n    (props.column as { descriptionPosition?: 'above' | 'below' }).descriptionPosition ?? 'below',\n)\n</script>\n\n<template>\n  <component :is=\"custom\" v-if=\"custom\" v-bind=\"props\" />\n  <component\n    :is=\"view\"\n    v-else-if=\"view\"\n    v-bind=\"{ ...(props.cell.props ?? {}), state: props.cell.state, ...props }\"\n  />\n  <span v-else-if=\"props.column.type === 'ViewColumn'\" class=\"text-destructive text-xs\">{{\n    t(\n      'component_not_registered',\n      { component: viewName },\n      `Component ${viewName} is not registered.`,\n    )\n  }}</span>\n  <template v-else-if=\"props.column.type === 'IconColumn'\">\n    <!-- A list state: one icon per item (`wrap()` lets them wrap). -->\n    <div\n      v-if=\"props.cell.icons\"\n      data-slot=\"icon-column-icons\"\n      :class=\"\n        cn(\n          'flex items-center gap-1.5',\n          (props.column as IconColumnSchema).wrap ? 'flex-wrap' : 'flex-nowrap',\n        )\n      \"\n    >\n      <span v-if=\"props.cell.icons.length === 0\" class=\"text-muted-foreground\">—</span>\n      <Icon\n        v-for=\"(item, index) in props.cell.icons\"\n        :key=\"index\"\n        :name=\"item.icon\"\n        :class=\"\n          cn(\n            colorClass(iconSizeClasses, props.cell.size, 'md'),\n            item.color && textColorClasses[item.color],\n          )\n        \"\n      />\n    </div>\n    <Icon\n      v-else-if=\"props.cell.icon\"\n      :name=\"props.cell.icon\"\n      :class=\"\n        cn(\n          colorClass(iconSizeClasses, props.cell.size, 'md'),\n          props.cell.color && textColorClasses[props.cell.color],\n        )\n      \"\n    />\n    <span v-else class=\"text-muted-foreground\">—</span>\n  </template>\n  <template v-else-if=\"props.column.type === 'ImageColumn'\">\n    <span v-if=\"imageUrls.length === 0\" class=\"text-muted-foreground\">—</span>\n    <div\n      v-else\n      :class=\"\n        cn(\n          'flex items-center',\n          imageSchema.wrap && 'flex-wrap',\n          imageSchema.stacked ? defaultImageStack && '-space-x-2' : 'gap-1.5',\n          imageSchema.wrap && imageSchema.stacked && 'gap-y-1.5',\n        )\n      \"\n    >\n      <img\n        v-for=\"(url, index) in imageUrls.slice(0, imageLimit)\"\n        :key=\"index\"\n        :src=\"url\"\n        :alt=\"props.cell.alt ?? ''\"\n        :style=\"[imageStyle, stackedImageStyle(index, imageSchema)]\"\n        :class=\"\n          cn(\n            'object-cover',\n            imageSchema.circular ? 'rounded-full' : 'rounded-md',\n            imageSchema.stacked && defaultImageStack && 'ring-background ring-2',\n          )\n        \"\n        v-bind=\"props.cell.extraImgAttributes\"\n      />\n      <span\n        v-if=\"imageSchema.limitedRemainingText && imageUrls.length > imageLimit\"\n        data-slot=\"image-remaining\"\n        :class=\"\n          cn(\n            'text-muted-foreground ms-1',\n            remainingTextSizeClass(imageSchema.limitedRemainingTextSize),\n          )\n        \"\n        >+{{ imageUrls.length - imageLimit }}</span\n      >\n    </div>\n  </template>\n  <template v-else-if=\"props.column.type === 'ColorColumn'\">\n    <span v-if=\"colors.length === 0\" class=\"text-muted-foreground\">—</span>\n    <div\n      v-else\n      :class=\"cn('flex items-center gap-1.5', colorSchema.wrap ? 'flex-wrap' : 'flex-nowrap')\"\n    >\n      <template v-for=\"color in colors\" :key=\"color\">\n        <!-- The cell may sit inside a link or a clickable row. -->\n        <button\n          v-if=\"colorSchema.copyable\"\n          type=\"button\"\n          data-slot=\"color-copy\"\n          :title=\"color\"\n          :aria-label=\"`${t('copy', {}, 'Copy')} ${color}`\"\n          class=\"focus-visible:ring-ring/50 inline-flex rounded outline-none focus-visible:ring-[3px]\"\n          @click.prevent.stop=\"copyColor(color)\"\n        >\n          <span\n            class=\"inline-flex size-5 items-center justify-center rounded border shadow-xs\"\n            :style=\"{ backgroundColor: color }\"\n          >\n            <CheckIcon\n              v-if=\"copiedColor === color\"\n              class=\"size-3 text-white mix-blend-difference\"\n            />\n          </span>\n        </button>\n        <span\n          v-else\n          :title=\"color\"\n          class=\"size-5 rounded border shadow-xs\"\n          :style=\"{ backgroundColor: color }\"\n        />\n      </template>\n      <span\n        v-if=\"colorSchema.copyable && copiedColor\"\n        role=\"status\"\n        :class=\"cn('text-xs', !colorSchema.copyMessage && 'sr-only')\"\n        >{{ colorSchema.copyMessage ?? t('copied', {}, 'Copied') }}</span\n      >\n    </div>\n  </template>\n  <BooleanCell\n    v-else-if=\"props.column.type === 'ToggleColumn' || props.column.type === 'CheckboxColumn'\"\n    v-bind=\"props\"\n  />\n  <SelectComboboxCell v-else-if=\"isComboboxSelect\" v-bind=\"props\" />\n  <SelectCell v-else-if=\"props.column.type === 'SelectColumn'\" v-bind=\"props\" />\n  <TextInputCell v-else-if=\"props.column.type === 'TextInputColumn'\" v-bind=\"props\" />\n  <div v-else class=\"flex flex-col gap-0.5\">\n    <span\n      v-if=\"props.cell.description && descriptionPosition === 'above'\"\n      class=\"text-muted-foreground block text-xs\"\n      >{{ props.cell.description }}</span\n    >\n    <FormattedText :value=\"props.cell.state\" :schema=\"textSchema\" />\n    <span\n      v-if=\"props.cell.description && descriptionPosition === 'below'\"\n      class=\"text-muted-foreground block text-xs\"\n      >{{ props.cell.description }}</span\n    >\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/table/TableCellContent.vue.d.ts

@@ -0,0 +1,4 @@
+import type { CellProps } from './cell-update';
+declare const _default: import("vue").DefineComponent<CellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CellProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=TableCellContent.vue.d.ts.map

package/dist/components/table/TableCellContent.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellContent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableCellContent.vue"],"names":[],"mappings":"AAuRA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;;AAyd9C,wBAMG"}

package/dist/components/table/TableCellContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,142 @@
+import { useRegistry as e, useT as t } from "../../context.js";
+import { cn as n } from "../../lib/utils.js";
+import { colorClass as r, iconSizeClasses as i, textColorClasses as a } from "../../lib/colors.js";
+import o from "../../lib/Icon.js";
+import s from "../entries/FormattedText.js";
+import ee from "./BooleanCell.js";
+import c from "./SelectCell.js";
+import l from "./SelectComboboxCell.js";
+import u from "./TextInputCell.js";
+import { columnRegistryKey as d, remainingTextSizeClass as f, stackedImageStyle as p, usesDefaultImageStack as m } from "@alfakit/core";
+import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as te, createVNode as ne, defineComponent as b, mergeProps as x, normalizeClass as S, normalizeProps as C, normalizeStyle as w, openBlock as T, ref as E, renderList as D, resolveDynamicComponent as O, toDisplayString as k, unref as A, withModifiers as re } from "vue";
+import { CheckIcon as ie } from "@lucide/vue";
+//#region src/components/table/TableCellContent.vue?vue&type=script&setup=true&lang.ts
+var ae = {
+	key: 2,
+	class: "text-destructive text-xs"
+}, oe = {
+	key: 0,
+	class: "text-muted-foreground"
+}, se = {
+	key: 2,
+	class: "text-muted-foreground"
+}, j = {
+	key: 0,
+	class: "text-muted-foreground"
+}, M = ["src", "alt"], N = {
+	key: 0,
+	class: "text-muted-foreground"
+}, P = [
+	"title",
+	"aria-label",
+	"onClick"
+], F = ["title"], I = {
+	key: 10,
+	class: "flex flex-col gap-0.5"
+}, L = {
+	key: 0,
+	class: "text-muted-foreground block text-xs"
+}, R = {
+	key: 1,
+	class: "text-muted-foreground block text-xs"
+}, z = /*@__PURE__*/ b({
+	__name: "TableCellContent",
+	props: {
+		column: {},
+		cell: {},
+		recordKey: {},
+		token: {},
+		component: {}
+	},
+	setup(b) {
+		let z = b, B = e(), V = g(() => B.resolve(d(z.column))), H = t(), U = g(() => z.column.component ?? ""), W = g(() => z.column.type === "ViewColumn" && U.value ? B.resolve(U.value) : void 0), G = g(() => z.column), K = g(() => m(G.value)), q = g(() => Array.isArray(z.cell.state) ? z.cell.state : []), J = g(() => G.value.limit ?? q.value.length), Y = (e) => typeof e == "number" ? `${e}px` : e, ce = g(() => {
+			let e = G.value.size ?? 40;
+			return {
+				height: Y(G.value.height ?? e),
+				width: Y(G.value.width ?? (G.value.square || G.value.circular ? e : void 0))
+			};
+		}), X = g(() => Array.isArray(z.cell.state) ? z.cell.state : z.cell.state ? [String(z.cell.state)] : []), Z = g(() => z.column), Q = E(null), le = (e) => {
+			navigator.clipboard?.writeText(e).then(() => {
+				Q.value = e, setTimeout(() => {
+					Q.value = null;
+				}, Z.value.copyMessageDuration ?? 1500);
+			});
+		}, ue = g(() => ({
+			...z.column,
+			color: z.cell.color,
+			icon: z.cell.icon,
+			iconPosition: z.cell.iconPosition,
+			iconColor: z.cell.iconColor,
+			itemColors: z.cell.itemColors,
+			itemIcons: z.cell.itemIcons,
+			itemUrls: z.cell.itemUrls
+		})), de = g(() => z.column.type === "SelectColumn" && z.column.native === !1), $ = g(() => z.column.descriptionPosition ?? "below");
+		return (e, t) => V.value ? (T(), _(O(V.value), C(x({ key: 0 }, z)), null, 16)) : W.value ? (T(), _(O(W.value), C(x({ key: 1 }, {
+			...z.cell.props ?? {},
+			state: z.cell.state,
+			...z
+		})), null, 16)) : z.column.type === "ViewColumn" ? (T(), y("span", ae, k(A(H)("component_not_registered", { component: U.value }, `Component ${U.value} is not registered.`)), 1)) : z.column.type === "IconColumn" ? (T(), y(h, { key: 3 }, [z.cell.icons ? (T(), y("div", {
+			key: 0,
+			"data-slot": "icon-column-icons",
+			class: S(A(n)("flex items-center gap-1.5", z.column.wrap ? "flex-wrap" : "flex-nowrap"))
+		}, [z.cell.icons.length === 0 ? (T(), y("span", oe, "—")) : v("", !0), (T(!0), y(h, null, D(z.cell.icons, (e, t) => (T(), _(A(o), {
+			key: t,
+			name: e.icon,
+			class: S(A(n)(A(r)(A(i), z.cell.size, "md"), e.color && A(a)[e.color]))
+		}, null, 8, ["name", "class"]))), 128))], 2)) : z.cell.icon ? (T(), _(A(o), {
+			key: 1,
+			name: z.cell.icon,
+			class: S(A(n)(A(r)(A(i), z.cell.size, "md"), z.cell.color && A(a)[z.cell.color]))
+		}, null, 8, ["name", "class"])) : (T(), y("span", se, "—"))], 64)) : z.column.type === "ImageColumn" ? (T(), y(h, { key: 4 }, [q.value.length === 0 ? (T(), y("span", j, "—")) : (T(), y("div", {
+			key: 1,
+			class: S(A(n)("flex items-center", G.value.wrap && "flex-wrap", G.value.stacked ? K.value && "-space-x-2" : "gap-1.5", G.value.wrap && G.value.stacked && "gap-y-1.5"))
+		}, [(T(!0), y(h, null, D(q.value.slice(0, J.value), (e, t) => (T(), y("img", x({
+			key: t,
+			src: e,
+			alt: z.cell.alt ?? "",
+			style: [ce.value, A(p)(t, G.value)],
+			class: A(n)("object-cover", G.value.circular ? "rounded-full" : "rounded-md", G.value.stacked && K.value && "ring-background ring-2")
+		}, { ref_for: !0 }, z.cell.extraImgAttributes), null, 16, M))), 128)), G.value.limitedRemainingText && q.value.length > J.value ? (T(), y("span", {
+			key: 0,
+			"data-slot": "image-remaining",
+			class: S(A(n)("text-muted-foreground ms-1", A(f)(G.value.limitedRemainingTextSize)))
+		}, "+" + k(q.value.length - J.value), 3)) : v("", !0)], 2))], 64)) : z.column.type === "ColorColumn" ? (T(), y(h, { key: 5 }, [X.value.length === 0 ? (T(), y("span", N, "—")) : (T(), y("div", {
+			key: 1,
+			class: S(A(n)("flex items-center gap-1.5", Z.value.wrap ? "flex-wrap" : "flex-nowrap"))
+		}, [(T(!0), y(h, null, D(X.value, (e) => (T(), y(h, { key: e }, [Z.value.copyable ? (T(), y("button", {
+			key: 0,
+			type: "button",
+			"data-slot": "color-copy",
+			title: e,
+			"aria-label": `${A(H)("copy", {}, "Copy")} ${e}`,
+			class: "focus-visible:ring-ring/50 inline-flex rounded outline-none focus-visible:ring-[3px]",
+			onClick: re((t) => le(e), ["prevent", "stop"])
+		}, [te("span", {
+			class: "inline-flex size-5 items-center justify-center rounded border shadow-xs",
+			style: w({ backgroundColor: e })
+		}, [Q.value === e ? (T(), _(A(ie), {
+			key: 0,
+			class: "size-3 text-white mix-blend-difference"
+		})) : v("", !0)], 4)], 8, P)) : (T(), y("span", {
+			key: 1,
+			title: e,
+			class: "size-5 rounded border shadow-xs",
+			style: w({ backgroundColor: e })
+		}, null, 12, F))], 64))), 128)), Z.value.copyable && Q.value ? (T(), y("span", {
+			key: 0,
+			role: "status",
+			class: S(A(n)("text-xs", !Z.value.copyMessage && "sr-only"))
+		}, k(Z.value.copyMessage ?? A(H)("copied", {}, "Copied")), 3)) : v("", !0)], 2))], 64)) : z.column.type === "ToggleColumn" || z.column.type === "CheckboxColumn" ? (T(), _(ee, C(x({ key: 6 }, z)), null, 16)) : de.value ? (T(), _(l, C(x({ key: 7 }, z)), null, 16)) : z.column.type === "SelectColumn" ? (T(), _(c, C(x({ key: 8 }, z)), null, 16)) : z.column.type === "TextInputColumn" ? (T(), _(u, C(x({ key: 9 }, z)), null, 16)) : (T(), y("div", I, [
+			z.cell.description && $.value === "above" ? (T(), y("span", L, k(z.cell.description), 1)) : v("", !0),
+			ne(s, {
+				value: z.cell.state,
+				schema: ue.value
+			}, null, 8, ["value", "schema"]),
+			z.cell.description && $.value === "below" ? (T(), y("span", R, k(z.cell.description), 1)) : v("", !0)
+		]));
+	}
+});
+//#endregion
+export { z as default };
+
+//# sourceMappingURL=TableCellContent.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/table/TableCellContent.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellContent.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_mergeProps","_createElementBlock","_toDisplayString","_unref","_Fragment","_normalizeClass","_createCommentVNode","_renderList","Icon","_withModifiers","_createElementVNode","_normalizeStyle","BooleanCell","SelectComboboxCell","SelectCell","TextInputCell","_createVNode","FormattedText","Icon_default","FormattedText_default","BooleanCell_default","SelectCell_default","SelectComboboxCell_default","TextInputCell_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","TableCellContent_vue_vue_type_script_setup_true_lang_default","props","__props","registry","useRegistry","custom","computed","columnRegistryKey","t","useT","viewName","view","imageSchema","defaultImageStack","usesDefaultImageStack","imageUrls","imageLimit","toCss","value","imageStyle","size","colors","colorSchema","copiedColor","ref","copyColor","color","textSchema","isComboboxSelect","descriptionPosition","openBlock","createBlock","resolveDynamicComponent","normalizeProps","mergeProps","createElementBlock","toDisplayString","unref","Fragment","normalizeClass","cn","createCommentVNode","renderList","index","item","colorClass","iconSizeClasses","textColorClasses","url","stackedImageStyle","remainingTextSizeClass","withModifiers","createElementVNode","normalizeStyle","CheckIcon","createVNode"],"sources":["../../../src/components/table/TableCellContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ColorColumnSchema, IconColumnSchema } from '@alfakit/core'\nimport {\n  columnRegistryKey,\n  remainingTextSizeClass,\n  stackedImageStyle,\n  usesDefaultImageStack,\n} from '@alfakit/core'\nimport { CheckIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { useRegistry, useT } from '../../context'\nimport { colorClass, iconSizeClasses, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport FormattedText from '../entries/FormattedText.vue'\nimport BooleanCell from './BooleanCell.vue'\nimport type { CellProps } from './cell-update'\nimport SelectCell from './SelectCell.vue'\nimport SelectComboboxCell from './SelectComboboxCell.vue'\nimport TextInputCell from './TextInputCell.vue'\n\nconst props = defineProps<CellProps>()\nconst registry = useRegistry()\n// A component registered as `column:<type>` replaces the built-in cell renderer.\nconst custom = computed(() => registry.resolve(columnRegistryKey(props.column)))\nconst t = useT()\n// `ViewColumn`: the application component registered under the column's `view()` name.\nconst viewName = computed(() => (props.column as { component?: string }).component ?? '')\nconst view = computed(() =>\n  props.column.type === 'ViewColumn' && viewName.value\n    ? registry.resolve(viewName.value)\n    : undefined,\n)\n\nconst imageSchema = computed(\n  () =>\n    props.column as {\n      circular?: boolean\n      square?: boolean\n      size?: number | string\n      height?: number | string\n      width?: string\n      stacked?: boolean\n      limit?: number\n      limitedRemainingText?: boolean\n      limitedRemainingTextSize?: string\n      wrap?: boolean\n      ring?: number\n      overlap?: number\n    },\n)\nconst defaultImageStack = computed(() => usesDefaultImageStack(imageSchema.value))\nconst imageUrls = computed(() =>\n  Array.isArray(props.cell.state) ? (props.cell.state as string[]) : [],\n)\nconst imageLimit = computed(() => imageSchema.value.limit ?? imageUrls.value.length)\nconst toCss = (value: number | string | undefined) =>\n  typeof value === 'number' ? `${value}px` : value\nconst imageStyle = computed(() => {\n  const size = imageSchema.value.size ?? 40\n\n  return {\n    height: toCss(imageSchema.value.height ?? size),\n    width: toCss(\n      imageSchema.value.width ??\n        (imageSchema.value.square || imageSchema.value.circular ? size : undefined),\n    ),\n  }\n})\nconst colors = computed(() =>\n  Array.isArray(props.cell.state)\n    ? (props.cell.state as string[])\n    : props.cell.state\n      ? [String(props.cell.state)]\n      : [],\n)\nconst colorSchema = computed(() => props.column as ColorColumnSchema)\nconst copiedColor = ref<string | null>(null)\nconst copyColor = (color: string) => {\n  void navigator.clipboard?.writeText(color).then(() => {\n    copiedColor.value = color\n    setTimeout(() => {\n      copiedColor.value = null\n    }, colorSchema.value.copyMessageDuration ?? 1500)\n  })\n}\nconst textSchema = computed(() => ({\n  ...(props.column as object),\n  color: props.cell.color,\n  icon: props.cell.icon,\n  iconPosition: props.cell.iconPosition,\n  iconColor: props.cell.iconColor,\n  itemColors: props.cell.itemColors,\n  itemIcons: props.cell.itemIcons,\n  itemUrls: props.cell.itemUrls,\n}))\n// `SelectColumn::native(false)` renders a combobox.\nconst isComboboxSelect = computed(\n  () =>\n    props.column.type === 'SelectColumn' && (props.column as { native?: boolean }).native === false,\n)\nconst descriptionPosition = computed(\n  () =>\n    (props.column as { descriptionPosition?: 'above' | 'below' }).descriptionPosition ?? 'below',\n)\n</script>\n\n<template>\n  <component :is=\"custom\" v-if=\"custom\" v-bind=\"props\" />\n  <component\n    :is=\"view\"\n    v-else-if=\"view\"\n    v-bind=\"{ ...(props.cell.props ?? {}), state: props.cell.state, ...props }\"\n  />\n  <span v-else-if=\"props.column.type === 'ViewColumn'\" class=\"text-destructive text-xs\">{{\n    t(\n      'component_not_registered',\n      { component: viewName },\n      `Component ${viewName} is not registered.`,\n    )\n  }}</span>\n  <template v-else-if=\"props.column.type === 'IconColumn'\">\n    <!-- A list state: one icon per item (`wrap()` lets them wrap). -->\n    <div\n      v-if=\"props.cell.icons\"\n      data-slot=\"icon-column-icons\"\n      :class=\"\n        cn(\n          'flex items-center gap-1.5',\n          (props.column as IconColumnSchema).wrap ? 'flex-wrap' : 'flex-nowrap',\n        )\n      \"\n    >\n      <span v-if=\"props.cell.icons.length === 0\" class=\"text-muted-foreground\">—</span>\n      <Icon\n        v-for=\"(item, index) in props.cell.icons\"\n        :key=\"index\"\n        :name=\"item.icon\"\n        :class=\"\n          cn(\n            colorClass(iconSizeClasses, props.cell.size, 'md'),\n            item.color && textColorClasses[item.color],\n          )\n        \"\n      />\n    </div>\n    <Icon\n      v-else-if=\"props.cell.icon\"\n      :name=\"props.cell.icon\"\n      :class=\"\n        cn(\n          colorClass(iconSizeClasses, props.cell.size, 'md'),\n          props.cell.color && textColorClasses[props.cell.color],\n        )\n      \"\n    />\n    <span v-else class=\"text-muted-foreground\">—</span>\n  </template>\n  <template v-else-if=\"props.column.type === 'ImageColumn'\">\n    <span v-if=\"imageUrls.length === 0\" class=\"text-muted-foreground\">—</span>\n    <div\n      v-else\n      :class=\"\n        cn(\n          'flex items-center',\n          imageSchema.wrap && 'flex-wrap',\n          imageSchema.stacked ? defaultImageStack && '-space-x-2' : 'gap-1.5',\n          imageSchema.wrap && imageSchema.stacked && 'gap-y-1.5',\n        )\n      \"\n    >\n      <img\n        v-for=\"(url, index) in imageUrls.slice(0, imageLimit)\"\n        :key=\"index\"\n        :src=\"url\"\n        :alt=\"props.cell.alt ?? ''\"\n        :style=\"[imageStyle, stackedImageStyle(index, imageSchema)]\"\n        :class=\"\n          cn(\n            'object-cover',\n            imageSchema.circular ? 'rounded-full' : 'rounded-md',\n            imageSchema.stacked && defaultImageStack && 'ring-background ring-2',\n          )\n        \"\n        v-bind=\"props.cell.extraImgAttributes\"\n      />\n      <span\n        v-if=\"imageSchema.limitedRemainingText && imageUrls.length > imageLimit\"\n        data-slot=\"image-remaining\"\n        :class=\"\n          cn(\n            'text-muted-foreground ms-1',\n            remainingTextSizeClass(imageSchema.limitedRemainingTextSize),\n          )\n        \"\n        >+{{ imageUrls.length - imageLimit }}</span\n      >\n    </div>\n  </template>\n  <template v-else-if=\"props.column.type === 'ColorColumn'\">\n    <span v-if=\"colors.length === 0\" class=\"text-muted-foreground\">—</span>\n    <div\n      v-else\n      :class=\"cn('flex items-center gap-1.5', colorSchema.wrap ? 'flex-wrap' : 'flex-nowrap')\"\n    >\n      <template v-for=\"color in colors\" :key=\"color\">\n        <!-- The cell may sit inside a link or a clickable row. -->\n        <button\n          v-if=\"colorSchema.copyable\"\n          type=\"button\"\n          data-slot=\"color-copy\"\n          :title=\"color\"\n          :aria-label=\"`${t('copy', {}, 'Copy')} ${color}`\"\n          class=\"focus-visible:ring-ring/50 inline-flex rounded outline-none focus-visible:ring-[3px]\"\n          @click.prevent.stop=\"copyColor(color)\"\n        >\n          <span\n            class=\"inline-flex size-5 items-center justify-center rounded border shadow-xs\"\n            :style=\"{ backgroundColor: color }\"\n          >\n            <CheckIcon\n              v-if=\"copiedColor === color\"\n              class=\"size-3 text-white mix-blend-difference\"\n            />\n          </span>\n        </button>\n        <span\n          v-else\n          :title=\"color\"\n          class=\"size-5 rounded border shadow-xs\"\n          :style=\"{ backgroundColor: color }\"\n        />\n      </template>\n      <span\n        v-if=\"colorSchema.copyable && copiedColor\"\n        role=\"status\"\n        :class=\"cn('text-xs', !colorSchema.copyMessage && 'sr-only')\"\n        >{{ colorSchema.copyMessage ?? t('copied', {}, 'Copied') }}</span\n      >\n    </div>\n  </template>\n  <BooleanCell\n    v-else-if=\"props.column.type === 'ToggleColumn' || props.column.type === 'CheckboxColumn'\"\n    v-bind=\"props\"\n  />\n  <SelectComboboxCell v-else-if=\"isComboboxSelect\" v-bind=\"props\" />\n  <SelectCell v-else-if=\"props.column.type === 'SelectColumn'\" v-bind=\"props\" />\n  <TextInputCell v-else-if=\"props.column.type === 'TextInputColumn'\" v-bind=\"props\" />\n  <div v-else class=\"flex flex-col gap-0.5\">\n    <span\n      v-if=\"props.cell.description && descriptionPosition === 'above'\"\n      class=\"text-muted-foreground block text-xs\"\n      >{{ props.cell.description }}</span\n    >\n    <FormattedText :value=\"props.cell.state\" :schema=\"textSchema\" />\n    <span\n      v-if=\"props.cell.description && descriptionPosition === 'below'\"\n      class=\"text-muted-foreground block text-xs\"\n      >{{ props.cell.description }}</span\n    >\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/table/TableFilters.js

@@ -0,0 +1,7 @@
+import e from "./TableFilters.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/table/TableFilters.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TableFilters.js.map

package/dist/components/table/TableFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilters.js","names":["_sfc_main","TableFilters_vue_vue_type_script_setup_true_lang_default","TableFilters_default"],"sources":["../../../src/components/table/TableFilters.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { TableSchema } from '@alfakit/core'\nimport {\n  FilterFormSync,\n  FormStore,\n  filterFormComponents,\n  filtersAreDeferred,\n  filtersCollapsible,\n  filtersFormWidthClass,\n  filtersPlacement,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, FilterIcon } from '@lucide/vue'\nimport { createReusableTemplate } from '@vueuse/core'\nimport { computed, onScopeDispose, ref, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { usePageSchema, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { provideForm } from '../form/form-context'\nimport SchemaRenderer from '../schema/SchemaRenderer.vue'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Dialog from '../ui/Dialog.vue'\nimport DialogContent from '../ui/DialogContent.vue'\nimport DialogDescription from '../ui/DialogDescription.vue'\nimport DialogFooter from '../ui/DialogFooter.vue'\nimport DialogHeader from '../ui/DialogHeader.vue'\nimport DialogTitle from '../ui/DialogTitle.vue'\nimport DialogTrigger from '../ui/DialogTrigger.vue'\nimport Popover from '../ui/Popover.vue'\nimport PopoverContent from '../ui/PopoverContent.vue'\nimport PopoverTrigger from '../ui/PopoverTrigger.vue'\nimport TableTriggerButton from './TableTriggerButton.vue'\n\n/**\n * Filters are a small form whose state (keyed by filter name) is pushed into the query\n * string. The server re-renders the table with the filtered records.\n */\nconst props = defineProps<{ table: TableSchema; component: string }>()\nconst t = useT()\nconst panel = usePanel()\nconst page = usePageSchema()\nconst filters = computed(() => props.table.filters ?? [])\n// `filtersFormSchema()` lays the filters out itself.\nconst components = computed(\n  () => props.table.filtersFormSchema ?? filterFormComponents(filters.value),\n)\n\nconst store = new FormStore(\n  {\n    components: components.value,\n    state: props.table.filterState ?? {},\n    columns: props.table.filtersFormColumns ?? { default: 1 },\n  },\n  {\n    token: page.value?.token ?? '',\n    component: `${props.component}.filters`,\n    refreshUrl: undefined,\n    optionsUrl: panel.value.endpoints.schemaOptions,\n  },\n)\n\nprovideForm(store)\n\n// Server responses are merged in by FilterFormSync so typing that happens while a filter\n// request is in flight is never reset.\nconst sync = new FilterFormSync(store)\n\nwatch([components, () => props.table.filterState], ([next, filterState]) => {\n  sync.receive({\n    components: next,\n    state: filterState,\n    columns: props.table.filtersFormColumns ?? { default: 1 },\n  })\n})\n\nwatch(\n  () => page.value?.token,\n  (token) => {\n    if (token) store.setToken(token)\n  },\n)\n\nconst state = useStore(store.store)\nconst open = ref(false)\nlet timer: ReturnType<typeof setTimeout> | null = null\nconst deferred = computed(() => filtersAreDeferred(props.table))\n// Re-evaluated with the form state, which `hasUnsentChanges` reads.\nconst unsent = computed(() => {\n  void state.value.values\n\n  return deferred.value && sync.hasUnsentChanges\n})\n\nconst apply = () => {\n  sync.pushed(state.value.values)\n  visitTable(\n    props.table.identifier,\n    { filters: state.value.values as Record<string, Record<string, unknown>> },\n    ['page'],\n  )\n  open.value = false\n}\n\nconst discard = () =>\n  sync.discard({\n    components: components.value,\n    state: props.table.filterState,\n    columns: props.table.filtersFormColumns ?? { default: 1 },\n  })\n\nconst setModalOpen = (next: boolean) => {\n  // Dismissing the dialog drops edits that were not applied.\n  if (!next) discard()\n  open.value = next\n}\n\nconst reset = () => visitTable(props.table.identifier, { filters: null }, ['page'])\n\n// Push changes to the server (debounced by the browser's natural typing pauses), unless\n// the filters wait for the Apply button.\nwatch(\n  () => [state.value.values, state.value.dirty] as const,\n  ([values, dirty]) => {\n    if (timer) clearTimeout(timer)\n\n    if (!dirty.size || deferred.value) {\n      return\n    }\n\n    timer = setTimeout(() => {\n      sync.pushed(values)\n      visitTable(\n        props.table.identifier,\n        { filters: values as Record<string, Record<string, unknown>> },\n        ['page'],\n      )\n    }, 400)\n  },\n)\n\nonScopeDispose(() => {\n  if (timer) clearTimeout(timer)\n  store.destroy()\n})\n\nconst activeCount = computed(() => props.table.filterIndicators?.length ?? 0)\nconst placement = computed(() => filtersPlacement(props.table.filtersLayout))\nconst widthClass = computed(() => filtersFormWidthClass(props.table))\nconst sidebar = computed(() => placement.value === 'before' || placement.value === 'after')\nconst sidebarCollapsible = computed(() => filtersCollapsible(props.table.filtersLayout))\nconst collapsible = computed(() => props.table.filtersLayout === 'above-content-collapsible')\nconst inline = computed(() => placement.value === 'above' || placement.value === 'below')\n// `filtersResetAction()` / `filtersApplyAction()` / `filtersTriggerAction()`.\nconst resetView = computed(() =>\n  triggerButtonView(props.table, 'filtersReset', {\n    label: t('table.reset_filters', {}, 'Reset'),\n    variant: 'link',\n  }),\n)\nconst applyView = computed(() =>\n  triggerButtonView(props.table, 'filtersApply', {\n    label: t('table_filters.apply', {}, 'Apply'),\n    variant: 'default',\n  }),\n)\nconst trigger = computed(() =>\n  triggerButtonView(props.table, 'filters', {\n    label: t('table.filters', {}, 'Filters'),\n    badge: activeCount.value > 0 ? activeCount.value : undefined,\n  }),\n)\nconst showReset = computed(() => activeCount.value > 0 && Boolean(resetView.value))\nconst resetInHeader = computed(() => props.table.filtersResetActionPosition === 'header')\nconst [DefineReset, ResetButton] = createReusableTemplate()\nconst [DefineApply, ApplyButton] = createReusableTemplate()\nconst [DefineForm, FiltersForm] = createReusableTemplate()\n</script>\n\n<template>\n  <template v-if=\"filters.length > 0\">\n    <DefineReset>\n      <TableTriggerButton\n        v-if=\"showReset && resetView\"\n        :view=\"resetView\"\n        data-slot=\"filters-reset\"\n        @click=\"reset\"\n      />\n    </DefineReset>\n    <DefineApply>\n      <TableTriggerButton\n        v-if=\"applyView\"\n        :view=\"applyView\"\n        data-slot=\"filters-apply\"\n        :disabled=\"!unsent\"\n        @click=\"apply\"\n      />\n    </DefineApply>\n    <DefineForm>\n      <div class=\"flex flex-col gap-4\">\n        <div v-if=\"resetInHeader && showReset\" class=\"flex justify-end\"><ResetButton /></div>\n        <SchemaRenderer :components=\"state.components\" :columns=\"state.columns\" class=\"gap-4\" />\n        <div\n          v-if=\"(!resetInHeader && showReset) || (deferred && applyView)\"\n          class=\"flex items-center justify-end gap-2\"\n        >\n          <ResetButton v-if=\"!resetInHeader\" />\n          <ApplyButton v-if=\"deferred\" />\n        </div>\n      </div>\n    </DefineForm>\n    <aside\n      v-if=\"sidebar\"\n      data-slot=\"table-filters-sidebar\"\n      :aria-label=\"t('table.filters', {}, 'Filters')\"\n      :class=\"cn('bg-muted/30 rounded-lg border lg:w-72 lg:shrink-0', widthClass)\"\n    >\n      <button\n        v-if=\"sidebarCollapsible\"\n        type=\"button\"\n        class=\"flex w-full items-center gap-2 p-4 text-sm font-medium\"\n        :aria-expanded=\"open\"\n        @click=\"open = !open\"\n      >\n        <FilterIcon class=\"size-4\" />\n        {{ t('table.filters', {}, 'Filters') }}\n        <Badge v-if=\"activeCount > 0\" class=\"h-5 min-w-5 px-1\">{{ activeCount }}</Badge>\n        <ChevronDownIcon :class=\"cn('ms-auto size-4 transition-transform', open && 'rotate-180')\" />\n      </button>\n      <div v-else class=\"flex items-center gap-2 px-4 pt-4 text-sm font-medium\">\n        <FilterIcon class=\"size-4\" />\n        {{ t('table.filters', {}, 'Filters') }}\n      </div>\n      <div v-if=\"!sidebarCollapsible || open\" :class=\"cn('p-4', sidebarCollapsible && 'border-t')\">\n        <FiltersForm />\n      </div>\n    </aside>\n    <div v-else-if=\"collapsible\" class=\"bg-muted/30 rounded-lg border\">\n      <button\n        type=\"button\"\n        class=\"flex w-full items-center gap-2 p-4 text-sm font-medium\"\n        :aria-expanded=\"open\"\n        @click=\"open = !open\"\n      >\n        <FilterIcon class=\"size-4\" />\n        {{ t('table.filters', {}, 'Filters') }}\n        <Badge v-if=\"activeCount > 0\" class=\"h-5 min-w-5 px-1\">{{ activeCount }}</Badge>\n        <ChevronDownIcon :class=\"cn('ms-auto size-4 transition-transform', open && 'rotate-180')\" />\n      </button>\n      <div v-if=\"open\" class=\"border-t p-4\"><FiltersForm /></div>\n    </div>\n    <div v-else-if=\"inline\" class=\"bg-muted/30 rounded-lg border p-4\"><FiltersForm /></div>\n    <Dialog\n      v-else-if=\"props.table.filtersLayout === 'modal'\"\n      :open=\"open\"\n      @update:open=\"setModalOpen\"\n    >\n      <DialogTrigger v-if=\"trigger\" as-child>\n        <TableTriggerButton\n          :view=\"trigger\"\n          :responsive-label=\"!props.table.triggerActions?.filters\"\n          :active=\"activeCount > 0\"\n        >\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.filter\" :fallback=\"FilterIcon\"\n          /></template>\n        </TableTriggerButton>\n      </DialogTrigger>\n      <DialogContent :class=\"widthClass ?? 'sm:max-w-2xl'\">\n        <DialogHeader>\n          <DialogTitle>{{ t('table.filters', {}, 'Filters') }}</DialogTitle>\n          <DialogDescription class=\"sr-only\">{{ props.table.pluralModelLabel }}</DialogDescription>\n        </DialogHeader>\n        <div v-if=\"resetInHeader && showReset\" class=\"flex justify-end\"><ResetButton /></div>\n        <div class=\"max-h-[60vh] overflow-y-auto\">\n          <SchemaRenderer :components=\"state.components\" :columns=\"state.columns\" class=\"gap-4\" />\n        </div>\n        <DialogFooter class=\"items-center gap-2\">\n          <ResetButton v-if=\"!resetInHeader\" />\n          <span class=\"flex-1\" />\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"setModalOpen(false)\">{{\n            t('table_filters.cancel', {}, 'Cancel')\n          }}</Button>\n          <ApplyButton />\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n    <Popover v-else :open=\"open\" @update:open=\"open = $event\">\n      <PopoverTrigger v-if=\"trigger\" as-child>\n        <TableTriggerButton\n          :view=\"trigger\"\n          :responsive-label=\"!props.table.triggerActions?.filters\"\n          :active=\"activeCount > 0\"\n        >\n          <template #icon\n            ><Icon name=\"alfakit::tables.actions.filter\" :fallback=\"FilterIcon\"\n          /></template>\n        </TableTriggerButton>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        :class=\"cn(widthClass ? ['w-[calc(100vw-2rem)]', widthClass] : 'w-80 sm:w-96')\"\n      >\n        <!-- `filtersFormMaxHeight()`: PopoverContent renders through a portal, so the\n             height cap sits on its content. -->\n        <div\n          :class=\"cn(props.table.filtersFormMaxHeight && 'overflow-y-auto')\"\n          :style=\"\n            props.table.filtersFormMaxHeight\n              ? { maxHeight: props.table.filtersFormMaxHeight }\n              : undefined\n          \"\n        >\n          <FiltersForm />\n        </div>\n      </PopoverContent>\n    </Popover>\n  </template>\n</template>\n"],"mappings":""}

package/dist/components/table/TableFilters.vue.d.ts

@@ -0,0 +1,12 @@
+import type { TableSchema } from '@alfakit/core';
+/**
+ * Filters are a small form whose state (keyed by filter name) is pushed into the query
+ * string. The server re-renders the table with the filtered records.
+ */
+type __VLS_Props = {
+    table: TableSchema;
+    component: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=TableFilters.vue.d.ts.map

package/dist/components/table/TableFilters.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilters.vue.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableFilters.vue"],"names":[],"mappings":"AAmUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAmChD;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC;;AAkzB7D,wBAMG"}