@eox/pages-theme-eox 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

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.4.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",

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,15 +81,25 @@
         :class="`cell orig-col-${index + 2}`"
       >
         <div class="small-round surface-container medium-padding">
-          <h4
+          <h6
             v-if="typeof plan.basePrice === 'string'"
             class="primary-text bold"
           >
             {{ t(plan.basePrice, theme.i18n) }}
-          </h4>
+          </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>
 
@@ -98,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}`"
@@ -111,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
@@ -147,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"
@@ -168,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"
@@ -196,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
@@ -215,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>
@@ -277,6 +286,10 @@ export default {
         details: [],
       }),
     },
+    showDescriptionColumn: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -295,14 +308,14 @@ 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)`,
         };
       }
     },
@@ -361,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 : "";
         });
       }
@@ -448,7 +464,7 @@ export default {
 
 <style scoped>
 .container {
-  padding: 3rem 0;
+  padding: 1rem 0;
   z-index: 0;
 }
 
@@ -458,7 +474,7 @@ export default {
 }
 
 .cell {
-  padding: 8px 16px 24px 16px;
+  padding: 4px 16px 8px 16px;
   overflow: hidden;
 }
 
@@ -484,6 +500,10 @@ export default {
   }
 }
 
+.row-label {
+  font-weight: normal;
+}
+
 .alternative:has(input:not(:checked)) + span,
 span:has(+ * + * > input:checked) {
   text-decoration: line-through;