@energysage/es-ds-components 3.0.0-alpha.8 → 3.0.0

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,12 +14,23 @@ 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) {
@@ -29,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) => {
+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-breadcrumbs.vue

@@ -13,7 +13,7 @@ const model = computed(() => {
         return [];
     }
 
-    return props.items.map((item) => ({
+    return props.items.map((item: any) => ({
         ...item,
         // mark breadcrumb as active if manually set or if it matches this route
         active: item.active || route.path === item.to || route.path === item.href,

package/components/es-button.vue

@@ -83,10 +83,20 @@ const getRootClasses = computed(() => {
 </script>
 
 <template>
+    <!--
+        <a> is needed for href because a root-relative link like /market/start/
+        that is passed to <nuxt-link :to="" /> will attempt to internally navigate
+        within a micro frontend, which will result in a 404
+    -->
+    <a
+        v-if="props.href"
+        :class="getRootClasses"
+        :href="props.href">
+        <slot />
+    </a>
     <nuxt-link
-        v-if="props.href || props.to"
-        :href="props.href || undefined"
-        :to="props.to || undefined"
+        v-else-if="props.to"
+        :to="props.to"
         :class="getRootClasses">
         <slot />
     </nuxt-link>