@energysage/es-ds-components 3.0.10 → 3.0.11

package/components/es-collapse.vue

@@ -20,6 +20,7 @@ const props = defineProps({
 });
 
 const userDeterminedState: Ref<boolean | null> = ref(null);
+const uniqueId = useId();
 
 // directly determines the expanded/collapsed state of the panel
 const expanded = computed(() => {
@@ -52,7 +53,7 @@ const onClick = ({ value }: { value: boolean }) => {
 <template>
     <panel
         :collapsed="!expanded"
-        :header="expanded ? 'click to collapse content' : 'click to expand content'"
+        :toggle-button-props="{ 'aria-labelledby': uniqueId }"
         :pt="{
             header: 'd-flex flex-column justify-content-center position-relative py-100',
             icons: 'h-100 position-absolute w-100',
@@ -74,7 +75,9 @@ const onClick = ({ value }: { value: boolean }) => {
         toggleable
         @toggle="onClick">
         <template #header>
-            <slot name="title" />
+            <div :id="uniqueId">
+                <slot name="title" />
+            </div>
         </template>
         <template #togglericon>
             <icon-chevron-down />

package/components/es-tabs.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import TabPanel from 'primevue/tabpanel';
 import TabView from 'primevue/tabview';
+import { Comment } from 'vue';
 
 // allow use of v-model on this component
 const model = defineModel<number>();
 
-// get the list of elements provided as children to the default slot
-const initialChildren = useSlots().default?.() || [];
+// get the list of elements provided as children to the default slot - filtering out comments
+const rawChildren = useSlots().default?.() || [];
+const initialChildren = rawChildren.filter((child) => child.type !== Comment);
+
 const panels: any[] = [];
 initialChildren.forEach((child) => {
     // unless this has a v-for element and we instead need to access its children

package/components/es-video.vue

@@ -12,7 +12,7 @@ const showVideo = ref(false);
 
 // Methods
 function getVideoIdFromUrl(url: string) {
-    const embedPattern = /https:\/\/www\.youtube\.com\/embed\/(?<videoId>[A-Za-z0-9-]+)/;
+    const embedPattern = /https:\/\/www\.youtube\.com\/embed\/(?<videoId>[_A-Za-z0-9-]+)/;
     const parsedUrl = embedPattern.exec(url);
     if (parsedUrl) {
         return parsedUrl?.groups?.videoId;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "3.0.10",
+    "version": "3.0.11",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",