mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
543fbbacb6
Expand the Vue3 Webpack5 Storybook template with comprehensive component support: - Add Button, Header, and Page components for JavaScript and TypeScript (4.9) - Include stories, components, and CSS files - Implement Storybook best practices with autodocs and component testing
48 lines
968 B
Vue
48 lines
968 B
Vue
<template>
|
|
<button type="button" :class="classes" @click="onClick" :style="style">{{ label }} </button>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import './button.css';
|
|
import { computed } from 'vue';
|
|
|
|
const props = withDefaults(defineProps<{
|
|
/**
|
|
* The label of the button
|
|
*/
|
|
label: string,
|
|
/**
|
|
* primary or secondary button
|
|
*/
|
|
primary?: boolean,
|
|
/**
|
|
* size of the button
|
|
*/
|
|
size?: 'small' | 'medium' | 'large',
|
|
/**
|
|
* background color of the button
|
|
*/
|
|
backgroundColor?: string,
|
|
|
|
}>(), { primary: false });
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'click', id: number): void;
|
|
}>();
|
|
|
|
const classes = computed(() => ({
|
|
'storybook-button': true,
|
|
'storybook-button--primary': props.primary,
|
|
'storybook-button--secondary': !props.primary,
|
|
[`storybook-button--${props.size || 'medium'}`]: true,
|
|
}));
|
|
|
|
const style = computed(() => ({
|
|
backgroundColor: props.backgroundColor
|
|
}));
|
|
|
|
const onClick = () => {
|
|
emit("click", 1)
|
|
};
|
|
|
|
</script> |