@lancom/shared 0.0.430 → 0.0.432

package/components/product/product_stock_status/product-stock-status.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="ProductStockStatus__wrapper"
+    :class="`ProductStockStatus__wrapper--${stockStatusColor}`">
+    <i class="icon-ok-1"></i>
+    <span>
+      {{ capitalizedStockStatus }}
+    </span>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { PRODUCT_STOCK_STATUS_COLORS } from '@lancom/shared/assets/js/constants/product';
+
+export default {
+  name: 'ProductStockStatus',
+  computed: {
+    ...mapGetters('product', ['stockStatus']),
+    capitalizedStockStatus() {
+      if (!this.stockStatus) {
+        return '';
+      }
+      return this.stockStatus.charAt(0).toUpperCase() + this.stockStatus.slice(1);
+    },
+    stockStatusColor() {
+      return PRODUCT_STOCK_STATUS_COLORS[this.stockStatus] || 'green';
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-stock-status';
+</style>

package/components/product/related_products/related-products.vue

@@ -36,15 +36,15 @@ export default {
       products: []
     };
   },
+  async fetch() {
+    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, { needShuffle: true });
+    this.products = products.splice(0, 6);
+  },
   computed: {
     ...mapGetters(['shop']),
     hasProducts() {
       return this.products.length > 0;
     }
-  },
-  async fetch() {
-    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, { needShuffle: true });
-    this.products = products.splice(0, 6);
   }
 };
 </script>

package/components/products/products_attributes/products_attribute/products-attribute.vue

@@ -1,33 +1,34 @@
 <template>
   <div class="ProductsAttribute__wrapper">
-    <div class="ProductsAttribute__title">
-      {{ attribute.name }}
-    </div>
-    <div class="ProductsAttribute__options">
-      <div
-        v-for="option in options"
-        :key="option._id"
-        class="ProductsAttribute__option"
-        :class="{
-          'ProductsAttribute__option--active': selectedOptions.includes(option.alias)
-        }">
-        <products-link :attributes="{ [attribute.alias]: option.alias }">
-          <checked-icon
-            v-if="hasSelectedIcon"
-            :checked="selectedOptions.includes(option.alias)" />
-          {{ option.name }}
-        </products-link>
+    <toggle-content :label="attribute.name">
+      <div class="ProductsAttribute__options">
+        <div
+          v-for="option in options"
+          :key="option._id"
+          class="ProductsAttribute__option"
+          :class="{
+            'ProductsAttribute__option--active': selectedOptions.includes(option.alias)
+          }">
+          <products-link :attributes="{ [attribute.alias]: option.alias }">
+            <checked-icon
+              v-if="hasSelectedIcon"
+              :checked="selectedOptions.includes(option.alias)" />
+            <span>{{ option.name }}</span>
+          </products-link>
+        </div>
       </div>
-    </div>
+    </toggle-content>
   </div>
 </template>
 
 <script>
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
 import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
 import CheckedIcon from '@lancom/shared/components/common/checked-icon';
 
 export default {
   components: {
+    ToggleContent,
     ProductsLink,
     CheckedIcon
   },

package/components/products/products_brands/products-brands.vue

@@ -17,7 +17,9 @@
             v-if="hasSelectedIcon"
             :checked="brand.alias === currentBrand"
             :circle="selectedIconCircle" />
-          {{ brand.name }}
+          <span>
+            {{ brand.name }}
+          </span>
         </products-link>
       </div>
     </toggle-content>

package/components/products/products_filters/products-filters.vue

@@ -11,7 +11,9 @@
         class="labelless">
       </multiselect>
     </div>
-    <div class="ProductsFilters__search hidden-sm-and-down">
+    <div
+      v-if="hasSearch"
+      class="ProductsFilters__search hidden-sm-and-down">
       <input
         v-model="search"
         name="search"
@@ -42,6 +44,12 @@ export default {
   components: {
     Multiselect
   },
+  props: {
+    hasSearch: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     const sortByOptions = [{
       value: 'price-low-high',

package/components/products/products_tags/products-tags.vue

@@ -2,35 +2,36 @@
   <div
     v-if="tags.length"
     class="ProductsTags__wrapper">
-    <div class="ProductsTags__title">
-      Tags
-    </div>
-    <div class="ProductsTags__options">
-      <div
-        v-for="tag in tags"
-        :key="tag.alias"
-        class="ProductsTags__item"
-        :class="{
-          'ProductsTags__item--active': selectedTags.includes(tag.alias)
-        }">
-        <products-link :tags="tag.alias">
-          {{ tag.name }}
-          <i
-            v-if="hasRemoveIcon && selectedTags.includes(tag.alias)"
-            class="icon-cancel"></i>
-        </products-link>
+    <toggle-content label="Tags">
+      <div class="ProductsTags__options">
+        <div
+          v-for="tag in tags"
+          :key="tag.alias"
+          class="ProductsTags__item"
+          :class="{
+            'ProductsTags__item--active': selectedTags.includes(tag.alias)
+          }">
+          <products-link :tags="tag.alias">
+            {{ tag.name }}
+            <i
+              v-if="hasRemoveIcon && selectedTags.includes(tag.alias)"
+              class="icon-cancel"></i>
+          </products-link>
+        </div>
       </div>
-    </div>
+    </toggle-content>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
 import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
 
 export default {
   name: 'ProductsTags',
   components: {
+    ToggleContent,
     ProductsLink
   },
   props: {

package/components/products/products_types/products-types.scss

@@ -34,4 +34,4 @@
       height: 20px;
     }
   }
-}
+}