@v1nt1248/3nclient-lib 0.1.26 → 0.1.28

package/src/components/ui3n-drop-files/ui3n-drop-files.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import type { Ui3nDropFilesEmits, Ui3nDropFilesProps, Ui3nDropFilesSlots } from './types';
 
-const props = withDefaults(
+withDefaults(
   defineProps<Ui3nDropFilesProps>(),
   {
     title: 'Upload',
@@ -67,7 +67,7 @@ const onDrop = (ev: DragEvent) => {
   <!-- eslint-disable max-len -->
   <div
     ref="wrapperElement"
-    :class="$style.dropFiles"
+    :class="$style.ui3nDropFiles"
     @dragenter="onDragenter"
     @dragleave="onDragleave"
   >
@@ -75,17 +75,17 @@ const onDrop = (ev: DragEvent) => {
 
     <div
       v-if="isOverDropPlace || isOverDropZone"
-      :class="$style.dropzone"
+      :class="$style.ui3nDropFilesDropzone"
       @dragenter="onDropzoneDragenter"
       @dragover="onDropzoneDragover"
       @dragleave="onDropzoneDragleave"
       @drop="onDrop"
     >
-      <div :class="$style.dropzoneBorder" />
-      <h3 :class="$style.dropzoneTitle">
+      <div :class="$style.ui3nDropFilesDropzoneBorder" />
+      <h3 :class="$style.ui3nDropFilesDropzoneTitle">
         {{ title }}
       </h3>
-      <div :class="$style.dropzoneIcon">
+      <div :class="$style.ui3nDropFilesDropzoneIcon">
         <svg
           :width="wrapperElementHeight / 2"
           :height="wrapperElementHeight / 2"
@@ -99,18 +99,18 @@ const onDrop = (ev: DragEvent) => {
           />
         </svg>
       </div>
-      <div v-if="props.text" :class="$style.dropzoneText">
-        {{ props.text }}
+      <div v-if="text" :class="$style.ui3nDropFilesDropzoneText">
+        {{ text }}
       </div>
-      <div v-if="props.additionalText" :class="$style.dropzoneText">
-        {{ props.additionalText }}
+      <div v-if="additionalText" :class="$style.ui3nDropFilesDropzoneText">
+        {{ additionalText }}
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" module>
-.dropFiles {
+.ui3nDropFiles {
   --dropzone-height: 0;
   --dropzone-title-font: 0;
 
@@ -120,7 +120,7 @@ const onDrop = (ev: DragEvent) => {
   height: 100%;
 }
 
-.dropzone {
+.ui3nDropFilesDropzone {
   box-sizing: border-box;
   position: absolute;
   background-color: var(--white-0);
@@ -133,7 +133,7 @@ const onDrop = (ev: DragEvent) => {
   z-index: 5;
 }
 
-.dropzoneBorder {
+.ui3nDropFilesDropzoneBorder {
   box-sizing: border-box;
   position: absolute;
   top: calc(var(--spacing-s) + 1px);
@@ -145,7 +145,7 @@ const onDrop = (ev: DragEvent) => {
   pointer-events: none;
 }
 
-.dropzoneTitle {
+.ui3nDropFilesDropzoneTitle {
   margin: 0 0 var(--dropzone-title-font);
   font-size: var(--dropzone-title-font);
   font-weight: 600;
@@ -153,7 +153,7 @@ const onDrop = (ev: DragEvent) => {
   pointer-events: none;
 }
 
-.dropzoneIcon {
+.ui3nDropFilesDropzoneIcon {
   position: relative;
   width: calc(var(--dropzone-height) * 0.4);
   height: calc(var(--dropzone-height) * 0.4);
@@ -165,7 +165,7 @@ const onDrop = (ev: DragEvent) => {
   pointer-events: none;
 }
 
-.dropzoneText {
+.ui3nDropFilesDropzoneText {
   margin-top: var(--spacing-ml);
   font-size: var(--font-12);
   line-height: var(--font-16);
@@ -173,7 +173,7 @@ const onDrop = (ev: DragEvent) => {
   color: var(--fill-pressed);
 }
 
-.dropzoneAdditional {
+.ui3nDropFilesDropzoneAdditional {
   margin-top: var(--spacing-xs);
   font-size: var(--font-12);
   font-weight: 500;

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

@@ -49,7 +49,7 @@ const onClick = (ev: Event) => {
 <template>
   <div
     ref="emojiElement"
-    :class="[$style.emoji, readonly && $style.readonly]"
+    :class="[$style.Ui3nEmoji, readonly && $style.readonly]"
     v-on="readonly ? {} : { 'click': onClick }"
   >
     {{ emojiData && emojiData.value }}
@@ -57,7 +57,7 @@ const onClick = (ev: Event) => {
 </template>
 
 <style lang="scss" module>
-.emoji {
+.Ui3nEmoji {
   --ui3n-emoji-size: 16px;
 
   display: flex;

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch, useCssModule } from 'vue';
 import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
 import Ui3nButton from '../ui3n-button/ui3n-button.vue';
 import type { Ui3nInputEmits, Ui3nInputProps } from './types';
@@ -8,6 +8,8 @@ import type { Ui3nInputEmits, Ui3nInputProps } from './types';
 const props = defineProps<Ui3nInputProps>();
 const emits = defineEmits<Ui3nInputEmits>();
 
+const $css = useCssModule();
+
 const inputElement = ref<HTMLInputElement | null>(null);
 const text = ref<string>('');
 const isFocused = ref(false);
@@ -20,6 +22,7 @@ const cssIconColor = computed(() => {
 
   return props.iconColor || 'var(--color-icon-control-primary-default)';
 });
+
 const isValid = computed(() => {
   if (!text.value) {
     return true;
@@ -28,28 +31,33 @@ const isValid = computed(() => {
   return !errorMessage.value;
 });
 
-onMounted(() => {
-  if (props.autofocus && inputElement.value) {
-    inputElement.value.focus();
-  }
+const mainCssClasses = computed(() => {
+  const val = [$css.ui3nInput];
+  props.label && val.push($css.withLabel);
+  props.icon && val.push($css.withIcon);
+  props.clearable && text.value && val.push($css.clearable);
+  props.disabled && val.push($css.disabled);
+  (!!errorMessage.value || props.displayStateMode === 'error') && val.push($css.error);
+  props.displayStateMode === 'success' && val.push($css.success);
 
-  emits('init', inputElement.value!);
+  return val;
 });
 
-watch(
-  () => props.modelValue,
-  val => {
-    text.value = val;
-    validate(text.value);
-  },
-  { immediate: true },
-);
+const iconCssClasses = computed(() => {
+  const val = [$css.ui3nInputIcon];
+  props.disabled && val.push($css.ui3nInputIconDisabled);
 
-watch(
-  () => isValid.value,
-  val => emits('update:valid', val),
-  { immediate: true },
-);
+  return val;
+});
+
+const messageCssClasses = computed(() => {
+  const val = [$css.ui3nInputFieldMessage];
+  (errorMessage.value || (props.displayStateMode === 'error' && !!props.displayStateMessage))
+  && val.push($css.ui3nInputErrorMessage);
+ props.displayStateMode === 'success' && props.displayStateMessage && val.push($css.ui3nInputSuccessMessage);
+
+  return val;
+});
 
 function onFocus(event: Event) {
   isFocused.value = true;
@@ -114,22 +122,37 @@ function validate(text: string) {
     }
   }
 }
+
+onMounted(() => {
+  if (props.autofocus && inputElement.value) {
+    inputElement.value.focus();
+  }
+
+  emits('init', inputElement.value!);
+});
+
+watch(
+  () => props.modelValue,
+  val => {
+    text.value = val;
+    validate(text.value);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => isValid.value,
+  val => emits('update:valid', val),
+  { immediate: true },
+);
 </script>
 
 <template>
   <div
     ref="wrapperElement"
-    :class="[
-      $style.input,
-      label && $style.withLabel,
-      icon && $style.withIcon,
-      clearable && text && $style.clearable,
-      disabled && $style.disabled,
-      (!!errorMessage || (displayStateMode === 'error')) && $style.error,
-      displayStateMode === 'success' && $style.success,
-    ]"
+    :class="mainCssClasses"
   >
-    <label v-if="label" :class="$style.label">
+    <label v-if="label" :class="$style.ui3nInputLabel">
       {{ label }}
     </label>
 
@@ -140,7 +163,7 @@ function validate(text: string) {
       :value="text"
       :placeholder="placeholder"
       :disabled="disabled"
-      :class="$style.field"
+      :class="$style.ui3nInputField"
       @input="onInput"
       @keydown.enter="onEnterKeydown"
       @keydown.escape="onEscapeKeydown"
@@ -154,7 +177,7 @@ function validate(text: string) {
       :icon="icon"
       :width="16"
       :height="16"
-      :class="[$style.icon, disabled && $style.iconDisabled]"
+      :class="iconCssClasses"
     />
 
     <ui3n-icon
@@ -163,7 +186,7 @@ function validate(text: string) {
       :width="16"
       :height="16"
       color="var(--success-content-default)"
-      :class="$style.successIcon"
+      :class="$style.ui3nInputSuccessIcon"
     />
 
     <ui3n-button
@@ -180,11 +203,7 @@ function validate(text: string) {
 
     <div
       v-if="errorMessage || displayStateMessage"
-      :class="[
-        $style.fieldMessage,
-        (errorMessage || (displayStateMode === 'error' && !!displayStateMessage)) && $style.errorMessage,
-        displayStateMode === 'success' && displayStateMessage && $style.successMessage,
-      ]"
+      :class="messageCssClasses"
     >
       {{ errorMessage || displayStateMessage }}
     </div>
@@ -194,7 +213,7 @@ function validate(text: string) {
 <style lang="scss" module>
 @import "../../assets/styles/mixins";
 
-.input {
+.ui3nInput {
   --ui3n-input-height: var(--spacing-l);
   --ui3n-input-padding-left: var(--spacing-s);
   --ui3n-input-padding-right: var(--spacing-s);
@@ -205,7 +224,7 @@ function validate(text: string) {
   border-radius: var(--spacing-xs);
 
   &:hover {
-    .field:not(:focus-within) {
+    .ui3nInputField:not(:focus-within) {
       background-color: var(--color-bg-control-secondary-hover);
 
       &::placeholder {
@@ -215,18 +234,18 @@ function validate(text: string) {
   }
 
   &:focus-within {
-    .field {
+    .ui3nInputField {
       background-color: var(--color-bg-control-secondary-focused);
       outline: 1px solid var(--color-border-control-accent-focused);
     }
 
-    .icon {
+    .ui3nInputIcon {
       color: v-bind(cssIconColor) !important;
     }
   }
 }
 
-.label {
+.ui3nInputLabel {
   display: block;
   width: 100%;
   font-size: var(--font-12);
@@ -236,7 +255,7 @@ function validate(text: string) {
   margin-bottom: var(--spacing-xs);
 }
 
-.field {
+.ui3nInputField {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -267,14 +286,14 @@ function validate(text: string) {
   }
 }
 
-.icon {
+.ui3nInputIcon {
   position: absolute;
   left: var(--half-size, 4px);
   top: calc((var(--ui3n-input-height) - 16px) / 2);
   color: var(--color-icon-control-secondary-default) !important;
 }
 
-.iconDisabled {
+.ui3nInputIconDisabled {
   color: v-bind(cssIconColor) !important;
 }
 
@@ -285,18 +304,18 @@ function validate(text: string) {
   z-index: 2;
 }
 
-.fieldMessage {
+.ui3nInputFieldMessage {
   font-style: italic;
   font-size: var(--font-10);
   font-weight: 400;
   line-height: 1.4;
   margin-top: 2px;
 
-  &.errorMessage {
+  &.ui3nInputErrorMessage {
     color: var(--error-content-default);
   }
 
-  &.successMessage {
+  &.ui3nInputSuccessMessage {
     color: var(--success-content-default)
   }
 }
@@ -310,22 +329,22 @@ function validate(text: string) {
 }
 
 .error {
-  .label {
+  .ui3nInputLabel {
     color: var(--error-content-default) !important;
   }
 
-  .field {
+  .ui3nInputField {
     outline: 1px solid var(--error-content-default) !important;
   }
 }
 
 .success {
-  .label {
+  .ui3nInputLabel {
     color: var(--success-content-default) !important;
   }
 }
 
-.successIcon {
+.ui3nInputSuccessIcon {
   position: absolute;
   right: var(--spacing-s);
   bottom: var(--spacing-s);
@@ -337,11 +356,11 @@ function validate(text: string) {
 }
 
 .withLabel {
-  .icon {
+  .ui3nInputIcon {
     top: calc((var(--ui3n-input-height) - 16px) / 2 + 20px);
   }
 
-  .successIcon {
+  .ui3nInputSuccessIcon {
     bottom: auto;
     top: calc((var(--ui3n-input-height) - 16px) / 2 + 20px);
   }

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup generic="T extends { id?: string }">
 import type { Ui3nListEmits, Ui3nListProps, Ui3nListSlots } from './types';
 
-const props = withDefaults(defineProps<Ui3nListProps<T>>(), {
+withDefaults(defineProps<Ui3nListProps<T>>(), {
   title: '',
   sticky: true,
   disabled: false,
@@ -12,16 +12,16 @@ defineSlots<Ui3nListSlots<T>>();
 </script>
 
 <template>
-  <div ref="listElement" :class="$style.list">
-    <div :class="[$style.title, sticky && $style.stickyTitle]">
+  <div ref="listElement" :class="$style.ui3nList">
+    <div :class="[$style.ui3nListTitle, sticky && $style.ui3nListTitleSticky]">
       <slot name="title">
-        <div v-if="props.title" :class="$style.titleContent">
+        <div v-if="title" :class="$style.ui3nListTitleContent">
           {{ title }}
         </div>
       </slot>
     </div>
 
-    <div :class="$style.content">
+    <div :class="$style.ui3nListContent">
       <div
         v-for="(item, index) in items"
         :key="item.id ?? index"
@@ -29,7 +29,7 @@ defineSlots<Ui3nListSlots<T>>();
       >
         <slot name="item" :item="item" :index="index">
           <div
-            :class="[$style.itemContent, disabled && $style.itemContentDisabled]"
+            :class="[$style.ui3nListItemContent, disabled && $style.ui3nListItemContentDisabled]"
             @click.stop="emits('select', { value: item, index })"
           >
             {{ item }}
@@ -41,7 +41,7 @@ defineSlots<Ui3nListSlots<T>>();
 </template>
 
 <style lang="scss" module>
-.list {
+.ui3nList {
   --ui3n-list-item-height: 28px;
   --ui3n-list-bg-color: transparent;
 
@@ -55,23 +55,23 @@ defineSlots<Ui3nListSlots<T>>();
   align-items: stretch;
 }
 
-.title {
+.ui3nListTitle {
   position: relative;
   top: 0;
   z-index: 1;
 }
 
-.stickyTitle {
+.ui3nListTitleSticky {
   position: sticky;
 }
 
-.content {
+.ui3nListContent {
   position: relative;
   flex-grow: 1;
 }
 
-.titleContent,
-.item {
+.ui3nListTitleContent,
+.ui3nListItem {
   position: relative;
   width: 100%;
   min-height: var(--ui3n-list-item-height);
@@ -81,20 +81,20 @@ defineSlots<Ui3nListSlots<T>>();
   align-items: center;
 }
 
-.titleContent {
+.ui3nListTitleContent {
   z-index: 1;
   font-size: 16px;
   font-weight: 600;
   background-color: var(--ui3n-list-bg-color);
 }
 
-.itemContent {
+.ui3nListItemContent {
   font-size: 14px;
   font-weight: 400;
   cursor: pointer;
 }
 
-.itemContentDisabled {
+.ui3nListItemContentDisabled {
   pointer-events: none;
   cursor: default;
 }

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

@@ -69,10 +69,10 @@ watch(
 </script>
 
 <template>
-  <div ref="menuElement" :class="$style.menu">
+  <div ref="menuElement" :class="$style.ui3nMenu">
     <div
       ref="menuTriggerElement"
-      :class="$style.trigger"
+      :class="$style.ui3nMenuTrigger"
       @click.stop="toggleMenu"
     >
       <slot />
@@ -83,8 +83,8 @@ watch(
       ref="menuContentElement"
       v-click-outside="onClickOutside"
       :style="floatingStyles"
-      :class="$style.content"
-      v-on="props.closeOnClick ? { click: onContentClick } : {}"
+      :class="$style.ui3nMenuContent"
+      v-on="closeOnClick ? { click: onContentClick } : {}"
     >
       <slot name="menu" />
     </div>
@@ -94,7 +94,7 @@ watch(
 <style lang="scss" module>
 @import "../../assets/styles/mixins";
 
-.menu {
+.ui3nMenu {
   --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
 
   position: relative;
@@ -102,12 +102,12 @@ watch(
   overflow: visible;
 }
 
-.trigger {
+.ui3nMenuTrigger {
   position: relative;
   max-width: max-content;
 }
 
-.content {
+.ui3nMenuContent {
   position: absolute;
   border-radius: 4px;
   background-color: var(--ui3n-menu-content-bg);