@windwalker-io/unicorn-next 0.1.0

package/dist/chunks/field-cascade-select.js

@@ -0,0 +1,256 @@
+import { g as getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { a4 as prepareAlpineDefer, f as initAlpineComponent, a5 as mergeDeep, K as uid, z as module, u as useHttpClient } from "./unicorn.js";
+var alpineComponent = {};
+var hasRequiredAlpineComponent;
+function requireAlpineComponent() {
+  if (hasRequiredAlpineComponent) return alpineComponent;
+  hasRequiredAlpineComponent = 1;
+  Object.defineProperty(alpineComponent, "__esModule", { value: true });
+  class AlpineComponent2 {
+  }
+  alpineComponent.default = AlpineComponent2;
+  return alpineComponent;
+}
+var alpineComponentExports = /* @__PURE__ */ requireAlpineComponent();
+const AlpineComponent = /* @__PURE__ */ getDefaultExportFromCjs(alpineComponentExports);
+var component = {};
+var hasRequiredComponent;
+function requireComponent() {
+  if (hasRequiredComponent) return component;
+  hasRequiredComponent = 1;
+  Object.defineProperty(component, "__esModule", { value: true });
+  function Component2(component2) {
+    return function(...args) {
+      let instance = new component2(...args);
+      const proto = component2.prototype;
+      let data = {};
+      Object.getOwnPropertyNames(proto).forEach(function(key) {
+        if (key === "constructor") {
+          return;
+        }
+        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+        if (descriptor.value !== void 0) {
+          if (typeof descriptor.value === "function") {
+            data[key] = descriptor.value;
+          }
+        } else if (descriptor.get || descriptor.set) {
+          Object.defineProperty(data, key, { get: descriptor.get, set: descriptor.set });
+        }
+      });
+      return Object.assign(data, instance);
+    };
+  }
+  component.default = Component2;
+  return component;
+}
+var componentExports = /* @__PURE__ */ requireComponent();
+const Component = /* @__PURE__ */ getDefaultExportFromCjs(componentExports);
+var __getOwnPropDesc = /* @__PURE__ */ (() => Object.getOwnPropertyDescriptor)();
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+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: () => {
+  }
+};
+let FieldCascadeSelect = class extends AlpineComponent {
+  options;
+  el;
+  canModify = false;
+  lists = [];
+  ajaxUrl = "";
+  values = [];
+  constructor(options = {}) {
+    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 = this.options.path.slice();
+    if (values.length === 0) {
+      values = [null];
+    } else {
+      values.unshift(null);
+    }
+    let promise = Promise.resolve();
+    let lastValue = 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) {
+    return this.options.labels[i] || `Level ${i + 1}`;
+  }
+  getId(i) {
+    return `${this.options.id}__level-${i}`;
+  }
+  getListValue(i) {
+    return this.values[i] || "";
+  }
+  isSelected(i, item) {
+    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((v2) => v2 != null).filter((v2) => v2 !== "").pop();
+    if (v == void 0) {
+      return this.options.defaultValue;
+    }
+    return v;
+  }
+  getLevel() {
+    return this.values.length;
+  }
+  async onChange(i, event) {
+    const el = event.target;
+    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 === "") {
+      this.lists.splice(i + 1);
+      this.values.splice(i + 1);
+      return;
+    }
+    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, i) {
+    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;
+    }
+    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, value, path) {
+    const event = new CustomEvent("value.init", {
+      detail: {
+        el: $select,
+        component: this,
+        value,
+        path
+      }
+    });
+    this.options.onSelectInit(event);
+    this.$el.dispatchEvent(event);
+  }
+  selectInit($select) {
+    const event = new CustomEvent("select.init", {
+      detail: {
+        el: $select,
+        component: this
+      }
+    });
+    this.options.onSelectInit(event);
+    this.$el.dispatchEvent(event);
+  }
+  handleSourceItems(items) {
+    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, value) {
+    const found = items.filter((item) => item[this.options.valueField] == value);
+    return found.shift();
+  }
+  getPlaceholder(i) {
+    if (this.options.placeholders[i]) {
+      return this.options.placeholders[i];
+    }
+    return this.options.placeholder;
+  }
+};
+FieldCascadeSelect = /* @__PURE__ */ __decorateClass([
+  Component
+], FieldCascadeSelect);
+async function init() {
+  await prepareAlpineDefer(() => {
+    Alpine.data("CascadeSelect", (options) => new FieldCascadeSelect(options));
+  });
+  await initAlpineComponent("data-cascade-select");
+}
+const ready = /* @__PURE__ */ init();
+export {
+  ready
+};
+//# sourceMappingURL=field-cascade-select.js.map

package/dist/chunks/field-cascade-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-cascade-select.js","sources":["../../../../../../node_modules/@rubenbimmel/alpine-class-component/dist/alpineComponent.js","../../../../../../node_modules/@rubenbimmel/alpine-class-component/dist/decorators/component.js","../../src/module/field-cascade-select.ts"],"sourcesContent":["\"use strict\";\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nclass AlpineComponent {\r\n}\r\nexports.default = AlpineComponent;\r\n","\"use strict\";\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nfunction Component(component) {\r\n    return function (...args) {\r\n        let instance = new component(...args);\r\n        const proto = component.prototype;\r\n        let data = {};\r\n        Object.getOwnPropertyNames(proto).forEach(function (key) {\r\n            if (key === 'constructor') {\r\n                return;\r\n            }\r\n            const descriptor = Object.getOwnPropertyDescriptor(proto, key);\r\n            if (descriptor.value !== void 0) {\r\n                if (typeof descriptor.value === 'function') {\r\n                    data[key] = descriptor.value;\r\n                }\r\n            }\r\n            else if (descriptor.get || descriptor.set) {\r\n                Object.defineProperty(data, key, { get: descriptor.get, set: descriptor.set });\r\n            }\r\n        });\r\n        return Object.assign(data, instance);\r\n    };\r\n}\r\nexports.default = Component;\r\n","import AlpineComponent from '@rubenbimmel/alpine-class-component/dist/alpineComponent';\r\nimport Component from '@rubenbimmel/alpine-class-component/dist/decorators/component';\r\nimport { useHttpClient } from '../composable';\r\nimport { initAlpineComponent, module, prepareAlpineDefer, uid } from '../service';\r\nimport { mergeDeep } from '../utilities';\r\n\r\ninterface CascadeSelectOptions {\r\n  id: string;\r\n  selected: string;\r\n  path: string[];\r\n  ignoreSelf: boolean | null;\r\n  placeholder: string;\r\n  placeholders: string[];\r\n  ajaxUrl: string;\r\n  ajaxValueField: string;\r\n  source: string[];\r\n  labels: string[];\r\n  labelWidth: string;\r\n  fieldWidth: string;\r\n  readonly: boolean;\r\n  disabled: boolean;\r\n  valueField: string;\r\n  textField: string;\r\n  horizontal: boolean | null;\r\n  horizontalColWidth: string | null;\r\n  defaultValue: string;\r\n  onSelectInit: Function,\r\n  onChange: Function,\r\n  onValueInit: Function,\r\n}\r\n\r\nconst defaultOptions = {\r\n  id: '',\r\n  selected: '',\r\n  path: [],\r\n  ignoreSelf: null,\r\n  placeholder: '- Select -',\r\n  placeholders: [],\r\n  ajaxUrl: '',\r\n  ajaxValueField: 'value',\r\n  source: [],\r\n  labels: [],\r\n  labelWidth: 'col-md-3',\r\n  fieldWidth: 'col',\r\n  readonly: false,\r\n  disabled: false,\r\n  valueField: 'id',\r\n  textField: 'title',\r\n  horizontal: null,\r\n  horizontalColWidth: null,\r\n  defaultValue: '',\r\n  onSelectInit: () => {\r\n  },\r\n  onChange: () => {\r\n  },\r\n  onValueInit: () => {\r\n  },\r\n};\r\n\r\n@Component\r\nclass FieldCascadeSelect extends AlpineComponent {\r\n  options: CascadeSelectOptions;\r\n  el?: HTMLElement;\r\n  canModify: boolean = false;\r\n  lists: any[] = [];\r\n  ajaxUrl: string = '';\r\n  values: Array<string | null> = [];\r\n\r\n  constructor(options: Partial<CascadeSelectOptions> = {}) {\r\n    super();\r\n\r\n    this.options = mergeDeep({}, defaultOptions, options);\r\n\r\n    this.options.id = this.options.id || 'cascade-select-' + uid();\r\n  }\r\n\r\n  init() {\r\n    this.canModify = !this.options.readonly && !this.options.disabled;\r\n    this.ajaxUrl = this.options.ajaxUrl;\r\n    this.values = this.options.path.slice().map(String);\r\n\r\n    let values: Array<string | null> = this.options.path.slice();\r\n\r\n    if (values.length === 0) {\r\n      values = [null];\r\n    } else {\r\n      values.unshift(null);\r\n    }\r\n\r\n    let promise = Promise.resolve();\r\n    let lastValue: string | null = null;\r\n\r\n    values.forEach((v, i) => {\r\n      promise = promise.then(() => {\r\n        return this.loadItems(v, i).then((list) => {\r\n          if (list.length > 0) {\r\n            this.lists.push(list);\r\n          }\r\n        });\r\n      });\r\n\r\n      lastValue = v;\r\n    });\r\n\r\n    this.el = this.$el;\r\n\r\n    module(this.$el, 'cascade.select', () => this);\r\n\r\n    this.valueInit(this.$el, lastValue, values);\r\n  }\r\n\r\n  getLabel(i: number) {\r\n    return this.options.labels[i] || `Level ${i + 1}`;\r\n  }\r\n\r\n  getId(i: number) {\r\n    return `${this.options.id}__level-${i}`;\r\n  }\r\n\r\n  getListValue(i: number) {\r\n    return this.values[i] || '';\r\n  }\r\n\r\n  isSelected(i: number, item: any) {\r\n    return String(this.getListValue(i)) === String(item[this.options.valueField]);\r\n  }\r\n\r\n  getFinalValue() {\r\n    const values = this.values.slice();\r\n\r\n    if (values.length === 0) {\r\n      return this.options.defaultValue;\r\n    }\r\n\r\n    const v = values\r\n      .filter(v => v != null)\r\n      .filter(v => v !== '')\r\n      .pop();\r\n\r\n    if (v == undefined) {\r\n      return this.options.defaultValue;\r\n    }\r\n\r\n    return v;\r\n  }\r\n\r\n  getLevel() {\r\n    return this.values.length;\r\n  }\r\n\r\n  async onChange(i: number, event: Event) {\r\n    const el = event.target as HTMLSelectElement;\r\n\r\n    this.values[i] = el.value;\r\n\r\n    this.options.onChange(event);\r\n\r\n    event.stopPropagation();\r\n\r\n    const changeEvent = new CustomEvent('change', {\r\n      detail: {\r\n        el,\r\n        component: this,\r\n        value: el.value,\r\n        path: this.values\r\n      }\r\n    });\r\n\r\n    this.el?.dispatchEvent(changeEvent);\r\n\r\n    if (el.value === '') {\r\n      // Clear child\r\n      this.lists.splice(i + 1);\r\n      this.values.splice(i + 1);\r\n      return;\r\n    }\r\n\r\n    // Get child list\r\n    let list = await this.loadItems(el.value, i);\r\n    this.lists.splice(i + 1);\r\n    this.values.splice(i + 1);\r\n    if (list.length > 0) {\r\n      this.lists.push(list);\r\n    }\r\n  }\r\n\r\n  async loadItems(parentId: string | null, i: number) {\r\n    // Ajax\r\n    if (this.ajaxUrl) {\r\n      const http = await useHttpClient();\r\n\r\n      let res = await http.get(\r\n        this.ajaxUrl,\r\n        {\r\n          params: {\r\n            [this.options.ajaxValueField]: parentId,\r\n            self: this.options.ignoreSelf || null\r\n          }\r\n        }\r\n      );\r\n      return await res.data.data;\r\n    }\r\n\r\n    // Source\r\n    if (parentId) {\r\n      return Promise.resolve(\r\n        this.handleSourceItems(\r\n          this.findFromList(this.lists[i - 1] || [], parentId)?.children || []\r\n        )\r\n      );\r\n    }\r\n\r\n    return Promise.resolve(this.handleSourceItems(this.options.source));\r\n  }\r\n\r\n  valueInit($select: HTMLElement, value: string | null, path: Array<string | null>) {\r\n    const event = new CustomEvent('value.init', {\r\n      detail: {\r\n        el: $select,\r\n        component: this,\r\n        value,\r\n        path\r\n      }\r\n    });\r\n\r\n    this.options.onSelectInit(event);\r\n\r\n    this.$el.dispatchEvent(event);\r\n  }\r\n\r\n  selectInit($select: HTMLElement) {\r\n    const event = new CustomEvent('select.init', {\r\n      detail: {\r\n        el: $select,\r\n        component: this,\r\n      }\r\n    });\r\n\r\n    this.options.onSelectInit(event);\r\n\r\n    this.$el.dispatchEvent(event);\r\n  }\r\n\r\n  handleSourceItems(items: any[]) {\r\n    return items.map(item => {\r\n      return {\r\n        [this.options.valueField]: item.value[this.options.valueField],\r\n        [this.options.textField]: item.value[this.options.textField],\r\n        children: item.children\r\n      };\r\n    })\r\n      .filter(item => {\r\n        if (this.options.ignoreSelf) {\r\n          return item[this.options.valueField] != this.options.ignoreSelf;\r\n        }\r\n\r\n        return item;\r\n      });\r\n  }\r\n\r\n  findFromList(items: any[], value: string) {\r\n    const found = items.filter(item => item[this.options.valueField] == value);\r\n\r\n    return found.shift();\r\n  }\r\n\r\n  getPlaceholder(i: number) {\r\n    if (this.options.placeholders[i]) {\r\n      return this.options.placeholders[i];\r\n    }\r\n\r\n    return this.options.placeholder;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  var S: any;\r\n}\r\n\r\nasync function init() {\r\n  await prepareAlpineDefer(() => {\r\n    Alpine.data('CascadeSelect', (options: CascadeSelectOptions) => new FieldCascadeSelect(options));\r\n  });\r\n\r\n  await initAlpineComponent('data-cascade-select');\r\n}\r\n\r\nexport const ready = init();\r\n\r\nexport interface CascadeSelectModule {\r\n  ready: typeof ready;\r\n}\r\n"],"names":["AlpineComponent","Component","component","v"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/field-file-drag.js

@@ -0,0 +1,218 @@
+import { a as useUniDirective, a6 as watchAttributes, a5 as mergeDeep, _ as __, K as uid, B as html, G as simpleAlert, a7 as injectCssToDocument } from "./unicorn.js";
+const css = ".c-file-drag {\n  --bs-card-border-color: var(--bs-gray-400);\n  --fd-delete-color: var(--bs-danger);\n  overflow: hidden;\n  border: 1px solid var(--bs-card-border-color, #ddd);\n}\n.c-file-drag label {\n  border: none;\n}\n\n.c-file-drag-input {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  min-height: 100px;\n  cursor: pointer;\n}\n.c-file-drag-input input {\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  margin: 0;\n  overflow: hidden;\n  opacity: 0;\n  height: 100%;\n  cursor: pointer;\n}\n.c-file-drag-input input.hover + label {\n  background-color: #efefef;\n}\n.c-file-drag-input input.is-invalid ~ .c-file-drag-input__label {\n  border-color: var(--bs-danger);\n}\n.c-file-drag-input input:disabled {\n  opacity: 0;\n  cursor: no-drop;\n}\n.c-file-drag-input input:disabled + label {\n  background-color: #eee;\n  color: #999;\n}\n.c-file-drag-input input:disabled + label button {\n  display: none;\n}\n.c-file-drag-input__label {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  padding: 0.375rem 0.75rem;\n  color: #495057;\n  background-color: #fff;\n  border: 1px solid var(--bs-gray-400);\n  border-radius: 0.25rem;\n  height: 100%;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  transition: all 0.3s;\n  cursor: pointer;\n}\n.c-file-drag-input__label > span {\n  display: inline-block;\n  width: 100%;\n}\n.c-file-drag-input label::after {\n  content: none !important;\n}\n.c-file-drag-preview .c-file-drag-preview__delete {\n  --bs-link-color-rgb: var(--bs-dark-rgb);\n}\n.c-file-drag-preview .c-file-drag-preview__delete.active {\n  --bs-link-color-rgb: var(--bs-primary-rgb);\n}";
+/* @__PURE__ */ injectCssToDocument(document, css);
+const defaultOptions = {
+  maxFiles: void 0,
+  maxSize: void 0,
+  placeholder: "",
+  height: 125
+};
+class FileDragElement extends HTMLElement {
+  static is = "uni-file-drag";
+  element;
+  overlayLabel;
+  button;
+  options;
+  get inputSelector() {
+    return this.getAttribute("selector") || "input[type=file]";
+  }
+  get multiple() {
+    return this.element.multiple;
+  }
+  connectedCallback() {
+    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("[data-overlay-label]");
+    let button = this.overlayLabel.querySelector("button");
+    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;
+    this.overlayLabel = label;
+    this.appendChild(input);
+    this.appendChild(label);
+  }
+  onChange(evt) {
+    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;
+    if (!placeholder) {
+      if (this.multiple) {
+        placeholder = __("unicorn.field.file.drag.placeholder.multiple");
+      } else {
+        placeholder = __("unicorn.field.file.drag.placeholder.single");
+      }
+    }
+    if (limit && files.length > limit) {
+      this.alert(__("unicorn.field.file.drag.message.max.files", limit), "", "warning");
+      evt?.preventDefault();
+      return;
+    }
+    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}`;
+    }
+    this.overlayLabel.querySelector("span").innerHTML = text;
+  }
+  checkFileType(accepted, 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, mime) {
+    const accepted2 = accepted.split("/");
+    const mime2 = mime.split("/");
+    if (accepted2[1] === "*") {
+      return accepted2[0] === mime2[0];
+    }
+    return accepted === mime;
+  }
+  async alert(title, text = "", type = "info") {
+    await simpleAlert(title, text, type);
+  }
+}
+/* @__PURE__ */ customElements.define(/* @__PURE__ */ (() => FileDragElement.is)(), FileDragElement);
+const ready = /* @__PURE__ */ useUniDirective("file-drag-field", {
+  mounted(el) {
+    const input = el.querySelector("input[type=file]");
+    const placeholderInput = el.querySelector("[data-role=placeholder]");
+    const preview = el.querySelector(".c-file-drag-preview");
+    if (preview) {
+      const previewLink = preview.querySelector(".c-file-drag-preview__link");
+      const delButton = preview.querySelector(".c-file-drag-preview__delete");
+      let inputValue = placeholderInput.value;
+      let required = input.required;
+      if (placeholderInput.value) {
+        input.required = false;
+      }
+      delButton.addEventListener("click", () => {
+        if (delButton.classList.contains("active")) {
+          previewLink.style.textDecoration = "";
+          previewLink.style.setProperty("color", "");
+          placeholderInput.value = inputValue;
+          delButton.classList.remove("active");
+          input.required = false;
+        } else {
+          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 {
+  FileDragElement,
+  ready
+};
+//# sourceMappingURL=field-file-drag.js.map

package/dist/chunks/field-file-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-file-drag.js","sources":["../../src/module/field-file-drag.ts"],"sourcesContent":["import css from '../../scss/field/file-drag.scss?inline';\r\nimport { useUniDirective } from '../composable';\r\nimport { __, html, injectCssToDocument, simpleAlert, uid, watchAttributes } from '../service';\r\nimport { mergeDeep } from '../utilities';\r\n\r\ninjectCssToDocument(document, css);\r\n\r\nexport interface FileDragOptions {\r\n  maxFiles: number | undefined;\r\n  maxSize: number | undefined;\r\n  placeholder: string;\r\n  height: number;\r\n}\r\n\r\nconst defaultOptions: FileDragOptions = {\r\n  maxFiles: undefined,\r\n  maxSize: undefined,\r\n  placeholder: '',\r\n  height: 125,\r\n}\r\n\r\nexport class FileDragElement extends HTMLElement {\r\n  static is = 'uni-file-drag';\r\n\r\n  element!: HTMLInputElement;\r\n  overlayLabel!: HTMLLabelElement;\r\n  button!: HTMLButtonElement;\r\n  options!: FileDragOptions;\r\n\r\n  get inputSelector() {\r\n    return this.getAttribute('selector') || 'input[type=file]';\r\n  }\r\n\r\n  get multiple() {\r\n    return this.element.multiple;\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    this.element = this.querySelector(this.inputSelector)!;\r\n\r\n    this.prepareElements();\r\n\r\n    const options = JSON.parse(this.getAttribute('options') || '{}') || {};\r\n\r\n    const observer = watchAttributes(this.element);\r\n    observer.watch('readonly', (el) => {\r\n      el.disabled = el.readOnly;\r\n    });\r\n\r\n    if (this.element.readOnly) {\r\n      this.element.disabled = true;\r\n    }\r\n\r\n    this.options = mergeDeep({}, defaultOptions, options);\r\n\r\n    this.bindEvent();\r\n\r\n    this.style.visibility = '';\r\n\r\n    this.style.height = (this.options.height || 100) + 'px';\r\n  }\r\n\r\n  bindEvent() {\r\n    this.element.addEventListener('dragover', () => {\r\n      this.element.classList.add('hover');\r\n    });\r\n\r\n    this.element.addEventListener('dragleave', () => {\r\n      this.element.classList.remove('hover');\r\n    });\r\n\r\n    this.element.addEventListener('drop', () => {\r\n      this.element.classList.remove('hover');\r\n    });\r\n\r\n    this.onChange();\r\n\r\n    this.element.addEventListener('change', (e) => {\r\n      this.onChange(e);\r\n    });\r\n    this.element.addEventListener('input', (e) => {\r\n      this.onChange(e);\r\n    });\r\n  }\r\n\r\n  prepareElements() {\r\n    if (this.children.length === 0) {\r\n      this.createElementsLayout();\r\n    }\r\n\r\n    this.overlayLabel = this.querySelector<HTMLLabelElement>('[data-overlay-label]')!;\r\n\r\n    let button = this.overlayLabel.querySelector('button');\r\n\r\n    // B/C for new file drag style\r\n    if (!button) {\r\n      button = document.createElement('button');\r\n      button.type = 'button';\r\n      button.setAttribute('class', 'c-file-drag-input__button btn btn-success btn-sm px-2 py-1');\r\n      button.innerText = __('unicorn.field.file.drag.button.text');\r\n      this.overlayLabel.appendChild(button);\r\n    }\r\n\r\n    this.button = button;\r\n  }\r\n\r\n  createElementsLayout() {\r\n    this.id ||= 'c-file-drag-' + uid();\r\n    const name = this.getAttribute('name') || 'file';\r\n    const inputId = this.id + '__input';\r\n    const btnText = __('unicorn.field.file.drag.button.text');\r\n\r\n    const input = html(`<input id=\"${inputId}\" type=\"file\" name=\"${name}\" />`);\r\n    const label = html(`<label class=\"px-3 c-file-drag-input__label\"\r\n        data-overlay-label\r\n        for=\"${inputId}\">\r\n        <span class=\"label-text d-block\">\r\n            <span class=\"fa fa-upload\"></span>\r\n        </span>\r\n        <button type=\"button\" class=\"c-file-drag-input__button btn btn-success btn-sm px-2 py-1\">\r\n            ${btnText}\r\n        </button>\r\n    </label>`);\r\n\r\n    this.element = input as HTMLInputElement;\r\n    this.overlayLabel = label as HTMLLabelElement;\r\n\r\n    this.appendChild(input);\r\n    this.appendChild(label);\r\n  }\r\n\r\n  onChange(evt?: Event) {\r\n    const files = this.element.files || [];\r\n    const limit = this.options.maxFiles;\r\n    const maxSize = this.options.maxSize;\r\n    let placeholder = this.options.placeholder;\r\n\r\n    const accepted = (this.element.getAttribute('accept') || this.element.getAttribute('data-accepted') || '')\r\n      .split(',')\r\n      .map(v => v.trim())\r\n      .filter(v => v.length > 0)\r\n      .map(v => {\r\n        if (v.indexOf('/') === -1 && v[0] === '.') {\r\n          return v.substring(1);\r\n        }\r\n\r\n        return v;\r\n      });\r\n\r\n    let text: string;\r\n\r\n    if (!placeholder) {\r\n      if (this.multiple) {\r\n        placeholder = __('unicorn.field.file.drag.placeholder.multiple');\r\n      } else {\r\n        placeholder = __('unicorn.field.file.drag.placeholder.single');\r\n      }\r\n    }\r\n\r\n    // Files limit\r\n    if (limit && files.length > limit) {\r\n      this.alert(__('unicorn.field.file.drag.message.max.files', limit), '', 'warning');\r\n      evt?.preventDefault();\r\n      return;\r\n    }\r\n\r\n    // Files size\r\n    let fileSize = 0;\r\n    Array.prototype.forEach.call(files, file => {\r\n      this.checkFileType(accepted, file);\r\n\r\n      fileSize += file.size;\r\n    });\r\n\r\n    if (maxSize && (fileSize / 1024 / 1024) > maxSize) {\r\n      this.alert(\r\n        __(\r\n          'unicorn.field.file.drag.message.max.size',\r\n          maxSize < 1 ? (maxSize * 1024) + 'KB' : maxSize + 'MB'\r\n        ),\r\n        '',\r\n        'warning'\r\n      );\r\n      evt?.preventDefault();\r\n      return;\r\n    }\r\n\r\n    if (files.length > 1) {\r\n      text = `<span class=\"fa fa-files fa-copy\"></span> ${__('unicorn.field.file.drag.selected', files.length)}`;\r\n    } else if (files.length === 1) {\r\n      text = `<span class=\"fa fa-file\"></span> ${files[0].name}`;\r\n    } else {\r\n      text = `<span class=\"fa fa-upload\"></span> ${placeholder}`;\r\n    }\r\n\r\n    //replace the \"Choose a file\" label\r\n    this.overlayLabel.querySelector<HTMLSpanElement>('span')!.innerHTML = text;\r\n  }\r\n\r\n  checkFileType(accepted: string[], file: File) {\r\n    const fileExt = file.name.split('.').pop() || '';\r\n\r\n    if (accepted.length) {\r\n      let allow = false;\r\n\r\n      accepted.forEach((type) => {\r\n        if (allow) {\r\n          return;\r\n        }\r\n\r\n        if (type.indexOf('/') !== -1) {\r\n          if (this.compareMimeType(type, file.type)) {\r\n            allow = true;\r\n          }\r\n        } else {\r\n          if (type.toLowerCase() === fileExt.toLowerCase()) {\r\n            allow = true;\r\n          }\r\n        }\r\n      });\r\n\r\n      if (!allow) {\r\n        this.alert(\r\n          __('unicorn.field.file.drag.message.unaccepted.files'),\r\n          __('unicorn.field.file.drag.message.unaccepted.files.desc', accepted.join(', ')),\r\n          'warning'\r\n        );\r\n        throw new Error('Not accepted file ext');\r\n      }\r\n    }\r\n  }\r\n\r\n  compareMimeType(accepted: string, mime: string) {\r\n    const accepted2 = accepted.split('/');\r\n    const mime2 = mime.split('/');\r\n\r\n    if (accepted2[1] === '*') {\r\n      return accepted2[0] === mime2[0];\r\n    }\r\n\r\n    return accepted === mime;\r\n  }\r\n\r\n  async alert(title: string, text: string = '', type: string = 'info') {\r\n    await simpleAlert(title, text, type);\r\n  }\r\n}\r\n\r\ncustomElements.define(FileDragElement.is, FileDragElement);\r\n\r\nexport const ready = useUniDirective('file-drag-field', {\r\n  mounted(el) {\r\n    const input = el.querySelector<HTMLInputElement>('input[type=file]')!;\r\n    const placeholderInput = el.querySelector<HTMLInputElement>('[data-role=placeholder]')!;\r\n\r\n    const preview = el.querySelector('.c-file-drag-preview');\r\n\r\n    if (preview) {\r\n      const previewLink = preview.querySelector<HTMLAnchorElement>('.c-file-drag-preview__link')!;\r\n      const delButton = preview.querySelector<HTMLAnchorElement>('.c-file-drag-preview__delete')!;\r\n      // let linkTitle = previewLink.textContent;\r\n      let inputValue = placeholderInput.value;\r\n      let required = input.required;\r\n\r\n      if (placeholderInput.value) {\r\n        input.required = false;\r\n      }\r\n\r\n      delButton.addEventListener('click', () => {\r\n        if (delButton.classList.contains('active')) {\r\n          // Restore\r\n          previewLink.style.textDecoration = '';\r\n          previewLink.style.setProperty('color', '');\r\n          placeholderInput.value = inputValue;\r\n          delButton.classList.remove('active');\r\n          input.required = false;\r\n        } else {\r\n          // Delete\r\n          previewLink.style.textDecoration = 'line-through';\r\n          previewLink.style.color = 'var(--fd-delete-color, var(--bs-danger))';\r\n          placeholderInput.value = '';\r\n          delButton.classList.add('active');\r\n          input.required = required;\r\n        }\r\n      });\r\n    }\r\n  }\r\n});\r\n\r\nexport interface FileDragModule {\r\n  FileDragElement: typeof FileDragElement;\r\n}\r\n"],"names":[],"mappings":";;AAKA,oCAAoB,UAAU,GAAG;AASjC,MAAM,iBAAkC;AAAA,EACtC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AAAA,EACb,QAAQ;AACV;AAEO,MAAM,wBAAwB,YAAY;AAAA,EAC/C,OAAO,KAAK;AAAA,EAEZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,IAAI,gBAAgB;AAClB,WAAO,KAAK,aAAa,UAAU,KAAK;AAAA,EAC1C;AAAA,EAEA,IAAI,WAAW;AACb,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,oBAA0B;AACxB,SAAK,UAAU,KAAK,cAAc,KAAK,aAAa;AAEpD,SAAK,gBAAA;AAEL,UAAM,UAAU,KAAK,MAAM,KAAK,aAAa,SAAS,KAAK,IAAI,KAAK,CAAA;AAEpE,UAAM,WAAW,gBAAgB,KAAK,OAAO;AAC7C,aAAS,MAAM,YAAY,CAAC,OAAO;AACjC,SAAG,WAAW,GAAG;AAAA,IACnB,CAAC;AAED,QAAI,KAAK,QAAQ,UAAU;AACzB,WAAK,QAAQ,WAAW;AAAA,IAC1B;AAEA,SAAK,UAAU,UAAU,CAAA,GAAI,gBAAgB,OAAO;AAEpD,SAAK,UAAA;AAEL,SAAK,MAAM,aAAa;AAExB,SAAK,MAAM,UAAU,KAAK,QAAQ,UAAU,OAAO;AAAA,EACrD;AAAA,EAEA,YAAY;AACV,SAAK,QAAQ,iBAAiB,YAAY,MAAM;AAC9C,WAAK,QAAQ,UAAU,IAAI,OAAO;AAAA,IACpC,CAAC;AAED,SAAK,QAAQ,iBAAiB,aAAa,MAAM;AAC/C,WAAK,QAAQ,UAAU,OAAO,OAAO;AAAA,IACvC,CAAC;AAED,SAAK,QAAQ,iBAAiB,QAAQ,MAAM;AAC1C,WAAK,QAAQ,UAAU,OAAO,OAAO;AAAA,IACvC,CAAC;AAED,SAAK,SAAA;AAEL,SAAK,QAAQ,iBAAiB,UAAU,CAAC,MAAM;AAC7C,WAAK,SAAS,CAAC;AAAA,IACjB,CAAC;AACD,SAAK,QAAQ,iBAAiB,SAAS,CAAC,MAAM;AAC5C,WAAK,SAAS,CAAC;AAAA,IACjB,CAAC;AAAA,EACH;AAAA,EAEA,kBAAkB;AAChB,QAAI,KAAK,SAAS,WAAW,GAAG;AAC9B,WAAK,qBAAA;AAAA,IACP;AAEA,SAAK,eAAe,KAAK,cAAgC,sBAAsB;AAE/E,QAAI,SAAS,KAAK,aAAa,cAAc,QAAQ;AAGrD,QAAI,CAAC,QAAQ;AACX,eAAS,SAAS,cAAc,QAAQ;AACxC,aAAO,OAAO;AACd,aAAO,aAAa,SAAS,4DAA4D;AACzF,aAAO,YAAY,GAAG,qCAAqC;AAC3D,WAAK,aAAa,YAAY,MAAM;AAAA,IACtC;AAEA,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,uBAAuB;AACrB,SAAK,OAAO,iBAAiB,IAAA;AAC7B,UAAM,OAAO,KAAK,aAAa,MAAM,KAAK;AAC1C,UAAM,UAAU,KAAK,KAAK;AAC1B,UAAM,UAAU,GAAG,qCAAqC;AAExD,UAAM,QAAQ,KAAK,cAAc,OAAO,uBAAuB,IAAI,MAAM;AACzE,UAAM,QAAQ,KAAK;AAAA;AAAA,eAER,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKR,OAAO;AAAA;AAAA,aAER;AAET,SAAK,UAAU;AACf,SAAK,eAAe;AAEpB,SAAK,YAAY,KAAK;AACtB,SAAK,YAAY,KAAK;AAAA,EACxB;AAAA,EAEA,SAAS,KAAa;AACpB,UAAM,QAAQ,KAAK,QAAQ,SAAS,CAAA;AACpC,UAAM,QAAQ,KAAK,QAAQ;AAC3B,UAAM,UAAU,KAAK,QAAQ;AAC7B,QAAI,cAAc,KAAK,QAAQ;AAE/B,UAAM,YAAY,KAAK,QAAQ,aAAa,QAAQ,KAAK,KAAK,QAAQ,aAAa,eAAe,KAAK,IACpG,MAAM,GAAG,EACT,IAAI,CAAA,MAAK,EAAE,KAAA,CAAM,EACjB,OAAO,CAAA,MAAK,EAAE,SAAS,CAAC,EACxB,IAAI,CAAA,MAAK;AACR,UAAI,EAAE,QAAQ,GAAG,MAAM,MAAM,EAAE,CAAC,MAAM,KAAK;AACzC,eAAO,EAAE,UAAU,CAAC;AAAA,MACtB;AAEA,aAAO;AAAA,IACT,CAAC;AAEH,QAAI;AAEJ,QAAI,CAAC,aAAa;AAChB,UAAI,KAAK,UAAU;AACjB,sBAAc,GAAG,8CAA8C;AAAA,MACjE,OAAO;AACL,sBAAc,GAAG,4CAA4C;AAAA,MAC/D;AAAA,IACF;AAGA,QAAI,SAAS,MAAM,SAAS,OAAO;AACjC,WAAK,MAAM,GAAG,6CAA6C,KAAK,GAAG,IAAI,SAAS;AAChF,WAAK,eAAA;AACL;AAAA,IACF;AAGA,QAAI,WAAW;AACf,UAAM,UAAU,QAAQ,KAAK,OAAO,CAAA,SAAQ;AAC1C,WAAK,cAAc,UAAU,IAAI;AAEjC,kBAAY,KAAK;AAAA,IACnB,CAAC;AAED,QAAI,WAAY,WAAW,OAAO,OAAQ,SAAS;AACjD,WAAK;AAAA,QACH;AAAA,UACE;AAAA,UACA,UAAU,IAAK,UAAU,OAAQ,OAAO,UAAU;AAAA,QAAA;AAAA,QAEpD;AAAA,QACA;AAAA,MAAA;AAEF,WAAK,eAAA;AACL;AAAA,IACF;AAEA,QAAI,MAAM,SAAS,GAAG;AACpB,aAAO,6CAA6C,GAAG,oCAAoC,MAAM,MAAM,CAAC;AAAA,IAC1G,WAAW,MAAM,WAAW,GAAG;AAC7B,aAAO,oCAAoC,MAAM,CAAC,EAAE,IAAI;AAAA,IAC1D,OAAO;AACL,aAAO,sCAAsC,WAAW;AAAA,IAC1D;AAGA,SAAK,aAAa,cAA+B,MAAM,EAAG,YAAY;AAAA,EACxE;AAAA,EAEA,cAAc,UAAoB,MAAY;AAC5C,UAAM,UAAU,KAAK,KAAK,MAAM,GAAG,EAAE,SAAS;AAE9C,QAAI,SAAS,QAAQ;AACnB,UAAI,QAAQ;AAEZ,eAAS,QAAQ,CAAC,SAAS;AACzB,YAAI,OAAO;AACT;AAAA,QACF;AAEA,YAAI,KAAK,QAAQ,GAAG,MAAM,IAAI;AAC5B,cAAI,KAAK,gBAAgB,MAAM,KAAK,IAAI,GAAG;AACzC,oBAAQ;AAAA,UACV;AAAA,QACF,OAAO;AACL,cAAI,KAAK,YAAA,MAAkB,QAAQ,eAAe;AAChD,oBAAQ;AAAA,UACV;AAAA,QACF;AAAA,MACF,CAAC;AAED,UAAI,CAAC,OAAO;AACV,aAAK;AAAA,UACH,GAAG,kDAAkD;AAAA,UACrD,GAAG,yDAAyD,SAAS,KAAK,IAAI,CAAC;AAAA,UAC/E;AAAA,QAAA;AAEF,cAAM,IAAI,MAAM,uBAAuB;AAAA,MACzC;AAAA,IACF;AAAA,EACF;AAAA,EAEA,gBAAgB,UAAkB,MAAc;AAC9C,UAAM,YAAY,SAAS,MAAM,GAAG;AACpC,UAAM,QAAQ,KAAK,MAAM,GAAG;AAE5B,QAAI,UAAU,CAAC,MAAM,KAAK;AACxB,aAAO,UAAU,CAAC,MAAM,MAAM,CAAC;AAAA,IACjC;AAEA,WAAO,aAAa;AAAA,EACtB;AAAA,EAEA,MAAM,MAAM,OAAe,OAAe,IAAI,OAAe,QAAQ;AACnE,UAAM,YAAY,OAAO,MAAM,IAAI;AAAA,EACrC;AACF;AAEA,+BAAe,OAAA,uBAAO,gBAAgB,IAAA,GAAI,eAAe;AAElD,MAAM,QAAQ,gCAAgB,mBAAmB;AAAA,EACtD,QAAQ,IAAI;AACV,UAAM,QAAQ,GAAG,cAAgC,kBAAkB;AACnE,UAAM,mBAAmB,GAAG,cAAgC,yBAAyB;AAErF,UAAM,UAAU,GAAG,cAAc,sBAAsB;AAEvD,QAAI,SAAS;AACX,YAAM,cAAc,QAAQ,cAAiC,4BAA4B;AACzF,YAAM,YAAY,QAAQ,cAAiC,8BAA8B;AAEzF,UAAI,aAAa,iBAAiB;AAClC,UAAI,WAAW,MAAM;AAErB,UAAI,iBAAiB,OAAO;AAC1B,cAAM,WAAW;AAAA,MACnB;AAEA,gBAAU,iBAAiB,SAAS,MAAM;AACxC,YAAI,UAAU,UAAU,SAAS,QAAQ,GAAG;AAE1C,sBAAY,MAAM,iBAAiB;AACnC,sBAAY,MAAM,YAAY,SAAS,EAAE;AACzC,2BAAiB,QAAQ;AACzB,oBAAU,UAAU,OAAO,QAAQ;AACnC,gBAAM,WAAW;AAAA,QACnB,OAAO;AAEL,sBAAY,MAAM,iBAAiB;AACnC,sBAAY,MAAM,QAAQ;AAC1B,2BAAiB,QAAQ;AACzB,oBAAU,UAAU,IAAI,QAAQ;AAChC,gBAAM,WAAW;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;"}