@fastkit/vui 0.12.8 → 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/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';
 

package/src/components/VFormControl/VFormControl.scss

@@ -1,101 +1,103 @@
-.v-form-control {
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  margin: var(--control-horizontal-margin) 0;
-
-  // --control-label-font-size: calc(var(--control-field-font-size) * 0.75); // 12
-  --my-label-color: var(--control-label-color);
-  --my-message-color: var(--control-message-color);
+@layer vui {
+  .v-form-control {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    margin: var(--control-horizontal-margin) 0;
 
-  &--invalid:not(#{&}--readonly) {
-    --my-label-color: var(--main-color);
-    --my-message-color: var(--main-color);
-  }
+    // --control-label-font-size: calc(var(--control-field-font-size) * 0.75); // 12
+    --my-label-color: var(--control-label-color);
+    --my-message-color: var(--control-message-color);
 
-  &--disabled {
-    --my-label-color: var(--control-disabled-color);
-    --my-message-color: var(--control-disabled-color);
-  }
+    &--invalid:not(#{&}--readonly) {
+      --my-label-color: var(--main-color);
+      --my-message-color: var(--main-color);
+    }
 
-  &__label {
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-    font-size: var(--control-label-font-size);
-    font-weight: var(--control-label-font-weight);
-    line-height: var(--control-label-height);
-    color: var(--my-label-color);
-    letter-spacing: 0.00938em;
+    &--disabled {
+      --my-label-color: var(--control-disabled-color);
+      --my-message-color: var(--control-disabled-color);
+    }
 
-    &__hinttip {
-      display: inline-flex;
+    &__label {
+      display: flex;
       align-items: center;
-      margin-top: -0.2em;
-      margin-left: 0.6em;
-      // font-size: calc(var(--root-em) * 0.5);
-      font-size: 80%;
-      line-height: 1;
-      color: inherit;
-      // color: var(--palette-muted);
-      text-decoration: none;
-      letter-spacing: normal;
-      cursor: pointer;
-
-      // &:hover,
-      // &:focus {
-      //   text-decoration: underline;
-      // }
+      align-self: flex-start;
+      font-size: var(--control-label-font-size);
+      font-weight: var(--control-label-font-weight);
+      line-height: var(--control-label-height);
+      color: var(--my-label-color);
+      letter-spacing: 0.00938em;
 
-      &__icon {
-        position: relative;
-        display: flex;
+      &__hinttip {
+        display: inline-flex;
         align-items: center;
-        justify-content: center;
-        font-size: 120%;
-        text-decoration: none !important;
-      }
+        margin-top: -0.2em;
+        margin-left: 0.6em;
+        // font-size: calc(var(--root-em) * 0.5);
+        font-size: 80%;
+        line-height: 1;
+        color: inherit;
+        // color: var(--palette-muted);
+        text-decoration: none;
+        letter-spacing: normal;
+        cursor: pointer;
 
-      &:hover &__icon,
-      &:focus &__icon {
-        &::before {
-          opacity: 0.1;
+        // &:hover,
+        // &:focus {
+        //   text-decoration: underline;
+        // }
+
+        &__icon {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 120%;
+          text-decoration: none !important;
         }
-      }
 
-      &__hint {
-        font-size: calc(var(--root-em) * 0.75);
+        &:hover &__icon,
+        &:focus &__icon {
+          &::before {
+            opacity: 0.1;
+          }
+        }
+
+        &__hint {
+          font-size: calc(var(--root-em) * 0.75);
+        }
       }
     }
-  }
 
-  // &--disabled &__body {
-  //   user-select: none;
-  // }
+    // &--disabled &__body {
+    //   user-select: none;
+    // }
 
-  &__info {
-    display: flex;
-    padding-top: 3px;
-  }
+    &__info {
+      display: flex;
+      padding-top: 3px;
+    }
 
-  &__message,
-  &__appends {
-    margin: 0 var(--control-message-horizontal-margin);
-    font-size: var(--control-message-font-size);
-    line-height: 1.66;
-    color: var(--my-message-color);
-  }
+    &__message,
+    &__appends {
+      margin: 0 var(--control-message-horizontal-margin);
+      font-size: var(--control-message-font-size);
+      line-height: 1.66;
+      color: var(--my-message-color);
+    }
 
-  &__message {
-    flex: 1 0;
-    // margin: 0 var(--control-message-horizontal-margin);
-    // font-size: var(--control-message-font-size);
-    // line-height: 1.66;
-    // color: var(--my-message-color);
-  }
+    &__message {
+      flex: 1 0;
+      // margin: 0 var(--control-message-horizontal-margin);
+      // font-size: var(--control-message-font-size);
+      // line-height: 1.66;
+      // color: var(--my-message-color);
+    }
 
-  &__appends {
-    flex: 0 1;
-    margin-left: auto;
+    &__appends {
+      flex: 0 1;
+      margin-left: auto;
+    }
   }
 }

package/src/components/VFormControl/VFormControl.tsx

@@ -4,11 +4,10 @@ import {
   createFormControlSettings,
   useFormControl,
   FormControlSlots,
-  defineSlotsProps,
   FormControl,
-  renderSlotOrEmpty,
   RequiredChipSource,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-form-control';
+import { defineSlotsProps, renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { useVuiColorProvider, useVui } from '../../injections';
 import type { VuiService } from '../../service';
 import { VIcon } from '../VIcon';

package/src/components/VGrid/VGridContainer.scss

@@ -1,4 +1,6 @@
-.v-grid-container {
-  display: flex;
-  flex-wrap: wrap;
+@layer vui {
+  .v-grid-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }