fix bug

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

@@ -59,7 +59,7 @@ const columns = reactive([
     render: (cellData: string, rowData: WhereCondition) => {
       const container = document.createElement('div');
       const vnode = h(TableCondition, {
-        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.condition || '',
+        modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.condition || ''),
         selectedAppData,
         id: rowData.id,
         whereConditions: props.modelValue,
@@ -80,7 +80,7 @@ const columns = reactive([
     render: (cellData: string, rowData: WhereCondition) => {
       const container = document.createElement('div');
       const vnode = h(TableConditionValue, {
-        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.data || '',
+        modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.data || ''),
         selectedAppData,
         id: rowData.id,
         whereConditions: props.modelValue,

vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue

@@ -14,10 +14,10 @@ import { search } from '@/js/helper';
 import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
 import type { ComboboxChangeEventDetail } from 'kintone-ui-component';
-import { defineProps, defineEmits, computed, watch, ref } from 'vue';
+import { defineProps, defineEmits, computed, watch, ref, type Ref } from 'vue';
 
 const props = defineProps<{
-  modelValue: string;
+  modelValue: Ref<string>;
   selectedAppData: CachedSelectedAppData;
   whereConditions: WhereCondition[];
   id: string;
@@ -33,14 +33,16 @@ const items = computed(() =>
   ),
 );
 
-const value = ref(props.modelValue);
+const value = ref(props.modelValue.value);
 
 watch(
   () => items,
   () => {
-    const option = items.value?.[0] || { value: '' };
-    value.value = option.value;
-    updateValue({ detail: option });
+    if (whereCondition.value?.condition === '') {
+      const option = items.value?.[0] || { value: '' };
+      value.value = option.value;
+      updateValue({ detail: option });
+    }
   },
   { deep: true },
 );

vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue

@@ -1,28 +1,29 @@
 <template>
   <kuc-text
-    v-if="type == 'kuc-text'"
-    :value="modelValue"
+    v-if="type === 'kuc-text'"
+    :value="modelValue.value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
   <kuc-combobox
-    v-else-if="type == 'kuc-combobox'"
-    :value="modelValue"
+    v-else-if="type === 'kuc-combobox'"
+    :value="modelValue.value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
   <kuc-time-picker
-    v-else-if="type == 'kuc-time'"
-    :value="modelValue"
+    v-else-if="type === 'kuc-time'"
+    :value="modelValue.value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
-  <!-- <table-condition-value-date-time
-    v-else-if="type == 'time'|type == 'date"
-    :value="modelValue"
+  <table-condition-value-date-time
+    v-else-if="type === 'time' || type == 'date'"
+    :time="type == 'time'"
+    :value="modelValue.value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
-  /> -->
+  />
 </template>
 
 <script setup lang="ts">
@@ -31,10 +32,10 @@ import { getFieldObj, search } from '@/js/helper';
 import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
 import type { ComboboxChangeEventDetail, TextInputEventDetail } from 'kintone-ui-component';
-import { defineProps, defineEmits, computed } from 'vue';
+import { defineProps, defineEmits, computed, type Ref } from 'vue';
 
 const props = defineProps<{
-  modelValue: string;
+  modelValue: Ref<string>;
   selectedAppData: CachedSelectedAppData;
   whereConditions: WhereCondition[];
   id: string;
@@ -44,7 +45,8 @@ const whereCondition = computed(() => search(props.whereConditions, props.id) as
 
 const type = computed(() => {
   const field = getFieldObj(whereCondition.value?.field || '', props.selectedAppData.appFields, '');
-  return getComponent(whereCondition.value?.condition || '', field);
+  const type = getComponent(whereCondition.value?.condition || '', field)
+  return type;
 });
 
 type EmitData = {

vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueDateTime.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <kuc-combobox :value="optionValue" :items="options" @change="updateValue" :disabled="disabled" />
+
+    <div v-if="!optionValue">
+      <kuc-datetime-picker v-if="time" :value="dateTimeValue" @change="updateValue" :disabled="disabled" />
+      <kuc-date-picker v-else :value="dateTimeValue" @change="updateValue" :disabled="disabled" />
+    </div>
+    <kuc-combobox
+      v-else-if="isWeek"
+      :items="weekOptions"
+      :value="inputValue"
+      @change="updateValue"
+      :disabled="disabled"
+    />
+    <kuc-combobox
+      v-else-if="isMonth"
+      :items="monthOptions"
+      :value="inputValue"
+      @change="updateValue"
+      :disabled="disabled"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getComponent, getDateFuncList } from '@/js/conditions';
+import { getFieldObj, search } from '@/js/helper';
+import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
+import type { KucEvent } from '@/types/my-kintone';
+import type { ComboboxChangeEventDetail, TextInputEventDetail } from 'kintone-ui-component';
+import { defineProps, defineEmits, computed, ref, watch } from 'vue';
+
+const props = defineProps<{
+  value: string;
+  time: boolean;
+  disabled: boolean;
+}>();
+
+// const regex = /^(?<func>\w+)\((?<val>.+)\)$|^(?<val>\d+)$/;
+const dateTimeValue = ref('');
+const inputValue = ref('');
+const optionValue = ref('');
+
+const isWeek = computed(() => optionValue.value?.indexOf('WEEK') >= 0);
+const isMonth = computed(() => optionValue.value?.indexOf('MONTH') >= 0);
+const isFromToday = computed(() => optionValue.value?.indexOf('FROM_TODAY') >= 0);
+
+watch(
+  () => props.value,
+  () => {
+    // const match = props.value.match(regex);
+    // const func = match?.groups?.func || '';
+    // optionValue.value = func;
+
+    // const value = match?.groups?.val || '';
+    // inputValue.value = '';
+    // dateTimeValue.value = '';
+
+    // if (!optionValue.value) {
+    //   dateTimeValue.value = value;
+    // } else if (isWeek.value || isMonth.value) {
+    //   inputValue.value = value;
+    // } else if (isFromToday.value) {
+    //   // inputValue.value = value;
+    //   // dateTimeValue.value = func;
+    // }
+  },
+  { immediate: true },
+);
+
+const options = computed(() => {
+  return getDateFuncList(props.time).map((item) => {
+    return { label: typeof item.label === 'function' ? item.label(props.time) : item.label, value: item.value };
+  });
+});
+
+const emit = defineEmits<{
+  (e: 'change', data: KucEvent<{ value: string }>): void;
+}>();
+
+const updateValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
+  emit('change', { detail: { value: buildResult() } });
+};
+
+function buildResult() {
+  return '';
+}
+
+const fromOptions = [
+  { label: '日', value: 'DAYS' },
+  { label: '周', value: 'WEEKS' },
+  { label: '月', value: 'MONTHS' },
+  { label: '年', value: 'YEARS' },
+];
+
+const weekOptions = [
+  { label: 'すべての曜日', value: '' },
+  { label: '日', value: 'SUNDAY' },
+  { label: '月', value: 'MONDAY' },
+  { label: '火', value: 'TUESDAY' },
+  { label: '水', value: 'WEDNESDAY' },
+  { label: '木', value: 'THURSDAY' },
+  { label: '金', value: 'FRIDAY' },
+  { label: '土', value: 'SATURDAY' },
+];
+
+const monthOptions = [{ label: 'すべて', value: '' }];
+for (let i = 1; i <= 31; i++) {
+  monthOptions.push({ label: i.toString() + '日', value: i.toString() });
+}
+monthOptions.push({ label: '末日', value: 'LAST' });
+</script>