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 (eslint.config.ts)

import type { Linter } from "eslint";

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 { defineConfigWithVueTs } from "@vue/eslint-config-typescript";
import vueConfigPrettier from "@vue/eslint-config-prettier";
import dolphinEslint from "dolphin-components/eslint";

const config: Linter.FlatConfig[] = [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        DOLPHIN: "readonly",
      },
    },
  },

  // Dolphin Component
  dolphinEslint.configs.recommended,

  // JavaScript
  pluginJs.configs.recommended,

  {
    rules: {
      "no-unused-vars": "error",
      "no-undef": "error",
      "no-useless-assignment": "off",
    },
  },

  // TypeScript
  ...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: {
      ...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 }],
    },
  },
];

export default defineConfigWithVueTs(...config);