@zipify/wysiwyg 1.0.0-dev.5 → 1.0.0-dev.52

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 (180) hide show
  1. package/.editorconfig +1 -1
  2. package/.eslintignore +1 -0
  3. package/.eslintrc.js +2 -2
  4. package/.github/dependabot.yaml +1 -0
  5. package/.lintstagedrc +2 -2
  6. package/.release-it.json +3 -1
  7. package/.stylelintignore +1 -0
  8. package/.stylelintrc +0 -4
  9. package/README.md +2 -2
  10. package/config/jest/setupTests.js +4 -0
  11. package/config/vite/example.config.js +25 -0
  12. package/config/vite/lib.config.js +30 -0
  13. package/config/{webpack → vite}/settings.js +0 -0
  14. package/dist/wysiwyg.css +1 -0
  15. package/dist/wysiwyg.mjs +18305 -0
  16. package/dist/wysiwyg.mjs.map +1 -0
  17. package/example/ExampleApp.vue +20 -1
  18. package/example/{example.html → index.html} +1 -0
  19. package/example/pageBlocks.js +31 -0
  20. package/example/presets.js +2 -2
  21. package/jest.config.js +3 -1
  22. package/lib/Wysiwyg.vue +50 -25
  23. package/lib/__tests__/utils/NodeFactory.js +13 -0
  24. package/lib/assets/icons/alignment-center.svg +3 -0
  25. package/lib/assets/icons/alignment-justify.svg +3 -0
  26. package/lib/assets/icons/alignment-left.svg +3 -0
  27. package/lib/assets/icons/alignment-right.svg +3 -0
  28. package/lib/assets/icons/arrow.svg +3 -0
  29. package/lib/assets/icons/background-color.svg +3 -0
  30. package/lib/assets/icons/case-style.svg +3 -0
  31. package/lib/assets/icons/font-color.svg +5 -0
  32. package/lib/assets/icons/italic.svg +3 -0
  33. package/lib/assets/icons/line-height.svg +3 -0
  34. package/lib/assets/icons/link.svg +3 -0
  35. package/lib/assets/icons/list-circle.svg +3 -0
  36. package/lib/assets/icons/list-decimal.svg +3 -0
  37. package/lib/assets/icons/list-disc.svg +3 -0
  38. package/lib/assets/icons/list-latin.svg +3 -0
  39. package/lib/assets/icons/list-roman.svg +3 -0
  40. package/lib/assets/icons/list-square.svg +3 -0
  41. package/lib/assets/icons/remove-format.svg +3 -0
  42. package/lib/assets/icons/reset-styles.svg +3 -0
  43. package/lib/assets/icons/strike-through.svg +3 -0
  44. package/lib/assets/icons/superscript.svg +3 -0
  45. package/lib/assets/icons/underline.svg +3 -0
  46. package/lib/assets/icons/unlink.svg +3 -0
  47. package/lib/components/base/Button.vue +21 -1
  48. package/lib/components/base/Checkbox.vue +89 -0
  49. package/lib/components/base/FieldLabel.vue +2 -1
  50. package/lib/components/base/Icon.vue +18 -10
  51. package/lib/components/base/Modal.vue +0 -1
  52. package/lib/components/base/NumberField.vue +1 -1
  53. package/lib/components/base/ScrollView.vue +0 -2
  54. package/lib/components/base/TextField.vue +106 -0
  55. package/lib/components/base/__tests__/Icon.test.js +6 -13
  56. package/lib/components/base/__tests__/Modal.test.js +6 -1
  57. package/lib/components/base/__tests__/TextField.test.js +57 -0
  58. package/lib/components/base/__tests__/__snapshots__/TextField.test.js.snap +9 -0
  59. package/lib/components/base/colorPicker/ColorPicker.vue +1 -1
  60. package/lib/components/base/colorPicker/composables/usePickerHotkeys.js +2 -1
  61. package/lib/components/base/composables/__tests__/useValidator.test.js +44 -0
  62. package/lib/components/base/composables/index.js +1 -0
  63. package/lib/components/base/composables/useValidator.js +23 -0
  64. package/lib/components/base/dropdown/Dropdown.vue +15 -3
  65. package/lib/components/base/dropdown/DropdownActivator.vue +19 -3
  66. package/lib/components/base/index.js +3 -1
  67. package/lib/components/toolbar/Toolbar.vue +49 -9
  68. package/lib/components/toolbar/ToolbarFull.vue +10 -2
  69. package/lib/components/toolbar/__tests__/Toolbar.test.js +6 -0
  70. package/lib/components/toolbar/controls/FontSizeControl.vue +7 -0
  71. package/lib/components/toolbar/controls/ListControl.vue +1 -5
  72. package/lib/components/toolbar/controls/StylePresetControl.vue +14 -1
  73. package/lib/components/toolbar/controls/UnderlineControl.vue +2 -2
  74. package/lib/components/toolbar/controls/__tests__/StylePresetControl.test.js +16 -0
  75. package/lib/components/toolbar/controls/__tests__/UnderlineControl.test.js +4 -0
  76. package/lib/components/toolbar/controls/index.js +1 -0
  77. package/lib/components/toolbar/controls/link/LinkControl.vue +155 -0
  78. package/lib/components/toolbar/controls/link/LinkControlApply.vue +35 -0
  79. package/lib/components/toolbar/controls/link/LinkControlHeader.vue +67 -0
  80. package/lib/components/toolbar/controls/link/__tests__/LinkControl.test.js +79 -0
  81. package/lib/components/toolbar/controls/link/__tests__/LinkControlHeader.test.js +42 -0
  82. package/lib/components/toolbar/controls/link/composables/__tests__/__snapshots__/useLink.test.js.snap +8 -0
  83. package/lib/components/toolbar/controls/link/composables/__tests__/useLink.test.js +114 -0
  84. package/lib/components/toolbar/controls/link/composables/index.js +1 -0
  85. package/lib/components/toolbar/controls/link/composables/useLink.js +61 -0
  86. package/lib/components/toolbar/controls/link/destination/LinkControlDestination.vue +103 -0
  87. package/lib/components/toolbar/controls/link/destination/LinkControlPageBlock.vue +54 -0
  88. package/lib/components/toolbar/controls/link/destination/LinkControlUrl.vue +52 -0
  89. package/lib/components/toolbar/controls/link/destination/__tests__/LinkControlPageBlock.test.js +36 -0
  90. package/lib/components/toolbar/controls/link/destination/__tests__/LinkControlUrl.test.js +46 -0
  91. package/lib/components/toolbar/controls/link/destination/__tests__/__snapshots__/LinkControlPageBlock.test.js.snap +9 -0
  92. package/lib/components/toolbar/controls/link/destination/__tests__/__snapshots__/LinkControlUrl.test.js.snap +17 -0
  93. package/lib/components/toolbar/controls/link/destination/index.js +1 -0
  94. package/lib/components/toolbar/controls/link/index.js +1 -0
  95. package/lib/composables/__tests__/useEditor.test.js +2 -2
  96. package/lib/composables/useEditor.js +5 -7
  97. package/lib/composables/useToolbar.js +23 -28
  98. package/lib/directives/__tests__/outClick.test.js +6 -0
  99. package/lib/directives/outClick.js +19 -6
  100. package/lib/enums/Alignments.js +10 -1
  101. package/lib/enums/LinkDestinations.js +4 -0
  102. package/lib/enums/LinkTargets.js +4 -0
  103. package/lib/enums/TextSettings.js +3 -1
  104. package/lib/enums/index.js +2 -0
  105. package/lib/extensions/Alignment.js +21 -7
  106. package/lib/extensions/BackgroundColor.js +14 -6
  107. package/lib/extensions/DeviceManager.js +0 -4
  108. package/lib/extensions/FontColor.js +14 -6
  109. package/lib/extensions/FontFamily.js +25 -8
  110. package/lib/extensions/FontSize.js +31 -12
  111. package/lib/extensions/FontStyle.js +23 -13
  112. package/lib/extensions/FontWeight.js +24 -14
  113. package/lib/extensions/LineHeight.js +31 -28
  114. package/lib/extensions/Link.js +89 -0
  115. package/lib/extensions/StylePreset.js +16 -15
  116. package/lib/extensions/TextDecoration.js +45 -12
  117. package/lib/extensions/__tests__/Alignment.test.js +11 -5
  118. package/lib/extensions/__tests__/BackgroundColor.test.js +11 -5
  119. package/lib/extensions/__tests__/CaseStyle.test.js +3 -5
  120. package/lib/extensions/__tests__/FontColor.test.js +11 -5
  121. package/lib/extensions/__tests__/FontFamily.test.js +32 -7
  122. package/lib/extensions/__tests__/FontSize.test.js +13 -6
  123. package/lib/extensions/__tests__/FontStyle.test.js +11 -5
  124. package/lib/extensions/__tests__/FontWeight.test.js +19 -5
  125. package/lib/extensions/__tests__/LineHeight.test.js +23 -11
  126. package/lib/extensions/__tests__/Link.test.js +102 -0
  127. package/lib/extensions/__tests__/StylePreset.test.js +70 -6
  128. package/lib/extensions/__tests__/TextDecoration.test.js +51 -5
  129. package/lib/extensions/__tests__/__snapshots__/Alignment.test.js.snap +26 -2
  130. package/lib/extensions/__tests__/__snapshots__/BackgroundColor.test.js.snap +30 -1
  131. package/lib/extensions/__tests__/__snapshots__/FontColor.test.js.snap +18 -1
  132. package/lib/extensions/__tests__/__snapshots__/FontFamily.test.js.snap +88 -1
  133. package/lib/extensions/__tests__/__snapshots__/FontSize.test.js.snap +33 -2
  134. package/lib/extensions/__tests__/__snapshots__/FontStyle.test.js.snap +25 -4
  135. package/lib/extensions/__tests__/__snapshots__/FontWeight.test.js.snap +47 -1
  136. package/lib/extensions/__tests__/__snapshots__/LineHeight.test.js.snap +26 -2
  137. package/lib/extensions/__tests__/__snapshots__/Link.test.js.snap +225 -0
  138. package/lib/extensions/__tests__/__snapshots__/StylePreset.test.js.snap +6 -2
  139. package/lib/extensions/__tests__/__snapshots__/TextDecoration.test.js.snap +183 -3
  140. package/lib/extensions/core/CopyPasteProcessor.js +10 -0
  141. package/lib/extensions/core/TextProcessor.js +10 -0
  142. package/lib/extensions/core/__tests__/NodeProcessor.test.js +3 -5
  143. package/lib/extensions/core/__tests__/SelectionProcessor.test.js +3 -5
  144. package/lib/extensions/core/__tests__/TextProcessor.test.js +138 -12
  145. package/lib/extensions/core/__tests__/__snapshots__/TextProcessor.test.js.snap +26 -0
  146. package/lib/extensions/core/index.js +11 -2
  147. package/lib/extensions/core/plugins/PastePlugin.js +57 -0
  148. package/lib/extensions/core/plugins/ProseMirrorPlugin.js +20 -0
  149. package/lib/extensions/core/plugins/index.js +1 -0
  150. package/lib/extensions/index.js +46 -34
  151. package/lib/extensions/list/__tests__/List.test.js +3 -5
  152. package/lib/extensions/list/__tests__/__snapshots__/List.test.js.snap +45 -15
  153. package/lib/injectionTokens.js +2 -1
  154. package/lib/services/ContentNormalizer.js +113 -29
  155. package/lib/services/ContextWidnow.js +23 -0
  156. package/lib/services/__tests__/ContentNormalizer.test.js +75 -7
  157. package/lib/services/index.js +1 -0
  158. package/lib/styles/content.css +102 -13
  159. package/lib/styles/helpers/offsets.css +16 -0
  160. package/lib/styles/variables.css +6 -0
  161. package/lib/utils/__tests__/__snapshots__/renderInlineSetting.test.js.snap +4 -4
  162. package/lib/utils/__tests__/convertAlignment.test.js +16 -0
  163. package/lib/utils/__tests__/convertFontSize.test.js +21 -0
  164. package/lib/utils/__tests__/convertLineHeight.test.js +21 -0
  165. package/lib/utils/convertAlignment.js +12 -0
  166. package/lib/utils/convertColor.js +1 -1
  167. package/lib/utils/convertFontSize.js +8 -0
  168. package/lib/utils/convertLineHeight.js +17 -0
  169. package/lib/utils/importIcon.js +13 -0
  170. package/lib/utils/index.js +4 -0
  171. package/lib/utils/renderInlineSetting.js +1 -1
  172. package/package.json +21 -25
  173. package/config/webpack/example.config.js +0 -86
  174. package/config/webpack/loaders/index.js +0 -6
  175. package/config/webpack/loaders/js-loader.js +0 -5
  176. package/config/webpack/loaders/style-loader.js +0 -7
  177. package/config/webpack/loaders/svg-loader.js +0 -4
  178. package/config/webpack/loaders/vue-loader.js +0 -4
  179. package/lib/assets/icons.svg +0 -69
  180. package/lib/composables/__tests__/useToolbar.test.js +0 -56
package/example/ExampleApp.vue CHANGED
@@ -29,6 +29,8 @@
29
29
  :make-preset-variable="$options.makePresetVariable"
30
30
  :favorite-colors="favoriteColors"
31
31
  :device="device"
32
+ :page-blocks="pageBlocks"
33
+ :active="isActive"
32
34
  @updateFavoriteColors="updateFavoriteColors"
33
35
  />
34
36
  <pre class="zw-content-structure" v-html="structurePreview" />
@@ -40,6 +42,7 @@ import { computed, onMounted, ref } from '@vue/composition-api';
40
42
  import { Wysiwyg } from '../lib';
41
43
  import { FONTS } from './fonts';
42
44
  import { PRESETS, renderPresetVariable } from './presets';
45
+ import { PAGE_BLOCKS } from './pageBlocks';
43
46
 
44
47
  function getInitialContent() {
45
48
  const data = sessionStorage.getItem('wswg-data');
@@ -64,8 +67,10 @@ export default {
64
67
  const wswgRef = ref(null);
65
68
  const content = ref(getInitialContent());
66
69
  const presets = ref(PRESETS);
70
+ const pageBlocks = ref(PAGE_BLOCKS);
67
71
  const device = ref('desktop');
68
72
  const updatedAt = new Date(ZW_UPDATED_AT).toLocaleString('ua-UA');
73
+ const isActive = ref(false);
69
74
 
70
75
  const structurePreview = computed(() => {
71
76
  const json = JSON.stringify(content.value, null, ' ');
@@ -94,6 +99,10 @@ export default {
94
99
  }
95
100
  }
96
101
 
102
+ document.addEventListener('click', (event) => {
103
+ isActive.value = wswgRef.value.$el.contains(event.target);
104
+ });
105
+
97
106
  return {
98
107
  wswgRef,
99
108
  content,
@@ -104,13 +113,18 @@ export default {
104
113
  loadContent,
105
114
  device,
106
115
  updatedAt,
107
- presets
116
+ presets,
117
+ isActive,
118
+ pageBlocks
108
119
  };
109
120
  }
110
121
  };
111
122
  </script>
112
123
 
113
124
  <style>
125
+ @import url("@zipify/colorpicker/dist/colorpicker.css");
126
+ @import url("simplebar/dist/simplebar.css");
127
+
114
128
  body {
115
129
  padding: 50px 20px;
116
130
  max-width: 1200px;
@@ -141,4 +155,9 @@ body {
141
155
  .zpa-text__list--square { list-style-type: square }
142
156
  .zpa-text__list--latin { list-style-type: upper-roman }
143
157
  .zpa-text__list--roman { list-style-type: upper-latin }
158
+
159
+ p, h1, h2, h3, h4 {
160
+ margin-top: 0.3em;
161
+ margin-bottom: 0.3em;
162
+ }
144
163
  </style>
package/example/{example.html → index.html} RENAMED
@@ -13,5 +13,6 @@
13
13
  </head>
14
14
  <body>
15
15
  <div data-app></div>
16
+ <script type="module" src="./example.js"></script>
16
17
  </body>
17
18
  </html>
package/example/pageBlocks.js ADDED
@@ -0,0 +1,31 @@
1
+ export const PAGE_BLOCKS = [
2
+ {
3
+ id: 123,
4
+ title: 'Dynamic Buy Box'
5
+ },
6
+
7
+ {
8
+ id: 123456,
9
+ title: 'Text + Navigation'
10
+ },
11
+
12
+ {
13
+ id: 11123,
14
+ title: 'Dynamic Bundle Offer'
15
+ },
16
+
17
+ {
18
+ id: 4444444,
19
+ title: 'Dynamic Buy Box[2]'
20
+ },
21
+
22
+ {
23
+ id: 555555,
24
+ title: 'Image'
25
+ },
26
+
27
+ {
28
+ id: 666666,
29
+ title: 'Footer'
30
+ }
31
+ ];
package/example/presets.js CHANGED
@@ -14,7 +14,7 @@ export const PRESETS = [
14
14
  'common': {
15
15
  'font_family': 'Lato',
16
16
  'font_weight': '700',
17
- 'color': '#262626',
17
+ 'color': '',
18
18
  'font_style': 'normal',
19
19
  'text_decoration': 'none'
20
20
  },
@@ -131,7 +131,7 @@ export const PRESETS = [
131
131
  'common': {
132
132
  'font_family': 'inherit',
133
133
  'font_weight': 'inherit',
134
- 'color': '',
134
+ 'color': 'rgb(0, 0, 238)',
135
135
  'font_style': 'normal',
136
136
  'text_decoration': 'underline'
137
137
  },
package/jest.config.js CHANGED
@@ -3,8 +3,10 @@ module.exports = {
3
3
  moduleFileExtensions: ['js', 'json', 'vue', 'scss'],
4
4
  transform: {
5
5
  '^.+\\.js$': 'babel-jest',
6
- '^.+\\.vue$': '@vue/vue2-jest'
6
+ '^.+\\.vue$': '@vue/vue2-jest',
7
+ 'node_modules/@zipify/.+': 'babel-jest'
7
8
  },
9
+ transformIgnorePatterns: ['node_modules/(?!@zipify)/'],
8
10
  moduleNameMapper: {
9
11
  '^.+\\.svg$': '<rootDir>/lib/__mocks__/svgMock.js'
10
12
  },
package/lib/Wysiwyg.vue CHANGED
@@ -1,27 +1,23 @@
1
1
  <template>
2
- <div
3
- class="zw-wysiwyg"
4
- ref="wysiwygRef"
5
- v-out-click="{ onOutClick: hideToolbar, isDisabled: !toolbar.isShow.value }"
6
- >
2
+ <div class="zw-wysiwyg" ref="wysiwygRef">
7
3
  <Toolbar
8
- v-show="toolbar.isShow.value"
9
- :editor="editor"
4
+ :toolbar="toolbar"
10
5
  :device="device"
11
6
  ref="toolbarRef"
12
7
  />
8
+
13
9
  <EditorContent :editor="editor" />
14
10
  </div>
15
11
  </template>
16
12
 
17
13
  <script>
18
14
  import { EditorContent } from '@tiptap/vue-2';
19
- import { provide, toRef, ref } from '@vue/composition-api';
15
+ import { provide, toRef, ref, computed } from '@vue/composition-api';
20
16
  import { Toolbar } from './components';
21
17
  import { useToolbar, useEditor } from './composables';
22
- import { getExtensions } from './extensions';
18
+ import { buildExtensions } from './extensions';
23
19
  import { InjectionTokens } from './injectionTokens';
24
- import { FavoriteColors, Storage } from './services';
20
+ import { ContextWindow, FavoriteColors, Storage } from './services';
25
21
  import { Devices } from './enums';
26
22
  import { outClick } from './directives';
27
23
  import { Font } from './models';
@@ -72,6 +68,11 @@ export default {
72
68
  required: true
73
69
  },
74
70
 
71
+ active: {
72
+ type: Boolean,
73
+ required: true
74
+ },
75
+
75
76
  device: {
76
77
  type: String,
77
78
  required: false,
@@ -94,32 +95,53 @@ export default {
94
95
  type: String,
95
96
  required: false,
96
97
  default: 'zw-list--'
98
+ },
99
+
100
+ pageBlocks: {
101
+ type: Array,
102
+ required: true
103
+ },
104
+
105
+ // Requires Window type but it different in iframe and outside
106
+ // eslint-disable-next-line vue/require-prop-types
107
+ window: {
108
+ required: false,
109
+ default: () => window
97
110
  }
98
111
  },
99
112
 
113
+ emits: [
114
+ 'input',
115
+ 'updateFavoriteColors'
116
+ ],
117
+
100
118
  setup(props, { emit }) {
101
- const fonts = props.fonts.map((font) => new Font(font));
119
+ ContextWindow.use(props.window);
102
120
 
121
+ const fonts = props.fonts.map((font) => new Font(font));
103
122
  const toolbarRef = ref(null);
104
123
  const wysiwygRef = ref(null);
124
+ const wrapperRef = computed(() => wysiwygRef.value?.$el || document.body);
105
125
 
106
126
  const toolbar = useToolbar({
107
127
  wrapperRef: wysiwygRef,
108
- popperRef: toolbarRef,
109
- offsets: toRef(props, 'toolbarOffsets').value
128
+ isActiveRef: toRef(props, 'active'),
129
+ offsets: props.toolbarOffsets
110
130
  });
131
+ const updateToolbar = () => toolbar.update();
111
132
 
112
133
  function onChange(content) {
113
134
  emit('input', content);
114
- toolbar.update();
135
+ updateToolbar();
115
136
  }
116
137
 
138
+ const pageBlocks = toRef(props, 'pageBlocks');
139
+
117
140
  const editor = useEditor({
118
141
  content: toRef(props, 'value'),
119
142
  onChange: (content) => onChange(content),
120
- onFocus: () => toolbar.show(),
121
143
 
122
- extensions: getExtensions({
144
+ extensions: buildExtensions({
123
145
  fonts,
124
146
  minFontSize: MIN_FONT_SIZE,
125
147
  maxFontSize: MAX_FONT_SIZE,
@@ -128,16 +150,12 @@ export default {
128
150
  makePresetVariable: props.makePresetVariable,
129
151
  basePresetClass: props.basePresetClass,
130
152
  baseListClass: props.baseListClass,
131
- deviceRef: toRef(props, 'device')
153
+ deviceRef: toRef(props, 'device'),
154
+ pageBlocksRef: pageBlocks,
155
+ wrapperRef
132
156
  })
133
157
  });
134
158
 
135
- function hideToolbar() {
136
- if (editor.isFocused) return;
137
-
138
- toolbar.hide();
139
- }
140
-
141
159
  const fontSizes = new Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)
142
160
  .fill(0)
143
161
  .map((_, index) => String(index + MIN_FONT_SIZE));
@@ -152,8 +170,15 @@ export default {
152
170
  provide(InjectionTokens.FONT_SIZES, fontSizes);
153
171
  provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
154
172
  provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
155
-
156
- return { editor, toolbarRef, wysiwygRef, toolbar, hideToolbar };
173
+ provide(InjectionTokens.PAGE_BLOCKS, pageBlocks);
174
+
175
+ return {
176
+ editor,
177
+ toolbarRef,
178
+ wysiwygRef,
179
+ toolbar,
180
+ updateToolbar
181
+ };
157
182
  }
158
183
  };
159
184
  </script>
package/lib/__tests__/utils/NodeFactory.js CHANGED
@@ -64,4 +64,17 @@ export class NodeFactory {
64
64
  static mark(type, attrs) {
65
65
  return { type, attrs };
66
66
  }
67
+
68
+ static link(attrs) {
69
+ return {
70
+ type: 'text',
71
+ marks: [
72
+ {
73
+ type: 'link',
74
+ attrs: { ...attrs }
75
+ }
76
+ ],
77
+ text: attrs.text
78
+ };
79
+ }
67
80
  }
package/lib/assets/icons/alignment-center.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm-3 4H8v2h12v-2Zm3 4H5v2h18v-2ZM8 19h12v2H8v-2Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/alignment-justify.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm0 4H5v2h18v-2Zm0 4H5v2h18v-2ZM5 19h18v2H5v-2Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/alignment-left.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm-6 4H5v2h12v-2Zm6 4H5v2h18v-2ZM5 19h12v2H5v-2Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/alignment-right.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm0 4H11v2h12v-2Zm0 4H5v2h18v-2Zm-12 4h12v2H11v-2Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/arrow.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 8 8">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m4 6.934 4-5H0l4 5Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/background-color.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M22 20.62a2.42 2.42 0 0 1-4.84 0c0-1.25 2.42-4.54 2.42-4.54S22 19.37 22 20.62ZM9.92 15.425l1.452-3.951c.071-.182.145-.394.219-.636.074-.242.149-.503.226-.783a17.223 17.223 0 0 0 .454 1.402l1.452 3.968H9.919Zm5.411 4.199c.226-.795.658-1.684 1.184-2.562L12.955 8h-2.269L6 19.93h1.725a.736.736 0 0 0 .474-.157.792.792 0 0 0 .26-.347l.891-2.434h4.941l.891 2.434c.031.079.097.134.148.198Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/case-style.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M16.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433H8.35l-.891 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H5L9.686 8h2.269l4.686 11.93Zm-7.72-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635L8.92 15.425Zm14.968 4.505h-.915a.987.987 0 0 1-.454-.087c-.11-.058-.192-.175-.248-.35l-.181-.603a7.005 7.005 0 0 1-.631.507c-.206.146-.42.269-.64.368a3.26 3.26 0 0 1-.7.222c-.248.05-.523.075-.826.075-.357 0-.687-.049-.99-.145a2.134 2.134 0 0 1-.78-.433 1.967 1.967 0 0 1-.507-.718 2.545 2.545 0 0 1-.181-.998c0-.319.084-.634.251-.945.168-.31.447-.59.838-.841.39-.25.91-.458 1.559-.623.649-.165 1.455-.258 2.417-.28v-.495c0-.567-.12-.986-.359-1.259-.239-.272-.587-.408-1.043-.408-.33 0-.605.039-.825.116a3.17 3.17 0 0 0-.574.26 25.11 25.11 0 0 1-.45.26.912.912 0 0 1-.453.115.59.59 0 0 1-.355-.107.843.843 0 0 1-.239-.264l-.371-.652c.973-.891 2.148-1.337 3.523-1.337.494 0 .936.081 1.324.244.387.162.716.387.985.676.27.289.475.634.615 1.036.14.401.21.841.21 1.32v5.346Zm-3.96-1.271c.21 0 .402-.02.578-.058.176-.038.342-.096.5-.173.156-.077.307-.172.453-.285a4.13 4.13 0 0 0 .441-.4v-1.427c-.594.027-1.09.078-1.489.153a3.967 3.967 0 0 0-.961.284c-.242.116-.414.25-.516.404a.894.894 0 0 0-.152.504c0 .357.106.613.317.767.212.154.489.231.83.231Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/font-color.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="#fff" stroke="#B3B3B3" d="M4.5 4.5h19v19h-19z"/>
3
+ <path fill="#3B3B3B" d="M26 20.7a2.51 2.51 0 0 1-5 0c0-1.31 2.5-4.7 2.5-4.7s2.5 3.39 2.5 4.7Z"/>
4
+ <path fill="#3B3B3B" fill-rule="evenodd" d="M19.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433h-4.943l-.89 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H8L12.686 8h2.269l4.686 11.93Zm-7.721-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635l-1.452 3.952Z" clip-rule="evenodd"/>
5
+ </svg>
package/lib/assets/icons/italic.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" d="M18 9V7h-7v2h2.64l-1.22 10H10v2h7v-2h-2.83L15.4 9H18Z"/>
3
+ </svg>
package/lib/assets/icons/line-height.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m5 10 3-3 3 3H9v8h2l-3 3-3-3h2v-8H5Zm8-3h10v2H13V7Zm10 6H13v2h10v-2Zm0 6H13v2h10v-2Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/link.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M12 17.5h-2a3.5 3.5 0 1 1 0-7h2V9h-2a5 5 0 0 0 0 10h2v-1.5Zm6-4.5h-8v2h8v-2Zm-2-4h2a5 5 0 0 1 0 10h-2v-1.5h2a3.5 3.5 0 1 0 0-7h-2V9Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/list-circle.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <rect width="9" height="9" x="9.5" y="9.5" stroke="var(--zw-icon-foreground)" rx="4.5"/>
3
+ </svg>
package/lib/assets/icons/list-decimal.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" d="M15.108 18.184V19H10.5v-.816h1.842v-5.862c0-.176.006-.354.018-.534l-1.53 1.314a.375.375 0 0 1-.156.084.373.373 0 0 1-.27-.048.318.318 0 0 1-.084-.078l-.336-.462 2.562-2.214h.87v7.8h1.692Zm1.519.156a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
3
+ </svg>
package/lib/assets/icons/list-disc.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <rect width="10" height="10" x="9" y="9" fill="var(--zw-icon-foreground)" rx="5"/>
3
+ </svg>
package/lib/assets/icons/list-latin.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" d="M12.086 9.802h.834v11.292h-.834V9.802Zm2.592 8.538a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
3
+ </svg>
package/lib/assets/icons/list-roman.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" d="m13.664 15.808-1.35-3.498a7.11 7.11 0 0 1-.252-.804c-.084.324-.17.594-.258.81l-1.35 3.492h3.21ZM16.088 19h-.9a.387.387 0 0 1-.252-.078.48.48 0 0 1-.144-.198l-.804-2.076H10.13l-.804 2.076a.421.421 0 0 1-.138.192.383.383 0 0 1-.252.084h-.9l3.438-8.598h1.176L16.088 19Zm.7-.66a.8.8 0 0 1 .053-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
3
+ </svg>
package/lib/assets/icons/list-square.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" d="M9 9h10v10H9z"/>
3
+ </svg>
package/lib/assets/icons/remove-format.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M14.089 6.726a1 1 0 0 1 1.425-.003l6.8 6.882a1 1 0 0 1 .007 1.398L17.2 20.3l-.2.2c-2.2 2.1-5.7 2-7.8-.2l-3.516-3.6a1 1 0 0 1 0-1.399l8.405-8.575Zm1.81 12.674c.1 0 .2 0 .2-.1l4.8-5-6.1-6.2-5 5.1 6.1 6.2Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/reset-styles.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" d="M14 9.333V6.666l-3.334 3.333L14 13.333v-2.667c2.206 0 4 1.793 4 4s-1.794 4-4 4c-2.207 0-4-1.793-4-4H8.666A5.332 5.332 0 0 0 14 19.999a5.332 5.332 0 0 0 5.333-5.333A5.332 5.332 0 0 0 14 9.333Z"/>
3
+ </svg>
package/lib/assets/icons/strike-through.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m14 12.731.77.27H20v2H8v-2h2.84a2.892 2.892 0 0 1-.46-.71 3.61 3.61 0 0 1-.29-1.52c0-.484.1-.964.29-1.41a3.5 3.5 0 0 1 .83-1.2 4 4 0 0 1 1.35-.84 4.74 4.74 0 0 1 1.83-.32 6 6 0 0 1 2.11.41 5 5 0 0 1 1.68 1l-.46.88a.69.69 0 0 1-.18.22.41.41 0 0 1-.25.07.69.69 0 0 1-.39-.16 5.551 5.551 0 0 0-.56-.36 4.641 4.641 0 0 0-.8-.36 3.44 3.44 0 0 0-1.14-.16 3.16 3.16 0 0 0-1.11.17 2.29 2.29 0 0 0-.8.45 1.87 1.87 0 0 0-.49.67 2.138 2.138 0 0 0-.11.79c-.023.357.08.711.29 1 .206.267.465.489.76.65.338.187.693.34 1.06.46Zm1.99 6.06c.24-.22.427-.49.55-.79.135-.315.2-.657.19-1h1.74a4.58 4.58 0 0 1-.25 1.38 4 4 0 0 1-.91 1.37 4.231 4.231 0 0 1-1.46.92 5.503 5.503 0 0 1-2 .33 6.13 6.13 0 0 1-2.5-.46 5.66 5.66 0 0 1-1.89-1.31l.54-.88a.61.61 0 0 1 .19-.17.45.45 0 0 1 .25-.07.5.5 0 0 1 .28.1c.128.077.251.16.37.25l.46.33c.19.13.391.243.6.34.245.107.5.191.76.25.328.076.664.11 1 .1a3.67 3.67 0 0 0 1.19-.18c.328-.109.63-.282.89-.51Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/superscript.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" d="M21.985 8.625h-1.75V9.5h2.625v.875h-3.5v-1.75c0-.481.394-.875.875-.875h1.75v-.875H19.36V6h2.625c.481 0 .875.394.875.875v.875a.878.878 0 0 1-.875.875ZM7.88 20h2.327l2.975-4.742h.105L16.262 20h2.328l-4.069-6.361L18.32 7.75h-2.345l-2.687 4.366h-.105L10.48 7.75H8.15l3.78 5.889L7.88 20Z"/>
3
+ </svg>
package/lib/assets/icons/underline.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M15.4 16.06a3.3 3.3 0 0 1-1.4.29 3.12 3.12 0 0 1-1.39-.29 2.88 2.88 0 0 1-1.05-.81 3.711 3.711 0 0 1-.65-1.25 5.659 5.659 0 0 1-.22-1.6V7H9v5.41a6.89 6.89 0 0 0 .34 2.22 5.29 5.29 0 0 0 1 1.77c.437.501.975.904 1.58 1.18A5 5 0 0 0 14 18a5 5 0 0 0 2.08-.42 4.61 4.61 0 0 0 1.57-1.18 5.27 5.27 0 0 0 1-1.77 6.89 6.89 0 0 0 .35-2.22V7h-1.69v5.41a5.659 5.659 0 0 1-.22 1.59 3.71 3.71 0 0 1-.69 1.25c-.27.34-.61.617-1 .81ZM20 19H8v2h12v-2Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/assets/icons/unlink.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 20 20">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M18.96 10a5 5 0 0 0-5-5h-2v1.5h2a3.49 3.49 0 0 1 1.58 6.61L13.43 11h.53V9h-2.53l-7-7-1.47 1.47L17.49 18l1.47-1.47-2.34-2.34A4.93 4.93 0 0 0 18.96 10Zm-13 1h1.59L5.96 9.41V11ZM3.81 7.26A3.47 3.47 0 0 0 2.46 10a3.5 3.5 0 0 0 3.5 3.5h2V15h-2a5 5 0 0 1-3.21-8.8l1.06 1.06Z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/components/base/Button.vue CHANGED
@@ -20,7 +20,7 @@ export default {
20
20
  skin: {
21
21
  type: String,
22
22
  required: false,
23
- validator: (skin) => ['toolbar', 'none'].includes(skin),
23
+ validator: (skin) => ['toolbar', 'primary', 'secondary', 'none'].includes(skin),
24
24
  default: 'none'
25
25
  },
26
26
 
@@ -104,6 +104,26 @@ export default {
104
104
  will-change: background-color, color, opacity;
105
105
  }
106
106
 
107
+ .zw-button--primary {
108
+ background-color: rgb(var(--zw-color-green));
109
+ color: rgb(var(--zw-color-white));
110
+ padding: var(--zw-offset-xxs) var(--zw-offset-sm);
111
+ line-height: var(--zw-line-height-md);
112
+ }
113
+
114
+ .zw-button--primary,
115
+ .zw-button--secondary {
116
+ color: rgb(var(--zw-color-white));
117
+ padding: var(--zw-offset-xxs) var(--zw-offset-sm);
118
+ font-weight: 600;
119
+ font-size: var(--zw-font-size-xs);
120
+ }
121
+
122
+ .zw-button--primary:not(:disabled):hover,
123
+ .zw-button--secondary:not(:disabled):hover {
124
+ opacity: 0.9;
125
+ }
126
+
107
127
  .zw-button--toolbar:not(.zw-button--icon) {
108
128
  padding: var(--zw-offset-xxs) var(--zw-offset-xs);
109
129
  }
package/lib/components/base/Checkbox.vue ADDED
@@ -0,0 +1,89 @@
1
+ <template>
2
+ <label class="zw-checkbox">
3
+ <input class="zw-checkbox__field" type="checkbox" :checked="value" @change="onCheckedChanged">
4
+ <span class="zw-checkbox__indicator zw-margin-right--xs" />
5
+ <span class="zw-checkbox__label">{{ label }}</span>
6
+ </label>
7
+ </template>
8
+
9
+ <script>
10
+ export default {
11
+ name: 'Checkbox',
12
+
13
+ props: {
14
+ value: {
15
+ type: Boolean,
16
+ required: true
17
+ },
18
+
19
+ label: {
20
+ type: String,
21
+ required: false,
22
+ default: null
23
+ }
24
+ },
25
+
26
+ setup(_, { emit }) {
27
+ const onCheckedChanged = (event) => {
28
+ emit('input', event.target.checked);
29
+ };
30
+
31
+ return { onCheckedChanged };
32
+ }
33
+ };
34
+ </script>
35
+
36
+ <style scoped>
37
+ .zw-checkbox {
38
+ display: inline-flex;
39
+ align-items: center;
40
+ position: relative;
41
+ cursor: pointer;
42
+ padding: var(--zw-offset-xxs) var(--zw-offset-xxs) var(--zw-offset-xxs) 0;
43
+ }
44
+
45
+ .zw-checkbox__field + .zw-checkbox__indicator {
46
+ color: var(--zw-color-n200);
47
+ box-shadow: inset 0 0 0 2px currentColor;
48
+ }
49
+
50
+ .zw-checkbox:hover .zw-checkbox__indicator {
51
+ box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
52
+ }
53
+
54
+ .zw-checkbox__field:checked + .zw-checkbox__indicator {
55
+ color: rgb(var(--zw-color-green))
56
+ }
57
+
58
+ .zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator {
59
+ background-color: rgb(var(--zw-color-green));
60
+ }
61
+
62
+ .zw-checkbox .zw-checkbox__indicator::after {
63
+ content: "";
64
+ display: block;
65
+ height: 16px;
66
+ transform: scale(0.6);
67
+ transition: transform 0.2s ease-out;
68
+ width: 16px;
69
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAyNiIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0uMyAxNGMtLjItLjItLjMtLjUtLjMtLjdzLjEtLjUuMy0uN2wxLjQtMS40Yy40LS40IDEtLjQgMS40IDBsLjEuMSA1LjUgNS45Yy4yLjIuNS4yLjcgMEwyMi44IDMuM2guMWMuNC0uNCAxLS40IDEuNCAwbDEuNCAxLjRjLjQuNC40IDEgMCAxLjRsLTE2IDE2LjZjLS4yLjItLjQuMy0uNy4zLS4zIDAtLjUtLjEtLjctLjNMLjUgMTQuMy4zIDE0eiIvPgo8L3N2Zz4K");
70
+ background-repeat: no-repeat;
71
+ background-size: 16px;
72
+ background-position: center center;
73
+ }
74
+
75
+ .zw-checkbox__field:not(:checked) + .zw-checkbox__indicator::after {
76
+ transform: scale(0);
77
+ }
78
+
79
+ .zw-checkbox__field {
80
+ position: absolute;
81
+ opacity: 0;
82
+ height: 0;
83
+ width: 0;
84
+ }
85
+
86
+ .zw-checkbox__label {
87
+ font-size: var(--zw-font-size-xs);
88
+ }
89
+ </style>
package/lib/components/base/FieldLabel.vue CHANGED
@@ -11,7 +11,8 @@ export default {
11
11
  props: {
12
12
  fieldId: {
13
13
  type: String,
14
- required: true
14
+ required: false,
15
+ default: null
15
16
  }
16
17
  }
17
18
  };
package/lib/components/base/Icon.vue CHANGED
@@ -1,12 +1,15 @@
1
1
  <template>
2
- <svg v-bind="iconAttrs" class="zw-icon" :class="iconClasses">
3
- <use :href="url" />
4
- </svg>
2
+ <div
3
+ class="zw-icon"
4
+ :class="iconClasses"
5
+ :style="iconStyles"
6
+ v-html="source"
7
+ />
5
8
  </template>
6
9
 
7
10
  <script>
8
11
  import { computed } from '@vue/composition-api';
9
- import sprite from '../../assets/icons.svg';
12
+ import { importIcon } from '../../utils';
10
13
 
11
14
  export default {
12
15
  name: 'Icon',
@@ -31,7 +34,7 @@ export default {
31
34
  },
32
35
 
33
36
  setup(props) {
34
- const url = computed(() => `${sprite}#${props.name}`);
37
+ const source = computed(() => importIcon(props.name));
35
38
 
36
39
  const iconSize = computed(() => {
37
40
  if (isNaN(Number(props.size))) return props.size;
@@ -39,8 +42,13 @@ export default {
39
42
  return `${props.size}px`;
40
43
  });
41
44
 
42
- const iconAttrs = computed(() => {
43
- return props.size ? { width: iconSize.value, height: iconSize.value } : null;
45
+ const iconStyles = computed(() => {
46
+ if (!props.size) return null;
47
+
48
+ return {
49
+ '--zw-icon-width': iconSize.value,
50
+ '--zw-icon-height': iconSize.value
51
+ };
44
52
  });
45
53
 
46
54
  const iconClasses = computed(() => ({
@@ -48,8 +56,8 @@ export default {
48
56
  }));
49
57
 
50
58
  return {
51
- url,
52
- iconAttrs,
59
+ source,
60
+ iconStyles,
53
61
  iconClasses
54
62
  };
55
63
  }
@@ -58,7 +66,7 @@ export default {
58
66
 
59
67
  <style scoped>
60
68
  .zw-icon {
61
- display: inline-block;
69
+ display: flex;
62
70
  }
63
71
 
64
72
  .zw-icon--auto-color {
package/lib/components/base/Modal.vue CHANGED
@@ -76,7 +76,6 @@ export default {
76
76
  <style scoped>
77
77
  .zw-modal {
78
78
  border-radius: 2px;
79
- overflow: hidden;
80
79
  box-shadow: 0 0 4px rgba(var(--zw-color-black), 0.3);
81
80
  background-color: rgb(var(--zw-color-n15));
82
81
  max-height: var(--zw-modal-max-height);
package/lib/components/base/NumberField.vue CHANGED
@@ -126,7 +126,7 @@ export default {
126
126
  };
127
127
  </script>
128
128
 
129
- <style lang="scss" scoped>
129
+ <style scoped>
130
130
  .zw-number-field {
131
131
  --border-color: rgb(var(--zw-color-n60));
132
132
  --text-color: rgb(var(--zw-color-n85));