change pkg
This commit is contained in:
yehuozhili
37
packages/dooringx-doc/src/lib/Button/index.svelte
Normal file
37
packages/dooringx-doc/src/lib/Button/index.svelte
Normal file
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
export let href = '';
|
||||
export let color = '#4d5164';
|
||||
let backgroundColor = 'white';
|
||||
export let style = '';
|
||||
export let onClick = () => {};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="yh-btn"
|
||||
style={`color: ${color} ; background-color:${backgroundColor};${style} `}
|
||||
on:click={() => {
|
||||
if (href !== '') {
|
||||
location.href = href;
|
||||
}
|
||||
onClick();
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
.yh-btn {
|
||||
border: none;
|
||||
transition: all 0.3s linear;
|
||||
padding: 5px 20px;
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: none;
|
||||
outline-width: 0;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
177
packages/dooringx-doc/src/lib/DocRender/index.svelte
Normal file
177
packages/dooringx-doc/src/lib/DocRender/index.svelte
Normal file
@@ -0,0 +1,177 @@
|
||||
<script lang="ts">
|
||||
import type { MarkDownItemProps } from 'src/routes/docs/_api';
|
||||
import './prism.css';
|
||||
export let sections: Map<string, MarkDownItemProps[]>;
|
||||
let arr = [];
|
||||
$: arr = Array.from(sections.keys());
|
||||
export let active = '';
|
||||
</script>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div class="sidebar">
|
||||
{#each arr as stitle}
|
||||
{#if stitle !== 'default'}
|
||||
<div
|
||||
class={`stitle ahref fbold ${active === stitle ? 'active' : ''}`}
|
||||
style="cursor: pointer;"
|
||||
title={stitle}
|
||||
on:click={() => {
|
||||
location.href = `#${stitle}`;
|
||||
active = stitle;
|
||||
}}
|
||||
>
|
||||
{@html stitle}
|
||||
</div>
|
||||
{#each sections.get(stitle) as section}
|
||||
<div class="title-item" style="cursor: pointer;">
|
||||
<span
|
||||
class={`ahref ${active === section.metadata.title ? 'active' : ''}`}
|
||||
on:click={() => {
|
||||
location.href = `#${section.slug}`;
|
||||
active = section.metadata.title;
|
||||
}}
|
||||
title={section.metadata.title}
|
||||
>
|
||||
{@html section.metadata.title}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if stitle === 'default'}
|
||||
{#each sections.get(stitle) as section}
|
||||
<!-- 没有主标题则二级变一级 -->
|
||||
<div class="stitle fbold" style="cursor: pointer;">
|
||||
<span
|
||||
class={`ahref ${active === section.metadata.title ? 'active' : ''}`}
|
||||
on:click={() => {
|
||||
location.href = `#${section.slug}`;
|
||||
active = section.metadata.title;
|
||||
}}
|
||||
title={section.metadata.title}
|
||||
>
|
||||
{@html section.metadata.title}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<div class="markdown-wrapper">
|
||||
{#each arr as stitle}
|
||||
{#if stitle !== 'default'}
|
||||
<h1 class="stitle-content" id={stitle}>
|
||||
{@html stitle}
|
||||
</h1>
|
||||
<div class="yh-interval-s" />
|
||||
{/if}
|
||||
{#each sections.get(stitle) as section}
|
||||
<section data-id={section.slug}>
|
||||
<h2>
|
||||
<span class="offset-anchor" id={section.slug} />
|
||||
{@html section.metadata.title}
|
||||
</h2>
|
||||
|
||||
{@html section.html}
|
||||
</section>
|
||||
<div class="yh-interval" />
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.yh-interval-s {
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
}
|
||||
.yh-interval {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
.markdown-wrapper {
|
||||
height: calc(100vh - 40px);
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fbold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.sidebar {
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
height: calc(100vh - 40px);
|
||||
border-right: 1px solid #eee;
|
||||
width: 300px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
|
||||
Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji,
|
||||
Segoe UI Emoji, Segoe UI Symbol;
|
||||
.ahref {
|
||||
text-decoration: none;
|
||||
color: #717484;
|
||||
&:hover {
|
||||
color: #4569d4;
|
||||
}
|
||||
&:visited,
|
||||
&:link,
|
||||
&:active {
|
||||
color: #717484;
|
||||
}
|
||||
}
|
||||
.stitle {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.title-item {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin: 20px 0 20px 20px;
|
||||
|
||||
& ::selection {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #4569d4;
|
||||
}
|
||||
}
|
||||
section :global(blockquote) {
|
||||
color: hsl(204, 100%, 50%);
|
||||
border: 2px solid var(--flash);
|
||||
}
|
||||
section :global(blockquote) :global(code) {
|
||||
background: hsl(204, 100%, 95%) !important;
|
||||
color: hsl(204, 100%, 50%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /*对垂直流动条有效*/
|
||||
height: 5px; /*对水平流动条有效*/
|
||||
}
|
||||
|
||||
/*定义滚动条的轨道颜色、内阴影及圆角*/
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*定义滑块颜色、内阴影及圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 7px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #444444;
|
||||
}
|
||||
|
||||
/*定义两端按钮的样式*/
|
||||
::-webkit-scrollbar-button {
|
||||
background-color: #b9c6d2;
|
||||
}
|
||||
|
||||
/*定义右下角汇合处的样式*/
|
||||
::-webkit-scrollbar-corner {
|
||||
background: #b9c6d2;
|
||||
}
|
||||
</style>
|
||||
120
packages/dooringx-doc/src/lib/DocRender/prism.css
Normal file
120
packages/dooringx-doc/src/lib/DocRender/prism.css
Normal file
@@ -0,0 +1,120 @@
|
||||
/*
|
||||
-----------------------------------------------
|
||||
syntax-highlighting [prism]
|
||||
-----------------------------------------------
|
||||
*/
|
||||
|
||||
/* colors --------------------------------- */
|
||||
pre[class*='language-'] {
|
||||
--background: var(--back-light);
|
||||
--base: #545454;
|
||||
--comment: #696969;
|
||||
--keyword: #007f8a;
|
||||
--function: #bb5525;
|
||||
--string: #856e3d;
|
||||
--number: #008000;
|
||||
--tags: var(--function);
|
||||
--important: var(--string);
|
||||
}
|
||||
|
||||
/* type-base ------------------------------ */
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: none;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
font: 300 var(--code-fs) / 1.7 var(--font-mono);
|
||||
color: var(--base);
|
||||
tab-size: 2;
|
||||
-moz-tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* code-blocks ---------------------------- */
|
||||
pre[class*='language-'] {
|
||||
overflow: auto;
|
||||
padding: 1.5rem 2rem;
|
||||
margin: 0.8rem 0 2.4rem;
|
||||
/* max-width: var(--code-w); */
|
||||
border-radius: var(--border-r);
|
||||
box-shadow: 1px 1px 1px rgba(68, 68, 68, 0.12) inset;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* tokens --------------------------------- */
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: var(--comment);
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: var(--base);
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: var(--tags);
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: var(--number);
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: var(--string);
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: var(--base);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: var(--function);
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: var(--keyword);
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: var(--important);
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
85
packages/dooringx-doc/src/lib/Header/index.svelte
Normal file
85
packages/dooringx-doc/src/lib/Header/index.svelte
Normal file
@@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { base } from '$app/paths';
|
||||
import Button from '../Button/index.svelte';
|
||||
import Switch from '../Switch/index.svelte';
|
||||
import logo from './svelte-logo.svg';
|
||||
import { getContext } from 'svelte';
|
||||
import type { Writable } from 'svelte/store';
|
||||
const lang = getContext<Writable<string>>('lang');
|
||||
let checked = true;
|
||||
lang.subscribe((value) => {
|
||||
value === 'cn' ? (checked = true) : (checked = false);
|
||||
});
|
||||
const home = base + '/';
|
||||
const docs = base + '/docs';
|
||||
const api = base + '/api';
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<div class="corner">
|
||||
<img src={logo} alt="SvelteKit" />
|
||||
</div>
|
||||
|
||||
<nav style="width: 100%;">
|
||||
<div class="nav-item-wrapper">
|
||||
<div class:active={$page.path === '/'}>
|
||||
<Button href={home} color={$page.path === '/' ? '#4569d4' : '#4d5164'}>首页</Button>
|
||||
</div>
|
||||
<div class:active={$page.path === '/docs'}>
|
||||
<Button href={docs} color={$page.path === '/docs' ? '#4569d4' : '#4d5164'}>文档</Button>
|
||||
</div>
|
||||
<div class:active={$page.path === '/api'}>
|
||||
<Button href={api} color={$page.path === '/api' ? '#4569d4' : '#4d5164'}>API</Button>
|
||||
</div>
|
||||
<div class:active={$page.path === '/about'}>
|
||||
<Button>Github</Button>
|
||||
</div>
|
||||
|
||||
<Switch
|
||||
{checked}
|
||||
onChange={() => {
|
||||
lang.update((pre) => {
|
||||
return pre === 'cn' ? 'en' : 'cn';
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style lang="scss">
|
||||
$height: 40px;
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
|
||||
Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji,
|
||||
Segoe UI Emoji, Segoe UI Symbol;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
}
|
||||
.active {
|
||||
color: #4569d4;
|
||||
}
|
||||
.corner {
|
||||
height: $height;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 20px;
|
||||
img {
|
||||
width: $height - 5px;
|
||||
height: $height - 5px;
|
||||
}
|
||||
}
|
||||
.nav-item-wrapper {
|
||||
height: $height;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
:nth-last-child(1) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
packages/dooringx-doc/src/lib/Header/svelte-logo.svg
Normal file
1
packages/dooringx-doc/src/lib/Header/svelte-logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
32
packages/dooringx-doc/src/lib/Icon/index.svelte
Normal file
32
packages/dooringx-doc/src/lib/Icon/index.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<!--
|
||||
-----------------------------------------------
|
||||
svg icon
|
||||
- https://github.com/jacobmischka/svelte-feather-icon
|
||||
- https://feathericons.com/
|
||||
-----------------------------------------------
|
||||
-->
|
||||
<script>
|
||||
export let name;
|
||||
export let size = 20;
|
||||
</script>
|
||||
|
||||
<svg class="icon" width={size} height={size}>
|
||||
<use xlink:href="#{name}" />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
.icon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
123
packages/dooringx-doc/src/lib/Icons/index.svelte
Normal file
123
packages/dooringx-doc/src/lib/Icons/index.svelte
Normal file
@@ -0,0 +1,123 @@
|
||||
<div style="display: none">
|
||||
<!-- wrapper div allows use of innerHTML -->
|
||||
<svg>
|
||||
<symbol id="arrow-left" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="19" y1="12" x2="5" y2="12" />
|
||||
<polyline points="12 19 5 12 12 5" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="arrow-right" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="arrow-up" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="12" y1="19" x2="12" y2="5" />
|
||||
<polyline points="5 12 12 5 19 12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="arrow-down" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<polyline points="19 12 12 19 5 12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="check" class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="close" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="download" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15" />
|
||||
<polyline points="7 10 12 15 17 10" />
|
||||
<line x1="12" y1="15" x2="12" y2="3" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="edit" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34" />
|
||||
<polygon points="18 2 22 6 12 16 8 16 8 12 18 2" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="github" class="icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
|
||||
/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="git-branch" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="6" y1="3" x2="6" y2="15" />
|
||||
<circle cx="18" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M18 9a9 9 0 0 1-9 9" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="log-in" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15" />
|
||||
<polyline points="10 17 15 12 10 7" />
|
||||
<line x1="15" y1="12" x2="3" y2="12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="maximize" class="icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
|
||||
/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="maximize-2" class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="15 3 21 3 21 9" />
|
||||
<polyline points="9 21 3 21 3 15" />
|
||||
<line x1="21" y1="3" x2="14" y2="10" />
|
||||
<line x1="3" y1="21" x2="10" y2="14" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="menu" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="message-square" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="minus" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="plus" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="save" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
|
||||
<polyline points="17 21 17 13 7 13 7 21" />
|
||||
<polyline points="7 3 7 8 15 8" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="link" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17" />
|
||||
<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17" />
|
||||
<path d="M7,12L17,12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="chevron" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M2,7 L12,17 L20,7" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="404" class="icon" viewBox="0 0 128 128">
|
||||
<path
|
||||
d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 01-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 012.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 00-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 00-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 01-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 01-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 01-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 00.665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="user" class="icon" viewBox="0 0 130 130">
|
||||
<path
|
||||
d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z"
|
||||
stroke="#979797"
|
||||
/>
|
||||
</symbol>
|
||||
</svg>
|
||||
</div>
|
||||
89
packages/dooringx-doc/src/lib/Switch/index.svelte
Normal file
89
packages/dooringx-doc/src/lib/Switch/index.svelte
Normal file
@@ -0,0 +1,89 @@
|
||||
<script lang="ts">
|
||||
export let checked = true;
|
||||
export let disabled = false;
|
||||
export let onChange = () => {
|
||||
checked = !checked;
|
||||
};
|
||||
export let unCheckText = 'EN';
|
||||
export let checkText = '中文';
|
||||
</script>
|
||||
|
||||
<label class="yh-switch-label">
|
||||
<input
|
||||
class="yh-swtich-input"
|
||||
type="checkbox"
|
||||
{checked}
|
||||
{disabled}
|
||||
on:change={() => {
|
||||
onChange();
|
||||
}}
|
||||
/>
|
||||
<span class={`yh-switch-sp1`}>
|
||||
{#if !checked}
|
||||
<span class="yh-switch-sp1-uncheck">
|
||||
{unCheckText}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="yh-switch-sp1-check">
|
||||
{checkText}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class={`yh-switch-sp2 ${checked ? 'right' : ''}`} />
|
||||
</label>
|
||||
|
||||
<style lang="scss">
|
||||
.yh-switch-label {
|
||||
height: 22.5px;
|
||||
width: 60px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.yh-swtich-input {
|
||||
opacity: 0;
|
||||
}
|
||||
.yh-switch-sp1 {
|
||||
background: #fff;
|
||||
box-shadow: inset 2px 2px 4px #d9d9d9, inset -2px -2px 4px #fff, 2px 2px 4px #d9d9d9;
|
||||
color: #595959;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
padding: 1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
border-radius: 60px;
|
||||
&-uncheck {
|
||||
font-size: 10px;
|
||||
top: 7px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
&-check {
|
||||
font-size: 10px;
|
||||
left: 10px;
|
||||
top: 7px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.yh-switch-sp2 {
|
||||
height: 22.5px;
|
||||
width: 22.5px;
|
||||
background: #fff;
|
||||
border: none;
|
||||
box-shadow: 2px 2px 4px #d9d9d9;
|
||||
text-shadow: 1px 1px 4px #d9d9d9, -1px -1px 4px #fff;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
&.right {
|
||||
left: calc(100% - 22.5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
packages/dooringx-doc/src/lib/form.ts
Normal file
60
packages/dooringx-doc/src/lib/form.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
// this action (https://svelte.dev/tutorial/actions) allows us to
|
||||
// progressively enhance a <form> that already works without JS
|
||||
export function enhance(
|
||||
form: HTMLFormElement,
|
||||
{
|
||||
pending,
|
||||
error,
|
||||
result,
|
||||
}: {
|
||||
pending?: (data: FormData, form: HTMLFormElement) => void;
|
||||
error?: (res: Response, error: Error, form: HTMLFormElement) => void;
|
||||
result: (res: Response, form: HTMLFormElement) => void;
|
||||
}
|
||||
) {
|
||||
let current_token: {};
|
||||
|
||||
async function handle_submit(e: Event) {
|
||||
const token = (current_token = {});
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const body = new FormData(form);
|
||||
|
||||
if (pending) pending(body, form);
|
||||
|
||||
try {
|
||||
const res = await fetch(form.action, {
|
||||
method: form.method,
|
||||
headers: {
|
||||
accept: 'application/json',
|
||||
},
|
||||
body,
|
||||
});
|
||||
|
||||
if (token !== current_token) return;
|
||||
|
||||
if (res.ok) {
|
||||
result(res, form);
|
||||
} else if (error) {
|
||||
error(res, null, form);
|
||||
} else {
|
||||
console.error(await res.text());
|
||||
}
|
||||
} catch (e) {
|
||||
if (error) {
|
||||
error(null, e, form);
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.addEventListener('submit', handle_submit);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
form.removeEventListener('submit', handle_submit);
|
||||
},
|
||||
};
|
||||
}
|
||||
7
packages/dooringx-doc/src/lib/types.d.ts
vendored
Normal file
7
packages/dooringx-doc/src/lib/types.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Can be made globally available by placing this
|
||||
* inside `global.d.ts` and removing `export` keyword
|
||||
*/
|
||||
export interface Locals {
|
||||
userid: string;
|
||||
}
|
||||
Reference in New Issue
Block a user