130 lines
3.1 KiB
Vue
130 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
open: boolean
|
|
mode: 'create' | 'edit'
|
|
tree: 'ตู้เอกสาร' | 'ลิ้นชัก' | 'แฟ้ม' | 'แฟ้มย่อย'
|
|
name?: string
|
|
}>(),
|
|
{
|
|
open: false,
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits(['update:open', 'update:name', 'submit'])
|
|
const offensiveWord = ref<boolean>(false)
|
|
|
|
function checkOffensiveWord(input: string) {
|
|
return /[\\?%:|"<>#]/.test(input)
|
|
}
|
|
|
|
function reset() {
|
|
emit('update:name', undefined)
|
|
}
|
|
|
|
function keydown(e: KeyboardEvent) {
|
|
if (e.key === 'Escape' && props.open === true) {
|
|
emit('update:open', false)
|
|
reset()
|
|
}
|
|
}
|
|
|
|
function submit() {
|
|
emit('submit', {
|
|
mode: props.mode,
|
|
name: props.name,
|
|
})
|
|
emit('update:open', !open), reset()
|
|
}
|
|
|
|
onMounted(() => window.addEventListener('keydown', keydown))
|
|
onUnmounted(() => window.addEventListener('keydown', keydown))
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer
|
|
overlay
|
|
bordered
|
|
class="q-pa-md"
|
|
side="right"
|
|
tabindex="0"
|
|
:width="300"
|
|
:breakpoint="500"
|
|
:model-value="open"
|
|
@update:model-value="(v) => $emit('update:open', v)"
|
|
>
|
|
<q-form @submit.prevent="submit">
|
|
<q-toolbar class="q-mb-md q-pa-none">
|
|
<q-toolbar-title>
|
|
<span class="text-weight-bold" v-if="mode === 'create'">
|
|
สร้าง{{ tree }}
|
|
</span>
|
|
<span class="text-weight-bold" v-if="mode === 'edit'">
|
|
แก้ไข{{ tree }}
|
|
</span>
|
|
</q-toolbar-title>
|
|
<q-btn
|
|
v-close-popup
|
|
flat
|
|
round
|
|
dense
|
|
icon="close"
|
|
color="red"
|
|
@click="
|
|
() => {
|
|
offensiveWord = false
|
|
$emit('update:open', !open)
|
|
}
|
|
"
|
|
id="folderFormIconClose"
|
|
/>
|
|
</q-toolbar>
|
|
|
|
<section class="q-mb-md">
|
|
<span class="text-weight-bold">ชื่อ{{ tree }}</span>
|
|
<q-input
|
|
ref="nameInput"
|
|
outlined
|
|
dense
|
|
class="q-my-sm"
|
|
placeholder="กรอกชื่อ"
|
|
:model-value="name"
|
|
error-message="คำต้องห้านจะเปลี่ยนเป็น - เมื่อกดสร้าง"
|
|
:error="offensiveWord"
|
|
@update:model-value="
|
|
(v) => {
|
|
$emit('update:name', v)
|
|
offensiveWord = checkOffensiveWord(v as string)
|
|
}
|
|
"
|
|
id="folderNameInput"
|
|
/>
|
|
</section>
|
|
|
|
<section :style="{ display: 'flex', gap: '.5rem' }">
|
|
<q-btn label="บันทึก" type="submit" color="primary" id="FoldeSubmit" />
|
|
<q-btn
|
|
label="ยกเลิก"
|
|
type="reset"
|
|
color="primary"
|
|
flat
|
|
@click="
|
|
() => {
|
|
offensiveWord = false
|
|
$emit('update:open', false), reset()
|
|
}
|
|
"
|
|
id="folderBtnCancel"
|
|
/>
|
|
</section>
|
|
</q-form>
|
|
</q-drawer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.no-resize :deep(textarea) {
|
|
resize: none;
|
|
}
|
|
</style>
|