@dxtmisha/scripts 0.11.8 → 1.1.0

package/src/media/templates/prompts/demoComponentEn.mdx

@@ -1,282 +0,0 @@
-Component for creating popup menus, dropdown lists, and context menus with support for navigation and actions.
-
-Menu combines the functionality of Window (positioning and visibility management), Bars (action and tool panel), and List (displaying items, groups, and nested submenus). The component provides keyboard navigation, support for nested structures, asynchronous data loading, an optimized rendering mode for large lists, and full control over the open/close state.
-
-**Key Features:**
-
-- Integration of Window, Bars, and List components
-- Keyboard navigation through menu items
-- Nested submenus with unlimited depth
-- Asynchronous data loading via AJAX
-- Lite mode for optimizing large lists (liteThreshold)
-- Search and filtering of menu items
-- Management of selected items (selected)
-- Flexible positioning relative to the anchor
-
-**Typical Use Cases:**
-
-- Dropdown navigation menus
-- Right-click context menus
-- Action and operation menus
-- Selectors with search and filtering
-- Multi-level navigation menus
-- Menus with dynamic data loading
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-const menuItems = ref([
-  { label: 'Create', value: 'create', icon: 'add' },
-  { label: 'Edit', value: 'edit', icon: 'edit' },
-  { label: 'Delete', value: 'delete', icon: 'delete' },
-  {
-    label: 'Export',
-    value: 'export',
-    children: [
-      { label: 'PDF', value: 'pdf' },
-      { label: 'Excel', value: 'excel' },
-      { label: 'CSV', value: 'csv' }
-    ]
-  }
-])
-
-const handleClick = (value) => {
-  console.log('Item selected:', value)
-  isOpen.value = false
-}
-</script>
-
-<template>
-  <button @click="isOpen = true">Open Menu</button>
-
-  <Menu
-    v-model:open="isOpen"
-    :list="menuItems"
-    @click="handleClick"
-  >
-    <template #control="{ onclick }">
-      <button @click="onclick">Actions</button>
-    </template>
-  </Menu>
-</template>
-```
-
-## Navigation through Menu Items
-
-The `previous()` and `next()` methods are designed for programmatic navigation through menu items based on the current selection and the `step` property.
-
-**Methods:**
-
-- `previous()` — moves the selection to the previous item (back by `step` positions)
-- `next()` — moves the selection to the next item (forward by `step` positions)
-- `step` — number of items to skip during navigation (default: 1)
-
-The methods work in conjunction with the reactive `selected` state: when `previous()` or `next()` is called, the new position is automatically calculated relative to the currently selected item. If no item is selected, the methods select the first available item. When the list boundaries (first or last item) are reached, navigation stops at the boundary item, preventing exit from the list.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const menuRef = ref()
-const selected = ref('item2')
-</script>
-
-<template>
-  <!-- Call via ref -->
-  <button @click="menuRef?.previous()">Back</button>
-  <button @click="menuRef?.next()">Forward</button>
-
-  <Menu
-    ref="menuRef"
-    v-model:selected="selected"
-    :list="[
-      { label: 'Item 1', value: 'item1' },
-      { label: 'Item 2', value: 'item2' },
-      { label: 'Item 3', value: 'item3' }
-    ]"
-    :step="1"
-  />
-
-  <!-- Navigation in control slot -->
-  <Menu v-model:selected="selected" :list="items">
-    <template #control="{ previous, next, selectedNames }">
-      <button @click="previous">◀</button>
-      <span>{{ selectedNames[0] }}</span>
-      <button @click="next">▶</button>
-    </template>
-  </Menu>
-
-  <!-- With custom step -->
-  <Menu
-    ref="menuRef"
-    v-model:selected="selected"
-    :list="items"
-    :step="2"
-  />
-</template>
-```
-
-## AJAX Menu Loading
-
-The `ajax`, `request`, and `cache` properties are designed to manage asynchronous loading and caching of menu data.
-
-**Properties:**
-
-- `ajax` — enables remote data loading mode (URL string or function)
-- `request` — object of type `ApiFetch` with HTTP request settings
-- `cache` — enables caching of loaded menu items
-
-The properties work together: if `ajax` is not set or is `false`, the menu uses local data. When `ajax` is activated (URL string or `true`), `request` defines the HTTP request parameters (method, headers, body), and `cache` manages data storage. With `cache` enabled, reopening the menu uses stored data instead of new requests, reducing server load.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <!-- Load from URL -->
-  <Menu
-    v-model:open="isOpen"
-    ajax="/api/menu-items"
-    :cache="true"
-  />
-
-  <!-- With request settings -->
-  <Menu
-    v-model:open="isOpen"
-    ajax="/api/menu"
-    :request="{
-      method: 'POST',
-      headers: { 'X-Custom': 'value' },
-      auth: true
-    }"
-    :cache="true"
-  />
-
-  <!-- Loading function -->
-  <Menu
-    v-model:open="isOpen"
-    :ajax="async () => {
-      const response = await fetch('/api/menu')
-      return response.json()
-    }"
-  />
-</template>
-```
-
-## Events
-
-### `click`
-
-The event is triggered when the component is clicked, passing the original DOM event and component data.
-
-**Parameters:**
-- `event: MouseEvent` — original DOM mouse event
-- `value: EventClickValue` — object with component data
-
-**EventClickValue Structure:**
-- `type: string` — identifier of the click location, set via the `data-event-type` attribute on the element
-- `value: any` — component value
-- `detail: Record<string, any> | undefined` — additional event data
-
-```html
-<script setup>
-const handleClick = (event, value) => {
-  console.log('DOM event:', event)
-  console.log('Click type:', value.type)
-  console.log('Value:', value.value)
-  console.log('Details:', value.detail)
-}
-</script>
-
-<template>
-  <Component @click="handleClick">
-    <button data-event-type="action">Click me</button>
-  </Component>
-</template>
-```
-
-### `clickLite`
-
-The event is triggered when the component is clicked, passing only data without the original DOM event (lightweight version).
-
-**Parameters:**
-- `value: EventClickValue` — object with component data
-
-## Expose
-
-### `previous()`
-
-Moves the selection to the previous menu item based on the `step` property value.
-
-**Returns:** `void`
-
-### `next()`
-
-Moves the selection to the next menu item based on the `step` property value.
-
-**Returns:** `void`
-
-## Slots
-
-### `control`
-
-Slot for placing the menu control element (trigger).
-
-**Parameters:**
-- `props: MenuControlItem` — object with menu control data
-- `onclick` — function to toggle menu open/close
-- `isSelected` — computed boolean indicating if any item is selected
-- `selectedNames` — computed array of labels of selected items
-- `selectedValues` — computed array of values of selected items
-- `selectedList` — computed array of selected list items
-- `loading` — ref indicating AJAX loading state
-- `previous()` — method to navigate to previous item(s)
-- `next()` — method to navigate to next item(s)
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-const menuItems = ref([
-  { label: 'Item 1', value: '1' },
-  { label: 'Item 2', value: '2' },
-  { label: 'Item 3', value: '3' }
-])
-</script>
-
-<template>
-  <Menu v-model:open="isOpen" :list="menuItems">
-    <template #control="{ onclick, isSelected, selectedNames }">
-      <button @click="onclick">
-        {{ isSelected ? selectedNames.join(', ') : 'Select Items' }}
-      </button>
-    </template>
-  </Menu>
-</template>
-```
-
-### `title`
-
-Slot for placing the menu window title.
-
-**Parameters:**
-- `props: MenuControlItem` — object with menu control data
-
-### `footer`
-
-Slot for placing content at the bottom of the menu window (action buttons, information).
-
-**Parameters:**
-- `props: MenuControlItem` — object with menu control data
-
-### `default`
-
-Main slot for placing the main content of the component.
-
-**Returns:** `VNode` — main content of the component

package/src/media/templates/prompts/demoComponentRu.mdx

@@ -1,282 +0,0 @@
-Компонент для создания всплывающих меню, выпадающих списков и контекстных меню с поддержкой навигации и действий.
-
-Menu объединяет функциональность Window (позиционирование и управление видимостью), Bars (панель действий и инструментов) и List (отображение пунктов, групп и вложенных подменю). Компонент обеспечивает клавиатурную навигацию, поддержку вложенной структуры, асинхронную загрузку данных, режим оптимизированного рендеринга для больших списков и полный контроль над состоянием открытия/закрытия.
-
-**Основные возможности:**
-
-- Интеграция Window, Bars и List компонентов
-- Клавиатурная навигация по пунктам меню
-- Вложенные подменю с неограниченной глубиной
-- Асинхронная загрузка данных через AJAX
-- Режим lite для оптимизации больших списков (liteThreshold)
-- Поиск и фильтрация пунктов меню
-- Управление выбранными элементами (selected)
-- Гибкое позиционирование относительно якоря
-
-**Типичные сценарии использования:**
-
-- Выпадающие меню навигации
-- Контекстные меню по правому клику
-- Меню действий и операций
-- Селекторы с поиском и фильтрацией
-- Многоуровневые навигационные меню
-- Меню с динамической загрузкой данных
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-const menuItems = ref([
-  { label: 'Создать', value: 'create', icon: 'add' },
-  { label: 'Редактировать', value: 'edit', icon: 'edit' },
-  { label: 'Удалить', value: 'delete', icon: 'delete' },
-  {
-    label: 'Экспорт',
-    value: 'export',
-    children: [
-      { label: 'PDF', value: 'pdf' },
-      { label: 'Excel', value: 'excel' },
-      { label: 'CSV', value: 'csv' }
-    ]
-  }
-])
-
-const handleClick = (value) => {
-  console.log('Выбран пункт:', value)
-  isOpen.value = false
-}
-</script>
-
-<template>
-  <button @click="isOpen = true">Открыть меню</button>
-
-  <Menu
-    v-model:open="isOpen"
-    :list="menuItems"
-    @click="handleClick"
-  >
-    <template #control="{ onclick }">
-      <button @click="onclick">Действия</button>
-    </template>
-  </Menu>
-</template>
-```
-
-## Навигация по элементам меню
-
-Методы `previous()` и `next()` предназначены для программного перемещения по элементам меню на основе текущего выбора и свойства `step`.
-
-**Методы:**
-
-- `previous()` — перемещает выбор на предыдущий элемент (назад на `step` позиций)
-- `next()` — перемещает выбор на следующий элемент (вперед на `step` позиций)
-- `step` — количество элементов для пропуска при навигации (по умолчанию: 1)
-
-Методы работают совместно с реактивным состоянием `selected`: при вызове `previous()` или `next()` происходит автоматический расчёт новой позиции относительно текущего выделенного элемента. Если элемент не выбран, методы выбирают первый доступный элемент. При достижении границ списка (первый или последний элемент) навигация останавливается на граничном элементе, предотвращая выход за пределы списка.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const menuRef = ref()
-const selected = ref('item2')
-</script>
-
-<template>
-  <!-- Вызов через ref -->
-  <button @click="menuRef?.previous()">Назад</button>
-  <button @click="menuRef?.next()">Вперед</button>
-
-  <Menu
-    ref="menuRef"
-    v-model:selected="selected"
-    :list="[
-      { label: 'Элемент 1', value: 'item1' },
-      { label: 'Элемент 2', value: 'item2' },
-      { label: 'Элемент 3', value: 'item3' }
-    ]"
-    :step="1"
-  />
-
-  <!-- Навигация в слоте control -->
-  <Menu v-model:selected="selected" :list="items">
-    <template #control="{ previous, next, selectedNames }">
-      <button @click="previous">◀</button>
-      <span>{{ selectedNames[0] }}</span>
-      <button @click="next">▶</button>
-    </template>
-  </Menu>
-
-  <!-- С пользовательским шагом -->
-  <Menu
-    ref="menuRef"
-    v-model:selected="selected"
-    :list="items"
-    :step="2"
-  />
-</template>
-```
-
-## AJAX загрузка меню
-
-Свойства `ajax`, `request` и `cache` предназначены для управления асинхронной загрузкой и кэшированием данных меню.
-
-**Свойства:**
-
-- `ajax` — включает режим удалённой загрузки данных (строка URL или функция)
-- `request` — объект типа `ApiFetch` с настройками HTTP-запроса
-- `cache` — включает кэширование загруженных элементов меню
-
-Свойства работают совместно: если `ajax` не задан или равен `false`, меню использует локальные данные. При активации `ajax` (строка URL или `true`), `request` определяет параметры HTTP-запроса (метод, заголовки, тело), а `cache` управляет сохранением данных. При включённом `cache` повторные открытия меню используют сохранённые данные вместо новых запросов, снижая нагрузку на сервер.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <!-- Загрузка с URL -->
-  <Menu
-    v-model:open="isOpen"
-    ajax="/api/menu-items"
-    :cache="true"
-  />
-
-  <!-- С настройками запроса -->
-  <Menu
-    v-model:open="isOpen"
-    ajax="/api/menu"
-    :request="{
-      method: 'POST',
-      headers: { 'X-Custom': 'value' },
-      auth: true
-    }"
-    :cache="true"
-  />
-
-  <!-- Функция загрузки -->
-  <Menu
-    v-model:open="isOpen"
-    :ajax="async () => {
-      const response = await fetch('/api/menu')
-      return response.json()
-    }"
-  />
-</template>
-```
-
-## Events
-
-### `click`
-
-Событие срабатывает при клике на компонент, передавая оригинальное DOM событие и данные компонента.
-
-**Параметры:**
-- `event: MouseEvent` — оригинальное DOM событие мыши
-- `value: EventClickValue` — объект с данными компонента
-
-**Структура EventClickValue:**
-- `type: string` — идентификатор места нажатия, задается через атрибут `data-event-type` у элемента
-- `value: any` — значение компонента
-- `detail: Record<string, any> | undefined` — дополнительные данные события
-
-```html
-<script setup>
-const handleClick = (event, value) => {
-  console.log('DOM событие:', event)
-  console.log('Тип клика:', value.type)
-  console.log('Значение:', value.value)
-  console.log('Детали:', value.detail)
-}
-</script>
-
-<template>
-  <Component @click="handleClick">
-    <button data-event-type="action">Нажми меня</button>
-  </Component>
-</template>
-```
-
-### `clickLite`
-
-Событие срабатывает при клике на компонент, передавая только данные без оригинального DOM события (облегченная версия).
-
-**Параметры:**
-- `value: EventClickValue` — объект с данными компонента
-
-## Expose
-
-### `previous()`
-
-Перемещает выбор на предыдущий элемент меню на основе значения свойства `step`.
-
-**Возвращает:** `void`
-
-### `next()`
-
-Перемещает выбор на следующий элемент меню на основе значения свойства `step`.
-
-**Возвращает:** `void`
-
-## Slots
-
-### `control`
-
-Слот для размещения элемента управления (триггера) меню.
-
-**Параметры:**
-- `props: MenuControlItem` — объект с данными управления меню
-- `onclick` — функция для переключения открытия/закрытия меню
-- `isSelected` — computed boolean, указывающий, выбран ли какой-либо элемент
-- `selectedNames` — computed массив меток выбранных элементов
-- `selectedValues` — computed массив значений выбранных элементов
-- `selectedList` — computed массив выбранных элементов списка
-- `loading` — ref, указывающий на состояние загрузки AJAX
-- `previous()` — метод для перехода к предыдущему элементу(ам)
-- `next()` — метод для перехода к следующему элементу(ам)
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-const menuItems = ref([
-  { label: 'Элемент 1', value: '1' },
-  { label: 'Элемент 2', value: '2' },
-  { label: 'Элемент 3', value: '3' }
-])
-</script>
-
-<template>
-  <Menu v-model:open="isOpen" :list="menuItems">
-    <template #control="{ onclick, isSelected, selectedNames }">
-      <button @click="onclick">
-        {{ isSelected ? selectedNames.join(', ') : 'Выбрать элементы' }}
-      </button>
-    </template>
-  </Menu>
-</template>
-```
-
-### `title`
-
-Слот для размещения заголовка окна меню.
-
-**Параметры:**
-- `props: MenuControlItem` — объект с данными управления меню
-
-### `footer`
-
-Слот для размещения содержимого в нижней части окна меню (кнопки действий, информация).
-
-**Параметры:**
-- `props: MenuControlItem` — объект с данными управления меню
-
-### `default`
-
-Основной слот для размещения главного содержимого компонента.
-
-**Возвращает:** `VNode` — основное содержимое компонента

package/src/media/templates/prompts/demoComposableEn.mdx

@@ -1,103 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title="[title]" />
-
-# Composable useToggle
-
-Composable for managing boolean state with extended toggle methods. Provides a convenient interface for working with visibility flags, modals, and other toggleable states.
-
-## Key Features
-
-- **Simple toggling** — intuitive API for state changes
-- **Explicit methods** — separate functions for setting true/false
-- **Argument support** — ability to set specific value via toggle
-- **Full reactivity** — based on Vue Reactivity API
-- **Type safety** — strict typing of parameters and return values
-
-## Function
-
-### `useToggle`
-
-Creates a boolean state management object.
-
-**Parameters:**
-- `initialValue: boolean` — initial state value (default `false`)
-
-**Returns:** `UseToggleReturn` — object with state and management methods
-
-**UseToggleReturn:**
-- `value: Ref<boolean>` — reactive value
-- `toggle: (nextValue?: boolean) => void` — toggles value or sets the passed one
-- `setTrue: () => void` — sets value to true
-- `setFalse: () => void` — sets value to false
-
-```javascript
-import { useToggle } from '@dxtmisha/demo'
-
-// Initialization
-const { value, toggle } = useToggle(false)
-
-// Usage
-toggle() // value becomes true
-```
-
-## Basic Usage
-
-### Basic Management
-
-```javascript
-import { useToggle } from '@dxtmisha/demo'
-
-const { value: isMenuOpen, toggle, setFalse: closeMenu } = useToggle()
-
-// Open menu
-toggle()
-
-// Close menu (explicit action)
-closeMenu()
-```
-
-### Usage with v-if
-
-```javascript
-import { useToggle } from '@dxtmisha/demo'
-
-export default {
-  setup() {
-    const { value: showDetails, toggle } = useToggle(false)
-
-    return { showDetails, toggle }
-  }
-}
-
-// Template:
-// <button @click="toggle()">
-//   {{ showDetails ? 'Hide' : 'Show' }} details
-// </button>
-// <div v-if="showDetails">
-//   Detailed information...
-// </div>
-```
-
-## Working with Data Types
-
-### Renaming
-
-```javascript
-// Destructuring allows giving meaningful names
-const {
-  value: isLoading,
-  setTrue: startLoading,
-  setFalse: stopLoading
-} = useToggle(false)
-
-const loadData = async () => {
-  startLoading()
-  try {
-    await api.getData()
-  } finally {
-    stopLoading()
-  }
-}
-```
-