Merge branch 'main' into feat/color-scheme-menu-item

SchwarzIT · Jul 2, 2024 · 060baf9 · 060baf9
2 parents 7d7e68f + 7f3332c
commit 060baf9
Show file tree

Hide file tree

Showing 19 changed files with 92 additions and 29 deletions.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -186,6 +186,7 @@
     "silly-waves-applaud",
     "silver-birds-dress",
     "six-llamas-provide",
+    "six-parents-appear",
     "sixty-knives-study",
     "slimy-tables-enjoy",
     "slow-moose-grab",

diff --git a/.changeset/six-parents-appear.md b/.changeset/six-parents-appear.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxTable): add `withPageScrolling` prop to switch from table-scrolling to page-scrolling
diff --git a/apps/alpha-test-app/CHANGELOG.md b/apps/alpha-test-app/CHANGELOG.md
@@ -1,5 +1,12 @@
 # alpha-test-app
 
+## 0.1.0-alpha.158
+
+### Patch Changes
+
+- Updated dependencies [4492231]
+  - [email protected]
+
 ## 0.1.0-alpha.157
 
 ### Patch Changes

diff --git a/apps/alpha-test-app/package.json b/apps/alpha-test-app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "alpha-test-app",
   "private": true,
-  "version": "0.1.0-alpha.157",
+  "version": "0.1.0-alpha.158",
   "type": "module",
   "scripts": {
     "start": "pnpm run dev",

diff --git a/apps/alpha-test-app/src/views/HomeView.vue b/apps/alpha-test-app/src/views/HomeView.vue
@@ -30,6 +30,7 @@ import {
 import { capitalize, computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import LanguageSelection from "../components/LanguageSelection.vue";
+import { useStorage } from "@vueuse/core";
 
 const { locale } = useI18n();
 
@@ -68,7 +69,7 @@ const filteredConfigOptions = computed(() =>
     ? configOptions.filter(({ label }) => normalizedIncludes(label, searchTerm.value))
     : configOptions,
 );
-const componentsToShow = ref([...configOptions]);
+const componentsToShow = useStorage("components-to-show", [...configOptions]);
 const componentNamesToShow = computed(() => componentsToShow.value.map((option) => option.value));
 const show = computed(() => {
   return (componentName: (typeof COMPONENTS)[number]) =>
@@ -131,6 +132,13 @@ const timerEndDate = new Date();
 timerEndDate.setHours(timerEndDate.getHours() + 2);
 
 const toast = useToast();
+
+const tableColumns = ["Fruit", "Price (€/kg)", "Inventory (kg)"];
+const tableData = [
+  { fruit: "Strawberry", price: "4.50", inventory: 200 },
+  { fruit: "Apple", price: "1.99", inventory: 3000 },
+  { fruit: "Banana", price: "3.75", inventory: 18000 },
+];
 </script>
 
 <template>
@@ -264,30 +272,19 @@ const toast = useToast();
         />
 
         <template v-if="show('OnyxTable')">
-          <OnyxTable>
+          <OnyxTable style="max-height: 250px" with-page-scrolling>
             <template #head>
               <tr>
-                <th>Fruit</th>
-                <th>Price (€/kg)</th>
-                <th>Inventory (kg)</th>
+                <th v-for="col in tableColumns" :key="col">{{ col }}</th>
               </tr>
             </template>
-            <tr>
-              <td>Strawberry</td>
-              <td>4.50</td>
-              <td>200</td>
-            </tr>
-            <tr>
-              <td>Apple</td>
-              <td>1.99</td>
-              <td>3000</td>
-            </tr>
-            <tr>
-              <td>Banana</td>
-              <td>3.75</td>
-              <td>18000</td>
+            <tr v-for="{ fruit, price, inventory } in tableData" :key="fruit">
+              <td>{{ fruit }}</td>
+              <td>{{ price }}</td>
+              <td>{{ inventory }}</td>
             </tr>
           </OnyxTable>
+
           <OnyxTable>
             <template #head>
               <tr>

diff --git a/apps/playground/CHANGELOG.md b/apps/playground/CHANGELOG.md
@@ -1,5 +1,12 @@
 # playground
 
+## 0.0.1-alpha.100
+
+### Patch Changes
+
+- Updated dependencies [4492231]
+  - [email protected]
+
 ## 0.0.1-alpha.99
 
 ### Patch Changes

diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "playground",
-  "version": "0.0.1-alpha.99",
+  "version": "0.0.1-alpha.100",
   "description": "Playground for the onyx Vue components",
   "type": "module",
   "author": "Schwarz IT KG",

diff --git a/packages/chartjs-plugin/CHANGELOG.md b/packages/chartjs-plugin/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @sit-onyx/chartjs-plugin
 
+## 1.0.0-alpha.117
+
+### Patch Changes
+
+- Updated dependencies [4492231]
+  - [email protected]
+
 ## 1.0.0-alpha.116
 
 ### Patch Changes

diff --git a/packages/chartjs-plugin/package.json b/packages/chartjs-plugin/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
   "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0-alpha.116",
+  "version": "1.0.0-alpha.117",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @sit-onyx/nuxt
 
+## 1.0.0-alpha.43
+
+### Patch Changes
+
+- Updated dependencies [4492231]
+  - [email protected]
+
 ## 1.0.0-alpha.42
 
 ### Patch Changes

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt",
-  "version": "1.0.0-alpha.42",
+  "version": "1.0.0-alpha.43",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

diff --git a/packages/sit-onyx/CHANGELOG.md b/packages/sit-onyx/CHANGELOG.md
@@ -1,5 +1,11 @@
 # sit-onyx
 
+## 1.0.0-alpha.161
+
+### Minor Changes
+
+- 4492231: feat(OnyxTable): add `withPageScrolling` prop to switch from table-scrolling to page-scrolling
+
 ## 1.0.0-alpha.160
 
 ### Patch Changes

diff --git a/packages/sit-onyx/package.json b/packages/sit-onyx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "1.0.0-alpha.160",
+  "version": "1.0.0-alpha.161",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

diff --git a/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue b/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue
@@ -10,6 +10,7 @@ import type { OnyxTableProps } from "./types";
 const props = withDefaults(defineProps<OnyxTableProps>(), {
   striped: false,
   withVerticalBorders: false,
+  withPageScrolling: false,
 });
 
 const slots = defineSlots<{
@@ -39,7 +40,10 @@ const isEmptyMessage = computed(() => t.value("table.empty"));
 
 <template>
   <div class="onyx-table-wrapper">
-    <div class="onyx-table-wrapper__scroll-container" tabindex="0">
+    <div
+      :class="{ 'onyx-table-wrapper__scroll-container': !props.withPageScrolling }"
+      :tabindex="props.withPageScrolling ? undefined : 0"
+    >
       <table
         class="onyx-table onyx-text"
         :class="[
@@ -48,7 +52,7 @@ const isEmptyMessage = computed(() => t.value("table.empty"));
           densityClass,
         ]"
       >
-        <thead v-if="slots.head">
+        <thead v-if="slots.head" class="onyx-table__header">
           <slot name="head"></slot>
         </thead>
         <tbody>
@@ -212,7 +216,8 @@ $border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
       }
     }
 
-    thead {
+    &__header,
+    &__header th {
       position: sticky;
       top: 0;
       z-index: var(--onyx-z-index-sticky-content);

diff --git a/packages/sit-onyx/src/components/OnyxTable/types.ts b/packages/sit-onyx/src/components/OnyxTable/types.ts
@@ -9,4 +9,11 @@ export type OnyxTableProps = DensityProp & {
    * If `true`, vertical borders will be displayed in addition to the default horizontal borders.
    */
   withVerticalBorders?: boolean;
+  /**
+   * Whether the table will only scroll in a page context and will not scroll internally.
+   * - `false` => the table header will stick to the top of the **table** when it has a limited height
+   * - `true` => the table header will stick to the top of the **page** when scrolling the page
+   * - Warning: Don't set a max-height/width on the table when `withPageScrolling` is set.
+   */
+  withPageScrolling?: boolean;
 };
diff --git a/packages/storybook-utils/CHANGELOG.md b/packages/storybook-utils/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @sit-onyx/storybook-utils
 
+## 1.0.0-alpha.168
+
+### Patch Changes
+
+- Updated dependencies [4492231]
+  - [email protected]
+
 ## 1.0.0-alpha.167
 
 ### Patch Changes

diff --git a/packages/storybook-utils/package.json b/packages/storybook-utils/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-alpha.167",
+  "version": "1.0.0-alpha.168",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

diff --git a/packages/vitepress-theme/CHANGELOG.md b/packages/vitepress-theme/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @sit-onyx/vitepress-theme
 
+## 1.0.0-alpha.161
+
+### Patch Changes
+
+- Updated dependencies [4492231]
+  - [email protected]
+
 ## 1.0.0-alpha.160
 
 ### Patch Changes

diff --git a/packages/vitepress-theme/package.json b/packages/vitepress-theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/vitepress-theme",
   "description": "VitePress theme that uses the onyx design system",
-  "version": "1.0.0-alpha.160",
+  "version": "1.0.0-alpha.161",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",