Configuration

1. Import Styles

Make sure to import the CSS styles in your main entry file:

• (e.g., main.css)

@import 'dolphin-components/dolphin-components.css';

• (e.g., main.ts)

import 'dolphin-components/dolphin-components.css';

---

2. Register Components (Global)

You can globally register all components in your Vue app:

import { createApp } from 'vue';
import App from './App.vue';
import { ContentLayout, DateRange, DateSelector, Icons, Modal, Switch, Tabulator, Toggle, Towser, Loader, FileUpload, FilePreview } from "dolphin-components";

const app = createApp(App);

app.component('ContentLayout', ContentLayout);
app.component('DateRange', DateRange);
app.component('DateSelector', DateSelector);
app.component('Icons', Icons);
app.component('Modal', Modal);
app.component('Switch', Switch);
app.component('Tabulator', Tabulator);
app.component('Toggle', Toggle);
app.component('Towser', Towser);
app.component('Loader', Loader);
app.component("FileUpload", FileUpload);
app.component("FilePreview", FilePreview);

app.mount('#app');

---

3. Register Directives (Global)

You can globally register all directives in your Vue app:

import { createApp } from 'vue';
import App from './App.vue';
import { InputError, ScrollbarScroll, InputSelect, InputCurrency, ScrollbarAnimateDropdown, Tooltip } from "dolphin-components";

const app = createApp(App);

app.directive("input-error", InputError);
app.directive("input-currency", InputCurrency);
app.directive("input-select", InputSelect);
app.directive("hide-scrollbar", ScrollbarScroll);
app.directive("animate-dropdown", ScrollbarAnimateDropdown);
app.directive("tooltip", Tooltip);

app.mount('#app');

---

4. Register Plugins (Global)

You can globally register plugins in your Vue app:

import { createApp } from 'vue';
import App from './App.vue';
import { FocusNextPlugin, CurrencyFormatterPlugin, NumbertoWordPlugin, ToastPlugin } from "dolphin-components";

const app = createApp(App);

app.use(FocusNextPlugin);
app.use(CurrencyFormatterPlugin);
app.use(NumbertoWordPlugin);
app.use(ToastPlugin);

app.mount('#app');

---

5. Register ESLint (Flat Config)

Configuration

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import prettier from "eslint-plugin-prettier/recommended";
import vueConfigTypescript from "@vue/eslint-config-typescript";
import vueConfigPrettier from "@vue/eslint-config-prettier";
import dolphinEslint from "dolphin-components/eslint";

/** @type {import('eslint').Linter.Config[]} */
export default [
    {
        languageOptions: {
            globals: {
                ...globals.browser,
                ...globals.node,
                DOLPHIN: "readonly",
            },
        },
    },

    //Dolphin Component
    dolphinEslint.configs.recommended,

    // js
    pluginJs.configs.recommended,
    {
        rules: {
            "no-unused-vars": "error",
            "no-undef": "error",
        },
    },

    // ts
    ...tseslint.configs.recommended,
    {
        rules: {
            "@typescript-eslint/no-unused-vars": [
                "error",
                {
                    argsIgnorePattern: "^(props|_)",
                    varsIgnorePattern: "^(props|_)",
                },
            ],
            "@typescript-eslint/no-explicit-any": "off",
        },
    },

    // vue
    ...pluginVue.configs["flat/recommended"],
    {
        files: ["*.vue", "**/*.vue"],
        languageOptions: {
            parserOptions: {
                parser: tseslint.parser,
            },
        },
    },
    {
        rules: {
            ...vueConfigTypescript.rules,
            ...vueConfigPrettier.rules,
            "prettier/prettier": [
                "warn",
                {
                    singleQuote: false,
                },
            ],
            "vue/multi-word-component-names": "off",
            "vue/attribute-hyphenation": "off",
            "vue/no-v-html": "off",
            "vue/v-on-event-hyphenation": "off",
            "vue/require-v-for-key": "off",
            "vue/no-template-shadow": "error",
            "vue/no-reserved-component-names": "off",
            "vue/attributes-order": "off",
            "@typescript-eslint/ban-ts-comment": "off",
            "@typescript-eslint/no-require-imports": "off",
            "vue/require-default-prop": "error",
        },
    },
    {
        ignores: ["node_modules", ".nuxt", ".output", "dist"],
    },

    // prettier
    prettier,
    {
        rules: {
            "prettier/prettier": ["warn", { singleQuote: false }],
        },
    },
];