@v1nt1248/3nclient-lib 0.0.38 → 0.0.40

package/package.json

@@ -2,9 +2,8 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "description": "Library for 3NWeb clients",
-  "private": false,
   "type": "module",
   "files": [
     "dist",
@@ -36,61 +35,62 @@
   "dependencies": {
     "@iconify-icons/ic": "^1.2.13",
     "@iconify/vue": "^4.1.1",
-    "dayjs": "^1.11.9",
+    "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.6",
-    "vue": "^3.3.4"
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@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.5.1",
-    "@storybook/vue3-vite": "^7.5.1",
-    "@types/lodash": "^4.14.197",
-    "@types/node": "^20.5.6",
-    "@types/sanitize-html": "^2.9.0",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-core": "^3.3.4",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@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": "^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.48.0",
-    "eslint-plugin-import": "^2.28.1",
+    "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.14",
-    "eslint-plugin-vue": "^9.17.0",
-    "jackspeak": "^2.3.3",
-    "pinia": "^2.1.6",
-    "postcss-html": "^1.5.0",
+    "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.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.66.1",
-    "storybook": "^7.4.4",
-    "stylelint": "^15.10.3",
-    "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.1.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-plugin-dts": "^3.5.3",
-    "vue": "^3.3.4",
-    "vue-tsc": "^1.8.5"
+    "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,105 @@
+<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()
+    console.log('INS: ', instance?.parent?.props.separator)
+    return instance?.parent?.props.separator || '/'
+  })
+
+  const parentDisabled = computed(() => {
+    const instance = getCurrentInstance()
+    console.log('DIS: ', instance?.parent?.props.disabled)
+    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>

package/src/components/ui3n-button.vue

@@ -15,6 +15,7 @@
   }
 
   export interface Ui3nButtonEmits {
+    (ev: 'init', value: HTMLButtonElement): void;
     (ev: 'click', value: Event): void;
     (ev: 'focus', value: Event): void;
     (ev: 'blur', value: Event): void;
@@ -22,7 +23,7 @@
 
   const slots = useSlots()
   const props = defineProps<Ui3nButtonProps>()
-  const emit = defineEmits<Ui3nButtonEmits>()
+  const emits = defineEmits<Ui3nButtonEmits>()
 
   const buttonEl = ref<HTMLButtonElement | null>(null)
   const isSlotEmpty = computed(() => !hasSlotContent(slots['default']))
@@ -51,6 +52,8 @@
       if (props.textColor) {
         buttonEl.value.style.setProperty('--ui3n-button-text-color', props.textColor)
       }
+
+      emits('init', buttonEl.value)
     }
   })
 </script>
@@ -64,9 +67,9 @@
     ]"
     type="button"
     :disabled="props.disabled"
-    @click="emit('click', $event)"
-    @focusin="emit('focus', $event)"
-    @focusout="emit('blur', $event)"
+    @click="emits('click', $event)"
+    @focusin="emits('focus', $event)"
+    @focusout="emits('blur', $event)"
   >
     <ui3n-icon
       v-if="props.icon"

package/src/components/ui3n-dialog.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
   /* eslint-disable @typescript-eslint/no-explicit-any */
-  import { computed, onMounted, ref } from 'vue'
+  import { computed, nextTick, onMounted, ref } from 'vue'
   import type { Component } from 'vue'
   import Ui3nButton from './ui3n-button.vue'
 
@@ -27,7 +27,7 @@
     cancelButtonBackground?: string;
     closeOnClickOverlay?: boolean;
   }
-    
+
   export interface Ui3nDialogComponentProps {
     component: Component;
     componentProps?: Record<string, any>;
@@ -97,6 +97,12 @@
       dialogElement.value.style.setProperty('--dialog-confirm-background-color', dialogProps.value.confirmButtonBackground)
       dialogElement.value.style.setProperty('--dialog-cancel-background-color', dialogProps.value.cancelButtonBackground)
     }
+
+    if (dialogElement.value) {
+      nextTick(() => {
+        dialogElement.value!.focus()
+      })
+    }
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -172,8 +178,11 @@
   >
     <div
       ref="dialogElement"
+      tabindex="1"
       :class="dialogProps.cssClass"
       :style="dialogProps.cssStyle"
+      @keydown.esc.stop="startEmit('cancel')"
+      @keydown.enter.stop=" isValid && startEmit('confirm')"
     >
       <div
         v-if="dialogProps.title"
@@ -270,6 +279,7 @@
     max-height: 95%;
     background-color: var(--system-white, #fff);
     border-radius: var(--dialog-border-radius);
+    outline: none;
     @include elevation();
 
     &__title {