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 && (obj.condition = value);
-            obj.condition = value;
-            obj.data = '';
-          }
         },
       });
       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'"
+    v-else-if="type === 'datetime' || type === 'date'"
-    :time="type == 'time'"
+    :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>
+  <div style="display: flex">
-    <kuc-combobox :value="optionValue" :items="options" @change="updateValue" :disabled="disabled" />
+    <kuc-combobox
+      :value="optionValue"
+      :items="options"
+      @change.stop="updateFuncValue"
+      :disabled="disabled"
+      :className="shortConditionClass"
+      :key="time"
+    />
 
-    <div v-if="!optionValue">
+    <template v-if="isInput">
-      <kuc-datetime-picker v-if="time" :value="dateTimeValue" @change="updateValue" :disabled="disabled" />
+      <kuc-datetime-picker v-if="time" :value="dateTimeValue" @change.stop="updateValue" :disabled="disabled" />
-      <kuc-date-picker v-else :value="dateTimeValue" @change="updateValue" :disabled="disabled" />
+      <kuc-date-picker v-else :value="dateTimeValue" @change.stop="updateValue" :disabled="disabled" />
-    </div>
+    </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);
+    if (props.value === '') {
-    // const func = match?.groups?.func || '';
+      // select default one when empty
-    // optionValue.value = func;
+      optionValue.value = dateFuncMap[''].value;
+      inputValue.value = '';
+      dateTimeValue.value = '';
+      return;
+    }
 
-    // const value = match?.groups?.val || '';
+    console.log(props.value, props.value.match(regex));
-    // inputValue.value = '';
+    const match = props.value.match(regex);
-    // dateTimeValue.value = '';
 
-    // if (!optionValue.value) {
+    optionValue.value = dateFuncMap[(match?.groups?.func || '') as DateFuncKey].value;
-    //   dateTimeValue.value = value;
+
-    // } else if (isWeek.value || isMonth.value) {
+    const value = match?.groups?.val || (props.value.includes("%") ? '' : props.value);
-    //   inputValue.value = value;
+
-    // } else if (isFromToday.value) {
+    inputValue.value = '';
-    //   // inputValue.value = value;
+    dateTimeValue.value = '';
-    //   // dateTimeValue.value = func;
+
-    // }
+    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() {
+const updateFuncValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
-  return '';
+  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() });
 }

vue-project/my-kintone-plugin/src/css/config.css

@@ -11,7 +11,7 @@
 /* config 页面 */
 #app {
   width: 60vw;
-  min-width: 940px;
+  min-width: 1006px;
 }
 
 /* 最上面的说明 */
@@ -77,9 +77,25 @@
 
 /* 输入框宽度 */
 .kuc-text-input {
-  --kuc-text-input-width: max(15vw, 200px);
+  --kuc-text-input-width: max(16vw, 200px);
-  --kuc-dropdown-toggle-width: max(15vw, 200px);
+  --kuc-dropdown-toggle-width: max(16vw, 200px);
-  --kuc-combobox-toggle-width: max(15vw, 200px);
+  --kuc-combobox-toggle-width: max(16vw, 200px);
+}
+
+@media screen and (max-width: 1820px) {
+  .kuc-text-input {
+    --kuc-text-input-width: max(14vw, 200px);
+    --kuc-dropdown-toggle-width: max(14vw, 200px);
+    --kuc-combobox-toggle-width: max(14vw, 200px);
+  }
+}
+
+@media screen and (max-width: 1740px) {
+  .kuc-text-input {
+    --kuc-text-input-width: max(12vw, 200px);
+    --kuc-dropdown-toggle-width: max(12vw, 200px);
+    --kuc-combobox-toggle-width: max(12vw, 200px);
+  }
 }
 
 /* 统一 kintone +/- 按钮样式 */
@@ -107,24 +123,66 @@
 }
 
 /* 覆盖表格样式 */
-.plugin-kuc-table td {
+.plugin-kuc-table > table > tbody > tr > td {
   border-left-color: rgba(0, 0, 0, 0);
   border-right-color: rgba(0, 0, 0, 0);
   vertical-align: middle;
 }
 
-.plugin-kuc-table tr td:nth-last-child(2) {
+.plugin-kuc-table > table > tbody > tr > td:nth-last-child(2) {
   border-right-color: #e3e7e8;
 }
-.plugin-kuc-table tr td:first-child {
+.plugin-kuc-table > table > tbody > tr > td:first-child {
   border-left-color: #e3e7e8;
 }
-.plugin-kuc-table .kuc-table-1-18-0__table__body__row__action {
+.plugin-kuc-table > table > tbody > tr > .kuc-table-1-18-0__table__body__row__action {
   height: 55px;
   align-items: center;
 }
 
+.condition-table > table > tbody > tr > td[style]:not(:first-child),
+.condition-table > table > thead > tr > th[style]:not(:first-child) {
+  padding-left: 0;
+}
+
 /* 絞り込み条件选择相关样式 */
 .row-connector-area {
   margin: 0 1em;
 }
+
+.condition-combobox-short {
+  --kuc-combobox-toggle-width: 168px;
+}
+.datetime-condition-combobox {
+  --kuc-combobox-toggle-width: 130px;
+}
+.datetime-condition-combobox.short {
+  --kuc-combobox-toggle-width: 92px;
+}
+.datetime-condition-combobox + * {
+  margin-left: 8px;
+}
+
+.datetime-condition-combobox li[value^='\-'] {
+  user-select: none;
+  margin: 8px 0;
+  cursor: default;
+  padding: 0;
+  height: 1px;
+  background-color: #eee;
+  list-style: none;
+  pointer-events: none;
+}
+
+.week-all-combobox {
+  --kuc-combobox-toggle-width: 140px;
+}
+.week-combobox {
+  --kuc-combobox-toggle-width: 72px;
+}
+.month-all-combobox {
+  --kuc-combobox-toggle-width: 100px;
+}
+.month-combobox {
+  --kuc-combobox-toggle-width: 86px;
+}

vue-project/my-kintone-plugin/src/js/conditions.ts

@@ -21,15 +21,15 @@ export const conditionList: ConditionItem[] = [
     label: (field) => (isDateTimeType(field) ? '≦ （以前）' : '≦ （以下）'),
     type: (field) => dateTimeComponent[field.type] || 'input',
   },
-  { value: '<', label: '< （より前）', type: 'input' },
+  { value: '<', label: '< （より前）', type: (field) => dateTimeComponent[field.type] || 'input' },
   {
     value: '>=',
     label: (field) => (isDateTimeType(field) ? '≧ （以降）' : '≧ （以上）'),
     type: (field) => dateTimeComponent[field.type] || 'input',
   },
-  { value: '>', label: '> （より後）', type: 'input' },
+  { value: '>', label: '> （より後）', type: (field) => dateTimeComponent[field.type] || 'input' },
   { value: 'like', label: '次のキーワードを含む', type: 'input' },
-  { value: 'not like', label: '次のキーワードを含まない', type: 'input' },  
+  { value: 'not like', label: '次のキーワードを含まない', type: 'input' },
   { value: 'in', label: '次のいずれかを含む', type: 'input' },
   { value: 'not in', label: '次のいずれも含まない', type: 'input' },
 ];
@@ -103,10 +103,10 @@ export const isDateTimeType = (field: OneOf) => {
 
 const dateTimeComponent: Partial<Record<FieldType, ComponentType>> = {
   TIME: 'time',
-  // DATE: 'date',
+  DATE: 'date',
-  // DATETIME: 'datetime',
+  DATETIME: 'datetime',
-  // CREATED_TIME: 'datetime',
+  CREATED_TIME: 'datetime',
-  // UPDATED_TIME: 'datetime',
+  UPDATED_TIME: 'datetime',
 };
 
 export type ComponentType = keyof typeof component;
@@ -123,15 +123,49 @@ type DateFuncItem = {
   key: DateFuncKey;
 };
 
-export type DateFuncKey = '' | 'FROM_TODAY' | 'NOW' | 'TODAY' | 'THIS_WEEK' | 'THIS_MONTH';
+export type DateFuncKey =
+  | ''
+  | 'FROM_TODAY'
+  | '---NOW---'
+  | 'NOW'
+  | '---DAY---'
+  | 'YESTERDAY'
+  | 'TODAY'
+  | 'TOMORROW'
+  | '---WEEK---'
+  | 'LAST_WEEK'
+  | 'THIS_WEEK'
+  | 'NEXT_WEEK'
+  | '---MONTH---'
+  | 'LAST_MONTH'
+  | 'THIS_MONTH'
+  | 'NEXT_MONTH'
+  | '---YEAR---'
+  | 'LAST_YEAR'
+  | 'THIS_YEAR'
+  | 'NEXT_YEAR';
 
 export const dateFuncList: DateFuncItem[] = [
   { key: '', value: '%s', label: (isTime) => (isTime ? '日時を指定' : '日付を指定') },
-  { key: 'FROM_TODAY', value: 'FROM_TODAY(%s)', label: '今日から' },
+  { key: 'FROM_TODAY', value: 'FROM_TODAY(%d, %s)', label: '今日から' },
+  { key: '---NOW---', value: '\---NOW---', label: '' },
   { key: 'NOW', value: 'NOW()', label: '当時刻', condition: 'datetime' },
+  { key: '---DAY---', value: '\---DAY---', label: '', condition: 'datetime' },
+  { key: 'YESTERDAY', value: 'YESTERDAY()', label: '昨日' },
   { key: 'TODAY', value: 'TODAY()', label: '今日' },
+  { key: 'TOMORROW', value: 'TOMORROW()', label: '明日' },
+  { key: '---WEEK---', value: '\---WEEK---', label: '' },
+  { key: 'LAST_WEEK', value: 'LAST_WEEK(%s)', label: '先週' },
   { key: 'THIS_WEEK', value: 'THIS_WEEK(%s)', label: '今週' },
+  { key: 'NEXT_WEEK', value: 'NEXT_WEEK(%s)', label: '来週' },
+  { key: '---MONTH---', value: '\---MONTH---', label: '' },
+  { key: 'LAST_MONTH', value: 'LAST_MONTH(%s)', label: '先月' },
   { key: 'THIS_MONTH', value: 'THIS_MONTH(%s)', label: '今月' },
+  { key: 'NEXT_MONTH', value: 'NEXT_MONTH(%s)', label: '来月' },
+  { key: '---YEAR---', value: '\---YEAR---', label: '' },
+  { key: 'LAST_YEAR', value: 'LAST_YEAR()', label: '昨年' },
+  { key: 'THIS_YEAR', value: 'THIS_YEAR()', label: '今年' },
+  { key: 'NEXT_YEAR', value: 'NEXT_YEAR()', label: '来年' },
 ];
 
 // search from dateFuncList

vue-project/my-kintone-plugin/src/js/helper.ts

@@ -23,6 +23,7 @@ export function generateId(): string {
 }
 
 export function search(list: Array<WhereCondition | FieldsJoinMapping>, id: string) {
+  if (!list) return;
   return list.find((item) => item.id === id);
 }