@opendesign-plus/components 0.0.1-rc.32 → 0.0.1-rc.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus/components",
-  "version": "0.0.1-rc.32",
+  "version": "0.0.1-rc.34",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -34,8 +34,8 @@
     "vue-dompurify-html": "^3.1.2",
     "vue": "^3.5.13",
     "element-plus": "2.13.1",
-    "@opendesign-plus/composables": "0.0.1-rc.9",
-    "@opendesign-plus/styles": "0.0.1-rc.2"
+    "@opendesign-plus/styles": "0.0.1-rc.2",
+    "@opendesign-plus/composables": "0.0.1-rc.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

package/src/assets/meeting/svg-icons/icon-copy.svg

@@ -1,4 +1,4 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path opacity="0.8" fill="#000"
-          d="M8.313 5.002h1.414c0.068-0.256 0.302-0.445 0.58-0.445h7.464c0.331 0 0.6 0.269 0.6 0.6v10.132c0 0.331-0.269 0.6-0.6 0.6h-1.455c-0.387 0-0.7 0.313-0.7 0.7s0.313 0.7 0.7 0.7h1.455c1.104 0 2-0.895 2-2v-10.132c0-1.105-0.895-2-2-2h-7.464c-1.052 0-1.915 0.813-1.994 1.845zM10.303 6.102c0.192 0 0.375 0.079 0.508 0.218l3.695 3.891c0.086 0.091 0.146 0.202 0.174 0.321 0.027 0.074 0.042 0.155 0.042 0.238 0 0.062-0.008 0.122-0.023 0.178v7.833c0 1.105-0.895 2-2 2h-7.479c-1.105 0-2-0.895-2-2v-10.68c0-1.105 0.895-2 2-2h5.084zM9.527 9.512l-0.042-2.010h-4.266c-0.331 0-0.6 0.269-0.6 0.6v10.68c0 0.331 0.269 0.6 0.6 0.6h7.479c0.331 0 0.6-0.269 0.6-0.6l-0.001-7.311h-1.77c-1.089 0-1.977-0.87-2-1.959zM10.905 8.453l0.021 1.030c0.007 0.326 0.273 0.588 0.6 0.588h0.915l-1.536-1.617zM11.506 13.554c0 0.276-0.224 0.5-0.5 0.5h-4.98c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h4.98c0.276 0 0.5 0.224 0.5 0.5zM10.315 15.554c0 0.276-0.224 0.5-0.5 0.5h-3.793c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3.793c0.276 0 0.5 0.224 0.5 0.5zM9 17.554c0 0.276-0.224 0.5-0.5 0.5h-2.493c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.493c0.276 0 0.5 0.224 0.5 0.5z"></path>
-</svg>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path opacity="0.8" fill="#000"
+          d="M8.313 5.002h1.414c0.068-0.256 0.302-0.445 0.58-0.445h7.464c0.331 0 0.6 0.269 0.6 0.6v10.132c0 0.331-0.269 0.6-0.6 0.6h-1.455c-0.387 0-0.7 0.313-0.7 0.7s0.313 0.7 0.7 0.7h1.455c1.104 0 2-0.895 2-2v-10.132c0-1.105-0.895-2-2-2h-7.464c-1.052 0-1.915 0.813-1.994 1.845zM10.303 6.102c0.192 0 0.375 0.079 0.508 0.218l3.695 3.891c0.086 0.091 0.146 0.202 0.174 0.321 0.027 0.074 0.042 0.155 0.042 0.238 0 0.062-0.008 0.122-0.023 0.178v7.833c0 1.105-0.895 2-2 2h-7.479c-1.105 0-2-0.895-2-2v-10.68c0-1.105 0.895-2 2-2h5.084zM9.527 9.512l-0.042-2.010h-4.266c-0.331 0-0.6 0.269-0.6 0.6v10.68c0 0.331 0.269 0.6 0.6 0.6h7.479c0.331 0 0.6-0.269 0.6-0.6l-0.001-7.311h-1.77c-1.089 0-1.977-0.87-2-1.959zM10.905 8.453l0.021 1.030c0.007 0.326 0.273 0.588 0.6 0.588h0.915l-1.536-1.617zM11.506 13.554c0 0.276-0.224 0.5-0.5 0.5h-4.98c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h4.98c0.276 0 0.5 0.224 0.5 0.5zM10.315 15.554c0 0.276-0.224 0.5-0.5 0.5h-3.793c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3.793c0.276 0 0.5 0.224 0.5 0.5zM9 17.554c0 0.276-0.224 0.5-0.5 0.5h-2.493c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2.493c0.276 0 0.5 0.224 0.5 0.5z"></path>
+</svg>

package/src/assets/styles/element-plus.scss

@@ -144,13 +144,13 @@
 
               &.start-date {
                 .el-date-table-cell {
-                  border-radius: var(--cell-radius) 0 0 var(--cell-radius);
+                  border-radius: var(--cell-radius);
                 }
               }
 
               &.end-date {
                 .el-date-table-cell {
-                  border-radius: 0 var(--cell-radius) var(--cell-radius) 0;
+                  border-radius: var(--cell-radius);
                 }
               }
             }
@@ -177,6 +177,36 @@
     border: 1px solid var(--el-input-border-color);
   }
 
+  .el-date-editor {
+    &.is-focus {
+
+      .el-input__wrapper {
+        box-shadow: none;
+        --el-input-border-color: var(--o-color-primary3);
+      }
+    }
+
+    &:hover {
+
+      .el-input__wrapper {
+        box-shadow: none;
+        --el-input-border-color: var(--o-color-primary2);
+      }
+    }
+
+    &.el-input__wrapper {
+      &:hover {
+        box-shadow: none;
+        --el-input-border-color: var(--o-color-primary2);
+      }
+
+      &.is-active {
+        --el-input-border-color: var(--o-color-primary3);
+      }
+    }
+  }
+
+
   .el-select__wrapper {
     background: var(--o-color-fill2);
   }
@@ -219,6 +249,18 @@
       --el-component-size-large: calc(var(--o-control_size-l) - 2px);
     }
 
+    .el-input__wrapper {
+
+      &:hover {
+        --el-input-border-color: var(--o-color-primary2);
+      }
+
+      &.is-focus {
+        --el-input-border-color: var(--o-color-primary3);
+      }
+
+    }
+
     .el-input-number__decrease,
     .el-input-number__increase {
       &:hover ~ .el-input:not(.is-disabled) .el-input__wrapper {

package/src/components/common/MoreText.vue

@@ -59,7 +59,7 @@ const clickText = () => {
       :class="['more-text-content', link && 'is-link']"
       ref="contentRef"
       :style="{
-        'max-height': expanded ? offsetHeight + 'px' : '66px',
+        'max-height': expanded ? offsetHeight + 'px' : '4.5em',
         '-webkit-line-clamp': expanded ? 'initial' : lines,
       }"
       @click="clickText"
@@ -86,7 +86,7 @@ const clickText = () => {
 <style lang="scss" scoped>
 .more-text-wrapper {
   .more-text-content {
-    line-height: 22px;
+    line-height: 1.5em;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -111,7 +111,7 @@ const clickText = () => {
     }
 
     & > div {
-      height: 22px;
+      height: 1.5em;
       cursor: pointer;
       display: flex;
       align-items: center;

package/src/components/meeting/OMeetingCalendar.vue

@@ -203,6 +203,16 @@ const changeMeetingDay = useDebounceFn((day: string, event?: Event) => {
 }, 300)
 
 
+watch(() => latestDay.value,
+  () => {
+    calendar.value?.pickDay(dayjs((latestDay.value)));
+    changeMeetingDay(latestDay.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
 const selectDate = (val: string, date: string) => {
   if (formatDate(date) === formatDate(limitTime) && val === 'prev-month') {
     isLimit.value = true;
@@ -249,7 +259,6 @@ const getCalendarHeight = async () => {
 
 onMounted(() => {
   getCalendarHeight();
-  getDateData();
 });
 
 const stopWatchData = watch(

package/src/components/meeting/OMeetingMyCalendar.vue

@@ -924,9 +924,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
             display: table;
 
             th {
-              text-align: center;
+              text-align: left;
               border: none;
               --o-color-control3-light: transparent;
+              padding-left: calc(17px - 0.5em);
             }
 
             tr {
@@ -1152,7 +1153,6 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
           .group-title {
             font-weight: 500;
-            margin-bottom: var(--o-gap-2);
             color: var(--o-color-info1);
             @include text2;
             @include respond('phone') {
@@ -1228,26 +1228,41 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
         .o-collapse-item {
           padding: var(--o-gap-4) var(--o-gap-5);
-          padding-bottom: calc(var(--o-gap-5) - var(--o-gap-4));
           border-top: none;
           border-radius: var(--meeting-card-radius);
           transition: margin var(--o-easing-standard) var(--o-duration-s);
-          --copy-display: none;
           --icon-size: 24px;
-          @include respond('<=pad_v') {
+          @include respond-to('pad_h') {
             padding: var(--o-gap-3) var(--o-gap-4);
           }
+          @include respond('<=pad_v') {
+            padding: var(--o-gap-2) var(--o-gap-4);
+          }
 
           @include respond('phone') {
             --icon-size: 20px;
           }
 
+          &.o-collapse-item-expanded {
+            margin-top: var(--o-gap-4);
+            @include respond-to('<=laptop') {
+              margin-top: var(--o-gap-3);
+            }
+            @include respond-to('<=pad_v') {
+              margin-top: var(--o-gap-2);
+            }
+          }
+
           &:hover {
             .title-text {
               color: var(--o-color-primary1);
             }
-            @include respond('>pad_v') {
-              --copy-display: block;
+
+            .o-collapse-item-title {
+              .copy-icon {
+                opacity: 1;
+                visibility: visible;
+              }
             }
           }
 
@@ -1273,12 +1288,29 @@ const cancelActions = computed<DialogActionT[]>(() => {
             border-bottom: none;
             background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
 
-            @include respond('<=pad_v') {
-              --copy-display: block;
-            }
-
             .o-collapse-item-header {
-              border-bottom: 1px solid var(--o-color-control4);
+              padding-bottom: var(--o-gap-2);
+              position: relative;
+
+              &::after {
+                content: '';
+                position: absolute;
+                left: calc(var(--o-gap-3) + var(--icon-size));
+                right: 0;
+                bottom: 0;
+                height: 1px;
+                background-color: var(--o-color-control4);
+                @include respond('phone') {
+                  left: 0;
+                }
+              }
+
+              .o-collapse-item-title {
+                .copy-icon {
+                  opacity: 1;
+                  visibility: visible;
+                }
+              }
             }
           }
         }
@@ -1286,7 +1318,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         .o-collapse-item-header {
           border-bottom: none;
           padding-top: 0;
-          padding-bottom: var(--o-gap-4);
+          padding-bottom: 0;
           display: flex;
           align-items: center;
           gap: var(--o-gap-4);
@@ -1380,7 +1412,11 @@ const cancelActions = computed<DialogActionT[]>(() => {
                   }
 
                   .title-text {
+                    @include text2;
                     @include text-truncate(1);
+                    @include respond('phone') {
+                      @include h3;
+                    }
                   }
                 }
 
@@ -1389,7 +1425,11 @@ const cancelActions = computed<DialogActionT[]>(() => {
                   display: flex;
                   align-items: center;
                   font-weight: 400;
-                  @include tip1;
+                  font-size: 14px;
+                  line-height: 22px;
+                  @include respond('<=pad_v') {
+                    @include tip1;
+                  }
                   @include respond('phone') {
                     flex-direction: column;
                     align-items: flex-start;
@@ -1433,7 +1473,8 @@ const cancelActions = computed<DialogActionT[]>(() => {
             .copy-icon {
               flex-shrink: 0;
               font-size: 24px;
-              display: var(--copy-display);
+              visibility: hidden;
+              opacity: 0;
               color: var(--o-color-info1);
               height: 1em;
               @include respond('<=laptop') {
@@ -1457,7 +1498,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
         .o-collapse-item-body {
           margin-bottom: 0;
-          padding: var(--o-gap-4) 0 0;
+          padding: var(--o-gap-2) 0 0;
 
           .meeting-detail {
             padding-left: calc(var(--o-gap-3) + var(--icon-size));
@@ -1468,13 +1509,20 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
             .meeting-btn {
               border-top: 1px solid var(--o-color-control4);
-              margin-top: var(--o-gap-5);
+              margin-top: var(--o-gap-4);
               padding-top: var(--o-gap-4);
-              padding-bottom: var(--o-gap-4);
               display: flex;
               align-items: center;
               justify-content: flex-end;
               gap: var(--o-gap-5);
+              @include respond('pad_h') {
+                margin-top: var(--o-gap-3);
+                padding-top: var(--o-gap-3);
+              }
+              @include respond('<=pad_v') {
+                margin-top: var(--o-gap-2);
+                padding-top: var(--o-gap-2);
+              }
 
               .o-link {
                 --link-color: inherit;
@@ -1496,6 +1544,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         @include tip1;
       }
     }
+
   }
 
   @include in-dark {

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -192,8 +192,8 @@ const computedList = computed<any[]>(() => {
         cycleType = t('meeting.cycleMonth', [getPointStr(cycle_type, cycle_point as unknown as number[])]);
       }
       timeRange = t('meeting.cycleMeetingText2', {
-        startDate: cycle_start_date,
-        endDate: cycle_end_date,
+        startDate: formatDate(cycle_start_date),
+        endDate: formatDate(cycle_end_date),
         startTime: cycle_start,
         endTime: cycle_end,
         cycleType,
@@ -372,11 +372,6 @@ const computedList = computed<any[]>(() => {
         display: none;
       }
 
-      @include hover {
-        .text {
-          color: var(--o-color-primary1);
-        }
-      }
       @include respond('<=pad_v') {
         &::after {
           width: calc(100% - 2 * 16px);
@@ -390,7 +385,7 @@ const computedList = computed<any[]>(() => {
 
       &.o-collapse-item-expanded {
         .o-collapse-item-header {
-          padding-bottom: var(--o-gap-2);
+          padding-bottom: 0;
 
           .o-collapse-item-title {
             .copy-icon {
@@ -409,9 +404,14 @@ const computedList = computed<any[]>(() => {
 
     .o-collapse-item-header {
       align-items: center;
-      padding: var(--o-gap-4) var(--o-gap-5);
+      padding: var(--o-gap-4) var(--o-gap-5) var(--o-gap-4) var(--o-gap-5);
       position: relative;
 
+      @include hover {
+        .text {
+          color: var(--o-color-primary1);
+        }
+      }
       @include respond('>pad_v') {
         &:hover {
           .o-collapse-item-title {
@@ -422,8 +422,11 @@ const computedList = computed<any[]>(() => {
           }
         }
       }
+      @include respond('pad_h') {
+        padding: var(--o-gap-4) var(--o-gap-3) var(--o-gap-2) var(--o-gap-3);
+      }
       @include respond('<=pad_v') {
-        padding: 12px 16px;
+        padding: var(--o-gap-3) var(--o-gap-4) var(--o-gap-1) var(--o-gap-4);
       }
 
       .o-collapse-item-title {
@@ -499,12 +502,11 @@ const computedList = computed<any[]>(() => {
         border-radius: var(--meeting-card-radius);
         @include tip1;
 
-        @include respond('<=pad_v') {
-          padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + 16px - 12px);
-
+        @include respond('pad_h') {
+          padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2));
         }
-        @include respond('phone') {
-          padding: 12px 16px;
+        @include respond('<=pad_v') {
+          padding: 16px 8px;
         }
 
         .info-item {
@@ -586,8 +588,6 @@ const computedList = computed<any[]>(() => {
       .text {
         display: block;
         font-weight: 600;
-        min-width: 0;
-        flex: 1;
         @include text-truncate(1);
       }
     }

package/src/components/meeting/components/OMeetingDetail.vue

@@ -74,6 +74,12 @@ const getField = (key: string) => {
   if (key === 'register_end_date' && val) {
     return formatDate(val, 'YYYY/MM/DD HH:mm');
   }
+  if (key === 'date' && val) {
+    if (props.data.is_cycle) {
+      return '';
+    }
+    return formatDate(val);
+  }
   return val;
 };
 
@@ -152,8 +158,8 @@ defineExpose({ copyInfo });
         </OLink>
         <span v-else-if="info.key === 'platform'">{{ getPlatformLabel(getField(info.key)) }}</span>
         <span v-else class="value">
-          <i v-if="info.extra" class="extra">{{ getField(info.extra) }}</i>
-          {{ getField(info.key) || '-' }}
+          <i v-if="info.extra && getField(info.extra)" class="extra">{{ getField(info.extra) }}</i>
+          <span class="value-text">{{ getField(info.key) || '-' }}</span>
         </span>
       </template>
       <template v-if="info.isRecord && getField(info.key)?.length">
@@ -174,42 +180,44 @@ defineExpose({ copyInfo });
 <style lang="scss">
 .o-meeting-detail {
   position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: var(--o-gap-2);
+  column-gap: var(--o-gap-4);
+
+  @include respond('pad_v') {
+    row-gap: var(--o-gap-2);
+    column-gap: var(--o-gap-2);
+  }
+  @include respond('phone') {
+    row-gap: var(--o-gap-2);
+    column-gap: var(--o-gap-4);
+  }
+
   .label-item {
     color: var(--o-color-info3);
-    display: flex;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: start;
     font-size: 14px;
-    gap: var(--o-gap-2);
-
+    line-height: 22px;
     @include respond('<=pad_v') {
       font-size: 12px;
-      gap: var(--o-gap-1);
-    }
-
-    &:not(.is-empty) {
-      margin-bottom: var(--o-gap-2);
-    }
-
-    &:last-child {
-      margin-bottom: 0;
+      line-height: 18px;
     }
 
     &.record-item {
-      align-items: flex-start;
+      align-items: start;
 
       .value {
         margin-bottom: 0;
       }
     }
 
-    &.is-en {
-      .label {
-        width: 6em;
-      }
-    }
-
     .label {
-      width: 4em;
+      white-space: nowrap;
       flex-shrink: 0;
       display: flex;
 
@@ -222,18 +230,16 @@ defineExpose({ copyInfo });
     }
 
     .split-mark {
-      width: 0;
-      height: 0;
-      opacity: 0;
-      overflow: hidden;
-    }
-
-    .more-text-wrapper {
-      position: relative;
-      top: -2px;
+      display: none;
     }
 
     .o-link {
+      font-size: 14px;
+      line-height: 22px;
+      @include respond('<=pad_v') {
+        font-size: 12px;
+        line-height: 18px;
+      }
       .o-link-main {
         word-wrap: break-word;
         @include text-truncate(3);
@@ -241,10 +247,8 @@ defineExpose({ copyInfo });
     }
 
     .value {
-      word-wrap: break-word;
-      display: flex !important;
-      align-items: center;
-      @include text-truncate(3);
+      display: flex;
+      align-items: flex-start;
 
       &.link {
         color: var(--o-color-primary1);
@@ -261,7 +265,7 @@ defineExpose({ copyInfo });
   }
 
   .label-item.is-empty {
-    margin: 0;
+    display: none;
   }
 
   .meeting-action {

package/src/i18n/en.ts

@@ -40,7 +40,7 @@ export default {
   'meeting.meetingText': ' {1} at {0}.',
   'meeting.singleMeetingText': ' {1} at {0}.',
   'meeting.cycleMeetingText': ' scheduled at {startTime} to {endTime} {cycleType} from {startDate} to {endDate}.',
-  'meeting.cycleMeetingText2': '{startTime} to {endTime} (UTC+08:00)Beijing {cycleType} from {startDate} to {endDate}.',
+  'meeting.cycleMeetingText2': '{startTime} to {endTime} (UTC+08:00) Beijing {cycleType} from {startDate} to {endDate}.',
   'meeting.cycleDay': ' every day',
   'meeting.cycleWeek.one': 'on {0} every week',
   'meeting.cycleWeek.other': 'on {0} every {1} weeks',
@@ -144,7 +144,7 @@ export default {
   'meeting.version2512Banner': 'openUBMC 25.12 LTS 社区发行版正式上线',
   'meeting.sigs': 'SIG Groups',
   'meeting.groups': 'Groups',
-  'meeting.activityAddress': 'Address',
+  'meeting.activityAddress': 'Location',
   'meeting.livePlatform': 'Live Platform',
   'meeting.meetingTopic': 'Topics',
   'meeting.eventsTitle': 'Name',

package/src/i18n/zh.ts

@@ -40,7 +40,7 @@ export default {
   'meeting.meetingText': '{0} 的{1}',
   'meeting.singleMeetingText': '{0} 的{1}',
   'meeting.cycleMeetingText': '{startDate} 至 {endDate} {cycleType} {startTime} 到 {endTime}的周期会议',
-  'meeting.cycleMeetingText2': '{cycleType} {startTime} 到 {endTime} (UTC+08:00)Beijing 有效期从{startDate} 至 {endDate}',
+  'meeting.cycleMeetingText2': '{cycleType} {startTime} 到 {endTime} (UTC+08:00) Beijing 有效期从{startDate} 至 {endDate}',
   'meeting.cycleDay': '每天',
   'meeting.cycleWeek.one': '每周{0}',
   'meeting.cycleWeek.other': '每{1}周{0}',