@energysage/es-ds-components 3.0.0-alpha.13 → 3.0.0-alpha.14

package/components/es-data-table-column.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Column from 'primevue/column';
+import type { ComponentOptionsMixin } from 'vue';
+
+// magic solution for wrapping Column successfully
+// https://www.reddit.com/r/vuejs/comments/1g17u7u/comment/lvjv91h/
+defineOptions({
+    name: 'Column',
+    extends: (Column as unknown as ComponentOptionsMixin).extends,
+    inheritAttrs: false,
+});
+</script>
+
+<!-- eslint-disable vue/valid-template-root -->
+<template>
+    <!--
+    While this file needs to exist to keep Nuxt happy, it doesn't actually do anything.
+    Instances of es-data-table-column are placed inside es-data-table, and es-data-table handles their display.
+    -->
+</template>

package/components/es-data-table.vue

@@ -1,75 +1,38 @@
 <script setup lang="ts">
 import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
 
 const props = defineProps({
-    fields: {
-        type: Array,
-        default: null,
-    },
     items: {
         type: Array,
         required: true,
     },
-    stickyFirstCol: {
+    scrollable: {
         type: Boolean,
         default: false,
     },
-    stickyHeader: {
-        type: [Boolean, String],
-        default: false,
+    scrollHeight: {
+        type: String,
+        default: '',
     },
 });
 
-const checkFrozenRow = (index: any) => {
-    if (index === 0 && props.stickyFirstCol) {
-        return true;
-    }
-    return false;
-};
-
-// Code is taken from BootStrap Vue to implemnt <b-table> feature that automatically
-// samples the first row to extract field name and "humanize" by converting kebab-case,
-// snake_case, and camelCase to individual words and capitalizes each word.
-// Doc: https://bootstrap-vue.org/docs/components/table
-// Source Code: https://github.com/bootstrap-vue/bootstrap-vue/blob/5173dd19f6f46dc9d125cd7233fb59ccd2ef9296/src/utils/string.js#L30
-const startCase = (str: string) =>
-    str
-        .replace(/_/g, ' ')
-        .replace(/([a-z])([A-Z])/g, (_, $1, $2) => `${$1} ${$2}`)
-        .replace(/(\s|^)(\w)/g, (_, $1, $2) => $1 + $2.toUpperCase());
-
-const label = (col: any) => {
-    if (typeof col === 'string') {
-        return startCase(col);
+// avoid passing in default scrollHeight value when scrollable is false
+// otherwise it will limit the height when we don't want it to
+const defaultScrollHeight = computed(() => {
+    if (props.scrollable) {
+        return props.scrollHeight || '305px';
     }
-    return col?.label ? col.label : startCase(col?.key);
-};
 
-const columns = computed(() => {
-    if (props.fields) {
-        return props.fields;
-    }
-    // @ts-expect-error not sure
-    return Object.keys(props.items[0]);
-});
-
-const scrollHeight = computed(() => {
-    if (props.stickyHeader) {
-        if (typeof props.stickyHeader === 'string') {
-            return props.stickyHeader;
-        }
-        return '300px';
-    }
     return '';
 });
 </script>
+
 <template>
     <data-table
-        scrollable
+        class="border table__data-table table-spacing table"
         :pt="{
             table: {
-                class: 'font-size-75 font-size-md-100',
+                class: 'font-size-75 font-size-md-100 w-100',
                 style: 'border-collapse: separate; border-spacing: 0;',
             },
             wrapper: {
@@ -79,50 +42,34 @@ const scrollHeight = computed(() => {
                 style: 'top: 0px; z-index: 2',
             },
         }"
-        :value="props.items"
-        class="border table__data-table table-spacing table"
-        :scroll-height="scrollHeight">
-        <!-- @vue-expect-error -->
-        <column
-            v-for="(col, index) of columns"
-            :key="col?.key ? col.key : col"
-            :field="col?.key ? col.key : col"
-            :header="label(col)"
-            :sortable="col?.sortable"
-            :frozen="checkFrozenRow(index)"
-            align-frozen="left"
-            :pt="{
-                sortIcon: {
-                    style: 'display: none',
-                },
-                headerCell: (options) => ({
-                    class: [
-                        {
-                            sortable: options.props.sortable,
-                            stickyFirstColHeader: options.props.frozen,
-                        },
-                    ],
-                }),
-                bodyCell: (options) => ({
-                    class: [
-                        {
-                            stickyFirstCol: options.props.frozen,
-                        },
-                    ],
-                }),
-            }">
-        </column>
+        :scrollable="scrollable"
+        :scroll-height="defaultScrollHeight"
+        :value="items">
+        <slot />
     </data-table>
 </template>
+
 <style scoped lang="scss">
-:deep(.stickyFirstColHeader) {
-    position: sticky !important;
+:deep(th[data-p-sortable-column='true']) {
+    cursor: pointer;
+    user-select: none;
+
+    div[data-pc-section='headercontent'] {
+        align-items: center;
+        display: flex;
+    }
+    span[data-pc-section='sort'] {
+        display: inline-block;
+        margin-left: 0.5rem;
+    }
 }
-:deep(.stickyFirstCol) {
+
+:deep(td[data-p-frozen-column='true']),
+:deep(th[data-p-frozen-column='true']) {
     position: sticky !important;
-    background: inherit;
 }
-:deep(.sortable) {
-    cursor: pointer !important;
+
+:deep(td[data-p-frozen-column='true']) {
+    background: inherit;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "3.0.0-alpha.13",
+    "version": "3.0.0-alpha.14",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",