@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Actions/properties.json

@@ -0,0 +1,63 @@
+{
+  "#item": {},
+  "#list": {},
+  "#secondary": {},
+  "#spacer": {},
+  "~align": {
+    "~none": {},
+    "~center": {
+      "justify-content": "center",
+      "#secondary": {
+        "display": "none"
+      },
+      "#spacer": {
+        "display": "none"
+      }
+    },
+    "~left": {
+      "#secondary": {
+        "order": "8"
+      },
+      "#spacer": {
+        "order": "4"
+      }
+    },
+    "~right": {
+      "#list": {
+        "order": "8"
+      },
+      "#spacer": {
+        "order": "4"
+      }
+    },
+    "~block": {
+      "flex-direction": "column-reverse",
+      "align-items": "stretch",
+      "#secondary": {
+        "display": "none"
+      },
+      "#spacer": {
+        "display": "none"
+      }
+    },
+    "~auto": {
+      "link|center": "{??align.center}",
+      "#item": {
+        "flex-grow": "1",
+        "flex-shrink": "1",
+        "flex-basis": "auto"
+      }
+    },
+    "_default": "right"
+  },
+  "~flexible": {
+    "group|adaptive": {
+      "link|block": "{??align.block}",
+      "_type": "media-max-group"
+    },
+    "group|container": {
+      "link|block": "{??align.block}",
+      "_type": "container-max-group"
+    }
+  }
+}

package/src/constructors/Actions/props.ts

@@ -0,0 +1,42 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+import type { ButtonPropsBasic } from '../Button'
+
+interface ActionsPropsToken {
+  // :type [!] System label / Системная метка
+  align?: 'none' | 'center' | 'left' | 'right' | 'block' | 'auto'
+  flexible?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface ActionsPropsBasic<
+  Button extends ButtonPropsBasic = ButtonPropsBasic
+> {
+  // Value
+  list?: ConstrBind<Button>[]
+  listSecondary?: ConstrBind<Button>[]
+
+  // Style
+  buttonAttrs?: ConstrBind<Button>
+  buttonSecondaryAttrs?: ConstrBind<Button>
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ActionsProps extends ActionsPropsBasic, ActionsPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsActions = {
+  ...{
+    // :default [!] System label / Системная метка
+    align: 'right'
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Actions/style.scss

@@ -0,0 +1,11 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinActions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  &__spacer {
+    @include ui.flexDynamic;
+  }
+}

package/src/constructors/Actions/types.ts

@@ -0,0 +1,52 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { ButtonComponentInclude } from '../Button'
+import type { EventClickEmits } from '../../types/eventClickTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ActionsComponents = ButtonComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ActionsEmits = EventClickEmits
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ActionsExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ActionsSlots {
+  default?(props: any): any
+
+  secondary?(props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ActionsClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  item: string
+  list: string
+  secondary: string
+  spacer: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Anchor/Anchor.ts

@@ -0,0 +1,113 @@
+import { computed, onMounted, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { LabelInclude } from '../../classes/LabelInclude'
+import { TextInclude } from '../../classes/TextInclude'
+import { TooltipInclude } from '../Tooltip'
+
+import { AnchorHref } from './AnchorHref'
+import { AnchorTo } from './AnchorTo'
+import { AnchorEvent } from './AnchorEvent'
+import { AnchorIcon } from './AnchorIcon'
+
+import type { AnchorComponents, AnchorEmits, AnchorSlots } from './types'
+import type { AnchorProps } from './props'
+
+/**
+ * Anchor
+ */
+export class Anchor {
+  readonly label: LabelInclude
+  readonly text: TextInclude
+  readonly tooltip: TooltipInclude
+
+  readonly href: AnchorHref
+  readonly to: AnchorTo
+  readonly event: AnchorEvent
+  readonly icon: AnchorIcon
+
+  /**
+   * 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/ функция вызывается, когда срабатывает событие
+   * @param AnchorHrefConstructor class for working with href/ класс для работы с ссылкой
+   * @param AnchorToConstructor class for working with scroll/ класс для работы с прокруткой
+   * @param AnchorEventConstructor class for working with events/ класс для работы с событиями
+   * @param AnchorIconConstructor class for working with icons/ класс для работы с иконками
+   * @param LabelIncludeConstructor class for working with label/ класс для работы с меткой
+   * @param TextIncludeConstructor class for working with text/ класс для работы с текстом
+   * @param TooltipIncludeConstructor class for working with tooltip/ класс для работы с подсказкой
+   */
+  constructor(
+    protected readonly props: AnchorProps,
+    protected readonly refs: ToRefs<AnchorProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<AnchorComponents, AnchorProps>,
+    protected readonly slots?: AnchorSlots,
+    protected readonly emits?: ConstrEmit<AnchorEmits>,
+    protected readonly AnchorHrefConstructor: typeof AnchorHref = AnchorHref,
+    protected readonly AnchorToConstructor: typeof AnchorTo = AnchorTo,
+    protected readonly AnchorEventConstructor: typeof AnchorEvent = AnchorEvent,
+    protected readonly AnchorIconConstructor: typeof AnchorIcon = AnchorIcon,
+    protected readonly LabelIncludeConstructor: typeof LabelInclude = LabelInclude,
+    protected readonly TextIncludeConstructor: typeof TextInclude = TextInclude,
+    protected readonly TooltipIncludeConstructor: typeof TooltipInclude = TooltipInclude
+  ) {
+    this.label = new LabelIncludeConstructor(props, className, undefined, slots)
+    this.text = new TextIncludeConstructor(this.props)
+    this.tooltip = new TooltipIncludeConstructor(
+      this.props,
+      this.className,
+      this.components,
+      computed(() => ({
+        description: this.text.copiedClipboard.value
+      }))
+    )
+
+    this.href = new AnchorHrefConstructor(this.props)
+    this.to = new AnchorToConstructor(
+      this.props,
+      this.element,
+      this.href
+    )
+    this.event = new AnchorEventConstructor(
+      this.props,
+      this.tooltip,
+      this.href,
+      this.to
+    )
+    this.icon = new AnchorIconConstructor(this.props, this.event)
+
+    onMounted(() => {
+      requestAnimationFrame(this.goIsFocus)
+    })
+  }
+
+  /** Is hide anchor/ Скрыть якорь */
+  readonly isHide = computed<boolean>(() => {
+    return this.props.hide
+      || (
+        !this.label.is.value
+        && !this.props.isCopy
+      )
+  })
+
+  /**
+   * Go if focus on anchor
+   *
+   * Перейти, если фокус на якоре
+   */
+  protected readonly goIsFocus = (): void => {
+    if (location.hash === this.href.get()) {
+      this.to.go()
+    }
+  }
+}

package/src/constructors/Anchor/AnchorDesign.tsx

@@ -0,0 +1,242 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+import { getClassTagAStatic } from '../../functions/getClassTagAStatic'
+
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
+import { Anchor } from './Anchor'
+
+import type { TooltipControl } from '../Tooltip'
+import {
+  type AnchorPropsBasic
+} from './props'
+import {
+  type AnchorClasses,
+  type AnchorComponents,
+  type AnchorEmits,
+  type AnchorExpose,
+  type AnchorSlots
+} from './types'
+
+/**
+ * AnchorDesign
+ */
+export class AnchorDesign<
+  COMP extends AnchorComponents,
+  EXPOSE extends AnchorExpose,
+  CLASSES extends AnchorClasses,
+  P extends AnchorPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    AnchorEmits,
+    EXPOSE,
+    AnchorSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Anchor
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   * @param ItemConstructor class for working with the anchor/ класс для работы с якорем
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, AnchorEmits, P>,
+    ItemConstructor: typeof Anchor = Anchor
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new ItemConstructor(
+      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: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode[] | undefined {
+    if (this.item.href.is()) {
+      if (this.item.isHide.value) {
+        return this.renderItemHide()
+      }
+
+      if (this.props.isCopy) {
+        return this.renderTooltip()
+      }
+
+      return this.renderItem()
+    }
+
+    return undefined
+  }
+
+  /**
+   * Rendering the tooltip.
+   *
+   * Рендеринг подсказки.
+   */
+  readonly renderTooltip = (): VNode[] => {
+    return this.item.tooltip.render(
+      {
+        control: (props: TooltipControl): VNode[] => this.renderItem(props)
+      }
+    )
+  }
+
+  /**
+   * Rendering the main item.
+   *
+   * Рендеринг основного элемента.
+   * @param props additional properties/ дополнительные свойства
+   */
+  readonly renderItem = (
+    props?: TooltipControl
+  ): VNode[] => {
+    const classes = [
+      this.classes?.value.main,
+      getClassTagAStatic(this.getDesign())
+    ]
+
+    if (props) {
+      classes.push(props.class)
+    }
+
+    return [
+      h('a', {
+        ...this.getMainProps(),
+        class: classes
+      }, this.renderChildren())
+    ]
+  }
+
+  /**
+   * Rendering the hidden item.
+   *
+   * Рендеринг скрытого элемента.
+   */
+  readonly renderItemHide = (): VNode[] => {
+    return [
+      h('a', {
+        ...this.getAttrs(),
+        key: 'main-hide',
+        name: this.props.name
+      })
+    ]
+  }
+
+  /**
+   * Rendering an icon if it is set.
+   *
+   * Рендеринг иконки, если она задана.
+   */
+  readonly renderIcon = (): VNode[] => {
+    if (this.item.icon.is()) {
+      return this.components.render(
+        'icon',
+        this.item.icon.binds.value
+      )
+    }
+
+    return []
+  }
+
+  /**
+   * Rendering children elements.
+   *
+   * Рендеринг дочерних элементов.
+   */
+  readonly renderChildren = (): VNode[] => {
+    const children: VNode[] = []
+
+    if (!this.props.hide) {
+      children.push(
+        ...this.renderIcon(),
+        ...this.item.label.render()
+      )
+    }
+
+    return children
+  }
+
+  /**
+   * Get main element properties.
+   *
+   * Получить свойства основного элемента.
+   */
+  protected getMainProps(): Record<string, any> {
+    const props: Record<string, any> = {
+      ...this.getAttrs(),
+      ref: this.element,
+      key: 'main',
+      name: this.props.name,
+      onClick: this.item.event.onClick,
+      tabindex: 0
+    }
+
+    if (!this.props.isCopy) {
+      Object.assign(props, {
+        href: this.item.href.get(),
+        ...AriaStaticInclude.current('page')
+      })
+    }
+
+    return props
+  }
+}

package/src/constructors/Anchor/AnchorEvent.ts

@@ -0,0 +1,76 @@
+import { ref } from 'vue'
+import { writeClipboardData } from '@dxtmisha/functional'
+
+import { TooltipInclude } from '../Tooltip'
+import { AnchorHref } from './AnchorHref'
+import { AnchorTo } from './AnchorTo'
+
+import type { AnchorProps } from './props'
+
+/**
+ * Anchor event handler
+ *
+ * Обработчик событий Anchor
+ */
+export class AnchorEvent {
+  readonly copy = ref<boolean>()
+
+  protected timeout: any
+
+  /**
+   * Constructor
+   * @param props input data / входные данные
+   * @param tooltip tooltip / подсказка
+   * @param href href handler / обработчик ссылки
+   * @param to scroll handler / обработчик прокрутки
+   */
+  constructor(
+    protected readonly props: AnchorProps,
+    protected readonly tooltip: TooltipInclude,
+    protected readonly href: AnchorHref,
+    protected readonly to?: AnchorTo
+  ) {
+  }
+
+  /**
+   * Is copy state
+   *
+   * Является ли состоянием копирования
+   */
+  isCopy(): boolean {
+    return Boolean(this.copy.value)
+  }
+
+  /**
+   * On click handler
+   *
+   * Обработчик нажатия
+   */
+  readonly onClick = (event: MouseEvent): void => {
+    event.preventDefault()
+
+    if (this.props.isCopy) {
+      writeClipboardData(this.href.getLink())
+        .then(() => this.toCopy())
+    } else {
+      this.to?.go()
+    }
+  }
+
+  /**
+   * Trigger copy state
+   *
+   * Запустить состояние копирования
+   */
+  protected toCopy() {
+    clearTimeout(this.timeout)
+
+    this.copy.value = true
+    this.tooltip.open()
+
+    this.timeout = setTimeout(() => {
+      this.copy.value = false
+      this.tooltip.close()
+    }, this.props.delayHide ?? 1024)
+  }
+}

package/src/constructors/Anchor/AnchorHref.ts

@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+import type { AnchorProps } from './props'
+
+/**
+ * Anchor href attribute handler
+ *
+ * Обработчик атрибута href якоря
+ */
+export class AnchorHref {
+  /**
+   * Constructor
+   * @param props input data / входные данные
+   */
+  constructor(
+    protected readonly props: AnchorProps
+  ) {
+  }
+
+  /** Computed href attribute/ Вычисляемый атрибут href */
+  readonly href = computed<string | undefined>(() => {
+    if (this.props.name) {
+      return `#${this.props.name}`
+    }
+
+    return undefined
+  })
+
+  /**
+   * Check if href exists
+   *
+   * Проверить, существует ли href
+   */
+  is() {
+    return Boolean(this.href.value)
+  }
+
+  /**
+   * Get href value
+   *
+   * Получить значение href
+   */
+  get(): string | undefined {
+    return this.href.value
+  }
+
+  /**
+   * Get full link
+   *
+   * Получить полную ссылку
+   */
+  getLink() {
+    return `${location.origin}${location.pathname}${this.href.value}`
+  }
+}

package/src/constructors/Anchor/AnchorIcon.ts

@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+import type { AnchorProps } from './props'
+import type { ConstrBind } from '@dxtmisha/functional'
+import type { IconProps } from '../Icon'
+import { AnchorEvent } from './AnchorEvent.ts'
+
+/**
+ * Class for working with the anchor icon
+ *
+ * Класс для работы с иконкой якоря
+ */
+export class AnchorIcon {
+  /**
+   * Constructor
+   * @param props input data / входные данные
+   * @param event event handler / обработчик событий
+   */
+  constructor(
+    protected readonly props: AnchorProps,
+    protected readonly event: AnchorEvent
+  ) {
+  }
+
+  /** Icon to display/ Иконка для отображения */
+  readonly icon = computed<string | undefined>(() => {
+    if (this.props.hide) {
+      return undefined
+    }
+
+    if (this.props.isCopy) {
+      return this.props.iconTag
+    }
+
+    return this.props.iconLink
+  })
+
+  /** Binds for the icon/ Привязки для иконки */
+  readonly binds = computed<ConstrBind<IconProps>>(() => {
+    return {
+      icon: this.icon.value,
+      iconActive: this.props.iconContentCopy,
+      active: this.event.isCopy()
+    }
+  })
+
+  /**
+   * Check if the icon is set
+   *
+   * Проверяет, установлена ли иконка
+   */
+  is(): boolean {
+    return Boolean(this.icon.value)
+  }
+}