@zeedhi/zd-richtext-vue 1.1.1 → 1.2.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 +74 -0
- package/dist/rich-text-vue.esm.js +23 -19
- package/dist/rich-text-vue.umd.js +24 -21
- package/package.json +5 -5
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# Componente Rich Text para Zeedhi
|
|
2
|
+
O componente de Rich Text é um editor de texto enriquecido com algumas funcionalidades.
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## Instalação
|
|
7
|
+
<code>npm i @zeedhi/zd-richtext</code>
|
|
8
|
+
Com isso, dois pacotes serão instalados: o **@zeedhi/zd-richtext-common** e o **@zeedhi/zd-richtext-vue**.
|
|
9
|
+
|
|
10
|
+
Após a instalação, é necessário que você você importe o pacote **@zeedhi/zd-richtext-vue** dentro de seu arquivo de configuração <code>zeedhi.ts</code>
|
|
11
|
+
```ts
|
|
12
|
+
import { ZdRichText } from '@zeedhi/zd-richtext';
|
|
13
|
+
|
|
14
|
+
Vue.component('ZdRichText', ZdRichText);
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Já o pacote **@zeedhi/zd-rich-text-common** deve ser importado no arquivo <code>controller</code> do componente.
|
|
18
|
+
|
|
19
|
+
## Uso Básico
|
|
20
|
+
Para usar, defina a propriedade <code>component</code> como 'ZdRichText'.
|
|
21
|
+
|
|
22
|
+
```json
|
|
23
|
+
{
|
|
24
|
+
"name": "rich-text-example",
|
|
25
|
+
"component": "ZdRichText"
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Propriedades
|
|
30
|
+
|
|
31
|
+
### outputFormat
|
|
32
|
+
<p>Tipo: <code>string</code></p>
|
|
33
|
+
<p>Default: <code>json</code></p>
|
|
34
|
+
<p>Descrição: Define o formato de saída do conteúdo digitado ('json' ou 'html')</p>
|
|
35
|
+
|
|
36
|
+
### placeholder
|
|
37
|
+
<p>Tipo: <code>string</code></p>
|
|
38
|
+
<p>Default: <code>''</code></p>
|
|
39
|
+
<p>Descrição: Texto mostrado enquanto o editor estiver sem conteúdo</p>
|
|
40
|
+
|
|
41
|
+
### disabled
|
|
42
|
+
<p>Tipo: <code>boolean</code></p>
|
|
43
|
+
<p>Default: <code>false</code></p>
|
|
44
|
+
<p>Descrição: Desabilita o componente</p>
|
|
45
|
+
|
|
46
|
+
### toolbarColor
|
|
47
|
+
<p>Tipo: <code>string</code></p>
|
|
48
|
+
<p>Default: <code>'#772583'</code></p>
|
|
49
|
+
<p>Descrição: Define a cor da barra de tarefas</p>
|
|
50
|
+
|
|
51
|
+
### cardColor
|
|
52
|
+
<p>Tipo: <code>string</code></p>
|
|
53
|
+
<p>Default: <code>''</code></p>
|
|
54
|
+
<p>Descrição: Define a cor do cartão de entrada de texto</p>
|
|
55
|
+
|
|
56
|
+
### outlined
|
|
57
|
+
<p>Tipo: <code>boolean</code></p>
|
|
58
|
+
<p>Default: <code>false</code></p>
|
|
59
|
+
<p>Descrição: Remove a elevação e adiciona uma borda fina ao cartão de entrada de texto</p>
|
|
60
|
+
|
|
61
|
+
### width
|
|
62
|
+
<p>Tipo: <code>number | string</code></p>
|
|
63
|
+
<p>Default: <code>''</code></p>
|
|
64
|
+
<p>Descrição: Define a largura do componente</p>
|
|
65
|
+
|
|
66
|
+
### height
|
|
67
|
+
<p>Tipo: <code>number | string</code></p>
|
|
68
|
+
<p>Default: <code>''</code></p>
|
|
69
|
+
<p>Descrição: Define a altura do componente</p>
|
|
70
|
+
|
|
71
|
+
## Eventos
|
|
72
|
+
<p>Nome: <code>onKeyDown</code></p>
|
|
73
|
+
<p><code>{ element, component, key, content }: IEventParam</code></p>
|
|
74
|
+
<p>Descrição: Disparado quando uma tecla é digitada no editor</p>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import Vue from 'vue';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { VersionService } from '@zeedhi/core';
|
|
3
|
+
import { PropWatch, ZdComponentRender, Vuetify } from '@zeedhi/vuetify';
|
|
4
|
+
import { Component } from 'vue-property-decorator';
|
|
4
5
|
import { RichText } from '@zeedhi/zd-richtext-common';
|
|
5
6
|
import 'tiptap-vuetify/dist/main.css';
|
|
6
7
|
|
|
@@ -59,35 +60,35 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
|
|
|
59
60
|
}
|
|
60
61
|
};
|
|
61
62
|
__decorate([
|
|
62
|
-
|
|
63
|
+
PropWatch({ type: String, default: 'json' }),
|
|
63
64
|
__metadata("design:type", String)
|
|
64
65
|
], ZdRichText.prototype, "outputFormat", void 0);
|
|
65
66
|
__decorate([
|
|
66
|
-
|
|
67
|
+
PropWatch({ type: String, default: '' }),
|
|
67
68
|
__metadata("design:type", String)
|
|
68
69
|
], ZdRichText.prototype, "placeholder", void 0);
|
|
69
70
|
__decorate([
|
|
70
|
-
|
|
71
|
+
PropWatch({ type: [Boolean, String], default: false }),
|
|
71
72
|
__metadata("design:type", Object)
|
|
72
73
|
], ZdRichText.prototype, "disabled", void 0);
|
|
73
74
|
__decorate([
|
|
74
|
-
|
|
75
|
+
PropWatch({ type: String, default: 'var(--v-primary-base)' }),
|
|
75
76
|
__metadata("design:type", String)
|
|
76
77
|
], ZdRichText.prototype, "toolbarColor", void 0);
|
|
77
78
|
__decorate([
|
|
78
|
-
|
|
79
|
+
PropWatch({ type: String, default: '' }),
|
|
79
80
|
__metadata("design:type", String)
|
|
80
81
|
], ZdRichText.prototype, "cardColor", void 0);
|
|
81
82
|
__decorate([
|
|
82
|
-
|
|
83
|
+
PropWatch({ type: [Boolean, String], default: false }),
|
|
83
84
|
__metadata("design:type", Object)
|
|
84
85
|
], ZdRichText.prototype, "outlined", void 0);
|
|
85
86
|
__decorate([
|
|
86
|
-
|
|
87
|
+
PropWatch({ type: [Number, String], default: '' }),
|
|
87
88
|
__metadata("design:type", Object)
|
|
88
89
|
], ZdRichText.prototype, "width", void 0);
|
|
89
90
|
__decorate([
|
|
90
|
-
|
|
91
|
+
PropWatch({ type: [Number, String], default: '' }),
|
|
91
92
|
__metadata("design:type", Object)
|
|
92
93
|
], ZdRichText.prototype, "height", void 0);
|
|
93
94
|
ZdRichText = __decorate([
|
|
@@ -227,38 +228,39 @@ function addStyle(id, css) {
|
|
|
227
228
|
const __vue_script__ = script;
|
|
228
229
|
|
|
229
230
|
/* template */
|
|
230
|
-
var __vue_render__ = function() {
|
|
231
|
+
var __vue_render__ = function () {
|
|
231
232
|
var _vm = this;
|
|
232
233
|
var _h = _vm.$createElement;
|
|
233
234
|
var _c = _vm._self._c || _h;
|
|
234
235
|
return _c("tiptap-vuetify", {
|
|
235
236
|
staticClass: "zd-rich-text",
|
|
236
237
|
attrs: {
|
|
238
|
+
id: _vm.instance.name,
|
|
237
239
|
"output-format": _vm.instance.outputFormat,
|
|
238
240
|
extensions: _vm.extensions,
|
|
239
241
|
"toolbar-attributes": {
|
|
240
242
|
color: _vm.instance.toolbarColor,
|
|
241
243
|
class: "rounded-t",
|
|
242
|
-
width: _vm.instance.width
|
|
244
|
+
width: _vm.instance.width,
|
|
243
245
|
},
|
|
244
246
|
"card-props": {
|
|
245
247
|
color: _vm.instance.cardColor,
|
|
246
248
|
class: "rounded-b-md",
|
|
247
249
|
outlined: _vm.instance.outlined,
|
|
248
250
|
width: _vm.instance.width,
|
|
249
|
-
height: _vm.instance.height
|
|
251
|
+
height: _vm.instance.height,
|
|
250
252
|
},
|
|
251
253
|
placeholder: _vm.instance.placeholder,
|
|
252
|
-
disabled: _vm.instance.disabled
|
|
254
|
+
disabled: _vm.instance.disabled,
|
|
253
255
|
},
|
|
254
256
|
on: { keydown: _vm.onKeyDown },
|
|
255
257
|
model: {
|
|
256
258
|
value: _vm.instance.content,
|
|
257
|
-
callback: function($$v) {
|
|
259
|
+
callback: function ($$v) {
|
|
258
260
|
_vm.$set(_vm.instance, "content", $$v);
|
|
259
261
|
},
|
|
260
|
-
expression: "instance.content"
|
|
261
|
-
}
|
|
262
|
+
expression: "instance.content",
|
|
263
|
+
},
|
|
262
264
|
})
|
|
263
265
|
};
|
|
264
266
|
var __vue_staticRenderFns__ = [];
|
|
@@ -267,7 +269,7 @@ __vue_render__._withStripped = true;
|
|
|
267
269
|
/* style */
|
|
268
270
|
const __vue_inject_styles__ = function (inject) {
|
|
269
271
|
if (!inject) return
|
|
270
|
-
inject("data-v-
|
|
272
|
+
inject("data-v-354eed49_0", { source: ".zd-rich-text button.v-btn.v-btn--icon.v-btn--round.theme--light.v-size--small.tiptap-vuetify-editor__action-render-btn {\n color: #ffffff;\n}\n.zd-rich-text div.v-card {\n display: flex;\n flex-direction: column;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar {\n display: flex;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content {\n flex-grow: 1;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror {\n margin: var(--spacing-2) !important;\n height: 100%;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror p {\n margin-top: var(--spacing-2) !important;\n margin-bottom: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
|
|
271
273
|
|
|
272
274
|
};
|
|
273
275
|
/* scoped */
|
|
@@ -301,6 +303,8 @@ Vue.use(TiptapVuetify.TiptapVuetifyPlugin, {
|
|
|
301
303
|
vuetify: new Vuetify(),
|
|
302
304
|
iconsGroup: 'mdi',
|
|
303
305
|
});
|
|
304
|
-
Vue.component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
|
|
306
|
+
Vue.component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
|
|
307
|
+
const packageContent = require('../package.json');
|
|
308
|
+
VersionService.addPackageVersion(packageContent.name, packageContent.version);
|
|
305
309
|
|
|
306
310
|
export { __vue_component__ as ZdRichText };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@zeedhi/vuetify'), require('vue-property-decorator'), require('@zeedhi/zd-richtext-common'), require('tiptap-vuetify/dist/main.css')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'vue', '@zeedhi/vuetify', 'vue-property-decorator', '@zeedhi/zd-richtext-common', 'tiptap-vuetify/dist/main.css'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-richtext-vue"] = {}, global.vue, global["@zeedhi/vuetify"], global["vue-property-decorator"], global["@zeedhi/zd-richtext-common"]));
|
|
5
|
-
})(this, (function (exports, Vue, vuetify, vuePropertyDecorator, zdRichtextCommon) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@zeedhi/core'), require('@zeedhi/vuetify'), require('vue-property-decorator'), require('@zeedhi/zd-richtext-common'), require('tiptap-vuetify/dist/main.css')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'vue', '@zeedhi/core', '@zeedhi/vuetify', 'vue-property-decorator', '@zeedhi/zd-richtext-common', 'tiptap-vuetify/dist/main.css'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-richtext-vue"] = {}, global.vue, global.core, global["@zeedhi/vuetify"], global["vue-property-decorator"], global["@zeedhi/zd-richtext-common"]));
|
|
5
|
+
})(this, (function (exports, Vue, core, vuetify, vuePropertyDecorator, zdRichtextCommon) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -63,35 +63,35 @@
|
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
__decorate([
|
|
66
|
-
|
|
66
|
+
vuetify.PropWatch({ type: String, default: 'json' }),
|
|
67
67
|
__metadata("design:type", String)
|
|
68
68
|
], ZdRichText.prototype, "outputFormat", void 0);
|
|
69
69
|
__decorate([
|
|
70
|
-
|
|
70
|
+
vuetify.PropWatch({ type: String, default: '' }),
|
|
71
71
|
__metadata("design:type", String)
|
|
72
72
|
], ZdRichText.prototype, "placeholder", void 0);
|
|
73
73
|
__decorate([
|
|
74
|
-
|
|
74
|
+
vuetify.PropWatch({ type: [Boolean, String], default: false }),
|
|
75
75
|
__metadata("design:type", Object)
|
|
76
76
|
], ZdRichText.prototype, "disabled", void 0);
|
|
77
77
|
__decorate([
|
|
78
|
-
|
|
78
|
+
vuetify.PropWatch({ type: String, default: 'var(--v-primary-base)' }),
|
|
79
79
|
__metadata("design:type", String)
|
|
80
80
|
], ZdRichText.prototype, "toolbarColor", void 0);
|
|
81
81
|
__decorate([
|
|
82
|
-
|
|
82
|
+
vuetify.PropWatch({ type: String, default: '' }),
|
|
83
83
|
__metadata("design:type", String)
|
|
84
84
|
], ZdRichText.prototype, "cardColor", void 0);
|
|
85
85
|
__decorate([
|
|
86
|
-
|
|
86
|
+
vuetify.PropWatch({ type: [Boolean, String], default: false }),
|
|
87
87
|
__metadata("design:type", Object)
|
|
88
88
|
], ZdRichText.prototype, "outlined", void 0);
|
|
89
89
|
__decorate([
|
|
90
|
-
|
|
90
|
+
vuetify.PropWatch({ type: [Number, String], default: '' }),
|
|
91
91
|
__metadata("design:type", Object)
|
|
92
92
|
], ZdRichText.prototype, "width", void 0);
|
|
93
93
|
__decorate([
|
|
94
|
-
|
|
94
|
+
vuetify.PropWatch({ type: [Number, String], default: '' }),
|
|
95
95
|
__metadata("design:type", Object)
|
|
96
96
|
], ZdRichText.prototype, "height", void 0);
|
|
97
97
|
ZdRichText = __decorate([
|
|
@@ -231,38 +231,39 @@
|
|
|
231
231
|
const __vue_script__ = script;
|
|
232
232
|
|
|
233
233
|
/* template */
|
|
234
|
-
var __vue_render__ = function() {
|
|
234
|
+
var __vue_render__ = function () {
|
|
235
235
|
var _vm = this;
|
|
236
236
|
var _h = _vm.$createElement;
|
|
237
237
|
var _c = _vm._self._c || _h;
|
|
238
238
|
return _c("tiptap-vuetify", {
|
|
239
239
|
staticClass: "zd-rich-text",
|
|
240
240
|
attrs: {
|
|
241
|
+
id: _vm.instance.name,
|
|
241
242
|
"output-format": _vm.instance.outputFormat,
|
|
242
243
|
extensions: _vm.extensions,
|
|
243
244
|
"toolbar-attributes": {
|
|
244
245
|
color: _vm.instance.toolbarColor,
|
|
245
246
|
class: "rounded-t",
|
|
246
|
-
width: _vm.instance.width
|
|
247
|
+
width: _vm.instance.width,
|
|
247
248
|
},
|
|
248
249
|
"card-props": {
|
|
249
250
|
color: _vm.instance.cardColor,
|
|
250
251
|
class: "rounded-b-md",
|
|
251
252
|
outlined: _vm.instance.outlined,
|
|
252
253
|
width: _vm.instance.width,
|
|
253
|
-
height: _vm.instance.height
|
|
254
|
+
height: _vm.instance.height,
|
|
254
255
|
},
|
|
255
256
|
placeholder: _vm.instance.placeholder,
|
|
256
|
-
disabled: _vm.instance.disabled
|
|
257
|
+
disabled: _vm.instance.disabled,
|
|
257
258
|
},
|
|
258
259
|
on: { keydown: _vm.onKeyDown },
|
|
259
260
|
model: {
|
|
260
261
|
value: _vm.instance.content,
|
|
261
|
-
callback: function($$v) {
|
|
262
|
+
callback: function ($$v) {
|
|
262
263
|
_vm.$set(_vm.instance, "content", $$v);
|
|
263
264
|
},
|
|
264
|
-
expression: "instance.content"
|
|
265
|
-
}
|
|
265
|
+
expression: "instance.content",
|
|
266
|
+
},
|
|
266
267
|
})
|
|
267
268
|
};
|
|
268
269
|
var __vue_staticRenderFns__ = [];
|
|
@@ -271,7 +272,7 @@
|
|
|
271
272
|
/* style */
|
|
272
273
|
const __vue_inject_styles__ = function (inject) {
|
|
273
274
|
if (!inject) return
|
|
274
|
-
inject("data-v-
|
|
275
|
+
inject("data-v-354eed49_0", { source: ".zd-rich-text button.v-btn.v-btn--icon.v-btn--round.theme--light.v-size--small.tiptap-vuetify-editor__action-render-btn {\n color: #ffffff;\n}\n.zd-rich-text div.v-card {\n display: flex;\n flex-direction: column;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__toolbar {\n display: flex;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content {\n flex-grow: 1;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror {\n margin: var(--spacing-2) !important;\n height: 100%;\n}\n.zd-rich-text div.v-card div.tiptap-vuetify-editor__content .ProseMirror p {\n margin-top: var(--spacing-2) !important;\n margin-bottom: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
|
|
275
276
|
|
|
276
277
|
};
|
|
277
278
|
/* scoped */
|
|
@@ -305,7 +306,9 @@
|
|
|
305
306
|
vuetify: new vuetify.Vuetify(),
|
|
306
307
|
iconsGroup: 'mdi',
|
|
307
308
|
});
|
|
308
|
-
Vue__default["default"].component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
|
|
309
|
+
Vue__default["default"].component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
|
|
310
|
+
const packageContent = require('../package.json');
|
|
311
|
+
core.VersionService.addPackageVersion(packageContent.name, packageContent.version);
|
|
309
312
|
|
|
310
313
|
exports.ZdRichText = __vue_component__;
|
|
311
314
|
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/zd-richtext-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "RichTextVue by BVR",
|
|
5
|
-
"publishConfig": {
|
|
6
|
-
"access": "public"
|
|
7
|
-
},
|
|
8
5
|
"main": "dist/rich-text-vue.umd.js",
|
|
9
6
|
"module": "dist/rich-text-vue.esm.js",
|
|
10
7
|
"typings": "types/index.d.ts",
|
|
8
|
+
"publishConfig": {
|
|
9
|
+
"access": "public"
|
|
10
|
+
},
|
|
11
11
|
"scripts": {
|
|
12
12
|
"build": "rollup -c",
|
|
13
13
|
"lint": "eslint . --ext .ts --fix",
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"vue-class-component": "^7.2.6",
|
|
24
24
|
"vue-property-decorator": "^9.1.2"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "e4e4e252e4ea83919f14a67364af75edbfdc5686"
|
|
27
27
|
}
|