mirror of https://github.com/requarks/wiki
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
2.2 KiB
110 lines
2.2 KiB
import { LitElement, html, css } from 'lit'
|
|
import treeQuery from './folderByPath.graphql'
|
|
|
|
/**
|
|
* Block Index
|
|
*/
|
|
export class BlockIndexElement extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
display: block;
|
|
margin-bottom: 16px;
|
|
}
|
|
:host-context(body.body--dark) {
|
|
background-color: #F00;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
background-color: #fafafa;
|
|
background-image: linear-gradient(180deg,#fff,#fafafa);
|
|
border-right: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
border-left: 5px solid #e0e0e0;
|
|
box-shadow: 0 3px 8px 0 rgba(116,129,141,.1);
|
|
padding: 0;
|
|
border-radius: 5px;
|
|
font-weight: 500;
|
|
}
|
|
li:hover {
|
|
background-image: linear-gradient(180deg,#fff,#f6fbfe);
|
|
border-left-color: #2196f3;
|
|
cursor: pointer;
|
|
}
|
|
li + li {
|
|
margin-top: .5rem;
|
|
}
|
|
li a {
|
|
display: block;
|
|
color: #1976d2;
|
|
padding: 1rem;
|
|
text-decoration: none;
|
|
}
|
|
`
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
/**
|
|
* The base path to fetch pages from
|
|
* @type {string}
|
|
*/
|
|
path: {type: String},
|
|
|
|
/**
|
|
* A comma-separated list of tags to filter with
|
|
* @type {string}
|
|
*/
|
|
tags: {type: String},
|
|
|
|
/**
|
|
* The maximum number of items to fetch
|
|
* @type {number}
|
|
*/
|
|
limit: {type: Number}
|
|
}
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.pages = []
|
|
}
|
|
|
|
async connectedCallback() {
|
|
super.connectedCallback()
|
|
const resp = await APOLLO_CLIENT.query({
|
|
query: treeQuery,
|
|
variables: {
|
|
siteId: WIKI_STORES.site.id,
|
|
locale: 'en',
|
|
parentPath: ''
|
|
}
|
|
})
|
|
this.pages = resp.data.tree
|
|
this.requestUpdate()
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<ul>
|
|
${this.pages.map(p =>
|
|
html`<li><a href="#">${p.title}</a></li>`
|
|
)}
|
|
</ul>
|
|
<slot></slot>
|
|
`
|
|
}
|
|
|
|
// createRenderRoot() {
|
|
// return this;
|
|
// }
|
|
}
|
|
|
|
window.customElements.define('block-index', BlockIndexElement)
|