@v1nt1248/3nclient-lib 0.0.8 → 0.0.11

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/dist/types.d.ts

@@ -1,23 +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[];
-    }
-  }
-}