mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-09 00:19:13 +08:00
54503208a6
In 6.5 the `framework` config option was one of `react`, `angular`, etc. and included Webpack settings. In the 7.0, we’ve updated it so that these are now called `renderers`, and are builder-independent. Now, frameworks contain specific builder information, such as `cra` or `nextjs` (for specific app environments) or `react-webpack5` / `react-vite` (for custom apps). This fixes the `sb init` CLI command to use renderer-specific templates. I also call out some follow-up work to fix automigrations & telemetry
53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
|
|
</template>
|
|
|
|
<script>
|
|
import './button.css';
|
|
import { reactive, computed } from 'vue';
|
|
|
|
export default {
|
|
name: 'my-button',
|
|
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
primary: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
size: {
|
|
type: String,
|
|
validator: function (value) {
|
|
return ['small', 'medium', 'large'].indexOf(value) !== -1;
|
|
},
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
},
|
|
},
|
|
|
|
emits: ['click'],
|
|
|
|
setup(props, { emit }) {
|
|
props = reactive(props);
|
|
return {
|
|
classes: computed(() => ({
|
|
'storybook-button': true,
|
|
'storybook-button--primary': props.primary,
|
|
'storybook-button--secondary': !props.primary,
|
|
[`storybook-button--${props.size || 'medium'}`]: true,
|
|
})),
|
|
style: computed(() => ({
|
|
backgroundColor: props.backgroundColor,
|
|
})),
|
|
onClick() {
|
|
emit('click');
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|