element3-core - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

src/components/switch/Switch.tsx

+import { defineComponent, h } from "vue";
+export default defineComponent({
+  props: ["modelValue"],
+  setup(props, { emit }) {
+    const toggle = () => {
+      emit("update:modelValue", !props.modelValue);
+    };
+
+    const onClick = () => {
+      toggle();
+    };
+
+    return {
+      onClick,
+    };
+  },
+
+  render() {
+    const children = this.$slots.default?.() || [];
+    // todo 使用 jsx 可以优化生成的 vnode
+    return h("button", { onClick: this.onClick }, children);
+  },
+});

dist/element3-core.esm.js

 import { defineComponent, h } from 'vue';
 
-var script = defineComponent({
+var Switch = defineComponent({
+  props: ["modelValue"],
+  setup(props, { emit }) {
+    const toggle = () => {
+      emit("update:modelValue", !props.modelValue);
+    };
+
+    const onClick = () => {
+      toggle();
+    };
+
+    return {
+      onClick,
+    };
+  },
+
   render() {
-    return h("button", "hi");
+    const children = this.$slots.default?.() || [];
+    // todo 使用 jsx 可以优化生成的 vnode
+    return h("button", { onClick: this.onClick }, children);
   },
 });
 
-script.__file = "src/components/switch/Switch.vue";
-
-export { script as Switch };
+export { Switch };

package.json

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

src/components/switch/index.ts

@@ -1,3 +0,3 @@
-import Switch from "./Switch.vue";
+import Switch from "./Switch";
 
 export { Switch };

src/components/switch/Switch.cy.ts

 import { mount } from "@cypress/vue";
-import Switch from "./Switch.vue";
+import { ref } from "vue";
+import Switch from "./Switch";
 describe("Switch", () => {
-  it("test", () => {
+  it("init", () => {
     mount(Switch);
   });
+
+  it("toggle", () => {
+    const Comp = {
+      template: `
+        <div>
+        {{boo}}
+        <Switch v-model="boo"></Switch> 
+        </div>
+      `,
+      components: {
+        Switch,
+      },
+      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>
+        <Switch>hi,element3-core switch</Switch> 
+        </div>
+      `,
+      components: {
+        Switch,
+      },
+    };
+
+    mount(Comp);
+
+    cy.contains("hi,element3-core switch");
+  });
 });

src/components/switch/Switch.vue

-<script lang="ts">
-import { defineComponent, h } from "vue";
-export default defineComponent({
-  render() {
-    return h("button", "hi");
-  },
-});
-</script>

No alert changes

Improved metrics

Total package byte prevSize

4386

44.09%

Lines of code

95

295.83%

No dependency changes