@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/SelectValue/SelectValueDesign.tsx

@@ -0,0 +1,198 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract, toBinds
+} from '@dxtmisha/functional'
+
+import { SelectValue } from './SelectValue'
+
+import type { ChipGroupItem } from '../ChipGroup'
+import {
+  type SelectValuePropsBasic
+} from './props'
+import {
+  type SelectValueClasses,
+  type SelectValueComponents,
+  type SelectValueEmits,
+  type SelectValueExpose,
+  type SelectValueSlots
+} from './types'
+
+/**
+ * SelectValueDesign
+ */
+export class SelectValueDesign<
+  COMP extends SelectValueComponents,
+  EXPOSE extends SelectValueExpose,
+  CLASSES extends SelectValueClasses,
+  P extends SelectValuePropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    SelectValueEmits,
+    EXPOSE,
+    SelectValueSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: SelectValue
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, SelectValueEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new SelectValue(
+      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 / Системная метка
+        item: this.getSubClass('item'),
+        trailing: this.getSubClass('trailing')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode {
+    return h(
+      'div',
+      {
+        ...this.getAttrs(),
+        class: this.classes?.value.main
+      },
+      this.renderData()
+    )
+  }
+
+  /**
+   * Rendering data.
+   *
+   * Рендеринг данных.
+   */
+  protected readonly renderData = (): (VNode | string)[] => {
+    if (this.item.isPlaceholder.value) {
+      return [String(this.props.placeholder)]
+    }
+
+    if (this.props.value) {
+      if (this.props.multiple) {
+        return this.renderList()
+      }
+
+      const label = this.props.value[0]?.label
+        ?? this.props.value[0]?.value
+
+      if (label) {
+        return [String(label)]
+      }
+    }
+
+    return []
+  }
+
+  /**
+   * List rendering.
+   *
+   * Рендеринг списка.
+   */
+  protected readonly renderList = (): VNode[] => {
+    const children: any[] = []
+
+    this.props.value?.forEach((item) => {
+      const chip = this.renderItem(item)
+
+      if (chip) {
+        children.push(chip)
+      } else {
+        children.push(item.label)
+      }
+    })
+
+    return children
+  }
+
+  /**
+   * Element rendering.
+   *
+   * Рендеринг элемента.
+   * @param item selected element/ выбранный элемент
+   */
+  protected readonly renderItem = (item: ChipGroupItem): VNode | undefined => {
+    return this.components.renderOne(
+      'chip',
+      toBinds(
+        this.props.chipAttrs,
+        {
+          'class': this.classes?.value.item,
+          'icon': this.props.iconShow && item.icon ? item.icon : undefined,
+          'iconTrailing': this.item.iconTrailing.value,
+          'label': item.label,
+          'data-value': item.index,
+          'readonly': true,
+          'disabled': this.props.disabled,
+          'value': item.value,
+          'detail': item.detail,
+          'onClick': this.item.onClick
+        }
+      ),
+      undefined,
+      item.index
+    )
+  }
+}

package/src/constructors/SelectValue/SelectValueInclude.ts

@@ -0,0 +1,92 @@
+import { computed, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  DesignComponents,
+  getRef,
+  type RefOrNormal,
+  toBind,
+  toBinds
+} from '@dxtmisha/functional'
+
+import type { SelectValueComponentInclude, SelectValuePropsInclude } from './basicTypes'
+import type { SelectValueProps } from './props'
+
+/**
+ * SelectValueInclude class provides functionality for conditionally rendering selectValue components
+ * within other components. It manages the logic for determining when to display selectValue
+ * and configures the appropriate properties.
+ *
+ * Класс SelectValueInclude предоставляет функциональность для условного рендеринга компонентов
+ * selectValue внутри других компонентов. Он управляет логикой определения необходимости
+ * отображения selectValue и настраивает соответствующие свойства.
+ */
+export class SelectValueInclude<
+  Props extends SelectValuePropsInclude = SelectValuePropsInclude,
+  PropsExtra extends ConstrBind<SelectValueProps> = ConstrBind<SelectValueProps>
+> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
+   * @param index index identifier/ идентификатор индекса
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<SelectValueComponentInclude, Props>,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+  }
+
+  /**
+   * Checks whether selectValue should be displayed/
+   * Проверяет, нужно ли отображать selectValue
+   */
+  readonly is = computed(() => Boolean(!this.props.disabled && this.components))
+
+  /** Computed bindings for the selectValue/ Вычисляемые привязки для selectValue */
+  readonly binds = computed<PropsExtra>(() => {
+    const props = toBinds<PropsExtra>(
+      getRef(this.extra),
+      this.props.selectValueAttrs,
+      {
+        class: `${this.className}__select-value`
+      }
+    )
+
+    return {
+      ...props,
+      disabled: this.props.disabled
+    }
+  })
+
+  /**
+   * Render the SelectValue component
+   *
+   * Рендер компонента selectValue
+   * @param attrs additional attributes/ дополнительные атрибуты
+   * @returns VNode array/ массив VNode
+   */
+  readonly render = (
+    attrs?: Record<string, any>
+  ): VNode[] => {
+    if (
+      this.components
+      && this.is.value
+    ) {
+      return this.components.render(
+        'selectValue',
+        toBind(
+          attrs ?? {},
+          this.binds.value
+        ),
+        this.index
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/SelectValue/basicTypes.ts

@@ -0,0 +1,17 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { SelectValueProps } from './props'
+
+/**
+ * Type describing selectValue component inclusion/
+ * Тип, описывающий включение компонента selectValue
+ */
+export type SelectValueComponentInclude = {
+  selectValue?: object
+}
+
+/** Interface for selectValue include props/ Интерфейс для свойств включения selectValue */
+export interface SelectValuePropsInclude {
+  disabled?: boolean
+  selectValueAttrs?: ConstrBind<SelectValueProps>
+}

package/src/constructors/SelectValue/index.ts

@@ -0,0 +1,6 @@
+export * from './SelectValue'
+export * from './SelectValueDesign'
+export * from './SelectValueInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/SelectValue/properties.json

@@ -0,0 +1,7 @@
+{
+  "#item": {},
+  "#trailing": {},
+  "~placeholder": {
+    "_prop": false
+  }
+}

package/src/constructors/SelectValue/props.ts

@@ -0,0 +1,48 @@
+import type { ConstrBind, ListList } from '@dxtmisha/functional'
+
+import type { IconPropsBasic, IconValue } from '../Icon'
+import type { ChipPropsBasic, ChipPropsInclude } from '../Chip'
+
+import type { EnabledProps } from '../../types/enabledTypes'
+
+interface SelectValuePropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface SelectValuePropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic,
+  Chip extends ChipPropsBasic = ChipPropsBasic
+> extends EnabledProps, ChipPropsInclude<Chip> {
+  // Value
+  placeholder?: string
+  value?: ListList
+
+  // Style
+  multiple?: boolean
+
+  iconShow?: boolean
+  iconAttrs?: ConstrBind<Icon>
+
+  iconCancel?: IconValue<Icon>
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface SelectValueProps extends SelectValuePropsBasic, SelectValuePropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsSelectValue = {
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/SelectValue/style.scss

@@ -0,0 +1,14 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinSelectValue {
+  @include ui.truncate;
+
+  &--multiple {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &--placeholder {
+    @include ui.textSelectNone;
+  }
+}

package/src/constructors/SelectValue/types.ts

@@ -0,0 +1,47 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { ChipComponentInclude } from '../Chip'
+
+import type { EventClickEmits } from '../../types/eventClickTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type SelectValueComponents = ChipComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type SelectValueEmits = EventClickEmits
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface SelectValueExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface SelectValueSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type SelectValueClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  item: string
+  trailing: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Skeleton/Skeleton.ts

@@ -42,9 +42,7 @@ export class Skeleton {
     this.status = inject<ComputedRef<boolean> | undefined>(SKELETON_NAME_STATUS, undefined)
     this.classes = Skeleton.getClassesList(this.className)
 
-    if (!this.status) {
-      provide(SKELETON_NAME_STATUS, this.isActive)
-    }
+    provide(SKELETON_NAME_STATUS, this.isActive)
   }
 
   /**

package/src/constructors/Skeleton/SkeletonDesign.tsx

@@ -5,6 +5,7 @@ import {
   DesignConstructorAbstract
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { Skeleton } from './Skeleton'
 
 import {
@@ -111,7 +112,12 @@ export class SkeletonDesign<
     return h('div', {
       ...this.getAttrs(),
       ref: this.element,
-      class: this.classes?.value.main
+      class: this.classes?.value.main,
+      ...AriaStaticInclude.busy(this.item.isActive.value),
+      ...AriaStaticInclude.hidden(this.item.isActive.value),
+      ...AriaStaticInclude.live(
+        this.item.isActive.value ? 'polite' : 'off'
+      )
     }, children)
   }
 }

package/src/constructors/Skeleton/SkeletonInclude.ts

@@ -58,4 +58,9 @@ export class SkeletonInclude {
 
     return classes
   })
+
+  /** Values for the skeleton/ Значения для скелетона */
+  readonly binds = computed(() => ({
+    isSkeleton: this.props.isSkeleton
+  }))
 }

package/src/constructors/Skeleton/properties.json

@@ -1,24 +1,24 @@
-{
-  "color": {
-    "_type": "var"
-  },
-  "color-opacity": {
-    "_type": "var"
-  },
-  "background-color": {
-    "_type": "var"
-  },
-  "background-opacity": {
-    "_type": "var"
-  },
-  "border-color": {
-    "_type": "var"
-  },
-  "border-opacity": {
-    "_type": "var"
-  },
-  "opacity": {
-    "_type": "var"
-  },
-  "~active": {}
-}
+{
+  "color": {
+    "_type": "var"
+  },
+  "color-opacity": {
+    "_type": "var"
+  },
+  "background-color": {
+    "_type": "var"
+  },
+  "background-opacity": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "opacity": {
+    "_type": "var"
+  },
+  "~active": {}
+}

package/src/constructors/Skeleton/types.ts

@@ -41,6 +41,6 @@ export interface SkeletonSlots {
  */
 export type SkeletonClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
   // :classes [!] System label / Системная метка
 }

package/src/constructors/TextareaAutosize/TextareaAutosize.ts

@@ -0,0 +1,41 @@
+import type { Ref, ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { TextareaAutosizeValue } from './TextareaAutosizeValue'
+import { TextareaAutosizeResize } from './TextareaAutosizeResize'
+
+import type { TextareaAutosizeComponents, TextareaAutosizeEmits, TextareaAutosizeSlots } from './types'
+import type { TextareaAutosizeProps } from './props'
+
+/**
+ * TextareaAutosize
+ */
+export class TextareaAutosize {
+  readonly value: TextareaAutosizeValue
+  readonly resize: TextareaAutosizeResize
+
+  /**
+   * 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: TextareaAutosizeProps,
+    protected readonly refs: ToRefs<TextareaAutosizeProps>,
+    protected readonly element: Ref<HTMLTextAreaElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<TextareaAutosizeComponents, TextareaAutosizeProps>,
+    protected readonly slots?: TextareaAutosizeSlots,
+    protected readonly emits?: ConstrEmit<TextareaAutosizeEmits>
+  ) {
+    this.value = new TextareaAutosizeValue(props, refs, emits)
+    this.resize = new TextareaAutosizeResize(props, element, this.value)
+  }
+}