@aitronos/freddy-plugins 0.1.87 → 0.1.88
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 +128 -3
- package/dist/index.cjs +2 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +6 -0
- package/dist/index.js +1738 -1145
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -4,8 +4,8 @@ This template should help get you started developing with Vue 3 and TypeScript i
|
|
|
4
4
|
|
|
5
5
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
|
6
6
|
|
|
7
|
-
|
|
8
7
|
## Recommended IDE Setup
|
|
8
|
+
|
|
9
9
|
Install yarn 4.7.0 or greater.
|
|
10
10
|
|
|
11
11
|
to install dependencies
|
|
@@ -19,7 +19,6 @@ npm error notarget No matching version found for yarn@4.7.0.
|
|
|
19
19
|
npm error notarget In most cases you or one of your dependencies are requesting
|
|
20
20
|
npm error notarget a package version that doesn't exist.
|
|
21
21
|
|
|
22
|
-
|
|
23
22
|
## To resolve this error
|
|
24
23
|
|
|
25
24
|
You have to enable corepack
|
|
@@ -29,7 +28,6 @@ corepack enable
|
|
|
29
28
|
corepack prepare yarn@4.7.0 --activate
|
|
30
29
|
```
|
|
31
30
|
|
|
32
|
-
|
|
33
31
|
## TO RUN THE PROJECT
|
|
34
32
|
|
|
35
33
|
```sh
|
|
@@ -37,3 +35,130 @@ yarn install (one time)
|
|
|
37
35
|
yarn storybook
|
|
38
36
|
```
|
|
39
37
|
|
|
38
|
+
## Using Directives
|
|
39
|
+
|
|
40
|
+
### v-fr-sanitize
|
|
41
|
+
|
|
42
|
+
To sanitize HTML in your app, use the `v-fr-sanitize` directive:
|
|
43
|
+
|
|
44
|
+
```vue
|
|
45
|
+
<template>
|
|
46
|
+
<div v-fr-sanitize="dirtyHtml" />
|
|
47
|
+
</template>
|
|
48
|
+
|
|
49
|
+
<script setup lang="ts">
|
|
50
|
+
import { vFrSanitize } from "@aitronos/freddy-plugins";
|
|
51
|
+
</script>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Register the directive globally (if needed):
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import { createApp } from "vue";
|
|
58
|
+
import App from "./App.vue";
|
|
59
|
+
import { vFrSanitize } from "@aitronos/freddy-plugins";
|
|
60
|
+
|
|
61
|
+
const app = createApp(App);
|
|
62
|
+
app.directive("fr-sanitize", vFrSanitize);
|
|
63
|
+
app.mount("#app");
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
#### Allowed Tags and Attributes
|
|
67
|
+
|
|
68
|
+
| Allowed Tags | Allowed Attributes |
|
|
69
|
+
| ------------ | ------------------ |
|
|
70
|
+
| a | href |
|
|
71
|
+
| abbr | src |
|
|
72
|
+
| b | alt |
|
|
73
|
+
| blockquote | title |
|
|
74
|
+
| br | width |
|
|
75
|
+
| code | height |
|
|
76
|
+
| div | align |
|
|
77
|
+
| em | class |
|
|
78
|
+
| h1 | id |
|
|
79
|
+
| h2 | colspan |
|
|
80
|
+
| h3 | rowspan |
|
|
81
|
+
| h4 | |
|
|
82
|
+
| h5 | |
|
|
83
|
+
| h6 | |
|
|
84
|
+
| hr | |
|
|
85
|
+
| i | |
|
|
86
|
+
| img | |
|
|
87
|
+
| li | |
|
|
88
|
+
| ol | |
|
|
89
|
+
| p | |
|
|
90
|
+
| pre | |
|
|
91
|
+
| span | |
|
|
92
|
+
| strong | |
|
|
93
|
+
| sub | |
|
|
94
|
+
| sup | |
|
|
95
|
+
| table | |
|
|
96
|
+
| tbody | |
|
|
97
|
+
| td | |
|
|
98
|
+
| th | |
|
|
99
|
+
| thead | |
|
|
100
|
+
| tr | |
|
|
101
|
+
| u | |
|
|
102
|
+
| ul | |
|
|
103
|
+
|
|
104
|
+
## Utility Usage
|
|
105
|
+
|
|
106
|
+
### Toasts
|
|
107
|
+
|
|
108
|
+
#### useToast
|
|
109
|
+
|
|
110
|
+
Add toast notifications anywhere in your app:
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
import { useToast } from "@aitronos/freddy-plugins";
|
|
114
|
+
|
|
115
|
+
const { addToast } = useToast();
|
|
116
|
+
addToast({
|
|
117
|
+
message: "Operation successful!",
|
|
118
|
+
toastType: "success", // 'success' | 'danger' | 'info'
|
|
119
|
+
duration: 3000, // optional, ms
|
|
120
|
+
});
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
#### useSnackBar
|
|
124
|
+
|
|
125
|
+
Add snackbars with more options:
|
|
126
|
+
|
|
127
|
+
```ts
|
|
128
|
+
import { useSnackBar } from "@aitronos/freddy-plugins";
|
|
129
|
+
|
|
130
|
+
const { addSnackBar } = useSnackBar();
|
|
131
|
+
addSnackBar({
|
|
132
|
+
title: "Saved",
|
|
133
|
+
message: "Your changes have been saved.",
|
|
134
|
+
toastType: "success",
|
|
135
|
+
duration: 3000, // optional
|
|
136
|
+
toastContainerSize: "full", // 'full' | 'half' | 'side70', optional
|
|
137
|
+
});
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### Confirmation Modals
|
|
141
|
+
|
|
142
|
+
Show a confirmation modal and await user response:
|
|
143
|
+
|
|
144
|
+
```ts
|
|
145
|
+
import {
|
|
146
|
+
openConfirmBoxModal,
|
|
147
|
+
openDeleteConfirmModal,
|
|
148
|
+
} from "@aitronos/freddy-plugins";
|
|
149
|
+
|
|
150
|
+
// For a generic confirmation
|
|
151
|
+
const confirmed = await openConfirmBoxModal("Confirm", "Are you sure?");
|
|
152
|
+
if (confirmed) {
|
|
153
|
+
// user confirmed
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
// For a delete confirmation
|
|
157
|
+
const deleted = await openDeleteConfirmModal(
|
|
158
|
+
"Delete Item",
|
|
159
|
+
"Are you sure you want to delete this item?"
|
|
160
|
+
);
|
|
161
|
+
if (deleted) {
|
|
162
|
+
// user confirmed deletion
|
|
163
|
+
}
|
|
164
|
+
```
|