dolphin-components 2.0.6 → 2.1.0
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 +1 -129
- package/dist/dolphin-components.cjs.js +1651 -1587
- package/dist/dolphin-components.css +1 -1
- package/dist/dolphin-components.es.js +16971 -11078
- package/dist/dolphin-components.umd.js +1651 -1587
- package/dist/index.d.ts +364 -12
- package/package.json +6 -1
- package/dist/Directives/ErrorDirective.d.ts +0 -5
- package/dist/components/ContentLayout.vue.d.ts +0 -51
- package/dist/components/Icons.vue.d.ts +0 -9
- package/dist/components/Modal.vue.d.ts +0 -57
- package/dist/components/Switch.vue.d.ts +0 -11
- package/dist/components/Tabulator.vue.d.ts +0 -15
- package/dist/components/Toggle.vue.d.ts +0 -13
- package/dist/components/Towser.vue.d.ts +0 -45
- package/dist/types.d.ts +0 -115
package/README.md
CHANGED
|
@@ -1,132 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
  
|
|
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
|
|