@webitel/ui-sdk 24.8.28 → 24.8.30

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 (6) hide show
  1. package/dist/ui-sdk.css +1 -1
  2. package/dist/ui-sdk.js +2473 -2467
  3. package/dist/ui-sdk.umd.cjs +14 -14
  4. package/package.json +1 -1
  5. package/src/components/wt-context-menu/wt-context-menu.vue +40 -36
  6. package/src/components/wt-tooltip/wt-tooltip.vue +10 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/ui-sdk",
3
- "version": "24.8.28",
3
+ "version": "24.8.30",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vite",
package/src/components/wt-context-menu/wt-context-menu.vue CHANGED
@@ -6,6 +6,7 @@
6
6
  class="wt-context-menu"
7
7
  placement="bottom-end"
8
8
  popper-class="wt-context-menu__floating-wrapper"
9
+ @update:visible="visible = $event"
9
10
  >
10
11
  <template #activator>
11
12
  <slot name="activator" />
@@ -20,7 +21,6 @@
20
21
  :key="index"
21
22
  class="wt-context-menu__option-wrapper"
22
23
  >
23
- <!-- <a> click.prevent prevents redirect to # -->
24
24
  <a
25
25
  :class="[
26
26
  { 'wt-context-menu__option--disabled': option.disabled },
@@ -43,42 +43,46 @@
43
43
  </template>
44
44
 
45
45
  <script setup>
46
- const props = defineProps({
47
- options: {
48
- type: Array,
49
- required: true,
50
- description: '[{ text, disabled, ... anything you need }]',
51
- },
52
- visible: {
53
- type: Boolean,
54
- },
55
- width: {
56
- type: [String],
57
- default: 'auto',
58
- },
59
- minWidth: {
60
- type: [String],
61
- default: '160px',
62
- },
63
- maxWidth: {
64
- type: [String],
65
- default: '300px',
66
- },
67
- disabled: {
68
- type: Boolean,
69
- default: false,
70
- },
71
- });
72
-
73
- const emit = defineEmits([
74
- 'click',
75
- ]);
76
-
77
- function handleOptionClick({ option, index, hide }) {
78
- emit('click', { option, index });
79
- hide();
80
- }
46
+ import { ref, watch } from 'vue';
47
+
48
+ const props = defineProps({
49
+ options: {
50
+ type: Array,
51
+ required: true,
52
+ description: '[{ text, disabled, ... anything you need }]',
53
+ },
54
+ visible: {
55
+ type: Boolean,
56
+ default: false,
57
+ },
58
+ width: {
59
+ type: [String],
60
+ default: 'auto',
61
+ },
62
+ minWidth: {
63
+ type: [String],
64
+ default: '160px',
65
+ },
66
+ maxWidth: {
67
+ type: [String],
68
+ default: '300px',
69
+ },
70
+ disabled: {
71
+ type: Boolean,
72
+ default: false,
73
+ },
74
+ });
75
+
76
+ const emit = defineEmits([
77
+ 'click',
78
+ 'update:visible'
79
+ ]);
81
80
 
81
+
82
+ function handleOptionClick({ option, index, hide }) {
83
+ emit('click', { option, index });
84
+ hide();
85
+ }
82
86
  </script>
83
87
 
84
88
  <style lang="scss">
package/src/components/wt-tooltip/wt-tooltip.vue CHANGED
@@ -60,23 +60,27 @@ const props = defineProps({
60
60
  },
61
61
  });
62
62
 
63
+ const emit = defineEmits(['update:visible']);
64
+
63
65
  const activator = ref(null);
64
66
  const floating = ref(null);
67
+ const isVisible = ref(props.visible);
65
68
 
66
- const isVisible = ref(false);
69
+ const emitVisibilityChange = () => {
70
+ emit('update:visible', isVisible.value);
71
+ };
67
72
 
68
73
  const showTooltip = (event = {}) => {
69
74
  if (props.disabled || isVisible.value) return;
70
-
71
75
  isVisible.value = true;
72
-
73
- // https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/components/Popper.ts#L884
74
- event.usedByTooltip = true;
76
+ event.usedByTooltip = true; // https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/components/Popper.ts#L884
77
+ emitVisibilityChange();
75
78
  };
76
79
 
77
80
  const hideTooltip = (event = {}) => {
78
81
  if (event.usedByTooltip) return;
79
82
  isVisible.value = false;
83
+ emitVisibilityChange();
80
84
  };
81
85
 
82
86
  // https://floating-ui.com/docs/misc#clipping
@@ -102,7 +106,7 @@ useTooltipTriggerSubscriptions({
102
106
  hide: hideTooltip,
103
107
  });
104
108
 
105
- watch(props.visible, (value) => {
109
+ watch(() => props.visible, (value) => {
106
110
  if (value) showTooltip();
107
111
  else hideTooltip();
108
112
  });