@opendesign-plus-test/components 0.0.1-rc.113 → 0.0.1-rc.115

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

@@ -1,13 +1,15 @@
-import { defineComponent, ref, computed, watchEffect, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref, withCtx, Fragment, renderList, createCommentVNode, createVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { defineComponent, ref, computed, watchEffect, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, unref, Fragment, renderList, createCommentVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
 import { transformSeconds, speakerNum, transformTime } from "./utils.mjs";
-import { OSelect, OOption, OTab, OTabPane, OScroller } from "@opensig/opendesign";
-import _sfc_main$2 from "./components/OMeetingPlaybackSubtitles.vue.mjs";
+import { OSelect, OOption, OTab, OTabPane, OScroller, OIcon, OIconChevronDown } from "@opensig/opendesign";
+import _sfc_main$3 from "./components/OMeetingPlaybackSubtitles.vue.mjs";
 import './components/OMeetingPlaybackSubtitles.css';
 import './components/OMeetingPlaybackSubtitles2.css';
-import _sfc_main$1 from "./components/OMeetingPlaybackVideo.vue.mjs";
+import _sfc_main$2 from "./components/OMeetingPlaybackVideo.vue.mjs";
 import './components/OMeetingPlaybackVideo.css';
 import { useI18n } from "../../i18n/index.mjs";
 import { PROGRESS_COLORS } from "./config.mjs";
+import _sfc_main$1 from "../common/TooltipText.vue.mjs";
+import '../common/TooltipText.css';
 const _hoisted_1 = { class: "o-meeting-playback" };
 const _hoisted_2 = { class: "video-header" };
 const _hoisted_3 = { class: "video-title" };
@@ -36,7 +38,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     dates: { default: () => [] },
     detail: { default: () => ({}) },
-    data: { default: () => ({}) }
+    data: { default: () => ({}) },
+    dev: { type: Boolean }
   },
   emits: ["change-date"],
   setup(__props, { emit: __emit }) {
@@ -67,7 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const subjectList = ref([]);
     const getProgressColor = (idx) => {
-      return PROGRESS_COLORS[idx % 3];
+      return PROGRESS_COLORS[idx % 6];
     };
     const playerDuration = ref(0);
     const getPlayerDuration = (seconds) => {
@@ -110,13 +113,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const getSubjectList = async (url) => {
       const res = await fetch(url);
       const json = await res.json();
-      subjectList.value = (json || []).map((z) => {
-        return {
-          ...z,
-          startTimeNumber: transformTime(z.startTime),
-          endTimeNumber: transformTime(z.endTime)
-        };
-      });
+      if (props.dev) {
+        subjectList.value = [...json || [], ...json || [], ...json || []].map((z) => {
+          return {
+            ...z,
+            startTimeNumber: transformTime(z.startTime),
+            endTimeNumber: transformTime(z.endTime)
+          };
+        });
+      } else {
+        subjectList.value = (json || []).map((z) => {
+          return {
+            ...z,
+            startTimeNumber: transformTime(z.startTime),
+            endTimeNumber: transformTime(z.endTime)
+          };
+        });
+      }
     };
     const tab = ref("info");
     const tabOptions = computed(() => {
@@ -175,8 +188,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       cancelAnimationFrame(raf);
       observer == null ? void 0 : observer.disconnect();
     });
+    const expanded = ref(false);
+    const toggleExpanded = () => {
+      expanded.value = !expanded.value;
+    };
     return (_ctx, _cache) => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
           class: "left-card card-wrapper",
@@ -184,12 +201,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref: leftRef
         }, [
           createElementVNode("div", _hoisted_2, [
-            createElementVNode("div", _hoisted_3, toDisplayString((_a = __props.detail) == null ? void 0 : _a.topic) + "(" + toDisplayString((_b = __props.detail) == null ? void 0 : _b.date) + ")", 1),
-            ((_c = __props.dates) == null ? void 0 : _c.length) ? (openBlock(), createBlock(unref(OSelect), {
+            createElementVNode("div", _hoisted_3, [
+              createVNode(_sfc_main$1, { lines: 2 }, {
+                default: withCtx(() => {
+                  var _a2, _b2;
+                  return [
+                    createTextVNode(toDisplayString((_a2 = __props.detail) == null ? void 0 : _a2.topic) + "(" + toDisplayString((_b2 = __props.detail) == null ? void 0 : _b2.date) + ")", 1)
+                  ];
+                }),
+                _: 1
+              })
+            ]),
+            ((_a = __props.dates) == null ? void 0 : _a.length) ? (openBlock(), createBlock(unref(OSelect), {
               key: 0,
               size: "large",
               clearable: false,
-              "model-value": (_d = __props.detail) == null ? void 0 : _d.date,
+              "model-value": (_b = __props.detail) == null ? void 0 : _b.date,
               placeholder: unref(t)("meeting.selectDate"),
               onChange: changeDate
             }, {
@@ -206,7 +233,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, 8, ["model-value", "placeholder"])) : createCommentVNode("", true)
           ]),
           createElementVNode("div", _hoisted_4, [
-            __props.data ? (openBlock(), createBlock(_sfc_main$1, {
+            __props.data ? (openBlock(), createBlock(_sfc_main$2, {
               key: 0,
               ref_key: "playerRef",
               ref: playerRef,
@@ -239,7 +266,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["modelValue"]),
             createVNode(unref(OScroller), {
-              class: normalizeClass(["tab-content", `tab-content-${tab.value}`]),
+              class: normalizeClass(["tab-content", `tab-content-${tab.value}`, expanded.value ? "is-expanded" : ""]),
               "show-type": "hover"
             }, {
               default: withCtx(() => {
@@ -295,7 +322,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ])) : createCommentVNode("", true)
                       ]);
                     }), 128))
-                  ])) : createCommentVNode("", true)
+                  ])) : createCommentVNode("", true),
+                  createElementVNode("span", {
+                    class: "more-btn",
+                    onClick: toggleExpanded
+                  }, [
+                    createElementVNode("span", null, toDisplayString(unref(t)("meeting.viewMore")), 1),
+                    createVNode(unref(OIcon), null, {
+                      default: withCtx(() => [
+                        createVNode(unref(OIconChevronDown))
+                      ]),
+                      _: 1
+                    })
+                  ])
                 ];
               }),
               _: 1
@@ -308,7 +347,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             height: rightHeight.value
           })
         }, [
-          createVNode(_sfc_main$2, {
+          createVNode(_sfc_main$3, {
             captions: captionsList.value,
             trackIdx: trackIdx.value,
             instance: playbackInstance.value

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

@@ -23,13 +23,14 @@
   --icon-size2: 24px;
   --icon-right: 12px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1680px) {
 .o-meeting-calendar-list .o-collapse {
     --icon-size2: 20px;
 }
 }
 @media (max-width: 840px) {
 .o-meeting-calendar-list .o-collapse {
+    --icon-size2: 16px;
     --icon-right: 8px;
 }
 }
@@ -346,13 +347,10 @@
 }
 .o-meeting-calendar-list .o-collapse .meet-title .text {
   display: block;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
   font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
 }
 .o-meeting-calendar-list .o-collapse .meet-info {
   display: flex;

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

@@ -13,7 +13,7 @@ import _sfc_main$2 from "../../common/TooltipText.vue.mjs";
 import '../../common/TooltipText.css';
 import dayjs from "dayjs";
 const _hoisted_1 = { class: "meet-title-left" };
-const _hoisted_2 = ["title"];
+const _hoisted_2 = { class: "meet-title" };
 const _hoisted_3 = { class: "text" };
 const _hoisted_4 = { class: "item-title-text" };
 const _hoisted_5 = {
@@ -242,10 +242,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, {
                 title: withCtx(() => [
                   createElementVNode("div", _hoisted_1, [
-                    createElementVNode("div", {
-                      class: "meet-title",
-                      title: item.topic || item.name || item.title
-                    }, [
+                    createElementVNode("div", _hoisted_2, [
                       createVNode(unref(OIcon), {
                         style: normalizeStyle({
                           backgroundColor: `${unref(getConfig)(item.type, "color")}`
@@ -275,7 +272,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           _: 1
                         })
                       ])) : createCommentVNode("", true)
-                    ], 8, _hoisted_2),
+                    ]),
                     createElementVNode("div", {
                       class: "meet-info",
                       ref_for: true,

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

@@ -9,7 +9,7 @@
 .o-meeting-detail {
   position: relative;
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr);
   row-gap: var(--o-gap-2);
   column-gap: var(--o-gap-4);
 }

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

@@ -1,11 +1,11 @@
-import { defineComponent, computed, ref, openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createBlock, unref, withCtx, createTextVNode, createCommentVNode } from "vue";
+import { defineComponent, computed, ref, openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createBlock, withCtx, createTextVNode, unref, createCommentVNode } from "vue";
 import { OLink } from "@opensig/opendesign";
 import { CalendarDataType } from "../types.mjs";
-import _sfc_main$1 from "../../common/MoreText.vue.mjs";
-import '../../common/MoreText.css';
 import { formatDate } from "../utils.mjs";
 import { useMeetingConfig } from "../composables/useMeetingConfig.mjs";
 import { useI18n } from "../../../i18n/index.mjs";
+import _sfc_main$1 from "../../common/TooltipText.vue.mjs";
+import '../../common/TooltipText.css';
 const _hoisted_1 = { class: "o-meeting-detail" };
 const _hoisted_2 = { class: "label" };
 const _hoisted_3 = { key: 2 };
@@ -149,9 +149,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("span", { class: "split-mark" }, toDisplayString(SPLIT_MARK)),
               info.ellipsis ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 0,
-                show: __props.show,
-                text: getField(info.key) || "-"
-              }, null, 8, ["show", "text"])) : info.isLink ? (openBlock(), createBlock(unref(OLink), {
+                lines: 3
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(getField(info.key) || "-"), 1)
+                ]),
+                _: 2
+              }, 1024)) : info.isLink ? (openBlock(), createBlock(unref(OLink), {
                 key: 1,
                 target: "_blank",
                 class: "value",

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

@@ -308,6 +308,27 @@
   display: flex;
   align-items: center;
   gap: var(--o-gap-4);
+  padding: var(--o-gap-5) var(--o-gap-5) 0 var(--o-gap-5);
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .search-captions {
+    padding: var(--o-gap-4) var(--o-gap-4) 0 var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .search-captions {
+    padding: var(--o-gap-3) var(--o-gap-3) 0 var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .search-captions {
+    padding: var(--o-gap-3) var(--o-gap-3) 0 var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .search-captions {
+    padding: var(--o-gap-3) var(--o-gap-3) 0 var(--o-gap-3);
+}
 }
 .o-meeting-playback-subtitles .search-captions .input-captions {
   --input-radius: var(--meeting-input-radius);
@@ -378,18 +399,122 @@
   height: calc(100% - 64px);
   --tab-nav-justify: flex-start;
 }
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (min-width: 601px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab {
+    margin-top: var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab {
+    margin-top: var(--o-gap-2);
+}
+}
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+  padding: 0 var(--o-gap-5);
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+    padding: 0 var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+    padding: 0 var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+    padding: 0 var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+    padding: 0 var(--o-gap-3);
+}
+}
 .o-meeting-playback-subtitles .o-tab .o-tab-nav-list {
   width: 100%;
 }
 .o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
   padding-bottom: var(--o-gap-4);
 }
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
+    padding-bottom: var(--o-gap-3);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
+    padding-bottom: var(--o-gap-2);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
+    padding-bottom: var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
+    padding-bottom: var(--o-gap-1);
+}
+}
 .o-meeting-playback-subtitles .o-tab .o-tab-body {
   height: calc(100% - var(--o-line_height-text2) - var(--o-gap-4));
+  padding: 0 var(--o-gap-2) var(--o-gap-5) var(--o-gap-2);
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body {
+    padding: 0 var(--o-gap-2) var(--o-gap-4) var(--o-gap-2);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body {
+    padding: 0 var(--o-gap-2) var(--o-gap-3) var(--o-gap-2);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body {
+    padding: 0 var(--o-gap-2) var(--o-gap-3) var(--o-gap-2);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body {
+    padding: 0 var(--o-gap-2) var(--o-gap-3) var(--o-gap-2);
+}
 }
 .o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane {
   height: 100%;
-  padding-top: var(--o-gap-5);
+  padding-top: calc(var(--o-gap-5) - var(--o-gap-2));
+  position: relative;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane {
+    padding-top: calc(var(--o-gap-4) - var(--o-gap-2));
+}
+}
+@media (min-width: 601px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane {
+    padding-top: calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane {
+    padding-top: calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane::after {
+  height: 24px;
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, rgba(var(--o-grey-1), 0), rgba(var(--o-grey-1), 1) 100%);
 }
 .o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane .o-scroller {
   height: 100%;
@@ -398,7 +523,7 @@
   width: calc(100% + 16px);
 }
 .o-meeting-playback-subtitles .o-tab .o-row {
-  margin-top: var(--o-gap-5);
+  margin-top: 0;
 }
 @media (max-width: 840px) {
 .o-meeting-playback-subtitles .captions-tab .captions-scroller {
@@ -406,7 +531,29 @@
 }
 }
 .o-meeting-playback-subtitles .captions-tab .captions-item {
-  padding: 4px 8px;
+  padding: var(--o-gap-2) calc(var(--o-gap-5) - var(--o-gap-2));
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item {
+    padding: var(--o-gap-2) calc(var(--o-gap-4) - var(--o-gap-2));
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item {
+    padding: var(--o-gap-2) calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item {
+    padding: var(--o-gap-2) calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item {
+    padding: var(--o-gap-2) calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item {
   cursor: pointer;
   border-radius: var(--meeting-cell-radius);
 }
@@ -461,8 +608,8 @@
 .o-meeting-playback-subtitles .captions-tab .captions-item .info .speaker {
   color: var(--o-color-info3);
   margin-left: 4px;
-  font-size: 12px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
 .o-meeting-playback-subtitles .captions-tab .captions-item .info .speaker {
@@ -491,8 +638,8 @@
 .o-meeting-playback-subtitles .captions-tab .captions-item .info .start-time {
   color: var(--o-color-info3);
   margin-left: 16px;
-  font-size: 12px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
 .o-meeting-playback-subtitles .captions-tab .captions-item .info .start-time {

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

@@ -76,14 +76,20 @@
 }
 .video-js {
   --right-size: 32px;
-  --right-icon-size: 24px;
+  --right-icon-size: 32px;
   --right-gap: 24px;
 }
 .video-js div.vjs-poster {
   position: absolute;
 }
+.video-js div.vjs-poster picture {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .video-js div.vjs-poster img {
   object-fit: cover;
+  max-width: 100%;
 }
 .video-js div.vjs-poster::after {
   content: "";
@@ -110,9 +116,10 @@
   width: 32px;
   height: 32px;
   margin-left: var(--o-gap-5);
+  margin-right: var(--o-gap-2);
 }
 .video-js .vjs-control-bar .vjs-play-control .vjs-icon-placeholder::before {
-  font-size: 24px;
+  font-size: 32px;
   line-height: 32px;
 }
 .video-js .vjs-control-bar .vjs-skip-backward-5 {

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

@@ -11,7 +11,7 @@ declare const _default: import('vue').DefineComponent<MeetingPlaybackVideoPropsT
     onSetTrackIdx?: ((...args: any[]) => any) | undefined;
 }>, {
     src: string;
-    captions: import('../../../index.ts').CaptionItemT[];
+    captions: import('..').CaptionItemT[];
     vtt: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;