@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/MonthPicker/MonthPickerText/MonthPickerInput.vue

@@ -3,48 +3,58 @@
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 	import { mdiCalendar } from '@mdi/js'
 	import { vMaska } from 'maska/vue'
-	import { nextTick, inject, ref, watch } from 'vue'
+	import { inject, ref, useId, watch } from 'vue'
 	import { locales as defaultLocales, localesKey } from '../locales'
 	import type { TextFieldProps } from './useTextField'
 	import { useTextField } from './useTextField'
-	import { useMonthPickerValidation, type ValidationProps } from '../useMonthPickerValidation'
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		modelValue: string | undefined
-	} & TextFieldProps & ValidationProps>()
+		errorMessages?: string[] | null
+		warningMessages?: string[] | null
+		successMessages?: string[] | null
+		hasError?: boolean
+		hasWarning?: boolean
+		hasSuccess?: boolean
+		required?: boolean
+		displayAsterisk?: boolean
+		hideDetails?: boolean
+	} & TextFieldProps>(), {
+		errorMessages: null,
+		warningMessages: null,
+		successMessages: null,
+		hasError: false,
+		hasWarning: false,
+		hasSuccess: false,
+		required: false,
+		displayAsterisk: false,
+		hideDetails: false,
+	})
 
 	const emits = defineEmits<{
 		(e: 'update:modelValue', value: string | undefined): void
 	}>()
 
 	const locales = inject<typeof defaultLocales>(localesKey)!
-	const input = ref<InstanceType<typeof SyTextField>>()
 
 	const mask = '##/####'
 
 	const innerValue = ref<string | undefined>(props.modelValue)
+	const focused = ref(false)
+
 	watch(
 		() => props.modelValue,
 		async (newValue) => {
-			const shouldValidate = newValue !== innerValue.value
 			innerValue.value = newValue
-			if (shouldValidate) {
-				await nextTick()
-				input.value?.validateOnSubmit()
-			}
 		},
 	)
 
 	watch(innerValue, async (newValue) => {
-		if (newValue?.length === mask.length) {
-			await nextTick()
-			input.value?.validateOnSubmit()
-		}
-
 		emits('update:modelValue', newValue)
 	})
 
 	const toggleBtn = ref<HTMLButtonElement | null>(null)
+	const uniqueName = useId()
 	defineExpose({
 		toggleBtn,
 	})
@@ -52,13 +62,22 @@
 
 <template>
 	<SyTextField
-		ref="input"
 		v-model="innerValue"
 		v-maska="mask"
-		v-bind="{
-			...useTextField(props).value,
-			...useMonthPickerValidation(props).value
-		}"
+		v-bind="useTextField(props).value"
+		:name="uniqueName"
+		:error-messages="props.errorMessages"
+		:warning-messages="props.warningMessages"
+		:success-messages="props.successMessages"
+		:has-error="props.hasError"
+		:has-warning="props.hasWarning"
+		:has-success="props.hasSuccess"
+		:required="props.required"
+		:disable-error-handling="true"
+		:hide-details="props.hideDetails"
+		:display-asterisk="props.required && props.displayAsterisk"
+		@focus="focused = true"
+		@blur="focused = false"
 	>
 		<template #append>
 			<button
@@ -86,4 +105,9 @@
 	color: rgb(var(--v-theme-warning, 96, 72, 14));
 }
 
+:deep(.v-field__clearable .v-icon__svg) {
+	fill: rgb(var(--v-theme-iconBase)) !important;
+	opacity: var(--v-medium-emphasis-opacity) !important;
+}
+
 </style>

package/src/components/MonthPicker/MonthPickerText/useTextField.ts

@@ -4,15 +4,18 @@ export type TextFieldProps = {
 	label: string
 	density?: 'default' | 'comfortable' | 'compact'
 	hint?: string | false
+	helpText?: string
 	placeholder?: string
 	disabled?: boolean
 	readonly?: boolean
+	clearable?: boolean
 }
 
 export const defaultTextFieldProps = {
 	density: 'default',
 	disabled: false,
 	readonly: false,
+	clearable: false,
 } as const satisfies Partial<TextFieldProps>
 
 export function useTextField(props: TextFieldProps) {
@@ -20,8 +23,10 @@ export function useTextField(props: TextFieldProps) {
 		label: props.label,
 		density: props.density,
 		hint: props.hint || undefined,
+		helpText: props.helpText || undefined,
 		placeholder: props.placeholder,
 		disabled: props.disabled ? true : undefined,
 		readonly: props.readonly ? true : undefined,
+		clearable: props.clearable,
 	}))
 }