2076 lines
74 KiB
JavaScript
2076 lines
74 KiB
JavaScript
import { defineComponent, ref, computed, unref, resolveDirective, mergeProps, withCtx, createTextVNode, toDisplayString, createVNode, withDirectives, reactive, watch, nextTick, shallowRef, useSSRContext } from 'vue';
|
|
import { ssrRenderComponent, ssrRenderAttrs, ssrRenderClass, ssrInterpolate, ssrGetDirectiveProps, ssrRenderList } from 'vue/server-renderer';
|
|
import { u as useRouter$1, a as useConfigStore, b as useUserStore, e as loading, aM as useProduct, O as initDefaultProps, C as useConfigInject, D as genComponentStyleHook, aN as useToken, af as CloseOutlined, E as classNames, H as omit, y as functionType, z as stringType, aB as someType, B as arrayType, A as booleanType, P as PropTypes, aO as withUndefined, M as myAxios, F as merge, Q as filterEmpty, ai as supabaseService, d as api$1, I as resetComponent, ap as textEllipsis, Y as cloneElement } from './server.mjs';
|
|
import { B as BasicIconOld } from './BasicIconOld-93vAWohq.mjs';
|
|
import { u as usePrice } from './usePrice-_QzChhgO.mjs';
|
|
import { e as empty_user } from './empty_user-DSxcM_ac.mjs';
|
|
import { B as BasicButton } from './BasicButton-DhQvSD8U.mjs';
|
|
import { p as previewImg } from './logo_preview-CJTcB_Eg.mjs';
|
|
import { B as Badge } from './index-Dwnkcm_j.mjs';
|
|
import { _ as __nuxt_component_1$1 } from './index-DNuZTxeo.mjs';
|
|
import { t as toJalali } from './useDateTime-D8RCoGwW.mjs';
|
|
import { B as BasicSheet } from './index-m5qbBl98.mjs';
|
|
import { F as Form, _ as _sfc_main$5 } from './index-BHPit4CX.mjs';
|
|
import { B as BasicInput } from './BasicInput-rlXkJMLE.mjs';
|
|
import { _ as __nuxt_component_1$2, u as useResponsiveObserver } from './FormItem-CMWnBuQX.mjs';
|
|
import { _ as _export_sfc } from './_plugin-vue_export-helper-1tPrXgE0.mjs';
|
|
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
import { C as CheckOutlined } from '../_/CheckOutlined.mjs';
|
|
import { _ as __nuxt_component_2$1 } from './index-Czz3hSzg.mjs';
|
|
import { _ as __nuxt_component_2 } from './index-Bn4rLj9V.mjs';
|
|
import 'node:http';
|
|
import 'node:https';
|
|
import '../nitro/nitro.mjs';
|
|
import 'node:events';
|
|
import 'node:buffer';
|
|
import 'node:fs';
|
|
import 'node:path';
|
|
import 'node:crypto';
|
|
import 'node:url';
|
|
import 'consola';
|
|
import 'ipx';
|
|
import 'pinia';
|
|
import '@supabase/supabase-js';
|
|
import 'axios';
|
|
import 'lodash-es';
|
|
import '@ant-design/colors';
|
|
import '@ctrl/tinycolor';
|
|
import 'stylis';
|
|
import 'vue-types';
|
|
import '@ant-design/icons-vue';
|
|
import '../routes/renderer.mjs';
|
|
import 'vue-bundle-renderer/runtime';
|
|
import 'unhead/server';
|
|
import 'devalue';
|
|
import 'unhead/utils';
|
|
import './index-BMAjr3Fm.mjs';
|
|
import 'throttle-debounce';
|
|
import 'moment';
|
|
import 'moment-timezone';
|
|
import 'moment-jalaali';
|
|
import 'date-fns';
|
|
import 'date-fns/locale';
|
|
import '@vueuse/gesture';
|
|
import '@headlessui/vue';
|
|
import './index-BWBnVq-W.mjs';
|
|
import 'framesync';
|
|
import 'popmotion';
|
|
import 'style-value-types';
|
|
import './close_light-DbrEdRZI.mjs';
|
|
import 'lodash-es/isEqual.js';
|
|
import 'compute-scroll-into-view';
|
|
import 'lodash-es/cloneDeep.js';
|
|
import 'lodash-es/intersection.js';
|
|
import 'lodash-es/debounce.js';
|
|
import 'lodash-es/omit.js';
|
|
import './FormItemContext-BlKvWASA.mjs';
|
|
import './index-G65aBv4F.mjs';
|
|
import './index-BGahPE0Z.mjs';
|
|
import 'lodash-es/isPlainObject.js';
|
|
import 'resize-observer-polyfill';
|
|
import 'async-validator';
|
|
import 'lodash-es/find.js';
|
|
import './useRefs-BHKrVg4I.mjs';
|
|
import 'dom-align';
|
|
|
|
function useBreakpoint() {
|
|
const screens = shallowRef({});
|
|
useResponsiveObserver();
|
|
return screens;
|
|
}
|
|
function isString(str) {
|
|
return typeof str === "string";
|
|
}
|
|
function noop() {
|
|
}
|
|
const VcStepProps = () => ({
|
|
prefixCls: String,
|
|
itemWidth: String,
|
|
active: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
status: stringType(),
|
|
iconPrefix: String,
|
|
icon: PropTypes.any,
|
|
adjustMarginRight: String,
|
|
stepNumber: Number,
|
|
stepIndex: Number,
|
|
description: PropTypes.any,
|
|
title: PropTypes.any,
|
|
subTitle: PropTypes.any,
|
|
progressDot: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func])),
|
|
tailContent: PropTypes.any,
|
|
icons: PropTypes.shape({
|
|
finish: PropTypes.any,
|
|
error: PropTypes.any
|
|
}).loose,
|
|
onClick: functionType(),
|
|
onStepClick: functionType(),
|
|
stepIcon: functionType(),
|
|
itemRender: functionType(),
|
|
__legacy: booleanType()
|
|
});
|
|
const VcStep = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "Step",
|
|
inheritAttrs: false,
|
|
props: VcStepProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
emit,
|
|
attrs
|
|
} = _ref;
|
|
const onItemClick = (e) => {
|
|
emit("click", e);
|
|
emit("stepClick", props.stepIndex);
|
|
};
|
|
const renderIconNode = (_ref2) => {
|
|
let {
|
|
icon,
|
|
title,
|
|
description
|
|
} = _ref2;
|
|
const {
|
|
prefixCls,
|
|
stepNumber,
|
|
status,
|
|
iconPrefix,
|
|
icons,
|
|
progressDot = slots.progressDot,
|
|
stepIcon = slots.stepIcon
|
|
} = props;
|
|
let iconNode;
|
|
const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
|
|
[`${iconPrefix}icon-${icon}`]: icon && isString(icon),
|
|
[`${iconPrefix}icon-check`]: !icon && status === "finish" && (icons && !icons.finish || !icons),
|
|
[`${iconPrefix}icon-cross`]: !icon && status === "error" && (icons && !icons.error || !icons)
|
|
});
|
|
const iconDot = createVNode("span", {
|
|
"class": `${prefixCls}-icon-dot`
|
|
}, null);
|
|
if (progressDot) {
|
|
if (typeof progressDot === "function") {
|
|
iconNode = createVNode("span", {
|
|
"class": `${prefixCls}-icon`
|
|
}, [progressDot({
|
|
iconDot,
|
|
index: stepNumber - 1,
|
|
status,
|
|
title,
|
|
description,
|
|
prefixCls
|
|
})]);
|
|
} else {
|
|
iconNode = createVNode("span", {
|
|
"class": `${prefixCls}-icon`
|
|
}, [iconDot]);
|
|
}
|
|
} else if (icon && !isString(icon)) {
|
|
iconNode = createVNode("span", {
|
|
"class": `${prefixCls}-icon`
|
|
}, [icon]);
|
|
} else if (icons && icons.finish && status === "finish") {
|
|
iconNode = createVNode("span", {
|
|
"class": `${prefixCls}-icon`
|
|
}, [icons.finish]);
|
|
} else if (icons && icons.error && status === "error") {
|
|
iconNode = createVNode("span", {
|
|
"class": `${prefixCls}-icon`
|
|
}, [icons.error]);
|
|
} else if (icon || status === "finish" || status === "error") {
|
|
iconNode = createVNode("span", {
|
|
"class": iconClassName
|
|
}, null);
|
|
} else {
|
|
iconNode = createVNode("span", {
|
|
"class": `${prefixCls}-icon`
|
|
}, [stepNumber]);
|
|
}
|
|
if (stepIcon) {
|
|
iconNode = stepIcon({
|
|
index: stepNumber - 1,
|
|
status,
|
|
title,
|
|
description,
|
|
node: iconNode
|
|
});
|
|
}
|
|
return iconNode;
|
|
};
|
|
return () => {
|
|
var _a, _b, _c, _d;
|
|
const {
|
|
prefixCls,
|
|
itemWidth,
|
|
active,
|
|
status = "wait",
|
|
tailContent,
|
|
adjustMarginRight,
|
|
disabled,
|
|
title = (_a = slots.title) === null || _a === void 0 ? void 0 : _a.call(slots),
|
|
description = (_b = slots.description) === null || _b === void 0 ? void 0 : _b.call(slots),
|
|
subTitle = (_c = slots.subTitle) === null || _c === void 0 ? void 0 : _c.call(slots),
|
|
icon = (_d = slots.icon) === null || _d === void 0 ? void 0 : _d.call(slots),
|
|
onClick,
|
|
onStepClick
|
|
} = props;
|
|
const mergedStatus = status || "wait";
|
|
const classString = classNames(`${prefixCls}-item`, `${prefixCls}-item-${mergedStatus}`, {
|
|
[`${prefixCls}-item-custom`]: icon,
|
|
[`${prefixCls}-item-active`]: active,
|
|
[`${prefixCls}-item-disabled`]: disabled === true
|
|
});
|
|
const stepItemStyle = {};
|
|
if (itemWidth) {
|
|
stepItemStyle.width = itemWidth;
|
|
}
|
|
if (adjustMarginRight) {
|
|
stepItemStyle.marginRight = adjustMarginRight;
|
|
}
|
|
const accessibilityProps = {
|
|
onClick: onClick || noop
|
|
};
|
|
if (onStepClick && !disabled) {
|
|
accessibilityProps.role = "button";
|
|
accessibilityProps.tabindex = 0;
|
|
accessibilityProps.onClick = onItemClick;
|
|
}
|
|
const stepNode = createVNode("div", _objectSpread(_objectSpread({}, omit(attrs, ["__legacy"])), {}, {
|
|
"class": [classString, attrs.class],
|
|
"style": [attrs.style, stepItemStyle]
|
|
}), [createVNode("div", _objectSpread(_objectSpread({}, accessibilityProps), {}, {
|
|
"class": `${prefixCls}-item-container`
|
|
}), [createVNode("div", {
|
|
"class": `${prefixCls}-item-tail`
|
|
}, [tailContent]), createVNode("div", {
|
|
"class": `${prefixCls}-item-icon`
|
|
}, [renderIconNode({
|
|
icon,
|
|
title,
|
|
description
|
|
})]), createVNode("div", {
|
|
"class": `${prefixCls}-item-content`
|
|
}, [createVNode("div", {
|
|
"class": `${prefixCls}-item-title`
|
|
}, [title, subTitle && createVNode("div", {
|
|
"title": typeof subTitle === "string" ? subTitle : void 0,
|
|
"class": `${prefixCls}-item-subtitle`
|
|
}, [subTitle])]), description && createVNode("div", {
|
|
"class": `${prefixCls}-item-description`
|
|
}, [description])])])]);
|
|
if (props.itemRender) {
|
|
return props.itemRender(stepNode);
|
|
}
|
|
return stepNode;
|
|
};
|
|
}
|
|
});
|
|
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 Steps$1 = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "Steps",
|
|
props: {
|
|
type: PropTypes.string.def("default"),
|
|
prefixCls: PropTypes.string.def("vc-steps"),
|
|
iconPrefix: PropTypes.string.def("vc"),
|
|
direction: PropTypes.string.def("horizontal"),
|
|
labelPlacement: PropTypes.string.def("horizontal"),
|
|
status: stringType("process"),
|
|
size: PropTypes.string.def(""),
|
|
progressDot: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(void 0),
|
|
initial: PropTypes.number.def(0),
|
|
current: PropTypes.number.def(0),
|
|
items: PropTypes.array.def(() => []),
|
|
icons: PropTypes.shape({
|
|
finish: PropTypes.any,
|
|
error: PropTypes.any
|
|
}).loose,
|
|
stepIcon: functionType(),
|
|
isInline: PropTypes.looseBool,
|
|
itemRender: functionType()
|
|
},
|
|
emits: ["change"],
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
emit
|
|
} = _ref;
|
|
const onStepClick = (next) => {
|
|
const {
|
|
current
|
|
} = props;
|
|
if (current !== next) {
|
|
emit("change", next);
|
|
}
|
|
};
|
|
const renderStep = (item, index, legacyRender) => {
|
|
const {
|
|
prefixCls,
|
|
iconPrefix,
|
|
status,
|
|
current,
|
|
initial,
|
|
icons,
|
|
stepIcon = slots.stepIcon,
|
|
isInline,
|
|
itemRender,
|
|
progressDot = slots.progressDot
|
|
} = props;
|
|
const mergedProgressDot = isInline || progressDot;
|
|
const mergedItem = _extends(_extends({}, item), {
|
|
class: ""
|
|
});
|
|
const stepNumber = initial + index;
|
|
const commonProps = {
|
|
active: stepNumber === current,
|
|
stepNumber: stepNumber + 1,
|
|
stepIndex: stepNumber,
|
|
key: stepNumber,
|
|
prefixCls,
|
|
iconPrefix,
|
|
progressDot: mergedProgressDot,
|
|
stepIcon,
|
|
icons,
|
|
onStepClick
|
|
};
|
|
if (status === "error" && index === current - 1) {
|
|
mergedItem.class = `${prefixCls}-next-error`;
|
|
}
|
|
if (!mergedItem.status) {
|
|
if (stepNumber === current) {
|
|
mergedItem.status = status;
|
|
} else if (stepNumber < current) {
|
|
mergedItem.status = "finish";
|
|
} else {
|
|
mergedItem.status = "wait";
|
|
}
|
|
}
|
|
if (isInline) {
|
|
mergedItem.icon = void 0;
|
|
mergedItem.subTitle = void 0;
|
|
}
|
|
if (legacyRender) {
|
|
return legacyRender(_extends(_extends({}, mergedItem), commonProps));
|
|
}
|
|
if (itemRender) {
|
|
mergedItem.itemRender = (stepItem) => itemRender(mergedItem, stepItem);
|
|
}
|
|
return createVNode(VcStep, _objectSpread(_objectSpread(_objectSpread({}, mergedItem), commonProps), {}, {
|
|
"__legacy": false
|
|
}), null);
|
|
};
|
|
const renderStepWithNode = (node, index) => {
|
|
return renderStep(_extends({}, node.props), index, (stepProps) => {
|
|
const stepNode = cloneElement(node, stepProps);
|
|
return stepNode;
|
|
});
|
|
};
|
|
return () => {
|
|
var _a;
|
|
const {
|
|
prefixCls,
|
|
direction,
|
|
type,
|
|
labelPlacement,
|
|
iconPrefix,
|
|
status,
|
|
size,
|
|
current,
|
|
progressDot = slots.progressDot,
|
|
initial,
|
|
icons,
|
|
items,
|
|
isInline,
|
|
itemRender
|
|
} = props, restProps = __rest(props, ["prefixCls", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "initial", "icons", "items", "isInline", "itemRender"]);
|
|
const isNav = type === "navigation";
|
|
const mergedProgressDot = isInline || progressDot;
|
|
const mergedDirection = isInline ? "horizontal" : direction;
|
|
const mergedSize = isInline ? void 0 : size;
|
|
const adjustedLabelPlacement = mergedProgressDot ? "vertical" : labelPlacement;
|
|
const classString = classNames(prefixCls, `${prefixCls}-${direction}`, {
|
|
[`${prefixCls}-${mergedSize}`]: mergedSize,
|
|
[`${prefixCls}-label-${adjustedLabelPlacement}`]: mergedDirection === "horizontal",
|
|
[`${prefixCls}-dot`]: !!mergedProgressDot,
|
|
[`${prefixCls}-navigation`]: isNav,
|
|
[`${prefixCls}-inline`]: isInline
|
|
});
|
|
return createVNode("div", _objectSpread({
|
|
"class": classString
|
|
}, restProps), [items.filter((item) => item).map((item, index) => renderStep(item, index)), filterEmpty((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)).map(renderStepWithNode)]);
|
|
};
|
|
}
|
|
});
|
|
const genStepsCustomIconStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
stepsIconCustomTop,
|
|
stepsIconCustomSize,
|
|
stepsIconCustomFontSize
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-item-custom`]: {
|
|
[`> ${componentCls}-item-container > ${componentCls}-item-icon`]: {
|
|
height: "auto",
|
|
background: "none",
|
|
border: 0,
|
|
[`> ${componentCls}-icon`]: {
|
|
top: stepsIconCustomTop,
|
|
width: stepsIconCustomSize,
|
|
height: stepsIconCustomSize,
|
|
fontSize: stepsIconCustomFontSize,
|
|
lineHeight: `${stepsIconCustomSize}px`
|
|
}
|
|
}
|
|
},
|
|
// Only adjust horizontal customize icon width
|
|
[`&:not(${componentCls}-vertical)`]: {
|
|
[`${componentCls}-item-custom`]: {
|
|
[`${componentCls}-item-icon`]: {
|
|
width: "auto",
|
|
background: "none"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genStepsLabelPlacementStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
stepsIconSize,
|
|
lineHeight,
|
|
stepsSmallIconSize
|
|
} = token;
|
|
return {
|
|
[`&${componentCls}-label-vertical`]: {
|
|
[`${componentCls}-item`]: {
|
|
overflow: "visible",
|
|
"&-tail": {
|
|
marginInlineStart: stepsIconSize / 2 + token.controlHeightLG,
|
|
padding: `${token.paddingXXS}px ${token.paddingLG}px`
|
|
},
|
|
"&-content": {
|
|
display: "block",
|
|
width: (stepsIconSize / 2 + token.controlHeightLG) * 2,
|
|
marginTop: token.marginSM,
|
|
textAlign: "center"
|
|
},
|
|
"&-icon": {
|
|
display: "inline-block",
|
|
marginInlineStart: token.controlHeightLG
|
|
},
|
|
"&-title": {
|
|
paddingInlineEnd: 0,
|
|
paddingInlineStart: 0,
|
|
"&::after": {
|
|
display: "none"
|
|
}
|
|
},
|
|
"&-subtitle": {
|
|
display: "block",
|
|
marginBottom: token.marginXXS,
|
|
marginInlineStart: 0,
|
|
lineHeight
|
|
}
|
|
},
|
|
[`&${componentCls}-small:not(${componentCls}-dot)`]: {
|
|
[`${componentCls}-item`]: {
|
|
"&-icon": {
|
|
marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genStepsNavStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
stepsNavContentMaxWidth,
|
|
stepsNavArrowColor,
|
|
stepsNavActiveColor,
|
|
motionDurationSlow
|
|
} = token;
|
|
return {
|
|
[`&${componentCls}-navigation`]: {
|
|
paddingTop: token.paddingSM,
|
|
[`&${componentCls}-small`]: {
|
|
[`${componentCls}-item`]: {
|
|
"&-container": {
|
|
marginInlineStart: -token.marginSM
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-item`]: {
|
|
overflow: "visible",
|
|
textAlign: "center",
|
|
"&-container": {
|
|
display: "inline-block",
|
|
height: "100%",
|
|
marginInlineStart: -token.margin,
|
|
paddingBottom: token.paddingSM,
|
|
textAlign: "start",
|
|
transition: `opacity ${motionDurationSlow}`,
|
|
[`${componentCls}-item-content`]: {
|
|
maxWidth: stepsNavContentMaxWidth
|
|
},
|
|
[`${componentCls}-item-title`]: _extends(_extends({
|
|
maxWidth: "100%",
|
|
paddingInlineEnd: 0
|
|
}, textEllipsis), {
|
|
"&::after": {
|
|
display: "none"
|
|
}
|
|
})
|
|
},
|
|
[`&:not(${componentCls}-item-active)`]: {
|
|
[`${componentCls}-item-container[role='button']`]: {
|
|
cursor: "pointer",
|
|
"&:hover": {
|
|
opacity: 0.85
|
|
}
|
|
}
|
|
},
|
|
"&:last-child": {
|
|
flex: 1,
|
|
"&::after": {
|
|
display: "none"
|
|
}
|
|
},
|
|
"&::after": {
|
|
position: "absolute",
|
|
top: `calc(50% - ${token.paddingSM / 2}px)`,
|
|
insetInlineStart: "100%",
|
|
display: "inline-block",
|
|
width: token.fontSizeIcon,
|
|
height: token.fontSizeIcon,
|
|
borderTop: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
|
|
borderBottom: "none",
|
|
borderInlineStart: "none",
|
|
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
|
|
transform: "translateY(-50%) translateX(-50%) rotate(45deg)",
|
|
content: '""'
|
|
},
|
|
"&::before": {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
insetInlineStart: "50%",
|
|
display: "inline-block",
|
|
width: 0,
|
|
height: token.lineWidthBold,
|
|
backgroundColor: stepsNavActiveColor,
|
|
transition: `width ${motionDurationSlow}, inset-inline-start ${motionDurationSlow}`,
|
|
transitionTimingFunction: "ease-out",
|
|
content: '""'
|
|
}
|
|
},
|
|
[`${componentCls}-item${componentCls}-item-active::before`]: {
|
|
insetInlineStart: 0,
|
|
width: "100%"
|
|
}
|
|
},
|
|
[`&${componentCls}-navigation${componentCls}-vertical`]: {
|
|
[`> ${componentCls}-item`]: {
|
|
marginInlineEnd: 0,
|
|
"&::before": {
|
|
display: "none"
|
|
},
|
|
[`&${componentCls}-item-active::before`]: {
|
|
top: 0,
|
|
insetInlineEnd: 0,
|
|
insetInlineStart: "unset",
|
|
display: "block",
|
|
width: token.lineWidth * 3,
|
|
height: `calc(100% - ${token.marginLG}px)`
|
|
},
|
|
"&::after": {
|
|
position: "relative",
|
|
insetInlineStart: "50%",
|
|
display: "block",
|
|
width: token.controlHeight * 0.25,
|
|
height: token.controlHeight * 0.25,
|
|
marginBottom: token.marginXS,
|
|
textAlign: "center",
|
|
transform: "translateY(-50%) translateX(-50%) rotate(135deg)"
|
|
},
|
|
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
visibility: "hidden"
|
|
}
|
|
}
|
|
},
|
|
[`&${componentCls}-navigation${componentCls}-horizontal`]: {
|
|
[`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
visibility: "hidden"
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genStepsProgressStyle = (token) => {
|
|
const {
|
|
antCls,
|
|
componentCls
|
|
} = token;
|
|
return {
|
|
[`&${componentCls}-with-progress`]: {
|
|
[`${componentCls}-item`]: {
|
|
paddingTop: token.paddingXXS,
|
|
[`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]: {
|
|
color: token.processIconColor
|
|
}
|
|
},
|
|
[`&${componentCls}-vertical > ${componentCls}-item `]: {
|
|
paddingInlineStart: token.paddingXXS,
|
|
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
top: token.marginXXS,
|
|
insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS
|
|
}
|
|
},
|
|
[`&, &${componentCls}-small`]: {
|
|
[`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
|
|
paddingBottom: token.paddingXXS,
|
|
paddingInlineStart: token.paddingXXS
|
|
}
|
|
},
|
|
[`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS
|
|
},
|
|
[`&${componentCls}-label-vertical`]: {
|
|
[`${componentCls}-item ${componentCls}-item-tail`]: {
|
|
top: token.margin - 2 * token.lineWidth
|
|
}
|
|
},
|
|
[`${componentCls}-item-icon`]: {
|
|
position: "relative",
|
|
[`${antCls}-progress`]: {
|
|
position: "absolute",
|
|
insetBlockStart: (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
|
|
insetInlineStart: (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genStepsProgressDotStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
descriptionWidth,
|
|
lineHeight,
|
|
stepsCurrentDotSize,
|
|
stepsDotSize,
|
|
motionDurationSlow
|
|
} = token;
|
|
return {
|
|
[`&${componentCls}-dot, &${componentCls}-dot${componentCls}-small`]: {
|
|
[`${componentCls}-item`]: {
|
|
"&-title": {
|
|
lineHeight
|
|
},
|
|
"&-tail": {
|
|
top: Math.floor((token.stepsDotSize - token.lineWidth * 3) / 2),
|
|
width: "100%",
|
|
marginTop: 0,
|
|
marginBottom: 0,
|
|
marginInline: `${descriptionWidth / 2}px 0`,
|
|
padding: 0,
|
|
"&::after": {
|
|
width: `calc(100% - ${token.marginSM * 2}px)`,
|
|
height: token.lineWidth * 3,
|
|
marginInlineStart: token.marginSM
|
|
}
|
|
},
|
|
"&-icon": {
|
|
width: stepsDotSize,
|
|
height: stepsDotSize,
|
|
marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2,
|
|
paddingInlineEnd: 0,
|
|
lineHeight: `${stepsDotSize}px`,
|
|
background: "transparent",
|
|
border: 0,
|
|
[`${componentCls}-icon-dot`]: {
|
|
position: "relative",
|
|
float: "left",
|
|
width: "100%",
|
|
height: "100%",
|
|
borderRadius: 100,
|
|
transition: `all ${motionDurationSlow}`,
|
|
/* expand hover area */
|
|
"&::after": {
|
|
position: "absolute",
|
|
top: -token.marginSM,
|
|
insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2,
|
|
width: token.controlHeightLG * 1.5,
|
|
height: token.controlHeight,
|
|
background: "transparent",
|
|
content: '""'
|
|
}
|
|
}
|
|
},
|
|
"&-content": {
|
|
width: descriptionWidth
|
|
},
|
|
[`&-process ${componentCls}-item-icon`]: {
|
|
position: "relative",
|
|
top: (stepsDotSize - stepsCurrentDotSize) / 2,
|
|
width: stepsCurrentDotSize,
|
|
height: stepsCurrentDotSize,
|
|
lineHeight: `${stepsCurrentDotSize}px`,
|
|
background: "none",
|
|
marginInlineStart: (token.descriptionWidth - stepsCurrentDotSize) / 2
|
|
},
|
|
[`&-process ${componentCls}-icon`]: {
|
|
[`&:first-child ${componentCls}-icon-dot`]: {
|
|
insetInlineStart: 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
[`&${componentCls}-vertical${componentCls}-dot`]: {
|
|
[`${componentCls}-item-icon`]: {
|
|
marginTop: (token.controlHeight - stepsDotSize) / 2,
|
|
marginInlineStart: 0,
|
|
background: "none"
|
|
},
|
|
[`${componentCls}-item-process ${componentCls}-item-icon`]: {
|
|
marginTop: (token.controlHeight - stepsCurrentDotSize) / 2,
|
|
top: 0,
|
|
insetInlineStart: (stepsDotSize - stepsCurrentDotSize) / 2,
|
|
marginInlineStart: 0
|
|
},
|
|
// https://github.com/ant-design/ant-design/issues/18354
|
|
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
top: (token.controlHeight - stepsDotSize) / 2,
|
|
insetInlineStart: 0,
|
|
margin: 0,
|
|
padding: `${stepsDotSize + token.paddingXS}px 0 ${token.paddingXS}px`,
|
|
"&::after": {
|
|
marginInlineStart: (stepsDotSize - token.lineWidth) / 2
|
|
}
|
|
},
|
|
[`&${componentCls}-small`]: {
|
|
[`${componentCls}-item-icon`]: {
|
|
marginTop: (token.controlHeightSM - stepsDotSize) / 2
|
|
},
|
|
[`${componentCls}-item-process ${componentCls}-item-icon`]: {
|
|
marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2
|
|
},
|
|
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
top: (token.controlHeightSM - stepsDotSize) / 2
|
|
}
|
|
},
|
|
[`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
|
|
insetInlineStart: 0
|
|
},
|
|
[`${componentCls}-item-content`]: {
|
|
width: "inherit"
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genStepsRTLStyle = (token) => {
|
|
const {
|
|
componentCls
|
|
} = token;
|
|
return {
|
|
[`&${componentCls}-rtl`]: {
|
|
direction: "rtl",
|
|
[`${componentCls}-item`]: {
|
|
"&-subtitle": {
|
|
float: "left"
|
|
}
|
|
},
|
|
// nav
|
|
[`&${componentCls}-navigation`]: {
|
|
[`${componentCls}-item::after`]: {
|
|
transform: "rotate(-45deg)"
|
|
}
|
|
},
|
|
// vertical
|
|
[`&${componentCls}-vertical`]: {
|
|
[`> ${componentCls}-item`]: {
|
|
"&::after": {
|
|
transform: "rotate(225deg)"
|
|
},
|
|
[`${componentCls}-item-icon`]: {
|
|
float: "right"
|
|
}
|
|
}
|
|
},
|
|
// progress-dot
|
|
[`&${componentCls}-dot`]: {
|
|
[`${componentCls}-item-icon ${componentCls}-icon-dot, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot`]: {
|
|
float: "right"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genStepsSmallStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
stepsSmallIconSize,
|
|
// stepsSmallIconMargin,
|
|
fontSizeSM,
|
|
fontSize,
|
|
colorTextDescription
|
|
} = token;
|
|
return {
|
|
[`&${componentCls}-small`]: {
|
|
[`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
|
|
paddingInlineStart: token.paddingSM,
|
|
"&:first-child": {
|
|
paddingInlineStart: 0
|
|
}
|
|
},
|
|
[`${componentCls}-item-icon`]: {
|
|
width: stepsSmallIconSize,
|
|
height: stepsSmallIconSize,
|
|
// margin: stepsSmallIconMargin,
|
|
marginTop: 0,
|
|
marginBottom: 0,
|
|
marginInline: `0 ${token.marginXS}px`,
|
|
fontSize: fontSizeSM,
|
|
lineHeight: `${stepsSmallIconSize}px`,
|
|
textAlign: "center",
|
|
borderRadius: stepsSmallIconSize
|
|
},
|
|
[`${componentCls}-item-title`]: {
|
|
paddingInlineEnd: token.paddingSM,
|
|
fontSize,
|
|
lineHeight: `${stepsSmallIconSize}px`,
|
|
"&::after": {
|
|
top: stepsSmallIconSize / 2
|
|
}
|
|
},
|
|
[`${componentCls}-item-description`]: {
|
|
color: colorTextDescription,
|
|
fontSize
|
|
},
|
|
[`${componentCls}-item-tail`]: {
|
|
top: stepsSmallIconSize / 2 - token.paddingXXS
|
|
},
|
|
[`${componentCls}-item-custom ${componentCls}-item-icon`]: {
|
|
width: "inherit",
|
|
height: "inherit",
|
|
lineHeight: "inherit",
|
|
background: "none",
|
|
border: 0,
|
|
borderRadius: 0,
|
|
[`> ${componentCls}-icon`]: {
|
|
fontSize: stepsSmallIconSize,
|
|
lineHeight: `${stepsSmallIconSize}px`,
|
|
transform: "none"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genStepsVerticalStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
stepsSmallIconSize,
|
|
stepsIconSize
|
|
} = token;
|
|
return {
|
|
[`&${componentCls}-vertical`]: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
[`> ${componentCls}-item`]: {
|
|
display: "block",
|
|
flex: "1 0 auto",
|
|
paddingInlineStart: 0,
|
|
overflow: "visible",
|
|
[`${componentCls}-item-icon`]: {
|
|
float: "left",
|
|
marginInlineEnd: token.margin
|
|
},
|
|
[`${componentCls}-item-content`]: {
|
|
display: "block",
|
|
minHeight: token.controlHeight * 1.5,
|
|
overflow: "hidden"
|
|
},
|
|
[`${componentCls}-item-title`]: {
|
|
lineHeight: `${stepsIconSize}px`
|
|
},
|
|
[`${componentCls}-item-description`]: {
|
|
paddingBottom: token.paddingSM
|
|
}
|
|
},
|
|
[`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
position: "absolute",
|
|
top: 0,
|
|
insetInlineStart: token.stepsIconSize / 2 - token.lineWidth,
|
|
width: token.lineWidth,
|
|
height: "100%",
|
|
padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
|
|
"&::after": {
|
|
width: token.lineWidth,
|
|
height: "100%"
|
|
}
|
|
},
|
|
[`> ${componentCls}-item:not(:last-child) > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
display: "block"
|
|
},
|
|
[` > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-content > ${componentCls}-item-title`]: {
|
|
"&::after": {
|
|
display: "none"
|
|
}
|
|
},
|
|
[`&${componentCls}-small ${componentCls}-item-container`]: {
|
|
[`${componentCls}-item-tail`]: {
|
|
position: "absolute",
|
|
top: 0,
|
|
insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth,
|
|
padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`
|
|
},
|
|
[`${componentCls}-item-title`]: {
|
|
lineHeight: `${stepsSmallIconSize}px`
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genStepsInlineStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
inlineDotSize,
|
|
inlineTitleColor,
|
|
inlineTailColor
|
|
} = token;
|
|
const containerPaddingTop = token.paddingXS + token.lineWidth;
|
|
const titleStyle = {
|
|
[`${componentCls}-item-container ${componentCls}-item-content ${componentCls}-item-title`]: {
|
|
color: inlineTitleColor
|
|
}
|
|
};
|
|
return {
|
|
[`&${componentCls}-inline`]: {
|
|
width: "auto",
|
|
display: "inline-flex",
|
|
[`${componentCls}-item`]: {
|
|
flex: "none",
|
|
"&-container": {
|
|
padding: `${containerPaddingTop}px ${token.paddingXXS}px 0`,
|
|
margin: `0 ${token.marginXXS / 2}px`,
|
|
borderRadius: token.borderRadiusSM,
|
|
cursor: "pointer",
|
|
transition: `background-color ${token.motionDurationMid}`,
|
|
"&:hover": {
|
|
background: token.controlItemBgHover
|
|
},
|
|
[`&[role='button']:hover`]: {
|
|
opacity: 1
|
|
}
|
|
},
|
|
"&-icon": {
|
|
width: inlineDotSize,
|
|
height: inlineDotSize,
|
|
marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
|
|
[`> ${componentCls}-icon`]: {
|
|
top: 0
|
|
},
|
|
[`${componentCls}-icon-dot`]: {
|
|
borderRadius: token.fontSizeSM / 4
|
|
}
|
|
},
|
|
"&-content": {
|
|
width: "auto",
|
|
marginTop: token.marginXS - token.lineWidth
|
|
},
|
|
"&-title": {
|
|
color: inlineTitleColor,
|
|
fontSize: token.fontSizeSM,
|
|
lineHeight: token.lineHeightSM,
|
|
fontWeight: "normal",
|
|
marginBottom: token.marginXXS / 2
|
|
},
|
|
"&-description": {
|
|
display: "none"
|
|
},
|
|
"&-tail": {
|
|
marginInlineStart: 0,
|
|
top: containerPaddingTop + inlineDotSize / 2,
|
|
transform: `translateY(-50%)`,
|
|
"&:after": {
|
|
width: "100%",
|
|
height: token.lineWidth,
|
|
borderRadius: 0,
|
|
marginInlineStart: 0,
|
|
background: inlineTailColor
|
|
}
|
|
},
|
|
[`&:first-child ${componentCls}-item-tail`]: {
|
|
width: "50%",
|
|
marginInlineStart: "50%"
|
|
},
|
|
[`&:last-child ${componentCls}-item-tail`]: {
|
|
display: "block",
|
|
width: "50%"
|
|
},
|
|
"&-wait": _extends({
|
|
[`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
|
|
backgroundColor: token.colorBorderBg,
|
|
border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`
|
|
}
|
|
}, titleStyle),
|
|
"&-finish": _extends({
|
|
[`${componentCls}-item-tail::after`]: {
|
|
backgroundColor: inlineTailColor
|
|
},
|
|
[`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
|
|
backgroundColor: inlineTailColor,
|
|
border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`
|
|
}
|
|
}, titleStyle),
|
|
"&-error": titleStyle,
|
|
"&-active, &-process": _extends({
|
|
[`${componentCls}-item-icon`]: {
|
|
width: inlineDotSize,
|
|
height: inlineDotSize,
|
|
marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
|
|
top: 0
|
|
}
|
|
}, titleStyle),
|
|
[`&:not(${componentCls}-item-active) > ${componentCls}-item-container[role='button']:hover`]: {
|
|
[`${componentCls}-item-title`]: {
|
|
color: inlineTitleColor
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
var StepItemStatusEnum;
|
|
(function(StepItemStatusEnum2) {
|
|
StepItemStatusEnum2["wait"] = "wait";
|
|
StepItemStatusEnum2["process"] = "process";
|
|
StepItemStatusEnum2["finish"] = "finish";
|
|
StepItemStatusEnum2["error"] = "error";
|
|
})(StepItemStatusEnum || (StepItemStatusEnum = {}));
|
|
const genStepsItemStatusStyle = (status, token) => {
|
|
const prefix = `${token.componentCls}-item`;
|
|
const iconColorKey = `${status}IconColor`;
|
|
const titleColorKey = `${status}TitleColor`;
|
|
const descriptionColorKey = `${status}DescriptionColor`;
|
|
const tailColorKey = `${status}TailColor`;
|
|
const iconBgColorKey = `${status}IconBgColor`;
|
|
const iconBorderColorKey = `${status}IconBorderColor`;
|
|
const dotColorKey = `${status}DotColor`;
|
|
return {
|
|
[`${prefix}-${status} ${prefix}-icon`]: {
|
|
backgroundColor: token[iconBgColorKey],
|
|
borderColor: token[iconBorderColorKey],
|
|
[`> ${token.componentCls}-icon`]: {
|
|
color: token[iconColorKey],
|
|
[`${token.componentCls}-icon-dot`]: {
|
|
background: token[dotColorKey]
|
|
}
|
|
}
|
|
},
|
|
[`${prefix}-${status}${prefix}-custom ${prefix}-icon`]: {
|
|
[`> ${token.componentCls}-icon`]: {
|
|
color: token[dotColorKey]
|
|
}
|
|
},
|
|
[`${prefix}-${status} > ${prefix}-container > ${prefix}-content > ${prefix}-title`]: {
|
|
color: token[titleColorKey],
|
|
"&::after": {
|
|
backgroundColor: token[tailColorKey]
|
|
}
|
|
},
|
|
[`${prefix}-${status} > ${prefix}-container > ${prefix}-content > ${prefix}-description`]: {
|
|
color: token[descriptionColorKey]
|
|
},
|
|
[`${prefix}-${status} > ${prefix}-container > ${prefix}-tail::after`]: {
|
|
backgroundColor: token[tailColorKey]
|
|
}
|
|
};
|
|
};
|
|
const genStepsItemStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
motionDurationSlow
|
|
} = token;
|
|
const stepsItemCls = `${componentCls}-item`;
|
|
return _extends(_extends(_extends(_extends(_extends(_extends({
|
|
[stepsItemCls]: {
|
|
position: "relative",
|
|
display: "inline-block",
|
|
flex: 1,
|
|
overflow: "hidden",
|
|
verticalAlign: "top",
|
|
"&:last-child": {
|
|
flex: "none",
|
|
[`> ${stepsItemCls}-container > ${stepsItemCls}-tail, > ${stepsItemCls}-container > ${stepsItemCls}-content > ${stepsItemCls}-title::after`]: {
|
|
display: "none"
|
|
}
|
|
}
|
|
},
|
|
[`${stepsItemCls}-container`]: {
|
|
outline: "none"
|
|
},
|
|
[`${stepsItemCls}-icon, ${stepsItemCls}-content`]: {
|
|
display: "inline-block",
|
|
verticalAlign: "top"
|
|
},
|
|
[`${stepsItemCls}-icon`]: {
|
|
width: token.stepsIconSize,
|
|
height: token.stepsIconSize,
|
|
marginTop: 0,
|
|
marginBottom: 0,
|
|
marginInlineStart: 0,
|
|
marginInlineEnd: token.marginXS,
|
|
fontSize: token.stepsIconFontSize,
|
|
fontFamily: token.fontFamily,
|
|
lineHeight: `${token.stepsIconSize}px`,
|
|
textAlign: "center",
|
|
borderRadius: token.stepsIconSize,
|
|
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
|
transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
|
|
[`${componentCls}-icon`]: {
|
|
position: "relative",
|
|
top: token.stepsIconTop,
|
|
color: token.colorPrimary,
|
|
lineHeight: 1
|
|
}
|
|
},
|
|
[`${stepsItemCls}-tail`]: {
|
|
position: "absolute",
|
|
top: token.stepsIconSize / 2 - token.paddingXXS,
|
|
insetInlineStart: 0,
|
|
width: "100%",
|
|
"&::after": {
|
|
display: "inline-block",
|
|
width: "100%",
|
|
height: token.lineWidth,
|
|
background: token.colorSplit,
|
|
borderRadius: token.lineWidth,
|
|
transition: `background ${motionDurationSlow}`,
|
|
content: '""'
|
|
}
|
|
},
|
|
[`${stepsItemCls}-title`]: {
|
|
position: "relative",
|
|
display: "inline-block",
|
|
paddingInlineEnd: token.padding,
|
|
color: token.colorText,
|
|
fontSize: token.fontSizeLG,
|
|
lineHeight: `${token.stepsTitleLineHeight}px`,
|
|
"&::after": {
|
|
position: "absolute",
|
|
top: token.stepsTitleLineHeight / 2,
|
|
insetInlineStart: "100%",
|
|
display: "block",
|
|
width: 9999,
|
|
height: token.lineWidth,
|
|
background: token.processTailColor,
|
|
content: '""'
|
|
}
|
|
},
|
|
[`${stepsItemCls}-subtitle`]: {
|
|
display: "inline",
|
|
marginInlineStart: token.marginXS,
|
|
color: token.colorTextDescription,
|
|
fontWeight: "normal",
|
|
fontSize: token.fontSize
|
|
},
|
|
[`${stepsItemCls}-description`]: {
|
|
color: token.colorTextDescription,
|
|
fontSize: token.fontSize
|
|
}
|
|
}, genStepsItemStatusStyle(StepItemStatusEnum.wait, token)), genStepsItemStatusStyle(StepItemStatusEnum.process, token)), {
|
|
[`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: {
|
|
fontWeight: token.fontWeightStrong
|
|
}
|
|
}), genStepsItemStatusStyle(StepItemStatusEnum.finish, token)), genStepsItemStatusStyle(StepItemStatusEnum.error, token)), {
|
|
[`${stepsItemCls}${componentCls}-next-error > ${componentCls}-item-title::after`]: {
|
|
background: token.colorError
|
|
},
|
|
[`${stepsItemCls}-disabled`]: {
|
|
cursor: "not-allowed"
|
|
}
|
|
});
|
|
};
|
|
const genStepsClickableStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
motionDurationSlow
|
|
} = token;
|
|
return {
|
|
[`& ${componentCls}-item`]: {
|
|
[`&:not(${componentCls}-item-active)`]: {
|
|
[`& > ${componentCls}-item-container[role='button']`]: {
|
|
cursor: "pointer",
|
|
[`${componentCls}-item`]: {
|
|
[`&-title, &-subtitle, &-description, &-icon ${componentCls}-icon`]: {
|
|
transition: `color ${motionDurationSlow}`
|
|
}
|
|
},
|
|
"&:hover": {
|
|
[`${componentCls}-item`]: {
|
|
[`&-title, &-subtitle, &-description`]: {
|
|
color: token.colorPrimary
|
|
}
|
|
}
|
|
}
|
|
},
|
|
[`&:not(${componentCls}-item-process)`]: {
|
|
[`& > ${componentCls}-item-container[role='button']:hover`]: {
|
|
[`${componentCls}-item`]: {
|
|
"&-icon": {
|
|
borderColor: token.colorPrimary,
|
|
[`${componentCls}-icon`]: {
|
|
color: token.colorPrimary
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
[`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: {
|
|
[`${componentCls}-item`]: {
|
|
paddingInlineStart: token.padding,
|
|
whiteSpace: "nowrap",
|
|
"&:first-child": {
|
|
paddingInlineStart: 0
|
|
},
|
|
[`&:last-child ${componentCls}-item-title`]: {
|
|
paddingInlineEnd: 0
|
|
},
|
|
"&-tail": {
|
|
display: "none"
|
|
},
|
|
"&-description": {
|
|
maxWidth: token.descriptionWidth,
|
|
whiteSpace: "normal"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genStepsStyle = (token) => {
|
|
const {
|
|
componentCls
|
|
} = token;
|
|
return {
|
|
[componentCls]: _extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), {
|
|
display: "flex",
|
|
width: "100%",
|
|
fontSize: 0,
|
|
textAlign: "initial"
|
|
}), genStepsItemStyle(token)), genStepsClickableStyle(token)), genStepsCustomIconStyle(token)), genStepsSmallStyle(token)), genStepsVerticalStyle(token)), genStepsLabelPlacementStyle(token)), genStepsProgressDotStyle(token)), genStepsNavStyle(token)), genStepsRTLStyle(token)), genStepsProgressStyle(token)), genStepsInlineStyle(token))
|
|
};
|
|
};
|
|
const useStyle = genComponentStyleHook("Steps", (token) => {
|
|
const {
|
|
wireframe,
|
|
colorTextDisabled,
|
|
fontSizeHeading3,
|
|
fontSize,
|
|
controlHeight,
|
|
controlHeightLG,
|
|
colorTextLightSolid,
|
|
colorText,
|
|
colorPrimary,
|
|
colorTextLabel,
|
|
colorTextDescription,
|
|
colorTextQuaternary,
|
|
colorFillContent,
|
|
controlItemBgActive,
|
|
colorError,
|
|
colorBgContainer,
|
|
colorBorderSecondary
|
|
} = token;
|
|
const stepsIconSize = token.controlHeight;
|
|
const processTailColor = token.colorSplit;
|
|
const stepsToken = merge(token, {
|
|
// Steps variable default.less
|
|
processTailColor,
|
|
stepsNavArrowColor: colorTextDisabled,
|
|
stepsIconSize,
|
|
stepsIconCustomSize: stepsIconSize,
|
|
stepsIconCustomTop: 0,
|
|
stepsIconCustomFontSize: controlHeightLG / 2,
|
|
stepsIconTop: -0.5,
|
|
stepsIconFontSize: fontSize,
|
|
stepsTitleLineHeight: controlHeight,
|
|
stepsSmallIconSize: fontSizeHeading3,
|
|
stepsDotSize: controlHeight / 4,
|
|
stepsCurrentDotSize: controlHeightLG / 4,
|
|
stepsNavContentMaxWidth: "auto",
|
|
// Steps component less variable
|
|
processIconColor: colorTextLightSolid,
|
|
processTitleColor: colorText,
|
|
processDescriptionColor: colorText,
|
|
processIconBgColor: colorPrimary,
|
|
processIconBorderColor: colorPrimary,
|
|
processDotColor: colorPrimary,
|
|
waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
|
|
waitTitleColor: colorTextDescription,
|
|
waitDescriptionColor: colorTextDescription,
|
|
waitTailColor: processTailColor,
|
|
waitIconBgColor: wireframe ? colorBgContainer : colorFillContent,
|
|
waitIconBorderColor: wireframe ? colorTextDisabled : "transparent",
|
|
waitDotColor: colorTextDisabled,
|
|
finishIconColor: colorPrimary,
|
|
finishTitleColor: colorText,
|
|
finishDescriptionColor: colorTextDescription,
|
|
finishTailColor: colorPrimary,
|
|
finishIconBgColor: wireframe ? colorBgContainer : controlItemBgActive,
|
|
finishIconBorderColor: wireframe ? colorPrimary : controlItemBgActive,
|
|
finishDotColor: colorPrimary,
|
|
errorIconColor: colorTextLightSolid,
|
|
errorTitleColor: colorError,
|
|
errorDescriptionColor: colorError,
|
|
errorTailColor: processTailColor,
|
|
errorIconBgColor: colorError,
|
|
errorIconBorderColor: colorError,
|
|
errorDotColor: colorError,
|
|
stepsNavActiveColor: colorPrimary,
|
|
stepsProgressSize: controlHeightLG,
|
|
// Steps inline variable
|
|
inlineDotSize: 6,
|
|
inlineTitleColor: colorTextQuaternary,
|
|
inlineTailColor: colorBorderSecondary
|
|
});
|
|
return [genStepsStyle(stepsToken)];
|
|
}, {
|
|
descriptionWidth: 140
|
|
});
|
|
const stepsProps = () => ({
|
|
prefixCls: String,
|
|
iconPrefix: String,
|
|
current: Number,
|
|
initial: Number,
|
|
percent: Number,
|
|
responsive: booleanType(),
|
|
items: arrayType(),
|
|
labelPlacement: stringType(),
|
|
status: stringType(),
|
|
size: stringType(),
|
|
direction: stringType(),
|
|
progressDot: someType([Boolean, Function]),
|
|
type: stringType(),
|
|
onChange: functionType(),
|
|
"onUpdate:current": functionType()
|
|
});
|
|
const Steps = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "ASteps",
|
|
inheritAttrs: false,
|
|
props: initDefaultProps(stepsProps(), {
|
|
current: 0,
|
|
responsive: true,
|
|
labelPlacement: "horizontal"
|
|
}),
|
|
slots: Object,
|
|
// emits: ['update:current', 'change'],
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots,
|
|
emit
|
|
} = _ref;
|
|
const {
|
|
prefixCls,
|
|
direction: rtlDirection,
|
|
configProvider
|
|
} = useConfigInject("steps", props);
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
const [, token] = useToken();
|
|
const screens = useBreakpoint();
|
|
const direction = computed(() => props.responsive && screens.value.xs ? "vertical" : props.direction);
|
|
const iconPrefix = computed(() => configProvider.getPrefixCls("", props.iconPrefix));
|
|
const handleChange = (current) => {
|
|
emit("update:current", current);
|
|
emit("change", current);
|
|
};
|
|
const isInline = computed(() => props.type === "inline");
|
|
const mergedPercent = computed(() => isInline.value ? void 0 : props.percent);
|
|
const stepIconRender = (_ref2) => {
|
|
let {
|
|
node,
|
|
status
|
|
} = _ref2;
|
|
if (status === "process" && props.percent !== void 0) {
|
|
const progressWidth = props.size === "small" ? token.value.controlHeight : token.value.controlHeightLG;
|
|
const iconWithProgress = createVNode("div", {
|
|
"class": `${prefixCls.value}-progress-icon`
|
|
}, [createVNode(__nuxt_component_2$1, {
|
|
"type": "circle",
|
|
"percent": mergedPercent.value,
|
|
"size": progressWidth,
|
|
"strokeWidth": 4,
|
|
"format": () => null
|
|
}, null), node]);
|
|
return iconWithProgress;
|
|
}
|
|
return node;
|
|
};
|
|
const icons = computed(() => ({
|
|
finish: createVNode(CheckOutlined, {
|
|
"class": `${prefixCls.value}-finish-icon`
|
|
}, null),
|
|
error: createVNode(CloseOutlined, {
|
|
"class": `${prefixCls.value}-error-icon`
|
|
}, null)
|
|
}));
|
|
return () => {
|
|
const stepsClassName = classNames({
|
|
[`${prefixCls.value}-rtl`]: rtlDirection.value === "rtl",
|
|
[`${prefixCls.value}-with-progress`]: mergedPercent.value !== void 0
|
|
}, attrs.class, hashId.value);
|
|
const itemRender = (item, stepItem) => item.description ? createVNode(__nuxt_component_2, {
|
|
"title": item.description
|
|
}, {
|
|
default: () => [stepItem]
|
|
}) : stepItem;
|
|
return wrapSSR(createVNode(Steps$1, _objectSpread(_objectSpread(_objectSpread({
|
|
"icons": icons.value
|
|
}, attrs), omit(props, ["percent", "responsive"])), {}, {
|
|
"items": props.items,
|
|
"direction": direction.value,
|
|
"prefixCls": prefixCls.value,
|
|
"iconPrefix": iconPrefix.value,
|
|
"class": stepsClassName,
|
|
"onChange": handleChange,
|
|
"isInline": isInline.value,
|
|
"itemRender": isInline.value ? itemRender : void 0
|
|
}), _extends({
|
|
stepIcon: stepIconRender
|
|
}, slots)));
|
|
};
|
|
}
|
|
});
|
|
const Step = defineComponent(_extends(_extends({
|
|
compatConfig: {
|
|
MODE: 3
|
|
}
|
|
}, VcStep), {
|
|
name: "AStep",
|
|
props: VcStepProps()
|
|
}));
|
|
const __nuxt_component_1 = _extends(Steps, {
|
|
Step,
|
|
install: (app) => {
|
|
app.component(Steps.name, Steps);
|
|
app.component(Step.name, Step);
|
|
return app;
|
|
}
|
|
});
|
|
const getOneOrder = async (id) => {
|
|
return await myAxios.get(`/order/${id}`);
|
|
};
|
|
const updateStatus = async (id, obj) => supabaseService.fetch("orders_status", "update", {
|
|
data: obj,
|
|
field: "id",
|
|
value: id
|
|
});
|
|
const createStatus = async (obj) => {
|
|
return await myAxios.post(`/order/change-status/${obj.order_id}`, { title: obj.title });
|
|
};
|
|
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
__name: "OrderProductCard",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
item: {},
|
|
isLast: { type: Boolean }
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
const config = useConfigStore();
|
|
const {
|
|
originalImage,
|
|
qty,
|
|
price,
|
|
title,
|
|
hasDiscount,
|
|
originalPrice
|
|
} = useProduct(props.item.product, props.item.variant);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_a_badge = Badge;
|
|
const _component_a_divider = __nuxt_component_1$1;
|
|
const _directive_lazy = resolveDirective("lazy");
|
|
let _temp0;
|
|
_push(`<div${ssrRenderAttrs(_attrs)}><div class="flex">`);
|
|
_push(ssrRenderComponent(_component_a_badge, {
|
|
count: __props.item.qty
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div class="h-6rem w-6rem"${_scopeId}><img${ssrRenderAttrs(_temp0 = mergeProps({
|
|
alt: "instagram",
|
|
class: "bg-zinc-1 w-6rem aspect-square rounded-2xl object-contain ms-2"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(originalImage), loading: unref(previewImg), error: unref(previewImg) })))}${_scopeId}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ""}</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "h-6rem w-6rem" }, [
|
|
withDirectives(createVNode("img", {
|
|
alt: "instagram",
|
|
class: "bg-zinc-1 w-6rem aspect-square rounded-2xl object-contain ms-2"
|
|
}, null, 512), [
|
|
[_directive_lazy, { src: unref(originalImage), loading: unref(previewImg), error: unref(previewImg) }]
|
|
])
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`<div class="w-full !w-3/4"><div class="flex items-center justify-between w-full"><div class="ps-4 pt-2 w-full"><div class="font-bold truncate text-sm">${ssrInterpolate(unref(title))}</div><div class="flex"><!--[-->`);
|
|
ssrRenderList(__props.item.variant?.variant_attribute_values, (val, index) => {
|
|
_push(`<div class="flex items-baseline ms1"><div>${ssrInterpolate(val?.attribute_values?.value)}</div>`);
|
|
if (__props.item?.variant?.variant_attribute_values.length - 1 !== index) {
|
|
_push(`<div>,</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
});
|
|
_push(`<!--]--></div><div class="flex justify-between"><div class="flex gap-1 items-baseline text-xs mt2"><div class="font-bold">${ssrInterpolate(__props.item.qty)}</div><div class="text-xs">${ssrInterpolate(unref(config).useString("item2"))}</div></div><div class="flex flex-col font-bold me-3">`);
|
|
if (unref(hasDiscount)) {
|
|
_push(`<span class="font-medium text-gray-400 text-xs line-through">${ssrInterpolate(unref(usePrice)(unref(originalPrice), true, ""))}</span>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<span class="text-sm">${ssrInterpolate(unref(usePrice)(unref(price), true, ""))}</span><span class="text-xs text-end">${ssrInterpolate(unref(config).priceUnit)}</span></div></div></div></div><div class="px-3">`);
|
|
_push(ssrRenderComponent(_component_a_divider, { class: "my-2" }, null, _parent));
|
|
_push(`</div><div class="ps-4 flex items-baseline"><div class="font-bold">${ssrInterpolate(unref(usePrice)(__props.item.qty * unref(price), true, ""))}</div><div class="text-sm text-end font-bold ms-1">${ssrInterpolate(unref(config).priceUnit)}</div>`);
|
|
if (unref(hasDiscount)) {
|
|
_push(`<div class="font-medium text-gray-400 text-xs line-through ms-5">${ssrInterpolate(unref(usePrice)(__props.item.qty * unref(originalPrice)))}</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div></div>`);
|
|
if (!__props.isLast) {
|
|
_push(`<div class="py-4 mx-3"><div class="h-2px bg-gray-3"></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$4 = _sfc_main$4.setup;
|
|
_sfc_main$4.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/Cards/OrderProductCard.vue");
|
|
return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
|
|
};
|
|
const ProductCard = Object.assign(_sfc_main$4, { __name: "CardsOrderProductCard" });
|
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
__name: "StatusAddEdit",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
open: { type: Boolean, default: false },
|
|
isEdit: { type: Boolean, default: false },
|
|
data: {},
|
|
orderId: {}
|
|
},
|
|
emits: ["update:open", "update:isEdit", "success"],
|
|
setup(__props, { emit: __emit }) {
|
|
const formFields = reactive({});
|
|
const formRef = ref();
|
|
const config = useConfigStore();
|
|
const sheetRef = ref(null);
|
|
const props = __props;
|
|
const emits = __emit;
|
|
const addForm = () => {
|
|
Object.assign(formFields, {
|
|
title: ""
|
|
});
|
|
};
|
|
const editForm = () => {
|
|
console.log(props.data);
|
|
Object.assign(formFields, props.data);
|
|
};
|
|
const handleSubmit = async () => {
|
|
formRef.value.validateFields().then(async () => {
|
|
try {
|
|
loading.value = true;
|
|
formFields.order_id = props.orderId;
|
|
if (props.isEdit && props.data) {
|
|
const data = props.data;
|
|
await updateStatus(data.id, formFields);
|
|
emits("update:isEdit", false);
|
|
api$1.success(config.useString("editedSuccessfully"));
|
|
} else {
|
|
await createStatus(formFields);
|
|
api$1.success(config.useString("addedSuccessfully"));
|
|
}
|
|
emits("update:visible", false);
|
|
emits("success");
|
|
await closeSheet();
|
|
} catch (e) {
|
|
loading.value = false;
|
|
console.log("error", e);
|
|
}
|
|
});
|
|
};
|
|
watch(props, (value) => {
|
|
if (value.open) {
|
|
openSheet();
|
|
} else {
|
|
closeSheet();
|
|
}
|
|
if (props.isEdit) {
|
|
editForm();
|
|
} else {
|
|
addForm();
|
|
}
|
|
});
|
|
async function openSheet() {
|
|
await nextTick();
|
|
await sheetRef.value?.setOpen();
|
|
}
|
|
async function closeSheet() {
|
|
await nextTick();
|
|
await sheetRef.value?.setClose();
|
|
emits("update:open", false);
|
|
}
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_a_form = Form;
|
|
const _component_a_form_item = __nuxt_component_1$2;
|
|
_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 data-v-8528a6ef${_scopeId}><div bg-gray-500 h-2px w-2.5rem data-v-8528a6ef${_scopeId}></div><div class="flex justify-center" data-v-8528a6ef${_scopeId}><div mt-3 font-semibold data-v-8528a6ef${_scopeId}>${ssrInterpolate(__props.isEdit ? unref(config).useString("editStatus") : unref(config).useString("addStatus"))}</div><div class="absolute end-0" data-v-8528a6ef${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_sfc_main$5, {
|
|
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(__props.isEdit ? unref(config).useString("editStatus") : unref(config).useString("addStatus")), 1),
|
|
createVNode("div", { class: "absolute end-0" }, [
|
|
createVNode(_sfc_main$5, {
|
|
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" data-v-8528a6ef${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_component_a_form, {
|
|
model: formFields,
|
|
ref_key: "formRef",
|
|
ref: formRef
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_component_a_form_item, {
|
|
label: unref(config).useString("title"),
|
|
name: "title"
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(BasicInput, {
|
|
value: formFields.title,
|
|
"onUpdate:value": ($event) => formFields.title = $event,
|
|
"place-holder": unref(config).useString("title")
|
|
}, null, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(BasicInput, {
|
|
value: formFields.title,
|
|
"onUpdate:value": ($event) => formFields.title = $event,
|
|
"place-holder": unref(config).useString("title")
|
|
}, null, 8, ["value", "onUpdate:value", "place-holder"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(_component_a_form_item, {
|
|
label: unref(config).useString("title"),
|
|
name: "title"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(BasicInput, {
|
|
value: formFields.title,
|
|
"onUpdate:value": ($event) => formFields.title = $event,
|
|
"place-holder": unref(config).useString("title")
|
|
}, null, 8, ["value", "onUpdate:value", "place-holder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["label"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(BasicButton, {
|
|
type: "primary",
|
|
block: "",
|
|
onClick: handleSubmit
|
|
}, {
|
|
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>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "max-h-85vh overflow-y-auto px-2 mt3 pb-10" }, [
|
|
createVNode(_component_a_form, {
|
|
model: formFields,
|
|
ref_key: "formRef",
|
|
ref: formRef
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_a_form_item, {
|
|
label: unref(config).useString("title"),
|
|
name: "title"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(BasicInput, {
|
|
value: formFields.title,
|
|
"onUpdate:value": ($event) => formFields.title = $event,
|
|
"place-holder": unref(config).useString("title")
|
|
}, null, 8, ["value", "onUpdate:value", "place-holder"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["label"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["model"]),
|
|
createVNode(BasicButton, {
|
|
type: "primary",
|
|
block: "",
|
|
onClick: handleSubmit
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("submit")), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
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/StatusAddEdit.vue");
|
|
return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
|
|
};
|
|
const StatusAddEdit = /* @__PURE__ */ Object.assign(_export_sfc(_sfc_main$3, [["__scopeId", "data-v-8528a6ef"]]), { __name: "StatusAddEdit" });
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
__name: "OrderDetail",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const router = useRouter$1();
|
|
const userStore = useUserStore();
|
|
const order = ref(null);
|
|
const showMore = ref(false);
|
|
const visible = ref(false);
|
|
const isEdit = ref(false);
|
|
const data = ref({});
|
|
const orderStatus = ref([]);
|
|
const id = computed(() => {
|
|
return parseInt(router.currentRoute.value.params.id);
|
|
});
|
|
const config = useConfigStore();
|
|
const orderType = computed(() => {
|
|
switch (order.value?.payment_type) {
|
|
case "zarinpall":
|
|
return config.useString("zarinpal");
|
|
case "home":
|
|
return config.useString("inpart");
|
|
case "snappay":
|
|
return config.useString("snappay");
|
|
case "zibal":
|
|
return config.useString("zibal");
|
|
case "sepal":
|
|
return config.useString("sepal");
|
|
default:
|
|
return "";
|
|
}
|
|
});
|
|
const address = computed(() => {
|
|
if (order.value) {
|
|
const convert = order.value?.address?.payload;
|
|
return `${convert?.province ?? ""}-${convert?.city ?? ""}-${convert?.address ?? ""}`;
|
|
} else {
|
|
return "";
|
|
}
|
|
});
|
|
const getOrder = async () => {
|
|
try {
|
|
loading.value = true;
|
|
order.value = await getOneOrder(id.value);
|
|
orderStatus.value = order.value?.orders_status?.map((x) => {
|
|
return {
|
|
title: x.title,
|
|
description: toJalali(x.created_at ?? "_")
|
|
};
|
|
});
|
|
} catch (e) {
|
|
console.log(e);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
computed(() => {
|
|
return usePrice(order.value?.total_price + (order.value?.profit ?? 0), true, "");
|
|
});
|
|
computed(() => {
|
|
return usePrice(order.value?.profit ?? 0, true, "");
|
|
});
|
|
computed(() => {
|
|
return usePrice(order.value?.total_price, true, "");
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_a_divider = __nuxt_component_1$1;
|
|
const _component_a_steps = __nuxt_component_1;
|
|
const _directive_lazy = resolveDirective("lazy");
|
|
let _temp0, _temp1;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "pb-10vh" }, _attrs))}>`);
|
|
if (unref(config).APP_TYPE === "multi" || !unref(config).isSeller) {
|
|
_push(`<div class="mx-3"><div class="flex items-center mb-5 mt-2 gap-3"><img${ssrRenderAttrs(_temp0 = mergeProps({
|
|
alt: "instagram",
|
|
class: "w-3rem aspect-square rounded-full"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(config).useDataStorage(order.value?.store?.avatar ?? ""), loading: unref(empty_user), error: unref(empty_user) })))}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ""}<div class="h-full"><div class="font-bold">${ssrInterpolate(order.value?.store?.name ?? "")}</div><div class="text-sm text-gray-4">${ssrInterpolate(unref(config).useString("seller"))}</div></div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (unref(config).APP_TYPE === "multi" || unref(config).isSeller) {
|
|
_push(`<div class="mx-3 mt-10"><div class="flex items-center mb-5 mt-2 gap-3"><img${ssrRenderAttrs(_temp1 = mergeProps({
|
|
alt: "instagram",
|
|
class: "w-3rem aspect-square rounded-full"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(config).useDataStorage(order.value?.user?.avatar ?? ""), loading: unref(empty_user), error: unref(empty_user) })))}>${"textContent" in _temp1 ? ssrInterpolate(_temp1.textContent) : _temp1.innerHTML ?? ""}<div class="h-full"><div class="font-bold">${ssrInterpolate(order.value?.user?.name ?? "")}</div><div class="text-sm text-gray-4">${ssrInterpolate(order.value?.user?.phone)}</div><div class="text-sm text-gray-4">${ssrInterpolate(unref(config).useString("customer"))}</div></div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (unref(config).APP_TYPE === "multi") {
|
|
_push(ssrRenderComponent(_component_a_divider, null, null, _parent));
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<div class="mx-3 mt-2"><div class="font-semibold text-xl mb-5">${ssrInterpolate(unref(config).useString("orderSummery"))}</div>`);
|
|
if (!showMore.value) {
|
|
_push(`<div><!--[-->`);
|
|
ssrRenderList(order.value?.order_items?.slice(0, 3), (item, index) => {
|
|
_push(ssrRenderComponent(ProductCard, {
|
|
key: item.product.id,
|
|
item,
|
|
isLast: (order.value?.order_items?.length ?? 0) < 3 ? (order.value?.order_items?.length ?? 0) - 1 === index : index === 2
|
|
}, null, _parent));
|
|
});
|
|
_push(`<!--]--></div>`);
|
|
} else {
|
|
_push(`<div><!--[-->`);
|
|
ssrRenderList(order.value?.order_items, (item, index) => {
|
|
_push(ssrRenderComponent(ProductCard, {
|
|
key: item.product.id,
|
|
item,
|
|
isLast: (order.value?.order_items?.length ?? 0) - 1 === index
|
|
}, null, _parent));
|
|
});
|
|
_push(`<!--]--></div>`);
|
|
}
|
|
if ((order.value?.order_items?.length ?? 0) > 3) {
|
|
_push(`<div class="w-full mt-5 text-end">`);
|
|
if (showMore.value) {
|
|
_push(ssrRenderComponent(BasicButton, {
|
|
onClick: ($event) => showMore.value = !showMore.value,
|
|
size: "small"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`${ssrInterpolate(unref(config).useString("less"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("less")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
} else {
|
|
_push(ssrRenderComponent(BasicButton, {
|
|
onClick: ($event) => showMore.value = !showMore.value,
|
|
size: "small"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`${ssrInterpolate(unref(config).useString("more"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("more")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
}
|
|
_push(`</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
_push(ssrRenderComponent(_component_a_divider, null, null, _parent));
|
|
_push(`<div class="mx-3"><div class="font-semibold text-xl mb-5">${ssrInterpolate(unref(config).useString("paymentDetail"))}</div><div><div class="flex justify-between items-baseline"><div class="text-sm">${ssrInterpolate(unref(config).useString("totalPrice"))}:</div><div class="flex gap-1 items-baseline"><div class="font-bold">${ssrInterpolate(unref(usePrice)(order.value?.total_price ?? 0, true, ""))}</div><div class="text-xs">${ssrInterpolate(unref(config).priceUnit)}</div></div></div><div class="flex justify-between items-baseline mt-2"><div class="text-sm">${ssrInterpolate(unref(config).useString("totalItems"))}:</div><div class="flex gap-1 items-baseline"><div class="font-bold">${ssrInterpolate(order.value?.total_qty ?? 0)}</div><div class="text-xs">${ssrInterpolate(unref(config).useString("countProducts"))}</div></div></div>`);
|
|
if (order.value?.sum_gold !== 0) {
|
|
_push(`<div class="flex justify-between items-baseline mt-2"><div class="text-sm">${ssrInterpolate(unref(config).useString("totalGoldWeight"))}:</div><div class="flex gap-1 items-baseline"><div class="font-bold">${ssrInterpolate(order.value?.sum_gold)}</div><div class="text-xs">${ssrInterpolate(unref(config).useString("gram"))}</div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (order.value?.sum_silver !== 0) {
|
|
_push(`<div class="flex justify-between items-baseline mt-2"><div class="text-sm">${ssrInterpolate(unref(config).useString("totalSilverWeight"))}:</div><div class="flex gap-1 items-baseline"><div class="font-bold">${ssrInterpolate(order.value?.sum_silver)}</div><div class="text-xs">${ssrInterpolate(unref(config).useString("gram"))}</div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<div class="flex justify-between items-baseline mt-2"><div class="text-sm">${ssrInterpolate(unref(config).useString("profit"))}:</div><div class="flex gap-1 items-baseline"><div class="font-bold">${ssrInterpolate(unref(usePrice)(order.value?.total_discounts ?? 0, true, ""))}</div><div class="text-xs">${ssrInterpolate(unref(config).priceUnit)}</div></div></div><div class="flex justify-between items-baseline mt-2"><div class="text-sm">${ssrInterpolate(unref(config).useString("paymentType"))}:</div><div class="flex gap-1 items-baseline"><div class="font-bold">${ssrInterpolate(orderType.value)}</div></div></div></div><div class="flex flex-col items-center mt-5"><div>${ssrInterpolate(unref(config).useString("amountPaid"))}</div><div class="flex gap-1 items-baseline mt-2"><span class="font-bold text-xl">${ssrInterpolate(unref(usePrice)(order.value?.discount_total_price ?? 0, true, ""))}</span><span>${ssrInterpolate(unref(config).priceUnit)}</span></div></div></div>`);
|
|
_push(ssrRenderComponent(_component_a_divider, null, null, _parent));
|
|
_push(`<div class="mx-3"><div class="font-semibold text-xl mb-5">${ssrInterpolate(unref(config).useString("address"))}</div><div class="text-xs">${ssrInterpolate(address.value)}</div></div>`);
|
|
_push(ssrRenderComponent(_component_a_divider, null, null, _parent));
|
|
_push(`<div class="mx-3"><div class="font-semibold text-xl mb-5">${ssrInterpolate(unref(config).useString("status"))}</div>`);
|
|
_push(ssrRenderComponent(_component_a_steps, {
|
|
direction: "vertical",
|
|
size: "small",
|
|
current: orderStatus.value.length - 1,
|
|
items: orderStatus.value
|
|
}, null, _parent));
|
|
if (unref(config).isSeller && order.value?.store_id === unref(userStore).user?.id) {
|
|
_push(`<div class="flex items-center"><div class="rounded-full p-1 bg-primary">`);
|
|
_push(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:add",
|
|
"color-white": "",
|
|
size: "17"
|
|
}, null, _parent));
|
|
_push(`</div><div class="text-xs ms-4">${ssrInterpolate(unref(config).useString("addStatus"))}</div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
_push(ssrRenderComponent(StatusAddEdit, {
|
|
open: visible.value,
|
|
"onUpdate:open": ($event) => visible.value = $event,
|
|
"is-edit": isEdit.value,
|
|
"onUpdate:isEdit": ($event) => isEdit.value = $event,
|
|
data: data.value,
|
|
onSuccess: getOrder,
|
|
"order-id": id.value
|
|
}, null, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
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/OrderDetail.vue");
|
|
return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
|
|
};
|
|
const OrderDetail = Object.assign(_sfc_main$2, { __name: "OrderDetail" });
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "index",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const router = useRouter$1();
|
|
ref(null);
|
|
computed(() => {
|
|
return parseInt(router.currentRoute.value.params.id);
|
|
});
|
|
const config = useConfigStore();
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(_attrs)}><div class="${ssrRenderClass([!unref(config).isNightStore ? "bg-header-color" : "bg-header-color-dark ", "sticky z-10 top-0 w-inherit right-0 left-0"])}"><div class="flex justify-between w-full p-4"><div class="flex items-center gap-4">`);
|
|
_push(ssrRenderComponent(BasicIconOld, {
|
|
icon: !unref(config).isRTL ? "vuesax-linear:arrow-left" : "vuesax-linear:arrow-right",
|
|
onClick: ($event) => unref(router).back()
|
|
}, null, _parent));
|
|
_push(`<div class="font-semibold text-xl">${ssrInterpolate(unref(config).useString("orderDetail"))}</div></div></div></div>`);
|
|
_push(ssrRenderComponent(OrderDetail, null, null, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
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/order/index.vue");
|
|
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "[id]",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(ssrRenderComponent(_sfc_main$1, _attrs, null, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/user/order/[id].vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|