dolphin-components 2.0.6 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,132 +1,4 @@
1
- # Dolphin Component Library
2
-
3
- ![npm](https://img.shields.io/npm/v/dolphin-components) ![License](https://img.shields.io/npm/l/dolphin-components) ![Vue](https://img.shields.io/badge/vue-3.x-brightgreen)
4
-
5
- A Vue component library built with TypeScript, Vite, Vue, TailwindCSS, Multiselect, Sweetalert2, and Tabulator.
6
-
7
- ## Installation
8
-
9
- Install the package via npm:
10
-
11
- ```sh
12
- npm install dolphin-components
13
- ```
14
-
15
- ## Usage
16
-
17
- ### 1. Import Styles
18
-
19
- Make sure to import the CSS styles in your main entry file (e.g., `main.css`):
20
-
21
- ```css
22
- @import 'dolphin-components/dolphin-components.css';
23
- ```
24
-
25
- ### 2. Register Components
26
-
27
- #### Global Registration
28
-
29
- You can globally register all components in your Vue app:
30
-
31
- ```ts
32
- import { createApp } from 'vue';
33
- import App from './App.vue';
34
- import { ContentLayout, Modal, Switch, Tabulator, Toggle, Towser } from 'dolphin-components';
35
-
36
- const app = createApp(App);
37
-
38
- app.component('ContentLayout', ContentLayout);
39
- app.component('Modal', Modal);
40
- app.component('Switch', Switch);
41
- app.component('Tabulator', Tabulator);
42
- app.component('Toggle', Toggle);
43
- app.component('Towser', Towser);
44
-
45
- app.mount('#app');
46
- ```
47
-
48
- ### 3. Available Components
49
-
50
- #### ContentLayout
51
-
52
- **Props:**
53
- - `title` (Array of `ContentTitle[]`, required) - Defines the content titles with optional links.
54
- - `actions` (Array of `ContentAction[]`, optional) - Defines actions with a title, emit event, and optional class.
55
- - `bodyClass` (String, optional) - Additional class for the body.
56
- - `titleClass` (String, optional) - Additional class for the title.
57
-
58
- #### Modal
59
-
60
- **Props:**
61
- - `title` (Array of `ModalTitle[]`, required) - Defines modal titles with optional links.
62
- - `actions` (Array of `ModalAction[]`, required) - Defines actions with an emit event and optional class.
63
- - `show` (Boolean, required) - Controls modal visibility.
64
- - `width` (String, optional) - Defines modal width.
65
-
66
- #### Switch
67
-
68
- **Props:**
69
- - `modelValue` (Boolean, required) - The v-model value.
70
- - `background` (String, optional) - Background color.
71
- - `disable` (Boolean, optional) - Disable Switch.
72
-
73
- #### Tabulator
74
-
75
- **Props:**
76
- - `data` (Array of `TabulatorData[]`, required) - Defines table data.
77
- - `columns` (Array of `TabulatorHeader[]`, required) - Defines table headers.
78
- - `placeholder` (String, required) - Placeholder text when no data is present.
79
- - `paginationSize` (Number, required) - Pagination size.
80
- - `paginationSizeSelector` (Array of numbers, required) - Pagination size options.
81
- - `action` (Boolean, required) - Enables or disables action buttons.
82
- - `actionButtons` (Array of `TabulatorAction[]`, required) - Defines action buttons.
83
- - `heightOffset` (Number, required) - Adjusts table height.
84
-
85
- #### Toggle
86
-
87
- **Props:**
88
- - `modelValue` (Boolean, required) - The v-model value.
89
- - `onText` (String, optional) - Text when toogle on.
90
- - `offText` (String, optional) - Text when toogle off.
91
- - `width` (String, optional) - Width of Toggle [Eg: 100px].
92
- - `disable` (Boolean, optional) - Disable Toggle.
93
-
94
- #### Towser
95
-
96
- **Props:**
97
- - `show` (Boolean, required) - Controls visibility.
98
- - `title` (Array of `TowserTitle[]`, required) - Defines the titles with optional links.
99
- - `actions` (Array of `TowserAction[]`, optional) - Defines actions.
100
- - `double` (Boolean, optional) - Enables double-pane layout.
101
- - `bodyWidth` (Number, optional) - Width of the main body.
102
- - `body2Width` (Number, optional) - Width of the secondary body.
103
-
104
- ### 4. Register Directives
105
- ``` ts
106
- import { InputError } from 'dolphin-components';
107
- app.directive('error', InputError)
108
-
109
- ```
110
-
111
- ### 5. Available Directives
112
-
113
- #### Input Error
114
-
115
- A Vue directive for handling form input error states and displaying error messages.
116
-
117
- **Usage:**
118
- ```vue
119
- <div v-error="error">
120
- <input type="text" v-model="fieldValue" />
121
- </div>
122
- ```
123
-
124
- **Properties:**
125
- - `error` (String, required) - Error message to display
126
-
127
- ## TypeScript Support
128
-
129
- This package includes TypeScript support with full typings for all components.
1
+ ## Dolphin Component - Mavorion
130
2
 
131
3
  ## License
132
4