feat(register): add component registration script

packages/vlossom/.storybook/examples/style-set.ts

@@ -5,7 +5,7 @@ import type {
     VsInputStyleSet,
     VsSectionStyleSet,
     VsPageStyleSet,
-} from '@/components';
+} from '@/components/types';
 
 const vsButton: VsButtonStyleSet = {
     backgroundColor: '#1e88e5',

packages/vlossom/playground/Playground.vue

@@ -1,5 +1,9 @@
 <template>
-    <vs-container> Hello World </vs-container>
+    <vs-page>
+        <template #title>Vlossom Playground</template>
+
+        Hello World
+    </vs-page>
 </template>
 
 <script lang="ts">

packages/vlossom/playground/index.ts

@@ -1,7 +1,9 @@
 import { createApp } from 'vue';
 import { createVlossom } from '../src/main';
-import App from './App.vue';
+import Playground from './Playground.vue';
+
+const app = createApp(Playground);
 
-const app = createApp(App);
 app.use(createVlossom());
+
 app.mount('#app');

packages/vlossom/src/components/types.ts

@@ -0,0 +1,10 @@
+export type * from './vs-button';
+export type * from './vs-container';
+export type * from './vs-divider';
+export type * from './vs-form';
+export type * from './vs-input';
+export type * from './vs-input-wrapper';
+export type * from './vs-message';
+export type * from './vs-page';
+export type * from './vs-section';
+export type * from './vs-wrapper';

packages/vlossom/src/components/vs-button/VsButton/VsButton.vue → packages/vlossom/src/components/vs-button/VsButton.vue

@@ -34,11 +34,9 @@ export type VsButtonStyleSet = Partial<ButtonStyleSet>;
 
 const name = VsComponent.VsButton;
 
-const VsButton = defineComponent({
+export default defineComponent({
     name,
-    components: {
-        RotateRight,
-    },
+    components: { RotateRight },
     props: {
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsButtonStyleSet>, default: '' },
@@ -73,9 +71,6 @@ const VsButton = defineComponent({
         };
     },
 });
-
-export default VsButton;
-export type VsButtonInstance = InstanceType<typeof VsButton>;
 </script>
 
 <style lang="scss" scoped src="./VsButton.scss" />

packages/vlossom/src/components/vs-button/VsButton/__tests__/vs-button.test.ts → packages/vlossom/src/components/vs-button/__tests__/vs-button.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
-import VsButton from '../VsButton.vue';
+import VsButton from './../VsButton.vue';
 
 describe('vs-button', () => {
     describe('disabled', () => {

packages/vlossom/src/components/vs-button/index.ts

@@ -1,2 +1,12 @@
-export { default as VsButton } from './VsButton';
-export type { VsButtonInstance, VsButtonStyleSet } from './VsButton';
+import { VsComponent } from '@/declaration/types';
+import VsButton from './VsButton.vue';
+import type { VsButtonStyleSet } from './VsButton.vue';
+
+type VsButtonInstance = InstanceType<typeof VsButton>;
+
+export type { VsButtonInstance, VsButtonStyleSet };
+
+export default {
+    name: VsComponent.VsButton,
+    component: VsButton,
+};

packages/vlossom/src/components/vs-container/VsContainer/VsContainer.vue → packages/vlossom/src/components/vs-container/VsContainer.vue

@@ -6,16 +6,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { VsComponent } from '@/declaration/types';
 
-const VsContainer = defineComponent({
-    name: 'vs-container',
+export default defineComponent({
+    name: VsComponent.VsContainer,
     setup() {
         return {};
     },
 });
-
-export default VsContainer;
-export type VsContainerInstance = InstanceType<typeof VsContainer>;
 </script>
 
 <style lang="scss" scoped src="./VsContainer.scss" />

packages/vlossom/src/components/vs-container/index.ts

@@ -1 +1,11 @@
-export { default as VsContainer } from './VsContainer';
+import { VsComponent } from '@/declaration/types';
+import VsContainer from './VsContainer.vue';
+
+type VsContainerInstance = InstanceType<typeof VsContainer>;
+
+export type { VsContainerInstance };
+
+export default {
+    name: VsComponent.VsContainer,
+    component: VsContainer,
+};

packages/vlossom/src/components/vs-divider/VsDivider/VsDivider.vue → packages/vlossom/src/components/vs-divider/VsDivider.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['vs-divider', `vs-${computedColorScheme}`, { ...classObj }]" :style="customProperties" />
+    <div class="vs-divider" :class="[`vs-${computedColorScheme}`, { ...classObj }]" :style="customProperties" />
 </template>
 
 <script lang="ts">
@@ -18,7 +18,7 @@ export type VsDividerStyleSet = Partial<DividerStyleSet>;
 
 const name = VsComponent.VsDivider;
 
-const VsDivider = defineComponent({
+export default defineComponent({
     name,
     props: {
         colorScheme: { type: String as PropType<ColorScheme> },
@@ -46,9 +46,6 @@ const VsDivider = defineComponent({
         };
     },
 });
-
-export default VsDivider;
-export type VsDividerInstance = InstanceType<typeof VsDivider>;
 </script>
 
 <style lang="scss" scoped src="./VsDivider.scss" />

packages/vlossom/src/components/vs-divider/index.ts

@@ -1,2 +1,12 @@
-export { default as VsDivider } from './VsDivider';
-export type { VsDividerInstance, VsDividerStyleSet } from './VsDivider';
+import { VsComponent } from '@/declaration/types';
+import VsDivider from './VsDivider.vue';
+import type { VsDividerStyleSet } from './VsDivider.vue';
+
+type VsDividerInstance = InstanceType<typeof VsDivider>;
+
+export type { VsDividerInstance, VsDividerStyleSet };
+
+export default {
+    name: VsComponent.VsDivider,
+    component: VsDivider,
+};

packages/vlossom/src/components/vs-form/VsForm/VsForm.vue → packages/vlossom/src/components/vs-form/VsForm.vue

@@ -9,13 +9,11 @@
 <script lang="ts">
 import { computed, defineComponent, nextTick, provide, watch } from 'vue';
 import { VsComponent, VsFormProvide } from '@/declaration/types';
-import VsContainer from '@/components/vs-container/VsContainer/VsContainer.vue';
+import VsContainer from '@/components/vs-container/VsContainer.vue';
 import { useFormProvide } from '@/composables';
 
-export const name = VsComponent.VsForm;
-
-const VsForm = defineComponent({
-    name: 'vs-form',
+export default defineComponent({
+    name: VsComponent.VsForm,
     components: { VsContainer },
     props: {
         // v-model
@@ -71,7 +69,4 @@ const VsForm = defineComponent({
         };
     },
 });
-
-export default VsForm;
-export type VsFormInstance = InstanceType<typeof VsForm>;
 </script>

packages/vlossom/src/components/vs-form/index.ts

@@ -1,2 +1,11 @@
-export { default as VsForm } from './VsForm';
-export type { VsFormInstance } from './VsForm';
+import { VsComponent } from '@/declaration/types';
+import VsForm from './VsForm.vue';
+
+type VsFormInstance = InstanceType<typeof VsForm>;
+
+export type { VsFormInstance };
+
+export default {
+    name: VsComponent.VsForm,
+    component: VsForm,
+};

packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper/VsInputWrapper.vue → packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.vue

@@ -25,11 +25,11 @@
 
 <script lang="ts">
 import { PropType, defineComponent, ref, toRefs, watch } from 'vue';
-import { StateMessage } from '@/declaration/types';
-import VsMessage from '@/components/vs-message/VsMessage/VsMessage.vue';
+import { StateMessage, VsComponent } from '@/declaration/types';
+import VsMessage from '@/components/vs-message/VsMessage.vue';
 
-const VsInputWrapper = defineComponent({
-    name: 'vs-input-wrapper',
+export default defineComponent({
+    name: VsComponent.VsInputWrapper,
     components: { VsMessage },
     props: {
         label: { type: String, default: '' },
@@ -55,9 +55,6 @@ const VsInputWrapper = defineComponent({
         };
     },
 });
-
-export default VsInputWrapper;
-export type VsInputWrapperInstance = InstanceType<typeof VsInputWrapper>;
 </script>
 
 <style lang="scss" scoped src="./VsInputWrapper.scss" />

packages/vlossom/src/components/vs-input-wrapper/index.ts

@@ -1 +1,11 @@
-export { default as VsInputWrapper } from './VsInputWrapper';
+import { VsComponent } from '@/declaration/types';
+import VsInputWrapper from './VsInputWrapper.vue';
+
+type VsInputWrapperInstance = InstanceType<typeof VsInputWrapper>;
+
+export type { VsInputWrapperInstance };
+
+export default {
+    name: VsComponent.VsInputWrapper,
+    component: VsInputWrapper,
+};

packages/vlossom/src/components/vs-input/VsInput/VsInput.vue → packages/vlossom/src/components/vs-input/VsInput.vue

@@ -63,7 +63,7 @@ export interface InputButton {
 
 const name = VsComponent.VsInput;
 
-const VsInput = defineComponent({
+export default defineComponent({
     name,
     props: {
         colorScheme: { type: String as PropType<ColorScheme> },
@@ -198,9 +198,6 @@ const VsInput = defineComponent({
         };
     },
 });
-
-export default VsInput;
-export type VsInputInstance = InstanceType<typeof VsInput>;
 </script>
 
 <style lang="scss" scoped src="./VsInput.scss" />

packages/vlossom/src/components/vs-input/index.ts

@@ -1,2 +1,12 @@
-export { default as VsInput } from './VsInput';
-export type { VsInputInstance, VsInputStyleSet } from './VsInput';
+import { VsComponent } from '@/declaration/types';
+import VsInput from './VsInput.vue';
+import type { InputType, InputButton, VsInputStyleSet } from './VsInput.vue';
+
+type VsInputInstance = InstanceType<typeof VsInput>;
+
+export type { VsInputInstance, VsInputStyleSet, InputType, InputButton };
+
+export default {
+    name: VsComponent.VsInput,
+    component: VsInput,
+};

packages/vlossom/src/components/vs-message/VsMessage/VsMessage.vue → packages/vlossom/src/components/vs-message/VsMessage.vue

@@ -8,17 +8,14 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { StateMessage } from '@/declaration/types';
+import { StateMessage, VsComponent } from '@/declaration/types';
 
-const VsMessage = defineComponent({
-    name: 'vs-message',
+export default defineComponent({
+    name: VsComponent.VsMessage,
     props: {
         message: { type: Object as PropType<StateMessage>, required: true, default: () => ({}) },
     },
 });
-
-export default VsMessage;
-export type VsMessageInstance = InstanceType<typeof VsMessage>;
 </script>
 
 <style lang="scss" scoped src="./VsMessage.scss" />

packages/vlossom/src/components/vs-message/index.ts

@@ -1 +1,11 @@
-export { default as VsMessage } from './VsMessage';
+import { VsComponent } from '@/declaration/types';
+import VsMessage from './VsMessage.vue';
+
+type VsMessageInstance = InstanceType<typeof VsMessage>;
+
+export type { VsMessageInstance };
+
+export default {
+    name: VsComponent.VsMessage,
+    component: VsMessage,
+};