@tekkare/romulus 0.1.203 → 0.1.205
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
|
@@ -76,9 +76,16 @@ export interface RmHeaderTab {
|
|
|
76
76
|
hint?: string
|
|
77
77
|
/**
|
|
78
78
|
* Onglet present mais sans objet : grise, il ne se selectionne pas. Lu par
|
|
79
|
-
* RmRailPanel, ou un groupe de panneaux garde tous ses onglets en place
|
|
79
|
+
* RmRailPanel, ou un groupe de panneaux garde tous ses onglets en place, et
|
|
80
|
+
* par RmPageHeader, pour une section annoncee mais pas encore ouverte.
|
|
80
81
|
*/
|
|
81
82
|
disabled?: boolean
|
|
83
|
+
/**
|
|
84
|
+
* Mention courte posee apres le libelle (« Coming soon », « Beta ») : ce
|
|
85
|
+
* que l'onglet est, la ou `count` dit combien il contient. Lu par
|
|
86
|
+
* RmPageHeader.
|
|
87
|
+
*/
|
|
88
|
+
tag?: string
|
|
82
89
|
}
|
|
83
90
|
|
|
84
91
|
withDefaults(defineProps<{
|
|
@@ -81,22 +81,24 @@ const router = useRouter()
|
|
|
81
81
|
v-for="tab in tabs"
|
|
82
82
|
:key="tab.key"
|
|
83
83
|
class="rm-page-header__tab"
|
|
84
|
-
:class="{ 'rm-page-header__tab--active': tab.active }"
|
|
84
|
+
:class="{ 'rm-page-header__tab--active': tab.active, 'rm-page-header__tab--disabled': tab.disabled }"
|
|
85
85
|
type="button"
|
|
86
86
|
role="tab"
|
|
87
87
|
:aria-selected="tab.active ? 'true' : 'false'"
|
|
88
|
+
:aria-disabled="tab.disabled || undefined"
|
|
88
89
|
:title="tab.hint || undefined"
|
|
89
|
-
@click="emit('tab', tab.key)"
|
|
90
|
+
@click="!tab.disabled && emit('tab', tab.key)"
|
|
90
91
|
>
|
|
91
92
|
{{ tab.label }}
|
|
92
93
|
<span v-if="tab.count !== undefined && tab.count !== null" class="rm-page-header__tab-count">
|
|
93
94
|
{{ tab.count }}
|
|
94
95
|
</span>
|
|
96
|
+
<span v-if="tab.tag" class="rm-page-header__tab-tag">{{ tab.tag }}</span>
|
|
95
97
|
</button>
|
|
96
98
|
</div>
|
|
97
99
|
</header>
|
|
98
100
|
</template>
|
|
99
101
|
|
|
100
102
|
<style scoped>
|
|
101
|
-
.rm-page-header{backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg-surface-3) 80%,transparent);border-bottom:1px solid var(--border-default);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:var(--space-12);padding:var(--space-16) var(--space-32) var(--space-12);position:sticky;top:0;width:100%;z-index:95}.rm-page-header__row{align-items:center;align-self:stretch;display:flex;gap:var(--space-16)}.rm-page-header__back{background:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-page-header__heading{flex-grow:2;min-width:0}.rm-page-header__eyebrow{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium);margin:0 0 2px}.rm-page-header__title{flex-grow:2;font-family:var(--font-serif);font-size:var(--font-32);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0;min-width:0}.rm-page-header__title :deep(h1),.rm-page-header__title :deep(h2),.rm-page-header__title :deep(p){font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-page-header__actions{align-items:center;display:flex;flex:0 0 auto;gap:var(--space-16)}.rm-page-header__tabs{display:flex;gap:var(--space-8);margin-bottom:-13px;overflow-x:auto}.rm-page-header__tab{background:none;border:none;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;color:var(--text-muted);cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:500;line-height:1.6;padding:var(--space-8) var(--space-16) var(--space-10);transition:background-color .3s,color .15s;white-space:nowrap}.rm-page-header__tab:hover{color:var(--color-primary)}.rm-page-header__tab-count{background:color-mix(in srgb,currentColor 12%,transparent);border-radius:var(--radius-pill);
|
|
103
|
+
.rm-page-header{backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg-surface-3) 80%,transparent);border-bottom:1px solid var(--border-default);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:var(--space-12);padding:var(--space-16) var(--space-32) var(--space-12);position:sticky;top:0;width:100%;z-index:95}.rm-page-header__row{align-items:center;align-self:stretch;display:flex;gap:var(--space-16)}.rm-page-header__back{background:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-page-header__heading{flex-grow:2;min-width:0}.rm-page-header__eyebrow{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium);margin:0 0 2px}.rm-page-header__title{flex-grow:2;font-family:var(--font-serif);font-size:var(--font-32);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0;min-width:0}.rm-page-header__title :deep(h1),.rm-page-header__title :deep(h2),.rm-page-header__title :deep(p){font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-page-header__actions{align-items:center;display:flex;flex:0 0 auto;gap:var(--space-16)}.rm-page-header__tabs{display:flex;gap:var(--space-8);margin-bottom:-13px;overflow-x:auto}.rm-page-header__tab{background:none;border:none;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;color:var(--text-muted);cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:500;line-height:1.6;padding:var(--space-8) var(--space-16) var(--space-10);transition:background-color .3s,color .15s;white-space:nowrap}.rm-page-header__tab:hover{color:var(--color-primary)}.rm-page-header__tab-count{background:color-mix(in srgb,currentColor 12%,transparent);border-radius:var(--radius-pill);font-size:var(--font-12)}.rm-page-header__tab-count,.rm-page-header__tab-tag{display:inline-block;font-weight:600;line-height:1.5;margin-left:var(--space-6);padding:0 var(--space-6)}.rm-page-header__tab-tag{border:1px solid;border-radius:var(--radius-pill);font-size:var(--font-11,11px);letter-spacing:.02em;vertical-align:1px}.rm-page-header__tab--disabled{cursor:not-allowed;opacity:.6}.rm-page-header__tab--disabled,.rm-page-header__tab--disabled:hover{color:var(--text-disabled,var(--text-muted))}.rm-page-header__tab--active{background:color-mix(in srgb,var(--color-primary) 6%,transparent);border-bottom-color:var(--color-primary);color:var(--color-primary);font-weight:600}
|
|
102
104
|
</style>
|
|
@@ -45,7 +45,7 @@ withDefaults(defineProps<{
|
|
|
45
45
|
<template>
|
|
46
46
|
<div
|
|
47
47
|
class="rm-product-card"
|
|
48
|
-
:class="[`rm-product-card--${accent}`,
|
|
48
|
+
:class="[`rm-product-card--${accent}`, overlay ? 'rm-product-card--overlay' : 'rm-product-card--padded']"
|
|
49
49
|
:style="background
|
|
50
50
|
? { backgroundImage: `linear-gradient(90deg, rgba(var(--surface-rgb), .9) 41%, rgba(var(--surface-rgb), 0) 100%), url('${background}')` }
|
|
51
51
|
: undefined"
|
|
@@ -67,5 +67,5 @@ withDefaults(defineProps<{
|
|
|
67
67
|
</template>
|
|
68
68
|
|
|
69
69
|
<style scoped>
|
|
70
|
-
.rm-product-card{align-self:stretch;background-color:var(--bg-surface);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:var(--radius-xl,12px);box-shadow:0 6px 8px 0 rgba(var(--shadow-rgb,30 41 59),.1);display:flex;flex-direction:column;position:relative}.rm-product-card--padded{padding:var(--space-40)}.rm-product-card--healthcare{border:1px solid rgba(var(--healthcare-rgb),.1)}.rm-product-card--discovery{border:1px solid rgba(var(--discovery-rgb),.1)}.rm-product-card--databank{border:1px solid rgba(var(--databank-rgb),.1)}.rm-product-card--pharma{border:1px solid rgba(var(--pharma-rgb),.1)}.rm-product-card__inner{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--space-24)}.rm-product-card__inner--overlay{backdrop-filter:blur(5px);background:rgba(var(--surface-rgb),.7);border-radius:
|
|
70
|
+
.rm-product-card{align-self:stretch;background-color:var(--bg-surface);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:var(--radius-xl,12px);box-shadow:0 6px 8px 0 rgba(var(--shadow-rgb,30 41 59),.1);display:flex;flex-direction:column;position:relative}.rm-product-card--padded{padding:var(--space-40)}.rm-product-card--healthcare{border:1px solid rgba(var(--healthcare-rgb),.1)}.rm-product-card--discovery{border:1px solid rgba(var(--discovery-rgb),.1)}.rm-product-card--databank{border:1px solid rgba(var(--databank-rgb),.1)}.rm-product-card--pharma{border:1px solid rgba(var(--pharma-rgb),.1)}.rm-product-card--overlay{border:none;overflow:hidden}.rm-product-card__inner{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--space-24)}.rm-product-card__inner--overlay{backdrop-filter:blur(5px);background:rgba(var(--surface-rgb),.7);border-radius:inherit;flex:1;gap:var(--space-16);padding:var(--space-24) var(--space-40)}.rm-product-card__title{font-size:26px;font-weight:900;line-height:normal}.rm-product-card--healthcare .rm-product-card__title{color:var(--color-primary)}.rm-product-card--discovery .rm-product-card__title{color:var(--color-discovery)}.rm-product-card--databank .rm-product-card__title{color:var(--color-databank)}.rm-product-card--pharma .rm-product-card__title{color:var(--color-pharma)}.rm-product-card__text{color:var(--text-primary);max-width:550px}.rm-product-card__actions{align-items:center;display:flex;gap:var(--space-16)}
|
|
71
71
|
</style>
|