@opentinyvue/vue-file-upload 2.21.0

package/lib/mobile-first.js

@@ -0,0 +1,620 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/file-upload/vue';
+import { defineComponent, props, setup, isVue3 } from '@opentinyvue/vue-common';
+import UploadList from '@opentinyvue/vue-upload-list';
+import Upload from '@opentinyvue/vue-upload';
+import Progress from '@opentinyvue/vue-progress';
+import Modal from '@opentinyvue/vue-modal';
+import DialogBox from '@opentinyvue/vue-dialog-box';
+import Tooltip from '@opentinyvue/vue-tooltip';
+import { IconAttachment, IconSuccessful, IconClose, IconDownload, IconFileCloudupload, IconPlus, IconPlusCircle, IconPicture, IconMic, IconStartCircle, IconHelpQuery } from '@opentinyvue/vue-icon';
+import Streamsaver from 'streamsaver';
+import Button from '@opentinyvue/vue-button';
+import Input from '@opentinyvue/vue-input';
+import Switch from '@opentinyvue/vue-switch';
+
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+
+var helper;
+var hasRequiredHelper;
+function requireHelper() {
+  if (hasRequiredHelper) return helper;
+  hasRequiredHelper = 1;
+  function _extends() {
+    return _extends = Object.assign ? Object.assign.bind() : function(a) {
+      for (var b, c = 1; c < arguments.length; c++) for (var d in b = arguments[c], b) Object.prototype.hasOwnProperty.call(b, d) && (a[d] = b[d]);
+      return a;
+    }, _extends.apply(this, arguments);
+  }
+  var normalMerge = ["attrs", "props", "domProps"], toArrayMerge = ["class", "style", "directives"], functionalMerge = ["on", "nativeOn"], mergeJsxProps = function mergeJsxProps2(a) {
+    return a.reduce(function(c, a2) {
+      for (var b in a2) if (!c[b]) c[b] = a2[b];
+      else if (-1 !== normalMerge.indexOf(b)) c[b] = _extends({}, c[b], a2[b]);
+      else if (-1 !== toArrayMerge.indexOf(b)) {
+        var d = c[b] instanceof Array ? c[b] : [c[b]], e = a2[b] instanceof Array ? a2[b] : [a2[b]];
+        c[b] = [].concat(d, e);
+      } else if (-1 !== functionalMerge.indexOf(b)) {
+        for (var f in a2[b]) if (c[b][f]) {
+          var g = c[b][f] instanceof Array ? c[b][f] : [c[b][f]], h = a2[b][f] instanceof Array ? a2[b][f] : [a2[b][f]];
+          c[b][f] = [].concat(g, h);
+        } else c[b][f] = a2[b][f];
+      } else if ("hook" === b) for (var i in a2[b]) c[b][i] = c[b][i] ? mergeFn(c[b][i], a2[b][i]) : a2[b][i];
+      else c[b] = a2[b];
+      return c;
+    }, {});
+  }, mergeFn = function mergeFn2(a, b) {
+    return function() {
+      a && a.apply(this, arguments), b && b.apply(this, arguments);
+    };
+  };
+  helper = mergeJsxProps;
+  return helper;
+}
+var helperExports = requireHelper();
+var _mergeJSXProps5 = /* @__PURE__ */ getDefaultExportFromCjs(helperExports);
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var __vue2_script = defineComponent({
+  inheritAttrs: false,
+  emits: ["change", "hash-progress", "error", "progress", "success", "remove", "download", "trigger-click", "click-file-list"],
+  props: [].concat(props, ["edm", "action", "headers", "data", "multiple", "name", "drag", "dragger", "withCredentials", "showFileList", "accept", "type", "beforeUpload", "beforeRemove", "fileList", "autoUpload", "listType", "httpRequest", "disabled", "limit", "openDownloadFile", "mergeService", "fileSize", "thumbOption", "isFolderTitle", "listOption", "maxNameLength", "scale", "showName", "sourceType", "showTitle", "title", "displayOnly", "customClass", "hwh5", "mode", "cacheToken", "lockScroll", "compact", "encryptConfig", "imageBgColor", "promptTip"]),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      extendOptions: {
+        Modal,
+        Streamsaver
+      }
+    });
+  },
+  components: {
+    TinyProgress: Progress,
+    UploadList,
+    Upload,
+    TinyDialogBox: DialogBox,
+    TinyTooltip: Tooltip,
+    IconAttachment: IconAttachment(),
+    IconSuccessful: IconSuccessful(),
+    IconCloseCircle: IconClose(),
+    IconDownload: IconDownload(),
+    IconFileCloudupload: IconFileCloudupload(),
+    TinyButton: Button,
+    IconPlus: IconPlus(),
+    IconPlusCircle: IconPlusCircle(),
+    IconPicture: IconPicture(),
+    IconMic: IconMic(),
+    IconStartCircle: IconStartCircle(),
+    IconHelpQuery: IconHelpQuery(),
+    TinyModal: Modal
+  },
+  render: function render() {
+    var _this = this;
+    var h = arguments[0];
+    var _this$state$listeners = this.state.listeners, _this$state$listeners2 = _this$state$listeners.exceed, exceed = _this$state$listeners2 === void 0 ? function() {
+    } : _this$state$listeners2, _this$state$listeners3 = _this$state$listeners.preview, preview = _this$state$listeners3 === void 0 ? void 0 : _this$state$listeners3, downloadFile = _this$state$listeners["download-file"], downloadAll = _this$state$listeners["download-all"], reUpload = _this$state$listeners["re-upload"], triggerClick = _this$state$listeners["trigger-click"], play = _this$state$listeners.play;
+    var _this$state = this.state, uploadFiles = _this$state.uploadFiles, isEdm = _this$state.isEdm, dialogConfigObj = _this$state.dialogConfigObj, isSuccess = _this$state.isSuccess, uploadDisabled = _this$state.uploadDisabled, url = _this$state.url, accept = _this$state.accept, httpRequest = _this$state.httpRequest, edmToken = _this$state.edmToken, iframeUrl = _this$state.iframeUrl, isDragover = _this$state.isDragover, selected = _this$state.selected, types = _this$state.types, isHwh5 = _this$state.isHwh5;
+    var handleRemove = this.handleRemove, updateFile = this.updateFile, slots = this.slots, _this$edm = this.edm, edm = _this$edm === void 0 ? {} : _this$edm, $attrs = this.$attrs, a = this.a, t = this.t, showTitle = this.showTitle, isFolderTitle = this.isFolderTitle, listOption = this.listOption, maxNameLength = this.maxNameLength, scale = this.scale, showName = this.showName, openDownloadFile = this.openDownloadFile, type = this.type, drag = this.drag, multiple = this.multiple, withCredentials = this.withCredentials, headers = this.headers, name = this.name, data = this.data, autoUpload = this.autoUpload, limit = this.limit, handleStart = this.handleStart, handleProgress = this.handleProgress, handleSuccess = this.handleSuccess, handleError = this.handleError, fileSize = this.fileSize, displayOnly = this.displayOnly, customClass = this.customClass, handleClickFileList = this.handleClickFileList, handleTriggerClick = this.handleTriggerClick, showFileList = this.showFileList, mode = this.mode, lockScroll = this.lockScroll, compact = this.compact, encryptConfig = this.encryptConfig, encryptDialogConfirm = this.encryptDialogConfirm, imageBgColor = this.imageBgColor, promptTip = this.promptTip;
+    var listType = this.listType === "saas" ? "text" : this.listType;
+    var title = this.title || t("ui.fileUpload.attachment");
+    var isDragSingle = listType === "drag-single";
+    var isText = listType === "text";
+    var isFolder = edm.upload ? edm.upload.isFolder : false;
+    var getDefaultTitle = function getDefaultTitle2(_ref) {
+      var listType2 = _ref.listType, title2 = _ref.title, showTitle2 = _ref.showTitle, _ref$isInside = _ref.isInside, isInside = _ref$isInside === void 0 ? false : _ref$isInside, _ref$displayOnly = _ref.displayOnly, displayOnly2 = _ref$displayOnly === void 0 ? false : _ref$displayOnly, mode2 = _ref.mode;
+      var defaultTitle;
+      if (isInside) {
+        defaultTitle = h("span", {
+          "class": showTitle2 ? "inline-block mr-1 text-sm text-color-text-primary font-bold" : "hidden"
+        }, [title2]);
+      } else {
+        var cls = "text-sm text-color-text-primary font-bold leading-5.5 ";
+        if (listType2 !== "text") {
+          cls += "hidden";
+        } else if (!displayOnly2 && showTitle2) {
+          cls += "hidden sm:block";
+        } else {
+          !displayOnly2 || !showTitle2 ? cls += "hidden" : cls += "mt-4 mb-2";
+        }
+        defaultTitle = mode2 !== "bubble" ? h("div", {
+          "class": cls
+        }, [h("span", {
+          "class": "mr-1"
+        }, [title2]), displayOnly2 && getDisplayOnlyTip({
+          isEdm,
+          fileSize
+        })]) : null;
+      }
+      return defaultTitle;
+    };
+    var getDefaultTip = function getDefaultTip2(_ref2) {
+      var listType2 = _ref2.listType, title2 = _ref2.title, showTitle2 = _ref2.showTitle, isEdm2 = _ref2.isEdm, accept2 = _ref2.accept, fileSize2 = _ref2.fileSize, slots2 = _ref2.slots;
+      var defaultTip;
+      var tipMsg = _this.getTipMessage({
+        accept: isEdm2 ? accept2 : _this.accept,
+        fileSize: fileSize2,
+        limit: _this.limit
+      });
+      var popperConfig = {
+        bubbling: true
+      };
+      if (listType2 === "text") {
+        defaultTip = h("div", {
+          "class": "inline-block w-full sm:pl-4 text-color-none"
+        }, [h("div", {
+          "class": "block sm:hidden"
+        }, [getDefaultTitle({
+          listType: listType2,
+          title: title2,
+          showTitle: showTitle2,
+          isInside: true
+        }), h("tiny-tooltip", {
+          "attrs": {
+            "effect": "dark",
+            "content": tipMsg,
+            "placement": "top",
+            "popper-options": popperConfig
+          }
+        }, [h("icon-help-query", {
+          "class": "-mt-0.5 fill-color-none-hover"
+        })])])]);
+      } else if (listType2 === "drag-single") {
+        defaultTip = h("div", {
+          "attrs": {
+            "title": tipMsg
+          },
+          "class": "leading-5 text-color-text-primary overflow-hidden text-ellipsis whitespace-nowrap"
+        }, [slots2.tip && slots2.tip() || tipMsg]);
+      } else {
+        defaultTip = slots2.tip ? h("div", {
+          "class": "mb-4 text-color-none"
+        }, [slots2.tip()]) : null;
+      }
+      return defaultTip;
+    };
+    var getDisplayOnlyTip = function getDisplayOnlyTip2(_ref3) {
+      var isEdm2 = _ref3.isEdm, fileSize2 = _ref3.fileSize;
+      var popperConfig = {
+        bubbling: true
+      };
+      return h("tiny-tooltip", {
+        "class": "inline-block sm:hidden",
+        "attrs": {
+          "effect": "dark",
+          "content": _this.getTipMessage({
+            accept: isEdm2 ? accept : _this.accept,
+            fileSize: fileSize2,
+            limit: _this.limit
+          }),
+          "placement": "top",
+          "popper-options": popperConfig
+        }
+      }, [h("icon-help-query", {
+        "class": "-mt-0.5  fill-color-none-hover"
+      })]);
+    };
+    var getTriggerContent = function getTriggerContent2(_ref4) {
+      var listType2 = _ref4.listType, t2 = _ref4.t, type2 = _ref4.type, disabled = _ref4.disabled;
+      var defaultList = {
+        "picture": h("div", [h("icon-picture", {
+          "class": "w-6 h-6 fill-color-icon-secondary"
+        }), h("div", {
+          "class": "mt-1 sm:mt-2 text-color-text-secondary text-xs"
+        }, [t2("ui.upload.addPicture")])]),
+        "audio": h("div", [h("icon-mic", {
+          "class": "w-6 h-6 fill-color-icon-secondary"
+        }), h("div", {
+          "class": "mt-1 sm:mt-2 text-color-text-secondary text-xs"
+        }, [t2("ui.upload.addAudio")])]),
+        "video": h("div", [h("icon-start-circle", {
+          "class": "w-6 h-6 fill-color-icon-secondary"
+        }), h("div", {
+          "class": "mt-1 sm:mt-2 text-color-text-secondary text-xs"
+        }, [t2("ui.upload.addVideo")])])
+      };
+      var defaultContent;
+      if (listType2 === "text") {
+        defaultContent = h("div", {
+          "class": "inline-block"
+        }, [h("tiny-button", {
+          "attrs": {
+            "disabled": disabled
+          },
+          "class": "hidden sm:block"
+        }, [h("div", {
+          "class": "flex items-center"
+        }, [h("icon-plus"), h("span", {
+          "class": "ml-2"
+        }, [t2("ui.fileUpload.uploadFile")])])]), h("icon-plus-circle", {
+          "attrs": {
+            "custom-class": "sm:hidden w-5 h-5"
+          }
+        })]);
+      } else if (listType2 === "drag-single") {
+        defaultContent = null;
+      } else {
+        var defaultClass = "relative h-full border border-dashed border-color-border rounded bg-color-bg-2 align-top hover:cursor-pointer";
+        listType2 === "picture-single" && uploadFiles.length && (defaultClass += " hidden");
+        defaultContent = h("div", {
+          "class": defaultClass
+        }, [h("div", {
+          "class": "absolute w-full top-1/2 left-0 -translate-y-1/2 z-[1] text-center"
+        }, [defaultList[type2 || "picture"]])]);
+      }
+      return defaultContent;
+    };
+    var getOperateContent = function getOperateContent2(_ref5) {
+      var listType2 = _ref5.listType, downloadAll2 = _ref5.downloadAll, uploadFiles2 = _ref5.uploadFiles, t2 = _ref5.t;
+      var operateContent;
+      if (listType2 === "text") {
+        operateContent = downloadAll2 ? h("div", {
+          "class": "hidden sm:inline-block align-middle"
+        }, [h("tiny-button", {
+          "class": "ml-2",
+          "on": {
+            "click": function click() {
+              return downloadAll2(uploadFiles2);
+            }
+          }
+        }, [h("div", {
+          "class": "flex items-center"
+        }, [h("icon-download"), h("span", {
+          "class": "ml-2"
+        }, [t2("ui.fileUpload.downloadAll")])])])]) : null;
+      }
+      return operateContent;
+    };
+    var getTrigger = function getTrigger2(_ref6) {
+      var displayOnly2 = _ref6.displayOnly, slots2 = _ref6.slots, listType2 = _ref6.listType, t2 = _ref6.t, type2 = _ref6.type, disabled = _ref6.disabled;
+      return !displayOnly2 || displayOnly2 && ["picture-card", "picture-single"].includes(type2) ? slots2.trigger ? slots2.trigger() : getTriggerContent({
+        listType: listType2,
+        t: t2,
+        type: type2,
+        disabled
+      }) : null;
+    };
+    var _tip = !displayOnly ? getDefaultTip({
+      listType,
+      title,
+      showTitle,
+      isEdm,
+      accept,
+      fileSize,
+      slots
+    }) : null;
+    _tip && _tip.data && (_tip.data.slot = "tip");
+    var _operate = !displayOnly ? getOperateContent({
+      listType,
+      downloadAll,
+      uploadFiles,
+      t
+    }) : null;
+    _operate && _operate.data && (_operate.data.slot = "operate");
+    var getChildren = function getChildren2(type2) {
+      var trigger = getTrigger({
+        displayOnly,
+        slots,
+        listType,
+        t,
+        type: type2,
+        disabled: uploadDisabled
+      });
+      var childNodes = isVue3 ? {
+        default: function _default() {
+          return trigger;
+        },
+        tip: function tip() {
+          return !isDragSingle && _tip;
+        },
+        operate: function operate() {
+          return _operate;
+        }
+      } : [trigger, !isDragSingle && _tip, _operate];
+      return childNodes;
+    };
+    var tipMessage = slots.tip && slots.tip() || this.getTipMessage({
+      accept: isEdm ? accept : this.accept,
+      fileSize,
+      limit: this.limit
+    });
+    var uploadData = {
+      props: {
+        type,
+        drag,
+        action: url,
+        multiple,
+        withCredentials,
+        headers,
+        name,
+        data,
+        edm,
+        accept: isEdm ? accept : this.accept,
+        fileList: uploadFiles,
+        autoUpload,
+        listType,
+        disabled: uploadDisabled,
+        limit,
+        onExceed: exceed,
+        onStart: handleStart,
+        onProgress: handleProgress,
+        onSuccess: handleSuccess,
+        onError: handleError,
+        onPreview: preview,
+        httpRequest,
+        isFolder,
+        edmToken,
+        scale,
+        displayOnly,
+        customClass,
+        handleTriggerClick,
+        mode,
+        showTitle,
+        isHwh5,
+        tipMessage,
+        promptTip,
+        showFileList
+      },
+      ref: "upload-inner"
+    };
+    var createUploadComponent = function createUploadComponent2(type2) {
+      uploadData.props.sourceType = type2;
+      return h(Upload, uploadData, getChildren(type2));
+    };
+    var uploadListDate = {
+      props: {
+        disabled: uploadDisabled,
+        isFolder,
+        isEdm,
+        edm,
+        displayOnly,
+        listType,
+        files: uploadFiles,
+        isFolderTitle,
+        listOption,
+        maxNameLength,
+        scale,
+        showName,
+        types,
+        isDragover,
+        handlePreview: preview,
+        handleDownloadFile: downloadFile,
+        handleReUpload: reUpload,
+        openDownloadFile,
+        selected,
+        triggerClick,
+        isHwh5,
+        triggerPlay: play,
+        mode,
+        lockScroll,
+        compact,
+        imageBgColor
+      },
+      scopedSlots: {
+        default: function _default(props2) {
+          if (slots.file) {
+            return slots.file({
+              file: props2.file
+            });
+          }
+        },
+        upload: function upload(_ref7) {
+          var type2 = _ref7.type;
+          return !isText ? createUploadComponent(type2) : null;
+        },
+        tip: function tip() {
+          return _tip;
+        },
+        "assist-content": function assistContent(props2) {
+          if (slots["assist-content"]) {
+            return slots["assist-content"]({
+              file: props2.file
+            });
+          }
+        },
+        operate: function operate(props2) {
+          if (slots.operate) {
+            return slots.operate({
+              file: props2.file
+            });
+          }
+        }
+      },
+      on: {
+        remove: handleRemove,
+        update: updateFile,
+        start: handleStart,
+        "click-file-list": handleClickFileList,
+        "update:visible": function updateVisible(visible) {
+          return _this.state.visible = visible;
+        }
+      },
+      ref: "upload-list-inner"
+    };
+    var uploadList;
+    if (showFileList) {
+      uploadList = h(UploadList, uploadListDate);
+      if (mode === "bubble") {
+        uploadList = h("tiny-modal", {
+          props: {
+            customClass: "sm:w-[theme(spacing.112)]",
+            title: t("ui.fileUpload.uploadList"),
+            position: "bottom-right",
+            mask: false,
+            showClose: false,
+            showFooter: false,
+            modelValue: this.state.visible
+          },
+          on: {
+            "update:modelValue": function updateModelValue(val) {
+              return _this.state.visible = val;
+            }
+          }
+        }, [uploadList]);
+      }
+    }
+    var previewComponent = null;
+    var encryptDialogComponent = null;
+    var notice = this.slots.notice && this.slots.notice();
+    var noticePC = this.state.current !== "default" ? notice : "";
+    var noticeMF = this.state.current === "default" ? notice : "";
+    if (isEdm && isSuccess) {
+      uploadData.props.accept = accept;
+      uploadData.props.edmToken = edmToken;
+    }
+    if (edm.preview) {
+      previewComponent = h("tiny-dialog-box", _extends({
+        minHeight: "600px",
+        width: "60%"
+      }, dialogConfigObj, {
+        scopedSlots: {
+          default: function _default() {
+            return h("iframe", {
+              "attrs": {
+                "id": "_iframe",
+                "allowfullscreen": true,
+                "allowtransparency": "true",
+                "frameborder": "0",
+                "border": "0",
+                "marginwidth": "0",
+                "marginheight": "0",
+                "scrolling": "no",
+                "src": iframeUrl
+              },
+              "style": "display: block;width: 100%;height: 500px;display: inline-block;"
+            });
+          }
+        }
+      }));
+    }
+    if (encryptConfig.enabled) {
+      encryptDialogComponent = h("tiny-dialog-box", {
+        style: "",
+        props: {
+          dataTag: "encrypt-config-dialog",
+          lockScroll: true,
+          visible: this.state.encryptDialogConfig.show,
+          dragable: true,
+          title: this.t("ui.fileUpload.encryptDialogTitle"),
+          width: "380px",
+          height: "auto",
+          "modal-append-to-body": false
+          // tiny的dialogbox需要添加此属性，防止自动加到body下
+        },
+        on: {
+          "update:visible": function updateVisible(value) {
+            return _this.state.encryptDialogConfig.show = value;
+          }
+        },
+        scopedSlots: {
+          default: function _default() {
+            return h("div", {
+              "attrs": {
+                "data-tag": "encrypt-config-dialog-body"
+              }
+            }, [h("div", [_this.t("ui.fileUpload.addWatermark")]), h("div", [h(Input, {
+              "model": {
+                value: _this.encryptConfig.watermark,
+                callback: function callback($$v) {
+                  _this.$set(_this.encryptConfig, "watermark", $$v);
+                }
+              }
+            })]), h("p", [" "]), h("div", [_this.t("ui.fileUpload.encrypted")]), h("div", [h(Switch, {
+              "model": {
+                value: _this.encryptConfig.encrypt,
+                callback: function callback($$v) {
+                  _this.$set(_this.encryptConfig, "encrypt", $$v);
+                }
+              }
+            })])]);
+          },
+          footer: function footer() {
+            return [h(Button, {
+              "on": {
+                "click": function click() {
+                  return _this.state.encryptDialogConfig.show = false;
+                }
+              }
+            }, [_this.t("ui.base.cancel")]), [h(Button, {
+              "attrs": {
+                "type": "primary",
+                "customClass": "ml-2"
+              },
+              "on": {
+                "click": function click() {
+                  return encryptDialogConfirm();
+                }
+              }
+            }, [_this.t("ui.popupload.uploadButtonText")])]];
+          }
+        }
+      });
+    }
+    var attrs = a($attrs, ["^on[A-Z]"]);
+    return h("div", _mergeJSXProps5([{}, attrs, {
+      "attrs": {
+        "data-tag": "tiny-file-upload"
+      },
+      "class": isDragSingle ? "relative inline-block" : ""
+    }]), [getDefaultTitle({
+      listType,
+      title,
+      showTitle,
+      displayOnly,
+      mode
+    }), noticePC, isText && !displayOnly ? slots.trigger ? [createUploadComponent()] : createUploadComponent() : null, noticeMF, uploadList, previewComponent, encryptDialogComponent]);
+  }
+});
+var __vue2_render, __vue2_staticRenderFns;
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, __vue2_render, __vue2_staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var mobileFirst = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobileFirst as default };