@maas/vue-equipment 0.32.3 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nuxt/module.json +1 -1
- package/dist/plugins/MagicAccordion/src/components/MagicAccordionContent.vue +7 -1
- package/dist/plugins/MagicAccordion/src/components/MagicAccordionTrigger.vue +1 -1
- package/dist/plugins/MagicAutoSize/src/components/MagicAutoSize.vue +1 -1
- package/dist/plugins/MagicCommand/src/components/MagicCommandBody.vue +1 -1
- package/dist/plugins/MagicCookie/src/components/MagicCookie.vue +1 -1
- package/dist/plugins/MagicDraggable/src/components/MagicDraggable.vue +1 -1
- package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue +1 -1
- package/dist/plugins/MagicMarquee/src/components/MagicMarquee.vue +1 -1
- package/dist/plugins/MagicMenu/src/components/MagicMenuFloat.vue +1 -1
- package/dist/plugins/MagicModal/src/components/MagicModal.vue +1 -2
- package/dist/plugins/MagicNoise/src/components/MagicNoise.vue +1 -1
- package/dist/plugins/MagicPlayer/src/components/MagicAudioPlayer.vue +5 -1
- package/dist/plugins/MagicPlayer/src/components/MagicAudioPlayerControls.vue +1 -1
- package/dist/plugins/MagicPlayer/src/components/MagicPlayer.vue +1 -1
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerControls.vue +2 -0
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerControls.vue.d.ts +2 -0
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerDisplayTime.vue +3 -1
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerMuxPopover.vue +1 -1
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerOverlay.vue +1 -1
- package/dist/plugins/MagicPlayer/src/components/MagicPlayerTimeline.vue +3 -1
- package/dist/plugins/MagicToast/src/components/MagicToast.vue +1 -1
- package/dist/plugins/MagicToast/src/components/MagicToastComponent.vue +1 -1
- package/package.json +1 -1
package/dist/nuxt/module.json
CHANGED
|
@@ -67,5 +67,11 @@ const {
|
|
|
67
67
|
</script>
|
|
68
68
|
|
|
69
69
|
<style>
|
|
70
|
-
|
|
70
|
+
.magic-accordion-content{--magic-auto-size-transition:var(
|
|
71
|
+
--magic-accordion-size-transition,all 200ms var(--ease-in-out-sharp) ;
|
|
72
|
+
);clip-path:var(--magic-accordion-content-clip-path,inset(0))}.magic-accordion-enter-active{position:relative;transition:var(
|
|
73
|
+
--magic-accordion-enter-transition,fade-in .15s var(--ease-in-out)
|
|
74
|
+
)}.magic-accordion-leave-active{height:0;transition:var(
|
|
75
|
+
--magic-accordion-leave-transition,all .2s var(--ease-in-out-sharp)
|
|
76
|
+
)}
|
|
71
77
|
</style>
|
|
@@ -71,5 +71,5 @@ onKeyStroke('Enter', onEnter)
|
|
|
71
71
|
</script>
|
|
72
72
|
|
|
73
73
|
<style>
|
|
74
|
-
|
|
74
|
+
.magic-accordion-trigger.-disabled{cursor:var(--magic-accordion-trigger-cursor-disabled,not-allowed)}
|
|
75
75
|
</style>
|
|
@@ -148,5 +148,5 @@ onMounted(() => {
|
|
|
148
148
|
</script>
|
|
149
149
|
|
|
150
150
|
<style>
|
|
151
|
-
|
|
151
|
+
.magic-auto-size{height:var(--magic-auto-size-height);transition:var(--magic-auto-size-transition,all .15s var(--ease-in-out));width:var(--magic-auto-size-width)}
|
|
152
152
|
</style>
|
|
@@ -87,5 +87,5 @@ watch(activeItem, async (value) => {
|
|
|
87
87
|
</script>
|
|
88
88
|
|
|
89
89
|
<style>
|
|
90
|
-
|
|
90
|
+
.magic-command-body{height:var(--magic-command-body-height,100%);overflow-y:var(--magic-command-body-overflow-y,auto)}
|
|
91
91
|
</style>
|
|
@@ -113,5 +113,5 @@ const {
|
|
|
113
113
|
</script>
|
|
114
114
|
|
|
115
115
|
<style>
|
|
116
|
-
:root{--magic-cookie-
|
|
116
|
+
:root{--magic-cookie-preferences-mask:linear-gradient(0deg,hsla(0,0%,100%,0),#fff 1.5rem);--magic-cookie-checkbox-size:0.875rem;--magic-cookie-checkbox-border-width:1px;--magic-cookie-checkbox-border-color:currentColor;--magic-cookie-checkbox-border-radius:0;--magic-cookie-button-width:auto;--magic-cookie-button-height:2.5rem;--magic-cookie-button-spacing:1rem;--magic-cookie-button-border-width:1px;--magic-cookie-button-border-radius:0.25rem;--magic-cookie-button-backdrop-filter:none;--magic-cookie-button-primary-color:#000;--magic-cookie-button-primary-background:#fff;--magic-cookie-button-primary-border-color:transparent;--magic-cookie-button-secondary-color:#fff;--magic-cookie-button-secondary-background:transparent;--magic-cookie-button-secondary-border-color:transparent}.magic-cookie{-webkit-backdrop-filter:var(--magic-cookie-backdrop-filter,unset);backdrop-filter:var(--magic-cookie-backdrop-filter,unset);background-color:var(--magic-cookie-background,rgba(75,75,75,.5));border-radius:var(--magic-cookie-border-radius,0);box-shadow:var(--magic-cookie-box-shadow,unset);color:var(--magic-cookie-color,inherit);max-width:var(--magic-cookie-max-width,480px);overflow:hidden}.magic-cookie,.magic-cookie__container{display:flex;flex-direction:column;width:100%}.magic-cookie__container{max-height:var(--magic-cookie-max-height,calc(100vh - 2rem))}.magic-cookie__body{display:flex;flex-direction:column;gap:1rem;height:100%;mask:var(--magic-cookie-preferences-mask);-webkit-mask:var(--magic-cookie-preferences-mask);overflow-y:scroll;padding:1rem;width:100%;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}.magic-cookie__body::-webkit-scrollbar{display:none}.magic-cookie__footer{padding:1rem;width:100%}.magic-cookie__preferences{flex-direction:column;height:100%}.magic-cookie__actions,.magic-cookie__preferences{display:flex;gap:1rem;width:100%}ul.magic-cookie__cookies{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:0;padding:0}li.magic-cookie__cookie{align-items:flex-start;display:flex;gap:1rem;margin:0;padding:0}.magic-cookie__cookie__content{align-items:flex-start;display:flex;flex-direction:column;gap:.25rem}.magic-cookie__cookie__title{display:inline-flex}.magic-cookie__cookie__text{white-space:pre-line}.magic-cookie-checkbox{align-items:center;display:flex;gap:.625rem}.magic-cookie-checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--magic-cookie-checkbox-border-width) var(--magic-cookie-checkbox-border-color) solid;border-radius:var(--magic-cookie-checkbox-border-radius);cursor:pointer;flex-shrink:0;height:var(--magic-cookie-checkbox-size);position:relative;vertical-align:middle;width:var(--magic-cookie-checkbox-size)}.magic-cookie-checkbox input[type=checkbox]:checked:after{background-color:var(--magic-cookie-checkbox-border-color);border-radius:var(--magic-cookie-checkbox-border-radius);content:"";display:block;height:calc(var(--magic-cookie-checkbox-size)/2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(var(--magic-cookie-checkbox-size)/2)}.magic-cookie-checkbox:disabled{cursor:not-allowed}.magic-cookie-button{align-items:center;backdrop-filter:var(--magic-cookie-button-backdrop-filter);-webkit-backdrop-filter:var(--magic-cookie-button-backdrop-filter);border:var(--magic-cookie-button-border-width) solid;border-radius:var(--magic-cookie-button-border-radius);display:inline-flex;gap:var(--magic-cookie-button-spacing);height:var(--magic-cookie-button-height);justify-content:center;padding:0 var(--magic-cookie-button-spacing);width:var(--magic-cookie-button-width)}.magic-cookie-button.-primary{background-color:var(--magic-cookie-button-primary-background);border-color:var(--magic-cookie-button-primary-border-color);color:var(--magic-cookie-button-primary-color)}.magic-cookie-button.-secondary{background-color:var(--magic-cookie-button-secondary-background);border-color:var(--magic-cookie-button-secondary-border-color);color:var(--magic-cookie-button-secondary-color)}
|
|
117
117
|
</style>
|
|
@@ -107,5 +107,5 @@ onMounted(() => {
|
|
|
107
107
|
</script>
|
|
108
108
|
|
|
109
109
|
<style>
|
|
110
|
-
|
|
110
|
+
.magic-draggable{background:transparent;border:none;color:inherit;height:var(--magic-draggable-height,100%);inset:var(--magic-draggable-inset,0);padding:0;position:var(--magic-draggable-position,fixed);width:var(--magic-draggable-width,100%);z-index:var(--magic-draggable-z-index,999)}.magic-draggable,.magic-draggable.-disabled{pointer-events:none}.magic-draggable__wrapper{display:block;height:100%;width:100%}.magic-draggable__drag{cursor:grab;display:inline-flex;height:auto;pointer-events:auto;position:relative;touch-action:none;transform-origin:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto}.magic-draggable.-dragging .magic-draggable__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-draggable.-disabled .magic-draggable__drag{cursor:default}.magic-draggable__overlay{inset:0;position:absolute;z-index:9999}
|
|
111
111
|
</style>
|
|
@@ -374,5 +374,5 @@ onUnmounted(() => {
|
|
|
374
374
|
</script>
|
|
375
375
|
|
|
376
376
|
<style>
|
|
377
|
-
:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-
|
|
377
|
+
:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-padding:0px}.magic-drawer{--magic-drawer-drag-overshoot-x:0px;--magic-drawer-drag-overshoot-y:0px;align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index,999)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.magic-drawer.-bottom>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.magic-drawer.-top>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.magic-drawer.-right>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer.-left>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer__wrapper{height:var(--magic-drawer-height);pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:var(--magic-drawer-width)}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-x:var(--magic-drawer-content-overflow-x,hidden);overflow-y:var(--magic-drawer-content-overflow-y,hidden);pointer-events:auto;position:relative;scroll-behavior:smooth;touch-action:none;width:100%}dialog.magic-drawer__drag{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-drawer__drag::backdrop{background-color:transparent}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-drawer.-disabled .magic-drawer__drag,.magic-drawer.-wheeling .magic-drawer__drag{cursor:auto}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__overlay{inset:0;position:absolute;z-index:9999}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter,unset);backdrop-filter:var(--magic-drawer-backdrop-filter,unset);background-color:var(--magic-drawer-backdrop-color,rgba(0,0,0,.5));bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer.-disabled .magic-drawer__backdrop{pointer-events:none}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
|
|
378
378
|
</style>
|
|
@@ -53,5 +53,5 @@ defineExpose({
|
|
|
53
53
|
</script>
|
|
54
54
|
|
|
55
55
|
<style>
|
|
56
|
-
|
|
56
|
+
@keyframes magicMarqueeScrollX{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes magicMarqueeScrollY{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}.magic-marquee{overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.magic-marquee__track{display:flex;justify-content:flex-start;position:relative;width:100%}.magic-marquee__content{animation-direction:var(--magic-marquee-animation-direction,normal);animation-duration:var(--magic-marquee-animation-duration);animation-iteration-count:infinite;animation-name:var(--magic-marquee-animation-name);animation-play-state:var(--magic-marquee-animation-play-state,running);animation-timing-function:linear;backface-visibility:hidden;display:flex;flex-grow:0;flex-shrink:0;gap:var(--magic-marquee-gap,1rem);padding-right:var(--magic-marquee-gap,1rem);white-space:nowrap;width:var(--magic-marquee-content-width,unset)}
|
|
57
57
|
</style>
|
|
@@ -229,5 +229,5 @@ const polygonPoints = computed(() => {
|
|
|
229
229
|
</script>
|
|
230
230
|
|
|
231
231
|
<style>
|
|
232
|
-
.magic-menu-float{display:flex}.magic-menu-float.-top{flex-direction:column-reverse}.magic-menu-float.-bottom{flex-direction:column}.magic-menu-float.-left{flex-direction:row-reverse}.magic-menu-float.-right{flex-direction:row}.magic-menu-float__arrow{color:var(--magic-menu-float-arrow-color,inherit);height:var(--magic-menu-float-arrow-height,.75rem);width:var(--magic-menu-float-arrow-width,.75rem)}.magic-menu-float__arrow svg{height:100%;width:100%}
|
|
232
|
+
.magic-menu-float{display:flex;z-index:var(--magic-menu-float-z-index,999)}.magic-menu-float.-top{flex-direction:column-reverse}.magic-menu-float.-bottom{flex-direction:column}.magic-menu-float.-left{flex-direction:row-reverse}.magic-menu-float.-right{flex-direction:row}.magic-menu-float__arrow{color:var(--magic-menu-float-arrow-color,inherit);height:var(--magic-menu-float-arrow-height,.75rem);width:var(--magic-menu-float-arrow-width,.75rem)}.magic-menu-float__arrow svg{height:100%;width:100%}
|
|
233
233
|
</style>
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
:disabled="mappedOptions.teleport?.disabled"
|
|
6
6
|
>
|
|
7
7
|
<div
|
|
8
|
-
:is="mappedOptions.tag"
|
|
9
8
|
ref="modalRef"
|
|
10
9
|
class="magic-modal"
|
|
11
10
|
:id="toValue(id)"
|
|
@@ -189,5 +188,5 @@ onUnmounted(() => {
|
|
|
189
188
|
</script>
|
|
190
189
|
|
|
191
190
|
<style>
|
|
192
|
-
|
|
191
|
+
@keyframes magic-modal-content-enter{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes magic-modal-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-modal{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;position:fixed;width:100%;z-index:var(--magic-modal-z-index,999)}.magic-modal__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-modal-content-align-items,center);display:flex;justify-content:var(--magic-modal-content-justify-content,center);max-height:100%;overflow-y:var(--magic-modal-content-overflow-y,auto);scroll-behavior:smooth;width:100%}dialog.magic-modal__content{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-modal__content::backdrop{background-color:transparent}.magic-modal__backdrop{-webkit-backdrop-filter:var(--magic-modal-backdrop-filter,unset);backdrop-filter:var(--magic-modal-backdrop-filter,unset);background-color:var(--magic-modal-backdrop-color,rgba(0,0,0,.5));bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-modal--content-enter-active{animation:magic-modal-content-enter .3s ease}.magic-modal--content-leave-active{animation:magic-modal-content-leave .3s ease}@media (prefers-reduced-motion){.magic-modal--content-enter-active{animation:fade-in .3s ease}.magic-modal--content-leave-active{animation:fade-out .3s ease}}.magic-modal--backdrop-enter-active{animation:fade-in .3s ease}.magic-modal--backdrop-leave-active{animation:fade-out .3s ease}
|
|
193
192
|
</style>
|
|
@@ -68,5 +68,5 @@ onUnmounted(() => {
|
|
|
68
68
|
</script>
|
|
69
69
|
|
|
70
70
|
<style>
|
|
71
|
-
:root{--magic-noise-loading-
|
|
71
|
+
:root{--magic-noise-loading-transition:color 300ms ease,opacity 300ms ease}.magic-noise{background:var(--magic-noise-background,transparent);position:relative;transition:var(--magic-noise-loading-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-noise.-loading{background:var(--magic-noise-loading-background,#000)}.magic-noise__inner{height:100%;position:relative;transition:var(--magic-noise-loading-transition);width:100%}.magic-noise__inner.-loading{opacity:0}.magic-noise__canvas{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.magic-noise__off-canvas{left:0;pointer-events:none;position:absolute;top:0;visibility:hidden}
|
|
72
72
|
</style>
|
|
@@ -81,5 +81,9 @@ onBeforeUnmount(() => {
|
|
|
81
81
|
</script>
|
|
82
82
|
|
|
83
83
|
<style>
|
|
84
|
-
:root{--magic-audio-player-
|
|
84
|
+
:root{--magic-audio-player-border-radius:1.25rem;--magic-audio-player-padding:0.25rem;--magic-audio-player-slot-radius:calc(var(--magic-audio-player-border-radius) - var(--magic-audio-player-padding))}.magic-audio-player{-webkit-backdrop-filter:var(--magic-audio-player-backdrop-filter,blur(80px));backdrop-filter:var(--magic-audio-player-backdrop-filter,blur(80px));background:var(--magic-audio-player-background,rgba(32,32,32,.8));border-radius:var(--magic-audio-player-border-radius);color:var(--magic-audio-player-color,#fff);container-type:inline-size;padding:var(--magic-audio-player-padding);position:relative;width:100%}.magic-audio-player.-slot{background:var(
|
|
85
|
+
--magic-audio-player-background-slot,hsla(0,0%,98%,.15)
|
|
86
|
+
)}.magic-audio-player__container{display:flex;flex-direction:column;gap:var(--magic-audio-player-gap,.25rem);height:100%;position:relative;width:100%}.magic-audio-player__slot{background-color:var(
|
|
87
|
+
--magic-audio-player-slot-background,rgba(32,32,32,.8)
|
|
88
|
+
);border-radius:var(--magic-audio-player-slot-radius);color:inherit;padding:var(--magic-audio-player-slot-padding,.75rem 1rem)}.magic-audio-player__audio{width:100%}
|
|
85
89
|
</style>
|
|
@@ -91,5 +91,5 @@ const { idle } = useIdle(3000)
|
|
|
91
91
|
</script>
|
|
92
92
|
|
|
93
93
|
<style>
|
|
94
|
-
:root{--magic-audio-player-controls-height:3rem
|
|
94
|
+
:root{--magic-audio-player-controls-height:3rem}.magic-audio-player-controls{pointer-events:none;width:100%}.magic-audio-player-controls__bar{align-items:flex-start;display:flex;flex-direction:column;margin:0 auto;pointer-events:auto;width:100%}.magic-audio-player-controls__bar--inner{align-items:center;box-sizing:border-box;color:var(--magic-audio-player-controls-color,inherit);display:flex;height:var(--magic-audio-player-controls-height);padding:0 var(--magic-audio-player-controls-padding-x,0);width:100%}.magic-audio-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-audio-player-controls__item.-shrink-0{flex-shrink:0}.magic-audio-player-controls__item.-grow{flex-grow:1}.magic-audio-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-audio-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-audio-player-controls-button-width,4rem)}.magic-audio-player-controls__item button svg{display:block;height:auto;width:var(--magic-audio-player-controls-icon-width,1.25rem)}.magic-audio-player-controls__timeline{width:100%}@container (max-width: 480px){.magic-audio-player-controls__item[data-slot=display-time-current]{display:none}}@container (max-width: 320px ){.magic-audio-player-controls__item[data-slot=display-time-duration]{display:none}.magic-audio-player-controls__item[data-slot=timeline]{padding-right:1rem}}@container (max-width: 240px){.magic-audio-player-controls__item[data-slot=timeline]{display:none}.magic-audio-player-controls__bar--inner{justify-content:center}}
|
|
95
95
|
</style>
|
|
@@ -92,5 +92,5 @@ onBeforeUnmount(() => {
|
|
|
92
92
|
</script>
|
|
93
93
|
|
|
94
94
|
<style>
|
|
95
|
-
|
|
95
|
+
.magic-player{aspect-ratio:var(--magic-player-aspect-ratio,16/9);background:var(--magic-player-background,#000);height:var(--magic-player-height,auto);overflow:hidden;position:relative;width:100%}.magic-player__video{height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}
|
|
96
96
|
</style>
|
|
@@ -40,9 +40,11 @@
|
|
|
40
40
|
</button>
|
|
41
41
|
</div>
|
|
42
42
|
<div class="magic-player-controls__item -grow">
|
|
43
|
+
<slot name="timelineBefore" />
|
|
43
44
|
<div class="magic-player-controls__timeline" ref="trackRef">
|
|
44
45
|
<magic-player-timeline :id="id" />
|
|
45
46
|
</div>
|
|
47
|
+
<slot name="timelineAfter" />
|
|
46
48
|
</div>
|
|
47
49
|
<div class="magic-player-controls__item -shrink-0">
|
|
48
50
|
<button v-if="muted" @click="unmute">
|
|
@@ -9,6 +9,8 @@ declare function __VLS_template(): {
|
|
|
9
9
|
seekPopover?(_: {}): any;
|
|
10
10
|
playIcon?(_: {}): any;
|
|
11
11
|
pauseIcon?(_: {}): any;
|
|
12
|
+
timelineBefore?(_: {}): any;
|
|
13
|
+
timelineAfter?(_: {}): any;
|
|
12
14
|
volumeOffIcon?(_: {}): any;
|
|
13
15
|
volumeOnIcon?(_: {}): any;
|
|
14
16
|
fullscreenExitIcon?(_: {}): any;
|
|
@@ -37,5 +37,7 @@ const stringifiedTime = computed(() => {
|
|
|
37
37
|
</script>
|
|
38
38
|
|
|
39
39
|
<style>
|
|
40
|
-
|
|
40
|
+
.magic-player-time-display{align-items:center;color:var(--magic-player-time-display-color,inherit);display:flex;font-size:var(--magic-player-time-display-font-size,.875rem);font-variant-numeric:var(
|
|
41
|
+
--magic-player-time-display-font-variant-numeric,tabular-nums
|
|
42
|
+
);height:100%;justify-content:var(--magic-player-time-display-justify-content,center);width:var(--magic-player-time-display-width,4rem)}
|
|
41
43
|
</style>
|
|
@@ -116,5 +116,5 @@ watch(() => seekedTime?.value, drawFrame)
|
|
|
116
116
|
</script>
|
|
117
117
|
|
|
118
118
|
<style>
|
|
119
|
-
|
|
119
|
+
.magic-player-mux-popover{border-radius:var(--magic-player-popover-border-radius,.25rem);overflow:hidden}.magic-player-mux-popover canvas{height:auto;width:100%}
|
|
120
120
|
</style>
|
|
@@ -60,5 +60,5 @@ const { idle } = useIdle(3000)
|
|
|
60
60
|
</script>
|
|
61
61
|
|
|
62
62
|
<style>
|
|
63
|
-
|
|
63
|
+
.magic-player-overlay{align-items:center;background-color:var(--magic-player-overlay-background,rgba(0,0,0,.3));color:var(--magic-player-overlay-color,#fff);cursor:pointer;display:flex;inset:0;justify-content:center;position:absolute;transition:var(--magic-player-overlay-transition,opacity .3s ease)}.magic-player-overlay__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;height:var(--magic-player-overlay-button-size,2.5rem);outline:none;padding:0;width:var(--magic-player-overlay-button-size,2.5rem)}.magic-player-overlay.-playing.-idle,.magic-player-overlay.-playing.-not-hover{opacity:0}
|
|
64
64
|
</style>
|
|
@@ -60,5 +60,7 @@ const {
|
|
|
60
60
|
</script>
|
|
61
61
|
|
|
62
62
|
<style>
|
|
63
|
-
:root{--magic-player-
|
|
63
|
+
:root{--magic-player-track-height:0.25rem}.magic-player-timeline{height:var(--magic-player-track-height)}.magic-player-timeline,.magic-player-timeline__target{align-items:center;display:flex;position:relative;width:100%}.magic-player-timeline__target{cursor:pointer;height:var(--magic-player-target-height,3.5rem)}.magic-player-timeline__slider-track{background:var(--magic-player-track-background,hsla(0,0%,98%,.15));border-radius:50rem;height:var(--magic-player-track-height);position:relative;width:100%}.magic-player-timeline__slider-inner-track{border-radius:50rem;height:100%;left:0;overflow:hidden;position:relative;top:0;width:100%;z-index:1}.magic-player-timeline__slider-thumb{height:var(--magic-player-track-height);position:absolute;width:var(--magic-player-track-height);z-index:10}.magic-player-timeline__slider-thumb-handle{background-color:var(
|
|
64
|
+
--magic-player-thumb-background,#fafafa
|
|
65
|
+
);border-radius:50rem;height:var(--magic-player-thumb-size,1rem);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s ease;width:var(--magic-player-thumb-size,1rem);z-index:10}.magic-player-timeline__slider-buffered,.magic-player-timeline__slider-scrubbed,.magic-player-timeline__slider-seeked{background:currentColor;border-radius:50rem;height:100%;left:0;margin-left:calc(-100% + var(--magic-player-track-height));position:absolute;width:100%}.magic-player-timeline__slider-scrubbed{display:flex;min-width:var(--magic-player-track-height);z-index:1}.magic-player-timeline__slider-seeked{opacity:.25}.magic-player-timeline__slider-buffered{opacity:.15}.magic-player-timeline:hover .magic-player-timeline__slider-thumb-handle{transform:translate(-50%,-50%) scale(1)}.magic-player-timeline__seek-popover{bottom:100%;left:0;position:absolute;transform:translateX(-50%)}
|
|
64
66
|
</style>
|
|
@@ -137,5 +137,5 @@ onUnmounted(() => {
|
|
|
137
137
|
</script>
|
|
138
138
|
|
|
139
139
|
<style>
|
|
140
|
-
:root{--magic-toast-
|
|
140
|
+
:root{--magic-toast-transform-x:0;--magic-toast-transform-y:0;--magic-toast-padding-x:1rem;--magic-toast-padding-y:1rem;--mt-multiplier-x:1;--mt-multiplier-y:1;--mt-align-items:flex-start;--mt-justify-content:center}.magic-toast{align-items:center;background:transparent;color:inherit;flex-direction:column;inset:0;justify-content:center;pointer-events:none;position:fixed;z-index:var(--magic-toast-z-index,999)}.magic-toast,.magic-toast__inner{display:flex;height:100%;width:100%}.magic-toast__inner{align-items:var(--mt-align-items);justify-content:var(--mt-justify-content);max-height:100%;overflow:scroll;position:relative}.magic-toast__inner *{pointer-events:all}.magic-toast.-top-center,.magic-toast.-top-left,.magic-toast.-top-right{--magic-toast-transform-y:10;--magic-toast-enter-animation:slide-ttb-in 300ms ease;--mt-multiplier-y:1;--mt-align-items:flex-start}.magic-toast.-top-center .magic-toast-component,.magic-toast.-top-left .magic-toast-component,.magic-toast.-top-right .magic-toast-component{padding-top:var(--magic-toast-padding-y,1rem)}.magic-toast.-bottom-center,.magic-toast.-bottom-left,.magic-toast.-bottom-right{--magic-toast-transform-y:10;--magic-toast-enter-animation:slide-btt-in 300ms ease;--mt-multiplier-y:-1;--mt-align-items:flex-end}.magic-toast.-bottom-center .magic-toast-component,.magic-toast.-bottom-left .magic-toast-component,.magic-toast.-bottom-right .magic-toast-component{padding-bottom:var(--magic-toast-padding-y,1rem)}.magic-toast.-bottom-left,.magic-toast.-top-left{--mt-justify-content:flex-start}.magic-toast.-bottom-left .magic-toast-component,.magic-toast.-top-left .magic-toast-component{padding-left:var(--magic-toast-padding-x,1rem)}.magic-toast.-bottom-right,.magic-toast.-top-right{--mt-justify-content:flex-end}.magic-toast.-bottom-right .magic-toast-component,.magic-toast.-top-right .magic-toast-component{padding-right:var(--magic-toast-padding-x,1rem)}.magic-toast.-from-left{--magic-toast-enter-animation:slide-ltr-in 300ms ease;--magic-toast-transform-y:0;--magic-toast-transform-x:30;--mt-multiplier-x:1}.magic-toast.-from-right{--magic-toast-enter-animation:slide-rtl-in 300ms ease;--magic-toast-transform-y:0;--magic-toast-transform-x:30;--mt-multiplier-x:-1}.magic-toast--list-enter-active{animation:var(--magic-toast-enter-animation,unset)}.magic-toast--list-leave-active{animation:var(--magic-toast-leave-animation,fade-out .3s ease)}
|
|
141
141
|
</style>
|
|
@@ -60,5 +60,5 @@ watchEffect(() => {
|
|
|
60
60
|
</script>
|
|
61
61
|
|
|
62
62
|
<style>
|
|
63
|
-
.magic-toast-component{--mt-index:0;--mt-offset:0;--mt-matrix-scale:calc(1 - var(--magic-toast-scale)*var(--mt-index, 0));--mt-matrix-transform-x:calc(var(--magic-toast-transform-x)*var(--mt-index, 0)*var(--mt-multiplier-x));--mt-matrix-transform-y:calc(var(--magic-toast-transform-y)*var(--mt-index, 0)*var(--mt-multiplier-y));list-style:none;position:absolute}.magic-toast-component__inner{height:100%;position:relative;transform:matrix(var(--mt-matrix-scale),0,0,var(--mt-matrix-scale),var(--mt-matrix-transform-x),var(--mt-matrix-transform-y));transition:var(--magic-toast-transition,transform .3s ease);width:100%}.magic-toast-component.expanded{--mt-matrix-scale:1;--mt-matrix-transform-y:calc(var(--mt-offset)*var(--mt-multiplier-y));--mt-matrix-transform-x:0}.magic-toast-component.expanded:not(:last-child) .magic-toast-component__inner{padding-bottom:calc(var(--magic-toast-gap)*var(--mt-index));padding-top:calc(var(--magic-toast-gap)*var(--mt-index))}
|
|
63
|
+
.magic-toast-component{--mt-index:0;--mt-offset:0;--mt-matrix-scale:calc(1 - var(--magic-toast-scale, 0.1)*var(--mt-index, 0));--mt-matrix-transform-x:calc(var(--magic-toast-transform-x)*var(--mt-index, 0)*var(--mt-multiplier-x));--mt-matrix-transform-y:calc(var(--magic-toast-transform-y)*var(--mt-index, 0)*var(--mt-multiplier-y));list-style:none;position:absolute}.magic-toast-component__inner{height:100%;position:relative;transform:matrix(var(--mt-matrix-scale),0,0,var(--mt-matrix-scale),var(--mt-matrix-transform-x),var(--mt-matrix-transform-y));transition:var(--magic-toast-transition,transform .3s ease);width:100%}.magic-toast-component.expanded{--mt-matrix-scale:1;--mt-matrix-transform-y:calc(var(--mt-offset)*var(--mt-multiplier-y));--mt-matrix-transform-x:0}.magic-toast-component.expanded:not(:last-child) .magic-toast-component__inner{padding-bottom:calc(var(--magic-toast-gap, .75rem)*var(--mt-index));padding-top:calc(var(--magic-toast-gap, .75rem)*var(--mt-index))}
|
|
64
64
|
</style>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maas/vue-equipment",
|
|
3
3
|
"description": "A magic collection of Vue composables, plugins, components and directives",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.33.0",
|
|
5
5
|
"author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"devDependencies": {
|