Skip to content

Commit 9d902cd

Browse files
simonwepsimonwep
committed
docs: add demos and fix favicons
improve api reference structure closes #243
1 parent 63c2f82 commit 9d902cd

File tree

11 files changed

+308
-106
lines changed

11 files changed

+308
-106
lines changed

‎.github/workflows/deploy.yml

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
name: Deploy Docs
22

3-
on:
4-
push:
5-
branches: [master]
3+
on: ["push", "pull_request"]
64

75
permissions:
86
contents: read
@@ -52,12 +50,13 @@ jobs:
5250
path: docs/.vitepress/dist
5351

5452
deploy:
53+
name: Deploy
54+
runs-on: ubuntu-22.04
55+
needs: build
56+
if: github.ref == 'refs/heads/master'
5557
environment:
5658
name: github-pages
5759
url: ${{ steps.deployment.outputs.page_url }}
58-
needs: build
59-
runs-on: ubuntu-22.04
60-
name: Deploy
6160
steps:
6261
- name: Deploy to GitHub Pages
6362
uses: actions/deploy-pages@v4

‎README.md

+41-31
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,51 @@
11
<h3 align="center">
2-
<img alt="Logo" src="https://user-images.githubusercontent.com/30767528/123517467-622b0f80-d6a1-11eb-9bf3-abcb4928a89e.png" width="350"/>
2+
<img alt="Logo" src="https://user-images.githubusercontent.com/30767528/123517467-622b0f80-d6a1-11eb-9bf3-abcb4928a89e.png" width="350"/>
33
</h3>
44

55
<h3 align="center">
6-
Visual dom-selection library
6+
Visual dom-selection library
77
</h3>
88

9+
<h6 align="center">
10+
<a href="https://simonwep.github.io/viselect/">Documentation</a> /
11+
<a href="https://simonwep.github.io/viselect/pages/quickstart.html">Quickstart</a> /
12+
<a href="https://simonwep.github.io/viselect/pages/examples.html">Examples</a>
13+
</h6>
14+
15+
<p align="center">
16+
<a href="https://choosealicense.com/licenses/mit/"><img
17+
alt="License MIT"
18+
src="https://img.shields.io/badge/license-MIT-ae15cc.svg"></a>
19+
<img alt="No dependencies"
20+
src="https://img.shields.io/badge/dependencies-none-8115cc.svg">
21+
<a href="https://github.com/sponsors/Simonwep"><img
22+
alt="Support me"
23+
src="https://img.shields.io/badge/github-support-6a15cc.svg"></a>
24+
<img alt="version" src="https://img.shields.io/github/lerna-json/v/simonwep/viselect?color=%233d24c9&label=version">
25+
<a href="https://www.buymeacoffee.com/aVc3krbXQ"><img
26+
alt="Buy me a coffee"
27+
src="https://img.shields.io/badge/%F0%9F%8D%BA-buy%20me%20a%20beer-%23FFDD00"></a>
28+
<a href="https://github.com/simonwep/viselect/actions/workflows/main.yml"><img
29+
alt="Build Status"
30+
src="https://github.com/simonwep/viselect/actions/workflows/main.yml/badge.svg"></a>
31+
<a href="https://github.com/simonwep/viselect/actions/workflows/deploy.yml"><img
32+
alt="Docs"
33+
src="https://github.com/simonwep/viselect/actions/workflows/deploy.yml/badge.svg"></a>
34+
<img alt="gzip size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/viselect.umd.js?compression=gzip">
35+
<img alt="brotli size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/viselect.umd.js?compression=brotli">
36+
<a href="https://v3.vuejs.org"><img
37+
alt="Vue support"
38+
src="https://img.shields.io/badge/✔-vue-%2340B581"></a>
39+
<a href="https://preactjs.com/"><img
40+
alt="Preact support"
41+
src="https://img.shields.io/badge/✔-preact-%236337B1"></a>
42+
<a href="https://reactjs.org"><img
43+
alt="React support"
44+
src="https://img.shields.io/badge/✔-react-%2359D7FF"></a>
45+
</p>
46+
947
<p align="center">
10-
<a href="https://choosealicense.com/licenses/mit/"><img
11-
alt="License MIT"
12-
src="https://img.shields.io/badge/license-MIT-ae15cc.svg"></a>
13-
<img alt="No dependencies"
14-
src="https://img.shields.io/badge/dependencies-none-8115cc.svg">
15-
<a href="https://github.com/sponsors/Simonwep"><img
16-
alt="Support me"
17-
src="https://img.shields.io/badge/github-support-6a15cc.svg"></a>
18-
<img alt="version" src="https://img.shields.io/github/lerna-json/v/simonwep/viselect?color=%233d24c9&label=version">
19-
<a href="https://www.buymeacoffee.com/aVc3krbXQ"><img
20-
alt="Buy me a coffee"
21-
src="https://img.shields.io/badge/%F0%9F%8D%BA-buy%20me%20a%20beer-%23FFDD00"></a>
22-
<a href="https://github.com/simonwep/viselect/actions/workflows/main.yml"><img
23-
alt="Build Status"
24-
src="https://github.com/simonwep/viselect/actions/workflows/main.yml/badge.svg"></a>
25-
<a href="https://github.com/simonwep/viselect/actions/workflows/deploy.yml"><img
26-
alt="Docs"
27-
src="https://github.com/simonwep/viselect/actions/workflows/deploy.yml/badge.svg"></a>
28-
<img alt="gzip size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/viselect.umd.js?compression=gzip">
29-
<img alt="brotli size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/viselect.umd.js?compression=brotli">
30-
<a href="https://v3.vuejs.org"><img
31-
alt="Vue support"
32-
src="https://img.shields.io/badge/✔-vue-%2340B581"></a>
33-
<a href="https://preactjs.com/"><img
34-
alt="Preact support"
35-
src="https://img.shields.io/badge/✔-preact-%236337B1"></a>
36-
<a href="https://reactjs.org"><img
37-
alt="React support"
38-
src="https://img.shields.io/badge/✔-react-%2359D7FF"></a>
48+
<img height="100" alt="demo gif" src="https://github.com/user-attachments/assets/7700280d-f388-4c49-bce6-391fb5e338e7">
3949
</p>
4050

4151
### Features 🤘

‎docs/.vitepress/config.mts

+4-3
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ export default defineConfig({
3838
['script', {defer: true, src: 'https://numai.reinisch.io/script.js', 'data-website-id': 'f2c623d2-5353-4dc5-acc5-d6979536958a'}],
3939

4040
// Icons
41-
['link', {rel: 'icon', href: 'favicon.ico', sizes: '32x32'}],
42-
['link', {rel: 'icon', href: 'favicon.svg', sizes: 'any', type: 'image/svg+xml'}],
43-
['link', {rel: 'apple-touch-icon', href: 'apple-touch-icon.png'}],
41+
['link', {rel: 'icon', href: '/viselect/favicon.ico', sizes: '32x32'}],
42+
['link', {rel: 'icon', href: '/viselect/favicon.svg', sizes: 'any', type: 'image/svg+xml'}],
43+
['link', {rel: 'apple-touch-icon', href: '/viselect/apple-touch-icon.png'}],
4444
],
4545
themeConfig: {
4646
nav: [
@@ -53,6 +53,7 @@ export default defineConfig({
5353
text: 'Introduction',
5454
items: [
5555
{text: 'Quickstart', link: 'pages/quickstart'},
56+
{text: 'Examples', link: 'pages/examples'},
5657
{text: 'API Reference', link: 'pages/api-reference'},
5758
{text: 'Custom Integration', link: 'pages/custom-integration'},
5859
{text: 'FAQ', link: 'pages/faq'},

‎docs/demos/DemoScrollable.vue

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div
3+
ref="root"
4+
:class="[$style.container, $style.purple]"
5+
/>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import {useCssModule, onMounted, useTemplateRef} from 'vue';
10+
import SelectionArea from '@viselect/vanilla';
11+
12+
const styles = useCssModule();
13+
const root = useTemplateRef('root');
14+
15+
onMounted(() => {
16+
const container = root.value;
17+
const boxes = 300;
18+
19+
for (let i = 0; i < boxes; i++) {
20+
const div = document.createElement('div');;
21+
container.appendChild(div);
22+
}
23+
24+
const selection = new SelectionArea({
25+
selectables: [`.${styles.container} > div`],
26+
boundaries: [`.${styles.container}`],
27+
selectionAreaClass: styles.selectionArea
28+
}).on('start', ({store, event}) => {
29+
if (!event.ctrlKey && !event.metaKey) {
30+
store.stored.forEach(el => el.classList.remove(styles.selected));
31+
selection.clearSelection();
32+
}
33+
}).on('move', ({store: {changed: {added, removed}}}) => {
34+
added.forEach(el => el.classList.add(styles.selected));
35+
removed.forEach(el => el.classList.remove(styles.selected));
36+
});
37+
});
38+
</script>
39+
40+
<style module>
41+
.container {
42+
display: grid;
43+
grid-template: repeat(10, 1fr) / repeat(30, 1fr);
44+
border-radius: 15px;
45+
padding: 10px;
46+
margin: 15px 0;
47+
user-select: none;
48+
max-height: 300px;
49+
overflow: auto;
50+
}
51+
52+
.container div {
53+
margin: 4px;
54+
width: 25px;
55+
height: 25px;
56+
background: rgba(66, 68, 90, 0.075);
57+
border-radius: 5px;
58+
cursor: pointer;
59+
}
60+
61+
.container.purple {
62+
border: 2px dashed var(--vp-c-purple-1);
63+
}
64+
65+
.container.purple div.selected {
66+
background: var(--vp-c-purple-2);
67+
}
68+
69+
.selectionArea {
70+
background: var(--vp-c-indigo-soft);
71+
border: 1px solid var(--vp-c-indigo-3);
72+
border-radius: 3px;
73+
}
74+
</style>

‎docs/demos/DemoSimple.vue

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div
3+
ref="root"
4+
:class="[$style.container, $style.purple]"
5+
/>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import {useCssModule, onMounted, useTemplateRef} from 'vue';
10+
import SelectionArea from '@viselect/vanilla';
11+
12+
const styles = useCssModule();
13+
const root = useTemplateRef('root');
14+
15+
onMounted(() => {
16+
const container = root.value;
17+
const {width} = container.getBoundingClientRect();
18+
const boxes = 33;
19+
const rows = 3;
20+
const totalBoxMargin = 4 * 2 * (boxes / rows);
21+
const boxWidth = (width - 20 - 4 - totalBoxMargin) / ((boxes / rows));
22+
23+
for (let i = 0; i < boxes; i++) {
24+
const div = document.createElement('div');
25+
div.style.width = div.style.height = `${Math.floor(boxWidth)}px`;
26+
container.appendChild(div);
27+
}
28+
29+
const selection = new SelectionArea({
30+
selectables: [`.${styles.container} > div`],
31+
boundaries: [`.${styles.container}`],
32+
selectionAreaClass: styles.selectionArea
33+
}).on('start', ({store, event}) => {
34+
if (!event.ctrlKey && !event.metaKey) {
35+
store.stored.forEach(el => el.classList.remove(styles.selected));
36+
selection.clearSelection();
37+
}
38+
}).on('move', ({store: {changed: {added, removed}}}) => {
39+
added.forEach(el => el.classList.add(styles.selected));
40+
removed.forEach(el => el.classList.remove(styles.selected));
41+
});
42+
});
43+
</script>
44+
45+
<style module>
46+
.container {
47+
display: flex;
48+
flex-wrap: wrap;
49+
justify-content: center;
50+
border-radius: 15px;
51+
padding: 10px;
52+
margin: 15px 0;
53+
user-select: none;
54+
}
55+
56+
.container div {
57+
margin: 4px;
58+
background: rgba(66, 68, 90, 0.075);
59+
border-radius: 0.75vw;
60+
cursor: pointer;
61+
}
62+
63+
.container.purple {
64+
border: 2px dashed var(--vp-c-purple-1);
65+
}
66+
67+
.container.purple div.selected {
68+
background: var(--vp-c-purple-2);
69+
}
70+
71+
.selectionArea {
72+
background: var(--vp-c-indigo-soft);
73+
border: 1px solid var(--vp-c-indigo-3);
74+
border-radius: 6px;
75+
}
76+
</style>

‎docs/index.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ hero:
55
name: "Viselect"
66
text: "Visual Selection Library"
77
tagline: "A modern, ultra-tiny, and highly optimized selection library"
8-
image:
8+
image:
99
src: logo.png
1010
alt: Viselect logo
1111
actions:
@@ -15,6 +15,9 @@ hero:
1515
- theme: alt
1616
text: API Reference
1717
link: pages/api-reference
18+
- theme: alt
19+
text: Examples
20+
link: pages/examples
1821

1922
features:
2023
- icon: 🌟

0 commit comments

Comments
 (0)