@v1nt1248/3nclient-lib 0.3.51 → 0.4.0

package/dist/ui3n-plugins.js

@@ -1,5 +1,5 @@
 import { H as e, i as t, n, r, t as i } from "./chunks/plugins-keys-DdadrIAg.js";
-import { i as a, t as o } from "./chunks/ui3n-notification-o0tuhTpO.js";
+import { i as a, t as o } from "./chunks/ui3n-notification-CTYQV3nR.js";
 import { Fragment as s, createApp as c, createBlock as l, createElementBlock as u, defineComponent as d, markRaw as f, mergeProps as p, normalizeClass as m, openBlock as h, ref as g, renderList as _ } from "vue";
 import "pinia";
 import v from "mitt";
@@ -21,6 +21,7 @@ var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
 			remove: i
 		}), (e, t) => (h(), u("div", {
 			id: "ui3n-notifications-container",
+			"data-ui3n": "notification-container",
 			class: m(e.$style.ui3nNotificationsWrapper)
 		}, [(h(!0), u(s, null, _(n.value, (e) => (h(), l(o, p({ key: e.id }, { ref_for: !0 }, e, { "on-close": () => a(e) }), null, 16, ["on-close"]))), 128))], 2));
 	}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.51",
+  "version": "0.4.0",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -34,13 +34,17 @@
     "build": "pnpm clean:dist && vite build",
     "pack": "pnpm build && npm pack && cp *.tgz ./dist && rm *.tgz",
     "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "stylelint": "stylelint --config .stylelint.config.cjs 'src/**/*.{vue,scss,css}'",
     "stylelint:fix": "stylelint --config .stylelint.config.cjs --fix 'src/**/*.{vue,scss,css}'",
-    "lint": "pnpm linter && pnpm stylelint",
-    "lint:fix": "pnpm linter:fix && pnpm stylelint:fix",
+    "lint": "pnpm eslint && pnpm stylelint",
+    "lint:fix": "pnpm eslint:fix && pnpm stylelint:fix",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "eslint": "eslint src",
+    "eslint:fix": "eslint --fix src"
   },
   "dependencies": {
     "@floating-ui/dom": "1.7.6",
@@ -67,6 +71,7 @@
     "@vue/compiler-core": "3.5.35",
     "@vue/eslint-config-typescript": "14.7.0",
     "@vue/runtime-core": "3.5.35",
+    "@vue/test-utils": "2.5.0",
     "@vuedx/typescript-plugin-vue": "0.7.6",
     "eslint": "10.4.0",
     "eslint-config-prettier": "10.1.8",
@@ -77,6 +82,7 @@
     "eslint-plugin-vue": "10.9.1",
     "globals": "17.6.0",
     "jackspeak": "4.2.3",
+    "jsdom": "30.0.1",
     "path": "0.12.7",
     "pinia": "3.0.4",
     "postcss-html": "1.8.1",
@@ -98,6 +104,7 @@
     "vite-plugin-static-copy": "^4.1.1",
     "vite-plugin-vue-devtools": "8.1.2",
     "vitepress": "1.6.4",
+    "vitest": "4.1.11",
     "vue": "3.5.35",
     "vue-component-meta": "3.3.2",
     "vue-docgen-api": "4.79.2",

package/src/components/ui3n-autocomplete/ui3n-autocomplete.vue

@@ -380,7 +380,10 @@
 </script>
 
 <template>
-  <div :class="$style.ui3nAutocomplete">
+  <div
+    data-ui3n="autocomplete"
+    :class="$style.ui3nAutocomplete"
+  >
     <!-- 'hidden inputs' block for setting of 'name' attr when used in a form -->
     <fieldset
       v-if="name && !isEmpty(modelValue)"
@@ -545,17 +548,17 @@
 
 <style lang="scss" module>
   .ui3nAutocomplete {
-    --ui3n-autocomplete-min-height: 32px;
-    --ui3n-autocomplete-font-size: 12px;
-    --ui3n-autocomplete-item-font-size: 13px;
-    --ui3n-autocomplete-padding-inline: 8px;
-    --ui3n-autocomplete-padding-block: 4px;
-    --ui3n-autocomplete-border-radius: 4px;
+    --_autocomplete-min-height: var(--ui3n-autocomplete-min-height, 32px);
+    --_autocomplete-font-size: var(--ui3n-autocomplete-font-size, 12px);
+    --_autocomplete-item-font-size: var(--ui3n-autocomplete-item-font-size, 13px);
+    --_autocomplete-padding-inline: var(--ui3n-autocomplete-padding-inline, 8px);
+    --_autocomplete-padding-block: var(--ui3n-autocomplete-padding-block, 4px);
+    --_autocomplete-border-radius: var(--ui3n-autocomplete-border-radius, 4px);
 
     position: relative;
     display: flex;
     width: 100%;
-    min-height: var(--ui3n-autocomplete-min-height);
+    min-height: var(--_autocomplete-min-height);
 
     :global(.match-search) {
       font-weight: 600;
@@ -580,20 +583,20 @@
   }
 
   .displayValue {
-    font-size: var(--ui3n-autocomplete-font-size);
-    line-height: var(--ui3n-autocomplete-min-height);
+    font-size: var(--_autocomplete-font-size);
+    line-height: var(--_autocomplete-min-height);
     font-weight: 400;
     color: var(--color-text-control-primary-default);
   }
 
   .input {
-    border-radius: var(--ui3n-autocomplete-border-radius);
-    padding: 0 var(--ui3n-autocomplete-padding-inline);
+    border-radius: var(--_autocomplete-border-radius);
+    padding: 0 var(--_autocomplete-padding-inline);
     flex: 1 1 60px;
     min-width: 60px;
-    height: var(--ui3n-autocomplete-min-height);
-    font-size: var(--ui3n-autocomplete-font-size);
-    line-height: var(--ui3n-autocomplete-min-height);
+    height: var(--_autocomplete-min-height);
+    font-size: var(--_autocomplete-font-size);
+    line-height: var(--_autocomplete-min-height);
     font-weight: 400;
     color: var(--color-text-control-primary-default);
     background-color: transparent;
@@ -610,8 +613,8 @@
     }
 
     &.inputWithError {
-      height: calc(var(--ui3n-autocomplete-min-height) - 2px);
-      padding: 0 calc(var(--ui3n-autocomplete-padding-inline) - 1px);
+      height: calc(var(--_autocomplete-min-height) - 2px);
+      padding: 0 calc(var(--_autocomplete-padding-inline) - 1px);
       border: 1px solid var(--error-content-default);
     }
   }
@@ -624,15 +627,15 @@
 
   .item {
     display: flex;
-    min-height: var(--ui3n-autocomplete-min-height);
+    min-height: var(--_autocomplete-min-height);
     justify-content: flex-start;
     align-items: center;
-    padding: var(--ui3n-autocomplete-padding-block) var(--ui3n-autocomplete-padding-inline);
-    font-size: var(--ui3n-autocomplete-item-font-size);
+    padding: var(--_autocomplete-padding-block) var(--_autocomplete-padding-inline);
+    font-size: var(--_autocomplete-item-font-size);
     line-height: 1.23;
     font-weight: 500;
     color: var(--color-text-control-primary-default);
-    border-radius: var(--ui3n-autocomplete-border-radius);
+    border-radius: var(--_autocomplete-border-radius);
     user-select: none;
     cursor: pointer;
 
@@ -655,15 +658,15 @@
 
   .noData {
     display: flex;
-    min-height: var(--ui3n-autocomplete-min-height);
+    min-height: var(--_autocomplete-min-height);
     justify-content: flex-start;
     align-items: center;
-    padding: var(--ui3n-autocomplete-padding-block) var(--ui3n-autocomplete-padding-inline);
-    font-size: var(--ui3n-autocomplete-item-font-size);
+    padding: var(--_autocomplete-padding-block) var(--_autocomplete-padding-inline);
+    font-size: var(--_autocomplete-item-font-size);
     line-height: 1.23;
     font-weight: 500;
     color: var(--color-text-control-primary-default);
-    border-radius: var(--ui3n-autocomplete-border-radius);
+    border-radius: var(--_autocomplete-border-radius);
   }
 
   .chipsContainer {

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

@@ -35,6 +35,7 @@
   <div
     ref="element"
     :id="id"
+    data-ui3n="badge-simple"
     :class="[$style.ui3nBadgeSimple, dot && $style.ui3nBadgeDot]"
   >
     <span
@@ -48,11 +49,11 @@
 
 <style lang="scss" module>
   .ui3nBadgeSimple {
-    --ui3n-badge-size: 20px;
-    --ui3n-badge-dot-size: 8px;
-    --ui3n-badge-padding-inline: 6px;
-    --ui3n-badge-nodot-border-radius: 10px;
-    --ui3n-badge-font-size: 12px;
+    --_badge-size: var(--ui3n-badge-size, 20px);
+    --_badge-dot-size: var(--ui3n-badge-dot-size, 8px);
+    --_badge-padding-inline: var(--ui3n-badge-padding-inline, 6px);
+    --_badge-nodot-border-radius: var(--ui3n-badge-nodot-border-radius, 10px);
+    --_badge-font-size: var(--ui3n-badge-font-size, 12px);
 
     position: relative;
     box-sizing: border-box;
@@ -60,29 +61,29 @@
     outline: 1px var(--color-bg-block-primary-default) solid;
 
     &:not(.ui3nBadgeDot) {
-      min-height: var(--ui3n-badge-size);
-      height: var(--ui3n-badge-size);
+      min-height: var(--_badge-size);
+      height: var(--_badge-size);
       width: max-content;
-      padding: 0 var(--ui3n-badge-padding-inline);
-      border-radius: var(--ui3n-badge-nodot-border-radius);
+      padding: 0 var(--_badge-padding-inline);
+      border-radius: var(--_badge-nodot-border-radius);
     }
   }
 
   .ui3nBadgeDot {
-    min-width: var(--ui3n-badge-dot-size);
-    width: var(--ui3n-badge-dot-size);
-    max-width: var(--ui3n-badge-dot-size);
-    min-height: var(--ui3n-badge-dot-size);
-    height: var(--ui3n-badge-dot-size);
-    max-height: var(--ui3n-badge-dot-size);
+    min-width: var(--_badge-dot-size);
+    width: var(--_badge-dot-size);
+    max-width: var(--_badge-dot-size);
+    min-height: var(--_badge-dot-size);
+    height: var(--_badge-dot-size);
+    max-height: var(--_badge-dot-size);
     border-radius: 50%;
   }
 
   .ui3nBadgeText {
     display: block;
     color: v-bind(textColor);
-    font-size: var(--ui3n-badge-font-size);
-    line-height: var(--ui3n-badge-size);
+    font-size: var(--_badge-font-size);
+    line-height: var(--_badge-size);
     text-align: center;
   }
 </style>

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

@@ -39,6 +39,7 @@
   <!-- eslint-disable vue/no-multiple-template-root -->
   <div
     v-if="hasDefaultSlot"
+    data-ui3n="badge"
     :class="$style.ui3nBadge"
   >
     <div :class="$style.ui3nBadgeWrapper">
@@ -69,7 +70,7 @@
 
 <style lang="scss" module>
   .ui3nBadge {
-    --ui3n-badge-size: 20px;
+    --_badge-size: var(--ui3n-badge-size, 20px);
 
     position: relative;
   }
@@ -77,7 +78,7 @@
   .ui3nBadgeWrapper {
     position: relative;
     width: max-content;
-    min-width: var(--ui3n-badge-size);
+    min-width: var(--_badge-size);
   }
 
   .ui3nBadgeContent {

package/src/components/ui3n-breadcrumbs/ui3n-breadcrumb.vue

@@ -40,6 +40,7 @@
 
 <template>
   <div
+    data-ui3n="breadcrumb"
     :class="cssClasses"
     v-on="isActive && !(disabled || parentDisabled) ? { click: onClick } : {}"
   >
@@ -65,11 +66,11 @@
 
 <style lang="scss" module>
   .ui3nBreadcrumb {
-    --ui3n-breadcrumb-font-size: 16px;
-    --ui3n-breadcrumb-padding-inline: 4px;
-    --ui3n-breadcrumb-separator-distance: 8px;
-    --ui3n-breadcrumb-color-default: var(--color-text-block-primary-default);
-    --ui3n-breadcrumb-color-selected: var(--color-text-block-accent-default);
+    --_breadcrumb-font-size: var(--ui3n-breadcrumb-font-size, 16px);
+    --_breadcrumb-padding-inline: var(--ui3n-breadcrumb-padding-inline, 4px);
+    --_breadcrumb-separator-distance: var(--ui3n-breadcrumb-separator-distance, 8px);
+    --_breadcrumb-color-default: var(--ui3n-breadcrumb-color-default, var(--color-text-block-primary-default));
+    --_breadcrumb-color-selected: var(--ui3n-breadcrumb-color-selected, var(--color-text-block-accent-default));
 
     display: flex;
     align-items: center;
@@ -82,16 +83,16 @@
   }
 
   .content {
-    font-size: var(--ui3n-breadcrumb-font-size);
+    font-size: var(--_breadcrumb-font-size);
     line-height: 1.25;
-    color: var(--ui3n-breadcrumb-color-default);
+    color: var(--_breadcrumb-color-default);
   }
 
   .ui3nBreadcrumbSeparator {
     display: flex;
     align-items: center;
-    margin: 0 var(--ui3n-breadcrumb-separator-distance);
-    padding-left: var(--ui3n-breadcrumb-padding-inline);
+    margin: 0 var(--_breadcrumb-separator-distance);
+    padding-left: var(--_breadcrumb-padding-inline);
     color: var(--color-text-block-tertiary-default);
   }
 
@@ -99,7 +100,7 @@
     .content {
       &:hover {
         cursor: pointer;
-        color: var(--ui3n-breadcrumb-color-selected);
+        color: var(--_breadcrumb-color-selected);
       }
     }
   }

package/src/components/ui3n-breadcrumbs/ui3n-breadcrumbs.vue

@@ -18,7 +18,10 @@
 </script>
 
 <template>
-  <div :class="$style.ui3nBreadcrumbs">
+  <div
+    data-ui3n="breadcrumbs"
+    :class="$style.ui3nBreadcrumbs"
+  >
     <slot />
   </div>
 </template>