Skip to content

Commit dec238a

Browse files
webdevnerdstuffjohnleider
webdevnerdstuff
and
johnleider
authored
feat(VColorInput): add new component (#20623)
Co-authored-by: John Leider <[email protected]>
1 parent 2f67dc4 commit dec238a

File tree

15 files changed

+396
-2
lines changed

15 files changed

+396
-2
lines changed

‎packages/docs/components.d.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,7 @@ declare module 'vue' {
6262
AppMenuMenu: typeof import('./src/components/app/menu/Menu.vue')['default']
6363
AppSearchSearch: typeof import('./src/components/app/search/Search.vue')['default']
6464
AppSearchSearchDialog: typeof import('./src/components/app/search/SearchDialog.vue')['default']
65-
AppSearchSearchFavorite: typeof import('./src/components/app/search/SearchFavorite.vue')['default']
6665
AppSearchSearchGroup: typeof import('./src/components/app/search/SearchGroup.vue')['default']
67-
AppSearchSearchRecent: typeof import('./src/components/app/search/SearchRecent.vue')['default']
6866
AppSearchSearchResults: typeof import('./src/components/app/search/SearchResults.vue')['default']
6967
AppSettingsAppend: typeof import('./src/components/app/settings/Append.vue')['default']
7068
AppSettingsDeveloperMode: typeof import('./src/components/app/settings/DeveloperMode.vue')['default']

‎packages/docs/src/data/nav.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,10 @@
248248
"title": "calendars",
249249
"subfolder": "components"
250250
},
251+
{
252+
"title": "color-inputs",
253+
"subfolder": "components"
254+
},
251255
{
252256
"title": "date-inputs",
253257
"subfolder": "components"

‎packages/docs/src/data/page-to-api.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"components/data-tables/virtual-tables": [
7676
"VDataTableVirtual"
7777
],
78+
"components/color-inputs": ["VColorInput", "VColorPicker"],
7879
"components/date-inputs": ["VDateInput", "VDatePicker"],
7980
"components/date-pickers-month": ["VDatePicker"],
8081
"components/date-pickers": ["VDatePicker", "VDateInput"],

‎packages/docs/src/examples/v-color-input/prop-color-pip.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<v-container>
3+
<v-row>
4+
<v-col
5+
cols="12"
6+
md="6"
7+
>
8+
<v-color-input
9+
hide-details="auto"
10+
label="Colored Pip"
11+
></v-color-input>
12+
</v-col>
13+
<v-col
14+
cols="12"
15+
md="6"
16+
>
17+
<v-color-input
18+
:color-pip="false"
19+
hide-details="auto"
20+
label="Non Colored Pip"
21+
></v-color-input>
22+
</v-col>
23+
</v-row>
24+
</v-container>
25+
26+
</template>

‎packages/docs/src/examples/v-color-input/prop-model.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="d-flex justify-center">
3+
<v-color-input
4+
v-model="model"
5+
label="Select a color"
6+
max-width="368"
7+
></v-color-input>
8+
</div>
9+
</template>
10+
11+
<script setup>
12+
import { shallowRef } from 'vue'
13+
14+
const model = shallowRef(null)
15+
</script>
16+
17+
<script>
18+
export default {
19+
data: () => ({
20+
model: null,
21+
}),
22+
}
23+
</script>

‎packages/docs/src/examples/v-color-input/prop-prepend-icon.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<v-container>
3+
<v-row>
4+
<v-col
5+
cols="12"
6+
md="6"
7+
>
8+
<v-color-input
9+
hide-details="auto"
10+
label="Select a color"
11+
></v-color-input>
12+
</v-col>
13+
14+
<v-col
15+
cols="12"
16+
md="6"
17+
>
18+
<v-color-input
19+
hide-details="auto"
20+
label="Select a color"
21+
prepend-inner-icon=""
22+
></v-color-input>
23+
</v-col>
24+
</v-row>
25+
</v-container>
26+
</template>

‎packages/docs/src/examples/v-color-input/usage.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<ExamplesUsageExample
3+
v-model="model"
4+
:code="code"
5+
:name="name"
6+
:options="options"
7+
>
8+
<div>
9+
<v-color-input v-bind="props"></v-color-input>
10+
</div>
11+
12+
<template v-slot:configuration>
13+
<v-checkbox v-model="colorPip" label="Color Pip"></v-checkbox>
14+
15+
<v-checkbox v-model="clear" label="Clearable"></v-checkbox>
16+
17+
<v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
18+
</template>
19+
</ExamplesUsageExample>
20+
</template>
21+
22+
<script setup>
23+
const name = 'v-color-input'
24+
const model = ref('default')
25+
const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
26+
const clear = ref(false)
27+
const colorPip = ref(true)
28+
const counter = ref(false)
29+
const disabled = ref(false)
30+
const props = computed(() => {
31+
return {
32+
clearable: clear.value || undefined,
33+
colorPip: colorPip.value || false,
34+
counter: counter.value || undefined,
35+
disabled: disabled.value || undefined,
36+
label: 'Color input',
37+
variant: model.value === 'default' ? undefined : model.value,
38+
}
39+
})
40+
41+
const slots = computed(() => {
42+
return ``
43+
})
44+
45+
const code = computed(() => {
46+
return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
47+
})
48+
</script>

‎packages/docs/src/pages/en/components/color-inputs.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
meta:
3+
nav: Color inputs
4+
title: Color input component
5+
description: The color input is a specialized input that provides a clean interface for selecting colors.
6+
keywords: color input, color picker, color field
7+
related:
8+
- /components/color-pickers/
9+
- /components/text-fields/
10+
- /components/menus/
11+
features:
12+
label: 'C: VColorInput'
13+
report: true
14+
github: /labs/VColorInput/
15+
---
16+
17+
# Color inputs
18+
19+
The `v-color-input` component combines a text field with a color picker..
20+
21+
<PageFeatures />
22+
23+
::: warning
24+
25+
This feature requires [v3.6.0](/getting-started/release-notes/?version=v3.6.0)
26+
27+
:::
28+
29+
## Installation
30+
31+
Labs components require a manual import and installation of the component.
32+
33+
```js { resource="src/plugins/vuetify.js" }
34+
import { VColorInput } from 'vuetify/labs/VColorInput'
35+
36+
export default createVuetify({
37+
components: {
38+
VColorInput,
39+
},
40+
})
41+
```
42+
43+
## Usage
44+
45+
At its core, the `v-color-input` component is a basic container that extends [v-text-field](/components/text-fields).
46+
47+
<ExamplesUsage name="v-color-input" />
48+
49+
<PromotedEntry />
50+
51+
## API
52+
53+
| Component | Description |
54+
| - | - |
55+
| [v-color-input](/api/v-color-input/) | Primary component |
56+
| [v-color-picker](/api/v-color-picker/) | Color picker component |
57+
| [v-text-field](/api/v-text-field/) | Text field component |
58+
59+
<ApiInline hide-links />
60+
61+
## Guide
62+
63+
The `v-color-input` component provides a clean interface for selecting colors.
64+
65+
### Props
66+
67+
The `v-color-input` component extends the [v-text-field](/components/text-fields/) and [v-color-picker](/components/color-pickers/) component; and supports all of their props.
68+
69+
#### Pip icon
70+
71+
You can move the pip icon within the input or entirely by utilizing the **prepend-icon** and **prepend-inner-icon** properties.
72+
73+
<ExamplesExample file="v-color-input/prop-prepend-icon" />
74+
75+
#### Color Pip
76+
77+
The `color-pip` is a boolean that determines whether the pip icon color matches the selected color.
78+
79+
<ExamplesExample file="v-color-input/prop-color-pip" />

‎packages/docs/src/pages/en/labs/introduction.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ The following is a list of available and up-and-coming components for use with L
7777
| Component | Description | Min Version |
7878
| - | - | - |
7979
| [v-calendar](/components/calendars/) | A calendar component | [v3.4.9](/getting-started/release-notes/?version=v3.4.9) |
80+
| [v-color-input](/components/color-inputs/) | A color input component | [vTBD](/getting-started/release-notes/?version=vTBD) |
8081
| [v-date-input](/components/date-inputs/) | A date input component | [v3.6.0](/getting-started/release-notes/?version=v3.6.0) |
8182
| [v-pull-to-refresh](/components/pull-to-refresh/) | A component to update content by screen swipes | [v3.6.0](/getting-started/release-notes/?version=v3.6.0) |
8283
| [v-stepper-vertical](/components/vertical-steppers/) | Vertical version of v-stepper | [v3.6.5](/getting-started/release-notes/?version=v3.6.5) |

‎packages/vuetify/src/iconsets/mdi.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const aliases: IconAliases = {
4848
treeviewExpand: 'mdi-menu-right',
4949
eyeDropper: 'mdi-eyedropper',
5050
upload: 'mdi-cloud-upload',
51+
color: 'mdi-palette',
5152
}
5253

5354
const mdi: IconSet = {

0 commit comments

Comments
 (0)