@opendesign-plus/components 0.0.1-rc.44 → 0.0.1-rc.46

package/dist/treeshaking/components/meeting/OMeetingMyCalendar.css

@@ -374,17 +374,21 @@
   height: 100%;
   --phone-padding-top: 0;
 }
-@media (min-width: 601px) and (max-width: 840px) {
+@media screen and (max-width: 1200px) {
 .o-my-meeting-calendar .meeting-list {
     flex-direction: column;
+    gap: var(--o-gap-2);
+}
+}
+@media (max-width: 840px) {
+.o-my-meeting-calendar .meeting-list {
     gap: var(--o-gap-4);
+    --phone-padding-top: 56px;
 }
 }
 @media (max-width: 600px) {
 .o-my-meeting-calendar .meeting-list {
-    flex-direction: column;
     gap: var(--o-gap-3);
-    --phone-padding-top: 56px;
 }
 }
 .o-my-meeting-calendar .meeting-list .o-loading .o-layer-mask {
@@ -398,34 +402,32 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--grid--layout-padding);
+  font-weight: 600;
 }
-.o-my-meeting-calendar .meeting-list .list-calendar-mb span:first-child {
-  font-size: 48px;
-  line-height: 64px;
-}
-@media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-meeting-calendar .meeting-list .list-calendar-mb span:first-child {
-    font-size: 40px;
-    line-height: 56px;
-}
-}
-@media (min-width: 841px) and (max-width: 1200px) {
-.o-my-meeting-calendar .meeting-list .list-calendar-mb span:first-child {
-    font-size: 32px;
-    line-height: 44px;
+@media screen and (max-width: 1200px) {
+.o-my-meeting-calendar .meeting-list .list-calendar-mb {
+    display: flex;
+    background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+    border-radius: var(--meeting-card-radius);
+    padding: var(--o-gap-3);
 }
 }
-@media (min-width: 601px) and (max-width: 840px) {
-.o-my-meeting-calendar .meeting-list .list-calendar-mb span:first-child {
-    font-size: 32px;
-    line-height: 44px;
+@media (max-width: 840px) {
+.o-my-meeting-calendar .meeting-list .list-calendar-mb {
+    padding: 0 var(--grid--layout-padding);
+    background-color: var(--o-color-fill1);
+    display: flex;
+    position: fixed;
+    height: var(--phone-padding-top);
+    z-index: 1;
+    top: var(--layout-header-height);
+    left: 0;
+    right: 0;
 }
 }
-@media (max-width: 600px) {
 .o-my-meeting-calendar .meeting-list .list-calendar-mb span:first-child {
-    font-size: 20px;
-    line-height: 28px;
-}
+  font-size: 20px;
+  line-height: 28px;
 }
 .o-my-meeting-calendar .meeting-list .list-calendar-mb span:last-child {
   display: flex;
@@ -438,22 +440,11 @@
 .o-my-meeting-calendar .meeting-list .list-calendar-mb .o-icon:last-child {
   margin-left: 24px;
 }
-@media (max-width: 600px) {
-.o-my-meeting-calendar .meeting-list .list-calendar-mb {
-    background-color: var(--o-color-fill1);
-    display: flex;
-    position: fixed;
-    height: var(--phone-padding-top);
-    z-index: 1;
-    top: var(--layout-header-height);
-    left: 0;
-    right: 0;
-}
-}
 .o-my-meeting-calendar .meeting-list .list-calendar {
   flex-shrink: 0;
   width: 334px;
   background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+  border-radius: var(--meeting-card-radius);
 }
 @media (min-width: 841px) and (max-width: 1200px) {
 .o-my-meeting-calendar .meeting-list .list-calendar .el-calendar .el-calendar__body {
@@ -502,7 +493,7 @@
     padding-bottom: 0;
 }
 }
-@media (max-width: 600px) {
+@media screen and (max-width: 1200px) {
 .o-my-meeting-calendar .meeting-list .list-calendar {
     display: none;
 }
@@ -650,7 +641,7 @@
   background-color: var(--o-color-fill2);
   --content-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height, 64) * 1px);
 }
-@media (max-width: 600px) {
+@media (max-width: 840px) {
 .o-my-meeting-calendar .meeting-list .list-wrapper {
     margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
 }
@@ -818,7 +809,7 @@
     --btn-color: var(--o-color-primary2);
 }
 }
-@media (max-width: 600px) {
+@media (max-width: 840px) {
 .o-my-meeting-calendar .meeting-list .list-body .list-month-change {
     display: none;
 }
@@ -904,6 +895,11 @@
   transition: margin var(--o-easing-standard) var(--o-duration-s);
   --icon-size: 24px;
 }
+@media (max-width: 1680px) {
+.o-my-meeting-calendar .meeting-list .list-body .o-collapse .o-collapse-item {
+    --icon-size: 20px;
+}
+}
 @media (min-width: 841px) and (max-width: 1200px) {
 .o-my-meeting-calendar .meeting-list .list-body .o-collapse .o-collapse-item {
     padding: var(--o-gap-3) var(--o-gap-4);
@@ -912,11 +908,7 @@
 @media (max-width: 840px) {
 .o-my-meeting-calendar .meeting-list .list-body .o-collapse .o-collapse-item {
     padding: var(--o-gap-2) var(--o-gap-4);
-}
-}
-@media (max-width: 600px) {
-.o-my-meeting-calendar .meeting-list .list-body .o-collapse .o-collapse-item {
-    --icon-size: 20px;
+    --icon-size: 16px;
 }
 }
 .o-my-meeting-calendar .meeting-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded {
@@ -1129,14 +1121,6 @@
     line-height: 22px;
 }
 }
-.o-my-meeting-calendar .meeting-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .meeting-title .title-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
 @media (max-width: 600px) {
 .o-my-meeting-calendar .meeting-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .meeting-title .title-text {
     font-size: 22px;

package/dist/treeshaking/components/meeting/OMeetingMyCalendar.vue.mjs

@@ -856,6 +856,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, 8, ["onScrollend"])) : !tableLoading.value ? renderSlot(_ctx.$slots, "empty", { key: 1 }) : createCommentVNode("", true)
           ], 2),
           createVNode(unref(ODialog), {
+            class: "handle-wrapper-dialog",
             visible: handleDialogVisible.value,
             "onUpdate:visible": _cache[9] || (_cache[9] = ($event) => handleDialogVisible.value = $event),
             "main-class": "handle-dialog",

package/dist/treeshaking/components/meeting/OMeetingMyCalendar2.css

@@ -297,8 +297,16 @@
 :root .el-input-number.el-input-number--large {
   line-height: var(--el-component-size-large);
 }
+@media (max-width: 600px) {
+.handle-wrapper-dialog.o-dialog-responsive {
+    --layer-align: center;
+    --layer-justify: center;
+    --layer-origin: center;
+}
+}
 .handle-dialog {
   width: 450px;
+  --dlg-radius: var(--dialog-radius, var(--o-radius-xs));
 }
 .handle-dialog .o-dlg-header {
   margin-bottom: var(--o-gap-5);

package/dist/treeshaking/components/meeting/OMeetingPlayback.css

@@ -19,13 +19,33 @@
     flex-wrap: wrap;
 }
 }
+.o-meeting-playback .o-tab {
+  --tab-nav-divider: 1px solid var(--o-color-control4);
+}
 .o-meeting-playback .card-wrapper {
   border-radius: var(--meeting-card-radius);
   background-color: var(--o-color-fill2);
   padding: var(--o-gap-5);
 }
-.o-meeting-playback .card-wrapper.left-card {
-  padding-bottom: 0;
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback .card-wrapper {
+    padding: var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback .card-wrapper {
+    padding: var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback .card-wrapper {
+    padding: var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback .card-wrapper {
+    padding: var(--o-gap-3);
+}
 }
 .o-meeting-playback .left-card {
   width: 60%;
@@ -96,8 +116,56 @@
   padding-top: var(--o-gap-4);
   height: 280px;
   padding-bottom: 0;
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
   position: relative;
 }
+@media (max-width: 840px) {
+.o-meeting-playback .left-card .info-wrapper .tab-content {
+    height: auto;
+    max-height: none;
+}
+}
+.o-meeting-playback .left-card .info-wrapper .tab-content .more-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--o-color-info2);
+  gap: var(--o-gap-2);
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback .left-card .info-wrapper .tab-content .more-btn {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback .left-card .info-wrapper .tab-content .more-btn {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback .left-card .info-wrapper .tab-content .more-btn {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback .left-card .info-wrapper .tab-content .more-btn {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-meeting-playback .left-card .info-wrapper .tab-content .more-btn .o-icon {
+  font-size: 16px;
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
 .o-meeting-playback .left-card .info-wrapper .tab-content::after {
   height: 24px;
   content: "";
@@ -107,8 +175,39 @@
   right: 0;
   background: linear-gradient(180deg, rgba(var(--o-grey-1), 0), rgba(var(--o-grey-1), 1) 100%);
 }
+@media (max-width: 840px) {
+.o-meeting-playback .left-card .info-wrapper .tab-content::after {
+    display: none;
+}
+}
+@media (max-width: 840px) {
+.o-meeting-playback .left-card .info-wrapper .tab-content.is-collapsible {
+    max-height: 168px;
+    padding-bottom: 22px;
+}
+.o-meeting-playback .left-card .info-wrapper .tab-content.is-collapsible .base-info {
+    padding-bottom: var(--o-gap-4);
+}
+.o-meeting-playback .left-card .info-wrapper .tab-content.is-collapsible .more-btn {
+    display: flex;
+}
+.o-meeting-playback .left-card .info-wrapper .tab-content.is-collapsible::after {
+    display: block;
+    bottom: 22px;
+}
+}
+.o-meeting-playback .left-card .info-wrapper .tab-content.is-expanded {
+  max-height: 2000px;
+  height: fit-content;
+  padding-bottom: 4px;
+}
+.o-meeting-playback .left-card .info-wrapper .tab-content.is-expanded::after {
+  display: none;
+}
+.o-meeting-playback .left-card .info-wrapper .tab-content.is-expanded .more-btn .o-icon {
+  transform: rotate(180deg);
+}
 .o-meeting-playback .left-card .info-wrapper .tab-content .base-info {
-  padding-bottom: var(--o-gap-5);
   font-size: 16px;
   line-height: 24px;
 }
@@ -248,6 +347,7 @@
 }
 .o-meeting-playback .right-card {
   width: 40%;
+  padding: 0;
 }
 @media (max-width: 840px) {
 .o-meeting-playback .right-card {

package/dist/treeshaking/components/meeting/OMeetingPlayback.vue.d.ts

@@ -6,7 +6,7 @@ declare function __VLS_template(): {
     };
     refs: {
         leftRef: HTMLDivElement;
-        playerRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../index').MeetingPlaybackVideoPropsT> & Readonly<{
+        playerRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./types').MeetingPlaybackVideoPropsT> & Readonly<{
             onGetDuration?: ((...args: any[]) => any) | undefined;
             onGetInstance?: ((...args: any[]) => any) | undefined;
             onSetTrackIdx?: ((...args: any[]) => any) | undefined;
@@ -27,7 +27,7 @@ declare function __VLS_template(): {
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<import('../../index').MeetingPlaybackVideoPropsT> & Readonly<{
+        }, Readonly<import('./types').MeetingPlaybackVideoPropsT> & Readonly<{
             onGetDuration?: ((...args: any[]) => any) | undefined;
             onGetInstance?: ((...args: any[]) => any) | undefined;
             onSetTrackIdx?: ((...args: any[]) => any) | undefined;
@@ -38,6 +38,7 @@ declare function __VLS_template(): {
             captions: CaptionItemT[];
             vtt: string;
         }> | null;
+        contentRef: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
@@ -47,12 +48,12 @@ declare const __VLS_component: import('vue').DefineComponent<MeetingPlaybackProp
 }, string, import('vue').PublicProps, Readonly<MeetingPlaybackPropsT> & Readonly<{
     "onChange-date"?: ((...args: any[]) => any) | undefined;
 }>, {
-    data: import('../../index').MeetingPlaybackPropsDataT;
+    data: import('./types').MeetingPlaybackPropsDataT;
     dates: string[];
-    detail: import('../../index').MeetingPlaybackPropsDetailT;
+    detail: import('./types').MeetingPlaybackPropsDetailT;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     leftRef: HTMLDivElement;
-    playerRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../index').MeetingPlaybackVideoPropsT> & Readonly<{
+    playerRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./types').MeetingPlaybackVideoPropsT> & Readonly<{
         onGetDuration?: ((...args: any[]) => any) | undefined;
         onGetInstance?: ((...args: any[]) => any) | undefined;
         onSetTrackIdx?: ((...args: any[]) => any) | undefined;
@@ -73,7 +74,7 @@ declare const __VLS_component: import('vue').DefineComponent<MeetingPlaybackProp
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('../../index').MeetingPlaybackVideoPropsT> & Readonly<{
+    }, Readonly<import('./types').MeetingPlaybackVideoPropsT> & Readonly<{
         onGetDuration?: ((...args: any[]) => any) | undefined;
         onGetInstance?: ((...args: any[]) => any) | undefined;
         onSetTrackIdx?: ((...args: any[]) => any) | undefined;
@@ -84,6 +85,7 @@ declare const __VLS_component: import('vue').DefineComponent<MeetingPlaybackProp
         captions: CaptionItemT[];
         vtt: string;
     }> | null;
+    contentRef: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;