@retailcrm/embed-ui-v1-components 0.9.26 → 0.9.27

package/dist/remote.cjs

@@ -2466,6 +2466,12 @@ const slotNeedsBodyCellWrapper = (children) => {
   }
   return !nodes.every(isCellVNode);
 };
+const hasSlotContent = (children) => {
+  if (!children) {
+    return false;
+  }
+  return normalizeNodes(children).length > 0;
+};
 const renderGroupHead = (slot, props) => {
   return slot?.(props) ?? [String(props.group.key)];
 };
@@ -2692,17 +2698,25 @@ const _sfc_main$6 = vue.defineComponent({
         const pageSize = slots["footer-page-size"]?.(footerData);
         const exportControl = slots["footer-export"]?.(footerData);
         const pagination = slots["footer-pagination"]?.(footerData);
+        const hasSummary = hasSlotContent(summary);
+        const hasPageSize = hasSlotContent(pageSize);
+        const hasExportControl = hasSlotContent(exportControl);
+        const hasPagination = hasSlotContent(pagination);
+        const hasAnyStructuredFooterContent = hasSummary || hasPageSize || hasExportControl || hasPagination;
+        if (!hasAnyStructuredFooterContent) {
+          return null;
+        }
         return vue.h(UiTableSection, { kind: "foot", key: "footer" }, () => vue.h(UiTableRow, () => vue.h(UiTableBodyCell, {
           colspan: columnsCount,
           class: "ui-v1-table__footer-cell"
         }, () => vue.h("div", { class: "ui-v1-table__footer" }, [
-          summary ? vue.h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
-          pageSize || exportControl || pagination ? vue.h("div", { class: "ui-v1-table__footer-controls" }, [
-            pageSize || exportControl ? vue.h("div", { class: "ui-v1-table__footer-main" }, [
+          hasSummary ? vue.h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
+          hasPageSize || hasExportControl || hasPagination ? vue.h("div", { class: "ui-v1-table__footer-controls" }, [
+            hasPageSize || hasExportControl ? vue.h("div", { class: "ui-v1-table__footer-main" }, [
               pageSize,
               exportControl
             ]) : null,
-            pagination ? vue.h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
+            hasPagination ? vue.h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
           ]) : null
         ]))));
       }

package/dist/remote.js

@@ -2464,6 +2464,12 @@ const slotNeedsBodyCellWrapper = (children) => {
   }
   return !nodes.every(isCellVNode);
 };
+const hasSlotContent = (children) => {
+  if (!children) {
+    return false;
+  }
+  return normalizeNodes(children).length > 0;
+};
 const renderGroupHead = (slot, props) => {
   return slot?.(props) ?? [String(props.group.key)];
 };
@@ -2690,17 +2696,25 @@ const _sfc_main$6 = defineComponent({
         const pageSize = slots["footer-page-size"]?.(footerData);
         const exportControl = slots["footer-export"]?.(footerData);
         const pagination = slots["footer-pagination"]?.(footerData);
+        const hasSummary = hasSlotContent(summary);
+        const hasPageSize = hasSlotContent(pageSize);
+        const hasExportControl = hasSlotContent(exportControl);
+        const hasPagination = hasSlotContent(pagination);
+        const hasAnyStructuredFooterContent = hasSummary || hasPageSize || hasExportControl || hasPagination;
+        if (!hasAnyStructuredFooterContent) {
+          return null;
+        }
         return h(UiTableSection, { kind: "foot", key: "footer" }, () => h(UiTableRow, () => h(UiTableBodyCell, {
           colspan: columnsCount,
           class: "ui-v1-table__footer-cell"
         }, () => h("div", { class: "ui-v1-table__footer" }, [
-          summary ? h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
-          pageSize || exportControl || pagination ? h("div", { class: "ui-v1-table__footer-controls" }, [
-            pageSize || exportControl ? h("div", { class: "ui-v1-table__footer-main" }, [
+          hasSummary ? h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
+          hasPageSize || hasExportControl || hasPagination ? h("div", { class: "ui-v1-table__footer-controls" }, [
+            hasPageSize || hasExportControl ? h("div", { class: "ui-v1-table__footer-main" }, [
               pageSize,
               exportControl
             ]) : null,
-            pagination ? h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
+            hasPagination ? h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
           ]) : null
         ]))));
       }

package/docs/AI.md

@@ -126,6 +126,10 @@ screen where users scan and refine datasets:
 - reset `page` to `1` when filters or sorting change;
 - debounce free-text search before writing query or fetching data;
 - use `UiTableSorter` for sortable headers;
+- for ordinary `UiTableColumn` cell customization, set header metadata through props such as `label`, `width`,
+  and `trim`, then use `v-slot` on `UiTableColumn` instead of `<template #cell>`;
+- use the `#cell` slot only when the column also needs another named slot such as `#label`, or when explicit
+  slot naming makes a complex column easier to read;
 - use `UiTable` footer slots for summary, page-size controls, export, and pagination;
 - compose table footer controls with `UiTableFooterSection` and `UiTableFooterButton`, not regular `UiButton`;
 - use chevron icon assets for table footer previous/next controls instead of text glyphs;

package/docs/profiles/components/UiTable.yml

@@ -32,24 +32,18 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              <strong>{{ row.title }}</strong>
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            <strong>{{ row.title }}</strong>
           </UiTableColumn>
 
-          <UiTableColumn label="Customer" width="180">
-            <template #cell="{ row }">
-              {{ row.customer }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Customer" width="180">
+            {{ row.customer }}
           </UiTableColumn>
 
-          <UiTableColumn label="Status" width="160">
-            <template #cell="{ row }">
-              <UiTag :background="statusBackgroundByName[row.status]" size="md" saturated :ticker="false">
-                {{ row.status }}
-              </UiTag>
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Status" width="160">
+            <UiTag :background="statusBackgroundByName[row.status]" size="md" saturated :ticker="false">
+              {{ row.status }}
+            </UiTag>
           </UiTableColumn>
         </UiTable>
       </template>
@@ -78,29 +72,25 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn label="Name">
-            <template #cell="{ row }">
-              {{ row.name }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Name">
+            {{ row.name }}
           </UiTableColumn>
 
-          <UiTableColumn :width="48" label="" trim>
-            <template #cell="{ row }">
-              <UiPopperConnector>
-                <UiButton
-                  :aria-label="`Edit ${row.name}`"
-                  appearance="tertiary"
-                  size="sm"
-                  @click="edit(row)"
-                >
-                  <IconEdit aria-hidden="true" />
-                </UiButton>
-
-                <UiTooltip>
-                  Edit {{ row.name }}
-                </UiTooltip>
-              </UiPopperConnector>
-            </template>
+          <UiTableColumn v-slot="{ row }" :width="48" label="" trim>
+            <UiPopperConnector>
+              <UiButton
+                :aria-label="`Edit ${row.name}`"
+                appearance="tertiary"
+                size="sm"
+                @click="edit(row)"
+              >
+                <IconEdit aria-hidden="true" />
+              </UiButton>
+
+              <UiTooltip>
+                Edit {{ row.name }}
+              </UiTooltip>
+            </UiPopperConnector>
           </UiTableColumn>
         </UiTable>
       </template>
@@ -139,18 +129,14 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn :width="44" label="" trim>
-            <template #cell="{ expanded, toggle }">
-              <button class="table-expand" type="button" @click="toggle">
-                {{ expanded ? '-' : '+' }}
-              </button>
-            </template>
+          <UiTableColumn v-slot="{ expanded, toggle }" :width="44" label="" trim>
+            <button class="table-expand" type="button" @click="toggle">
+              {{ expanded ? '-' : '+' }}
+            </button>
           </UiTableColumn>
 
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              {{ row.title }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            {{ row.title }}
           </UiTableColumn>
 
           <template #expand="{ row }">
@@ -186,16 +172,12 @@ examples:
           row-key="id"
           :group-by="groupByStatus"
         >
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              {{ row.title }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            {{ row.title }}
           </UiTableColumn>
 
-          <UiTableColumn label="Status" width="160">
-            <template #cell="{ row }">
-              {{ row.status }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Status" width="160">
+            {{ row.status }}
           </UiTableColumn>
 
           <template #group-head="{ group }">
@@ -241,10 +223,8 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              {{ row.title }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            {{ row.title }}
           </UiTableColumn>
 
           <template #footer-summary="{ rowsCount }">
@@ -440,16 +420,12 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              {{ row.title }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            {{ row.title }}
           </UiTableColumn>
 
-          <UiTableColumn label="Status" width="160">
-            <template #cell="{ row }">
-              {{ row.status }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Status" width="160">
+            {{ row.status }}
           </UiTableColumn>
         </UiTable>
       </template>
@@ -649,6 +625,11 @@ composition:
       - Use UiTableSorter inside a UiTableColumn label slot for sortable columns.
       - Reset pagination to the first page when sorting changes.
       - Persist sort key and direction in URL query parameters when routing is available.
+  columns:
+    notes:
+      - Configure header metadata with UiTableColumn props such as label, width, align, valign, and trim.
+      - Prefer `v-slot` on UiTableColumn for ordinary cell content when the header is configured through props.
+      - Use `#cell` only when the column also needs another named slot such as `#label`, or when explicit naming improves readability.
   pagination:
     notes:
       - Use footer-summary, footer-page-size, footer-export, and footer-pagination slots for structured footer controls.
@@ -676,6 +657,7 @@ ai_notes:
     - Compose footer controls with UiTableFooterSection and UiTableFooterButton.
     - Copy the Entity list table footer example when building a realistic entity-list footer.
     - Use UiTableSorter for sortable headers.
+    - Prefer UiTableColumn `v-slot` for ordinary custom cells when label and sizing are configured through props.
     - Use icon-only row action buttons with aria-label and UiTooltip in action columns.
   avoid:
     - Do not hide table filters in page header actions.
@@ -684,6 +666,7 @@ ai_notes:
     - Do not put visible text buttons in dense table action columns.
     - Do not put pagination only in local state when the screen has routable result sets.
     - Do not import table internals from host or src paths.
+    - Do not use `<template #cell>` for every column when the default slot would be simpler.
 
 behavior:
   notes:

package/docs/profiles/components/UiTableColumn.yml

@@ -11,6 +11,35 @@ public_import:
 related_components:
   - UiTable
 
+examples:
+  - title: Prop label with default cell slot
+    notes:
+      - Use this shape when header metadata is covered by props and only the cell body is custom.
+    code: |
+      <UiTableColumn v-slot="{ row }" label="Name" min-width="180">
+        <UiLink size="small">{{ row.name }}</UiLink>
+      </UiTableColumn>
+  - title: Custom label and explicit cell slot
+    notes:
+      - Use named slots when the column uses a custom label, for example a sorter.
+      - Keeping `#cell` explicit makes the two slot zones easier to scan.
+    code: |
+      <UiTableColumn min-width="180">
+        <template #label>
+          <UiTableSorter
+            :direction="sort.direction"
+            :active="sort.field === 'name'"
+            @click="setSort('name')"
+          >
+            Name
+          </UiTableSorter>
+        </template>
+
+        <template #cell="{ row }">
+          <UiLink size="small">{{ row.name }}</UiLink>
+        </template>
+      </UiTableColumn>
+
 use_when:
   - You define columns for UiTable.
 
@@ -30,12 +59,19 @@ api:
     - name: default
       zone: cell
       creates: Cell content.
+      notes: >
+        Prefer `v-slot` on UiTableColumn when the header label is already supplied by the `label`
+        prop and only the cell body is customized.
     - name: cell
       zone: cell
       creates: Explicit cell content.
+      notes: >
+        Use `#cell` when the column also needs another named slot such as `#label`, or when explicit
+        naming makes a complex column easier to read.
     - name: label
       zone: header-label
       creates: Header label content.
+      notes: Use only when the header label needs custom markup, for example UiTableSorter.
 
 rendered_structure:
   descriptive_only: true
@@ -60,6 +96,10 @@ composition:
       notes: Put the row's main UiLink in the first meaningful text column and set link size to small.
     - title: Sortable header
       notes: Use the label slot with UiTableSorter when the column supports sorting.
+    - title: Prop label plus custom cell
+      notes: Use `<UiTableColumn v-slot="{ row }" label="Name">` instead of `<template #cell>` when `label` prop is enough for the header.
+    - title: Custom label plus custom cell
+      notes: Use separate `<template #label>` and `<template #cell>` blocks when the header is built with a slot.
     - title: Status column
       notes: Use UiTag for categorical statuses instead of raw colored text.
 
@@ -68,8 +108,12 @@ ai_notes:
     - Set minWidth for important text columns so generated tables remain scannable.
     - Use align="right" for numbers, money, and percentages.
     - Use trim only for narrow checkbox, icon, or action columns.
+    - Prefer `v-slot` on UiTableColumn for ordinary custom cell content when the header is configured through props.
+    - Use the label slot only when the header itself needs custom markup.
+    - Use explicit `#cell` together with `#label` when both header and cell content are custom.
   avoid:
     - Do not place filters inside column labels; filters belong above the table.
+    - Do not wrap every cell body in `<template #cell>` when the default slot would express the same thing more simply.
 
 behavior:
   notes:

package/package.json

@@ -2,7 +2,7 @@
   "name": "@retailcrm/embed-ui-v1-components",
   "bin": "bin/embed-ui-v1-components.mjs",
   "type": "module",
-  "version": "0.9.26",
+  "version": "0.9.27",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": {
@@ -82,8 +82,8 @@
     "@storybook/vue3": "^10.3.5",
     "@storybook/vue3-vite": "^10.3.5",
     "@vitejs/plugin-vue": "^6.0.2",
-    "@vitest/browser": "4.1.3",
-    "@vitest/browser-playwright": "4.1.3",
+    "@vitest/browser": "4.1.8",
+    "@vitest/browser-playwright": "4.1.8",
     "@vue/compiler-sfc": "^3.5.25",
     "@vue/test-utils": "^2.4.6",
     "@yandex/ymaps3-types": "^1.0.19072130",
@@ -100,7 +100,7 @@
     "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^4.1.3",
+    "vitest": "4.1.8",
     "vue": "^3.5.32",
     "vue-i18n": "10.0.8"
   }

package/templates/skills/embed-ui-v1-components-ui/SKILL.md.txt

@@ -32,6 +32,7 @@ Use this skill before changing frontend UI built with `@retailcrm/embed-ui-v1-co
 ## High-signal checks
 
 - For entity lists, use `UiTable`, `UiTableColumn`, and table footer slots.
+- For ordinary table cells, configure `UiTableColumn` headers through props and use `v-slot` on the column; reserve `#cell` for columns that also need another named slot or extra clarity.
 - For table pagination, follow the reference example in `UiTable.yml`: button sizes, active state, dividers, arrow assets, and scoped selector pattern.
 - For form fields, use `UiField` with the matching control and forward slot props such as `id` when the control accepts them.
 - Put validation errors inside the relevant field composition, not as unrelated sibling blocks.