css adjust

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"
   />
 </template>
 
@@ -59,6 +60,7 @@ const emit = defineEmits<{
 }>();
 
 const updateValue = ({ detail }: KucEvent<ComboboxChangeEventDetail>) => {
+  value.value = detail.value || '';
   emit('update:modelValue', { obj: whereCondition.value, value: detail.value as ConditionValue });
 };
 </script>

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"
   />
   <kuc-combobox
@@ -29,10 +31,11 @@
 <script setup lang="ts">
 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<string>;
@@ -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)

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;
 }