54 lines
2.8 KiB
Vue
54 lines
2.8 KiB
Vue
<script setup>
|
|
defineProps(['conditions']);
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div v-if="conditions.length > 0" class="w-full h-auto relative">
|
|
<div
|
|
class="bg-white px-5 py-3.5 rounded-lg shadow hover:shadow-xl max-w-prose mx-auto transform hover:-translate-y-[0.125rem] transition duration-100 ease-linear">
|
|
<div class="w-full flex items-center justify-between">
|
|
<span class="font-medium text-sm text-slate-400">Podmienky na vyhľadávanie</span>
|
|
<button
|
|
class="-mr-1 bg-slate-100 hover:bg-slate-200 text-slate-400 hover:text-slate-600 h-5 w-5 rounded-full flex justify-center items-center">
|
|
<svg class="h-2 w-2 fill-current items-center" viewBox="0 0 20 20">
|
|
<path
|
|
d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center mt-2 rounded-lg px-1 py-1 cursor-pointer">
|
|
|
|
<div class="ml-3">
|
|
<div v-for="p in conditions">
|
|
<div class="my-2 select-none flex">
|
|
<div :class="'w-' + p.level*8"> </div>
|
|
|
|
<button v-if="p.level > 0" :class="p.count > 0 ? 'invisible' : ''"
|
|
class="py-2 px-4 shadow-md no-underline rounded-full bg-green-600 text-white font-sans font-semibold text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-1">{{
|
|
p.groupop }}</button>
|
|
|
|
<button
|
|
class="py-2 px-4 shadow-md no-underline rounded-full bg-blue-600 text-white font-sans font-semibold text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-1">{{
|
|
p.pre }}</button>
|
|
<button
|
|
class="py-2 px-4 shadow-md no-underline rounded-full bg-orange-600 text-white font-sans font-semibold text-sm border-orange btn-primary hover:text-white hover:bg-orange-light focus:outline-none active:shadow-none mr-1">{{
|
|
p.field.desc }}</button>
|
|
<button
|
|
class="py-2 px-4 shadow -md no-underline rounded-full bg-red-600 text-white font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none mr-1">{{
|
|
p.criteria.name }}</button>
|
|
<button
|
|
class="py-2 px-4 shadow-md no-underline rounded-full bg-yellow-600 text-white font-sans font-semibold text-sm border-red btn-primary hover:text-white hover:bg-red-light focus:outline-none active:shadow-none mr-1">{{
|
|
p.value }}</button>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
|
|
</div>
|
|
</template> |