From 80f2750deabd20aebf403a12acc95b1c7e84481c Mon Sep 17 00:00:00 2001 From: zhaojinfeng <121016171@qq.com> Date: Thu, 20 Jul 2023 22:00:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/button/button.css | 30 ----------------- packages/button/index.vue | 49 --------------------------- packages/button/index.vue.d.ts | 56 ------------------------------- packages/button/index.vue.js | 31 ----------------- stories/Button.stories.ts | 61 ---------------------------------- 5 files changed, 227 deletions(-) delete mode 100644 packages/button/button.css delete mode 100644 packages/button/index.vue delete mode 100644 packages/button/index.vue.d.ts delete mode 100644 packages/button/index.vue.js delete mode 100644 stories/Button.stories.ts diff --git a/packages/button/button.css b/packages/button/button.css deleted file mode 100644 index dc91dc7..0000000 --- a/packages/button/button.css +++ /dev/null @@ -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; -} diff --git a/packages/button/index.vue b/packages/button/index.vue deleted file mode 100644 index f490934..0000000 --- a/packages/button/index.vue +++ /dev/null @@ -1,49 +0,0 @@ - - - diff --git a/packages/button/index.vue.d.ts b/packages/button/index.vue.d.ts deleted file mode 100644 index 950c0ea..0000000 --- a/packages/button/index.vue.d.ts +++ /dev/null @@ -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> & { - onClick?: ((...args: any[]) => any) | undefined; -}, { - primary: boolean; -}, {}>; -export default _default; diff --git a/packages/button/index.vue.js b/packages/button/index.vue.js deleted file mode 100644 index 72f813a..0000000 --- a/packages/button/index.vue.js +++ /dev/null @@ -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__ - }, -}) diff --git a/stories/Button.stories.ts b/stories/Button.stories.ts deleted file mode 100644 index 06d9f28..0000000 --- a/stories/Button.stories.ts +++ /dev/null @@ -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 - -export default meta -type Story = StoryObj -/* - *👇 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', - }, -}