Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Version 0.10.0 #34

Draft
wants to merge 15 commits into
base: main
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .eslintignore

This file was deleted.

4 changes: 2 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ jobs:

- uses: pnpm/action-setup@v2
with:
version: 8
version: 9

- name: Use Node.js 20
uses: actions/setup-node@v3
@@ -82,7 +82,7 @@ jobs:

- uses: pnpm/action-setup@v2
with:
version: 8
version: 9

- name: Set node version to 20
uses: actions/setup-node@v3
8 changes: 3 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -43,7 +43,7 @@ pnpm add -D compotes

<br></details>

<!--<details>
<details>
<summary>Vue 3</summary><br>

```bash
@@ -58,7 +58,7 @@ pnpm add -D @compotes/vue

<br></details>

<details>
<!-- <details>
<summary>Nuxt 3</summary><br>

```bash
@@ -71,9 +71,7 @@ yarn add -D @compotes/nuxt
pnpm add -D @compotes/nuxt
```

<br></details>-->

> Vue 3/Nuxt 3 packages will arrive soon stay tuned!
<br></details> -->

## 🙋‍♂️ Why ?

98 changes: 57 additions & 41 deletions docs/.vitepress/config.mts
Original file line number Diff line number Diff line change
@@ -12,51 +12,67 @@ export default defineConfig({
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'Demo', link: '/demo/collapse' },
{ text: 'Demo', link: '/demo/' },
],
search: {
provider: 'local',
},
sidebar: [
{
text: 'Guide',
items: [
{ text: 'Get started', link: '/guide/' },
{
text: 'Collapse / Accordion',
link: '/guide/collapse',
},
{
text: 'Drag',
link: '/guide/drag',
},
{
text: 'Drilldown',
link: '/guide/drilldown',
},
{
text: 'Dropdown',
link: '/guide/dropdown',
},
{
text: 'Marquee',
link: '/guide/marquee',
},
],
},
{
text: 'Demo',
collapsed: true,
items: [
{ text: 'Collapse/Accordion', link: '/demo/collapse' },
{ text: 'Drag', link: '/demo/drag' },
{ text: 'Drilldown', link: '/demo/drilldown' },
{ text: 'Dropdown', link: '/demo/dropdown' },
{ text: 'Marquee', link: '/demo/marquee' },
],
},
],

sidebar: {
'/guide/': [
{
text: 'Guide',
items: [
{ text: 'Get started', link: '/guide/' },
{
text: 'Collapse / Accordion',
link: '/guide/collapse',
},
{
text: 'Drag',
link: '/guide/drag',
},
{
text: 'Drilldown',
link: '/guide/drilldown',
},
{
text: 'Dropdown',
link: '/guide/dropdown',
},
{
text: 'Marquee',
link: '/guide/marquee',
},
],
},
{
text: 'Vue',
items: [
{
text: 'Get started',
link: '/guide/vue/',
},
{
text: 'Composables',
link: '/guide/vue/composables',
},
],
},
],
'/demo/': [
{
text: 'Demo',
link: '/demo/',
items: [
{ text: 'Collapse/Accordion', link: '/demo/collapse' },
{ text: 'Drag', link: '/demo/drag' },
{ text: 'Drilldown', link: '/demo/drilldown' },
{ text: 'Dropdown', link: '/demo/dropdown' },
{ text: 'Marquee', link: '/demo/marquee' },
],
},
],
},
socialLinks: [
{ icon: 'github', link: 'https://github.com/Applelo/compotes' },
],
1 change: 1 addition & 0 deletions docs/.vitepress/theme/style.css
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@
--vp-c-brand-dark: #535bf2;
--vp-c-brand-darker: #454ce1;
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
--vp-c-brand-1: var(--vp-c-brand);
}

/**
7 changes: 7 additions & 0 deletions docs/demo/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Demo

Compotes provides minimum styles, so some CSS is added to make it work with the CSS provided by the documentation (VitePress).

Demo are made with the Vanilla JS version of the library and encapsulated with VueJS.

You can check directly [the source code of the documentation](https://github.com/Applelo/compotes/tree/main/docs/demo) for more details.
3 changes: 3 additions & 0 deletions docs/guide/index.md
Original file line number Diff line number Diff line change
@@ -12,6 +12,9 @@
# pnpm
pnpm add -D compotes

# bun
bun add -D compotes

#npm
npm i -D compotes

1 change: 0 additions & 1 deletion docs/guide/marquee.md
Original file line number Diff line number Diff line change
@@ -15,7 +15,6 @@ const marquee = new Marquee('.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>
109 changes: 109 additions & 0 deletions docs/guide/vue/composables.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
# 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
<script setup lang="ts">
import { useMarquee } from '@compotes/vue'
const marqueeEl = ref<HTMLElement | null>(null)
const marquee = useMarquee(marqueeEl)
</script>
```

::: info
You can also pass a string for `querySelector` your element, as first argument, but it is recommanded to pass ref for proper Vue integration.
:::

As the second argument, you can pass the options of the component.

```vue
<script setup lang="ts">
import { useMarquee } from '@compotes/vue'
const marqueeEl = ref<HTMLElement | null>(null)
const marquee = useMarquee(marqueeEl, { fill: true })
</script>
```

For the template, you need to respect the structure of the component you reference.

```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 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>
```
That's it for Vue composable.

## List

- useCollapse(el, [options](/guide/collapse#options))
- useDrag(el, [options](/guide/drag#options))
- 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.

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>{{ marquee.isPaused ? 'Paused' : 'Playing' }}</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>
```

## Events
31 changes: 31 additions & 0 deletions docs/guide/vue/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Vue

`@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.

::: info
No needs to install the `compotes` package since it is a dependencies of `@compotes/vue`.
:::

```shell
# pnpm
pnpm add -D @compotes/vue

# bun
bun add -D @compotes/vue

#npm
npm i -D @compotes/vue

# yarn
yarn add -D @compotes/vue
```

For usage, check the [composables](/guide/vue/composables) page.
22 changes: 11 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "@compotes/root",
"type": "module",
"version": "0.9.2",
"version": "0.10.0",
"private": "true",
"packageManager": "pnpm@8.15.2",
"packageManager": "pnpm@9.9.0",
"description": "Components library focused on accessibility/customization",
"author": "Applelo",
"license": "MIT",
@@ -43,14 +43,14 @@
"publish": "pnpm run -r publish"
},
"devDependencies": {
"@antfu/eslint-config": "2.6.4",
"eslint": "^8.56.0",
"playwright": "^1.41.2",
"typescript": "^5.3.3",
"vite": "^5.1.2",
"vitepress": "1.0.0-rc.42",
"vitest": "^1.2.2",
"vue": "^3.4.19",
"vue-tsc": "^1.8.27"
"@antfu/eslint-config": "2.27.2",
"eslint": "^9.9.1",
"playwright": "^1.46.1",
"typescript": "^5.5.4",
"vite": "^5.4.2",
"vitepress": "1.3.4",
"vitest": "^2.0.5",
"vue": "^3.4.38",
"vue-tsc": "^2.0.29"
}
}
14 changes: 7 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.9.2",
"packageManager": "pnpm@8.15.1",
"version": "0.10.0",
"packageManager": "pnpm@9.9.0",
"description": "Components library focused on accessibility/customization",
"author": "Applelo",
"license": "MIT",
@@ -66,11 +66,11 @@
"tabbable": "^6.2.0"
},
"devDependencies": {
"@types/node": "^20.11.17",
"@types/node": "^22.5.0",
"fast-glob": "^3.3.2",
"lightningcss": "^1.23.0",
"typescript": "^5.3.3",
"vite": "^5.1.2",
"vite-plugin-dts": "^3.7.2"
"lightningcss": "^1.26.0",
"typescript": "^5.5.4",
"vite": "^5.4.2",
"vite-plugin-dts": "^4.0.3"
}
}
Loading
Loading