kmaterialize 2.0.0 → 2.3.3-1.0.1

package/components/checkbox/_checkboxes.scss

@@ -0,0 +1,281 @@
+/* Checkboxes */
+
+@at-root {
+  :root {
+    --checkbox-size: 18px; // 18px
+    --checkbox-shape: 2px;
+  }
+}
+
+input[type="checkbox"] {
+  /* Add if not using autoprefixer */
+  -webkit-appearance: none;
+  appearance: none;
+  /* For iOS < 15 to remove gradient background */
+  // background-color: #fff;
+  margin: 0;
+  position: relative;
+  cursor: pointer;
+}
+
+input[type="checkbox"]:focus {
+  outline: 3px solid var(--md-sys-color-secondary);
+  border-radius: 50%;
+  outline-offset: 0.5rem;
+}
+
+input[type="checkbox"]:before {
+  opacity: 1;
+  position: absolute;
+  display: block;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border: 2px solid var(--md-sys-color-on-surface-variant);
+  border-radius: var(--checkbox-shape);
+  content: "";
+  // background: #fff;
+}
+
+input[type="checkbox"]:after {
+  position: relative;
+  display: block;
+  // left: 2px;
+  // top: -11px;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  // border-width: 2px;
+  // border-style: solid;
+  // border-color: var(--md-sys-color-on-surface-variant);
+  content: "";
+  // background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
+  border-radius: var(--checkbox-shape);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+input[type="checkbox"]:checked:after {
+  background-color: var(--md-sys-color-primary);
+  clip-path: polygon(0 48%, 0 0, 56% 0, 74% 17%, 40% 64%, 23% 50%, 14% 61%, 42% 82%, 81% 31%, 32% 0, 100% 0, 100% 100%, 0 100%, 0 49%);
+}
+
+[type="checkbox"]:indeterminate:after {
+  background-color: var(--md-sys-color-primary);
+  clip-path: polygon(0% 0%, 0% 100%, 18% 100%, 16% 43%, 83% 42%, 83% 63%, 16% 63%, 16% 100%, 100% 100%, 100% 0%);
+}
+
+// Disabled
+input[type="checkbox"]:disabled:before {
+  filter: opacity(0.2);
+}
+input[type="checkbox"]:disabled:after {
+  filter: opacity(0.2);
+}
+
+// Hover
+input[type="checkbox"]:not(:disabled):checked:hover:after{
+  // background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
+  background-color: var(--md-sys-color-primary);
+}
+
+input[type="checkbox"]:not(:disabled):hover:after{
+  // background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
+  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;  
+}
+
+input[type="checkbox"]:not(:disabled):hover:before{
+  border-color: #3D7591;
+}
+
+/*
+// Checkbox Styles
+[type="checkbox"] {
+  // Text Label Style
+  + span:not(.lever) {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    height: var(--checkbox-size);
+    line-height: var(--checkbox-size);    
+    padding-left: var(--checkbox-size);    
+    // background-color: red;
+    font-size: 1rem;
+    user-select: none;
+  }
+
+  // checkbox aspect
+  + span:not(.lever):before,
+  &:not(.filled-in) + span:not(.lever):after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    z-index: 0;
+    border: 2px solid var(--md-sys-color-on-surface-variant);
+    border-radius: 1px;
+    transition: .2s;
+  }
+
+  &:not(.filled-in) + span:not(.lever):after {
+    border: 0;
+    transform: scale(0);
+  }
+
+  &:not(:checked):disabled + span:not(.lever):before {
+    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  }
+
+  &:disabled + span:not(.lever) {
+    color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  }
+
+  // Focused styles
+  &.tabbed:focus + span:not(.lever):after {
+    transform: scale(1);
+    border: 0;
+    border-radius: 50%;
+    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+}
+
+[type="checkbox"]:checked {
+  + span:not(.lever):before {
+    top: -4px;
+    left: -5px;
+    width: 12px;
+    height: 22px;
+    border-top: 2px solid transparent;
+    border-left: 2px solid transparent;
+    border-right: 2px solid var(--md-sys-color-primary);
+    border-bottom: 2px solid var(--md-sys-color-primary);
+    transform: rotate(40deg);
+    backface-visibility: hidden;
+    transform-origin: 100% 100%;
+  }
+
+  &:disabled + span:before {
+    border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+    border-bottom: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  }
+}
+
+// Indeterminate checkbox
+[type="checkbox"]:indeterminate {
+  + span:not(.lever):before {
+    top: -11px;
+    left: -12px;
+    width: 10px;
+    height: 22px;
+    border-top: none;
+    border-left: none;
+    border-right: 2px solid var(--md-sys-color-primary);
+    border-bottom: none;
+    transform: rotate(90deg);
+    backface-visibility: hidden;
+    transform-origin: 100% 100%;
+  }
+
+  // Disabled indeterminate
+  &:disabled + span:not(.lever):before {
+    border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+    background-color: transparent;
+  }
+}
+
+// Filled in Style
+[type="checkbox"].filled-in {
+  // General
+  + span:not(.lever):after {
+    border-radius: 2px;
+  }
+
+  + span:not(.lever):before,
+  + span:not(.lever):after {
+    content: '';
+    left: 0;
+    position: absolute;
+    // .1s delay is for check animation
+    transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
+    z-index: 1;
+  }
+
+  // Unchecked style
+  &:not(:checked) + span:not(.lever):before {
+    width: 0;
+    height: 0;
+    border: 3px solid transparent;
+    left: 6px;
+    top: 10px;
+    transform: rotateZ(37deg);
+    transform-origin: 100% 100%;
+  }
+
+  &:not(:checked) + span:not(.lever):after {
+    height: 20px;
+    width: 20px;
+    background-color: transparent;
+    border: 2px solid var(--md-sys-color-on-surface-variant);
+    top: 0px;
+    z-index: 0;
+  }
+
+  // Checked style
+  &:checked {
+    + span:not(.lever):before {
+      top: 0;
+      left: 1px;
+      width: 8px;
+      height: 13px;
+      border-top: 2px solid transparent;
+      border-left: 2px solid transparent;
+      border-right: 2px solid var(--md-sys-color-on-primary);
+      border-bottom: 2px solid var(--md-sys-color-on-primary);
+      transform: rotateZ(37deg);
+      transform-origin: 100% 100%;
+    }
+
+    + span:not(.lever):after {
+      top: 0;
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-primary);
+      z-index: 0;
+    }
+  }
+
+  // Focused styles
+  &.tabbed:focus + span:not(.lever):after {
+    border-radius: 2px;
+    border-color: var(--md-sys-color-on-surface-variant)r;
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+
+  &.tabbed:checked:focus + span:not(.lever):after {
+    border-radius: 2px;
+    background-color: var(--md-sys-color-primary);
+    border-color: var(--md-sys-color-primary);
+  }
+
+  // Disabled style
+  &:disabled:not(:checked) + span:not(.lever):before {
+    background-color: transparent;
+    border: 2px solid transparent;
+  }
+
+  &:disabled:not(:checked) + span:not(.lever):after {
+    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  }
+
+  &:disabled:checked + span:not(.lever):before {
+    background-color: transparent;
+  }
+
+  &:disabled:checked + span:not(.lever):after {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+    border: none;
+  }
+}
+*/

package/components/checkbox/checkbox.mdx

@@ -0,0 +1,24 @@
+import {Story, Meta, Source, Controls, Markdown, Primary} from '@storybook/addon-docs/blocks';
+import * as stories from './checkbox.stories';
+
+<Meta of={stories}/>
+
+# Checkboxes
+
+Use checkboxes when looking for yes or no answers. The `for` attribute is necessary to bind our custom checkbox with the input.
+Add the input's `id` as the value of the `for` attribute of the label.
+
+## Default
+
+<Story of={stories.Default} />
+<Source of={stories.Default} format="dedent"/>
+
+## Filled-in Checkbox
+
+<Story of={stories.FilledIn} />
+<Source of={stories.FilledIn} format="dedent"/>
+
+## Indeterminate Checkbox
+
+<Story of={stories.Indeterminate} />
+<Source of={stories.Indeterminate} format="dedent"/>

package/components/checkbox/checkbox.stories.ts

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/html-vite';
+
+export default {
+  title: 'Components/Checkbox'
+} satisfies Meta;
+
+export const Default: StoryObj = {
+  render() {
+    return `
+<form action="#">
+
+  <p>Normal basic checkbox input</p>
+  
+  <input type="checkbox" />
+  <input type="checkbox" checked="checked" />
+  <input type="checkbox" disabled />
+  <input type="checkbox" disabled checked="checked" />
+
+  <p>Compound Checkbox Elements</p>
+
+  <p>
+    <label>
+      <input type="checkbox" />
+      <span>Unchecked</span>
+    </label>
+  </p>
+
+  <p>
+    <label>
+      <input type="checkbox" checked="checked" />
+      <span>Checked</span>
+    </label>
+  </p>
+
+  <p>
+    <label>
+      <input type="checkbox" />
+      <span></span>
+    </label>
+  </p>
+
+  <p>
+    <label>
+      <input type="checkbox" disabled="disabled" />
+      <span>Disabled</span>
+    </label>
+  </p>
+
+  <p>
+    <label>
+      <input type="checkbox" checked="checked" disabled="disabled" />
+      <span>Checked & Disabled</span>
+    </label>
+  </p>
+</form>
+    `;
+  }
+};
+
+export const FilledIn: StoryObj = {
+  render() {
+    return `
+<form action="#">
+  <p>
+    <label>
+      <input type="checkbox" class="filled-in"/>
+      <span>Filled in unchecked</span>
+    </label>
+  </p>
+  <p>
+    <label>
+      <input type="checkbox" class="filled-in" checked="checked"/>
+      <span>Filled in checked</span>
+    </label>
+  </p>
+  <p>
+    <label>
+      <input type="checkbox" class="filled-in" disabled="disabled"/>
+      <span>Filled in disabled</span>
+    </label>
+  </p>
+  <p>
+    <label>
+      <input type="checkbox" class="filled-in" checked="checked" disabled="disabled"/>
+      <span>Filled in checked & disabled</span>
+    </label>
+  </p>
+</form>
+    `;
+  }
+};
+
+export const Indeterminate: StoryObj = {
+  render() {
+    return `
+<form action="#">
+  <p>
+    <label>
+      <input class="indeterminate-checkbox" type="checkbox" />
+      <span>Indeterminate Style</span>
+    </label>
+  </p>
+  <p>
+    <label>
+      <input class="indeterminate-checkbox" type="checkbox" disabled="disabled"/>
+      <span>Indeterminate Disabled</span>
+    </label>
+  </p>
+</form>
+
+<script>
+  // Set the indeterminate property on the checkbox elements
+  const elements = document.querySelectorAll('.indeterminate-checkbox');
+  elements.forEach((element) => {
+    element.indeterminate = true;
+  });
+</script>
+    `;
+  }
+};

package/components/chip/chip.mjs

@@ -0,0 +1,37 @@
+import { Component } from '../atomic/component.mjs';
+
+class Chip extends Component {
+  #id;
+  #text;
+  #image;
+
+  constructor(options) {
+    super(options);
+    this.addClassname('chip');
+  }
+
+  setId(id) {
+    this.#id = id;
+    return this;
+  }
+
+  setText(text) {
+    this.#text = text;
+    return this;
+  }
+
+  setImage(image) {
+    this.#image = image;
+    return this;
+  }
+
+  toHTML() {
+    let html = '';
+    if (this.#image) html += `<img src="${this.#image}" alt=""/>`;
+    html += this.#text;
+    this.setChildren(html);
+    return super.toHTML();
+  }
+}
+
+export { Chip };

package/components/chip/chip.test.mjs

@@ -0,0 +1,10 @@
+import { describe, expect, test } from 'vitest';
+import { Chip } from './chip.mjs';
+
+describe('chip', () => {
+  test('create html', () => {
+    const chip = new Chip().setText('John Doe');
+    //console.log(list.toHTML());
+    expect(chip.toHTML()).toContain('John');
+  });
+});

package/components/chip/chips.css

@@ -0,0 +1,126 @@
+.chip {
+  --font-size: 14px;
+  --font-size-icon: 18px;
+  --padding: 8px;
+
+  color: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0.09);
+  display: inline-flex;
+  white-space: nowrap;
+  gap: 8px;
+  margin: 0;
+  height: 32px;
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  font-size: var(--font-size);
+  font-weight: 500;
+  border-radius: 8px;
+  align-items: center;
+  user-select: none;
+  vertical-align: top;
+}
+.chip:focus {
+  outline: none;
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+}
+
+.chip.outlined {
+  background-color: transparent;
+  border-color: var(--md-sys-color-outline);
+  border-width: 1px;
+  border-style: solid;
+}
+
+.chip > img {
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  border-radius: 12px;
+}
+
+.chip > .material-icons {
+  font-size: var(--font-size-icon);
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.chip .close {
+  border: none;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+}
+
+.chip .close:hover {
+  background-color: #8888;
+}
+
+.chips {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  border: none;
+  box-shadow: none;
+  margin: 0 0 8px 0;
+  padding: 4px;
+  /* min-height: 45px; */
+  outline: none;
+  transition: all 0.3s;
+}
+.chips.focus {
+  border-bottom: 1px solid var(--md-sys-color-primary);
+  box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
+}
+.chips.input-field {
+  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+}
+.chis input:not([type]):not(.browser-default).input {
+  background: none;
+  border: 0;
+  color: var(--md-sys-color-on-background);
+  display: inline-block;
+  font-size: 16px;
+  /* height: 32px;
+   line-height: 32px; */
+  height: 32px;
+  outline: 0;
+  margin: 0;
+  padding: 0;
+  width: 120px;
+  width: fit-content;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+.chis input:not([type]):not(.browser-default).input:focus {
+  border: 0;
+  box-shadow: none;
+}
+.chips.input-field:hover {
+  cursor: text;
+}
+.chips .autocomplete-content {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prefix ~ .chips {
+  margin-left: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+.suffix ~ .chips {
+  margin-right: 3rem;
+  width: 92%;
+  width: calc(100% - 3rem);
+}
+.chips:empty ~ label {
+  font-size: 0.8rem;
+  transform: translateY(-140%);
+}

package/components/chip/chips.mdx

@@ -0,0 +1,33 @@
+# Chips
+
+To add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by using your delete button.
+
+
+ATTENTION: Data-Format has changed from version 1.X.X to 2.0.0! Please update option 'data'.
+
+Normal:
+
+<div class="chips"></div>
+
+Set initial tags:
+
+<div class="chips chips-initial"></div>
+
+Use placeholders and override hint texts:
+
+<div class="chips chips-placeholder"></div>
+
+Use autocomplete with chips:
+
+<div class="chips chips-autocomplete"></div>
+
+```html
+<!-- Default with no input (automatically generated)  -->
+<div class="chips"></div>
+<div class="chips chips-initial"></div>
+<div class="chips chips-placeholder"></div>
+<div class="chips chips-autocomplete"></div>
+<!-- Customizable input  -->
+<div class="chips">
+  <input class="custom-class">
+</div>