vueless 1.2.5-beta.1 → 1.2.5-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.5-beta.1",
+  "version": "1.2.5-beta.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-accordion/UAccordion.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide, useTemplateRef, ref, watch } from "vue";
+import { computed, provide, useTemplateRef, ref, watch, onMounted } from "vue";
 
 import useUI from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
@@ -15,7 +15,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  modelValue: undefined,
+  modelValue: () => [],
   options: () => [],
 });
 
@@ -42,6 +42,16 @@ const selectedItem = computed({
   },
 });
 
+onMounted(() => {
+  const initiallyOpened = props.options
+    .filter((option) => option.opened)
+    .map((option) => option.value);
+
+  if (initiallyOpened.length > 0) {
+    selectedItem.value = props.multiple ? initiallyOpened : initiallyOpened[0];
+  }
+});
+
 provide<SetAccordionSelectedItem>("setAccordionSelectedItem", (value, opened) => {
   if (props.multiple) {
     let current: string[] = [];
@@ -101,7 +111,6 @@ const { getDataTest, accordionItemAttrs, accordionAttrs } = useUI<Config>(defaul
         :key="index"
         :model-value="selectedItem"
         :value="option.value"
-        :opened="option.opened"
         :title="option.title"
         :description="option.description"
         :size="size"

package/ui.container-accordion/storybook/stories.ts

@@ -28,7 +28,7 @@ export default {
   title: "Containers / Accordion",
   component: UAccordion,
   args: {
-    modelValue: "2",
+    modelValue: null,
     options: [
       {
         value: "1",
@@ -40,6 +40,7 @@ export default {
       },
       {
         value: "2",
+        opened: true,
         title: "Pioneering Cutting-Edge Solutions",
         description:
           trimText(`Our team stays ahead of the curve, integrating the latest technologies

package/ui.container-accordion/tests/UAccordion.test.ts

@@ -1,3 +1,4 @@
+import { ref } from "vue";
 import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
@@ -57,8 +58,17 @@ describe("UAccordion", () => {
   // Events
   describe("Events", () => {
     it("emits update:modelValue when an item is toggled (single)", async () => {
+      const modelValue = ref<string | null>(null);
+
       const component = mount(UAccordion, {
-        props: { options },
+        props: {
+          options,
+          modelValue: modelValue.value,
+          "onUpdate:modelValue": (value: string | null) => {
+            modelValue.value = value;
+            component.setProps({ modelValue: value });
+          },
+        },
       });
 
       const firstItem = component.findAllComponents(UAccordionItem)[0];
@@ -77,8 +87,18 @@ describe("UAccordion", () => {
     });
 
     it("emits update:modelValue with arrays when multiple=true", async () => {
+      const modelValue = ref<string[]>([]);
+
       const component = mount(UAccordion, {
-        props: { options, multiple: true },
+        props: {
+          options,
+          multiple: true,
+          modelValue: modelValue.value,
+          "onUpdate:modelValue": (value: string[]) => {
+            modelValue.value = value;
+            component.setProps({ modelValue: value });
+          },
+        },
       });
 
       const [firstItem, secondItem] = component.findAllComponents(UAccordionItem);

package/ui.container-accordion-item/UAccordionItem.vue

@@ -54,7 +54,7 @@ watchEffect(() => (accordionDisabled.value = toValue(getAccordionDisabled) || pr
 const slots = useSlots();
 const elementId = props.id || useId();
 
-const internalOpened = ref(false);
+const internalOpened = ref(props.opened || false);
 
 const isOpened = computed(() => {
   const selectedItem = toValue(getAccordionSelectedItem);
@@ -67,7 +67,7 @@ const isOpened = computed(() => {
     return isEqual(selectedItem, props.value);
   }
 
-  return props.opened || internalOpened.value;
+  return internalOpened.value;
 });
 
 const toggleIconName = computed(() => {

package/ui.container-accordion-item/storybook/stories.ts

@@ -27,6 +27,7 @@ export default {
   title: "Containers / Accordion Item",
   component: UAccordionItem,
   args: {
+    opened: true,
     title: "Committed to Quality and Performance",
     description: trimText(
       `We take pride in delivering high-quality solutions tailored to your needs.