102 lines
2.6 KiB
Vue
102 lines
2.6 KiB
Vue
<template>
|
|
<div class="q-pa-md q-gutter-sm">
|
|
<q-btn label="プロパティ" icon="keyboard_arrow_right" color="primary" @click="drawerRight = !drawerRight" />
|
|
<!-- <q-btn label="Readプロパティ" icon="keyboard_arrow_right" color="primary" @click="write('right')" /> -->
|
|
<q-drawer
|
|
side="right"
|
|
v-model="drawerRight"
|
|
show-if-above
|
|
bordered
|
|
:width="301"
|
|
:breakpoint="500"
|
|
class="bg-grey-3"
|
|
>
|
|
<q-card class="column full-height" style="width: 300px">
|
|
<q-card-section>
|
|
<div class="text-h6">プロパティ</div>
|
|
</q-card-section>
|
|
|
|
|
|
<q-card-section class="col q-pt-none">
|
|
<ActionProperty :jsonData="jsonData" :jsonValue="jsonValue" v-if="drawerRight"/>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn flat label="Save" @click="save"/>
|
|
<q-btn flat label="Cancel" @click="cancel" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-drawer>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import ActionProperty from 'components/right/ActionProperty.vue';
|
|
const drawerRight = ref(false);
|
|
const jsonData = {
|
|
elements: [
|
|
{
|
|
component: 'InputText',
|
|
props: {
|
|
name:'1',
|
|
placeholder: 'Enter some text',
|
|
modelValue: '',
|
|
},
|
|
},
|
|
{
|
|
component: 'SelectBox',
|
|
props: {
|
|
name:'2',
|
|
placeholder: 'Choose an option',
|
|
modelValue: '',
|
|
options: [
|
|
'option1',
|
|
'option2',
|
|
'option3'
|
|
],
|
|
},
|
|
},
|
|
{
|
|
component: 'DatePicker',
|
|
props: {
|
|
name:'3',
|
|
placeholder: 'Choose a date',
|
|
modelValue: '',
|
|
},
|
|
},
|
|
{
|
|
component: 'FieldInput',
|
|
props: {
|
|
name:'4',
|
|
placeholder: 'Choose a field',
|
|
modelValue: '',
|
|
},
|
|
},
|
|
]
|
|
};
|
|
|
|
let jsonValue = {
|
|
1:'abc',
|
|
2:'option2',
|
|
3:'2023/09/04',
|
|
4:'6666'
|
|
};
|
|
|
|
const cancel = async() =>{
|
|
drawerRight.value = false;
|
|
}
|
|
|
|
const save = async () =>{
|
|
|
|
jsonData.elements.forEach(property => {
|
|
if(jsonValue != undefined)
|
|
{
|
|
jsonValue[property.props.name] = property.props.modelValue;
|
|
}
|
|
});
|
|
console.log(jsonValue);
|
|
drawerRight.value=false;
|
|
|
|
}
|
|
</script>
|