@v1nt1248/3nclient-lib 0.2.33 → 0.2.34

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

@@ -1,67 +1,71 @@
 <script lang="ts" setup>
-import { computed, useCssModule, useSlots } from 'vue';
-import Ui3nButton from '../ui3n-button/ui3n-button.vue';
-import type { Ui3nChipEmits, Ui3nChipProps, Ui3nChipSlots } from './types';
-
-const props = withDefaults(
-  defineProps<Ui3nChipProps>(),
-  {
-    height: 24,
-    maxWidth: 200,
-    plain: false,
-    round: true,
-    closeable: false,
-    color: 'var(--color-bg-control-secondary-default)',
-    textSize: 10,
-    textColor: 'var(--color-text-control-primary-default)',
-  },
-);
-
-const emits = defineEmits<Ui3nChipEmits>();
-defineSlots<Ui3nChipSlots>();
-
-const slots = useSlots();
-const $css = useCssModule();
-
-const height = computed(() => `${props.height}px`);
-const iconHeight = computed(() => Number(props.height) - 4);
-
-const maxWidth = computed(() => `${props.maxWidth}px`);
-const bgColor = computed(() => props.color);
-const textSize = computed(() => `${props.textSize}px`);
-const textColor = computed(() => props.textColor);
-const hasLeftSlot = computed(() => !!slots.left);
-
-const padding = computed(() => {
-  const padValue = Math.round(Number(props.height) / 3);
-
-  if (hasLeftSlot.value) {
-    return `0 ${padValue}px 0 4px`;
-  }
+  import { computed, useCssModule, useSlots } from 'vue';
+  import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+  import type { Ui3nChipEmits, Ui3nChipProps, Ui3nChipSlots } from './types';
+
+  const props = withDefaults(
+    defineProps<Ui3nChipProps>(),
+    {
+      height: 24,
+      maxWidth: 200,
+      plain: false,
+      round: true,
+      closeable: false,
+      color: 'var(--color-bg-control-secondary-default)',
+      textSize: 10,
+      textColor: 'var(--color-text-control-primary-default)',
+    },
+  );
+
+  const emits = defineEmits<Ui3nChipEmits>();
+  defineSlots<Ui3nChipSlots>();
+
+  const slots = useSlots();
+  const $css = useCssModule();
+
+  const height = computed(() => `${props.height}px`);
+  const iconHeight = computed(() => Number(props.height) - 4);
+
+  const maxWidth = computed(() => `${props.maxWidth}px`);
+  const bgColor = computed(() => props.color);
+  const textSize = computed(() => `${props.textSize}px`);
+  const textColor = computed(() => props.textColor);
+  const hasLeftSlot = computed(() => !!slots.left);
+
+  const padding = computed(() => {
+    const padValue = Math.round(Number(props.height) / 3);
+
+    if (hasLeftSlot.value) {
+      return `0 ${padValue}px 0 4px`;
+    }
 
-  return `0 ${padValue}px`;
-});
+    return `0 ${padValue}px`;
+  });
 
-const mainCssClasses = computed(() => {
-  const val = [$css.ui3nChip];
+  const mainCssClasses = computed(() => {
+    const val = [$css.ui3nChip];
 
-  props.round && val.push($css.round);
-  props.plain && val.push($css.plain);
-  props.closeable && val.push($css.closeable);
-  hasLeftSlot.value && val.push($css.withIcon);
+    props.round && val.push($css.round);
+    props.plain && val.push($css.plain);
+    props.closeable && val.push($css.closeable);
+    hasLeftSlot.value && val.push($css.withIcon);
 
-  return val;
-});
+    return val;
+  });
 
-function onClick() {
-  emits('close');
-}
+  function onClick() {
+    emits('close');
+  }
 </script>
 
 <template>
   <div :class="mainCssClasses">
     <div :class="$style.ui3nChipIcon">
-      <slot name="left" :size="iconHeight" :color="textColor" />
+      <slot
+        name="left"
+        :size="iconHeight"
+        :color="textColor"
+      />
     </div>
 
     <div :class="$style.ui3nChipBody">
@@ -83,71 +87,71 @@ function onClick() {
 </template>
 
 <style lang="scss" module>
-.ui3nChip {
-  position: relative;
-  display: flex;
-  height: v-bind('height');
-  padding: v-bind('padding');
-  width: max-content;
-  max-width: v-bind('maxWidth');
-  background-color: v-bind('bgColor');
-  justify-content: flex-start;
-  align-items: center;
-
-  &.closeable:not(.withIcon) {
-    .body {
-      max-width: calc(100% - 24px);
+  .ui3nChip {
+    position: relative;
+    display: flex;
+    height: v-bind('height');
+    padding: v-bind('padding');
+    width: max-content;
+    max-width: v-bind('maxWidth');
+    background-color: v-bind('bgColor');
+    justify-content: flex-start;
+    align-items: center;
+
+    &.closeable:not(.withIcon) {
+      .body {
+        max-width: calc(100% - 24px);
+      }
     }
-  }
 
-  &.withIcon:not(.closeable) {
-    .body {
-      max-width: calc(100% - v-bind(height) - 4px);
+    &.withIcon:not(.closeable) {
+      .body {
+        max-width: calc(100% - v-bind(height) - 4px);
+      }
     }
-  }
 
-  &.closable.withIcon {
-    .body {
-      max-width: calc(100% - v-bind(height) - 28px);
+    &.closable.withIcon {
+      .body {
+        max-width: calc(100% - v-bind(height) - 28px);
+      }
     }
   }
-}
-
-.ui3nChipBody {
-  font-size: v-bind('textSize');
-  line-height: 1;
-  font-weight: 400;
-  color: v-bind('textColor');
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.closeBtn {
-  margin-left: var(--spacing-xs);
-}
-
-.withIcon {
-  .ui3nChipIcon {
-    display: flex;
-    flex-grow: 0;
-    flex-shrink: 0;
-    border-radius: 50%;
+
+  .ui3nChipBody {
+    font-size: v-bind('textSize');
+    line-height: 1;
+    font-weight: 400;
+    color: v-bind('textColor');
     overflow: hidden;
-    margin-right: var(--spacing-xs);
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
-}
 
-.round {
-  border-radius: calc(v-bind('height') / 2);
-}
+  .closeBtn {
+    margin-left: var(--spacing-xs);
+  }
+
+  .withIcon {
+    .ui3nChipIcon {
+      display: flex;
+      flex-grow: 0;
+      flex-shrink: 0;
+      border-radius: 50%;
+      overflow: hidden;
+      margin-right: var(--spacing-xs);
+    }
+  }
 
-.closeable {
-  min-width: var(--spacing-ml);
-  padding-right: 0;
-}
+  .round {
+    border-radius: calc(v-bind('height') / 2);
+  }
+
+  .closeable {
+    min-width: var(--spacing-ml);
+    padding-right: 0;
+  }
 
-.plain {
-  border: 1px solid v-bind('textColor');
-}
+  .plain {
+    border: 1px solid v-bind('textColor');
+  }
 </style>

package/src/components/ui3n-dialog/types.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'vue';
-import type { ExtractComponentProps, Ui3nIconField } from '../types/index';
+import type { ExtractComponentProps, Ui3nIconField } from '@/types/index';
 
 export type Ui3nDialogEvent = 'open' | 'before-close' | 'close' | 'confirm' | 'cancel' | 'click-overlay';
 

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

@@ -4,7 +4,7 @@
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
   import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
   import type { Ui3nDialogEvent, Ui3nDialogComponentProps, Ui3nDialogComponentEmits } from './types';
-  import { ExtractComponentProps } from '@/components/types';
+  import { ExtractComponentProps } from '@/types';
   import { determineWindowWidth } from './util';
 
   const props = defineProps<Ui3nDialogComponentProps<T>>();
@@ -226,12 +226,12 @@
       v-on="
         dialogProps?.draggable
           ? {
-              dragstart: onDragstart,
-              mousedown: onMousedown,
-              mouseup: onMouseup,
-              mousemove: onMousemove,
-              keydown: onKeydown,
-            }
+            dragstart: onDragstart,
+            mousedown: onMousedown,
+            mouseup: onMouseup,
+            mousemove: onMousemove,
+            keydown: onKeydown,
+          }
           : { keydown: onKeydown }
       "
     >
@@ -341,7 +341,6 @@
     background-color: var(--color-bg-block-primary-default);
     border-radius: var(--dialog-border-radius);
     outline: none;
-
     @include mixins.elevation();
 
     &.draggable {

package/src/components/ui3n-editable/types.ts

@@ -1,4 +1,4 @@
-import type { Nullable } from '@/components/types';
+import type { Nullable } from '@/types';
 
 export interface Ui3nContentEditableProps {
   modelValue: string;

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

@@ -4,7 +4,7 @@
   import Ui3nRipple from '@/directives/ui3n-ripple';
   import Ui3nClickOutside from '@/directives/ui3n-click-outside';
   import type { Ui3nEditableProps, Ui3nEditableEmits } from './types';
-  import type { Nullable } from '@/components/types';
+  import type { Nullable } from '@/types';
 
   const vUi3nRipple = Ui3nRipple;
   const vUi3nClickOutside = Ui3nClickOutside;
@@ -149,7 +149,10 @@
     @focusin="emits('focusin', $event);"
   >
     <template v-if="inEdit">
-      <span ref="hiddenEl" :class="$style.hidden" />
+      <span
+        ref="hiddenEl"
+        :class="$style.hidden"
+      />
 
       <input
         ref="inputEl"
@@ -162,14 +165,18 @@
         @keydown.enter="done"
         @keydown.tab="done"
         @keydown.esc="cancel"
-      />
+      >
 
       <div
         v-ui3n-ripple
         :class="[$style.btn, $style.doneBtn, disabled && $style.btnDisabled]"
         @click.stop.prevent="done"
       >
-        <ui3n-icon icon="round-done" size="12" color="var(--color-icon-table-accent-default)" />
+        <ui3n-icon
+          icon="round-done"
+          size="12"
+          color="var(--color-icon-table-accent-default)"
+        />
       </div>
 
       <div
@@ -177,21 +184,36 @@
         :class="[$style.btn, $style.cancelBtn, disabled && $style.btnDisabled]"
         @click.stop.prevent="cancel"
       >
-        <ui3n-icon icon="round-close" size="12" color="var(--color-icon-table-secondary-default)" />
+        <ui3n-icon
+          icon="round-close"
+          size="12"
+          color="var(--color-icon-table-secondary-default)"
+        />
       </div>
     </template>
 
     <template v-else>
-      <div :class="[$style.content, !value && $style.contentEmpty]" :title="isContentTruncated ? value : undefined">
-        <span ref="contentValueEl">{{ value || placeholder || '...' }}</span>
-
-        <div v-ui3n-ripple :class="[$style.btn, $style.editBtn]" @click.stop.prevent="turnOnEditMode">
-          <ui3n-icon icon="round-edit" size="12" color="var(--color-icon-control-accent-unselected)" />
+      <div
+        :class="[$style.content, !value && $style.contentEmpty]"
+        :title="isContentTruncated ? value : undefined"
+      >
+        <span ref="contentValueEl">
+          {{ value || placeholder || '...' }}
+        </span>
+
+        <div
+          v-ui3n-ripple
+          :class="[$style.btn, $style.editBtn]"
+          @click.stop.prevent="turnOnEditMode"
+        >
+          <ui3n-icon
+            icon="round-edit"
+            size="12"
+            color="var(--color-icon-control-accent-unselected)"
+          />
         </div>
       </div>
     </template>
-
-
   </div>
 </template>
 

package/src/components/ui3n-editable/useContentEditable.ts

@@ -2,7 +2,7 @@ import { onMounted, ref, watch } from 'vue';
 import debounce from 'lodash/debounce';
 import sanitizeHtml from 'sanitize-html';
 import { selectAll } from '@/utils';
-import type { Nullable } from '@/components/types';
+import type { Nullable } from '@/types';
 import type { Ui3nContentEditableEmits, Ui3nContentEditableProps } from '@/components/ui3n-editable/types';
 
 export function useContentEditable(props: Ui3nContentEditableProps, emits: Ui3nContentEditableEmits) {
@@ -90,7 +90,9 @@ export function useContentEditable(props: Ui3nContentEditableProps, emits: Ui3nC
         .replace(new RegExp(String.fromCharCode(160), 'g'), ' ')
         .replace(/(<([^>]+)>)/gi, '');
 
-      if (value.length >= props.maxLength) ev.preventDefault();
+      if (value.length >= props.maxLength) {
+        ev.preventDefault();
+      }
     }
   }
 
@@ -104,8 +106,9 @@ export function useContentEditable(props: Ui3nContentEditableProps, emits: Ui3nC
 
       const selection = window.getSelection();
 
-      if (value.length >= props.maxLength && ev.code !== 'Backspace' && selection?.toString().length === 0)
+      if (value.length >= props.maxLength && ev.code !== 'Backspace' && selection?.toString().length === 0) {
         ev.preventDefault();
+      }
     }
 
     emits('keydown', ev);

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

@@ -43,7 +43,7 @@ function onClick(ev: Event) {
     :title="title"
     :style="iconStyle"
     @click="onClick"
-  ></div>
+  />
 </template>
 
 <style lang="scss">