@dxtmisha/constructor 0.23.0

package/src/classes/field/FieldValueInclude.ts

@@ -0,0 +1,318 @@
+import { computed, ref, type ToRefs, watch } from 'vue'
+import {
+  anyToString,
+  getRef,
+  isArray,
+  isFilled,
+  isObject,
+  type RefOrNormal,
+  setValues,
+  toArray,
+  toNumber
+} from '@dxtmisha/functional'
+
+import { FieldElementInclude } from './FieldElementInclude'
+
+import type { FieldValueProps } from '../../types/fieldTypes'
+
+/**
+ * Class for working with input values.
+ *
+ * Класс для работы со значениями инпута.
+ */
+export class FieldValueInclude<Value = any> {
+  /** Current value/ Текущее значение */
+  readonly item = ref<Value>()
+  /** Indicates if the value is complete/ Указывает, полное ли значение */
+  readonly isFull = ref<boolean>(true)
+
+  /** Indicates if there are temporary values/ Указывает, есть ли временные значения */
+  protected readonly hasEdit = ref<boolean>(false)
+
+  /**
+   * Constructor
+   * @param props input data /<br>входные данные
+   * @param refs input data in the form of reactive elements /<br>входные данные в виде реактивных элементов
+   * @param element object for working with the input element /<br>объект для работы с элементом ввода
+   * @param original original values /<br>оригинальные значения
+   */
+
+  constructor(
+    protected readonly props: FieldValueProps<Value>,
+    protected readonly refs: ToRefs<FieldValueProps<Value>>,
+    protected readonly element?: FieldElementInclude,
+    protected readonly original?: RefOrNormal<Value>
+  ) {
+    this.item.value = this.getOriginal()
+
+    watch([
+      refs.value,
+      refs.modelValue
+    ], this.update)
+  }
+
+  /** Checks if there are values or temporary values/ Проверяет, есть ли значения или временные значения */
+  readonly is = computed<boolean>(() => {
+    return this.hasEdit.value
+      || this.boolean.value
+      || Boolean(this.props.placeholder)
+  })
+
+  /** Checks if there are any values/ Проверяет, есть ли значения */
+  readonly isValue = computed<boolean>(() => this.hasEdit.value || this.boolean.value)
+
+  /** Returns the current value if isFull is true/ Возвращает текущее значение, если isFull истинно */
+  readonly itemByFull = computed<Value | undefined>(() => this.isFull.value ? this.item.value : undefined)
+
+  /**
+   * Returns the current value, converted to a number/
+   * Возвращает текущее значение, преобразованное в номер
+   */
+  readonly number = computed<number>(() => {
+    if (this.boolean.value) {
+      return toNumber(this.string.value)
+    }
+
+    return 0
+  })
+
+  /** Returns the current value of type string/ Возвращает текущее значение типа string */
+  readonly string = computed<string>(() => anyToString(this.item.value))
+
+  /** Returns the current value of type boolean/ Возвращает текущее значение типа boolean */
+  readonly boolean = computed<boolean>(() => isFilled(this.item.value))
+
+  /** Returns the length of the entered value/ Возвращает длину введенного значения */
+  readonly length = computed<number>(() => {
+    const value = this.item.value
+
+    if (isArray(value)) {
+      return value.length
+    }
+
+    if (isObject(value)) {
+      return Object.keys(value).length
+    }
+
+    return this.string.value.length ?? 0
+  })
+
+  /**
+   * Returns the current value as an array.
+   *
+   * Возвращает текущее значение в виде массива.
+   */
+  getToArray(): Value[] {
+    return toArray(this.item.value) as Value[]
+  }
+
+  /**
+   * Changes the value.
+   *
+   * Изменяет значение.
+   * @param value changeable value/ изменяемое значение
+   */
+  set(value: any): this {
+    if (this.isDifference(value)) {
+      this.item.value = setValues(
+        this.item.value,
+        value,
+        {
+          multiple: this.props.multiple,
+          maxlength: toNumber(this.props.maxlength)
+        }
+      ) as Value
+
+      const element = this.element?.getElement()
+
+      if (
+        element
+        && element.value
+        && 'setValue' in element.value
+      ) {
+        element.value?.setValue(this.item.value)
+      }
+    }
+
+    return this
+  }
+
+  /**
+   * Changes the values by the selected element.
+   *
+   * Изменяет значения по выбранному элементу.
+   * @param event event object/ объект события
+   */
+  setByEvent(event: Event): this
+  setByEvent(value: Record<string, any>): this
+  setByEvent(value: any): this
+  setByEvent(eventValue: Event | Record<string, any> | any): this {
+    switch (typeof eventValue) {
+      case 'object':
+        if (eventValue) {
+          if (
+            'value' in eventValue
+            && eventValue.value !== undefined
+          ) {
+            this.set(eventValue.value)
+          } else if ('target' in eventValue) {
+            this.setByTarget(eventValue.target as HTMLInputElement)
+          }
+
+          if ('hasEdit' in eventValue) {
+            this.setHasEdit(eventValue.hasEdit)
+          }
+
+          if ('isFull' in eventValue) {
+            this.setFull(eventValue.isFull)
+          }
+        }
+
+        break
+      default:
+        this.set(eventValue)
+        break
+    }
+
+    return this
+  }
+
+  /**
+   * Changes the values by the selected element.
+   *
+   * Изменяет значения по выбранному элементу.
+   * @param target selected elements/ выбранные элементы
+   */
+  setByTarget(target: HTMLInputElement): this {
+    return this.set(
+      this.isCheckbox(target)
+        ? target.checked
+        : target.value
+    )
+  }
+
+  /**
+   * Changes the value by the checked property.
+   *
+   * Изменяет значение по свойству checked.
+   * @param event event value/ значение события
+   */
+  setByChecked(event: Event): this {
+    const input = event.target as HTMLInputElement
+
+    return this.set(input.checked)
+  }
+
+  /**
+   * Changes the value for radio type.
+   *
+   * Изменяет значение для типа radio.
+   * @param event event object/ объект события
+   */
+  setByRadio(event: Event): this {
+    const input = event.target as HTMLInputElement
+    const value = input.checked ? input.value : ''
+
+    return this.set(value)
+  }
+
+  /**
+   * Sets the isFull value.
+   *
+   * Устанавливает значение isFull.
+   * @param isFull isFull value/ значение isFull
+   */
+  setFull(isFull: boolean) {
+    this.isFull.value = isFull
+  }
+
+  /**
+   * Sets the hasEdit value.
+   *
+   * Устанавливает значение hasEdit.
+   * @param hasEdit hasEdit value/ значение hasEdit
+   */
+  setHasEdit(hasEdit: boolean) {
+    this.hasEdit.value = hasEdit
+  }
+
+  /**
+   * Sets the value to the original one.
+   *
+   * Устанавливает значение на оригинальное.
+   */
+  setToOriginal(): this {
+    this.item.value = this.getOriginal()
+    return this
+  }
+
+  /**
+   * Clear all values to the original ones.
+   *
+   * Очисти все значения до оригинальных.
+   */
+  clear(): this {
+    this.item.value = getRef(this.original)
+    this.element?.clear()
+
+    this.hasEdit.value = false
+    this.isFull.value = true
+
+    return this
+  }
+
+  /**
+   * Is the selected type a checkbox.
+   *
+   * Является ли выбранный тип чекбокс.
+   * @param target selected elements/ выбранные элементы
+   */
+  protected isCheckbox(target: HTMLInputElement): boolean {
+    return target.type === 'checkbox'
+  }
+
+  /**
+   * Checks if the value has actually been changed.
+   *
+   * Проверяет, было ли значение действительно изменено.
+   * @param value value to check/ значение для проверки
+   */
+  protected isDifference(
+    value: any = this.getOriginal()
+  ): boolean {
+    return this.string.value !== anyToString(value)
+  }
+
+  /**
+   * Returns the original value.
+   *
+   * Возвращает оригинальное значение.
+   */
+  protected getOriginal(): any {
+    return this.props.value || this.props.modelValue || getRef(this.original)
+  }
+
+  /**
+   * Changes the values to the original ones.
+   *
+   * Изменяет значения на оригинальные.
+   */
+  protected readonly update = (): void => {
+    if (
+      this.isEdit(this.props.value)
+      || this.isEdit(this.props.modelValue)
+    ) {
+      this.setToOriginal()
+    }
+  }
+
+  /**
+   * Checks if the value is being edited.
+   *
+   * Проверяет, редактируется ли значение.
+   * @param value value to check/ значение для проверки
+   */
+  protected isEdit(value?: Value): boolean {
+    return value !== undefined && anyToString(value) !== this.string.value
+  }
+}

package/src/classes/field/FieldVisibilityInclude.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+
+/**
+ * Class for working with data visualization. This is for working with the password type.
+ *
+ * Класс для работы с визуализацией данных. Это для работы с типом пароля.
+ */
+export class FieldVisibilityInclude {
+  readonly item = ref<boolean>(false)
+
+  /**
+   * Toggles the values.
+   *
+   * Переключает значения.
+   */
+  toggle(): this {
+    this.item.value = !this.item.value
+
+    return this
+  }
+}

package/src/constructors/Badge/Badge.ts

@@ -0,0 +1,73 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp, isFilled } from '@dxtmisha/functional'
+
+import { LabelNumberInclude } from '../../classes/LabelNumberInclude'
+import { IconInclude } from '../Icon'
+
+import type { BadgeComponents, BadgeEmits, BadgeSlots } from './types'
+import type { BadgeProps } from './props'
+
+/**
+ * The Badge class implements a badge constructor with icon support and auto-hide logic.
+ *
+ * Класс Badge реализует конструктор бейджа с поддержкой иконок и авто-скрытия.
+ */
+export class Badge {
+  readonly label: LabelNumberInclude
+  readonly icon: IconInclude
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
+   * @param element input element/ элемент ввода
+   * @param classDesign design name/ название дизайна
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param slots object for working with slots/ объект для работы со слотами
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly props: BadgeProps,
+    protected readonly refs: ToRefs<BadgeProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<BadgeComponents, BadgeProps>,
+    protected readonly slots?: BadgeSlots,
+    protected readonly emits?: ConstrEmit<BadgeEmits>
+  ) {
+    this.label = new LabelNumberInclude(
+      props,
+      className,
+      undefined,
+      slots
+    )
+
+    this.icon = new IconInclude(
+      props,
+      className,
+      components
+    )
+  }
+
+  /**
+   * Computes if the badge should auto-hide when there is no dot, icon, or label.
+   *
+   * Вычисляет, должен ли бейдж автоматически скрываться, если нет точки, иконки и текста.
+   */
+  readonly autoHide = computed(
+    () => !this.props.dot
+      && !isFilled(this.icon.isIcon.value)
+      && !isFilled(this.label.is.value)
+  )
+
+  /**
+   * Classes for controlling badge visibility.
+   *
+   * Классы для управления видимостью бейджа.
+   */
+  readonly classes = computed(() => ({
+    [`${this.className}--hideAuto`]: this.autoHide.value
+  }))
+}

package/src/constructors/Badge/BadgeDesign.tsx

@@ -0,0 +1,127 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { Badge } from './Badge'
+
+import {
+  type BadgePropsBasic
+} from './props'
+import {
+  type BadgeClasses,
+  type BadgeComponents,
+  type BadgeEmits,
+  type BadgeExpose,
+  type BadgeSlots
+} from './types'
+
+/**
+ * BadgeDesign
+ */
+export class BadgeDesign<
+  COMP extends BadgeComponents,
+  EXPOSE extends BadgeExpose,
+  CLASSES extends BadgeClasses,
+  P extends BadgePropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    BadgeEmits,
+    EXPOSE,
+    BadgeSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Badge
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, BadgeEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Badge(
+      this.props,
+      this.refs,
+      this.element,
+      this.getDesign(),
+      this.getName(),
+      this.components,
+      this.slots,
+      this.emits
+    )
+
+    this.init()
+  }
+
+  /**
+   * Initialization of all the necessary properties for work
+   *
+   * Инициализация всех необходимых свойств для работы.
+   */
+  protected initExpose(): EXPOSE {
+    return {} as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: this.item.classes.value,
+      ...{
+        // :classes [!] System label / Системная метка
+        label: this.getSubClass('label'),
+        icon: this.getSubClass('icon')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode {
+    const children: any[] = []
+
+    if (!this.props.dot) {
+      children.push(
+        ...this.item.label.render(),
+        ...this.item.icon.renderIcon()
+      )
+    }
+
+    return h('span', {
+      ...this.getAttrs(),
+      ref: this.element,
+      class: this.classes?.value.main
+    }, children)
+  }
+}

package/src/constructors/Badge/BadgeInclude.ts

@@ -0,0 +1,78 @@
+import { computed, type VNode } from 'vue'
+import { type ConstrBind, DesignComponents, getBind, getRef, type RefOrNormal, toBind } from '@dxtmisha/functional'
+
+import type { BadgeComponentInclude, BadgePropsInclude } from './basicTypes'
+import type { BadgeProps } from './props'
+
+/**
+ * BadgeInclude class provides functionality for conditionally rendering badge components
+ * within other components. It manages the logic for determining when to display a badge
+ * and configures the appropriate properties.
+ *
+ * Класс BadgeInclude предоставляет функциональность для условного рендеринга компонентов
+ * бейджа внутри других компонентов. Он управляет логикой определения необходимости
+ * отображения бейджа и настраивает соответствующие свойства.
+ *
+ * @template Props - Properties interface extending BadgePropsInclude
+ */
+export class BadgeInclude<Props extends BadgePropsInclude = BadgePropsInclude> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param extra additional parameter/ дополнительный параметр
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<BadgeComponentInclude, Props>,
+    protected readonly extra?: RefOrNormal<ConstrBind<BadgeProps>>
+  ) {
+  }
+
+  /**
+   * Checks whether a badge is specified for rendering the component/
+   * Проверяет, указан ли бейдж для отображения компонента
+   */
+  readonly is = computed(() => Boolean(this.props.badge || this.props.badgeDot))
+
+  /**
+   * list of properties for the badge component/ список свойств для компонента бейджа
+   */
+  readonly binds = computed(() => getBind(
+    this.props.badgeDot ? {} : this.props.badge,
+    {
+      dot: this.props.badgeDot,
+      ...toBind(
+        getRef(this.extra) ?? {},
+        {
+          class: `${this.className}__badge`
+        }
+      )
+    },
+    'label',
+    true
+  ))
+
+  /**
+   * Render of the badge component
+   *
+   * Рендер компонента бейджа
+   */
+  readonly render = (): VNode[] => {
+    if (
+      this.components
+      && this.is.value
+    ) {
+      return this.components.render(
+        'badge',
+        this.binds.value,
+        undefined,
+        'badge'
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/Badge/basicTypes.ts

@@ -0,0 +1,15 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { BadgePropsBasic } from './props'
+
+export type BadgeComponentInclude = {
+  badge?: object
+}
+
+export interface BadgePropsInclude<
+  Badge extends BadgePropsBasic = BadgePropsBasic
+> {
+  // Values
+  badge?: string | number | ConstrBind<Badge>
+  badgeDot?: boolean
+}

package/src/constructors/Badge/index.ts

@@ -0,0 +1,5 @@
+export * from './Badge'
+export * from './BadgeDesign'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/Badge/properties.json

@@ -0,0 +1,36 @@
+{
+  "padding": {
+    "_type": "var"
+  },
+  "dotSize": {
+    "_type": "var"
+  },
+  "transition-property": "clip-path, mask-image, mask-size, opacity, transform, scale",
+  "transition-duration": "{d.sys.transitionDuration.lg.open}",
+  "transition-function": "{d.sys.transitionFunction.standard}",
+  "#label": {},
+  "#icon": {},
+  "selected": {},
+  "~hide": {
+    "transition-duration": "{d.sys.transitionDuration.lg.close}"
+  },
+  "~dot": {},
+  "~overlap": {
+    "~rectangular": {},
+    "~circular": {},
+    "~static": {},
+    "_default": "rectangular"
+  },
+  "~vertical": {
+    "~top": {},
+    "~center": {},
+    "~bottom": {},
+    "_default": "top"
+  },
+  "~horizontal": {
+    "~right": {},
+    "~center": {},
+    "~left": {},
+    "_default": "right"
+  }
+}