@fastkit/vui 0.12.7 → 0.12.8

package/dist/vui.d.ts

@@ -71,6 +71,7 @@ import { ResolveRawSlots as ResolveRawSlots_2 } from '@fastkit/vue-utils';
 import { RouteLocationRaw } from 'vue-router';
 import type { Router } from 'vue-router';
 import { ScopeName } from '@fastkit/color-scheme';
+import { ScopeName as ScopeName_2 } from '@fastkit/vue-color-scheme';
 import { ShallowRef } from 'vue';
 import { StyleValue } from 'vue';
 import { TextableCounterResult } from '@fastkit/vue-kit';
@@ -1148,6 +1149,13 @@ export declare interface DataTableItemSlotPayload<T extends DataTableItem = Data
     selected: boolean;
 }
 
+export declare interface DataTableRowSettings<T extends DataTableItem = DataTableItem> {
+    color?: ScopeName_2;
+    attrs?: HTMLAttributes;
+}
+
+export declare type DataTableRowSettingsFn<T extends DataTableItem = DataTableItem> = (payload: DataTableItemSlotPayload<T>) => DataTableRowSettings<T>;
+
 export declare function defineFormSelectorComponent(opts: DefineFormSelectorComponentOptions): DefineComponent<{
     'v-slots': PropType<ResolveRawSlots<FormControlSlots>>;
     stacked: {
@@ -1523,6 +1531,8 @@ declare type PrefixedEventName<S extends string> = `on${Capitalize<S>}`;
 
 export declare type RawBreadcrumbsItem = string | BreadcrumbsItem;
 
+export declare type RawDataTableRowSettings<T extends DataTableItem = DataTableItem> = DataTableRowSettingsFn<T> | DataTableRowSettings<T>;
+
 declare type RawGridValue<T extends number | string = number | string> = T | Partial<Record<MediaMatchKey, T>> | undefined;
 
 declare type RawGridValueProp<T extends number | string = number | string> = PropType<RawGridValue<T>>;
@@ -4384,6 +4394,7 @@ export declare const VDataTable: DefineComponent<{
     maxHeight: (StringConstructor | NumberConstructor)[];
     noDataMessage: PropType<VNodeChildOrSlot_2<any>>;
     noResultsMessage: PropType<VNodeChildOrSlot_2<any>>;
+    rowSettings: PropType<RawDataTableRowSettings<DataTableItem>>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     input: (selecteds: string[]) => true;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
@@ -4472,6 +4483,7 @@ export declare const VDataTable: DefineComponent<{
     maxHeight: (StringConstructor | NumberConstructor)[];
     noDataMessage: PropType<VNodeChildOrSlot_2<any>>;
     noResultsMessage: PropType<VNodeChildOrSlot_2<any>>;
+    rowSettings: PropType<RawDataTableRowSettings<DataTableItem>>;
 }>> & {
     onInput?: ((selecteds: string[]) => any) | undefined;
 }, {

package/dist/vui.mjs

@@ -4544,7 +4544,8 @@ const VDataTable = /* @__PURE__ */ defineComponent({
     // eslint-disable-next-line vue/require-prop-types
     noDataMessage: {},
     // eslint-disable-next-line vue/require-prop-types
-    noResultsMessage: {}
+    noResultsMessage: {},
+    rowSettings: [Object, Function]
   },
   emits: {
     input: selecteds => true
@@ -4554,6 +4555,14 @@ const VDataTable = /* @__PURE__ */ defineComponent({
     const bootedRef = ref(false);
     const footerHeightRef = ref(0);
     const internalValues = ref(props.modelValue.slice());
+    const rowSettings = computed(() => {
+      const {
+        rowSettings
+      } = props;
+      if (!rowSettings) return () => ({});
+      return typeof rowSettings === 'function' ? rowSettings : () => rowSettings;
+    });
+    const containedVariant = vui.setting('containedVariant');
     const sortedItemKeysRef = computed(() => props.items.map(item => item[props.itemKey]));
     const isEmptyRef = computed(() => props.items.length === 0);
     const headersRef = computed(() => {
@@ -4977,12 +4986,21 @@ const VDataTable = /* @__PURE__ */ defineComponent({
           "key": header.key
         }, [cellChildren]);
       });
-      return createVNode("tr", {
-        "class": ['v-data-table__table__item', {
-          'v-data-table__table__item--selected': selected
-        }],
+      const {
+        color,
+        attrs
+      } = rowSettings.value(payload);
+      const colorClass = color && toScopeColorClass(color);
+      const classes = ['v-data-table__table__item', {
+        'v-data-table__table__item--selected': selected
+      }];
+      if (colorClass) {
+        classes.push(colorClass, containedVariant);
+      }
+      return createVNode("tr", mergeProps({
+        "class": classes,
         "key": key
-      }, [children]);
+      }, attrs), [children]);
     }
     function genBody() {
       const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.12.7",
+  "version": "0.12.8",
   "description": "A simple, extensible UI kit for Vue applications.",
   "buildOptions": {
     "name": "Vui",
@@ -59,11 +59,11 @@
     "vue": "^3.2.45"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.12.7",
-    "@fastkit/icon-font": "0.12.7",
-    "@fastkit/tiny-logger": "0.12.7",
-    "@fastkit/vite-kit": "0.12.7",
-    "@fastkit/vue-kit": "0.12.7",
+    "@fastkit/color-scheme": "0.12.8",
+    "@fastkit/icon-font": "0.12.8",
+    "@fastkit/tiny-logger": "0.12.8",
+    "@fastkit/vite-kit": "0.12.8",
+    "@fastkit/vue-kit": "0.12.8",
     "@tiptap/extension-link": "^2.0.0-beta.209",
     "@tiptap/extension-text-style": "^2.0.0-beta.209",
     "@tiptap/extension-underline": "^2.0.0-beta.209",

package/src/components/VDataTable/VDataTable.tsx

@@ -13,6 +13,7 @@ import {
   withDirectives,
   Transition,
   isVNode,
+  HTMLAttributes,
 } from 'vue';
 import { useVui } from '../../injections';
 import type { VuiService } from '../../service';
@@ -23,6 +24,7 @@ import { VIcon, resolveRawIconProp } from '../VIcon';
 import { VProgressCircular } from '../loading';
 import { resizeDirectiveArgument, VNodeChildOrSlot } from '@fastkit/vue-utils';
 import { VueAppLayout } from '@fastkit/vue-app-layout';
+import { ScopeName, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { VPaper } from '../VPaper';
 
 export type DataTableHeaderAlign = 'left' | 'center' | 'right';
@@ -88,6 +90,19 @@ export interface DataTableHeader<T extends DataTableItem = DataTableItem> {
   cell?: (payload: DataTableCellSlotPayload<T>) => VNodeChild;
 }
 
+export interface DataTableRowSettings<T extends DataTableItem = DataTableItem> {
+  color?: ScopeName;
+  attrs?: HTMLAttributes;
+}
+
+export type DataTableRowSettingsFn<T extends DataTableItem = DataTableItem> = (
+  payload: DataTableItemSlotPayload<T>,
+) => DataTableRowSettings<T>;
+
+export type RawDataTableRowSettings<T extends DataTableItem = DataTableItem> =
+  | DataTableRowSettingsFn<T>
+  | DataTableRowSettings<T>;
+
 const SELECTABLE_HEADER_SYMBOL = '__selectable_header__';
 
 export const VDataTable = defineComponent({
@@ -186,6 +201,7 @@ export const VDataTable = defineComponent({
     noDataMessage: {} as PropType<VNodeChildOrSlot>,
     // eslint-disable-next-line vue/require-prop-types
     noResultsMessage: {} as PropType<VNodeChildOrSlot>,
+    rowSettings: [Object, Function] as PropType<RawDataTableRowSettings>,
   },
   emits: {
     input: (selecteds: string[]) => true,
@@ -195,6 +211,15 @@ export const VDataTable = defineComponent({
     const bootedRef = ref(false);
     const footerHeightRef = ref(0);
     const internalValues = ref<string[]>(props.modelValue.slice());
+    const rowSettings = computed<DataTableRowSettingsFn>(() => {
+      const { rowSettings } = props;
+      if (!rowSettings) return () => ({});
+      return typeof rowSettings === 'function'
+        ? rowSettings
+        : () => rowSettings;
+    });
+    const containedVariant = vui.setting('containedVariant');
+
     const sortedItemKeysRef = computed(() =>
       props.items.map((item) => item[props.itemKey]),
     );
@@ -725,15 +750,21 @@ export const VDataTable = defineComponent({
           </td>
         );
       });
+
+      const { color, attrs } = rowSettings.value(payload);
+      const colorClass = color && toScopeColorClass(color);
+      const classes = [
+        'v-data-table__table__item',
+        {
+          'v-data-table__table__item--selected': selected,
+        },
+      ];
+      if (colorClass) {
+        classes.push(colorClass, containedVariant);
+      }
+
       return (
-        <tr
-          class={[
-            'v-data-table__table__item',
-            {
-              'v-data-table__table__item--selected': selected,
-            },
-          ]}
-          key={key}>
+        <tr class={classes} key={key} {...attrs}>
           {children}
         </tr>
       );