@tekkare/romulus 0.1.28 → 0.1.29
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
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
hauteur et au rayon de la rangee. Elles tomberont avec ces champs.
|
|
15
15
|
-->
|
|
16
16
|
<script setup lang="ts">
|
|
17
|
-
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
17
|
+
import { computed, onBeforeUnmount, onMounted, ref, useSlots } from 'vue'
|
|
18
18
|
import { useRmFilterBarView } from '../composables/useRmFilterBarView'
|
|
19
19
|
|
|
20
20
|
const props = withDefaults(
|
|
@@ -49,13 +49,26 @@ const props = withDefaults(
|
|
|
49
49
|
const emit = defineEmits<{ clearFilters: []; saveScope: [] }>()
|
|
50
50
|
|
|
51
51
|
const LABELS = {
|
|
52
|
-
fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Tout effacer' },
|
|
53
|
-
en: { title: 'Filters', save: 'Save a scope', clear: 'Clear all' },
|
|
52
|
+
fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Tout effacer', customize: 'Personnaliser' },
|
|
53
|
+
en: { title: 'Filters', save: 'Save a scope', clear: 'Clear all', customize: 'Customize' },
|
|
54
54
|
} as const
|
|
55
55
|
|
|
56
56
|
const t = computed(() => LABELS[props.lang] ?? LABELS.fr)
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
/**
|
|
59
|
+
* Deux panneaux possibles sous la barre : les filtres, et la personnalisation
|
|
60
|
+
* (slot #Customize, la puce n'apparait que si la page le fournit). Un seul
|
|
61
|
+
* ouvert a la fois.
|
|
62
|
+
*/
|
|
63
|
+
const panel = ref<'filters' | 'customize' | null>(null)
|
|
64
|
+
const open = computed(() => panel.value === 'filters')
|
|
65
|
+
const customizeOpen = computed(() => panel.value === 'customize')
|
|
66
|
+
const slots = useSlots()
|
|
67
|
+
const hasCustomize = computed(() => !!slots.Customize)
|
|
68
|
+
|
|
69
|
+
function toggle(which: 'filters' | 'customize') {
|
|
70
|
+
panel.value = panel.value === which ? null : which
|
|
71
|
+
}
|
|
59
72
|
|
|
60
73
|
/** Onglets de vue publies par la page. */
|
|
61
74
|
const { view } = useRmFilterBarView()
|
|
@@ -94,7 +107,7 @@ onBeforeUnmount(() => {
|
|
|
94
107
|
<div
|
|
95
108
|
id="rm_filter_bar"
|
|
96
109
|
class="rm-fbar"
|
|
97
|
-
:class="
|
|
110
|
+
:class="panel ? 'rm-fbar--open' : 'rm-fbar--closed'"
|
|
98
111
|
:style="{ top: `${stickyTop}px` }"
|
|
99
112
|
>
|
|
100
113
|
<div class="rm-fbar__row">
|
|
@@ -107,7 +120,7 @@ onBeforeUnmount(() => {
|
|
|
107
120
|
/>
|
|
108
121
|
</div>
|
|
109
122
|
|
|
110
|
-
<button type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="
|
|
123
|
+
<button type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="toggle('filters')">
|
|
111
124
|
<RmIcon name="Funnel" :size="16" />
|
|
112
125
|
<span v-if="customTitle"><slot name="CardTitle" /></span>
|
|
113
126
|
<span v-else>{{ t.title }}</span>
|
|
@@ -117,6 +130,17 @@ onBeforeUnmount(() => {
|
|
|
117
130
|
<div class="rm-fbar__search">
|
|
118
131
|
<slot name="Search" />
|
|
119
132
|
</div>
|
|
133
|
+
|
|
134
|
+
<button
|
|
135
|
+
v-if="hasCustomize"
|
|
136
|
+
type="button"
|
|
137
|
+
class="rm-fbar__toggle"
|
|
138
|
+
:class="{ 'is-active': customizeOpen }"
|
|
139
|
+
@click="toggle('customize')"
|
|
140
|
+
>
|
|
141
|
+
<RmIcon name="SlidersHorizontal" :size="16" />
|
|
142
|
+
<span>{{ t.customize }}</span>
|
|
143
|
+
</button>
|
|
120
144
|
</div>
|
|
121
145
|
|
|
122
146
|
<div v-show="open" class="rm-fbar__panel">
|
|
@@ -145,9 +169,18 @@ onBeforeUnmount(() => {
|
|
|
145
169
|
<slot name="Filters" />
|
|
146
170
|
</div>
|
|
147
171
|
</div>
|
|
172
|
+
|
|
173
|
+
<div v-if="hasCustomize" v-show="customizeOpen" class="rm-fbar__panel">
|
|
174
|
+
<div class="rm-fbar__panel-head">
|
|
175
|
+
<p class="rm-fbar__panel-title">{{ t.customize }}</p>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="rm-fbar__customize">
|
|
178
|
+
<slot name="Customize" />
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
148
181
|
</div>
|
|
149
182
|
</template>
|
|
150
183
|
|
|
151
184
|
<style scoped>
|
|
152
|
-
.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row{border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__filters{display:contents}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
|
|
185
|
+
.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row{border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__filters{display:contents}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
|
|
153
186
|
</style>
|