conditons (but FROM_TODAY)

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

@@ -1,5 +1,5 @@
 <template>
-  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" />
+  <kuc-table className='plugin-kuc-table condition-table' :columns="columns" :data="modelValue"  @change="tableChanged"/>
 </template>
 
 <script setup lang="ts">
@@ -64,10 +64,7 @@ const columns = reactive([
         id: rowData.id,
         whereConditions: props.modelValue,
         'onUpdate:modelValue': ({obj, value}) => {
-          if (obj) {
-            obj.condition = value;
-            obj.data = '';
-          }
+            obj && (obj.condition = value);
         },
       });
       render(vnode, container);
@@ -94,4 +91,7 @@ const columns = reactive([
   },
 ]);
 
+function tableChanged(e) {
+  console.log(e);
+}
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" />
+  <kuc-table className='plugin-kuc-table' :columns="columns" :data="modelValue"/>
 </template>
 
 <script setup lang="ts">

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

@@ -5,6 +5,7 @@
     :value="value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
+    className="condition-combobox-short"
   />
 </template>
 
@@ -39,6 +40,7 @@ watch(
   () => items,
   () => {
     if (whereCondition.value?.condition === '') {
+      // select first option
       const option = items.value?.[0] || { value: '' };
       value.value = option.value;
       updateValue({ detail: option });

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

@@ -18,8 +18,8 @@
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
   <table-condition-value-date-time
-    v-else-if="type === 'time' || type == 'date'"
-    :time="type == 'time'"
+    v-else-if="type === 'datetime' || type === 'date'"
+    :time="type === 'datetime'"
     :value="modelValue.value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"

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

@@ -1,30 +1,39 @@
 <template>
-  <div>
-    <kuc-combobox :value="optionValue" :items="options" @change="updateValue" :disabled="disabled" />
+  <div style="display: flex">
+    <kuc-combobox
+      :value="optionValue"
+      :items="options"
+      @change.stop="updateFuncValue"
+      :disabled="disabled"
+      :className="shortConditionClass"
+      :key="time"
+    />
 
-    <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>
+    <template v-if="isInput">
+      <kuc-datetime-picker v-if="time" :value="dateTimeValue" @change.stop="updateValue" :disabled="disabled" />
+      <kuc-date-picker v-else :value="dateTimeValue" @change.stop="updateValue" :disabled="disabled" />
+    </template>
     <kuc-combobox
       v-else-if="isWeek"
       :items="weekOptions"
       :value="inputValue"
-      @change="updateValue"
+      @change.stop="updateValue"
       :disabled="disabled"
+      :className="weekClassName"
     />
     <kuc-combobox
       v-else-if="isMonth"
       :items="monthOptions"
       :value="inputValue"
-      @change="updateValue"
+      @change.stop="updateValue"
       :disabled="disabled"
+      :className="monthClassName"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { getComponent, getDateFuncList } from '@/js/conditions';
+import { dateFuncList, dateFuncMap, getComponent, getDateFuncList, type DateFuncKey } from '@/js/conditions';
 import { getFieldObj, search } from '@/js/helper';
 import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
@@ -37,34 +46,66 @@ const props = defineProps<{
   disabled: boolean;
 }>();
 
-// const regex = /^(?<func>\w+)\((?<val>.+)\)$|^(?<val>\d+)$/;
 const dateTimeValue = ref('');
 const inputValue = ref('');
 const optionValue = ref('');
 
+const isInput = computed(() => optionValue.value === dateFuncMap[''].value);
 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);
+const weekClassName = computed(() => {
+  if (isWeek.value) {
+    return inputValue.value === DEFAULT_WEEK_MONTH ? 'week-all-combobox' : 'week-combobox';
+  }
+  return '';
+});
+const monthClassName = computed(() => {
+  if (isMonth.value) {
+    return inputValue.value === DEFAULT_WEEK_MONTH ? 'month-all-combobox' : 'month-combobox';
+  }
+  return '';
+});
+const shortConditionClass = computed(() => {
+  return optionValue.value !== dateFuncMap[''].value &&
+    optionValue.value !== dateFuncMap['FROM_TODAY'].value &&
+    optionValue.value !== dateFuncMap['NOW'].value
+    ? 'short datetime-condition-combobox'
+    : 'datetime-condition-combobox';
+});
+
+const regex = /^(?<func>\w+)\((?<val>.*)\)$/;
 
 watch(
   () => props.value,
   () => {
-    // const match = props.value.match(regex);
-    // const func = match?.groups?.func || '';
-    // optionValue.value = func;
+    if (props.value === '') {
+      // select default one when empty
+      optionValue.value = dateFuncMap[''].value;
+      inputValue.value = '';
+      dateTimeValue.value = '';
+      return;
+    }
 
-    // const value = match?.groups?.val || '';
-    // inputValue.value = '';
-    // dateTimeValue.value = '';
+    console.log(props.value, props.value.match(regex));
+    const match = props.value.match(regex);
 
-    // 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;
-    // }
+    optionValue.value = dateFuncMap[(match?.groups?.func || '') as DateFuncKey].value;
+
+    const value = match?.groups?.val || (props.value.includes("%") ? '' : props.value);
+
+    inputValue.value = '';
+    dateTimeValue.value = '';
+
+    if (isInput.value) {
+      dateTimeValue.value = value;
+    } else if (isWeek.value || isMonth.value) {
+      inputValue.value = value || DEFAULT_WEEK_MONTH;
+    } else if (isFromToday.value) {
+      // inputValue.value = value;
+      // dateTimeValue.value = func;
+    }
+    console.log(optionValue.value, dateTimeValue.value, inputValue.value);
   },
   { immediate: true },
 );
@@ -80,13 +121,26 @@ const emit = defineEmits<{
 }>();
 
 const updateValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
-  emit('change', { detail: { value: buildResult() } });
+  emit('change', { detail: { value: buildResult({ value: event.detail.value }) } });
 };
 
-function buildResult() {
-  return '';
+const updateFuncValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
+  inputValue.value = '';
+  dateTimeValue.value = '';
+  emit('change', { detail: { value: buildResult({ func: event.detail.value }) } });
+};
+
+function buildResult({ func = optionValue.value, value }: { func?: string; value?: string }) {
+  let val = value || dateTimeValue.value;
+  if (isWeek.value || isMonth.value) {
+    val = value || inputValue.value;
+    val = val === DEFAULT_WEEK_MONTH ? '' : val;
+  }
+  return func.replace('%s', val || '');
 }
 
+const DEFAULT_WEEK_MONTH = '_';
+
 const fromOptions = [
   { label: '日', value: 'DAYS' },
   { label: '周', value: 'WEEKS' },
@@ -95,7 +149,7 @@ const fromOptions = [
 ];
 
 const weekOptions = [
-  { label: 'すべての曜日', value: '' },
+  { label: 'すべての曜日', value: '_' },
   { label: '日', value: 'SUNDAY' },
   { label: '月', value: 'MONDAY' },
   { label: '火', value: 'TUESDAY' },
@@ -105,7 +159,7 @@ const weekOptions = [
   { label: '土', value: 'SATURDAY' },
 ];
 
-const monthOptions = [{ label: 'すべて', value: '' }];
+const monthOptions = [{ label: 'すべて', value: '_' }];
 for (let i = 1; i <= 31; i++) {
   monthOptions.push({ label: i.toString() + '日', value: i.toString() });
 }