24 lines
1.1 KiB
Vue
24 lines
1.1 KiB
Vue
<template>
|
|
<button :class="['kuc-action-button', isAdd ? 'add' : 'remove']" :title="title">
|
|
<svg fill="none" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true">
|
|
<path :d="dPath" fill-rule="evenodd" clip-rule="evenodd" :fill="fillPath"></path>
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{ isAdd: boolean; title: string }>();
|
|
|
|
const dAdd =
|
|
'M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.0355 8.49997V7.49997H8.50008V3.96454H7.50008V7.49997H3.96443V8.49997H7.50008V12.0356H8.50008V8.49997H12.0355Z';
|
|
const fillAdd = '#3498db';
|
|
const dRemove =
|
|
'M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0355 7.49997V8.49997L3.96443 8.49997V7.49997H12.0355Z';
|
|
const fillRemove = '#b5b5b5';
|
|
|
|
const dPath = computed(() => (props.isAdd ? dAdd : dRemove));
|
|
const fillPath = computed(() => (props.isAdd ? fillAdd : fillRemove));
|
|
</script>
|