From fe7bbf07b0eac9c3d5d79090ad246e3ef4a55ac2 Mon Sep 17 00:00:00 2001 From: smithoo Date: Thu, 18 Jan 2024 12:47:20 +0900 Subject: [PATCH] feat(icons): change icon component usage (#56) --- .eslintrc.json | 2 +- packages/vlossom/playground/Playground.vue | 2 +- .../src/components/vs-button/VsButton.scss | 2 -- .../src/components/vs-button/VsButton.vue | 2 +- .../src/components/vs-input/VsInput.scss | 10 ------ .../src/components/vs-input/VsInput.vue | 2 +- .../src/components/vs-message/VsMessage.vue | 2 +- .../src/components/vs-notice/VsNotice.scss | 32 ++++--------------- .../src/components/vs-notice/VsNotice.vue | 17 ++++++---- packages/vlossom/src/icons/CheckIcon.vue | 17 ++++++++++ packages/vlossom/src/icons/CloseIcon.vue | 20 ++++++++++++ packages/vlossom/src/icons/PersonIcon.vue | 20 ++++++++++++ .../vlossom/src/icons/RotateRightIcon.vue | 20 ++++++++++++ packages/vlossom/src/icons/SearchIcon.vue | 20 ++++++++++++ packages/vlossom/src/icons/check.ts | 6 ---- packages/vlossom/src/icons/close.ts | 6 ---- packages/vlossom/src/icons/icon-props.ts | 12 +++++++ packages/vlossom/src/icons/index.ts | 10 +++--- packages/vlossom/src/icons/person.ts | 6 ---- packages/vlossom/src/icons/rotate-right.ts | 6 ---- packages/vlossom/src/icons/search.ts | 6 ---- 21 files changed, 137 insertions(+), 83 deletions(-) create mode 100644 packages/vlossom/src/icons/CheckIcon.vue create mode 100644 packages/vlossom/src/icons/CloseIcon.vue create mode 100644 packages/vlossom/src/icons/PersonIcon.vue create mode 100644 packages/vlossom/src/icons/RotateRightIcon.vue create mode 100644 packages/vlossom/src/icons/SearchIcon.vue delete mode 100644 packages/vlossom/src/icons/check.ts delete mode 100644 packages/vlossom/src/icons/close.ts create mode 100644 packages/vlossom/src/icons/icon-props.ts delete mode 100644 packages/vlossom/src/icons/person.ts delete mode 100644 packages/vlossom/src/icons/rotate-right.ts delete mode 100644 packages/vlossom/src/icons/search.ts diff --git a/.eslintrc.json b/.eslintrc.json index 441e2fe54..2401d2935 100644 --- 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 index 130f36f8b..087c75e98 100644 --- a/packages/vlossom/playground/Playground.vue +++ b/packages/vlossom/playground/Playground.vue @@ -2,7 +2,7 @@ - Hello World + Hello Vlossom! diff --git a/packages/vlossom/src/components/vs-button/VsButton.scss b/packages/vlossom/src/components/vs-button/VsButton.scss index fbd755edb..a824890ae 100644 --- 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 index 568b1e2c3..5089444c6 100644 --- a/packages/vlossom/src/components/vs-button/VsButton.vue +++ b/packages/vlossom/src/components/vs-button/VsButton.vue @@ -9,7 +9,7 @@ - + diff --git a/packages/vlossom/src/components/vs-input/VsInput.scss b/packages/vlossom/src/components/vs-input/VsInput.scss index 5637027de..74268d23d 100644 --- 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 index b70781abf..ebcc226cd 100644 --- 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()" > - + diff --git a/packages/vlossom/src/components/vs-message/VsMessage.vue b/packages/vlossom/src/components/vs-message/VsMessage.vue index 0dc3db48b..27492df67 100644 --- a/packages/vlossom/src/components/vs-message/VsMessage.vue +++ b/packages/vlossom/src/components/vs-message/VsMessage.vue @@ -1,7 +1,7 @@ diff --git a/packages/vlossom/src/components/vs-notice/VsNotice.scss b/packages/vlossom/src/components/vs-notice/VsNotice.scss index fe0028d04..2f3e47016 100644 --- 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 index b5d7f4dc7..481b8c045 100644 --- 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" > - Notice -

- -

+
+ {{ title }} + +

+ +

+
@@ -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 }, styleSet: { type: [String, Object] as PropType, default: '' }, primary: { type: Boolean, default: false }, diff --git a/packages/vlossom/src/icons/CheckIcon.vue b/packages/vlossom/src/icons/CheckIcon.vue new file mode 100644 index 000000000..add5981c8 --- /dev/null +++ b/packages/vlossom/src/icons/CheckIcon.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/vlossom/src/icons/CloseIcon.vue b/packages/vlossom/src/icons/CloseIcon.vue new file mode 100644 index 000000000..dfbbf3109 --- /dev/null +++ b/packages/vlossom/src/icons/CloseIcon.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/vlossom/src/icons/PersonIcon.vue b/packages/vlossom/src/icons/PersonIcon.vue new file mode 100644 index 000000000..3da944d03 --- /dev/null +++ b/packages/vlossom/src/icons/PersonIcon.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/vlossom/src/icons/RotateRightIcon.vue b/packages/vlossom/src/icons/RotateRightIcon.vue new file mode 100644 index 000000000..23031adb0 --- /dev/null +++ b/packages/vlossom/src/icons/RotateRightIcon.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/vlossom/src/icons/SearchIcon.vue b/packages/vlossom/src/icons/SearchIcon.vue new file mode 100644 index 000000000..df9dca42c --- /dev/null +++ b/packages/vlossom/src/icons/SearchIcon.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/vlossom/src/icons/check.ts b/packages/vlossom/src/icons/check.ts deleted file mode 100644 index 4a49413b0..000000000 --- a/packages/vlossom/src/icons/check.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const CheckIcon = { - template: ` - - - `, -}; diff --git a/packages/vlossom/src/icons/close.ts b/packages/vlossom/src/icons/close.ts deleted file mode 100644 index 9918e9b4d..000000000 --- a/packages/vlossom/src/icons/close.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const CloseIcon = { - template: ` - - - `, -}; diff --git a/packages/vlossom/src/icons/icon-props.ts b/packages/vlossom/src/icons/icon-props.ts new file mode 100644 index 000000000..3dea134ad --- /dev/null +++ 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 index 2d5456548..81e5c8753 100644 --- 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 deleted file mode 100644 index fd5224965..000000000 --- a/packages/vlossom/src/icons/person.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const PersonIcon = { - template: ` - - - `, -}; diff --git a/packages/vlossom/src/icons/rotate-right.ts b/packages/vlossom/src/icons/rotate-right.ts deleted file mode 100644 index 026dd683c..000000000 --- a/packages/vlossom/src/icons/rotate-right.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const RotateRightIcon = { - template: ` - - - `, -}; diff --git a/packages/vlossom/src/icons/search.ts b/packages/vlossom/src/icons/search.ts deleted file mode 100644 index 0651e8d70..000000000 --- a/packages/vlossom/src/icons/search.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const SearchIcon = { - template: ` - - - `, -};