3682 lines
153 KiB
JavaScript
3682 lines
153 KiB
JavaScript
import { LoadingOutlined } from '@ant-design/icons-vue';
|
|
import { ba as Icon, u as useRouter$1, a as useConfigStore, b as useUserStore, bA as checkUsername, f as loading, t as reactiveProjectName, x as getSupabaseStorageUrl, A as APP_Milady_Date, bB as updateUser, bC as Modal, e as api$1, s as supabase, bD as getStoreCollections, J as initDefaultProps, C as useConfigInject, D as genComponentStyleHook, Y as useInjectDisabled, bk as useLocaleReceiver, bl as localeValues, F as classNames, H as flattenChildren, Z as merge, V as functionType, aA as someType, K as objectType, X as booleanType, W as stringType, G as arrayType, N as resetComponent, O as textEllipsis, a7 as clearFix, $ as Keyframe, bm as getTransitionGroupProps, by as pickAttrs, an as getTransitionProps, a9 as isValidElement, a1 as Button, bh as LoadingOutlined$1, a3 as filterEmpty } from './server.mjs';
|
|
import { createVNode, defineComponent, ref, h, watch, resolveDirective, mergeProps, unref, withCtx, createBlock, openBlock, Fragment, toDisplayString, createCommentVNode, createTextVNode, withDirectives, renderList, nextTick, computed, toRef, shallowRef, watchEffect, TransitionGroup, vShow, Transition, useSSRContext } from 'vue';
|
|
import { ssrRenderComponent, ssrRenderClass, ssrInterpolate, ssrRenderAttrs, ssrGetDirectiveProps, ssrRenderList, ssrRenderStyle, ssrRenderAttr } from 'vue/server-renderer';
|
|
import { B as BasicIconOld, u as usePrefix } from './BasicIconOld-I4c2ShMu.mjs';
|
|
import { e as empty_user } from './empty_user-BaUNCdgf.mjs';
|
|
import { i as inputRulesNoMessage } from './inputRules-BErREp_b.mjs';
|
|
import { _ as _sfc_main$5 } from './BasicInput-BEP6ZgUl.mjs';
|
|
import { _ as _sfc_main$7 } from './BasicTextArea-Cj0DwXpZ.mjs';
|
|
import { _ as _sfc_main$1$1, a as _sfc_main$6 } from './BaseDatePicker-CBTFfZPt.mjs';
|
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
import _objectSpread$5 from '@babel/runtime/helpers/esm/objectSpread2';
|
|
import partition from 'lodash-es/partition.js';
|
|
import { E as EyeOutlined } from './index--Q-kfs0Q.mjs';
|
|
import { _ as __nuxt_component_2$1 } from './index-Dxyzjwb5.mjs';
|
|
import { _ as __nuxt_component_2 } from './index-zdsu3rBC.mjs';
|
|
import { g as genCollapseMotion, c as collapseMotion } from './collapseMotion-cQ2SGjCA.mjs';
|
|
import { u as useMergedState } from './useMergedState-BZEfJ8Fl.mjs';
|
|
import { F as Form, _ as _sfc_main$9 } from './index-DwUxJCFD.mjs';
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
import { u as useInjectFormItemContext } from './FormItemContext-CDDW52IT.mjs';
|
|
import { B as BasicSheet } from './index-DVD7vSfp.mjs';
|
|
import { _ as _sfc_main$8 } from './BasicButton-BAlnoE_w.mjs';
|
|
import { _ as _sfc_main$4 } from './InstaInput-DqKUdtw2.mjs';
|
|
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
|
|
import { S as Spin } from './index-DqCYDGJX.mjs';
|
|
import { debounce } from 'lodash-es';
|
|
|
|
// This icon file is generated automatically.
|
|
var PaperClipOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z" } }] }, "name": "paper-clip", "theme": "outlined" };
|
|
|
|
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } return target; }
|
|
|
|
function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
var PaperClipOutlined = function PaperClipOutlined(props, context) {
|
|
var p = _objectSpread$4({}, props, context.attrs);
|
|
|
|
return createVNode(Icon, _objectSpread$4({}, p, {
|
|
"icon": PaperClipOutlined$1
|
|
}), null);
|
|
};
|
|
|
|
PaperClipOutlined.displayName = 'PaperClipOutlined';
|
|
PaperClipOutlined.inheritAttrs = false;
|
|
|
|
// This icon file is generated automatically.
|
|
var PictureTwoTone$1 = { "icon": function render(primaryColor, secondaryColor) { return { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z", "fill": primaryColor } }, { "tag": "path", "attrs": { "d": "M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z", "fill": secondaryColor } }, { "tag": "path", "attrs": { "d": "M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z", "fill": secondaryColor } }, { "tag": "path", "attrs": { "d": "M276 368a28 28 0 1056 0 28 28 0 10-56 0z", "fill": secondaryColor } }, { "tag": "path", "attrs": { "d": "M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z", "fill": primaryColor } }] }; }, "name": "picture", "theme": "twotone" };
|
|
|
|
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } return target; }
|
|
|
|
function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
var PictureTwoTone = function PictureTwoTone(props, context) {
|
|
var p = _objectSpread$3({}, props, context.attrs);
|
|
|
|
return createVNode(Icon, _objectSpread$3({}, p, {
|
|
"icon": PictureTwoTone$1
|
|
}), null);
|
|
};
|
|
|
|
PictureTwoTone.displayName = 'PictureTwoTone';
|
|
PictureTwoTone.inheritAttrs = false;
|
|
|
|
// This icon file is generated automatically.
|
|
var FileTwoTone$1 = { "icon": function render(primaryColor, secondaryColor) { return { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M534 352V136H232v752h560V394H576a42 42 0 01-42-42z", "fill": secondaryColor } }, { "tag": "path", "attrs": { "d": "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM602 137.8L790.2 326H602V137.8zM792 888H232V136h302v216a42 42 0 0042 42h216v494z", "fill": primaryColor } }] }; }, "name": "file", "theme": "twotone" };
|
|
|
|
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
|
|
|
|
function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
var FileTwoTone = function FileTwoTone(props, context) {
|
|
var p = _objectSpread$2({}, props, context.attrs);
|
|
|
|
return createVNode(Icon, _objectSpread$2({}, p, {
|
|
"icon": FileTwoTone$1
|
|
}), null);
|
|
};
|
|
|
|
FileTwoTone.displayName = 'FileTwoTone';
|
|
FileTwoTone.inheritAttrs = false;
|
|
|
|
// This icon file is generated automatically.
|
|
var DeleteOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" } }] }, "name": "delete", "theme": "outlined" };
|
|
|
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } return target; }
|
|
|
|
function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
var DeleteOutlined = function DeleteOutlined(props, context) {
|
|
var p = _objectSpread$1({}, props, context.attrs);
|
|
|
|
return createVNode(Icon, _objectSpread$1({}, p, {
|
|
"icon": DeleteOutlined$1
|
|
}), null);
|
|
};
|
|
|
|
DeleteOutlined.displayName = 'DeleteOutlined';
|
|
DeleteOutlined.inheritAttrs = false;
|
|
|
|
// This icon file is generated automatically.
|
|
var DownloadOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z" } }] }, "name": "download", "theme": "outlined" };
|
|
|
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
|
|
|
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
var DownloadOutlined = function DownloadOutlined(props, context) {
|
|
var p = _objectSpread({}, props, context.attrs);
|
|
|
|
return createVNode(Icon, _objectSpread({}, p, {
|
|
"icon": DownloadOutlined$1
|
|
}), null);
|
|
};
|
|
|
|
DownloadOutlined.displayName = 'DownloadOutlined';
|
|
DownloadOutlined.inheritAttrs = false;
|
|
|
|
const now = +/* @__PURE__ */ new Date();
|
|
let index = 0;
|
|
function uid() {
|
|
return `vc-upload-${now}-${++index}`;
|
|
}
|
|
const attrAccept = (file, acceptedFiles) => {
|
|
if (file && acceptedFiles) {
|
|
const acceptedFilesArray = Array.isArray(acceptedFiles) ? acceptedFiles : acceptedFiles.split(",");
|
|
const fileName = file.name || "";
|
|
const mimeType = file.type || "";
|
|
const baseMimeType = mimeType.replace(/\/.*$/, "");
|
|
return acceptedFilesArray.some((type) => {
|
|
const validType = type.trim();
|
|
if (/^\*(\/\*)?$/.test(type)) {
|
|
return true;
|
|
}
|
|
if (validType.charAt(0) === ".") {
|
|
const lowerFileName = fileName.toLowerCase();
|
|
const lowerType = validType.toLowerCase();
|
|
let affixList = [lowerType];
|
|
if (lowerType === ".jpg" || lowerType === ".jpeg") {
|
|
affixList = [".jpg", ".jpeg"];
|
|
}
|
|
return affixList.some((affix) => lowerFileName.endsWith(affix));
|
|
}
|
|
if (/\/\*$/.test(validType)) {
|
|
return baseMimeType === validType.replace(/\/.*$/, "");
|
|
}
|
|
if (mimeType === validType) {
|
|
return true;
|
|
}
|
|
if (/^\w+$/.test(validType)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
}
|
|
return true;
|
|
};
|
|
function loopFiles(item, callback) {
|
|
const dirReader = item.createReader();
|
|
let fileList = [];
|
|
function sequence() {
|
|
dirReader.readEntries((entries) => {
|
|
const entryList = Array.prototype.slice.apply(entries);
|
|
fileList = fileList.concat(entryList);
|
|
const isFinished = !entryList.length;
|
|
if (isFinished) {
|
|
callback(fileList);
|
|
} else {
|
|
sequence();
|
|
}
|
|
});
|
|
}
|
|
sequence();
|
|
}
|
|
const traverseFileTree = (files, callback, isAccepted) => {
|
|
const _traverseFileTree = (item, path) => {
|
|
item.path = path || "";
|
|
if (item.isFile) {
|
|
item.file((file) => {
|
|
if (isAccepted(file)) {
|
|
if (item.fullPath && !file.webkitRelativePath) {
|
|
Object.defineProperties(file, {
|
|
webkitRelativePath: {
|
|
writable: true
|
|
}
|
|
});
|
|
file.webkitRelativePath = item.fullPath.replace(/^\//, "");
|
|
Object.defineProperties(file, {
|
|
webkitRelativePath: {
|
|
writable: false
|
|
}
|
|
});
|
|
}
|
|
callback([file]);
|
|
}
|
|
});
|
|
} else if (item.isDirectory) {
|
|
loopFiles(item, (entries) => {
|
|
entries.forEach((entryItem) => {
|
|
_traverseFileTree(entryItem, `${path}${item.name}/`);
|
|
});
|
|
});
|
|
}
|
|
};
|
|
files.forEach((file) => {
|
|
_traverseFileTree(file.webkitGetAsEntry());
|
|
});
|
|
};
|
|
const uploadProps$1 = () => {
|
|
return {
|
|
capture: [Boolean, String],
|
|
multipart: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
name: String,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
componentTag: String,
|
|
action: [String, Function],
|
|
method: String,
|
|
directory: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
data: [Object, Function],
|
|
headers: Object,
|
|
accept: String,
|
|
multiple: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
onBatchStart: Function,
|
|
onReject: Function,
|
|
onStart: Function,
|
|
onError: Function,
|
|
onSuccess: Function,
|
|
onProgress: Function,
|
|
beforeUpload: Function,
|
|
customRequest: Function,
|
|
withCredentials: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
openFileDialogOnClick: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
prefixCls: String,
|
|
id: String,
|
|
onMouseenter: Function,
|
|
onMouseleave: Function,
|
|
onClick: Function
|
|
};
|
|
};
|
|
var __awaiter$1 = function(thisArg, _arguments, P, generator) {
|
|
function adopt(value) {
|
|
return value instanceof P ? value : new P(function(resolve) {
|
|
resolve(value);
|
|
});
|
|
}
|
|
return new (P || (P = Promise))(function(resolve, reject) {
|
|
function fulfilled(value) {
|
|
try {
|
|
step(generator.next(value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function rejected(value) {
|
|
try {
|
|
step(generator["throw"](value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function step(result) {
|
|
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
}
|
|
step((generator = generator.apply(thisArg, [])).next());
|
|
});
|
|
};
|
|
var __rest$2 = function(s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
const AjaxUpload = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "AjaxUploader",
|
|
inheritAttrs: false,
|
|
props: uploadProps$1(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs,
|
|
expose
|
|
} = _ref;
|
|
const uid$1 = ref(uid());
|
|
const reqs = {};
|
|
const fileInput = ref();
|
|
const processFile = (file, fileList) => __awaiter$1(this, void 0, void 0, function* () {
|
|
const {
|
|
beforeUpload
|
|
} = props;
|
|
let transformedFile = file;
|
|
if (beforeUpload) {
|
|
try {
|
|
transformedFile = yield beforeUpload(file, fileList);
|
|
} catch (e) {
|
|
transformedFile = false;
|
|
}
|
|
if (transformedFile === false) {
|
|
return {
|
|
origin: file,
|
|
parsedFile: null,
|
|
action: null,
|
|
data: null
|
|
};
|
|
}
|
|
}
|
|
const {
|
|
action
|
|
} = props;
|
|
let mergedAction;
|
|
if (typeof action === "function") {
|
|
mergedAction = yield action(file);
|
|
} else {
|
|
mergedAction = action;
|
|
}
|
|
const {
|
|
data
|
|
} = props;
|
|
let mergedData;
|
|
if (typeof data === "function") {
|
|
mergedData = yield data(file);
|
|
} else {
|
|
mergedData = data;
|
|
}
|
|
const parsedData = (
|
|
// string type is from legacy `transformFile`.
|
|
// Not sure if this will work since no related test case works with it
|
|
(typeof transformedFile === "object" || typeof transformedFile === "string") && transformedFile ? transformedFile : file
|
|
);
|
|
let parsedFile;
|
|
if (parsedData instanceof File) {
|
|
parsedFile = parsedData;
|
|
} else {
|
|
parsedFile = new File([parsedData], file.name, {
|
|
type: file.type
|
|
});
|
|
}
|
|
const mergedParsedFile = parsedFile;
|
|
mergedParsedFile.uid = file.uid;
|
|
return {
|
|
origin: file,
|
|
data: mergedData,
|
|
parsedFile: mergedParsedFile,
|
|
action: mergedAction
|
|
};
|
|
});
|
|
const post = (_ref2) => {
|
|
let {
|
|
data,
|
|
origin,
|
|
action,
|
|
parsedFile
|
|
} = _ref2;
|
|
{
|
|
return;
|
|
}
|
|
};
|
|
const reset = () => {
|
|
uid$1.value = uid();
|
|
};
|
|
const abort = (file) => {
|
|
if (file) {
|
|
const uid2 = file.uid ? file.uid : file;
|
|
if (reqs[uid2] && reqs[uid2].abort) {
|
|
reqs[uid2].abort();
|
|
}
|
|
delete reqs[uid2];
|
|
} else {
|
|
Object.keys(reqs).forEach((uid2) => {
|
|
if (reqs[uid2] && reqs[uid2].abort) {
|
|
reqs[uid2].abort();
|
|
}
|
|
delete reqs[uid2];
|
|
});
|
|
}
|
|
};
|
|
const uploadFiles = (files) => {
|
|
const originFiles = [...files];
|
|
const postFiles = originFiles.map((file) => {
|
|
file.uid = uid();
|
|
return processFile(file, originFiles);
|
|
});
|
|
Promise.all(postFiles).then((fileList) => {
|
|
const {
|
|
onBatchStart
|
|
} = props;
|
|
onBatchStart === null || onBatchStart === void 0 ? void 0 : onBatchStart(fileList.map((_ref3) => {
|
|
let {
|
|
origin,
|
|
parsedFile
|
|
} = _ref3;
|
|
return {
|
|
file: origin,
|
|
parsedFile
|
|
};
|
|
}));
|
|
fileList.filter((file) => file.parsedFile !== null).forEach((file) => {
|
|
post(file);
|
|
});
|
|
});
|
|
};
|
|
const onChange = (e) => {
|
|
const {
|
|
accept,
|
|
directory
|
|
} = props;
|
|
const {
|
|
files
|
|
} = e.target;
|
|
const acceptedFiles = [...files].filter((file) => !directory || attrAccept(file, accept));
|
|
uploadFiles(acceptedFiles);
|
|
reset();
|
|
};
|
|
const onClick = (e) => {
|
|
const el = fileInput.value;
|
|
if (!el) {
|
|
return;
|
|
}
|
|
const {
|
|
onClick: onClick2
|
|
} = props;
|
|
el.click();
|
|
if (onClick2) {
|
|
onClick2(e);
|
|
}
|
|
};
|
|
const onKeyDown = (e) => {
|
|
if (e.key === "Enter") {
|
|
onClick(e);
|
|
}
|
|
};
|
|
const onFileDrop = (e) => {
|
|
const {
|
|
multiple
|
|
} = props;
|
|
e.preventDefault();
|
|
if (e.type === "dragover") {
|
|
return;
|
|
}
|
|
if (props.directory) {
|
|
traverseFileTree(Array.prototype.slice.call(e.dataTransfer.items), uploadFiles, (_file) => attrAccept(_file, props.accept));
|
|
} else {
|
|
const files = partition(Array.prototype.slice.call(e.dataTransfer.files), (file) => attrAccept(file, props.accept));
|
|
let successFiles = files[0];
|
|
const errorFiles = files[1];
|
|
if (multiple === false) {
|
|
successFiles = successFiles.slice(0, 1);
|
|
}
|
|
uploadFiles(successFiles);
|
|
if (errorFiles.length && props.onReject) props.onReject(errorFiles);
|
|
}
|
|
};
|
|
expose({
|
|
abort
|
|
});
|
|
return () => {
|
|
var _a;
|
|
const {
|
|
componentTag: Tag,
|
|
prefixCls,
|
|
disabled,
|
|
id,
|
|
multiple,
|
|
accept,
|
|
capture,
|
|
directory,
|
|
openFileDialogOnClick,
|
|
onMouseenter,
|
|
onMouseleave
|
|
} = props, otherProps = __rest$2(props, ["componentTag", "prefixCls", "disabled", "id", "multiple", "accept", "capture", "directory", "openFileDialogOnClick", "onMouseenter", "onMouseleave"]);
|
|
const cls = {
|
|
[prefixCls]: true,
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
[attrs.class]: !!attrs.class
|
|
};
|
|
const dirProps = directory ? {
|
|
directory: "directory",
|
|
webkitdirectory: "webkitdirectory"
|
|
} : {};
|
|
const events = disabled ? {} : {
|
|
onClick: openFileDialogOnClick ? onClick : () => {
|
|
},
|
|
onKeydown: openFileDialogOnClick ? onKeyDown : () => {
|
|
},
|
|
onMouseenter,
|
|
onMouseleave,
|
|
onDrop: onFileDrop,
|
|
onDragover: onFileDrop,
|
|
tabindex: "0"
|
|
};
|
|
return createVNode(Tag, _objectSpread$5(_objectSpread$5({}, events), {}, {
|
|
"class": cls,
|
|
"role": "button",
|
|
"style": attrs.style
|
|
}), {
|
|
default: () => [createVNode("input", _objectSpread$5(_objectSpread$5(_objectSpread$5({}, pickAttrs(otherProps, {
|
|
aria: true,
|
|
data: true
|
|
})), {}, {
|
|
"id": id,
|
|
"type": "file",
|
|
"ref": fileInput,
|
|
"onClick": (e) => e.stopPropagation(),
|
|
"onCancel": (e) => e.stopPropagation(),
|
|
"key": uid$1.value,
|
|
"style": {
|
|
display: "none"
|
|
},
|
|
"accept": accept
|
|
}, dirProps), {}, {
|
|
"multiple": multiple,
|
|
"onChange": onChange
|
|
}, capture != null ? {
|
|
capture
|
|
} : {}), null), (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]
|
|
});
|
|
};
|
|
}
|
|
});
|
|
function empty() {
|
|
}
|
|
const Upload$1 = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "Upload",
|
|
inheritAttrs: false,
|
|
props: initDefaultProps(uploadProps$1(), {
|
|
componentTag: "span",
|
|
prefixCls: "rc-upload",
|
|
data: {},
|
|
headers: {},
|
|
name: "file",
|
|
multipart: false,
|
|
onStart: empty,
|
|
onError: empty,
|
|
onSuccess: empty,
|
|
multiple: false,
|
|
beforeUpload: null,
|
|
customRequest: null,
|
|
withCredentials: false,
|
|
openFileDialogOnClick: true
|
|
}),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs,
|
|
expose
|
|
} = _ref;
|
|
const uploader = ref();
|
|
const abort = (file) => {
|
|
var _a;
|
|
(_a = uploader.value) === null || _a === void 0 ? void 0 : _a.abort(file);
|
|
};
|
|
expose({
|
|
abort
|
|
});
|
|
return () => {
|
|
return createVNode(AjaxUpload, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, props), attrs), {}, {
|
|
"ref": uploader
|
|
}), slots);
|
|
};
|
|
}
|
|
});
|
|
function uploadProps() {
|
|
return {
|
|
capture: someType([Boolean, String]),
|
|
type: stringType(),
|
|
name: String,
|
|
defaultFileList: arrayType(),
|
|
fileList: arrayType(),
|
|
action: someType([String, Function]),
|
|
directory: booleanType(),
|
|
data: someType([Object, Function]),
|
|
method: stringType(),
|
|
headers: objectType(),
|
|
showUploadList: someType([Boolean, Object]),
|
|
multiple: booleanType(),
|
|
accept: String,
|
|
beforeUpload: functionType(),
|
|
onChange: functionType(),
|
|
"onUpdate:fileList": functionType(),
|
|
onDrop: functionType(),
|
|
listType: stringType(),
|
|
onPreview: functionType(),
|
|
onDownload: functionType(),
|
|
onReject: functionType(),
|
|
onRemove: functionType(),
|
|
/** @deprecated Please use `onRemove` directly */
|
|
remove: functionType(),
|
|
supportServerRender: booleanType(),
|
|
disabled: booleanType(),
|
|
prefixCls: String,
|
|
customRequest: functionType(),
|
|
withCredentials: booleanType(),
|
|
openFileDialogOnClick: booleanType(),
|
|
locale: objectType(),
|
|
id: String,
|
|
previewFile: functionType(),
|
|
/** @deprecated Please use `beforeUpload` directly */
|
|
transformFile: functionType(),
|
|
iconRender: functionType(),
|
|
isImageUrl: functionType(),
|
|
progress: objectType(),
|
|
itemRender: functionType(),
|
|
/** Config max count of `fileList`. Will replace current one when `maxCount` is 1 */
|
|
maxCount: Number,
|
|
height: someType([Number, String]),
|
|
removeIcon: functionType(),
|
|
downloadIcon: functionType(),
|
|
previewIcon: functionType()
|
|
};
|
|
}
|
|
function uploadListProps() {
|
|
return {
|
|
listType: stringType(),
|
|
onPreview: functionType(),
|
|
onDownload: functionType(),
|
|
onRemove: functionType(),
|
|
items: arrayType(),
|
|
progress: objectType(),
|
|
prefixCls: stringType(),
|
|
showRemoveIcon: booleanType(),
|
|
showDownloadIcon: booleanType(),
|
|
showPreviewIcon: booleanType(),
|
|
removeIcon: functionType(),
|
|
downloadIcon: functionType(),
|
|
previewIcon: functionType(),
|
|
locale: objectType(void 0),
|
|
previewFile: functionType(),
|
|
iconRender: functionType(),
|
|
isImageUrl: functionType(),
|
|
appendAction: functionType(),
|
|
appendActionVisible: booleanType(),
|
|
itemRender: functionType()
|
|
};
|
|
}
|
|
function file2Obj(file) {
|
|
return _extends(_extends({}, file), {
|
|
lastModified: file.lastModified,
|
|
lastModifiedDate: file.lastModifiedDate,
|
|
name: file.name,
|
|
size: file.size,
|
|
type: file.type,
|
|
uid: file.uid,
|
|
percent: 0,
|
|
originFileObj: file
|
|
});
|
|
}
|
|
function updateFileList(file, fileList) {
|
|
const nextFileList = [...fileList];
|
|
const fileIndex = nextFileList.findIndex((_ref) => {
|
|
let {
|
|
uid: uid2
|
|
} = _ref;
|
|
return uid2 === file.uid;
|
|
});
|
|
if (fileIndex === -1) {
|
|
nextFileList.push(file);
|
|
} else {
|
|
nextFileList[fileIndex] = file;
|
|
}
|
|
return nextFileList;
|
|
}
|
|
function getFileItem(file, fileList) {
|
|
const matchKey = file.uid !== void 0 ? "uid" : "name";
|
|
return fileList.filter((item) => item[matchKey] === file[matchKey])[0];
|
|
}
|
|
function removeFileItem(file, fileList) {
|
|
const matchKey = file.uid !== void 0 ? "uid" : "name";
|
|
const removed = fileList.filter((item) => item[matchKey] !== file[matchKey]);
|
|
if (removed.length === fileList.length) {
|
|
return null;
|
|
}
|
|
return removed;
|
|
}
|
|
const extname = function() {
|
|
let url = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
|
|
const temp = url.split("/");
|
|
const filename = temp[temp.length - 1];
|
|
const filenameWithoutSuffix = filename.split(/#|\?/)[0];
|
|
return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [""])[0];
|
|
};
|
|
const isImageFileType = (type) => type.indexOf("image/") === 0;
|
|
const isImageUrl = (file) => {
|
|
if (file.type && !file.thumbUrl) {
|
|
return isImageFileType(file.type);
|
|
}
|
|
const url = file.thumbUrl || file.url || "";
|
|
const extension = extname(url);
|
|
if (/^data:image\//.test(url) || /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i.test(extension)) {
|
|
return true;
|
|
}
|
|
if (/^data:/.test(url)) {
|
|
return false;
|
|
}
|
|
if (extension) {
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
const MEASURE_SIZE = 200;
|
|
function previewImage(file) {
|
|
return new Promise((resolve) => {
|
|
if (!file.type || !isImageFileType(file.type)) {
|
|
resolve("");
|
|
return;
|
|
}
|
|
const canvas = (void 0).createElement("canvas");
|
|
canvas.width = MEASURE_SIZE;
|
|
canvas.height = MEASURE_SIZE;
|
|
canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE}px; height: ${MEASURE_SIZE}px; z-index: 9999; display: none;`;
|
|
(void 0).body.appendChild(canvas);
|
|
const ctx = canvas.getContext("2d");
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
const {
|
|
width,
|
|
height
|
|
} = img;
|
|
let drawWidth = MEASURE_SIZE;
|
|
let drawHeight = MEASURE_SIZE;
|
|
let offsetX = 0;
|
|
let offsetY = 0;
|
|
if (width > height) {
|
|
drawHeight = height * (MEASURE_SIZE / width);
|
|
offsetY = -(drawHeight - drawWidth) / 2;
|
|
} else {
|
|
drawWidth = width * (MEASURE_SIZE / height);
|
|
offsetX = -(drawWidth - drawHeight) / 2;
|
|
}
|
|
ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
|
|
const dataURL = canvas.toDataURL();
|
|
(void 0).body.removeChild(canvas);
|
|
resolve(dataURL);
|
|
};
|
|
img.crossOrigin = "anonymous";
|
|
if (file.type.startsWith("image/svg+xml")) {
|
|
const reader = new FileReader();
|
|
reader.addEventListener("load", () => {
|
|
if (reader.result) img.src = reader.result;
|
|
});
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
img.src = (void 0).URL.createObjectURL(file);
|
|
}
|
|
});
|
|
}
|
|
const listItemProps = () => {
|
|
return {
|
|
prefixCls: String,
|
|
locale: objectType(void 0),
|
|
file: objectType(),
|
|
items: arrayType(),
|
|
listType: stringType(),
|
|
isImgUrl: functionType(),
|
|
showRemoveIcon: booleanType(),
|
|
showDownloadIcon: booleanType(),
|
|
showPreviewIcon: booleanType(),
|
|
removeIcon: functionType(),
|
|
downloadIcon: functionType(),
|
|
previewIcon: functionType(),
|
|
iconRender: functionType(),
|
|
actionIconRender: functionType(),
|
|
itemRender: functionType(),
|
|
onPreview: functionType(),
|
|
onClose: functionType(),
|
|
onDownload: functionType(),
|
|
progress: objectType()
|
|
};
|
|
};
|
|
const ListItem = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "ListItem",
|
|
inheritAttrs: false,
|
|
props: listItemProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs
|
|
} = _ref;
|
|
var _a;
|
|
const showProgress = shallowRef(false);
|
|
shallowRef();
|
|
const mergedStatus = shallowRef((_a = props.file) === null || _a === void 0 ? void 0 : _a.status);
|
|
watch(() => {
|
|
var _a2;
|
|
return (_a2 = props.file) === null || _a2 === void 0 ? void 0 : _a2.status;
|
|
}, (status) => {
|
|
if (status !== "removed") {
|
|
mergedStatus.value = status;
|
|
}
|
|
});
|
|
const {
|
|
rootPrefixCls
|
|
} = useConfigInject("upload", props);
|
|
const transitionProps = computed(() => getTransitionProps(`${rootPrefixCls.value}-fade`));
|
|
return () => {
|
|
var _a2, _b;
|
|
const {
|
|
prefixCls,
|
|
locale,
|
|
listType,
|
|
file,
|
|
items,
|
|
progress: progressProps,
|
|
iconRender = slots.iconRender,
|
|
actionIconRender = slots.actionIconRender,
|
|
itemRender = slots.itemRender,
|
|
isImgUrl,
|
|
showPreviewIcon,
|
|
showRemoveIcon,
|
|
showDownloadIcon,
|
|
previewIcon: customPreviewIcon = slots.previewIcon,
|
|
removeIcon: customRemoveIcon = slots.removeIcon,
|
|
downloadIcon: customDownloadIcon = slots.downloadIcon,
|
|
onPreview,
|
|
onDownload,
|
|
onClose
|
|
} = props;
|
|
const {
|
|
class: className,
|
|
style
|
|
} = attrs;
|
|
const iconNode = iconRender({
|
|
file
|
|
});
|
|
let icon = createVNode("div", {
|
|
"class": `${prefixCls}-text-icon`
|
|
}, [iconNode]);
|
|
if (listType === "picture" || listType === "picture-card") {
|
|
if (mergedStatus.value === "uploading" || !file.thumbUrl && !file.url) {
|
|
const uploadingClassName = {
|
|
[`${prefixCls}-list-item-thumbnail`]: true,
|
|
[`${prefixCls}-list-item-file`]: mergedStatus.value !== "uploading"
|
|
};
|
|
icon = createVNode("div", {
|
|
"class": uploadingClassName
|
|
}, [iconNode]);
|
|
} else {
|
|
const thumbnail = (isImgUrl === null || isImgUrl === void 0 ? void 0 : isImgUrl(file)) ? createVNode("img", {
|
|
"src": file.thumbUrl || file.url,
|
|
"alt": file.name,
|
|
"class": `${prefixCls}-list-item-image`,
|
|
"crossorigin": file.crossOrigin
|
|
}, null) : iconNode;
|
|
const aClassName = {
|
|
[`${prefixCls}-list-item-thumbnail`]: true,
|
|
[`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file)
|
|
};
|
|
icon = createVNode("a", {
|
|
"class": aClassName,
|
|
"onClick": (e) => onPreview(file, e),
|
|
"href": file.url || file.thumbUrl,
|
|
"target": "_blank",
|
|
"rel": "noopener noreferrer"
|
|
}, [thumbnail]);
|
|
}
|
|
}
|
|
const infoUploadingClass = {
|
|
[`${prefixCls}-list-item`]: true,
|
|
[`${prefixCls}-list-item-${mergedStatus.value}`]: true
|
|
};
|
|
const linkProps = typeof file.linkProps === "string" ? JSON.parse(file.linkProps) : file.linkProps;
|
|
const removeIcon = showRemoveIcon ? actionIconRender({
|
|
customIcon: customRemoveIcon ? customRemoveIcon({
|
|
file
|
|
}) : createVNode(DeleteOutlined, null, null),
|
|
callback: () => onClose(file),
|
|
prefixCls,
|
|
title: locale.removeFile
|
|
}) : null;
|
|
const downloadIcon = showDownloadIcon && mergedStatus.value === "done" ? actionIconRender({
|
|
customIcon: customDownloadIcon ? customDownloadIcon({
|
|
file
|
|
}) : createVNode(DownloadOutlined, null, null),
|
|
callback: () => onDownload(file),
|
|
prefixCls,
|
|
title: locale.downloadFile
|
|
}) : null;
|
|
const downloadOrDelete = listType !== "picture-card" && createVNode("span", {
|
|
"key": "download-delete",
|
|
"class": [`${prefixCls}-list-item-actions`, {
|
|
picture: listType === "picture"
|
|
}]
|
|
}, [downloadIcon, removeIcon]);
|
|
const listItemNameClass = `${prefixCls}-list-item-name`;
|
|
const fileName = file.url ? [createVNode("a", _objectSpread$5(_objectSpread$5({
|
|
"key": "view",
|
|
"target": "_blank",
|
|
"rel": "noopener noreferrer",
|
|
"class": listItemNameClass,
|
|
"title": file.name
|
|
}, linkProps), {}, {
|
|
"href": file.url,
|
|
"onClick": (e) => onPreview(file, e)
|
|
}), [file.name]), downloadOrDelete] : [createVNode("span", {
|
|
"key": "view",
|
|
"class": listItemNameClass,
|
|
"onClick": (e) => onPreview(file, e),
|
|
"title": file.name
|
|
}, [file.name]), downloadOrDelete];
|
|
const previewStyle = {
|
|
pointerEvents: "none",
|
|
opacity: 0.5
|
|
};
|
|
const previewIcon = showPreviewIcon ? createVNode("a", {
|
|
"href": file.url || file.thumbUrl,
|
|
"target": "_blank",
|
|
"rel": "noopener noreferrer",
|
|
"style": file.url || file.thumbUrl ? void 0 : previewStyle,
|
|
"onClick": (e) => onPreview(file, e),
|
|
"title": locale.previewFile
|
|
}, [customPreviewIcon ? customPreviewIcon({
|
|
file
|
|
}) : createVNode(EyeOutlined, null, null)]) : null;
|
|
const pictureCardActions = listType === "picture-card" && mergedStatus.value !== "uploading" && createVNode("span", {
|
|
"class": `${prefixCls}-list-item-actions`
|
|
}, [previewIcon, mergedStatus.value === "done" && downloadIcon, removeIcon]);
|
|
const dom = createVNode("div", {
|
|
"class": infoUploadingClass
|
|
}, [icon, fileName, pictureCardActions, showProgress.value && createVNode(Transition, transitionProps.value, {
|
|
default: () => [withDirectives(createVNode("div", {
|
|
"class": `${prefixCls}-list-item-progress`
|
|
}, ["percent" in file ? createVNode(__nuxt_component_2, _objectSpread$5(_objectSpread$5({}, progressProps), {}, {
|
|
"type": "line",
|
|
"percent": file.percent
|
|
}), null) : null]), [[vShow, mergedStatus.value === "uploading"]])]
|
|
})]);
|
|
const listContainerNameClass = {
|
|
[`${prefixCls}-list-item-container`]: true,
|
|
[`${className}`]: !!className
|
|
};
|
|
const message = file.response && typeof file.response === "string" ? file.response : ((_a2 = file.error) === null || _a2 === void 0 ? void 0 : _a2.statusText) || ((_b = file.error) === null || _b === void 0 ? void 0 : _b.message) || locale.uploadError;
|
|
const item = mergedStatus.value === "error" ? createVNode(__nuxt_component_2$1, {
|
|
"title": message,
|
|
"getPopupContainer": (node) => node.parentNode
|
|
}, {
|
|
default: () => [dom]
|
|
}) : dom;
|
|
return createVNode("div", {
|
|
"class": listContainerNameClass,
|
|
"style": style
|
|
}, [itemRender ? itemRender({
|
|
originNode: item,
|
|
file,
|
|
fileList: items,
|
|
actions: {
|
|
download: onDownload.bind(null, file),
|
|
preview: onPreview.bind(null, file),
|
|
remove: onClose.bind(null, file)
|
|
}
|
|
}) : item]);
|
|
};
|
|
}
|
|
});
|
|
const HackSlot = (_, _ref) => {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
var _a;
|
|
return filterEmpty((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots))[0];
|
|
};
|
|
const UploadList = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "AUploadList",
|
|
props: initDefaultProps(uploadListProps(), {
|
|
listType: "text",
|
|
progress: {
|
|
strokeWidth: 2,
|
|
showInfo: false
|
|
},
|
|
showRemoveIcon: true,
|
|
showDownloadIcon: false,
|
|
showPreviewIcon: true,
|
|
previewFile: previewImage,
|
|
isImageUrl,
|
|
items: [],
|
|
appendActionVisible: true
|
|
}),
|
|
setup(props, _ref2) {
|
|
let {
|
|
slots,
|
|
expose
|
|
} = _ref2;
|
|
const motionAppear = shallowRef(false);
|
|
const mergedItems = shallowRef([]);
|
|
watch(() => props.items, function() {
|
|
let val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
|
|
mergedItems.value = val.slice();
|
|
}, {
|
|
immediate: true,
|
|
deep: true
|
|
});
|
|
watchEffect(() => {
|
|
if (props.listType !== "picture" && props.listType !== "picture-card") {
|
|
return;
|
|
}
|
|
(props.items || []).forEach((file, index2) => {
|
|
{
|
|
return;
|
|
}
|
|
});
|
|
});
|
|
const onInternalPreview = (file, e) => {
|
|
if (!props.onPreview) {
|
|
return;
|
|
}
|
|
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
return props.onPreview(file);
|
|
};
|
|
const onInternalDownload = (file) => {
|
|
if (typeof props.onDownload === "function") {
|
|
props.onDownload(file);
|
|
} else if (file.url) {
|
|
(void 0).open(file.url);
|
|
}
|
|
};
|
|
const onInternalClose = (file) => {
|
|
var _a;
|
|
(_a = props.onRemove) === null || _a === void 0 ? void 0 : _a.call(props, file);
|
|
};
|
|
const internalIconRender = (_ref3) => {
|
|
let {
|
|
file
|
|
} = _ref3;
|
|
const iconRender = props.iconRender || slots.iconRender;
|
|
if (iconRender) {
|
|
return iconRender({
|
|
file,
|
|
listType: props.listType
|
|
});
|
|
}
|
|
const isLoading = file.status === "uploading";
|
|
const fileIcon = props.isImageUrl && props.isImageUrl(file) ? createVNode(PictureTwoTone, null, null) : createVNode(FileTwoTone, null, null);
|
|
let icon = isLoading ? createVNode(LoadingOutlined$1, null, null) : createVNode(PaperClipOutlined, null, null);
|
|
if (props.listType === "picture") {
|
|
icon = isLoading ? createVNode(LoadingOutlined$1, null, null) : fileIcon;
|
|
} else if (props.listType === "picture-card") {
|
|
icon = isLoading ? props.locale.uploading : fileIcon;
|
|
}
|
|
return icon;
|
|
};
|
|
const actionIconRender = (opt) => {
|
|
const {
|
|
customIcon,
|
|
callback,
|
|
prefixCls: prefixCls2,
|
|
title
|
|
} = opt;
|
|
const btnProps = {
|
|
type: "text",
|
|
size: "small",
|
|
title,
|
|
onClick: () => {
|
|
callback();
|
|
},
|
|
class: `${prefixCls2}-list-item-action`
|
|
};
|
|
if (isValidElement(customIcon)) {
|
|
return createVNode(Button, btnProps, {
|
|
icon: () => customIcon
|
|
});
|
|
}
|
|
return createVNode(Button, btnProps, {
|
|
default: () => [createVNode("span", null, [customIcon])]
|
|
});
|
|
};
|
|
expose({
|
|
handlePreview: onInternalPreview,
|
|
handleDownload: onInternalDownload
|
|
});
|
|
const {
|
|
prefixCls,
|
|
rootPrefixCls
|
|
} = useConfigInject("upload", props);
|
|
const listClassNames = computed(() => ({
|
|
[`${prefixCls.value}-list`]: true,
|
|
[`${prefixCls.value}-list-${props.listType}`]: true
|
|
}));
|
|
const transitionGroupProps = computed(() => {
|
|
const motion = _extends({}, collapseMotion(`${rootPrefixCls.value}-motion-collapse`));
|
|
delete motion.onAfterAppear;
|
|
delete motion.onAfterEnter;
|
|
delete motion.onAfterLeave;
|
|
const motionConfig = _extends(_extends({}, getTransitionGroupProps(`${prefixCls.value}-${props.listType === "picture-card" ? "animate-inline" : "animate"}`)), {
|
|
class: listClassNames.value,
|
|
appear: motionAppear.value
|
|
});
|
|
return props.listType !== "picture-card" ? _extends(_extends({}, motion), motionConfig) : motionConfig;
|
|
});
|
|
return () => {
|
|
const {
|
|
listType,
|
|
locale,
|
|
isImageUrl: isImgUrl,
|
|
showPreviewIcon,
|
|
showRemoveIcon,
|
|
showDownloadIcon,
|
|
removeIcon,
|
|
previewIcon,
|
|
downloadIcon,
|
|
progress,
|
|
appendAction,
|
|
itemRender,
|
|
appendActionVisible
|
|
} = props;
|
|
const appendActionDom = appendAction === null || appendAction === void 0 ? void 0 : appendAction();
|
|
const items = mergedItems.value;
|
|
return createVNode(TransitionGroup, _objectSpread$5(_objectSpread$5({}, transitionGroupProps.value), {}, {
|
|
"tag": "div"
|
|
}), {
|
|
default: () => [items.map((file) => {
|
|
const {
|
|
uid: key
|
|
} = file;
|
|
return createVNode(ListItem, {
|
|
"key": key,
|
|
"locale": locale,
|
|
"prefixCls": prefixCls.value,
|
|
"file": file,
|
|
"items": items,
|
|
"progress": progress,
|
|
"listType": listType,
|
|
"isImgUrl": isImgUrl,
|
|
"showPreviewIcon": showPreviewIcon,
|
|
"showRemoveIcon": showRemoveIcon,
|
|
"showDownloadIcon": showDownloadIcon,
|
|
"onPreview": onInternalPreview,
|
|
"onDownload": onInternalDownload,
|
|
"onClose": onInternalClose,
|
|
"removeIcon": removeIcon,
|
|
"previewIcon": previewIcon,
|
|
"downloadIcon": downloadIcon,
|
|
"itemRender": itemRender
|
|
}, _extends(_extends({}, slots), {
|
|
iconRender: internalIconRender,
|
|
actionIconRender
|
|
}));
|
|
}), appendAction ? withDirectives(createVNode(HackSlot, {
|
|
"key": "__ant_upload_appendAction"
|
|
}, {
|
|
default: () => appendActionDom
|
|
}), [[vShow, !!appendActionVisible]]) : null]
|
|
});
|
|
};
|
|
}
|
|
});
|
|
const genDraggerStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
iconCls
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-wrapper`]: {
|
|
[`${componentCls}-drag`]: {
|
|
position: "relative",
|
|
width: "100%",
|
|
height: "100%",
|
|
textAlign: "center",
|
|
background: token.colorFillAlter,
|
|
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
|
|
borderRadius: token.borderRadiusLG,
|
|
cursor: "pointer",
|
|
transition: `border-color ${token.motionDurationSlow}`,
|
|
[componentCls]: {
|
|
padding: `${token.padding}px 0`
|
|
},
|
|
[`${componentCls}-btn`]: {
|
|
display: "table",
|
|
width: "100%",
|
|
height: "100%",
|
|
outline: "none"
|
|
},
|
|
[`${componentCls}-drag-container`]: {
|
|
display: "table-cell",
|
|
verticalAlign: "middle"
|
|
},
|
|
[`&:not(${componentCls}-disabled):hover`]: {
|
|
borderColor: token.colorPrimaryHover
|
|
},
|
|
[`p${componentCls}-drag-icon`]: {
|
|
marginBottom: token.margin,
|
|
[iconCls]: {
|
|
color: token.colorPrimary,
|
|
fontSize: token.uploadThumbnailSize
|
|
}
|
|
},
|
|
[`p${componentCls}-text`]: {
|
|
margin: `0 0 ${token.marginXXS}px`,
|
|
color: token.colorTextHeading,
|
|
fontSize: token.fontSizeLG
|
|
},
|
|
[`p${componentCls}-hint`]: {
|
|
color: token.colorTextDescription,
|
|
fontSize: token.fontSize
|
|
},
|
|
// ===================== Disabled =====================
|
|
[`&${componentCls}-disabled`]: {
|
|
cursor: "not-allowed",
|
|
[`p${componentCls}-drag-icon ${iconCls},
|
|
p${componentCls}-text,
|
|
p${componentCls}-hint
|
|
`]: {
|
|
color: token.colorTextDisabled
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genListStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
antCls,
|
|
iconCls,
|
|
fontSize,
|
|
lineHeight
|
|
} = token;
|
|
const itemCls = `${componentCls}-list-item`;
|
|
const actionsCls = `${itemCls}-actions`;
|
|
const actionCls = `${itemCls}-action`;
|
|
const listItemHeightSM = Math.round(fontSize * lineHeight);
|
|
return {
|
|
[`${componentCls}-wrapper`]: {
|
|
[`${componentCls}-list`]: _extends(_extends({}, clearFix()), {
|
|
lineHeight: token.lineHeight,
|
|
[itemCls]: {
|
|
position: "relative",
|
|
height: token.lineHeight * fontSize,
|
|
marginTop: token.marginXS,
|
|
fontSize,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
transition: `background-color ${token.motionDurationSlow}`,
|
|
"&:hover": {
|
|
backgroundColor: token.controlItemBgHover
|
|
},
|
|
[`${itemCls}-name`]: _extends(_extends({}, textEllipsis), {
|
|
padding: `0 ${token.paddingXS}px`,
|
|
lineHeight,
|
|
flex: "auto",
|
|
transition: `all ${token.motionDurationSlow}`
|
|
}),
|
|
[actionsCls]: {
|
|
[actionCls]: {
|
|
opacity: 0
|
|
},
|
|
[`${actionCls}${antCls}-btn-sm`]: {
|
|
height: listItemHeightSM,
|
|
border: 0,
|
|
lineHeight: 1,
|
|
// FIXME: should not override small button
|
|
"> span": {
|
|
transform: "scale(1)"
|
|
}
|
|
},
|
|
[`
|
|
${actionCls}:focus,
|
|
&.picture ${actionCls}
|
|
`]: {
|
|
opacity: 1
|
|
},
|
|
[iconCls]: {
|
|
color: token.colorTextDescription,
|
|
transition: `all ${token.motionDurationSlow}`
|
|
},
|
|
[`&:hover ${iconCls}`]: {
|
|
color: token.colorText
|
|
}
|
|
},
|
|
[`${componentCls}-icon ${iconCls}`]: {
|
|
color: token.colorTextDescription,
|
|
fontSize
|
|
},
|
|
[`${itemCls}-progress`]: {
|
|
position: "absolute",
|
|
bottom: -token.uploadProgressOffset,
|
|
width: "100%",
|
|
paddingInlineStart: fontSize + token.paddingXS,
|
|
fontSize,
|
|
lineHeight: 0,
|
|
pointerEvents: "none",
|
|
"> div": {
|
|
margin: 0
|
|
}
|
|
}
|
|
},
|
|
[`${itemCls}:hover ${actionCls}`]: {
|
|
opacity: 1,
|
|
color: token.colorText
|
|
},
|
|
[`${itemCls}-error`]: {
|
|
color: token.colorError,
|
|
[`${itemCls}-name, ${componentCls}-icon ${iconCls}`]: {
|
|
color: token.colorError
|
|
},
|
|
[actionsCls]: {
|
|
[`${iconCls}, ${iconCls}:hover`]: {
|
|
color: token.colorError
|
|
},
|
|
[actionCls]: {
|
|
opacity: 1
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-list-item-container`]: {
|
|
transition: `opacity ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
|
|
// For smooth removing animation
|
|
"&::before": {
|
|
display: "table",
|
|
width: 0,
|
|
height: 0,
|
|
content: '""'
|
|
}
|
|
}
|
|
})
|
|
}
|
|
};
|
|
};
|
|
const uploadAnimateInlineIn = new Keyframe("uploadAnimateInlineIn", {
|
|
from: {
|
|
width: 0,
|
|
height: 0,
|
|
margin: 0,
|
|
padding: 0,
|
|
opacity: 0
|
|
}
|
|
});
|
|
const uploadAnimateInlineOut = new Keyframe("uploadAnimateInlineOut", {
|
|
to: {
|
|
width: 0,
|
|
height: 0,
|
|
margin: 0,
|
|
padding: 0,
|
|
opacity: 0
|
|
}
|
|
});
|
|
const genMotionStyle = (token) => {
|
|
const {
|
|
componentCls
|
|
} = token;
|
|
const inlineCls = `${componentCls}-animate-inline`;
|
|
return [{
|
|
[`${componentCls}-wrapper`]: {
|
|
[`${inlineCls}-appear, ${inlineCls}-enter, ${inlineCls}-leave`]: {
|
|
animationDuration: token.motionDurationSlow,
|
|
animationTimingFunction: token.motionEaseInOutCirc,
|
|
animationFillMode: "forwards"
|
|
},
|
|
[`${inlineCls}-appear, ${inlineCls}-enter`]: {
|
|
animationName: uploadAnimateInlineIn
|
|
},
|
|
[`${inlineCls}-leave`]: {
|
|
animationName: uploadAnimateInlineOut
|
|
}
|
|
}
|
|
}, uploadAnimateInlineIn, uploadAnimateInlineOut];
|
|
};
|
|
const genPictureStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
iconCls,
|
|
uploadThumbnailSize,
|
|
uploadProgressOffset
|
|
} = token;
|
|
const listCls = `${componentCls}-list`;
|
|
const itemCls = `${listCls}-item`;
|
|
return {
|
|
[`${componentCls}-wrapper`]: {
|
|
// ${listCls} 增加优先级
|
|
[`${listCls}${listCls}-picture, ${listCls}${listCls}-picture-card`]: {
|
|
[itemCls]: {
|
|
position: "relative",
|
|
height: uploadThumbnailSize + token.lineWidth * 2 + token.paddingXS * 2,
|
|
padding: token.paddingXS,
|
|
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
|
borderRadius: token.borderRadiusLG,
|
|
"&:hover": {
|
|
background: "transparent"
|
|
},
|
|
[`${itemCls}-thumbnail`]: _extends(_extends({}, textEllipsis), {
|
|
width: uploadThumbnailSize,
|
|
height: uploadThumbnailSize,
|
|
lineHeight: `${uploadThumbnailSize + token.paddingSM}px`,
|
|
textAlign: "center",
|
|
flex: "none",
|
|
[iconCls]: {
|
|
fontSize: token.fontSizeHeading2,
|
|
color: token.colorPrimary
|
|
},
|
|
img: {
|
|
display: "block",
|
|
width: "100%",
|
|
height: "100%",
|
|
overflow: "hidden"
|
|
}
|
|
}),
|
|
[`${itemCls}-progress`]: {
|
|
bottom: uploadProgressOffset,
|
|
width: `calc(100% - ${token.paddingSM * 2}px)`,
|
|
marginTop: 0,
|
|
paddingInlineStart: uploadThumbnailSize + token.paddingXS
|
|
}
|
|
},
|
|
[`${itemCls}-error`]: {
|
|
borderColor: token.colorError,
|
|
// Adjust the color of the error icon : https://github.com/ant-design/ant-design/pull/24160
|
|
[`${itemCls}-thumbnail ${iconCls}`]: {
|
|
[`svg path[fill='#e6f7ff']`]: {
|
|
fill: token.colorErrorBg
|
|
},
|
|
[`svg path[fill='#1890ff']`]: {
|
|
fill: token.colorError
|
|
}
|
|
}
|
|
},
|
|
[`${itemCls}-uploading`]: {
|
|
borderStyle: "dashed",
|
|
[`${itemCls}-name`]: {
|
|
marginBottom: uploadProgressOffset
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genPictureCardStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
iconCls,
|
|
fontSizeLG,
|
|
colorTextLightSolid
|
|
} = token;
|
|
const listCls = `${componentCls}-list`;
|
|
const itemCls = `${listCls}-item`;
|
|
const uploadPictureCardSize = token.uploadPicCardSize;
|
|
return {
|
|
[`${componentCls}-wrapper${componentCls}-picture-card-wrapper`]: _extends(_extends({}, clearFix()), {
|
|
display: "inline-block",
|
|
width: "100%",
|
|
[`${componentCls}${componentCls}-select`]: {
|
|
width: uploadPictureCardSize,
|
|
height: uploadPictureCardSize,
|
|
marginInlineEnd: token.marginXS,
|
|
marginBottom: token.marginXS,
|
|
textAlign: "center",
|
|
verticalAlign: "top",
|
|
backgroundColor: token.colorFillAlter,
|
|
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
|
|
borderRadius: token.borderRadiusLG,
|
|
cursor: "pointer",
|
|
transition: `border-color ${token.motionDurationSlow}`,
|
|
[`> ${componentCls}`]: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
height: "100%",
|
|
textAlign: "center"
|
|
},
|
|
[`&:not(${componentCls}-disabled):hover`]: {
|
|
borderColor: token.colorPrimary
|
|
}
|
|
},
|
|
// list
|
|
[`${listCls}${listCls}-picture-card`]: {
|
|
[`${listCls}-item-container`]: {
|
|
display: "inline-block",
|
|
width: uploadPictureCardSize,
|
|
height: uploadPictureCardSize,
|
|
marginBlock: `0 ${token.marginXS}px`,
|
|
marginInline: `0 ${token.marginXS}px`,
|
|
verticalAlign: "top"
|
|
},
|
|
"&::after": {
|
|
display: "none"
|
|
},
|
|
[itemCls]: {
|
|
height: "100%",
|
|
margin: 0,
|
|
"&::before": {
|
|
position: "absolute",
|
|
zIndex: 1,
|
|
width: `calc(100% - ${token.paddingXS * 2}px)`,
|
|
height: `calc(100% - ${token.paddingXS * 2}px)`,
|
|
backgroundColor: token.colorBgMask,
|
|
opacity: 0,
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
content: '" "'
|
|
}
|
|
},
|
|
[`${itemCls}:hover`]: {
|
|
[`&::before, ${itemCls}-actions`]: {
|
|
opacity: 1
|
|
}
|
|
},
|
|
[`${itemCls}-actions`]: {
|
|
position: "absolute",
|
|
insetInlineStart: 0,
|
|
zIndex: 10,
|
|
width: "100%",
|
|
whiteSpace: "nowrap",
|
|
textAlign: "center",
|
|
opacity: 0,
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
[`${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
|
|
zIndex: 10,
|
|
width: fontSizeLG,
|
|
margin: `0 ${token.marginXXS}px`,
|
|
fontSize: fontSizeLG,
|
|
cursor: "pointer",
|
|
transition: `all ${token.motionDurationSlow}`
|
|
}
|
|
},
|
|
[`${itemCls}-actions, ${itemCls}-actions:hover`]: {
|
|
[`${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
|
|
color: new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
|
|
"&:hover": {
|
|
color: colorTextLightSolid
|
|
}
|
|
}
|
|
},
|
|
[`${itemCls}-thumbnail, ${itemCls}-thumbnail img`]: {
|
|
position: "static",
|
|
display: "block",
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain"
|
|
},
|
|
[`${itemCls}-name`]: {
|
|
display: "none",
|
|
textAlign: "center"
|
|
},
|
|
[`${itemCls}-file + ${itemCls}-name`]: {
|
|
position: "absolute",
|
|
bottom: token.margin,
|
|
display: "block",
|
|
width: `calc(100% - ${token.paddingXS * 2}px)`
|
|
},
|
|
[`${itemCls}-uploading`]: {
|
|
[`&${itemCls}`]: {
|
|
backgroundColor: token.colorFillAlter
|
|
},
|
|
[`&::before, ${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
|
|
display: "none"
|
|
}
|
|
},
|
|
[`${itemCls}-progress`]: {
|
|
bottom: token.marginXL,
|
|
width: `calc(100% - ${token.paddingXS * 2}px)`,
|
|
paddingInlineStart: 0
|
|
}
|
|
}
|
|
})
|
|
};
|
|
};
|
|
const genRtlStyle = (token) => {
|
|
const {
|
|
componentCls
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-rtl`]: {
|
|
direction: "rtl"
|
|
}
|
|
};
|
|
};
|
|
const genBaseStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
colorTextDisabled
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-wrapper`]: _extends(_extends({}, resetComponent(token)), {
|
|
[componentCls]: {
|
|
outline: 0,
|
|
"input[type='file']": {
|
|
cursor: "pointer"
|
|
}
|
|
},
|
|
[`${componentCls}-select`]: {
|
|
display: "inline-block"
|
|
},
|
|
[`${componentCls}-disabled`]: {
|
|
color: colorTextDisabled,
|
|
cursor: "not-allowed"
|
|
}
|
|
})
|
|
};
|
|
};
|
|
const useStyle = genComponentStyleHook("Upload", (token) => {
|
|
const {
|
|
fontSizeHeading3,
|
|
fontSize,
|
|
lineHeight,
|
|
lineWidth,
|
|
controlHeightLG
|
|
} = token;
|
|
const listItemHeightSM = Math.round(fontSize * lineHeight);
|
|
const uploadToken = merge(token, {
|
|
uploadThumbnailSize: fontSizeHeading3 * 2,
|
|
uploadProgressOffset: listItemHeightSM / 2 + lineWidth,
|
|
uploadPicCardSize: controlHeightLG * 2.55
|
|
});
|
|
return [genBaseStyle(uploadToken), genDraggerStyle(uploadToken), genPictureStyle(uploadToken), genPictureCardStyle(uploadToken), genListStyle(uploadToken), genMotionStyle(uploadToken), genRtlStyle(uploadToken), genCollapseMotion(uploadToken)];
|
|
});
|
|
var __awaiter = function(thisArg, _arguments, P, generator) {
|
|
function adopt(value) {
|
|
return value instanceof P ? value : new P(function(resolve) {
|
|
resolve(value);
|
|
});
|
|
}
|
|
return new (P || (P = Promise))(function(resolve, reject) {
|
|
function fulfilled(value) {
|
|
try {
|
|
step(generator.next(value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function rejected(value) {
|
|
try {
|
|
step(generator["throw"](value));
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
}
|
|
function step(result) {
|
|
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
}
|
|
step((generator = generator.apply(thisArg, [])).next());
|
|
});
|
|
};
|
|
var __rest$1 = function(s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
|
|
const Upload = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "AUpload",
|
|
inheritAttrs: false,
|
|
props: initDefaultProps(uploadProps(), {
|
|
type: "select",
|
|
multiple: false,
|
|
action: "",
|
|
data: {},
|
|
accept: "",
|
|
showUploadList: true,
|
|
listType: "text",
|
|
supportServerRender: true
|
|
}),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs,
|
|
expose
|
|
} = _ref;
|
|
const formItemContext = useInjectFormItemContext();
|
|
const {
|
|
prefixCls,
|
|
direction,
|
|
disabled
|
|
} = useConfigInject("upload", props);
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
const disabledContext = useInjectDisabled();
|
|
const mergedDisabled = computed(() => {
|
|
var _a;
|
|
return (_a = disabled.value) !== null && _a !== void 0 ? _a : disabledContext.value;
|
|
});
|
|
const [mergedFileList, setMergedFileList] = useMergedState(props.defaultFileList || [], {
|
|
value: toRef(props, "fileList"),
|
|
postState: (list) => {
|
|
const timestamp = Date.now();
|
|
return (list !== null && list !== void 0 ? list : []).map((file, index2) => {
|
|
if (!file.uid && !Object.isFrozen(file)) {
|
|
file.uid = `__AUTO__${timestamp}_${index2}__`;
|
|
}
|
|
return file;
|
|
});
|
|
}
|
|
});
|
|
const dragState = ref("drop");
|
|
const upload = ref(null);
|
|
const onInternalChange = (file, changedFileList, event) => {
|
|
var _a, _b;
|
|
let cloneList = [...changedFileList];
|
|
if (props.maxCount === 1) {
|
|
cloneList = cloneList.slice(-1);
|
|
} else if (props.maxCount) {
|
|
cloneList = cloneList.slice(0, props.maxCount);
|
|
}
|
|
setMergedFileList(cloneList);
|
|
const changeInfo = {
|
|
file,
|
|
fileList: cloneList
|
|
};
|
|
if (event) {
|
|
changeInfo.event = event;
|
|
}
|
|
(_a = props["onUpdate:fileList"]) === null || _a === void 0 ? void 0 : _a.call(props, changeInfo.fileList);
|
|
(_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, changeInfo);
|
|
formItemContext.onFieldChange();
|
|
};
|
|
const mergedBeforeUpload = (file, fileListArgs) => __awaiter(this, void 0, void 0, function* () {
|
|
const {
|
|
beforeUpload,
|
|
transformFile
|
|
} = props;
|
|
let parsedFile = file;
|
|
if (beforeUpload) {
|
|
const result = yield beforeUpload(file, fileListArgs);
|
|
if (result === false) {
|
|
return false;
|
|
}
|
|
delete file[LIST_IGNORE];
|
|
if (result === LIST_IGNORE) {
|
|
Object.defineProperty(file, LIST_IGNORE, {
|
|
value: true,
|
|
configurable: true
|
|
});
|
|
return false;
|
|
}
|
|
if (typeof result === "object" && result) {
|
|
parsedFile = result;
|
|
}
|
|
}
|
|
if (transformFile) {
|
|
parsedFile = yield transformFile(parsedFile);
|
|
}
|
|
return parsedFile;
|
|
});
|
|
const onBatchStart = (batchFileInfoList) => {
|
|
const filteredFileInfoList = batchFileInfoList.filter((info) => !info.file[LIST_IGNORE]);
|
|
if (!filteredFileInfoList.length) {
|
|
return;
|
|
}
|
|
const objectFileList = filteredFileInfoList.map((info) => file2Obj(info.file));
|
|
let newFileList = [...mergedFileList.value];
|
|
objectFileList.forEach((fileObj) => {
|
|
newFileList = updateFileList(fileObj, newFileList);
|
|
});
|
|
objectFileList.forEach((fileObj, index2) => {
|
|
let triggerFileObj = fileObj;
|
|
if (!filteredFileInfoList[index2].parsedFile) {
|
|
const {
|
|
originFileObj
|
|
} = fileObj;
|
|
let clone;
|
|
try {
|
|
clone = new File([originFileObj], originFileObj.name, {
|
|
type: originFileObj.type
|
|
});
|
|
} catch (e) {
|
|
clone = new Blob([originFileObj], {
|
|
type: originFileObj.type
|
|
});
|
|
clone.name = originFileObj.name;
|
|
clone.lastModifiedDate = /* @__PURE__ */ new Date();
|
|
clone.lastModified = (/* @__PURE__ */ new Date()).getTime();
|
|
}
|
|
clone.uid = fileObj.uid;
|
|
triggerFileObj = clone;
|
|
} else {
|
|
fileObj.status = "uploading";
|
|
}
|
|
onInternalChange(triggerFileObj, newFileList);
|
|
});
|
|
};
|
|
const onSuccess = (response, file, xhr) => {
|
|
try {
|
|
if (typeof response === "string") {
|
|
response = JSON.parse(response);
|
|
}
|
|
} catch (e) {
|
|
}
|
|
if (!getFileItem(file, mergedFileList.value)) {
|
|
return;
|
|
}
|
|
const targetItem = file2Obj(file);
|
|
targetItem.status = "done";
|
|
targetItem.percent = 100;
|
|
targetItem.response = response;
|
|
targetItem.xhr = xhr;
|
|
const nextFileList = updateFileList(targetItem, mergedFileList.value);
|
|
onInternalChange(targetItem, nextFileList);
|
|
};
|
|
const onProgress = (e, file) => {
|
|
if (!getFileItem(file, mergedFileList.value)) {
|
|
return;
|
|
}
|
|
const targetItem = file2Obj(file);
|
|
targetItem.status = "uploading";
|
|
targetItem.percent = e.percent;
|
|
const nextFileList = updateFileList(targetItem, mergedFileList.value);
|
|
onInternalChange(targetItem, nextFileList, e);
|
|
};
|
|
const onError = (error, response, file) => {
|
|
if (!getFileItem(file, mergedFileList.value)) {
|
|
return;
|
|
}
|
|
const targetItem = file2Obj(file);
|
|
targetItem.error = error;
|
|
targetItem.response = response;
|
|
targetItem.status = "error";
|
|
const nextFileList = updateFileList(targetItem, mergedFileList.value);
|
|
onInternalChange(targetItem, nextFileList);
|
|
};
|
|
const handleRemove = (file) => {
|
|
let currentFile;
|
|
const mergedRemove = props.onRemove || props.remove;
|
|
Promise.resolve(typeof mergedRemove === "function" ? mergedRemove(file) : mergedRemove).then((ret) => {
|
|
var _a, _b;
|
|
if (ret === false) {
|
|
return;
|
|
}
|
|
const removedFileList = removeFileItem(file, mergedFileList.value);
|
|
if (removedFileList) {
|
|
currentFile = _extends(_extends({}, file), {
|
|
status: "removed"
|
|
});
|
|
(_a = mergedFileList.value) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
|
|
const matchKey = currentFile.uid !== void 0 ? "uid" : "name";
|
|
if (item[matchKey] === currentFile[matchKey] && !Object.isFrozen(item)) {
|
|
item.status = "removed";
|
|
}
|
|
});
|
|
(_b = upload.value) === null || _b === void 0 ? void 0 : _b.abort(currentFile);
|
|
onInternalChange(currentFile, removedFileList);
|
|
}
|
|
});
|
|
};
|
|
const onFileDrop = (e) => {
|
|
var _a;
|
|
dragState.value = e.type;
|
|
if (e.type === "drop") {
|
|
(_a = props.onDrop) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
}
|
|
};
|
|
expose({
|
|
onBatchStart,
|
|
onSuccess,
|
|
onProgress,
|
|
onError,
|
|
fileList: mergedFileList,
|
|
upload
|
|
});
|
|
const [locale] = useLocaleReceiver("Upload", localeValues.Upload, computed(() => props.locale));
|
|
const renderUploadList = (button, buttonVisible) => {
|
|
const {
|
|
removeIcon,
|
|
previewIcon,
|
|
downloadIcon,
|
|
previewFile,
|
|
onPreview,
|
|
onDownload,
|
|
isImageUrl: isImageUrl2,
|
|
progress,
|
|
itemRender,
|
|
iconRender,
|
|
showUploadList
|
|
} = props;
|
|
const {
|
|
showDownloadIcon,
|
|
showPreviewIcon,
|
|
showRemoveIcon
|
|
} = typeof showUploadList === "boolean" ? {} : showUploadList;
|
|
return showUploadList ? createVNode(UploadList, {
|
|
"prefixCls": prefixCls.value,
|
|
"listType": props.listType,
|
|
"items": mergedFileList.value,
|
|
"previewFile": previewFile,
|
|
"onPreview": onPreview,
|
|
"onDownload": onDownload,
|
|
"onRemove": handleRemove,
|
|
"showRemoveIcon": !mergedDisabled.value && showRemoveIcon,
|
|
"showPreviewIcon": showPreviewIcon,
|
|
"showDownloadIcon": showDownloadIcon,
|
|
"removeIcon": removeIcon,
|
|
"previewIcon": previewIcon,
|
|
"downloadIcon": downloadIcon,
|
|
"iconRender": iconRender,
|
|
"locale": locale.value,
|
|
"isImageUrl": isImageUrl2,
|
|
"progress": progress,
|
|
"itemRender": itemRender,
|
|
"appendActionVisible": buttonVisible,
|
|
"appendAction": button
|
|
}, _extends({}, slots)) : button === null || button === void 0 ? void 0 : button();
|
|
};
|
|
return () => {
|
|
var _a, _b, _c;
|
|
const {
|
|
listType,
|
|
type
|
|
} = props;
|
|
const {
|
|
class: className,
|
|
style: styleName
|
|
} = attrs, transAttrs = __rest$1(attrs, ["class", "style"]);
|
|
const rcUploadProps = _extends(_extends(_extends({
|
|
onBatchStart,
|
|
onError,
|
|
onProgress,
|
|
onSuccess
|
|
}, transAttrs), props), {
|
|
id: (_a = props.id) !== null && _a !== void 0 ? _a : formItemContext.id.value,
|
|
prefixCls: prefixCls.value,
|
|
beforeUpload: mergedBeforeUpload,
|
|
onChange: void 0,
|
|
disabled: mergedDisabled.value
|
|
});
|
|
delete rcUploadProps.remove;
|
|
if (!slots.default || mergedDisabled.value) {
|
|
delete rcUploadProps.id;
|
|
}
|
|
const rtlCls = {
|
|
[`${prefixCls.value}-rtl`]: direction.value === "rtl"
|
|
};
|
|
if (type === "drag") {
|
|
const dragCls = classNames(prefixCls.value, {
|
|
[`${prefixCls.value}-drag`]: true,
|
|
[`${prefixCls.value}-drag-uploading`]: mergedFileList.value.some((file) => file.status === "uploading"),
|
|
[`${prefixCls.value}-drag-hover`]: dragState.value === "dragover",
|
|
[`${prefixCls.value}-disabled`]: mergedDisabled.value,
|
|
[`${prefixCls.value}-rtl`]: direction.value === "rtl"
|
|
}, attrs.class, hashId.value);
|
|
return wrapSSR(createVNode("span", _objectSpread$5(_objectSpread$5({}, attrs), {}, {
|
|
"class": classNames(`${prefixCls.value}-wrapper`, rtlCls, className, hashId.value)
|
|
}), [createVNode("div", {
|
|
"class": dragCls,
|
|
"onDrop": onFileDrop,
|
|
"onDragover": onFileDrop,
|
|
"onDragleave": onFileDrop,
|
|
"style": attrs.style
|
|
}, [createVNode(Upload$1, _objectSpread$5(_objectSpread$5({}, rcUploadProps), {}, {
|
|
"ref": upload,
|
|
"class": `${prefixCls.value}-btn`
|
|
}), _objectSpread$5({
|
|
default: () => [createVNode("div", {
|
|
"class": `${prefixCls.value}-drag-container`
|
|
}, [(_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots)])]
|
|
}, slots))]), renderUploadList()]));
|
|
}
|
|
const uploadButtonCls = classNames(prefixCls.value, {
|
|
[`${prefixCls.value}-select`]: true,
|
|
[`${prefixCls.value}-select-${listType}`]: true,
|
|
[`${prefixCls.value}-disabled`]: mergedDisabled.value,
|
|
[`${prefixCls.value}-rtl`]: direction.value === "rtl"
|
|
});
|
|
const children = flattenChildren((_c = slots.default) === null || _c === void 0 ? void 0 : _c.call(slots));
|
|
const renderUploadButton = (uploadButtonStyle) => createVNode("div", {
|
|
"class": uploadButtonCls,
|
|
"style": uploadButtonStyle
|
|
}, [createVNode(Upload$1, _objectSpread$5(_objectSpread$5({}, rcUploadProps), {}, {
|
|
"ref": upload
|
|
}), slots)]);
|
|
if (listType === "picture-card") {
|
|
return wrapSSR(createVNode("span", _objectSpread$5(_objectSpread$5({}, attrs), {}, {
|
|
"class": classNames(`${prefixCls.value}-wrapper`, `${prefixCls.value}-picture-card-wrapper`, rtlCls, attrs.class, hashId.value)
|
|
}), [renderUploadList(renderUploadButton, !!(children && children.length))]));
|
|
}
|
|
return wrapSSR(createVNode("span", _objectSpread$5(_objectSpread$5({}, attrs), {}, {
|
|
"class": classNames(`${prefixCls.value}-wrapper`, rtlCls, attrs.class, hashId.value)
|
|
}), [renderUploadButton(children && children.length ? void 0 : {
|
|
display: "none"
|
|
}), renderUploadList()]));
|
|
};
|
|
}
|
|
});
|
|
var __rest = function(s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
const Dragger = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "AUploadDragger",
|
|
inheritAttrs: false,
|
|
props: uploadProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs
|
|
} = _ref;
|
|
return () => {
|
|
const {
|
|
height
|
|
} = props, restProps = __rest(props, ["height"]);
|
|
const {
|
|
style
|
|
} = attrs, restAttrs = __rest(attrs, ["style"]);
|
|
const draggerProps = _extends(_extends(_extends({}, restProps), restAttrs), {
|
|
type: "drag",
|
|
style: _extends(_extends({}, style), {
|
|
height: typeof height === "number" ? `${height}px` : height
|
|
})
|
|
});
|
|
return createVNode(Upload, draggerProps, slots);
|
|
};
|
|
}
|
|
});
|
|
const __nuxt_component_0 = _extends(Upload, {
|
|
Dragger,
|
|
LIST_IGNORE,
|
|
install(app) {
|
|
app.component(Upload.name, Upload);
|
|
app.component(Dragger.name, Dragger);
|
|
return app;
|
|
}
|
|
});
|
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
__name: "IndexImageUploader",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
fileList: {},
|
|
bucket: { default: "productimg" }
|
|
},
|
|
emits: ["update:fileList", "ok", "delete"],
|
|
setup(__props, { emit: __emit }) {
|
|
const { prefixCls } = usePrefix("index-image-uploader");
|
|
const previewVisible = ref(false);
|
|
const previewImage2 = ref("");
|
|
const previewTitle = ref("");
|
|
const loading2 = ref(false);
|
|
const props = __props;
|
|
const emits = __emit;
|
|
const fileList = computed({
|
|
get() {
|
|
return props.fileList || [];
|
|
},
|
|
set(value) {
|
|
emits("update:fileList", value);
|
|
}
|
|
});
|
|
const handlePreview = async (file) => {
|
|
previewImage2.value = file.src;
|
|
previewVisible.value = true;
|
|
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf("/") + 1);
|
|
};
|
|
const handleCancel = () => {
|
|
previewVisible.value = false;
|
|
previewTitle.value = "";
|
|
};
|
|
const beforeUpload = (file) => {
|
|
const isLt100k = file.size / 1024 / 1024 < 0.2;
|
|
if (!isLt100k) {
|
|
api$1.error("\u062D\u062F\u0627\u06A9\u062B\u0631 \u062D\u062C\u0645 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC 200 \u06A9\u06CC\u0644\u0648 \u0628\u0627\u06CC\u062A \u0645\u06CC\u0628\u0627\u0634\u062F");
|
|
}
|
|
return isLt100k;
|
|
};
|
|
function handleChange(info) {
|
|
if (info.file.status === "uploading") {
|
|
loading2.value = true;
|
|
return;
|
|
}
|
|
if (info.file.status === "error") {
|
|
loading2.value = false;
|
|
fileList.value = [];
|
|
api$1.error("\u062E\u0637\u0627 \u062F\u0631 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC");
|
|
}
|
|
if (info.file.status === "done") {
|
|
loading2.value = false;
|
|
api$1.success("\u062A\u0635\u0648\u06CC\u0631 \u0634\u0627\u062E\u0635 \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC \u0634\u062F");
|
|
emits("ok", info.file.response.id);
|
|
}
|
|
if (info.file.status === "removed") {
|
|
emits("delete", info.file.uid);
|
|
}
|
|
}
|
|
async function customRequest(options) {
|
|
const { onSuccess, onError, file } = options;
|
|
try {
|
|
const uniqueFileName = `${Date.now()}-${file.name}`;
|
|
const { data, error } = await supabase.storage.from(props.bucket).upload(uniqueFileName, file);
|
|
if (error) {
|
|
throw error;
|
|
}
|
|
onSuccess(data, file);
|
|
const publicUrl = supabase.storage.from(props.bucket).getPublicUrl(uniqueFileName);
|
|
fileList.value = [
|
|
{
|
|
uid: uniqueFileName,
|
|
name: file.name,
|
|
status: "done",
|
|
url: publicUrl.data.publicUrl,
|
|
subUrl: data.fullPath
|
|
}
|
|
];
|
|
} catch (error) {
|
|
console.error("Upload error:", error);
|
|
onError(error);
|
|
}
|
|
}
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_AUpload = __nuxt_component_0;
|
|
const _component_AModal = Modal;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({
|
|
class: [unref(prefixCls)]
|
|
}, _attrs))}><div class="flex items-center justify-center overflow-hidden border border-solid border-blue-600 bg-gray-50 rounded-md p-2">`);
|
|
_push(ssrRenderComponent(_component_AUpload, {
|
|
"file-list": fileList.value,
|
|
"onUpdate:fileList": ($event) => fileList.value = $event,
|
|
name: "file",
|
|
"list-type": "picture-card",
|
|
showUploadList: true,
|
|
multiple: false,
|
|
customRequest,
|
|
"before-upload": beforeUpload,
|
|
onChange: handleChange,
|
|
onPreview: handlePreview
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
if (fileList.value.length === 0) {
|
|
_push2(`<div${_scopeId}>`);
|
|
if (loading2.value) {
|
|
_push2(ssrRenderComponent(unref(LoadingOutlined), null, null, _parent2, _scopeId));
|
|
} else {
|
|
_push2(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:add",
|
|
color: "#6B7280",
|
|
class: "justify-center"
|
|
}, null, _parent2, _scopeId));
|
|
}
|
|
_push2(`<div class="text-gray-500 text-center text-xs font-normal"${_scopeId}>Add Image</div></div>`);
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
} else {
|
|
return [
|
|
fileList.value.length === 0 ? (openBlock(), createBlock("div", { key: 0 }, [
|
|
loading2.value ? (openBlock(), createBlock(unref(LoadingOutlined), { key: 0 })) : (openBlock(), createBlock(BasicIconOld, {
|
|
key: 1,
|
|
icon: "vuesax-linear:add",
|
|
color: "#6B7280",
|
|
class: "justify-center"
|
|
})),
|
|
createVNode("div", { class: "text-gray-500 text-center text-xs font-normal" }, "Add Image")
|
|
])) : createCommentVNode("", true)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(_component_AModal, {
|
|
open: previewVisible.value,
|
|
title: previewTitle.value,
|
|
footer: null,
|
|
onCancel: handleCancel
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<img alt="example" style="${ssrRenderStyle({ "width": "100%" })}"${ssrRenderAttr("src", previewImage2.value)}${_scopeId}>`);
|
|
} else {
|
|
return [
|
|
createVNode("img", {
|
|
alt: "example",
|
|
style: { "width": "100%" },
|
|
src: previewImage2.value
|
|
}, null, 8, ["src"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div></div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$3 = _sfc_main$3.setup;
|
|
_sfc_main$3.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/ProductUploader/IndexImageUploader.vue");
|
|
return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
__name: "BasicSheetUploadImage",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
open: { type: Boolean, default: false },
|
|
image: {}
|
|
},
|
|
emits: ["update:open", "success"],
|
|
setup(__props, { emit: __emit }) {
|
|
const config = useConfigStore();
|
|
const sheetRef = ref(null);
|
|
const brandImage = ref([]);
|
|
const emits = __emit;
|
|
const props = __props;
|
|
async function openSheet() {
|
|
var _a;
|
|
await nextTick();
|
|
await ((_a = sheetRef.value) == null ? void 0 : _a.setOpen());
|
|
}
|
|
async function closeSheet() {
|
|
var _a;
|
|
await nextTick();
|
|
await ((_a = sheetRef.value) == null ? void 0 : _a.setClose());
|
|
emits("update:open", false);
|
|
}
|
|
const inputImage = () => {
|
|
if (props.image) {
|
|
brandImage.value = [];
|
|
brandImage.value.push({
|
|
src: getSupabaseStorageUrl(props.image),
|
|
// name: props.data.image.original_name,
|
|
thumbUrl: getSupabaseStorageUrl(props.image)
|
|
});
|
|
}
|
|
};
|
|
watch(brandImage, () => {
|
|
var _a;
|
|
emits("success", (_a = brandImage.value[0]) == null ? void 0 : _a.subUrl);
|
|
});
|
|
watch(props, (value) => {
|
|
if (value.open) {
|
|
openSheet();
|
|
} else {
|
|
closeSheet();
|
|
}
|
|
inputImage();
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(ssrRenderComponent(BasicSheet, mergeProps({
|
|
title: "",
|
|
ref_key: "sheetRef",
|
|
ref: sheetRef,
|
|
headerCls: "",
|
|
closeOnClickOutside: "",
|
|
onOnClickOutside: ($event) => emits("update:open", false),
|
|
onOnClose: ($event) => emits("update:open", false)
|
|
}, _attrs), {
|
|
header: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div flex justify-center items-center flex-col p-2${_scopeId}><div bg-gray-500 h-2px w-2.5rem${_scopeId}></div><div class="flex justify-center"${_scopeId}><div mt-3 font-semibold${_scopeId}>${ssrInterpolate(unref(config).useString("imageUploader"))}</div><div class="absolute end-0"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_sfc_main$9, {
|
|
class: "w-1rem mt-2 me-5",
|
|
onClick: closeSheet
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div></div></div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", {
|
|
flex: "",
|
|
"justify-center": "",
|
|
"items-center": "",
|
|
"flex-col": "",
|
|
"p-2": ""
|
|
}, [
|
|
createVNode("div", {
|
|
"bg-gray-500": "",
|
|
"h-2px": "",
|
|
"w-2.5rem": ""
|
|
}),
|
|
createVNode("div", { class: "flex justify-center" }, [
|
|
createVNode("div", {
|
|
"mt-3": "",
|
|
"font-semibold": ""
|
|
}, toDisplayString(unref(config).useString("imageUploader")), 1),
|
|
createVNode("div", { class: "absolute end-0" }, [
|
|
createVNode(_sfc_main$9, {
|
|
class: "w-1rem mt-2 me-5",
|
|
onClick: closeSheet
|
|
})
|
|
])
|
|
])
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div class="max-h-85vh overflow-y-auto px-2 mt3 pb-10"${_scopeId}><div class="flex justify-center"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_sfc_main$3, {
|
|
"file-list": brandImage.value,
|
|
"onUpdate:fileList": ($event) => brandImage.value = $event
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div></div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "max-h-85vh overflow-y-auto px-2 mt3 pb-10" }, [
|
|
createVNode("div", { class: "flex justify-center" }, [
|
|
createVNode(_sfc_main$3, {
|
|
"file-list": brandImage.value,
|
|
"onUpdate:fileList": ($event) => brandImage.value = $event
|
|
}, null, 8, ["file-list", "onUpdate:fileList"])
|
|
])
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$2 = _sfc_main$2.setup;
|
|
_sfc_main$2.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/ProductUploader/BasicSheetUploadImage.vue");
|
|
return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "JobSelector",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
open: { type: Boolean },
|
|
id: {}
|
|
},
|
|
emits: ["update:open", "setField"],
|
|
setup(__props, { emit: __emit }) {
|
|
const config = useConfigStore();
|
|
useUserStore();
|
|
const sheetRef = ref(null);
|
|
const storeCollection = ref([]);
|
|
ref();
|
|
const props = __props;
|
|
const emits = __emit;
|
|
const selectedJob = ref();
|
|
function buildTree(items, parentId = null) {
|
|
return items.filter((item) => item.parent_id === parentId).map((item) => ({
|
|
...item,
|
|
children: buildTree(items, item.id)
|
|
}));
|
|
}
|
|
const getCollections = async () => {
|
|
try {
|
|
loading.value = true;
|
|
const res = await getStoreCollections();
|
|
storeCollection.value = buildTree(res);
|
|
} catch (e) {
|
|
console.log("e ===>", e);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
async function openSheet() {
|
|
var _a, _b;
|
|
if (props.id) {
|
|
selectedJob.value = props.id;
|
|
}
|
|
if (((_a = storeCollection.value) == null ? void 0 : _a.length) == 0) getCollections();
|
|
await nextTick();
|
|
await ((_b = sheetRef.value) == null ? void 0 : _b.setOpen());
|
|
}
|
|
async function closeSheet() {
|
|
var _a;
|
|
await nextTick();
|
|
await ((_a = sheetRef.value) == null ? void 0 : _a.setClose());
|
|
}
|
|
watch(props, (value) => {
|
|
if (value.open) {
|
|
openSheet();
|
|
} else {
|
|
closeSheet();
|
|
}
|
|
});
|
|
const selectCategory = (val) => {
|
|
closeSheet();
|
|
emits("setField", val);
|
|
};
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_a_spin = Spin;
|
|
_push(ssrRenderComponent(BasicSheet, mergeProps({
|
|
title: "",
|
|
ref_key: "sheetRef",
|
|
ref: sheetRef,
|
|
headerCls: "",
|
|
closeOnClickOutside: "",
|
|
onOnClickOutside: ($event) => emits("update:open", false),
|
|
onOnClose: ($event) => emits("update:open", false)
|
|
}, _attrs), {
|
|
header: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div${_scopeId}></div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div")
|
|
];
|
|
}
|
|
}),
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div class="px-4 pb-4 flex flex-col justify-between h-70vh"${_scopeId}><div class="flex flex-col gap-2 mt-5 mb-5"${_scopeId}><div${_scopeId}><div flex p-2${_scopeId}><div mt-1 font-semibold${_scopeId}>${ssrInterpolate(unref(config).useString("allCollection"))}</div></div>`);
|
|
_push2(ssrRenderComponent(_component_a_spin, { spinning: unref(loading) }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`<div class="max-h-[50vh] overflow-auto"${_scopeId2}><!--[-->`);
|
|
ssrRenderList(storeCollection.value, (item) => {
|
|
_push3(ssrRenderComponent(unref(Disclosure), {
|
|
as: "div",
|
|
class: "mt-2"
|
|
}, {
|
|
default: withCtx(({ open }, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(unref(DisclosureButton), {
|
|
class: "flex w-full items-center rounded-lg px-4 justify-start text-sm focus:outline-none focus-visible:ring bg-transparent",
|
|
onClick: () => {
|
|
var _a;
|
|
return ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? null : selectCategory(item);
|
|
}
|
|
}, {
|
|
default: withCtx((_3, _push5, _parent5, _scopeId4) => {
|
|
var _a, _b, _c, _d, _e, _f;
|
|
if (_push5) {
|
|
_push5(`<div class="${ssrRenderClass([[selectedJob.value === item.id ? "border-primary border-solid border-1 " : "", ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? unref(config).isNightStore ? "text-gray-2" : "text-gray-8" : unref(config).isNightStore ? "text-gray-2" : "text-gray-8"], "w-full flex items-center gap2 rounded-md p-2 font-azar text-start"])}"${_scopeId4}><span${_scopeId4}>`);
|
|
_push5(ssrRenderComponent(BasicIconOld, {
|
|
icon: ((_b = item == null ? void 0 : item.children) == null ? void 0 : _b.length) ? "vuesax-linear:main-component" : "vuesax-linear:component"
|
|
}, null, _parent5, _scopeId4));
|
|
_push5(`</span><span${_scopeId4}>${ssrInterpolate(item.title)}</span></div>`);
|
|
if ((_c = item.children) == null ? void 0 : _c.length) {
|
|
_push5(ssrRenderComponent(BasicIconOld, {
|
|
class: [open ? "" : "rotate-180", "transform"],
|
|
icon: "tabler:chevron-up"
|
|
}, null, _parent5, _scopeId4));
|
|
} else {
|
|
_push5(`<!---->`);
|
|
}
|
|
} else {
|
|
return [
|
|
createVNode("div", {
|
|
class: ["w-full flex items-center gap2 rounded-md p-2 font-azar text-start", [selectedJob.value === item.id ? "border-primary border-solid border-1 " : "", ((_d = item == null ? void 0 : item.children) == null ? void 0 : _d.length) ? unref(config).isNightStore ? "text-gray-2" : "text-gray-8" : unref(config).isNightStore ? "text-gray-2" : "text-gray-8"]]
|
|
}, [
|
|
createVNode("span", null, [
|
|
createVNode(BasicIconOld, {
|
|
icon: ((_e = item == null ? void 0 : item.children) == null ? void 0 : _e.length) ? "vuesax-linear:main-component" : "vuesax-linear:component"
|
|
}, null, 8, ["icon"])
|
|
]),
|
|
createVNode("span", null, toDisplayString(item.title), 1)
|
|
], 2),
|
|
((_f = item.children) == null ? void 0 : _f.length) ? (openBlock(), createBlock(BasicIconOld, {
|
|
key: 0,
|
|
class: [open ? "" : "rotate-180", "transform"],
|
|
icon: "tabler:chevron-up"
|
|
}, null, 8, ["class"])) : createCommentVNode("", true)
|
|
];
|
|
}
|
|
}),
|
|
_: 2
|
|
}, _parent4, _scopeId3));
|
|
_push4(ssrRenderComponent(unref(DisclosurePanel), { class: "px-4 flex flex-col gap-2 text-sm mt2 mb5" }, {
|
|
default: withCtx((_3, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(`<!--[-->`);
|
|
ssrRenderList(item == null ? void 0 : item.children, (child) => {
|
|
_push5(`<div class="${ssrRenderClass([[
|
|
selectedJob.value === child.id ? "border-primary border-solid border-1 " : "",
|
|
unref(config).isNightStore ? "text-gray-2" : "text-gray-8"
|
|
], "w-full flex items-center gap2 rounded-md p-2 font-azar text-start ms2"])}"${_scopeId4}><span${_scopeId4}>`);
|
|
_push5(ssrRenderComponent(BasicIconOld, { icon: "vuesax-linear:component" }, null, _parent5, _scopeId4));
|
|
_push5(`</span><span${_scopeId4}>${ssrInterpolate(child.title)}</span></div>`);
|
|
});
|
|
_push5(`<!--]-->`);
|
|
} else {
|
|
return [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(item == null ? void 0 : item.children, (child) => {
|
|
return openBlock(), createBlock("div", {
|
|
class: ["w-full flex items-center gap2 rounded-md p-2 font-azar text-start ms2", [
|
|
selectedJob.value === child.id ? "border-primary border-solid border-1 " : "",
|
|
unref(config).isNightStore ? "text-gray-2" : "text-gray-8"
|
|
]],
|
|
onClick: ($event) => selectCategory(child)
|
|
}, [
|
|
createVNode("span", null, [
|
|
createVNode(BasicIconOld, { icon: "vuesax-linear:component" })
|
|
]),
|
|
createVNode("span", null, toDisplayString(child.title), 1)
|
|
], 10, ["onClick"]);
|
|
}), 256))
|
|
];
|
|
}
|
|
}),
|
|
_: 2
|
|
}, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(unref(DisclosureButton), {
|
|
class: "flex w-full items-center rounded-lg px-4 justify-start text-sm focus:outline-none focus-visible:ring bg-transparent",
|
|
onClick: () => {
|
|
var _a;
|
|
return ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? null : selectCategory(item);
|
|
}
|
|
}, {
|
|
default: withCtx(() => {
|
|
var _a, _b, _c;
|
|
return [
|
|
createVNode("div", {
|
|
class: ["w-full flex items-center gap2 rounded-md p-2 font-azar text-start", [selectedJob.value === item.id ? "border-primary border-solid border-1 " : "", ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? unref(config).isNightStore ? "text-gray-2" : "text-gray-8" : unref(config).isNightStore ? "text-gray-2" : "text-gray-8"]]
|
|
}, [
|
|
createVNode("span", null, [
|
|
createVNode(BasicIconOld, {
|
|
icon: ((_b = item == null ? void 0 : item.children) == null ? void 0 : _b.length) ? "vuesax-linear:main-component" : "vuesax-linear:component"
|
|
}, null, 8, ["icon"])
|
|
]),
|
|
createVNode("span", null, toDisplayString(item.title), 1)
|
|
], 2),
|
|
((_c = item.children) == null ? void 0 : _c.length) ? (openBlock(), createBlock(BasicIconOld, {
|
|
key: 0,
|
|
class: [open ? "" : "rotate-180", "transform"],
|
|
icon: "tabler:chevron-up"
|
|
}, null, 8, ["class"])) : createCommentVNode("", true)
|
|
];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["onClick"]),
|
|
createVNode(unref(DisclosurePanel), { class: "px-4 flex flex-col gap-2 text-sm mt2 mb5" }, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(item == null ? void 0 : item.children, (child) => {
|
|
return openBlock(), createBlock("div", {
|
|
class: ["w-full flex items-center gap2 rounded-md p-2 font-azar text-start ms2", [
|
|
selectedJob.value === child.id ? "border-primary border-solid border-1 " : "",
|
|
unref(config).isNightStore ? "text-gray-2" : "text-gray-8"
|
|
]],
|
|
onClick: ($event) => selectCategory(child)
|
|
}, [
|
|
createVNode("span", null, [
|
|
createVNode(BasicIconOld, { icon: "vuesax-linear:component" })
|
|
]),
|
|
createVNode("span", null, toDisplayString(child.title), 1)
|
|
], 10, ["onClick"]);
|
|
}), 256))
|
|
]),
|
|
_: 2
|
|
}, 1024)
|
|
];
|
|
}
|
|
}),
|
|
_: 2
|
|
}, _parent3, _scopeId2));
|
|
});
|
|
_push3(`<!--]--></div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "max-h-[50vh] overflow-auto" }, [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(storeCollection.value, (item) => {
|
|
return openBlock(), createBlock(unref(Disclosure), {
|
|
as: "div",
|
|
class: "mt-2"
|
|
}, {
|
|
default: withCtx(({ open }) => [
|
|
createVNode(unref(DisclosureButton), {
|
|
class: "flex w-full items-center rounded-lg px-4 justify-start text-sm focus:outline-none focus-visible:ring bg-transparent",
|
|
onClick: () => {
|
|
var _a;
|
|
return ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? null : selectCategory(item);
|
|
}
|
|
}, {
|
|
default: withCtx(() => {
|
|
var _a, _b, _c;
|
|
return [
|
|
createVNode("div", {
|
|
class: ["w-full flex items-center gap2 rounded-md p-2 font-azar text-start", [selectedJob.value === item.id ? "border-primary border-solid border-1 " : "", ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? unref(config).isNightStore ? "text-gray-2" : "text-gray-8" : unref(config).isNightStore ? "text-gray-2" : "text-gray-8"]]
|
|
}, [
|
|
createVNode("span", null, [
|
|
createVNode(BasicIconOld, {
|
|
icon: ((_b = item == null ? void 0 : item.children) == null ? void 0 : _b.length) ? "vuesax-linear:main-component" : "vuesax-linear:component"
|
|
}, null, 8, ["icon"])
|
|
]),
|
|
createVNode("span", null, toDisplayString(item.title), 1)
|
|
], 2),
|
|
((_c = item.children) == null ? void 0 : _c.length) ? (openBlock(), createBlock(BasicIconOld, {
|
|
key: 0,
|
|
class: [open ? "" : "rotate-180", "transform"],
|
|
icon: "tabler:chevron-up"
|
|
}, null, 8, ["class"])) : createCommentVNode("", true)
|
|
];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["onClick"]),
|
|
createVNode(unref(DisclosurePanel), { class: "px-4 flex flex-col gap-2 text-sm mt2 mb5" }, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(item == null ? void 0 : item.children, (child) => {
|
|
return openBlock(), createBlock("div", {
|
|
class: ["w-full flex items-center gap2 rounded-md p-2 font-azar text-start ms2", [
|
|
selectedJob.value === child.id ? "border-primary border-solid border-1 " : "",
|
|
unref(config).isNightStore ? "text-gray-2" : "text-gray-8"
|
|
]],
|
|
onClick: ($event) => selectCategory(child)
|
|
}, [
|
|
createVNode("span", null, [
|
|
createVNode(BasicIconOld, { icon: "vuesax-linear:component" })
|
|
]),
|
|
createVNode("span", null, toDisplayString(child.title), 1)
|
|
], 10, ["onClick"]);
|
|
}), 256))
|
|
]),
|
|
_: 2
|
|
}, 1024)
|
|
]),
|
|
_: 2
|
|
}, 1024);
|
|
}), 256))
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(`</div></div>`);
|
|
_push2(ssrRenderComponent(_sfc_main$8, {
|
|
block: "",
|
|
class: "!h-unset !rounded-lg mt-5",
|
|
onClick: closeSheet
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(unref(config).useString("close"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("close")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "px-4 pb-4 flex flex-col justify-between h-70vh" }, [
|
|
createVNode("div", { class: "flex flex-col gap-2 mt-5 mb-5" }, [
|
|
createVNode("div", null, [
|
|
createVNode("div", {
|
|
flex: "",
|
|
"p-2": ""
|
|
}, [
|
|
createVNode("div", {
|
|
"mt-1": "",
|
|
"font-semibold": ""
|
|
}, toDisplayString(unref(config).useString("allCollection")), 1)
|
|
]),
|
|
createVNode(_component_a_spin, { spinning: unref(loading) }, {
|
|
default: withCtx(() => [
|
|
createVNode("div", { class: "max-h-[50vh] overflow-auto" }, [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(storeCollection.value, (item) => {
|
|
return openBlock(), createBlock(unref(Disclosure), {
|
|
as: "div",
|
|
class: "mt-2"
|
|
}, {
|
|
default: withCtx(({ open }) => [
|
|
createVNode(unref(DisclosureButton), {
|
|
class: "flex w-full items-center rounded-lg px-4 justify-start text-sm focus:outline-none focus-visible:ring bg-transparent",
|
|
onClick: () => {
|
|
var _a;
|
|
return ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? null : selectCategory(item);
|
|
}
|
|
}, {
|
|
default: withCtx(() => {
|
|
var _a, _b, _c;
|
|
return [
|
|
createVNode("div", {
|
|
class: ["w-full flex items-center gap2 rounded-md p-2 font-azar text-start", [selectedJob.value === item.id ? "border-primary border-solid border-1 " : "", ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? unref(config).isNightStore ? "text-gray-2" : "text-gray-8" : unref(config).isNightStore ? "text-gray-2" : "text-gray-8"]]
|
|
}, [
|
|
createVNode("span", null, [
|
|
createVNode(BasicIconOld, {
|
|
icon: ((_b = item == null ? void 0 : item.children) == null ? void 0 : _b.length) ? "vuesax-linear:main-component" : "vuesax-linear:component"
|
|
}, null, 8, ["icon"])
|
|
]),
|
|
createVNode("span", null, toDisplayString(item.title), 1)
|
|
], 2),
|
|
((_c = item.children) == null ? void 0 : _c.length) ? (openBlock(), createBlock(BasicIconOld, {
|
|
key: 0,
|
|
class: [open ? "" : "rotate-180", "transform"],
|
|
icon: "tabler:chevron-up"
|
|
}, null, 8, ["class"])) : createCommentVNode("", true)
|
|
];
|
|
}),
|
|
_: 2
|
|
}, 1032, ["onClick"]),
|
|
createVNode(unref(DisclosurePanel), { class: "px-4 flex flex-col gap-2 text-sm mt2 mb5" }, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(item == null ? void 0 : item.children, (child) => {
|
|
return openBlock(), createBlock("div", {
|
|
class: ["w-full flex items-center gap2 rounded-md p-2 font-azar text-start ms2", [
|
|
selectedJob.value === child.id ? "border-primary border-solid border-1 " : "",
|
|
unref(config).isNightStore ? "text-gray-2" : "text-gray-8"
|
|
]],
|
|
onClick: ($event) => selectCategory(child)
|
|
}, [
|
|
createVNode("span", null, [
|
|
createVNode(BasicIconOld, { icon: "vuesax-linear:component" })
|
|
]),
|
|
createVNode("span", null, toDisplayString(child.title), 1)
|
|
], 10, ["onClick"]);
|
|
}), 256))
|
|
]),
|
|
_: 2
|
|
}, 1024)
|
|
]),
|
|
_: 2
|
|
}, 1024);
|
|
}), 256))
|
|
])
|
|
]),
|
|
_: 1
|
|
}, 8, ["spinning"])
|
|
])
|
|
]),
|
|
createVNode(_sfc_main$8, {
|
|
block: "",
|
|
class: "!h-unset !rounded-lg mt-5",
|
|
onClick: closeSheet
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("close")), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$1 = _sfc_main$1.setup;
|
|
_sfc_main$1.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/user/userMain/edit/components/JobSelector.vue");
|
|
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "index",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const router = useRouter$1();
|
|
const config = useConfigStore();
|
|
const user = useUserStore();
|
|
const imageVisible = ref(false);
|
|
const img = ref("");
|
|
const formRef = ref();
|
|
const jobVisible = ref();
|
|
const selectedJob = ref();
|
|
ref([]);
|
|
const formFields = ref({
|
|
avatar: "",
|
|
birthday: "",
|
|
website: "",
|
|
name: "",
|
|
first_name: "",
|
|
last_name: "",
|
|
phone: "",
|
|
email: "",
|
|
bio: "",
|
|
skill: ""
|
|
});
|
|
function setJob(job) {
|
|
formFields.value.job = job.id;
|
|
selectedJob.value = job;
|
|
}
|
|
function openImageUploader() {
|
|
imageVisible.value = true;
|
|
img.value = formFields.value.avatar;
|
|
}
|
|
function loadImage(img2) {
|
|
formFields.value.avatar = img2;
|
|
}
|
|
function handleSubmit() {
|
|
formRef.value.validateFields().then(async () => {
|
|
try {
|
|
loading.value = true;
|
|
formFields.value.name = `${formFields.value.first_name} ${formFields.value.last_name}`;
|
|
if (formFields.value.password === "" || formFields.value.password === " ") formFields.value.password = void 0;
|
|
await updateUser(formFields.value);
|
|
await user.getUserInfo();
|
|
await config.getConfig();
|
|
router.back();
|
|
} catch (e) {
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
}
|
|
const validate = ref(true);
|
|
const usernameLoading = ref(false);
|
|
const indicator = h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: "16px"
|
|
},
|
|
spin: true
|
|
});
|
|
const checkValidateUsername = debounce(async (val) => {
|
|
var _a, _b;
|
|
try {
|
|
usernameLoading.value = true;
|
|
const users = await checkUsername(val);
|
|
validate.value = (users == null ? void 0 : users.length) === 0;
|
|
if (!validate.value && users.length === 1) {
|
|
validate.value = ((_a = users[0]) == null ? void 0 : _a.id) === ((_b = user == null ? void 0 : user.user) == null ? void 0 : _b.id);
|
|
}
|
|
} catch (e) {
|
|
console.log(e);
|
|
} finally {
|
|
usernameLoading.value = false;
|
|
}
|
|
}, 1e3);
|
|
watch(user.user, () => {
|
|
formFields.value = user.user;
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_a_spin = Spin;
|
|
const _component_a_form = Form;
|
|
const _directive_lazy = resolveDirective("lazy");
|
|
let _temp0;
|
|
_push(ssrRenderComponent(_component_a_spin, mergeProps({ spinning: unref(loading) }, _attrs), {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
var _a;
|
|
if (_push2) {
|
|
_push2(`<div class="${ssrRenderClass([" fixed w-full top-0 z-2", !unref(config).isNightStore ? "bg-header-color" : "bg-header-color-dark "])}"${_scopeId}><div class="px-4 flex items-center justify-between"${_scopeId}><div class="flex gap-5 py-4"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(BasicIconOld, {
|
|
icon: unref(config).isRTL ? "vuesax-linear:arrow-right" : "vuesax-linear:arrow-left",
|
|
onClick: ($event) => unref(router).back()
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`<div class="font-semibold"${_scopeId}>${ssrInterpolate(unref(config).useString("editProfile"))}</div></div><div${_scopeId}></div></div></div><div class="pt-4rem pb-6rem overflow-y-auto"${_scopeId}><div class="w-full flex justify-center"${_scopeId}><img${ssrRenderAttrs(_temp0 = mergeProps({
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-4rem h-4rem rounded-full object-cover"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)(formFields.value.avatar), loading: unref(empty_user), error: unref(empty_user) })))}${_scopeId}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : (_a = _temp0.innerHTML) != null ? _a : ""}</div><div class="px-1rem mt-2rem"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_component_a_form, {
|
|
ref_key: "formRef",
|
|
ref: formRef,
|
|
model: formFields.value,
|
|
autocomplete: "off",
|
|
layout: "vertical"
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.first_name,
|
|
"onUpdate:value": ($event) => formFields.value.first_name = $event,
|
|
label: "firstName",
|
|
name: "first_name"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(_sfc_main$5, {
|
|
value: formFields.value.first_name,
|
|
"onUpdate:value": ($event) => formFields.value.first_name = $event,
|
|
placeHolder: unref(config).useString("firstName")
|
|
}, null, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.first_name,
|
|
"onUpdate:value": ($event) => formFields.value.first_name = $event,
|
|
placeHolder: unref(config).useString("firstName")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
_push3(ssrRenderComponent(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.last_name,
|
|
"onUpdate:value": ($event) => formFields.value.last_name = $event,
|
|
label: "lastName",
|
|
name: "last_name"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(_sfc_main$5, {
|
|
value: formFields.value.last_name,
|
|
"onUpdate:value": ($event) => formFields.value.last_name = $event,
|
|
placeHolder: unref(config).useString("lastName")
|
|
}, null, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.last_name,
|
|
"onUpdate:value": ($event) => formFields.value.last_name = $event,
|
|
placeHolder: unref(config).useString("lastName")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
if (unref(config).isSeller && formFields.value.type !== "customer") {
|
|
_push3(ssrRenderComponent(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.website,
|
|
"onUpdate:value": ($event) => formFields.value.website = $event,
|
|
label: "website",
|
|
name: "website"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(_sfc_main$5, {
|
|
value: formFields.value.website,
|
|
"onUpdate:value": ($event) => formFields.value.website = $event,
|
|
placeHolder: unref(config).useString("website")
|
|
}, null, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.website,
|
|
"onUpdate:value": ($event) => formFields.value.website = $event,
|
|
placeHolder: unref(config).useString("website")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
_push3(`<!---->`);
|
|
}
|
|
if (unref(config).isSeller && formFields.value.type !== "customer") {
|
|
_push3(ssrRenderComponent(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.username,
|
|
"onUpdate:value": ($event) => formFields.value.username = $event,
|
|
label: "username",
|
|
name: "username"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(`<div class="flex items-center"${_scopeId3}>`);
|
|
_push4(ssrRenderComponent(_sfc_main$5, {
|
|
value: formFields.value.username,
|
|
"onUpdate:value": ($event) => formFields.value.username = $event,
|
|
placeHolder: unref(config).useString("username"),
|
|
class: "flex-1",
|
|
"validate-status": "success",
|
|
onOnchange: unref(checkValidateUsername)
|
|
}, null, _parent4, _scopeId3));
|
|
if (!usernameLoading.value) {
|
|
_push4(`<!--[-->`);
|
|
if (validate.value) {
|
|
_push4(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:tick-circle",
|
|
color: "green",
|
|
size: "16"
|
|
}, null, _parent4, _scopeId3));
|
|
} else {
|
|
_push4(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:close-circle",
|
|
color: "red",
|
|
size: "16"
|
|
}, null, _parent4, _scopeId3));
|
|
}
|
|
_push4(`<!--]-->`);
|
|
} else {
|
|
_push4(ssrRenderComponent(_component_a_spin, {
|
|
spinning: usernameLoading.value,
|
|
indicator: unref(indicator)
|
|
}, null, _parent4, _scopeId3));
|
|
}
|
|
_push4(`</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "flex items-center" }, [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.username,
|
|
"onUpdate:value": ($event) => formFields.value.username = $event,
|
|
placeHolder: unref(config).useString("username"),
|
|
class: "flex-1",
|
|
"validate-status": "success",
|
|
onOnchange: unref(checkValidateUsername)
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder", "onOnchange"]),
|
|
!usernameLoading.value ? (openBlock(), createBlock(Fragment, { key: 0 }, [
|
|
validate.value ? (openBlock(), createBlock(BasicIconOld, {
|
|
key: 0,
|
|
icon: "vuesax-linear:tick-circle",
|
|
color: "green",
|
|
size: "16"
|
|
})) : (openBlock(), createBlock(BasicIconOld, {
|
|
key: 1,
|
|
icon: "vuesax-linear:close-circle",
|
|
color: "red",
|
|
size: "16"
|
|
}))
|
|
], 64)) : (openBlock(), createBlock(_component_a_spin, {
|
|
key: 1,
|
|
spinning: usernameLoading.value,
|
|
indicator: unref(indicator)
|
|
}, null, 8, ["spinning", "indicator"]))
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
_push3(`<!---->`);
|
|
}
|
|
_push3(ssrRenderComponent(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
label: "birthdate",
|
|
name: "birthdate"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
if (unref(config).lang === "en" && ("APP_Milady_Date" in _ctx ? _ctx.APP_Milady_Date : unref(APP_Milady_Date))) {
|
|
_push4(ssrRenderComponent(unref(_sfc_main$1$1), {
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
inputReadOnly: "",
|
|
placeHolder: unref(config).useString("birthdate")
|
|
}, null, _parent4, _scopeId3));
|
|
} else {
|
|
_push4(ssrRenderComponent(unref(_sfc_main$6), {
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
inputReadOnly: "",
|
|
placeHolder: unref(config).useString("birthdate")
|
|
}, null, _parent4, _scopeId3));
|
|
}
|
|
} else {
|
|
return [
|
|
unref(config).lang === "en" && ("APP_Milady_Date" in _ctx ? _ctx.APP_Milady_Date : unref(APP_Milady_Date)) ? (openBlock(), createBlock(unref(_sfc_main$1$1), {
|
|
key: 0,
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
inputReadOnly: "",
|
|
placeHolder: unref(config).useString("birthdate")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])) : (openBlock(), createBlock(unref(_sfc_main$6), {
|
|
key: 1,
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
inputReadOnly: "",
|
|
placeHolder: unref(config).useString("birthdate")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"]))
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
_push3(ssrRenderComponent(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.phone,
|
|
"onUpdate:value": ($event) => formFields.value.phone = $event,
|
|
label: "phone",
|
|
name: "phone"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(_sfc_main$5, {
|
|
value: formFields.value.phone,
|
|
"onUpdate:value": ($event) => formFields.value.phone = $event,
|
|
placeHolder: unref(config).useString("phone")
|
|
}, null, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.phone,
|
|
"onUpdate:value": ($event) => formFields.value.phone = $event,
|
|
placeHolder: unref(config).useString("phone")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
_push3(ssrRenderComponent(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.password,
|
|
"onUpdate:value": ($event) => formFields.value.password = $event,
|
|
label: "password",
|
|
name: "password"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(_sfc_main$5, {
|
|
value: formFields.value.password,
|
|
"onUpdate:value": ($event) => formFields.value.password = $event,
|
|
"place-holder": unref(config).useString("password"),
|
|
"is-password": ""
|
|
}, null, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.password,
|
|
"onUpdate:value": ($event) => formFields.value.password = $event,
|
|
"place-holder": unref(config).useString("password"),
|
|
"is-password": ""
|
|
}, null, 8, ["value", "onUpdate:value", "place-holder"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
_push3(ssrRenderComponent(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.job,
|
|
"onUpdate:value": ($event) => formFields.value.job = $event,
|
|
label: "skill",
|
|
onClick: ($event) => jobVisible.value = true,
|
|
name: "password"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
var _a2, _b;
|
|
if (_push4) {
|
|
if (!formFields.value.job) {
|
|
_push4(`<div class="text-gray-3 mt2 mr2"${_scopeId3}>${ssrInterpolate(unref(config).useString("selectSkill"))}</div>`);
|
|
} else {
|
|
_push4(`<div class="${ssrRenderClass([unref(config).isNightStore ? "text-gray-3" : "text-gray-8", "mt2 mr2"])}"${_scopeId3}>${ssrInterpolate((_a2 = selectedJob.value) == null ? void 0 : _a2.title)}</div>`);
|
|
}
|
|
} else {
|
|
return [
|
|
!formFields.value.job ? (openBlock(), createBlock("div", {
|
|
key: 0,
|
|
class: "text-gray-3 mt2 mr2"
|
|
}, toDisplayString(unref(config).useString("selectSkill")), 1)) : (openBlock(), createBlock("div", {
|
|
key: 1,
|
|
class: ["mt2 mr2", unref(config).isNightStore ? "text-gray-3" : "text-gray-8"]
|
|
}, toDisplayString((_b = selectedJob.value) == null ? void 0 : _b.title), 3))
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
if (unref(config).isSeller && formFields.value.type !== "customer") {
|
|
_push3(ssrRenderComponent(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.bio,
|
|
"onUpdate:value": ($event) => formFields.value.bio = $event,
|
|
label: "bio",
|
|
name: "bio"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(_sfc_main$7, {
|
|
value: formFields.value.bio,
|
|
"onUpdate:value": ($event) => formFields.value.bio = $event,
|
|
placeHolder: unref(config).useString("writeYourBio"),
|
|
rows: 1,
|
|
class: "bg-transparent border-unset"
|
|
}, null, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(_sfc_main$7, {
|
|
value: formFields.value.bio,
|
|
"onUpdate:value": ($event) => formFields.value.bio = $event,
|
|
placeHolder: unref(config).useString("writeYourBio"),
|
|
rows: 1,
|
|
class: "bg-transparent border-unset"
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
_push3(`<!---->`);
|
|
}
|
|
} else {
|
|
return [
|
|
createVNode(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.first_name,
|
|
"onUpdate:value": ($event) => formFields.value.first_name = $event,
|
|
label: "firstName",
|
|
name: "first_name"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.first_name,
|
|
"onUpdate:value": ($event) => formFields.value.first_name = $event,
|
|
placeHolder: unref(config).useString("firstName")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["rules", "value", "onUpdate:value"]),
|
|
createVNode(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.last_name,
|
|
"onUpdate:value": ($event) => formFields.value.last_name = $event,
|
|
label: "lastName",
|
|
name: "last_name"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.last_name,
|
|
"onUpdate:value": ($event) => formFields.value.last_name = $event,
|
|
placeHolder: unref(config).useString("lastName")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["rules", "value", "onUpdate:value"]),
|
|
unref(config).isSeller && formFields.value.type !== "customer" ? (openBlock(), createBlock(_sfc_main$4, {
|
|
key: 0,
|
|
rules: [],
|
|
value: formFields.value.website,
|
|
"onUpdate:value": ($event) => formFields.value.website = $event,
|
|
label: "website",
|
|
name: "website"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.website,
|
|
"onUpdate:value": ($event) => formFields.value.website = $event,
|
|
placeHolder: unref(config).useString("website")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value"])) : createCommentVNode("", true),
|
|
unref(config).isSeller && formFields.value.type !== "customer" ? (openBlock(), createBlock(_sfc_main$4, {
|
|
key: 1,
|
|
rules: [],
|
|
value: formFields.value.username,
|
|
"onUpdate:value": ($event) => formFields.value.username = $event,
|
|
label: "username",
|
|
name: "username"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("div", { class: "flex items-center" }, [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.username,
|
|
"onUpdate:value": ($event) => formFields.value.username = $event,
|
|
placeHolder: unref(config).useString("username"),
|
|
class: "flex-1",
|
|
"validate-status": "success",
|
|
onOnchange: unref(checkValidateUsername)
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder", "onOnchange"]),
|
|
!usernameLoading.value ? (openBlock(), createBlock(Fragment, { key: 0 }, [
|
|
validate.value ? (openBlock(), createBlock(BasicIconOld, {
|
|
key: 0,
|
|
icon: "vuesax-linear:tick-circle",
|
|
color: "green",
|
|
size: "16"
|
|
})) : (openBlock(), createBlock(BasicIconOld, {
|
|
key: 1,
|
|
icon: "vuesax-linear:close-circle",
|
|
color: "red",
|
|
size: "16"
|
|
}))
|
|
], 64)) : (openBlock(), createBlock(_component_a_spin, {
|
|
key: 1,
|
|
spinning: usernameLoading.value,
|
|
indicator: unref(indicator)
|
|
}, null, 8, ["spinning", "indicator"]))
|
|
])
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value"])) : createCommentVNode("", true),
|
|
createVNode(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
label: "birthdate",
|
|
name: "birthdate"
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(config).lang === "en" && ("APP_Milady_Date" in _ctx ? _ctx.APP_Milady_Date : unref(APP_Milady_Date)) ? (openBlock(), createBlock(unref(_sfc_main$1$1), {
|
|
key: 0,
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
inputReadOnly: "",
|
|
placeHolder: unref(config).useString("birthdate")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])) : (openBlock(), createBlock(unref(_sfc_main$6), {
|
|
key: 1,
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
inputReadOnly: "",
|
|
placeHolder: unref(config).useString("birthdate")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"]))
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value"]),
|
|
createVNode(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.phone,
|
|
"onUpdate:value": ($event) => formFields.value.phone = $event,
|
|
label: "phone",
|
|
name: "phone"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.phone,
|
|
"onUpdate:value": ($event) => formFields.value.phone = $event,
|
|
placeHolder: unref(config).useString("phone")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["rules", "value", "onUpdate:value"]),
|
|
createVNode(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.password,
|
|
"onUpdate:value": ($event) => formFields.value.password = $event,
|
|
label: "password",
|
|
name: "password"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.password,
|
|
"onUpdate:value": ($event) => formFields.value.password = $event,
|
|
"place-holder": unref(config).useString("password"),
|
|
"is-password": ""
|
|
}, null, 8, ["value", "onUpdate:value", "place-holder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value"]),
|
|
createVNode(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.job,
|
|
"onUpdate:value": ($event) => formFields.value.job = $event,
|
|
label: "skill",
|
|
onClick: ($event) => jobVisible.value = true,
|
|
name: "password"
|
|
}, {
|
|
default: withCtx(() => {
|
|
var _a2;
|
|
return [
|
|
!formFields.value.job ? (openBlock(), createBlock("div", {
|
|
key: 0,
|
|
class: "text-gray-3 mt2 mr2"
|
|
}, toDisplayString(unref(config).useString("selectSkill")), 1)) : (openBlock(), createBlock("div", {
|
|
key: 1,
|
|
class: ["mt2 mr2", unref(config).isNightStore ? "text-gray-3" : "text-gray-8"]
|
|
}, toDisplayString((_a2 = selectedJob.value) == null ? void 0 : _a2.title), 3))
|
|
];
|
|
}),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value", "onClick"]),
|
|
unref(config).isSeller && formFields.value.type !== "customer" ? (openBlock(), createBlock(_sfc_main$4, {
|
|
key: 2,
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.bio,
|
|
"onUpdate:value": ($event) => formFields.value.bio = $event,
|
|
label: "bio",
|
|
name: "bio"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$7, {
|
|
value: formFields.value.bio,
|
|
"onUpdate:value": ($event) => formFields.value.bio = $event,
|
|
placeHolder: unref(config).useString("writeYourBio"),
|
|
rows: 1,
|
|
class: "bg-transparent border-unset"
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["rules", "value", "onUpdate:value"])) : createCommentVNode("", true)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_sfc_main$8, {
|
|
block: "",
|
|
type: "primary",
|
|
class: "mt-5",
|
|
onClick: ($event) => handleSubmit(),
|
|
loading: unref(loading),
|
|
size: "large",
|
|
disabled: !validate.value
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(unref(config).useString("submit"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("submit")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
_push2(ssrRenderComponent(_sfc_main$2, {
|
|
open: imageVisible.value,
|
|
"onUpdate:open": ($event) => imageVisible.value = $event,
|
|
onSuccess: loadImage
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
_push2(ssrRenderComponent(_sfc_main$1, {
|
|
id: formFields.value.job,
|
|
open: jobVisible.value,
|
|
"onUpdate:open": ($event) => jobVisible.value = $event,
|
|
onSetField: setJob
|
|
}, null, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode("div", {
|
|
class: [" fixed w-full top-0 z-2", !unref(config).isNightStore ? "bg-header-color" : "bg-header-color-dark "]
|
|
}, [
|
|
createVNode("div", { class: "px-4 flex items-center justify-between" }, [
|
|
createVNode("div", { class: "flex gap-5 py-4" }, [
|
|
createVNode(BasicIconOld, {
|
|
icon: unref(config).isRTL ? "vuesax-linear:arrow-right" : "vuesax-linear:arrow-left",
|
|
onClick: ($event) => unref(router).back()
|
|
}, null, 8, ["icon", "onClick"]),
|
|
createVNode("div", { class: "font-semibold" }, toDisplayString(unref(config).useString("editProfile")), 1)
|
|
]),
|
|
createVNode("div")
|
|
])
|
|
], 2),
|
|
createVNode("div", { class: "pt-4rem pb-6rem overflow-y-auto" }, [
|
|
createVNode("div", { class: "w-full flex justify-center" }, [
|
|
withDirectives(createVNode("img", {
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-4rem h-4rem rounded-full object-cover",
|
|
onClick: openImageUploader
|
|
}, null, 8, ["alt"]), [
|
|
[_directive_lazy, { src: unref(getSupabaseStorageUrl)(formFields.value.avatar), loading: unref(empty_user), error: unref(empty_user) }]
|
|
])
|
|
]),
|
|
createVNode("div", { class: "px-1rem mt-2rem" }, [
|
|
createVNode(_component_a_form, {
|
|
ref_key: "formRef",
|
|
ref: formRef,
|
|
model: formFields.value,
|
|
autocomplete: "off",
|
|
layout: "vertical"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.first_name,
|
|
"onUpdate:value": ($event) => formFields.value.first_name = $event,
|
|
label: "firstName",
|
|
name: "first_name"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.first_name,
|
|
"onUpdate:value": ($event) => formFields.value.first_name = $event,
|
|
placeHolder: unref(config).useString("firstName")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["rules", "value", "onUpdate:value"]),
|
|
createVNode(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.last_name,
|
|
"onUpdate:value": ($event) => formFields.value.last_name = $event,
|
|
label: "lastName",
|
|
name: "last_name"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.last_name,
|
|
"onUpdate:value": ($event) => formFields.value.last_name = $event,
|
|
placeHolder: unref(config).useString("lastName")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["rules", "value", "onUpdate:value"]),
|
|
unref(config).isSeller && formFields.value.type !== "customer" ? (openBlock(), createBlock(_sfc_main$4, {
|
|
key: 0,
|
|
rules: [],
|
|
value: formFields.value.website,
|
|
"onUpdate:value": ($event) => formFields.value.website = $event,
|
|
label: "website",
|
|
name: "website"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.website,
|
|
"onUpdate:value": ($event) => formFields.value.website = $event,
|
|
placeHolder: unref(config).useString("website")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value"])) : createCommentVNode("", true),
|
|
unref(config).isSeller && formFields.value.type !== "customer" ? (openBlock(), createBlock(_sfc_main$4, {
|
|
key: 1,
|
|
rules: [],
|
|
value: formFields.value.username,
|
|
"onUpdate:value": ($event) => formFields.value.username = $event,
|
|
label: "username",
|
|
name: "username"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("div", { class: "flex items-center" }, [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.username,
|
|
"onUpdate:value": ($event) => formFields.value.username = $event,
|
|
placeHolder: unref(config).useString("username"),
|
|
class: "flex-1",
|
|
"validate-status": "success",
|
|
onOnchange: unref(checkValidateUsername)
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder", "onOnchange"]),
|
|
!usernameLoading.value ? (openBlock(), createBlock(Fragment, { key: 0 }, [
|
|
validate.value ? (openBlock(), createBlock(BasicIconOld, {
|
|
key: 0,
|
|
icon: "vuesax-linear:tick-circle",
|
|
color: "green",
|
|
size: "16"
|
|
})) : (openBlock(), createBlock(BasicIconOld, {
|
|
key: 1,
|
|
icon: "vuesax-linear:close-circle",
|
|
color: "red",
|
|
size: "16"
|
|
}))
|
|
], 64)) : (openBlock(), createBlock(_component_a_spin, {
|
|
key: 1,
|
|
spinning: usernameLoading.value,
|
|
indicator: unref(indicator)
|
|
}, null, 8, ["spinning", "indicator"]))
|
|
])
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value"])) : createCommentVNode("", true),
|
|
createVNode(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
label: "birthdate",
|
|
name: "birthdate"
|
|
}, {
|
|
default: withCtx(() => [
|
|
unref(config).lang === "en" && ("APP_Milady_Date" in _ctx ? _ctx.APP_Milady_Date : unref(APP_Milady_Date)) ? (openBlock(), createBlock(unref(_sfc_main$1$1), {
|
|
key: 0,
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
inputReadOnly: "",
|
|
placeHolder: unref(config).useString("birthdate")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])) : (openBlock(), createBlock(unref(_sfc_main$6), {
|
|
key: 1,
|
|
value: formFields.value.birthday,
|
|
"onUpdate:value": ($event) => formFields.value.birthday = $event,
|
|
inputReadOnly: "",
|
|
placeHolder: unref(config).useString("birthdate")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"]))
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value"]),
|
|
createVNode(_sfc_main$4, {
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.phone,
|
|
"onUpdate:value": ($event) => formFields.value.phone = $event,
|
|
label: "phone",
|
|
name: "phone"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.phone,
|
|
"onUpdate:value": ($event) => formFields.value.phone = $event,
|
|
placeHolder: unref(config).useString("phone")
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["rules", "value", "onUpdate:value"]),
|
|
createVNode(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.password,
|
|
"onUpdate:value": ($event) => formFields.value.password = $event,
|
|
label: "password",
|
|
name: "password"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$5, {
|
|
value: formFields.value.password,
|
|
"onUpdate:value": ($event) => formFields.value.password = $event,
|
|
"place-holder": unref(config).useString("password"),
|
|
"is-password": ""
|
|
}, null, 8, ["value", "onUpdate:value", "place-holder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value"]),
|
|
createVNode(_sfc_main$4, {
|
|
rules: [],
|
|
value: formFields.value.job,
|
|
"onUpdate:value": ($event) => formFields.value.job = $event,
|
|
label: "skill",
|
|
onClick: ($event) => jobVisible.value = true,
|
|
name: "password"
|
|
}, {
|
|
default: withCtx(() => {
|
|
var _a2;
|
|
return [
|
|
!formFields.value.job ? (openBlock(), createBlock("div", {
|
|
key: 0,
|
|
class: "text-gray-3 mt2 mr2"
|
|
}, toDisplayString(unref(config).useString("selectSkill")), 1)) : (openBlock(), createBlock("div", {
|
|
key: 1,
|
|
class: ["mt2 mr2", unref(config).isNightStore ? "text-gray-3" : "text-gray-8"]
|
|
}, toDisplayString((_a2 = selectedJob.value) == null ? void 0 : _a2.title), 3))
|
|
];
|
|
}),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value", "onClick"]),
|
|
unref(config).isSeller && formFields.value.type !== "customer" ? (openBlock(), createBlock(_sfc_main$4, {
|
|
key: 2,
|
|
rules: unref(inputRulesNoMessage)(),
|
|
value: formFields.value.bio,
|
|
"onUpdate:value": ($event) => formFields.value.bio = $event,
|
|
label: "bio",
|
|
name: "bio"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$7, {
|
|
value: formFields.value.bio,
|
|
"onUpdate:value": ($event) => formFields.value.bio = $event,
|
|
placeHolder: unref(config).useString("writeYourBio"),
|
|
rows: 1,
|
|
class: "bg-transparent border-unset"
|
|
}, null, 8, ["value", "onUpdate:value", "placeHolder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["rules", "value", "onUpdate:value"])) : createCommentVNode("", true)
|
|
]),
|
|
_: 1
|
|
}, 8, ["model"]),
|
|
createVNode(_sfc_main$8, {
|
|
block: "",
|
|
type: "primary",
|
|
class: "mt-5",
|
|
onClick: ($event) => handleSubmit(),
|
|
loading: unref(loading),
|
|
size: "large",
|
|
disabled: !validate.value
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("submit")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick", "loading", "disabled"])
|
|
]),
|
|
createVNode(_sfc_main$2, {
|
|
open: imageVisible.value,
|
|
"onUpdate:open": ($event) => imageVisible.value = $event,
|
|
onSuccess: loadImage
|
|
}, null, 8, ["open", "onUpdate:open"])
|
|
]),
|
|
createVNode(_sfc_main$1, {
|
|
id: formFields.value.job,
|
|
open: jobVisible.value,
|
|
"onUpdate:open": ($event) => jobVisible.value = $event,
|
|
onSetField: setJob
|
|
}, null, 8, ["id", "open", "onUpdate:open"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/user/userMain/edit/index.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as _ };
|
|
//# sourceMappingURL=index-BksgDFAR.mjs.map
|