@winchsa/ui 0.1.15 → 0.1.17

package/dist/components/forms/LicensePlateInput.vue

@@ -7,7 +7,10 @@ const props = defineProps({
   hideDetails: { type: Boolean, required: false },
   label: { type: String, required: false },
   customId: { type: String, required: false },
-  errorMessages: { type: [Array, String], required: false }
+  errorMessages: { type: [Array, String], required: false },
+  validateOn: { type: null, required: false, default: "submit lazy" },
+  error: { type: Boolean, required: false },
+  rules: { type: Array, required: false }
 });
 const model = defineModel({ type: [Array, null], ...{ default: ["", "", "", ""] } });
 const LangLabel = computed(() => props.label ? t(props.label) : "");
@@ -63,12 +66,6 @@ const handleInput = (e, index) => {
 const clear = () => {
   model.value = null;
 };
-const requiredRule = (value) => {
-  if (value?.length !== 4 || !value.every((item) => item !== "")) {
-    return t("validation.required");
-  }
-  return true;
-};
 watch(() => model.value, (newVal) => {
   if (Array.isArray(newVal)) {
     model.value = newVal;
@@ -83,8 +80,9 @@ watch(() => model.value, (newVal) => {
     <VValidation
       v-slot="{ errorMessages: validationErrors, isValid }"
       v-model="model"
-      :rules="[requiredRule]"
-      validate-on="submit lazy"
+      :error="error"
+      :rules="rules"
+      :validate-on="validateOn"
     >
       <div class="d-flex flex-column h-100">
         <VLabel
@@ -96,7 +94,7 @@ watch(() => model.value, (newVal) => {
           class="app-license-plate-input position-relative"
           style="min-height: 45px;"
           :class="{
-  'app-license-plate-input--error': !isValid.value && validationErrors.value?.length > 0
+  'app-license-plate-input--error': error || isValid.value === false
 }"
         >
           <input

package/dist/components/forms/LicensePlateInput.vue.d.ts

@@ -1,8 +1,12 @@
+import type { ValidateOn } from '../../types';
 type __VLS_Props = {
     hideDetails?: boolean;
     label?: string;
     customId?: string;
     errorMessages?: string[] | string;
+    validateOn?: ValidateOn;
+    error?: boolean;
+    rules?: ((value: unknown) => string)[];
 };
 type __VLS_PublicProps = {
     modelValue?: string[] | null;
@@ -11,5 +15,7 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     "update:modelValue": (value: string[] | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    validateOn: "submit" | "lazy" | "input" | "blur" | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/forms/ManualDate.vue

@@ -12,6 +12,8 @@ const props = defineProps({
   errorMessages: { type: [Array, String], required: false },
   type: { type: null, required: false },
   disabled: { type: Boolean, required: false },
+  validateOn: { type: null, required: false, default: "submit lazy" },
+  error: { type: Boolean, required: false },
   rules: { type: Array, required: false }
 });
 const emit = defineEmits(["update:model-value"]);
@@ -142,8 +144,8 @@ watch(() => props.modelValue, (val) => {
     <VValidation
       v-slot="{ errorMessages: validationErrors, isValid }"
       v-model="date"
+      :error="error"
       :rules="rules"
-      validate-on="submit lazy"
     >
       <div class="d-flex flex-column">
         <VLabel
@@ -152,7 +154,7 @@ watch(() => props.modelValue, (val) => {
           :text="LangLabel"
         />
         <div class="app-date-input position-relative" style="min-height: 45px;" :class="{
-  'app-date-input--error': !isValid.value || yearIsInvalid,
+  'app-date-input--error': isValid.value === false || yearIsInvalid || error,
   'app-date-input--disabled': disabled
 }">
           <input

package/dist/components/forms/ManualDate.vue.d.ts

@@ -1,3 +1,4 @@
+import type { ValidateOn } from '../../types';
 type __VLS_Props = {
     hideDetails?: boolean;
     label?: string;
@@ -6,6 +7,8 @@ type __VLS_Props = {
     errorMessages?: string[] | string;
     type?: 'gregorian' | 'hijri' | string | undefined;
     disabled?: boolean;
+    validateOn?: ValidateOn;
+    error?: boolean;
     rules?: ((value: unknown) => string)[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
@@ -13,6 +16,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:model-value"?: ((value: string) => any) | undefined;
 }>, {
+    validateOn: "submit" | "lazy" | "input" | "blur" | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit";
     customId: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/forms/TimePicker.vue

@@ -265,7 +265,7 @@ onBeforeUnmount(() => {
 }
 
 :deep(.v-field__input input) {
-  text-align: start;
+  text-align: start !important;
 }
 
 /* Apply text-align: end when RTL using the :deep modifier */

package/dist/components/table/EditableDataTable.vue.d.ts

@@ -48,6 +48,8 @@ declare const headers: import("vue").ComputedRef<{
     options?: Record<string, unknown>[] | import("../../types").OptionItem[] | import("vue").Ref<import("../../types").OptionItem[]>;
     disableIfEmpty?: boolean;
     maxDate?: Date | null;
+    validateOn?: import("../../types").ValidateOn;
+    isAppRtl?: boolean;
 }[]>;
 declare const moduleIdentifier: import("vue").ComputedRef<string>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;

package/dist/components/table/EditableDataTableRow.vue

@@ -175,7 +175,7 @@ const placeholder = (header) => {
     :params="autoCompleteParams"
     :search-internally="header.searchInternally"
     :searchable="header.searchable"
-    :fetch-enabled="header.dependsOn ? item[`${header.dependsOn}`] : true"
+    :fetch-enabled="header.dependsOn ? Boolean(item[`${header.dependsOn}`]) : true"
     :group-label="header.groupLabel || 'name'"
     :group-values="header.groupValues || 'children'"
     :item-label="header.itemLabel || 'name'"
@@ -194,6 +194,7 @@ const placeholder = (header) => {
   <DatePicker
     v-if="header.type === 'datepicker'"
     v-model="item[header.key]"
+    :validate-on="header.validateOn"
     class="pa-0 h-100 app-input-outline"
     :placeholder="placeholder(header)"
     :rules="header.rules"
@@ -212,10 +213,12 @@ const placeholder = (header) => {
   <TimePicker
     v-if="header.type === 'timepicker'"
     v-model="item[header.key]"
+    :validate-on="header.validateOn"
     class="pa-0 h-100 app-flex-1 app-max-w-150px app-input-outline"
     :rules="header.rules"
     :show-icon="false"
     :disabled="isDisabled"
+    :is-app-rtl="header.isAppRtl"
     :error-messages="errorMessages"
     :error="error"
     append-inner-icon="none"
@@ -225,6 +228,9 @@ const placeholder = (header) => {
   <LicensePlateInput
     v-if="header.type === 'license_plate'"
     v-model="item[header.key]"
+    :validate-on="header.validateOn"
+    :rules="header.rules"
+    :error="error"
     class="pa-0 h-100 app-flex-1 app-max-w-150px app-input-outline"
     :custom-id="`field.${index}.${header.key}`"
     :error-messages="errorMessages"
@@ -235,12 +241,13 @@ const placeholder = (header) => {
     v-if="header.type === 'manual_date'"
     v-model="item[header.key]"
     class="pa-0 h-100 app-flex-1 app-input-outline"
-    :custom-id="`field.${index}.${header.key}`"
+    :validate-on="header.validateOn"
     :rules="header.rules"
+    :error="error"
+    :custom-id="`field.${index}.${header.key}`"
     :type="item[header.dependsOn]"
     :disabled="isDisabled"
     :error-messages="errorMessages"
-    :error="error"
     hide-details
   />
 </template>

package/dist/types.d.ts

@@ -8,6 +8,9 @@ string |
 number |
 null
 
+export type ValidateOn = "submit lazy" | "lazy" | "blur" | "input" | "submit" | "input lazy" | "blur lazy" | "lazy input" | "lazy blur" | "lazy submit" | undefined
+
+
 export type ItemData = Record<string, string | number | null>
 export type Params = Record<string, string | number | null | undefined | string[] | Date[] | number[] | (string | number)[] | boolean>
 
@@ -144,6 +147,8 @@ export type EditableDataTableItem = {
 	options?: Record<string, unknown>[] | OptionItem[] | Ref<OptionItem[]>
 	disableIfEmpty?: boolean
 	maxDate?: Date | null
+	validateOn?: ValidateOn
+	isAppRtl?: boolean
 }
 
 export type OptionItem = {

package/dist/utils/ruleValidator.d.ts

@@ -32,6 +32,7 @@ export declare const ruleValidator: () => {
         month?: string;
         day?: string;
     }) => string | true;
+    requiredPlateValidator: (value: string[] | null | undefined) => string | true;
 };
 export declare const useFormValidation: () => {
     validateAndScroll: (refVForm: VForm | undefined) => Promise<boolean>;

package/dist/utils/ruleValidator.js

@@ -134,6 +134,12 @@ const ruleValidator = () => {
     }
     return true;
   };
+  const requiredPlateValidator = value => {
+    if (!value || !value?.every(val => val !== "")) {
+      return t("validation.required");
+    }
+    return true;
+  };
   const dateValidator = value => {
     if ((0, _utils.isEmpty)(value)) {
       return true;
@@ -168,7 +174,8 @@ const ruleValidator = () => {
     dateValidator,
     regexValidator,
     idNumberValidator,
-    requiredManualDateValidator
+    requiredManualDateValidator,
+    requiredPlateValidator
   };
 };
 exports.ruleValidator = ruleValidator;

package/dist/utils/ruleValidator.mjs

@@ -123,6 +123,12 @@ export const ruleValidator = () => {
     }
     return true;
   };
+  const requiredPlateValidator = (value) => {
+    if (!value || !value?.every((val) => val !== "")) {
+      return t("validation.required");
+    }
+    return true;
+  };
   const dateValidator = (value) => {
     if (isEmpty(value)) {
       return true;
@@ -155,7 +161,8 @@ export const ruleValidator = () => {
     dateValidator,
     regexValidator,
     idNumberValidator,
-    requiredManualDateValidator
+    requiredManualDateValidator,
+    requiredPlateValidator
   };
 };
 export const useFormValidation = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@winchsa/ui",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "private": false,
   "publishConfig": {