feat: add space

components/space/item.tsx

@@ -0,0 +1,74 @@
+import {
+  booleanType,
+  filterEmpty,
+  numberType,
+  someType,
+  stringType,
+  vNodeType
+} from '@v-c/utils'
+import type { CSSProperties, ExtractPropTypes, VNodeChild } from 'vue'
+import { defineComponent } from 'vue'
+import { useSpaceContextState } from './index'
+
+export const itemProps = {
+  className: stringType(),
+  children: vNodeType(),
+  index: numberType(),
+  direction: stringType<'horizontal' | 'vertical'>(),
+  marginDirection: stringType<'marginLeft' | 'marginRight'>(),
+  split: someType<string | (() => VNodeChild) | VNodeChild>([
+    String,
+    Function,
+    Object
+  ]),
+  wrap: booleanType()
+}
+
+export type ItemProps = ExtractPropTypes<typeof itemProps>
+
+const Item = defineComponent({
+  name: 'VcSpaceItem',
+  props: itemProps,
+  setup(props, { attrs, slots }) {
+    const { supportFlexGap, latestIndex, verticalSize, horizontalSize } =
+      useSpaceContextState()
+    return () => {
+      const { direction, index, marginDirection, split, wrap } = props
+      const children = slots.default?.()
+      if (!children || filterEmpty(children).length === 0) {
+        return null
+      }
+      let style: CSSProperties = {}
+      if (!supportFlexGap.value) {
+        if (direction === 'vertical') {
+          if (index < latestIndex.value) {
+            style.marginBottom = `${horizontalSize.value / (split ? 2 : 1)}px`
+          }
+        } else {
+          style = {
+            ...(index < latestIndex.value &&
+              ({
+                [marginDirection]: `${horizontalSize.value / (split ? 2 : 1)}px`
+              } as CSSProperties)),
+            ...(wrap && { paddingBottom: `${verticalSize.value}px` })
+          }
+        }
+      }
+
+      return (
+        <>
+          <div class={attrs.class} style={style}>
+            {children}
+          </div>
+          {index < latestIndex.value && split && (
+            <span class={`${attrs.class}-split`} style={style}>
+              {split}
+            </span>
+          )}
+        </>
+      )
+    }
+  }
+})
+
+export default Item