Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="aa-checkcard-grid" :style="{ gridTemplateColumns: `repeat(${cols}, 1fr)` }">
|
||||
<div class="aa-checkcard" v-for="(o, i) in options" :key="i"
|
||||
:class="{ 'is-selected': modelValue.indexOf(o.value) >= 0 }" @click="toggle(o.value)">
|
||||
<div class="aa-checkcard-icon" v-if="o.icon">{{ o.icon }}</div>
|
||||
<div class="aa-checkcard-body">
|
||||
<div class="aa-checkcard-title">{{ o.label }}</div>
|
||||
<div class="aa-checkcard-desc" v-if="o.desc">{{ o.desc }}</div>
|
||||
</div>
|
||||
<div class="aa-checkcard-mark"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
options: { type: Array, default: () => [] },
|
||||
modelValue: { type: Array, default: () => [] },
|
||||
cols: { type: Number, default: 3 }
|
||||
});
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
function toggle(v) {
|
||||
const arr = props.modelValue.slice();
|
||||
const idx = arr.indexOf(v);
|
||||
if (idx >= 0) arr.splice(idx, 1); else arr.push(v);
|
||||
emit('update:modelValue', arr);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./CheckboxCard.css"></style>
|
||||
Reference in New Issue
Block a user