routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016-now Vuetify, LLC
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
+297
@@ -0,0 +1,297 @@
|
||||
<div align="center">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.vuetifyjs.com/docs/images/one/logos/vuetify-logo-dark.png">
|
||||
<img alt="Vuetify Logo" src="https://cdn.vuetifyjs.com/docs/images/one/logos/vuetify-logo-light.png" height="100">
|
||||
</picture>
|
||||
</div>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/vuetify">
|
||||
<img src="https://img.shields.io/npm/dt/vuetify.svg" alt="Downloads">
|
||||
</a>
|
||||
<a href="https://www.npmjs.com/package/vuetify">
|
||||
<img src="https://img.shields.io/npm/dm/vuetify.svg" alt="Downloads">
|
||||
</a>
|
||||
<br>
|
||||
<a href="https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md">
|
||||
<img src="https://img.shields.io/npm/l/vuetify.svg" alt="License">
|
||||
</a>
|
||||
<a href="https://community.vuetifyjs.com">
|
||||
<img src="https://discordapp.com/api/guilds/340160225338195969/widget.png" alt="Chat">
|
||||
</a>
|
||||
<br>
|
||||
<a href="https://www.npmjs.com/package/vuetify">
|
||||
<img src="https://img.shields.io/npm/v/vuetify.svg" alt="Version">
|
||||
</a>
|
||||
<a href="https://cdnjs.com/libraries/vuetify">
|
||||
<img src="https://img.shields.io/cdnjs/v/vuetify.svg" alt="CDN">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### 🖥️ Documentation
|
||||
|
||||
To check out the documentation, visit [vuetifyjs.com](https://vuetifyjs.com).
|
||||
|
||||
|
||||
|
||||
### ⚡ Quick Start
|
||||
|
||||
Getting started with Vuetify is easy. To create a new project, choose your package manager and run one of the following commands:
|
||||
|
||||
Using [pnpm](https://pnpm.io/)
|
||||
|
||||
```bash
|
||||
pnpm create vuetify
|
||||
```
|
||||
|
||||
Using [yarn](https://yarnpkg.com/)
|
||||
|
||||
```bash
|
||||
yarn create vuetify
|
||||
```
|
||||
|
||||
Using [npm](https://npmjs.com/)
|
||||
|
||||
```bash
|
||||
npm create vuetify@latest
|
||||
```
|
||||
|
||||
Using [bun](https://bun.sh/)
|
||||
|
||||
```bash
|
||||
bun create vuetify
|
||||
```
|
||||
|
||||
For more information on how to get started, such as using Nuxt or Laravel, check out the official [Installation guide](https://vuetifyjs.com/getting-started/installation/).
|
||||
|
||||
### 💖 Supporting Vuetify
|
||||
|
||||
Vuetify is a [MIT licensed](https://opensource.org/licenses/MIT) project that is developed and maintained by the [Core Team](https://vuetifyjs.com/about/meet-the-team/). Sponsor Vuetify and receive some **awesome perks** and support Open Source Software at the same time! 🎉
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/users/johnleider/sponsorship">Become a backer or sponsor on GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://opencollective.com/vuetify">Become a backer or sponsor on Open Collective</a>
|
||||
<strong><small>(supports the Core team)</small></strong>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://tidelift.com/subscription/request-a-demo?utm_source=npm-vuetify&utm_medium=referral&utm_campaign=enterprise">Become a subscriber on Tidelift</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://paypal.me/vuetify">Make a one-time payment with Paypal</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### What's the difference between GitHub Sponsors and OpenCollective?
|
||||
|
||||
Funds donated through GitHub Sponsors directly support [John Leider](https://github.com/sponsors/johnleider) and the ongoing development and maintenance of Vuetify. Funds donated via Open Collective are managed with transparent expenses and will be used for compensating work and expenses for Core team members. Your name/logo will receive proper recognition and exposure by donating on either platform.
|
||||
|
||||
<h3><b>Special Sponsor</b></h3>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://www.deepcloud.swiss/" target="_blank">
|
||||
<img height="65px" src="https://cdn.cosmicjs.com/20504e40-6cbc-11ef-b5ae-a594bb4a8e67-deepcloud-light.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3><b>Diamond Sponsors</b></h3>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://www.abacus.ch/">
|
||||
<img height="40px" src="https://cdn.cosmicjs.com/0b978be0-6cbb-11ef-b5ae-a594bb4a8e67-abacus-light.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://www.hoop.swiss/">
|
||||
<img height="40px" src="https://cdn.cosmicjs.com/94012850-6cbc-11ef-b5ae-a594bb4a8e67-hoop-light.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3><b>Platinum Sponsors</b></h3>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="text-align: center;">
|
||||
<a href="https://www.muenchen.de/">
|
||||
<img height="30px" src="https://imgix.cosmicjs.com/af2ce530-eaa2-11ed-ba82-019c4666da06-itm-logo.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
---
|
||||
|
||||
### 🚀 Introduction
|
||||
|
||||
Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components. No design skills required — everything you need to create amazing applications is at your fingertips. Vuetify has a massive API that supports any use-case. Some highlights include:
|
||||
|
||||
- **Customizable:** Extensive customization options with [SASS/SCSS](https://vuetifyjs.com/features/sass-variables/) and [Default configuration](https://vuetifyjs.com/features/presets/) and [Blueprints](https://vuetifyjs.com/features/blueprints/)
|
||||
- **Responsive Layout:** The default configuration of Vuetify components is responsive, allowing your application to adapt to different screen sizes.
|
||||
- **Theme System:** A powerful color system that makes it easy to style your application with a consistent color palette.
|
||||
- **Vite Support:** _Smaller_ bundle sizes with **automatic** tree-shaking
|
||||
- **6 months** Long-term support for [Major releases](https://vuetifyjs.com/introduction/long-term-support/)
|
||||
- **Internationalization:** 42+ supported languages
|
||||
|
||||
#### Browser Support
|
||||
|
||||
Vuetify supports all **modern browsers**, including Safari 13+ (using [polyfills](https://vuetifyjs.com/getting-started/browser-support)). Components are designed for a minimum width of _320px_.
|
||||
|
||||
### 🌎 Vuetify Ecosystem
|
||||
|
||||
#### Resources
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/vuetifyjs/awesome/">
|
||||
🕶️ Vuetify Awesome
|
||||
</a>
|
||||
</td>
|
||||
<td>Awesome stuff built with Vuetify.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://bin.vuetifyjs.com/">
|
||||
🗑️ Vuetify Bin
|
||||
</a>
|
||||
</td>
|
||||
<td>A pastebin for saving code snippets.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/vuetifyjs/create/">
|
||||
🫧 Vuetify Create
|
||||
</a>
|
||||
</td>
|
||||
<td>Scaffolding tools for creating new Vuetify projects.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://community.vuetifyjs.com/">
|
||||
💭 Vuetify Discord
|
||||
</a>
|
||||
</td>
|
||||
<td>Our massive and inclusive Discord server where you can ask questions, share feedback, and connect with other Vuetify developers.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/vuetifyjs/eslint-config-vuetify">
|
||||
🧹 Vuetify ESLint
|
||||
</a>
|
||||
</td>
|
||||
<td>An opinionated [ESLint config](https://github.com/vuetifyjs/eslint-config-vuetify) for styling and an [ESLint plugin](https://github.com/vuetifyjs/eslint-plugin-vuetify) for upgrading Vuetify version.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://issues.vuetifyjs.com/">
|
||||
🐛 Vuetify Issues
|
||||
</a>
|
||||
</td>
|
||||
<td>A web application for reporting bugs and issues with Vuetify, Documentation, or one of our other packages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/vuetifyjs/vuetify-loader">
|
||||
📦 Vuetify Loader
|
||||
</a>
|
||||
</td>
|
||||
<td>A monorepo of compiler plugins for autoloading Vuetify components and configuring styles.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/vuetifyjs/mcp/">
|
||||
🧠 Vuetify MCP
|
||||
</a>
|
||||
</td>
|
||||
<td>A Model Context Protocol server for developing with Vuetify and Agents.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://play.vuetifyjs.com/">
|
||||
🎮 Vuetify Playground
|
||||
</a>
|
||||
</td>
|
||||
<td>A Vuetify 3 playground built using <a href="https://github.com/vuejs/repl">vuejs/repl</a> where you can play with our components.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://snips.vuetifyjs.com">
|
||||
✂️ Vuetify Snips
|
||||
</a>
|
||||
</td>
|
||||
<td>Pre-built code snippets for Vuetify components that you can use in your projects</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://store.vuetifyjs.com/">
|
||||
🛒 Vuetify Store
|
||||
</a>
|
||||
</td>
|
||||
<td>The official Vuetify Store where you can download free digital products, purchase pre-made themes, and more.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### 🙋♂️ Questions
|
||||
|
||||
For help and support questions, please use our [Discord community](https://community.vuetifyjs.com). This issue list of this repo is **exclusively** for bug reports and feature requests.
|
||||
|
||||
### 🐛 Issues
|
||||
|
||||
Use our [Issue generator](https://issues.vuetifyjs.com) to report bugs and request new features.
|
||||
|
||||
Please make sure to read the [Important Information](https://github.com/vuetifyjs/vuetify/blob/master/.github/CONTRIBUTING.md#important-information) before opening an issue. Issues not confirming to the guidelines may be closed immediately.
|
||||
|
||||
2️⃣ Vuetify 2 Support
|
||||
Vuetify 2 is now End Of Life (EOL) and is no longer supported, even for security issues. Commercial support for this version is available from our partner, [HeroDevs](https://www.herodevs.com/support/vuetify-nes?utm_source=partnership&utm_medium=partnership&utm_campaign=partnership&utm_id=vuetify2).
|
||||
|
||||
### 📝 Changelog
|
||||
|
||||
Detailed changes for each release are documented in the [release notes](https://vuetifyjs.com/getting-started/release-notes/).
|
||||
|
||||
### 💁♂️ Contributing
|
||||
|
||||
Developers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contribution Guide](https://vuetifyjs.com/getting-started/contributing/).
|
||||
|
||||
> Please do **not** ask general questions in an issue. Issues are only to report bugs, suggest
|
||||
enhancements, or request new features. For general questions and discussions, ask in the [community chat](https://community.vuetifyjs.com/).
|
||||
|
||||
To help you get you familiar with our contribution process, we have a list of [good first issues](https://github.com/vuetifyjs/vuetify/labels/good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started. If you have any questions, please join us on the [community chat](https://community.vuetifyjs.com).
|
||||
|
||||
We also have a list of [help wanted](https://github.com/vuetifyjs/vuetify/labels/help%20wanted) issues that you might want to check.
|
||||
|
||||
### 📑 License
|
||||
|
||||
Vuetify is available under the [MIT](https://opensource.org/licenses/MIT) software license.
|
||||
|
||||
Copyright (c) 2016-present Vuetify, LLC
|
||||
|
||||
---
|
||||
|
||||
This project exists thanks to all the people who contribute 😍!
|
||||
|
||||
<a href="https://github.com/vuetifyjs/vuetify/graphs/contributors"><img src="https://opencollective.com/vuetify/contributors.svg?width=890&button=false" /></a>
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
@forward './lib/styles/settings';
|
||||
@forward './dist/component-variables';
|
||||
@forward './dist/component-variables-labs';
|
||||
+1
@@ -0,0 +1 @@
|
||||
@forward './lib/styles/main';
|
||||
+1
@@ -0,0 +1 @@
|
||||
@forward './lib/styles/tools';
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
@forward '../lib/labs/VAvatarGroup/_variables.scss'
|
||||
@forward '../lib/labs/VColorInput/_variables.scss'
|
||||
@forward '../lib/labs/VCommandPalette/_variables.scss'
|
||||
@forward '../lib/labs/VFileUpload/_variables.scss'
|
||||
@forward '../lib/labs/VIconBtn/_variables.scss'
|
||||
@forward '../lib/labs/VPicker/_variables.scss'
|
||||
@forward '../lib/labs/VPie/_variables.scss'
|
||||
@forward '../lib/labs/VStepperVertical/_variables.scss'
|
||||
@forward '../lib/labs/VVideo/_variables.scss'
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
@forward '../lib/components/VAlert/_variables.scss'
|
||||
@forward '../lib/components/VApp/_variables.scss'
|
||||
@forward '../lib/components/VAppBar/_variables.scss'
|
||||
@forward '../lib/components/VAutocomplete/_variables.scss'
|
||||
@forward '../lib/components/VAvatar/_variables.scss'
|
||||
@forward '../lib/components/VBadge/_variables.scss'
|
||||
@forward '../lib/components/VBanner/_variables.scss'
|
||||
@forward '../lib/components/VBottomNavigation/_variables.scss'
|
||||
@forward '../lib/components/VBottomSheet/_variables.scss'
|
||||
@forward '../lib/components/VBreadcrumbs/_variables.scss'
|
||||
@forward '../lib/components/VBtn/_variables.scss'
|
||||
@forward '../lib/components/VBtnGroup/_variables.scss'
|
||||
@forward '../lib/components/VBtnToggle/_variables.scss'
|
||||
@forward '../lib/components/VCalendar/_variables.scss'
|
||||
@forward '../lib/components/VCard/_variables.scss'
|
||||
@forward '../lib/components/VCarousel/_variables.scss'
|
||||
@forward '../lib/components/VCheckbox/_variables.scss'
|
||||
@forward '../lib/components/VChip/_variables.scss'
|
||||
@forward '../lib/components/VChipGroup/_variables.scss'
|
||||
@forward '../lib/components/VCode/_variables.scss'
|
||||
@forward '../lib/components/VColorPicker/_variables.scss'
|
||||
@forward '../lib/components/VCombobox/_variables.scss'
|
||||
@forward '../lib/components/VCounter/_variables.scss'
|
||||
@forward '../lib/components/VDataTable/_variables.scss'
|
||||
@forward '../lib/components/VDatePicker/_variables.scss'
|
||||
@forward '../lib/components/VDialog/_variables.scss'
|
||||
@forward '../lib/components/VDivider/_variables.scss'
|
||||
@forward '../lib/components/VEmptyState/_variables.scss'
|
||||
@forward '../lib/components/VExpansionPanel/_variables.scss'
|
||||
@forward '../lib/components/VFab/_variables.scss'
|
||||
@forward '../lib/components/VField/_variables.scss'
|
||||
@forward '../lib/components/VFileInput/_variables.scss'
|
||||
@forward '../lib/components/VFooter/_variables.scss'
|
||||
@forward '../lib/components/VHotkey/_variables.scss'
|
||||
@forward '../lib/components/VIcon/_variables.scss'
|
||||
@forward '../lib/components/VImg/_variables.scss'
|
||||
@forward '../lib/components/VInfiniteScroll/_variables.scss'
|
||||
@forward '../lib/components/VInput/_variables.scss'
|
||||
@forward '../lib/components/VItemGroup/_variables.scss'
|
||||
@forward '../lib/components/VKbd/_variables.scss'
|
||||
@forward '../lib/components/VLabel/_variables.scss'
|
||||
@forward '../lib/components/VList/_variables.scss'
|
||||
@forward '../lib/components/VMain/_variables.scss'
|
||||
@forward '../lib/components/VMenu/_variables.scss'
|
||||
@forward '../lib/components/VMessages/_variables.scss'
|
||||
@forward '../lib/components/VNavigationDrawer/_variables.scss'
|
||||
@forward '../lib/components/VNumberInput/_variables.scss'
|
||||
@forward '../lib/components/VOtpInput/_variables.scss'
|
||||
@forward '../lib/components/VOverlay/_variables.scss'
|
||||
@forward '../lib/components/VPagination/_variables.scss'
|
||||
@forward '../lib/components/VProgressCircular/_variables.scss'
|
||||
@forward '../lib/components/VProgressLinear/_variables.scss'
|
||||
@forward '../lib/components/VRadioGroup/_variables.scss'
|
||||
@forward '../lib/components/VRating/_variables.scss'
|
||||
@forward '../lib/components/VSelect/_variables.scss'
|
||||
@forward '../lib/components/VSelectionControl/_variables.scss'
|
||||
@forward '../lib/components/VSelectionControlGroup/_variables.scss'
|
||||
@forward '../lib/components/VSheet/_variables.scss'
|
||||
@forward '../lib/components/VSkeletonLoader/_variables.scss'
|
||||
@forward '../lib/components/VSlideGroup/_variables.scss'
|
||||
@forward '../lib/components/VSlider/_variables.scss'
|
||||
@forward '../lib/components/VSnackbar/_variables.scss'
|
||||
@forward '../lib/components/VStepper/_variables.scss'
|
||||
@forward '../lib/components/VSwitch/_variables.scss'
|
||||
@forward '../lib/components/VSystemBar/_variables.scss'
|
||||
@forward '../lib/components/VTable/_variables.scss'
|
||||
@forward '../lib/components/VTabs/_variables.scss'
|
||||
@forward '../lib/components/VTextField/_variables.scss'
|
||||
@forward '../lib/components/VTextarea/_variables.scss'
|
||||
@forward '../lib/components/VTimePicker/_variables.scss'
|
||||
@forward '../lib/components/VTimeline/_variables.scss'
|
||||
@forward '../lib/components/VToolbar/_variables.scss'
|
||||
@forward '../lib/components/VTooltip/_variables.scss'
|
||||
@forward '../lib/components/VTreeview/_variables.scss'
|
||||
@forward '../lib/components/VWindow/_variables.scss'
|
||||
@forward '../lib/directives/ripple/_variables.scss'
|
||||
+16654
File diff suppressed because one or more lines are too long
+100
@@ -0,0 +1,100 @@
|
||||
{
|
||||
"components": {
|
||||
"VAvatarGroup": {
|
||||
"from": "labs/VAvatarGroup",
|
||||
"styles": []
|
||||
},
|
||||
"VColorInput": {
|
||||
"from": "labs/VColorInput",
|
||||
"styles": []
|
||||
},
|
||||
"VCommandPalette": {
|
||||
"from": "labs/VCommandPalette",
|
||||
"styles": []
|
||||
},
|
||||
"VCommandPaletteItem": {
|
||||
"from": "labs/VCommandPalette",
|
||||
"styles": []
|
||||
},
|
||||
"VPie": {
|
||||
"from": "labs/VPie",
|
||||
"styles": []
|
||||
},
|
||||
"VPieSegment": {
|
||||
"from": "labs/VPie",
|
||||
"styles": []
|
||||
},
|
||||
"VPieTooltip": {
|
||||
"from": "labs/VPie",
|
||||
"styles": []
|
||||
},
|
||||
"VFileUpload": {
|
||||
"from": "labs/VFileUpload",
|
||||
"styles": []
|
||||
},
|
||||
"VFileUploadDropzone": {
|
||||
"from": "labs/VFileUpload",
|
||||
"styles": []
|
||||
},
|
||||
"VFileUploadItem": {
|
||||
"from": "labs/VFileUpload",
|
||||
"styles": []
|
||||
},
|
||||
"VFileUploadList": {
|
||||
"from": "labs/VFileUpload",
|
||||
"styles": []
|
||||
},
|
||||
"VStepperVertical": {
|
||||
"from": "labs/VStepperVertical",
|
||||
"styles": []
|
||||
},
|
||||
"VStepperVerticalItem": {
|
||||
"from": "labs/VStepperVertical",
|
||||
"styles": []
|
||||
},
|
||||
"VStepperVerticalActions": {
|
||||
"from": "labs/VStepperVertical",
|
||||
"styles": []
|
||||
},
|
||||
"VPicker": {
|
||||
"from": "labs/VPicker",
|
||||
"styles": []
|
||||
},
|
||||
"VPickerTitle": {
|
||||
"from": "labs/VPicker",
|
||||
"styles": []
|
||||
},
|
||||
"VVideo": {
|
||||
"from": "labs/VVideo",
|
||||
"styles": []
|
||||
},
|
||||
"VVideoControls": {
|
||||
"from": "labs/VVideo",
|
||||
"styles": []
|
||||
},
|
||||
"VVideoVolume": {
|
||||
"from": "labs/VVideo",
|
||||
"styles": []
|
||||
},
|
||||
"VIconBtn": {
|
||||
"from": "labs/VIconBtn",
|
||||
"styles": []
|
||||
},
|
||||
"VDateInput": {
|
||||
"from": "labs/VDateInput",
|
||||
"styles": []
|
||||
},
|
||||
"VMaskInput": {
|
||||
"from": "labs/VMaskInput",
|
||||
"styles": []
|
||||
},
|
||||
"VProgress": {
|
||||
"from": "labs/VProgress",
|
||||
"styles": []
|
||||
},
|
||||
"VPullToRefresh": {
|
||||
"from": "labs/VPullToRefresh",
|
||||
"styles": []
|
||||
}
|
||||
}
|
||||
}
|
||||
+714
@@ -0,0 +1,714 @@
|
||||
{
|
||||
"components": {
|
||||
"VAlert": {
|
||||
"from": "components/VAlert",
|
||||
"styles": []
|
||||
},
|
||||
"VAlertTitle": {
|
||||
"from": "components/VAlert",
|
||||
"styles": []
|
||||
},
|
||||
"VAvatar": {
|
||||
"from": "components/VAvatar",
|
||||
"styles": []
|
||||
},
|
||||
"VAppBar": {
|
||||
"from": "components/VAppBar",
|
||||
"styles": []
|
||||
},
|
||||
"VAppBarNavIcon": {
|
||||
"from": "components/VAppBar",
|
||||
"styles": []
|
||||
},
|
||||
"VAppBarTitle": {
|
||||
"from": "components/VAppBar",
|
||||
"styles": []
|
||||
},
|
||||
"VBottomSheet": {
|
||||
"from": "components/VBottomSheet",
|
||||
"styles": []
|
||||
},
|
||||
"VBanner": {
|
||||
"from": "components/VBanner",
|
||||
"styles": []
|
||||
},
|
||||
"VBannerActions": {
|
||||
"from": "components/VBanner",
|
||||
"styles": []
|
||||
},
|
||||
"VBannerText": {
|
||||
"from": "components/VBanner",
|
||||
"styles": []
|
||||
},
|
||||
"VAutocomplete": {
|
||||
"from": "components/VAutocomplete",
|
||||
"styles": []
|
||||
},
|
||||
"VBadge": {
|
||||
"from": "components/VBadge",
|
||||
"styles": []
|
||||
},
|
||||
"VApp": {
|
||||
"from": "components/VApp",
|
||||
"styles": []
|
||||
},
|
||||
"VBtn": {
|
||||
"from": "components/VBtn",
|
||||
"styles": []
|
||||
},
|
||||
"VBottomNavigation": {
|
||||
"from": "components/VBottomNavigation",
|
||||
"styles": []
|
||||
},
|
||||
"VBtnToggle": {
|
||||
"from": "components/VBtnToggle",
|
||||
"styles": []
|
||||
},
|
||||
"VCalendar": {
|
||||
"from": "components/VCalendar",
|
||||
"styles": []
|
||||
},
|
||||
"VCheckbox": {
|
||||
"from": "components/VCheckbox",
|
||||
"styles": []
|
||||
},
|
||||
"VCheckboxBtn": {
|
||||
"from": "components/VCheckbox",
|
||||
"styles": []
|
||||
},
|
||||
"VCarousel": {
|
||||
"from": "components/VCarousel",
|
||||
"styles": []
|
||||
},
|
||||
"VCarouselItem": {
|
||||
"from": "components/VCarousel",
|
||||
"styles": []
|
||||
},
|
||||
"VCard": {
|
||||
"from": "components/VCard",
|
||||
"styles": []
|
||||
},
|
||||
"VCardActions": {
|
||||
"from": "components/VCard",
|
||||
"styles": []
|
||||
},
|
||||
"VCardItem": {
|
||||
"from": "components/VCard",
|
||||
"styles": []
|
||||
},
|
||||
"VCardSubtitle": {
|
||||
"from": "components/VCard",
|
||||
"styles": []
|
||||
},
|
||||
"VCardText": {
|
||||
"from": "components/VCard",
|
||||
"styles": []
|
||||
},
|
||||
"VCardTitle": {
|
||||
"from": "components/VCard",
|
||||
"styles": []
|
||||
},
|
||||
"VBreadcrumbs": {
|
||||
"from": "components/VBreadcrumbs",
|
||||
"styles": []
|
||||
},
|
||||
"VBreadcrumbsItem": {
|
||||
"from": "components/VBreadcrumbs",
|
||||
"styles": []
|
||||
},
|
||||
"VBreadcrumbsDivider": {
|
||||
"from": "components/VBreadcrumbs",
|
||||
"styles": []
|
||||
},
|
||||
"VCode": {
|
||||
"from": "components/VCode",
|
||||
"styles": []
|
||||
},
|
||||
"VChipGroup": {
|
||||
"from": "components/VChipGroup",
|
||||
"styles": []
|
||||
},
|
||||
"VBtnGroup": {
|
||||
"from": "components/VBtnGroup",
|
||||
"styles": []
|
||||
},
|
||||
"VCombobox": {
|
||||
"from": "components/VCombobox",
|
||||
"styles": []
|
||||
},
|
||||
"VCounter": {
|
||||
"from": "components/VCounter",
|
||||
"styles": []
|
||||
},
|
||||
"VChip": {
|
||||
"from": "components/VChip",
|
||||
"styles": []
|
||||
},
|
||||
"VDatePicker": {
|
||||
"from": "components/VDatePicker",
|
||||
"styles": []
|
||||
},
|
||||
"VDatePickerControls": {
|
||||
"from": "components/VDatePicker",
|
||||
"styles": []
|
||||
},
|
||||
"VDatePickerHeader": {
|
||||
"from": "components/VDatePicker",
|
||||
"styles": []
|
||||
},
|
||||
"VDatePickerMonth": {
|
||||
"from": "components/VDatePicker",
|
||||
"styles": []
|
||||
},
|
||||
"VDatePickerMonths": {
|
||||
"from": "components/VDatePicker",
|
||||
"styles": []
|
||||
},
|
||||
"VDatePickerYears": {
|
||||
"from": "components/VDatePicker",
|
||||
"styles": []
|
||||
},
|
||||
"VDataTable": {
|
||||
"from": "components/VDataTable",
|
||||
"styles": []
|
||||
},
|
||||
"VDataTableHeaders": {
|
||||
"from": "components/VDataTable",
|
||||
"styles": []
|
||||
},
|
||||
"VDataTableFooter": {
|
||||
"from": "components/VDataTable",
|
||||
"styles": []
|
||||
},
|
||||
"VDataTableRows": {
|
||||
"from": "components/VDataTable",
|
||||
"styles": []
|
||||
},
|
||||
"VDataTableRow": {
|
||||
"from": "components/VDataTable",
|
||||
"styles": []
|
||||
},
|
||||
"VDataTableVirtual": {
|
||||
"from": "components/VDataTable",
|
||||
"styles": []
|
||||
},
|
||||
"VDataTableServer": {
|
||||
"from": "components/VDataTable",
|
||||
"styles": []
|
||||
},
|
||||
"VDialog": {
|
||||
"from": "components/VDialog",
|
||||
"styles": []
|
||||
},
|
||||
"VDivider": {
|
||||
"from": "components/VDivider",
|
||||
"styles": []
|
||||
},
|
||||
"VFab": {
|
||||
"from": "components/VFab",
|
||||
"styles": []
|
||||
},
|
||||
"VColorPicker": {
|
||||
"from": "components/VColorPicker",
|
||||
"styles": []
|
||||
},
|
||||
"VEmptyState": {
|
||||
"from": "components/VEmptyState",
|
||||
"styles": []
|
||||
},
|
||||
"VField": {
|
||||
"from": "components/VField",
|
||||
"styles": []
|
||||
},
|
||||
"VFieldLabel": {
|
||||
"from": "components/VField",
|
||||
"styles": []
|
||||
},
|
||||
"VFooter": {
|
||||
"from": "components/VFooter",
|
||||
"styles": []
|
||||
},
|
||||
"VExpansionPanels": {
|
||||
"from": "components/VExpansionPanel",
|
||||
"styles": []
|
||||
},
|
||||
"VExpansionPanel": {
|
||||
"from": "components/VExpansionPanel",
|
||||
"styles": []
|
||||
},
|
||||
"VExpansionPanelText": {
|
||||
"from": "components/VExpansionPanel",
|
||||
"styles": []
|
||||
},
|
||||
"VExpansionPanelTitle": {
|
||||
"from": "components/VExpansionPanel",
|
||||
"styles": []
|
||||
},
|
||||
"VFileInput": {
|
||||
"from": "components/VFileInput",
|
||||
"styles": []
|
||||
},
|
||||
"VHotkey": {
|
||||
"from": "components/VHotkey",
|
||||
"styles": []
|
||||
},
|
||||
"VInfiniteScroll": {
|
||||
"from": "components/VInfiniteScroll",
|
||||
"styles": []
|
||||
},
|
||||
"VInput": {
|
||||
"from": "components/VInput",
|
||||
"styles": []
|
||||
},
|
||||
"VIcon": {
|
||||
"from": "components/VIcon",
|
||||
"styles": []
|
||||
},
|
||||
"VComponentIcon": {
|
||||
"from": "components/VIcon",
|
||||
"styles": []
|
||||
},
|
||||
"VSvgIcon": {
|
||||
"from": "components/VIcon",
|
||||
"styles": []
|
||||
},
|
||||
"VLigatureIcon": {
|
||||
"from": "components/VIcon",
|
||||
"styles": []
|
||||
},
|
||||
"VClassIcon": {
|
||||
"from": "components/VIcon",
|
||||
"styles": []
|
||||
},
|
||||
"VKbd": {
|
||||
"from": "components/VKbd",
|
||||
"styles": []
|
||||
},
|
||||
"VImg": {
|
||||
"from": "components/VImg",
|
||||
"styles": []
|
||||
},
|
||||
"VLabel": {
|
||||
"from": "components/VLabel",
|
||||
"styles": []
|
||||
},
|
||||
"VMain": {
|
||||
"from": "components/VMain",
|
||||
"styles": []
|
||||
},
|
||||
"VItemGroup": {
|
||||
"from": "components/VItemGroup",
|
||||
"styles": []
|
||||
},
|
||||
"VItem": {
|
||||
"from": "components/VItemGroup",
|
||||
"styles": []
|
||||
},
|
||||
"VMenu": {
|
||||
"from": "components/VMenu",
|
||||
"styles": []
|
||||
},
|
||||
"VNavigationDrawer": {
|
||||
"from": "components/VNavigationDrawer",
|
||||
"styles": []
|
||||
},
|
||||
"VList": {
|
||||
"from": "components/VList",
|
||||
"styles": []
|
||||
},
|
||||
"VListGroup": {
|
||||
"from": "components/VList",
|
||||
"styles": []
|
||||
},
|
||||
"VListImg": {
|
||||
"from": "components/VList",
|
||||
"styles": []
|
||||
},
|
||||
"VListItem": {
|
||||
"from": "components/VList",
|
||||
"styles": []
|
||||
},
|
||||
"VListItemAction": {
|
||||
"from": "components/VList",
|
||||
"styles": []
|
||||
},
|
||||
"VListItemMedia": {
|
||||
"from": "components/VList",
|
||||
"styles": []
|
||||
},
|
||||
"VListItemSubtitle": {
|
||||
"from": "components/VList",
|
||||
"styles": []
|
||||
},
|
||||
"VListItemTitle": {
|
||||
"from": "components/VList",
|
||||
"styles": []
|
||||
},
|
||||
"VListSubheader": {
|
||||
"from": "components/VList",
|
||||
"styles": []
|
||||
},
|
||||
"VMessages": {
|
||||
"from": "components/VMessages",
|
||||
"styles": []
|
||||
},
|
||||
"VOtpInput": {
|
||||
"from": "components/VOtpInput",
|
||||
"styles": []
|
||||
},
|
||||
"VNumberInput": {
|
||||
"from": "components/VNumberInput",
|
||||
"styles": []
|
||||
},
|
||||
"VOverlay": {
|
||||
"from": "components/VOverlay",
|
||||
"styles": []
|
||||
},
|
||||
"VPagination": {
|
||||
"from": "components/VPagination",
|
||||
"styles": []
|
||||
},
|
||||
"VProgressLinear": {
|
||||
"from": "components/VProgressLinear",
|
||||
"styles": []
|
||||
},
|
||||
"VProgressCircular": {
|
||||
"from": "components/VProgressCircular",
|
||||
"styles": []
|
||||
},
|
||||
"VRadioGroup": {
|
||||
"from": "components/VRadioGroup",
|
||||
"styles": []
|
||||
},
|
||||
"VRating": {
|
||||
"from": "components/VRating",
|
||||
"styles": []
|
||||
},
|
||||
"VSheet": {
|
||||
"from": "components/VSheet",
|
||||
"styles": []
|
||||
},
|
||||
"VSelect": {
|
||||
"from": "components/VSelect",
|
||||
"styles": []
|
||||
},
|
||||
"VSelectionControl": {
|
||||
"from": "components/VSelectionControl",
|
||||
"styles": []
|
||||
},
|
||||
"VSnackbar": {
|
||||
"from": "components/VSnackbar",
|
||||
"styles": []
|
||||
},
|
||||
"VSkeletonLoader": {
|
||||
"from": "components/VSkeletonLoader",
|
||||
"styles": []
|
||||
},
|
||||
"VSlideGroup": {
|
||||
"from": "components/VSlideGroup",
|
||||
"styles": []
|
||||
},
|
||||
"VSlideGroupItem": {
|
||||
"from": "components/VSlideGroup",
|
||||
"styles": []
|
||||
},
|
||||
"VSelectionControlGroup": {
|
||||
"from": "components/VSelectionControlGroup",
|
||||
"styles": []
|
||||
},
|
||||
"VTab": {
|
||||
"from": "components/VTabs",
|
||||
"styles": []
|
||||
},
|
||||
"VTabs": {
|
||||
"from": "components/VTabs",
|
||||
"styles": []
|
||||
},
|
||||
"VTabsWindow": {
|
||||
"from": "components/VTabs",
|
||||
"styles": []
|
||||
},
|
||||
"VTabsWindowItem": {
|
||||
"from": "components/VTabs",
|
||||
"styles": []
|
||||
},
|
||||
"VStepper": {
|
||||
"from": "components/VStepper",
|
||||
"styles": []
|
||||
},
|
||||
"VStepperActions": {
|
||||
"from": "components/VStepper",
|
||||
"styles": []
|
||||
},
|
||||
"VStepperHeader": {
|
||||
"from": "components/VStepper",
|
||||
"styles": []
|
||||
},
|
||||
"VStepperItem": {
|
||||
"from": "components/VStepper",
|
||||
"styles": []
|
||||
},
|
||||
"VStepperWindow": {
|
||||
"from": "components/VStepper",
|
||||
"styles": []
|
||||
},
|
||||
"VStepperWindowItem": {
|
||||
"from": "components/VStepper",
|
||||
"styles": []
|
||||
},
|
||||
"VSwitch": {
|
||||
"from": "components/VSwitch",
|
||||
"styles": []
|
||||
},
|
||||
"VSlider": {
|
||||
"from": "components/VSlider",
|
||||
"styles": []
|
||||
},
|
||||
"VTable": {
|
||||
"from": "components/VTable",
|
||||
"styles": []
|
||||
},
|
||||
"VSystemBar": {
|
||||
"from": "components/VSystemBar",
|
||||
"styles": []
|
||||
},
|
||||
"VTextField": {
|
||||
"from": "components/VTextField",
|
||||
"styles": []
|
||||
},
|
||||
"VTextarea": {
|
||||
"from": "components/VTextarea",
|
||||
"styles": []
|
||||
},
|
||||
"VToolbar": {
|
||||
"from": "components/VToolbar",
|
||||
"styles": []
|
||||
},
|
||||
"VToolbarTitle": {
|
||||
"from": "components/VToolbar",
|
||||
"styles": []
|
||||
},
|
||||
"VToolbarItems": {
|
||||
"from": "components/VToolbar",
|
||||
"styles": []
|
||||
},
|
||||
"VTreeview": {
|
||||
"from": "components/VTreeview",
|
||||
"styles": []
|
||||
},
|
||||
"VTreeviewItem": {
|
||||
"from": "components/VTreeview",
|
||||
"styles": []
|
||||
},
|
||||
"VTreeviewGroup": {
|
||||
"from": "components/VTreeview",
|
||||
"styles": []
|
||||
},
|
||||
"VTimeline": {
|
||||
"from": "components/VTimeline",
|
||||
"styles": []
|
||||
},
|
||||
"VTimelineItem": {
|
||||
"from": "components/VTimeline",
|
||||
"styles": []
|
||||
},
|
||||
"VTimePicker": {
|
||||
"from": "components/VTimePicker",
|
||||
"styles": []
|
||||
},
|
||||
"VTimePickerClock": {
|
||||
"from": "components/VTimePicker",
|
||||
"styles": []
|
||||
},
|
||||
"VTimePickerControls": {
|
||||
"from": "components/VTimePicker",
|
||||
"styles": []
|
||||
},
|
||||
"VTooltip": {
|
||||
"from": "components/VTooltip",
|
||||
"styles": []
|
||||
},
|
||||
"VWindow": {
|
||||
"from": "components/VWindow",
|
||||
"styles": []
|
||||
},
|
||||
"VWindowItem": {
|
||||
"from": "components/VWindow",
|
||||
"styles": []
|
||||
},
|
||||
"VConfirmEdit": {
|
||||
"from": "components/VConfirmEdit",
|
||||
"styles": []
|
||||
},
|
||||
"VDataIterator": {
|
||||
"from": "components/VDataIterator",
|
||||
"styles": []
|
||||
},
|
||||
"VDefaultsProvider": {
|
||||
"from": "components/VDefaultsProvider",
|
||||
"styles": []
|
||||
},
|
||||
"VForm": {
|
||||
"from": "components/VForm",
|
||||
"styles": []
|
||||
},
|
||||
"VContainer": {
|
||||
"from": "components/VGrid",
|
||||
"styles": []
|
||||
},
|
||||
"VCol": {
|
||||
"from": "components/VGrid",
|
||||
"styles": []
|
||||
},
|
||||
"VRow": {
|
||||
"from": "components/VGrid",
|
||||
"styles": []
|
||||
},
|
||||
"VSpacer": {
|
||||
"from": "components/VGrid",
|
||||
"styles": []
|
||||
},
|
||||
"VHover": {
|
||||
"from": "components/VHover",
|
||||
"styles": []
|
||||
},
|
||||
"VLazy": {
|
||||
"from": "components/VLazy",
|
||||
"styles": []
|
||||
},
|
||||
"VLayout": {
|
||||
"from": "components/VLayout",
|
||||
"styles": []
|
||||
},
|
||||
"VLayoutItem": {
|
||||
"from": "components/VLayout",
|
||||
"styles": []
|
||||
},
|
||||
"VNoSsr": {
|
||||
"from": "components/VNoSsr",
|
||||
"styles": []
|
||||
},
|
||||
"VParallax": {
|
||||
"from": "components/VParallax",
|
||||
"styles": []
|
||||
},
|
||||
"VLocaleProvider": {
|
||||
"from": "components/VLocaleProvider",
|
||||
"styles": []
|
||||
},
|
||||
"VRadio": {
|
||||
"from": "components/VRadio",
|
||||
"styles": []
|
||||
},
|
||||
"VRangeSlider": {
|
||||
"from": "components/VRangeSlider",
|
||||
"styles": []
|
||||
},
|
||||
"VResponsive": {
|
||||
"from": "components/VResponsive",
|
||||
"styles": []
|
||||
},
|
||||
"VSpeedDial": {
|
||||
"from": "components/VSpeedDial",
|
||||
"styles": []
|
||||
},
|
||||
"VSparkline": {
|
||||
"from": "components/VSparkline",
|
||||
"styles": []
|
||||
},
|
||||
"VSnackbarQueue": {
|
||||
"from": "components/VSnackbarQueue",
|
||||
"styles": []
|
||||
},
|
||||
"VThemeProvider": {
|
||||
"from": "components/VThemeProvider",
|
||||
"styles": []
|
||||
},
|
||||
"VFabTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VDialogBottomTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VDialogTopTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VFadeTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VScaleTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VScrollXTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VScrollXReverseTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VScrollYTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VScrollYReverseTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VSlideXTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VSlideXReverseTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VSlideYTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VSlideYReverseTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VExpandTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VExpandXTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VExpandBothTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VDialogTransition": {
|
||||
"from": "components/transitions",
|
||||
"styles": []
|
||||
},
|
||||
"VVirtualScroll": {
|
||||
"from": "components/VVirtualScroll",
|
||||
"styles": []
|
||||
},
|
||||
"VValidation": {
|
||||
"from": "components/VValidation",
|
||||
"styles": []
|
||||
}
|
||||
},
|
||||
"directives": [
|
||||
"ClickOutside",
|
||||
"Intersect",
|
||||
"Mutate",
|
||||
"Resize",
|
||||
"Ripple",
|
||||
"Scroll",
|
||||
"Touch",
|
||||
"Tooltip"
|
||||
]
|
||||
}
|
||||
+5158
File diff suppressed because it is too large
Load Diff
+62483
File diff suppressed because one or more lines are too long
+41341
File diff suppressed because it is too large
Load Diff
+28491
File diff suppressed because it is too large
Load Diff
+153440
File diff suppressed because one or more lines are too long
+41322
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+41341
File diff suppressed because it is too large
Load Diff
+6
File diff suppressed because one or more lines are too long
+37584
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+27704
File diff suppressed because it is too large
Load Diff
+114132
File diff suppressed because one or more lines are too long
+37564
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+37584
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
+2629
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+3
@@ -0,0 +1,3 @@
|
||||
export { md1 } from './md1.js';
|
||||
export { md2 } from './md2.js';
|
||||
export { md3 } from './md3.js';
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export { md1 } from "./md1.js";
|
||||
export { md2 } from "./md2.js";
|
||||
export { md3 } from "./md3.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["md1","md2","md3"],"sources":["../../src/blueprints/index.ts"],"sourcesContent":["export { md1 } from './md1'\nexport { md2 } from './md2'\nexport { md3 } from './md3'\n"],"mappings":"SAASA,GAAG;AAAA,SACHC,GAAG;AAAA,SACHC,GAAG","ignoreList":[]}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import type { Blueprint } from '../framework.js';
|
||||
export declare const md1: Blueprint;
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
// Icons
|
||||
import { mdi } from "../iconsets/mdi.js"; // Types
|
||||
export const md1 = {
|
||||
defaults: {
|
||||
global: {
|
||||
rounded: 'sm'
|
||||
},
|
||||
VAvatar: {
|
||||
rounded: 'circle'
|
||||
},
|
||||
VAutocomplete: {
|
||||
variant: 'underlined'
|
||||
},
|
||||
VBanner: {
|
||||
color: 'primary'
|
||||
},
|
||||
VBtn: {
|
||||
class: 'text-uppercase',
|
||||
color: 'primary',
|
||||
rounded: 0
|
||||
},
|
||||
VCheckbox: {
|
||||
color: 'secondary',
|
||||
indentDetails: false
|
||||
},
|
||||
VCombobox: {
|
||||
variant: 'underlined'
|
||||
},
|
||||
VDatePicker: {
|
||||
color: 'primary',
|
||||
controlHeight: 44,
|
||||
elevation: 1,
|
||||
rounded: 0,
|
||||
controlVariant: 'modal',
|
||||
VBtn: {
|
||||
color: 'high-emphasis',
|
||||
rounded: 'circle'
|
||||
}
|
||||
},
|
||||
VSelect: {
|
||||
variant: 'underlined'
|
||||
},
|
||||
VSlider: {
|
||||
color: 'primary',
|
||||
indentDetails: false
|
||||
},
|
||||
VSwitch: {
|
||||
indentDetails: false
|
||||
},
|
||||
VRadioGroup: {
|
||||
indentDetails: false
|
||||
},
|
||||
VRangeSlider: {
|
||||
indentDetails: false
|
||||
},
|
||||
VTabs: {
|
||||
color: 'primary'
|
||||
},
|
||||
VTextarea: {
|
||||
variant: 'underlined'
|
||||
},
|
||||
VTextField: {
|
||||
variant: 'underlined'
|
||||
},
|
||||
VToolbar: {
|
||||
VBtn: {
|
||||
color: null
|
||||
}
|
||||
}
|
||||
},
|
||||
icons: {
|
||||
defaultSet: 'mdi',
|
||||
sets: {
|
||||
mdi
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
colors: {
|
||||
primary: '#3F51B5',
|
||||
'primary-darken-1': '#303F9F',
|
||||
'primary-lighten-1': '#C5CAE9',
|
||||
secondary: '#FF4081',
|
||||
'secondary-darken-1': '#F50057',
|
||||
'secondary-lighten-1': '#FF80AB',
|
||||
accent: '#009688'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=md1.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"md1.js","names":["mdi","md1","defaults","global","rounded","VAvatar","VAutocomplete","variant","VBanner","color","VBtn","class","VCheckbox","indentDetails","VCombobox","VDatePicker","controlHeight","elevation","controlVariant","VSelect","VSlider","VSwitch","VRadioGroup","VRangeSlider","VTabs","VTextarea","VTextField","VToolbar","icons","defaultSet","sets","theme","themes","light","colors","primary","secondary","accent"],"sources":["../../src/blueprints/md1.ts"],"sourcesContent":["// Icons\nimport { mdi } from '@/iconsets/mdi'\n\n// Types\nimport type { Blueprint } from '@/framework'\n\nexport const md1: Blueprint = {\n defaults: {\n global: {\n rounded: 'sm',\n },\n VAvatar: {\n rounded: 'circle',\n },\n VAutocomplete: {\n variant: 'underlined',\n },\n VBanner: {\n color: 'primary',\n },\n VBtn: {\n class: 'text-uppercase',\n color: 'primary',\n rounded: 0,\n },\n VCheckbox: {\n color: 'secondary',\n indentDetails: false,\n },\n VCombobox: {\n variant: 'underlined',\n },\n VDatePicker: {\n color: 'primary',\n controlHeight: 44,\n elevation: 1,\n rounded: 0,\n controlVariant: 'modal',\n\n VBtn: {\n color: 'high-emphasis',\n rounded: 'circle',\n },\n },\n VSelect: {\n variant: 'underlined',\n },\n VSlider: {\n color: 'primary',\n indentDetails: false,\n },\n VSwitch: {\n indentDetails: false,\n },\n VRadioGroup: {\n indentDetails: false,\n },\n VRangeSlider: {\n indentDetails: false,\n },\n VTabs: {\n color: 'primary',\n },\n VTextarea: {\n variant: 'underlined',\n },\n VTextField: {\n variant: 'underlined',\n },\n VToolbar: {\n VBtn: {\n color: null,\n },\n },\n },\n icons: {\n defaultSet: 'mdi',\n sets: {\n mdi,\n },\n },\n theme: {\n themes: {\n light: {\n colors: {\n primary: '#3F51B5',\n 'primary-darken-1': '#303F9F',\n 'primary-lighten-1': '#C5CAE9',\n secondary: '#FF4081',\n 'secondary-darken-1': '#F50057',\n 'secondary-lighten-1': '#FF80AB',\n accent: '#009688',\n },\n },\n },\n },\n}\n"],"mappings":"AAAA;AAAA,SACSA,GAAG,8BAEZ;AAGA,OAAO,MAAMC,GAAc,GAAG;EAC5BC,QAAQ,EAAE;IACRC,MAAM,EAAE;MACNC,OAAO,EAAE;IACX,CAAC;IACDC,OAAO,EAAE;MACPD,OAAO,EAAE;IACX,CAAC;IACDE,aAAa,EAAE;MACbC,OAAO,EAAE;IACX,CAAC;IACDC,OAAO,EAAE;MACPC,KAAK,EAAE;IACT,CAAC;IACDC,IAAI,EAAE;MACJC,KAAK,EAAE,gBAAgB;MACvBF,KAAK,EAAE,SAAS;MAChBL,OAAO,EAAE;IACX,CAAC;IACDQ,SAAS,EAAE;MACTH,KAAK,EAAE,WAAW;MAClBI,aAAa,EAAE;IACjB,CAAC;IACDC,SAAS,EAAE;MACTP,OAAO,EAAE;IACX,CAAC;IACDQ,WAAW,EAAE;MACXN,KAAK,EAAE,SAAS;MAChBO,aAAa,EAAE,EAAE;MACjBC,SAAS,EAAE,CAAC;MACZb,OAAO,EAAE,CAAC;MACVc,cAAc,EAAE,OAAO;MAEvBR,IAAI,EAAE;QACJD,KAAK,EAAE,eAAe;QACtBL,OAAO,EAAE;MACX;IACF,CAAC;IACDe,OAAO,EAAE;MACPZ,OAAO,EAAE;IACX,CAAC;IACDa,OAAO,EAAE;MACPX,KAAK,EAAE,SAAS;MAChBI,aAAa,EAAE;IACjB,CAAC;IACDQ,OAAO,EAAE;MACPR,aAAa,EAAE;IACjB,CAAC;IACDS,WAAW,EAAE;MACXT,aAAa,EAAE;IACjB,CAAC;IACDU,YAAY,EAAE;MACZV,aAAa,EAAE;IACjB,CAAC;IACDW,KAAK,EAAE;MACLf,KAAK,EAAE;IACT,CAAC;IACDgB,SAAS,EAAE;MACTlB,OAAO,EAAE;IACX,CAAC;IACDmB,UAAU,EAAE;MACVnB,OAAO,EAAE;IACX,CAAC;IACDoB,QAAQ,EAAE;MACRjB,IAAI,EAAE;QACJD,KAAK,EAAE;MACT;IACF;EACF,CAAC;EACDmB,KAAK,EAAE;IACLC,UAAU,EAAE,KAAK;IACjBC,IAAI,EAAE;MACJ9B;IACF;EACF,CAAC;EACD+B,KAAK,EAAE;IACLC,MAAM,EAAE;MACNC,KAAK,EAAE;QACLC,MAAM,EAAE;UACNC,OAAO,EAAE,SAAS;UAClB,kBAAkB,EAAE,SAAS;UAC7B,mBAAmB,EAAE,SAAS;UAC9BC,SAAS,EAAE,SAAS;UACpB,oBAAoB,EAAE,SAAS;UAC/B,qBAAqB,EAAE,SAAS;UAChCC,MAAM,EAAE;QACV;MACF;IACF;EACF;AACF,CAAC","ignoreList":[]}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import type { Blueprint } from '../framework.js';
|
||||
export declare const md2: Blueprint;
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
// Icons
|
||||
import { mdi } from "../iconsets/mdi.js"; // Types
|
||||
export const md2 = {
|
||||
defaults: {
|
||||
VAvatar: {
|
||||
rounded: 'circle'
|
||||
},
|
||||
VAutocomplete: {
|
||||
variant: 'filled'
|
||||
},
|
||||
VBanner: {
|
||||
color: 'primary'
|
||||
},
|
||||
VBtn: {
|
||||
class: 'text-uppercase',
|
||||
color: 'primary'
|
||||
},
|
||||
VCheckbox: {
|
||||
color: 'secondary',
|
||||
indentDetails: true
|
||||
},
|
||||
VCombobox: {
|
||||
variant: 'filled'
|
||||
},
|
||||
VDatePicker: {
|
||||
color: 'primary',
|
||||
controlHeight: 56,
|
||||
elevation: 2,
|
||||
rounded: 'md',
|
||||
controlVariant: 'modal',
|
||||
VBtn: {
|
||||
color: 'high-emphasis',
|
||||
rounded: 'circle'
|
||||
}
|
||||
},
|
||||
VRadioGroup: {
|
||||
indentDetails: true
|
||||
},
|
||||
VSelect: {
|
||||
variant: 'filled'
|
||||
},
|
||||
VSlider: {
|
||||
color: 'primary',
|
||||
indentDetails: true
|
||||
},
|
||||
VRangeSlider: {
|
||||
indentDetails: true
|
||||
},
|
||||
VSwitch: {
|
||||
indentDetails: true
|
||||
},
|
||||
VTabs: {
|
||||
color: 'primary'
|
||||
},
|
||||
VTextarea: {
|
||||
variant: 'filled'
|
||||
},
|
||||
VTextField: {
|
||||
variant: 'filled'
|
||||
},
|
||||
VToolbar: {
|
||||
VBtn: {
|
||||
color: null
|
||||
}
|
||||
}
|
||||
},
|
||||
icons: {
|
||||
defaultSet: 'mdi',
|
||||
sets: {
|
||||
mdi
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
colors: {
|
||||
primary: '#6200EE',
|
||||
'primary-darken-1': '#3700B3',
|
||||
secondary: '#03DAC6',
|
||||
'secondary-darken-1': '#018786',
|
||||
error: '#B00020'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=md2.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"md2.js","names":["mdi","md2","defaults","VAvatar","rounded","VAutocomplete","variant","VBanner","color","VBtn","class","VCheckbox","indentDetails","VCombobox","VDatePicker","controlHeight","elevation","controlVariant","VRadioGroup","VSelect","VSlider","VRangeSlider","VSwitch","VTabs","VTextarea","VTextField","VToolbar","icons","defaultSet","sets","theme","themes","light","colors","primary","secondary","error"],"sources":["../../src/blueprints/md2.ts"],"sourcesContent":["// Icons\nimport { mdi } from '@/iconsets/mdi'\n\n// Types\nimport type { Blueprint } from '@/framework'\n\nexport const md2: Blueprint = {\n defaults: {\n VAvatar: {\n rounded: 'circle',\n },\n VAutocomplete: {\n variant: 'filled',\n },\n VBanner: {\n color: 'primary',\n },\n VBtn: {\n class: 'text-uppercase',\n color: 'primary',\n },\n VCheckbox: {\n color: 'secondary',\n indentDetails: true,\n },\n VCombobox: {\n variant: 'filled',\n },\n VDatePicker: {\n color: 'primary',\n controlHeight: 56,\n elevation: 2,\n rounded: 'md',\n controlVariant: 'modal',\n\n VBtn: {\n color: 'high-emphasis',\n rounded: 'circle',\n },\n },\n VRadioGroup: {\n indentDetails: true,\n },\n VSelect: {\n variant: 'filled',\n },\n VSlider: {\n color: 'primary',\n indentDetails: true,\n },\n VRangeSlider: {\n indentDetails: true,\n },\n VSwitch: {\n indentDetails: true,\n },\n VTabs: {\n color: 'primary',\n },\n VTextarea: {\n variant: 'filled',\n },\n VTextField: {\n variant: 'filled',\n },\n VToolbar: {\n VBtn: {\n color: null,\n },\n },\n },\n icons: {\n defaultSet: 'mdi',\n sets: {\n mdi,\n },\n },\n theme: {\n themes: {\n light: {\n colors: {\n primary: '#6200EE',\n 'primary-darken-1': '#3700B3',\n secondary: '#03DAC6',\n 'secondary-darken-1': '#018786',\n error: '#B00020',\n },\n },\n },\n },\n}\n"],"mappings":"AAAA;AAAA,SACSA,GAAG,8BAEZ;AAGA,OAAO,MAAMC,GAAc,GAAG;EAC5BC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;IACX,CAAC;IACDC,aAAa,EAAE;MACbC,OAAO,EAAE;IACX,CAAC;IACDC,OAAO,EAAE;MACPC,KAAK,EAAE;IACT,CAAC;IACDC,IAAI,EAAE;MACJC,KAAK,EAAE,gBAAgB;MACvBF,KAAK,EAAE;IACT,CAAC;IACDG,SAAS,EAAE;MACTH,KAAK,EAAE,WAAW;MAClBI,aAAa,EAAE;IACjB,CAAC;IACDC,SAAS,EAAE;MACTP,OAAO,EAAE;IACX,CAAC;IACDQ,WAAW,EAAE;MACXN,KAAK,EAAE,SAAS;MAChBO,aAAa,EAAE,EAAE;MACjBC,SAAS,EAAE,CAAC;MACZZ,OAAO,EAAE,IAAI;MACba,cAAc,EAAE,OAAO;MAEvBR,IAAI,EAAE;QACJD,KAAK,EAAE,eAAe;QACtBJ,OAAO,EAAE;MACX;IACF,CAAC;IACDc,WAAW,EAAE;MACXN,aAAa,EAAE;IACjB,CAAC;IACDO,OAAO,EAAE;MACPb,OAAO,EAAE;IACX,CAAC;IACDc,OAAO,EAAE;MACPZ,KAAK,EAAE,SAAS;MAChBI,aAAa,EAAE;IACjB,CAAC;IACDS,YAAY,EAAE;MACZT,aAAa,EAAE;IACjB,CAAC;IACDU,OAAO,EAAE;MACPV,aAAa,EAAE;IACjB,CAAC;IACDW,KAAK,EAAE;MACLf,KAAK,EAAE;IACT,CAAC;IACDgB,SAAS,EAAE;MACTlB,OAAO,EAAE;IACX,CAAC;IACDmB,UAAU,EAAE;MACVnB,OAAO,EAAE;IACX,CAAC;IACDoB,QAAQ,EAAE;MACRjB,IAAI,EAAE;QACJD,KAAK,EAAE;MACT;IACF;EACF,CAAC;EACDmB,KAAK,EAAE;IACLC,UAAU,EAAE,KAAK;IACjBC,IAAI,EAAE;MACJ7B;IACF;EACF,CAAC;EACD8B,KAAK,EAAE;IACLC,MAAM,EAAE;MACNC,KAAK,EAAE;QACLC,MAAM,EAAE;UACNC,OAAO,EAAE,SAAS;UAClB,kBAAkB,EAAE,SAAS;UAC7BC,SAAS,EAAE,SAAS;UACpB,oBAAoB,EAAE,SAAS;UAC/BC,KAAK,EAAE;QACT;MACF;IACF;EACF;AACF,CAAC","ignoreList":[]}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import type { Blueprint } from '../framework.js';
|
||||
export declare const md3: Blueprint;
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
// Icons
|
||||
import { mdi } from "../iconsets/mdi.js"; // Types
|
||||
export const md3 = {
|
||||
defaults: {
|
||||
VAppBar: {
|
||||
flat: true
|
||||
},
|
||||
VAutocomplete: {
|
||||
variant: 'outlined'
|
||||
},
|
||||
VBanner: {
|
||||
color: 'primary'
|
||||
},
|
||||
VBottomSheet: {
|
||||
contentClass: 'rounded-t-xl overflow-hidden'
|
||||
},
|
||||
VBtn: {
|
||||
color: 'primary',
|
||||
rounded: 'xl'
|
||||
},
|
||||
VBtnGroup: {
|
||||
rounded: 'xl',
|
||||
VBtn: {
|
||||
rounded: null
|
||||
}
|
||||
},
|
||||
VCard: {
|
||||
rounded: 'lg'
|
||||
},
|
||||
VCheckbox: {
|
||||
color: 'secondary',
|
||||
inset: true,
|
||||
indentDetails: true
|
||||
},
|
||||
VChip: {
|
||||
rounded: 'sm'
|
||||
},
|
||||
VCombobox: {
|
||||
variant: 'outlined'
|
||||
},
|
||||
VDateInput: {
|
||||
variant: 'outlined'
|
||||
},
|
||||
VDatePicker: {
|
||||
controlHeight: 48,
|
||||
color: 'primary',
|
||||
divided: true,
|
||||
headerColor: '',
|
||||
elevation: 1,
|
||||
rounded: 'xl',
|
||||
VBtn: {
|
||||
color: 'high-emphasis',
|
||||
rounded: 'circle'
|
||||
}
|
||||
},
|
||||
VFileInput: {
|
||||
variant: 'outlined'
|
||||
},
|
||||
VList: {
|
||||
prependGap: 16
|
||||
},
|
||||
VNavigationDrawer: {
|
||||
// VList: {
|
||||
// nav: true,
|
||||
// VListItem: {
|
||||
// rounded: 'xl',
|
||||
// },
|
||||
// },
|
||||
},
|
||||
VNumberInput: {
|
||||
variant: 'outlined',
|
||||
VBtn: {
|
||||
color: undefined,
|
||||
rounded: undefined
|
||||
}
|
||||
},
|
||||
VRadioGroup: {
|
||||
indentDetails: true
|
||||
},
|
||||
VSelect: {
|
||||
variant: 'outlined'
|
||||
},
|
||||
VSlider: {
|
||||
color: 'primary',
|
||||
indentDetails: true
|
||||
},
|
||||
VRangeSlider: {
|
||||
indentDetails: true
|
||||
},
|
||||
VSwitch: {
|
||||
indentDetails: true
|
||||
},
|
||||
VTabs: {
|
||||
color: 'primary'
|
||||
},
|
||||
VTextarea: {
|
||||
variant: 'outlined'
|
||||
},
|
||||
VTextField: {
|
||||
variant: 'outlined'
|
||||
},
|
||||
VToolbar: {
|
||||
VBtn: {
|
||||
color: null
|
||||
}
|
||||
}
|
||||
},
|
||||
icons: {
|
||||
defaultSet: 'mdi',
|
||||
sets: {
|
||||
mdi
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
colors: {
|
||||
primary: '#6750a4',
|
||||
secondary: '#b4b0bb',
|
||||
tertiary: '#7d5260',
|
||||
error: '#b3261e',
|
||||
surface: '#fffbfe'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
//# sourceMappingURL=md3.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"md3.js","names":["mdi","md3","defaults","VAppBar","flat","VAutocomplete","variant","VBanner","color","VBottomSheet","contentClass","VBtn","rounded","VBtnGroup","VCard","VCheckbox","inset","indentDetails","VChip","VCombobox","VDateInput","VDatePicker","controlHeight","divided","headerColor","elevation","VFileInput","VList","prependGap","VNavigationDrawer","VNumberInput","undefined","VRadioGroup","VSelect","VSlider","VRangeSlider","VSwitch","VTabs","VTextarea","VTextField","VToolbar","icons","defaultSet","sets","theme","themes","light","colors","primary","secondary","tertiary","error","surface"],"sources":["../../src/blueprints/md3.ts"],"sourcesContent":["// Icons\nimport { mdi } from '@/iconsets/mdi'\n\n// Types\nimport type { Blueprint } from '@/framework'\n\nexport const md3: Blueprint = {\n defaults: {\n VAppBar: {\n flat: true,\n },\n VAutocomplete: {\n variant: 'outlined',\n },\n VBanner: {\n color: 'primary',\n },\n VBottomSheet: {\n contentClass: 'rounded-t-xl overflow-hidden',\n },\n VBtn: {\n color: 'primary',\n rounded: 'xl',\n },\n VBtnGroup: {\n rounded: 'xl',\n VBtn: { rounded: null },\n },\n VCard: {\n rounded: 'lg',\n },\n VCheckbox: {\n color: 'secondary',\n inset: true,\n indentDetails: true,\n },\n VChip: {\n rounded: 'sm',\n },\n VCombobox: {\n variant: 'outlined',\n },\n VDateInput: {\n variant: 'outlined',\n },\n VDatePicker: {\n controlHeight: 48,\n color: 'primary',\n divided: true,\n headerColor: '',\n elevation: 1,\n rounded: 'xl',\n\n VBtn: {\n color: 'high-emphasis',\n rounded: 'circle',\n },\n },\n VFileInput: {\n variant: 'outlined',\n },\n VList: {\n prependGap: 16,\n },\n VNavigationDrawer: {\n // VList: {\n // nav: true,\n // VListItem: {\n // rounded: 'xl',\n // },\n // },\n },\n VNumberInput: {\n variant: 'outlined',\n\n VBtn: {\n color: undefined,\n rounded: undefined,\n },\n },\n VRadioGroup: {\n indentDetails: true,\n },\n VSelect: {\n variant: 'outlined',\n },\n VSlider: {\n color: 'primary',\n indentDetails: true,\n },\n VRangeSlider: {\n indentDetails: true,\n },\n VSwitch: {\n indentDetails: true,\n },\n VTabs: {\n color: 'primary',\n },\n VTextarea: {\n variant: 'outlined',\n },\n VTextField: {\n variant: 'outlined',\n },\n VToolbar: {\n VBtn: {\n color: null,\n },\n },\n },\n icons: {\n defaultSet: 'mdi',\n sets: {\n mdi,\n },\n },\n theme: {\n themes: {\n light: {\n colors: {\n primary: '#6750a4',\n secondary: '#b4b0bb',\n tertiary: '#7d5260',\n error: '#b3261e',\n surface: '#fffbfe',\n },\n },\n },\n },\n}\n"],"mappings":"AAAA;AAAA,SACSA,GAAG,8BAEZ;AAGA,OAAO,MAAMC,GAAc,GAAG;EAC5BC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,IAAI,EAAE;IACR,CAAC;IACDC,aAAa,EAAE;MACbC,OAAO,EAAE;IACX,CAAC;IACDC,OAAO,EAAE;MACPC,KAAK,EAAE;IACT,CAAC;IACDC,YAAY,EAAE;MACZC,YAAY,EAAE;IAChB,CAAC;IACDC,IAAI,EAAE;MACJH,KAAK,EAAE,SAAS;MAChBI,OAAO,EAAE;IACX,CAAC;IACDC,SAAS,EAAE;MACTD,OAAO,EAAE,IAAI;MACbD,IAAI,EAAE;QAAEC,OAAO,EAAE;MAAK;IACxB,CAAC;IACDE,KAAK,EAAE;MACLF,OAAO,EAAE;IACX,CAAC;IACDG,SAAS,EAAE;MACTP,KAAK,EAAE,WAAW;MAClBQ,KAAK,EAAE,IAAI;MACXC,aAAa,EAAE;IACjB,CAAC;IACDC,KAAK,EAAE;MACLN,OAAO,EAAE;IACX,CAAC;IACDO,SAAS,EAAE;MACTb,OAAO,EAAE;IACX,CAAC;IACDc,UAAU,EAAE;MACVd,OAAO,EAAE;IACX,CAAC;IACDe,WAAW,EAAE;MACXC,aAAa,EAAE,EAAE;MACjBd,KAAK,EAAE,SAAS;MAChBe,OAAO,EAAE,IAAI;MACbC,WAAW,EAAE,EAAE;MACfC,SAAS,EAAE,CAAC;MACZb,OAAO,EAAE,IAAI;MAEbD,IAAI,EAAE;QACJH,KAAK,EAAE,eAAe;QACtBI,OAAO,EAAE;MACX;IACF,CAAC;IACDc,UAAU,EAAE;MACVpB,OAAO,EAAE;IACX,CAAC;IACDqB,KAAK,EAAE;MACLC,UAAU,EAAE;IACd,CAAC;IACDC,iBAAiB,EAAE;MACjB;MACA;MACA;MACA;MACA;MACA;IAAA,CACD;IACDC,YAAY,EAAE;MACZxB,OAAO,EAAE,UAAU;MAEnBK,IAAI,EAAE;QACJH,KAAK,EAAEuB,SAAS;QAChBnB,OAAO,EAAEmB;MACX;IACF,CAAC;IACDC,WAAW,EAAE;MACXf,aAAa,EAAE;IACjB,CAAC;IACDgB,OAAO,EAAE;MACP3B,OAAO,EAAE;IACX,CAAC;IACD4B,OAAO,EAAE;MACP1B,KAAK,EAAE,SAAS;MAChBS,aAAa,EAAE;IACjB,CAAC;IACDkB,YAAY,EAAE;MACZlB,aAAa,EAAE;IACjB,CAAC;IACDmB,OAAO,EAAE;MACPnB,aAAa,EAAE;IACjB,CAAC;IACDoB,KAAK,EAAE;MACL7B,KAAK,EAAE;IACT,CAAC;IACD8B,SAAS,EAAE;MACThC,OAAO,EAAE;IACX,CAAC;IACDiC,UAAU,EAAE;MACVjC,OAAO,EAAE;IACX,CAAC;IACDkC,QAAQ,EAAE;MACR7B,IAAI,EAAE;QACJH,KAAK,EAAE;MACT;IACF;EACF,CAAC;EACDiC,KAAK,EAAE;IACLC,UAAU,EAAE,KAAK;IACjBC,IAAI,EAAE;MACJ3C;IACF;EACF,CAAC;EACD4C,KAAK,EAAE;IACLC,MAAM,EAAE;MACNC,KAAK,EAAE;QACLC,MAAM,EAAE;UACNC,OAAO,EAAE,SAAS;UAClBC,SAAS,EAAE,SAAS;UACpBC,QAAQ,EAAE,SAAS;UACnBC,KAAK,EAAE,SAAS;UAChBC,OAAO,EAAE;QACX;MACF;IACF;EACF;AACF,CAAC","ignoreList":[]}
|
||||
+238
@@ -0,0 +1,238 @@
|
||||
@layer vuetify-components {
|
||||
.v-alert {
|
||||
display: grid;
|
||||
flex: 1 1;
|
||||
grid-template-areas: "prepend content append close" ". content . .";
|
||||
grid-template-columns: max-content auto max-content max-content;
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
--v-border-color: currentColor;
|
||||
}
|
||||
.v-alert--absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.v-alert--fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.v-alert--sticky {
|
||||
position: sticky;
|
||||
}
|
||||
.v-alert {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-alert--variant-plain, .v-alert--variant-outlined, .v-alert--variant-text, .v-alert--variant-tonal {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
.v-alert--variant-plain {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.v-alert--variant-plain:focus, .v-alert--variant-plain:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-alert--variant-plain .v-alert__overlay {
|
||||
display: none;
|
||||
}
|
||||
.v-alert--variant-elevated, .v-alert--variant-flat {
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface-light)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-alert--variant-elevated {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
|
||||
}
|
||||
.v-alert--variant-flat {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-alert--variant-outlined {
|
||||
border: thin solid currentColor;
|
||||
}
|
||||
.v-alert--variant-text .v-alert__overlay {
|
||||
background: currentColor;
|
||||
}
|
||||
.v-alert--variant-tonal .v-alert__underlay {
|
||||
background: currentColor;
|
||||
opacity: var(--v-activated-opacity);
|
||||
border-radius: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-alert .v-alert__underlay {
|
||||
position: absolute;
|
||||
}
|
||||
.v-alert--prominent {
|
||||
grid-template-areas: "prepend content append close" "prepend content . .";
|
||||
}
|
||||
.v-alert.v-alert--border {
|
||||
--v-border-opacity: 0.38;
|
||||
}
|
||||
.v-alert.v-alert--border.v-alert--border-start {
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
.v-alert.v-alert--border.v-alert--border-end {
|
||||
padding-inline-end: 24px;
|
||||
}
|
||||
.v-alert--variant-plain {
|
||||
transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-alert--density-default {
|
||||
padding-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.v-alert--density-default.v-alert--border-top {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.v-alert--density-default.v-alert--border-bottom {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.v-alert--density-comfortable {
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.v-alert--density-comfortable.v-alert--border-top {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.v-alert--density-comfortable.v-alert--border-bottom {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.v-alert--density-compact {
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.v-alert--density-compact.v-alert--border-top {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.v-alert--density-compact.v-alert--border-bottom {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.v-alert:not(:has(.v-alert-title)) .v-alert__content {
|
||||
padding-block: calc((1.75rem - 1.5 * 1rem) / 2);
|
||||
}
|
||||
.v-alert__border {
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: var(--v-border-opacity);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.v-alert__border {
|
||||
border-color: currentColor;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-alert__border--border {
|
||||
border-width: 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-alert--border-start .v-alert__border {
|
||||
border-inline-start-width: 8px;
|
||||
}
|
||||
.v-alert--border-end .v-alert__border {
|
||||
border-inline-end-width: 8px;
|
||||
}
|
||||
.v-alert--border-top .v-alert__border {
|
||||
border-top-width: 8px;
|
||||
}
|
||||
.v-alert--border-bottom .v-alert__border {
|
||||
border-bottom-width: 8px;
|
||||
}
|
||||
.v-alert__close {
|
||||
flex: 0 1 auto;
|
||||
grid-area: close;
|
||||
}
|
||||
.v-alert__close > .v-btn {
|
||||
margin-block: calc(-1 * (var(--v-btn-height) + 12px - 1.75rem) / 2);
|
||||
}
|
||||
.v-alert__content {
|
||||
align-self: center;
|
||||
grid-area: content;
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-alert__content > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.v-alert__content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.v-alert__append,
|
||||
.v-alert__close {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
.v-alert__append {
|
||||
align-self: flex-start;
|
||||
grid-area: append;
|
||||
}
|
||||
.v-alert__append + .v-alert__close {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
.v-alert__prepend {
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-area: prepend;
|
||||
margin-inline-end: 16px;
|
||||
min-height: 1.75rem;
|
||||
}
|
||||
.v-alert__prepend > .v-icon {
|
||||
font-size: 1.75rem;
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
}
|
||||
.v-alert--prominent .v-alert__prepend {
|
||||
align-self: center;
|
||||
}
|
||||
.v-alert__underlay {
|
||||
grid-area: none;
|
||||
position: absolute;
|
||||
}
|
||||
.v-alert--border-start .v-alert__underlay {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.v-alert--border-end .v-alert__underlay {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.v-alert--border-top .v-alert__underlay {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.v-alert--border-bottom .v-alert__underlay {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.v-alert-title {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
hyphens: auto;
|
||||
letter-spacing: normal;
|
||||
line-height: 1.75rem;
|
||||
overflow-wrap: normal;
|
||||
text-transform: none;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.v-alert:not(.v-alert--variant-text, .v-alert--variant-plain) {
|
||||
border-style: solid;
|
||||
}
|
||||
.v-alert--variant-outlined, .v-alert--variant-tonal {
|
||||
border-width: medium;
|
||||
}
|
||||
.v-alert--variant-elevated, .v-alert--variant-flat {
|
||||
border-width: thick;
|
||||
}
|
||||
}
|
||||
}
|
||||
+734
@@ -0,0 +1,734 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
declare const allowedTypes: readonly ['success', 'info', 'warning', 'error'];
|
||||
type ContextualType = (typeof allowedTypes)[number];
|
||||
export declare const makeVAlertProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
density?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
location?: unknown;
|
||||
position?: unknown;
|
||||
iconSize?: unknown;
|
||||
iconSizes?: unknown;
|
||||
border?: unknown;
|
||||
borderColor?: unknown;
|
||||
closable?: unknown;
|
||||
closeIcon?: unknown;
|
||||
closeLabel?: unknown;
|
||||
icon?: unknown;
|
||||
modelValue?: unknown;
|
||||
prominent?: unknown;
|
||||
title?: unknown;
|
||||
text?: unknown;
|
||||
type?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? PropType<import("../../util/index.js").Anchor | null> : {
|
||||
type: PropType<unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | import("../../util/index.js").Anchor | null>;
|
||||
default: unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
position: unknown extends Defaults["position"] ? {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : "absolute" | "fixed" | "relative" | "static" | "sticky" | Defaults["position"]>;
|
||||
default: unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : Defaults["position"] | NonNullable<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
};
|
||||
iconSize: unknown extends Defaults["iconSize"] ? PropType<string | number> : {
|
||||
type: PropType<unknown extends Defaults["iconSize"] ? string | number : string | number | Defaults["iconSize"]>;
|
||||
default: unknown extends Defaults["iconSize"] ? string | number : Defaults["iconSize"] | NonNullable<string | number>;
|
||||
};
|
||||
iconSizes: unknown extends Defaults["iconSizes"] ? {
|
||||
type: PropType<[import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
} : Omit<{
|
||||
type: PropType<[import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["iconSizes"] ? [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][] : [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][] | Defaults["iconSizes"]>;
|
||||
default: unknown extends Defaults["iconSizes"] ? [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][] : [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][] | Defaults["iconSizes"];
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? {
|
||||
type: PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>;
|
||||
validator: (val: boolean | string) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>;
|
||||
validator: (val: boolean | string) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["border"] ? "bottom" | "end" | "start" | "top" | boolean : "bottom" | "end" | "start" | "top" | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? "bottom" | "end" | "start" | "top" | boolean : Defaults["border"] | NonNullable<"bottom" | "end" | "start" | "top" | boolean>;
|
||||
};
|
||||
borderColor: unknown extends Defaults["borderColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["borderColor"] ? string : string | Defaults["borderColor"]>;
|
||||
default: unknown extends Defaults["borderColor"] ? string : string | Defaults["borderColor"];
|
||||
};
|
||||
closable: unknown extends Defaults["closable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["closable"] ? boolean : boolean | Defaults["closable"]>;
|
||||
default: unknown extends Defaults["closable"] ? boolean : boolean | Defaults["closable"];
|
||||
};
|
||||
closeIcon: unknown extends Defaults["closeIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["closeIcon"] ? IconValue : Defaults["closeIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["closeIcon"] ? IconValue : Defaults["closeIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
closeLabel: unknown extends Defaults["closeLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["closeLabel"] ? string : string | Defaults["closeLabel"]>;
|
||||
default: unknown extends Defaults["closeLabel"] ? string : string | Defaults["closeLabel"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? {
|
||||
type: PropType<false | IconValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<false | IconValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["icon"] ? false | IconValue : false | Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? false | IconValue : Defaults["icon"] | NonNullable<false | IconValue>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"];
|
||||
};
|
||||
prominent: unknown extends Defaults["prominent"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["prominent"] ? boolean : boolean | Defaults["prominent"]>;
|
||||
default: unknown extends Defaults["prominent"] ? boolean : boolean | Defaults["prominent"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["text"] ? string : string | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string : string | Defaults["text"];
|
||||
};
|
||||
type: unknown extends Defaults["type"] ? {
|
||||
type: PropType<ContextualType>;
|
||||
validator: (val: ContextualType) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<ContextualType>;
|
||||
validator: (val: ContextualType) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["type"] ? "error" | "info" | "success" | "warning" : "error" | "info" | "success" | "warning" | Defaults["type"]>;
|
||||
default: unknown extends Defaults["type"] ? "error" | "info" | "success" | "warning" : Defaults["type"] | NonNullable<"error" | "info" | "success" | "warning">;
|
||||
};
|
||||
};
|
||||
export type VAlertSlots = {
|
||||
default: never;
|
||||
prepend: never;
|
||||
title: never;
|
||||
text: never;
|
||||
append: never;
|
||||
close: {
|
||||
props: Record<string, any>;
|
||||
};
|
||||
};
|
||||
export declare const VAlert: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
iconSize?: string | number | undefined;
|
||||
border?: "bottom" | "end" | "start" | "top" | boolean | undefined;
|
||||
borderColor?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
type?: "error" | "info" | "success" | "warning" | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
close?: ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
close?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:close"?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'click:close': (e: MouseEvent) => true;
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
close: (arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
iconSize?: string | number | undefined;
|
||||
border?: "bottom" | "end" | "start" | "top" | boolean | undefined;
|
||||
borderColor?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
type?: "error" | "info" | "success" | "warning" | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
close?: ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
close?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:close"?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, () => false | JSX.Element, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
iconSize?: string | number | undefined;
|
||||
border?: "bottom" | "end" | "start" | "top" | boolean | undefined;
|
||||
borderColor?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
type?: "error" | "info" | "success" | "warning" | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
close?: ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
close?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:close"?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'click:close': (e: MouseEvent) => true;
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
close: (arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: PropType<import("../../util/index.js").Anchor | null>;
|
||||
position: {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
iconSize: PropType<import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes | number | string>;
|
||||
iconSizes: {
|
||||
type: PropType<[import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
};
|
||||
border: {
|
||||
type: PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>;
|
||||
validator: (val: boolean | string) => boolean;
|
||||
};
|
||||
borderColor: StringConstructor;
|
||||
closable: BooleanConstructor;
|
||||
closeIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
closeLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
icon: {
|
||||
type: PropType<false | IconValue>;
|
||||
default: null;
|
||||
};
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
prominent: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
text: StringConstructor;
|
||||
type: {
|
||||
type: PropType<ContextualType>;
|
||||
validator: (val: ContextualType) => boolean;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: PropType<import("../../util/index.js").Anchor | null>;
|
||||
position: {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
iconSize: PropType<import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes | number | string>;
|
||||
iconSizes: {
|
||||
type: PropType<[import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
};
|
||||
border: {
|
||||
type: PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>;
|
||||
validator: (val: boolean | string) => boolean;
|
||||
};
|
||||
borderColor: StringConstructor;
|
||||
closable: BooleanConstructor;
|
||||
closeIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
closeLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
icon: {
|
||||
type: PropType<false | IconValue>;
|
||||
default: null;
|
||||
};
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
prominent: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
text: StringConstructor;
|
||||
type: {
|
||||
type: PropType<ContextualType>;
|
||||
validator: (val: ContextualType) => boolean;
|
||||
};
|
||||
}>>;
|
||||
export type VAlert = InstanceType<typeof VAlert>;
|
||||
|
||||
+208
@@ -0,0 +1,208 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VAlert.css";
|
||||
|
||||
// Components
|
||||
import { VAlertTitle } from "./VAlertTitle.js";
|
||||
import { VBtn } from "../VBtn/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeIconSizeProps, useIconSizes } from "../../composables/iconSizes.js";
|
||||
import { useLocale } from "../../composables/locale.js";
|
||||
import { makeLocationProps, useLocation } from "../../composables/location.js";
|
||||
import { makePositionProps, usePosition } from "../../composables/position.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.js"; // Utilities
|
||||
import { toRef } from 'vue';
|
||||
import { genericComponent, propsFactory } from "../../util/index.js"; // Types
|
||||
const allowedTypes = ['success', 'info', 'warning', 'error'];
|
||||
export const makeVAlertProps = propsFactory({
|
||||
border: {
|
||||
type: [Boolean, String],
|
||||
validator: val => {
|
||||
return typeof val === 'boolean' || ['top', 'end', 'bottom', 'start'].includes(val);
|
||||
}
|
||||
},
|
||||
borderColor: String,
|
||||
closable: Boolean,
|
||||
closeIcon: {
|
||||
type: IconValue,
|
||||
default: '$close'
|
||||
},
|
||||
closeLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.close'
|
||||
},
|
||||
icon: {
|
||||
type: [Boolean, String, Function, Object],
|
||||
default: null
|
||||
},
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prominent: Boolean,
|
||||
title: String,
|
||||
text: String,
|
||||
type: {
|
||||
type: String,
|
||||
validator: val => allowedTypes.includes(val)
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeElevationProps(),
|
||||
...makeIconSizeProps(),
|
||||
...makeLocationProps(),
|
||||
...makePositionProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'flat'
|
||||
})
|
||||
}, 'VAlert');
|
||||
export const VAlert = genericComponent()({
|
||||
name: 'VAlert',
|
||||
props: makeVAlertProps(),
|
||||
emits: {
|
||||
'click:close': e => true,
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
emit,
|
||||
slots
|
||||
}) {
|
||||
const isActive = useProxiedModel(props, 'modelValue');
|
||||
const icon = toRef(() => {
|
||||
if (props.icon === false) return undefined;
|
||||
if (!props.type) return props.icon;
|
||||
return props.icon ?? `$${props.type}`;
|
||||
});
|
||||
const {
|
||||
iconSize
|
||||
} = useIconSizes(props, () => props.prominent ? 44 : undefined);
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
colorClasses,
|
||||
colorStyles,
|
||||
variantClasses
|
||||
} = useVariant(() => ({
|
||||
color: props.color ?? props.type,
|
||||
variant: props.variant
|
||||
}));
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
locationStyles
|
||||
} = useLocation(props);
|
||||
const {
|
||||
positionClasses
|
||||
} = usePosition(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.borderColor);
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const closeProps = toRef(() => ({
|
||||
'aria-label': t(props.closeLabel),
|
||||
onClick(e) {
|
||||
isActive.value = false;
|
||||
emit('click:close', e);
|
||||
}
|
||||
}));
|
||||
return () => {
|
||||
const hasPrepend = !!(slots.prepend || icon.value);
|
||||
const hasTitle = !!(slots.title || props.title);
|
||||
const hasClose = !!(slots.close || props.closable);
|
||||
const iconProps = {
|
||||
density: props.density,
|
||||
icon: icon.value,
|
||||
size: props.iconSize || props.prominent ? iconSize.value : undefined
|
||||
};
|
||||
return isActive.value && _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-alert', props.border && {
|
||||
'v-alert--border': !!props.border,
|
||||
[`v-alert--border-${props.border === true ? 'start' : props.border}`]: true
|
||||
}, {
|
||||
'v-alert--prominent': props.prominent
|
||||
}, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class]),
|
||||
"style": _normalizeStyle([colorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
|
||||
"role": "alert"
|
||||
}, {
|
||||
default: () => [genOverlays(false, 'v-alert'), props.border && _createElementVNode("div", {
|
||||
"key": "border",
|
||||
"class": _normalizeClass(['v-alert__border', textColorClasses.value]),
|
||||
"style": _normalizeStyle(textColorStyles.value)
|
||||
}, null), hasPrepend && _createElementVNode("div", {
|
||||
"key": "prepend",
|
||||
"class": "v-alert__prepend"
|
||||
}, [!slots.prepend ? _createVNode(VIcon, _mergeProps({
|
||||
"key": "prepend-icon"
|
||||
}, iconProps), null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "prepend-defaults",
|
||||
"disabled": !icon.value,
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
...iconProps
|
||||
}
|
||||
}
|
||||
}, slots.prepend)]), _createElementVNode("div", {
|
||||
"class": "v-alert__content"
|
||||
}, [hasTitle && _createVNode(VAlertTitle, {
|
||||
"key": "title"
|
||||
}, {
|
||||
default: () => [slots.title?.() ?? props.title]
|
||||
}), slots.text?.() ?? props.text, slots.default?.()]), slots.append && _createElementVNode("div", {
|
||||
"key": "append",
|
||||
"class": "v-alert__append"
|
||||
}, [slots.append()]), hasClose && _createElementVNode("div", {
|
||||
"key": "close",
|
||||
"class": "v-alert__close"
|
||||
}, [!slots.close ? _createVNode(VBtn, _mergeProps({
|
||||
"key": "close-btn",
|
||||
"icon": props.closeIcon,
|
||||
"size": "x-small",
|
||||
"variant": "text"
|
||||
}, closeProps.value), null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "close-defaults",
|
||||
"defaults": {
|
||||
VBtn: {
|
||||
icon: props.closeIcon,
|
||||
size: 'x-small',
|
||||
variant: 'text'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.close?.({
|
||||
props: closeProps.value
|
||||
})]
|
||||
})])]
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VAlert.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+165
@@ -0,0 +1,165 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-alert
|
||||
display: grid
|
||||
flex: 1 1
|
||||
grid-template-areas: "prepend content append close" ". content . ."
|
||||
grid-template-columns: max-content auto max-content max-content
|
||||
position: relative
|
||||
padding: $alert-padding
|
||||
overflow: hidden
|
||||
--v-border-color: #{$alert-border-color}
|
||||
|
||||
@include tools.position($alert-positions)
|
||||
@include tools.rounded($alert-border-radius)
|
||||
@include tools.variant($alert-variants...)
|
||||
|
||||
&--prominent
|
||||
grid-template-areas: "prepend content append close" "prepend content . ."
|
||||
|
||||
&.v-alert--border
|
||||
--v-border-opacity: #{$alert-border-opacity}
|
||||
|
||||
&.v-alert--border-start
|
||||
padding-inline-start: $alert-padding + $alert-border-thin-width
|
||||
|
||||
&.v-alert--border-end
|
||||
padding-inline-end: $alert-padding + $alert-border-thin-width
|
||||
|
||||
&--variant-plain
|
||||
transition: $alert-plain-transition
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-alert', $alert-density) using ($modifier)
|
||||
padding-bottom: $alert-padding + $modifier
|
||||
padding-top: $alert-padding + $modifier
|
||||
|
||||
&.v-alert--border-top
|
||||
padding-top: $alert-padding + $alert-border-thin-width + $modifier
|
||||
|
||||
&.v-alert--border-bottom
|
||||
padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
|
||||
|
||||
&:not(:has(.v-alert-title))
|
||||
.v-alert__content
|
||||
padding-block: calc((#{$alert-prepend-icon-size} - #{settings.$line-height-root} * 1rem) / 2)
|
||||
|
||||
.v-alert__border
|
||||
border-radius: inherit
|
||||
bottom: 0
|
||||
left: 0
|
||||
opacity: var(--v-border-opacity)
|
||||
position: absolute
|
||||
pointer-events: none
|
||||
right: 0
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
@include tools.border($alert-border...)
|
||||
|
||||
.v-alert--border-start &
|
||||
border-inline-start-width: $alert-border-thin-width
|
||||
|
||||
.v-alert--border-end &
|
||||
border-inline-end-width: $alert-border-thin-width
|
||||
|
||||
.v-alert--border-top &
|
||||
border-top-width: $alert-border-thin-width
|
||||
|
||||
.v-alert--border-bottom &
|
||||
border-bottom-width: $alert-border-thin-width
|
||||
|
||||
.v-alert__close
|
||||
flex: 0 1 auto
|
||||
grid-area: close
|
||||
|
||||
> .v-btn
|
||||
margin-block: calc(-1 * (var(--v-btn-height) + 12px - #{$alert-prepend-icon-size}) / 2)
|
||||
|
||||
.v-alert__content
|
||||
align-self: center
|
||||
grid-area: content
|
||||
overflow: hidden
|
||||
|
||||
> :first-child
|
||||
margin-top: 0
|
||||
|
||||
> :last-child
|
||||
margin-bottom: 0
|
||||
|
||||
.v-alert__append,
|
||||
.v-alert__close
|
||||
margin-inline-start: $alert-append-margin-inline-start
|
||||
|
||||
.v-alert__append
|
||||
align-self: flex-start
|
||||
grid-area: append
|
||||
|
||||
+ .v-alert__close
|
||||
margin-inline-start: $alert-append-close-margin-inline-start
|
||||
|
||||
.v-alert__prepend
|
||||
align-self: flex-start
|
||||
display: flex
|
||||
align-items: center
|
||||
grid-area: prepend
|
||||
margin-inline-end: $alert-prepend-margin-inline-end
|
||||
min-height: $alert-prepend-icon-size
|
||||
|
||||
> .v-icon
|
||||
font-size: $alert-prepend-icon-size
|
||||
height: $alert-prepend-icon-size
|
||||
width: $alert-prepend-icon-size
|
||||
|
||||
.v-alert--prominent &
|
||||
align-self: center
|
||||
|
||||
.v-alert__underlay
|
||||
grid-area: none
|
||||
position: absolute
|
||||
|
||||
.v-alert--border-start &
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
|
||||
.v-alert--border-end &
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
.v-alert--border-top &
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.v-alert--border-bottom &
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
.v-alert-title
|
||||
align-items: center
|
||||
align-self: center
|
||||
display: flex
|
||||
font-size: $alert-title-font-size
|
||||
font-weight: $alert-title-font-weight
|
||||
hyphens: $alert-title-hyphens
|
||||
letter-spacing: $alert-title-letter-spacing
|
||||
line-height: $alert-title-line-height
|
||||
overflow-wrap: $alert-title-overflow-wrap
|
||||
text-transform: $alert-title-text-transform
|
||||
word-break: $alert-title-word-break
|
||||
word-wrap: $alert-title-word-wrap
|
||||
|
||||
@media (forced-colors: active)
|
||||
.v-alert
|
||||
&:not(&--variant-text, &--variant-plain)
|
||||
border-style: solid
|
||||
|
||||
&--variant-outlined,
|
||||
&--variant-tonal
|
||||
border-width: medium
|
||||
|
||||
&--variant-elevated,
|
||||
&--variant-flat
|
||||
border-width: thick
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
export declare const VAlertTitle: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VAlertTitle = InstanceType<typeof VAlertTitle>;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
// Utilities
|
||||
import { createSimpleFunctional } from "../../util/index.js";
|
||||
export const VAlertTitle = createSimpleFunctional('v-alert-title');
|
||||
//# sourceMappingURL=VAlertTitle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VAlertTitle.js","names":["createSimpleFunctional","VAlertTitle"],"sources":["../../../src/components/VAlert/VAlertTitle.ts"],"sourcesContent":["// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VAlertTitle = createSimpleFunctional('v-alert-title')\n\nexport type VAlertTitle = InstanceType<typeof VAlertTitle>\n"],"mappings":"AAAA;AAAA,SACSA,sBAAsB;AAE/B,OAAO,MAAMC,WAAW,GAAGD,sBAAsB,CAAC,eAAe,CAAC","ignoreList":[]}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VAlert
|
||||
$alert-background: rgb(var(--v-theme-surface-light)) !default;
|
||||
$alert-border-color: currentColor !default;
|
||||
$alert-border-opacity: .38 !default;
|
||||
$alert-border-radius: settings.$border-radius-root !default;
|
||||
$alert-border-style: settings.$border-style-root !default;
|
||||
$alert-border-thin-width: 8px !default;
|
||||
$alert-border-width: 0 !default;
|
||||
$alert-color: tools.theme-color('on-surface-light', var(--v-high-emphasis-opacity)) !default;
|
||||
$alert-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
|
||||
$alert-elevation: 1 !default;
|
||||
$alert-padding: 16px !default;
|
||||
$alert-plain-opacity: .62 !default;
|
||||
$alert-plain-transition: .2s opacity settings.$standard-easing !default;
|
||||
$alert-positions: absolute fixed sticky !default;
|
||||
$alert-prepend-margin-inline-end: 16px !default;
|
||||
$alert-prepend-icon-size: 1.75rem !default;
|
||||
$alert-append-margin-inline-start: 16px !default;
|
||||
$alert-append-close-margin-inline-start: 16px !default;
|
||||
|
||||
// VAlertTitle
|
||||
$alert-title-font-size: tools.map-deep-get(settings.$typography, 'headline-small', 'size') !default;
|
||||
$alert-title-font-weight: tools.map-deep-get(settings.$typography, 'headline-small', 'weight') !default;
|
||||
$alert-title-hyphens: auto !default;
|
||||
$alert-title-letter-spacing: tools.map-deep-get(settings.$typography, 'headline-small', 'letter-spacing') !default;
|
||||
$alert-title-line-height: 1.75rem !default;
|
||||
$alert-title-overflow-wrap: normal !default;
|
||||
$alert-title-text-transform: none !default;
|
||||
$alert-title-word-break: normal !default;
|
||||
$alert-title-word-wrap: break-word !default;
|
||||
|
||||
// VAlertText
|
||||
$alert-text-line-height: 1.35 !default;
|
||||
|
||||
// Lists
|
||||
$alert-border: (
|
||||
$alert-border-color,
|
||||
$alert-border-style,
|
||||
$alert-border-width,
|
||||
$alert-border-thin-width
|
||||
) !default;
|
||||
|
||||
$alert-variants: (
|
||||
$alert-background,
|
||||
$alert-color,
|
||||
$alert-elevation,
|
||||
$alert-plain-opacity,
|
||||
'v-alert'
|
||||
) !default;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VAlert } from './VAlert.js';
|
||||
export { VAlertTitle } from './VAlertTitle.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VAlert } from "./VAlert.js";
|
||||
export { VAlertTitle } from "./VAlertTitle.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VAlert","VAlertTitle"],"sources":["../../../src/components/VAlert/index.ts"],"sourcesContent":["export { VAlert } from './VAlert'\nexport { VAlertTitle } from './VAlertTitle'\n"],"mappings":"SAASA,MAAM;AAAA,SACNC,WAAW","ignoreList":[]}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@layer vuetify-components {
|
||||
.v-application {
|
||||
display: flex;
|
||||
background: rgb(var(--v-theme-background));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-background)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-application__wrap {
|
||||
backface-visibility: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
+185
@@ -0,0 +1,185 @@
|
||||
|
||||
export declare const makeVAppProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
overlaps?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
overlaps: unknown extends Defaults["overlaps"] ? import("vue").Prop<string[]> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["overlaps"] ? string[] : string[] | Defaults["overlaps"]>;
|
||||
default: unknown extends Defaults["overlaps"] ? string[] : string[] | Defaults["overlaps"];
|
||||
};
|
||||
};
|
||||
export declare const VApp: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
overlaps?: string[] | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {
|
||||
getLayoutItem: (id: string) => {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
} | undefined;
|
||||
items: import("vue").ComputedRef<{
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
}[]>;
|
||||
theme: import("../../types.js").ThemeInstance;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
overlaps?: string[] | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {
|
||||
getLayoutItem: (id: string) => {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
} | undefined;
|
||||
items: import("vue").ComputedRef<{
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
}[]>;
|
||||
theme: import("../../types.js").ThemeInstance;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
overlaps?: string[] | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {
|
||||
getLayoutItem: (id: string) => {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
} | undefined;
|
||||
items: import("vue").ComputedRef<{
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
id: string;
|
||||
size: number;
|
||||
position: import("../../composables/layout.js").Position;
|
||||
}[]>;
|
||||
theme: import("../../types.js").ThemeInstance;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
overlaps: import("vue").Prop<string[]>;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
overlaps: import("vue").Prop<string[]>;
|
||||
}>>;
|
||||
export type VApp = InstanceType<typeof VApp>;
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VApp.css";
|
||||
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { createLayout, makeLayoutProps } from "../../composables/layout.js";
|
||||
import { useRtl } from "../../composables/locale.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVAppProps = propsFactory({
|
||||
...makeComponentProps(),
|
||||
...omit(makeLayoutProps(), ['fullHeight']),
|
||||
...makeThemeProps()
|
||||
}, 'VApp');
|
||||
export const VApp = genericComponent()({
|
||||
name: 'VApp',
|
||||
props: makeVAppProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const theme = provideTheme(props);
|
||||
const {
|
||||
layoutClasses,
|
||||
getLayoutItem,
|
||||
items,
|
||||
layoutRef
|
||||
} = createLayout({
|
||||
...props,
|
||||
fullHeight: true
|
||||
});
|
||||
const {
|
||||
rtlClasses
|
||||
} = useRtl();
|
||||
useRender(() => _createElementVNode("div", {
|
||||
"ref": layoutRef,
|
||||
"class": _normalizeClass(['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class]),
|
||||
"style": _normalizeStyle([props.style])
|
||||
}, [_createElementVNode("div", {
|
||||
"class": "v-application__wrap"
|
||||
}, [slots.default?.()])]));
|
||||
return {
|
||||
getLayoutItem,
|
||||
items,
|
||||
theme
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VApp.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VApp.js","names":["makeComponentProps","createLayout","makeLayoutProps","useRtl","makeThemeProps","provideTheme","genericComponent","omit","propsFactory","useRender","makeVAppProps","VApp","name","props","setup","slots","theme","layoutClasses","getLayoutItem","items","layoutRef","fullHeight","rtlClasses","_createElementVNode","_normalizeClass","themeClasses","value","class","_normalizeStyle","style","default"],"sources":["../../../src/components/VApp/VApp.tsx"],"sourcesContent":["// Styles\nimport './VApp.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\nimport { useRtl } from '@/composables/locale'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\nexport const makeVAppProps = propsFactory({\n ...makeComponentProps(),\n ...omit(makeLayoutProps(), ['fullHeight']),\n ...makeThemeProps(),\n}, 'VApp')\n\nexport const VApp = genericComponent()({\n name: 'VApp',\n\n props: makeVAppProps(),\n\n setup (props, { slots }) {\n const theme = provideTheme(props)\n const { layoutClasses, getLayoutItem, items, layoutRef } = createLayout({ ...props, fullHeight: true })\n const { rtlClasses } = useRtl()\n\n useRender(() => (\n <div\n ref={ layoutRef }\n class={[\n 'v-application',\n theme.themeClasses.value,\n layoutClasses.value,\n rtlClasses.value,\n props.class,\n ]}\n style={[\n props.style,\n ]}\n >\n <div class=\"v-application__wrap\">\n { slots.default?.() }\n </div>\n </div>\n ))\n\n return {\n getLayoutItem,\n items,\n theme,\n }\n },\n})\n\nexport type VApp = InstanceType<typeof VApp>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY,EAAEC,eAAe;AAAA,SAC7BC,MAAM;AAAA,SACNC,cAAc,EAAEC,YAAY,sCAErC;AAAA,SACSC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS;AAExD,OAAO,MAAMC,aAAa,GAAGF,YAAY,CAAC;EACxC,GAAGR,kBAAkB,CAAC,CAAC;EACvB,GAAGO,IAAI,CAACL,eAAe,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;EAC1C,GAAGE,cAAc,CAAC;AACpB,CAAC,EAAE,MAAM,CAAC;AAEV,OAAO,MAAMO,IAAI,GAAGL,gBAAgB,CAAC,CAAC,CAAC;EACrCM,IAAI,EAAE,MAAM;EAEZC,KAAK,EAAEH,aAAa,CAAC,CAAC;EAEtBI,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvB,MAAMC,KAAK,GAAGX,YAAY,CAACQ,KAAK,CAAC;IACjC,MAAM;MAAEI,aAAa;MAAEC,aAAa;MAAEC,KAAK;MAAEC;IAAU,CAAC,GAAGnB,YAAY,CAAC;MAAE,GAAGY,KAAK;MAAEQ,UAAU,EAAE;IAAK,CAAC,CAAC;IACvG,MAAM;MAAEC;IAAW,CAAC,GAAGnB,MAAM,CAAC,CAAC;IAE/BM,SAAS,CAAC,MAAAc,mBAAA;MAAA,OAEAH,SAAS;MAAA,SAAAI,eAAA,CACR,CACL,eAAe,EACfR,KAAK,CAACS,YAAY,CAACC,KAAK,EACxBT,aAAa,CAACS,KAAK,EACnBJ,UAAU,CAACI,KAAK,EAChBb,KAAK,CAACc,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACLf,KAAK,CAACgB,KAAK,CACZ;IAAA,IAAAN,mBAAA;MAAA;IAAA,IAGGR,KAAK,CAACe,OAAO,GAAG,CAAC,IAGxB,CAAC;IAEF,OAAO;MACLZ,aAAa;MACbC,KAAK;MACLH;IACF,CAAC;EACH;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-application
|
||||
display: flex
|
||||
background: $application-background
|
||||
color: $application-color
|
||||
|
||||
.v-application__wrap
|
||||
backface-visibility: hidden
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex: 1 1 auto
|
||||
max-width: 100%
|
||||
min-height: 100vh
|
||||
min-height: 100dvh
|
||||
position: relative
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VApp
|
||||
$application-background: rgb(var(--v-theme-background)) !default;
|
||||
$application-color: tools.theme-color('on-background', var(--v-high-emphasis-opacity)) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VApp } from './VApp.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VApp } from "./VApp.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VApp"],"sources":["../../../src/components/VApp/index.ts"],"sourcesContent":["export { VApp } from './VApp'\n"],"mappings":"SAASA,IAAI","ignoreList":[]}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@layer vuetify-components {
|
||||
.v-app-bar {
|
||||
display: flex;
|
||||
}
|
||||
.v-app-bar.v-toolbar {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-app-bar.v-toolbar:not(.v-toolbar--flat) {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 2px 6px 2px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 4%, transparent);
|
||||
}
|
||||
.v-app-bar:not(.v-toolbar--absolute) {
|
||||
padding-inline-end: var(--v-scrollbar-offset);
|
||||
}
|
||||
}
|
||||
+669
@@ -0,0 +1,669 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
export declare const makeVAppBarProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
name?: unknown;
|
||||
order?: unknown;
|
||||
absolute?: unknown;
|
||||
border?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
collapse?: unknown;
|
||||
collapsePosition?: unknown;
|
||||
color?: unknown;
|
||||
density?: unknown;
|
||||
extended?: unknown;
|
||||
extensionHeight?: unknown;
|
||||
flat?: unknown;
|
||||
floating?: unknown;
|
||||
image?: unknown;
|
||||
title?: unknown;
|
||||
scrollTarget?: unknown;
|
||||
scrollThreshold?: unknown;
|
||||
scrollBehavior?: unknown;
|
||||
modelValue?: unknown;
|
||||
location?: unknown;
|
||||
height?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
name: unknown extends Defaults["name"] ? {
|
||||
type: StringConstructor;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["name"] ? string : string | Defaults["name"]>;
|
||||
default: unknown extends Defaults["name"] ? string : string | Defaults["name"];
|
||||
};
|
||||
order: unknown extends Defaults["order"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["order"] ? string | number : string | number | Defaults["order"]>;
|
||||
default: unknown extends Defaults["order"] ? string | number : Defaults["order"] | NonNullable<string | number>;
|
||||
};
|
||||
absolute: unknown extends Defaults["absolute"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"]>;
|
||||
default: unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"];
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
collapse: unknown extends Defaults["collapse"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["collapse"] ? boolean : boolean | Defaults["collapse"]>;
|
||||
default: unknown extends Defaults["collapse"] ? boolean : boolean | Defaults["collapse"];
|
||||
};
|
||||
collapsePosition: unknown extends Defaults["collapsePosition"] ? {
|
||||
type: PropType<'start' | 'end'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'start' | 'end'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["collapsePosition"] ? "end" | "start" : "end" | "start" | Defaults["collapsePosition"]>;
|
||||
default: unknown extends Defaults["collapsePosition"] ? "end" | "start" : Defaults["collapsePosition"] | NonNullable<"end" | "start">;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../VToolbar/VToolbar.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../VToolbar/VToolbar.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../VToolbar/VToolbar.js").Density : Defaults["density"] | import("../VToolbar/VToolbar.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../VToolbar/VToolbar.js").Density : Defaults["density"] | NonNullable<import("../VToolbar/VToolbar.js").Density>;
|
||||
};
|
||||
extended: unknown extends Defaults["extended"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["extended"] ? boolean : boolean | Defaults["extended"]>;
|
||||
default: unknown extends Defaults["extended"] ? boolean : boolean | Defaults["extended"];
|
||||
};
|
||||
extensionHeight: unknown extends Defaults["extensionHeight"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["extensionHeight"] ? string | number : string | number | Defaults["extensionHeight"]>;
|
||||
default: unknown extends Defaults["extensionHeight"] ? string | number : Defaults["extensionHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
flat: unknown extends Defaults["flat"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"]>;
|
||||
default: unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"];
|
||||
};
|
||||
floating: unknown extends Defaults["floating"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"]>;
|
||||
default: unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"];
|
||||
};
|
||||
image: unknown extends Defaults["image"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["image"] ? string : string | Defaults["image"]>;
|
||||
default: unknown extends Defaults["image"] ? string : string | Defaults["image"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
scrollTarget: unknown extends Defaults["scrollTarget"] ? {
|
||||
type: StringConstructor;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["scrollTarget"] ? string : string | Defaults["scrollTarget"]>;
|
||||
default: unknown extends Defaults["scrollTarget"] ? string : string | Defaults["scrollTarget"];
|
||||
};
|
||||
scrollThreshold: unknown extends Defaults["scrollThreshold"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["scrollThreshold"] ? string | number : string | number | Defaults["scrollThreshold"]>;
|
||||
default: unknown extends Defaults["scrollThreshold"] ? string | number : Defaults["scrollThreshold"] | NonNullable<string | number>;
|
||||
};
|
||||
scrollBehavior: unknown extends Defaults["scrollBehavior"] ? PropType<"collapse" | "elevate" | "fade-image" | "fully-hide" | "hide" | "inverted" | (string & {})> : {
|
||||
type: PropType<unknown extends Defaults["scrollBehavior"] ? "collapse" | "elevate" | "fade-image" | "fully-hide" | "hide" | "inverted" | (string & {}) : "collapse" | "elevate" | "fade-image" | "fully-hide" | "hide" | "inverted" | Defaults["scrollBehavior"] | (string & {})>;
|
||||
default: unknown extends Defaults["scrollBehavior"] ? "collapse" | "elevate" | "fade-image" | "fully-hide" | "hide" | "inverted" | (string & {}) : string | Defaults["scrollBehavior"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"];
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? {
|
||||
type: PropType<'top' | 'bottom'>;
|
||||
default: string;
|
||||
validator: (value: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<'top' | 'bottom'>;
|
||||
default: string;
|
||||
validator: (value: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["location"] ? "bottom" | "top" : "bottom" | "top" | Defaults["location"]>;
|
||||
default: unknown extends Defaults["location"] ? "bottom" | "top" : Defaults["location"] | NonNullable<"bottom" | "top">;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
};
|
||||
export declare const VAppBar: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: import("../VToolbar/VToolbar.js").Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
scrollThreshold: string | number;
|
||||
modelValue: boolean;
|
||||
location: "bottom" | "top";
|
||||
height: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
image?: string | undefined;
|
||||
title?: string | undefined;
|
||||
scrollTarget?: string | undefined;
|
||||
scrollBehavior?: "collapse" | "elevate" | "fade-image" | "fully-hide" | "hide" | "inverted" | (string & {}) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
image?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
image?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:extension"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:image"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: import("../VToolbar/VToolbar.js").Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
scrollThreshold: string | number;
|
||||
modelValue: boolean;
|
||||
location: "bottom" | "top";
|
||||
height: string | number;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
image: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
extension: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: import("../VToolbar/VToolbar.js").Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
scrollThreshold: string | number;
|
||||
modelValue: boolean;
|
||||
location: "bottom" | "top";
|
||||
height: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
image?: string | undefined;
|
||||
title?: string | undefined;
|
||||
scrollTarget?: string | undefined;
|
||||
scrollBehavior?: "collapse" | "elevate" | "fade-image" | "fully-hide" | "hide" | "inverted" | (string & {}) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
image?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
image?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:extension"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:image"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: import("../VToolbar/VToolbar.js").Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
scrollThreshold: string | number;
|
||||
modelValue: boolean;
|
||||
location: "bottom" | "top";
|
||||
height: string | number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: import("../VToolbar/VToolbar.js").Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
scrollThreshold: string | number;
|
||||
modelValue: boolean;
|
||||
location: "bottom" | "top";
|
||||
height: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
name?: string | undefined;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
image?: string | undefined;
|
||||
title?: string | undefined;
|
||||
scrollTarget?: string | undefined;
|
||||
scrollBehavior?: "collapse" | "elevate" | "fade-image" | "fully-hide" | "hide" | "inverted" | (string & {}) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
image?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
image?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:extension"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:image"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
order: string | number;
|
||||
absolute: boolean;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: import("../VToolbar/VToolbar.js").Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
scrollThreshold: string | number;
|
||||
modelValue: boolean;
|
||||
location: "bottom" | "top";
|
||||
height: string | number;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
image: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
extension: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
name: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
order: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
collapse: BooleanConstructor;
|
||||
collapsePosition: {
|
||||
type: PropType<'start' | 'end'>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
density: {
|
||||
type: PropType<import("../VToolbar/VToolbar.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
extended: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
extensionHeight: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
flat: BooleanConstructor;
|
||||
floating: BooleanConstructor;
|
||||
image: StringConstructor;
|
||||
title: StringConstructor;
|
||||
scrollTarget: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
scrollThreshold: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
scrollBehavior: PropType<'hide' | 'fully-hide' | 'inverted' | 'collapse' | 'elevate' | 'fade-image' | (string & {})>;
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
location: {
|
||||
type: PropType<'top' | 'bottom'>;
|
||||
default: string;
|
||||
validator: (value: any) => boolean;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
name: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
order: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
collapse: BooleanConstructor;
|
||||
collapsePosition: {
|
||||
type: PropType<'start' | 'end'>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
density: {
|
||||
type: PropType<import("../VToolbar/VToolbar.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
extended: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
extensionHeight: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
flat: BooleanConstructor;
|
||||
floating: BooleanConstructor;
|
||||
image: StringConstructor;
|
||||
title: StringConstructor;
|
||||
scrollTarget: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
scrollThreshold: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
scrollBehavior: PropType<'hide' | 'fully-hide' | 'inverted' | 'collapse' | 'elevate' | 'fade-image' | (string & {})>;
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
location: {
|
||||
type: PropType<'top' | 'bottom'>;
|
||||
default: string;
|
||||
validator: (value: any) => boolean;
|
||||
};
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
}>>;
|
||||
export type VAppBar = InstanceType<typeof VAppBar>;
|
||||
+154
@@ -0,0 +1,154 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VAppBar.css";
|
||||
|
||||
// Components
|
||||
import { makeVToolbarProps, VToolbar } from "../VToolbar/VToolbar.js"; // Composables
|
||||
import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { makeScrollProps, useScroll } from "../../composables/scroll.js";
|
||||
import { useSsrBoot } from "../../composables/ssrBoot.js";
|
||||
import { useToggleScope } from "../../composables/toggleScope.js"; // Utilities
|
||||
import { computed, ref, shallowRef, toRef, watchEffect } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVAppBarProps = propsFactory({
|
||||
scrollBehavior: String,
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
validator: value => ['top', 'bottom'].includes(value)
|
||||
},
|
||||
...omit(makeVToolbarProps(), ['location']),
|
||||
...makeLayoutItemProps(),
|
||||
...makeScrollProps(),
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 64
|
||||
}
|
||||
}, 'VAppBar');
|
||||
export const VAppBar = genericComponent()({
|
||||
name: 'VAppBar',
|
||||
props: makeVAppBarProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const vToolbarRef = ref();
|
||||
const isActive = useProxiedModel(props, 'modelValue');
|
||||
const scrollBehavior = computed(() => {
|
||||
const behavior = new Set(props.scrollBehavior?.split(' ') ?? []);
|
||||
return {
|
||||
hide: behavior.has('hide'),
|
||||
fullyHide: behavior.has('fully-hide'),
|
||||
inverted: behavior.has('inverted'),
|
||||
collapse: behavior.has('collapse'),
|
||||
elevate: behavior.has('elevate'),
|
||||
fadeImage: behavior.has('fade-image')
|
||||
// shrink: behavior.has('shrink'),
|
||||
};
|
||||
});
|
||||
const canScroll = computed(() => {
|
||||
const behavior = scrollBehavior.value;
|
||||
return behavior.hide || behavior.fullyHide || behavior.inverted || behavior.collapse || behavior.elevate || behavior.fadeImage ||
|
||||
// behavior.shrink ||
|
||||
!isActive.value;
|
||||
});
|
||||
const appBarHeight = computed(() => {
|
||||
const height = vToolbarRef.value?.contentHeight ?? 0;
|
||||
const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
|
||||
return height + extensionHeight;
|
||||
});
|
||||
const {
|
||||
currentScroll,
|
||||
scrollThreshold,
|
||||
isScrollingUp,
|
||||
scrollRatio,
|
||||
isAtBottom,
|
||||
reachedBottomWhileScrollingDown,
|
||||
hasEnoughScrollableSpace
|
||||
} = useScroll(props, {
|
||||
canScroll,
|
||||
layoutSize: appBarHeight
|
||||
});
|
||||
const canHide = toRef(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
|
||||
const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
|
||||
const isFlat = computed(() => props.flat || scrollBehavior.value.fullyHide && !isActive.value || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
|
||||
const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
|
||||
const height = computed(() => {
|
||||
if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
|
||||
const height = vToolbarRef.value?.contentHeight ?? 0;
|
||||
const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
|
||||
if (!canHide.value) return height + extensionHeight;
|
||||
return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide ? height + extensionHeight : height;
|
||||
});
|
||||
useToggleScope(() => !!props.scrollBehavior, () => {
|
||||
watchEffect(() => {
|
||||
if (!canHide.value) {
|
||||
isActive.value = true;
|
||||
return;
|
||||
}
|
||||
if (scrollBehavior.value.inverted) {
|
||||
isActive.value = currentScroll.value > scrollThreshold.value;
|
||||
return;
|
||||
}
|
||||
|
||||
// If there's not enough scrollable space, don't apply scroll-hide behavior at all
|
||||
// This prevents flickering/bouncing animations on short pages
|
||||
if (!hasEnoughScrollableSpace.value) {
|
||||
isActive.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevent navbar from showing when we reached bottom while scrolling down
|
||||
// This handles the case where scroll momentum causes to hit bottom during hide transition
|
||||
if (reachedBottomWhileScrollingDown.value) {
|
||||
isActive.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Normal behavior: show when scrolling up (and not at bottom) or above threshold
|
||||
isActive.value = isScrollingUp.value && !isAtBottom.value || currentScroll.value < scrollThreshold.value;
|
||||
});
|
||||
});
|
||||
const {
|
||||
ssrBootStyles
|
||||
} = useSsrBoot();
|
||||
const {
|
||||
layoutItemStyles
|
||||
} = useLayoutItem({
|
||||
id: props.name,
|
||||
order: computed(() => parseInt(props.order, 10)),
|
||||
position: toRef(() => props.location),
|
||||
layoutSize: height,
|
||||
elementSize: shallowRef(undefined),
|
||||
active: isActive,
|
||||
absolute: toRef(() => props.absolute)
|
||||
});
|
||||
useRender(() => {
|
||||
const toolbarProps = omit(VToolbar.filterProps(props), ['location']);
|
||||
return _createVNode(VToolbar, _mergeProps({
|
||||
"ref": vToolbarRef,
|
||||
"class": ['v-app-bar', {
|
||||
'v-app-bar--bottom': props.location === 'bottom'
|
||||
}, props.class],
|
||||
"style": [{
|
||||
...layoutItemStyles.value,
|
||||
'--v-toolbar-image-opacity': opacity.value,
|
||||
height: undefined,
|
||||
...ssrBootStyles.value
|
||||
}, props.style]
|
||||
}, toolbarProps, {
|
||||
"collapse": isCollapsed.value,
|
||||
"flat": isFlat.value
|
||||
}), slots);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VAppBar.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+15
@@ -0,0 +1,15 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-app-bar
|
||||
display: flex
|
||||
|
||||
&.v-toolbar
|
||||
@include tools.theme($app-bar-theme...)
|
||||
|
||||
&:not(.v-toolbar--flat)
|
||||
@include tools.elevation($app-bar-elevation)
|
||||
|
||||
&:not(.v-toolbar--absolute)
|
||||
padding-inline-end: var(--v-scrollbar-offset)
|
||||
+836
@@ -0,0 +1,836 @@
|
||||
export declare const makeVAppBarNavIconProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
density?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
value?: unknown;
|
||||
disabled?: unknown;
|
||||
selectedClass?: unknown;
|
||||
size?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
location?: unknown;
|
||||
loading?: unknown;
|
||||
position?: unknown;
|
||||
href?: unknown;
|
||||
replace?: unknown;
|
||||
to?: unknown;
|
||||
exact?: unknown;
|
||||
active?: unknown;
|
||||
activeColor?: unknown;
|
||||
baseColor?: unknown;
|
||||
symbol?: unknown;
|
||||
flat?: unknown;
|
||||
icon?: unknown;
|
||||
prependIcon?: unknown;
|
||||
appendIcon?: unknown;
|
||||
block?: unknown;
|
||||
readonly?: unknown;
|
||||
slim?: unknown;
|
||||
stacked?: unknown;
|
||||
ripple?: unknown;
|
||||
text?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
value: unknown extends Defaults["value"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["value"] ? any : any>;
|
||||
default: unknown extends Defaults["value"] ? any : any;
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? import("vue").PropType<import("../../util/index.js").Anchor | null> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | import("../../util/index.js").Anchor | null>;
|
||||
default: unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
loading: unknown extends Defaults["loading"] ? (BooleanConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["loading"] ? string | boolean : string | boolean | Defaults["loading"]>;
|
||||
default: unknown extends Defaults["loading"] ? string | boolean : Defaults["loading"] | NonNullable<string | boolean>;
|
||||
};
|
||||
position: unknown extends Defaults["position"] ? {
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : "absolute" | "fixed" | "relative" | "static" | "sticky" | Defaults["position"]>;
|
||||
default: unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : Defaults["position"] | NonNullable<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
};
|
||||
href: unknown extends Defaults["href"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["href"] ? string : string | Defaults["href"]>;
|
||||
default: unknown extends Defaults["href"] ? string : string | Defaults["href"];
|
||||
};
|
||||
replace: unknown extends Defaults["replace"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"]>;
|
||||
default: unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"];
|
||||
};
|
||||
to: unknown extends Defaults["to"] ? import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | Defaults["to"]>;
|
||||
default: unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : Defaults["to"] | NonNullable<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
};
|
||||
exact: unknown extends Defaults["exact"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"]>;
|
||||
default: unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"];
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
|
||||
default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
|
||||
default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
|
||||
};
|
||||
symbol: unknown extends Defaults["symbol"] ? {
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
} : Omit<{
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["symbol"] ? any : any>;
|
||||
default: unknown extends Defaults["symbol"] ? any : any;
|
||||
};
|
||||
flat: unknown extends Defaults["flat"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"]>;
|
||||
default: unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? {
|
||||
type: import("vue").PropType<boolean | import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<boolean | import("../../composables/icons.js").IconValue>;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<boolean | import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<boolean | import("../../composables/icons.js").IconValue>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["icon"] ? boolean | import("../../composables/icons.js").IconValue : boolean | Defaults["icon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? boolean | import("../../composables/icons.js").IconValue : Defaults["icon"] | NonNullable<boolean | import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
prependIcon: unknown extends Defaults["prependIcon"] ? import("vue").PropType<import("../../composables/icons.js").IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["prependIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prependIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prependIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? import("vue").PropType<import("../../composables/icons.js").IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["appendIcon"] ? import("../../composables/icons.js").IconValue : Defaults["appendIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? import("../../composables/icons.js").IconValue : Defaults["appendIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
block: unknown extends Defaults["block"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["block"] ? boolean : boolean | Defaults["block"]>;
|
||||
default: unknown extends Defaults["block"] ? boolean : boolean | Defaults["block"];
|
||||
};
|
||||
readonly: unknown extends Defaults["readonly"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"]>;
|
||||
default: unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"];
|
||||
};
|
||||
slim: unknown extends Defaults["slim"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["slim"] ? boolean : boolean | Defaults["slim"]>;
|
||||
default: unknown extends Defaults["slim"] ? boolean : boolean | Defaults["slim"];
|
||||
};
|
||||
stacked: unknown extends Defaults["stacked"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["stacked"] ? boolean : boolean | Defaults["stacked"]>;
|
||||
default: unknown extends Defaults["stacked"] ? boolean : boolean | Defaults["stacked"];
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | Defaults["ripple"] | undefined>;
|
||||
default: unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : Defaults["ripple"] | NonNullable<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["text"] ? string | number | boolean : string | number | boolean | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string | number | boolean : Defaults["text"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
};
|
||||
export declare const VAppBarNavIcon: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
icon: boolean | import("../../composables/icons.js").IconValue;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
icon: boolean | import("../../composables/icons.js").IconValue;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
text: string | number | boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
icon: boolean | import("../../composables/icons.js").IconValue;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
icon: boolean | import("../../composables/icons.js").IconValue;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
text: string | number | boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
icon: boolean | import("../../composables/icons.js").IconValue;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
disabled: boolean;
|
||||
size: string | number;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
symbol: any;
|
||||
flat: boolean;
|
||||
icon: boolean | import("../../composables/icons.js").IconValue;
|
||||
block: boolean;
|
||||
readonly: boolean;
|
||||
slim: boolean;
|
||||
stacked: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
text: string | number | boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
position: {
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
symbol: {
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
};
|
||||
flat: BooleanConstructor;
|
||||
icon: {
|
||||
type: import("vue").PropType<boolean | import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<boolean | import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
prependIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
appendIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
block: BooleanConstructor;
|
||||
readonly: BooleanConstructor;
|
||||
slim: BooleanConstructor;
|
||||
stacked: BooleanConstructor;
|
||||
ripple: {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
position: {
|
||||
type: import("vue").PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
symbol: {
|
||||
type: null;
|
||||
default: import("vue").InjectionKey<import("../../composables/group.js").GroupProvide>;
|
||||
};
|
||||
flat: BooleanConstructor;
|
||||
icon: {
|
||||
type: import("vue").PropType<boolean | import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<boolean | import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
prependIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
appendIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
block: BooleanConstructor;
|
||||
readonly: BooleanConstructor;
|
||||
slim: BooleanConstructor;
|
||||
stacked: BooleanConstructor;
|
||||
ripple: {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
}>>;
|
||||
export type VAppBarNavIcon = InstanceType<typeof VAppBarNavIcon>;
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { makeVBtnProps, VBtn } from "../VBtn/VBtn.js"; // Utilities
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVAppBarNavIconProps = propsFactory({
|
||||
...omit(makeVBtnProps({
|
||||
icon: '$menu',
|
||||
variant: 'text'
|
||||
}), ['spaced'])
|
||||
}, 'VAppBarNavIcon');
|
||||
export const VAppBarNavIcon = genericComponent()({
|
||||
name: 'VAppBarNavIcon',
|
||||
props: makeVAppBarNavIconProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => _createVNode(VBtn, _mergeProps(props, {
|
||||
"class": ['v-app-bar-nav-icon']
|
||||
}), slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VAppBarNavIcon.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VAppBarNavIcon.js","names":["makeVBtnProps","VBtn","genericComponent","omit","propsFactory","useRender","makeVAppBarNavIconProps","icon","variant","VAppBarNavIcon","name","props","setup","slots","_createVNode","_mergeProps"],"sources":["../../../src/components/VAppBar/VAppBarNavIcon.tsx"],"sourcesContent":["// Components\nimport { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn'\n\n// Utilities\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VBtnSlots } from '@/components/VBtn/VBtn'\n\nexport const makeVAppBarNavIconProps = propsFactory({\n ...omit(makeVBtnProps({\n icon: '$menu',\n variant: 'text' as const,\n }), ['spaced']),\n}, 'VAppBarNavIcon')\n\nexport const VAppBarNavIcon = genericComponent<VBtnSlots>()({\n name: 'VAppBarNavIcon',\n\n props: makeVAppBarNavIconProps(),\n\n setup (props, { slots }) {\n useRender(() => (\n <VBtn\n { ...props }\n class={[\n 'v-app-bar-nav-icon',\n ]}\n v-slots={ slots }\n />\n ))\n\n return {}\n },\n})\n\nexport type VAppBarNavIcon = InstanceType<typeof VAppBarNavIcon>\n"],"mappings":";AAAA;AAAA,SACSA,aAAa,EAAEC,IAAI,2BAE5B;AAAA,SACSC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,+BAExD;AAGA,OAAO,MAAMC,uBAAuB,GAAGF,YAAY,CAAC;EAClD,GAAGD,IAAI,CAACH,aAAa,CAAC;IACpBO,IAAI,EAAE,OAAO;IACbC,OAAO,EAAE;EACX,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC;AAChB,CAAC,EAAE,gBAAgB,CAAC;AAEpB,OAAO,MAAMC,cAAc,GAAGP,gBAAgB,CAAY,CAAC,CAAC;EAC1DQ,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAEL,uBAAuB,CAAC,CAAC;EAEhCM,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBR,SAAS,CAAC,MAAAS,YAAA,CAAAb,IAAA,EAAAc,WAAA,CAEDJ,KAAK;MAAA,SACH,CACL,oBAAoB;IACrB,IACSE,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
export declare const VAppBarTitle: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
text: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
text: StringConstructor;
|
||||
}>>;
|
||||
export type VAppBarTitle = InstanceType<typeof VAppBarTitle>;
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { makeVToolbarTitleProps, VToolbarTitle } from "../VToolbar/VToolbarTitle.js"; // Utilities
|
||||
import { genericComponent, useRender } from "../../util/index.js"; // Types
|
||||
export const VAppBarTitle = genericComponent()({
|
||||
name: 'VAppBarTitle',
|
||||
props: makeVToolbarTitleProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => _createVNode(VToolbarTitle, _mergeProps(props, {
|
||||
"class": "v-app-bar-title"
|
||||
}), slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VAppBarTitle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VAppBarTitle.js","names":["makeVToolbarTitleProps","VToolbarTitle","genericComponent","useRender","VAppBarTitle","name","props","setup","slots","_createVNode","_mergeProps"],"sources":["../../../src/components/VAppBar/VAppBarTitle.tsx"],"sourcesContent":["// Components\nimport { makeVToolbarTitleProps, VToolbarTitle } from '@/components/VToolbar/VToolbarTitle'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { VToolbarTitleSlots } from '@/components/VToolbar/VToolbarTitle'\n\nexport const VAppBarTitle = genericComponent<VToolbarTitleSlots>()({\n name: 'VAppBarTitle',\n\n props: makeVToolbarTitleProps(),\n\n setup (props, { slots }) {\n useRender(() => (\n <VToolbarTitle\n { ...props }\n class=\"v-app-bar-title\"\n v-slots={ slots }\n />\n ))\n\n return {}\n },\n})\n\nexport type VAppBarTitle = InstanceType<typeof VAppBarTitle>\n"],"mappings":";AAAA;AAAA,SACSA,sBAAsB,EAAEC,aAAa,wCAE9C;AAAA,SACSC,gBAAgB,EAAEC,SAAS,+BAEpC;AAGA,OAAO,MAAMC,YAAY,GAAGF,gBAAgB,CAAqB,CAAC,CAAC;EACjEG,IAAI,EAAE,cAAc;EAEpBC,KAAK,EAAEN,sBAAsB,CAAC,CAAC;EAE/BO,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBL,SAAS,CAAC,MAAAM,YAAA,CAAAR,aAAA,EAAAS,WAAA,CAEDJ,KAAK;MAAA;IAAA,IAEAE,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
@use "sass:map";
|
||||
@use "../../styles/settings/variables";
|
||||
@use "../../styles/tools/functions";
|
||||
|
||||
// VAppBar
|
||||
$app-bar-background: rgb(var(--v-theme-surface)) !default;
|
||||
$app-bar-border-color: variables.$border-color-root !default;
|
||||
$app-bar-border-radius: map.get(variables.$rounded, '0') !default;
|
||||
$app-bar-border-style: variables.$border-style-root !default;
|
||||
$app-bar-border-thin-width: 0 0 thin !default;
|
||||
$app-bar-border-width: 0 !default;
|
||||
$app-bar-collapsed-border-radius: 24px !default;
|
||||
$app-bar-collapsed-max-width: 112px !default;
|
||||
$app-bar-color: functions.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$app-bar-density-comfortable-padding: 4px !default;
|
||||
$app-bar-density-compact-padding: 0 !default;
|
||||
$app-bar-density-default-padding: 8px !default;
|
||||
$app-bar-elevation: 2 !default;
|
||||
$app-bar-flat-elevation: 0 !default;
|
||||
$app-bar-image-height: inherit !default;
|
||||
$app-bar-image-object-fit: cover !default;
|
||||
$app-bar-image-width: inherit !default;
|
||||
$app-bar-padding-end: 4px !default;
|
||||
$app-bar-padding-start: 4px !default;
|
||||
$app-bar-prominent-height: 128px !default;
|
||||
$app-bar-rounded-border-radius: variables.$border-radius-root !default;
|
||||
$app-bar-scrolled-title-padding-bottom: 9px !default;
|
||||
$app-bar-shaped-border-radius: map.get(variables.$rounded, 'xl') $app-bar-border-radius !default;
|
||||
$app-bar-title-font-size: functions.map-deep-get(variables.$typography, 'headline-medium', 'size') !default;
|
||||
$app-bar-title-padding: 6px 20px !default;
|
||||
$app-bar-transition: .2s variables.$standard-easing !default;
|
||||
|
||||
// Lists
|
||||
$app-bar-border: (
|
||||
$app-bar-border-color,
|
||||
$app-bar-border-style,
|
||||
$app-bar-border-width,
|
||||
$app-bar-border-thin-width
|
||||
) !default;
|
||||
|
||||
$app-bar-theme: (
|
||||
$app-bar-background,
|
||||
$app-bar-color
|
||||
) !default;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VAppBar } from './VAppBar.js';
|
||||
export { VAppBarNavIcon } from './VAppBarNavIcon.js';
|
||||
export { VAppBarTitle } from './VAppBarTitle.js';
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export { VAppBar } from "./VAppBar.js";
|
||||
export { VAppBarNavIcon } from "./VAppBarNavIcon.js";
|
||||
export { VAppBarTitle } from "./VAppBarTitle.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VAppBar","VAppBarNavIcon","VAppBarTitle"],"sources":["../../../src/components/VAppBar/index.ts"],"sourcesContent":["export { VAppBar } from './VAppBar'\nexport { VAppBarNavIcon } from './VAppBarNavIcon'\nexport { VAppBarTitle } from './VAppBarTitle'\n"],"mappings":"SAASA,OAAO;AAAA,SACPC,cAAc;AAAA,SACdC,YAAY","ignoreList":[]}
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
@layer vuetify-components {
|
||||
.v-autocomplete--chips.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating,
|
||||
.v-autocomplete--chips.v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating,
|
||||
.v-autocomplete--chips.v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating,
|
||||
.v-autocomplete--chips.v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
|
||||
top: 0px;
|
||||
}
|
||||
.v-autocomplete .v-field .v-text-field__prefix,
|
||||
.v-autocomplete .v-field .v-text-field__suffix,
|
||||
.v-autocomplete .v-field .v-field__input,
|
||||
.v-autocomplete .v-field .v-field__input > input, .v-autocomplete .v-field.v-field {
|
||||
cursor: text;
|
||||
}
|
||||
.v-autocomplete .v-field .v-field__input > input {
|
||||
flex: 1 1;
|
||||
}
|
||||
.v-autocomplete .v-field input {
|
||||
min-width: 64px;
|
||||
}
|
||||
.v-autocomplete .v-field:not(.v-field--focused) input {
|
||||
min-width: 0;
|
||||
}
|
||||
.v-autocomplete .v-field--dirty .v-autocomplete__selection {
|
||||
margin-inline-end: 2px;
|
||||
}
|
||||
.v-autocomplete .v-autocomplete__selection-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-autocomplete__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-autocomplete__content {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 2px 6px 2px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 4%, transparent);
|
||||
}
|
||||
.v-menu > .v-overlay__content.v-autocomplete__content {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-autocomplete__content > .v-sheet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.v-autocomplete__mask {
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
}
|
||||
.v-autocomplete__selection {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 1.5rem;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
max-width: calc(100% - 2px - 2px);
|
||||
}
|
||||
.v-autocomplete__selection:first-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
.v-autocomplete--selecting-index .v-autocomplete__selection {
|
||||
opacity: var(--v-medium-emphasis-opacity);
|
||||
}
|
||||
.v-autocomplete--selecting-index .v-autocomplete__selection--selected {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-autocomplete--selecting-index .v-field__input > input {
|
||||
caret-color: transparent;
|
||||
}
|
||||
.v-autocomplete--single:not(.v-autocomplete--selection-slot).v-text-field input {
|
||||
flex: 1 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
padding-inline: inherit;
|
||||
}
|
||||
.v-autocomplete--single:not(.v-autocomplete--selection-slot) .v-field--active input {
|
||||
transition: none;
|
||||
}
|
||||
.v-autocomplete--single:not(.v-autocomplete--selection-slot) .v-field--dirty:not(.v-field--focused) input {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-autocomplete--single:not(.v-autocomplete--selection-slot) .v-field--focused .v-autocomplete__selection {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-autocomplete__menu-icon {
|
||||
margin-inline-start: 4px;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-autocomplete--active-menu .v-autocomplete__menu-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
+11693
File diff suppressed because one or more lines are too long
+571
@@ -0,0 +1,571 @@
|
||||
import { Fragment as _Fragment, createElementVNode as _createElementVNode, createVNode as _createVNode, mergeProps as _mergeProps, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VAutocomplete.css";
|
||||
|
||||
// Components
|
||||
import { VAvatar } from "../VAvatar/index.js";
|
||||
import { VCheckboxBtn } from "../VCheckbox/index.js";
|
||||
import { VChip } from "../VChip/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VDivider } from "../VDivider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { useInputIcon } from "../VInput/InputIcon.js";
|
||||
import { VList, VListItem, VListSubheader } from "../VList/index.js";
|
||||
import { VMenu } from "../VMenu/index.js";
|
||||
import { makeSelectProps } from "../VSelect/VSelect.js";
|
||||
import { VSheet } from "../VSheet/index.js";
|
||||
import { makeVTextFieldProps, VTextField } from "../VTextField/VTextField.js";
|
||||
import { VVirtualScroll } from "../VVirtualScroll/index.js"; // Composables
|
||||
import { useScrolling } from "../VSelect/useScrolling.js";
|
||||
import { useTextColor } from "../../composables/color.js";
|
||||
import { highlightResult, makeFilterProps, useFilter } from "../../composables/filter.js";
|
||||
import { useFocusGroups } from "../../composables/focusGroups.js";
|
||||
import { useForm } from "../../composables/form.js";
|
||||
import { forwardRefs } from "../../composables/forwardRefs.js";
|
||||
import { useItems } from "../../composables/list-items.js";
|
||||
import { useLocale } from "../../composables/locale.js";
|
||||
import { useMenuActivator } from "../../composables/menuActivator.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
|
||||
import { computed, mergeProps, nextTick, ref, shallowRef, toRef, watch } from 'vue';
|
||||
import { checkPrintable, deepEqual, ensureValidVNode, genericComponent, IN_BROWSER, matchesSelector, noop, omit, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
|
||||
export const makeVAutocompleteProps = propsFactory({
|
||||
autoSelectFirst: {
|
||||
type: [Boolean, String]
|
||||
},
|
||||
clearOnSelect: Boolean,
|
||||
search: String,
|
||||
...makeFilterProps({
|
||||
filterKeys: ['title']
|
||||
}),
|
||||
...makeSelectProps(),
|
||||
...omit(makeVTextFieldProps({
|
||||
modelValue: null,
|
||||
role: 'combobox'
|
||||
}), ['validationValue', 'dirty'])
|
||||
}, 'VAutocomplete');
|
||||
export const VAutocomplete = genericComponent()({
|
||||
name: 'VAutocomplete',
|
||||
props: makeVAutocompleteProps(),
|
||||
emits: {
|
||||
'update:focused': focused => true,
|
||||
'update:search': value => true,
|
||||
'update:modelValue': value => true,
|
||||
'update:menu': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const vTextFieldRef = ref();
|
||||
const isFocused = shallowRef(false);
|
||||
const isPristine = shallowRef(true);
|
||||
const listHasFocus = shallowRef(false);
|
||||
const vMenuRef = ref();
|
||||
const vVirtualScrollRef = ref();
|
||||
const selectionIndex = shallowRef(-1);
|
||||
const _searchLock = shallowRef(null);
|
||||
const {
|
||||
items,
|
||||
transformIn,
|
||||
transformOut
|
||||
} = useItems(props);
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => vTextFieldRef.value?.color);
|
||||
const {
|
||||
InputIcon
|
||||
} = useInputIcon(props);
|
||||
const search = useProxiedModel(props, 'search', '');
|
||||
const model = useProxiedModel(props, 'modelValue', [], v => transformIn(v === null ? [null] : wrapInArray(v)), v => {
|
||||
const transformed = transformOut(v);
|
||||
return props.multiple ? transformed : transformed[0] ?? null;
|
||||
});
|
||||
const counterValue = computed(() => {
|
||||
return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : model.value.length;
|
||||
});
|
||||
const form = useForm(props);
|
||||
const {
|
||||
filteredItems,
|
||||
getMatches
|
||||
} = useFilter(props, items, () => _searchLock.value ?? (isPristine.value ? '' : search.value));
|
||||
const displayItems = computed(() => {
|
||||
if (props.hideSelected && _searchLock.value === null) {
|
||||
return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
|
||||
}
|
||||
return filteredItems.value;
|
||||
});
|
||||
const closableChips = toRef(() => props.closableChips && !form.isReadonly.value && !form.isDisabled.value);
|
||||
const hasChips = computed(() => !!(props.chips || slots.chip));
|
||||
const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection);
|
||||
const selectedValues = computed(() => model.value.map(selection => selection.props.value));
|
||||
const firstSelectableItem = computed(() => displayItems.value.find(x => x.type === 'item' && !x.props.disabled));
|
||||
const highlightFirst = computed(() => {
|
||||
const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === firstSelectableItem.value?.title;
|
||||
return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
|
||||
});
|
||||
const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
|
||||
const _menu = useProxiedModel(props, 'menu');
|
||||
const menu = computed({
|
||||
get: () => _menu.value,
|
||||
set: v => {
|
||||
if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
|
||||
if (v && menuDisabled.value) return;
|
||||
_menu.value = v;
|
||||
}
|
||||
});
|
||||
const {
|
||||
menuId,
|
||||
ariaExpanded,
|
||||
ariaControls
|
||||
} = useMenuActivator(props, menu);
|
||||
const listRef = ref();
|
||||
const headerRef = ref();
|
||||
const footerRef = ref();
|
||||
const listEvents = useScrolling(listRef, vTextFieldRef);
|
||||
const {
|
||||
onTabKeydown
|
||||
} = useFocusGroups({
|
||||
groups: [{
|
||||
type: 'element',
|
||||
contentRef: headerRef
|
||||
}, {
|
||||
type: 'list',
|
||||
contentRef: listRef,
|
||||
displayItemsCount: () => displayItems.value.length
|
||||
}, {
|
||||
type: 'element',
|
||||
contentRef: footerRef
|
||||
}],
|
||||
onLeave: () => {
|
||||
menu.value = false;
|
||||
vTextFieldRef.value?.focus();
|
||||
}
|
||||
});
|
||||
function onClear(e) {
|
||||
if (props.openOnClear) {
|
||||
menu.value = true;
|
||||
}
|
||||
search.value = '';
|
||||
}
|
||||
function onMousedownControl() {
|
||||
if (menuDisabled.value) return;
|
||||
menu.value = true;
|
||||
}
|
||||
function onMousedownMenuIcon(e) {
|
||||
if (menuDisabled.value) return;
|
||||
if (isFocused.value) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
menu.value = !menu.value;
|
||||
}
|
||||
function onMenuKeydown(e) {
|
||||
if (e.key === 'Tab') {
|
||||
onTabKeydown(e);
|
||||
}
|
||||
if (listRef.value?.$el.contains(e.target) && (checkPrintable(e) || e.key === 'Backspace')) {
|
||||
vTextFieldRef.value?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line complexity
|
||||
function onKeydown(e) {
|
||||
if (form.isReadonly.value) return;
|
||||
const selectionStart = vTextFieldRef.value?.selectionStart;
|
||||
const length = model.value.length;
|
||||
if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
if (['Enter', 'ArrowDown'].includes(e.key)) {
|
||||
menu.value = true;
|
||||
}
|
||||
if (['Escape'].includes(e.key)) {
|
||||
menu.value = false;
|
||||
}
|
||||
if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key) && firstSelectableItem.value && !model.value.some(({
|
||||
value
|
||||
}) => value === firstSelectableItem.value.value)) {
|
||||
select(firstSelectableItem.value);
|
||||
}
|
||||
if (e.key === 'ArrowDown' && highlightFirst.value) {
|
||||
listRef.value?.focus('next');
|
||||
}
|
||||
if (['Backspace', 'Delete'].includes(e.key)) {
|
||||
if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
|
||||
if (~selectionIndex.value) {
|
||||
e.preventDefault();
|
||||
const originalSelectionIndex = selectionIndex.value;
|
||||
select(model.value[selectionIndex.value], false);
|
||||
selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
|
||||
} else if (e.key === 'Backspace' && !search.value) {
|
||||
selectionIndex.value = length - 1;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!props.multiple) return;
|
||||
if (e.key === 'ArrowLeft') {
|
||||
if (selectionIndex.value < 0 && selectionStart && selectionStart > 0) return;
|
||||
const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
|
||||
if (model.value[prev]) {
|
||||
selectionIndex.value = prev;
|
||||
} else {
|
||||
const searchLength = search.value?.length ?? null;
|
||||
selectionIndex.value = -1;
|
||||
vTextFieldRef.value?.setSelectionRange(searchLength, searchLength);
|
||||
}
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
if (selectionIndex.value < 0) return;
|
||||
const next = selectionIndex.value + 1;
|
||||
if (model.value[next]) {
|
||||
selectionIndex.value = next;
|
||||
} else {
|
||||
selectionIndex.value = -1;
|
||||
vTextFieldRef.value?.setSelectionRange(0, 0);
|
||||
}
|
||||
} else if (~selectionIndex.value && checkPrintable(e)) {
|
||||
selectionIndex.value = -1;
|
||||
}
|
||||
}
|
||||
function onChange(e) {
|
||||
if (matchesSelector(vTextFieldRef.value, ':autofill') || matchesSelector(vTextFieldRef.value, ':-webkit-autofill')) {
|
||||
const item = items.value.find(item => item.title === e.target.value);
|
||||
if (item) {
|
||||
select(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
function onAfterEnter() {
|
||||
if (props.eager) {
|
||||
vVirtualScrollRef.value?.calculateVisibleItems();
|
||||
}
|
||||
}
|
||||
function onAfterLeave() {
|
||||
if (isFocused.value) {
|
||||
isPristine.value = true;
|
||||
vTextFieldRef.value?.focus();
|
||||
}
|
||||
_searchLock.value = null;
|
||||
}
|
||||
function onFocusin(e) {
|
||||
isFocused.value = true;
|
||||
setTimeout(() => {
|
||||
listHasFocus.value = true;
|
||||
});
|
||||
}
|
||||
function onFocusout(e) {
|
||||
listHasFocus.value = false;
|
||||
if (!vTextFieldRef.value?.$el.contains(e.relatedTarget)) {
|
||||
isFocused.value = false;
|
||||
}
|
||||
}
|
||||
function onUpdateModelValue(v) {
|
||||
if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
|
||||
}
|
||||
function onBlur(e) {
|
||||
const menuContent = vMenuRef.value?.contentEl;
|
||||
if (menuContent?.contains(e.relatedTarget)) {
|
||||
isFocused.value = true;
|
||||
}
|
||||
}
|
||||
const isSelecting = shallowRef(false);
|
||||
|
||||
/** @param set - null means toggle */
|
||||
function select(item, set = true) {
|
||||
if (!item || item.props.disabled) return;
|
||||
if (props.multiple) {
|
||||
const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value));
|
||||
const add = set == null ? !~index : set;
|
||||
if (~index) {
|
||||
const value = add ? [...model.value, item] : [...model.value];
|
||||
value.splice(index, 1);
|
||||
model.value = value;
|
||||
} else if (add) {
|
||||
model.value = [...model.value, item];
|
||||
}
|
||||
if (props.clearOnSelect) {
|
||||
search.value = '';
|
||||
}
|
||||
} else {
|
||||
const add = set !== false;
|
||||
model.value = add ? [item] : [];
|
||||
_searchLock.value = isPristine.value ? '' : search.value ?? '';
|
||||
search.value = add && !hasSelectionSlot.value ? item.title : '';
|
||||
|
||||
// watch for search watcher to trigger
|
||||
nextTick(() => {
|
||||
menu.value = false;
|
||||
isPristine.value = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
watch(isFocused, (val, oldVal) => {
|
||||
if (val === oldVal) return;
|
||||
if (val) {
|
||||
isSelecting.value = true;
|
||||
search.value = props.multiple || hasSelectionSlot.value ? '' : String(model.value.at(-1)?.props.title ?? '');
|
||||
isPristine.value = true;
|
||||
nextTick(() => isSelecting.value = false);
|
||||
} else {
|
||||
if (!props.multiple && search.value == null) model.value = [];
|
||||
menu.value = false;
|
||||
if (!isPristine.value && search.value) {
|
||||
_searchLock.value = search.value;
|
||||
}
|
||||
search.value = '';
|
||||
selectionIndex.value = -1;
|
||||
}
|
||||
});
|
||||
watch(search, val => {
|
||||
if (!isFocused.value || isSelecting.value) return;
|
||||
if (val) menu.value = true;
|
||||
isPristine.value = !val;
|
||||
});
|
||||
watch(menu, val => {
|
||||
if (!props.hideSelected && val && model.value.length && isPristine.value) {
|
||||
const index = displayItems.value.findIndex(item => model.value.some(s => item.value === s.value));
|
||||
IN_BROWSER && window.requestAnimationFrame(() => {
|
||||
index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
|
||||
});
|
||||
}
|
||||
if (val) _searchLock.value = null;
|
||||
});
|
||||
watch(items, (newVal, oldVal) => {
|
||||
if (menu.value) return;
|
||||
if (isFocused.value && !oldVal.length && newVal.length) {
|
||||
menu.value = true;
|
||||
}
|
||||
});
|
||||
useRender(() => {
|
||||
const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
|
||||
const isDirty = model.value.length > 0;
|
||||
const textFieldProps = VTextField.filterProps(props);
|
||||
const menuSlotProps = {
|
||||
search,
|
||||
filteredItems: filteredItems.value
|
||||
};
|
||||
return _createVNode(VTextField, _mergeProps({
|
||||
"ref": vTextFieldRef
|
||||
}, textFieldProps, {
|
||||
"modelValue": search.value,
|
||||
"onUpdate:modelValue": [$event => search.value = $event, onUpdateModelValue],
|
||||
"focused": isFocused.value,
|
||||
"onUpdate:focused": $event => isFocused.value = $event,
|
||||
"validationValue": model.externalValue,
|
||||
"counterValue": counterValue.value,
|
||||
"dirty": isDirty,
|
||||
"onChange": onChange,
|
||||
"class": ['v-autocomplete', `v-autocomplete--${props.multiple ? 'multiple' : 'single'}`, {
|
||||
'v-autocomplete--active-menu': menu.value,
|
||||
'v-autocomplete--chips': !!props.chips,
|
||||
'v-autocomplete--selection-slot': !!hasSelectionSlot.value,
|
||||
'v-autocomplete--selecting-index': selectionIndex.value > -1
|
||||
}, props.class],
|
||||
"style": props.style,
|
||||
"readonly": form.isReadonly.value,
|
||||
"placeholder": isDirty ? undefined : props.placeholder,
|
||||
"onClick:clear": onClear,
|
||||
"onMousedown:control": onMousedownControl,
|
||||
"onKeydown": onKeydown,
|
||||
"onBlur": onBlur,
|
||||
"aria-expanded": ariaExpanded.value,
|
||||
"aria-controls": ariaControls.value
|
||||
}), {
|
||||
...slots,
|
||||
default: ({
|
||||
id
|
||||
}) => _createElementVNode(_Fragment, null, [_createVNode(VMenu, _mergeProps({
|
||||
"id": menuId.value,
|
||||
"ref": vMenuRef,
|
||||
"modelValue": menu.value,
|
||||
"onUpdate:modelValue": $event => menu.value = $event,
|
||||
"activator": "parent",
|
||||
"contentClass": "v-autocomplete__content",
|
||||
"disabled": menuDisabled.value,
|
||||
"eager": props.eager,
|
||||
"maxHeight": 310,
|
||||
"openOnClick": false,
|
||||
"closeOnContentClick": false,
|
||||
"onAfterEnter": onAfterEnter,
|
||||
"onAfterLeave": onAfterLeave
|
||||
}, props.menuProps), {
|
||||
default: () => [_createVNode(VSheet, {
|
||||
"elevation": props.menuElevation,
|
||||
"onFocusin": onFocusin,
|
||||
"onKeydown": onMenuKeydown
|
||||
}, {
|
||||
default: () => [slots['menu-header'] && _createElementVNode("header", {
|
||||
"ref": headerRef
|
||||
}, [slots['menu-header'](menuSlotProps)]), hasList && _createVNode(VList, _mergeProps({
|
||||
"key": "autocomplete-list",
|
||||
"ref": listRef,
|
||||
"filterable": true,
|
||||
"selected": selectedValues.value,
|
||||
"selectStrategy": props.multiple ? 'independent' : 'single-independent',
|
||||
"onMousedown": e => e.preventDefault(),
|
||||
"onFocusout": onFocusout,
|
||||
"tabindex": "-1",
|
||||
"selectable": !!displayItems.value.length,
|
||||
"aria-live": "polite",
|
||||
"aria-labelledby": `${id.value}-label`,
|
||||
"aria-multiselectable": props.multiple,
|
||||
"color": props.itemColor ?? props.color
|
||||
}, listEvents, props.listProps), {
|
||||
default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? _createVNode(VListItem, {
|
||||
"key": "no-data",
|
||||
"title": t(props.noDataText)
|
||||
}, null)), _createVNode(VVirtualScroll, {
|
||||
"ref": vVirtualScrollRef,
|
||||
"renderless": true,
|
||||
"items": displayItems.value,
|
||||
"itemKey": "value"
|
||||
}, {
|
||||
default: ({
|
||||
item,
|
||||
index,
|
||||
itemRef
|
||||
}) => {
|
||||
const itemProps = mergeProps(item.props, {
|
||||
ref: itemRef,
|
||||
key: item.value,
|
||||
active: highlightFirst.value && item === firstSelectableItem.value ? true : undefined,
|
||||
onClick: () => select(item, null),
|
||||
'aria-posinset': index + 1,
|
||||
'aria-setsize': displayItems.value.length
|
||||
});
|
||||
if (item.type === 'divider') {
|
||||
return slots.divider?.({
|
||||
props: item.raw,
|
||||
index
|
||||
}) ?? _createVNode(VDivider, _mergeProps(item.props, {
|
||||
"key": `divider-${index}`
|
||||
}), null);
|
||||
}
|
||||
if (item.type === 'subheader') {
|
||||
return slots.subheader?.({
|
||||
props: item.raw,
|
||||
index
|
||||
}) ?? _createVNode(VListSubheader, _mergeProps(item.props, {
|
||||
"key": `subheader-${index}`
|
||||
}), null);
|
||||
}
|
||||
return slots.item?.({
|
||||
item: item.raw,
|
||||
internalItem: item,
|
||||
index,
|
||||
props: itemProps
|
||||
}) ?? _createVNode(VListItem, _mergeProps(itemProps, {
|
||||
"role": "option"
|
||||
}), {
|
||||
prepend: ({
|
||||
isSelected
|
||||
}) => _createElementVNode(_Fragment, null, [props.multiple && !props.hideSelected ? _createVNode(VCheckboxBtn, {
|
||||
"key": item.value,
|
||||
"modelValue": isSelected,
|
||||
"ripple": false,
|
||||
"tabindex": "-1",
|
||||
"aria-hidden": true,
|
||||
"onClick": event => event.preventDefault()
|
||||
}, null) : undefined, item.props.prependAvatar && _createVNode(VAvatar, {
|
||||
"image": item.props.prependAvatar
|
||||
}, null), item.props.prependIcon && _createVNode(VIcon, {
|
||||
"icon": item.props.prependIcon
|
||||
}, null)]),
|
||||
title: () => {
|
||||
return isPristine.value ? item.title : highlightResult('v-autocomplete', item.title, getMatches(item)?.title);
|
||||
}
|
||||
});
|
||||
}
|
||||
}), slots['append-item']?.()]
|
||||
}), slots['menu-footer'] && _createElementVNode("footer", {
|
||||
"ref": footerRef
|
||||
}, [slots['menu-footer'](menuSlotProps)])]
|
||||
})]
|
||||
}), model.value.map((item, index) => {
|
||||
function onChipClose(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
select(item, false);
|
||||
}
|
||||
const slotProps = mergeProps(VChip.filterProps(item.props), {
|
||||
'onClick:close': onChipClose,
|
||||
onKeydown(e) {
|
||||
if (e.key !== 'Enter' && e.key !== ' ') return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onChipClose(e);
|
||||
},
|
||||
onMousedown(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
},
|
||||
modelValue: true,
|
||||
'onUpdate:modelValue': undefined
|
||||
});
|
||||
const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection;
|
||||
const slotContent = hasSlot ? ensureValidVNode(hasChips.value ? slots.chip({
|
||||
item: item.raw,
|
||||
internalItem: item,
|
||||
index,
|
||||
props: slotProps
|
||||
}) : slots.selection({
|
||||
item: item.raw,
|
||||
internalItem: item,
|
||||
index
|
||||
})) : undefined;
|
||||
if (hasSlot && !slotContent) return undefined;
|
||||
return _createElementVNode("div", {
|
||||
"key": item.value,
|
||||
"class": _normalizeClass(['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]]),
|
||||
"style": _normalizeStyle(index === selectionIndex.value ? textColorStyles.value : {})
|
||||
}, [hasChips.value ? !slots.chip ? _createVNode(VChip, _mergeProps({
|
||||
"key": "chip",
|
||||
"closable": closableChips.value,
|
||||
"size": "small",
|
||||
"text": item.title,
|
||||
"disabled": item.props.disabled
|
||||
}, slotProps), null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "chip-defaults",
|
||||
"defaults": {
|
||||
VChip: {
|
||||
closable: closableChips.value,
|
||||
size: 'small',
|
||||
text: item.title
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slotContent]
|
||||
}) : slotContent ?? _createElementVNode("span", {
|
||||
"class": "v-autocomplete__selection-text"
|
||||
}, [item.title, props.multiple && index < model.value.length - 1 && _createElementVNode("span", {
|
||||
"class": "v-autocomplete__selection-comma"
|
||||
}, [_createTextVNode(",")])])]);
|
||||
})]),
|
||||
'append-inner': (...args) => _createElementVNode(_Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? _createVNode(VIcon, {
|
||||
"class": "v-autocomplete__menu-icon",
|
||||
"color": vTextFieldRef.value?.fieldIconColor,
|
||||
"icon": props.menuIcon,
|
||||
"onMousedown": onMousedownMenuIcon,
|
||||
"onClick": noop,
|
||||
"aria-hidden": true,
|
||||
"tabindex": "-1"
|
||||
}, null) : undefined, props.appendInnerIcon && _createVNode(InputIcon, {
|
||||
"key": "append-icon",
|
||||
"name": "appendInner",
|
||||
"color": args[0].iconColor.value
|
||||
}, null)])
|
||||
});
|
||||
});
|
||||
return forwardRefs({
|
||||
isFocused,
|
||||
isPristine,
|
||||
menu,
|
||||
search,
|
||||
filteredItems,
|
||||
select
|
||||
}, vTextFieldRef);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VAutocomplete.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+105
@@ -0,0 +1,105 @@
|
||||
@use 'sass:selector'
|
||||
@use 'sass:math'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
@use '../VSelect/mixins' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-autocomplete
|
||||
@include select-compact-chip-label
|
||||
|
||||
.v-field
|
||||
.v-text-field__prefix,
|
||||
.v-text-field__suffix,
|
||||
.v-field__input,
|
||||
.v-field__input > input,
|
||||
&.v-field
|
||||
cursor: text
|
||||
|
||||
.v-field
|
||||
.v-field__input
|
||||
> input
|
||||
flex: 1 1
|
||||
|
||||
.v-field
|
||||
input
|
||||
min-width: $autocomplete-focused-input
|
||||
|
||||
&:not(.v-field--focused)
|
||||
input
|
||||
min-width: 0
|
||||
|
||||
.v-field--dirty
|
||||
.v-autocomplete__selection
|
||||
margin-inline-end: $autocomplete-selection-gap
|
||||
|
||||
.v-autocomplete__selection-text
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
.v-autocomplete
|
||||
&__content
|
||||
overflow: hidden
|
||||
@include tools.elevation($autocomplete-content-elevation)
|
||||
|
||||
@at-root #{selector.append('.v-menu > .v-overlay__content', &)}
|
||||
@include tools.rounded($autocomplete-content-border-radius)
|
||||
|
||||
> .v-sheet
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
&__mask
|
||||
background: rgb(var(--v-theme-surface-light))
|
||||
|
||||
&__selection
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
height: calc($input-font-size * $input-line-height)
|
||||
letter-spacing: inherit
|
||||
line-height: inherit
|
||||
max-width: calc(100% - $autocomplete-selection-gap - $autocomplete-input-buffer)
|
||||
|
||||
&__selection
|
||||
&:first-child
|
||||
margin-inline-start: 0
|
||||
|
||||
&--selecting-index
|
||||
.v-autocomplete__selection
|
||||
opacity: var(--v-medium-emphasis-opacity)
|
||||
|
||||
&--selected
|
||||
opacity: 1
|
||||
|
||||
.v-field__input > input
|
||||
caret-color: transparent
|
||||
|
||||
&--single:not(.v-autocomplete--selection-slot)
|
||||
&.v-text-field input
|
||||
flex: 1 1
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
width: 100%
|
||||
padding-inline: inherit
|
||||
|
||||
.v-field--active
|
||||
input
|
||||
transition: none
|
||||
|
||||
.v-field--dirty:not(.v-field--focused)
|
||||
input
|
||||
opacity: 0
|
||||
|
||||
.v-field--focused
|
||||
.v-autocomplete__selection
|
||||
opacity: 0
|
||||
|
||||
&__menu-icon
|
||||
margin-inline-start: 4px
|
||||
transition: $autocomplete-transition
|
||||
|
||||
.v-autocomplete--active-menu &
|
||||
transform: rotate(180deg)
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@forward '../VInput/variables';
|
||||
@use '../../styles/settings';
|
||||
|
||||
// Defaults
|
||||
$autocomplete-content-border-radius: 4px !default;
|
||||
$autocomplete-content-elevation: 2 !default;
|
||||
$autocomplete-focused-input: 64px !default;
|
||||
$autocomplete-input-buffer: 2px !default;
|
||||
$autocomplete-line-height: 1.75 !default;
|
||||
$autocomplete-selection-gap: 2px !default;
|
||||
$autocomplete-transition: .2s settings.$standard-easing !default;
|
||||
$autocomplete-chips-control-min-height: 64px !default;
|
||||
$autocomplete-chips-margin-top: null !default;
|
||||
$autocomplete-chips-margin-bottom: null !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VAutocomplete } from './VAutocomplete.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VAutocomplete } from "./VAutocomplete.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VAutocomplete"],"sources":["../../../src/components/VAutocomplete/index.ts"],"sourcesContent":["export { VAutocomplete } from './VAutocomplete'\n"],"mappings":"SAASA,aAAa","ignoreList":[]}
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
@layer vuetify-components {
|
||||
.v-avatar {
|
||||
flex: none;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: width, height;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.v-avatar.v-avatar--size-x-small {
|
||||
--v-avatar-height: 24px;
|
||||
}
|
||||
.v-avatar.v-avatar--size-small {
|
||||
--v-avatar-height: 32px;
|
||||
}
|
||||
.v-avatar.v-avatar--size-default {
|
||||
--v-avatar-height: 40px;
|
||||
}
|
||||
.v-avatar.v-avatar--size-large {
|
||||
--v-avatar-height: 48px;
|
||||
}
|
||||
.v-avatar.v-avatar--size-x-large {
|
||||
--v-avatar-height: 56px;
|
||||
}
|
||||
.v-avatar.v-avatar--density-default {
|
||||
height: calc(var(--v-avatar-height) + 0px);
|
||||
width: calc(var(--v-avatar-height) + 0px);
|
||||
}
|
||||
.v-avatar.v-avatar--density-comfortable {
|
||||
height: calc(var(--v-avatar-height) + -4px);
|
||||
width: calc(var(--v-avatar-height) + -4px);
|
||||
}
|
||||
.v-avatar.v-avatar--density-compact {
|
||||
height: calc(var(--v-avatar-height) + -8px);
|
||||
width: calc(var(--v-avatar-height) + -8px);
|
||||
}
|
||||
.v-avatar {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-avatar--border {
|
||||
border-width: thin;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.v-avatar--variant-plain, .v-avatar--variant-outlined, .v-avatar--variant-text, .v-avatar--variant-tonal {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
.v-avatar--variant-plain {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.v-avatar--variant-plain:focus, .v-avatar--variant-plain:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-avatar--variant-plain .v-avatar__overlay {
|
||||
display: none;
|
||||
}
|
||||
.v-avatar--variant-elevated, .v-avatar--variant-flat {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-medium-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-avatar--variant-elevated {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
|
||||
}
|
||||
.v-avatar--variant-flat {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-avatar--variant-outlined {
|
||||
border: thin solid currentColor;
|
||||
}
|
||||
.v-avatar--variant-text .v-avatar__overlay {
|
||||
background: currentColor;
|
||||
}
|
||||
.v-avatar--variant-tonal .v-avatar__underlay {
|
||||
background: currentColor;
|
||||
opacity: var(--v-activated-opacity);
|
||||
border-radius: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-avatar .v-avatar__underlay {
|
||||
position: absolute;
|
||||
}
|
||||
.v-avatar--rounded {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-avatar--start {
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
.v-avatar--end {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
.v-avatar .v-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
+976
@@ -0,0 +1,976 @@
|
||||
|
||||
import { VBadge } from '../VBadge/VBadge.js';
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
export declare const makeVAvatarProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
density?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
size?: unknown;
|
||||
badge?: unknown;
|
||||
start?: unknown;
|
||||
end?: unknown;
|
||||
icon?: unknown;
|
||||
image?: unknown;
|
||||
text?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
badge: unknown extends Defaults["badge"] ? {
|
||||
type: PropType<boolean | VBadge['$props']>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | VBadge['$props']>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["badge"] ? boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">) : boolean | Defaults["badge"] | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">)>;
|
||||
default: unknown extends Defaults["badge"] ? boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">) : Defaults["badge"] | NonNullable<boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">)>;
|
||||
};
|
||||
start: unknown extends Defaults["start"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"]>;
|
||||
default: unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"];
|
||||
};
|
||||
end: unknown extends Defaults["end"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"]>;
|
||||
default: unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
image: unknown extends Defaults["image"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["image"] ? string : string | Defaults["image"]>;
|
||||
default: unknown extends Defaults["image"] ? string : string | Defaults["image"];
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["text"] ? string : string | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string : string | Defaults["text"];
|
||||
};
|
||||
};
|
||||
export type VAvatarSlots = {
|
||||
default: never;
|
||||
badge: never;
|
||||
};
|
||||
export declare const VAvatar: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
badge: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
size: string | number;
|
||||
badge: boolean | (Partial<{
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}> & Omit<{
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dot: boolean;
|
||||
dotSize?: string | number | undefined;
|
||||
floating: boolean;
|
||||
icon?: IconValue | undefined;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
max?: string | number | undefined;
|
||||
modelValue: boolean;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "bordered" | "dot" | "floating" | "inline" | "label" | "location" | "modelValue" | "rounded" | "style" | "tag" | "tile" | "transition">);
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
badge: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
badge: {
|
||||
type: PropType<boolean | VBadge['$props']>;
|
||||
default: boolean;
|
||||
};
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
icon: PropType<IconValue>;
|
||||
image: StringConstructor;
|
||||
text: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
badge: {
|
||||
type: PropType<boolean | VBadge['$props']>;
|
||||
default: boolean;
|
||||
};
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
icon: PropType<IconValue>;
|
||||
image: StringConstructor;
|
||||
text: StringConstructor;
|
||||
}>>;
|
||||
export type VAvatar = InstanceType<typeof VAvatar>;
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
import { createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VAvatar.css";
|
||||
|
||||
// Components
|
||||
import { VBadge } from "../VBadge/VBadge.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { VImg } from "../VImg/index.js"; // Composables
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeSizeProps, useSize } from "../../composables/size.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.js"; // Utilities
|
||||
import { computed } from 'vue';
|
||||
import { genericComponent, isObject, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVAvatarProps = propsFactory({
|
||||
badge: {
|
||||
type: [Boolean, Object],
|
||||
default: false
|
||||
},
|
||||
start: Boolean,
|
||||
end: Boolean,
|
||||
icon: IconValue,
|
||||
image: String,
|
||||
text: String,
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeSizeProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'flat'
|
||||
})
|
||||
}, 'VAvatar');
|
||||
export const VAvatar = genericComponent()({
|
||||
name: 'VAvatar',
|
||||
props: makeVAvatarProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
colorClasses,
|
||||
colorStyles,
|
||||
variantClasses
|
||||
} = useVariant(props);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
sizeClasses,
|
||||
sizeStyles
|
||||
} = useSize(props);
|
||||
const badgeDotSize = computed(() => {
|
||||
switch (props.size) {
|
||||
case 'x-small':
|
||||
return 8;
|
||||
case 'small':
|
||||
return 10;
|
||||
case 'large':
|
||||
return 14;
|
||||
case 'x-large':
|
||||
return 16;
|
||||
default:
|
||||
return 12;
|
||||
}
|
||||
});
|
||||
const badgeOffset = computed(() => {
|
||||
const {
|
||||
floating
|
||||
} = isObject(props.badge) ? props.badge : {};
|
||||
return (floating ? badgeDotSize.value / 2 : 0) - 1.5;
|
||||
});
|
||||
const badgeProps = computed(() => {
|
||||
return {
|
||||
bordered: true,
|
||||
dot: !slots.badge,
|
||||
dotSize: badgeDotSize.value,
|
||||
offsetX: badgeOffset.value,
|
||||
offsetY: badgeOffset.value,
|
||||
color: typeof props.badge === 'string' ? props.badge : 'primary',
|
||||
...(isObject(props.badge) ? props.badge : {})
|
||||
};
|
||||
});
|
||||
useRender(() => {
|
||||
const avatar = _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-avatar', {
|
||||
'v-avatar--start': props.start,
|
||||
'v-avatar--end': props.end
|
||||
}, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class]),
|
||||
"style": _normalizeStyle([colorStyles.value, sizeStyles.value, props.style])
|
||||
}, {
|
||||
default: () => [!slots.default ? props.image ? _createVNode(VImg, {
|
||||
"key": "image",
|
||||
"src": props.image,
|
||||
"alt": "",
|
||||
"cover": true
|
||||
}, null) : props.icon ? _createVNode(VIcon, {
|
||||
"key": "icon",
|
||||
"icon": props.icon
|
||||
}, null) : props.text : _createVNode(VDefaultsProvider, {
|
||||
"key": "content-defaults",
|
||||
"defaults": {
|
||||
VImg: {
|
||||
cover: true,
|
||||
src: props.image
|
||||
},
|
||||
VIcon: {
|
||||
icon: props.icon
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.default()]
|
||||
}), genOverlays(false, 'v-avatar')]
|
||||
});
|
||||
return props.badge ? _createVNode(VBadge, badgeProps.value, {
|
||||
default: () => avatar,
|
||||
badge: slots.badge
|
||||
}) : avatar;
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VAvatar.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+37
@@ -0,0 +1,37 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './mixins' as *
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-avatar
|
||||
flex: none
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
line-height: $avatar-line-height
|
||||
overflow: hidden
|
||||
position: relative
|
||||
text-align: center
|
||||
transition: 0.2s settings.$standard-easing
|
||||
transition-property: width, height
|
||||
vertical-align: $avatar-vertical-align
|
||||
|
||||
@include avatar-sizes($avatar-sizes)
|
||||
@include avatar-density(('height', 'width'), $avatar-density)
|
||||
@include tools.border($avatar-border...)
|
||||
@include tools.rounded($avatar-border-radius)
|
||||
@include tools.variant($avatar-variants...)
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($avatar-rounded-border-radius)
|
||||
|
||||
&--start
|
||||
margin-inline-end: $avatar-margin-start
|
||||
|
||||
&--end
|
||||
margin-inline-start: $avatar-margin-end
|
||||
|
||||
.v-img
|
||||
height: 100%
|
||||
width: 100%
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:meta';
|
||||
@use '../../styles/settings';
|
||||
@use './variables' as *;
|
||||
|
||||
@mixin avatar-sizes ($map: $avatar-sizes) {
|
||||
@each $sizeName, $multiplier in settings.$size-scales {
|
||||
$size: map.get($map, 'height') + (8 * $multiplier);
|
||||
|
||||
&.v-avatar--size-#{$sizeName} {
|
||||
--v-avatar-height: #{$size};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin avatar-density ($properties, $densities) {
|
||||
@each $density, $multiplier in $densities {
|
||||
$value: calc(var(--v-avatar-height) + #{$multiplier * settings.$spacer});
|
||||
|
||||
&.v-avatar--density-#{$density} {
|
||||
@if meta.type-of($properties) == "list" {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
#{$properties}: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
@use "sass:map";
|
||||
@use '../../styles/settings';
|
||||
@use "../../styles/settings/variables";
|
||||
@use "../../styles/tools/functions";
|
||||
|
||||
// Defaults
|
||||
$avatar-background: rgb(var(--v-theme-surface)) !default;
|
||||
$avatar-border-radius: map.get(variables.$rounded, 'circle') !default;
|
||||
$avatar-border-color: settings.$border-color-root !default;
|
||||
$avatar-border-radius: map.get(settings.$rounded, 0) !default;
|
||||
$avatar-border-style: settings.$border-style-root !default;
|
||||
$avatar-border-thin-width: thin !default;
|
||||
$avatar-border-width: 0 !default;
|
||||
$avatar-color: functions.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
|
||||
$avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
|
||||
$avatar-elevation: 1 !default;
|
||||
$avatar-height: 40px !default;
|
||||
$avatar-line-height: normal !default;
|
||||
$avatar-plain-opacity: .62 !default;
|
||||
$avatar-rounded-border-radius: variables.$border-radius-root !default;
|
||||
$avatar-vertical-align: middle !default;
|
||||
$avatar-width: 40px !default;
|
||||
$avatar-margin-end: 8px !default;
|
||||
$avatar-margin-start: 8px !default;
|
||||
|
||||
$avatar-sizes: () !default;
|
||||
$avatar-sizes: functions.map-deep-merge(
|
||||
(
|
||||
'height': $avatar-height,
|
||||
'width': $avatar-width
|
||||
),
|
||||
$avatar-sizes
|
||||
);
|
||||
|
||||
$avatar-border: (
|
||||
$avatar-border-color,
|
||||
$avatar-border-style,
|
||||
$avatar-border-width,
|
||||
$avatar-border-thin-width
|
||||
) !default;
|
||||
|
||||
$avatar-variants: (
|
||||
$avatar-background,
|
||||
$avatar-color,
|
||||
$avatar-elevation,
|
||||
$avatar-plain-opacity,
|
||||
'v-avatar'
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VAvatar } from './VAvatar.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VAvatar } from "./VAvatar.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VAvatar"],"sources":["../../../src/components/VAvatar/index.ts"],"sourcesContent":["export { VAvatar } from './VAvatar'\n"],"mappings":"SAASA,OAAO","ignoreList":[]}
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
@layer vuetify-components {
|
||||
.v-badge {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.v-badge__badge {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
border-radius: 10px;
|
||||
font-family: var(--v-font-body, "Roboto", sans-serif);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
height: 1.25rem;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
padding: 4px 6px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
transition: 0.225s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-badge__badge {
|
||||
background: rgb(var(--v-theme-surface-variant));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface-variant)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-badge__badge:has(.v-icon) {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.v-badge--bordered .v-badge__badge::after {
|
||||
border-radius: inherit;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
color: rgb(var(--v-theme-background));
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.v-badge--dot .v-badge__badge {
|
||||
border-radius: 50%;
|
||||
height: 9px;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
width: 9px;
|
||||
}
|
||||
.v-badge--dot .v-badge__badge::after {
|
||||
border-width: 1.5px;
|
||||
}
|
||||
.v-badge--inline .v-badge__badge {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.v-badge__badge .v-icon {
|
||||
color: inherit;
|
||||
font-size: 0.75rem;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
.v-badge__badge img,
|
||||
.v-badge__badge .v-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.v-badge__wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.v-badge--inline .v-badge__wrapper {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-badge__badge {
|
||||
forced-color-adjust: preserve-parent-color;
|
||||
background: highlight;
|
||||
color: highlighttext;
|
||||
}
|
||||
}
|
||||
}
|
||||
+526
@@ -0,0 +1,526 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
export type VBadgeSlots = {
|
||||
default: never;
|
||||
badge: never;
|
||||
};
|
||||
export declare const makeVBadgeProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
location?: unknown;
|
||||
transition?: unknown;
|
||||
bordered?: unknown;
|
||||
color?: unknown;
|
||||
content?: unknown;
|
||||
dot?: unknown;
|
||||
dotSize?: unknown;
|
||||
floating?: unknown;
|
||||
icon?: unknown;
|
||||
inline?: unknown;
|
||||
label?: unknown;
|
||||
max?: unknown;
|
||||
modelValue?: unknown;
|
||||
offsetX?: unknown;
|
||||
offsetY?: unknown;
|
||||
textColor?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? {
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | import("../../util/index.js").Anchor | null>;
|
||||
default: unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
transition: unknown extends Defaults["transition"] ? {
|
||||
type: import("vue").PropType<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["transition"] ? string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null : string | boolean | Defaults["transition"] | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: unknown extends Defaults["transition"] ? string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null : Defaults["transition"] | NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
};
|
||||
bordered: unknown extends Defaults["bordered"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["bordered"] ? boolean : boolean | Defaults["bordered"]>;
|
||||
default: unknown extends Defaults["bordered"] ? boolean : boolean | Defaults["bordered"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
content: unknown extends Defaults["content"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["content"] ? string | number : string | number | Defaults["content"]>;
|
||||
default: unknown extends Defaults["content"] ? string | number : Defaults["content"] | NonNullable<string | number>;
|
||||
};
|
||||
dot: unknown extends Defaults["dot"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["dot"] ? boolean : boolean | Defaults["dot"]>;
|
||||
default: unknown extends Defaults["dot"] ? boolean : boolean | Defaults["dot"];
|
||||
};
|
||||
dotSize: unknown extends Defaults["dotSize"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["dotSize"] ? string | number : string | number | Defaults["dotSize"]>;
|
||||
default: unknown extends Defaults["dotSize"] ? string | number : Defaults["dotSize"] | NonNullable<string | number>;
|
||||
};
|
||||
floating: unknown extends Defaults["floating"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"]>;
|
||||
default: unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? import("vue").PropType<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
inline: unknown extends Defaults["inline"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"]>;
|
||||
default: unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"];
|
||||
};
|
||||
label: unknown extends Defaults["label"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["label"] ? string : string | Defaults["label"]>;
|
||||
default: unknown extends Defaults["label"] ? string : string | Defaults["label"];
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["max"] ? string | number : string | number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? string | number : Defaults["max"] | NonNullable<string | number>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"];
|
||||
};
|
||||
offsetX: unknown extends Defaults["offsetX"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["offsetX"] ? string | number : string | number | Defaults["offsetX"]>;
|
||||
default: unknown extends Defaults["offsetX"] ? string | number : Defaults["offsetX"] | NonNullable<string | number>;
|
||||
};
|
||||
offsetY: unknown extends Defaults["offsetY"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["offsetY"] ? string | number : string | number | Defaults["offsetY"]>;
|
||||
default: unknown extends Defaults["offsetY"] ? string | number : Defaults["offsetY"] | NonNullable<string | number>;
|
||||
};
|
||||
textColor: unknown extends Defaults["textColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["textColor"] ? string : string | Defaults["textColor"]>;
|
||||
default: unknown extends Defaults["textColor"] ? string : string | Defaults["textColor"];
|
||||
};
|
||||
};
|
||||
export declare const VBadge: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dotSize?: string | number | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
max?: string | number | undefined;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
badge: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dotSize?: string | number | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
max?: string | number | undefined;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
content?: string | number | undefined;
|
||||
dotSize?: string | number | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
max?: string | number | undefined;
|
||||
offsetX?: string | number | undefined;
|
||||
offsetY?: string | number | undefined;
|
||||
textColor?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
badge?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:badge"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
transition: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null;
|
||||
bordered: boolean;
|
||||
dot: boolean;
|
||||
floating: boolean;
|
||||
inline: boolean;
|
||||
label: string;
|
||||
modelValue: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
badge: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: {
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
transition: {
|
||||
type: import("vue").PropType<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
};
|
||||
bordered: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
content: (NumberConstructor | StringConstructor)[];
|
||||
dot: BooleanConstructor;
|
||||
dotSize: (NumberConstructor | StringConstructor)[];
|
||||
floating: BooleanConstructor;
|
||||
icon: import("vue").PropType<IconValue>;
|
||||
inline: BooleanConstructor;
|
||||
label: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
offsetX: (NumberConstructor | StringConstructor)[];
|
||||
offsetY: (NumberConstructor | StringConstructor)[];
|
||||
textColor: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: {
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
transition: {
|
||||
type: import("vue").PropType<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
};
|
||||
bordered: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
content: (NumberConstructor | StringConstructor)[];
|
||||
dot: BooleanConstructor;
|
||||
dotSize: (NumberConstructor | StringConstructor)[];
|
||||
floating: BooleanConstructor;
|
||||
icon: import("vue").PropType<IconValue>;
|
||||
inline: BooleanConstructor;
|
||||
label: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
max: (NumberConstructor | StringConstructor)[];
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
offsetX: (NumberConstructor | StringConstructor)[];
|
||||
offsetY: (NumberConstructor | StringConstructor)[];
|
||||
textColor: StringConstructor;
|
||||
}>>;
|
||||
export type VBadge = InstanceType<typeof VBadge>;
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
import { createVNode as _createVNode, vShow as _vShow, mergeProps as _mergeProps, createElementVNode as _createElementVNode, withDirectives as _withDirectives } from "vue";
|
||||
// Styles
|
||||
import "./VBadge.css";
|
||||
|
||||
// Components
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { useBackgroundColor, useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useLocale } from "../../composables/locale.js";
|
||||
import { makeLocationProps, useLocation } from "../../composables/location.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, useTheme } from "../../composables/theme.js";
|
||||
import { makeTransitionProps, MaybeTransition } from "../../composables/transition.js"; // Utilities
|
||||
import { convertToUnit, genericComponent, pickWithRest, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVBadgeProps = propsFactory({
|
||||
bordered: Boolean,
|
||||
color: String,
|
||||
content: [Number, String],
|
||||
dot: Boolean,
|
||||
dotSize: [Number, String],
|
||||
floating: Boolean,
|
||||
icon: IconValue,
|
||||
inline: Boolean,
|
||||
label: {
|
||||
type: String,
|
||||
default: '$vuetify.badge'
|
||||
},
|
||||
max: [Number, String],
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
offsetX: [Number, String],
|
||||
offsetY: [Number, String],
|
||||
textColor: String,
|
||||
...makeComponentProps(),
|
||||
...makeLocationProps({
|
||||
location: 'top end'
|
||||
}),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeTransitionProps({
|
||||
transition: 'scale-rotate-transition'
|
||||
}),
|
||||
...makeDimensionProps()
|
||||
}, 'VBadge');
|
||||
export const VBadge = genericComponent()({
|
||||
name: 'VBadge',
|
||||
inheritAttrs: false,
|
||||
props: makeVBadgeProps(),
|
||||
setup(props, ctx) {
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.textColor);
|
||||
const {
|
||||
themeClasses
|
||||
} = useTheme();
|
||||
const {
|
||||
locationStyles
|
||||
} = useLocation(props, true, side => {
|
||||
const base = props.floating ? props.dot ? 2 : 4 : props.dot ? Number(props.dotSize ?? 8) : 12;
|
||||
return base + (['top', 'bottom'].includes(side) ? Number(props.offsetY ?? 0) : ['left', 'right'].includes(side) ? Number(props.offsetX ?? 0) : 0);
|
||||
});
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
useRender(() => {
|
||||
const value = Number(props.content);
|
||||
const content = !props.max || isNaN(value) ? props.content : value <= Number(props.max) ? value : `${props.max}+`;
|
||||
const [badgeAttrs, attrs] = pickWithRest(ctx.attrs, ['aria-atomic', 'aria-label', 'aria-live', 'role', 'title']);
|
||||
return _createVNode(props.tag, _mergeProps({
|
||||
"class": ['v-badge', {
|
||||
'v-badge--bordered': props.bordered,
|
||||
'v-badge--dot': props.dot,
|
||||
'v-badge--floating': props.floating,
|
||||
'v-badge--inline': props.inline
|
||||
}, props.class]
|
||||
}, attrs, {
|
||||
"style": props.style
|
||||
}), {
|
||||
default: () => [_createElementVNode("div", {
|
||||
"class": "v-badge__wrapper"
|
||||
}, [ctx.slots.default?.(), _createVNode(MaybeTransition, {
|
||||
"transition": props.transition
|
||||
}, {
|
||||
default: () => [_withDirectives(_createElementVNode("span", _mergeProps({
|
||||
"class": ['v-badge__badge', themeClasses.value, backgroundColorClasses.value, roundedClasses.value, textColorClasses.value],
|
||||
"style": [backgroundColorStyles.value, textColorStyles.value, dimensionStyles.value, props.inline ? {} : locationStyles.value, props.dot && props.dotSize ? {
|
||||
width: convertToUnit(props.dotSize),
|
||||
height: convertToUnit(props.dotSize)
|
||||
} : {}],
|
||||
"aria-atomic": "true",
|
||||
"aria-label": t(props.label, value),
|
||||
"aria-live": "polite",
|
||||
"role": "status"
|
||||
}, badgeAttrs), [props.dot ? undefined : ctx.slots.badge ? ctx.slots.badge?.() : props.icon ? _createVNode(VIcon, {
|
||||
"icon": props.icon
|
||||
}, null) : content]), [[_vShow, props.modelValue]])]
|
||||
})])]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VBadge.js.map
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user