Vm UI

https://vm-ui.surge.sh/
Admin
Vm UI is a cross-version UI component library compatible with Vue 2.7 and Vue 3, providing a...
Tokens:10,042
Snippets:110
Trust Score:9.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install @vm/ui with npm

Source: https://vm-ui.surge.sh/index

Command to install the @vm/ui library version 2 using npm. Requires a .npmrc file with a private key in the project root.

```bash
npm i @vm/ui@2 --save
```

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

### VmSelect with Placeholder Text (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Illustrates how to set a placeholder text for the VmSelect component, guiding users on the expected input.

```html
<vm-select placeholder="Текст" />
```

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

### VmTextarea Basic Usage (Vue)

Source: https://vm-ui.surge.sh/components/VmTextarea

Demonstrates the basic integration of the VmTextarea component within a Vue.js template and script setup. It shows how to import and use the component.

```vue
<template>
  <vm-textarea />
</template>


<script lang="ts" setup>
import { VmTextarea } from '@vm/ui'
</script>
```

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

### Opening VmModal Programmatically (Vue)

Source: https://vm-ui.surge.sh/components/VmModal

Demonstrates how to programmatically open the VmModal component using its exposed `openModal` method in a Vue.js setup script.

```vue
<template>
  <vm-modal ref="vmModalRef"></vm-modal>
</template>


<script setup>
const vmModalRef = ref(null)


vmModalRef.value?.openModal()
</script>
```

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

### VmModal Layout Prop Configuration (Vue)

Source: https://vm-ui.surge.sh/components/VmModal

Example demonstrating the TypeScript configuration for the `layout` prop of the VmModal component, allowing customization of modal structure.

```typescript
boolean | {
  header?: {
    close?: boolean
  } | boolean
  footer?: boolean
}
```

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

### Basic VmSelect with v-model Binding (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Shows the fundamental usage of VmSelect with v-model for data binding. This example illustrates how to link the component's selected value to a data property.

```html
<vm-select v-model="value" />
```

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

### VmModal Default Slot Usage (HTML)

Source: https://vm-ui.surge.sh/components/VmModal

Example of using the default slot in the VmModal component to provide the main content of the modal.

```html
<vm-modal>
  <p>Контент</p>
</vm-modal>
```

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

### Import and Use VmSelect Component (Vue)

Source: https://vm-ui.surge.sh/components/VmSelect

Demonstrates how to import and use the VmSelect component within a Vue application. This is the basic setup for integrating the component.

```vue
<template>
  <vm-select />
</template>


<script lang="ts" setup>
import { VmSelect } from '@vm/ui'
</script>
```

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

### VmModal Footer Slot Usage (HTML)

Source: https://vm-ui.surge.sh/components/VmModal

Example of using the `#footer` slot in the VmModal component to place elements, such as buttons, in the modal's footer.

```html
<vm-modal>
  <template #footer>
    <button>Кнопка в подвале</button>
  </template>
</vm-modal>
```

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

### VmSelect in Search Mode (Vue 2)

Source: https://vm-ui.surge.sh/components/VmSelect

Example of enabling search mode in VmSelect for Vue 2, using `.sync` for the search value.

```vue
<vm-select
  v-model="value"
  :search.sync="searchValue"
  :items="items"
  search-mode
/>
```

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

### VmRadio with Default Slot Content (HTML)

Source: https://vm-ui.surge.sh/components/VmRadio

Provides an example of using the default slot for a VmRadio component to include custom content, such as text. If plain text is provided without HTML tags, it will be semantically wrapped in a 'p' tag.

```html
<vm-radio>выбрать что-то особенное</vm-radio>
```

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

### Closing VmModal Programmatically (Vue)

Source: https://vm-ui.surge.sh/components/VmModal

Demonstrates how to programmatically close the VmModal component using its exposed `closeModal` method in a Vue.js setup script.

```vue
<template>
  <vm-modal ref="vmModalRef"></vm-modal>
</template>


<script setup>
const vmModalRef = ref(null)


vmModalRef.value?.closeModal()
</script>
```

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

### VmSelect in Search Mode (Vue 3)

Source: https://vm-ui.surge.sh/components/VmSelect

Example of enabling search mode in VmSelect for Vue 3, using `v-model:search` for the search value.

```vue
<vm-select
  v-model="value"
  v-model:search="searchValue"
  :items="items"
  search-mode
/>
```

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

### VmAlert with Header Slot (HTML)

Source: https://vm-ui.surge.sh/components/VmAlert

Example of using the header slot in VmAlert to provide a custom title for the alert. Text in the header slot is automatically wrapped in an 'h5' tag.

```html
<vm-alert>
  <template #header>Нейтральное состояние</template>
  Neutral - это нейтральное состояние, которое помогает поддерживать баланс и гармонию в интерфейсе. Этот элемент не привлекает особого внимания, но играет важную роль в создании сдержанного и уравновешенного визуального опыта.
</vm-alert>
```

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

### VmModal Header Slot Usage (HTML)

Source: https://vm-ui.surge.sh/components/VmModal

Example of using the `#header` slot in the VmModal component to define the modal's title, which is automatically wrapped in an `h1` tag if it's plain text.

```html
<vm-modal>
  <template #header>Заголовок модального окна</template>
</vm-modal>
```

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

### Vue VmDropdown Slot Usage

Source: https://vm-ui.surge.sh/components/VmDropdown

Illustrates how to use the default slot of the VmDropdown component to populate it with dropdown items. This example shows the HTML structure for rendering the dropdown.

```html
<vm-dropdown>
  <vm-dropdown-item>Просто текст 1</vm-dropdown-item>
  <vm-dropdown-item>Просто текст 2</vm-dropdown-item>
</vm-dropdown>
```

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

### Access Dropdown Visibility State

Source: https://vm-ui.surge.sh/components/VmSelect

Illustrates how to access the reactive 'dropdownIsVisible' property to determine the current visibility state of the dropdown. Use a ref to get the component instance.

```vue
<template>
  <vm-select ref="vmSelectRef"></vm-select>
</template>

<script setup>
const vmSelectRef = ref(null)

vmSelectRef.value?.dropdownIsVisible
</script>
```

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

### VmRadioGroup Value Binding (Vue 2.7 / Vue 3)

Source: https://vm-ui.surge.sh/components/VmRadioGroup

Illustrates how to bind the value of a VmRadioGroup using `v-model`. This example covers the property name change between Vue 2.7 (`value`) and Vue 3 (`modelValue`).

```vue
<vm-radio-group v-model="value">
  <vm-radio value="1" />
  <vm-radio value="2" />
</vm-radio-group>
```

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

### TDatePickerRangeType Type Definition

Source: https://vm-ui.surge.sh/components/VmDatePicker

Defines the `TDatePickerRangeType` for specifying date ranges within the date picker's configuration. This type is used for props like `disableDates` and `allowedDates` to define a start and end date for a range.

```typescript
import type { TDatePickerRangeType } from '@vm/ui'


export type TDatePickerRangeType = {
  from: Date
  to: Date
}
```

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

### VmButton Basic Usage

Source: https://vm-ui.surge.sh/components/VmButton

Demonstrates the basic implementation of the VmButton component in Vue.js. It requires importing the VmButton component from the '@vm/ui' package.

```vue
<template>
  <vm-button>Название кнопки</vm-button>
</template>


<script lang="ts" setup>
import { VmButton } from '@vm/ui'
</script>
```

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

### VmAlert with Success (HTML)

Source: https://vm-ui.surge.sh/components/VmAlert

Demonstrates how to use VmAlert with the 'success' prop to display a success message. Includes a header slot for the success title.

```html
<vm-alert success>
  <template #header>Успешное выполнение</template>
  Успешное выполнение задачи подтверждает правильность действий и достижение поставленных целей, принося радость и удовлетворение.
</vm-alert>
```

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

### Loading State for VmSelect (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Shows how to display a loading indicator within the VmSelect component, typically used when fetching data.

```html
<vm-select loading />
```

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

### VmAlert Basic Usage (Vue)

Source: https://vm-ui.surge.sh/components/VmAlert

Demonstrates the basic usage of the VmAlert component in a Vue.js application. It imports the component and renders it with default content.

```vue
<template>
  <vm-alert>
    Neutral - это нейтральное состояние, которое помогает поддерживать баланс и гармонию в интерфейсе. Этот элемент не привлекает особого внимания, но играет важную роль в создании сдержанного и уравновешенного визуального опыта.
  </vm-alert>
</template>


<script lang="ts" setup>
import { VmAlert } from '@vm/ui'
</script>
```

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

### VmAlert with Warning (HTML)

Source: https://vm-ui.surge.sh/components/VmAlert

Shows how to use the VmAlert component with the 'warning' prop to display a warning message. It includes a header slot for the warning title.

```html
<vm-alert warning>
  <template #header>Предупреждение</template>
  Предупреждение указывает на возможные проблемы или риски, требующие осторожности или дополнительных мер предосторожности.
</vm-alert>
```

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

### Import @vm/ui CSS in Vite (px and rem)

Source: https://vm-ui.surge.sh/index

Import statements for including @vm/ui CSS files for both px and rem units in Vite projects, typically in main.ts.

```typescript
// src/main.ts
// для использования px
import '@vm/ui/css/px.css'

// для использования rem
import '@vm/ui/css/rem.css'
```

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

### Configure @vm/ui for Nuxt 2

Source: https://vm-ui.surge.sh/index

Configuration for integrating @vm/ui with Nuxt 2 projects. It uses the nuxt module and allows specifying an alias for package resolution.

```typescript
export default {
  modules: [
    ['@vm/ui/nuxt', {
      // указание имени пакета для автоматического разрешения при использовании npm alias (опционально)
      alias: '@vm/ui'
    }]
  ]
}
```

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

### Configure @vm/ui for Nuxt 3

Source: https://vm-ui.surge.sh/index

Configuration for integrating @vm/ui with Nuxt 3 projects using defineNuxtConfig. It includes the nuxt module and an optional alias for package resolution.

```typescript
export default defineNuxtConfig({
  modules: [
    ['@vm/ui/nuxt', {
      // указание имени пакета для автоматического разрешения при использовании npm alias (опционально)
      alias: '@vm/ui'
    }]
  ]
})
```

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

### Show Dropdown via Exposed Method

Source: https://vm-ui.surge.sh/components/VmSelect

Shows how to programmatically open the dropdown using the 'showDropdown' exposed method. Access the component instance via a ref to call this method.

```vue
<template>
  <vm-select ref="vmSelectRef"></vm-select>
</template>

<script setup>
const vmSelectRef = ref(null)

vmSelectRef.value?.showDropdown()
</script>
```

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

### VmSelect with Prepend Slot (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Illustrates using the `prepend` slot to add elements like icons before the VmSelect input.

```html
<vm-select>
  <template #prepend>
    <pin-icon />
  </template>
</vm-select>
```

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

### Include @vm/ui CSS for Nuxt 3 (px and rem)

Source: https://vm-ui.surge.sh/index

Configuration to include @vm/ui CSS files for both px and rem units in Nuxt 3 projects using defineNuxtConfig.

```typescript
export default defineNuxtConfig({
  css: [
    // для использования px
    '@vm/ui/css/px.css',

    // для использования rem
    '@vm/ui/css/rem.css'
  ]
})
```

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

### Include @vm/ui CSS for Nuxt 2 (px and rem)

Source: https://vm-ui.surge.sh/index

Configuration to include @vm/ui CSS files for both px and rem units in Nuxt 2 projects.

```typescript
export default {
  css: [
    // для использования px
    '@vm/ui/css/px.css',

    // для использования rem
    '@vm/ui/css/rem.css'
  ]
}
```

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

### VmSelect with Configuration Options (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Applies advanced configuration options to VmSelect, including appending the dropdown to the body and preserving field state.

```html
<vm-select
  :config="{
    dropdown: {
      appendToBody: true
      width: '350px'
    },
    field: {
      preserveStateOnEmpty: true
    }
  }"
/>
```

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

### VmRadio Group and Radio Usage (Vue)

Source: https://vm-ui.surge.sh/components/VmRadio

Demonstrates how to use the VmRadioGroup and VmRadio components together to create selectable radio buttons. It shows binding the selected value using v-model and defining individual radio options with their values and labels. Requires importing VmRadioGroup and VmRadio from '@vm/ui'.

```vue
<template>
  <vm-radio-group v-model="value">
    <vm-radio value="1">Выбор элемента 1</vm-radio>
    <vm-radio value="2">Выбор элемента 2</vm-radio>
  </vm-radio-group>
</template>


<script lang="ts" setup>
import { VmRadioGroup, VmRadio } from '@vm/ui'


const value = ref('')
</script>
```

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

### VmSelect with a Label (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Demonstrates how to add a text label above the VmSelect component for better UI context.

```html
<vm-select label="текст" />
```

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

### VmTextarea Label and Placeholder (Vue)

Source: https://vm-ui.surge.sh/components/VmTextarea

Shows how to set a text label above the VmTextarea component using the `label` prop and how to provide placeholder text using the `placeholder` prop.

```html
<vm-textarea placeholder="Текст" />
```

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

### VmRadio with Large Prop (HTML)

Source: https://vm-ui.surge.sh/components/VmRadio

Shows how to apply a larger visual size to a VmRadio component by using the 'large' prop. This affects the component's dimensions for increased prominence.

```html
<vm-radio large />
```

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

### VmButton Primary Style

Source: https://vm-ui.surge.sh/components/VmButton

Applies the primary styling to the VmButton using the `primary` prop. This typically signifies the main call to action.

```vue
<vm-button primary>Название кнопки</vm-button>
```

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

### VmRadioGroup Basic Usage (Vue 3)

Source: https://vm-ui.surge.sh/components/VmRadioGroup

Demonstrates the basic structure of using VmRadioGroup with VmRadio components in a Vue 3 application. It shows how to bind the selected value using `v-model`.

```vue
<template>
  <vm-radio-group v-model="radioGroupValue">
    <vm-radio value="1"></vm-radio>
    <vm-radio value="2"></vm-radio>
    <vm-radio value="3"></vm-radio>
  </vm-radio-group>
</template>


<script lang="ts" setup>
import { VmRadio, VmRadioGroup } from '@vm/ui'


const radioGroupValue = ref('3')
</script>
```

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

### Configure @vm/ui for Vite (Vue 2)

Source: https://vm-ui.surge.sh/index

Vite configuration for @vm/ui with Vue 2 projects. It uses the viteVmUiPlugin and specifies the compiler as 'vue2', with an optional alias.

```typescript
import { viteVmUiPlugin } from '@vm/ui/vite'


export default defineConfig({
  plugins: [
    viteVmUiPlugin({
      compiler: 'vue2',
      // указание имени пакета для автоматического разрешения при использовании npm alias (опционально)
      alias: '@vm/ui'
    })
  ]
})
```

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

### VmSelect with Validation Rules (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Applies validation rules to the VmSelect component using a function, likely from a validation library.

```html
<vm-select :rules="selectRule()" />
```

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

### VmAlert with Default Slot (HTML)

Source: https://vm-ui.surge.sh/components/VmAlert

Shows the VmAlert component utilizing the default slot for its main content. Text provided to the default slot is automatically wrapped in a 'p' tag.

```html
<vm-alert>Neutral - это нейтральное состояние, которое помогает поддерживать баланс и гармонию в интерфейсе. Этот элемент не привлекает особого внимания, но играет важную роль в создании сдержанного и уравновешенного визуального опыта.</vm-alert>
```

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

### VmAlert with Custom Icon Slot (HTML)

Source: https://vm-ui.surge.sh/components/VmAlert

Demonstrates how to use the icon slot in VmAlert to insert a custom icon. This allows for greater visual customization of the alert.

```html
<vm-alert>
  <template #icon><pin-icon /></template>
  Neutral - это нейтральное состояние, которое помогает поддерживать баланс и гармонию в интерфейсе. Этот элемент не привлекает особого внимания, но играет важную роль в создании сдержанного и уравновешенного визуального опыта.
</vm-alert>
```

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

### Basic VmDropdownItem Usage with VmDropdown (Vue)

Source: https://vm-ui.surge.sh/components/VmDropdownItem

Demonstrates the fundamental integration of VmDropdownItem within a VmDropdown component. It requires importing both components from the '@vm/ui' library.

```vue
<template>
  <vm-dropdown>
    <vm-dropdown-item>Просто текст</vm-dropdown-item>
  </vm-dropdown>
</template>


<script lang="ts" setup>
import { VmDropdown, VmDropdownItem } from '@vm/ui'
</script>
```

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

### VmDropdownItem with Description Slot (HTML)

Source: https://vm-ui.surge.sh/components/VmDropdownItem

Demonstrates how to add a secondary description to a VmDropdownItem using the '#description' named slot. This allows for more detailed information associated with the list item.

```html
<vm-dropdown-item>
  Просто текст
  <template #description>Просто описание</template>
</vm-dropdown-item>
```

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

### Configure @vm/ui for Vite (Vue 3)

Source: https://vm-ui.surge.sh/index

Vite configuration for @vm/ui with Vue 3 projects. It utilizes the viteVmUiPlugin, setting the compiler to 'vue3', and allows for an optional alias.

```typescript
import { viteVmUiPlugin } from '@vm/ui/vite'


export default defineConfig({
  plugins: [
    viteVmUiPlugin({
      compiler: 'vue3',
      // указание имени пакета для автоматического разрешения при использовании npm alias (опционально)
      alias: '@vm/ui'
    })
  ]
})
```

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

### VmDropdownItem with Prepend Slot Content (HTML)

Source: https://vm-ui.surge.sh/components/VmDropdownItem

Shows how to prepend custom content, such as an icon, before the main content of a VmDropdownItem using the '#prepend' named slot. This is useful for adding visual indicators or actions.

```html
<vm-dropdown-item>
  <template #prepend><pin-icon /></template>
  Просто текст
</vm-dropdown-item>
```

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

### VmButton Block Display

Source: https://vm-ui.surge.sh/components/VmButton

Illustrates using the `block` prop to make the VmButton occupy the full available width. This is useful for creating full-width buttons.

```vue
<vm-button block>Название кнопки</vm-button>
```

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

### VmTextarea Validation with @vm/rule (Vue)

Source: https://vm-ui.surge.sh/components/VmTextarea

Illustrates how to apply validation rules to the VmTextarea component using functions from the `@vm/rule` library. The `rules` prop accepts an array of validation functions.

```html
<vm-textarea :rules="textRule()" />
```

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

### Vue VmDropdown Basic Usage

Source: https://vm-ui.surge.sh/components/VmDropdown

Demonstrates the basic structure for using the VmDropdown component with VmDropdownItem elements in a Vue.js application. It requires importing the necessary components from '@vm/ui'.

```html
<template>
  <vm-dropdown>
    <vm-dropdown-item>Просто текст 1</vm-dropdown-item>
    <vm-dropdown-item>Просто текст 2</vm-dropdown-item>
  </vm-dropdown>
</template>


<script lang="ts" setup>
import { VmDropdown, VmDropdownItem } from '@vm/ui'
</script>
```

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

### Customizing VmSelect Field Slot (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Demonstrates how to use the `field` slot in VmSelect to customize the display of selected items.

```html
<vm-select>
  <template #field="{ selectedOptions }">
    {{ selectedOptions }}
  </template>
</vm-select>
```

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

### VmRadio with Readonly Prop (HTML)

Source: https://vm-ui.surge.sh/components/VmRadio

Demonstrates setting a VmRadio component to a read-only state using the 'readonly' prop. The radio button will be visible but cannot be changed by the user.

```html
<vm-radio readonly />
```

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

### VmButton Secondary Style

Source: https://vm-ui.surge.sh/components/VmButton

Applies the secondary styling to the VmButton using the `secondary` prop. This is often used for less prominent actions.

```vue
<vm-button secondary>Название кнопки</vm-button>
```

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

### VmSelect Returning Full Object (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Configures VmSelect to return the entire selected object instead of just its value when an item is chosen.

```html
<vm-select return-object />
```

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

### VmRadio with Value Prop (HTML)

Source: https://vm-ui.surge.sh/components/VmRadio

Shows a basic VmRadio component with its 'value' prop set. This is used to define the distinct value associated with a radio button when it is selected within a group.

```html
<vm-radio value="1" />
```

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

### Customize VM Select Dropdown Item Slot

Source: https://vm-ui.surge.sh/components/VmSelect

Illustrates how to customize individual dropdown items by using the 'dropdown-item' slot. This slot provides information about the option and its selected state, along with a callback for selection.

```html
<vm-select>
  <template #dropdown-item="{ option, selected, onSelectItem }">Новый dropdown-item</template>
</vm-select>
```

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

### VmButton Loading State

Source: https://vm-ui.surge.sh/components/VmButton

Indicates a loading state for the VmButton using the `loading` prop. This is typically used to show that an asynchronous operation is in progress.

```vue
<vm-button loading>Название кнопки</vm-button>
```

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

### VmButton Outlined Style

Source: https://vm-ui.surge.sh/components/VmButton

Applies an outlined style with a border to the VmButton using the `outlined` prop. This provides a distinct visual boundary.

```vue
<vm-button outlined>Название кнопки</vm-button>
```

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

### Multiple Selection in VmSelect (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Enables multiple selection capability in the VmSelect component.

```html
<vm-select multiple />
```

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

### VmTextarea Hint and Error Message (Vue)

Source: https://vm-ui.surge.sh/components/VmTextarea

Illustrates how to display a hint message below the VmTextarea using the `hint` prop and how to show a custom error message using the `errorMessage` prop.

```html
<vm-textarea hint="Текст" />
```

```html
<vm-textarea error-message="Текст ошибки" />
```

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

### VmSelect Configuration Object (TypeScript)

Source: https://vm-ui.surge.sh/components/VmSelect

Defines the structure for the `config` prop in VmSelect, allowing customization of dropdown behavior and field display.

```typescript
{
  dropdown?: {
    // Заинжектить выдающий список к корню body
    appendToBody?: boolean,
    // Управление размером dropdown
    width?: string
  }
  field?: {
    // Режим, при котором slot field всегда будет отображаться, вне зависимости от наличия выбранных элементов
    preserveStateOnEmpty?: boolean
  }
}
```

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

### Add Element Before Dropdown Items

Source: https://vm-ui.surge.sh/components/VmSelect

Explains how to use the 'dropdown-prepend-item' slot to insert custom content at the beginning of the dropdown list, before the standard items.

```html
<vm-select>
  <template #dropdown-prepend-item>dropdown-prepend-item</template>
</vm-select>
```

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

### VmModal Component Usage (Vue)

Source: https://vm-ui.surge.sh/components/VmModal

Basic usage of the VmModal component within a Vue.js template, including a header slot and main content.

```vue
<template>
  <vm-modal layout>
    <template #header>Привет мир!</template>
    <p>
      "Hello, World!" - это, как правило, компьютерная программа, которая игнорирует любые входные данные и выводит на экран сообщение "Hello, World!".
      В большинстве языков программирования общего назначения такая программа представляет собой небольшой фрагмент кода и используется для иллюстрации базового синтаксиса языка.
      Программы типа "Hello, World!" часто являются первыми, которые студент учится писать на том или ином языке, а также могут использоваться в качестве проверки правильности установки компьютерного программного обеспечения, предназначенного для компиляции или выполнения исходного кода.
    </p>
  </vm-modal>
</template>


<script lang="ts" setup>
import { VmModal } from '@vm/ui'
</script>
```

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

### Customize VM Select Icon Slot

Source: https://vm-ui.surge.sh/components/VmSelect

Demonstrates how to use the 'icon' slot to replace the default dropdown toggle icon. The 'loading' prop takes precedence over the custom icon when provided.

```html
<vm-select>
  <template #icon="{ dropdownIsVisible }">
    <pin-icon />
  </template>
</vm-select>
```

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

### VmButton Link Style

Source: https://vm-ui.surge.sh/components/VmButton

Renders the VmButton as a hyperlink using the `link` prop. This is suitable for navigation or text-based action triggers.

```vue
<vm-button link>Название кнопки</vm-button>
```

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

### VmAlert with Error (HTML)

Source: https://vm-ui.surge.sh/components/VmAlert

Illustrates the usage of VmAlert with the 'error' prop to display an error message. A header slot is used for the error title.

```html
<vm-alert error>
  <template #header>Ошибка</template>
  Ошибка сигнализирует о некорректной операции или неверных данных, требующих внимания и исправления.
</vm-alert>
```

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

### VmButton Navigation Mode

Source: https://vm-ui.surge.sh/components/VmButton

Sets the VmButton to a 'navigation' mode using the `navigation` prop, typically used for navigation-related icons or controls.

```vue
<vm-button navigation>
  <burger-outline-icon />
</vm-button>
```

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

### VmButton Small Size (Navigation)

Source: https://vm-ui.surge.sh/components/VmButton

Sets the VmButton to a 'small' size using the `small` prop. This size modifier is demonstrated here with the `navigation` type.

```vue
<vm-button
  small
  navigation
>
  <burger-outline-icon />
</vm-button>
```

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

### VmSelect with Static Items (Vue)

Source: https://vm-ui.surge.sh/components/VmSelect

Configures VmSelect to display a list of static string items.

```vue
<template>
  <vm-select
    v-model="value"
    :items="items"
  />
</template>


<script setup>
const items = ['1', '2', '3']
</script>
```

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

### VmButton Action Mode

Source: https://vm-ui.surge.sh/components/VmButton

Sets the VmButton to an 'action' mode using the `action` prop, often used for buttons with icons or specific functional states.

```vue
<vm-button action>
  <burger-outline-icon />
</vm-button>
```

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

### VmRadio, VmCheckbox: Update colors and text size

Source: https://vm-ui.surge.sh/changelog

VmRadio and VmCheckbox components have received visual updates, including refreshed color schemes aligned with updated designs and a standard base text size of 16px for primary text elements.

```html
<VmRadio />
<VmCheckbox />
```

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

### VmButton Ghost Style

Source: https://vm-ui.surge.sh/components/VmButton

Applies a 'ghost' or transparent style to the VmButton using the `ghost` prop. This style is often used for less visually intrusive buttons.

```vue
<vm-button ghost>Название кнопки</vm-button>
```

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

### VmDropdownItem Default Slot Content (HTML)

Source: https://vm-ui.surge.sh/components/VmDropdownItem

Illustrates using the default slot of VmDropdownItem to define the primary content of the list item. Any text or HTML placed within the default slot will be rendered as the item's content.

```html
<vm-dropdown-item>Просто текст</vm-dropdown-item>
```

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

### VmSearch: Use v-model with items prop and add search prop

Source: https://vm-ui.surge.sh/changelog

The VmSearch component's `v-model` now strictly works with values from the `items` prop. A new `search` prop has been introduced for search string management, utilizing `.sync` for Vue 2 compatibility.

```html
<VmSearch v-model="selectedValue" :items="availableOptions" :search.sync="currentSearch" />
```

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

### VmRadio with Disabled Prop (HTML)

Source: https://vm-ui.surge.sh/components/VmRadio

Illustrates how to disable a VmRadio component using the 'disabled' prop. This prevents user interaction with the radio button, indicating it is not selectable.

```html
<vm-radio disabled />
```

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

### VmButton with Custom Tag

Source: https://vm-ui.surge.sh/components/VmButton

Shows how to change the underlying HTML tag of the VmButton component using the `tag` prop. This allows for semantic flexibility, defaulting to a 'button' tag.

```vue
<vm-button tag="span">Название кнопки</vm-button>
```

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

### Control Dropdown Visibility via Exposed Method

Source: https://vm-ui.surge.sh/components/VmSelect

Demonstrates how to programmatically toggle the dropdown's visibility using the 'toggleDropdown' exposed method. This requires accessing the component instance via a ref.

```vue
<template>
  <vm-select ref="vmSelectRef"></vm-select>
</template>

<script setup>
const vmSelectRef = ref(null)

vmSelectRef.value?.toggleDropdown()
</script>
```

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

### VmButton Active State (Link/Ghost)

Source: https://vm-ui.surge.sh/components/VmButton

Applies an 'active' state to the VmButton using the `active` prop. This prop is restricted to use with `link` or `ghost` button types.

```vue
<vm-button
  link
  active
>Название кнопки</vm-button>
```

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

### VmSelect: Add dropdown-prepend-item slot

Source: https://vm-ui.surge.sh/changelog

A new `dropdown-prepend-item` slot has been added to VmSelect, allowing users to insert custom elements at the beginning of the dropdown list, before the standard `dropdown-item` components.

```html
<VmSelect>
  <template #dropdown-prepend-item>
    <div>Prepend Item</div>
  </template>
  <VmDropdownItem>Item 1</VmDropdownItem>
</VmSelect>
```

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

### VmButton Large Size (Navigation/Action/Ghost/Link)

Source: https://vm-ui.surge.sh/components/VmButton

Sets the VmButton to a 'large' size using the `large` prop. This size variation is applicable only to `navigation`, `action`, `ghost`, or `link` button types.

```vue
<vm-button
  large
  navigation
>
  <burger-outline-icon />
</vm-button>
```

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

### VmDropdownItem with Custom Container Slot (HTML)

Source: https://vm-ui.surge.sh/components/VmDropdownItem

Demonstrates the use of the '#container' named slot to completely override the default rendering of the VmDropdownItem's container. This provides maximum flexibility for custom styling and structure.

```html
<vm-dropdown-item>
  <template #container>
    <div>Просто текст</div>
  </template>
</vm-dropdown-item>
```

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

### Slot Content in VM Date Picker

Source: https://vm-ui.surge.sh/components/VmDatePicker

Shows how to use the default slot in the VM Date Picker to place custom elements, such as a button, below the calendar. This allows for extended functionality or specific UI arrangements. Components are imported from '@vm/ui'.

```vue
<template>
  <vm-date-picker>
    <vm-button>Показать время</vm-button>
  </vm-date-picker>
</template>


<script lang="ts" setup>
import { VmDatePicker, VmButton } from '@vm/ui'

</script>
```

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

### Set Max Date for VM Date Picker

Source: https://vm-ui.surge.sh/components/VmDatePicker

Demonstrates how to set the maximum selectable date in the VM Date Picker component. It uses the `max-date` prop and expects a Date object. The component is imported from '@vm/ui'.

```vue
<template>
  <vm-date-picker :max-date="new Date('2025-01-01')"/>
</template>


<script lang="ts" setup>
import { VmDatePicker } from '@vm/ui'

</script>
```

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

### Disabled VmSelect State (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Shows how to disable the VmSelect component, preventing user interaction.

```html
<vm-select disabled />
```

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

### Hide Dropdown via Exposed Method

Source: https://vm-ui.surge.sh/components/VmSelect

Demonstrates how to programmatically close the dropdown using the 'hideDropdown' exposed method. This requires accessing the component instance via a ref.

```vue
<template>
  <vm-select ref="vmSelectRef"></vm-select>
</template>

<script setup>
const vmSelectRef = ref(null)

vmSelectRef.value?.hideDropdown()
</script>
```

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

### VmSelect with Custom Item Description (Vue)

Source: https://vm-ui.surge.sh/components/VmSelect

Configures VmSelect to display a specific property ('description') from item objects as additional descriptive text.

```vue
<template>
  <vm-select
    v-model="value"
    :items="items"
    item-description="description"
  />
</template>


<script setup>
import { ref } from 'vue'
const items = ref([
  { title: 'Option 1', description: 'Description 1', value: 1 },
  { title: 'Option 2', description: 'Description 2', value: 2 },
  { title: 'Option 3', description: 'Description 3', value: 3 }
])
</script>
```

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

### VmDropdownItem with Append Slot Content (HTML)

Source: https://vm-ui.surge.sh/components/VmDropdownItem

Illustrates how to append custom content, such as an icon or button, after the main content of a VmDropdownItem using the '#append' named slot. This is useful for adding interactive elements or secondary information.

```html
<vm-dropdown-item>
  Просто текст
  <template #append><arrow-icon /></template>
</vm-dropdown-item>
```

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

### VmSelect with Custom No Data Text (HTML)

Source: https://vm-ui.surge.sh/components/VmSelect

Customizes the message displayed in VmSelect when there are no items available to select.

```html
<vm-select no-data-text="Нет входных билетов" />
```

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

### VmInput, VmTextarea: Add hideHint prop

Source: https://vm-ui.surge.sh/changelog

Both VmInput and VmTextarea components now feature a `hideHint` prop. This prop allows developers to conditionally hide the hint text associated with these input fields.

```html
<VmInput hideHint />
<VmTextarea :hideHint="true" />
```

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

### VmSelect: Control dropdown width with dropdown.width

Source: https://vm-ui.surge.sh/changelog

The VmSelect component allows customization of the dropdown's width through the `config.dropdown.width` property. This enables precise control over the visual presentation of the options list.

```javascript
const vmSelectConfig = {
  dropdown: {
    width: '300px'
  }
};
<VmSelect :config="vmSelectConfig" />
```

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

### VmSelect: Add search functionality with v-model:search and searchMode

Source: https://vm-ui.surge.sh/changelog

The VmSelect component now supports search functionality. Users can control the search input using `v-model:search` and define the search behavior with the `searchMode` prop. This allows for dynamic filtering of options within the dropdown.

```html
<VmSelect v-model:search="searchQuery" searchMode="startsWith" />
```

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

### VmDropdownItem with 'selected' Prop (HTML)

Source: https://vm-ui.surge.sh/components/VmDropdownItem

Shows how to mark a VmDropdownItem as active or selected using the 'selected' boolean prop. This is typically used to visually highlight the current item in a dropdown list.

```html
<vm-dropdown-item selected>Просто текст</vm-dropdown-item>
```

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

### Customize VM Select Dropdown Slot

Source: https://vm-ui.surge.sh/components/VmSelect

Shows how to override the entire 'vm-dropdown' using the 'dropdown' slot. This slot provides control over the dropdown's visibility and interaction methods.

```html
<vm-select>
  <template #dropdown="{ dropdownIsVisible, toggleDropdown, showDropdown, hideDropdown }">Кастомный dropdown</template>
</vm-select>
```

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

### VmTextarea Hiding Hint/Error (Vue)

Source: https://vm-ui.surge.sh/components/VmTextarea

Explains how to hide the hint or error message display below the VmTextarea component by setting the `hideHint` prop to `true`.

```html
<vm-textarea
  hint="Текст"
  hide-hint
/>
```

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

### VmSelect: Expose dropdown control methods and state

Source: https://vm-ui.surge.sh/changelog

The VmSelect component exposes methods (`toggleDropdown`, `hideDropdown`, `showDropdown`) and a reactive property (`dropdownIsVisible`) to programmatically control and monitor the state of its dropdown menu.

```javascript
const { toggleDropdown, dropdownIsVisible } = vmSelectInstance;

// Example usage:
toggleDropdown();
if (dropdownIsVisible.value) {
  console.log('Dropdown is open');
}
```

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

### VmButton Mobile Mode

Source: https://vm-ui.surge.sh/components/VmButton

Enables a specific style for mobile use with the `mobile` prop. This ensures the button is optimized for mobile interfaces.

```vue
<vm-button mobile>Название кнопки</vm-button>
```

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

### VmTextarea Value Binding (Vue)

Source: https://vm-ui.surge.sh/components/VmTextarea

Shows how to bind a value to the VmTextarea component using `v-model` for Vue 2.7 and `modelValue` for Vue 3. This allows for two-way data binding.

```html
<vm-textarea v-model="inputValue" />
```

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

### VmInput, VmRadio, VmCheckbox, VmSearch: Add readonly property

Source: https://vm-ui.surge.sh/changelog

The `readonly` property has been added to VmInput, VmRadio, VmCheckbox, and VmSearch components. This property restricts user interaction, making the component's value immutable.

```html
<VmInput readonly />
<VmRadio readonly />
<VmCheckbox readonly />
<VmSearch readonly />
```

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

### VmDropdownItem: Enhance hover state with VmCheckbox

Source: https://vm-ui.surge.sh/changelog

When a VmCheckbox is placed inside a VmDropdownItem, hovering over the VmDropdownItem will now visually highlight the embedded VmCheckbox. This improves user feedback and interaction clarity.

```html
<VmDropdownItem>
  <VmCheckbox v-model="isChecked" />
</VmDropdownItem>
```

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

### Type Definition for Select Option

Source: https://vm-ui.surge.sh/components/VmSelect

Defines the TypeScript type 'TSelectOption' for individual items within the dropdown list. It can be a string, number, or an object.

```typescript
import type { TSelectOption } from '@vm/ui'


export type TSelectOption = string | number | Record<string, any>
```

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

### VmSelect with Custom Item Text (Vue)

Source: https://vm-ui.surge.sh/components/VmSelect

Configures VmSelect to display a specific property ('title') from item objects as the visible text.

```vue
<template>
  <vm-select
    v-model="value"
    :items="items"
    item-text="title"
  />
</template>


<script setup>
import { ref } from 'vue'
const items = ref([
  { title: 'Option 1', value: 1 },
  { title: 'Option 2', value: 2 },
  { title: 'Option 3', value: 3 }
])
</script>
```

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

### VmButton Disabled State

Source: https://vm-ui.surge.sh/components/VmButton

Disables the VmButton using the `disabled` prop, preventing user interaction. The button will appear visually inactive.

```vue
<vm-button disabled>Название кнопки</vm-button>
```

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

### VmDropdownItem: Set text-overflow ellipsis for main text

Source: https://vm-ui.surge.sh/changelog

The main text content within VmDropdownItem components now utilizes `text-overflow: ellipsis`. This ensures that long text strings are properly truncated and indicated with an ellipsis, preventing layout issues.

```html
<VmDropdownItem>A very long text that might need ellipsis</VmDropdownItem>
```

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

### Type Definition for Select Items

Source: https://vm-ui.surge.sh/components/VmSelect

Defines the TypeScript type 'TSelectItems' for arrays of items used in the dropdown list. It supports arrays of strings, numbers, or objects.

```typescript
import type { TSelectItems } from '@vm/ui'


export type TSelectItems = string[] | number[] | Record<string, any>[]
```

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

### VmTextarea Disabled State (Vue)

Source: https://vm-ui.surge.sh/components/VmTextarea

Demonstrates how to disable the VmTextarea component by setting the `disabled` prop to `true`. This prevents user interaction with the input field.

```html
<vm-textarea disabled />
```

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

### VmSelect with Custom Item Value (Vue)

Source: https://vm-ui.surge.sh/components/VmSelect

Configures VmSelect to use a specific property ('value') from item objects for v-model binding.

```vue
<template>
  <vm-select
    v-model="value"
    :items="items"
    item-value="value"
  />
</template>


<script setup>
import { ref } from 'vue'
const items = ref([
  { title: 'Option 1', value: 1 },
  { title: 'Option 2', value: 2 },
  { title: 'Option 3', value: 3 }
])
</script>
```

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

### VmSelect: Preserve field slot on empty selection with preserveStateOnEmpty

Source: https://vm-ui.surge.sh/changelog

The `config.field.preserveStateOnEmpty` property in VmSelect ensures that the 'field' slot is always rendered, even when no items are selected. This is useful for maintaining a consistent UI layout.

```javascript
const vmSelectConfig = {
  field: {
    preserveStateOnEmpty: true
  }
};
<VmSelect :config="vmSelectConfig">
  <template #field>Custom Field</template>
</VmSelect>
```

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

### Type Definition for Select Value

Source: https://vm-ui.surge.sh/components/VmSelect

Defines the TypeScript type 'TSelectValue' for the component's value, supporting various data types including strings, numbers, objects, and arrays.

```typescript
import type { TSelectValue } from '@vm/ui'


export type TSelectValue = string | number | Record<string, any> | string[] | number[] | Record<string, any>[]
```

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

### TDatePickerValue Type Definition

Source: https://vm-ui.surge.sh/components/VmDatePicker

Defines the `TDatePickerValue` type, which represents the value for the date picker. It can be either a `Date` object or `null`. This type is crucial for managing the selected date or date range.

```typescript
import type { TDatePickerValue } from '@vm/ui'


export type TDatePickerValue = Date | null
```

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

### TDatePickerRangeModeValue Type Definition

Source: https://vm-ui.surge.sh/components/VmDatePicker

Defines the `TDatePickerRangeModeValue` type for managing date range synchronization. It can hold an object with `from` and `to` Date properties, or be null. This type is used for Vue 2.7+ `range.sync` and Vue 3 `v-model:range`.

```typescript
import type { TDatePickerRangeModeValue } from '@vm/ui'


export type TDatePickerRangeModeValue = {
  from: Date | null
  to: Date | null
} | null
```
Tokens:
Raw