@v1nt1248/3nclient-lib 0.1.6 → 0.1.7

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

@@ -0,0 +1,40 @@
+import type { Component } from 'vue';
+
+export type Ui3nDialogEvent = 'open' | 'before-close' | 'close' | 'confirm' | 'cancel' | 'click-overlay';
+
+export interface Ui3nDialogProps {
+  teleport?: string;
+  title?: string;
+  width?: string | number;
+  cssClass?: string[];
+  cssStyle?: Record<string, string>;
+  contentCssClass?: string[];
+  contentCssStyle?: Record<string, string>;
+  confirmButton?: boolean;
+  cancelButton?: boolean;
+  onClose?: () => void;
+  onConfirm?: (data: any) => void;
+  onCancel?: (data: any) => void;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  confirmButtonColor?: string;
+  cancelButtonColor?: string;
+  confirmButtonBackground?: string;
+  cancelButtonBackground?: string;
+  closeOnClickOverlay?: boolean;
+}
+
+export interface Ui3nDialogComponentProps {
+  component: Component;
+  componentProps?: Record<string, any>;
+  dialogProps?: Ui3nDialogProps;
+}
+
+export interface Ui3nDialogComponentEmits {
+  (ev: 'open', value?: any): void;
+  (ev: 'before-close', value?: any): void;
+  (ev: 'close', value?: any): void;
+  (ev: 'confirm', value?: any): void;
+  (ev: 'cancel', value?: any): void;
+  (ev: 'click-overlay', value?: any): void;
+}

package/src/components/{ui3n-dialog.vue → ui3n-dialog/ui3n-dialog.vue}

@@ -1,55 +1,10 @@
 <script lang="ts" setup>
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { computed, nextTick, onMounted, ref } from 'vue';
-import type { Component } from 'vue';
-import Ui3nButton from './ui3n-button.vue';
-
-export type Ui3nDialogEvent = 'open' | 'before-close' | 'close' | 'confirm' | 'cancel' | 'click-overlay';
-
-export interface Ui3nDialogProps {
-  teleport?: string;
-  title?: string;
-  width?: string | number;
-  cssClass?: string[];
-  cssStyle?: Record<string, string>;
-  contentCssClass?: string[];
-  contentCssStyle?: Record<string, string>;
-  confirmButton?: boolean;
-  cancelButton?: boolean;
-  onClose?: () => void;
-  onConfirm?: (data: any) => void;
-  onCancel?: (data: any) => void;
-  confirmButtonText?: string;
-  cancelButtonText?: string;
-  confirmButtonColor?: string;
-  cancelButtonColor?: string;
-  confirmButtonBackground?: string;
-  cancelButtonBackground?: string;
-  closeOnClickOverlay?: boolean;
-}
-
-export interface Ui3nDialogComponentProps {
-  component: Component;
-  componentProps?: Record<string, any>;
-  dialogProps?: Ui3nDialogProps;
-}
-
-export interface Ui3nDialogComponentEmits {
-  (ev: 'open', value?: any): void;
-
-  (ev: 'before-close', value?: any): void;
-
-  (ev: 'close', value?: any): void;
-
-  (ev: 'confirm', value?: any): void;
-
-  (ev: 'cancel', value?: any): void;
-
-  (ev: 'click-overlay', value?: any): void;
-}
+import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+import type { Ui3nDialogEvent, Ui3nDialogProps, Ui3nDialogComponentProps, Ui3nDialogComponentEmits } from './types';
 
 const props = defineProps<Ui3nDialogComponentProps>();
-
 const emits = defineEmits<Ui3nDialogComponentEmits>();
 
 const show = ref(true);
@@ -92,7 +47,6 @@ onMounted(() => {
   }
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const selectData = (value: any) => {
   data.value = value;
   if (
@@ -240,7 +194,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-drop-files/types.ts

@@ -0,0 +1,15 @@
+import { VNode } from 'vue';
+
+export interface Ui3nDropFilesProps {
+  title?: string;
+  text?: string;
+  additionalText?: string;
+}
+
+export interface Ui3nDropFilesEmits {
+  (e: 'select', fileList: FileList): void;
+}
+
+export interface Ui3nDropFilesSlots {
+  default: () => VNode;
+}

package/src/components/{ui3n-drop-files.vue → ui3n-drop-files/ui3n-drop-files.vue}

@@ -1,15 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-
-export interface Ui3nDropFilesProps {
-  title?: string;
-  text?: string;
-  additionalText?: string;
-}
-
-export interface Ui3nDropFilesEmits {
-  (e: 'select', fileList: FileList): void;
-}
+import type { Ui3nDropFilesEmits, Ui3nDropFilesProps, Ui3nDropFilesSlots } from './types';
 
 const props = withDefaults(
   defineProps<Ui3nDropFilesProps>(),
@@ -20,6 +11,7 @@ const props = withDefaults(
   },
 );
 const emits = defineEmits<Ui3nDropFilesEmits>();
+defineSlots<Ui3nDropFilesSlots>();
 
 const wrapperElement = ref<HTMLDivElement | null>(null);
 const wrapperElementHeight = ref(0);

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

@@ -0,0 +1,9 @@
+export interface Ui3nEmojiProps {
+  emoji: string;
+  size?: string | number;
+  readonly?: boolean;
+}
+
+export interface Ui3nEmojiEmits {
+  (ev: 'click', value: Event): void;
+}

package/src/components/{ui3n-emoji.vue → ui3n-emoji/ui3n-emoji.vue}

@@ -1,16 +1,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
-import { emoticons } from '../constants/emoticons';
-
-export interface Ui3nEmojiProps {
-  emoji: string;
-  size?: string | number;
-  readonly?: boolean;
-}
-
-export interface Ui3nEmojiEmits {
-  (ev: 'click', value: Event): void;
-}
+import { emoticons } from '@/constants/emoticons';
+import type { Ui3nEmojiEmits, Ui3nEmojiProps } from './types';
 
 const props = withDefaults(
   defineProps<Ui3nEmojiProps>(),

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

@@ -0,0 +1,17 @@
+export interface Ui3nIconProps {
+  icon: string;
+  title?: string;
+  inline?: boolean;
+  width?: string | number;
+  height?: string | number;
+  horizontalFlip?: boolean;
+  verticalFlip?: boolean;
+  flip?: string;
+  rotate?: number;
+  color?: string;
+  onLoad?: Function;
+}
+
+export interface Ui3nIconEmits {
+  (ev: 'click', value: Event): void;
+}

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

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Icon } from '@iconify/vue';
+import type { Ui3nIconEmits, Ui3nIconProps } from './types';
+
+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) {
+    props.onLoad(value);
+  }
+};
+const onClick = (ev: Event) => {
+  emits('click', ev);
+};
+</script>
+
+<template>
+  <icon
+    :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>

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

@@ -0,0 +1,26 @@
+export interface Ui3nInputProps {
+  modelValue: string;
+  label?: string;
+  type?: 'text' | 'password';
+  placeholder?: string;
+  clearable?: boolean;
+  autofocus?: boolean;
+  icon?: string;
+  iconColor?: string;
+  rules?: Array<(v: string) => any>;
+  displayStateMode?: 'error' | 'success';
+  displayStateWithIcon?: boolean;
+  displayStateMessage?: string;
+  disabled?: boolean;
+}
+
+export interface Ui3nInputEmits {
+  (ev: 'init', value: HTMLInputElement): void;
+  (ev: 'input', value: string): void;
+  (ev: 'focus', value: Event): void;
+  (ev: 'blur', value: Event): void;
+  (ev: 'clear'): void;
+  (ev: 'change', value: string): void;
+  (ev: 'update:modelValue', value: string): void;
+  (ev: 'update:valid', value: boolean): void;
+}

package/src/components/{ui3n-input.vue → ui3n-input/ui3n-input.vue}

@@ -1,35 +1,9 @@
 <script lang="ts" setup>
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { computed, onMounted, ref, watch } from 'vue';
-import Ui3nIcon from './ui3n-icon.vue';
-import Ui3nButton from './ui3n-button.vue';
-
-export interface Ui3nInputProps {
-  modelValue: string;
-  label?: string;
-  type?: 'text' | 'password';
-  placeholder?: string;
-  clearable?: boolean;
-  autofocus?: boolean;
-  icon?: string;
-  iconColor?: string;
-  rules?: Array<(v: string) => any>;
-  displayStateMode?: 'error' | 'success';
-  displayStateWithIcon?: boolean;
-  displayStateMessage?: string;
-  disabled?: boolean;
-}
-
-export interface Ui3nInputEmits {
-  (ev: 'init', value: HTMLInputElement): void;
-  (ev: 'input', value: string): void;
-  (ev: 'focus', value: Event): void;
-  (ev: 'blur', value: Event): void;
-  (ev: 'clear'): void;
-  (ev: 'change', value: string): void;
-  (ev: 'update:modelValue', value: string): void;
-  (ev: 'update:valid', value: boolean): void;
-}
+import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
+import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+import type { Ui3nInputEmits, Ui3nInputProps } from './types';
 
 const props = defineProps<Ui3nInputProps>();
 const emits = defineEmits<Ui3nInputEmits>();
@@ -196,7 +170,7 @@ const validate = (text: string) => {
 </template>
 
 <style lang="scss" module>
-@import "../assets/styles/mixins";
+@import "../../assets/styles/mixins";
 
 .input {
   --ui3n-input-height: var(--spacing-l);

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

@@ -0,0 +1,17 @@
+import { VNode } from 'vue';
+
+export interface Ui3nListProps<T> {
+  title?: string;
+  sticky?: boolean;
+  items: T[];
+  disabled?: boolean;
+}
+
+export interface Ui3nListEmits<T> {
+  (ev: 'select', value: { value: T; index: number }): void;
+}
+
+export interface Ui3nListSlots<T> {
+  title?: () => VNode;
+  item?: ({ item, index }: { item: T; index: number }) => VNode;
+}

package/src/components/{ui3n-list.vue → ui3n-list/ui3n-list.vue}

@@ -1,20 +1,5 @@
 <script lang="ts" setup generic="T extends { id?: string }">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export interface Ui3nListProps<T> {
-  title?: string;
-  sticky?: boolean;
-  items: T[];
-  disabled?: boolean;
-}
-
-export interface Ui3nListEmits<T> {
-  (ev: 'select', value: { value: T, index: number }): void;
-}
-
-export interface Ui3nListSlots<T> {
-  title?: () => any;
-  item?: ({ item, index }: { item: T, index: number }) => any;
-}
+import type { Ui3nListEmits, Ui3nListProps, Ui3nListSlots } from './types';
 
 const props = withDefaults(defineProps<Ui3nListProps<T>>(), {
   title: '',

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

@@ -0,0 +1,11 @@
+export interface Ui3nNotificationProps {
+  id?: string;
+  type?: 'success' | 'warning' | 'info' | 'error';
+  content: string;
+  position?: 'left' | 'center' | 'right';
+  duration?: number;
+  withIcon?: boolean;
+  teleport?: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+}

package/src/components/{ui3n-notification.vue → ui3n-notification/ui3n-notification.vue}

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import Ui3nIcon from './ui3n-icon.vue';
-import Ui3nButton from './ui3n-button.vue';
-import type { Ui3nNotificationProps } from '../constants';
+import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
+import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+import type { Ui3nNotificationProps } from './types';
 
 const props = withDefaults(
   defineProps<Ui3nNotificationProps>(),

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

@@ -0,0 +1,18 @@
+export interface Ui3nProgressCircularProps {
+  value?: number | string;
+  size?: number | string;
+  width?: number | string;
+  withText?: boolean;
+  bgColor?: string;
+  color?: string;
+  indeterminate?: boolean;
+}
+
+export interface Ui3nProgressLinearProps {
+  value?: number | string;
+  height?: number | string;
+  withText?: boolean;
+  bgColor?: string;
+  color?: string;
+  indeterminate?: boolean;
+}

package/src/components/{ui3n-progress-circular.vue → ui3n-progress/ui3n-progress-circular.vue}

@@ -1,16 +1,7 @@
 <script lang="ts" setup>
 import { computed, onBeforeMount, onBeforeUnmount, ref, useCssModule } from 'vue';
 import { toNumber } from 'lodash';
-
-export interface Ui3nProgressCircularProps {
-  value?: number | string;
-  size?: number | string;
-  width?: number | string;
-  withText?: boolean;
-  bgColor?: string;
-  color?: string;
-  indeterminate?: boolean;
-}
+import type { Ui3nProgressCircularProps } from './types';
 
 const thresholdSize = 64;
 const indeterminateModeValues = [1, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 99];

package/src/components/{ui3n-progress-linear.vue → ui3n-progress/ui3n-progress-linear.vue}

@@ -1,15 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { toNumber } from 'lodash';
-
-export interface Ui3nProgressLinearProps {
-  value?: number | string;
-  height?: number | string;
-  withText?: boolean;
-  bgColor?: string;
-  color?: string;
-  indeterminate?: boolean;
-}
+import type { Ui3nProgressLinearProps } from './types';
 
 const thresholdHeight = 12;
 const thresholdValue = 5;

package/src/components/ui3n-step-line-bar/types.ts

@@ -0,0 +1,5 @@
+export interface Ui3nStepLineBarProps {
+  label: string;
+  current: number;
+  steps: number;
+}

package/src/components/{ui3n-step-line-bar.vue → ui3n-step-line-bar/ui3n-step-line-bar.vue}

@@ -1,9 +1,5 @@
 <script lang="ts" setup>
-export interface Ui3nStepLineBarProps {
-  label: string;
-  current: number;
-  steps: number;
-}
+import type { Ui3nStepLineBarProps } from './types';
 
 withDefaults(
   defineProps<Ui3nStepLineBarProps>(),

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

@@ -0,0 +1,17 @@
+import { VNode } from 'vue';
+
+export interface Ui3nSwitchProps {
+  modelValue: boolean;
+  size?: number | string;
+  color?: string;
+  disabled?: boolean;
+}
+
+export interface Ui3nSwitchEmits {
+  (ev: 'change', value: boolean): void;
+  (ev: 'update:modelValue', value: boolean): void;
+}
+
+export interface Ui3nSwitchSlots {
+  default: () => VNode;
+}

package/src/components/{ui3n-switch.vue → ui3n-switch/ui3n-switch.vue}

@@ -1,21 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch, useSlots } from 'vue';
-
-export interface Ui3nSwitchProps {
-  modelValue: boolean;
-  size?: number | string;
-  color?: string;
-  disabled?: boolean;
-}
-
-export interface Ui3nSwitchEmits {
-  (ev: 'change', value: boolean): void;
-  (ev: 'update:modelValue', value: boolean): void;
-}
-
-export interface Ui3nSwitchSlots {
-  default: () => any;
-}
+import type { Ui3nSwitchEmits, Ui3nSwitchProps, Ui3nSwitchSlots } from './types';
 
 const props = withDefaults(
   defineProps<Ui3nSwitchProps>(),

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

@@ -7,7 +7,7 @@ import {
   Ui3nTableProps,
   Ui3nTableSort,
 } from '@/components/ui3n-table/types';
-import type { Ui3nCheckboxValue } from '../../ui3n-checkbox.vue';
+import type { Ui3nCheckboxValue } from '@/components/ui3n-checkbox/types';
 
 export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<T>, emits: Ui3nTableEmits<T>) {
   const tableEl = ref<HTMLDivElement | null>(null);

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

@@ -78,3 +78,9 @@ export type Ui3nTableSlots<T extends Ui3nTableBodyBaseItem, K extends string & k
   Ui3nTableHeaderCellSlot<T, K> &
   Ui3nTableBodyRowSlot<T> &
   Ui3nTableBodyRowCellSlot<T, K>;
+
+export interface Ui3nTableSortIconProps {
+  size?: string | number;
+  color?: string;
+  value: 'asc' | 'desc';
+}

package/src/components/{ui3n-table-sort-icon.vue → ui3n-table/ui3n-table-sort-icon.vue}

@@ -1,12 +1,7 @@
 <script lang="ts" setup>
   import { computed } from 'vue'
-  import Ui3nIcon from './ui3n-icon.vue'
-
-  export interface Ui3nTableSortIconProps {
-    size?: string | number;
-    color?: string;
-    value: 'asc' | 'desc';
-  }
+  import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue'
+  import type { Ui3nTableSortIconProps } from './types';
 
   const props = defineProps<Ui3nTableSortIconProps>()
 

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

@@ -6,9 +6,9 @@ import type {
   Ui3nTableProps,
   Ui3nTableSlots,
 } from './types';
-import Ui3nButton from '../ui3n-button.vue';
-import Ui3nCheckbox from '../ui3n-checkbox.vue';
-import Ui3nTableSortIcon from '../ui3n-table-sort-icon.vue';
+import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+import Ui3nCheckbox from '../ui3n-checkbox/ui3n-checkbox.vue';
+import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
 
 const props = defineProps<Ui3nTableProps<T>>();
 const emits = defineEmits<Ui3nTableEmits<T>>();

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

@@ -0,0 +1,19 @@
+import { VNode } from 'vue';
+
+export interface Ui3nTabsProps {
+  modelValue: number;
+  itemDirection?: 'horizontal' | 'vertical';
+  activeColor?: string;
+  inactiveColor?: string;
+  indicatorColor?: string;
+  indicatorSize?: number | string;
+  indicatorPosition?: 'normal' | 'reverse';
+}
+
+export interface Ui3nTabsEmits {
+  (ev: 'update:modelValue', val: number): void;
+}
+
+export interface Ui3nTabsSlots {
+  default: () => VNode;
+}

package/src/components/{ui3n-tabs.vue → ui3n-tabs/ui3n-tabs.vue}

@@ -1,24 +1,6 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch, useCssModule } from 'vue';
-
-export interface Ui3nTabsProps {
-  modelValue: number;
-  itemDirection?: 'horizontal' | 'vertical';
-  activeColor?: string;
-  inactiveColor?: string;
-  indicatorColor?: string;
-  indicatorSize?: number | string;
-  indicatorPosition?: 'normal' | 'reverse';
-}
-
-export interface Ui3nTabsEmits {
-  (ev: 'update:modelValue', val: number): void;
-}
-
-export interface Ui3nTabsSlots {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: () => any;
-}
+import type { Ui3nTabsEmits, Ui3nTabsProps, Ui3nTabsSlots } from './types';
 
 const props = withDefaults(
   defineProps<Ui3nTabsProps>(),
@@ -33,6 +15,7 @@ const props = withDefaults(
   },
 );
 const emits = defineEmits<Ui3nTabsEmits>();
+defineSlots<Ui3nTabsSlots>();
 
 const $style = useCssModule();
 
@@ -100,7 +83,7 @@ const onClick = (ev: MouseEvent) => {
 </template>
 
 <style lang="scss" module>
-@import "../assets/styles/mixins";
+@import "../../assets/styles/mixins";
 
 .tabs {
   --ui3n-tabs-height: 48px;

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

@@ -0,0 +1,18 @@
+export interface Ui3nTextProps {
+  text: string;
+  rows?: number;
+  maxRows?: number;
+  label?: string;
+  placeholder?: string;
+  rules?: Array<(v: string) => string | boolean>;
+  disabled?: boolean;
+}
+
+export interface Ui3nTextEmits {
+  (ev: 'init', value: HTMLTextAreaElement): void;
+  (ev: 'input', value: string): void;
+  (ev: 'focus', value: Event): void;
+  (ev: 'blur', value: Event): void;
+  (ev: 'update:text', value: string): void;
+  (ev: 'update:valid', value: boolean): void;
+}