@zeedhi/zd-richtext-vue 1.2.0 → 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 -74
  2. package/dist/rich-text-vue.esm.js +49 -31
  3. package/dist/rich-text-vue.umd.js +49 -31
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,74 +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>
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
@@ -56,7 +56,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
56
56
  this.instanceType = RichText;
57
57
  }
58
58
  onKeyDown(event) {
59
- this.instance.onkeydown(this.$el, event.key);
59
+ this.instance.onKeyDown(this.$el, event.key);
60
60
  }
61
61
  };
62
62
  __decorate([
@@ -232,36 +232,54 @@ var __vue_render__ = function () {
232
232
  var _vm = this;
233
233
  var _h = _vm.$createElement;
234
234
  var _c = _vm._self._c || _h;
235
- return _c("tiptap-vuetify", {
236
- staticClass: "zd-rich-text",
237
- attrs: {
238
- id: _vm.instance.name,
239
- "output-format": _vm.instance.outputFormat,
240
- extensions: _vm.extensions,
241
- "toolbar-attributes": {
242
- color: _vm.instance.toolbarColor,
243
- class: "rounded-t",
244
- width: _vm.instance.width,
245
- },
246
- "card-props": {
247
- color: _vm.instance.cardColor,
248
- class: "rounded-b-md",
249
- outlined: _vm.instance.outlined,
250
- width: _vm.instance.width,
251
- height: _vm.instance.height,
252
- },
253
- placeholder: _vm.instance.placeholder,
254
- 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 },
255
246
  },
256
- on: { keydown: _vm.onKeyDown },
257
- model: {
258
- value: _vm.instance.content,
259
- callback: function ($$v) {
260
- _vm.$set(_vm.instance, "content", $$v);
261
- },
262
- expression: "instance.content",
263
- },
264
- })
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
+ )
265
283
  };
266
284
  var __vue_staticRenderFns__ = [];
267
285
  __vue_render__._withStripped = true;
@@ -269,7 +287,7 @@ __vue_render__._withStripped = true;
269
287
  /* style */
270
288
  const __vue_inject_styles__ = function (inject) {
271
289
  if (!inject) return
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 });
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 });
273
291
 
274
292
  };
275
293
  /* scoped */
package/dist/rich-text-vue.umd.js CHANGED
@@ -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-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 });
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 */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-vue",
3
- "version": "1.2.0",
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": "e4e4e252e4ea83919f14a67364af75edbfdc5686"
26
+ "gitHead": "bd123ff962b96257a9fa5b06982a36d1f760eb01"
27
27
  }