unika-components 1.0.187 → 1.0.189

package/dist/src/components/UniMusic/UniMusic.vue.d.ts

@@ -1,28 +1,13 @@
 declare const _default: import("vue").DefineComponent<{
-    isPlayingInit: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    musicSrc: {
-        type: StringConstructor;
-        default: string;
-    };
+    [x: string]: any;
 }, {
     styleProps: import("vue").ComputedRef<Pick<any, string>>;
     handleClick: () => void;
-    isPlaying: import("vue").Ref<boolean>;
+    isPlaying: import("vue").Ref<any>;
     togglePlay: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    isPlayingInit: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    musicSrc: {
-        type: StringConstructor;
-        default: string;
-    };
+    [x: string]: any;
 }>>, {
-    isPlayingInit: boolean;
-    musicSrc: string;
+    [x: string]: any;
 }, {}>;
 export default _default;

package/dist/src/defaultProps.d.ts

@@ -202,28 +202,11 @@ export declare const backgroundDefaultProps: {
     display: string;
 };
 export declare const musicDefaultProps: {
-    actionType: string;
-    url: string;
-    height: string;
-    width: string;
-    paddingLeft: string;
-    paddingRight: string;
-    paddingTop: string;
-    paddingBottom: string;
-    borderStyle: string;
-    borderColor: string;
-    borderWidth: string;
-    borderRadius: string;
-    boxShadow: string;
-    opacity: number;
-    position: string;
-    left: string;
-    top: string;
-    right: string;
-    transform: string;
     musicSrc: string;
     name: string;
     isPlaying: boolean;
+    icon: string;
+    backgroundColor: string;
 };
 export declare const videoDefaultProps: {
     left: string;
@@ -562,28 +545,11 @@ export declare const componentsDefaultProps: {
     };
     'uni-music': {
         props: {
-            actionType: string;
-            url: string;
-            height: string;
-            width: string;
-            paddingLeft: string;
-            paddingRight: string;
-            paddingTop: string;
-            paddingBottom: string;
-            borderStyle: string;
-            borderColor: string;
-            borderWidth: string;
-            borderRadius: string;
-            boxShadow: string;
-            opacity: number;
-            position: string;
-            left: string;
-            top: string;
-            right: string;
-            transform: string;
             musicSrc: string;
             name: string;
             isPlaying: boolean;
+            icon: string;
+            backgroundColor: string;
         };
     };
     'uni-video': {

package/dist/src/index.d.ts

@@ -5,6 +5,7 @@ import UniShape from './components/UniShape';
 import LongPage from './components/LongPage';
 import SwiperPage from './components/SwiperPage';
 import UniBackground from './components/UniBackground';
+import UniMusic from './components/UniMusic';
 import UniVideo from './components/UniVideo';
 import UniCalendar from './components/UniCalendar';
 import UniCountdown from './components/UniCountdown';
@@ -20,7 +21,7 @@ import UniBulidUp from './components/UniBulidUp';
 import UniTest from './components/UniTest';
 import UniSvg from './components/UniSvg';
 declare const install: (app: App) => void;
-export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, UniVideo, UniCalendar, UniCountdown, UniMap, UniCall, UniLike, UniEffect, UniRegisterForm, UniLotties, UniSwiper, UniButton, UniBulidUp, UniSvg, UniTest, install };
+export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, UniMusic, UniVideo, UniCalendar, UniCountdown, UniMap, UniCall, UniLike, UniEffect, UniRegisterForm, UniLotties, UniSwiper, UniButton, UniBulidUp, UniSvg, UniTest, install };
 declare const _default: {
     install: (app: App<any>) => void;
 };

package/dist/unika-components.css

@@ -1,7 +1,53 @@
 
+h2.uni-text-component, p.uni-text-component {
+  margin-bottom: 0;
+}
+button.uni-text-component {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.uni-text-component {
+  box-sizing: border-box;
+  white-space: pre-wrap;
+}
+
+
+.uni-calendar-component {
+
+}
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
+
 .uni-image-component {
   max-width: 100%;
 }
+
+.like-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.icon-heart {
+  font-size: 24px;
+  color: #e74c3c;
+}
+
+.liked {
+  color: #f00; /* 更改颜色以示已赞 */
+}
+
+.like-count {
+  margin-top: 4px;
+  font-size: 16px;
+  color: #333;
+}
 
  .slide-guide {
     position: absolute;
@@ -96,29 +142,19 @@ body, html {
   .play-pause-button:hover {
     background: rgba(0, 0, 0, 0.8);
   }
-
-h2.uni-text-component, p.uni-text-component {
-  margin-bottom: 0;
-}
-button.uni-text-component {
-  padding: 5px 10px;
-  cursor: pointer;
-}
-.uni-text-component {
-  box-sizing: border-box;
-  white-space: pre-wrap;
-}
 
+.swiper-warp {
+  width: 100%;
+  height: 100%;
+}
 
-.uni-calendar-component {
-
+.swiper-slide-component {
+  text-align: center;
 }
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
+
+.swiper-slide img {
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .effect {
@@ -126,6 +162,135 @@ button.uni-text-component {
   height: 100%;
 }
 
+  .uni-build-up-component {
+  }
+
+#talkbubble {
+    width: 70.1562px;
+     height: 22.1562px;
+     padding: 2px 2px 2px 7px;
+     font-size: 15px;
+     right: 20%;
+     top: 3%;
+     background: #a3a3a3;
+     opacity: 1;
+     position: absolute;
+     display: none;
+     z-index: 1000000;
+     transform-origin: center center;
+     touch-action: pan-y;
+     user-select: none;
+     -webkit-user-drag: none;
+     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+     -moz-border-radius: 10px;
+     -webkit-border-radius: 10px;
+     border-radius: 5px;
+ }
+
+ #talkbubble:before {
+     content: "";
+     position: absolute;
+     left: 100%;
+     top: 5px;
+     width: 0;
+     height: 0;
+     border-top: 6px solid transparent;
+     border-left: 12px solid #a3a3a3;
+     border-bottom: 6px solid transparent;
+ }
+
+ .barrage-more {
+     display: none !important;
+ }
+
+ #audio {
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+    z-index: 103;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+  #audio .audio {
+    width: 100%;
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    color: #fff;
+    background: #666;
+    border-radius: 50%;
+    overflow: hidden;
+    will-change: transform;
+  }
+  #audio .audio .music-icon {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  #audio .icon-cancel {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    overflow: hidden;
+    padding: 14px 0;
+  }
+  #audio .icon-cancel .icon-h {
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    width: 100%;
+    height: 2px;
+    margin-top: 20px;
+    background: #fff;
+  }
+  #audio .mrotate {
+    -webkit-animation: mrotate 5s linear infinite;
+    animation: mrotate 5s linear infinite;
+  }
+
+  .uni-music-component {
+    position: absolute;
+    top: 10px;
+    right: 5px;
+  }
+
+  /* 无限旋转 */
+  @keyframes mrotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes mrotate {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+
+.uni-music-component {
+  position: absolute;
+  top: 10px;
+  right: 5px;
+}
+
 .ant-input-number {
   box-sizing: border-box;
   margin: 0;
@@ -160,49 +325,10 @@ button.uni-text-component {
   margin-bottom: 0px;
   vertical-align: top;
 }
-
-.like-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-
-.icon-heart {
-  font-size: 24px;
-  color: #e74c3c;
-}
-
-.liked {
-  color: #f00; /* 更改颜色以示已赞 */
-}
-
-.like-count {
-  margin-top: 4px;
-  font-size: 16px;
-  color: #333;
-}
-
-.swiper-warp {
-  width: 100%;
-  height: 100%;
-}
-
-.swiper-slide-component {
-  text-align: center;
-}
-
-.swiper-slide img {
-  max-width: 100%;
-  max-height: 100%;
-}
 
 .uni-svg-component {
   display: inline-block;
 }
-
-  .uni-build-up-component {
-  }
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions

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$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, createElementVNode, mergeProps, createCommentVNode, renderSlot, pushScopeId, popScopeId, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, toRef, Teleport, isRef, toRaw, render as render$n, TransitionGroup } from 'vue';
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, createElementVNode, mergeProps, createCommentVNode, renderSlot, pushScopeId, popScopeId, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, toRef, Teleport, isRef, toRaw, render as render$o, TransitionGroup } from 'vue';
 import crypto from 'crypto';
 
 /** Detect free variable `global` from Node.js. */
@@ -5050,7 +5050,8 @@ const musicDefaultProps = {
     musicSrc: '',
     name: '',
     isPlaying: false,
-    ...commonDefaultProps
+    icon: 'https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/components/music2.png',
+    backgroundColor: '#666'
 };
 const videoDefaultProps = {
     left: '12px',
@@ -5362,12 +5363,12 @@ const extraProps$1 = {
     },
     ...isEditingProp
 };
-const defaultProps$f = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps$1);
+const defaultProps$g = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps$1);
 // array that contains style props
-var script$l = defineComponent({
+var script$m = defineComponent({
     name: 'uni-text',
     props: {
-        ...defaultProps$f
+        ...defaultProps$g
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -5379,7 +5380,7 @@ var script$l = defineComponent({
     }
 });
 
-function render$m(_ctx, _cache, $props, $setup, $data, $options) {
+function render$n(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
     onClick: withModifiers(_ctx.handleClick, ["prevent"]),
     style: normalizeStyle$1(_ctx.styleProps),
@@ -5392,16 +5393,16 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8 /* PROPS */, ["onClick", "style"]))
 }
 
-script$l.render = render$m;
-script$l.__scopeId = "data-v-55ed80cb";
-script$l.__file = "src/components/UniText/UniText.vue";
+script$m.render = render$n;
+script$m.__scopeId = "data-v-55ed80cb";
+script$m.__file = "src/components/UniText/UniText.vue";
 
-script$l.install = (app) => {
-    app.component(script$l.name, script$l);
+script$m.install = (app) => {
+    app.component(script$m.name, script$m);
 };
 
 // array that contains style props
-var script$k = defineComponent({
+var script$l = defineComponent({
     name: 'uni-image',
     props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
     setup(props) {
@@ -5414,32 +5415,32 @@ var script$k = defineComponent({
     }
 });
 
-const _hoisted_1$c = ["src"];
+const _hoisted_1$d = ["src"];
 
-function render$l(_ctx, _cache, $props, $setup, $data, $options) {
+function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("img", {
     src: _ctx.imageSrc,
     style: normalizeStyle$1(_ctx.styleProps),
     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$c))
+  }, null, 12 /* STYLE, PROPS */, _hoisted_1$d))
 }
 
-script$k.render = render$l;
-script$k.__scopeId = "data-v-03caca2f";
-script$k.__file = "src/components/UniImage/UniImage.vue";
+script$l.render = render$m;
+script$l.__scopeId = "data-v-03caca2f";
+script$l.__file = "src/components/UniImage/UniImage.vue";
 
-script$k.install = (app) => {
-    app.component(script$k.name, script$k);
+script$l.install = (app) => {
+    app.component(script$l.name, script$l);
 };
 
-const defaultProps$e = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+const defaultProps$f = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
 // array that contains style props
-var script$j = defineComponent({
+var script$k = defineComponent({
     name: 'uni-shape',
     props: {
-        ...defaultProps$e
+        ...defaultProps$f
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -5451,7 +5452,7 @@ var script$j = defineComponent({
     }
 });
 
-function render$k(_ctx, _cache, $props, $setup, $data, $options) {
+function render$l(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
@@ -5460,14 +5461,14 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 4 /* STYLE */))
 }
 
-script$j.render = render$k;
-script$j.__file = "src/components/UniShape/UniShape.vue";
+script$k.render = render$l;
+script$k.__file = "src/components/UniShape/UniShape.vue";
 
-script$j.install = (app) => {
-    app.component(script$j.name, script$j);
+script$k.install = (app) => {
+    app.component(script$k.name, script$k);
 };
 
-var script$i = defineComponent({
+var script$j = defineComponent({
     name: 'long-page',
     props: {
         work: {
@@ -5480,9 +5481,9 @@ var script$i = defineComponent({
     }
 });
 
-const _hoisted_1$b = ["id"];
+const _hoisted_1$c = ["id"];
 
-function render$j(_ctx, _cache, $props, $setup, $data, $options) {
+function render$k(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: "final-page",
     style: normalizeStyle$1(_ctx.work && {width: _ctx.work.width, height: _ctx.work.height} )
@@ -5493,17 +5494,17 @@ function render$j(_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$b))
+      ], 8 /* PROPS */, _hoisted_1$c))
     }), 128 /* KEYED_FRAGMENT */))
   ], 4 /* STYLE */))
 }
 
-script$i.render = render$j;
-script$i.__file = "src/components/LongPage/LongPage.vue";
+script$j.render = render$k;
+script$j.__file = "src/components/LongPage/LongPage.vue";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-script$i.install = (app) => {
-    app.component(script$i.name, script$i);
+script$j.install = (app) => {
+    app.component(script$j.name, script$j);
 };
 
 /**
@@ -13014,7 +13015,7 @@ function getComputedCSSText(style) {
     }
     return cssText;
 }
-var script$h = defineComponent({
+var script$i = defineComponent({
     name: 'swiper-page',
     props: {
         work: {
@@ -13121,25 +13122,25 @@ var script$h = defineComponent({
     }
 });
 
-const _hoisted_1$a = { style: {"width":"100%","height":"100%"} };
-const _hoisted_2$3 = ["id"];
-const _hoisted_3$3 = {
+const _hoisted_1$b = { style: {"width":"100%","height":"100%"} };
+const _hoisted_2$4 = ["id"];
+const _hoisted_3$4 = {
   key: 0,
   class: "up-arrow"
 };
-const _hoisted_4$2 = /*#__PURE__*/createElementVNode("img", {
+const _hoisted_4$3 = /*#__PURE__*/createElementVNode("img", {
   src: "https://img1.maka.im/assets/usual/slideguide-3-view.png",
   alt: ""
 }, null, -1 /* HOISTED */);
-const _hoisted_5$2 = [
-  _hoisted_4$2
+const _hoisted_5$3 = [
+  _hoisted_4$3
 ];
 
-function render$i(_ctx, _cache, $props, $setup, $data, $options) {
+function render$j(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_swiper_slide = resolveComponent("swiper-slide");
   const _component_swiper = resolveComponent("swiper");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$b, [
     createVNode(_component_swiper, {
       class: "swiper-container",
       modules: _ctx.modules,
@@ -13170,7 +13171,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
                     (item.name != 'uni-build-up')
                       ? (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
                       : createCommentVNode("v-if", true)
-                  ], 8 /* PROPS */, _hoisted_2$3))
+                  ], 8 /* PROPS */, _hoisted_2$4))
                 }), 128 /* KEYED_FRAGMENT */))
               ], 4 /* STYLE */)
             ]),
@@ -13181,26 +13182,26 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modules", "effect", "direction", "onSwiper", "onSlideChange"]),
     (_ctx.upArrow)
-      ? (openBlock(), createElementBlock("button", _hoisted_3$3, [..._hoisted_5$2]))
+      ? (openBlock(), createElementBlock("button", _hoisted_3$4, [..._hoisted_5$3]))
       : createCommentVNode("v-if", true)
   ]))
 }
 
-script$h.render = render$i;
-script$h.__file = "src/components/SwiperPage/SwiperPage.vue";
+script$i.render = render$j;
+script$i.__file = "src/components/SwiperPage/SwiperPage.vue";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-script$h.install = (app) => {
-    app.component(script$h.name, script$h);
+script$i.install = (app) => {
+    app.component(script$i.name, script$i);
 };
 
-const defaultProps$d = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+const defaultProps$e = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
 const defaultStyles$b = Object.keys(backgroundDefaultProps);
 // array that contains style props
-var script$g = defineComponent({
+var script$h = defineComponent({
     name: 'uni-background',
     props: {
-        ...defaultProps$d
+        ...defaultProps$e
     },
     setup(props) {
         const styleProps = useStylePick(props, defaultStyles$b);
@@ -13212,7 +13213,7 @@ var script$g = defineComponent({
     }
 });
 
-function render$h(_ctx, _cache, $props, $setup, $data, $options) {
+function render$i(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
@@ -13221,8 +13222,128 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 4 /* STYLE */))
 }
 
+script$h.render = render$i;
+script$h.__file = "src/components/UniBackground/UniBackground.vue";
+
+script$h.install = (app) => {
+    app.component(script$h.name, script$h);
+};
+
+const defaultProps$d = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
+// array that contains style props
+var script$g = defineComponent({
+    name: 'uni-music',
+    props: {
+        ...defaultProps$d,
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const styleProps = useStylePick(props);
+        const handleClick = useComponentClick(props);
+        const isPlaying = ref(props.isPlaying);
+        const audioPlayer = ref(null);
+        const togglePlay = () => {
+            if (!audioPlayer.value)
+                return;
+            isPlaying.value = !isPlaying.value;
+            if (isPlaying.value) {
+                audioPlayer.value && audioPlayer.value.play();
+            }
+            else {
+                audioPlayer.value && audioPlayer.value.pause();
+            }
+        };
+        onMounted(() => {
+            audioPlayer.value = document.querySelector('audio');
+            if (audioPlayer.value && props.isPlaying) {
+                audioPlayer.value.load();
+                audioPlayer.value.play().catch(() => {
+                    const playError = ref(true);
+                    const event = ['click']; // "touchstart"
+                    const pageClick = () => {
+                        if (audioPlayer.value && playError.value) {
+                            playError.value = false;
+                            audioPlayer.value.load();
+                            audioPlayer.value.play().catch(() => {
+                                playError.value = true;
+                            });
+                            event.forEach((item) => {
+                                document.removeEventListener(item, pageClick);
+                            });
+                        }
+                    };
+                    event.forEach((item) => {
+                        document.addEventListener(item, pageClick);
+                    });
+                });
+            }
+            else {
+                isPlaying.value = false;
+            }
+        });
+        return {
+            styleProps,
+            handleClick,
+            isPlaying,
+            togglePlay
+        };
+    }
+});
+
+const _hoisted_1$a = ["src"];
+const _hoisted_2$3 = { class: "icon-cancel" };
+const _hoisted_3$3 = {
+  key: 0,
+  id: "icon-h",
+  class: "icon-h"
+};
+const _hoisted_4$2 = {
+  key: 0,
+  id: "talkbubble",
+  style: {"width":"70.1562px","height":"22.1562px","padding":"2px 2px 2px 7px","right":"52.5781px","top":"11.5781px","opacity":"1","position":"absolute","display":"block","z-index":"1000000","transform-origin":"center center","touch-action":"pan-y","user-select":"none","-webkit-user-drag":"none","-webkit-tap-highlight-color":"rgba(84, 31, 31, 0)"}
+};
+const _hoisted_5$2 = ["src"];
+
+function render$h(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    onClick: _cache[1] || (_cache[1] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
+    id: "audio",
+    class: "uni-music-component"
+  }, [
+    createElementVNode("div", {
+      id: "music",
+      class: normalizeClass({ mrotate: _ctx.isPlaying, audio: true, backgroundColor: _ctx.backgroundColor }),
+      onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePlay && _ctx.togglePlay(...args)))
+    }, [
+      createElementVNode("img", {
+        src: _ctx.icon,
+        class: "music-icon"
+      }, null, 8 /* PROPS */, _hoisted_1$a),
+      createElementVNode("div", _hoisted_2$3, [
+        (!_ctx.isPlaying)
+          ? (openBlock(), createElementBlock("div", _hoisted_3$3))
+          : createCommentVNode("v-if", true)
+      ])
+    ], 2 /* CLASS */),
+    (!_ctx.isPlaying)
+      ? (openBlock(), createElementBlock("div", _hoisted_4$2, " เล่นเพลง "))
+      : createCommentVNode("v-if", true),
+    createElementVNode("audio", {
+      style: {"display":"none"},
+      ref: "audioPlayer",
+      src: _ctx.musicSrc,
+      autoplay: "",
+      controls: "",
+      loop: "",
+      preload: "auto"
+    }, null, 8 /* PROPS */, _hoisted_5$2)
+  ]))
+}
+
 script$g.render = render$h;
-script$g.__file = "src/components/UniBackground/UniBackground.vue";
+script$g.__scopeId = "data-v-99922522";
+script$g.__file = "src/components/UniMusic/UniMusic.vue";
 
 script$g.install = (app) => {
     app.component(script$g.name, script$g);
@@ -44489,7 +44610,7 @@ const WaveEffect = defineComponent({
       var _a;
       const holder = (_a = divRef.value) === null || _a === void 0 ? void 0 : _a.parentElement;
       if (holder) {
-        render$n(null, holder);
+        render$o(null, holder);
         if (holder.parentElement) {
           holder.parentElement.removeChild(holder);
         }
@@ -44562,7 +44683,7 @@ function showWaveEffect(node, className) {
   holder.style.left = `0px`;
   holder.style.top = `0px`;
   node === null || node === void 0 ? void 0 : node.insertBefore(holder, node === null || node === void 0 ? void 0 : node.firstChild);
-  render$n(createVNode(WaveEffect, {
+  render$o(createVNode(WaveEffect, {
     "target": node,
     "className": className
   }, null), holder);
@@ -75665,7 +75786,7 @@ var script = defineComponent({
                 }
             });
         };
-        watch([() => props.svgSrc, () => props.color], loadSvg, { immediate: true });
+        watch([() => props.svgSrc, () => props.color, () => props.width, () => props.height], loadSvg, { immediate: true });
         return {
             styleProps,
             handleClick,
@@ -75681,8 +75802,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
     class: "uni-svg-component",
-    innerHTML: _ctx.svgContent,
-    draggable: false
+    innerHTML: _ctx.svgContent
   }, null, 12 /* STYLE, PROPS */, _hoisted_1))
 }
 
@@ -75696,13 +75816,13 @@ script.install = (app) => {
 
 // export { textDefaultProps , textStylePropNames, TextComponentProps,
 const components = [
+    script$m,
     script$l,
     script$k,
     script$j,
     script$i,
     script$h,
     script$g,
-    // UniMusic,
     script$f,
     script$d,
     script$b,
@@ -75729,4 +75849,4 @@ var index = {
     install
 };
 
-export { script$i as LongPage, script$h as SwiperPage, script$g as UniBackground, script$2 as UniBulidUp, script$3 as UniButton, script$d as UniCalendar, script$9 as UniCall, script$b as UniCountdown, script$7 as UniEffect, script$k as UniImage, script$8 as UniLike, script$5 as UniLotties, script$a as UniMap, script$6 as UniRegisterForm, script$j as UniShape, script as UniSvg, script$4 as UniSwiper, script$1 as UniTest, script$l as UniText, script$f as UniVideo, index as default, install };
+export { script$j as LongPage, script$i as SwiperPage, script$h as UniBackground, script$2 as UniBulidUp, script$3 as UniButton, script$d as UniCalendar, script$9 as UniCall, script$b as UniCountdown, script$7 as UniEffect, script$l as UniImage, script$8 as UniLike, script$5 as UniLotties, script$a as UniMap, script$g as UniMusic, script$6 as UniRegisterForm, script$k as UniShape, script as UniSvg, script$4 as UniSwiper, script$1 as UniTest, script$m as UniText, script$f as UniVideo, index as default, install };

package/dist/unika-components.umd.js

@@ -5057,7 +5057,8 @@
       musicSrc: '',
       name: '',
       isPlaying: false,
-      ...commonDefaultProps
+      icon: 'https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/components/music2.png',
+      backgroundColor: '#666'
   };
   const videoDefaultProps = {
       left: '12px',
@@ -5369,12 +5370,12 @@
       },
       ...isEditingProp
   };
-  const defaultProps$f = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps$1);
+  const defaultProps$g = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps$1);
   // array that contains style props
-  var script$l = vue.defineComponent({
+  var script$m = vue.defineComponent({
       name: 'uni-text',
       props: {
-          ...defaultProps$f
+          ...defaultProps$g
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -5386,7 +5387,7 @@
       }
   });
 
-  function render$m(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$n(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
       onClick: vue.withModifiers(_ctx.handleClick, ["prevent"]),
       style: vue.normalizeStyle(_ctx.styleProps),
@@ -5399,16 +5400,16 @@
     }, 8 /* PROPS */, ["onClick", "style"]))
   }
 
-  script$l.render = render$m;
-  script$l.__scopeId = "data-v-55ed80cb";
-  script$l.__file = "src/components/UniText/UniText.vue";
+  script$m.render = render$n;
+  script$m.__scopeId = "data-v-55ed80cb";
+  script$m.__file = "src/components/UniText/UniText.vue";
 
-  script$l.install = (app) => {
-      app.component(script$l.name, script$l);
+  script$m.install = (app) => {
+      app.component(script$m.name, script$m);
   };
 
   // array that contains style props
-  var script$k = vue.defineComponent({
+  var script$l = vue.defineComponent({
       name: 'uni-image',
       props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
       setup(props) {
@@ -5421,32 +5422,32 @@
       }
   });
 
-  const _hoisted_1$c = ["src"];
+  const _hoisted_1$d = ["src"];
 
-  function render$l(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$m(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("img", {
       src: _ctx.imageSrc,
       style: vue.normalizeStyle(_ctx.styleProps),
       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$c))
+    }, null, 12 /* STYLE, PROPS */, _hoisted_1$d))
   }
 
-  script$k.render = render$l;
-  script$k.__scopeId = "data-v-03caca2f";
-  script$k.__file = "src/components/UniImage/UniImage.vue";
+  script$l.render = render$m;
+  script$l.__scopeId = "data-v-03caca2f";
+  script$l.__file = "src/components/UniImage/UniImage.vue";
 
-  script$k.install = (app) => {
-      app.component(script$k.name, script$k);
+  script$l.install = (app) => {
+      app.component(script$l.name, script$l);
   };
 
-  const defaultProps$e = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+  const defaultProps$f = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
   // array that contains style props
-  var script$j = vue.defineComponent({
+  var script$k = vue.defineComponent({
       name: 'uni-shape',
       props: {
-          ...defaultProps$e
+          ...defaultProps$f
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -5458,7 +5459,7 @@
       }
   });
 
-  function render$k(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$l(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
@@ -5467,14 +5468,14 @@
     }, null, 4 /* STYLE */))
   }
 
-  script$j.render = render$k;
-  script$j.__file = "src/components/UniShape/UniShape.vue";
+  script$k.render = render$l;
+  script$k.__file = "src/components/UniShape/UniShape.vue";
 
-  script$j.install = (app) => {
-      app.component(script$j.name, script$j);
+  script$k.install = (app) => {
+      app.component(script$k.name, script$k);
   };
 
-  var script$i = vue.defineComponent({
+  var script$j = vue.defineComponent({
       name: 'long-page',
       props: {
           work: {
@@ -5487,9 +5488,9 @@
       }
   });
 
-  const _hoisted_1$b = ["id"];
+  const _hoisted_1$c = ["id"];
 
-  function render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$k(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
       class: "final-page",
       style: vue.normalizeStyle(_ctx.work && {width: _ctx.work.width, height: _ctx.work.height} )
@@ -5500,17 +5501,17 @@
           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$b))
+        ], 8 /* PROPS */, _hoisted_1$c))
       }), 128 /* KEYED_FRAGMENT */))
     ], 4 /* STYLE */))
   }
 
-  script$i.render = render$j;
-  script$i.__file = "src/components/LongPage/LongPage.vue";
+  script$j.render = render$k;
+  script$j.__file = "src/components/LongPage/LongPage.vue";
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  script$i.install = (app) => {
-      app.component(script$i.name, script$i);
+  script$j.install = (app) => {
+      app.component(script$j.name, script$j);
   };
 
   /**
@@ -13021,7 +13022,7 @@
       }
       return cssText;
   }
-  var script$h = vue.defineComponent({
+  var script$i = vue.defineComponent({
       name: 'swiper-page',
       props: {
           work: {
@@ -13128,25 +13129,25 @@
       }
   });
 
-  const _hoisted_1$a = { style: {"width":"100%","height":"100%"} };
-  const _hoisted_2$3 = ["id"];
-  const _hoisted_3$3 = {
+  const _hoisted_1$b = { style: {"width":"100%","height":"100%"} };
+  const _hoisted_2$4 = ["id"];
+  const _hoisted_3$4 = {
     key: 0,
     class: "up-arrow"
   };
-  const _hoisted_4$2 = /*#__PURE__*/vue.createElementVNode("img", {
+  const _hoisted_4$3 = /*#__PURE__*/vue.createElementVNode("img", {
     src: "https://img1.maka.im/assets/usual/slideguide-3-view.png",
     alt: ""
   }, null, -1 /* HOISTED */);
-  const _hoisted_5$2 = [
-    _hoisted_4$2
+  const _hoisted_5$3 = [
+    _hoisted_4$3
   ];
 
-  function render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$j(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_swiper_slide = vue.resolveComponent("swiper-slide");
     const _component_swiper = vue.resolveComponent("swiper");
 
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
       vue.createVNode(_component_swiper, {
         class: "swiper-container",
         modules: _ctx.modules,
@@ -13177,7 +13178,7 @@
                       (item.name != 'uni-build-up')
                         ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
                         : vue.createCommentVNode("v-if", true)
-                    ], 8 /* PROPS */, _hoisted_2$3))
+                    ], 8 /* PROPS */, _hoisted_2$4))
                   }), 128 /* KEYED_FRAGMENT */))
                 ], 4 /* STYLE */)
               ]),
@@ -13188,26 +13189,26 @@
         _: 1 /* STABLE */
       }, 8 /* PROPS */, ["modules", "effect", "direction", "onSwiper", "onSlideChange"]),
       (_ctx.upArrow)
-        ? (vue.openBlock(), vue.createElementBlock("button", _hoisted_3$3, [..._hoisted_5$2]))
+        ? (vue.openBlock(), vue.createElementBlock("button", _hoisted_3$4, [..._hoisted_5$3]))
         : vue.createCommentVNode("v-if", true)
     ]))
   }
 
-  script$h.render = render$i;
-  script$h.__file = "src/components/SwiperPage/SwiperPage.vue";
+  script$i.render = render$j;
+  script$i.__file = "src/components/SwiperPage/SwiperPage.vue";
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  script$h.install = (app) => {
-      app.component(script$h.name, script$h);
+  script$i.install = (app) => {
+      app.component(script$i.name, script$i);
   };
 
-  const defaultProps$d = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+  const defaultProps$e = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
   const defaultStyles$b = Object.keys(backgroundDefaultProps);
   // array that contains style props
-  var script$g = vue.defineComponent({
+  var script$h = vue.defineComponent({
       name: 'uni-background',
       props: {
-          ...defaultProps$d
+          ...defaultProps$e
       },
       setup(props) {
           const styleProps = useStylePick(props, defaultStyles$b);
@@ -13219,7 +13220,7 @@
       }
   });
 
-  function render$h(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$i(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
@@ -13228,8 +13229,128 @@
     }, null, 4 /* STYLE */))
   }
 
+  script$h.render = render$i;
+  script$h.__file = "src/components/UniBackground/UniBackground.vue";
+
+  script$h.install = (app) => {
+      app.component(script$h.name, script$h);
+  };
+
+  const defaultProps$d = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
+  // array that contains style props
+  var script$g = vue.defineComponent({
+      name: 'uni-music',
+      props: {
+          ...defaultProps$d,
+      },
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const styleProps = useStylePick(props);
+          const handleClick = useComponentClick(props);
+          const isPlaying = vue.ref(props.isPlaying);
+          const audioPlayer = vue.ref(null);
+          const togglePlay = () => {
+              if (!audioPlayer.value)
+                  return;
+              isPlaying.value = !isPlaying.value;
+              if (isPlaying.value) {
+                  audioPlayer.value && audioPlayer.value.play();
+              }
+              else {
+                  audioPlayer.value && audioPlayer.value.pause();
+              }
+          };
+          vue.onMounted(() => {
+              audioPlayer.value = document.querySelector('audio');
+              if (audioPlayer.value && props.isPlaying) {
+                  audioPlayer.value.load();
+                  audioPlayer.value.play().catch(() => {
+                      const playError = vue.ref(true);
+                      const event = ['click']; // "touchstart"
+                      const pageClick = () => {
+                          if (audioPlayer.value && playError.value) {
+                              playError.value = false;
+                              audioPlayer.value.load();
+                              audioPlayer.value.play().catch(() => {
+                                  playError.value = true;
+                              });
+                              event.forEach((item) => {
+                                  document.removeEventListener(item, pageClick);
+                              });
+                          }
+                      };
+                      event.forEach((item) => {
+                          document.addEventListener(item, pageClick);
+                      });
+                  });
+              }
+              else {
+                  isPlaying.value = false;
+              }
+          });
+          return {
+              styleProps,
+              handleClick,
+              isPlaying,
+              togglePlay
+          };
+      }
+  });
+
+  const _hoisted_1$a = ["src"];
+  const _hoisted_2$3 = { class: "icon-cancel" };
+  const _hoisted_3$3 = {
+    key: 0,
+    id: "icon-h",
+    class: "icon-h"
+  };
+  const _hoisted_4$2 = {
+    key: 0,
+    id: "talkbubble",
+    style: {"width":"70.1562px","height":"22.1562px","padding":"2px 2px 2px 7px","right":"52.5781px","top":"11.5781px","opacity":"1","position":"absolute","display":"block","z-index":"1000000","transform-origin":"center center","touch-action":"pan-y","user-select":"none","-webkit-user-drag":"none","-webkit-tap-highlight-color":"rgba(84, 31, 31, 0)"}
+  };
+  const _hoisted_5$2 = ["src"];
+
+  function render$h(_ctx, _cache, $props, $setup, $data, $options) {
+    return (vue.openBlock(), vue.createElementBlock("div", {
+      onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
+      id: "audio",
+      class: "uni-music-component"
+    }, [
+      vue.createElementVNode("div", {
+        id: "music",
+        class: vue.normalizeClass({ mrotate: _ctx.isPlaying, audio: true, backgroundColor: _ctx.backgroundColor }),
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePlay && _ctx.togglePlay(...args)))
+      }, [
+        vue.createElementVNode("img", {
+          src: _ctx.icon,
+          class: "music-icon"
+        }, null, 8 /* PROPS */, _hoisted_1$a),
+        vue.createElementVNode("div", _hoisted_2$3, [
+          (!_ctx.isPlaying)
+            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3))
+            : vue.createCommentVNode("v-if", true)
+        ])
+      ], 2 /* CLASS */),
+      (!_ctx.isPlaying)
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, " เล่นเพลง "))
+        : vue.createCommentVNode("v-if", true),
+      vue.createElementVNode("audio", {
+        style: {"display":"none"},
+        ref: "audioPlayer",
+        src: _ctx.musicSrc,
+        autoplay: "",
+        controls: "",
+        loop: "",
+        preload: "auto"
+      }, null, 8 /* PROPS */, _hoisted_5$2)
+    ]))
+  }
+
   script$g.render = render$h;
-  script$g.__file = "src/components/UniBackground/UniBackground.vue";
+  script$g.__scopeId = "data-v-99922522";
+  script$g.__file = "src/components/UniMusic/UniMusic.vue";
 
   script$g.install = (app) => {
       app.component(script$g.name, script$g);
@@ -75672,7 +75793,7 @@ summary tabindex target title type usemap value width wmode wrap`;
                   }
               });
           };
-          vue.watch([() => props.svgSrc, () => props.color], loadSvg, { immediate: true });
+          vue.watch([() => props.svgSrc, () => props.color, () => props.width, () => props.height], loadSvg, { immediate: true });
           return {
               styleProps,
               handleClick,
@@ -75688,8 +75809,7 @@ summary tabindex target title type usemap value width wmode wrap`;
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
       class: "uni-svg-component",
-      innerHTML: _ctx.svgContent,
-      draggable: false
+      innerHTML: _ctx.svgContent
     }, null, 12 /* STYLE, PROPS */, _hoisted_1))
   }
 
@@ -75703,13 +75823,13 @@ summary tabindex target title type usemap value width wmode wrap`;
 
   // export { textDefaultProps , textStylePropNames, TextComponentProps,
   const components = [
+      script$m,
       script$l,
       script$k,
       script$j,
       script$i,
       script$h,
       script$g,
-      // UniMusic,
       script$f,
       script$d,
       script$b,
@@ -75736,25 +75856,26 @@ summary tabindex target title type usemap value width wmode wrap`;
       install
   };
 
-  exports.LongPage = script$i;
-  exports.SwiperPage = script$h;
-  exports.UniBackground = script$g;
+  exports.LongPage = script$j;
+  exports.SwiperPage = script$i;
+  exports.UniBackground = script$h;
   exports.UniBulidUp = script$2;
   exports.UniButton = script$3;
   exports.UniCalendar = script$d;
   exports.UniCall = script$9;
   exports.UniCountdown = script$b;
   exports.UniEffect = script$7;
-  exports.UniImage = script$k;
+  exports.UniImage = script$l;
   exports.UniLike = script$8;
   exports.UniLotties = script$5;
   exports.UniMap = script$a;
+  exports.UniMusic = script$g;
   exports.UniRegisterForm = script$6;
-  exports.UniShape = script$j;
+  exports.UniShape = script$k;
   exports.UniSvg = script;
   exports.UniSwiper = script$4;
   exports.UniTest = script$1;
-  exports.UniText = script$l;
+  exports.UniText = script$m;
   exports.UniVideo = script$f;
   exports["default"] = index;
   exports.install = install;

package/package.json

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