@ramathibodi/nuxt-commons 0.1.25 → 0.1.26
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 +1 -1
- package/dist/runtime/components/form/Date.vue +66 -7
- package/dist/runtime/components/form/DateTime.vue +92 -4
- package/dist/runtime/components/form/SignPad.vue +21 -13
- package/dist/runtime/components/form/Time.vue +21 -14
- package/dist/runtime/composables/utils/validation.d.ts +28 -0
- package/dist/runtime/composables/utils/validation.js +16 -1
- package/dist/runtime/utils/datetime.d.ts +217 -133
- package/dist/runtime/utils/datetime.js +22 -2
- package/package.json +2 -2
package/dist/module.json
CHANGED
|
@@ -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 {
|
|
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="
|
|
188
|
+
ref="textFieldRef"
|
|
130
189
|
v-model="displayedDate"
|
|
131
|
-
:
|
|
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
|
|
34
|
-
const
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
title?: string
|
|
13
|
+
btnName?: string
|
|
14
|
+
titleConfirm?: string
|
|
15
|
+
modelValue?: string
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
const props = withDefaults(defineProps<SignatureProps>(), {
|
|
18
|
-
|
|
19
|
-
|
|
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
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
107
|
-
if (
|
|
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="
|
|
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="
|
|
140
|
+
@click="toggleMenuOpen('textField')"
|
|
134
141
|
>
|
|
135
142
|
<template #append-inner>
|
|
136
143
|
<v-icon
|
|
137
144
|
v-bind="props"
|
|
138
|
-
@click="
|
|
145
|
+
@click="toggleMenuOpen('icon')"
|
|
139
146
|
>
|
|
140
147
|
fa:fa-regular fa-clock
|
|
141
148
|
</v-icon>
|
|
@@ -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,
|
|
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:
|
|
6
|
+
luxonDateTime: DateTimeMaybeValid;
|
|
7
7
|
fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => {
|
|
8
|
-
luxonDateTime:
|
|
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) =>
|
|
15
|
-
toISO: () => null;
|
|
16
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
17
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
18
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
19
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
20
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
21
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
22
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
23
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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:
|
|
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) =>
|
|
34
|
-
toISO: () => null;
|
|
35
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
36
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
37
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
38
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
39
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
40
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
41
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
42
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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:
|
|
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) =>
|
|
53
|
-
toISO: () => null;
|
|
54
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
55
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
56
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
57
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
58
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
59
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
60
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
61
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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:
|
|
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) =>
|
|
72
|
-
toISO: () => null;
|
|
73
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
74
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
75
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
76
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
77
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
78
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
79
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
80
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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:
|
|
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) =>
|
|
91
|
-
toISO: () => null;
|
|
92
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
93
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
94
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
95
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
96
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
97
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
98
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
99
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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) =>
|
|
103
|
-
toISO: () => null;
|
|
104
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
105
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
106
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
107
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
108
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
109
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
110
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
111
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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:
|
|
155
|
+
luxonDateTime: DateTimeMaybeValid;
|
|
114
156
|
fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => {
|
|
115
|
-
luxonDateTime:
|
|
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) =>
|
|
122
|
-
toISO: () => null;
|
|
123
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
124
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
125
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
126
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
127
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
128
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
129
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
130
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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:
|
|
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) =>
|
|
141
|
-
toISO: () => null;
|
|
142
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
143
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
144
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
145
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
146
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
147
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
148
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
149
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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:
|
|
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) =>
|
|
160
|
-
toISO: () => null;
|
|
161
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
162
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
163
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
164
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
165
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
166
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
167
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
168
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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:
|
|
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) =>
|
|
179
|
-
toISO: () => null;
|
|
180
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
181
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
182
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
183
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
184
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
185
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
186
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
187
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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:
|
|
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) =>
|
|
198
|
-
toISO: () => null;
|
|
199
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
200
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
201
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
202
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
203
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
204
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
205
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
206
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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) =>
|
|
210
|
-
toISO: () => null;
|
|
211
|
-
toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) =>
|
|
212
|
-
toTinyDate: (locale?: supportedLocale) =>
|
|
213
|
-
toMonthShortDate: (locale?: supportedLocale) =>
|
|
214
|
-
toShortDate: (locale?: supportedLocale) =>
|
|
215
|
-
toLongDate: (locale?: supportedLocale) =>
|
|
216
|
-
toTinyDateTime: (locale?: supportedLocale) =>
|
|
217
|
-
toShortDateTime: (locale?: supportedLocale) =>
|
|
218
|
-
toLongDateTime: (locale?: supportedLocale) =>
|
|
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
|
-
|
|
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.
|
|
3
|
+
"version": "0.1.26",
|
|
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.
|
|
117
|
+
"packageManager": "pnpm@9.12.0+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca"
|
|
118
118
|
}
|