♻️(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,135 +1,148 @@
-<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",
-  align?: "start" | "end" | "center" | "baseline";
+  props: {
-  /* 间距方向 */
+    /* 对齐方式 */
-  direction?: "horizontal" | "vertical";
+    align: {
-  /* 子元素是否填充父容器 */
+      type: String as PropType<"start" | "end" | "center" | "baseline">,
-  fill?: boolean;
+    },
-  /* 间距大小 */
+    /* 间距方向 */
-  size?: SpaceSize | [SpaceSize, SpaceSize];
+    direction: {
-  /* 是否自动折行 */
+      type: String as PropType<"horizontal" | "vertical">,
-  wrap?: boolean;
+      default: "horizontal",
-}
+    },
-
+    /* 子元素是否填充父容器 */
-const props = withDefaults(defineProps<LaySpaceProps>(), {
+    fill: {
-  direction: "horizontal",
+      type: Boolean,
-  size: "sm",
+      default: false,
-});
+    },
-
+    /* 间距大小 */
-const slots = useSlots();
+    size: {
-
+      type: [Number, String, Array] as PropType<
-const computAlign = computed(
+        SpaceSize | [SpaceSize, SpaceSize]
-  () => props.align ?? (props.direction === "horizontal" ? "center" : "")
+      >,
-);
+      default: "sm",
-
+    },
-const extractChildren = () => {
+    /* 是否自动折行 */
-  const result: VNode[] = [];
+    wrap: {
-  const children = slots.default && (slots?.default() as VNodeArrayChildren);
+      type: Boolean,
-  const elementData = Array.isArray(children) ? [...children] : [];
+      default: false,
-
+    },
-  while (elementData.length) {
-    const vnode = elementData.shift();
-
-    if (vnode === null) continue;
-
-    if (Array.isArray(vnode)) {
-      elementData.unshift(...vnode);
-    }
-
-    if (!isVNode(vnode) || vnode.type === Comment) continue;
-
-    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
-      elementData.unshift(vnode.children);
-    } else if (typeof vnode === "string" || typeof vnode === "number") {
-      result.push(createTextVNode(vnode));
-    } else {
-      result.push(vnode);
-    }
-  }
-
-  return result;
-};
-
-const spaceClass = computed(() => [
-  "layui-space",
-  {
-    [`layui-space-align-${props.align}`]: computAlign.value,
-    [`layui-space-${props.direction}`]: props.direction,
-    [`layui-space-wrap`]: props.wrap,
-    [`layui-space-fill`]: props.fill,
   },
-]);
 
-const spaceStyle = computed(() => {
+  setup(props, { slots }) {
-  const sizeMap = { xs: "4px", sm: "8px", md: "16px", lg: "24px" };
+    const computAlign = computed(
-  let gap = "";
+      () => props.align ?? (props.direction === "horizontal" ? "center" : "")
-
-  if (Array.isArray(props.size)) {
-    gap = props.size
-      .map((size) => {
-        if (typeof size === "number") {
-          return `${size}px`;
-        }
-        if (typeof size === "string") {
-          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;
-  } else if (typeof props.size === "number") {
-    gap = `${props.size}px`;
-  }
-
-  return {
-    gap,
-  };
-});
-
-const itemStyle = computed<StyleValue>(() => [
-  props.fill ? { flexGrow: 1, minWidth: "100%" } : {},
-]);
-
-const children = extractChildren();
-
-const renderSpaceItems = () =>
-  children.map((child, index) => {
-    return h(
-      "div",
-      {
-        class: "layui-space-item",
-        style: itemStyle.value,
-      },
-      h(child)
     );
-  });
+
+    const extractChildren = () => {
+      const result: VNode[] = [];
+      const children =
+        slots.default && (slots?.default() as VNodeNormalizedChildren);
+      const elementData = Array.isArray(children) ? [...children] : [];
+
+      while (elementData.length) {
+        const vnode = elementData.shift();
+
+        if (vnode === null) continue;
+
+        if (Array.isArray(vnode)) {
+          elementData.unshift(...vnode);
+        }
+
+        if (!isVNode(vnode) || vnode.type === Comment) continue;
+
+        if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+          elementData.unshift(vnode.children);
+        } else if (typeof vnode === "string" || typeof vnode === "number") {
+          result.push(createTextVNode(vnode));
+        } else {
+          result.push(vnode);
+        }
+      }
+
+      return result;
+    };
+
+    const spaceClass = computed(() => [
+      "layui-space",
+      {
+        [`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<StyleValue>(() => {
+      const sizeMap = { xs: "4px", sm: "8px", md: "16px", lg: "24px" };
+      let gap = "";
+
+      if (Array.isArray(props.size)) {
+        gap = props.size
+          .map((size) => {
+            if (typeof size === "number") {
+              return `${size}px`;
+            }
+            if (typeof size === "string") {
+              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;
+      } else if (typeof props.size === "number") {
+        gap = `${props.size}px`;
+      }
+
+      return {
+        gap,
+      };
+    });
+
+    const itemStyle = computed<StyleValue>(() => [
+      props.fill ? { flexGrow: 1, minWidth: "100%" } : {},
+    ]);
+
+    return () => {
+      const children = extractChildren();
+
+      return (
+        <div class={spaceClass.value} style={spaceStyle.value}>
+          {children.map((child, index) => {
+            return (
+              <div
+                key={`item-${index}`}
+                class="layui-space-item"
+                style={itemStyle.value}
+              >
+                {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,