@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
128 lines • 4.1 kB
JavaScript
/* eslint-disable @typescript-eslint/no-unused-vars */
import { reactive, watch } from 'vue';
import { addClass, removeClass } from './helpers/index.mjs';
import { initialize as initializeForm } from './validation/index.mjs';
import { setLocale } from './i18n/index.mjs';
import * as inklineIcons from './icons.mjs';
/**
* Color mode localStorage key
*/
export const colorModeLocalStorageKey = 'inkline-color-mode';
/**
* Color mode change handler
*/
export const handleColorMode = (colorMode) => {
let color;
if (colorMode === 'system') {
color = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
else {
color = colorMode;
}
removeClass(document.body, '-light -dark');
addClass(document.body, `-${color}`);
};
/**
* Default configuration options
*/
export const defaultOptions = {
components: {},
icons: {},
colorMode: 'system',
locale: 'en',
validateOn: ['input', 'blur'],
color: '',
size: '',
routerComponent: 'router-link',
componentOptions: {}
};
/**
* Create inkline prototype
*/
export function createPrototype({ icons, components, ...options }) {
return {
form(schema) {
return initializeForm(schema);
},
setLocale(locale) {
setLocale(locale);
},
options: reactive(options)
};
}
/**
* Easily accessible global Inkline object
*/
export const inklineGlobals = {
prototype: undefined,
icons: undefined
};
/**
* Inkline Vue.js plugin
*/
export const Inkline = {
install(app, options = {}) {
const extendedOptions = {
...defaultOptions,
...options
};
/**
* Register components provided through options globally
*/
for (const componentIndex in extendedOptions.components) { // eslint-disable-line guard-for-in
app.component(extendedOptions.components[componentIndex].name, extendedOptions.components[componentIndex]);
}
/**
* Get preferred theme based on selected color mode
*/
if (typeof window !== 'undefined') {
extendedOptions.colorMode = localStorage.getItem(colorModeLocalStorageKey) || extendedOptions.colorMode;
}
/**
* Add $inkline global property
*/
const prototype = createPrototype(extendedOptions);
app.config.globalProperties.$inkline = prototype;
app.provide('inkline', prototype);
inklineGlobals.prototype = prototype;
/**
* Add inklineIcons global provide
*/
const icons = {
...inklineIcons,
...extendedOptions.icons
};
app.provide('inklineIcons', icons);
if (typeof window !== 'undefined') {
/**
* Add inkline class to document body and initialize color mode
*/
addClass(document.body, 'inkline');
/**
* Add color mode on change handler
*/
watch(() => prototype.options.colorMode, (colorMode) => {
handleColorMode(colorMode);
localStorage.setItem(colorModeLocalStorageKey, colorMode);
});
/**
* Add dark mode media query on change handler
*/
const onDarkModeMediaQueryChange = (e) => {
prototype.options.prefersColorScheme = e.matches ? 'dark' : 'light';
if (prototype.options.colorMode === 'system') {
handleColorMode(prototype.options.colorMode);
}
};
const darkModeMediaQuery = matchMedia('(prefers-color-scheme: dark)');
if (darkModeMediaQuery.addEventListener) {
darkModeMediaQuery.addEventListener('change', onDarkModeMediaQueryChange);
}
else {
darkModeMediaQuery.addListener(onDarkModeMediaQueryChange);
}
handleColorMode(extendedOptions.colorMode);
}
}
};
//# sourceMappingURL=plugin.mjs.map