@v1nt1248/3nclient-lib 0.3.30 → 0.3.31

package/dist/ui3n-plugins.js

@@ -1,51 +1,64 @@
 import { B as e, n as t, r as n, t as r } from "./chunks/plugins-keys-jqAZ5D94.js";
-import { t as i } from "./chunks/ui3n-notification-Dr_3Td9N.js";
-import { createApp as a, markRaw as o, ref as s } from "vue";
+import { i, t as a } from "./chunks/ui3n-notification-DPC5Ke4b.js";
+import { Fragment as o, createApp as s, createBlock as c, createElementBlock as l, defineComponent as u, markRaw as d, mergeProps as f, normalizeClass as p, openBlock as m, ref as h, renderList as g } from "vue";
 import "pinia";
-import c from "mitt";
-//#region src/plugins/notifications/notifications.ts
-var l = { install: (n) => {
-	let r = (t) => {
-		let n = document.createElement("div"), r = !t.teleport || t.teleport === "body" ? document.body : document.querySelector(t.teleport), o = t.duration ?? 1500;
-		if (r) {
-			let s = a(i, {
-				id: e(6),
-				content: t.content,
-				...t.type && { type: t.type },
-				...t.position && { position: t.position },
-				...t.withIcon && { withIcon: t.withIcon },
-				...t.onOpen && { onOpen: t.onOpen },
-				duration: o,
-				onClose: () => {
-					c.$el.remove(), s && s.unmount && s.unmount();
-				}
-			}), c = s.mount(n);
-			r.appendChild(c.$el), o && setTimeout(() => {
-				c.$el.remove(), s && s.unmount && s.unmount();
-			}, o);
+import _ from "mitt";
+var v = /* @__PURE__ */ i(/* @__PURE__ */ u({
+	__name: "ui3n-notification-container",
+	setup(e, { expose: t }) {
+		let n = h([]);
+		function r(e) {
+			n.value.push(e);
 		}
+		function i(e) {
+			n.value = n.value.filter((t) => t.id !== e);
+		}
+		function s(e) {
+			e.onClose && e.onClose(), i(e.id);
+		}
+		return t({
+			add: r,
+			remove: i
+		}), (e, t) => (m(), l("div", {
+			id: "ui3n-notifications-container",
+			class: p(e.$style.ui3nNotificationsWrapper)
+		}, [(m(!0), l(o, null, g(n.value, (e) => (m(), c(a, f({ key: e.id }, { ref_for: !0 }, e, { "on-close": () => s(e) }), null, 16, ["on-close"]))), 128))], 2));
+	}
+}), [["__cssModules", { $style: { ui3nNotificationsWrapper: "_ui3nNotificationsWrapper_3itgd_1" } }]]), y = { install: (n) => {
+	if (typeof window > "u") return;
+	let r = document.createElement("div");
+	document.body.appendChild(r);
+	let i = s(v);
+	i._context.provides = n._context.provides;
+	let a = i.mount(r), o = (t) => {
+		let n = t.id || e(6), r = t.duration === void 0 ? 1500 : t.duration;
+		a.add({
+			...t,
+			id: n,
+			duration: r
+		});
 	};
-	n.config.globalProperties.$createNotice = r, n.provide(t, { $createNotice: r });
-} }, u = c(), d = {
-	on: u.on.bind(u),
+	n.config.globalProperties.$createNotice = o, n.provide(t, { $createNotice: o });
+} }, b = _(), x = {
+	on: b.on.bind(b),
 	once: (e, t) => {
 		function n() {
-			u.off(e, n), t.apply(null, arguments);
+			b.off(e, n), t.apply(null, arguments);
 		}
-		u.on(e, n);
+		b.on(e, n);
 	},
-	off: u.off.bind(u),
-	emit: u.emit.bind(u),
-	clear: u.all.clear.bind(u)
-}, f = { install: (e) => {
-	e.config.globalProperties.$emitter = d, e.provide(n, { $emitter: d });
-} }, p = { install(t) {
-	let n = s([]);
+	off: b.off.bind(b),
+	emit: b.emit.bind(b),
+	clear: b.all.clear.bind(b)
+}, S = { install: (e) => {
+	e.config.globalProperties.$emitter = x, e.provide(n, { $emitter: x });
+} }, C = { install(t) {
+	let n = h([]);
 	function i(t, r) {
 		return new Promise((i) => {
 			n.value.push({
 				id: e(5),
-				component: o(t),
+				component: d(t),
 				props: r,
 				resolve: i
 			});
@@ -55,36 +68,36 @@ var l = { install: (n) => {
 		let r = n.value.findIndex((t) => t.id === e);
 		r !== -1 && (n.value[r].resolve(t), n.value.splice(r, 1));
 	}
-	function c() {
+	function o() {
 		n.value = [];
 	}
 	t.config.globalProperties.$dialog = {
 		dialogStack: n,
 		$openDialog: i,
 		$closeDialog: a,
-		$closeDialogs: c
+		$closeDialogs: o
 	}, t.provide(r, {
 		dialogStack: n,
 		$openDialog: i,
 		$closeDialog: a,
-		$closeDialogs: c
+		$closeDialogs: o
 	});
 } };
 //#endregion
 //#region src/plugins/notifications/store-notifications.ts
-function m(e) {
+function w(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $createNotice: i } = r;
 	return { $createNotice: i };
 }
 //#endregion
 //#region src/plugins/vue-bus/store-vue-bus.ts
-function h(e) {
+function T(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $emitter: i } = r;
 	return { $emitter: i };
 }
 //#endregion
 //#region src/plugins/dialogs/store-dialog.ts
-function g(e) {
+function E(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $dialog: i } = r;
 	return { $dialogs: {
 		open: i.$openDialog,
@@ -94,4 +107,4 @@ function g(e) {
 	} };
 }
 //#endregion
-export { r as DIALOGS_KEY, t as NOTIFICATIONS_KEY, n as VUEBUS_KEY, p as dialogs, l as notifications, g as storeDialogs, m as storeNotifications, h as storeVueBus, f as vueBus };
+export { r as DIALOGS_KEY, t as NOTIFICATIONS_KEY, n as VUEBUS_KEY, C as dialogs, y as notifications, E as storeDialogs, w as storeNotifications, T as storeVueBus, S as vueBus };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.30",
+  "version": "0.3.31",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -89,7 +89,7 @@
     "stylelint-config-standard": "39.0.1",
     "stylelint-scss": "7.1.1",
     "tslib": "2.8.1",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "typescript-eslint": "8.60.0",
     "vite": "8.0.14",
     "vite-plugin-css-injected-by-js": "4.0.1",

package/src/components/index.ts

@@ -57,7 +57,13 @@ import type {
   Ui3nDialogEvent,
 } from './ui3n-dialog/types';
 import Ui3nMenu from './ui3n-menu/ui3n-menu.vue';
-import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots, Ui3nMenuExpose } from './ui3n-menu/types';
+import type {
+  Ui3nVirtualElement,
+  Ui3nMenuProps,
+  Ui3nMenuEmits,
+  Ui3nMenuSlots,
+  Ui3nMenuExpose,
+} from './ui3n-menu/types';
 import Ui3nList from './ui3n-list/ui3n-list.vue';
 import type { Ui3nListProps, Ui3nListEmits, Ui3nListSlots } from './ui3n-list/types';
 import Ui3nVirtualScroll from './ui3n-virtual-scroll/ui3n-virtual-scroll.vue';
@@ -137,7 +143,7 @@ import type {
   Ui3nScrollbarVerticalSlots,
   Ui3nScrollbarVerticalExpose,
 } from './ui3n-scrollbar-vertical/types';
-import Ui3nScrollbarHorizontal from './ui3n-scrollbar-horizontal/ui3n-scroolbar-horizontal.vue';
+import Ui3nScrollbarHorizontal from './ui3n-scrollbar-horizontal/ui3n-scrollbar-horizontal.vue';
 import type {
   Ui3nScrollbarHorizontalProps,
   Ui3nScrollbarHorizontalEmits,
@@ -208,6 +214,7 @@ export {
   Ui3nDialogComponentSlots,
   Ui3nDialogEvent,
   Ui3nMenu,
+  Ui3nVirtualElement,
   Ui3nMenuProps,
   Ui3nMenuEmits,
   Ui3nMenuSlots,

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

@@ -489,8 +489,9 @@
   .input {
     border-radius: var(--ui3n-autocomplete-border-radius);
     padding: 0 var(--ui3n-autocomplete-padding-inline);
-    flex-grow: 1;
+    flex: 1 1 60px;
     height: var(--ui3n-autocomplete-min-height);
+    width: 100%;
     font-size: var(--ui3n-autocomplete-font-size);
     line-height: var(--ui3n-autocomplete-min-height);
     font-weight: 400;

package/src/components/ui3n-breadcrumbs/types.ts

@@ -65,6 +65,8 @@ export interface Ui3nBreadcrumbsProps {
  * Breadcrumbs component slots
  */
 export interface Ui3nBreadcrumbsSlots {
+  /** Global separator slot for the entire chain */
+  separator?: () => VNode;
   /**
    * Default slot
    */

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, useCssModule } from 'vue';
+  import { computed, inject, useCssModule, useSlots } from 'vue';
   import type { Ui3nBreadcrumbEmits, Ui3nBreadcrumbProps, Ui3nBreadcrumbSlots } from './types';
 
   const props = withDefaults(defineProps<Ui3nBreadcrumbProps>(), {
@@ -7,30 +7,29 @@
     isActive: false,
     disabled: false,
   });
+
   const emits = defineEmits<Ui3nBreadcrumbEmits>();
+
+  const slots = useSlots();
   defineSlots<Ui3nBreadcrumbSlots>();
 
   const $css = useCssModule();
 
-  const separatorValue = computed(() => {
-    if (props.separator) {
-      return props.separator;
-    }
+  const parentContext = inject<any>('ui3n-breadcrumbs-context', null);
 
-    const instance = getCurrentInstance();
-    return instance?.parent?.props.separator || '/';
+  const separatorValue = computed(() => {
+    if (props.separator) return props.separator;
+    return parentContext ? parentContext.separator() : '/';
   });
 
   const parentDisabled = computed(() => {
-    const instance = getCurrentInstance();
-    return instance?.parent?.props.disabled || false;
+    return parentContext ? parentContext.disabled() : false;
   });
 
   const cssClasses = computed(() => {
     const val = [$css.ui3nBreadcrumb];
     props.isActive && val.push($css.ui3nBreadcrumbActive);
     (props.disabled || parentDisabled.value) && val.push($css.ui3nBreadcrumbDisabled);
-
     return val;
   });
 
@@ -44,14 +43,22 @@
     :class="cssClasses"
     v-on="isActive && !(disabled || parentDisabled) ? { click: onClick } : {}"
   >
-    <slot />
-    <div
-      v-if="isActive"
-      :class="$style.ui3nBreadcrumbSeparator"
-    >
-      <slot name="separator">
-        <span>{{ separatorValue }}</span>
-      </slot>
+    <span :class="$style.content">
+      <slot />
+    </span>
+
+    <div :class="$style.ui3nBreadcrumbSeparator">
+      <slot
+        v-if="typeof slots.separator === 'function'"
+        name="separator"
+      />
+
+      <component
+        v-else-if="parentContext?.customSeparatorSlot"
+        :is="parentContext.customSeparatorSlot"
+      />
+
+      <span v-else>{{ separatorValue }}</span>
     </div>
   </div>
 </template>
@@ -64,39 +71,42 @@
     --ui3n-breadcrumb-color-default: var(--color-text-block-primary-default);
     --ui3n-breadcrumb-color-selected: var(--color-text-block-accent-default);
 
-    position: relative;
     display: flex;
     align-items: center;
-  }
 
-  .separator {
-    display: flex;
-    align-items: center;
-    margin: 0 var(--ui3n-breadcrumb-separator-distance);
+    &:last-child {
+      .ui3nBreadcrumbSeparator {
+        display: none !important;
+      }
+    }
   }
 
-  .ui3nBreadcrumbActive {
+  .content {
     font-size: var(--ui3n-breadcrumb-font-size);
     line-height: 1.25;
     color: var(--ui3n-breadcrumb-color-default);
-    padding-right: var(--ui3n-breadcrumb-padding-inline);
-
-    &:hover {
-      cursor: pointer;
-      color: var(--ui3n-breadcrumb-color-selected);
-
-      .ui3nBreadcrumbSeparator {
-        color: var(--ui3n-breadcrumb-color-default);
-      }
-    }
   }
 
   .ui3nBreadcrumbSeparator {
+    display: flex;
+    align-items: center;
+    margin: 0 var(--ui3n-breadcrumb-separator-distance);
     padding-left: var(--ui3n-breadcrumb-padding-inline);
+    color: var(--color-text-block-tertiary-default);
+  }
+
+  .ui3nBreadcrumbActive {
+    .content {
+      &:hover {
+        cursor: pointer;
+        color: var(--ui3n-breadcrumb-color-selected);
+      }
+    }
   }
 
   .ui3nBreadcrumbDisabled {
     cursor: default;
     pointer-events: none;
+    opacity: 0.6;
   }
 </style>

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

@@ -1,12 +1,20 @@
 <script lang="ts" setup>
+  import { provide, useSlots } from 'vue';
   import type { Ui3nBreadcrumbsProps, Ui3nBreadcrumbsSlots } from './types';
 
-  withDefaults(defineProps<Ui3nBreadcrumbsProps>(), {
+  const props = withDefaults(defineProps<Ui3nBreadcrumbsProps>(), {
     separator: '/',
     disabled: false,
   });
 
+  const slots = useSlots();
   defineSlots<Ui3nBreadcrumbsSlots>();
+
+  provide('ui3n-breadcrumbs-context', {
+    separator: () => props.separator,
+    disabled: () => props.disabled,
+    customSeparatorSlot: slots.separator,
+  });
 </script>
 
 <template>
@@ -20,5 +28,8 @@
     position: relative;
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
+    padding: 0;
+    margin: 0;
   }
 </style>

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

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-  import { computed, onMounted, watch, onBeforeMount, ref, useCssModule, useSlots } from 'vue';
+  import { computed, onBeforeMount, ref, useCssModule, useSlots, watch } from 'vue';
   import Ui3nRipple from '../../directives/ui3n-ripple';
   import type {
     Ui3nCheckboxEmits,
+    Ui3nCheckboxExpose,
     Ui3nCheckboxProps,
     Ui3nCheckboxSlots,
     Ui3nCheckboxValue,
-    Ui3nCheckboxExpose,
   } from './types';
 
   const vUi3nRipple = Ui3nRipple;
@@ -16,7 +16,7 @@
     modelValue: false,
     checkedValue: true,
     uncheckedValue: false,
-    size: '16',
+    size: 16,
     color: 'var(--color-icon-control-accent-default)',
     indeterminate: false,
     disabled: false,
@@ -28,14 +28,14 @@
   const $css = useCssModule();
 
   const checkboxEl = ref<HTMLDivElement | null>(null);
-  const val = ref<Ui3nCheckboxValue>(props.uncheckedValue || false);
-  const uncertain = ref(false);
+
+  const val = ref<Ui3nCheckboxValue>(props.modelValue);
+  const uncertain = ref(props.indeterminate);
 
   const checkBoxValue = computed(() => {
     if (uncertain.value) {
       return 'indeterminate';
     }
-
     return val.value === props.checkedValue ? 'checked' : 'unchecked';
   });
 
@@ -46,21 +46,31 @@
     return String(val.value);
   });
 
+  const iconSizeInline = computed(() => {
+    const numericSize = parseFloat(String(props.size));
+    return isNaN(numericSize) ? 12 : numericSize - 4;
+  });
+
+  const inlineStyles = computed(() => ({
+    '--ui3n-checkbox-size': typeof props.size === 'number' ? `${props.size}px` : props.size,
+    '--ui3n-checkbox-color': props.color,
+  }));
+
   const mainCssClasses = computed(() => {
-    const val = [$css.ui3nCheckbox];
+    const classes = [$css.ui3nCheckbox];
 
-    props.disabled && val.push($css.disabled);
-    !slots.default && val.push($css.noLabel);
+    props.disabled && classes.push($css.disabled);
+    !slots.default && classes.push($css.noLabel);
 
-    return val;
+    return classes;
   });
 
   const bodyCssClasses = computed(() => {
-    const val = [$css.ui3nCheckboxBody];
+    const classes = [$css.ui3nCheckboxBody];
 
-    checkBoxValue.value === 'unchecked' ? val.push($css.unfilled) : val.push($css.filled);
+    checkBoxValue.value === 'unchecked' ? classes.push($css.unfilled) : classes.push($css.filled);
 
-    return val;
+    return classes;
   });
 
   function change(ev: Event) {
@@ -100,31 +110,11 @@
   watch(
     () => props.modelValue,
     newValue => (val.value = newValue),
-    { immediate: true },
   );
 
   watch(
     () => props.indeterminate,
     newValue => (uncertain.value = newValue),
-    { immediate: true },
-  );
-
-  watch(
-    () => props.size,
-    newValue => {
-      if (checkboxEl.value) {
-        checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${newValue}px`);
-      }
-    },
-  );
-
-  watch(
-    () => props.color,
-    newValue => {
-      if (checkboxEl.value) {
-        checkboxEl.value.style.setProperty('--ui3n-checkbox-color', newValue);
-      }
-    },
   );
 
   onBeforeMount(() => {
@@ -139,13 +129,6 @@
       throw Error('[Ui3nCheckbox] types of "value", "checkedValue" and "uncheckedValue" are different');
     }
   });
-
-  onMounted(() => {
-    if (checkboxEl.value) {
-      checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${props.size}px`);
-      checkboxEl.value.style.setProperty('--ui3n-checkbox-color', props.color);
-    }
-  });
 </script>
 
 <template>
@@ -153,6 +136,7 @@
     ref="checkboxEl"
     :id="id"
     :class="mainCssClasses"
+    :style="inlineStyles"
   >
     <input
       type="checkbox"
@@ -174,22 +158,12 @@
     >
       <svg
         v-if="checkBoxValue === 'checked'"
-        :width="Number(size) - 4"
-        :height="Number(size) - 4"
+        :width="iconSizeInline"
+        :height="iconSizeInline"
         viewBox="0 0 24 24"
         fill="none"
-        xmlns="http://www.w3.org/2000/svg"
         :class="$style.ui3nCheckboxIcon"
       >
-        <g
-          id="SVGRepo_bgCarrier"
-          stroke-width="0"
-        />
-        <g
-          id="SVGRepo_tracerCarrier"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
         <g id="SVGRepo_iconCarrier">
           <path
             d="M20.0001 7L9.0001 18L4 13"
@@ -203,22 +177,12 @@
 
       <svg
         v-if="checkBoxValue === 'indeterminate'"
-        :width="Number(size) - 4"
-        :height="Number(size) - 4"
+        :width="iconSizeInline"
+        :height="iconSizeInline"
         viewBox="0 0 24 24"
         fill="none"
-        xmlns="http://www.w3.org/2000/svg"
         :class="$style.ui3nCheckboxIcon"
       >
-        <g
-          id="SVGRepo_bgCarrier"
-          stroke-width="0"
-        />
-        <g
-          id="SVGRepo_tracerCarrier"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
         <g id="SVGRepo_iconCarrier">
           <path
             d="M7 12L17 12"
@@ -275,6 +239,9 @@
     border: calc(var(--ui3n-checkbox-size) / 10) solid var(--ui3n-checkbox-color);
     cursor: pointer;
     overflow: hidden;
+    transition:
+      border-color 0.2s,
+      background-color 0.2s;
   }
 
   .filled {
@@ -296,8 +263,7 @@
   }
 
   .ui3nCheckboxIcon {
-    min-height: calc(var(--ui3n-checkbox-size) - 4px);
-    min-width: calc(var(--ui3n-checkbox-size) - 4px);
+    display: block;
   }
 
   .ui3nCheckboxLabel {
@@ -309,7 +275,7 @@
   }
 
   .disabled {
-    opacity: 0.7;
+    opacity: 0.5;
     pointer-events: none;
   }
 </style>