feat(vcolorpicker): add hideSliders prop (#12618)

Added the ability to hide sliders in VColorPicker. resolves #11138
vuetifyjs · Nov 17, 2020 · e35d79b · e35d79b
1 parent 8f1cf64
commit e35d79b
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 12 deletions.
diff --git a/packages/api-generator/src/locale/en/v-color-picker.json b/packages/api-generator/src/locale/en/v-color-picker.json
@@ -5,6 +5,7 @@
     "dotSize": "Changes the size of the selection dot on the canvas",
     "flat": "Removes elevation",
     "hideCanvas": "Hides canvas",
+    "hideSliders": "Hides sliders",
     "hideInputs": "Hides inputs",
     "hideModeSwitch": "Hides mode switch",
     "mode": "Sets mode of inputs. Available modes are 'rgba', 'hsla', and 'hexa'. Can be synced with the `.sync` modifier.",

diff --git a/packages/docs/src/examples/v-color-picker/usage.vue b/packages/docs/src/examples/v-color-picker/usage.vue
@@ -33,6 +33,7 @@
         booleans: [
           'disabled',
           'hide-canvas',
+          'hide-sliders',
           'hide-inputs',
           'hide-mode-switch',
           'show-swatches',

diff --git a/packages/docs/src/pages/en/components/color-pickers.md b/packages/docs/src/pages/en/components/color-pickers.md
@@ -41,7 +41,7 @@ Adjust the elevation of the `v-color-picker` component using the **elevation** o
 
 #### Inputs
 
-The number inputs can be hidden with the `hide-inputs` prop. You can also hide the mode switch icon with the `hide-mode-switch` prop. The mode can also be controlled externally through the `mode` prop.
+The number inputs can be hidden with the `hide-inputs` prop, and the sliders can be hidden with the `hide-sliders` prop. You can also hide the mode switch icon with the `hide-mode-switch` prop. The mode can also be controlled externally through the `mode` prop.
 
 <example file="v-color-picker/prop-inputs" />
 

diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.ts b/packages/vuetify/src/components/VColorPicker/VColorPicker.ts
@@ -35,6 +35,7 @@ export default mixins(Elevatable, Themeable).extend({
     },
     flat: Boolean,
     hideCanvas: Boolean,
+    hideSliders: Boolean,
     hideInputs: Boolean,
     hideModeSwitch: Boolean,
     mode: {
@@ -106,7 +107,7 @@ export default mixins(Elevatable, Themeable).extend({
       return this.$createElement('div', {
         staticClass: 'v-color-picker__controls',
       }, [
-        this.genPreview(),
+        !this.hideSliders && this.genPreview(),
         !this.hideInputs && this.genEdit(),
       ])
     },
@@ -166,7 +167,7 @@ export default mixins(Elevatable, Themeable).extend({
       },
     }, [
       !this.hideCanvas && this.genCanvas(),
-      this.genControls(),
+      (!this.hideSliders || !this.hideInputs) && this.genControls(),
       this.showSwatches && this.genSwatches(),
     ])
   },

diff --git a/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts b/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.ts
@@ -71,6 +71,17 @@ describe('VColorPicker.ts', () => {
     expect(wrapper.find('.v-color-picker__canvas').exists()).toBe(false)
   })
 
+  it('should hide sliders', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        hideSliders: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-color-picker__preview').exists()).toBe(false)
+  })
+
   it('should hide inputs', () => {
     const wrapper = mountFunction({
       propsData: {
@@ -82,6 +93,20 @@ describe('VColorPicker.ts', () => {
     expect(wrapper.find('.v-color-picker__edit').exists()).toBe(false)
   })
 
+  it('should hide controls', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        hideInputs: true,
+        hideSliders: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.v-color-picker__edit').exists()).toBe(false)
+    expect(wrapper.find('.v-color-picker__preview').exists()).toBe(false)
+    expect(wrapper.find('.v-color-picker__controls').exists()).toBe(false)
+  })
+
   it('should return hex if given hex', async () => {
     const fn = jest.fn()
     const wrapper = mountFunction({

diff --git a/...ges/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap b/...ges/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPicker.spec.ts.snap
@@ -296,6 +296,25 @@ exports[`VColorPicker.ts should hide canvas 1`] = `
 </div>
 `;
 
+exports[`VColorPicker.ts should hide controls 1`] = `
+<div class="v-color-picker v-sheet theme--light theme--light"
+     style="max-width: 300px;"
+>
+  <div class="v-color-picker__canvas"
+       style="width: 300px; height: 150px;"
+  >
+    <canvas width="300"
+            height="150"
+    >
+    </canvas>
+    <div class="v-color-picker__canvas-dot"
+         style="width: 10px; height: 10px; transform: translate(295px, -5px);"
+    >
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VColorPicker.ts should hide inputs 1`] = `
 <div class="v-color-picker v-sheet theme--light theme--light"
      style="max-width: 300px;"
@@ -324,7 +343,7 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
                 <input value="0"
-                       id="input-45"
+                       id="input-52"
                        readonly="readonly"
                        tabindex="-1"
                 >
@@ -360,7 +379,7 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
                 <input value="1"
-                       id="input-46"
+                       id="input-53"
                        readonly="readonly"
                        tabindex="-1"
                 >
@@ -397,6 +416,80 @@ exports[`VColorPicker.ts should hide inputs 1`] = `
 </div>
 `;
 
+exports[`VColorPicker.ts should hide sliders 1`] = `
+<div class="v-color-picker v-sheet theme--light theme--light"
+     style="max-width: 300px;"
+>
+  <div class="v-color-picker__canvas"
+       style="width: 300px; height: 150px;"
+  >
+    <canvas width="300"
+            height="150"
+    >
+    </canvas>
+    <div class="v-color-picker__canvas-dot"
+         style="width: 10px; height: 10px; transform: translate(295px, -5px);"
+    >
+    </div>
+  </div>
+  <div class="v-color-picker__controls">
+    <div class="v-color-picker__edit">
+      <div class="v-color-picker__input">
+        <input type="number"
+               min="0"
+               max="255"
+               step="1"
+        >
+        <span>
+          R
+        </span>
+      </div>
+      <div class="v-color-picker__input">
+        <input type="number"
+               min="0"
+               max="255"
+               step="1"
+        >
+        <span>
+          G
+        </span>
+      </div>
+      <div class="v-color-picker__input">
+        <input type="number"
+               min="0"
+               max="255"
+               step="1"
+        >
+        <span>
+          B
+        </span>
+      </div>
+      <div class="v-color-picker__input">
+        <input type="number"
+               min="0"
+               max="1"
+               step="0.01"
+        >
+        <span>
+          A
+        </span>
+      </div>
+      <button type="button"
+              class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+      >
+        <span class="v-btn__content">
+          <i aria-hidden="true"
+             class="v-icon notranslate material-icons theme--light"
+          >
+            $unfold
+          </i>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VColorPicker.ts should not show alpha controls if given hex value without alpha 1`] = `
 <div class="v-color-picker v-sheet theme--light theme--light"
      style="max-width: 300px;"
@@ -425,7 +518,7 @@ exports[`VColorPicker.ts should not show alpha controls if given hex value witho
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
                 <input value="120"
-                       id="input-70"
+                       id="input-81"
                        readonly="readonly"
                        tabindex="-1"
                 >
@@ -687,7 +780,7 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
                 <input value="0"
-                       id="input-89"
+                       id="input-100"
                        readonly="readonly"
                        tabindex="-1"
                 >
@@ -723,7 +816,7 @@ exports[`VColorPicker.ts should render flat picker 1`] = `
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
                 <input value="1"
-                       id="input-90"
+                       id="input-101"
                        readonly="readonly"
                        tabindex="-1"
                 >
@@ -841,7 +934,7 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
                 <input value="0"
-                       id="input-99"
+                       id="input-110"
                        readonly="readonly"
                        tabindex="-1"
                 >
@@ -877,7 +970,7 @@ exports[`VColorPicker.ts should render picker with elevation 1`] = `
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
                 <input value="1"
-                       id="input-100"
+                       id="input-111"
                        readonly="readonly"
                        tabindex="-1"
                 >
@@ -1967,7 +2060,7 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
                 <input value="0"
-                       id="input-79"
+                       id="input-90"
                        readonly="readonly"
                        tabindex="-1"
                 >
@@ -2003,7 +2096,7 @@ exports[`VColorPicker.ts should work correctly when initial value is null 1`] =
             <div class="v-input__slot">
               <div class="v-slider v-slider--horizontal theme--light">
                 <input value="1"
-                       id="input-80"
+                       id="input-91"
                        readonly="readonly"
                        tabindex="-1"
                 >