vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: align with vue-flatpickr-component 10

This commit is contained in:
Dominik Pschenitschni 2022-10-24 16:52:38 +02:00
parent 5772cf7483
commit 2316fa3a46
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
1 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/misc/flatpickr/Flatpickr.vue
View File

@ -9,15 +9,15 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Flatpickr from 'flatpickr' import flatpickr from 'flatpickr'
import 'flatpickr/dist/flatpickr.css' import 'flatpickr/dist/flatpickr.css'
// FIXME: Not sure how to alias these correctly // FIXME: Not sure how to alias these correctly
// import Options = Flatpickr.Options doesn't work // import Options = Flatpickr.Options doesn't work
type Hook = Flatpickr.Options.Hook type Hook = flatpickr.Options.Hook
type HookKey = Flatpickr.Options.HookKey type HookKey = flatpickr.Options.HookKey
type Options = Flatpickr.Options.Options type Options = flatpickr.Options.Options
type DateOption = Flatpickr.Options.DateOption type DateOption = flatpickr.Options.DateOption
function camelToKebab(string: string) { function camelToKebab(string: string) {
return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
@ -35,10 +35,6 @@ function nullify<T = unknown>(value: T) {
: null : null
} }
function cloneObject<T = Record<string, unknown>>(obj: T): T {
return Object.assign({}, obj)
}
// Events to emit, copied from flatpickr source // Events to emit, copied from flatpickr source
const includedEvents = [ const includedEvents = [
'onChange', 'onChange',
@ -88,8 +84,8 @@ const props = defineProps({
config: { config: {
type: Object as PropType<Options>, type: Object as PropType<Options>,
default: () => ({ default: () => ({
wrap: false,
defaultDate: null, defaultDate: null,
wrap: false,
}), }),
}, },
events: { events: {
@ -114,16 +110,16 @@ const {modelValue, config, disabled} = toRefs(props)
const attrs = useAttrs() const attrs = useAttrs()
const root = ref<HTMLInputElement | null>(null) const root = ref<HTMLInputElement | null>(null)
const fp = ref<Flatpickr.Instance | null>(null) const fp = ref<flatpickr.Instance | null>(null)
const safeConfig = ref<Options>(cloneObject(props.config)) const safeConfig = ref<Options>({ ...props.config })
function prepareConfig() { function prepareConfig() {
// Don't mutate original object on parent component // Don't mutate original object on parent component
const newConfig = cloneObject(props.config) const newConfig: Options = { ...props.config }
props.events.forEach((hook) => { props.events.forEach((hook) => {
// Respect global callbacks registered via setDefault() method // Respect global callbacks registered via setDefault() method
const globalCallbacks = Flatpickr.defaultConfig[hook] || [] const globalCallbacks = flatpickr.defaultConfig[hook] || []
// Inject our own method along with user callback // Inject our own method along with user callback
const localCallback: Hook = (...args) => emit(camelToKebab(hook), ...args) const localCallback: Hook = (...args) => emit(camelToKebab(hook), ...args)
@ -170,7 +166,7 @@ onMounted(() => {
: root.value : root.value
// Init flatpickr // Init flatpickr
fp.value = Flatpickr(element, safeConfig.value) fp.value = flatpickr(element, safeConfig.value)
}) })
onBeforeUnmount(() => fp.value?.destroy()) onBeforeUnmount(() => fp.value?.destroy())