@v1nt1248/3nclient-lib 0.0.24 → 0.0.26

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "Library for 3NWeb clients",
   "private": false,
   "type": "module",
@@ -39,7 +39,6 @@
     "dayjs": "^1.11.9",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
-    "protobufjs": "^7.2.5",
     "sanitize-html": "^2.11.0",
     "tslib": "^2.6.2"
   },
@@ -48,16 +47,16 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.4.4",
-    "@storybook/addon-docs": "^7.4.4",
-    "@storybook/addon-essentials": "^7.4.4",
-    "@storybook/addon-interactions": "^7.4.4",
-    "@storybook/addon-links": "^7.4.4",
-    "@storybook/blocks": "^7.4.4",
-    "@storybook/builder-vite": "^7.4.4",
+    "@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.4.4",
-    "@storybook/vue3-vite": "^7.4.4",
+    "@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",
@@ -87,7 +86,7 @@
     "stylelint-rscss": "^0.4.0",
     "stylelint-scss": "^5.1.0",
     "typescript": "^5.2.2",
-    "vite": "^4.4.5",
+    "vite": "^4.5.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-dts": "^3.5.3",
     "vue": "^3.3.4",

package/src/components/index.ts

@@ -10,6 +10,8 @@ import Ui3nInput from './ui3n-input.vue'
 import type { Ui3nInputProps, Ui3nInputEmits } from './ui3n-input.vue'
 import Ui3nText from './ui3n-text.vue'
 import type { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text.vue'
+import Ui3mCheckbox from './ui3n-checkbox.vue'
+import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots } from './ui3n-checkbox.vue'
 import Ui3nNotification from './ui3n-notification.vue'
 import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue'
 import type { Ui3nTableSortIconProps } from './ui3n-table-sort-icon.vue'
@@ -43,6 +45,10 @@ export {
   Ui3nText,
   Ui3nTextProps,
   Ui3nTextEmits,
+  Ui3mCheckbox,
+  Ui3nCheckboxProps,
+  Ui3nCheckboxEmits,
+  Ui3nCheckboxSlots,
   Ui3nNotification,
   Ui3nTableSortIcon,
   Ui3nTableSortIconProps,

package/src/components/ui3n-button.vue

@@ -110,8 +110,6 @@
     line-height: var(--ui3n-button-text-height);
     font-weight: 600;
     color: var(--ui3n-button-text-color);
-    background-position: center;
-    transition: background 0.5s ease-in-out;
 
     &--round {
       --ui3n-button-padding-vert: 6px;
@@ -125,13 +123,7 @@
     }
 
     &:not([disabled]) {
-      cursor: pointer;
-
       &:hover {
-        background:
-          var(--ui3n-button-background)
-          radial-gradient(circle, transparent 1%, var(--ui3n-button-background) 1%)
-          center/15000%;
         box-shadow: 0 0 4px var(--shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 
         .ui3n-button {
@@ -141,13 +133,6 @@
           }
         }
       }
-
-      &:active {
-        opacity: 1;
-        background-color: var(--black-30, #b3b3b3);
-        background-size: 100%;
-        transition: background 0s;
-      }
     }
 
     &__icon {
@@ -168,5 +153,7 @@
     &[disabled] {
       opacity: 0.7;
     }
+
+    @include ripple(var(--ui3n-button-background));
   }
 </style>

package/src/components/ui3n-checkbox.vue

@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+  import { computed, onMounted, watch, onBeforeMount, ref, useSlots } from 'vue'
+  import Ui3nIcon from './ui3n-icon.vue'
+
+  type Ui3nCheckboxValue = boolean | string | number;
+  
+  export interface Ui3nCheckboxProps {
+    modelValue: Ui3nCheckboxValue;
+    checkedValue?: Ui3nCheckboxValue;
+    uncheckedValue?: Ui3nCheckboxValue;
+    size?: number|string;
+    color?: string;
+    indeterminate?: boolean;
+    disabled?: boolean;
+  }
+
+  export interface Ui3nCheckboxEmits {
+    (ev: 'change', value: Ui3nCheckboxValue): void;
+    (ev: 'update:modelValue', value: Ui3nCheckboxValue): void;
+  }
+
+  export interface Ui3nCheckboxSlots {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    default: () => any;
+  }
+
+  const iconMap = {
+    checked: 'check-box-checked',
+    unchecked: 'check-box',
+    indeterminate: 'check-box-inderterminate',
+  }
+
+  const props = withDefaults(
+    defineProps<Ui3nCheckboxProps>(),
+    {
+      modelValue: false,
+      checkedValue: true,
+      uncheckedValue: false,
+      size: '16',
+      color: '#0090ec',
+      indeterminate: false,
+      disabled: false,
+    },
+  )
+  const emits = defineEmits<Ui3nCheckboxEmits>()
+  defineSlots<Ui3nCheckboxSlots>()
+
+  const slots = useSlots()
+
+  const checkboxEl = ref<HTMLDivElement|null>(null)
+  const val = ref<Ui3nCheckboxValue>(props.uncheckedValue || false)
+  const uncertain = ref(false)
+
+  onBeforeMount(() => {
+    const checkedValueType = typeof props.checkedValue
+    const uncheckedValueType = typeof props.uncheckedValue
+    const valueType = typeof props.modelValue
+    if (
+      checkedValueType !== uncheckedValueType
+      || checkedValueType !== valueType
+      || uncheckedValueType !== valueType
+    ) {
+      throw Error('[Ui3nCheckbox] types of "value", "checkedValue" and "unchecktdValue" are different')
+    }
+  })
+
+  onMounted(() => {
+    if (checkboxEl.value) {
+      checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${props.size}px`)
+    }
+  })
+
+  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`)
+      }
+    },
+  )
+
+  const checkBoxValue = computed(() => {
+    if (uncertain.value) {
+      return 'indeterminate'
+    }
+
+    return val.value === props.checkedValue
+      ? 'checked'
+      : 'unchecked'
+  } )
+
+  const change = () => {
+    val.value = checkBoxValue.value !== 'unchecked'
+      ? props.uncheckedValue
+      : props.checkedValue
+
+    if (uncertain.value) {
+      uncertain.value = false
+    }
+
+    emits('change', val.value)
+    emits('update:modelValue', val.value)
+  }
+</script>
+
+<template>
+  <div
+    ref="checkboxEl"
+    :class="[
+      'ui3n-checkbox',
+      {
+        'ui3n-checkbox--disabled': props.disabled,
+        'ui3n-checkbox--with-label': slots.default,
+      },
+    ]"
+  >
+    <div
+      class="ui3n-checkbox__wrapper"
+      @click="change"
+    >
+      <ui3n-icon
+        class="ui3n-checkbox__icon"
+        :icon="iconMap[checkBoxValue]"
+        :width="props.size"
+        :height="props.size"
+        :color="props.color"
+      />
+    </div>
+
+    <div
+      class="ui3n-checkbox__label"
+      @click="change"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixins";
+
+  .ui3n-checkbox {
+    --ui3n-checkbox-size: 16px;
+    --ui3n-checkbox-text-size: 12px;
+    --ui3n-checkbox-text-color: var(--black-90, #212121);
+    --ui3n-checkbox-text-weight: 500;
+
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    &__wrapper {
+      position: relative;
+      display: flex;
+      width: calc(var(--ui3n-checkbox-size) * 1.5);
+      height: calc(var(--ui3n-checkbox-size) * 1.5);
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      cursor: pointer;
+
+      @include ripple(transparent);
+    }
+
+    &__label {
+      font-size: var(--ui3n-checkbox-text-size);
+      font-weight: var(--ui3n-checkbox-text-weight);
+      color: var(--ui3n-checkbox-text-color);
+      user-select: none;
+      cursor: pointer;
+    }
+
+    &--disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+</style>

package/dist/libs/index.d.ts

@@ -1,4 +0,0 @@
-export { SQLiteOn3NStorage } from './sqlite-on-3nstorage';
-export type { BindParams, Database, QueryExecResult } from './sqlite-on-3nstorage';
-export { makeObservableMethodCaller, makeReqRepMethodCaller, makeServiceCaller, } from './ipc-service-caller';
-export { SingleConnectionIPCWrap, MultiConnectionIPCWrap, IPCWrap, } from './ipc-service';

package/dist/libs/ipc-service-caller.d.ts

@@ -1,12 +0,0 @@
-type RPCConnection = web3n.rpc.client.RPCConnection;
-type PassedDatum = web3n.rpc.PassedDatum;
-export interface TransformOpts {
-    unpackReply?: ((reply: PassedDatum | undefined) => any) | 'noop';
-    packRequest?: ((args: any[]) => PassedDatum | undefined) | 'noop';
-}
-export declare function makeReqRepMethodCaller<F extends Function>(connection: RPCConnection, method: string, transforms?: TransformOpts): F;
-export declare function makeObservableMethodCaller<F extends Function>(connection: RPCConnection, method: string, transforms?: TransformOpts): F;
-export declare function makeServiceCaller<T>(connection: RPCConnection, reqRepMethods?: (keyof T)[], obsMethods?: (keyof T)[], transforms?: {
-    [method in keyof T]: TransformOpts;
-}): Partial<T>;
-export {};

package/dist/libs/ipc-service.d.ts

@@ -1,60 +0,0 @@
-type IncomingConnection = web3n.rpc.service.IncomingConnection;
-type PassedDatum = web3n.rpc.PassedDatum;
-type Observer<T> = web3n.Observer<T>;
-export type HandleObservingCall = (obs: Observer<any>, ...requestArgs: any[]) => (() => void);
-export type HandleReqReplyCall = (...requestArgs: any[]) => Promise<any>;
-export interface TransformOpts {
-    unpackRequest?: ((req: PassedDatum | undefined) => any[]) | 'noop';
-    packReply?: ((reply: any) => PassedDatum | undefined) | 'noop';
-}
-declare class ConnectionState {
-    private readonly disconnect;
-    private readonly calls;
-    private isRunning;
-    constructor(disconnect: () => void);
-    acceptsMsgs(): boolean;
-    stop(): void;
-    hasCall(callNum: number): boolean;
-    cancelCall(callNum: number): void;
-    completeCall(callNum: number): void;
-    registerReqReplyCall(callNum: number): void;
-    registerObservableCall(callNum: number, cancel: () => void): void;
-}
-export declare abstract class IPCWrap {
-    readonly srvName: string;
-    protected readonly connections: Map<web3n.rpc.service.IncomingConnection, ConnectionState>;
-    private readonly methods;
-    constructor(srvName: string);
-    addReqReplyMethod(method: string, srv: object | undefined, func: HandleReqReplyCall, transforms?: TransformOpts): void;
-    exposeReqReplyMethods<T extends object>(srv: T, methods: (keyof T)[], transforms?: {
-        [method in keyof T]: TransformOpts;
-    }): void;
-    addObservableMethod(method: string, srv: object | undefined, func: HandleObservingCall, transforms?: TransformOpts): void;
-    exposeObservableMethods<T extends object>(srv: T, methods: (keyof T)[], transforms?: {
-        [method in keyof T]: TransformOpts;
-    }): void;
-    private onMsg;
-    private callReqReplyHandler;
-    private callObsHandler;
-    startIPC(): () => void;
-    stopIPC(): void;
-    protected onConnection(connection: IncomingConnection): Promise<void>;
-    protected onConnectionCompletion(connection: IncomingConnection, connectionState: ConnectionState): Promise<void>;
-    protected onConnectionError(connection: IncomingConnection, connectionState: ConnectionState, err: any): Promise<void>;
-    protected abstract onListeningCompletion(): Promise<void>;
-    protected abstract onListeningError(err: any): Promise<void>;
-}
-export declare class SingleConnectionIPCWrap extends IPCWrap {
-    constructor(srvName: string);
-    protected onListeningCompletion(): Promise<void>;
-    protected onListeningError(err: any): Promise<void>;
-    protected onConnectionCompletion(connection: IncomingConnection, connectionState: ConnectionState): Promise<void>;
-    protected onConnectionError(connection: IncomingConnection, connectionState: ConnectionState, err: any): Promise<void>;
-}
-export declare class MultiConnectionIPCWrap extends IPCWrap {
-    constructor(srvName: string);
-    protected onListeningCompletion(): Promise<void>;
-    protected onListeningError(err: any): Promise<void>;
-    protected onConnectionError(connection: IncomingConnection, connectionState: ConnectionState, err: any): Promise<void>;
-}
-export {};

package/dist/libs/serialization-for-ipc/copy-json.d.ts

@@ -1,8 +0,0 @@
-/**
- * This function creates a copy of json entity with a caveat that Buffer and
- * byte arrays are shared between original and a copy.
- * @param orig is an object, which copy is created. Buffer and byte arrays
- * passed through like primitives.
- * @param excludeTopFields is an optional list of fields to exclude from copy.
- */
-export declare function copyJSON<T>(orig: T, excludeTopFields?: string[]): T;

package/dist/libs/serialization-for-ipc/json-n-binary.d.ts

@@ -1,5 +0,0 @@
-export declare function serializeArgs(args: any[]): {
-    bytes: Uint8Array;
-    passedByReference?: any[];
-};
-export declare function deserializeArgs(bytes: Uint8Array, passedByReference: any[] | undefined): any[];

package/dist/libs/serialization-for-ipc/protobuf-type.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="node" />
-export declare class ProtoType<T extends object> {
-    private readonly type;
-    private constructor();
-    static for<T extends object>(type: any): ProtoType<T>;
-    pack(msg: T): Buffer;
-    unpack(bytes: Buffer | void): T;
-    packToBase64(msg: T): string;
-    unpackFromBase64(str: string): T;
-}

package/dist/libs/serialization-for-ipc/types.d.ts

@@ -1,3 +0,0 @@
-/** Namespace json_ipc. */
-export declare namespace json_ipc {
-}