first commit

resources/js/Components/Card/Card.vue

@@ -0,0 +1,65 @@
+<script setup>
+import CardHeader from "./CardHeader.vue";
+import CardBack from "./CardBack.vue";
+import {computed} from "vue";
+const props = defineProps({
+    header: String,
+    contentScroll: {
+        type: Boolean,
+        default: true
+    },
+    contentRelative: {
+        type: Boolean,
+        default: true
+    },
+    mergeContentClass: {
+        type: String,
+        default: ''
+    }
+})
+
+const contentClass = computed(() => {
+    const classes = ['p-3 h-full']
+
+    props.contentRelative ? classes.push('relative') : delete classes.find(cls => cls === 'relative')
+
+    if (props.contentScroll) {
+        classes.push('overflow-y-auto')
+        delete classes.find(cls => cls === 'overflow-y-clip')
+    } else {
+        classes.push('overflow-y-clip')
+        delete classes.find(cls => cls === 'overflow-y-auto')
+    }
+
+    if (props.mergeContentClass) {
+        const mergeClasses = props.mergeContentClass.split(' ')
+        classes.push(...mergeClasses)
+    }
+
+    return classes
+})
+
+</script>
+
+<template>
+    <div class="h-full flex flex-col justify-between overflow-clip rounded-lg bg-white lg:shadow-xs ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10">
+        <div class="p-3">
+            <CardHeader>
+                <slot v-if="$slots.header" name="header" />
+                <span v-else>
+                    {{ header }}
+                </span>
+            </CardHeader>
+        </div>
+        <div :class="contentClass">
+            <slot />
+        </div>
+        <div v-if="$slots.footer" class="p-3">
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Card/CardBack.vue

@@ -0,0 +1,32 @@
+<script setup>
+import Button from "../Button/Button.vue"
+const emits = defineEmits([
+    'click'
+])
+const props = defineProps({
+    tag: {
+        type: [String, Object],
+        default: 'button'
+    }
+})
+</script>
+
+<template>
+    <Button :tag="tag" v-bind:href="$attrs.href" @click="emits('click')" icon-left>
+        <template #icon>
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 viewBox="0 0 24 24">
+                <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M5 12h14"></path>
+                    <path d="M5 12l6 6"></path>
+                    <path d="M5 12l6-6"></path>
+                </g>
+            </svg>
+        </template>
+        Вернуться назад
+    </Button>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Card/CardBody.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Card/CardFooter.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="text-sm lg:rounded-lg lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-800 dark:lg:ring-white/10 px-3.5 py-2">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/Card/CardHeader.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="text-sm lg:rounded-lg bg-zinc-100 lg:ring-1 lg:ring-zinc-950/10 dark:lg:bg-zinc-800 dark:lg:ring-white/10 px-3.5 py-2">
+        <slot />
+    </div>
+</template>