Support component imports. Closes #105

Author: Nathan Reyes

src/lib.js

@@ -1,27 +1,37 @@
 import Calendar from './components/Calendar';
 import DatePicker from './components/DatePicker';
 import Popover from './components/Popover';
-import { mergeDefaults } from './utils/defaults';
+import getLocaleDefaults from './utils/locales';
+import defaults, { mergeDefaults } from './utils/defaults';
 
 const components = {
   Calendar,
   DatePicker,
   Popover,
 };
 
+const setupCalendar = userDefaults => {
+  // Merge user and locale defaults with built-in defaults
+  const locale = userDefaults
+    ? userDefaults.locale
+    : new Intl.DateTimeFormat().resolvedOptions().locale;
+  return mergeDefaults(defaults, getLocaleDefaults(locale), userDefaults);
+};
+
 const VCalendar = {
   ...components,
   install: (Vue, options) => {
-    const defaults = mergeDefaults(options);
+    // Setup plugin with options
+    const resolvedDefaults = setupCalendar(options);
     Object.keys(components).forEach(k =>
-      Vue.component(`${defaults.componentPrefix}${k}`, components[k]),
+      Vue.component(`${resolvedDefaults.componentPrefix}${k}`, components[k]),
     );
   },
 };
 
 export default VCalendar;
 
-export { Calendar, DatePicker, Popover };
+export { setupCalendar, Calendar, DatePicker, Popover };
 
 // Use automatically when global Vue instance detected
 if (typeof window !== 'undefined' && window.Vue) {

src/utils/defaults.js

@@ -1,6 +1,5 @@
 import { POPOVER_VISIBILITIES } from './constants';
 import { isObject, isFunction } from './typeCheckers';
-import setupLocale from './locales';
 
 const defaults = {
   componentPrefix: 'v',
@@ -127,17 +126,11 @@ const defaults = {
     navYearCell: null,
   },
 };
-// Uncomment this line when running unit tests
-if (process.env.NODE_ENV === 'test') setupLocale(null, defaults);
 
 export default defaults;
 
 export const resolveDefault = (def, args) =>
   (isObject(def) && def) || (isFunction(def) && def(args)) || def;
 
-export const mergeDefaults = otherDefaults => {
-  // Setup locale defaults if needed
-  setupLocale(otherDefaults && otherDefaults.locale, defaults);
-  // Assign the defaults
-  return Object.assign(defaults, otherDefaults);
-};
+export const mergeDefaults = (...defaultArgs) =>
+  Object.assign(defaults, ...defaultArgs);

src/utils/locales.js

@@ -72,6 +72,8 @@ const locales = {
   th: { L: 'DD/MM/YYYY' },
   // Turkish
   tr: { dow: 2, L: 'DD.MM.YYYY' },
+  // Ukrainian
+  uk: { dow: 2, L: 'DD.MM.YYYY' },
 };
 locales.en = locales['en-US'];
 locales.zh = locales['zh-CN'];
@@ -92,18 +94,35 @@ const getDayNames = (locale, length) => {
   return getWeekdayDates({ utc: true }).map(d => dtf.format(d));
 };
 
-export default (locale, defaults) => {
-  locale = locale || new Intl.DateTimeFormat().resolvedOptions().locale;
-  const searchLocales = [locale, locale.substring(0, 2), 'en-US'];
-  const matchKey = searchLocales.find(l => locales[l]);
-  const matchValue = locales[matchKey];
-  defaults.locale = matchKey;
-  defaults.firstDayOfWeek = matchValue.dow || 1;
-  defaults.dayNames = getDayNames(matchKey, 'long');
-  defaults.dayNamesShort = getDayNames(matchKey, 'short');
-  defaults.dayNamesShorter = defaults.dayNamesShort.map(s => s.substring(0, 2));
-  defaults.dayNamesNarrow = getDayNames(matchKey, 'narrow');
-  defaults.monthNames = getMonthNames(matchKey, 'long');
-  defaults.monthNamesShort = getMonthNames(matchKey, 'short');
-  defaults.masks = { L: matchValue.L };
+export default locale => {
+  const detectedLocale = new Intl.DateTimeFormat().resolvedOptions().locale;
+  const searchLocales = [
+    locale,
+    locale && locale.substring(0, 2),
+    detectedLocale,
+  ];
+  const resolvedLocale =
+    searchLocales.find(l => locales[l]) || locale || detectedLocale;
+  const localeExtra = {
+    dow: 1,
+    L: 'DD/MM/YYYY',
+    ...locales[resolvedLocale],
+  };
+  const dayNames = getDayNames(resolvedLocale, 'long');
+  const dayNamesShort = getDayNames(resolvedLocale, 'short');
+  const dayNamesShorter = dayNamesShort.map(s => s.substring(0, 2));
+  const dayNamesNarrow = getDayNames(resolvedLocale, 'narrow');
+  const monthNames = getMonthNames(resolvedLocale, 'long');
+  const monthNamesShort = getMonthNames(resolvedLocale, 'short');
+  return {
+    locale: resolvedLocale,
+    firstDayOfWeek: localeExtra.dow,
+    masks: { L: localeExtra.L },
+    dayNames,
+    dayNamesShort,
+    dayNamesShorter,
+    dayNamesNarrow,
+    monthNames,
+    monthNamesShort,
+  };
 };