@salla.sa/twilight-components 1.0.61 → 1.0.62

package/example/dist/demo.js

@@ -1,5 +1,6 @@
 let counter = 1;
 salla.infiniteScroll.event.onAppend((doc, url, nodes) => nodes.forEach(node => node.innerText = counter++));
+
 salla.event.on('rating::ready', rating => rating.order = {
   "id"                  : 123456,
   "shipping"            : {
@@ -14,13 +15,47 @@ salla.event.on('rating::ready', rating => rating.order = {
     {
       "feedback": null,
       "product" : {
-        "name"             : "تيشرت",
+        "name"             : "Lorem ipsum, dolor sit amet consectetur",
+        "price"            : {
+          "amount"  : 103.5,
+          "currency": "SAR"
+        },
+        "url"              : "https://my_store.test/تيشرت/p2051852144",
+        "thumbnail"        : "---https://source.unsplash.com/DGH1u80sZik/100x80",
+        "has_special_price": true,
+        "regular_price"    : {
+          "amount"  : 115,
+          "currency": "SAR"
+        },
+      }
+    },
+    {
+      "feedback": null,
+      "product" : {
+        "name"             : "Lorem ipsum, dolor sit amet consectetur",
         "price"            : {
           "amount"  : 103.5,
           "currency": "SAR"
         },
         "url"              : "https://my_store.test/تيشرت/p2051852144",
-        "thumbnail"        : "https://cdn.salla.sa/brmY/qKCbx4BAxd2fZHmoJnbEXmtftvkXs11ynHHgJ49I.jpg",
+        "thumbnail"        : "https://source.unsplash.com/2cFZ_FB08UM/100x80",
+        "has_special_price": true,
+        "regular_price"    : {
+          "amount"  : 115,
+          "currency": "SAR"
+        },
+      }
+    },
+    {
+      "feedback": null,
+      "product" : {
+        "name"             : "Lorem ipsum, dolor sit amet consectetur",
+        "price"            : {
+          "amount"  : 103.5,
+          "currency": "SAR"
+        },
+        "url"              : "https://my_store.test/تيشرت/p2051852144",
+        "thumbnail"        : "https://source.unsplash.com/nwOip8AOZz0/100x80",
         "has_special_price": true,
         "regular_price"    : {
           "amount"  : 115,
@@ -32,7 +67,7 @@ salla.event.on('rating::ready', rating => rating.order = {
   "testimonials_enabled": true,
   "shipping_enabled"    : true,
   "products_enabled"    : true,
-  "thanks_message"      : "شكرا لوقتك<br>ونتمنى لك تسوق ممتع"
+  "thanks_message"      : "Thank you! <br>We wish you a pleasant shopping"
 });
 
 function showOffer() {
@@ -46,7 +81,7 @@ function showOffer() {
         {
           "id"               : 1196968987,
           "is_available"     : true,
-          "name"             : "Lorem ipsum, dolor sit amet consectetur ",
+          "name"             : "Lorem ipsum, dolor sit amet consectetur",
           "price"            : {"amount": 100, "currency": "SAR"},
           "url"              : "#",
           "thumbnail"        : "https://source.unsplash.com/DGH1u80sZik/400x300",

package/example/dist/tailwind.css

@@ -865,6 +865,10 @@ video {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -885,14 +889,14 @@ video {
   gap: 0.75rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-6 {
   gap: 1.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-x-8 {
   -moz-column-gap: 2rem;
        column-gap: 2rem;
@@ -1922,8 +1926,8 @@ video {
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgba(228, 228, 231, var(--tw-border-opacity));
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   transition-property: background-color, border-color, color, fill, stroke;
@@ -3087,22 +3091,24 @@ video {
 }
 
 .s-rating-modal-comment {
+  margin-bottom: 1rem;
   margin-bottom: 0.5rem;
   height: 5rem !important;
-  height: 2.5rem;
   width: 100%;
   border-radius: 0.375rem;
+  border-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgba(238, 238, 238, var(--tw-border-opacity));
+  border-color: rgba(228, 228, 231, var(--tw-border-opacity));
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transition-property: background-color, border-color, color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
-  transition-duration: 300ms;
 }
 
 .s-rating-modal-comment:focus {
   border-color: var(--color-main);
-  --tw-ring-color: transparent;
 }
 
 .dark .s-rating-modal-comment {
@@ -3112,17 +3118,6 @@ video {
   background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
 }
 
-.dark .s-rating-modal-comment:focus {
-  border-color: var(--color-main);
-}
-
-@media (min-width: 640px) {
-  .s-rating-modal-comment {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-}
-
 .s-rating-modal-validation-msg {
   position: absolute;
   bottom: 0px;
@@ -3149,13 +3144,18 @@ video {
   margin-bottom: 0px;
 }
 
-.s-rating-modal-product-img {
+.s-rating-modal-product-img-wrap {
   height: 3.5rem;
   width: 4.5rem;
   overflow: hidden;
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
   background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
+}
+
+.s-rating-modal-product-img {
+  height: 100%;
+  width: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
@@ -3560,8 +3560,8 @@ video {
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgba(228, 228, 231, var(--tw-border-opacity));
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   transition-property: background-color, border-color, color, fill, stroke;

package/example/index.html

@@ -784,47 +784,77 @@
 
       </section>
 
-    </div>
-  </div>
+      <!-- International Telephone Input Component -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">International Telephone Input</h2>
+          <p class="text-sm text-gray-500 mt-2">Using: <a class="text-primary" href="https://github.com/jackocnr/intl-tel-input" target="_blank">International
+            Telephone Input</a></p>
+        </div>
 
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">International
+              Telephone Input</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-tel-input style="width: 360px; max-width: 96%"></salla-tel-input>
+          </div>
+        </div>
 
-  <div class="container py-10 grid-cols-2 grid gap-4">
-    <div class="p-3 rounded-md bg-white shadow-sm">
-      <h1 class="text-primary border-b border-dashed mb-4">Product Availability</h1>
-      <p class="my-4">Description</p>
-      <salla-product-availability channels="sms,email"></salla-product-availability>
-    </div>
+      </section>
 
-    <div class="p-3 rounded-md bg-white shadow-sm">
-      <h1 class="text-primary border-b border-dashed mb-4">Mobile Input</h1>
-      <p class="my-4">
-        Using: <a class="text-primary" href="https://github.com/jackocnr/intl-tel-input" target="_blank">International
-          Telephone Input</a>
-      </p>
-      <salla-tel-input></salla-tel-input>
-    </div>
+      <!-- Rating Component -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Rating</h2>
+          <p class="text-sm text-gray-500 mt-2">Discription</p>
+        </div>
 
-    <div class="p-3 rounded-md bg-white shadow-sm">
-      <h1 class="text-primary border-b border-dashed mb-4">Rating</h1>
-      <p class="my-4">Description</p>
-      <salla-button wide btn-style="outline-primary" data-on-click="rating::show">Rating</salla-button>
-      <salla-rating></salla-rating>
-    </div>
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Rating</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center gap-2">
+            <salla-button data-on-click="rating::show">Rating Modal</salla-button>
+            <salla-rating-modal></salla-rating-modal>
+          </div>
+        </div>
+
+      </section>
+
+      <!-- Infinite Scroll Component -->
+      <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
+        style="scroll-margin-top:6.25rem">
+        <div class="pb-6">
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Infinite Scroll</h2>
+          <p class="text-sm text-gray-500 mt-2">
+            Using: <a class="text-primary" href="https://infinite-scroll.com/" target="_blank">Infinite Scroll</a>
+            <br />
+            You can pass <code>autoload</code> attribute for autoload result when scrolling.<br />
+            <code>&#x3C;salla-infinite-scroll next-page=&#x22;***&#x22;
+            autoload&#x3E;&#x3C;/salla-infinite-scroll&#x3E;</code>
+          </p>
+        </div>
+
+        <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
+          <div class="col-span-3 xl:col-span-1">
+            <h3 class="text-gray-900 font-semibold">Infinite Scroll</h3>
+          </div>
+          <div class="col-span-3 flex flex-wrap items-center justify-center gap-2">
+            <salla-infinite-scroll class="w-full grid grid-cols-5 grid-flow-row gap-6" next-page="infinit-scroll.html?page=2" item=".i-item">
+            </salla-infinite-scroll>
+          </div>
+        </div>
+
+      </section>
 
-    <div class="p-3 rounded-md bg-white shadow-sm col-span-2">
-      <h1 class="text-primary border-b border-dashed mb-4">Infinite Scroll</h1>
-      <p class="my-4">
-        Using: <a class="text-primary" href="https://infinite-scroll.com/" target="_blank">Infinite Scroll</a>
-        <br />
-        You can pass <code>autoload</code> attribute for autoload result when scrolling.<br />
-        <code>&#x3C;salla-infinite-scroll next-page=&#x22;***&#x22;
-        autoload&#x3E;&#x3C;/salla-infinite-scroll&#x3E;</code>
-      </p>
-      <salla-infinite-scroll class="grid grid-cols-4 grid-flow-row gap-6 " next-page="infinit-scroll.html?page=2"
-        item=".i-item">
-      </salla-infinite-scroll>
     </div>
   </div>
+
+
   <script src="dist/demo.js"></script>
 </body>
 

package/example/tailwind.config.js

@@ -50,6 +50,9 @@ module.exports = {
       },
     },
   },
+  corePlugins: {
+    outline: false,
+  },
   plugins: [
     //require('@salla.sa/twilight-tailwind-theme'),
     require('../src/plugins/tailwind-theme'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.0.61",
+  "version": "1.0.62",
   "license": "MIT",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {