@dnax/ui 0.0.32 → 0.0.34

package/components/QBtnActions.vue

@@ -0,0 +1,294 @@
+<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? }.
+// Le panneau est téléporté dans <body> en position fixed : il survit aux
+// contextes d'empilement/overflow (cellules sticky de table, scroll containers).
+
+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 : bord gauche du bouton ("left") ou bord droit ("right") */
+  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 panelEl = ref<HTMLElement | null>(null)
+/** Position fixed du panneau (téléporté dans <body>) */
+const panelPos = ref({ top: 0, left: 0, transform: "" })
+
+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>>(() => ({
+  top: `${panelPos.value.top}px`,
+  left: `${panelPos.value.left}px`,
+  transform: panelPos.value.transform,
+  minWidth: props.menuWidth,
+  ...(roundedStyle.value ?? {}),
+}))
+
+// ═════════ Positionnement (fixed, téléporté) ═════════
+const placePanel = () => {
+  const el = rootEl.value
+  if (!el || typeof document === "undefined") return
+  const rect = el.getBoundingClientRect()
+  if (props.align === "left") {
+    panelPos.value = { top: rect.bottom + 4, left: rect.left, transform: "none" }
+  }
+  else {
+    // bord droit du panneau aligné sur le bord droit du bouton
+    panelPos.value = { top: rect.bottom + 4, left: rect.right, transform: "translateX(-100%)" }
+  }
+}
+
+const enableTracking = () => {
+  window.addEventListener("resize", placePanel)
+  window.addEventListener("scroll", placePanel, true)
+}
+const disableTracking = () => {
+  window.removeEventListener("resize", placePanel)
+  window.removeEventListener("scroll", placePanel, true)
+}
+
+// ═════════ Ouverture / fermeture ═════════
+const toggle = () => (open.value ? close() : openMenu())
+
+const openMenu = async () => {
+  if (!canOpen.value) return
+  placePanel()
+  open.value = true
+  enableTracking()
+  await nextTick()
+  ;(panelEl.value?.querySelector(".q-btn-actions__item:not(:disabled)") as HTMLElement | null)?.focus()
+}
+
+const close = () => {
+  if (!open.value) return
+  open.value = false
+  disableTracking()
+}
+
+// Clic extérieur (bouton ET panneau téléporté) → ferme
+const onDocMousedown = (e: MouseEvent) => {
+  if (!open.value) return
+  const target = e.target as Node
+  if (rootEl.value?.contains(target) || panelEl.value?.contains(target)) return
+  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(
+    panelEl.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)
+  disableTracking()
+})
+</script>
+
+<template>
+  <div ref="rootEl" class="q-btn-actions" :class="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>
+
+    <Teleport to="body">
+      <Transition name="q-popup">
+        <div
+          v-if="open"
+          ref="panelEl"
+          class="q-btn-actions__panel"
+          role="menu"
+          :aria-label="label ?? 'Actions'"
+          :style="panelStyle"
+          @keydown="onKeydown"
+        >
+          <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>
+    </Teleport>
+  </div>
+</template>

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.32",
+  "version": "0.0.34",
   "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: fixed;
+  z-index: 3000;
+  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__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-fade-in 0.12s ease;
+}
+
+.q-popup-leave-active {
+  animation: q-popup-fade-in 0.1s ease reverse;
+}
+
+@keyframes q-popup-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 /* ===== QImg ===== */
 .q-img {
   position: relative;