feat!: remove unstable scoped css hack and slot

Author: juliendargelos

playground/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import { type FreecasterPlayerSlots, FreecasterStyle } from '../src'
+  import { shallowRef, ref, computed } from 'vue'
+  import { FreecasterStyle, type Player } from '../src'
 
   const customElement = import.meta.env.VITE_CUSTOM_ELEMENT
 
@@ -15,9 +15,15 @@
   const index = ref(0)
   const id = ref('')
 
+  const player = shallowRef<Player>()
   const paused = ref(false)
   const muted = ref(true)
   const currentTime = ref(0)
+  const fullscreen = ref(false)
+  const volume = ref<number>()
+  const readyState = ref<number>()
+  const currentSubtitles = ref<TextTrack>()
+  const subtitles = ref<TextTrack[]>()
   const preview = ref(false)
 
   function onSubmit(): void {
@@ -107,27 +113,41 @@
         controls
         autoplay
         subtitles-default-lang="fr"
-        #default="state"
+        v-model="player"
         v-model:paused="paused"
         v-model:muted="muted"
         v-model:current-time="currentTime"
-      >
-        <div class="controls">
-          <button @click="paused = !paused">
-            {{ paused ? 'play' : 'pause' }}
-          </button>
-          <button @click="muted = !muted">
-            {{ muted ? 'unmute' : 'mute' }}
-          </button>
-          <button @click="currentTime -= 5">
-            backward
-          </button>
-          <button @click="currentTime += 5">
-            forward
-          </button>
-        </div>
-        <pre>{{ formatObject(state) }}</pre>
-      </FreecasterPlayer>
+        v-model:fullscreen="fullscreen"
+        v-model:volume="volume"
+        v-model:ready-state="readyState"
+        v-model:current-subtitles="currentSubtitles"
+        v-model:subtitles="subtitles"
+      />
+      <div class="controls">
+        <button @click="paused = !paused">
+          {{ paused ? 'play' : 'pause' }}
+        </button>
+        <button @click="muted = !muted">
+          {{ muted ? 'unmute' : 'mute' }}
+        </button>
+        <button @click="currentTime -= 5">
+          backward
+        </button>
+        <button @click="currentTime += 5">
+          forward
+        </button>
+      </div>
+      <pre>{{ formatObject({
+        player,
+        paused,
+        muted,
+        fullscreen,
+        currentTime,
+        volume,
+        readyState,
+        currentSubtitles,
+        subtitles
+      }) }}</pre>
     </div>
     <div>
       <a

readme.md

@@ -56,7 +56,7 @@ attached to an element ref.
 ### Player component
 
 The `FreecasterPlayer` component is a wrapper around the `usePlayer` composable.
-It also provides models and slot props for the player state.
+It also provides models for the player state.
 
 ```vue
 <script setup lang="ts">
@@ -89,33 +89,7 @@ It also provides models and slot props for the player state.
 </template>
 ```
 
-```vue
-<script setup lang="ts">
-  import { FreecasterPlayer } from '@plutotcool/vue-freecaster'
-</script>
-
-<template>
-  <FreecasterPlayer
-    video-id="..."
-    #default="{
-      player,
-      muted,
-      paused,
-      volume,
-      currentTime,
-      readyState,
-      fullscreen,
-      subtitles,
-      currentSubtitles
-    }"
-  >
-    <!-- ... !-->
-  </FreecasterPlayer>
-</template>
-```
-
 - [Component props](https://plutotcool.github.io/vue-freecaster/interfaces/_FreecasterPlayer__.FreecasterPlayerProps.html)
-- [Component slots](https://plutotcool.github.io/vue-freecaster/interfaces/_FreecasterPlayer__.FreecasterPlayerSlots.html)
 - [Component events](https://plutotcool.github.io/vue-freecaster/types/_FreecasterPlayer__.FreecasterPlayerEmits.html)
 
 ### Custom elements

src/components/FreecasterPlayer.vue

@@ -7,26 +7,9 @@
 
   }
 
-  export interface FreecasterPlayerSlots {
-    default(props: {
-      player: Player | undefined
-      paused: boolean
-      muted: boolean
-      fullscreen: boolean
-      currentTime: number
-      volume: number
-      readyState: number
-      currentSubtitles: TextTrack | undefined
-      subtitles: TextTrack[]
-    }): any
-  }
-
   export type FreecasterPlayerEmits = PlayerEvents
 
-  const scopeId = getCurrentInstance().vnode.scopeId
-
   const props = defineProps<FreecasterPlayerProps>()
-  const slots = defineSlots<FreecasterPlayerSlots>()
   const emit = defineEmits<FreecasterPlayerEmits>()
 
   const player = defineModel<Player>()
@@ -107,7 +90,6 @@
   <div
     ref="element"
     v-bind="{
-      ...(scopeId ? { [scopeId]: '' } : null),
       ...attrs,
       ...attributes
     }"
@@ -116,18 +98,4 @@
       attributes.class
     ].filter(Boolean)"
   />
-  <slot
-    name="default"
-    v-bind="{
-      player,
-      paused,
-      muted,
-      fullscreen,
-      volume,
-      currentTime,
-      readyState,
-      currentSubtitles,
-      subtitles
-    }"
-  />
 </template>