@fastkit/vui 0.12.7 → 0.12.9

package/src/components/VOption/VOption.scss

@@ -1,74 +1,73 @@
 @use '../../styles/core.scss';
 
-.v-option {
-  @include core.button-reset();
+@layer vui {
+  .v-option {
+    @include core.button-reset();
 
-  position: relative;
-  display: flex;
-  width: 100%;
-  padding: 0.75em 1em;
-  // font-size: 0.875em;
+    position: relative;
+    display: flex;
+    width: 100%;
+    padding: 0.75em 1em;
+    // font-size: 0.875em;
 
-  input {
-    @include core.hidden-input-element;
-  }
+    input {
+      @include core.hidden-input-element;
+    }
 
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    pointer-events: none;
-    content: '';
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
+    &::before,
+    &::after {
+      position: absolute;
+      inset: 0;
+      display: block;
+      pointer-events: none;
+      content: '';
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
 
-  &::before {
-    background: currentColor;
-  }
+    &::before {
+      background: currentColor;
+    }
 
-  &::after {
-    background: var(--palette-primary);
-  }
+    &::after {
+      background: var(--palette-primary);
+    }
 
-  &:hover,
-  &:focus-within,
-  &--key-focused {
-    &::before {
-      opacity: 0.12;
+    &:hover,
+    &:focus-within,
+    &--key-focused {
+      &::before {
+        opacity: 0.12;
+      }
     }
-  }
 
-  &__label {
-    position: relative;
-    display: block;
-  }
+    &__label {
+      position: relative;
+      display: block;
+    }
 
-  &--selected::after {
-    opacity: 0.12;
-  }
+    &--selected::after {
+      opacity: 0.12;
+    }
 
-  &--selected &__label {
-    font-weight: 500;
-    color: var(--palette-primary);
-  }
+    &--selected &__label {
+      font-weight: 500;
+      color: var(--palette-primary);
+    }
 
-  &--has-not-value &__label {
-    font-style: italic;
-  }
+    &--has-not-value &__label {
+      font-style: italic;
+    }
 
-  &[disabled],
-  &[tabindex='-1'] {
-    color: var(--palette-muted);
-    pointer-events: none;
-    opacity: 0.4;
+    &[disabled],
+    &[tabindex='-1'] {
+      color: var(--palette-muted);
+      pointer-events: none;
+      opacity: 0.4;
 
-    &::before {
-      opacity: 0 !important;
+      &::before {
+        opacity: 0 !important;
+      }
     }
   }
 }

package/src/components/VOption/VOption.tsx

@@ -3,8 +3,8 @@ import { defineComponent, computed } from 'vue';
 import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
-  renderSlotOrEmpty,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-form-control';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_SELECT_SYMBOL, VUI_OPTION_SYMBOL } from '../../injections';
 

package/src/components/VOptionGroup/VOptionGroup.scss

@@ -1,16 +1,18 @@
-.v-option-group {
-  display: block;
+@layer vui {
+  .v-option-group {
+    display: block;
 
-  &__label {
-    padding: 1em;
-    // padding: 0.875em 1em;
-    font-size: 0.875em;
-    color: var(--palette-caption);
-    opacity: 0.6;
-  }
+    &__label {
+      padding: 1em;
+      // padding: 0.875em 1em;
+      font-size: 0.875em;
+      color: var(--palette-caption);
+      opacity: 0.6;
+    }
 
-  &--disabled &__label {
-    color: var(--palette-muted);
-    opacity: 0.4;
+    &--disabled &__label {
+      color: var(--palette-muted);
+      opacity: 0.4;
+    }
   }
 }

package/src/components/VOptionGroup/VOptionGroup.tsx

@@ -4,11 +4,13 @@ import {
   createFormSelectorItemGroupProps,
   useFormSelectorItemGroupControl,
   FormSelectorItemGroupControl,
+} from '@fastkit/vue-form-control';
+import {
   defineSlotsProps,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
   renderSlotOrEmpty,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-utils';
 import { VUI_SELECT_SYMBOL } from '../../injections';
 
 export const VOptionGroup = defineComponent({

package/src/components/VPagination/VPagination.scss

@@ -1,100 +1,102 @@
 @use '../../styles/core.scss';
 
-.v-pagination {
-  --pagination-size: var(--pagination-item-size);
-  --pagination-margin: var(--pagination-item-margin);
-  --pagination-font-size: var(--pagination-item-font-size);
-  --pagination-radius: var(--pagination-item-radius);
-
-  &::before {
-    width: var(--pagination-size);
-    margin: var(--pagination-margin);
-    content: none;
-  }
-
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  font-weight: bold;
-  line-height: 1;
-
-  &--left {
-    justify-content: flex-start;
-  }
+@layer vui {
+  .v-pagination {
+    --pagination-size: var(--pagination-item-size);
+    --pagination-margin: var(--pagination-item-margin);
+    --pagination-font-size: var(--pagination-item-font-size);
+    --pagination-radius: var(--pagination-item-radius);
+
+    &::before {
+      width: var(--pagination-size);
+      margin: var(--pagination-margin);
+      content: none;
+    }
 
-  &--center {
-    justify-content: center;
-  }
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    font-weight: bold;
+    line-height: 1;
 
-  &--right {
-    justify-content: flex-end;
-  }
+    &--left {
+      justify-content: flex-start;
+    }
 
-  &__item,
-  a#{&}__item {
-    @include core.button-reset;
+    &--center {
+      justify-content: center;
+    }
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: var(--pagination-size);
-    height: var(--pagination-size);
-    margin: calc(var(--pagination-margin) * 0.5);
-    font-size: var(--pagination-font-size);
-    color: inherit;
-    border-radius: var(--pagination-radius);
-    transition: 0.1s;
-
-    &:hover,
-    &:focus {
-      background: rgba(0, 0, 0, 0.1);
+    &--right {
+      justify-content: flex-end;
     }
 
-    &--active {
-      &,
+    &__item,
+    a#{&}__item {
+      @include core.button-reset;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--pagination-size);
+      height: var(--pagination-size);
+      margin: calc(var(--pagination-margin) * 0.5);
+      font-size: var(--pagination-font-size);
+      color: inherit;
+      border-radius: var(--pagination-radius);
+      transition: 0.1s;
+
       &:hover,
-      &:focus,
-      &:active {
-        color: var(--text-color);
-        pointer-events: none;
-        background-color: var(--main-color);
+      &:focus {
+        background: rgba(0, 0, 0, 0.1);
       }
-    }
 
-    &--disabled {
-      color: var(--palette-muted) !important;
-      pointer-events: none !important;
-      background: transparent !important;
-    }
+      &--active {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+          color: var(--text-color);
+          pointer-events: none;
+          background-color: var(--main-color);
+        }
+      }
 
-    &--truncate {
-      color: var(--palette-muted) !important;
-      pointer-events: none !important;
-      background: transparent !important;
-    }
+      &--disabled {
+        color: var(--palette-muted) !important;
+        pointer-events: none !important;
+        background: transparent !important;
+      }
 
-    .v-icon {
-      font-size: 125%;
+      &--truncate {
+        color: var(--palette-muted) !important;
+        pointer-events: none !important;
+        background: transparent !important;
+      }
+
+      .v-icon {
+        font-size: 125%;
+      }
     }
-  }
 
-  &--dense &__item {
-    --pagination-size: var(--pagination-item-size-dense);
-    --pagination-margin: var(--pagination-item-margin-dense);
-    --pagination-font-size: var(--pagination-item-font-size-dense);
-  }
+    &--dense &__item {
+      --pagination-size: var(--pagination-item-size-dense);
+      --pagination-margin: var(--pagination-item-margin-dense);
+      --pagination-font-size: var(--pagination-item-font-size-dense);
+    }
 
-  &--disabled &__item {
-    color: var(--palette-muted);
-    pointer-events: none;
+    &--disabled &__item {
+      color: var(--palette-muted);
+      pointer-events: none;
 
-    &:hover,
-    &:focus {
-      background: transparent;
-    }
+      &:hover,
+      &:focus {
+        background: transparent;
+      }
 
-    &--active {
-      background: var(--palette-muted);
+      &--active {
+        background: var(--palette-muted);
+      }
     }
   }
 }

package/src/components/VPagination/VPagination.tsx

@@ -26,7 +26,7 @@ export type VPaginationGuard = (
 
 export const PAGINATION_ALIGNS = ['left', 'center', 'right'] as const;
 
-export type VPaginationAlign = typeof PAGINATION_ALIGNS[number];
+export type VPaginationAlign = (typeof PAGINATION_ALIGNS)[number];
 
 export function paginationProps() {
   return createPropsOptions({

package/src/components/VPaper/VPaper.scss

@@ -1,43 +1,45 @@
-.v-paper {
-  --paper-radius: var(--control-field-radius);
-
-  &--plain {
-    --paper-background--color: var(--palette-background);
-    --paper-text-color: inherit;
-    --paper-link-color: var(--link-color);
-  }
-
-  &--has-color {
-    --paper-background--color: var(--main-color);
-    --paper-text-color: var(--text-color);
-    --paper-link-color: var(--nav-color);
-  }
-
-  display: block;
-  color: var(--paper-text-color);
-  background-color: var(--paper-background--color);
-  border-radius: var(--paper-radius);
-
-  &__inner {
-    position: relative;
-    border-radius: inherit;
-  }
-
-  &--square {
-    --paper-radius: 0px;
-  }
-
-  // a:not(.v-paper) {
-  //   color: var(--paper-link-color);
-  // }
-
-  &__header {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-
-  &__footer {
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
+@layer vui {
+  .v-paper {
+    --paper-radius: var(--control-field-radius);
+
+    &--plain {
+      --paper-background--color: var(--palette-background);
+      --paper-text-color: inherit;
+      --paper-link-color: var(--link-color);
+    }
+
+    &--has-color {
+      --paper-background--color: var(--main-color);
+      --paper-text-color: var(--text-color);
+      --paper-link-color: var(--nav-color);
+    }
+
+    display: block;
+    color: var(--paper-text-color);
+    background-color: var(--paper-background--color);
+    border-radius: var(--paper-radius);
+
+    &__inner {
+      position: relative;
+      border-radius: inherit;
+    }
+
+    &--square {
+      --paper-radius: 0px;
+    }
+
+    // a:not(.v-paper) {
+    //   color: var(--paper-link-color);
+    // }
+
+    &__header {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+
+    &__footer {
+      border-bottom-right-radius: inherit;
+      border-bottom-left-radius: inherit;
+    }
   }
 }

package/src/components/VRadio/VRadio.scss

@@ -1,66 +1,65 @@
 @use 'sass:math';
 
-.v-radio {
-  --my-color: var(--color);
+@layer vui {
+  .v-radio {
+    --my-color: var(--color);
 
-  // color: var(--my-color);
-  // --my-faux-bg-color: transparent;
+    // color: var(--my-color);
+    // --my-faux-bg-color: transparent;
 
-  // &--selected,
-  // &--indeterminate {
-  //   --my-border-color: transparent;
-  //   --my-faux-bg-color: var(--color);
-  // }
+    // &--selected,
+    // &--indeterminate {
+    //   --my-border-color: transparent;
+    //   --my-faux-bg-color: var(--color);
+    // }
 
-  &__faux {
-    position: relative;
-    // display: flex;
-    // align-items: center;
-    // justify-content: center;
-    display: block;
-    width: 100%;
-    height: 100%;
-    // background: var(--my-faux-bg-color);
-    // border: solid 2px currentColor;
-    // border-radius: 100%;
-    transition: border-color 0.2s, background-color 0.2s;
-
-    &::before,
-    &::after {
-      position: absolute;
+    &__faux {
+      position: relative;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
       display: block;
-      content: '';
-      border-radius: 100%;
-    }
-
-    &::before {
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      border: solid 2px currentColor;
-      // display: block;
-      // width: 60%;
-      // height: 60%;
-      // content: '';
-      // background: currentColor;
+      width: 100%;
+      height: 100%;
+      // background: var(--my-faux-bg-color);
+      // border: solid 2px currentColor;
       // border-radius: 100%;
-    }
+      transition: border-color 0.2s, background-color 0.2s;
 
-    &::after {
-      top: 50%;
-      left: 50%;
-      width: 50%;
-      height: 50%;
-      background: currentColor;
-      transition: transform 0.2s;
-      transform: translate(-50%, -50%) scale(0);
+      &::before,
+      &::after {
+        position: absolute;
+        display: block;
+        content: '';
+        border-radius: 100%;
+      }
+
+      &::before {
+        inset: 0;
+        border: solid 2px currentColor;
+        // display: block;
+        // width: 60%;
+        // height: 60%;
+        // content: '';
+        // background: currentColor;
+        // border-radius: 100%;
+      }
+
+      &::after {
+        top: 50%;
+        left: 50%;
+        width: 50%;
+        height: 50%;
+        background: currentColor;
+        transition: transform 0.2s;
+        transform: translate(-50%, -50%) scale(0);
+      }
     }
-  }
 
-  &--selected &__faux {
-    &::after {
-      transform: translate(-50%, -50%) scale(1);
+    &--selected &__faux {
+      &::after {
+        transform: translate(-50%, -50%) scale(1);
+      }
     }
   }
 }

package/src/components/VRadio/VRadio.tsx

@@ -3,8 +3,8 @@ import { defineComponent } from 'vue';
 import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
-  renderSlotOrEmpty,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-form-control';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL } from '../../injections';
 import { VCheckable } from '../VCheckable';