@fishawack/lab-velocity 0.8.6 → 0.8.7

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 (3) hide show
  1. package/components/_wysiwyg2.scss +2 -1
  2. package/form/Wysiwyg2.vue +41 -27
  3. package/package.json +1 -1
package/components/_wysiwyg2.scss CHANGED
@@ -28,6 +28,7 @@
28
28
  min-width: 28px;
29
29
  padding: 3px 5px;
30
30
  line-height: 1;
31
+ border: none;
31
32
  &.is-active, &:hover {
32
33
  background-color: $color5;
33
34
  }
@@ -79,7 +80,7 @@
79
80
  ~ div {
80
81
  // margin-top: $spacing;
81
82
  border: solid $color5 2px;
82
- padding: 2* $spacing;
83
+ padding: 2 * $spacing;
83
84
  background-color: $color0;
84
85
  }
85
86
  }
package/form/Wysiwyg2.vue CHANGED
@@ -47,120 +47,120 @@
47
47
  <template #dropdown>
48
48
  <el-dropdown-menu>
49
49
  <el-dropdown-item>
50
- <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
50
+ <button type="button" @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
51
51
  Insert table
52
52
  </button>
53
53
  </el-dropdown-item>
54
54
  <el-dropdown-item>
55
- <button @click="editor.chain().focus().addColumnBefore().run()">
55
+ <button type="button" @click="editor.chain().focus().addColumnBefore().run()">
56
56
  Add column before
57
57
  </button>
58
58
  </el-dropdown-item>
59
59
  <el-dropdown-item>
60
- <button @click="editor.chain().focus().addColumnAfter().run()">
60
+ <button type="button" @click="editor.chain().focus().addColumnAfter().run()">
61
61
  Add column after
62
62
  </button>
63
63
  </el-dropdown-item>
64
64
  <el-dropdown-item>
65
- <button @click="editor.chain().focus().deleteColumn().run()">
65
+ <button type="button" @click="editor.chain().focus().deleteColumn().run()">
66
66
  Delete column
67
67
  </button>
68
68
  </el-dropdown-item>
69
69
  <el-dropdown-item>
70
- <button @click="editor.chain().focus().addRowBefore().run()">
70
+ <button type="button" @click="editor.chain().focus().addRowBefore().run()">
71
71
  Add row before
72
72
  </button>
73
73
  </el-dropdown-item>
74
74
  <el-dropdown-item>
75
- <button @click="editor.chain().focus().addRowAfter().run()">
75
+ <button type="button" @click="editor.chain().focus().addRowAfter().run()">
76
76
  Add row after
77
77
  </button>
78
78
  </el-dropdown-item>
79
79
  <el-dropdown-item>
80
- <button @click="editor.chain().focus().deleteRow().run()">
80
+ <button type="button" @click="editor.chain().focus().deleteRow().run()">
81
81
  Delete row
82
82
  </button>
83
83
  </el-dropdown-item>
84
84
  <el-dropdown-item>
85
- <button @click="editor.chain().focus().deleteTable().run()">
85
+ <button type="button" @click="editor.chain().focus().deleteTable().run()">
86
86
  Delete table
87
87
  </button>
88
88
  </el-dropdown-item>
89
89
  <el-dropdown-item>
90
- <button @click="editor.chain().focus().mergeCells().run()">
90
+ <button type="button" @click="editor.chain().focus().mergeCells().run()">
91
91
  Merge cells
92
92
  </button>
93
93
  </el-dropdown-item>
94
94
  <el-dropdown-item>
95
- <button @click="editor.chain().focus().splitCell().run()">
95
+ <button type="button" @click="editor.chain().focus().splitCell().run()">
96
96
  Split cell
97
97
  </button>
98
98
  </el-dropdown-item>
99
99
  <el-dropdown-item>
100
- <button @click="editor.chain().focus().toggleHeaderColumn().run()">
100
+ <button type="button" @click="editor.chain().focus().toggleHeaderColumn().run()">
101
101
  Toggle header column
102
102
  </button>
103
103
  </el-dropdown-item>
104
104
  <el-dropdown-item>
105
- <button @click="editor.chain().focus().toggleHeaderRow().run()">
105
+ <button type="button" @click="editor.chain().focus().toggleHeaderRow().run()">
106
106
  Toggle header row
107
107
  </button>
108
108
  </el-dropdown-item>
109
109
  <el-dropdown-item>
110
- <button @click="editor.chain().focus().toggleHeaderCell().run()">
110
+ <button type="button" @click="editor.chain().focus().toggleHeaderCell().run()">
111
111
  Toggle header cell
112
112
  </button>
113
113
  </el-dropdown-item>
114
114
  <el-dropdown-item>
115
- <button @click="editor.chain().focus().mergeOrSplit().run()">
115
+ <button type="button" @click="editor.chain().focus().mergeOrSplit().run()">
116
116
  Merge or split
117
117
  </button>
118
118
  </el-dropdown-item>
119
119
  <el-dropdown-item>
120
- <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
120
+ <button type="button" @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
121
121
  Set cell attribute
122
122
  </button>
123
123
  </el-dropdown-item>
124
124
  <el-dropdown-item>
125
- <button @click="editor.chain().focus().fixTables().run()">
125
+ <button type="button" @click="editor.chain().focus().fixTables().run()">
126
126
  Fix tables
127
127
  </button>
128
128
  </el-dropdown-item>
129
129
  <el-dropdown-item>
130
- <button @click="editor.chain().focus().goToNextCell().run()">
130
+ <button type="button" @click="editor.chain().focus().goToNextCell().run()">
131
131
  Go to next cell
132
132
  </button>
133
133
  </el-dropdown-item>
134
134
  <el-dropdown-item>
135
- <button @click="editor.chain().focus().goToPreviousCell().run()">
135
+ <button type="button" @click="editor.chain().focus().goToPreviousCell().run()">
136
136
  Go to previous cell
137
137
  </button>
138
138
  </el-dropdown-item>
139
139
  </el-dropdown-menu>
140
140
  </template>
141
141
  </el-dropdown>
142
- <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
142
+ <button type="button" @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
143
143
  <svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="6" x2="15" y1="14" y2="14"></line> <line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"></line> <line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"></line> <line class="ql-stroke" x1="3" x2="3" y1="14" y2="14"></line> </svg>
144
144
  </button>
145
- <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
145
+ <button type="button" @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
146
146
  <svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="7" x2="15" y1="14" y2="14"></line> <line class="ql-stroke ql-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line> <path class="ql-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path> <path class="ql-stroke ql-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path> <path class="ql-stroke ql-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path> </svg>
147
147
  </button>
148
- <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
148
+ <button type="button" @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
149
149
  Code block
150
150
  </button>
151
- <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
151
+ <button type="button" @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
152
152
  Blockquote
153
153
  </button>
154
- <button @click="editor.chain().focus().setHorizontalRule().run()">
154
+ <button type="button" @click="editor.chain().focus().setHorizontalRule().run()">
155
155
  Horizontal rule
156
156
  </button>
157
- <button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
157
+ <button type="button" @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
158
158
  <svg viewBox="0 0 18 18"> <path class="ql-fill" d="M15.5,7H13.861a4.015,4.015,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.922,1.922,0,0,0,12.021,3.7a0.5,0.5,0,1,0,.957.291,0.917,0.917,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.077-1.164,1.925-1.934,2.486A1.423,1.423,0,0,0,12,7.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,7Z"></path> <path class="ql-fill" d="M9.651,5.241a1,1,0,0,0-1.41.108L6,7.964,3.759,5.349a1,1,0,1,0-1.519,1.3L4.683,9.5,2.241,12.35a1,1,0,1,0,1.519,1.3L6,11.036,8.241,13.65a1,1,0,0,0,1.519-1.3L7.317,9.5,9.759,6.651A1,1,0,0,0,9.651,5.241Z"></path> </svg>
159
159
  </button>
160
- <button @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
160
+ <button type="button" @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
161
161
  <svg viewBox="0 0 18 18"> <path class="ql-fill" d="M15.5,15H13.861a3.858,3.858,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.921,1.921,0,0,0,12.021,11.7a0.50013,0.50013,0,1,0,.957.291h0a0.914,0.914,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.076-1.16971,1.86982-1.93971,2.43082A1.45639,1.45639,0,0,0,12,15.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,15Z"></path> <path class="ql-fill" d="M9.65,5.241a1,1,0,0,0-1.409.108L6,7.964,3.759,5.349A1,1,0,0,0,2.192,6.59178Q2.21541,6.6213,2.241,6.649L4.684,9.5,2.241,12.35A1,1,0,0,0,3.71,13.70722q0.02557-.02768.049-0.05722L6,11.036,8.241,13.65a1,1,0,1,0,1.567-1.24277Q9.78459,12.3777,9.759,12.35L7.316,9.5,9.759,6.651A1,1,0,0,0,9.65,5.241Z"></path> </svg>
162
162
  </button>
163
- <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
163
+ <button type="button" @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
164
164
  <svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="11" y1="7" y2="11"></line> <path class="ql-even ql-stroke" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path> <path class="ql-even ql-stroke" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"></path> </svg>
165
165
  </button>
166
166
  </div>
@@ -233,6 +233,16 @@ export default {
233
233
  dialogVisible:false,
234
234
  }),
235
235
 
236
+ watch: {
237
+ modelValue: {
238
+ handler(val) {
239
+ if (this.hold !== val) {
240
+ this.setValue();
241
+ }
242
+ },
243
+ },
244
+ },
245
+
236
246
  methods: {
237
247
  setValue() {
238
248
  const temp =
@@ -240,6 +250,7 @@ export default {
240
250
  ? `<p>${this.modelValue}</p>`
241
251
  : this.modelValue;
242
252
  this.editor.commands.setContent(temp);
253
+ this.hold = temp;
243
254
 
244
255
 
245
256
  },
@@ -320,7 +331,10 @@ export default {
320
331
  this.setValue();
321
332
 
322
333
  this.editor.on('blur', ({ editor, event }) => {
323
- this.$emit("update:modelValue", event.srcElement.innerHTML);
334
+ if(this.hold !== event.srcElement.innerHTML) {
335
+ this.hold = event.srcElement.innerHTML;
336
+ this.$emit("update:modelValue", this.hold);
337
+ }
324
338
  })
325
339
  },
326
340
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fishawack/lab-velocity",
3
- "version": "0.8.6",
3
+ "version": "0.8.7",
4
4
  "description": "Avalere Health branded style system",
5
5
  "scripts": {
6
6
  "setup": "npm ci || npm i && npm run content",