@opendesign-plus/components 0.0.1-rc.22 → 0.0.1-rc.23

package/src/components/activity/{OMyActivityCalendar.vue → OActivityMyCalendar.vue}

@@ -21,7 +21,6 @@ import dayjs from 'dayjs';
 import { useDebounceFn } from '@vueuse/core';
 
 import IconCopy from '~icons/meeting/icon-copy.svg';
-import IconEvent from '~icons/meeting/icon-event.svg';
 
 import type { ActivityItemT, MyActivityCalendarPropsT, ParamsItemT } from './types';
 import { useScreen } from '@opendesign-plus/composables';
@@ -30,10 +29,12 @@ import { useActivityConfig } from './composables/useActivityConfig';
 import { CalendarDataType, MeetingItemT, PageParamsT } from '../meeting/types';
 import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
 import { useI18n, Locales } from '@/i18n';
+import { useMeetingConfig } from '@/components/meeting/composables/useMeetingConfig.ts';
 
 const { t, locale } = useI18n();
 const isZh = computed(() => locale.value === Locales.ZH);
 const { statusMap, activityTypeMap } = useActivityConfig();
+const { getConfig } = useMeetingConfig();
 
 const formatMonthYear = (date: string | Date) => {
   const d = dayjs(date || new Date());
@@ -545,6 +546,9 @@ const deleteActions = computed<DialogActionT[]>(() => {
                 clickable: allDateList.includes(data.day),
                 approved: calcIfApproved(data.day),
               }"
+              :style="{
+                '--dot-bg': `${getConfig(CalendarDataType.EVENTS, 'color')}`
+              }"
             >
               <div class="date-cell-text">
                 {{ Number(data.day.split('-')[2]) }}
@@ -602,9 +606,14 @@ const deleteActions = computed<DialogActionT[]>(() => {
                   >
                     <template #title>
                       <div class="item-header-left">
-                        <div class="act-icon">
+                        <div
+                          class="act-icon"
+                          :style="{
+                            backgroundColor: `${getConfig(CalendarDataType.EVENTS, 'color')}`
+                          }"
+                        >
                           <OIcon>
-                            <IconEvent />
+                            <component :is="getConfig(CalendarDataType.EVENTS, 'icon')" />
                           </OIcon>
                         </div>
                         <div class="header-info">
@@ -634,7 +643,12 @@ const deleteActions = computed<DialogActionT[]>(() => {
                       </div>
                       <div class="item-header-right"
                            v-if="row.content_url && !row.is_delete && [3,4,5,6].includes(row.status)">
-                        <OLink v-if="row.content_url" :href="row.content_url" target="_blank" rel="noopener noreferrer">
+                        <OLink
+                          :hover-underline="false"
+                          v-if="row.content_url"
+                          :href="row.content_url"
+                          target="_blank"
+                          rel="noopener noreferrer">
                           {{ t('meeting.activityDetail') }}
                           <template #suffix>
                             <OIcon>
@@ -643,6 +657,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                           </template>
                         </OLink>
                         <OLink
+                          :hover-underline="false"
                           v-if="
                           row.register_url && (
                             row.status === 3 ||
@@ -735,6 +750,8 @@ const deleteActions = computed<DialogActionT[]>(() => {
 <style lang="scss">
 
 .o-my-activity-calendar {
+  --activity-card-radius: var(--o-radius-xs);
+  --activity-cell-radius: var(--o-radius-xs);
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -763,11 +780,11 @@ const deleteActions = computed<DialogActionT[]>(() => {
     gap: var(--o-gap-4);
     height: 100%;
     --phone-padding-top: 0;
-    @include respond-to('pad_v') {
+    @include respond('pad_v') {
       flex-direction: column;
       gap: var(--o-gap-4);
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       flex-direction: column;
       gap: var(--o-gap-3);
       --phone-padding-top: calc(var(--o-gap-5) + var(--o-gap-3) + var(--o-gap-3));
@@ -808,7 +825,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
       }
     }
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       padding-top: var(--o-gap-7);
       background-color: var(--o-color-ubmc-bg);
       padding-bottom: var(--o-gap-4);
@@ -826,7 +843,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
   .left-calendar {
     width: 336px;
     flex-shrink: 0;
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       .el-calendar {
         .el-calendar__body {
           padding-left: 12px;
@@ -844,18 +861,18 @@ const deleteActions = computed<DialogActionT[]>(() => {
         }
       }
     }
-    @include respond-to('pad_v') {
+    @include respond('pad_v') {
       width: 100%;
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       display: none;
     }
 
     .el-calendar {
       min-height: 460px;
-      height: calc(100% - 54px);
+      height: 100%;
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--activity-card-radius);
 
       .el-calendar__header {
         border-bottom: 1px solid var(--o-color-control4);
@@ -884,6 +901,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
       .el-calendar__body {
         .el-calendar-table {
+          display: table;
           width: 100%;
 
           th {
@@ -929,7 +947,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             .date-cell-text {
               font-size: 14px;
               line-height: 36px;
-              border-radius: var(--o-radius-xs);
+              border-radius: var(--activity-cell-radius);
               background-color: var(--o-color-control2-light);
               border: 1px solid transparent;
             }
@@ -977,19 +995,19 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
             &.clickable {
               &::after {
-                background-color: rgb(var(--o-mixedgray-6));
+                background-color: rgb(var(--o-grey-6));
               }
 
               &.approved::after {
-                background-color: rgba(var(--o-cyan-6));
+                background-color: var(--dot-bg);
               }
 
               &.expired::after {
-                background-color: rgb(var(--o-mixedgray-6));
+                background-color: rgb(var(--o-grey-6));
               }
 
               &.all-deleted::after {
-                background-color: rgb(var(--o-mixedgray-6));
+                background-color: rgb(var(--o-grey-6));
               }
             }
           }
@@ -1008,7 +1026,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     flex-grow: 1;
     background-color: var(--o-color-fill2);
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
     }
 
@@ -1028,7 +1046,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     .scroller-container {
       height: 100%;
       max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
-      @include respond-to('phone') {
+      @include respond('phone') {
         max-height: fit-content;
       }
 
@@ -1040,7 +1058,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           flex-grow: 1;
         }
 
-        @include respond-to('phone') {
+        @include respond('phone') {
           padding-left: var(--o-gap-2);
         }
 
@@ -1069,13 +1087,13 @@ const deleteActions = computed<DialogActionT[]>(() => {
             width: 16px;
             height: 26px;
             position: relative;
-            @include respond-to('laptop') {
+            @include respond('laptop') {
               height: 24px;
             }
-            @include respond-to('pad_h') {
+            @include respond('pad_h') {
               height: 22px;
             }
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               height: 22px;
             }
 
@@ -1128,7 +1146,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           margin-bottom: var(--o-gap-2);
           color: var(--o-color-info1);
           @include text2;
-          @include respond-to('phone') {
+          @include respond('phone') {
             padding-left: var(--o-gap-5);
           }
 
@@ -1143,7 +1161,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
   .list-body {
     height: 100%;
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       height: fit-content;
       padding: var(--o-gap-4) !important;
     }
@@ -1158,7 +1176,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
       @include hover {
         --btn-color: var(--o-color-primary2);
       }
-      @include respond-to('phone') {
+      @include respond('phone') {
         display: none;
       }
 
@@ -1194,49 +1212,49 @@ const deleteActions = computed<DialogActionT[]>(() => {
       }
 
       .height-placeholder {
-        height: 0;
-        transition: margin var(--o-easing-standard) var(--o-duration-s);
-      }
-
-      .o-collapse-item-expanded + .height-placeholder {
         height: var(--o-gap-4);
       }
 
       .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(--o-radius-xs);
+        border-radius: var(--activity-card-radius);
         transition: margin var(--o-easing-standard) var(--o-duration-s);
         --copy-display: none;
         --icon-size: 24px;
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           padding: var(--o-gap-3) var(--o-gap-4);
         }
 
         &:hover {
-          @include respond-to('>pad_v') {
+          .title-text {
+            color: var(--o-color-primary1);
+          }
+          @include respond('>pad_v') {
             --copy-display: inline-flex;
           }
         }
 
-        @include respond-to('phone') {
+        @include respond('phone') {
           --icon-size: 20px;
         }
 
         &.o-collapse-item-expanded {
-          @include respond-to('<=pad_v') {
+          border-bottom: none;
+          background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+          @include respond('<=pad_v') {
             --copy-display: inline-flex;
           }
-        }
-
 
-        &.o-collapse-item-expanded {
-          background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+          .o-collapse-item-header {
+            border-bottom: 1px solid var(--o-color-control4);
+          }
         }
       }
 
       .o-collapse-item-header {
-        border-bottom: 1px solid var(--o-color-control4);
+        border-bottom: none;
         padding-top: 0;
         padding-bottom: var(--o-gap-4);
         display: flex;
@@ -1248,7 +1266,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           position: relative;
           top: 4px;
           flex-shrink: 0;
-          @include respond-to('phone') {
+          @include respond('phone') {
             position: absolute;
             right: 0;
             width: 20px;
@@ -1275,7 +1293,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             gap: var(--o-gap-3);
             width: 100%;
             padding-right: 48px;
-            @include respond-to('phone') {
+            @include respond('phone') {
               flex-grow: 1;
               width: 100%;
               align-self: stretch;
@@ -1325,7 +1343,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
                 .o-tag {
                   margin-left: 8px;
-                  --tag-radius: 4px;
+                  --tag-radius: var(--activity-cell-radius);
                   font-weight: 500;
                   padding: 0 8px;
                   height: 24px;
@@ -1368,6 +1386,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                 color: var(--o-color-info3);
                 display: flex;
                 align-items: center;
+                font-weight: 400;
                 @include tip1;
 
                 .date-range {
@@ -1386,6 +1405,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             gap: var(--o-gap-4);
             margin-top: var(--o-gap-2);
             width: 100%;
+            font-weight: 400;
 
             .o-link {
               font-size: 14px;
@@ -1409,7 +1429,8 @@ const deleteActions = computed<DialogActionT[]>(() => {
             height: 18px;
             width: 18px;
             display: var(--copy-display);
-            @include respond-to('phone') {
+            color: var(--o-color-info1);
+            @include respond('phone') {
               bottom: var(--o-gap-2);
               transform: revert;
               top: revert;
@@ -1435,7 +1456,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
         .activity-detail {
           padding-left: calc(var(--o-gap-3) + var(--icon-size));
-          @include respond-to('phone') {
+          @include respond('phone') {
             padding-left: 0;
           }
 
@@ -1483,8 +1504,9 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .handle-dialog-active {
+  --activity-card-radius: var(--o-radius-xs);
   width: 450px;
-  --dlg-radius: var(--o-radius-xs);
+  --dlg-radius: var(--activity-card-radius);
 
   .o-dlg-header {
     margin-bottom: var(--o-gap-5);

package/src/components/activity/config.ts

@@ -1 +1 @@
-export const WEBSITE_REGEXP = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w ./?%&=-]*)?$/;
+export const WEBSITE_REGEXP = /^https?:\/\/\S+/;

package/src/components/activity/index.ts

@@ -1,6 +1,6 @@
 import _OActivityForm from './OActivityForm.vue';
 import _OActivityApproval from './OActivityApproval.vue';
-import _OMyActivityCalendar from './OMyActivityCalendar.vue';
+import _OActivityMyCalendar from './OActivityMyCalendar.vue';
 import type { App } from 'vue';
 
 
@@ -14,11 +14,11 @@ const OActivityApproval = Object.assign(_OActivityApproval, {
     app.component('OActivityApproval', _OActivityApproval);
   },
 });
-const OMyActivityCalendar = Object.assign(_OMyActivityCalendar, {
+const OActivityMyCalendar = Object.assign(_OActivityMyCalendar, {
   install(app: App) {
-    app.component('OMyActivityCalendar', _OMyActivityCalendar);
+    app.component('OActivityMyCalendar', OActivityMyCalendar);
   },
 });
 
-export { OActivityForm, OActivityApproval, OMyActivityCalendar };
+export { OActivityForm, OActivityApproval, OActivityMyCalendar };
 export * from './types';

package/src/components/common/ContentWrapper.vue

@@ -59,16 +59,16 @@ const paddingBottom = computed(() => {
   --layout-content-padding: 64px;
   --layout-header-height: 80px;
 
-  @include respond-to('<=laptop') {
+  @include respond('<=laptop') {
     --layout-content-max-width: 100%;
     --layout-content-padding: 40px;
   }
 
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     --layout-content-padding: 32px;
   }
 
-  @include respond-to('phone') {
+  @include respond('phone') {
     --layout-content-padding: 24px;
   }
 

package/src/components/element-plus/OElCookieNotice.vue

@@ -291,7 +291,7 @@ defineExpose({
 }
 
 .cookie-notice-content {
-  background-color: rgba(var(--o-mixedgray-1), 0.9);
+  background-color: rgba(var(--o-grey-1), 0.9);
   backdrop-filter: blur(5px);
   box-shadow: var(--o-shadow-1);
 }
@@ -304,13 +304,13 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     padding: 12px var(--layout-content-padding);
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     padding: 8px var(--layout-content-padding);
   }
   @media (max-width: 840px) {
     padding: 16px var(--layout-content-padding);
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     padding: 16px var(--layout-content-padding);
   }
   &:not([type='zh']) {
@@ -327,13 +327,13 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     padding: 12px 0;
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     padding: 8px 0;
   }
   @media (max-width: 840px) {
     padding: 16px 0;
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     padding: 16px 0;
   }
   &:not([type='zh']) {
@@ -353,13 +353,13 @@ defineExpose({
   @media (max-width: 1680px) {
     font-size: 14px;
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     text-align: center;
   }
 }
 
 .cookie-en-title {
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin-left: auto;
   }
 }
@@ -369,7 +369,7 @@ defineExpose({
   line-height: 22px;
   margin-right: 8px;
   text-align: start;
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     font-size: 12px;
     line-height: 18px;
   }
@@ -379,7 +379,7 @@ defineExpose({
   display: flex;
   width: 100%;
   margin-top: 8px;
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     flex-direction: column;
   }
 }
@@ -394,10 +394,10 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     margin-right: 40px;
   }
-  @include respond-to('pad') {
+  @include respond('pad') {
     margin-right: 24px;
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin: 0;
   }
 }
@@ -411,7 +411,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-left: 12px;
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       margin-left: 8px;
     }
     @media (min-width: 841px) {
@@ -419,7 +419,7 @@ defineExpose({
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     margin-top: 16px;
     width: 100%;
     display: grid;
@@ -464,7 +464,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-top: 16px;
     }
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       margin-top: 12px;
     }
     &:nth-child(2) {
@@ -485,7 +485,7 @@ defineExpose({
         @media (1680px >= width >= 1201px) {
           font-size: 18px;
         }
-        @include respond-to('<=pad') {
+        @include respond('<=pad') {
           font-size: 16px;
         }
       }
@@ -494,7 +494,7 @@ defineExpose({
         font-size: 14px;
         color: var(--o-color-info3);
         margin-left: 24px;
-        @include respond-to('<=pad') {
+        @include respond('<=pad') {
           font-size: 12px;
         }
       }
@@ -508,7 +508,7 @@ defineExpose({
         margin-top: 12px;
         font-size: 14px;
       }
-      @include respond-to('<=pad') {
+      @include respond('<=pad') {
         margin-top: 8px;
       }
       @media (max-width: 840px) {
@@ -524,7 +524,7 @@ defineExpose({
   @media (1680px >= width >= 1201px) {
     font-size: 20px;
   }
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     font-size: 18px;
   }
 }
@@ -550,29 +550,29 @@ defineExpose({
 }
 
 :deep(.el-dialog) {
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     --el-dialog-width: 100vw;
   }
   &.grid-width-dlg {
-    @include respond-to('>pad') {
+    @include respond('>pad') {
       --el-dialog-width: var(--grid-14);
     }
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       --el-dialog-width: var(--grid-8);
     }
   }
 }
 
 :deep(.el-dialog) {
-  --el-bg-color: var(--o-color-control-light);
+  --el-bg-color: var(--o-color-control5-light);
   --el-dialog-padding-primary: 32px;
-  @include respond-to('laptop') {
+  @include respond('laptop') {
     --el-dialog-padding-primary: 24px;
   }
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     --el-dialog-padding-primary: 16px;
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     --el-dialog-padding-primary: 16px 24px;
   }
   .el-dialog__header {
@@ -586,7 +586,7 @@ defineExpose({
     @media (1680px >= width >= 1201px) {
       margin-top: 16px;
     }
-    @include respond-to('<=pad_h') {
+    @include respond('<=pad_h') {
       margin-top: 12px;
     }
     .el-button+.el-button {