@lancom/shared 0.0.460 → 0.0.461

package/assets/scss/variables/_theme.scss

@@ -1,5 +1,17 @@
 // theme variables
 
+:root {
+  --accu-primary: #3B4BA4;      /* Blue accent color */
+  --accu-bg: #F5F0EB;           /* Warm cream background */
+  --accu-card: #FFFFFF;         /* Card background */
+  --accu-text-dark: #1E1E1E;    /* Primary text */
+  --accu-text-muted: #666666;   /* Secondary text */
+  --accu-star: #FF9800;         /* Star rating color */
+  --accu-green: #22C55E;        /* Success/shipping color */
+  --accu-border: #E5E5E5;       /* Border color */
+  --accu-hover: #f8f8f8;        /* Hover state */
+}
+
 // Layouts
 $navbar_height: 88px !default;
 $notification_bar_height: 40px !default;

package/components/common/toggle-content.vue

@@ -3,10 +3,11 @@
     <div
       class="ToggleContent__header"
       @click="toggle()">
-      <div class="ToggleContent__label">
+      <div class="ToggleContent__label accu-filter-header">
         {{ label }}
       </div>
       <div
+        v-if="toggleable"
         class="ToggleContent__arrow"
         :class="{ opened }">
         <i class="icon-arrow-left"></i>
@@ -27,6 +28,10 @@ export default {
     label: {
       type: String,
       required: true
+    },
+    toggleable: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -36,7 +41,9 @@ export default {
   },
   methods: {
     toggle() {
-      this.opened = !this.opened;
+      if (this.toggleable) {
+        this.opened = !this.opened;
+      }
     }
   }
 };

package/components/products/children_categories/children-categories.vue

@@ -8,7 +8,7 @@
         'CategoryCard--selected': category && category._id === cat._id
       }">
       <a
-        :href="generateProductsLink($route, { category: cat }, true)"
+        :href="generateProductsLink($route, { category: (category && category._id === cat._id) ? (cat.parent || cat) : cat }, true)"
         class="CategoryCard__link">
         <span
           v-if="visibleImages"

package/components/products/products_aside/products-aside.scss

@@ -43,4 +43,4 @@
   100% {
     background: #d9d9d9;
   }
-}
+}

package/components/products/products_aside/products-aside.vue

@@ -10,45 +10,64 @@
       <span class="ProductsAside__info ProductsAside__info--small"></span>
       <span class="ProductsAside__info ProductsAside__info--small2"></span>
     </div>
-    <div v-else>
+    <div
+      v-else
+      class="ProductsAside__list">
+      <div
+        v-if="hasSelectedFilters"
+        class="ProductsAside__item">
+        <products-selected-filters />
+      </div>
       <div
         v-if="hasProductTypes"
         class="ProductsAside__item">
         <products-types
           :has-selected-icon="hasSelectedIcon"
-          :selected-icon-circle="selectedIconCircle" />
+          :selected-icon-circle="selectedIconCircle"
+          :toggleable="toggleable" />
       </div>
       <div class="ProductsAside__item">
         <products-brands
           :has-selected-icon="hasSelectedIcon"
-          :selected-icon-circle="selectedIconCircle" />
+          :selected-icon-circle="selectedIconCircle"
+          :toggleable="toggleable" />
       </div>
       <div
         v-if="hasProductionTime"
         class="ProductsAside__item">
         <products-production-time
           :has-selected-icon="hasSelectedIcon"
-          :selected-icon-circle="selectedIconCircle" />
+          :selected-icon-circle="selectedIconCircle"
+          :toggleable="toggleable" />
       </div>
       <div
         v-if="hasMinimumQty"
         class="ProductsAside__item">
         <products-minimum-qty
           :has-selected-icon="hasSelectedIcon"
-          :selected-icon-circle="selectedIconCircle" />
-      </div>
-      <div class="ProductsAside__item">
-        <products-color-groups />
+          :selected-icon-circle="selectedIconCircle"
+          :toggleable="toggleable" />
       </div>
       <div class="ProductsAside__item">
-        <products-colors />
+        <products-color-groups
+          :toggleable="toggleable"
+          :display-mode="colorDisplayMode" />
+        <products-colors
+          :toggleable="toggleable"
+          :display-mode="colorDisplayMode" />
       </div>
       <div class="ProductsAside__item">
         <products-attributes
-          :has-selected-icon="hasSelectedIcon" />
+          :has-selected-icon="hasSelectedIcon"
+          :toggleable="toggleable" />
+      </div>
+      <div
+        v-if="hasTags"
+        class="ProductsAside__item">
         <products-tags
           :has-selected-icon="haAttributesSelectedIcon"
-          :has-remove-icon="hasRemoveIcon" />
+          :has-remove-icon="hasRemoveIcon"
+          :toggleable="toggleable" />
       </div>
     </div>
   </div>
@@ -64,6 +83,7 @@ import ProductsColors from '@lancom/shared/components/products/products_colors/p
 import ProductsColorGroups from '@lancom/shared/components/products/products_color_groups/products-color-groups';
 import ProductsProductionTime from '@lancom/shared/components/products/products_production_time/products-production-time';
 import ProductsMinimumQty from '@lancom/shared/components/products/products_minimum_qty/products-minimum-qty';
+import ProductsSelectedFilters from '@lancom/shared/components/products/products_selected_filters/products-selected-filters';
 import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 
 export default {
@@ -76,7 +96,8 @@ export default {
     ProductsColors,
     ProductsColorGroups,
     ProductsProductionTime,
-    ProductsMinimumQty
+    ProductsMinimumQty,
+    ProductsSelectedFilters
   },
   props: {
     hasSelectedIcon: {
@@ -110,6 +131,23 @@ export default {
     hasMinimumQty: {
       type: Boolean,
       default: true
+    },
+    hasTags: {
+      type: Boolean,
+      default: true
+    },
+    toggleable: {
+      type: Boolean,
+      default: true
+    },
+    colorDisplayMode: {
+      type: String,
+      default: 'grid', // 'grid' or 'list'
+      validator: value => ['grid', 'list'].includes(value)
+    },
+    hasSelectedFilters: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

package/components/products/products_attributes/products-attributes.vue

@@ -8,7 +8,8 @@
       class="ProductsAttributes__item">
       <products-attribute
         :attribute="attribute"
-        :has-selected-icon="hasSelectedIcon" />
+        :has-selected-icon="hasSelectedIcon"
+        :toggleable="toggleable" />
     </div>
   </div>
 </template>
@@ -27,6 +28,10 @@ export default {
     hasSelectedIcon: {
       type: Boolean,
       default: false
+    },
+    toggleable: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="ProductsAttribute__wrapper">
-    <toggle-content :label="attribute.name">
+    <toggle-content :label="attribute.name" :toggleable="toggleable">
       <div class="ProductsAttribute__options">
         <div
           v-for="option in options"
@@ -13,7 +13,7 @@
             <checked-icon
               v-if="hasSelectedIcon"
               :checked="selectedOptions.includes(option.alias)" />
-            <span>{{ option.name }}</span>
+            <span class="accu-filter-item">{{ option.name }}</span>
           </products-link>
         </div>
       </div>
@@ -37,6 +37,10 @@ export default {
       type: Boolean,
       default: false
     },
+    toggleable: {
+      type: Boolean,
+      default: true
+    },
     attribute: {
       type: Object
     }

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

@@ -2,7 +2,7 @@
   <div
     v-if="list.length"
     class="ProductsBrands__wrapper">
-    <toggle-content label="Brands">
+    <toggle-content label="Brands" :toggleable="toggleable">
       <div
         v-for="brand in list"
         :key="brand.alias"
@@ -17,7 +17,7 @@
             v-if="hasSelectedIcon"
             :checked="brand.alias === currentBrand"
             :circle="selectedIconCircle" />
-          <span>
+          <span class="accu-filter-item">
             {{ brand.name }}
           </span>
         </products-link>
@@ -47,6 +47,10 @@ export default {
     selectedIconCircle: {
       type: Boolean,
       default: false
+    },
+    toggleable: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/products/products_color_groups/products-color-groups.scss

@@ -66,4 +66,33 @@
     cursor: pointer;
     text-align: right;
   }
+  &__list {
+    margin-top: 20px;
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 0;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      &--selected {
+        .ProductsColorGroups__list-label {
+          font-weight: 600;
+          color: $grey_1;
+        }
+      }
+    }
+    &-checkbox {
+      flex-shrink: 0;
+      margin-right: 12px;
+    }
+    &-thumb {
+      flex-shrink: 0;
+      margin-right: 12px;
+    }
+    &-label {
+      flex-grow: 1;
+      font-size: 14px;
+      color: $black;
+    }
+  }
 }

package/components/products/products_color_groups/products-color-groups.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="ProductsColorGroups__wrapper">
-    <toggle-content label="Colour Groups">
-      <div class="ProductsColorGroups__selected">
+    <toggle-content label="Colour Groups" :toggleable="toggleable">
+      <div
+        v-if="displayMode === 'grid'"
+        class="ProductsColorGroups__selected">
         <div
           v-for="colorGroup in selectedColorGroups"
           :key="colorGroup._id"
@@ -19,7 +21,9 @@
           </products-link>
         </div>
       </div>
-      <div class="ProductsColorGroups__items">
+      <div
+        v-if="displayMode === 'grid'"
+        class="ProductsColorGroups__items">
         <products-link
           v-for="colorGroup in visibleColorGroups"
           :key="colorGroup._id"
@@ -37,6 +41,33 @@
           </div>
         </products-link>
       </div>
+      <div
+        v-else
+        class="ProductsColorGroups__list">
+        <products-link
+          v-for="colorGroup in visibleColorGroups"
+          :key="colorGroup._id"
+          :color-group="colorGroup.alias">
+          <div
+            class="ProductsColorGroups__list-item"
+            :class="{
+              'ProductsColorGroups__list-item--selected': isSelectedColorGroup(colorGroup)
+            }">
+            <div class="ProductsColorGroups__list-checkbox">
+              <checked-icon :checked="isSelectedColorGroup(colorGroup)" />
+            </div>
+            <div class="ProductsColorGroups__list-thumb ProductsColorGroups__color-group">
+              <product-color-image
+                v-if="canLoadImages"
+                :color="colorGroup"
+                class="ProductsColorGroups__color-group-image" />
+            </div>
+            <div class="ProductsColorGroups__list-label  accu-filter-item">
+              {{ colorGroup.name }}
+            </div>
+          </div>
+        </products-link>
+      </div>
       <div
         v-if="shortListColorGroupsLimit < colorGroupsCount"
         @click="toggleDisplayAllColorGroups()"
@@ -52,13 +83,26 @@ import { mapGetters } from 'vuex';
 import ToggleContent from '@lancom/shared/components/common/toggle-content';
 import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
 import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
 
 export default {
   name: 'ProductsColorGroups',
   components: {
     ProductColorImage,
     ProductsLink,
-    ToggleContent
+    ToggleContent,
+    CheckedIcon
+  },
+  props: {
+    toggleable: {
+      type: Boolean,
+      default: true
+    },
+    displayMode: {
+      type: String,
+      default: 'grid', // 'grid' or 'list'
+      validator: value => ['grid', 'list'].includes(value)
+    }
   },
   data() {
     return {

package/components/products/products_colors/products-colors.scss

@@ -66,4 +66,33 @@
     cursor: pointer;
     text-align: right;
   }
-}
+  &__list {
+    margin-top: 20px;
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 0;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      &--selected {
+        .ProductsColorGroups__list-label {
+          font-weight: 600;
+          color: $grey_1;
+        }
+      }
+    }
+    &-checkbox {
+      flex-shrink: 0;
+      margin-right: 12px;
+    }
+    &-thumb {
+      flex-shrink: 0;
+      margin-right: 12px;
+    }
+    &-label {
+      flex-grow: 1;
+      font-size: 14px;
+      color: $black;
+    }
+  }
+}

package/components/products/products_colors/products-colors.vue

@@ -2,8 +2,10 @@
   <div
     v-if="visibleColors.length > 0"
     class="ProductsColors__wrapper">
-    <toggle-content label="Colours">
-      <div class="ProductsColors__selected">
+    <toggle-content label="Colours" :toggleable="toggleable">
+      <div
+        v-if="displayMode === 'grid'"
+        class="ProductsColors__selected">
         <div
           v-for="color in selectedColors"
           :key="color._id"
@@ -21,7 +23,9 @@
           </products-link>
         </div>
       </div>
-      <div class="ProductsColors__items">
+      <div
+        v-if="displayMode === 'grid'"
+        class="ProductsColors__items">
         <products-link
           v-for="color in visibleColors"
           :key="color._id"
@@ -39,6 +43,33 @@
           </div>
         </products-link>
       </div>
+      <div
+        v-else
+        class="ProductsColors__list">
+        <products-link
+          v-for="color in visibleColors"
+          :key="color._id"
+          :color="color.alias">
+          <div
+            class="ProductsColors__list-item"
+            :class="{
+              'ProductsColors__list-item--selected': isSelectedColor(color)
+            }">
+            <div class="ProductsColors__list-checkbox">
+              <checked-icon :checked="isSelectedColor(color)" />
+            </div>
+            <div class="ProductsColors__list-thumb ProductsColors__color">
+              <product-color-image
+                v-if="canLoadImages"
+                :color="color"
+                class="ProductsColors__color-image" />
+            </div>
+            <div class="ProductsColors__list-label accu-filter-item">
+              {{ color.name }}
+            </div>
+          </div>
+        </products-link>
+      </div>
       <div
         v-if="shortListColorsLimit < colorsCount"
         @click="toggleDisplayAllColors()"
@@ -54,13 +85,26 @@ import { mapGetters } from 'vuex';
 import ToggleContent from '@lancom/shared/components/common/toggle-content';
 import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
 import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
 
 export default {
   name: 'ProductsColors',
   components: {
     ProductColorImage,
     ProductsLink,
-    ToggleContent
+    ToggleContent,
+    CheckedIcon
+  },
+  props: {
+    toggleable: {
+      type: Boolean,
+      default: true
+    },
+    displayMode: {
+      type: String,
+      default: 'grid', // 'grid' or 'list'
+      validator: value => ['grid', 'list'].includes(value)
+    }
   },
   data() {
     return {

package/components/products/products_minimum_qty/products-minimum-qty.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ProductsMinimumQty__wrapper">
-    <toggle-content label="Minimum Qty">
+    <toggle-content label="Minimum Qty" :toggleable="toggleable">
       <div
         v-for="minimumQtyRange in minimumQtyRanges"
         :key="minimumQtyRange.alias"
@@ -44,6 +44,10 @@ export default {
     selectedIconCircle: {
       type: Boolean,
       default: false
+    },
+    toggleable: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/components/products/products_production_time/products-production-time.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ProductsProductionTime__wrapper">
-    <toggle-content label="Production Time">
+    <toggle-content label="Production Time" :toggleable="toggleable">
       <div
         v-for="produnctionRange in produnctionTimesRanges"
         :key="produnctionRange.alias"
@@ -44,6 +44,10 @@ export default {
     selectedIconCircle: {
       type: Boolean,
       default: false
+    },
+    toggleable: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/components/products/products_selected_filters/products-selected-filters.scss

@@ -0,0 +1,59 @@
+@import "@/assets/scss/variables";
+
+.ProductsSelectedFilters {
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+  &__title {
+    font-weight: 600;
+    font-size: 0.875rem;
+    color: var(--accu-text-dark);
+    margin-right: 0.5rem;
+  }
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  }
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: #EEF0FB;
+    color: var(--accu-primary);
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    &-label {
+      font-weight: 600;
+      margin-right: 4px;
+    }
+    &-value {
+      margin-right: 8px;
+    }
+    &-remove {
+      cursor: pointer;
+      transition: color 0.2s;
+      &:hover {
+        color: darken($grey_1, 15%);
+      }
+    }
+    a {
+      display: flex;
+      align-items: center;
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+  &__clear-all {
+    color: var(--accu-primary);
+    font-size: 0.875rem;
+    text-decoration: underline;
+    cursor: pointer;
+    margin-left: auto;
+  }
+}

package/components/products/products_selected_filters/products-selected-filters.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    v-if="hasSelectedFilters"
+    class="ProductsSelectedFilters__wrapper">
+    <div class="ProductsSelectedFilters__list">
+      <div class="ProductsSelectedFilters__title">
+        Selected Filters:
+      </div>
+      <div
+        v-if="selectedBrand"
+        class="ProductsSelectedFilters__item">
+        <span class="ProductsSelectedFilters__item-label">Brands:</span>
+        <span class="ProductsSelectedFilters__item-value">{{ selectedBrand.name }}</span>
+        <products-link :brand="null">
+          <i class="icon-cancel ProductsSelectedFilters__item-remove"></i>
+        </products-link>
+      </div>
+      <div
+        v-if="selectedType"
+        class="ProductsSelectedFilters__item">
+        <span class="ProductsSelectedFilters__item-label">Product Type:</span>
+        <span class="ProductsSelectedFilters__item-value">{{ selectedType.name }}</span>
+        <products-link :type="null">
+          <i class="icon-cancel ProductsSelectedFilters__item-remove"></i>
+        </products-link>
+      </div>
+      <div
+        v-for="colorGroup in selectedColorGroups"
+        :key="`colorGroup-${colorGroup._id}`"
+        class="ProductsSelectedFilters__item">
+        <span class="ProductsSelectedFilters__item-label">Colour Groups:</span>
+        <span class="ProductsSelectedFilters__item-value">{{ colorGroup.name }}</span>
+        <products-link :color-group="colorGroup.alias">
+          <i class="icon-cancel ProductsSelectedFilters__item-remove"></i>
+        </products-link>
+      </div>
+      <div
+        v-for="color in selectedColors"
+        :key="`color-${color._id}`"
+        class="ProductsSelectedFilters__item">
+        <span class="ProductsSelectedFilters__item-label">Colours:</span>
+        <span class="ProductsSelectedFilters__item-value">{{ color.name }}</span>
+        <products-link :color="color.alias">
+          <i class="icon-cancel ProductsSelectedFilters__item-remove"></i>
+        </products-link>
+      </div>
+      <template v-for="attribute in attributes">
+        <div
+          v-for="option in getSelectedAttributeOptions(attribute)"
+          :key="`attr-${attribute._id}-${option._id}`"
+          class="ProductsSelectedFilters__item">
+          <span class="ProductsSelectedFilters__item-label">{{ attribute.name }}:</span>
+          <span class="ProductsSelectedFilters__item-value">{{ option.name }}</span>
+          <products-link :attributes="{ [attribute.alias]: option.alias }">
+            <i class="icon-cancel ProductsSelectedFilters__item-remove"></i>
+          </products-link>
+        </div>
+      </template>
+      <div
+        v-for="tag in selectedTagsList"
+        :key="`tag-${tag.alias}`"
+        class="ProductsSelectedFilters__item">
+        <span class="ProductsSelectedFilters__item-label">Tags:</span>
+        <span class="ProductsSelectedFilters__item-value">{{ tag.name }}</span>
+        <products-link :tags="tag.alias">
+          <i class="icon-cancel ProductsSelectedFilters__item-remove"></i>
+        </products-link>
+      </div>
+    </div>
+    <div
+      v-if="hasSelectedFilters"
+      class="ProductsSelectedFilters__clear-all"
+      @click="clearAllFilters">
+      Clear All
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+import selectedFiltersMixin from '@lancom/shared/mixins/products/selected-filters';
+
+export default {
+  name: 'ProductsSelectedFilters',
+  components: {
+    ProductsLink
+  },
+  mixins: [selectedFiltersMixin],
+  methods: {
+    clearAllFilters() {
+      // Navigate to the base products route without any filters
+      const baseRoute = {
+        name: this.$route.name,
+        params: {
+          ...this.$route.params,
+          brand: undefined,
+          type: undefined
+        },
+        query: {}
+      };
+      this.$router.push(baseRoute);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-selected-filters';
+</style>

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

@@ -2,7 +2,7 @@
   <div
     v-if="tags.length"
     class="ProductsTags__wrapper">
-    <toggle-content label="Tags">
+    <toggle-content label="Tags" :toggleable="toggleable">
       <div class="ProductsTags__options">
         <div
           v-for="tag in tags"
@@ -42,6 +42,10 @@ export default {
     hasRemoveIcon: {
       type: Boolean,
       default: false
+    },
+    toggleable: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="ProductsTypes__wrapper">
-    <toggle-content label="Product type">
+    <toggle-content label="Product type" :toggleable="toggleable">
       <div
         v-for="type in types"
         :key="type.alias"
@@ -56,6 +56,10 @@ export default {
     hasThumbs: {
       type: Boolean,
       default: true
+    },
+    toggleable: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/static_page/static-page.scss

@@ -7,7 +7,13 @@
   &__content {
     overflow: hidden;
     @import "@lancom/shared/assets/scss/normalize";
+    p {
+      &:last-child {
+        margin: 0;
+      }
+    }
   }
+
 }
 
 .post-full-image {

package/mixins/product-preview.js

@@ -61,6 +61,9 @@ const productPreview = {
     productCountries() {
       return this.countries.filter(c => this.product.countries?.includes(c._id));
     },
+    aggregateRating() {
+      return this.product?.aggregateRating || { value: 0, count: 0 };
+    },
     noMinimum() {
       return !(this.product.minimumPrintOrderQuantity > 1) && !(this.product.minimumOrderQuantity > 1);
     },

package/mixins/products/selected-filters.js

@@ -0,0 +1,49 @@
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters('products', ['brands', 'types', 'colorGroups', 'colors', 'attributes', 'tags']),
+
+    selectedBrand() {
+      const brandAlias = this.$route.params.brand || this.$route.query.brand;
+      return brandAlias ? this.brands.find(b => b.alias === brandAlias) : null;
+    },
+
+    selectedType() {
+      const typeAlias = this.$route.params.type || this.$route.query.type;
+      return typeAlias ? this.types.find(t => t.alias === typeAlias) : null;
+    },
+
+    selectedColorGroups() {
+      const colorGroupsAliases = (this.$route.query.colorGroups || '').split(',').filter(Boolean);
+      return this.colorGroups.filter(cg => colorGroupsAliases.includes(cg.alias));
+    },
+
+    selectedColors() {
+      const colorsAliases = (this.$route.query.colors || '').split(',').filter(Boolean);
+      return this.colors.filter(c => colorsAliases.includes(c.alias));
+    },
+
+    selectedTagsList() {
+      const tagsAliases = (this.$route.query.tags || '').split(',').filter(Boolean);
+      return this.tags.filter(t => tagsAliases.includes(t.alias));
+    },
+
+    hasSelectedFilters() {
+      return this.selectedBrand ||
+             this.selectedType ||
+             this.selectedColorGroups.length > 0 ||
+             this.selectedColors.length > 0 ||
+             this.selectedTagsList.length > 0 ||
+             this.attributes.some(attr => this.getSelectedAttributeOptions(attr).length > 0);
+    }
+  },
+
+  methods: {
+    getSelectedAttributeOptions(attribute) {
+      const selectedAliases = (this.$route.query[attribute.alias] || '').split(',').filter(Boolean);
+      const options = attribute.options || [];
+      return options.filter(option => selectedAliases.includes(option.alias));
+    }
+  }
+};

package/package.json

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