diff --git a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue index 5424d8a..2136bca 100644 --- a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue +++ b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue @@ -3,9 +3,10 @@ v-if="items?.length" :items="items" :value="value" - @change="updateValue" + @change.stop="updateValue" :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading" className="condition-combobox-short" + :data-val="value" /> @@ -59,6 +60,7 @@ const emit = defineEmits<{ }>(); const updateValue = ({ detail }: KucEvent) => { + value.value = detail.value || ''; emit('update:modelValue', { obj: whereCondition.value, value: detail.value as ConditionValue }); }; diff --git a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue index cc8e627..0dd74b9 100644 --- a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue +++ b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue @@ -3,6 +3,8 @@ v-if="type === 'kuc-text'" :value="modelValue.value" @change="updateValue" + :className="needPlaceholderWidthClass" + :placeholder="placeholder" :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading" /> import { getComponent } from '@/js/conditions'; import { getFieldObj, search } from '@/js/helper'; +import { isType } from '@/js/kintone-rest-api-client'; 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, type Ref, inject, provide } from 'vue'; +import { defineProps, defineEmits, computed, type Ref, inject, provide, ref } from 'vue'; const props = defineProps<{ modelValue: Ref; @@ -46,6 +49,21 @@ provide('canSave', props.canSave); const whereCondition = computed(() => search(props.whereConditions, props.id) as WhereCondition | undefined); +const needPlaceholderWidthClass = computed(() => placeholder.value ? 'kuc-text-input-placeholder-width' : '') + +const placeholder = computed(() => { + const field = getFieldObj(whereCondition.value?.field || '', props.selectedAppData.appFields, '') + if (isType.GROUP_SELECT(field)) { + return 'グループコードをカンマ区切りで指定'; + } else if (isType.ORGANIZATION_SELECT(field)) { + return '組織コードをカンマ区切りで指定'; + } else if (isType.USER_SELECT(field) || isType.CREATOR(field) || isType.MODIFIER(field)) { + return 'ログイン名をカンマ区切りで指定'; + } + return ''; +}); + + const type = computed(() => { const field = getFieldObj(whereCondition.value?.field || '', props.selectedAppData.appFields, ''); const type = getComponent(whereCondition.value?.condition || '', field) diff --git a/vue-project/my-kintone-plugin/src/css/config.css b/vue-project/my-kintone-plugin/src/css/config.css index f5e86f0..38f3c56 100644 --- a/vue-project/my-kintone-plugin/src/css/config.css +++ b/vue-project/my-kintone-plugin/src/css/config.css @@ -88,7 +88,7 @@ --kuc-combobox-toggle-width: max(15vw, 200px); } -@media screen and (max-width: 1820px) { +@media screen and (max-width: 1840px) { .plugin-kuc-table .kuc-text-input { --kuc-text-input-width: max(13vw, 200px); --kuc-dropdown-toggle-width: max(13vw, 200px); @@ -96,7 +96,7 @@ } } -@media screen and (max-width: 1710px) { +@media screen and (max-width: 1760px) { .plugin-kuc-table .kuc-text-input { --kuc-text-input-width: max(12vw, 200px); --kuc-dropdown-toggle-width: max(12vw, 200px); @@ -159,6 +159,29 @@ .condition-combobox-short { --kuc-combobox-toggle-width: 168px; } +/* .condition-combobox-short { + --kuc-combobox-toggle-width: 140px +} +.condition-combobox-short[data-val='!='] { + --kuc-combobox-toggle-width: 168px +} +.condition-combobox-short[data-val='like'] { + --kuc-combobox-toggle-width: 200px +} +.condition-combobox-short[data-val='in'] { + --kuc-combobox-toggle-width: 185px +} +.condition-combobox-short[data-val='not like'] { + --kuc-combobox-toggle-width: 225px +} +.condition-combobox-short[data-val='not in'] { + --kuc-combobox-toggle-width: 200px +} */ + +.kuc-text-input-placeholder-width { + --kuc-text-input-width: 258px; +} + .datetime-condition-combobox { --kuc-combobox-toggle-width: 130px; }