@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/ChipGroup/ChipGroupDesign.tsx

@@ -0,0 +1,162 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract,
+  forEach,
+  toBinds
+} from '@dxtmisha/functional'
+
+import { ChipGroup } from './ChipGroup'
+
+import type { ChipGroupItem } from './basicTypes'
+import {
+  type ChipGroupPropsBasic
+} from './props'
+import {
+  type ChipGroupClasses,
+  type ChipGroupComponents,
+  type ChipGroupEmits,
+  type ChipGroupExpose,
+  type ChipGroupSlots
+} from './types'
+
+/**
+ * ChipGroupDesign
+ */
+export class ChipGroupDesign<
+  COMP extends ChipGroupComponents,
+  EXPOSE extends ChipGroupExpose,
+  CLASSES extends ChipGroupClasses,
+  P extends ChipGroupPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    ChipGroupEmits,
+    EXPOSE,
+    ChipGroupSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: ChipGroup
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, ChipGroupEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new ChipGroup(
+      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 / Системная метка
+        item: this.getSubClass('item')
+        // :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[] = this.renderList()
+
+    this.initSlot('default', children)
+
+    return h(
+      'div',
+      {
+        ...this.getAttrs(),
+        class: this.classes?.value.main
+      },
+      children
+    )
+  }
+
+  /**
+   * List rendering.
+   *
+   * Рендеринг списка.
+   */
+  protected readonly renderList = (): VNode[] => {
+    return forEach(
+      this.item.getList(),
+      item => this.renderItem(item)
+    ) as VNode[]
+  }
+
+  /**
+   * Element rendering.
+   *
+   * Рендеринг элемента.
+   * @param item selected element/ выбранный элемент
+   */
+  protected readonly renderItem = (item: ChipGroupItem): VNode | undefined => {
+    return this.components.renderOne(
+      'chip',
+      toBinds(
+        {
+          class: this.classes?.value.item,
+          iconHide: this.props.iconWhenSelected && !item.selected,
+          onClick: this.item.model.onClick
+        },
+        this.props.chipAttrs,
+        item
+      ),
+      undefined,
+      item.index
+    )
+  }
+}

package/src/constructors/ChipGroup/basicTypes.ts

@@ -0,0 +1,6 @@
+import type { ConstrBind, ListListInput } from '@dxtmisha/functional'
+import type { ChipPropsBasic } from '../Chip'
+
+export type ChipGroupData<Chip extends ChipPropsBasic = ChipPropsBasic> = ListListInput<Chip>
+export type ChipGroupItem<Chip extends ChipPropsBasic = ChipPropsBasic> = ConstrBind<Chip>
+export type ChipGroupList<Chip extends ChipPropsBasic = ChipPropsBasic> = ChipGroupItem<Chip>[]

package/src/constructors/ChipGroup/index.ts

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

package/src/constructors/ChipGroup/properties.json

@@ -0,0 +1,3 @@
+{
+  "#item": {}
+}

package/src/constructors/ChipGroup/props.ts

@@ -0,0 +1,50 @@
+import type { ConstrBind, ListSelectedList } from '@dxtmisha/functional'
+
+import type { ChipPropsBasic } from '../Chip'
+import type { ChipGroupData } from './basicTypes'
+import type { ModelPropsSelected } from '../../types/modelTypes'
+
+interface ChipGroupPropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface ChipGroupPropsBasic<
+  Chip extends ChipPropsBasic = ChipPropsBasic
+> extends ModelPropsSelected<ListSelectedList> {
+  // Status
+  readonly?: boolean
+  selected?: ListSelectedList
+
+  // Values
+  list?: ChipGroupData
+
+  // Styles
+  iconWhenSelected?: boolean
+
+  keyLabel?: string
+  keyValue?: string
+
+  chipAttrs?: ConstrBind<Chip>
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ChipGroupProps extends ChipGroupPropsBasic, ChipGroupPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsChipGroup = {
+  readonly: true,
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/ChipGroup/style.scss

@@ -0,0 +1,6 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinChipGroup {
+  display: flex;
+  flex-wrap: wrap;
+}

package/src/constructors/ChipGroup/types.ts

@@ -0,0 +1,47 @@
+import type { ConstrClass, ListSelectedList } from '@dxtmisha/functional'
+import type { ChipComponentInclude } from '../Chip'
+import type { EventClickEmits } from '../../types/eventClickTypes'
+import type { ModelEmitsSelected } from '../../types/modelTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ChipGroupComponents = ChipComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ChipGroupEmits = EventClickEmits & ModelEmitsSelected<ListSelectedList>
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ChipGroupExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ChipGroupSlots {
+  default?(props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ChipGroupClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  item: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Dialog/Dialog.ts

@@ -0,0 +1,145 @@
+import { computed, readonly, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp, getBind } from '@dxtmisha/functional'
+
+import { IconInclude } from '../Icon'
+import { LabelInclude } from '../../classes/LabelInclude'
+import { DescriptionInclude } from '../../classes/DescriptionInclude'
+import { TextInclude } from '../../classes/TextInclude'
+import { WindowClassesInclude } from '../Window'
+
+import { ModalAbstract } from '../Modal/ModalAbstract'
+
+import type { DialogComponents, DialogEmits, DialogSlots } from './types'
+import type { DialogProps } from './props'
+
+/**
+ * Dialog
+ */
+export class Dialog extends ModalAbstract {
+  readonly icon: IconInclude
+  readonly label: LabelInclude
+  readonly description: DescriptionInclude
+
+  readonly windowClasses: WindowClassesInclude
+
+  readonly text: TextInclude
+
+  /**
+   * 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: DialogProps,
+    protected readonly refs: ToRefs<DialogProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<DialogComponents, DialogProps>,
+    protected readonly slots?: DialogSlots,
+    protected readonly emits?: ConstrEmit<DialogEmits>
+  ) {
+    super(
+      props,
+      refs,
+      element,
+      classDesign,
+      className,
+      components,
+      slots,
+      emits,
+      computed(() => ({
+        open: props.open,
+        image: props.image,
+
+        adaptive: 'modal',
+        imagePosition: props.imagePosition,
+        closeButton: this.props.closeButton
+      })),
+      undefined,
+      computed(() => {
+        const list = []
+
+        if (props.buttonClose !== null) {
+          list.push(
+            getBind(
+              props.buttonClose,
+              {
+                label: this.text.close.value,
+                value: 'close',
+                class: this.windowClasses.get().close,
+                onClick: () => this.emits?.('close')
+              },
+              'label',
+              true
+            )
+          )
+        }
+
+        if (props.buttonOk !== null) {
+          list.push(
+            getBind(
+              props.buttonOk,
+              {
+                label: this.text.ok.value,
+                value: 'ok',
+                class: this.props.clickOkAndClose ? this.windowClasses.get().close : undefined,
+                onClick: () => this.emits?.('ok')
+              },
+              'label',
+              true
+            )
+          )
+        }
+
+        return {
+          list,
+          align: 'center'
+        }
+      })
+    )
+
+    this.icon = new IconInclude(
+      readonly<any>({ icon: this.iconValue }),
+      className,
+      components,
+      refs.iconAttrs
+    )
+    this.label = new LabelInclude(
+      props,
+      className,
+      undefined,
+      slots,
+      undefined,
+      undefined,
+      true
+    )
+    this.description = new DescriptionInclude(props, className, slots)
+
+    this.windowClasses = new WindowClassesInclude(classDesign)
+    this.text = new TextInclude(this.props)
+  }
+
+  /**
+   * Returns the icon for display.
+   *
+   * Возвращает иконку для отображения.
+   */
+  protected readonly iconValue = computed(() => {
+    if (this.props.success) {
+      return this.props.iconSuccess
+    }
+
+    if (this.props.error) {
+      return this.props.iconError
+    }
+
+    return this.props.icon
+  })
+}

package/src/constructors/Dialog/DialogDesign.tsx

@@ -0,0 +1,135 @@
+import { h, type VNode } from 'vue'
+import {
+  toBinds
+} from '@dxtmisha/functional'
+
+import { Dialog } from './Dialog'
+import { ModalDesignAbstract } from '../Modal/ModalDesignAbstract'
+
+import type { WindowControlItem } from '../Window'
+import {
+  type DialogPropsBasic
+} from './props'
+import {
+  type DialogClasses,
+  type DialogComponents,
+  type DialogEmits,
+  type DialogExpose,
+  type DialogSlots
+} from './types'
+
+/**
+ * DialogDesign
+ */
+export class DialogDesign<
+  COMP extends DialogComponents,
+  EXPOSE extends DialogExpose,
+  CLASSES extends DialogClasses,
+  P extends DialogPropsBasic
+> extends ModalDesignAbstract<
+    COMP,
+    DialogEmits,
+    EXPOSE,
+    DialogSlots,
+    CLASSES,
+    P,
+    Dialog
+  > {
+  /**
+   * A method for creating an instance of the class.
+   *
+   * Метод для создания экземпляра класса.
+   */
+  protected initItem(): Dialog {
+    return new Dialog(
+      this.props,
+      this.refs,
+      this.element,
+      this.getDesign(),
+      this.getName(),
+      this.components,
+      this.slots,
+      this.emits
+    )
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        title: this.getSubClass('title'),
+        header: this.getSubClass('header'),
+        information: this.getSubClass('information'),
+        icon: this.getSubClass('icon'),
+        label: this.getSubClass('label'),
+        description: this.getSubClass('description'),
+        body: this.getSubClass('body'),
+        footer: this.getSubClass('footer')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode[] {
+    return this.item.window.render(
+      {
+        control: this.renderControl,
+        title: this.renderTitle,
+        default: this.renderContent,
+        footer: this.renderFooter
+      },
+      toBinds(
+        {
+          'class': this.classes?.value.main,
+          'data-touch': 'touch'
+        },
+        this.getAttrs()
+      )
+    )
+  }
+
+  /**
+   * Render for the body layer.
+   *
+   * Рендер для слоя тела.
+   * @param props data for window management/ данные для управления окном
+   */
+  protected readonly renderContent = (
+    props: WindowControlItem
+  ): VNode[] => {
+    return [
+      ...this.renderInformation(),
+      ...this.renderDefault(props)
+    ]
+  }
+
+  /**
+   * Render information block.
+   *
+   * Рендер информационного блока.
+   */
+  protected readonly renderInformation = (): VNode[] => {
+    return [
+      h(
+        'div',
+        { class: this.classes?.value.information },
+        [
+          ...this.item.icon.renderIcon(),
+          ...this.item.label.render(),
+          ...this.item.description.render()
+        ]
+      )
+    ]
+  }
+}

package/src/constructors/Dialog/index.ts

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

package/src/constructors/Dialog/properties.json

@@ -0,0 +1,23 @@
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "#title": {},
+  "#header": {},
+  "#information": {},
+  "#icon": {},
+  "#label": {},
+  "#description": {},
+  "#body": {},
+  "#footer": {},
+  "~success": {},
+  "~error": {},
+  "~imagePosition": {
+    "~top": {},
+    "~left": {},
+    "_default": "top"
+  }
+}

package/src/constructors/Dialog/props.ts

@@ -0,0 +1,76 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { WindowPropsBasic, WindowPropsInclude } from '../Window'
+import type { BarsPropsBasic, BarsPropsInclude } from '../Bars'
+import type { IconPropsBasic, IconValue } from '../Icon'
+import type { ImagePropsBasic, ImagePropsInclude } from '../Image'
+import type { ButtonPropsBasic } from '../Button'
+import type { ActionsPropsBasic, ActionsPropsInclude } from '../Actions'
+import type { LabelProps } from '../../types/labelTypes'
+import type { DescriptionProps } from '../../types/descriptionTypes'
+import type { TextClosePropsInclude, TextOkPropsInclude } from '../../types/textTypes'
+
+interface DialogPropsToken {
+  // :type [!] System label / Системная метка
+  success?: boolean
+  error?: boolean
+  imagePosition?: 'top' | 'left'
+  // :type [!] System label / Системная метка
+}
+
+export interface DialogPropsBasic<
+  Window extends WindowPropsBasic = WindowPropsBasic,
+  Bars extends BarsPropsBasic = BarsPropsBasic,
+  Icon extends IconPropsBasic = IconPropsBasic,
+  Image extends ImagePropsBasic = ImagePropsBasic,
+  Button extends ButtonPropsBasic = ButtonPropsBasic,
+  Actions extends ActionsPropsBasic = ActionsPropsBasic
+> extends WindowPropsInclude<Window>,
+  BarsPropsInclude<Bars>,
+  ActionsPropsInclude<Actions>,
+  ImagePropsInclude<Image>,
+  LabelProps,
+  DescriptionProps,
+  TextClosePropsInclude,
+  TextOkPropsInclude {
+  // Status
+  open?: boolean
+
+  // Style
+  icon?: IconValue<Icon>
+
+  buttonOk?: string | ConstrBind<Button> | null
+  buttonClose?: string | ConstrBind<Button> | null
+
+  closeButton?: boolean
+  clickOkAndClose?: boolean
+
+  iconSuccess?: IconValue<Icon>
+  iconError?: IconValue<Icon>
+
+  iconAttrs?: ConstrBind<Icon>
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface DialogProps extends DialogPropsBasic, DialogPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsDialog = {
+  barsBackHide: true,
+  barsHide: true,
+  clickOkAndClose: true,
+  ...{
+    // :default [!] System label / Системная метка
+    imagePosition: 'top'
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Dialog/style.scss

@@ -0,0 +1,18 @@
+@use "@dxtmisha/styles/properties" as ui;
+@use "../Modal/style" as modal;
+
+@mixin mixinDialog {
+  @include modal.mixinModal;
+
+  &__information {
+    @include ui.flexY;
+    @include ui.paddingX(ui.v('??paddingX'));
+    @include ui.paddingY(ui.v('??paddingY'));
+
+    text-align: center;
+  }
+
+  &__footer {
+    justify-content: center;
+  }
+}