+
-
-
-
+
+
+
+
+
+
+
+
+
@@ -38,7 +62,7 @@ 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';
+import { defineProps, defineEmits, computed, ref, watch, inject, type Ref } from 'vue';
const props = defineProps<{
value: string;
@@ -46,30 +70,43 @@ const props = defineProps<{
disabled: boolean;
}>();
-const dateTimeValue = ref('');
-const inputValue = ref('');
-const optionValue = ref('');
+const canSave = inject<(canSave: boolean) => void>('canSave');
+
+const inputValue = ref('');
+const selectValue = ref('');
+const additionSelectValue = ref('');
+const funcValue = ref('');
+
+const fromTodayError = ref('');
+
+watch(
+ () => fromTodayError.value,
+ () => {
+ canSave?.(!fromTodayError.value);
+ },
+);
+
+const isInput = (func = funcValue.value) => func === dateFuncMap[''].value;
+const isWeek = (func = funcValue.value) => func.includes('WEEK');
+const isMonth = (func = funcValue.value) => func.includes('MONTH');
+const isFromToday = (func = funcValue.value) => func.includes('FROM_TODAY');
-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';
+ if (isWeek()) {
+ return selectValue.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';
+ if (isMonth()) {
+ return selectValue.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
+ return funcValue.value !== dateFuncMap[''].value &&
+ funcValue.value !== dateFuncMap['FROM_TODAY'].value &&
+ funcValue.value !== dateFuncMap['NOW'].value
? 'short datetime-condition-combobox'
: 'datetime-condition-combobox';
});
@@ -78,34 +115,35 @@ const regex = /^(?
\w+)\((?.*)\)$/;
watch(
() => props.value,
- () => {
+ (current, before) => {
if (props.value === '') {
// select default one when empty
- optionValue.value = dateFuncMap[''].value;
+ funcValue.value = dateFuncMap[''].value;
+ selectValue.value = '';
inputValue.value = '';
- dateTimeValue.value = '';
return;
}
- console.log(props.value, props.value.match(regex));
const match = props.value.match(regex);
- optionValue.value = dateFuncMap[(match?.groups?.func || '') as DateFuncKey].value;
+ funcValue.value = dateFuncMap[(match?.groups?.func || '') as DateFuncKey].value;
- const value = match?.groups?.val || (props.value.includes("%") ? '' : props.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;
+ // TODO set values is this method but isFromToday
+ if (isInput()) {
+ inputValue.value = value;
+ selectValue.value = '';
+ } else if (isWeek() || isMonth()) {
+ inputValue.value = '';
+ selectValue.value = value || DEFAULT_WEEK_MONTH;
+ } else if (isFromToday() && !(before && isFromToday(before))) {
+ // only called when load page
+ const split = value.split(', ');
+ inputValue.value = split[0].replace('-', '');
+ selectValue.value = split[1] || fromOptions[0].value;
+ additionSelectValue.value = split[0] ? (split[0].startsWith('-') ? '-' : '+') : '+';
}
- console.log(optionValue.value, dateTimeValue.value, inputValue.value);
},
{ immediate: true },
);
@@ -125,15 +163,76 @@ const updateValue = (event: KucEvent) => {
};
const updateFuncValue = (event: KucEvent) => {
+ selectValue.value = '';
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;
+const updateFromTodayValue = (event: KucEvent) => {
+ const value = buildFromTodayResult({ value: event.detail.value });
+ if (!value) return;
+ inputValue.value = event.detail.value as string;
+ emit('change', { detail: { value } });
+};
+
+const updateFromTodaySelectValue = (event: KucEvent) => {
+ const value = buildFromTodayResult({ select: event.detail.value });
+ if (!value) return;
+ selectValue.value = event.detail.value as string;
+ emit('change', { detail: { value } });
+};
+
+const updateFromTodayAdditionValue = (event: KucEvent) => {
+ const value = buildFromTodayResult({ addition: event.detail.value });
+ if (!value) return;
+ additionSelectValue.value = event.detail.value as string;
+ emit('change', { detail: { value } });
+};
+
+type FromTodayParam = {
+ value?: string;
+ select?: string;
+ addition?: string;
+};
+
+function buildFromTodayResult({
+ value = inputValue.value || '0',
+ select = selectValue.value || 'DAYS',
+ addition = additionSelectValue.value || '-',
+}: FromTodayParam) {
+ if (value?.match(/^-?[0-9]+$/)) {
+ fromTodayError.value = '';
+ let res = value;
+ if (value && value !== '0') {
+ if (addition === '-') {
+ if (!value.startsWith('-')) {
+ res = '-' + res;
+ } else {
+ res = res.replace('-', '');
+ }
+ } else if (addition === '+') {
+ if (value.startsWith('-')) {
+ res = res.replace('-', '');
+ }
+ }
+ }
+ return funcValue.value.replace('%s', select).replace('%d', res);
+ } else if (!fromTodayError.value) {
+ inputValue.value = value || '';
+ fromTodayError.value = '整数値を指定してください。';
+ return;
+ }
+}
+
+type Param = {
+ func?: string;
+ value?: string;
+};
+
+function buildResult({ func = funcValue.value, value }: Param) {
+ let val = value || inputValue.value;
+ if (isWeek(func) || isMonth(func)) {
+ val = value || selectValue.value;
val = val === DEFAULT_WEEK_MONTH ? '' : val;
}
return func.replace('%s', val || '');
@@ -148,6 +247,11 @@ const fromOptions = [
{ label: '年', value: 'YEARS' },
];
+const additionOptions = [
+ { label: '前', value: '-' },
+ { label: '後', value: '+' },
+];
+
const weekOptions = [
{ label: 'すべての曜日', value: '_' },
{ label: '日', value: 'SUNDAY' },
diff --git a/vue-project/my-kintone-plugin/src/css/config.css b/vue-project/my-kintone-plugin/src/css/config.css
index 7fd6387..26562ef 100644
--- a/vue-project/my-kintone-plugin/src/css/config.css
+++ b/vue-project/my-kintone-plugin/src/css/config.css
@@ -185,4 +185,25 @@
}
.month-combobox {
--kuc-combobox-toggle-width: 86px;
+}
+.from-today-input {
+ --kuc-text-input-width: 80px;
+ --kuc-combobox-toggle-width: 80px;
+}
+.from-today-input.input {
+ --kuc-text-input-width: 60px;
+ --kuc-combobox-toggle-width: 60px;
+}
+
+/* .from-today-input error */
+.condition-table.plugin-kuc-table > table > tbody > tr > td {
+ vertical-align: top;
+}
+.from-today-input.input div[class^="kuc-base-error"] {
+ position: absolute;
+ left: 0;
+ right: 0;
+}
+.from-today-input.input.error {
+ margin-bottom: 20px;
}
\ No newline at end of file
diff --git a/vue-project/my-kintone-plugin/vite.config.ts b/vue-project/my-kintone-plugin/vite.config.ts
index 7717992..f6bd38b 100644
--- a/vue-project/my-kintone-plugin/vite.config.ts
+++ b/vue-project/my-kintone-plugin/vite.config.ts
@@ -1,8 +1,8 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import copy from "rollup-plugin-copy";
-import path from 'path';
-import fs from 'fs';
+import * as path from 'path';
+import * as fs from 'fs';
import Components from 'unplugin-vue-components/vite';
function replaceKucTagsPlugin() {
@@ -80,6 +80,6 @@ export default defineConfig({
assetFileNames: 'src/[ext]/[name].[ext]',
},
},
- sourcemap:false,
+ sourcemap: 'inline',
}
})