@v1nt1248/3nclient-lib 0.0.41 → 0.1.0

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

@@ -1,83 +1,81 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue'
-
-  export interface Ui3nDropFilesProps {
-    title?: string;
-    text?: string;
-    additionalText?: string;
-  }
-
-  export interface Ui3nDropFilesEmits {
-    (e: 'select', fileList: FileList): void;
-  }
-
-  const props = defineProps<Ui3nDropFilesProps>()
-  const emit = defineEmits<Ui3nDropFilesEmits>()
-
-  const wrapperElement = ref<HTMLDivElement | null>(null)
-  const wrapperElementHeight = ref(0)
-  const isOverDropPlace = ref(false)
-  const isOverDropZone = ref(false)
-  const params = computed(() => {
-    const {
-      title = 'Upload',
-    } = props
-
-    return {
-      title,
-    }
-  })
-
-  onMounted(() => {
-    if (wrapperElement.value) {
-      wrapperElementHeight.value = wrapperElement.value.clientHeight
-      wrapperElement.value.style.setProperty('--dropzone-height', `${wrapperElementHeight.value}px`)
-      let titleFontSize = 12
-      if (wrapperElementHeight.value > 100 && wrapperElementHeight.value <= 240) {
-        titleFontSize = 16
-      } else if (wrapperElementHeight.value > 240) {
-        titleFontSize = 20
-      }
-      wrapperElement.value.style.setProperty('--dropzone-title-font', `${titleFontSize}px`)
+import { onMounted, ref } from 'vue';
+
+export interface Ui3nDropFilesProps {
+  title?: string;
+  text?: string;
+  additionalText?: string;
+}
+
+export interface Ui3nDropFilesEmits {
+  (e: 'select', fileList: FileList): void;
+}
+
+const props = withDefaults(
+  defineProps<Ui3nDropFilesProps>(),
+  {
+    title: 'Upload',
+    text: '',
+    additionalText: '',
+  },
+);
+const emits = defineEmits<Ui3nDropFilesEmits>();
+
+const wrapperElement = ref<HTMLDivElement | null>(null);
+const wrapperElementHeight = ref(0);
+const isOverDropPlace = ref(false);
+const isOverDropZone = ref(false);
+
+onMounted(() => {
+  if (wrapperElement.value) {
+    wrapperElementHeight.value = wrapperElement.value.clientHeight;
+    wrapperElement.value.style.setProperty('--dropzone-height', `${wrapperElementHeight.value}px`);
+    let titleFontSize = 12;
+    if (wrapperElementHeight.value > 100 && wrapperElementHeight.value <= 240) {
+      titleFontSize = 16;
+    } else if (wrapperElementHeight.value > 240) {
+      titleFontSize = 20;
     }
-  })
-
-  const onDragenter = (ev: MouseEvent) => {
-    ev.preventDefault()
-    isOverDropPlace.value = true
-  }
-  const onDragleave = (ev: MouseEvent) => {
-    ev.preventDefault()
-    isOverDropPlace.value = false
-  }
-  const onDropzoneDragover = (ev: MouseEvent) => {
-    ev.preventDefault()
-    ev.stopPropagation()
-  }
-  const onDropzoneDragenter = (ev: MouseEvent) => {
-    ev.preventDefault()
-    isOverDropZone.value = true
+    wrapperElement.value.style.setProperty('--dropzone-title-font', `${titleFontSize}px`);
   }
-  const onDropzoneDragleave = (ev: MouseEvent) => {
-    ev.preventDefault()
-    isOverDropZone.value = false
-  }
-  const onDrop = (ev: DragEvent) => {
-    ev.stopPropagation()
-    ev.preventDefault()
-    if (ev.dataTransfer!.files) {
-      emit('select', ev.dataTransfer!.files)
-    }
-    isOverDropPlace.value = false
-    isOverDropZone.value = false
+});
+
+const onDragenter = (ev: MouseEvent) => {
+  ev.preventDefault();
+  isOverDropPlace.value = true;
+};
+const onDragleave = (ev: MouseEvent) => {
+  ev.preventDefault();
+  isOverDropPlace.value = false;
+};
+const onDropzoneDragover = (ev: MouseEvent) => {
+  ev.preventDefault();
+  ev.stopPropagation();
+};
+const onDropzoneDragenter = (ev: MouseEvent) => {
+  ev.preventDefault();
+  isOverDropZone.value = true;
+};
+const onDropzoneDragleave = (ev: MouseEvent) => {
+  ev.preventDefault();
+  isOverDropZone.value = false;
+};
+const onDrop = (ev: DragEvent) => {
+  ev.stopPropagation();
+  ev.preventDefault();
+  if (ev.dataTransfer!.files) {
+    emits('select', ev.dataTransfer!.files);
   }
+  isOverDropPlace.value = false;
+  isOverDropZone.value = false;
+};
 </script>
 
 <template>
   <!-- eslint-disable max-len -->
   <div
     ref="wrapperElement"
-    class="ui3n-drop-files"
+    :class="$style.dropFiles"
     @dragenter="onDragenter"
     @dragleave="onDragleave"
   >
@@ -85,17 +83,17 @@
 
     <div
       v-if="isOverDropPlace || isOverDropZone"
-      class="ui3n-drop-files__dropzone"
+      :class="$style.dropzone"
       @dragenter="onDropzoneDragenter"
       @dragover="onDropzoneDragover"
       @dragleave="onDropzoneDragleave"
       @drop="onDrop"
     >
-      <div class="ui3n-drop-files__dropzone-border" />
-      <h3 class="ui3n-drop-files__dropzone-title">
-        {{ params.title }}
+      <div :class="$style.dropzoneBorder" />
+      <h3 :class="$style.dropzoneTitle">
+        {{ title }}
       </h3>
-      <div class="ui3n-drop-files__dropzone-icon">
+      <div :class="$style.dropzoneIcon">
         <svg
           :width="wrapperElementHeight / 2"
           :height="wrapperElementHeight / 2"
@@ -105,94 +103,88 @@
         >
           <path
             d="M51 152C47.9333 152 45.3333 150.934 43.2 148.8C41.0667 146.667 40 144.067 40 141V119.8H46.2V141C46.2 142.2 46.7 143.3 47.7 144.3C48.7 145.3 49.8 145.8 51 145.8H141C142.2 145.8 143.3 145.3 144.3 144.3C145.3 143.3 145.8 142.2 145.8 141V119.8H152V141C152 144.067 150.933 146.667 148.8 148.8C146.667 150.934 144.067 152 141 152H51ZM93 122.4V49.2002L72.8 69.2002L68.4 65.0002L96 37.2002L123.6 65.0002L119.2 69.2002L99 49.2002V122.4H93Z"
-            fill="#212121"
+            fill="var(--color-icon-button-tritery-default)"
           />
         </svg>
       </div>
-      <div
-        v-if="props.text"
-        class="ui3n-drop-files__dropzone-text"
-      >
+      <div v-if="props.text" :class="$style.dropzoneText">
         {{ props.text }}
       </div>
-      <div
-        v-if="props.additionalText"
-        class="ui3n-drop-files__dropzone-additional"
-      >
+      <div v-if="props.additionalText" :class="$style.dropzoneText">
         {{ props.additionalText }}
       </div>
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .ui3n-drop-files {
-    --dropzone-height: 0;
-    --dropzone-title-font: 0;
-
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-
-    &__dropzone {
-      box-sizing: border-box;
-      position: absolute;
-      background-color: var(--system-white, #fff);
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      inset: var(--half-size, 4px) var(--base-size, 8px);
-      border-radius: var(--base-size, 8px);
-      z-index: 5;
-
-      &-border {
-        box-sizing: border-box;
-        position: absolute;
-        top: calc(var(--base-size, 8px) + 1px);
-        bottom: calc(var(--base-size, 8px) + 1px);
-        left: calc(var(--base-size, 8px) + 1px);
-        right: calc(var(--base-size, 8px) + 1px);
-        border-radius: var(--base-size, 8px);
-        border: 2px dashed var(--gray-50, #f2f2f2);
-        pointer-events: none;
-      }
-
-      &-title {
-        margin: 0 0 var(--dropzone-title-font);
-        font-size: var(--dropzone-title-font);
-        font-weight: 600;
-        color: var(--black-30, #b3b3b3);
-        pointer-events: none;
-      }
-
-      &-icon {
-        position: relative;
-        width: calc(var(--dropzone-height) * 0.4);
-        height: calc(var(--dropzone-height) * 0.4);
-        border-radius: 50%;
-        background-color: var(--gray-50, #f2f2f2);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        pointer-events: none;
-      }
-
-      &-text {
-        margin-top: calc(var(--base-size, 8px) * 3);
-        font-size: var(--font-12, 12px);
-        line-height: var(--font-16, 16px);
-        font-weight: 400;
-        color: var(--black-30, #b3b3b3);
-      }
-
-      &-additional {
-        margin-top: var(--half-size, 4px);
-        font-size: var(--font-12, 12px);
-        font-weight: 500;
-        color: var(--black-90, #212121);
-      }
-    }
-  }
+<style lang="scss" module>
+.dropFiles {
+  --dropzone-height: 0;
+  --dropzone-title-font: 0;
+
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+.dropzone {
+  box-sizing: border-box;
+  position: absolute;
+  background-color: var(--white-0);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  inset: var(--spacing-xs) var(--spacing-s);
+  border-radius: var(--spacing-s);
+  z-index: 5;
+}
+
+.dropzoneBorder {
+  box-sizing: border-box;
+  position: absolute;
+  top: calc(var(--spacing-s) + 1px);
+  bottom: calc(var(--spacing-s) + 1px);
+  left: calc(var(--spacing-s) + 1px);
+  right: calc(var(--spacing-s) + 1px);
+  border-radius: var(--spacing-s);
+  border: 2px dashed var(--fill-s-focused);
+  pointer-events: none;
+}
+
+.dropzoneTitle {
+  margin: 0 0 var(--dropzone-title-font);
+  font-size: var(--dropzone-title-font);
+  font-weight: 600;
+  color: var(--fill-pressed);
+  pointer-events: none;
+}
+
+.dropzoneIcon {
+  position: relative;
+  width: calc(var(--dropzone-height) * 0.4);
+  height: calc(var(--dropzone-height) * 0.4);
+  border-radius: 50%;
+  background-color: var(--fill-s-focused);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}
+
+.dropzoneText {
+  margin-top: var(--spacing-ml);
+  font-size: var(--font-12);
+  line-height: var(--font-16);
+  font-weight: 400;
+  color: var(--fill-pressed);
+}
+
+.dropzoneAdditional {
+  margin-top: var(--spacing-xs);
+  font-size: var(--font-12);
+  font-weight: 500;
+  color: var(--color-text-control-primary-default);
+}
 </style>

package/src/components/ui3n-emoji.vue

@@ -1,88 +1,86 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref, watch } from 'vue'
-  import { emoticons } from '../constants/emoticons'
+import { computed, onMounted, ref, watch } from 'vue';
+import { emoticons } from '../constants/emoticons';
 
+export interface Ui3nEmojiProps {
+  emoji: string;
+  size?: string | number;
+  readonly?: boolean;
+}
 
-  export interface Ui3nEmojiProps {
-    emoji: string;
-    size?: string | number;
-    readonly?: boolean;
-  }
+export interface Ui3nEmojiEmits {
+  (ev: 'click', value: Event): void;
+}
 
-  export interface Ui3nEmojiEmits {
-    (ev: 'click', value: Event): void;
-  }
+const props = withDefaults(
+  defineProps<Ui3nEmojiProps>(),
+  {
+    size: 16,
+    readonly: false,
+  },
+);
+const emits = defineEmits<Ui3nEmojiEmits>();
 
-  const props = withDefaults(
-    defineProps<Ui3nEmojiProps>(),
-    {
-      size: 16,
-      readonly: false,
-    },
-  )
-  const emit = defineEmits<Ui3nEmojiEmits>()
+const emojiElement = ref<HTMLDivElement | null>(null);
+const emojiData = computed(() => emoticons[props.emoji]);
 
-  const emojiElement = ref<HTMLDivElement | null>(null)
-  const emojiData = computed(() => emoticons[props.emoji])
+onMounted(() => {
+  if (emojiElement.value) {
+    emojiElement.value.style.setProperty('--emoji-size', `${props.size}px`);
+  }
+});
 
-  onMounted(() => {
-    if (emojiElement.value) {
-      emojiElement.value.style.setProperty('--emoji-size', `${props.size}px`)
+watch(
+  () => props.emoji,
+  newValue => {
+    if (!Object.keys(emoticons).includes(newValue)) {
+      console.error(`[Ui3nEmoji] Invalid emoticon: ${newValue}`);
     }
-  })
-
-  watch(
-    () => props.emoji,
-    newValue => {
-      if (!Object.keys(emoticons).includes(newValue)) {
-        console.error(`[Ui3nEmoji] Invalid emoticon: ${newValue}`)
-      }
-    },
-    { immediate: true },
-  )
+  },
+  { immediate: true },
+);
 
-  watch(
-    () => props.size,
-    (newValue, prevValue) => {
-      if (emojiElement.value && newValue && newValue !== prevValue) {
-        emojiElement.value.style.setProperty('--emoji-size', `${newValue}px`)
-      }
-    },
-  )
+watch(
+  () => props.size,
+  (newValue, prevValue) => {
+    if (emojiElement.value && newValue && newValue !== prevValue) {
+      emojiElement.value.style.setProperty('--ui3n-emoji-size', `${newValue}px`);
+    }
+  },
+);
 
-  const onClick = (ev: Event) => {
-    ev.stopImmediatePropagation()
-    emit('click', ev)
-  }
+const onClick = (ev: Event) => {
+  ev.stopImmediatePropagation();
+  emits('click', ev);
+};
 </script>
 
 <template>
   <div
     ref="emojiElement"
-    :class="[
-      'ui3n-emoji',
-      { 'ui3n-emoji--readonly': props.readonly },
-    ]"
+    :class="[$style.emoji, readonly && $style.readonly]"
     v-on="readonly ? {} : { 'click': onClick }"
   >
     {{ emojiData && emojiData.value }}
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .ui3n-emoji {
-    --emoji-size: 16px;
+<style lang="scss" module>
+.emoji {
+  --ui3n-emoji-size: 16px;
 
-    display: flex;
-    width: var(--emoji-size);
-    height: var(--emoji-size);
-    font-size: var(--emoji-size);
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
+  display: flex;
+  min-width: var(--ui3n-emoji-size);
+  width: var(--ui3n-emoji-size);
+  min-height: var(--ui3n-emoji-size);
+  height: var(--ui3n-emoji-size);
+  font-size: var(--ui3n-emoji-size);
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
 
-    &--readonly {
-      cursor: default;
-    }
-  }
+.readonly {
+  cursor: default;
+}
 </style>

package/src/components/ui3n-icon.vue

@@ -20,8 +20,17 @@
     (ev: 'click', value: Event): void;
   }
 
-  const props = defineProps<Ui3nIconProps>()
-  const emit = defineEmits<Ui3nIconEmits>()
+  const props = withDefaults(
+    defineProps<Ui3nIconProps>(),
+      {
+        title: '',
+        width: 16,
+        height: 16,
+        rotate: 0,
+        color: 'var(--color-icon-control-primary-default)',
+      },
+  );
+  const emits = defineEmits<Ui3nIconEmits>()
 
   const onLoad = (value: any) => {
     if (props.onLoad) {
@@ -29,23 +38,33 @@
     }
   }
   const onClick = (ev: Event) => {
-    emit('click', ev)
+    emits('click', ev)
   }
 </script>
 
 <template>
   <icon
-    :icon="props.icon"
-    :title="props.title || ''"
-    :inline="props.inline"
-    :width="props.width || 16"
-    :height="props.height || 16"
-    :horizontal-flip="props.horizontalFlip"
-    :vertical-flip="props.verticalFlip"
-    :flip="props.flip"
-    :rotate="props.rotate || 0"
-    :color="props.color || 'var(--gray-90, #444)'"
+    :class="$style.icon"
+    :icon="icon"
+    :title="title"
+    :inline="inline"
+    :width="width"
+    :height="height"
+    :horizontal-flip="horizontalFlip"
+    :vertical-flip="verticalFlip"
+    :flip="flip"
+    :rotate="rotate"
+    :color="color"
     :on-load="onLoad"
     @click="onClick"
   />
 </template>
+
+<style lang="scss" module>
+.icon {
+  min-width: v-bind(width);
+  min-height: v-bind(height);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+</style>