added components Badge, TypeTitle, migrated existing code accordingly
This commit is contained in:
parent
83dcae4441
commit
59035e2190
GPG key ID:
4E4A5AD1FB748427
20 changed files with 2493 additions and 1357 deletions
21
src/components/Badge.astro
Normal file
21
src/components/Badge.astro
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
export interface Props {
|
||||
badgeText: string;
|
||||
withIcon?: boolean;
|
||||
badgeIconName?: string;
|
||||
}
|
||||
|
||||
const { badgeText, withIcon = true, badgeIconName } = Astro.props;
|
||||
---
|
||||
<span class="badge">
|
||||
{withIcon &&
|
||||
(
|
||||
badgeIconName ?
|
||||
<Icon name={badgeIconName}/>
|
||||
: <Icon name={"flag"}/>
|
||||
)
|
||||
}
|
||||
<span class="badge-text">{badgeText}</span>
|
||||
</span>
|
||||
|
|
@ -115,8 +115,7 @@ export const ShevronSmallDown: VoidComponent<{
|
|||
stroke-width="2"
|
||||
d="M9 12L14 7M9 12L14 17"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -173,6 +172,7 @@ export const Hashtag: VoidComponent<{
|
|||
viewBox="0 0 256 256"
|
||||
class={props.class}
|
||||
>
|
||||
<title>Link</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M224 90h-51l8.89-48.93a6 6 0 1 0-11.8-2.14L160.81 90H109l8.89-48.93a6 6 0 0 0-11.8-2.14L96.81 90H48a6 6 0 0 0 0 12h46.63l-9.46 52H32a6 6 0 0 0 0 12h51l-8.9 48.93a6 6 0 0 0 4.83 7A5.6 5.6 0 0 0 80 222a6 6 0 0 0 5.89-4.93l9.3-51.07H147l-8.89 48.93a6 6 0 0 0 4.83 7a5.6 5.6 0 0 0 1.08.1a6 6 0 0 0 5.89-4.93l9.28-51.1H208a6 6 0 0 0 0-12h-46.63l9.46-52H224a6 6 0 0 0 0-12m-74.83 64h-51.8l9.46-52h51.8Z"
|
||||
|
|
@ -192,6 +192,7 @@ export const Tag: VoidComponent<{
|
|||
viewBox="0 0 256 256"
|
||||
class={props.class}
|
||||
>
|
||||
<title>Property</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M246.66 123.56L201 55.13A15.94 15.94 0 0 0 187.72 48H40a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h147.72a16 16 0 0 0 13.28-7.12l45.63-68.44a8 8 0 0 0 .03-8.88M187.72 192H40V64h147.72l42.66 64Z"
|
||||
|
|
@ -211,6 +212,7 @@ export const Subtitles: VoidComponent<{
|
|||
viewBox="0 0 256 256"
|
||||
class={props.class}
|
||||
>
|
||||
<title>Table of contents</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M224 48H32a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16m0 144H32V64h192zM48 136a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H56a8 8 0 0 1-8-8m160 0a8 8 0 0 1-8 8h-96a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m-48 32a8 8 0 0 1-8 8H56a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m48 0a8 8 0 0 1-8 8h-16a8 8 0 0 1 0-16h16a8 8 0 0 1 8 8"
|
||||
|
|
@ -230,6 +232,7 @@ export const Ruler: VoidComponent<{
|
|||
viewBox="0 0 256 256"
|
||||
class={props.class}
|
||||
>
|
||||
<title>Prop</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m235.32 73.37l-52.69-52.68a16 16 0 0 0-22.63 0L20.68 160a16 16 0 0 0 0 22.63l52.69 52.68a16 16 0 0 0 22.63 0L235.32 96a16 16 0 0 0 0-22.63M84.68 224L32 171.31l32-32l26.34 26.35a8 8 0 0 0 11.32-11.32L75.31 128L96 107.31l26.34 26.35a8 8 0 0 0 11.32-11.32L107.31 96L128 75.31l26.34 26.35a8 8 0 0 0 11.32-11.32L139.31 64l32-32L224 84.69Z"
|
||||
|
|
@ -249,6 +252,7 @@ export const RoundBrackets: VoidComponent<{
|
|||
viewBox="0 0 256 256"
|
||||
class={props.class}
|
||||
>
|
||||
<title>Function</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M40 128c0 58.29 34.67 80.25 36.15 81.16a8 8 0 0 1-8.27 13.7C66.09 221.78 24 195.75 24 128s42.09-93.78 43.88-94.86a8 8 0 0 1 8.26 13.7C74.54 47.83 40 69.82 40 128m148.12-94.86a8 8 0 0 0-8.27 13.7C181.33 47.75 216 69.71 216 128s-34.67 80.25-36.12 81.14a8 8 0 0 0 8.24 13.72C189.91 221.78 232 195.75 232 128s-42.09-93.78-43.88-94.86"
|
||||
|
|
@ -268,6 +272,7 @@ export const PowerCord: VoidComponent<{
|
|||
viewBox="0 0 256 256"
|
||||
class={props.class}
|
||||
>
|
||||
<title>Signal</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M149.66 138.34a8 8 0 0 0-11.32 0L120 156.69L99.31 136l18.35-18.34a8 8 0 0 0-11.32-11.32L88 124.69l-18.34-18.35a8 8 0 0 0-11.32 11.32l6.35 6.34l-23.32 23.31a32 32 0 0 0 0 45.26l5.38 5.37l-28.41 28.4a8 8 0 0 0 11.32 11.32l28.4-28.41l5.37 5.38a32 32 0 0 0 45.26 0L132 191.31l6.34 6.35a8 8 0 0 0 11.32-11.32L131.31 168l18.35-18.34a8 8 0 0 0 0-11.32m-52.29 65a16 16 0 0 1-22.62 0l-22.06-22.09a16 16 0 0 1 0-22.62L76 135.31L120.69 180Zm140.29-185a8 8 0 0 0-11.32 0l-28.4 28.41l-5.37-5.38a32.05 32.05 0 0 0-45.26 0L124 64.69l-6.34-6.35a8 8 0 0 0-11.32 11.32l80 80a8 8 0 0 0 11.32-11.32l-6.35-6.34l23.32-23.31a32 32 0 0 0 0-45.26l-5.38-5.37l28.41-28.4a8 8 0 0 0 0-11.32m-34.35 79L180 120.69L135.31 76l23.32-23.31a16 16 0 0 1 22.62 0l22.06 22a16 16 0 0 1 0 22.68Z"
|
||||
|
|
@ -287,6 +292,7 @@ export const FourDiamonds: VoidComponent<{
|
|||
viewBox="0 0 256 256"
|
||||
class={props.class}
|
||||
>
|
||||
<title>Variant</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M122.34 109.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32ZM128 35.31L156.69 64L128 92.69L99.31 64Zm5.66 111a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32ZM128 220.69L99.31 192L128 163.31L156.69 192Zm109.66-98.35l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32M192 156.69L163.31 128L192 99.31L220.69 128Zm-82.34-34.35l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32M64 156.69L35.31 128L64 99.31L92.69 128Z"
|
||||
|
|
@ -434,6 +440,7 @@ export const LinkSimple: VoidComponent<{
|
|||
viewBox="0 0 256 256"
|
||||
class={props.class}
|
||||
>
|
||||
<title>Link</title>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M165.66 90.34a8 8 0 0 1 0 11.32l-64 64a8 8 0 0 1-11.32-11.32l64-64a8 8 0 0 1 11.32 0M215.6 40.4a56 56 0 0 0-79.2 0l-30.06 30.05a8 8 0 0 0 11.32 11.32l30.06-30a40 40 0 0 1 56.57 56.56l-30.07 30.06a8 8 0 0 0 11.31 11.32l30.07-30.11a56 56 0 0 0 0-79.2m-77.26 133.82l-30.06 30.06a40 40 0 1 1-56.56-56.57l30.05-30.05a8 8 0 0 0-11.32-11.32L40.4 136.4a56 56 0 0 0 79.2 79.2l30.06-30.07a8 8 0 0 0-11.32-11.31"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import type {
|
|||
} from "@config/io/types";
|
||||
import { getQMLTypeLink } from "@config/io/helpers";
|
||||
import { Tag } from "@icons";
|
||||
import TypeDetails from "./TypeDetails.astro"
|
||||
import TypeDetails from "./TypeDetails.astro";
|
||||
import TypeTitle from "./TypeTitle.astro";
|
||||
|
||||
export interface Props {
|
||||
funcData: QuickshellFunction[];
|
||||
|
|
@ -16,17 +17,21 @@ const { funcData } = Astro.props;
|
|||
<ul class="typedata typefuncs">
|
||||
{
|
||||
funcData.map(item => {
|
||||
const functionParams = item.params.length > 0 ? item.params.map((funcparam,index) => `${funcparam.name}${index !== item.params.length -1 ? ", ":""}`) : null
|
||||
const functionParams = item.params.length > 0 ? item.params.map((funcparam,index) => `${funcparam.name}${index !== item.params.length -1 ? ", ":""}`) : undefined
|
||||
const retTypeLink = getQMLTypeLink(item.ret as unknown as QMLTypeLinkObject)
|
||||
let genericType:string|undefined;
|
||||
let genericTypeLink:string|undefined;
|
||||
return (
|
||||
<li id={item.name} class="typedata-root typefunc-root">
|
||||
<p class="typedata-name typefunc-name">
|
||||
{item.name}(<span class="typedata-param">{functionParams}</span>)
|
||||
<span class="type-datatype">: <a
|
||||
href={retTypeLink}
|
||||
target="_blank"
|
||||
>{item.ret.name || item.ret.type}</a></span>
|
||||
</p>
|
||||
<TypeTitle
|
||||
typekind="func"
|
||||
typename={item.name}
|
||||
typelink={retTypeLink}
|
||||
typelink_text={item.ret.name || item.ret.type.toString()}
|
||||
typename_generic={genericType}
|
||||
typelink_generic={genericTypeLink}
|
||||
typedata_params={functionParams}
|
||||
/>
|
||||
{
|
||||
item.params.length > 0 ? (
|
||||
<p class="typedata-params typefunc-params">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import type {
|
|||
QuickshellProps,
|
||||
} from "@config/io/types";
|
||||
import { Tag, Flag } from "@icons";
|
||||
import TypeTitle from "./TypeTitle.astro";
|
||||
|
||||
import TypeDetails from "./TypeDetails.astro";
|
||||
|
||||
|
|
@ -37,34 +38,15 @@ const { propsKeys, propsData } = Astro.props;
|
|||
}
|
||||
return (
|
||||
<li id={ item } class="typedata-root typeprop-root">
|
||||
<div class="typedata-title typeprop-title">
|
||||
<section class="typedata-name typeprop-name">
|
||||
<Tag client:idle/>
|
||||
{ item }<span class="type-datatype">: <a
|
||||
href={typeLink}
|
||||
>{ linkText }</a>{genericType &&
|
||||
(<span class="type-datatype"><</span><a
|
||||
href={genericTypeLink}>{genericType}</a
|
||||
><span class="type-datatype">></span>
|
||||
)}</span>
|
||||
</section>
|
||||
{
|
||||
propData.flags && propData.flags.length > 0 ? (
|
||||
<p class="type-flags">
|
||||
{
|
||||
propData.flags.map((flag) => {
|
||||
return (
|
||||
<span class="type-flag">
|
||||
<Flag client:idle/>
|
||||
{flag}
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
<TypeTitle
|
||||
typekind="prop"
|
||||
typename={item}
|
||||
typelink={typeLink}
|
||||
typelink_text={linkText}
|
||||
typename_generic={genericType}
|
||||
typelink_generic={genericTypeLink}
|
||||
badges={propData.flags}
|
||||
/>
|
||||
{
|
||||
gadget ? (
|
||||
<p class="typedata-params typefunc-params">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import type { QuickshellSignal } from "@config/io/types";
|
||||
import { Tag, PowerCord } from "@icons";
|
||||
import TypeDetails from "./TypeDetails.astro";
|
||||
import TypeTitle from "./TypeTitle.astro";
|
||||
|
||||
export interface Props {
|
||||
signalKeys: string[];
|
||||
|
|
@ -15,15 +16,19 @@ const { signalKeys, signalsData } = Astro.props;
|
|||
signalKeys.map(item => {
|
||||
const signalData = signalsData[item];
|
||||
const paramKeys = signalData.params.length > 0 ? signalData.params.map((param,index) => `${param.name}${index !== signalData.params.length -1 ? ", ":""}`) : []
|
||||
let genericType:string|undefined;
|
||||
let genericTypeLink:string|undefined;
|
||||
return (
|
||||
<li id={ item } class="typedata-root typesignal-root">
|
||||
<p class="typedata-name typesignal-name">
|
||||
<PowerCord client:idle/>
|
||||
{ item }(<span class="typedata-param">{paramKeys}</span>)<span class="typesignal-doclink"><a
|
||||
href="/docs/configuration/qml-overview#-signals"
|
||||
target="_blank"
|
||||
>?</a></span>
|
||||
</p>
|
||||
<TypeTitle
|
||||
typekind="signal"
|
||||
typename={item}
|
||||
typelink="/docs/configuration/qml-overview#-signals"
|
||||
typelink_text={"?"}
|
||||
typename_generic={genericType}
|
||||
typelink_generic={genericTypeLink}
|
||||
typedata_params={paramKeys}
|
||||
/>
|
||||
{
|
||||
signalData.params && signalData.params.length > 0 ? (
|
||||
<p class="typedata-params typesignal-params">
|
||||
|
|
|
|||
57
src/components/type/TypeTitle.astro
Normal file
57
src/components/type/TypeTitle.astro
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Badge from "@components/Badge.astro";
|
||||
|
||||
export interface Props {
|
||||
typekind: string;
|
||||
typename: string;
|
||||
typelink: string;
|
||||
typelink_text: string;
|
||||
typename_generic?: string;
|
||||
typelink_generic?: string;
|
||||
badges?: string[];
|
||||
typedata_params?: string[];
|
||||
}
|
||||
|
||||
const {
|
||||
typekind,
|
||||
typename,
|
||||
typelink,
|
||||
typelink_text,
|
||||
typename_generic,
|
||||
typelink_generic,
|
||||
badges,
|
||||
typedata_params,
|
||||
} = Astro.props;
|
||||
|
||||
const iconSelector: { [key: string]: string } = {
|
||||
prop: "tag",
|
||||
func: "roundbrackets",
|
||||
signal: "powercord",
|
||||
variant: "fourdiamonds",
|
||||
};
|
||||
---
|
||||
<div class={`typedata-title type${typekind}-title`}>
|
||||
<section class={`typedata-name type${typekind}-name`}>
|
||||
{typekind !== "func" && <Icon name={iconSelector[typekind]}/>}
|
||||
<span>{ typename }{ (typekind === "func" || typekind === "signal") ?
|
||||
(<span>(</span><span class="typedata-param">{typedata_params}</span><span>)</span>)
|
||||
:""}
|
||||
</span>
|
||||
{ typekind !== "variant" &&
|
||||
<span class=`type-datatype ${typekind === "signal" && "typesignal-doclink"}`>{typekind !== "signal" &&":"}
|
||||
<a href={typelink}>{ typelink_text }</a>
|
||||
{typename_generic &&
|
||||
(
|
||||
<span class="type-datatype"><</span><a href={typelink_generic}>{typename_generic}</a><span class="type-datatype">></span>
|
||||
)
|
||||
}
|
||||
</span>
|
||||
}
|
||||
</section>
|
||||
<section class="type-badges">
|
||||
{badges && badges.length > 0 ? (
|
||||
badges.map(badgeText => <Badge badgeText={badgeText}/>)
|
||||
) : null}
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import type { QuickshellVariant } from "@config/io/types";
|
||||
import { FourDiamonds } from "../icons";
|
||||
import TypeDetails from "./TypeDetails.astro";
|
||||
import TypeTitle from "./TypeTitle.astro";
|
||||
|
||||
export interface Props {
|
||||
variantKeys: string[];
|
||||
|
|
@ -19,10 +20,12 @@ const { variantKeys, variantsData } = Astro.props;
|
|||
: [];
|
||||
return (
|
||||
<li id={ item } class="typedata-root typevariant-root">
|
||||
<p class="typedata-name typevariant-name">
|
||||
<FourDiamonds client:idle/>
|
||||
{ item }
|
||||
</p>
|
||||
<TypeTitle
|
||||
typekind="variant"
|
||||
typename={item}
|
||||
typelink=""
|
||||
typelink_text=""
|
||||
/>
|
||||
{
|
||||
paramKeys ? (
|
||||
<div class="typedata-params typevariant-params">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue