@v1nt1248/3nclient-lib 0.0.16 → 0.0.18

package/README.md

@@ -1,9 +1,49 @@
-# Library for 3NWeb clients (Vue + Typescript)
+# Library (Vue3 + Typescript + Vite)
+
+Components, directives and plugins for Vue3 projects and some helpers methods.  
+Storybook is used for documentation and demo.  
+  
+For demo and development - `yarn storybook` or `npm run storybook`.  
+You can run the project as `yarn dev` or `npm run dev` if you don't want to use Storybook.
 
-## Constants
 ## Components
+  - Ui3nButton
+  - Ui3nIcon
+  - Ui3nInput
+  - Ui3nText
+  - Ui3nEmoji
+  - Ui3nMenu
+  - Ui3nDroopFiles
+  - Ui3nList
+  - Ui3nVirtualScroll
+  - Ui3nNotification
+  - Ui3nDialog
+  - Ui3nTable
+
 ## Directives
+  - Ui3nHtml
+  - Ui3nClickOutside
+
 ## Plugins
+  - icons
+  - i18n
+  - dialogs
+  - notifications
+  - vue-bus
+
 ## Store plugins
-## Services
-## Helpers
+  - store-i18n
+  - store-dialogs
+  - store-notifications
+  - store-vue-bus
+
+## Constants
+  - emoticons
+  - mailReg
+
+## Libs
+  - ipc-service
+  - ipc-service-caller
+  - sqlite-on-3nstorage
+
+## Tools

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@v1nt1248/3nclient-lib",
-  "private": false,
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Library for 3NWeb clients",
+  "private": false,
   "type": "module",
   "files": [
     "dist",
-    "src/components/",
-    "src/libs"
+    "src/components/"
   ],
   "module": "./dist/ui-3n-lib.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +29,9 @@
     "linter": "eslint -c .eslintrc.cjs --ext .js,.vue,.ts, src",
     "linter:fix": "eslint -c .eslintrc.cjs --fix --ext .js,.vue,.ts, src",
     "lint": "yarn linter && yarn stylelint",
-    "lint:fix": "yarn linter:fix && yarn stylelint:fix"
+    "lint:fix": "yarn linter:fix && yarn stylelint:fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@iconify-icons/ic": "^1.2.13",
@@ -47,22 +48,38 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^7.4.4",
+    "@storybook/addon-docs": "^7.4.4",
+    "@storybook/addon-essentials": "^7.4.4",
+    "@storybook/addon-interactions": "^7.4.4",
+    "@storybook/addon-links": "^7.4.4",
+    "@storybook/blocks": "^7.4.4",
+    "@storybook/builder-vite": "^7.4.4",
+    "@storybook/testing-library": "^0.2.1",
+    "@storybook/vue3": "^7.4.4",
+    "@storybook/vue3-vite": "^7.4.4",
     "@types/lodash": "^4.14.197",
     "@types/node": "^20.5.6",
     "@types/sanitize-html": "^2.9.0",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
     "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-core": "^3.3.4",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vuedx/typescript-plugin-vue": "^0.7.6",
     "eslint": "^8.48.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-storybook": "^0.6.14",
     "eslint-plugin-vue": "^9.17.0",
+    "jackspeak": "^2.3.3",
     "pinia": "^2.1.6",
     "postcss-html": "^1.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.66.1",
+    "storybook": "^7.4.4",
     "stylelint": "^15.10.3",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
@@ -71,10 +88,10 @@
     "stylelint-scss": "^5.1.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.5",
-    "vite-plugin-commonjs": "^0.9.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-dts": "^3.5.3",
     "vue": "^3.3.4",
     "vue-tsc": "^1.8.5"
-  }
+  },
+  "packageManager": "yarn@3.6.3"
 }

package/src/components/ui3n-button.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref, useSlots } from 'vue'
+  import { computed, onMounted, ref, useSlots, watch } from 'vue'
   import { hasSlotContent } from '../tools/ui.helpers'
   import Ui3nIcon from './ui3n-icon.vue'
 
@@ -27,6 +27,22 @@
   const buttonEl = ref<HTMLButtonElement | null>(null)
   const isSlotEmpty = computed(() => !hasSlotContent(slots['default']))
 
+  watch(
+    [() => props.color, () => props.textColor],
+    (newValue: [string|undefined, string|undefined], prevValue: [string|undefined, string|undefined]) => {
+      const [ prevColor, prevTextColor ] = prevValue
+      const [ color, textColor ] = newValue
+      if (buttonEl.value) {
+        if (color !== prevColor) {
+          buttonEl.value.style.setProperty('--ui3n-button-background', color ?? 'var(--blue-main, #0090ec)')
+        }
+        if (textColor !== prevTextColor) {
+          buttonEl.value.style.setProperty('--ui3n-button-text-color', textColor ?? 'var(--system-white, #fff)')
+        }
+      }
+    },
+  )
+
   onMounted(() => {
     if (buttonEl.value) {
       if (props.color) {
@@ -97,8 +113,8 @@
     transition: background 0.5s ease-in-out;
 
     &--round {
-      --ui3n-button-padding-vert: 4px;
-      --ui3n-button-padding-horiz: 4px;
+      --ui3n-button-padding-vert: 6px;
+      --ui3n-button-padding-horiz: 6px;
 
       border-radius: 50%;
     }
@@ -115,6 +131,7 @@
           var(--ui3n-button-background)
           radial-gradient(circle, transparent 1%, var(--ui3n-button-background) 1%)
           center/15000%;
+        box-shadow: 0 0 4px var(--shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 
         .ui3n-button {
           &__icon,
@@ -152,4 +169,3 @@
     }
   }
 </style>
-../tools/ui.helpers

package/src/components/ui3n-drop-files.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, ref } from 'vue'
+  import { computed, onMounted, ref } from 'vue'
 
   export interface Ui3nDropFilesProps {
     title?: string;
@@ -14,6 +14,8 @@
   const props = defineProps<Ui3nDropFilesProps>()
   const emit = defineEmits<Ui3nDropFilesEmits>()
 
+  const wrapperElement = ref<HTMLDivElement | null>(null)
+  const wrapperElementHeight = ref(0)
   const isOverDropPlace = ref(false)
   const isOverDropZone = ref(false)
   const params = computed(() => {
@@ -26,6 +28,20 @@
     }
   })
 
+  onMounted(() => {
+    if (wrapperElement.value) {
+      wrapperElementHeight.value = wrapperElement.value.clientHeight
+      wrapperElement.value.style.setProperty('--dropzone-height', `${wrapperElementHeight.value}px`)
+      let titleFontSize = 12
+      if (wrapperElementHeight.value > 100 && wrapperElementHeight.value <= 240) {
+        titleFontSize = 16
+      } else if (wrapperElementHeight.value > 240) {
+        titleFontSize = 20
+      }
+      wrapperElement.value.style.setProperty('--dropzone-title-font', `${titleFontSize}px`)
+    }
+  })
+
   const onDragenter = (ev: MouseEvent) => {
     ev.preventDefault()
     isOverDropPlace.value = true
@@ -60,6 +76,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <div
+    ref="wrapperElement"
     class="ui3n-drop-files"
     @dragenter="onDragenter"
     @dragleave="onDragleave"
@@ -80,8 +97,8 @@
       </h3>
       <div class="ui3n-drop-files__dropzone-icon">
         <svg
-          width="192"
-          height="192"
+          :width="wrapperElementHeight / 2"
+          :height="wrapperElementHeight / 2"
           viewBox="0 0 192 192"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -110,11 +127,16 @@
 
 <style lang="scss" scoped>
   .ui3n-drop-files {
+    --dropzone-height: 0;
+    --dropzone-title-font: 0;
+
     position: relative;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
 
     &__dropzone {
+      box-sizing: border-box;
       position: absolute;
       background-color: var(--system-white, #fff);
       display: flex;
@@ -126,19 +148,20 @@
       z-index: 5;
 
       &-border {
+        box-sizing: border-box;
         position: absolute;
-        width: calc(100% - calc(var(--base-size, 8px) * 2));
-        height: calc(100% - calc(var(--base-size, 8px) * 2));
-        top: var(--base-size, 8px);
-        left: var(--base-size, 8px);
+        top: calc(var(--base-size, 8px) + 1px);
+        bottom: calc(var(--base-size, 8px) + 1px);
+        left: calc(var(--base-size, 8px) + 1px);
+        right: calc(var(--base-size, 8px) + 1px);
         border-radius: var(--base-size, 8px);
         border: 2px dashed var(--gray-50, #f2f2f2);
         pointer-events: none;
       }
 
       &-title {
-        margin: 0 0 24px;
-        font-size: var(--font-24, 24px);
+        margin: 0 0 var(--dropzone-title-font);
+        font-size: var(--dropzone-title-font);
         font-weight: 600;
         color: var(--black-30, #b3b3b3);
         pointer-events: none;
@@ -146,8 +169,8 @@
 
       &-icon {
         position: relative;
-        width: 160px;
-        height: 160px;
+        width: calc(var(--dropzone-height) * 0.4);
+        height: calc(var(--dropzone-height) * 0.4);
         border-radius: 50%;
         background-color: var(--gray-50, #f2f2f2);
         display: flex;

package/src/components/ui3n-emoji.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue'
+  import { computed, onMounted, ref, watch } from 'vue'
+  import { emoticons } from '../constants/emoticons'
+
 
   export interface Ui3nEmojiProps {
     emoji: string;
@@ -11,26 +13,43 @@
     (ev: 'click', value: Event): void;
   }
 
-  const props = defineProps<Ui3nEmojiProps>()
+  const props = withDefaults(
+    defineProps<Ui3nEmojiProps>(),
+    {
+      size: 16,
+      readonly: false,
+    },
+  )
   const emit = defineEmits<Ui3nEmojiEmits>()
 
   const emojiElement = ref<HTMLDivElement | null>(null)
-  const params = computed(() => {
-    const {
-      emoji,
-      size = 16,
-      readonly = false,
-    } = props
-
-    return { emoji, size, readonly }
-  })
+  const emojiData = computed(() => emoticons[props.emoji])
 
   onMounted(() => {
     if (emojiElement.value) {
-      emojiElement.value.style.setProperty('--emoji-size', `${params.value.size}px`)
+      emojiElement.value.style.setProperty('--emoji-size', `${props.size}px`)
     }
   })
 
+  watch(
+    () => props.emoji,
+    newValue => {
+      if (!Object.keys(emoticons).includes(newValue)) {
+        console.error(`[Ui3nEmoji] Invalid emoticon: ${newValue}`)
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    () => props.size,
+    (newValue, prevValue) => {
+      if (emojiElement.value && newValue && newValue !== prevValue) {
+        emojiElement.value.style.setProperty('--emoji-size', `${newValue}px`)
+      }
+    },
+  )
+
   const onClick = (ev: Event) => {
     ev.stopImmediatePropagation()
     emit('click', ev)
@@ -42,11 +61,11 @@
     ref="emojiElement"
     :class="[
       'ui3n-emoji',
-      { 'ui3n-emoji--readonly': params.readonly },
+      { 'ui3n-emoji--readonly': props.readonly },
     ]"
     v-on="readonly ? {} : { 'click': onClick }"
   >
-    {{ emoji }}
+    {{ emojiData && emojiData.value }}
   </div>
 </template>
 
@@ -57,6 +76,7 @@
     display: flex;
     width: var(--emoji-size);
     height: var(--emoji-size);
+    font-size: var(--emoji-size);
     justify-content: center;
     align-items: center;
     cursor: pointer;

package/src/components/ui3n-input.vue

@@ -185,6 +185,7 @@
       display: block;
       width: 100%;
       font-size: var(--font-12, 12px);
+      line-height: var(--font-16, 16px);
       font-weight: 600;
       color: var(--black-90, #212121);
       margin-bottom: calc(var(--base-size, 8px) / 2);
@@ -271,11 +272,11 @@
 
     &--with-label {
       .ui3n-input__icon {
-        top: calc(var(--base-size) * 3.5 + 1px);
+        top: calc(var(--base-size, 8px) * 3.5 + 1px);
       }
 
       .ui3n-input__clear-btn {
-        top: calc(var(--base-size) * 3 + 1px);
+        top: calc(var(--base-size, 8px) * 3 + 1px);
       }
     }
   }

package/src/components/ui3n-list.vue

@@ -62,7 +62,7 @@
           <div
             :class="[
               'ui3n-list__item-content',
-              { 'ui3n-list__item-content--disables': props.disabled },
+              { 'ui3n-list__item-content--disabled': props.disabled },
             ]"
             @click.stop="emits('select', { value: item, index })"
           >

package/dist/components/index.d.ts

@@ -1,26 +0,0 @@
-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 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 Ui3nNotification from './ui3n-notification.vue';
-import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
-import type { Ui3nTableSortIconProps } from './ui3n-table-sort-icon.vue';
-import Ui3nTable from './ui3n-table.vue';
-import type { Ui3nTableProps, Ui3nTableEmits } from './ui3n-table.vue';
-import Ui3nDialog from './ui3n-dialog.vue';
-import type { Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogProps, Ui3nDialogEvent } from './ui3n-dialog.vue';
-import Ui3nMenu from './ui3n-menu.vue';
-import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu.vue';
-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';
-export { Ui3nIcon, Ui3nIconProps, Ui3nIconEmits, Ui3nButton, Ui3nButtonProps, Ui3nButtonEmits, Ui3nDropFiles, Ui3nDropFilesProps, Ui3nDropFilesEmits, Ui3nEmoji, Ui3nEmojiProps, Ui3nEmojiEmits, Ui3nInput, Ui3nInputProps, Ui3nInputEmits, Ui3nText, Ui3nTextProps, Ui3nTextEmits, Ui3nNotification, Ui3nTableSortIcon, Ui3nTableSortIconProps, Ui3nTable, Ui3nTableProps, Ui3nTableEmits, Ui3nDialog, Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogProps, Ui3nDialogEvent, Ui3nMenu, Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots, Ui3nList, Ui3nListProps, Ui3nListEmits, Ui3nListSlots, Ui3nVirtualScroll, Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots, };

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

@@ -1,82 +0,0 @@
-export interface Ui3nButtonProps {
-    textColor?: string;
-    color?: string;
-    round?: boolean;
-    elevation?: boolean;
-    icon?: string;
-    iconSize?: string | number;
-    iconColor?: string;
-    disabled?: boolean;
-}
-export interface Ui3nButtonEmits {
-    (ev: 'click', value: Event): void;
-    (ev: 'focus', value: Event): void;
-    (ev: 'blur', value: Event): void;
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    textColor: {
-        type: import("vue").PropType<string>;
-    };
-    color: {
-        type: import("vue").PropType<string>;
-    };
-    round: {
-        type: import("vue").PropType<boolean>;
-    };
-    elevation: {
-        type: import("vue").PropType<boolean>;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-    };
-    iconSize: {
-        type: import("vue").PropType<string | number>;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (value: Event) => void;
-    focus: (value: Event) => void;
-    blur: (value: Event) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    textColor: {
-        type: import("vue").PropType<string>;
-    };
-    color: {
-        type: import("vue").PropType<string>;
-    };
-    round: {
-        type: import("vue").PropType<boolean>;
-    };
-    elevation: {
-        type: import("vue").PropType<boolean>;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-    };
-    iconSize: {
-        type: import("vue").PropType<string | number>;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-    };
-}>> & {
-    onClick?: ((value: Event) => any) | undefined;
-    onFocus?: ((value: Event) => any) | undefined;
-    onBlur?: ((value: Event) => any) | undefined;
-}, {}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,73 +0,0 @@
-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;
-    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;
-}
-declare const _default: import("vue").DefineComponent<{
-    component: {
-        type: import("vue").PropType<Component>;
-        required: true;
-    };
-    componentProps: {
-        type: import("vue").PropType<Record<string, any>>;
-    };
-    dialogProps: {
-        type: import("vue").PropType<Ui3nDialogProps>;
-    };
-}, {}, 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").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    component: {
-        type: import("vue").PropType<Component>;
-        required: true;
-    };
-    componentProps: {
-        type: import("vue").PropType<Record<string, any>>;
-    };
-    dialogProps: {
-        type: import("vue").PropType<Ui3nDialogProps>;
-    };
-}>> & {
-    onCancel?: ((value?: any) => any) | undefined;
-    onClose?: ((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;
-}, {}, {}>;
-export default _default;

package/dist/components/ui3n-drop-files.vue.d.ts

@@ -1,41 +0,0 @@
-export interface Ui3nDropFilesProps {
-    title?: string;
-    text?: string;
-    additionalText?: string;
-}
-export interface Ui3nDropFilesEmits {
-    (e: 'select', fileList: FileList): void;
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    title: {
-        type: import("vue").PropType<string>;
-    };
-    text: {
-        type: import("vue").PropType<string>;
-    };
-    additionalText: {
-        type: import("vue").PropType<string>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (fileList: FileList) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: import("vue").PropType<string>;
-    };
-    text: {
-        type: import("vue").PropType<string>;
-    };
-    additionalText: {
-        type: import("vue").PropType<string>;
-    };
-}>> & {
-    onSelect?: ((fileList: FileList) => any) | undefined;
-}, {}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,36 +0,0 @@
-export interface Ui3nEmojiProps {
-    emoji: string;
-    size?: string | number;
-    readonly?: boolean;
-}
-export interface Ui3nEmojiEmits {
-    (ev: 'click', value: Event): void;
-}
-declare const _default: import("vue").DefineComponent<{
-    emoji: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    size: {
-        type: import("vue").PropType<string | number>;
-    };
-    readonly: {
-        type: import("vue").PropType<boolean>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (value: Event) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    emoji: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    size: {
-        type: import("vue").PropType<string | number>;
-    };
-    readonly: {
-        type: import("vue").PropType<boolean>;
-    };
-}>> & {
-    onClick?: ((value: Event) => any) | undefined;
-}, {}, {}>;
-export default _default;