@milaboratories/graph-maker 1.1.176 → 1.1.178

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 (197) hide show
  1. package/dist/components/AesButton.vue.d.ts +6 -6
  2. package/dist/components/AesButton.vue.js +2 -2
  3. package/dist/components/AesButton.vue.js.map +1 -1
  4. package/dist/components/AesSettings/AesDataMappingContinuous.vue.js +14 -14
  5. package/dist/components/AesSettings/AesDataMappingContinuous.vue.js.map +1 -1
  6. package/dist/components/AesSettings/AesDataMappingDiscrete.vue.js +39 -38
  7. package/dist/components/AesSettings/AesDataMappingDiscrete.vue.js.map +1 -1
  8. package/dist/components/AesSettings/FixedColorsList.vue.d.ts +1 -1
  9. package/dist/components/AesSettings/FixedColorsList.vue.js +13 -12
  10. package/dist/components/AesSettings/FixedColorsList.vue.js.map +1 -1
  11. package/dist/components/AesSettings/FixedDotShapeList.vue.js +10 -9
  12. package/dist/components/AesSettings/FixedDotShapeList.vue.js.map +1 -1
  13. package/dist/components/AesSettings/FixedLineTypeList.vue.js +12 -11
  14. package/dist/components/AesSettings/FixedLineTypeList.vue.js.map +1 -1
  15. package/dist/components/AesSettings/FormWrapper.vue.js +2 -2
  16. package/dist/components/AesSettings/FormWrapper.vue.js.map +1 -1
  17. package/dist/components/AesSettings/PalettesForm.vue.js +54 -50
  18. package/dist/components/AesSettings/PalettesForm.vue.js.map +1 -1
  19. package/dist/components/AesSettings/types.d.ts +9 -9
  20. package/dist/components/BtnIconGroup.vue.js +10 -11
  21. package/dist/components/BtnIconGroup.vue.js.map +1 -1
  22. package/dist/components/Chart.vue.js +6 -8
  23. package/dist/components/Chart.vue.js.map +1 -1
  24. package/dist/components/CollapsableBlock.vue.js +2 -2
  25. package/dist/components/CollapsableBlock.vue.js.map +1 -1
  26. package/dist/components/DendroTable.vue.js +2 -2
  27. package/dist/components/DendroTable.vue.js.map +1 -1
  28. package/dist/components/DendroTooltip.vue.js +15 -14
  29. package/dist/components/DendroTooltip.vue.js.map +1 -1
  30. package/dist/components/DragAndDrop/DnDBasketChip.vue.js +2 -2
  31. package/dist/components/DragAndDrop/DnDBasketChip.vue.js.map +1 -1
  32. package/dist/components/DragAndDrop/DnDRangeChip.vue.d.ts +12 -3
  33. package/dist/components/DragAndDrop/DnDRangeChip.vue.js +4 -4
  34. package/dist/components/DragAndDrop/DnDRangeChip.vue.js.map +1 -1
  35. package/dist/components/DragAndDrop/DndBasket.vue.js +41 -41
  36. package/dist/components/DragAndDrop/DndBasket.vue.js.map +1 -1
  37. package/dist/components/DragAndDrop/DndChip.vue.js.map +1 -1
  38. package/dist/components/DragAndDrop/DndDoubleChip.vue.js +2 -2
  39. package/dist/components/DragAndDrop/DndDoubleChip.vue.js.map +1 -1
  40. package/dist/components/DragAndDrop/types.d.ts +1 -1
  41. package/dist/components/LassoControls/index.vue.js +4 -4
  42. package/dist/components/LassoControls/index.vue.js.map +1 -1
  43. package/dist/components/Loading.vue.js +8 -7
  44. package/dist/components/Loading.vue.js.map +1 -1
  45. package/dist/components/MultiselectButton.vue.js +28 -27
  46. package/dist/components/MultiselectButton.vue.js.map +1 -1
  47. package/dist/components/PanelModal.vue.js.map +1 -1
  48. package/dist/components/PlColorSlider.vue.js +12 -12
  49. package/dist/components/PlColorSlider.vue.js.map +1 -1
  50. package/dist/components/PlColorSliderThumb.vue.js +1 -3
  51. package/dist/components/PlColorSliderThumb.vue.js.map +1 -1
  52. package/dist/components/Popup.vue.d.ts +2 -0
  53. package/dist/components/Popup.vue.js +21 -21
  54. package/dist/components/Popup.vue.js.map +1 -1
  55. package/dist/components/ReorderForm.vue.js +20 -17
  56. package/dist/components/ReorderForm.vue.js.map +1 -1
  57. package/dist/components/SettingsTabs/icons/DeleteChartIcon.vue.js.map +1 -1
  58. package/dist/components/SettingsTabs/icons/LogIcon.vue.js.map +1 -1
  59. package/dist/components/SettingsTabs/icons/SettingsIcon.vue.js.map +1 -1
  60. package/dist/components/SettingsTabs/index.vue.js.map +1 -1
  61. package/dist/components/Zoom/ZoomInput.vue.js +11 -11
  62. package/dist/components/Zoom/ZoomInput.vue.js.map +1 -1
  63. package/dist/components/Zoom/index.vue.js.map +1 -1
  64. package/dist/composition/useComponent.js.map +1 -1
  65. package/dist/constantsAesthetic.js.map +1 -1
  66. package/dist/constantsCommon.d.ts +3 -1
  67. package/dist/constantsCommon.js +5 -5
  68. package/dist/constantsCommon.js.map +1 -1
  69. package/dist/dataBindAes.js +4 -2
  70. package/dist/dataBindAes.js.map +1 -1
  71. package/dist/forms/AxesSettingsForm/BubbleAxesSettingsForm.vue.js +35 -35
  72. package/dist/forms/AxesSettingsForm/BubbleAxesSettingsForm.vue.js.map +1 -1
  73. package/dist/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue.js +49 -47
  74. package/dist/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue.js.map +1 -1
  75. package/dist/forms/AxesSettingsForm/HeatmapAxesSettingsForm.vue.js +53 -53
  76. package/dist/forms/AxesSettingsForm/HeatmapAxesSettingsForm.vue.js.map +1 -1
  77. package/dist/forms/AxesSettingsForm/HistogramAxesSettingsForm.vue.js +37 -37
  78. package/dist/forms/AxesSettingsForm/HistogramAxesSettingsForm.vue.js.map +1 -1
  79. package/dist/forms/AxesSettingsForm/ScatterplotAxesSettingsForm.vue.js +38 -38
  80. package/dist/forms/AxesSettingsForm/ScatterplotAxesSettingsForm.vue.js.map +1 -1
  81. package/dist/forms/AxesSettingsForm/index.vue.js.map +1 -1
  82. package/dist/forms/DataMappingForm/BubbleForm.vue.js +4 -4
  83. package/dist/forms/DataMappingForm/BubbleForm.vue.js.map +1 -1
  84. package/dist/forms/DataMappingForm/DendroForm.vue.js +1 -1
  85. package/dist/forms/DataMappingForm/DendroForm.vue.js.map +1 -1
  86. package/dist/forms/DataMappingForm/DiscreteForm.vue.js.map +1 -1
  87. package/dist/forms/DataMappingForm/HeatmapForm.vue.js +2 -2
  88. package/dist/forms/DataMappingForm/HeatmapForm.vue.js.map +1 -1
  89. package/dist/forms/DataMappingForm/HistogramForm.vue.js.map +1 -1
  90. package/dist/forms/DataMappingForm/Layout/FormLayout.vue.js.map +1 -1
  91. package/dist/forms/DataMappingForm/Layout/MandatoryOptions.vue.js.map +1 -1
  92. package/dist/forms/DataMappingForm/Layout/OptionsList.vue.js.map +1 -1
  93. package/dist/forms/DataMappingForm/ScatterplotForm.vue.js +4 -4
  94. package/dist/forms/DataMappingForm/ScatterplotForm.vue.js.map +1 -1
  95. package/dist/forms/DataMappingForm/ScatterplotUmapForm.vue.js +4 -4
  96. package/dist/forms/DataMappingForm/ScatterplotUmapForm.vue.js.map +1 -1
  97. package/dist/forms/DataMappingForm/index.vue.js.map +1 -1
  98. package/dist/forms/DataMappingForm/useBaskets.js.map +1 -1
  99. package/dist/forms/DataMappingForm/utils.d.ts +1 -1
  100. package/dist/forms/DataMappingForm/utils.js +34 -34
  101. package/dist/forms/DataMappingForm/utils.js.map +1 -1
  102. package/dist/forms/LayersForm/AesSelector.vue.js +18 -25
  103. package/dist/forms/LayersForm/AesSelector.vue.js.map +1 -1
  104. package/dist/forms/LayersForm/DotSizeSelector.vue.d.ts +2 -0
  105. package/dist/forms/LayersForm/DotSizeSelector.vue.js +23 -23
  106. package/dist/forms/LayersForm/DotSizeSelector.vue.js.map +1 -1
  107. package/dist/forms/LayersForm/Layer/Bubble.vue.js +32 -34
  108. package/dist/forms/LayersForm/Layer/Bubble.vue.js.map +1 -1
  109. package/dist/forms/LayersForm/Layer/Dendro.vue.js +6 -6
  110. package/dist/forms/LayersForm/Layer/Dendro.vue.js.map +1 -1
  111. package/dist/forms/LayersForm/Layer/discrete/Bar.vue.js +6 -6
  112. package/dist/forms/LayersForm/Layer/discrete/Bar.vue.js.map +1 -1
  113. package/dist/forms/LayersForm/Layer/discrete/BinnedDots.vue.js +3 -3
  114. package/dist/forms/LayersForm/Layer/discrete/BinnedDots.vue.js.map +1 -1
  115. package/dist/forms/LayersForm/Layer/discrete/Boxplot.vue.js +3 -3
  116. package/dist/forms/LayersForm/Layer/discrete/Boxplot.vue.js.map +1 -1
  117. package/dist/forms/LayersForm/Layer/discrete/Errorbar.vue.js +9 -9
  118. package/dist/forms/LayersForm/Layer/discrete/Errorbar.vue.js.map +1 -1
  119. package/dist/forms/LayersForm/Layer/discrete/JitteredDots.vue.js +3 -3
  120. package/dist/forms/LayersForm/Layer/discrete/JitteredDots.vue.js.map +1 -1
  121. package/dist/forms/LayersForm/Layer/discrete/Line.vue.js +8 -8
  122. package/dist/forms/LayersForm/Layer/discrete/Line.vue.js.map +1 -1
  123. package/dist/forms/LayersForm/Layer/discrete/Logo.vue.js +3 -3
  124. package/dist/forms/LayersForm/Layer/discrete/Logo.vue.js.map +1 -1
  125. package/dist/forms/LayersForm/Layer/discrete/Sina.vue.js +3 -3
  126. package/dist/forms/LayersForm/Layer/discrete/Sina.vue.js.map +1 -1
  127. package/dist/forms/LayersForm/Layer/discrete/StackedArea.vue.js +9 -9
  128. package/dist/forms/LayersForm/Layer/discrete/StackedArea.vue.js.map +1 -1
  129. package/dist/forms/LayersForm/Layer/discrete/StackedBar.vue.js +6 -6
  130. package/dist/forms/LayersForm/Layer/discrete/StackedBar.vue.js.map +1 -1
  131. package/dist/forms/LayersForm/Layer/discrete/Violin.vue.js +3 -3
  132. package/dist/forms/LayersForm/Layer/discrete/Violin.vue.js.map +1 -1
  133. package/dist/forms/LayersForm/Layer/discrete/utils.js.map +1 -1
  134. package/dist/forms/LayersForm/Layer/heatmap/Heatmap.vue.js +23 -23
  135. package/dist/forms/LayersForm/Layer/heatmap/Heatmap.vue.js.map +1 -1
  136. package/dist/forms/LayersForm/Layer/heatmap/HeatmapAnnotations.vue.js +6 -6
  137. package/dist/forms/LayersForm/Layer/heatmap/HeatmapAnnotations.vue.js.map +1 -1
  138. package/dist/forms/LayersForm/Layer/heatmap/HeatmapClustered.vue.js +28 -28
  139. package/dist/forms/LayersForm/Layer/heatmap/HeatmapClustered.vue.js.map +1 -1
  140. package/dist/forms/LayersForm/Layer/histogram/Bins.vue.js +3 -3
  141. package/dist/forms/LayersForm/Layer/histogram/Bins.vue.js.map +1 -1
  142. package/dist/forms/LayersForm/Layer/scatterplot/Curve.vue.js.map +1 -1
  143. package/dist/forms/LayersForm/Layer/scatterplot/Scatter.vue.js.map +1 -1
  144. package/dist/forms/LayersForm/Layer/scatterplot-umap/Scatter.vue.js +2 -2
  145. package/dist/forms/LayersForm/Layer/scatterplot-umap/Scatter.vue.js.map +1 -1
  146. package/dist/forms/LayersForm/index.vue.js +56 -52
  147. package/dist/forms/LayersForm/index.vue.js.map +1 -1
  148. package/dist/forms/LogForm.vue.js.map +1 -1
  149. package/dist/forms/SettingsForm.vue.js.map +1 -1
  150. package/dist/forms/StatisticsForm/DiscreteStatisticsForm.vue.js +14 -14
  151. package/dist/forms/StatisticsForm/DiscreteStatisticsForm.vue.js.map +1 -1
  152. package/dist/forms/StatisticsForm/ScatterplotStatisticsForm.vue.js.map +1 -1
  153. package/dist/forms/StatisticsForm/index.vue.js.map +1 -1
  154. package/dist/forms/TemplateForm.vue.js +59 -52
  155. package/dist/forms/TemplateForm.vue.js.map +1 -1
  156. package/dist/forms/index.js.map +1 -1
  157. package/dist/icons/BinnedDotsIcon.vue.js.map +1 -1
  158. package/dist/icons/BoxplotAndBinnedIcon.vue.js.map +1 -1
  159. package/dist/icons/BoxplotAndJitterIcon.vue.js.map +1 -1
  160. package/dist/icons/BoxplotIcon.vue.js.map +1 -1
  161. package/dist/icons/EditIcon.vue.js.map +1 -1
  162. package/dist/icons/FrameLeft.vue.js.map +1 -1
  163. package/dist/icons/HeatmapAnnotation.vue.js.map +1 -1
  164. package/dist/icons/LineAndErrorbarIcon.vue.js.map +1 -1
  165. package/dist/icons/LogoIcon.vue.js.map +1 -1
  166. package/dist/icons/PlusIcon.vue.js.map +1 -1
  167. package/dist/icons/SinaIcon.vue.js.map +1 -1
  168. package/dist/icons/StackedAreaIcon.vue.js.map +1 -1
  169. package/dist/index.vue.js +4 -4
  170. package/dist/index.vue.js.map +1 -1
  171. package/dist/store.d.ts +1 -1
  172. package/dist/store.js +2 -2
  173. package/dist/store.js.map +1 -1
  174. package/dist/types.d.ts +1 -1
  175. package/dist/utils/addFixedOptionsToState.js.map +1 -1
  176. package/dist/utils/calculateDiscreteGroups.js.map +1 -1
  177. package/dist/utils/createChartSettingsForRender/composeBubbleSettings.js.map +1 -1
  178. package/dist/utils/createChartSettingsForRender/composeChartSettings.js.map +1 -1
  179. package/dist/utils/createChartSettingsForRender/composeDendroSettings.js.map +1 -1
  180. package/dist/utils/createChartSettingsForRender/composeDiscreteSettings.js +1 -1
  181. package/dist/utils/createChartSettingsForRender/composeDiscreteSettings.js.map +1 -1
  182. package/dist/utils/createChartSettingsForRender/composeHeatmapSettings.js.map +1 -1
  183. package/dist/utils/createChartSettingsForRender/composeHistogramSettings.js.map +1 -1
  184. package/dist/utils/createChartSettingsForRender/composeScatterplotSettings.js.map +1 -1
  185. package/dist/utils/createChartSettingsForRender/composeScatterplotUmapSettings.js +1 -1
  186. package/dist/utils/createChartSettingsForRender/composeScatterplotUmapSettings.js.map +1 -1
  187. package/dist/utils/createChartSettingsForRender/getAxesDataFromForms.js +24 -24
  188. package/dist/utils/createChartSettingsForRender/getAxesDataFromForms.js.map +1 -1
  189. package/dist/utils/createChartSettingsForRender/getLayersDataFromForms.js.map +1 -1
  190. package/dist/utils/getPopupHeightForFixedAesList.js.map +1 -1
  191. package/dist/utils/getStatisticsOptions.js.map +1 -1
  192. package/dist/utils/getUsedAesInMapping.js +1 -1
  193. package/dist/utils/getUsedAesInMapping.js.map +1 -1
  194. package/dist/utils/loadDefaultSources.js.map +1 -1
  195. package/dist/utils/loadUniqueValuesToSave.js.map +1 -1
  196. package/dist/utils/saveToFile.js.map +1 -1
  197. package/package.json +5 -3
@@ -43,20 +43,20 @@ const N = { class: "lasso-controls-container" }, V = { class: "lasso-buttons-gro
43
43
  r("div", V, [
44
44
  o[0] || (o[0] = r("div", { class: "lasso-controls-border" }, null, -1)),
45
45
  l(n(c), {
46
- onClick: i,
47
46
  class: h({
48
47
  "lasso-button-selected": ((s = t.value) == null ? void 0 : s.mode) === "pen" || !t.value,
49
48
  "lasso-button-not-selected": ((v = t.value) == null ? void 0 : v.mode) !== "pen" && t.value
50
49
  }),
51
- icon: "cursor-pointer"
50
+ icon: "cursor-pointer",
51
+ onClick: i
52
52
  }, null, 8, ["class"]),
53
53
  l(n(c), {
54
- onClick: u,
55
54
  class: h({
56
55
  "lasso-button-selected": ((b = t.value) == null ? void 0 : b.mode) === "selection",
57
56
  "lasso-button-not-selected": ((k = t.value) == null ? void 0 : k.mode) !== "selection"
58
57
  }),
59
- icon: "pen-tool"
58
+ icon: "pen-tool",
59
+ onClick: u
60
60
  }, null, 8, ["class"]),
61
61
  o[1] || (o[1] = r("div", { class: "lasso-controls-separator" }, null, -1)),
62
62
  l(n(c), {
@@ -1 +1 @@
1
- {"version":3,"file":"index.vue.js","sources":["../../../src/components/LassoControls/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ChartInterface, SCATTERPLOT_LASSO_EVENTS } from '@milaboratories/miplots4';\nimport { PlBtnGhost, PlMaskIcon24 } from '@platforma-sdk/ui-vue';\nimport { computed, onMounted, onUnmounted } from 'vue';\nimport { useStore } from '../../store';\n\nconst props = defineProps<{\n chartRef: ChartInterface | null\n}>();\n\nconst store = useStore();\nconst controlsState = computed(() => store.value.reactive.lassoControlsState);\n\nfunction setPen() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.selectMode, 'pen')\n}\nfunction setSelection() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.selectMode, 'selection')\n}\nfunction back() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.back, null);\n}\nfunction forward() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.forward, null);\n}\nfunction deletePolygon() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.delete, null)\n}\n\nfunction onKeyDown(e:KeyboardEvent) {\n if (e.key === 'p') {\n setPen();\n }\n if (e.key === 'v') {\n setSelection();\n }\n if (controlsState.value?.backEnabled && e.key === 'z' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {\n back();\n }\n if (controlsState.value?.forwardEnabled && e.key === 'z' && (e.ctrlKey || e.metaKey) && e.shiftKey) {\n forward()\n }\n}\nonMounted(() => {\n document.addEventListener('keydown', onKeyDown);\n});\nonUnmounted(() => {\n document.removeEventListener('keydown', onKeyDown);\n});\n\n</script>\n<template>\n <div class=\"lasso-controls-container\">\n <div class=\"lasso-buttons-group\">\n <div class=\"lasso-controls-border\"/>\n <pl-btn-ghost\n @click=\"setPen\"\n :class=\"{\n 'lasso-button-selected': controlsState?.mode === 'pen' || !controlsState,\n 'lasso-button-not-selected': controlsState?.mode !== 'pen' && controlsState,\n }\"\n icon=\"cursor-pointer\"\n />\n <pl-btn-ghost\n @click=\"setSelection\"\n :class=\"{\n 'lasso-button-selected': controlsState?.mode === 'selection',\n 'lasso-button-not-selected': controlsState?.mode !== 'selection',\n }\"\n icon=\"pen-tool\"\n />\n <div class=\"lasso-controls-separator\"/>\n <pl-btn-ghost\n :disabled=\"!controlsState?.backEnabled\"\n icon=\"arrow-left-curved\"\n @click=\"back\"\n />\n <pl-btn-ghost\n :disabled=\"!controlsState?.forwardEnabled\"\n @click=\"forward\"\n >\n <template #icon>\n <PlMaskIcon24 name=\"arrow-left-curved\" :style=\"{transform: 'scale(-1, 1)'}\"/>\n </template>\n </pl-btn-ghost>\n <div class=\"lasso-controls-separator\"/>\n <pl-btn-ghost\n :disabled=\"!controlsState?.deleteEnabled\"\n icon=\"delete-bin\"\n @click=\"deletePolygon\"\n />\n </div>\n <div class=\"lasso-hint\">\n Hold Cmd/Ctrl and left-click to pan the canvas\n </div>\n </div>\n</template>\n"],"names":["props","__props","store","useStore","controlsState","computed","setPen","_a","SCATTERPLOT_LASSO_EVENTS","setSelection","back","forward","deletePolygon","onKeyDown","_b","onMounted","onUnmounted","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createVNode","_unref","PlBtnGhost","_normalizeClass","_c","_d","_e","_f","PlMaskIcon24","_g","_cache"],"mappings":"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"}
1
+ {"version":3,"file":"index.vue.js","sources":["../../../src/components/LassoControls/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ChartInterface } from '@milaboratories/miplots4';\nimport { SCATTERPLOT_LASSO_EVENTS } from '@milaboratories/miplots4';\nimport { PlBtnGhost, PlMaskIcon24 } from '@platforma-sdk/ui-vue';\nimport { computed, onMounted, onUnmounted } from 'vue';\nimport { useStore } from '../../store';\n\nconst props = defineProps<{\n chartRef: ChartInterface | null;\n}>();\n\nconst store = useStore();\nconst controlsState = computed(() => store.value.reactive.lassoControlsState);\n\nfunction setPen() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.selectMode, 'pen');\n}\nfunction setSelection() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.selectMode, 'selection');\n}\nfunction back() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.back, null);\n}\nfunction forward() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.forward, null);\n}\nfunction deletePolygon() {\n props.chartRef?.updateChartState(SCATTERPLOT_LASSO_EVENTS.delete, null);\n}\n\nfunction onKeyDown(e: KeyboardEvent) {\n if (e.key === 'p') {\n setPen();\n }\n if (e.key === 'v') {\n setSelection();\n }\n if (controlsState.value?.backEnabled && e.key === 'z' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {\n back();\n }\n if (controlsState.value?.forwardEnabled && e.key === 'z' && (e.ctrlKey || e.metaKey) && e.shiftKey) {\n forward();\n }\n}\nonMounted(() => {\n document.addEventListener('keydown', onKeyDown);\n});\nonUnmounted(() => {\n document.removeEventListener('keydown', onKeyDown);\n});\n\n</script>\n<template>\n <div class=\"lasso-controls-container\">\n <div class=\"lasso-buttons-group\">\n <div class=\"lasso-controls-border\"/>\n <PlBtnGhost\n :class=\"{\n 'lasso-button-selected': controlsState?.mode === 'pen' || !controlsState,\n 'lasso-button-not-selected': controlsState?.mode !== 'pen' && controlsState,\n }\"\n icon=\"cursor-pointer\"\n @click=\"setPen\"\n />\n <PlBtnGhost\n :class=\"{\n 'lasso-button-selected': controlsState?.mode === 'selection',\n 'lasso-button-not-selected': controlsState?.mode !== 'selection',\n }\"\n icon=\"pen-tool\"\n @click=\"setSelection\"\n />\n <div class=\"lasso-controls-separator\"/>\n <PlBtnGhost\n :disabled=\"!controlsState?.backEnabled\"\n icon=\"arrow-left-curved\"\n @click=\"back\"\n />\n <PlBtnGhost\n :disabled=\"!controlsState?.forwardEnabled\"\n @click=\"forward\"\n >\n <template #icon>\n <PlMaskIcon24 name=\"arrow-left-curved\" :style=\"{transform: 'scale(-1, 1)'}\"/>\n </template>\n </PlBtnGhost>\n <div class=\"lasso-controls-separator\"/>\n <PlBtnGhost\n :disabled=\"!controlsState?.deleteEnabled\"\n icon=\"delete-bin\"\n @click=\"deletePolygon\"\n />\n </div>\n <div class=\"lasso-hint\">\n Hold Cmd/Ctrl and left-click to pan the canvas\n </div>\n </div>\n</template>\n"],"names":["props","__props","store","useStore","controlsState","computed","setPen","_a","SCATTERPLOT_LASSO_EVENTS","setSelection","back","forward","deletePolygon","onKeyDown","_b","onMounted","onUnmounted","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createVNode","_unref","PlBtnGhost","_normalizeClass","_c","_d","_e","_f","PlMaskIcon24","_g","_cache"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
- import { defineComponent as l, createElementBlock as o, openBlock as i, normalizeStyle as C, createStaticVNode as a } from "vue";
2
- const r = /* @__PURE__ */ l({
1
+ import { defineComponent as l, createElementBlock as i, openBlock as C, normalizeStyle as a, createStaticVNode as d } from "vue";
2
+ const s = /* @__PURE__ */ l({
3
3
  __name: "Loading",
4
4
  props: {
5
5
  top: { default: 0 },
@@ -7,16 +7,17 @@ const r = /* @__PURE__ */ l({
7
7
  right: { default: 0 },
8
8
  bottom: { default: 0 }
9
9
  },
10
- setup(t) {
11
- return (d, e) => (i(), o("div", {
10
+ setup(o) {
11
+ const t = o;
12
+ return (r, e) => (C(), i("div", {
12
13
  class: "graph-maker__loading",
13
- style: C({ top: `${t.top}px`, bottom: `${t.bottom}px`, right: `${t.right}px`, left: `${t.left}px` })
14
+ style: a({ top: `${t.top}px`, bottom: `${t.bottom}px`, right: `${t.right}px`, left: `${t.left}px` })
14
15
  }, [...e[0] || (e[0] = [
15
- a('<div class="loading-picture"><svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M36.0197 2.29384C37.0053 1.76506 37.7157 1.45481 38.4537 1.29931C39.4734 1.08447 40.5266 1.08447 41.5463 1.29931C42.2843 1.45481 42.9947 1.76506 43.9803 2.29384C44.7026 2.66301 45.5542 3.14998 46.6565 3.78023L68.4201 16.2247C69.3757 16.7711 70.1409 17.2086 70.7708 17.5978C71.8362 18.2367 72.5158 18.7183 73.0579 19.3166C73.7667 20.0989 74.3023 21.0219 74.6298 22.0253C75 23.1595 75 24.4276 75 26.9639V53.0362C75 55.5725 75 56.8407 74.6298 57.9748C74.3023 58.9782 73.7667 59.9012 73.0579 60.6835C72.5154 61.2822 71.8353 61.764 70.7688 62.4035C70.1393 62.7924 69.3748 63.2295 68.4203 63.7753L46.6565 76.2198C45.555 76.8497 44.7037 77.3364 43.9817 77.7055C42.9954 78.2347 42.2847 78.5452 41.5463 78.7008C40.5266 78.9156 39.4734 78.9156 38.4537 78.7008C37.7153 78.5452 37.0045 78.2347 36.0182 77.7054C35.2962 77.3364 34.445 76.8497 33.3436 76.2199L11.5799 63.7754C10.6253 63.2295 9.86069 62.7924 9.23115 62.4035C8.16466 61.764 7.48457 61.2822 6.94208 60.6835C6.23334 59.9012 5.6977 58.9782 5.37018 57.9748C5 56.8407 5 55.5725 5 53.0362V26.9639C5 24.4276 5 23.1595 5.37018 22.0253C5.6977 21.0219 6.23334 20.0989 6.94208 19.3166C7.48422 18.7183 8.16379 18.2367 9.22911 17.5978C9.85904 17.2086 10.6242 16.7711 11.5799 16.2247L33.3435 3.78023C34.4457 3.14998 35.2974 2.663 36.0197 2.29384ZM10 34.9971V24.9907H37.4546V34.9971H10ZM10 45.0036V40.0003H37.4546V45.0036H10ZM37.4546 72.9139L10 57.1541V50.0069H37.4546V72.9139ZM65.0189 60.0134L42.5455 72.9138V60.0134H65.0189ZM70 24.9907V55.0101H42.5455V24.9907H70ZM14.98 19.9874L40 5.62505L65.0201 19.9874H14.98Z" fill="#E1E3EB"></path></svg><div class="loading-progress-bar"><div class="moving-dash"></div></div></div>', 1)
16
+ d('<div class="loading-picture"><svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M36.0197 2.29384C37.0053 1.76506 37.7157 1.45481 38.4537 1.29931C39.4734 1.08447 40.5266 1.08447 41.5463 1.29931C42.2843 1.45481 42.9947 1.76506 43.9803 2.29384C44.7026 2.66301 45.5542 3.14998 46.6565 3.78023L68.4201 16.2247C69.3757 16.7711 70.1409 17.2086 70.7708 17.5978C71.8362 18.2367 72.5158 18.7183 73.0579 19.3166C73.7667 20.0989 74.3023 21.0219 74.6298 22.0253C75 23.1595 75 24.4276 75 26.9639V53.0362C75 55.5725 75 56.8407 74.6298 57.9748C74.3023 58.9782 73.7667 59.9012 73.0579 60.6835C72.5154 61.2822 71.8353 61.764 70.7688 62.4035C70.1393 62.7924 69.3748 63.2295 68.4203 63.7753L46.6565 76.2198C45.555 76.8497 44.7037 77.3364 43.9817 77.7055C42.9954 78.2347 42.2847 78.5452 41.5463 78.7008C40.5266 78.9156 39.4734 78.9156 38.4537 78.7008C37.7153 78.5452 37.0045 78.2347 36.0182 77.7054C35.2962 77.3364 34.445 76.8497 33.3436 76.2199L11.5799 63.7754C10.6253 63.2295 9.86069 62.7924 9.23115 62.4035C8.16466 61.764 7.48457 61.2822 6.94208 60.6835C6.23334 59.9012 5.6977 58.9782 5.37018 57.9748C5 56.8407 5 55.5725 5 53.0362V26.9639C5 24.4276 5 23.1595 5.37018 22.0253C5.6977 21.0219 6.23334 20.0989 6.94208 19.3166C7.48422 18.7183 8.16379 18.2367 9.22911 17.5978C9.85904 17.2086 10.6242 16.7711 11.5799 16.2247L33.3435 3.78023C34.4457 3.14998 35.2974 2.663 36.0197 2.29384ZM10 34.9971V24.9907H37.4546V34.9971H10ZM10 45.0036V40.0003H37.4546V45.0036H10ZM37.4546 72.9139L10 57.1541V50.0069H37.4546V72.9139ZM65.0189 60.0134L42.5455 72.9138V60.0134H65.0189ZM70 24.9907V55.0101H42.5455V24.9907H70ZM14.98 19.9874L40 5.62505L65.0201 19.9874H14.98Z" fill="#E1E3EB"></path></svg><div class="loading-progress-bar"><div class="moving-dash"></div></div></div>', 1)
16
17
  ])], 4));
17
18
  }
18
19
  });
19
20
  export {
20
- r as default
21
+ s as default
21
22
  };
22
23
  //# sourceMappingURL=Loading.vue.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Loading.vue.js","sources":["../../src/components/Loading.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst props = withDefaults(defineProps<{\n top?: number,\n left?: number,\n right?: number\n bottom?: number\n}>(), {\n top: 0,\n left: 0,\n right: 0,\n bottom: 0\n});\n</script>\n<template>\n <div class=\"graph-maker__loading\"\n :style=\"{top: `${top}px`, bottom: `${bottom}px`, right: `${right}px`, left: `${left}px`}\">\n <div class=\"loading-picture\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M36.0197 2.29384C37.0053 1.76506 37.7157 1.45481 38.4537 1.29931C39.4734 1.08447 40.5266 1.08447 41.5463 1.29931C42.2843 1.45481 42.9947 1.76506 43.9803 2.29384C44.7026 2.66301 45.5542 3.14998 46.6565 3.78023L68.4201 16.2247C69.3757 16.7711 70.1409 17.2086 70.7708 17.5978C71.8362 18.2367 72.5158 18.7183 73.0579 19.3166C73.7667 20.0989 74.3023 21.0219 74.6298 22.0253C75 23.1595 75 24.4276 75 26.9639V53.0362C75 55.5725 75 56.8407 74.6298 57.9748C74.3023 58.9782 73.7667 59.9012 73.0579 60.6835C72.5154 61.2822 71.8353 61.764 70.7688 62.4035C70.1393 62.7924 69.3748 63.2295 68.4203 63.7753L46.6565 76.2198C45.555 76.8497 44.7037 77.3364 43.9817 77.7055C42.9954 78.2347 42.2847 78.5452 41.5463 78.7008C40.5266 78.9156 39.4734 78.9156 38.4537 78.7008C37.7153 78.5452 37.0045 78.2347 36.0182 77.7054C35.2962 77.3364 34.445 76.8497 33.3436 76.2199L11.5799 63.7754C10.6253 63.2295 9.86069 62.7924 9.23115 62.4035C8.16466 61.764 7.48457 61.2822 6.94208 60.6835C6.23334 59.9012 5.6977 58.9782 5.37018 57.9748C5 56.8407 5 55.5725 5 53.0362V26.9639C5 24.4276 5 23.1595 5.37018 22.0253C5.6977 21.0219 6.23334 20.0989 6.94208 19.3166C7.48422 18.7183 8.16379 18.2367 9.22911 17.5978C9.85904 17.2086 10.6242 16.7711 11.5799 16.2247L33.3435 3.78023C34.4457 3.14998 35.2974 2.663 36.0197 2.29384ZM10 34.9971V24.9907H37.4546V34.9971H10ZM10 45.0036V40.0003H37.4546V45.0036H10ZM37.4546 72.9139L10 57.1541V50.0069H37.4546V72.9139ZM65.0189 60.0134L42.5455 72.9138V60.0134H65.0189ZM70 24.9907V55.0101H42.5455V24.9907H70ZM14.98 19.9874L40 5.62505L65.0201 19.9874H14.98Z\"\n fill=\"#E1E3EB\" />\n </svg>\n <div class=\"loading-progress-bar\">\n <div class=\"moving-dash\" />\n </div>\n </div>\n </div>\n</template>"],"names":["_createElementBlock","__props"],"mappings":";;;;;;;;;;2BAcEA,EAYM,OAAA;AAAA,MAZD,OAAM;AAAA,MACL,mBAAgBC,EAAA,GAAG,MAAA,QAAA,GAAiBA,QAAM,MAAA,OAAA,GAAgBA,EAAA,KAAK,eAAeA,EAAA,IAAI,KAAA,CAAA;AAAA,IAAA;;;;;"}
1
+ {"version":3,"file":"Loading.vue.js","sources":["../../src/components/Loading.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst props = withDefaults(defineProps<{\n top?: number;\n left?: number;\n right?: number;\n bottom?: number;\n}>(), {\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n});\n</script>\n<template>\n <div\n class=\"graph-maker__loading\"\n :style=\"{top: `${props.top}px`, bottom: `${props.bottom}px`, right: `${props.right}px`, left: `${props.left}px`}\"\n >\n <div class=\"loading-picture\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\">\n <path\n fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M36.0197 2.29384C37.0053 1.76506 37.7157 1.45481 38.4537 1.29931C39.4734 1.08447 40.5266 1.08447 41.5463 1.29931C42.2843 1.45481 42.9947 1.76506 43.9803 2.29384C44.7026 2.66301 45.5542 3.14998 46.6565 3.78023L68.4201 16.2247C69.3757 16.7711 70.1409 17.2086 70.7708 17.5978C71.8362 18.2367 72.5158 18.7183 73.0579 19.3166C73.7667 20.0989 74.3023 21.0219 74.6298 22.0253C75 23.1595 75 24.4276 75 26.9639V53.0362C75 55.5725 75 56.8407 74.6298 57.9748C74.3023 58.9782 73.7667 59.9012 73.0579 60.6835C72.5154 61.2822 71.8353 61.764 70.7688 62.4035C70.1393 62.7924 69.3748 63.2295 68.4203 63.7753L46.6565 76.2198C45.555 76.8497 44.7037 77.3364 43.9817 77.7055C42.9954 78.2347 42.2847 78.5452 41.5463 78.7008C40.5266 78.9156 39.4734 78.9156 38.4537 78.7008C37.7153 78.5452 37.0045 78.2347 36.0182 77.7054C35.2962 77.3364 34.445 76.8497 33.3436 76.2199L11.5799 63.7754C10.6253 63.2295 9.86069 62.7924 9.23115 62.4035C8.16466 61.764 7.48457 61.2822 6.94208 60.6835C6.23334 59.9012 5.6977 58.9782 5.37018 57.9748C5 56.8407 5 55.5725 5 53.0362V26.9639C5 24.4276 5 23.1595 5.37018 22.0253C5.6977 21.0219 6.23334 20.0989 6.94208 19.3166C7.48422 18.7183 8.16379 18.2367 9.22911 17.5978C9.85904 17.2086 10.6242 16.7711 11.5799 16.2247L33.3435 3.78023C34.4457 3.14998 35.2974 2.663 36.0197 2.29384ZM10 34.9971V24.9907H37.4546V34.9971H10ZM10 45.0036V40.0003H37.4546V45.0036H10ZM37.4546 72.9139L10 57.1541V50.0069H37.4546V72.9139ZM65.0189 60.0134L42.5455 72.9138V60.0134H65.0189ZM70 24.9907V55.0101H42.5455V24.9907H70ZM14.98 19.9874L40 5.62505L65.0201 19.9874H14.98Z\"\n fill=\"#E1E3EB\"\n />\n </svg>\n <div class=\"loading-progress-bar\">\n <div class=\"moving-dash\" />\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","_createElementBlock","_normalizeStyle"],"mappings":";;;;;;;;;;AACA,UAAMA,IAAQC;2BAaZC,EAgBM,OAAA;AAAA,MAfJ,OAAM;AAAA,MACL,OAAKC,EAAA,EAAA,KAAA,GAAWH,EAAM,GAAG,iBAAiBA,EAAM,MAAM,MAAA,OAAA,GAAgBA,EAAM,KAAK,MAAA,MAAA,GAAeA,EAAM,IAAI,KAAA,CAAA;AAAA,IAAA;;;;;"}
@@ -1,6 +1,6 @@
1
- import { defineComponent as f, ref as k, createElementBlock as l, openBlock as t, withModifiers as g, createCommentVNode as a, createVNode as y, createElementVNode as v, toDisplayString as s, createBlock as C, unref as r, Fragment as h, renderList as E, normalizeStyle as u } from "vue";
2
- import { useLabelNotch as L, PlIcon16 as B } from "@platforma-sdk/ui-vue";
3
- import _ from "./DoubleContourTemp.vue.js";
1
+ import { defineComponent as k, ref as b, createElementBlock as o, openBlock as t, withModifiers as f, createCommentVNode as c, createVNode as g, createElementVNode as y, toDisplayString as a, createBlock as v, unref as r, Fragment as C, renderList as h, normalizeStyle as u } from "vue";
2
+ import { useLabelNotch as E, PlIcon16 as L } from "@platforma-sdk/ui-vue";
3
+ import B from "./DoubleContourTemp.vue.js";
4
4
  import { isCategorical as $, PALETTE_MAP as m } from "../constantsAesthetic.js";
5
5
  const A = { class: "ui-multiselect-button__content" }, I = {
6
6
  key: 0,
@@ -8,7 +8,7 @@ const A = { class: "ui-multiselect-button__content" }, I = {
8
8
  }, N = {
9
9
  key: 1,
10
10
  class: "gradient"
11
- }, S = 6, T = /* @__PURE__ */ f({
11
+ }, S = 6, D = /* @__PURE__ */ k({
12
12
  __name: "MultiselectButton",
13
13
  props: {
14
14
  label: {},
@@ -16,39 +16,40 @@ const A = { class: "ui-multiselect-button__content" }, I = {
16
16
  palette: {}
17
17
  },
18
18
  emits: ["button-click"],
19
- setup(e, { emit: V }) {
20
- const c = k(void 0);
21
- L(c);
22
- function d(o) {
23
- const i = 100 / (o.length - 1);
24
- return `background: linear-gradient(to right, ${o.map((n, b) => `${n} ${b * i}%`).join(", ")})`;
19
+ setup(d, { emit: V }) {
20
+ const e = d, s = b(void 0);
21
+ E(s);
22
+ function p(n) {
23
+ const i = 100 / (n.length - 1);
24
+ return `background: linear-gradient(to right, ${n.map((l, _) => `${l} ${_ * i}%`).join(", ")})`;
25
25
  }
26
- return (o, i) => (t(), l("div", {
26
+ return (n, i) => (t(), o("div", {
27
27
  ref_key: "root",
28
- ref: c,
28
+ ref: s,
29
29
  class: "ui-multiselect-button",
30
- onClick: i[0] || (i[0] = g((n) => o.$emit("button-click"), ["stop"]))
30
+ onClick: i[0] || (i[0] = f((l) => n.$emit("button-click"), ["stop"]))
31
31
  }, [
32
- e.label ? (t(), l("label", {
32
+ e.label ? (t(), o("label", {
33
33
  key: 0,
34
34
  ref: "label"
35
- }, s(e.label), 513)) : a("", !0),
36
- y(_, { class: "ui-multiselect-button__contour" }),
37
- v("div", A, [
38
- e.title ? (t(), l("div", I, s(e.title), 1)) : a("", !0),
39
- e.palette && r($)(e.palette) ? (t(), l("div", N, [
40
- (t(!0), l(h, null, E(r(m)[e.palette].colors.slice(
35
+ }, a(e.label), 513)) : c("", !0),
36
+ g(B, { class: "ui-multiselect-button__contour" }),
37
+ y("div", A, [
38
+ e.title ? (t(), o("div", I, a(e.title), 1)) : c("", !0),
39
+ e.palette && r($)(e.palette) ? (t(), o("div", N, [
40
+ (t(!0), o(C, null, h(r(m)[e.palette].colors.slice(
41
41
  0,
42
42
  S
43
- ), (n) => (t(), l("div", {
43
+ ), (l) => (t(), o("div", {
44
+ key: l,
44
45
  class: "gradient__item",
45
- style: u({ background: n })
46
- }, null, 4))), 256))
47
- ])) : e.palette ? (t(), l("div", {
46
+ style: u({ background: l })
47
+ }, null, 4))), 128))
48
+ ])) : e.palette ? (t(), o("div", {
48
49
  key: 2,
49
50
  class: "gradient",
50
- style: u(d(r(m)[e.palette].colors))
51
- }, null, 4)) : (t(), C(r(B), {
51
+ style: u(p(r(m)[e.palette].colors))
52
+ }, null, 4)) : (t(), v(r(L), {
52
53
  key: 3,
53
54
  class: "icon",
54
55
  name: "chevron-right"
@@ -58,6 +59,6 @@ const A = { class: "ui-multiselect-button__content" }, I = {
58
59
  }
59
60
  });
60
61
  export {
61
- T as default
62
+ D as default
62
63
  };
63
64
  //# sourceMappingURL=MultiselectButton.vue.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"MultiselectButton.vue.js","sources":["../../src/components/MultiselectButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16, useLabelNotch } from \"@platforma-sdk/ui-vue\";\nimport { ref } from \"vue\";\nimport {\n Palette,\n PaletteData,\n} from './AesSettings/types';\nimport DoubleContour from './DoubleContourTemp.vue';\nimport {\n isCategorical,\n PALETTE_MAP,\n} from '../constantsAesthetic';\n\nconst emit = defineEmits([\"button-click\"]);\nconst props = defineProps<{\n label: string;\n title?: string;\n palette?: Palette;\n}>();\nconst root = ref<HTMLInputElement | undefined>(undefined);\nuseLabelNotch(root);\n\nfunction createCssGradient(palette: PaletteData) {\n const step = 100 / (palette.length - 1);\n return `background: linear-gradient(to right, ${palette\n .map((value, idx) => `${value} ${idx * step}%`)\n .join(\", \")})`;\n}\n\nconst COLORS_CATEGORICAL_VISIBLE = 6;\n</script>\n\n<template>\n <div ref=\"root\" class=\"ui-multiselect-button\" @click.stop=\"$emit('button-click')\">\n <label v-if=\"label\" ref=\"label\">\n {{ label }}\n </label>\n <double-contour class=\"ui-multiselect-button__contour\" />\n <div class=\"ui-multiselect-button__content\">\n <div v-if=\"title\" class=\"title\">{{ title }}</div>\n <div v-if=\"palette && isCategorical(palette)\" class=\"gradient\">\n <div\n class=\"gradient__item\"\n v-for=\"color of PALETTE_MAP[palette].colors.slice(\n 0,\n COLORS_CATEGORICAL_VISIBLE,\n )\"\n :style=\"{ background: color }\"\n />\n </div>\n <div\n v-else-if=\"palette\"\n class=\"gradient\"\n :style=\"createCssGradient(PALETTE_MAP[palette].colors)\"\n />\n <PlIcon16 v-else class=\"icon\" name=\"chevron-right\" />\n </div>\n </div>\n</template>\n"],"names":["COLORS_CATEGORICAL_VISIBLE","root","ref","useLabelNotch","createCssGradient","palette","step","value","idx","_createElementBlock","$emit","__props","_createVNode","DoubleContour","_createElementVNode","_hoisted_1","_hoisted_2","_toDisplayString","_unref","isCategorical","_openBlock","_hoisted_3","_Fragment","PALETTE_MAP","color","_createBlock","PlIcon16"],"mappings":";;;;;;;;;;GA6BMA,IAA6B;;;;;;;;;AAVnC,UAAMC,IAAOC,EAAkC,MAAS;AACxD,IAAAC,EAAcF,CAAI;AAElB,aAASG,EAAkBC,GAAsB;AAC/C,YAAMC,IAAO,OAAOD,EAAQ,SAAS;AACrC,aAAO,yCAAyCA,EAC7C,IAAI,CAACE,GAAOC,MAAQ,GAAGD,CAAK,IAAIC,IAAMF,CAAI,GAAG,EAC7C,KAAK,IAAI,CAAC;AAAA,IACf;2BAMEG,EAwBM,OAAA;AAAA,eAxBG;AAAA,MAAJ,KAAIR;AAAA,MAAO,OAAM;AAAA,MAAyB,kCAAYS,EAAAA,MAAK,cAAA,GAAA,CAAA,MAAA,CAAA;AAAA,IAAA;MACjDC,EAAA,cAAbF,EAEQ,SAAA;AAAA;QAFY,KAAI;AAAA,MAAA,KACnBE,EAAA,KAAK,GAAA,GAAA;MAEVC,EAAyDC,GAAA,EAAzC,OAAM,kCAAgC;AAAA,MACtDC,EAkBM,OAlBNC,GAkBM;AAAA,QAjBOJ,EAAA,cAAXF,EAAiD,OAAjDO,GAAiDC,EAAdN,EAAA,KAAK,GAAA,CAAA;QAC7BA,EAAA,WAAWO,EAAAC,CAAA,EAAcR,EAAA,OAAO,KAA3CS,EAAA,GAAAX,EASM,OATNY,GASM;AAAA,WARJD,EAAA,EAAA,GAAAX,EAOEa,WALgBJ,EAAAK,CAAA,EAAYZ,SAAO,EAAE,OAAO;AAAA;YAAkCX;AAAA,UAAA,IAAvEwB,YAFTf,EAOE,OAAA;AAAA,YANA,OAAM;AAAA,YAKL,uBAAqBe,GAAK;AAAA,UAAA;cAIlBb,EAAA,gBADbF,EAIE,OAAA;AAAA;UAFA,OAAM;AAAA,UACL,SAAOL,EAAkBc,KAAYP,EAAA,OAAO,EAAE,MAAM,CAAA;AAAA,QAAA,qBAEvDc,EAAqDP,EAAAQ,CAAA,GAAA;AAAA;UAApC,OAAM;AAAA,UAAO,MAAK;AAAA,QAAA;;;;;"}
1
+ {"version":3,"file":"MultiselectButton.vue.js","sources":["../../src/components/MultiselectButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon16, useLabelNotch } from '@platforma-sdk/ui-vue';\nimport { ref } from 'vue';\nimport type {\n Palette,\n PaletteData,\n} from './AesSettings/types';\nimport DoubleContour from './DoubleContourTemp.vue';\nimport {\n isCategorical,\n PALETTE_MAP,\n} from '../constantsAesthetic';\n\nconst _emit = defineEmits(['button-click']);\nconst props = defineProps<{\n label: string;\n title?: string;\n palette?: Palette;\n}>();\nconst root = ref<HTMLInputElement | undefined>(undefined);\nuseLabelNotch(root);\n\nfunction createCssGradient(palette: PaletteData) {\n const step = 100 / (palette.length - 1);\n return `background: linear-gradient(to right, ${palette\n .map((value, idx) => `${value} ${idx * step}%`)\n .join(', ')})`;\n}\n\nconst COLORS_CATEGORICAL_VISIBLE = 6;\n</script>\n\n<template>\n <div ref=\"root\" class=\"ui-multiselect-button\" @click.stop=\"$emit('button-click')\">\n <label v-if=\"props.label\" ref=\"label\">\n {{ props.label }}\n </label>\n <DoubleContour class=\"ui-multiselect-button__contour\" />\n <div class=\"ui-multiselect-button__content\">\n <div v-if=\"props.title\" class=\"title\">{{ props.title }}</div>\n <div v-if=\"props.palette && isCategorical(props.palette)\" class=\"gradient\">\n <div\n v-for=\"color of PALETTE_MAP[props.palette].colors.slice(\n 0,\n COLORS_CATEGORICAL_VISIBLE,\n )\"\n :key=\"color\"\n class=\"gradient__item\"\n :style=\"{ background: color }\"\n />\n </div>\n <div\n v-else-if=\"props.palette\"\n class=\"gradient\"\n :style=\"createCssGradient(PALETTE_MAP[props.palette].colors)\"\n />\n <PlIcon16 v-else class=\"icon\" name=\"chevron-right\" />\n </div>\n </div>\n</template>\n"],"names":["COLORS_CATEGORICAL_VISIBLE","props","__props","root","ref","useLabelNotch","createCssGradient","palette","step","value","idx","_createElementBlock","$emit","_toDisplayString","_createVNode","DoubleContour","_createElementVNode","_hoisted_1","_openBlock","_hoisted_2","_unref","_hoisted_3","_Fragment","_renderList","color","_normalizeStyle","PALETTE_MAP","_createBlock","PlIcon16"],"mappings":";;;;;;;;;;GA6BMA,IAA6B;;;;;;;;;AAfnC,UAAMC,IAAQC,GAKRC,IAAOC,EAAkC,MAAS;AACxD,IAAAC,EAAcF,CAAI;AAElB,aAASG,EAAkBC,GAAsB;AAC/C,YAAMC,IAAO,OAAOD,EAAQ,SAAS;AACrC,aAAO,yCAAyCA,EAC7C,IAAI,CAACE,GAAOC,MAAQ,GAAGD,CAAK,IAAIC,IAAMF,CAAI,GAAG,EAC7C,KAAK,IAAI,CAAC;AAAA,IACf;2BAMEG,EAyBM,OAAA;AAAA,eAzBG;AAAA,MAAJ,KAAIR;AAAA,MAAO,OAAM;AAAA,MAAyB,kCAAYS,EAAAA,MAAK,cAAA,GAAA,CAAA,MAAA,CAAA;AAAA,IAAA;MACjDX,EAAM,cAAnBU,EAEQ,SAAA;AAAA;QAFkB,KAAI;AAAA,MAAA,GACzBE,EAAAZ,EAAM,KAAK,GAAA,GAAA;MAEhBa,EAAwDC,GAAA,EAAzC,OAAM,kCAAgC;AAAA,MACrDC,EAmBM,OAnBNC,GAmBM;AAAA,QAlBOhB,EAAM,SAAjBiB,EAAA,GAAAP,EAA6D,OAA7DQ,GAA6DN,EAApBZ,EAAM,KAAK,GAAA,CAAA;QACzCA,EAAM,WAAWmB,KAAcnB,EAAM,OAAO,KAAvDiB,EAAA,GAAAP,EAUM,OAVNU,GAUM;AAAA,kBATJV,EAQEW,GAAA,MAAAC,EAPgBH,KAAYnB,EAAM,OAAO,EAAE,OAAO;AAAA;YAAkCD;AAAA,UAAA,IAA7EwB,YADTb,EAQE,OAAA;AAAA,YAHC,KAAKa;AAAA,YACN,OAAM;AAAA,YACL,uBAAqBA,GAAK;AAAA,UAAA;cAIlBvB,EAAM,gBADnBU,EAIE,OAAA;AAAA;UAFA,OAAM;AAAA,UACL,OAAKc,EAAEnB,EAAkBc,EAAAM,CAAA,EAAYzB,EAAM,OAAO,EAAE,MAAM,CAAA;AAAA,QAAA,qBAE7D0B,EAAqDP,EAAAQ,CAAA,GAAA;AAAA;UAApC,OAAM;AAAA,UAAO,MAAK;AAAA,QAAA;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"PanelModal.vue.js","sources":["../../src/components/PanelModal.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {PlCloseModalBtn, useClickOutside} from '@platforma-sdk/ui-vue';\nimport {ref} from 'vue';\n\nconst $emit = defineEmits(['close']);\n\nconst rootRef = ref();\n\nuseClickOutside([rootRef],() => $emit('close'));\n</script>\n\n<template>\n <div ref=\"rootRef\" class=\"panel-modal\">\n <PlCloseModalBtn class=\"close-panel-modal\" @click=\"$emit('close')\"/>\n <slot ref=\"contentRef\"/>\n </div>\n</template>\n"],"names":["$emit","__emit","rootRef","ref","useClickOutside","_createElementBlock","_createVNode","_unref","PlCloseModalBtn","_renderSlot","_ctx"],"mappings":";;;;;;AAIA,UAAMA,IAAQC,GAERC,IAAUC,EAAA;AAEhB,WAAAC,EAAgB,CAACF,CAAO,GAAE,MAAMF,EAAM,OAAO,CAAC,mBAI5CK,EAGM,OAAA;AAAA,eAHG;AAAA,MAAJ,KAAIH;AAAA,MAAU,OAAM;AAAA,IAAA;MACvBI,EAAoEC,EAAAC,CAAA,GAAA;AAAA,QAAnD,OAAM;AAAA,QAAqB,gCAAOR,EAAK,OAAA;AAAA,MAAA;MACxDS,EAAwBC,EAAA,QAAA,WAAA,EAAlB,KAAI,cAAY;AAAA,IAAA;;;"}
1
+ {"version":3,"file":"PanelModal.vue.js","sources":["../../src/components/PanelModal.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlCloseModalBtn, useClickOutside } from '@platforma-sdk/ui-vue';\nimport { ref } from 'vue';\n\nconst $emit = defineEmits(['close']);\n\nconst rootRef = ref();\n\nuseClickOutside([rootRef], () => $emit('close'));\n</script>\n\n<template>\n <div ref=\"rootRef\" class=\"panel-modal\">\n <PlCloseModalBtn class=\"close-panel-modal\" @click=\"$emit('close')\"/>\n <slot ref=\"contentRef\"/>\n </div>\n</template>\n"],"names":["$emit","__emit","rootRef","ref","useClickOutside","_createElementBlock","_createVNode","_unref","PlCloseModalBtn","_renderSlot","_ctx"],"mappings":";;;;;;AAIA,UAAMA,IAAQC,GAERC,IAAUC,EAAA;AAEhB,WAAAC,EAAgB,CAACF,CAAO,GAAG,MAAMF,EAAM,OAAO,CAAC,mBAI7CK,EAGM,OAAA;AAAA,eAHG;AAAA,MAAJ,KAAIH;AAAA,MAAU,OAAM;AAAA,IAAA;MACvBI,EAAoEC,EAAAC,CAAA,GAAA;AAAA,QAAnD,OAAM;AAAA,QAAqB,gCAAOR,EAAK,OAAA;AAAA,MAAA;MACxDS,EAAwBC,EAAA,QAAA,WAAA,EAAlB,KAAI,cAAY;AAAA,IAAA;;;"}
@@ -1,4 +1,4 @@
1
- import { defineComponent as k, ref as v, reactive as y, watch as p, computed as u, onMounted as C, createElementBlock as f, openBlock as d, createElementVNode as i, normalizeStyle as $, createCommentVNode as w, Fragment as B, renderList as F, createBlock as E } from "vue";
1
+ import { defineComponent as k, ref as p, reactive as y, watch as v, computed as d, onMounted as C, createElementBlock as f, openBlock as u, createElementVNode as i, normalizeStyle as $, createCommentVNode as w, Fragment as B, renderList as F, createBlock as E } from "vue";
2
2
  import M from "./PlColorSliderThumb.vue.js";
3
3
  const P = { class: "pl-color-slider" }, R = { class: "pl-color-slider__wrapper" }, j = { class: "pl-color-slider__thumbs-contaier" }, S = /* @__PURE__ */ k({
4
4
  __name: "PlColorSlider",
@@ -10,34 +10,34 @@ const P = { class: "pl-color-slider" }, R = { class: "pl-color-slider__wrapper"
10
10
  },
11
11
  emits: ["update:modelValue", "active"],
12
12
  setup(r, { emit: _ }) {
13
- const a = r, g = _, c = v(), n = y({}), o = v(-1);
14
- p(
13
+ const a = r, g = _, c = p(), n = y({}), o = p(-1);
14
+ v(
15
15
  () => a.modelValue,
16
16
  () => {
17
17
  a.modelValue.forEach((e, l) => n[l] = e);
18
18
  },
19
19
  { immediate: !0 }
20
20
  );
21
- const h = u(
21
+ const h = d(
22
22
  () => Math.floor(o.value !== -1 ? 0 - o.value : 0)
23
- ), V = u(
23
+ ), V = d(
24
24
  () => Math.floor(o.value !== -1 ? 100 + o.value : 100)
25
25
  );
26
- p(
26
+ v(
27
27
  () => n,
28
28
  (e) => {
29
29
  g("update:modelValue", Object.values(e));
30
30
  },
31
31
  { deep: !0 }
32
32
  );
33
- const b = u(() => {
33
+ const b = d(() => {
34
34
  const e = 100 / (a.colors.length - 1);
35
35
  return `linear-gradient(to right, ${a.colors.map((m, t) => `${m} ${e * t}%`).join(", ")})`;
36
36
  });
37
37
  return C(() => {
38
- let e = 16, l = c.value.getBoundingClientRect().width - e * 2;
39
- o.value = e / l * 100;
40
- }), (e, l) => (d(), f("div", P, [
38
+ const l = c.value.getBoundingClientRect().width - 32;
39
+ o.value = 16 / l * 100;
40
+ }), (e, l) => (u(), f("div", P, [
41
41
  i("div", R, [
42
42
  i("div", {
43
43
  ref_key: "barRef",
@@ -50,11 +50,11 @@ const P = { class: "pl-color-slider" }, R = { class: "pl-color-slider__wrapper"
50
50
  }, null, 4)
51
51
  ], 512),
52
52
  i("div", j, [
53
- c.value ? (d(!0), f(B, { key: 0 }, F(r.modelValue, (m, t) => (d(), E(M, {
53
+ c.value ? (u(!0), f(B, { key: 0 }, F(r.modelValue, (m, t) => (u(), E(M, {
54
+ key: t,
54
55
  modelValue: n[t],
55
56
  "onUpdate:modelValue": (s) => n[t] = s,
56
57
  "is-active": r.active === t,
57
- key: t,
58
58
  min: h.value,
59
59
  max: V.value,
60
60
  "bar-ref": c.value,
@@ -1 +1 @@
1
- {"version":3,"file":"PlColorSlider.vue.js","sources":["../../src/components/PlColorSlider.vue"],"sourcesContent":["<template>\n <div class=\"pl-color-slider\">\n <div class=\"pl-color-slider__wrapper\">\n <div ref=\"barRef\" class=\"pl-color-slider__color-contaier\">\n <div\n :style=\"{ background: gradient }\"\n class=\"pl-color-slider__gradient\"\n />\n </div>\n <div class=\"pl-color-slider__thumbs-contaier\">\n <template v-if=\"barRef\">\n <PlColorSliderThumb\n v-for=\"(val, index) in modelValue\"\n v-model=\"models[index]\"\n :is-active=\"active === index\"\n :key=\"index\"\n :min=\"min\"\n :max=\"max\"\n :bar-ref=\"barRef\"\n :get-color-for-percent=\"getColorForPercent\"\n class=\"pl-color-slider__thumb\"\n tabindex=\"0\"\n @active=\"$emit('active', { index: index, status: $event })\"\n />\n </template>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch, onMounted } from 'vue';\nimport PlColorSliderThumb from './PlColorSliderThumb.vue';\n\ntype PropsType = {\n colors: string[];\n modelValue: number[];\n getColorForPercent: (percent: number) => string;\n active: number | null;\n};\n\nconst props = defineProps<PropsType>();\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: PropsType['modelValue']): void;\n (e: 'active', v: { index: number; status: boolean }): void;\n}>();\nconst barRef = ref<HTMLElement>();\nconst models = reactive<{ [key: string]: number }>({});\nconst paddingDelta = ref(-1);\n\nwatch(\n () => props.modelValue,\n () => {\n props.modelValue.forEach((value, index) => (models[index] = value));\n },\n { immediate: true },\n);\n\nconst min = computed(() =>\n Math.floor(paddingDelta.value !== -1 ? 0 - paddingDelta.value : 0),\n);\n\nconst max = computed(() =>\n Math.floor(paddingDelta.value !== -1 ? 100 + paddingDelta.value : 100),\n);\nwatch(\n () => models,\n (val) => {\n emit('update:modelValue', Object.values(val));\n },\n { deep: true },\n);\n\nconst gradient = computed(() => {\n const portion = 100 / (props.colors.length - 1);\n const result = props.colors\n .map((color, index) => {\n return `${color} ${portion * index}%`;\n })\n .join(', ');\n\n return `linear-gradient(to right, ${result})`;\n});\n\nonMounted(() => {\n let padding = 16;\n let w =\n (barRef.value as HTMLElement).getBoundingClientRect().width - padding * 2;\n paddingDelta.value = (padding / w) * 100;\n});\n</script>\n"],"names":["props","__props","emit","__emit","barRef","ref","models","reactive","paddingDelta","watch","value","index","min","computed","max","val","gradient","portion","color","onMounted","padding","w","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_Fragment","_renderList","_createBlock","PlColorSliderThumb","$event","$emit"],"mappings":";;;;;;;;;;;;AAyCA,UAAMA,IAAQC,GACRC,IAAOC,GAIPC,IAASC,EAAA,GACTC,IAASC,EAAoC,EAAE,GAC/CC,IAAeH,EAAI,EAAE;AAE3B,IAAAI;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAA,EAAM,WAAW,QAAQ,CAACU,GAAOC,MAAWL,EAAOK,CAAK,IAAID,CAAM;AAAA,MACpE;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAME,IAAMC;AAAA,MAAS,MACnB,KAAK,MAAML,EAAa,UAAU,KAAK,IAAIA,EAAa,QAAQ,CAAC;AAAA,IAAA,GAG7DM,IAAMD;AAAA,MAAS,MACnB,KAAK,MAAML,EAAa,UAAU,KAAK,MAAMA,EAAa,QAAQ,GAAG;AAAA,IAAA;AAEvE,IAAAC;AAAA,MACE,MAAMH;AAAA,MACN,CAACS,MAAQ;AACP,QAAAb,EAAK,qBAAqB,OAAO,OAAOa,CAAG,CAAC;AAAA,MAC9C;AAAA,MACA,EAAE,MAAM,GAAA;AAAA,IAAK;AAGf,UAAMC,IAAWH,EAAS,MAAM;AAC9B,YAAMI,IAAU,OAAOjB,EAAM,OAAO,SAAS;AAO7C,aAAO,6BANQA,EAAM,OAClB,IAAI,CAACkB,GAAOP,MACJ,GAAGO,CAAK,IAAID,IAAUN,CAAK,GACnC,EACA,KAAK,IAAI,CAE8B;AAAA,IAC5C,CAAC;AAED,WAAAQ,EAAU,MAAM;AACd,UAAIC,IAAU,IACVC,IACDjB,EAAO,MAAsB,sBAAA,EAAwB,QAAQgB,IAAU;AAC1E,MAAAZ,EAAa,QAASY,IAAUC,IAAK;AAAA,IACvC,CAAC,cAxFCC,EAAA,GAAAC,EA0BM,OA1BNC,GA0BM;AAAA,MAzBJC,EAwBM,OAxBNC,GAwBM;AAAA,QAvBJD,EAKM,OAAA;AAAA,mBALG;AAAA,UAAJ,KAAIrB;AAAA,UAAS,OAAM;AAAA,QAAA;UACtBqB,EAGE,OAAA;AAAA,YAFC,uBAAqBT,EAAA,OAAQ;AAAA,YAC9B,OAAM;AAAA,UAAA;;QAGVS,EAgBM,OAhBNE,GAgBM;AAAA,UAfYvB,EAAA,SACdkB,EAAA,EAAA,GAAAC,EAYEK,GAAA,EAAA,KAAA,EAAA,GAAAC,EAXuB5B,EAAA,YAAU,CAAzBc,GAAKJ,YADfmB,EAYEC,GAAA;AAAA,YAVS,YAAAzB,EAAOK,CAAK;AAAA,YAAZ,uBAAA,CAAAqB,MAAA1B,EAAOK,CAAK,IAAAqB;AAAA,YACpB,aAAW/B,EAAA,WAAWU;AAAA,YACtB,KAAKA;AAAA,YACL,KAAKC,EAAA;AAAA,YACL,KAAKE,EAAA;AAAA,YACL,WAASV,EAAA;AAAA,YACT,yBAAuBH,EAAA;AAAA,YACxB,OAAM;AAAA,YACN,UAAS;AAAA,YACR,UAAM,CAAA+B,MAAEC,EAAAA,MAAK,UAAA,EAAA,OAAAtB,WAAmCqB,EAAA,CAAM;AAAA,UAAA;;;;;;"}
1
+ {"version":3,"file":"PlColorSlider.vue.js","sources":["../../src/components/PlColorSlider.vue"],"sourcesContent":["<template>\n <div class=\"pl-color-slider\">\n <div class=\"pl-color-slider__wrapper\">\n <div ref=\"barRef\" class=\"pl-color-slider__color-contaier\">\n <div\n :style=\"{ background: gradient }\"\n class=\"pl-color-slider__gradient\"\n />\n </div>\n <div class=\"pl-color-slider__thumbs-contaier\">\n <template v-if=\"barRef\">\n <PlColorSliderThumb\n v-for=\"(val, index) in modelValue\"\n :key=\"index\"\n v-model=\"models[index]\"\n :is-active=\"active === index\"\n :min=\"min\"\n :max=\"max\"\n :bar-ref=\"barRef\"\n :get-color-for-percent=\"getColorForPercent\"\n class=\"pl-color-slider__thumb\"\n tabindex=\"0\"\n @active=\"$emit('active', { index: index, status: $event })\"\n />\n </template>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch, onMounted } from 'vue';\nimport PlColorSliderThumb from './PlColorSliderThumb.vue';\n\ntype PropsType = {\n colors: string[];\n modelValue: number[];\n getColorForPercent: (percent: number) => string;\n active: number | null;\n};\n\nconst props = defineProps<PropsType>();\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: PropsType['modelValue']): void;\n (e: 'active', v: { index: number; status: boolean }): void;\n}>();\nconst barRef = ref<HTMLElement>();\nconst models = reactive<{ [key: string]: number }>({});\nconst paddingDelta = ref(-1);\n\nwatch(\n () => props.modelValue,\n () => {\n props.modelValue.forEach((value, index) => (models[index] = value));\n },\n { immediate: true },\n);\n\nconst min = computed(() =>\n Math.floor(paddingDelta.value !== -1 ? 0 - paddingDelta.value : 0),\n);\n\nconst max = computed(() =>\n Math.floor(paddingDelta.value !== -1 ? 100 + paddingDelta.value : 100),\n);\nwatch(\n () => models,\n (val) => {\n emit('update:modelValue', Object.values(val));\n },\n { deep: true },\n);\n\nconst gradient = computed(() => {\n const portion = 100 / (props.colors.length - 1);\n const result = props.colors\n .map((color, index) => {\n return `${color} ${portion * index}%`;\n })\n .join(', ');\n\n return `linear-gradient(to right, ${result})`;\n});\n\nonMounted(() => {\n const padding = 16;\n const w\n = (barRef.value as HTMLElement).getBoundingClientRect().width - padding * 2;\n paddingDelta.value = (padding / w) * 100;\n});\n</script>\n"],"names":["props","__props","emit","__emit","barRef","ref","models","reactive","paddingDelta","watch","value","index","min","computed","max","val","gradient","portion","color","onMounted","w","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_Fragment","_renderList","_createBlock","PlColorSliderThumb","$event","$emit"],"mappings":";;;;;;;;;;;;AAyCA,UAAMA,IAAQC,GACRC,IAAOC,GAIPC,IAASC,EAAA,GACTC,IAASC,EAAoC,EAAE,GAC/CC,IAAeH,EAAI,EAAE;AAE3B,IAAAI;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAA,EAAM,WAAW,QAAQ,CAACU,GAAOC,MAAWL,EAAOK,CAAK,IAAID,CAAM;AAAA,MACpE;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAME,IAAMC;AAAA,MAAS,MACnB,KAAK,MAAML,EAAa,UAAU,KAAK,IAAIA,EAAa,QAAQ,CAAC;AAAA,IAAA,GAG7DM,IAAMD;AAAA,MAAS,MACnB,KAAK,MAAML,EAAa,UAAU,KAAK,MAAMA,EAAa,QAAQ,GAAG;AAAA,IAAA;AAEvE,IAAAC;AAAA,MACE,MAAMH;AAAA,MACN,CAACS,MAAQ;AACP,QAAAb,EAAK,qBAAqB,OAAO,OAAOa,CAAG,CAAC;AAAA,MAC9C;AAAA,MACA,EAAE,MAAM,GAAA;AAAA,IAAK;AAGf,UAAMC,IAAWH,EAAS,MAAM;AAC9B,YAAMI,IAAU,OAAOjB,EAAM,OAAO,SAAS;AAO7C,aAAO,6BANQA,EAAM,OAClB,IAAI,CAACkB,GAAOP,MACJ,GAAGO,CAAK,IAAID,IAAUN,CAAK,GACnC,EACA,KAAK,IAAI,CAE8B;AAAA,IAC5C,CAAC;AAED,WAAAQ,EAAU,MAAM;AAEd,YAAMC,IACDhB,EAAO,MAAsB,sBAAA,EAAwB,QAAQ;AAClE,MAAAI,EAAa,QAAS,KAAUY,IAAK;AAAA,IACvC,CAAC,cAxFCC,EAAA,GAAAC,EA0BM,OA1BNC,GA0BM;AAAA,MAzBJC,EAwBM,OAxBNC,GAwBM;AAAA,QAvBJD,EAKM,OAAA;AAAA,mBALG;AAAA,UAAJ,KAAIpB;AAAA,UAAS,OAAM;AAAA,QAAA;UACtBoB,EAGE,OAAA;AAAA,YAFC,uBAAqBR,EAAA,OAAQ;AAAA,YAC9B,OAAM;AAAA,UAAA;;QAGVQ,EAgBM,OAhBNE,GAgBM;AAAA,UAfYtB,EAAA,SACdiB,EAAA,EAAA,GAAAC,EAYEK,GAAA,EAAA,KAAA,EAAA,GAAAC,EAXuB3B,EAAA,YAAU,CAAzBc,GAAKJ,YADfkB,EAYEC,GAAA;AAAA,YAVC,KAAKnB;AAAA,YACG,YAAAL,EAAOK,CAAK;AAAA,YAAZ,uBAAA,CAAAoB,MAAAzB,EAAOK,CAAK,IAAAoB;AAAA,YACpB,aAAW9B,EAAA,WAAWU;AAAA,YACtB,KAAKC,EAAA;AAAA,YACL,KAAKE,EAAA;AAAA,YACL,WAASV,EAAA;AAAA,YACT,yBAAuBH,EAAA;AAAA,YACxB,OAAM;AAAA,YACN,UAAS;AAAA,YACR,UAAM,CAAA8B,MAAEC,EAAAA,MAAK,UAAA,EAAA,OAAArB,WAAmCoB,EAAA,CAAM;AAAA,UAAA;;;;;;"}
@@ -14,9 +14,7 @@ const c = 1, I = /* @__PURE__ */ k({
14
14
  },
15
15
  emits: ["update:modelValue", "active"],
16
16
  setup(m, { emit: L }) {
17
- const l = m, a = L, w = d(), p = d(), i = d(!1), n = l.min, r = l.max;
18
- let f = d(0);
19
- const V = r - n, x = l.padding / l.barRef.getBoundingClientRect().width * 100 / 2, v = b(() => u.clamp(
17
+ const l = m, a = L, w = d(), p = d(), i = d(!1), n = l.min, r = l.max, f = d(0), V = r - n, x = l.padding / l.barRef.getBoundingClientRect().width * 100 / 2, v = b(() => u.clamp(
20
18
  (l.modelValue ?? 0) + f.value,
21
19
  Math.ceil(n + x),
22
20
  Math.ceil(r - x)
@@ -1 +1 @@
1
- {"version":3,"file":"PlColorSliderThumb.vue.js","sources":["../../src/components/PlColorSliderThumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { utils } from '@milaboratories/helpers';\nimport { useMouseCapture } from '@platforma-sdk/ui-vue';\nimport { computed, ref, unref } from 'vue';\n\nconst props = withDefaults(\n defineProps<{\n barRef: HTMLElement;\n modelValue: number;\n min: number;\n max: number;\n getColorForPercent: (percent: number) => string;\n padding?: number;\n isActive: boolean;\n }>(),\n { min: 0, max: 100, padding: 16 }\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: number): void;\n (e: 'active', v: boolean): void;\n}>();\n\nconst thumb = ref<HTMLElement>();\nconst wrapper = ref<HTMLElement>();\nconst active = ref(false);\nconst min = props.min;\nconst max = props.max;\nconst step = 1;\nlet deltaValue = ref(0);\nconst range = max - min;\n\nconst onePerc =\n ((props.padding / props.barRef.getBoundingClientRect().width) * 100) / 2;\n\nconst localValue = computed(() => {\n return utils.clamp(\n (props.modelValue ?? 0) + deltaValue.value,\n Math.ceil(min + onePerc),\n Math.ceil(max - onePerc)\n );\n});\n\nconst thumbStyle = computed(() => {\n let value = Math.ceil((1 - position.value) * 100);\n return {\n right: `calc(${value}%) `\n };\n});\n\nconst position = computed(() => {\n return (localValue.value - min) / range;\n});\n\nfunction round(value: number) {\n const v = utils.clamp(value, min, max);\n return Math.round((v + Number.EPSILON) * (1 / step)) / (1 / step);\n}\n\nfunction upHandler() {\n active.value = false;\n}\n\nfunction emitActive(val: boolean) {\n if (val) {\n document.addEventListener('mouseup', upHandler);\n document.addEventListener('focusout', upHandler);\n } else {\n document.removeEventListener('mouseup', upHandler);\n document.removeEventListener('focusout', upHandler);\n }\n active.value = val;\n emit('active', val);\n}\n\nuseMouseCapture(thumb, (ev) => {\n utils.tapIf(unref(props.barRef)?.getBoundingClientRect(), (rect: DOMRect) => {\n const { dx } = ev;\n deltaValue.value = (dx / rect.width) * range;\n if (ev.stop) {\n emit('update:modelValue', round(localValue.value));\n deltaValue.value = 0;\n }\n });\n});\n\nfunction handleKeyPress(e: KeyboardEvent) {\n if (\n ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Enter'].includes(\n e.code\n )\n ) {\n e.preventDefault();\n }\n\n if (e.code === 'ArrowLeft') {\n emit('update:modelValue', utils.clamp(props.modelValue - step, min, max));\n }\n if (e.code === 'ArrowRight') {\n emit('update:modelValue', utils.clamp(props.modelValue + step, min, max));\n }\n}\n\nfunction toggleZindex(mode: boolean) {\n if (mode) {\n wrapper.value?.classList.add('pl-color-slider__top-index');\n } else {\n wrapper.value?.classList.remove('pl-color-slider__top-index');\n }\n}\n</script>\n<template>\n <div\n ref=\"wrapper\"\n :style=\"thumbStyle\"\n :class=\"{ 'active-thumb': active || isActive }\"\n class=\"pl-color-slider__thumb\"\n tabindex=\"0\"\n @mousedown=\"emitActive(true)\"\n @mouseup=\"emitActive(false)\"\n @keydown=\"handleKeyPress\"\n @focus=\"emitActive(true)\"\n >\n <div\n ref=\"thumb\"\n :class=\"{ active: active }\"\n class=\"pl-color-slider__thumb-roof\"\n @mouseover=\"toggleZindex(true)\"\n @mouseout=\"toggleZindex(false)\"\n >\n <div\n class=\"pl-color-slider__thumb-color-indicator\"\n :style=\"{ backgroundColor: getColorForPercent(localValue) }\"\n ></div>\n </div>\n </div>\n</template>\n"],"names":["step","props","__props","emit","__emit","thumb","ref","wrapper","active","min","max","deltaValue","range","onePerc","localValue","computed","utils","thumbStyle","position","round","value","v","upHandler","emitActive","val","useMouseCapture","ev","_a","unref","rect","dx","handleKeyPress","e","toggleZindex","mode","_b","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle"],"mappings":"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"}
1
+ {"version":3,"file":"PlColorSliderThumb.vue.js","sources":["../../src/components/PlColorSliderThumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { utils } from '@milaboratories/helpers';\nimport { useMouseCapture } from '@platforma-sdk/ui-vue';\nimport { computed, ref, unref } from 'vue';\n\nconst props = withDefaults(\n defineProps<{\n barRef: HTMLElement;\n modelValue: number;\n min: number;\n max: number;\n getColorForPercent: (percent: number) => string;\n padding?: number;\n isActive: boolean;\n }>(),\n { min: 0, max: 100, padding: 16 },\n);\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: number): void;\n (e: 'active', v: boolean): void;\n}>();\n\nconst thumb = ref<HTMLElement>();\nconst wrapper = ref<HTMLElement>();\nconst active = ref(false);\nconst min = props.min;\nconst max = props.max;\nconst step = 1;\nconst deltaValue = ref(0);\nconst range = max - min;\n\nconst onePerc\n = ((props.padding / props.barRef.getBoundingClientRect().width) * 100) / 2;\n\nconst localValue = computed(() => {\n return utils.clamp(\n (props.modelValue ?? 0) + deltaValue.value,\n Math.ceil(min + onePerc),\n Math.ceil(max - onePerc),\n );\n});\n\nconst thumbStyle = computed(() => {\n const value = Math.ceil((1 - position.value) * 100);\n return {\n right: `calc(${value}%) `,\n };\n});\n\nconst position = computed(() => {\n return (localValue.value - min) / range;\n});\n\nfunction round(value: number) {\n const v = utils.clamp(value, min, max);\n return Math.round((v + Number.EPSILON) * (1 / step)) / (1 / step);\n}\n\nfunction upHandler() {\n active.value = false;\n}\n\nfunction emitActive(val: boolean) {\n if (val) {\n document.addEventListener('mouseup', upHandler);\n document.addEventListener('focusout', upHandler);\n } else {\n document.removeEventListener('mouseup', upHandler);\n document.removeEventListener('focusout', upHandler);\n }\n active.value = val;\n emit('active', val);\n}\n\nuseMouseCapture(thumb, (ev) => {\n utils.tapIf(unref(props.barRef)?.getBoundingClientRect(), (rect: DOMRect) => {\n const { dx } = ev;\n deltaValue.value = (dx / rect.width) * range;\n if (ev.stop) {\n emit('update:modelValue', round(localValue.value));\n deltaValue.value = 0;\n }\n });\n});\n\nfunction handleKeyPress(e: KeyboardEvent) {\n if (\n ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Enter'].includes(\n e.code,\n )\n ) {\n e.preventDefault();\n }\n\n if (e.code === 'ArrowLeft') {\n emit('update:modelValue', utils.clamp(props.modelValue - step, min, max));\n }\n if (e.code === 'ArrowRight') {\n emit('update:modelValue', utils.clamp(props.modelValue + step, min, max));\n }\n}\n\nfunction toggleZindex(mode: boolean) {\n if (mode) {\n wrapper.value?.classList.add('pl-color-slider__top-index');\n } else {\n wrapper.value?.classList.remove('pl-color-slider__top-index');\n }\n}\n</script>\n<template>\n <div\n ref=\"wrapper\"\n :style=\"thumbStyle\"\n :class=\"{ 'active-thumb': active || isActive }\"\n class=\"pl-color-slider__thumb\"\n tabindex=\"0\"\n @mousedown=\"emitActive(true)\"\n @mouseup=\"emitActive(false)\"\n @keydown=\"handleKeyPress\"\n @focus=\"emitActive(true)\"\n >\n <div\n ref=\"thumb\"\n :class=\"{ active: active }\"\n class=\"pl-color-slider__thumb-roof\"\n @mouseover=\"toggleZindex(true)\"\n @mouseout=\"toggleZindex(false)\"\n >\n <div\n class=\"pl-color-slider__thumb-color-indicator\"\n :style=\"{ backgroundColor: getColorForPercent(localValue) }\"\n />\n </div>\n </div>\n</template>\n"],"names":["step","props","__props","emit","__emit","thumb","ref","wrapper","active","min","max","deltaValue","range","onePerc","localValue","computed","utils","thumbStyle","position","round","value","v","upHandler","emitActive","val","useMouseCapture","ev","_a","unref","rect","dx","handleKeyPress","e","toggleZindex","mode","_b","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle"],"mappings":"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"}
@@ -21,7 +21,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
21
21
  "onPopup:close"?: ((...args: any[]) => any) | undefined;
22
22
  }>, {
23
23
  width: number;
24
+ height: number;
24
25
  gap: number;
26
+ targetRef: HTMLElement;
25
27
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
26
28
  popup: HTMLDivElement;
27
29
  }, any>;
@@ -1,54 +1,54 @@
1
- import { defineComponent as $, ref as l, createBlock as k, openBlock as m, Teleport as H, createElementVNode as i, normalizeStyle as h, normalizeClass as Y, createElementBlock as P, renderSlot as B } from "vue";
1
+ import { defineComponent as $, ref as l, createBlock as k, openBlock as g, Teleport as H, createElementVNode as i, normalizeStyle as a, normalizeClass as Y, createElementBlock as P, renderSlot as B } from "vue";
2
2
  import { useClickOutside as C, usePosition as E } from "@platforma-sdk/ui-vue";
3
3
  const z = /* @__PURE__ */ $({
4
4
  __name: "Popup",
5
5
  props: {
6
6
  gap: { default: 8 },
7
- targetRef: {},
7
+ targetRef: { default: void 0 },
8
8
  width: { default: 258 },
9
- height: {}
9
+ height: { default: void 0 }
10
10
  },
11
11
  emits: ["popup:close"],
12
- setup(a, { emit: d }) {
13
- const v = d, o = a;
12
+ setup(h, { emit: m }) {
13
+ const v = m, o = h;
14
14
  function x() {
15
15
  v("popup:close");
16
16
  }
17
- const c = l(), r = l(o.targetRef), n = l("bottom"), s = l(""), p = l("");
18
- function w(u, e = 8) {
19
- E(u, (t) => {
17
+ const c = l(), r = l(o.targetRef), n = l("bottom"), s = l(""), u = l("");
18
+ function w(f, e = 8) {
19
+ E(f, (t) => {
20
20
  if (o.height && t.offsetY + t.height + 3 * e + o.height > t.clientHeight) {
21
- const g = t.right - t.width - e;
21
+ const d = t.right - t.width - e;
22
22
  if (t.clientHeight - t.offsetY > o.height + e) {
23
- const f = t.offsetY;
24
- s.value = `left: ${g}px; top: ${f}px;`, p.value = "top: 16px;", n.value = "left-bottom";
23
+ const p = t.offsetY;
24
+ s.value = `left: ${d}px; top: ${p}px;`, u.value = "top: 16px;", n.value = "left-bottom";
25
25
  } else {
26
- const f = t.clientHeight - o.height - 2 * e;
27
- s.value = `left: ${g}px; top: ${f}px;`;
26
+ const p = t.clientHeight - o.height - 2 * e;
27
+ s.value = `left: ${d}px; top: ${p}px;`;
28
28
  const b = t.offsetY + 2 * Math.floor(t.height / 2), y = t.clientHeight - b;
29
- p.value = `bottom: ${y}px;`, n.value = "left-bottom";
29
+ u.value = `bottom: ${y}px;`, n.value = "left-bottom";
30
30
  }
31
31
  } else
32
- s.value = `left: ${t.right}px; top: ${t.offsetY + t.height + e}px;`, p.value = "", n.value = "bottom";
32
+ s.value = `left: ${t.right}px; top: ${t.offsetY + t.height + e}px;`, u.value = "", n.value = "bottom";
33
33
  });
34
34
  }
35
- return w(r, o.gap), C([r, c], () => x()), (u, e) => (m(), k(H, { to: "body" }, [
35
+ return w(r, o.gap), C([r, c], () => x()), (f, e) => (g(), k(H, { to: "body" }, [
36
36
  i("div", {
37
37
  class: "popup",
38
- style: h(s.value),
38
+ style: a(s.value),
39
39
  onClick: e[0] || (e[0] = (t) => t.stopPropagation())
40
40
  }, [
41
41
  i("div", {
42
42
  ref_key: "popup",
43
43
  ref: c,
44
44
  class: Y(["popup__content", n.value]),
45
- style: h({ width: `${a.width}px` })
45
+ style: a({ width: `${h.width}px` })
46
46
  }, [
47
47
  i("div", null, [
48
- B(u.$slots, "default")
48
+ B(f.$slots, "default")
49
49
  ]),
50
- (m(), P("svg", {
51
- style: h(p.value),
50
+ (g(), P("svg", {
51
+ style: a(u.value),
52
52
  class: "beak",
53
53
  width: "5",
54
54
  height: "9",
@@ -1 +1 @@
1
- {"version":3,"file":"Popup.vue.js","sources":["../../src/components/Popup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Ref } from \"vue\";\nimport { ref } from \"vue\";\nimport { useClickOutside, usePosition } from \"@platforma-sdk/ui-vue\";\n\nconst emit = defineEmits([\"popup:close\"]);\n\nconst props = withDefaults(\n defineProps<{\n gap?: number;\n targetRef?: HTMLElement;\n width?: number;\n height?: number;\n }>(),\n {\n gap: 8,\n width: 258,\n },\n);\n\nfunction closeTooltip() {\n emit(\"popup:close\");\n}\n\nconst popup = ref<HTMLElement | undefined>();\nconst root = ref<HTMLElement | undefined>(props.targetRef);\n\nconst position = ref<\"left-bottom\" | \"bottom\">(\"bottom\");\n\nconst style = ref(\"\");\nconst beakStyle = ref(\"\");\n\nfunction usePopupPosition(el: Ref<HTMLElement | undefined>, gap = 8) {\n usePosition(el, (pos) => {\n const notEnoughHeight =\n props.height &&\n (pos.offsetY + pos.height + 3 * gap + props.height > pos.clientHeight);\n if (notEnoughHeight) {\n const left = pos.right - pos.width - gap;\n if (pos.clientHeight - pos.offsetY > props.height + gap) {\n const top = pos.offsetY\n style.value = `left: ${left}px; top: ${top}px;`;\n beakStyle.value = \"top: 16px;\";\n position.value = \"left-bottom\";\n } else {\n const top = pos.clientHeight - props.height - 2 * gap;\n style.value = `left: ${left}px; top: ${top}px;`;\n const offsetMiddleY = pos.offsetY + 2 * Math.floor(pos.height / 2);\n const bottom = pos.clientHeight - offsetMiddleY;\n beakStyle.value = `bottom: ${bottom}px;`;\n position.value = \"left-bottom\";\n }\n } else {\n style.value = `left: ${pos.right}px; top: ${pos.offsetY + pos.height + gap}px;`;\n beakStyle.value = '';\n position.value = \"bottom\";\n }\n });\n}\n\nusePopupPosition(root, props.gap);\nuseClickOutside([root, popup], () => closeTooltip());\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div class=\"popup\" :style=\"style\" @click=\"(e) => e.stopPropagation()\">\n <div\n ref=\"popup\"\n class=\"popup__content\"\n :class=\"position\"\n :style=\"{ width: `${width}px` }\"\n >\n <div>\n <slot />\n </div>\n <svg\n :style=\"beakStyle\"\n class=\"beak\"\n width=\"5\"\n height=\"9\"\n viewBox=\"0 0 3 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M4 8L0 4L4 0L4 8 Z\" />\n <polyline points=\"4,8 0,4 4,0\" />\n </svg>\n </div>\n </div>\n </Teleport>\n</template>\n"],"names":["emit","__emit","props","__props","closeTooltip","popup","ref","root","position","style","beakStyle","usePopupPosition","el","gap","usePosition","pos","left","top","offsetMiddleY","bottom","useClickOutside","_createBlock","_Teleport","_createElementVNode","_cache","e","_normalizeClass","_renderSlot","_ctx","_createElementBlock"],"mappings":";;;;;;;;;;;;AAKA,UAAMA,IAAOC,GAEPC,IAAQC;AAad,aAASC,IAAe;AACtB,MAAAJ,EAAK,aAAa;AAAA,IACpB;AAEA,UAAMK,IAAQC,EAAA,GACRC,IAAOD,EAA6BJ,EAAM,SAAS,GAEnDM,IAAWF,EAA8B,QAAQ,GAEjDG,IAAQH,EAAI,EAAE,GACdI,IAAYJ,EAAI,EAAE;AAExB,aAASK,EAAiBC,GAAkCC,IAAM,GAAG;AACnE,MAAAC,EAAYF,GAAI,CAACG,MAAQ;AAIvB,YAFEb,EAAM,UACHa,EAAI,UAAUA,EAAI,SAAS,IAAIF,IAAMX,EAAM,SAASa,EAAI,cACxC;AACnB,gBAAMC,IAAOD,EAAI,QAAQA,EAAI,QAAQF;AACrC,cAAIE,EAAI,eAAeA,EAAI,UAAUb,EAAM,SAASW,GAAK;AACvD,kBAAMI,IAAMF,EAAI;AAChB,YAAAN,EAAM,QAAQ,SAASO,CAAI,YAAYC,CAAG,OAC1CP,EAAU,QAAQ,cAClBF,EAAS,QAAQ;AAAA,UACnB,OAAO;AACL,kBAAMS,IAAMF,EAAI,eAAeb,EAAM,SAAS,IAAIW;AAClD,YAAAJ,EAAM,QAAQ,SAASO,CAAI,YAAYC,CAAG;AAC1C,kBAAMC,IAAgBH,EAAI,UAAU,IAAI,KAAK,MAAMA,EAAI,SAAS,CAAC,GAC3DI,IAASJ,EAAI,eAAeG;AAClC,YAAAR,EAAU,QAAQ,WAAWS,CAAM,OACnCX,EAAS,QAAQ;AAAA,UACnB;AAAA,QACF;AACE,UAAAC,EAAM,QAAQ,SAASM,EAAI,KAAK,YAAYA,EAAI,UAAUA,EAAI,SAASF,CAAG,OAC1EH,EAAU,QAAQ,IAClBF,EAAS,QAAQ;AAAA,MAErB,CAAC;AAAA,IACH;AAEA,WAAAG,EAAiBJ,GAAML,EAAM,GAAG,GAChCkB,EAAgB,CAACb,GAAMF,CAAK,GAAG,MAAMD,GAAc,mBAIjDiB,EAyBWC,GAAA,EAzBD,IAAG,UAAM;AAAA,MACjBC,EAuBM,OAAA;AAAA,QAvBD,OAAM;AAAA,QAAS,SAAOd,EAAA,KAAK;AAAA,QAAG,SAAKe,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAGC,MAAMA,EAAE,gBAAA;AAAA,MAAe;QAChEF,EAqBM,OAAA;AAAA,mBApBA;AAAA,UAAJ,KAAIlB;AAAA,UACJ,OAAKqB,EAAA,CAAC,kBACElB,EAAA,KAAQ,CAAA;AAAA,UACf,qBAAmBL,EAAA,KAAK,MAAA;AAAA,QAAA;UAEzBoB,EAEM,OAAA,MAAA;AAAA,YADJI,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;gBAEVC,EAWM,OAAA;AAAA,YAVH,SAAOnB,EAAA,KAAS;AAAA,YACjB,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,UAAA;YAENa,EAA+B,QAAA,EAAzB,GAAE,qBAAA,GAAoB,MAAA,EAAA;AAAA,YAC5BA,EAAiC,YAAA,EAAvB,QAAO,cAAA,GAAa,MAAA,EAAA;AAAA,UAAA;;;;;;"}
1
+ {"version":3,"file":"Popup.vue.js","sources":["../../src/components/Popup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Ref } from 'vue';\nimport { ref } from 'vue';\nimport { useClickOutside, usePosition } from '@platforma-sdk/ui-vue';\n\nconst emit = defineEmits(['popup:close']);\n\nconst props = withDefaults(\n defineProps<{\n gap?: number;\n targetRef?: HTMLElement;\n width?: number;\n height?: number;\n }>(),\n {\n gap: 8,\n width: 258,\n height: undefined,\n targetRef: undefined,\n },\n);\n\nfunction closeTooltip() {\n emit('popup:close');\n}\n\nconst popup = ref<HTMLElement | undefined>();\nconst root = ref<HTMLElement | undefined>(props.targetRef);\n\nconst position = ref<'left-bottom' | 'bottom'>('bottom');\n\nconst style = ref('');\nconst beakStyle = ref('');\n\nfunction usePopupPosition(el: Ref<HTMLElement | undefined>, gap = 8) {\n usePosition(el, (pos) => {\n const notEnoughHeight\n = props.height\n && (pos.offsetY + pos.height + 3 * gap + props.height > pos.clientHeight);\n if (notEnoughHeight) {\n const left = pos.right - pos.width - gap;\n if (pos.clientHeight - pos.offsetY > props.height + gap) {\n const top = pos.offsetY;\n style.value = `left: ${left}px; top: ${top}px;`;\n beakStyle.value = 'top: 16px;';\n position.value = 'left-bottom';\n } else {\n const top = pos.clientHeight - props.height - 2 * gap;\n style.value = `left: ${left}px; top: ${top}px;`;\n const offsetMiddleY = pos.offsetY + 2 * Math.floor(pos.height / 2);\n const bottom = pos.clientHeight - offsetMiddleY;\n beakStyle.value = `bottom: ${bottom}px;`;\n position.value = 'left-bottom';\n }\n } else {\n style.value = `left: ${pos.right}px; top: ${pos.offsetY + pos.height + gap}px;`;\n beakStyle.value = '';\n position.value = 'bottom';\n }\n });\n}\n\nusePopupPosition(root, props.gap);\nuseClickOutside([root, popup], () => closeTooltip());\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div class=\"popup\" :style=\"style\" @click=\"(e) => e.stopPropagation()\">\n <div\n ref=\"popup\"\n class=\"popup__content\"\n :class=\"position\"\n :style=\"{ width: `${width}px` }\"\n >\n <div>\n <slot />\n </div>\n <svg\n :style=\"beakStyle\"\n class=\"beak\"\n width=\"5\"\n height=\"9\"\n viewBox=\"0 0 3 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M4 8L0 4L4 0L4 8 Z\" />\n <polyline points=\"4,8 0,4 4,0\" />\n </svg>\n </div>\n </div>\n </Teleport>\n</template>\n"],"names":["emit","__emit","props","__props","closeTooltip","popup","ref","root","position","style","beakStyle","usePopupPosition","el","gap","usePosition","pos","left","top","offsetMiddleY","bottom","useClickOutside","_createBlock","_Teleport","_createElementVNode","_cache","e","_normalizeClass","_renderSlot","_ctx","_createElementBlock"],"mappings":";;;;;;;;;;;;AAKA,UAAMA,IAAOC,GAEPC,IAAQC;AAed,aAASC,IAAe;AACtB,MAAAJ,EAAK,aAAa;AAAA,IACpB;AAEA,UAAMK,IAAQC,EAAA,GACRC,IAAOD,EAA6BJ,EAAM,SAAS,GAEnDM,IAAWF,EAA8B,QAAQ,GAEjDG,IAAQH,EAAI,EAAE,GACdI,IAAYJ,EAAI,EAAE;AAExB,aAASK,EAAiBC,GAAkCC,IAAM,GAAG;AACnE,MAAAC,EAAYF,GAAI,CAACG,MAAQ;AAIvB,YAFIb,EAAM,UACFa,EAAI,UAAUA,EAAI,SAAS,IAAIF,IAAMX,EAAM,SAASa,EAAI,cAC3C;AACnB,gBAAMC,IAAOD,EAAI,QAAQA,EAAI,QAAQF;AACrC,cAAIE,EAAI,eAAeA,EAAI,UAAUb,EAAM,SAASW,GAAK;AACvD,kBAAMI,IAAMF,EAAI;AAChB,YAAAN,EAAM,QAAQ,SAASO,CAAI,YAAYC,CAAG,OAC1CP,EAAU,QAAQ,cAClBF,EAAS,QAAQ;AAAA,UACnB,OAAO;AACL,kBAAMS,IAAMF,EAAI,eAAeb,EAAM,SAAS,IAAIW;AAClD,YAAAJ,EAAM,QAAQ,SAASO,CAAI,YAAYC,CAAG;AAC1C,kBAAMC,IAAgBH,EAAI,UAAU,IAAI,KAAK,MAAMA,EAAI,SAAS,CAAC,GAC3DI,IAASJ,EAAI,eAAeG;AAClC,YAAAR,EAAU,QAAQ,WAAWS,CAAM,OACnCX,EAAS,QAAQ;AAAA,UACnB;AAAA,QACF;AACE,UAAAC,EAAM,QAAQ,SAASM,EAAI,KAAK,YAAYA,EAAI,UAAUA,EAAI,SAASF,CAAG,OAC1EH,EAAU,QAAQ,IAClBF,EAAS,QAAQ;AAAA,MAErB,CAAC;AAAA,IACH;AAEA,WAAAG,EAAiBJ,GAAML,EAAM,GAAG,GAChCkB,EAAgB,CAACb,GAAMF,CAAK,GAAG,MAAMD,GAAc,mBAIjDiB,EAyBWC,GAAA,EAzBD,IAAG,UAAM;AAAA,MACjBC,EAuBM,OAAA;AAAA,QAvBD,OAAM;AAAA,QAAS,SAAOd,EAAA,KAAK;AAAA,QAAG,SAAKe,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAGC,MAAMA,EAAE,gBAAA;AAAA,MAAe;QAChEF,EAqBM,OAAA;AAAA,mBApBA;AAAA,UAAJ,KAAIlB;AAAA,UACJ,OAAKqB,EAAA,CAAC,kBACElB,EAAA,KAAQ,CAAA;AAAA,UACf,qBAAmBL,EAAA,KAAK,MAAA;AAAA,QAAA;UAEzBoB,EAEM,OAAA,MAAA;AAAA,YADJI,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;gBAEVC,EAWM,OAAA;AAAA,YAVH,SAAOnB,EAAA,KAAS;AAAA,YACjB,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,UAAA;YAENa,EAA+B,QAAA,EAAzB,GAAE,qBAAA,GAAoB,MAAA,EAAA;AAAA,YAC5BA,EAAiC,YAAA,EAAvB,QAAO,cAAA,GAAa,MAAA,EAAA;AAAA,UAAA;;;;;;"}
@@ -1,43 +1,46 @@
1
- import { defineComponent as c, mergeModels as p, useModel as _, computed as v, ref as f, createElementBlock as r, openBlock as t, createElementVNode as l, Fragment as h, renderList as g, createBlock as V, resolveDynamicComponent as k, toDisplayString as x } from "vue";
2
- import { useSortable as L } from "@platforma-sdk/ui-vue";
3
- import R from "../icons/Reorder.vue.js";
4
- const b = { class: "aes-mapping-block" }, y = { class: "column-value column-value__with-reorder" }, B = { class: "column-value__reorder-icon" }, C = { class: "column-value__title" }, E = /* @__PURE__ */ c({
1
+ import { defineComponent as c, mergeModels as p, useModel as _, computed as v, ref as f, createElementBlock as r, openBlock as t, createElementVNode as l, Fragment as g, renderList as h, createBlock as k, resolveDynamicComponent as V, toDisplayString as x } from "vue";
2
+ import { useSortable as y } from "@platforma-sdk/ui-vue";
3
+ import L from "../icons/Reorder.vue.js";
4
+ const R = { class: "aes-mapping-block" }, b = { class: "column-value__reorder-icon" }, B = { class: "column-value__title" }, w = /* @__PURE__ */ c({
5
5
  __name: "ReorderForm",
6
6
  props: {
7
7
  modelValue: { required: !0 },
8
8
  modelModifiers: {}
9
9
  },
10
10
  emits: /* @__PURE__ */ p(["update:modelValue"], ["update:modelValue"]),
11
- setup(n, { emit: i }) {
12
- const s = _(n, "modelValue"), u = i, d = v(
11
+ setup(u, { emit: i }) {
12
+ const s = _(u, "modelValue"), d = i, m = v(
13
13
  () => s.value.map((e) => ({
14
14
  text: e.label,
15
15
  value: e.value
16
16
  }))
17
17
  ), a = f();
18
- return L(a, {
18
+ return y(a, {
19
19
  handle: ".column-value__reorder-icon",
20
20
  onChange(e) {
21
- u("update:modelValue", e.map((o) => s.value[o]));
21
+ d("update:modelValue", e.map((o) => s.value[o]));
22
22
  }
23
- }), (e, o) => (t(), r("div", b, [
23
+ }), (e, o) => (t(), r("div", R, [
24
24
  o[0] || (o[0] = l("div", { class: "aes-settings-hint" }, " Drag the rows to reorder ", -1)),
25
25
  l("div", {
26
- class: "column-values-list",
27
26
  ref_key: "optionsListRef",
28
- ref: a
27
+ ref: a,
28
+ class: "column-values-list"
29
29
  }, [
30
- (t(!0), r(h, null, g(d.value, (m) => (t(), r("div", y, [
31
- l("div", B, [
32
- (t(), V(k(R)))
30
+ (t(!0), r(g, null, h(m.value, (n) => (t(), r("div", {
31
+ key: n.value,
32
+ class: "column-value column-value__with-reorder"
33
+ }, [
34
+ l("div", b, [
35
+ (t(), k(V(L)))
33
36
  ]),
34
- l("div", C, x(m.text), 1)
35
- ]))), 256))
37
+ l("div", B, x(n.text), 1)
38
+ ]))), 128))
36
39
  ], 512)
37
40
  ]));
38
41
  }
39
42
  });
40
43
  export {
41
- E as default
44
+ w as default
42
45
  };
43
46
  //# sourceMappingURL=ReorderForm.vue.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ReorderForm.vue.js","sources":["../../src/components/ReorderForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useSortable } from '@platforma-sdk/ui-vue';\nimport { computed, ref } from 'vue';\nimport Reorder from '../icons/Reorder.vue';\n\nconst model = defineModel<{ value: string, label: string }[]>({ required: true });\n\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst optionsList = computed(() => model.value.map((v) => ({\n text: v.label,\n value: v.value,\n}))\n);\n\nconst optionsListRef = ref();\nuseSortable(optionsListRef, {\n handle: '.column-value__reorder-icon',\n onChange(indices) {\n emit('update:modelValue', indices.map((idx) => model.value[idx]));\n }\n});\n\n</script>\n\n<template>\n <div class=\"aes-mapping-block\">\n <div class=\"aes-settings-hint\">\n Drag the rows to reorder\n </div>\n <div class=\"column-values-list\" ref=\"optionsListRef\">\n <div v-for=\"item of optionsList\" class=\"column-value column-value__with-reorder\">\n <div class=\"column-value__reorder-icon\">\n <component :is=\"Reorder\" />\n </div>\n <div class=\"column-value__title\">{{ item.text }}</div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["model","_useModel","__props","emit","__emit","optionsList","computed","v","optionsListRef","ref","useSortable","indices","idx","_openBlock","_createElementBlock","_hoisted_1","_cache","_createElementVNode","_Fragment","_renderList","item","_hoisted_2","_hoisted_3","_createBlock","_resolveDynamicComponent","Reorder","_hoisted_4","_toDisplayString"],"mappings":";;;;;;;;;;;AAKA,UAAMA,IAAQC,EAA+CC,GAAA,YAAmB,GAG1EC,IAAOC,GAEPC,IAAcC;AAAA,MAAS,MAAMN,EAAM,MAAM,IAAI,CAACO,OAAO;AAAA,QACvD,MAAMA,EAAE;AAAA,QACR,OAAOA,EAAE;AAAA,MAAA,EACX;AAAA,IAAA,GAGIC,IAAiBC,EAAA;AACvB,WAAAC,EAAYF,GAAgB;AAAA,MACxB,QAAQ;AAAA,MACR,SAASG,GAAS;AACd,QAAAR,EAAK,qBAAqBQ,EAAQ,IAAI,CAACC,MAAQZ,EAAM,MAAMY,CAAG,CAAC,CAAC;AAAA,MACpE;AAAA,IAAA,CACH,cAKGC,EAAA,GAAAC,EAYM,OAZNC,GAYM;AAAA,MAXFC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAEM,OAAA,EAFD,OAAM,oBAAA,GAAoB,8BAE/B,EAAA;AAAA,MACAA,EAOM,OAAA;AAAA,QAPD,OAAM;AAAA,iBAAyB;AAAA,QAAJ,KAAIT;AAAA,MAAA;gBAChCM,EAKMI,GAAA,MAAAC,EALcd,EAAA,OAAW,CAAnBe,OAAZP,EAAA,GAAAC,EAKM,OALNO,GAKM;AAAA,UAJFJ,EAEM,OAFNK,GAEM;AAAA,aADFT,KAAAU,EAA2BC,EAAXC,CAAO,CAAA;AAAA,UAAA;UAE3BR,EAAsD,OAAtDS,GAAsDC,EAAlBP,EAAK,IAAI,GAAA,CAAA;AAAA,QAAA;;;;;"}
1
+ {"version":3,"file":"ReorderForm.vue.js","sources":["../../src/components/ReorderForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useSortable } from '@platforma-sdk/ui-vue';\nimport { computed, ref } from 'vue';\nimport Reorder from '../icons/Reorder.vue';\n\nconst model = defineModel<{ value: string; label: string }[]>({ required: true });\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst optionsList = computed(() => model.value.map((v) => ({\n text: v.label,\n value: v.value,\n})),\n);\n\nconst optionsListRef = ref();\nuseSortable(optionsListRef, {\n handle: '.column-value__reorder-icon',\n onChange(indices) {\n emit('update:modelValue', indices.map((idx) => model.value[idx]));\n },\n});\n\n</script>\n\n<template>\n <div class=\"aes-mapping-block\">\n <div class=\"aes-settings-hint\">\n Drag the rows to reorder\n </div>\n <div ref=\"optionsListRef\" class=\"column-values-list\">\n <div v-for=\"item of optionsList\" :key=\"item.value\" class=\"column-value column-value__with-reorder\">\n <div class=\"column-value__reorder-icon\">\n <component :is=\"Reorder\" />\n </div>\n <div class=\"column-value__title\">{{ item.text }}</div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["model","_useModel","__props","emit","__emit","optionsList","computed","v","optionsListRef","ref","useSortable","indices","idx","_openBlock","_createElementBlock","_hoisted_1","_cache","_createElementVNode","_Fragment","_renderList","item","_hoisted_2","_createBlock","_resolveDynamicComponent","Reorder","_hoisted_3","_toDisplayString"],"mappings":";;;;;;;;;;;AAKA,UAAMA,IAAQC,EAA+CC,GAAA,YAAmB,GAE1EC,IAAOC,GAEPC,IAAcC;AAAA,MAAS,MAAMN,EAAM,MAAM,IAAI,CAACO,OAAO;AAAA,QACzD,MAAMA,EAAE;AAAA,QACR,OAAOA,EAAE;AAAA,MAAA,EACT;AAAA,IAAA,GAGIC,IAAiBC,EAAA;AACvB,WAAAC,EAAYF,GAAgB;AAAA,MAC1B,QAAQ;AAAA,MACR,SAASG,GAAS;AAChB,QAAAR,EAAK,qBAAqBQ,EAAQ,IAAI,CAACC,MAAQZ,EAAM,MAAMY,CAAG,CAAC,CAAC;AAAA,MAClE;AAAA,IAAA,CACD,cAKCC,EAAA,GAAAC,EAYM,OAZNC,GAYM;AAAA,MAXJC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAEM,OAAA,EAFD,OAAM,oBAAA,GAAoB,8BAE/B,EAAA;AAAA,MACAA,EAOM,OAAA;AAAA,iBAPG;AAAA,QAAJ,KAAIT;AAAA,QAAiB,OAAM;AAAA,MAAA;gBAC9BM,EAKMI,GAAA,MAAAC,EALcd,EAAA,OAAW,CAAnBe,YAAZN,EAKM,OAAA;AAAA,UAL4B,KAAKM,EAAK;AAAA,UAAO,OAAM;AAAA,QAAA;UACvDH,EAEM,OAFNI,GAEM;AAAA,aADJR,KAAAS,EAA2BC,EAAXC,CAAO,CAAA;AAAA,UAAA;UAEzBP,EAAsD,OAAtDQ,GAAsDC,EAAlBN,EAAK,IAAI,GAAA,CAAA;AAAA,QAAA;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"DeleteChartIcon.vue.js","sources":["../../../../src/components/SettingsTabs/icons/DeleteChartIcon.vue"],"sourcesContent":["<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.5 3.75002C7.5 3.05967 8.05964 2.50002 8.75 2.50002L15.25 2.5C15.9404 2.5 16.5 3.05964 16.5 3.75V5.50004L20.5 5.50006V7.00006L19 7.00006H17.5L6.5 7.00004H5L3.5 7V5.5L7.5 5.50006V3.75002ZM9 5.50006L15 5.50004V4L9 4.00002V5.50006Z\" fill=\"#110529\"/>\n <path d=\"M17.5 7.00006V12.5H19V7.00006H17.5Z\" fill=\"#110529\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.5 17.75C6.5 18.9926 7.50736 20 8.75 20H12V21.5H8.75C6.67893 21.5 5 19.8211 5 17.75V8.50006H6.5V17.75Z\" fill=\"#110529\"/>\n <path d=\"M6.5 7.00004H5V8.50006H6.5V7.00004Z\" fill=\"#110529\"/>\n <path d=\"M14.75 14.5L18.25 18M21.75 21.5L18.25 18M18.25 18L21.75 14.5M18.25 18L14.75 21.5\" stroke=\"#07AD3E\" stroke-width=\"1.5\"/>\n </svg>\n</template>"],"names":["_openBlock","_createElementBlock","_hoisted_1","_cache"],"mappings":";;;EACO,OAAM;AAAA,EAA6B,OAAM;AAAA,EAAK,QAAO;AAAA,EAAK,SAAQ;AAAA,EAAY,MAAK;;;AAAxF,SAAAA,EAAA,GAAAC,EAMM,OANNC,GAMM,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA;;;;"}
1
+ {"version":3,"file":"DeleteChartIcon.vue.js","sources":["../../../../src/components/SettingsTabs/icons/DeleteChartIcon.vue"],"sourcesContent":["<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.5 3.75002C7.5 3.05967 8.05964 2.50002 8.75 2.50002L15.25 2.5C15.9404 2.5 16.5 3.05964 16.5 3.75V5.50004L20.5 5.50006V7.00006L19 7.00006H17.5L6.5 7.00004H5L3.5 7V5.5L7.5 5.50006V3.75002ZM9 5.50006L15 5.50004V4L9 4.00002V5.50006Z\" fill=\"#110529\"/>\n <path d=\"M17.5 7.00006V12.5H19V7.00006H17.5Z\" fill=\"#110529\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.5 17.75C6.5 18.9926 7.50736 20 8.75 20H12V21.5H8.75C6.67893 21.5 5 19.8211 5 17.75V8.50006H6.5V17.75Z\" fill=\"#110529\"/>\n <path d=\"M6.5 7.00004H5V8.50006H6.5V7.00004Z\" fill=\"#110529\"/>\n <path d=\"M14.75 14.5L18.25 18M21.75 21.5L18.25 18M18.25 18L21.75 14.5M18.25 18L14.75 21.5\" stroke=\"#07AD3E\" stroke-width=\"1.5\"/>\n </svg>\n</template>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_cache"],"mappings":";;;EACO,OAAM;AAAA,EAA6B,OAAM;AAAA,EAAK,QAAO;AAAA,EAAK,SAAQ;AAAA,EAAY,MAAK;;;AAAxF,SAAAA,EAAA,GAAAC,EAMM,OANNC,GAMM,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA;;;;"}