@v1nt1248/3nclient-lib 0.0.31 → 0.0.33

package/package.json

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

package/src/components/index.ts

@@ -29,6 +29,8 @@ 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'
+import Ui3nBadge from './ui3n-badge.vue'
+import type { Ui3nBadgeProps } from './ui3n-badge.vue'
 
 export {
   Ui3nIcon,
@@ -83,4 +85,6 @@ export {
   Ui3nTabsProps,
   Ui3nTabsEmits,
   Ui3nTabsSlots,
+  Ui3nBadge,
+  Ui3nBadgeProps,
 }

package/src/components/ui3n-badge-simple.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+  import { nextTick, onMounted, ref, watch } from 'vue'
+
+  export interface Ui3nBadgeSimpleProps {
+    dot?: boolean;
+    value?: string | number;
+    color?: string;
+    textColor?: string;
+  }
+
+  const props = withDefaults(
+    defineProps<Ui3nBadgeSimpleProps>(),
+    {
+      dot: false,
+      value: '',
+      color: '#0090ec',
+      textColor: '#fff',
+    },
+  )
+
+  const emits = defineEmits<{
+    (ev: 'change:size', val: { width: number; height: number }): void;
+  }>()
+
+  const element = ref<HTMLDivElement | null>(null)
+
+  watch(
+    () => [props.value, props.dot],
+    () => getElementSize(),
+  )
+
+  onMounted(() => {
+    getElementSize()
+  })
+
+  function getElementSize() {
+    nextTick(() => {
+      if (element.value) {
+        emits('change:size', { width: element.value.offsetWidth, height: element.value.offsetHeight })
+      }
+    })
+  }
+</script>
+
+<template>
+  <div
+    ref="element"
+    :class="[
+      'ui3n-badge-simple',
+      { 'ui3n-badge-simple__dot': dot },
+    ]"
+  >
+    <span
+      v-if="!dot"
+      class="ui3n-badge-simple__text"
+    >
+      {{ value }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-badge-simple{
+    --ui3n-badge-size: 20px;
+
+    position: relative;
+    box-sizing: border-box;
+    background-color: v-bind(color);
+    outline: 1px var(--system-white, #fff) solid;
+
+    &__dot {
+      min-width: 8px;
+      width: 8px;
+      max-width: 8px;
+      min-height: 8px;
+      height: 8px;
+      max-height: 8px;
+      border-radius: 50%;
+    }
+
+    &__text {
+      display: block;
+      color: v-bind(textColor);
+      font-size: 12px;
+      line-height: var(--ui3n-badge-size);
+      text-align: center;
+    }
+
+    &:not(.ui3n-badge-simple__dot) {
+      min-height: var(--ui3n-badge-size);
+      height: var(--ui3n-badge-size);
+      width: max-content;
+      padding: 0 6px;
+      border-radius: 10px;
+    } 
+  }
+</style>

package/src/components/ui3n-badge.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+  import { computed, ref, useSlots } from 'vue'
+  import get from 'lodash/get'
+  import Ui3nBadgeSimple from './ui3n-badge-simple.vue'
+
+  export interface Ui3nBadgeProps {
+    dot?: boolean;
+    value?: string | number;
+    color?: string;
+    textColor?: string;
+    position?: 'right-top' | 'right-bottom' | 'left-top' | 'left-bottom';
+  }
+
+  const props = withDefaults(
+    defineProps<Ui3nBadgeProps>(),
+    {
+      dot: false,
+      value: '',
+      color: '#0090ec',
+      textColor: '#fff',
+      position: 'right-top',
+    },
+  )
+
+  const slots = useSlots()
+  const badgeElementSize = ref<{
+    width: number;
+    height: number;
+  } | never>()
+
+  const hasDefaultSlot = computed(() => !!slots.default)
+  const style = computed(() => {
+    const [xPosition, yPosition] = props.position.split('-')
+    return {
+      ...(xPosition === 'right' && { right: `-${get(badgeElementSize.value, 'width', 0) / 2}px` }),
+      ...(xPosition === 'left' && { left: `-${get(badgeElementSize.value, 'width', 0) / 2}px` }),
+      ...(yPosition === 'top' && { top: `-${get(badgeElementSize.value, 'height', 0) / 2}px` }),
+      ...(yPosition === 'bottom' && { bottom: `-${get(badgeElementSize.value, 'height', 0) / 2}px` }),
+    }
+  })
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-multiple-template-root -->
+  <div
+    v-if="hasDefaultSlot"
+    class="ui3n-badge"
+  >
+    <div class="ui3n-badge__wrapper">
+      <slot />
+
+      <ui3n-badge-simple
+        :dot="dot"
+        :value="value"
+        :color="color"
+        :text-color="textColor"
+        :style="style"
+        class="ui3n-badge__content"
+        @change:size="badgeElementSize = $event"
+      />
+    </div>
+  </div>
+
+  <ui3n-badge-simple
+    v-else
+    :dot="dot"
+    :value="value"
+    :color="color"
+    :text-color="textColor"
+  />
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-badge {
+    --ui3n-badge-size: 20px;
+
+    position: relative;
+
+    &__wrapper {
+      position: relative;
+      width: max-content;
+    }
+
+    &__content {
+      position: absolute;
+      z-index: 5;
+    }
+  }
+</style>

package/src/components/ui3n-chip.vue

@@ -117,6 +117,7 @@
 
     &--with-icon {
       .ui3n-chip__icon {
+        display: flex;
         margin-right: 5px;
       }
     }