feat: add space

components/_util/hooks/flex-gap-support.ts

@@ -0,0 +1,12 @@
+import { useState } from '@v-c/utils'
+import { onMounted } from 'vue'
+import { detectFlexGapSupported } from '../style-checker'
+
+export default () => {
+  const [flexible, setFlexible] = useState(false)
+
+  onMounted(() => {
+    setFlexible(detectFlexGapSupported())
+  })
+  return flexible
+}

components/_util/style-checker.ts

@@ -0,0 +1,32 @@
+import { canUseDom } from '@v-c/utils'
+
+export const canUseDocElement = () =>
+  canUseDom() && window.document.documentElement
+
+let flexGapSupported: boolean
+export const detectFlexGapSupported = () => {
+  if (!canUseDocElement()) {
+    return false
+  }
+
+  if (flexGapSupported !== undefined) {
+    return flexGapSupported
+  }
+
+  // create flex container with row-gap set
+  const flex = document.createElement('div')
+  flex.style.display = 'flex'
+  flex.style.flexDirection = 'column'
+  flex.style.rowGap = '1px'
+
+  // create two, elements inside it
+  flex.appendChild(document.createElement('div'))
+  flex.appendChild(document.createElement('div'))
+
+  // append to the DOM (needed to obtain scrollHeight)
+  document.body.appendChild(flex)
+  flexGapSupported = flex.scrollHeight === 1 // flex container should be 1px high from the row-gap
+  document.body.removeChild(flex)
+
+  return flexGapSupported
+}