@studio-west/component-sw 0.11.9 → 0.11.10

package/README.md

@@ -58,7 +58,7 @@ The `Component SW` library provides a set of ready-to-use UI components on Vue 3
 npm install @studio-west/component-sw 
 ```
 
-### Глобальное подключение  / global add to main.js:
+### Глобальное подключение  / global add to main.js(:
 ```js
 import { Library } from '@studio-west/component-sw';
 import '@studio-west/component-sw/dist/component-sw.css';
@@ -720,10 +720,10 @@ model - состояние чекбокса (checked ) булевое  знач
     ]
 </script>
 <sw-table :data="table">
-  <sw-table-Colum label="Label" prop="title">
-      <sw-table-Colum label="City" prop="city"/>
-      <sw-table-Colum label="District" prop="district"/>
-  </sw-table-Colum>
+  <sw-table-Column label="Label" prop="title">
+      <sw-table-Column label="City" prop="city"/>
+      <sw-table-Column label="District" prop="district"/>
+  </sw-table-Column>
 </sw-table>
 ```
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-west/component-sw",
-  "version": "0.11.9",
+  "version": "0.11.10",
   "description": "Vue components of Component-SW collection.",
   "type": "module",
   "keywords": [

package/types/components.d.ts

@@ -0,0 +1,39 @@
+// Dynamic component declarations
+import type { DefineComponent } from 'vue'
+
+// This creates a dynamic mapping of all Vue components in the components directory
+type ComponentFiles = typeof import('../src/components/*.vue')
+
+// Extract component names and create both naming conventions
+type ComponentName<T extends string> = T extends `./src/components/${infer Name}.vue` 
+    ? Name
+    : never
+
+// Convert kebab-case to PascalCase
+type PascalCase<T extends string> = T extends `${infer First}-${infer Rest}`
+    ? `${Capitalize<First>}${PascalCase<Rest>}`
+    : Capitalize<T>
+
+// Create both naming convention mappings
+type KebabCaseComponents = {
+    [K in keyof ComponentFiles as `sw-${ComponentName<K>}`]: DefineComponent<any>
+}
+
+type PascalCaseComponents = {
+    [K in keyof ComponentFiles as `Sw${PascalCase<ComponentName<K>>}`]: DefineComponent<any>
+}
+
+// Augment Vue's GlobalComponents interface to support both conventions
+declare module 'vue' {
+    interface GlobalComponents extends KebabCaseComponents, PascalCaseComponents {}
+}
+
+// Also augment our own module for direct imports
+declare module '@studio-west/component-sw' {
+    export const components: Record<string, DefineComponent>
+    export const Alert: (options?: any) => void
+    export const Library: any
+    
+    // Re-export all components individually
+    export type * from '../src/components/*.vue'
+}

package/types/index.d.ts

@@ -69,32 +69,20 @@ export type SwInput = DefineComponent<SwInputProps>
 export type SwSwitch = DefineComponent<SwSwitchProps>
 export type SwSelect = DefineComponent<SwSelectProps>
 
-// Global component registration
+// Dynamic Global Components interface
+type ComponentNames = keyof typeof import('../src/components/*.vue')
+type PascalCase<T extends string> = T extends `${infer First}-${infer Rest}` 
+    ? `${Capitalize<First>}${PascalCase<Rest>}` 
+    : Capitalize<T>
+
+type AvailableComponents = {
+    [K in ComponentNames as `Sw${PascalCase<K>}`]: DefineComponent<any>
+}
+
+// Global component registration - dynamically typed
 declare module 'vue' {
-    export interface GlobalComponents {
-        SwButton: typeof import('../src/components/SwButton.vue')['default']
-        SwInput: typeof import('../src/components/SwInput.vue')['default']
-        SwSwitch: typeof import('../src/components/SwSwitch.vue')['default']
-        SwSelect: typeof import('../src/components/SwSelect.vue')['default']
-        SwAlert: typeof import('../src/components/SwAlert.vue')['default']
-        SwButtonGroup: typeof import('../src/components/SwButtonGroup.vue')['default']
-        SwCollapse: typeof import('../src/components/SwCollapse.vue')['default']
-        SwDropdown: typeof import('../src/components/SwDropdown.vue')['default']
-        SwDropdownItem: typeof import('../src/components/SwDropdownItem.vue')['default']
-        SwDropdownNew: typeof import('../src/components/SwDropdownNew.vue')['default']
-        SwFormItem: typeof import('../src/components/SwFormItem.vue')['default']
-        SwGide: typeof import('../src/components/SwGide.vue')['default']
-        SwIcon: typeof import('../src/components/SwIcon.vue')['default']
-        SwMessage: typeof import('../src/components/SwMessage.vue')['default']
-        SwSection: typeof import('../src/components/SwSection.vue')['default']
-        SwSkeleton: typeof import('../src/components/SwSkeleton.vue')['default']
-        SwSkeletonItem: typeof import('../src/components/SwSkeletonItem.vue')['default']
-        SwSlider: typeof import('../src/components/SwSlider.vue')['default']
-        SwTable: typeof import('../src/components/SwTable.vue')['default']
-        SwTableColumn: typeof import('../src/components/SwTableColumn.vue')['default']
-        SwTabs: typeof import('../src/components/SwTabs.vue')['default']
-        SwTabsPane: typeof import('../src/components/SwTabsPane.vue')['default']
-    }
+    export interface GlobalComponents extends AvailableComponents {}
 }
 
+// Named exports to match src/index.js
 export { Library, components, Alert }