silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract box component

This commit is contained in:
philipp lang 2024-06-14 00:53:48 +02:00
parent 99811228f2
commit 5a7a301490
2 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Box.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div class="text-sm relative">
<div
class="flex items-center justify-center w-6 h-6 rounded-full border-solid border-2 absolute -top-2 -left-2 font-arvo font-bold"
:class="[colors[type].container, colors[type].lightText]"
v-text="step"
v-if="step"
></div>
<div class="flex flex-row items-center p-4 border-2 rounded form-group shadow-sm group" :class="[colors[type].container, type]">
<div class="flex-grow text-sm" :class="colors[type].text">
<slot />
</div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue';
const colors = ref({
success: {
container: 'bg-green-200 border-green-600',
lightText: 'text-green-700',
text: 'text-green-900',
},
info: {
container: 'bg-blue-200 border-blue-600',
lightText: 'text-blue-700',
text: 'text-blue-900',
},
default: {
container: 'bg-neutral-200 border-neutral-600',
lightText: 'text-neutral-700',
text: 'text-neutral-900',
},
});
const props = defineProps({
type: {
required: true,
type: String,
},
step: {
required: false,
type: Number,
default: () => 0,
},
});
</script>

43
src/components/Info.vue
View File

@ -1,40 +1,14 @@
<template>
<div class="text-sm relative">
<div
class="flex items-center justify-center w-6 h-6 rounded-full border-solid border-2 absolute -top-2 -left-2 font-arvo font-bold"
:class="[colors[type].container, colors[type].lightText]"
v-text="step"
></div>
<div class="flex flex-row items-center p-4 border-2 rounded form-group shadow-sm group" :class="[colors[type].container, type]">
<div class="flex-grow text-sm" :class="colors[type].text">
<slot name="current" v-if="modelValue === step"></slot>
<slot name="finished" v-if="modelValue > step"></slot>
<slot name="due" v-if="modelValue < step"></slot>
</div>
</div>
</div>
<box :step="step" :type="type">
<slot name="current" v-if="modelValue === step"></slot>
<slot name="finished" v-if="modelValue > step"></slot>
<slot name="due" v-if="modelValue < step"></slot>
</box>
</template>
<script setup>
import {ref, computed} from 'vue';
const colors = ref({
success: {
container: 'bg-green-200 border-green-600',
lightText: 'text-green-700',
text: 'text-green-900',
},
info: {
container: 'bg-blue-200 border-blue-600',
lightText: 'text-blue-700',
text: 'text-blue-900',
},
default: {
container: 'bg-neutral-200 border-neutral-600',
lightText: 'text-neutral-700',
text: 'text-neutral-900',
},
});
import {computed} from 'vue';
import Box from './Box.vue';
const type = computed(() => {
if (props.modelValue === props.step) {
@ -52,8 +26,9 @@ const props = defineProps({
type: Number,
},
step: {
required: true,
required: false,
type: Number,
default: () => 0,
},
});
</script>