Add date(time) interface (#499)

* Add localized-format util

* Add active prop to v-input

* Add strings for datetime interface

* Add overflow-scroll prop to v-menu

* Add close-on-content-click prop to v-select

* Add datetime interface

* Show display value synced with prop

* Sync value with prop

* Set lang after user hydration

* Add NL date-fns lang to test datetime

* Fix locale fetching in date-fns

* Dont stage value if year isnt fully filled out

* Localize date fns based on shared util

* Handle type, render type based display

* Don't use exact on v-list-item

* Pass type to interface on v-form

src/utils/get-date-fns-locale/get-date-fns-locale.ts

@@ -0,0 +1,25 @@
+import { i18n } from '@/lang';
+
+export async function getDateFNSLocale() {
+	const lang = i18n.locale;
+
+	const localesToTry = [lang, lang.split('-')[0], 'en-US'];
+
+	let locale;
+
+	for (const l of localesToTry) {
+		try {
+			const mod = await import(
+				/* webpackMode: 'lazy', webpackChunkName: 'df-[index]' */
+				`date-fns/locale/${l}/index.js`
+			);
+
+			locale = mod.default;
+			break;
+		} catch {
+			continue;
+		}
+	}
+
+	return locale;
+}

src/utils/get-date-fns-locale/index.ts

@@ -0,0 +1,4 @@
+import { getDateFNSLocale } from './get-date-fns-locale';
+
+export { getDateFNSLocale };
+export default getDateFNSLocale;

src/utils/localized-format-distance/localized-format-distance.ts

@@ -1,5 +1,5 @@
 import formatDistanceOriginal from 'date-fns/formatDistance';
-import { i18n } from '@/lang';
+import getDateFNSLocale from '@/utils/get-date-fns-locale';
 
 type LocalizedFormatDistance = (...a: Parameters<typeof formatDistanceOriginal>) => Promise<string>;
 
@@ -8,17 +8,8 @@ export const localizedFormatDistance: LocalizedFormatDistance = async (
 	baseDate,
 	options
 ): Promise<string> => {
-	const lang = i18n.locale;
-
-	const locale = (
-		await import(
-			/* webpackMode: 'lazy', webpackChunkName: 'df-[index]' */
-			`date-fns/locale/${lang}/index.js`
-		)
-	).default;
-
 	return formatDistanceOriginal(date, baseDate, {
 		...options,
-		locale,
+		locale: await getDateFNSLocale(),
 	});
 };

src/utils/localized-format/index.ts

@@ -0,0 +1,4 @@
+import { localizedFormat } from './localized-format';
+
+export { localizedFormat };
+export default localizedFormat;

src/utils/localized-format/localized-format.ts

@@ -0,0 +1,11 @@
+import formatOriginal from 'date-fns/format';
+import getDateFNSLocale from '@/utils/get-date-fns-locale';
+
+type localizedFormat = (...a: Parameters<typeof formatOriginal>) => Promise<string>;
+
+export const localizedFormat: localizedFormat = async (date, format, options): Promise<string> => {
+	return formatOriginal(date, format, {
+		...options,
+		locale: await getDateFNSLocale(),
+	});
+};