属性UI（プロパティ）にチェックルール設定追加

frontend/src/components/right/AppSelect.vue

@@ -1,14 +1,18 @@
 <template>
-    <div>
-        <q-field :label="displayName" labelColor="primary" stack-label>
+    <div v-bind="$attrs">
+        <q-field :label="displayName" labelColor="primary" stack-label
+        :rules="rulesExp"
+        lazy-rules="ondemand"
+        v-model="selectedApp"
+        ref="fieldRef">
             <template v-slot:control>
                 <q-card flat class="full-width">
                     <q-card-actions vertical>
                         <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">アプリ選択</q-btn>
                     </q-card-actions>
                     <q-card-section class="text-caption">
-                        <div v-if="selectedField.app.name">
-                            {{ selectedField.app.name }}
+                        <div v-if="selectedApp.app.name">
+                            {{ selectedApp.app.name }}
                         </div>
                         <div v-else>{{ placeholder }}</div>
                     </q-card-section>
@@ -43,10 +47,6 @@ export default defineComponent({
         AppSelectBox
     },
     props: {
-        context: {
-            type: Array<Props>,
-            default: '',
-        },
         displayName: {
             type: String,
             default: '',
@@ -62,31 +62,50 @@ export default defineComponent({
         modelValue: {
             type: Object,
             default: null
+        },
+        //例：[val=>!!val ||'入力してください']
+        rules: {
+          type: String,
+          default: undefined
+        },
+        required: {
+          type: Boolean,
+          default: false
+        },
+        requiredMessage: {
+          type: String,
+          default: ''
         }
     },
     setup(props, { emit }) {
-        const appDg = ref()
+        const appDg = ref();
+        const fieldRef=ref();
         const dgIsShow = ref(false)
-        const selectedField = props.modelValue && props.modelValue.app ? props.modelValue : reactive({app:{}});
+        const selectedApp = props.modelValue && props.modelValue.app ? props.modelValue : reactive({app:{}});
         const closeDg = (state: string) => {
             dgIsShow.value = false;
             if (state == 'OK') {
-                selectedField.app = appDg.value.selected[0];
+                selectedApp.app = appDg.value.selected[0];
+                fieldRef.value.validate();
             }
         };
-
-        console.log(selectedField);
-
+        //ルール設定
+        const customExp = props.rules === undefined ? [] : eval(props.rules);
+        const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}を選択してください。`;
+        const requiredExp = props.required ? [((val: any) => (!!val && !!val.app && !!val.app.name) || errmsg)] : [];
+        const rulesExp = [...requiredExp, ...customExp];
         watchEffect(() => {
-            emit('update:modelValue', selectedField);
+            emit('update:modelValue', selectedApp);
         });
 
         return {
             filter: ref(''),
             dgIsShow,
             appDg,
+            fieldRef,
             closeDg,
-            selectedField
+            selectedApp,
+            rulesExp
         };
     }
 });