sprintify-ui 0.11.34 → 0.12.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 +0 -2
- package/dist/sprintify-ui.es.js +1834 -1836
- package/dist/style.css +1 -4
- package/dist/types/components/BaseRichText.vue.d.ts +0 -8
- package/dist/types/components/BaseTipTap.vue.d.ts +2 -1
- package/package.json +1 -5
- package/src/assets/base-rich-text.css +13 -287
- package/src/assets/main.css +0 -3
- package/src/components/BaseRichText.stories.js +5 -22
- package/src/components/BaseRichText.vue +3 -53
- package/src/components/BaseTipTap.vue +38 -3
- package/dist/BaseCkeditor-D39KO4I5.js +0 -143
- package/dist/types/components/BaseCkeditor.vue.d.ts +0 -32
- package/src/components/BaseCkeditor.vue +0 -170
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { defineComponent as c, computed as i, openBlock as f, createBlock as I, unref as n } from "vue";
|
|
2
|
-
import { ClassicEditor as B, BalloonEditor as k, InlineEditor as y, Essentials as h, SourceEditing as z, Paragraph as C, Bold as S, Italic as v, Underline as E, Strikethrough as T, Subscript as V, Superscript as w, Code as F, CodeBlock as L, List as R, Indent as A, IndentBlock as x, Link as D, Autoformat as P, Heading as U, Image as G, AutoImage as O, ImageStyle as H, ImageResize as K, ImageToolbar as M, ImageInsert as N, Base64UploadAdapter as W, Table as j, TableToolbar as q, MediaEmbed as J, PasteFromOffice as Q, BlockToolbar as X, Font as Y, FindAndReplace as Z, RemoveFormat as $ } from "ckeditor5";
|
|
3
|
-
import { Ckeditor as _ } from "@ckeditor/ckeditor5-vue";
|
|
4
|
-
const te = /* @__PURE__ */ c({
|
|
5
|
-
__name: "BaseCkeditor",
|
|
6
|
-
props: {
|
|
7
|
-
modelValue: {},
|
|
8
|
-
editor: { default: "classic" },
|
|
9
|
-
size: { default: "md" },
|
|
10
|
-
toolbar: { default() {
|
|
11
|
-
return [
|
|
12
|
-
"undo",
|
|
13
|
-
"redo",
|
|
14
|
-
"|",
|
|
15
|
-
"heading",
|
|
16
|
-
"bold",
|
|
17
|
-
"italic",
|
|
18
|
-
"underline",
|
|
19
|
-
"fontBackgroundColor",
|
|
20
|
-
"|",
|
|
21
|
-
"link",
|
|
22
|
-
"insertImage",
|
|
23
|
-
"|",
|
|
24
|
-
"numberedList",
|
|
25
|
-
"bulletedList",
|
|
26
|
-
"|",
|
|
27
|
-
"insertTable"
|
|
28
|
-
];
|
|
29
|
-
} },
|
|
30
|
-
placeholder: { default: "" },
|
|
31
|
-
disabled: { type: Boolean, default: !1 }
|
|
32
|
-
},
|
|
33
|
-
emits: ["update:modelValue", "focus", "blur", "input", "ready"],
|
|
34
|
-
setup(d, { expose: u, emit: s }) {
|
|
35
|
-
const o = d, t = s;
|
|
36
|
-
let a = null;
|
|
37
|
-
function m(r) {
|
|
38
|
-
a = r, t("ready", r);
|
|
39
|
-
}
|
|
40
|
-
const g = i(() => {
|
|
41
|
-
switch (o.editor) {
|
|
42
|
-
case "inline":
|
|
43
|
-
return y;
|
|
44
|
-
case "balloon":
|
|
45
|
-
return k;
|
|
46
|
-
default:
|
|
47
|
-
return B;
|
|
48
|
-
}
|
|
49
|
-
}), p = i(() => o.modelValue === null ? "" : o.modelValue), b = i(() => ({
|
|
50
|
-
licenseKey: "GPL",
|
|
51
|
-
plugins: [
|
|
52
|
-
h,
|
|
53
|
-
z,
|
|
54
|
-
C,
|
|
55
|
-
S,
|
|
56
|
-
v,
|
|
57
|
-
E,
|
|
58
|
-
T,
|
|
59
|
-
V,
|
|
60
|
-
w,
|
|
61
|
-
F,
|
|
62
|
-
L,
|
|
63
|
-
R,
|
|
64
|
-
A,
|
|
65
|
-
x,
|
|
66
|
-
D,
|
|
67
|
-
P,
|
|
68
|
-
U,
|
|
69
|
-
G,
|
|
70
|
-
O,
|
|
71
|
-
H,
|
|
72
|
-
K,
|
|
73
|
-
M,
|
|
74
|
-
N,
|
|
75
|
-
W,
|
|
76
|
-
j,
|
|
77
|
-
q,
|
|
78
|
-
J,
|
|
79
|
-
Q,
|
|
80
|
-
X,
|
|
81
|
-
Y,
|
|
82
|
-
Z,
|
|
83
|
-
$
|
|
84
|
-
],
|
|
85
|
-
toolbar: {
|
|
86
|
-
items: o.toolbar,
|
|
87
|
-
shouldNotGroupWhenFull: !0
|
|
88
|
-
},
|
|
89
|
-
table: {
|
|
90
|
-
contentToolbar: ["tableColumn", "tableRow"]
|
|
91
|
-
},
|
|
92
|
-
image: {
|
|
93
|
-
resizeOptions: [
|
|
94
|
-
{
|
|
95
|
-
name: "resizeImage:original",
|
|
96
|
-
label: "Default image width",
|
|
97
|
-
value: null
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
name: "resizeImage:50",
|
|
101
|
-
label: "50% page width",
|
|
102
|
-
value: "50"
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
name: "resizeImage:75",
|
|
106
|
-
label: "75% page width",
|
|
107
|
-
value: "75"
|
|
108
|
-
},
|
|
109
|
-
{
|
|
110
|
-
name: "resizeImage:100",
|
|
111
|
-
label: "100% page width",
|
|
112
|
-
value: "100"
|
|
113
|
-
}
|
|
114
|
-
],
|
|
115
|
-
toolbar: [
|
|
116
|
-
"imageStyle:alignBlockLeft",
|
|
117
|
-
"imageStyle:block",
|
|
118
|
-
"imageStyle:alignBlockRight",
|
|
119
|
-
"resizeImage"
|
|
120
|
-
]
|
|
121
|
-
},
|
|
122
|
-
placeholder: o.placeholder
|
|
123
|
-
}));
|
|
124
|
-
return u({
|
|
125
|
-
getEditorData() {
|
|
126
|
-
return (a == null ? void 0 : a.getData()) || "";
|
|
127
|
-
}
|
|
128
|
-
}), (r, e) => (f(), I(n(_), {
|
|
129
|
-
"model-value": n(p),
|
|
130
|
-
editor: n(g),
|
|
131
|
-
config: n(b),
|
|
132
|
-
disabled: d.disabled,
|
|
133
|
-
"onUpdate:modelValue": e[0] || (e[0] = (l) => t("update:modelValue", l)),
|
|
134
|
-
onFocus: e[1] || (e[1] = (l) => t("focus", l)),
|
|
135
|
-
onBlur: e[2] || (e[2] = (l) => t("blur", l)),
|
|
136
|
-
onInput: e[3] || (e[3] = (l) => t("input", l)),
|
|
137
|
-
onReady: m
|
|
138
|
-
}, null, 8, ["model-value", "editor", "config", "disabled"]));
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
|
-
export {
|
|
142
|
-
te as default
|
|
143
|
-
};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { Size } from '@/utils/sizes';
|
|
2
|
-
import { ToolbarOption } from '@/types/ToolbarOption';
|
|
3
|
-
type __VLS_Props = {
|
|
4
|
-
modelValue: string | null | undefined;
|
|
5
|
-
editor?: 'classic' | 'inline' | 'balloon';
|
|
6
|
-
size?: Size;
|
|
7
|
-
toolbar?: ToolbarOption[] | string[];
|
|
8
|
-
placeholder?: string;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
};
|
|
11
|
-
declare const _default: import("vue").DefineComponent<__VLS_Props, {
|
|
12
|
-
getEditorData(): string;
|
|
13
|
-
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
14
|
-
blur: (...args: any[]) => void;
|
|
15
|
-
focus: (...args: any[]) => void;
|
|
16
|
-
input: (...args: any[]) => void;
|
|
17
|
-
"update:modelValue": (...args: any[]) => void;
|
|
18
|
-
ready: (...args: any[]) => void;
|
|
19
|
-
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
20
|
-
onBlur?: ((...args: any[]) => any) | undefined;
|
|
21
|
-
onFocus?: ((...args: any[]) => any) | undefined;
|
|
22
|
-
onInput?: ((...args: any[]) => any) | undefined;
|
|
23
|
-
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
24
|
-
onReady?: ((...args: any[]) => any) | undefined;
|
|
25
|
-
}>, {
|
|
26
|
-
placeholder: string;
|
|
27
|
-
size: Size;
|
|
28
|
-
disabled: boolean;
|
|
29
|
-
toolbar: ToolbarOption[] | string[];
|
|
30
|
-
editor: "classic" | "inline" | "balloon";
|
|
31
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
32
|
-
export default _default;
|
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<ckeditor
|
|
3
|
-
:model-value="modelValueInternal"
|
|
4
|
-
:editor="editorInternal"
|
|
5
|
-
:config="config"
|
|
6
|
-
:disabled="disabled"
|
|
7
|
-
@update:model-value="emit('update:modelValue', $event)"
|
|
8
|
-
@focus="emit('focus', $event)"
|
|
9
|
-
@blur="emit('blur', $event)"
|
|
10
|
-
@input="emit('input', $event)"
|
|
11
|
-
@ready="onReady"
|
|
12
|
-
/>
|
|
13
|
-
</template>
|
|
14
|
-
|
|
15
|
-
<script lang="ts" setup>
|
|
16
|
-
import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, SourceEditing, MediaEmbed, Paragraph, Bold, Italic, Strikethrough, Subscript, Superscript, List, Link, Autoformat, Heading, Underline, Code, CodeBlock, Indent, IndentBlock, Table, TableToolbar, Image, ImageResize, ImageStyle, ImageToolbar, ImageInsert, AutoImage, Base64UploadAdapter, PasteFromOffice, BlockToolbar, Font, FindAndReplace, RemoveFormat } from 'ckeditor5';
|
|
17
|
-
import { Ckeditor } from '@ckeditor/ckeditor5-vue';
|
|
18
|
-
import { Size } from '@/utils/sizes';
|
|
19
|
-
import { ToolbarOption } from '@/types/ToolbarOption';
|
|
20
|
-
|
|
21
|
-
const props = withDefaults(defineProps<{
|
|
22
|
-
modelValue: string | null | undefined;
|
|
23
|
-
editor?: 'classic' | 'inline' | 'balloon';
|
|
24
|
-
size?: Size;
|
|
25
|
-
toolbar?: ToolbarOption[] | string[];
|
|
26
|
-
placeholder?: string;
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
}>(), {
|
|
29
|
-
editor: 'classic',
|
|
30
|
-
size: 'md',
|
|
31
|
-
toolbar() {
|
|
32
|
-
return [
|
|
33
|
-
'undo',
|
|
34
|
-
'redo',
|
|
35
|
-
'|',
|
|
36
|
-
'heading',
|
|
37
|
-
'bold',
|
|
38
|
-
'italic',
|
|
39
|
-
'underline',
|
|
40
|
-
'fontBackgroundColor',
|
|
41
|
-
'|',
|
|
42
|
-
'link',
|
|
43
|
-
'insertImage',
|
|
44
|
-
'|',
|
|
45
|
-
'numberedList',
|
|
46
|
-
'bulletedList',
|
|
47
|
-
'|',
|
|
48
|
-
'insertTable'
|
|
49
|
-
] as ToolbarOption[];
|
|
50
|
-
},
|
|
51
|
-
placeholder: '',
|
|
52
|
-
disabled: false,
|
|
53
|
-
hasError: false,
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input', 'ready']);
|
|
57
|
-
|
|
58
|
-
type Editor = InlineEditor | BalloonEditor | ClassicEditor;
|
|
59
|
-
|
|
60
|
-
let ckeditorInstance = null as Editor | null;
|
|
61
|
-
|
|
62
|
-
function onReady(editor: Editor | null) {
|
|
63
|
-
ckeditorInstance = editor;
|
|
64
|
-
emit('ready', editor);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
const editorInternal = computed(() => {
|
|
68
|
-
switch (props.editor) {
|
|
69
|
-
case 'inline':
|
|
70
|
-
return InlineEditor;
|
|
71
|
-
case 'balloon':
|
|
72
|
-
return BalloonEditor;
|
|
73
|
-
default:
|
|
74
|
-
return ClassicEditor;
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
const modelValueInternal = computed(() => {
|
|
79
|
-
if (props.modelValue === null) {
|
|
80
|
-
return '';
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
return props.modelValue;
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
const config = computed(() => {
|
|
87
|
-
return {
|
|
88
|
-
licenseKey: 'GPL',
|
|
89
|
-
plugins: [
|
|
90
|
-
Essentials,
|
|
91
|
-
SourceEditing,
|
|
92
|
-
Paragraph,
|
|
93
|
-
Bold,
|
|
94
|
-
Italic,
|
|
95
|
-
Underline,
|
|
96
|
-
Strikethrough,
|
|
97
|
-
Subscript,
|
|
98
|
-
Superscript,
|
|
99
|
-
Code,
|
|
100
|
-
CodeBlock,
|
|
101
|
-
List,
|
|
102
|
-
Indent,
|
|
103
|
-
IndentBlock,
|
|
104
|
-
Link,
|
|
105
|
-
Autoformat,
|
|
106
|
-
Heading,
|
|
107
|
-
Image,
|
|
108
|
-
AutoImage,
|
|
109
|
-
ImageStyle,
|
|
110
|
-
ImageResize,
|
|
111
|
-
ImageToolbar,
|
|
112
|
-
ImageInsert,
|
|
113
|
-
Base64UploadAdapter,
|
|
114
|
-
Table,
|
|
115
|
-
TableToolbar,
|
|
116
|
-
MediaEmbed,
|
|
117
|
-
PasteFromOffice,
|
|
118
|
-
BlockToolbar,
|
|
119
|
-
Font,
|
|
120
|
-
FindAndReplace,
|
|
121
|
-
RemoveFormat,
|
|
122
|
-
],
|
|
123
|
-
toolbar: {
|
|
124
|
-
items: props.toolbar,
|
|
125
|
-
shouldNotGroupWhenFull: true,
|
|
126
|
-
},
|
|
127
|
-
table: {
|
|
128
|
-
contentToolbar: ['tableColumn', 'tableRow']
|
|
129
|
-
},
|
|
130
|
-
image: {
|
|
131
|
-
resizeOptions: [
|
|
132
|
-
{
|
|
133
|
-
name: 'resizeImage:original',
|
|
134
|
-
label: 'Default image width',
|
|
135
|
-
value: null
|
|
136
|
-
},
|
|
137
|
-
{
|
|
138
|
-
name: 'resizeImage:50',
|
|
139
|
-
label: '50% page width',
|
|
140
|
-
value: '50'
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
name: 'resizeImage:75',
|
|
144
|
-
label: '75% page width',
|
|
145
|
-
value: '75'
|
|
146
|
-
},
|
|
147
|
-
{
|
|
148
|
-
name: 'resizeImage:100',
|
|
149
|
-
label: '100% page width',
|
|
150
|
-
value: '100'
|
|
151
|
-
}
|
|
152
|
-
],
|
|
153
|
-
toolbar: [
|
|
154
|
-
'imageStyle:alignBlockLeft',
|
|
155
|
-
'imageStyle:block',
|
|
156
|
-
'imageStyle:alignBlockRight',
|
|
157
|
-
'resizeImage'
|
|
158
|
-
]
|
|
159
|
-
},
|
|
160
|
-
placeholder: props.placeholder,
|
|
161
|
-
};
|
|
162
|
-
});
|
|
163
|
-
|
|
164
|
-
defineExpose({
|
|
165
|
-
getEditorData() {
|
|
166
|
-
return ckeditorInstance?.getData() || '';
|
|
167
|
-
},
|
|
168
|
-
});
|
|
169
|
-
|
|
170
|
-
</script>
|