@v1nt1248/3nclient-lib 0.2.33 → 0.2.34

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

@@ -1,101 +1,105 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { patchTextareaMaxRowsSupport } from '@/utils';
-import type { Ui3nTextEmits, Ui3nTextProps } from './types';
-
-const props = withDefaults(
-  defineProps<Ui3nTextProps>(),
-  {
-    rows: 6,
-    maxRows: 6,
-    label: '',
-    placeholder: '',
-    disabled: false,
-  },
-);
-const emit = defineEmits<Ui3nTextEmits>();
-
-const textareaElement = ref<HTMLTextAreaElement | null>(null);
-const isFocused = ref(false);
-const errorMessage = ref('');
-
-const isValid = computed(() => {
-  if (!props.text) {
-    return true;
-  }
-
-  return !errorMessage.value;
-});
-
-onMounted(() => {
-  if (textareaElement.value) {
-    patchTextareaMaxRowsSupport(textareaElement.value!);
-    emit('init', textareaElement.value!);
-  }
-});
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { patchTextareaMaxRowsSupport } from '@/utils';
+  import type { Ui3nTextEmits, Ui3nTextProps } from './types';
+
+  const props = withDefaults(
+    defineProps<Ui3nTextProps>(),
+    {
+      rows: 6,
+      maxRows: 6,
+      label: '',
+      placeholder: '',
+      disabled: false,
+    },
+  );
+  const emit = defineEmits<Ui3nTextEmits>();
+
+  const textareaElement = ref<HTMLTextAreaElement | null>(null);
+  const isFocused = ref(false);
+  const errorMessage = ref('');
+
+  const isValid = computed(() => {
+    if (!props.text) {
+      return true;
+    }
 
-watch(
-  () => isValid.value,
-  val => emit('update:valid', val),
-  { immediate: true },
-);
+    return !errorMessage.value;
+  });
 
-function validate(text: string) {
-  errorMessage.value = '';
-  if (props.rules && props.rules.length) {
-    for (const validateFunction of props.rules) {
-      if (typeof validateFunction === 'function') {
-        const res = validateFunction(text);
-        if (typeof res === 'string') {
-          errorMessage.value += res;
+  onMounted(() => {
+    if (textareaElement.value) {
+      patchTextareaMaxRowsSupport(textareaElement.value!);
+      emit('init', textareaElement.value!);
+    }
+  });
+
+  watch(
+    () => isValid.value,
+    val => emit('update:valid', val),
+    { immediate: true },
+  );
+
+  function validate(text: string) {
+    errorMessage.value = '';
+    if (props.rules && props.rules.length) {
+      for (const validateFunction of props.rules) {
+        if (typeof validateFunction === 'function') {
+          const res = validateFunction(text);
+          if (typeof res === 'string') {
+            errorMessage.value += res;
+          }
         }
       }
     }
   }
-}
 
-function onFocus(event: Event) {
-  isFocused.value = true;
-  emit('focus', event);
-}
+  function onFocus(event: Event) {
+    isFocused.value = true;
+    emit('focus', event);
+  }
 
-function onBlur(event: Event) {
-  isFocused.value = false;
-  const value = (event.target as HTMLInputElement).value;
-  validate(value);
-  emit('blur', event);
-  emit('change', value);
-  emit('update:text', value);
-}
+  function onBlur(event: Event) {
+    isFocused.value = false;
+    const value = (event.target as HTMLInputElement).value;
+    validate(value);
+    emit('blur', event);
+    emit('change', value);
+    emit('update:text', value);
+  }
 
-function onInput(event: Event) {
-  const value = (event.target as HTMLInputElement).value;
-  validate(value);
-  emit('update:text', value);
-  emit('input', value);
-}
+  function onInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    validate(value);
+    emit('update:text', value);
+    emit('input', value);
+  }
 
-function onEnterKeydown(event: KeyboardEvent) {
-  const { altKey, ctrlKey, shiftKey, metaKey, target } = event;
-  const value = (target as HTMLInputElement).value;
-  validate(value);
-  emit('update:text', value);
-  emit('enter', { value , altKey, ctrlKey, shiftKey, metaKey });
-}
+  function onEnterKeydown(event: KeyboardEvent) {
+    const { altKey, ctrlKey, shiftKey, metaKey, target } = event;
+    const value = (target as HTMLInputElement).value;
+    validate(value);
+    emit('update:text', value);
+    emit('enter', { value, altKey, ctrlKey, shiftKey, metaKey });
+  }
 
-function onEscapeKeydown(event: KeyboardEvent) {
-  const value = (event.target as HTMLInputElement).value;
-  validate(value);
-  emit('update:text', value);
-  emit('escape', event);
-}
+  function onEscapeKeydown(event: KeyboardEvent) {
+    const value = (event.target as HTMLInputElement).value;
+    validate(value);
+    emit('update:text', value);
+    emit('escape', event);
+  }
 </script>
 
 <template>
   <div :class="[$style.ui3nText, disabled && $style.disabled, isFocused && $style.focused]">
-    <label v-if="label" :class="$style.label">
+    <label
+      v-if="label"
+      :class="$style.label"
+    >
       {{ label }}
     </label>
+
     <div :class="$style.body">
       <textarea
         ref="textareaElement"
@@ -118,160 +122,98 @@ function onEscapeKeydown(event: KeyboardEvent) {
 </template>
 
 <style lang="scss" module>
-.ui3nText {
-  position: relative;
-  width: 100%;
-  border-radius: var(--spacing-xs);
-  padding: 1px;
-}
-
-.label {
-  display: block;
-  width: 100%;
-  font-size: var(--font-12);
-  line-height: var(--font-16);
-  font-weight: 600;
-  color: var(--color-text-control-primary-default);
-  margin-bottom: var(--spacing-xs);
-}
-
-.body {
-  position: relative;
-  width: 100%;
-  padding: var(--spacing-s) 0;
-  background-color: var(--color-bg-control-secondary-default);
-  border-radius: var(--spacing-xs);
-  transition: all 0.2s ease-in-out;
+  .ui3nText {
+    position: relative;
+    width: 100%;
+    border-radius: var(--spacing-xs);
+    padding: 1px;
+  }
 
-  &:hover {
-    &:not(:focus-within) {
-      background-color: var(--color-bg-control-secondary-hover);
+  .label {
+    display: block;
+    width: 100%;
+    font-size: var(--font-12);
+    line-height: var(--font-16);
+    font-weight: 600;
+    color: var(--color-text-control-primary-default);
+    margin-bottom: var(--spacing-xs);
+  }
 
-      .content {
+  .body {
+    position: relative;
+    width: 100%;
+    padding: var(--spacing-s) 0;
+    background-color: var(--color-bg-control-secondary-default);
+    border-radius: var(--spacing-xs);
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      &:not(:focus-within) {
         background-color: var(--color-bg-control-secondary-hover);
 
-        &::placeholder {
-          color: var(--color-text-control-secondary-hover);
+        .content {
+          background-color: var(--color-bg-control-secondary-hover);
+
+          &::placeholder {
+            color: var(--color-text-control-secondary-hover);
+          }
         }
       }
     }
   }
-}
 
-.content {
-  resize: none;
-  display: block;
-  border: none;
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  border-radius: var(--spacing-xs);
-  background-color: var(--color-bg-control-secondary-default);
-  padding: 0 var(--spacing-s);
-  font-family: Manrope, sans-serif;
-  font-size: var(--font-13);
-  line-height: var(--font-16);
-  font-weight: 400;
-  color: var(--color-text-control-primary-default);
-  transition: all 0.2s ease-in-out;
-
-  &::placeholder {
-    color: var(--color-text-control-secondary-default);
-    font-style: italic;
+  .content {
+    resize: none;
+    display: block;
+    border: none;
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    border-radius: var(--spacing-xs);
+    background-color: var(--color-bg-control-secondary-default);
+    padding: 0 var(--spacing-s);
+    font-family: Manrope, sans-serif;
     font-size: var(--font-13);
     line-height: var(--font-16);
     font-weight: 400;
-  }
+    color: var(--color-text-control-primary-default);
+    transition: all 0.2s ease-in-out;
+
+    &::placeholder {
+      color: var(--color-text-control-secondary-default);
+      font-style: italic;
+      font-size: var(--font-13);
+      line-height: var(--font-16);
+      font-weight: 400;
+    }
 
-  &:focus-within {
-    outline: none;
+    &:focus-within {
+      outline: none;
+    }
   }
-}
 
-.disabled {
-  pointer-events: none;
-  user-select: none;
+  .disabled {
+    pointer-events: none;
+    user-select: none;
 
-  .body {
-    background-color: var(--color-bg-control-secondary-disabled);
-  }
+    .body {
+      background-color: var(--color-bg-control-secondary-disabled);
+    }
 
-  .content {
-    background-color: var(--color-bg-control-secondary-disabled);
-    color: var(--color-text-control-secondary-disabled);
+    .content {
+      background-color: var(--color-bg-control-secondary-disabled);
+      color: var(--color-text-control-secondary-disabled);
+    }
   }
-}
 
-.focused {
-  .body {
-    background-color: var(--color-bg-control-secondary-focused);
-    outline: 1px solid var(--color-border-control-accent-focused);
-  }
+  .focused {
+    .body {
+      background-color: var(--color-bg-control-secondary-focused);
+      outline: 1px solid var(--color-border-control-accent-focused);
+    }
 
-  .content {
-    background-color: var(--color-bg-control-secondary-focused);
+    .content {
+      background-color: var(--color-bg-control-secondary-focused);
+    }
   }
-}
-
-//.ui3n-text {
-//  position: relative;
-//  width: 100%;
-//
-//  &__label {
-//    display: block;
-//    width: 100%;
-//    font-size: var(--font-12, 12px);
-//    font-weight: 600;
-//    color: var(--black-90, #212121);
-//    margin-bottom: calc(var(--base-size, 8px) / 2);
-//  }
-//
-//  &__body {
-//    position: relative;
-//    width: 100%;
-//    padding: var(--base-size, 8px) 0;
-//    background-color: var(--gray-50, #f2f2f2);
-//    border-radius: 4px;
-//  }
-//
-//  &__content {
-//    resize: none;
-//    display: block;
-//    box-sizing: border-box;
-//    position: relative;
-//    width: 100%;
-//    border-radius: 4px;
-//    background-color: var(--gray-50, #f2f2f2);
-//    padding: 0 var(--base-size, 8px);
-//    font-family: OpenSans, sans-serif;
-//    font-size: var(--font-13, 13px);
-//    font-weight: 400;
-//    line-height: var(--font-16, 16px);
-//    color: var(--black-90, #212121);
-//    border: none;
-//
-//    &::placeholder {
-//      font-size: var(--font-13, 13px);
-//      font-weight: 300;
-//      font-style: italic;
-//      color: var(--gray-90, #212121);
-//    }
-//  }
-//
-//  &--disabled {
-//    pointer-events: none;
-//    user-select: none;
-//    opacity: 0.5;
-//  }
-//
-//  &--focused {
-//    .ui3n-text {
-//      &__body, &__content {
-//        background-color: var(--blue-main-20, #d8edfd);
-//        outline: none;
-//        border: none;
-//      }
-//    }
-//  }
-//}
 </style>

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-  /* eslint-disable vue/no-multiple-template-root */
   import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-  import type { Nullable } from '@/components/types';
+  import type { Nullable } from '@/types';
   import type { Ui3nTooltipProps, Ui3nTooltipEmits, Ui3nTooltipSlots } from './types';
   import { arrow, autoUpdate, offset, useFloating } from '@floating-ui/vue';
 
@@ -150,9 +149,9 @@
           ref="floatingArrowEl"
           :class="[$style.arrow, $style[`arrow-${mainPlacement}`]]"
           :style="{
-              left: middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : '',
-              top: middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : '',
-            }"
+            left: middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : '',
+            top: middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : '',
+          }"
         />
       </div>
     </slot>

package/src/components/types/index.ts

@@ -1,15 +0,0 @@
-import { VNodeProps, AllowedComponentProps } from 'vue';
-
-export type ExtractComponentProps<TComponent> = TComponent extends new () => {
-  $props: infer P;
-}
-  ? Omit<P, keyof VNodeProps | keyof AllowedComponentProps>
-  : never;
-
-export type Nullable<T> = T | null;
-
-export type Ui3nIconField = {
-  icon: string;
-  size?: string | number;
-  color?: string;
-};