fix(*): misc cleanup (#757)

Components should use new `getSizeFromString` function.

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),
       }
     })
 

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() {

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(() => {

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)

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 {