@ramathibodi/nuxt-commons 0.1.25 → 0.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": "^3.0.0"
6
6
  },
7
- "version": "0.1.25",
7
+ "version": "0.1.27",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "0.8.3",
10
10
  "unbuild": "2.0.0"
@@ -1,11 +1,13 @@
1
1
  <script lang="ts" setup>
2
+ import { ref, watch, watchEffect, nextTick, defineExpose, computed} from 'vue'
3
+ import { VTextField } from 'vuetify/components/VTextField'
2
4
  import Datepicker from '@vuepic/vue-datepicker'
3
5
  import '@vuepic/vue-datepicker/dist/main.css'
4
- import { ref, watch, watchEffect, nextTick } from 'vue'
6
+ import {isArray, isString} from "lodash-es";
5
7
  import { type dateFormat, Datetime } from '../../utils/datetime'
8
+ import { useRules } from "../../composables/utils/validation";
6
9
 
7
- interface Props {
8
- readonly?: boolean
10
+ interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
9
11
  locale?: 'TH' | 'EN'
10
12
  format?: dateFormat | string
11
13
  modelValue?: string | null
@@ -14,10 +16,10 @@ interface Props {
14
16
  maxDate?: Date | string
15
17
  pickerOnly?: boolean
16
18
  flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[]
19
+ rules?: typeof VTextField['rules']
17
20
  }
18
21
 
19
22
  const props = withDefaults(defineProps<Props>(), {
20
- readonly: false,
21
23
  locale: 'TH',
22
24
  format: 'shortDate',
23
25
  pickerOnly: false,
@@ -26,6 +28,51 @@ const props = withDefaults(defineProps<Props>(), {
26
28
 
27
29
  const emit = defineEmits(['update:modelValue'])
28
30
 
31
+ const computedRules = computed(() => {
32
+ if (props.rules && isArray(props.rules)) {
33
+
34
+ const ruleConfig = {
35
+ singleModifier: ['DateFuture', 'DateHappen'],
36
+ twoPartModifier: ['DateAfter', 'DateBefore', 'DateEqual']
37
+ };
38
+
39
+ const ruleMapping : Record<string,Function> = {
40
+ 'DateFuture' : useRules().DateFuture,
41
+ 'DateHappen' : useRules().DateHappen,
42
+ 'DateAfter' : useRules().DateAfter,
43
+ 'DateBefore' : useRules().DatetimeFuture,
44
+ 'DateEqual' : useRules().DateEqual,
45
+ }
46
+
47
+ const applyRule = (ruleName: string, modifier: any) => {
48
+ if (props.readonly) return true
49
+ const ruleFunc = ruleMapping[ruleName](...Object.values(modifier))
50
+ return ruleFunc(selectedDate.value)
51
+ };
52
+
53
+ return props.rules.map((rule) => {
54
+ if (isString(rule)) {
55
+ const ruleParts = rule.split('#')
56
+ const baseRule = ruleParts[0]
57
+
58
+ if (ruleConfig.singleModifier.includes(baseRule)) {
59
+ const modifiers = ruleParts.slice(1).join('#').trim() || undefined
60
+ return applyRule(baseRule, { modifiers });
61
+ }
62
+
63
+ if (ruleConfig.twoPartModifier.includes(baseRule)) {
64
+ const [modifier1, ...modifierRest] = ruleParts.slice(1)
65
+ const combinedModifier = modifierRest.join('#') || undefined
66
+ return applyRule(baseRule, { modifier1, combinedModifier })
67
+ }
68
+ }
69
+ return rule
70
+ })
71
+ } else {
72
+ return props.rules
73
+ }
74
+ })
75
+
29
76
  const selectedDate = ref<string | null>(null)
30
77
  const displayedDate = ref<string | null>(null)
31
78
 
@@ -114,9 +161,21 @@ watch(() => props.modelValue, () => {
114
161
 
115
162
  function toggleMenuOpen(trigger: string) {
116
163
  if ((trigger === 'textField' && props.pickerOnly) || (trigger === 'icon' && !props.pickerOnly)) {
117
- isMenuOpen.value = true
164
+ if (!props.readonly) isMenuOpen.value = true
118
165
  }
119
166
  }
167
+
168
+ const textFieldRef = ref<VTextField>()
169
+ function validate() {
170
+ textFieldRef.value?.validate()
171
+ }
172
+ function resetValidation() {
173
+ textFieldRef.value?.resetValidation()
174
+ }
175
+
176
+ defineExpose({
177
+ reset : resetDatePicker,validate,resetValidation, isValid: textFieldRef.value?.isValid
178
+ })
120
179
  </script>
121
180
 
122
181
  <template>
@@ -126,9 +185,9 @@ function toggleMenuOpen(trigger: string) {
126
185
  >
127
186
  <template #activator="{ props: activatorProps }">
128
187
  <v-text-field
129
- ref="textField"
188
+ ref="textFieldRef"
130
189
  v-model="displayedDate"
131
- :readonly="readonly"
190
+ :rules="computedRules"
132
191
  v-bind="$attrs"
133
192
  @focus="handleTextFieldFocus"
134
193
  @blur="handleTextFieldBlur"
@@ -1,7 +1,9 @@
1
1
  <script lang="ts" setup>
2
- import { ref, computed, watch, watchEffect } from 'vue'
3
- import { union } from 'lodash-es'
2
+ import { ref, computed, watch, watchEffect, nextTick } from 'vue'
3
+ import { union,isBoolean,isArray,isString } from 'lodash-es'
4
+ import { VTextField } from 'vuetify/components/VTextField'
4
5
  import { type dateFormat, Datetime } from '../../utils/datetime'
6
+ import { useRules } from '../../composables/utils/validation'
5
7
 
6
8
  interface Props {
7
9
  modelValue?: string | null
@@ -17,6 +19,10 @@ interface Props {
17
19
  maxDate?: Date | string
18
20
  readonly?: boolean
19
21
  locale?: 'TH' | 'EN'
22
+
23
+ defaultDate?: boolean | string,
24
+ defaultDateTime?: boolean | string,
25
+ fixedDate?: boolean
20
26
  }
21
27
 
22
28
  const props = withDefaults(defineProps<Props>(), {
@@ -26,12 +32,67 @@ const props = withDefaults(defineProps<Props>(), {
26
32
  format: 'shortDate',
27
33
  pickerOnly: false,
28
34
  readonly: false,
35
+ defaultDate: false,
36
+ defaultDateTime: false,
37
+ fixedDate: false,
29
38
  })
30
39
 
31
40
  const emit = defineEmits(['update:modelValue'])
32
41
 
33
- const computedDateRules = computed(() => union(props.rules, props.dateRules))
34
- const computedTimeRules = computed(() => union(props.rules, props.timeRules))
42
+ const dateRef = ref<VTextField>()
43
+ const timeRef = ref<VTextField>()
44
+
45
+ const computedRules = computed(() => {
46
+ const isoDateString = Datetime().fromString(`${datePart.value}T${timePart.value}`).toISO()
47
+
48
+ if (props.rules && isArray(props.rules)) {
49
+
50
+ const ruleConfig = {
51
+ singleModifier: ['DateFuture', 'DatetimeFuture', 'DateHappen', 'DatetimeHappen'],
52
+ twoPartModifier: ['DateAfter', 'DateBefore', 'DateEqual']
53
+ };
54
+
55
+ const ruleMapping : Record<string,Function> = {
56
+ 'DateFuture' : useRules().DateFuture,
57
+ 'DatetimeFuture' : useRules().DatetimeFuture,
58
+ 'DateHappen' : useRules().DateHappen,
59
+ 'DatetimeHappen' : useRules().DatetimeHappen,
60
+ 'DateAfter' : useRules().DateAfter,
61
+ 'DateBefore' : useRules().DatetimeFuture,
62
+ 'DateEqual' : useRules().DateEqual,
63
+ }
64
+
65
+ const applyRule = (ruleName: string, modifier: any) => {
66
+ if (props.readonly) return true
67
+ const ruleFunc = ruleMapping[ruleName](...Object.values(modifier))
68
+ return ruleFunc(isoDateString)
69
+ };
70
+
71
+ return props.rules.map((rule) => {
72
+ if (isString(rule)) {
73
+ const ruleParts = rule.split('#')
74
+ const baseRule = ruleParts[0]
75
+
76
+ if (ruleConfig.singleModifier.includes(baseRule)) {
77
+ const modifiers = ruleParts.slice(1).join('#').trim() || undefined
78
+ return applyRule(baseRule, { modifiers });
79
+ }
80
+
81
+ if (ruleConfig.twoPartModifier.includes(baseRule)) {
82
+ const [modifier1, ...modifierRest] = ruleParts.slice(1)
83
+ const combinedModifier = modifierRest.join('#') || undefined
84
+ return applyRule(baseRule, { modifier1, combinedModifier })
85
+ }
86
+ }
87
+ return rule
88
+ })
89
+ } else {
90
+ return props.rules
91
+ }
92
+ })
93
+
94
+ const computedDateRules = computed(() => union(computedRules.value, props.dateRules))
95
+ const computedTimeRules = computed(() => union(computedRules.value, props.timeRules))
35
96
 
36
97
  const datePart = ref<string | null>(null)
37
98
  const timePart = ref<string | null>(null)
@@ -40,6 +101,18 @@ const pauseEmit = ref(false)
40
101
  function reset() {
41
102
  datePart.value = null
42
103
  timePart.value = null
104
+ if (props.defaultDateTime) {
105
+ const dateTime = (isBoolean(props.defaultDateTime)) ? Datetime().now() : Datetime().fromString(props.defaultDateTime)
106
+ if (dateTime.luxonDateTime.isValid) {
107
+ datePart.value = dateTime.toFormat('yyyy-MM-dd')
108
+ timePart.value = dateTime.toFormat('HH:mm:ss')
109
+ }
110
+ } else {
111
+ if (props.defaultDate) {
112
+ const dateTime = (isBoolean(props.defaultDate)) ? Datetime().now() : Datetime().fromString(props.defaultDate)
113
+ if (dateTime.luxonDateTime.isValid) datePart.value = dateTime.toFormat('yyyy-MM-dd')
114
+ }
115
+ }
43
116
  }
44
117
 
45
118
  watchEffect(() => {
@@ -53,6 +126,18 @@ watchEffect(() => {
53
126
  }
54
127
  })
55
128
 
129
+ watch(computedDateRules,()=>{
130
+ if (!props.readonly) nextTick(()=>dateRef.value?.validate())
131
+ },{
132
+ deep: true
133
+ })
134
+
135
+ watch(computedTimeRules,()=>{
136
+ if (!props.readonly) nextTick(()=>timeRef.value?.validate())
137
+ },{
138
+ deep: true
139
+ })
140
+
56
141
  watch(() => props.modelValue, () => {
57
142
  pauseEmit.value = true
58
143
  if (!props.modelValue) {
@@ -81,11 +166,13 @@ watch(() => props.modelValue, () => {
81
166
  <v-col cols="8">
82
167
  <FormDate
83
168
  v-model="datePart"
169
+ ref="dateRef"
84
170
  :rules="computedDateRules"
85
171
  :label="label"
86
172
  :format="format"
87
173
  :picker-only="pickerOnly"
88
174
  :readonly="readonly"
175
+ :disabled="fixedDate"
89
176
  :min-date="minDate"
90
177
  :max-date="maxDate"
91
178
  v-bind="$attrs"
@@ -94,6 +181,7 @@ watch(() => props.modelValue, () => {
94
181
  <v-col cols="4">
95
182
  <FormTime
96
183
  v-model="timePart"
184
+ ref="timeRef"
97
185
  :rules="computedTimeRules"
98
186
  :label="label"
99
187
  :enable-seconds="enableSeconds"
@@ -1,6 +1,6 @@
1
1
  <script lang="ts" setup>
2
2
  import { VueSignaturePad } from 'vue-signature-pad';
3
- import { type Ref, ref, onMounted, onBeforeUnmount } from 'vue'
3
+ import { type Ref, ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
4
4
 
5
5
  interface SignatureOptions {
6
6
  penColor: string
@@ -9,14 +9,16 @@ interface SignatureOptions {
9
9
  }
10
10
 
11
11
  interface SignatureProps {
12
- title?: string
13
- titleConfirm?: string
14
- modelValue?: string
12
+ title?: string
13
+ btnName?: string
14
+ titleConfirm?: string
15
+ modelValue?: string
15
16
  }
16
17
 
17
18
  const props = withDefaults(defineProps<SignatureProps>(), {
18
- title: 'Draw Your Signature',
19
- titleConfirm: 'I Accept My Signature',
19
+ title: 'Draw Your Signature',
20
+ btnName: 'Draw Your Signature',
21
+ titleConfirm: 'I Accept My Signature',
20
22
  })
21
23
 
22
24
  const signaturePadRef: Ref<any> = ref(null)
@@ -58,9 +60,14 @@ const changePenColor = (color: string): void => {
58
60
  }
59
61
 
60
62
  const openSignatureDialog = (): void => {
61
- selectedColor.value = defaultColor
62
- signatureOptions.value = { penColor: defaultColor }
63
- isDialogOpen.value = true
63
+ selectedColor.value = defaultColor
64
+ signatureOptions.value = { penColor: defaultColor }
65
+ isDialogOpen.value = true
66
+ nextTick(() =>{
67
+ if (props.modelValue) {
68
+ signaturePadRef.value.fromDataURL(props.modelValue)
69
+ }
70
+ });
64
71
  }
65
72
 
66
73
  const signaturePadHeight: Ref<string> = ref('')
@@ -72,6 +79,9 @@ const updateSignaturePadHeight = () => {
72
79
  onMounted(() => {
73
80
  updateSignaturePadHeight()
74
81
  window.addEventListener('resize', updateSignaturePadHeight)
82
+ if (props.modelValue) {
83
+ signatureData.value = props.modelValue
84
+ }
75
85
  })
76
86
 
77
87
  onBeforeUnmount(() => {
@@ -82,9 +92,7 @@ onBeforeUnmount(() => {
82
92
  <template>
83
93
  <v-card
84
94
  v-if="signatureData"
85
- class="pa-2 mb-1"
86
- color="grey-lighten-1"
87
- variant="outlined"
95
+ v-bind="$attrs"
88
96
  @click="openSignatureDialog"
89
97
  >
90
98
  <v-img
@@ -100,7 +108,7 @@ onBeforeUnmount(() => {
100
108
  variant="flat"
101
109
  @click="openSignatureDialog"
102
110
  >
103
- {{ props.title }}
111
+ {{ props.btnName }}
104
112
  </v-btn>
105
113
 
106
114
  <v-dialog
@@ -1,11 +1,11 @@
1
1
  <script lang="ts" setup>
2
- import { ref, watch, watchEffect, nextTick } from 'vue'
2
+ import { ref, watch, watchEffect, nextTick, defineExpose } from 'vue'
3
+ import { VTextField } from 'vuetify/components/VTextField'
3
4
  import Datepicker from '@vuepic/vue-datepicker'
4
5
  import '@vuepic/vue-datepicker/dist/main.css'
5
6
  import { Datetime } from '../../utils/datetime'
6
7
 
7
- interface Props {
8
- readonly?: boolean
8
+ interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
9
9
  enableSeconds?: boolean
10
10
  locale?: 'TH' | 'EN'
11
11
  pickerOnly?: boolean
@@ -13,7 +13,6 @@ interface Props {
13
13
  }
14
14
 
15
15
  const props = withDefaults(defineProps<Props>(), {
16
- readonly: false,
17
16
  locale: 'TH',
18
17
  pickerOnly: false,
19
18
  enableSeconds: false,
@@ -103,14 +102,23 @@ watch(() => props.modelValue, () => {
103
102
  setTime(props.modelValue || null)
104
103
  }, { immediate: true })
105
104
 
106
- const isOpenMenu = (value: string) => {
107
- if (value === 'txtField' && props.pickerOnly) {
108
- isMenuOpen.value = true
109
- }
110
- else if (value === 'icon' && !props.pickerOnly) {
111
- isMenuOpen.value = true
105
+ function toggleMenuOpen(trigger: string) {
106
+ if ((trigger === 'textField' && props.pickerOnly) || (trigger === 'icon' && !props.pickerOnly)) {
107
+ if (!props.readonly) isMenuOpen.value = true
112
108
  }
113
109
  }
110
+
111
+ const textFieldRef = ref<VTextField>()
112
+ function validate() {
113
+ textFieldRef.value?.validate()
114
+ }
115
+ function resetValidation() {
116
+ textFieldRef.value?.resetValidation()
117
+ }
118
+
119
+ defineExpose({
120
+ reset,validate,resetValidation, isValid: textFieldRef.value?.isValid
121
+ })
114
122
  </script>
115
123
 
116
124
  <template>
@@ -121,21 +129,20 @@ const isOpenMenu = (value: string) => {
121
129
  >
122
130
  <template #activator="{ props }">
123
131
  <v-text-field
124
- ref="textField"
132
+ ref="textFieldRef"
125
133
  v-model="tempTime"
126
- :readonly="readonly"
127
134
  v-bind="$attrs"
128
135
  @focus="onTextFieldFocus"
129
136
  @blur="onTextFieldBlur"
130
137
  @keydown="onTextFieldTyped"
131
138
  @keyup.enter="onTextFieldEnterKey"
132
139
  @click:clear="onTextFieldClear"
133
- @click="isOpenMenu('txtField')"
140
+ @click="toggleMenuOpen('textField')"
134
141
  >
135
142
  <template #append-inner>
136
143
  <v-icon
137
144
  v-bind="props"
138
- @click="isOpenMenu('icon')"
145
+ @click="toggleMenuOpen('icon')"
139
146
  >
140
147
  fa:fa-regular fa-clock
141
148
  </v-icon>
@@ -1,14 +1,10 @@
1
1
  <script lang="ts" setup>
2
- import { type Ref, ref, watch} from 'vue'
2
+ import {type Ref, ref, watch} from 'vue'
3
3
  import {useAlert} from '../../../composables/alert'
4
- import { isEqual } from 'lodash-es'
5
- interface Props {
6
- modelValue?: any;
7
- readonly?: boolean;
8
- label?: string;
9
- }
4
+ import {isEqual} from 'lodash-es'
5
+ import type {FormDialogCallback} from "../../../types/formDialog";
6
+
10
7
 
11
- const props = defineProps<Props>();
12
8
  const emit = defineEmits<{
13
9
  (e: "update:modelValue", value: {}): void;
14
10
  }>();
@@ -21,58 +17,55 @@ interface Image {
21
17
  props: {};
22
18
  }
23
19
 
24
- const images = ref<Image[]>([]);
20
+ interface Props {
21
+ modelValue?: any[];
22
+ readonly?: boolean;
23
+ label?: string;
24
+ }
25
+ const props = withDefaults(defineProps<Props>(), {
26
+ modelValue: () => [] as any[],
27
+ })
28
+
29
+ const images = ref<any[]>([]);
30
+ // uploadImages = images that are imported by FileBtn
31
+ const uploadImages: Ref<any[]> = ref([]);
32
+ // dialog = dialog for capturing image
25
33
  const dialog: Ref<boolean> = ref(false);
34
+ // dialogUpdate, dataUpdate = dialog for editing image
26
35
  const dialogUpdate: Ref<boolean> = ref(false);
27
36
  const dataUpdate: Ref<Image> = ref({
28
37
  title: "",
29
38
  data: "",
30
39
  props: {},
31
40
  });
41
+
42
+
43
+ // remove selected image
32
44
  const remove = (index: number) => {
33
45
  images.value.splice(index, 1);
34
46
  };
35
47
 
48
+ // open dialog for editing selected image
36
49
  const setDataUpdate = (data: Image) => {
37
50
  dataUpdate.value = data;
38
51
  dialogUpdate.value = true;
39
52
  };
40
53
 
41
54
 
42
- interface FileBase64 {
43
- base64string: string;
44
- mineType: string;
45
- filename: string;
46
- }
47
55
 
48
-
49
- const uploadImages: Ref<any[]> = ref([]);
56
+ // check if File name is already exist
50
57
  const checkDuplicationName = async (currentImageName: string) => {
51
58
  for (const {title} of images.value) {
52
- if(isEqual(title, currentImageName)) return true
59
+ if (isEqual(title, currentImageName)) return true
53
60
  }
54
61
  }
55
-
56
- const update = async () => {
57
- const duplicatedFileName = ref("")
58
- for (const image of uploadImages.value) {
59
- if(await checkDuplicationName(image.name)){
60
- duplicatedFileName.value += `${image.name},`
61
- }else{
62
- const fileBase64: any = await convertFileToBase64(image);
63
- if (isImage(fileBase64)) {
64
- addImage(fileBase64);
65
- } else {
66
- alert?.addAlert({message: `ไฟล์ "${fileBase64.filename}" ไม่ใช่ไฟล์นามสกุล .jpg หรือ .jpeg`, alertType: 'error'})
67
- }
68
- }
69
- }
70
- uploadImages.value = []
71
- if(duplicatedFileName.value !== ""){
72
- alert?.addAlert({message: `ไม่สามารถอัพโหลดไฟล์ ${duplicatedFileName.value}`, alertType: 'error'})
73
- duplicatedFileName.value = ""
74
- }
62
+ // check if the base64 is image or not
63
+ const isImage = (fileBase64: any) => {
64
+ const typeFile: string = fileBase64.mineType.substring(5, 10);
65
+ return typeFile === "image";
75
66
  };
67
+
68
+ // convert FIle that is uploaded by FileBtn to base64
76
69
  const convertFileToBase64 = async (file: any) => {
77
70
  try {
78
71
  const readPromise: any = new Promise((resolve, reject) => {
@@ -97,22 +90,92 @@ const convertFileToBase64 = async (file: any) => {
97
90
  alert?.addAlert({message: error, alertType: 'error'})
98
91
  }
99
92
  };
100
- const isImage = (fileBase64: any) => {
101
- const typeFile: string = fileBase64.mineType.substring(5, 10);
102
- return typeFile === "image" ? true : false;
103
- };
104
93
 
105
- const addImage = (data: FileBase64) => {
94
+ // push image into Field
95
+ const addImage = (data: Image) => {
106
96
  images.value.push({
107
- title: data.filename,
108
- data: `${data.mineType},${data.base64string}`,
97
+ title: data.title,
98
+ data: data.data,
109
99
  props: {},
110
100
  });
111
101
  dialog.value = false;
112
102
  };
103
+
104
+ const update = async () => {
105
+ const duplicatedFileName = ref("")
106
+ for (const image of uploadImages.value) {
107
+ if (await checkDuplicationName(image.name)) {
108
+ duplicatedFileName.value += `${image.name},`
109
+ } else {
110
+ const fileBase64: any = await convertFileToBase64(image);
111
+ if (isImage(fileBase64)) {
112
+ addImage({
113
+ title: fileBase64.filename,
114
+ data: `${fileBase64.mineType},${fileBase64.base64string}`,
115
+ props: {},
116
+ })
117
+ } else {
118
+ alert?.addAlert({
119
+ message: `ไฟล์ "${fileBase64.filename}" ไม่ใช่ไฟล์นามสกุล .jpg หรือ .jpeg`,
120
+ alertType: 'error'
121
+ })
122
+ }
123
+ }
124
+ }
125
+ uploadImages.value = []
126
+ if (duplicatedFileName.value !== "") {
127
+ alert?.addAlert({message: `ไม่สามารถอัพโหลดไฟล์ ${duplicatedFileName.value}`, alertType: 'error'})
128
+ duplicatedFileName.value = ""
129
+ }
130
+ };
131
+
132
+ // Capture Image
133
+ const modelData = ref();
134
+ const captureImage = (image: any, callback: FormDialogCallback) => {
135
+ addImage({
136
+ title: Math.random().toString(36).slice(2, 11),
137
+ data: image.imageCapture,
138
+ props: {}
139
+ })
140
+ callback.done()
141
+ }
142
+
143
+ // open Fullscreen image
144
+ const dialogImageFullScreen = ref(false)
145
+ const imageFullScreen = ref({
146
+ title: "",
147
+ image: ""
148
+ })
149
+
150
+ const openImageFullScreen = (image: { [key: string]: string }) => {
151
+ dialogImageFullScreen.value = true
152
+ imageFullScreen.value.title = image.title
153
+ imageFullScreen.value.image = image.data
154
+ }
155
+
156
+
113
157
  watch(images, () => {
114
- emit("update:modelValue", images);
115
- }, { deep: true });
158
+ emit("update:modelValue", images.value);
159
+ }, {deep: true});
160
+
161
+
162
+ // updating when the parent component adds image to v-model
163
+ watch(props.modelValue, () => {
164
+ images.value = props.modelValue
165
+ }, {deep: true});
166
+
167
+
168
+ onMounted(() => {
169
+ // import images by v-model
170
+ for (const modelValue of props.modelValue) {
171
+ addImage({
172
+ title: modelValue.title ?? Math.random().toString(36).slice(2, 11),
173
+ data: modelValue.data,
174
+ props: {}
175
+ })
176
+ }
177
+ })
178
+
116
179
  </script>
117
180
 
118
181
  <template>
@@ -140,7 +203,7 @@ watch(images, () => {
140
203
  <VCardText>
141
204
  <VRow dense justify="center">
142
205
  <VCol v-for="(image, index) in images" :key="index" cols="4">
143
- <VCard max-height="250">
206
+ <VCard>
144
207
  <VToolbar density="compact">
145
208
  <VToolbarTitle>
146
209
  {{ image.title }}
@@ -161,13 +224,16 @@ watch(images, () => {
161
224
  </VToolbar>
162
225
  <v-img
163
226
  :src="image.data"
164
- @click="setDataUpdate(image)"
165
- ></v-img>
227
+ @click="readonly ? openImageFullScreen(image) : setDataUpdate(image)"
228
+ height="250"
229
+ />
166
230
  </VCard>
167
231
  </VCol>
168
232
  </VRow>
169
233
  </VCardText>
170
234
  </VCard>
235
+
236
+
171
237
  <VDialog
172
238
  v-model="dialogUpdate"
173
239
  fullscreen
@@ -178,10 +244,21 @@ watch(images, () => {
178
244
  @closedDialog="dialogUpdate = false"
179
245
  ></FormImagesPad>
180
246
  </VDialog>
181
- <VDialog v-model="dialog">
182
- <FormImagesCapture
183
247
 
184
- @close-dialog="dialog = false"
185
- ></FormImagesCapture>
186
- </VDialog>
248
+ <FormDialog v-model="dialog" :form-data="modelData" @create="captureImage">
249
+ <template #default="{ data }">
250
+ <FormImagesCapture v-model="data.imageCapture"/>
251
+ </template>
252
+ </FormDialog>
253
+
254
+ <v-dialog v-model="dialogImageFullScreen">
255
+ <v-toolbar :title="imageFullScreen.title">
256
+ <v-spacer/>
257
+ <v-btn icon="mdi mdi-close" @click="dialogImageFullScreen = false"/>
258
+ </v-toolbar>
259
+ <v-card height="80vh">
260
+ <v-img :src="imageFullScreen.image"/>
261
+ </v-card>
262
+
263
+ </v-dialog>
187
264
  </template>
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" setup>
2
2
  import {VAutocomplete} from 'vuetify/components/VAutocomplete'
3
3
  import {concat, isEmpty, sortBy} from 'lodash-es'
4
- import {computed, ref, watch} from 'vue'
4
+ import {computed, ref, watch,watchEffect} from 'vue'
5
5
  import {watchDebounced} from '@vueuse/core'
6
6
  import {useFuzzy} from '../../composables/utils/fuzzy'
7
7
  import {useGraphQl} from '../../composables/graphql'
@@ -66,16 +66,15 @@ function query(groupKey: string, filterText: string | undefined) {
66
66
  })
67
67
  }
68
68
 
69
- watch(() => props.waitForFilter && !props.filterText, (newValue) => {
70
- if (newValue) {
69
+ watchEffect(()=>{
70
+ if (props.waitForFilter && !props.filterText) {
71
71
  masterItems.value = []
72
72
  items.value = []
73
73
  selectedItem.value = undefined
74
- }
75
- else {
74
+ } else {
76
75
  query(props.groupKey, props.filterText)
77
76
  }
78
- }, { immediate: true })
77
+ })
79
78
 
80
79
  watch(() => props.modelValue, (newValue) => {
81
80
  selectedItem.value = newValue
@@ -14,6 +14,13 @@ export declare function useRules(): {
14
14
  email: (customError?: string) => (value: any) => string | true;
15
15
  regex: (regex: RegExp | string, customError?: string) => (value: any) => string | true;
16
16
  idcard: (customError?: string) => (value: any) => string | true;
17
+ DateFuture: (customError?: string) => (value: any) => string | true;
18
+ DatetimeFuture: (customError?: string) => (value: any) => string | true;
19
+ DateHappen: (customError?: string) => (value: any) => string | true;
20
+ DatetimeHappen: (customError?: string) => (value: any) => string | true;
21
+ DateAfter: (compareDate: string, customError: string) => (value: any) => string | true;
22
+ DateBefore: (compareDate: string, customError: string) => (value: any) => string | true;
23
+ DateEqual: (compareDate: string, customError: string) => (value: any) => string | true;
17
24
  rules: import("vue").Ref<{
18
25
  require: (customError?: string) => (value: any) => string | true;
19
26
  requireIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
@@ -30,6 +37,13 @@ export declare function useRules(): {
30
37
  email: (customError?: string) => (value: any) => string | true;
31
38
  regex: (regex: RegExp | string, customError?: string) => (value: any) => string | true;
32
39
  idcard: (customError?: string) => (value: any) => string | true;
40
+ DateFuture: (customError?: string) => (value: any) => string | true;
41
+ DatetimeFuture: (customError?: string) => (value: any) => string | true;
42
+ DateHappen: (customError?: string) => (value: any) => string | true;
43
+ DatetimeHappen: (customError?: string) => (value: any) => string | true;
44
+ DateAfter: (compareDate: string, customError: string) => (value: any) => string | true;
45
+ DateBefore: (compareDate: string, customError: string) => (value: any) => string | true;
46
+ DateEqual: (compareDate: string, customError: string) => (value: any) => string | true;
33
47
  }, {
34
48
  require: (customError?: string) => (value: any) => string | true;
35
49
  requireIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
@@ -46,6 +60,13 @@ export declare function useRules(): {
46
60
  email: (customError?: string) => (value: any) => string | true;
47
61
  regex: (regex: RegExp | string, customError?: string) => (value: any) => string | true;
48
62
  idcard: (customError?: string) => (value: any) => string | true;
63
+ DateFuture: (customError?: string) => (value: any) => string | true;
64
+ DatetimeFuture: (customError?: string) => (value: any) => string | true;
65
+ DateHappen: (customError?: string) => (value: any) => string | true;
66
+ DatetimeHappen: (customError?: string) => (value: any) => string | true;
67
+ DateAfter: (compareDate: string, customError: string) => (value: any) => string | true;
68
+ DateBefore: (compareDate: string, customError: string) => (value: any) => string | true;
69
+ DateEqual: (compareDate: string, customError: string) => (value: any) => string | true;
49
70
  } | {
50
71
  require: (customError?: string) => (value: any) => string | true;
51
72
  requireIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
@@ -62,5 +83,12 @@ export declare function useRules(): {
62
83
  email: (customError?: string) => (value: any) => string | true;
63
84
  regex: (regex: RegExp | string, customError?: string) => (value: any) => string | true;
64
85
  idcard: (customError?: string) => (value: any) => string | true;
86
+ DateFuture: (customError?: string) => (value: any) => string | true;
87
+ DatetimeFuture: (customError?: string) => (value: any) => string | true;
88
+ DateHappen: (customError?: string) => (value: any) => string | true;
89
+ DatetimeHappen: (customError?: string) => (value: any) => string | true;
90
+ DateAfter: (compareDate: string, customError: string) => (value: any) => string | true;
91
+ DateBefore: (compareDate: string, customError: string) => (value: any) => string | true;
92
+ DateEqual: (compareDate: string, customError: string) => (value: any) => string | true;
65
93
  }>;
66
94
  };
@@ -1,5 +1,6 @@
1
1
  import { ref } from "vue";
2
2
  import { isInteger, find } from "lodash-es";
3
+ import { Datetime } from "../../utils/datetime.js";
3
4
  export function useRules() {
4
5
  const condition = (condition2, customError) => condition2 || customError;
5
6
  const require = (customError = "This field is required") => (value) => condition(!!value || value === false || value === 0, customError);
@@ -17,6 +18,13 @@ export function useRules() {
17
18
  const email = (customError = "Invalid email address") => (value) => condition(!value || /^([\w\-.]+)@([\w\-.]+)\.([a-z]{2,5})$/i.test(value), customError);
18
19
  const regex = (regex2, customError = "Invalid format") => (value) => condition(!value || new RegExp(regex2).test(value), customError);
19
20
  const idcard = (customError = "Invalid ID Card format") => (value) => condition(!value || /^\d{13}$/.test(value) && (11 - [...value].slice(0, 12).reduce((sum, n, i) => sum + +n * (13 - i), 0) % 11) % 10 === +value[12], customError);
21
+ const DateFuture = (customError = "Date should be in the future") => (value) => condition(!value || Datetime().fromString(value).isFutureDate(), customError);
22
+ const DatetimeFuture = (customError = "Datetime should be in the future") => (value) => condition(!value || Datetime().fromString(value).isFuture(), customError);
23
+ const DateHappen = (customError = "Date should be already happened") => (value) => condition(!value || Datetime().fromString(value).isHappenDate(), customError);
24
+ const DatetimeHappen = (customError = "Date should be already happened") => (value) => condition(!value || Datetime().fromString(value).isHappen(), customError);
25
+ const DateAfter = (compareDate, customError) => (value) => condition(!value || Datetime().fromString(value).isAfter(compareDate), customError || "Date should be after " + compareDate);
26
+ const DateBefore = (compareDate, customError) => (value) => condition(!value || Datetime().fromString(value).isBefore(compareDate), customError || "Date should be before " + compareDate);
27
+ const DateEqual = (compareDate, customError) => (value) => condition(!value || Datetime().fromString(value).isEqual(compareDate), customError || "Date should be equal to " + compareDate);
20
28
  const rules = ref({
21
29
  require,
22
30
  requireIf,
@@ -32,7 +40,14 @@ export function useRules() {
32
40
  telephone,
33
41
  email,
34
42
  regex,
35
- idcard
43
+ idcard,
44
+ DateFuture,
45
+ DatetimeFuture,
46
+ DateHappen,
47
+ DatetimeHappen,
48
+ DateAfter,
49
+ DateBefore,
50
+ DateEqual
36
51
  });
37
52
  return { rules, ...rules.value };
38
53
  }
@@ -1,221 +1,305 @@
1
- import { type DateObjectUnits, type DateTimeFormatOptions, DateTime } from 'luxon';
1
+ import { type DateObjectUnits, DateTime, type DateTimeFormatOptions, type DateTimeMaybeValid } from 'luxon';
2
2
  export type supportedLocale = 'EN' | 'TH';
3
3
  export type dateFormat = 'tinyDate' | 'monthShortDate' | 'shortDate' | 'longDate';
4
4
  export type dateTimeFormat = 'tinyDateTime' | 'shortDateTime' | 'longDateTime';
5
5
  export declare const Datetime: () => {
6
- luxonDateTime: DateTime<false>;
6
+ luxonDateTime: DateTimeMaybeValid;
7
7
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => {
8
- luxonDateTime: DateTime<false>;
8
+ luxonDateTime: DateTimeMaybeValid;
9
9
  fromString: any;
10
10
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => any;
11
11
  fromISO: (dateTime: string, locale?: supportedLocale) => any;
12
12
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => any;
13
13
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => any;
14
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
15
- toISO: () => null;
16
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
17
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
18
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
19
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
20
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
21
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
22
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
23
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
14
+ toFormat: (format: string, locale?: supportedLocale) => string;
15
+ toISO: () => string | null;
16
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
17
+ toTinyDate: (locale?: supportedLocale) => string;
18
+ toMonthShortDate: (locale?: supportedLocale) => string;
19
+ toShortDate: (locale?: supportedLocale) => string;
20
+ toLongDate: (locale?: supportedLocale) => string;
21
+ toTinyDateTime: (locale?: supportedLocale) => string;
22
+ toShortDateTime: (locale?: supportedLocale) => string;
23
+ toLongDateTime: (locale?: supportedLocale) => string;
24
+ isAfter: (compareDate: string) => boolean;
25
+ isBefore: (compareDate: string) => boolean;
26
+ isEqual: (compareDate: string) => boolean;
27
+ isFuture: () => boolean;
28
+ isFutureDate: () => boolean;
29
+ isHappen: () => boolean;
30
+ isHappenDate: () => boolean;
24
31
  now: () => any;
25
32
  };
26
33
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => {
27
- luxonDateTime: DateTime<false>;
34
+ luxonDateTime: DateTimeMaybeValid;
28
35
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => any;
29
36
  fromStringTime: any;
30
37
  fromISO: (dateTime: string, locale?: supportedLocale) => any;
31
38
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => any;
32
39
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => any;
33
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
34
- toISO: () => null;
35
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
36
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
37
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
38
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
39
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
40
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
41
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
42
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
40
+ toFormat: (format: string, locale?: supportedLocale) => string;
41
+ toISO: () => string | null;
42
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
43
+ toTinyDate: (locale?: supportedLocale) => string;
44
+ toMonthShortDate: (locale?: supportedLocale) => string;
45
+ toShortDate: (locale?: supportedLocale) => string;
46
+ toLongDate: (locale?: supportedLocale) => string;
47
+ toTinyDateTime: (locale?: supportedLocale) => string;
48
+ toShortDateTime: (locale?: supportedLocale) => string;
49
+ toLongDateTime: (locale?: supportedLocale) => string;
50
+ isAfter: (compareDate: string) => boolean;
51
+ isBefore: (compareDate: string) => boolean;
52
+ isEqual: (compareDate: string) => boolean;
53
+ isFuture: () => boolean;
54
+ isFutureDate: () => boolean;
55
+ isHappen: () => boolean;
56
+ isHappenDate: () => boolean;
43
57
  now: () => any;
44
58
  };
45
59
  fromISO: (dateTime: string, locale?: supportedLocale) => {
46
- luxonDateTime: DateTime<false>;
60
+ luxonDateTime: DateTimeMaybeValid;
47
61
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => any;
48
62
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => any;
49
63
  fromISO: any;
50
64
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => any;
51
65
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => any;
52
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
53
- toISO: () => null;
54
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
55
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
56
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
57
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
58
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
59
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
60
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
61
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
66
+ toFormat: (format: string, locale?: supportedLocale) => string;
67
+ toISO: () => string | null;
68
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
69
+ toTinyDate: (locale?: supportedLocale) => string;
70
+ toMonthShortDate: (locale?: supportedLocale) => string;
71
+ toShortDate: (locale?: supportedLocale) => string;
72
+ toLongDate: (locale?: supportedLocale) => string;
73
+ toTinyDateTime: (locale?: supportedLocale) => string;
74
+ toShortDateTime: (locale?: supportedLocale) => string;
75
+ toLongDateTime: (locale?: supportedLocale) => string;
76
+ isAfter: (compareDate: string) => boolean;
77
+ isBefore: (compareDate: string) => boolean;
78
+ isEqual: (compareDate: string) => boolean;
79
+ isFuture: () => boolean;
80
+ isFutureDate: () => boolean;
81
+ isHappen: () => boolean;
82
+ isHappenDate: () => boolean;
62
83
  now: () => any;
63
84
  };
64
85
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => {
65
- luxonDateTime: DateTime<false>;
86
+ luxonDateTime: DateTimeMaybeValid;
66
87
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => any;
67
88
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => any;
68
89
  fromISO: (dateTime: string, locale?: supportedLocale) => any;
69
90
  fromObject: any;
70
91
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => any;
71
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
72
- toISO: () => null;
73
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
74
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
75
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
76
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
77
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
78
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
79
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
80
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
92
+ toFormat: (format: string, locale?: supportedLocale) => string;
93
+ toISO: () => string | null;
94
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
95
+ toTinyDate: (locale?: supportedLocale) => string;
96
+ toMonthShortDate: (locale?: supportedLocale) => string;
97
+ toShortDate: (locale?: supportedLocale) => string;
98
+ toLongDate: (locale?: supportedLocale) => string;
99
+ toTinyDateTime: (locale?: supportedLocale) => string;
100
+ toShortDateTime: (locale?: supportedLocale) => string;
101
+ toLongDateTime: (locale?: supportedLocale) => string;
102
+ isAfter: (compareDate: string) => boolean;
103
+ isBefore: (compareDate: string) => boolean;
104
+ isEqual: (compareDate: string) => boolean;
105
+ isFuture: () => boolean;
106
+ isFutureDate: () => boolean;
107
+ isHappen: () => boolean;
108
+ isHappenDate: () => boolean;
81
109
  now: () => any;
82
110
  };
83
111
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => {
84
- luxonDateTime: DateTime<false>;
112
+ luxonDateTime: DateTimeMaybeValid;
85
113
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => any;
86
114
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => any;
87
115
  fromISO: (dateTime: string, locale?: supportedLocale) => any;
88
116
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => any;
89
117
  setDateTime: any;
90
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
91
- toISO: () => null;
92
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
93
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
94
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
95
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
96
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
97
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
98
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
99
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
118
+ toFormat: (format: string, locale?: supportedLocale) => string;
119
+ toISO: () => string | null;
120
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
121
+ toTinyDate: (locale?: supportedLocale) => string;
122
+ toMonthShortDate: (locale?: supportedLocale) => string;
123
+ toShortDate: (locale?: supportedLocale) => string;
124
+ toLongDate: (locale?: supportedLocale) => string;
125
+ toTinyDateTime: (locale?: supportedLocale) => string;
126
+ toShortDateTime: (locale?: supportedLocale) => string;
127
+ toLongDateTime: (locale?: supportedLocale) => string;
128
+ isAfter: (compareDate: string) => boolean;
129
+ isBefore: (compareDate: string) => boolean;
130
+ isEqual: (compareDate: string) => boolean;
131
+ isFuture: () => boolean;
132
+ isFutureDate: () => boolean;
133
+ isHappen: () => boolean;
134
+ isHappenDate: () => boolean;
100
135
  now: () => any;
101
136
  };
102
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
103
- toISO: () => null;
104
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
105
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
106
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
107
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
108
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
109
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
110
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
111
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
137
+ toFormat: (format: string, locale?: supportedLocale) => string;
138
+ toISO: () => string | null;
139
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
140
+ toTinyDate: (locale?: supportedLocale) => string;
141
+ toMonthShortDate: (locale?: supportedLocale) => string;
142
+ toShortDate: (locale?: supportedLocale) => string;
143
+ toLongDate: (locale?: supportedLocale) => string;
144
+ toTinyDateTime: (locale?: supportedLocale) => string;
145
+ toShortDateTime: (locale?: supportedLocale) => string;
146
+ toLongDateTime: (locale?: supportedLocale) => string;
147
+ isAfter: (compareDate: string) => boolean;
148
+ isBefore: (compareDate: string) => boolean;
149
+ isEqual: (compareDate: string) => boolean;
150
+ isFuture: () => boolean;
151
+ isFutureDate: () => boolean;
152
+ isHappen: () => boolean;
153
+ isHappenDate: () => boolean;
112
154
  now: () => {
113
- luxonDateTime: DateTime<false>;
155
+ luxonDateTime: DateTimeMaybeValid;
114
156
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => {
115
- luxonDateTime: DateTime<false>;
157
+ luxonDateTime: DateTimeMaybeValid;
116
158
  fromString: any;
117
159
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => any;
118
160
  fromISO: (dateTime: string, locale?: supportedLocale) => any;
119
161
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => any;
120
162
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => any;
121
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
122
- toISO: () => null;
123
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
124
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
125
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
126
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
127
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
128
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
129
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
130
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
163
+ toFormat: (format: string, locale?: supportedLocale) => string;
164
+ toISO: () => string | null;
165
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
166
+ toTinyDate: (locale?: supportedLocale) => string;
167
+ toMonthShortDate: (locale?: supportedLocale) => string;
168
+ toShortDate: (locale?: supportedLocale) => string;
169
+ toLongDate: (locale?: supportedLocale) => string;
170
+ toTinyDateTime: (locale?: supportedLocale) => string;
171
+ toShortDateTime: (locale?: supportedLocale) => string;
172
+ toLongDateTime: (locale?: supportedLocale) => string;
173
+ isAfter: (compareDate: string) => boolean;
174
+ isBefore: (compareDate: string) => boolean;
175
+ isEqual: (compareDate: string) => boolean;
176
+ isFuture: () => boolean;
177
+ isFutureDate: () => boolean;
178
+ isHappen: () => boolean;
179
+ isHappenDate: () => boolean;
131
180
  now: () => any;
132
181
  };
133
182
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => {
134
- luxonDateTime: DateTime<false>;
183
+ luxonDateTime: DateTimeMaybeValid;
135
184
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => any;
136
185
  fromStringTime: any;
137
186
  fromISO: (dateTime: string, locale?: supportedLocale) => any;
138
187
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => any;
139
188
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => any;
140
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
141
- toISO: () => null;
142
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
143
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
144
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
145
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
146
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
147
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
148
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
149
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
189
+ toFormat: (format: string, locale?: supportedLocale) => string;
190
+ toISO: () => string | null;
191
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
192
+ toTinyDate: (locale?: supportedLocale) => string;
193
+ toMonthShortDate: (locale?: supportedLocale) => string;
194
+ toShortDate: (locale?: supportedLocale) => string;
195
+ toLongDate: (locale?: supportedLocale) => string;
196
+ toTinyDateTime: (locale?: supportedLocale) => string;
197
+ toShortDateTime: (locale?: supportedLocale) => string;
198
+ toLongDateTime: (locale?: supportedLocale) => string;
199
+ isAfter: (compareDate: string) => boolean;
200
+ isBefore: (compareDate: string) => boolean;
201
+ isEqual: (compareDate: string) => boolean;
202
+ isFuture: () => boolean;
203
+ isFutureDate: () => boolean;
204
+ isHappen: () => boolean;
205
+ isHappenDate: () => boolean;
150
206
  now: () => any;
151
207
  };
152
208
  fromISO: (dateTime: string, locale?: supportedLocale) => {
153
- luxonDateTime: DateTime<false>;
209
+ luxonDateTime: DateTimeMaybeValid;
154
210
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => any;
155
211
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => any;
156
212
  fromISO: any;
157
213
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => any;
158
214
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => any;
159
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
160
- toISO: () => null;
161
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
162
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
163
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
164
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
165
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
166
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
167
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
168
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
215
+ toFormat: (format: string, locale?: supportedLocale) => string;
216
+ toISO: () => string | null;
217
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
218
+ toTinyDate: (locale?: supportedLocale) => string;
219
+ toMonthShortDate: (locale?: supportedLocale) => string;
220
+ toShortDate: (locale?: supportedLocale) => string;
221
+ toLongDate: (locale?: supportedLocale) => string;
222
+ toTinyDateTime: (locale?: supportedLocale) => string;
223
+ toShortDateTime: (locale?: supportedLocale) => string;
224
+ toLongDateTime: (locale?: supportedLocale) => string;
225
+ isAfter: (compareDate: string) => boolean;
226
+ isBefore: (compareDate: string) => boolean;
227
+ isEqual: (compareDate: string) => boolean;
228
+ isFuture: () => boolean;
229
+ isFutureDate: () => boolean;
230
+ isHappen: () => boolean;
231
+ isHappenDate: () => boolean;
169
232
  now: () => any;
170
233
  };
171
234
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => {
172
- luxonDateTime: DateTime<false>;
235
+ luxonDateTime: DateTimeMaybeValid;
173
236
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => any;
174
237
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => any;
175
238
  fromISO: (dateTime: string, locale?: supportedLocale) => any;
176
239
  fromObject: any;
177
240
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => any;
178
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
179
- toISO: () => null;
180
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
181
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
182
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
183
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
184
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
185
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
186
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
187
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
241
+ toFormat: (format: string, locale?: supportedLocale) => string;
242
+ toISO: () => string | null;
243
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
244
+ toTinyDate: (locale?: supportedLocale) => string;
245
+ toMonthShortDate: (locale?: supportedLocale) => string;
246
+ toShortDate: (locale?: supportedLocale) => string;
247
+ toLongDate: (locale?: supportedLocale) => string;
248
+ toTinyDateTime: (locale?: supportedLocale) => string;
249
+ toShortDateTime: (locale?: supportedLocale) => string;
250
+ toLongDateTime: (locale?: supportedLocale) => string;
251
+ isAfter: (compareDate: string) => boolean;
252
+ isBefore: (compareDate: string) => boolean;
253
+ isEqual: (compareDate: string) => boolean;
254
+ isFuture: () => boolean;
255
+ isFutureDate: () => boolean;
256
+ isHappen: () => boolean;
257
+ isHappenDate: () => boolean;
188
258
  now: () => any;
189
259
  };
190
260
  setDateTime: (inputDate: DateTime, locale?: supportedLocale) => {
191
- luxonDateTime: DateTime<false>;
261
+ luxonDateTime: DateTimeMaybeValid;
192
262
  fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => any;
193
263
  fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => any;
194
264
  fromISO: (dateTime: string, locale?: supportedLocale) => any;
195
265
  fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => any;
196
266
  setDateTime: any;
197
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
198
- toISO: () => null;
199
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
200
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
201
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
202
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
203
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
204
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
205
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
206
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
267
+ toFormat: (format: string, locale?: supportedLocale) => string;
268
+ toISO: () => string | null;
269
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
270
+ toTinyDate: (locale?: supportedLocale) => string;
271
+ toMonthShortDate: (locale?: supportedLocale) => string;
272
+ toShortDate: (locale?: supportedLocale) => string;
273
+ toLongDate: (locale?: supportedLocale) => string;
274
+ toTinyDateTime: (locale?: supportedLocale) => string;
275
+ toShortDateTime: (locale?: supportedLocale) => string;
276
+ toLongDateTime: (locale?: supportedLocale) => string;
277
+ isAfter: (compareDate: string) => boolean;
278
+ isBefore: (compareDate: string) => boolean;
279
+ isEqual: (compareDate: string) => boolean;
280
+ isFuture: () => boolean;
281
+ isFutureDate: () => boolean;
282
+ isHappen: () => boolean;
283
+ isHappenDate: () => boolean;
207
284
  now: () => any;
208
285
  };
209
- toFormat: (format: string, locale?: supportedLocale) => "Invalid DateTime";
210
- toISO: () => null;
211
- toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => "Invalid DateTime";
212
- toTinyDate: (locale?: supportedLocale) => "Invalid DateTime";
213
- toMonthShortDate: (locale?: supportedLocale) => "Invalid DateTime";
214
- toShortDate: (locale?: supportedLocale) => "Invalid DateTime";
215
- toLongDate: (locale?: supportedLocale) => "Invalid DateTime";
216
- toTinyDateTime: (locale?: supportedLocale) => "Invalid DateTime";
217
- toShortDateTime: (locale?: supportedLocale) => "Invalid DateTime";
218
- toLongDateTime: (locale?: supportedLocale) => "Invalid DateTime";
286
+ toFormat: (format: string, locale?: supportedLocale) => string;
287
+ toISO: () => string | null;
288
+ toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => string;
289
+ toTinyDate: (locale?: supportedLocale) => string;
290
+ toMonthShortDate: (locale?: supportedLocale) => string;
291
+ toShortDate: (locale?: supportedLocale) => string;
292
+ toLongDate: (locale?: supportedLocale) => string;
293
+ toTinyDateTime: (locale?: supportedLocale) => string;
294
+ toShortDateTime: (locale?: supportedLocale) => string;
295
+ toLongDateTime: (locale?: supportedLocale) => string;
296
+ isAfter: (compareDate: string) => boolean;
297
+ isBefore: (compareDate: string) => boolean;
298
+ isEqual: (compareDate: string) => boolean;
299
+ isFuture: () => boolean;
300
+ isFutureDate: () => boolean;
301
+ isHappen: () => boolean;
302
+ isHappenDate: () => boolean;
219
303
  now: any;
220
304
  };
221
305
  };
@@ -107,9 +107,29 @@ export const Datetime = () => ({
107
107
  toLongDateTime: function(locale = "EN") {
108
108
  return this.toLocaleFormat(locale, DateTime.DATETIME_HUGE);
109
109
  },
110
+ isAfter: function(compareDate) {
111
+ return this.luxonDateTime > Datetime().fromString(compareDate).luxonDateTime;
112
+ },
113
+ isBefore: function(compareDate) {
114
+ return this.luxonDateTime < Datetime().fromString(compareDate).luxonDateTime;
115
+ },
116
+ isEqual: function(compareDate) {
117
+ return this.luxonDateTime == Datetime().fromString(compareDate).luxonDateTime;
118
+ },
119
+ isFuture: function() {
120
+ return this.luxonDateTime > Datetime().now().luxonDateTime;
121
+ },
122
+ isFutureDate: function() {
123
+ return this.luxonDateTime > Datetime().now().luxonDateTime.endOf("day");
124
+ },
125
+ isHappen: function() {
126
+ return this.luxonDateTime < Datetime().now().luxonDateTime;
127
+ },
128
+ isHappenDate: function() {
129
+ return this.luxonDateTime < Datetime().now().luxonDateTime.endOf("day");
130
+ },
110
131
  now: function() {
111
- const DateNow = DateTime.now();
112
- this.luxonDateTime = DateNow;
132
+ this.luxonDateTime = DateTime.now();
113
133
  return this;
114
134
  }
115
135
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ramathibodi/nuxt-commons",
3
- "version": "0.1.25",
3
+ "version": "0.1.27",
4
4
  "description": "Ramathibodi Nuxt modules for common components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -114,5 +114,5 @@
114
114
  "vitest": "^1.6.0",
115
115
  "vue-tsc": "2.0.29"
116
116
  },
117
- "packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c"
117
+ "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
118
118
  }