@varlet/ui

{ "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json", "framework": "vue", "version": "3.10.4", "name": "VARLET", "contributions": { "html": { "tags": [ { "name": "var-action-sheet", "attributes": [ { "name": "v-model:show", "description": "Whether to display the action sheet", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "actions", "description": "Action list", "default": "[]", "value": { "type": "Actions", "kind": "expression" } }, { "name": "title", "description": "Action sheet title", "default": "Select One", "value": { "type": "string", "kind": "expression" } }, { "name": "overlay", "description": "Whether to display the overlay", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "overlay-class", "description": "Custom overlay class", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "overlay-style", "description": "Custom overlay style", "default": "-", "value": { "type": "object", "kind": "expression" } }, { "name": "lock-scroll", "description": "Whether to disable scrolling penetration, scrolling the Dialog when disabled will not cause the body to scroll", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "close-on-click-action", "description": "Whether to close the actions sheet when clicking action", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "close-on-click-overlay", "description": "Whether to click the overlay to close the action sheet", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "close-on-key-escape", "description": "Whether to support keyboard ESC to close the action sheet", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "safe-area", "description": "Whether to enable bottom safety zone adaptation", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "teleport", "description": "The location of the action sheet to mount", "default": "body", "value": { "type": "TeleportProps['to'] | false", "kind": "expression" } } ], "events": [ { "name": "select", "description": "Triggered when selecting an action sheet" }, { "name": "open", "description": "Triggered when opening an action sheet" }, { "name": "opened", "description": "Triggered when an action sheet open-animation ends" }, { "name": "close", "description": "Triggered when closing an action sheet" }, { "name": "closed", "description": "Triggered when an action sheet close-animation ends" }, { "name": "click-overlay", "description": "Triggered when clicking on overlay" }, { "name": "key-escape", "description": "Triggered when click keyboard ESC" } ], "slots": [ { "name": "actions", "description": "Action list" }, { "name": "title", "description": "Action sheet title" } ] }, { "name": "var-alert", "attributes": [ { "name": "type", "description": "Type, optional values are `info`, `success`, `warning`, `danger`", "default": "info", "value": { "type": "string", "kind": "expression" } }, { "name": "variant", "description": "Variant, optional values are `standard` `outlined` `tonal`", "default": "standard", "value": { "type": "string", "kind": "expression" } }, { "name": "color", "description": "Background color", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "title", "description": "Title", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "message", "description": "Message", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "elevation", "description": "Elevation, optional values are true, false, and levels from 0-24", "default": "false", "value": { "type": "string | number | boolean", "kind": "expression" } }, { "name": "closeable", "description": "Whether the alert is closeable", "default": "false", "value": { "type": "boolean", "kind": "expression" } } ], "events": [ { "name": "close", "description": "Triggered when the Close button is clicked and can only be used when the Close button is displayed" } ], "slots": [ { "name": "default", "description": "The message of alert" }, { "name": "content", "description": "The content of alert" }, { "name": "title", "description": "The title of alert" }, { "name": "icon", "description": "The prepend icon of alert" }, { "name": "close-icon", "description": "The close icon of alert" } ] }, { "name": "var-app-bar", "attributes": [ { "name": "color", "description": "Background", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "text-color", "description": "Text color", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "title", "description": "Title", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "title-position", "description": "Title location, can be set to `left`, `center`, `right`", "default": "left", "value": { "type": "string", "kind": "expression" } }, { "name": "elevation", "description": "Elevation level, options `true` `false` and level of `0-24`", "default": "true", "value": { "type": "string | number | boolean", "kind": "expression" } }, { "name": "fixed", "description": "Whether to fixed to the top", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "placeholder", "description": "Whether to generate placeholder elements of the same height at the top (`fixed` required)", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "z-index", "description": "AppBar element z-index", "default": "1", "value": { "type": "number | string", "kind": "expression" } }, { "name": "round", "description": "Whether to use rounded border", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "border", "description": "Whether to use bottom border", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "image", "description": "Background image", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "image-linear-gradient", "description": "Background image linear gradient", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "safe-area-top", "description": "Whether to enable top safe area adaptation", "default": "false", "value": { "type": "boolean", "kind": "expression" } } ], "events": [], "slots": [ { "name": "default", "description": "Customize the title content to override the `title` content" }, { "name": "left", "description": "Insert the content to the left of the app bar" }, { "name": "right", "description": "Insert the content to the right of the app bar" }, { "name": "content", "description": "Insert the content to the extra content of the app bar" } ] }, { "name": "var-auto-complete", "attributes": [ { "name": "v-model", "description": "The value of the binding", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "variant", "description": "Input variants, The optional value is `standard` `outlined`", "default": "standard", "value": { "type": "string", "kind": "expression" } }, { "name": "size", "description": "Input size, The optional value is `normal` `small`", "default": "normal", "value": { "type": "string", "kind": "expression" } }, { "name": "placeholder", "description": "placeholder", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "options", "description": "Specifies options", "default": "[]", "value": { "type": "AutoCompleteOption[]", "kind": "expression" } }, { "name": "label-key", "description": "As the key that uniquely identifies label", "default": "label", "value": { "type": "string", "kind": "expression" } }, { "name": "value-key", "description": "As the key that uniquely identifies value", "default": "value", "value": { "type": "string", "kind": "expression" } }, { "name": "maxlength", "description": "Maxlength", "default": "-", "value": { "type": "string | number", "kind": "expression" } }, { "name": "readonly", "description": "Whether the readonly", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "disabled", "description": "Whether the disabled", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "validate-trigger", "description": "Timing to trigger validation, The optional value is `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput`", "default": "['onInput', 'onClear', 'onChange']", "value": { "type": "AutoCompleteValidateTrigger[]", "kind": "expression" } }, { "name": "rules", "description": "Validation rules, return `true` to indicate verification passes, other types of values will be converted into text as user prompts. [Zod validation](#/en-US/zodValidation) is supported since `3.5.0`", "default": "-", "value": { "type": "((v: string) => any) | ZodType | Array<((v: string) => any) | ZodType>", "kind": "expression" } }, { "name": "enterkeyhint", "description": "Customize the enter key style, See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "clearable", "description": "Whether the clearable", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "line", "description": "Whether to display a dividing line", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "hint", "description": "Whether to use placeholder as hint", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "text-color", "description": "Text color", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "focus-color", "description": "The primary color in focus", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "blur-color", "description": "The primary color in blur", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "get-show", "description": "Determine whether the menu is displayed according to the input value", "default": "-", "value": { "type": "(v: string) => boolean", "kind": "expression" } } ], "events": [ { "name": "focus", "description": "Triggered while focusing" }, { "name": "blur", "description": "Triggered when out of focus" }, { "name": "click", "description": "Triggered on Click" }, { "name": "clear", "description": "Triggered on Clearance" }, { "name": "input", "description": "Triggered on input" }, { "name": "change", "description": "Triggered on change" } ], "slots": [ { "name": "prepend-icon", "description": "Prepend Icon" }, { "name": "append-icon", "description": "Append Icon" }, { "name": "clear-icon", "description": "Clear Icon" }, { "name": "extra-message", "description": "Extra message" } ] }, { "name": "var-avatar", "attributes": [ { "name": "round", "description": "Whether the avatar is round or not", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "size", "description": "The size of the avatar, with optional values of `mini small normal large`", "default": "normal", "value": { "type": "string | number", "kind": "expression" } }, { "name": "color", "description": "Background color of the avatar", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "src", "description": "Address of avatar", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "alt", "description": "Image alt text, the same as the native attribute of the `img` tag", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "fit", "description": "Filling mode of avatar image, optional value `fill contain cover none scale-down`", "default": "cover", "value": { "type": "string", "kind": "expression" } }, { "name": "bordered", "description": "Avatar with or without border", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "border-color", "description": "Avatar border color", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "loading", "description": "When lazy loading is enabled, the image displayed in the load", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "error", "description": "When lazy loading is enabled, the image displayed when loading fails", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "lazy", "description": "Whether to enable lazy loading", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "hoverable", "description": "Whether to enable hover effect", "default": "false", "value": { "type": "boolean", "kind": "expression" } } ], "events": [ { "name": "click", "description": "Triggered when clicking on avatar" }, { "name": "load", "description": "Triggered when the avatar image is successfully loaded (failure in lazy loading mode will try to load the avatar image multiple times and will only be triggered when successfully loaded)" }, { "name": "error", "description": "Triggered when the avatar image fails to load (failure in lazy loading mode will try to load the avatar image multiple times, will only be triggered at the end of the number of attempts)" } ], "slots": [ { "name": "default", "description": "Avatar content" } ] }, { "name": "var-avatar-group", "attributes": [ { "name": "offset", "description": "Avatar Offset within Avatar Group", "default": "-", "value": { "type": "number | string", "kind": "expression" } }, { "name": "vertical", "description": "Whether the group avatars are vertically aligned", "default": "false", "value": { "type": "boolean", "kind": "expression" } } ], "events": [], "slots": [ { "name": "default", "description": "Avatar group content" } ] }, { "name": "var-back-top", "attributes": [ { "name": "target", "description": "The target to trigger scroll. If it is `undefined`, back top will listen to the nearest scrollable parent.", "default": "-", "value": { "type": "string | HTMLElement", "kind": "expression" } }, { "name": "visibility-height", "description": "The button will not show until the scroll height reaches this value", "default": "200", "value": { "type": "string | number", "kind": "expression" } }, { "name": "bottom", "description": "Distance between `BackTop` and page bottom", "default": "-", "value": { "type": "string | number", "kind": "expression" } }, { "name": "right", "description": "Distance between `BackTop` and page right", "default": "-", "value": { "type": "string | number", "kind": "expression" } }, { "name": "elevation", "description": "Elevation level, options `true` `false` and level of `0-24`", "default": "true", "value": { "type": "string | number | boolean", "kind": "expression" } }, { "name": "duration", "description": "Time to return to top(ms)", "default": "300", "value": { "type": "number", "kind": "expression" } } ], "events": [ { "name": "click", "description": "Triggered when click" } ], "slots": [ { "name": "default", "description": "Custom the content" } ] }, { "name": "var-badge", "attributes": [ { "name": "type", "description": "Badge type, can be set to `default` `primary` `info` `success` `warning` `danger`", "default": "default", "value": { "type": "string", "kind": "expression" } }, { "name": "hidden", "description": "Whether to hidden badge", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "dot", "description": "Whether the badge is a dot", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "value", "description": "The value shown in the badge (takes effect when `dot` is `false`)", "default": "0", "value": { "type": "string | number", "kind": "expression" } }, { "name": "max-value", "description": "The maximum value shown in the logo, when `value` is greater than `max-value`, displays `max-value+` (effective when both `value` and `max-value` exist)", "default": "-", "value": { "type": "number", "kind": "expression" } }, { "name": "position", "description": "Define the position of the logo on other labels when there are other labels in the logo tag. Optional values are `right-top` `right-bottom` `left-top` `left-bottom`", "default": "right-top", "value": { "type": "string", "kind": "expression" } }, { "name": "offset-x", "description": "The horizontal offset of badge", "default": "0", "value": { "type": "number | string", "kind": "expression" } }, { "name": "offset-y", "description": "The vertical offset of badge", "default": "0", "value": { "type": "number | string", "kind": "expression" } }, { "name": "color", "description": "Custom badge colors", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "icon", "description": "Customize the content of the icon in the badge (priority is higher than `value`)", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "namespace", "description": "Customize the namespace of the icon in the badge", "default": "var-icon", "value": { "type": "string", "kind": "expression" } } ], "events": [], "slots": [ { "name": "default", "description": "Badge content" }, { "name": "value", "description": "The value shown in the badge" } ] }, { "name": "var-bottom-navigation", "attributes": [ { "name": "v-model:active", "description": "Identifier of current tab", "default": "0", "value": { "type": "number | string", "kind": "expression" } }, { "name": "fixed", "description": "Whether to fixed bottom", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "border", "description": "Whether to show border", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "safe-area", "description": "Whether to enable bottom safe area adaptation", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "z-index", "description": "Z-index", "default": "1", "value": { "type": "number | string", "kind": "expression" } }, { "name": "active-color", "description": "Color of active tab item", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "inactive-color", "description": "Color of inactive tab item", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "placeholder", "description": "Whether to generate placeholder elements of the same height at the bottom (`fixed` required)", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "fab-props", "description": "Fab button props", "default": "{ type: 'primary' }", "value": { "type": "ButtonProps", "kind": "expression" } }, { "name": "variant", "description": "Variant mode", "default": "false", "value": { "type": "boolean", "kind": "expression" } } ], "events": [ { "name": "before-change", "description": "The callback function before switching labels, which returns falsy value to prevent switching, supports the return of promise" }, { "name": "change", "description": "Triggered when switching labels" }, { "name": "fab-click", "description": "Triggered when clicking fab button" } ], "slots": [ { "name": "default", "description": "Content of bottom navigation" }, { "name": "fab", "description": "Support for inserting a custom Fab button into a component" } ] }, { "name": "var-bottom-navigation-item", "attributes": [], "events": [], "slots": [] }, { "name": "var-breadcrumb", "attributes": [ { "name": "separator", "description": "Separator", "default": "-", "value": { "type": "string", "kind": "expression" } } ], "events": [ { "name": "click", "description": "Triggered when a breadcrumb is clicked" } ], "slots": [ { "name": "default", "description": "Customize the default content" }, { "name": "separator", "description": "Customize separator content" } ] }, { "name": "var-breadcrumbs", "attributes": [ { "name": "separator", "description": "Separator", "default": "/", "value": { "type": "string", "kind": "expression" } } ], "events": [ { "name": "click", "description": "Triggered when a breadcrumb is clicked" } ], "slots": [ { "name": "default", "description": "Customize the default content" } ] }, { "name": "var-button", "attributes": [ { "name": "type", "description": "Button type, Can be set to `default` `primary` `info` `success` `warning` `danger`", "default": "default", "value": { "type": "string", "kind": "expression" } }, { "name": "native-type", "description": "Native button type, Can be set to `button` `submit` `reset`", "default": "button", "value": { "type": "string", "kind": "expression" } }, { "name": "size", "description": "Button size, Can be set to `normal` `mini` `small` `large`", "default": "normal", "value": { "type": "string", "kind": "expression" } }, { "name": "loading", "description": "Loading status", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "loading-radius", "description": "Loading radius, Can only be used when `loading-type=\"circle\"`", "default": "-", "value": { "type": "string | number", "kind": "expression" } }, { "name": "loading-type", "description": "Loading type, Can be set to `circle` `wave` `cube` `rect` `disappear`", "default": "circle", "value": { "type": "string", "kind": "expression" } }, { "name": "loading-size", "description": "Loading size, Can be set to `large` `normal` `small` `mini`", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "loading-color", "description": "Loading color", "default": "currentColor", "value": { "type": "string", "kind": "expression" } }, { "name": "auto-loading", "description": "Autoload mode for easy handling of asynchronous tasks", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "round", "description": "Whether to be round button", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "block", "description": "Whether to be block button", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "text", "description": "Whether to be text button", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "icon-container", "description": "Whether to serve as an icon container", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "outline", "description": "Whether to be outline button", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "disabled", "description": "Whether to disable button", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "ripple", "description": "Whether to be ripple button", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "focusable", "description": "Whether to be focus button", "default": "true", "value": { "type": "boolean", "kind": "expression" } }, { "name": "text-color", "description": "Button Text color", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "color", "description": "Button background color", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "elevation", "description": "Elevation level, options `true` `false` and level of `0-24`", "default": "true", "value": { "type": "string | number | boolean", "kind": "expression" } } ], "events": [ { "name": "click", "description": "Triggered when the button is clicked. Not triggered when `loading` or `disabled` status is `true`" }, { "name": "touchstart", "description": "Triggered when the button is touchstart, Not triggered when `loading` or `disabled` status is `true`" } ], "slots": [ { "name": "default", "description": "Button content" } ] }, { "name": "var-button-group", "attributes": [ { "name": "type", "description": "Button Group type, can be set to `default` `primary` `info` `success` `warning` `danger`", "default": "default", "value": { "type": "string", "kind": "expression" } }, { "name": "size", "description": "Button Group size, can be set to `normal` `mini` `small` `large`", "default": "normal", "value": { "type": "string", "kind": "expression" } }, { "name": "mode", "description": "Button Group mode, can be set to `normal` `text` `outline`", "default": "normal", "value": { "type": "string", "kind": "expression" } }, { "name": "vertical", "description": "Whether to be vertical button group", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "elevation", "description": "Elevation of Button Group, options `true` `false` and level of `0-24`", "default": "true", "value": { "type": "string | number | boolean", "kind": "expression" } }, { "name": "color", "description": "Button Group background color", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "text-color", "description": "Button Group Text color", "default": "-", "value": { "type": "string", "kind": "expression" } } ], "events": [], "slots": [ { "name": "default", "description": "Button Group content" } ] }, { "name": "var-card", "attributes": [ { "name": "variant", "description": "The variant of Card, optional value is `standard` `outlined` `filled`", "default": "standard", "value": { "type": "string", "kind": "expression" } }, { "name": "title", "description": "The title of Card", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "subtitle", "description": "The subtitle of Card", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "description", "description": "The description of Card", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "elevation", "description": "Elevation level, options `true` `false` and level of `0-24`", "default": "true", "value": { "type": "string | number | boolean", "kind": "expression" } }, { "name": "src", "description": "The src of Image", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "layout", "description": "Arrangement mode, options `row` `column`", "default": "column", "value": { "type": "string", "kind": "expression" } }, { "name": "fit", "description": "Fill mode, options `fill` `contain` `cover` `none` `scale-down`", "default": "cover", "value": { "type": "string", "kind": "expression" } }, { "name": "outline", "description": "Whether to be outline card", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "alt", "description": "Image alt text, the same as the native attribute of the `img` tag", "default": "-", "value": { "type": "string", "kind": "expression" } }, { "name": "image-height", "description": "Height of Image", "default": "-", "value": { "type": "string | number", "kind": "expression" } }, { "name": "image-width", "description": "Width of Image", "default": "-", "value": { "type": "string | number", "kind": "expression" } }, { "name": "ripple", "description": "Whether to enable ripple", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "v-model:floating", "description": "Whether to full screen", "default": "false", "value": { "type": "boolean", "kind": "expression" } }, { "name": "floating-duration", "description": "Time to full screen(ms)", "default": "250", "value": { "type": "number", "kind": "expression" } } ], "events": [ { "name": "click", "description": "Triggered when the card is click" } ], "slots": [ { "name": "image", "description": "Custom image" }, { "name": "default", "description": "Custom content" }, { "name": "title", "description": "Custom title" }, { "name": "subtitle", "description": "Custom subtitle" }, { "name": "description", "description": "Custom description" }, { "name": "floating-content", "description": "Content displayed when floating" }, { "name": "extra", "description": "Custom bottom content" }, { "name": "close-button", "description": "Custom close button" } ] }, { "name": "var-cell", "attributes": [ { "name": "title", "description": "Title", "default": "-", "value": { "type": "st