finish UI

vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue

@@ -0,0 +1,79 @@
+<template>
+  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
+</template>
+
+<script setup lang="ts">
+import type { WhereCondition } from '@/types/model';
+import { defineProps, defineEmits } from 'vue';
+import { Dropdown } from 'kintone-ui-component/lib/dropdown';
+
+const props = defineProps<{
+  modelValue: WhereCondition[];
+}>();
+
+const renderDropdown = (cellData: string) => {
+  const dropdown = new Dropdown({
+    items: [
+      { label: 'John Brown', value: 'john' },
+      { label: 'Steven Gerard', value: 'steven' },
+    ],
+    value: cellData,
+  });
+  return dropdown;
+};
+
+const renderCondition = (cellData: string) => {
+  const dropdown = new Dropdown({
+    items: [
+      { label: 'John Brown', value: 'john' },
+      { label: 'Steven Gerard', value: 'steven' },
+    ],
+    value: cellData,
+  });
+  return dropdown;
+};
+
+const renderDynamicData = (cellData: string) => {
+  const dropdown = new Dropdown({
+    items: [
+      { label: 'John Brown', value: 'john' },
+      { label: 'Steven Gerard', value: 'steven' },
+    ],
+    value: cellData,
+  });
+  return dropdown;
+};
+
+const columns = [
+  {
+    title: '取得元アプリのフィールド',
+    field: 'field',
+    render: renderDropdown,
+  },
+  {
+    title: '',
+    field: 'condition',
+    render: renderCondition,
+  },
+  {
+    title: '',
+    field: 'data',
+    render: renderDynamicData,
+  },
+];
+
+const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
+const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
+}>();
+
+const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+};
+
+const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+  item[key] = value;
+  emit('update:modelValue', props.modelValue);
+};
+</script>