@v1nt1248/3nclient-lib 0.1.6 → 0.1.7

package/dist/{utils.d.ts → ui3n-utils.d.ts}

@@ -1,2 +1,2 @@
 export * from './constants';
-export * from './tools';
+export * from './utils';

package/dist/{tools → utils}/index.d.ts

@@ -1,5 +1,5 @@
 export * from './textarea-max-rows';
-export * from './common.helpers';
-export * from './ui.helpers';
+export * from './common.utils';
+export * from './ui.utils';
 export { SQLiteOn3NStorage } from './sqlite-on-3nstorage';
 export type { BindParams, Database, QueryExecResult } from './sqlite-on-3nstorage';

package/package.json

@@ -2,27 +2,27 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
     "dist",
     "src/components/"
   ],
-  "main": "./dist/ui-3n-lib.js",
-  "module": "./dist/ui-3n-lib.js",
+  "main": "./dist/ui3n-components.js",
+  "module": "./dist/ui3n-components.js",
   "exports": {
     ".": {
-      "import": "./dist/ui-3n-lib.js",
-      "types": "./dist/components.d.ts"
+      "import": "./dist/ui3n-components.js",
+      "types": "./dist/ui3n-components.d.ts"
     },
     "./plugins": {
-      "import": "./dist/plugins.js",
-      "types": "./dist/plugins.d.ts"
+      "import": "./dist/ui3n-plugins.js",
+      "types": "./dist/ui3n-plugins.d.ts"
     },
     "./utils": {
-      "import": "./dist/utils.js",
-      "types": "./dist/utils.d.ts"
+      "import": "./dist/ui3n-utils.js",
+      "types": "./dist/ui3n-utils.d.ts"
     },
     "./style.css": "./dist/style.css",
     "./variables.css": "./dist/variables.css"
@@ -37,7 +37,6 @@
     "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",
-    "build:old": "vite build && pnpm run copy:css",
     "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/index.ts

@@ -1,24 +1,24 @@
-import Ui3nIcon from './ui3n-icon.vue';
-import type { Ui3nIconProps, Ui3nIconEmits } from './ui3n-icon.vue';
-import Ui3nButton from './ui3n-button.vue';
-import type { Ui3nButtonProps, Ui3nButtonEmits } from './ui3n-button.vue';
-import Ui3nChip from './ui3n-chip.vue';
-import type { Ui3nChipProps, Ui3nChipEmits, Ui3nChipSlots } from './ui3n-chip.vue';
-import Ui3nDropFiles from './ui3n-drop-files.vue';
-import type { Ui3nDropFilesProps, Ui3nDropFilesEmits } from './ui3n-drop-files.vue';
-import Ui3nEmoji from './ui3n-emoji.vue';
-import type { Ui3nEmojiProps, Ui3nEmojiEmits } from './ui3n-emoji.vue';
-import Ui3nInput from './ui3n-input.vue';
-import type { Ui3nInputProps, Ui3nInputEmits } from './ui3n-input.vue';
-import Ui3nText from './ui3n-text.vue';
-import type { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text.vue';
-import Ui3nCheckbox from './ui3n-checkbox.vue';
-import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots } from './ui3n-checkbox.vue';
-import Ui3nNotification from './ui3n-notification.vue';
-import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
-import type { Ui3nTableSortIconProps } from './ui3n-table-sort-icon.vue';
+import Ui3nIcon from './ui3n-icon/ui3n-icon.vue';
+import type { Ui3nIconProps, Ui3nIconEmits } from './ui3n-icon/types';
+import Ui3nButton from './ui3n-button/ui3n-button.vue';
+import type { Ui3nButtonProps, Ui3nButtonEmits } from './ui3n-button/types';
+import Ui3nChip from './ui3n-chip/ui3n-chip.vue';
+import type { Ui3nChipProps, Ui3nChipEmits, Ui3nChipSlots } from './ui3n-chip/types';
+import Ui3nDropFiles from './ui3n-drop-files/ui3n-drop-files.vue';
+import type { Ui3nDropFilesProps, Ui3nDropFilesEmits, Ui3nDropFilesSlots } from './ui3n-drop-files/types';
+import Ui3nEmoji from './ui3n-emoji/ui3n-emoji.vue';
+import type { Ui3nEmojiProps, Ui3nEmojiEmits } from './ui3n-emoji/types';
+import Ui3nInput from './ui3n-input/ui3n-input.vue';
+import type { Ui3nInputProps, Ui3nInputEmits } from './ui3n-input/types';
+import Ui3nText from './ui3n-text/ui3n-text.vue';
+import type { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text/types';
+import Ui3nCheckbox from './ui3n-checkbox/ui3n-checkbox.vue';
+import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots, Ui3nCheckboxValue } from './ui3n-checkbox/types';
+import Ui3nNotification from './ui3n-notification/ui3n-notification.vue';
+import Ui3nTableSortIcon from './ui3n-table/ui3n-table-sort-icon.vue';
 import Ui3nTable from './ui3n-table/ui3n-table.vue';
 import type {
+  Ui3nTableSortIconProps,
   Ui3nTableSort,
   Ui3nTableConfig,
   Ui3nTableHeadProps,
@@ -33,35 +33,38 @@ import type {
   Ui3nTableProps,
   Ui3nTableEmits,
 } from './ui3n-table/types';
-import Ui3nDialog from './ui3n-dialog.vue';
+import Ui3nDialog from './ui3n-dialog/ui3n-dialog.vue';
 import type {
   Ui3nDialogComponentProps,
   Ui3nDialogComponentEmits,
   Ui3nDialogProps,
   Ui3nDialogEvent,
-} from './ui3n-dialog.vue';
+} from './ui3n-dialog/types';
 import Ui3nMenu from './ui3n-menu/ui3n-menu.vue';
 import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu/types';
-import Ui3nList from './ui3n-list.vue';
-import type { Ui3nListProps, Ui3nListEmits, Ui3nListSlots } from './ui3n-list.vue';
-import Ui3nVirtualScroll from './ui3n-virtual-scroll.vue';
-import type { Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots } from './ui3n-virtual-scroll.vue';
-import Ui3nTabs from './ui3n-tabs.vue';
-import type { Ui3nTabsProps, Ui3nTabsEmits, Ui3nTabsSlots } from './ui3n-tabs.vue';
-import Ui3nBadge from './ui3n-badge.vue';
-import type { Ui3nBadgeProps } from './ui3n-badge.vue';
-import Ui3nBreadcrumb from './ui3n-breadcrumb.vue';
-import type { Ui3nBreadcrumbProps, Ui3nBreadcrumbEmits, Ui3nBreadcrumbSlots } from './ui3n-breadcrumb.vue';
-import Ui3nBreadcrumbs from './ui3n-breadcrumbs.vue';
-import type { Ui3nBreadcrumbsProps } from './ui3n-breadcrumbs.vue';
-import Ui3nSwitch from './ui3n-switch.vue';
-import type { Ui3nSwitchProps, Ui3nSwitchEmits, Ui3nSwitchSlots } from './ui3n-switch.vue';
-import Ui3nStepLineBar from './ui3n-step-line-bar.vue';
-import type { Ui3nStepLineBarProps } from './ui3n-step-line-bar.vue';
-import Ui3nProgressLinear from './ui3n-progress-linear.vue';
-import type { Ui3nProgressLinearProps } from './ui3n-progress-linear.vue';
-import Ui3nProgressCircular from './ui3n-progress-circular.vue';
-import type { Ui3nProgressCircularProps } from './ui3n-progress-circular.vue';
+import Ui3nList from './ui3n-list/ui3n-list.vue';
+import type { Ui3nListProps, Ui3nListEmits, Ui3nListSlots } from './ui3n-list/types';
+import Ui3nVirtualScroll from './ui3n-virtual-scroll/ui3n-virtual-scroll.vue';
+import type { Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots } from './ui3n-virtual-scroll/types';
+import Ui3nTabs from './ui3n-tabs/ui3n-tabs.vue';
+import type { Ui3nTabsProps, Ui3nTabsEmits, Ui3nTabsSlots } from './ui3n-tabs/types';
+import Ui3nBadge from './ui3n-badge/ui3n-badge.vue';
+import type { Ui3nBadgeProps } from './ui3n-badge/types';
+import Ui3nBreadcrumb from './ui3n-breadcrumbs/ui3n-breadcrumb.vue';
+import Ui3nBreadcrumbs from './ui3n-breadcrumbs/ui3n-breadcrumbs.vue';
+import type {
+  Ui3nBreadcrumbProps,
+  Ui3nBreadcrumbEmits,
+  Ui3nBreadcrumbSlots,
+  Ui3nBreadcrumbsProps,
+} from './ui3n-breadcrumbs/types';
+import Ui3nSwitch from './ui3n-switch/ui3n-switch.vue';
+import type { Ui3nSwitchProps, Ui3nSwitchEmits, Ui3nSwitchSlots } from './ui3n-switch/types';
+import Ui3nStepLineBar from './ui3n-step-line-bar/ui3n-step-line-bar.vue';
+import type { Ui3nStepLineBarProps } from './ui3n-step-line-bar/types';
+import Ui3nProgressLinear from './ui3n-progress/ui3n-progress-linear.vue';
+import Ui3nProgressCircular from './ui3n-progress/ui3n-progress-circular.vue';
+import type { Ui3nProgressCircularProps, Ui3nProgressLinearProps } from './ui3n-progress/types';
 import Ui3nTooltip from './ui3n-tooltip/ui3n-tooltip.vue';
 import type { Ui3nTooltipEmits, Ui3nTooltipProps, Ui3nTooltipSlots, Ui3nTooltipPlacement } from './ui3n-tooltip/types';
 
@@ -79,6 +82,7 @@ export {
   Ui3nDropFiles,
   Ui3nDropFilesProps,
   Ui3nDropFilesEmits,
+  Ui3nDropFilesSlots,
   Ui3nEmoji,
   Ui3nEmojiProps,
   Ui3nEmojiEmits,
@@ -92,6 +96,7 @@ export {
   Ui3nCheckboxProps,
   Ui3nCheckboxEmits,
   Ui3nCheckboxSlots,
+  Ui3nCheckboxValue,
   Ui3nNotification,
   Ui3nTableSortIcon,
   Ui3nTableSortIconProps,

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

@@ -0,0 +1,14 @@
+export interface Ui3nBadgeSimpleProps {
+  dot?: boolean;
+  value?: string | number;
+  color?: string;
+  textColor?: string;
+}
+
+export interface Ui3nBadgeProps {
+  dot?: boolean;
+  value?: string | number;
+  color?: string;
+  textColor?: string;
+  position?: 'right-top' | 'right-bottom' | 'left-top' | 'left-bottom';
+}

package/src/components/{ui3n-badge-simple.vue → ui3n-badge/ui3n-badge-simple.vue}

@@ -1,45 +1,39 @@
 <script lang="ts" setup>
-  import { nextTick, onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue';
+import type { Ui3nBadgeSimpleProps } from './types';
 
-  export interface Ui3nBadgeSimpleProps {
-    dot?: boolean;
-    value?: string | number;
-    color?: string;
-    textColor?: string;
-  }
-
-  const props = withDefaults(
-    defineProps<Ui3nBadgeSimpleProps>(),
-    {
-      dot: false,
-      value: '',
-      color: 'var(--color-bg-button-primary-default)',
-      textColor: 'var(--color-text-button-primary-default)',
-    },
-  )
+const props = withDefaults(
+  defineProps<Ui3nBadgeSimpleProps>(),
+  {
+    dot: false,
+    value: '',
+    color: 'var(--color-bg-button-primary-default)',
+    textColor: 'var(--color-text-button-primary-default)',
+  },
+);
 
-  const emits = defineEmits<{
-    (ev: 'change:size', val: { width: number; height: number }): void;
-  }>()
+const emits = defineEmits<{
+  (ev: 'change:size', val: { width: number; height: number }): void;
+}>();
 
-  const element = ref<HTMLDivElement | null>(null)
+const element = ref<HTMLDivElement | null>(null);
 
-  watch(
-    () => [props.value, props.dot],
-    () => getElementSize(),
-  )
+watch(
+  () => [props.value, props.dot],
+  () => getElementSize(),
+);
 
-  onMounted(() => {
-    getElementSize()
-  })
+onMounted(() => {
+  getElementSize();
+});
 
-  function getElementSize() {
-    nextTick(() => {
-      if (element.value) {
-        emits('change:size', { width: element.value.offsetWidth, height: element.value.offsetHeight })
-      }
-    })
-  }
+function getElementSize() {
+  nextTick(() => {
+    if (element.value) {
+      emits('change:size', { width: element.value.offsetWidth, height: element.value.offsetHeight });
+    }
+  });
+}
 </script>
 
 <template>

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

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { computed, ref, useSlots } from 'vue';
+import get from 'lodash/get';
+import Ui3nBadgeSimple from './ui3n-badge-simple.vue';
+import type { Ui3nBadgeProps } from './types';
+
+const props = withDefaults(
+  defineProps<Ui3nBadgeProps>(),
+  {
+    dot: false,
+    value: '',
+    color: 'var(--color-bg-button-primary-default)',
+    textColor: 'var(--color-text-button-primary-default)',
+    position: 'right-top',
+  },
+);
+
+const slots = useSlots();
+const badgeElementSize = ref<{
+  width: number;
+  height: number;
+} | never>();
+
+const hasDefaultSlot = computed(() => !!slots.default);
+const style = computed(() => {
+  const [xPosition, yPosition] = props.position.split('-');
+  return {
+    ...(xPosition === 'right' && { right: `-${get(badgeElementSize.value, 'width', 0) / 2}px` }),
+    ...(xPosition === 'left' && { left: `-${get(badgeElementSize.value, 'width', 0) / 2}px` }),
+    ...(yPosition === 'top' && { top: `-${get(badgeElementSize.value, 'height', 0) / 2}px` }),
+    ...(yPosition === 'bottom' && { bottom: `-${get(badgeElementSize.value, 'height', 0) / 2}px` }),
+  };
+});
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-multiple-template-root -->
+  <div
+    v-if="hasDefaultSlot"
+    :class="$style.badge"
+  >
+    <div :class="$style.wrapper">
+      <slot />
+
+      <ui3n-badge-simple
+        :dot="dot"
+        :value="value"
+        :color="color"
+        :text-color="textColor"
+        :style="style"
+        :class="$style.content"
+        @change:size="badgeElementSize = $event"
+      />
+    </div>
+  </div>
+
+  <ui3n-badge-simple
+    v-else
+    :dot="dot"
+    :value="value"
+    :color="color"
+    :text-color="textColor"
+  />
+</template>
+
+<style lang="scss" module>
+.badge {
+  --ui3n-badge-size: 20px;
+
+  position: relative;
+}
+
+.wrapper {
+  position: relative;
+  width: max-content;
+}
+
+.content {
+  position: absolute;
+  z-index: 5;
+}
+</style>

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

@@ -0,0 +1,21 @@
+import { VNode } from 'vue';
+
+export interface Ui3nBreadcrumbProps {
+  separator?: string | undefined;
+  isActive?: boolean;
+  disabled?: boolean;
+}
+
+export interface Ui3nBreadcrumbEmits {
+  (ev: 'click', value: Event): void;
+}
+
+export interface Ui3nBreadcrumbSlots {
+  separator: () => VNode;
+  default: () => VNode;
+}
+
+export interface Ui3nBreadcrumbsProps {
+  separator?: string;
+  disabled?: boolean;
+}

package/src/components/{ui3n-breadcrumb.vue → ui3n-breadcrumbs/ui3n-breadcrumb.vue}

@@ -1,18 +1,6 @@
 <script lang="ts" setup>
   import { computed, getCurrentInstance } from 'vue';
-
-  export interface Ui3nBreadcrumbProps {
-    separator?: string | undefined;
-    isActive?: boolean;
-    disabled?: boolean;
-  }
-  export interface Ui3nBreadcrumbEmits {
-    (ev: 'click', value: Event): void;
-  }
-  export interface Ui3nBreadcrumbSlots {
-    separator: () => unknown;
-    default: () => unknown;
-  }
+  import type { Ui3nBreadcrumbEmits, Ui3nBreadcrumbProps, Ui3nBreadcrumbSlots } from './types';
 
   const props = withDefaults(
     defineProps<Ui3nBreadcrumbProps>(),
@@ -22,7 +10,6 @@
       disabled: false,
     },
   );
-
   const emits = defineEmits<Ui3nBreadcrumbEmits>();
   defineSlots<Ui3nBreadcrumbSlots>();
 

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

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-export interface Ui3nBreadcrumbsProps {
-  separator?: string;
-  disabled?: boolean;
-}
+import type { Ui3nBreadcrumbsProps } from './types';
 
 withDefaults(
   defineProps<Ui3nBreadcrumbsProps>(),

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

@@ -0,0 +1,20 @@
+export interface Ui3nButtonProps {
+  type?: 'primary' | 'secondary' | 'tertiary' | 'icon' | 'custom';
+  size?: 'regular' | 'small';
+  block?: boolean;
+  textColor?: string;
+  color?: string;
+  elevation?: boolean;
+  icon?: string;
+  iconSize?: string | number;
+  iconColor?: string;
+  iconPosition?: 'left' | 'right';
+  disabled?: boolean;
+}
+
+export interface Ui3nButtonEmits {
+  (ev: 'init', value: HTMLButtonElement): void;
+  (ev: 'click', value: Event): void;
+  (ev: 'focus', value: Event): void;
+  (ev: 'blur', value: Event): void;
+}

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

@@ -1,27 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
-import Ui3nIcon from './ui3n-icon.vue';
-
-export interface Ui3nButtonProps {
-  type?: 'primary' | 'secondary' | 'tertiary' | 'icon' | 'custom';
-  size?: 'regular' | 'small';
-  block?: boolean;
-  textColor?: string;
-  color?: string;
-  elevation?: boolean;
-  icon?: string;
-  iconSize?: string | number;
-  iconColor?: string;
-  iconPosition?: 'left' | 'right';
-  disabled?: boolean;
-}
-
-export interface Ui3nButtonEmits {
-  (ev: 'init', value: HTMLButtonElement): void;
-  (ev: 'click', value: Event): void;
-  (ev: 'focus', value: Event): void;
-  (ev: 'blur', value: Event): void;
-}
+import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
+import type { Ui3nButtonEmits, Ui3nButtonProps } from './types';
 
 const props = withDefaults(
   defineProps<Ui3nButtonProps>(),
@@ -98,7 +78,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" module>
-@import "../assets/styles/mixins";
+@import "../../assets/styles/mixins";
 
 .button {
   --ui3n-button-padding: var(--spacing-m);

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

@@ -0,0 +1,22 @@
+import { VNode } from 'vue';
+
+export type Ui3nCheckboxValue = boolean | string | number;
+
+export interface Ui3nCheckboxProps {
+  modelValue: Ui3nCheckboxValue;
+  checkedValue?: Ui3nCheckboxValue;
+  uncheckedValue?: Ui3nCheckboxValue;
+  size?: number | string;
+  color?: string;
+  indeterminate?: boolean;
+  disabled?: boolean;
+}
+
+export interface Ui3nCheckboxEmits {
+  (ev: 'change', value: Ui3nCheckboxValue): void;
+  (ev: 'update:modelValue', value: Ui3nCheckboxValue): void;
+}
+
+export interface Ui3nCheckboxSlots {
+  default: () => VNode;
+}

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

@@ -1,27 +1,6 @@
 <script lang="ts" setup>
 import { computed, onMounted, watch, onBeforeMount, ref, useSlots } from 'vue';
-
-export type Ui3nCheckboxValue = boolean | string | number;
-
-export interface Ui3nCheckboxProps {
-  modelValue: Ui3nCheckboxValue;
-  checkedValue?: Ui3nCheckboxValue;
-  uncheckedValue?: Ui3nCheckboxValue;
-  size?: number | string;
-  color?: string;
-  indeterminate?: boolean;
-  disabled?: boolean;
-}
-
-export interface Ui3nCheckboxEmits {
-  (ev: 'change', value: Ui3nCheckboxValue): void;
-  (ev: 'update:modelValue', value: Ui3nCheckboxValue): void;
-}
-
-export interface Ui3nCheckboxSlots {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: () => any;
-}
+import type { Ui3nCheckboxEmits, Ui3nCheckboxProps, Ui3nCheckboxSlots, Ui3nCheckboxValue } from './types';
 
 const props = withDefaults(
   defineProps<Ui3nCheckboxProps>(),
@@ -161,7 +140,7 @@ const change = () => {
 </template>
 
 <style lang="scss" module>
-@import "../assets/styles/mixins";
+@import "../../assets/styles/mixins";
 
 .checkbox {
   --ui3n-checkbox-size: 16px;

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

@@ -0,0 +1,19 @@
+import { VNode } from 'vue';
+
+export interface Ui3nChipProps {
+  height?: number | string;
+  maxWidth?: number | string;
+  plain?: boolean;
+  round?: boolean;
+  closeable?: boolean;
+  color?: string;
+  textSize?: number | string;
+  textColor?: string;
+}
+export interface Ui3nChipEmits {
+  (ev: 'close'): void;
+}
+export interface Ui3nChipSlots {
+  left: (props: { size: number; color: string }) => VNode;
+  default: () => VNode;
+}

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

@@ -1,53 +1,35 @@
 <script lang="ts" setup>
-  import { computed, useSlots } from 'vue';
-  import Ui3nButton from './ui3n-button.vue';
-
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  export interface Ui3nChipProps {
-    height?: number | string;
-    maxWidth?: number | string;
-    plain?: boolean;
-    round?: boolean;
-    closeable?: boolean;
-    color?: string;
-    textSize?: number | string;
-    textColor?: string;
-  }
-  export interface Ui3nChipEmits {
-    (ev: 'close'): void;
-  }
-  export interface Ui3nChipSlots {
-    left: (props: { size: number; color: string }) => any;
-    default: () => any;
-  }
-
-  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 height = computed(() => `${props.height}px`);
-  const iconHeight = computed(() => props.height ? Number(props.height) - 2 : Number(props.height));
-  const padding = computed(() => `${Math.round(Number(props.height) / 3)}px`);
-  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);
+import { computed, 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 height = computed(() => `${props.height}px`);
+const iconHeight = computed(() => props.height ? Number(props.height) - 2 : Number(props.height));
+const padding = computed(() => `${Math.round(Number(props.height) / 3)}px`);
+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);
 </script>
 
 <template>
@@ -82,7 +64,7 @@
 </template>
 
 <style lang="scss" module>
-@import "../assets/styles/mixins";
+@import "../../assets/styles/mixins";
 
 .chip {
   position: relative;