@dnax/ui 0.0.29 → 0.0.31

package/components/QAutocomplete.vue

@@ -447,13 +447,11 @@ watch(open, (v) => {
         aria-hidden="true"
       />
     </div>
-    <div v-if="error" class="q-field__bottom">
-      <div class="q-field__error">
+    <div class="q-field__bottom">
+      <div v-if="error" class="q-field__error">
         <slot name="error">{{ errorMessage }}</slot>
       </div>
-    </div>
-    <div v-else-if="hint || $slots.hint" class="q-field__bottom">
-      <div class="q-field__hint">
+      <div v-else-if="hint || $slots.hint" class="q-field__hint">
         <slot name="hint">{{ hint }}</slot>
       </div>
     </div>

package/components/QDatePicker.vue

@@ -195,11 +195,9 @@ onBeforeUnmount(() => {
         </button>
         <ChevronDown class="q-select__arrow" :class="{ 'q-select__arrow--rotated': open }" aria-hidden="true" />
       </div>
-      <div v-if="error" class="q-field__bottom">
-        <div class="q-field__error">{{ errorMessage }}</div>
-      </div>
-      <div v-else-if="hint" class="q-field__bottom">
-        <div class="q-field__hint">{{ hint }}</div>
+      <div class="q-field__bottom">
+        <div v-if="error" class="q-field__error">{{ errorMessage }}</div>
+        <div v-else-if="hint" class="q-field__hint">{{ hint }}</div>
       </div>
 
       <Teleport to="body">

package/components/QSelect.vue

@@ -588,13 +588,11 @@ const sheetClass = computed(() => [`q-select__sheet--${props.mode}`, modeOptions
       <slot name="append" />
     </div>
 
-    <div v-if="error" class="q-field__bottom">
-      <div class="q-field__error">
+    <div class="q-field__bottom">
+      <div v-if="error" class="q-field__error">
         <slot name="error">{{ errorMessage }}</slot>
       </div>
-    </div>
-    <div v-else-if="hint || $slots.hint" class="q-field__bottom">
-      <div class="q-field__hint">
+      <div v-else-if="hint || $slots.hint" class="q-field__hint">
         <slot name="hint">{{ hint }}</slot>
       </div>
     </div>

package/components/QVideo.vue

@@ -8,7 +8,11 @@
 // Events : @ready (media element), @play, @pause, @ended, @timeupdate, @loadedmetadata, @volumechange.
 // Méthodes exposées : play / pause / togglePlay / seek / getCurrentTime / getDuration / setVolume / setMuted / isPlaying.
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
-import "@videojs/html/video/skin.css"
+// Importé en texte brut + injecté côté client : passé dans le pipeline CSS normal, ce
+// fichier tiers (build Tailwind de @videojs/html) contient du `@layer`/`@scope` natif qui
+// casse le build des apps consommatrices en Tailwind v3 (PostCSS exige le `@tailwind`
+// correspondant). L'injection runtime l'exclut de PostCSS sans perdre les styles globaux.
+import skinCss from "@videojs/html/video/skin.css?raw"
 
 interface Props {
   /** URL de la vidéo (mp4, webm, ogg, HLS .m3u8, YouTube…) */
@@ -125,7 +129,19 @@ const onPlaceholderClick = () => {
   play()
 }
 
+let skinInjected = false
+const injectSkin = () => {
+  if (skinInjected || typeof document === "undefined") return
+  skinInjected = true
+  if (document.getElementById("q-video-skin")) return
+  const style = document.createElement("style")
+  style.id = "q-video-skin"
+  style.textContent = skinCss
+  document.head.appendChild(style)
+}
+
 onMounted(async () => {
+  injectSkin()
   // Charge le framework HTML (custom elements) — uniquement côté client
   await Promise.all([
     import("@videojs/html/video/player" as string),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/shims.d.ts

@@ -0,0 +1,6 @@
+// Imports de fichiers CSS en texte brut (Vite `?raw`) : utilisés pour injecter à
+// l'exécution des feuilles tierces que l'on ne veut pas faire passer par PostCSS.
+declare module "*.css?raw" {
+  const src: string
+  export default src
+}