Merge branch 'esds-3.0-vue3-primevue' into ced-2034-add-footer-links

es-ds-components/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"

es-ds-components/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 */

es-ds-components/package.json

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

es-ds-docs/package.json

@@ -16,7 +16,7 @@
         "format": "npm run format:prettier && npm run format:eslint"
     },
     "dependencies": {
-        "@energysage/es-ds-components": "^3.0.0-alpha.14",
+        "@energysage/es-ds-components": "^3.0.0-alpha.15",
         "@energysage/es-ds-styles": "^3.0.0-alpha.12",
         "@nuxt/image": "^1.8.0",
         "@nuxt/kit": "^3.13.1",

es-ds-docs/pages/organisms/carousel.vue

@@ -92,6 +92,18 @@ const propTableRows = [
         '1',
         'The number of items visible at any one time. This is also used as the default mobile value when using breakpoints.',
     ],
+    [
+        'peekDesktop',
+        'string',
+        '""',
+        'Padding added to the right of the carousel on desktop viewports to give the rightmost card a peek or cut-off. Ex: "100px"; "6rem".',
+    ],
+    [
+        'peekMobile',
+        'string',
+        '""',
+        'Same as peekDesktop but only applies to mobile viewports.  Both must be set if peek should be applied to all viewports.',
+    ],
     ['showArrows', 'Boolean', 'true', 'Whether to show the arrows below the carousel.'],
     ['showDots', 'Boolean', 'true', 'Whether to show the dots below the carousel.'],
     ['slideGap', 'Number', '16', 'The spacing, in pixels, between each carousel slide.'],
@@ -184,7 +196,8 @@ const eventTableRows = [['update', 'value (Number)', 'Emitted when the visible p
             <h2>Customization</h2>
             <p class="mb-200">
                 This example shows the ability to customize the gap between slides, the gap between the slides and the
-                controls, and the size and color of the arrow button icons.
+                controls, 'peek' styling for cards on desktop and mobile, and the size and color of the arrow button
+                icons.
             </p>
             <es-carousel
                 arrow-size="lg"
@@ -198,6 +211,8 @@ const eventTableRows = [['update', 'value (Number)', 'Emitted when the visible p
                 :items="basicExampleItems"
                 :show-dots="false"
                 :slide-gap="32"
+                peek-desktop="125px"
+                peek-mobile="75px"
                 variant="brand">
                 <template #item="{ item }">
                     <es-card class="text-center">