@lancom/shared 0.0.134 → 0.0.135

package/components/common/checkbox.vue

@@ -13,6 +13,7 @@
       @change="$emit('change', model)" />
     <label
       class="Checkbox__label"
+      :class="{ dark }"
       :for="id"
       @click.stop>
       <i class="icon-ok Checkbox__icon"></i>
@@ -35,6 +36,9 @@ export default {
     disabled: {
       default: false
     },
+    dark: {
+      default: false
+    },
     uncheckedValue: {
       default: false
     },
@@ -128,6 +132,12 @@ html[dir=rtl] {
         transform: translateY(-50%);
       }
 
+      &.dark {
+        &:before {
+          border: 1px solid $grey_1;
+        }
+      }
+
       &:after {
         content: '';
         position: absolute;

package/components/common/pricing_discounts_table/pricing-discounts-table.vue

@@ -16,7 +16,12 @@
           active: amount >= range.min && ((range.max && amount <= range.max) || !range.max)
         }">
         <td>{{ (range.max >= 9999 || !range.max) ? `${range.min}+` : `${range.min}-${range.max}` }}</td>
-        <td>{{ range.price | priceWithTax(pricingSettings) }}</td>
+        <td v-if="withGst">
+          {{ range.price | priceWithTax(pricingSettings) }}
+        </td>
+        <td v-else>
+          {{ range.price | price }}
+        </td>
       </tr>
     </tbody>
   </table>
@@ -24,12 +29,13 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { priceWithTax, price } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'PricingDiscountsTable',
   filters: {
-    priceWithTax
+    priceWithTax,
+    price
   },
   props: {
     prices: {
@@ -47,6 +53,10 @@ export default {
     striped: {
       type: Boolean,
       default: false
+    },
+    withGst: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/common/tabs.vue

@@ -5,7 +5,10 @@
         v-for="tab in tabs"
         :key="tab.value"
         class="tab ripple"
-        :class="{ active: currentTab === tab.value }"
+        :class="{
+          active: currentTab === tab.value,
+          shadow: btnsShadow
+        }"
         @click="select(tab)">
         <div class="lc_medium18 tab-label">
           <i
@@ -53,6 +56,10 @@ export default {
       type: Boolean,
       default: false
     },
+    btnsShadow: {
+      type: Boolean,
+      default: false
+    },
     fullWidth: {
       type: Boolean,
       default: true
@@ -132,7 +139,6 @@ export default {
   &s {
     display: flex;
     border-radius: 4px 4px 0 0;
-    overflow: hidden;
     &--secondary,
     &--primary,
     &--large {
@@ -161,12 +167,19 @@ export default {
     background-color: #FFFFFF;
     color: $grey_1;
   }
+  &:hover {
+    background-color: #FFFFFF;
+    color: $grey_1;
+  }
   &s--large &.active,
   &s--primary &.active,
   &s--secondary &.active {
     background-color: $grey_4;
     color: $black;
   }
+  &.shadow {
+    box-shadow: 1px 1px 2px rgb(214, 214, 214);
+  }
 }
 .fullWidth .tab {
   flex-grow: 1;

package/components/product/gallery/gallery.vue

@@ -171,6 +171,12 @@ export default {
       this.skipUpdateGallery = false;
     }
   },
+  mounted() {
+    const index = this.filteredImages.findIndex(i => i.color === this.editableColor?._id);
+    if (index > -1) {
+      this.goToSlide(index, true);
+    }
+  },
   methods: {
     ...mapActions('product', ['selectColor']),
     staticLink,

package/components/product/product_info_tabs/product-info-tabs.vue

@@ -3,6 +3,7 @@
     <tabs
       :tabs="tabs"
       :selected="selectedTab"
+      :btns-shadow="true"
       @select="selectedTab = $event">
       <template #default="{ currentTab }">
         <component

package/components/product/product_prints_price_info/product-prints-price-info.scss

@@ -32,6 +32,9 @@
 }
 
 .ProductPrintsPriceInfo {
+  &__wrapper {
+    position: relative;
+  }
   &__print-pricing {
     margin-top: 30px;
   }
@@ -60,4 +63,11 @@
     justify-content: flex-end;
     padding: 0 0 10px 0;
   }
+  &__content {
+    opacity: 1;
+    transition: opacity 500ms;
+    &--hidden {
+      opacity: 0;
+    }
+  }
 }

package/components/product/product_prints_price_info/product-prints-price-info.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="ProductPrintsPriceInfo__wrapper">
     <div class="ProductPrintsPriceInfo__toggle-gst">
-      <checkbox v-model="inclGST">
+      <checkbox
+        v-model="inclGST"
+        :dark="true"
+        @change="onChangeInclGST">
         <div class="ml-5">Inc. GST</div>
       </checkbox>
     </div>
@@ -9,22 +12,29 @@
       v-if="avilableTabs.length > 0"
       :tabs="avilableTabs"
       :selected="selectedTab"
+      :btns-shadow="true"
       type="secondary"
       @select="selectedTab = $event">
       <template #default="{ currentTab }">
-        <product-screen-print-price-info
-          v-if="currentTab === 'screen print'"
-          :product="product"
-          :with-gst="inclGST" />
-        <product-print-price-info
-          v-else-if="currentTab"
-          :product="product"
-          :type="currentTab"
-          :with-gst="inclGST" />
         <div
-          v-if="currentPrintTypeMessage"
-          class="ProductPrintsPriceInfo__print-description"
-          v-html="currentPrintTypeMessage"></div>
+          class="ProductPrintsPriceInfo__content"
+          :class="{
+            'ProductPrintsPriceInfo__content--hidden': inclGSTSpinner
+          }">
+          <product-screen-print-price-info
+            v-if="currentTab === 'screen print'"
+            :product="product"
+            :with-gst="inclGSTFinal" />
+          <product-print-price-info
+            v-else-if="currentTab"
+            :product="product"
+            :type="currentTab"
+            :with-gst="inclGSTFinal" />
+          <div
+            v-if="currentPrintTypeMessage"
+            class="ProductPrintsPriceInfo__print-description"
+            v-html="currentPrintTypeMessage"></div>
+        </div>
       </template>
     </tabs>
     <div
@@ -59,6 +69,9 @@ export default {
   data() {
     return {
       inclGST: false,
+      inclGSTFinal: false,
+      inclGSTSpinner: false,
+      inclGSTSpinnerTimer: null,
       orderPrintTypes: PRINT_TYPES_LIST,
       tabs: [{
         label: 'Black',
@@ -107,8 +120,19 @@ export default {
       group: 'garment-print-price-details'
     });
   },
+  destroyed() {
+    clearTimeout(this.inclGSTSpinnerTimer);
+  },
   methods: {
-    ...mapActions(['loadHelpMessages'])
+    ...mapActions(['loadHelpMessages']),
+    onChangeInclGST() {
+      clearTimeout(this.inclGSTSpinnerTimer);
+      this.inclGSTSpinner = true;
+      this.inclGSTSpinnerTimer = setTimeout(() => {
+        this.inclGSTSpinner = false;
+        this.inclGSTFinal = this.inclGST;
+      }, 500);
+    }
   }
 };
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.134",
+  "version": "0.0.135",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {