@zipify/wysiwyg 1.3.1 → 1.3.2

package/dist/wysiwyg.css

@@ -460,21 +460,21 @@
     font-size: var(--zw-font-size-xs);
 }
 
-.zw-dropdown__activator[data-v-58b29148] {
+.zw-dropdown__activator[data-v-0f1c87fd] {
     width: 100%;
 }
-.zw-dropdown__activator-arrow[data-v-58b29148] {
+.zw-dropdown__activator-arrow[data-v-0f1c87fd] {
     margin-left: auto;
 }
-.zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-58b29148] {
+.zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-0f1c87fd] {
     transform: rotateX(180deg);
 }
-.zw-dropdown__activator--gray[data-v-58b29148] {
+.zw-dropdown__activator--gray[data-v-0f1c87fd] {
     background-color: rgb(var(--zw-color-n20));
     font-size: var(--zw-font-size-xxs);
     color: rgb(var(--zw-color-white));
 }
-.zw-dropdown__customized-indicator[data-v-58b29148] {
+.zw-dropdown__customized-indicator[data-v-0f1c87fd] {
     position: relative;
     top: calc(0px - var(--zw-offset-xs));
 }
@@ -571,17 +571,17 @@
     flex-direction: column;
 }
 
-.zw-line-height-control__modal[data-v-8aeefd68] {
+.zw-line-height-control__modal[data-v-c316d7dc] {
     padding: var(--zw-offset-sm);
 }
-.zw-line-height-control__row[data-v-8aeefd68] {
+.zw-line-height-control__row[data-v-c316d7dc] {
     display: flex;
     align-items: center;
 }
-.zw-line-height-control__range[data-v-8aeefd68] {
+.zw-line-height-control__range[data-v-c316d7dc] {
     width: 156px;
 }
-.zw-line-height-control__field[data-v-8aeefd68] {
+.zw-line-height-control__field[data-v-c316d7dc] {
     width: 64px;
     margin-left: var(--zw-offset-sm);
 }

package/dist/wysiwyg.mjs

@@ -19840,13 +19840,17 @@ const outClick = {
     toggleListener(false, dataStorage.get(el).callback);
   }
 };
-function tooltip(el, { value }) {
+function tooltip(el, { value, modifiers: modifiers2 }) {
   const options = typeof value === "string" ? { text: value } : value;
   const { text: text2, hotkey } = options;
   if (text2)
     el.dataset.tooltip = text2;
   if (text2 && hotkey)
     el.dataset.tooltipHotkey = hotkey;
+  if (modifiers2.xs)
+    el.dataset.tooltipSize = "xs";
+  if (modifiers2.lg)
+    el.dataset.tooltipSize = "lg";
 }
 var render$y = function __render__11() {
   var _vm = this;
@@ -20145,6 +20149,15 @@ var render$v = function __render__14() {
     }, [_c("span", {
       staticClass: "zw-dropdown__activator-title zw-text--truncate"
     }, [_vm._v(" " + _vm._s(_vm.activeOptionTitle) + " ")]), _vm.isCustomized ? _c("Icon", {
+      directives: [{
+        name: "tooltip",
+        rawName: "v-tooltip.xs",
+        value: "Default parameter setting is changed",
+        expression: "'Default parameter setting is changed'",
+        modifiers: {
+          "xs": true
+        }
+      }],
       staticClass: "zw-dropdown__customized-indicator",
       attrs: {
         "name": "indicator",
@@ -20172,6 +20185,9 @@ const __vue2_script$v = {
     Icon,
     Button
   },
+  directives: {
+    tooltip
+  },
   model: {
     event: "change"
   },
@@ -20211,7 +20227,7 @@ var __component__$v = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$v,
   false,
   __vue2_injectStyles$v,
-  "58b29148",
+  "0f1c87fd",
   null,
   null
 );
@@ -21162,6 +21178,15 @@ var render$k = function __render__25() {
             "auto-color": ""
           }
         }), _vm.isCustomized ? _c("Icon", {
+          directives: [{
+            name: "tooltip",
+            rawName: "v-tooltip.xs",
+            value: "Default parameter setting is changed",
+            expression: "'Default parameter setting is changed'",
+            modifiers: {
+              "xs": true
+            }
+          }],
           staticClass: "zw-button__customized-indicator",
           attrs: {
             "name": "indicator",
@@ -21327,6 +21352,15 @@ var render$i = function __render__27() {
       "auto-color": ""
     }
   }), _vm.isCustomized ? _c("Icon", {
+    directives: [{
+      name: "tooltip",
+      rawName: "v-tooltip.xs",
+      value: "Default parameter setting is changed",
+      expression: "'Default parameter setting is changed'",
+      modifiers: {
+        "xs": true
+      }
+    }],
     staticClass: "zw-button__customized-indicator",
     attrs: {
       "name": "indicator",
@@ -21408,6 +21442,15 @@ var render$h = function __render__28() {
       "auto-color": ""
     }
   }), _vm.isCustomized ? _c("Icon", {
+    directives: [{
+      name: "tooltip",
+      rawName: "v-tooltip.xs",
+      value: "Default parameter setting is changed",
+      expression: "'Default parameter setting is changed'",
+      modifiers: {
+        "xs": true
+      }
+    }],
     staticClass: "zw-button__customized-indicator",
     attrs: {
       "name": "indicator",
@@ -21704,6 +21747,15 @@ var render$d = function __render__32() {
             "click": activate
           }
         }, [_vm.isCustomized && isActive2 ? _c("Icon", {
+          directives: [{
+            name: "tooltip",
+            rawName: "v-tooltip.xs",
+            value: "Default parameter setting is changed",
+            expression: "'Default parameter setting is changed'",
+            modifiers: {
+              "xs": true
+            }
+          }],
           staticClass: "zw-button__customized-indicator",
           attrs: {
             "name": "indicator",
@@ -21902,6 +21954,15 @@ var render$b = function __render__34() {
       "auto-color": ""
     }
   }), _vm.isCustomized ? _c("Icon", {
+    directives: [{
+      name: "tooltip",
+      rawName: "v-tooltip.xs",
+      value: "Default parameter setting is changed",
+      expression: "'Default parameter setting is changed'",
+      modifiers: {
+        "xs": true
+      }
+    }],
     staticClass: "zw-button__customized-indicator",
     attrs: {
       "name": "indicator",
@@ -21987,7 +22048,7 @@ var __component__$b = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$b,
   false,
   __vue2_injectStyles$b,
-  "8aeefd68",
+  "c316d7dc",
   null,
   null
 );

package/lib/components/base/dropdown/DropdownActivator.vue

@@ -18,6 +18,7 @@
                     name="indicator"
                     size="9px"
                     data-test-selector="customizedIndicator"
+                    v-tooltip.xs="'Default parameter setting is changed'"
                 />
 
                 <Icon
@@ -35,6 +36,7 @@
 import { computed, inject, toRef } from 'vue';
 import Button from '../Button';
 import Icon from '../Icon';
+import { tooltip } from '../../../directives';
 import { InjectionTokens } from './injectionTokens';
 import { useDropdownEntityTitle } from './composables';
 
@@ -46,6 +48,10 @@ export default {
         Button
     },
 
+    directives: {
+        tooltip
+    },
+
     model: {
         event: 'change'
     },

package/lib/components/toolbar/controls/AlignmentControl.vue

@@ -15,6 +15,7 @@
                     name="indicator"
                     size="9px"
                     data-test-selector="customizedIndicator"
+                    v-tooltip.xs="'Default parameter setting is changed'"
                 />
                 <Icon :name="`alignment-${option.id}`" size="28px" auto-color />
             </Button>

package/lib/components/toolbar/controls/FontColorControl.vue

@@ -17,6 +17,7 @@
                     name="indicator"
                     size="9px"
                     data-test-selector="customizedIndicator"
+                    v-tooltip.xs="'Default parameter setting is changed'"
                 />
             </Button>
         </template>

package/lib/components/toolbar/controls/ItalicControl.vue

@@ -16,6 +16,7 @@
             name="indicator"
             size="9px"
             data-test-selector="customizedIndicator"
+            v-tooltip.xs="'Default parameter setting is changed'"
         />
     </Button>
 </template>

package/lib/components/toolbar/controls/LineHeightControl.vue

@@ -16,6 +16,7 @@
                 name="indicator"
                 size="9px"
                 data-test-selector="customizedIndicator"
+                v-tooltip.xs="'Default parameter setting is changed'"
             />
         </Button>
 

package/lib/components/toolbar/controls/UnderlineControl.vue

@@ -15,6 +15,7 @@
             name="indicator"
             size="9px"
             data-test-selector="customizedIndicator"
+            v-tooltip.xs="'Default parameter setting is changed'"
         />
     </Button>
 </template>

package/lib/directives/__tests__/tooltip.test.js

@@ -4,7 +4,7 @@ describe('rendering', () => {
     test('should render text only tooltip', () => {
         const el = document.createElement('div');
 
-        tooltip(el, { value: 'Test' });
+        tooltip(el, { value: 'Test', modifiers: {} });
 
         expect(el.dataset.tooltip).toBe('Test');
     });
@@ -13,7 +13,8 @@ describe('rendering', () => {
         const el = document.createElement('div');
 
         tooltip(el, {
-            value: { text: 'Test' }
+            value: { text: 'Test' },
+            modifiers: {}
         });
 
         expect(el.dataset.tooltip).toBe('Test');
@@ -23,7 +24,8 @@ describe('rendering', () => {
         const el = document.createElement('div');
 
         tooltip(el, {
-            value: { text: 'Test', hotkey: 'Mod B' }
+            value: { text: 'Test', hotkey: 'Mod B' },
+            modifiers: {}
         });
 
         expect(el.dataset.tooltipHotkey).toBe('Mod B');
@@ -32,8 +34,24 @@ describe('rendering', () => {
     test('should not render tooltip if no value passed', () => {
         const el = document.createElement('div');
 
-        tooltip(el, { value: '' });
+        tooltip(el, { value: '', modifiers: {} });
 
         expect(el.dataset).not.toHaveProperty('tooltip');
     });
+
+    test('should render xs size', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, { value: '', modifiers: { xs: true } });
+
+        expect(el.dataset).toHaveProperty('tooltipSize', 'xs');
+    });
+
+    test('should render lg size', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, { value: '', modifiers: { lg: true } });
+
+        expect(el.dataset).toHaveProperty('tooltipSize', 'lg');
+    });
 });

package/lib/directives/tooltip.js

@@ -1,7 +1,10 @@
-export function tooltip(el, { value }) {
+export function tooltip(el, { value, modifiers }) {
     const options = typeof value === 'string' ? { text: value } : value;
     const { text, hotkey } = options;
 
     if (text) el.dataset.tooltip = text;
     if (text && hotkey) el.dataset.tooltipHotkey = hotkey;
+
+    if (modifiers.xs) el.dataset.tooltipSize = 'xs';
+    if (modifiers.lg) el.dataset.tooltipSize = 'lg';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {