dolphin-components-t1

Dolphin Component Library

A Vue component library built with TypeScript, Vite, Vue, TailwindCSS, Multiselect, Sweetalert2, and Tabulator.

Installation

Install the package via npm:

npm install dolphin-components

Usage

1. Import Styles

Make sure to import the CSS styles in your main entry file (e.g., main.ts or main.js):

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

2. Register Components

Global Registration

You can globally register all components in your Vue app:

import { createApp } from 'vue';
import App from './App.vue';
import { ContentLayout, Modal, Switch, Tabulator, Toggle, Towser } from 'dolphin-components';

const app = createApp(App);

app.component('ContentLayout', ContentLayout);
app.component('Modal', Modal);
app.component('Switch', Switch);
app.component('Tabulator', Tabulator);
app.component('Toggle', Toggle);
app.component('Towser', Towser);

app.mount('#app');

3. Available Components

ContentLayout

Props:

• title (Array of ContentTitle[], required) - Defines the content titles with optional links.
• action (Array of ContentAction[], optional) - Defines actions with a title, emit event, and optional class.
• bodyClass (String, optional) - Additional class for the body.
• titleClass (String, optional) - Additional class for the title.

Modal

Props:

• title (Array of ModalTitle[], required) - Defines modal titles with optional links.
• action (Array of ModalAction[], required) - Defines actions with an emit event and optional class.
• show (Boolean, required) - Controls modal visibility.
• width (String, optional) - Defines modal width.

Switch

Props:

• modelValue (Boolean, required) - The v-model value.
• background (String, optional) - Background color.
• disable (Boolean, optional) - Disable Switch.

Tabulator

Props:

• data (Array of TabulatorData[], required) - Defines table data.
• columns (Array of TabulatorHeader[], required) - Defines table headers.
• placeholder (String, required) - Placeholder text when no data is present.
• paginationSize (Number, required) - Pagination size.
• paginationSizeSelector (Array of numbers, required) - Pagination size options.
• action (Boolean, required) - Enables or disables action buttons.
• actionButtons (Array of TabulatorAction[], required) - Defines action buttons.
• heightOffset (Number, required) - Adjusts table height.

Toggle

Props:

• modelValue (Boolean, required) - The v-model value.
• onText (String, optional) - Text when toogle on.
• offText (String, optional) - Text when toogle off.
• width (String, optional) - Width of Toggle [Eg: 100px].
• disable (Boolean, optional) - Disable Toggle.

Towser

Props:

• show (Boolean, required) - Controls visibility.
• title (Array of TowserTitle[], required) - Defines the titles with optional links.
• action (Array of TowserAction[], optional) - Defines actions.
• double (Boolean, optional) - Enables double-pane layout.
• bodyWidth (Number, optional) - Width of the main body.
• body2Width (Number, optional) - Width of the secondary body.

4. Register Directives

import { InputError } from 'dolphin-components';
app.directive('error', InputError)

5. Available Directives

Input Error

A Vue directive for handling form input error states and displaying error messages.

Usage:

<div v-error="error">
  <input type="text" v-model="fieldValue" />
</div>

Properties:

• error (String, required) - Error message to display

TypeScript Support

This package includes TypeScript support with full typings for all components.

License

This project is licensed under the Apache 2.0 License. See the LICENSE file for more details.