@tekkare/romulus 0.1.70 → 0.1.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
RmCollapse - section repliable posee dans le flux, avec un compteur.
|
|
3
|
+
|
|
4
|
+
Un titre, un compteur de ce que la section contient, un chevron, et le
|
|
5
|
+
contenu en dessous. C'est le pendant en liste de `RmAccordionMenu`, qui ne
|
|
6
|
+
sait replier qu'un menu de navigation : ici la section ne porte pas des
|
|
7
|
+
entrees de nav mais n'importe quel contenu, et son intitule est une entete
|
|
8
|
+
de contenu, pas un lien.
|
|
9
|
+
|
|
10
|
+
L'entete est un `<button aria-expanded>` relie a son contenu par
|
|
11
|
+
`aria-controls` : la section est atteignable au clavier et annoncee comme
|
|
12
|
+
repliable. Le contenu replie est retire du DOM, il ne reste donc pas dans
|
|
13
|
+
l'ordre de tabulation.
|
|
14
|
+
|
|
15
|
+
Le compteur double le titre, il ne le remplace pas : « Prix » reste lisible
|
|
16
|
+
sans lui.
|
|
17
|
+
-->
|
|
18
|
+
<script setup lang="ts">
|
|
19
|
+
import { useId } from 'vue'
|
|
20
|
+
|
|
21
|
+
withDefaults(
|
|
22
|
+
defineProps<{
|
|
23
|
+
/** Intitule de la section. */
|
|
24
|
+
title: string
|
|
25
|
+
/** Nombre affiche dans la pastille. Absent, aucune pastille. */
|
|
26
|
+
count?: number | string
|
|
27
|
+
/** Icone Phosphor posee devant le titre. */
|
|
28
|
+
icon?: string
|
|
29
|
+
}>(),
|
|
30
|
+
{ count: undefined, icon: undefined },
|
|
31
|
+
)
|
|
32
|
+
|
|
33
|
+
/** Etat replie. Liable en `v-model` quand la page veut le piloter. */
|
|
34
|
+
const open = defineModel<boolean>({ default: true })
|
|
35
|
+
|
|
36
|
+
const bodyId = `rm-collapse-${useId()}`
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<template>
|
|
40
|
+
<section class="rm-collapse" :class="{ 'rm-collapse--open': open }">
|
|
41
|
+
<button
|
|
42
|
+
class="rm-collapse__head"
|
|
43
|
+
type="button"
|
|
44
|
+
:aria-expanded="open"
|
|
45
|
+
:aria-controls="bodyId"
|
|
46
|
+
@click="open = !open"
|
|
47
|
+
>
|
|
48
|
+
<!-- Le chevron est enveloppe : `RmIcon` rend l'icone Phosphor, dont la
|
|
49
|
+
racine ne porte pas l'identifiant de portee, et la regle de rotation
|
|
50
|
+
ne l'atteindrait pas. -->
|
|
51
|
+
<span class="rm-collapse__chevron">
|
|
52
|
+
<RmIcon name="CaretRight" :size="14" />
|
|
53
|
+
</span>
|
|
54
|
+
<RmIcon v-if="icon" class="rm-collapse__icon" :name="icon" :size="16" />
|
|
55
|
+
<span class="rm-collapse__title">{{ title }}</span>
|
|
56
|
+
<span v-if="count !== undefined" class="rm-collapse__count">{{ count }}</span>
|
|
57
|
+
</button>
|
|
58
|
+
|
|
59
|
+
<div v-if="open" :id="bodyId" class="rm-collapse__body">
|
|
60
|
+
<slot />
|
|
61
|
+
</div>
|
|
62
|
+
</section>
|
|
63
|
+
</template>
|
|
64
|
+
|
|
65
|
+
<style scoped>
|
|
66
|
+
.rm-collapse{align-self:stretch;display:flex;flex-direction:column;font-family:var(--font-sans);width:100%}.rm-collapse__head{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-semibold);gap:var(--space-8);padding:var(--space-8);text-align:left;width:100%}.rm-collapse__head:hover{background:var(--bg-hover)}.rm-collapse__head:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}.rm-collapse__chevron{color:var(--text-muted);display:inline-flex;flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.rm-collapse--open .rm-collapse__chevron{transform:rotate(90deg)}.rm-collapse__icon{color:var(--text-muted);flex-shrink:0}.rm-collapse__title{flex:1}.rm-collapse__count{background:var(--bg-surface-3);border-radius:999px;color:var(--text-secondary);flex-shrink:0;font-size:var(--font-11);font-weight:var(--weight-medium);min-width:20px;padding:1px var(--space-8);text-align:center}.rm-collapse__body{padding:var(--space-4) 0 var(--space-8)}
|
|
67
|
+
</style>
|
|
@@ -5,8 +5,12 @@ import { useRmDialog } from '../composables/useRmDialog'
|
|
|
5
5
|
export interface RmDrawerProps {
|
|
6
6
|
/** Whether the drawer is open */
|
|
7
7
|
modelValue: boolean
|
|
8
|
-
/**
|
|
9
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Largeur : une taille nommee (sm 360, md 480, lg 640, xl 860, full 100%),
|
|
10
|
+
* ou n'importe quelle largeur CSS quand aucune ne convient — le composant
|
|
11
|
+
* l'accepte deja, le type le disait mal.
|
|
12
|
+
*/
|
|
13
|
+
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {})
|
|
10
14
|
/** Position */
|
|
11
15
|
side?: 'right' | 'left'
|
|
12
16
|
/** Show overlay behind the drawer */
|