Skip to content

Commit 18d3b3f

Browse files
vis97cvis97c
committed
fix: union theme reactivity
1 parent 7d506f8 commit 18d3b3f

File tree

18 files changed

+79
-129
lines changed

18 files changed

+79
-129
lines changed

‎packages/common-helpers/src/utils.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,6 @@ interface igetModifiersArgs {
1010
modifierClass?: `${string}--${string}`;
1111
}
1212

13-
/**
14-
* Returns a valid HTML class string
15-
*/
16-
function getClassesString(classes: string | string[] | (string | string[])[]): string {
17-
return [...new Set([classes].flat(2))].join(" ").trim();
18-
}
19-
2013
/**
2114
* returns the modifier classes
2215
*
@@ -138,7 +131,6 @@ export default function useUtils(_options: iPluginOptions = {}) {
138131
return {
139132
isBrowser,
140133
isTouchDevice,
141-
getClassesString,
142134
getModifierClasses,
143135
getPropData,
144136
createFormData,

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@
99
<slot name="toggle" v-bind="{ model, setModel }"></slot>
1010
</div>
1111
<Modal v-model="localModel" :disabled="!isModal" :theme="theme">
12-
<div
13-
ref="dropdownRef"
14-
:class="{ [getClassesString([modifiersClasses, dropdownClasses])]: !isModal }"
15-
>
12+
<div ref="dropdownRef" :class="dropdownClasses">
1613
<slot v-bind="{ model, setModel }"></slot>
1714
</div>
1815
</Modal>
@@ -73,7 +70,7 @@
7370
const props = defineProps<iDropdownProps>();
7471
const emit = defineEmits(["close", "update:model-value"]);
7572
76-
const { getModifierClasses: GMC, getClassesString } = useHelpers(useUtils);
73+
const { getModifierClasses: GMC } = useHelpers(useUtils);
7774
const { themeValues } = useTheme(props);
7875
const { tabletMqRange } = useBrowser();
7976
const { modifiersClasses } = useModifiers(props);
@@ -82,16 +79,19 @@
8279
const dropdownRef = ref<HTMLElement>();
8380
const isModal = ref(false);
8481
const model = ref(props.modelValue);
85-
const dropdownClasses = computed<string>(() => {
86-
return getClassesString([
87-
"dropdown",
88-
`--bgColor-${themeValues.value[1]}`,
89-
GMC([{ active: props.modelValue }], { prefix: "is" }),
90-
GMC([[props.position ?? "bottom"].flat(2).join("-")], {
82+
const dropdownClasses = computed<string[]>(() => {
83+
if (isModal.value) return [];
84+
85+
return [
86+
...modifiersClasses.value,
87+
...GMC([{ active: props.modelValue }], { prefix: "is" }),
88+
...GMC([[props.position ?? "bottom"].flat(2).join("-")], {
9189
modifier: "position",
9290
divider: "-",
9391
}),
94-
]);
92+
`--bgColor-${themeValues.value[1]}`,
93+
"dropdown",
94+
];
9595
});
9696
9797
function setModel(value = !model.value) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160
161161
const { t } = useHelpers(useI18n);
162162
const Swal = useHelpers(useSwal);
163-
const { themeValues } = useTheme(props);
163+
const { themeValues } = useTheme(props, true);
164164
const { uuid } = useUUID();
165165
166166
const resolver = ref<(r?: boolean) => void>();

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
:tooltip="t('table_delete')"
77
tooltip-as-text
88
tooltip-position="bottom"
9-
:theme="[eColors.DANGER, themeValues[1]]"
9+
:theme="[eColors.DANGER, themeValues[0]]"
1010
:disabled="!selectedNodes.some(([n]) => n)"
1111
@click="deleteNodesAndRefresh"
1212
>
@@ -211,7 +211,7 @@
211211
</li>
212212
<li v-if="!!deleteNode">
213213
<ActionLink
214-
:theme="[eColors.DANGER, themeValues[1]]"
214+
:theme="[eColors.DANGER, themeValues[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, themeAsUnion: true });
414+
const { themeClasses, themeValues } = useTheme(props, true);
415415
const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
416416
417417
const valueRootRef = ref();

‎packages/components-vue/src/components/action/Button.vue‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
<template>
22
<BaseAction
33
v-bind="{ ...$attrs, ...props, ...tooltipAttributes }"
4-
:class="getClassesString([modifiersClasses, stateClasses, themeClasses])"
4+
:class="[modifiersClasses, stateClasses, themeClasses]"
55
class="bttn"
66
>
77
<slot></slot>
88
</BaseAction>
99
</template>
1010

1111
<script setup lang="ts">
12-
import { useUtils } from "@open-xamu-co/ui-common-helpers";
13-
1412
import BaseAction from "../base/Action.vue";
1513
1614
import type {
@@ -23,7 +21,6 @@
2321
import useModifiers from "../../composables/modifiers";
2422
import useState from "../../composables/state";
2523
import useTheme from "../../composables/theme";
26-
import useHelpers from "../../composables/helpers";
2724
2825
interface iActionButtonProps
2926
extends iActionProps,
@@ -44,11 +41,7 @@
4441
4542
const props = defineProps<iActionButtonProps>();
4643
47-
const { getClassesString } = useHelpers(useUtils);
4844
const { modifiersClasses } = useModifiers(props);
4945
const { stateClasses } = useState(props);
50-
const { themeClasses, tooltipAttributes } = useTheme({
51-
...props,
52-
themeAsUnion: true,
53-
});
46+
const { themeClasses, tooltipAttributes } = useTheme(props, true);
5447
</script>

‎packages/components-vue/src/components/action/ButtonToggle.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<BaseAction
33
v-bind="{ ...$attrs, ...props, ...tooltipAttributes }"
4-
:class="getClassesString([modifiersClasses, stateClasses, themeClasses, shadowClasses])"
4+
:class="[modifiersClasses, stateClasses, themeClasses, shadowClasses]"
55
class="bttnToggle"
66
>
77
<slot></slot>
@@ -49,7 +49,7 @@
4949
5050
const props = defineProps<iActionButtonToggleProps>();
5151
52-
const { getModifierClasses: GMC, getClassesString } = useHelpers(useUtils);
52+
const { getModifierClasses: GMC } = useHelpers(useUtils);
5353
const { modifiersClasses } = useModifiers(props);
5454
const { stateClasses } = useState(props);
5555
const { themeClasses, tooltipAttributes } = useTheme(props);

‎packages/components-vue/src/components/action/Link.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<BaseAction
33
v-bind="{ ...$attrs, ...props, ...tooltipAttributes }"
4-
:class="getClassesString([modifiersClasses, stateClasses, themeClasses, shadowClasses])"
4+
:class="[modifiersClasses, stateClasses, themeClasses, shadowClasses]"
55
class="link"
66
>
77
<slot></slot>
@@ -48,7 +48,7 @@
4848
4949
const props = defineProps<iActionLinkProps>();
5050
51-
const { getModifierClasses: GMC, getClassesString } = useHelpers(useUtils);
51+
const { getModifierClasses: GMC } = useHelpers(useUtils);
5252
const { modifiersClasses } = useModifiers(props);
5353
const { stateClasses } = useState(props);
5454
const { themeClasses, tooltipAttributes } = useTheme(props);

‎packages/components-vue/src/components/base/Action.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
v-bind="{ ...$attrs, ...props, ...getHref }"
55
:type="currentTag === 'button' && !to && !href ? type || 'button' : null"
66
:tabindex="(props.disabled && '-1') || null"
7-
:class="getClassesString([classes])"
7+
:class="classes"
88
>
99
<slot>
1010
<template v-if="mailto">{{ mailto }}</template>
@@ -35,7 +35,7 @@
3535
const props = defineProps<iActionProps>();
3636
3737
const xamuOptions = inject<iPluginOptions>("xamu");
38-
const { getModifierClasses: GMC, getClassesString } = useHelpers(useUtils);
38+
const { getModifierClasses: GMC } = useHelpers(useUtils);
3939
4040
const currentTag = computed(() => {
4141
if (!props.mailto && !props.tel && !props.href) return props.tag ?? "button";

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<BaseAction
33
v-bind="{ ...$attrs, ...props, ...tooltipAttributes }"
4-
:class="getClassesString([modifiersClasses, stateClasses, themeClasses])"
4+
:class="[modifiersClasses, stateClasses, themeClasses]"
55
class="box --button"
66
>
7-
<div :class="getClassesString([innerThemeClasses])" class="box --square-sm">
7+
<div :class="innerThemeClasses" class="box --square-sm">
88
<IconFa v-if="!src" v-bind="{ ...iconProps, name: icon ?? 'cubes', size: 50 }" />
99
<BaseImg v-else class="--bgColor-light --width --height" :src="src" :alt="text" />
1010
</div>
@@ -19,7 +19,6 @@
1919
import type { IconName } from "@fortawesome/fontawesome-common-types";
2020
2121
import type { iFormIconProps } from "@open-xamu-co/ui-common-types";
22-
import { useUtils } from "@open-xamu-co/ui-common-helpers";
2322
import { eColors } from "@open-xamu-co/ui-common-enums";
2423
2524
import BaseImg from "../base/Img.vue";
@@ -36,7 +35,6 @@
3635
import useModifiers from "../../composables/modifiers";
3736
import useState from "../../composables/state";
3837
import useTheme from "../../composables/theme";
39-
import useHelpers from "../../composables/helpers";
4038
4139
interface iBoxActionProps
4240
extends iActionProps,
@@ -72,7 +70,6 @@
7270
7371
const props = defineProps<iBoxActionProps>();
7472
75-
const { getClassesString } = useHelpers(useUtils);
7673
const { modifiersClasses } = useModifiers(props);
7774
const { stateClasses } = useState(props);
7875
const { themeClasses, tooltipAttributes } = useTheme(props);

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,13 @@
33
<div :class="modifiersClasses" class="flx --flxColumn --flx-center --width" v-bind="$attrs">
44
<div class="txt --txtAlign-center --width">
55
<div
6-
:class="
7-
getClassesString([
8-
modifiersClasses,
9-
stateClasses,
10-
themeClasses,
11-
GMC([themeValues[0]], { modifier: 'txtColor', divider: '-' }),
12-
GMC(asButton ?? false, { modifier: 'button' }),
13-
])
14-
"
6+
:class="[
7+
modifiersClasses,
8+
stateClasses,
9+
themeClasses,
10+
GMC([themeValues[0]], { modifier: 'txtColor', divider: '-' }),
11+
GMC(asButton ?? false, { modifier: 'button' }),
12+
]"
1513
class="box"
1614
>
1715
<p v-if="text" v-html="text"></p>
@@ -64,7 +62,7 @@
6462
6563
const props = defineProps<iBoxMessageProps>();
6664
67-
const { getModifierClasses: GMC, getClassesString } = useHelpers(useUtils);
65+
const { getModifierClasses: GMC } = useHelpers(useUtils);
6866
const { modifiersClasses } = useModifiers(props);
6967
const { stateClasses } = useState(props);
7068
const { themeClasses, themeValues } = useTheme(props);

0 commit comments

Comments
 (0)