@dnax/ui 0.0.5 → 0.0.7

package/components/QNotifyProvider.vue

@@ -3,6 +3,7 @@
 // Intégré dans QConfigProvider (rendu automatiquement par le plus externe),
 // mais utilisable aussi en autonome : <q-notify-provider />.
 import { Toaster } from "vue-sonner"
+import "vue-sonner/style.css" // styles du Toaster (sinon les toasts sont rendus mais invisibles)
 
 interface Props {
   /** Position des toasts (défaut : bottom-right) */

package/components/QTab.vue

@@ -96,6 +96,8 @@ const tabClasses = computed(() =>
     (props.noCaps || tabs?.noCaps.value) && "q-tab--no-caps",
     props.disable && "q-tab--disabled",
     tabs?.inlineLabel.value && "q-tab--inline-label",
+    // Icône empilée au-dessus du label : padding vertical pour l'aérer du cadre
+    props.icon && !tabs?.inlineLabel.value && "q-tab--stacked-icon",
   ),
 )
 

package/lib/q.ts

@@ -189,8 +189,9 @@ export interface NotifyOptions {
   icon?: string
   /** Couleur de fond : token (primary, negative…) ou hex */
   color?: string
-  /** Type → couleur riche sonner (success, error, warning, info) */
-  type?: "default" | "success" | "error" | "warning" | "info"
+  /** Type → couleur riche sonner. Tokens Quasar acceptés : positive = success,
+   *  negative = error, warning, info (success/error aussi acceptés). */
+  type?: "default" | "success" | "error" | "warning" | "info" | "positive" | "negative"
   /** Position (défaut : bottom-right, celle du QNotifyProvider) */
   position?: ExternalToast["position"]
   /** Durée d'affichage en ms (défaut : 4000) */
@@ -214,9 +215,13 @@ function notify(opts: NotifyOptions): NotifyController {
     icon: icon ? h(icon) : undefined,
   }
 
+  // Tokens Quasar → types sonner : positive = success, negative = error
+  const sonnerType =
+    type === "positive" ? "success" : type === "negative" ? "error" : type
+
   let id: string | number | undefined
 
-  if (color && type === "default") {
+  if (color && sonnerType === "default") {
     // Couleur Quasar custom → rendu custom (QNotifyToast)
     id = toast.custom(QNotifyToast, {
       ...data,
@@ -239,7 +244,7 @@ function notify(opts: NotifyOptions): NotifyController {
       info: toast.info,
       default: toast,
     } as const
-    id = toasts[type](message, {
+    id = toasts[sonnerType](message, {
       ...data,
       action: action ? { label: action.label, onClick: () => action.handler() } : undefined,
     })

package/package.json

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

package/styles/main.css

@@ -858,6 +858,12 @@ html.dark body {
   gap: 8px;
 }
 
+/* Icône empilée au-dessus du label : aérer l'icône du haut du cadre (le tab
+   n'a que du padding horizontal par défaut) et le label du bas */
+.q-tab--stacked-icon {
+  padding: 8px 16px;
+}
+
 .q-tab__icon {
   width: 1.3em;
   height: 1.3em;