feat(utils): refine Vlossom utils (#167)

.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+visualizer.html
 coverage
 node_modules
 dist

packages/vlossom/package.json

@@ -22,8 +22,8 @@
     "scripts": {
         "dev": "vite --port 3000",
         "build": "vue-tsc && vite build",
-        "test": "vitest run --reporter=verbose",
-        "test:watch": "vitest --reporter=verbose",
+        "test": "vitest run",
+        "test:watch": "vitest",
         "test:coverage": "vitest run --coverage",
         "test:snapshot": "vitest run --update",
         "lint": "eslint --ext .js,.ts,vue --ignore-path ../../.gitignore .",
@@ -76,6 +76,7 @@
         "chromatic": "^11.3.0",
         "jsdom": "^24.0.0",
         "ress": "^5.0.2",
+        "rollup-plugin-visualizer": "^5.12.0",
         "sass": "^1.75.0",
         "storybook": "^8.0.8",
         "typescript": "^5.4.5",

packages/vlossom/src/components/vs-drawer/VsDrawer.vue

@@ -31,8 +31,8 @@ import { defineComponent, ref, toRefs, watch, computed, type PropType } from 'vu
 import { useColorScheme, useStyleSet } from '@/composables';
 import VsFocusTrap from '@/components/vs-focus-trap/VsFocusTrap.vue';
 import { VsDialogNode } from '@/nodes';
-import { VsComponent, Placement, Size, SIZES, type ColorScheme } from '@/declaration';
-import { propValidationUtil } from '@/utils/prop-validation';
+import { VsComponent, Placement, Size, SIZES, type ColorScheme, PLACEMENTS } from '@/declaration';
+import { utils } from '@/utils';
 
 import type { VsDrawerStyleSet } from './types';
 
@@ -53,7 +53,7 @@ export default defineComponent({
         placement: {
             type: String as PropType<Placement>,
             default: 'left',
-            validator: (val: Placement) => propValidationUtil.validatePlacement(name, val),
+            validator: (val: Placement) => utils.props.checkPropExist<Placement>(name, 'placement', PLACEMENTS, val),
         },
         size: { type: String as PropType<Size | string>, default: '' },
         // v-model

packages/vlossom/src/components/vs-focus-trap/VsFocusTrap.vue

@@ -14,7 +14,7 @@ import {
     type PropType,
 } from 'vue';
 import { VsComponent } from '@/declaration';
-import { logUtil } from '@/utils/log';
+import { utils } from '@/utils';
 
 export default defineComponent({
     name: VsComponent.VsFocusTrap,
@@ -123,7 +123,7 @@ export default defineComponent({
 
             const vNodes = slots.default().filter((vnode) => vnode.type !== Comment);
             if (vNodes.length !== 1) {
-                logUtil.logError('VsFocusTrap', 'FocusTrap can only contain one child');
+                utils.log.error('vs-focus-trap', 'FocusTrap can only contain one child');
 
                 return vNodes;
             }

packages/vlossom/src/components/vs-index-view/VsIndexItem.vue

@@ -7,7 +7,7 @@
 <script lang="ts">
 import { defineComponent, getCurrentInstance } from 'vue';
 import { VsComponent } from '@/declaration';
-import { logUtil } from '@/utils/log';
+import { utils } from '@/utils';
 
 const name = VsComponent.VsIndexItem;
 
@@ -17,7 +17,7 @@ export default defineComponent({
         const instance = getCurrentInstance();
         const key = instance?.vnode.key;
         if (!key) {
-            logUtil.logWarning(name, 'key is required');
+            utils.log.warning(name, 'key is required');
         }
     },
 });

packages/vlossom/src/components/vs-pagination/VsPagination.vue

@@ -54,7 +54,7 @@ import { ColorScheme, VsComponent } from '@/declaration';
 import { useColorScheme, useStyleSet } from '@/composables';
 import { VsIcon } from '@/icons';
 import { VsPaginationStyleSet } from './types';
-import { logUtil } from '@/utils/log';
+import { utils } from '@/utils';
 
 const name = VsComponent.VsPagination;
 export default defineComponent({
@@ -72,7 +72,7 @@ export default defineComponent({
             validator: (value: number) => {
                 const isValid = value > 0;
                 if (!isValid) {
-                    logUtil.logPropError(name, 'length', 'length must be greater than 0');
+                    utils.log.propError(name, 'length', 'length must be greater than 0');
                 }
                 return isValid;
             },
@@ -83,7 +83,7 @@ export default defineComponent({
             validator: (value: number) => {
                 const isValid = value > 0;
                 if (!isValid) {
-                    logUtil.logPropError(name, 'showingLength', 'showingLength must be greater than 0');
+                    utils.log.propError(name, 'showingLength', 'showingLength must be greater than 0');
                 }
                 return isValid;
             },

packages/vlossom/src/components/vs-select/VsSelect.vue

@@ -206,7 +206,6 @@ import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
 import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue';
 import { VsIcon } from '@/icons';
 import { utils } from '@/utils';
-import { logUtil } from '@/utils/log';
 import VsChip from '@/components/vs-chip/VsChip.vue';
 
 import type { VsChipStyleSet } from '@/components/vs-chip/types';
@@ -227,7 +226,7 @@ export default defineComponent({
             default: false,
             validator: (value, props) => {
                 if (!props.multiple && value) {
-                    logUtil.logPropError(name, 'closableChips', 'closableChips can only be used with multiple prop');
+                    utils.log.propError(name, 'closable-chips', 'closableChips can only be used with multiple prop');
                     return false;
                 }
                 return true;
@@ -238,7 +237,7 @@ export default defineComponent({
             default: false,
             validator: (value, props) => {
                 if (!props.multiple && value) {
-                    logUtil.logPropError(name, 'collapseChips', 'collapseChips can only be used with multiple prop');
+                    utils.log.propError(name, 'collapse-chips', 'collapseChips can only be used with multiple prop');
                     return false;
                 }
                 return true;
@@ -251,7 +250,7 @@ export default defineComponent({
             validator: (value: number) => {
                 const isValid = value >= 10;
                 if (!isValid) {
-                    logUtil.logPropError(name, 'lazyLoadNum', 'lazyLoadNum must be 10 or more');
+                    utils.log.propError(name, 'lazy-load-num', 'lazyLoadNum must be 10 or more');
                 }
                 return isValid;
             },
@@ -262,7 +261,7 @@ export default defineComponent({
             default: false,
             validator: (value, props) => {
                 if (!props.multiple && value) {
-                    logUtil.logPropError(name, 'selectAll', 'selectAll can only be used with multiple prop');
+                    utils.log.propError(name, 'select-all', 'selectAll can only be used with multiple prop');
                     return false;
                 }
                 return true;

packages/vlossom/src/components/vs-stepper/VsStepper.vue

@@ -39,8 +39,7 @@
 import { computed, defineComponent, toRefs, ref, watch, type Ref, type PropType } from 'vue';
 import { useColorScheme, useStyleSet, getResponsiveProps } from '@/composables';
 import { VsComponent, ColorScheme } from '@/declaration';
-import { objectUtil } from '@/utils/object';
-import { logUtil } from '@/utils/log';
+import { utils } from '@/utils';
 import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue';
 
 import type { VsStepperStyleSet } from './types';
@@ -59,9 +58,9 @@ export default defineComponent({
             type: Array as PropType<string[]>,
             required: true,
             validator: (prop: string[]) => {
-                const isValid = objectUtil.isUniq(prop);
+                const isValid = utils.object.isUniq(prop);
                 if (!isValid) {
-                    logUtil.logPropError(name, 'steps', 'steps with duplicate items are not allowed');
+                    utils.log.propError(name, 'steps', 'steps with duplicate items are not allowed');
                 }
                 return isValid;
             },

packages/vlossom/src/components/vs-tabs/VsTabs.vue

@@ -47,9 +47,7 @@
 import { computed, defineComponent, toRefs, ref, watch, onMounted, onUnmounted, type Ref, type PropType } from 'vue';
 import { useColorScheme, useStyleSet, getResponsiveProps } from '@/composables';
 import { VsComponent, type ColorScheme } from '@/declaration';
-import { objectUtil } from '@/utils/object';
-import { domUtil } from '@/utils/dom';
-import { logUtil } from '@/utils/log';
+import { utils } from '@/utils';
 import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue';
 import { VsIcon } from '@/icons';
 
@@ -72,7 +70,7 @@ export default defineComponent({
             default: false,
             validator: (value: ScrollButton, props) => {
                 if (!props.scrollable && value) {
-                    logUtil.logPropError(name, 'scrollButtons', 'scrollable must be true to use scrollButtons');
+                    utils.log.propError(name, 'scroll-buttons', 'scrollable must be true to use scrollButtons');
                     return false;
                 }
                 return true;
@@ -82,9 +80,9 @@ export default defineComponent({
             type: Array as PropType<string[]>,
             required: true,
             validator: (prop: string[]) => {
-                const isValid = objectUtil.isUniq(prop);
+                const isValid = utils.object.isUniq(prop);
                 if (!isValid) {
-                    logUtil.logPropError(name, 'tabs', 'tabs with duplicate items are not allowed');
+                    utils.log.propError(name, 'tabs', 'tabs with duplicate items are not allowed');
                 }
                 return isValid;
             },
@@ -220,7 +218,7 @@ export default defineComponent({
             }
 
             if (scrollButtons.value === 'auto') {
-                return !domUtil.hasTouchScreen() && scrollCount.value < totalLength.value;
+                return !utils.dom.hasTouchScreen() && scrollCount.value < totalLength.value;
             }
 
             return scrollButtons.value;

packages/vlossom/src/components/vs-text-wrap/VsTextWrap.vue

@@ -35,9 +35,8 @@
 <script lang="ts">
 import { defineComponent, ref, toRefs, computed, type PropType, type Ref } from 'vue';
 import { useColorScheme, useStyleSet } from '@/composables';
-import { VsComponent, type ColorScheme, type Placement, type Align } from '@/declaration';
+import { VsComponent, type ColorScheme, type Placement, type Align, ALIGNS, PLACEMENTS } from '@/declaration';
 import { utils } from '@/utils';
-import { propValidationUtil } from '@/utils/prop-validation';
 import { VsIcon } from '@/icons';
 
 import type { VsTextWrapStyleSet } from './types';
@@ -53,15 +52,15 @@ export default defineComponent({
         align: {
             type: String as PropType<Align>,
             default: 'center',
-            validator: (val: Align) => propValidationUtil.validateAlign(name, val),
+            validator: (val: Align) => utils.props.checkPropExist<Align>(name, 'align', ALIGNS, val),
         },
         copy: { type: Boolean, default: false },
         link: { type: String, default: '' },
         noTooltip: { type: Boolean, default: false },
         placement: {
             type: String as PropType<Placement>,
             default: 'top',
-            validator: (val: Placement) => propValidationUtil.validatePlacement(name, val),
+            validator: (val: Placement) => utils.props.checkPropExist<Placement>(name, 'placement', PLACEMENTS, val),
         },
         width: { type: [String, Number], default: '' },
     },

packages/vlossom/src/components/vs-tooltip/VsTooltip.vue

@@ -28,9 +28,9 @@
 <script lang="ts">
 import { defineComponent, toRefs, ref, computed, watch, nextTick, onBeforeUnmount, type PropType, type Ref } from 'vue';
 import { useColorScheme, useStyleSet } from '@/composables';
-import { VsComponent, type ColorScheme, type Placement, type Align } from '@/declaration';
+import { VsComponent, type ColorScheme, type Placement, type Align, PLACEMENTS, ALIGNS } from '@/declaration';
 import { usePositioning, useOverlay } from '@/composables/anchor-positioning-composable';
-import { propValidationUtil } from '@/utils/prop-validation';
+import { utils } from '@/utils';
 
 import type { VsTooltipStyleSet } from './types';
 
@@ -44,7 +44,7 @@ export default defineComponent({
         align: {
             type: String as PropType<Align>,
             default: 'center',
-            validator: (val: Align) => propValidationUtil.validateAlign(name, val),
+            validator: (val: Align) => utils.props.checkPropExist<Align>(name, 'align', ALIGNS, val),
         },
         clickable: { type: Boolean, default: false },
         contentsHover: { type: Boolean, default: false },
@@ -56,7 +56,7 @@ export default defineComponent({
         placement: {
             type: String as PropType<Placement>,
             default: 'top',
-            validator: (val: Placement) => propValidationUtil.validatePlacement(name, val),
+            validator: (val: Placement) => utils.props.checkPropExist<Placement>(name, 'placement', PLACEMENTS, val),
         },
     },
     setup(props) {

packages/vlossom/src/composables/__tests__/input-option-composable.test.ts

@@ -26,6 +26,17 @@ describe('input option composable', () => {
             expect(getOptionLabel(options.value[0])).toBe('test');
         });
 
+        it('option이 object이고 optionLabel이 지정되었어도 실제 label이 없으면 JSON.stringify(option)을 반환한다', () => {
+            // given
+            const options = ref([{ label: 'test' }]);
+
+            // when
+            const { getOptionLabel } = useInputOption(ref('dummy'), options, ref('empty-label'), ref(''));
+
+            // then
+            expect(getOptionLabel(options.value[0])).toBe('{"label":"test"}');
+        });
+
         it('option이 object이고 optionLabel이 없으면 JSON.stringify(option)을 반환한다', () => {
             // given
             const options = ref([{ label: 'test' }]);
@@ -72,6 +83,17 @@ describe('input option composable', () => {
             expect(getOptionValue(options.value[0])).toBe('test-value');
         });
 
+        it('option이 object이고 optionValue가 지정되더라도 value 자체가 없다면 option 그대로 반환한다', () => {
+            // given
+            const options = ref([{ label: 'test', value: 'test-value' }]);
+
+            // when
+            const { getOptionValue } = useInputOption(ref('dummy'), options, ref(''), ref('empty-value'));
+
+            // then
+            expect(getOptionValue(options.value[0])).toBe(options.value[0]);
+        });
+
         it('option이 object이고 optionValue가 없으면 option 그대로 반환한다', () => {
             // given
             const options = ref([{ label: 'test' }]);

packages/vlossom/src/composables/anchor-positioning-composable.ts

@@ -1,6 +1,5 @@
 import { Ref, onBeforeMount, ref, nextTick } from 'vue';
 import { utils } from '@/utils';
-import { logUtil } from '@/utils/log';
 import type { AttachInfo, Placement, Align } from '@/declaration';
 
 export function usePositioning(anchor: Ref<HTMLElement>, attachment: Ref<HTMLElement>) {
@@ -106,7 +105,7 @@ export function usePositioning(anchor: Ref<HTMLElement>, attachment: Ref<HTMLEle
                 document.addEventListener('scroll', throttledComputePosition, true);
                 window.addEventListener('resize', throttledComputePosition, true);
             } catch (error: any) {
-                logUtil.logError('anchor positioning', error);
+                utils.log.error('anchor positioning', error);
             }
         });
     }

packages/vlossom/src/composables/input-composable.ts

@@ -1,7 +1,7 @@
 import { ComputedRef, PropType, Ref, computed, nextTick, onMounted, ref, watch } from 'vue';
-import * as _ from 'lodash-es';
 import { useInputForm } from './input-form-composable';
 import { UIState } from '@/declaration';
+import { utils } from '@/utils';
 
 import type { StateMessage, Rule, Message, InputComponentOptions } from '@/declaration';
 
@@ -51,7 +51,7 @@ export function getInputProps<T = unknown, K extends Array<keyof VsInputProps<T>
         },
     );
 
-    return _.omit(inputProps, excludes) as Omit<VsInputProps<T>, K[number]>;
+    return utils.object.omit(inputProps, excludes) as Omit<VsInputProps<T>, K[number]>;
 }
 
 export function useInput<T = unknown>(