@dxtmisha/wiki 0.64.0 → 0.65.0

package/dist/{wikiDescriptions-n3cFkYRZ.js → wikiDescriptions-CRalqVE2.js}

@@ -2025,6 +2025,48 @@ var e = [
 			description: "\nComprehensive navigational component that integrates a trigger (Control), a floating container (Window), and a structured dataset (List). Designed for multi-level menus, context-sensitive actions, and complex selection interfaces requiring icons or grouping.\nFeatures support for hierarchical data structures (nested submenus), real-time AJAX loading, and full keyboard accessibility. Includes sophisticated focus management, automatic positioning relative to the trigger, and a lite rendering mode for optimized performance with large lists.\nControlled via the list prop for items and v-model:selected for state tracking. Use for user profile menus, sidebar navigation, or advanced select-like UI patterns where standard dropdowns lack sufficient structural flexibility.\n    "
 		}
 	},
+	{
+		name: "MenuCountry",
+		description: {
+			en: "Specialized menu for selecting countries with automatic flag and name loading",
+			ru: "Специализированное меню для выбора стран с автоматической загрузкой флагов и названий"
+		},
+		possibilities: {
+			en: [
+				"automatic generation of country list via GeoFlagRef",
+				"filtering by country codes via countryList prop",
+				"all features of the base Menu component",
+				"support for internationalized country names"
+			],
+			ru: [
+				"автоматическая генерация списка стран через GeoFlagRef",
+				"фильтрация по кодам стран через свойство countryList",
+				"все возможности базового компонента Menu",
+				"поддержка интернационализированных названий стран"
+			]
+		},
+		import: ["import { ref } from 'vue'"],
+		render: "\n    <DesignComponent v-bind=\"args\">\n      <template #control=\"{binds}\">\n        <button class=\"wiki-storybook-button\" v-bind=\"binds\">Select Country</button>\n      </template>\n    </DesignComponent>\n  ",
+		stories: [{
+			id: "MenuCountryFilter",
+			name: {
+				en: "Filtering countries",
+				ru: "Фильтрация стран"
+			},
+			setup: "\n      return {\n        selectedValue: ref('US'),\n        list: ['US', 'CA', 'MX', 'GB', 'FR', 'DE', 'IT', 'ES']\n      }\n      ",
+			template: "\n        <DesignComponent\n          v-model:selected=\"selectedValue\"\n          :country-list=\"list\"\n          is-selected-by-value\n        >\n          <template #control=\"{binds, selectedNames}\">\n            <button class=\"wiki-storybook-button\" v-bind=\"binds\">\n              Selected: {{ selectedNames.value[0] || 'None' }}\n            </button>\n          </template>\n        </DesignComponent>\n      "
+		}],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'MenuCountry'} type={'menuCountry'}/>\n<Canvas of={Component.MenuCountryFilter}/>\n    ",
+			events: "\n<StorybookDescriptions componentName={'Event'} type={'click'}/>\n<StorybookDescriptions componentName={'Menu'} type={'event.updateValue'}/>\n    ",
+			expose: "\n<StorybookDescriptions componentName={'Expose'} type={'selected'}/>\n<StorybookDescriptions componentName={'Menu'} type={'expose.navigation'}/>\n    ",
+			slots: "\n<StorybookDescriptions componentName={'Menu'} type={'slotsControl'}/>\n<StorybookDescriptions componentName={'Menu'} type={'slots'}/>\n    "
+		},
+		ai: {
+			render: "\n<div :class=\"classDemo.item\">\n  <MenuCountry v-bind=\"args\">\n    <template #control=\"{ binds }\">\n      <button class=\"wiki-storybook-button\" v-bind=\"binds\">\n        Select Country\n      </button>\n    </template>\n  </MenuCountry>\n</div>\n    ",
+			description: "\nThe MenuCountry component is a specialized version of the Menu component, designed specifically for country selection.\nIt leverages the GeoFlagRef utility to automatically populate the menu with a list of countries, including their flags and localized names.\nIt supports all the standard Menu functionalities like Window-based popups, custom controls, and sophisticated focus management.\nUse the 'countryList' prop to restrict the selection to a specific subset of countries.\n    "
+		}
+	},
 	{
 		name: "Modal",
 		description: {
@@ -2502,7 +2544,7 @@ var e = [
 				"функция скрытия всех разделительных линий"
 			]
 		},
-		render: "\n      <D1Scrollbar\n        class=\"wiki-storybook-item--widescreen wiki-storybook-item--squared--sm\"\n        v-bind=\"args\"\n      >\n        <div class=\"wiki-storybook-scrollbar-content\">\n          <h3>Modern Web Interfaces and User Experience Design</h3>\n          <p>In today's digital landscape, creating high-quality user interfaces has become a critical aspect of web application development. User interface components must not only be functional but also provide intuitive interaction patterns that enhance the overall user experience. The evolution of web technologies has enabled developers to create more sophisticated and engaging interfaces.</p>\n\n          <p>Scrollbars play a particularly important role in content navigation and information architecture. They allow users to easily navigate through large volumes of information while maintaining context and orientation within the document structure. Modern scrollbars should be adaptive, responsive, and visually appealing while providing consistent behavior across different platforms and devices.</p>\n\n          <h4>Principles of Effective Design Implementation</h4>\n          <p>Effective scrollbar design takes into account multiple factors ranging from performance optimization to accessibility compliance. It's essential to ensure smooth animations, proper handling of various input devices, and comprehensive keyboard navigation support. Cross-browser compatibility remains a top priority, especially when dealing with custom scrollbar implementations that need to work consistently across different rendering engines.</p>\n\n          <p>Users expect scrollbars to work predictably and uniformly throughout all parts of an application. This requires thorough testing and optimization for various usage scenarios, including mobile devices, desktop computers, and touch-enabled interfaces. The component must handle edge cases gracefully and provide appropriate feedback for user interactions.</p>\n\n          <h4>Technical Implementation Considerations</h4>\n          <p>When developing scrollbar components, it's crucial to consider rendering performance, especially when working with large datasets or dynamically generated content. Content virtualization, lazy loading strategies, and DOM operation optimization help ensure smooth performance even on less powerful devices. Memory management becomes particularly important in single-page applications where components may be mounted and unmounted frequently.</p>\n\n          <p>Modern frameworks provide numerous tools for creating customizable scrollbars, but it's important to find the right balance between functionality and ease of use. The component should be easily integrable into existing projects while supporting various configuration options and customization possibilities. API design should be intuitive and follow established patterns within the framework ecosystem.</p>\n\n          <h4>Future Trends and Accessibility</h4>\n          <p>The future of web development is moving towards creating more inclusive and accessible interfaces, where every element, including scrollbars, contributes to improving the overall user experience. This includes support for screen readers, high contrast modes, and reduced motion preferences. Progressive enhancement ensures that the scrollbar functionality works across all user scenarios.</p>\n\n          <p>Emerging technologies like CSS container queries and new scrolling APIs continue to expand the possibilities for creating more sophisticated scrolling experiences. The integration of these technologies with existing design systems requires careful planning and consideration of backward compatibility.</p>\n        </div>\n      </D1Scrollbar>\n    ",
+		render: "\n      <DesignComponent\n        class=\"wiki-storybook-item--widescreen wiki-storybook-item--squared--sm\"\n        v-bind=\"args\"\n      >\n        <div class=\"wiki-storybook-scrollbar-content\">\n          <h3>Modern Web Interfaces and User Experience Design</h3>\n          <p>In today's digital landscape, creating high-quality user interfaces has become a critical aspect of web application development. User interface components must not only be functional but also provide intuitive interaction patterns that enhance the overall user experience. The evolution of web technologies has enabled developers to create more sophisticated and engaging interfaces.</p>\n\n          <p>Scrollbars play a particularly important role in content navigation and information architecture. They allow users to easily navigate through large volumes of information while maintaining context and orientation within the document structure. Modern scrollbars should be adaptive, responsive, and visually appealing while providing consistent behavior across different platforms and devices.</p>\n\n          <h4>Principles of Effective Design Implementation</h4>\n          <p>Effective scrollbar design takes into account multiple factors ranging from performance optimization to accessibility compliance. It's essential to ensure smooth animations, proper handling of various input devices, and comprehensive keyboard navigation support. Cross-browser compatibility remains a top priority, especially when dealing with custom scrollbar implementations that need to work consistently across different rendering engines.</p>\n\n          <p>Users expect scrollbars to work predictably and uniformly throughout all parts of an application. This requires thorough testing and optimization for various usage scenarios, including mobile devices, desktop computers, and touch-enabled interfaces. The component must handle edge cases gracefully and provide appropriate feedback for user interactions.</p>\n\n          <h4>Technical Implementation Considerations</h4>\n          <p>When developing scrollbar components, it's crucial to consider rendering performance, especially when working with large datasets or dynamically generated content. Content virtualization, lazy loading strategies, and DOM operation optimization help ensure smooth performance even on less powerful devices. Memory management becomes particularly important in single-page applications where components may be mounted and unmounted frequently.</p>\n\n          <p>Modern frameworks provide numerous tools for creating customizable scrollbars, but it's important to find the right balance between functionality and ease of use. The component should be easily integrable into existing projects while supporting various configuration options and customization possibilities. API design should be intuitive and follow established patterns within the framework ecosystem.</p>\n\n          <h4>Future Trends and Accessibility</h4>\n          <p>The future of web development is moving towards creating more inclusive and accessible interfaces, where every element, including scrollbars, contributes to improving the overall user experience. This includes support for screen readers, high contrast modes, and reduced motion preferences. Progressive enhancement ensures that the scrollbar functionality works across all user scenarios.</p>\n\n          <p>Emerging technologies like CSS container queries and new scrolling APIs continue to expand the possibilities for creating more sophisticated scrolling experiences. The integration of these technologies with existing design systems requires careful planning and consideration of backward compatibility.</p>\n        </div>\n      </DesignComponent>\n    ",
 		import: [],
 		stories: [],
 		documentation: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/wiki",
   "private": false,
-  "version": "0.64.0",
+  "version": "0.65.0",
   "type": "module",
   "description": "Wiki documentation and storybook utilities for DXT UI design system",
   "keywords": [