@energysage/es-ds-components 3.0.0-alpha.9 → 3.0.1

package/README.md

@@ -8,9 +8,6 @@ An EnergySage Nuxt layer library with design system components
 npm install @energysage/es-ds-components
 ```
 
-_*Note: this library is in pre-release development, so the above command won't yet work, as this package
-is not yet published to NPM.*_
-
 Once the package is installed, you'll need to add a reference to it in your nuxt.config.ts like so:
 
 ```

package/components/es-accordion-list.vue

@@ -14,37 +14,56 @@ const props = withDefaults(defineProps<Props>(), {
     variant: 'default',
 });
 
-// eslint-disable-next-line vue/require-prop-types
-const model = defineModel();
+const model = defineModel<string>();
 
-const children = useSlots().default?.() || [];
+// get the list of elements provided as children to the default slot
+const initialChildren = useSlots().default?.() || [];
+const children: any[] = [];
+initialChildren.forEach((child) => {
+    // unless this has a v-for element and we instead need to access its children
+    if (typeof child.type === 'symbol' && Array.isArray(child.children)) {
+        children.push(...child.children);
+    } else {
+        children.push(child);
+    }
+});
+
+type ActiveChildren = null | number | number[];
 
-const activeIndex = ref();
+const activeIndex: Ref<ActiveChildren> = ref(null);
 
 watch(model, (newVal) => {
     if (newVal) {
-        // @ts-expect-error not sure
         activeIndex.value = children.findIndex((child) => child.props.id === newVal);
     }
 });
 
 const accordionTabs = children.map((child, index) => {
-    // @ts-expect-error not sure
     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) {
-        // @ts-expect-error not sure
-        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"
@@ -99,7 +118,6 @@ const updateActiveIndex = (index: any) => {
                     role="heading"
                     aria-level="3"
                     :class="{ 'h3 mb-0': variant === 'minimal' }">
-                    <!-- @vue-expect-error -->
                     <component
                         :is="item"
                         v-for="item in tab.title()"
@@ -107,7 +125,6 @@ const updateActiveIndex = (index: any) => {
                 </span>
                 <icon-chevron-down class="es-accordion-icon flex-shrink-0 ml-200" />
             </template>
-            <!-- @vue-expect-error -->
             <component
                 :is="item"
                 v-for="item in tab.default()"