@v1nt1248/3nclient-lib 0.1.10 → 0.1.12

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -37,6 +37,7 @@
     "build:plugins": "LIB_NAME=plugins vite build",
     "build:utils": "LIB_NAME=utils vite build",
     "build": "pnpm run clean:dist && pnpm run build:components && pnpm run build:plugins && pnpm run build:utils && pnpm run copy:css",
+    "pack": "pnpm run build && npm pack && cp *.tgz ./dist && rm *.tgz",
     "preview": "vite preview",
     "stylelint": "stylelint --config .stylelint.config.cjs 'src/**/*.{vue,scss}'",
     "stylelint:fix": "stylelint --config .stylelint.config.cjs --fix 'src/**/*.{vue,scss}'",

package/src/components/types/index.ts

@@ -0,0 +1,5 @@
+export type ExtractComponentProps<TComponent> = TComponent extends new () => {
+  $props: infer P;
+}
+  ? P
+  : never;

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

@@ -24,9 +24,9 @@ export interface Ui3nDialogProps {
   closeOnClickOverlay?: boolean;
 }
 
-export interface Ui3nDialogComponentProps {
-  component: Component;
-  componentProps?: Record<string, any>;
+export interface Ui3nDialogComponentProps<T extends Component, P extends Record<string, unknown>> {
+  component: T;
+  componentProps?: P;
   dialogProps?: Ui3nDialogProps;
 }
 

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

@@ -1,10 +1,10 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends Component, P extends Record<string, unknown>">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { type Component, computed, nextTick, onMounted, ref } from 'vue';
 import Ui3nButton from '../ui3n-button/ui3n-button.vue';
 import type { Ui3nDialogEvent, Ui3nDialogProps, Ui3nDialogComponentProps, Ui3nDialogComponentEmits } from './types';
 
-const props = defineProps<Ui3nDialogComponentProps>();
+const props = defineProps<Ui3nDialogComponentProps<T, P>>();
 const emits = defineEmits<Ui3nDialogComponentEmits>();
 
 const show = ref(true);
@@ -36,8 +36,14 @@ onMounted(() => {
   if (dialogElement.value) {
     dialogElement.value.style.setProperty('--dialog-confirm-button-color', dialogProps.value.confirmButtonColor!);
     dialogElement.value.style.setProperty('--dialog-cancel-button-color', dialogProps.value.cancelButtonColor!);
-    dialogElement.value.style.setProperty('--dialog-confirm-background-color', dialogProps.value.confirmButtonBackground!);
-    dialogElement.value.style.setProperty('--dialog-cancel-background-color', dialogProps.value.cancelButtonBackground!);
+    dialogElement.value.style.setProperty(
+      '--dialog-confirm-background-color',
+      dialogProps.value.confirmButtonBackground!,
+    );
+    dialogElement.value.style.setProperty(
+      '--dialog-cancel-background-color',
+      dialogProps.value.cancelButtonBackground!,
+    );
   }
 
   if (dialogElement.value) {
@@ -49,11 +55,7 @@ onMounted(() => {
 
 const selectData = (value: any) => {
   data.value = value;
-  if (
-    !dialogProps.value.confirmButton
-    && !dialogProps.value.cancelButton
-    && props.dialogProps?.onConfirm
-  ) {
+  if (!dialogProps.value.confirmButton && !dialogProps.value.cancelButton && props.dialogProps?.onConfirm) {
     props.dialogProps?.onConfirm(data.value);
     closeDialog();
   }
@@ -63,7 +65,7 @@ const validate = (value: boolean) => {
   isValid.value = value;
 };
 
-const closeDialog = (arg?: { ev?: Event, withAction?: boolean }) => {
+const closeDialog = (arg?: { ev?: Event; withAction?: boolean }) => {
   const { ev, withAction = true } = arg || {};
   if (ev) {
     ev.stopImmediatePropagation();
@@ -112,10 +114,7 @@ const handleEvent = (event: Event, eventName: Ui3nDialogEvent) => {
   <div
     v-if="show"
     :class="$style.overlay"
-    @click="dialogProps.closeOnClickOverlay
-      ? closeDialog({ ev: $event })
-      : startEmit('click-overlay')
-    "
+    @click="dialogProps.closeOnClickOverlay ? closeDialog({ ev: $event }) : startEmit('click-overlay')"
   >
     <div
       ref="dialogElement"
@@ -123,7 +122,7 @@ const handleEvent = (event: Event, eventName: Ui3nDialogEvent) => {
       :class="[$style.dialog, ...dialogProps.cssClass]"
       :style="cssStyle"
       @keydown.esc.stop="startEmit('cancel')"
-      @keydown.enter.stop=" isValid && startEmit('confirm')"
+      @keydown.enter.stop="isValid && startEmit('confirm')"
     >
       <div
         v-if="dialogProps.title"
@@ -150,9 +149,10 @@ const handleEvent = (event: Event, eventName: Ui3nDialogEvent) => {
         :style="dialogProps.contentCssStyle"
         @click.stop
       >
+        <!-- @vue-ignore  -->
         <component
           :is="component"
-          v-bind="componentProps"
+          v-bind="componentProps as Object"
           @select="selectData"
           @validate="validate"
           @close="closeDialog({ ev: $event })"
@@ -163,10 +163,7 @@ const handleEvent = (event: Event, eventName: Ui3nDialogEvent) => {
 
       <div
         v-if="dialogProps.confirmButton || dialogProps.cancelButton"
-        :class="[
-          $style.actions,
-          dialogProps.confirmButton && dialogProps.cancelButton && $style.bothBtns,
-        ]"
+        :class="[$style.actions, dialogProps.confirmButton && dialogProps.cancelButton && $style.bothBtns]"
         @click.stop
       >
         <ui3n-button
@@ -194,7 +191,7 @@ const handleEvent = (event: Event, eventName: Ui3nDialogEvent) => {
 </template>
 
 <style lang="scss" module>
-@import "../../assets/styles/mixins";
+@import '../../assets/styles/mixins';
 
 .overlay {
   position: fixed;

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
 import type { Ui3nIconEmits, Ui3nIconProps } from './types';
 
@@ -15,20 +15,23 @@ const props = withDefaults(
 );
 const emits = defineEmits<Ui3nIconEmits>();
 
-const onLoad = (value: any) => {
+const iconName = computed(() => `ic:${props.icon}`);
+
+function onLoad(value: unknown) {
   if (props.onLoad) {
     props.onLoad(value);
   }
-};
-const onClick = (ev: Event) => {
+}
+
+function onClick(ev: Event) {
   emits('click', ev);
-};
+}
 </script>
 
 <template>
   <icon
     :class="$style.icon"
-    :icon="icon"
+    :icon="iconName"
     :title="title"
     :inline="inline"
     :width="width"

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

@@ -149,7 +149,7 @@ const validate = (text: string) => {
 
     <ui3n-icon
       v-if="displayStateMode === 'success' && displayStateWithIcon && !isFocused"
-      icon="check-circle-outline"
+      icon="sharp-check-circle-outline"
       :width="16"
       :height="16"
       color="var(--success-content-default)"

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

@@ -19,25 +19,25 @@ const props = withDefaults(
 const stylesByTypes = {
   success: {
     color: 'var(--success-content-default)',
-    icon: 'warning',
+    icon: 'round-warning',
     iconColor: 'var(--success-fill-default)',
     iconRotate: 0,
   },
   warning: {
     color: 'var(--warning-content-default)',
-    icon: 'warning',
+    icon: 'round-warning',
     iconColor: 'var(--warning-fill-default)',
     iconRotate: 0,
   },
   info: {
     color: 'var(--info-content-default)',
-    icon: 'info',
+    icon: 'round-info',
     iconColor: 'var(--info-fill-default)',
     iconRotate: 90,
   },
   error: {
     color: 'var(--error-content-default)',
-    icon: 'info',
+    icon: 'round-info',
     iconColor: 'var(--error-fill-default)',
     iconRotate: 90,
   },

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

@@ -12,8 +12,8 @@
 <template>
   <transition mode="out-in" name="fade">
     <ui3n-icon
-      :key="value === 'asc' ? 'arrow-downward' : 'arrow-upward'"
-      :icon="value === 'asc' ? 'arrow-downward' : 'arrow-upward'"
+      :key="value === 'asc' ? 'baseline-arrow-downward' : 'baseline-arrow-upward'"
+      :icon="value === 'asc' ? 'baseline-arrow-downward' : 'baseline-arrow-upward'"
       :width="iconSize"
       :height="iconSize"
       :color="iconColor"

package/dist/plugins/icons/icons.d.ts

@@ -1,2 +0,0 @@
-import { Plugin } from 'vue';
-export declare const useIcons: Plugin;