kmaterialize 2.3.3-1.0.2 → 2.3.3-1.0.21

package/components/tom-select/_tom-select-field.scss

@@ -0,0 +1,256 @@
+// Materialize styling for the wrapper generated after select.tomselected.
+.input-field:has(> select.tomselected) {
+  margin-top: 16px;
+}
+
+.input-field > .ts-wrapper {
+  margin-top: 5px;
+
+  &.single > .ts-control,
+  &.multi > .ts-control {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 56px;
+    min-height: 56px;
+    padding: 0 0 0 15px !important;
+    overflow: hidden;
+    background: var(--md-sys-color-background) !important;
+    background-image: none !important;
+    border: 0 !important;
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant) !important;
+    border-radius: 4px 4px 0 0;
+    box-shadow: none !important;
+  }
+
+  &.focus > .ts-control {
+    border-bottom: 2px solid var(--input-color) !important;
+  }
+
+  // Join the control visually to its open dropdown. Closed controls retain
+  // their normal corner radius.
+  &.dropdown-active > .ts-control {
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  .ts-control {
+    font-size: 16px;
+    color: var(--md-sys-color-on-surface);
+
+    > input,
+    input[role="combobox"] {
+      box-sizing: border-box;
+      width: auto !important;
+      height: auto !important;
+      min-height: 0 !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      color: var(--md-sys-color-on-surface) !important;
+      font-size: 16px;
+      line-height: 24px;
+      background: transparent !important;
+      border: 0 !important;
+      border-radius: 0 !important;
+      box-shadow: none !important;
+
+      &::placeholder {
+        color: color-mix(in srgb, var(--md-sys-color-on-surface) 55%, transparent);
+        opacity: 1;
+      }
+    }
+  }
+
+  // Only multi-select values are rendered as chips. A single value remains
+  // normal input text, matching Materialize's select and text fields.
+  &.multi > .ts-control {
+    gap: 6px;
+    padding: 0 0 0 15px !important;
+    flex-wrap: nowrap;
+
+    .item {
+      flex: 0 0 auto;
+      margin: 0 !important;
+      padding: 4px 10px !important;
+      color: var(--md-sys-color-on-primary-container);
+      line-height: 20px;
+      background: var(--md-sys-color-primary-container);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 999px;
+    }
+  }
+
+  &.single > .ts-control .item {
+    margin: 0 !important;
+    padding: 0 !important;
+    color: var(--md-sys-color-on-surface);
+    line-height: 24px;
+    background: transparent;
+    border: 0;
+  }
+
+  &.disabled > .ts-control {
+    opacity: 1;
+    color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+    background: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 4%) !important;
+    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%) !important;
+  }
+
+  // Tom Select hides the native caret, so draw one centered in the field.
+  &.single > .ts-control::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 24px;
+    width: 9px;
+    height: 9px;
+    margin-top: -6px;
+    border: solid var(--md-sys-color-on-surface) !important;
+    border-width: 0 3px 3px 0 !important;
+    transform: rotate(45deg);
+  }
+
+  &.single.dropdown-active > .ts-control::after {
+    margin-top: -3px;
+    transform: rotate(-135deg);
+  }
+
+  .ts-dropdown {
+    z-index: 9999;
+    margin-top: 0;
+    color: var(--md-sys-color-on-surface);
+    background: var(--md-sys-color-background) !important;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 0 0 4px 4px;
+    overflow: hidden;
+    box-shadow: 0 2px 2px #00000024, 0 3px 1px -2px #0000001f, 0 1px 5px #0003;
+
+    .ts-dropdown-content {
+      background: inherit;
+    }
+
+    .create,
+    .no-results,
+    .option {
+      display: block;
+      padding: 14px 16px;
+      color: var(--md-sys-color-on-surface);
+      font-size: 16px;
+      line-height: 22px;
+      background: transparent;
+
+      &.active {
+        background: var(--md-sys-color-primary-container);
+      }
+    }
+  }
+
+  .ts-option-content {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+  }
+}
+
+// Large multi-value sets can either grow onto additional rows or retain the
+// standard field height and expose a horizontal scrollbar.
+.input-field > select.tomselected[data-select-overflow="wrap"] + .ts-wrapper.multi > .ts-control {
+  height: auto;
+  min-height: 56px;
+  padding: 8px 0 8px 15px !important;
+  overflow: visible;
+  flex-wrap: wrap;
+}
+
+.input-field > select.tomselected[data-select-overflow="scroll"] + .ts-wrapper.multi > .ts-control {
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-wrap: nowrap;
+  scrollbar-color: var(--md-sys-color-outline) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--md-sys-color-outline);
+    border-radius: 999px;
+  }
+}
+
+// Tom Select labels have the same two states as Materialize text fields.
+// State 1: no value and no placeholder — label acts as the in-field prompt.
+.input-field > select.tomselected + .ts-wrapper + label {
+  position: absolute !important;
+  top: 16px !important;
+  left: 16px !important;
+  z-index: 2;
+  margin: 0 !important;
+  padding: 0 !important;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 16px !important;
+  line-height: 24px !important;
+  text-align: left !important;
+  background: transparent;
+  transform: none !important;
+  transform-origin: top left !important;
+  transition: top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out;
+}
+
+// State 2: a placeholder, a selected value, or focus — float from the same
+// 16px base font/position used by Materialize text-input labels.
+.input-field > select.tomselected[placeholder]:not([placeholder=""]) + .ts-wrapper + label,
+.input-field > select.tomselected:has(> option[value=""]:checked:not(:empty)) + .ts-wrapper + label,
+.input-field > select.tomselected + .ts-wrapper.has-items + label,
+.input-field > select.tomselected + .ts-wrapper.focus + label {
+  position: absolute !important;
+  top: -12px !important;
+  left: 16px !important;
+  font-size: 16px !important;
+  transform: scale(0.75) !important;
+}
+
+.input-field > select.tomselected + .ts-wrapper.focus + label {
+  color: var(--input-color);
+}
+
+// Outlined fields use the same two states; only the floating position changes
+// so the small label cuts a notch through the outline like a text input.
+.input-field.outlined > .ts-wrapper.single > .ts-control,
+.input-field.outlined > .ts-wrapper.multi > .ts-control {
+  padding: 0 0 0 15px !important;
+  background: transparent !important;
+  border: 1px solid var(--md-sys-color-on-surface-variant) !important;
+  border-radius: 4px;
+}
+
+.input-field.outlined > .ts-wrapper.focus > .ts-control {
+  border: 2px solid var(--input-color) !important;
+}
+
+.input-field.outlined > select.tomselected[placeholder]:not([placeholder=""]) + .ts-wrapper + label,
+.input-field.outlined > select.tomselected:has(> option[value=""]:checked:not(:empty)) + .ts-wrapper + label,
+.input-field.outlined > select.tomselected + .ts-wrapper.has-items + label,
+.input-field.outlined > select.tomselected + .ts-wrapper.focus + label {
+  top: -8px !important;
+  left: 12px !important;
+  padding: 0 4px !important;
+  line-height: 16px !important;
+  background: var(--md-sys-color-surface);
+  transform: scale(0.75) !important;
+}
+
+div.suffix.suffix-tomselect {
+  z-index: 2;
+  top: 30px;
+}

package/components/tom-select/tom-select-field.ts

@@ -0,0 +1,175 @@
+import type TomSelectCtor from 'tom-select';
+import type { TomSettings } from 'tom-select/dist/esm/types/settings.js';
+import type { RecursivePartial } from 'tom-select/dist/esm/types/core.js';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+import { FormSelect } from '../textfield/select';
+
+export interface RemoteDataSpec {
+  url: string;
+  value: string;
+  label: string;
+  search?: string;
+  dataKey?: string;
+}
+
+export interface TomSelectFieldOptions extends BaseOptions {
+  remote?: RemoteDataSpec;
+  settings?: RecursivePartial<TomSettings>;
+}
+
+const _defaults: TomSelectFieldOptions = {};
+
+function readRemoteSpec(el: HTMLSelectElement): RemoteDataSpec | undefined {
+  const raw = el.dataset.selectRemote;
+  if (!raw) return undefined;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return undefined;
+  }
+}
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Select.ts
+// Enhances an EXISTING native `<select class="tomselected">` with Tom
+// Select - searchable, taggable, remote-loading, dependent-field wiring,
+// clear button, drag-drop reorder. Ported in a somewhat scoped form: the
+// CrazyPHP source's remote-loading path goes through its own app-specific
+// Crazyrequest/Crazyurl HTTP-client and query-param helpers, which have no
+// equivalent in a standalone UI library - this version uses a plain
+// `fetch()` instead, keeping the same `data-select-remote` JSON shape
+// (url/value/label/search/dataKey) and the same `{{field}}` render-template
+// convention.
+//
+// Coexistence with FormSelect: `.tomselected` is a recognized exclusion
+// marker in FormSelect's own AutoInit selector (see src/index.ts), so a
+// `.tomselected` select is never picked up by FormSelect regardless of
+// init ordering. This constructor still defensively tears down any
+// FormSelect instance found on the same element, belt-and-suspenders, in
+// case that selector rule is ever violated by hand.
+//
+// Tom Select is an optional peerDependency, loaded on demand via
+// peer-loader.
+export class TomSelectField extends Component<TomSelectFieldOptions> {
+  declare el: HTMLSelectElement;
+  tomSelect: TomSelectCtor | undefined;
+  ready: Promise<void>;
+  private _dependsOnEl: HTMLElement | null = null;
+
+  constructor(el: HTMLSelectElement, options: Partial<TomSelectFieldOptions>) {
+    super(el, options, TomSelectField);
+    (this.el as any).M_TomSelectField = this;
+
+    FormSelect.getInstance(this.el)?.destroy();
+
+    this.options = {
+      remote: readRemoteSpec(this.el),
+      ...TomSelectField.defaults,
+      ...options
+    };
+
+    this.ready = this._setup();
+  }
+
+  static get defaults(): TomSelectFieldOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLSelectElement, options?: Partial<TomSelectFieldOptions>): TomSelectField;
+  static init(
+    els: InitElements<HTMLSelectElement | MElement>,
+    options?: Partial<TomSelectFieldOptions>
+  ): TomSelectField[];
+  static init(
+    els: HTMLSelectElement | InitElements<HTMLSelectElement | MElement>,
+    options: Partial<TomSelectFieldOptions> = {}
+  ): TomSelectField | TomSelectField[] {
+    return super.init(els, options, TomSelectField);
+  }
+
+  static getInstance(el: HTMLSelectElement): TomSelectField {
+    return (el as any).M_TomSelectField;
+  }
+
+  destroy() {
+    if (this._dependsOnEl) this._dependsOnEl.removeEventListener('change', this._handleDependencyChange);
+    this.tomSelect?.destroy();
+    (this.el as any).M_TomSelectField = undefined;
+  }
+
+  _handleDependencyChange = () => {
+    this.tomSelect?.clear();
+    this.tomSelect?.clearOptions();
+    this.tomSelect?.load?.('');
+  };
+
+  async _setup(): Promise<void> {
+    const TomSelect = await loadPeer<typeof TomSelectCtor>(
+      {
+        specifier: 'tom-select',
+        globalName: 'TomSelect',
+        feature: 'Select (Tom Select) enhancement',
+        cdnHint: '<script src="path/to/tom-select.complete.min.js"></script> (self-hosted - copy from node_modules/tom-select/dist/js/, or a CDN of your choice)'
+      },
+      () => import('tom-select')
+    );
+
+    const dataset = this.el.dataset;
+    const settings: RecursivePartial<TomSettings> = {
+      persist: false,
+      createOnBlur: true,
+      create: 'selectTag' in dataset,
+      plugins: {},
+      ...this.options.settings
+    };
+
+    if ('selectClear' in dataset) {
+      (settings.plugins as any).clear_button = { title: dataset.selectClear || 'Clear' };
+    }
+    if ('selectTag' in dataset || this.el.multiple) {
+      (settings.plugins as any).caret_position = {};
+      (settings.plugins as any).drag_drop = {};
+    }
+
+    if (this.el.classList.contains('icons')) {
+      const renderWithIcon = (data: Record<string, any>, escape: (value: string) => string) => {
+        const icon = data.icon ? `<img src="${escape(String(data.icon))}" alt="" />` : '';
+        return `<div class="ts-option-content">${icon}<span>${escape(String(data.text ?? ''))}</span></div>`;
+      };
+      settings.render = { ...settings.render, option: renderWithIcon, item: renderWithIcon };
+    }
+
+    const remote = this.options.remote;
+    if (remote) {
+      settings.valueField = remote.value;
+      if (remote.search) settings.searchField = [remote.search];
+
+      if (remote.label && remote.label.includes('{{') && remote.label.includes('}}')) {
+        const renderTemplate = (data: Record<string, any>, escape: (input: string) => string) =>
+          `<div>${remote.label.replace(/\{\{(.*?)\}\}/g, (_m, key) => escape(String(data[key] ?? '')))}</div>`;
+        settings.render = { option: renderTemplate, item: renderTemplate };
+      } else {
+        settings.labelField = remote.label;
+      }
+
+      settings.load = (query, callback) => {
+        fetch(remote.url)
+          .then((r) => r.json())
+          .then((value) => {
+            const results = remote.dataKey
+              ? remote.dataKey.split('.').reduce((acc: any, key: string) => acc && acc[key], value)
+              : value?.results ?? value;
+            callback(Array.isArray(results) ? results : []);
+          })
+          .catch(() => callback([]));
+      };
+    }
+
+    this.tomSelect = new TomSelect(this.el, settings);
+
+    if (dataset.depends) {
+      this._dependsOnEl = document.querySelector<HTMLElement>(dataset.depends);
+      this._dependsOnEl?.addEventListener('change', this._handleDependencyChange);
+    }
+  }
+}