Merge pull request #17 from Applelo/dev

Version 0.7.0

README.md

@@ -17,9 +17,9 @@ To learn more, check the *[documentation](https://compotes.dev)*.
 
 - Drilldown ([demo](https://compotes.dev/demo/collapse.html))
 - Collapse/Accordion ([demo](https://compotes.dev/demo/drilldown.html))
+- Drag ([demo](https://compotes.dev/demo/drag.html))
 <!--
 - Tabs
-- Pagination
 - Drag
 -->
 

docs/.vitepress/config.ts

@@ -26,6 +26,10 @@ export default defineConfig({
             text: 'Collapse / Accordion',
             link: '/guide/collapse',
           },
+          {
+            text: 'Drag',
+            link: '/guide/drag',
+          },
           {
             text: 'Drilldown',
             link: '/guide/drilldown',
@@ -37,6 +41,7 @@ export default defineConfig({
         collapsed: true,
         items: [
           { text: 'Collapse/Accordion', link: '/demo/collapse' },
+          { text: 'Drag', link: '/demo/drag' },
           { text: 'Drilldown', link: '/demo/drilldown' },
         ],
       },

docs/demo/collapse.md

@@ -14,7 +14,6 @@ prev: false
     const collapses = document.querySelectorAll('.c-collapse')
     collapses.forEach((el) => {
       const collapse = new Collapse(el)
-      collapse.init()
     })
   })
 </script>

docs/demo/drag.md

@@ -0,0 +1,36 @@
+# Drag Demo
+
+<script setup>
+  import './../../packages/core/dist/css/drag.css'
+  import { Drag } from './../../packages/core'
+  import { onMounted } from 'vue'
+
+  onMounted(() => {
+    const drag = new Drag('.c-drag')
+  })
+</script>
+<style>
+.c-drag {
+  height: 250px;
+}
+
+.c-drag > div {
+  width: 200%;
+}
+
+.c-drag p:first-child {
+  width: 300px;
+}
+</style>
+<div style="margin-top: 2rem;">
+  <div class="c-drag">
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
+      </p>
+    </div>
+  </div>
+</div>

docs/guide/collapse.md

@@ -103,7 +103,7 @@ console.log(collapse.expanded)// [!code focus]
 
 ## Events
 
-You can listen to emitted event directly on the collapse element like this:
+You can listen to emitted events directly on the collapse element like this:
 
 ```js
 import { Collapse } from 'compotes'

docs/guide/drag.md

@@ -0,0 +1,89 @@
+# Drag
+
+The drag component allows to create a draggable zone you can control with your mouse.
+
+```scss
+@import 'compotes/css/drag';
+```
+
+```js
+import { Drag } from 'compotes'
+
+const drag = new Drag('.c-drag')
+```
+
+You need to have a width and/or height define on the component because it uses `overflow: auto;`.
+
+```html
+
+<div class="c-drag">
+  <!-- Your overflowing content -->
+</div>
+```
+
+## Options
+
+You can access some data from the component.
+
+```js
+import { Drag } from 'compotes'
+
+const drag = new Drag('.c-drag', {
+  init: true, // [!code focus:2]
+  initEvents: true
+})
+```
+
+- `init` (boolean): Init the component on creation
+- `initEvents` (boolean): Init events on the component
+
+## Methods
+
+The drag component provides several methods to init and destroy the components.
+
+```js
+import { Drag } from 'compotes'
+
+const drag = new Drag('.c-drag', {
+  init: false
+})
+drag.init()// [!code focus]
+```
+
+- `init()`: Init the component
+- `initEvents()`: Init component events
+- `destroyEvents()`: Destroy the component events
+- `destroy()`: Destroy the component
+
+## Data
+
+You can access data from the component like this:
+
+```js
+import { Drag } from 'compotes'
+
+const drag = new Drag('.c-drag')
+console.log(drag.isDraggable)// [!code focus]
+```
+
+- `options` (options object): Get options used to init the component
+- `isDraggable` (boolean): Tell if the component is draggable or not
+- `isDragging` (boolean): Tell if the component is currently dragging or not
+
+## Events
+
+You can listen to emitted events directly on the drag element like this:
+
+```js
+import { Drag } from 'compotes'
+
+const drag = new Drag('.c-drag')
+drag.addEventListener('c.drag.init', (e) => { // [!code focus:3]
+  console.log(e.detail)// drag object
+})
+```
+
+- `c.drag.init`: On component init
+- `c.drag.start`: On component drag start
+- `c.drag.end`: On component drag end
+- `c.drag.destroy`: On component destroy

docs/guide/drilldown.md

@@ -148,7 +148,7 @@ console.log(drilldown.options)// [!code focus]
 
 ## Events
 
-You can listen to emitted event directly on the drilldown element like this:
+You can listen to emitted events directly on the drilldown element like this:
 
 ```js
 drilldownElement.addEventListener('c.drilldown.init', (e) => {

docs/guide/index.md

@@ -2,7 +2,7 @@
 
 ## Browser support
 
-**Compotes** uses modern API to work like `ResizableObserver`, `MutationObserver` or `:scope` selector : so IE11 is not supported.
+**Compotes** uses modern API to work like `ResizableObserver`, `MutationObserver`, css variables or `:scope` selector: so IE11 is not supported.
 
 ## Installation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compotes/root",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "private": "true",
   "packageManager": "pnpm@8.6.0",
   "description": "Components library focused on accessibility/customization",
@@ -47,6 +47,6 @@
     "vitepress": "1.0.0-beta.3",
     "vitest": "^0.32.2",
     "vue": "^3.3.4",
-    "vue-tsc": "^1.8.1"
+    "vue-tsc": "^1.8.2"
   }
 }

packages/core/README.md

@@ -17,6 +17,7 @@ To learn more, check the *[documentation](https://compotes.dev)*.
 
 - Drilldown ([demo](https://compotes.dev/demo/collapse.html))
 - Collapse/Accordion ([demo](https://compotes.dev/demo/drilldown.html))
+- Drag ([demo](https://compotes.dev/demo/drag.html))
 
 And more to come!
 

packages/core/demo/index.html

@@ -124,6 +124,13 @@ <h2>Accordion</h2>
         </div>
       </div>
     </section>
+    <section>
+      <h2>Drag</h2>
+      <div class="c-drag">
+        <p>Lorem ipsum <a href="#">dolor sit amet</a> consectetur adipisicing elit. Consequatur, id? Dolorum cum est ipsum praesentium mollitia quod saepe nemo doloribus, aliquid dolore laudantium consequuntur alias facere veritatis magni, adipisci fugit.</p>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur, est dolore. Vel ducimus incidunt labore, ipsum necessitatibus omnis qui! Consectetur molestiae ipsam repellendus illum hic veritatis. <a href="#">Consequuntur impedit</a> animi voluptatum.</p>
+      </div>
+    </section>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

packages/core/demo/src/main.ts

@@ -1,4 +1,4 @@
-import { Collapse, Drilldown } from './../../src'
+import { Collapse, Drag, Drilldown } from './../../src'
 import './styles.css'
 import './../../src/assets/css/drilldown.css'
 import './../../src/assets/css/collapse.css'
@@ -22,3 +22,5 @@ collapses.forEach((el) => {
   })
   collapse.init()
 })
+
+const _drag = new Drag('.c-drag')

packages/core/demo/src/styles.css

@@ -21,3 +21,10 @@ section + section {
 .c-drilldown > .c-drilldown-menu {
   transition: transform .3s linear;
 }
+
+.c-drag {
+  padding: 2rem;
+  width: 24rem;
+  height: 12rem;
+  border: 2px solid black;
+}

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "compotes",
   "type": "module",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "packageManager": "pnpm@8.6.0",
   "description": "Components library focused on accessibility/customization",
   "author": "Applelo",
@@ -50,7 +50,7 @@
     "prepublishOnly": "pnpm build"
   },
   "dependencies": {
-    "tabbable": "^6.1.2"
+    "tabbable": "^6.2.0"
   },
   "devDependencies": {
     "typescript": "^5.0.4",

packages/core/src/assets/css/drag.css

@@ -0,0 +1,15 @@
+.c-drag {
+  overflow: auto;
+}
+
+.c-drag--draggable {
+  cursor: grab;
+}
+
+.c-drag--dragging {
+  cursor: grabbing;
+}
+
+.c-drag--dragging * {
+  user-select: none;
+}

packages/core/src/components/collapse.ts

@@ -38,7 +38,7 @@ export default class Collapse extends Parent {
   }
 
   public initEvents() {
-    this.destroyEvents(['toggle'])
+    this.destroyEvents()
     this.triggers.forEach((item) => {
       this.registerEvent({
         id: 'toggle',