feat(components): add the accordion component
This commit is contained in:
parent
7af58fe829
commit
e0ed5a5ddd
10 changed files with 159 additions and 15 deletions
|
|
@ -7,7 +7,8 @@
|
|||
},
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./navbar/*": "./src/navbar/*"
|
||||
"./navbar/*": "./src/navbar/*",
|
||||
"./accordion/*": "./src/accordion/*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bun": "latest",
|
||||
|
|
|
|||
41
packages/components/src/accordion/accordion.scss
Normal file
41
packages/components/src/accordion/accordion.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
.msp-accordion {
|
||||
// background-color: red;
|
||||
|
||||
&-item.msp-accordion-show {
|
||||
.msp-accordion-header::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
|
||||
transform: rotate(0deg);
|
||||
translate: 110% -50%;
|
||||
|
||||
content: "";
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
// TODO: change SVG of the arrow
|
||||
background: url('data:image/svg+xml;utf8,<svg fill="%23000000" viewBox="0 0 24 24" id="down-arrow-circle" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg" class="icon flat-line"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path id="secondary" d="M12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Zm2.83,10.5-2.14,3.12a.82.82,0,0,1-1.38,0L9.17,13.5A1,1,0,0,1,9.86,12h4.28A1,1,0,0,1,14.83,13.5Z" style="fill: %232ca9bc; stroke-width: 2;"></path><path id="primary" d="M12,7v5m.69,4.63,2.14-3.13a1,1,0,0,0-.69-1.5H9.86a1,1,0,0,0-.69,1.5l2.14,3.12A.82.82,0,0,0,12.69,16.63ZM12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Z" style="fill: none; stroke: %23000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path></g></svg>')
|
||||
no-repeat center center;
|
||||
background-size: contain;
|
||||
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-collapse {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
display: none;
|
||||
|
||||
transition: height 0.5s ease;
|
||||
}
|
||||
}
|
||||
53
packages/components/src/accordion/index.ts
Normal file
53
packages/components/src/accordion/index.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { qs, qsa } from "../utils";
|
||||
|
||||
enum AccordionState {
|
||||
Open = 1,
|
||||
Closed = 2,
|
||||
}
|
||||
|
||||
function waitAndHideCollapse(e: TransitionEvent) {
|
||||
if (!e.target) return;
|
||||
|
||||
const el = e.target as HTMLElement;
|
||||
el.style.display = "none";
|
||||
el.removeEventListener("transitionend", waitAndHideCollapse);
|
||||
}
|
||||
|
||||
function toggleAccordion(item: HTMLElement, state: AccordionState) {
|
||||
const collapse = qs(".msp-accordion-collapse", item);
|
||||
|
||||
if (!collapse) throw new Error("Collapse element not found");
|
||||
|
||||
if (state === AccordionState.Closed) {
|
||||
collapse.style.height = "0px";
|
||||
collapse
|
||||
.closest(".msp-accordion-item")
|
||||
?.classList.remove("msp-accordion-show");
|
||||
|
||||
collapse.addEventListener("transitionend", waitAndHideCollapse);
|
||||
} else if (state === AccordionState.Open) {
|
||||
collapse.style.display = "block";
|
||||
|
||||
const height = qs(".msp-accordion-content", collapse)?.offsetHeight;
|
||||
if (height == null) throw new Error("Content element not found");
|
||||
|
||||
collapse.style.height = `${height}px`;
|
||||
collapse
|
||||
.closest(".msp-accordion-item")
|
||||
?.classList.add("msp-accordion-show");
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
qsa(".msp-accordion-item").forEach((item) => {
|
||||
qs(".msp-accordion-header", item)?.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
toggleAccordion(
|
||||
item,
|
||||
item.classList.contains("msp-accordion-show")
|
||||
? AccordionState.Closed
|
||||
: AccordionState.Open,
|
||||
);
|
||||
});
|
||||
});
|
||||
};
|
||||
13
packages/components/src/utils.ts
Normal file
13
packages/components/src/utils.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
export const qs = (
|
||||
query: string,
|
||||
el: Element | Document = document,
|
||||
): HTMLElement | null => {
|
||||
return el.querySelector(query);
|
||||
};
|
||||
|
||||
export const qsa = (
|
||||
query: string,
|
||||
el: Element | Document = document,
|
||||
): NodeListOf<HTMLElement> => {
|
||||
return el.querySelectorAll(query);
|
||||
};
|
||||
|
|
@ -9,6 +9,11 @@ import { HTMLComponents } from "@mini-strap/components";
|
|||
const { values } = parseArgs({
|
||||
args: Bun.argv,
|
||||
options: {
|
||||
production: {
|
||||
type: "boolean",
|
||||
short: "p",
|
||||
default: false,
|
||||
},
|
||||
filter: {
|
||||
type: "string",
|
||||
short: "f",
|
||||
|
|
@ -64,7 +69,7 @@ if (["all", "sass"].includes(filter)) {
|
|||
outdir: `${outdir}/css`,
|
||||
naming: "[name].css",
|
||||
plugins: [sassPlugin],
|
||||
minify: true,
|
||||
minify: values.production,
|
||||
|
||||
// On by default in Bun v1.2+
|
||||
html: true,
|
||||
|
|
@ -77,8 +82,8 @@ if (["all", "js", "ts"].includes(filter)) {
|
|||
entrypoints: ["./js/index.ts"],
|
||||
outdir: `${outdir}/js`,
|
||||
target: "browser",
|
||||
splitting: true,
|
||||
minify: true,
|
||||
splitting: values.production,
|
||||
minify: values.production,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,3 +4,28 @@ section = ["Components"]
|
|||
+++
|
||||
|
||||
# accordion.md
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<ul class="msp-list-unstyle msp-accordion">
|
||||
<li>
|
||||
<a href="/">Overview</a>
|
||||
</li>
|
||||
|
||||
{% for item in get_taxonomy(kind="section") | get(key="items") %}
|
||||
<li class="msp-accordion-item">
|
||||
<a class="msp-accordion-header" href="#">{{ item.name | title }}</a>
|
||||
<div class="msp-accordion-collapse">
|
||||
<ul class="msp-list-unstyle msp-accordion-content">
|
||||
{% for page in item.pages %}
|
||||
<li class="">
|
||||
<a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
import "@mini-strap/components/accordion/index.ts";
|
||||
console.log("hello world!");
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
@use "@mini-strap/core";
|
||||
@use "@mini-strap/components/navbar/navbar.scss";
|
||||
@use "@mini-strap/components/accordion/accordion.scss";
|
||||
|
||||
html {
|
||||
// background-color: red;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@
|
|||
<title>alecodes.page</title>
|
||||
<ViewTransitions />
|
||||
|
||||
<script src="/js/index.js"></script>
|
||||
{% block scripts %}<script src="/js/index.js"></script>{% endblock %}
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body transition:animate="fade">
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<ul>
|
||||
<ul class="msp-list-unstyle msp-accordion">
|
||||
<li>
|
||||
<a href="/">Overview</a>
|
||||
</li>
|
||||
|
||||
{% for item in get_taxonomy(kind="section") | get(key="items") %}
|
||||
<li>
|
||||
<a href="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ item.name | title }}</a>
|
||||
<ul class="msp-d-none">
|
||||
<li class="msp-accordion-item">
|
||||
<a class="msp-accordion-header" href="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ item.name | title }}</a>
|
||||
<div class="msp-accordion-collapse">
|
||||
<ul class="msp-list-unstyle msp-accordion-content">
|
||||
{% for page in item.pages %}
|
||||
<li>
|
||||
<li class="">
|
||||
<a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue