@v1nt1248/3nclient-lib 0.0.37 → 0.0.39

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "description": "Library for 3NWeb clients",
   "private": false,
   "type": "module",
@@ -36,61 +36,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",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "pinia": "^2.1.6",
-    "vue": "^3.3.4"
+    "pinia": "^2.1.7",
+    "vue": "^3.4.7"
   },
   "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",
+    "@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/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",
     "@vuedx/typescript-plugin-vue": "^0.7.6",
-    "eslint": "^8.48.0",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint": "^8.56.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",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-vue": "^9.19.2",
+    "jackspeak": "^2.3.6",
+    "path": "^0.12.7",
+    "pinia": "^2.1.7",
     "postcss-html": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.66.1",
-    "storybook": "^7.4.4",
-    "stylelint": "^15.10.3",
+    "sass": "^1.69.7",
+    "storybook": "^7.6.7",
+    "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^34.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": "^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"
   },
   "packageManager": "yarn@3.6.3"
 }

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"
@@ -142,7 +145,7 @@
     }
 
     &__text {
-      display: block;
+      display: flex;
       opacity: 0.85;
       transition: opacity 0.2s ease-in-out;
 

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 {