@salla.sa/twilight-components 1.0.58 → 1.0.60

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 (159) hide show
  1. package/dist/cjs/{index-0b5b5867.js → index-543e387e.js} +293 -8
  2. package/dist/cjs/index.cjs.js +0 -11
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/salla-branches.cjs.entry.js +2 -2
  5. package/dist/cjs/salla-button.cjs.entry.js +2 -2
  6. package/dist/cjs/salla-conditional-fields.cjs.entry.js +17 -3
  7. package/dist/cjs/salla-infinite-scroll.cjs.entry.js +2 -2
  8. package/dist/cjs/salla-localization-modal.cjs.entry.js +2 -2
  9. package/dist/cjs/salla-login-modal.cjs.entry.js +199 -4
  10. package/dist/cjs/salla-modal_2.cjs.entry.js +87 -4
  11. package/dist/cjs/salla-offer-modal.cjs.entry.js +2 -2
  12. package/dist/cjs/salla-product-availability.cjs.entry.js +2 -2
  13. package/dist/cjs/salla-quantity-input.cjs.entry.js +9 -6
  14. package/dist/cjs/salla-rating-modal.cjs.entry.js +6 -56
  15. package/dist/cjs/salla-rating-stars.cjs.entry.js +80 -0
  16. package/dist/cjs/salla-tabby.cjs.entry.js +19 -0
  17. package/dist/cjs/salla-tamara.cjs.entry.js +19 -0
  18. package/dist/cjs/salla-tel-input.cjs.entry.js +2 -2
  19. package/dist/cjs/salla-verify-modal.cjs.entry.js +2 -2
  20. package/dist/cjs/twilight-components.cjs.js +2 -2
  21. package/dist/collection/collection-manifest.json +5 -2
  22. package/dist/collection/components/salla-branches/salla-branches.css +1077 -0
  23. package/dist/collection/components/salla-button/salla-button.css +1077 -0
  24. package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js +16 -2
  25. package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.css +1077 -0
  26. package/dist/collection/components/salla-localization-modal/salla-localization-modal.css +1077 -0
  27. package/dist/collection/components/salla-login-modal/salla-login-modal.css +1077 -0
  28. package/dist/collection/components/salla-modal/salla-modal.css +1077 -0
  29. package/dist/collection/components/salla-offer-modal/salla-offer-modal.css +1077 -0
  30. package/dist/collection/components/salla-product-availability/salla-product-availability.css +1077 -0
  31. package/dist/collection/components/salla-quantity-input/salla-quantity-input.js +8 -5
  32. package/dist/collection/components/salla-rating-modal/salla-rating-modal.css +1077 -0
  33. package/dist/collection/components/salla-rating-modal/salla-rating-modal.js +5 -59
  34. package/dist/collection/components/salla-rating-stars/salla-rating-stars.css +1089 -0
  35. package/dist/collection/components/salla-rating-stars/salla-rating-stars.js +137 -0
  36. package/dist/collection/components/salla-search/salla-search.css +1077 -0
  37. package/dist/collection/components/salla-tabby/salla-tabby.css +1117 -0
  38. package/dist/collection/components/salla-tabby/salla-tabby.js +14 -0
  39. package/dist/collection/components/salla-tamara/salla-tamara.css +1135 -0
  40. package/dist/collection/components/salla-tamara/salla-tamara.js +15 -0
  41. package/dist/collection/components/salla-tel-input/salla-tel-input.css +1290 -0
  42. package/dist/collection/components/salla-verify-modal/salla-verify-modal.css +1077 -0
  43. package/dist/collection/index.js +1 -2
  44. package/dist/components/Helper.js +23 -0
  45. package/dist/components/index.d.ts +26 -0
  46. package/dist/components/index.js +1 -0
  47. package/dist/components/salla-branches.d.ts +7 -0
  48. package/dist/components/salla-branches.js +90 -0
  49. package/dist/components/salla-button.d.ts +7 -0
  50. package/dist/components/salla-button.js +118 -0
  51. package/dist/components/salla-conditional-fields.d.ts +7 -0
  52. package/dist/components/salla-conditional-fields.js +89 -0
  53. package/dist/components/salla-infinite-scroll.d.ts +7 -0
  54. package/dist/components/salla-infinite-scroll.js +93 -0
  55. package/dist/components/salla-localization-modal.d.ts +7 -0
  56. package/dist/components/salla-localization-modal.js +116 -0
  57. package/dist/components/salla-login-modal.d.ts +7 -0
  58. package/dist/components/salla-login-modal.js +205 -0
  59. package/dist/components/salla-modal.d.ts +7 -0
  60. package/dist/components/salla-modal.js +152 -0
  61. package/dist/components/salla-offer-modal.d.ts +7 -0
  62. package/dist/components/salla-offer-modal.js +141 -0
  63. package/dist/components/salla-product-availability.d.ts +7 -0
  64. package/dist/components/salla-product-availability.js +114 -0
  65. package/dist/components/salla-quantity-input.d.ts +7 -0
  66. package/dist/components/salla-quantity-input.js +66 -0
  67. package/dist/components/salla-rating-modal.d.ts +7 -0
  68. package/dist/components/salla-rating-modal.js +178 -0
  69. package/dist/components/salla-rating-stars.d.ts +7 -0
  70. package/dist/components/salla-rating-stars.js +79 -0
  71. package/dist/components/salla-search.d.ts +7 -0
  72. package/dist/components/salla-search.js +91 -0
  73. package/dist/components/salla-tabby.d.ts +7 -0
  74. package/dist/components/salla-tabby.js +18 -0
  75. package/dist/components/salla-tamara.d.ts +7 -0
  76. package/dist/components/salla-tamara.js +19 -0
  77. package/dist/components/salla-tel-input.d.ts +7 -0
  78. package/dist/components/salla-tel-input.js +1477 -0
  79. package/dist/components/salla-verify-modal.d.ts +7 -0
  80. package/dist/components/salla-verify-modal.js +147 -0
  81. package/dist/esm/{index-8b97d225.js → index-2423ebcb.js} +293 -8
  82. package/dist/esm/index.js +1 -4
  83. package/dist/esm/loader.js +2 -2
  84. package/dist/esm/salla-branches.entry.js +2 -2
  85. package/dist/esm/salla-button.entry.js +2 -2
  86. package/dist/esm/salla-conditional-fields.entry.js +17 -3
  87. package/dist/esm/salla-infinite-scroll.entry.js +2 -2
  88. package/dist/esm/salla-localization-modal.entry.js +2 -2
  89. package/dist/esm/salla-login-modal.entry.js +202 -3
  90. package/dist/esm/salla-modal_2.entry.js +87 -4
  91. package/dist/esm/salla-offer-modal.entry.js +2 -2
  92. package/dist/esm/salla-product-availability.entry.js +2 -2
  93. package/dist/esm/salla-quantity-input.entry.js +9 -6
  94. package/dist/esm/salla-rating-modal.entry.js +6 -56
  95. package/dist/esm/salla-rating-stars.entry.js +76 -0
  96. package/dist/esm/salla-tabby.entry.js +15 -0
  97. package/dist/esm/salla-tamara.entry.js +15 -0
  98. package/dist/esm/salla-tel-input.entry.js +2 -2
  99. package/dist/esm/salla-verify-modal.entry.js +2 -2
  100. package/dist/esm/twilight-components.js +2 -2
  101. package/dist/twilight-components/index.esm.js +0 -1
  102. package/dist/twilight-components/p-01accdcd.entry.js +1 -0
  103. package/dist/twilight-components/p-0e85664f.entry.js +1 -0
  104. package/dist/twilight-components/p-0ee36dd8.entry.js +1 -0
  105. package/dist/twilight-components/p-1fb0ca8a.js +1 -0
  106. package/dist/twilight-components/p-1ffd27c4.entry.js +1 -0
  107. package/dist/twilight-components/p-2012882b.entry.js +1 -0
  108. package/dist/twilight-components/p-3d9fd3d3.entry.js +1 -0
  109. package/dist/twilight-components/p-5b2cdd7c.entry.js +1 -0
  110. package/dist/twilight-components/p-728bd268.entry.js +1 -0
  111. package/dist/twilight-components/p-72985a41.entry.js +1 -0
  112. package/dist/twilight-components/p-747f80df.entry.js +1 -0
  113. package/dist/twilight-components/p-81a7a676.entry.js +1 -0
  114. package/dist/twilight-components/p-880711d4.entry.js +1 -0
  115. package/dist/twilight-components/p-8dd742df.entry.js +1 -0
  116. package/dist/twilight-components/p-9642541b.entry.js +1 -0
  117. package/dist/twilight-components/p-a24588ab.entry.js +1 -0
  118. package/dist/twilight-components/p-e3cbda45.entry.js +1 -0
  119. package/dist/twilight-components/twilight-components.css +1 -1
  120. package/dist/twilight-components/twilight-components.esm.js +1 -1
  121. package/dist/types/components/salla-conditional-fields/salla-conditional-fields.d.ts +1 -0
  122. package/dist/types/components/salla-quantity-input/salla-quantity-input.d.ts +2 -1
  123. package/dist/types/components/salla-rating-modal/salla-rating-modal.d.ts +0 -3
  124. package/dist/types/components/salla-rating-stars/salla-rating-stars.d.ts +11 -0
  125. package/dist/types/components/salla-tabby/salla-tabby.d.ts +3 -0
  126. package/dist/types/components/salla-tamara/salla-tamara.d.ts +3 -0
  127. package/dist/types/components.d.ts +45 -0
  128. package/dist/types/index.d.ts +1 -2
  129. package/example/assets/images/star.png +0 -0
  130. package/example/dist/tailwind.css +40 -23
  131. package/example/dist/twilight.js +437 -2
  132. package/example/index.html +415 -259
  133. package/package.json +17 -10
  134. package/dist/cjs/salla-login-modal-02e4e65e.js +0 -204
  135. package/dist/cjs/salla-search-9d17eb96.js +0 -90
  136. package/dist/esm/salla-login-modal-7ad386c8.js +0 -202
  137. package/dist/esm/salla-search-ce45eb5b.js +0 -88
  138. package/dist/loader/cdn.js +0 -3
  139. package/dist/loader/index.cjs.js +0 -3
  140. package/dist/loader/index.d.ts +0 -13
  141. package/dist/loader/index.es2017.js +0 -3
  142. package/dist/loader/index.js +0 -4
  143. package/dist/loader/package.json +0 -10
  144. package/dist/twilight-components/p-1514ed09.js +0 -1
  145. package/dist/twilight-components/p-2a032b88.entry.js +0 -1
  146. package/dist/twilight-components/p-2f3f4cce.entry.js +0 -1
  147. package/dist/twilight-components/p-40693cd3.entry.js +0 -1
  148. package/dist/twilight-components/p-5d5b04ec.entry.js +0 -1
  149. package/dist/twilight-components/p-635c08a7.entry.js +0 -1
  150. package/dist/twilight-components/p-64977eab.entry.js +0 -1
  151. package/dist/twilight-components/p-6c928c14.entry.js +0 -1
  152. package/dist/twilight-components/p-79ab1ed9.entry.js +0 -1
  153. package/dist/twilight-components/p-7c4ba872.entry.js +0 -1
  154. package/dist/twilight-components/p-84936d9d.entry.js +0 -1
  155. package/dist/twilight-components/p-884a80ca.entry.js +0 -1
  156. package/dist/twilight-components/p-c51984d6.entry.js +0 -1
  157. package/dist/twilight-components/p-cb1c59a2.js +0 -1
  158. package/dist/twilight-components/p-ebd63ad4.js +0 -1
  159. package/dist/twilight-components/p-ee9d8563.entry.js +0 -1
package/example/index.html CHANGED
@@ -13,11 +13,9 @@
13
13
  let url = window.location.href.split('/').slice(0, -1).join('/') + '/';
14
14
  salla.init({ debug: true, store: { api: url } });
15
15
  </script>
16
- <script type="module" src="dist/twilight-components/twilight-components.esm.js"></script>
17
- <link href="https://assets.salla.sa/cp/assets/css/icons/sallaicons/style.css?v0.twilight" type="text/css"
18
- rel="stylesheet">
16
+ <script type="module" src="./../dist/twilight-components/twilight-components.esm.js"></script>
17
+ <link href="https://assets.salla.sa/cp/assets/css/icons/sallaicons/style.css?v0.twilight" type="text/css" rel="stylesheet">
19
18
  <link href="dist/tailwind.css" type="text/css" rel="stylesheet">
20
- <link href="dist/intlTelInput.min.css" type="text/css" rel="stylesheet">
21
19
  <style>
22
20
  :root {
23
21
  --font-main: 'DINNextLTArabic-Regular';
@@ -43,7 +41,7 @@
43
41
  </style>
44
42
  </head>
45
43
 
46
- <body dir="ltr" class="page-show salla-one color-mode-dark ltr font-dubai bg-gray-50">
44
+ <body dir="ltr" class="page-show salla-one color-mode-dark ltr font-dubai bg-gray-50" x-data="{text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quae reiciendis dolorem fugiat mollitia animi laudantium voluptates nulla consequatur ea eveniet aut dolores facilis doloremque neque, similique dignissimos esse possimus!'}">
47
45
 
48
46
  <!-- Header -->
49
47
  <header class="flex-none relative z-50 text-sm leading-6 font-medium bg-white">
@@ -55,13 +53,8 @@
55
53
  </a>
56
54
  <p class="hidden lg:block text-sm ml-6 border-l border-gray-200 pl-6">
57
55
  <a href="#" target="_blank"
58
- class="relative flex items-center hover:text-gray-900">
59
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-teal-500" viewBox="0 0 20 20"
60
- fill="currentColor">
61
- <path fill-rule="evenodd"
62
- d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
63
- clip-rule="evenodd"></path>
64
- </svg>
56
+ class="relative flex items-center transition-colors text-gray-500 hover:text-primary">
57
+ <i class="sicon-layout-grid mr-2 text-gray-400"></i>
65
58
  Twilight Components
66
59
  <svg aria-hidden="true" width="11" height="11" fill="currentColor" class="ml-1.5">
67
60
  <path d="M5.593 10.139L10.232 5.5 5.593.862l-.895.89 3.107 3.102H0v1.292h7.805L4.698 9.254l.895.885z">
@@ -97,7 +90,7 @@
97
90
  style="display: none;">
98
91
  <p class="py-3 px-3.5 truncate">
99
92
  <span class="block mb-0.5 text-xs text-gray-500">Hi there</span>
100
- <span class="">Quick access to</span>
93
+ <span class="">Quick access to</span>
101
94
  </p>
102
95
  <div class="py-1.5 px-3.5">
103
96
  <a href="#" class="group flex sm:hidden items-center py-1.5 hover:text-teal-600">
@@ -219,292 +212,455 @@
219
212
 
220
213
 
221
214
  <!-- Components -->
222
- <div id="components" class="container mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-24 space-y-8">
223
- <div class="pb-6">
215
+ <div id="components" class="container mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-24">
216
+ <div class="pb-12">
224
217
  <h2 id="buttons-section-heading" class="text-3xl font-extrabold text-gray-900">Salla Twilight Components</h2>
225
218
  <p class="text-sm text-gray-500 mt-2">Buttons, popup modals, infinit scroll, branches, localization, login,
226
219
  offers, rating and much more -- everything you need to build beautiful E-commerce theme.</p>
227
220
  </div>
228
-
229
- <!-- Buttons Section -->
230
- <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
231
- style="scroll-margin-top:6.25rem">
232
- <div class="pb-6">
233
- <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Buttons</h2>
234
- <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaButton.html" class="text-primary">@see</a></p>
235
- </div>
236
221
 
237
- <!-- Default -->
238
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
239
- <div class="col-span-3 xl:col-span-1">
240
- <h3 class="text-gray-900 font-semibold">Default</h3>
241
- <p class="text-sm text-gray-500 mt-2">Without any props</p>
222
+ <div class="space-y-16">
223
+
224
+ <!-- Login Modal -->
225
+ <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
226
+ style="scroll-margin-top:6.25rem">
227
+ <div class="pb-6">
228
+ <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Login & Register Modal</h2>
229
+ <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
242
230
  </div>
243
- <div class="col-span-3 flex flex-wrap items-center gap-2">
244
- <salla-button>Primary</salla-button>
245
- <salla-button color="success">success</salla-button>
246
- <salla-button color="danger">danger</salla-button>
247
- <salla-button color="warning">warning</salla-button>
248
- <salla-button color="light">light</salla-button>
249
- <salla-button color="gray">gray</salla-button>
250
- <salla-button color="dark">dark</salla-button>
231
+
232
+ <!-- Default -->
233
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
234
+ <div class="col-span-3 xl:col-span-1">
235
+ <h3 class="text-gray-900 font-semibold">Login Modal</h3>
236
+ </div>
237
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
238
+ <salla-button data-on-click="login::show">Login Component</salla-button>
239
+ <salla-login-modal is-email-allowed is-mobile-allowed is-email-required></salla-login-modal>
240
+ </div>
251
241
  </div>
252
- </div>
242
+ </section>
243
+
253
244
 
254
- <!-- Outine -->
255
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
256
- <div class="col-span-3 xl:col-span-1">
257
- <h3 class="text-gray-900 font-semibold">Outline</h3>
258
- <p class="text-sm text-gray-500 mt-2">
259
- <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">fill="outline"</span> -->
260
- </p>
245
+ <!-- Buttons Section -->
246
+ <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
247
+ style="scroll-margin-top:6.25rem">
248
+ <div class="pb-6">
249
+ <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Buttons</h2>
250
+ <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaButton.html" class="text-primary">@see</a></p>
261
251
  </div>
262
-
263
- <div class="col-span-3 flex flex-wrap items-center gap-2">
264
- <salla-button fill="outline">Primary</salla-button>
265
- <salla-button fill="outline" color="success">success</salla-button>
266
- <salla-button fill="outline" color="danger">danger</salla-button>
267
- <salla-button fill="outline" color="warning">warning</salla-button>
268
- <salla-button fill="outline" color="light">light</salla-button>
269
- <salla-button fill="outline" color="gray">gray</salla-button>
270
- <salla-button fill="outline" color="dark">dark</salla-button>
252
+
253
+ <!-- Default -->
254
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
255
+ <div class="col-span-3 xl:col-span-1">
256
+ <h3 class="text-gray-900 font-semibold">Default</h3>
257
+ <p class="text-sm text-gray-500 mt-2">Without any props</p>
258
+ </div>
259
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
260
+ <salla-button>Primary</salla-button>
261
+ <salla-button color="success">success</salla-button>
262
+ <salla-button color="danger">danger</salla-button>
263
+ <salla-button color="warning">warning</salla-button>
264
+ <salla-button color="light">light</salla-button>
265
+ <salla-button color="gray">gray</salla-button>
266
+ <salla-button color="dark">dark</salla-button>
267
+ </div>
271
268
  </div>
272
- </div>
273
269
 
274
- <!-- Loading -->
275
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
276
- <div class="col-span-3 xl:col-span-1">
277
- <h3 class="text-gray-900 font-semibold">Loading</h3>
270
+ <!-- Outine -->
271
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
272
+ <div class="col-span-3 xl:col-span-1">
273
+ <h3 class="text-gray-900 font-semibold">Outline</h3>
274
+ <p class="text-sm text-gray-500 mt-2">
275
+ <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">fill="outline"</span> -->
276
+ </p>
277
+ </div>
278
+
279
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
280
+ <salla-button fill="outline">Primary</salla-button>
281
+ <salla-button fill="outline" color="success">success</salla-button>
282
+ <salla-button fill="outline" color="danger">danger</salla-button>
283
+ <salla-button fill="outline" color="warning">warning</salla-button>
284
+ <salla-button fill="outline" color="light">light</salla-button>
285
+ <salla-button fill="outline" color="gray">gray</salla-button>
286
+ <salla-button fill="outline" color="dark">dark</salla-button>
287
+ </div>
278
288
  </div>
279
- <div class="col-span-3 space-y-4">
280
- <div class="flex flex-wrap items-center gap-2">
281
- <salla-button loading>Primary</salla-button>
282
- <salla-button color="success" loading>success</salla-button>
283
- <salla-button color="danger" loading>danger</salla-button>
284
- <salla-button color="warning" fill="outline" loading>warning</salla-button>
285
- <salla-button color="light" fill="outline" loading>light</salla-button>
286
- <salla-button color="gray" fill="outline" loading>gray</salla-button>
287
- </div>
288
- <div class="flex flex-wrap items-center gap-2">
289
- <salla-button shape="icon" loading>Primary</salla-button>
290
- <salla-button shape="icon" color="success" loading>success</salla-button>
291
- <salla-button shape="icon" color="danger" loading>danger</salla-button>
292
- <salla-button shape="icon" color="warning" fill="outline" loading>warning</salla-button>
293
- <salla-button shape="icon" color="light" fill="outline" loading>light</salla-button>
294
- <salla-button shape="icon" color="gray" fill="outline" loading>gray</salla-button>
295
- </div>
296
- <div class="flex flex-wrap items-center gap-2">
297
- <salla-button shape="icon" size="small" loading>Primary</salla-button>
298
- <salla-button shape="icon" size="small" color="success" loading>success</salla-button>
299
- <salla-button shape="icon" size="small" color="danger" loading>danger</salla-button>
300
- <salla-button shape="icon" size="small" color="warning" fill="outline" loading>warning</salla-button>
301
- <salla-button shape="icon" size="small" color="light" fill="outline" loading>light</salla-button>
302
- <salla-button shape="icon" size="small" color="gray" fill="outline" loading>gray</salla-button>
289
+
290
+ <!-- Loading -->
291
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
292
+ <div class="col-span-3 xl:col-span-1">
293
+ <h3 class="text-gray-900 font-semibold">Loading</h3>
294
+ </div>
295
+ <div class="col-span-3 space-y-4">
296
+ <div class="flex flex-wrap items-center gap-2">
297
+ <salla-button loading>Primary</salla-button>
298
+ <salla-button color="success" loading>success</salla-button>
299
+ <salla-button color="danger" loading>danger</salla-button>
300
+ <salla-button color="warning" fill="outline" loading>warning</salla-button>
301
+ <salla-button color="light" fill="outline" loading>light</salla-button>
302
+ <salla-button color="gray" fill="outline" loading>gray</salla-button>
303
+ </div>
304
+ <div class="flex flex-wrap items-center gap-2">
305
+ <salla-button shape="icon" loading>Primary</salla-button>
306
+ <salla-button shape="icon" color="success" loading>success</salla-button>
307
+ <salla-button shape="icon" color="danger" loading>danger</salla-button>
308
+ <salla-button shape="icon" color="warning" fill="outline" loading>warning</salla-button>
309
+ <salla-button shape="icon" color="light" fill="outline" loading>light</salla-button>
310
+ <salla-button shape="icon" color="gray" fill="outline" loading>gray</salla-button>
311
+ </div>
312
+ <div class="flex flex-wrap items-center gap-2">
313
+ <salla-button shape="icon" size="small" loading>Primary</salla-button>
314
+ <salla-button shape="icon" size="small" color="success" loading>success</salla-button>
315
+ <salla-button shape="icon" size="small" color="danger" loading>danger</salla-button>
316
+ <salla-button shape="icon" size="small" color="warning" fill="outline" loading>warning</salla-button>
317
+ <salla-button shape="icon" size="small" color="light" fill="outline" loading>light</salla-button>
318
+ <salla-button shape="icon" size="small" color="gray" fill="outline" loading>gray</salla-button>
319
+ </div>
303
320
  </div>
304
321
  </div>
305
- </div>
306
322
 
307
- <!-- Size -->
308
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
309
- <div class="col-span-3 xl:col-span-1">
310
- <h3 class="text-gray-900 font-semibold">Size</h3>
323
+ <!-- Size -->
324
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
325
+ <div class="col-span-3 xl:col-span-1">
326
+ <h3 class="text-gray-900 font-semibold">Size</h3>
327
+ </div>
328
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
329
+ <salla-button size="large">Large</salla-button>
330
+ <salla-button >Default</salla-button>
331
+ <salla-button size="small">Small</salla-button>
332
+ <salla-button size="large" fill="outline">Large</salla-button>
333
+ <salla-button fill="outline">Default</salla-button>
334
+ <salla-button size="small" fill="outline">Small</salla-button>
335
+ </div>
311
336
  </div>
312
- <div class="col-span-3 flex flex-wrap items-center gap-2">
313
- <salla-button size="large">Large</salla-button>
314
- <salla-button >Default</salla-button>
315
- <salla-button size="small">Small</salla-button>
316
- <salla-button size="large" fill="outline">Large</salla-button>
317
- <salla-button fill="outline">Default</salla-button>
318
- <salla-button size="small" fill="outline">Small</salla-button>
337
+
338
+ <!-- Wide -->
339
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
340
+ <div class="col-span-3 xl:col-span-1">
341
+ <h3 class="text-gray-900 font-semibold">Wide Buttons</h3>
342
+ </div>
343
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
344
+ <salla-button width="wide"><i class="sicon-shopping-bag mr-2"></i> Wide Button</salla-button>
345
+ </div>
319
346
  </div>
320
- </div>
321
347
 
322
- <!-- Wide -->
323
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
324
- <div class="col-span-3 xl:col-span-1">
325
- <h3 class="text-gray-900 font-semibold">Wide Buttons</h3>
348
+ <!-- Disabled -->
349
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
350
+ <div class="col-span-3 xl:col-span-1">
351
+ <h3 class="text-gray-900 font-semibold">Disabled</h3>
352
+ </div>
353
+ <div class="col-span-3 space-y-4">
354
+ <div class="flex flex-wrap items-center gap-2">
355
+ <salla-button disabled>Disabled</salla-button>
356
+ <salla-button disabled color="danger">Disabled</salla-button>
357
+ <salla-button disabled color="warning">Disabled</salla-button>
358
+ <salla-button fill="outline" disabled>Disabled</salla-button>
359
+ <salla-button fill="outline" disabled color="danger">Disabled</salla-button>
360
+ <salla-button fill="outline" disabled color="warning">Disabled</salla-button>
361
+ </div>
362
+ <div class="flex flex-wrap items-center gap-2">
363
+ <salla-button shape="icon" disabled><i class="sicon-shopping-bag"></i></salla-button>
364
+ <salla-button shape="icon" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
365
+ <salla-button shape="icon" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
366
+ <salla-button shape="icon" fill="outline" disabled><i class="sicon-shopping-bag"></i></salla-button>
367
+ <salla-button shape="icon" fill="outline" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
368
+ <salla-button shape="icon" fill="outline" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
369
+ </div>
370
+ </div>
326
371
  </div>
327
- <div class="col-span-3 flex flex-wrap items-center gap-2">
328
- <salla-button width="wide"><i class="sicon-shopping-bag mr-2"></i> Wide Button</salla-button>
329
- </div>
330
- </div>
331
372
 
332
- <!-- Disabled -->
333
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
334
- <div class="col-span-3 xl:col-span-1">
335
- <h3 class="text-gray-900 font-semibold">Disabled</h3>
373
+ <!-- Link -->
374
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
375
+ <div class="col-span-3 xl:col-span-1">
376
+ <h3 class="text-gray-900 font-semibold">Button as link</h3>
377
+ <p class="text-sm text-gray-500 mt-2">
378
+ <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">shape="link"</span> -->
379
+ </p>
380
+ </div>
381
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
382
+ <salla-button shape="link">Primary Link</salla-button>
383
+ <salla-button shape="link" color="success">success Link</salla-button>
384
+ <salla-button shape="link" color="danger">danger Link</salla-button>
385
+ <salla-button shape="link" color="warning">warning Link</salla-button>
386
+ <salla-button shape="link" color="light">light Link</salla-button>
387
+ <salla-button shape="link" color="gray">gray Link</salla-button>
388
+ <salla-button shape="link" color="dark">dark Link</salla-button>
389
+ </div>
336
390
  </div>
337
- <div class="col-span-3 space-y-4">
338
- <div class="flex flex-wrap items-center gap-2">
339
- <salla-button disabled>Disabled</salla-button>
340
- <salla-button disabled color="danger">Disabled</salla-button>
341
- <salla-button disabled color="warning">Disabled</salla-button>
342
- <salla-button fill="outline" disabled>Disabled</salla-button>
343
- <salla-button fill="outline" disabled color="danger">Disabled</salla-button>
344
- <salla-button fill="outline" disabled color="warning">Disabled</salla-button>
345
- </div>
346
- <div class="flex flex-wrap items-center gap-2">
347
- <salla-button shape="icon" disabled><i class="sicon-shopping-bag"></i></salla-button>
348
- <salla-button shape="icon" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
349
- <salla-button shape="icon" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
350
- <salla-button shape="icon" fill="outline" disabled><i class="sicon-shopping-bag"></i></salla-button>
351
- <salla-button shape="icon" fill="outline" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
352
- <salla-button shape="icon" fill="outline" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
353
- </div>
354
- </div>
355
- </div>
356
391
 
357
- <!-- Link -->
358
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
359
- <div class="col-span-3 xl:col-span-1">
360
- <h3 class="text-gray-900 font-semibold">Button as link</h3>
361
- <p class="text-sm text-gray-500 mt-2">
362
- <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">shape="link"</span> -->
363
- </p>
392
+ <!-- Icon -->
393
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
394
+ <div class="col-span-3 xl:col-span-1">
395
+ <h3 class="text-gray-900 font-semibold">Icon</h3>
396
+ </div>
397
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
398
+ <salla-button shape="icon"><i class="sicon-shopping-bag"></i></salla-button>
399
+ <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
400
+ <salla-button shape="icon" color="danger"><i class="sicon-cancel"></i></salla-button>
401
+ <salla-button shape="icon" color="warning"><i class="sicon-shopping-bag"></i>
402
+ </salla-button>
403
+ <salla-button shape="icon" color="light"><i class="sicon-sync"></i></salla-button>
404
+ <salla-button shape="icon" color="gray"><i class="sicon-shipping-fast"></i>
405
+ </salla-button>
406
+ <salla-button shape="icon" color="dark"><i class="sicon-survey"></i></salla-button>
407
+ </div>
364
408
  </div>
365
- <div class="col-span-3 flex flex-wrap items-center gap-2">
366
- <salla-button shape="link">Primary Link</salla-button>
367
- <salla-button shape="link" color="success">success Link</salla-button>
368
- <salla-button shape="link" color="danger">danger Link</salla-button>
369
- <salla-button shape="link" color="warning">warning Link</salla-button>
370
- <salla-button shape="link" color="light">light Link</salla-button>
371
- <salla-button shape="link" color="gray">gray Link</salla-button>
372
- <salla-button shape="link" color="dark">dark Link</salla-button>
409
+
410
+ <!-- Icon Outline -->
411
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
412
+ <div class="col-span-3 xl:col-span-1">
413
+ <h3 class="text-gray-900 font-semibold">Icon Outline</h3>
414
+ </div>
415
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
416
+ <salla-button shape="icon" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
417
+ <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
418
+ <salla-button shape="icon" color="danger" fill="outline"><i class="sicon-cancel"></i></salla-button>
419
+ <salla-button shape="icon" color="warning" fill="outline"><i class="sicon-shopping-bag"></i>
420
+ </salla-button>
421
+ <salla-button shape="icon" color="light" fill="outline"><i class="sicon-sync"></i></salla-button>
422
+ <salla-button shape="icon" color="gray" fill="outline"><i class="sicon-shipping-fast"></i>
423
+ </salla-button>
424
+ <salla-button shape="icon" color="dark" fill="outline"><i class="sicon-survey"></i></salla-button>
425
+ </div>
373
426
  </div>
374
- </div>
375
427
 
376
- <!-- Icon -->
377
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
378
- <div class="col-span-3 xl:col-span-1">
379
- <h3 class="text-gray-900 font-semibold">Icon</h3>
428
+ <!-- Icon Size -->
429
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
430
+ <div class="col-span-3 xl:col-span-1">
431
+ <h3 class="text-gray-900 font-semibold">Icon Size</h3>
432
+ </div>
433
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
434
+ <salla-button shape="icon" size="large"><i class="sicon-shopping-bag"></i></salla-button>
435
+ <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
436
+ <salla-button shape="icon" color="danger" size="small"><i class="sicon-cancel"></i></salla-button>
437
+ <salla-button shape="icon" size="large" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
438
+ <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
439
+ <salla-button shape="icon" color="danger" size="small" fill="outline"><i class="sicon-cancel"></i></salla-button>
440
+ </div>
380
441
  </div>
381
- <div class="col-span-3 flex flex-wrap items-center gap-2">
382
- <salla-button shape="icon"><i class="sicon-shopping-bag"></i></salla-button>
383
- <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
384
- <salla-button shape="icon" color="danger"><i class="sicon-cancel"></i></salla-button>
385
- <salla-button shape="icon" color="warning"><i class="sicon-shopping-bag"></i>
386
- </salla-button>
387
- <salla-button shape="icon" color="light"><i class="sicon-sync"></i></salla-button>
388
- <salla-button shape="icon" color="gray"><i class="sicon-shipping-fast"></i>
389
- </salla-button>
390
- <salla-button shape="icon" color="dark"><i class="sicon-survey"></i></salla-button>
391
- </div>
392
- </div>
442
+ </section>
393
443
 
394
- <!-- Icon Outline -->
395
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
396
- <div class="col-span-3 xl:col-span-1">
397
- <h3 class="text-gray-900 font-semibold">Icon Outline</h3>
444
+
445
+ <!-- Modal Section -->
446
+ <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
447
+ style="scroll-margin-top:6.25rem">
448
+ <div class="pb-6">
449
+ <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Modals</h2>
450
+ <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaModal.html" class="text-primary">@see</a></p>
398
451
  </div>
399
- <div class="col-span-3 flex flex-wrap items-center gap-2">
400
- <salla-button shape="icon" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
401
- <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
402
- <salla-button shape="icon" color="danger" fill="outline"><i class="sicon-cancel"></i></salla-button>
403
- <salla-button shape="icon" color="warning" fill="outline"><i class="sicon-shopping-bag"></i>
404
- </salla-button>
405
- <salla-button shape="icon" color="light" fill="outline"><i class="sicon-sync"></i></salla-button>
406
- <salla-button shape="icon" color="gray" fill="outline"><i class="sicon-shipping-fast"></i>
407
- </salla-button>
408
- <salla-button shape="icon" color="dark" fill="outline"><i class="sicon-survey"></i></salla-button>
409
- </div>
410
- </div>
411
452
 
412
- <!-- Icon Size -->
413
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
414
- <div class="col-span-3 xl:col-span-1">
415
- <h3 class="text-gray-900 font-semibold">Icon Size</h3>
453
+ <!-- Width -->
454
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ widths: [
455
+ { id: 'xs', label: 'Mini' },
456
+ { id: 'sm', label: 'Small' },
457
+ { id: 'md', label: 'Default' },
458
+ { id: 'full', label: 'Fullscreen' }
459
+ ]}">
460
+ <div class="col-span-3 xl:col-span-1">
461
+ <h3 class="text-gray-900 font-semibold">Modal Width</h3>
462
+ </div>
463
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
464
+
465
+ <!-- Modal Size -->
466
+ <template x-for="width in widths" :key="width.id">
467
+ <salla-button :data-target="'modal-size-' + width.id" data-on-click="modal::open" x-text="width.label"></salla-button>
468
+ </template>
469
+
470
+ <template x-for="width in widths" :key="width.id">
471
+ <salla-modal :id="'modal-size-' + width.id" :width="width.id" title="Vitae atque quisquam ea rem" sub-title="subtitle text here">
472
+ <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
473
+ </salla-modal>
474
+ </template>
475
+ </div>
416
476
  </div>
417
- <div class="col-span-3 flex flex-wrap items-center gap-2">
418
- <salla-button shape="icon" size="large"><i class="sicon-shopping-bag"></i></salla-button>
419
- <salla-button shape="icon" color="success"><i class="sicon-check"></i></salla-button>
420
- <salla-button shape="icon" color="danger" size="small"><i class="sicon-cancel"></i></salla-button>
421
- <salla-button shape="icon" size="large" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
422
- <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
423
- <salla-button shape="icon" color="danger" size="small" fill="outline"><i class="sicon-cancel"></i></salla-button>
424
- </div>
425
- </div>
426
- </section>
427
-
428
- <!-- Modal Section -->
429
- <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
430
- style="scroll-margin-top:6.25rem">
431
- <div class="pb-6">
432
- <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Modals</h2>
433
- <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaModal.html" class="text-primary">@see</a></p>
434
- </div>
435
477
 
436
- <!-- Default -->
437
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
438
- <div class="col-span-3 xl:col-span-1">
439
- <h3 class="text-gray-900 font-semibold">Default</h3>
440
- <p class="text-sm text-gray-500 mt-2">Without any props</p>
478
+ <!-- Position -->
479
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
480
+ { id: 'top', label: 'Top' },
481
+ { id: 'middle', label: 'Default' },
482
+ { id: 'bottom', label: 'Bottom' }
483
+ ]}">
484
+ <div class="col-span-3 xl:col-span-1">
485
+ <h3 class="text-gray-900 font-semibold">Modal Position</h3>
486
+ </div>
487
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
488
+
489
+ <template x-for="item in items" :key="item.id">
490
+ <salla-button :data-target="'modal-position-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
491
+ </template>
492
+
493
+ <template x-for="item in items" :key="item.id">
494
+ <salla-modal
495
+ :id="'modal-position-' + item.id"
496
+ :position="item.id"
497
+ size="sm"
498
+ title="Congratulations"
499
+ sub-title="Good, you are right!">
500
+ <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod.</p>
501
+ </salla-modal>
502
+ </salla-modal>
503
+ </template>
504
+ </div>
441
505
  </div>
442
- <div class="col-span-3 flex flex-wrap items-center gap-2">
443
- <salla-button>Primary</salla-button>
444
- <salla-button color="success">success</salla-button>
445
- <salla-button color="danger">danger</salla-button>
446
- <salla-button color="warning">warning</salla-button>
447
- <salla-button color="light">light</salla-button>
448
- <salla-button color="gray">gray</salla-button>
449
- <salla-button color="dark">dark</salla-button>
506
+
507
+ <!-- Header Icon -->
508
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ icons: [
509
+ { id: 'noraml', label: 'Default', icon: 'sicon-shopping-bag' },
510
+ { id: 'primary', label: 'Primary', icon: 'sicon-shopping-bag' },
511
+ { id: 'success', label: 'Success', icon: 'sicon-check' },
512
+ { id: 'error', label: 'Error', icon: 'sicon-cancel' }
513
+ ]}">
514
+ <div class="col-span-3 xl:col-span-1">
515
+ <h3 class="text-gray-900 font-semibold">Modal Header Icon</h3>
516
+ </div>
517
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
518
+
519
+ <template x-for="icon in icons" :key="icon.id">
520
+ <salla-button :data-target="'modal-icon-' + icon.id" data-on-click="modal::open" x-text="icon.label"></salla-button>
521
+ </template>
522
+ <salla-button data-target="modal-icon-image" data-on-click="modal::open">Image as Icon</salla-button>
523
+
524
+ <template x-for="icon in icons" :key="icon.id">
525
+ <salla-modal
526
+ :id="'modal-icon-' + icon.id"
527
+ :icon="icon.icon"
528
+ :icon-style="icon.id"
529
+ width="sm"
530
+ title="Vitae atque quisquam ea rem"
531
+ sub-title="subtitle text here">
532
+ <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
533
+ </salla-modal>
534
+ </template>
535
+
536
+ <salla-modal
537
+ id="modal-icon-image"
538
+ image-icon="./assets/images/star.png"
539
+ width="sm"
540
+ sub-title-first
541
+ title="Good, You are right!"
542
+ sub-title="Congratulations">
543
+ </salla-modal>
544
+ </div>
450
545
  </div>
451
- </div>
452
546
 
453
- <!-- Outine -->
454
- <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
455
- <div class="col-span-3 xl:col-span-1">
456
- <h3 class="text-gray-900 font-semibold">Outline</h3>
457
- <p class="text-sm text-gray-500 mt-2">
458
- <!-- <span class="inline text-xs py-1.5 px-2.5 text-gray-500 bg-gray-200 rounded-md">fill="outline"</span> -->
459
- </p>
547
+ <!-- Header Subtitle first -->
548
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
549
+ { id: 'below', label: 'Below' },
550
+ { id: 'first', label: 'First'}
551
+ ]}">
552
+ <div class="col-span-3 xl:col-span-1">
553
+ <h3 class="text-gray-900 font-semibold">Subtitle Position</h3>
554
+ </div>
555
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
556
+
557
+ <template x-for="item in items" :key="item.id">
558
+ <salla-button :data-target="'modal-subtitle-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
559
+ </template>
560
+
561
+ <template x-for="item in items" :key="item.id">
562
+ <salla-modal
563
+ :id="'modal-subtitle-' + item.id"
564
+ :sub-title-first="item.id == 'first' ? true : false"
565
+ icon="sicon-shopping-bag"
566
+ title="Vitae atque quisquam ea rem"
567
+ icon-style="primary"
568
+ sub-title="subtitle text here">
569
+ <p class="text-gray-500 mb-4 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
570
+ </salla-modal>
571
+ </template>
572
+
573
+ <!-- Modal #7 -->
574
+ <salla-modal id="modal7" no-padding>
575
+ <img src="https://source.unsplash.com/ejhjSZKTeeg/1024x800">
576
+ </salla-modal>
577
+ </div>
460
578
  </div>
461
-
462
- <div class="col-span-3 flex flex-wrap items-center gap-2">
463
- <salla-button fill="outline">Primary</salla-button>
464
- <salla-button fill="outline" color="success">success</salla-button>
465
- <salla-button fill="outline" color="danger">danger</salla-button>
466
- <salla-button fill="outline" color="warning">warning</salla-button>
467
- <salla-button fill="outline" color="light">light</salla-button>
468
- <salla-button fill="outline" color="gray">gray</salla-button>
469
- <salla-button fill="outline" color="dark">dark</salla-button>
579
+
580
+ <!-- No padding -->
581
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
582
+ { id: 'nopadding', label: 'No Padding Modal'}
583
+ ]}">
584
+ <div class="col-span-3 xl:col-span-1">
585
+ <h3 class="text-gray-900 font-semibold">Modal Without Padding</h3>
586
+ </div>
587
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
588
+
589
+ <template x-for="item in items" :key="item.id">
590
+ <salla-button :data-target="'modal-padding-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
591
+ </template>
592
+
593
+ <template x-for="item in items" :key="item.id">
594
+ <salla-modal
595
+ :id="'modal-padding-' + item.id"
596
+ :no-padding="item.id == 'nopadding' ? true : false">
597
+ <img src="https://source.unsplash.com/ejhjSZKTeeg/1024x800">
598
+ </salla-modal>
599
+ </template>
600
+ </div>
470
601
  </div>
471
- </div>
472
602
 
473
- </section>
474
- </div>
603
+ <!-- Is Closable -->
604
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
605
+ <div class="col-span-3 xl:col-span-1">
606
+ <h3 class="text-gray-900 font-semibold">Is Closable</h3>
607
+ </div>
608
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
609
+ <salla-button data-target="modal-not-closable" data-on-click="modal::open">Not Closable</salla-button>
610
+ <salla-modal
611
+ icon="sicon-home"
612
+ icon-style="primary"
613
+ id="modal-not-closable"
614
+ title="Not Closable Molda"
615
+ sub-title="You can't close it by clicking the background overlay and there is'nt cloase button"
616
+ is-closable="false">
617
+ <div class="text-center">
618
+ <p class="text-gray-500 mb-4">Close button below added as a modal content</p>
619
+ <salla-button fill="outline" color="light" data-on-click="modal::close" data-target="modal-not-closable">Close</salla-button>
620
+ </div>
621
+ </salla-modal>
622
+ </div>
623
+ </div>
475
624
 
625
+ <!-- Modal Footer -->
626
+ <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6" x-data="{ items: [
627
+ { id: 'noraml', label: 'Without Footer' },
628
+ { id: 'footer', label: 'With Footer'}
629
+ ]}">
630
+ <div class="col-span-3 xl:col-span-1">
631
+ <h3 class="text-gray-900 font-semibold">Modal Footer</h3>
632
+ </div>
633
+ <div class="col-span-3 flex flex-wrap items-center gap-2">
634
+
635
+ <template x-for="item in items" :key="item.id">
636
+ <salla-button :data-target="'modal-footer-' + item.id" data-on-click="modal::open" x-text="item.label"></salla-button>
637
+ </template>
638
+
639
+ <template x-for="item in items" :key="item.id">
640
+ <salla-modal
641
+ :id="'modal-footer-' + item.id"
642
+ icon="sicon-shopping-bag"
643
+ title="Vitae atque quisquam ea rem"
644
+ icon-style="primary"
645
+ sub-title="subtitle text here">
646
+ <p class="text-gray-500 mb-8 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
647
+ <div x-show="item.id == 'footer'" slot="footer" class="grid grid-cols-2 gap-3">
648
+ <salla-button class="w-full" fill="outline" color="light" data-on-click="modal::close" :data-target="'modal-footer-' + item.id">Cancel</salla-button>
649
+ <salla-button class="w-full" data-on-click="modal::close" :data-target="'modal-footer-' + item.id">Ok</salla-button>
650
+ </div>
651
+ </salla-modal>
652
+ </template>
476
653
 
477
- <div class="container py-10 grid-cols-2 grid gap-4">
478
- <div class="p-3 rounded-md bg-white shadow-sm">
479
- <h1 class="text-primary border-b border-dashed mb-4">Modal</h1>
480
- <p class="my-4">Description</p>
481
- <salla-button data-target="modal1" data-on-click="modal::open">Modal</salla-button>
482
- <salla-button btn-style="danger" data-target="modal2" data-on-click="modal::open">Error</salla-button>
483
- <salla-button data-target="modal3" data-on-click="modal::open">Success</salla-button>
484
- <salla-button data-target="modal4" data-on-click="modal::open">Small</salla-button>
485
- <salla-button btn-style="outline-primary" data-target="modal5" data-on-click="modal::open">Full</salla-button>
486
- <salla-button data-target="modal6" data-on-click="modal::open">With footer</salla-button>
487
- <salla-button btn-style="outline" data-target="modal7" data-on-click="modal::open">No Padding</salla-button>
488
- <salla-modal id="modal1">Your Awesome Content</salla-modal>
489
- <salla-modal id="modal2" title="Error!" sub-title="Whoops! Error happened" error></salla-modal>
490
- <salla-modal id="modal3" title="Congratulations" sub-title="Good, You are awesome!" success></salla-modal>
491
- <salla-modal id="modal4" width="xs">Small Modal</salla-modal>
492
- <salla-modal id="modal5" width="full">Full Modal</salla-modal>
493
- <salla-modal id="modal6">
494
- Modal Body
495
- <p slot="footer" class="text-gray-500 mt-4">
496
- <salla-button data-on-click="modal::close" data-target="modal6" wide>Close</salla-button>
497
- </p>
498
- </salla-modal>
499
- <salla-modal id="modal7" no-padding>Small Modal</salla-modal>
500
- </div>
654
+ </div>
655
+ </div>
656
+
657
+ </section>
501
658
 
502
- <div class=" p-3 rounded-md bg-white shadow-sm">
503
- <h1 class="text-primary border-b border-dashed mb-4">Login</h1>
504
- <p class="my-4">Description</p>
505
- <salla-button wide data-on-click="login::show">Login Component</salla-button>
506
- <salla-login is-email-allowed is-mobile-allowed is-email-required></salla-login>
507
659
  </div>
660
+ </div>
661
+
662
+
663
+ <div class="container py-10 grid-cols-2 grid gap-4">
508
664
 
509
665
  <div class=" p-3 rounded-md bg-white shadow-sm">
510
666
  <h1 class="text-primary border-b border-dashed mb-4">Localization</h1>
@@ -574,4 +730,4 @@
574
730
  <script src="dist/demo.js"></script>
575
731
  </body>
576
732
 
577
- </html>
733
+ </html>