@ramathibodi/nuxt-commons 0.1.74 → 4.0.0

package/dist/runtime/components/form/Date.vue

@@ -1,219 +1,166 @@
-<script lang="ts" setup>
-/**
- * FormDate is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
- * This doc block is consumed by vue-docgen for generated API documentation.
- */
-import { ref, watch, watchEffect, nextTick, defineExpose, computed} from 'vue'
-import { VTextField } from 'vuetify/components/VTextField'
-import Datepicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
+<script setup>
+import { ref, watch, watchEffect, nextTick, computed } from "vue";
+import { VTextField } from "vuetify/components/VTextField";
+import Datepicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
 import { isArray, isString } from "lodash-es";
-import { type dateFormat, Datetime } from '../../utils/datetime'
+import { Datetime } from "../../utils/datetime";
 import { useRules } from "../../composables/utils/validation";
-import { th } from 'date-fns/locale';
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
-  locale?: 'TH' | 'EN' // Locale used for date/time formatting and localized labels.
-  format?: dateFormat | string // Output format used when converting the value for display or emit.
-  modelValue?: string | null // Bound value for v-model synchronization with the parent component.
-  holiday?: object[] | undefined // Holiday date list used to decorate or block specific dates.
-  minDate?: Date | string // earliest selectable date allowed by business rules
-  maxDate?: Date | string // latest selectable date allowed by business rules
-  pickerOnly?: boolean // forces value selection through picker interaction only
-  flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[] // picker navigation flow order shown to users
-  rules?: typeof VTextField['rules'] // validation rules applied before accepting input
-
-  defaultDate?: boolean | string // default date behavior/value when model is initially empty
-}
-
-/**
- * Public props accepted by FormDate.
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
- */
-const props = withDefaults(defineProps<Props>(), {
-  locale: 'TH',
-  format: 'shortDate',
-  pickerOnly: false,
-  flow: () => [],
-
-  defaultDate: false,
-})
-
-/**
- * Custom events emitted by FormDate.
- * Parents can listen to these events to react to user actions and internal state changes.
- */
-const emit = defineEmits(['update:modelValue'])
-
+import { th } from "date-fns/locale";
+const props = defineProps({
+  locale: { type: String, required: false, default: "TH" },
+  format: { type: String, required: false, default: "shortDate" },
+  modelValue: { type: [String, null], required: false },
+  holiday: { type: null, required: false },
+  minDate: { type: [Date, String], required: false },
+  maxDate: { type: [Date, String], required: false },
+  pickerOnly: { type: Boolean, required: false, default: false },
+  flow: { type: Array, required: false, default: () => [] },
+  rules: { type: null, required: false },
+  defaultDate: { type: [Boolean, String], required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue"]);
 const computedRules = computed(() => {
   if (props.rules && isArray(props.rules)) {
-
     const ruleConfig = {
-      singleModifier: ['DateFuture', 'DateHappen'],
-      twoPartModifier: ['DateAfter', 'DateBefore', 'DateEqual']
+      singleModifier: ["DateFuture", "DateHappen"],
+      twoPartModifier: ["DateAfter", "DateBefore", "DateEqual"]
     };
-
-    const ruleMapping : Record<string,Function> = {
-      'DateFuture' : useRules().DateFuture,
-      'DateHappen' : useRules().DateHappen,
-      'DateAfter' : useRules().DateAfter,
-      'DateBefore' : useRules().DatetimeFuture,
-      'DateEqual' : useRules().DateEqual,
-    }
-
-    const applyRule = (ruleName: string, modifier: any) => {
-      if (props.readonly) return true
-      const ruleFunc = ruleMapping[ruleName](...Object.values(modifier))
-      return ruleFunc(selectedDate.value)
+    const ruleMapping = {
+      "DateFuture": useRules().DateFuture,
+      "DateHappen": useRules().DateHappen,
+      "DateAfter": useRules().DateAfter,
+      "DateBefore": useRules().DatetimeFuture,
+      "DateEqual": useRules().DateEqual
+    };
+    const applyRule = (ruleName, modifier) => {
+      if (props.readonly) return true;
+      const ruleFunc = ruleMapping[ruleName](...Object.values(modifier));
+      return ruleFunc(selectedDate.value);
     };
-
     return props.rules.map((rule) => {
       if (isString(rule)) {
-        const ruleParts = rule.split('#')
-        const baseRule = ruleParts[0]
-
+        const ruleParts = rule.split("#");
+        const baseRule = ruleParts[0];
         if (ruleConfig.singleModifier.includes(baseRule)) {
-          const modifiers = ruleParts.slice(1).join('#').trim() || undefined
+          const modifiers = ruleParts.slice(1).join("#").trim() || void 0;
           return applyRule(baseRule, { modifiers });
         }
-
         if (ruleConfig.twoPartModifier.includes(baseRule)) {
-          const [modifier1, ...modifierRest] = ruleParts.slice(1)
-          const combinedModifier = modifierRest.join('#') || undefined
-          return applyRule(baseRule, { modifier1, combinedModifier })
+          const [modifier1, ...modifierRest] = ruleParts.slice(1);
+          const combinedModifier = modifierRest.join("#") || void 0;
+          return applyRule(baseRule, { modifier1, combinedModifier });
         }
       }
-      return rule
-    })
+      return rule;
+    });
   } else {
-    return props.rules
+    return props.rules;
   }
-})
-
-const selectedDate = ref<string | null>(null)
-const displayedDate = ref<string | null>(null)
-
-const isMenuOpen = ref(false)
-const isTextFieldFocused = ref(false)
-const hasTextFieldInput = ref(false)
-
-function handleTextFieldFocus(event: Event) {
-  isTextFieldFocused.value = true
+});
+const selectedDate = ref(null);
+const displayedDate = ref(null);
+const isMenuOpen = ref(false);
+const isTextFieldFocused = ref(false);
+const hasTextFieldInput = ref(false);
+function handleTextFieldFocus(event) {
+  isTextFieldFocused.value = true;
   nextTick(() => {
-    (event.target as HTMLInputElement).select()
-  })
+    event.target.select();
+  });
 }
-
 function handleTextFieldInput() {
   if (!hasTextFieldInput.value) {
-    hasTextFieldInput.value = true
-    isMenuOpen.value = false
+    hasTextFieldInput.value = true;
+    isMenuOpen.value = false;
   }
 }
-
 function handleTextFieldBlur() {
   if (hasTextFieldInput.value) {
-    updateDate(displayedDate.value)
-    hasTextFieldInput.value = false
+    updateDate(displayedDate.value);
+    hasTextFieldInput.value = false;
   }
-  isTextFieldFocused.value = false
+  isTextFieldFocused.value = false;
 }
-
 function handleTextFieldEnterKey() {
-  handleTextFieldBlur()
+  handleTextFieldBlur();
 }
-
-function updateDatePicker(dateString: string | null) {
-  isMenuOpen.value = false
-  updateDate(dateString)
+function updateDatePicker(dateString) {
+  isMenuOpen.value = false;
+  updateDate(dateString);
 }
-
-function updateDate(dateString: string | null) {
-  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
+function updateDate(dateString) {
+  const dateTime = Datetime().fromString(dateString, void 0, props.locale);
   if (!dateTime.luxonDateTime.isValid) {
-    displayedDate.value = null
-    selectedDate.value = null
-  }
-  else {
-    selectedDate.value = dateTime.toFormat('yyyy-MM-dd', 'EN')
-    displayedDate.value = selectedDate.value
+    displayedDate.value = null;
+    selectedDate.value = null;
+  } else {
+    selectedDate.value = dateTime.toFormat("yyyy-MM-dd", "EN");
+    displayedDate.value = selectedDate.value;
   }
-
-  if (!isTextFieldFocused.value) displayedDate.value = formatDate(displayedDate.value)
+  if (!isTextFieldFocused.value) displayedDate.value = formatDate(displayedDate.value);
 }
-
-function formatDate(dateString: string | null) {
-  if (!dateString) return null
-
-  const dateTime = Datetime().fromString(dateString, undefined, props.locale)
-  return dateTime.toFormat(props.format, props.locale)
+function formatDate(dateString) {
+  if (!dateString) return null;
+  const dateTime = Datetime().fromString(dateString, void 0, props.locale);
+  return dateTime.toFormat(props.format, props.locale);
 }
-
 function handleTextFieldClear() {
-  resetDatePicker()
+  resetDatePicker();
 }
-
 function resetDatePicker() {
-  selectedDate.value = null
-  displayedDate.value = null
+  selectedDate.value = null;
+  displayedDate.value = null;
 }
-
 watchEffect(() => {
   if (!isTextFieldFocused.value && selectedDate.value) {
-    const dateTime = Datetime().fromString(selectedDate.value, undefined, props.locale)
-    displayedDate.value = dateTime.toFormat(props.format, props.locale)
-  }
-  else {
-    displayedDate.value = selectedDate.value
+    const dateTime = Datetime().fromString(selectedDate.value, void 0, props.locale);
+    displayedDate.value = dateTime.toFormat(props.format, props.locale);
+  } else {
+    displayedDate.value = selectedDate.value;
   }
-})
-
+});
 watch(selectedDate, (newValue) => {
-  emit('update:modelValue', newValue)
-})
-
-watch(() => props.modelValue, (newValue,oldValue) => {
+  emit("update:modelValue", newValue);
+});
+watch(() => props.modelValue, (newValue, oldValue) => {
   if (!oldValue && !newValue && props.defaultDate) {
     if (!oldValue && !newValue && props.defaultDate) {
-      let defaultDate: string | null = null;
-
+      let defaultDate = null;
       if (props.defaultDate === true) {
-        defaultDate = Datetime().now().toFormat('yyyy-MM-dd', 'EN');
-      } else if (typeof props.defaultDate === 'string' &&/^[+-]?\d+$/.test(props.defaultDate.trim())) {
-        defaultDate = Datetime().now().luxonDateTime
-            .plus({ days: Number(props.defaultDate) })
-            .toFormat('yyyy-MM-dd');
+        defaultDate = Datetime().now().toFormat("yyyy-MM-dd", "EN");
+      } else if (typeof props.defaultDate === "string" && /^[+-]?\d+$/.test(props.defaultDate.trim())) {
+        defaultDate = Datetime().now().luxonDateTime.plus({ days: Number(props.defaultDate) }).toFormat("yyyy-MM-dd");
       } else {
-        const dateTime = Datetime().fromString(props.defaultDate)
-        if (dateTime.luxonDateTime.isValid) defaultDate = dateTime.toFormat('yyyy-MM-dd')
+        const dateTime = Datetime().fromString(props.defaultDate);
+        if (dateTime.luxonDateTime.isValid) defaultDate = dateTime.toFormat("yyyy-MM-dd");
       }
-
       updateDate(defaultDate);
     } else {
       updateDate(newValue ?? null);
     }
   } else {
-    updateDate(props.modelValue || null)
+    updateDate(props.modelValue || null);
   }
-}, { immediate: true })
-
-function toggleMenuOpen(trigger: string) {
-  if ((trigger === 'textField' && props.pickerOnly) || (trigger === 'icon' && !props.pickerOnly)) {
-    if (!props.readonly) isMenuOpen.value = true
+}, { immediate: true });
+function toggleMenuOpen(trigger) {
+  if (trigger === "textField" && props.pickerOnly || trigger === "icon" && !props.pickerOnly) {
+    if (!props.readonly) isMenuOpen.value = true;
   }
 }
-
-const textFieldRef = ref<VTextField>()
+const textFieldRef = ref();
 function validate() {
-  textFieldRef.value?.validate()
+  textFieldRef.value?.validate();
 }
 function resetValidation() {
-  textFieldRef.value?.resetValidation()
+  textFieldRef.value?.resetValidation();
 }
-
 defineExpose({
-  reset : resetDatePicker,validate,resetValidation, isValid: textFieldRef.value?.isValid
-})
+  reset: resetDatePicker,
+  validate,
+  resetValidation,
+  isValid: textFieldRef.value?.isValid
+});
 </script>
 
 <template>
@@ -257,15 +204,15 @@ defineExpose({
         auto-apply
         inline
         :locale="locale"
-        :format-locale="(locale=='TH') ? th : undefined"
+        :format-locale="locale == 'TH' ? th : void 0"
         @update:model-value="updateDatePicker"
     >
-      <template #year="{value}" v-if="locale=='TH'">
-        {{value+543}}
+      <template #year="{ value }" v-if="locale == 'TH'">
+        {{value + 543}}
       </template>
-      <template #year-overlay-value="{value}" v-if="locale=='TH'">
-        {{value+543}}
+      <template #year-overlay-value="{ value }" v-if="locale == 'TH'">
+        {{value + 543}}
       </template>
     </Datepicker>
   </v-menu>
-</template>
+</template>

package/dist/runtime/components/form/Date.vue.d.ts

@@ -0,0 +1,86 @@
+import { VTextField } from 'vuetify/components/VTextField';
+import '@vuepic/vue-datepicker/dist/main.css';
+import { type dateFormat } from '../../utils/datetime.js';
+interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
+    locale?: 'TH' | 'EN';
+    format?: dateFormat | string;
+    modelValue?: string | null;
+    holiday?: object[] | undefined;
+    minDate?: Date | string;
+    maxDate?: Date | string;
+    pickerOnly?: boolean;
+    flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[];
+    rules?: typeof VTextField['rules'];
+    defaultDate?: boolean | string;
+}
+declare function resetDatePicker(): void;
+declare function toggleMenuOpen(trigger: string): void;
+declare function validate(): void;
+declare function resetValidation(): void;
+declare var __VLS_25: {
+    toggleMenuOpen: typeof toggleMenuOpen;
+    activatorProps: Record<string, any>;
+    id: import("vue").ComputedRef<string>;
+    messagesId: import("vue").ComputedRef<string | undefined>;
+    isDirty: import("vue").ComputedRef<boolean>;
+    isDisabled: import("vue").ComputedRef<boolean>;
+    isReadonly: import("vue").ComputedRef<boolean>;
+    isPristine: import("vue").Ref<boolean>;
+    isValid: import("vue").ComputedRef<boolean | null>;
+    isValidating: import("vue").Ref<boolean>;
+    hasDetails: import("vue").Ref<boolean>;
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => void;
+};
+type __VLS_Slots = {} & {
+    append?: (props: typeof __VLS_25) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    locale: string;
+    format: string;
+    pickerOnly: boolean;
+    flow: () => never[];
+    defaultDate: boolean;
+}>>, {
+    reset: typeof resetDatePicker;
+    validate: typeof validate;
+    resetValidation: typeof resetValidation;
+    isValid: boolean | null | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    locale: string;
+    format: string;
+    pickerOnly: boolean;
+    flow: () => never[];
+    defaultDate: boolean;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/DateTime.d.vue.ts

@@ -0,0 +1,36 @@
+import { type dateFormat } from '../../utils/datetime.js';
+interface Props {
+    modelValue?: string | null;
+    format?: dateFormat | string;
+    label?: string;
+    enableSeconds?: boolean;
+    rules?: typeof import('vuetify/components')['VTextField']['rules'];
+    dateRules?: typeof import('vuetify/components')['VTextField']['rules'];
+    timeRules?: typeof import('vuetify/components')['VTextField']['rules'];
+    dense?: boolean;
+    pickerOnly?: boolean;
+    minDate?: Date | string;
+    maxDate?: Date | string;
+    readonly?: boolean;
+    locale?: 'TH' | 'EN';
+    defaultDate?: boolean | string;
+    defaultDateTime?: boolean | string;
+    fixedDate?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    readonly: boolean;
+    locale: "TH" | "EN";
+    format: dateFormat | string;
+    dense: boolean;
+    pickerOnly: boolean;
+    defaultDate: boolean | string;
+    enableSeconds: boolean;
+    defaultDateTime: boolean | string;
+    fixedDate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;