@v1nt1248/3nclient-lib 0.2.32 → 0.2.34

package/src/components/ui3n-button/ui3n-button.vue

@@ -1,83 +1,83 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch, useCssModule } from 'vue';
-import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
-import Ui3nRipple from '../../directives/ui3n-ripple';
-import type { Ui3nButtonEmits, Ui3nButtonProps, Ui3nButtonEventName } from './types';
-
-const vUi3nRipple = Ui3nRipple;
-
-const props = withDefaults(
-  defineProps<Ui3nButtonProps>(),
-  {
-    type: 'primary',
-    size: 'regular',
-    iconPosition: 'right',
-    disabled: false,
-  },
-);
-const emits = defineEmits<Ui3nButtonEmits>();
-
-const $css = useCssModule();
-
-const buttonEl = ref<HTMLButtonElement | null>(null);
-
-const mainCssClasses = computed(() => {
-  const val = [$css.ui3nButton, $css[props.size], $css[props.type]];
-
-  props.block && props.type !== 'icon' && val.push($css.block);
-  props.icon && val.push($css[`withIcon-${props.iconPosition}`]);
-  props.elevation && val.push($css.elevation);
-
-  return val;
-});
-
-async function handleButtonEvent(eventName: Ui3nButtonEventName, value?: Event) {
-  if (['init', 'enter'].includes(eventName)) {
-    // @ts-ignore
-    emits(eventName, buttonEl.value);
-  } else {
-    // @ts-ignore
-    emits(eventName, value!);
+  import { computed, onMounted, ref, watch, useCssModule } from 'vue';
+  import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
+  import Ui3nRipple from '../../directives/ui3n-ripple';
+  import type { Ui3nButtonEmits, Ui3nButtonProps, Ui3nButtonEventName } from './types';
+
+  const vUi3nRipple = Ui3nRipple;
+
+  const props = withDefaults(
+    defineProps<Ui3nButtonProps>(),
+    {
+      type: 'primary',
+      size: 'regular',
+      iconPosition: 'right',
+      disabled: false,
+    },
+  );
+  const emits = defineEmits<Ui3nButtonEmits>();
+
+  const $css = useCssModule();
+
+  const buttonEl = ref<HTMLButtonElement | null>(null);
+
+  const mainCssClasses = computed(() => {
+    const val = [$css.ui3nButton, $css[props.size], $css[props.type]];
+
+    props.block && props.type !== 'icon' && val.push($css.block);
+    props.icon && val.push($css[`withIcon-${props.iconPosition}`]);
+    props.elevation && val.push($css.elevation);
+
+    return val;
+  });
+
+  async function handleButtonEvent(eventName: Ui3nButtonEventName, value?: Event) {
+    if (['init', 'enter'].includes(eventName)) {
+      // @ts-ignore
+      emits(eventName, buttonEl.value);
+    } else {
+      // @ts-ignore
+      emits(eventName, value!);
+    }
   }
-}
 
-watch(
-  [() => props.color, () => props.textColor],
-  (newValue: [string | undefined, string | undefined], prevValue: [string | undefined, string | undefined]) => {
+  watch(
+    [() => props.color, () => props.textColor],
+    (newValue: [string | undefined, string | undefined], prevValue: [string | undefined, string | undefined]) => {
+      if (!buttonEl.value) return;
+
+      const [prevColor, prevTextColor] = prevValue;
+      const [color, textColor] = newValue;
+
+      (props.type === 'custom' || props.type === 'icon')
+      && color !== prevColor
+      && buttonEl.value.style.setProperty(
+        '--ui3n-button-bg-color-custom',
+        color ?? 'var(--color-bg-button-primary-default)',
+      );
+
+      props.type === 'custom'
+      && textColor !== prevTextColor
+      && buttonEl.value.style.setProperty(
+        '--ui3n-button-text-color-custom',
+        textColor ?? 'var(--color-text-button-primary-default',
+      );
+    },
+  );
+
+  onMounted(() => {
     if (!buttonEl.value) return;
 
-    const [prevColor, prevTextColor] = prevValue;
-    const [color, textColor] = newValue;
-
     (props.type === 'custom' || props.type === 'icon')
-    && color !== prevColor
-    && buttonEl.value.style.setProperty(
-      '--ui3n-button-bg-color-custom',
-      color ?? 'var(--color-bg-button-primary-default)',
-    );
+    && props.color
+    && buttonEl.value.style.setProperty('--ui3n-button-bg-color-custom', props.color);
 
     props.type === 'custom'
-    && textColor !== prevTextColor
-    && buttonEl.value.style.setProperty(
-      '--ui3n-button-text-color-custom',
-      textColor ?? 'var(--color-text-button-primary-default',
-    );
-  },
-);
-
-onMounted(() => {
-  if (!buttonEl.value) return;
-
-  (props.type === 'custom' || props.type === 'icon')
-  && props.color
-  && buttonEl.value.style.setProperty('--ui3n-button-bg-color-custom', props.color);
-
-  props.type === 'custom'
-  && props.textColor
-  && buttonEl.value.style.setProperty('--ui3n-button-text-color-custom', props.textColor);
-
-  handleButtonEvent('init');
-});
+    && props.textColor
+    && buttonEl.value.style.setProperty('--ui3n-button-text-color-custom', props.textColor);
+
+    handleButtonEvent('init');
+  });
 </script>
 
 <template>
@@ -101,206 +101,209 @@ onMounted(() => {
       :color="iconColor || 'var(--color-text-button-primary-default)'"
     />
 
-    <span v-if="type !== 'icon'" :class="$style.text">
+    <span
+      v-if="type !== 'icon'"
+      :class="$style.text"
+    >
       <slot />
     </span>
   </button>
 </template>
 
 <style lang="scss" module>
-@use '../../assets/styles/mixins' as mixins;
-
-.ui3nButton {
-  --ui3n-button-padding: var(--spacing-m);
-  --ui3n-button-text-size: var(--font-12);
-  --ui3n-button-text-color-custom: var(--color-text-button-primary-default);
-  --ui3n-button-bg-color-custom: var(--color-bg-button-primary-default);
-
-  position: relative;
-  width: max-content;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  column-gap: var(--spacing-xs);
-  border: none;
-  outline: none;
-  border-radius: var(--spacing-xs);
-  font-size: var(--ui3n-button-text-size);
-  font-weight: 600;
-  user-select: none;
-  overflow: hidden;
-
-  &:not([disabled]) {
-    cursor: pointer;
+  @use '../../assets/styles/mixins' as mixins;
+
+  .ui3nButton {
+    --ui3n-button-padding: var(--spacing-m);
+    --ui3n-button-text-size: var(--font-12);
+    --ui3n-button-text-color-custom: var(--color-text-button-primary-default);
+    --ui3n-button-bg-color-custom: var(--color-bg-button-primary-default);
+
+    position: relative;
+    width: max-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    column-gap: var(--spacing-xs);
+    border: none;
+    outline: none;
+    border-radius: var(--spacing-xs);
+    font-size: var(--ui3n-button-text-size);
+    font-weight: 600;
+    user-select: none;
+    overflow: hidden;
+
+    &:not([disabled]) {
+      cursor: pointer;
+    }
   }
-}
 
-.regular {
-  height: var(--spacing-l);
-  padding: 0 var(--spacing-m);
+  .regular {
+    height: var(--spacing-l);
+    padding: 0 var(--spacing-m);
 
-  &.withIcon-left {
-    padding-left: var(--spacing-s);
-  }
+    &.withIcon-left {
+      padding-left: var(--spacing-s);
+    }
 
-  &.withIcon-right {
-    padding-right: var(--spacing-s);
+    &.withIcon-right {
+      padding-right: var(--spacing-s);
+    }
   }
-}
 
-.small {
-  height: var(--spacing-ml);
-  padding: 0 var(--spacing-s);
+  .small {
+    height: var(--spacing-ml);
+    padding: 0 var(--spacing-s);
 
-  &.withIcon-left {
-    padding-left: var(--spacing-xs);
-  }
+    &.withIcon-left {
+      padding-left: var(--spacing-xs);
+    }
 
-  &.withIcon-right {
-    padding-right: var(--spacing-xs);
+    &.withIcon-right {
+      padding-right: var(--spacing-xs);
+    }
   }
-}
 
-.block {
-  width: 100%;
-}
+  .block {
+    width: 100%;
+  }
 
-.primary {
-  background: var(--color-bg-button-primary-default);
-  color: var(--color-text-button-primary-default);
+  .primary {
+    background: var(--color-bg-button-primary-default);
+    color: var(--color-text-button-primary-default);
 
-  &:hover {
-    background: var(--color-bg-button-primary-hover);
-    color: var(--color-text-button-primary-hover);
-  }
+    &:hover {
+      background: var(--color-bg-button-primary-hover);
+      color: var(--color-text-button-primary-hover);
+    }
 
-  &:focus {
-    outline: 1px solid var(--color-border-button-primary-focused);
-  }
+    &:focus {
+      outline: 1px solid var(--color-border-button-primary-focused);
+    }
 
-  &[disabled] {
-    background: var(--color-bg-button-primary-disabled);
-    color: var(--color-text-button-primary-disabled);
-    pointer-events: none;
+    &[disabled] {
+      background: var(--color-bg-button-primary-disabled);
+      color: var(--color-text-button-primary-disabled);
+      pointer-events: none;
+    }
   }
-}
 
-.secondary {
-  background: var(--color-bg-button-secondary-default);
-  color: var(--color-text-button-secondary-default);
+  .secondary {
+    background: var(--color-bg-button-secondary-default);
+    color: var(--color-text-button-secondary-default);
 
-  &:hover {
-    background: var(--color-bg-button-secondary-hover);
-    color: var(--color-text-button-secondary-hover);
-  }
+    &:hover {
+      background: var(--color-bg-button-secondary-hover);
+      color: var(--color-text-button-secondary-hover);
+    }
 
-  &:focus {
-    outline: 1px solid var(--color-border-button-secondary-focused);
-  }
+    &:focus {
+      outline: 1px solid var(--color-border-button-secondary-focused);
+    }
 
-  &[disabled] {
-    background: var(--color-bg-button-secondary-disabled);
-    color: var(--color-text-button-secondary-disabled);
-    pointer-events: none;
+    &[disabled] {
+      background: var(--color-bg-button-secondary-disabled);
+      color: var(--color-text-button-secondary-disabled);
+      pointer-events: none;
+    }
   }
-}
-
-.tertiary {
-  background: transparent;
-  color: var(--color-text-button-secondary-default);
-  line-height: calc(var(--ui3n-button-text-size) * 1.25);
-  padding: 0;
 
-  &:hover {
+  .tertiary {
     background: transparent;
-    color: var(--color-text-button-secondary-hover);
-    text-decoration: underline;
-    cursor: pointer;
-  }
+    color: var(--color-text-button-secondary-default);
+    line-height: calc(var(--ui3n-button-text-size) * 1.25);
+    padding: 0;
 
-  &:focus {
-    outline: 1px solid var(--color-border-button-secondary-focused);
+    &:hover {
+      background: transparent;
+      color: var(--color-text-button-secondary-hover);
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: 1px solid var(--color-border-button-secondary-focused);
+    }
+
+    &[disabled] {
+      background: transparent;
+      color: var(--color-text-button-secondary-disabled);
+      pointer-events: none;
+    }
   }
 
-  &[disabled] {
-    background: transparent;
-    color: var(--color-text-button-secondary-disabled);
-    pointer-events: none;
+  .icon {
+    --ui3n-button-icon-bg-color: hsl(from var(--ui3n-button-bg-color-custom) h s calc(l - 10));
+
+    background: var(--ui3n-button-bg-color-custom);
+    color: var(--ui3n-button-text-color-custom);
+    border-radius: 50%;
+
+    &.regular {
+      min-width: var(--spacing-l);
+      width: var(--spacing-l);
+      padding: 0;
+    }
+
+    &.small {
+      min-width: var(--spacing-ml);
+      width: var(--spacing-ml);
+      padding: 0;
+    }
+
+    &:hover {
+      background: var(--ui3n-button-icon-bg-color);
+    }
+
+    &:focus {
+      outline: 1px solid hsl(from var(--ui3n-button-icon-bg-color) h s calc(l - 10));
+    }
+
+    &[disabled] {
+      opacity: 0.7;
+      pointer-events: none;
+    }
   }
-}
 
-.icon {
-  --ui3n-button-icon-bg-color: hsl(from var(--ui3n-button-bg-color-custom) h s calc(l - 10));
+  .custom {
+    --ui3n-button-custom-bg-color: hsl(from var(--ui3n-button-bg-color-custom) h s calc(l - 10));
 
-  background: var(--ui3n-button-bg-color-custom);
-  color: var(--ui3n-button-text-color-custom);
-  border-radius: 50%;
+    background: var(--ui3n-button-bg-color-custom);
+    color: var(--ui3n-button-text-color-custom);
 
-  &.regular {
-    min-width: var(--spacing-l);
-    width: var(--spacing-l);
-    padding: 0;
-  }
+    &:hover {
+      background: var(--ui3n-button-custom-bg-color);
+    }
 
-  &.small {
-    min-width: var(--spacing-ml);
-    width: var(--spacing-ml);
-    padding: 0;
-  }
+    &:focus {
+      outline: 1px solid hsl(from var(--ui3n-button-custom-bg-color) h s calc(l - 10));
+    }
 
-  &:hover {
-    background: var(--ui3n-button-icon-bg-color);
+    &[disabled] {
+      opacity: 0.7;
+      pointer-events: none;
+    }
   }
 
-  &:focus {
-    outline: 1px solid hsl(from var(--ui3n-button-icon-bg-color) h s calc(l - 10));
+  .withIcon-left {
+    flex-direction: row;
   }
 
-  &[disabled] {
-    opacity: 0.7;
-    pointer-events: none;
+  .withIcon-right {
+    flex-direction: row-reverse;
   }
-}
-
-.custom {
-  --ui3n-button-custom-bg-color: hsl(from var(--ui3n-button-bg-color-custom) h s calc(l - 10));
 
-  background: var(--ui3n-button-bg-color-custom);
-  color: var(--ui3n-button-text-color-custom);
-
-  &:hover {
-    background: var(--ui3n-button-custom-bg-color);
-  }
-
-  &:focus {
-    outline: 1px solid hsl(from var(--ui3n-button-custom-bg-color) h s calc(l - 10));
+  .buttonIcon {
+    pointer-events: none;
   }
 
-  &[disabled] {
-    opacity: 0.7;
+  .text {
+    display: inline-block;
+    max-width: 100%;
     pointer-events: none;
   }
-}
-
-.withIcon-left {
-  flex-direction: row;
-}
-
-.withIcon-right {
-  flex-direction: row-reverse;
-}
 
-.buttonIcon {
-  pointer-events: none;
-}
-
-.text {
-  display: inline-block;
-  max-width: 100%;
-  pointer-events: none;
-}
-
-.elevation {
-  @include mixins.elevation();
-}
+  .elevation {
+    @include mixins.elevation();
+  }
 </style>

package/src/components/ui3n-checkbox/ui3n-checkbox.vue

@@ -138,12 +138,22 @@
         xmlns="http://www.w3.org/2000/svg"
         :class="$style.ui3nCheckboxIcon"
       >
-        <g id="SVGRepo_bgCarrier" stroke-width="0" />
-        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
+        <g
+          id="SVGRepo_bgCarrier"
+          stroke-width="0"
+        />
+        <g
+          id="SVGRepo_tracerCarrier"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
         <g id="SVGRepo_iconCarrier">
           <path
-d="M20.0001 7L9.0001 18L4 13" stroke="#fff" stroke-width="3" stroke-linecap="round"
-                stroke-linejoin="round"
+            d="M20.0001 7L9.0001 18L4 13"
+            stroke="#fff"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           />
         </g>
       </svg>
@@ -157,10 +167,23 @@ d="M20.0001 7L9.0001 18L4 13" stroke="#fff" stroke-width="3" stroke-linecap="rou
         xmlns="http://www.w3.org/2000/svg"
         :class="$style.ui3nCheckboxIcon"
       >
-        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+        <g
+          id="SVGRepo_bgCarrier"
+          stroke-width="0"
+        />
+        <g
+          id="SVGRepo_tracerCarrier"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
         <g id="SVGRepo_iconCarrier">
-          <path d="M7 12L17 12" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+          <path
+            d="M7 12L17 12"
+            stroke="#fff"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </g>
       </svg>
     </div>