@v1nt1248/3nclient-lib 0.0.41 → 0.1.0

package/src/components/ui3n-text.vue

@@ -1,115 +1,111 @@
 <script lang="ts" setup>
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  import { computed, onMounted, ref, watch } from 'vue'
-  import { patchTextareaMaxRowsSupport } from '../tools'
-
-  export interface Ui3nTextProps {
-    text: string;
-    rows?: number;
-    maxRows?: number;
-    label?: string;
-    placeholder?: string;
-    rules?: Array<(v: string) => any>;
-    disabled?: boolean;
-  }
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { computed, onMounted, ref, watch } from 'vue';
+import { patchTextareaMaxRowsSupport } from '../tools';
 
-  export interface Ui3nTextEmits {
-    (ev: 'init', value: HTMLTextAreaElement): void;
-    (ev: 'input', value: string): void;
-    (ev: 'focus', value: Event): void;
-    (ev: 'blur', value: Event): void;
-    (ev: 'update:text', value: string): void;
-    (ev: 'update:valid', value: boolean): void;
-  }
+export interface Ui3nTextProps {
+  text: string;
+  rows?: number;
+  maxRows?: number;
+  label?: string;
+  placeholder?: string;
+  rules?: Array<(v: string) => any>;
+  disabled?: boolean;
+}
 
-  const props = defineProps<Ui3nTextProps>()
-  const emit = defineEmits<Ui3nTextEmits>()
+export interface Ui3nTextEmits {
+  (ev: 'init', value: HTMLTextAreaElement): void;
+  (ev: 'input', value: string): void;
+  (ev: 'focus', value: Event): void;
+  (ev: 'blur', value: Event): void;
+  (ev: 'update:text', value: string): void;
+  (ev: 'update:valid', value: boolean): void;
+}
 
-  const textareaElement = ref<HTMLTextAreaElement | null>(null)
-  const isFocused = ref(false)
-  const errorMessage = ref('')
+const props = withDefaults(
+  defineProps<Ui3nTextProps>(),
+  {
+    rows: 6,
+    maxRows: 6,
+    label: '',
+    placeholder: '',
+    disabled: false,
+  },
+);
+const emit = defineEmits<Ui3nTextEmits>();
 
-  const componentProps = computed(() => {
-    const { rows = 6, maxRows = 6, label = '', placeholder = '', disabled = false } = props
-    return { rows, maxRows, label, placeholder, disabled }
-  })
+const textareaElement = ref<HTMLTextAreaElement | null>(null);
+const isFocused = ref(false);
+const errorMessage = ref('');
 
-  const isValid = computed(() => {
-    if (!props.text) {
-      return true
-    }
+const isValid = computed(() => {
+  if (!props.text) {
+    return true;
+  }
 
-    return !errorMessage.value
-  })
+  return !errorMessage.value;
+});
 
-  onMounted(() => {
-    if (textareaElement.value) {
-      patchTextareaMaxRowsSupport(textareaElement.value!)
-      emit('init', textareaElement.value!)
-    }
-  })
-
-  watch(
-    () => isValid.value,
-    val => emit('update:valid', val),
-    { immediate: true },
-  )
-
-  const 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 },
+);
+
+const 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;
         }
       }
     }
   }
+};
 
-  const onFocus = (event: Event) => {
-    isFocused.value = true
-    emit('focus', event)
-  }
+const onFocus = (event: Event) => {
+  isFocused.value = true;
+  emit('focus', event);
+};
 
-  const onBlur = (event: Event) => {
-    isFocused.value = false
-    emit('blur', event)
-  }
+const onBlur = (event: Event) => {
+  isFocused.value = false;
+  emit('blur', event);
+};
 
-  const onInput = (ev: Event) => {
-    const value = (ev.target as HTMLInputElement).value
-    validate(value)
-    emit('update:text', value)
-    emit('input', value)
-  }
+const onInput = (ev: Event) => {
+  const value = (ev.target as HTMLInputElement).value;
+  validate(value);
+  emit('update:text', value);
+  emit('input', value);
+};
 </script>
 
 <template>
-  <div
-    :class="[
-      'ui3n-text',
-      { 'ui3n-text--disabled': props.disabled, 'ui3n-text--focused': isFocused },
-    ]"
-  >
-    <label
-      v-if="componentProps.label"
-      class="ui3n-text__label"
-    >
-      {{ componentProps.label }}
+  <div :class="[$style.text, disabled && $style.disabled, isFocused && $style.focused]">
+    <label v-if="label" :class="$style.label">
+      {{ label }}
     </label>
-    <div class="ui3n-text__body">
+    <div :class="$style.body">
       <textarea
         ref="textareaElement"
-        :value="props.text"
-        :placeholder="componentProps.placeholder"
-        :readonly="componentProps.disabled"
-        :rows="componentProps.rows"
-        :max-rows="componentProps.maxRows"
-        :disabled="componentProps.disabled"
-        class="ui3n-text__content"
+        :class="$style.content"
+        :value="text"
+        :placeholder="placeholder"
+        :readonly="disabled"
+        :rows="rows"
+        :max-rows="maxRows"
+        :disabled="disabled"
         v-bind="$attrs"
         @input="onInput"
         @focusin="onFocus"
@@ -119,67 +115,160 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .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);
-    }
+<style lang="scss" module>
+.text {
+  position: relative;
+  width: 100%;
+  border-radius: var(--spacing-xs);
+}
 
-    &__body {
-      position: relative;
-      width: 100%;
-      padding: var(--base-size, 8px) 0;
-      background-color: var(--gray-50, #f2f2f2);
-      border-radius: 4px;
-    }
+.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 {
-      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);
-      }
-    }
+.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;
 
-    &--disabled {
-      pointer-events: none;
-      user-select: none;
-      opacity: 0.5;
-    }
+  &:hover {
+    &:not(:focus-within) {
+      background-color: var(--color-bg-control-secondary-hover);
 
-    &--focused {
-      .ui3n-text {
-        &__body, &__content {
-          background-color: var(--blue-main-20, #d8edfd);
-          outline: none;
-          border: none;
+      .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;
+    font-size: var(--font-13);
+    line-height: var(--font-16);
+    font-weight: 400;
+  }
+
+  &:focus-within {
+    outline: none;
+  }
+}
+
+.disabled {
+  pointer-events: none;
+  user-select: none;
+
+  .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);
+  }
+}
+
+.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);
+  }
+}
+
+//.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>
-../tools/textarea-max-rows

package/src/components/ui3n-virtual-scroll.vue

@@ -1,80 +1,80 @@
 <script lang="ts" setup generic="T extends { id?: string }">
-  /* eslint-disable @typescript-eslint/no-explicit-any */ 
-  import { computed, onMounted, ref } from 'vue'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { computed, onMounted, ref } from 'vue';
 
-  export interface Ui3nVirtualScrollProps<T> {
-    items: T[];
-    minChildHeight: number;
-    renderAhread?: number;
-  }
+export interface Ui3nVirtualScrollProps<T> {
+  items: T[];
+  minChildHeight: number;
+  renderAhead?: number;
+}
 
-  export interface Ui3nVirtualScrollSlots<T> {
-    item: (item: T, index: number) => any;
-  }
+export interface Ui3nVirtualScrollSlots<T> {
+  item: ({ value, index }: { value: T, index: number}) => any;
+}
 
-  const props = withDefaults(defineProps<Ui3nVirtualScrollProps<T>>(), {
-    renderAhread: 20,
-  })
-  defineSlots<Ui3nVirtualScrollSlots<T>>()
+const props = withDefaults(defineProps<Ui3nVirtualScrollProps<T>>(), {
+  renderAhead: 20,
+});
+defineSlots<Ui3nVirtualScrollSlots<T>>();
 
-  const scrollTop = ref(0)
-  const animationFrame = ref<number | undefined>()
-  const wrapElement = ref<HTMLDivElement | null>(null)
-  const wrapElementHeight = computed(() => wrapElement.value
-    ? wrapElement.value.clientHeight
-    : 0
-  )
-  const itemCount = computed(() => props.items.length)
-  const totalHeight = computed(() => itemCount.value * props.minChildHeight)
-  const startNode = computed(() => {
-    const val = Math.floor(scrollTop.value / props.minChildHeight) - props.renderAhread
-    return Math.max(0, val)
-  })
-  const visibleNodeCount = computed(() => {
-    const val = Math.ceil(wrapElementHeight.value / props.minChildHeight) +2 * props.renderAhread
-    return Math.min(itemCount.value - startNode.value, val)
-  })
-  const offsetY = computed(() => startNode.value * props.minChildHeight)
-  const visibleChildren = computed(() => props.items.slice(startNode.value, startNode.value + visibleNodeCount.value))
+const scrollTop = ref(0);
+const animationFrame = ref<number | undefined>();
+const wrapElement = ref<HTMLDivElement | null>(null);
+const wrapElementHeight = computed(() => wrapElement.value
+  ? wrapElement.value.clientHeight
+  : 0,
+);
+const itemCount = computed(() => props.items.length);
+const totalHeight = computed(() => itemCount.value * props.minChildHeight);
+const startNode = computed(() => {
+  const val = Math.floor(scrollTop.value / props.minChildHeight) - props.renderAhead;
+  return Math.max(0, val);
+});
+const visibleNodeCount = computed(() => {
+  const val = Math.ceil(wrapElementHeight.value / props.minChildHeight) + 2 * props.renderAhead;
+  return Math.min(itemCount.value - startNode.value, val);
+});
+const offsetY = computed(() => startNode.value * props.minChildHeight);
+const visibleChildren = computed(() => props.items.slice(startNode.value, startNode.value + visibleNodeCount.value));
 
-  const onScroll = (event: Event) => {
-    if (animationFrame.value) {
-      cancelAnimationFrame(animationFrame.value)
-    }
-    
-    animationFrame.value = requestAnimationFrame(() => scrollTop.value = (event.target as HTMLDivElement).scrollTop)
+const onScroll = (event: Event) => {
+  if (animationFrame.value) {
+    cancelAnimationFrame(animationFrame.value);
   }
 
-  onMounted(() => {
-    if (wrapElement.value) {
-      scrollTop.value = wrapElement.value.scrollTop
-    }
-  })
+  animationFrame.value = requestAnimationFrame(() => scrollTop.value = (event.target as HTMLDivElement).scrollTop);
+};
+
+onMounted(() => {
+  if (wrapElement.value) {
+    scrollTop.value = wrapElement.value.scrollTop;
+  }
+});
 </script>
 
 <template>
   <div
     ref="wrapElement"
-    class="ui3n-virtual-scroll"
+    :class="$style.virtualScroll"
     @scroll="onScroll"
   >
     <div
-      class="ui3n-virtual-scroll__viewport"
+      :class="$style.viewport"
       :style="{ height: `${totalHeight}px` }"
     >
       <div
-        class="ui3n-virtual-scroll__content"
+        :class="$style.content"
         :style="{ transform: `translateY(${offsetY}px)` }"
       >
         <div
           v-for="(item, index) in visibleChildren"
           :key="item.id"
           :data-sid="item.id ?? index"
-          class="ui3n-virtual-scroll__item"
+          :class="$style.item"
         >
           <slot
             name="item"
-            :item="item"
+            :value="item"
             :index="startNode + index"
           />
         </div>
@@ -83,26 +83,26 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .ui3n-virtual-scroll {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
+<style lang="scss" module>
+.virtualScroll {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
 
-    &__viewport {
-      position: relative;
-      overflow: hidden;
-      will-change: transform;
-    }
+.viewport {
+  position: relative;
+  overflow: hidden;
+  will-change: transform;
+}
 
-    &__content {
-      will-change: transform;
-    }
+.content {
+  will-change: transform;
+}
 
-    &__item {
-      position: relative;
-      min-height: 16px;
-    }
-  }
+.item {
+  position: relative;
+  min-height: 16px;
+}
 </style>