80 lines
3.2 KiB
Vue
80 lines
3.2 KiB
Vue
<template>
|
|
<div v-show="isShowEdit">
|
|
<div class="join indicator-item">
|
|
<button @click="editHandle" class="btn join-item btn-xs">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square"
|
|
viewBox="0 0 16 16">
|
|
<path
|
|
d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
|
|
<path fill-rule="evenodd"
|
|
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
|
|
</svg>
|
|
</button>
|
|
<button @click="deleteHandle" class="btn join-item btn-xs">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill"
|
|
viewBox="0 0 16 16">
|
|
<path
|
|
d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="indicator-item indicator-middle indicator-start">
|
|
<button @click="insertHeadHandle" class="btn btn-xs btn-circle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="indicator-item indicator-middle">
|
|
<button @click="insertTailHandle" class="btn btn-xs btn-circle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import { computed, ref } from 'vue';
|
|
|
|
const isShowEdit = defineModel<boolean>('isShowEdit')
|
|
const props = defineProps(['idx'])
|
|
const emits = defineEmits(['edit', 'delete', 'insertHead', 'insertTail'])
|
|
|
|
// Edit handle function
|
|
function editHandle() {
|
|
emits('edit', props.idx ?? -1);
|
|
}
|
|
|
|
// Delete handle function
|
|
function deleteHandle() {
|
|
emits('delete', props.idx ?? -1);
|
|
}
|
|
|
|
// Insert head handle function
|
|
function insertHeadHandle() {
|
|
emits('insertHead', props.idx ?? -1);
|
|
}
|
|
|
|
// Insert tail handle function
|
|
function insertTailHandle() {
|
|
emits('insertTail', props.idx ?? -1);
|
|
}
|
|
|
|
const modalFormClass = computed(() => ({
|
|
"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50": true,
|
|
}))
|
|
|
|
let modalClass = ref({
|
|
'modal-open': false,
|
|
'modal': true,
|
|
'modal-backdrop': false,
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style> |