@inkline/inkline/plugin.mjs

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

import { reactive } from "vue";
import { addClass } from "@grozav/utils";
import { createSchema } from "@inkline/inkline/validation";
import { setLocale } from "@inkline/inkline/i18n";
import {
  ColorModePlugin,
  IconsPlugin,
  ModalPlugin,
  OverlayPlugin,
  ToastPlugin
} from "@inkline/inkline/plugins";
import { InklineKey } from "@inkline/inkline/constants";
export function createInklineService({
  icons,
  // eslint-disable-line @typescript-eslint/no-unused-vars
  components,
  // eslint-disable-line @typescript-eslint/no-unused-vars
  ...options
}) {
  return {
    form(schema) {
      return createSchema(schema);
    },
    setLocale(locale) {
      setLocale(locale);
    },
    options: reactive(options)
  };
}
export const defaultOptions = {
  color: "",
  colorMode: "system",
  colorModeStrategy: "localStorage",
  components: {},
  componentOptions: {},
  icons: {},
  locale: "en",
  renderMode: "client",
  routerComponent: "RouterLink",
  size: "",
  validateOn: ["input", "blur"],
  toast: {
    position: "bottom-right",
    duration: 3500
  },
  modal: {}
};
export const Inkline = {
  install(app, options = {}) {
    const { components, icons, renderMode, ...overrideOptions } = options;
    const extendedOptions = {
      ...defaultOptions,
      ...overrideOptions
    };
    for (const componentIndex in components) {
      app.component(componentIndex, components[componentIndex]);
    }
    const inklineService = createInklineService(extendedOptions);
    app.config.globalProperties.$inkline = inklineService;
    app.provide(InklineKey, inklineService);
    if (typeof window !== "undefined") {
      addClass(document.body, "inkline");
    }
    app.use(ColorModePlugin, { inkline: inklineService, renderMode });
    app.use(IconsPlugin, { icons });
    app.use(ModalPlugin, { inkline: inklineService });
    app.use(OverlayPlugin);
    app.use(ToastPlugin, { inkline: inklineService });
  }
};