@adyen/bento-vue3 1.55.1 → 1.56.0

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 (227) hide show
  1. package/dist/@types/index.d.ts +844 -289
  2. package/dist/accordion.js +1 -1
  3. package/dist/action-bar.js +1 -1
  4. package/dist/alert.js +1 -1
  5. package/dist/assets/accordion-item.css +1 -1
  6. package/dist/assets/action-bar.css +1 -1
  7. package/dist/assets/base-modal.css +1 -1
  8. package/dist/assets/button.css +1 -1
  9. package/dist/assets/card.css +1 -1
  10. package/dist/assets/code-snippet.css +1 -1
  11. package/dist/assets/dashed-underline.css +1 -1
  12. package/dist/assets/data-grid-template.css +1 -1
  13. package/dist/assets/data-grid.css +1 -1
  14. package/dist/assets/dialog-page.css +1 -1
  15. package/dist/assets/file-uploader.css +1 -1
  16. package/dist/assets/filter-bar.css +1 -1
  17. package/dist/assets/input-field-password.css +1 -1
  18. package/dist/assets/inspector.css +1 -1
  19. package/dist/assets/menu.css +1 -1
  20. package/dist/assets/modal-fullscreen.css +1 -1
  21. package/dist/assets/popover.css +1 -1
  22. package/dist/assets/sidepanel.css +1 -1
  23. package/dist/assets/summary-grid.css +1 -1
  24. package/dist/assets/tabs.css +1 -1
  25. package/dist/assets/teleport.css +1 -1
  26. package/dist/assets/timeline-item.css +1 -1
  27. package/dist/button.js +3 -3
  28. package/dist/card.js +1 -1
  29. package/dist/checkbox.js +2 -2
  30. package/dist/chip.js +1 -1
  31. package/dist/chunks/{accordion-item.DLyCF015.js → accordion-item.CihL7JaZ.js} +2 -2
  32. package/dist/chunks/{accordion-item.DLyCF015.js.map → accordion-item.CihL7JaZ.js.map} +1 -1
  33. package/dist/chunks/{action-bar.CDOaDenE.js → action-bar.CD5FQjE9.js} +6 -6
  34. package/dist/chunks/{action-bar.CDOaDenE.js.map → action-bar.CD5FQjE9.js.map} +1 -1
  35. package/dist/chunks/{alert.4SefwHLO.js → alert.CFb4Sejw.js} +3 -3
  36. package/dist/chunks/{alert.4SefwHLO.js.map → alert.CFb4Sejw.js.map} +1 -1
  37. package/dist/chunks/{base-modal.DZy1WuJs.js → base-modal.qhldLovE.js} +5 -5
  38. package/dist/chunks/{base-modal.DZy1WuJs.js.map → base-modal.qhldLovE.js.map} +1 -1
  39. package/dist/chunks/{button-actions-with-menu.DQRTu42W.js → button-actions-with-menu.CxB1fVvx.js} +4 -4
  40. package/dist/chunks/{button-actions-with-menu.DQRTu42W.js.map → button-actions-with-menu.CxB1fVvx.js.map} +1 -1
  41. package/dist/chunks/{button-actions.N99QthUv.js → button-actions.ODJKaCW7.js} +3 -3
  42. package/dist/chunks/{button-actions.N99QthUv.js.map → button-actions.ODJKaCW7.js.map} +1 -1
  43. package/dist/chunks/{button.DEVuqLVT.js → button.BHZgsGkp.js} +43 -41
  44. package/dist/chunks/button.BHZgsGkp.js.map +1 -0
  45. package/dist/chunks/{calendar.CNt90BvO.js → calendar.Dymq4e0Y.js} +4 -4
  46. package/dist/chunks/{calendar.CNt90BvO.js.map → calendar.Dymq4e0Y.js.map} +1 -1
  47. package/dist/chunks/{card.E2xhS_6Z.js → card.DQ6g6hqK.js} +3 -3
  48. package/dist/chunks/{card.E2xhS_6Z.js.map → card.DQ6g6hqK.js.map} +1 -1
  49. package/dist/chunks/{checkbox-group.BMzsgOeI.js → checkbox-group.DFmUrvgx.js} +4 -4
  50. package/dist/chunks/{checkbox-group.BMzsgOeI.js.map → checkbox-group.DFmUrvgx.js.map} +1 -1
  51. package/dist/chunks/{checkbox.BIaD03Bg.js → checkbox.Bti_jnp2.js} +17 -17
  52. package/dist/chunks/{checkbox.BIaD03Bg.js.map → checkbox.Bti_jnp2.js.map} +1 -1
  53. package/dist/chunks/{chip.3T0x6FuI.js → chip.DbhxDQiT.js} +2 -2
  54. package/dist/chunks/{chip.3T0x6FuI.js.map → chip.DbhxDQiT.js.map} +1 -1
  55. package/dist/chunks/code-snippet.Df5XwyWD.js +334 -0
  56. package/dist/chunks/code-snippet.Df5XwyWD.js.map +1 -0
  57. package/dist/chunks/{controls-group.DJqvAWte.js → controls-group.DgrzEh4C.js} +2 -2
  58. package/dist/chunks/{controls-group.DJqvAWte.js.map → controls-group.DgrzEh4C.js.map} +1 -1
  59. package/dist/chunks/{copy.MId-I684.js → copy.CfFh4b_c.js} +3 -3
  60. package/dist/chunks/{copy.MId-I684.js.map → copy.CfFh4b_c.js.map} +1 -1
  61. package/dist/chunks/{country.D0WFfaql.js → country.BhAcCmRx.js} +2 -2
  62. package/dist/chunks/{country.D0WFfaql.js.map → country.BhAcCmRx.js.map} +1 -1
  63. package/dist/chunks/{dashboard-section.CrbSjoA8.js → dashboard-section.tza4iYcv.js} +3 -3
  64. package/dist/chunks/{dashboard-section.CrbSjoA8.js.map → dashboard-section.tza4iYcv.js.map} +1 -1
  65. package/dist/chunks/dashed-underline.B2cIJkg_.js +98 -0
  66. package/dist/chunks/dashed-underline.B2cIJkg_.js.map +1 -0
  67. package/dist/chunks/data-grid-template.PGPytWvk.js +111 -0
  68. package/dist/chunks/data-grid-template.PGPytWvk.js.map +1 -0
  69. package/dist/chunks/{data-grid.CsyayKK3.js → data-grid.DsZQ-F9m.js} +1328 -1299
  70. package/dist/chunks/data-grid.DsZQ-F9m.js.map +1 -0
  71. package/dist/chunks/{date-picker.CjwoOQ3B.js → date-picker.8jgg3MJm.js} +7 -7
  72. package/dist/chunks/{date-picker.CjwoOQ3B.js.map → date-picker.8jgg3MJm.js.map} +1 -1
  73. package/dist/chunks/{date-range-picker.DGY91Rwc.js → date-range-picker.uGwtO7SA.js} +10 -10
  74. package/dist/chunks/{date-range-picker.DGY91Rwc.js.map → date-range-picker.uGwtO7SA.js.map} +1 -1
  75. package/dist/chunks/{date.DoJuTLhO.js → date.CKXySBQv.js} +2 -2
  76. package/dist/chunks/{date.DoJuTLhO.js.map → date.CKXySBQv.js.map} +1 -1
  77. package/dist/chunks/{dialog-page.BRlAYf5w.js → dialog-page.MLFdqTcL.js} +3 -3
  78. package/dist/chunks/{dialog-page.BRlAYf5w.js.map → dialog-page.MLFdqTcL.js.map} +1 -1
  79. package/dist/chunks/{dropdown-default-textbox.CTyt2klK.js → dropdown-default-textbox.BNhy-QDH.js} +2 -2
  80. package/dist/chunks/{dropdown-default-textbox.CTyt2klK.js.map → dropdown-default-textbox.BNhy-QDH.js.map} +1 -1
  81. package/dist/chunks/{dropdown-tag.CJtSH5cZ.js → dropdown-tag.DEAOevYN.js} +3 -3
  82. package/dist/chunks/{dropdown-tag.CJtSH5cZ.js.map → dropdown-tag.DEAOevYN.js.map} +1 -1
  83. package/dist/chunks/{dropdown.CQvyjn6d.js → dropdown.CVa4_qCe.js} +6 -6
  84. package/dist/chunks/{dropdown.CQvyjn6d.js.map → dropdown.CVa4_qCe.js.map} +1 -1
  85. package/dist/chunks/{empty-state.m0U14LVw.js → empty-state.DiXLZmQJ.js} +2 -2
  86. package/dist/chunks/{empty-state.m0U14LVw.js.map → empty-state.DiXLZmQJ.js.map} +1 -1
  87. package/dist/chunks/{error-message.CMgsMDny.js → error-message.CPw3y44N.js} +2 -2
  88. package/dist/chunks/{error-message.CMgsMDny.js.map → error-message.CPw3y44N.js.map} +1 -1
  89. package/dist/chunks/es6.BtaxuP0b.js.map +1 -1
  90. package/dist/chunks/{file-uploader.D3KUe-MO.js → file-uploader.Dv4sh1IO.js} +477 -452
  91. package/dist/chunks/file-uploader.Dv4sh1IO.js.map +1 -0
  92. package/dist/chunks/filter-bar.DfIcZ5dX.js +2886 -0
  93. package/dist/chunks/filter-bar.DfIcZ5dX.js.map +1 -0
  94. package/dist/chunks/{fixed-scroller.BNP4SR5J.js → fixed-scroller.DsTyshyt.js} +3 -3
  95. package/dist/chunks/{fixed-scroller.BNP4SR5J.js.map → fixed-scroller.DsTyshyt.js.map} +1 -1
  96. package/dist/chunks/{footer-actions.DmGDpPBW.js → footer-actions.C00o4tuW.js} +3 -3
  97. package/dist/chunks/{footer-actions.DmGDpPBW.js.map → footer-actions.C00o4tuW.js.map} +1 -1
  98. package/dist/chunks/{form-layout-title.P5ajTo4C.js → form-layout-title.dcT8eXwc.js} +2 -2
  99. package/dist/chunks/{form-layout-title.P5ajTo4C.js.map → form-layout-title.dcT8eXwc.js.map} +1 -1
  100. package/dist/chunks/{header-with-views.BJIQZVAq.js → header-with-views.DEn9HFkT.js} +14 -14
  101. package/dist/chunks/{header-with-views.BJIQZVAq.js.map → header-with-views.DEn9HFkT.js.map} +1 -1
  102. package/dist/chunks/{header.vHSsdURt.js → header.hDkWwQuQ.js} +5 -5
  103. package/dist/chunks/{header.vHSsdURt.js.map → header.hDkWwQuQ.js.map} +1 -1
  104. package/dist/chunks/{i18n.D9azDLPe.js → i18n.B6g5VX0q.js} +1050 -1020
  105. package/dist/chunks/i18n.B6g5VX0q.js.map +1 -0
  106. package/dist/chunks/{info-icon-with-popover.CXaaxjeT.js → info-icon-with-popover.COJrCw_o.js} +3 -3
  107. package/dist/chunks/{info-icon-with-popover.CXaaxjeT.js.map → info-icon-with-popover.COJrCw_o.js.map} +1 -1
  108. package/dist/chunks/{input-field-password.CWr26esx.js → input-field-password._CliYJ7N.js} +86 -81
  109. package/dist/chunks/{input-field-password.CWr26esx.js.map → input-field-password._CliYJ7N.js.map} +1 -1
  110. package/dist/chunks/{input-field-phone-number.zf8WxBCn.js → input-field-phone-number.WPcQbE3z.js} +4 -4
  111. package/dist/chunks/{input-field-phone-number.zf8WxBCn.js.map → input-field-phone-number.WPcQbE3z.js.map} +1 -1
  112. package/dist/chunks/{input-field.CR262X1w.js → input-field.Cr1r2STY.js} +4 -4
  113. package/dist/chunks/{input-field.CR262X1w.js.map → input-field.Cr1r2STY.js.map} +1 -1
  114. package/dist/chunks/{inspector.types.YK45k4D_.js → inspector.types.D5QBC3-G.js} +3 -3
  115. package/dist/chunks/{inspector.types.YK45k4D_.js.map → inspector.types.D5QBC3-G.js.map} +1 -1
  116. package/dist/chunks/{menu.CVMSGvtb.js → menu.B0q9q97N.js} +17 -16
  117. package/dist/chunks/{menu.CVMSGvtb.js.map → menu.B0q9q97N.js.map} +1 -1
  118. package/dist/chunks/{modal-fullscreen.Cqlf6PWo.js → modal-fullscreen.BgqNc9jE.js} +5 -5
  119. package/dist/chunks/{modal-fullscreen.Cqlf6PWo.js.map → modal-fullscreen.BgqNc9jE.js.map} +1 -1
  120. package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.dXxru4S9.js → modal.vue_vue_type_script_setup_true_lang.Dr847POU.js} +6 -6
  121. package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.dXxru4S9.js.map → modal.vue_vue_type_script_setup_true_lang.Dr847POU.js.map} +1 -1
  122. package/dist/chunks/{pagination.C65tc-nX.js → pagination.Bi5BwIWq.js} +4 -4
  123. package/dist/chunks/{pagination.C65tc-nX.js.map → pagination.Bi5BwIWq.js.map} +1 -1
  124. package/dist/chunks/{popover.DjbACET6.js → popover.R5OM_tFu.js} +3 -3
  125. package/dist/chunks/{popover.DjbACET6.js.map → popover.R5OM_tFu.js.map} +1 -1
  126. package/dist/chunks/{promo-banner.ZCfJQh-S.js → promo-banner.DFt2dVxk.js} +3 -3
  127. package/dist/chunks/{promo-banner.ZCfJQh-S.js.map → promo-banner.DFt2dVxk.js.map} +1 -1
  128. package/dist/chunks/{radio-group.Tgf3BF5X.js → radio-group.muZVaVEm.js} +3 -3
  129. package/dist/chunks/{radio-group.Tgf3BF5X.js.map → radio-group.muZVaVEm.js.map} +1 -1
  130. package/dist/chunks/{search-bar.CTn5DIQZ.js → search-bar.DlVK3bBQ.js} +4 -4
  131. package/dist/chunks/{search-bar.CTn5DIQZ.js.map → search-bar.DlVK3bBQ.js.map} +1 -1
  132. package/dist/chunks/{secondary-nav.CnE-aV2P.js → secondary-nav.CIEVFTYS.js} +3 -3
  133. package/dist/chunks/{secondary-nav.CnE-aV2P.js.map → secondary-nav.CIEVFTYS.js.map} +1 -1
  134. package/dist/chunks/{selection-card-group.C2OFZgKd.js → selection-card-group.BgANSy3b.js} +11 -11
  135. package/dist/chunks/{selection-card-group.C2OFZgKd.js.map → selection-card-group.BgANSy3b.js.map} +1 -1
  136. package/dist/chunks/{sidepanel.Drn-lKR3.js → sidepanel.BjR0Ab22.js} +5 -5
  137. package/dist/chunks/{sidepanel.Drn-lKR3.js.map → sidepanel.BjR0Ab22.js.map} +1 -1
  138. package/dist/chunks/{step.BGFaHGFO.js → step.7l-t-eN9.js} +2 -2
  139. package/dist/chunks/{step.BGFaHGFO.js.map → step.7l-t-eN9.js.map} +1 -1
  140. package/dist/chunks/{structured-list-item.CWiwoP5F.js → structured-list-item.BMsATRrU.js} +4 -4
  141. package/dist/chunks/{structured-list-item.CWiwoP5F.js.map → structured-list-item.BMsATRrU.js.map} +1 -1
  142. package/dist/chunks/{summary-grid.types.DOYW579A.js → summary-grid.types.lGX16F4w.js} +126 -114
  143. package/dist/chunks/summary-grid.types.lGX16F4w.js.map +1 -0
  144. package/dist/chunks/{tabs.DZk78MLK.js → tabs.BVuOvNxx.js} +17 -17
  145. package/dist/chunks/{tabs.DZk78MLK.js.map → tabs.BVuOvNxx.js.map} +1 -1
  146. package/dist/chunks/{teleport.zSiKZmRE.js → teleport.CfGWjxe2.js} +17 -26
  147. package/dist/chunks/teleport.CfGWjxe2.js.map +1 -0
  148. package/dist/chunks/{textarea.CR7su54i.js → textarea.CAc_VYFm.js} +4 -4
  149. package/dist/chunks/{textarea.CR7su54i.js.map → textarea.CAc_VYFm.js.map} +1 -1
  150. package/dist/chunks/timeline-item.BQ4qiBii.js +567 -0
  151. package/dist/chunks/timeline-item.BQ4qiBii.js.map +1 -0
  152. package/dist/chunks/{toast.DxVfamh-.js → toast.BOpWHAfu.js} +3 -3
  153. package/dist/chunks/{toast.DxVfamh-.js.map → toast.BOpWHAfu.js.map} +1 -1
  154. package/dist/chunks/{toggle-button.D-9TFTy8.js → toggle-button.E0VQtyEX.js} +2 -2
  155. package/dist/chunks/{toggle-button.D-9TFTy8.js.map → toggle-button.E0VQtyEX.js.map} +1 -1
  156. package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.ENhKvQLv.js → tutorial.vue_vue_type_script_setup_true_lang.CTx9Z9xB.js} +5 -5
  157. package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.ENhKvQLv.js.map → tutorial.vue_vue_type_script_setup_true_lang.CTx9Z9xB.js.map} +1 -1
  158. package/dist/chunks/{use-cached-selected-values.CQKeFUJd.js → use-cached-selected-values.DHUa2Emx.js} +6 -6
  159. package/dist/chunks/{use-cached-selected-values.CQKeFUJd.js.map → use-cached-selected-values.DHUa2Emx.js.map} +1 -1
  160. package/dist/chunks/use-click-outside.BnhTgpSt.js +14 -0
  161. package/dist/chunks/use-click-outside.BnhTgpSt.js.map +1 -0
  162. package/dist/chunks/{use-country-items.BMhCqIWd.js → use-country-items.4kZgVg_l.js} +2 -2
  163. package/dist/chunks/{use-country-items.BMhCqIWd.js.map → use-country-items.4kZgVg_l.js.map} +1 -1
  164. package/dist/code-snippet.js +1 -1
  165. package/dist/country.js +1 -1
  166. package/dist/dashboard-template.js +1 -1
  167. package/dist/dashed-underline.js +1 -1
  168. package/dist/data-grid-template.js +1 -1
  169. package/dist/data-grid.js +1 -1
  170. package/dist/date-picker.js +2 -2
  171. package/dist/date-range-picker.js +2 -2
  172. package/dist/date.js +1 -1
  173. package/dist/dropdown.js +4 -4
  174. package/dist/empty-state.js +1 -1
  175. package/dist/file-uploader.js +1 -1
  176. package/dist/filter-bar.js +1 -1
  177. package/dist/form-layout.js +1 -1
  178. package/dist/header-with-views.js +1 -1
  179. package/dist/header.js +1 -1
  180. package/dist/index.js +55 -55
  181. package/dist/input-field-password.js +1 -1
  182. package/dist/input-field-phone-number.js +1 -1
  183. package/dist/input-field.js +1 -1
  184. package/dist/inspector.js +1 -1
  185. package/dist/internal.js +11 -11
  186. package/dist/menu.js +1 -1
  187. package/dist/modal-fullscreen.js +1 -1
  188. package/dist/modal.js +2 -2
  189. package/dist/pagination.js +1 -1
  190. package/dist/popover.js +1 -1
  191. package/dist/promo-banner.js +1 -1
  192. package/dist/radio-group.js +1 -1
  193. package/dist/search-bar.js +2 -2
  194. package/dist/secondary-nav.js +1 -1
  195. package/dist/selection-card.js +1 -1
  196. package/dist/sidepanel.js +1 -1
  197. package/dist/stepper.js +1 -1
  198. package/dist/structured-list.js +1 -1
  199. package/dist/styles/bento-dark.css +13 -2
  200. package/dist/styles/bento-light.css +13 -2
  201. package/dist/styles/bento.css +13 -2
  202. package/dist/styles/legacy.css +14 -4
  203. package/dist/styles/styleguide.css +13 -2
  204. package/dist/summary-grid.js +1 -1
  205. package/dist/tabs.js +1 -1
  206. package/dist/textarea.js +1 -1
  207. package/dist/timeline.js +1 -1
  208. package/dist/toast.js +1 -1
  209. package/dist/tutorial.js +1 -1
  210. package/dist/web-types.json +1 -1
  211. package/package.json +5 -5
  212. package/dist/chunks/button.DEVuqLVT.js.map +0 -1
  213. package/dist/chunks/code-snippet.DJgiqDzZ.js +0 -422
  214. package/dist/chunks/code-snippet.DJgiqDzZ.js.map +0 -1
  215. package/dist/chunks/dashed-underline.DWhGZIhS.js +0 -80
  216. package/dist/chunks/dashed-underline.DWhGZIhS.js.map +0 -1
  217. package/dist/chunks/data-grid-template.LlK-7o84.js +0 -93
  218. package/dist/chunks/data-grid-template.LlK-7o84.js.map +0 -1
  219. package/dist/chunks/data-grid.CsyayKK3.js.map +0 -1
  220. package/dist/chunks/file-uploader.D3KUe-MO.js.map +0 -1
  221. package/dist/chunks/filter-bar.cRJmUX-v.js +0 -2771
  222. package/dist/chunks/filter-bar.cRJmUX-v.js.map +0 -1
  223. package/dist/chunks/i18n.D9azDLPe.js.map +0 -1
  224. package/dist/chunks/summary-grid.types.DOYW579A.js.map +0 -1
  225. package/dist/chunks/teleport.zSiKZmRE.js.map +0 -1
  226. package/dist/chunks/timeline-item.BhQp0ICP.js +0 -560
  227. package/dist/chunks/timeline-item.BhQp0ICP.js.map +0 -1
@@ -1,422 +0,0 @@
1
- import { defineComponent as z, ref as y, computed as h, shallowRef as M, onMounted as G, watch as X, watchEffect as F, resolveComponent as i, createElementBlock as v, openBlock as o, normalizeClass as Q, createCommentVNode as c, createBlock as g, createElementVNode as C, createVNode as S, mergeProps as K, withCtx as b, createTextVNode as Y, toDisplayString as $, renderSlot as q, normalizeProps as ee, guardReactiveProps as te } from "vue";
2
- import { s as ne, H as ae, t, L as oe, a as se, b as ie, c as le, p as re, j as ce, d as de, x as ge, e as pe, E as ue, h as me, k as fe, C as w, f as H, i as he, g as D, l as be, m as Oe } from "./codemirror.Zv80n3Z2.js";
3
- import { b as ye, c as ve, d as Ce, e as Se } from "./es6.BtaxuP0b.js";
4
- import { B as _e } from "./dropdown.CQvyjn6d.js";
5
- import { B as Le } from "./button.DEVuqLVT.js";
6
- import { B as Ne } from "./typography.DN5eC5ch.js";
7
- import "./events.FNmSWp_P.js";
8
- import { B as Pe } from "./tooltip.BkBDReK0.js";
9
- import { B as Te } from "./loading-indicator.DEepb9Wl.js";
10
- import { u as ke } from "./i18n.D9azDLPe.js";
11
- import { E as Ee } from "./expand.DusW7F7p.js";
12
- import { h as Ie } from "./base-modal.DZy1WuJs.js";
13
- import { C as Ae } from "./copy.MId-I684.js";
14
- import { _ as Re } from "./_plugin-vue_export-helper.CHgC5LLL.js";
15
- import "../assets/code-snippet.css";
16
- const $e = {
17
- red: ye,
18
- orange: Se,
19
- green: ve,
20
- blue: Ce,
21
- invalid: "#ffffff"
22
- }, we = (e, n) => ae.define([
23
- {
24
- tag: t.keyword,
25
- color: e.red
26
- },
27
- {
28
- tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
29
- color: e.green
30
- },
31
- {
32
- tag: [t.function(t.variableName), t.labelName],
33
- color: e.blue
34
- },
35
- {
36
- tag: [t.color, t.constant(t.name), t.standard(t.name)],
37
- color: e.red
38
- },
39
- {
40
- tag: [t.definition(t.name), ...n !== "json" ? [t.separator] : []],
41
- color: e.red
42
- },
43
- {
44
- tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
45
- color: e.orange
46
- },
47
- {
48
- tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
49
- color: e.blue
50
- },
51
- {
52
- tag: [t.meta, t.comment],
53
- color: e.orange
54
- },
55
- {
56
- tag: t.strong,
57
- fontWeight: "bold"
58
- },
59
- {
60
- tag: t.emphasis,
61
- fontStyle: "italic"
62
- },
63
- {
64
- tag: t.strikethrough,
65
- textDecoration: "line-through"
66
- },
67
- {
68
- tag: t.link,
69
- color: e.orange,
70
- textDecoration: "underline"
71
- },
72
- {
73
- tag: t.heading,
74
- fontWeight: "bold",
75
- color: e.blue
76
- },
77
- {
78
- tag: [t.atom, t.bool, t.special(t.variableName)],
79
- color: e.red
80
- },
81
- {
82
- tag: [t.processingInstruction, t.string, t.inserted],
83
- color: e.blue
84
- },
85
- {
86
- tag: t.invalid,
87
- color: e.invalid
88
- }
89
- ]), Be = (e) => ne(we($e, e));
90
- var _ = /* @__PURE__ */ ((e) => (e.INLINE = "inline", e.SINGLELINE = "singleline", e.MULTILINE = "multiline", e))(_ || {}), s = /* @__PURE__ */ ((e) => (e.JSON = "json", e.XML = "xml", e.JAVA = "java", e.JAVASCRIPT = "javascript", e.PYTHON = "python", e.CSV = "csv", e))(s || {}), O = /* @__PURE__ */ ((e) => (e.ACTION = "action", e.CHANGE = "change", e))(O || {});
91
- const Ve = ie.deserialize({
92
- version: 14,
93
- states: "nQVQPOOOOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOOQO-E6_-E6_",
94
- stateData: "g~OWOS~OQPORPOSPO~OQRSR~",
95
- goto: "eYPPPPPZPPPaQRORSRTQOR",
96
- nodeNames: "⚠ Program String Separator Value",
97
- maxTerm: 9,
98
- skippedNodes: [0],
99
- repeatNodeCount: 1,
100
- tokenData: "'Y~RZOYtYZ!cZrtrs!hs|t|}'T}!]t!]!^'T!^;'St;'S;=`!]<%lOt~yUS~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~!`P;=`<%lt~!hOW~~!m]S~OY!hYZ#fZr!hrs%Ss|!h|}#f}!]!h!]!^#f!^#O!h#O#P%m#P;'S!h;'S;=`&}<%lO!h~#iVOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|<%lO#f~$TOQ~~$WRO;'S#f;'S;=`$a;=`O#f~$dWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l#f<%lO#f~%PP;=`<%l#f~%ZUQ~S~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~%rYS~OY!hYZ#fZ|!h|}#f}!]!h!]!^#f!^;'S!h;'S;=`&b;=`<%l#f<%lO!h~&eWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l!h<%lO#f~'QP;=`<%l!h~'YOR~",
101
- tokenizers: [0],
102
- topRules: { Program: [0, 1] },
103
- tokenPrec: 18
104
- }), Me = se.define({
105
- parser: Ve.configure({
106
- props: [
107
- le({
108
- Separator: t.separator,
109
- Value: t.string,
110
- String: t.string,
111
- LineComment: t.lineComment,
112
- "( )": t.paren
113
- })
114
- ]
115
- })
116
- });
117
- function Qe() {
118
- return new oe(Me);
119
- }
120
- const Ye = {
121
- [s.JSON]: pe,
122
- [s.XML]: ge,
123
- [s.JAVASCRIPT]: de,
124
- [s.JAVA]: ce,
125
- [s.PYTHON]: re,
126
- [s.CSV]: Qe
127
- }, He = (e) => async () => Ye[e], De = (e, n) => {
128
- const l = e.doc.lineAt(n.from), a = /^\s*/.exec(l.text);
129
- return a ? a[0] : "";
130
- }, je = {
131
- key: "Enter",
132
- run: ({ state: e, dispatch: n }) => {
133
- const l = e.changeByRange((a) => {
134
- const p = `
135
- ${De(e, a)}`;
136
- return {
137
- changes: { from: a.from, to: a.to, insert: p },
138
- range: ue.cursor(a.from + p.length)
139
- };
140
- });
141
- return n(e.update(l, { scrollIntoView: !0, userEvent: "input" })), !0;
142
- }
143
- }, j = {
144
- "en-US": {
145
- expand: "Expand",
146
- nothingToDisplay: "Nothing to display",
147
- run: "Run"
148
- },
149
- "ja-JP": {
150
- expand: "展開",
151
- nothingToDisplay: "表示するものがありません"
152
- },
153
- "pt-BR": {
154
- expand: "Expandir",
155
- nothingToDisplay: "Nada para exibir"
156
- }
157
- }, xe = z({
158
- i18n: { messages: j },
159
- name: "bento-code-snippet",
160
- components: {
161
- BentoTypography: Ne,
162
- BentoButton: Le,
163
- BentoDropdown: _e,
164
- Copy: Ae,
165
- BaseModal: Ie,
166
- BentoLoadingIndicator: Te,
167
- ExpandIcon: Ee
168
- },
169
- directives: { BentoTooltipDirective: Pe },
170
- props: {
171
- /**
172
- * Defines the variant of code-snippet
173
- */
174
- variant: {
175
- type: String,
176
- default: _.MULTILINE,
177
- validator: (e) => Object.values(_).includes(e)
178
- },
179
- /**
180
- * Language name for syntax highlighting rules
181
- */
182
- lang: {
183
- type: String,
184
- default: s.JSON,
185
- validator: (e) => Object.values(s).includes(e)
186
- },
187
- /**
188
- * Label to show in the action-bar, describing the language
189
- */
190
- langLabel: {
191
- type: String,
192
- default: null
193
- },
194
- /**
195
- * The code content
196
- */
197
- content: {
198
- type: String,
199
- default: ""
200
- },
201
- /**
202
- * Allows editing of the code-snippet content by the user
203
- */
204
- editable: {
205
- type: Boolean,
206
- default: !1
207
- },
208
- /**
209
- * Displays a button that when clicked will emit an action event
210
- * Leaves to the parent component the logic of what to do with it
211
- */
212
- actionable: {
213
- type: Boolean,
214
- default: !1
215
- },
216
- /**
217
- * Displays a button that can expand the codeblock into a modal to easily
218
- * view large blocks of code.
219
- */
220
- expandable: {
221
- type: Boolean,
222
- default: !1
223
- },
224
- /**
225
- * Displays a button that when clicked will emit a run event
226
- * Leaves to the parent component the logic of what to do with it
227
- */
228
- actionableText: {
229
- type: String,
230
- default: "run"
231
- },
232
- /**
233
- * Toggles the loading indicator within the action bar
234
- */
235
- loading: {
236
- type: Boolean,
237
- default: !1
238
- }
239
- },
240
- emits: [O.ACTION, O.CHANGE],
241
- setup(e, { emit: n }) {
242
- const { t: l } = ke({ messages: j }), a = y(null), L = [], p = () => {
243
- }, N = h(() => e.langLabel ?? e.lang.toUpperCase()), d = h(() => e.variant === _.INLINE), P = h(() => ({
244
- "b-code-snippet--inline": d.value,
245
- "b-code-snippet--scrollable": !d.value
246
- })), T = h(() => ({
247
- "b-code-snippet__code-area-content--editable": e.editable
248
- })), k = He(e.lang), u = M(), m = M(), E = new w(), f = new w(), x = new w(), r = y(null), I = y(0);
249
- G(async () => {
250
- const A = await k();
251
- r.value = e.content;
252
- const U = ({ state: R }) => {
253
- r.value = R.doc.toString();
254
- }, B = [
255
- me(),
256
- fe.of([he, je]),
257
- E.of(A()),
258
- f.of(Be(e.lang)),
259
- x.of(D.readOnly.of(!e.editable)),
260
- H.updateListener.of((R) => U(R))
261
- ];
262
- e.variant === "multiline" && B.push([be(), Oe()]);
263
- const V = D.create({
264
- doc: e.content,
265
- extensions: [...B]
266
- });
267
- I.value = V.doc.length, m.value = new H({
268
- state: V,
269
- parent: u.value
270
- });
271
- }), X(
272
- () => e.content,
273
- () => {
274
- if (e.content !== r.value) {
275
- const A = e.content.length;
276
- m.value.dispatch({
277
- changes: {
278
- from: 0,
279
- to: I.value,
280
- insert: e.content
281
- }
282
- }), I.value = A;
283
- }
284
- }
285
- );
286
- const Z = h(() => l(e.actionableText)), J = () => {
287
- n(O.ACTION, r.value);
288
- };
289
- F(() => {
290
- r.value !== null && n(O.CHANGE, r.value);
291
- });
292
- const W = y(!1);
293
- return {
294
- // Values
295
- availableLanguages: L,
296
- codeAreaContentConditionalClasses: T,
297
- conditionalClasses: P,
298
- container: u,
299
- currentContents: r,
300
- displayedLang: N,
301
- editor: m,
302
- selectedLanguage: a,
303
- showModal: W,
304
- isInlineVariant: d,
305
- // Methods
306
- handleChangeLanguage: p,
307
- onActionClicked: J,
308
- runText: Z,
309
- // Translations
310
- t: l
311
- };
312
- }
313
- }), Ze = {
314
- key: 0,
315
- class: "b-code-snippet__action-bar"
316
- }, Je = { class: "b-code-snippet__action-bar--start" }, We = { class: "b-code-snippet__action-bar--end" }, Ue = {
317
- key: 1,
318
- class: "b-code-snippet__code-area"
319
- }, ze = { key: 2 }, Ge = { class: "b-code-snippet__empty-state" };
320
- function Xe(e, n, l, a, L, p) {
321
- const N = i("bento-dropdown"), d = i("bento-typography"), P = i("bento-loading-indicator"), T = i("copy"), k = i("expand-icon"), u = i("bento-button"), m = i("bento-code-snippet"), E = i("base-modal");
322
- return o(), v("div", {
323
- class: Q(["b-code-snippet", e.conditionalClasses])
324
- }, [
325
- e.isInlineVariant ? c("", !0) : (o(), v("section", Ze, [
326
- C("div", Je, [
327
- e.availableLanguages.length > 0 ? (o(), g(N, K({
328
- key: 0,
329
- modelValue: e.selectedLanguage,
330
- "onUpdate:modelValue": n[0] || (n[0] = (f) => e.selectedLanguage = f)
331
- }, e.$props, {
332
- disabled: e.availableLanguages.length === 1,
333
- items: e.availableLanguages,
334
- class: "b-code-snippet__language-picker",
335
- onInput: e.handleChangeLanguage
336
- }), null, 16, ["modelValue", "disabled", "items", "onInput"])) : c("", !0),
337
- S(d, {
338
- el: "span",
339
- stronger: ""
340
- }, {
341
- default: b(() => [
342
- Y($(e.displayedLang), 1)
343
- ]),
344
- _: 1
345
- })
346
- ]),
347
- C("div", We, [
348
- e.loading ? (o(), g(P, { key: 0 })) : c("", !0),
349
- e.currentContents !== null ? (o(), g(T, {
350
- key: 1,
351
- class: "b-structured-list__icon",
352
- text: e.currentContents
353
- }, null, 8, ["text"])) : c("", !0),
354
- e.expandable ? (o(), g(u, {
355
- key: 2,
356
- variant: "tertiary",
357
- condensed: "",
358
- "aria-label": e.t("expand"),
359
- onClick: n[1] || (n[1] = (f) => e.showModal = !0)
360
- }, {
361
- iconLeft: b(() => [
362
- S(k)
363
- ]),
364
- _: 1
365
- }, 8, ["aria-label"])) : c("", !0),
366
- e.actionable ? (o(), g(u, {
367
- key: 3,
368
- variant: "primary",
369
- tertiary: "",
370
- condensed: "",
371
- onClick: e.onActionClicked
372
- }, {
373
- iconLeft: b(() => [
374
- S(d, {
375
- el: "span",
376
- class: "b-code-snippet__action-button"
377
- }, {
378
- default: b(() => [
379
- Y($(e.runText), 1)
380
- ]),
381
- _: 1
382
- })
383
- ]),
384
- _: 1
385
- }, 8, ["onClick"])) : c("", !0)
386
- ])
387
- ])),
388
- e.content || e.editable ? (o(), v("code", Ue, [
389
- C("div", {
390
- ref: "container",
391
- class: Q(["b-code-snippet__code-area-content", e.codeAreaContentConditionalClasses])
392
- }, null, 2)
393
- ])) : (o(), v("section", ze, [
394
- q(e.$slots, "empty-state", {}, () => [
395
- C("div", Ge, $(e.t("nothingToDisplay")), 1)
396
- ], !0)
397
- ])),
398
- e.expandable ? (o(), g(E, {
399
- key: 3,
400
- class: "b-code-snippet__modal",
401
- "hide-close-button": !0,
402
- "custom-padding": "0px",
403
- "is-dismissible": !0,
404
- "is-open": e.showModal,
405
- size: "large",
406
- onCloseModal: n[2] || (n[2] = (f) => e.showModal = !1)
407
- }, {
408
- content: b(() => [
409
- S(m, ee(te({ ...e.$props, expandable: !1 })), null, 16)
410
- ]),
411
- _: 1
412
- }, 8, ["is-open"])) : c("", !0)
413
- ], 2);
414
- }
415
- const gt = /* @__PURE__ */ Re(xe, [["render", Xe], ["__scopeId", "data-v-54361d30"]]);
416
- export {
417
- _ as B,
418
- s as a,
419
- O as b,
420
- gt as c
421
- };
422
- //# sourceMappingURL=code-snippet.DJgiqDzZ.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"code-snippet.DJgiqDzZ.js","sources":["../../../vue2/src/components/code-snippet/highlight.ts","../../../vue2/src/components/code-snippet/code-snippet.types.ts","../../../../node_modules/.pnpm/codemirror-lang-csv@0.1.1/node_modules/codemirror-lang-csv/dist/index.js","../../../vue2/src/components/code-snippet/utils/get-lang-loader.ts","../../../vue2/src/components/code-snippet/utils/indent-same-as-line-before-extension.ts","../../../vue2/src/components/code-snippet/code-snippet.vue"],"sourcesContent":["import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport {\n BCodeSnippetCodeAreaHighlightBlue,\n BCodeSnippetCodeAreaHighlightGreen,\n BCodeSnippetCodeAreaHighlightOrange,\n BCodeSnippetCodeAreaHighlightRed,\n} from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoCodeSnippetSupportedLanguage } from './code-snippet.types';\n\nconst lightThemeColors = {\n red: BCodeSnippetCodeAreaHighlightRed,\n orange: BCodeSnippetCodeAreaHighlightOrange,\n green: BCodeSnippetCodeAreaHighlightGreen,\n blue: BCodeSnippetCodeAreaHighlightBlue,\n invalid: '#ffffff',\n};\n\nconst highlightStyle = (colors, language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) =>\n HighlightStyle.define([\n {\n tag: t.keyword,\n color: colors.red,\n },\n {\n tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],\n color: colors.green,\n },\n {\n tag: [t.function(t.variableName), t.labelName],\n color: colors.blue,\n },\n {\n tag: [t.color, t.constant(t.name), t.standard(t.name)],\n color: colors.red,\n },\n {\n tag: [t.definition(t.name), ...(language !== 'json' ? [t.separator] : [])],\n color: colors.red,\n },\n {\n tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],\n color: colors.orange,\n },\n {\n tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],\n color: colors.blue,\n },\n {\n tag: [t.meta, t.comment],\n color: colors.orange,\n },\n {\n tag: t.strong,\n fontWeight: 'bold',\n },\n {\n tag: t.emphasis,\n fontStyle: 'italic',\n },\n {\n tag: t.strikethrough,\n textDecoration: 'line-through',\n },\n {\n tag: t.link,\n color: colors.orange,\n textDecoration: 'underline',\n },\n {\n tag: t.heading,\n fontWeight: 'bold',\n color: colors.blue,\n },\n {\n tag: [t.atom, t.bool, t.special(t.variableName)],\n color: colors.red,\n },\n {\n tag: [t.processingInstruction, t.string, t.inserted],\n color: colors.blue,\n },\n {\n tag: t.invalid,\n color: colors.invalid,\n },\n ]);\n\nexport const lightThemeHighlight = (\n language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`\n) => syntaxHighlighting(highlightStyle(lightThemeColors, language));\n","/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetVariant {\n INLINE = 'inline',\n SINGLELINE = 'singleline',\n MULTILINE = 'multiline',\n}\n\n// These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/composables/useLanguage.ts function and vice-versa\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetSupportedLanguage {\n JSON = 'json',\n XML = 'xml',\n JAVA = 'java',\n JAVASCRIPT = 'javascript',\n PYTHON = 'python',\n CSV = 'csv',\n}\n\nexport enum BentoCodeSnippetEvent {\n ACTION = 'action',\n CHANGE = 'change',\n}\n","import { LRParser } from '@lezer/lr';\nimport { LRLanguage, LanguageSupport } from '@codemirror/language';\nimport { styleTags, tags } from '@lezer/highlight';\n\n// This file was generated by lezer-generator. You probably shouldn't edit it.\nconst parser = LRParser.deserialize({\n version: 14,\n states: \"nQVQPOOOOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOOQO-E6_-E6_\",\n stateData: \"g~OWOS~OQPORPOSPO~OQRSR~\",\n goto: \"eYPPPPPZPPPaQRORSRTQOR\",\n nodeNames: \"⚠ Program String Separator Value\",\n maxTerm: 9,\n skippedNodes: [0],\n repeatNodeCount: 1,\n tokenData: \"'Y~RZOYtYZ!cZrtrs!hs|t|}'T}!]t!]!^'T!^;'St;'S;=`!]<%lOt~yUS~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~!`P;=`<%lt~!hOW~~!m]S~OY!hYZ#fZr!hrs%Ss|!h|}#f}!]!h!]!^#f!^#O!h#O#P%m#P;'S!h;'S;=`&}<%lO!h~#iVOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|<%lO#f~$TOQ~~$WRO;'S#f;'S;=`$a;=`O#f~$dWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l#f<%lO#f~%PP;=`<%l#f~%ZUQ~S~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~%rYS~OY!hYZ#fZ|!h|}#f}!]!h!]!^#f!^;'S!h;'S;=`&b;=`<%l#f<%lO!h~&eWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l!h<%lO#f~'QP;=`<%l!h~'YOR~\",\n tokenizers: [0],\n topRules: {\"Program\":[0,1]},\n tokenPrec: 18\n});\n\nconst csvLanguage = LRLanguage.define({\n parser: parser.configure({\n props: [\n styleTags({\n Separator: tags.separator,\n Value: tags.string,\n String: tags.string,\n LineComment: tags.lineComment,\n \"( )\": tags.paren,\n }),\n ],\n }),\n});\nfunction csv() {\n return new LanguageSupport(csvLanguage);\n}\n\nexport { csv, csvLanguage };\n","import { BentoCodeSnippetSupportedLanguage } from '@/components/code-snippet/code-snippet.types';\nimport { json } from '@codemirror/lang-json';\nimport { xml } from '@codemirror/lang-xml';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { java } from '@codemirror/lang-java';\nimport { python } from '@codemirror/lang-python';\nimport { csv } from 'codemirror-lang-csv';\n\n/**\n * TODO: This should be handled with dynamic imports,\n * without relying on importing every single language/package available.\n * These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/code-snippet.types.ts enum\n */\nconst importsMap = {\n [BentoCodeSnippetSupportedLanguage.JSON]: json,\n [BentoCodeSnippetSupportedLanguage.XML]: xml,\n [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n [BentoCodeSnippetSupportedLanguage.CSV]: csv,\n};\n\n/**\n * Returns a language loder for `CodeMirror`.\n * Supported languages: json, xml, javascript & java\n *\n * @param language Language to be used\n * @returns Language configuration loader to be used in codemirror\n */\nexport const getLangLoader = (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => {\n const loadLang = async () => importsMap[language];\n\n return loadLang;\n};\n","import { EditorSelection, type EditorState, type SelectionRange } from '@codemirror/state';\n\n/**\n * Calculate indentation for a new line based on line before it.\n * @param state - The editor state\n * @param line - the selection range, in this case one line\n * @returns the indentation string to be pre-pended on a new line.\n */\nconst getIndentation = (state: EditorState, line: SelectionRange) => {\n const currentLine = state.doc.lineAt(line.from);\n const indentMatch = /^\\s*/.exec(currentLine.text);\n return indentMatch ? indentMatch[0] : '';\n};\n\n/**\n * This extension to codemirror will, upon pressing the 'Enter' key, indent the new line\n * the same as the line before it.\n */\nexport const INDENT_SAME_AS_LINE_BEFORE = {\n key: 'Enter',\n run: ({ state, dispatch }) => {\n const changes = state.changeByRange(range => {\n const indentation = getIndentation(state, range);\n const newText = `\\n${indentation}`;\n return {\n changes: { from: range.from, to: range.to, insert: newText },\n range: EditorSelection.cursor(range.from + newText.length),\n };\n });\n dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));\n return true;\n },\n};\n\nexport default INDENT_SAME_AS_LINE_BEFORE;\n","<template>\n <div class=\"b-code-snippet\" :class=\"conditionalClasses\">\n <section v-if=\"!isInlineVariant\" class=\"b-code-snippet__action-bar\">\n <div class=\"b-code-snippet__action-bar--start\">\n <bento-dropdown\n v-if=\"availableLanguages.length > 0\"\n v-model=\"selectedLanguage\"\n v-bind=\"$props\"\n :disabled=\"availableLanguages.length === 1\"\n :items=\"availableLanguages\"\n class=\"b-code-snippet__language-picker\"\n @input=\"handleChangeLanguage\"\n />\n <bento-typography el=\"span\" stronger>\n {{ displayedLang }}\n </bento-typography>\n </div>\n <div class=\"b-code-snippet__action-bar--end\">\n <bento-loading-indicator v-if=\"loading\" />\n <copy v-if=\"currentContents !== null\" class=\"b-structured-list__icon\" :text=\"currentContents\" />\n <bento-button\n v-if=\"expandable\"\n variant=\"tertiary\"\n condensed\n :aria-label=\"t('expand')\"\n @click=\"showModal = true\"\n >\n <template #iconLeft>\n <expand-icon />\n </template>\n </bento-button>\n <bento-button v-if=\"actionable\" variant=\"primary\" tertiary condensed @click=\"onActionClicked\">\n <template #iconLeft>\n <bento-typography el=\"span\" class=\"b-code-snippet__action-button\">\n {{ runText }}\n </bento-typography>\n </template>\n </bento-button>\n </div>\n </section>\n <code v-if=\"content || editable\" class=\"b-code-snippet__code-area\">\n <div ref=\"container\" class=\"b-code-snippet__code-area-content\" :class=\"codeAreaContentConditionalClasses\" />\n </code>\n <section v-else>\n <slot name=\"empty-state\">\n <!-- TODO: switch with empty-state component when ready -->\n <div class=\"b-code-snippet__empty-state\">{{ t('nothingToDisplay') }}</div>\n </slot>\n </section>\n <base-modal\n v-if=\"expandable\"\n class=\"b-code-snippet__modal\"\n :hide-close-button=\"true\"\n :custom-padding=\"'0px'\"\n :is-dismissible=\"true\"\n :is-open=\"showModal\"\n size=\"large\"\n @close-modal=\"showModal = false\"\n >\n <template #content>\n <bento-code-snippet v-bind=\"{ ...$props, expandable: false }\" />\n </template>\n </base-modal>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, onMounted, PropType, ref, shallowRef, watch, watchEffect } from 'vue';\n import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';\n import { Compartment, EditorState } from '@codemirror/state';\n import { history, indentWithTab } from '@codemirror/commands';\n import { lightThemeHighlight } from './highlight';\n import { getLangLoader, INDENT_SAME_AS_LINE_BEFORE } from './utils';\n import { BentoDropdown } from '@/components/dropdown';\n import { BentoButton } from '@/components/button';\n import { BentoTypography } from '@/components/typography';\n import { BentoTooltipDirective } from '@/directives';\n import { BentoLoadingIndicator } from '@/components/loading-indicator';\n import { useI18n } from '@/utils/ts/i18n';\n import { Copy } from '@/internal';\n import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n import {\n BentoCodeSnippetEvent,\n BentoCodeSnippetSupportedLanguage,\n BentoCodeSnippetVariant,\n } from '@/components/code-snippet/code-snippet.types';\n import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n /**\n * A code-snippet is a container to display code in a readable way.\n * Come with added functionalities like syntax highlighting, editing and actioning the code\n *\n * @example\n * import { BentoCodeSnippet } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoCodeSnippet },\n * template: `\n * <bento-code-snippet :variant=\"BentoCodeSnippetVariant.MULTILINE\" content=\"{ example: 1234 }\" />\n * `\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'bento-code-snippet',\n components: {\n BentoTypography,\n BentoButton,\n BentoDropdown,\n Copy,\n BaseModal,\n BentoLoadingIndicator,\n ExpandIcon,\n },\n directives: { BentoTooltipDirective },\n props: {\n /**\n * Defines the variant of code-snippet\n */\n variant: {\n type: String as PropType<BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`>,\n default: BentoCodeSnippetVariant.MULTILINE,\n validator: (value: BentoCodeSnippetVariant) => Object.values(BentoCodeSnippetVariant).includes(value),\n },\n /**\n * Language name for syntax highlighting rules\n */\n lang: {\n type: String as PropType<BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`>,\n default: BentoCodeSnippetSupportedLanguage.JSON,\n validator: (value: BentoCodeSnippetSupportedLanguage) =>\n Object.values(BentoCodeSnippetSupportedLanguage).includes(value),\n },\n /**\n * Label to show in the action-bar, describing the language\n */\n langLabel: {\n type: String,\n default: null,\n },\n /**\n * The code content\n */\n content: {\n type: String,\n default: '',\n },\n /**\n * Allows editing of the code-snippet content by the user\n */\n editable: {\n type: Boolean,\n default: false,\n },\n /**\n * Displays a button that when clicked will emit an action event\n * Leaves to the parent component the logic of what to do with it\n */\n actionable: {\n type: Boolean,\n default: false,\n },\n /**\n * Displays a button that can expand the codeblock into a modal to easily\n * view large blocks of code.\n */\n expandable: {\n type: Boolean,\n default: false,\n },\n /**\n * Displays a button that when clicked will emit a run event\n * Leaves to the parent component the logic of what to do with it\n */\n actionableText: {\n type: String,\n default: 'run',\n },\n /**\n * Toggles the loading indicator within the action bar\n */\n loading: {\n type: Boolean,\n default: false,\n },\n },\n emits: [BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE],\n setup(props, { emit }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n // language\n const selectedLanguage = ref<string | null>(null);\n const availableLanguages = []; // TODO: implement\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n const handleChangeLanguage = () => {};\n const displayedLang = computed(() => props.langLabel ?? props.lang.toUpperCase());\n\n const isInlineVariant = computed(() => props.variant === BentoCodeSnippetVariant.INLINE);\n\n const conditionalClasses = computed(() => ({\n 'b-code-snippet--inline': isInlineVariant.value,\n 'b-code-snippet--scrollable': !isInlineVariant.value,\n }));\n\n const codeAreaContentConditionalClasses = computed(() => ({\n 'b-code-snippet__code-area-content--editable': props.editable,\n }));\n\n const loadLang = getLangLoader(props.lang);\n\n const container = shallowRef<HTMLDivElement>();\n const editor = shallowRef<EditorView>();\n const languageConf = new Compartment();\n const editorTheme = new Compartment();\n const editorReadOnly = new Compartment();\n\n const currentContents = ref(null);\n const contentLength = ref(0);\n\n onMounted(async () => {\n const language = await loadLang();\n\n // alongside the updateListener plugin it acts as a watcher of changes to the editor state\n currentContents.value = props.content;\n const updateCurrentContents = ({ state }) => {\n currentContents.value = state.doc.toString();\n };\n\n const extensions = [\n highlightActiveLine(),\n keymap.of([indentWithTab, INDENT_SAME_AS_LINE_BEFORE]),\n languageConf.of(language()),\n editorTheme.of(lightThemeHighlight(props.lang)),\n\n editorReadOnly.of(EditorState.readOnly.of(!props.editable)),\n EditorView.updateListener.of(content => updateCurrentContents(content)),\n ];\n\n if (props.variant === 'multiline') {\n extensions.push([lineNumbers(), history()]);\n }\n\n const state = EditorState.create({\n doc: props.content,\n extensions: [...extensions],\n });\n contentLength.value = state.doc.length;\n\n editor.value = new EditorView({\n state,\n parent: container.value,\n });\n });\n watch(\n () => props.content,\n () => {\n if (props.content !== currentContents.value) {\n const upcomingContentLength = props.content.length;\n editor.value.dispatch({\n changes: {\n from: 0,\n to: contentLength.value,\n insert: props.content,\n },\n });\n contentLength.value = upcomingContentLength;\n }\n }\n );\n\n const runText = computed(() => t(props.actionableText as 'run'));\n const onActionClicked = () => {\n emit(BentoCodeSnippetEvent.ACTION, currentContents.value);\n };\n\n watchEffect(() => {\n if (currentContents.value !== null) {\n emit(BentoCodeSnippetEvent.CHANGE, currentContents.value);\n }\n });\n\n const showModal = ref(false);\n\n return {\n // Values\n availableLanguages,\n codeAreaContentConditionalClasses,\n conditionalClasses,\n container,\n currentContents,\n displayedLang,\n editor,\n selectedLanguage,\n showModal,\n isInlineVariant,\n\n // Methods\n handleChangeLanguage,\n onActionClicked,\n runText,\n\n // Translations\n t,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./code-snippet.scss\"></style>\n"],"names":["lightThemeColors","BCodeSnippetCodeAreaHighlightRed","BCodeSnippetCodeAreaHighlightOrange","BCodeSnippetCodeAreaHighlightGreen","BCodeSnippetCodeAreaHighlightBlue","highlightStyle","colors","language","HighlightStyle","tags","lightThemeHighlight","syntaxHighlighting","BentoCodeSnippetVariant","BentoCodeSnippetVariant2","BentoCodeSnippetSupportedLanguage","BentoCodeSnippetSupportedLanguage2","BentoCodeSnippetEvent","BentoCodeSnippetEvent2","parser","LRParser","csvLanguage","LRLanguage","styleTags","csv","LanguageSupport","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","_sfc_main","defineComponent","messages","BentoTypography","BentoButton","BentoDropdown","Copy","BaseModal","BentoLoadingIndicator","ExpandIcon","BentoTooltipDirective","value","props","emit","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","currentContents","contentLength","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","runText","onActionClicked","watchEffect","showModal","_hoisted_3","_ctx","createCommentVNode","openBlock","createElementBlock","_hoisted_1","createElementVNode","_hoisted_2","createBlock","_component_bento_dropdown","mergeProps","_cache","$event","createVNode","_component_bento_typography","createTextVNode","toDisplayString","_component_bento_loading_indicator","_component_copy","_component_bento_button","_component_expand_icon","_hoisted_4","renderSlot","expandable","_component_base_modal","_component_bento_code_snippet","normalizeProps","guardReactiveProps"],"mappings":"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","x_google_ignoreList":[2]}
@@ -1,80 +0,0 @@
1
- import { defineComponent as B, useSlots as O, ref as r, computed as u, watch as S, withDirectives as g, createElementBlock as E, openBlock as c, renderSlot as d, createBlock as D, createCommentVNode as I, unref as s, withCtx as f, createVNode as k, createTextVNode as w, toDisplayString as x } from "vue";
2
- import { B as C } from "./popover.DjbACET6.js";
3
- import "./events.FNmSWp_P.js";
4
- import { B as b } from "./tooltip.BkBDReK0.js";
5
- import { B as y } from "./typography.DN5eC5ch.js";
6
- import { u as N } from "./use-has-slot.B7eQSabc.js";
7
- import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
8
- import "../assets/dashed-underline.css";
9
- const F = {}, L = /* @__PURE__ */ B({
10
- ...F,
11
- __name: "dashed-underline",
12
- props: {
13
- popoverText: { default: null },
14
- popoverPosition: { default: "top" },
15
- tooltipText: { default: null },
16
- tooltipPosition: { default: "top" }
17
- },
18
- setup(m) {
19
- const l = m, v = O(), _ = N(v), e = r(null), t = r(!1), n = r(), a = () => {
20
- t.value = !0, n.value && clearTimeout(n.value);
21
- }, i = () => {
22
- const o = setTimeout(() => {
23
- t.value = !1;
24
- }, 200);
25
- n.value = o;
26
- }, h = () => {
27
- a();
28
- }, T = (o) => {
29
- (!e.value || !((o == null ? void 0 : o.relatedTarget) instanceof Element) || !e.value.contains(o.relatedTarget)) && i();
30
- }, p = u(() => l.popoverText || _("popover-content")), P = u(() => !l.tooltipText && !p.value);
31
- return S(
32
- P,
33
- (o) => {
34
- if (o)
35
- throw new Error(
36
- "BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info."
37
- );
38
- },
39
- { immediate: !0 }
40
- ), (o, A) => g((c(), E("span", {
41
- ref_key: "element",
42
- ref: e,
43
- class: "b-dashed-underline",
44
- tabindex: "0",
45
- onMouseenter: a,
46
- onMouseleave: i,
47
- onFocus: h,
48
- onFocusout: T
49
- }, [
50
- d(o.$slots, "default", {}, void 0, !0),
51
- e.value && p.value ? (c(), D(s(C), {
52
- key: 0,
53
- open: t.value,
54
- "target-element": e.value,
55
- position: o.popoverPosition,
56
- role: "tooltip",
57
- "fit-content": "",
58
- "disable-focus-trap": ""
59
- }, {
60
- default: f(() => [
61
- d(o.$slots, "popover-content", {}, () => [
62
- k(s(y), null, {
63
- default: f(() => [
64
- w(x(o.popoverText), 1)
65
- ]),
66
- _: 1
67
- })
68
- ], !0)
69
- ]),
70
- _: 3
71
- }, 8, ["open", "target-element", "position"])) : I("", !0)
72
- ], 32)), [
73
- [s(b), o.tooltipText, o.tooltipPosition]
74
- ]);
75
- }
76
- }), j = /* @__PURE__ */ V(L, [["__scopeId", "data-v-6f66ba47"]]);
77
- export {
78
- j as B
79
- };
80
- //# sourceMappingURL=dashed-underline.DWhGZIhS.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dashed-underline.DWhGZIhS.js","sources":["../../../vue2/src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n <span\n ref=\"element\"\n v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n class=\"b-dashed-underline\"\n tabindex=\"0\"\n @mouseenter=\"openPopover\"\n @mouseleave=\"closePopover\"\n @focus=\"infoIconOnFocus\"\n @focusout=\"infoIconOnFocusOut\"\n >\n <slot></slot>\n <bento-popover\n v-if=\"element && hasPopover\"\n :open=\"isOpen\"\n :target-element=\"element\"\n :position=\"popoverPosition\"\n role=\"tooltip\"\n fit-content\n disable-focus-trap\n >\n <slot name=\"popover-content\">\n <bento-typography>\n {{ popoverText }}\n </bento-typography>\n </slot>\n </bento-popover>\n </span>\n</template>\n\n<script lang=\"ts\" setup>\n import { computed, ref, useSlots, watch } from 'vue';\n import { BentoPopover, type BentoPopoverPositions } from '@/components/popover';\n import {\n type BentoTooltipPosition,\n BentoTooltipDirective as vBentoTooltipDirective,\n } from '@/directives/tooltip/index';\n import { BentoTypography } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n\n const CLOSING_POPOVER_DELAY_MS = 200;\n\n const props = withDefaults(\n defineProps<{\n /**\n * Text showed in the popover on hover\n */\n popoverText?: string;\n\n /**\n * Position the popover should take if space is available\n */\n popoverPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n /**\n * Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.\n */\n tooltipText?: string;\n\n /**\n * Position the tooltip should take if space is available.\n */\n tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;\n }>(),\n {\n popoverText: null,\n popoverPosition: 'top',\n tooltipText: null,\n tooltipPosition: 'top',\n }\n );\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const element = ref<HTMLSpanElement>(null);\n const isOpen = ref(false);\n\n const closingTimeOutId = ref();\n\n const openPopover = () => {\n isOpen.value = true;\n if (closingTimeOutId.value) {\n clearTimeout(closingTimeOutId.value);\n }\n };\n\n const closePopover = () => {\n // We want to delay closing for a couple of seconds so\n // it doesn't flicker if a user hovers over the icon and then inside the popover.\n const timeOutId = setTimeout(() => {\n isOpen.value = false;\n }, CLOSING_POPOVER_DELAY_MS);\n closingTimeOutId.value = timeOutId;\n };\n\n const infoIconOnFocus = () => {\n openPopover();\n };\n\n /**\n * Only close popover on blur if the newly focus element is not a child of this element\n * @param e - the event that contains the newly focused element\n */\n const infoIconOnFocusOut = (e: FocusEvent) => {\n if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n closePopover();\n }\n };\n\n const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n watch(\n shouldShowTooltipPopoverError,\n value => {\n if (value) {\n throw new Error(\n 'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n );\n }\n },\n { immediate: true }\n );\n</script>\n\n<script lang=\"ts\">\n /**\n * The dashed underline serves as a visual cue to indicate that additional information is available for\n * a specific word or phrase without adding an icon.\n *\n * @example\n * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoDashedUnderline },\n * template: `\n * <bento-dashed-underline>\n * annotated text\n * </bento-dashed-underline>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","props","__props","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","infoIconOnFocus","infoIconOnFocusOut","e","hasPopover","computed","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;;AAgJI,MAAAA,IAAA,CAAA;;;;;;;;;;AAtGA,UAAAC,IAAAC,GA8BAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAA,GAAA;AAEnB,MAAAC,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAjB,EAAA,eAAAI,EAAA,iBAAA,CAAA,GAEAc,IAAAD,EAAA,MAAA,CAAAjB,EAAA,eAAA,CAAAgB,EAAA,KAAA;AAEA,WAAAG;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}