♻️(component): [space} 切换至 tsx

package.json

@@ -51,6 +51,7 @@
     "@types/node": "^16.11.9",
     "@types/uuid": "^8.3.4",
     "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/server-renderer": "^3.2.37",
     "less": "^4.1.3",

package/component/script/build.all.ts

@@ -1,5 +1,6 @@
 import { UserConfigExport } from "vite";
 import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
 import { resolve } from "path";
 
 export default (): UserConfigExport => {
@@ -13,7 +14,7 @@ export default (): UserConfigExport => {
         },
       ],
     },
-    plugins: [vue()],
+    plugins: [vue(), vueJsx],
     build: {
       cssCodeSplit: false,
       outDir: "lib",

package/component/script/build.es.ts

@@ -1,5 +1,6 @@
 import { UserConfigExport } from "vite";
 import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
 import { resolve } from "path";
 import * as fs from "fs";
 
@@ -39,6 +40,8 @@ const matchModule: string[] = [
   "scroll",
   "radio",
   "empty",
+  "dropdownMenu",
+  "dropdownMenuItem",
 ];
 
 export default (): UserConfigExport => {
@@ -60,7 +63,7 @@ export default (): UserConfigExport => {
       },
       postcss: {},
     },
-    plugins: [vue()],
+    plugins: [vue(), vueJsx()],
     build: {
       cssCodeSplit: true,
       emptyOutDir: true,

package/component/script/build.umd.ts

@@ -1,5 +1,6 @@
 import { UserConfigExport } from "vite";
 import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
 import { resolve } from "path";
 
 export default (): UserConfigExport => {
@@ -13,7 +14,7 @@ export default (): UserConfigExport => {
         },
       ],
     },
-    plugins: [vue()],
+    plugins: [vue(), vueJsx],
     build: {
       cssCodeSplit: false,
       outDir: "umd",

package/component/src/component/space/index.vue

@@ -1,53 +1,60 @@
-<script lang="ts">
+<script lang="tsx">
-export default {
-  name: "LaySpace",
-};
-</script>
-<script lang="ts" setup>
 import "./index.less";
 import {
   computed,
-  h,
-  useSlots,
   Comment,
   VNode,
   Fragment,
   isVNode,
   createTextVNode,
-  VNodeArrayChildren,
   StyleValue,
+  defineComponent,
+  PropType,
+  VNodeNormalizedChildren,
 } from "vue";
-import RenderFunction from "../_components/renderFunction";
 
 export type SpaceSize = "lg" | "md" | "sm" | "xs" | number | string;
 
-export interface LaySpaceProps {
+export default defineComponent({
+  name: "LaySpace",
+  props: {
     /* 对齐方式 */
-  align?: "start" | "end" | "center" | "baseline";
+    align: {
+      type: String as PropType<"start" | "end" | "center" | "baseline">,
+    },
     /* 间距方向 */
-  direction?: "horizontal" | "vertical";
+    direction: {
+      type: String as PropType<"horizontal" | "vertical">,
+      default: "horizontal",
+    },
     /* 子元素是否填充父容器 */
-  fill?: boolean;
+    fill: {
+      type: Boolean,
+      default: false,
+    },
     /* 间距大小 */
-  size?: SpaceSize | [SpaceSize, SpaceSize];
+    size: {
+      type: [Number, String, Array] as PropType<
+        SpaceSize | [SpaceSize, SpaceSize]
+      >,
+      default: "sm",
+    },
     /* 是否自动折行 */
-  wrap?: boolean;
+    wrap: {
-}
+      type: Boolean,
-
+      default: false,
-const props = withDefaults(defineProps<LaySpaceProps>(), {
+    },
-  direction: "horizontal",
+  },
-  size: "sm",
-});
-
-const slots = useSlots();
 
+  setup(props, { slots }) {
     const computAlign = computed(
       () => props.align ?? (props.direction === "horizontal" ? "center" : "")
     );
 
     const extractChildren = () => {
       const result: VNode[] = [];
-  const children = slots.default && (slots?.default() as VNodeArrayChildren);
+      const children =
+        slots.default && (slots?.default() as VNodeNormalizedChildren);
       const elementData = Array.isArray(children) ? [...children] : [];
 
       while (elementData.length) {
@@ -76,14 +83,14 @@ const extractChildren = () => {
     const spaceClass = computed(() => [
       "layui-space",
       {
-    [`layui-space-align-${props.align}`]: computAlign.value,
+        [`layui-space-align-${computAlign.value}`]: computAlign.value,
         [`layui-space-${props.direction}`]: props.direction,
         [`layui-space-wrap`]: props.wrap,
         [`layui-space-fill`]: props.fill,
       },
     ]);
 
-const spaceStyle = computed(() => {
+    const spaceStyle = computed<StyleValue>(() => {
       const sizeMap = { xs: "4px", sm: "8px", md: "16px", lg: "24px" };
       let gap = "";
 
@@ -94,13 +101,16 @@ const spaceStyle = computed(() => {
               return `${size}px`;
             }
             if (typeof size === "string") {
-          return sizeMap[props.size as keyof Omit<SpaceSize, number>] || size;
+              return (
+                sizeMap[props.size as keyof Omit<SpaceSize, number>] || size
+              );
             }
             return size;
           })
           .join(" ");
       } else if (typeof props.size === "string") {
-    gap = sizeMap[props.size as keyof Omit<SpaceSize, string>] || props.size;
+        gap =
+          sizeMap[props.size as keyof Omit<SpaceSize, string>] || props.size;
       } else if (typeof props.size === "number") {
         gap = `${props.size}px`;
       }
@@ -114,22 +124,25 @@ const itemStyle = computed<StyleValue>(() => [
       props.fill ? { flexGrow: 1, minWidth: "100%" } : {},
     ]);
 
+    return () => {
       const children = extractChildren();
 
-const renderSpaceItems = () =>
+      return (
-  children.map((child, index) => {
+        <div class={spaceClass.value} style={spaceStyle.value}>
-    return h(
+          {children.map((child, index) => {
-      "div",
+            return (
-      {
+              <div
-        class: "layui-space-item",
+                key={`item-${index}`}
-        style: itemStyle.value,
+                class="layui-space-item"
-      },
+                style={itemStyle.value}
-      h(child)
+              >
+                {child}
+              </div>
             );
+          })}
+        </div>
+      );
+    };
+  },
 });
 </script>
-<template>
-  <div :class="spaceClass" :style="spaceStyle">
-    <RenderFunction :renderFunc="renderSpaceItems" />
-  </div>
-</template>

package/document-component/src/plugin/all-plugins.ts

@@ -1,4 +1,5 @@
 import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
 import Markdown from "vite-plugin-md";
 import container from "markdown-it-container";
 import preWrapper from "./pre-wrapper";
@@ -17,6 +18,7 @@ const plugins = [
   vue({
     include: [/\.vue$/, /\.md$/],
   }),
+  vueJsx(),
   Markdown({
     markdownItOptions: {
       html: true,