Skip to content

Commit

Permalink
Merge pull request #21 from Applelo/dev
Browse files Browse the repository at this point in the history
Version 0.8.0
  • Loading branch information
Applelo authored Jan 11, 2024
2 parents 8ed4f5b + 064da76 commit 8ffcb12
Show file tree
Hide file tree
Showing 28 changed files with 1,888 additions and 1,409 deletions.
8 changes: 4 additions & 4 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ jobs:
with:
version: 8

- name: Use Node.js 18
- name: Use Node.js 20
uses: actions/setup-node@v3
with:
node-version: 18
node-version: 20
cache: pnpm

- name: Install
Expand Down Expand Up @@ -84,10 +84,10 @@ jobs:
with:
version: 8

- name: Set node version to 18
- name: Set node version to 20
uses: actions/setup-node@v3
with:
node-version: 18
node-version: 20
cache: pnpm

- name: Install
Expand Down
5 changes: 2 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,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))
- Marquee ([demo](https://compotes.dev/demo/marquee.html))
<!--
- Tabs
- Drag
-->

And more to come!
Expand Down Expand Up @@ -74,7 +74,6 @@ pnpm add -D @compotes/nuxt

> Vue 3/Nuxt 3 packages will arrive soon stay tuned!

## 🙋‍♂️ Why ?

A lot of components library are already shipped with styles but as a Front End developer, I always wants to override a lot. Futhermore, there are not always accessible or they are shipped with jQuery.
Expand All @@ -85,4 +84,4 @@ There are some good library like [React Aria](https://react-spectrum.adobe.com/r
## 👨‍💼 License

MIT
MIT
5 changes: 5 additions & 0 deletions docs/.vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ export default defineConfig({
text: 'Drilldown',
link: '/guide/drilldown',
},
{
text: 'Marquee',
link: '/guide/marquee',
},
],
},
{
Expand All @@ -43,6 +47,7 @@ export default defineConfig({
{ text: 'Collapse/Accordion', link: '/demo/collapse' },
{ text: 'Drag', link: '/demo/drag' },
{ text: 'Drilldown', link: '/demo/drilldown' },
{ text: 'Marquee', link: '/demo/marquee' },
],
},
],
Expand Down
2 changes: 1 addition & 1 deletion docs/demo/drilldown.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,4 +104,4 @@
Item
</li>
</ul>
</nav>
</nav>
58 changes: 58 additions & 0 deletions docs/demo/marquee.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
# Marquee Demo

<script setup>
import './../../packages/core/dist/css/marquee.css'
import { Marquee } from './../../packages/core'
import { onMounted } from 'vue'

onMounted(() => {
const marqueeDefault = new Marquee('#marquee-default', {
fill: true
})
const marqueeLeft = new Marquee('#marquee-left', {
direction: 'left',
fill: true
})
const marqueeDown = new Marquee('#marquee-down', {
direction: 'down',
fill: true
})
const marqueeAlternateEl = document.getElementById('marquee-alternate')
const marqueeAlternate = new Marquee(marqueeAlternateEl, {
behavior: 'alternate'
})
})
</script>
<style>
.c-marquee .c-marquee-container {
list-style: none;
padding: 0;
margin: 0;
}
.c-marquee li {
margin: 0!important;
padding: 0 .5rem;
}
</style>
<div id="marquee-default" class="c-marquee" style="margin-top: 2rem;">
<ul class="c-marquee-container">
<li>This is the default <a href="#">marquee</a></li>
<li>Marquee or <a href="#">marquii</a></li>
</ul>
</div>
<div id="marquee-left" class="c-marquee" style="margin-top: 2rem;">
<ul class="c-marquee-container">
<li>Marquee Left Direction</li>
<li><img width="25" height="25" src="https://vitejs.dev/logo.svg"/></li>
</ul>
</div>
<div id="marquee-down" class="c-marquee" style="margin-top: 2rem; height: 500px;">
<ul class="c-marquee-container">
<li>Marquee Bottom Direction</li>
</ul>
</div>
<div id="marquee-alternate" class="c-marquee" style="margin-top: 2rem; width: 100px;">
<ul class="c-marquee-container">
<li>Alternate</li>
</ul>
</div>
4 changes: 3 additions & 1 deletion docs/guide/collapse.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ To make the collapse open by default, add the `c-collapse--show` class on the co
</div>
```

You can set the CSS transition to the collapse element. The component will show and hide with the duration of your transition automatically.

## Accessibility

To ensure accessibility feature, the component will inject `aria-expanded` to all trigger elements. This allow the user to know if the collapse is expanded or not. The user also knows what element it refer thanks to the `aria-controls` attribute.
Expand Down Expand Up @@ -120,4 +122,4 @@ collapseElement.addEventListener('c.collapse.init', (e) => { // [!code focus:3]
- `c.collapse.shown`: The collapse element is shown
- `c.collapse.hide`: Hide animation is launch
- `c.collapse.hidden`: The collapse element is hidden
- `c.collapse.destroy`: On component destroy
- `c.collapse.destroy`: On component destroy
2 changes: 1 addition & 1 deletion docs/guide/drag.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,4 +86,4 @@ drag.addEventListener('c.drag.init', (e) => { // [!code focus:3]
- `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
- `c.drag.destroy`: On component destroy
2 changes: 1 addition & 1 deletion docs/guide/drilldown.md
Original file line number Diff line number Diff line change
Expand Up @@ -161,4 +161,4 @@ drilldownElement.addEventListener('c.drilldown.init', (e) => {
- `c.drilldown.next`: On next
- `c.drilldown.back`: On back
- `c.drilldown.reset`: On reset
- `c.drilldown.destroy`: On component destroy
- `c.drilldown.destroy`: On component destroy
1 change: 0 additions & 1 deletion docs/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,3 @@ Only the main css files is compiled and minified. The other parts are not. You n
```

5. That's it! Check each component for details about structure, advice for accessibility, options and more!

98 changes: 98 additions & 0 deletions docs/guide/marquee.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
# Marquee

The marquee component allows to create an animated text copying the old [marquee](https://developer.mozilla.org/fr/docs/Web/HTML/Element/marquee) element with modern support.

```scss
@import 'compotes/css/marquee';
```

```js
import { Marquee } from 'compotes'

const marquee = new Drag('.c-marquee')
```

The structure consists to a list of element. All animation are CSS based.

```html

<div class="c-marquee">
<ul class="c-marquee-container">
<li>This is the default marquee</li>
<li>Marquee or marquii</li>
</ul>
</div>
```

You are not limited to text. You can also add any kind of valid HTML like image.

## Accessibility

- Make the marquee tabbable and stop it if it is in focus via the keyboard
- If the user has configure `prefers-reduced-motion` on his browser, the marquee animation will not be played.
- If you are using the `fill` option, all cloned element will be set to `aria-hidden` to hide the non necessary content to the screen reader and not be tabbable thank to a `tabindex="-1"`.
- If an element is focus with the keyboard, the marquee animation will be stop.

## Options

You can access some data from the component.

```js
import { Drag } from 'compotes'

const drag = new Drag('.c-drag', {
init: true, // [!code focus:6]
initEvents: true,
fill: false,
direction: 'left',
behavior: 'scroll',
duration: 1
})
```

- `init` (boolean): Init the component on creation
- `initEvents` (boolean): Init events on the component
- `fill` (boolean): Fill the marquee to make a loop
- `direction` ('left' | 'right' | 'up' | 'down'): Direction of marquee animation
- `behavior` ('scroll' | 'alternate'): The behavior the marquee animation
- `duration` (number or string): The duration of the marquee animation

## Methods

The marquee component provides several methods to init and destroy the components.

```js
import { Marquee } from 'compotes'

const marquee = new Marquee('.c-marquee', {
init: false
})
marquee.init()// [!code focus]
```

- `init()`: Init the component
- `initEvents()`: Init component events
- `destroyEvents()`: Destroy the component events
- `destroy()`: Destroy the component
- `update()`: Update the marquee component
- `play()`: Play the marquee component
- `pause()`: Pause the marquee component

## Events

You can listen to emitted events directly on the marquee element like this:

```js
import { Marquee } from 'compotes'

const marquee = new Drag('.c-marquee')
marquee.addEventListener('c.marquee.init', (e) => { // [!code focus:3]
console.log(e.detail)// marquee object
})
```

- `c.marquee.init`: On component init
- `c.marquee.play`: On component drag play
- `c.marquee.pause`: On component drag pause
- `c.marquee.loop`: On component marquee loop
- `c.marquee.destroy`: On component destroy
1 change: 0 additions & 1 deletion docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,3 @@ features:
icon: 📠
details: Typescript for better world
---

25 changes: 13 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "@compotes/root",
"type": "module",
"version": "0.7.2",
"version": "0.8.0",
"private": "true",
"packageManager": "pnpm@8.6.0",
"packageManager": "pnpm@8.14.1",
"description": "Components library focused on accessibility/customization",
"author": "Applelo",
"license": "MIT",
Expand Down Expand Up @@ -39,17 +39,18 @@
"prepublishOnly": "pnpm build",
"docs": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
"docs:serve": "vitepress serve docs",
"publish": "pnpm run -r publish"
},
"devDependencies": {
"@antfu/eslint-config": "1.0.0-beta.28",
"eslint": "^8.52.0",
"playwright": "^1.39.0",
"typescript": "^5.2.2",
"vite": "^4.5.0",
"vitepress": "1.0.0-rc.24",
"vitest": "^0.34.6",
"vue": "^3.3.6",
"vue-tsc": "^1.8.20"
"@antfu/eslint-config": "2.6.2",
"eslint": "^8.56.0",
"playwright": "^1.40.1",
"typescript": "^5.3.3",
"vite": "^5.0.11",
"vitepress": "1.0.0-rc.36",
"vitest": "^1.1.3",
"vue": "^3.4.10",
"vue-tsc": "^1.8.27"
}
}
3 changes: 2 additions & 1 deletion packages/core/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,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))
- Marquee ([demo](https://compotes.dev/demo/marquee.html))

And more to come!

Expand Down Expand Up @@ -80,4 +81,4 @@ There are some good library like [React Aria](https://react-spectrum.adobe.com/r
## 👨‍💼 License

MIT
MIT
19 changes: 12 additions & 7 deletions packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "compotes",
"type": "module",
"version": "0.7.2",
"packageManager": "pnpm@8.9.2",
"version": "0.8.0",
"packageManager": "pnpm@8.14.1",
"description": "Components library focused on accessibility/customization",
"author": "Applelo",
"license": "MIT",
Expand All @@ -29,10 +29,14 @@
},
"./css": "./dist/style.css",
"./css/style.css": "./dist/style.css",
"./css/collapse": "./dist/css/collapse.css",
"./css/collapse.css": "./dist/css/collapse.css",
"./css/drag": "./dist/css/drag.css",
"./css/drag.css": "./dist/css/drag.css",
"./css/drilldown": "./dist/css/drilldown.css",
"./css/drilldown.css": "./dist/css/drilldown.css",
"./css/collapse": "./dist/css/collapse.css",
"./css/collapse.css": "./dist/css/collapse.css"
"./css/marquee": "./dist/css/marquee.css",
"./css/marquee.css": "./dist/css/marquee.css"
},
"main": "./dist/compotes.umd.cjs",
"module": "./dist/compotes.js",
Expand All @@ -54,8 +58,9 @@
"tabbable": "^6.2.0"
},
"devDependencies": {
"typescript": "^5.2.2",
"vite": "^4.5.0",
"vite-plugin-dts": "^3.6.1"
"@types/node": "^20.11.0",
"typescript": "^5.3.3",
"vite": "^5.0.11",
"vite-plugin-dts": "^3.7.0"
}
}
2 changes: 1 addition & 1 deletion packages/core/src/assets/css/drilldown.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@
visibility: hidden;
transition-property: visibility;
transition-delay: var(--c-drilldown-delay, 0s);
}
}
Loading

0 comments on commit 8ffcb12

Please sign in to comment.