From 47f072b278e86eea723b0606422ee0df0b69f6d9 Mon Sep 17 00:00:00 2001
From: Kai Arrowood <kai.arrowood@konghq.com>
Date: Thu, 11 Aug 2022 13:00:51 -0400
Subject: [PATCH] fix(*): misc cleanup (#757)

Components should use new `getSizeFromString` function.
---
 src/components/KMenu/KMenu.vue       |  7 +++++--
 src/components/KPop/KPop.vue         | 11 +++++++----
 src/components/KSelect/KSelect.vue   |  9 ++++-----
 src/composables/useUtilities.spec.ts |  7 +++++++
 src/composables/useUtilities.ts      |  4 ++--
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/KMenu/KMenu.vue b/src/components/KMenu/KMenu.vue
index b63ff02506..77596ec79c 100644
--- a/src/components/KMenu/KMenu.vue
+++ b/src/components/KMenu/KMenu.vue
@@ -37,10 +37,13 @@
 
 <script lang="ts">
 import { defineComponent, computed, PropType } from 'vue'
+import useUtilities from '@/composables/useUtilities'
 import KMenuItem from '@/components/KMenu/KMenuItem.vue'
-import type { MenuItem } from './KMenuItem.vue'
+import type { MenuItem } from '@/components/KMenu/KMenuItem.vue'
 import KMenuDivider from '@/components/KMenu/KMenuDivider.vue'
 
+const { getSizeFromString } = useUtilities()
+
 export interface KMenuItemType extends MenuItem {
   expandable: boolean
   type: 'string' | 'number' | 'divider'
@@ -75,7 +78,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const widthStyle = computed((): Record<string, string> => {
       return {
-        width: props.width === 'auto' || props.width.endsWith('%') || props.width.endsWith('px') ? props.width : props.width + 'px',
+        width: getSizeFromString(props.width),
       }
     })
 
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 0d91f5ac65..930c2753e8 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -115,9 +115,12 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { defineComponent } from 'vue'
+import { v1 as uuidv1 } from 'uuid'
 import Popper from 'popper.js'
+import useUtilities from '@/composables/useUtilities'
 import KButton from '@/components/KButton/KButton.vue'
-import { v1 as uuidv1 } from 'uuid'
+
+const { getSizeFromString } = useUtilities()
 
 export const placements = {
   auto: 'auto',
@@ -296,9 +299,9 @@ export default defineComponent({
   computed: {
     popoverStyle: function() {
       return {
-        width: this.width === 'auto' || this.width.endsWith('%') || this.width.endsWith('px') ? this.width : this.width + 'px',
-        maxWidth: this.maxWidth === 'auto' || this.maxWidth.endsWith('%') || this.maxWidth.endsWith('vw') || this.maxWidth.endsWith('px') ? this.maxWidth : this.maxWidth + 'px',
-        maxHeight: this.maxHeight === 'auto' || this.maxHeight.endsWith('%') || this.maxHeight.endsWith('vh') || this.maxHeight.endsWith('px') ? this.maxHeight : this.maxHeight + 'px',
+        width: getSizeFromString(this.width),
+        maxWidth: getSizeFromString(this.maxWidth),
+        maxHeight: getSizeFromString(this.maxHeight),
       }
     },
     popoverClassObj: function() {
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index aa94e77782..f22735f93d 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -174,6 +174,7 @@
 <script lang="ts">
 import { defineComponent, ref, Ref, computed, watch, PropType, nextTick } from 'vue'
 import { v1 as uuidv1 } from 'uuid'
+import useUtilities from '@/composables/useUtilities'
 import KButton from '@/components/KButton/KButton.vue'
 import KIcon from '@/components/KIcon/KIcon.vue'
 import KInput from '@/components/KInput/KInput.vue'
@@ -182,6 +183,8 @@ import KPop from '@/components/KPop/KPop.vue'
 import KToggle from '@/components/KToggle'
 import KSelectItem from '@/components/KSelect/KSelectItem.vue'
 
+const { getSizeFromString } = useUtilities()
+
 const defaultKPopAttributes = {
   popoverClasses: 'k-select-popover mt-0',
   popoverTimeout: 0,
@@ -361,11 +364,7 @@ export default defineComponent({
         w = props.width
       }
 
-      if (w !== 'auto' && !w.endsWith('%') && !w.endsWith('px')) {
-        w += 'px'
-      }
-
-      return w
+      return getSizeFromString(w)
     })
 
     const widthStyle = computed(() => {
diff --git a/src/composables/useUtilities.spec.ts b/src/composables/useUtilities.spec.ts
index 088112fef1..0893a81a4c 100644
--- a/src/composables/useUtilities.spec.ts
+++ b/src/composables/useUtilities.spec.ts
@@ -204,6 +204,13 @@ describe('getSizeFromString(): ', () => {
     expect(result).equal(`${sizeStr}`)
   })
 
+  it('handles vh', () => {
+    const sizeStr = '500vh'
+    const result = getSizeFromString(sizeStr)
+
+    expect(result).equal(`${sizeStr}`)
+  })
+
   it('handles vw', () => {
     const sizeStr = '500vw'
     const result = getSizeFromString(sizeStr)
diff --git a/src/composables/useUtilities.ts b/src/composables/useUtilities.ts
index bad0f2b235..7c99a8dc2e 100644
--- a/src/composables/useUtilities.ts
+++ b/src/composables/useUtilities.ts
@@ -171,8 +171,8 @@ export default function useUtilities() {
     }
   }
 
-  const getSizeFromString = (sizeStr: string) => {
-    return sizeStr === 'auto' || sizeStr.endsWith('%') || sizeStr.endsWith('vw') || sizeStr.endsWith('px') ? sizeStr : sizeStr + 'px'
+  const getSizeFromString = (sizeStr: string): string => {
+    return sizeStr === 'auto' || sizeStr.endsWith('%') || sizeStr.endsWith('vw') || sizeStr.endsWith('vh') || sizeStr.endsWith('px') ? sizeStr : sizeStr + 'px'
   }
 
   return {