update

frontend/src/components/right/FieldInput.vue

@@ -1,98 +1,99 @@
 <template>
-<q-field v-model="selectedField" :label="displayName" labelColor="primary"
-        :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
-  <template v-slot:control >
-    <q-chip  color="primary" text-color="white"  v-if="isSelected">
-      {{ selectedField.name }}
-    </q-chip>
-  </template>
-  <!-- <template v-slot:hint v-if="isSelected">
-    <div> 項目コード：<q-chip  size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
-  </template> -->
-  <template v-slot:hint v-if="!isSelected">
-    {{ placeholder }}
-  </template>
-
-  <template v-slot:append>
-  <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
-  </template>
-</q-field>
-<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
-  <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
-</show-dialog>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref ,watchEffect,computed} from 'vue';
-import ShowDialog from '../ShowDialog.vue';
-import FieldSelect from '../FieldSelect.vue';
-import { useFlowEditorStore } from 'stores/flowEditor';
-interface IField{
-  name:string,
-  code:string,
-  type:string
-}
-export default defineComponent({
-  name: 'FieldInput',
-  components: {
-    ShowDialog,
-    FieldSelect,
-  },
-  props: {
-    displayName:{
-      type: String,
-      default: '',
-    },
-    name:{
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    hint:{
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: Object,
-      default: null
-    },
-  },
-
-  setup(props, { emit }) {
-    const appDg = ref();
-    const show = ref(false);
-    const selectedField = ref(props.modelValue);
-    const store = useFlowEditorStore();
-    const isSelected = computed(()=>{
-      return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
-    });
-
-    const showDg = () => {
-      show.value = true;
-    };
-
-    const closeDg = (val:string) => {
-      if (val == 'OK') {
-        selectedField.value = appDg.value.selected[0];
+    <q-field v-model="selectedField" :label="displayName" labelColor="primary"
+            :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
+      <template v-slot:control >
+        <q-chip  color="primary" text-color="white"  v-if="isSelected">
+          {{ selectedField.name }}
+        </q-chip>
+      </template>
+      <!-- <template v-slot:hint v-if="isSelected">
+        <div> 項目コード：<q-chip  size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
+      </template> -->
+      <template v-slot:hint v-if="!isSelected">
+        {{ placeholder }}
+      </template>
+    
+      <template v-slot:append>
+      <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
+      </template>
+    </q-field>
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
+      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
+    </show-dialog>
+    </template>
+    
+    <script lang="ts">
+    import { defineComponent, ref ,watchEffect,computed} from 'vue';
+    import ShowDialog from '../ShowDialog.vue';
+    import FieldSelect from '../FieldSelect.vue';
+    import { useFlowEditorStore } from 'stores/flowEditor';
+    interface IField{
+      name:string,
+      code:string,
+      type:string
+    }
+    export default defineComponent({
+      name: 'FieldInput',
+      components: {
+        ShowDialog,
+        FieldSelect,
+      },
+      props: {
+        displayName:{
+          type: String,
+          default: '',
+        },
+        name:{
+          type: String,
+          default: '',
+        },
+        placeholder: {
+          type: String,
+          default: '',
+        },
+        hint:{
+          type: String,
+          default: '',
+        },
+        modelValue: {
+          type: Object,
+          default: null
+        },
+      },
+    
+      setup(props, { emit }) {
+        const appDg = ref();
+        const show = ref(false);
+        const selectedField = ref(props.modelValue);
+        const store = useFlowEditorStore();
+        const isSelected = computed(()=>{
+          return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
+        });
+    
+        const showDg = () => {
+          show.value = true;
+        };
+    
+        const closeDg = (val:string) => {
+          if (val == 'OK') {
+            selectedField.value = appDg.value.selected[0];
+          }
+        };
+    
+        watchEffect(() => {
+          emit('update:modelValue', selectedField.value);
+        });
+    
+        return {
+          store,
+          appDg,
+          show,
+          showDg,
+          closeDg,
+          selectedField,
+          isSelected
+        };
       }
-    };
-
-    watchEffect(() => {
-      emit('update:modelValue', selectedField.value);
     });
-
-    return {
-      store,
-      appDg,
-      show,
-      showDg,
-      closeDg,
-      selectedField,
-      isSelected
-    };
-  }
-});
-</script>
+    </script>
+