@opendesign-plus-test/components 0.0.1-rc.21 → 0.0.1-rc.22

package/src/components/common/ThFilter.vue

@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { useLocale } from '@opendesign-plus/composables';
+import {
+  OCheckbox,
+  OCheckboxGroup,
+  ODivider,
+  ODropdown,
+  ODropdownItem,
+  OIcon,
+  OLink,
+  OPopover,
+  OScroller,
+} from '@opensig/opendesign';
+import { computed, h, nextTick, ref, watch } from 'vue';
+import IconFilter from '~icons/components/icon-filter.svg';
+import AppEmpty from '../../../../../../.vitepress/src/components/AppEmpty.vue';
+
+type TItem = { label: string; value: string | number; children?: TItem[] };
+const { t } = useLocale();
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[] | number[] | string | number;
+    list: TItem[];
+    multiple?: boolean;
+    tableWidth?: number;
+  }>(),
+  {
+    list: () => [],
+    multiple: false,
+  },
+);
+const emits = defineEmits(['update:model-value', 'confirm']);
+/**
+ * 根据options判断是否为级联选择器
+ * 如果是级联选择器，需要注意子级是否存在相同value
+ */
+const isCascader = computed(() => props.list.some((v: TItem) => v.children?.length));
+// 格式化数据
+const options = computed(() => {
+  return props.list.map((v: TItem) => {
+    const children = (v.children || []).map((t: TItem) => {
+      return {
+        label: t.label,
+        value: t.value,
+      };
+    });
+    return {
+      label: v.label,
+      value: v.value,
+      children: isCascader.value ? children : undefined,
+    };
+  });
+});
+const visible = ref(false); // 控制浮窗展示
+
+watch(
+  () => props.modelValue,
+  (val: TItem) => {
+    if (!props.multiple) {
+      checked.value = val;
+    } else {
+      multiChecked.value = val;
+    }
+  },
+);
+// -------------------- 普通多选 --------------------
+const multiChecked = ref([]); // 选中的值
+
+const change = (val: string | number) => {
+  multiChecked.value = val;
+};
+
+// -------------------- 级联选择 --------------------
+const cascaderValue = ref([]);
+// -------------------- 单选 --------------------
+const checked = ref(null); // 选中的值
+// 单选没有按钮，点击即是确认
+const handleCommand = (val: string | number) => {
+  if (checked.value === val) {
+    checked.value = null;
+  } else {
+    checked.value = val;
+  }
+  confirmFn();
+};
+// -------------------- 按钮操作 --------------------
+const reset = () => {
+  multiChecked.value = [];
+  cascaderValue.value = [];
+  checked.value = null;
+  confirmFn();
+};
+const confirmFn = () => {
+  let finalValue = null;
+  if (!props.multiple) {
+    finalValue = checked.value;
+  } else if (isCascader.value) {
+    finalValue = cascaderValue.value;
+  } else {
+    finalValue = multiChecked.value;
+  }
+  emits('update:model-value', finalValue);
+  visible.value = true;
+  nextTick(() => {
+    emits('confirm');
+    visible.value = false;
+  });
+};
+
+// 是否有选中值，用于切换图标
+const hasChecked = computed(() => {
+  return multiChecked.value.length || cascaderValue.value.length || checked.value || props.modelValue;
+});
+// -------------------- 自定义级联选择器label --------------------
+const aref = ref(null);
+const clickLabelSpan = async (e) => {
+  const ele = e.target.parentElement.parentElement;
+  await nextTick();
+  const input = ele.querySelector('input');
+  input.click();
+  await nextTick();
+  input.change?.(input);
+  await nextTick();
+  aref.value?.$forceUpdate();
+  cascaderValue.value = JSON.parse(JSON.stringify(cascaderValue.value));
+};
+const renderLabel = ({ data }) => {
+  return h('span', { onclick: clickLabelSpan }, data.label);
+};
+</script>
+
+<template>
+  <div class="th-filter-wrapper" ref="filterRef">
+    <span>
+      <slot></slot>
+    </span>
+    <OPopover
+      v-if="multiple"
+      :visible="visible"
+      position="bottom"
+      wrapClass="th-filter-popover"
+      trigger="click"
+      :anchor="false">
+      <template #target>
+        <div class="filter-wrapper" :class="hasChecked && 'has-checked'">
+          <OIcon class="filter-icon">
+            <IconFilter />
+          </OIcon>
+        </div>
+      </template>
+      <OScroller class="content-wrapper" show-type="hover" disabled-x v-if="!isCascader">
+        <OCheckboxGroup direction="v" @change="change" v-model="multiChecked">
+          <OCheckbox v-for="item in options" :key="item.value" :value="item.value">
+            <span v-dompurify-html="item.label"></span>
+          </OCheckbox>
+        </OCheckboxGroup>
+      </OScroller>
+      <div class="list-content-wrapper" v-else>
+        <ElCascaderPanel
+          ref="aref"
+          expandTrigger="hover"
+          :renderLabel="renderLabel"
+          v-model="cascaderValue"
+          style="width: fit-content"
+          :options="options"
+          :props="{ multiple: true, expandTrigger: 'hover' }"
+        />
+      </div>
+      <ODivider />
+      <div class="btn-wrapper">
+        <OLink @click="reset">{{ t('common.reset') }}</OLink>
+        <OLink @click="confirmFn">{{ t('common.confirm') }}</OLink>
+      </div>
+    </OPopover>
+    <ODropdown v-else optionPosition="bottom" optionWrapClass="th-filter-dropdown" v-model="checked">
+      <div class="filter-wrapper" :class="hasChecked && 'has-checked'">
+        <OIcon class="filter-icon">
+          <IconFilter />
+        </OIcon>
+      </div>
+      <template #dropdown>
+        <OScroller disabled-x style="max-height: 300px" show-type="always" v-if="options.length">
+          <ODropdownItem
+            :style="{
+              '--table-width': tableWidth,
+            }"
+            :class="[{ 'is-active': modelValue === '' }]"
+            value="''"
+            :label="t('common.all')"
+            @click="handleCommand('')"
+          />
+          <ODropdownItem
+            :style="{
+              '--table-width': tableWidth,
+            }"
+            :class="[{ 'is-active': item.value === modelValue }]"
+            v-for="item in options"
+            :key="item.value"
+            :value="item.value"
+            @click="handleCommand(item.value)"
+          >
+            <span v-dompurify-html="item.label"></span>
+          </ODropdownItem>
+        </OScroller>
+        <slot name="empty" v-if="!options.length"></slot>
+      </template>
+    </ODropdown>
+  </div>
+</template>
+
+<style lang="scss">
+.th-filter-wrapper {
+  display: flex;
+  column-gap: var(--o-gap-2);
+  flex-wrap: nowrap;
+  align-items: center;
+
+  & > span:first-child {
+    word-break: keep-all;
+  }
+}
+
+.filter-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  & > * {
+    flex-shrink: 0;
+  }
+
+  .filter-hover-icon {
+    display: none;
+  }
+
+  .filter-icon {
+    @include h2;
+  }
+
+  &:hover,
+  &.has-checked {
+    .filter-icon {
+      color: var(--o-color-primary1);
+    }
+
+    .o-icon {
+      path {
+        fill: currentColor;
+      }
+    }
+  }
+}
+
+.th-filter-dropdown {
+  .o-dropdown-item {
+    min-width: 80px;
+    max-width: calc(var(--table-width, 300) * 0.8px);
+    --dropdown-item-justify: flex-start;
+  }
+
+  .o-dropdown-item.is-active {
+    font-weight: 500;
+    background-color: var(--dropdown-item-bg-color-hover);
+    color: var(--dropdown-item-color-hover);
+  }
+}
+
+.th-filter-popover {
+  --popup-radius: var(--o-radius-xs);
+
+  .o-popup-body {
+    padding: var(--o-gap-2) 0 0 0;
+  }
+
+  .list-content-wrapper {
+    display: flex;
+
+    .o-scrollbar-wrapper:first-child {
+      border-right: 1px solid rgb(224, 226, 230);
+    }
+  }
+
+  .content-wrapper {
+    padding: 0 var(--o-gap-4);
+    overflow: auto;
+    max-height: 300px;
+
+    .o-checkbox-group {
+      flex-shrink: 0;
+    }
+
+    .o-checkbox-label {
+      flex-grow: 1;
+
+      .label-wrapper {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .o-svg-icon {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+
+  .btn-wrapper {
+    min-width: 158px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: var(--o-gap-3);
+    @include text1;
+
+    .o-link {
+      width: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>

package/src/components/events/OEventsApply.vue

@@ -102,18 +102,6 @@ defineProps<EventsApplyPropsT>();
         --height: var(--o-gap-6);
         height: calc(100% + var(--height) - 40px); // 延伸到下一个元素
         background-color: var(--o-color-control4);
-        @include respond-to('laptop') {
-          --height: var(--o-gap-5);
-        }
-        @include respond-to('pad_h') {
-          --height: var(--o-gap-4);
-        }
-        @include respond-to('pad_v') {
-          --height: var(--o-gap-5);
-        }
-        @include respond-to('phone') {
-          --height: var(--o-gap-5);
-        }
       }
 
       // 最后一个序号不显示连接线（倒数第2个子元素，因为最后一个是step-item）
@@ -129,38 +117,12 @@ defineProps<EventsApplyPropsT>();
     grid-template-rows: repeat(3, auto); // 桌面端：3行
     gap: var(--o-gap-6);
 
-    @include respond-to('laptop') {
-      gap: var(--o-gap-5);
-    }
-    @include respond-to('pad_h') {
-      gap: var(--o-gap-4);
-    }
-    @include respond-to('pad_v') {
-      gap: var(--o-gap-5);
-    }
-    @include respond-to('phone') {
-      gap: var(--o-gap-5);
-    }
-
     // 移动端：2列布局（序号列 + 内容列）
     @include respond-to('<=pad_v') {
       grid-template-columns: auto 1fr; // 第1列自适应，第2列占满
       grid-template-rows: auto; // 行数自动
       gap: 0 var(--o-gap-3); // 列间距12px，行间距0
       row-gap: var(--o-gap-6); // 行间距
-
-      @include respond-to('laptop') {
-        row-gap: var(--o-gap-5);
-      }
-      @include respond-to('pad_h') {
-        row-gap: var(--o-gap-4);
-      }
-      @include respond-to('pad_v') {
-        row-gap: var(--o-gap-5);
-      }
-      @include respond-to('phone') {
-        row-gap: var(--o-gap-5);
-      }
     }
 
     .step-item {
@@ -170,12 +132,6 @@ defineProps<EventsApplyPropsT>();
       flex-direction: column; // 垂直排列子元素
       --idx-size: 20px;
       --idx-gap: var(--o-gap-3);
-      @include respond-to('laptop') {
-        --idx-gap: var(--o-gap-2);
-      }
-      @include respond-to('pad_h') {
-        --idx-gap: var(--o-gap-2);
-      }
       // 移动端：强制在第2列显示
       @include respond-to('<=pad_v') {
         grid-column: 2 !important;
@@ -190,14 +146,6 @@ defineProps<EventsApplyPropsT>();
         display: flex;
         align-items: center;
         @include h2;
-        @include respond-to('laptop') {
-          margin-bottom: var(--o-gap-3);
-          padding: var(--o-gap-4) var(--o-gap-5) 0 var(--o-gap-5);
-        }
-        @include respond-to('pad_h') {
-          margin-bottom: var(--o-gap-2);
-          padding: var(--o-gap-3) var(--o-gap-4) 0 var(--o-gap-4);
-        }
         @include respond-to('pad_v') {
           margin-bottom: 0;
           padding: var(--o-gap-3) var(--o-gap-4);
@@ -235,12 +183,6 @@ defineProps<EventsApplyPropsT>();
         color: var(--o-color-info2);
         padding: 0 var(--o-gap-6) var(--o-gap-4) var(--o-gap-6);
         @include tip1;
-        @include respond-to('laptop') {
-          padding: 0 var(--o-gap-5) var(--o-gap-3) var(--o-gap-5);
-        }
-        @include respond-to('pad_h') {
-          padding: 0 var(--o-gap-4) var(--o-gap-3) var(--o-gap-4);
-        }
         @include respond-to('pad_v') {
           padding: var(--o-gap-3) var(--o-gap-4);
         }
@@ -272,12 +214,6 @@ defineProps<EventsApplyPropsT>();
             .o-icon {
               font-size: 16px;
               margin-right: var(--o-gap-4);
-              @include respond-to('laptop') {
-                margin-right: var(--o-gap-3);
-              }
-              @include respond-to('pad_h') {
-                margin-right: var(--o-gap-2);
-              }
               @include respond-to('pad_v') {
                 margin-right: var(--o-gap-2);
               }
@@ -294,14 +230,8 @@ defineProps<EventsApplyPropsT>();
           .desc-list-item-desc {
             font-weight: 400;
             --padding-left: var(--o-gap-4);
-            padding-left: calc(var(--o-gap-4) + var(--padding-left));
+            padding-left: calc(var(--o-gap-4) + var(--o-gap-4));
             color: rgba(255, 255, 255, 0.8);
-            @include respond-to('laptop') {
-              --padding-left: var(--o-gap-3);
-            }
-            @include respond-to('pad_h') {
-              --padding-left: var(--o-gap-2);
-            }
             @include respond-to('pad_v') {
               padding-left: var(--o-gap-5);
               color: var(--o-color-info2);
@@ -400,23 +330,9 @@ defineProps<EventsApplyPropsT>();
 
         .img-wrapper {
           height: 280px;
-          --width: var(--o-gap-6);
-          width: calc(100% - var(--width) * 2);
+          width: calc(100% - var(--o-gap-6) * 2);
           margin-left: auto;
           margin-right: auto;
-          @include respond-to('laptop') {
-            --width: var(--o-gap-5);
-          }
-          @include respond-to('pad_h') {
-            --width: var(--o-gap-4);
-            height: 220px;
-          }
-          @include respond-to('pad_v') {
-            --width: var(--o-gap-5);
-          }
-          @include respond-to('phone') {
-            --width: var(--o-gap-5);
-          }
         }
 
         .img-wrapper-phone {

package/src/components/events/OEventsCalendar.vue

@@ -271,18 +271,6 @@ const getIcon = (item: CalendarItemT) => {
       .o-collapse-item-header {
         padding: var(--o-gap-4) var(--o-gap-6);
         align-items: center;
-        @include respond-to('laptop') {
-          padding: var(--o-gap-3) var(--o-gap-5);
-        }
-        @include respond-to('pad_h') {
-          padding: var(--o-gap-2) var(--o-gap-4);
-        }
-        @include respond-to('pad_v') {
-          padding: var(--o-gap-2) var(--o-gap-3);
-        }
-        @include respond-to('phone') {
-          padding: var(--o-gap-2) var(--o-gap-3);
-        }
 
         .o-collapse-item-title {
           flex: 1;
@@ -325,19 +313,6 @@ const getIcon = (item: CalendarItemT) => {
         justify-content: center;
         margin-right: var(--o-gap-4);
         background-color: rgb(var(--bg-color));
-
-        @include respond-to('laptop') {
-          margin-right: var(--o-gap-3);
-        }
-        @include respond-to('pad_h') {
-          margin-right: var(--o-gap-2);
-        }
-        @include respond-to('pad_v') {
-          margin-right: var(--o-gap-2);
-        }
-        @include respond-to('phone') {
-          margin-right: var(--o-gap-2);
-        }
       }
 
       .o-icon {

package/src/components/events/OEventsList.vue

@@ -176,18 +176,6 @@ const list = computed(() => {
     border-radius: var(--o-radius-xs);
     padding: var(--o-gap-5) var(--o-gap-6);
     gap: var(--o-gap-3) var(--o-gap-2);
-    @include respond-to('laptop') {
-      padding: var(--o-gap-4) var(--o-gap-5);
-    }
-    @include respond-to('pad_h') {
-      padding: var(--o-gap-4) var(--o-gap-5);
-    }
-    @include respond-to('pad_v') {
-      padding: var(--o-gap-3) var(--o-gap-4);
-    }
-    @include respond-to('phone') {
-      padding: var(--o-gap-3) var(--o-gap-4);
-    }
     @include text1;
 
     .filter-left {
@@ -200,12 +188,6 @@ const list = computed(() => {
         flex-shrink: 0;
         margin-right: var(--o-gap-5);
         font-weight: 500;
-        @include respond-to('laptop') {
-          margin-right: var(--o-gap-4);
-        }
-        @include respond-to('pad_h') {
-          margin-right: var(--o-gap-3);
-        }
         @include respond-to('pad_v') {
           margin-right: var(--o-gap-4);
         }
@@ -246,14 +228,6 @@ const list = computed(() => {
     @include respond-to('<=pad_v') {
       grid-template-columns: repeat(1, 1fr);
     }
-    @include respond-to('laptop') {
-      margin-top: var(--o-gap-5);
-      gap: var(--o-gap-5);
-    }
-    @include respond-to('pad_h') {
-      margin-top: var(--o-gap-4);
-      gap: var(--o-gap-4);
-    }
     @include respond-to('pad_v') {
       margin-top: var(--o-gap-4);
       gap: var(--o-gap-3);
@@ -292,12 +266,6 @@ const list = computed(() => {
         padding: var(--o-gap-6);
         z-index: 10;
 
-        @include respond-to('laptop') {
-          margin-top: var(--o-gap-5);
-        }
-        @include respond-to('pad_h') {
-          margin-top: var(--o-gap-4);
-        }
         @include respond-to('pad_v') {
           margin-top: var(--o-gap-4);
         }
@@ -345,12 +313,6 @@ const list = computed(() => {
           }
 
           @include text1;
-          @include respond-to('laptop') {
-            margin-top: var(--o-gap-4);
-          }
-          @include respond-to('pad_h') {
-            margin-top: var(--o-gap-3);
-          }
           @include respond-to('pad_v') {
             margin-top: var(--o-gap-2);
           }
@@ -380,19 +342,6 @@ const list = computed(() => {
   .o-pagination {
     margin-top: var(--o-gap-6);
 
-    @include respond-to('laptop') {
-      margin-top: var(--o-gap-5);
-    }
-    @include respond-to('pad_h') {
-      margin-top: var(--o-gap-4);
-    }
-    @include respond-to('pad_v') {
-      margin-top: var(--o-gap-4);
-    }
-    @include respond-to('phone') {
-      margin-top: var(--o-gap-4);
-    }
-
     .o-pagination-wrap {
       justify-content: flex-end;
     }

package/src/components/events/index.ts

@@ -3,6 +3,7 @@ import _OEventsList from './OEventsList.vue';
 import _OEventsApply from './OEventsApply.vue';
 import type { App } from 'vue';
 
+
 const OEventsCalendar = Object.assign(_OEventsCalendar, {
   install(app: App) {
     app.component('OEventsCalendar', _OEventsCalendar);