@v1nt1248/3nclient-lib 0.1.10 → 0.1.11

package/dist/components/types/index.d.ts

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

package/dist/components/ui3n-dialog/types.d.ts

@@ -21,9 +21,9 @@ export interface Ui3nDialogProps {
     cancelButtonBackground?: string;
     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;
 }
 export interface Ui3nDialogComponentEmits {

package/dist/components/ui3n-dialog/ui3n-dialog.vue.d.ts

@@ -1,26 +1,31 @@
-import { Ui3nDialogComponentProps } from './types';
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<Ui3nDialogComponentProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    open: (value?: any) => void;
-    "before-close": (value?: any) => void;
-    close: (value?: any) => void;
-    confirm: (value?: any) => void;
-    cancel: (value?: any) => void;
-    "click-overlay": (value?: any) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<Ui3nDialogComponentProps>>> & {
-    onClose?: ((value?: any) => any) | undefined;
-    onConfirm?: ((value?: any) => any) | undefined;
-    onCancel?: ((value?: any) => any) | undefined;
-    onOpen?: ((value?: any) => any) | undefined;
-    "onBefore-close"?: ((value?: any) => any) | undefined;
-    "onClick-overlay"?: ((value?: any) => any) | undefined;
-}, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
+import { Component } from 'vue';
+import { Ui3nDialogComponentProps, Ui3nDialogComponentEmits } from './types';
+declare const _default: <T extends Component, P extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_Prettify<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_Prettify<Pick<Partial<{}> & Omit<{
+        onClose?: ((value?: any) => any) | undefined;
+        onCancel?: ((value?: any) => any) | undefined;
+        onOpen?: ((value?: any) => any) | undefined;
+        "onBefore-close"?: ((value?: any) => any) | undefined;
+        onConfirm?: ((value?: any) => any) | undefined;
+        "onClick-overlay"?: ((value?: any) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>> & {
+        onClose?: ((value?: any) => any) | undefined;
+        onCancel?: ((value?: any) => any) | undefined;
+        onOpen?: ((value?: any) => any) | undefined;
+        "onBefore-close"?: ((value?: any) => any) | undefined;
+        onConfirm?: ((value?: any) => any) | undefined;
+        "onClick-overlay"?: ((value?: any) => any) | undefined;
+    }, never>, "onClose" | "onCancel" | "onOpen" | "onBefore-close" | "onConfirm" | "onClick-overlay"> & Ui3nDialogComponentProps<T, P>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ReturnType<() => {}>;
+    emit: Ui3nDialogComponentEmits & {};
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { Component } from 'vue';
 import { default as Ui3nButton } from './components/ui3n-button/ui3n-button.vue';
 import { default as Ui3nChip } from './components/ui3n-chip/ui3n-chip.vue';
 import { default as Ui3nCheckbox } from './components/ui3n-checkbox/ui3n-checkbox.vue';
@@ -33,9 +34,10 @@ export * from './utils';
 export * from './plugins';
 export * from './directives';
 export * from './components';
+export * from './components/types';
 declare module 'vue' {
     interface ComponentCustomProperties {
-        $openDialog: (params: Ui3nDialogComponentProps) => DialogInstance | undefined;
+        $openDialog: <T extends Component, P extends Record<string, unknown>>(params: Ui3nDialogComponentProps<T, P>) => DialogInstance | undefined;
         $createNotice: (params: Ui3nNotificationProps) => void;
         $locale: string;
         $tr: (key: string, placeholders?: Record<string, string>) => string;
@@ -75,7 +77,7 @@ declare module 'vue' {
 }
 declare module 'pinia' {
     interface PiniaCustomProperties {
-        $openDialog: (params: Ui3nDialogComponentProps) => DialogInstance | undefined;
+        $openDialog: <T extends Component, P extends Record<string, unknown>>(params: Ui3nDialogComponentProps<T, P>) => DialogInstance | undefined;
         $createNotice: (params: Ui3nNotificationProps) => void;
         $emitter: {
             on: (type: string | symbol, handler: CbFunction) => void;

package/dist/plugins/dialogs/dialogs.d.ts

@@ -4,6 +4,6 @@ import { DialogInstance } from './types';
 export declare const dialogs: Plugin;
 declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
-        $openDialog: (params: Ui3nDialogComponentProps) => DialogInstance | undefined;
+        $openDialog: <T extends Component, P extends Record<string, unknown>>(params: Ui3nDialogComponentProps<T, P>) => DialogInstance | undefined;
     }
 }

package/dist/plugins/dialogs/store-dialogs.d.ts

@@ -1,4 +1,5 @@
+import { Component } from 'vue';
 import { Ui3nDialogComponentProps } from '../../components/ui3n-dialog/types';
 export declare function storeDialogs(context: any): {
-    $openDialog: (params: Ui3nDialogComponentProps) => void;
+    $openDialog: <T extends Component, P extends Record<string, unknown>>(params: Ui3nDialogComponentProps<T, P>) => void;
 };

package/dist/plugins/dialogs/types.d.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, VNode } from 'vue';
+import { Component, InjectionKey, VNode } from 'vue';
 import { Ui3nDialogComponentProps } from '../../components/ui3n-dialog/types';
 export type DialogInstance = {
     id: string;
@@ -7,6 +7,6 @@ export type DialogInstance = {
     destroy: () => void;
 };
 export interface DialogsPlugin {
-    $openDialog: (params: Ui3nDialogComponentProps) => DialogInstance | undefined;
+    $openDialog: <T extends Component, P extends Record<string, unknown>>(params: Ui3nDialogComponentProps<T, P>) => DialogInstance | undefined;
 }
 export declare const DIALOGS_KEY: InjectionKey<DialogsPlugin>;

package/dist/ui3n-components.d.ts

@@ -27,6 +27,7 @@ import { default as Ui3nClickOutside } from './directives/ui3n-click-outside';
 import { default as Ui3nResize } from './directives/ui3n-resize';
 export * from './directives';
 export * from './components';
+export * from './components/types';
 declare module 'vue' {
     interface GlobalComponents {
         Ui3nBadge: typeof Ui3nBadge;

package/dist/ui3n-components.js

@@ -14168,7 +14168,13 @@ const PM = /* @__PURE__ */ Eg({
       };
     }), w = DA(() => ({ width: `${a.value.width}px`, ...a.value.cssStyle }));
     iI(() => {
-      r.value && (r.value.style.setProperty("--dialog-confirm-button-color", a.value.confirmButtonColor), r.value.style.setProperty("--dialog-cancel-button-color", a.value.cancelButtonColor), r.value.style.setProperty("--dialog-confirm-background-color", a.value.confirmButtonBackground), r.value.style.setProperty("--dialog-cancel-background-color", a.value.cancelButtonBackground)), r.value && ya(() => {
+      r.value && (r.value.style.setProperty("--dialog-confirm-button-color", a.value.confirmButtonColor), r.value.style.setProperty("--dialog-cancel-button-color", a.value.cancelButtonColor), r.value.style.setProperty(
+        "--dialog-confirm-background-color",
+        a.value.confirmButtonBackground
+      ), r.value.style.setProperty(
+        "--dialog-cancel-background-color",
+        a.value.cancelButtonBackground
+      )), r.value && ya(() => {
         r.value.focus();
       });
     });
@@ -14238,10 +14244,7 @@ const PM = /* @__PURE__ */ Eg({
         ], 6)) : ZA("", !0),
         a.value.confirmButton || a.value.cancelButton ? (oA(), uA("div", {
           key: 2,
-          class: BA([
-            k.$style.actions,
-            a.value.confirmButton && a.value.cancelButton && k.$style.bothBtns
-          ]),
+          class: BA([k.$style.actions, a.value.confirmButton && a.value.cancelButton && k.$style.bothBtns]),
           onClick: y[8] || (y[8] = XQ(() => {
           }, ["stop"]))
         }, [

package/dist/ui3n-plugins.d.ts

@@ -1,3 +1,4 @@
+import { Component } from 'vue';
 import { i18n } from './plugins/i18n/i18n';
 import { storeI18n } from './plugins/i18n/store-i18n';
 import { I18N_KEY, I18nOptions, I18nPlugin } from './plugins/i18n/types';
@@ -15,7 +16,7 @@ import { storeVueBus } from './plugins/vue-bus/store-vue-bus';
 import { VUEBUS_KEY, CbFunction, VueEventBus, VueBusPlugin } from './plugins/vue-bus/types';
 declare module 'vue' {
     interface ComponentCustomProperties {
-        $openDialog: (params: Ui3nDialogComponentProps) => DialogInstance | undefined;
+        $openDialog: <T extends Component, P extends Record<string, unknown>>(params: Ui3nDialogComponentProps<T, P>) => DialogInstance | undefined;
         $createNotice: (params: Ui3nNotificationProps) => void;
         $locale: string;
         $tr: (key: string, placeholders?: Record<string, string>) => string;
@@ -25,7 +26,7 @@ declare module 'vue' {
 }
 declare module 'pinia' {
     interface PiniaCustomProperties {
-        $openDialog: (params: Ui3nDialogComponentProps) => DialogInstance | undefined;
+        $openDialog: <T extends Component, P extends Record<string, unknown>>(params: Ui3nDialogComponentProps<T, P>) => DialogInstance | undefined;
         $createNotice: (params: Ui3nNotificationProps) => void;
         $emitter: {
             on: (type: string | symbol, handler: CbFunction) => void;

package/dist/ui3n-plugins.js

@@ -5465,7 +5465,13 @@ const bv = /* @__PURE__ */ Te({
       };
     }), L = ts(() => ({ width: `${I.value.width}px`, ...I.value.cssStyle }));
     go(() => {
-      b.value && (b.value.style.setProperty("--dialog-confirm-button-color", I.value.confirmButtonColor), b.value.style.setProperty("--dialog-cancel-button-color", I.value.cancelButtonColor), b.value.style.setProperty("--dialog-confirm-background-color", I.value.confirmButtonBackground), b.value.style.setProperty("--dialog-cancel-background-color", I.value.cancelButtonBackground)), b.value && H0(() => {
+      b.value && (b.value.style.setProperty("--dialog-confirm-button-color", I.value.confirmButtonColor), b.value.style.setProperty("--dialog-cancel-button-color", I.value.cancelButtonColor), b.value.style.setProperty(
+        "--dialog-confirm-background-color",
+        I.value.confirmButtonBackground
+      ), b.value.style.setProperty(
+        "--dialog-cancel-background-color",
+        I.value.cancelButtonBackground
+      )), b.value && H0(() => {
         b.value.focus();
       });
     });
@@ -5535,10 +5541,7 @@ const bv = /* @__PURE__ */ Te({
         ], 6)) : et("", !0),
         I.value.confirmButton || I.value.cancelButton ? (Ln(), xt("div", {
           key: 2,
-          class: Tn([
-            M.$style.actions,
-            I.value.confirmButton && I.value.cancelButton && M.$style.bothBtns
-          ]),
+          class: Tn([M.$style.actions, I.value.confirmButton && I.value.cancelButton && M.$style.bothBtns]),
           onClick: S[8] || (S[8] = Ce(() => {
           }, ["stop"]))
         }, [

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.11",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

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;