Merge branch 'tmp'

src/components/ButtonDemo.vue

@@ -1,15 +1,15 @@
 <template>
-    <h1 class="doc-header">Button 示例</h1>
-    <Demo :component="Button1Demo" />
-    <Demo :component="Button6Demo" />
-    <Demo :component="Button2Demo" />
-    <Demo :component="Button3Demo" />
-    <Demo :component="Button4Demo" />
-    <Demo :component="Button5Demo" />
+  <h1 class="doc-header">Button 示例</h1>
+  <Demo :component="Button6Demo" />
+  <Demo :component="Button1Demo" />
+  <Demo :component="Button2Demo" />
+  <Demo :component="Button3Demo" />
+  <Demo :component="Button4Demo" />
+  <Demo :component="Button5Demo" />
 </template>
 
 <script lang="ts">
-import Button from "../lib/Button.vue";
+import { Button } from "../lib/index";
 import Demo from "../components/Demo.vue";
 import Button1Demo from "../demos/Button1.demo.vue";
 import Button2Demo from "../demos/Button2.demo.vue";
@@ -18,18 +18,18 @@ import Button4Demo from "../demos/Button4.demo.vue";
 import Button5Demo from "../demos/Button5.demo.vue";
 import Button6Demo from "../demos/Button6.demo.vue";
 export default {
-    components: {
-        Demo,
-    },
-    setup() {
-        return {
-            Button1Demo,
-            Button2Demo,
-            Button3Demo,
-            Button4Demo,
-            Button5Demo,
-            Button6Demo,
-        };
-    },
+  components: {
+    Demo,
+  },
+  setup() {
+    return {
+      Button1Demo,
+      Button2Demo,
+      Button3Demo,
+      Button4Demo,
+      Button5Demo,
+      Button6Demo,
+    };
+  },
 };
 </script>

src/components/CardDemo.vue

@@ -0,0 +1,19 @@
+<template>
+    <h1 class="doc-header">Card 示例</h1>
+    <Demo :component="Card1Demo" />
+</template>
+
+<script lang="ts">
+import Demo from "../components/Demo.vue";
+import Card1Demo from "../demos/Card1.demo.vue";
+export default {
+    components: {
+        Demo,
+    },
+    setup() {
+        return {
+            Card1Demo,
+        };
+    },
+};
+</script>

src/components/CarouselDemo.vue

@@ -0,0 +1,19 @@
+<template>
+    <h1 class="doc-header">走马灯/轮播图 示例</h1>
+    <Demo :component="Carousel1Demo" />
+</template>
+
+<script lang="ts">
+import Demo from "../components/Demo.vue";
+import Carousel1Demo from "../demos/Carousel1.demo.vue";
+export default {
+    components: {
+        Demo,
+    },
+    setup() {
+        return {
+            Carousel1Demo,
+        };
+    },
+};
+</script>

src/components/Demo.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import Button from "../lib/Button.vue";
+import { Button } from "../lib/index";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import "prismjs";

src/components/DialogDemo.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import Dialog from "../lib/Dialog.vue";
-import Button from "../lib/Button.vue";
+import { Dialog } from "../lib/index";
+import { Button } from "../lib/index";
 import Demo from "./Demo.vue";
 import Dialog1Demo from "../demos/Dialog1.demo.vue";
 import Dialog2Demo from "../demos/Dialog2.demo.vue";

src/components/DocDemo.vue

@@ -2,6 +2,8 @@
     <h1>组件总览</h1>
     <SwitchDemo />
     <ButtonDemo />
+    <ProgressDemo />
+    <CarouselDemo />
     <DialogDemo />
     <TabsDemo />
 </template>
@@ -11,13 +13,17 @@ import ButtonDemo from "./ButtonDemo.vue";
 import DialogDemo from "./DialogDemo.vue";
 import SwitchDemo from "./SwitchDemo.vue";
 import TabsDemo from "./TabsDemo.vue";
+import ProgressDemo from "./ProgressDemo.vue";
+import CarouselDemo from "./CarouselDemo.vue";
 export default {
     name: "DocDemo",
     components: {
         ButtonDemo,
         DialogDemo,
         SwitchDemo,
         TabsDemo,
+        ProgressDemo,
+        CarouselDemo
     },
 };
 </script>

src/components/Topnav.vue

@@ -17,7 +17,6 @@ export default {
     name: "Topnav",
     setup() {
         const menuVisible = inject<Ref<boolean>>("xxx");
-        // console.log("topnav", menuVisible);
         const toggleMenu = () => {
             menuVisible.value = !menuVisible.value;
         };
@@ -27,9 +26,6 @@ export default {
         const backRouter = () => {
             router.push("/");
         };
-        // const backToHome = () => {
-        //     router.push("/");
-        // };
         return {
             toggleMenu,
             path,
@@ -56,6 +52,9 @@ export default {
     .backToHome {
         float: right;
         cursor: pointer;
+        &:hover {
+            color:#73c9e5;
+        }
     }
     > .logo {
         transform: translateX(50%);

src/demos/Card1.demo.vue

@@ -0,0 +1,45 @@
+<demo>
+卡片
+</demo>
+<template>
+  <section>
+    <div>
+      <Card title="video1" />
+    </div>
+    <div>
+      <Card title="video2"> 这是卡片描述 </Card>
+    </div>
+    <div>
+      <Card title="video3" type="normal" />
+    </div>
+    <div>
+      <Card title="video4" type="normal"> 这是卡片描述 </Card>
+    </div>
+    <div>
+      <Card title="video5" type="normal" shadow="awalys" />
+    </div>
+    <div>
+      <Card title="video6" type="normal" shadow="never" />
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Card } from "../lib/index";
+export default {
+  components: {
+    Card,
+  },
+
+  setup() {},
+};
+</script>
+<style lang="scss" scoped>
+section {
+  display: flex;
+  flex-wrap: wrap;
+  div {
+    margin: 5px;
+  }
+}
+</style>

src/demos/Carousel1.demo.vue

@@ -0,0 +1,38 @@
+<demo>
+走马灯-轮播图
+</demo>
+<template>
+    <div>
+        <Carousel :speed="speed" :autoDelay="autoDelay" :timingFunction="timingFunction">
+            <carousel-item class="container">1</carousel-item>
+            <carousel-item class="container">2</carousel-item>
+            <carousel-item class="container">3</carousel-item>
+            <carousel-item class="container">4</carousel-item>
+            <carousel-item class="container">5</carousel-item>
+        </Carousel>
+    </div>
+</template>
+
+<script lang="ts">
+import { Carousel } from "../lib/index";
+import { CarouselItem } from "../lib/index";
+export default {
+    components: {
+        Carousel,
+        CarouselItem
+    },
+
+    setup() {
+        return {
+            speed: 0.45,
+            autoDelay: 2500,
+            timingFunction: "ease-in-out"
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .container {
+        text-align: center;
+    }
+</style>

src/demos/Dialog1.demo.vue

@@ -20,7 +20,7 @@
 import { Dialog } from "../lib/index";
 import { Button } from "../lib/index";
 import { ref } from "vue";
-import { openDialog } from "../lib/openDialog";
+import { openDialog } from "../lib/index";
 export default {
     components: {
         Dialog,

src/demos/Dialog2.demo.vue

@@ -10,7 +10,7 @@
 <script lang="ts">
 import { Button } from "../lib/index";
 import { ref, h } from "vue";
-import { openDialog } from "../lib/openDialog";
+import { openDialog } from "../lib/index";
 export default {
     components: {
         Button,

src/demos/Progress1.demo.vue

@@ -6,27 +6,42 @@
         <Progress />
     </div>
     <div>
-        <Progress :percentage="percentage1" />
+        <Progress v-model:percentage="percentage1" />
     </div>
     <div>
-        <Progress :percentage="percentage2" />
+        <Progress v-model:percentage="percentage2" />
     </div>
+    <Button @click="add">+</Button>
+    <Button @click="zero">归零</Button>
 </template>
 
 <script lang="ts">
 import { ref } from "vue";
-import { Progress } from "../lib/index";
+import { Progress, Button } from "../lib/index";
 export default {
     components: {
         Progress,
+        Button,
     },
 
     setup() {
         const percentage1 = ref(60);
-        const percentage2 = ref(100);
+        const percentage2 = ref(40);
+        const add = () => {
+            percentage2.value += 10;
+            if (percentage2.value > 100) {
+                percentage2.value = 100;
+            }
+        };
+        const zero = () => {
+            percentage2.value = 0;
+        };
+
         return {
             percentage1,
             percentage2,
+            add,
+            zero,
         };
     },
 };

src/demos/Progress2.demo.vue

@@ -6,10 +6,13 @@
         <Progress />
     </div>
     <div>
-        <Progress :percentage="percentage1" xh="run" />
+        <Progress v-model:percentage="percentage1" xh="run" />
     </div>
     <div>
-        <Progress :percentage="percentage2" xh="lemon" />
+        <Progress v-model:percentage="percentage2" xh="lemon" />
+    </div>
+    <div>
+        <Progress v-model:percentage="percentage3" xh="christmas-hat" />
     </div>
 </template>
 
@@ -24,9 +27,11 @@ export default {
     setup() {
         const percentage1 = ref(60);
         const percentage2 = ref(100);
+        const percentage3 = ref(50);
         return {
             percentage1,
             percentage2,
+            percentage3,
         };
     },
 };

src/index.scss

@@ -1,3 +1,5 @@
+$bili_blue: #73c9e5;
+$bili_pink: #fb7299;
 * {
     margin: 0;
     padding: 0;
@@ -14,9 +16,6 @@ a {
     color: inherit;
 
     &:hover {
-        background-color: #fee3eb;
-        margin-bottom: -1px;
-        border-bottom: 1px solid black;
         cursor: pointer;
     }
 }
@@ -43,7 +42,7 @@ body {
 }
 
 .doc-active {
-    background-color: rgba($color: #fb7299, $alpha: 0.2);
+    background-color: rgba($color: $bili_blue, $alpha: 0.6);
 }
 
 .demo {