@dxtmisha/constructor 0.23.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 dxtmisha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,136 @@
+# @dxtmisha/constructor
+
+🛠️ **Vue component constructors** for DXT UI design system - ready-to-use constructors with TypeScript support and SCSS styling.
+
+[![npm version](https://badge.fury.io/js/@dxtmisha%2Fconstructor.svg)](https://www.npmjs.com/package/@dxtmisha/constructor)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Node.js Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)](https://nodejs.org/)
+
+## 🚀 Installation
+
+```bash
+npm install @dxtmisha/constructor
+```
+
+> **Note:** TypeScript sources are shipped directly. No build step required - use as-is in your Vue projects.
+
+## ✨ Features
+
+- 🏗️ **Ready-to-use constructors** - complete Vue component implementations
+- 🎯 **TypeScript first** - full type safety and intellisense support
+- 🔧 **SCSS styling** - modular styles for each constructor
+- 📝 **Comprehensive props** - extensive property interfaces for customization
+- ⚡ **Vue 3 optimized** - built for modern Vue development
+- 🎨 **Design system ready** - consistent API across all constructors
+- 📦 **TypeScript source** - direct source distribution
+
+## 📖 Quick Start
+
+### Basic Usage
+
+```typescript
+import { Button, type ButtonProps } from '@dxtmisha/constructor/Button'
+import '@dxtmisha/constructor/Button/style'
+
+// Button props with full TypeScript support
+const buttonProps: ButtonProps = {
+  variant: 'primary',
+  size: 'md',
+  disabled: false,
+  loading: false
+}
+```
+
+### Available Constructors
+
+```typescript
+// UI Components
+import { Badge } from '@dxtmisha/constructor/Badge'
+import { Button } from '@dxtmisha/constructor/Button'
+import { Chip } from '@dxtmisha/constructor/Chip'
+import { Icon } from '@dxtmisha/constructor/Icon'
+import { Image } from '@dxtmisha/constructor/Image'
+import { Progress } from '@dxtmisha/constructor/Progress'
+import { Skeleton } from '@dxtmisha/constructor/Skeleton'
+
+// Form Components  
+import { Field } from '@dxtmisha/constructor/Field'
+import { FieldLabel } from '@dxtmisha/constructor/FieldLabel'
+import { FieldMessage } from '@dxtmisha/constructor/FieldMessage'
+import { FieldCounter } from '@dxtmisha/constructor/FieldCounter'
+import { Mask } from '@dxtmisha/constructor/Mask'
+
+// Layout Components
+import { Cell } from '@dxtmisha/constructor/Cell'
+import { List } from '@dxtmisha/constructor/List'
+import { ListItem } from '@dxtmisha/constructor/ListItem'
+import { ListGroup } from '@dxtmisha/constructor/ListGroup'
+import { Menu } from '@dxtmisha/constructor/Menu'
+import { Window } from '@dxtmisha/constructor/Window'
+
+// Interactive Components
+import { Bars } from '@dxtmisha/constructor/Bars'
+import { Ripple } from '@dxtmisha/constructor/Ripple'
+import { Scrollbar } from '@dxtmisha/constructor/Scrollbar'
+import { MotionTransform } from '@dxtmisha/constructor/MotionTransform'
+```
+
+## 📚 Available constructors
+
+### 🔧 Type System
+
+```typescript
+// Comprehensive type definitions
+import type {
+  // Base types
+  CaptionProps, DescriptionProps, EnabledProps,
+  ModelProps, PrefixProps, SuffixProps,
+  
+  // Event types  
+  EventClickProps, EventClickEmits, EventClickValue,
+  
+  // Field types
+  FieldProps, FieldEmits, FieldSlots,
+  
+  // Component-specific types
+  ButtonProps, ListProps, WindowProps
+} from '@dxtmisha/constructor'
+
+// Type-safe component props
+interface MyComponentProps extends ButtonProps, CaptionProps {
+  customProp?: string
+}
+```
+
+## 🎯 Constructor Categories
+
+| Category | Components | Purpose |
+|----------|------------|---------|
+| **Form** | `Field`, `FieldLabel`, `FieldMessage`, `FieldCounter`, `Mask` | Input handling and validation |
+| **Navigation** | `List`, `ListItem`, `ListGroup`, `Menu` | Navigation and selection |
+| **Feedback** | `Badge`, `Chip`, `Progress`, `Skeleton` | Status and loading states |
+| **Layout** | `Cell`, `Window`, `Scrollbar` | Structure and containers |
+| **Interactive** | `Button`, `Ripple`, `MotionTransform`, `Bars` | User interactions |
+| **Media** | `Icon`, `Image` | Visual content display |
+
+## 📦 Requirements
+
+**Core Dependencies:**
+- Node.js ≥18.0.0
+- Vue ≥3.0.0
+
+**Peer Dependencies:**
+- `@dxtmisha/functional` ≥1.0.3 - utility functions and classes
+- `vue` ≥3.0.0 - Vue framework
+
+## 📄 License
+
+MIT © [dxtmisha](https://github.com/dxtmisha)
+
+## 🐛 Report an issue
+
+[GitHub Issues](https://github.com/dxtmisha/dxt-ui/issues)
+
+---
+
+⭐ **Give us a star** if these constructors helped build your UI faster!

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@dxtmisha/constructor",
+  "private": false,
+  "version": "0.23.0",
+  "type": "module",
+  "description": "Vue component constructors for DXT UI design system - ready-to-use constructors with TypeScript support and SCSS styling",
+  "keywords": [
+    "constructor",
+    "vue",
+    "components",
+    "typescript",
+    "scss",
+    "ui",
+    "design-system",
+    "dxt",
+    "button",
+    "field",
+    "mask",
+    "window",
+    "list",
+    "menu"
+  ],
+  "author": "dxtmisha@gmail.com",
+  "license": "MIT",
+  "homepage": "https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dxtmisha/dxt-ui.git",
+    "directory": "packages/constructor"
+  },
+  "bugs": {
+    "url": "https://github.com/dxtmisha/dxt-ui/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "dxt-library": "dxt-library",
+    "dxt-constructor": "dxt-constructor mask"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "package.json",
+    "LICENSE"
+  ],
+  "main": "./src/library.ts",
+  "module": "./src/library.ts",
+  "types": "./src/library.ts",
+  "exports": {
+    ".": "./src/library.ts",
+    "./Badge": "./src/constructors/Badge/index.ts",
+    "./Badge/style": "./src/constructors/Badge/style.scss",
+    "./Bars": "./src/constructors/Bars/index.ts",
+    "./Bars/style": "./src/constructors/Bars/style.scss",
+    "./Button": "./src/constructors/Button/index.ts",
+    "./Button/style": "./src/constructors/Button/style.scss",
+    "./Cell": "./src/constructors/Cell/index.ts",
+    "./Cell/style": "./src/constructors/Cell/style.scss",
+    "./Chip": "./src/constructors/Chip/index.ts",
+    "./Chip/style": "./src/constructors/Chip/style.scss",
+    "./Field": "./src/constructors/Field/index.ts",
+    "./Field/style": "./src/constructors/Field/style.scss",
+    "./FieldCounter": "./src/constructors/FieldCounter/index.ts",
+    "./FieldCounter/style": "./src/constructors/FieldCounter/style.scss",
+    "./FieldLabel": "./src/constructors/FieldLabel/index.ts",
+    "./FieldLabel/style": "./src/constructors/FieldLabel/style.scss",
+    "./FieldMessage": "./src/constructors/FieldMessage/index.ts",
+    "./FieldMessage/style": "./src/constructors/FieldMessage/style.scss",
+    "./Icon": "./src/constructors/Icon/index.ts",
+    "./Icon/style": "./src/constructors/Icon/style.scss",
+    "./Image": "./src/constructors/Image/index.ts",
+    "./Image/style": "./src/constructors/Image/style.scss",
+    "./List": "./src/constructors/List/index.ts",
+    "./List/style": "./src/constructors/List/style.scss",
+    "./ListGroup": "./src/constructors/ListGroup/index.ts",
+    "./ListGroup/style": "./src/constructors/ListGroup/style.scss",
+    "./ListItem": "./src/constructors/ListItem/index.ts",
+    "./ListItem/style": "./src/constructors/ListItem/style.scss",
+    "./ListMenu": "./src/constructors/ListMenu/index.ts",
+    "./ListMenu/style": "./src/constructors/ListMenu/style.scss",
+    "./Mask": "./src/constructors/Mask/index.ts",
+    "./Mask/style": "./src/constructors/Mask/style.scss",
+    "./Menu": "./src/constructors/Menu/index.ts",
+    "./Menu/style": "./src/constructors/Menu/style.scss",
+    "./MotionTransform": "./src/constructors/MotionTransform/index.ts",
+    "./MotionTransform/style": "./src/constructors/MotionTransform/style.scss",
+    "./Motiontransform": "./src/constructors/Motiontransform/index.ts",
+    "./Motiontransform/style": "./src/constructors/Motiontransform/style.scss",
+    "./Progress": "./src/constructors/Progress/index.ts",
+    "./Progress/style": "./src/constructors/Progress/style.scss",
+    "./Ripple": "./src/constructors/Ripple/index.ts",
+    "./Ripple/style": "./src/constructors/Ripple/style.scss",
+    "./Scrollbar": "./src/constructors/Scrollbar/index.ts",
+    "./Scrollbar/style": "./src/constructors/Scrollbar/style.scss",
+    "./Skeleton": "./src/constructors/Skeleton/index.ts",
+    "./Skeleton/style": "./src/constructors/Skeleton/style.scss",
+    "./Window": "./src/constructors/Window/index.ts",
+    "./Window/style": "./src/constructors/Window/style.scss"
+  },
+  "buildOptions": {
+    "name": "@dxtmisha/constructor",
+    "formats": [
+      "esm-bundler"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "peerDependencies": {
+    "@dxtmisha/functional": ">=1.0.3",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@dxtmisha/functional": {
+      "optional": false
+    },
+    "vue": {
+      "optional": false
+    }
+  },
+  "dependencies": {},
+  "sideEffects": false
+}

package/src/classes/CaptionInclude.ts

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,56 @@
+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)
+}

package/src/classes/EventClickInclude.ts

@@ -0,0 +1,138 @@
+import { toRefs, type ToRefs } from 'vue'
+import { type ConstrEmit, RouterItem } from '@dxtmisha/functional'
+
+import { EnabledInclude } from './EnabledInclude'
+
+import type {
+  EventClickEmits,
+  EventClickExpose,
+  EventClickProps,
+  EventClickValue
+} from '../types/eventClickTypes'
+
+/**
+ * Base class for working with button events
+ *
+ * Базовый класс для работы с событиями кнопки
+ */
+export class EventClickInclude {
+  protected readonly refs?: ToRefs<EventClickProps>
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param enabled Object for working with activity status/ Объект для работы со статусом активности
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly props?: EventClickProps,
+    protected readonly enabled?: EnabledInclude,
+    protected readonly emits?: ConstrEmit<EventClickEmits>
+  ) {
+    this.refs = props ? toRefs(props) : undefined
+  }
+
+  /**
+   * Exported values
+   *
+   * Экспортируемые значения
+   */
+  get expose(): EventClickExpose {
+    return {
+      value: this.refs?.value,
+      detail: this.refs?.detail
+    }
+  }
+
+  /**
+   * Event trigger function
+   *
+   * Функция вызова события
+   * @param event event object/ объект события
+   * @param options data object/ объект с данными
+   */
+  readonly onClick = (
+    event: MouseEvent,
+    options?: EventClickValue
+  ) => {
+    if (this.emits) {
+      if (options) {
+        this.emit(event, options)
+      } else if (this.toRouter()) {
+        event.preventDefault()
+      } else if (this.enabled) {
+        const optionsItem = this.getOptions(event)
+
+        if (
+          this.enabled.isEnabled.value
+          || (
+            optionsItem.type === 'icon-trailing'
+            && !this.enabled.isDisabled.value
+          )
+        ) {
+          this.emit(event, optionsItem)
+        }
+      } else {
+        this.emit(event, this.getOptions(event))
+      }
+    }
+  }
+
+  /**
+   * Parameters for the event
+   *
+   * Параметры для события
+   */
+  protected getOptions(event: MouseEvent): EventClickValue {
+    return {
+      type: this.getTargetType(event),
+      value: this.props?.value,
+      detail: this.props?.detail
+    }
+  }
+
+  /**
+   * Returns the type of the selected item
+   *
+   * Возвращает тип выбранного элемента
+   */
+  protected getTargetType(event: MouseEvent) {
+    const type = (event.target as HTMLElement)
+      ?.closest<HTMLElement>('[data-event-type]')
+      ?.dataset
+      ?.eventType
+
+    return type ?? 'click'
+  }
+
+  /**
+   * Changing the link through the router
+   *
+   * Изменение ссылки через router
+   */
+  protected toRouter(): boolean {
+    if (this.props?.to) {
+      RouterItem.push(this.props?.to)
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Triggers the click event
+   *
+   * Вызывает событие клика
+   * @param event event object/ объект события
+   * @param options data object/ объект с данными
+   */
+  protected emit(
+    event: MouseEvent,
+    options: EventClickValue
+  ) {
+    if (this.emits) {
+      this.emits('click', event, options)
+      this.emits('clickLite', options)
+    }
+  }
+}