Initial commit

packages/button/button.css

@@ -0,0 +1,30 @@
+.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;
+}

packages/button/index.vue

@@ -0,0 +1,49 @@
+<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>

packages/button/index.vue.d.ts

@@ -0,0 +1,56 @@
+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;

packages/button/index.vue.js

@@ -0,0 +1,31 @@
+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__
+  },
+})

packages/header/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}

packages/header/index.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-06-16 10:57:07
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-06-20 11:57:08
+ * @FilePath: \tianheng-design\packages\header\index.vue
+ * @Description:
+ *
+-->
+<template>
+  <header>
+    <div class="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fill-rule="evenodd">
+            <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
+            <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
+            <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        <span v-if="user" class="welcome">Welcome, <b>{{ user.name }}</b>!</span>
+        <my-button v-if="user" size="small" label="Log out" @click="$emit('logout')" />
+        <my-button v-if="!user" size="small" label="Log in" @click="$emit('login')" />
+        <my-button v-if="!user" primary size="small" label="Sign up" @click="$emit('createAccount')" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script lang="ts" setup>
+import './header.css'
+
+// import MyButton from '../button/index.vue';
+
+defineProps<{ user?: { name: string } }>()
+
+defineEmits<{
+  (event: 'createAccount'): void
+  (event: 'login'): void
+  (event: 'logout'): void
+}>()
+</script>