@dxtmisha/constructor 0.23.0

package/src/constructors/Window/properties.json

@@ -0,0 +1,236 @@
+{
+  "menuSizeMultiplier": "1",
+  "padding": {
+    "_type": "var"
+  },
+  "width": {
+    "value": {
+      "auto": "auto",
+      "max": "100%"
+    },
+    "_var": true,
+    "_style": true
+  },
+  "height": {
+    "value": {
+      "auto": "auto",
+      "max": "100%"
+    },
+    "_var": true,
+    "_style": true
+  },
+  "imageSizeValue": {
+    "_type": "var"
+  },
+  "iconPadding": {
+    "_type": "var"
+  },
+  "background-color": {
+    "_type": "var"
+  },
+  "background-opacity": {
+    "_type": "var"
+  },
+  "transform": {
+    "_type": "var"
+  },
+  "transform-origin": {
+    "_type": "var"
+  },
+  "#body": {
+    "#group": {},
+    "#context": {},
+    "_settingClone": true
+  },
+  "#control": {},
+  "#image": {},
+  "#close": {},
+  "#teleport": {},
+  "~hide": {},
+  "~axis": {
+    "x": {},
+    "y": {},
+    "on": {},
+    "_default": "y"
+  },
+  "~imagePosition": {
+    "~top": {},
+    "~left": {},
+    "_default": "top"
+  },
+  "~dense": {
+    "padding": {
+      "value": "0 !important",
+      "_type": "property"
+    },
+    "#body": {
+      "border-radius": "0"
+    }
+  },
+  "~alignment": {
+    "~center": {},
+    "~top": {
+      "align-items": "flex-start"
+    },
+    "~topRight": {
+      "align-items": "flex-start",
+      "justify-content": "flex-end"
+    },
+    "~topLeft": {
+      "align-items": "flex-start",
+      "justify-content": "flex-start"
+    },
+    "~topFull": {
+      "align-items": "flex-start",
+      "#body": {
+        "width": "100%"
+      }
+    },
+    "~right": {
+      "justify-content": "flex-end"
+    },
+    "~rightFull": {
+      "justify-content": "flex-end",
+      "#body": {
+        "top": "auto !important",
+        "height": "100%"
+      }
+    },
+    "~bottom": {
+      "align-items": "flex-end"
+    },
+    "~bottomRight": {
+      "align-items": "flex-end",
+      "justify-content": "flex-end"
+    },
+    "~bottomLeft": {
+      "align-items": "flex-end",
+      "justify-content": "flex-start"
+    },
+    "~bottomFull": {
+      "align-items": "flex-end",
+      "#body": {
+        "width": "100%"
+      }
+    },
+    "~left": {
+      "justify-content": "flex-start"
+    },
+    "~leftFull": {
+      "justify-content": "flex-start",
+      "#body": {
+        "top": "auto !important",
+        "height": "100%"
+      }
+    }
+  },
+  "~origin": {
+    "~center": {
+      "transform-origin": "center"
+    },
+    "~top": {
+      "transform-origin": "top center"
+    },
+    "~right": {
+      "transform-origin": "center \\#{ui.dirRight()}"
+    },
+    "~bottom": {
+      "transform-origin": "bottom center"
+    },
+    "~left": {
+      "transform-origin": "center \\#{ui.dirLeft()}"
+    },
+    "~topToBottom": {
+      "transform-preparation": "translateY(-64px)",
+      "transform-origin": "top center"
+    },
+    "~rightToLeft": {
+      "transform-preparation": "translateX(calc(64px * \\#{ui.isDir()}))",
+      "transform-origin": "center \\#{ui.dirRight()}"
+    },
+    "~bottomToTop": {
+      "transform-preparation": "translateY(64px)",
+      "transform-origin": "bottom center"
+    },
+    "~leftToRight": {
+      "transform-preparation": "translateX(calc(-64px * \\#{ui.isDir()}))",
+      "transform-origin": "center \\#{ui.dirLeft()}"
+    }
+  },
+  "~adaptive": {
+    "~menu": {
+      "menuSizeMultiplier": "0.5",
+      "content": "'--MENU--'",
+      "position": "fixed",
+      "top": "{??sys.inset.y}",
+      "right": "auto",
+      "bottom": "auto",
+      "left": {
+        "value": "{??sys.inset.x}",
+        "_modification": false
+      },
+      "padding": {
+        "value": "0",
+        "_type": "property"
+      },
+      "height": "auto",
+      "background-opacity": "0",
+      "transform-preparation": "scale(.8)",
+      "transform-origin": "{??origin.x} {??origin.y}",
+      "body": {
+        "top": "auto",
+        "max-width": "100dvw - ({??padding} * 2)",
+        "max-height": "100dvh - ({??padding} * 2)"
+      },
+      "#teleport": {
+        "position": "static",
+        "after": {
+          "content": "none"
+        }
+      },
+      "~widthMatch": {
+        "#body": {
+          "min-width": "{??sys.control.width}"
+        }
+      }
+    },
+    "~menuWindow": {
+      "content": "'--MENU-WINDOW--'"
+    },
+    "~modal": {},
+    "~modalDynamic": {
+      "align-items": "flex-start",
+      "body": {
+        "position": "relative",
+        "top": "{??sys.location}"
+      }
+    },
+    "~actionSheetRight": {
+      "link|dense": "{??dense}",
+      "link|alignment": "{??alignment.rightFull}",
+      "link|origin": "{??origin.rightToLeft}"
+    },
+    "~actionSheetBottom": {
+      "link|dense": "{??dense}",
+      "link|alignment": "{??alignment.bottomFull}",
+      "link|origin": "{??origin.bottomToTop}"
+    },
+    "~static": {
+      "content": "'--STATIC--'"
+    }
+  },
+  "~fullscreen": {
+    "link|dense": "{??dense}",
+    "#body": {
+      "width": "100%",
+      "height": "100%",
+      "max-width": "none",
+      "max-height": "none"
+    }
+  },
+  "~overscroll": {
+    "_default": true
+  },
+  "~closeMobileHide": {},
+  "~widthMatch": {}
+}

package/src/constructors/Window/props.ts

@@ -0,0 +1,88 @@
+import type { ElementOrString, NormalOrPromise } from '@dxtmisha/functional'
+
+import type { ImagePropsBasic, ImagePropsInclude } from '../Image'
+import type { ScrollbarPropsBasic, ScrollbarPropsInclude } from '../Scrollbar'
+
+interface WindowPropsToken {
+  // :type [!] System label / Системная метка
+  width?: string | 'auto' | 'max' | 'custom'
+  height?: string | 'auto' | 'max' | 'custom'
+  hide?: boolean
+  axis?: 'x' | 'y' | 'on'
+  imagePosition?: 'top' | 'left'
+  dense?: boolean
+  alignment?: 'center' | 'top' | 'topRight' | 'topLeft' | 'topFull' | 'right' | 'rightFull' | 'bottom' | 'bottomRight' | 'bottomLeft' | 'bottomFull' | 'left' | 'leftFull'
+  origin?: 'center' | 'top' | 'right' | 'bottom' | 'left' | 'topToBottom' | 'rightToLeft' | 'bottomToTop' | 'leftToRight'
+  adaptive?: 'menu' | 'menuWindow' | 'modal' | 'modalDynamic' | 'actionSheetRight' | 'actionSheetBottom' | 'static'
+  fullscreen?: boolean
+  overscroll?: boolean
+  closeMobileHide?: boolean
+  widthMatch?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface WindowPropsBasic<
+  Scrollbar extends ScrollbarPropsBasic = ScrollbarPropsBasic,
+  Image extends ImagePropsBasic = ImagePropsBasic
+> extends ScrollbarPropsInclude<Scrollbar>, ImagePropsInclude<Image> {
+  // Status
+  'open'?: boolean
+  'disabled'?: boolean
+
+  // Hook
+  'preparation'?(): NormalOrPromise<void>
+
+  'beforeOpening'?(): NormalOrPromise<boolean>
+
+  'opening'?(): NormalOrPromise<boolean>
+
+  'beforeClosing'?(): NormalOrPromise<boolean>
+
+  'closing'?(): NormalOrPromise<boolean>
+
+  // Style
+  'contextmenu'?: boolean
+  'staticMode'?: boolean
+  'overElement'?: ElementOrString<HTMLElement>
+
+  'autoClose'?: boolean
+  'persistent'?: boolean
+
+  'flash'?: boolean
+  'inDom'?: boolean
+
+  'indent'?: number
+  'divider'?: boolean
+
+  'closeButton'?: boolean
+  'iconClose'?: string
+
+  // Event
+  'modelOpen'?: boolean
+  'onUpdate:open'?: (value: boolean) => void
+  'onUpdate:modelOpen'?: (value: boolean) => void
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface WindowProps extends WindowPropsBasic, WindowPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsWindow = {
+  indent: 4,
+  ...{
+    // :default [!] System label / Системная метка
+    axis: 'y',
+    imagePosition: 'top',
+    overscroll: true
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Window/style.scss

@@ -0,0 +1,262 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinWindow {
+  @include ui.initByCustom('opacity', 0);
+  @include ui.initByCustom('transform', none);
+  @include ui.initByCustom('transformPreparation', scale(.8));
+  @include ui.initByCustom('transformOrigin', center);
+  @include ui.initByCustom('transition', none);
+  @include ui.initByCustom('transitionBody', none);
+
+  display: none;
+  @include ui.contentVisibility(hidden);
+  position: sticky;
+  @include ui.inset;
+
+  align-items: center;
+  justify-content: center;
+
+  padding: ui.v('??padding', 0);
+  height: 100%;
+
+  @include ui.backgroundColor(ui.v('??backgroundColor'), 0);
+
+  transition: ui.v('??transition');
+
+  &__body {
+    content: ui.v('??padding');
+    display: flex;
+    overflow-y: auto;
+    position: relative;
+
+    flex-flow: column;
+    flex-shrink: 1;
+
+    width: calc(#{ui.v('??width', auto)} * #{ui.v('??menuSizeMultiplier')});
+    height: ui.v('??height', auto);
+    max-width: 100%;
+    max-height: 100%;
+
+    opacity: ui.v('??opacity');
+
+    transform: ui.v('??transform');
+    transform-origin: ui.v('??transformOrigin');
+    transition: ui.v('??transitionBody');
+
+    &__group {
+      display: flex;
+      overflow-y: auto;
+
+      flex-flow: column;
+      flex-grow: 1;
+    }
+
+    &__context {
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+
+  &__image {
+    position: relative;
+    height: ui.v('??imageSizeValue');
+  }
+
+  & &__close {
+    position: absolute;
+    top: ui.v('??iconPaddingY', 0);
+    @include ui.right(ui.v('??iconPaddingX', 0));
+    z-index: 24;
+  }
+
+  &__teleport {
+    visibility: hidden;
+    position: fixed;
+    @include ui.inset;
+    overflow-y: scroll;
+    overscroll-behavior-x: contain;
+    overscroll-behavior-y: contain;
+
+    scrollbar-width: none;
+    scroll-behavior: auto;
+
+    &::-webkit-scrollbar {
+      appearance: none;
+      width: 0;
+      height: 0;
+    }
+
+    &:after {
+      display: block;
+
+      height: 120vh;
+
+      content: " ";
+    }
+
+    &:has(>[data-window-menu="menu"]),
+    &[data-window-menu="menu"] {
+      position: static;
+      @include ui.inset(auto);
+      width: 0;
+      height: 0;
+
+      &:after {
+        content: none;
+      }
+    }
+
+    &:has(>[data-status="display"]),
+    &:has(>[data-status="preparation"]),
+    &:has(>[data-status="flash"]),
+    &:has(>[data-status="open"]),
+    &:has(>[data-status="hide"]),
+    &[data-status="display"],
+    &[data-status="preparation"],
+    &[data-status="flash"],
+    &[data-status="open"],
+    &[data-status="hide"] {
+      visibility: visible;
+    }
+  }
+
+  &--hide {
+    opacity: 0 !important;
+    pointer-events: none !important;
+  }
+
+  &--staticMode {
+    display: block;
+    @include ui.contentVisibility(visible);
+    position: static;
+
+    padding: 0;
+
+    background-color: transparent;
+
+    @include ui.subclass('body') {
+      opacity: 1;
+      background: transparent;
+      box-shadow: none;
+
+      &__context {
+        overscroll-behavior-x: auto;
+        overscroll-behavior-y: auto;
+      }
+    }
+  }
+
+  &--overscroll {
+    @include ui.subclass('body') {
+      &__context {
+        overscroll-behavior-x: contain;
+        overscroll-behavior-y: contain;
+      }
+    }
+  }
+
+  &--imagePosition {
+    &--left {
+      @include ui.subclass('body') {
+        flex-flow: row;
+
+        &__group {
+          flex-grow: 1;
+          flex-shrink: 1;
+        }
+      }
+
+      @include ui.subclass('image') {
+        flex-basis: ui.v('??imageSizeValue');
+        min-width: ui.v('??imageSizeValue');
+        height: auto;
+      }
+    }
+  }
+
+  &--persistent {
+    animation-duration: ui.v('d.sys.transitionDuration.fade.through');
+    animation-name: ui.n('??persistent');
+    animation-timing-function: ui.v('d.sys.transitionFunction.standard');
+    transform-origin: center;
+  }
+
+  &--closeMobileHide {
+    @include ui.subclass('close') {
+      @media (hover: none) and (pointer: coarse) {
+        display: none;
+      }
+    }
+  }
+
+  &[data-status="display"] {
+    display: flex;
+    @include ui.contentVisibility(visible);
+  }
+
+  &[data-status="preparation"] {
+    @include ui.initByCustom('transform', ui.v('??transformPreparation'));
+
+    display: flex;
+    @include ui.contentVisibility(visible);
+  }
+
+  &[data-status="flash"] {
+    @include ui.initByCustom('opacity', 1);
+    @include ui.initByCustom('transform', none);
+    @include ui.initByCustom('transition', none);
+    @include ui.initByCustom('transitionBody', none);
+
+    display: flex;
+    @include ui.contentVisibility(visible);
+
+    @include ui.backgroundOpacity(ui.v('??backgroundOpacity'));
+  }
+
+  &[data-status="open"] {
+    @include ui.initByCustom('opacity', 1);
+    @include ui.initByCustom('transform', none);
+    @include ui.initByCustom('transition', background #{ui.v('d.sys.transitionDuration.fade.enter')} linear);
+    @include ui.initByCustom('transitionBody', #{opacity #{ui.v('d.sys.transitionDuration.xs')} linear, transform #{ui.v('d.sys.transitionDuration.fade.enter')} #{ui.v('d.sys.transitionFunction.deceleration')}});
+
+    display: flex;
+    @include ui.contentVisibility(visible);
+
+    @include ui.backgroundOpacity(ui.v('??backgroundOpacity'));
+  }
+
+  &[data-status="hide"] {
+    @include ui.initByCustom('opacity', 0);
+    @include ui.initByCustom('transform', none);
+    @include ui.initByCustom('transition', background #{ui.v('d.sys.transitionDuration.fade.exit')} linear);
+    @include ui.initByCustom('transitionBody', opacity #{ui.v('d.sys.transitionDuration.fade.exit')} linear);
+
+    display: flex;
+    @include ui.contentVisibility(visible);
+  }
+
+  @at-root {
+    body[data-scroll="scroll"] {
+      &:has(>[data-window-teleport]>#{ui.c('??-overscroll')}:not([data-window-menu="menu"])[data-status="display"]),
+      &:has(>[data-window-teleport]>#{ui.c('??-overscroll')}:not([data-window-menu="menu"])[data-status="preparation"]),
+      &:has(>[data-window-teleport]>#{ui.c('??-overscroll')}:not([data-window-menu="menu"])[data-status="flash"]),
+      &:has(>[data-window-teleport]>#{ui.c('??-overscroll')}:not([data-window-menu="menu"])[data-status="open"]),
+      &:has(>[data-window-teleport]>#{ui.c('??-overscroll')}:not([data-window-menu="menu"])[data-status="hide"]) {
+        overflow-y: hidden;
+        padding-right: var(--sys-scrollbar-offset);
+      }
+    }
+  }
+
+  @keyframes #{ui.n('??persistent')} {
+    0% {
+      transform: scale(1)
+    }
+    50% {
+      transform: scale(1.02)
+    }
+    100% {
+      transform: scale(1)
+    }
+  }
+}

package/src/constructors/Window/types.ts

@@ -0,0 +1,124 @@
+import type { Ref } from 'vue'
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { ScrollbarComponentsInclude, ScrollbarEmitsInclude } from '../Scrollbar'
+import type { ButtonComponentInclude } from '../Button'
+import type { ImageComponentsInclude, ImageEmitsInclude } from '../Image'
+
+import type { WindowControlItem, WindowEmitOptions } from './basicTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type WindowComponents
+  = ScrollbarComponentsInclude
+    & ButtonComponentInclude
+    & ImageComponentsInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type WindowEmits
+  = ScrollbarEmitsInclude
+    & ImageEmitsInclude
+    & {
+      'window': [options: WindowEmitOptions]
+
+      'update:open': [value: boolean]
+      'update:modelOpen': [value: boolean]
+    }
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface WindowExpose {
+  /**
+   * Unique identifier of the window/
+   * Уникальный идентификатор окна
+   */
+  id: string
+
+  /**
+   * Reactive state of window visibility/
+   * Реактивное состояние видимости окна
+   */
+  open: Ref<boolean>
+
+  /**
+   * Control item data for window management/
+   * Данные элемента управления для управления окном
+   */
+  control: WindowControlItem
+
+  /**
+   * Sets window open state/
+   * Устанавливает состояние открытия окна
+   */
+  setOpen(open: boolean): Promise<void>
+
+  /** Transition to opening state/ Переход в состояние открытия */
+  toOpen(): Promise<void>
+  /** Transition to closing state/ Переход в состояние закрытия */
+  toClose(): Promise<void>
+
+  /**
+   * Toggles window visibility/
+   * Переключает видимость окна
+   */
+  toggle(): Promise<void>
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface WindowSlots {
+  /**
+   * Control slot for window management/
+   * Слот управления для управления окном
+   */
+  control?(props: WindowControlItem): any
+
+  /**
+   * Title slot for window header/
+   * Слот заголовка для шапки окна
+   */
+  title?(props: WindowControlItem): any
+
+  /**
+   * Footer slot for window bottom/
+   * Слот подвала для низа окна
+   */
+  footer?(props: WindowControlItem): any
+
+  /**
+   * Default slot for main content/
+   * Основной слот для главного содержимого
+   */
+  default?(props: WindowControlItem): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type WindowClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  body: string
+  bodyGroup: string
+  bodyContext: string
+  control: string
+  image: string
+  close: string
+  teleport: string
+  // :classes [!] System label / Системная метка
+}