first

src/components/base/VGridItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+export type VGridJustifySelf = 'start' | 'end' | 'center' | 'stretch' | 'auto'
+export type VGridAlignSelf = 'start' | 'end' | 'center' | 'stretch' | 'auto'
+
+export interface VGridItemProps {
+  gridColumnStart?: string | number
+  gridColumnEnd?: string | number
+  gridRowStart?: string | number
+  gridRowEnd?: string | number
+  justifySelf?: VGridJustifySelf
+  alignSelf?: VGridAlignSelf
+  placeSelf?: string
+}
+
+const props = withDefaults(defineProps<VGridItemProps>(), {
+  gridColumnStart: 'auto',
+  gridColumnEnd: 'auto',
+  gridRowStart: 'auto',
+  gridRowEnd: 'auto',
+  justifySelf: 'auto',
+  alignSelf: 'auto',
+  placeSelf: 'auto',
+})
+</script>
+
+<template>
+  <div class="v-grid-item">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+.v-grid-item {
+  grid-column-start: v-bind('props.gridColumnStart');
+  grid-column-end: v-bind('props.gridColumnEnd');
+  grid-row-start: v-bind('props.gridRowStart');
+  grid-row-end: v-bind('props.gridRowEnd');
+  justify-self: v-bind('props.justifySelf');
+  align-self: v-bind('props.alignSelf');
+  /* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */
+  place-self: v-bind('props.placeSelf');
+}
+</style>