💄 (switch) change switch lib

src/components/ZoneMusic.vue

@@ -1,21 +1,18 @@
 <template>
   <div class="zone-music">
-    <div class="pretty p-switch p-fill">
-      <div>
-        <label for="use-music" :class="{ disabled: withMusic }"
-          >concentré</label
-        >
-      </div>
-      <input
-        type="checkbox"
-        name="use-music"
-        id="use-music"
-        :checked="withMusic"
-        @change="setWithMusic(!withMusic)"
-      />
-      <div class="state p-success">
-        <label for="use-music" :class="{ disabled: !withMusic }">détente</label>
-      </div>
+    <div class="pm-field">
+      <label for="use-music" data-pm-holder>
+        <span :class="{ disabled: withMusic }">concentré</span>
+        <input
+          type="checkbox"
+          name="use-music"
+          id="use-music"
+          :checked="withMusic"
+          @change="setWithMusic(!withMusic)"
+          data-pm-checkbox-toggle
+        />
+        <span :class="{ disabled: !withMusic }">détente</span>
+      </label>
     </div>
     <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
   </div>
@@ -55,15 +52,16 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/styles/variables';
 
-.pretty {
+label[data-pm-holder] {
   display: flex;
   justify-content: center;
-}
+  margin: auto;
+  max-width: 300px;
 
-label {
-  margin: 0 1rem;
+  span {
+    flex: 1;
+  }
 }
-
 .disabled {
   color: darken($color, 60);
 }