@winchsa/ui 0.1.12 → 0.1.13

package/dist/components/IconBtn.vue

@@ -1,14 +1,20 @@
 <script setup>
 import { VBtn } from "vuetify/components";
 const props = defineProps({
-  color: { type: null, required: false, default: "default" },
-  variant: { type: null, required: false, default: "text" },
-  density: { type: null, required: false, default: "comfortable" }
+  color: { type: String, required: false, default: "default" },
+  variant: { type: String, required: false, default: "text" },
+  density: { type: String, required: false, default: "comfortable" }
 });
 </script>
 
 <template>
-  <VBtn :icon="true" v-bind="{ ...props, ...$attrs }">
+  <VBtn
+    :icon="true"
+    :color="props.color"
+    :variant="props.variant"
+    :density="props.density"
+    v-bind="$attrs"
+  >
     <slot />
   </VBtn>
 </template>

package/dist/components/IconBtn.vue.d.ts

@@ -1,8 +1,8 @@
 import { VBtn } from 'vuetify/components';
 type __VLS_Props = {
-    color?: any;
-    variant?: any;
-    density?: any;
+    color?: string;
+    variant?: 'text' | 'flat' | 'outlined' | 'elevated' | 'tonal' | 'plain';
+    density?: 'default' | 'comfortable' | 'compact';
 };
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_6: {};
@@ -12,14 +12,14 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     VBtn: typeof VBtn;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    color: any;
-    density: any;
-    variant: any;
+    color: string;
+    density: "default" | "comfortable" | "compact";
+    variant: "text" | "flat" | "outlined" | "elevated" | "tonal" | "plain";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    color: any;
-    density: any;
-    variant: any;
+    color: string;
+    density: "default" | "comfortable" | "compact";
+    variant: "text" | "flat" | "outlined" | "elevated" | "tonal" | "plain";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/cards/AppCardActions.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import { VCard, VCardItem, VIcon, VOverlay, VExpandTransition, VProgressCircular, VCardTitle, VBtn } from "vuetify/components";
+import { VCard, VCardItem, VIcon, VOverlay, VExpandTransition, VProgressCircular, VCardTitle } from "vuetify/components";
 import IconBtn from "../IconBtn.vue";
 const props = defineProps({
   collapsed: { type: Boolean, required: false, default: false },

package/dist/components/cards/InputCard.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { computed } from "vue";
 import { VLabel } from "vuetify/components";
-import AppCard from "./AppCard.vue";
 import AppLink from "../forms/AppLink.vue";
+import AppCard from "./AppCard.vue";
 const props = defineProps({
   title: { type: String, required: false, default: "" },
   text: { type: [String, Number], required: false, default: "" },

package/dist/components/cards/InputCard.vue.d.ts

@@ -1,6 +1,6 @@
 import { VLabel } from 'vuetify/components';
-import AppCard from './AppCard.vue';
 import AppLink from '../forms/AppLink.vue';
+import AppCard from './AppCard.vue';
 type __VLS_Props = {
     title?: string;
     text?: string | number;
@@ -17,8 +17,8 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     VLabel: typeof VLabel;
-    AppCard: typeof AppCard;
     AppLink: typeof AppLink;
+    AppCard: typeof AppCard;
     colorStyle: typeof colorStyle;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     color: string;

package/dist/components/forms/AppBarSearch.vue

@@ -2,7 +2,7 @@
 import { PerfectScrollbar } from "vue3-perfect-scrollbar";
 import { useMagicKeys } from "@vueuse/core";
 import { ref, toRaw, watch, watchEffect } from "vue";
-import { VList, VListItem, VListSubheader, VListItemTitle, VCardText, VDialog, VIcon, VDivider, VCol, VRow, VTextField, VBtn } from "vuetify/components";
+import { VList, VListItem, VListSubheader, VListItemTitle, VCardText, VDialog, VIcon, VDivider, VCol, VRow, VTextField } from "vuetify/components";
 import IconBtn from "../IconBtn.vue";
 import AppCard from "../cards/AppCard.vue";
 const props = defineProps({

package/dist/components/forms/AppSearchHeader.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { VCardText, VIcon } from "vuetify/components";
 import AppSearchHeaderBg from "../../images/avatar.png";
-import AppTextField from "./AppTextField.vue";
 import AppCard from "../cards/AppCard.vue";
+import AppTextField from "./AppTextField.vue";
 defineProps({
   title: { type: String, required: false },
   subtitle: { type: String, required: false },

package/dist/components/forms/AutocompleteInput.vue

@@ -436,7 +436,7 @@ defineExpose({
 
           <template #clear>
             <div
-              v-if="!disabled && Array.isArray(value) && value.length > 0"
+              v-if="(Array.isArray(value) && value?.length > 0 || value) && value && !disabled"
               class="multiselect-clear cursor-pointer"
               @mousedown.prevent.stop="value = null"
             >

package/dist/components/forms/LicensePlateInput.vue

@@ -7,11 +7,12 @@ const props = defineProps({
   hideDetails: { type: Boolean, required: false },
   label: { type: String, required: false },
   customId: { type: String, required: false },
-  errorMessages: { type: [Array, String], required: false },
-  error: { type: Boolean, required: false }
+  errorMessages: { type: [Array, String], required: false }
 });
 const model = defineModel({ type: [Array, null], ...{ default: ["", "", "", ""] } });
 const LangLabel = computed(() => props.label ? t(props.label) : "");
+const allowedLetters = ["A", "B", "J", "D", "R", "S", "X", "T", "E", "G", "K", "L", "Z", "N", "H", "U", "V"];
+const allowedArabicLetters = ["\u0623", "\u0628", "\u062D", "\u062F", "\u0631", "\u0633", "\u0635", "\u0637", "\u0639", "\u0642", "\u0643", "\u0644", "\u0645", "\u0646", "\u0647", "\u0648", "\u064A"];
 const handleInput = (e, index) => {
   const input = e.target;
   const value = input.value;
@@ -26,7 +27,7 @@ const handleInput = (e, index) => {
     return;
   }
   if (index < 3) {
-    if (/\d/.test(value)) {
+    if (!allowedLetters.includes(value) && !allowedArabicLetters.includes(value)) {
       model.value[index] = "";
       input.value = "";
       return;
@@ -47,12 +48,14 @@ const handleInput = (e, index) => {
 const clear = () => {
   model.value = null;
 };
-const requiredRule = computed(() => {
-  return (value) => {
-    return value?.some(Boolean) || t("validation.required");
-  };
-});
+const requiredRule = (value) => {
+  if (value.length !== 4 || !value.every((item) => item !== "")) {
+    return t("validation.required");
+  }
+  return true;
+};
 watch(() => model.value, (newVal) => {
+  console.log(newVal);
   if (Array.isArray(newVal)) {
     model.value = newVal;
   } else {
@@ -79,7 +82,7 @@ watch(() => model.value, (newVal) => {
           class="app-license-plate-input position-relative"
           style="min-height: 45px;"
           :class="{
-  'app-license-plate-input--error': isValid.value === false || error
+  'app-license-plate-input--error': !isValid.value && validationErrors.value?.length > 0
 }"
         >
           <input
@@ -132,7 +135,7 @@ watch(() => model.value, (newVal) => {
   box-sizing: border-box;
 }
 .app-license-plate-input.app-license-plate-input--error {
-  border-color: rgba(var(--v-theme-error), 1);
+  border-color: rgba(var(--v-theme-error), 1) !important;
 }
 .app-license-plate-input:hover {
   transition: all 0.3s;

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

@@ -3,7 +3,6 @@ type __VLS_Props = {
     label?: string;
     customId?: string;
     errorMessages?: string[] | string;
-    error?: boolean;
 };
 type __VLS_PublicProps = {
     modelValue?: string[] | null;

package/dist/components/forms/ManualDate.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { HijriJS } from "../../utils/hijriDate";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { VLabel, VIcon, VValidation, VMessages } from "vuetify/components";
-import { ruleValidator } from "../../utils/ruleValidator";
+import { HijriJS } from "../../utils/hijriDate";
 const { t } = useI18n();
 const props = defineProps({
   hideDetails: { type: Boolean, required: false },
@@ -12,10 +11,10 @@ const props = defineProps({
   modelValue: { type: String, required: false },
   errorMessages: { type: [Array, String], required: false },
   type: { type: null, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  rules: { type: Array, required: false }
 });
 const emit = defineEmits(["update:model-value"]);
-const { requiredValidator } = ruleValidator();
 const date = ref({
   year: "",
   month: "",
@@ -143,7 +142,8 @@ watch(() => props.modelValue, (val) => {
     <VValidation
       v-slot="{ errorMessages: validationErrors, isValid }"
       v-model="date"
-      :rules="[requiredValidator]"
+      :rules="rules"
+      validate-on="input lazy"
     >
       <div class="d-flex flex-column">
         <VLabel
@@ -152,7 +152,7 @@ watch(() => props.modelValue, (val) => {
           :text="LangLabel"
         />
         <div class="app-date-input position-relative" style="min-height: 45px;" :class="{
-  'app-date-input--error': !isValid || yearIsInvalid,
+  'app-date-input--error': !isValid.value || yearIsInvalid,
   'app-date-input--disabled': disabled
 }">
           <input
@@ -224,13 +224,13 @@ watch(() => props.modelValue, (val) => {
   min-height: 40px;
   height: 100%;
   align-items: center;
-  border: 1px solid rgba(var(--v-border-color), 0.29);
+  border: 1px solid rgba(var(--v-border-color), 0.29) !important;
   border-radius: 6px;
   transition: all 0.5s;
   box-sizing: border-box;
 }
 .app-date-input.app-date-input--error {
-  border-color: rgba(var(--v-theme-error), 1);
+  border-color: rgba(var(--v-theme-error), 1) !important;
 }
 .app-date-input.app-date-input--disabled {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;

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

@@ -6,6 +6,7 @@ type __VLS_Props = {
     errorMessages?: string[] | string;
     type?: 'gregorian' | 'hijri' | string | undefined;
     disabled?: boolean;
+    rules?: ((value: unknown) => string)[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model-value": (value: string) => any;

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

@@ -20,7 +20,7 @@ declare const headers: import("vue").ComputedRef<{
     placeholder?: string;
     type?: import("../../types").EditableDataTableItemType;
     required?: boolean;
-    rules?: ((value: unknown) => typeof value | string)[];
+    rules?: ((value: unknown) => string)[];
     renderDataOnMounted?: boolean;
     renderDataOnBeforeMount?: boolean;
     showDescription?: boolean;

package/dist/components/table/EditableDataTableRow.vue

@@ -161,6 +161,7 @@ const placeholder = (header) => {
     :disable-if-empty="header.disableIfEmpty"
     teleported
     hide-details
+    :clearable="header.clearable"
   />
 
   <AutocompleteInput
@@ -187,6 +188,7 @@ const placeholder = (header) => {
     grouped
     teleported
     hide-details
+    :clearable="header.clearable"
   />
 
   <DatePicker
@@ -226,7 +228,6 @@ const placeholder = (header) => {
     class="pa-0 h-100 app-flex-1 app-max-w-150px app-input-outline"
     :custom-id="`field.${index}.${header.key}`"
     :error-messages="errorMessages"
-    :error="error"
     hide-details
   />
 
@@ -235,6 +236,7 @@ const placeholder = (header) => {
     v-model="item[header.key]"
     class="pa-0 h-100 app-flex-1 app-input-outline"
     :custom-id="`field.${index}.${header.key}`"
+    :rules="header.rules"
     :type="item[header.dependsOn]"
     :disabled="isDisabled"
     :error-messages="errorMessages"

package/dist/types.d.ts

@@ -116,7 +116,7 @@ export type EditableDataTableItem = {
 	placeholder?: string
 	type?: EditableDataTableItemType
 	required?: boolean
-	rules?: ((value: unknown) => typeof value | string)[]
+	rules?: ((value: unknown) => string)[];
 	renderDataOnMounted?: boolean
 	renderDataOnBeforeMount?: boolean
 	showDescription?: boolean

package/dist/utils/hijriDate.js

@@ -60,7 +60,7 @@ class HDateClass {
   }
 }
 exports.HDateClass = HDateClass;
-let currentLanguage = "en";
+const currentLanguage = "en";
 function vlidateHijri(year, month, day) {
   if (month < 1 || month > 12) return false;
   if (day < 1 || day > 30) return false;
@@ -121,7 +121,7 @@ function gregorianToHijri(pYear, pMonth, pDay) {
   const c = Math.floor((b - 122.1) / 365.25);
   const d = Math.floor(365.25 * c);
   let monthResult = Math.floor((b - d) / 30.6001);
-  let dayResult = b - d - Math.floor(30.6001 * monthResult);
+  const dayResult = b - d - Math.floor(30.6001 * monthResult);
   if (monthResult > 13) {
     monthResult -= 12;
   }

package/dist/utils/hijriDate.mjs

@@ -1824,7 +1824,7 @@ class HDateClass {
     return "";
   }
 }
-let currentLanguage = "en";
+const currentLanguage = "en";
 function vlidateHijri(year, month, day) {
   if (month < 1 || month > 12)
     return false;
@@ -1890,7 +1890,7 @@ function gregorianToHijri(pYear, pMonth, pDay) {
   const c = Math.floor((b - 122.1) / 365.25);
   const d = Math.floor(365.25 * c);
   let monthResult = Math.floor((b - d) / 30.6001);
-  let dayResult = b - d - Math.floor(30.6001 * monthResult);
+  const dayResult = b - d - Math.floor(30.6001 * monthResult);
   if (monthResult > 13) {
     monthResult -= 12;
   }

package/dist/utils/ruleValidator.d.ts

@@ -26,6 +26,12 @@ export declare const ruleValidator: () => {
     ibanValidator: (value: unknown) => string | true;
     dateValidator: (value: unknown) => string | true;
     regexValidator: (value: string, regex: RegExp, message?: string) => string | true;
+    idNumberValidator: (value: string | number | null) => string | undefined;
+    requiredManualDateValidator: (value: {
+        year?: string;
+        month?: string;
+        day?: string;
+    }) => string | true;
 };
 export declare const useFormValidation: () => {
     validateAndScroll: (refVForm: VForm | undefined) => Promise<boolean>;

package/dist/utils/ruleValidator.js

@@ -36,6 +36,19 @@ const ruleValidator = () => {
     }
     return !!String(value).trim().length || t("validation.iban");
   };
+  const idNumberValidator = value => {
+    const str = value?.toString() || "";
+    const validStarts = ["1", "2", "3", "4"];
+    if (str.length !== 10 || !validStarts.includes(str[0])) {
+      return t("validation.invalid");
+    }
+  };
+  const requiredManualDateValidator = value => {
+    if ((0, _utils.isEmpty)(value?.day) || (0, _utils.isEmpty)(value?.month) || (0, _utils.isEmpty)(value?.year)) {
+      return t("validation.required");
+    }
+    return true;
+  };
   const emailValidator = value => {
     if ((0, _utils.isEmpty)(value)) {
       return true;
@@ -153,7 +166,9 @@ const ruleValidator = () => {
     lengthValidator,
     ibanValidator,
     dateValidator,
-    regexValidator
+    regexValidator,
+    idNumberValidator,
+    requiredManualDateValidator
   };
 };
 exports.ruleValidator = ruleValidator;

package/dist/utils/ruleValidator.mjs

@@ -28,6 +28,19 @@ export const ruleValidator = () => {
     }
     return !!String(value).trim().length || t("validation.iban");
   };
+  const idNumberValidator = (value) => {
+    const str = value?.toString() || "";
+    const validStarts = ["1", "2", "3", "4"];
+    if (str.length !== 10 || !validStarts.includes(str[0])) {
+      return t("validation.invalid");
+    }
+  };
+  const requiredManualDateValidator = (value) => {
+    if (isEmpty(value?.day) || isEmpty(value?.month) || isEmpty(value?.year)) {
+      return t("validation.required");
+    }
+    return true;
+  };
   const emailValidator = (value) => {
     if (isEmpty(value)) {
       return true;
@@ -140,7 +153,9 @@ export const ruleValidator = () => {
     lengthValidator,
     ibanValidator,
     dateValidator,
-    regexValidator
+    regexValidator,
+    idNumberValidator,
+    requiredManualDateValidator
   };
 };
 export const useFormValidation = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@winchsa/ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -45,6 +45,7 @@
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.73.3",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@types/node": "20.17.27",
     "@vitejs/plugin-vue": "^4.6.2",
     "eslint": "^8.57.1",
@@ -62,8 +63,8 @@
   "scripts": {
     "dev": "vite",
     "build": "unbuild",
-    "lint": "eslint \"**/*.{ts,vue,mjs,json}\"",
-    "lint:fix": "eslint \"**/*.{ts,vue,mjs,json}\" --fix",
+    "lint": "eslint \"**/*.{ts,vue,mjs}\"",
+    "lint:fix": "eslint \"**/*.{ts,vue,mjs}\" --fix",
     "bump": "pnpm version patch && pnpm run build && git add . && git commit -m \"chore: release v$(node -p \"require('./package.json').version\")\""
   }
 }