Merge branch 'v1.2' of http://github.com/ideal-world/task-table into …

…v1.2
ideal-world · Sep 1, 2024 · f33189b · f33189b
2 parents 802de5d + d44422a
commit f33189b
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 25 deletions.
diff --git a/docs/TableDemo.vue b/docs/TableDemo.vue
@@ -605,8 +605,8 @@ const events: IwProps.TableEventProps = {
   },
   getMicroAppOffset() {
     return {
-      left: -20,
-      top: -20,
+      left: 0,
+      top: 0,
     }
   },
 }

diff --git a/src/assets/reset.css b/src/assets/reset.css
@@ -30,7 +30,7 @@
 /* tabs start*/
 .iw-tt
   .iw-tabs-boxed
-  :is(.iw-tab-active, [aria-selected="true"]):not(.iw-tab-disabled):not(
+  :is(.iw-tab-active, [aria-selected='true']):not(.iw-tab-disabled):not(
     [disabled]
   ),
 .iw-tabs-boxed :is(input:checked) {
@@ -40,7 +40,7 @@
 /* tabs end*/
 /* switch start*/
 .iw-tt .iw-toggle-primary:checked,
-.iw-toggle-primary[aria-checked="true"] {
+.iw-toggle-primary[aria-checked='true'] {
   background-color: var(--sys-primary);
   border-color: var(--sys-primary);
 }
@@ -57,3 +57,20 @@
   color: var(--sys-primary);
 }
 /* text end */
+/* date start */
+input[type='date'],
+input[type='datetime'],
+input[type='datetime-local'] {
+  position: relative;
+}
+input[type='date']::-webkit-calendar-picker-indicator,
+input[type='datetime']::-webkit-calendar-picker-indicator,
+input[type='datetime-local']::-webkit-calendar-picker-indicator {
+  /* filter: invert(1); */
+  position: absolute;
+  right: 4px;
+  top: 5px;
+  height: 100%;
+  padding-left: 100%;
+}
+/* date end */
diff --git a/src/components/base/MInput/index.vue b/src/components/base/MInput/index.vue
@@ -33,6 +33,7 @@ const breviaryCount = computed(() => props.options.length - breviaryShowCount.va
 // 字典值输入框引用
 // Dictionary value input box reference
 const inputRef = ref<InstanceType<typeof HTMLInputElement>>()
+const isComposing = ref(false);
 
 onMounted(() => {
     selectedObserver.value = new ResizeObserver(() => {
@@ -49,6 +50,14 @@ onMounted(() => {
         }
     })
     selectedObserver.value?.observe(selectedBoxRef.value)
+
+    inputRef.value?.addEventListener('compositionstart', e => {
+        isComposing.value = true
+    })
+    inputRef.value?.addEventListener('compositionend', e => {
+        isComposing.value = false
+
+    })
 })
 
 onBeforeUnmount(() => {
@@ -63,6 +72,15 @@ function handleInputClick() {
 function clearInput() {
     inputRef.value!.value = ''
 }
+
+function handleChange(e: Event) {
+    setTimeout(() => {
+        if (!isComposing.value) {
+            props.showDictItems((e.target as HTMLInputElement).value, props.filterItemIdx, e)
+        }
+    }, 0)
+
+}
 defineExpose({
     inputRef,
     clearInput,
@@ -95,10 +113,11 @@ defineExpose({
         </div>
         <!-- 字典的多值添加 -->
         <!-- Multiple value addition of dictionary -->
+
         <input ref="inputRef" class="pl-1 rounded-md iw-input-bordered w-4 border-none flex-1"
             :type="getInputTypeByDataKind(DataKind.TEXT)" :data-value-input-idx="filterItemIdx"
             @click="e => { showDictItems((e.target as HTMLInputElement).value, filterItemIdx, e) }"
-            @keyup="e => { showDictItems((e.target as HTMLInputElement).value, filterItemIdx, e) }">
+            @input="handleChange">
     </div>
 </template>
 <style scoped>

diff --git a/src/components/function/FilterSetting.vue b/src/components/function/FilterSetting.vue
@@ -82,18 +82,18 @@ const selectedFilterItemIdx = ref<number | undefined>()
 const cachedAllSelectedDictItems = ref<{ [key: string | number]: DictItemProps }>({})
 //可过滤的列
 // Filterable columns
-const filterColumnOptions = computed(()=> props.columnsConf.filter(col => props.filter.enabledColumnNames.includes(col.name)).map(e=> {
+const filterColumnOptions = computed(() => props.columnsConf.filter(col => props.filter.enabledColumnNames.includes(col.name)).map(e => {
   return {
-    ...e, 
+    ...e,
     value: e.name
   }
 }))
 // 选中过滤单项
 // Selected filter item
-const selectedFilterItem = computed(()=> selectedFilterItems.value?.[selectedFilterItemIdx.value!])
+const selectedFilterItem = computed(() => selectedFilterItems.value?.[selectedFilterItemIdx.value!])
 //操作符 operator
-const operatorOptions = computed(()=> {
-  return getOperatorKindsByDataKind(selectedFilterItem.value?.dataKind).map(e=> {
+const operatorOptions = computed(() => {
+  return getOperatorKindsByDataKind(selectedFilterItem.value?.dataKind).map(e => {
     return {
       title: translateOperatorKind(e),
       value: e,
@@ -310,7 +310,7 @@ function setFilterColumn(e: Event) {
     // 存在已选中的过滤项，重置过滤项到初始状态
     // There is a selected filter item, reset the filter item to the initial state
     const currFilterItem = selectedFilterItems.value?.[selectedFilterItemIdx.value]
-    if(currFilterItem!.columnName === currColumnName) return
+    if (currFilterItem!.columnName === currColumnName) return
     currFilterItem!.columnName = currColumnName
     currFilterItem!.operator = OperatorKind.EQ
     currFilterItem!.values = []
@@ -567,9 +567,7 @@ onMounted(() => {
             <span class="mr-0.5 max-w-[100px] whitespace-nowrap overflow-hidden text-ellipsis">
               <Badge
                 v-for="(dictItemOrRawValue, valueIdx) in tryParseDictItems(filterGroup.items[0].columnName, filterGroup.items[0].value)"
-                :key="`${filterGroup.items[0].columnName}-${valueIdx}`"
-                readonly
-                :option="dictItemOrRawValue"
+                :key="`${filterGroup.items[0].columnName}-${valueIdx}`" readonly :option="dictItemOrRawValue"
                 :style="`background-color: ${dictItemOrRawValue.color ?? ''}`" class="iw-badge">
               </Badge>
             </span>
@@ -614,7 +612,8 @@ onMounted(() => {
       <!-- Operator -->
       <button class="iw-btn border-gray-200 bg-white iw-btn-xs rounded-sm mr-1 h-[30px]"
         @click="e => { showFilterOps(e, filterItemIdx) }">
-        <span class="mr-0.5 w-[28px] overflow-hidden text-ellipsis whitespace-nowrap">{{ translateOperatorKind(filterItem.operator) }}</span>
+        <span class="mr-0.5 w-[28px] overflow-hidden text-ellipsis whitespace-nowrap">{{
+          translateOperatorKind(filterItem.operator) }}</span>
         <i :class="`${iconSvg.CHEVRON_DOWN} ml-0.5`" />
       </button>
       <!-- 值 -->
@@ -627,7 +626,7 @@ onMounted(() => {
           class="iw-input iw-input-bordered iw-input-xs w-full" :type="getInputTypeByDataKind(filterItem.dataKind)"
           :value="filterItem.values"
           @change="e => { setFilterAValue((e.target as HTMLInputElement).value, filterItemIdx) }">
-        <MInput v-else :filterItem="filterItem" :filterItemIdx="filterItemIdx"
+        <MInput v-else style="height: 30px;" :filterItem="filterItem" :filterItemIdx="filterItemIdx"
           :options="tryParseDictItems(filterItem.columnName, filterItem.values)" :showDictItems="showDictItems"
           :deleteAValue="deleteAValue" />
 
@@ -648,12 +647,12 @@ onMounted(() => {
     <span class="absolute bottom-1 right-1 text-xs text-neutral-content">{{ $t('function.filter.note') }}</span>
   </MenuComp>
 
-  <MenuSelectComp ref="filterColumnCompRef" :values="[selectedFilterItem?.columnName]"
-    :options="filterColumnOptions" @click="setFilterColumn" />
-  <MenuSelectComp ref="filterOpCompRef" :values="[selectedFilterItem?.operator]"
-    :options="operatorOptions" @click="setFilterOp" />
-  <MenuSelectComp ref="dictContainerCompRef"  v-if="selectedFilterItem?.dictKind === DictKind.SELECT" :values="selectedFilterItem?.values"
-    :options="queryDictItemsResp?.records" @click="setFilterADictValue" />
-  <MenuTreeComp ref="dictTreeContainerCompRef" v-if="selectedFilterItem?.dictKind === DictKind.TREE_SELECT" :values="selectedFilterItem?.values"
-    :options="queryDictItemsResp?.records" @click="setFilterADictValue" />
+  <MenuSelectComp ref="filterColumnCompRef" :values="[selectedFilterItem?.columnName]" :options="filterColumnOptions"
+    @click="setFilterColumn" />
+  <MenuSelectComp ref="filterOpCompRef" :values="[selectedFilterItem?.operator]" :options="operatorOptions"
+    @click="setFilterOp" />
+  <MenuSelectComp ref="dictContainerCompRef" v-if="selectedFilterItem?.dictKind === DictKind.SELECT"
+    :values="selectedFilterItem?.values" :options="queryDictItemsResp?.records" @click="setFilterADictValue" />
+  <MenuTreeComp ref="dictTreeContainerCompRef" v-if="selectedFilterItem?.dictKind === DictKind.TREE_SELECT"
+    :values="selectedFilterItem?.values" :options="queryDictItemsResp?.records" @click="setFilterADictValue" />
 </template>
diff --git a/src/components/layout/list/ListHeader.vue b/src/components/layout/list/ListHeader.vue
@@ -210,7 +210,7 @@ function handleSort(column: ColumnConfWithSort) {
       <!-- Data column -->
       <div
         v-for="(column, colIdx) in columnsWithSort" :key="`${props.layoutConf.id}-${column.name}`"
-        :class="`${props.tableConf.styles.cellClass} iw-list-cell iw-resize-item flex items-center bg-base-200 ${(colIdx !== 0 || props.layoutConf.showSelectColumn) && 'border-l border-l-base-300'} whitespace-nowrap overflow-hidden text-ellipsis flex-nowrap hover:cursor-pointer`"
+        :class="`${props.tableConf.styles.cellClass} iw-list-cell iw-resize-item flex items-center bg-base-200 ${(colIdx !== 0 || props.layoutConf.showSelectColumn) && 'border-l border-l-base-300'} whitespace-nowrap overflow-hidden text-ellipsis flex-nowrap hover:cursor-pointer hover:drop-shadow-lg hover:z-10`"
         :data-column-name="column.name"
         :style="props.setColumnStyles(colIdx)"
         :title="column.title"