@v1nt1248/3nclient-lib 0.0.8 → 0.0.11

package/package.json

@@ -3,10 +3,13 @@
   "private": false,
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.8",
+  "version": "0.0.11",
   "description": "Library for 3NWeb clients",
   "type": "module",
-  "files": ["dist", "src/components/"],
+  "files": [
+    "dist",
+    "src/components/"
+  ],
   "module": "./dist/ui-3n-lib.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -19,7 +22,7 @@
     "dev": "vite",
     "generate:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
     "copy:dts": "cp ./src/types.d.ts ./dist",
-    "build": "vite build && yarn copy:dts",
+    "build": "vite build",
     "preview": "vite preview",
     "stylelint": "stylelint --config .stylelint.config.cjs 'src/**/*.{vue,scss}'",
     "stylelint:fix": "stylelint --config .stylelint.config.cjs --fix 'src/**/*.{vue,scss}'",
@@ -37,6 +40,7 @@
     "sanitize-html": "^2.11.0"
   },
   "peerDependencies": {
+    "pinia": "^2.1.6",
     "vue": "^3.3.4"
   },
   "devDependencies": {
@@ -66,6 +70,7 @@
     "vite": "^4.4.5",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-dts": "^3.5.3",
+    "vue": "^3.3.4",
     "vue-tsc": "^1.8.5"
   }
 }

package/src/components/index.ts

@@ -2,6 +2,25 @@ 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'
 
 export {
   Ui3nIcon,
@@ -10,4 +29,35 @@ export {
   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,
 }

package/src/components/ui3n-button.vue

@@ -72,6 +72,8 @@
 </template>
 
 <style lang="scss" scoped>
+  @import "../assets/styles/mixins";
+
   .ui3n-button {
     --ui3n-button-text-size: 12px;
     --ui3n-button-text-height: 16px;
@@ -102,10 +104,7 @@
     }
 
     &--elevation {
-      box-shadow:
-        rgba(0, 0, 0, 0.2) 0px 3px 1px -2px
-        rgba(0, 0, 0, 0.14) 0px 2px 2px 0px
-        rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+      @include elevation();
     }
 
     &:not([disabled]) {
@@ -127,7 +126,7 @@
 
       &:active {
         opacity: 1;
-        background-color: var(--gray-90, #444);
+        background-color: var(--black-30, #b3b3b3);
         background-size: 100%;
         transition: background 0s;
       }

package/src/components/ui3n-dialog.vue

@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { computed, onMounted, ref } from 'vue'
+  import type { Component } from 'vue'
+  import { getRandomId } from '../tools'
+  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;
+    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;
+  }
+
+  const props = defineProps<Ui3nDialogComponentProps>()
+
+  const emit = defineEmits<Ui3nDialogComponentEmits>()
+
+  const dialogProps = computed(() => {
+    const {
+      teleport = 'body',
+      title = '',
+      width = 380,
+      cssClass = '',
+      cssStyle = {},
+      contentCssClass = '',
+      contentCssStyle = {},
+      confirmButton = true,
+      cancelButton = true,
+      confirmButtonText = 'Done',
+      cancelButtonText = 'Cancel',
+      confirmButtonColor = 'var(--system-white, #fff)',
+      cancelButtonColor = 'var(--blue-main, #0090ec)',
+      confirmButtonBackground = 'var(--blue-main, #0090ec)',
+      cancelButtonBackground = 'var(--system-white, #fff)',
+      closeOnClickOverlay = true,
+    } = props.dialogProps || {}
+    return {
+      teleport,
+      title,
+      cssClass: cssClass ? `ui3n-dialog ${cssClass}` : 'ui3n-dialog',
+      cssStyle: { width: `${width}px`, ...cssStyle  },
+      contentCssClass: contentCssClass ? `ui3n-dialog__content ${contentCssClass}` : 'ui3n-dialog__content',
+      contentCssStyle,
+      confirmButton,
+      cancelButton,
+      confirmButtonText,
+      cancelButtonText,
+      confirmButtonColor,
+      cancelButtonColor,
+      confirmButtonBackground,
+      cancelButtonBackground,
+      closeOnClickOverlay,
+    }
+  })
+
+  const show = ref(true)
+  const data = ref(null)
+  const isValid = ref(true)
+  const dialogId = `dialog-${getRandomId(4)}`
+
+  onMounted(() => {
+    const dialogElement = document.getElementById(dialogId)
+    if (dialogElement) {
+      dialogElement.style.setProperty('--dialog-confirm-button-color', dialogProps.value.confirmButtonColor)
+      dialogElement.style.setProperty('--dialog-cancel-button-color', dialogProps.value.cancelButtonColor)
+      dialogElement.style.setProperty('--dialog-confirm-background-color', dialogProps.value.confirmButtonBackground)
+      dialogElement.style.setProperty('--dialog-cancel-background-color', dialogProps.value.cancelButtonBackground)
+    }
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const selectData = (value: any) => {
+    data.value = value
+    if (
+      !dialogProps.value.confirmButton
+      && !dialogProps.value.cancelButton
+      && props.dialogProps?.onConfirm
+    ) {
+      props.dialogProps.onConfirm(data.value)
+      closeDialog()
+    }
+  }
+
+  const validate = (value: boolean) => {
+    isValid.value = value
+  }
+
+  const closeDialog = (arg?: { ev?: Event, withAction?: boolean }) => {
+    const { ev, withAction = false } = arg || {}
+    if (ev) {
+      ev.stopImmediatePropagation()
+      ev.preventDefault()
+    }
+    show.value = false
+    if (withAction) {
+      emit('close')
+    }
+  }
+
+  const startEmit = (event: Ui3nDialogEvent) => {
+    if (event === 'click-overlay') {
+      emit(event)
+      closeDialog()
+    }
+
+    if (event === 'confirm' && props.dialogProps?.onConfirm) {
+      props.dialogProps.onConfirm(data.value)
+      closeDialog()
+    }
+
+    if (event === 'cancel' && props.dialogProps?.onCancel) {
+      props.dialogProps.onCancel(data.value)
+      closeDialog()
+    }
+
+    if (data.value) {
+      // @ts-ignore
+      emit(event, data.value)
+    } else {
+      // @ts-ignore
+      emit(event)
+    }
+  }
+
+  const handleEvent = (event: Event, eventName: Ui3nDialogEvent) => {
+    event.stopImmediatePropagation()
+    event.preventDefault()
+    startEmit(eventName)
+  }
+</script>
+
+<template>
+  <teleport :to="dialogProps.teleport">
+    <div
+      v-if="show"
+      class="ui3n-dialog__overlay"
+      @click="dialogProps.closeOnClickOverlay
+        ? closeDialog({ ev: $event, withAction: true })
+        : startEmit('click-overlay')
+      "
+    >
+      <div
+        :id="dialogId"
+        :class="dialogProps.cssClass"
+        :style="dialogProps.cssStyle"
+      >
+        <div
+          v-if="dialogProps.title"
+          class="ui3n-dialog__title"
+          @click.stop
+        >
+          <span>{{ dialogProps.title }}</span>
+          <ui3n-button
+            round
+            color="transparent"
+            icon="close"
+            icon-size="12"
+            icon-color="var(--gray-90, #444)"
+            class="ui3n-dialog__close"
+            @click="closeDialog({ ev: $event, withAction: true })"
+          />
+        </div>
+
+        <div
+          v-if="props.component"
+          :class="dialogProps.contentCssClass"
+          :style="dialogProps.contentCssStyle"
+          @click.stop
+        >
+          <component
+            :is="props.component"
+            v-bind="props.componentProps"
+            @select="selectData"
+            @validate="validate"
+            @close="closeDialog({ ev: $event, withAction: true })"
+            @confirm="startEmit('confirm')"
+            @cancel="startEmit('cancel')"
+          />
+        </div>
+
+        <div
+          v-if="dialogProps.confirmButton || dialogProps.cancelButton"
+          :class="[
+            'ui3n-dialog__actions',
+            { 'ui3n-dialog__actions--both': dialogProps.confirmButton && dialogProps.cancelButton },
+          ]"
+          @click.stop
+        >
+          <ui3n-button
+            v-if="dialogProps.cancelButton"
+            :color="dialogProps.cancelButtonBackground"
+            :text-color="dialogProps.cancelButtonColor"
+            @click="handleEvent($event, 'cancel')"
+          >
+            {{ dialogProps.cancelButtonText }}
+          </ui3n-button>
+
+          <ui3n-button
+            v-if="dialogProps.confirmButton"
+            :color="dialogProps.confirmButtonBackground"
+            :text-color="dialogProps.confirmButtonColor"
+            :disabled="!isValid"
+            @click="handleEvent($event, 'confirm')"
+          >
+            {{ dialogProps.confirmButtonText }}
+          </ui3n-button>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style lang="scss">
+  @import "../assets/styles/mixins";
+
+  .ui3n-dialog__overlay {
+    position: fixed;
+    z-index: 1000;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .ui3n-dialog {
+    --dialog-border-radius: 8px;
+    --dialog-title-padding: 16px 24px 16px;
+    --dialog-title-font-size: 14px;
+    --dialog-actions-padding: 16px;
+    --dialog-confirm-button-color: var(--system-white, #fff);
+    --dialog-cancel-button-color: var(--blue-main, #0090ec);
+    --dialog-confirm-background-color: var(--blue-main, #0090ec);
+    --dialog-cancel-background-color: var(--system-white, #fff);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    max-height: 95%;
+    background-color: var(--system-white, #fff);
+    border-radius: var(--dialog-border-radius);
+    @include elevation();
+
+    &__title {
+      padding: var(--dialog-title-padding);
+      font-size: var(--dialog-title-font-size);
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--black-90, #212121);
+      border-bottom: 1px solid var(--grey-50, #f2f2f2);
+      @include text-overflow-ellipsis();
+    }
+
+    &__close {
+      position: absolute;
+      right: 4px;
+      top: 4px;
+    }
+
+    &__content {
+      flex-grow: 2;
+      overflow-y: auto;
+    }
+
+    &__actions {
+      padding: var(--dialog-actions-padding);
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      &--both {
+        .ui3n-button {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+</style>

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

@@ -1,14 +1,18 @@
 <script lang="ts" setup>
   import { computed, ref } from 'vue'
 
-  const props = defineProps<{
+  export interface Ui3nDropFilesProps {
     title?: string;
     text?: string;
     additionalText?: string;
-  }>()
-  const emit = defineEmits<{
+  }
+
+  export interface Ui3nDropFilesEmits {
     (e: 'select', fileList: FileList): void;
-  }>()
+  }
+
+  const props = defineProps<Ui3nDropFilesProps>()
+  const emit = defineEmits<Ui3nDropFilesEmits>()
 
   const isOverDropPlace = ref(false)
   const isOverDropZone = ref(false)

package/src/components/ui3n-emoji.vue

@@ -1,14 +1,18 @@
 <script lang="ts" setup>
   import { computed, onMounted, ref } from 'vue'
 
-  const props = defineProps<{
+  export interface Ui3nEmojiProps {
     emoji: string;
     size?: string | number;
     readonly?: boolean;
-  }>()
-  const emit = defineEmits<{
+  }
+
+  export interface Ui3nEmojiEmits {
     (ev: 'click', value: Event): void;
-  }>()
+  }
+
+  const props = defineProps<Ui3nEmojiProps>()
+  const emit = defineEmits<Ui3nEmojiEmits>()
 
   const emojiElement = ref<HTMLDivElement | null>(null)
   const params = computed(() => {

package/src/components/ui3n-list.vue

@@ -0,0 +1,135 @@
+<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;
+  }
+
+  const props = withDefaults(defineProps<Ui3nListProps<T>>(), {
+    title: '',
+    sticky: true,
+    disabled: false,
+  })
+
+
+  const emits = defineEmits<Ui3nListEmits<T>>()
+  defineSlots<Ui3nListSlots<T>>()
+</script>
+
+<template>
+  <div
+    ref="listElement"
+    class="ui3n-list"
+  >
+    <div
+      :class="[
+        'ui3n-list__title',
+        { 'ui3n-list__title--sticky': props.sticky },
+      ]"
+    >
+      <slot name="title">
+        <div
+          v-if="props.title"
+          class="ui3n-list__title-content"
+        >
+          {{ props.title }}
+        </div>
+      </slot>
+    </div>
+
+    <div class="ui3n-list__content">
+      <div
+        v-for="(item, index) in props.items"
+        :key="item.id ?? index"
+        class="ui3n-list__item"
+      >
+        <slot
+          name="item"
+          :item="item"
+          :index="index"
+        >
+          <div
+            :class="[
+              'ui3n-list__item-content',
+              { 'ui3n-list__item-content--disables': props.disabled },
+            ]"
+            @click.stop="emits('select', { value: item, index })"
+          >
+            {{ item }}
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-list {
+    --ui3n-list-item-height: 28px;
+    --ui3n-list-bg-color: var(--system-white, #fff);
+
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: var(--ui3n-list-bg-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+
+    &__title {
+      position: relative;
+      top: 0;
+      z-index: 1;
+
+      &--sticky {
+        position: sticky;
+      }
+    }
+
+    &__content {
+      position: relative;
+      flex-grow: 1;
+    }
+
+    &__title-content,
+    &__item {
+      position: relative;
+      width: 100%;
+      min-height: var(--ui3n-list-item-height);
+      padding: 4px 0;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    &__title-content {
+      z-index: 1;
+      font-size: 16px;
+      font-weight: 600;
+      background-color: var(--ui3n-list-bg-color);
+    }
+
+    &__item-content {
+      font-size: 14px;
+      font-weight: 400;
+      cursor: pointer;
+
+      &--disabled {
+        pointer-events: none;
+        cursor: default;
+      }
+    }
+  }
+</style>