@v1nt1248/3nclient-lib 0.1.53 → 0.1.55

package/dist/utils/common.d.ts

@@ -1,11 +1,12 @@
 export declare function getRandomId(numOfChars: number): string;
 export declare function getDeliveryErrors(progress: web3n.asmail.DeliveryProgress): Record<string, string>;
 export declare function transformFileToWeb3NFile(file: File): Promise<web3n.files.File | undefined>;
+export declare function markSearch(str: string, search: string): string;
 /**
- * функция округления с заданной точностью
- * @param num {number} - округляемое число
- * @param precision {number} - точность округления (количество знаков после запятой
- * указывается со знаком "-")
- * @return {number} - скорректированная округленная десятичная дробь
+ * Rounding with a given accuracy
+ * @param num {number}
+ * @param precision {number} - rounding accuracy (number of digits after the decimal point
+ * indicated with the "-" sign)
+ * @return {number}
  */
 export declare function round(num: number, precision: number): number;

package/dist/utils/index.d.ts

@@ -5,5 +5,6 @@ export * from './processes/named-procs';
 export * from './textarea-max-rows';
 export * from './common';
 export * from './ui';
+export * from './selection';
 export { SQLiteOn3NStorage } from './sqlite-on-3nstorage';
 export type { BindParams, Database, QueryExecResult } from './sqlite-on-3nstorage';

package/dist/utils/selection.d.ts

@@ -0,0 +1,3 @@
+export declare function selectAll(el: HTMLElement): void;
+export declare function selectStart(el: HTMLElement): void;
+export declare function selectEnd(el: HTMLElement): void;

package/dist/variables.css

@@ -822,3 +822,21 @@ div {
   animation: ripple var(--ui3n-ripple-duration) linear;
   background-color: var(--ui3n-ripple-bg-color);
 }
+
+.ui3n-title {
+  position: fixed;
+  width: max-content;
+  top: 0;
+  left: 0;
+  padding: var(--spacing-xs) var(--spacing-s);
+  border-radius: var(--spacing-xs);
+  font-size: var(--font-11);
+  line-height: var(--font-12);
+  font-weight: 400;
+  background-color: var(--color-bg-control-secondary-default);
+  color: var(--color-text-control-primary-default);
+  box-shadow:
+      0 2px 1px -1px rgba(0, 0, 0, 0.2),
+      0 1px 1px 0 rgba(0, 0, 0, 0.14),
+      0 1px 3px 0 rgba(0, 0, 0, 0.12);
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -51,16 +51,17 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
-    "@floating-ui/vue": "1.1.5",
+    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/vue": "1.1.6",
     "dayjs": "1.11.13",
     "lodash": "4.17.21",
     "mitt": "3.0.1",
-    "sanitize-html": "2.13.1",
-    "tslib": "2.8.0",
+    "sanitize-html": "2.14.0",
+    "tslib": "2.8.1",
     "vuedraggable": "4.1.0"
   },
   "peerDependencies": {
-    "pinia": "2.3.0",
+    "pinia": "2.3.1",
     "vue": "3.5.13"
   },
   "devDependencies": {
@@ -83,7 +84,7 @@
     "eslint-plugin-vue": "9.27.0",
     "jackspeak": "4.0.1",
     "path": "0.12.7",
-    "pinia": "2.3.0",
+    "pinia": "2.3.1",
     "postcss-html": "1.7.0",
     "prettier": "^3.3.3",
     "sass": "1.80.3",

package/src/components/index.ts

@@ -81,6 +81,8 @@ import type {
   Ui3nRadioGroupSlots,
   Ui3nRadioValue,
 } from './ui3n-radio-group/types';
+import Ui3nEditable from './ui3n-editable/ui3n-editable.vue';
+import type { Ui3nEditableProps, Ui3nEditableEmits } from './ui3n-editable/types';
 
 export {
   Ui3nIcon,
@@ -183,4 +185,7 @@ export {
   Ui3nRadioGroupEmits,
   Ui3nRadioGroupProps,
   Ui3nRadioGroupSlots,
+  Ui3nEditable,
+  Ui3nEditableProps,
+  Ui3nEditableEmits,
 };

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch, useCssModule } from 'vue';
 import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
-import Ui3nRipple from '../..//directives/ui3n-ripple';
+import Ui3nRipple from '../../directives/ui3n-ripple';
 import type { Ui3nButtonEmits, Ui3nButtonProps, Ui3nButtonEventName } from './types';
 
 const vUi3nRipple = Ui3nRipple;

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

@@ -0,0 +1,42 @@
+import type { Nullable } from '@/components/types';
+
+export interface Ui3nContentEditableProps {
+  modelValue: string;
+  placeholder?: string;
+  maxLength?: number;
+  disabled?: boolean;
+  selectAllOnFocus?: boolean;
+  isMultiline?: boolean;
+  disallowEmptyValue?: boolean;
+  debounceDelay?: number;
+}
+
+export interface Ui3nContentEditableEmits {
+  (event: 'init', value: HTMLElement): void;
+  (event: 'update:modelValue', value: Nullable<string>): void;
+  (event: 'input', value: Nullable<string>): void;
+  (event: 'change', value: Nullable<string>): void;
+  (event: 'click', value: MouseEvent): void;
+  (event: 'keydown', value: KeyboardEvent): void;
+  (event: 'focusin', value: FocusEvent): void;
+  (event: 'focusout', value: FocusEvent): void;
+}
+
+export interface Ui3nEditableProps {
+  modelValue: string;
+  placeholder?: string;
+  maxLength?: number;
+  maxWidth?: string | number;
+  tooltipWidth?: number;
+  disabled?: boolean;
+  selectAllOnFocus?: boolean;
+  disallowEmptyValue?: boolean;
+}
+
+export interface Ui3nEditableEmits {
+  (event: 'update:modelValue', value: Nullable<string>): void;
+  (event: 'done'): void;
+  (event: 'cancel'): void;
+  (event: 'focusin', value: FocusEvent): void;
+  (event: 'focusout'): void;
+}

package/src/components/ui3n-editable/ui3n-content-editable.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+  import type { Ui3nContentEditableProps, Ui3nContentEditableEmits } from './types';
+  import { useContentEditable } from './useContentEditable';
+
+  const props = withDefaults(defineProps<Ui3nContentEditableProps>(), {
+    debounceDelay: 100,
+  });
+  const emits = defineEmits<Ui3nContentEditableEmits>();
+
+  const {
+    el,
+    isFocused,
+    onFocusIn,
+    onFocusOut,
+    onClick,
+    onPaste,
+    onKeyDown,
+    onInput,
+  } = useContentEditable(props, emits);
+</script>
+
+<template>
+  <span
+    ref="el"
+    :class="[
+      $style.ui3nContentEditable,
+      !modelValue && !!placeholder && $style.placeholder,
+      isFocused && $style.isFocused,
+      disabled && $style.isDisabled
+    ]"
+    :contenteditable="!disabled"
+    @focusin="onFocusIn"
+    @focusout="onFocusOut"
+    @click="onClick"
+    @paste="onPaste"
+    @keydown="onKeyDown"
+    @input="onInput"
+  />
+</template>
+
+<style lang="scss" module>
+  .ui3nContentEditable {
+    --ui3n-content-editable-color: var(--color-text-control-primary-default);
+    --ui3n-content-editable-placeholder-color: var(--color-text-control-secondary-default);
+    --ui3n-content-editable-border-color-focused: var(--color-border-table-accent-default);
+
+    position: relative;
+    display: inline-block;
+    width: fit-content;
+    font-size: var(--font-12);
+    font-weight: 400;
+    line-height: var(--font-16);
+    overflow-wrap: break-word;
+    color: var(--ui3n-content-editable-color);
+    padding: var(--spacing-xs) var(--spacing-s);
+    background-color: transparent;
+    border-radius: var(--spacing-xs);
+  }
+
+  .placeholder {
+    color: var(--ui3n-content-editable-placeholder-color);
+  }
+
+  .isFocused {
+    border: 1px solid var(--ui3n-content-editable-border-color-focused);
+  }
+
+  .isDisabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+  }
+</style>

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

@@ -0,0 +1,296 @@
+<script lang="ts" setup>
+  import { computed, nextTick, ref, watch } from 'vue';
+  import Ui3nIcon from '@/components/ui3n-icon/ui3n-icon.vue';
+  import Ui3nRipple from '@/directives/ui3n-ripple';
+  import Ui3nClickOutside from '@/directives/ui3n-click-outside';
+  import type { Ui3nEditableProps, Ui3nEditableEmits } from './types';
+  import type { Nullable } from '@/components/types';
+
+  const vUi3nRipple = Ui3nRipple;
+  const vUi3nClickOutside = Ui3nClickOutside;
+
+  const props = defineProps<Ui3nEditableProps>();
+  const emits = defineEmits<Ui3nEditableEmits>();
+
+  const minWidth = 60;
+
+  const inputEl = ref<Nullable<HTMLInputElement>>(null);
+  const hiddenEl = ref<Nullable<HTMLSpanElement>>(null);
+  const inputElWidth = ref('auto');
+  const contentValueEl = ref<Nullable<HTMLSpanElement>>(null);
+  const value = ref<string>(props.modelValue);
+  const initialValue = ref<string>(props.modelValue);
+
+  const inEdit = ref(false);
+
+  const cssMinWidth = computed(() => `${minWidth}px`);
+
+  const cssMaxWidth = computed(() => {
+    if (!props.maxWidth) {
+      return '100%';
+    }
+
+    const maxWidthAsNumber = Number(props.maxWidth);
+    if (Number.isNaN(maxWidthAsNumber)) {
+      return props.maxWidth as string;
+    }
+
+    return `${maxWidthAsNumber}px`;
+  });
+
+  const isContentTruncated = computed(() => {
+    if (!contentValueEl.value) {
+      return false;
+    }
+
+    return contentValueEl.value.scrollWidth > contentValueEl.value.clientWidth;
+  });
+
+  const isValid = computed(() => {
+    if (!props.disallowEmptyValue) {
+      return true;
+    }
+
+    return !!value.value;
+  });
+
+  function setInputWidth() {
+    hiddenEl.value!.textContent = value.value || props.placeholder || '...';
+    const newWidth = Math.max(hiddenEl.value!.scrollWidth, minWidth);
+    inputElWidth.value = `${newWidth}px`;
+  }
+
+  function turnOnEditMode() {
+    inEdit.value = true;
+    initialValue.value = value.value;
+
+    nextTick(() => {
+      if (inputEl.value) {
+        setInputWidth();
+        inputEl.value.focus();
+        props.selectAllOnFocus && inputEl.value.select();
+      }
+    });
+  }
+
+  function onInput(ev: Event) {
+    // @ts-ignore
+    value.value = ev.target!.value || '';
+    setInputWidth();
+  }
+
+  function done() {
+    if (props.disallowEmptyValue && !isValid.value) {
+      return;
+    }
+
+    if (value.value !== initialValue.value) {
+      initialValue.value = value.value;
+      emits('update:modelValue', value.value);
+    }
+    emits('done');
+    inEdit.value = false;
+  }
+
+  function cancel() {
+    if (value.value !== initialValue.value) {
+      value.value = initialValue.value;
+      emits('update:modelValue', value.value);
+    }
+    emits('cancel');
+    inEdit.value = false;
+  }
+
+  function onClickOutside() {
+    if (inEdit.value) {
+      emits('focusout');
+      done();
+    }
+  }
+
+  watch(
+    () => props.modelValue,
+    (val, oVal) => {
+      if (val !== oVal) {
+        value.value = val;
+        initialValue.value = val;
+      }
+    },
+  );
+</script>
+
+<template>
+  <div
+    v-ui3n-click-outside="onClickOutside"
+    :class="$style.ui3nEditable"
+    @focusin="emits('focusin', $event);"
+  >
+    <template v-if="inEdit">
+      <span ref="hiddenEl" :class="$style.hidden" />
+
+      <input
+        ref="inputEl"
+        :class="[$style.input, inEdit && $style.inEdit, inEdit && !isValid && $style.inEditWarning]"
+        :style="{ width: inputElWidth }"
+        :value="value"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @input="onInput"
+        @keydown.enter="done"
+        @keydown.tab="done"
+        @keydown.esc="cancel"
+      />
+
+      <div v-ui3n-ripple :class="[$style.btn, $style.doneBtn]" @click="done">
+        <ui3n-icon icon="round-done" size="12" color="var(--color-icon-table-accent-default)" />
+      </div>
+
+      <div v-ui3n-ripple :class="[$style.btn, $style.cancelBtn]" @click="cancel">
+        <ui3n-icon icon="round-close" size="12" color="var(--color-icon-table-secondary-default)" />
+      </div>
+    </template>
+
+    <template v-else>
+      <div :class="[$style.content, !value && $style.contentEmpty]" :title="isContentTruncated ? value : undefined">
+        <span ref="contentValueEl">{{ value || placeholder || '...' }}</span>
+
+        <div v-ui3n-ripple :class="[$style.btn, $style.editBtn]" @click.stop.prevent="turnOnEditMode">
+          <ui3n-icon icon="round-edit" size="12" color="var(--color-icon-control-accent-unselected)" />
+        </div>
+      </div>
+    </template>
+
+
+  </div>
+</template>
+
+<style lang="scss" module>
+  @use '../../assets/styles/mixins' as mixins;
+
+  .ui3nEditable {
+    --ui3n-editable-min-width: v-bind(cssMinWidth);
+    --ui3n-editable-max-width: v-bind(cssMaxWidth);
+    --ui3n-editable-height: 24px;
+
+    position: relative;
+    box-sizing: border-box;
+    width: max-content;
+    max-width: var(--ui3n-editable-max-width);
+    height: var(--ui3n-editable-height);
+    border-radius: var(--spacing-xs);
+    font-size: var(--font-12);
+    font-weight: 400;
+    line-height: var(--font-16);
+    color: var(--color-text-table-primary-default);
+    overflow: hidden;
+  }
+
+  .content {
+    position: relative;
+    height: var(--ui3n-editable-height);
+    min-width: var(--ui3n-editable-min-width);
+    max-width: var(--ui3n-editable-max-width);
+    padding: var(--spacing-xs) 44px var(--spacing-xs) var(--spacing-xs);
+    border-radius: var(--spacing-xs);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    cursor: pointer;
+
+    &.contentEmpty {
+      color: var(--color-text-table-secondary-default);
+    }
+
+    &:hover {
+      background-color: var(--color-bg-control-primary-hover);
+
+      .btn.editBtn {
+        opacity: 1;
+      }
+    }
+
+    span {
+      display: block;
+      max-width: 100%;
+      @include mixins.text-overflow-ellipsis();
+    }
+  }
+
+  .input {
+    position: relative;
+    min-width: var(--ui3n-editable-min-width);
+    max-width: calc(100% - 52px);
+    padding: var(--spacing-xs) 44px var(--spacing-xs) var(--spacing-xs);
+    font-size: var(--font-12);
+    font-weight: 400;
+    line-height: var(--font-16);
+    border-radius: var(--spacing-xs);
+
+    &::placeholder {
+      color: var(--color-text-table-secondary-default);
+    }
+
+    &.inEdit {
+      padding-top: calc(var(--spacing-xs) - 1px);
+      padding-bottom: calc(var(--spacing-xs) - 1px);
+
+      &:not(.inEditWarning) {
+        border: 1px solid var(--color-border-table-accent-default);
+      }
+
+      &.inEditWarning {
+        border: 1px solid var(--error-content-default);
+      }
+    }
+
+    &:focus-visible {
+      border: none;
+      outline: none;
+    }
+  }
+
+  .hidden {
+    position: absolute;
+    visibility: hidden;
+  }
+
+  .btn {
+    position: absolute;
+    width: var(--spacing-m);
+    min-width: var(--spacing-m);
+    height: var(--spacing-m);
+    min-height: var(--spacing-m);
+    border-radius: 50%;
+    background-color: transparent;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    transition: opacity 0.2s ease-in-out;
+    z-index: 1;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-bg-button-secondary-hover);
+    }
+
+    &.editBtn {
+      top: var(--spacing-xs);
+      right: var(--spacing-xs);
+      opacity: 0;
+    }
+
+    &.cancelBtn {
+      top: var(--spacing-xs);
+      right: var(--spacing-xs);
+      opacity: 1;
+    }
+
+    &.doneBtn {
+      top: var(--spacing-xs);
+      right: var(--spacing-ml);
+      opacity: 1;
+    }
+  }
+</style>

package/src/components/ui3n-editable/useContentEditable.ts

@@ -0,0 +1,153 @@
+import { onMounted, ref, watch } from 'vue';
+import debounce from 'lodash/debounce';
+import sanitizeHtml from 'sanitize-html';
+import { selectAll } from '@/utils';
+import type { Nullable } from '@/components/types';
+import type { Ui3nContentEditableEmits, Ui3nContentEditableProps } from '@/components/ui3n-editable/types';
+
+export function useContentEditable(props: Ui3nContentEditableProps, emits: Ui3nContentEditableEmits) {
+  const el = ref<Nullable<HTMLElement>>(null);
+  const initialValue = ref('');
+  const isFocused = ref(false);
+
+  function convertHtmlToValue(html: Nullable<string>): Nullable<string> {
+    let clearedHtml = (html ?? '').trim();
+    if (props.placeholder) {
+      clearedHtml = clearedHtml.replace(props.placeholder, '');
+    }
+
+    return clearedHtml === '' ? null : html;
+  }
+
+  function convertValueToHtml(value: string): string {
+    return value || (!isFocused.value && props.placeholder) || '';
+  }
+
+  function setHtmlFromValue(value: string): void {
+    const sanitizedValue = value ? sanitizeHtml(value) : value;
+    el.value!.innerText = convertValueToHtml(sanitizedValue);
+  }
+
+  function getContent(ev: Event): Nullable<string> {
+    return (ev.target as HTMLElement)?.textContent;
+  }
+
+  function updateValue(newHtml: Nullable<string>) {
+    if (props.disabled) {
+      return;
+    }
+
+    const newValue = convertHtmlToValue(newHtml);
+    if (props.modelValue !== newValue) {
+      emits('update:modelValue', newValue);
+    }
+  }
+
+  const updateValueDebounced = debounce(updateValue, props.debounceDelay);
+
+  function onFocusIn(ev: FocusEvent) {
+    if (props.disabled) {
+      return;
+    }
+
+    isFocused.value = true;
+    if (props.disallowEmptyValue) {
+      initialValue.value = props.modelValue;
+    }
+
+    setHtmlFromValue(props.modelValue);
+
+    if (props.selectAllOnFocus) {
+      selectAll(el.value!);
+    }
+
+    emits('focusin', ev);
+  }
+
+  function onFocusOut(ev: FocusEvent) {
+    isFocused.value = false;
+    const content = getContent(ev);
+    const updatedContent = props.disallowEmptyValue && !content ? initialValue.value : content;
+
+    updateValue(updatedContent);
+    setHtmlFromValue(props.modelValue);
+    el.value!.scrollLeft = 0;
+    emits('focusout', ev);
+    emits('change', updatedContent);
+    emits('update:modelValue', updatedContent);
+  }
+
+  function onClick(ev: MouseEvent) {
+    ev.stopPropagation();
+    emits('click', ev);
+  }
+
+  function onPaste(ev: ClipboardEvent) {
+    if (props.maxLength) {
+      const text = ev.clipboardData?.getData('text/plain');
+      // Strip &nbsp and html tags from string
+      const value = `${el.value!.textContent}${text}`
+        .replace(new RegExp(String.fromCharCode(160), 'g'), ' ')
+        .replace(/(<([^>]+)>)/gi, '');
+
+      if (value.length >= props.maxLength) ev.preventDefault();
+    }
+  }
+
+  function onKeyDown(ev: KeyboardEvent) {
+    if (props.maxLength) {
+      // Strip &nbsp and html tags from string
+      const value = (ev.target as HTMLElement)?.innerHTML
+        // @ts-ignore
+        .replaceAll(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, ' ')
+        .replaceAll(/(<([^>]+)>)/gi, '');
+
+      const selection = window.getSelection();
+
+      if (value.length >= props.maxLength && ev.code !== 'Backspace' && selection?.toString().length === 0)
+        ev.preventDefault();
+    }
+
+    emits('keydown', ev);
+
+    if (ev.code === 'Enter') {
+      if (!props.isMultiline) {
+        ev.preventDefault();
+        (ev.target as HTMLElement).blur();
+        window.getSelection()?.removeAllRanges();
+      }
+    } else if (ev.code === 'Esc') {
+      (ev.target as HTMLElement).blur();
+    }
+  }
+
+  function onInput(ev: InputEvent) {
+    emits('input', (ev.target as HTMLElement).textContent);
+    updateValueDebounced((ev.target as HTMLElement).textContent);
+  }
+
+  onMounted(() => {
+    el.value && emits('init', el.value);
+  });
+
+  watch(
+    () => props.modelValue,
+    (val: string) => {
+      if (!isFocused.value) {
+        setHtmlFromValue(val);
+      }
+    },
+    { immediate: true },
+  );
+
+  return {
+    el,
+    isFocused,
+    onFocusIn,
+    onFocusOut,
+    onClick,
+    onPaste,
+    onKeyDown,
+    onInput,
+  };
+}