@dnax/ui 0.0.1

package/README.md

@@ -0,0 +1,15 @@
+# ui
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.4.1. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/components/QAccordion.vue

@@ -0,0 +1,68 @@
+<script lang="ts">
+// QAccordion — accordéon type Accordion shadcn-vue (reka-ui), style Quasar.
+// <q-accordion v-model type="single|multiple" collapsible> + QAccordionItem/Trigger/Content
+import type { InjectionKey } from "vue"
+
+export interface AccordionContext {
+  isOpen: (value: string) => boolean
+  toggle: (value: string) => void
+}
+
+export const qAccordionKey: InjectionKey<AccordionContext> = Symbol("q-accordion")
+
+export interface AccordionItemContext {
+  value: string
+  uid: string
+}
+
+export const qAccordionItemKey: InjectionKey<AccordionItemContext> = Symbol("q-accordion-item")
+</script>
+
+<script setup lang="ts">
+import { provide } from "vue"
+
+interface Props {
+  /** Valeur(s) ouverte(s) : string (single) ou string[] (multiple) */
+  modelValue?: string | string[]
+  /** single (un seul ouvert) | multiple */
+  type?: "single" | "multiple"
+  /** En single : permet de refermer l'item ouvert */
+  collapsible?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "single",
+  collapsible: false,
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: string | string[] | undefined] }>()
+
+const isOpen = (value: string): boolean => {
+  if (props.type === "multiple") return (props.modelValue as string[] | undefined)?.includes(value) ?? false
+  return props.modelValue === value
+}
+
+const toggle = (value: string) => {
+  if (props.type === "multiple") {
+    const list = (props.modelValue as string[] | undefined) ?? []
+    emit(
+      "update:modelValue",
+      list.includes(value) ? list.filter((v) => v !== value) : [...list, value],
+    )
+  }
+  else if (props.modelValue === value) {
+    if (props.collapsible) emit("update:modelValue", undefined)
+  }
+  else {
+    emit("update:modelValue", value)
+  }
+}
+
+provide<AccordionContext>(qAccordionKey, { isOpen, toggle })
+</script>
+
+<template>
+  <div class="q-accordion">
+    <slot />
+  </div>
+</template>

package/components/QAccordionContent.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// QAccordionContent — contenu repliable animé (pattern shadcn/reka-ui).
+// Animation de hauteur mesurée (scrollHeight) : height 0 ↔ hauteur du contenu,
+// overflow hidden → contenu invisible quand réduit (aucun débordement).
+import { computed, inject, nextTick, onMounted, ref, watch } from "vue"
+import { qAccordionItemKey, qAccordionKey } from "./QAccordion.vue"
+
+const accordion = inject(qAccordionKey, null)
+const item = inject(qAccordionItemKey, null)
+
+const isOpen = computed(() => accordion?.isOpen(item?.value ?? "") ?? false)
+
+const rootEl = ref<HTMLElement | null>(null)
+const innerEl = ref<HTMLElement | null>(null)
+const contentHeight = ref(0)
+const measured = ref(false)
+
+// Hauteur mesurée du contenu (padding compris)
+const measure = () => {
+  const inner = innerEl.value
+  if (inner) {
+    contentHeight.value = inner.scrollHeight
+    measured.value = true
+  }
+}
+
+const rootStyle = computed<Record<string, string> | undefined>(() => {
+  if (!isOpen.value) return { height: "0px" }
+  return measured.value ? { height: `${contentHeight.value}px` } : undefined
+})
+
+// À l'ouverture : mesurer puis animer 0 → hauteur
+watch(isOpen, async (open) => {
+  if (open) {
+    await nextTick()
+    measure()
+  }
+})
+
+// À la fin de l'animation d'ouverture : height auto (le contenu peut grandir)
+const onTransitionEnd = () => {
+  if (isOpen.value && rootEl.value) rootEl.value.style.height = "auto"
+}
+
+onMounted(measure)
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    :id="item?.uid"
+    class="q-accordion__content"
+    :class="{ 'q-accordion__content--open': isOpen }"
+    :style="rootStyle"
+    role="region"
+    @transitionend="onTransitionEnd"
+  >
+    <div ref="innerEl" class="q-accordion__content-inner">
+      <slot />
+    </div>
+  </div>
+</template>

package/components/QAccordionItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// QAccordionItem — item de l'accordéon (équivalent AccordionItem). Fournit value + uid aux enfants.
+import { provide } from "vue"
+import { qAccordionItemKey, type AccordionItemContext } from "./QAccordion.vue"
+
+let itemSeq = 0
+
+interface Props {
+  /** Identifiant de l'item (lié au v-model de l'accordéon) */
+  value: string
+}
+
+const props = defineProps<Props>()
+
+const uid = `q-acc-${itemSeq++}`
+
+provide<AccordionItemContext>(qAccordionItemKey, { value: props.value, uid })
+</script>
+
+<template>
+  <div class="q-accordion__item">
+    <slot />
+  </div>
+</template>

package/components/QAccordionTrigger.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// QAccordionTrigger — bouton d'ouverture (équivalent AccordionTrigger).
+import { computed, inject } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { qAccordionItemKey, qAccordionKey } from "./QAccordion.vue"
+
+interface Props {
+  label?: string
+  /** Icône Iconify du chevron (défaut : lucide:chevron-down) */
+  expandIcon?: string
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disable: false,
+})
+
+const accordion = inject(qAccordionKey, null)
+const item = inject(qAccordionItemKey, null)
+
+const isOpen = computed(() => accordion?.isOpen(item?.value ?? "") ?? false)
+
+const toggle = () => {
+  if (props.disable || !item) return
+  accordion?.toggle(item.value)
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="q-accordion__trigger"
+    :class="{ 'q-accordion__trigger--open': isOpen }"
+    :disabled="disable"
+    :aria-expanded="isOpen ? 'true' : 'false'"
+    :aria-controls="item?.uid"
+    @click="toggle"
+  >
+    <span class="q-accordion__trigger-content">
+      <span v-if="label" class="q-accordion__trigger-label">{{ label }}</span>
+      <slot />
+    </span>
+    <Icon
+      :icon="expandIcon || icons.chevronDown"
+      class="q-accordion__trigger-icon"
+      :class="{ 'q-accordion__trigger-icon--rotated': isOpen }"
+      aria-hidden="true"
+    />
+  </button>
+</template>

package/components/QActionSheet.vue

@@ -0,0 +1,159 @@
+<script lang="ts">
+// QActionSheet — action sheet type iOS : <q-action-sheet v-model="open" :options="opts" @select="onSelect" />
+// Options passées en props, événement select à la sélection (ferme puis émet).
+
+export interface ActionSheetOption {
+  /** Libellé affiché */
+  label: string
+  /** Valeur émise par @select ; si absente, l'option elle-même est émise */
+  value?: any
+  /** Icône Iconify à gauche (ex. : "lucide:star") */
+  icon?: string
+  /** Icône Iconify à droite */
+  iconRight?: string
+  /** Couleur du texte (token ou hex) */
+  color?: string
+  /** Sous-texte descriptif */
+  description?: string
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { colorValue } from "../lib/colors"
+import { useOverlayBack } from "../lib/overlayBack"
+
+interface Props {
+  /** Ouvert (v-model) */
+  modelValue?: boolean
+  /** Options de l'action sheet */
+  options?: ActionSheetOption[]
+  /** Titre discret au-dessus des options */
+  title?: string
+  /** Bouton Annuler : false pour masquer, string pour le libellé */
+  cancel?: boolean | string
+  /** Ne se ferme ni au backdrop ni à Échap */
+  persistent?: boolean
+  dark?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  options: () => [],
+  cancel: true,
+  persistent: false,
+  dark: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  /** Valeur de l'option sélectionnée (ou l'option si pas de value) */
+  select: [value: any]
+  /** Fermeture sans sélection (backdrop, Échap, Annuler) */
+  cancel: []
+}>()
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+})
+
+// « Retour » navigateur → ferme l'action sheet au lieu de naviguer
+useOverlayBack(open, () => { open.value = false }, "QActionSheet")
+
+const cancelLabel = computed(() => (typeof props.cancel === "string" ? props.cancel : "Annuler"))
+
+// Échap + verrouillage du scroll du body
+const onDocKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && open.value && !props.persistent) dismiss()
+}
+
+watch(open, (v) => {
+  if (typeof document !== "undefined") document.body.style.overflow = v ? "hidden" : ""
+})
+
+onMounted(() => {
+  if (typeof document !== "undefined") document.addEventListener("keydown", onDocKeydown)
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") {
+    document.removeEventListener("keydown", onDocKeydown)
+    document.body.style.overflow = ""
+  }
+})
+
+const onSelect = (opt: ActionSheetOption) => {
+  open.value = false
+  emit("select", opt.value !== undefined ? opt.value : opt)
+}
+
+const dismiss = () => {
+  open.value = false
+  emit("cancel")
+}
+
+const onOverlayClick = () => {
+  if (!props.persistent) dismiss()
+}
+
+const getKey = (opt: ActionSheetOption, i: number) => String(opt.value ?? `opt-${i}`)
+
+const optionStyle = (opt: ActionSheetOption) =>
+  opt.color ? { color: colorValue(opt.color) } : undefined
+
+const panelClasses = computed(() => [
+  "q-action-sheet__panel",
+  props.dark && "q-action-sheet__panel--dark",
+])
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="q-bs">
+      <div
+        v-if="open"
+        class="q-action-sheet__overlay"
+        @click="onOverlayClick"
+      >
+        <div
+          class="q-action-sheet__panel"
+          :class="panelClasses"
+          role="dialog"
+          aria-modal="true"
+          @click.stop
+        >
+          <h2 v-if="title" class="q-action-sheet__title">{{ title }}</h2>
+
+          <div class="q-action-sheet__options" role="listbox">
+            <button
+              v-for="(opt, i) in options"
+              :key="getKey(opt, i)"
+              type="button"
+              role="option"
+              class="q-action-sheet__option"
+              :style="optionStyle(opt)"
+              @click="onSelect(opt)"
+            >
+              <Icon :icon="opt.icon" v-if="opt.icon" class="q-action-sheet__option-icon" aria-hidden="true" />
+              <span class="q-action-sheet__option-text">
+                <span class="q-action-sheet__option-label">{{ opt.label }}</span>
+                <span v-if="opt.description" class="q-action-sheet__option-description">{{ opt.description }}</span>
+              </span>
+              <Icon :icon="opt.iconRight" v-if="opt.iconRight" class="q-action-sheet__option-icon" aria-hidden="true" />
+            </button>
+          </div>
+
+          <button
+            v-if="cancel !== false"
+            type="button"
+            class="q-action-sheet__cancel"
+            @click="dismiss"
+          >
+            {{ cancelLabel }}
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/components/QApp.vue

@@ -0,0 +1,8 @@
+<template>
+<div class="q-app">
+  <slot></slot>
+</div>
+</template>
+<script setup>
+
+</script>