75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { ref } from 'vue';
|
||
|
|
|
||
|
|
const text = 'demo text';
|
||
|
|
const isEdit = ref(false);
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="full-width column no-wrap" style="height: 50vh">
|
||
|
|
<div
|
||
|
|
v-if="true"
|
||
|
|
class="bordered rounded surface-1 flex col column justify-between"
|
||
|
|
>
|
||
|
|
<q-list class="full-width col scroll">
|
||
|
|
<q-item class="items-center row q-px-lg">
|
||
|
|
<q-btn
|
||
|
|
id="btn-delete-work-name"
|
||
|
|
icon="mdi-trash-can-outline"
|
||
|
|
dense
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
color="negative"
|
||
|
|
/>
|
||
|
|
<q-btn
|
||
|
|
v-if="!isEdit"
|
||
|
|
id="btn-edit-work-name"
|
||
|
|
icon="mdi-pencil-outline"
|
||
|
|
dense
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
class="q-ml-md"
|
||
|
|
color="primary"
|
||
|
|
@click="isEdit = true"
|
||
|
|
/>
|
||
|
|
<q-btn
|
||
|
|
v-else
|
||
|
|
id="btn-edit-work-name"
|
||
|
|
icon="mdi-check"
|
||
|
|
dense
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
class="q-ml-md"
|
||
|
|
color="primary"
|
||
|
|
@click="isEdit = false"
|
||
|
|
/>
|
||
|
|
<!-- outlined -->
|
||
|
|
<q-input
|
||
|
|
dense
|
||
|
|
:borderless="!isEdit"
|
||
|
|
:readonly="!isEdit"
|
||
|
|
:outlined="isEdit"
|
||
|
|
class="q-ml-xl col"
|
||
|
|
v-model="text"
|
||
|
|
placeholder="ชื่องาน"
|
||
|
|
></q-input>
|
||
|
|
</q-item>
|
||
|
|
</q-list>
|
||
|
|
|
||
|
|
<div class="bordered-t full-width">
|
||
|
|
<q-item clickable>
|
||
|
|
<span class="q-px-lg flex items-center app-text-muted-2">
|
||
|
|
<q-icon name="mdi-plus" class="q-mr-md" />
|
||
|
|
เพิ่มงานใหม่
|
||
|
|
</span>
|
||
|
|
</q-item>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-else
|
||
|
|
class="bordered rounded surface-1 flex justify-center items-center col"
|
||
|
|
>
|
||
|
|
<NoData />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|