@knowark/componarkjs 1.7.3

package/showcase/design/screens/base/index.js

@@ -0,0 +1,42 @@
+/** @typedef {import('./root.component').RootComponent} RootComponent */
+import './root.component.js'
+import { setRoutes } from './root.routes.js'
+
+export function hub (parentResolver, prefix) {
+  const resolver = parentResolver.forge({
+    strategy: {
+      RootComponent: {
+        method: 'rootComponent'
+      }
+    },
+    factory: new RootFactory(prefix)
+  })
+
+  const rootComponent = resolver.resolve('RootComponent')
+  setRoutes(resolver, rootComponent, prefix)
+
+  return rootComponent
+}
+
+export class RootFactory {
+  /** @param {string} prefix */
+  constructor (prefix) {
+    RootFactory.prefix = prefix
+    // @ts-ignore
+    this._rootComponent.prefix = prefix
+    // @ts-ignore
+    this._rootComponent.dependencies = []
+  }
+
+  /** @param {string} method */
+  extract (method) {
+    return this[`_${method}`]
+  }
+
+  _rootComponent () {
+    const rootComponent = /** @type {RootComponent} */
+      (document.createElement('app-root'))
+    return rootComponent.init({ path: RootFactory.prefix })
+  }
+}
+RootFactory.prefix = undefined

package/showcase/design/screens/base/list/index.js

@@ -0,0 +1,25 @@
+import { ListDemo } from './listDemo.js'
+
+export function hub (parentResolver) {
+  const resolver = parentResolver.forge({
+    strategy: {
+      ListDemo: {
+        method: 'component'
+      }
+    },
+    factory: new ComponentFactory()
+  })
+
+  return resolver.resolve('ListDemo')
+}
+
+export class ComponentFactory {
+  /** @param {string} method */
+  extract (method) {
+    return this[`_${method}`]
+  }
+
+  _component () {
+    return new ListDemo()
+  }
+}

package/showcase/design/screens/base/list/listDemo.js

@@ -0,0 +1,89 @@
+import { Component } from 'base/component/index.js'
+
+const tag = 'demo-list'
+export class ListDemo extends Component {
+  init (context) {
+    return super.init({})
+  }
+
+  render () {
+    this.innerHTML = /* html */ `
+      <h1>Default List</h1>
+
+      <ark-list background="light" color="dark" data-default-list click-disabled></ark-list>
+
+      <h1>Template List <span data-template-selected></span></h1>
+
+      <ark-list background="light" color="primary"  data-template-list action default
+        listen on-list:selected="onTemplateListSelected"></ark-list>
+    
+      <a 
+        class="reference" 
+        target="_blank" 
+        href="https://github.com/knowark/componark/tree/master/lib/components/list/README.md">
+        * Reference
+      </a>
+    `
+
+    return super.render()
+  }
+
+  load () {
+    const sourceDefault = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+
+    // DEFAULT LIST
+
+    const defaultList = this.select('[data-default-list]')
+    defaultList
+      .init({
+        source: sourceDefault
+      })
+      .render()
+
+    // TEMPLATE LIST
+
+    const sourceTemplate = [
+      { first: 'Colombia', second: 'Argentina', year: 2016 },
+      { first: 'Uruguay', second: 'Colombia', year: 2017 },
+      { first: 'Brasil', second: 'Argentina', year: 2018 },
+      { first: 'Perú', second: 'Bolivia', year: 2019 }
+    ]
+
+    const template = item => /* html */ `
+      <h1>${item.year}</h1>
+      <span data-first>FIRST: ${item.first}</span>
+      <span> | </span>
+      <span data-second>SECOND: ${item.second}</span>
+    `
+
+    const templateList = this.select('[data-template-list]')
+    templateList
+      .init({
+        source: sourceTemplate,
+        template: template
+      })
+      .render()
+
+    return super.load()
+  }
+
+  onTemplateListSelected (event) {
+    const detail = event.detail
+
+    const index = detail.index
+    const data = detail.data
+
+    this.select('[data-template-selected]').innerText = `
+      [${index}]    ${data.year} - ${data.first}
+    `.trim()
+  }
+}
+
+const styles = /* css */`
+  .ark-list{
+    margin-bottom:20px;
+  }
+`
+
+
+Component.define(tag, ListDemo, styles)

package/showcase/design/screens/base/paginator/index.js

@@ -0,0 +1,25 @@
+import { PaginatorDemo } from './paginatorDemo.js'
+
+export function hub (parentResolver) {
+  const resolver = parentResolver.forge({
+    strategy: {
+      PaginatorDemo: {
+        method: 'component'
+      }
+    },
+    factory: new ComponentFactory()
+  })
+
+  return resolver.resolve('PaginatorDemo')
+}
+
+export class ComponentFactory {
+  /** @param {string} method */
+  extract (method) {
+    return this[`_${method}`]
+  }
+
+  _component () {
+    return new PaginatorDemo()
+  }
+}

package/showcase/design/screens/base/paginator/paginatorDemo.js

@@ -0,0 +1,82 @@
+import { Component } from 'base/component/index.js'
+
+const tag = 'demo-paginator'
+export class PaginatorDemo extends Component {
+  init(context = {}) {
+    this.limit = 1
+    this.offset = 0
+    this.page = 1
+    return super.init(context)
+  }
+
+  render() {
+    this.content = /* html */ `
+      <ark-list background="light" color="dark"></ark-list>
+      <ark-paginator listen on-page-changed="onPageChanged" 
+        displayed-pages="4" page-size="1"></ark-paginator>
+
+      <a 
+        target="_blank" 
+        href="https://github.com/knowark/componark/blob/master/lib/components/paginator/README.md" 
+        class="reference">
+      * Reference
+      </a>
+    `
+    return super.render()
+  }
+
+  async load() {
+    const template = (item) => /* html */ `
+    <h1>${item.year}</h1>
+    <span data-first>FIRST: ${item.first}</span>
+    <span> | </span>
+    <span data-second>SECOND: ${item.second}</span>
+    `
+
+    const source = () => {
+      let list = this.list
+      if (this.limit) list = list.slice(0, this.limit)
+      if (this.offset) list = list.slice(this.offset)
+      return list
+    }
+
+    this.select('ark-list')
+      .init({
+        source: source(),
+        template: template,
+      })
+      .render()
+
+    const paginator = this.select('ark-paginator')
+    paginator
+      .init({
+        collectionSize: this.list.length,
+        currentPage: this.page,
+      })
+      .render()
+    return super.load()
+  }
+
+  /** @param {CustomEvent} event */
+  async onPageChanged(event) {
+    event.stopPropagation()
+    this.limit = event.detail.limit
+    this.offset = event.detail.offset
+    this.page = event.detail.page
+    await this.update()
+  }
+
+  get list() {
+    return [
+      { first: 'Colombia', second: 'Argentina', year: 2016 },
+      { first: 'Uruguay', second: 'Colombia', year: 2017 },
+      { first: 'Brasil', second: 'Argentina', year: 2018 },
+      { first: 'Perú', second: 'Bolivia', year: 2019 },
+      { first: 'Argentina', second: 'Argentina', year: 2020 },
+      { first: 'Chile', second: 'Colombia', year: 2021 },
+      { first: 'Colombia', second: 'Argentina', year: 2022 },
+      { first: 'Uruguay', second: 'Bolivia', year: 2023 },
+    ]
+  }
+}
+Component.define(tag, PaginatorDemo)

package/showcase/design/screens/base/root.component.js

@@ -0,0 +1,294 @@
+import { Component } from 'base/component'
+
+// @ts-ignore
+// eslint-disable-next-line no-undef
+export const version = VERSION
+
+const design = process.env.ARK_DESIGN
+
+const tag = 'app-root'
+export class RootComponent extends Component {
+  render() {
+    this.content = /* html */ `
+    <nav class="app-root__navbar">
+      <div class="app-root__menu">
+        <span class="material-icons">
+          list
+        </span>
+      </div>
+      <div class="app-root__brand">
+        <a  href="/">
+          <h1 class="app-root__title">COMPONARK</h1>
+          <p class="app-root__subtitle">web components</p>
+        </a>
+      </div>
+      <div class="app-root__actions"> 
+        <a class="app-root__navitem" href="#">style ${design.toUpperCase()}</a>
+      </div>  
+    </nav>
+    
+    <aside class="app-root__sidebar"> 
+      <div class="${tag}__sidebar-content">
+      ${this.locations
+          .map(
+            (location) => `
+        <a class="app-root__sideitem" href="/${design}${location.path}">
+          ${location.name}
+        </a>
+        `
+          )
+          .join('')}
+      </div>
+    </aside>
+
+    <section class="app-root__content" data-content></section>
+
+    `
+    this.showMenu()
+    return super.render()
+  }
+
+  /** @param {Component} component */
+  setContentComponent(component) {
+    if (!component) return
+    const container = this.select('[data-content]')
+
+    container.firstChild?.remove()
+    container.append(component)
+    component.render().load()
+  }
+
+  /** @param {CustomEvent} event */
+  selectEventListener(event) {
+    event.stopImmediatePropagation()
+    const style = event.detail.value
+  }
+
+  /** @param {CustomEvent} event */
+  onListItemSelected(event) {
+    this.dispatchEvent(
+      new CustomEvent('navigate', {
+        bubbles: true,
+        detail: { path: event.detail.data.path },
+      })
+    )
+  }
+
+  showMenu() {
+    this.querySelector('.app-root__menu').addEventListener('click', () => {
+      this.querySelector('.app-root__sidebar').style.display = 'grid'
+    })
+  }
+
+  get locations() {
+    return [
+      { name: 'Audio', path: '/base/audio' },
+      { name: 'Camera', path: '/base/camera' },
+      { name: 'Droparea', path: '/base/droparea' },
+      { name: 'List', path: '/base/list' },
+      { name: 'Paginator', path: '/base/paginator' },
+      { name: 'Spinner', path: '/base/spinner' },
+      { name: 'SplitView', path: '/base/splitview' },
+      { name: 'Translate', path: '/base/translate' },
+    ]
+  }
+}
+
+const styles = /* css */ `
+
+html {
+  height: 100%;
+  height: -webkit-fill-available;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #eff3f8;
+  height: 100%;
+}
+
+:root {
+  /*
+  --primary: #1976d2;
+  --secondary: orange;
+  --success: green;
+  --danger: red;
+  --warning: yellow;
+  --info: cyan;
+  --dark: black;
+  --muted: gray;
+  --light: lightgray;
+  */
+  --xs: 0.3rem;
+  --sm: 0.8rem;
+  --md: 1rem;
+  --lg: 2rem;
+  --xl: 3rem;
+}
+
+.${tag} {
+  display: grid;
+  height: 100%;
+  grid-template-rows: 0.05fr 1fr;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  letter-spacing: 0.02em;
+}
+
+.${tag}__navbar {
+  grid-column: 1 / 13;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  background-color: rgb(0 30 61);
+  color: #00ffff;
+  text-decoration: none
+  overflow: hidden;
+  border-bottom:4px solid rgb(160 255 255 / 53%);
+  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+}
+
+.${tag} .material-icons {
+  font-size: 2.5rem;
+}
+
+.${tag}__navitem {
+  text-decoration: none;
+  padding: 2vw;
+  color: cyan;
+  height:auto;
+}
+
+.${tag}__sideitems {
+  display: flex;
+  flex-direction: column;
+}
+
+.${tag}__navitem,
+.${tag}__sideitem {
+  transition: background 0.1s ease;
+}
+
+.${tag}__navitem:hover,
+.${tag}__sideitem:hover {
+  background-color: rgb(38 54 70);
+  color: cyan;
+}
+.${tag}__navitem:active,
+.${tag}__sideitem:active {
+  background-color: rgb(239, 243, 248);
+  color: cyan;
+}
+.${tag}__navitem:hover, .app-root__sideitem:hover {
+  background-color: rgb(131 170 209);
+    color: rgb(0 1 2);
+    font-weight: bold;
+}
+
+.${tag}__brand {
+  display: grid;
+  align-items: center;
+  padding: 0 1rem;
+  height: 100%;
+  width: fit-content;
+  justify-self: start;
+}
+
+.${tag}__brand a {
+  text-decoration: none;
+  text-align: center;
+  margin: 0;
+  color: white;
+  transition: .1s;
+}
+
+.${tag}__brand:hover a {
+  color: rgb(0, 255, 255);
+  transition: .1s;
+}
+
+
+.${tag}__actions {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-items: center;
+  grid-column: 6;
+}
+
+.${tag}__title {
+  all: inherit;
+  font-weight: 700;
+  font-size: 1.3rem;
+}
+
+.${tag}__subtitle {
+  all: inherit;
+  font-size:0.9rem;
+  font-weight: 300;
+  text-align:center;
+}
+
+.${tag}__sidebar {
+  display: grid;
+  height: 100%;
+  width: 240px;
+  grid-row: 2 / -1;
+  background-color: #001e3d;
+  color: #00ffff;
+  text-decoration: none;
+  overflow-x: hidden;
+}
+
+.${tag}__sidebar-content {
+  display: inherit;
+}
+
+.${tag}__navbar-brand {
+  display: none;
+}
+
+.${tag}__sideitem {
+  text-decoration: none;
+  padding: 1vw;
+  color: rgb(160 255 255);
+  border-bottom: 1px solid #8080801c;
+}
+
+.${tag}__menu {
+  display: none;
+  text-align:center;
+  user-select: none;
+  cursor: pointer;
+}
+
+.${tag}__content {
+  grid-area: 2 / 2 / auto / 13;
+  padding: 2vmin;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+@media only screen and (max-width: 800px) {
+  .${tag}__sidebar {
+    display: none;
+    position: absolute;
+    z-index: 1000;
+    width: 150px;
+  }
+
+  .${tag}__menu {
+    display: grid;
+  }
+
+  .${tag}__content {
+    grid-area: 2 / 1 / auto / 13;
+  }
+
+  .${tag}__brand {
+    grid-column: 3 / 5;
+    justify-self: center;
+  }
+
+}
+`
+Component.define(tag, RootComponent, styles)

package/showcase/design/screens/base/root.routes.js

@@ -0,0 +1,28 @@
+export function setRoutes(resolver, rootComponent, prefix) {
+  /** @param {string} path @returns {{ path: string, action: function }} */
+  function getComponentRoute(path, dependencies = []) {
+    return {
+      path: path,
+      action: async () => {
+        for (const dependency of dependencies) {
+          await import(`components/${dependency}/index.js`)
+        }
+        await import(`components/${path}/index.js`)
+        const module = await import(`./${path}/index.js`)
+        rootComponent.setContentComponent(module.hub(resolver))
+      },
+    }
+  }
+
+  const router = resolver.resolve('Router')
+  router.addRoutes(prefix, [
+    getComponentRoute('audio'),
+    getComponentRoute('camera'),
+    getComponentRoute('droparea'),
+    getComponentRoute('list'),
+    getComponentRoute('paginator', ['list']),
+    getComponentRoute('spinner'),
+    getComponentRoute('splitview', ['list']),
+    getComponentRoute('translate'),
+  ])
+}

package/showcase/design/screens/base/spinner/index.js

@@ -0,0 +1,25 @@
+import { SpinnerDemo } from './spinnerDemo.js'
+
+export function hub (parentResolver) {
+  const resolver = parentResolver.forge({
+    strategy: {
+      SpinnerDemo: {
+        method: 'component'
+      }
+    },
+    factory: new ComponentFactory()
+  })
+
+  return resolver.resolve('SpinnerDemo')
+}
+
+export class ComponentFactory {
+  /** @param {string} method */
+  extract (method) {
+    return this[`_${method}`]
+  }
+
+  _component () {
+    return new SpinnerDemo()
+  }
+}

package/showcase/design/screens/base/spinner/spinnerDemo.js

@@ -0,0 +1,55 @@
+import { Component } from 'base/component/index.js'
+
+const tag = 'demo-spinner'
+export class SpinnerDemo extends Component {
+  init(context) {
+    return super.init()
+  }
+
+  render() {
+    this.content = /* html */ `
+      <h1>spinner</h1>
+
+      <div class="spinner-container">
+        <div>
+          <ark-spinner></ark-spinner>
+          <p style="margin-top:16px">circle</p>
+        </div>
+        <div>
+          <ark-spinner scale="1.5" type="chase"></ark-spinner>
+          <p style="margin-top:16px">chase</p>
+        </div>
+        <div>
+          <ark-spinner type="rect"></ark-spinner>
+          <p style="margin-top:16px">rect</p>
+        </div>
+        <div>
+          <ark-spinner type="bounce"></ark-spinner>
+          <p style="margin-top:16px">bounce</p>
+        </div>
+        <div>
+          <ark-spinner type="loader"></ark-spinner>
+          <p style="margin-top:16px">loader</p>
+        </div>
+      </div>
+
+      <a 
+        target="_blank" href="https://github.com/knowark/componark/blob/master/lib/components/spinner/README.md">
+      * Reference
+      </a>
+    `
+    return super.render()
+  }
+}
+
+const styles = /* css */`
+.spinner-container{
+  display: flex;
+  gap:1.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+`
+Component.define(tag, SpinnerDemo, styles)

package/showcase/design/screens/base/splitview/detailDemo.js

@@ -0,0 +1,40 @@
+import { Component } from "base/component/index.js"
+
+const tag = "demo-splitview-detail"
+
+export class SplitviewDetailDemo extends Component {
+  init(context = {}) {
+    if (!context.data) return super.init()
+
+    const data = context.data
+    this.first = data.first
+    this.second = data.second
+    this.year = data.year
+    return super.init()
+  }
+
+  render() {
+    this.content = this.first
+      ? /* html */ `
+      <button listen on-click="onClick"
+        style="margin:8px; --display-large:none;"
+        >Close</button>
+        <h1>${this.year}</h1>
+        <p>
+          <span data-first>FIRST: ${this.first}</span>
+          <span> | </span>
+          <span data-second>SECOND: ${this.second}</span>
+        </p>
+      `
+      : /* html */ `
+        <h1>Ark Detail Example</h1>
+      `
+    return super.render()
+  }
+
+  onClick (event) {
+    event.stopPropagation()
+    this.emit('close')
+  }
+}
+Component.define(tag, SplitviewDetailDemo)