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

package/components/es-accordion-list.vue

@@ -14,8 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
     variant: 'default',
 });
 
-// eslint-disable-next-line vue/require-prop-types
-const model = defineModel();
+const model = defineModel<string>();
 
 // get the list of elements provided as children to the default slot
 const initialChildren = useSlots().default?.() || [];
@@ -29,7 +28,9 @@ initialChildren.forEach((child) => {
     }
 });
 
-const activeIndex = ref();
+type ActiveChildren = null | number | number[];
+
+const activeIndex: Ref<ActiveChildren> = ref(null);
 
 watch(model, (newVal) => {
     if (newVal) {
@@ -39,19 +40,30 @@ watch(model, (newVal) => {
 
 const accordionTabs = children.map((child, index) => {
     if (child.props.id === props.initialExpandedId || child.props.id === model.value) {
-        activeIndex.value = index;
+        if (props.allowMultipleExpand) {
+            activeIndex.value = [index];
+        } else {
+            activeIndex.value = index;
+        }
     }
     return child.children;
 });
 
-const updateActiveIndex = (index: any) => {
+const updateActiveIndex = (index: ActiveChildren) => {
     if (model.value) {
-        model.value = children[index]?.props.id || '';
+        if (typeof index === 'number') {
+            model.value = children[index]?.props.id || '';
+        } else if (index === null) {
+            model.value = '';
+        }
+        // There's another case where index will be an array. In that case, v-model is unsupported as specified
+        // in the documentation, so no update is made
     }
 };
 </script>
 
 <template>
+    <!-- @vue-expect-error PrimeVue's type information is wrong -->
     <accordion
         :multiple="allowMultipleExpand"
         :active-index="activeIndex"

package/components/es-carousel.vue

@@ -4,7 +4,6 @@
      - circular has quirky behavior when numVisible doesn't match numScroll
         - you can see this in the circular autoplay example
         - i'm not sure if this is fixable
-     - figure out peek behavior
      - prop to position the arrows at the bottom two corners of a full-width slide, like homepage
 */
 
@@ -35,6 +34,8 @@ interface IProps {
     items: Array<any>;
     numScroll?: number;
     numVisible?: number;
+    peekDesktop?: string;
+    peekMobile?: string;
     showArrows?: boolean;
     showDots?: boolean;
     slideGap?: number;
@@ -50,6 +51,8 @@ const props = withDefaults(defineProps<IProps>(), {
     items: () => [],
     numScroll: 1,
     numVisible: 1,
+    peekDesktop: '',
+    peekMobile: '',
     showArrows: true,
     showDots: true,
     slideGap: 16,
@@ -114,22 +117,34 @@ const dotsMarginTop = computed(() => `${props.controlGap / BASE_FONT_SIZE}rem`);
 
 // the number of dots visible at each breakpoint
 const numDotsXs = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleXs.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleXs.value) / numScrollXs.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsSm = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleSm.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleSm.value) / numScrollSm.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsMd = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleMd.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleMd.value) / numScrollMd.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsLg = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleLg.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleLg.value) / numScrollLg.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsXl = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleXl.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleXl.value) / numScrollXl.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsXxl = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleXxl.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleXxl.value) / numScrollXxl.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 
 // calculate the arrow position from center based on the number of dots
@@ -292,7 +307,13 @@ onMounted(() => {
                 class: 'd-block',
             },
             itemsContent: {
-                class: 'w-100 overflow-hidden',
+                class: [
+                    'w-100 overflow-hidden',
+                    {
+                        'es-carousel-peek-desktop': peekDesktop,
+                        'es-carousel-peek-mobile': peekMobile,
+                    },
+                ],
             },
             itemsContainer: {
                 class: 'd-flex',
@@ -372,6 +393,18 @@ $num-dots-supported: 8;
 :deep(.es-carousel-container) {
     margin-left: v-bind(negativeMargin);
     margin-right: v-bind(negativeMargin);
+
+    > div.es-carousel-peek-desktop {
+        @include breakpoints.media-breakpoint-up(lg) {
+            padding-right: v-bind(peekDesktop);
+        }
+    }
+
+    > div.es-carousel-peek-mobile {
+        @include breakpoints.media-breakpoint-down(sm) {
+            padding-right: v-bind(peekMobile);
+        }
+    }
 }
 
 /* card sizing, based on num visible at each breakpoint */

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.15",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",