update dependencies, work on composables

docs/guide/vue/composables.md

@@ -1,6 +1,7 @@
 # Vue Composables
 
 The [composable](https://vuejs.org/guide/reusability/composables.html) are the easy way to connect Compotes into VueJS hooks.
+
 First, [use a ref to get your HTMLElement ](https://vuejs.org/guide/essentials/template-refs.html) and pass it to your composable as a first argument.
 
 ```vue
@@ -52,3 +53,56 @@ That's it for Vue composable.
  - useDrilldown(el, [options](/guide/drilldown#options))
  - useDropdown(el, [options](/guide/dropdown#options))
  - useMarquee(el, [options](/guide/marquee#options))
+
+## Methods
+
+You can access all the component methods through the composable. There will be available after the mounted vue lifecycle hook.
+Here an example with the marquee component with a simple play/pause implementation.
+
+```vue
+<script setup lang="ts">
+import { useMarquee } from '@compotes/vue'
+const marqueeEl = ref<HTMLElement | null>(null)
+const marquee = useMarquee(marqueeEl, { fill: true })
+</script>
+
+<template>
+  <button @click="marquee?.pause()">
+    Pause
+  </button>
+  <button @click="marquee?.play()">
+    Play
+  </button>
+  <div ref="marqueeEl" class="c-marquee">
+    <ul class="c-marquee-container">
+      <li>This is the default marquee</li>
+      <li>Marquee or marquii</li>
+    </ul>
+  </div>
+</template>
+```
+
+## Data
+
+All the component data are available after the mounted vue lifecycle hook.
+
+Currently, **data are not reactive**.
+Here an example to show the current status of the collapse component.
+
+```vue
+<script setup lang="ts">
+import { useMarquee } from '@compotes/vue'
+const marqueeEl = ref<HTMLElement | null>(null)
+const marquee = useMarquee(marqueeEl, { fill: true })
+</script>
+
+<template>
+  <div>Toggled </div>
+  <div ref="marqueeEl" class="c-marquee">
+    <ul class="c-marquee-container">
+      <li>This is the default marquee</li>
+      <li>Marquee or marquii</li>
+    </ul>
+  </div>
+</template>
+```

docs/guide/vue/index.md

@@ -2,6 +2,10 @@
 
 `@compotes/vue` provides [composables](/guide/vue/composables) and soon components wrappers for the `compotes` library.
 
+::: warning
+This module is still in active development. Breaking changes can happen between versions.
+:::
+
 ## Installation
 
 Install the Vue version of the library with your favorite package manager.

package.json

@@ -43,14 +43,14 @@
     "publish": "pnpm run -r publish"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.8.0",
+    "@antfu/eslint-config": "2.11.1",
     "eslint": "^8.57.0",
     "playwright": "^1.42.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
-    "vitepress": "1.0.0-rc.45",
-    "vitest": "^1.3.1",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
+    "vitepress": "1.0.1",
+    "vitest": "^1.4.0",
     "vue": "^3.4.21",
-    "vue-tsc": "^2.0.5"
+    "vue-tsc": "^2.0.7"
   }
 }

packages/core/package.json

@@ -66,11 +66,11 @@
     "tabbable": "^6.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.25",
+    "@types/node": "^20.11.30",
     "fast-glob": "^3.3.2",
-    "lightningcss": "^1.24.0",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
-    "vite-plugin-dts": "^3.7.3"
+    "lightningcss": "^1.24.1",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
+    "vite-plugin-dts": "^3.8.0"
   }
 }

packages/core/src/components/collapse.ts

@@ -13,8 +13,11 @@ export interface CollapseOptions extends ParentOptions<Events> {}
 export default class Collapse extends Parent<Events> {
   declare public opts: CollapseOptions
   private triggers: HTMLElement[] = []
-  private expanded = false
-  private collapsing = false
+  protected status = {
+    expanded: false,
+    collapsing: false,
+  }
+
   private timeout: number | undefined = undefined
   private showClass = 'c-collapse--show'
   private collapsingClass = 'c-collapse--collapsing'
@@ -27,7 +30,7 @@ export default class Collapse extends Parent<Events> {
 
   public init() {
     this.name = 'collapse'
-    this.expanded = this.el.classList.contains(this.showClass)
+    this.status.expanded = this.el.classList.contains(this.showClass)
     this.update()
     super.init()
   }
@@ -61,7 +64,7 @@ export default class Collapse extends Parent<Events> {
     this.triggers.forEach((trigger) => {
       trigger.setAttribute(
         'aria-expanded',
-        this.expanded ? 'true' : 'false',
+        this.status.expanded ? 'true' : 'false',
       )
     })
     this.emitEvent('update')
@@ -71,16 +74,16 @@ export default class Collapse extends Parent<Events> {
    * Toggle collapse
    */
   public toggle() {
-    this.expanded ? this.hide() : this.show()
+    this.status.expanded ? this.hide() : this.show()
   }
 
   /**
    * Show collapse
    */
   public show() {
-    this.expanded = true
+    this.status.expanded = true
     if (this.hasTransition) {
-      this.collapsing = true
+      this.status.collapsing = true
       this.el.classList.add(this.collapsingClass)
       const height = this.el.scrollHeight
       this.el.style.height = `${height}px`
@@ -97,13 +100,13 @@ export default class Collapse extends Parent<Events> {
    * Hide collapse
    */
   public hide() {
-    this.expanded = false
+    this.status.expanded = false
     if (this.hasTransition) {
       const height = this.el.scrollHeight
       this.el.style.height = `${height}px`
       // eslint-disable-next-line no-unused-expressions
       this.el.offsetHeight // reflow
-      this.collapsing = true
+      this.status.collapsing = true
       this.el.classList.add(this.collapsingClass)
       this.el.style.height = '0px'
       this.onCollapse()
@@ -118,29 +121,29 @@ export default class Collapse extends Parent<Events> {
 
   private onCollapse() {
     clearTimeout(this.timeout)
-    this.emitEvent(this.expanded ? 'show' : 'hide')
+    this.emitEvent(this.status.expanded ? 'show' : 'hide')
 
     this.timeout = window.setTimeout(() => {
       this.el.classList.remove(this.collapsingClass)
-      this.collapsing = false
+      this.status.collapsing = false
       this.el.style.height = ''
 
-      this.emitEvent(this.expanded ? 'shown' : 'hidden')
+      this.emitEvent(this.status.expanded ? 'shown' : 'hidden')
     }, getTransitionDuration(this.el))
   }
 
   /**
    * Return the status of the collapse
    */
   public get isExpanded() {
-    return this.expanded
+    return this.status.expanded
   }
 
   /**
    * Return if the collapse is collapsing
    */
   public get isCollapsing() {
-    return this.collapsing
+    return this.status.collapsing
   }
 
   private get hasTransition() {

packages/vue/demo/package.json

@@ -14,8 +14,8 @@
   "devDependencies": {
     "@compotes/vue": "workspace:*",
     "@vitejs/plugin-vue": "^5.0.4",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
-    "vue-tsc": "^2.0.5"
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
+    "vue-tsc": "^2.0.7"
   }
 }

packages/vue/demo/src/App.vue

@@ -4,14 +4,7 @@ import { shallowRef } from 'vue'
 import 'compotes/css/collapse'
 
 const collapseEl = shallowRef<null | HTMLElement>(null)
-useCollapse(collapseEl, {
-  on: {
-    init: () => {
-      // eslint-disable-next-line no-console
-      console.log('init')
-    },
-  },
-})
+useCollapse(collapseEl)
 </script>
 
 <template>

packages/vue/package.json

@@ -58,10 +58,10 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
     "vue": "^3.4.21",
-    "vue-tsc": "^2.0.5"
+    "vue-tsc": "^2.0.7"
   },
   "publishConfig": {
     "access": "public"

packages/vue/src/composables/_parent.ts

@@ -1,13 +1,20 @@
 import type { Parent, ParentOptions } from 'compotes'
-import type { Ref, ShallowRef } from 'vue'
-import { onMounted, onUnmounted, onUpdated, shallowRef } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, onUpdated, ref, shallowRef } from 'vue'
+
+interface ComposableOptions extends ParentOptions<string> {
+  /**
+   * Use shallowRef instead of ref
+   */
+  shallow?: boolean
+}
 
 export function useParent<T extends Parent>(
   ComponentClass: new (el: HTMLElement, options: ParentOptions<string>) => T,
   el: Ref<HTMLElement | null>,
-  options: ParentOptions<string> = {},
+  options: ComposableOptions = {},
 ) {
-  const component: ShallowRef<T | null> = shallowRef(null)
+  const component: Ref<T | null> = options.shallow ? shallowRef(null) : ref(null)
 
   const init = () => {
     if (!el.value)

packages/vue/src/composables/collapse.ts

@@ -1,11 +1,16 @@
 import type { CollapseOptions } from 'compotes'
 import { Collapse } from 'compotes'
-import type { Ref } from 'vue'
+import { type Ref, computed } from 'vue'
 import { useParent } from './_parent'
 
 export function useCollapse(
   el: Ref<HTMLElement | null>,
   options?: CollapseOptions,
 ) {
   return useParent(Collapse, el, options)
+  // const collapse = useParent(Collapse, el, options)
+  // return {
+  //   collapse,
+  //   isExpanded: computed(() => collapse.value?.isExpanded),
+  // }
 }