fix: phone as date on table

Author: vis97c

README.md

@@ -1,3 +1,5 @@
 # Xamu UI
 
 Shared assets, styles, types, componets & scripts from xamu.
+
+WIP

packages/components-vue/src/components/base/ErrorBoundary.vue

@@ -1,6 +1,6 @@
 <template>
 	<slot v-if="errors !== undefined" name="fallback" v-bind="{ errors }">
-		<BoxMessage :theme="[eColors.DANGER, themeValues[0]]">
+		<BoxMessage :theme="dangerThemeValues">
 			<div class="flx --flxRow --flx-center">
 				<span>{{ errorMessage || t("render_error") }}</span>
 			</div>
@@ -12,7 +12,6 @@
 	import { ref, onErrorCaptured } from "vue";
 
 	import { useI18n } from "@open-xamu-co/ui-common-helpers";
-	import { eColors } from "@open-xamu-co/ui-common-enums";
 
 	import BoxMessage from "../box/Message.vue";
 
@@ -37,7 +36,7 @@
 	const props = defineProps<iLoaderContentProps>();
 
 	const { t } = useHelpers(useI18n);
-	const { themeValues } = useTheme(props);
+	const { dangerThemeValues } = useTheme(props);
 
 	const errors = ref();
 

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

@@ -124,7 +124,7 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, watch } from "vue";
+	import { onBeforeUnmount, ref, watch } from "vue";
 	import _ from "lodash";
 
 	import type { iInvalidInput, tProps } from "@open-xamu-co/ui-common-types";
@@ -293,4 +293,6 @@
 		(newStages) => resetStages(newStages),
 		{ immediate: true }
 	);
+
+	onBeforeUnmount(fullReset);
 </script>

packages/components-vue/src/components/input/File.vue

@@ -199,15 +199,14 @@
 	const { t } = useHelpers(useI18n);
 	const { isBrowser } = useHelpers(useUtils);
 	const Swal = useHelpers(useSwal);
-	const validTheme = useTheme(props);
-	const invalidTheme = useTheme({ theme: eColors.DANGER });
+	const { themeClasses, dangerThemeClasses, themeValues, dangerThemeValues } = useTheme(props);
 
 	const fileInputTheme = computed(() => {
 		const invalid = props.invalid;
 
 		return {
-			themeClasses: invalid ? invalidTheme.themeClasses.value : validTheme.themeClasses.value,
-			themeValues: invalid ? invalidTheme.themeValues.value : validTheme.themeValues.value,
+			themeClasses: invalid ? dangerThemeClasses.value : themeClasses.value,
+			themeValues: invalid ? dangerThemeValues.value : themeValues.value,
 		};
 	});
 

packages/components-vue/src/components/input/Text.vue

@@ -23,7 +23,7 @@
 			<ActionButtonToggle
 				:disabled="disabled || Number(model) <= minValue"
 				:size="size"
-				:theme="invalid ? eColors.DANGER : theme"
+				:theme="textInputTheme"
 				:aria-label="t('decrease')"
 				:tooltip="t('decrease')"
 				tooltip-position="left"
@@ -37,7 +37,7 @@
 			<ActionButtonToggle
 				:disabled="disabled || Number(model) >= maxValue"
 				:size="size"
-				:theme="invalid ? eColors.DANGER : theme"
+				:theme="textInputTheme"
 				:tooltip="t('increase')"
 				tooltip-position="left"
 				round
@@ -73,7 +73,6 @@
 	import useState from "../../composables/state";
 	import useTheme from "../../composables/theme";
 	import { useHelpers } from "../../composables/utils";
-	import { eColors } from "@open-xamu-co/ui-common-enums";
 
 	interface iInputTextProps
 		extends iInputProps,
@@ -116,7 +115,7 @@
 	const { t } = useHelpers(useI18n);
 	const { modifiersClasses } = useModifiers(props);
 	const { stateClasses } = useState(props);
-	const { themeClasses } = useTheme(props);
+	const { themeClasses, themeValues, dangerThemeValues } = useTheme(props);
 
 	const inputType = computed(() => props.type ?? "text");
 	const minValue = computed(() => Number(props.min) || 0);
@@ -140,6 +139,9 @@
 	const inputClasses = computed(() => {
 		return [modifiersClasses.value, stateClasses.value, themeClasses.value, "iTxt"];
 	});
+	const textInputTheme = computed(() => {
+		return props.invalid ? dangerThemeValues.value : themeValues.value;
+	});
 
 	/**
 	 * increase number

packages/components-vue/src/components/modal/Simple.vue

@@ -194,7 +194,7 @@
 		emit("close");
 	}
 	function clickOutside(e: Event) {
-		if (modalRef.value !== e.target) return;
+		if (props.disabled || modalRef.value !== e.target) return;
 
 		closeModal();
 	}
@@ -251,7 +251,15 @@
 		if (!router?.currentRoute) return;
 
 		// close on route change
-		watch(router.currentRoute, () => closeModal(), { immediate: false });
+		watch(
+			router.currentRoute,
+			() => {
+				if (props.disabled) return;
+
+				closeModal();
+			},
+			{ immediate: false }
+		);
 	});
 	onBeforeUnmount(closeModal);
 </script>

packages/components-vue/src/components/table/Simple.stories.ts

@@ -11,8 +11,9 @@ const nodes = [
 		email: "[email protected]",
 		cellphoneNumber: "1234567890",
 		cellphoneIndicative: "CO+57",
+		locationCountry: "CO",
+		locationState: "VAC",
 		locationCity: "Cali",
-		locationDepartment: "VAC",
 		address: "No address",
 		zipCode: "124876",
 		pathPhoto: "https://picsum.photos/seed/45465/100/100",

packages/components-vue/src/components/table/Simple.vue

@@ -22,7 +22,7 @@
 					:tooltip="t('table_delete')"
 					tooltip-as-text
 					tooltip-position="bottom"
-					:theme="[eColors.DANGER, themeValues[0]]"
+					:theme="dangerThemeValues"
 					:disabled="!selectedNodes.some(([n]) => n)"
 					@click="deleteNodesAndRefresh"
 				>
@@ -210,11 +210,12 @@
 									<Dropdown
 										class="flx --flxRow --flx-center"
 										:position="['left', 'center']"
-										:theme="theme || themeValues"
 										:size="size"
+										v-bind="{ theme: theme || themeValues, ...modalProps }"
 									>
 										<template #toggle="{ setModel }">
 											<ActionLink
+												class="--pX-10"
 												:aria-label="t('table_options')"
 												:title="t('table_options')"
 												:theme="theme || themeValues"
@@ -227,7 +228,9 @@
 											</ActionLink>
 										</template>
 										<template #default="{ setModel, invertedTheme }">
-											<ul class="flx --flxColumn --flx-start-stretch --gap-5">
+											<ul
+												class="flx --flxColumn --flx-start-stretch --gap-10"
+											>
 												<li v-if="!!cloneNode">
 													<ActionLink
 														:theme="invertedTheme"
@@ -243,7 +246,7 @@
 												</li>
 												<li v-if="!!deleteNode">
 													<ActionLink
-														:theme="[eColors.DANGER, invertedTheme[0]]"
+														:theme="dangerThemeValues"
 														:size="size"
 														:aria-label="t('table_delete')"
 														@click="
@@ -351,7 +354,7 @@
 		tProps,
 		tSizeModifier,
 	} from "@open-xamu-co/ui-common-types";
-	import { eColors, eSizes } from "@open-xamu-co/ui-common-enums";
+	import { eSizes } from "@open-xamu-co/ui-common-enums";
 	import { toOption, useSwal, useI18n } from "@open-xamu-co/ui-common-helpers";
 
 	import IconFa from "../icon/Fa.vue";
@@ -451,7 +454,7 @@
 
 	const { t, tet } = useHelpers(useI18n);
 	const Swal = useHelpers(useSwal);
-	const { themeClasses, themeValues } = useTheme(props);
+	const { themeClasses, themeValues, dangerThemeValues } = useTheme(props);
 	const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
 	const { uuid } = useUUID();
 

packages/components-vue/src/components/value/List.stories.ts

@@ -10,8 +10,9 @@ const value = {
 	email: "[email protected]",
 	cellphoneNumber: "1234567890",
 	cellphoneIndicative: "CO+57",
+	locationCountry: "CO",
+	locationState: "VAC",
 	locationCity: "Cali",
-	locationDepartment: "VAC",
 	address: "No address",
 	zipCode: "124876",
 	pathPhoto: "https://picsum.photos/seed/45465/100/100",

packages/components-vue/src/components/value/Simple.vue

@@ -189,6 +189,11 @@
 			// bypass numbers
 			if (!!Number(dateString)) return false;
 
+			const property = String(props.property?.value);
+
+			// TODO: improve date bypassing for phones
+			if (["tel", "phone", "cel"].some((v) => property.includes(v))) return false;
+
 			return validator.isDate(dateString) || !isNaN(Date.parse(dateString));
 		} catch (err) {
 			// ignore errors