@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/ListItem/props.ts

@@ -2,6 +2,7 @@ import type { IconPropsBasic, IconTrailingPropsInclude } from '../Icon'
 import type { BadgePropsBasic, BadgePropsInclude } from '../Badge'
 import type { ProgressPropsBasic, ProgressPropsInclude } from '../Progress'
 import type { SkeletonPropsInclude } from '../Skeleton'
+import type { AriaRolePropsInclude } from '../../types/ariaTypes'
 
 import type { LabelHighlightProps } from '../../types/labelTypes'
 import type { DescriptionProps } from '../../types/descriptionTypes'
@@ -12,17 +13,17 @@ import type { EnabledProps } from '../../types/enabledTypes'
 import type { EventClickProps } from '../../types/eventClickTypes'
 
 interface ListItemPropsToken {
-  // :type [!] System label / Системная метка
-  focus?: boolean
-  open?: boolean
-  selected?: boolean
-  selectedChild?: boolean
-  readonly?: boolean
-  disabled?: boolean
-  iconTop?: boolean
-  iconAlign?: 'center' | 'edge'
-  fill?: string | 'custom'
-  divider?: boolean
+  // :type [!] System label / Системная метка
+  focus?: boolean
+  open?: boolean
+  selected?: boolean
+  selectedChild?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  iconTop?: boolean
+  iconAlign?: 'center' | 'edge'
+  fill?: string | 'custom'
+  divider?: boolean
   // :type [!] System label / Системная метка
 }
 
@@ -40,19 +41,27 @@ export interface ListItemPropsBasic<
   ProgressPropsInclude<Progress>,
   SkeletonPropsInclude,
   EnabledProps,
-  EventClickProps {
+  EventClickProps,
+  AriaRolePropsInclude {
   // Value
   index?: any
+  href?: string
 
   // Style
   tag?: 'button' | 'a' | 'span' | 'div' | string
+  filterMode?: boolean
   divider?: boolean
 
+  tabindex?: number | string
+
   // Technical
   type?: string
   parent?: string
   listId?: number
   search?: string
+
+  isMenu?: boolean
+  isItemMenu?: boolean
 }
 
 /**
@@ -69,10 +78,10 @@ export interface ListItemProps extends ListItemPropsBasic, ListItemPropsToken {
  * Значение по умолчанию для свойства.
  */
 export const defaultsListItem = {
-  tag: 'div',
+  tabindex: '-1',
   ...{
-    // :default [!] System label / Системная метка
-    iconAlign: 'center'
+    // :default [!] System label / Системная метка
+    iconAlign: 'center'
     // :default [!] System label / Системная метка
   }
 }

package/src/constructors/ListItem/types.ts

@@ -62,17 +62,17 @@ export interface ListItemSlots extends LabelHighlightSlots,
  */
 export type ListItemClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  body: string
-  context: string
-  label: string
-  highlight: string
-  prefix: string
-  caption: string
-  description: string
-  icon: string
-  trailing: string
-  badge: string
-  input: string
+  // :classes [!] System label / Системная метка
+  body: string
+  context: string
+  label: string
+  highlight: string
+  prefix: string
+  caption: string
+  description: string
+  icon: string
+  trailing: string
+  badge: string
+  input: string
   // :classes [!] System label / Системная метка
 }

package/src/constructors/ListMenu/ListMenu.ts

@@ -45,7 +45,8 @@ export class ListMenu {
       computed(() => ({
         adaptive: 'menu',
         axis: this.props.axis,
-        onWindow: this.open.onOpen
+        onWindow: this.open.onOpen,
+        role: 'menu'
       }))
     )
   }

package/src/constructors/ListMenu/ListMenuDesign.tsx

@@ -89,9 +89,9 @@ export class ListMenuDesign<
     return {
       main: {},
       ...{
-        // :classes [!] System label / Системная метка
-        head: this.getSubClass('head'),
-        list: this.getSubClass('list')
+        // :classes [!] System label / Системная метка
+        head: this.getSubClass('head'),
+        list: this.getSubClass('list')
         // :classes [!] System label / Системная метка
       }
     } as Partial<CLASSES>

package/src/constructors/ListMenu/properties.json

@@ -1,19 +1,19 @@
-{
-  "border-width": {
-    "_type": "var"
-  },
-  "border-color": {
-    "_type": "var"
-  },
-  "border-opacity": {
-    "_type": "var"
-  },
-  "#head": {},
-  "#list": {},
-  "~open": {},
-  "~axis": {
-    "x": {},
-    "y": {}
-  },
-  "~divider": {}
-}
+{
+  "border-width": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "#head": {},
+  "#list": {},
+  "~open": {},
+  "~axis": {
+    "x": {},
+    "y": {}
+  },
+  "~divider": {}
+}

package/src/constructors/ListMenu/types.ts

@@ -47,8 +47,8 @@ export interface ListMenuSlots {
  */
 export type ListMenuClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  head: string
-  list: string
+  // :classes [!] System label / Системная метка
+  head: string
+  list: string
   // :classes [!] System label / Системная метка
 }

package/src/constructors/Mask/MaskDesign.tsx

@@ -2,9 +2,11 @@ import { h, type VNode } from 'vue'
 import {
   type ConstrOptions,
   type ConstrStyles,
-  DesignConstructorAbstract
+  DesignConstructorAbstract,
+  toBinds
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { Mask } from './Mask'
 
 import {
@@ -27,14 +29,14 @@ export class MaskDesign<
   CLASSES extends MaskClasses,
   P extends MaskPropsBasic
 > extends DesignConstructorAbstract<
-  HTMLInputElement,
-  COMP,
-  MaskEmits,
-  EXPOSE,
-  MaskSlots,
-  CLASSES,
-  P
-> {
+    HTMLInputElement,
+    COMP,
+    MaskEmits,
+    EXPOSE,
+    MaskSlots,
+    CLASSES,
+    P
+  > {
   protected readonly item: Mask
 
   /**
@@ -155,25 +157,27 @@ export class MaskDesign<
     return [
       h(
         'input',
-        {
-          ...this.props.inputAttrs,
-
-          ref: this.element,
-          class: this.classes?.value.input,
-
-          type: 'text',
-          value: this.item.basic.value,
-
-          onFocus: this.item.event.onFocus,
-          onBlur: this.item.event.onBlur,
-          onKeydown: this.item.event.onKeydown,
-          onKeyup: this.item.event.onKeyup,
-          onBeforeinput: this.item.event.onBeforeinput,
-          onInput: this.item.event.onInput,
-          onChange: this.item.event.onChange,
-          onPaste: this.item.event.onPaste,
-          onClick: this.item.event.onClick
-        }
+        toBinds(
+          this.props.inputAttrs,
+          {
+            ref: this.element,
+            class: this.classes?.value.input,
+
+            type: 'text',
+            value: this.item.basic.value,
+            placeholder: '',
+
+            onFocus: this.item.event.onFocus,
+            onBlur: this.item.event.onBlur,
+            onKeydown: this.item.event.onKeydown,
+            onKeyup: this.item.event.onKeyup,
+            onBeforeinput: this.item.event.onBeforeinput,
+            onInput: this.item.event.onInput,
+            onChange: this.item.event.onChange,
+            onPaste: this.item.event.onPaste,
+            onClick: this.item.event.onClick
+          }
+        )
       )
     ]
   }
@@ -208,6 +212,7 @@ export class MaskDesign<
         {
           'class': this.classes?.value.character,
           'data-length': '1',
+          ...AriaStaticInclude.hidden(),
           innerHTML
         },
         children

package/src/constructors/Mask/MaskEvent.ts

@@ -1,4 +1,4 @@
-import { eventStopPropagation, getClipboardData } from '@dxtmisha/functional'
+import { eventStopPropagation, getClipboardData, writeClipboardData } from '@dxtmisha/functional'
 
 import { MaskBuffer } from './MaskBuffer'
 import { MaskFocus } from './MaskFocus'
@@ -42,7 +42,8 @@ export class MaskEvent {
     protected readonly valueBasic: MaskValueBasic,
     protected readonly emit: MaskEmit,
     protected readonly data: MaskData
-  ) {}
+  ) {
+  }
 
   /**
    * Capture of the event in focus.
@@ -92,6 +93,16 @@ export class MaskEvent {
       .set('keydown', event)
       .go()
 
+    if (
+      this.isCut(event)
+      && this.isSelection(info)
+    ) {
+      this.data.pop(start, end)
+      writeClipboardData(
+        (event.target as HTMLInputElement).value.slice(start, end)
+      ).then()
+    }
+
     if (this.isMetaKey(event)) {
       return undefined
     }
@@ -262,6 +273,23 @@ export class MaskEvent {
     return event.metaKey || event.altKey || event.ctrlKey
   }
 
+  /**
+   * Was a cut operation performed.
+   *
+   * Была ли выполнена операция вырезания.
+   * @param event invoked event/ вызываемое событие
+   */
+  protected isCut(event: KeyboardEvent): boolean {
+    return event.type === 'cut'
+      || Boolean(
+        event.key.toLowerCase() === 'x'
+        && (
+          event.metaKey
+          || event.ctrlKey
+        )
+      )
+  }
+
   /**
    * Checks key value in the event.
    *
@@ -272,6 +300,17 @@ export class MaskEvent {
     return 'key' in event && event.key !== 'Unidentified'
   }
 
+  /**
+   * Was there a selection.
+   *
+   * Было ли выделение.
+   * @param info selection data/ данные выделения
+   */
+  protected isSelection(info: MaskEventSelection): boolean {
+    const { start, end } = info
+    return start > 0 || start !== end
+  }
+
   /**
    * Getting data about selection on the event element.
    *

package/src/constructors/Mask/MaskInclude.ts

@@ -0,0 +1,147 @@
+import { computed, type VNode, watch } from 'vue'
+import { type ConstrBind, DesignComponents, getBind, getRef, type RefOrNormal, toBind } from '@dxtmisha/functional'
+
+import { FieldValueInclude } from '../../classes/field/FieldValueInclude'
+import { FieldTypeInclude } from '../../classes/field/FieldTypeInclude'
+
+import type { FieldValueProps } from '../../types/fieldTypes'
+import type { MaskComponentInclude, MaskPropsInclude } from './basicTypes'
+import type { MaskProps } from './props'
+
+type MaskPropsFullInclude = MaskPropsInclude & FieldValueProps
+
+/**
+ * Mask management class.
+ *
+ * Класс управления маской.
+ */
+export class MaskInclude<
+  Props extends MaskPropsFullInclude = MaskPropsFullInclude,
+  PropsExtra extends ConstrBind<MaskProps> = ConstrBind<MaskProps>
+> {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param className class name/ название класса
+   * @param value object for working with values/ объект для работы со значениями
+   * @param valueDefault default value/ значение по умолчанию
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param type object for working with the input type/ объект для работы с типом ввода
+   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
+   * @param index index identifier/ идентификатор индекса
+   */
+  constructor(
+    protected readonly props: Props,
+    protected readonly className: string,
+    protected readonly value: FieldValueInclude,
+    protected readonly valueDefault?: RefOrNormal<any>,
+    protected readonly components?: DesignComponents<MaskComponentInclude, Props>,
+    protected readonly type?: FieldTypeInclude,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+    if (this.value) {
+      watch(this.is, (is: boolean) => {
+        if (!is) {
+          this.value.setFull(true)
+        }
+      })
+    }
+  }
+
+  /**
+   * Checks if the mask is active.
+   *
+   * Проверяет, активна ли маска.
+   */
+  readonly is = computed<boolean>(() => {
+    const type = this.type?.get()
+
+    return this.props.maskNone !== true
+      && Boolean(
+        this.props.mask
+        || (
+          type
+          && [
+            'number',
+            'number-format',
+            'currency',
+            'datetime',
+            'date',
+            'year-month',
+            'time',
+            'hour-minute'
+          ].indexOf(type) !== -1
+        )
+      )
+  })
+
+  /**
+   * Returns the basic properties for working with a mask.
+   *
+   * Возвращает базовые свойства для работы с маской.
+   */
+  readonly bindsStatic = computed<PropsExtra>(() => {
+    const props = toBind<PropsExtra>(
+      getRef(this.extra) ?? {},
+      this.props.maskAttrs ?? {}
+    )
+
+    return {
+      name: this.props.name,
+      valueDefault: getRef(this.valueDefault),
+      currency: this.props.currency,
+      currencyHide: this.props.currencyHide,
+      fraction: this.props.fraction,
+      type: this.type?.get(),
+      visible: this.props.maskVisible,
+
+      ...getBind(this.props.mask, props, 'mask') as PropsExtra
+    }
+  })
+
+  /**
+   * Returns all properties for working with the mask.
+   *
+   * Возвращает все свойства для работы с маской.
+   */
+  readonly binds = computed<ConstrBind<MaskProps>>(() => {
+    return {
+      ...this.bindsStatic.value,
+      value: (this.props.modelValue ?? this.props.value) as string
+    }
+  })
+
+  /**
+   * Returns the rendered mask component.
+   *
+   * Возвращает отрендеренный компонент маски.
+   * @param attrs additional attributes/ дополнительные атрибуты
+   */
+  readonly render = (attrs?: Record<string, any>): VNode[] => {
+    if (this.components) {
+      return this.components.render(
+        'mask',
+        {
+          ...toBind(
+            attrs ?? {},
+            this.binds.value
+          )
+        },
+        undefined,
+        this.index
+      )
+    }
+
+    return []
+  }
+
+  /**
+   * Checks if the mask is active.
+   *
+   * Проверяет, активна ли маска.
+   */
+  isActive() {
+    return this.is.value
+  }
+}

package/src/constructors/Mask/basicTypes.ts

@@ -1,5 +1,6 @@
-import type { GeoDate } from '@dxtmisha/functional'
+import type { ConstrBind, GeoDate } from '@dxtmisha/functional'
 import type { FieldPatternItemOrFunction, FieldValidationItem } from '../../types/fieldTypes'
+import type { MaskPropsBasic } from './props'
 
 export type MaskTypeItem = GeoDate
   | 'text'
@@ -45,5 +46,22 @@ export type MaskEventSelection = {
   length: number
 }
 
+export type MaskComponentInclude = {
+  mask?: object
+}
+
+export type MaskPropsInclude<
+  Mask extends MaskPropsBasic = MaskPropsBasic
+> = {
+  name?: string
+  mask?: string | ConstrBind<Mask>
+  maskVisible?: boolean
+  maskNone?: boolean
+  currency?: string
+  currencyHide?: boolean
+  fraction?: MaskFractionItem
+  maskAttrs?: ConstrBind<Mask>
+}
+
 export const MASK_CHAR_DELETE = '~'
 export const MASK_VIEW_DEFAULT = '_'

package/src/constructors/Mask/properties.json

@@ -1,29 +1,30 @@
-{
-  "color": {
-    "_type": "var"
-  },
-  "color-opacity": {
-    "_type": "var"
-  },
-  "caret-opacity": {
-    "_type": "var"
-  },
-  "#input": {},
-  "#character": {
-    "#item": {
-      "~placeholder": {}
-    }
-  },
-  "~visible": {
-    "_default": true
-  },
-  "~visiblePartly": {},
-  "~align": {
-    "~left": {},
-    "~right": {}
-  },
-  "~dir": {
-    "~ltr": {},
-    "~rtl": {}
-  }
-}
+{
+  "color": {
+    "_type": "var"
+  },
+  "color-opacity": {
+    "_type": "var"
+  },
+  "caret-opacity": {
+    "_type": "var"
+  },
+  "#input": {},
+  "#character": {
+    "#item": {
+      "~placeholder": {}
+    }
+  },
+  "~visible": {
+    "_default": true
+  },
+  "~visiblePartly": {},
+  "~align": {
+    "~center": {},
+    "~left": {},
+    "~right": {}
+  },
+  "~dir": {
+    "~ltr": {},
+    "~rtl": {}
+  }
+}

package/src/constructors/Mask/props.ts

@@ -11,7 +11,7 @@ interface MaskPropsToken {
   // :type [!] System label / Системная метка
   visible?: boolean
   visiblePartly?: boolean
-  align?: 'left' | 'right'
+  align?: 'center' | 'left' | 'right'
   dir?: 'ltr' | 'rtl'
   // :type [!] System label / Системная метка
 }

package/src/constructors/Mask/style.scss

@@ -42,7 +42,7 @@
   }
 
   &__character {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: ui.v('??sys.align.flex');
     opacity: ui.v('??sys.opacity.all');
@@ -92,9 +92,7 @@
     }
 
     &--center {
-      @include ui.subclass('input') {
-        text-align: center;
-      }
+      @include ui.initByCustom('sys.align', center);
 
       @include ui.subclass('character') {
         justify-content: center;

package/src/constructors/Mask/types.ts

@@ -63,9 +63,9 @@ export interface MaskSlots {
  */
 export type MaskClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  input: string
-  character: string
-  characterItem: string
+  // :classes [!] System label / Системная метка
+  input: string
+  character: string
+  characterItem: string
   // :classes [!] System label / Системная метка
 }