@windwalker-io/unicorn-next 0.1.0 → 0.1.1

package/src/module/field-flatpickr.ts

@@ -1,127 +1,127 @@
-import { useCssImport, useImport, injectCssToDocument } from '../service';
-import flatpickr from 'flatpickr';
-import css from 'flatpickr/dist/flatpickr.css?inline';
-
-injectCssToDocument(css);
-
-class FlatpickrElement extends HTMLElement {
-  static get is() {
-    return 'uni-flatpickr';
-  }
-
-  instance!: flatpickr.Instance;
-
-  constructor() {
-    super();
-  }
-
-  get selector() {
-    return this.getAttribute('selector') || 'input';
-  }
-
-  get locale() {
-    return this.getAttribute('locale') || '';
-  }
-
-  // todo: Currently not support single option attributes
-  getOptions() {
-    const options: any = {};
-    const ignore = [
-      'selector'
-    ];
-
-    this.getAttributeNames().forEach((name) => {
-      if (ignore.indexOf(name) !== -1) {
-        return;
-      }
-
-      options[name] = this.getAttribute(name);
-    });
-
-    return options;
-  }
-
-  get $input(): HTMLInputElement {
-    return this.querySelector<HTMLInputElement>('input')!;
-  }
-
-  async connectedCallback() {
-    let options: flatpickr.Options.Options = JSON.parse(this.getAttribute('options') || '{}') || {};
-
-    options.autoFillDefaultTime = true;
-    const now = new Date();
-    options.defaultHour = now.getHours();
-    options.defaultMinute = now.getMinutes();
-    options.defaultSeconds = now.getSeconds();
-
-    options = await this.handleOptions(options);
-
-    this.instance = flatpickr(
-      this.querySelector<HTMLElement>(this.selector)!,
-      options
-    );
-
-    // If no value, set default time on open
-    this.instance.config.onOpen.push(() => {
-      if (this.instance.input.value === '') {
-        const now = new Date();
-        this.instance.jumpToDate(now);
-        this.instance.config.defaultHour = now.getHours();
-        this.instance.config.defaultMinute = now.getMinutes();
-        this.instance.config.defaultSeconds = now.getSeconds();
-      }
-    });
-
-    this.querySelector('[data-toggle]')?.addEventListener('click', () => {
-      setTimeout(() => {
-        this.querySelector<HTMLInputElement>('[data-input]')?.focus();
-      }, 0);
-    });
-  }
-
-  async handleOptions(options: flatpickr.Options.Options): Promise<flatpickr.Options.Options> {
-    options.plugins = options.plugins || [];
-
-    await Promise.all([
-      this.handleLocale(options),
-      this.handleMonthSelect(options)
-    ]);
-
-    return options;
-  }
-
-  private async handleLocale(options: Record<string, any>) {
-    if (this.locale) {
-      await useImport(`flatpickr/dist/l10n/${this.locale}.js`);
-
-      options.locale = this.locale.replace(/-/, '_');
-    }
-
-    return options;
-  }
-
-  private async handleMonthSelect(options: Record<string, any>) {
-    if (options.monthSelect) {
-      useCssImport('flatpickr/dist/plugins/monthSelect/style.css');
-      const { default: monthSelect } = await import('flatpickr/dist/plugins/monthSelect');
-
-      if (typeof options.monthSelect === 'boolean') {
-        options.monthSelect = {
-          shorthand: true,
-          dateFormat: 'Y-m',
-          altFormat: 'Y-m'
-        };
-      }
-
-      options.plugins.push(monthSelect(options.monthSelect));
-    }
-
-    return options;
-  }
-
-  getInstance() {
-    return this.instance;
-  }
-}
-
-customElements.define(FlatpickrElement.is, FlatpickrElement);
+import { useCssImport, useImport, injectCssToDocument } from '../service';
+import flatpickr from 'flatpickr';
+import css from 'flatpickr/dist/flatpickr.css?inline';
+
+injectCssToDocument(css);
+
+class FlatpickrElement extends HTMLElement {
+  static get is() {
+    return 'uni-flatpickr';
+  }
+
+  instance!: flatpickr.Instance;
+
+  constructor() {
+    super();
+  }
+
+  get selector() {
+    return this.getAttribute('selector') || 'input';
+  }
+
+  get locale() {
+    return this.getAttribute('locale') || '';
+  }
+
+  // todo: Currently not support single option attributes
+  getOptions() {
+    const options: any = {};
+    const ignore = [
+      'selector'
+    ];
+
+    this.getAttributeNames().forEach((name) => {
+      if (ignore.indexOf(name) !== -1) {
+        return;
+      }
+
+      options[name] = this.getAttribute(name);
+    });
+
+    return options;
+  }
+
+  get $input(): HTMLInputElement {
+    return this.querySelector<HTMLInputElement>('input')!;
+  }
+
+  async connectedCallback() {
+    let options: flatpickr.Options.Options = JSON.parse(this.getAttribute('options') || '{}') || {};
+
+    options.autoFillDefaultTime = true;
+    const now = new Date();
+    options.defaultHour = now.getHours();
+    options.defaultMinute = now.getMinutes();
+    options.defaultSeconds = now.getSeconds();
+
+    options = await this.handleOptions(options);
+
+    this.instance = flatpickr(
+      this.querySelector<HTMLElement>(this.selector)!,
+      options
+    );
+
+    // If no value, set default time on open
+    this.instance.config.onOpen.push(() => {
+      if (this.instance.input.value === '') {
+        const now = new Date();
+        this.instance.jumpToDate(now);
+        this.instance.config.defaultHour = now.getHours();
+        this.instance.config.defaultMinute = now.getMinutes();
+        this.instance.config.defaultSeconds = now.getSeconds();
+      }
+    });
+
+    this.querySelector('[data-toggle]')?.addEventListener('click', () => {
+      setTimeout(() => {
+        this.querySelector<HTMLInputElement>('[data-input]')?.focus();
+      }, 0);
+    });
+  }
+
+  async handleOptions(options: flatpickr.Options.Options): Promise<flatpickr.Options.Options> {
+    options.plugins = options.plugins || [];
+
+    await Promise.all([
+      this.handleLocale(options),
+      this.handleMonthSelect(options)
+    ]);
+
+    return options;
+  }
+
+  private async handleLocale(options: Record<string, any>) {
+    if (this.locale) {
+      await useImport(`flatpickr/dist/l10n/${this.locale}.js`);
+
+      options.locale = this.locale.replace(/-/, '_');
+    }
+
+    return options;
+  }
+
+  private async handleMonthSelect(options: Record<string, any>) {
+    if (options.monthSelect) {
+      useCssImport('flatpickr/dist/plugins/monthSelect/style.css');
+      const { default: monthSelect } = await import('flatpickr/dist/plugins/monthSelect');
+
+      if (typeof options.monthSelect === 'boolean') {
+        options.monthSelect = {
+          shorthand: true,
+          dateFormat: 'Y-m',
+          altFormat: 'Y-m'
+        };
+      }
+
+      options.plugins.push(monthSelect(options.monthSelect));
+    }
+
+    return options;
+  }
+
+  getInstance() {
+    return this.instance;
+  }
+}
+
+customElements.define(FlatpickrElement.is, FlatpickrElement);

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

@@ -1,174 +1,174 @@
-import type { IFrameModalElement } from './iframe-modal';
-import { data } from '../data';
-import { __, highlight, html, selectOne, slideUp } from '../service';
-import { template } from 'lodash-es';
-
-export type ModalSelectCallback = (item: any) => void;
-
-export function createCallback(type: 'list' | 'single', selector: string, modalSelector: string): ModalSelectCallback {
-  switch (type) {
-    // case 'tag':
-    //   return () => {
-    //
-    //   };
-    case 'list':
-      return (item: any) => {
-        const modalList = document.querySelector(selector) as any as ModalListSelectElement;
-
-        if (!modalList.querySelector(`[data-value="${item.value}"]`)) {
-          modalList.appendItem(item, true);
-
-          selectOne<IFrameModalElement>(modalSelector)?.close();
-        } else {
-          alert(__('unicorn.field.modal.already.selected'));
-        }
-      };
-
-    case 'single':
-    default:
-      return (item) => {
-        const element = document.querySelector<HTMLDivElement>(selector)!;
-
-        const image = element.querySelector<HTMLDivElement>('[data-role=image]')!;
-        const title = element.querySelector<HTMLInputElement>('[data-role=title]')!;
-        const store = element.querySelector<HTMLInputElement>('[data-role=value]')!;
-
-        if (image && item.image) {
-          image.style.backgroundImage = `url(${item.image});`;
-        }
-
-        title.value = item.title || '';
-        store.value = item.value || '';
-
-        store.dispatchEvent(new CustomEvent('change'));
-
-        selectOne<IFrameModalElement>(modalSelector)?.close();
-
-        highlight(title);
-      };
-  }
-}
-
-interface ModalListOptions {
-  modalSelector: string;
-  itemTemplate: string;
-  sortable: boolean;
-  dataKey: string;
-  max: number;
-}
-
-class ModalListSelectElement extends HTMLElement {
-  static is = 'uni-modal-list';
-
-  itemTemplate!: ReturnType<typeof template>;
-  options!: ModalListOptions;
-
-  get listContainer() {
-    return this.querySelector<HTMLDivElement>('[data-role=list-container]')!;
-  }
-
-  get modal() {
-    return document.querySelector<IFrameModalElement>(this.options.modalSelector);
-  }
-
-  get items(): Element[] {
-    return Array.from(this.listContainer.children);
-  }
-
-  connectedCallback() {
-    this.options = JSON.parse(this.getAttribute('options') || '{}');
-    this.itemTemplate = template(document.querySelector(this.options.itemTemplate)!.innerHTML);
-
-    const emptyInput = this.querySelector<HTMLInputElement>('[data-role=empty]');
-
-    if (emptyInput) {
-      emptyInput.name = emptyInput.dataset.name || '';
-    }
-
-    if (this.options.sortable) {
-      import('sortablejs').then(({ default: Sortable }) => {
-        new Sortable(this.listContainer, { handle: '.h-drag-handle', animation: 150 });
-      });
-    }
-
-    const selectButton = this.querySelector<HTMLButtonElement>('[data-role=select]')!;
-    selectButton.addEventListener('click', (e) => {
-      this.open(e);
-    });
-
-    this.querySelector('[data-role=clear]')?.addEventListener('click', () => {
-      this.items.forEach((item) => {
-        item.querySelector<HTMLButtonElement>('[data-role=remove]')?.click();
-      });
-    });
-
-    selectButton.style.pointerEvents = '';
-
-    this.render();
-  }
-
-  render() {
-    const items: Record<string, any>[] = data('unicorn.modal-field')[this.options.dataKey] || [];
-
-    items.forEach((item) => {
-      this.appendItem(item);
-    });
-  }
-
-  appendItem(item: Record<string, any>, highlights = false) {
-    const itemHtml = html(this.itemTemplate({ item }));
-
-    itemHtml.dataset.value = item.value;
-    itemHtml.querySelector<HTMLButtonElement>('[data-role=remove]')?.addEventListener('click', () => {
-      slideUp(itemHtml).then(() => {
-        itemHtml.remove();
-        this.toggleRequired();
-      });
-    });
-
-    this.listContainer.appendChild(itemHtml);
-    this.toggleRequired();
-
-    if (highlights) {
-      highlight(itemHtml);
-    }
-  }
-
-  toggleRequired() {
-    const placeholder = this.querySelector<HTMLInputElement>('[data-role=validation-placeholder]');
-
-    if (placeholder) {
-      placeholder.disabled = this.listContainer.children.length !== 0;
-    }
-  }
-
-  open(event: Event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const max = this.options.max;
-
-    const target = event.target as HTMLAnchorElement;
-
-    if (!max) {
-      this.modal?.open(target.href, { size: 'modal-xl' });
-      return;
-    }
-
-    if (this.listContainer.children.length >= max) {
-      alert(
-        __('unicorn.field.modal.max.selected', max)
-      );
-
-      return;
-    }
-
-    this.modal?.open(target.href, { size: 'modal-xl' });
-  }
-}
-
-customElements.define(ModalListSelectElement.is, ModalListSelectElement);
-
-export interface ModalSelectModule {
-  createCallback: typeof createCallback;
-}
+import type { IFrameModalElement } from './iframe-modal';
+import { data } from '../data';
+import { __, highlight, html, selectOne, slideUp } from '../service';
+import { template } from 'lodash-es';
+
+export type ModalSelectCallback = (item: any) => void;
+
+export function createCallback(type: 'list' | 'single', selector: string, modalSelector: string): ModalSelectCallback {
+  switch (type) {
+    // case 'tag':
+    //   return () => {
+    //
+    //   };
+    case 'list':
+      return (item: any) => {
+        const modalList = document.querySelector(selector) as any as ModalListSelectElement;
+
+        if (!modalList.querySelector(`[data-value="${item.value}"]`)) {
+          modalList.appendItem(item, true);
+
+          selectOne<IFrameModalElement>(modalSelector)?.close();
+        } else {
+          alert(__('unicorn.field.modal.already.selected'));
+        }
+      };
+
+    case 'single':
+    default:
+      return (item) => {
+        const element = document.querySelector<HTMLDivElement>(selector)!;
+
+        const image = element.querySelector<HTMLDivElement>('[data-role=image]')!;
+        const title = element.querySelector<HTMLInputElement>('[data-role=title]')!;
+        const store = element.querySelector<HTMLInputElement>('[data-role=value]')!;
+
+        if (image && item.image) {
+          image.style.backgroundImage = `url(${item.image});`;
+        }
+
+        title.value = item.title || '';
+        store.value = item.value || '';
+
+        store.dispatchEvent(new CustomEvent('change'));
+
+        selectOne<IFrameModalElement>(modalSelector)?.close();
+
+        highlight(title);
+      };
+  }
+}
+
+interface ModalListOptions {
+  modalSelector: string;
+  itemTemplate: string;
+  sortable: boolean;
+  dataKey: string;
+  max: number;
+}
+
+class ModalListSelectElement extends HTMLElement {
+  static is = 'uni-modal-list';
+
+  itemTemplate!: ReturnType<typeof template>;
+  options!: ModalListOptions;
+
+  get listContainer() {
+    return this.querySelector<HTMLDivElement>('[data-role=list-container]')!;
+  }
+
+  get modal() {
+    return document.querySelector<IFrameModalElement>(this.options.modalSelector);
+  }
+
+  get items(): Element[] {
+    return Array.from(this.listContainer.children);
+  }
+
+  connectedCallback() {
+    this.options = JSON.parse(this.getAttribute('options') || '{}');
+    this.itemTemplate = template(document.querySelector(this.options.itemTemplate)!.innerHTML);
+
+    const emptyInput = this.querySelector<HTMLInputElement>('[data-role=empty]');
+
+    if (emptyInput) {
+      emptyInput.name = emptyInput.dataset.name || '';
+    }
+
+    if (this.options.sortable) {
+      import('sortablejs').then(({ default: Sortable }) => {
+        new Sortable(this.listContainer, { handle: '.h-drag-handle', animation: 150 });
+      });
+    }
+
+    const selectButton = this.querySelector<HTMLButtonElement>('[data-role=select]')!;
+    selectButton.addEventListener('click', (e) => {
+      this.open(e);
+    });
+
+    this.querySelector('[data-role=clear]')?.addEventListener('click', () => {
+      this.items.forEach((item) => {
+        item.querySelector<HTMLButtonElement>('[data-role=remove]')?.click();
+      });
+    });
+
+    selectButton.style.pointerEvents = '';
+
+    this.render();
+  }
+
+  render() {
+    const items: Record<string, any>[] = data('unicorn.modal-field')[this.options.dataKey] || [];
+
+    items.forEach((item) => {
+      this.appendItem(item);
+    });
+  }
+
+  appendItem(item: Record<string, any>, highlights = false) {
+    const itemHtml = html(this.itemTemplate({ item }));
+
+    itemHtml.dataset.value = item.value;
+    itemHtml.querySelector<HTMLButtonElement>('[data-role=remove]')?.addEventListener('click', () => {
+      slideUp(itemHtml).then(() => {
+        itemHtml.remove();
+        this.toggleRequired();
+      });
+    });
+
+    this.listContainer.appendChild(itemHtml);
+    this.toggleRequired();
+
+    if (highlights) {
+      highlight(itemHtml);
+    }
+  }
+
+  toggleRequired() {
+    const placeholder = this.querySelector<HTMLInputElement>('[data-role=validation-placeholder]');
+
+    if (placeholder) {
+      placeholder.disabled = this.listContainer.children.length !== 0;
+    }
+  }
+
+  open(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const max = this.options.max;
+
+    const target = event.target as HTMLAnchorElement;
+
+    if (!max) {
+      this.modal?.open(target.href, { size: 'modal-xl' });
+      return;
+    }
+
+    if (this.listContainer.children.length >= max) {
+      alert(
+        __('unicorn.field.modal.max.selected', max)
+      );
+
+      return;
+    }
+
+    this.modal?.open(target.href, { size: 'modal-xl' });
+  }
+}
+
+customElements.define(ModalListSelectElement.is, ModalListSelectElement);
+
+export interface ModalSelectModule {
+  createCallback: typeof createCallback;
+}

package/src/module/field-modal-tree.ts

@@ -1,27 +1,27 @@
-import { data } from '../data';
-import { useCssImport } from '../service';
-import { createApp } from 'vue';
-import ModalTreeApp from '../vue/components/ModalTree/ModalTreeApp.vue';
-useCssImport('@vue-animate');
-
-const app = createApp({
-  name: 'modal-tree',
-  components: {
-    ModalTreeApp
-  }
-});
-app.config.globalProperties.$getData = data;
-
-class ModalTreeElement extends HTMLElement {
-  static is = 'modal-tree';
-
-  vm: any;
-
-  connectedCallback() {
-    if (!this.vm) {
-      this.vm = app.mount(this);
-    }
-  }
-}
-
-customElements.define(ModalTreeElement.is, ModalTreeElement);
+import { data } from '../data';
+import { useCssImport } from '../service';
+import { createApp } from 'vue';
+import ModalTreeApp from '../vue/components/ModalTree/ModalTreeApp.vue';
+useCssImport('@vue-animate');
+
+const app = createApp({
+  name: 'modal-tree',
+  components: {
+    ModalTreeApp
+  }
+});
+app.config.globalProperties.$getData = data;
+
+class ModalTreeElement extends HTMLElement {
+  static is = 'modal-tree';
+
+  vm: any;
+
+  connectedCallback() {
+    if (!this.vm) {
+      this.vm = app.mount(this);
+    }
+  }
+}
+
+customElements.define(ModalTreeElement.is, ModalTreeElement);