@fastkit/vui 0.12.8 → 0.12.9

package/src/components/VControlField/VControlField.scss

@@ -1,183 +1,185 @@
-.v-control-field {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-  height: var(--control-field-height);
-  padding: 0 8px;
-  font-size: var(--control-field-font-size);
-  line-height: var(--control-field-line-height);
-  letter-spacing: var(--control-field-letter-spacing);
-
-  --my-bottom-color: var(--control-field-bottom-color);
-  --my-bottom-hover-color: var(--control-field-bottom-hover-color);
-  --my-focused-color: var(--main-color);
-  --my-fill-color: var(--control-field-fill-color);
-  --my-fill-hover-color: var(--control-field-fill-hover-color);
-  --my-outline-color: var(--control-field-outline-color);
-  --my-outline-hover-color: var(--control-field-outline-hover-color);
-
-  &--invalid:not(#{&}--disabled):not(#{&}--readonly) {
-    --my-bottom-color: var(--main-color);
-    --my-bottom-hover-color: var(--main-color);
-    --my-outline-color: var(--main-color);
-    --my-outline-hover-color: var(--main-color);
-  }
-
-  &--readonly {
-    // pointer-events: none !important;
-    cursor: default;
-  }
-
-  &--disabled {
-    color: var(--control-disabled-color);
-    pointer-events: none;
-    // cursor: not-allowed !important;
-    user-select: none;
-  }
-
-  &::before,
-  &::after {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    content: '';
-    // transition: all 0.2s;
-  }
+@layer vui {
+  .v-control-field {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    height: var(--control-field-height);
+    padding: 0 8px;
+    font-size: var(--control-field-font-size);
+    line-height: var(--control-field-line-height);
+    letter-spacing: var(--control-field-letter-spacing);
+
+    --my-bottom-color: var(--control-field-bottom-color);
+    --my-bottom-hover-color: var(--control-field-bottom-hover-color);
+    --my-focused-color: var(--main-color);
+    --my-fill-color: var(--control-field-fill-color);
+    --my-fill-hover-color: var(--control-field-fill-hover-color);
+    --my-outline-color: var(--control-field-outline-color);
+    --my-outline-hover-color: var(--control-field-outline-hover-color);
+
+    &--invalid:not(#{&}--disabled):not(#{&}--readonly) {
+      --my-bottom-color: var(--main-color);
+      --my-bottom-hover-color: var(--main-color);
+      --my-outline-color: var(--main-color);
+      --my-outline-hover-color: var(--main-color);
+    }
 
-  &::before {
-    height: 1px;
-    border-bottom: solid 1px var(--my-bottom-color);
-    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  }
+    &--readonly {
+      // pointer-events: none !important;
+      cursor: default;
+    }
 
-  &::after {
-    height: 2px;
-    background: var(--my-focused-color);
-    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-    transform: scaleX(0);
-  }
+    &--disabled {
+      color: var(--control-disabled-color);
+      pointer-events: none;
+      // cursor: not-allowed !important;
+      user-select: none;
+    }
 
-  &--focused,
-  &:focus-within {
-    --my-outline-color: var(--my-focused-color);
-    --my-outline-hover-color: var(--my-focused-color);
+    &::before,
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      content: '';
+      // transition: all 0.2s;
+    }
 
-    outline: none;
+    &::before {
+      height: 1px;
+      border-bottom: solid 1px var(--my-bottom-color);
+      transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
 
     &::after {
-      transform: scaleX(1);
+      height: 2px;
+      background: var(--my-focused-color);
+      transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+      transform: scaleX(0);
     }
-  }
 
-  // &:focus-within {
-  //   &::after {
-  //     transform: scaleX(1);
-  //   }
-  // }
+    &--focused,
+    &:focus-within {
+      --my-outline-color: var(--my-focused-color);
+      --my-outline-hover-color: var(--my-focused-color);
 
-  &--auto-height {
-    height: auto;
-  }
+      outline: none;
 
-  &__body {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: stretch;
-    align-self: stretch;
-    // margin: 0 8px;
-    margin: 0;
-    // pointer-events: none;
+      &::after {
+        transform: scaleX(1);
+      }
+    }
 
-    // color: #f00;
+    // &:focus-within {
+    //   &::after {
+    //     transform: scaleX(1);
+    //   }
+    // }
 
-    // background-color: var(--control-fill-color);
-    // border: solid 1px;
-  }
+    &--auto-height {
+      height: auto;
+    }
 
-  &--flat {
-    padding-right: 0;
-    padding-left: 0;
-  }
+    &__body {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: stretch;
+      align-self: stretch;
+      // margin: 0 8px;
+      margin: 0;
+      // pointer-events: none;
 
-  &--filled {
-    background-color: var(--my-fill-color);
-    border-top-left-radius: var(--control-field-radius);
-    border-top-right-radius: var(--control-field-radius);
-    transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+      // color: #f00;
 
-    &:hover:not(:focus-within) {
-      background-color: var(--my-fill-hover-color);
+      // background-color: var(--control-fill-color);
+      // border: solid 1px;
     }
-  }
 
-  &--flat:hover,
-  &--filled:hover {
-    &::before {
-      border-color: var(--my-bottom-hover-color);
+    &--flat {
+      padding-right: 0;
+      padding-left: 0;
     }
-  }
 
-  &--flat:hover {
-    &::before {
-      height: 2px;
-      border-bottom-width: 2px;
-    }
-  }
+    &--filled {
+      background-color: var(--my-fill-color);
+      border-top-left-radius: var(--control-field-radius);
+      border-top-right-radius: var(--control-field-radius);
+      transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 
-  &--flat#{&}--disabled,
-  &--filled#{&}--disabled {
-    &::before {
-      border-bottom-style: dotted;
+      &:hover:not(:focus-within) {
+        background-color: var(--my-fill-hover-color);
+      }
     }
-  }
-
-  &--outlined {
-    // border: solid 1px var(--my-outline-color);
-    border-radius: var(--control-field-radius);
-    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 
-    &::before {
-      top: 0;
-      height: auto;
-      background: transparent;
-      border: solid 1px var(--my-outline-color);
-      border-radius: inherit;
+    &--flat:hover,
+    &--filled:hover {
+      &::before {
+        border-color: var(--my-bottom-hover-color);
+      }
     }
 
-    &:hover::before {
-      border-color: var(--my-outline-hover-color);
+    &--flat:hover {
+      &::before {
+        height: 2px;
+        border-bottom-width: 2px;
+      }
     }
 
-    &::after {
-      content: none;
+    &--flat#{&}--disabled,
+    &--filled#{&}--disabled {
+      &::before {
+        border-bottom-style: dotted;
+      }
     }
 
-    &:focus-within {
-      box-shadow: 0 0 1px var(--shadow-color),
-        0 0 2px 2px var(--focusShadow-color);
-      // border-color: var(--my-focused-color);
+    &--outlined {
+      // border: solid 1px var(--my-outline-color);
+      border-radius: var(--control-field-radius);
+      transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+
+      &::before {
+        top: 0;
+        height: auto;
+        background: transparent;
+        border: solid 1px var(--my-outline-color);
+        border-radius: inherit;
+      }
+
+      &:hover::before {
+        border-color: var(--my-outline-hover-color);
+      }
+
+      &::after {
+        content: none;
+      }
+
+      &:focus-within {
+        box-shadow: 0 0 1px var(--shadow-color),
+          0 0 2px 2px var(--focusShadow-color);
+        // border-color: var(--my-focused-color);
+      }
     }
-  }
 
-  &__adornment {
-    // pointer-events: none;
+    &__adornment {
+      // pointer-events: none;
 
-    $my-offset: 0.25em;
+      $my-offset: 0.25em;
 
-    &--start {
-      padding-right: $my-offset;
-    }
+      &--start {
+        padding-right: $my-offset;
+      }
 
-    &--end {
-      padding-left: $my-offset;
-    }
+      &--end {
+        padding-left: $my-offset;
+      }
 
-    .v-icon {
-      font-size: 1.2em;
+      .v-icon {
+        font-size: 1.2em;
+      }
     }
   }
 }

package/src/components/VControlField/VControlField.tsx

@@ -1,14 +1,14 @@
 import './VControlField.scss';
 import { computed, PropType, ref, defineComponent, VNodeChild } from 'vue';
+import { useParentFormNode } from '@fastkit/vue-form-control';
 import {
-  useParentFormNode,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
   TypedSlot,
   createPropsOptions,
   defineSlotsProps,
   renderSlotOrEmpty,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-utils';
 import {
   createControlProps,
   useControl,
@@ -21,7 +21,7 @@ import { CONTROL_LOADING_SPINNER_SIZES } from '../../schemes';
 
 const ADORNMENT_POSITIONS = ['start', 'end'] as const;
 
-export type AdornmentPosition = typeof ADORNMENT_POSITIONS[number];
+export type AdornmentPosition = (typeof ADORNMENT_POSITIONS)[number];
 
 export function createControlFieldProps() {
   return {