@dnax/ui 0.0.1

package/components/QFilePicker.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+// QFilePicker — API Quasar : <q-file-picker v-model="files" multiple label="Pièces jointes" />
+// Sélection de fichiers (input masqué) : aperçu vignette pour les images,
+// icône typée + nom + taille sinon ; validation (type, taille, nombre).
+import { computed, onBeforeUnmount, reactive, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Fichier(s) sélectionné(s) — File (simple) ou File[] (multiple) */
+  modelValue?: File | File[] | null
+  /** Autorise plusieurs fichiers */
+  multiple?: boolean
+  /** Types acceptés (mêmes règles qu'un input file ; vide = tout) */
+  accept?: string
+  /** Taille max en octets (0 = illimité) */
+  maxFileSize?: number
+  /** Nombre max de fichiers (0 = illimité) */
+  maxFiles?: number
+  /** Label du champ */
+  label?: string
+  /** Texte du bouton d'ajout (défaut : "Ajouter un fichier" / "Ajouter des fichiers") */
+  addLabel?: string
+  /** Aide affichée sous la liste */
+  hint?: string
+  /** État d'erreur externe */
+  error?: boolean
+  /** Message d'erreur (surcharge l'erreur interne de validation) */
+  errorMessage?: string
+  disable?: boolean
+  readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  multiple: false,
+  accept: "",
+  maxFileSize: 0,
+  maxFiles: 0,
+  label: "",
+  addLabel: "",
+  hint: "",
+  error: false,
+  errorMessage: "",
+  disable: false,
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: File | File[] | null]
+  add: [file: File]
+  remove: [file: File]
+  rejected: [file: File, reason: "size" | "type" | "count"]
+}>()
+
+const files = computed<File[]>(() => {
+  const v = props.modelValue
+  if (v == null) return []
+  return Array.isArray(v) ? v : [v]
+})
+
+// — Aperçus (images) : object URL par fichier, révoqué à la suppression / au remplacement —
+const previewUrls = reactive(new Map<File, string>())
+
+const previewUrl = (file: File): string => {
+  if (!previewUrls.has(file)) previewUrls.set(file, URL.createObjectURL(file))
+  return previewUrls.get(file)!
+}
+
+const revoke = (file: File) => {
+  const url = previewUrls.get(file)
+  if (url) {
+    URL.revokeObjectURL(url)
+    previewUrls.delete(file)
+  }
+}
+
+watch(files, (current) => {
+  for (const file of [...previewUrls.keys()]) {
+    if (!current.includes(file)) revoke(file)
+  }
+})
+
+onBeforeUnmount(() => {
+  for (const file of [...previewUrls.keys()]) revoke(file)
+})
+
+const isImage = (file: File) => file.type.startsWith("image/")
+
+// — Clé de rendu stable par instance de File (un File n'a pas d'id natif) —
+const fileIds = new WeakMap<File, number>()
+let fileIdCounter = 0
+const fileKey = (file: File): number => {
+  let id = fileIds.get(file)
+  if (id === undefined) {
+    id = ++fileIdCounter
+    fileIds.set(file, id)
+  }
+  return id
+}
+
+// — Icône par type de fichier (fallback générique) —
+const ARCHIVE_EXT = /\.(zip|rar|7z|tar|gz|bz2|xz|tgz)$/
+const SPREADSHEET_EXT = /\.(xlsx|xls|csv|ods|tsv)$/
+const CODE_EXT = /\.(json|js|mjs|cjs|ts|jsx|tsx|html?|xml|css|scss|sass|less|vue|py|java|c|cpp|h|hpp|sh|bash|yml|yaml|toml|ini|go|rs|php|rb|swift|kt)$/
+
+const iconFor = (file: File): string => {
+  const type = file.type
+  const name = file.name.toLowerCase()
+  if (type.startsWith("video/")) return icons.fileVideo
+  if (type.startsWith("audio/")) return icons.fileAudio
+  if (ARCHIVE_EXT.test(name) || /zip|compressed/.test(type)) return icons.fileArchive
+  if (SPREADSHEET_EXT.test(name) || type.includes("spreadsheet") || type.includes("excel")) {
+    return icons.fileSpreadsheet
+  }
+  if (CODE_EXT.test(name)) return icons.fileCode
+  if (type.startsWith("image/")) return icons.fileImage
+  return icons.fileText
+}
+
+const formatSize = (bytes: number): string => {
+  if (bytes >= 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} Go`
+  if (bytes >= 1024 * 1024) return `${Math.round(bytes / (1024 * 1024))} Mo`
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} Ko`
+  return `${bytes} o`
+}
+
+// — Validation —
+const acceptsFile = (file: File): boolean => {
+  const accept = props.accept.trim()
+  if (!accept) return true
+  const patterns = accept
+    .split(",")
+    .map((p) => p.trim().toLowerCase())
+    .filter(Boolean)
+  if (patterns.length === 0) return true
+  const name = file.name.toLowerCase()
+  return patterns.some((p) => {
+    if (p === "image/*") return file.type.startsWith("image/")
+    if (p === "video/*") return file.type.startsWith("video/")
+    if (p === "audio/*") return file.type.startsWith("audio/")
+    if (p.startsWith(".")) return name.endsWith(p)
+    if (p.includes("/")) return file.type.toLowerCase() === p
+    return false
+  })
+}
+
+const formatMaxSize = () => {
+  const bytes = props.maxFileSize
+  if (bytes >= 1024 * 1024) return `${Math.round(bytes / (1024 * 1024))} Mo`
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} Ko`
+  return `${bytes} octets`
+}
+
+const internalError = ref("")
+
+const showError = computed(() => props.error || internalError.value !== "")
+const effectiveErrorMessage = computed(() => props.errorMessage || internalError.value)
+
+// — Sélection —
+const inputEl = ref<HTMLInputElement | null>(null)
+
+const pick = () => {
+  if (props.disable || props.readonly) return
+  inputEl.value?.click()
+}
+
+const onInputChange = (e: Event) => {
+  const input = e.target as HTMLInputElement
+  const selected = Array.from(input.files ?? [])
+  input.value = "" // permet de re-sélectionner le même fichier
+  internalError.value = ""
+  if (selected.length > 0) addFiles(selected)
+}
+
+const addFiles = (incoming: File[]) => {
+  const current = files.value
+  const valid: File[] = []
+  const rejections: { file: File; reason: "size" | "type" | "count" }[] = []
+
+  for (const file of incoming) {
+    if (props.maxFileSize > 0 && file.size > props.maxFileSize) {
+      rejections.push({ file, reason: "size" })
+      continue
+    }
+    if (!acceptsFile(file)) {
+      rejections.push({ file, reason: "type" })
+      continue
+    }
+    valid.push(file)
+  }
+
+  const quota = props.maxFiles > 0 ? props.maxFiles : Infinity
+  const remaining = quota === Infinity ? Infinity : Math.max(0, quota - current.length)
+  const accepted = remaining === Infinity ? valid : valid.slice(0, remaining)
+  const overflow = remaining === Infinity ? [] : valid.slice(remaining)
+  for (const file of overflow) rejections.push({ file, reason: "count" })
+
+  if (accepted.length > 0) {
+    const next = props.multiple ? [...current, ...accepted] : accepted[0]!
+    emit("update:modelValue", next)
+    for (const file of accepted) emit("add", file)
+  }
+
+  if (rejections.length > 0) {
+    const reasons = [...new Set(rejections.map((r) => r.reason))]
+    const parts: string[] = []
+    if (reasons.includes("size")) parts.push(`Fichier trop lourd (max ${formatMaxSize()})`)
+    if (reasons.includes("type")) parts.push("Type de fichier non accepté")
+    if (reasons.includes("count")) parts.push(`Nombre maximum : ${props.maxFiles}`)
+    internalError.value = parts.join(" · ")
+    for (const r of rejections) emit("rejected", r.file, r.reason)
+  }
+}
+
+const removeFile = (file: File) => {
+  if (props.disable || props.readonly) return
+  revoke(file)
+  const next = files.value.filter((f) => f !== file)
+  emit("update:modelValue", props.multiple ? next : (next[0] ?? null))
+  emit("remove", file)
+}
+
+const canAdd = computed(() => {
+  if (props.disable || props.readonly) return false
+  if (!props.multiple && files.value.length > 0) return true // remplacement
+  if (props.maxFiles > 0 && files.value.length >= props.maxFiles) return false
+  return true
+})
+
+const defaultAddLabel = computed(() =>
+  props.addLabel || (props.multiple ? "Ajouter des fichiers" : "Ajouter un fichier"),
+)
+
+const containerClasses = computed(() => cn("q-file-picker", props.disable && "q-field--disabled"))
+</script>
+
+<template>
+  <div class="q-file-picker" :class="containerClasses">
+    <label v-if="label" class="q-field__label-stack">{{ label }}</label>
+
+    <div class="q-file-picker__list">
+      <div v-for="file in files" :key="fileKey(file)" class="q-file-picker__row">
+        <div class="q-file-picker__preview">
+          <img v-if="isImage(file)" class="q-file-picker__thumb" :src="previewUrl(file)" :alt="file.name" />
+          <Icon :icon="iconFor(file)" v-else class="q-file-picker__file-icon" />
+        </div>
+        <div class="q-file-picker__info">
+          <span class="q-file-picker__name">{{ file.name }}</span>
+          <span class="q-file-picker__size">{{ formatSize(file.size) }}</span>
+        </div>
+        <button
+          v-if="!disable && !readonly"
+          type="button"
+          class="q-file-picker__remove"
+          aria-label="Retirer le fichier"
+          @click="removeFile(file)"
+        >
+          <Icon :icon="icons.x" aria-hidden="true" />
+        </button>
+      </div>
+
+      <button
+        v-if="canAdd"
+        type="button"
+        class="q-file-picker__add"
+        :disabled="disable"
+        @click="pick"
+      >
+        <Icon :icon="icons.filePlus" class="q-file-picker__add-icon" />
+        <span class="q-file-picker__add-label">{{ defaultAddLabel }}</span>
+      </button>
+    </div>
+
+    <div class="q-field__bottom">
+      <div v-if="showError" class="q-field__error">
+        <slot name="error">{{ effectiveErrorMessage }}</slot>
+      </div>
+      <div v-else-if="hint || $slots.hint" class="q-field__hint">
+        <slot name="hint">{{ hint }}</slot>
+      </div>
+    </div>
+
+    <input
+      ref="inputEl"
+      type="file"
+      class="q-file-picker__input"
+      :accept="accept"
+      :multiple="multiple"
+      @change="onInputChange"
+    />
+  </div>
+</template>

package/components/QFooter.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+// QFooter — barre basse (safe-area bottom appliquée par styles/main.css : .q-app .q-footer)
+import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+
+interface Props {
+  /** Fixe la barre en bas de l'écran (sort du flux) */
+  fixed?: boolean
+  /** Ombre portée vers le haut */
+  elevated?: boolean
+  /** Masqué au scroll vers le bas, réaffiché au scroll vers le haut */
+  reveal?: boolean
+  /** Bordure supérieure */
+  bordered?: boolean
+  /** Fond translucide (frosted glass) : true = 70%, ou valeur % */
+  translucent?: boolean | number
+  /** Glassmorphism marqué : fond très translucide + flou fort + bordure claire */
+  glass?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fixed: false,
+  elevated: false,
+  reveal: false,
+  bordered: false,
+})
+
+const translucentStyle = computed<Record<string, string> | undefined>(() =>
+  props.translucent === true || typeof props.translucent === "number"
+    ? { "--q-translucent-opacity": `${typeof props.translucent === "number" ? props.translucent : 70}%` }
+    : undefined,
+)
+
+// reveal : écoute le scroll de la fenêtre
+const visible = ref(true)
+let lastY = 0
+
+const onScroll = () => {
+  if (typeof window === "undefined") return
+  const y = window.scrollY
+  visible.value = y <= 0 || y < lastY // haut de page ou scroll up → visible
+  lastY = y
+}
+
+onMounted(() => {
+  if (typeof window !== "undefined") {
+    window.addEventListener("scroll", onScroll, { passive: true })
+  }
+})
+onBeforeUnmount(() => {
+  if (typeof window !== "undefined") {
+    window.removeEventListener("scroll", onScroll)
+  }
+})
+</script>
+
+<template>
+  <footer
+    class="q-footer"
+    :class="{
+      'q-footer--fixed': fixed,
+      'q-footer--elevated': props.elevated,
+      'q-footer--bordered': props.bordered,
+      'q-footer--reveal': props.reveal,
+      'q-footer--reveal-hidden': props.reveal && !visible,
+      'q-footer--translucent': props.translucent === true || typeof props.translucent === 'number',
+      'q-footer--glass': props.glass,
+    }"
+    :style="translucentStyle"
+  >
+    <slot />
+  </footer>
+</template>

package/components/QGallery.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+// QGallery — galerie d'images avec sélection : <q-gallery v-model="sel" :images="imgs" multiple labels />
+// images : URLs (string) ou objets { src, label, description }.
+// v-model : item/URL (simple) ou tableau (multiple) ; la valeur renvoyée est l'item brut
+// passé dans `images` (string ou objet). Props : labels (nom + description sous l'image),
+// selectable, cols, max-selected, rounded, dense.
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+
+/** Une image normalisée de la galerie : URL + nom/description optionnels */
+export interface GalleryImage {
+  /** URL de l'image */
+  src: string
+  /** Nom affiché sous l'image (si labels) */
+  label?: string
+  /** Description affichée sous le nom (si labels) */
+  description?: string
+}
+
+type GalleryValue = string | GalleryImage
+
+interface Props {
+  /** Sélection : URL/item (simple) ou tableau (multiple) — v-model */
+  modelValue?: GalleryValue | GalleryValue[] | null
+  /** Liste des images : URLs ou objets JSON (les champs sont donnés par src-key/label-key/description-key) */
+  images?: (string | Record<string, unknown>)[]
+  /** Sélection multiple (v-model = tableau) */
+  multiple?: boolean
+  /** Affiche le nom et la description sous les images */
+  labels?: boolean
+  /** Champ des objets contenant l'URL de l'image (défaut "src") */
+  srcKey?: string
+  /** Champ des objets contenant le nom (défaut "label") */
+  labelKey?: string
+  /** Champ des objets contenant la description (défaut "description") */
+  descriptionKey?: string
+  /** Désactive la sélection (affichage seul) */
+  selectable?: boolean
+  /** Nombre de colonnes (défaut 4) */
+  cols?: number
+  /** Nombre max de sélections en mode multiple (0 = illimité) */
+  maxSelected?: number
+  /** Coins arrondis (défaut true) */
+  rounded?: boolean
+  /** Espacement réduit entre les images */
+  dense?: boolean
+  /** Animation au survol : zoom de l'image + ombre portée */
+  hover?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  images: () => [],
+  multiple: false,
+  labels: false,
+  srcKey: "src",
+  labelKey: "label",
+  descriptionKey: "description",
+  selectable: true,
+  cols: 4,
+  maxSelected: 0,
+  rounded: true,
+  dense: false,
+  hover: false,
+  class: "",
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: GalleryValue | GalleryValue[] | null]
+  select: [payload: { image: GalleryValue; index: number; selected: boolean }]
+}>()
+
+interface NormalizedImage extends GalleryImage {
+  /** L'objet brut original (renvoyé dans le v-model et @select) */
+  raw: GalleryValue
+}
+
+/** Normalise chaque entrée : extrait src/label/description via les clés, garde le brut */
+const items = computed<NormalizedImage[]>(() =>
+  props.images.map((img): NormalizedImage =>
+    typeof img === "string"
+      ? { src: img, raw: img }
+      : {
+          src: String(img[props.srcKey] ?? ""),
+          label: (img[props.labelKey] as string | undefined) ?? undefined,
+          description: (img[props.descriptionKey] as string | undefined) ?? undefined,
+          raw: img as unknown as GalleryValue,
+        },
+  ),
+)
+
+/** Comparaison entre une valeur du v-model et une image normalisée */
+const sameValue = (a: unknown, b: NormalizedImage): boolean =>
+  typeof a === "string" ? a === b.src : a === b.raw
+
+const selection = computed<GalleryValue[]>(() =>
+  props.multiple ? (Array.isArray(props.modelValue) ? props.modelValue : []) : [],
+)
+
+const isSelected = (item: NormalizedImage): boolean =>
+  props.multiple
+    ? selection.value.some((v) => sameValue(v, item))
+    : sameValue(props.modelValue, item)
+
+const isMaxed = computed(
+  () =>
+    props.multiple &&
+    props.maxSelected > 0 &&
+    selection.value.length >= props.maxSelected,
+)
+
+const toggle = (item: NormalizedImage, index: number) => {
+  if (!props.selectable) return
+  const wasSelected = isSelected(item)
+  let next: GalleryValue | GalleryValue[] | null
+
+  if (props.multiple) {
+    const arr = [...selection.value]
+    const i = arr.findIndex((v) => sameValue(v, item))
+    if (i >= 0) arr.splice(i, 1)
+    else if (!isMaxed.value) arr.push(item.raw)
+    next = arr
+  } else {
+    next = wasSelected ? null : item.raw
+  }
+
+  emit("update:modelValue", next)
+  emit("select", { image: item.raw, index, selected: !wasSelected })
+}
+</script>
+
+<template>
+  <div
+    class="q-gallery"
+    :class="cn(
+      !selectable && 'q-gallery--viewer',
+      dense && 'q-gallery--dense',
+      props.class,
+    )"
+    :style="{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }"
+  >
+    <div
+      v-for="(item, i) in items"
+      :key="`${item.src}-${i}`"
+      class="q-gallery__item"
+      :class="{
+        'q-gallery__item--rounded': rounded,
+        'q-gallery__item--selected': selectable && isSelected(item),
+        'q-gallery__item--disabled': !isSelected(item) && isMaxed,
+        'q-gallery__item--hover': hover,
+      }"
+      role="option"
+      :aria-selected="selectable && isSelected(item) ? 'true' : 'false'"
+      @click="toggle(item, i)"
+    >
+      <img
+        class="q-gallery__img"
+        :src="item.src"
+        :alt="item.label ?? `Image ${i + 1}`"
+        loading="lazy"
+      />
+      <span v-if="selectable && isSelected(item)" class="q-gallery__check" aria-hidden="true">
+        <Icon :icon="icons.check" />
+      </span>
+      <div v-if="labels" class="q-gallery__caption">
+        <div v-if="item.label" class="q-gallery__label">{{ item.label }}</div>
+        <div v-if="item.description" class="q-gallery__desc">{{ item.description }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.q-gallery {
+  display: grid;
+  gap: 10px;
+}
+.q-gallery--dense {
+  gap: 4px;
+}
+
+.q-gallery__item {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 1;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
+}
+.q-gallery__item--rounded {
+  border-radius: 12px;
+}
+.q-gallery__item--selected {
+  border-color: var(--primary);
+}
+.q-gallery__item--disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+.q-gallery--viewer .q-gallery__item {
+  cursor: default;
+}
+
+.q-gallery__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* animation au survol : zoom doux + ombre (prop hover) */
+.q-gallery__item--hover .q-gallery__img {
+  transition: transform 0.3s ease;
+}
+.q-gallery__item--hover:hover {
+  box-shadow: 0 10px 24px rgb(0 0 0 / 0.18);
+}
+.q-gallery__item--hover:hover .q-gallery__img {
+  transform: scale(1.06);
+}
+@media (prefers-reduced-motion: reduce) {
+  .q-gallery__item--hover .q-gallery__img {
+    transition: none;
+  }
+}
+
+/* coche de sélection (coin haut droit) */
+.q-gallery__check {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
+}
+.q-gallery__check svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* légende (nom + description) en bas de l'image */
+.q-gallery__caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 10px 8px;
+  background: linear-gradient(to top, rgb(0 0 0 / 0.72), transparent);
+  color: #fff;
+}
+.q-gallery__label {
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.q-gallery__desc {
+  font-size: 11.5px;
+  line-height: 1.35;
+  opacity: 0.85;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>

package/components/QGrid.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// QGrid — grille CSS (12 colonnes par défaut) : <q-grid :cols="12" gap="16px">
+// Breakpoints configurables via les variables CSS --q-grid-bp-* (:root par défaut).
+import { computed } from "vue"
+import { useGridBreakpoints } from "../lib/breakpoints"
+
+interface Props {
+  /** Nombre de colonnes (défaut : 12) */
+  cols?: number
+  /** Espacement (string CSS ou nombre px) */
+  gap?: string | number
+  rowGap?: string | number
+  columnGap?: string | number
+  /** Colonnes à partir du breakpoint sm / md / lg / xl */
+  colsSm?: number
+  colsMd?: number
+  colsLg?: number
+  colsXl?: number
+  /** Alignement vertical des cellules */
+  align?: "start" | "center" | "end" | "stretch"
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cols: 12,
+  gap: "16px",
+  align: "stretch",
+})
+
+const bp = useGridBreakpoints()
+
+const px = (v: string | number | undefined) =>
+  v === undefined ? undefined : typeof v === "number" ? `${v}px` : v
+
+const style = computed<Record<string, string>>(() => ({
+  "--q-grid-cols": String(props.cols),
+  "--q-grid-gap": px(props.gap)!,
+  ...(props.rowGap !== undefined ? { "--q-grid-row-gap": px(props.rowGap)! } : {}),
+  ...(props.columnGap !== undefined ? { "--q-grid-column-gap": px(props.columnGap)! } : {}),
+  alignItems: props.align,
+}))
+
+const classes = computed(() => ({
+  ...(bp.value.sm && props.colsSm ? { [`q-grid--cols-sm-${props.colsSm}`]: true } : {}),
+  ...(bp.value.md && props.colsMd ? { [`q-grid--cols-md-${props.colsMd}`]: true } : {}),
+  ...(bp.value.lg && props.colsLg ? { [`q-grid--cols-lg-${props.colsLg}`]: true } : {}),
+  ...(bp.value.xl && props.colsXl ? { [`q-grid--cols-xl-${props.colsXl}`]: true } : {}),
+}))
+</script>
+
+<template>
+  <div class="q-grid" :class="classes" :style="style">
+    <slot />
+  </div>
+</template>