unika-components 1.0.91 → 1.0.93

package/dist/unika-components.css

@@ -1,4 +1,8 @@
 
+.uni-image-component {
+  max-width: 100%;
+}
+
 h2.uni-text-component, p.uni-text-component {
   margin-bottom: 0;
 }
@@ -11,39 +15,6 @@ button.uni-text-component {
   white-space: pre-wrap;
 }
 
-.uni-image-component {
-  max-width: 100%;
-}
-
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
-}
-
-  .uni-video-component {
-    position: relative;
-    text-align: center;
-  }
-  .play-pause-button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
-    font-size: 2rem;
-    color: #fff;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
-    padding: 10px;
-    transition: background 0.3s;
-  }
-  .play-pause-button:hover {
-    background: rgba(0, 0, 0, 0.8);
-  }
-
  .slide-guide {
     position: absolute;
     bottom: 90px;
@@ -117,6 +88,14 @@ body, html {
     }
 }
 
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
+
   .uni-background-component {
     width: 100%;
   }
@@ -251,6 +230,27 @@ body, html {
   }
 }
 
+  .uni-video-component {
+    position: relative;
+    text-align: center;
+  }
+  .play-pause-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    font-size: 2rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    padding: 10px;
+    transition: background 0.3s;
+  }
+  .play-pause-button:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
 .ant-input-number {
   box-sizing: border-box;
   margin: 0;
@@ -286,6 +286,11 @@ body, html {
   vertical-align: top;
 }
 
+.effect {
+  width: 100%;
+  height: 100%;
+}
+
 .like-button {
   display: flex;
   flex-direction: column;
@@ -570,11 +575,6 @@ input::placeholder {
   max-width: 100%;
   max-height: 100%;
 }
-
-.effect {
-  width: 100%;
-  height: 100%;
-}
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -1123,6 +1123,193 @@ button.swiper-pagination-bullet {
           backface-visibility: hidden;
 }
 
+
+.no-animation__card {
+  font-weight: 500;
+  font-size: var(--countdown-size, 2rem);
+  line-height: 1.5;
+  display: block;
+  color: var(--main-color, #EC685C);
+}
+
+.flip-clock {
+  text-align: center;
+  perspective: 600px;
+  margin: 0 auto;
+}
+
+.flip-clock *,
+.flip-clock *:before,
+.flip-clock *:after {
+  box-sizing: border-box;
+}
+
+.flip-clock__piece {
+  display: inline-block;
+  margin: 0 0.2vw;
+}
+
+@media (min-width: 1000px) {
+  .flip-clock__piece {
+    margin: 0 5px;
+  }
+}
+
+.flip-clock__slot {
+  font-size: var(--label-size, 1rem);
+  line-height: 1.5;
+  display: block;
+  color: var(--label-color, #222222);
+}
+
+.flip-card {
+  display: block;
+  position: relative;
+  padding-bottom: 0.72em; /* halfHeight */
+  font-size: var(--countdown-size, 2.25rem);
+  line-height: 0.95;
+}
+
+@media (min-width: 1000px) {
+  .flip-clock__slot {
+    font-size: 1.2rem;
+  }
+  
+  .flip-card {
+    font-size: 3rem;
+  }
+}
+
+.flip-card__top,
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__back::before,
+.flip-card__back::after{
+  display: block;
+  height: 0.72em; /* halfHeight */
+  color: var(--main-color, #EC685C);
+  background: var(--main-flip-background-color, #222222);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: 0.15em 0.15em 0 0; /* borderRadius */
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.1em;
+}
+
+.flip-card__top-4digits,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits,
+.flip-card__back-4digits::before,
+.flip-card__back-4digits::after {
+  display: block;
+  height: 0.72em; /* halfHeight */
+  color: var(--main-color, #EC685C);
+  background: var(--main-flip-background-color, #222222);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: 0.15em 0.15em 0 0; /* borderRadius */
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.65em;
+}
+
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits {
+  color: var(--second-flip-color, #EC685C);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  border-top: solid 1px var(--second-flip-background-color, #000);
+  background: var(--second-flip-background-color, #393939);
+  border-radius: 0 0 0.15em 0.15em; /* borderRadius */
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.flip-card__back-bottom,
+.flip-card__back-bottom-4digits {
+  z-index: 1;
+}
+
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+  display: block;
+  margin-top: -0.72em; /* Negative halfHeight */
+}
+.flip-card__back::before,
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__back-4digits::before,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+    content: attr(data-value);
+}
+
+.flip-card__back,
+.flip-card__back-4digits {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0%;
+    pointer-events: none;
+}
+.flip-card__back::before,
+.flip-card__back-4digits::before {
+  position: relative;
+  overflow: hidden;
+  z-index: -1;
+}
+
+.flip .flip-card__back::before,
+.flip .flip-card__back-4digits::before {
+  z-index: 1;
+  animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
+  animation-fill-mode: both;
+  transform-origin: center bottom;
+}
+
+.flip .flip-card__bottom,
+.flip .flip-card__bottom-4digits {
+  transform-origin: center top;
+  animation-fill-mode: both;
+  animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
+}
+@keyframes flipTop {
+  0% {
+    transform: rotateX(0deg);
+    z-index: 2;
+  }
+  0%, 99% {
+    opacity: 1;
+  }
+  100% {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipBottom {
+  0%, 50% {
+    z-index: -1;
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+  51% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: rotateX(0deg);
+    z-index: 5;
+  }
+}
+
 .unika-calendar-title {
   font-size: 25px;
   padding-bottom: 4px;
@@ -1374,193 +1561,6 @@ button.swiper-pagination-bullet {
   padding: 0 0px;
   border-bottom: 1px solid
 }
-
-
-.no-animation__card {
-  font-weight: 500;
-  font-size: var(--countdown-size, 2rem);
-  line-height: 1.5;
-  display: block;
-  color: var(--main-color, #EC685C);
-}
-
-.flip-clock {
-  text-align: center;
-  perspective: 600px;
-  margin: 0 auto;
-}
-
-.flip-clock *,
-.flip-clock *:before,
-.flip-clock *:after {
-  box-sizing: border-box;
-}
-
-.flip-clock__piece {
-  display: inline-block;
-  margin: 0 0.2vw;
-}
-
-@media (min-width: 1000px) {
-  .flip-clock__piece {
-    margin: 0 5px;
-  }
-}
-
-.flip-clock__slot {
-  font-size: var(--label-size, 1rem);
-  line-height: 1.5;
-  display: block;
-  color: var(--label-color, #222222);
-}
-
-.flip-card {
-  display: block;
-  position: relative;
-  padding-bottom: 0.72em; /* halfHeight */
-  font-size: var(--countdown-size, 2.25rem);
-  line-height: 0.95;
-}
-
-@media (min-width: 1000px) {
-  .flip-clock__slot {
-    font-size: 1.2rem;
-  }
-  
-  .flip-card {
-    font-size: 3rem;
-  }
-}
-
-.flip-card__top,
-.flip-card__bottom,
-.flip-card__back-bottom,
-.flip-card__back::before,
-.flip-card__back::after{
-  display: block;
-  height: 0.72em; /* halfHeight */
-  color: var(--main-color, #EC685C);
-  background: var(--main-flip-background-color, #222222);
-  padding: 0.23em 0.15em 0.4em;
-  border-radius: 0.15em 0.15em 0 0; /* borderRadius */
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  transform-style: preserve-3d;
-  width: 2.1em;
-}
-
-.flip-card__top-4digits,
-.flip-card__bottom-4digits,
-.flip-card__back-bottom-4digits,
-.flip-card__back-4digits::before,
-.flip-card__back-4digits::after {
-  display: block;
-  height: 0.72em; /* halfHeight */
-  color: var(--main-color, #EC685C);
-  background: var(--main-flip-background-color, #222222);
-  padding: 0.23em 0.15em 0.4em;
-  border-radius: 0.15em 0.15em 0 0; /* borderRadius */
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  transform-style: preserve-3d;
-  width: 2.65em;
-}
-
-.flip-card__bottom,
-.flip-card__back-bottom,
-.flip-card__bottom-4digits,
-.flip-card__back-bottom-4digits {
-  color: var(--second-flip-color, #EC685C);
-  position: absolute;
-  top: 50%;
-  left: 0;
-  border-top: solid 1px var(--second-flip-background-color, #000);
-  background: var(--second-flip-background-color, #393939);
-  border-radius: 0 0 0.15em 0.15em; /* borderRadius */
-  pointer-events: none;
-  overflow: hidden;
-  z-index: 2;
-}
-
-.flip-card__back-bottom,
-.flip-card__back-bottom-4digits {
-  z-index: 1;
-}
-
-.flip-card__bottom::after,
-.flip-card__back-bottom::after,
-.flip-card__bottom-4digits::after,
-.flip-card__back-bottom-4digits::after {
-  display: block;
-  margin-top: -0.72em; /* Negative halfHeight */
-}
-.flip-card__back::before,
-.flip-card__bottom::after,
-.flip-card__back-bottom::after,
-.flip-card__back-4digits::before,
-.flip-card__bottom-4digits::after,
-.flip-card__back-bottom-4digits::after {
-    content: attr(data-value);
-}
-
-.flip-card__back,
-.flip-card__back-4digits {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: 0%;
-    pointer-events: none;
-}
-.flip-card__back::before,
-.flip-card__back-4digits::before {
-  position: relative;
-  overflow: hidden;
-  z-index: -1;
-}
-
-.flip .flip-card__back::before,
-.flip .flip-card__back-4digits::before {
-  z-index: 1;
-  animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
-  animation-fill-mode: both;
-  transform-origin: center bottom;
-}
-
-.flip .flip-card__bottom,
-.flip .flip-card__bottom-4digits {
-  transform-origin: center top;
-  animation-fill-mode: both;
-  animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
-}
-@keyframes flipTop {
-  0% {
-    transform: rotateX(0deg);
-    z-index: 2;
-  }
-  0%, 99% {
-    opacity: 1;
-  }
-  100% {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes flipBottom {
-  0%, 50% {
-    z-index: -1;
-    transform: rotateX(90deg);
-    opacity: 0;
-  }
-  51% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 1;
-    transform: rotateX(0deg);
-    z-index: 5;
-  }
-}
 
   .barrage-container {
     position: absolute;

package/dist/unika-components.esm.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$3, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createCommentVNode, createVNode, normalizeClass, createElementVNode, pushScopeId, popScopeId, renderSlot, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, render as render$o, toRef, Teleport, isRef, toRaw, TransitionGroup, mergeProps } from 'vue';
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$3, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, mergeProps, createCommentVNode, createVNode, normalizeClass, createElementVNode, pushScopeId, popScopeId, renderSlot, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, render as render$o, toRef, Teleport, isRef, toRaw, TransitionGroup } from 'vue';
 import crypto from 'crypto';
 import util, { TextEncoder as TextEncoder$1 } from 'util';
 import stream, { Readable } from 'stream';
@@ -5359,7 +5359,7 @@ var script$l = defineComponent({
     }
 });
 
-const _hoisted_1$e = ["src"];
+const _hoisted_1$f = ["src"];
 
 function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("img", {
@@ -5368,7 +5368,7 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     class: "uni-image-component",
     draggable: false
-  }, null, 12 /* STYLE, PROPS */, _hoisted_1$e))
+  }, null, 12 /* STYLE, PROPS */, _hoisted_1$f))
 }
 
 script$l.render = render$m;
@@ -5425,7 +5425,7 @@ var script$j = defineComponent({
     }
 });
 
-const _hoisted_1$d = ["id"];
+const _hoisted_1$e = ["id"];
 
 function render$k(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
@@ -5438,7 +5438,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
         id: `component-${item.id}`
       }, [
         (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-      ], 8 /* PROPS */, _hoisted_1$d))
+      ], 8 /* PROPS */, _hoisted_1$e))
     }), 128 /* KEYED_FRAGMENT */))
   ], 4 /* STYLE */))
 }
@@ -13054,10 +13054,10 @@ var script$i = defineComponent({
     }
 });
 
-const _hoisted_1$c = { style: {"width":"100%","height":"100%"} };
+const _hoisted_1$d = { style: {"width":"100%","height":"100%"} };
 const _hoisted_2$6 = ["id"];
 const _hoisted_3$5 = {
-  key: 0,
+  key: 2,
   class: "up-arrow"
 };
 const _hoisted_4$4 = /*#__PURE__*/createElementVNode("img", {
@@ -13069,11 +13069,18 @@ const _hoisted_5$4 = [
 ];
 
 function render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_uni_tanmu = resolveComponent("uni-tanmu");
+  const _component_uni_music = resolveComponent("uni-music");
   const _component_swiper_slide = resolveComponent("swiper-slide");
   const _component_swiper = resolveComponent("swiper");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$c, [
-    createCommentVNode(" <uni-tanmu v-if=\"work?.tanmu\" v-bind=\"{ publishContentID: work.uuid }\"/>\n    <uni-music v-if=\"work?.music?.musicSrc\" v-bind=\"{ musicSrc: work?.music?.musicSrc }\"/> "),
+  return (openBlock(), createElementBlock("div", _hoisted_1$d, [
+    (_ctx.work?.tanmu)
+      ? (openBlock(), createBlock(_component_uni_tanmu, normalizeProps(mergeProps({ key: 0 }, { publishContentID: _ctx.work.uuid })), null, 16 /* FULL_PROPS */))
+      : createCommentVNode("v-if", true),
+    (_ctx.work?.music?.musicSrc)
+      ? (openBlock(), createBlock(_component_uni_music, normalizeProps(mergeProps({ key: 1 }, { musicSrc: _ctx.work?.music?.musicSrc })), null, 16 /* FULL_PROPS */))
+      : createCommentVNode("v-if", true),
     createVNode(_component_swiper, {
       class: "swiper-container",
       modules: _ctx.modules,
@@ -13151,7 +13158,7 @@ var script$h = defineComponent({
     }
 });
 
-const _hoisted_1$b = {
+const _hoisted_1$c = {
   key: 0,
   class: "watermark"
 };
@@ -13164,7 +13171,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createCommentVNode(" <a-watermark v-if=\"watermark\" content=\"Unika\" class=\"watermark\">\r\n      <div style=\"\" />\r\n    </a-watermark> "),
     (_ctx.watermark)
-      ? (openBlock(), createElementBlock("div", _hoisted_1$b, "Unika"))
+      ? (openBlock(), createElementBlock("div", _hoisted_1$c, "Unika"))
       : createCommentVNode("v-if", true),
     (_ctx.backgroundImage !== '')
       ? (openBlock(), createElementBlock("img", {
@@ -13255,7 +13262,7 @@ var script$g = defineComponent({
 });
 
 const _withScopeId$2 = n => (pushScopeId("data-v-99922522"),n=n(),popScopeId(),n);
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   id: "audio",
   class: "uni-music-component"
 };
@@ -13271,7 +13278,7 @@ const _hoisted_4$3 = {
 const _hoisted_5$3 = ["src"];
 
 function render$h(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$b, [
     createElementVNode("div", {
       class: normalizeClass({ mrotate: _ctx.isPlaying, audio: true }),
       onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePlay && _ctx.togglePlay(...args)))
@@ -13359,7 +13366,7 @@ var script$f = defineComponent({
     }
 });
 
-const _hoisted_1$9 = ["innerHTML"];
+const _hoisted_1$a = ["innerHTML"];
 const _hoisted_2$3 = {
   key: 1,
   ref: "videoPlayer",
@@ -13377,7 +13384,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
       ? (openBlock(), createElementBlock("div", {
           key: 0,
           innerHTML: _ctx.iframeHtml
-        }, null, 8 /* PROPS */, _hoisted_1$9))
+        }, null, 8 /* PROPS */, _hoisted_1$a))
       : (openBlock(), createElementBlock("video", _hoisted_2$3, [
           createElementVNode("source", {
             src: _ctx.videoSrc,
@@ -15993,7 +16000,7 @@ var script$e = defineComponent({
 });
 
 const _withScopeId$1 = n => (pushScopeId("data-v-ef842ea2"),n=n(),popScopeId(),n);
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   key: 1,
   class: "can-top2"
 };
@@ -16033,7 +16040,7 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
         ], 2 /* CLASS */))
       : createCommentVNode("v-if", true),
     (_ctx.themeStyle == '2' || _ctx.themeStyle == '3')
-      ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+      ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
           (_ctx.themeStyle == '2' || _ctx.themeStyle == '3')
             ? (openBlock(), createElementBlock("div", {
                 key: 0,
@@ -16258,7 +16265,7 @@ var script$d = defineComponent({
     }
 });
 
-const _hoisted_1$7 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "slot-number"
 };
@@ -16285,7 +16292,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
     }, {
       default: withCtx((slotProps) => [
         (_ctx.checkItem(slotProps.item.date))
-          ? (openBlock(), createElementBlock("div", _hoisted_1$7, toDisplayString(_ctx.getItemNumber(slotProps.item.date)), 1 /* TEXT */))
+          ? (openBlock(), createElementBlock("div", _hoisted_1$8, toDisplayString(_ctx.getItemNumber(slotProps.item.date)), 1 /* TEXT */))
           : createCommentVNode("v-if", true)
       ]),
       _: 1 /* STABLE */
@@ -22347,7 +22354,7 @@ var script$c = {
   }
 };
 
-const _hoisted_1$6 = { class: "flip-clock" };
+const _hoisted_1$7 = { class: "flip-clock" };
 const _hoisted_2$1 = ["id"];
 const _hoisted_3$1 = { key: 0 };
 const _hoisted_4$1 = { class: "flip-card__top" };
@@ -22358,7 +22365,7 @@ const _hoisted_8 = { key: 1 };
 const _hoisted_9 = { class: "no-animation__card" };
 
 function render$d(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$6, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
     (openBlock(true), createElementBlock(Fragment, null, renderList($setup.timeData, (data) => {
       return withDirectives((openBlock(), createElementBlock("span", {
         key: data.label,
@@ -22607,7 +22614,7 @@ var script$a = defineComponent({
     }
 });
 
-const _hoisted_1$5 = ["innerHTML"];
+const _hoisted_1$6 = ["innerHTML"];
 
 function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
@@ -22617,7 +22624,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
       innerHTML: _ctx.iframeHtml,
       class: "uni-map-component",
       onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.openMap && _ctx.openMap(...args)))
-    }, null, 8 /* PROPS */, _hoisted_1$5)
+    }, null, 8 /* PROPS */, _hoisted_1$6)
   ], 4 /* STYLE */))
 }
 
@@ -26385,7 +26392,7 @@ var script$8 = defineComponent({
     }
 });
 
-const _hoisted_1$4 = { class: "like-count" };
+const _hoisted_1$5 = { class: "like-count" };
 
 function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
@@ -26399,7 +26406,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass({ 'liked': _ctx.liked }),
       icon: ['far', 'thumbs-up']
     }, null, 8 /* PROPS */, ["class"]),
-    createElementVNode("span", _hoisted_1$4, toDisplayString(_ctx.likeCount), 1 /* TEXT */),
+    createElementVNode("span", _hoisted_1$5, toDisplayString(_ctx.likeCount), 1 /* TEXT */),
     createCommentVNode(" <font-awesome-icon :icon=\"['far', 'heart']\" />\r\n    <font-awesome-icon :icon=\"['far', 'star']\" />")
   ], 4 /* STYLE */))
 }
@@ -58300,7 +58307,7 @@ var script$6 = defineComponent({
 });
 
 const _withScopeId = n => (pushScopeId("data-v-1ec8767f"),n=n(),popScopeId(),n);
-const _hoisted_1$3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("h3", { style: {"text-align":"center"} }, "出席人数登记表单", -1 /* HOISTED */));
+const _hoisted_1$4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("h3", { style: {"text-align":"center"} }, "出席人数登记表单", -1 /* HOISTED */));
 
 function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_a_input = resolveComponent("a-input");
@@ -58314,7 +58321,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
     style: normalizeStyle$1({ ..._ctx.styleProps, transform: _ctx.transform, opacity: _ctx.opacity }),
     class: "uni-register-form-component"
   }, [
-    _hoisted_1$3,
+    _hoisted_1$4,
     createVNode(_component_a_form, {
       "label-col": _ctx.labelCol,
       "wrapper-col": _ctx.wrapperCol,
@@ -80019,7 +80026,7 @@ var script$4 = defineComponent({
     }
 });
 
-const _hoisted_1$2 = ["src"];
+const _hoisted_1$3 = ["src"];
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_swiper_slide = resolveComponent("swiper-slide");
@@ -80048,7 +80055,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
               createElementVNode("img", {
                 src: slide.image,
                 alt: "Slide Image"
-              }, null, 8 /* PROPS */, _hoisted_1$2)
+              }, null, 8 /* PROPS */, _hoisted_1$3)
             ]),
             _: 2 /* DYNAMIC */
           }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class"]))
@@ -80205,10 +80212,10 @@ var script$2 = defineComponent({
     }
 });
 
-const _hoisted_1$1 = { class: "barrage-container" };
+const _hoisted_1$2 = { class: "barrage-container" };
 
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$1, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$2, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.barrages, (barrage) => {
       return (openBlock(), createElementBlock("div", {
         key: barrage.key,
@@ -99036,7 +99043,7 @@ var script$1 = defineComponent({
     }
 });
 
-const _hoisted_1 = { class: "uni-tanmu-component" };
+const _hoisted_1$1 = { class: "uni-tanmu-component" };
 const _hoisted_2 = { class: "modal-footer" };
 const _hoisted_3 = {
   id: "toolbarNew",
@@ -99064,7 +99071,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_a_modal = resolveComponent("a-modal");
   const _component_Barrage = resolveComponent("Barrage");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$1, [
     createVNode(_component_a_modal, {
       open: _ctx.open,
       "onUpdate:open": _cache[2] || (_cache[2] = $event => ((_ctx.open) = $event)),
@@ -99164,18 +99171,34 @@ script$1.install = (app) => {
     app.component(script$1.name, script$1);
 };
 
-var script = {
-  methods: {
-    showAlert() {
+var script = defineComponent({
+  name: 'uni-test',
+  props: {
+  },
+  components: {
+    // FontAwesomeIcon
+  },
+  setup (props) {
+    // 重用并且简化
+    // 抽离并且获得 styleProps
+    const showAlert = () => {
       alert('Button clicked!');
+    };
+    return {
+      showAlert
     }
   }
-};
+});
+
+const _hoisted_1 = { style: {"position":"absolute","left":"10px","top":"10px"} };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("button", {
-    onClick: _cache[0] || (_cache[0] = (...args) => ($options.showAlert && $options.showAlert(...args)))
-  }, "Click me"))
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("button", {
+      onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.showAlert && _ctx.showAlert(...args))),
+      style: {"width":"300px","height":"100px","background-color":"blue"}
+    }, "Click me")
+  ]))
 }
 
 script.render = render;

package/dist/unika-components.umd.js

@@ -5365,7 +5365,7 @@
       }
   });
 
-  const _hoisted_1$e = ["src"];
+  const _hoisted_1$f = ["src"];
 
   function render$m(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("img", {
@@ -5374,7 +5374,7 @@
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       class: "uni-image-component",
       draggable: false
-    }, null, 12 /* STYLE, PROPS */, _hoisted_1$e))
+    }, null, 12 /* STYLE, PROPS */, _hoisted_1$f))
   }
 
   script$l.render = render$m;
@@ -5431,7 +5431,7 @@
       }
   });
 
-  const _hoisted_1$d = ["id"];
+  const _hoisted_1$e = ["id"];
 
   function render$k(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
@@ -5444,7 +5444,7 @@
           id: `component-${item.id}`
         }, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-        ], 8 /* PROPS */, _hoisted_1$d))
+        ], 8 /* PROPS */, _hoisted_1$e))
       }), 128 /* KEYED_FRAGMENT */))
     ], 4 /* STYLE */))
   }
@@ -13060,10 +13060,10 @@
       }
   });
 
-  const _hoisted_1$c = { style: {"width":"100%","height":"100%"} };
+  const _hoisted_1$d = { style: {"width":"100%","height":"100%"} };
   const _hoisted_2$6 = ["id"];
   const _hoisted_3$5 = {
-    key: 0,
+    key: 2,
     class: "up-arrow"
   };
   const _hoisted_4$4 = /*#__PURE__*/vue.createElementVNode("img", {
@@ -13075,11 +13075,18 @@
   ];
 
   function render$j(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_uni_tanmu = vue.resolveComponent("uni-tanmu");
+    const _component_uni_music = vue.resolveComponent("uni-music");
     const _component_swiper_slide = vue.resolveComponent("swiper-slide");
     const _component_swiper = vue.resolveComponent("swiper");
 
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-      vue.createCommentVNode(" <uni-tanmu v-if=\"work?.tanmu\" v-bind=\"{ publishContentID: work.uuid }\"/>\n    <uni-music v-if=\"work?.music?.musicSrc\" v-bind=\"{ musicSrc: work?.music?.musicSrc }\"/> "),
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+      (_ctx.work?.tanmu)
+        ? (vue.openBlock(), vue.createBlock(_component_uni_tanmu, vue.normalizeProps(vue.mergeProps({ key: 0 }, { publishContentID: _ctx.work.uuid })), null, 16 /* FULL_PROPS */))
+        : vue.createCommentVNode("v-if", true),
+      (_ctx.work?.music?.musicSrc)
+        ? (vue.openBlock(), vue.createBlock(_component_uni_music, vue.normalizeProps(vue.mergeProps({ key: 1 }, { musicSrc: _ctx.work?.music?.musicSrc })), null, 16 /* FULL_PROPS */))
+        : vue.createCommentVNode("v-if", true),
       vue.createVNode(_component_swiper, {
         class: "swiper-container",
         modules: _ctx.modules,
@@ -13157,7 +13164,7 @@
       }
   });
 
-  const _hoisted_1$b = {
+  const _hoisted_1$c = {
     key: 0,
     class: "watermark"
   };
@@ -13170,7 +13177,7 @@
     }, [
       vue.createCommentVNode(" <a-watermark v-if=\"watermark\" content=\"Unika\" class=\"watermark\">\r\n      <div style=\"\" />\r\n    </a-watermark> "),
       (_ctx.watermark)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, "Unika"))
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, "Unika"))
         : vue.createCommentVNode("v-if", true),
       (_ctx.backgroundImage !== '')
         ? (vue.openBlock(), vue.createElementBlock("img", {
@@ -13261,7 +13268,7 @@
   });
 
   const _withScopeId$2 = n => (vue.pushScopeId("data-v-99922522"),n=n(),vue.popScopeId(),n);
-  const _hoisted_1$a = {
+  const _hoisted_1$b = {
     id: "audio",
     class: "uni-music-component"
   };
@@ -13277,7 +13284,7 @@
   const _hoisted_5$3 = ["src"];
 
   function render$h(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
       vue.createElementVNode("div", {
         class: vue.normalizeClass({ mrotate: _ctx.isPlaying, audio: true }),
         onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePlay && _ctx.togglePlay(...args)))
@@ -13365,7 +13372,7 @@
       }
   });
 
-  const _hoisted_1$9 = ["innerHTML"];
+  const _hoisted_1$a = ["innerHTML"];
   const _hoisted_2$3 = {
     key: 1,
     ref: "videoPlayer",
@@ -13383,7 +13390,7 @@
         ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             innerHTML: _ctx.iframeHtml
-          }, null, 8 /* PROPS */, _hoisted_1$9))
+          }, null, 8 /* PROPS */, _hoisted_1$a))
         : (vue.openBlock(), vue.createElementBlock("video", _hoisted_2$3, [
             vue.createElementVNode("source", {
               src: _ctx.videoSrc,
@@ -15999,7 +16006,7 @@
   });
 
   const _withScopeId$1 = n => (vue.pushScopeId("data-v-ef842ea2"),n=n(),vue.popScopeId(),n);
-  const _hoisted_1$8 = {
+  const _hoisted_1$9 = {
     key: 1,
     class: "can-top2"
   };
@@ -16039,7 +16046,7 @@
           ], 2 /* CLASS */))
         : vue.createCommentVNode("v-if", true),
       (_ctx.themeStyle == '2' || _ctx.themeStyle == '3')
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
             (_ctx.themeStyle == '2' || _ctx.themeStyle == '3')
               ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 0,
@@ -16264,7 +16271,7 @@
       }
   });
 
-  const _hoisted_1$7 = {
+  const _hoisted_1$8 = {
     key: 0,
     class: "slot-number"
   };
@@ -16291,7 +16298,7 @@
       }, {
         default: vue.withCtx((slotProps) => [
           (_ctx.checkItem(slotProps.item.date))
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, vue.toDisplayString(_ctx.getItemNumber(slotProps.item.date)), 1 /* TEXT */))
+            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, vue.toDisplayString(_ctx.getItemNumber(slotProps.item.date)), 1 /* TEXT */))
             : vue.createCommentVNode("v-if", true)
         ]),
         _: 1 /* STABLE */
@@ -22353,7 +22360,7 @@
     }
   };
 
-  const _hoisted_1$6 = { class: "flip-clock" };
+  const _hoisted_1$7 = { class: "flip-clock" };
   const _hoisted_2$1 = ["id"];
   const _hoisted_3$1 = { key: 0 };
   const _hoisted_4$1 = { class: "flip-card__top" };
@@ -22364,7 +22371,7 @@
   const _hoisted_9 = { class: "no-animation__card" };
 
   function render$d(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($setup.timeData, (data) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
           key: data.label,
@@ -22613,7 +22620,7 @@
       }
   });
 
-  const _hoisted_1$5 = ["innerHTML"];
+  const _hoisted_1$6 = ["innerHTML"];
 
   function render$b(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
@@ -22623,7 +22630,7 @@
         innerHTML: _ctx.iframeHtml,
         class: "uni-map-component",
         onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.openMap && _ctx.openMap(...args)))
-      }, null, 8 /* PROPS */, _hoisted_1$5)
+      }, null, 8 /* PROPS */, _hoisted_1$6)
     ], 4 /* STYLE */))
   }
 
@@ -26391,7 +26398,7 @@
       }
   });
 
-  const _hoisted_1$4 = { class: "like-count" };
+  const _hoisted_1$5 = { class: "like-count" };
 
   function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_font_awesome_icon = vue.resolveComponent("font-awesome-icon");
@@ -26405,7 +26412,7 @@
         class: vue.normalizeClass({ 'liked': _ctx.liked }),
         icon: ['far', 'thumbs-up']
       }, null, 8 /* PROPS */, ["class"]),
-      vue.createElementVNode("span", _hoisted_1$4, vue.toDisplayString(_ctx.likeCount), 1 /* TEXT */),
+      vue.createElementVNode("span", _hoisted_1$5, vue.toDisplayString(_ctx.likeCount), 1 /* TEXT */),
       vue.createCommentVNode(" <font-awesome-icon :icon=\"['far', 'heart']\" />\r\n    <font-awesome-icon :icon=\"['far', 'star']\" />")
     ], 4 /* STYLE */))
   }
@@ -58306,7 +58313,7 @@ summary tabindex target title type usemap value width wmode wrap`;
   });
 
   const _withScopeId = n => (vue.pushScopeId("data-v-1ec8767f"),n=n(),vue.popScopeId(),n);
-  const _hoisted_1$3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("h3", { style: {"text-align":"center"} }, "出席人数登记表单", -1 /* HOISTED */));
+  const _hoisted_1$4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("h3", { style: {"text-align":"center"} }, "出席人数登记表单", -1 /* HOISTED */));
 
   function render$6(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_a_input = vue.resolveComponent("a-input");
@@ -58320,7 +58327,7 @@ summary tabindex target title type usemap value width wmode wrap`;
       style: vue.normalizeStyle({ ..._ctx.styleProps, transform: _ctx.transform, opacity: _ctx.opacity }),
       class: "uni-register-form-component"
     }, [
-      _hoisted_1$3,
+      _hoisted_1$4,
       vue.createVNode(_component_a_form, {
         "label-col": _ctx.labelCol,
         "wrapper-col": _ctx.wrapperCol,
@@ -80025,7 +80032,7 @@ summary tabindex target title type usemap value width wmode wrap`;
       }
   });
 
-  const _hoisted_1$2 = ["src"];
+  const _hoisted_1$3 = ["src"];
 
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_swiper_slide = vue.resolveComponent("swiper-slide");
@@ -80054,7 +80061,7 @@ summary tabindex target title type usemap value width wmode wrap`;
                 vue.createElementVNode("img", {
                   src: slide.image,
                   alt: "Slide Image"
-                }, null, 8 /* PROPS */, _hoisted_1$2)
+                }, null, 8 /* PROPS */, _hoisted_1$3)
               ]),
               _: 2 /* DYNAMIC */
             }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class"]))
@@ -80211,10 +80218,10 @@ summary tabindex target title type usemap value width wmode wrap`;
       }
   });
 
-  const _hoisted_1$1 = { class: "barrage-container" };
+  const _hoisted_1$2 = { class: "barrage-container" };
 
   function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.barrages, (barrage) => {
         return (vue.openBlock(), vue.createElementBlock("div", {
           key: barrage.key,
@@ -99042,7 +99049,7 @@ summary tabindex target title type usemap value width wmode wrap`;
       }
   });
 
-  const _hoisted_1 = { class: "uni-tanmu-component" };
+  const _hoisted_1$1 = { class: "uni-tanmu-component" };
   const _hoisted_2 = { class: "modal-footer" };
   const _hoisted_3 = {
     id: "toolbarNew",
@@ -99070,7 +99077,7 @@ summary tabindex target title type usemap value width wmode wrap`;
     const _component_a_modal = vue.resolveComponent("a-modal");
     const _component_Barrage = vue.resolveComponent("Barrage");
 
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
       vue.createVNode(_component_a_modal, {
         open: _ctx.open,
         "onUpdate:open": _cache[2] || (_cache[2] = $event => ((_ctx.open) = $event)),
@@ -99170,18 +99177,34 @@ summary tabindex target title type usemap value width wmode wrap`;
       app.component(script$1.name, script$1);
   };
 
-  var script = {
-    methods: {
-      showAlert() {
+  var script = vue.defineComponent({
+    name: 'uni-test',
+    props: {
+    },
+    components: {
+      // FontAwesomeIcon
+    },
+    setup (props) {
+      // 重用并且简化
+      // 抽离并且获得 styleProps
+      const showAlert = () => {
         alert('Button clicked!');
+      };
+      return {
+        showAlert
       }
     }
-  };
+  });
+
+  const _hoisted_1 = { style: {"position":"absolute","left":"10px","top":"10px"} };
 
   function render(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("button", {
-      onClick: _cache[0] || (_cache[0] = (...args) => ($options.showAlert && $options.showAlert(...args)))
-    }, "Click me"))
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      vue.createElementVNode("button", {
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.showAlert && _ctx.showAlert(...args))),
+        style: {"width":"300px","height":"100px","background-color":"blue"}
+      }, "Click me")
+    ]))
   }
 
   script.render = render;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unika-components",
-  "version": "1.0.91",
+  "version": "1.0.93",
   "private": false,
   "main": "dist/unika-components.umd.js",
   "module": "dist/unika-components.esm.js",