@fastkit/vui 0.12.7 → 0.12.9

package/src/components/VDataTable/VDataTable.scss

@@ -1,230 +1,229 @@
-.v-data-table {
-  --controls-vertial-margin: 0.625em;
+@layer vui {
+  .v-data-table {
+    --controls-vertial-margin: 0.625em;
 
-  .v-card-content & {
-    margin-right: calc(var(--card-content-padding) * -1);
-    margin-left: calc(var(--card-content-padding) * -1);
-  }
-
-  &__empty--message {
-    // @include container;
+    .v-card-content & {
+      margin-right: calc(var(--card-content-padding) * -1);
+      margin-left: calc(var(--card-content-padding) * -1);
+    }
 
-    // color: get-color(text-muted);
-  }
+    &__empty--message {
+      // @include container;
 
-  &__controls {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
+      // color: get-color(text-muted);
+    }
 
-    &__info {
+    &__controls {
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
+      justify-content: flex-end;
 
-      &__length {
-        margin-right: 20px;
+      &__info {
+        display: flex;
+        align-items: center;
+
+        &__length {
+          margin-right: 20px;
+        }
       }
-    }
 
-    &__select-limit {
-      display: flex;
-      align-items: center;
+      &__select-limit {
+        display: flex;
+        align-items: center;
 
-      &__prefix {
-        margin-right: 0.5em;
-        font-size: 0.75em;
-        color: var(--palette-muted);
-        white-space: nowrap;
-      }
+        &__prefix {
+          margin-right: 0.5em;
+          font-size: 0.75em;
+          color: var(--palette-muted);
+          white-space: nowrap;
+        }
 
-      .v-select {
-        width: 5em;
-        margin-left: 0.5em;
+        .v-select {
+          width: 5em;
+          margin-left: 0.5em;
+        }
       }
-    }
 
-    &__pagination {
-      flex: 1 1 100%;
-      margin-left: auto;
+      &__pagination {
+        flex: 1 1 100%;
+        margin-left: auto;
 
-      @media screen and (min-width: 320px) {
-        flex: 0 0 50%;
-        width: 50%;
+        @media screen and (min-width: 320px) {
+          flex: 0 0 50%;
+          width: 50%;
+        }
       }
     }
-  }
 
-  &__header {
-    margin-bottom: var(--controls-vertial-margin);
-  }
+    &__header {
+      margin-bottom: var(--controls-vertial-margin);
+    }
 
-  &__footer {
-    margin-top: var(--controls-vertial-margin);
-  }
+    &__footer {
+      margin-top: var(--controls-vertial-margin);
+    }
 
-  &__body {
-    position: relative;
+    &__body {
+      position: relative;
 
-    &__inner {
-      overflow-x: auto;
+      &__inner {
+        overflow-x: auto;
+      }
     }
-  }
 
-  &__table-wrapper {
-    display: flex;
+    &__table-wrapper {
+      display: flex;
 
-    &::before,
-    &::after {
-      display: block;
-      // flex: 0 0 $view-padding-narrow;
-      // width: $view-padding-narrow;
-      height: 1px;
-      content: '';
+      &::before,
+      &::after {
+        display: block;
+        // flex: 0 0 $view-padding-narrow;
+        // width: $view-padding-narrow;
+        height: 1px;
+        content: '';
+
+        // @include mq(wide) {
+        //   flex-basis: $view-padding-wide;
+        //   width: $view-padding-wide;
+        // }
+      }
+    }
 
-      // @include mq(wide) {
-      //   flex-basis: $view-padding-wide;
-      //   width: $view-padding-wide;
-      // }
+    &__loading {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--palette-background);
+      opacity: 0.5;
     }
-  }
 
-  &__loading {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--palette-background);
-    opacity: 0.5;
-  }
+    &__table {
+      width: 100%;
+      // min-width: calc(100% - #{$view-padding-narrow * 2});
+      margin: 0;
+      // border-collapse: separate;
+      background: var(--palette-background);
+      border-radius: var(--control-field-radius);
 
-  &__table {
-    width: 100%;
-    // min-width: calc(100% - #{$view-padding-narrow * 2});
-    margin: 0;
-    // border-collapse: separate;
-    background: var(--palette-background);
-    border-radius: var(--control-field-radius);
+      // @include mq(wide) {
+      //   min-width: calc(100% - #{$view-padding-wide * 2});
+      // }
 
-    // @include mq(wide) {
-    //   min-width: calc(100% - #{$view-padding-wide * 2});
-    // }
+      &__cell {
+        position: relative;
+        text-align: left;
+        white-space: nowrap;
+        vertical-align: middle;
+        border-bottom: thin solid rgba(0, 0, 0, 0.12);
+        transition: background 0.2s;
 
-    &__cell {
-      position: relative;
-      text-align: left;
-      white-space: nowrap;
-      vertical-align: middle;
-      border-bottom: thin solid rgba(0, 0, 0, 0.12);
-      transition: background 0.2s;
-
-      &:first-child {
-        padding-left: calc(var(--table-cell-horizontal-padding) * 2);
-      }
+        &:first-child {
+          padding-left: calc(var(--table-cell-horizontal-padding) * 2);
+        }
 
-      &:last-child {
-        padding-right: calc(var(--table-cell-horizontal-padding) * 2);
-      }
+        &:last-child {
+          padding-right: calc(var(--table-cell-horizontal-padding) * 2);
+        }
 
-      &--left {
-        text-align: left;
-      }
+        &--left {
+          text-align: left;
+        }
 
-      &--center {
-        text-align: center;
+        &--center {
+          text-align: center;
 
-        .v-data-table__table__sort-icon--empty {
-          display: flex;
+          .v-data-table__table__sort-icon--empty {
+            display: flex;
+          }
         }
-      }
 
-      &--right {
-        text-align: right;
-      }
+        &--right {
+          text-align: right;
+        }
 
-      &[tabindex='0'] {
-        cursor: pointer;
+        &[tabindex='0'] {
+          cursor: pointer;
 
-        &:hover,
-        &:focus {
-          // background: var(--shadow-color);
-          // background: get-color(light);
+          &:hover,
+          &:focus {
+            // background: var(--shadow-color);
+            // background: get-color(light);
+          }
         }
-      }
 
-      &__tile {
-        display: flex;
-        align-items: center;
+        &__tile {
+          display: flex;
+          align-items: center;
+        }
       }
-    }
 
-    &__sort-icon {
-      width: 25px;
-      font-size: 1.25em;
-      opacity: 0;
-      transition: transform 0.2s, opacity 0.2s;
+      &__sort-icon {
+        width: 25px;
+        font-size: 1.25em;
+        opacity: 0;
+        transition: transform 0.2s, opacity 0.2s;
 
-      // stylelint-disable-next-line no-descending-specificity
-      &--empty {
-        display: none;
+        // stylelint-disable-next-line no-descending-specificity
+        &--empty {
+          display: none;
+        }
       }
-    }
 
-    &__header &__cell {
-      user-select: none;
-      background: rgba(255, 255, 255, 0.85);
-      backdrop-filter: blur(3px);
+      &__header &__cell {
+        user-select: none;
+        background: rgba(255, 255, 255, 0.85);
+        backdrop-filter: blur(3px);
 
-      &--active[tabindex='0'] {
-        // color: get-color(invert-text);
-        // background: get-color(primary);
+        &--active[tabindex='0'] {
+          // color: get-color(invert-text);
+          // background: get-color(primary);
+        }
       }
-    }
-
-    &__header &__cell--active &__sort-icon {
-      opacity: 1;
-    }
 
-    &__cell[tabindex='0']:hover &__sort-icon,
-    &__cell[tabindex='0']:focus &__sort-icon {
-      opacity: 1;
-    }
+      &__header &__cell--active &__sort-icon {
+        opacity: 1;
+      }
 
-    &__body tr:last-child &__cell {
-      border-bottom: none;
-    }
+      &__cell[tabindex='0']:hover &__sort-icon,
+      &__cell[tabindex='0']:focus &__sort-icon {
+        opacity: 1;
+      }
 
-    &__item {
-      &:hover {
-        td {
-          // background: get-color(tocuh-0);
-        }
+      &__body tr:last-child &__cell {
+        border-bottom: none;
       }
 
-      &--selected {
-        // stylelint-disable-next-line no-descending-specificity
-        td {
-          // background: get-color(light);
+      &__item {
+        &:hover {
+          td {
+            // background: get-color(tocuh-0);
+          }
         }
 
-        &:hover {
+        &--selected {
+          // stylelint-disable-next-line no-descending-specificity
           td {
             // background: get-color(light);
           }
+
+          &:hover {
+            td {
+              // background: get-color(light);
+            }
+          }
         }
       }
     }
-  }
 
-  // stylelint-disable-next-line no-descending-specificity
-  &--fixed-header &__table__header &__table__cell {
-    position: sticky;
-    top: 0;
-    z-index: 1;
+    // stylelint-disable-next-line no-descending-specificity
+    &--fixed-header &__table__header &__table__cell {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
   }
 }

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>
       );

package/src/components/VDrawerLayout/VDrawerLayout.scss

@@ -1,32 +1,34 @@
-.v-drawer-layout {
-  display: block;
-  width: 100%;
-  height: 100%;
-
-  &__inner {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
+@layer vui {
+  .v-drawer-layout {
+    display: block;
     width: 100%;
     height: 100%;
-  }
 
-  &__header {
-    display: flex;
-    flex: 0 0 var(--val-topToolbar-height);
-    align-items: center;
-    justify-content: center;
-    height: var(--val-topToolbar-height);
-  }
+    &__inner {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+      height: 100%;
+    }
 
-  &__body {
-    flex: 1 1 100%;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
+    &__header {
+      display: flex;
+      flex: 0 0 var(--val-topToolbar-height);
+      align-items: center;
+      justify-content: center;
+      height: var(--val-topToolbar-height);
+    }
+
+    &__body {
+      flex: 1 1 100%;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+    }
 
-  &__footer {
-    flex: 0 0 auto;
-    margin-top: auto;
+    &__footer {
+      flex: 0 0 auto;
+      margin-top: auto;
+    }
   }
 }

package/src/components/VForm/VForm.tsx

@@ -3,10 +3,9 @@ import {
   VueForm,
   createFormSettings,
   useForm,
-  defineSlotsProps,
-  renderSlotOrEmpty,
-  getDocumentScroller,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-form-control';
+import { defineSlotsProps, renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { getDocumentScroller } from '@fastkit/vue-scroller';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_FORM_SYMBOL, useVui } from '../../injections';