KintoneAppBuilder/frontend/src/components/DynamicItemInput/DynamicItemInput.vue

<template>
    <div class="q-mx-md" style="max-width: 600px;">
        <!-- <q-card> -->
        <div class="q-mb-md">
            <q-input ref="inputRef" v-if="!optionsRef|| optionsRef.length===0"
                outlined dense debounce="200" @update:model-value="updateSharedText"
                v-model="sharedText" :readonly="!canInputFlag" autogrow>
                <template v-slot:append>
                    <q-btn flat round padding="none" icon="cancel" @click="clearSharedText" color="grey-6" />
                </template>
            </q-input>
            <q-select v-if="optionsRef && optionsRef.length>0"
                        :model-value="sharedText"
                        :options="optionsRef"
                        clearable
                        value-key="index"
                        outlined
                        dense
                        use-input
                        hide-selected
                        input-debounce="10"
                        fill-input
                        @input-value="setValue"
                        @clear="sharedText=null"
                        hide-dropdown-icon
                        :readonly="!canInputFlag"
                        >
            </q-select>
        </div>

        <div class="row q-gutter-sm">
            <q-btn v-for="button in buttonsConfig" :key="button.type" :color="button.color" @mousedown.prevent
                @click="openDialog(button)" size="sm">
                {{ button.label }}
            </q-btn>
        </div>

        <show-dialog v-model:visible="dialogVisible" :name="currentDialogName" @close="closeDialog" min-width="400px">
            <template v-slot:toolbar>
                <q-input dense debounce="200" v-model="filter" clearable>
                    <template v-slot:before>
                        <q-icon name="search" />
                    </template>
                </q-input>
            </template>
            <!-- asdf -->
            <component :is="currentComponent" @select="handleSelect" :filter="filter" :appId="appId" />
        </show-dialog>
        <!-- </q-card> -->
    </div>
</template>

<script lang="ts">
import { ref, inject, watchEffect, defineComponent,PropType } from 'vue';
import FieldAdd from './FieldAdd.vue';
import VariableAdd from './VariableAdd.vue';
// import FunctionAdd from './FunctionAdd.vue';
import ShowDialog from '../ShowDialog.vue';
import { IButtonConfig } from 'src/types/ComponentTypes';

export default defineComponent({
    name: 'DynamicItemInput',
    components: {
        FieldAdd,
        VariableAdd,
        // FunctionAdd,
        ShowDialog
    },
    props: {
        canInput: {
            type: Boolean,
            default: false
        },
        appId: {
            type: String,
        },
        selectedObject: {
            default: {}
        },
        options:{
          type:Array as PropType< string[]>
        },
        buttonsConfig: {
            type: Array as PropType<IButtonConfig[]>,
            default: () => [
                { label: 'フィールド', color: 'primary', type: 'FieldAdd' }
            ]
        }
    },
    setup(props, { emit }) {
        const filter = ref('');
        const dialogVisible = ref(false);
        const currentDialogName = ref('');
        const selectedObjectRef = ref(props.selectedObject);
        const currentComponent = ref('FieldAdd');
        const sharedText = ref(props.selectedObject?.sharedText ?? '');
        const inputRef = ref();
        const canInputFlag = ref(props.canInput);
        const editable = ref(false);

        const openDialog = (button: IButtonConfig) => {
            currentDialogName.value = button.label;
            currentComponent.value = button.type;
            dialogVisible.value = true;
            editable.value = canInputFlag.value;
        };

        const closeDialog = () => {
            dialogVisible.value = false;
        };

        const handleSelect = (value:any) => {

            if (value && value._t && (value._t as string).length > 0) {
              canInputFlag.value = editable.value;
            }
            selectedObjectRef.value={ sharedText: value._t, ...value };
            sharedText.value = `${value._t}`;
           // emit('update:selectedObject', { sharedText: sharedText.value, ...value });
            dialogVisible.value = false;
        };

        const clearSharedText = () => {
            sharedText.value = '';
            selectedObjectRef.value={};
            canInputFlag.value = true;
            // emit('update:selectedObject', {});
        }
        const updateSharedText = (value:string) => {
            sharedText.value = value;
            selectedObjectRef.value= { sharedText: value,objectType:'text' }
            // emit('update:selectedObject', { ...props.selectedObject, sharedText: value,objectType:'text' });
        }
        const setValue=(value:string)=>{
          sharedText.value = value;
          if(selectedObjectRef.value.sharedText!==value){
            selectedObjectRef.value= { sharedText: value,objectType:'text' }
          }
        }
        const optionsRef=ref(props.options);

        return {
            filter,
            dialogVisible,
            currentDialogName,
            currentComponent,
            canInputFlag,
            openDialog,
            closeDialog,
            handleSelect,
            clearSharedText,
            updateSharedText,
            setValue,
            sharedText,
            inputRef,
            optionsRef,
            selectedObjectRef
        };
    }
});
</script>