@velkymx/vibeui 0.8.2 → 0.9.0

package/docs/forms/form-switch.md

@@ -1,47 +0,0 @@
-# VibeFormSwitch
-
-Toggle switch component for boolean values.
-
-## Basic Usage
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const isEnabled = ref(false)
-</script>
-
-<template>
-  <VibeFormSwitch
-    v-model="isEnabled"
-    label="Enable notifications"
-  />
-</template>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `Boolean` | `false` | The toggle state (v-model) |
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `label` | `String` | `undefined` | Label text |
-| `disabled` | `Boolean` | `false` | Disable the switch |
-| `required` | `Boolean` | `false` | Mark as required |
-| `inline` | `Boolean` | `false` | Display inline |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `validateOn` | `'change' \| 'blur'` | `'change'` | When to validate |
-| `helpText` | `String` | `undefined` | Help text |
-
-## Important Notes
-
-**Automatic ID Generation:** This component automatically generates a unique ID if one is not provided.
-
-**Automatic ID Injection:** When used inside a `VibeFormGroup`, this component will automatically inherit the group's ID to ensure proper label association and accessibility.
-
-## Bootstrap CSS Classes
-
-- `.form-check`, `.form-switch`
-- `.form-check-input`
-- `.form-check-label`
-- `.is-valid`, `.is-invalid`

package/docs/forms/form-textarea.md

@@ -1,51 +0,0 @@
-# VibeFormTextarea
-
-Multi-line text input component.
-
-## Basic Usage
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const text = ref('')
-</script>
-
-<template>
-  <VibeFormTextarea
-    v-model="text"
-    label="Comments"
-    placeholder="Enter your comments here..."
-  />
-</template>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `String` | `''` | The textarea value (v-model) |
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `label` | `String` | `undefined` | Label text |
-| `placeholder` | `String` | `undefined` | Placeholder text |
-| `rows` | `Number \| String` | `3` | Number of visible rows |
-| `disabled` | `Boolean` | `false` | Disable the textarea |
-| `readonly` | `Boolean` | `false` | Make readonly |
-| `required` | `Boolean` | `false` | Mark as required |
-| `size` | `'sm' \| 'lg'` | `undefined` | Textarea size |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `validateOn` | `'input' \| 'blur' \| 'change'` | `'blur'` | When to validate |
-| `helpText` | `String` | `undefined` | Help text |
-| `noResize` | `Boolean` | `false` | Disable resizing |
-
-## Important Notes
-
-**Automatic ID Generation:** This component automatically generates a unique ID if one is not provided.
-
-**Automatic ID Injection:** When used inside a `VibeFormGroup`, this component will automatically inherit the group's ID to ensure proper label association and accessibility.
-
-## Bootstrap CSS Classes
-
-- `.form-control`
-- `.form-control-{size}`
-- `.is-valid`, `.is-invalid`

package/docs/forms/form-wysiwyg.md

@@ -1,64 +0,0 @@
-# VibeFormWysiwyg
-
-WYSIWYG (What You See Is What You Get) editor component powered by QuillJS.
-
-## Installation
-
-First, install Quill as a dependency:
-
-```bash
-npm install quill
-```
-
-## Basic Usage
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const content = ref('')
-</script>
-
-<template>
-  <VibeFormWysiwyg
-    v-model="content"
-    label="Content"
-    placeholder="Write something amazing..."
-  />
-</template>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `String` | `''` | The HTML content (v-model) |
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `label` | `String` | `undefined` | Label text |
-| `placeholder` | `String` | `'Write something...'` | Placeholder text |
-| `disabled` | `Boolean` | `false` | Disable the editor |
-| `readonly` | `Boolean` | `false` | Make readonly |
-| `required` | `Boolean` | `false` | Mark as required |
-| `theme` | `'snow' \| 'bubble'` | `'snow'` | Quill theme |
-| `toolbar` | `Array \| String \| Boolean` | default toolbar | Full toolbar configuration |
-| `mobileToolbar` | `Array \| String \| Boolean` | default mobile toolbar | Simplified toolbar for small screens |
-| `height` | `String` | `'200px'` | Minimum height |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `validationRules` | `ValidationRule[] \| ValidatorFunction` | `undefined` | Validation rules |
-| `validateOn` | `'change' \| 'blur'` | `'blur'` | When to validate |
-| `helpText` | `String` | `undefined` | Help text |
-
-## Important Notes
-
-**Automatic Initialization:** This component dynamically imports Quill and initializes it when mounted. If Quill is not installed in your project, it will display a helpful error message.
-
-**Lifecycle Management:** VibeFormWysiwyg automatically cleans up its internal Quill instance and removes orphaned toolbar elements from the DOM on unmount to prevent memory leaks.
-
-**Automatic ID Injection:** When used inside a `VibeFormGroup`, this component will automatically inherit the group's ID for proper label association.
-
-## Bootstrap CSS Classes
-
-- `.vibe-wysiwyg-container`
-- `.is-valid`
-- `.is-invalid`
-- Uses native Quill CSS classes internally.

package/docs/forms/input-group.md

@@ -1,51 +0,0 @@
-# VibeInputGroup
-
-Input groups allow you to prepend or append text, buttons, or other elements to your input fields.
-
-## Basic Usage
-
-```vue
-<VibeInputGroup prepend="@">
-  <VibeFormInput noWrapper v-model="username" placeholder="Username" />
-</VibeInputGroup>
-
-<VibeInputGroup append=".00">
-  <VibeFormInput noWrapper v-model="price" placeholder="Price" />
-</VibeInputGroup>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `prepend` | `String` | `undefined` | Shorthand for prepending text |
-| `append` | `String` | `undefined` | Shorthand for appending text |
-| `size` | `'sm' \| 'lg'` | `undefined` | Size of the input group |
-| `tag` | `String` | `'div'` | HTML tag to use for the container |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | The main content, usually a `VibeFormInput` with the `noWrapper` prop |
-| `prepend` | Slot for complex prepend content (e.g., icons or buttons) |
-| `append` | Slot for complex append content |
-
-## Advanced Example
-
-```vue
-<VibeInputGroup>
-  <template #prepend>
-    <VibeButton variant="outline-secondary">Search</VibeButton>
-  </template>
-  <VibeFormInput noWrapper v-model="query" />
-  <template #append>
-    <span class="input-group-text">
-      <VibeIcon name="search" />
-    </span>
-  </template>
-</VibeInputGroup>
-```
-
-## Mobile Note
-Input groups work seamlessly with the `noWrapper` prop on `VibeFormInput`, ensuring that the Bootstrap `.input-group` classes apply correctly without extra wrapping divs breaking the layout.