Merge pull request #135 from unoforge/next

Next

Author: Johnkat-Mj

examples/vue-example/package-lock.json

@@ -12,7 +12,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@flexilla/flexilla": "^2.0.3",
+    "@flexilla/flexilla": "^2.1.6",
     "@tailwindcss/vite": "^4.0.0-alpha.9",
     "tailwindcss": "^4.0.0-alpha.9",
     "vue": "^3.4.21"
@@ -28,7 +28,7 @@
     "eslint-plugin-vue": "^9.17.0",
     "npm-run-all2": "^6.1.2",
     "typescript": "~5.4.0",
-    "vite": "^5.1.5",
+    "vite": "^6.2.2",
     "vue-tsc": "^2.0.6"
   }
 }

examples/vue-example/package.json

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { Accordion } from "@flexilla/flexilla"
+const accordion = ref<Accordion|null>(null)
 onMounted(() => {
-    new Accordion("[data-fx-accordion]")
+   accordion.value = new Accordion("[data-fx-accordion]")
+})
+onUnmounted(() => {
+   if(accordion.value) accordion.value.cleanup()
 })
 </script>
 <template>
@@ -14,7 +18,7 @@ onMounted(() => {
             <div data-fx-accordion data-default-value="accordion-1" data-type="single" class="space-y-2">
                 <div data-accordion-item data-accordion-value="accordion-1"
                     class="rounded-md bg-gray-100/5 dark:bg-gray-900/5 border border-gray-200/30 dark:border-gray-800/20 data-[state=open]:bg-gray-100/80 dark:data-[state=open]:bg-gray-900/60 data-[state=open]:border-gray-200/50 dark:data-[state=open]:border-gray-800/40">
-                    <button data-accordion-trigger aria-label="toggle button"
+                    <button data-accordion-trigger aria-expanded="true" aria-label="toggle button"
                         class="cursor-pointer px-4 w-full flex justify-between items-center py-2 text-gray-800 dark:text-gray-200 font-medium text-lg ease-linear hover:bg-gray-200/50 dark:hover:bg-gray-800/40 rounded-md [&[aria-expanded=true]>svg]:rotate-180">
                         Is it accessible?
                         <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 ease-linear duration-300">
@@ -23,8 +27,8 @@ onMounted(() => {
                                 clip-rule="evenodd"></path>
                         </svg>
                     </button>
-                    <div aria-hidden="true" data-accordion-content
-                        class="text-gray-700 dark:text-gray-300 duration-200 ease-linear overflow-hidden">
+                    <div aria-hidden="false" data-state="open" data-accordion-content
+                        class="text-gray-700 dark:text-gray-300 duration-200 ease-linear overflow-hidden h-0 data-[state=open]:h-auto">
                         <p class="p-4">Yes. It adheres to the WAI-ARIA design pattern.</p>
                     </div>
                 </div>
@@ -40,7 +44,7 @@ onMounted(() => {
                         </svg>
                     </button>
                     <div aria-hidden="true" data-accordion-content
-                        class="text-gray-700 dark:text-gray-300 duration-200 ease-linear overflow-hidden">
+                        class="text-gray-700 dark:text-gray-300 duration-200 ease-linear overflow-hidden h-0 data-[state=open]:h-auto">
                         <p class="p-4">
                             Yes. It's unstyled by default, giving you freedom over the look and
                             feel.
@@ -59,7 +63,7 @@ onMounted(() => {
                         </svg>
                     </button>
                     <div aria-hidden="true" data-accordion-content
-                        class="text-gray-700 dark:text-gray-300 duration-200 ease-linear overflow-hidden">
+                        class="text-gray-700 dark:text-gray-300 duration-200 ease-linear overflow-hidden h-0 data-[state=open]:h-auto">
                         <p class="p-4">
                             Yes! You can use the transition prop to configure the animation.
                         </p>

examples/vue-example/src/components/AccordionComponent.vue

@@ -22,7 +22,7 @@ <h1 class="text-xl font-semibold text-zinc-900 dark:text-white">
               class="px-4 w-full flex justify-between items-center py-2 text-zinc-800 dark:text-zinc-200 font-medium text-lg ease-linear hover:bg-zinc-200/50 dark:hover:bg-zinc-800/40 rounded-md focus:outline-blue-600 aria-expanded:text-blue-600">
               Is it accessible?
             </button>
-            <div aria-hidden="true" data-accordion-content
+            <div aria-hidden="false" data-state="open" data-accordion-content
               class="text-zinc-700 dark:text-zinc-300 duration-200 ease-linear h-0 fx-open:h-auto overflow-hidden">
               <p class="p-4">
                 Yes. It adheres to the WAI-ARIA design pattern.
@@ -156,7 +156,7 @@ <h1 class="text-xl font-semibold text-zinc-900 dark:text-white">
                   clip-rule="evenodd"></path>
               </svg>
             </button>
-            <div aria-hidden="true" data-accordion-content
+            <div aria-hidden="false" data-state="open" data-accordion-content
               class="text-zinc-700 dark:text-zinc-300 duration-200 ease-linear h-0 fx-open:h-auto overflow-hidden">
               <p class="p-4">
                 Yes. It adheres to the WAI-ARIA design pattern.
@@ -278,7 +278,7 @@ <h1 class="text-xl font-semibold text-zinc-900 dark:text-white">
         <div data-accordion-4 class="space-y-2">
           <div data-accordion-item data-accordion-value="accordion-1"
             class="rounded-md bg-zinc-100/5 dark:bg-zinc-900/5 border border-zinc-200/30 dark:border-zinc-800/20 fx-open:bg-zinc-100/80 dark:fx-open:bg-zinc-900/60 fx-open:border-zinc-200/50 dark:fx-open:border-zinc-800/40">
-            <button data-accordion-trigger aria-label="toggle button"
+            <button data-accordion-trigger aria-expanded="true" aria-label="toggle button"
               class="px-4 w-full flex justify-between items-center py-2 text-zinc-800 dark:text-zinc-200 font-medium text-lg ease-linear hover:bg-zinc-200/50 dark:hover:bg-zinc-800/40 rounded-md focus:outline-blue-600 group">
               Is it accessible?
               <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
@@ -288,69 +288,7 @@ <h1 class="text-xl font-semibold text-zinc-900 dark:text-white">
                   clip-rule="evenodd"></path>
               </svg>
             </button>
-            <div aria-hidden="true" data-accordion-content
-              class="text-zinc-700 dark:text-zinc-300 duration-200 ease-linear h-0 fx-open:h-auto overflow-hidden">
-              <p class="p-4">
-                Yes. It adheres to the WAI-ARIA design pattern.
-              </p>
-            </div>
-          </div>
-          <div data-accordion-item data-accordion-value="accordion-2"
-            class="rounded-md bg-zinc-100/5 dark:bg-zinc-900/5 border border-zinc-200/30 dark:border-zinc-800/20 fx-open:bg-zinc-100/80 dark:fx-open:bg-zinc-900/60 fx-open:border-zinc-200/50 dark:fx-open:border-zinc-800/40">
-            <button data-accordion-trigger aria-label="toggle button"
-              class="px-4 w-full flex justify-between items-center py-2 text-zinc-800 dark:text-zinc-200 font-medium text-lg ease-linear hover:bg-zinc-200/50 dark:hover:bg-zinc-800/40 rounded-md focus:outline-blue-600 group">
-              Is it unstyled?
-              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-                class="size-5 ease-linear duration-300 group:aria-expanded:rotate-180">
-                <path fill-rule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                  clip-rule="evenodd"></path>
-              </svg>
-            </button>
-            <div aria-hidden="true" data-accordion-content
-              class="text-zinc-700 dark:text-zinc-300 duration-200 ease-linear h-0 fx-open:h-auto overflow-hidden">
-              <p class="p-4">
-                Yes. It's unstyled by default, giving you freedom over the look and feel.
-              </p>
-            </div>
-          </div>
-          <div data-accordion-item data-accordion-value="accordion-3"
-            class="rounded-md bg-zinc-100/5 dark:bg-zinc-900/5 border border-zinc-200/30 dark:border-zinc-800/20 fx-open:bg-zinc-100/80 dark:fx-open:bg-zinc-900/60 fx-open:border-zinc-200/50 dark:fx-open:border-zinc-800/40">
-            <button data-accordion-trigger aria-label="toggle button"
-              class="px-4 w-full flex justify-between items-center py-2 text-zinc-800 dark:text-zinc-200 font-medium text-lg ease-linear hover:bg-zinc-200/50 dark:hover:bg-zinc-800/40 rounded-md focus:outline-blue-600 group">
-              Can it be animated?
-              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-                class="size-5 ease-linear duration-300 group:aria-expanded:rotate-180">
-                <path fill-rule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                  clip-rule="evenodd"></path>
-              </svg>
-            </button>
-            <div aria-hidden="true" data-accordion-content
-              class="text-zinc-700 dark:text-zinc-300 duration-200 ease-linear h-0 fx-open:h-auto overflow-hidden">
-              <p class="p-4">
-                Yes! You can use the transition prop to configure the animation.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="space-y-6">
-      <h1 class="text-xl font-semibold text-zinc-900 dark:text-white">
-        Allow trigger On item Focus
-      </h1>
-      <div class="p-6 rounded-lg border border-zinc-200 dark:border-zinc-900">
-        <div data-accordion-5 class="space-y-2">
-          <div data-accordion-item data-accordion-value="accordion-1"
-            class="rounded-md bg-zinc-100/5 dark:bg-zinc-900/5 border border-zinc-200/30 dark:border-zinc-800/20 fx-open:bg-zinc-100/80 dark:fx-open:bg-zinc-900/60 fx-open:border-zinc-200/50 dark:fx-open:border-zinc-800/40">
-            <button data-accordion-trigger aria-label="toggle button"
-              class="px-4 w-full flex justify-between items-center py-2 text-zinc-800 dark:text-zinc-200 font-medium text-lg ease-linear hover:bg-zinc-200/50 dark:hover:bg-zinc-800/40 rounded-md focus:outline-blue-600 group">
-              Is it accessible?
-              <span
-                class="ease-linear duration-300 i-carbon-chevron-down  group-aria-expanded:rotate-180 text-md"></span>
-            </button>
-            <div aria-hidden="true" data-accordion-content
+            <div aria-hidden="false" data-state="open" data-accordion-content
               class="text-zinc-700 dark:text-zinc-300 duration-200 ease-linear h-0 fx-open:h-auto overflow-hidden">
               <p class="p-4">
                 Yes. It adheres to the WAI-ARIA design pattern.
@@ -401,5 +339,4 @@ <h1 class="text-xl font-semibold text-zinc-900 dark:text-white">
   </section>
   <script type="module" src="./main.ts"></script>
 </body>
-
 </html>

examples/with-tailwind/ui/accordion/index.html

@@ -28,10 +28,3 @@ new Accordion(
     }
 )
 
-
-new Accordion(
-    document.querySelector('[data-accordion-5]') as HTMLElement,
-    {
-        defaultValue: "accordion-1",
-    }
-)

examples/with-tailwind/ui/accordion/main.ts

@@ -1,13 +1,13 @@
 {
   "name": "@flexilla/accordion",
   "private": false,
-  "version": "2.1.1",
+  "version": "2.1.3",
   "type": "module",
   "description": "A versatile and interactive accordion component for creating collapsible sections in web applications, conserving space and improving user experience",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./dist/accordion.umd.js",
+  "main": "./dist/accordion.umd.cjs",
   "module": "./dist/accordion.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -18,7 +18,7 @@
       },
       "require": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/accordion.umd.js"
+        "default": "./dist/accordion.umd.cjs"
       }
     }
   },
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@flexilla/manager": "latest",
-    "@flexilla/utilities": "^2.1.0"
+    "@flexilla/utilities": "^2.1.1"
   },
   "devDependencies": {
     "typescript": "^5.2.2",

package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@flexilla/auto-resize-area",
   "private": false,
-  "version": "2.0.9",
+  "version": "2.0.10",
   "type": "module",
   "description": "A lightweight JavaScript component that automatically resizes text areas based on content",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./dist/auto-resize-area.umd.js",
+  "main": "./dist/auto-resize-area.umd.cjs",
   "module": "./dist/auto-resize-area.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -18,7 +18,7 @@
       },
       "require": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/auto-resize-area.umd.js"
+        "default": "./dist/auto-resize-area.umd.cjs"
       }
     }
   },