@codemonster-ru/vueforge 0.12.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/index.ts.mjs +1194 -939
- package/dist/index.ts.umd.js +3 -3
- package/dist/package/components/__tests__/tabs.test.d.ts +1 -0
- package/dist/package/components/__tests__/toast.test.d.ts +1 -0
- package/dist/package/components/tab-panel.vue.d.ts +21 -0
- package/dist/package/components/tab.vue.d.ts +30 -0
- package/dist/package/components/tabs-context.d.ts +12 -0
- package/dist/package/components/tabs.vue.d.ts +40 -0
- package/dist/package/components/toast-container.vue.d.ts +23 -0
- package/dist/package/components/toast.vue.d.ts +42 -0
- package/dist/package/config/theme-core.d.ts +64 -0
- package/dist/package/themes/default/components/tabs.d.ts +23 -0
- package/dist/package/themes/default/components/toast.d.ts +41 -0
- package/dist/package/themes/default/index.d.ts +62 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -50,6 +50,11 @@ app.use(VueForge, {
|
|
|
50
50
|
- Checkbox
|
|
51
51
|
- RadioGroup
|
|
52
52
|
- RadioButton
|
|
53
|
+
- Tabs
|
|
54
|
+
- Tab
|
|
55
|
+
- TabPanel
|
|
56
|
+
- Toast
|
|
57
|
+
- ToastContainer
|
|
53
58
|
- Input
|
|
54
59
|
- Textarea
|
|
55
60
|
- Link
|
|
@@ -121,6 +126,84 @@ Example:
|
|
|
121
126
|
</RadioGroup>
|
|
122
127
|
```
|
|
123
128
|
|
|
129
|
+
## Tabs / Tab / TabPanel
|
|
130
|
+
|
|
131
|
+
Props (Tabs):
|
|
132
|
+
|
|
133
|
+
- `modelValue?: string | number` (v-model)
|
|
134
|
+
- `disabled?: boolean`
|
|
135
|
+
- `orientation?: 'horizontal' | 'vertical'` (default `horizontal`)
|
|
136
|
+
|
|
137
|
+
Props (Tab):
|
|
138
|
+
|
|
139
|
+
- `value: string | number`
|
|
140
|
+
- `label?: string`
|
|
141
|
+
- `disabled?: boolean`
|
|
142
|
+
|
|
143
|
+
Props (TabPanel):
|
|
144
|
+
|
|
145
|
+
- `value: string | number`
|
|
146
|
+
|
|
147
|
+
Example:
|
|
148
|
+
|
|
149
|
+
```vue
|
|
150
|
+
<Tabs v-model="tab">
|
|
151
|
+
<template #tabs>
|
|
152
|
+
<Tab value="overview">Overview</Tab>
|
|
153
|
+
<Tab value="settings">Settings</Tab>
|
|
154
|
+
</template>
|
|
155
|
+
<template #panels>
|
|
156
|
+
<TabPanel value="overview">Overview content</TabPanel>
|
|
157
|
+
<TabPanel value="settings">Settings content</TabPanel>
|
|
158
|
+
</template>
|
|
159
|
+
</Tabs>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Tabs tokens
|
|
163
|
+
|
|
164
|
+
Component tokens (override via `theme.overrides.components.tabs`):
|
|
165
|
+
|
|
166
|
+
- `gap`, `listGap`, `listBorderWidth`, `listBorderColor`, `listVerticalPadding`
|
|
167
|
+
- `tabPadding`, `tabFontSize`, `tabBorderRadius`
|
|
168
|
+
- `tabTextColor`, `tabBackgroundColor`, `tabHoverBackgroundColor`
|
|
169
|
+
- `tabActiveTextColor`, `tabActiveBackgroundColor`, `tabActiveBorderColor`, `tabActiveBorderWidth`
|
|
170
|
+
- `panelPadding`, `panelBorderRadius`, `panelBackgroundColor`, `panelTextColor`
|
|
171
|
+
- `disabledOpacity`
|
|
172
|
+
|
|
173
|
+
## Toast / ToastContainer
|
|
174
|
+
|
|
175
|
+
Props (Toast):
|
|
176
|
+
|
|
177
|
+
- `modelValue?: boolean` (v-model)
|
|
178
|
+
- `title?: string`
|
|
179
|
+
- `message?: string`
|
|
180
|
+
- `severity?: 'neutral' | 'info' | 'success' | 'warn' | 'danger'` (default `neutral`)
|
|
181
|
+
- `closable?: boolean` (default `true`)
|
|
182
|
+
- `duration?: number` (ms, default `0`, no auto-close)
|
|
183
|
+
|
|
184
|
+
Props (ToastContainer):
|
|
185
|
+
|
|
186
|
+
- `position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'` (default `top-right`)
|
|
187
|
+
|
|
188
|
+
Example:
|
|
189
|
+
|
|
190
|
+
```vue
|
|
191
|
+
<ToastContainer position="top-right">
|
|
192
|
+
<Toast v-model="toastOpen" title="Saved" message="Changes are saved." severity="success" :duration="2500" />
|
|
193
|
+
</ToastContainer>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
### Toast tokens
|
|
197
|
+
|
|
198
|
+
Component tokens (override via `theme.overrides.components.toast`):
|
|
199
|
+
|
|
200
|
+
- `gap`, `padding`, `borderRadius`, `borderColor`
|
|
201
|
+
- `backgroundColor`, `textColor`, `shadow`, `minWidth`
|
|
202
|
+
- `fontSize`, `lineHeight`, `bodyGap`
|
|
203
|
+
- `titleFontSize`, `titleFontWeight`, `closeSize`
|
|
204
|
+
- `containerGap`, `containerPadding`, `containerMaxWidth`, `zIndex`
|
|
205
|
+
- `info.*`, `success.*`, `warn.*`, `danger.*` (backgroundColor/borderColor/textColor)
|
|
206
|
+
|
|
124
207
|
### Textarea tokens
|
|
125
208
|
|
|
126
209
|
Component tokens (override via `theme.overrides.components.textarea`):
|
|
@@ -227,7 +310,7 @@ VueForge exposes design tokens as CSS variables generated from the theme preset.
|
|
|
227
310
|
Typed tokens:
|
|
228
311
|
|
|
229
312
|
- `ThemeTokens`/`ThemeOptions`/`ThemePreset` are exported for type-safe theming in TS.
|
|
230
|
-
- `components.*` accepts component-specific tokens (typed keys: button/card/checkbox/radio/input/textarea/link/menu/popover/select/switch).
|
|
313
|
+
- `components.*` accepts component-specific tokens (typed keys: button/card/checkbox/radio/tabs/toast/input/textarea/link/menu/popover/select/switch).
|
|
231
314
|
|
|
232
315
|
Default core values (from `DefaultTheme`):
|
|
233
316
|
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.vf-link{color:inherit;cursor:pointer;text-decoration:none;font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-link:hover{color:var(--vf-link-hover-color)}.vf-link:active{color:var(--vf-link-active-color)}.vf-link.vf-link_disabled{cursor:not-allowed}.vf-link_active,.vf-link_partially-active{color:var(--vf-link-active-color)}.vf-card{border:var(--vf-border-width) solid var(--vf-card-border-color);border-radius:var(--vf-card-border-radius)}.vf-card__default{padding:var(--vf-card-padding)}.vf-menu{display:flex}.vf-menu_horizontal>.vf-menu__list{flex-direction:row}.vf-menu_horizontal>.vf-menu__list>.vf-menu__item{align-items:center}.vf-menu_horizontal>.vf-menu__list>.vf-menu__item:not(:first-child){margin-left:var(--vf-menu-item-margin-left)}.vf-menu_horizontal>.vf-menu__list>.vf-menu__item:not(:last-child){margin-right:var(--vf-menu-item-margin-right)}.vf-menu_horizontal>.vf-menu__list>.vf-menu__item>.vf-menu__separator{height:var(--vf-menu-separator-height);border-top:none;border-right:none;border-left:var(--vf-menu-separator-thickness) solid var(--vf-menu-separator-color);border-bottom:none}.vf-menu_vertical>.vf-menu__list{width:100%;flex-direction:column}.vf-menu_vertical>.vf-menu__list>.vf-menu__item{flex-direction:column}.vf-menu_vertical>.vf-menu__list>.vf-menu__item:not(:first-child){margin-top:var(--vf-menu-item-margin-top)}.vf-menu_vertical>.vf-menu__list>.vf-menu__item:not(:last-child){margin-bottom:var(--vf-menu-item-margin-bottom)}.vf-menu_vertical>.vf-menu__list>.vf-menu__item>.vf-menu{overflow:hidden}.vf-menu__list{margin:0;padding:0;display:flex;list-style:none}.vf-menu__separator{width:100%;height:var(--vf-menu-separator-thickness);border:none;margin:0;background-color:var(--vf-menu-separator-color)}.vf-menu__item{display:flex;font-weight:500}.vf-menu__link{display:flex;align-items:center;text-decoration:none;font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-menu__link:hover{color:var(--vf-menu-link-hover-color)}.vf-menu__parent{cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-menu__parent:hover{color:var(--vf-menu-parent-hover-color)}.vf-menu__icon{margin-right:var(--vf-menu-icon-gap)}.vf-menu__submenu.vf-menu__submenu_visible{margin-top:var(--vf-menu-submenu-offset);margin-left:var(--vf-menu-submenu-offset)}.vf-menu__submenu:not(.vf-menu__submenu_visible){height:0}.vf-button{display:inline-flex;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;height:var(--vf-controls-height);box-sizing:border-box;padding:var(--vf-button-padding);font-size:var(--vf-button-font-size);line-height:var(--vf-typography-line-height);font-family:inherit;border-radius:var(--vf-button-border-radius);overflow:hidden}.vf-button_text{border:var(--vf-border-width) solid transparent;background-color:transparent}.vf-button_outlined{background-color:transparent}.vf-button_primary.vf-button_text{color:var(--vf-button-text-primary-color)}.vf-button_primary.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-primary-hover-background-color)}.vf-button_primary.vf-button_outlined{color:var(--vf-button-outlined-primary-color);border:var(--vf-border-width) solid var(--vf-button-outlined-primary-border-color)}.vf-button_primary.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-primary-hover-background-color)}.vf-button_primary:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-primary-color);border:var(--vf-border-width) solid var(--vf-button-primary-border-color);background-color:var(--vf-button-primary-background-color)}.vf-button_primary:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-primary-hover-color);border:var(--vf-border-width) solid var(--vf-button-primary-hover-border-color);background-color:var(--vf-button-primary-hover-background-color)}.vf-button_primary:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-primary-active-color);border:var(--vf-border-width) solid var(--vf-button-primary-active-border-color);background-color:var(--vf-button-primary-active-background-color)}.vf-button_secondary.vf-button_text{color:var(--vf-button-text-secondary-color)}.vf-button_secondary.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-secondary-hover-background-color)}.vf-button_secondary.vf-button_outlined{color:var(--vf-button-outlined-secondary-color);border:var(--vf-border-width) solid var(--vf-button-outlined-secondary-border-color)}.vf-button_secondary.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-secondary-hover-background-color)}.vf-button_secondary:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-secondary-color);border:var(--vf-border-width) solid var(--vf-button-secondary-border-color);background-color:var(--vf-button-secondary-background-color)}.vf-button_secondary:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-secondary-hover-color);border:var(--vf-border-width) solid var(--vf-button-secondary-hover-border-color);background-color:var(--vf-button-secondary-hover-background-color)}.vf-button_secondary:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-secondary-active-color);border:var(--vf-border-width) solid var(--vf-button-secondary-active-border-color);background-color:var(--vf-button-secondary-active-background-color)}.vf-button_success.vf-button_text{color:var(--vf-button-text-success-color)}.vf-button_success.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-success-hover-background-color)}.vf-button_success.vf-button_outlined{color:var(--vf-button-outlined-success-color);border:var(--vf-border-width) solid var(--vf-button-outlined-success-border-color)}.vf-button_success.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-success-hover-background-color)}.vf-button_success:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-success-color);border:var(--vf-border-width) solid var(--vf-button-success-border-color);background-color:var(--vf-button-success-background-color)}.vf-button_success:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-success-hover-color);border:var(--vf-border-width) solid var(--vf-button-success-hover-border-color);background-color:var(--vf-button-success-hover-background-color)}.vf-button_success:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-success-active-color);border:var(--vf-border-width) solid var(--vf-button-success-active-border-color);background-color:var(--vf-button-success-active-background-color)}.vf-button_info.vf-button_text{color:var(--vf-button-text-info-color)}.vf-button_info.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-info-hover-background-color)}.vf-button_info.vf-button_outlined{color:var(--vf-button-outlined-info-color);border:var(--vf-border-width) solid var(--vf-button-outlined-info-border-color)}.vf-button_info.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-info-hover-background-color)}.vf-button_info:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-info-color);border:var(--vf-border-width) solid var(--vf-button-info-border-color);background-color:var(--vf-button-info-background-color)}.vf-button_info:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-info-hover-color);border:var(--vf-border-width) solid var(--vf-button-info-hover-border-color);background-color:var(--vf-button-info-hover-background-color)}.vf-button_info:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-info-active-color);border:var(--vf-border-width) solid var(--vf-button-info-active-border-color);background-color:var(--vf-button-info-active-background-color)}.vf-button_warning.vf-button_text{color:var(--vf-button-text-warning-color)}.vf-button_warning.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-warning-hover-background-color)}.vf-button_warning.vf-button_outlined{color:var(--vf-button-outlined-warning-color);border:var(--vf-border-width) solid var(--vf-button-outlined-warning-border-color)}.vf-button_warning.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-warning-hover-background-color)}.vf-button_warning:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-warning-color);border:var(--vf-border-width) solid var(--vf-button-warning-border-color);background-color:var(--vf-button-warning-background-color)}.vf-button_warning:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-warning-hover-color);border:var(--vf-border-width) solid var(--vf-button-warning-hover-border-color);background-color:var(--vf-button-warning-hover-background-color)}.vf-button_warning:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-warning-active-color);border:var(--vf-border-width) solid var(--vf-button-warning-active-border-color);background-color:var(--vf-button-warning-active-background-color)}.vf-button_danger.vf-button_text{color:var(--vf-button-text-danger-color)}.vf-button_danger.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-danger-hover-background-color)}.vf-button_danger.vf-button_outlined{color:var(--vf-button-outlined-danger-color);border:var(--vf-border-width) solid var(--vf-button-outlined-danger-border-color)}.vf-button_danger.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-danger-hover-background-color)}.vf-button_danger:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-danger-color);border:var(--vf-border-width) solid var(--vf-button-danger-border-color);background-color:var(--vf-button-danger-background-color)}.vf-button_danger:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-danger-hover-color);border:var(--vf-border-width) solid var(--vf-button-danger-hover-border-color);background-color:var(--vf-button-danger-hover-background-color)}.vf-button_danger:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-danger-active-color);border:var(--vf-border-width) solid var(--vf-button-danger-active-border-color);background-color:var(--vf-button-danger-active-background-color)}.vf-button_vertical{flex-direction:column}.vf-button__icon{display:inline-block}.vf-button__icon_top+.vf-button__label{margin-top:var(--vf-button-icon-gap)}.vf-button__icon_right{order:1}.vf-button__icon_right+.vf-button__label{margin-right:var(--vf-button-icon-gap)}.vf-button__icon_bottom{order:1}.vf-button__icon_bottom+.vf-button__label{margin-bottom:var(--vf-button-icon-gap)}.vf-button__icon_left+.vf-button__label{margin-left:var(--vf-button-icon-gap)}.vf-button_disabled{opacity:var(--vf-states-disabled-opacity);cursor:default}.vf-button_rounded{border-radius:var(--vf-button-rounded-border-radius)}.vf-button_small{font-size:var(--vf-button-small-font-size);padding:var(--vf-button-small-padding)}.vf-button_large{font-size:var(--vf-button-large-font-size);padding:var(--vf-button-large-padding)}.vf-input{display:flex;align-items:center;gap:var(--vf-input-gap);height:var(--vf-controls-height);box-sizing:border-box;padding:var(--vf-input-padding);border-radius:var(--vf-input-border-radius);border:var(--vf-border-width) solid var(--vf-input-border-color);background-color:var(--vf-input-background-color);color:var(--vf-input-text-color);transition:border-color .2s ease}.vf-input__control{flex:1;border:none;background:transparent;color:inherit;font-size:var(--vf-input-font-size);line-height:var(--vf-typography-line-height);font-family:inherit;outline:none}.vf-input__control::placeholder{color:var(--vf-input-placeholder-color)}.vf-input:hover:not(.vf-input_disabled){border-color:var(--vf-input-hover-border-color)}.vf-input:focus-within:not(.vf-input_disabled){border-color:var(--vf-input-focus-border-color);box-shadow:var(--vf-input-focus-ring-shadow)}.vf-input_outlined{background-color:transparent}.vf-input_small{padding:var(--vf-input-small-padding)}.vf-input_small .vf-input__control{font-size:var(--vf-input-small-font-size)}.vf-input_large{padding:var(--vf-input-large-padding)}.vf-input_large .vf-input__control{font-size:var(--vf-input-large-font-size)}.vf-input_disabled{opacity:var(--vf-input-disabled-opacity);cursor:not-allowed}.vf-textarea{display:flex;align-items:stretch;gap:var(--vf-textarea-gap);min-height:var(--vf-textarea-min-height);box-sizing:border-box;padding:var(--vf-textarea-padding);border-radius:var(--vf-textarea-border-radius);border:var(--vf-border-width) solid var(--vf-textarea-border-color);background-color:var(--vf-textarea-background-color);color:var(--vf-textarea-text-color);transition:border-color .2s ease,box-shadow .2s ease}.vf-textarea__control{flex:1;min-height:var(--vf-textarea-min-height);border:none;background:transparent;color:inherit;font-size:var(--vf-textarea-font-size);line-height:var(--vf-typography-line-height);font-family:inherit;outline:none;resize:var(--vf-textarea-resize);width:100%;padding:0;box-sizing:border-box}.vf-textarea__control::placeholder{color:var(--vf-textarea-placeholder-color)}.vf-textarea:hover:not(.vf-textarea_disabled){border-color:var(--vf-textarea-hover-border-color)}.vf-textarea:focus-within:not(.vf-textarea_disabled){border-color:var(--vf-textarea-focus-border-color);box-shadow:var(--vf-textarea-focus-ring-shadow)}.vf-textarea_outlined{background-color:transparent}.vf-textarea_small{padding:var(--vf-textarea-small-padding)}.vf-textarea_small .vf-textarea__control{font-size:var(--vf-textarea-small-font-size)}.vf-textarea_large{padding:var(--vf-textarea-large-padding)}.vf-textarea_large .vf-textarea__control{font-size:var(--vf-textarea-large-font-size)}.vf-textarea_disabled{opacity:var(--vf-textarea-disabled-opacity);cursor:not-allowed}.vf-select{position:relative;display:inline-block;min-width:var(--vf-select-min-width);height:var(--vf-controls-height);box-sizing:border-box;border-radius:var(--vf-select-border-radius);border:var(--vf-border-width) solid var(--vf-select-border-color);background-color:var(--vf-select-background-color);color:var(--vf-select-text-color);transition:border-color .2s ease,box-shadow .2s ease}.vf-select_outlined{background-color:transparent}.vf-select__control{width:100%;padding:var(--vf-select-padding);border:none;background:transparent;color:inherit;font-size:var(--vf-select-font-size);line-height:var(--vf-typography-line-height);font-family:inherit;outline:none;display:inline-flex;align-items:center;justify-content:space-between;height:var(--vf-controls-height);box-sizing:border-box;gap:var(--vf-select-control-gap);cursor:pointer}.vf-select__label{text-align:left}.vf-select__label_placeholder{color:var(--vf-secondary-text-color)}.vf-select__chevron{font-size:var(--vf-select-chevron-size);opacity:.7}.vf-select__panel{position:fixed;z-index:50;padding:var(--vf-select-panel-padding);max-height:var(--vf-select-panel-max-height);overflow:auto;border-radius:calc(var(--vf-select-border-radius) + var(--vf-select-panel-radius-offset));border:var(--vf-border-width) solid var(--vf-select-panel-border-color);background-color:var(--vf-select-panel-background-color);box-shadow:var(--vf-select-panel-shadow);color:var(--vf-select-text-color)}.vf-select__option{width:100%;text-align:left;border:none;background:transparent;padding:var(--vf-select-option-padding);border-radius:var(--vf-select-option-border-radius);color:inherit;cursor:pointer;font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height);font-family:inherit}.vf-select__option:hover:not(.is-disabled),.vf-select__option:focus-visible:not(.is-disabled){background-color:var(--vf-select-option-hover-background-color);outline:none}.vf-select__option.is-active{background-color:var(--vf-select-option-active-background-color);color:var(--vf-select-option-active-text-color)}.vf-select__option.is-disabled{opacity:.6;cursor:not-allowed}.vf-select_open{border-color:var(--vf-select-focus-border-color);box-shadow:var(--vf-select-focus-ring-shadow)}.vf-select:hover:not(.vf-select_disabled){border-color:var(--vf-select-hover-border-color)}.vf-select:focus-within:not(.vf-select_disabled){border-color:var(--vf-select-focus-border-color)}.vf-select_small .vf-select__control{padding:var(--vf-select-small-padding);font-size:var(--vf-select-small-font-size)}.vf-select_large .vf-select__control{padding:var(--vf-select-large-padding);font-size:var(--vf-select-large-font-size)}.vf-select_disabled{opacity:var(--vf-select-disabled-opacity);cursor:not-allowed}.vf-select_disabled .vf-select__control{cursor:not-allowed}.vf-checkbox{display:inline-flex;align-items:center;gap:var(--vf-checkbox-gap);cursor:pointer;color:var(--vf-checkbox-text-color);font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-checkbox__control{position:absolute;opacity:0;pointer-events:none}.vf-checkbox__box{width:var(--vf-checkbox-size);height:var(--vf-checkbox-size);border:var(--vf-border-width) solid var(--vf-checkbox-border-color);border-radius:var(--vf-checkbox-border-radius);background-color:var(--vf-checkbox-background-color);display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}.vf-checkbox__control:checked+.vf-checkbox__box{background-color:var(--vf-checkbox-checked-background-color);border-color:var(--vf-checkbox-checked-border-color)}.vf-checkbox__control:checked+.vf-checkbox__box:after{content:"";width:calc(var(--vf-checkbox-size) / 2);height:calc(var(--vf-checkbox-size) / 2);background-color:var(--vf-checkbox-check-color);border-radius:var(--vf-checkbox-check-border-radius)}.vf-checkbox_outlined .vf-checkbox__box{background-color:transparent}.vf-checkbox_disabled{opacity:var(--vf-checkbox-disabled-opacity);cursor:not-allowed}.vf-radio-group{display:inline-flex;flex-direction:column;gap:var(--vf-radio-group-gap)}.vf-radio-group_horizontal{flex-direction:row;flex-wrap:wrap}.vf-radio{display:inline-flex;align-items:center;gap:var(--vf-radio-gap);cursor:pointer;color:var(--vf-radio-text-color);font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-radio__control{position:absolute;opacity:0;pointer-events:none}.vf-radio__circle{width:var(--vf-radio-size);height:var(--vf-radio-size);border:var(--vf-border-width) solid var(--vf-radio-border-color);border-radius:var(--vf-radio-border-radius);background-color:var(--vf-radio-background-color);display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}.vf-radio__control:checked+.vf-radio__circle{background-color:var(--vf-radio-checked-background-color);border-color:var(--vf-radio-checked-border-color)}.vf-radio__control:checked+.vf-radio__circle:after{content:"";width:var(--vf-radio-dot-size);height:var(--vf-radio-dot-size);background-color:var(--vf-radio-dot-color);border-radius:var(--vf-radio-dot-border-radius)}.vf-radio_outlined .vf-radio__circle{background-color:transparent}.vf-radio_disabled{opacity:var(--vf-radio-disabled-opacity);cursor:not-allowed}.vf-switch{display:inline-flex;align-items:center;gap:var(--vf-switch-gap);cursor:pointer;color:var(--vf-switch-text-color);font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-switch__control{position:absolute;opacity:0;pointer-events:none}.vf-switch__track{position:relative;width:var(--vf-switch-width);height:var(--vf-switch-height);border-radius:var(--vf-switch-height);background-color:var(--vf-switch-background-color);transition:background-color .2s ease}.vf-switch__thumb{position:absolute;top:50%;left:var(--vf-switch-thumb-offset);width:var(--vf-switch-thumb-size);height:var(--vf-switch-thumb-size);border-radius:50%;background-color:var(--vf-switch-thumb-color);transform:translateY(-50%);transition:transform .2s ease}.vf-switch__control:checked+.vf-switch__track{background-color:var(--vf-switch-checked-background-color)}.vf-switch__control:checked+.vf-switch__track .vf-switch__thumb{transform:translate(calc(var(--vf-switch-width) - var(--vf-switch-thumb-size) - var(--vf-switch-thumb-translate-offset)),-50%)}.vf-switch_disabled{opacity:var(--vf-switch-disabled-opacity);cursor:not-allowed}.vf-popover{position:relative}.vf-popover__button{cursor:pointer;-webkit-user-select:none;user-select:none}.vf-popover__wrapper{position:absolute;background-color:var(--vf-popover-background-color)}.vf-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vf-modal-z-index);display:flex;align-items:center;justify-content:center}.vf-modal__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--vf-modal-overlay-background-color)}.vf-modal__panel{position:relative;z-index:1;width:var(--vf-modal-width);max-width:var(--vf-modal-max-width);max-height:var(--vf-modal-max-height);padding:var(--vf-modal-padding);border-radius:var(--vf-modal-border-radius);background-color:var(--vf-modal-background-color);color:var(--vf-modal-text-color);box-shadow:var(--vf-modal-shadow);overflow:auto;outline:none}.vf-modal_sm .vf-modal__panel{width:var(--vf-modal-width-sm);max-width:var(--vf-modal-max-width-sm)}.vf-modal_lg .vf-modal__panel{width:var(--vf-modal-width-lg);max-width:var(--vf-modal-max-width-lg)}.vf-modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--vf-modal-header-gap)}.vf-modal__title{margin:0;font-size:var(--vf-modal-title-font-size);line-height:var(--vf-modal-title-line-height);font-weight:var(--vf-modal-title-font-weight)}.vf-modal__body{margin-bottom:var(--vf-modal-body-gap)}.vf-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--vf-modal-footer-gap)}.vf-modal__close{position:absolute;top:var(--vf-modal-close-offset);right:var(--vf-modal-close-offset);width:var(--vf-modal-close-size);height:var(--vf-modal-close-size);border-radius:var(--vf-modal-close-radius);border:none;background:transparent;color:var(--vf-modal-close-color);cursor:pointer;font-size:var(--vf-modal-close-font-size);line-height:1}.vf-modal__close:hover{background-color:var(--vf-modal-close-hover-background-color)}.vf-tooltip__trigger{display:inline-flex}.vf-tooltip{position:fixed;z-index:var(--vf-tooltip-z-index);padding:var(--vf-tooltip-padding);border-radius:var(--vf-tooltip-border-radius);background-color:var(--vf-tooltip-background-color);color:var(--vf-tooltip-text-color);font-size:var(--vf-tooltip-font-size);line-height:var(--vf-tooltip-line-height);box-shadow:none;filter:drop-shadow(var(--vf-tooltip-shadow));max-width:var(--vf-tooltip-max-width)}.vf-tooltip__content{position:relative;z-index:1}.vf-tooltip__arrow{position:absolute;z-index:0;--vf-tooltip-arrow-rendered-height: var(--vf-tooltip-arrow-size);--vf-tooltip-arrow-half-width: calc(var(--vf-tooltip-arrow-size) * .8);width:0;height:0;border-style:solid;pointer-events:none}.vf-tooltip[data-placement^=top] .vf-tooltip__arrow{bottom:calc(var(--vf-tooltip-arrow-rendered-height) * -1);left:50%;transform:translate(-50%);border-width:var(--vf-tooltip-arrow-rendered-height) var(--vf-tooltip-arrow-half-width) 0 var(--vf-tooltip-arrow-half-width);border-color:var(--vf-tooltip-background-color) transparent transparent transparent}.vf-tooltip[data-placement^=bottom] .vf-tooltip__arrow{top:calc(var(--vf-tooltip-arrow-rendered-height) * -1);left:50%;transform:translate(-50%);border-width:0 var(--vf-tooltip-arrow-half-width) var(--vf-tooltip-arrow-rendered-height) var(--vf-tooltip-arrow-half-width);border-color:transparent transparent var(--vf-tooltip-background-color) transparent}.vf-tooltip[data-placement^=left] .vf-tooltip__arrow{right:calc(var(--vf-tooltip-arrow-half-width) * -2);top:50%;transform:translateY(-50%);border-width:var(--vf-tooltip-arrow-half-width) var(--vf-tooltip-arrow-rendered-height) var(--vf-tooltip-arrow-half-width) 0;border-color:transparent var(--vf-tooltip-background-color) transparent transparent}.vf-tooltip[data-placement^=right] .vf-tooltip__arrow{left:calc(var(--vf-tooltip-arrow-half-width) * -2);top:50%;transform:translateY(-50%);border-width:var(--vf-tooltip-arrow-half-width) 0 var(--vf-tooltip-arrow-half-width) var(--vf-tooltip-arrow-rendered-height);border-color:transparent transparent transparent var(--vf-tooltip-background-color)}
|
|
1
|
+
.vf-link{color:inherit;cursor:pointer;text-decoration:none;font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-link:hover{color:var(--vf-link-hover-color)}.vf-link:active{color:var(--vf-link-active-color)}.vf-link.vf-link_disabled{cursor:not-allowed}.vf-link_active,.vf-link_partially-active{color:var(--vf-link-active-color)}.vf-card{border:var(--vf-border-width) solid var(--vf-card-border-color);border-radius:var(--vf-card-border-radius)}.vf-card__default{padding:var(--vf-card-padding)}.vf-menu{display:flex}.vf-menu_horizontal>.vf-menu__list{flex-direction:row}.vf-menu_horizontal>.vf-menu__list>.vf-menu__item{align-items:center}.vf-menu_horizontal>.vf-menu__list>.vf-menu__item:not(:first-child){margin-left:var(--vf-menu-item-margin-left)}.vf-menu_horizontal>.vf-menu__list>.vf-menu__item:not(:last-child){margin-right:var(--vf-menu-item-margin-right)}.vf-menu_horizontal>.vf-menu__list>.vf-menu__item>.vf-menu__separator{height:var(--vf-menu-separator-height);border-top:none;border-right:none;border-left:var(--vf-menu-separator-thickness) solid var(--vf-menu-separator-color);border-bottom:none}.vf-menu_vertical>.vf-menu__list{width:100%;flex-direction:column}.vf-menu_vertical>.vf-menu__list>.vf-menu__item{flex-direction:column}.vf-menu_vertical>.vf-menu__list>.vf-menu__item:not(:first-child){margin-top:var(--vf-menu-item-margin-top)}.vf-menu_vertical>.vf-menu__list>.vf-menu__item:not(:last-child){margin-bottom:var(--vf-menu-item-margin-bottom)}.vf-menu_vertical>.vf-menu__list>.vf-menu__item>.vf-menu{overflow:hidden}.vf-menu__list{margin:0;padding:0;display:flex;list-style:none}.vf-menu__separator{width:100%;height:var(--vf-menu-separator-thickness);border:none;margin:0;background-color:var(--vf-menu-separator-color)}.vf-menu__item{display:flex;font-weight:500}.vf-menu__link{display:flex;align-items:center;text-decoration:none;font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-menu__link:hover{color:var(--vf-menu-link-hover-color)}.vf-menu__parent{cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-menu__parent:hover{color:var(--vf-menu-parent-hover-color)}.vf-menu__icon{margin-right:var(--vf-menu-icon-gap)}.vf-menu__submenu.vf-menu__submenu_visible{margin-top:var(--vf-menu-submenu-offset);margin-left:var(--vf-menu-submenu-offset)}.vf-menu__submenu:not(.vf-menu__submenu_visible){height:0}.vf-button{display:inline-flex;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;height:var(--vf-controls-height);box-sizing:border-box;padding:var(--vf-button-padding);font-size:var(--vf-button-font-size);line-height:var(--vf-typography-line-height);font-family:inherit;border-radius:var(--vf-button-border-radius);overflow:hidden}.vf-button_text{border:var(--vf-border-width) solid transparent;background-color:transparent}.vf-button_outlined{background-color:transparent}.vf-button_primary.vf-button_text{color:var(--vf-button-text-primary-color)}.vf-button_primary.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-primary-hover-background-color)}.vf-button_primary.vf-button_outlined{color:var(--vf-button-outlined-primary-color);border:var(--vf-border-width) solid var(--vf-button-outlined-primary-border-color)}.vf-button_primary.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-primary-hover-background-color)}.vf-button_primary:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-primary-color);border:var(--vf-border-width) solid var(--vf-button-primary-border-color);background-color:var(--vf-button-primary-background-color)}.vf-button_primary:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-primary-hover-color);border:var(--vf-border-width) solid var(--vf-button-primary-hover-border-color);background-color:var(--vf-button-primary-hover-background-color)}.vf-button_primary:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-primary-active-color);border:var(--vf-border-width) solid var(--vf-button-primary-active-border-color);background-color:var(--vf-button-primary-active-background-color)}.vf-button_secondary.vf-button_text{color:var(--vf-button-text-secondary-color)}.vf-button_secondary.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-secondary-hover-background-color)}.vf-button_secondary.vf-button_outlined{color:var(--vf-button-outlined-secondary-color);border:var(--vf-border-width) solid var(--vf-button-outlined-secondary-border-color)}.vf-button_secondary.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-secondary-hover-background-color)}.vf-button_secondary:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-secondary-color);border:var(--vf-border-width) solid var(--vf-button-secondary-border-color);background-color:var(--vf-button-secondary-background-color)}.vf-button_secondary:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-secondary-hover-color);border:var(--vf-border-width) solid var(--vf-button-secondary-hover-border-color);background-color:var(--vf-button-secondary-hover-background-color)}.vf-button_secondary:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-secondary-active-color);border:var(--vf-border-width) solid var(--vf-button-secondary-active-border-color);background-color:var(--vf-button-secondary-active-background-color)}.vf-button_success.vf-button_text{color:var(--vf-button-text-success-color)}.vf-button_success.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-success-hover-background-color)}.vf-button_success.vf-button_outlined{color:var(--vf-button-outlined-success-color);border:var(--vf-border-width) solid var(--vf-button-outlined-success-border-color)}.vf-button_success.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-success-hover-background-color)}.vf-button_success:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-success-color);border:var(--vf-border-width) solid var(--vf-button-success-border-color);background-color:var(--vf-button-success-background-color)}.vf-button_success:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-success-hover-color);border:var(--vf-border-width) solid var(--vf-button-success-hover-border-color);background-color:var(--vf-button-success-hover-background-color)}.vf-button_success:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-success-active-color);border:var(--vf-border-width) solid var(--vf-button-success-active-border-color);background-color:var(--vf-button-success-active-background-color)}.vf-button_info.vf-button_text{color:var(--vf-button-text-info-color)}.vf-button_info.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-info-hover-background-color)}.vf-button_info.vf-button_outlined{color:var(--vf-button-outlined-info-color);border:var(--vf-border-width) solid var(--vf-button-outlined-info-border-color)}.vf-button_info.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-info-hover-background-color)}.vf-button_info:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-info-color);border:var(--vf-border-width) solid var(--vf-button-info-border-color);background-color:var(--vf-button-info-background-color)}.vf-button_info:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-info-hover-color);border:var(--vf-border-width) solid var(--vf-button-info-hover-border-color);background-color:var(--vf-button-info-hover-background-color)}.vf-button_info:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-info-active-color);border:var(--vf-border-width) solid var(--vf-button-info-active-border-color);background-color:var(--vf-button-info-active-background-color)}.vf-button_warning.vf-button_text{color:var(--vf-button-text-warning-color)}.vf-button_warning.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-warning-hover-background-color)}.vf-button_warning.vf-button_outlined{color:var(--vf-button-outlined-warning-color);border:var(--vf-border-width) solid var(--vf-button-outlined-warning-border-color)}.vf-button_warning.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-warning-hover-background-color)}.vf-button_warning:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-warning-color);border:var(--vf-border-width) solid var(--vf-button-warning-border-color);background-color:var(--vf-button-warning-background-color)}.vf-button_warning:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-warning-hover-color);border:var(--vf-border-width) solid var(--vf-button-warning-hover-border-color);background-color:var(--vf-button-warning-hover-background-color)}.vf-button_warning:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-warning-active-color);border:var(--vf-border-width) solid var(--vf-button-warning-active-border-color);background-color:var(--vf-button-warning-active-background-color)}.vf-button_danger.vf-button_text{color:var(--vf-button-text-danger-color)}.vf-button_danger.vf-button_text:not(.vf-button_disabled):hover{background-color:var(--vf-button-text-danger-hover-background-color)}.vf-button_danger.vf-button_outlined{color:var(--vf-button-outlined-danger-color);border:var(--vf-border-width) solid var(--vf-button-outlined-danger-border-color)}.vf-button_danger.vf-button_outlined:not(.vf-button_disabled):hover{background-color:var(--vf-button-outlined-danger-hover-background-color)}.vf-button_danger:not(.vf-button_text):not(.vf-button_outlined){color:var(--vf-button-danger-color);border:var(--vf-border-width) solid var(--vf-button-danger-border-color);background-color:var(--vf-button-danger-background-color)}.vf-button_danger:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):hover{color:var(--vf-button-danger-hover-color);border:var(--vf-border-width) solid var(--vf-button-danger-hover-border-color);background-color:var(--vf-button-danger-hover-background-color)}.vf-button_danger:not(.vf-button_text):not(.vf-button_outlined):not(.vf-button_disabled):active{color:var(--vf-button-danger-active-color);border:var(--vf-border-width) solid var(--vf-button-danger-active-border-color);background-color:var(--vf-button-danger-active-background-color)}.vf-button_vertical{flex-direction:column}.vf-button__icon{display:inline-block}.vf-button__icon_top+.vf-button__label{margin-top:var(--vf-button-icon-gap)}.vf-button__icon_right{order:1}.vf-button__icon_right+.vf-button__label{margin-right:var(--vf-button-icon-gap)}.vf-button__icon_bottom{order:1}.vf-button__icon_bottom+.vf-button__label{margin-bottom:var(--vf-button-icon-gap)}.vf-button__icon_left+.vf-button__label{margin-left:var(--vf-button-icon-gap)}.vf-button_disabled{opacity:var(--vf-states-disabled-opacity);cursor:default}.vf-button_rounded{border-radius:var(--vf-button-rounded-border-radius)}.vf-button_small{font-size:var(--vf-button-small-font-size);padding:var(--vf-button-small-padding)}.vf-button_large{font-size:var(--vf-button-large-font-size);padding:var(--vf-button-large-padding)}.vf-input{display:flex;align-items:center;gap:var(--vf-input-gap);height:var(--vf-controls-height);box-sizing:border-box;padding:var(--vf-input-padding);border-radius:var(--vf-input-border-radius);border:var(--vf-border-width) solid var(--vf-input-border-color);background-color:var(--vf-input-background-color);color:var(--vf-input-text-color);transition:border-color .2s ease}.vf-input__control{flex:1;border:none;background:transparent;color:inherit;font-size:var(--vf-input-font-size);line-height:var(--vf-typography-line-height);font-family:inherit;outline:none}.vf-input__control::placeholder{color:var(--vf-input-placeholder-color)}.vf-input:hover:not(.vf-input_disabled){border-color:var(--vf-input-hover-border-color)}.vf-input:focus-within:not(.vf-input_disabled){border-color:var(--vf-input-focus-border-color);box-shadow:var(--vf-input-focus-ring-shadow)}.vf-input_outlined{background-color:transparent}.vf-input_small{padding:var(--vf-input-small-padding)}.vf-input_small .vf-input__control{font-size:var(--vf-input-small-font-size)}.vf-input_large{padding:var(--vf-input-large-padding)}.vf-input_large .vf-input__control{font-size:var(--vf-input-large-font-size)}.vf-input_disabled{opacity:var(--vf-input-disabled-opacity);cursor:not-allowed}.vf-textarea{display:flex;align-items:stretch;gap:var(--vf-textarea-gap);min-height:var(--vf-textarea-min-height);box-sizing:border-box;padding:var(--vf-textarea-padding);border-radius:var(--vf-textarea-border-radius);border:var(--vf-border-width) solid var(--vf-textarea-border-color);background-color:var(--vf-textarea-background-color);color:var(--vf-textarea-text-color);transition:border-color .2s ease,box-shadow .2s ease}.vf-textarea__control{flex:1;min-height:var(--vf-textarea-min-height);border:none;background:transparent;color:inherit;font-size:var(--vf-textarea-font-size);line-height:var(--vf-typography-line-height);font-family:inherit;outline:none;resize:var(--vf-textarea-resize);width:100%;padding:0;box-sizing:border-box}.vf-textarea__control::placeholder{color:var(--vf-textarea-placeholder-color)}.vf-textarea:hover:not(.vf-textarea_disabled){border-color:var(--vf-textarea-hover-border-color)}.vf-textarea:focus-within:not(.vf-textarea_disabled){border-color:var(--vf-textarea-focus-border-color);box-shadow:var(--vf-textarea-focus-ring-shadow)}.vf-textarea_outlined{background-color:transparent}.vf-textarea_small{padding:var(--vf-textarea-small-padding)}.vf-textarea_small .vf-textarea__control{font-size:var(--vf-textarea-small-font-size)}.vf-textarea_large{padding:var(--vf-textarea-large-padding)}.vf-textarea_large .vf-textarea__control{font-size:var(--vf-textarea-large-font-size)}.vf-textarea_disabled{opacity:var(--vf-textarea-disabled-opacity);cursor:not-allowed}.vf-select{position:relative;display:inline-block;min-width:var(--vf-select-min-width);height:var(--vf-controls-height);box-sizing:border-box;border-radius:var(--vf-select-border-radius);border:var(--vf-border-width) solid var(--vf-select-border-color);background-color:var(--vf-select-background-color);color:var(--vf-select-text-color);transition:border-color .2s ease,box-shadow .2s ease}.vf-select_outlined{background-color:transparent}.vf-select__control{width:100%;padding:var(--vf-select-padding);border:none;background:transparent;color:inherit;font-size:var(--vf-select-font-size);line-height:var(--vf-typography-line-height);font-family:inherit;outline:none;display:inline-flex;align-items:center;justify-content:space-between;height:var(--vf-controls-height);box-sizing:border-box;gap:var(--vf-select-control-gap);cursor:pointer}.vf-select__label{text-align:left}.vf-select__label_placeholder{color:var(--vf-secondary-text-color)}.vf-select__chevron{font-size:var(--vf-select-chevron-size);opacity:.7}.vf-select__panel{position:fixed;z-index:50;padding:var(--vf-select-panel-padding);max-height:var(--vf-select-panel-max-height);overflow:auto;border-radius:calc(var(--vf-select-border-radius) + var(--vf-select-panel-radius-offset));border:var(--vf-border-width) solid var(--vf-select-panel-border-color);background-color:var(--vf-select-panel-background-color);box-shadow:var(--vf-select-panel-shadow);color:var(--vf-select-text-color)}.vf-select__option{width:100%;text-align:left;border:none;background:transparent;padding:var(--vf-select-option-padding);border-radius:var(--vf-select-option-border-radius);color:inherit;cursor:pointer;font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height);font-family:inherit}.vf-select__option:hover:not(.is-disabled),.vf-select__option:focus-visible:not(.is-disabled){background-color:var(--vf-select-option-hover-background-color);outline:none}.vf-select__option.is-active{background-color:var(--vf-select-option-active-background-color);color:var(--vf-select-option-active-text-color)}.vf-select__option.is-disabled{opacity:.6;cursor:not-allowed}.vf-select_open{border-color:var(--vf-select-focus-border-color);box-shadow:var(--vf-select-focus-ring-shadow)}.vf-select:hover:not(.vf-select_disabled){border-color:var(--vf-select-hover-border-color)}.vf-select:focus-within:not(.vf-select_disabled){border-color:var(--vf-select-focus-border-color)}.vf-select_small .vf-select__control{padding:var(--vf-select-small-padding);font-size:var(--vf-select-small-font-size)}.vf-select_large .vf-select__control{padding:var(--vf-select-large-padding);font-size:var(--vf-select-large-font-size)}.vf-select_disabled{opacity:var(--vf-select-disabled-opacity);cursor:not-allowed}.vf-select_disabled .vf-select__control{cursor:not-allowed}.vf-checkbox{display:inline-flex;align-items:center;gap:var(--vf-checkbox-gap);cursor:pointer;color:var(--vf-checkbox-text-color);font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-checkbox__control{position:absolute;opacity:0;pointer-events:none}.vf-checkbox__box{width:var(--vf-checkbox-size);height:var(--vf-checkbox-size);border:var(--vf-border-width) solid var(--vf-checkbox-border-color);border-radius:var(--vf-checkbox-border-radius);background-color:var(--vf-checkbox-background-color);display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}.vf-checkbox__control:checked+.vf-checkbox__box{background-color:var(--vf-checkbox-checked-background-color);border-color:var(--vf-checkbox-checked-border-color)}.vf-checkbox__control:checked+.vf-checkbox__box:after{content:"";width:calc(var(--vf-checkbox-size) / 2);height:calc(var(--vf-checkbox-size) / 2);background-color:var(--vf-checkbox-check-color);border-radius:var(--vf-checkbox-check-border-radius)}.vf-checkbox_outlined .vf-checkbox__box{background-color:transparent}.vf-checkbox_disabled{opacity:var(--vf-checkbox-disabled-opacity);cursor:not-allowed}.vf-radio-group{display:inline-flex;flex-direction:column;gap:var(--vf-radio-group-gap)}.vf-radio-group_horizontal{flex-direction:row;flex-wrap:wrap}.vf-radio{display:inline-flex;align-items:center;gap:var(--vf-radio-gap);cursor:pointer;color:var(--vf-radio-text-color);font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-radio__control{position:absolute;opacity:0;pointer-events:none}.vf-radio__circle{width:var(--vf-radio-size);height:var(--vf-radio-size);border:var(--vf-border-width) solid var(--vf-radio-border-color);border-radius:var(--vf-radio-border-radius);background-color:var(--vf-radio-background-color);display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}.vf-radio__control:checked+.vf-radio__circle{background-color:var(--vf-radio-checked-background-color);border-color:var(--vf-radio-checked-border-color)}.vf-radio__control:checked+.vf-radio__circle:after{content:"";width:var(--vf-radio-dot-size);height:var(--vf-radio-dot-size);background-color:var(--vf-radio-dot-color);border-radius:var(--vf-radio-dot-border-radius)}.vf-radio_outlined .vf-radio__circle{background-color:transparent}.vf-radio_disabled{opacity:var(--vf-radio-disabled-opacity);cursor:not-allowed}.vf-tabs{display:flex;flex-direction:column;gap:var(--vf-tabs-gap)}.vf-tabs__list{display:flex;flex-wrap:wrap;gap:var(--vf-tabs-list-gap);border-bottom:var(--vf-tabs-list-border-width) solid var(--vf-tabs-list-border-color)}.vf-tabs__panels{display:block}.vf-tabs_vertical{flex-direction:row;align-items:flex-start}.vf-tabs_vertical .vf-tabs__list{flex-direction:column;border-bottom:none;border-right:var(--vf-tabs-list-border-width) solid var(--vf-tabs-list-border-color);padding-right:var(--vf-tabs-list-vertical-padding)}.vf-tabs_vertical .vf-tabs__panels{flex:1}.vf-tabs_disabled{opacity:var(--vf-tabs-disabled-opacity)}.vf-tab{padding:var(--vf-tabs-tab-padding);border:none;border-bottom:var(--vf-tabs-tab-active-border-width) solid transparent;background-color:var(--vf-tabs-tab-background-color);color:var(--vf-tabs-tab-text-color);font-size:var(--vf-tabs-tab-font-size);line-height:var(--vf-typography-line-height);font-family:inherit;border-radius:var(--vf-tabs-tab-border-radius);cursor:pointer;transition:background-color .2s ease,color .2s ease}.vf-tab:hover:not(.vf-tab_disabled){background-color:var(--vf-tabs-tab-hover-background-color)}.vf-tab_active{color:var(--vf-tabs-tab-active-text-color);background-color:var(--vf-tabs-tab-active-background-color);border-bottom-color:var(--vf-tabs-tab-active-border-color)}.vf-tabs_vertical .vf-tab_active{border-bottom-color:transparent;border-right:var(--vf-tabs-tab-active-border-width) solid var(--vf-tabs-tab-active-border-color)}.vf-tabs_vertical .vf-tab{border-bottom:none;border-right:var(--vf-tabs-tab-active-border-width) solid transparent}.vf-tab_disabled{opacity:var(--vf-tabs-disabled-opacity);cursor:not-allowed}.vf-tab-panel{padding:var(--vf-tabs-panel-padding);border-radius:var(--vf-tabs-panel-border-radius);background-color:var(--vf-tabs-panel-background-color);color:var(--vf-tabs-panel-text-color)}.vf-toast{display:inline-flex;align-items:flex-start;gap:var(--vf-toast-gap);padding:var(--vf-toast-padding);border-radius:var(--vf-toast-border-radius);background-color:var(--vf-toast-background-color);color:var(--vf-toast-text-color);box-shadow:var(--vf-toast-shadow);border:var(--vf-border-width) solid var(--vf-toast-border-color);min-width:var(--vf-toast-min-width)}.vf-toast__body{display:grid;gap:var(--vf-toast-body-gap)}.vf-toast__title{font-weight:var(--vf-toast-title-font-weight);font-size:var(--vf-toast-title-font-size)}.vf-toast__message{font-size:var(--vf-toast-font-size);line-height:var(--vf-toast-line-height)}.vf-toast__close{margin-left:auto;border:none;background:transparent;color:inherit;cursor:pointer;font-size:var(--vf-toast-close-size);line-height:1;padding:0;opacity:.7}.vf-toast__close:hover{opacity:1}.vf-toast[data-severity=info]{background-color:var(--vf-toast-info-background-color);border-color:var(--vf-toast-info-border-color);color:var(--vf-toast-info-text-color)}.vf-toast[data-severity=success]{background-color:var(--vf-toast-success-background-color);border-color:var(--vf-toast-success-border-color);color:var(--vf-toast-success-text-color)}.vf-toast[data-severity=warn]{background-color:var(--vf-toast-warn-background-color);border-color:var(--vf-toast-warn-border-color);color:var(--vf-toast-warn-text-color)}.vf-toast[data-severity=danger]{background-color:var(--vf-toast-danger-background-color);border-color:var(--vf-toast-danger-border-color);color:var(--vf-toast-danger-text-color)}.vf-toast-container{position:fixed;z-index:var(--vf-toast-z-index);display:flex;flex-direction:column;gap:var(--vf-toast-container-gap);padding:var(--vf-toast-container-padding);max-width:var(--vf-toast-container-max-width)}.vf-toast-container_top-right{top:0;right:0;align-items:flex-end}.vf-toast-container_top-left{top:0;left:0;align-items:flex-start}.vf-toast-container_bottom-right{bottom:0;right:0;align-items:flex-end}.vf-toast-container_bottom-left{bottom:0;left:0;align-items:flex-start}.vf-switch{display:inline-flex;align-items:center;gap:var(--vf-switch-gap);cursor:pointer;color:var(--vf-switch-text-color);font-size:var(--vf-typography-font-size);line-height:var(--vf-typography-line-height)}.vf-switch__control{position:absolute;opacity:0;pointer-events:none}.vf-switch__track{position:relative;width:var(--vf-switch-width);height:var(--vf-switch-height);border-radius:var(--vf-switch-height);background-color:var(--vf-switch-background-color);transition:background-color .2s ease}.vf-switch__thumb{position:absolute;top:50%;left:var(--vf-switch-thumb-offset);width:var(--vf-switch-thumb-size);height:var(--vf-switch-thumb-size);border-radius:50%;background-color:var(--vf-switch-thumb-color);transform:translateY(-50%);transition:transform .2s ease}.vf-switch__control:checked+.vf-switch__track{background-color:var(--vf-switch-checked-background-color)}.vf-switch__control:checked+.vf-switch__track .vf-switch__thumb{transform:translate(calc(var(--vf-switch-width) - var(--vf-switch-thumb-size) - var(--vf-switch-thumb-translate-offset)),-50%)}.vf-switch_disabled{opacity:var(--vf-switch-disabled-opacity);cursor:not-allowed}.vf-popover{position:relative}.vf-popover__button{cursor:pointer;-webkit-user-select:none;user-select:none}.vf-popover__wrapper{position:absolute;background-color:var(--vf-popover-background-color)}.vf-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vf-modal-z-index);display:flex;align-items:center;justify-content:center}.vf-modal__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--vf-modal-overlay-background-color)}.vf-modal__panel{position:relative;z-index:1;width:var(--vf-modal-width);max-width:var(--vf-modal-max-width);max-height:var(--vf-modal-max-height);padding:var(--vf-modal-padding);border-radius:var(--vf-modal-border-radius);background-color:var(--vf-modal-background-color);color:var(--vf-modal-text-color);box-shadow:var(--vf-modal-shadow);overflow:auto;outline:none}.vf-modal_sm .vf-modal__panel{width:var(--vf-modal-width-sm);max-width:var(--vf-modal-max-width-sm)}.vf-modal_lg .vf-modal__panel{width:var(--vf-modal-width-lg);max-width:var(--vf-modal-max-width-lg)}.vf-modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--vf-modal-header-gap)}.vf-modal__title{margin:0;font-size:var(--vf-modal-title-font-size);line-height:var(--vf-modal-title-line-height);font-weight:var(--vf-modal-title-font-weight)}.vf-modal__body{margin-bottom:var(--vf-modal-body-gap)}.vf-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--vf-modal-footer-gap)}.vf-modal__close{position:absolute;top:var(--vf-modal-close-offset);right:var(--vf-modal-close-offset);width:var(--vf-modal-close-size);height:var(--vf-modal-close-size);border-radius:var(--vf-modal-close-radius);border:none;background:transparent;color:var(--vf-modal-close-color);cursor:pointer;font-size:var(--vf-modal-close-font-size);line-height:1}.vf-modal__close:hover{background-color:var(--vf-modal-close-hover-background-color)}.vf-tooltip__trigger{display:inline-flex}.vf-tooltip{position:fixed;z-index:var(--vf-tooltip-z-index);padding:var(--vf-tooltip-padding);border-radius:var(--vf-tooltip-border-radius);background-color:var(--vf-tooltip-background-color);color:var(--vf-tooltip-text-color);font-size:var(--vf-tooltip-font-size);line-height:var(--vf-tooltip-line-height);box-shadow:none;filter:drop-shadow(var(--vf-tooltip-shadow));max-width:var(--vf-tooltip-max-width)}.vf-tooltip__content{position:relative;z-index:1}.vf-tooltip__arrow{position:absolute;z-index:0;--vf-tooltip-arrow-rendered-height: var(--vf-tooltip-arrow-size);--vf-tooltip-arrow-half-width: calc(var(--vf-tooltip-arrow-size) * .8);width:0;height:0;border-style:solid;pointer-events:none}.vf-tooltip[data-placement^=top] .vf-tooltip__arrow{bottom:calc(var(--vf-tooltip-arrow-rendered-height) * -1);left:50%;transform:translate(-50%);border-width:var(--vf-tooltip-arrow-rendered-height) var(--vf-tooltip-arrow-half-width) 0 var(--vf-tooltip-arrow-half-width);border-color:var(--vf-tooltip-background-color) transparent transparent transparent}.vf-tooltip[data-placement^=bottom] .vf-tooltip__arrow{top:calc(var(--vf-tooltip-arrow-rendered-height) * -1);left:50%;transform:translate(-50%);border-width:0 var(--vf-tooltip-arrow-half-width) var(--vf-tooltip-arrow-rendered-height) var(--vf-tooltip-arrow-half-width);border-color:transparent transparent var(--vf-tooltip-background-color) transparent}.vf-tooltip[data-placement^=left] .vf-tooltip__arrow{right:calc(var(--vf-tooltip-arrow-half-width) * -2);top:50%;transform:translateY(-50%);border-width:var(--vf-tooltip-arrow-half-width) var(--vf-tooltip-arrow-rendered-height) var(--vf-tooltip-arrow-half-width) 0;border-color:transparent var(--vf-tooltip-background-color) transparent transparent}.vf-tooltip[data-placement^=right] .vf-tooltip__arrow{left:calc(var(--vf-tooltip-arrow-half-width) * -2);top:50%;transform:translateY(-50%);border-width:var(--vf-tooltip-arrow-half-width) 0 var(--vf-tooltip-arrow-half-width) var(--vf-tooltip-arrow-rendered-height);border-color:transparent transparent transparent var(--vf-tooltip-background-color)}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,11 @@ export { default as Select } from './package/components/select.vue';
|
|
|
8
8
|
export { default as Checkbox } from './package/components/checkbox.vue';
|
|
9
9
|
export { default as RadioGroup } from './package/components/radio-group.vue';
|
|
10
10
|
export { default as RadioButton } from './package/components/radio-button.vue';
|
|
11
|
+
export { default as Tabs } from './package/components/tabs.vue';
|
|
12
|
+
export { default as Tab } from './package/components/tab.vue';
|
|
13
|
+
export { default as TabPanel } from './package/components/tab-panel.vue';
|
|
14
|
+
export { default as Toast } from './package/components/toast.vue';
|
|
15
|
+
export { default as ToastContainer } from './package/components/toast-container.vue';
|
|
11
16
|
export { default as Switch } from './package/components/switch.vue';
|
|
12
17
|
export { default as Popover } from './package/components/popover.vue';
|
|
13
18
|
export { default as Modal } from './package/components/modal.vue';
|