Skip to content

Commit 34c5947

Browse files
vis97cvis97c
committed
feat: dropdown & modal union theme modifiers
1 parent 43d8ca3 commit 34c5947

File tree

20 files changed

+193
-106
lines changed

20 files changed

+193
-106
lines changed

‎packages/components-vue/src/components/Dropdown.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
>
99
<slot name="toggle" v-bind="{ model, setModel }"></slot>
1010
</div>
11-
<Modal v-model="localModel" :disabled="!isModal" :theme="theme">
11+
<Modal v-model="localModel" :disabled="!isModal" :theme="theme" :invert-theme="invertTheme">
1212
<div ref="dropdownRef" :class="dropdownClasses">
13-
<slot v-bind="{ model, setModel }"></slot>
13+
<slot v-bind="{ model, setModel, invertedTheme }"></slot>
1414
</div>
1515
</Modal>
1616
</BaseWrapper>
@@ -71,7 +71,7 @@
7171
const emit = defineEmits(["close", "update:model-value"]);
7272
7373
const { getModifierClasses: GMC } = useHelpers(useUtils);
74-
const { themeValues } = useTheme(props);
74+
const { themeClasses, invertedTheme } = useTheme(props, true);
7575
const { tabletMqRange } = useBrowser();
7676
const { modifiersClasses } = useModifiers(props);
7777
@@ -84,12 +84,12 @@
8484
8585
return [
8686
...modifiersClasses.value,
87+
...themeClasses.value,
8788
...GMC([{ active: props.modelValue }], { prefix: "is" }),
8889
...GMC([[props.position ?? "bottom"].flat(2).join("-")], {
8990
modifier: "position",
9091
divider: "-",
9192
}),
92-
`--bgColor-${themeValues.value[1]}`,
9393
"dropdown",
9494
];
9595
});

‎packages/components-vue/src/components/Modal.vue‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,33 @@
66
v-show="!loading && !hide"
77
class="modal"
88
role="document"
9-
:class="[
10-
modalClass ?? 'flx --flxColumn --flx-start-stretch --width',
11-
`--bgColor-${themeValues[1]}`,
12-
]"
9+
:class="[modalClass ?? 'flx --flxColumn --flx-start-stretch --width', themeClasses]"
1310
v-bind="$attrs"
1411
>
15-
<slot name="modal-header" v-bind="{ toggleModal, model }">
12+
<slot name="modal-header" v-bind="{ toggleModal, model, invertedTheme }">
1613
<div v-if="title" class="flx --flxRow --flx-between-center">
1714
<div class="txt --gaping-none">
1815
<h5>{{ title }}</h5>
1916
<p v-if="subtitle" class="--txtSize-xs">{{ subtitle }}</p>
2017
</div>
2118
<ActionLink
22-
:theme="theme"
19+
:theme="invertedTheme"
2320
:aria-label="cancelButtonOptions.title"
2421
@click.stop="closeModal()"
2522
>
2623
<IconFa name="xmark" size="20" />
2724
</ActionLink>
2825
</div>
2926
</slot>
30-
<div class="scroll --vertical"><slot v-bind="{ toggleModal, model }"></slot></div>
31-
<slot name="modal-footer" v-bind="{ toggleModal, model }">
27+
<div class="scroll --vertical">
28+
<!-- Main modal content -->
29+
<slot v-bind="{ toggleModal, model, invertedTheme }"></slot>
30+
</div>
31+
<slot name="modal-footer" v-bind="{ toggleModal, model, invertedTheme }">
3232
<div v-if="!hideFooter" class="flx --flxRow --flx-end-center">
3333
<ActionButton
3434
v-if="saveButtonOptions.visible"
35-
:theme="theme"
35+
:theme="invertedTheme"
3636
:aria-label="saveButtonOptions.title"
3737
:class="saveButtonOptions.btnClass"
3838
@click="emit('save', closeModal, $event)"
@@ -41,7 +41,7 @@
4141
</ActionButton>
4242
<ActionButtonToggle
4343
v-if="cancelButtonOptions.visible"
44-
:theme="theme"
44+
:theme="invertedTheme"
4545
:aria-label="cancelButtonOptions.title"
4646
:class="cancelButtonOptions.btnClass"
4747
data-dismiss="modal"
@@ -57,7 +57,7 @@
5757
</div>
5858
</slot>
5959
</div>
60-
<LoaderSimple v-if="loading || hide" :theme="theme">
60+
<LoaderSimple v-if="loading || hide" :theme="invertedTheme">
6161
<transition name="fade">
6262
<div
6363
v-if="loadingTooLong || (props.hide && props.hideMessage)"
@@ -66,15 +66,19 @@
6666
<p class="--txtColor-light --txtShadow --txtSize-sm">
6767
{{ props.hideMessage ? props.hideMessage : t("modal_taking_too_long") }}
6868
</p>
69-
<ActionButton :theme="theme" :aria-label="t('close')" @click="closeModal()">
69+
<ActionButton
70+
:theme="invertedTheme"
71+
:aria-label="t('close')"
72+
@click="closeModal()"
73+
>
7074
{{ t("close") }}
7175
</ActionButton>
7276
</div>
7377
</transition>
7478
</LoaderSimple>
7579
</dialog>
7680
</Teleport>
77-
<slot v-else v-bind="{ toggleModal, model }"></slot>
81+
<slot v-else v-bind="{ toggleModal, model, invertedTheme }"></slot>
7882
</template>
7983

8084
<script setup lang="ts">
@@ -160,7 +164,7 @@
160164
161165
const { t } = useHelpers(useI18n);
162166
const Swal = useHelpers(useSwal);
163-
const { themeValues } = useTheme(props, true);
167+
const { themeClasses, invertedTheme } = useTheme(props, true);
164168
const { uuid } = useUUID();
165169
166170
const resolver = ref<(r?: boolean) => void>();

‎packages/components-vue/src/components/Table.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@
147147
node,
148148
readonly: isReadOnly,
149149
theme,
150-
modalTheme,
150+
modalTheme: modalTheme || theme,
151151
classes,
152152
modalTarget: valueRootRef,
153153
refresh,
@@ -178,7 +178,7 @@
178178
<Dropdown
179179
class="flx --flxRow --flx-center"
180180
:position="['left', 'center']"
181-
:theme="modalTheme"
181+
:theme="theme"
182182
size="sm"
183183
>
184184
<template #toggle="{ setModel }">
@@ -194,11 +194,11 @@
194194
<IconFa name="ellipsis-vertical" />
195195
</ActionLink>
196196
</template>
197-
<template #default="{ setModel }">
197+
<template #default="{ setModel, invertedTheme }">
198198
<ul class="flx --flxColumn --flx-start-stretch --gap-5">
199199
<li v-if="!!cloneNode">
200200
<ActionLink
201-
:theme="theme"
201+
:theme="invertedTheme"
202202
size="sm"
203203
:aria-label="t('table_duplicate')"
204204
@click="cloneNodeAndRefresh(node, setModel)"
@@ -211,7 +211,7 @@
211211
</li>
212212
<li v-if="!!deleteNode">
213213
<ActionLink
214-
:theme="[eColors.DANGER, themeValues[0]]"
214+
:theme="[eColors.DANGER, invertedTheme[0]]"
215215
size="sm"
216216
:aria-label="t('table_delete')"
217217
@click="
@@ -411,7 +411,7 @@
411411
412412
const { t, tet } = useHelpers(useI18n);
413413
const Swal = useHelpers(useSwal);
414-
const { themeClasses, themeValues } = useTheme(props, true);
414+
const { themeClasses, themeValues } = useTheme(props);
415415
const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
416416
417417
const valueRootRef = ref();

‎packages/components-vue/src/components/box/Message.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
stateClasses,
99
themeClasses,
1010
GMC([themeValues[0]], { modifier: 'txtColor', divider: '-' }),
11-
GMC(asButton ?? false, { modifier: 'button' }),
11+
GMC(button ?? false, { modifier: 'button' }),
1212
]"
1313
class="box"
1414
>
@@ -45,7 +45,7 @@
4545
/**
4646
* less padding
4747
*/
48-
asButton?: boolean;
48+
button?: boolean;
4949
}
5050
5151
/**

‎packages/components-vue/src/components/form/Input.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@
208208
<p>Schedule Component Here</p>
209209
</FormInputNValues>
210210
<label v-else-if="input.type === eFT.BOOLEAN" class="--flx">
211-
<BoxMessage :theme="theme" class="--txtAlign">
211+
<BoxMessage :theme="theme" class="--txtAlign" :active="models[i].value" button>
212212
<!-- TODO: use switch type (unsupported style) -->
213213
<InputToggle
214214
v-model="models[i].value"

‎packages/components-vue/src/components/form/Stages.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,10 +144,10 @@
144144
}
145145
146146
/**
147-
* Modal Prototype
147+
* Form Stages
148148
* TODO: enable transitions conditionally
149149
*
150-
* @prototype
150+
* @component
151151
*/
152152
153153
defineOptions({ name: "FormStages", inheritAttrs: true });

‎packages/components-vue/src/components/value/Complex.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,12 @@
4040
{{ t("table_see_values", { name: property?.alias?.toLowerCase() }) }}
4141
</ActionButtonToggle>
4242
</template>
43-
<template #default="{ model }">
43+
<template #default="{ model, invertedTheme }">
4444
<Table
4545
v-if="model"
4646
:nodes="remapValues(value)"
47-
:theme="theme"
48-
:modal-theme="modalTheme"
47+
:theme="invertedTheme"
48+
:modal-theme="modalTheme || theme"
4949
:classes="classes"
5050
/>
5151
</template>
@@ -89,14 +89,14 @@
8989
<IconFa name="lemon" force-regular />
9090
</ActionButtonToggle>
9191
</template>
92-
<template #default="{ model }">
92+
<template #default="{ model, invertedTheme }">
9393
<ul v-if="model" class="flx --flxColumn --minWidth-220 --txtSize-sm" :class="classes">
9494
<li
9595
v-for="([childValueName, childValue], childValueIndex) in sort(value)"
9696
:key="childValueIndex"
9797
class="flx --flxColumn --flx-center-start --gap-5 --flx-fit"
9898
>
99-
<span class="--txtSize-xs" :class="`--txtColor-${themeValues[0]}`">
99+
<span class="--txtSize-xs">
100100
{{ _.capitalize(_.startCase(childValueName)) }}
101101
</span>
102102
<!-- Recursion -->
@@ -109,11 +109,12 @@
109109
alias: _.capitalize(_.startCase(childValueName)),
110110
},
111111
readonly,
112-
theme,
113-
modalTheme,
112+
theme: invertedTheme,
113+
modalTheme: modalTheme || theme,
114114
modalTarget,
115115
}"
116116
:class="classes"
117+
verbose
117118
/>
118119
</li>
119120
</ul>
@@ -122,7 +123,7 @@
122123
<!-- Plain value -->
123124
<ValueSimple
124125
v-else
125-
v-bind="{ value, property, readonly, theme, modalTheme, classes, modalTarget }"
126+
v-bind="{ value, property, readonly, theme, modalTheme, classes, modalTarget, verbose }"
126127
/>
127128
</template>
128129
<script setup lang="ts" generic="P extends Record<string, any>, T">
@@ -177,6 +178,7 @@
177178
* Prevent node functions from triggering refresh event (useful with firebase hydration)
178179
*/
179180
omitRefresh?: boolean;
181+
verbose?: boolean;
180182
}
181183
182184
/**

0 commit comments

Comments
 (0)