Version 1.0.0 - Initialisation du depot

src/components/UI/Box.vue

@@ -0,0 +1,73 @@
+<template>
+    <div :style="widthStyle" :class="activeClass">
+        <slot></slot>
+    </div>
+</template>
+<style scoped>
+    div {
+        background-color: var(--secondary);
+        border-radius: 10px;
+  
+        
+    }
+
+    .box-shadow {
+        box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.50);
+    }
+
+
+    .closed {
+        padding: 10px;
+    }
+
+    .far {
+        padding: 30px;
+    }
+
+    .first {
+        background-color: var(--secondary);
+    }   
+    .second {
+        background-color: var(--tertiary);
+    }
+</style>
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    level: {
+        type: String,
+        default: 'first'
+    },
+    padding: {
+        type: String,
+        
+        default: 'far'
+    },
+    boxClass: {
+        type: String,
+        default: ''
+    },
+    width: {
+        type: String,
+        default: ''
+    },
+    noShadow: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const widthStyle = computed(() => {
+    if (props.width) {
+        return `max-width: ${props.width}; width: 70%;`;
+    }
+    return '';
+}); 
+
+const activeClass = computed(() => {
+    return `${props.level} ${props.padding} ${props.boxClass} ${props.noShadow ? '' : 'box-shadow'}`;
+});
+
+
+</script>