Skip to content

Commit 2246e6b

Browse files
nekosaurnekosaur
authored
fix(VColorPicker): allow null as initial value (#9616)
closes #9472
1 parent 7ecc216 commit 2246e6b

File tree

3 files changed

+167
-0
lines changed

3 files changed

+167
-0
lines changed

‎packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts

+11
Original file line numberDiff line numberDiff line change
@@ -137,4 +137,15 @@ describe('VColorPicker.ts', () => {
137137

138138
expect(wrapper.html()).toMatchSnapshot()
139139
})
140+
141+
// https://github.com/vuetifyjs/vuetify/issues/9472
142+
it('should work correctly when initial value is null', () => {
143+
const wrapper = mountFunction({
144+
propsData: {
145+
value: null,
146+
},
147+
})
148+
149+
expect(wrapper.html()).toMatchSnapshot()
150+
})
140151
})

‎packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap

+154
Original file line numberDiff line numberDiff line change
@@ -1630,3 +1630,157 @@ exports[`VColorPicker.ts should show swatches 1`] = `
16301630
</div>
16311631
</div>
16321632
`;
1633+
1634+
exports[`VColorPicker.ts should work correctly when initial value is null 1`] = `
1635+
<div class="v-color-picker v-sheet theme--light theme--light"
1636+
style="max-width: 300px;"
1637+
>
1638+
<div class="v-color-picker__canvas"
1639+
style="width: 300px; height: 150px;"
1640+
>
1641+
<canvas width="300"
1642+
height="150"
1643+
>
1644+
</canvas>
1645+
<div class="v-color-picker__canvas-dot"
1646+
style="width: 10px; height: 10px; transform: translate(295px, -5px);"
1647+
>
1648+
</div>
1649+
</div>
1650+
<div class="v-color-picker__controls">
1651+
<div class="v-color-picker__preview">
1652+
<div class="v-color-picker__dot">
1653+
<div style="background: rgb(255, 0, 0);">
1654+
</div>
1655+
</div>
1656+
<div class="v-color-picker__sliders">
1657+
<div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
1658+
<div class="v-input__control">
1659+
<div class="v-input__slot">
1660+
<div class="v-slider v-slider--horizontal theme--light">
1661+
<input value="0"
1662+
id="input-79"
1663+
readonly="readonly"
1664+
tabindex="-1"
1665+
>
1666+
<div class="v-slider__track-container">
1667+
<div class="v-slider__track-background primary lighten-3"
1668+
style="right: 0px;"
1669+
>
1670+
</div>
1671+
<div class="v-slider__track-fill primary"
1672+
style="left: 0px; width: 0%;"
1673+
>
1674+
</div>
1675+
</div>
1676+
<div role="slider"
1677+
tabindex="0"
1678+
aria-valuemin="0"
1679+
aria-valuemax="360"
1680+
aria-valuenow="0"
1681+
aria-readonly="false"
1682+
aria-orientation="horizontal"
1683+
class="v-slider__thumb-container grey--text text--lighten-2"
1684+
style="left: 0%;"
1685+
>
1686+
<div class="v-slider__thumb grey lighten-2">
1687+
</div>
1688+
</div>
1689+
</div>
1690+
</div>
1691+
</div>
1692+
</div>
1693+
<div class="v-input v-color-picker__alpha v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-input__slider v-color-picker__track">
1694+
<div class="v-input__control">
1695+
<div class="v-input__slot">
1696+
<div class="v-slider v-slider--horizontal theme--light">
1697+
<input value="1"
1698+
id="input-80"
1699+
readonly="readonly"
1700+
tabindex="-1"
1701+
>
1702+
<div class="v-slider__track-container">
1703+
<div class="v-slider__track-background primary lighten-3"
1704+
style="right: 0px;"
1705+
>
1706+
</div>
1707+
<div class="v-slider__track-fill primary"
1708+
style="left: 0px; width: 100%;"
1709+
>
1710+
</div>
1711+
</div>
1712+
<div role="slider"
1713+
tabindex="0"
1714+
aria-valuemin="0"
1715+
aria-valuemax="1"
1716+
aria-valuenow="1"
1717+
aria-readonly="false"
1718+
aria-orientation="horizontal"
1719+
class="v-slider__thumb-container grey--text text--lighten-2"
1720+
style="left: 100%;"
1721+
>
1722+
<div class="v-slider__thumb grey lighten-2">
1723+
</div>
1724+
</div>
1725+
</div>
1726+
</div>
1727+
</div>
1728+
</div>
1729+
</div>
1730+
</div>
1731+
<div class="v-color-picker__edit">
1732+
<div class="v-color-picker__input">
1733+
<input type="number"
1734+
min="0"
1735+
max="255"
1736+
step="1"
1737+
>
1738+
<span>
1739+
R
1740+
</span>
1741+
</div>
1742+
<div class="v-color-picker__input">
1743+
<input type="number"
1744+
min="0"
1745+
max="255"
1746+
step="1"
1747+
>
1748+
<span>
1749+
G
1750+
</span>
1751+
</div>
1752+
<div class="v-color-picker__input">
1753+
<input type="number"
1754+
min="0"
1755+
max="255"
1756+
step="1"
1757+
>
1758+
<span>
1759+
B
1760+
</span>
1761+
</div>
1762+
<div class="v-color-picker__input">
1763+
<input type="number"
1764+
min="0"
1765+
max="1"
1766+
step="0.01"
1767+
>
1768+
<span>
1769+
A
1770+
</span>
1771+
</div>
1772+
<button type="button"
1773+
class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
1774+
>
1775+
<span class="v-btn__content">
1776+
<i aria-hidden="true"
1777+
class="v-icon notranslate material-icons theme--light"
1778+
>
1779+
$unfold
1780+
</i>
1781+
</span>
1782+
</button>
1783+
</div>
1784+
</div>
1785+
</div>
1786+
`;

‎packages/vuetify/src/components/VColorPicker/util/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@ export function parseColor (color: any, oldColor: VColorPickerColor | null) {
127127
}
128128

129129
export function extractColor (color: VColorPickerColor, input: any) {
130+
if (input == null) return color
131+
130132
if (typeof input === 'string') {
131133
return input.length === 7 ? color.hex : color.hexa
132134
}

0 commit comments

Comments
 (0)