element3-core - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/element3-core.esm.js

@@ -1,180 +0,232 @@
-import { defineComponent, h, inject, unref, computed, provide } from 'vue';
+import { defineComponent, createVNode, isVNode, inject, unref, computed, provide } from 'vue';
 
 var Switch = 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);
-    },
+  props: ["modelValue"],
+
+  setup(props, {
+    emit
+  }) {
+    const toggle = () => {
+      emit("update:modelValue", !props.modelValue);
+    };
+
+    const onClick = () => {
+      toggle();
+    };
+
+    return {
+      onClick
+    };
+  },
+
+  render() {
+    var _this$$slots$default, _this$$slots;
+
+    const children = ((_this$$slots$default = (_this$$slots = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || [];
+    return createVNode("button", {
+      "onClick": this.onClick
+    }, [children]);
+  }
+
 });
 
-// 状态：
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
 var Button = 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);
-    },
+  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() {
+    var _this$$slots$default, _this$$slots;
+
+    const children = ((_this$$slots$default = (_this$$slots = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || []; // 动态创建标签
+
+    const Tag = "button";
+    return createVNode(Tag, {
+      "onMouseup": this.onMouseup,
+      "onMousedown": this.onMousedown
+    }, _isSlot(children) ? children : {
+      default: () => [children]
+    });
+  }
+
 });
 
 var SliderButton = defineComponent({
-    setup() {
-        const context = inject("sliderContext");
-        let dragging = false;
-        const onDragEnd = () => {
-            dragEnd();
-            removeEventListeners();
-        };
-        const onMousedown = (e) => {
-            dragStart(e);
-            addEventListeners();
-        };
-        function removeEventListeners() {
-            window.removeEventListener("mousemove", onDragging);
-            window.removeEventListener("touchmove", onDragging);
-            window.removeEventListener("mouseup", onDragEnd);
-            window.removeEventListener("touchend", onDragEnd);
-        }
-        function addEventListeners() {
-            window.addEventListener("mousemove", onDragging);
-            window.addEventListener("touchmove", onDragging);
-            window.addEventListener("mouseup", onDragEnd);
-            window.addEventListener("touchend", onDragEnd);
-        }
-        function dragEnd() {
-            dragging = false;
-        }
-        let startX = 0;
-        let startY = 0;
-        let startPosition = 0;
-        const dragStart = (e) => {
-            dragging = true;
-            if (e.type === "touchstart") {
-                e.clientY = e.touches[0].clientY;
-                e.clientX = e.touches[0].clientX;
-            }
-            startY = e.clientY;
-            startX = e.clientX;
-            startPosition = parseFloat(unref(context.currentPosition));
-        };
-        const onDragging = (e) => {
-            if (!dragging)
-                return;
-            if (e.type === "touchmove") {
-                e.clientY = e.touches[0].clientY;
-                e.clientX = e.touches[0].clientX;
-            }
-            if (context.vertical) {
-                // 上下
-                const currentY = e.clientY;
-                const sliderHeight = 400;
-                let diffY = ((currentY - startY) / sliderHeight) * 100;
-                context.setPosition(diffY + startPosition);
-            }
-            else {
-                // 处理 左右 移动
-                const currentX = e.clientX;
-                const sliderWidth = 400;
-                let diffX = ((currentX - startX) / sliderWidth) * 100;
-                context.setPosition(diffX + startPosition);
-            }
-        };
-        return {
-            onMousedown,
-        };
-    },
-    render() {
-        const children = this.$slots.default?.() || [];
-        return h("div", {
-            onMousedown: this.onMousedown,
-        }, children);
-    },
+  setup() {
+    const context = inject("sliderContext");
+    let dragging = false;
+
+    const onDragEnd = () => {
+      dragEnd();
+      removeEventListeners();
+    };
+
+    const onMousedown = e => {
+      dragStart(e);
+      addEventListeners();
+    };
+
+    function removeEventListeners() {
+      window.removeEventListener("mousemove", onDragging);
+      window.removeEventListener("touchmove", onDragging);
+      window.removeEventListener("mouseup", onDragEnd);
+      window.removeEventListener("touchend", onDragEnd);
+    }
+
+    function addEventListeners() {
+      window.addEventListener("mousemove", onDragging);
+      window.addEventListener("touchmove", onDragging);
+      window.addEventListener("mouseup", onDragEnd);
+      window.addEventListener("touchend", onDragEnd);
+    }
+
+    function dragEnd() {
+      dragging = false;
+    }
+
+    let startX = 0;
+    let startY = 0;
+    let startPosition = 0;
+
+    const dragStart = e => {
+      dragging = true;
+
+      if (e.type === "touchstart") {
+        e.clientY = e.touches[0].clientY;
+        e.clientX = e.touches[0].clientX;
+      }
+
+      startY = e.clientY;
+      startX = e.clientX;
+      startPosition = parseFloat(unref(context.currentPosition));
+    };
+
+    const onDragging = e => {
+      if (!dragging) return;
+
+      if (e.type === "touchmove") {
+        e.clientY = e.touches[0].clientY;
+        e.clientX = e.touches[0].clientX;
+      }
+
+      if (context.vertical) {
+        // 上下
+        const currentY = e.clientY;
+        const sliderHeight = 400;
+        let diffY = (currentY - startY) / sliderHeight * 100;
+        context.setPosition(diffY + startPosition);
+      } else {
+        // 处理 左右 移动
+        const currentX = e.clientX;
+        const sliderWidth = 400;
+        let diffX = (currentX - startX) / sliderWidth * 100;
+        context.setPosition(diffX + startPosition);
+      }
+    };
+
+    return {
+      onMousedown
+    };
+  },
+
+  render() {
+    var _this$$slots$default, _this$$slots;
+
+    const children = ((_this$$slots$default = (_this$$slots = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || [];
+    return createVNode("div", {
+      "onMousedown": this.onMousedown
+    }, [children]);
+  }
+
 });
 
 var Slider = defineComponent({
-    props: {
-        modelValue: {
-            type: Number,
-            default: 0,
-        },
-        min: {
-            type: Number,
-            default: 0,
-        },
-        max: {
-            type: Number,
-            default: 100,
-        },
-        step: {
-            type: Number,
-            default: 1,
-        },
-        vertical: {
-            type: Boolean,
-            default: false,
-        },
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
     },
-    setup(props, { emit }) {
-        const currentPosition = computed(() => `${((props.modelValue - unref(props.min)) /
-            (unref(props.max) - unref(props.min))) *
-            100}%`);
-        const api = {
-            vertical: props.vertical,
-            currentPosition,
-            setPosition(newPosition) {
-                if (newPosition === null || isNaN(newPosition))
-                    return;
-                if (newPosition < 0) {
-                    newPosition = 0;
-                }
-                else if (newPosition > 100) {
-                    newPosition = 100;
-                }
-                const lengthPerStep = 100 / ((props.max - props.min) / props.step);
-                console.log(props.step);
-                const steps = Math.round(newPosition / lengthPerStep);
-                let value = steps * lengthPerStep * (props.max - props.min) * 0.01 + props.min;
-                value = parseFloat(value.toFixed(1));
-                emit("update:modelValue", value);
-            },
-        };
-        provide("sliderContext", api);
+    min: {
+      type: Number,
+      default: 0
     },
-    render() {
-        const children = this.$slots.default?.() || [];
-        return h("div", children);
+    max: {
+      type: Number,
+      default: 100
     },
+    step: {
+      type: Number,
+      default: 1
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  setup(props, {
+    emit
+  }) {
+    const currentPosition = computed(() => `${(props.modelValue - unref(props.min)) / (unref(props.max) - unref(props.min)) * 100}%`);
+    const api = {
+      vertical: props.vertical,
+      currentPosition,
+
+      setPosition(newPosition) {
+        if (newPosition === null || isNaN(newPosition)) return;
+
+        if (newPosition < 0) {
+          newPosition = 0;
+        } else if (newPosition > 100) {
+          newPosition = 100;
+        }
+
+        const lengthPerStep = 100 / ((props.max - props.min) / props.step);
+        console.log(props.step);
+        const steps = Math.round(newPosition / lengthPerStep);
+        let value = steps * lengthPerStep * (props.max - props.min) * 0.01 + props.min;
+        value = parseFloat(value.toFixed(1));
+        emit("update:modelValue", value);
+      }
+
+    };
+    provide("sliderContext", api);
+  },
+
+  render() {
+    var _this$$slots$default, _this$$slots;
+
+    const children = ((_this$$slots$default = (_this$$slots = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || [];
+    return createVNode("div", null, [children]);
+  }
+
 });
 
 export { Button as E3Button, Slider as E3Slider, SliderButton as E3SliderButton, Switch as E3Switch };

package.json

 {
   "name": "element3-core",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "headless ui components library",
@@ -32,6 +32,10 @@ "main": "dist/element3-core.esm.js",
   "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
     "@cypress/vite-dev-server": "^1.2.7",
     "@cypress/vue": "^3.0.1",
+    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/compiler-sfc": "^3.0.11",
@@ -38,0 +42,0 @@ "cypress": "^7.3.0",

README.md

 # element3-core
-headless ui components library 
+
+headless ui components library
+
+## TODO
+
+- [x] 支持 jsx
+- [ ] 支持 storebook

src/components/button/Button.tsx

@@ -17,3 +17,2 @@ // 状态：
     };
-
     const onMouseup = () => {
@@ -35,9 +34,12 @@ putUp();
     const children = this.$slots.default?.() || [];
-    // TODO 使用 jsx 可以优化生成的 vnode
-    return h(
-      "button",
-      { onMouseup: this.onMouseup, onMousedown: this.onMousedown },
-      children
+
+    // 动态创建标签
+    const Tag = "button";
+
+    return (
+      <Tag onMouseup={this.onMouseup} onMousedown={this.onMousedown}>
+        {children}
+      </Tag>
     );
   },
 });

src/components/slider/Slider.tsx

@@ -71,4 +71,5 @@ import { Ref, unref, defineComponent, h, provide, computed } from "vue";
     const children = this.$slots.default?.() || [];
-    return h("div", children);
+
+    return <div>{children}</div>;
   },
 });

src/components/slider/SliderButton.tsx

@@ -83,10 +83,4 @@ import { defineComponent, h, unref, inject } from "vue";
     const children = this.$slots.default?.() || [];
-    return h(
-      "div",
-      {
-        onMousedown: this.onMousedown,
-      },
-      children
-    );
+    return <div onMousedown={this.onMousedown}>{children}</div>;
   },
 });

src/components/switch/Switch.tsx

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

No alert changes

Improved metrics

Total package byte prevSize

17720

0.1%

Lines of code

582

1.04%

Number of lines in readme file

9

200%

Worsened metrics

Dev dependency count

16

33.33%

No dependency changes