element3-core - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

src/components/button/Button.cy.ts

+import { mount } from "@cypress/vue";
+import { ref } from "vue";
+import Button from "./Button";
+describe("Button", () => {
+  it("init", () => {
+    mount(Button, {
+      slots: {
+        default: "click",
+      },
+    });
+  });
+
+  it("enter", () => {
+    const Comp = {
+      template: `
+        <div>
+        {{boo}}
+        <Button v-model="boo">btn</Button> 
+        </div>
+      `,
+      components: {
+        Button,
+      },
+      setup() {
+        const boo = ref(true);
+
+        return {
+          boo,
+        };
+      },
+    };
+
+    mount(Comp);
+
+    cy.contains("true");
+    cy.get("button").click();
+    cy.contains("false");
+  });
+
+  it("slots", () => {
+    const Comp = {
+      template: `
+        <div>
+        <Button>hi,element3-core button</Button>
+        </div>
+      `,
+      components: {
+        Button,
+      },
+    };
+
+    mount(Comp);
+
+    cy.contains("hi,element3-core button");
+  });
+});

src/components/button/Button.tsx

+// 状态：
+// v-model：
+// - 按下 true
+// - 抬起 false
+
+import { defineComponent, h } from "vue";
+export default defineComponent({
+  props: ["modelValue"],
+  setup(props, { emit }) {
+    const enter = () => {
+      emit("update:modelValue", true);
+    };
+
+    const putUp = () => {
+      emit("update:modelValue", false);
+    };
+
+    const onMouseup = () => {
+      putUp();
+    };
+
+    const onMousedown = () => {
+      enter();
+    };
+
+    return {
+      onMouseup,
+      onMousedown,
+    };
+  },
+
+  render() {
+    const children = this.$slots.default?.() || [];
+    // TODO 使用 jsx 可以优化生成的 vnode
+    return h(
+      "button",
+      { onMouseup: this.onMouseup, onMousedown: this.onMousedown },
+      children
+    );
+  },
+});

src/components/button/index.ts

+import Button from "./Button";
+
+export { Button };

package.json

 {
   "name": "element3-core",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "headless ui components library",
@@ -5,0 +5,0 @@ "main": "dist/element3-core.esm.js",

src/components/switch/Switch.cy.ts

@@ -6,3 +6,7 @@ import { mount } from "@cypress/vue";
   it("init", () => {
-    mount(Switch);
+    mount(Switch, {
+      slots: {
+        default: "switch",
+      },
+    });
   });
@@ -15,3 +19,3 @@
         {{boo}}
-        <Switch v-model="boo"></Switch> 
+        <Switch v-model="boo">switch</Switch> 
         </div>
@@ -18,0 +22,0 @@ `,

src/components/switch/Switch.tsx

@@ -20,5 +20,5 @@ import { defineComponent, h } from "vue";
     const children = this.$slots.default?.() || [];
-    // todo 使用 jsx 可以优化生成的 vnode
+    // TODO 使用 jsx 可以优化生成的 vnode
     return h("button", { onClick: this.onClick }, children);
   },
 });

src/main.ts

 export { Switch } from "./components/switch";
+export { Button } from "./components/button";

No alert changes

Improved metrics

Total package byte prevSize

6217

41.75%

Number of package files

12

33.33%

Lines of code

186

95.79%

No dependency changes