@v1nt1248/3nclient-lib 0.0.9 → 0.0.12

package/src/components/ui3n-menu.vue

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { computed, onMounted, ref } from 'vue'
+  import { default as vClickOutside } from '../directives/ui3n-click-outside'
+
+  export interface Ui3nMenuProps {
+    offsetX?: number;
+    offsetY?: number;
+    closeOnClick?: boolean;
+    closeOnClickOutside?: boolean;
+    disabled?: boolean;
+  }
+
+  export interface Ui3nMenuEmits {
+    (ev: 'open'): void;
+    (ev: 'opened'): void;
+    (ev: 'close'): void;
+    (ev: 'closed'): void;
+    (ev: 'click-outside'): void;
+  }
+
+  export interface Ui3nMenuSlots {
+    default: () => any;
+    menu?: () => any;
+  }
+
+  const props = withDefaults(defineProps<Ui3nMenuProps>(), {
+    offsetX: 0,
+    offsetY: 0,
+    closeOnClick: true,
+    closeOnClickOutside: true,
+    disabled: false,
+  })
+  const emits = defineEmits<Ui3nMenuEmits>()
+  defineSlots<Ui3nMenuSlots>()
+
+  const menuElement = ref<HTMLDivElement | null>(null)
+  const menuTriggerElement = ref<HTMLDivElement | null>(null)
+  const isShow = ref(false)
+  const defaultAnimationDuration = 400
+  const menuContentStyle = computed(() => {
+    if (!props.offsetX && !props.offsetY) {
+      return {}
+    }
+    return {
+      ...(props.offsetX && { left: `${props.offsetX}px` }),
+      ...(props.offsetY && { top: `${menuTriggerElement.value!.clientHeight + props.offsetY}px` }),
+    }
+  })
+
+  onMounted(() => {
+    menuElement.value!.style.setProperty('--menu-animation-duration', `${defaultAnimationDuration}ms`)
+  })
+
+  const toggleMenu = () => {
+    isShow.value = !isShow.value
+  }
+
+  const onContentClick = () => {
+    isShow.value = false
+  }
+  const onClickOutside = () => {
+    emits('click-outside')
+    if (props.closeOnClickOutside) {
+      isShow.value = false
+    }
+  }
+</script>
+
+<template>
+  <div
+    ref="menuElement"
+    class="ui3n-menu"
+  >
+    <div
+      ref="menuTriggerElement"
+      class="ui3n-menu__trigger"
+      @click.stop="toggleMenu"
+    >
+      <slot />
+    </div>
+
+    <transition
+      name="menu"
+      :duration="defaultAnimationDuration"
+      @before-enter="emits('open')"
+      @after-enter="emits('opened')"
+      @before-leave="emits('close')"
+      @after-leave="emits('closed')"
+    >
+      <div
+        v-if="isShow"
+        v-click-outside="onClickOutside"
+        :style="menuContentStyle"
+        class="ui3n-menu__content"
+        v-on="props.closeOnClick ? { click: onContentClick } : {}"
+      >
+        <slot name="menu" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixins";
+
+  .ui3n-menu {
+    --menu-animation-duration: 400ms;
+
+    position: relative;
+    overflow: visible;
+
+    .menu-enter-active,
+    .menu-leave-active {
+      transition: opacity var(--menu-animation-duration);
+    }
+
+    .menu-enter-from,
+    .menu-leave-to {
+      opacity: 0;
+    }
+
+    &__trigger {
+      position: relative;
+    }
+
+    &__content {
+      position: absolute;
+      border-radius: 4px;
+      background-color: var(--system-white, #fff);
+      @include elevation(3);
+    }
+  }
+</style>

package/src/components/ui3n-notification.vue

@@ -2,20 +2,9 @@ ui<script lang="ts" setup>
   import { computed  } from 'vue'
   import Ui3nIcon from './ui3n-icon.vue'
   import Ui3nButton from './ui3n-button.vue'
+  import type { Ui3nNotificationProps } from '../constants'
 
-  const props = defineProps<{
-    id?: string;
-    type?: 'success' | 'warning' | 'info' | 'error';
-    content: string;
-    icon?: string;
-    iconSize?: string | number;
-    iconColor?: string;
-    position?: 'left' | 'center' | 'right';
-    duration?: number;
-    teleport?: string;
-    onOpen?: () => void;
-    onClose?: () => void;
-  }>()
+  const props = defineProps<Ui3nNotificationProps>()
   const params = computed(() => {
     const {
       id,

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

@@ -2,11 +2,13 @@
   import { computed } from 'vue'
   import Ui3nIcon from './ui3n-icon.vue'
 
-  const props = defineProps<{
+  export interface Ui3nTableSortIconProps {
     size?: string | number;
     color?: string;
     value: 'asc' | 'desc';
-  }>()
+  }
+
+  const props = defineProps<Ui3nTableSortIconProps>()
 
   const iconSize = computed(() => props.size ? +props.size : 16)
   const iconColor = computed(() => props.color || 'var(--black-90, #212121)')

package/src/components/ui3n-table.vue

@@ -2,15 +2,20 @@
   import { computed, ref } from 'vue'
   import { Icon } from '@iconify/vue'
   import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue'
+  import type { ListingEntryTypeExtended, EntityAction, SortField } from '../constants'
 
-  const props = defineProps<{
+  export interface Ui3nTableProps {
     items: ListingEntryTypeExtended[];
     textIfEmpty?: string;
-  }>()
-  const emit = defineEmits<{
+  }
+
+  export interface Ui3nTableEmits {
     (ev: 'go', name: string): void;
     (ev: 'action', value: { action: EntityAction, entity: ListingEntryTypeExtended }): void;
-  }>()
+  }
+
+  const props = defineProps<Ui3nTableProps>()
+  const emit = defineEmits<Ui3nTableEmits>()
 
   const sortField = ref<SortField>('name')
   const sortDirection = ref<'asc'|'desc'>('asc')

package/src/components/ui3n-text.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
   /* eslint-disable @typescript-eslint/no-explicit-any */
   import { computed, onMounted, ref, watch } from 'vue'
-  import { patchTextareaMaxRowsSupport } from '../helpers/textarea-max-rows'
+  import { patchTextareaMaxRowsSupport } from '../tools'
 
-  const props = defineProps<{
+  export interface Ui3nTextProps {
     text: string;
     rows?: number;
     maxRows?: number;
@@ -11,15 +11,19 @@
     placeholder?: string;
     rules?: Array<(v: string) => any>;
     disabled?: boolean;
-  }>()
-  const emit = defineEmits<{
+  }
+
+  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;
-  }>()
+  }
+
+  const props = defineProps<Ui3nTextProps>()
+  const emit = defineEmits<Ui3nTextEmits>()
 
   const textareaElement = ref<HTMLTextAreaElement | null>(null)
   const isFocused = ref(false)

package/src/components/ui3n-virtual-scroll.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup generic="T extends { id?: string }">
+  /* eslint-disable @typescript-eslint/no-explicit-any */ 
+  import { computed, onMounted, ref } from 'vue'
+
+  export interface Ui3nVirtualScrollProps<T> {
+    items: T[];
+    minChildHeight: number;
+    renderAhread?: number;
+  }
+
+  export interface Ui3nVirtualScrollSlots<T> {
+    item: (item: T, index: number) => any;
+  }
+
+  const props = withDefaults(defineProps<Ui3nVirtualScrollProps<T>>(), {
+    renderAhread: 20,
+  })
+  defineSlots<Ui3nVirtualScrollSlots<T>>()
+
+  const scrollTop = ref(0)
+  const animationFrame = ref<number | undefined>()
+  const wrapElement = ref<HTMLDivElement | null>(null)
+  const wrapElementHeight = computed(() => wrapElement.value
+    ? wrapElement.value.clientHeight
+    : 0
+  )
+  const itemCount = computed(() => props.items.length)
+  const totalHeight = computed(() => itemCount.value * props.minChildHeight)
+  const startNode = computed(() => {
+    const val = Math.floor(scrollTop.value / props.minChildHeight) - props.renderAhread
+    return Math.max(0, val)
+  })
+  const visibleNodeCount = computed(() => {
+    const val = Math.ceil(wrapElementHeight.value / props.minChildHeight) +2 * props.renderAhread
+    return Math.min(itemCount.value - startNode.value, val)
+  })
+  const offsetY = computed(() => startNode.value * props.minChildHeight)
+  const visibleChildren = computed(() => props.items.slice(startNode.value, startNode.value + visibleNodeCount.value))
+
+  const onScroll = (event: Event) => {
+    if (animationFrame.value) {
+      cancelAnimationFrame(animationFrame.value)
+    }
+    
+    animationFrame.value = requestAnimationFrame(() => scrollTop.value = (event.target as HTMLDivElement).scrollTop)
+  }
+
+  onMounted(() => {
+    if (wrapElement.value) {
+      scrollTop.value = wrapElement.value.scrollTop
+    }
+  })
+</script>
+
+<template>
+  <div
+    ref="wrapElement"
+    class="ui3n-virtual-scroll"
+    @scroll="onScroll"
+  >
+    <div
+      class="ui3n-virtual-scroll__viewport"
+      :style="{ height: `${totalHeight}px` }"
+    >
+      <div
+        class="ui3n-virtual-scroll__content"
+        :style="{ transform: `translateY(${offsetY}px)` }"
+      >
+        <div
+          v-for="(item, index) in visibleChildren"
+          :key="item.id"
+          :data-sid="item.id ?? index"
+          class="ui3n-virtual-scroll__item"
+        >
+          <slot
+            name="item"
+            :item="item"
+            :index="startNode + index"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-virtual-scroll {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+
+    &__viewport {
+      position: relative;
+      overflow: hidden;
+      will-change: transform;
+    }
+
+    &__content {
+      will-change: transform;
+    }
+
+    &__item {
+      position: relative;
+      min-height: 16px;
+    }
+  }
+</style>

package/dist/types.d.ts

@@ -1,21 +0,0 @@
-import { VNode } from 'vue';
-import type { Ui3nNotificationProps, VueEventBus } from './constants';
-import type { Ui3nButtonProps, Ui3nButtonEmits } from './components';
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $createNotice: (params: Ui3nNotificationProps) => void;
-        $locale: string;
-        $tr: (key: string, placeholders?: Record<string, string>) => string;
-        $changeLocale: (lang: string) => void;
-        $emitter: VueEventBus;
-    }
-}
-declare module '@v1nt1248/3nclient-lib' {
-    class Ui3nButton {
-        $props: Ui3nButtonProps;
-        $emits: Ui3nButtonEmits;
-        $clots: {
-            default: () => VNode[];
-        };
-    }
-}