kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/appbar/appbar.mjs

@@ -0,0 +1,54 @@
+import { Component } from '../atomic/component.mjs';
+
+// AppBar is the old *Navbar*
+
+class AppBar extends Component {
+  #title = '';
+
+  constructor(options) {
+    super(options);
+    this.setTagName('nav').addClassname('nav navbar');
+  }
+
+  setTitle(title) {
+    this.#title = title;
+    return this;
+  }
+
+  setSearch() {
+    return this;
+  }
+
+  setLogo() {
+    return this;
+  }
+
+  addLeftIcon() {
+    return this;
+  }
+
+  addRightIcon() {
+    return this;
+  }
+
+  toHTML() {
+    const html = `<div class="nav-wrapper">
+      <a href="#" class="brand-logo">${this.#title}</a>
+      <ul class="right hide-on-med-and-down">
+        <li><a href="sass.html"><i class="material-icons">search</i></a></li>
+        <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
+        <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
+        <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
+      </ul>
+      <ul id="nav-mobile" class="right hide-on-med-and-down">
+        <li><a href="sass.html">Sass</a></li>
+        <li><a href="badges.html">Components</a></li>
+        <li><a href="collapsible.html">JavaScript</a></li>
+      </ul>
+    </div>`;
+    this.setChildren(html);
+    return super.toHTML();
+  }
+}
+
+export { AppBar };

package/components/appbar/appbar.test.mjs

@@ -0,0 +1,9 @@
+import { describe, expect, test } from 'vitest';
+import { AppBar } from './appbar.mjs';
+
+describe('appBar', () => {
+  test('create html', () => {
+    const appBar = new AppBar();
+    expect(appBar.toHTML()).toContain('<nav');
+  });
+});

package/components/atomic/atomic.mjs

@@ -0,0 +1,19 @@
+import { Component } from './component.mjs';
+
+class Text extends Component {
+  constructor(options) {
+    super(options);
+    this.setTagName('span');
+    this.addClassname('mw-text');
+  }
+}
+
+class Number extends Component {
+  constructor(options) {
+    super(options);
+    this.setTagName('span');
+    this.addClassname('mw-number');
+  }
+}
+
+export { Text, Number };

package/components/atomic/component.mjs

@@ -0,0 +1,67 @@
+// function escapeHTML(str) {
+//   return str
+//     .replaceAll('&', '&')
+//     .replaceAll('<', '&lt;')
+//     .replaceAll('>', '&gt;')
+//     .replaceAll('"', '&quot;')
+//     .replaceAll("'", '&#039;');
+// }
+
+class Component {
+  #tagname;
+  #children;
+  #classnames;
+
+  constructor(options) {
+    this.#tagname = 'div';
+    this.#children = [];
+    this.#classnames = [];
+    if (typeof options === 'object' && options.children) {
+      // Tree Nodes
+      options.children.forEach((c) => this.addChild(c));
+      return;
+    }
+    // Text or numeric
+    this.#children = options;
+  }
+
+  setChildren(children) {
+    this.#children = children;
+    return this;
+  }
+
+  setTagName(tagname) {
+    if (typeof tagname !== 'string') throw new Error('tagname needs to be string');
+    this.#tagname = tagname;
+    return this;
+  }
+
+  addChild(child) {
+    if (!(child instanceof Component)) throw new Error('child is no valid component');
+    this.#children.push(child);
+    return this;
+  }
+
+  addClassname(name) {
+    this.#classnames.push(name);
+    return this;
+  }
+
+  toHTML() {
+    const classAttr =
+      this.#classnames.length === 0 ? '' : ' class="' + this.#classnames.join(' ') + '"';
+    if (typeof this.#children === 'object')
+      return `<${this.#tagname}${classAttr}>${this.#children.map((child) => child.toHTML()).join('')}</${this.#tagname}>`;
+    // string or number
+    return `<${this.#tagname}${classAttr}>${this.#children}</${this.#tagname}>`;
+  }
+
+  // TODO: remove here
+  toDOM() {
+    const template = document.createElement('template');
+    template.innerHTML = this.toHTML();
+    return template.content.firstElementChild;
+  }
+}
+
+export { Component };

package/components/badge/_badges.scss

@@ -0,0 +1,75 @@
+// TODO: Make better structure
+:root {
+  --bagde-height: 22px;
+}
+
+span.badge {
+  min-width: 3rem;
+  padding: 0 6px;
+  margin-left: 14px;
+  text-align: center;
+  font-size: 1rem;
+  line-height: var(--bagde-height);
+  height: var(--bagde-height);
+  color: var(--md-sys-color-on-surface-variant);
+  float: right;
+  box-sizing: border-box;
+
+  &.new {
+    font-weight: 300;
+    font-size: 0.8rem;
+    color: var(--md-sys-color-on-primary);
+    background-color: var(--md-sys-color-primary);
+    border-radius: 2px;
+  }
+  &.new:after {
+    content: ' new';
+  }
+
+  &[data-badge-caption]::after {
+    content: ' ' attr(data-badge-caption);
+  }
+}
+
+.active span.badge {
+  color: var(--md-sys-color-on-primary);
+}
+
+// Special cases
+
+.navbar ul a span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: 4px;
+  line-height: var(--bagde-height);
+  height: var(--bagde-height);
+  -webkit-font-smoothing: auto;
+}
+
+// Line height centering
+.collection-item span.badge {
+  margin-top: calc(calc(1.5rem * 0.5) - calc(var(--bagde-height) * 0.5));
+}
+
+.collapsible span.badge {
+  margin-left: auto;
+
+  &.leading {
+    margin-right: 7px;
+    order: -1;
+  }
+}
+
+.collapsible .active span.badge:not(.new) {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.sidenav span.badge {
+  margin-top: calc(calc(var(--sidenav-line-height) * 0.5) - calc(22px * 0.5));
+}
+
+table span.badge {
+  display: inline-block;
+  float: none;
+  margin-left: auto;
+}

package/components/badge/badge.mjs

@@ -0,0 +1,11 @@
+import { Component } from '../atomic/component.mjs';
+
+class Badge extends Component {
+  constructor(options) {
+    super(options);
+    //this.setTagName('button');
+    this.addClassname('badge');
+  }
+}
+
+export { Badge };

package/components/breadcrumb/_breadcrumb.scss

@@ -0,0 +1,27 @@
+.breadcrumb-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+
+  i,
+  i.material-icons, i.material-symbols-outlined,
+  i.material-symbols-rounded, i.material-symbols-sharp,
+  &:before {
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+  }
+
+  &:before {
+    content: '\E5CC';
+    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
+  }
+
+  &:first-child:before {
+    visibility: hidden;
+  }
+}

package/components/button/_buttons.scss

@@ -0,0 +1,352 @@
+@use '../../sass/mixins.module.scss' as *;
+@use '../../sass/variables' as *;
+
+@at-root {
+  :root {
+    --btn-height: 40px;
+    --btn-font-size-icon: 16px;
+    --btn-padding: 24px;
+    --btn-padding-icon: 16px;
+    --btn-gap-icon: 8px;
+    --btn-border-radius: 4px;
+    --btn-font-size: 14px;
+  }
+}
+
+.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+  @include btn(
+    var(--btn-height),
+    var(--btn-border-radius),
+    var(--btn-padding),
+    var(--btn-padding),
+    var(--btn-font-size)
+  );
+}
+
+// Icon
+.btn.icon-left, .btn.icon-right {
+  position: relative;
+}
+
+.btn.icon-left {
+  padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
+}
+
+.btn.icon-right {
+  padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
+}
+
+.btn.icon-left i, .btn.icon-right i {
+  position: absolute;
+  font-size: var(--btn-font-size-icon);
+}
+
+.btn.icon-left i {
+  left: var(--btn-padding-icon);
+}
+
+.btn.icon-right i {
+  right: var(--btn-padding-icon);
+}
+
+//------------------ Enabled
+
+.btn.filled {
+  @include btn-filled;
+}
+
+.btn.tonal {
+  @include btn-tonal;
+}
+
+.btn.elevated {
+  @include btn-elevated;
+}
+
+.btn.outlined {
+  @include btn-outlined;
+}
+
+.btn.text, .btn-flat {
+  @include btn-flat;
+}
+
+//------------------ Disabled
+
+.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
+.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
+.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
+  @include btn-disabled();
+}
+
+//------------------ Hover
+
+//------------------ Focus
+
+// Floating button
+.btn-floating {
+  // FIXES
+  // width: unset;
+  // padding: 16px !important;
+  // padding-right: 24px !important; /* only with icon */
+  // gap: 8px;
+  @extend .btn;
+  width: $button-floating-size;
+  height: $button-floating-size;
+  color: var(--md-sys-color-on-primary-container);
+  background-color: var(--md-sys-color-primary-container);
+  border-radius: $button-floating-radius;
+  padding: 0;
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  @extend .z-depth-1;
+  transition: background-color .3s;
+  cursor: pointer;
+  vertical-align: middle;
+  text-align: center;
+
+  &:hover {
+    @extend .z-depth-1-half;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
+  }
+
+  &:focus {
+    background-color: $button-floating-background-focus;
+    @extend .z-depth-1-half;
+  }
+
+  &:before {
+    border-radius: 0;
+  }
+
+  &.btn-large {
+    width: 56px;
+    height: 56px;
+    padding: 0;
+    &.halfway-fab {
+      bottom: -56px * 0.5;
+    }
+    // font-size:
+    // i {
+    //   // line-height: 56px;
+    // }
+  }
+
+  &.btn-small {
+    --btn-small-height: calc(0.75 * var(--btn-height));
+    width: var(--btn-small-height);
+    height: var(--btn-small-height);
+
+    &.halfway-fab {
+      bottom: calc(var(--btn-small-height) * -0.5);
+    }
+    // i {
+    //   line-height: $button-floating-small-size;
+    // }
+  }
+
+  &.halfway-fab {
+    position: absolute;
+    right: 24px;
+    bottom: -$button-floating-size * 0.5;
+
+    &.left {
+      right: auto;
+      left: 24px;
+    }
+  }
+
+  i {
+    color: currentColor;
+    font-size: 1.6rem;
+    width: inherit;
+    display: inline-block;
+    text-align: center;
+  }
+}
+
+// button fix
+button.btn-floating {
+  border: none;
+}
+
+// Fixed Action Button
+.fixed-action-btn {
+  position: fixed;
+  right: 23px;
+  bottom: 23px;
+  padding-top: 15px;
+  margin-bottom: 0;
+  z-index: 997;
+
+  &.active {
+    ul {
+      visibility: visible;
+      padding-left: 0;
+      list-style-type: none;
+    }
+  }
+
+  // Directions
+  &.direction-left,
+  &.direction-right {
+    padding: 0 0 0 15px;
+
+    ul {
+      text-align: right;
+      right: 64px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 100%;
+      left: auto;
+      /*width 100% only goes to width of button container */
+      width: 500px;
+
+      li {
+        display: inline-block;
+        margin: 7.5px 15px 0 0;
+      }
+    }
+  }
+
+  &.direction-right {
+    padding: 0 15px 0 0;
+
+    ul {
+      text-align: left;
+      direction: rtl;
+      left: 64px;
+      right: auto;
+
+      li {
+        margin: 7.5px 0 0 15px;
+      }
+    }
+  }
+
+  &.direction-bottom {
+    padding: 0 0 15px 0;
+
+    ul {
+      top: 64px;
+      bottom: auto;
+      display: flex;
+      flex-direction: column-reverse;
+
+      li {
+        margin: 15px 0 0 0;
+      }
+    }
+  }
+
+  &.toolbar {
+    padding: 0;
+    height: 56px;
+
+    &.active {
+      & > a i {
+        opacity: 0;
+      }
+    }
+
+    ul {
+      display: flex;
+      top: 0;
+      bottom: 0;
+      z-index: 1;
+
+      li {
+        flex: 1;
+        display: inline-block;
+        margin: 0;
+        height: 100%;
+        transition: none;
+
+        a {
+          display: block;
+          overflow: hidden;
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background-color: transparent;
+          box-shadow: none;
+          color: $button-floating-color;
+          line-height: 56px;
+          z-index: 1;
+
+          i {
+            line-height: inherit;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    left: 0;
+    right: 0;
+    text-align: center;
+    position: absolute;
+    bottom: 64px;
+    margin: 0;
+    visibility: hidden;
+
+    li {
+      margin-bottom: 15px;
+    }
+
+    a.btn-floating {
+      opacity: 0;
+    }
+  }
+
+  .fab-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: $button-floating-size;
+    height: $button-floating-size;
+    background-color: $button-floating-background;
+    border-radius: $button-floating-radius;
+    transform: scale(0);
+  }
+}
+
+//--- Helper classes (for all)
+
+// Large button
+.btn-large {
+  @extend .btn;
+  height: calc(1.5 * var(--btn-height));
+  font-size: 18px;
+  padding: 0 28px;
+
+  i {
+    font-size: 1.6rem;
+  }
+}
+
+// Small button
+.btn-small {
+  @extend .btn;
+  height: calc(0.75 * var(--btn-height));
+  font-size: 13px;
+
+  i {
+    font-size: 1.2rem;
+  }
+}
+
+// Block button
+.btn-block {
+  display: block;
+}
+
+.btn.rounded {
+  border-radius: 99999px;
+}

package/components/button/button.mjs

@@ -0,0 +1,11 @@
+import { Component } from '../atomic/component.mjs';
+
+class Button extends Component {
+  constructor(options) {
+    super(options);
+    this.setTagName('button');
+    this.addClassname('btn');
+  }
+}
+
+export { Button };