feat(icons): change icon component usage (#56)

pubg · Jan 18, 2024 · fe7bbf0 · fe7bbf0
1 parent ad4ceae
commit fe7bbf0
Show file tree

Hide file tree

Showing 21 changed files with 137 additions and 83 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -50,7 +50,7 @@
                 "ignoreComments": true,
                 "ignoreTrailingComments": true,
                 "ignoreUrls": true,
-                "ignorePattern": "<.+",
+                "ignorePattern": "(d=\"([\\s\\S]*?)\")|(<.+)",
                 "ignoreRegExpLiterals": true
             }
         ],

diff --git a/packages/vlossom/playground/Playground.vue b/packages/vlossom/playground/Playground.vue
@@ -2,7 +2,7 @@
     <vs-page>
         <template #title>Vlossom Playground</template>
 
-        Hello World
+        Hello Vlossom!
     </vs-page>
 </template>
 

diff --git a/packages/vlossom/src/components/vs-button/VsButton.scss b/packages/vlossom/src/components/vs-button/VsButton.scss
@@ -99,8 +99,6 @@
         pointer-events: none;
 
         .loading-icon {
-            width: 1.5rem;
-            height: 1.5rem;
             animation: rotate 2s linear infinite;
         }
     }

diff --git a/packages/vlossom/src/components/vs-button/VsButton.vue b/packages/vlossom/src/components/vs-button/VsButton.vue
@@ -9,7 +9,7 @@
             <slot />
         </span>
 
-        <rotate-right-icon v-if="loading" aria-label="loading" class="loading-icon" />
+        <rotate-right-icon v-if="loading" aria-label="loading" class="loading-icon" :size="dense ? 20 : 24" />
     </button>
 </template>
 

diff --git a/packages/vlossom/src/components/vs-input/VsInput.scss b/packages/vlossom/src/components/vs-input/VsInput.scss
@@ -55,11 +55,6 @@
         &.number {
             right: 2.2rem;
         }
-
-        .clear-icon {
-            width: 1.2rem;
-            height: 1.2rem;
-        }
     }
 
     .action-button.append + .clear-button {
@@ -88,10 +83,5 @@
         input {
             font-size: var(--vs-input-fontSize, 0.9rem);
         }
-
-        .clear-icon {
-            width: 1rem;
-            height: 1rem;
-        }
     }
 }
diff --git a/packages/vlossom/src/components/vs-input/VsInput.vue b/packages/vlossom/src/components/vs-input/VsInput.vue
@@ -37,7 +37,7 @@
                     :class="{ number: type === InputType.Number }"
                     @click.stop="clearWithFocus()"
                 >
-                    <close-icon class="clear-icon" />
+                    <close-icon :size="dense ? 16 : 20" />
                 </button>
             </div>
         </vs-input-wrapper>

diff --git a/packages/vlossom/src/components/vs-message/VsMessage.vue b/packages/vlossom/src/components/vs-message/VsMessage.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="vs-message">
         {{ message.state }}
-        <!-- <vn-icon class="icon" size="1.6rem">{{ icon }}</vn-icon> -->
+        <!-- TODO: Add message icon -->
         <span class="text">{{ message.message }}</span>
     </div>
 </template>

diff --git a/packages/vlossom/src/components/vs-notice/VsNotice.scss b/packages/vlossom/src/components/vs-notice/VsNotice.scss
@@ -1,49 +1,31 @@
 .vs-notice {
     display: flex;
+    justify-content: space-between;
     align-items: center;
     position: relative;
-    min-height: 3rem;
-    padding: 0.8rem 4rem 0.8rem 2.4rem;
+    padding: 0.8rem 2.4rem;
     overflow: hidden;
     background-color: var(--vs-notice-backgroundColor, var(--vs-comp-backgroundColor));
     color: var(--vs-notice-color, var(--vs-comp-color));
     font-size: var(--vs-notice-fontSize, 1.2rem);
     font-weight: var(--vs-notice-fontWeight, 500);
 
+    .vs-notice-contents {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
     .sub-title {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin: 0 2rem 0 0;
         font-size: var(--vs-notice-subTitleFontSize, 1.2rem);
         font-weight: var(--vs-notice-subTitleFontWeight, 600);
-
-        &:after {
-            content: '';
-            width: 1px;
-            height: 1rem;
-            opacity: 0.6;
-            margin-left: 2rem;
-            background-color: black;
-        }
     }
 
     .vs-notice-close {
-        background: none;
-        border: none;
-        position: absolute;
         display: flex;
-        justify-content: center;
-        align-items: center;
-        top: 0.8rem;
-        right: 0.8rem;
-        font-weight: 500;
         cursor: pointer;
-
-        .close-icon {
-            width: 1rem;
-            height: 1.5rem;
-        }
     }
 
     // primary

diff --git a/packages/vlossom/src/components/vs-notice/VsNotice.vue b/packages/vlossom/src/components/vs-notice/VsNotice.vue
@@ -4,12 +4,15 @@
         :class="['vs-notice', `vs-${computedColorScheme}`, { ...classObj }]"
         :style="customProperties"
     >
-        <strong class="sub-title">Notice</strong>
-        <p>
-            <slot />
-        </p>
+        <div class="vs-notice-contents">
+            <strong class="sub-title">{{ title }}</strong>
+            <vs-divider :color-scheme="colorScheme" :style-set="{ lineColor: primary ? 'white' : '' }" vertical />
+            <p>
+                <slot />
+            </p>
+        </div>
         <button type="button" class="vs-notice-close" @click.stop="closeNotice()">
-            <close-icon aria-label="close" class="close-icon" />
+            <close-icon aria-label="close" size="20" />
         </button>
     </div>
 </template>
@@ -19,14 +22,16 @@ import { PropType, defineComponent, ref, toRefs, watch, computed } from 'vue';
 import { useColorScheme, useCustomStyle } from '@/composables';
 import { VsComponent, type ColorScheme } from '@/declaration';
 import { CloseIcon } from '@/icons';
+import VsDivider from '../vs-divider/VsDivider.vue';
 
 import type { VsNoticeStyleSet } from './types';
 
 const name = VsComponent.VsNotice;
 export default defineComponent({
     name,
-    components: { CloseIcon },
+    components: { VsDivider, CloseIcon },
     props: {
+        title: { type: String, default: 'Notice' },
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsNoticeStyleSet>, default: '' },
         primary: { type: Boolean, default: false },

diff --git a/packages/vlossom/src/icons/CheckIcon.vue b/packages/vlossom/src/icons/CheckIcon.vue
@@ -0,0 +1,17 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 -960 960 960">
+        <path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
+    </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getIconProps } from './icon-props';
+
+export default defineComponent({
+    name: 'CheckIcon',
+    props: {
+        ...getIconProps(),
+    },
+});
+</script>
diff --git a/packages/vlossom/src/icons/CloseIcon.vue b/packages/vlossom/src/icons/CloseIcon.vue
@@ -0,0 +1,20 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 -960 960 960">
+        <path
+            fill="currentColor"
+            d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
+        />
+    </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getIconProps } from './icon-props';
+
+export default defineComponent({
+    name: 'CloseIcon',
+    props: {
+        ...getIconProps(),
+    },
+});
+</script>
diff --git a/packages/vlossom/src/icons/PersonIcon.vue b/packages/vlossom/src/icons/PersonIcon.vue
@@ -0,0 +1,20 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 -960 960 960">
+        <path
+            fill="currentColor"
+            d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"
+        />
+    </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getIconProps } from './icon-props';
+
+export default defineComponent({
+    name: 'PersonIcon',
+    props: {
+        ...getIconProps(),
+    },
+});
+</script>
diff --git a/packages/vlossom/src/icons/RotateRightIcon.vue b/packages/vlossom/src/icons/RotateRightIcon.vue
@@ -0,0 +1,20 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 -960 960 960">
+        <path
+            fill="currentColor"
+            d="M522-80v-82q34-5 66.5-18t61.5-34l56 58q-42 32-88 51.5T522-80Zm-80 0Q304-98 213-199.5T122-438q0-75 28.5-140.5t77-114q48.5-48.5 114-77T482-798h6l-62-62 56-58 160 160-160 160-56-56 64-64h-8q-117 0-198.5 81.5T202-438q0 104 68 182.5T442-162v82Zm322-134-58-56q21-29 34-61.5t18-66.5h82q-5 50-24.5 96T764-214Zm76-264h-82q-5-34-18-66.5T706-606l58-56q32 39 51 86t25 98Z"
+        />
+    </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getIconProps } from './icon-props';
+
+export default defineComponent({
+    name: 'RotateRightIcon',
+    props: {
+        ...getIconProps(),
+    },
+});
+</script>
diff --git a/packages/vlossom/src/icons/SearchIcon.vue b/packages/vlossom/src/icons/SearchIcon.vue
@@ -0,0 +1,20 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 -960 960 960">
+        <path
+            fill="currentColor"
+            d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"
+        />
+    </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getIconProps } from './icon-props';
+
+export default defineComponent({
+    name: 'SearchIcon',
+    props: {
+        ...getIconProps(),
+    },
+});
+</script>
diff --git a/packages/vlossom/src/icons/check.ts b/packages/vlossom/src/icons/check.ts
diff --git a/packages/vlossom/src/icons/close.ts b/packages/vlossom/src/icons/close.ts
diff --git a/packages/vlossom/src/icons/icon-props.ts b/packages/vlossom/src/icons/icon-props.ts
@@ -0,0 +1,12 @@
+export function getIconProps() {
+    return {
+        size: {
+            type: [Number, String],
+            default: 24,
+            validator: (value: number | string) => {
+                const size = Number(value);
+                return !isNaN(size) && size > 0;
+            },
+        },
+    };
+}
diff --git a/packages/vlossom/src/icons/index.ts b/packages/vlossom/src/icons/index.ts
@@ -1,5 +1,5 @@
-export * from './check';
-export * from './close';
-export * from './person';
-export * from './rotate-right';
-export * from './search';
+export { default as CheckIcon } from './CheckIcon.vue';
+export { default as CloseIcon } from './CloseIcon.vue';
+export { default as PersonIcon } from './PersonIcon.vue';
+export { default as RotateRightIcon } from './RotateRightIcon.vue';
+export { default as SearchIcon } from './SearchIcon.vue';
diff --git a/packages/vlossom/src/icons/person.ts b/packages/vlossom/src/icons/person.ts
diff --git a/packages/vlossom/src/icons/rotate-right.ts b/packages/vlossom/src/icons/rotate-right.ts
diff --git a/packages/vlossom/src/icons/search.ts b/packages/vlossom/src/icons/search.ts