@dot-present/components 1.0.1-alpha.0

package/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -0,0 +1 @@
+{"version":"4.1.0","results":[[":card/test/card.test.ts",{"duration":37.70300000000043,"failed":false}],[":button/test/button.test.ts",{"duration":32.867499999999836,"failed":false}]]}

package/button/index.ts

@@ -0,0 +1,4 @@
+import Button from "./src/button.vue";
+import { withInstall } from "@dot-present/utils"; // 如果路径错误，可尝试改为相对路径，例如：../utils 或 ./utils
+
+export default withInstall(Button);

package/button/src/button.ts

@@ -0,0 +1,31 @@
+import type { ExtractPropTypes } from "vue";
+// ExtractPropTypes 是 vue3 所提供的一个工具类型用于从 vue 组件的 props 对象中提取 ts 类型
+
+export const buttonProps = {
+  type: {
+    type: String,
+    default: "default"
+  },
+  plain: {
+    type: Boolean,
+    default: false
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  circle: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: ""
+  }
+}
+
+export type ButtonPropsType = ExtractPropTypes<typeof buttonProps>;

package/button/src/button.vue

@@ -0,0 +1,40 @@
+<template>
+  <button
+    class="dot-button"
+    :class="[
+      `dot-button-${type}`,
+      {
+        'is-plain': plain,
+        'is-round': round,
+        'is-circle': circle,
+        'is-disabled': disabled,
+      },
+    ]"
+    :disabled="disabled"
+    @click="handleClick"
+  > 
+    <i v-if="icon" :class="[`dot-icon-${icon}`]"></i>
+    <span v-if="$slots.default">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { buttonProps } from "./button";
+
+defineOptions({
+  name: "DotButton"
+});
+// 需要在 <script> 内部访问这些 prop 值（比如用于计算属性、watch 或其他逻辑）
+// 将props才将props声明出来
+defineProps(buttonProps);
+
+const emit = defineEmits(["click"]);
+
+const handleClick = (e: Event) => {
+  emit("click", e);
+}
+</script>
+
+<style scoped></style>

package/button/test/button.test.ts

@@ -0,0 +1,53 @@
+// 该文件用于书写测试用例
+
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Button from "../src/button.vue";
+
+describe("测试 Button 组件", () => {
+  // 一个一个的测试用例
+  // 3A 原则 arrange、action、assert
+  it("1.渲染按钮的时候有默认type", () => {
+    // 准备工作
+    const wrapper = mount(Button);
+    // 断言
+    expect(wrapper.classes()).toContain("dot-button");
+    expect(wrapper.classes()).toContain("dot-button-default");
+  });
+
+  it("2.渲染plain属性的按钮", () => {
+    const wrapper = mount(Button, {
+      props: {
+        plain: true
+      }
+    })
+    expect(wrapper.classes()).toContain("is-plain");
+  })
+
+  it("3.渲染disabled类型按钮", () => {
+    const wrapper = mount(Button, { props: { disabled: true } });
+    expect(wrapper.classes()).toContain("is-disabled");
+    expect(wrapper.attributes()).toHaveProperty("disabled");
+  });
+
+  it("4.渲染icon类型的按钮", () => {
+    const wrapper = mount(Button, { props: { icon: "home" } });
+    expect(wrapper.find("i").classes()).toContain("dot-icon-home");
+  });
+
+  it("5.测试slot插槽是否正常工作", () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: "点击我",
+      },
+    });
+    expect(wrapper.text()).toContain("点击我");
+  });
+
+  // 测试事件是否工作正常
+  it("6.测试按钮事件", async ()=>{
+    const wrapper = mount(Button);
+    await wrapper.trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("click");
+  });
+})

package/card/index.ts

@@ -0,0 +1,4 @@
+import Card from "./src/card.vue";
+import { withInstall } from "@dot-present/utils";
+
+export default withInstall(Card);;

package/card/src/card.ts

@@ -0,0 +1,27 @@
+import type { ExtractPropTypes } from "vue";
+
+export const cardProps = {
+  // 卡片的宽度
+  width: {
+    type: Number,
+    default: 0,
+  },
+  // 卡片图片资源链接
+  imgSrc: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  // 卡片图片高度
+  imgHeight: {
+    type: Number,
+    default: 0,
+  },
+  // 卡片概要
+  summary: {
+    type: String,
+    default: "",
+  },
+};
+
+export type CardPropsType = ExtractPropTypes<typeof cardProps>;

package/card/src/card.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cardProps } from "./card";
+
+defineOptions({
+  name: "DotCard"
+});
+defineProps(cardProps);
+
+</script>
+
+<template>
+  <div class="dot-card" :style="width ? {width: width + 'px'} : {}">
+    <div class="dot-card-img" :style="imgHeight ? {height: imgHeight + 'px'} : {}">
+      <img :src="imgSrc" alt="">
+    </div>
+    <div v-if="summary" class="dot-card-summary">{{ summary }}</div>
+    <div v-else class="dot-card-summary"><slot></slot></div>
+    
+    <div class="dot-card-footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+</style>

package/card/test/card.test.ts

@@ -0,0 +1,88 @@
+// 引入需要的库
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Card from "../src/card.vue";
+
+const imgSrc = "https://abc.com/abc.png";
+
+describe("测试Card组件", () => {
+  // 在测试组件的时候，一般会针对每一个 prop 设计一个测试用例
+
+  // 测试卡片宽度
+  it("测试卡片宽度", () => {
+    // 3A 原则 arrange、action、assert
+    const wrapper = mount(Card, {
+      props: {
+        width: 300,
+        imgSrc,
+      },
+    });
+
+    expect(wrapper.attributes("style")).toContain("width: 300px;");
+  });
+
+  // 测试图片资源
+  it("测试图片资源", () => {
+    const wrapper = mount(Card, {
+      props: {
+        imgSrc,
+      },
+    });
+
+    expect(wrapper.find(".dot-card-img img").attributes("src")).toBe(imgSrc);
+  });
+
+  // 测试图片设置高度
+  it("测试图片设置高度", () => {
+    const wrapper = mount(Card, {
+      props: {
+        imgSrc,
+        imgHeight: 200,
+      },
+    });
+
+    expect(wrapper.find(".dot-card-img").attributes("style")).toContain(
+      "height: 200px"
+    );
+  });
+
+  // 测试卡片概要
+  it("测试卡片概要", () => {
+    const summary = "这是一个卡片的概要内容";
+    const wrapper = mount(Card, {
+      props: {
+        summary,
+        imgSrc,
+      },
+    });
+    expect(wrapper.find(".dot-card-summary").text()).toBe(summary);
+  });
+
+  // 测试插槽
+  it("测试summary插槽", () => {
+    const summary = "这是一个卡片的概要内容";
+    const wrapper = mount(Card, {
+      props: {
+        imgSrc,
+      },
+      slots: {
+        default: summary,
+      },
+    });
+    expect(wrapper.find(".dot-card-summary").text()).toBe(summary);
+  });
+
+  // 测试footer插槽
+  it("测试footer插槽", () => {
+    const footer = "这是 footer 内容";
+    const wrapper = mount(Card, {
+      props: {
+        imgSrc,
+      },
+      slots: {
+        footer: footer,
+      },
+    });
+    expect(wrapper.find(".dot-card-footer").text()).toBe(footer);
+  });
+});

package/index.ts

@@ -0,0 +1,28 @@
+import Button from "./button/src/button.vue";
+import Card from "./card/src/card.vue";
+
+import type { App, Plugin } from "vue";
+
+// 之前是每个组件有一个入口文件，每个入口文件实际上所做的事情就是给这个组件添加一个 install 方法
+// 之后在其他项目中就可以单独的引入这个组件：
+// import DuyiButton from '@duyiui-plus/components/button'
+// import DuyiCard from '@duyiui-plus/components/card'
+
+// 现在整体项目的入口文件，要做的事情很简单：统一给所有组件添加上 install
+// 之后在其他项目中使用的时候，就可以一次性导入所有的组件
+
+const components = [Button, Card];
+
+const install = (app: App) => {
+  components.forEach((component) => {
+    if (component.name) {
+      app.component(component.name, component);
+    }
+  });
+};
+
+const dot: Plugin = {
+  install,
+};
+
+export default dot;

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@dot-present/components",
+  "version": "1.0.1-alpha.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "types": "types.d.ts",
+  "scripts": {
+    "test": "vitest"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.26.2",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "9e3a9aae5de9625e6567a0be190c830f8aee00a2"
+}

package/vite.config.js

@@ -0,0 +1,23 @@
+// 从 node.js 内置的 url 模块中引入 fileURLToPath、URL
+// 这两个函数用于做 URL 相关的处理
+import { fileURLToPath, URL } from "node:url";
+
+// 从 vite 里面引入 defineConfig，该方法用于定义 vite 配置
+import { defineConfig } from "vite";
+
+// 引入 @vitejs/plugin-vue 这个插件，让 vite 能够支持对 vue 的处理
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  cacheDir: ".vite",
+  // 要使用的插件
+  plugins: [vue()],
+  resolve: {
+    // 定义了一个别名映射
+    // @ ---> src
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});

package/vitest.config.js

@@ -0,0 +1,12 @@
+import { mergeConfig, defineConfig } from "vite";
+// 引入 vite.config.js 中导出的配置
+import viteConfig from "./vite.config";
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: "jsdom"
+    },
+  })
+);