### Run Vlossom Development Server

Source: https://github.com/pubg/vlossom/blob/main/README.md

This command navigates to the vlossom package directory and starts the development server, allowing for local experimentation with components. This requires Node.js and npm.

```bash
cd packages/vlossom
npm run dev
```

--------------------------------

### Setup Project Dependencies and Run Storybook

Source: https://github.com/pubg/vlossom/blob/main/CONTRIBUTING.md

Clones the vlossom repository, installs npm dependencies, and starts the Storybook development server for the vlossom package. This is a prerequisite for UI component development.

```sh
git clone https://github.com.<your_github_username>/vlossom.git
cd vlossom
npm install
cd packages/vlossom
npm run storybook
```

--------------------------------

### Install Vlossom via npm

Source: https://github.com/pubg/vlossom/blob/main/README.md

This command installs the Vlossom UI library into your project using npm. Ensure you have Node.js and npm installed on your system.

```bash
npm i vlossom
```

--------------------------------

### VsTooltip Component Examples (Vue)

Source: https://context7.com/pubg/vlossom/llms.txt

Illustrates the functionality of the VsTooltip component for displaying contextual information. It covers various configurations including placement, click triggers, custom delays, and hoverable content.

```vue
<template>
  <div>
    <!-- Basic tooltip -->
    <vs-tooltip>
      <vs-button>Hover me</vs-button>
      <template #tooltip>
        This is a tooltip message
      </template>
    </vs-tooltip>

    <!-- Different placements -->
    <vs-tooltip placement="top">
      <span>Top</span>
      <template #tooltip>Tooltip on top</template>
    </vs-tooltip>

    <vs-tooltip placement="right">
      <span>Right</span>
      <template #tooltip>Tooltip on right</template>
    </vs-tooltip>

    <vs-tooltip placement="bottom">
      <span>Bottom</span>
      <template #tooltip>Tooltip on bottom</template>
    </vs-tooltip>

    <vs-tooltip placement="left">
      <span>Left</span>
      <template #tooltip>Tooltip on left</template>
    </vs-tooltip>

    <!-- Click to show tooltip -->
    <vs-tooltip clickable>
      <vs-button>Click me</vs-button>
      <template #tooltip>
        Click tooltip content
      </template>
    </vs-tooltip>

    <!-- Tooltip with hoverable content -->
    <vs-tooltip contents-hover :leave-delay="300">
      <span>Hover for interactive tooltip</span>
      <template #tooltip>
        <div>
          <p>You can interact with this content</p>
          <vs-button dense>Click me</vs-button>
        </div>
      </template>
    </vs-tooltip>

    <!-- Custom delays -->
    <vs-tooltip :enter-delay="500" :leave-delay="200">
      <span>Delayed tooltip</span>
      <template #tooltip>Shows after 500ms delay</template>
    </vs-tooltip>

    <!-- With custom margin -->
    <vs-tooltip :margin="15">
      <span>More margin</span>
      <template #tooltip>15px margin from trigger</template>
    </vs-tooltip>

    <!-- Disabled tooltip -->
    <vs-tooltip disabled>
      <span>Disabled tooltip</span>
      <template #tooltip>This won't show</template>
    </vs-tooltip>
  </div>
</template>
```

--------------------------------

### Execute Tests and Storybook for Development

Source: https://github.com/pubg/vlossom/blob/main/CONTRIBUTING.md

Commands to run all project tests and start the Storybook server. These are crucial for ensuring code quality and developing UI components, respectively.

```sh
npm run test
npm run storybook
```

--------------------------------

### VsButton Component Examples

Source: https://context7.com/pubg/vlossom/llms.txt

Demonstrates the usage of the VsButton component in Vue 3, showcasing various styles like primary, outline, dense, large, loading states, and custom styling.

```vue
<template>
  <div>
    <!-- Basic button -->
    <vs-button>Click Me</vs-button>

    <!-- Primary styled button -->
    <vs-button primary>Primary Action</vs-button>

    <!-- Outline button with color scheme -->
    <vs-button outline color-scheme="red">Delete</vs-button>

    <!-- Loading state -->
    <vs-button :loading="isLoading" @click="handleSubmit">
      Submit
    </vs-button>

    <!-- Dense and large variants -->
    <vs-button dense>Small</vs-button>
    <vs-button large>Large</vs-button>

    <!-- Circle button -->
    <vs-button circle>+</vs-button>

    <!-- Disabled state -->
    <vs-button disabled>Disabled</vs-button>

    <!-- With custom style set -->
    <vs-button style-set="myCustomButton">Custom Styled</vs-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isLoading = ref(false);

async function handleSubmit() {
  isLoading.value = true;
  await new Promise(resolve => setTimeout(resolve, 2000));
  isLoading.value = false;
}
</script>
```

--------------------------------

### VsInput Component Examples

Source: https://context7.com/pubg/vlossom/llms.txt

Illustrates the Vlossom VsInput component for text inputs in Vue 3. Covers features like labels, validation, input types, clear functionality, and states.

```vue
<template>
  <div>
    <!-- Basic input with label -->
    <vs-input
      v-model="username"
      label="Username"
      placeholder="Enter username"
    />

    <!-- Password input -->
    <vs-input
      v-model="password"
      type="password"
      label="Password"
      required
    />

    <!-- Number input with min/max -->
    <vs-input
      v-model="age"
      type="number"
      label="Age"
      :min="0"
      :max="120"
    />

    <!-- Input with validation rules -->
    <vs-input
      v-model="email"
      label="Email"
      :rules="[emailRule]"
      @update:valid="handleValidation"
    />

    <!-- Input with prepend/append slots -->
    <vs-input v-model="price" label="Price">
      <template #prepend>$</template>
      <template #append>.00</template>
    </vs-input>

    <!-- Readonly and disabled states -->
    <vs-input v-model="readonlyValue" label="Readonly" readonly />
    <vs-input v-model="disabledValue" label="Disabled" disabled />

    <!-- Dense input -->
    <vs-input v-model="compactValue" label="Compact" dense />

    <!-- No clear button -->
    <vs-input v-model="noClearValue" label="No Clear" no-clear />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const username = ref('');
const password = ref('');
const age = ref(25);
const email = ref('');
const price = ref('99');
const readonlyValue = ref('Cannot edit');
const disabledValue = ref('Disabled');
const compactValue = ref('');
const noClearValue = ref('');

const emailRule = (value: string) => {
  const emailRegex = /^[^s@]+@[^s@]+\.[^s@]+$/;
  return emailRegex.test(value) ? '' : 'Please enter a valid email address';
};

function handleValidation(isValid: boolean) {
  console.log('Email is valid:', isValid);
}
</script>
```

--------------------------------

### VsDrawer Component Examples (Vue)

Source: https://context7.com/pubg/vlossom/llms.txt

Demonstrates the usage of the VsDrawer component for creating slide-out panels. It showcases different placements (left, right, bottom), sizing, and interactive features like closing on click or escape key.

```vue
<template>
  <vs-layout>
    <vs-button @click="showDrawer = true">Open Drawer</vs-button>

    <!-- Left drawer (default) -->
    <vs-drawer
      v-model="showDrawer"
      placement="left"
      size="sm"
      dimmed
      dim-close
      esc-close
    >
      <template #header>
        <h3>Navigation</h3>
      </template>

      <nav>
        <ul>
          <li><a href="#">Dashboard</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Profile</a></li>
        </ul>
      </nav>

      <template #footer>
        <vs-button @click="showDrawer = false">Close</vs-button>
      </template>
    </vs-drawer>

    <!-- Right drawer with custom size -->
    <vs-drawer
      v-model="showRightDrawer"
      placement="right"
      size="400px"
      @open="handleOpen"
      @close="handleClose"
    >
      <h3>Details Panel</h3>
      <p>Content goes here...</p>
    </vs-drawer>

    <!-- Bottom drawer -->
    <vs-drawer
      v-model="showBottomDrawer"
      placement="bottom"
      size="300px"
    >
      <h3>Bottom Sheet</h3>
      <p>Action buttons or additional content</p>
    </vs-drawer>

    <!-- Fixed drawer (stays above other content) -->
    <vs-drawer
      v-model="showFixedDrawer"
      fixed
      placement="left"
      scroll-lock
    >
      <h3>Fixed Drawer</h3>
    </vs-drawer>
  </vs-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showDrawer = ref(false);
const showRightDrawer = ref(false);
const showBottomDrawer = ref(false);
const showFixedDrawer = ref(false);

function handleOpen() {
  console.log('Drawer opened');
}

function handleClose() {
  console.log('Drawer closed');
}
</script>
```

--------------------------------

### VsCheckbox Component Examples in Vue.js

Source: https://context7.com/pubg/vlossom/llms.txt

Demonstrates various ways to use the VsCheckbox component, including single values, arrays for multiple selections, indeterminate states, custom true/false values, and beforeChange callbacks. It requires Vue.js and the VsCheckbox component.

```vue
<template>
  <div>
    <!-- Basic checkbox -->
    <vs-checkbox
      v-model="isEnabled"
      check-label="Enable notifications"
    />

    <!-- With label slot -->
    <vs-checkbox v-model="agreeTerms" required>
      <template #check-label>
        I agree to the <a href="#">terms of service</a>
      </template>
    </vs-checkbox>

    <!-- Custom true/false values -->
    <vs-checkbox
      v-model="status"
      :true-value="'active'"
      :false-value="'inactive'"
      check-label="Account Status"
    />

    <!-- Indeterminate state -->
    <vs-checkbox
      v-model="selectAll"
      :indeterminate="isIndeterminate"
      check-label="Select All"
      @change="handleSelectAll"
    />

    <!-- Multiple checkboxes with array -->
    <vs-checkbox
      v-model="selectedItems"
      :true-value="'item1'"
      multiple
      check-label="Item 1"
    />
    <vs-checkbox
      v-model="selectedItems"
      :true-value="'item2'"
      multiple
      check-label="Item 2"
    />
    <vs-checkbox
      v-model="selectedItems"
      :true-value="'item3'"
      multiple
      check-label="Item 3"
    />

    <!-- With beforeChange callback -->
    <vs-checkbox
      v-model="confirmedAction"
      :before-change="confirmChange"
      check-label="Confirm action"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const isEnabled = ref(false);
const agreeTerms = ref(false);
const status = ref('inactive');
const selectAll = ref(false);
const selectedItems = ref<string[]>([]);
const confirmedAction = ref(false);

const isIndeterminate = computed(() =>
  selectedItems.value.length > 0 && selectedItems.value.length < 3
);

function handleSelectAll(checked: boolean) {
  if (checked) {
    selectedItems.value = ['item1', 'item2', 'item3'];
  } else {
    selectedItems.value = [];
  }
}

async function confirmChange(from: boolean, to: boolean): Promise<boolean> {
  if (to) {
    return window.confirm('Are you sure you want to enable this?');
  }
  return true;
}
</script>
```

--------------------------------

### VsModal Component Examples in Vue.js

Source: https://context7.com/pubg/vlossom/llms.txt

Illustrates the usage of the VsModal component for creating dialogs with programmatic control, customizable sizes, and various options like focus trapping and scroll locking. It requires Vue.js and the VsModal component.

```vue
<template>
  <div>
    <!-- Basic modal with v-model -->
    <vs-button @click="showModal = true">Open Modal</vs-button>

    <vs-modal
      v-model="showModal"
      @open="handleOpen"
      @close="handleClose"
    >
      <div class="modal-content">
        <h2>Modal Title</h2>
        <p>This is the modal content.</p>
        <vs-button @click="showModal = false">Close</vs-button>
      </div>
    </vs-modal>

    <!-- Modal with size options -->
    <vs-modal
      v-model="showSizedModal"
      :size="{ width: '600px', height: '400px' }"
    >
      <div class="modal-content">
        <h2>Sized Modal</h2>
        <p>This modal has a custom size.</p>
      </div>
    </vs-modal>

    <!-- Modal with options -->
    <vs-modal
      v-model="showOptionsModal"
      :dim-close="false"
      :esc-close="true"
      :scroll-lock="true"
      :focus-lock="true"
    >
      <div class="modal-content">
        <h2>Options Modal</h2>
        <p>Click outside won't close. Press Escape to close.</p>
      </div>
    </vs-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showModal = ref(false);
const showSizedModal = ref(false);
const showOptionsModal = ref(false);

function handleOpen() {
  console.log('Modal opened');
}

function handleClose() {
  console.log('Modal closed');
}
</script>
```

--------------------------------

### Use Vlossom Theme Toggle and Style Sets in Vue Components (Vue SFC)

Source: https://context7.com/pubg/vlossom/llms.txt

This example demonstrates how to use Vlossom components for theme toggling and applying custom style sets within a Vue 3 Single File Component. It utilizes the useVlossom composable to access theme control functions and reactive properties. Dependencies include Vue 3 and Vlossom.

```vue
<template>
  <div>
    <!-- Theme toggle button -->
    <vs-theme-button />

    <!-- Or programmatic theme control -->
    <vs-button @click="toggleTheme">Toggle Theme</vs-button>

    <!-- Components with style sets -->
    <vs-button style-set="primary">Primary Styled</vs-button>
    <vs-button style-set="danger">Danger Styled</vs-button>
    <vs-input style-set="outlined" v-model="value" />

    <!-- Component-level color scheme override -->
    <vs-button color-scheme="red">Red Button</vs-button>
    <vs-input color-scheme="blue" v-model="value" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useVlossom } from 'vlossom';

const $vs = useVlossom();
const value = ref('');

function toggleTheme() {
  $vs.toggleTheme();
  // Or set explicitly: $vs.theme = 'dark';
}

// Access current theme
console.log('Current theme:', $vs.theme);

// Update global color scheme at runtime
$vs.colorScheme = {
  VsButton: 'purple',
  VsInput: 'teal'
};
</script>
```

--------------------------------

### VsSelect: Basic and Advanced Dropdown Select Component (Vue.js)

Source: https://context7.com/pubg/vlossom/llms.txt

The VsSelect component enables single or multiple selections from a list of options. It supports features like autocomplete filtering, custom option rendering, lazy loading, and selection limits. This example showcases various configurations including basic selection, multiple selections with chips, autocomplete search, object options with custom labels/values, select all functionality, and min/max selection constraints.

```vue
<template>
  <div>
    <!-- Basic select -->
    <vs-select
      v-model="selectedFruit"
      :options="fruits"
      label="Select Fruit"
      placeholder="Choose a fruit"
    />

    <!-- Multiple selection -->
    <vs-select
      v-model="selectedColors"
      :options="colors"
      label="Select Colors"
      multiple
      closable-chips
    />

    <!-- With autocomplete -->
    <vs-select
      v-model="selectedCountry"
      :options="countries"
      label="Search Country"
      autocomplete
    />

    <!-- Object options with custom label/value -->
    <vs-select
      v-model="selectedUser"
      :options="users"
      option-label="name"
      option-value="id"
      label="Select User"
    />

    <!-- Multiple with select all -->
    <vs-select
      v-model="selectedPermissions"
      :options="permissions"
      label="Permissions"
      multiple
      select-all
      collapse-chips
    />

    <!-- With min/max selection limits -->
    <vs-select
      v-model="selectedTags"
      :options="tags"
      label="Select 2-5 Tags"
      multiple
      :min="2"
      :max="5"
    />

    <!-- Custom option template -->
    <vs-select
      v-model="selectedProduct"
      :options="products"
      option-label="name"
      option-value="id"
      label="Select Product"
    >
      <template #option="{ option, label, selected }">
        <div :class="{ 'selected': selected }">
          <strong>{{ label }}</strong>
          <span> - ${{ option.price }}</span>
        </div>
      </template>
    </vs-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
const colors = ['Red', 'Green', 'Blue', 'Yellow', 'Purple'];
const countries = ['United States', 'Canada', 'United Kingdom', 'Germany', 'France'];
const permissions = ['Read', 'Write', 'Delete', 'Admin'];
const tags = ['JavaScript', 'TypeScript', 'Vue', 'React', 'Angular', 'Svelte'];

const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Smith' },
  { id: 3, name: 'Bob Johnson' }
];

const products = [
  { id: 1, name: 'Widget', price: 29.99 },
  { id: 2, name: 'Gadget', price: 49.99 },
  { id: 3, name: 'Gizmo', price: 19.99 }
];

const selectedFruit = ref('');
const selectedColors = ref<string[]>([]);
const selectedCountry = ref('');
const selectedUser = ref(null);
const selectedPermissions = ref<string[]>([]);
const selectedTags = ref<string[]>([]);
const selectedProduct = ref(null);
</script>

```

--------------------------------

### VsForm: Form Wrapper Component for Validation and State Management (Vue.js)

Source: https://context7.com/pubg/vlossom/llms.txt

The VsForm component acts as a wrapper for form elements, providing built-in validation management, change detection, and the ability to set form-level disabled or readonly states. It emits events for validation errors and allows for programmatic control of form state. This example demonstrates setting up required fields, custom validation rules, and handling form submission and reset.

```vue
<template>
  <vs-form
    ref="formRef"
    v-model:valid="isFormValid"
    v-model:changed="isFormChanged"
    :disabled="isSubmitting"
    @error="handleFormError"
  >
    <vs-input
      v-model="formData.name"
      label="Full Name"
      required
      :rules="[minLength(3)]"
    />

    <vs-input
      v-model="formData.email"
      label="Email"
      type="email"
      required
      :rules="[emailRule]"
    />

    <vs-select
      v-model="formData.role"
      :options="roles"
      label="Role"
      required
    />

    <vs-checkbox
      v-model="formData.agree"
      check-label="I agree to the terms and conditions"
      required
    />

    <div class="form-actions">
      <vs-button @click="resetForm">Reset</vs-button>
      <vs-button
        primary
        :disabled="!isFormValid"
        :loading="isSubmitting"
        @click="submitForm"
      >
        Submit
      </vs-button>
    </div>
  </vs-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

const formRef = ref<any>(null);
const isFormValid = ref(true);
const isFormChanged = ref(false);
const isSubmitting = ref(false);

const formData = reactive({
  name: '',
  email: '',
  role: '',
  agree: false
});

const roles = ['Admin', 'Editor', 'Viewer'];

const minLength = (min: number) => (value: string) =>
  value.length >= min ? '' : `Must be at least ${min} characters`;

const emailRule = (value: string) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(value) ? '' : 'Invalid email format';
};

function handleFormError(invalidIds: string[]) {
  console.log('Invalid fields:', invalidIds);
}

async function submitForm() {
  const valid = await formRef.value?.validate();
  if (!valid) return;

  isSubmitting.value = true;
  try {
    // Submit form data
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('Form submitted:', formData);
  } finally {
    isSubmitting.value = false;
  }
}

function resetForm() {
  formRef.value?.clear();
  formData.name = '';
  formData.email = '';
  formData.role = '';
  formData.agree = false;
}
</script>

```

--------------------------------

### Run Vlossom Storybook

Source: https://github.com/pubg/vlossom/blob/main/README.md

This command navigates to the vlossom package directory and launches Storybook, which showcases the library's components and their usage. This requires Node.js and npm.

```bash
cd packages/vlossom
npm run storybook
```

--------------------------------

### Run Development and Testing Commands

Source: https://github.com/pubg/vlossom/blob/main/CONTRIBUTING.md

Provides commands for running Storybook, tests, and the development playground within the 'packages/vlossom' directory. Also includes the command to run the dev server for the 'packages/docs' directory.

```sh
# in packages/vlossom
npm run storybook
npm run test
npm run dev

# in packages/docs
npm run dev
```

--------------------------------

### Configure Vlossom Global Theming and Styles (TypeScript)

Source: https://context7.com/pubg/vlossom/llms.txt

This snippet shows the global configuration of Vlossom in a Vue 3 application using TypeScript. It covers theme settings, radius ratio, global color schemes for components, and custom style sets for components like buttons and inputs. It requires the 'vlossom' and 'vue' packages.

```typescript
import { createApp } from 'vue';
import { createVlossom } from 'vlossom';
import 'vlossom/styles';
import App from './App.vue';

const app = createApp(App);

const vlossom = createVlossom({
  // Theme settings
  theme: 'light',
  detectOSTheme: true,  // Auto-detect OS theme preference
  darkThemeClass: 'dark-mode',  // Custom class for dark mode

  // Global radius ratio for all components
  radiusRatio: 1,

  // Global color schemes per component
  colorScheme: {
    VsButton: 'blue',
    VsInput: 'green',
    VsSelect: 'purple'
  },

  // Custom style sets
  styleSet: {
    VsButton: {
      primary: {
        backgroundColor: '#1976d2',
        color: '#ffffff',
        borderRadius: '8px',
        fontWeight: '600'
      },
      danger: {
        backgroundColor: '#d32f2f',
        color: '#ffffff'
      }
    },
    VsInput: {
      outlined: {
        border: '2px solid #ccc',
        borderRadius: '4px'
      }
    }
  }
});

app.use(vlossom);
app.mount('#app');
```

--------------------------------

### Implement Pagination with VsPagination Component

Source: https://context7.com/pubg/vlossom/llms.txt

The VsPagination component facilitates navigation through paginated content. It supports binding the current page, setting the total number of pages, and offers features like edge buttons, custom display lengths, disabled states, and slot customization for previous, next, and page number elements.

```vue
<template>
  <div>
    <!-- Basic pagination -->
    <vs-pagination
      v-model="currentPage"
      :length="totalPages"
      @change="handlePageChange"
    />

    <!-- With edge buttons (first/last) -->
    <vs-pagination
      v-model="currentPage2"
      :length="50"
      edge-buttons
    />

    <!-- Custom showing length -->
    <vs-pagination
      v-model="currentPage3"
      :length="100"
      :showing-length="5"
    />

    <!-- Disabled state -->
    <vs-pagination
      v-model="currentPage4"
      :length="10"
      disabled
    />

    <!-- With custom slots -->
    <vs-pagination
      v-model="currentPage5"
      :length="20"
    >
      <template #prev>Previous</template>
      <template #next>Next</template>
      <template #page="{ page }">
        [{{ page }}]
      </template>
    </vs-pagination>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const currentPage = ref(1);
const currentPage2 = ref(1);
const currentPage3 = ref(1);
const currentPage4 = ref(1);
const currentPage5 = ref(1);
const totalPages = 25;

function handlePageChange(page: number) {
  console.log('Page changed to:', page);
  // Fetch data for the new page
}
</script>
```

--------------------------------

### VsTabs Component for Navigation (Vue)

Source: https://context7.com/pubg/vlossom/llms.txt

The VsTabs component offers a flexible tab navigation system with features like keyboard support, scrollable tabs, disabled tab states, and custom tab templates. It is implemented in Vue.js.

```Vue
<template>
  <div>
    <!-- Basic tabs -->
    <vs-tabs
      v-model="activeTab"
      :tabs="['Overview', 'Details', 'Settings']"
      @change="handleTabChange"
    />

    <!-- Tab content -->
    <div v-if="activeTab === 0">Overview content</div>
    <div v-if="activeTab === 1">Details content</div>
    <div v-if="activeTab === 2">Settings content</div>

    <!-- Tabs with disabled items -->
    <vs-tabs
      v-model="activeTab2"
      :tabs="['Tab 1', 'Tab 2 (Disabled)', 'Tab 3']"
      :disabled="[1]"
    />

    <!-- Scrollable tabs with buttons -->
    <vs-tabs
      v-model="activeTab3"
      :tabs="manyTabs"
      tab-buttons="auto"
    />

    <!-- Custom tab template -->
    <vs-tabs
      v-model="activeTab4"
      :tabs="iconTabs"
    >
      <template #tab="{ tab, index }">
        <span>{{ tab.icon }} {{ tab.label }}</span>
      </template>
    </vs-tabs>

    <!-- Dense tabs -->
    <vs-tabs
      v-model="activeTab5"
      :tabs="['Home', 'Profile', 'Messages']"
      dense
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const activeTab = ref(0);
const activeTab2 = ref(0);
const activeTab3 = ref(0);
const activeTab4 = ref(0);
const activeTab5 = ref(0);

const manyTabs = [
  'Dashboard', 'Analytics', 'Reports', 'Users',
  'Settings', 'Integrations', 'Billing', 'Support'
];

const iconTabs = [
  { label: 'Home', icon: '🏠' },
  { label: 'Settings', icon: '⚙️' },
  { label: 'Profile', icon: '👤' }
];

function handleTabChange(index: number) {
  console.log('Tab changed to:', index);
}
</script>

```

--------------------------------

### Configure Vlossom in Vue Application

Source: https://context7.com/pubg/vlossom/llms.txt

Configures the Vlossom plugin in your Vue 3 application's main entry point. It allows setting initial themes, color schemes, and custom style sets.

```typescript
// main.ts
import { createApp } from 'vue';
import { createVlossom } from 'vlossom';
import 'vlossom/styles';
import App from './App.vue';

const app = createApp(App);

const vlossom = createVlossom({
  theme: 'light',
  detectOSTheme: true,
  radiusRatio: 1,
  colorScheme: {
    VsButton: 'blue',
    VsInput: 'green'
  },
  styleSet: {
    VsButton: {
      myCustomButton: {
        backgroundColor: '#ff5722',
        fontWeight: 'bold'
      }
    }
  }
});

app.use(vlossom);
app.mount('#app');
```

--------------------------------

### Manage Modals with Vlossom Modal Plugin

Source: https://context7.com/pubg/vlossom/llms.txt

The Vlossom Modal plugin enables programmatic opening and closing of modal windows. It allows for rendering custom Vue components within modals, setting modal size, and configuring behaviors like closing on dim or escape key press. Callbacks for open and close events are supported.

```vue
<template>
  <vs-button @click="openCustomModal">Open Custom Modal</vs-button>
</template>

<script setup lang="ts">
import { h } from 'vue';
import { useVlossom } from 'vlossom';
import MyCustomComponent from './MyCustomComponent.vue';

const $vs = useVlossom();

function openCustomModal() {
  const modalId = $vs.modal.open({
    component: h(MyCustomComponent, {
      title: 'Custom Modal',
      onSave: (data: any) => {
        console.log('Data saved:', data);
        $vs.modal.closeWithId(modalId);
      }
    }),
    size: { width: '500px', height: 'auto' },
    dimClose: true,
    escClose: true,
    scrollLock: true,
    callbacks: {
      onOpen: () => console.log('Modal opened'),
      onClose: () => console.log('Modal closed')
    }
  });
}

// Close the most recent modal
function closeModal() {
  $vs.modal.close();
}

// Close a specific modal by ID
function closeSpecificModal(id: string) {
  $vs.modal.closeWithId(id);
}

// Clear all modals
function clearAllModals() {
  $vs.modal.clear();
}
</script>
```

--------------------------------

### Implement Confirmation Dialogs with Vlossom Confirm Plugin

Source: https://context7.com/pubg/vlossom/llms.txt

The Vlossom Confirm plugin provides a programmatic way to open confirmation dialogs for user interactions like deletions or prompts. It supports custom button texts, color schemes, and returns a boolean indicating user confirmation. The prompt variant allows for direct input.

```vue
<template>
  <div>
    <vs-button @click="handleDelete">Delete Item</vs-button>
    <vs-button @click="handlePrompt">Enter Code</vs-button>
  </div>
</template>

<script setup lang="ts">
import { useVlossom } from 'vlossom';

const $vs = useVlossom();

async function handleDelete() {
  const confirmed = await $vs.confirm.open(
    'Are you sure you want to delete this item? This action cannot be undone.',
    {
      okText: 'Delete',
      cancelText: 'Cancel',
      colorScheme: 'red'
    }
  );

  if (confirmed) {
    console.log('Item deleted');
    $vs.toast.success('Item deleted successfully');
  } else {
    console.log('Delete cancelled');
  }
}

async function handlePrompt() {
  const confirmed = await $vs.confirm.prompt(
    'Please enter the confirmation code:',
    'CONFIRM123'
  );

  if (confirmed) {
    console.log('Code confirmed');
  } else {
    console.log('Invalid code or cancelled');
  }
}
</script>
```

--------------------------------

### VsTable Component with Sorting, Searching, and Pagination (Vue)

Source: https://context7.com/pubg/vlossom/llms.txt

The VsTable component provides a comprehensive data table solution with built-in features like sorting, searching, pagination, row selection, expandable rows, and drag-and-drop support. It uses Vue.js and requires the 'vlossom' library for table headers.

```Vue
<template>
  <vs-table
    :headers="headers"
    :items="users"
    v-model:selected-items="selectedUsers"
    v-model:page="currentPage"
    v-model:items-per-page="itemsPerPage"
    selectable
    pagination
    search
    search-placeholder="Search users..."
    :searchable-keys="['name', 'email']"
    @click-row="handleRowClick"
  >
    <!-- Custom header slot -->
    <template #header-status>
      <span>User Status</span>
    </template>

    <!-- Custom cell slots -->
    <template #item-name="{ item }">
      <strong>{{ item.name }}</strong>
    </template>

    <template #item-status="{ item }">
      <vs-chip :color-scheme="item.active ? 'green' : 'red'">
        {{ item.active ? 'Active' : 'Inactive' }}
      </vs-chip>
    </template>

    <template #item-actions="{ item }">
      <vs-button dense @click.stop="editUser(item)">Edit</vs-button>
      <vs-button dense outline color-scheme="red" @click.stop="deleteUser(item)">
        Delete
      </vs-button>
    </template>

    <!-- Expandable row content -->
    <template #expand="{ item }">
      <div class="expanded-content">
        <p><strong>Bio:</strong> {{ item.bio }}</p>
        <p><strong>Joined:</strong> {{ item.joinedDate }}</p>
      </div>
    </template>
  </vs-table>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { TableHeader } from 'vlossom';

const headers: TableHeader[] = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
  { key: 'role', label: 'Role', sortable: true },
  { key: 'status', label: 'Status', width: '120px' },
  { key: 'actions', label: 'Actions', width: '200px' }
];

const users = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', active: true, bio: 'Senior developer', joinedDate: '2023-01-15' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Editor', active: true, bio: 'Content manager', joinedDate: '2023-03-20' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Viewer', active: false, bio: 'Guest user', joinedDate: '2023-06-10' },
  { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'Editor', active: true, bio: 'Designer', joinedDate: '2023-08-05' }
]);

const selectedUsers = ref<any[]>([]);
const currentPage = ref(1);
const itemsPerPage = ref(10);

function handleRowClick(item: any, index: number) {
  console.log('Row clicked:', item, 'at index:', index);
}

function editUser(user: any) {
  console.log('Edit user:', user);
}

function deleteUser(user: any) {
  console.log('Delete user:', user);
  users.value = users.value.filter(u => u.id !== user.id);
}
</script>

```

--------------------------------

### Display Toast Notifications with Vlossom Toast Plugin

Source: https://context7.com/pubg/vlossom/llms.txt

The Vlossom Toast plugin allows for programmatic display of various types of notifications (success, error, warning, info, custom). It supports options like auto-close, timeout duration, and color schemes. It can also directly display Error objects, extracting the message automatically.

```vue
<template>
  <div>
    <vs-button @click="showSuccess">Show Success</vs-button>
    <vs-button @click="showError">Show Error</vs-button>
    <vs-button @click="showWarning">Show Warning</vs-button>
    <vs-button @click="showInfo">Show Info</vs-button>
    <vs-button @click="showCustom">Show Custom</vs-button>
  </div>
</template>

<script setup lang="ts">
import { useVlossom } from 'vlossom';

const $vs = useVlossom();

function showSuccess() {
  $vs.toast.success('Operation completed successfully!', {
    autoClose: true,
    timeout: 3000
  });
}

function showError() {
  $vs.toast.error('An error occurred while processing your request.', {
    autoClose: false
  });
}

function showWarning() {
  $vs.toast.warn('Please review the form before submitting.');
}

function showInfo() {
  $vs.toast.info('New updates are available.');
}

function showCustom() {
  $vs.toast.show('Custom notification message', {
    autoClose: true,
    timeout: 5000,
    colorScheme: 'purple'
  });
}

// Using with Error objects
function handleApiError(error: Error) {
  $vs.toast.error(error);  // Automatically extracts error.message
}
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.