kmaterialize 2.3.3-1.0.2 → 2.3.3-1.0.21

package/components/color-input/color-input.ts

@@ -0,0 +1,203 @@
+import type PickrCtor from '@simonwep/pickr';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+
+export interface ColorInputOptions extends BaseOptions {
+  theme: 'classic' | 'monolith' | 'nano';
+  opacity: boolean;
+  swatches: string[];
+  locale?: Record<string, string>;
+}
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Color.ts
+// Built-in French translation for Pickr's UI strings, activated by
+// `data-color-locale="fr-fr"` alone - no separate options object required
+// from the consumer, unlike a fully custom `options.locale` override.
+const FR_FR: Record<string, string> = {
+  'ui:dialog': 'boîte de dialogue du sélecteur de couleur',
+  'btn:toggle': 'basculer la boîte de dialogue du sélecteur de couleur',
+  'btn:swatch': 'échantillon de couleur',
+  'btn:last-color': 'utiliser la couleur précédente',
+  'btn:save': 'Enregistrer',
+  'btn:cancel': 'Annuler',
+  'btn:clear': 'Effacer',
+  'aria:btn:save': 'enregistrer et fermer',
+  'aria:btn:cancel': 'annuler et fermer',
+  'aria:btn:clear': 'effacer et fermer',
+  'aria:input': 'champ de saisie de couleur',
+  'aria:palette': 'zone de sélection des couleurs',
+  'aria:hue': 'curseur de sélection de teinte',
+  'aria:opacity': "curseur de sélection d'opacité"
+};
+
+const _defaults: ColorInputOptions = {
+  theme: 'classic',
+  opacity: true,
+  swatches: [
+    'rgba(244, 67, 54, 1)',
+    'rgba(233, 30, 99, 0.95)',
+    'rgba(156, 39, 176, 0.9)',
+    'rgba(103, 58, 183, 0.85)',
+    'rgba(63, 81, 181, 0.8)',
+    'rgba(33, 150, 243, 0.75)',
+    'rgba(3, 169, 244, 0.7)',
+    'rgba(0, 188, 212, 0.7)',
+    'rgba(0, 150, 136, 0.75)',
+    'rgba(76, 175, 80, 0.8)',
+    'rgba(139, 195, 74, 0.85)',
+    'rgba(205, 220, 57, 0.9)',
+    'rgba(255, 235, 59, 0.95)',
+    'rgba(255, 193, 7, 1)'
+  ]
+};
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Color.ts
+// Enhances a native `<input type="color" data-color-picker="pickr">` with a
+// full Pickr popup (palette, hue/opacity sliders, swatches, hex/rgba/hsla).
+// If `data-color-picker` is absent the input is left completely untouched -
+// still a plain native color swatch, matching CrazyPHP's own fallback.
+//
+// Pickr remains an optional peerDependency and is loaded on demand via peer-loader.
+export class ColorInput extends Component<ColorInputOptions> {
+  declare el: HTMLInputElement;
+  pickr: PickrCtor | undefined;
+  ready: Promise<void>;
+  private _swatchEl: HTMLDivElement;
+  private _labels: HTMLLabelElement[];
+
+  constructor(el: HTMLInputElement, options: Partial<ColorInputOptions>) {
+    super(el, options, ColorInput);
+    (this.el as any).M_ColorInput = this;
+
+    this.options = {
+      ...ColorInput.defaults,
+      ...options
+    };
+
+    this._swatchEl = document.createElement('div');
+    this.el.after(this._swatchEl);
+    this.el.classList.add('hide');
+    this.el.addEventListener('change', this._handleInputChange);
+    this._labels = Array.from(document.querySelectorAll('label')).filter(
+      label => label.htmlFor === this.el.id
+    );
+    this._labels.forEach(label => label.addEventListener('click', this._handleLabelClick));
+
+    this.ready = this._setup();
+  }
+
+  static get defaults(): ColorInputOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLInputElement, options?: Partial<ColorInputOptions>): ColorInput;
+  static init(
+    els: InitElements<HTMLInputElement | MElement>,
+    options?: Partial<ColorInputOptions>
+  ): ColorInput[];
+  static init(
+    els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
+    options: Partial<ColorInputOptions> = {}
+  ): ColorInput | ColorInput[] {
+    return super.init(els, options, ColorInput);
+  }
+
+  static getInstance(el: HTMLInputElement): ColorInput {
+    return (el as any).M_ColorInput;
+  }
+
+  destroy() {
+    this.el.removeEventListener('change', this._handleInputChange);
+    this._labels.forEach(label => label.removeEventListener('click', this._handleLabelClick));
+    this.pickr?.destroyAndRemove();
+    this._swatchEl.remove();
+    this.el.classList.remove('hide');
+    (this.el as any).M_ColorInput = undefined;
+  }
+
+  _handleInputChange = () => {
+    this.pickr?.setColor(this.el.value);
+  };
+
+  _handleLabelClick = (event: MouseEvent) => {
+    // A label associated with a hidden input[type=color] otherwise opens
+    // the browser's native picker (notably in Firefox). Route the same
+    // accessible label activation to Pickr instead.
+    event.preventDefault();
+    void this.ready.then(() => this.pickr?.show());
+  };
+
+  async _setup(): Promise<void> {
+    const Pickr = await loadPeer<typeof PickrCtor>(
+      {
+        specifier: '@simonwep/pickr',
+        globalName: 'Pickr',
+        feature: 'Color input (Pickr) enhancement',
+        cdnHint: '<link rel="stylesheet" href="path/to/pickr-classic.min.css">\n' +
+          '    <script src="path/to/pickr.min.js"></script>\n' +
+          '    (self-hosted - copy from node_modules/@simonwep/pickr/dist/, or a CDN of your choice)'
+      },
+      () => import('@simonwep/pickr')
+    );
+
+    const dataset = this.el.dataset;
+    const theme = (['classic', 'monolith', 'nano'].includes(dataset.colorTheme ?? '')
+      ? dataset.colorTheme
+      : this.options.theme) as ColorInputOptions['theme'];
+    const lockOpacity = dataset.colorOpacity !== undefined
+      ? ['false', '0', '', 'null'].includes(dataset.colorOpacity)
+      : !this.options.opacity;
+
+    const pickrOptions: any = {
+      el: this._swatchEl,
+      theme,
+      lockOpacity,
+      swatches: this.options.swatches,
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true,
+        interaction: {
+          hex: true,
+          rgba: true,
+          hsla: true,
+          hsva: true,
+          cmyk: true,
+          input: true,
+          clear: true,
+          save: true
+        }
+      }
+    };
+
+    if (this.options.locale) {
+      pickrOptions.i18n = this.options.locale;
+    } else if (dataset.colorLocale === 'fr-fr') {
+      pickrOptions.i18n = FR_FR;
+    }
+
+    const currentValue = this.el.getAttribute('value');
+    if (currentValue && currentValue !== 'randomHex()') {
+      pickrOptions.default = currentValue;
+    } else if (this.el.hasAttribute('default')) {
+      const currentDefault = this.el.getAttribute('default');
+      if (currentDefault === 'randomHex()') {
+        const randomColor = Math.floor(Math.random() * 16777216);
+        pickrOptions.default = `#${randomColor.toString(16).padStart(6, '0')}`;
+      } else if (currentDefault) {
+        pickrOptions.default = currentDefault;
+      }
+    }
+
+    this.pickr = Pickr.create(pickrOptions);
+    if (this.el.disabled) this.pickr.disable();
+    this.pickr.on('save', (color: any, instance: any) => {
+      const hexa: string = color?.toHEXA().toString();
+      if (hexa) {
+        this.el.value = hexa;
+        this.el.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+      instance.hide();
+    });
+  }
+}

package/components/dropdown/dropdown.ts

@@ -248,7 +248,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
       // isTouchMoving to check if scrolling on mobile.
       this.close();
-    } else if (!target.closest('.dropdown-content')) {
+    } else if (!target.closest('.dropdown-content') && !target.closest('.dropdown-trigger')) {
       // Do this one frame later so that if the element clicked also triggers _handleClick
       // For example, if a label for a select was clicked, that we don't close/open the dropdown
       setTimeout(() => {

package/components/file-input/_file-input-enhanced.scss

@@ -0,0 +1,61 @@
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/enhancement/filepond_materializecss.scss
+// FilePond's own drop-label defaults to a near-black hardcoded color that
+// doesn't track kmaterialize's theme tokens - use an MD3 token instead.
+// FilePond's injected root is a sibling of the original (now hidden) file
+// input, which pushes the Materialize `<label>` that used to trail the
+// input out of position - pin it back to the field's left edge.
+.filepond--drop-label.filepond--drop-label label {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.filepond--root + label {
+  left: 0;
+}
+
+// Once FileInput (components/file-input/file-input.ts) enhances a
+// .file-field, the stock button/file-path chrome is hidden and FilePond's
+// own root (moved here to be a direct child, not left buried inside the
+// now-hidden .btn) is the entire upload affordance - .file-field's normal
+// 2-column button+text-field grid no longer applies.
+.file-field.file-field-enhanced {
+  display: block;
+
+  > label {
+    position: static;
+    display: block;
+    margin-bottom: 0.375rem;
+    color: var(--md-sys-color-on-surface);
+    transform: none;
+  }
+
+  .filepond--root {
+    margin: 0.5rem 0 1rem 0;
+    font-size: 1rem;
+  }
+
+  .filepond--panel-root {
+    border-radius: 12px;
+    background-color: var(--md-sys-color-surface-variant);
+  }
+
+  .filepond--drop-label {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .filepond--label-action {
+    color: var(--md-sys-color-primary);
+    text-decoration-color: var(--md-sys-color-primary);
+  }
+
+  .filepond--drop-label .material-icons {
+    font-size: 1.25rem;
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  .filepond-label-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}

package/components/file-input/file-input.ts

@@ -0,0 +1,203 @@
+import type * as FilePondNS from 'filepond';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+
+export type FilePondPluginName = 'image-preview' | 'file-validate-type' | 'image-exif-orientation';
+
+export interface FileInputOptions extends BaseOptions {
+  /** Which optional FilePond plugins to register - each is its own optional peerDependency. */
+  plugins: FilePondPluginName[];
+}
+
+const _defaults: FileInputOptions = {
+  plugins: []
+};
+
+// Each plugin needs its own literal `import('literal-string')` call (see
+// peer-loader.ts) so Vite/webpack/Rollup can statically discover it - a
+// generic specifier-driven loop can't produce that, hence one entry per
+// plugin instead of building the import call from PLUGIN_SPECS's string.
+const PLUGIN_LOADERS: Record<
+  FilePondPluginName,
+  { specifier: string; globalName: string; importer: () => Promise<unknown> }
+> = {
+  'image-preview': {
+    specifier: 'filepond-plugin-image-preview',
+    globalName: 'FilePondPluginImagePreview',
+    importer: () => import('filepond-plugin-image-preview')
+  },
+  'file-validate-type': {
+    specifier: 'filepond-plugin-file-validate-type',
+    globalName: 'FilePondPluginFileValidateType',
+    importer: () => import('filepond-plugin-file-validate-type')
+  },
+  'image-exif-orientation': {
+    specifier: 'filepond-plugin-image-exif-orientation',
+    globalName: 'FilePondPluginImageExifOrientation',
+    importer: () => import('filepond-plugin-image-exif-orientation')
+  }
+};
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/File.ts
+// Enhances the EXISTING `.file-field` structure in place - add
+// `data-file-picker="filepond"` (+ optional `data-file-plugins="a,b,c"`) to
+// an otherwise completely stock `.file-field`, nothing else about the
+// markup changes. FilePond.create() hides the native `<input type=file>`
+// and injects its own root as a *sibling*, it never removes anything from
+// the DOM, so the surrounding button/label/file-path-wrapper stay intact
+// at rest - only the interactive drop area swaps in visually.
+//
+// FilePond and its plugins are optional peerDependencies, loaded on demand
+// via peer-loader.
+export class FileInput extends Component<FileInputOptions> {
+  pond: FilePondNS.FilePond | undefined;
+  ready: Promise<void>;
+  private _fileEl: HTMLInputElement | null;
+  private _pathEl: HTMLInputElement | null;
+
+  constructor(el: HTMLElement, options: Partial<FileInputOptions>) {
+    super(el, options, FileInput);
+    (this.el as any).M_FileInput = this;
+
+    const pluginsAttr = this.el.dataset.filePlugins;
+    this.options = {
+      ...FileInput.defaults,
+      plugins: pluginsAttr
+        ? (pluginsAttr.split(',').map((p) => p.trim()) as FilePondPluginName[])
+        : FileInput.defaults.plugins,
+      ...options
+    };
+
+    this._fileEl = this.el.querySelector<HTMLInputElement>('input[type="file"]');
+    this._pathEl = this.el.querySelector<HTMLInputElement>('.file-path');
+
+    this.ready = this._setup();
+  }
+
+  static get defaults(): FileInputOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLElement, options?: Partial<FileInputOptions>): FileInput;
+  static init(els: InitElements<MElement>, options?: Partial<FileInputOptions>): FileInput[];
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options: Partial<FileInputOptions> = {}
+  ): FileInput | FileInput[] {
+    return super.init(els, options, FileInput);
+  }
+
+  static getInstance(el: HTMLElement): FileInput {
+    return (el as any).M_FileInput;
+  }
+
+  destroy() {
+    this.el.classList.remove('file-field-enhanced');
+    this.el.querySelector<HTMLElement>('.btn')?.classList.remove('hide');
+    this.el.querySelector<HTMLElement>('.file-path-wrapper')?.classList.remove('hide');
+    this.pond?.destroy();
+    (this.el as any).M_FileInput = undefined;
+  }
+
+  /** Convenience wrapper over the underlying FilePond instance's own getFiles(). */
+  getFiles() {
+    return this.pond?.getFiles() ?? [];
+  }
+
+  async _setup(): Promise<void> {
+    if (!this._fileEl) {
+      console.error(Error('.file-field enhanced with data-file-picker="filepond" needs an input[type=file]'));
+      return;
+    }
+
+    const FilePond = await loadPeer<typeof FilePondNS>(
+      {
+        specifier: 'filepond',
+        globalName: 'FilePond',
+        feature: 'File input (FilePond) enhancement',
+        cdnHint:
+          '<link rel="stylesheet" href="path/to/filepond.min.css">\n' +
+          '    <script src="path/to/filepond.min.js"></script>\n' +
+          '    (self-hosted - copy from node_modules/filepond/dist/, or a CDN of your choice)'
+      },
+      () => import('filepond')
+    );
+
+    const pluginNames = new Set(this.options.plugins);
+    // file-validate-type is auto-registered whenever the input restricts
+    // `accept`, matching CrazyPHP's own convention, even if the consumer
+    // didn't list it explicitly in data-file-plugins.
+    if (this._fileEl.accept) pluginNames.add('file-validate-type');
+
+    for (const name of pluginNames) {
+      const loader = PLUGIN_LOADERS[name];
+      if (!loader) continue;
+      const plugin = await loadPeer(
+        {
+          specifier: loader.specifier,
+          globalName: loader.globalName,
+          feature: `File input FilePond plugin "${name}"`,
+          cdnHint: `<script src="path/to/${loader.specifier}.min.js"></script> (self-hosted - copy from node_modules/${loader.specifier}/dist/, or a CDN of your choice)`
+        },
+        loader.importer
+      );
+      FilePond.registerPlugin(plugin as any);
+    }
+
+    const pondOptions: FilePondNS.FilePondOptions = {};
+    const { dataset } = this._fileEl;
+    const readBoolean = (value: string | undefined) => value !== 'false';
+
+    pondOptions.allowMultiple = this._fileEl.multiple;
+    pondOptions.disabled = this._fileEl.disabled;
+    if (dataset.defaultFile) pondOptions.files = [dataset.defaultFile];
+    if (dataset.maxFiles) pondOptions.maxFiles = Number(dataset.maxFiles);
+    if (this._fileEl.multiple) pondOptions.allowReorder = readBoolean(dataset.allowReorder);
+    if (dataset.labelIdle) pondOptions.labelIdle = dataset.labelIdle;
+    if (dataset.instantUpload !== undefined) pondOptions.instantUpload = readBoolean(dataset.instantUpload);
+    if (dataset.dropValidation !== undefined) pondOptions.dropValidation = readBoolean(dataset.dropValidation);
+    if (dataset.imagePreviewHeight) pondOptions.imagePreviewHeight = Number(dataset.imagePreviewHeight);
+    if (dataset.stylePanelLayout) {
+      pondOptions.stylePanelLayout = dataset.stylePanelLayout as FilePondNS.FilePondOptions['stylePanelLayout'];
+    }
+    if (dataset.stylePanelAspectRatio) pondOptions.stylePanelAspectRatio = dataset.stylePanelAspectRatio;
+
+    this.pond = FilePond.create(this._fileEl, pondOptions);
+
+    // FilePond inserts its own root as a *sibling* of the input it was
+    // given - but that input lives inside .btn (stock .file-field markup
+    // is `.btn > input[type=file]`), so the fresh FilePond root lands
+    // inside .btn too. Move it back out to be a direct child of .file-field
+    // itself before hiding .btn, or hiding .btn would take the whole
+    // FilePond widget down with it.
+    const pondRoot = this.pond.element;
+    if (pondRoot) {
+      this.el.appendChild(pondRoot);
+      const fileHeight = Number(dataset.fileHeight);
+      if (Number.isFinite(fileHeight) && fileHeight > 0) {
+        (pondRoot as HTMLElement).style.height = `${fileHeight}px`;
+      }
+      // Matches CrazyPHP's own File.ts behavior - FilePond's free-tier
+      // "Powered by FilePond" credit link doesn't fit a themed, branded UI.
+      pondRoot.querySelectorAll('.filepond--credits').forEach((el) => el.remove());
+    }
+
+    // Everything from the stock .file-field is now redundant - FilePond's
+    // own drop zone is the entire upload affordance. Hidden, not removed,
+    // so the .file-field structure this component promises to preserve is
+    // still there, just not shown alongside FilePond's widget.
+    this.el.classList.add('file-field-enhanced');
+    this.el.querySelector<HTMLElement>('.btn')?.classList.add('hide');
+    this.el.querySelector<HTMLElement>('.file-path-wrapper')?.classList.add('hide');
+    this._syncPathInput();
+    this.pond.on('updatefiles', this._syncPathInput);
+  }
+
+  _syncPathInput = () => {
+    if (!this._pathEl || !this.pond) return;
+    this._pathEl.value = this.pond
+      .getFiles()
+      .map((f) => f.filename)
+      .join(', ');
+  };
+}

package/components/kanban/_kanban.scss

@@ -0,0 +1,148 @@
+.kanban-board {
+  --kanban-column-width: 20rem;
+  --kanban-gap: 1rem;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kanban-gap);
+  width: 100%;
+  padding: 0.25rem;
+  overflow-x: auto;
+  box-sizing: border-box;
+  overscroll-behavior-x: contain;
+
+  &.kanban-wrap {
+    flex-wrap: wrap;
+    overflow-x: visible;
+  }
+}
+
+.kanban-column {
+  display: flex;
+  flex: 0 0 var(--kanban-column-width);
+  flex-direction: column;
+  min-height: 15rem;
+  padding: 0.75rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.875rem;
+  background: var(--md-sys-color-surface-variant);
+  box-sizing: border-box;
+  transition: border-color 160ms ease, background-color 160ms ease;
+
+  &.is-drag-over {
+    border-color: var(--md-sys-color-primary);
+    background: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, var(--md-sys-color-surface-variant));
+  }
+}
+
+.kanban-column-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.25rem 0.75rem;
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.kanban-column-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-column-count {
+  display: inline-flex;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  font-size: 0.75rem;
+}
+
+.kanban-column-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 8rem;
+}
+
+.kanban-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 1rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.75rem;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
+  cursor: grab;
+  user-select: none;
+
+  &:active,
+  &.is-dragging {
+    cursor: grabbing;
+  }
+
+  &.is-dragging {
+    opacity: 0.45;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+  }
+}
+
+.kanban-card-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-card-description {
+  margin: 0;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+.kanban-card-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.75rem;
+}
+
+.kanban-card-label {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+  font-size: 0.75rem;
+}
+
+.kanban-empty {
+  display: grid;
+  min-height: 5rem;
+  place-items: center;
+  border: 1px dashed var(--md-sys-color-outline);
+  border-radius: 0.625rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+@media (max-width: 600px) {
+  .kanban-board {
+    --kanban-column-width: min(20rem, calc(100vw - 3rem));
+  }
+}