quasar-ui-danx 0.0.10 → 0.0.12

package/src/helpers/downloadPdf.ts

@@ -0,0 +1,92 @@
+import { download } from "@ui/helpers/download";
+
+/**
+ * Asynchronously load a file from the URL and trigger a download in the browser
+ *
+ * @param url
+ * @param filename
+ * @param postParams
+ * @returns {Promise<void>}
+ */
+export async function downloadFile(url, filename = "", postParams = null) {
+    let fetchOptions = undefined;
+
+    if (postParams) {
+        fetchOptions = {
+            method: "POST",
+            "Content-Type": "application/json",
+            body: JSON.stringify(postParams)
+        };
+    }
+
+    const response = await fetch(url, fetchOptions);
+
+    if (!response.ok) {
+        throw Error("File download failed: invalid response from server");
+    }
+
+    let errorMessage;
+
+    // Handle a JSON response (which indicates an error occurred)
+    try {
+        // @ts-expect-error data is defined on response
+        const jsonResponse = JSON.parse(new TextDecoder().decode(response.data));
+        console.error("Error downloading file:", jsonResponse);
+        errorMessage = jsonResponse.message;
+        if (jsonResponse.errors) {
+            errorMessage = jsonResponse.errors[0].message;
+        }
+    } catch (e) {
+        // we expect an error thrown for invalid JSON when the response is a file
+    }
+
+    if (errorMessage) {
+        throw new Error("Failed to download file: " + errorMessage);
+    }
+
+    await downloadFileResponse(response, filename);
+}
+
+/**
+ * Downloads a file from a response object w/ a file attachment
+ *
+ * @param response
+ * @param filename
+ */
+export async function downloadFileResponse(response, filename = "") {
+    const contentDisposition = getResponseHeader(
+        response,
+        "content-disposition",
+        ""
+    );
+
+    const contentType = getResponseHeader(response, "content-type", "");
+
+    const match = contentDisposition.match(/filename="([^"]+)"/);
+
+    filename = filename || (match && match[1]) || "download.pdf";
+
+    let data = response.data;
+    if (!data) {
+        data = await response.blob();
+    }
+
+    download(data, filename, contentType);
+}
+
+/**
+ * Get a header from a response object
+ * @param response
+ * @param header
+ * @param defaultValue
+ * @returns {*}
+ */
+export function getResponseHeader(response, header, defaultValue) {
+    if (response.headers) {
+        if (typeof response.headers.get === "function") {
+            return response.headers.get(header) || defaultValue;
+        } else {
+            return response.headers[header] || defaultValue;
+        }
+    }
+}

package/src/helpers/files.ts

@@ -0,0 +1,52 @@
+import { FlashMessages, useCompatibility } from "@ui/helpers";
+import ExifReader from "exifreader";
+
+export async function resolveFileLocation(file, waitMessage = null) {
+    if (file.location) {
+        return file.location;
+    }
+
+    try {
+        const tags = await ExifReader.load(file.blobUrl || file.url, {
+            expanded: true
+        });
+        if (tags.gps) {
+            return {
+                latitude: tags.gps.Latitude,
+                longitude: tags.gps.Longitude
+            };
+        }
+
+        const { waitForLocation, location } = useCompatibility();
+
+        // Show a waiting for location message if we have not returned within 1 second
+        if (waitMessage) {
+            setTimeout(() => {
+                if (!location.value && waitMessage) {
+                    FlashMessages.warning(waitMessage);
+                }
+            }, 1000);
+        }
+
+        // Wait for the browser to return the location (https only as http will not return a location)
+        if (window.location.protocol === "https:") {
+            await waitForLocation();
+        }
+        // Ignore the wait message if we already returned
+        waitMessage = false;
+        if (!location.value) {
+            return null;
+        }
+
+        return {
+            latitude: location.value.latitude,
+            longitude: location.value.longitude,
+            accuracy: location.value.accuracy,
+            altitude: location.value.altitude,
+            altitudeAccuracy: location.value.altitudeAccuracy
+        };
+    } catch (error) {
+        console.error(error);
+        return null;
+    }
+}

package/src/helpers/formats.ts

@@ -0,0 +1,183 @@
+import { DateTime, IANAZone } from "luxon";
+
+const SERVER_TZ = new IANAZone("America/Chicago");
+
+/**
+ * Converts a date string from the server's time zone to the user's time zone.
+ * @param {String} dateTimeString
+ * @returns {DateTime}
+ */
+export function localizedDateTime(dateTimeString) {
+  dateTimeString = dateTimeString?.replace("T", " ");
+  // noinspection JSCheckFunctionSignatures
+  return DateTime.fromSQL(dateTimeString, { zone: SERVER_TZ }).setZone("local");
+}
+
+/**
+ * Converts a date string from the user's time zone to the server's time zone.
+ * @param dateTimeString
+ * @returns {DateTime}
+ */
+export function remoteDateTime(dateTimeString) {
+  dateTimeString = dateTimeString?.replace("T", " ");
+  // noinspection JSCheckFunctionSignatures
+  return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
+}
+
+/**
+ * @param {DateTime|String} dateTime
+ * @returns {DateTime|*}
+ */
+export function parseDateTime(dateTime) {
+  if (typeof dateTime === "string") {
+    dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
+    return DateTime.fromSQL(dateTime);
+  }
+  return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
+}
+
+/**
+ * Parses a Quasar formatted date string into a Luxon DateTime object
+ * @param date
+ * @param format
+ * @returns {DateTime}
+ */
+export function parseQDate(date, format = "yyyy/MM/dd") {
+  return DateTime.fromFormat(date, format);
+}
+
+/**
+ * Parses a Quasar formatted date/time string into a Luxon DateTime object
+ * @param date
+ * @param format
+ * @returns {DateTime}
+ */
+export function parseQDateTime(date, format = "yyyy/MM/dd HH:mm:ss") {
+  return DateTime.fromFormat(date, format);
+}
+
+/**
+ * Formats a Luxon DateTime object into a Quasar formatted date string
+ * @param date
+ * @returns {string}
+ */
+export function fQDate(date) {
+  return fDate(date, { format: "yyyy/MM/dd" });
+}
+
+/**
+ *
+ * @param {String} dateTimeString
+ * @param options
+ * @returns {string}
+ */
+export function fLocalizedDateTime(dateTimeString, options = {}) {
+  return fDateTime(localizedDateTime(dateTimeString), options);
+}
+
+/**
+ * Formats a date/time object or string into a human-readable format
+ *
+ * @param {String|Object} dateTime
+ * @param format
+ * @param {String|null} empty
+ * @returns {string}
+ */
+export function fDateTime(
+  dateTime = null,
+  { format = "M/d/yy h:mma", empty = "- -" } = {}
+) {
+  const formatted = (dateTime ? parseDateTime(dateTime) : DateTime.now()).toFormat(format).toLowerCase();
+  return formatted === "invalid datetime" ? empty : formatted;
+}
+
+/**
+ * Formats a date/time object or string into the best format for DB input
+ * @param dateTime
+ * @returns {string}
+ */
+export function dbDateTime(dateTime = null) {
+  return fDateTime(dateTime, { format: "yyyy-MM-dd HH:mm:ss", empty: null });
+}
+
+/**
+ * Formats a date object or string into a human-readable format
+ * @param {String|Object} dateTime
+ * @param {String|null} empty
+ * @param format
+ * @returns {string}
+ */
+export function fDate(dateTime, { empty = "--", format = "M/d/yy" } = {}) {
+  const formatted = parseDateTime(dateTime).toFormat(format);
+  return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
+}
+
+/**
+ * Formats a number of seconds into Hours / Minutes / Seconds or just Minutes and Seconds
+ *
+ * @param second
+ * @returns {string}
+ */
+export function fSecondsToTime(second) {
+  const time = DateTime.now().setZone("UTC").startOf("year").set({ second });
+  const hours = Math.floor(second / 3600);
+  return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
+}
+
+/**
+ * Formats an amount into USD currency format
+ * @param amount
+ * @returns {string}
+ */
+export function fCurrency(amount) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD"
+  }).format(amount);
+}
+
+/**
+ * Formats a number into a human-readable format
+ * @param number
+ * @param options
+ * @returns {string}
+ */
+export function fNumber(number, options = {}) {
+  return new Intl.NumberFormat("en-US", options).format(number);
+}
+
+/**
+ * Truncates the string by removing chars from the middle of the string
+ * @param str
+ * @param maxLength
+ * @returns {string|*}
+ */
+export function centerTruncate(str, maxLength) {
+  if (str.length > maxLength) {
+    const frontCharCount = Math.floor((maxLength - 3) / 2);
+    const backCharCount = maxLength - frontCharCount - 3;
+    return (
+      str.substring(0, frontCharCount) +
+      "..." +
+      str.substring(str.length - backCharCount)
+    );
+  } else {
+    return str;
+  }
+}
+
+/**
+ * Formats a number into a percentage
+ * @param num
+ * @param options
+ * @returns {string}
+ */
+export function fPercent(num, options = { multiplier: 100, maximumFractionDigits: 1, NaN: "N/A" }) {
+  num = parseFloat(num);
+
+  if (isNaN(num)) {
+    return options.NaN;
+  }
+
+  return fNumber(num * options.multiplier, options) + "%";
+}

package/src/helpers/http.ts

@@ -0,0 +1,62 @@
+export const request = {
+  async get(url, options = {}) {
+    return fetch(url, {
+      method: "get",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      },
+      ...options
+    });
+  },
+
+  async post(url, data = {}, options = {}) {
+    return fetch(url, {
+      method: "post",
+      body: JSON.stringify(data),
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      },
+      ...options
+    }).then((r) => r.json());
+  }
+};
+
+/**
+ * Fetches a resource list applying the filter. If there is a selected resource,
+ * stores that resource from the already populated list. If that resource does not exist
+ * also fetches that resource record from the endpoint, then adds it to the list if it
+ * does not exist in the filtered list
+ *
+ * @param fetchFn
+ * @param list
+ * @param id
+ * @param filter
+ * @returns {Promise<void>}
+ */
+export async function fetchResourceListWithSelected(fetchFn, list, id, filter) {
+  // First make sure we have the selected record, so we can always add it to the list
+  let selectedResource;
+  if (id) {
+    selectedResource = list.value.find((c) => c.id === id) || (await fetchFn({ id }))[0];
+  }
+
+  // Get the filtered campaign list
+  list.value = await fetchFn(filter);
+
+  // If our selected campaign is not in the filtered list, add it
+  if (selectedResource && !list.value.find((c) => c.id === id)) {
+    list.value.push(selectedResource);
+  }
+}
+
+/**
+ * Returns the value of the URL parameter (if it is set)
+ * @param key
+ * @param url
+ */
+export function getUrlParam(key, url = undefined) {
+  const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
+  return params.get(key);
+}

package/src/helpers/index.ts

@@ -1 +1,12 @@
-export * from './utils';
+export * from "./array";
+export * from "./compatibility";
+export * from "./download";
+export * from "./files";
+export * from "./FileUpload";
+export * from "./FlashMessages";
+export * from "./formats";
+export * from "./http";
+export * from "./multiFileUpload";
+export * from "./singleFileUpload";
+export * from "./storage";
+export * from "./utils";

package/src/helpers/multiFileUpload.ts

@@ -0,0 +1,68 @@
+import { FileUpload, FileUploadOptions } from "@ui/helpers/FileUpload";
+import { ref } from "vue";
+
+export function useMultiFileUpload(options: FileUploadOptions) {
+    const uploadedFiles = ref([]);
+    const onCompleteCb = ref(null);
+    const onFilesChangeCb = ref(null);
+    const onFilesSelected = (e) => {
+        uploadedFiles.value = [...uploadedFiles.value, ...e.target.files];
+        new FileUpload(e.target.files, options)
+            .onProgress(({ file }) => {
+                updateFileInList(file);
+            })
+            .onComplete(({ file, uploadedFile }) => {
+                updateFileInList(file, uploadedFile);
+            })
+            .onAllComplete(() => {
+                onCompleteCb.value && onCompleteCb.value();
+                onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+            })
+            .upload();
+    };
+
+    function updateFileInList(file, replace = null) {
+        const index = uploadedFiles.value.findIndex(f => f.id === file.id);
+        if (index !== -1) {
+            uploadedFiles.value.splice(index, 1, replace || file);
+        }
+        onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+    }
+
+    const onDrop = (e) => {
+        onFilesSelected({ target: { files: e.dataTransfer.files } });
+    };
+
+    const onFilesChange = (cb) => {
+        onFilesChangeCb.value = cb;
+    };
+
+    const onComplete = (cb) => {
+        onCompleteCb.value = cb;
+    };
+
+    const onClear = () => {
+        uploadedFiles.value = [];
+        onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+        onCompleteCb.value && onCompleteCb.value();
+    };
+
+    const onRemove = (file) => {
+        const index = uploadedFiles.value.findIndex(f => f.id === file.id);
+        if (index !== -1) {
+            uploadedFiles.value.splice(index, 1);
+        }
+        onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+        onCompleteCb.value && onCompleteCb.value();
+    };
+
+    return {
+        onClear,
+        onRemove,
+        onComplete,
+        onFilesChange,
+        onDrop,
+        onFilesSelected,
+        uploadedFiles
+    };
+}

package/src/helpers/singleFileUpload.ts

@@ -0,0 +1,54 @@
+import { FileUpload, FileUploadOptions } from "@ui/helpers";
+import { computed, ref } from "vue";
+
+export function useSingleFileUpload(options: FileUploadOptions) {
+    const uploadedFile = ref(null);
+    const onCompleteCb = ref(null);
+    const onFileChangeCb = ref(null);
+
+    const onFileSelected = (e) => {
+        uploadedFile.value = null;
+        new FileUpload(e.target.files[0], options)
+            .onProgress(({ file }) => {
+                uploadedFile.value = file;
+                onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+            })
+            .onComplete(({ uploadedFile: completedFile }) => {
+                uploadedFile.value = completedFile;
+                onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
+                onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+            })
+            .upload();
+    };
+
+    const onDrop = (e) => {
+        onFileSelected({ target: { files: e.dataTransfer.files } });
+    };
+
+    const isFileUploaded = computed(() => {
+        return uploadedFile.value && uploadedFile.value.url;
+    });
+
+    const onFileChange = (cb) => {
+        onFileChangeCb.value = cb;
+    };
+
+    const onComplete = (cb) => {
+        onCompleteCb.value = cb;
+    };
+
+    const onClear = () => {
+        uploadedFile.value = null;
+        onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+    };
+
+    return {
+        isFileUploaded,
+        onClear,
+        onComplete,
+        onFileChange,
+        onDrop,
+        onFileSelected,
+        uploadedFile
+    };
+}

package/src/helpers/storage.ts

@@ -0,0 +1,8 @@
+export function setItem(key, value) {
+  localStorage.setItem(key, JSON.stringify(value));
+}
+
+export function getItem(key, defaultValue = null) {
+  const item = localStorage.getItem(key);
+  return item ? JSON.parse(item) : defaultValue;
+}

package/src/index.esm.js

@@ -1,5 +1,4 @@
+import * as VuePlugin from './vue-plugin';
 
-import * as VuePlugin from './vue-plugin'
-
-export * from './vue-plugin'
-export default VuePlugin
+export * from './vue-plugin';
+export default VuePlugin;

package/src/svg/FilterIcon.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      d="M9.16667 17.5V12.5H10.8333V14.1667H17.5V15.8333H10.8333V17.5H9.16667ZM2.5 15.8333V14.1667H7.5V15.8333H2.5ZM5.83333 12.5V10.8333H2.5V9.16667H5.83333V7.5H7.5V12.5H5.83333ZM9.16667 10.8333V9.16667H17.5V10.8333H9.16667ZM12.5 7.5V2.5H14.1667V4.16667H17.5V5.83333H14.1667V7.5H12.5ZM2.5 5.83333V4.16667H10.8333V5.83333H2.5Z"
+      fill="currentColor"/>
+  </g>
+</svg>

package/src/svg/ImageIcon.svg

@@ -0,0 +1,30 @@
+<svg
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17.8587 18.5578C18.2529 18.5578 18.5725 18.2383 18.5725 17.8441L18.5725 2.1414C18.5725 1.7472 18.2529 1.42764 17.8587 1.42764L2.15604 1.42764C1.76184 1.42764 1.44228 1.7472 1.44228 2.1414L1.44228 17.8441C1.44228 18.2383 1.76184 18.5578 2.15604 18.5578L17.8587 18.5578ZM20 17.8441C20 19.0267 19.0413 19.9854 17.8587 19.9854L2.15604 19.9854C0.97345 19.9854 0.014769 19.0267 0.014769 17.8441L0.014769 2.1414C0.014769 0.958801 0.97345 0.00012055 2.15604 0.00012055L17.8587 0.00012055C19.0413 0.00012055 20 0.958801 20 2.1414L20 17.8441Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M13.2048 4.99588C12.2193 4.99588 11.4204 5.79478 11.4204 6.78027C11.4204 7.76577 12.2193 8.56467 13.2048 8.56467C14.1903 8.56467 14.9892 7.76577 14.9892 6.78027C14.9892 5.79478 14.1903 4.99588 13.2048 4.99588ZM9.99292 6.78027C9.99292 5.00638 11.4309 3.56836 13.2048 3.56836C14.9787 3.56836 16.4167 5.00638 16.4167 6.78027C16.4167 8.55416 14.9787 9.99218 13.2048 9.99218C11.4309 9.99218 9.99292 8.55416 9.99292 6.78027Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.84806 9.9929C5.50442 9.93497 8.09526 10.8216 10.1592 12.4951C12.2256 14.1705 13.6294 16.5256 14.1203 19.1401C14.193 19.5275 13.9379 19.9005 13.5505 19.9733C13.1631 20.046 12.79 19.7909 12.7173 19.4035C12.2889 17.1216 11.0636 15.0662 9.26019 13.6039C7.45676 12.1417 5.19246 11.3678 2.8713 11.4203C2.86529 11.4204 2.85927 11.4205 2.85326 11.4204C2.18034 11.4186 1.50881 11.4813 0.847849 11.6076C0.460656 11.6816 0.0867981 11.4277 0.0128145 11.0405C-0.0611691 10.6533 0.192737 10.2794 0.57993 10.2055C1.3275 10.0626 2.08698 9.99144 2.84806 9.9929Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10.9536 13.8192C12.4542 13.1749 14.0708 12.8443 15.7039 12.8477C16.9949 12.8471 18.2773 13.0574 19.5005 13.4705C19.8739 13.5966 20.0745 14.0016 19.9483 14.3751C19.8222 14.7486 19.4172 14.9491 19.0437 14.823C17.9677 14.4596 16.8395 14.2746 15.7037 14.2752L15.7018 14.2752C14.263 14.2721 12.8388 14.5633 11.5168 15.1309C11.1546 15.2864 10.7348 15.1189 10.5793 14.7567C10.4238 14.3944 10.5914 13.9747 10.9536 13.8192Z"
+    fill="currentColor"
+  />
+</svg>

package/src/svg/PdfIcon.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550.801 550.801">
+  <g>
+    <path d="M160.381,282.225c0-14.832-10.299-23.684-28.474-23.684c-7.414,0-12.437,0.715-15.071,1.432V307.6
+		c3.114,0.707,6.942,0.949,12.192,0.949C148.419,308.549,160.381,298.74,160.381,282.225z"/>
+    <path d="M272.875,259.019c-8.145,0-13.397,0.717-16.519,1.435v105.523c3.116,0.729,8.142,0.729,12.69,0.729
+		c33.017,0.231,54.554-17.946,54.554-56.474C323.842,276.719,304.215,259.019,272.875,259.019z"/>
+    <path d="M488.426,197.019H475.2v-63.816c0-0.398-0.063-0.799-0.116-1.202c-0.021-2.534-0.827-5.023-2.562-6.995L366.325,3.694
+		c-0.032-0.031-0.063-0.042-0.085-0.076c-0.633-0.707-1.371-1.295-2.151-1.804c-0.231-0.155-0.464-0.285-0.706-0.419
+		c-0.676-0.369-1.393-0.675-2.131-0.896c-0.2-0.056-0.38-0.138-0.58-0.19C359.87,0.119,359.037,0,358.193,0H97.2
+		c-11.918,0-21.6,9.693-21.6,21.601v175.413H62.377c-17.049,0-30.873,13.818-30.873,30.873v160.545
+		c0,17.043,13.824,30.87,30.873,30.87h13.224V529.2c0,11.907,9.682,21.601,21.6,21.601h356.4c11.907,0,21.6-9.693,21.6-21.601
+		V419.302h13.226c17.044,0,30.871-13.827,30.871-30.87v-160.54C519.297,210.838,505.47,197.019,488.426,197.019z M97.2,21.605
+		h250.193v110.513c0,5.967,4.841,10.8,10.8,10.8h95.407v54.108H97.2V21.605z M362.359,309.023c0,30.876-11.243,52.165-26.82,65.333
+		c-16.971,14.117-42.82,20.814-74.396,20.814c-18.9,0-32.297-1.197-41.401-2.389V234.365c13.399-2.149,30.878-3.346,49.304-3.346
+		c30.612,0,50.478,5.508,66.039,17.226C351.828,260.69,362.359,280.547,362.359,309.023z M80.7,393.499V234.365
+		c11.241-1.904,27.042-3.346,49.296-3.346c22.491,0,38.527,4.308,49.291,12.928c10.292,8.131,17.215,21.534,17.215,37.328
+		c0,15.799-5.25,29.198-14.829,38.285c-12.442,11.728-30.865,16.996-52.407,16.996c-4.778,0-9.1-0.243-12.435-0.723v57.67H80.7
+		V393.499z M453.601,523.353H97.2V419.302h356.4V523.353z M484.898,262.127h-61.989v36.851h57.913v29.674h-57.913v64.848h-36.593
+		V232.216h98.582V262.127z"/>
+  </g>
+</svg>

package/src/svg/PercentIcon.svg

@@ -0,0 +1,13 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 394.4 394.4" xml:space="preserve"
+>
+<g>
+	<path d="M37.4,377.4c-5.223,0-10.438-1.992-14.423-5.977c-7.97-7.963-7.97-20.883,0-28.846l319.6-319.601
+		c7.97-7.97,20.876-7.97,28.846,0c7.97,7.962,7.97,20.882,0,28.845l-319.6,319.601C47.838,375.408,42.623,377.4,37.4,377.4z
+		 M394.4,299.199c0-52.496-42.704-95.199-95.2-95.199S204,246.703,204,299.199s42.704,95.201,95.2,95.201
+		S394.4,351.695,394.4,299.199z M353.601,299.199c0,29.996-24.405,54.4-54.4,54.4s-54.4-24.404-54.4-54.4
+		c0-29.994,24.405-54.398,54.4-54.398S353.601,269.205,353.601,299.199z M190.4,95.2C190.4,42.704,147.696,0,95.2,0S0,42.704,0,95.2
+		s42.704,95.2,95.2,95.2S190.4,147.696,190.4,95.2z M149.6,95.2c0,29.995-24.405,54.4-54.4,54.4s-54.4-24.405-54.4-54.4
+		s24.405-54.4,54.4-54.4S149.6,65.206,149.6,95.2z"/>
+</g>
+</svg>

package/src/svg/TrashIcon.svg

@@ -0,0 +1,15 @@
+<svg
+  width="18"
+  height="20"
+  viewBox="0 0 16 18"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M13.8333 4.83333L13.1108 14.9517C13.0808 15.3722 12.8927 15.7657 12.5842 16.053C12.2757 16.3403 11.8698 16.5 11.4483 16.5H4.55159C4.13004 16.5 3.72414 16.3403 3.41566 16.053C3.10717 15.7657 2.91902 15.3722 2.88909 14.9517L2.16659 4.83333M6.33325 8.16667V13.1667M9.66659 8.16667V13.1667M10.4999 4.83333V2.33333C10.4999 2.11232 10.4121 1.90036 10.2558 1.74408C10.0996 1.5878 9.8876 1.5 9.66659 1.5H6.33325C6.11224 1.5 5.90028 1.5878 5.744 1.74408C5.58772 1.90036 5.49992 2.11232 5.49992 2.33333V4.83333M1.33325 4.83333H14.6666"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/src/svg/XIcon.svg

@@ -0,0 +1,18 @@
+<svg
+  viewBox="0 0 17 17"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M16.8222 0.177828C17.0593 0.414932 17.0593 0.799354 16.8222 1.03646L1.03646 16.8222C0.799354 17.0593 0.414932 17.0593 0.177828 16.8222C-0.059276 16.5851 -0.059276 16.2006 0.177828 15.9635L15.9635 0.177828C16.2006 -0.059276 16.5851 -0.059276 16.8222 0.177828Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M0.177828 0.177828C0.414932 -0.059276 0.799354 -0.059276 1.03646 0.177828L16.8222 15.9635C17.0593 16.2006 17.0593 16.5851 16.8222 16.8222C16.5851 17.0593 16.2006 17.0593 15.9635 16.8222L0.177828 1.03646C-0.059276 0.799354 -0.059276 0.414932 0.177828 0.177828Z"
+    fill="currentColor"
+  />
+</svg>

package/src/svg/index.ts

@@ -0,0 +1,8 @@
+export { default as DragHandleDotsIcon } from "./DragHandleDotsIcon.svg";
+export { default as DragHandleIcon } from "./DragHandleIcon.svg";
+export { default as FilterIcon } from "./FilterIcon.svg";
+export { default as ImageIcon } from "./ImageIcon.svg";
+export { default as PdfIcon } from "./PdfIcon.svg";
+export { default as PercentIcon } from "./PercentIcon.svg";
+export { default as TrashIcon } from "./TrashIcon.svg";
+export { default as XIcon } from "./XIcon.svg";

package/src/vendor/tinymce-config.ts

@@ -0,0 +1 @@
+export const apiKey = "YOUR_API_KEY";