@dxtmisha/wiki 0.57.4 → 0.57.6

package/dist/{wikiDescriptions-7XaHU3Yk.js → wikiDescriptions-CJv5fdyX.js}

@@ -124,6 +124,7 @@ var e = [
 		}],
 		documentation: {
 			body: "\n<StorybookDescriptions componentName={'Actions'} type={'actions'}/>\n<StorybookDescriptions componentName={'Actions'} type={'list'}/>\n<StorybookDescriptions componentName={'Actions'} type={'flexible'}/>\n    ",
+			events: "\n<StorybookDescriptions componentName={'Event'} type={'click'}/>\n    ",
 			slots: "\n<Canvas of={Component.ActionsSlots}/>\n<StorybookDescriptions componentName={'Slot'} type={'default'}/>\n<StorybookDescriptions componentName={'Slot'} type={'secondary'}/>\n    "
 		},
 		ai: { description: "\nLayout container for action button groups, typically used in dialog footers, cards, or forms. Manages spacing, alignment, and separation between primary (main) and secondary action sets.\nSupports multiple alignments (left, center, right, block) and takes arrays of button props (list, listSecondary) to automatically render Button components.\nFeatures both array-based and slot-based rendering for maximum flexibility. Use for standardizing button layouts and ensuring consistent spacing.\n    " }
@@ -539,6 +540,44 @@ var e = [
 		},
 		ai: { description: "\nFundamental interactive component for user actions, navigation, and form submission. Supports various visual styles (primary, secondary, outline, text), states, and content configurations.\nFeatures built-in support for icons (Material Symbols), loading spinners, and disabled/selected states. Includes native-like navigation via \"to\" (Vue Router) or \"href\" (external) props and supports skeleton loading.\nHighly customizable through design tokens and adaptive layout options. Controlled primarily via click events and various styling props. Use for call-to-actions, navigation links, or icon-only toggle buttons.\n    " }
 	},
+	{
+		name: "ButtonGroup",
+		description: {
+			en: "A container component for grouping multiple buttons together.",
+			ru: "Компонент-контейнер для группировки нескольких кнопок вместе."
+		},
+		possibilities: {
+			en: [
+				"horizontal and vertical orientations",
+				"automatic wrapping for horizontal layout",
+				"passing shared attributes to all buttons",
+				"flexible content via list prop or default slot",
+				"consistent spacing between buttons"
+			],
+			ru: [
+				"горизонтальная и вертикальная ориентация",
+				"автоматический перенос для горизонтального расположения",
+				"передача общих атрибутов всем кнопкам",
+				"гибкий контент через свойство list или слот по умолчанию",
+				"согласованные отступы между кнопками"
+			]
+		},
+		import: [],
+		stories: [{
+			id: "ButtonGroupSlots",
+			name: {
+				en: "Slots usage",
+				ru: "Использование слотов"
+			},
+			template: "\n        <DesignComponent>\n          <template #default>\n            Default Slot\n          </template>\n        </DesignComponent>\n      "
+		}],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'ButtonGroup'} type={'buttonGroup'}/>\n    ",
+			events: "\n<StorybookDescriptions componentName={'Event'} type={'click'}/>\n    ",
+			slots: "\n<Canvas of={Component.ButtonGroupSlots}/>\n<StorybookDescriptions componentName={'Slot'} type={'default'}/>\n    "
+		},
+		ai: { description: "\nThe ButtonGroup component is used to group several buttons together into a single layout.\nIt supports both horizontal and vertical orientations and can automatically wrap buttons if they don't fit in a single line.\nButtons can be defined via the 'list' property as an array of button configurations or via the default slot.\nThe 'buttonAttrs' property allows applying shared attributes (like style, size, etc.) to all buttons in the group at once.\n    " }
+	},
 	{
 		name: "Cell",
 		description: {
@@ -653,7 +692,7 @@ var e = [
 			}
 		],
 		documentation: {
-			body: "\n<StorybookDescriptions componentName={'Checkbox'} type={'checkbox'}/>\n\n<StorybookDescriptions componentName={'Checkbox'} type={'value'}/>\n<StorybookDescriptions componentName={'Checkbox'} type={'indeterminate'}/>\n<StorybookDescriptions componentName={'Value'} type={'v-model'}/>\n<Canvas of={Component.CheckboxVModel}/>\n\n<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>\n<Canvas of={Component.CheckboxSkeleton}/>\n    ",
+			body: "\n<StorybookDescriptions componentName={'Checkbox'} type={'checkbox'}/>\n\n<StorybookDescriptions componentName={'Checkbox'} type={'value'}/>\n<StorybookDescriptions componentName={'Checkbox'} type={'selected'}/>\n<StorybookDescriptions componentName={'Checkbox'} type={'indeterminate'}/>\n<StorybookDescriptions componentName={'Value'} type={'v-model'}/>\n<Canvas of={Component.CheckboxVModel}/>\n\n<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>\n<Canvas of={Component.CheckboxSkeleton}/>\n    ",
 			events: "\n<StorybookDescriptions componentName={'Event'} type={'input'}/>\n<StorybookDescriptions componentName={'Event'} type={'change'}/>\n    ",
 			expose: "\n<StorybookDescriptions componentName={'Expose'} type={'value'}/>\n<StorybookDescriptions componentName={'Expose'} type={'checkValidity'}/>\n<StorybookDescriptions componentName={'Expose'} type={'validationMessage'}/>\n    ",
 			slots: "\n<Canvas of={Component.CheckboxSlots}/>\n<StorybookDescriptions componentName={'Slot'} type={'label'}/>\n<StorybookDescriptions componentName={'Slot'} type={'description'}/>\n    "
@@ -2288,6 +2327,73 @@ var e = [
 			description: "\nStatus indicator for ongoing processes, supporting both linear and circular visual styles. Capable of representing determinate (known percentage) and indeterminate (loading) states with customizable delays for showing/hiding.\nFeatures horizontal bars (linear) and spinner rings (circular) with multiple indeterminate animation types. Includes advanced positioning (top, bottom, static), dense styling for compact UIs, and a point mode for minimal pulsating indicators.\nControlled via the visible, value, and indeterminate props, with support for custom min/max bounds. Use for page-level loading bars, button action feedback, or inline file upload progress.\n    "
 		}
 	},
+	{
+		name: "Radio",
+		description: {
+			en: "Interactive radio button component for single choice selection from a group",
+			ru: "Интерактивный компонент радиокнопки для выбора одного варианта из группы"
+		},
+		possibilities: {
+			en: [
+				"single selection within a group",
+				"built-in validation support with custom messages",
+				"label and description text support",
+				"customizable icons for selected state",
+				"disabled and loading states",
+				"ripple effect on interaction",
+				"skeleton state for loading placeholders",
+				"adaptive layout options",
+				"form integration with name and value attributes"
+			],
+			ru: [
+				"выбор одного значения из группы",
+				"встроенная поддержка валидации с пользовательскими сообщениями",
+				"поддержка текста метки и описания",
+				"настраиваемые иконки для выбранного состояния",
+				"состояния отключения и загрузки",
+				"эффект волны при взаимодействии",
+				"состояние скелетона для заполнителей загрузки",
+				"опции адаптивной разметки",
+				"интеграция с формами через атрибуты name и value"
+			]
+		},
+		import: ["import { ref } from 'vue'"],
+		stories: [
+			{
+				id: "RadioVModel",
+				name: {
+					en: "Two-way binding (v-model)",
+					ru: "Двусторонняя привязка (v-model)"
+				},
+				setup: "\n      return {\n        radioValue: ref('option1')\n      }\n      ",
+				template: "\n        <div class=\"wiki-storybook-flex-column\">\n          <div class=\"wiki-storybook-flex\">\n            <span>Selected: {{ radioValue }}</span>\n          </div>\n          <div class=\"wiki-storybook-flex\">\n            <button class=\"wiki-storybook-button\" @click=\"radioValue = 'option1'\">Set option1</button>\n            <button class=\"wiki-storybook-button\" @click=\"radioValue = 'option2'\">Set option2</button>\n            <button class=\"wiki-storybook-button\" @click=\"radioValue = ''\">Set empty</button>\n          </div>\n          <DesignComponent\n            v-model=\"radioValue\"\n            value-variant=\"option1\"\n            label=\"Option 1\"\n          />\n          <DesignComponent\n            v-model=\"radioValue\"\n            value-variant=\"option2\"\n            label=\"Option 2\"\n          />\n        </div>\n      "
+			},
+			{
+				id: "RadioSkeleton",
+				name: {
+					en: "Skeleton",
+					ru: "Скелетон"
+				},
+				components: ["Skeleton"],
+				template: "\n        <DesignSkeleton :active=\"true\">\n          <div class=\"wiki-storybook-flex-column\">\n            <DesignComponent isSkeleton label=\"Loading radio\" />\n            <DesignComponent isSkeleton label=\"Another loading radio\" />\n          </div>\n        </DesignSkeleton>\n      "
+			},
+			{
+				id: "RadioSlots",
+				name: {
+					en: "Slots usage",
+					ru: "Использование слотов"
+				},
+				template: "\n        <DesignComponent>\n          <template #default>\n            <strong>Custom label slot for Radio</strong>\n          </template>\n          <template #description>\n            <em>Custom description slot for Radio</em>\n          </template>\n        </DesignComponent>\n      "
+			}
+		],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'Radio'} type={'radio'}/>\n\n<StorybookDescriptions componentName={'Radio'} type={'value'}/>\n<StorybookDescriptions componentName={'Value'} type={'v-model'}/>\n<Canvas of={Component.RadioVModel}/>\n\n<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>\n<Canvas of={Component.RadioSkeleton}/>\n    ",
+			events: "\n<StorybookDescriptions componentName={'Event'} type={'input'}/>\n<StorybookDescriptions componentName={'Event'} type={'change'}/>\n    ",
+			expose: "\n<StorybookDescriptions componentName={'Expose'} type={'value'}/>\n<StorybookDescriptions componentName={'Expose'} type={'checkValidity'}/>\n<StorybookDescriptions componentName={'Expose'} type={'validationMessage'}/>\n    ",
+			slots: "\n<Canvas of={Component.RadioSlots}/>\n<StorybookDescriptions componentName={'Slot'} type={'label'}/>\n<StorybookDescriptions componentName={'Slot'} type={'description'}/>\n    "
+		},
+		ai: { description: "\nForm control component for single choice selection. Allows users to select one option from a mutually exclusive set.\nInherits all features from Checkbox but optimized for radio selection behavior. Includes support for labels, descriptions, validation, and loading states.\nControlled via v-model and emits @input/@change events.\n    " }
+	},
 	{
 		name: "Ripple",
 		description: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/wiki",
   "private": false,
-  "version": "0.57.4",
+  "version": "0.57.6",
   "type": "module",
   "description": "Wiki documentation and storybook utilities for DXT UI design system",
   "keywords": [
@@ -40,19 +40,19 @@
     "package.json",
     "LICENSE"
   ],
-  "main": "src/library.ts",
-  "module": "src/library.ts",
-  "types": "src/library.ts",
+  "main": "dist/library.js",
+  "module": "dist/library.js",
+  "types": "dist/src/library.d.ts",
   "exports": {
     ".": {
       "import": "./dist/library.js",
-      "types": "./dist/library.d.ts"
+      "types": "./dist/src/library.d.ts"
     },
+    "./functional/*": "./src/media/functional/*.mdx",
     "./media": {
       "import": "./dist/media.js",
       "types": "./dist/media.d.ts"
     },
-    "./functional/*": "./src/media/functional/*.mdx",
     "./storybook": {
       "import": "./dist/storybook.js",
       "types": "./dist/storybook.d.ts"
@@ -62,14 +62,14 @@
   "engines": {
     "node": ">=20.0.0"
   },
+  "dependencies": {},
   "peerDependencies": {
     "@dxtmisha/functional": "*",
     "@dxtmisha/media": "*",
     "@dxtmisha/styles": "*",
-    "@storybook/addon-docs": "*",
     "@mdx-js/react": "*",
+    "@storybook/addon-docs": "*",
     "react": "*",
     "vue": "*"
-  },
-  "dependencies": {}
+  }
 }

package/src/media/functional/functional-basic/api/api.en.mdx

@@ -10,11 +10,12 @@ The `Api` class is a central utility for making HTTP requests. It provides a sim
 
 The class provides a comprehensive set of tools for managing network communication:
 - **CRUD Methods** — execution of `GET`, `POST`, `PUT`, `PATCH`, `DELETE` requests.
-- **Global Configuration** — setting up base URLs, headers, and parameters.
+- **Global Configuration** — setting up base URLs, origins, headers, and parameters.
 - **Lifecycle Hooks** — handling events before and after the request (e.g., for Refresh Token).
 - **Hydration (SSR)** — transferring data from server to client to prevent duplicate requests.
 - **Caching** — saving responses in memory or external storage (LocalStorage).
 - **Response Emulation** — creating mock data for development and testing.
+- **Automatic Localization** — replacement of `{locale}`, `{country}`, and `{language}` markers in request paths.
 - **Loading and Error Management** — integration with global indicator components and error centers.
 
 ## Basic Usage
@@ -40,7 +41,11 @@ You can configure the API behavior globally, for example, during application ini
 
 ```javascript
 // Set the base URL for all relative paths
-Api.setUrl('https://api.example.com/v1/')
+Api.setUrl('/api/')
+
+// Set the origin (protocol and domain) for the base URL
+// If urlRoot starts with '/', the origin will be prepended to it
+Api.setOrigin('https://api.example.com')
 
 // Add common headers (e.g., an authorization token)
 Api.setHeaders({
@@ -51,6 +56,38 @@ Api.setHeaders({
 Api.setRequestDefault({
   app_version: '1.0.0'
 })
+
+// Check if the server is running on localhost
+if (Api.isLocalhost()) {
+  console.log('Running locally')
+}
+```
+
+### setConfig Method
+
+Allows you to set all main settings with a single object.
+
+```javascript
+Api.setConfig({
+  urlRoot: '/api/',
+  origin: 'https://api.example.com',
+  headers: { 'Authorization': 'Bearer ...' },
+  timeout: 5000,
+  devMode: true
+})
+```
+
+## URL Handling
+
+When forming the final URL, the class automatically replaces special markers with current values from the localization settings (`Geo`):
+- `{locale}` — current locale (e.g., `en-US`).
+- `{country}` — current country (e.g., `us`).
+- `{language}` — current language (e.g., `en`).
+
+```javascript
+// If the current locale is 'en-US', the final path will be '/api/en-US/users'
+const data = await Api.get({ path: '{locale}/users' })
+```
 ```
 
 ## Lifecycle Hooks

package/src/media/functional/functional-basic/api/api.ru.mdx

@@ -10,11 +10,12 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 Класс предоставляет полный набор инструментов для управления сетевым взаимодействием:
 - **CRUD методы** — выполнение `GET`, `POST`, `PUT`, `PATCH`, `DELETE` запросов.
-- **Глобальная конфигурация** — настройка базовых URL, заголовков и параметров.
+- **Глобальная конфигурация** — настройка базовых URL, источников (origin), заголовков и параметров.
 - **Хуки жизненного цикла** — обработка событий до и после запроса (например, для Refresh Token).
 - **Гидратация (SSR)** — передача данных от сервера к клиенту для предотвращения дублирования запросов.
 - **Кэширование** — сохранение ответов в памяти или внешнем хранилище (LocalStorage).
 - **Эмуляция ответов** — создание мок-данных для разработки и тестирования.
+- **Автоматическая локализация** — замена меток `{locale}`, `{country}` и `{language}` в путях запросов.
 - **Управление загрузкой и ошибками** — интеграция с глобальными компонентами индикации и центрами ошибок.
 
 ## Базовое использование
@@ -40,7 +41,11 @@ const newUser = await Api.post<User>({
 
 ```javascript
 // Установка базового URL для всех относительных путей
-Api.setUrl('https://api.example.com/v1/')
+Api.setUrl('/api/')
+
+// Установка источника (протокола и домена) для базового URL
+// Если urlRoot начинается с '/', к нему будет добавлен origin
+Api.setOrigin('https://api.example.com')
 
 // Добавление общих заголовков (например, токен авторизации)
 Api.setHeaders({
@@ -51,6 +56,38 @@ Api.setHeaders({
 Api.setRequestDefault({
   app_version: '1.0.0'
 })
+
+// Проверка, работает ли сервер на localhost
+if (Api.isLocalhost()) {
+  console.log('Работаем локально')
+}
+```
+
+### Метод setConfig
+
+Позволяет установить все основные настройки одним объектом.
+
+```javascript
+Api.setConfig({
+  urlRoot: '/api/',
+  origin: 'https://api.example.com',
+  headers: { 'Authorization': 'Bearer ...' },
+  timeout: 5000,
+  devMode: true
+})
+```
+
+## Работа с URL
+
+При формировании итогового URL класс автоматически заменяет специальные метки на текущие значения из настроек локализации (`Geo`):
+- `{locale}` — текущая локаль (например, `ru-RU`).
+- `{country}` — текущая страна (например, `ru`).
+- `{language}` — текущий язык (например, `ru`).
+
+```javascript
+// Если текущая локаль 'ru-RU', итоговый путь будет '/api/ru-RU/users'
+const data = await Api.get({ path: '{locale}/users' })
+```
 ```
 
 ## Хуки жизненного цикла

package/src/media/functional/functional-basic/api/api.vi.mdx

@@ -10,11 +10,12 @@ Lớp `Api` là công cụ trung tâm để thực hiện các yêu cầu HTTP.
 
 Lớp cung cấp một bộ công cụ toàn diện để quản lý tương tác mạng:
 - **Các phương thức CRUD** — thực hiện các yêu cầu `GET`, `POST`, `PUT`, `PATCH`, `DELETE`.
-- **Cấu hình toàn cục** — thiết lập URL cơ sở, tiêu đề và tham số.
+- **Cấu hình toàn cục** — thiết lập URL cơ sở, nguồn (origin), tiêu đề và tham số.
 - **Hook vòng đời** — xử lý các sự kiện trước và sau yêu cầu (ví dụ: cho Refresh Token).
 - **Hydration (SSR)** — chuyển dữ liệu từ máy chủ sang máy khách để ngăn chặn các yêu cầu trùng lặp.
 - **Bộ nhớ đệm (Caching)** — lưu các phản hồi trong bộ nhớ hoặc bộ nhớ ngoài (LocalStorage).
 - **Giả lập phản hồi** — tạo dữ liệu giả để phát triển và kiểm thử.
+- **Tự động bản địa hóa** — thay thế các nhãn `{locale}`, `{country}` và `{language}` trong đường dẫn yêu cầu.
 - **Quản lý tải và lỗi** — tích hợp với các thành phần chỉ báo toàn cục và trung tâm lỗi.
 
 ## Cách dùng cơ bản
@@ -40,7 +41,11 @@ Bạn có thể cấu hình hành vi của API trên toàn hệ thống, ví d
 
 ```javascript
 // Đặt URL cơ sở cho tất cả các đường dẫn tương đối
-Api.setUrl('https://api.example.com/v1/')
+Api.setUrl('/api/')
+
+// Thiết lập nguồn (giao thức và tên miền) cho URL cơ sở
+// Nếu urlRoot bắt đầu bằng '/', origin sẽ được thêm vào trước nó
+Api.setOrigin('https://api.example.com')
 
 // Thêm các tiêu đề chung (ví dụ: token xác thực)
 Api.setHeaders({
@@ -51,6 +56,38 @@ Api.setHeaders({
 Api.setRequestDefault({
   app_version: '1.0.0'
 })
+
+// Kiểm tra xem máy chủ có đang chạy trên localhost không
+if (Api.isLocalhost()) {
+  console.log('Đang chạy trên máy cục bộ')
+}
+```
+
+### Phương thức setConfig
+
+Cho phép thiết lập tất cả các cài đặt chính bằng một đối tượng duy nhất.
+
+```javascript
+Api.setConfig({
+  urlRoot: '/api/',
+  origin: 'https://api.example.com',
+  headers: { 'Authorization': 'Bearer ...' },
+  timeout: 5000,
+  devMode: true
+})
+```
+
+## Xử lý URL
+
+Khi tạo URL cuối cùng, lớp sẽ tự động thay thế các nhãn đặc biệt bằng các giá trị hiện tại từ cài đặt bản địa hóa (`Geo`):
+- `{locale}` — locale hiện tại (ví dụ: `vi-VN`).
+- `{country}` — quốc gia hiện tại (ví dụ: `vn`).
+- `{language}` — ngôn ngữ hiện tại (ví dụ: `vi`).
+
+```javascript
+// Nếu locale hiện tại là 'vi-VN', đường dẫn cuối cùng sẽ là '/api/vi-VN/users'
+const data = await Api.get({ path: '{locale}/users' })
+```
 ```
 
 ## Hook vòng đời

package/src/library.ts

@@ -1,8 +0,0 @@
-// Classes
-export * from './classes/WikiStorybook'
-export * from './classes/WikiStorybookItem'
-export * from './classes/WikiStorybookProp'
-
-// Types
-export * from './types/storybookTypes'
-export * from './types/wikiTypes'