@energie360/ui-library 0.1.15 → 0.1.17

package/elements/checkbox/checkbox.scss

@@ -0,0 +1,150 @@
+@use '../../base/abstracts/' as a;
+
+.checkbox {
+  &.disabled {
+    .checkbox__label {
+      color: var(--e-c-mono-500);
+    }
+  }
+
+  &.error {
+    .checkbox__label {
+      color: var(--e-c-signal-03-700);
+    }
+
+    .checkbox__input-icon::after {
+      border: 2px solid var(--e-c-signal-03-700);
+    }
+
+    .checkbox__error-text {
+      display: block;
+    }
+  }
+
+  &.checkbox--error {
+    .checkbox__error-text {
+      display: block;
+    }
+  }
+}
+
+.checkbox__wrapper {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  column-gap: var(--e-space-1);
+}
+
+.checkbox__label {
+  @include a.type(200);
+
+  order: 2;
+  flex: 0 0 calc(100% - #{a.rem(34 + 4)});
+  padding-top: a.rem(5);
+}
+
+.checkbox__input {
+  z-index: 0;
+  order: 1;
+  position: relative;
+  width: a.rem(34);
+  height: a.rem(34);
+
+  input {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--e-brd-radius-1);
+
+    // States
+    &:hover:not(:disabled) + .checkbox__input-icon {
+      background-color: var(--e-c-mono-50);
+
+      &::after {
+        border-color: var(--e-c-primary-01-900);
+      }
+    }
+
+    &:active:not(:disabled) + .checkbox__input-icon {
+      background-color: var(--e-c-primary-01-50);
+    }
+
+    &:focus + .checkbox__input-icon {
+      &::after {
+        border-color: var(--e-c-primary-01-900);
+      }
+    }
+
+    &:checked + .checkbox__input-icon {
+      &::after {
+        border-color: var(--e-c-primary-01-900);
+        background-color: var(--e-c-primary-01-900);
+      }
+
+      svg {
+        position: relative;
+        z-index: 1;
+        fill: var(--e-c-mono-00);
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:disabled + .checkbox__input-icon {
+      &::after {
+        border-color: var(--e-c-mono-500);
+      }
+    }
+
+    &:disabled:checked + .checkbox__input-icon {
+      &::after {
+        background-color: var(--e-c-mono-500);
+      }
+    }
+  }
+}
+
+.checkbox__error-text {
+  @include a.type(50, strong);
+
+  order: 3;
+  display: none;
+  margin-top: var(--e-space-1);
+  padding-left: a.rem(34 + 4);
+  color: var(--e-c-signal-03-700);
+}
+
+.checkbox__input-icon {
+  z-index: -1;
+  position: absolute;
+  inset: 0;
+  border-radius: 100%;
+  background-color: transparent;
+  padding: a.rem(8);
+  transition: background-color var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+  svg {
+    display: block;
+    fill: transparent;
+    transition: fill var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: a.rem(18);
+    height: a.rem(18);
+    border: 2px solid var(--e-c-mono-700);
+    border-radius: var(--e-brd-radius-1);
+    transition:
+      border var(--e-trs-duration-faster) var(--e-trs-easing-default),
+      background var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+}

package/elements/checkbox/u-checkbox.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useId } from 'vue'
+
+interface Props {
+  name: string
+  label?: string
+  error: boolean
+  disabled: boolean
+  errorMessage?: string
+}
+
+const { errorMessage = '' } = defineProps<Props>()
+
+const model = defineModel<boolean>()
+const cId = `checkbox-${useId()}`
+</script>
+
+<template>
+  <div :class="['checkbox', { disabled, error }]">
+    <div class="checkbox__wrapper">
+      <label :for="cId" class="checkbox__label">
+        <slot name="label">{{ label }}</slot>
+      </label>
+
+      <div class="checkbox__input">
+        <input :id="cId" v-model="model" type="checkbox" :name :disabled v-bind="$attrs" />
+
+        <div class="checkbox__input-icon">
+          <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
+            <path d="m7 14.42-5-5 1.41-1.41L7 11.59 14.59 4 16 5.42l-9 9Z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="checkbox__error-text">
+      <slot name="error-message">{{ errorMessage }}</slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./checkbox.scss"></style>

package/elements/form/form.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .form {
   .form__messages {

package/elements/form-field/form-field-prefix-suffix.scss

@@ -48,6 +48,10 @@
     transform: translateY(-50%);
   }
 
+  .suffix-action {
+    display: flex;
+  }
+
   .suffix-text {
     @include a.type(200);
   }
@@ -70,6 +74,7 @@
     }
   }
 
+  &:has(.suffix-action),
   &:has(.suffix-text) {
     // A suffix only makes sense for an <input>. That's why we select only input here.
     .control input {

package/elements/index.js

@@ -19,3 +19,6 @@ export { default as USpectro } from './spectro/u-spectro.vue'
 export { default as UTextField } from './text-field/u-text-field.vue'
 export { default as UTextarea } from './textarea/u-textarea.vue'
 export { default as UToggleSwitch } from './toggle-switch/u-toggle-switch.vue'
+export { default as UCheckbox } from './checkbox/u-checkbox.vue'
+export { default as USelectTile } from './select-tile/u-select-tile.vue'
+export { default as USelectTiles } from './select-tiles/u-select-tiles.vue'

package/elements/radio/radio.scss

@@ -1,7 +1,96 @@
+@use '../../base/abstracts/' as a;
+
 .radio {
-  display: block;
+  @include a.type(200);
+
+  display: inline-flex;
+  position: relative;
+  column-gap: var(--e-space-1);
+  align-items: center;
+
+  &:hover:not(.disabled) {
+    .radio__icon::before {
+      background-color: var(--e-c-primary-01-50);
+    }
+
+    .radio__icon::after {
+      border-color: var(--e-c-secondary-01-900);
+    }
+  }
+
+  &.disabled {
+    pointer-events: none;
+    color: var(--e-c-mono-500);
+  }
 }
 
 .radio__control {
-  appearance: radio;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: a.rem(40);
+  height: a.rem(40);
+  border-radius: 100%;
+
+  &:focus + .radio__icon {
+    &::before {
+      background-color: var(--e-c-primary-01-50);
+    }
+  }
+
+  &:active + .radio__icon {
+    &::before {
+      background-color: var(--e-c-primary-01-100);
+    }
+  }
+
+  &:checked + .radio__icon {
+    &::after {
+      border-color: var(--e-c-secondary-01-900);
+      border-width: 5px;
+    }
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    + .radio__icon::after {
+      border-color: var(--e-c-mono-200);
+    }
+
+    &:checked + .radio__icon::after {
+      border-width: 2px;
+      background-color: var(--e-c-mono-200);
+      box-shadow: 0 0 0 3px var(--e-c-mono-00) inset;
+    }
+  }
+}
+
+.radio__icon {
+  position: relative;
+  display: inline-block;
+  width: a.rem(40);
+  height: a.rem(40);
+  line-height: 1;
+  vertical-align: middle;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 100%;
+    transition: background a.$trs-default;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - #{a.rem(10)});
+    left: calc(50% - #{a.rem(10)});
+    width: a.rem(20);
+    height: a.rem(20);
+    border-radius: 100%;
+    border: 2px solid var(--e-c-mono-900);
+    transition: border a.$trs-default;
+  }
 }

package/elements/radio/u-radio.vue

@@ -16,8 +16,7 @@ const { onChange } = useRadio({ model })
 </script>
 
 <template>
-  <div class="radio">
-    <label>{{ label }}</label>
+  <label :class="['radio', { checked: model === value, disabled }]">
     <input
       v-model="model"
       class="radio__control"
@@ -27,7 +26,11 @@ const { onChange } = useRadio({ model })
       :disabled
       @change="onChange"
     />
-  </div>
+
+    <span class="radio__icon"></span>
+
+    <span>{{ label }}</span>
+  </label>
 </template>
 
 <style lang="scss" src="./radio.scss"></style>

package/elements/radio-group/radio-group.scss

@@ -1,3 +1,31 @@
+@use '../../base/abstracts/' as a;
+
 .radio-group {
   display: block;
+
+  &.error {
+    .radio-group__error-message {
+      display: block;
+    }
+  }
+}
+
+.radio-group__title {
+  @include a.type(200, strong);
+
+  margin-bottom: var(--e-space-3);
+}
+
+.radio-group__items {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: var(--e-space-3) var(--e-space-10);
+}
+
+.radio-group__error-message {
+  @include a.type(50, strong);
+
+  display: none;
+  margin-top: var(--e-space-1);
+  color: var(--e-c-signal-03-700);
 }

package/elements/radio-group/u-radio-group.vue

@@ -1,15 +1,35 @@
 <script setup lang="ts">
 import { useRadioGroup } from './radio-group-composables'
 
+interface Props {
+  title?: string
+  error?: boolean
+  errorMessage?: string
+}
+
+defineProps<Props>()
+
 const model = defineModel<string>()
 
 useRadioGroup({ model })
 </script>
 
 <template>
-  <div class="radio-group">
-    <slot></slot>
-  </div>
+  <fieldset :class="['radio-group', { error }]">
+    <legend v-if="title" class="radio-group__title">
+      <h3>
+        <slot name="title">{{ title }}</slot>
+      </h3>
+    </legend>
+
+    <div class="radio-group__items">
+      <slot></slot>
+    </div>
+
+    <div class="radio-group__error-message">
+      <slot name="error-message">{{ errorMessage }}</slot>
+    </div>
+  </fieldset>
 </template>
 
 <style lang="scss" src="./radio-group.scss"></style>

package/elements/select-chip/select-chip.scss

@@ -14,5 +14,6 @@
     position: absolute;
     inset: 0;
     cursor: pointer;
+    border-radius: 24px;
   }
 }

package/elements/select-chip/u-select-chip.vue

@@ -29,7 +29,7 @@ const classes = computed(() =>
 <template>
   <div class="select-chip">
     <label :class="classes" class="select-chip__button button">
-      <UIcon v-if="model === value" name="mini-check"></UIcon>
+      <UIcon v-if="model === value" name="mini-check" />
       {{ label }}
 
       <slot>
@@ -39,6 +39,6 @@ const classes = computed(() =>
   </div>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 @use './select-chip.scss';
 </style>

package/elements/select-chips/select-chips.scss

@@ -1,5 +1,23 @@
+@use '../../base/abstracts/' as a;
+
 .select-chips {
+  &.error {
+    .select-chips__error-message {
+      display: block;
+    }
+  }
+}
+
+.select-chips__items {
   display: flex;
   flex-wrap: wrap;
   gap: var(--e-space-6);
 }
+
+.select-chips__error-message {
+  @include a.type(50, strong);
+
+  display: none;
+  margin-top: var(--e-space-1);
+  color: var(--e-c-signal-03-700);
+}

package/elements/select-chips/u-select-chips.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { useRadioGroup } from '../radio-group/radio-group-composables'
 
+interface Props {
+  error?: boolean
+  errorMessage?: string
+}
+
+defineProps<Props>()
+
 const model = defineModel<string>()
 
 useRadioGroup({
@@ -10,11 +17,17 @@ useRadioGroup({
 </script>
 
 <template>
-  <div class="select-chips">
-    <slot></slot>
+  <div :class="['select-chips', { error }]">
+    <div class="select-chips__items">
+      <slot></slot>
+    </div>
+
+    <div class="select-chips__error-message">
+      <slot name="error-message">{{ errorMessage }}</slot>
+    </div>
   </div>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 @use './select-chips.scss';
 </style>

package/elements/select-tile/select-tile.scss

@@ -0,0 +1,205 @@
+@use '../../base/abstracts/' as a;
+
+$transition-options: var(--e-trs-duration-faster) var(--e-trs-easing-default);
+$trs-pressed: var(--e-trs-duration-fastest) cubic-bezier(0.34, 1.56, 0.64, 1); // https://easings.net/#easeOutBack
+
+.select-tile {
+  position: relative;
+  display: flex;
+  height: 100%;
+  column-gap: var(--e-space-4);
+  border-radius: var(--e-brd-radius-2);
+  border: 2px solid var(--e-c-secondary-01-100);
+  padding: var(--e-space-6);
+  transition:
+    border $transition-options,
+    background $transition-options,
+    transform $trs-pressed;
+  cursor: pointer;
+
+  // CHECKED/ACTIVE
+  &.checked {
+    background-color: var(--e-c-primary-01-50);
+    border-color: var(--e-c-primary-01-500);
+
+    .select-tile__icon-wrapper,
+    .select-tile__label-wrapper {
+      color: var(--e-c-primary-01-900);
+    }
+
+    .select-tile__text-wrapper {
+      color: var(--e-c-primary-01-700);
+    }
+
+    .select-tile__radio-symbol {
+      &::after {
+        border-color: var(--e-c-secondary-01-900);
+        border-width: 5px;
+      }
+    }
+  }
+
+  // HOVER
+  &:hover {
+    border-color: var(--e-c-primary-01-200);
+
+    .select-tile__radio-symbol {
+      &::before {
+        background-color: var(--e-c-primary-01-50);
+      }
+
+      &::after {
+        border-color: var(--e-c-secondary-01-900);
+      }
+    }
+
+    &.checked {
+      border-color: var(--e-c-primary-01-900);
+
+      .select-tile__label-wrapper,
+      .select-tile__icon-wrapper {
+        color: var(--e-c-primary-01-700);
+      }
+
+      .select-tile__text-wrapper {
+        color: var(--e-c-primary-01-500);
+      }
+    }
+  }
+
+  // PRESSED
+  &:active {
+    background-color: var(--e-c-primary-01-50);
+    transform: scale(0.98);
+
+    .select-tile__label-wrapper,
+    .select-tile__icon-wrapper {
+      color: var(--e-c-primary-01-700);
+    }
+
+    .select-tile__text-wrapper {
+      color: var(--e-c-primary-01-500);
+    }
+
+    .select-tile__radio-symbol {
+      &::before {
+        background-color: var(--e-c-primary-01-100);
+      }
+
+      &::after {
+        border-color: var(--e-c-secondary-01-900);
+      }
+    }
+
+    &.checked {
+      background-color: var(--e-c-primary-01-100);
+      border-color: var(--e-c-primary-01-500);
+
+      .select-tile__radio-symbol {
+        &::before {
+          background-color: var(--e-c-primary-01-50);
+        }
+      }
+    }
+  }
+
+  // DISABLED
+  &.disabled {
+    border-color: var(--e-c-mono-500);
+    pointer-events: none;
+
+    .select-tile__radio-symbol {
+      &::after {
+        border-color: var(--e-c-mono-200);
+      }
+    }
+
+    .select-tile__label-wrapper,
+    .select-tile__icon-wrapper {
+      color: var(--e-c-mono-500);
+    }
+
+    .select-tile__text-wrapper {
+      color: var(--e-c-mono-200);
+    }
+
+    &.checked {
+      background-color: var(--e-c-mono-50);
+
+      .select-tile__radio-symbol {
+        &::after {
+          border-width: 2px;
+          background-color: var(--e-c-mono-200);
+          box-shadow: 0 0 0 3px var(--e-c-mono-50) inset;
+        }
+      }
+    }
+  }
+}
+
+.select-tile__radio-symbol {
+  position: relative;
+  display: block;
+  width: a.rem(40);
+  height: a.rem(40);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 100%;
+    transition: background $transition-options;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - #{a.rem(10)});
+    left: calc(50% - #{a.rem(10)});
+    width: a.rem(20);
+    height: a.rem(20);
+    border-radius: 100%;
+    border: 2px solid var(--e-c-mono-900);
+    transition: border $transition-options;
+  }
+}
+
+.select-tile__icon-wrapper {
+  margin-bottom: var(--e-space-4);
+  transition: color $transition-options;
+}
+
+.select-tile__radio-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-tile__label-wrapper {
+  transition: color $transition-options;
+
+  @include a.type(300, strong);
+
+  + .select-tile__text-wrapper {
+    margin-top: var(--e-space-1);
+  }
+}
+
+.select-tile__text-wrapper {
+  color: var(--e-c-mono-700);
+  transition: color $transition-options;
+
+  @include a.type(300, weak);
+}
+
+.select-tile__input-wrapper {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+
+  input {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--e-brd-radius-1);
+  }
+}