@v1nt1248/3nclient-lib 0.0.25 → 0.0.27

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "Library for 3NWeb clients",
   "private": false,
   "type": "module",
@@ -47,16 +47,16 @@
     "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/addon-actions": "^7.5.1",
+    "@storybook/addon-docs": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/builder-vite": "^7.5.1",
     "@storybook/testing-library": "^0.2.1",
-    "@storybook/vue3": "^7.4.4",
-    "@storybook/vue3-vite": "^7.4.4",
+    "@storybook/vue3": "^7.5.1",
+    "@storybook/vue3-vite": "^7.5.1",
     "@types/lodash": "^4.14.197",
     "@types/node": "^20.5.6",
     "@types/sanitize-html": "^2.9.0",
@@ -86,7 +86,7 @@
     "stylelint-rscss": "^0.4.0",
     "stylelint-scss": "^5.1.0",
     "typescript": "^5.2.2",
-    "vite": "^4.4.5",
+    "vite": "^4.5.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-dts": "^3.5.3",
     "vue": "^3.3.4",

package/src/components/index.ts

@@ -10,6 +10,8 @@ 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 Ui3mCheckbox from './ui3n-checkbox.vue'
+import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots } from './ui3n-checkbox.vue'
 import Ui3nNotification from './ui3n-notification.vue'
 import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue'
 import type { Ui3nTableSortIconProps } from './ui3n-table-sort-icon.vue'
@@ -23,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,
@@ -43,6 +47,10 @@ export {
   Ui3nText,
   Ui3nTextProps,
   Ui3nTextEmits,
+  Ui3mCheckbox,
+  Ui3nCheckboxProps,
+  Ui3nCheckboxEmits,
+  Ui3nCheckboxSlots,
   Ui3nNotification,
   Ui3nTableSortIcon,
   Ui3nTableSortIconProps,
@@ -65,4 +73,8 @@ export {
   Ui3nVirtualScroll,
   Ui3nVirtualScrollProps,
   Ui3nVirtualScrollSlots,
+  Ui3nTabs,
+  Ui3nTabsProps,
+  Ui3nTabsEmits,
+  Ui3nTabsSlots,
 }

package/src/components/ui3n-button.vue

@@ -110,8 +110,7 @@
     line-height: var(--ui3n-button-text-height);
     font-weight: 600;
     color: var(--ui3n-button-text-color);
-    background-position: center;
-    transition: background 0.5s ease-in-out;
+    user-select: none;
 
     &--round {
       --ui3n-button-padding-vert: 6px;
@@ -125,13 +124,7 @@
     }
 
     &:not([disabled]) {
-      cursor: pointer;
-
       &:hover {
-        background:
-          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 {
@@ -141,13 +134,6 @@
           }
         }
       }
-
-      &:active {
-        opacity: 1;
-        background-color: var(--black-30, #b3b3b3);
-        background-size: 100%;
-        transition: background 0s;
-      }
     }
 
     &__icon {
@@ -168,5 +154,16 @@
     &[disabled] {
       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-checkbox.vue

@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+  import { computed, onMounted, watch, onBeforeMount, ref, useSlots } from 'vue'
+  import Ui3nIcon from './ui3n-icon.vue'
+
+  type Ui3nCheckboxValue = boolean | string | number;
+  
+  export interface Ui3nCheckboxProps {
+    modelValue: Ui3nCheckboxValue;
+    checkedValue?: Ui3nCheckboxValue;
+    uncheckedValue?: Ui3nCheckboxValue;
+    size?: number|string;
+    color?: string;
+    indeterminate?: boolean;
+    disabled?: boolean;
+  }
+
+  export interface Ui3nCheckboxEmits {
+    (ev: 'change', value: Ui3nCheckboxValue): void;
+    (ev: 'update:modelValue', value: Ui3nCheckboxValue): void;
+  }
+
+  export interface Ui3nCheckboxSlots {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    default: () => any;
+  }
+
+  const iconMap = {
+    checked: 'check-box-checked',
+    unchecked: 'check-box',
+    indeterminate: 'check-box-inderterminate',
+  }
+
+  const props = withDefaults(
+    defineProps<Ui3nCheckboxProps>(),
+    {
+      modelValue: false,
+      checkedValue: true,
+      uncheckedValue: false,
+      size: '16',
+      color: '#0090ec',
+      indeterminate: false,
+      disabled: false,
+    },
+  )
+  const emits = defineEmits<Ui3nCheckboxEmits>()
+  defineSlots<Ui3nCheckboxSlots>()
+
+  const slots = useSlots()
+
+  const checkboxEl = ref<HTMLDivElement|null>(null)
+  const val = ref<Ui3nCheckboxValue>(props.uncheckedValue || false)
+  const uncertain = ref(false)
+
+  onBeforeMount(() => {
+    const checkedValueType = typeof props.checkedValue
+    const uncheckedValueType = typeof props.uncheckedValue
+    const valueType = typeof props.modelValue
+    if (
+      checkedValueType !== uncheckedValueType
+      || checkedValueType !== valueType
+      || uncheckedValueType !== valueType
+    ) {
+      throw Error('[Ui3nCheckbox] types of "value", "checkedValue" and "unchecktdValue" are different')
+    }
+  })
+
+  onMounted(() => {
+    if (checkboxEl.value) {
+      checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${props.size}px`)
+    }
+  })
+
+  watch(
+    () => props.modelValue,
+    newValue => val.value = newValue,
+    { immediate: true },
+  )
+
+  watch(
+    () => props.indeterminate,
+    newValue => uncertain.value = newValue,
+    {  immediate: true},
+  )
+
+  watch(
+    () => props.size,
+    newValue => {
+      if (checkboxEl.value) {
+        checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${newValue}px`)
+      }
+    },
+  )
+
+  const checkBoxValue = computed(() => {
+    if (uncertain.value) {
+      return 'indeterminate'
+    }
+
+    return val.value === props.checkedValue
+      ? 'checked'
+      : 'unchecked'
+  } )
+
+  const change = () => {
+    val.value = checkBoxValue.value !== 'unchecked'
+      ? props.uncheckedValue
+      : props.checkedValue
+
+    if (uncertain.value) {
+      uncertain.value = false
+    }
+
+    emits('change', val.value)
+    emits('update:modelValue', val.value)
+  }
+</script>
+
+<template>
+  <div
+    ref="checkboxEl"
+    :class="[
+      'ui3n-checkbox',
+      {
+        'ui3n-checkbox--disabled': props.disabled,
+        'ui3n-checkbox--with-label': slots.default,
+      },
+    ]"
+  >
+    <div
+      class="ui3n-checkbox__wrapper"
+      @click="change"
+    >
+      <ui3n-icon
+        class="ui3n-checkbox__icon"
+        :icon="iconMap[checkBoxValue]"
+        :width="props.size"
+        :height="props.size"
+        :color="props.color"
+      />
+    </div>
+
+    <div
+      class="ui3n-checkbox__label"
+      @click="change"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixins";
+
+  .ui3n-checkbox {
+    --ui3n-checkbox-size: 16px;
+    --ui3n-checkbox-text-size: 12px;
+    --ui3n-checkbox-text-color: var(--black-90, #212121);
+    --ui3n-checkbox-text-weight: 500;
+
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    &__wrapper {
+      position: relative;
+      display: flex;
+      width: calc(var(--ui3n-checkbox-size) * 1.5);
+      height: calc(var(--ui3n-checkbox-size) * 1.5);
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      cursor: pointer;
+
+      @include ripple(transparent);
+    }
+
+    &__label {
+      font-size: var(--ui3n-checkbox-text-size);
+      font-weight: var(--ui3n-checkbox-text-weight);
+      color: var(--ui3n-checkbox-text-color);
+      user-select: none;
+      cursor: pointer;
+    }
+
+    &--disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+</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>