thzxcx/vue3
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 移除button

Browse Source
This commit is contained in:
赵劲奉
2023-07-20 22:00:25 +08:00
parent d1dcea534e
commit 80f2750dea
5 changed files with 0 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/button/button.css
View File

@ -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;
}

49
packages/button/index.vue
View File

@ -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
View File

@ -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;

31
packages/button/index.vue.js
View File

@ -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__
},
})

61
stories/Button.stories.ts
View File

@ -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',
},
}