add new component vs-value-tag

packages/vlossom/src/components/index.ts

@@ -6,4 +6,5 @@ export * from './vs-input-wrapper';
 export * from './vs-message';
 export * from './vs-page';
 export * from './vs-section';
-export * from './vs-wrapper';
+export * from './vs-value-tag';
+export * from './vs-wrapper';

packages/vlossom/src/components/vs-value-tag/VsValueTag/VsValueTag.vue

@@ -0,0 +1,38 @@
+<template>
+    <div> </div>
+</template>
+<script lang="ts">
+import { PropType, defineComponent, toRefs } from 'vue';
+import { useColorScheme, useCustomStyle } from '@/composables';
+import { ColorScheme, VsComponent } from '@/declaration/types';
+
+interface ValueTagStyleSet {}
+
+export type VsValueTagStyleSet = Partial<ValueTagStyleSet>;
+
+const name = VsComponent.VsValueTag;
+
+const VsValueTag = defineComponent({
+    name,
+    props: {
+        colorScheme: { type: String as PropType<ColorScheme> },
+        styleSet: { type: [String, Object] as PropType<string | VsValueTagStyleSet>, default: '' },
+    },
+    setup(props) {
+        const { colorScheme, styleSet } = toRefs(props);
+
+        const { computedColorScheme } = useColorScheme(name, colorScheme);
+
+        const { customProperties } = useCustomStyle<VsValueTagStyleSet>(name, styleSet);
+
+        return {
+            computedColorScheme,
+            customProperties,
+        };
+    },
+});
+
+export default VsValueTag;
+export type VsValueTagInstance = InstanceType<typeof VsValueTag>;
+</script>
+<style lang="scss" scoped src="./VsValueTag.scss" />

packages/vlossom/src/components/vs-value-tag/VsValueTag/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue';
+import VsValueTag from './VsValueTag.vue';
+
+export default {
+    install(app: App<Element>) {
+        app.component('vs-value-tag', VsValueTag);
+    },
+};
+export * from './VsValueTag.vue';

packages/vlossom/src/components/vs-value-tag/index.ts

@@ -0,0 +1,2 @@
+export { default as VsValueTag } from './VsValueTag';
+export type { VsValueTagInstance, VsValueTagStyleSet } from './VsValueTag';

packages/vlossom/src/declaration/types.ts

@@ -4,6 +4,7 @@ import type {
     VsInputStyleSet,
     VsSectionStyleSet,
     VsPageStyleSet,
+    VsValueTagStyleSet,
 } from '@/components';
 
 export enum VsComponent {
@@ -12,6 +13,7 @@ export enum VsComponent {
     VsInput = 'VsInput',
     VsPage = 'VsPage',
     VsSection = 'VsSection',
+    VsValueTag = 'VsValueTag',
 }
 
 export type ColorScheme = 'red' | 'amber' | 'green' | 'teal' | 'blue' | 'indigo' | 'purple' | 'pink';
@@ -24,6 +26,7 @@ export interface StyleSet {
     VsInput?: { [key: string]: VsInputStyleSet };
     VsSection?: { [key: string]: VsSectionStyleSet };
     VsPage?: { [key: string]: VsPageStyleSet };
+    VsValueTag?: { [key: string]: VsValueTagStyleSet };
 }
 
 export interface VlossomOptions {