@zeedhi/zd-richtext-vue 1.4.2 → 1.4.3

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/dist/rich-text-vue.esm.js +35 -8
  2. package/dist/rich-text-vue.umd.js +35 -8
  3. package/package.json +2 -2
  4. package/types/RichText.d.ts +5 -0
package/dist/rich-text-vue.esm.js CHANGED
@@ -67,6 +67,7 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
67
67
  constructor() {
68
68
  super(...arguments);
69
69
  this.instanceType = RichText;
70
+ this.isMounted = false;
70
71
  this.extensions = [FontFamily$1];
71
72
  this.toolbar = ref([
72
73
  'bold',
@@ -111,6 +112,9 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
111
112
  // "redo",
112
113
  '#fontFamily',
113
114
  ]);
115
+ this.toolbarReadonly = ref([
116
+ // 'bold',
117
+ ]);
114
118
  }
115
119
  onKeyDown(event) {
116
120
  this.instance.onKeyDown(this.$el, event.key);
@@ -119,6 +123,9 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
119
123
  const newLanguage = I18n.instance.language.split('-')[0];
120
124
  locale.setLang(newLanguage);
121
125
  }
126
+ hasClass() {
127
+ return this.isMounted && this.$el.classList.contains('zd-form-child');
128
+ }
122
129
  input(instanceInput) {
123
130
  if (instanceInput) {
124
131
  this.instance.input(this.content);
@@ -142,11 +149,13 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
142
149
  this.$refs.tiptap.editor.on('focus', this.onFocus);
143
150
  this.$refs.tiptap.editor.on('blur', this.onBlur);
144
151
  }
145
- const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
146
- (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
147
- if (this.cardColor) {
148
- const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
149
- card.style.setProperty('background-color', this.cardColor, 'important');
152
+ if (!this.readonly) {
153
+ const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
154
+ (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
155
+ if (this.cardColor) {
156
+ const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
157
+ card.style.setProperty('background-color', this.cardColor, 'important');
158
+ }
150
159
  }
151
160
  this.changeLanguage();
152
161
  if (this.instance.fillHeight) {
@@ -154,12 +163,14 @@ let ZdRichText = class ZdRichText extends ZdComponentRender {
154
163
  }
155
164
  I18n.registerChangeListener(this.changeLanguage);
156
165
  this.setEditorDisabled();
166
+ this.isMounted = true;
157
167
  }
158
168
  // set tiptap editor as disabled
159
169
  setEditorDisabled() {
160
170
  const { editor } = this.$refs.tiptap;
171
+ const isEditable = !(this.instance.disabled || this.readonly);
161
172
  if (editor)
162
- editor.setOptions({ editable: !this.instance.disabled });
173
+ editor.setOptions({ editable: isEditable });
163
174
  }
164
175
  destroyed() {
165
176
  I18n.unregisterChangeListener(this.changeLanguage);
@@ -182,6 +193,10 @@ __decorate([
182
193
  }),
183
194
  __metadata("design:type", Object)
184
195
  ], ZdRichText.prototype, "disabled", void 0);
196
+ __decorate([
197
+ PropWatch({ type: Boolean, default: false }),
198
+ __metadata("design:type", Boolean)
199
+ ], ZdRichText.prototype, "readonly", void 0);
185
200
  __decorate([
186
201
  PropWatch({ type: String, default: undefined }),
187
202
  __metadata("design:type", String)
@@ -226,6 +241,13 @@ __decorate([
226
241
  }),
227
242
  __metadata("design:type", Object)
228
243
  ], ZdRichText.prototype, "formatGetter", void 0);
244
+ __decorate([
245
+ PropWatch({
246
+ type: String,
247
+ default: '',
248
+ }),
249
+ __metadata("design:type", String)
250
+ ], ZdRichText.prototype, "value", void 0);
229
251
  __decorate([
230
252
  PropWatch({
231
253
  type: [Boolean, String],
@@ -407,13 +429,18 @@ var __vue_render__$1 = function () {
407
429
  [
408
430
  _c("vuetify-tiptap", {
409
431
  ref: "tiptap",
432
+ class: [
433
+ { "zd-rich-text--disabled": _vm.instance.disabled },
434
+ _vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
435
+ ],
410
436
  attrs: {
411
437
  markdownTheme: false,
412
438
  dark: _vm.instance.dark,
413
439
  disabled: _vm.instance.disabled,
440
+ readonly: _vm.instance.readonly,
414
441
  outlined: _vm.instance.outlined,
415
442
  placeholder: _vm.instance.placeholder,
416
- toolbar: _vm.toolbar,
443
+ toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
417
444
  rounded: "",
418
445
  "max-width": _vm.instance.width,
419
446
  extensions: _vm.extensions,
@@ -477,7 +504,7 @@ __vue_render__$1._withStripped = true;
477
504
  /* style */
478
505
  const __vue_inject_styles__$1 = function (inject) {
479
506
  if (!inject) return
480
- inject("data-v-122c064d_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n background-color: #383838 !important;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
507
+ inject("data-v-45ed460e_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n background-color: #383838 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .vuetify-pro-tiptap-editor__toolbar {\n pointer-events: none;\n opacity: 0.5;\n}\n.zd-rich-text .zd-rich-text--readonly {\n width: 741px;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
481
508
 
482
509
  };
483
510
  /* scoped */
package/dist/rich-text-vue.umd.js CHANGED
@@ -67,6 +67,7 @@
67
67
  constructor() {
68
68
  super(...arguments);
69
69
  this.instanceType = zdRichtextCommon.RichText;
70
+ this.isMounted = false;
70
71
  this.extensions = [extensionFontFamily.FontFamily];
71
72
  this.toolbar = Vue.ref([
72
73
  'bold',
@@ -111,6 +112,9 @@
111
112
  // "redo",
112
113
  '#fontFamily',
113
114
  ]);
115
+ this.toolbarReadonly = Vue.ref([
116
+ // 'bold',
117
+ ]);
114
118
  }
115
119
  onKeyDown(event) {
116
120
  this.instance.onKeyDown(this.$el, event.key);
@@ -119,6 +123,9 @@
119
123
  const newLanguage = core.I18n.instance.language.split('-')[0];
120
124
  vuetifyProTiptap.locale.setLang(newLanguage);
121
125
  }
126
+ hasClass() {
127
+ return this.isMounted && this.$el.classList.contains('zd-form-child');
128
+ }
122
129
  input(instanceInput) {
123
130
  if (instanceInput) {
124
131
  this.instance.input(this.content);
@@ -142,11 +149,13 @@
142
149
  this.$refs.tiptap.editor.on('focus', this.onFocus);
143
150
  this.$refs.tiptap.editor.on('blur', this.onBlur);
144
151
  }
145
- const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
146
- (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
147
- if (this.cardColor) {
148
- const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
149
- card.style.setProperty('background-color', this.cardColor, 'important');
152
+ if (!this.readonly) {
153
+ const header = this.$el.querySelector('header.py-1.ps-1.vuetify-pro-tiptap-editor__toolbar.v-sheet.v-toolbar');
154
+ (_a = header) === null || _a === void 0 ? void 0 : _a.style.setProperty('background-color', this.toolbarColor || 'var(--v-primary-base)', 'important');
155
+ if (this.cardColor) {
156
+ const card = this.$el.querySelector('.vuetify-pro-tiptap-editor__content');
157
+ card.style.setProperty('background-color', this.cardColor, 'important');
158
+ }
150
159
  }
151
160
  this.changeLanguage();
152
161
  if (this.instance.fillHeight) {
@@ -154,12 +163,14 @@
154
163
  }
155
164
  core.I18n.registerChangeListener(this.changeLanguage);
156
165
  this.setEditorDisabled();
166
+ this.isMounted = true;
157
167
  }
158
168
  // set tiptap editor as disabled
159
169
  setEditorDisabled() {
160
170
  const { editor } = this.$refs.tiptap;
171
+ const isEditable = !(this.instance.disabled || this.readonly);
161
172
  if (editor)
162
- editor.setOptions({ editable: !this.instance.disabled });
173
+ editor.setOptions({ editable: isEditable });
163
174
  }
164
175
  destroyed() {
165
176
  core.I18n.unregisterChangeListener(this.changeLanguage);
@@ -182,6 +193,10 @@
182
193
  }),
183
194
  __metadata("design:type", Object)
184
195
  ], ZdRichText.prototype, "disabled", void 0);
196
+ __decorate([
197
+ vuetify$1.PropWatch({ type: Boolean, default: false }),
198
+ __metadata("design:type", Boolean)
199
+ ], ZdRichText.prototype, "readonly", void 0);
185
200
  __decorate([
186
201
  vuetify$1.PropWatch({ type: String, default: undefined }),
187
202
  __metadata("design:type", String)
@@ -226,6 +241,13 @@
226
241
  }),
227
242
  __metadata("design:type", Object)
228
243
  ], ZdRichText.prototype, "formatGetter", void 0);
244
+ __decorate([
245
+ vuetify$1.PropWatch({
246
+ type: String,
247
+ default: '',
248
+ }),
249
+ __metadata("design:type", String)
250
+ ], ZdRichText.prototype, "value", void 0);
229
251
  __decorate([
230
252
  vuetify$1.PropWatch({
231
253
  type: [Boolean, String],
@@ -407,13 +429,18 @@
407
429
  [
408
430
  _c("vuetify-tiptap", {
409
431
  ref: "tiptap",
432
+ class: [
433
+ { "zd-rich-text--disabled": _vm.instance.disabled },
434
+ _vm.readonly && !_vm.hasClass() && "zd-rich-text--readonly",
435
+ ],
410
436
  attrs: {
411
437
  markdownTheme: false,
412
438
  dark: _vm.instance.dark,
413
439
  disabled: _vm.instance.disabled,
440
+ readonly: _vm.instance.readonly,
414
441
  outlined: _vm.instance.outlined,
415
442
  placeholder: _vm.instance.placeholder,
416
- toolbar: _vm.toolbar,
443
+ toolbar: _vm.readonly ? _vm.toolbarReadonly : _vm.toolbar,
417
444
  rounded: "",
418
445
  "max-width": _vm.instance.width,
419
446
  extensions: _vm.extensions,
@@ -477,7 +504,7 @@
477
504
  /* style */
478
505
  const __vue_inject_styles__$1 = function (inject) {
479
506
  if (!inject) return
480
- inject("data-v-122c064d_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n background-color: #383838 !important;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
507
+ inject("data-v-45ed460e_0", { source: ".zd-rich-text #tippy-1 {\n display: none;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--light.rounded {\n background-color: #ffffff !important;\n}\n.zd-rich-text .vuetify-pro-tiptap-editor.v-card.v-card--flat.v-sheet.theme--dark.rounded {\n background-color: #383838 !important;\n}\n.zd-rich-text .zd-rich-text--disabled .vuetify-pro-tiptap-editor__toolbar {\n pointer-events: none;\n opacity: 0.5;\n}\n.zd-rich-text .zd-rich-text--readonly {\n width: 741px;\n}\n.zd-rich-text .v-toolbar__content button.v-btn {\n color: #ffffff !important;\n}", map: undefined, media: undefined });
481
508
 
482
509
  };
483
510
  /* scoped */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-vue",
3
- "version": "1.4.2",
3
+ "version": "1.4.3",
4
4
  "description": "RichTextVue by BVR",
5
5
  "main": "dist/rich-text-vue.umd.js",
6
6
  "module": "dist/rich-text-vue.esm.js",
@@ -31,5 +31,5 @@
31
31
  "vue-class-component": "7.2.*",
32
32
  "vue-property-decorator": "9.1.*"
33
33
  },
34
- "gitHead": "b13fac05395351ba466cc003ab891fd3cbeecd09"
34
+ "gitHead": "fdef8f2b0adf4943741b90db6b59e50f256bf705"
35
35
  }
package/types/RichText.d.ts CHANGED
@@ -4,6 +4,7 @@ export default class ZdRichText extends ZdComponentRender {
4
4
  outputFormat: string;
5
5
  placeholder: string;
6
6
  disabled: boolean | string;
7
+ readonly: boolean;
7
8
  toolbarColor: string;
8
9
  content: string;
9
10
  cardColor: string;
@@ -12,17 +13,21 @@ export default class ZdRichText extends ZdComponentRender {
12
13
  width: number | string;
13
14
  height: number | string;
14
15
  formatGetter: Object | string;
16
+ value: string;
15
17
  fillHeight: boolean;
16
18
  instance: RichText;
17
19
  instanceType: typeof RichText;
18
20
  onKeyDown(event: KeyboardEvent): void;
19
21
  changeLanguage(): void;
22
+ isMounted: boolean;
23
+ hasClass(): boolean;
20
24
  extensions: import("@tiptap/vue-2").Extension<import("@tiptap/extension-font-family").FontFamilyOptions, any>[];
21
25
  input(instanceInput: String): void;
22
26
  private initialFocusValue?;
23
27
  onFocus(event: Event): void;
24
28
  onBlur(event: Event): void;
25
29
  toolbar: import("vue").Ref<any[]>;
30
+ toolbarReadonly: import("vue").Ref<any[]>;
26
31
  mounted(): void;
27
32
  setEditorDisabled(): void;
28
33
  destroyed(): void;