@eox/pages-theme-eox 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+# [1.5.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.4.0...v1.5.0) (2026-04-28)
+
+### Features
+
+- optional description column in pricing table ([7f09db4](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/7f09db4582311be7d0d64a6eb5c63efc1ab649a9))
+
+# [1.4.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.3.0...v1.4.0) (2026-04-23)
+
+### Features
+
+- support strings for baseprice ([1fd6df2](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/1fd6df2a226ff79824e0a570312030f9747eacd0))
+
 # [1.3.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.2.2...v1.3.0) (2026-04-14)
 
 ### Features

package/README.md

@@ -189,6 +189,13 @@ Use the `<FeatureSection>` component to highlight specific features.
 
 A flexible pricing table component.
 
+#### Properties
+
+| Property                | Type      | Default       | Description                                                                                                                                                                                             |
+| :---------------------- | :-------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `config`                | `Object`  | See component | Configuration for plans, options, and details tables.                                                                                                                                                   |
+| `showDescriptionColumn` | `Boolean` | `true`        | When `true`, shows the labels/description column on the left (e.g., "Price", "Plans"). When `false`, the column is hidden and labels are partially shown inside cells (useful for compact/mobile view). |
+
 ```html
 <PricingTable
   :config="{
@@ -208,6 +215,7 @@ A flexible pricing table component.
       }
     ]
   }"
+  :showDescriptionColumn="true"
 />
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",

package/src/components/FeaturesGallery.cy.js

@@ -98,10 +98,10 @@ describe("<FeaturesGallery />", () => {
       },
     });
 
-    cy.get("a.link-card")
+    cy.get(".link-card a.link-overlay")
       .should("have.attr", "href", "/card-2")
       .and("have.attr", "target", "_self");
-    cy.get("a.link-card article").should("exist");
+    cy.get(".link-card article").should("exist");
   });
 
   it("does not wrap card when link has text", () => {

package/src/components/PricingTable.vue

@@ -57,7 +57,7 @@
     <h6 v-if="localDetails.length" class="bold padding-4">{{ title }}</h6>
     <!-- Main Plans Table -->
     <div class="wrapper" :style="gridStyle">
-      <div class="cell orig-col-1 l top-margin">
+      <div v-if="showDescriptionColumn" class="cell orig-col-1 l top-margin">
         <h6 v-if="!localDetails.length" class="bold small">
           {{ t("Plans:", theme.i18n) }}
         </h6>
@@ -71,7 +71,7 @@
         <h6 class="primary-text bold top-margin">{{ plan.name }}</h6>
       </div>
 
-      <div class="cell orig-col-1 l">
+      <div v-if="showDescriptionColumn" class="cell orig-col-1 l">
         {{ t("Price (per month):", theme.i18n) }}
       </div>
       <div
@@ -81,7 +81,25 @@
         :class="`cell orig-col-${index + 2}`"
       >
         <div class="small-round surface-container medium-padding">
-          <h4 class="primary-text bold">€ {{ calculatePrice(plan) }},-</h4>
+          <h6
+            v-if="typeof plan.basePrice === 'string'"
+            class="primary-text bold"
+          >
+            {{ t(plan.basePrice, theme.i18n) }}
+          </h6>
+          <h4 v-else class="primary-text bold">
+            € {{ calculatePrice(plan) }},-
+          </h4>
+          <span
+            v-if="
+              !showDescriptionColumn &&
+              typeof plan.basePrice != 'string' &&
+              plan.basePrice != 0
+            "
+            class="small-text grey-text row-label"
+          >
+            {{ t("per month", theme.i18n) }}
+          </span>
         </div>
       </div>
 
@@ -90,11 +108,10 @@
         :key="'row-' + rowIndex"
       >
         <div
-          v-if="typeof row === 'string'"
+          v-if="typeof row === 'string' && showDescriptionColumn"
           class="cell orig-col-1 l"
           v-html="row + ':'"
         ></div>
-
         <div
           v-for="(plan, planIndex) in localPlans"
           :key="`${planIndex}-${row}`"
@@ -103,7 +120,7 @@
         >
           <div
             v-if="typeof plan.details[row] === 'string'"
-            class="s m grey-text"
+            :class="`grey-text ${showDescriptionColumn ? 's m' : 'small-text row-label'}`"
             v-html="row"
           ></div>
           <div
@@ -139,7 +156,7 @@
           </template>
         </div>
       </template>
-      <div class="cell orig-col-1 l"></div>
+      <div v-if="showDescriptionColumn" class="cell orig-col-1 l"></div>
       <div
         v-for="(plan, index) in localPlans"
         :key="'cta-' + index"
@@ -160,7 +177,7 @@
         </a>
       </div>
       <!-- Contact us section -->
-      <div class="cell orig-col-1 l"></div>
+      <div v-if="showDescriptionColumn" class="cell orig-col-1 l"></div>
       <div
         v-if="showSales"
         v-for="(plan, index) in localPlans"
@@ -188,7 +205,7 @@
       </div>
 
       <div class="wrapper" :style="secondaryGridStyle">
-        <div class="cell cell orig-col-1 l">
+        <div v-if="showDescriptionColumn" class="cell cell orig-col-1 l">
           <div class="">{{ t("Additional price:", theme.i18n) }}</div>
         </div>
         <div
@@ -207,7 +224,7 @@
           :key="'row-' + rowIndex"
         >
           <div
-            v-if="typeof row === 'string'"
+            v-if="typeof row === 'string' && showDescriptionColumn"
             class="cell orig-col-1 l"
             v-html="row + ':'"
           ></div>
@@ -269,6 +286,10 @@ export default {
         details: [],
       }),
     },
+    showDescriptionColumn: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -287,21 +308,24 @@ export default {
       // dynamically asign number of cols in grid when not on mobile
       if (!this.isMobile) {
         return {
-          "grid-template-columns": `repeat(${this.localPlans.length + 1}, 1fr)`,
+          "grid-template-columns": `repeat(${this.localPlans.length + (this.showDescriptionColumn ? 1 : 0)}, 1fr)`,
         };
       }
     },
     secondaryGridStyle() {
       if (!this.isMobile && this.localDetails) {
         return {
-          "grid-template-columns": `repeat(${this.localDetails[0].plans.length + 1}, 1fr)`,
+          "grid-template-columns": `repeat(${this.localDetails[0].plans.length + (this.showDescriptionColumn ? 1 : 0)}, 1fr)`,
         };
       }
     },
   },
   methods: {
     calculatePrice(plan) {
-      const basePrice = plan.basePrice;
+      // Prevent Math operations from running if a string was passed
+      if (typeof plan.basePrice === "string") return 0;
+
+      const basePrice = plan.basePrice || 0;
       const additionalOptionPrice = this.localOptions
         .filter((option) => option.checked)
         .reduce((sum, option) => sum + (option.modifier || 0), 0);
@@ -350,10 +374,13 @@ export default {
       if (typeof window === "undefined") {
         return;
       }
-      const count = this.localPlans.length + 1;
+      const count =
+        this.localPlans.length + (this.showDescriptionColumn ? 1 : 0);
       for (let i = 1; i <= count; i++) {
-        const elements = document.querySelectorAll(`.orig-col-${i}`);
+        const colIndex = this.showDescriptionColumn ? i : i + 1;
+        const elements = document.querySelectorAll(`.orig-col-${colIndex}`);
         elements.forEach((el) => {
+          // The order should be based on `i` for mobile layout
           el.style.order = this.isMobile ? i : "";
         });
       }
@@ -437,7 +464,7 @@ export default {
 
 <style scoped>
 .container {
-  padding: 3rem 0;
+  padding: 1rem 0;
   z-index: 0;
 }
 
@@ -447,7 +474,7 @@ export default {
 }
 
 .cell {
-  padding: 8px 16px 24px 16px;
+  padding: 4px 16px 8px 16px;
   overflow: hidden;
 }
 
@@ -473,6 +500,10 @@ export default {
   }
 }
 
+.row-label {
+  font-weight: normal;
+}
+
 .alternative:has(input:not(:checked)) + span,
 span:has(+ * + * > input:checked) {
   text-decoration: line-through;