vueless 0.0.70 → 0.0.72

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 (81) hide show
  1. package/assets/icons/add.svg +1 -0
  2. package/assets/icons/apps.svg +1 -0
  3. package/assets/icons/arrow_back.svg +1 -0
  4. package/assets/icons/check.svg +1 -0
  5. package/assets/icons/check_circle.svg +1 -0
  6. package/assets/icons/close.svg +1 -0
  7. package/assets/icons/close_small.svg +1 -0
  8. package/assets/icons/delete.svg +1 -0
  9. package/assets/icons/description.svg +1 -0
  10. package/assets/icons/drag_indicator.svg +1 -0
  11. package/assets/icons/edit_note.svg +1 -0
  12. package/assets/icons/emoji_food_beverage.svg +1 -0
  13. package/assets/icons/error.svg +1 -0
  14. package/assets/icons/expand_more.svg +1 -0
  15. package/assets/icons/keyboard_arrow_down.svg +1 -0
  16. package/assets/icons/keyboard_arrow_left.svg +1 -0
  17. package/assets/icons/keyboard_arrow_right.svg +1 -0
  18. package/assets/icons/remove.svg +1 -0
  19. package/assets/icons/search.svg +1 -0
  20. package/assets/icons/star-fill.svg +1 -0
  21. package/assets/icons/star.svg +1 -0
  22. package/assets/icons/upload_file.svg +1 -0
  23. package/assets/icons/visibility-fill.svg +1 -0
  24. package/assets/icons/visibility_off-fill.svg +1 -0
  25. package/assets/icons/warning.svg +1 -0
  26. package/assets/images/.generated/@material-symbols/svg-500/outlined/add.svg +1 -0
  27. package/assets/images/.generated/@material-symbols/svg-500/outlined/apps.svg +1 -0
  28. package/assets/images/.generated/@material-symbols/svg-500/outlined/arrow_back.svg +1 -0
  29. package/assets/images/.generated/@material-symbols/svg-500/outlined/check.svg +1 -0
  30. package/assets/images/.generated/@material-symbols/svg-500/outlined/check_circle.svg +1 -0
  31. package/assets/images/.generated/@material-symbols/svg-500/outlined/close.svg +1 -0
  32. package/assets/images/.generated/@material-symbols/svg-500/outlined/description.svg +1 -0
  33. package/assets/images/.generated/@material-symbols/svg-500/outlined/drag_indicator.svg +1 -0
  34. package/assets/images/.generated/@material-symbols/svg-500/outlined/emoji_food_beverage.svg +1 -0
  35. package/assets/images/.generated/@material-symbols/svg-500/outlined/expand_more.svg +1 -0
  36. package/assets/images/.generated/@material-symbols/svg-500/outlined/keyboard_arrow_down.svg +1 -0
  37. package/assets/images/.generated/@material-symbols/svg-500/outlined/keyboard_arrow_right.svg +1 -0
  38. package/assets/images/.generated/@material-symbols/svg-500/outlined/remove.svg +1 -0
  39. package/assets/images/.generated/@material-symbols/svg-500/outlined/star-fill.svg +1 -0
  40. package/assets/images/.generated/@material-symbols/svg-500/outlined/upload_file.svg +1 -0
  41. package/assets/images/.generated/@material-symbols/svg-500/outlined/visibility-fill.svg +1 -0
  42. package/composable.breakpoint/index.js +6 -2
  43. package/package.json +5 -5
  44. package/ui.button/index.stories.js +0 -2
  45. package/ui.button-toggle-item/index.stories.js +0 -2
  46. package/ui.container-accordion/configs/default.config.js +2 -0
  47. package/ui.container-accordion/index.vue +8 -2
  48. package/ui.container-modal/index.vue +4 -2
  49. package/ui.container-page/index.vue +2 -1
  50. package/ui.data-list/index.stories.js +0 -1
  51. package/ui.data-list/index.vue +5 -3
  52. package/ui.data-table/index.vue +6 -4
  53. package/ui.dropdown-badge/index.vue +1 -0
  54. package/ui.dropdown-button/index.vue +1 -0
  55. package/ui.dropdown-link/index.vue +1 -0
  56. package/ui.dropdown-list/index.vue +7 -1
  57. package/ui.form-calendar/index.vue +3 -0
  58. package/ui.form-checkbox/index.vue +7 -5
  59. package/ui.form-color-picker/index.vue +2 -1
  60. package/ui.form-date-picker/index.stories.js +0 -1
  61. package/ui.form-date-picker-range/composables/attrs.composable.js +2 -0
  62. package/ui.form-date-picker-range/configs/default.config.js +2 -0
  63. package/ui.form-date-picker-range/index.vue +20 -11
  64. package/ui.form-input/configs/default.config.js +2 -2
  65. package/ui.form-input/index.vue +2 -8
  66. package/ui.form-input-file/index.vue +5 -3
  67. package/ui.form-input-number/index.vue +4 -2
  68. package/ui.form-input-rating/composables/attrs.composable.js +5 -4
  69. package/ui.form-input-rating/configs/default.config.js +4 -2
  70. package/ui.form-input-rating/index.vue +7 -6
  71. package/ui.form-input-search/index.vue +4 -2
  72. package/ui.form-radio-card/index.vue +1 -1
  73. package/ui.form-select/index.vue +12 -0
  74. package/ui.form-switch/index.vue +2 -5
  75. package/ui.form-textarea/index.stories.js +0 -2
  76. package/ui.image-icon/index.vue +33 -33
  77. package/ui.notify/index.vue +4 -0
  78. package/ui.text-alert/index.vue +2 -1
  79. package/ui.text-empty/index.vue +8 -1
  80. package/ui.text-file/index.vue +3 -2
  81. package/web-types.json +10 -1
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M445.93-445.93H194.02v-68.14h251.91v-252.15h68.14v252.15h252.15v68.14H514.07v251.91h-68.14v-251.91Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M223.29-154.5q-29.12 0-48.95-19.84-19.84-19.83-19.84-48.95 0-29.12 19.84-48.91 19.83-19.8 48.95-19.8 29.12 0 48.91 19.8 19.8 19.79 19.8 48.91 0 29.12-19.8 48.95-19.79 19.84-48.91 19.84Zm256.8 0q-29.05 0-48.88-19.84-19.84-19.83-19.84-48.95 0-29.12 19.75-48.91 19.74-19.8 48.79-19.8t48.88 19.8q19.84 19.79 19.84 48.91 0 29.12-19.75 48.95-19.74 19.84-48.79 19.84Zm256.62 0q-29.12 0-48.91-19.84-19.8-19.83-19.8-48.95 0-29.12 19.8-48.91 19.79-19.8 48.91-19.8 29.12 0 48.95 19.8 19.84 19.79 19.84 48.91 0 29.12-19.84 48.95-19.83 19.84-48.95 19.84ZM223.29-411.37q-29.12 0-48.95-19.75-19.84-19.74-19.84-48.79t19.84-48.88q19.83-19.84 48.95-19.84 29.12 0 48.91 19.75 19.8 19.74 19.8 48.79t-19.8 48.88q-19.79 19.84-48.91 19.84Zm256.8 0q-29.05 0-48.88-19.75-19.84-19.74-19.84-48.79t19.75-48.88q19.74-19.84 48.79-19.84t48.88 19.75q19.84 19.74 19.84 48.79t-19.75 48.88q-19.74 19.84-48.79 19.84Zm256.62 0q-29.12 0-48.91-19.75-19.8-19.74-19.8-48.79t19.8-48.88q19.79-19.84 48.91-19.84 29.12 0 48.95 19.75 19.84 19.74 19.84 48.79t-19.84 48.88q-19.83 19.84-48.95 19.84ZM223.29-668q-29.12 0-48.95-19.8-19.84-19.79-19.84-48.91 0-29.12 19.84-48.95 19.83-19.84 48.95-19.84 29.12 0 48.91 19.84 19.8 19.83 19.8 48.95 0 29.12-19.8 48.91-19.79 19.8-48.91 19.8Zm256.8 0q-29.05 0-48.88-19.8-19.84-19.79-19.84-48.91 0-29.12 19.75-48.95 19.74-19.84 48.79-19.84t48.88 19.84q19.84 19.83 19.84 48.95 0 29.12-19.75 48.91-19.74 19.8-48.79 19.8Zm256.62 0q-29.12 0-48.91-19.8-19.8-19.79-19.8-48.91 0-29.12 19.8-48.95 19.79-19.84 48.91-19.84 29.12 0 48.95 19.84 19.84 19.83 19.84 48.95 0 29.12-19.84 48.91-19.83 19.8-48.95 19.8Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m283.8-445.93 244.18 244.17L480-154.02 154.02-480 480-806.22l47.98 47.98L283.8-514.07h522.42v68.14H283.8Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M378-240.26 148.26-470l48.98-48.98L378-338.22l383.76-383.76L810.74-673 378-240.26Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m420.52-294.41 285.63-285.63-50.78-50.03-234.85 234.85-117.85-117.85-49.78 50.03 167.63 168.63Zm59.51 220.39q-83.46 0-157.54-31.88-74.07-31.88-129.39-87.2-55.32-55.32-87.2-129.36-31.88-74.04-31.88-157.51 0-84.46 31.88-158.54 31.88-74.07 87.16-128.9 55.28-54.84 129.34-86.82 74.06-31.99 157.55-31.99 84.48 0 158.59 31.97 74.1 31.97 128.91 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.6 0 83.5-31.99 157.57-31.98 74.07-86.82 129.36-54.83 55.29-128.87 87.17-74.04 31.88-158.51 31.88Zm-.03-68.13q141.04 0 239.45-98.75 98.4-98.76 98.4-239.1 0-141.04-98.4-239.45-98.41-98.4-239.57-98.4-140.16 0-238.95 98.4-98.78 98.41-98.78 239.57 0 140.16 98.75 238.95 98.76 98.78 239.1 98.78ZM480-480Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M249-201.26 201.26-249l231-231-231-231L249-758.74l231 231 231-231L758.74-711l-231 231 231 231L711-201.26l-231-231-231 231Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m305.02-257.28-47.74-47.74L432.02-480 257.28-653.98l47.74-47.74L480-526.98l173.98-174.74 47.74 47.74L526.98-480l174.74 174.98-47.74 47.74L480-432.02 305.02-257.28Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M259.09-114.02q-28.45 0-48.41-19.89-19.96-19.89-19.96-48.24v-565.94h-45.07v-68.13h198.28v-34.3h271.9v34.3h198.52v68.13h-45.07v565.94q0 27.6-20.33 47.86-20.34 20.27-48.04 20.27H259.09Zm441.82-634.07H259.09v565.94h441.82v-565.94ZM363.89-266.24h64.07v-399h-64.07v399Zm168.15 0h64.31v-399h-64.31v399ZM259.09-748.09v565.94-565.94Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M319-249.52h322v-62.63H319v62.63Zm0-170h322v-62.63H319v62.63Zm-96.85 345.5q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M347.41-154.5q-30.1 0-51.51-21.43-21.4-21.44-21.4-51.54 0-30.1 21.43-51.31Q317.37-300 347.47-300q30.1 0 51.31 21.25Q420-257.51 420-227.41q0 30.1-21.25 51.51-21.24 21.4-51.34 21.4Zm265.34 0q-30.1 0-51.42-21.43Q540-197.37 540-227.47q0-30.1 21.39-51.31Q582.79-300 612.83-300q30.14 0 51.4 21.25 21.27 21.24 21.27 51.34 0 30.1-21.32 51.51-21.33 21.4-51.43 21.4ZM347.41-407.37q-30.1 0-51.51-21.39-21.4-21.4-21.4-51.44 0-30.23 21.43-51.33 21.44-21.1 51.54-21.1 30.1 0 51.31 21.19Q420-510.26 420-480.14q0 30.12-21.25 51.44-21.24 21.33-51.34 21.33Zm265.34 0q-30.1 0-51.42-21.39Q540-450.16 540-480.2q0-30.23 21.39-51.33 21.4-21.1 51.44-21.1 30.14 0 51.4 21.19 21.27 21.18 21.27 51.3 0 30.12-21.32 51.44-21.33 21.33-51.43 21.33ZM347.41-660q-30.1 0-51.51-21.39-21.4-21.4-21.4-51.44 0-30.14 21.43-51.4 21.44-21.27 51.54-21.27 30.1 0 51.31 21.32Q420-762.85 420-732.75t-21.25 51.42Q377.51-660 347.41-660Zm265.34 0q-30.1 0-51.42-21.39Q540-702.79 540-732.83q0-30.14 21.39-51.4 21.4-21.27 51.44-21.27 30.14 0 51.4 21.32 21.27 21.33 21.27 51.43t-21.32 51.42Q642.85-660 612.75-660Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-396.85v-68.13h310.76v68.13H154.02Zm0-170.5v-68.13h478.13v68.13H154.02Zm0-170.5v-68.37h478.13v68.37H154.02Zm365.02 583.83v-128.02L741-503q9.51-9.63 21.13-13.91 11.62-4.29 23.5-4.29 12.48 0 24.21 4.86T831.02-502l37 37q9.44 9.48 13.82 21.12 4.38 11.63 4.38 23.27 0 11.96-4.86 24.06-4.86 12.09-14.25 21.57L647.07-154.02H519.04Zm303.59-266.59-37-37 37 37Zm-240 203h38l120.28-121.23-18-19.02-19-18.03-121.28 120.22v38.06Zm140.28-140.28-19-18 37 37-18-19Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-114.02v-68.13h652.2v68.13h-652.2ZM309.8-258.57q-65.17 0-110.48-44.93-45.3-44.93-45.3-109.85v-432.87h664.07q28.1 0 48.11 20.08 20.02 20.08 20.02 48.05v160q0 28.1-20.02 48.12-20.01 20.01-48.11 20.01h-92.66v136.61q0 64.92-45.47 109.85-45.48 44.93-110.55 44.93H309.8Zm.24-519.28H657.3 222.15h87.89Zm415.39 159.76h92.42v-160h-92.42v160ZM569.15-326.93q34.84 0 61.5-26.52 26.65-26.52 26.65-60.14v-364.26H399.15v37.31l71 58q1 1 9 18v150q0 9.6-7 16.8-7 7.2-18 7.2h-151q-11 0-18-7.2t-7-16.8v-150q0-4 9-18l72-58v-37.31h-137v364.26q0 33.62 26.98 60.14 26.97 26.52 60.91 26.52h259.11ZM355.57-777.85h40-40Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M479.93-274.02q16.46 0 27.4-10.74 10.93-10.75 10.93-27.21t-10.86-27.52q-10.86-11.05-27.33-11.05-16.46 0-27.4 11.03-10.93 11.04-10.93 27.5 0 16.47 10.86 27.23 10.86 10.76 27.33 10.76Zm-31-158.74h68.14v-257.07h-68.14v257.07ZM480.3-74.02q-84.2 0-158.04-31.88-73.84-31.88-129.16-87.2-55.32-55.32-87.2-129.2-31.88-73.88-31.88-158.17 0-84.28 31.88-158.2 31.88-73.91 87.16-128.74 55.28-54.84 129.18-86.82 73.9-31.99 158.21-31.99 84.3 0 158.25 31.97 73.94 31.97 128.75 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.33 0 84.24-31.99 158.07-31.98 73.84-86.82 128.95-54.83 55.1-128.87 87.17Q564.5-74.02 480.3-74.02Zm.2-68.13q140.54 0 238.95-98.75 98.4-98.76 98.4-239.6 0-140.54-98.22-238.95-98.21-98.4-239.75-98.4-140.16 0-238.95 98.22-98.78 98.21-98.78 239.75 0 140.16 98.75 238.95 98.76 98.78 239.6 98.78ZM480-480Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-339.5 234.26-585.24 283-633.98l197 198 197-197 48.74 48.74L480-339.5Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-338.26 234.26-584 283-632.74l197 197 197-197L725.74-584 480-338.26Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M561-234.26 314.26-481 561-727.74 609.74-679l-198 198 198 198L561-234.26Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m524.26-481-198-198L375-727.74 621.74-481 375-234.26 326.26-283l198-198Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M194.02-445.93v-68.14h572.2v68.14h-572.2Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M795.76-114.3 531.33-378.5q-29.76 25.26-69.6 39.41-39.84 14.16-85.16 14.16-109.84 0-185.96-76.2Q114.5-477.33 114.5-585t76.2-183.87q76.19-76.2 184.37-76.2 108.17 0 183.86 76.2 75.7 76.2 75.7 184.02 0 43.33-13.64 82.97t-40.92 74.4L845.5-164.04l-49.74 49.74ZM375.65-393.07q79.73 0 135.29-56.24Q566.5-505.55 566.5-585q0-79.45-55.6-135.69-55.59-56.24-135.25-56.24-80.49 0-136.76 56.24-56.26 56.24-56.26 135.69 0 79.45 56.23 135.69 56.23 56.24 136.79 56.24Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m224.15-107.56 67.39-291.29L65.41-594.78l298.52-25.72L480-895.3l116.07 274.8 298.52 25.72-226.13 195.93 67.63 291.29L480-262.3 224.15-107.56Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m326.37-249.79 153.64-91.89 153.64 92.9-41.28-173.94L727.5-540.33l-178.17-15.52L480-720.02l-69.33 163.41-178.17 15.28 135.22 117.38-41.35 174.16ZM224.15-107.56l67.39-291.29L65.41-594.78l298.43-25.67L480-895.3l116.16 274.85 298.43 25.67-226.13 195.93 67.63 291.29L480-262.3 224.15-107.56ZM480-474.52Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M452-203.43h60v-201.96l82.48 82.48 42-42L480-517.15 325.76-362.91l42 42L452-405.39v201.96ZM222.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480.12-330q70.88 0 120.38-49.62t49.5-120.5q0-70.88-49.62-120.38T479.88-670Q409-670 359.5-620.38T310-499.88q0 70.88 49.62 120.38t120.5 49.5Zm-.3-61.83q-45.15 0-76.57-31.6-31.42-31.6-31.42-76.75t31.6-76.57q31.6-31.42 76.75-31.42t76.57 31.6q31.42 31.6 31.42 76.75t-31.6 76.57q-31.6 31.42-76.75 31.42ZM480-194.5q-147.91 0-267.35-84.67Q93.22-363.85 34.5-500q58.72-136.15 178.15-220.83Q332.09-805.5 480-805.5q147.91 0 267.35 84.67Q866.78-636.15 925.5-500q-58.72 136.15-178.15 220.83Q627.91-194.5 480-194.5Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M813.85-61.85 649.2-223.74q-35 14-79.24 21.62-44.24 7.62-89.96 7.62-147.2 0-267.75-82.46Q91.7-359.41 34.5-500q19.52-51.76 55.38-101.86t86.38-95.81L50.98-822.48l43.91-45.15 759.87 759.87-40.91 45.91ZM480-330q13.28 0 28.45-2.5 15.16-2.5 25.44-7.26L319.28-553.89q-4.52 11.28-6.9 25.56Q310-514.04 310-500q0 72 50 121t120 49Zm283.74 41.91L629.96-422.11q9.52-15.04 14.78-36.18T650-500q0-71-49.5-120.5T480-670q-20.8 0-41.09 4.76-20.28 4.76-36.8 15.04L287.57-765.5q35-16 90.21-28 55.22-12 107.22-12 143.96 0 264.01 82.34Q869.07-640.83 925.5-500q-25.76 64.48-67.12 118.08-41.36 53.59-94.64 93.83ZM578.07-474l-125.5-125.5q25.17-10.28 52.82-5.1 27.65 5.19 48.5 24.56 20.61 20.61 28.53 46 7.93 25.39-4.35 60.04Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M34.74-116.89 480-886.22l445.26 769.33H34.74Zm113.8-65.74h662.92L480-754.98 148.54-182.63Zm335.64-54.85q12.96 0 21.87-9.08 8.91-9.09 8.91-22.05t-9.09-21.75q-9.08-8.79-22.05-8.79-12.96 0-21.87 8.96-8.91 8.97-8.91 21.93 0 12.96 9.09 21.87 9.08 8.91 22.05 8.91ZM454-348h60v-222.09h-60V-348Zm26-120.8Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M445.93-445.93H194.02v-68.14h251.91v-252.15h68.14v252.15h252.15v68.14H514.07v251.91h-68.14v-251.91Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M223.29-154.5q-29.12 0-48.95-19.84-19.84-19.83-19.84-48.95 0-29.12 19.84-48.91 19.83-19.8 48.95-19.8 29.12 0 48.91 19.8 19.8 19.79 19.8 48.91 0 29.12-19.8 48.95-19.79 19.84-48.91 19.84Zm256.8 0q-29.05 0-48.88-19.84-19.84-19.83-19.84-48.95 0-29.12 19.75-48.91 19.74-19.8 48.79-19.8t48.88 19.8q19.84 19.79 19.84 48.91 0 29.12-19.75 48.95-19.74 19.84-48.79 19.84Zm256.62 0q-29.12 0-48.91-19.84-19.8-19.83-19.8-48.95 0-29.12 19.8-48.91 19.79-19.8 48.91-19.8 29.12 0 48.95 19.8 19.84 19.79 19.84 48.91 0 29.12-19.84 48.95-19.83 19.84-48.95 19.84ZM223.29-411.37q-29.12 0-48.95-19.75-19.84-19.74-19.84-48.79t19.84-48.88q19.83-19.84 48.95-19.84 29.12 0 48.91 19.75 19.8 19.74 19.8 48.79t-19.8 48.88q-19.79 19.84-48.91 19.84Zm256.8 0q-29.05 0-48.88-19.75-19.84-19.74-19.84-48.79t19.75-48.88q19.74-19.84 48.79-19.84t48.88 19.75q19.84 19.74 19.84 48.79t-19.75 48.88q-19.74 19.84-48.79 19.84Zm256.62 0q-29.12 0-48.91-19.75-19.8-19.74-19.8-48.79t19.8-48.88q19.79-19.84 48.91-19.84 29.12 0 48.95 19.75 19.84 19.74 19.84 48.79t-19.84 48.88q-19.83 19.84-48.95 19.84ZM223.29-668q-29.12 0-48.95-19.8-19.84-19.79-19.84-48.91 0-29.12 19.84-48.95 19.83-19.84 48.95-19.84 29.12 0 48.91 19.84 19.8 19.83 19.8 48.95 0 29.12-19.8 48.91-19.79 19.8-48.91 19.8Zm256.8 0q-29.05 0-48.88-19.8-19.84-19.79-19.84-48.91 0-29.12 19.75-48.95 19.74-19.84 48.79-19.84t48.88 19.84q19.84 19.83 19.84 48.95 0 29.12-19.75 48.91-19.74 19.8-48.79 19.8Zm256.62 0q-29.12 0-48.91-19.8-19.8-19.79-19.8-48.91 0-29.12 19.8-48.95 19.79-19.84 48.91-19.84 29.12 0 48.95 19.84 19.84 19.83 19.84 48.95 0 29.12-19.84 48.91-19.83 19.8-48.95 19.8Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m283.8-445.93 244.18 244.17L480-154.02 154.02-480 480-806.22l47.98 47.98L283.8-514.07h522.42v68.14H283.8Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M378-240.26 148.26-470l48.98-48.98L378-338.22l383.76-383.76L810.74-673 378-240.26Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m420.52-294.41 285.63-285.63-50.78-50.03-234.85 234.85-117.85-117.85-49.78 50.03 167.63 168.63Zm59.51 220.39q-83.46 0-157.54-31.88-74.07-31.88-129.39-87.2-55.32-55.32-87.2-129.36-31.88-74.04-31.88-157.51 0-84.46 31.88-158.54 31.88-74.07 87.16-128.9 55.28-54.84 129.34-86.82 74.06-31.99 157.55-31.99 84.48 0 158.59 31.97 74.1 31.97 128.91 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.6 0 83.5-31.99 157.57-31.98 74.07-86.82 129.36-54.83 55.29-128.87 87.17-74.04 31.88-158.51 31.88Zm-.03-68.13q141.04 0 239.45-98.75 98.4-98.76 98.4-239.1 0-141.04-98.4-239.45-98.41-98.4-239.57-98.4-140.16 0-238.95 98.4-98.78 98.41-98.78 239.57 0 140.16 98.75 238.95 98.76 98.78 239.1 98.78ZM480-480Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M249-201.26 201.26-249l231-231-231-231L249-758.74l231 231 231-231L758.74-711l-231 231 231 231L711-201.26l-231-231-231 231Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M319-249.52h322v-62.63H319v62.63Zm0-170h322v-62.63H319v62.63Zm-96.85 345.5q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M347.41-154.5q-30.1 0-51.51-21.43-21.4-21.44-21.4-51.54 0-30.1 21.43-51.31Q317.37-300 347.47-300q30.1 0 51.31 21.25Q420-257.51 420-227.41q0 30.1-21.25 51.51-21.24 21.4-51.34 21.4Zm265.34 0q-30.1 0-51.42-21.43Q540-197.37 540-227.47q0-30.1 21.39-51.31Q582.79-300 612.83-300q30.14 0 51.4 21.25 21.27 21.24 21.27 51.34 0 30.1-21.32 51.51-21.33 21.4-51.43 21.4ZM347.41-407.37q-30.1 0-51.51-21.39-21.4-21.4-21.4-51.44 0-30.23 21.43-51.33 21.44-21.1 51.54-21.1 30.1 0 51.31 21.19Q420-510.26 420-480.14q0 30.12-21.25 51.44-21.24 21.33-51.34 21.33Zm265.34 0q-30.1 0-51.42-21.39Q540-450.16 540-480.2q0-30.23 21.39-51.33 21.4-21.1 51.44-21.1 30.14 0 51.4 21.19 21.27 21.18 21.27 51.3 0 30.12-21.32 51.44-21.33 21.33-51.43 21.33ZM347.41-660q-30.1 0-51.51-21.39-21.4-21.4-21.4-51.44 0-30.14 21.43-51.4 21.44-21.27 51.54-21.27 30.1 0 51.31 21.32Q420-762.85 420-732.75t-21.25 51.42Q377.51-660 347.41-660Zm265.34 0q-30.1 0-51.42-21.39Q540-702.79 540-732.83q0-30.14 21.39-51.4 21.4-21.27 51.44-21.27 30.14 0 51.4 21.32 21.27 21.33 21.27 51.43t-21.32 51.42Q642.85-660 612.75-660Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-114.02v-68.13h652.2v68.13h-652.2ZM309.8-258.57q-65.17 0-110.48-44.93-45.3-44.93-45.3-109.85v-432.87h664.07q28.1 0 48.11 20.08 20.02 20.08 20.02 48.05v160q0 28.1-20.02 48.12-20.01 20.01-48.11 20.01h-92.66v136.61q0 64.92-45.47 109.85-45.48 44.93-110.55 44.93H309.8Zm.24-519.28H657.3 222.15h87.89Zm415.39 159.76h92.42v-160h-92.42v160ZM569.15-326.93q34.84 0 61.5-26.52 26.65-26.52 26.65-60.14v-364.26H399.15v37.31l71 58q1 1 9 18v150q0 9.6-7 16.8-7 7.2-18 7.2h-151q-11 0-18-7.2t-7-16.8v-150q0-4 9-18l72-58v-37.31h-137v364.26q0 33.62 26.98 60.14 26.97 26.52 60.91 26.52h259.11ZM355.57-777.85h40-40Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-339.5 234.26-585.24 283-633.98l197 198 197-197 48.74 48.74L480-339.5Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-338.26 234.26-584 283-632.74l197 197 197-197L725.74-584 480-338.26Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m524.26-481-198-198L375-727.74 621.74-481 375-234.26 326.26-283l198-198Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M194.02-445.93v-68.14h572.2v68.14h-572.2Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m224.15-107.56 67.39-291.29L65.41-594.78l298.52-25.72L480-895.3l116.07 274.8 298.52 25.72-226.13 195.93 67.63 291.29L480-262.3 224.15-107.56Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M452-203.43h60v-201.96l82.48 82.48 42-42L480-517.15 325.76-362.91l42 42L452-405.39v201.96ZM222.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480.12-330q70.88 0 120.38-49.62t49.5-120.5q0-70.88-49.62-120.38T479.88-670Q409-670 359.5-620.38T310-499.88q0 70.88 49.62 120.38t120.5 49.5Zm-.3-61.83q-45.15 0-76.57-31.6-31.42-31.6-31.42-76.75t31.6-76.57q31.6-31.42 76.75-31.42t76.57 31.6q31.42 31.6 31.42 76.75t-31.6 76.57q-31.6 31.42-76.75 31.42ZM480-194.5q-147.91 0-267.35-84.67Q93.22-363.85 34.5-500q58.72-136.15 178.15-220.83Q332.09-805.5 480-805.5q147.91 0 267.35 84.67Q866.78-636.15 925.5-500q-58.72 136.15-178.15 220.83Q627.91-194.5 480-194.5Z"/></svg>
@@ -1,4 +1,4 @@
1
- import { onMounted, ref, watch, computed } from "vue";
1
+ import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
2
2
 
3
3
  const BREAKPOINT_NAME = {
4
4
  xs: "xs",
@@ -50,7 +50,11 @@ export default function useBreakpoint() {
50
50
  onMounted(() => {
51
51
  windowWidth.value = window.innerWidth;
52
52
 
53
- window.addEventListener(resizeListener, { passive: true });
53
+ window.addEventListener("resize", resizeListener, { passive: true });
54
+ });
55
+
56
+ onBeforeUnmount(() => {
57
+ window.removeEventListener("resize", resizeListener, { passive: true });
54
58
  });
55
59
 
56
60
  watch(windowWidth, setBreakpoint, { immediate: true });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "0.0.70",
3
+ "version": "0.0.72",
4
4
  "license": "MIT",
5
5
  "description": "Vue Styleless Component Framework.",
6
6
  "homepage": "https://vueless.com",
@@ -17,14 +17,13 @@
17
17
  "release:patch": "release-it patch --ci --npm.publish",
18
18
  "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
19
19
  "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
20
- "sb:dev-full": "STORYBOOK_VUELESS_ENV=1 STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
20
+ "sb:dev-full": "STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
21
21
  "sb:dev": "storybook dev -p 6006 --docs --no-open",
22
- "sb:build": "STORYBOOK_VUELESS_ENV=1 storybook build --docs",
22
+ "sb:build": "storybook build --docs",
23
23
  "sb:preview": "vite preview --host --outDir=storybook-static",
24
- "package:prepare": "node src/gen.web-types && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && rm -rf dist/assets && node dist.prepare"
24
+ "package:prepare": "node src/gen.web-types && node icons.prepare && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node dist.prepare"
25
25
  },
26
26
  "dependencies": {
27
- "@material-symbols/svg-500": "^0.17.3",
28
27
  "@tailwindcss/forms": "^0.5.7",
29
28
  "@uppy/core": "^3.10.1",
30
29
  "@uppy/drag-drop": "^3.1.0",
@@ -37,6 +36,7 @@
37
36
  "vuedraggable": "^4.1.0"
38
37
  },
39
38
  "devDependencies": {
39
+ "@material-symbols/svg-500": "^0.17.4",
40
40
  "@release-it/bumper": "^6.0.1",
41
41
  "@vitejs/plugin-vue": "^5.0.4",
42
42
  "@vue/eslint-config-prettier": "^9.0.0",
@@ -146,7 +146,6 @@ slotLeft.args = {
146
146
  <UIcon
147
147
  name="star"
148
148
  color="gray"
149
- size="md"
150
149
  />
151
150
  </template>
152
151
  `,
@@ -159,7 +158,6 @@ slotRight.args = {
159
158
  <UIcon
160
159
  name="star"
161
160
  color="gray"
162
- size="md"
163
161
  />
164
162
  </template>
165
163
  `,
@@ -57,7 +57,6 @@ slotLeft.args = {
57
57
  <UIcon
58
58
  name="star"
59
59
  color="green"
60
- size="md"
61
60
  />
62
61
  </template>
63
62
  `,
@@ -70,7 +69,6 @@ slotRight.args = {
70
69
  <UIcon
71
70
  name="star"
72
71
  color="green"
73
- size="md"
74
72
  />
75
73
  </template>
76
74
  `,
@@ -25,6 +25,8 @@ export default /*tw*/ {
25
25
  },
26
26
  },
27
27
  icon: "",
28
+ expandIconName: "add",
29
+ collapseIconName: "remove",
28
30
  separator: "mt-2 h-px w-full lg:mt-6 bg-gray-100 mt-2.5 group-last:hidden",
29
31
  defaultVariants: {
30
32
  size: "md",
@@ -4,7 +4,13 @@
4
4
  <div v-bind="titleAttrs">
5
5
  <div v-text="title" />
6
6
 
7
- <UIcon :name="isOpened ? 'remove' : 'add'" :size="size" color="gray" v-bind="iconAttrs" />
7
+ <UIcon
8
+ :name="isOpened ? config.collapseIconName : config.expandIconName"
9
+ :size="size"
10
+ color="gray"
11
+ internal
12
+ v-bind="iconAttrs"
13
+ />
8
14
  </div>
9
15
 
10
16
  <div :id="`description-${id}`" v-bind="descriptionAttrs" v-text="description" />
@@ -84,7 +90,7 @@ const emit = defineEmits(["itemClicked"]);
84
90
 
85
91
  const isOpened = ref(false);
86
92
 
87
- const { wrapperAttrs, descriptionAttrs, infoAttrs, titleAttrs, iconAttrs, separatorAttrs } =
93
+ const { config, wrapperAttrs, descriptionAttrs, infoAttrs, titleAttrs, iconAttrs, separatorAttrs } =
88
94
  useAttrs(props, { isOpened });
89
95
 
90
96
  function onClickItem() {
@@ -32,9 +32,10 @@
32
32
  @click="onClickBackLink"
33
33
  >
34
34
  <UIcon
35
- :name="config.backLinkIconName"
35
+ internal
36
36
  size="xs"
37
37
  color="gray"
38
+ :name="config.backLinkIconName"
38
39
  v-bind="backLinkIconAttrs"
39
40
  />
40
41
  {{ backRoute.title }}
@@ -54,8 +55,9 @@
54
55
  <slot name="header-right">
55
56
  <UIcon
56
57
  v-if="closeIcon"
57
- :name="config.closeIconName"
58
+ internal
58
59
  interactive
60
+ :name="config.closeIconName"
59
61
  :data-cy="`${dataCy}-close`"
60
62
  v-bind="closeIconAttrs"
61
63
  @click="onClickCloseModal"
@@ -17,9 +17,10 @@
17
17
  v-bind="backLinkAttrs"
18
18
  >
19
19
  <UIcon
20
- :name="config.backLinkIconName"
20
+ internal
21
21
  size="xs"
22
22
  color="gray"
23
+ :name="config.backLinkIconName"
23
24
  v-bind="backLinkIconAttrs"
24
25
  />
25
26
  {{ backRoute.title }}
@@ -84,7 +84,6 @@ slotIcons.args = {
84
84
  <UIcon
85
85
  name="star"
86
86
  color="red"
87
- size="md"
88
87
  />
89
88
  </template>
90
89
  `,
@@ -25,7 +25,7 @@
25
25
  <template #item="{ element }">
26
26
  <div :id="element.id" :data-cy="`${dataCy}-item`" v-bind="itemWrapperAttrs">
27
27
  <div :data-cy="`${dataCy}-item-${element.id}`" v-bind="itemAttrs">
28
- <UIcon :name="config.iconDragName" color="gray" v-bind="iconDragAttrs" />
28
+ <UIcon internal :name="config.iconDragName" color="gray" v-bind="iconDragAttrs" />
29
29
 
30
30
  <div v-bind="titleAttrs(element.isActive)">
31
31
  <slot :item="element">
@@ -44,9 +44,10 @@
44
44
 
45
45
  <UIcon
46
46
  v-if="!element.isHiddenDelete"
47
+ internal
47
48
  interactive
48
- :name="config.iconDeleteName"
49
49
  color="gray"
50
+ :name="config.iconDeleteName"
50
51
  :data-cy="`${dataCy}-delete`"
51
52
  :tooltip="currentLocale.delete"
52
53
  v-bind="iconDeleteAttrs"
@@ -55,9 +56,10 @@
55
56
 
56
57
  <UIcon
57
58
  v-if="!element.isHiddenEdit"
59
+ internal
58
60
  interactive
59
- :name="config.iconEditName"
60
61
  color="gray"
62
+ :name="config.iconEditName"
61
63
  :data-cy="`${dataCy}-edit`"
62
64
  :tooltip="currentLocale.edit"
63
65
  v-bind="iconEditAttrs"
@@ -158,18 +158,20 @@
158
158
  <div v-if="isShownIcon({ index, row })" v-bind="toggleItemButtonAttrs">
159
159
  <UIcon
160
160
  v-if="row.isHidden"
161
- :name="config.expandIconName"
162
- interactive
163
161
  size="xs"
162
+ internal
163
+ interactive
164
+ :name="config.expandIconName"
164
165
  :color="isIconActive(row)"
165
166
  v-bind="expandIconAttrs"
166
167
  />
167
168
 
168
169
  <UIcon
169
170
  v-else
170
- :name="config.collapseIconName"
171
- interactive
172
171
  size="xs"
172
+ internal
173
+ interactive
174
+ :name="config.collapseIconName"
173
175
  v-bind="collapseIconAttrs"
174
176
  />
175
177
  </div>
@@ -16,6 +16,7 @@
16
16
  <template #right>
17
17
  <UIcon
18
18
  v-if="!noIcon"
19
+ internal
19
20
  :name="config.iconName"
20
21
  :size="iconSize"
21
22
  :color="color"
@@ -19,6 +19,7 @@
19
19
  <template #right>
20
20
  <UIcon
21
21
  v-if="!noIcon"
22
+ internal
22
23
  :name="config.iconName"
23
24
  :size="iconSize"
24
25
  :color="iconColor"
@@ -19,6 +19,7 @@
19
19
  <template #right>
20
20
  <UIcon
21
21
  v-if="!noIcon"
22
+ internal
22
23
  :name="config.iconName"
23
24
  :size="iconSize"
24
25
  :color="color"
@@ -78,7 +78,13 @@
78
78
  </div>
79
79
  </div>
80
80
  <UButton pill square v-bind="buttonAddAttrs" @click="onClickAddOption">
81
- <UIcon color="white" size="xs" :name="config.iconAddName" v-bind="iconAddAttrs" />
81
+ <UIcon
82
+ internal
83
+ color="white"
84
+ size="xs"
85
+ :name="config.iconAddName"
86
+ v-bind="iconAddAttrs"
87
+ />
82
88
  </UButton>
83
89
  </template>
84
90
  </ul>
@@ -26,6 +26,7 @@
26
26
  <template #right>
27
27
  <UIcon
28
28
  v-if="!range"
29
+ internal
29
30
  size="sm"
30
31
  color="gray"
31
32
  variant="light"
@@ -47,6 +48,7 @@
47
48
  @click="onClickPrevButton"
48
49
  >
49
50
  <UIcon
51
+ internal
50
52
  size="sm"
51
53
  color="gray"
52
54
  variant="light"
@@ -67,6 +69,7 @@
67
69
  @click="onClickNextButton"
68
70
  >
69
71
  <UIcon
72
+ internal
70
73
  size="sm"
71
74
  color="gray"
72
75
  variant="light"
@@ -23,7 +23,13 @@
23
23
  />
24
24
 
25
25
  <label v-if="isChecked" v-bind="iconWrapperCellAttrs" :for="id">
26
- <UIcon :name="iconName" :size="iconSize" color="white" v-bind="iconAttrs" />
26
+ <UIcon
27
+ internal
28
+ :name="partial ? config.partialIconName : config.selectedIconName"
29
+ :size="iconSize"
30
+ color="white"
31
+ v-bind="iconAttrs"
32
+ />
27
33
  </label>
28
34
 
29
35
  <template #footer>
@@ -184,10 +190,6 @@ const checkboxName = ref("");
184
190
 
185
191
  const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = useAttrs(props);
186
192
 
187
- const iconName = computed(() => {
188
- return props.partial ? config.value.partialIconName : config.value.selectedIconName;
189
- });
190
-
191
193
  const iconSize = computed(() => {
192
194
  const sizes = {
193
195
  sm: "xs",
@@ -25,8 +25,9 @@
25
25
 
26
26
  <UIcon
27
27
  v-if="selectedItem === ''"
28
- :name="config.iconName"
28
+ internal
29
29
  color="gray"
30
+ :name="config.iconName"
30
31
  v-bind="iconAttrs"
31
32
  size="sm"
32
33
  />
@@ -107,7 +107,6 @@ slotIcon.args = {
107
107
  <UIcon
108
108
  name="star"
109
109
  color="black"
110
- size="md"
111
110
  />
112
111
  </template>
113
112
  `,
@@ -8,6 +8,7 @@ import defaultConfig from "../configs/default.config";
8
8
  export default function useAttrs(props, { isShownMenu }) {
9
9
  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
10
10
 
11
+ const wrapperAttrs = getAttrs("wrapper");
11
12
  const buttonWrapperAttrsRaw = getAttrs("buttonWrapper");
12
13
  const buttonAttrsRaw = getAttrs("button");
13
14
  const shiftRangeButtonAttrs = getAttrs("shiftRangeButton");
@@ -91,6 +92,7 @@ export default function useAttrs(props, { isShownMenu }) {
91
92
 
92
93
  return {
93
94
  config,
95
+ wrapperAttrs,
94
96
  calendarAttrs,
95
97
  inputAttrs,
96
98
  menuAttrs,
@@ -1,4 +1,5 @@
1
1
  export default /*tw*/ {
2
+ wrapper: "",
2
3
  input: "",
3
4
  inputActive: {
4
5
  block: {
@@ -34,6 +35,7 @@ export default /*tw*/ {
34
35
  [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
35
36
  `,
36
37
  periodButtonIcon: "",
38
+ periodButtonIconName: "apps",
37
39
  periodButtonActive: "bg-zinc-200",
38
40
  rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
39
41
  rangeSwitchTitle: "font-medium text-sm",
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div>
2
+ <div v-bind="wrapperAttrs">
3
3
  <UInput
4
4
  v-if="isVariant.input"
5
5
  :id="id"
@@ -29,30 +29,32 @@
29
29
 
30
30
  <div v-if="isVariant.button" v-bind="buttonWrapperAttrs">
31
31
  <UButton
32
- :disabled="disabled"
32
+ square
33
33
  :size="size"
34
+ :disabled="disabled"
34
35
  v-bind="shiftRangeButtonAttrs"
35
36
  @click="onClickShiftRange('prev')"
36
37
  >
37
- <UIcon interactive size="sm" :name="config.prevIconName" v-bind="prevIconAttrs" />
38
+ <UIcon internal interactive size="sm" :name="config.prevIconName" v-bind="prevIconAttrs" />
38
39
  </UButton>
39
40
 
40
41
  <UButton
41
42
  :id="id"
42
- :disabled="disabled"
43
43
  :size="size"
44
+ :disabled="disabled"
44
45
  :label="userFormatDate"
45
46
  v-bind="buttonAttrs"
46
47
  @click="activate"
47
48
  />
48
49
 
49
50
  <UButton
50
- :disabled="disabled"
51
+ square
51
52
  :size="size"
53
+ :disabled="disabled"
52
54
  v-bind="shiftRangeButtonAttrs"
53
55
  @click="onClickShiftRange('next')"
54
56
  >
55
- <UIcon interactive size="sm" :name="config.nextIconName" v-bind="nextIconAttrs" />
57
+ <UIcon internal interactive size="sm" :name="config.nextIconName" v-bind="nextIconAttrs" />
56
58
  </UButton>
57
59
  </div>
58
60
 
@@ -91,8 +93,12 @@
91
93
  v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
92
94
  @click="onClickOwnRange"
93
95
  >
94
- <UIcon name="apps" size="xs" v-bind="periodButtonIconAttrs" />
95
-
96
+ <UIcon
97
+ internal
98
+ :name="config.periodButtonIconName"
99
+ size="xs"
100
+ v-bind="periodButtonIconAttrs"
101
+ />
96
102
  {{ locale.ownRange }}
97
103
  </div>
98
104
  </div>
@@ -100,6 +106,7 @@
100
106
  <template v-if="!isPeriod.ownRange && !isPeriod.custom">
101
107
  <div v-bind="rangeSwitchWrapperAttrs">
102
108
  <UIcon
109
+ internal
103
110
  interactive
104
111
  color="grayscale"
105
112
  size="sm"
@@ -111,7 +118,9 @@
111
118
  <div v-bind="rangeSwitchTitleAttrs">
112
119
  {{ rangeSwitchTitle }}
113
120
  </div>
121
+
114
122
  <UIcon
123
+ internal
115
124
  interactive
116
125
  class="icon"
117
126
  size="sm"
@@ -128,9 +137,8 @@
128
137
  :disabled="isDatePeriodOutOfRange(date)"
129
138
  v-bind="periodDateAttrs(getPeriodDateClasses(date))"
130
139
  @click="selectDate(date), toggleMenu()"
131
- >
132
- {{ date.title }}
133
- </button>
140
+ v-text="date.title"
141
+ />
134
142
  </div>
135
143
  </template>
136
144
 
@@ -374,6 +382,7 @@ const isShownMenu = ref(false);
374
382
 
375
383
  const {
376
384
  config,
385
+ wrapperAttrs,
377
386
  calendarAttrs,
378
387
  inputAttrs,
379
388
  menuAttrs,
@@ -4,8 +4,8 @@ export default /*tw*/ {
4
4
  rightSlot: "flex items-center justify-end whitespace-nowrap pr-4 rounded-r-lg rounded-l-none",
5
5
  leftSlot: "flex items-center justify-end whitespace-nowrap pl-4 rounded-l-lg rounded-r-none",
6
6
  passwordIcon: "",
7
- passwordVisibleIconName: "visibility",
8
- passwordHiddenIconName: "visibility_off",
7
+ passwordVisibleIconName: "visibility-fill",
8
+ passwordHiddenIconName: "visibility_off-fill",
9
9
  block: {
10
10
  base: `
11
11
  rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex
@@ -47,10 +47,10 @@
47
47
  <slot name="right-icon">
48
48
  <UIcon
49
49
  v-if="isTypePassword"
50
- :name="passwordIconName"
50
+ :name="isShownPassword ? config.passwordVisibleIconName : config.passwordHiddenIconName"
51
51
  color="gray"
52
52
  interactive
53
- fill
53
+ internal
54
54
  :data-cy="`${dataCy}-show-password`"
55
55
  v-bind="passwordIconAttrs"
56
56
  @click="onClickShowPassword"
@@ -283,12 +283,6 @@ const {
283
283
  hasSlotContent,
284
284
  } = useAttrs(props, { isTypePassword, inputPasswordClasses });
285
285
 
286
- const passwordIconName = computed(() => {
287
- return isShownPassword.value
288
- ? config.value.passwordVisibleIconName
289
- : config.value.passwordHiddenIconName;
290
- });
291
-
292
286
  const inputType = computed(() => {
293
287
  return isShownPassword.value || props.noAutocomplete ? "text" : props.type;
294
288
  });
@@ -11,9 +11,10 @@
11
11
  <div :id="fileId" :data-cy="dataCy" v-bind="uploadAttrs">
12
12
  <div v-if="!filesData.length" v-bind="blockAttrs">
13
13
  <UIcon
14
- :name="config.iconUploadFileName"
14
+ internal
15
15
  color="gray"
16
16
  :size="componentSize"
17
+ :name="config.iconUploadFileName"
17
18
  v-bind="iconUploadFileAttrs"
18
19
  />
19
20
 
@@ -24,10 +25,11 @@
24
25
  <UFiles :options="filesList" v-bind="filesAttrs">
25
26
  <template #right="file">
26
27
  <UIcon
27
- :name="config.iconCloseName"
28
+ internal
28
29
  interactive
29
- :size="componentSize"
30
30
  color="gray"
31
+ :size="componentSize"
32
+ :name="config.iconCloseName"
31
33
  v-bind="iconCloseAttrs"
32
34
  @click="onClickDeleteFile(file)"
33
35
  />
@@ -11,8 +11,9 @@
11
11
  @click="onClickRemove"
12
12
  >
13
13
  <UIcon
14
- :name="config.removeIconName"
14
+ internal
15
15
  :size="size"
16
+ :name="config.removeIconName"
16
17
  :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
17
18
  :data-cy="`${dataCy}-remove`"
18
19
  v-bind="removeIconAttrs"
@@ -35,8 +36,9 @@
35
36
  @click="onClickAdd"
36
37
  >
37
38
  <UIcon
38
- :name="config.addIconName"
39
+ internal
39
40
  :size="size"
41
+ :name="config.addIconName"
40
42
  :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
41
43
  :data-cy="`${dataCy}-add`"
42
44
  v-bind="addIconAttrs"
@@ -19,16 +19,17 @@ export function useAttrs(props) {
19
19
  const counterAttrs = getAttrs("counter", { classes: counterClasses });
20
20
  const ratingAttrs = getAttrs("rating");
21
21
  const wrapperAttrs = getAttrs("wrapper");
22
- const iconsAttrs = getAttrs("icons", { isComponent: true });
23
- const iconsContainerAttrs = getAttrs("iconsContainer");
22
+ const iconAttrs = getAttrs("icon", { isComponent: true });
23
+ const iconWrapperAttrs = getAttrs("iconWrapper");
24
24
  const labelAttrs = getAttrs("label", { isComponent: true });
25
25
 
26
26
  return {
27
+ config,
27
28
  counterAttrs,
28
29
  ratingAttrs,
29
30
  wrapperAttrs,
30
- iconsAttrs,
31
- iconsContainerAttrs,
31
+ iconAttrs,
32
+ iconWrapperAttrs,
32
33
  labelAttrs,
33
34
  };
34
35
  }
@@ -2,8 +2,10 @@ export default /*tw*/ {
2
2
  rating: "flex flex-col",
3
3
  label: "",
4
4
  wrapper: "",
5
- iconsContainer: "leading-none flex",
6
- icons: "",
5
+ iconWrapper: "leading-none flex",
6
+ icon: "",
7
+ selectedIconName: "star-fill",
8
+ unselectedIconName: "star",
7
9
  counter: {
8
10
  base: "leading-none",
9
11
  variants: {
@@ -16,16 +16,17 @@
16
16
  </slot>
17
17
  </div>
18
18
 
19
- <div v-bind="iconsContainerAttrs">
19
+ <div v-bind="iconWrapperAttrs">
20
20
  <UIcon
21
21
  v-for="star in starsNumber"
22
22
  :key="star"
23
- :data-cy="`${dataCy}-rating-star-${star}`"
24
- :name="star <= ratingCounter ? 'star-fill' : 'star'"
25
- :size="iconSize"
23
+ internal
26
24
  color="yellow"
25
+ :size="iconSize"
27
26
  :interactive="selectable"
28
- v-bind="iconsAttrs"
27
+ :data-cy="`${dataCy}-rating-star-${star}`"
28
+ :name="star <= ratingCounter ? config.selectedIconName : config.unselectedIconName"
29
+ v-bind="iconAttrs"
29
30
  @mouseover="onMouseHover(star)"
30
31
  @mouseleave="onMouseHover()"
31
32
  @click="onClickStar(star)"
@@ -149,7 +150,7 @@ const emit = defineEmits(["update:modelValue"]);
149
150
 
150
151
  const hovered = ref(null);
151
152
 
152
- const { counterAttrs, ratingAttrs, wrapperAttrs, iconsAttrs, iconsContainerAttrs, labelAttrs } =
153
+ const { config, counterAttrs, ratingAttrs, wrapperAttrs, iconAttrs, iconWrapperAttrs, labelAttrs } =
153
154
  useAttrs(props);
154
155
 
155
156
  const iconSize = computed(() => {
@@ -36,8 +36,9 @@
36
36
 
37
37
  <template #right-icon>
38
38
  <UIcon
39
- color="gray"
39
+ internal
40
40
  interactive
41
+ color="gray"
41
42
  :name="config.closeIconName"
42
43
  :data-cy="`${dataCy}-close`"
43
44
  :size="iconSize"
@@ -47,9 +48,10 @@
47
48
 
48
49
  <UIcon
49
50
  v-if="!searchButton"
50
- color="grayscale"
51
+ internal
51
52
  interactive
52
53
  :size="iconSize"
54
+ color="grayscale"
53
55
  :name="config.searchIconName"
54
56
  :data-cy="`${dataCy}-search`"
55
57
  v-bind="searchIconAttrs"
@@ -15,7 +15,7 @@
15
15
  >
16
16
  <!-- @slot Use it to add icon. -->
17
17
  <slot v-if="withIcon" name="icon" :item="item">
18
- <UIcon :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
18
+ <UIcon internal :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
19
19
  </slot>
20
20
  </URadio>
21
21
  </label>
@@ -38,6 +38,7 @@
38
38
  @mousedown.prevent.stop="toggle"
39
39
  >
40
40
  <UIcon
41
+ internal
41
42
  interactive
42
43
  color="gray"
43
44
  :size="size"
@@ -56,6 +57,7 @@
56
57
 
57
58
  <div v-if="isLocalValue && !noClear && !disabled && !multiple" v-bind="caretClearAttrs">
58
59
  <UIcon
60
+ internal
59
61
  interactive
60
62
  color="gray"
61
63
  :size="size"
@@ -88,6 +90,7 @@
88
90
  @click.prevent.capture
89
91
  >
90
92
  <UIcon
93
+ internal
91
94
  interactive
92
95
  color="gray"
93
96
  :size="size"
@@ -454,6 +457,15 @@ const labelComponentRef = ref(null);
454
457
  const leftSlotWrapperRef = ref(null);
455
458
  const innerWrapperRef = ref(null);
456
459
 
460
+ defineExpose({
461
+ dropdownListRef,
462
+ wrapperRef,
463
+ searchInputRef,
464
+ labelComponentRef,
465
+ leftSlotWrapperRef,
466
+ innerWrapperRef,
467
+ });
468
+
457
469
  const isTop = computed(() => {
458
470
  if (props.openDirection === DIRECTION.top) return true;
459
471
  if (props.openDirection === DIRECTION.bottom) return false;
@@ -24,7 +24,8 @@
24
24
  <span v-bind="circleAttrs">
25
25
  <UIcon
26
26
  v-if="toggleIcon"
27
- :name="iconName"
27
+ internal
28
+ :name="checkedValue ? config.selectedIconName : config.unselectedIconName"
28
29
  :color="iconColor"
29
30
  :size="iconSize"
30
31
  v-bind="iconAttrs"
@@ -185,10 +186,6 @@ const iconColor = computed(() => {
185
186
  return checkedValue.value ? props.color : "grayscale";
186
187
  });
187
188
 
188
- const iconName = computed(() => {
189
- return checkedValue.value ? config.value.selectedIconName : config.value.unselectedIconName;
190
- });
191
-
192
189
  function toggle() {
193
190
  if (!props.disabled) {
194
191
  checkedValue.value = !checkedValue.value;
@@ -131,7 +131,6 @@ slotLeft.args = {
131
131
  <UIcon
132
132
  name="star"
133
133
  color="black"
134
- size="md"
135
134
  />
136
135
  </template>
137
136
  `,
@@ -144,7 +143,6 @@ slotLeft.args = {
144
143
  <UIcon
145
144
  name="star"
146
145
  color="black"
147
- size="md"
148
146
  />
149
147
  </template>
150
148
  `,
@@ -129,40 +129,39 @@ const props = defineProps({
129
129
  type: String,
130
130
  default: "",
131
131
  },
132
+
133
+ /**
134
+ * Mark that Icon used inside Vueless components (used to get icons from vueless library).
135
+ * @ignore
136
+ */
137
+ internal: {
138
+ type: Boolean,
139
+ default: false,
140
+ },
132
141
  });
133
142
 
134
143
  const emit = defineEmits(["click", "focus", "blur"]);
135
144
 
136
145
  const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
137
146
 
138
- let generatedIcons = [];
147
+ const generatedIcons = computed(() => {
148
+ if (!import.meta.env.PROD) return [];
139
149
 
140
- if (import.meta.env.PROD) {
141
- // when building storybook from inside the package (only for Vueless contributors).
142
- if (import.meta.env.STORYBOOK_VUELESS_ENV) {
143
- generatedIcons = Object.entries(
144
- import.meta.glob(`../assets/images/.generated/**/*.svg`, {
145
- eager: true,
146
- query: "?component",
147
- }),
148
- );
149
- } else {
150
- generatedIcons = Object.entries(
151
- import.meta.glob(`../../../src/assets/images/.generated/**/*.svg`, {
152
- eager: true,
153
- query: "?component",
154
- }),
155
- );
156
- }
157
- }
150
+ return Object.entries(
151
+ import.meta.glob(`../assets/icons/**/*.svg`, {
152
+ eager: true,
153
+ query: "?component",
154
+ }),
155
+ );
156
+ });
158
157
 
159
158
  const dynamicComponent = computed(() => {
160
159
  const FILL_SUFFIX = "-fill";
161
160
 
162
- const library = config.value.defaultVariants.library;
161
+ const library = props.internal ? "vueless" : config.value.defaultVariants.library;
163
162
  const weight = config.value.defaultVariants.weight;
164
163
  const style = config.value.defaultVariants.style;
165
- const fill = props.fill || config.value.defaultVariants.fill ? FILL_SUFFIX : "";
164
+ const isFill = props.name.endsWith(FILL_SUFFIX);
166
165
  const name = props.name;
167
166
  const src = props.src;
168
167
 
@@ -176,12 +175,8 @@ const dynamicComponent = computed(() => {
176
175
  if (!name) return "";
177
176
 
178
177
  function getIcon(params) {
179
- const [, component] = generatedIcons.find(([path]) =>
180
- params.every((param) => {
181
- const skipFilled = fill ? true : !path.includes(FILL_SUFFIX);
182
-
183
- return skipFilled && path.includes(param);
184
- }),
178
+ const [, component] = generatedIcons.value.find(([path]) =>
179
+ params.every((param) => (isFill || !path.includes(FILL_SUFFIX)) && path.includes(param)),
185
180
  );
186
181
 
187
182
  return component;
@@ -189,18 +184,23 @@ const dynamicComponent = computed(() => {
189
184
 
190
185
  /* eslint-disable vue/max-len, prettier/prettier */
191
186
  const libraries = {
187
+ "vueless": async () => {
188
+ return import.meta.env.PROD
189
+ ? await getIcon([name])
190
+ : import(/* @vite-ignore */ `../assets/icons/${name}.svg?component`);
191
+ },
192
192
  "@material-symbols": async () => {
193
193
  return import.meta.env.PROD
194
- ? await getIcon([library, weight, style, name, fill])
195
- : import(/* @vite-ignore */ `/node_modules/${library}/svg-${weight}/${style}/${name}${fill}.svg?component`);
194
+ ? await getIcon([library, weight, style, name])
195
+ : import(/* @vite-ignore */ `/node_modules/${library}/svg-${weight}/${style}/${name}.svg?component`);
196
196
  },
197
197
  "bootstrap-icons": async () => {
198
198
  return import.meta.env.PROD
199
- ? await getIcon([library, name, fill])
200
- : import(/* @vite-ignore */ `/node_modules/${library}/icons/${name}${fill}.svg?component`);
199
+ ? await getIcon([library, name])
200
+ : import(/* @vite-ignore */ `/node_modules/${library}/icons/${name}.svg?component`);
201
201
  },
202
- heroicons: async () => {
203
- const fillType = fill ? "solid" : "outline";
202
+ "heroicons": async () => {
203
+ const fillType = isFill ? "solid" : "outline";
204
204
 
205
205
  return import.meta.env.PROD
206
206
  ? await getIcon([library, style, fillType, name])
@@ -17,6 +17,7 @@
17
17
  color="green"
18
18
  variant="light"
19
19
  size="md"
20
+ internal
20
21
  :name="config.iconSuccessName"
21
22
  v-bind="iconSuccessAttrs"
22
23
  />
@@ -27,6 +28,7 @@
27
28
  color="orange"
28
29
  variant="light"
29
30
  size="md"
31
+ internal
30
32
  :name="config.iconWarningName"
31
33
  v-bind="iconWarningAttrs"
32
34
  />
@@ -37,6 +39,7 @@
37
39
  color="red"
38
40
  variant="light"
39
41
  size="md"
42
+ internal
40
43
  :name="config.iconErrorName"
41
44
  v-bind="iconErrorAttrs"
42
45
  />
@@ -56,6 +59,7 @@
56
59
  color="gray"
57
60
  variant="light"
58
61
  size="xs"
62
+ internal
59
63
  interactive
60
64
  :name="config.iconCloseName"
61
65
  v-bind="iconCloseAttrs"
@@ -10,9 +10,10 @@
10
10
  <UButton size="sm" variant="thirdary" :color="color" square v-bind="buttonAttrs">
11
11
  <UIcon
12
12
  v-if="closeIcon"
13
+ internal
14
+ size="xs"
13
15
  :color="color"
14
16
  :name="config.iconName"
15
- size="xs"
16
17
  :data-cy="`${dataCy}-button`"
17
18
  v-bind="iconAttrs"
18
19
  @click="onHidden"
@@ -3,7 +3,14 @@
3
3
  <div v-bind="headerAttrs">
4
4
  <!-- @slot Use it to add something to the header. -->
5
5
  <slot name="header">
6
- <UIcon :name="config.iconName" color="gray" :size="iconSize" pill v-bind="iconAttrs" />
6
+ <UIcon
7
+ internal
8
+ :name="config.iconName"
9
+ color="gray"
10
+ :size="iconSize"
11
+ pill
12
+ v-bind="iconAttrs"
13
+ />
7
14
  </slot>
8
15
  </div>
9
16
 
@@ -7,9 +7,10 @@
7
7
 
8
8
  <UIcon
9
9
  v-else
10
- :name="config.iconDescriptionName"
11
- color="gray"
10
+ internal
12
11
  interactive
12
+ color="gray"
13
+ :name="config.iconDescriptionName"
13
14
  v-bind="iconAttrs"
14
15
  @focus="onFocus"
15
16
  @blur="onBlur"
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "framework": "vue",
3
3
  "name": "vueless",
4
- "version": "0.0.70",
4
+ "version": "0.0.72",
5
5
  "contributions": {
6
6
  "html": {
7
7
  "description-markup": "markdown",
@@ -3193,6 +3193,15 @@
3193
3193
  "type": "string"
3194
3194
  },
3195
3195
  "default": "\"\""
3196
+ },
3197
+ {
3198
+ "name": "internal",
3199
+ "description": "@ignore: Mark that Icon used inside Vueless components (used to get icons from vueless library).",
3200
+ "value": {
3201
+ "kind": "expression",
3202
+ "type": "boolean"
3203
+ },
3204
+ "default": "false"
3196
3205
  }
3197
3206
  ],
3198
3207
  "events": [