@zipify/wysiwyg 4.11.5 → 4.12.0-beta.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/dist/cli.js +31 -31
- package/dist/node.js +21 -21
- package/dist/types/components/toolbar/controls/LetterSpacingControl.vue.d.ts +2 -0
- package/dist/types/enums/TextSetting.d.ts +1 -0
- package/dist/types/extensions/LetterSpacing.d.ts +2 -0
- package/dist/types/utils/convertEmToPx.d.ts +1 -0
- package/dist/types/utils/convertLetterSpacing.d.ts +1 -0
- package/dist/types/utils/index.d.ts +1 -0
- package/dist/wysiwyg.css +45 -28
- package/dist/wysiwyg.mjs +310 -147
- package/example/presets.js +227 -203
- package/lib/assets/icons/letter-spacing.svg +3 -0
- package/lib/components/base/NumberField.vue +1 -2
- package/lib/components/toolbar/controls/LetterSpacingControl.vue +95 -0
- package/lib/components/toolbar/controls/index.js +1 -0
- package/lib/components/toolbar/layouts/ToolbarDesktop.vue +2 -0
- package/lib/components/toolbar/layouts/ToolbarMobile.vue +2 -0
- package/lib/enums/TextSetting.ts +2 -0
- package/lib/extensions/LetterSpacing.js +78 -0
- package/lib/extensions/__tests__/LetterSpacing.test.js +106 -0
- package/lib/extensions/__tests__/__snapshots__/LetterSpacing.test.js.snap +91 -0
- package/lib/extensions/index.js +2 -0
- package/lib/styles/content.css +3 -0
- package/lib/utils/convertEmToPx.ts +8 -0
- package/lib/utils/convertFontSize.js +2 -7
- package/lib/utils/convertLetterSpacing.ts +5 -0
- package/lib/utils/index.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
2
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function convertEmToPx(value: string, wrapperEl: HTMLElement): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function convertLetterSpacing(value: string, wrapperEl: HTMLElement): number;
|
|
@@ -5,6 +5,7 @@ export { createKeyboardShortcut } from './createKeyboardShortcut';
|
|
|
5
5
|
export { convertColor } from './convertColor';
|
|
6
6
|
export { convertLineHeight } from './convertLineHeight';
|
|
7
7
|
export { convertFontSize } from './convertFontSize';
|
|
8
|
+
export { convertLetterSpacing } from './convertLetterSpacing';
|
|
8
9
|
export { convertAlignment } from './convertAlignment';
|
|
9
10
|
export { importIcon } from './importIcon';
|
|
10
11
|
export { isWysiwygContent } from './isWysiwygContent';
|
package/dist/wysiwyg.css
CHANGED
|
@@ -249,7 +249,7 @@
|
|
|
249
249
|
--zw-range-thumb-box-shadow: 0 0 0 12px rgba(240, 240, 240, 0.15);
|
|
250
250
|
}
|
|
251
251
|
|
|
252
|
-
.zw-number-field[data-v-
|
|
252
|
+
.zw-number-field[data-v-bc56cf43] {
|
|
253
253
|
--border-color: rgb(var(--zw-color-n60));
|
|
254
254
|
--text-color: rgb(var(--zw-color-n85));
|
|
255
255
|
--buttons-color: rgb(var(--zw-color-n70));
|
|
@@ -259,16 +259,16 @@
|
|
|
259
259
|
align-items: stretch;
|
|
260
260
|
display: flex;
|
|
261
261
|
}
|
|
262
|
-
.zw-number-field[data-v-
|
|
262
|
+
.zw-number-field[data-v-bc56cf43]:hover {
|
|
263
263
|
--border-color: rgb(var(--zw-color-n80));
|
|
264
264
|
--text-color: rgb(var(--zw-color-n85));
|
|
265
265
|
}
|
|
266
|
-
.zw-number-field[data-v-
|
|
267
|
-
.zw-number-field[data-v-
|
|
266
|
+
.zw-number-field[data-v-bc56cf43]:focus,
|
|
267
|
+
.zw-number-field[data-v-bc56cf43]:focus-within {
|
|
268
268
|
--border-color: rgb(var(--zw-color-white));
|
|
269
269
|
--text-color: rgb(var(--zw-color-white));
|
|
270
270
|
}
|
|
271
|
-
.zw-number-field__input[data-v-
|
|
271
|
+
.zw-number-field__input[data-v-bc56cf43] {
|
|
272
272
|
color: var(--text-color);
|
|
273
273
|
background-color: rgb(var(--zw-color-n15));
|
|
274
274
|
border: 0;
|
|
@@ -279,69 +279,68 @@
|
|
|
279
279
|
font-size: var(--zw-font-size-xs);
|
|
280
280
|
-moz-appearance: textfield;
|
|
281
281
|
}
|
|
282
|
-
.zw-number-field__buttons[data-v-
|
|
282
|
+
.zw-number-field__buttons[data-v-bc56cf43] {
|
|
283
283
|
display: none;
|
|
284
284
|
flex-direction: column;
|
|
285
285
|
height: 100%;
|
|
286
286
|
}
|
|
287
|
-
.zw-number-field:hover .zw-number-field__buttons[data-v-
|
|
288
|
-
.zw-number-field:focus .zw-number-field__buttons[data-v-
|
|
289
|
-
.zw-number-field:focus-within .zw-number-field__buttons[data-v-
|
|
287
|
+
.zw-number-field:hover .zw-number-field__buttons[data-v-bc56cf43],
|
|
288
|
+
.zw-number-field:focus .zw-number-field__buttons[data-v-bc56cf43],
|
|
289
|
+
.zw-number-field:focus-within .zw-number-field__buttons[data-v-bc56cf43] {
|
|
290
290
|
display: flex;
|
|
291
291
|
}
|
|
292
|
-
.zw-number-field__input[data-v-
|
|
292
|
+
.zw-number-field__input[data-v-bc56cf43]::placeholder {
|
|
293
293
|
color: var(--text-color);
|
|
294
294
|
}
|
|
295
|
-
.zw-number-field__input[data-v-
|
|
296
|
-
.zw-number-field__input[data-v-
|
|
295
|
+
.zw-number-field__input[data-v-bc56cf43]::-webkit-outer-spin-button,
|
|
296
|
+
.zw-number-field__input[data-v-bc56cf43]::-webkit-inner-spin-button {
|
|
297
297
|
color: var(--text-color);
|
|
298
298
|
-webkit-appearance: none;
|
|
299
299
|
}
|
|
300
|
-
.zw-number-field__controls[data-v-
|
|
300
|
+
.zw-number-field__controls[data-v-bc56cf43] {
|
|
301
301
|
min-width: var(--zw-offset-sm);
|
|
302
302
|
}
|
|
303
|
-
.zw-number-field--disabled[data-v-
|
|
303
|
+
.zw-number-field--disabled[data-v-bc56cf43] {
|
|
304
304
|
opacity: 0.5;
|
|
305
305
|
}
|
|
306
|
-
.zw-number-field--disabled[data-v-
|
|
307
|
-
.zw-number-field--disabled .zw-number-field__input[data-v-
|
|
306
|
+
.zw-number-field--disabled[data-v-bc56cf43],
|
|
307
|
+
.zw-number-field--disabled .zw-number-field__input[data-v-bc56cf43] {
|
|
308
308
|
cursor: not-allowed;
|
|
309
309
|
}
|
|
310
|
-
.zw-number-field__increment-button[data-v-
|
|
311
|
-
.zw-number-field__decrement-button[data-v-
|
|
310
|
+
.zw-number-field__increment-button[data-v-bc56cf43],
|
|
311
|
+
.zw-number-field__decrement-button[data-v-bc56cf43] {
|
|
312
312
|
width: 100%;
|
|
313
313
|
height: 50%;
|
|
314
314
|
display: flex;
|
|
315
315
|
align-items: center;
|
|
316
316
|
justify-content: center;
|
|
317
317
|
}
|
|
318
|
-
.zw-number-field__increment-button[data-v-
|
|
319
|
-
.zw-number-field__decrement-button[data-v-
|
|
318
|
+
.zw-number-field__increment-button[data-v-bc56cf43]::after,
|
|
319
|
+
.zw-number-field__decrement-button[data-v-bc56cf43]::after {
|
|
320
320
|
content: "";
|
|
321
321
|
border-left: 3px solid transparent;
|
|
322
322
|
border-right: 3px solid transparent;
|
|
323
323
|
}
|
|
324
|
-
.zw-number-field__increment-button[data-v-
|
|
324
|
+
.zw-number-field__increment-button[data-v-bc56cf43]::after {
|
|
325
325
|
border-bottom: 3px solid var(--buttons-color);
|
|
326
326
|
}
|
|
327
|
-
.zw-number-field__decrement-button[data-v-
|
|
327
|
+
.zw-number-field__decrement-button[data-v-bc56cf43]::after {
|
|
328
328
|
border-top: 3px solid var(--buttons-color);
|
|
329
329
|
}
|
|
330
|
-
.zw-number-field__increment-button[data-v-
|
|
331
|
-
.zw-number-field__decrement-button[data-v-
|
|
330
|
+
.zw-number-field__increment-button[data-v-bc56cf43]:hover,
|
|
331
|
+
.zw-number-field__decrement-button[data-v-bc56cf43]:hover {
|
|
332
332
|
background-color: rgb(var(--zw-color-n20));
|
|
333
333
|
--buttons-color: rgb(var(--zw-color-white));
|
|
334
334
|
}
|
|
335
|
-
.zw-number-field__units[data-v-
|
|
335
|
+
.zw-number-field__units[data-v-bc56cf43] {
|
|
336
336
|
color: rgb(var(--zw-color-n70));
|
|
337
337
|
font-size: var(--zw-font-size-xs);
|
|
338
|
-
line-height: var(--zw-line-height-md);
|
|
339
338
|
text-align: center;
|
|
340
339
|
display: inline-block;
|
|
341
340
|
width: 100%;
|
|
342
341
|
}
|
|
343
|
-
.zw-number-field:hover .zw-number-field__units[data-v-
|
|
344
|
-
.zw-number-field:focus .zw-number-field__units[data-v-
|
|
342
|
+
.zw-number-field:hover .zw-number-field__units[data-v-bc56cf43],
|
|
343
|
+
.zw-number-field:has(:focus, :active) .zw-number-field__units[data-v-bc56cf43] {
|
|
345
344
|
display: none;
|
|
346
345
|
}
|
|
347
346
|
|
|
@@ -577,6 +576,21 @@
|
|
|
577
576
|
margin-left: var(--zw-offset-sm);
|
|
578
577
|
}
|
|
579
578
|
|
|
579
|
+
.zw-letter-spacing-control__modal[data-v-ecc20653] {
|
|
580
|
+
padding: var(--zw-offset-sm);
|
|
581
|
+
}
|
|
582
|
+
.zw-letter-spacing-control__row[data-v-ecc20653] {
|
|
583
|
+
display: flex;
|
|
584
|
+
align-items: center;
|
|
585
|
+
}
|
|
586
|
+
.zw-letter-spacing-control__range[data-v-ecc20653] {
|
|
587
|
+
width: 156px;
|
|
588
|
+
}
|
|
589
|
+
.zw-letter-spacing-control__field[data-v-ecc20653] {
|
|
590
|
+
width: 64px;
|
|
591
|
+
margin-left: var(--zw-offset-sm);
|
|
592
|
+
}
|
|
593
|
+
|
|
580
594
|
.zpa-list-control[data-v-55962f5e] {
|
|
581
595
|
display: flex;
|
|
582
596
|
}
|
|
@@ -821,6 +835,7 @@ h4.zw-style.zw-style.zw-style {
|
|
|
821
835
|
font-size: var(--zw-font-size-desktop, var(--zw-preset-font-size-desktop));
|
|
822
836
|
text-align: var(--zw-alignment-desktop, var(--zw-preset-alignment-desktop));
|
|
823
837
|
line-height: var(--zw-line-height-desktop, var(--zw-preset-line-height-desktop));
|
|
838
|
+
letter-spacing: var(--zw-letter-spacing-desktop, var(--zw-preset-letter-spacing-desktop));
|
|
824
839
|
}
|
|
825
840
|
}
|
|
826
841
|
@media (min-width: 769px) and (max-width: 1199.98px) {
|
|
@@ -828,6 +843,7 @@ h4.zw-style.zw-style.zw-style {
|
|
|
828
843
|
font-size: var(--zw-font-size-tablet, var(--zw-preset-font-size-tablet));
|
|
829
844
|
text-align: var(--zw-alignment-tablet, var(--zw-preset-alignment-tablet));
|
|
830
845
|
line-height: var(--zw-line-height-tablet, var(--zw-preset-line-height-tablet));
|
|
846
|
+
letter-spacing: var(--zw-letter-spacing-tablet, var(--zw-preset-letter-spacing-tablet));
|
|
831
847
|
}
|
|
832
848
|
}
|
|
833
849
|
@media (max-width: 768.98px) {
|
|
@@ -835,6 +851,7 @@ h4.zw-style.zw-style.zw-style {
|
|
|
835
851
|
font-size: var(--zw-font-size-mobile, var(--zw-preset-font-size-mobile));
|
|
836
852
|
text-align: var(--zw-alignment-mobile, var(--zw-preset-alignment-mobile));
|
|
837
853
|
line-height: var(--zw-line-height-mobile, var(--zw-preset-line-height-mobile));
|
|
854
|
+
letter-spacing: var(--zw-letter-spacing-mobile, var(--zw-preset-letter-spacing-mobile));
|
|
838
855
|
}
|
|
839
856
|
}
|
|
840
857
|
|