types(Layout): use tsx

src/row/index.tsx

@@ -0,0 +1,109 @@
+import { provide, computed, reactive, PropType, ComputedRef } from 'vue';
+import { createNamespace } from '../utils';
+
+const [createComponent, bem] = createNamespace('row');
+
+export const ROW_KEY = 'vanRow';
+
+export type RowSpaces = { left?: number; right: number }[];
+
+export type RowChild = () => number;
+
+export type RowProvide = {
+  spaces: ComputedRef<RowSpaces>;
+  children: RowChild[];
+};
+
+export type RowAlign = 'top' | 'center' | 'bottom';
+
+export type RowJustify =
+  | 'start'
+  | 'end'
+  | 'center'
+  | 'space-around'
+  | 'space-between';
+
+export default createComponent({
+  props: {
+    type: String as PropType<'flex'>,
+    align: String as PropType<RowAlign>,
+    justify: String as PropType<RowJustify>,
+    tag: {
+      type: String as PropType<keyof HTMLElementTagNameMap>,
+      default: 'div',
+    },
+    gutter: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+
+  setup(props, { slots }) {
+    const children = reactive<RowChild[]>([]);
+
+    const groups = computed(() => {
+      const groups: number[][] = [[]];
+
+      let totalSpan = 0;
+      children.forEach((getSpan, index) => {
+        totalSpan += getSpan();
+
+        if (totalSpan > 24) {
+          groups.push([index]);
+          totalSpan -= 24;
+        } else {
+          groups[groups.length - 1].push(index);
+        }
+      });
+
+      return groups;
+    });
+
+    const spaces = computed(() => {
+      const gutter = Number(props.gutter);
+      const spaces: RowSpaces = [];
+
+      if (!gutter) {
+        return spaces;
+      }
+
+      groups.value.forEach((group) => {
+        const averagePadding = (gutter * (group.length - 1)) / group.length;
+
+        group.forEach((item, index) => {
+          if (index === 0) {
+            spaces.push({ right: averagePadding });
+          } else {
+            const left = gutter - spaces[item - 1].right;
+            const right = averagePadding - left;
+            spaces.push({ left, right });
+          }
+        });
+      });
+
+      return spaces;
+    });
+
+    provide(ROW_KEY, {
+      spaces,
+      children,
+    });
+
+    return () => {
+      const { tag, type, align, justify } = props;
+      const flex = type === 'flex';
+
+      return (
+        <tag
+          class={bem({
+            flex,
+            [`align-${align}`]: flex && align,
+            [`justify-${justify}`]: flex && justify,
+          })}
+        >
+          {slots.default?.()}
+        </tag>
+      );
+    };
+  },
+});