Merge pull request #167 from unoforge/changes

Fix offcanvas & improve docs

Author: Johnkat-Mj

docs/package-lock.json

@@ -15,16 +15,16 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^4.0.6",
-    "@astrojs/partytown": "^2.1.3",
-    "@astrojs/preact": "^4.0.2",
-    "@astrojs/vercel": "^8.0.2",
-    "@astrojs/vue": "^5.0.5",
-    "@flexilla/flexilla": "^2.1.10",
-    "@flexilla/utilities": "^2.0.71",
+    "@astrojs/mdx": "^4.3.4",
+    "@astrojs/partytown": "^2.1.4",
+    "@astrojs/preact": "^4.1.0",
+    "@astrojs/vercel": "^8.0.4",
+    "@astrojs/vue": "^5.1.0",
+    "@flexilla/flexilla": "^2.2.8-beta.1",
+    "@flexilla/utilities": "^2.4.2",
     "@fontsource/geist-sans": "^5.1.0",
     "@preact/signals": "^1.2.2",
-    "astro": "^5.1.7",
+    "astro": "^5.13.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "overlayscrollbars": "2.5.0",
@@ -35,9 +35,9 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.30",
-    "@shikijs/transformers": "^1.20.0",
-    "@unifydev/flexilla": "^0.1.0",
-    "@unocss/preset-icons": "^0.58.5",
-    "unocss": "^66.1.0-beta.6"
+    "@shikijs/transformers": "^3.12.0",
+    "@unifydev/flexilla": "^0.1.3",
+    "@unocss/preset-icons": "^66.4.2",
+    "unocss": "^66.4.2"
   }
 }

docs/package.json

@@ -1,5 +1,5 @@
-import { Tabs,  Collapse, Dismissible, Popover, Dropdown, Accordion, Tooltip, Modal, OffCanvas, AutoResizeTextArea } from "@flexilla/flexilla";
-import { $, $$ } from "@flexilla/utilities";
+import { Tabs, Collapse, Dismissible, Popover, Dropdown, Accordion, Tooltip, Modal, OffCanvas, AutoResizeTextArea } from "@flexilla/flexilla";
+import { $, $$, actionToggler } from "@flexilla/utilities";
 
 
 const initTableOfContent = () => {
@@ -78,6 +78,40 @@ const initAllCustomComponents = () => {
 
 
 export const initAppScript = () => {
+
+    const sidebarOverlay = $("[data-sidebar-overlay]")
+    let sidebarAction: {
+        toInitial: () => void;
+    }
+    const setInitial = () => sidebarAction.toInitial()
+
+    sidebarAction = actionToggler({
+        trigger: "[data-trigger-sidebar]",
+        targets: [
+            {
+                element: "[data-app-sidebar]",
+                attributes: {
+                    initial: { "data-state": "close" },
+                    to: { "data-state": "open" }
+                }
+            },
+            {
+                element: "[data-sidebar-overlay]",
+                attributes: {
+                    initial: { "data-state": "hidden" },
+                    to: { "data-state": "visible" }
+                }
+            }
+        ],
+        onToggle: ({ isExpanded }) => {
+            if (isExpanded) {
+                if (sidebarOverlay) sidebarOverlay.addEventListener("click", setInitial)
+            } else {
+                if (sidebarOverlay) sidebarOverlay.removeEventListener("click", setInitial)
+            }
+        }
+    })
+
     Dismissible.autoInit("[data-dismissible]")
     Collapse.autoInit("[data-collapsible-example]")
     Tabs.autoInit("[data-tab-fx-site]")
@@ -88,8 +122,6 @@ export const initAppScript = () => {
     Dropdown.autoInit("[data-dropdown-demo]")
     Modal.autoInit("[data-modal-demo]")
     OffCanvas.autoInit("[data-slideover-demo]")
-    const sidebar = $("[data-sidebar-offcanvas]")
-    if(sidebar instanceof HTMLElement) OffCanvas.init(sidebar)
     AutoResizeTextArea.autoInit("[data-autoresizable]")
     Tooltip.autoInit("[data-tooltip-demo]")
 }

docs/src/assets/js/doc-script.ts

@@ -16,12 +16,12 @@ export const buttonVariants = cva("flex items-center relative text-sm", {
         "bg-gradient-to-t from-zinc9 to-zinc7 dark-from-zinc50 dark-to-zinc200 text-white dark-text-zinc9",
       gradient:
         "bg-gradient-to-t from-zinc50 to-zinc1 dark-from-zinc950/80 dark-to-zinc9 b b-zinc2/80 dark-b-zinc8/90",
-      flat:"text-zinc8 dark-text-zinc2 hover-bg-zinc2/60 dark-hover-bg-zinc-8/60 active-bg-zinc2/40 dark-active-bg-zinc8/30",
+      flat:"text-zinc8 dark-text-zinc2 hover-bg-zinc2/60 dark-hover-bg-zinc-8/60 active-bg-zinc2/40 dark-active-bg-zinc-800/30",
       none:"",
     },
     size: {
       default: "h11 px6",
-      md: "h9 px5",
+      md: "h-9 px5",
       sm: "h8 px4",
       xs:"h7 px4",
       icon: "w12 h12",
@@ -30,8 +30,8 @@ export const buttonVariants = cva("flex items-center relative text-sm", {
     },
     radius: {
       default: "rd-xl",
-      lg: "rd-lg",
-      md: "rd-md",
+      lg: "rounded-lg",
+      md: "rounded-md",
       sm:"rd-sm",
     },
   },

docs/src/components/atoms/Button.astro

@@ -7,6 +7,6 @@ interface Props extends HTMLAttributes<'div'>{
 
 const { class:className, ...rest } = Astro.props
 ---
-<div class={`${cn('mx-auto wfull max-w-[83rem] px5 sm-px10 lg-px8', className)}`} {...rest}>
+<div class={`${cn('mx-auto w-full max-w-[83rem] px5 sm-px10 lg-px8', className)}`} {...rest}>
     <slot/>
 </div>

docs/src/components/atoms/Container.astro

@@ -1,7 +1,7 @@
 <button
   data-switch-theme
   aria-label="Toggle Website Theme, Switch theme"
-  class="rd-lg transition ease-linear hover-bg-zinc2/90 dark-hover-bg-zinc9/90 p2.5"
+  class="rounded-lg transition ease-linear hover-bg-zinc2/90 dark-hover-bg-zinc9/90 p2.5"
 >
   <span aria-hidden="true" class="i-carbon-light flex dark-hidden text-xl"
   ></span>