@qikdev/vue-ui 0.1.52 → 0.1.56

package/dist/lib.es.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 };
 import { openBlock, createElementBlock, renderSlot, resolveComponent, createBlock, withCtx, createVNode, Fragment, renderList, normalizeClass, toDisplayString, withDirectives, resolveDynamicComponent, vShow, withModifiers, createTextVNode, createCommentVNode, createElementVNode, mergeProps, toHandlers, pushScopeId, popScopeId, normalizeStyle, Teleport, vModelSelect, withKeys, vModelText, TransitionGroup, defineComponent, h, nextTick, vModelDynamic, vModelCheckbox, reactive, watch } from "vue";
 import { EventDispatcher } from "@qikdev/sdk";
-const version$1 = "0.1.52";
+const version$1 = "0.1.56";
 var flexColumn_vue_vue_type_style_index_0_scoped_true_lang = "";
 var _export_sfc = (sfc, props2) => {
   const target = sfc.__vccOpts || sfc;
@@ -41,104 +41,104 @@ var _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const _sfc_main$1a = {};
+const _sfc_main$1b = {};
 const _hoisted_1$Y = { class: "flex-column" };
-function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$Y, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var FlexColumn = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__scopeId", "data-v-203ea86f"]]);
+var FlexColumn = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$1b], ["__scopeId", "data-v-203ea86f"]]);
 var flexBody_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$19 = {};
+const _sfc_main$1a = {};
 const _hoisted_1$X = { class: "flex-column-body" };
-function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$X, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var FlexBody = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__scopeId", "data-v-64850355"]]);
+var FlexBody = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$1a], ["__scopeId", "data-v-64850355"]]);
 var flexHeader_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$18 = {};
+const _sfc_main$19 = {};
 const _hoisted_1$W = { class: "flex-column-header" };
-function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$W, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var FlexHeader = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__scopeId", "data-v-10b28f00"]]);
+var FlexHeader = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$19], ["__scopeId", "data-v-10b28f00"]]);
 var flexFooter_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$17 = {};
+const _sfc_main$18 = {};
 const _hoisted_1$V = { class: "flex-column-footer" };
-function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$V, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var FlexFooter = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__scopeId", "data-v-68216a72"]]);
+var FlexFooter = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$18], ["__scopeId", "data-v-68216a72"]]);
 var flexCell_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$16 = {};
+const _sfc_main$17 = {};
 const _hoisted_1$U = { class: "flex-cell" };
-function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$U, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var FlexCell = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__scopeId", "data-v-644bb279"]]);
+var FlexCell = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$17], ["__scopeId", "data-v-644bb279"]]);
 var flexRow_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$15 = {};
+const _sfc_main$16 = {};
 const _hoisted_1$T = { class: "flex-row" };
-function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$T, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var FlexRow = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__scopeId", "data-v-5b76ad1f"]]);
+var FlexRow = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$16], ["__scopeId", "data-v-5b76ad1f"]]);
 var flexSpacer_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$14 = {};
+const _sfc_main$15 = {};
 const _hoisted_1$S = { class: "flex-spacer" };
-function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$S);
 }
-var FlexSpacer = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__scopeId", "data-v-35b15579"]]);
+var FlexSpacer = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$15], ["__scopeId", "data-v-35b15579"]]);
 var panel_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$13 = {};
+const _sfc_main$14 = {};
 const _hoisted_1$R = { class: "panel" };
-function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$R, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var Panel = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__scopeId", "data-v-50ae77fc"]]);
+var Panel = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$14], ["__scopeId", "data-v-50ae77fc"]]);
 var panelBody_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$12 = {};
+const _sfc_main$13 = {};
 const _hoisted_1$Q = { class: "panel-body" };
-function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$Q, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var PanelBody = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__scopeId", "data-v-c82dca76"]]);
+var PanelBody = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$13], ["__scopeId", "data-v-c82dca76"]]);
 var panelHeader_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$11 = {};
+const _sfc_main$12 = {};
 const _hoisted_1$P = { class: "panel-header" };
-function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$P, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__scopeId", "data-v-13bf11da"]]);
+var PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$12], ["__scopeId", "data-v-13bf11da"]]);
 var panelFooter_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$10 = {};
+const _sfc_main$11 = {};
 const _hoisted_1$O = { class: "panel-footer" };
-function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$O, [
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-var PanelFooter = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__scopeId", "data-v-b4f4786a"]]);
+var PanelFooter = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$11], ["__scopeId", "data-v-b4f4786a"]]);
 var tabset_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$$ = {
+const _sfc_main$10 = {
   data() {
     return {
       activeIndex: 0
@@ -157,7 +157,7 @@ const _sfc_main$$ = {
   }
 };
 const _hoisted_1$N = ["onClick"];
-function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_flex_row = resolveComponent("flex-row");
   const _component_flex_header = resolveComponent("flex-header");
   const _component_flex_column = resolveComponent("flex-column");
@@ -198,8 +198,8 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-var UXTabset = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$], ["__scopeId", "data-v-1449f192"]]);
-const _sfc_main$_ = {
+var UXTabset = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$10], ["__scopeId", "data-v-1449f192"]]);
+const _sfc_main$$ = {
   props: {
     heading: {
       type: String,
@@ -222,7 +222,7 @@ const _sfc_main$_ = {
     }
   }
 };
-function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_flex_column = resolveComponent("flex-column");
   return openBlock(), createBlock(_component_flex_column, null, {
     default: withCtx(() => [
@@ -231,7 +231,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   });
 }
-var UXTab = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_]]);
+var UXTab = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$$]]);
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var isArray$3 = Array.isArray;
 var isArray_1 = isArray$3;
@@ -699,7 +699,7 @@ var TableCellMixin = {
   }
 };
 var Thumbnail_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$Z = {
+const _sfc_main$_ = {
   mixins: [TableCellMixin],
   computed: {
     type() {
@@ -709,7 +709,7 @@ const _sfc_main$Z = {
   }
 };
 const _hoisted_1$M = { class: "table-image-cell" };
-function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ux_image = resolveComponent("ux-image");
   const _component_ux_icon = resolveComponent("ux-icon");
   return openBlock(), createElementBlock("td", _hoisted_1$M, [
@@ -724,9 +724,9 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
     }))
   ]);
 }
-var ThumbnailCell = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__scopeId", "data-v-6dbe8d2c"]]);
+var ThumbnailCell = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$_], ["__scopeId", "data-v-6dbe8d2c"]]);
 var Button_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$Y = {
+const _sfc_main$Z = {
   data() {
     return {
       processing: false
@@ -751,7 +751,7 @@ const _sfc_main$Y = {
   }
 };
 const _hoisted_1$L = { class: "table-button-cell" };
-function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ux_icon = resolveComponent("ux-icon");
   const _component_ux_button = resolveComponent("ux-button");
   return openBlock(), createElementBlock("td", _hoisted_1$L, [
@@ -774,7 +774,7 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["size", "loading", "onClick"])
   ]);
 }
-var ButtonCell = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__scopeId", "data-v-3cbecb7e"]]);
+var ButtonCell = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$Z], ["__scopeId", "data-v-3cbecb7e"]]);
 class LuxonError extends Error {
 }
 class InvalidDateTimeError extends LuxonError {
@@ -4608,9 +4608,12 @@ function friendlyDateTime(dateTimeish) {
   }
 }
 var DateCell_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$X = {
+const _sfc_main$Y = {
   mixins: [TableCellMixin],
   computed: {
+    hasValue() {
+      return this.value !== void 0 && this.value !== null;
+    },
     timeago() {
       return DateTime.fromISO(this.value).toRelative();
     },
@@ -4627,19 +4630,40 @@ const _sfc_main$X = {
   }
 };
 const _hoisted_1$K = { class: "table-date-cell" };
-const _hoisted_2$B = { class: "off" };
-const _hoisted_3$v = { class: "on" };
-const _hoisted_4$r = { class: "spacer" };
-function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$C = { key: 0 };
+const _hoisted_3$v = { class: "off" };
+const _hoisted_4$r = { class: "on" };
+const _hoisted_5$l = { class: "spacer" };
+function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("td", _hoisted_1$K, [
-    createElementVNode("div", null, [
-      createElementVNode("span", _hoisted_2$B, toDisplayString($options.readable), 1),
-      createElementVNode("span", _hoisted_3$v, toDisplayString($options.timeago), 1),
-      createElementVNode("span", _hoisted_4$r, toDisplayString($options.readable), 1)
-    ])
+    $options.hasValue ? (openBlock(), createElementBlock("div", _hoisted_2$C, [
+      createElementVNode("span", _hoisted_3$v, toDisplayString($options.readable), 1),
+      createElementVNode("span", _hoisted_4$r, toDisplayString($options.timeago), 1),
+      createElementVNode("span", _hoisted_5$l, toDisplayString($options.readable), 1)
+    ])) : createCommentVNode("", true)
   ]);
 }
-var DateCell = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__scopeId", "data-v-bde0ae3a"]]);
+var DateCell = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$Y], ["__scopeId", "data-v-3687693f"]]);
+var BooleanCell_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _sfc_main$X = {
+  mixins: [TableCellMixin],
+  computed: {
+    boolean() {
+      return !!this.value;
+    }
+  }
+};
+function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ux_icon = resolveComponent("ux-icon");
+  return openBlock(), createElementBlock("td", {
+    class: normalizeClass(["table-boolean-cell", { true: $options.boolean, false: !$options.boolean }])
+  }, [
+    createVNode(_component_ux_icon, {
+      icon: $options.boolean ? `fa-check` : `fa-times`
+    }, null, 8, ["icon"])
+  ], 2);
+}
+var BooleanCell = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$X], ["__scopeId", "data-v-27f127ae"]]);
 var URLCell_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$W = {
   mixins: [TableCellMixin],
@@ -4655,7 +4679,7 @@ const _sfc_main$W = {
   }
 };
 const _hoisted_1$J = { class: "table-url-cell" };
-const _hoisted_2$A = ["href"];
+const _hoisted_2$B = ["href"];
 function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ux_icon = resolveComponent("ux-icon");
   return openBlock(), createElementBlock("td", _hoisted_1$J, [
@@ -4669,7 +4693,7 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
         right: "",
         icon: "fa-external-link"
       })
-    ], 8, _hoisted_2$A)
+    ], 8, _hoisted_2$B)
   ]);
 }
 var URLCell = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$W], ["__scopeId", "data-v-17cf3a86"]]);
@@ -4779,6 +4803,9 @@ const _sfc_main$U = {
       case "button":
         component = ButtonCell;
         break;
+      case "boolean":
+        component = BooleanCell;
+        break;
       case "date":
       case "datetime":
         component = DateCell;
@@ -4794,6 +4821,9 @@ const _sfc_main$U = {
           case "date":
             component = DateCell;
             break;
+          case "boolean":
+            component = BooleanCell;
+            break;
           case "url":
             component = URLCell;
             break;
@@ -4840,7 +4870,7 @@ const _hoisted_1$H = {
   key: 1,
   class: "table-cell"
 };
-const _hoisted_2$z = { class: "value" };
+const _hoisted_2$A = { class: "value" };
 const _hoisted_3$u = { class: "value" };
 function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_value_renderer = resolveComponent("value-renderer");
@@ -4852,7 +4882,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8, ["column", "row", "value"])) : (openBlock(), createElementBlock("td", _hoisted_1$H, [
     $options.multiValue ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
       $options.complex ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList($options.value, (entry, index2) => {
-        return openBlock(), createElementBlock("span", _hoisted_2$z, [
+        return openBlock(), createElementBlock("span", _hoisted_2$A, [
           createVNode(_component_value_renderer, {
             type: $props.column.type,
             multi: "",
@@ -4877,7 +4907,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["type", "value"]))
   ]));
 }
-var TableCell = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__scopeId", "data-v-d2ef28aa"]]);
+var TableCell = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$U], ["__scopeId", "data-v-b6482442"]]);
 const _sfc_main$T = {
   components: {
     TableCell
@@ -5147,7 +5177,7 @@ const _sfc_main$S = {
   }
 };
 const _hoisted_1$G = { class: "table-wrapper" };
-const _hoisted_2$y = {
+const _hoisted_2$z = {
   class: "table-scroll",
   ref: "scroll"
 };
@@ -5170,7 +5200,7 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ux_menu = resolveComponent("ux-menu");
   const _component_table_row = resolveComponent("table-row");
   return openBlock(), createElementBlock("div", _hoisted_1$G, [
-    createElementVNode("div", _hoisted_2$y, [
+    createElementVNode("div", _hoisted_2$z, [
       createElementVNode("table", null, [
         createElementVNode("thead", null, [
           createElementVNode("tr", null, [
@@ -5266,13 +5296,13 @@ const _sfc_main$R = {
 };
 const _withScopeId$5 = (n2) => (pushScopeId("data-v-27f20370"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$F = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ createElementVNode("i", { class: "fa fa-spin fa-spinner" }, null, -1));
-const _hoisted_2$x = [
+const _hoisted_2$y = [
   _hoisted_1$F
 ];
 function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["ux-spinner", { large: $props.large }])
-  }, _hoisted_2$x, 2);
+  }, _hoisted_2$y, 2);
 }
 var Spinner = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$R], ["__scopeId", "data-v-27f20370"]]);
 var button_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -5891,6 +5921,9 @@ const _sfc_main$J = {
     type: {
       type: String,
       default: "image"
+    },
+    svg: {
+      type: Boolean
     }
   },
   data() {
@@ -5899,6 +5932,17 @@ const _sfc_main$J = {
     };
   },
   computed: {
+    isSvg() {
+      var _a;
+      if (this.svg) {
+        return true;
+      }
+      switch ((_a = this.item) == null ? void 0 : _a.fileMime) {
+        case "image/svg+xml":
+        case "image/svg":
+          return true;
+      }
+    },
     defaultWidth() {
       return;
     },
@@ -5965,21 +6009,33 @@ const _sfc_main$J = {
         style.height = 0;
         style.paddingBottom = `${dimensionHeight / dimensionWidth * 100}%`;
       }
-      style.backgroundImage = `url(${this.previewSrc})`;
+      if (this.isSvg)
+        ;
+      else {
+        style.backgroundImage = `url(${this.previewSrc})`;
+      }
       return style;
     }
   }
 };
-const _hoisted_1$D = ["src"];
+const _hoisted_1$D = ["data"];
+const _hoisted_2$x = ["src"];
 function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: "ux-image",
     style: normalizeStyle($options.style)
   }, [
-    createElementVNode("img", { src: $options.src }, null, 8, _hoisted_1$D)
+    $props.svg ? (openBlock(), createElementBlock("object", {
+      key: 0,
+      type: "image/svg+xml",
+      data: $options.src
+    }, null, 8, _hoisted_1$D)) : (openBlock(), createElementBlock("img", {
+      key: 1,
+      src: $options.src
+    }, null, 8, _hoisted_2$x))
   ], 4);
 }
-var UXImage = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$J], ["__scopeId", "data-v-3d48a5ec"]]);
+var UXImage = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$J], ["__scopeId", "data-v-92100196"]]);
 var progressbar_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$I = {
   props: {
@@ -12596,6 +12652,9 @@ const _sfc_main$o = {
   props: {
     multiple: {
       type: Boolean
+    },
+    accept: {
+      type: String
     }
   },
   methods: {
@@ -12626,7 +12685,7 @@ const _sfc_main$o = {
     }
   }
 };
-const _hoisted_1$j = ["multiple"];
+const _hoisted_1$j = ["accept", "multiple"];
 const _hoisted_2$f = /* @__PURE__ */ createTextVNode("Select Files");
 function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ux_button = resolveComponent("ux-button");
@@ -12637,6 +12696,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode("input", {
       ref: "file",
+      accept: $props.accept,
       type: "file",
       multiple: $props.multiple,
       onChange: _cache[0] || (_cache[0] = ($event) => $options.filesSelected($event.target.files))
@@ -12656,7 +12716,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 32);
 }
-var FileDrop = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o], ["__scopeId", "data-v-67879182"]]);
+var FileDrop = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o], ["__scopeId", "data-v-65e7e548"]]);
 var upload_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$n = {
   mixins: [InputMixin],
@@ -18830,5 +18890,5 @@ const QikUI = {
     }
   }
 };
-export { CodeEditor, ContentBrowser, device as Device, FlexBody, FlexCell, FlexColumn, FlexFooter, FlexHeader, FlexRow, FlexSpacer, ModalMixin, NativeSelect, Panel, PanelBody, PanelFooter, PanelHeader, ProgressBar, QikUI, RememberScrollMixin, Search, Selection, Spinner, UXButton, UXCheckbox, UXForm, UXFormField, UXIcon, UXImage, UXLink, UXList, UXListItem, UXMenu, UXMenuList, UXRender, UXRenderField, UXSubmissionForm, UXSwitch, UXTab, NativeTable as UXTable, UXTabset, UxConfirmModal, UxContentModal, UxModal, UxOptionsModal, UxPromptModal };
+export { CodeEditor, ContentBrowser, device as Device, FileDrop, FlexBody, FlexCell, FlexColumn, FlexFooter, FlexHeader, FlexRow, FlexSpacer, ModalMixin, NativeSelect, Panel, PanelBody, PanelFooter, PanelHeader, ProgressBar, QikUI, RememberScrollMixin, Search, Selection, Spinner, UXButton, UXCheckbox, UXForm, UXFormField, UXIcon, UXImage, UXLink, UXList, UXListItem, UXMenu, UXMenuList, UXRender, UXRenderField, UXSubmissionForm, UXSwitch, UXTab, NativeTable as UXTable, UXTabset, UxConfirmModal, UxContentModal, UxModal, UxOptionsModal, UxPromptModal };
 //# sourceMappingURL=lib.es.js.map