plugin-ui-for-kzt 0.0.22 → 0.0.23

package/src/components/BaseRadio/BaseRadio.vue

@@ -4,27 +4,23 @@
         :class="classList"
     >
         <div class="base-radio__wrapper" @click="handleToggle">
-  
-          <div class="base-radio__input-wrapper">
-            <input
-              v-model="model"
-              v-bind="inputAttrs"
-              type="radio"
-              class="base-radio__input"
-            />
-          </div>
-  
-            <div class="base-radio__icon" />
-  
+            <div class="base-radio__input-wrapper">
+                <input
+                    v-model="model"
+                    v-bind="inputAttrs"
+                    type="radio"
+                    class="base-radio__input"
+                />
+                <div class="base-radio__icon" />
+            </div>
             <div class="base-radio__label-wrapper">
-                      <span v-if="label" class="base-radio__label">{{ label }}</span>
-  
-                      <span v-if="subLabel" class="base-radio__sublabel">{{ subLabel }}</span>
-              </div>
+                <span v-if="label" class="base-radio__label">{{ label }}</span>
+                <span v-if="subLabel" class="base-radio__sublabel">{{ subLabel }}</span>
+            </div>
         </div>
     </div>
 </template>
-  
+
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue';
 import type { IBaseRadioProps } from '../../types/checkbox-radio';
@@ -32,19 +28,19 @@ import { useKitSize } from '../../composables/kit/size'
 import { useKitState } from '../../composables/kit/state'
 
 const props = withDefaults(defineProps<IBaseRadioProps>(), {
-size: 'medium',
+    size: 'medium',
 });
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
+    (e: 'update:modelValue', value: boolean): void;
 }>();
 
 const { sizeClassList } = useKitSize(props);
 const { stateClassList, stateAttrs } = useKitState(props);
 
 const model = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
 });
 
 const attrs = useAttrs();
@@ -58,226 +54,263 @@ return {
 });
 
 function handleToggle() {
-model.value = !model.value;
+    model.value = !model.value;
 }
 
 const classList = computed(() => [
-sizeClassList.value,
-stateClassList.value,
-{
-    '--is-active': model.value,
-    '--is-readonly': props.readonly,
-},
+    sizeClassList.value,
+    stateClassList.value,
+    {
+        '--is-active': model.value,
+        '--is-readonly': props.readonly,
+    },
 ]);
 </script>
-  
+
 <style scoped lang="scss">
 @import '../../styles/variables';
 @import '../../styles/root';
-  
-  .base-radio {
-      $item: &;
-  
-      &__wrapper {
-          display: flex;
-          column-gap: 10px;
-          width: 100%;
-          height: 100%;
-          cursor: pointer;
-      }
-  
-      &__icon {
-          position: relative;
-          display: flex;
-          flex-shrink: 0;
-          background: var(--primary-black-white);
-          border-radius: 50%;
-          transition:
-          border-color 0.3s ease,
-          background-color 0.3s ease;
-  
-          &::before,
-          &::after {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              width: 100%;
-              height: 100%;
-              content: '';
-              border-radius: 50%;
-              transform: translate3d(-50%, -50%, 0);
-          }
-  
-          &::before {
-              background: var(--primary-blue-50);
-              opacity: 0;
-              transition: opacity 0.3s ease;
-          }
-  
-          &::after {
-              background: var(--primary-blue);
-              opacity: 0;
-              transition:
-              opacity 0.3s ease,
-              transform 0.3s ease;
-              transform: translate3d(-50%, -50%, 0) scale(0.4);
-          }
-      }
-  
-      &.--is-readonly {
-          pointer-events: none;
-      }
-  
-      &.--medium-size {
-          #{$item} {
-              &__wrapper {
-                  column-gap: var(--spacing-m);
-              }
-  
-              &__label {
-                  font: var(--typography-text-m-medium);
-              }
-  
-              &__sublabel {
-                  font: var(--typography-text-s-regular);
-              }
-  
-              &__icon {
-                  width: 32px;
-                  height: 32px;
-                  border: 2px solid var(--primary-black-400);
-  
-                  &::before {
-                      width: calc(100% - 4px);
-                      height: calc(100% - 4px);
-                  }
-              }
-          }
-  
-          &.--is-active {
-              #{$item} {
-                  &__icon {
-                      &::after {
-                          width: 13px;
-                          height: 13px;
-                      }
-                  }
-              }
-          }
-      }
-  
-      &.--small-size {
-          #{$item} {
-              &__wrapper {
-                  column-gap: var(--spacing-s);
-              }
-  
-              &__label {
-                  font: var(--typography-text-s-medium);
-              }
-  
-              &__sublabel {
-                  font: var(--typography-text-xs-regular);
-              }
-  
-              &__icon {
-                  width: 24px;
-                  height: 24px;
-                  border: 1.5px solid var(--primary-black-400);
-  
-                  &::before {
-                      width: calc(100% - 2px);
-                      height: calc(100% - 2px);
-                  }
-              }
-          }
-  
-          &.--is-active {
-              #{$item} {
-                  &__icon {
-                      &::after {
-                          width: 9px;
-                          height: 9px;
-                      }
-                  }
-              }
-          }
-      }
-  
-      &__input-wrapper {
-          position: relative;
-          cursor: pointer;
-          transition: all 0.25s ease-out;
-  
-          @include focused {
-            outline: 4px solid var(--effects-primary-focus);
-          }
-      }
-  
-      &__input {
-          position: absolute;
-          inset: 0;
-          width: 100%;
-          height: 100%;
-          cursor: pointer;
-          opacity: 0 !important;
-      }
-  
-      &__label-wrapper {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          cursor: pointer;
-      }
-  
-      &__label {
-          color: var(--primary-text-primary);
-          user-select: none;
-      }
-  
-      &__sublabel {
-          color: var(--primary-text-tertiary);
-          user-select: none;
-      }
-  
-      @include hover {
-          #{$item} {
+
+.base-radio {
+    $item: &;
+
+    &__wrapper {
+        display: flex;
+        column-gap: 10px;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+    }
+
+    &__icon {
+        position: relative;
+        display: flex;
+        flex-shrink: 0;
+        background: var(--primary-black-white);
+        border-radius: 50%;
+        transition:
+        border-color 0.3s ease,
+        background-color 0.3s ease;
+
+        @include focused {
+            outline: 2px solid var(--effects-primary-focus);
+        }
+
+        &::before,
+        &::after {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            content: '';
+            border-radius: 50%;
+            transform: translate3d(-50%, -50%, 0);
+        }
+
+        &::before {
+            background: var(--primary-blue-50);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        &::after {
+            background: var(--primary-blue);
+            opacity: 0;
+            transition:
+            opacity 0.3s ease,
+            transform 0.3s ease;
+            transform: translate3d(-50%, -50%, 0) scale(0.4);
+        }
+    }
+
+    &.--is-readonly {
+        pointer-events: none;
+    }
+
+    &.--small-size {
+        #{$item} {
+            &__wrapper {
+                column-gap: var(--spacing-s);
+            }
+
+            &__label {
+                font: var(--typography-text-s-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-xs-regular);
+            }
+
+            &__icon {
+                width: 20px;
+                height: 20px;
+                border: 1.5px solid var(--primary-black-400);
+
+                &::before {
+                    width: calc(100% - 2px);
+                    height: calc(100% - 2px);
+                }
+            }
+        }
+
+        &.--is-active {
+            #{$item} {
+                &__icon {
+                    &::after {
+                        width: 7.5px;
+                        height: 7.5px;
+                    }
+                }
+            }
+        }
+    }
+
+    &.--medium-size {
+        #{$item} {
+            &__wrapper {
+                column-gap: var(--spacing-m);
+            }
+
+            &__label {
+                font: var(--typography-text-s-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-xs-regular);
+            }
+
+            &__icon {
+                width: 24px;
+                height: 24px;
+                border: 1.5px solid var(--primary-black-400);
+
+                &::before {
+                    width: calc(100% - 4px);
+                    height: calc(100% - 4px);
+                }
+            }
+        }
+
+        &.--is-active {
+            #{$item} {
+                &__icon {
+                    &::after {
+                        width: 9px;
+                        height: 9px;
+                    }
+                }
+            }
+        }
+    }
+
+    &.--large-size {
+        #{$item} {
+            &__wrapper {
+                column-gap: var(--spacing-l);
+            }
+
+            &__label {
+                font: var(--typography-text-m-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-s-regular);
+            }
+
             &__icon {
-              background-color: var(--primary-blue-100);
+                width: 32px;
+                height: 32px;
+                border: 2px solid var(--primary-black-400);
+
+                &::before {
+                    width: calc(100% - 2px);
+                    height: calc(100% - 2px);
+                }
+            }
+        }
+
+        &.--is-active {
+            #{$item} {
+                &__icon {
+                    &::after {
+                        width: 12.8px;
+                        height: 12.8px;
+                    }
+                }
+            }
+        }
+    }
+
+    &__input-wrapper {
+        position: relative;
+        cursor: pointer;
+        transition: all 0.25s ease-out;
+    }
+
+    &__input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0 !important;
+    }
+
+    &__label-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        cursor: pointer;
+    }
+
+    &__label {
+        color: var(--primary-text-primary);
+        user-select: none;
+    }
+
+    &__sublabel {
+        color: var(--primary-text-tertiary);
+        user-select: none;
+    }
+
+    @include hover {
+        #{$item} {
+            &__icon {
+                background-color: var(--primary-blue-100);
                 border-color: var(--primary-blue-deep);
             }
-          }
-      }
-  
-      &.--is-active {
-          #{$item} {
-              &__icon {
-                  border: 2px solid var(--primary-blue);
-  
-                  &::before {
-                      opacity: 1;
-                  }
-  
-                  &::after {
-                      opacity: 1;
-                      transform: translate3d(-50%, -50%, 0) scale(1);
-                  }
-              }
-          }
-      }
-  
-      @include is-disabled-state {
-          #{$item} {
-              &__icon {
-                  background: var(--primary-black-50);
-                  border: 1px solid var(--primary-black-300);
-  
-                  &::after {
-                      background: var(--primary-black-300);
-                  }
-              }
-          }
-      }
-  }
-  </style>
-  
+        }
+    }
+
+    &.--is-active {
+        #{$item} {
+            &__icon {
+                border: 2px solid var(--primary-blue);
+
+                &::before {
+                    opacity: 1;
+                }
+
+                &::after {
+                    opacity: 1;
+                    transform: translate3d(-50%, -50%, 0) scale(1);
+                }
+            }
+        }
+    }
+
+    @include is-disabled-state {
+        #{$item} {
+            &__icon {
+                background: var(--primary-black-50);
+                border: 1px solid var(--primary-black-300);
+
+                &::after {
+                    background: var(--primary-black-300);
+                }
+            }
+        }
+    }
+}
+</style>