fix(QColorPicker): Fix input (#189)

altai-ui · Nov 2, 2021 · 0fbe9ce · 0fbe9ce
1 parent 6877986
commit 0fbe9ce
Show file tree

Hide file tree

Showing 14 changed files with 287 additions and 243 deletions.
diff --git a/src/qComponents/QColorPicker/src/QColorAlphaSlider/QColorAlphaSlider.vue b/src/qComponents/QColorPicker/src/QColorAlphaSlider/QColorAlphaSlider.vue
@@ -18,39 +18,49 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import {
+  defineComponent,
+  ref,
+  computed,
+  onMounted,
+  watch,
+  inject,
+  nextTick
+} from 'vue';
+
+import { colord } from 'colord';
 
 import type { Nullable } from '#/helpers';
 
 import draggable from '../utils/draggable';
-import type {
-  QColorAlphaSliderProps,
-  QColorAlphaSliderInstance
-} from './types';
+import type { QPickerDropdownProvider } from '../QPickerDropdown';
+import type { QColorAlphaSliderInstance } from './types';
 
 export default defineComponent({
   name: 'QColorAlphaSlider',
   componentName: 'QColorAlphaSlider',
 
-  props: {
-    color: {
-      type: String,
-      required: true
-    },
-    alpha: {
-      type: Number,
-      required: true
-    }
-  },
+  emits: ['change'],
 
-  emits: ['update:alpha'],
+  setup(_, ctx): QColorAlphaSliderInstance {
+    const qPickerDropdown = inject<QPickerDropdownProvider>(
+      'qPickerDropdown',
+      {} as QPickerDropdownProvider
+    );
 
-  setup(props: QColorAlphaSliderProps, ctx): QColorAlphaSliderInstance {
     const thumbLeft = ref<number>(0);
 
-    const barStyles = computed<Record<string, string>>(() => ({
-      backgroundImage: `linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, ${props.color})`
-    }));
+    const barStyles = computed<Record<string, string>>(() => {
+      const color = colord({
+        h: qPickerDropdown.hsvaModel.hue,
+        s: qPickerDropdown.hsvaModel.saturation,
+        v: qPickerDropdown.hsvaModel.value
+      }).toRgbString();
+
+      return {
+        backgroundImage: `linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, ${color})`
+      };
+    });
 
     const thumbStyles = computed<Record<string, string>>(() => ({
       left: `${thumbLeft.value}px`
@@ -75,13 +85,11 @@ export default defineComponent({
           100
       );
 
-      ctx.emit('update:alpha', alpha);
+      ctx.emit('change', { ...qPickerDropdown.hsvaModel, alpha });
     };
 
     const handleBarClick = (event: MouseEvent): void => {
-      if (event.target !== thumb.value) {
-        handleDrag(event);
-      }
+      if (event.target !== thumb.value) handleDrag(event);
     };
 
     const getThumbLeft = (): number => {
@@ -90,7 +98,7 @@ export default defineComponent({
       if (!rootElement || !thumbElement) return 0;
 
       return Math.round(
-        (props.alpha *
+        (qPickerDropdown.hsvaModel.alpha *
           (rootElement.offsetWidth - thumbElement.offsetWidth * 1.5)) /
           100
       );
@@ -101,22 +109,18 @@ export default defineComponent({
     };
 
     watch(
-      () => props.alpha,
-      () => {
+      () => qPickerDropdown.hsvaModel.alpha,
+      async () => {
+        await nextTick();
         update();
       },
       { immediate: true }
     );
 
     onMounted(() => {
-      if (!bar.value || !thumb.value) return;
-
-      const dragConfig = {
-        drag: handleDrag,
-        end: handleDrag
-      };
-      draggable(bar.value, dragConfig);
-      draggable(thumb.value, dragConfig);
+      if (bar.value) {
+        draggable(bar.value, { drag: handleDrag, end: handleDrag });
+      }
     });
 
     return {
@@ -125,7 +129,8 @@ export default defineComponent({
       bar,
       barStyles,
       thumbStyles,
-      handleBarClick
+      handleBarClick,
+      update
     };
   }
 });

diff --git a/src/qComponents/QColorPicker/src/QColorAlphaSlider/index.ts b/src/qComponents/QColorPicker/src/QColorAlphaSlider/index.ts
@@ -1,7 +1,4 @@
 import QColorAlphaSlider from './QColorAlphaSlider.vue';
 
 export default QColorAlphaSlider;
-export type {
-  QColorAlphaSliderProps,
-  QColorAlphaSliderInstance
-} from './types';
+export type { QColorAlphaSliderInstance } from './types';
diff --git a/src/qComponents/QColorPicker/src/QColorAlphaSlider/types.ts b/src/qComponents/QColorPicker/src/QColorAlphaSlider/types.ts
@@ -2,16 +2,12 @@ import type { Ref, ComputedRef } from 'vue';
 
 import type { Nullable } from '#/helpers';
 
-export interface QColorAlphaSliderProps {
-  color: string;
-  alpha: number;
-}
-
 export interface QColorAlphaSliderInstance {
   root: Ref<Nullable<HTMLElement>>;
   thumb: Ref<Nullable<HTMLElement>>;
   bar: Ref<Nullable<HTMLElement>>;
   barStyles: ComputedRef<Record<string, string>>;
   thumbStyles: ComputedRef<Record<string, string>>;
   handleBarClick: (event: MouseEvent) => void;
+  update: () => void;
 }
diff --git a/src/qComponents/QColorPicker/src/QColorHueSlider/QColorHueSlider.vue b/src/qComponents/QColorPicker/src/QColorHueSlider/QColorHueSlider.vue
@@ -17,27 +17,34 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import {
+  defineComponent,
+  ref,
+  computed,
+  onMounted,
+  watch,
+  nextTick,
+  inject
+} from 'vue';
 
 import type { Nullable } from '#/helpers';
 
 import draggable from '../utils/draggable';
-import type { QColorHueSliderProps, QColorHueSliderInstance } from './types';
+import type { QPickerDropdownProvider } from '../QPickerDropdown';
+import type { QColorHueSliderInstance } from './types';
 
 export default defineComponent({
   name: 'QColorHueSlider',
   componentName: 'QColorHueSlider',
 
-  props: {
-    hue: {
-      type: Number,
-      required: true
-    }
-  },
+  emits: ['change'],
 
-  emits: ['update:hue'],
+  setup(_, ctx): QColorHueSliderInstance {
+    const qPickerDropdown = inject<QPickerDropdownProvider>(
+      'qPickerDropdown',
+      {} as QPickerDropdownProvider
+    );
 
-  setup(props: QColorHueSliderProps, ctx): QColorHueSliderInstance {
     const thumbTop = ref<number>(0);
     const thumbStyles = computed<Record<string, string>>(() => ({
       top: `${thumbTop.value}px`
@@ -62,7 +69,7 @@ export default defineComponent({
           360
       );
 
-      ctx.emit('update:hue', hue);
+      ctx.emit('change', { ...qPickerDropdown.hsvaModel, hue });
     };
 
     const handleBarClick = (event: MouseEvent): void => {
@@ -75,7 +82,7 @@ export default defineComponent({
       if (!rootElement || !thumbElement) return 0;
 
       return Math.round(
-        (props.hue *
+        (qPickerDropdown.hsvaModel.hue *
           (rootElement.offsetHeight - thumbElement.offsetHeight * 1.5)) /
           360
       );
@@ -86,30 +93,27 @@ export default defineComponent({
     };
 
     watch(
-      () => props.hue,
-      () => {
+      () => qPickerDropdown.hsvaModel.hue,
+      async () => {
+        await nextTick();
         update();
       },
       { immediate: true }
     );
 
     onMounted(() => {
-      if (!bar.value || !thumb.value) return;
-
-      const dragConfig = {
-        drag: handleDrag,
-        end: handleDrag
-      };
-      draggable(bar.value, dragConfig);
-      draggable(thumb.value, dragConfig);
+      if (bar.value) {
+        draggable(bar.value, { drag: handleDrag, end: handleDrag });
+      }
     });
 
     return {
       root,
       thumb,
       bar,
       thumbStyles,
-      handleBarClick
+      handleBarClick,
+      update
     };
   }
 });

diff --git a/src/qComponents/QColorPicker/src/QColorHueSlider/index.ts b/src/qComponents/QColorPicker/src/QColorHueSlider/index.ts
@@ -1,4 +1,4 @@
 import QColorHueSlider from './QColorHueSlider.vue';
 
 export default QColorHueSlider;
-export type { QColorHueSliderProps, QColorHueSliderInstance } from './types';
+export type { QColorHueSliderInstance } from './types';
diff --git a/src/qComponents/QColorPicker/src/QColorHueSlider/types.ts b/src/qComponents/QColorPicker/src/QColorHueSlider/types.ts
@@ -2,14 +2,11 @@ import type { Ref, ComputedRef } from 'vue';
 
 import type { Nullable } from '#/helpers';
 
-export interface QColorHueSliderProps {
-  hue: number;
-}
-
 export interface QColorHueSliderInstance {
   root: Ref<Nullable<HTMLElement>>;
   thumb: Ref<Nullable<HTMLElement>>;
   bar: Ref<Nullable<HTMLElement>>;
   thumbStyles: ComputedRef<Record<string, string>>;
   handleBarClick: (event: MouseEvent) => void;
+  update: () => void;
 }
diff --git a/src/qComponents/QColorPicker/src/QColorPicker.vue b/src/qComponents/QColorPicker/src/QColorPicker.vue
@@ -44,7 +44,6 @@
           :style="{ zIndex }"
           @click.stop
           @close="handleClose"
-          @clear="handleClear"
           @pick="handlePick"
         />
       </transition>
@@ -60,6 +59,7 @@ import {
   ref,
   computed,
   watch,
+  nextTick,
   provide
 } from 'vue';
 import { createPopper, Instance, Options } from '@popperjs/core';
@@ -190,14 +190,7 @@ export default defineComponent({
 
     const options = computed<Partial<Options>>(() => ({
       placement: props.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 16]
-          }
-        }
-      ],
+      modifiers: [{ name: 'offset', options: { offset: [0, 16] } }],
       ...props.popperOptions
     }));
 
@@ -211,18 +204,7 @@ export default defineComponent({
       isPickerShown.value = !isPickerShown.value;
     };
 
-    const handleClear = (): void => {
-      ctx.emit('update:modelValue', null);
-      ctx.emit('change', null);
-
-      if (props.modelValue !== null) {
-        qFormItem?.validateField('change');
-      }
-
-      isPickerShown.value = false;
-    };
-
-    const handlePick = (value: string): void => {
+    const handlePick = (value: Nullable<string>): void => {
       ctx.emit('update:modelValue', value);
       ctx.emit('change', value);
 
@@ -236,13 +218,14 @@ export default defineComponent({
     const trigger = ref<Nullable<HTMLElement>>(null);
     const dropdown = ref<UnwrappedInstance<QPickerDropdownInstance>>(null);
 
-    const createPopperJs = (): void => {
+    const createPopperJs = async (): Promise<void> => {
       if (popperJS.value?.destroy) {
         popperJS.value.destroy();
         popperJS.value = null;
       }
 
       if (!trigger.value || !dropdown.value) return;
+      await nextTick();
       popperJS.value = createPopper(
         trigger.value,
         dropdown.value.$el,
@@ -268,8 +251,7 @@ export default defineComponent({
       isPickerShown,
       handleClose,
       handleTriggerClick,
-      handlePick,
-      handleClear
+      handlePick
     };
   }
 });