initial commit

.gitignore

@@ -0,0 +1,2 @@
+.idea/
+.fleet/

Flex.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+type GapSizes =
+    "0"
+    | "px"
+    | "0.5"
+    | "1"
+    | "1.5"
+    | "2"
+    | "2.5"
+    | "3"
+    | "3.5"
+    | "4"
+    | "5"
+    | "6"
+    | "7"
+    | "8"
+    | "9"
+    | "10"
+    | "11"
+    | "12";
+
+const props = defineProps<{
+    row?: boolean;
+    smRow?: boolean;
+    mdRow?: boolean;
+    lgRow?: boolean;
+    xlRow?: boolean;
+    txlRow?: boolean;
+    column?: boolean;
+    smColumn?: boolean;
+    mdColumn?: boolean;
+    lgColumn?: boolean;
+    xlColumn?: boolean;
+    txlColumn?: boolean;
+    wrap?: boolean;
+    grow?: boolean;
+    noGrow?: boolean;
+    shrink?: boolean;
+    noShrink?: boolean;
+    router?: boolean;
+    to?: string;
+    is?: string;
+    items?: "start" | "center" | "end";
+    smItems?: "start" | "center" | "end";
+    mdItems?: "start" | "center" | "end";
+    lgItems?: "start" | "center" | "end";
+    xlItems?: "start" | "center" | "end";
+    txlItems?: "start" | "center" | "end";
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    smJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    mdJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    lgJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    xlJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    txlJustify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    gap?: GapSizes,
+    gapX?: GapSizes,
+    gapY?: GapSizes,
+}>();
+</script>
+
+<template>
+    <NuxtLink v-if="router" :to="to" class="flex"
+              :class="{'flex-row': props.row, 'sm:flex-row': props.smRow, 'md:flex-row': props.mdRow, 'lg:flex-row': props.lgRow, 'xl:flex-row': props.xlRow, '2xl:flex-row': props.txlRow, 'flex-col': props.column, 'sm:flex-col': props.smColumn, 'md:flex-col': props.mdColumn, 'lg:flex-col': props.lgColumn, 'xl:flex-col': props.xlColumn, '2xl:flex-col': props.txlColumn, 'flex-wrap': props.wrap, 'justify-start': props.justify === 'start', 'justify-center': props.justify === 'center', 'justify-end': props.justify === 'end', 'justify-between': props.justify === 'between', 'justify-around': props.justify === 'around', 'justify-evenly': props.justify === 'evenly', 'sm:justify-start': props.smJustify === 'start', 'sm:justify-center': props.smJustify === 'center', 'sm:justify-end': props.smJustify === 'end', 'sm:justify-between': props.smJustify === 'between', 'sm:justify-around': props.smJustify === 'around', 'sm:justify-evenly': props.smJustify === 'evenly', 'md:justify-start': props.mdJustify === 'start', 'md:justify-center': props.mdJustify === 'center', 'md:justify-end': props.mdJustify === 'end', 'md:justify-between': props.mdJustify === 'between', 'md:justify-around': props.mdJustify === 'around', 'md:justify-evenly': props.mdJustify === 'evenly', 'lg:justify-start': props.lgJustify === 'start', 'lg:justify-center': props.lgJustify === 'center', 'lg:justify-end': props.lgJustify === 'end', 'lg:justify-between': props.lgJustify === 'between', 'lg:justify-around': props.lgJustify === 'around', 'lg:justify-evenly': props.lgJustify === 'evenly', 'xl:justify-start': props.xlJustify === 'start', 'xl:justify-center': props.xlJustify === 'center', 'xl:justify-end': props.xlJustify === 'end', 'xl:justify-between': props.xlJustify === 'between', 'xl:justify-around': props.xlJustify === 'around', 'xl:justify-evenly': props.xlJustify === 'evenly', '2xl:justify-start': props.txlJustify === 'start', '2xl:justify-center': props.txlJustify === 'center', '2xl:justify-end': props.txlJustify === 'end', '2xl:justify-between': props.txlJustify === 'between', '2xl:justify-around': props.txlJustify === 'around', '2xl:justify-evenly': props.txlJustify === 'evenly', 'items-start': props.items === 'start', 'items-center': props.items === 'center', 'items-end': props.items === 'end', 'sm:items-start': props.smItems === 'start', 'sm:items-center': props.smItems === 'center', 'sm:items-end': props.smItems === 'end', 'md:items-start': props.mdItems === 'start', 'md:items-center': props.mdItems === 'center', 'md:items-end': props.mdItems === 'end', 'lg:items-start': props.lgItems === 'start', 'lg:items-center': props.lgItems === 'center', 'lg:items-end': props.lgItems === 'end', 'xl:items-start': props.xlItems === 'start', 'xl:items-center': props.xlItems === 'center', 'xl:items-end': props.xlItems === 'end', '2xl:items-start': props.txlItems === 'start', '2xl:items-center': props.txlItems === 'center', '2xl:items-end': props.txlItems === 'end', 'flex-grow-0': props.noGrow, 'flex-grow': props.grow, 'flex-shrink-0': props.noShrink, 'flex-shrink': props.shrink, 'gap-0': props.gap === '0', 'gap-px': props.gap === 'px', 'gap-0.5': props.gap === '0.5', 'gap-1': props.gap === '1', 'gap-1.5': props.gap === '1.5', 'gap-2': props.gap === '2', 'gap-2.5': props.gap === '2.5', 'gap-3': props.gap === '3', 'gap-3.5': props.gap === '3.5', 'gap-4': props.gap === '4', 'gap-5': props.gap === '5', 'gap-6': props.gap === '6', 'gap-7': props.gap === '7', 'gap-8': props.gap === '8', 'gap-9': props.gap === '9', 'gap-10': props.gap === '10', 'gap-11': props.gap === '11', 'gap-12': props.gap === '12', 'gap-x-0': props.gapX === '0', 'gap-x-px': props.gapX === 'px', 'gap-x-0.5': props.gapX === '0.5', 'gap-x-1': props.gapX === '1', 'gap-x-1.5': props.gapX === '1.5', 'gap-x-2': props.gapX === '2', 'gap-x-2.5': props.gapX === '2.5', 'gap-x-3': props.gapX === '3', 'gap-x-3.5': props.gapX === '3.5', 'gap-x-4': props.gapX === '4', 'gap-x-5': props.gapX === '5', 'gap-x-6': props.gapX === '6', 'gap-x-7': props.gapX === '7', 'gap-x-8': props.gapX === '8', 'gap-x-9': props.gapX === '9', 'gap-x-10': props.gapX === '10', 'gap-x-11': props.gapX === '11', 'gap-x-12': props.gapX === '12', 'gap-y-0': props.gapY === '0', 'gap-y-px': props.gapY === 'px', 'gap-y-0.5': props.gapY === '0.5', 'gap-y-1': props.gapY === '1', 'gap-y-1.5': props.gapY === '1.5', 'gap-y-2': props.gapY === '2', 'gap-y-2.5': props.gapY === '2.5', 'gap-y-3': props.gapY === '3', 'gap-y-3.5': props.gapY === '3.5', 'gap-y-4': props.gapY === '4', 'gap-y-5': props.gapY === '5', 'gap-y-6': props.gapY === '6', 'gap-y-7': props.gapY === '7', 'gap-y-8': props.gapY === '8', 'gap-y-9': props.gapY === '9', 'gap-y-10': props.gapY === '10', 'gap-y-11': props.gapY === '11', 'gap-y-12': props.gapY === '12',}">
+        <slot/>
+    </NuxtLink>
+    <Component :is="is || 'div'" v-else class="flex"
+               :class="{'flex-row': props.row, 'sm:flex-row': props.smRow, 'md:flex-row': props.mdRow, 'lg:flex-row': props.lgRow, 'xl:flex-row': props.xlRow, '2xl:flex-row': props.txlRow, 'flex-col': props.column, 'sm:flex-col': props.smColumn, 'md:flex-col': props.mdColumn, 'lg:flex-col': props.lgColumn, 'xl:flex-col': props.xlColumn, '2xl:flex-col': props.txlColumn, 'flex-wrap': props.wrap, 'justify-start': props.justify === 'start', 'justify-center': props.justify === 'center', 'justify-end': props.justify === 'end', 'justify-between': props.justify === 'between', 'justify-around': props.justify === 'around', 'justify-evenly': props.justify === 'evenly', 'sm:justify-start': props.smJustify === 'start', 'sm:justify-center': props.smJustify === 'center', 'sm:justify-end': props.smJustify === 'end', 'sm:justify-between': props.smJustify === 'between', 'sm:justify-around': props.smJustify === 'around', 'sm:justify-evenly': props.smJustify === 'evenly', 'md:justify-start': props.mdJustify === 'start', 'md:justify-center': props.mdJustify === 'center', 'md:justify-end': props.mdJustify === 'end', 'md:justify-between': props.mdJustify === 'between', 'md:justify-around': props.mdJustify === 'around', 'md:justify-evenly': props.mdJustify === 'evenly', 'lg:justify-start': props.lgJustify === 'start', 'lg:justify-center': props.lgJustify === 'center', 'lg:justify-end': props.lgJustify === 'end', 'lg:justify-between': props.lgJustify === 'between', 'lg:justify-around': props.lgJustify === 'around', 'lg:justify-evenly': props.lgJustify === 'evenly', 'xl:justify-start': props.xlJustify === 'start', 'xl:justify-center': props.xlJustify === 'center', 'xl:justify-end': props.xlJustify === 'end', 'xl:justify-between': props.xlJustify === 'between', 'xl:justify-around': props.xlJustify === 'around', 'xl:justify-evenly': props.xlJustify === 'evenly', '2xl:justify-start': props.txlJustify === 'start', '2xl:justify-center': props.txlJustify === 'center', '2xl:justify-end': props.txlJustify === 'end', '2xl:justify-between': props.txlJustify === 'between', '2xl:justify-around': props.txlJustify === 'around', '2xl:justify-evenly': props.txlJustify === 'evenly', 'items-start': props.items === 'start', 'items-center': props.items === 'center', 'items-end': props.items === 'end', 'sm:items-start': props.smItems === 'start', 'sm:items-center': props.smItems === 'center', 'sm:items-end': props.smItems === 'end', 'md:items-start': props.mdItems === 'start', 'md:items-center': props.mdItems === 'center', 'md:items-end': props.mdItems === 'end', 'lg:items-start': props.lgItems === 'start', 'lg:items-center': props.lgItems === 'center', 'lg:items-end': props.lgItems === 'end', 'xl:items-start': props.xlItems === 'start', 'xl:items-center': props.xlItems === 'center', 'xl:items-end': props.xlItems === 'end', '2xl:items-start': props.txlItems === 'start', '2xl:items-center': props.txlItems === 'center', '2xl:items-end': props.txlItems === 'end', 'flex-grow-0': props.noGrow, 'flex-grow': props.grow, 'flex-shrink-0': props.noShrink, 'flex-shrink': props.shrink, 'gap-0': props.gap === '0', 'gap-px': props.gap === 'px', 'gap-0.5': props.gap === '0.5', 'gap-1': props.gap === '1', 'gap-1.5': props.gap === '1.5', 'gap-2': props.gap === '2', 'gap-2.5': props.gap === '2.5', 'gap-3': props.gap === '3', 'gap-3.5': props.gap === '3.5', 'gap-4': props.gap === '4', 'gap-5': props.gap === '5', 'gap-6': props.gap === '6', 'gap-7': props.gap === '7', 'gap-8': props.gap === '8', 'gap-9': props.gap === '9', 'gap-10': props.gap === '10', 'gap-11': props.gap === '11', 'gap-12': props.gap === '12', 'gap-x-0': props.gapX === '0', 'gap-x-px': props.gapX === 'px', 'gap-x-0.5': props.gapX === '0.5', 'gap-x-1': props.gapX === '1', 'gap-x-1.5': props.gapX === '1.5', 'gap-x-2': props.gapX === '2', 'gap-x-2.5': props.gapX === '2.5', 'gap-x-3': props.gapX === '3', 'gap-x-3.5': props.gapX === '3.5', 'gap-x-4': props.gapX === '4', 'gap-x-5': props.gapX === '5', 'gap-x-6': props.gapX === '6', 'gap-x-7': props.gapX === '7', 'gap-x-8': props.gapX === '8', 'gap-x-9': props.gapX === '9', 'gap-x-10': props.gapX === '10', 'gap-x-11': props.gapX === '11', 'gap-x-12': props.gapX === '12', 'gap-y-0': props.gapY === '0', 'gap-y-px': props.gapY === 'px', 'gap-y-0.5': props.gapY === '0.5', 'gap-y-1': props.gapY === '1', 'gap-y-1.5': props.gapY === '1.5', 'gap-y-2': props.gapY === '2', 'gap-y-2.5': props.gapY === '2.5', 'gap-y-3': props.gapY === '3', 'gap-y-3.5': props.gapY === '3.5', 'gap-y-4': props.gapY === '4', 'gap-y-5': props.gapY === '5', 'gap-y-6': props.gapY === '6', 'gap-y-7': props.gapY === '7', 'gap-y-8': props.gapY === '8', 'gap-y-9': props.gapY === '9', 'gap-y-10': props.gapY === '10', 'gap-y-11': props.gapY === '11', 'gap-y-12': props.gapY === '12',}">
+        <slot/>
+    </Component>
+</template>

Grid.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+    is?: string;
+    columns?: number | string;
+    smColumns?: number | string;
+    mdColumns?: number | string;
+    lgColumns?: number | string;
+    xlColumns?: number | string;
+    txlColumns?: number | string;
+    rows?: number | string;
+    smRows?: number | string;
+    mdRows?: number | string;
+    lgRows?: number | string;
+    xlRows?: number | string;
+    txlRows?: number | string;
+}>();
+</script>
+
+<template>
+    <Component :is="is || 'div'" class="grid grid-cols-1"
+               :class="{'grid-cols-1': Number(columns) === 1, 'grid-cols-2': Number(columns) === 2, 'grid-cols-3': Number(columns) === 3, 'grid-cols-4': Number(columns) === 4, 'grid-cols-5': Number(columns) === 5, 'grid-cols-6': Number(columns) === 6, 'grid-cols-7': Number(columns) === 7, 'grid-cols-8': Number(columns) === 8, 'grid-cols-9': Number(columns) === 9, 'grid-cols-10': Number(columns) === 10, 'grid-cols-11': Number(columns) === 11, 'grid-cols-12': Number(columns) === 12, 'sm:grid-cols-1': Number(smColumns) === 1, 'sm:grid-cols-2': Number(smColumns) === 2, 'sm:grid-cols-3': Number(smColumns) === 3, 'sm:grid-cols-4': Number(smColumns) === 4, 'sm:grid-cols-5': Number(smColumns) === 5, 'sm:grid-cols-6': Number(smColumns) === 6, 'sm:grid-cols-7': Number(smColumns) === 7, 'sm:grid-cols-8': Number(smColumns) === 8, 'sm:grid-cols-9': Number(smColumns) === 9, 'sm:grid-cols-10': Number(smColumns) === 10, 'sm:grid-cols-11': Number(smColumns) === 11, 'sm:grid-cols-12': Number(smColumns) === 12, 'md:grid-cols-1': Number(mdColumns) === 1, 'md:grid-cols-2': Number(mdColumns) === 2, 'md:grid-cols-3': Number(mdColumns) === 3, 'md:grid-cols-4': Number(mdColumns) === 4, 'md:grid-cols-5': Number(mdColumns) === 5, 'md:grid-cols-6': Number(mdColumns) === 6, 'md:grid-cols-7': Number(mdColumns) === 7, 'md:grid-cols-8': Number(mdColumns) === 8, 'md:grid-cols-9': Number(mdColumns) === 9, 'md:grid-cols-10': Number(mdColumns) === 10, 'md:grid-cols-11': Number(mdColumns) === 11, 'md:grid-cols-12': Number(mdColumns) === 12, 'lg:grid-cols-1': Number(lgColumns) === 1, 'lg:grid-cols-2': Number(lgColumns) === 2, 'lg:grid-cols-3': Number(lgColumns) === 3, 'lg:grid-cols-4': Number(lgColumns) === 4, 'lg:grid-cols-5': Number(lgColumns) === 5, 'lg:grid-cols-6': Number(lgColumns) === 6, 'lg:grid-cols-7': Number(lgColumns) === 7, 'lg:grid-cols-8': Number(lgColumns) === 8, 'lg:grid-cols-9': Number(lgColumns) === 9, 'lg:grid-cols-10': Number(lgColumns) === 10, 'lg:grid-cols-11': Number(lgColumns) === 11, 'lg:grid-cols-12': Number(lgColumns) === 12, 'xl:grid-cols-1': Number(xlColumns) === 1, 'xl:grid-cols-2': Number(xlColumns) === 2, 'xl:grid-cols-3': Number(xlColumns) === 3, 'xl:grid-cols-4': Number(xlColumns) === 4, 'xl:grid-cols-5': Number(xlColumns) === 5, 'xl:grid-cols-6': Number(xlColumns) === 6, 'xl:grid-cols-7': Number(xlColumns) === 7, 'xl:grid-cols-8': Number(xlColumns) === 8, 'xl:grid-cols-9': Number(xlColumns) === 9, 'xl:grid-cols-10': Number(xlColumns) === 10, 'xl:grid-cols-11': Number(xlColumns) === 11, 'xl:grid-cols-12': Number(xlColumns) === 12, '2xl:grid-cols-1': Number(txlColumns) === 1, '2xl:grid-cols-2': Number(txlColumns) === 2, '2xl:grid-cols-3': Number(txlColumns) === 3, '2xl:grid-cols-4': Number(txlColumns) === 4, '2xl:grid-cols-5': Number(txlColumns) === 5, '2xl:grid-cols-6': Number(txlColumns) === 6, '2xl:grid-cols-7': Number(txlColumns) === 7, '2xl:grid-cols-8': Number(txlColumns) === 8, '2xl:grid-cols-9': Number(txlColumns) === 9, '2xl:grid-cols-10': Number(txlColumns) === 10, '2xl:grid-cols-11': Number(txlColumns) === 11, '2xl:grid-cols-12': Number(txlColumns) === 12, 'grid-rows-1': Number(rows) === 1, 'grid-rows-2': Number(rows) === 2, 'grid-rows-3': Number(rows) === 3, 'grid-rows-4': Number(rows) === 4, 'grid-rows-5': Number(rows) === 5, 'grid-rows-6': Number(rows) === 6, 'grid-rows-7': Number(rows) === 7, 'grid-rows-8': Number(rows) === 8, 'grid-rows-9': Number(rows) === 9, 'grid-rows-10': Number(rows) === 10, 'grid-rows-11': Number(rows) === 11, 'grid-rows-12': Number(rows) === 12, 'sm:grid-rows-1': Number(smRows) === 1, 'sm:grid-rows-2': Number(smRows) === 2, 'sm:grid-rows-3': Number(smRows) === 3, 'sm:grid-rows-4': Number(smRows) === 4, 'sm:grid-rows-5': Number(smRows) === 5, 'sm:grid-rows-6': Number(smRows) === 6, 'sm:grid-rows-7': Number(smRows) === 7, 'sm:grid-rows-8': Number(smRows) === 8, 'sm:grid-rows-9': Number(smRows) === 9, 'sm:grid-rows-10': Number(smRows) === 10, 'sm:grid-rows-11': Number(smRows) === 11, 'sm:grid-rows-12': Number(smRows) === 12, 'md:grid-rows-1': Number(mdRows) === 1, 'md:grid-rows-2': Number(mdRows) === 2, 'md:grid-rows-3': Number(mdRows) === 3, 'md:grid-rows-4': Number(mdRows) === 4, 'md:grid-rows-5': Number(mdRows) === 5, 'md:grid-rows-6': Number(mdRows) === 6, 'md:grid-rows-7': Number(mdRows) === 7, 'md:grid-rows-8': Number(mdRows) === 8, 'md:grid-rows-9': Number(mdRows) === 9, 'md:grid-rows-10': Number(mdRows) === 10, 'md:grid-rows-11': Number(mdRows) === 11, 'md:grid-rows-12': Number(mdRows) === 12, 'lg:grid-rows-1': Number(lgRows) === 1, 'lg:grid-rows-2': Number(lgRows) === 2, 'lg:grid-rows-3': Number(lgRows) === 3, 'lg:grid-rows-4': Number(lgRows) === 4, 'lg:grid-rows-5': Number(lgRows) === 5, 'lg:grid-rows-6': Number(lgRows) === 6, 'lg:grid-rows-7': Number(lgRows) === 7, 'lg:grid-rows-8': Number(lgRows) === 8, 'lg:grid-rows-9': Number(lgRows) === 9, 'lg:grid-rows-10': Number(lgRows) === 10, 'lg:grid-rows-11': Number(lgRows) === 11, 'lg:grid-rows-12': Number(lgRows) === 12, 'xl:grid-rows-1': Number(xlRows) === 1, 'xl:grid-rows-2': Number(xlRows) === 2, 'xl:grid-rows-3': Number(xlRows) === 3, 'xl:grid-rows-4': Number(xlRows) === 4, 'xl:grid-rows-5': Number(xlRows) === 5, 'xl:grid-rows-6': Number(xlRows) === 6, 'xl:grid-rows-7': Number(xlRows) === 7, 'xl:grid-rows-8': Number(xlRows) === 8, 'xl:grid-rows-9': Number(xlRows) === 9, 'xl:grid-rows-10': Number(xlRows) === 10, 'xl:grid-rows-11': Number(xlRows) === 11, 'xl:grid-rows-12': Number(xlRows) === 12, '2xl:grid-rows-1': Number(txlRows) === 1, '2xl:grid-rows-2': Number(txlRows) === 2, '2xl:grid-rows-3': Number(txlRows) === 3, '2xl:grid-rows-4': Number(txlRows) === 4, '2xl:grid-rows-5': Number(txlRows) === 5, '2xl:grid-rows-6': Number(txlRows) === 6, '2xl:grid-rows-7': Number(txlRows) === 7, '2xl:grid-rows-8': Number(txlRows) === 8, '2xl:grid-rows-9': Number(txlRows) === 9, '2xl:grid-rows-10': Number(txlRows) === 10, '2xl:grid-rows-11': Number(txlRows) === 11, '2xl:grid-rows-12': Number(txlRows) === 12}">
+        <slot/>
+    </Component>
+</template>

README.md

@@ -0,0 +1,22 @@
+# Tougrel's Nuxt Components
+
+Hello everyone! I made this repo to share some components I regularly use to create my websites. You can freely use these on your apps and if you want to suggest a component, you go ahead and open an issue!
+
+## Usage
+
+> To use the components just copy or download the code from here.
+
+```vue
+<script setup>
+// This is an example of how the components will look inside your code
+</script>
+
+<template>
+    <Flex row items="center" gap="2">
+        <!-- Rest of your code here -->
+    </Flex>
+    <Grid columns="2" md-columns="3" xl-columns="4">
+        <!-- Rest of your code here -->
+    </Grid>
+</template>
+```