@windwalker-io/unicorn-next 0.1.0

package/src/module/field-flatpickr.ts

@@ -0,0 +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);

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

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

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

@@ -0,0 +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);

package/src/module/field-multi-uploader.ts

@@ -0,0 +1,361 @@
+import { Modal } from 'bootstrap';
+import type { Options } from 'sortablejs';
+import {
+  type ComponentPublicInstance,
+  computed,
+  createApp,
+  defineComponent,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  PropType,
+  ref,
+  useTemplateRef
+} from 'vue';
+import { VueDraggable } from 'vue-draggable-plus';
+import {
+  createItem,
+  ItemCard,
+  ItemCardPlaceholder,
+  MultiUploader,
+  MultiUploaderComposableInstance,
+  MultiUploaderOptions,
+  UploaderItem
+} from 'vue-multi-uploader';
+import css from 'vue-multi-uploader/src/vue-multi-uploader.scss?inline';
+import { useStack } from '../composable';
+import { data } from '../data';
+import { forceArray, injectCssToDocument } from '../service';
+import { mergeDeep } from '../utilities';
+
+injectCssToDocument(css);
+
+export type UniMultiUploaderOptions = {
+  value?: any[];
+  uploadUrl: string;
+  maxFiles?: number;
+  maxConcurrent?: number;
+  thumbSize?: number;
+  accept?: string;
+  readonly: boolean;
+  disabled: boolean;
+  fieldName?: string;
+  fieldFullName?: string;
+  tmplSelector: string;
+  canReplace: false;
+  openFileHandler?: (item: UploaderItem) => void;
+}
+
+const defaultOptions = {
+  readonly: false,
+  disabled: false,
+  sortable: false,
+  thumbSize: 150,
+  maxConcurrent: 5,
+  canReplace: false,
+  tmplSelector: '#multi-uploader-field-tmpl',
+};
+
+class MultiUploaderElement extends HTMLElement {
+  static is = 'uni-multi-uploader';
+
+  modalElement!: HTMLDivElement;
+  vm!: ComponentPublicInstance;
+
+  async connectedCallback() {
+    let options: Partial<UniMultiUploaderOptions> = JSON.parse(
+      this.getAttribute('options') || '{}'
+    );
+
+    const resolvedOptions: UniMultiUploaderOptions = mergeDeep({}, defaultOptions, options);
+
+    // Make some default options since PHP will send NULL
+    resolvedOptions.thumbSize ??= 150;
+
+    this.modalElement = this.querySelector<HTMLDivElement>('.modal')!;
+
+    const tmplSelector = resolvedOptions.tmplSelector;
+
+    const app = createApp(
+      createAppInstance(resolvedOptions, document.querySelector(tmplSelector)!.innerHTML, this)
+    );
+
+    this.vm = app.mount(this);
+  }
+}
+
+customElements.define(MultiUploaderElement.is, MultiUploaderElement);
+
+function createAppInstance(opt: UniMultiUploaderOptions, tmpl: string, el: MultiUploaderElement) {
+  return defineComponent({
+    name: 'MultiUploaderFieldApp',
+    template: tmpl,
+    components: {
+      VueDraggable,
+      MultiUploader,
+      ItemCard,
+      ItemCardPlaceholder,
+    },
+    props: {
+      stackName: String as PropType<string>,
+    },
+    setup(props, { expose }) {
+      const options = ref<UniMultiUploaderOptions>(opt);
+      const current = ref<UploaderItem>();
+      const currentIndex = ref<number>();
+      const loading = ref(false);
+      const dragarea = ref<HTMLDivElement>();
+      const modal = ref<HTMLDivElement>();
+      const app = getCurrentInstance();
+      const uploader = useTemplateRef<typeof MultiUploader>('uploader');
+      const canModify = computed(() => !options.value.disabled && !options.value.readonly);
+      const instance = ref<MultiUploaderComposableInstance>();
+
+      onMounted(() => {
+        instance.value = uploader.value!.instance;
+
+        domEmit('multi-uploader:mounted', { app, uploader });
+      });
+
+      const items = ref<UploaderItem[]>([]);
+
+      for (let item of forceArray(options.value.value)) {
+        if (typeof item === 'string') {
+          item = {
+            url: item
+          };
+        }
+
+        const uploadItem = createItem({
+          url: item.url || '',
+          thumbUrl: item.thumbUrl || item.thumb_url || item.url || '',
+          data: item
+        });
+
+        items.value.push(uploadItem);
+      }
+
+      const uploadUrl = options.value.uploadUrl;
+      const value = items.value;
+      const uploaderOptions = ref<MultiUploaderOptions>({
+        maxFiles: () => options.value.maxFiles,
+        readonly: () => options.value.readonly,
+        disabled: () => options.value.disabled,
+        accept: () => options.value.accept,
+        maxConcurrent: () => options.value.maxConcurrent,
+        prepareXhr(xhr) {
+          xhr.setRequestHeader(
+            'X-CSRF-TOKEN',
+            data('csrf-token')
+          );
+        },
+        onItemUploadSuccess(item, xhr) {
+          const res = JSON.parse(xhr.responseText);
+          item.url = res.data.url;
+          item.thumbUrl = res.data.thumbUrl || res.data.thumb_url || res.data.url;
+          item.data = res.data;
+          item.data.title ??= item.url.split('/').pop()?.split('?').shift() || '';
+        }
+      });
+      const draggableOptions: Options = {
+        draggable: '.c-drag-item',
+        animation: 300,
+        disabled: !canModify.value,
+      };
+
+      function openFile(item: UploaderItem) {
+        if (options.value.openFileHandler) {
+          options.value.openFileHandler(item);
+        } else {
+          window.open(item.download_url || item.url);
+        }
+      }
+
+      async function itemClick(item: UploaderItem, i: number, event: MouseEvent) {
+        current.value = item;
+        currentIndex.value = i;
+
+        domEmit('item-click', { item, i });
+
+        nextTick().then(() => {
+          Modal.getOrCreateInstance(modal.value!).show();
+        });
+        // this.$options.metaModal.modal('show');
+      }
+
+      function metaSave() {
+        current.value = undefined;
+        currentIndex.value = undefined;
+
+        // nextTick().then(() => {
+        // new bootstrap.Modal(modal.value).hide();
+        // });
+        // this.$options.metaModal.modal('hide');
+      }
+
+      function isImage(url: string) {
+        const ext = url.split('.').pop()!.split('?').shift() || '';
+        const allow = ['png', 'jpeg', 'jpg', 'gif', 'bmp', 'webp'];
+
+        return allow.indexOf(ext.toLowerCase()) !== -1;
+      }
+
+      function dragover(e: DragEvent) {
+        if (!options.value.canReplace) {
+          return;
+        }
+
+        dragarea.value!.style.opacity = '0.75';
+      }
+
+      function dragleave(e: DragEvent) {
+        if (!options.value.canReplace) {
+          return;
+        }
+
+        dragarea.value!.style.opacity = '1';
+      }
+
+      function drop(event: DragEvent) {
+        if (!options.value.canReplace) {
+          return;
+        }
+
+        dragarea.value!.style.opacity = '1';
+        const item = current.value;
+        const file = event.dataTransfer?.files[0] || null;
+
+        if (!file) {
+          return;
+        }
+
+        instance.value!.checkFile(file);
+
+        if (instance.value!.isReadonly) {
+          return;
+        }
+
+        item!.file = file;
+
+        loading.value = true;
+
+        try {
+          instance.value!.uploadFile(item!);
+        } finally {
+          loading.value = false;
+        }
+      }
+
+      function uploading() {
+        useStack(props.stackName).push(true);
+
+        domEmit('uploading');
+      }
+
+      function uploaded() {
+        useStack(props.stackName).pop();
+
+        domEmit('uploaded');
+      }
+
+      function onChange(item: UploaderItem) {
+        domEmit('change', item);
+      }
+
+      function domEmit(event: string, detail?: any) {
+        el.dispatchEvent(new CustomEvent(event, { detail }));
+      }
+
+      const foo = ref<string>();
+
+      foo.value = 'Bar';
+
+      const icons = ref<Record<string, string>>({
+        default: 'fas fa-file',
+        pdf: 'fas fa-file-pdf text-danger',
+        xls: 'fas fa-file-excel text-success',
+        xlsx: 'fas fa-file-excel text-success',
+        doc: 'fas fa-file-word text-primary',
+        docx: 'fas fa-file-word text-primary',
+        ppt: 'fas fa-file-powerpoint text-warning',
+        pptx: 'fas fa-file-powerpoint text-warning',
+        zip: 'fas fa-file-archive text-dark',
+        '7z': 'fas fa-file-archive text-dark',
+        rar: 'fas fa-file-archive text-dark',
+        mp4: 'fas fa-file-video text-dark',
+        avi: 'fas fa-file-video text-dark',
+        flv: 'fas fa-file-video text-dark',
+        mov: 'fas fa-file-video text-dark',
+        ogg: 'fas fa-file-video text-dark',
+        webm: 'fas fa-file-video text-dark',
+        mpg: 'fas fa-file-video text-dark',
+        mp3: 'fas fa-file-audio text-dark',
+        acc: 'fas fa-file-audio text-dark',
+        wav: 'fas fa-file-audio text-dark',
+      });
+
+      function setIcons(newIcons: Record<string, string>, merge = true) {
+        if (merge) {
+          icons.value = { ...icons.value, ...newIcons };
+          return;
+        }
+
+        icons.value = newIcons;
+      }
+
+      expose({
+        uploader,
+        instance,
+        value,
+        canModify,
+        openFile,
+        itemClick,
+        isImage,
+        setIcons,
+      });
+
+      function fileIcon(item: UploaderItem) {
+        let path = item.file ? item.file.name : item.url;
+
+        // strip query
+        path = String(path).split('?')[0];
+
+        // Get extension
+        const ext = path.split('.').pop() || '';
+
+        const def = 'default' in icons ? icons.default : 'fas fa-file';
+
+        return icons[String(ext || 'default').toLowerCase() as keyof typeof icons] || def;
+      }
+
+      return {
+        uploader,
+        uploadUrl,
+        value,
+        uploaderOptions,
+        draggableOptions,
+        modal,
+        dragarea,
+        options,
+        current,
+        currentIndex,
+        loading,
+        instance,
+        canModify,
+
+        openFile,
+        itemClick,
+        metaSave,
+        isImage,
+        dragover,
+        dragleave,
+        drop,
+        uploading,
+        uploaded,
+        onChange,
+        domEmit,
+        fileIcon,
+      };
+    }
+  });
+}