@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Image/style.scss

@@ -1,6 +1,10 @@
 @use "@dxtmisha/styles/properties" as ui;
 
 @mixin mixinImage {
+  @include ui.initByCustom('img.width', 100%);
+  @include ui.initByCustom('img.height', 100%);
+  @include ui.initByCustom('img.object.fit', cover);
+
   direction: ltr;
   @include ui.flexCenter;
   @include ui.absolute;
@@ -15,6 +19,29 @@
   transition-duration: ui.v('d.sys.transitionDuration.standard');
   transform: none;
 
+  @include ui.mediaPrefersReducedMotion {
+    transition-duration: 0ms;
+  }
+
+  img {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    margin: auto;
+
+    width: ui.v('??img.width');
+    height: ui.v('??img.height');
+    min-width: 100%;
+    min-height: 100%;
+
+    object-fit: ui.v('??img.object.fit');
+
+    --sys-transform-translateX: -50%;
+    --sys-transform-translateY: -50%;
+    @include ui.transformInit();
+    transform-origin: var(--sys-transform-originX) var(--sys-transform-originY);
+  }
+
   &--type {
     &--public {
       -webkit-mask-position: center;
@@ -47,9 +74,30 @@
         height: 100%;
       }
     }
+
+    &--flag-compressed {
+      > * {
+        @include ui.absolute;
+      }
+    }
+  }
+
+  &--size {
+    &--auto {
+      @include ui.initByCustom('img.object.fit', none);
+    }
+
+    &--contain {
+      @include ui.initByCustom('img.object.fit', contain);
+    }
+
+    &--cover {
+      @include ui.initByCustom('img.object.fit', cover);
+    }
   }
 
   &--adaptive {
+    @include ui.initByCustom('img.height', auto);
     background-size: 100%;
   }
 

package/src/constructors/Input/style.scss

@@ -0,0 +1,5 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinInput {
+
+}

package/src/constructors/List/style.scss

@@ -33,4 +33,18 @@
       }
     }
   }
+
+  &--highlightActive {
+    @include ui.subclass('space') {
+      display: none;
+    }
+
+    @include ui.subclass('line') {
+      display: none;
+    }
+
+    @include ui.subclass('subtitle') {
+      display: none;
+    }
+  }
 }

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/Modal/style.scss

@@ -0,0 +1,20 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinModal {
+  @include ui.initByCustomDesign('window.iconPaddingX', ui.v('??paddingX'));
+  @include ui.initByCustomDesign('window.iconPaddingY', ui.v('??paddingY'));
+
+  &__title,
+  &__header,
+  &__body,
+  &__footer {
+    @include ui.paddingX(ui.v('??paddingX'));
+    @include ui.paddingY(ui.v('??paddingY'));
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}

package/src/constructors/MotionTransform/style.scss

@@ -19,8 +19,9 @@
   background-color: transparent;
   box-shadow: none;
 
-  content: "--WINDOW--";
+  --sys-type-body: "--WINDOW--";
 
+  will-change: background-color, box-shadow, height, transform, scale;
   transition-property: background-color, box-shadow, height, transform, scale;
   transition-timing-function: ui.v('d.ref.transitionFunction.e40i80');
   transition-duration: ui.v('d.sys.transitionDuration.container.close');
@@ -29,18 +30,22 @@
     width: ui.v('??sys.context.width', auto);
     height: ui.v('??sys.context.height', auto);
 
-    content: "--ANIMATION--";
+    --sys-type-body: "--ANIMATION--";
   }
 
   &__head {
     opacity: 1;
+    will-change: inherit;
   }
 
   &__body {
+    display: flow-root block;
     position: absolute;
     top: 0;
     opacity: 0;
+    outline: none;
 
+    will-change: inherit;
     transition: opacity 67ms linear 50ms;
   }
 
@@ -82,10 +87,17 @@
     }
   }
 
+  &[data-open="none"][data-show="none"] {
+    @include ui.subclass('body') {
+      display: none;
+    }
+  }
+
   &[data-show="show"] {
     overflow-y: hidden;
 
     @include ui.subclass('head') {
+      overflow: hidden;
       transition: opacity 67ms linear 50ms, visibility 67ms linear 50ms;
 
       > * {
@@ -177,4 +189,14 @@
       bottom: 0;
     }
   }
+
+  @include ui.mediaPrefersReducedMotion {
+    &,
+    &__head,
+    &__body,
+    &__background {
+      transition-delay: 0.1ms !important;
+      transition-duration: 0.1ms !important;
+    }
+  }
 }

package/src/constructors/Page/style.scss

@@ -0,0 +1,6 @@
+@use "@dxtmisha/styles/properties" as ui;
+@use "../Block/style" as block;
+
+@mixin mixinPage {
+  @include block.mixinBlock;
+}

package/src/constructors/Progress/style.scss

@@ -64,7 +64,7 @@
 
     @include ui.subclass('circle') {
       animation-name: none !important;
-      stroke-dasharray: calc(#{ui.v('??sys.value')} * #{ui.v('??circular.dasharray')}) #{ui.v('??circular.length')} !important;
+      stroke-dasharray: calc(#{ui.v('??sys.value', '0%')} * #{ui.v('??circular.dasharray')}) #{ui.v('??circular.length')} !important;
       stroke-linecap: butt;
     }
   }
@@ -107,7 +107,7 @@
       }
 
       &::before {
-        right: ui.v('??sys.value');
+        right: ui.v('??sys.value', '0%');
         transition-property: right;
       }
     }

package/src/constructors/Ripple/style.scss

@@ -7,6 +7,10 @@
 
   border-radius: inherit;
 
+  @include ui.mediaPrefersReducedMotion {
+    display: none;
+  }
+
   &__item {
     @include ui.absolute;
 

package/src/constructors/Section/style.scss

@@ -0,0 +1,6 @@
+@use "@dxtmisha/styles/properties" as ui;
+@use "../Block/style" as block;
+
+@mixin mixinSection {
+  @include block.mixinBlock;
+}

package/src/constructors/Select/style.scss

@@ -0,0 +1,5 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinSelect {
+
+}

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/TextareaAutosize/style.scss

@@ -0,0 +1,31 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinTextareaAutosize {
+  display: block;
+  overflow: hidden;
+
+  max-width: 100%;
+
+  font: inherit;
+  line-height: inherit !important;
+  resize: none;
+
+  min-height: ui.v('?textarea.sys.height', ui.v('??minHeight')) !important;
+  field-sizing: content;
+
+  @supports not (field-sizing: content) {
+    --sys-field-sizing-none: '--YES--';
+    height: ui.v('?textarea.sys.height', ui.v('??minHeight'));
+  }
+
+  &__clone {
+    position: absolute;
+    visibility: hidden;
+
+    width: inherit;
+
+    font: inherit;
+    line-height: inherit;
+    white-space: pre-wrap;
+  }
+}

package/src/constructors/Tooltip/style.scss

@@ -0,0 +1,43 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinTooltip {
+  @include ui.initByCustom('origin', -50%);
+
+  position: fixed;
+  top: calc(#{ui.v('??sys.y', 0px)});
+  left: calc(#{ui.v('??sys.x', 0px)} + #{ui.v('??sys.shift', 0px)});
+
+  @include ui.flexY;
+  align-items: stretch;
+  opacity: 0;
+  pointer-events: none;
+
+  @include ui.paddingX(ui.v('??paddingX'));
+  padding-top: ui.v('??paddingY');
+  padding-bottom: ui.v('??paddingY');
+
+  transition: opacity ui.v('d.sys.transitionDuration.xs') linear;
+  transform-origin: calc(50% - #{ui.v('??sys.shift', 0px)}) #{ui.v('??origin')};
+
+  z-index: 999999;
+
+  &--top {
+    @include ui.initByCustom('origin', 150%);
+  }
+
+  &--preparation {
+    transform: scale(0.4);
+  }
+
+  &--show {
+    opacity: 1;
+
+    transform: none;
+    transition: opacity ui.v('d.sys.transitionDuration.xs') linear,
+    transform ui.v('d.sys.transitionDuration.sm') ui.v('d.sys.transitionFunction.deceleration');
+  }
+
+  &--move {
+    pointer-events: unset;
+  }
+}

package/src/constructors/Window/style.scss

@@ -1,6 +1,8 @@
 @use "@dxtmisha/styles/properties" as ui;
 
 @mixin mixinWindow {
+  --sys-type-body: "--NONE--";
+
   @include ui.initByCustom('opacity', 0);
   @include ui.initByCustom('transform', none);
   @include ui.initByCustom('transformPreparation', scale(.8));
@@ -235,6 +237,15 @@
     @include ui.contentVisibility(visible);
   }
 
+  @include ui.mediaPrefersReducedMotion {
+    &,
+    &__body,
+    &__background {
+      transition-delay: 0.1ms !important;
+      transition-duration: 0.1ms !important;
+    }
+  }
+
   @at-root {
     body[data-scroll="scroll"] {
       &:has(>[data-window-teleport]>#{ui.c('??-overscroll')}:not([data-window-menu="menu"])[data-status="display"]),

package/src/library/style.scss

@@ -0,0 +1,39 @@
+@forward "../constructors/Accordion/style";
+@forward "../constructors/ActionSheet/style";
+@forward "../constructors/Actions/style";
+@forward "../constructors/Anchor/style";
+@forward "../constructors/Arrow/style";
+@forward "../constructors/Badge/style";
+@forward "../constructors/Bars/style";
+@forward "../constructors/Block/style";
+@forward "../constructors/Button/style";
+@forward "../constructors/Cell/style";
+@forward "../constructors/Chip/style";
+@forward "../constructors/ChipGroup/style";
+@forward "../constructors/Dialog/style";
+@forward "../constructors/Field/style";
+@forward "../constructors/FieldCounter/style";
+@forward "../constructors/FieldLabel/style";
+@forward "../constructors/FieldMessage/style";
+@forward "../constructors/Icon/style";
+@forward "../constructors/Image/style";
+@forward "../constructors/Input/style";
+@forward "../constructors/List/style";
+@forward "../constructors/ListGroup/style";
+@forward "../constructors/ListItem/style";
+@forward "../constructors/ListMenu/style";
+@forward "../constructors/Mask/style";
+@forward "../constructors/Menu/style";
+@forward "../constructors/Modal/style";
+@forward "../constructors/MotionTransform/style";
+@forward "../constructors/Page/style";
+@forward "../constructors/Progress/style";
+@forward "../constructors/Ripple/style";
+@forward "../constructors/Scrollbar/style";
+@forward "../constructors/Section/style";
+@forward "../constructors/Select/style";
+@forward "../constructors/SelectValue/style";
+@forward "../constructors/Skeleton/style";
+@forward "../constructors/TextareaAutosize/style";
+@forward "../constructors/Tooltip/style";
+@forward "../constructors/Window/style";

package/src/classes/CaptionInclude.ts

@@ -1,71 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { isFilled, render } from '@dxtmisha/functional'
-
-import { SkeletonInclude } from '../constructors/Skeleton'
-
-import type { CaptionProps, CaptionSlots } from '../types/captionTypes'
-
-/**
- * Class for working with caption.
- *
- * Класс для работы с caption.
- */
-export class CaptionInclude {
-  /**
-   * Constructor
-   * @param props input property/ входное свойство
-   * @param className class name/ название класса
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
-   */
-  constructor(
-    protected readonly props: Readonly<CaptionProps>,
-    protected readonly className: string,
-    protected readonly slots?: CaptionSlots,
-    protected readonly skeleton?: SkeletonInclude
-  ) {
-  }
-
-  /**
-   * Returns true if caption is filled
-   *
-   * Возвращает true, если caption заполнен
-   */
-  readonly is = computed(() => Boolean(this.props.caption || this.slots?.caption))
-
-  /**
-   * Renders caption element with content from props or slots.
-   *
-   * Отображает элемент caption с содержимым из props или slots.
-   */
-  render(): VNode[] {
-    const children: any[] = []
-
-    if (isFilled(this.props.caption)) {
-      children.push(this.props.caption)
-    }
-
-    if (this.slots?.caption) {
-      children.push(this.slots.caption?.({}))
-    }
-
-    if (children.length > 0) {
-      return [
-        render(
-          'div',
-          {
-            'class': {
-              [`${this.className}__caption`]: true,
-              ...this.skeleton?.classes.value
-            },
-            'data-event-type': 'caption'
-          },
-          children,
-          'caption'
-        )
-      ]
-    }
-
-    return []
-  }
-}

package/src/classes/DescriptionInclude.ts

@@ -1,70 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { isFilled, render } from '@dxtmisha/functional'
-
-import { SkeletonInclude } from '../constructors/Skeleton'
-
-import type { DescriptionProps, DescriptionSlots } from '../types/descriptionTypes'
-
-/**
- * Use for adding description text
- *
- * Использование для добавления описания текста
- */
-export class DescriptionInclude {
-  /**
-   * Constructor
-   * @param props input property/ входное свойство
-   * @param className class name/ название класса
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
-   */
-  constructor(
-    protected readonly props: Readonly<DescriptionProps>,
-    protected readonly className: string,
-    protected readonly slots?: DescriptionSlots,
-    protected readonly skeleton?: SkeletonInclude
-  ) {
-  }
-
-  /**
-   * Check for the presence of a description
-   *
-   * Проверка наличия описания
-   */
-  readonly is = computed(() => Boolean(this.props.description || this.slots?.description))
-
-  /**
-   * Render the description
-   *
-   * Рендер описания
-   */
-  render(): VNode[] {
-    const children: any[] = []
-
-    if (isFilled(this.props.description)) {
-      children.push(this.props.description)
-    }
-
-    if (this.slots?.description) {
-      children.push(this.slots.description?.({}))
-    }
-
-    if (children.length > 0) {
-      return [
-        render(
-          'div',
-          {
-            class: {
-              [`${this.className}__description`]: true,
-              ...this.skeleton?.classes.value
-            }
-          },
-          children,
-          'description'
-        )
-      ]
-    }
-
-    return []
-  }
-}

package/src/classes/EnabledInclude.ts

@@ -1,56 +0,0 @@
-import { computed } from 'vue'
-import { ProgressInclude } from '../constructors/Progress'
-
-import type { EnabledProps } from '../types/enabledTypes'
-
-/**
- * Use to control the activity of the item.
- *
- * Использование для управления активности элемента.
- */
-export class EnabledInclude {
-  /**
-   * Constructor
-   * @param props input property/ входное свойство
-   * @param progress object for working with progress/ объект для работы с прогрессами
-   */
-  constructor(
-    protected readonly props: EnabledProps,
-    protected readonly progress?: ProgressInclude
-  ) {
-  }
-
-  /**
-   * Checks if the element is active
-   *
-   * Проверяет, активен ли элемент
-   */
-  readonly isEnabled = computed<boolean>(() =>
-    !this.props.disabled
-    && !this.props.readonly
-    && (
-      !this.progress
-      || !this.progress.is.value
-    )
-    && Boolean(
-      !('dynamic' in this.props)
-      || this.props.dynamic
-    )
-  )
-
-  /**
-   * checks if the read-only status is enabled/ проверяет, включён ли статус "только для чтения"
-   */
-  readonly isReadonly = computed<boolean>(() => Boolean(this.props.readonly))
-
-  /**
-   * checks if the element is disabled/ проверяет, отключён ли элемент
-   */
-  readonly isDisabled = computed<boolean>(() => Boolean(this.props.disabled))
-
-  /**
-   * checks if the element is disabled or the value is empty/
-   * проверяет, отключён ли элемент или пустое ли значение
-   */
-  readonly isDisabledOrUndefined = computed<boolean | undefined>(() => this.isDisabled.value || undefined)
-}