@dnax/ui 0.0.31 → 0.0.33

package/components/QBtnActions.vue

@@ -0,0 +1,257 @@
+<script lang="ts">
+// QBtnActions — bouton + menu d'actions intégré (type QBtnDropdown Quasar, mais
+// piloté par données : plus besoin de compose un QMenu/QList séparé).
+// <q-btn-actions label="Actions" :actions="acts" @select-action="onSelect" />
+// Chaque action : { label, value?, icon?, color?, description?, onClick? }.
+
+export interface BtnAction {
+  /** Libellé affiché dans le menu */
+  label: string
+  /** Valeur émise par @select-action ; si absente, l'action elle-même est émise */
+  value?: any
+  /** Icône Iconify à gauche (ex. : "lucide:pencil") */
+  icon?: string
+  /** Icône Iconify à droite */
+  iconRight?: string
+  /** Couleur du texte/icône (token — ex. "negative" pour une suppression — ou hex) */
+  color?: string
+  /** Sous-texte descriptif sous le label */
+  description?: string
+  /** Ligne de séparation affichée au-dessus de l'action */
+  separator?: boolean
+  /** Action désactivée */
+  disable?: boolean
+  /** Rappel local au clic (en plus de l'événement @select-action) */
+  onClick?: (action: BtnAction) => void
+}
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { colorValue } from "../lib/colors"
+import { icons } from "../lib/icons"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+import QBtn from "./QBtn.vue"
+
+interface Props {
+  /** Liste des actions du menu */
+  actions?: BtnAction[]
+  /** Libellé du bouton déclencheur (sinon icône seule) */
+  label?: string
+  /** Icône Iconify du déclencheur (défaut "lucide:ellipsis" si pas de label) */
+  icon?: string
+  /** Masque la flèche déroulante (n'apparaît de toute façon que s'il y a un label) */
+  noCaret?: boolean
+  /** Icône de la flèche déroulante */
+  dropdownIcon?: string
+  /** Alignement du menu sous le bouton */
+  align?: "left" | "right"
+  /** Largeur minimale du menu (ex. "200px") */
+  menuWidth?: string
+  // — API déclencheur (transmise à QBtn) —
+  color?: string
+  textColor?: string
+  size?: string
+  radius?: RadiusProp
+  flat?: boolean
+  outline?: boolean
+  unelevated?: boolean
+  dense?: boolean
+  round?: boolean
+  square?: boolean
+  noCaps?: boolean
+  stretch?: boolean
+  loading?: boolean
+  disable?: boolean
+  dark?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  actions: () => [],
+  noCaret: false,
+  dropdownIcon: "lucide:chevron-down",
+  align: "right",
+  menuWidth: "180px",
+  size: "md",
+  color: "primary",
+  flat: false,
+  outline: false,
+  unelevated: false,
+  dense: false,
+  round: false,
+  square: false,
+  noCaps: false,
+  stretch: false,
+  loading: false,
+  disable: false,
+  dark: false,
+})
+
+const emit = defineEmits<{
+  /** Action sélectionnée — payload : `value` de l'action (ou l'action si pas de value) */
+  "select-action": [value: any]
+}>()
+
+const open = ref(false)
+const rootEl = ref<HTMLElement | null>(null)
+
+const canOpen = computed(() => !props.disable && !props.loading && props.actions.length > 0)
+
+// Icône par défaut : « … » si le déclencheur est en icône seule (pas de label)
+const triggerIcon = computed(() => props.icon ?? (props.label ? undefined : icons.ellipsis))
+
+// Flèche déroulante : seulement avec un label (bouton icône seule = pas de caret)
+const showCaret = computed(() => !props.noCaret && !!props.label)
+
+const triggerClasses = computed(() => [
+  "q-btn-actions__trigger",
+  open.value && "q-btn-actions__trigger--open",
+])
+
+const effectiveRadius = useRadius("QBtnActions", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const panelStyle = computed<Record<string, string>>(() => ({
+  minWidth: props.menuWidth,
+  ...(roundedStyle.value ?? {}),
+}))
+
+// ═════════ Ouverture / fermeture ═════════
+const toggle = () => (open.value ? close() : openMenu())
+
+const openMenu = async () => {
+  if (!canOpen.value) return
+  open.value = true
+  await nextTick()
+  ;(rootEl.value?.querySelector(".q-btn-actions__item:not(:disabled)") as HTMLElement | null)?.focus()
+}
+
+const close = () => {
+  if (!open.value) return
+  open.value = false
+}
+
+// Clic extérieur → ferme
+const onDocMousedown = (e: MouseEvent) => {
+  if (rootEl.value && !rootEl.value.contains(e.target as Node)) close()
+}
+
+// Clavier : flèches/Home/End dans le menu, Échap ferme (focus revient au trigger)
+const onKeydown = (e: KeyboardEvent) => {
+  if (!open.value) return
+  if (e.key === "Escape") {
+    e.preventDefault()
+    close()
+    ;(rootEl.value?.querySelector(".q-btn-actions__trigger") as HTMLElement | null)?.focus()
+    return
+  }
+  if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return
+  const items = Array.from(
+    rootEl.value?.querySelectorAll(".q-btn-actions__item:not(:disabled)") ?? [],
+  ) as HTMLElement[]
+  if (!items.length) return
+  const current = items.indexOf(document.activeElement as HTMLElement)
+  let next = current
+  if (e.key === "ArrowDown") next = (current + 1) % items.length
+  else if (e.key === "ArrowUp") next = (current - 1 + items.length) % items.length
+  else if (e.key === "Home") next = 0
+  else if (e.key === "End") next = items.length - 1
+  e.preventDefault()
+  items[next]?.focus()
+}
+
+const onSelect = (action: BtnAction) => {
+  if (action.disable) return
+  action.onClick?.(action)
+  close()
+  emit("select-action", action.value !== undefined ? action.value : action)
+}
+
+/** Entrée « séparateur seul » ({ separator: true } sans label/icône) : simple trait, pas de bouton cliquable */
+const isSeparatorOnly = (action: BtnAction): boolean =>
+  !!action.separator && !action.label && !action.icon && !action.iconRight && !action.description
+
+const itemStyle = (action: BtnAction) =>
+  action.color ? { color: colorValue(action.color) } : undefined
+
+onMounted(() => {
+  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown)
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+})
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="q-btn-actions"
+    :class="[`q-btn-actions--align-${align}`, dark && 'dark']"
+    @keydown="onKeydown"
+  >
+    <QBtn
+      class="q-btn-actions__trigger"
+      :class="triggerClasses"
+      :label="label"
+      :icon="triggerIcon"
+      :color="color"
+      :text-color="textColor"
+      :size="size"
+      :radius="radius"
+      :flat="flat"
+      :outline="outline"
+      :unelevated="unelevated"
+      :dense="dense"
+      :round="round"
+      :square="square"
+      :no-caps="noCaps"
+      :stretch="stretch"
+      :loading="loading"
+      :disable="disable"
+      :aria-haspopup="'menu'"
+      :aria-expanded="open ? 'true' : 'false'"
+      @click="toggle"
+    >
+      <Icon
+        v-if="showCaret"
+        :icon="dropdownIcon"
+        class="q-btn-actions__caret"
+        :class="{ 'q-btn-actions__caret--open': open }"
+        aria-hidden="true"
+      />
+    </QBtn>
+
+    <Transition name="q-popup">
+      <div
+        v-if="open"
+        class="q-btn-actions__panel"
+        role="menu"
+        :aria-label="label ?? 'Actions'"
+        :style="panelStyle"
+      >
+        <template v-for="(action, i) in actions" :key="i">
+          <div v-if="action.separator" class="q-btn-actions__separator" role="separator" />
+          <button
+            v-if="!isSeparatorOnly(action)"
+            type="button"
+            role="menuitem"
+            class="q-btn-actions__item"
+            :class="{ 'q-btn-actions__item--disabled': action.disable }"
+            :disabled="action.disable"
+            :style="itemStyle(action)"
+            @click="onSelect(action)"
+          >
+            <Icon :icon="action.icon" v-if="action.icon" class="q-btn-actions__item-icon" aria-hidden="true" />
+            <span class="q-btn-actions__item-text">
+              <span class="q-btn-actions__item-label">{{ action.label }}</span>
+              <span v-if="action.description" class="q-btn-actions__item-desc">{{ action.description }}</span>
+            </span>
+            <Icon :icon="action.iconRight" v-if="action.iconRight" class="q-btn-actions__item-icon" aria-hidden="true" />
+          </button>
+        </template>
+      </div>
+    </Transition>
+  </div>
+</template>

package/components/QSidebarMenuButton.vue

@@ -1,16 +1,26 @@
 <script setup lang="ts">
 // QSidebarMenuButton — bouton/lien de menu (équivalent SidebarMenuButton).
+// Avec `to`, le bouton devient un lien routeur : navigation au clic + état actif
+// automatique selon la route courante (pattern QRouteTab).
 import { computed } from "vue"
 import { Icon } from "@iconify/vue"
 import { cn } from "../lib/utils"
+import { useRoute, useRouter } from "vue-router"
+import type { RouteLocationRaw } from "vue-router"
 
 interface Props {
   label?: string
   /** Icône Iconify (ex. : "lucide:settings") */
   icon?: string
-  /** Lien natif (<a>) ; sinon bouton */
+  /** Lien natif (<a href>) — sans routeur */
   href?: string
-  /** État actif */
+  /** Destination routeur : rend un lien et active le bouton selon la route courante */
+  to?: RouteLocationRaw
+  /** Match exact (path + hash) — sinon préfixe de segment de chemin */
+  exact?: boolean
+  /** router.replace au lieu de router.push */
+  replace?: boolean
+  /** État actif manuel (ignoré quand `to` est fourni — l'activation suit la route) */
   active?: boolean
   activeClass?: string
   disable?: boolean
@@ -20,35 +30,75 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   active: false,
+  exact: false,
+  replace: false,
   activeClass: "",
   disable: false,
 })
 
 const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
+// Routeur optionnel : sans router installé, `to` dégrade en simple bouton (@click)
+let router: ReturnType<typeof useRouter> | undefined
+let route: ReturnType<typeof useRoute> | undefined
+try {
+  router = useRouter()
+  route = useRoute()
+}
+catch {
+  router = undefined
+  route = undefined
+}
+
+// La route courante matche-t-elle `to` ? (même logique que QRouteTab)
+const matches = computed(() => {
+  if (!router || !route || !props.to) return false
+  const resolved = router.resolve(props.to)
+  if (props.exact) {
+    return resolved.path === route.path && resolved.hash === route.hash
+  }
+  const prefix = resolved.path.endsWith("/") ? resolved.path : resolved.path + "/"
+  return route.path === resolved.path || route.path.startsWith(prefix)
+})
+
+const effectiveActive = computed(() => (props.to ? matches.value : props.active))
+
+const resolvedHref = computed(() => {
+  if (props.href) return props.href
+  if (props.to && router) return router.resolve(props.to).href
+  return undefined
+})
+
+const tag = computed(() => (resolvedHref.value ? "a" : "button"))
+
 const buttonClasses = computed(() =>
   cn(
     "q-sidebar__menu-button",
-    props.active && "q-sidebar__menu-button--active",
-    props.active && props.activeClass,
+    effectiveActive.value && "q-sidebar__menu-button--active",
+    effectiveActive.value && props.activeClass,
     props.disable && "q-sidebar__menu-button--disabled",
   ),
 )
 
 const onClick = (e: MouseEvent) => {
   if (props.disable) return
+  if (props.to && router && !e.defaultPrevented) {
+    e.preventDefault()
+    if (props.replace) router.replace(props.to)
+    else router.push(props.to)
+  }
   emit("click", e)
 }
 </script>
 
 <template>
   <component
-    :is="href ? 'a' : 'button'"
-    :href="href || undefined"
-    :disabled="href ? undefined : disable"
+    :is="tag"
+    :href="resolvedHref"
+    :disabled="tag === 'button' ? disable : undefined"
     class="q-sidebar__menu-button"
     :class="buttonClasses"
-    :aria-current="active ? 'page' : undefined"
+    :aria-current="effectiveActive ? 'page' : undefined"
     @click="onClick"
   >
     <Icon :icon="icon" v-if="icon" class="q-sidebar__menu-button-icon" aria-hidden="true" />

package/index.ts

@@ -17,6 +17,7 @@ export { default as QBottomSheetHeader } from "./components/QBottomSheetHeader.v
 export { default as QBottomSheetProvider } from "./components/QBottomSheetProvider.vue"
 export { default as QBottomSheetTrigger } from "./components/QBottomSheetTrigger.vue"
 export { default as QBtn } from "./components/QBtn.vue"
+export { default as QBtnActions } from "./components/QBtnActions.vue"
 export { default as QBtnGroup } from "./components/QBtnGroup.vue"
 export { default as QBubble } from "./components/QBubble.vue"
 export { default as QBubbleContent } from "./components/QBubbleContent.vue"

package/lib/icons.ts

@@ -14,6 +14,8 @@ export const icons = {
   chevronUp: "lucide:chevron-up",
   chevronsLeft: "lucide:chevrons-left",
   chevronsRight: "lucide:chevrons-right",
+  ellipsis: "lucide:ellipsis",
+  ellipsisVertical: "lucide:ellipsis-vertical",
   copy: "lucide:copy",
   eye: "lucide:eye",
   eyeOff: "lucide:eye-off",

package/package.json

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

package/styles/main.css

@@ -306,6 +306,7 @@ html.dark body {
 .dark .q-select__popup,
 .dark .q-autocomplete__popup,
 .dark .q-nav-menu__panel,
+.dark .q-btn-actions__panel,
 .dark .q-dialog__content,
 .dark .q-loading__box,
 .dark .q-file-picker__row {
@@ -313,6 +314,15 @@ html.dark body {
   color: var(--foreground);
 }
 
+.dark .q-btn-actions__item:hover,
+.dark .q-btn-actions__item:focus-visible {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
+.dark .q-btn-actions__separator {
+  background-color: rgb(255 255 255 / 0.14);
+}
+
 .dark .q-table {
   color: var(--foreground);
 }
@@ -2434,6 +2444,110 @@ html.dark body {
   flex: 1 1 auto;
 }
 
+/* ===== QBtnActions ===== */
+.q-btn-actions {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.q-btn-actions__caret {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.q-btn-actions__caret--open {
+  transform: rotate(180deg);
+}
+
+.q-btn-actions__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  z-index: 1200;
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid rgb(0 0 0 / 0.12);
+  border-radius: var(--q-radius, 6px);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
+}
+
+.q-btn-actions--align-left .q-btn-actions__panel {
+  left: 0;
+}
+
+.q-btn-actions--align-right .q-btn-actions__panel {
+  right: 0;
+}
+
+.q-btn-actions__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.35;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+}
+
+.q-btn-actions__item:hover,
+.q-btn-actions__item:focus-visible {
+  background-color: rgb(0 0 0 / 0.06);
+  outline: none;
+}
+
+.q-btn-actions__item--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.q-btn-actions__item-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.q-btn-actions__item-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.q-btn-actions__item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.q-btn-actions__item-desc {
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.q-btn-actions__separator {
+  height: 1px;
+  margin: 4px 6px;
+  background-color: rgb(0 0 0 / 0.1);
+}
+
+.q-popup-enter-active {
+  animation: q-popup-in 0.12s ease;
+}
+
+.q-popup-leave-active {
+  animation: q-popup-in 0.1s ease reverse;
+}
+
 /* ===== QImg ===== */
 .q-img {
   position: relative;