feat: 移除button
This commit is contained in:
@ -1,30 +0,0 @@
|
|||||||
.storybook-button {
|
|
||||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
||||||
font-weight: 700;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 3em;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.storybook-button--primary {
|
|
||||||
color: white;
|
|
||||||
background-color: #1ea7fd;
|
|
||||||
}
|
|
||||||
.storybook-button--secondary {
|
|
||||||
color: #333;
|
|
||||||
background-color: transparent;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
|
||||||
}
|
|
||||||
.storybook-button--small {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
}
|
|
||||||
.storybook-button--medium {
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 11px 20px;
|
|
||||||
}
|
|
||||||
.storybook-button--large {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 12px 24px;
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button type="button" :class="classes" :style="style" @click="onClick">
|
|
||||||
{{ 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,
|
|
||||||
}))
|
|
||||||
|
|
||||||
function onClick() {
|
|
||||||
emit('click', 1)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
56
packages/button/index.vue.d.ts
vendored
56
packages/button/index.vue.d.ts
vendored
@ -1,56 +0,0 @@
|
|||||||
import './button.css';
|
|
||||||
declare const _default: import("vue").DefineComponent<{
|
|
||||||
label: {
|
|
||||||
type: StringConstructor;
|
|
||||||
required: true;
|
|
||||||
};
|
|
||||||
primary: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
required: false;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
size: {
|
|
||||||
type: StringConstructor;
|
|
||||||
required: false;
|
|
||||||
};
|
|
||||||
backgroundColor: {
|
|
||||||
type: StringConstructor;
|
|
||||||
required: false;
|
|
||||||
};
|
|
||||||
}, {
|
|
||||||
props: any;
|
|
||||||
emit: (event: "click", ...args: any[]) => void;
|
|
||||||
classes: import("vue").ComputedRef<{
|
|
||||||
[x: string]: any;
|
|
||||||
'storybook-button': boolean;
|
|
||||||
'storybook-button--primary': any;
|
|
||||||
'storybook-button--secondary': boolean;
|
|
||||||
}>;
|
|
||||||
style: import("vue").ComputedRef<{
|
|
||||||
backgroundColor: any;
|
|
||||||
}>;
|
|
||||||
onClick: () => void;
|
|
||||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
||||||
label: {
|
|
||||||
type: StringConstructor;
|
|
||||||
required: true;
|
|
||||||
};
|
|
||||||
primary: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
required: false;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
size: {
|
|
||||||
type: StringConstructor;
|
|
||||||
required: false;
|
|
||||||
};
|
|
||||||
backgroundColor: {
|
|
||||||
type: StringConstructor;
|
|
||||||
required: false;
|
|
||||||
};
|
|
||||||
}>> & {
|
|
||||||
onClick?: ((...args: any[]) => any) | undefined;
|
|
||||||
}, {
|
|
||||||
primary: boolean;
|
|
||||||
}, {}>;
|
|
||||||
export default _default;
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import { defineComponent as _defineComponent, computed } from 'vue'
|
|
||||||
import './button.css'
|
|
||||||
|
|
||||||
export default /* #__PURE__ */ _defineComponent({
|
|
||||||
props: {
|
|
||||||
label: { type: String, required: true },
|
|
||||||
primary: { type: Boolean, required: false, default: false },
|
|
||||||
size: { type: String, required: false },
|
|
||||||
backgroundColor: { type: String, required: false },
|
|
||||||
},
|
|
||||||
emits: ['click'],
|
|
||||||
setup(__props, { expose: __expose, emit }) {
|
|
||||||
__expose()
|
|
||||||
const props = __props
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
const __returned__ = { props, emit, classes, style, onClick }
|
|
||||||
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
|
|
||||||
return __returned__
|
|
||||||
},
|
|
||||||
})
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: zhaojinfeng 121016171@qq.com
|
|
||||||
* @Date: 2023-06-15 13:23:25
|
|
||||||
* @LastEditors: zhaojinfeng 121016171@qq.com
|
|
||||||
* @LastEditTime: 2023-06-20 18:27:47
|
|
||||||
* @FilePath: \tianheng-design\stories\Button.stories.ts
|
|
||||||
* @Description:
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
||||||
|
|
||||||
import Button from '../packages/button/index.vue'
|
|
||||||
|
|
||||||
// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
|
|
||||||
const meta = {
|
|
||||||
title: 'Example/Button',
|
|
||||||
component: Button,
|
|
||||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
|
|
||||||
tags: ['autodocs'],
|
|
||||||
argTypes: {
|
|
||||||
size: { control: 'select', options: ['small', 'medium', 'large'] },
|
|
||||||
backgroundColor: { control: 'color' },
|
|
||||||
onClick: { action: 'clicked' },
|
|
||||||
},
|
|
||||||
args: { primary: false }, // default value
|
|
||||||
} satisfies Meta<typeof Button>
|
|
||||||
|
|
||||||
export default meta
|
|
||||||
type Story = StoryObj<typeof meta>
|
|
||||||
/*
|
|
||||||
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
|
|
||||||
* See https://storybook.js.org/docs/vue/api/csf
|
|
||||||
* to learn how to use render functions.
|
|
||||||
*/
|
|
||||||
export const Primary: Story = {
|
|
||||||
args: {
|
|
||||||
primary: true,
|
|
||||||
label: 'Button',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Secondary: Story = {
|
|
||||||
args: {
|
|
||||||
primary: false,
|
|
||||||
label: 'Button',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Large: Story = {
|
|
||||||
args: {
|
|
||||||
label: 'Button',
|
|
||||||
size: 'large',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Small: Story = {
|
|
||||||
args: {
|
|
||||||
label: 'Button',
|
|
||||||
size: 'small',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user