@windwalker-io/unicorn-next 0.1.0 → 0.1.1

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

@@ -1,54 +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;
-  }
-}
+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

@@ -1,292 +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;
-}
+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;
+}