@v1nt1248/3nclient-lib 0.0.39 → 0.0.41

package/package.json

@@ -2,9 +2,8 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "Library for 3NWeb clients",
-  "private": false,
   "type": "module",
   "files": [
     "dist",
@@ -39,59 +38,59 @@
     "dayjs": "^1.11.10",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
-    "sanitize-html": "^2.11.0",
+    "sanitize-html": "^2.12.1",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
     "pinia": "^2.1.7",
-    "vue": "^3.4.7"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.6.7",
-    "@storybook/addon-docs": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/builder-vite": "^7.6.7",
+    "@storybook/addon-actions": "^8.0.2",
+    "@storybook/addon-docs": "^8.0.2",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/builder-vite": "^8.0.2",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.6.7",
-    "@storybook/vue3-vite": "^7.6.7",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.8",
-    "@types/sanitize-html": "^2.9.5",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "@vitejs/plugin-vue": "^4.6.2",
-    "@vue/compiler-core": "^3.4.7",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@storybook/vue3": "^8.0.2",
+    "@storybook/vue3-vite": "^8.0.2",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^20.11.30",
+    "@types/sanitize-html": "^2.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-core": "^3.4.21",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vuedx/typescript-plugin-vue": "^0.7.6",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-vue": "^9.23.0",
     "jackspeak": "^2.3.6",
     "path": "^0.12.7",
     "pinia": "^2.1.7",
-    "postcss-html": "^1.5.0",
+    "postcss-html": "^1.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.69.7",
-    "storybook": "^7.6.7",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended-scss": "^12.0.0",
+    "sass": "^1.72.0",
+    "storybook": "^8.0.2",
+    "stylelint": "^16.2.1",
+    "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard": "^36.0.0",
     "stylelint-rscss": "^0.4.0",
-    "stylelint-scss": "^5.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vite-plugin-css-injected-by-js": "^3.3.1",
-    "vite-plugin-dts": "^3.7.0",
-    "vue": "^3.4.7",
-    "vue-tsc": "^1.8.27"
+    "stylelint-scss": "^6.2.1",
+    "typescript": "^5.4.2",
+    "vite": "^5.2.2",
+    "vite-plugin-css-injected-by-js": "^3.5.0",
+    "vite-plugin-dts": "^3.7.3",
+    "vue": "^3.4.21",
+    "vue-tsc": "^2.0.7"
   },
-  "packageManager": "yarn@3.6.3"
+  "packageManager": "yarn@4.1.1"
 }

package/src/components/index.ts

@@ -31,6 +31,10 @@ 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'
+import Ui3nBreadcrumb from './ui3n-breadcrumb.vue'
+import type { Ui3nBreadcrumdProps, Ui3nBreadcrumdEmits, Ui3nBreadcrumdSlots } from './ui3n-breadcrumb.vue'
+import Ui3nBreadcrumbs from './ui3n-breadcrumbs.vue'
+import type { Ui3nBreadcrumdsProps } from './ui3n-breadcrumbs.vue'
 
 export {
   Ui3nIcon,
@@ -87,4 +91,10 @@ export {
   Ui3nTabsSlots,
   Ui3nBadge,
   Ui3nBadgeProps,
+  Ui3nBreadcrumb,
+  Ui3nBreadcrumdProps,
+  Ui3nBreadcrumdEmits,
+  Ui3nBreadcrumdSlots,
+  Ui3nBreadcrumbs,
+  Ui3nBreadcrumdsProps,
 }

package/src/components/ui3n-breadcrumb.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+  import { computed, getCurrentInstance } from 'vue';
+
+  export interface Ui3nBreadcrumdProps {
+    separator?: string | undefined;
+    isActive?: boolean;
+    disabled?: boolean;
+  }
+  export interface Ui3nBreadcrumdEmits {
+    (ev: 'click', value: Event): void;
+  }
+  export interface Ui3nBreadcrumdSlots {
+    separator: () => unknown;
+    default: () => unknown;
+  }
+
+  const props = withDefaults(
+    defineProps<Ui3nBreadcrumdProps>(),
+    {
+      separator: undefined,
+      isActive: false,
+      disabled: false,
+    },
+  )
+
+  const emits = defineEmits<Ui3nBreadcrumdEmits>()
+  defineSlots<Ui3nBreadcrumdSlots>()
+
+  const separatorValue = computed(() => {
+    if (props.separator) {
+      return props.separator
+    }
+
+    const instance = getCurrentInstance()
+    return instance?.parent?.props.separator || '/'
+  })
+
+  const parentDisabled = computed(() => {
+    const instance = getCurrentInstance()
+    return instance?.parent?.props.disabled || false;
+  })
+
+  const onClick = (ev: Event) => {
+    emits('click', ev);
+  }
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui3n-breadcrumb',
+      {
+        'ui3n-breadcrumb--active': isActive,
+        'ui3n-breadcrumb--disabled': disabled || parentDisabled,
+      },
+    ]"
+    v-on="isActive && !(disabled || parentDisabled) ? { click: onClick } : {}"
+  >
+    <slot />
+    <div
+      v-if="isActive"
+      class="ui3n-breadcrumb__separator"
+    >
+      <slot name="separator">
+        <span>{{ separatorValue }}</span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-breadcrumb {
+    --ui3n-breadcrumb-font-size: 16px;
+    --ui3n-breadcrumb-color-default: var(--black-90, #212121);
+    --ui3n-breadcrumb-color-selected: var(--blue-main, #0090ec);
+
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    &__separator {
+      display: flex;
+      align-items: center;
+      margin: 0 var(--base-size, 8px);
+    }
+
+    &--active {
+      font-size: var(--ui3n-breadcrumb-font-size);
+      line-height: 1.25;
+      color: var(--ui3n-breadcrumb-color-default);
+
+      &:hover {
+        cursor: pointer;
+        color: var(--ui3n-breadcrumb-color-selected);
+      }
+    }
+
+    &--disabled {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+</style>

package/src/components/ui3n-breadcrumbs.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+  export interface Ui3nBreadcrumdsProps {
+    separator?: string;
+    disabled?: boolean;
+  }
+
+  withDefaults(
+    defineProps<Ui3nBreadcrumdsProps>(),
+    {
+      separator: '/',
+      disabled: false,
+    },
+  )
+</script>
+
+<template>
+  <div :class="['ui3n-breadcrumbs']">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-breadcrumbs {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+  }
+</style>