@dnax/ui 0.0.1

package/lib/screen.ts

@@ -0,0 +1,105 @@
+// $q.screen — plugin Screen façon Quasar
+// (https://quasar.dev/options/screen-plugin) : taille de fenêtre réactive,
+// refs lt/gt, taille courante (name), seuils personnalisables (setSizes).
+import { computed, reactive, ref, watch } from "vue"
+import { useWindowSize } from "@vueuse/core"
+import type { Ref } from "vue"
+
+export interface QScreenSizes {
+  sm: number
+  md: number
+  lg: number
+  xl: number
+}
+
+export interface QScreen {
+  /** largeur de fenêtre (px, réactive) */
+  width: Ref<number>
+  /** hauteur de fenêtre (px, réactive) */
+  height: Ref<number>
+  /** taille courante : 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
+  name: Ref<"xs" | "sm" | "md" | "lg" | "xl">
+  /** seuils (réactifs, modifiables via setSizes) */
+  sizes: QScreenSizes
+  /** less than : width < seuil */
+  lt: { sm: Ref<boolean>; md: Ref<boolean>; lg: Ref<boolean>; xl: Ref<boolean> }
+  /** greater than : xs > 0 ; sm/md/lg ≥ seuil */
+  gt: { xs: Ref<boolean>; sm: Ref<boolean>; md: Ref<boolean>; lg: Ref<boolean> }
+  /** taille exacte courante */
+  xs: Ref<boolean>
+  sm: Ref<boolean>
+  md: Ref<boolean>
+  lg: Ref<boolean>
+  xl: Ref<boolean>
+  /** Personnalise les seuils (ex. setSizes({ md: 900 })) */
+  setSizes: (all: Partial<QScreenSizes>) => void
+  /** Ajoute les classes body .screen--xs … .screen--xl (façon Quasar) */
+  setBodyClasses: (condition?: boolean) => void
+}
+
+const { width, height } = useWindowSize()
+
+const sizes = reactive<QScreenSizes>({ sm: 600, md: 1024, lg: 1440, xl: 1920 })
+
+const lt = {
+  sm: computed(() => width.value < sizes.sm),
+  md: computed(() => width.value < sizes.md),
+  lg: computed(() => width.value < sizes.lg),
+  xl: computed(() => width.value < sizes.xl),
+}
+
+const gt = {
+  xs: computed(() => width.value > 0),
+  sm: computed(() => width.value >= sizes.sm),
+  md: computed(() => width.value >= sizes.md),
+  lg: computed(() => width.value >= sizes.lg),
+}
+
+const xs = computed(() => width.value < sizes.sm)
+const sm = computed(() => width.value >= sizes.sm && width.value < sizes.md)
+const md = computed(() => width.value >= sizes.md && width.value < sizes.lg)
+const lg = computed(() => width.value >= sizes.lg && width.value < sizes.xl)
+const xl = computed(() => width.value >= sizes.xl)
+
+const name = computed<"xs" | "sm" | "md" | "lg" | "xl">(() =>
+  xs.value ? "xs" : sm.value ? "sm" : md.value ? "md" : lg.value ? "lg" : "xl",
+)
+
+function setSizes(all: Partial<QScreenSizes>) {
+  Object.assign(sizes, all)
+}
+
+// Classes body façon Quasar (.screen--xs …) — activées via setBodyClasses()
+let bodyClassesEnabled = false
+
+const updateBodyClasses = () => {
+  if (typeof document === "undefined") return
+  const body = document.body
+  body.classList.remove("screen--xs", "screen--sm", "screen--md", "screen--lg", "screen--xl")
+  body.classList.add(`screen--${name.value}`)
+}
+
+watch(name, () => {
+  if (bodyClassesEnabled) updateBodyClasses()
+})
+
+function setBodyClasses(condition = true) {
+  bodyClassesEnabled = condition
+  if (condition) updateBodyClasses()
+}
+
+export const screen: QScreen = {
+  width,
+  height,
+  name,
+  sizes,
+  lt,
+  gt,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  setSizes,
+  setBodyClasses,
+}

package/lib/search.ts

@@ -0,0 +1,35 @@
+import Fuse from "fuse.js"
+
+export interface SearchOptions {
+  /** Clés à chercher (chemins "a.b", ou clés simples) */
+  keys?: string[]
+  /** Seuil de tolérance fuse.js : 0 = exact, 1 = tout matche (défaut 0.4) */
+  threshold?: number
+}
+
+export interface Searcher<T> {
+  search: (query: string) => T[]
+}
+
+/**
+ * Chercheur flou basé sur Fuse.js, orienté autocomplete.
+ * - ignoreLocation : le motif peut matcher n'importe où dans le texte
+ * - shouldSort : résultats triés par score de pertinence
+ */
+export function createSearcher<T>(items: T[], options: SearchOptions = {}): Searcher<T> {
+  const keys = options.keys ?? []
+  const fuse = new Fuse<T>(items, {
+    keys,
+    threshold: options.threshold ?? 0.4,
+    ignoreLocation: true,
+    shouldSort: true,
+  })
+
+  return {
+    search(query) {
+      const q = query.trim()
+      if (!q || keys.length === 0) return items
+      return fuse.search(q).map((r) => r.item)
+    },
+  }
+}

package/lib/themeVars.ts

@@ -0,0 +1,22 @@
+// themeVarsStyle — variables CSS du thème (couleurs + radius) pour les contenus
+// téléportés (dialogs, bottom sheets) qui sortent du div .q-config-provider.
+import { computed } from "vue"
+import type { ComputedRef } from "vue"
+import { contrastText } from "./colors"
+import { isRadiusScale, RADIUS_VALUES } from "./useComponentProps"
+import type { QTheme } from "./config"
+
+/** Computed des variables --token / --token-foreground / --q-radius du thème. */
+export function themeVarsStyle(theme: ComputedRef<QTheme>): ComputedRef<Record<string, string>> {
+  return computed(() => {
+    const style: Record<string, string> = {}
+    for (const [token, value] of Object.entries(theme.value.colors ?? {})) {
+      if (!value) continue
+      style[`--${token}`] = value
+      style[`--${token}-foreground`] = contrastText(value)
+    }
+    const global = theme.value.componentProps?.default?.radius
+    if (isRadiusScale(global)) style["--q-radius"] = RADIUS_VALUES[global]
+    return style
+  })
+}

package/lib/useComponentProps.ts

@@ -0,0 +1,54 @@
+import { computed, inject, toValue } from "vue"
+import type { ComputedRef, MaybeRefOrGetter } from "vue"
+import { qConfigKey } from "./config"
+
+/** Échelle de rayon : none (carré) → lg (très arrondi) */
+export type RadiusScale = "none" | "xs" | "sm" | "md" | "lg"
+
+/** Prop `radius` : booléen (forme native du composant, ex. pilule) ou échelle */
+export type RadiusProp = boolean | RadiusScale
+
+export const RADIUS_VALUES: Record<RadiusScale, string> = {
+  none: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "8px",
+  lg: "16px",
+}
+
+export const isRadiusScale = (v: unknown): v is RadiusScale =>
+  v === "none" || v === "xs" || v === "sm" || v === "md" || v === "lg"
+
+/**
+ * Props par défaut d'un composant depuis `theme.componentProps` :
+ * `default` (appliqué à tous) puis `<Nom>` (spécifique, prioritaire).
+ * Déjà fusionnés avec le parent par QConfigProvider — le plus proche gagne.
+ */
+export function useComponentProps(name: string): ComputedRef<Record<string, unknown>> {
+  const config = inject(qConfigKey, null)
+  return computed(() => {
+    const all = config?.theme.value.componentProps ?? {}
+    const base = all.default ?? {}
+    const specific = all[name] ?? {}
+    return { ...base, ...specific }
+  })
+}
+
+/**
+ * Prop `radius` effective : prop explicite > composantProps.<Nom> > composantProps.default > undefined.
+ * `own` doit être un getter (() => props.radius) pour rester réactif quand la
+ * prop change (cas des wrappers comme QInputPassword qui transmettent radius).
+ * `undefined` = pas d'arrondi (hérite du `--q-radius` global, 0 par défaut).
+ */
+export function useRadius(
+  name: string,
+  own: MaybeRefOrGetter<RadiusProp | undefined> = undefined,
+): ComputedRef<RadiusProp | undefined> {
+  const defaults = useComponentProps(name)
+  return computed(() => toValue(own) ?? (defaults.value.radius as RadiusProp | undefined))
+}
+
+/** Style `--q-radius` à poser sur la racine du composant pour une valeur d'échelle. */
+export function radiusStyle(radius: RadiusProp | undefined): Record<string, string> | undefined {
+  return isRadiusScale(radius) ? { "--q-radius": RADIUS_VALUES[radius] } : undefined
+}

package/lib/utils.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/** Fusionne des classes conditionnelles (clsx) et résout les conflits (tailwind-merge). */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/module.ts

@@ -0,0 +1,89 @@
+/**
+ * Module Nuxt pour @dnax/ui.
+ * Usage : `modules: ["@dnax/ui"]` dans nuxt.config.ts.
+ *
+ * - Auto-importe les composants Q* (balises kebab-case : <q-btn>, <q-header>…)
+ * - Ajoute styles/main.css (safe-area, tokens, styles de tous les composants)
+ *
+ * Options (clé `dnaxUi`) :
+ *   components: false  — désactive l'auto-import des composants
+ *   css: false         — désactive l'ajout de styles/main.css
+ */
+import { addComponentsDir, addPluginTemplate, createResolver, defineNuxtModule } from "@nuxt/kit"
+
+export interface DnaxUiModuleOptions {
+  /** Auto-importe les composants Q* (défaut : true) */
+  components?: boolean
+  /** Ajoute styles/main.css (défaut : true) */
+  css?: boolean
+  /** Installe le handler « retour » : ferme l'overlay ouvert au lieu de naviguer (défaut : true) */
+  overlayBack?: boolean
+}
+
+/** Custom elements du framework HTML Video.js v10 (@videojs/html) — balises non-Vue */
+const VIDEOJS_CUSTOM_ELEMENTS = [
+  "video-player",
+  "video-skin",
+  "youtube-video",
+  "hlsjs-video",
+  "mux-video",
+]
+
+export default defineNuxtModule<DnaxUiModuleOptions>({
+  meta: {
+    name: "@dnax/ui",
+    configKey: "dnaxUi",
+    compatibility: { nuxt: ">=3.12.0" },
+  },
+  defaults: {
+    components: true,
+    css: true,
+    overlayBack: true,
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+
+    // Les balises <video-player>/<youtube-video>… sont des custom elements @videojs/html,
+    // pas des composants Vue → les exclure de la résolution (évite le warn
+    // « Failed to resolve component »).
+    nuxt.options.vue.compilerOptions ??= {}
+    const existing = nuxt.options.vue.compilerOptions.isCustomElement
+    nuxt.options.vue.compilerOptions.isCustomElement = (tag: string) =>
+      VIDEOJS_CUSTOM_ELEMENTS.includes(tag) ||
+      (typeof existing === "function" ? existing(tag) : false)
+
+    if (options.css) {
+      const cssPath = resolve("./styles/main.css")
+      if (!nuxt.options.css.includes(cssPath)) {
+        nuxt.options.css.push(cssPath)
+      }
+    }
+
+    if (options.components) {
+      addComponentsDir({
+        path: resolve("./components"),
+        prefix: "", // pas de préfixe : QBtn.vue → <q-btn>
+        pathPrefix: false, // pas de préfixe par sous-dossier
+        ignore: ["**/internal/**"], // composants internes : non auto-importés
+      })
+    }
+
+    // « Retour » navigateur → ferme l'overlay ouvert (dialog, sheet, sidebar…)
+    // addPluginTemplate : le template est compilé dans l'app (où #imports existe),
+    // évitant une dépendance `nuxt` dans ce package pour les types du plugin.
+    if (options.overlayBack) {
+      addPluginTemplate({
+        filename: "dnax-ui-overlay-back.mjs",
+        mode: "client",
+        getContents: () => `
+import { defineNuxtPlugin } from "#imports"
+import { installOverlayBackHandler } from "@dnax/ui/runtime"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  installOverlayBackHandler(nuxtApp.$router)
+})
+`,
+      })
+    }
+  },
+})

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@dnax/ui",
+  "version": "0.0.1",
+  "module": "index.ts",
+  "description": "UI design System",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./runtime": "./index.ts",
+    "./module": "./module.ts",
+    "./styles/main.css": "./styles/main.css"
+  },
+  "scripts": {
+    "generate": "bun scripts/generate-exports.ts"
+  },
+  "private": false,
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^7",
+    "vue": "^3.5.41"
+  },
+  "dependencies": {
+    "@iconify/vue": "^5.0.1",
+    "@nuxt/kit": "^4.5.2",
+    "@videojs/html": "^10.0.0-beta.32",
+    "@vueuse/core": "^14.4.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel": "^8.5.0",
+    "embla-carousel-vue": "^8.5.0",
+    "fuse.js": "^7.1.0",
+    "shiki": "^3.0.0",
+    "swiper": "^14.2.0",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "vue-router": "^5.3.0",
+    "vue-sonner": "^2.0.9"
+  }
+}

package/scripts/generate-exports.ts

@@ -0,0 +1,56 @@
+/**
+ * Regenerates `index.ts` with one explicit export per component.
+ * Run with: bun scripts/generate-exports.ts
+ */
+import { readdir } from "node:fs/promises"
+
+const componentsDir = new URL("../components/", import.meta.url)
+const indexFile = new URL("../index.ts", import.meta.url)
+
+const toPascalCase = (name: string) =>
+  name
+    .split(/[-_]/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("")
+
+const files = (await readdir(componentsDir))
+  .filter((file) => file.endsWith(".vue"))
+  .sort()
+
+const exports = files
+  .map(
+    (file) =>
+      `export { default as ${toPascalCase(file.replace(/\.vue$/, ""))} } from "./components/${file}"`,
+  )
+  .join("\n")
+
+// Exports manuels (composables / helpers) — conservés à chaque régénération
+const manualExports = `
+export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet } from "./lib/q"
+export type {
+  DialogOptions,
+  DialogController,
+  BottomSheetOptions,
+  BottomSheetController,
+  NotifyOptions,
+  NotifyController,
+} from "./lib/q"
+export { platform, qBreakpoints } from "./lib/platform"
+export type { QPlatform } from "./lib/platform"
+export { screen } from "./lib/screen"
+export type { QScreen } from "./lib/screen"
+export { loading } from "./lib/loading"
+export type { LoadingOptions, QLoadingPlugin } from "./lib/loading"
+export {
+  registerOverlay,
+  unregisterOverlay,
+  hasOpenOverlays,
+  closeTopmostOverlay,
+  useOverlayBack,
+  installOverlayBackHandler,
+} from "./lib/overlayBack"
+export type { OverlayHandle } from "./lib/overlayBack"
+`
+
+await Bun.write(indexFile, `${exports}\n${manualExports}`)
+console.log(`✓ ${files.length} composant(s) exporté(s) dans index.ts`)