@v1nt1248/3nclient-lib 0.2.33 → 0.2.34

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

@@ -1,44 +1,44 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch, useSlots } from 'vue';
-import type { Ui3nSwitchEmits, Ui3nSwitchProps, Ui3nSwitchSlots } from './types';
-
-const props = withDefaults(
-  defineProps<Ui3nSwitchProps>(),
-  {
-    size: 16,
-    color: 'var(--color-icon-control-accent-default)',
-    disabled: false,
-  },
-);
-
-const emits = defineEmits<Ui3nSwitchEmits>();
-
-defineSlots<Ui3nSwitchSlots>();
-
-const slots = useSlots();
-const switchEl = ref<HTMLDivElement | null>(null);
-const val = ref<boolean>(false);
-
-onMounted(() => {
-  if (switchEl.value) {
-    switchEl.value.style.setProperty('--ui3n-switch-color', `${props.color}`);
-    props.size && switchEl.value.style.setProperty('--ui3n-switch-size', `${props.size}px`);
+  import { onMounted, ref, watch, useSlots } from 'vue';
+  import type { Ui3nSwitchEmits, Ui3nSwitchProps, Ui3nSwitchSlots } from './types';
+
+  const props = withDefaults(
+    defineProps<Ui3nSwitchProps>(),
+    {
+      size: 16,
+      color: 'var(--color-icon-control-accent-default)',
+      disabled: false,
+    },
+  );
+
+  const emits = defineEmits<Ui3nSwitchEmits>();
+
+  defineSlots<Ui3nSwitchSlots>();
+
+  const slots = useSlots();
+  const switchEl = ref<HTMLDivElement | null>(null);
+  const val = ref<boolean>(false);
+
+  onMounted(() => {
+    if (switchEl.value) {
+      switchEl.value.style.setProperty('--ui3n-switch-color', `${props.color}`);
+      props.size && switchEl.value.style.setProperty('--ui3n-switch-size', `${props.size}px`);
+    }
+  });
+
+  watch(
+    () => props.modelValue,
+    newValue => val.value = newValue,
+    { immediate: true },
+  );
+
+  function change(ev: Event) {
+    ev.preventDefault();
+
+    val.value = !val.value;
+    emits('change', val.value);
+    emits('update:modelValue', val.value);
   }
-});
-
-watch(
-  () => props.modelValue,
-  newValue => val.value = newValue,
-  { immediate: true },
-);
-
-function change(ev: Event) {
-  ev.preventDefault();
-
-  val.value = !val.value;
-  emits('change', val.value);
-  emits('update:modelValue', val.value);
-}
 </script>
 
 <template>
@@ -46,17 +46,15 @@ function change(ev: Event) {
     ref="switchEl"
     :class="[$style.ui3nSwitch, val && $style.checked, !slots.default && $style.noLabel, disabled && $style.disabled]"
   >
-    <Transition>
-      <div
-        :class="$style.body"
-        :tabindex="disabled ? -1 : 0"
-        @keydown.enter="change"
-        @keydown.space="change"
-        @click="change"
-      >
-        <div :class="[$style.dot, val ? $style.right : $style.left]" />
-      </div>
-    </Transition>
+    <div
+      :class="$style.body"
+      :tabindex="disabled ? -1 : 0"
+      @keydown.enter="change"
+      @keydown.space="change"
+      @click="change"
+    >
+      <div :class="[$style.dot, val ? $style.right : $style.left]" />
+    </div>
 
     <div :class="$style.label">
       <slot />
@@ -65,75 +63,75 @@ function change(ev: Event) {
 </template>
 
 <style lang="scss" module>
-.ui3nSwitch {
-  --ui3n-switch-size: 16px;
-  --ui3n-switch-color: var(--color-icon-control-accent-default);
-  --ui3n-switch-off-color: var(--color-bg-table-cell-pressed);
-  --ui3n-switch-font-size: 12px;
-  --ui3n-switch-font-color: var(--color-text-control-primary-default);
-  --ui3n-switch-font-weight: 500;
-
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--spacing-s);
-}
-
-.body {
-  position: relative;
-  background-color: var(--ui3n-switch-off-color);
-  height: var(--ui3n-switch-size);
-  width: calc(var(--ui3n-switch-size) * 2);
-  border-radius: var(--ui3n-switch-size);
-  cursor: pointer;
-}
-
-.checked {
+  .ui3nSwitch {
+    --ui3n-switch-size: 16px;
+    --ui3n-switch-color: var(--color-icon-control-accent-default);
+    --ui3n-switch-off-color: var(--color-bg-table-cell-pressed);
+    --ui3n-switch-font-size: 12px;
+    --ui3n-switch-font-color: var(--color-text-control-primary-default);
+    --ui3n-switch-font-weight: 500;
+
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+
   .body {
-    background-color: var(--ui3n-switch-color);
+    position: relative;
+    background-color: var(--ui3n-switch-off-color);
+    height: var(--ui3n-switch-size);
+    width: calc(var(--ui3n-switch-size) * 2);
+    border-radius: var(--ui3n-switch-size);
+    cursor: pointer;
+  }
+
+  .checked {
+    .body {
+      background-color: var(--ui3n-switch-color);
+    }
+
+    .dot {
+      border-color: var(--ui3n-switch-color);
+    }
+  }
+
+  .noLabel {
+    gap: 0;
   }
 
   .dot {
-    border-color: var(--ui3n-switch-color);
+    --ui3n-switch-dot-size: calc(var(--ui3n-switch-size) / 4 * 3);
+
+    position: absolute;
+    width: var(--ui3n-switch-dot-size);
+    height: var(--ui3n-switch-dot-size);
+    border-radius: 50%;
+    background-color: var(--color-bg-control-primary-default);
+    top: 0;
+    margin: calc(var(--ui3n-switch-size) / 8);
+    transition: all 250ms ease-in-out;
+  }
+
+  .left {
+    left: 0;
+  }
+
+  .right {
+    left: calc(100% - var(--ui3n-switch-size));
+  }
+
+  .label {
+    font-size: var(--ui3n-switch-font-size);
+    font-weight: var(--ui3n-switch-font-weight);
+    color: var(--ui3n-switch-font-color);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .disabled {
+    opacity: 0.7;
+    pointer-events: none;
   }
-}
-
-.noLabel {
-  gap: 0;
-}
-
-.dot {
-  --ui3n-switch-dot-size: calc(var(--ui3n-switch-size) / 4 * 3);
-
-  position: absolute;
-  width: var(--ui3n-switch-dot-size);
-  height: var(--ui3n-switch-dot-size);
-  border-radius: 50%;
-  background-color: var(--color-bg-control-primary-default);
-  top: 0;
-  margin: calc(var(--ui3n-switch-size) / 8);
-  transition: all 250ms ease-in-out;
-}
-
-.left {
-  left: 0;
-}
-
-.right {
-  left: calc(100% - var(--ui3n-switch-size));
-}
-
-.label {
-  font-size: var(--ui3n-switch-font-size);
-  font-weight: var(--ui3n-switch-font-weight);
-  color: var(--ui3n-switch-font-color);
-  user-select: none;
-  cursor: pointer;
-}
-
-.disabled {
-  opacity: 0.7;
-  pointer-events: none;
-}
 </style>

package/src/components/ui3n-table/composables/useTable.ts

@@ -15,7 +15,7 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
     sortOrder: setInitialSortOrder(),
     fieldAsRowKey: setFieldAsRowKey(),
   });
-  const selectedRows: Ref<Set<T> | Array<T[keyof T]>> = !!currentConfig.value?.fieldAsRowKey
+  const selectedRows: Ref<Set<T> | Array<T[keyof T]>> = currentConfig.value?.fieldAsRowKey
     ? ref([])
     : (ref(new Set()) as Ref<Set<T>>);
   const hasGroupActionsRow = ref(false);
@@ -25,8 +25,8 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
   const selectedRowsArray = computed(() =>
     isRowKeyUsed.value
       ? props.body.content.filter(row =>
-          (selectedRows.value as Array<T[keyof T]>).includes(row[currentConfig.value.fieldAsRowKey as keyof T]),
-        )
+        (selectedRows.value as Array<T[keyof T]>).includes(row[currentConfig.value.fieldAsRowKey as keyof T]),
+      )
       : Array.from(selectedRows.value as Set<T>),
   );
   const selectedRowsSize = computed(() =>
@@ -53,9 +53,13 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
   function setFieldAsRowKey() {
     const { config = {}, body } = props;
     const { fieldAsRowKey } = config;
-    if (fieldAsRowKey && fieldAsRowKey in get(body, ['content', 0], {})) return fieldAsRowKey;
+    if (fieldAsRowKey && fieldAsRowKey in get(body, ['content', 0], {})) {
+      return fieldAsRowKey;
+    }
 
-    if ('id' in get(body, ['content', 0], {})) return 'id';
+    if ('id' in get(body, ['content', 0], {})) {
+      return 'id';
+    }
 
     return undefined;
   }
@@ -95,7 +99,9 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
   }
 
   function getRowStyle(row: T): Record<string, string> {
-    if (isEmpty(props.body.rowsStyle) || !isRowKeyUsed.value) return {};
+    if (isEmpty(props.body.rowsStyle) || !isRowKeyUsed.value) {
+      return {};
+    }
 
     const rowKey = row[currentConfig.value.fieldAsRowKey as keyof T] as string | number;
     // @ts-expect-error
@@ -133,7 +139,7 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
       }
     } else {
       isRowKeyUsed.value &&
-        (selectedRows.value as Array<T[keyof T]>).push(row[currentConfig.value.fieldAsRowKey as keyof T]);
+      (selectedRows.value as Array<T[keyof T]>).push(row[currentConfig.value.fieldAsRowKey as keyof T]);
       !isRowKeyUsed.value && (selectedRows.value as Set<T>).add(row);
     }
   }
@@ -151,9 +157,11 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
   }
 
   function toggleSelectedRows(val: Ui3nCheckboxValue) {
-    if (props.config.selectable !== 'multiple') return;
+    if (props.config.selectable !== 'multiple') {
+      return;
+    }
 
-    if (!!val) {
+    if (val) {
       for (const item of props.body.content) {
         if (!isRowSelected(item)) {
           processSelection(item, true);

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

@@ -1,16 +1,19 @@
 <script lang="ts" setup>
-  import { computed } from 'vue'
-  import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue'
+  import { computed } from 'vue';
+  import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
   import type { Ui3nTableSortIconProps } from './types';
 
-  const props = defineProps<Ui3nTableSortIconProps>()
+  const props = defineProps<Ui3nTableSortIconProps>();
 
-  const iconSize = computed(() => props.size ? +props.size : 16)
-  const iconColor = computed(() => props.color || 'var(--color-icon-table-primary-default)')
+  const iconSize = computed(() => props.size ? +props.size : 16);
+  const iconColor = computed(() => props.color || 'var(--color-icon-table-primary-default)');
 </script>
 
 <template>
-  <transition mode="out-in" name="fade">
+  <transition
+    mode="out-in"
+    name="fade"
+  >
     <ui3n-icon
       :key="value === 'asc' ? 'round-arrow-upward' : 'round-arrow-downward'"
       :icon="value === 'asc' ? 'round-arrow-upward' : 'round-arrow-downward'"

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

@@ -111,7 +111,9 @@
     <div :class="$style.body">
       <template v-if="config?.showNoDataMessage && !size(body.content)">
         <slot name="no-data">
-          <div :class="$style.noData">No data</div>
+          <div :class="$style.noData">
+            No data
+          </div>
         </slot>
       </template>
 
@@ -169,9 +171,9 @@
                   :column-style="config?.columnStyle"
                   :cell="row[col.key]"
                 >
-                <span :class="$style.cell">
-                  {{ row[col.key] }}
-                </span>
+                  <span :class="$style.cell">
+                    {{ row[col.key] }}
+                  </span>
                 </slot>
               </div>
             </template>
@@ -188,7 +190,7 @@
 </template>
 
 <style lang="scss" module>
-  @use '../../assets/styles/mixins' as mixins;
+  @use '@/assets/styles/mixins.scss' as mixins;
 
   .ui3nTable {
     --ui3n-table-columns-width: auto;