Initial commit from monorepo

app/components/ui/Stack.vue

@@ -0,0 +1,74 @@
+<template>
+  <component
+    :is="tag"
+    :class="['flex', directionClass, gapClass, alignClass, justifyClass, wrapClass, fullHeightClass]"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  gap: {
+    type: [String, Number],
+    default: 6,
+  },
+  direction: {
+    type: String,
+    default: 'col', // col | row
+  },
+  align: {
+    type: String,
+    default: 'stretch', // start | center | end | stretch
+  },
+  justify: {
+    type: String,
+    default: 'start', // start | center | end | between
+  },
+  wrap: {
+    type: Boolean,
+    default: false,
+  },
+  fullHeight: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const gapMap: Record<string, string> = {
+  '1': 'gap-1',
+  '2': 'gap-2',
+  '3': 'gap-3',
+  '4': 'gap-4',
+  '5': 'gap-5',
+  '6': 'gap-6',
+  '8': 'gap-8',
+  '10': 'gap-10',
+  '12': 'gap-12',
+}
+
+const alignMap: Record<string, string> = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+}
+
+const justifyMap: Record<string, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+}
+
+const gapClass = computed(() => gapMap[String(props.gap)] || gapMap['6'])
+const alignClass = computed(() => alignMap[props.align] || alignMap.start)
+const justifyClass = computed(() => justifyMap[props.justify] || justifyMap.start)
+const directionClass = computed(() => (props.direction === 'row' ? 'flex-row' : 'flex-col'))
+const wrapClass = computed(() => (props.wrap ? 'flex-wrap' : ''))
+const fullHeightClass = computed(() => (props.fullHeight ? 'min-h-screen' : ''))
+</script>