@webitel/ui-sdk 23.9.1 → 23.12.2

package/src/css/styleguide/colors/_colors.scss

@@ -1,152 +1,174 @@
-@import 'palette';
+@import './deprecated';
+@import './palette';
 
 :root {
-  // HSL COLORS HUE VALUE
-  --_accent-color-hue: 42;
-  --_secondary-color-hue: 202;
-  --_page-bg-color-hue: 209;
-  --_icon-color-hue: 202;
-  --_positive-color-hue: 119;
-  --_negative-color-hue: 11;
-
-  --_hold-color-hue: 54;
-  --_transfer-color-hue: 227;
-  --_job-color-hue: 209;
-
-  // DEFAULT STATES OPACITY
-  --_opacity--default: 0.8;
-  --_opacity--hover: 1;
-  --_opacity--active: 1;
-  --_opacity--focus: 0.8;
-  --_opacity--disabled: 0.4;
-
-  // BASIC HSL COLORS VALUES
-  --_accent-color: var(--_accent-color-hue), 100%, 50%;
-  --_main-color: var(--_accent-color-hue), 20%, 99%;
-  --_contrast-color: var(--_accent-color-hue), 20%, 1%;
-  --_secondary-color: var(--_secondary-color-hue), 20%, 90%;
-  --_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
-  --_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
-  --_header-color: var(--_page-bg-color-hue), 20%, 90%;
-  --_positive-color: var(--_positive-color-hue), 60%, 40%;
-  --_negative-color: var(--_negative-color-hue) , 80%, 50%;
-  --_icon-color: var(--_icon-color-hue), 100%, 15%;
-
-  --_hold-color: var(--_hold-color-hue), 80%, 50%;
-  --_transfer-color: var(--_transfer-color-hue), 80%, 50%;
-  --_job-color: var(--_job-color-hue), 96%, 57%;
-
-  // MAIN COLORS
-  --accent-color: hsla(var(--_accent-color), 1);
-
-  --main-color: hsla(var(--_main-color), 1);
-
-  --contrast-color: hsla(var(--_contrast-color), 1);
-
-  --secondary-color: hsla(var(--_secondary-color), 1);
-  --secondary-color-50: hsla(var(--_secondary-color-50), 1);
-
-  // ICON COLORS
-  --icon-color: hsla(var(--_icon-color), var(--_opacity--default));
-  --icon-color-secondary: hsla(var(--_icon-color), 0.25);
-
-  --icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));
-
-  --icon-color-accent: var(--accent-color);
-  --icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
-  --icon-color-active: var(--icon-color--hover);
-  --icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
-  --icon-color-success: var(--true-color);
-  --icon-color-danger: var(--false-color);
-  --icon-color-transfer: var(--transfer-color);
-  --icon-color-hold: var(--hold-color);
-  --icon-color-secondary-50: var(--secondary-color-50);
-
-
-  --page-bg-color: hsla(var(--_page-bg-color), 1);
-  --header-color: hsla(var(--_header-color), 1);
-
-  --accent-secondary-color: hsla(var(--_accent-color), 0.3);
-
-  // SEMANTIC COLORS
-  --disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
-
-  --true-color: hsla(var(--_positive-color), var(--_opacity--default));
-  --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));
-
-  --false-color: hsla(var(--_negative-color), var(--_opacity--default));
-  --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));
-
-  --hold-color: hsla(var(--_hold-color), var(--_opacity--default));
-  --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));
-
-  --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
-  --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
-
-  --job-color: hsla(var(--_job-color), var(--_opacity--default));
-  --job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));
-
-  --link-color: hsla(205, 90%, 45%, 1);
-  --link--hover-color: hsla(205, 90%, 60%, 1);
-
-  // SUBORDINATE COLORS
-  --tag-bg-color: var(--accent-secondary-color);
-
-  // FORM STATES OPACITY
-  --form-opacity--default: var(--_opacity--default);
-  --form-opacity--hover: var(--_opacity--hover);
-  --form-opacity--active: var(--_opacity--active);
-  --form-opacity--focus: var(--_opacity--focus);
-  --form-opacity--disabled: var(--_opacity--disabled);
-
-  --form-placeholder-opacity: 0.6;
-  --form-placeholder-opacity--focus: 0.4;
-  --form-border-opacity--disabled: 0.05;
-
-  --form-opacity--ouline--default: 0.4;
-  --form-opacity--ouline--hover: 0.7;
-
-  // FORM COLORS
-  --form-input-color: var(--contrast-color); // user input color
-
-  --form-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
-  --form-label--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
-  --form-label--active-color: hsla(var(--_contrast-color), var(--form-opacity--active));
-  --form-label--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
-
-  --form-border-color: hsla(var(--_contrast-color), var(--form-opacity--default));
-  --form-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
-  --form-border--disabled-color: hsla(var(--_contrast-color), var(--form-border-opacity--disabled));
-
-  --form-placeholder-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity));
-  --form-placeholder-color--focus: hsla(var(--_contrast-color), var(--form-placeholder-opacity--focus));
-  --form-placeholder-color--disabled: hsla(var(--_contrast-color), var(--form-opacity--disabled));
-
-  // outline
-  --form-outline-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
-
-  --form-outline-border-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
-  --form-outline-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
-
-  // TEXT OPACITY
-  --text-opacity--default: var(--_opacity--default);
-  --text-opacity----outline--default: 0.7;
-  --text-opacity--disabled: 0.5;
-
-  // TEXT COLORS
-  --text-primary-color: hsla(var(--_contrast-color), var(--text-opacity--default));
-  --text-outline-color: hsla(var(--_contrast-color), var(--text-opacity----outline--default));
-  --text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
-  --text--disabled-color: hsla(var(--_contrast-color), var(--text-opacity--disabled));
-
-  // CHAT COLORS
-  --_chat-client-color: var(--_accent-color);
-  --_chat-client-opacity: 0.2;
-  --_chat-agent-color: var(--_secondary-color-50);
-  --_chat-agent-opacity: 1;
+  // dp colors
+  --dp-24-surface-color: hsl(0, 0%, 100%);
+  --dp-23-surface-color: hsl(225, 20%, 99%);
+  --dp-22-surface-color: hsl(225, 20%, 98%);
+  --dp-21-surface-color: hsl(225, 20%, 97%);
+  --dp-20-surface-color: hsl(225, 20%, 96%);
+  --dp-19-surface-color: hsl(225, 20%, 95%);
+  --dp-18-surface-color: hsl(225, 20%, 94%);
+  --dp-17-surface-color: hsl(225, 20%, 93%);
+  --dp-16-surface-color: hsl(225, 20%, 92%);
+  --dp-15-surface-color: hsl(225, 20%, 91%);
+  --dp-14-surface-color: hsl(225, 20%, 90%);
+  --dp-13-surface-color: hsl(225, 20%, 89%);
+  --dp-12-surface-color: hsl(225, 20%, 88%);
+  --dp-11-surface-color: hsl(225, 20%, 87%);
+  --dp-10-surface-color: hsl(225, 20%, 86%);
+  --dp-9-surface-color: hsl(225, 20%, 85%);
+  --dp-8-surface-color: hsl(225, 20%, 84%);
+  --dp-7-surface-color: hsl(225, 20%, 83%);
+  --dp-6-surface-color: hsl(225, 20%, 82%);
+  --dp-5-surface-color: hsl(225, 20%, 81%);
+  --dp-4-surface-color: hsl(225, 20%, 80%);
+  --dp-3-surface-color: hsl(225, 20%, 79%);
+  --dp-2-surface-color: hsl(225, 20%, 78%);
+  --dp-1-surface-color: hsl(225, 20%, 77%);
+
+  // success colors
+  --success-color: var(--green-darken-4);
+  --success-hover-color: var(--green-darken-3);
+  --success-light-color: var(--green-lighten-4);
+  --on-success-color: var(--black);
+
+  // warning colors
+  --warning-color: var(--orange-accent-2);
+  --warning-hover-color: var(--orange-accent-1);
+  --warning-light-color: var(--orange-lighten-4);
+  --on-warning-color: var(--black);
+
+  // error colors
+  --error-color: var(--red-accent-2);
+  --error-hover-color: var(--red-lighten-2);
+  --error-light-color: var(--red-lighten-4);
+  --on-error-color: var(--black);
+
+  // info colors
+  --info-color: var(--blue-darken-1);
+  --info-hover-color: var(--blue-lighten-1);
+  --info-light-color: var(--blue-lighten-4);
+  --on-info-color: var(--black);
+
+  // job colors
+  --job-color: var(--blue-darken-1);
+  --job-hover-color: var(--blue-lighten-1);
+  --job-light-color: var(--blue-lighten-4);
+  --on-job-color: var(--black);
+
+  // chat colors
+  --chat-color: var(--indigo-accent-2);
+  --chat-hover-color: var(--indigo-accent-2);
+  --chat-light-color: var(--indigo-lighten-4);
+  --on-chat-color: var(--black);
+
+  // transfer colors
+  --transfer-color: var(--indigo-darken-1);
+  --transfer-hover-color: var(--indigo-lighten-1);
+  --transfer-light-color: var(--indigo-lighten-4);
+  --on-transfer-color: var(--white);
+
+  // primary colors
+  --primary-color: var(--amber-accent-2);
+  --primary-hover-color: var(--amber-accent-3);
+  --primary-light-color: var(--amber-lighten-4);
+  --on-primary-color: var(--black);
+
+  // accent colors
+  --accent-color: var(--purple-lighten-1);
+  --sub-accent-color: var(--indigo-darken-3);
+
+  // typography colors
+  --main-text-color: var(--grey-darken-3);
+  --main-text-disabled-color: var(--grey-lighten-1);
+  --negative-text-color: var(--error-color);
+  --link-color: var(--info-color);
+}
 
-  --chat-client-message-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
-  --chat-agent-message-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
-  --chat-client-attachment-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
-  --chat-agent-attachment-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
+:root.theme--dark {
+  // dp colors
+  --dp-24-surface-color: hsl(0, 0%, 25%);
+  --dp-23-surface-color: hsl(225, 20%, 24%);
+  --dp-22-surface-color: hsl(225, 20%, 23%);
+  --dp-21-surface-color: hsl(225, 20%, 22%);
+  --dp-20-surface-color: hsl(225, 20%, 21%);
+  --dp-19-surface-color: hsl(225, 20%, 20%);
+  --dp-18-surface-color: hsl(225, 20%, 19%);
+  --dp-17-surface-color: hsl(225, 20%, 18%);
+  --dp-16-surface-color: hsl(225, 20%, 17%);
+  --dp-15-surface-color: hsl(225, 20%, 16%);
+  --dp-14-surface-color: hsl(225, 20%, 15%);
+  --dp-13-surface-color: hsl(225, 20%, 14%);
+  --dp-12-surface-color: hsl(225, 20%, 13%);
+  --dp-11-surface-color: hsl(225, 20%, 12%);
+  --dp-10-surface-color: hsl(225, 20%, 11%);
+  --dp-9-surface-color: hsl(225, 20%, 10%);
+  --dp-8-surface-color: hsl(225, 20%, 9%);
+  --dp-7-surface-color: hsl(225, 20%, 8%);
+  --dp-6-surface-color: hsl(225, 20%, 7%);
+  --dp-5-surface-color: hsl(225, 20%, 6%);
+  --dp-4-surface-color: hsl(225, 20%, 5%);
+  --dp-3-surface-color: hsl(225, 20%, 4%);
+  --dp-2-surface-color: hsl(225, 20%, 3%);
+  --dp-1-surface-color: hsl(225, 20%, 2%);
+
+  // success colors
+  --success-color: var(--green-darken-4);
+  --success-hover-color: var(--green-darken-3);
+  --success-light-color: var(--green-lighten-3);
+  --on-success-color: var(--white);
+
+  // warning colors
+  --warning-color: var(--orange-accent-2);
+  --warning-hover-color: var(--orange-accent-1);
+  --warning-light-color: var(--orange-lighten-3);
+  --on-warning-color: var(--white);
+
+  // error colors
+  --error-color: var(--red-accent-2);
+  --error-hover-color: var(--red-lighten-2);
+  --error-light-color: var(--red-lighten-3);
+  --on-error-color: var(--white);
+
+  // info colors
+  --info-color: var(--blue-darken-1);
+  --info-hover-color: var(--blue-lighten-1);
+  --info-light-color: var(--blue-lighten-3);
+  --on-info-color: var(--white);
+
+  // job colors
+  --job-color: var(--blue-darken-1);
+  --job-hover-color: var(--blue-lighten-1);
+  --job-light-color: var(--blue-lighten-3);
+  --on-job-color: var(--white);
+
+  // chat colors
+  --chat-color: var(--indigo-accent-2);
+  --chat-hover-color: var(--indigo-accent-2);
+  --chat-light-color: var(--indigo-lighten-3);
+  --on-chat-color: var(--white);
+
+  // transfer colors
+  --transfer-color: var(--indigo-darken-1);
+  --transfer-hover-color: var(--indigo-lighten-1);
+  --transfer-light-color: var(--indigo-lighten-4);
+  --on-transfer-color: var(--white);
+
+  // primary colors
+  --primary-color: var(--amber-accent-2);
+  --primary-hover-color: var(--amber-accent-3);
+  --primary-light-color: var(--amber-lighten-4);
+  --on-primary-color: var(--black);
+
+  // accent colors
+  --accent-color: var(--purple-lighten-1);
+  --sub-accent-color: var(--indigo-darken-3);
+
+  // typography colors
+  --main-text-color: var(--grey-lighten-3);
+  --main-text-disabled-color: var(--grey-darken-1);
+  --negative-text-color: var(--error-color);
+  --link-color: var(--info-color);
 }

package/src/css/styleguide/colors/_deprecated.scss

@@ -0,0 +1,151 @@
+@import './palette';
+
+:root {
+  // HSL COLORS HUE VALUE
+  --_accent-color-hue: 42;
+  --_secondary-color-hue: 202;
+  --_page-bg-color-hue: 209;
+  --_icon-color-hue: 202;
+  --_positive-color-hue: 119;
+  --_negative-color-hue: 11;
+
+  --_hold-color-hue: 54;
+  --_transfer-color-hue: 227;
+  --_job-color-hue: 209;
+
+  // DEFAULT STATES OPACITY
+  --_opacity--default: 0.8;
+  --_opacity--hover: 1;
+  --_opacity--active: 1;
+  --_opacity--focus: 0.8;
+  --_opacity--disabled: 0.4;
+
+  // BASIC HSL COLORS VALUES
+  --_accent-color: var(--_accent-color-hue), 100%, 50%;
+  --_main-color: var(--_accent-color-hue), 20%, 99%;
+  --_contrast-color: var(--_accent-color-hue), 20%, 1%;
+  --_secondary-color: var(--_secondary-color-hue), 20%, 90%;
+  --_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
+  --_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
+  --_header-color: var(--_page-bg-color-hue), 20%, 90%;
+  --_positive-color: var(--_positive-color-hue), 60%, 40%;
+  --_negative-color: var(--_negative-color-hue) , 80%, 50%;
+  --_icon-color: var(--_icon-color-hue), 100%, 15%;
+
+  --_hold-color: var(--_hold-color-hue), 80%, 50%;
+  --_transfer-color: var(--_transfer-color-hue), 80%, 50%;
+  --_job-color: var(--_job-color-hue), 96%, 57%;
+
+  // MAIN COLORS
+  --accent-color: hsla(var(--_accent-color), 1);
+
+  --main-color: hsla(var(--_main-color), 1);
+
+  --contrast-color: hsla(var(--_contrast-color), 1);
+
+  --secondary-color: hsla(var(--_secondary-color), 1);
+  --secondary-color-50: hsla(var(--_secondary-color-50), 1);
+
+  // ICON COLORS
+  --icon-color-secondary: hsla(var(--_icon-color), 0.25);
+
+  --icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));
+
+  --icon-color-accent: var(--accent-color);
+  --icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
+  --icon-color-active: var(--icon-color--hover);
+  --icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
+  --icon-color-success: var(--true-color);
+  --icon-color-danger: var(--false-color);
+  --icon-color-transfer: var(--transfer-color);
+  --icon-color-hold: var(--hold-color);
+  --icon-color-secondary-50: var(--secondary-color-50);
+
+
+  --page-bg-color: hsla(var(--_page-bg-color), 1);
+  --header-color: hsla(var(--_header-color), 1);
+
+  --accent-secondary-color: hsla(var(--_accent-color), 0.3);
+
+  // SEMANTIC COLORS
+  --disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
+
+  --true-color: hsla(var(--_positive-color), var(--_opacity--default));
+  --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));
+
+  --false-color: hsla(var(--_negative-color), var(--_opacity--default));
+  --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));
+
+  --hold-color: hsla(var(--_hold-color), var(--_opacity--default));
+  --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));
+
+  --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
+  --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
+
+  --job-color: hsla(var(--_job-color), var(--_opacity--default));
+  --job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));
+
+  --link-color: hsla(205, 90%, 45%, 1);
+  --link--hover-color: hsla(205, 90%, 60%, 1);
+
+  // SUBORDINATE COLORS
+  --tag-bg-color: var(--accent-secondary-color);
+
+  // FORM STATES OPACITY
+  --form-opacity--default: var(--_opacity--default);
+  --form-opacity--hover: var(--_opacity--hover);
+  --form-opacity--active: var(--_opacity--active);
+  --form-opacity--focus: var(--_opacity--focus);
+  --form-opacity--disabled: var(--_opacity--disabled);
+
+  --form-placeholder-opacity: 0.6;
+  --form-placeholder-opacity--focus: 0.4;
+  --form-border-opacity--disabled: 0.05;
+
+  --form-opacity--ouline--default: 0.4;
+  --form-opacity--ouline--hover: 0.7;
+
+  // FORM COLORS
+  --form-input-color: var(--contrast-color); // user input color
+
+  --form-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+  --form-label--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
+  --form-label--active-color: hsla(var(--_contrast-color), var(--form-opacity--active));
+  --form-label--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+
+  --form-border-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+  --form-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
+  --form-border--disabled-color: hsla(var(--_contrast-color), var(--form-border-opacity--disabled));
+
+  --form-placeholder-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity));
+  --form-placeholder-color--focus: hsla(var(--_contrast-color), var(--form-placeholder-opacity--focus));
+  --form-placeholder-color--disabled: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+
+  // outline
+  --form-outline-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+
+  --form-outline-border-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
+  --form-outline-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
+
+  // TEXT OPACITY
+  --text-opacity--default: var(--_opacity--default);
+  --text-opacity----outline--default: 0.7;
+  --text-opacity--disabled: 0.5;
+
+  // TEXT COLORS
+  --text-primary-color: hsla(var(--_contrast-color), var(--text-opacity--default));
+  --text-outline-color: hsla(var(--_contrast-color), var(--text-opacity----outline--default));
+  --text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
+  --text--disabled-color: hsla(var(--_contrast-color), var(--text-opacity--disabled));
+
+  // CHAT COLORS
+  --_chat-client-color: var(--_accent-color);
+  --_chat-client-opacity: 0.2;
+  --_chat-agent-color: var(--_secondary-color-50);
+  --_chat-agent-opacity: 1;
+
+  --chat-client-message-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
+  --chat-agent-message-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
+  --chat-client-attachment-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
+  --chat-agent-attachment-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
+}

package/src/css/styleguide/colors/_palette.scss

@@ -353,6 +353,6 @@
   --grey-darken-4: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-4-grey), 1);
   --grey-darken-5: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-5-grey), 1);
 
-  --black: hsla(0, 0, 0, 1);
-  --white: hsla(0, 0, 100, 1);
+  --black: hsla(0, 0%, 0%, 1);
+  --white: hsla(0, 0%, 100%, 1);
 }

package/src/directives/clickaway/clickaway.js

@@ -1,52 +1,3 @@
- /* eslint-disable */
+import { vOnClickOutside } from '@vueuse/components';
 
-const HANDLER = '_vue_clickaway_handler';
-
-function bind(el, binding, vnode) {
-    unbind(el);
-
-    const vm = vnode.context;
-    const callback = binding.value;
-
-    // @NOTE: Vue binds directives in microtasks, while UI events are dispatched
-    //        in macrotasks. This causes the listener to be set up before
-    //        the "origin" click event (the event that lead to the binding of
-    //        the directive) arrives at the document root. To work around that,
-    //        we ignore events until the end of the "initial" macrotask.
-    // @REFERENCE: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
-    // @REFERENCE: https://github.com/simplesmiler/vue-clickaway/issues/8
-    let initialMacrotaskEnded = false;
-    setTimeout(function() {
-        initialMacrotaskEnded = true;
-    }, 0);
-
-    el[HANDLER] = function(ev) {
-        // @NOTE: this test used to be just `el.contains`, but working with path is better,
-        //        because it tests whether the element was there at the time of
-        //        the click, not whether it is there now, that the event has arrived
-        //        to the top.
-        // @NOTE: `.path` is non-standard, the standard way is `.composedPath()`
-        const path = ev.path || (ev.composedPath ? ev.composedPath() : undefined);
-        if (initialMacrotaskEnded && (path ? path.indexOf(el) < 0 : !el.contains(ev.target))) {
-            return callback.call(vm, ev);
-        }
-    };
-
-    document.documentElement.addEventListener('click', el[HANDLER], false);
-}
-
-function unbind(el) {
-    document.documentElement.removeEventListener('click', el[HANDLER], false);
-    delete el[HANDLER];
-}
-
-const clickaway = {
-    bind,
-    update (el, binding) {
-        if (binding.value === binding.oldValue) return;
-        bind(el, binding);
-    },
-    unbind,
-};
-
-export default clickaway;
+export default vOnClickOutside;

package/src/directives/index.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import clickaway from './clickaway/clickaway';
 
 const Directives = {

package/src/locale/en/en.js

@@ -334,6 +334,7 @@ export default {
         options: 'Options',
         score: 'Score',
       },
+      clearSelection: 'Clear selection',
     },
     deleteConfirmationPopup: {
       title: 'Confirm deletion',

package/src/locale/ru/ru.js

@@ -332,6 +332,7 @@ export default {
         options: 'Вариант',
         score: 'Бал',
       },
+      clearSelection: 'Очистить выбор',
     },
     deleteConfirmationPopup: {
       title: 'Подтвердите удаление',

package/src/locale/ua/ua.js

@@ -332,6 +332,7 @@ export default {
         options: 'Варіант',
         score: 'Бал',
       },
+      clearSelection: 'Очистити вибір',
     },
     deleteConfirmationPopup: {
       title: 'Підтвердіть видалення',

package/src/modules/AuditForm/components/audit-form-question-read-wrapper.vue

@@ -30,6 +30,11 @@
         mode="read"
         @change:result="!readonly && emit('change:result', $event)"
       ></component>
+      <div
+        v-show="isResult"
+        class="audit-form-question--clear"
+        @click="emit('change:result', {})"
+      >{{ $t('webitelUI.auditForm.clearSelection') }}</div>
     </section>
   </article>
 </template>
@@ -119,4 +124,9 @@ const isResult = computed(() => !isEmpty(props.result));
     }
   }
 }
+.audit-form-question--clear {
+  margin-top: var(--spacing-sm);;
+  cursor: pointer;
+  color: var(--link-color);
+}
 </style>

package/src/modules/AuditForm/components/questions/options/__tests__/audit-form-question-options-write-row.spec.js

@@ -17,7 +17,7 @@ describe('AuditFormQuestionOptionsWriteRow', () => {
       },
     });
     const deleteBtn = wrapper.findComponent({ name: 'wt-icon-btn' });
-    expect(deleteBtn.props().icon).toBe('bucket');
+    expect(deleteBtn.attributes().icon).toBe('bucket');
     deleteBtn.vm.$emit('click');
     expect(wrapper.emitted().delete).toBeTruthy();
   });

package/src/modules/QueryFilters/components/abstract-api-filter.vue

@@ -1,12 +1,12 @@
 <template>
   <wt-select
+    v-bind="$attrs"
     :value="filterSchema.value"
     :label="label"
     :track-by="filterSchema.storedProp"
     :multiple="filterSchema.multiple"
     :search-method="search"
     :close-on-select="filterSchema.closeOnSelect"
-    v-bind="$attrs"
     @input="setValue({ filter: filterQuery, value: $event })"
     @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
     @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"

package/src/modules/QueryFilters/components/abstract-enum-filter.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-select
+    v-bind="$attrs"
     :value="value"
     :options="localizedOptions"
     :label="label"
     :track-by="filterSchema.storedProp"
     :multiple="filterSchema.multiple"
-    v-bind="$attrs"
     @input="setValue({ filter: filterQuery, value: $event })"
     @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
     @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"