kempo 4.2.4 → 4.2.7

package/src/components/Tabs.js

@@ -1,349 +0,0 @@
-import Component from './Component.js';
-import {
-  dispatchEvent
-} from '../utils/element.js';
-
-
-export class Tabs extends Component {
-  constructor(){
-    super();
-    this.registerAttributes({
-      active: '',
-      fixedHeight: false
-    });
-  }
-
-  async connectedCallback(){
-    await super.connectedCallback();
-    if(!this.active){
-      this.active = `${this.querySelectorAll('k-tab-content')[0].name}`;
-    }
-
-    const tabsContainer = this.shadowRoot.getElementById('tabs');
-    tabsContainer.addEventListener('scroll', this.updateScrollIndicators.bind(this));
-    this.updateScrollIndicators();
-
-    new ResizeObserver(() => this.updateScrollIndicators()).observe(tabsContainer);
-
-    const leftButton = this.shadowRoot.getElementById('scroll-left');
-    const rightButton = this.shadowRoot.getElementById('scroll-right');
-
-    leftButton.addEventListener('click', () => {
-      tabsContainer.scrollBy({ left: -200, behavior: 'smooth' });
-    });
-    rightButton.addEventListener('click', () => {
-      tabsContainer.scrollBy({ left: 200, behavior: 'smooth' });
-    });
-  }
-
-  updateScrollIndicators() {
-    const tabsContainer = this.shadowRoot.getElementById('tabs');
-    const leftIndicator = this.shadowRoot.getElementById('scroll-left');
-    const rightIndicator = this.shadowRoot.getElementById('scroll-right');
-    
-    const hasLeftScroll = tabsContainer.scrollLeft > 0;
-    const hasRightScroll = tabsContainer.scrollLeft < (tabsContainer.scrollWidth - tabsContainer.clientWidth);
-    
-    leftIndicator.classList.toggle('visible', hasLeftScroll);
-    rightIndicator.classList.toggle('visible', hasRightScroll);
-  }
-
-  attributeChangedCallback(n, oV, nV){
-    if(n === 'active'){
-      const $activeTab = this.getActiveTab();
-      if($activeTab) $activeTab.active = false;
-      const $activeContent = this.getActiveContent();
-      if($activeContent) $activeContent.active = false;
-      const $tab = this.getTab(nV);
-      if($tab) $tab.active = true;
-      const $content = this.getContent(nV);
-      if($content) $content.active = true;
-      dispatchEvent(this, 'tab', { tab: nV });
-    }
-  }
-
-  get contents(){
-    return [...this.querySelectorAll(':scope > k-tab-content')];
-  }
-  get tabs(){
-    return [...this.querySelectorAll(':scope > k-tab')];
-  }
-
-  getTab(id){
-    let $tab;
-    if(typeof(id) === 'string'){
-      $tab = this.querySelector(`k-tab[for="${id}"]`);
-    }
-    if(!$tab){
-      let index = parseInt(id);
-      if(!index) index = 0;
-      $tab = this.querySelectorAll('k-tab')[index];
-    }
-    return $tab;
-  }
-  getActiveTab(){
-    return this.querySelector(':scope > k-tab[active="true"]');
-  }
-  getContent(id){
-    let $content;
-    if(typeof(id) === 'string'){
-      $content = this.querySelector(`k-tab-content[name="${id}"]`);
-    }
-    if(!$content){
-      let index = parseInt(id);
-      if(!index) index = 0;
-      $content = this.querySelectorAll('k-tab-content')[index];
-    }
-    return $content;
-  }
-  getActiveContent(){
-    return this.querySelector(':scope > k-tab-content[active="true"]');
-  } 
-
-  get shadowTemplate(){
-    return /*html*/`
-      <div id="wrapper">
-        <div id="tabs-container">
-          <div id="scroll-left" class="scroll-indicator">
-            <svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <path d="M12 15L7 10L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-          </div>
-          <div id="tabs">
-            <slot name="tabs"></slot>
-          </div>
-          <div id="scroll-right" class="scroll-indicator">
-            <svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <path d="M8 15L13 10L8 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-          </div>
-        </div>
-        <div id="contents">
-          ${super.shadowTemplate}
-        </div>
-      </div>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: block;
-        width: 100%;
-      }
-      #wrapper {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        min-width: 0;
-      }
-      #tabs-container {
-        position: relative;
-        border-bottom: 1px solid var(--c_border);
-      }
-      #tabs {
-        display: flex;
-        overflow-x: auto;
-        overflow-y: hidden;
-      }
-      #tabs ::slotted(*) {
-        flex: 0 0 auto;
-      }
-      .scroll-indicator {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 72px;
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 0.2s;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        padding-bottom: 2px;
-      }
-      .scroll-indicator .arrow {
-        color: var(--tc_base);
-        z-index: 1;
-      }
-      .scroll-indicator.visible {
-        opacity: 1;
-      }
-      #scroll-left {
-        left: 0;
-        background: linear-gradient(90deg, 
-          var(--c_bg) 0%,
-          var(--c_bg) 30%,
-          transparent 100%
-        );
-      }
-      #scroll-right {
-        right: 0;
-        justify-content: flex-end;
-        background: linear-gradient(-90deg, 
-          var(--c_bg) 0%,
-          var(--c_bg) 30%,
-          transparent 100%
-        );
-      }
-      :host([fixed-height="true"]) #wrapper {
-        height: 100%;
-      }
-      :host([fixed-height="true"]) #contents {
-        height: 100%;
-        flex: 1;
-        min-height: 1.35rem;
-        overflow: auto;
-      }
-    `;
-  }
-
-  static observedAttributes = [...super.observedAttributes, 'active'];
-}
-window.customElements.define('k-tabs', Tabs);
-
-const clickHandler = Symbol();
-export class Tab extends Component {
-  constructor(){
-    super();
-
-    /* Private Methods */
-    this[clickHandler] = () => {
-      if(!this.active){
-        this.tabs.active = this.for;
-      }
-    }
-
-    /* Init */
-    this.slot = 'tabs';
-    this.registerAttribute('active', false);
-  }
-
-  connectedCallback(){
-    super.connectedCallback();
-    this.shadowRoot.getElementById('button').addEventListener('click', this[clickHandler]);
-  }
-
-  get for(){
-    const forValue = this.getAttribute('for');
-    if(forValue) return forValue;
-    return this?.tabs.tabs.indexOf(this);
-  }
-  set for(v){
-    if(v){
-      this.setAttribute('for', v);
-    } else {
-      this.removeAttribute('for');
-    }
-  }
-
-  get tabs(){
-    return this.parentElement.tagName === 'K-TABS'?this.parentElement:null;
-  }
-
-  get shadowTemplate(){
-    return /*html*/`
-      <button id="button">
-        ${super.shadowTemplate}
-      </button>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      :host {
-        margin-bottom: -1px;
-        flex: 0 0 auto;  /* Important: prevent shrinking and growing */
-      }
-      #button {
-        padding: var(--spacer_h);
-        background-color: transparent;
-        border: none;
-        cursor: inherit;
-        box-shadow: none;
-        color: inherit;
-        white-space: nowrap;  /* Prevent text wrapping */
-      }
-      :host(:not([active])) #button {
-        cursor: pointer;
-      }
-      :host([active]){
-        border-bottom: 2px solid var(--c_primary);
-        margin-bottom: -1px;
-      }
-      :host([active]) #button {
-        color: var(--tc_primary);
-      }
-    `;
-  }
-
-}
-window.customElements.define('k-tab', Tab);
-
-export class TabContent extends Component {
-  constructor(){
-    super();
-
-    this.registerAttribute('active', false);
-  }
-
-  get tabs(){
-    return this.parentElement.tagName === 'K-TABS'?this.parentElement:null;
-  }
-  get name(){
-    const name = this.getAttribute('name');
-    if(name) return name;
-    return this?.tabs.contents.indexOf(this);
-  }
-  set name(v){
-    if(v){
-      this.setAttribute('name', v);
-    } else {
-      this.removeAttribute('name');
-    }
-  }
-
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: block;
-        height: 100%;
-        max-height: 100%;
-        flex: 1 1 auto;
-        overflow: auto;
-      }
-      :host([active]) {
-        display: block;
-      }
-      :host(:not([active])) {
-        display: none;
-      }
-    `;
-  }
-}
-window.customElements.define('k-tab-content', TabContent);
-
-export class TabSpacer extends Component {
-  constructor(){
-    super();
-    this.slot = 'tabs';
-  }
-
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        flex: 1 1 auto !important;
-        height: 1px;
-      }
-    `;
-  }
-}
-window.customElements.define('k-tab-spacer', TabSpacer);
-
-export default {
-  Tab,
-  TabContent,
-  Tabs,
-  TabSpacer
-}

package/src/components/Tags.js

@@ -1,224 +0,0 @@
-import Component from './Component.js';
-import {
-  onEvent,
-  offEvent,
-  dispatchEvent
-} from '../utils/element.js';
-
-const tagsInputChangeHandler = Symbol(),
-      tagsInputCommaHandler = Symbol();
-export default class Tags extends Component {
-  constructor(){
-    super();
-
-    this[tagsInputChangeHandler] = () => {
-      const $tagsInput = this.shadowRoot.getElementById('tagsInput');
-      const tag = $tagsInput.value;
-      if(tag){
-        this.addTag(tag);
-        $tagsInput.value = '';
-      }
-    }
-    this[tagsInputCommaHandler] = (event) => {
-      if(event.data === ',' || event.inputType === 'insertFromPaste'){
-        const $tagsInput = this.shadowRoot.getElementById('tagsInput');
-        const tags = $tagsInput.value.split(',').filter(i=>!!i);
-        if(tags.length){
-          tags.forEach(tag=>this.addTag(tag));
-          $tagsInput.value = '';
-        }
-      }
-    }
-
-    this.registerAttributes({
-      value: '',
-      allowedTags: '',
-      disallowedTags: ''
-    });
-  }
-  attributeChangedCallback(name, oldValue, newValue){
-    super.attributeChangedCallback(name, oldValue, newValue);
-    if(name === 'value'){
-      const validTags = this.validateTags();
-      if(validTags !== newValue){
-        this.value = validTags;
-      } else {
-        dispatchEvent(this, 'change', {
-          oldValue,
-          newValue
-        });
-        this.renderTags();
-      }
-    } else if(['allowed-tags', 'disallowed-tags'].includes(name)){
-      const validTags = this.validateTags();
-      if(validTags !== newValue){
-        this.value = validTags;
-      } else {
-        dispatchEvent(this, `${name.replace('-','')}change`, {
-          oldValue,
-          newValue
-        });
-        this.renderTags();
-      }
-    }
-  }
-  async render(force){
-    if(await super.render(force)){
-      const $tagsInput = this.shadowRoot.getElementById('tagsInput');
-      onEvent($tagsInput, 'change', this[tagsInputChangeHandler]);
-      onEvent($tagsInput, 'input', this[tagsInputCommaHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    const $tagsInput = this.shadowRoot.getElementById('tagsInput');
-    offEvent($tagsInput, 'change', this[tagsInputChangeHandler]);
-    offEvent($tagsInput, 'input', this[tagsInputCommaHandler]);
-  }
-  async renderTags(){
-    this.render(false);
-    await window.customElements.whenDefined('k-tag');
-    const $tags = this.shadowRoot.getElementById('tags');
-    $tags.innerHTML = '';
-    const v = this.value;
-    if(v) v.split(',').forEach(tag => {
-      $tags.appendChild(new Tag(tag));
-    });
-  }
-  addTag(tag){
-    const tags = new Set(this.value.split(',').filter(i=>!!i));
-    tags.add(tag);
-    this.value = [...tags].filter(i=>!!i).join(',');
-    dispatchEvent(this, 'addtag', {tag});
-  }
-  removeTag(tag){
-    const tags = new Set(this.value.split(',').filter(i=>!!i));
-    tags.delete(tag);
-    this.value = [...tags].join(',');
-    dispatchEvent(this, 'removetag', {tag});
-  }
-  validateTags(){
-    return this.value
-      .split(',')
-      .map(t=>t.trim())
-      .map(tag => {
-        const allowed = new Set(this.allowedTags.split(',').filter(i=>!!i));
-        if(allowed.size) return allowed.has(tag)?tag:'';
-        const disallowed = new Set(this.disallowedTags.split(',').filter(i=>!!i));
-        if(disallowed.size) return disallowed.has(tag)?'':tag;
-        return tag;
-      })
-      .filter(i=>!!i).join(',');
-  }
-
-  get shadowTemplate(){
-    return /*html*/`
-      <label for="tagsInput">
-        ${super.shadowTemplate}
-        <div id="tagsHolder">
-          <span id="tags"></span>
-          <input id="tagsInput" />
-        </div>
-      </label>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        
-      }
-      #tagsHolder {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: flex-start;
-        width: 100%;
-        background-color: var(--input_bg);
-        color: var(--input_tc);
-        border: var(--input_border_width) solid var(--c_border);
-        padding: 0;
-        margin-bottom: var(--spacer);
-        border-radius: var(--radius);
-        outline: none;
-        transition: box-shadow var(--animation_ms);
-        cursor: default;
-      }
-      #tagsHolder:focus-within {
-        box-shadow: var(--focus_shadow);
-      }
-      #tags {
-        display: contents;
-      }
-      #tagsInput {
-        display: inline-block;
-        min-width: 5rem;
-        width: auto;
-        max-width: 100%;
-        background-color: transparent;
-        color: inherit;
-        border: 0 solid transparent;
-        margin-bottom: 0;
-        border-radius: 0;
-        transition: none;
-      }
-      #tagsInput {
-        box-shadow: 0 0 0 transparent;
-      }
-    `;
-  }
-
-  static observedAttributes = [
-    ...Component.observedAttributes,
-    'value',
-    'allowed-tags',
-    'disallowed-tags'
-  ];
-}
-window.customElements.define('k-tags', Tags);
-
-const tagClickHandler = Symbol();
-class Tag extends Component {
-  constructor(tag){
-    super();
-
-    /* Private Methods */
-    this[tagClickHandler] = () => {
-      this.getRootNode().host.removeTag(tag);
-    }
-
-    /* init */
-    this.innerHTML = tag;
-  }
-  async render(force){
-    if(await super.render(force)){
-      onEvent(this, 'click', this[tagClickHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this, 'click', this[tagClickHandler]);
-  }
-
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: inline-block;
-        width: min-content;
-        margin: var(--spacer_q);
-        padding: var(--spacer_q) var(--spacer_h);
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        cursor: pointer;
-      }
-      :host(:hover) {
-        text-decoration: line-through;
-      }
-    `;
-  }
-}
-window.customElements.define('k-tag', Tag);

package/src/components/ThemeSwitcher.js

@@ -1,100 +0,0 @@
-import Component from './Component.js';
-import {
-  onEvent,
-  dispatchEvent
-} from '../utils/element.js';
-import './Icon.js';
-
-const storageWatcher = Symbol('storageWatcher'),
-      clickHandler = Symbol('clickHandler');
-export default class ThemeSwitcher extends Component {
-  constructor(){
-    super();
-
-    this[storageWatcher] = () => {
-      this.currentTheme =  ThemeSwitcher.getCurrentTheme();
-    }
-    this[clickHandler] = () => {
-      const current = ThemeSwitcher.getCurrentTheme();
-      if(current === 'auto') ThemeSwitcher.setTheme('light');
-      if(current === 'light') ThemeSwitcher.setTheme('dark');
-      if(current === 'dark') ThemeSwitcher.setTheme('auto');
-    }
-    this.registerAttribute('currentTheme', ThemeSwitcher.getCurrentTheme());
-  }
-  async render(force){
-    if(await super.render(force)){1
-      onEvent(window, 'storage', this[storageWatcher]);
-      onEvent(this.shadowRoot.getElementById('toggle'), 'click', this[clickHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('toggle'), 'click', this[clickHandler]);
-  }
-
-  get shadowTemplate(){
-    return /*html*/`
-      <button
-        id="toggle"
-        class="no-btn"
-      >
-        <k-icon
-          id="autoMode"
-          name="mode-auto"
-          class="mode"
-        ></k-icon>
-        <k-icon
-          id="lightMode"
-          name="mode-light"
-          class="mode"
-        ></k-icon>
-        <k-icon
-          id="darkMode"
-          name="mode-dark"
-          class="mode"
-        ></k-icon>
-      </button>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      :host {
-        --padding: var(--spacer);
-
-        display: flex;
-      }
-      #toggle {
-        padding: var(--padding);
-      }
-      .mode {
-        display: none;
-      }
-      :host([current-theme="auto"]) #autoMode,
-      :host([current-theme="light"]) #lightMode,
-      :host([current-theme="dark"]) #darkMode {
-        display: block;
-      }
-    `;
-  }
-
-  static setTheme(theme){
-    localStorage.setItem('theme', theme);
-    document.documentElement.setAttribute('theme', theme);
-    dispatchEvent(window, 'storage', { theme });
-  }
-  static getCurrentTheme(){
-    let theme = document.documentElement.getAttribute('theme');
-    if(!theme) theme = localStorage.getItem('theme');
-    return theme || 'auto';
-  }
-}
-const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-const colorSchemeChangeHandler = (event) => document.documentElement.setAttribute('auto-theme', event.matches?'dark':'light');
-colorSchemeQuery.addEventListener('change', colorSchemeChangeHandler);
-colorSchemeChangeHandler(colorSchemeQuery);
-
-ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme());
-window.customElements.define('k-theme-switcher', ThemeSwitcher)

package/src/components/Timestamp.js

@@ -1,28 +0,0 @@
-import Component from './Component.js'
-import formatTimestamp from '../utils/formatTimestamp.js';
-
-export default class Timestamp extends Component {
-	constructor(timestamp = 0, format = '', locale = ''){
-		super();
-		this.registerAttributes({
-			timestamp,
-			locale,
-			format
-		});
-	}
-
-	/* Lifecycle Callbacks */
-	attributeChangedCallback(n, oV, nV){
-		if(n == 'timestamp'){
-			if(nV){
-				this.innerHTML = formatTimestamp(nV, this.format, this.locale || navigator.language);
-			} else {
-				this.innerHTML = '';
-			}
-		}
-	}
-
-	/* Static Members */
-	static observedAttributes = ['timestamp'];
-}
-window.customElements.define('k-timestamp', Timestamp);