@windwalker-io/unicorn-next 0.1.0

package/src/module/checkboxes-multi-select.ts

@@ -0,0 +1,54 @@
+import { selectAll, selectOne } from '../service';
+
+export class CheckboxesMultiSelect {
+  defaultOptions = {
+    duration: 100,
+    inputSelector: 'input[type=checkbox][data-role=grid-checkbox]'
+  }
+
+  $element: HTMLElement;
+  options: any;
+  boxes: HTMLInputElement[];
+  last: HTMLInputElement | false = false;
+
+  static handle(selector: any, options: any = {}) {
+    return selectAll(selector, (ele: any) => new this(ele, options));
+  }
+
+  constructor(selector: any, options = {}) {
+    this.$element = selectOne<HTMLElement>(selector)!;
+    this.options = Object.assign({}, this.defaultOptions, options);
+    this.boxes = Array.from(this.$element.querySelectorAll(this.options.inputSelector));
+    this.last = false;
+
+    selectAll(this.boxes, (box: HTMLInputElement) => {
+      box.addEventListener('click', (e: MouseEvent) => {
+        this.select(box, e);
+      });
+    });
+  }
+
+  select(box: HTMLInputElement, event: MouseEvent) {
+    if (!this.last) {
+      this.last = box;
+
+      return;
+    }
+
+    if (event.shiftKey) {
+      // @ts-ignore
+      const start = [].indexOf.call(this.boxes, box);
+
+      // @ts-ignore
+      const end = [].indexOf.call(this.boxes, this.last);
+
+      const chs = [].slice.call(this.boxes, Math.min(start, end), Math.max(start, end) + 1);
+
+      [].forEach.call(chs, (ele: HTMLInputElement, i) => {
+        ele.checked = (this.last as HTMLInputElement).checked;
+      });
+    }
+
+    this.last = box;
+  }
+}

package/src/module/field-cascade-select.ts

@@ -0,0 +1,292 @@
+import AlpineComponent from '@rubenbimmel/alpine-class-component/dist/alpineComponent';
+import Component from '@rubenbimmel/alpine-class-component/dist/decorators/component';
+import { useHttpClient } from '../composable';
+import { initAlpineComponent, module, prepareAlpineDefer, uid } from '../service';
+import { mergeDeep } from '../utilities';
+
+interface CascadeSelectOptions {
+  id: string;
+  selected: string;
+  path: string[];
+  ignoreSelf: boolean | null;
+  placeholder: string;
+  placeholders: string[];
+  ajaxUrl: string;
+  ajaxValueField: string;
+  source: string[];
+  labels: string[];
+  labelWidth: string;
+  fieldWidth: string;
+  readonly: boolean;
+  disabled: boolean;
+  valueField: string;
+  textField: string;
+  horizontal: boolean | null;
+  horizontalColWidth: string | null;
+  defaultValue: string;
+  onSelectInit: Function,
+  onChange: Function,
+  onValueInit: Function,
+}
+
+const defaultOptions = {
+  id: '',
+  selected: '',
+  path: [],
+  ignoreSelf: null,
+  placeholder: '- Select -',
+  placeholders: [],
+  ajaxUrl: '',
+  ajaxValueField: 'value',
+  source: [],
+  labels: [],
+  labelWidth: 'col-md-3',
+  fieldWidth: 'col',
+  readonly: false,
+  disabled: false,
+  valueField: 'id',
+  textField: 'title',
+  horizontal: null,
+  horizontalColWidth: null,
+  defaultValue: '',
+  onSelectInit: () => {
+  },
+  onChange: () => {
+  },
+  onValueInit: () => {
+  },
+};
+
+@Component
+class FieldCascadeSelect extends AlpineComponent {
+  options: CascadeSelectOptions;
+  el?: HTMLElement;
+  canModify: boolean = false;
+  lists: any[] = [];
+  ajaxUrl: string = '';
+  values: Array<string | null> = [];
+
+  constructor(options: Partial<CascadeSelectOptions> = {}) {
+    super();
+
+    this.options = mergeDeep({}, defaultOptions, options);
+
+    this.options.id = this.options.id || 'cascade-select-' + uid();
+  }
+
+  init() {
+    this.canModify = !this.options.readonly && !this.options.disabled;
+    this.ajaxUrl = this.options.ajaxUrl;
+    this.values = this.options.path.slice().map(String);
+
+    let values: Array<string | null> = this.options.path.slice();
+
+    if (values.length === 0) {
+      values = [null];
+    } else {
+      values.unshift(null);
+    }
+
+    let promise = Promise.resolve();
+    let lastValue: string | null = null;
+
+    values.forEach((v, i) => {
+      promise = promise.then(() => {
+        return this.loadItems(v, i).then((list) => {
+          if (list.length > 0) {
+            this.lists.push(list);
+          }
+        });
+      });
+
+      lastValue = v;
+    });
+
+    this.el = this.$el;
+
+    module(this.$el, 'cascade.select', () => this);
+
+    this.valueInit(this.$el, lastValue, values);
+  }
+
+  getLabel(i: number) {
+    return this.options.labels[i] || `Level ${i + 1}`;
+  }
+
+  getId(i: number) {
+    return `${this.options.id}__level-${i}`;
+  }
+
+  getListValue(i: number) {
+    return this.values[i] || '';
+  }
+
+  isSelected(i: number, item: any) {
+    return String(this.getListValue(i)) === String(item[this.options.valueField]);
+  }
+
+  getFinalValue() {
+    const values = this.values.slice();
+
+    if (values.length === 0) {
+      return this.options.defaultValue;
+    }
+
+    const v = values
+      .filter(v => v != null)
+      .filter(v => v !== '')
+      .pop();
+
+    if (v == undefined) {
+      return this.options.defaultValue;
+    }
+
+    return v;
+  }
+
+  getLevel() {
+    return this.values.length;
+  }
+
+  async onChange(i: number, event: Event) {
+    const el = event.target as HTMLSelectElement;
+
+    this.values[i] = el.value;
+
+    this.options.onChange(event);
+
+    event.stopPropagation();
+
+    const changeEvent = new CustomEvent('change', {
+      detail: {
+        el,
+        component: this,
+        value: el.value,
+        path: this.values
+      }
+    });
+
+    this.el?.dispatchEvent(changeEvent);
+
+    if (el.value === '') {
+      // Clear child
+      this.lists.splice(i + 1);
+      this.values.splice(i + 1);
+      return;
+    }
+
+    // Get child list
+    let list = await this.loadItems(el.value, i);
+    this.lists.splice(i + 1);
+    this.values.splice(i + 1);
+    if (list.length > 0) {
+      this.lists.push(list);
+    }
+  }
+
+  async loadItems(parentId: string | null, i: number) {
+    // Ajax
+    if (this.ajaxUrl) {
+      const http = await useHttpClient();
+
+      let res = await http.get(
+        this.ajaxUrl,
+        {
+          params: {
+            [this.options.ajaxValueField]: parentId,
+            self: this.options.ignoreSelf || null
+          }
+        }
+      );
+      return await res.data.data;
+    }
+
+    // Source
+    if (parentId) {
+      return Promise.resolve(
+        this.handleSourceItems(
+          this.findFromList(this.lists[i - 1] || [], parentId)?.children || []
+        )
+      );
+    }
+
+    return Promise.resolve(this.handleSourceItems(this.options.source));
+  }
+
+  valueInit($select: HTMLElement, value: string | null, path: Array<string | null>) {
+    const event = new CustomEvent('value.init', {
+      detail: {
+        el: $select,
+        component: this,
+        value,
+        path
+      }
+    });
+
+    this.options.onSelectInit(event);
+
+    this.$el.dispatchEvent(event);
+  }
+
+  selectInit($select: HTMLElement) {
+    const event = new CustomEvent('select.init', {
+      detail: {
+        el: $select,
+        component: this,
+      }
+    });
+
+    this.options.onSelectInit(event);
+
+    this.$el.dispatchEvent(event);
+  }
+
+  handleSourceItems(items: any[]) {
+    return items.map(item => {
+      return {
+        [this.options.valueField]: item.value[this.options.valueField],
+        [this.options.textField]: item.value[this.options.textField],
+        children: item.children
+      };
+    })
+      .filter(item => {
+        if (this.options.ignoreSelf) {
+          return item[this.options.valueField] != this.options.ignoreSelf;
+        }
+
+        return item;
+      });
+  }
+
+  findFromList(items: any[], value: string) {
+    const found = items.filter(item => item[this.options.valueField] == value);
+
+    return found.shift();
+  }
+
+  getPlaceholder(i: number) {
+    if (this.options.placeholders[i]) {
+      return this.options.placeholders[i];
+    }
+
+    return this.options.placeholder;
+  }
+}
+
+declare global {
+  var S: any;
+}
+
+async function init() {
+  await prepareAlpineDefer(() => {
+    Alpine.data('CascadeSelect', (options: CascadeSelectOptions) => new FieldCascadeSelect(options));
+  });
+
+  await initAlpineComponent('data-cascade-select');
+}
+
+export const ready = init();
+
+export interface CascadeSelectModule {
+  ready: typeof ready;
+}

package/src/module/field-file-drag.ts

@@ -0,0 +1,292 @@
+import css from '../../scss/field/file-drag.scss?inline';
+import { useUniDirective } from '../composable';
+import { __, html, injectCssToDocument, simpleAlert, uid, watchAttributes } from '../service';
+import { mergeDeep } from '../utilities';
+
+injectCssToDocument(document, css);
+
+export interface FileDragOptions {
+  maxFiles: number | undefined;
+  maxSize: number | undefined;
+  placeholder: string;
+  height: number;
+}
+
+const defaultOptions: FileDragOptions = {
+  maxFiles: undefined,
+  maxSize: undefined,
+  placeholder: '',
+  height: 125,
+}
+
+export class FileDragElement extends HTMLElement {
+  static is = 'uni-file-drag';
+
+  element!: HTMLInputElement;
+  overlayLabel!: HTMLLabelElement;
+  button!: HTMLButtonElement;
+  options!: FileDragOptions;
+
+  get inputSelector() {
+    return this.getAttribute('selector') || 'input[type=file]';
+  }
+
+  get multiple() {
+    return this.element.multiple;
+  }
+
+  connectedCallback(): void {
+    this.element = this.querySelector(this.inputSelector)!;
+
+    this.prepareElements();
+
+    const options = JSON.parse(this.getAttribute('options') || '{}') || {};
+
+    const observer = watchAttributes(this.element);
+    observer.watch('readonly', (el) => {
+      el.disabled = el.readOnly;
+    });
+
+    if (this.element.readOnly) {
+      this.element.disabled = true;
+    }
+
+    this.options = mergeDeep({}, defaultOptions, options);
+
+    this.bindEvent();
+
+    this.style.visibility = '';
+
+    this.style.height = (this.options.height || 100) + 'px';
+  }
+
+  bindEvent() {
+    this.element.addEventListener('dragover', () => {
+      this.element.classList.add('hover');
+    });
+
+    this.element.addEventListener('dragleave', () => {
+      this.element.classList.remove('hover');
+    });
+
+    this.element.addEventListener('drop', () => {
+      this.element.classList.remove('hover');
+    });
+
+    this.onChange();
+
+    this.element.addEventListener('change', (e) => {
+      this.onChange(e);
+    });
+    this.element.addEventListener('input', (e) => {
+      this.onChange(e);
+    });
+  }
+
+  prepareElements() {
+    if (this.children.length === 0) {
+      this.createElementsLayout();
+    }
+
+    this.overlayLabel = this.querySelector<HTMLLabelElement>('[data-overlay-label]')!;
+
+    let button = this.overlayLabel.querySelector('button');
+
+    // B/C for new file drag style
+    if (!button) {
+      button = document.createElement('button');
+      button.type = 'button';
+      button.setAttribute('class', 'c-file-drag-input__button btn btn-success btn-sm px-2 py-1');
+      button.innerText = __('unicorn.field.file.drag.button.text');
+      this.overlayLabel.appendChild(button);
+    }
+
+    this.button = button;
+  }
+
+  createElementsLayout() {
+    this.id ||= 'c-file-drag-' + uid();
+    const name = this.getAttribute('name') || 'file';
+    const inputId = this.id + '__input';
+    const btnText = __('unicorn.field.file.drag.button.text');
+
+    const input = html(`<input id="${inputId}" type="file" name="${name}" />`);
+    const label = html(`<label class="px-3 c-file-drag-input__label"
+        data-overlay-label
+        for="${inputId}">
+        <span class="label-text d-block">
+            <span class="fa fa-upload"></span>
+        </span>
+        <button type="button" class="c-file-drag-input__button btn btn-success btn-sm px-2 py-1">
+            ${btnText}
+        </button>
+    </label>`);
+
+    this.element = input as HTMLInputElement;
+    this.overlayLabel = label as HTMLLabelElement;
+
+    this.appendChild(input);
+    this.appendChild(label);
+  }
+
+  onChange(evt?: Event) {
+    const files = this.element.files || [];
+    const limit = this.options.maxFiles;
+    const maxSize = this.options.maxSize;
+    let placeholder = this.options.placeholder;
+
+    const accepted = (this.element.getAttribute('accept') || this.element.getAttribute('data-accepted') || '')
+      .split(',')
+      .map(v => v.trim())
+      .filter(v => v.length > 0)
+      .map(v => {
+        if (v.indexOf('/') === -1 && v[0] === '.') {
+          return v.substring(1);
+        }
+
+        return v;
+      });
+
+    let text: string;
+
+    if (!placeholder) {
+      if (this.multiple) {
+        placeholder = __('unicorn.field.file.drag.placeholder.multiple');
+      } else {
+        placeholder = __('unicorn.field.file.drag.placeholder.single');
+      }
+    }
+
+    // Files limit
+    if (limit && files.length > limit) {
+      this.alert(__('unicorn.field.file.drag.message.max.files', limit), '', 'warning');
+      evt?.preventDefault();
+      return;
+    }
+
+    // Files size
+    let fileSize = 0;
+    Array.prototype.forEach.call(files, file => {
+      this.checkFileType(accepted, file);
+
+      fileSize += file.size;
+    });
+
+    if (maxSize && (fileSize / 1024 / 1024) > maxSize) {
+      this.alert(
+        __(
+          'unicorn.field.file.drag.message.max.size',
+          maxSize < 1 ? (maxSize * 1024) + 'KB' : maxSize + 'MB'
+        ),
+        '',
+        'warning'
+      );
+      evt?.preventDefault();
+      return;
+    }
+
+    if (files.length > 1) {
+      text = `<span class="fa fa-files fa-copy"></span> ${__('unicorn.field.file.drag.selected', files.length)}`;
+    } else if (files.length === 1) {
+      text = `<span class="fa fa-file"></span> ${files[0].name}`;
+    } else {
+      text = `<span class="fa fa-upload"></span> ${placeholder}`;
+    }
+
+    //replace the "Choose a file" label
+    this.overlayLabel.querySelector<HTMLSpanElement>('span')!.innerHTML = text;
+  }
+
+  checkFileType(accepted: string[], file: File) {
+    const fileExt = file.name.split('.').pop() || '';
+
+    if (accepted.length) {
+      let allow = false;
+
+      accepted.forEach((type) => {
+        if (allow) {
+          return;
+        }
+
+        if (type.indexOf('/') !== -1) {
+          if (this.compareMimeType(type, file.type)) {
+            allow = true;
+          }
+        } else {
+          if (type.toLowerCase() === fileExt.toLowerCase()) {
+            allow = true;
+          }
+        }
+      });
+
+      if (!allow) {
+        this.alert(
+          __('unicorn.field.file.drag.message.unaccepted.files'),
+          __('unicorn.field.file.drag.message.unaccepted.files.desc', accepted.join(', ')),
+          'warning'
+        );
+        throw new Error('Not accepted file ext');
+      }
+    }
+  }
+
+  compareMimeType(accepted: string, mime: string) {
+    const accepted2 = accepted.split('/');
+    const mime2 = mime.split('/');
+
+    if (accepted2[1] === '*') {
+      return accepted2[0] === mime2[0];
+    }
+
+    return accepted === mime;
+  }
+
+  async alert(title: string, text: string = '', type: string = 'info') {
+    await simpleAlert(title, text, type);
+  }
+}
+
+customElements.define(FileDragElement.is, FileDragElement);
+
+export const ready = useUniDirective('file-drag-field', {
+  mounted(el) {
+    const input = el.querySelector<HTMLInputElement>('input[type=file]')!;
+    const placeholderInput = el.querySelector<HTMLInputElement>('[data-role=placeholder]')!;
+
+    const preview = el.querySelector('.c-file-drag-preview');
+
+    if (preview) {
+      const previewLink = preview.querySelector<HTMLAnchorElement>('.c-file-drag-preview__link')!;
+      const delButton = preview.querySelector<HTMLAnchorElement>('.c-file-drag-preview__delete')!;
+      // let linkTitle = previewLink.textContent;
+      let inputValue = placeholderInput.value;
+      let required = input.required;
+
+      if (placeholderInput.value) {
+        input.required = false;
+      }
+
+      delButton.addEventListener('click', () => {
+        if (delButton.classList.contains('active')) {
+          // Restore
+          previewLink.style.textDecoration = '';
+          previewLink.style.setProperty('color', '');
+          placeholderInput.value = inputValue;
+          delButton.classList.remove('active');
+          input.required = false;
+        } else {
+          // Delete
+          previewLink.style.textDecoration = 'line-through';
+          previewLink.style.color = 'var(--fd-delete-color, var(--bs-danger))';
+          placeholderInput.value = '';
+          delButton.classList.add('active');
+          input.required = required;
+        }
+      });
+    }
+  }
+});
+
+export interface FileDragModule {
+  FileDragElement: typeof FileDragElement;
+}