@v1nt1248/3nclient-lib 0.0.26 → 0.0.28

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "description": "Library for 3NWeb clients",
   "private": false,
   "type": "module",

package/src/components/index.ts

@@ -25,6 +25,8 @@ 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'
 
 export {
   Ui3nIcon,
@@ -71,4 +73,8 @@ export {
   Ui3nVirtualScroll,
   Ui3nVirtualScrollProps,
   Ui3nVirtualScrollSlots,
+  Ui3nTabs,
+  Ui3nTabsProps,
+  Ui3nTabsEmits,
+  Ui3nTabsSlots,
 }

package/src/components/ui3n-button.vue

@@ -110,6 +110,7 @@
     line-height: var(--ui3n-button-text-height);
     font-weight: 600;
     color: var(--ui3n-button-text-color);
+    user-select: none;
 
     &--round {
       --ui3n-button-padding-vert: 6px;
@@ -154,6 +155,15 @@
       opacity: 0.7;
     }
 
+    &:not(.ui3n-button--round) {
+      .ui3n-button {
+        &__icon,
+        &__text {
+          pointer-events: none
+        }
+      }
+    }
+
     @include ripple(var(--ui3n-button-background));
   }
 </style>

package/src/components/ui3n-tabs.vue

@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+  import { computed, onMounted, ref, watch } from 'vue'
+
+  export interface Ui3nTabsProps {
+    modelValue: number;
+    itemDirection?: 'horizontal' | 'vertical';
+    activeColor?: string;
+    inactiveColor?: string;
+    indicatorColor?: string;
+    indicatorSize?: number | string;
+    indicatorPosition?: 'normal' | 'reverse';
+  }
+
+  export interface Ui3nTabsEmits {
+    (ev: 'update:modelValue', val: number): void;
+  }
+
+  export interface Ui3nTabsSlots {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    default: () => any;
+  }
+
+  const props = withDefaults(
+    defineProps<Ui3nTabsProps>(),
+    {
+      modelValue: 0,
+      itemDirection: 'horizontal',
+      activeColor: 'var(--blue-main, #0090ec)',
+      inactiveColor: 'var(--black-90, #212121)',
+      indicatorColor: 'var(--blue-main, #0090ec)',
+      indicatorSize: 2,
+      indicatorPosition: 'normal',
+    },
+  )
+  const emits = defineEmits<Ui3nTabsEmits>()
+
+
+  const tabs = ref<HTMLDivElement | null>(null)
+  const children = ref<HTMLCollection | null>(null)
+
+  const activeColor = computed(() => props.activeColor)
+  const inactiveColor = computed(() => props.inactiveColor)
+  const indicatorColor = computed(() => props.indicatorColor)
+  const indicatorSize = computed(() => `${props.indicatorSize}px`)
+  const indicatorPosition = computed(() => props.indicatorPosition === 'reverse' ? '100%' : '0')
+
+  watch(
+    () => props.modelValue,
+    newValue => setTabsActivity(newValue),
+  )
+
+  onMounted(() => {
+    if (tabs.value) {
+      children.value = tabs.value.children
+      initialTabsActivity()
+      setTabsActivity(props.modelValue)
+    }
+  })
+
+  function initialTabsActivity(): void {
+    if (children.value) {
+      for (let i = 0; i < children.value.length; i++) {
+        // @ts-ignore
+        children.value[i].dataset.index = `${i}`
+        children.value[i].classList.add('ui3n-tabs__item')
+      }
+    }
+  }
+
+  function setTabsActivity(index: number): void {
+    if (children.value) {
+      for (let i = 0; i < children.value.length; i++) {     
+        if (i === index) {
+          children.value[i].classList.add('ui3n-tabs__item--active')
+        } else {
+          children.value[i].classList.remove('ui3n-tabs__item--active')
+        }
+      }
+    }
+  }
+
+  const onClick = (ev: MouseEvent) => {
+    // @ts-ignore
+    const { index } = ev.target.dataset
+    if (index) {
+      emits('update:modelValue', Number(index))
+    }
+  }
+</script>
+
+<template>
+  <div
+    ref="tabs"
+    :class="[
+      'ui3n-tabs', 
+      props.itemDirection === 'vertical' && 'ui3n-tabs--vertical',
+    ]"
+    v-on="children ? { click: onClick } : {}"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixins";
+
+  .ui3n-tabs {
+    --ui3n-tabs-height: 48px;
+
+    position: relative;
+    height: var(--ui3n-tabs-height);
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+
+    :deep(.ui3n-tabs__item) {
+      cursor: pointer;
+
+      &.ui3n-tabs__item {
+        position: relative;
+        user-select: none;
+        color: v-bind('inactiveColor');
+
+        &:hover {
+          background-color: var(--blue-main-20, #d8edfd);
+        }
+
+        &::after {
+          position: absolute;
+          content: '';
+          left: 0;
+          width: 100%;
+          bottom: v-bind('indicatorPosition');
+          height: v-bind('indicatorSize');
+          background-color: transparent;
+          transition: background-color 250ms ease-in-out;
+        }
+
+        &[disabled] {
+          opacity: 0.5;
+          cursor: default;
+          pointer-events: none
+        }
+
+        @include ripple(#d8edfd);
+      }
+
+      &.ui3n-tabs__item--active {
+        color: v-bind('activeColor');
+
+        &::after {
+          background-color: v-bind('indicatorColor');
+          transition: background-color 250ms ease-in-out;
+        }
+      }
+    }
+
+    &--vertical {
+      height: auto;
+      flex-direction: column;
+
+      :deep(.ui3n-tabs__item) {
+        &.ui3n-tabs__item {
+            &::after {
+            left: v-bind('indicatorPosition');
+            width: v-bind('indicatorSize');
+            bottom: 0;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+</style>