KT Components

Vue 3 component library with TypeScript and Storybook.

🚀 Features

• ⚡ Vue 3 with Composition API
• 🔷 TypeScript support
• 📚 Storybook for documentation and development
• 🎨 Modern design with CSS variables
• 📦 Ready for npm publication
• 🔧 Vite for fast development
• 🌍 Localization (English, Russian, Spanish)
• 🔍 JSON Viewer component for debugging

📦 Installation

From npm registry:

npm install kt-components

Note: When installing from Git repository, the library will be automatically built after installing dependencies.

🚀 Usage

Import CSS styles

// In main.js or main.ts
import 'kt-components/style.css'

Option 1: Global registration (recommended)

// main.js
import { createApp } from 'vue'
import KtComponents from 'kt-components' // CSS is imported automatically
import App from './App.vue'

const app = createApp(App)

// Register all components globally
app.use(KtComponents)

app.mount('#app')

Now components are available throughout the application:

<template>
  <div>
    <KtButton variant="primary">Click me</KtButton>
    <KtInput v-model="email" label="Email" type="email" />
    <KtSelect v-model="selected" :options="options" />
    <KtJsonViewer :data="jsonData" />
  </div>
</template>

Option 2: Individual import

<template>
  <div>
    <KtButton variant="primary">Click me</KtButton>
    <KtInput v-model="email" label="Email" type="email" />
    <KtJsonViewer :data="jsonData" />
  </div>
</template>

<script setup>
import { KtButton, KtInput, KtJsonViewer } from 'kt-components' // CSS is imported automatically

const email = ref('')
const jsonData = ref({ name: 'John', age: 30 })
</script>

Option 3: Custom prefix

// main.js
import KtComponents from 'kt-components'

app.use(KtComponents, { prefix: 'My' })
// Now components: MyButton, MyInput, MySelect, MyJsonViewer

🛠️ Development

Install dependencies

npm install

Run Storybook

npm run storybook

Build library

npm run build

Type checking

npm run type-check

📚 Components

KtButton

Button with various variants, sizes and localization.

Props:

• variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
• size: 'sm' | 'md' | 'lg'
• disabled: boolean
• loading: boolean
• type: 'button' | 'submit' | 'reset'
• locale: 'en' | 'ru' | 'es' (default 'en')
• texts: object for custom texts

KtInput

Input field with support for various types, states and localization.

Props:

• type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
• label: string
• placeholder: string
• error: string
• disabled: boolean
• readonly: boolean
• required: boolean
• locale: 'en' | 'ru' | 'es' (default 'en')
• texts: object for custom texts

KtSelect

Select component with support for multiple selection, search and localization.

Props:

• options: SelectOption[]
• modelValue: (string | number)[] | string | number
• multiple: boolean (default true)
• searchable: boolean
• clearable: boolean
• showRadio: boolean (for single selection)
• locale: 'en' | 'ru' | 'es' (default 'en')
• texts: object for custom texts

KtJsonViewer

JSON viewer component for debugging and displaying JSON data with search, zoom, and expand/collapse functionality.

Props:

• data: any - JSON data to display
• initialExpandLevel: number - Initial expansion level (0 = collapsed, 1+ = specific level, -1 = all expanded)
• maxDepth: number - Maximum display depth
• searchable: boolean - Enable search functionality
• enableClipboard: boolean - Show copy button
• enableDownload: boolean - Show download button
• enableExpandCollapse: boolean - Show expand/collapse buttons
• height: string | number - Container height
• maxHeight: string | number - Maximum container height
• width: string | number - Container width
• title: string - Custom title
• locale: 'en' | 'ru' | 'es' (default 'en')
• texts: object for custom texts

Example:

<template>
  <KtJsonViewer 
    :data="jsonData" 
    :initial-expand-level="1"
    :searchable="true"
    :enable-clipboard="true"
    :enable-download="true"
    title="Debug Data"
  />
</template>

<script setup>
const jsonData = ref({
  user: { name: 'John', age: 30 },
  posts: [
    { title: 'First Post', content: 'Hello world' },
    { title: 'Second Post', content: 'Vue is awesome' }
  ],
  metadata: { created: '2024-01-01', version: '1.0.0' }
})
</script>

📖 Detailed documentation is available in Storybook: npm run storybook

🌍 Localization

The library supports 3 languages:

• English (en) - default
• Russian (ru)
• Spanish (es)

Using localization

<template>
  <!-- English (default) -->
  <KtSelect :options="options" />
  
  <!-- Russian -->
  <KtSelect :options="options" locale="ru" />
  
  <!-- Spanish -->
  <KtSelect :options="options" locale="es" />
</template>

Custom texts

<template>
  <KtSelect 
    :options="options"
    locale="en"
    :texts="{
      placeholder: 'Custom placeholder...',
      searchPlaceholder: 'Custom search...',
      noOptions: 'No data found'
    }"
  />
</template>

🎨 Styling

The library uses CSS variables for easy customization:

:root {
  --kt-primary: #3b82f6;
  --kt-secondary: #6b7280;
  --kt-danger: #ef4444;
  /* ... and other variables */
}

📄 License

MIT