@v1nt1248/3nclient-lib 0.1.29 → 0.1.32

package/dist/utils/index.d.ts

@@ -1,4 +1,7 @@
-export * from './processes';
+export * from './processes/deferred';
+export * from './processes/sleep';
+export * from './processes/single';
+export * from './processes/named-procs';
 export * from './textarea-max-rows';
 export * from './common';
 export * from './ui';

package/dist/utils/{sqlite-on-3nstorage/synced.d.ts → processes/named-procs.d.ts}

@@ -1,11 +1,4 @@
-/**
- * This represents a function that will create a promise, potentially starting
- * some background process, only when it is called. Such wrap of code is needed
- * for scheduling, as very often any start of an action must be postponed till
- * later time. Scheduler needs a not-yet-started activity, as scheduler has
- * control action's start.
- */
-export type Action<T> = () => Promise<T>;
+import { Action } from './single';
 /**
  * This is a container of processes, labeled by some ids. It allows to track if
  * there is a process already in progress with a given id. And, it allows to
@@ -14,15 +7,15 @@ export type Action<T> = () => Promise<T>;
  * Common use of such class is to reuse getting of some expensive resource(s).
  */
 export declare class NamedProcs {
-    private processes;
+    private promises;
     constructor();
     /**
      * @param id is a string key of a process
      * @return a promise of a process' completion, or undefined, if process with
      * given id is unknown.
      */
-    latestTaskAtThisMoment<T>(id: string): Promise<T> | undefined;
-    isProcessing(id: string): boolean;
+    getP<T>(id: string): Promise<T> | undefined;
+    private insertPromise;
     /**
      * This method will add a promise of an already started process.
      * @param id is a string key of a process
@@ -48,26 +41,3 @@ export declare class NamedProcs {
      */
     startOrChain<T>(id: string, action: Action<T>): Promise<T>;
 }
-/**
- * This is a container of process. It allows to track if a process is already
- * in progress. It also allows to chain process, when needed.
- *
- * Common use of such class is to reuse getting of some expensive resource, or
- * do ning something as an exclusive process.
- */
-export declare class SingleProc {
-    private onGoingIdle?;
-    private actions;
-    private running;
-    constructor(onGoingIdle?: (() => void) | undefined);
-    isProcessing(): boolean;
-    latestTaskAtThisMoment<T>(): Promise<T> | undefined;
-    addStarted<T>(promise: Promise<T>): Promise<T>;
-    start<T>(action: Action<T>): Promise<T>;
-    private runIfIdle;
-    startOrChain<T>(action: Action<T>): Promise<T>;
-}
-/**
- * This wraps given function/method into syncing wrap.
- */
-export declare function makeSyncedFunc<T extends Function>(syncProc: SingleProc, thisArg: any, func: T): T;

package/dist/utils/processes/single.d.ts

@@ -0,0 +1,56 @@
+/**
+ * This represents a function that will create a promise, potentially starting
+ * some background process, only when it is called. Such wrap of code is needed
+ * for scheduling, as very often any start of an action must be postponed till
+ * later time. Scheduler needs a not-yet-started activity, as scheduler has
+ * control action's start.
+ */
+export type Action<T> = () => Promise<T>;
+/**
+ * This is a container of process. It allows to track if a process is already
+ * in progress. It also allows to chain process, when needed.
+ *
+ * Common use of such class is to reuse getting of some expensive resource, or
+ * do ning something as an exclusive process.
+ */
+export declare class SingleProc {
+    private promise;
+    constructor();
+    private insertPromise;
+    getP<T>(): Promise<T> | undefined;
+    addStarted<T>(promise: Promise<T>): Promise<T>;
+    start<T>(action: Action<T>): Promise<T>;
+    startOrChain<T>(action: Action<T>): Promise<T>;
+}
+/**
+ * This wraps given function/method into syncing wrap.
+ */
+export declare function makeSyncedFunc<T extends Function>(syncProc: SingleProc, thisArg: any, func: T): T;
+/**
+ * This is a cycling process, that ensures single execution.
+ * It cycles while given "while" predicate returns true. When predicate returns
+ * false, process goes to idle. Pushing this process into action is done via
+ * startIfIdle() method.
+ */
+export declare class SingleCyclicProc {
+    private cycleWhile;
+    private action;
+    private proc;
+    /**
+     * @param cycleWhile is a "while" predicate. When it returns true, process
+     * continues to cycle, and when it returns false, process goes to idle.
+     * @param action is an async cycle body to run at each iteration.
+     */
+    constructor(cycleWhile: () => boolean, action: () => Promise<void>);
+    /**
+     * This starts process, if it is idle.
+     */
+    startIfIdle(): void;
+    private cycleOrIdle;
+    isRunning(): boolean;
+    /**
+     * This makes process unusable and unstartable. Waiting on a return promise,
+     * awaits the completion of the last iteration this process is in (if any).
+     */
+    close(): Promise<void>;
+}

package/dist/utils/processes/sleep.d.ts

@@ -0,0 +1 @@
+export declare function sleep(millis: number): Promise<void>;

package/dist/utils/sqlite-on-3nstorage/index.d.ts

@@ -1,5 +1,5 @@
 import { Database as DBClass, BindParams as QueryParams, QueryExecResult as QueryResult } from './types';
-import { SingleProc, Action } from './synced';
+import { SingleProc, Action } from '../processes/single';
 export type Database = DBClass;
 export type BindParams = QueryParams;
 export type QueryExecResult = QueryResult;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.29",
+  "version": "0.1.32",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -51,28 +51,28 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.1.4",
-    "dayjs": "1.11.12",
+    "@floating-ui/vue": "1.1.5",
+    "dayjs": "1.11.13",
     "lodash": "4.17.21",
     "mitt": "3.0.1",
-    "sanitize-html": "2.13.0",
-    "tslib": "2.6.3",
+    "sanitize-html": "2.13.1",
+    "tslib": "2.8.0",
     "vuedraggable": "^4.1.0"
   },
   "peerDependencies": {
-    "pinia": "2.2.2",
-    "vue": "3.5.5"
+    "pinia": "2.2.4",
+    "vue": "3.5.12"
   },
   "devDependencies": {
-    "@types/lodash": "4.17.5",
-    "@types/node": "20.14.2",
-    "@types/sanitize-html": "2.11.0",
+    "@types/lodash": "4.17.12",
+    "@types/node": "20.16.13",
+    "@types/sanitize-html": "2.13.0",
     "@typescript-eslint/eslint-plugin": "8.0.1",
     "@typescript-eslint/parser": "8.0.1",
-    "@vitejs/plugin-vue": "5.1.2",
-    "@vue/compiler-core": "3.5.5",
+    "@vitejs/plugin-vue": "5.1.4",
+    "@vue/compiler-core": "3.5.12",
     "@vue/eslint-config-typescript": "13.0.0",
-    "@vue/runtime-core": "3.5.5",
+    "@vue/runtime-core": "3.5.12",
     "@vuedx/typescript-plugin-vue": "0.7.6",
     "eslint": "9.9.0",
     "eslint-config-prettier": "^9.1.0",
@@ -83,25 +83,25 @@
     "eslint-plugin-vue": "9.27.0",
     "jackspeak": "4.0.1",
     "path": "0.12.7",
-    "pinia": "2.2.1",
+    "pinia": "2.2.4",
     "postcss-html": "1.7.0",
     "prettier": "^3.3.3",
-    "sass": "1.77.8",
+    "sass": "1.80.3",
     "stylelint": "16.8.1",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-scss": "6.5.0",
-    "typescript": "5.5.4",
-    "vite": "5.4.0",
-    "vite-plugin-css-injected-by-js": "3.5.1",
-    "vite-plugin-dts": "4.0.2",
-    "vite-plugin-vue-devtools": "^7.3.7",
-    "vitepress": "1.3.2",
-    "vue": "3.5.5",
-    "vue-tsc": "2.0.29"
+    "typescript": "5.6.3",
+    "vite": "5.4.9",
+    "vite-plugin-css-injected-by-js": "3.5.2",
+    "vite-plugin-dts": "4.2.4",
+    "vite-plugin-vue-devtools": "^7.5.2",
+    "vitepress": "1.4.1",
+    "vue": "3.5.12",
+    "vue-tsc": "2.1.6"
   },
-  "packageManager": "pnpm@9.7.0",
+  "packageManager": "pnpm@9.12.0",
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

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

@@ -108,7 +108,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" module>
-@import "../../assets/styles/mixins";
+@use '../../assets/styles/mixins' as mixins;
 
 .ui3nButton {
   --ui3n-button-padding: var(--spacing-m);
@@ -296,6 +296,6 @@ onMounted(() => {
 }
 
 .elevation {
-  @include elevation();
+  @include mixins.elevation();
 }
 </style>

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

@@ -172,7 +172,7 @@ function change(ev: Event) {
 </template>
 
 <style lang="scss" module>
-@import "../../assets/styles/mixins";
+@use '../../assets/styles/mixins' as mixins;
 
 .ui3nCheckbox {
   --ui3n-checkbox-size: 16px;
@@ -213,7 +213,7 @@ function change(ev: Event) {
   &:hover {
     border-color: hsl(from var(--ui3n-checkbox-color) h s calc(l - 10));
     background-color: hsl(from var(--ui3n-checkbox-color) h s calc(l - 10));
-    @include ripple(hsl(from var(--ui3n-checkbox-color) h s calc(l - 10)));
+    @include mixins.ripple(hsl(from var(--ui3n-checkbox-color) h s calc(l - 10)));
   }
 }
 
@@ -221,7 +221,7 @@ function change(ev: Event) {
   &:hover {
     border-color: hsl(from var(--ui3n-checkbox-color) h s calc(l - 10));
     background-color: hsl(from transparent h s calc(l - 10));
-    @include ripple(hsl(from transparent h s calc(l - 10)));
+    @include mixins.ripple(hsl(from transparent h s calc(l - 10)));
   }
 }
 

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

@@ -68,8 +68,6 @@ const mainCssClasses = computed(() => {
 </template>
 
 <style lang="scss" module>
-@import "../../assets/styles/mixins";
-
 .ui3nChip {
   position: relative;
   display: flex;

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

@@ -78,10 +78,11 @@ function closeDialog(arg?: { ev?: Event; withAction?: boolean }) {
   }
 }
 
-function startEmit(event: Ui3nDialogEvent) {
+function startEmit(event: Ui3nDialogEvent, ev?: Event) {
   if (event === 'click-overlay') {
     emits(event);
-    closeDialog();
+    dialogProps.value.closeOnClickOverlay && closeDialog({ ev });
+    return;
   }
 
   if (event === 'confirm') {
@@ -114,7 +115,7 @@ function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
   <div
     v-if="show"
     :class="$style.overlay"
-    @click="dialogProps.closeOnClickOverlay ? closeDialog({ ev: $event }) : startEmit('click-overlay')"
+    @click="startEmit('click-overlay', $event)"
   >
     <div
       ref="dialogElement"
@@ -191,7 +192,7 @@ function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
 </template>
 
 <style lang="scss" module>
-@import '../../assets/styles/mixins';
+@use '../../assets/styles/mixins' as mixins;
 
 .overlay {
   position: fixed;
@@ -221,7 +222,8 @@ function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
   background-color: var(--color-bg-block-primary-default);
   border-radius: var(--dialog-border-radius);
   outline: none;
-  @include elevation();
+
+  @include mixins.elevation();
 }
 
 .title {
@@ -237,7 +239,7 @@ function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
   line-height: 1.2;
   color: var(--color-text-control-primary-default);
   border-bottom: 1px solid var(--color-border-block-primary-default);
-  @include text-overflow-ellipsis();
+  @include mixins.text-overflow-ellipsis();
 }
 
 .closeBtn {

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

@@ -211,8 +211,6 @@ watch(
 </template>
 
 <style lang="scss" module>
-@import "../../assets/styles/mixins";
-
 .ui3nInput {
   --ui3n-input-height: var(--spacing-l);
   --ui3n-input-padding-left: var(--spacing-s);

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

@@ -92,7 +92,7 @@ watch(
 </template>
 
 <style lang="scss" module>
-@import "../../assets/styles/mixins";
+@use '../../assets/styles/mixins' as mixins;
 
 .ui3nMenu {
   --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
@@ -112,6 +112,6 @@ watch(
   border-radius: 4px;
   background-color: var(--ui3n-menu-content-bg);
   z-index: 1000;
-  @include elevation(3);
+  @include mixins.elevation(3);
 }
 </style>

package/src/components/ui3n-radio-group/ui3n-radio.vue

@@ -196,7 +196,7 @@ watch(
 </template>
 
 <style lang="scss" module>
-@import "../../assets/styles/mixins";
+@use '../../assets/styles/mixins' as mixins;
 
 .ui3nRadio {
   --ui3n-radio-size: 16px;
@@ -241,7 +241,7 @@ watch(
   &:hover {
     cursor: pointer;
     background-color: hsl(from transparent h s calc(l - 10));
-    @include ripple(hsl(from transparent h s calc(l - 10)));
+    @include mixins.ripple(hsl(from transparent h s calc(l - 10)));
   }
 }
 

package/src/components/ui3n-table/composables/useTable.ts

@@ -98,7 +98,8 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
     if (isEmpty(props.body.rowsStyle) || !isRowKeyUsed.value) return {};
 
     const rowKey = row[currentConfig.value.fieldAsRowKey as keyof T] as string | number;
-    return get(props, ['body', 'rowsStyle', rowKey], {});
+    // @ts-expect-error
+    return get(props, ['body', 'rowsStyle', rowKey], {} as Record<string, string>);
   }
 
   function closeGroupActionsRow() {

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

@@ -159,7 +159,7 @@ const eventsHandlers = {
 </template>
 
 <style lang="scss" module>
-@import "../../assets/styles/mixins.scss";
+@use '../../assets/styles/mixins' as mixins;
 
 .ui3nTable {
   --ui3n-table-columns-width: auto;
@@ -225,7 +225,7 @@ const eventsHandlers = {
   font-size: var(--font-14);
   font-weight: 500;
   color: var(--color-text-table-primary-default);
-  @include text-overflow-ellipsis;
+  @include mixins.text-overflow-ellipsis();
 }
 
 .sortableActive {

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

@@ -83,7 +83,7 @@ const onClick = (ev: MouseEvent) => {
 </template>
 
 <style lang="scss" module>
-@import "../../assets/styles/mixins";
+@use '../../assets/styles/mixins' as mixins;
 
 .ui3nTabs {
   --ui3n-tabs-height: 48px;
@@ -101,7 +101,7 @@ const onClick = (ev: MouseEvent) => {
   position: relative;
   user-select: none;
   color: v-bind(inactiveColorValue);
-  @include ripple(var(--color-bg-control-secondary-default));
+  @include mixins.ripple(var(--color-bg-control-secondary-default));
 
   &:hover {
     background-color: var(--color-bg-control-secondary-default);

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

@@ -69,7 +69,6 @@ function onBlur(event: Event) {
 }
 
 function onInput(event: Event) {
-  console.log('onInput!');
   const value = (event.target as HTMLInputElement).value;
   validate(value);
   emit('update:text', value);
@@ -77,7 +76,6 @@ function onInput(event: Event) {
 }
 
 function onEnterKeydown(event: KeyboardEvent) {
-  console.log('onEnterKeydown: ', event);
   const { altKey, ctrlKey, shiftKey, metaKey, target } = event;
   const value = (target as HTMLInputElement).value;
   validate(value);

package/dist/utils/processes.d.ts

@@ -1,136 +0,0 @@
-export declare function sleep(millis: number): Promise<void>;
-/**
- * Standard Promise has no finally() method, when all respected libraries do.
- * Inside of an async function one may use try-finally clause. But, when we
- * work with raw promises, we need a compact finalization routine. And this is
- * it for synchronous completion.
- * @param promise
- * @param fin is a synchronous function that performs necessary
- * finalization/cleanup. Use finalizeAsync, when finalization is asynchronous.
- * @return a finalized promise
- */
-export declare function finalize<T>(promise: Promise<T>, fin: () => void): Promise<T>;
-/**
- * Standard Promise has no finally() method, when all respected libraries do.
- * Inside of an async function one may use try-finally clause. But, when we
- * work with raw promises, we need a compact finalization routine. And this is
- * it for an asynchronous completion.
- * @param promise
- * @param fin is an asynchronous function that performs necessary
- * finalization/cleanup. Use finalize, when finalization is synchronous
- * (is not returning promise).
- * @return a finalized promise
- */
-export declare function finalizeAsync<T>(promise: Promise<T>, fin: () => Promise<void>): Promise<T>;
-/**
- * This represents a function that will create a promise, potentially starting
- * some background process, only when it is called. Such wrap of code is needed
- * for scheduling, as very often any start of an action must be postponed till
- * later time. Scheduler needs a not-yet-started activity, as scheduler has
- * control action's start.
- */
-export type Action<T> = () => Promise<T>;
-/**
- * This is a container of processes, labeled by some ids. It allows to track if
- * there is a process already in progress with a given id. And, it allows to
- * chain process, when needed.
- *
- * Common use of such class is to reuse getting of some expensive resource(s).
- */
-export declare class NamedProcs {
-    private promises;
-    constructor();
-    /**
-     * @param id is a string key of a process
-     * @return a promise of a process' completion, or undefined, if process with
-     * given id is unknown.
-     */
-    getP<T>(id: string): Promise<T> | undefined;
-    private insertPromise;
-    /**
-     * This method will add a promise of an already started process.
-     * @param id is a string key of a process
-     * @param promise of an already started process
-     * @return a promise of a process' completion.
-     */
-    addStarted<T>(id: string, promise: Promise<T>): Promise<T>;
-    /**
-     * This method will start a given action only, if a process with a given id
-     * is not running.
-     * @param id is a string key of a process
-     * @param action is a function that starts some process
-     * @return a promise of a process' completion.
-     */
-    start<T>(id: string, action: Action<T>): Promise<T>;
-    /**
-     * This method will chain a given action to an already running process, or,
-     * if identified process is not running, this will start given action under
-     * a given id.
-     * @param id is a string key of a process
-     * @param action is a function that starts some process
-     * @return a promise of a process' completion.
-     */
-    startOrChain<T>(id: string, action: Action<T>): Promise<T>;
-}
-/**
- * This is a container of process. It allows to track if a process is already
- * in progress. It also allows to chain process, when needed.
- *
- * Common use of such class is to reuse getting of some expensive resource, or
- * do ning something as an exclusive process.
- */
-export declare class SingleProc {
-    private promise;
-    constructor();
-    private insertPromise;
-    getP<T>(): Promise<T> | undefined;
-    addStarted<T>(promise: Promise<T>): Promise<T>;
-    start<T>(action: Action<T>): Promise<T>;
-    startOrChain<T>(action: Action<T>): Promise<T>;
-}
-export declare class DeduppedRunner<T> {
-    private readonly action;
-    private proc;
-    private waiting;
-    constructor(action: Action<T>);
-    trigger(): Promise<T>;
-    private startAction;
-}
-/**
- * This wraps given function/method into syncing wrap.
- */
-export declare function makeSyncedFunc<T extends Function>(syncProc: SingleProc, thisArg: any, func: T): T;
-/**
- * This is a cycling process, that ensures single execution.
- * It cycles while given "while" predicate returns true. When predicate returns
- * false, process goes to idle. Pushing this process into action is done via
- * startIfIdle() method.
- */
-export declare class SingleCyclicProc {
-    private cycleWhile;
-    private action;
-    private proc;
-    /**
-     * @param cycleWhile is a "while" predicate. When it returns true, process
-     * continues to cycle, and when it returns false, process goes to idle.
-     * @param action is an async cycle body to run at each iteration.
-     */
-    constructor(cycleWhile: () => boolean, action: () => Promise<void>);
-    /**
-     * This starts process, if it is idle.
-     */
-    startIfIdle(): void;
-    private cycleOrIdle;
-    isRunning(): boolean;
-    /**
-     * This makes process unusable and unstartable. Waiting on a return promise,
-     * awaits the completion of the last iteration this process is in (if any).
-     */
-    close(): Promise<void>;
-}
-export interface Deferred<T> {
-    promise: Promise<T>;
-    resolve: (result: T | PromiseLike<T>) => void;
-    reject: (err: any) => void;
-}
-export declare function defer<T>(): Deferred<T>;