@zeedhi/zd-richtext-vue 1.1.3 → 1.2.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.
Files changed (4) hide show
  1. package/README.md +74 -0
  2. package/dist/rich-text-vue.esm.js +53 -32
  3. package/dist/rich-text-vue.umd.js +56 -36
  4. package/package.json +2 -2
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
+ ![Alt Text](https://i.ibb.co/wCyr6jC/zd-rich-text.png)
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>
package/dist/rich-text-vue.esm.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import Vue from 'vue';
2
+ import { VersionService } from '@zeedhi/core';
2
3
  import { PropWatch, ZdComponentRender, Vuetify } from '@zeedhi/vuetify';
3
4
  import { Component } from 'vue-property-decorator';
4
5
  import { RichText } from '@zeedhi/zd-richtext-common';
@@ -55,7 +56,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
55
56
  this.instanceType = RichText;
56
57
  }
57
58
  onKeyDown(event) {
58
- this.instance.onkeydown(this.$el, event.key);
59
+ this.instance.onKeyDown(this.$el, event.key);
59
60
  }
60
61
  };
61
62
  __decorate([
@@ -231,36 +232,54 @@ var __vue_render__ = function () {
231
232
  var _vm = this;
232
233
  var _h = _vm.$createElement;
233
234
  var _c = _vm._self._c || _h;
234
- return _c("tiptap-vuetify", {
235
- staticClass: "zd-rich-text",
236
- attrs: {
237
- id: _vm.instance.name,
238
- "output-format": _vm.instance.outputFormat,
239
- extensions: _vm.extensions,
240
- "toolbar-attributes": {
241
- color: _vm.instance.toolbarColor,
242
- class: "rounded-t",
243
- width: _vm.instance.width,
244
- },
245
- "card-props": {
246
- color: _vm.instance.cardColor,
247
- class: "rounded-b-md",
248
- outlined: _vm.instance.outlined,
249
- width: _vm.instance.width,
250
- height: _vm.instance.height,
251
- },
252
- placeholder: _vm.instance.placeholder,
253
- disabled: _vm.instance.disabled,
235
+ return _c(
236
+ "div",
237
+ {
238
+ class: [
239
+ "zd-rich-text",
240
+ { "theme--light": _vm.$isLight(this) },
241
+ { "theme--dark": _vm.$isDark(this) },
242
+ _vm.instance.cssClass,
243
+ ],
244
+ style: Object.assign({}, _vm.instance.cssStyle),
245
+ attrs: { id: _vm.instance.name, name: _vm.instance.name },
254
246
  },
255
- on: { keydown: _vm.onKeyDown },
256
- model: {
257
- value: _vm.instance.content,
258
- callback: function ($$v) {
259
- _vm.$set(_vm.instance, "content", $$v);
260
- },
261
- expression: "instance.content",
262
- },
263
- })
247
+ [
248
+ _c("tiptap-vuetify", {
249
+ attrs: {
250
+ "output-format": _vm.instance.outputFormat,
251
+ extensions: _vm.extensions,
252
+ "toolbar-attributes": {
253
+ color: _vm.instance.toolbarColor,
254
+ class: "rounded-t",
255
+ width: _vm.instance.width,
256
+ },
257
+ "card-props": {
258
+ color: _vm.instance.cardColor,
259
+ class: "rounded-b-md",
260
+ outlined: _vm.instance.outlined,
261
+ width: _vm.instance.width,
262
+ height: _vm.instance.height,
263
+ },
264
+ placeholder: _vm.instance.placeholder,
265
+ disabled: _vm.instance.disabled,
266
+ },
267
+ on: {
268
+ keydown: function ($event) {
269
+ return _vm.onKeyDown($event)
270
+ },
271
+ },
272
+ model: {
273
+ value: _vm.instance.content,
274
+ callback: function ($$v) {
275
+ _vm.$set(_vm.instance, "content", $$v);
276
+ },
277
+ expression: "instance.content",
278
+ },
279
+ }),
280
+ ],
281
+ 1
282
+ )
264
283
  };
265
284
  var __vue_staticRenderFns__ = [];
266
285
  __vue_render__._withStripped = true;
@@ -268,7 +287,7 @@ __vue_render__._withStripped = true;
268
287
  /* style */
269
288
  const __vue_inject_styles__ = function (inject) {
270
289
  if (!inject) return
271
- inject("data-v-42bd6876_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 });
290
+ inject("data-v-451a1082_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 });
272
291
 
273
292
  };
274
293
  /* scoped */
@@ -302,6 +321,8 @@ Vue.use(TiptapVuetify.TiptapVuetifyPlugin, {
302
321
  vuetify: new Vuetify(),
303
322
  iconsGroup: 'mdi',
304
323
  });
305
- Vue.component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
324
+ Vue.component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
325
+ const packageContent = require('../package.json');
326
+ VersionService.addPackageVersion(packageContent.name, packageContent.version);
306
327
 
307
328
  export { __vue_component__ as ZdRichText };
package/dist/rich-text-vue.umd.js CHANGED
@@ -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
 
@@ -59,7 +59,7 @@
59
59
  this.instanceType = zdRichtextCommon.RichText;
60
60
  }
61
61
  onKeyDown(event) {
62
- this.instance.onkeydown(this.$el, event.key);
62
+ this.instance.onKeyDown(this.$el, event.key);
63
63
  }
64
64
  };
65
65
  __decorate([
@@ -235,36 +235,54 @@
235
235
  var _vm = this;
236
236
  var _h = _vm.$createElement;
237
237
  var _c = _vm._self._c || _h;
238
- return _c("tiptap-vuetify", {
239
- staticClass: "zd-rich-text",
240
- attrs: {
241
- id: _vm.instance.name,
242
- "output-format": _vm.instance.outputFormat,
243
- extensions: _vm.extensions,
244
- "toolbar-attributes": {
245
- color: _vm.instance.toolbarColor,
246
- class: "rounded-t",
247
- width: _vm.instance.width,
248
- },
249
- "card-props": {
250
- color: _vm.instance.cardColor,
251
- class: "rounded-b-md",
252
- outlined: _vm.instance.outlined,
253
- width: _vm.instance.width,
254
- height: _vm.instance.height,
255
- },
256
- placeholder: _vm.instance.placeholder,
257
- disabled: _vm.instance.disabled,
238
+ return _c(
239
+ "div",
240
+ {
241
+ class: [
242
+ "zd-rich-text",
243
+ { "theme--light": _vm.$isLight(this) },
244
+ { "theme--dark": _vm.$isDark(this) },
245
+ _vm.instance.cssClass,
246
+ ],
247
+ style: Object.assign({}, _vm.instance.cssStyle),
248
+ attrs: { id: _vm.instance.name, name: _vm.instance.name },
258
249
  },
259
- on: { keydown: _vm.onKeyDown },
260
- model: {
261
- value: _vm.instance.content,
262
- callback: function ($$v) {
263
- _vm.$set(_vm.instance, "content", $$v);
264
- },
265
- expression: "instance.content",
266
- },
267
- })
250
+ [
251
+ _c("tiptap-vuetify", {
252
+ attrs: {
253
+ "output-format": _vm.instance.outputFormat,
254
+ extensions: _vm.extensions,
255
+ "toolbar-attributes": {
256
+ color: _vm.instance.toolbarColor,
257
+ class: "rounded-t",
258
+ width: _vm.instance.width,
259
+ },
260
+ "card-props": {
261
+ color: _vm.instance.cardColor,
262
+ class: "rounded-b-md",
263
+ outlined: _vm.instance.outlined,
264
+ width: _vm.instance.width,
265
+ height: _vm.instance.height,
266
+ },
267
+ placeholder: _vm.instance.placeholder,
268
+ disabled: _vm.instance.disabled,
269
+ },
270
+ on: {
271
+ keydown: function ($event) {
272
+ return _vm.onKeyDown($event)
273
+ },
274
+ },
275
+ model: {
276
+ value: _vm.instance.content,
277
+ callback: function ($$v) {
278
+ _vm.$set(_vm.instance, "content", $$v);
279
+ },
280
+ expression: "instance.content",
281
+ },
282
+ }),
283
+ ],
284
+ 1
285
+ )
268
286
  };
269
287
  var __vue_staticRenderFns__ = [];
270
288
  __vue_render__._withStripped = true;
@@ -272,7 +290,7 @@
272
290
  /* style */
273
291
  const __vue_inject_styles__ = function (inject) {
274
292
  if (!inject) return
275
- inject("data-v-42bd6876_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 });
293
+ inject("data-v-451a1082_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 });
276
294
 
277
295
  };
278
296
  /* scoped */
@@ -306,7 +324,9 @@
306
324
  vuetify: new vuetify.Vuetify(),
307
325
  iconsGroup: 'mdi',
308
326
  });
309
- Vue__default["default"].component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
327
+ Vue__default["default"].component('tiptap-vuetify', TiptapVuetify.TiptapVuetify);
328
+ const packageContent = require('../package.json');
329
+ core.VersionService.addPackageVersion(packageContent.name, packageContent.version);
310
330
 
311
331
  exports.ZdRichText = __vue_component__;
312
332
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-vue",
3
- "version": "1.1.3",
3
+ "version": "1.2.1",
4
4
  "description": "RichTextVue by BVR",
5
5
  "main": "dist/rich-text-vue.umd.js",
6
6
  "module": "dist/rich-text-vue.esm.js",
@@ -23,5 +23,5 @@
23
23
  "vue-class-component": "^7.2.6",
24
24
  "vue-property-decorator": "^9.1.2"
25
25
  },
26
- "gitHead": "c98c8914c914ea773b0881c890ae0601361fabcf"
26
+ "gitHead": "bd123ff962b96257a9fa5b06982a36d1f760eb01"
27
27
  }