3933 lines
128 KiB
JavaScript
3933 lines
128 KiB
JavaScript
import { b as buildAssetsURL } from '../_/nitro.mjs';
|
|
import { defineComponent, ref, unref, withCtx, createVNode, createBlock, createCommentVNode, openBlock, computed, reactive, watch, withAsyncContext, resolveDirective, toDisplayString, mergeProps, customRef, toValue, nextTick, createTextVNode, Fragment, renderList, getCurrentScope, onScopeDispose, renderSlot, shallowRef, useSSRContext } from 'vue';
|
|
import { ssrRenderComponent, ssrRenderAttrs, ssrRenderAttr, ssrInterpolate, ssrRenderList, ssrGetDirectiveProps, ssrRenderSlot, ssrRenderClass } from 'vue/server-renderer';
|
|
import { _ as _imports_0 } from './search_gray-B8huMSPA.mjs';
|
|
import { u as useRouter$1, a as useConfigStore, t as reactiveProjectName, f as loading, aS as watchDebounced, z as getSupabaseStorageUrl, b as useUserStore, aI as useRoute, aH as useRouter, aT as getCustomerList, C as useElementSize, a3 as Button, aa as withInstall, s as supabase, D as myAxios, X as functionType, aC as someType, Z as booleanType, Y as stringType, M as objectType, E as useConfigInject, F as genComponentStyleHook, H as classNames, a0 as merge, P as PropTypes, L as initDefaultProps, ah as getSlot, Q as resetComponent, ab as isValidElement, al as hasProp, S as KeyCode, aP as withUndefined } from './server.mjs';
|
|
import { B as BasicIconOld, u as usePrefix } from './BasicIconOld-I4c2ShMu.mjs';
|
|
import { l as loadGray, _ as _sfc_main$h } from './gray-3ape6lN6.mjs';
|
|
import { g as getStoreSearchPosts } from './media-4M9H5FMJ.mjs';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { defineStore } from 'pinia';
|
|
import { u as usePrice } from './usePrice-B-5-jXKQ.mjs';
|
|
import { _ as _sfc_main$g } from './BasicButton-DfZ7n7YH.mjs';
|
|
import { s as stdin_default, C as Collapse, a as CheckboxGroup, b as Checkbox, _ as __nuxt_component_6 } from './index-Dd1xdhY3.mjs';
|
|
import { M as Menu, _ as __nuxt_component_1 } from './index-_EXf9gbe.mjs';
|
|
import { I as Input } from './index-CdFOXozc.mjs';
|
|
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
import { B as BaseMixin, d as addEventListenerWrap, e as tooltipProps, _ as __nuxt_component_2$1, s as supportsPassive } from './index-B7KbXP6Z.mjs';
|
|
import { w as wrapperRaf } from './raf-ruCY1ktO.mjs';
|
|
import { u as useInjectFormItemContext } from './FormItemContext-CR0UDjwx.mjs';
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
import { u as useAsyncData } from './asyncData-BO2VaZPj.mjs';
|
|
import { p as previewImg$1 } from './logo_preview-CJTcB_Eg.mjs';
|
|
import { ContentLoader } from 'vue-content-loader';
|
|
import { T as Tag } from './index-DWRffWn0.mjs';
|
|
import { _ as _sfc_main$1$1, a as _sfc_main$i } from './CustomerCardSkeleton-BcP9JGTD.mjs';
|
|
import { T as Tabs, _ as __nuxt_component_2 } from './index-CU_NianO.mjs';
|
|
import 'node:http';
|
|
import 'node:https';
|
|
import 'node:events';
|
|
import 'node:buffer';
|
|
import 'node:fs';
|
|
import 'node:url';
|
|
import 'consola';
|
|
import 'ipx';
|
|
import 'node:path';
|
|
import 'node:crypto';
|
|
import '@supabase/supabase-js';
|
|
import '@ant-design/colors';
|
|
import 'stylis';
|
|
import 'vue-types';
|
|
import 'axios';
|
|
import '@ant-design/icons-vue';
|
|
import '../routes/renderer.mjs';
|
|
import 'vue-bundle-renderer/runtime';
|
|
import 'unhead/server';
|
|
import 'devalue';
|
|
import 'unhead/utils';
|
|
import 'unhead/plugins';
|
|
import './_plugin-vue_export-helper-1tPrXgE0.mjs';
|
|
import './index-B0ZImyVU.mjs';
|
|
import 'throttle-debounce';
|
|
import './collapseMotion-cQ2SGjCA.mjs';
|
|
import './Checkbox-CndEMz1g.mjs';
|
|
import './index-CMTdA55b.mjs';
|
|
import './shallowequal-DbdDzF9p.mjs';
|
|
import 'lodash-es/uniq.js';
|
|
import './Overflow-DfCwiuVq.mjs';
|
|
import './BaseInput-8pfzphkE.mjs';
|
|
import 'resize-observer-polyfill';
|
|
import './slide-D6E-HIQp.mjs';
|
|
import './statusUtils-TdjbCkOy.mjs';
|
|
import './index-PQFDA1Lj.mjs';
|
|
import '../_/SearchOutlined.mjs';
|
|
import 'lodash-es/isPlainObject.js';
|
|
import 'dom-align';
|
|
import './UserProfilePic-DBymk7LQ.mjs';
|
|
import './empty_user-BaUNCdgf.mjs';
|
|
import './useRefs-BHKrVg4I.mjs';
|
|
import 'lodash-es/pick.js';
|
|
import './useMergedState-BZEfJ8Fl.mjs';
|
|
|
|
const Track = (_, _ref) => {
|
|
let {
|
|
attrs
|
|
} = _ref;
|
|
const {
|
|
included,
|
|
vertical,
|
|
style,
|
|
class: className
|
|
} = attrs;
|
|
let {
|
|
length,
|
|
offset,
|
|
reverse
|
|
} = attrs;
|
|
if (length < 0) {
|
|
reverse = !reverse;
|
|
length = Math.abs(length);
|
|
offset = 100 - offset;
|
|
}
|
|
const positionStyle = vertical ? {
|
|
[reverse ? "top" : "bottom"]: `${offset}%`,
|
|
[reverse ? "bottom" : "top"]: "auto",
|
|
height: `${length}%`
|
|
} : {
|
|
[reverse ? "right" : "left"]: `${offset}%`,
|
|
[reverse ? "left" : "right"]: "auto",
|
|
width: `${length}%`
|
|
};
|
|
const elStyle = _extends(_extends({}, style), positionStyle);
|
|
return included ? createVNode("div", {
|
|
"class": className,
|
|
"style": elStyle
|
|
}, null) : null;
|
|
};
|
|
Track.inheritAttrs = false;
|
|
const calcPoints = (_vertical, marks, dots, step, min, max) => {
|
|
const points = Object.keys(marks).map(parseFloat).sort((a, b) => a - b);
|
|
if (dots && step) {
|
|
for (let i = min; i <= max; i += step) {
|
|
if (points.indexOf(i) === -1) {
|
|
points.push(i);
|
|
}
|
|
}
|
|
}
|
|
return points;
|
|
};
|
|
const Steps = (_, _ref) => {
|
|
let {
|
|
attrs
|
|
} = _ref;
|
|
const {
|
|
prefixCls,
|
|
vertical,
|
|
reverse,
|
|
marks,
|
|
dots,
|
|
step,
|
|
included,
|
|
lowerBound,
|
|
upperBound,
|
|
max,
|
|
min,
|
|
dotStyle,
|
|
activeDotStyle
|
|
} = attrs;
|
|
const range = max - min;
|
|
const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
|
|
const offset = `${Math.abs(point - min) / range * 100}%`;
|
|
const isActived = !included && point === upperBound || included && point <= upperBound && point >= lowerBound;
|
|
let style = vertical ? _extends(_extends({}, dotStyle), {
|
|
[reverse ? "top" : "bottom"]: offset
|
|
}) : _extends(_extends({}, dotStyle), {
|
|
[reverse ? "right" : "left"]: offset
|
|
});
|
|
if (isActived) {
|
|
style = _extends(_extends({}, style), activeDotStyle);
|
|
}
|
|
const pointClassName = classNames({
|
|
[`${prefixCls}-dot`]: true,
|
|
[`${prefixCls}-dot-active`]: isActived,
|
|
[`${prefixCls}-dot-reverse`]: reverse
|
|
});
|
|
return createVNode("span", {
|
|
"class": pointClassName,
|
|
"style": style,
|
|
"key": point
|
|
}, null);
|
|
});
|
|
return createVNode("div", {
|
|
"class": `${prefixCls}-step`
|
|
}, [elements]);
|
|
};
|
|
Steps.inheritAttrs = false;
|
|
const Marks = (_, _ref) => {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
class: className,
|
|
vertical,
|
|
reverse,
|
|
marks,
|
|
included,
|
|
upperBound,
|
|
lowerBound,
|
|
max,
|
|
min,
|
|
onClickLabel
|
|
} = attrs;
|
|
const marksKeys = Object.keys(marks);
|
|
const customMark = slots.mark;
|
|
const range = max - min;
|
|
const elements = marksKeys.map(parseFloat).sort((a, b) => a - b).map((point) => {
|
|
const markPoint = typeof marks[point] === "function" ? marks[point]() : marks[point];
|
|
const markPointIsObject = typeof markPoint === "object" && !isValidElement(markPoint);
|
|
let markLabel = markPointIsObject ? markPoint.label : markPoint;
|
|
if (!markLabel && markLabel !== 0) {
|
|
return null;
|
|
}
|
|
if (customMark) {
|
|
markLabel = customMark({
|
|
point,
|
|
label: markLabel
|
|
});
|
|
}
|
|
const isActive = !included && point === upperBound || included && point <= upperBound && point >= lowerBound;
|
|
const markClassName = classNames({
|
|
[`${className}-text`]: true,
|
|
[`${className}-text-active`]: isActive
|
|
});
|
|
const bottomStyle = {
|
|
marginBottom: "-50%",
|
|
[reverse ? "top" : "bottom"]: `${(point - min) / range * 100}%`
|
|
};
|
|
const leftStyle = {
|
|
transform: `translateX(${reverse ? `50%` : `-50%`})`,
|
|
msTransform: `translateX(${reverse ? `50%` : `-50%`})`,
|
|
[reverse ? "right" : "left"]: `${(point - min) / range * 100}%`
|
|
};
|
|
const style = vertical ? bottomStyle : leftStyle;
|
|
const markStyle = markPointIsObject ? _extends(_extends({}, style), markPoint.style) : style;
|
|
const touchEvents = {
|
|
[supportsPassive ? "onTouchstartPassive" : "onTouchstart"]: (e) => onClickLabel(e, point)
|
|
};
|
|
return createVNode("span", _objectSpread({
|
|
"class": markClassName,
|
|
"style": markStyle,
|
|
"key": point,
|
|
"onMousedown": (e) => onClickLabel(e, point)
|
|
}, touchEvents), [markLabel]);
|
|
});
|
|
return createVNode("div", {
|
|
"class": className
|
|
}, [elements]);
|
|
};
|
|
Marks.inheritAttrs = false;
|
|
const VcHandle = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "Handle",
|
|
inheritAttrs: false,
|
|
props: {
|
|
prefixCls: String,
|
|
vertical: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
offset: Number,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
min: Number,
|
|
max: Number,
|
|
value: Number,
|
|
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
reverse: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
ariaLabel: String,
|
|
ariaLabelledBy: String,
|
|
ariaValueTextFormatter: Function,
|
|
onMouseenter: {
|
|
type: Function
|
|
},
|
|
onMouseleave: {
|
|
type: Function
|
|
},
|
|
onMousedown: {
|
|
type: Function
|
|
}
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
emit,
|
|
expose
|
|
} = _ref;
|
|
const clickFocused = shallowRef(false);
|
|
const handle = shallowRef();
|
|
const handleBlur = (e) => {
|
|
clickFocused.value = false;
|
|
emit("blur", e);
|
|
};
|
|
const handleKeyDown = () => {
|
|
clickFocused.value = false;
|
|
};
|
|
const focus = () => {
|
|
var _a;
|
|
(_a = handle.value) === null || _a === void 0 ? void 0 : _a.focus();
|
|
};
|
|
const blur = () => {
|
|
var _a;
|
|
(_a = handle.value) === null || _a === void 0 ? void 0 : _a.blur();
|
|
};
|
|
const clickFocus = () => {
|
|
clickFocused.value = true;
|
|
focus();
|
|
};
|
|
const handleMousedown = (e) => {
|
|
e.preventDefault();
|
|
focus();
|
|
emit("mousedown", e);
|
|
};
|
|
expose({
|
|
focus,
|
|
blur,
|
|
clickFocus,
|
|
ref: handle
|
|
});
|
|
const positionStyle = computed(() => {
|
|
const {
|
|
vertical,
|
|
offset,
|
|
reverse
|
|
} = props;
|
|
return vertical ? {
|
|
[reverse ? "top" : "bottom"]: `${offset}%`,
|
|
[reverse ? "bottom" : "top"]: "auto",
|
|
transform: reverse ? null : `translateY(+50%)`
|
|
} : {
|
|
[reverse ? "right" : "left"]: `${offset}%`,
|
|
[reverse ? "left" : "right"]: "auto",
|
|
transform: `translateX(${reverse ? "+" : "-"}50%)`
|
|
};
|
|
});
|
|
return () => {
|
|
const {
|
|
prefixCls,
|
|
disabled,
|
|
min,
|
|
max,
|
|
value,
|
|
tabindex,
|
|
ariaLabel,
|
|
ariaLabelledBy,
|
|
ariaValueTextFormatter,
|
|
onMouseenter,
|
|
onMouseleave
|
|
} = props;
|
|
const className = classNames(attrs.class, {
|
|
[`${prefixCls}-handle-click-focused`]: clickFocused.value
|
|
});
|
|
const ariaProps = {
|
|
"aria-valuemin": min,
|
|
"aria-valuemax": max,
|
|
"aria-valuenow": value,
|
|
"aria-disabled": !!disabled
|
|
};
|
|
const elStyle = [attrs.style, positionStyle.value];
|
|
let mergedTabIndex = tabindex || 0;
|
|
if (disabled || tabindex === null) {
|
|
mergedTabIndex = null;
|
|
}
|
|
let ariaValueText;
|
|
if (ariaValueTextFormatter) {
|
|
ariaValueText = ariaValueTextFormatter(value);
|
|
}
|
|
const handleProps = _extends(_extends(_extends(_extends({}, attrs), {
|
|
role: "slider",
|
|
tabindex: mergedTabIndex
|
|
}), ariaProps), {
|
|
class: className,
|
|
onBlur: handleBlur,
|
|
onKeydown: handleKeyDown,
|
|
onMousedown: handleMousedown,
|
|
onMouseenter,
|
|
onMouseleave,
|
|
ref: handle,
|
|
style: elStyle
|
|
});
|
|
return createVNode("div", _objectSpread(_objectSpread({}, handleProps), {}, {
|
|
"aria-label": ariaLabel,
|
|
"aria-labelledby": ariaLabelledBy,
|
|
"aria-valuetext": ariaValueText
|
|
}), null);
|
|
};
|
|
}
|
|
});
|
|
function isEventFromHandle(e, handles) {
|
|
try {
|
|
return Object.keys(handles).some((key) => e.target === handles[key].ref);
|
|
} catch (error) {
|
|
return false;
|
|
}
|
|
}
|
|
function isValueOutOfRange(value, _ref) {
|
|
let {
|
|
min,
|
|
max
|
|
} = _ref;
|
|
return value < min || value > max;
|
|
}
|
|
function isNotTouchEvent(e) {
|
|
return e.touches.length > 1 || e.type.toLowerCase() === "touchend" && e.touches.length > 0;
|
|
}
|
|
function getClosestPoint(val, _ref2) {
|
|
let {
|
|
marks,
|
|
step,
|
|
min,
|
|
max
|
|
} = _ref2;
|
|
const points = Object.keys(marks).map(parseFloat);
|
|
if (step !== null) {
|
|
const baseNum = Math.pow(10, getPrecision(step));
|
|
const maxSteps = Math.floor((max * baseNum - min * baseNum) / (step * baseNum));
|
|
const steps = Math.min((val - min) / step, maxSteps);
|
|
const closestStep = Math.round(steps) * step + min;
|
|
points.push(closestStep);
|
|
}
|
|
const diffs = points.map((point) => Math.abs(val - point));
|
|
return points[diffs.indexOf(Math.min(...diffs))];
|
|
}
|
|
function getPrecision(step) {
|
|
const stepString = step.toString();
|
|
let precision = 0;
|
|
if (stepString.indexOf(".") >= 0) {
|
|
precision = stepString.length - stepString.indexOf(".") - 1;
|
|
}
|
|
return precision;
|
|
}
|
|
function getMousePosition(vertical, e) {
|
|
let zoom = 1;
|
|
if ((void 0).visualViewport) {
|
|
zoom = +((void 0).visualViewport.width / (void 0).body.getBoundingClientRect().width).toFixed(2);
|
|
}
|
|
return (vertical ? e.clientY : e.pageX) / zoom;
|
|
}
|
|
function getTouchPosition(vertical, e) {
|
|
let zoom = 1;
|
|
if ((void 0).visualViewport) {
|
|
zoom = +((void 0).visualViewport.width / (void 0).body.getBoundingClientRect().width).toFixed(2);
|
|
}
|
|
return (vertical ? e.touches[0].clientY : e.touches[0].pageX) / zoom;
|
|
}
|
|
function getHandleCenterPosition(vertical, handle) {
|
|
const coords = handle.getBoundingClientRect();
|
|
return vertical ? coords.top + coords.height * 0.5 : (void 0).scrollX + coords.left + coords.width * 0.5;
|
|
}
|
|
function ensureValueInRange(val, _ref3) {
|
|
let {
|
|
max,
|
|
min
|
|
} = _ref3;
|
|
if (val <= min) {
|
|
return min;
|
|
}
|
|
if (val >= max) {
|
|
return max;
|
|
}
|
|
return val;
|
|
}
|
|
function ensureValuePrecision(val, props) {
|
|
const {
|
|
step
|
|
} = props;
|
|
const closestPoint = isFinite(getClosestPoint(val, props)) ? getClosestPoint(val, props) : 0;
|
|
return step === null ? closestPoint : parseFloat(closestPoint.toFixed(getPrecision(step)));
|
|
}
|
|
function pauseEvent(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
function calculateNextValue(func, value, props) {
|
|
const operations = {
|
|
increase: (a, b) => a + b,
|
|
decrease: (a, b) => a - b
|
|
};
|
|
const indexToGet = operations[func](Object.keys(props.marks).indexOf(JSON.stringify(value)), 1);
|
|
const keyToGet = Object.keys(props.marks)[indexToGet];
|
|
if (props.step) {
|
|
return operations[func](value, props.step);
|
|
}
|
|
if (!!Object.keys(props.marks).length && !!props.marks[keyToGet]) {
|
|
return props.marks[keyToGet];
|
|
}
|
|
return value;
|
|
}
|
|
function getKeyboardValueMutator(e, vertical, reverse) {
|
|
const increase = "increase";
|
|
const decrease = "decrease";
|
|
let method = increase;
|
|
switch (e.keyCode) {
|
|
case KeyCode.UP:
|
|
method = vertical && reverse ? decrease : increase;
|
|
break;
|
|
case KeyCode.RIGHT:
|
|
method = !vertical && reverse ? decrease : increase;
|
|
break;
|
|
case KeyCode.DOWN:
|
|
method = vertical && reverse ? increase : decrease;
|
|
break;
|
|
case KeyCode.LEFT:
|
|
method = !vertical && reverse ? increase : decrease;
|
|
break;
|
|
case KeyCode.END:
|
|
return (_value, props) => props.max;
|
|
case KeyCode.HOME:
|
|
return (_value, props) => props.min;
|
|
case KeyCode.PAGE_UP:
|
|
return (value, props) => value + props.step * 2;
|
|
case KeyCode.PAGE_DOWN:
|
|
return (value, props) => value - props.step * 2;
|
|
default:
|
|
return void 0;
|
|
}
|
|
return (value, props) => calculateNextValue(method, value, props);
|
|
}
|
|
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;
|
|
};
|
|
function noop() {
|
|
}
|
|
function createSlider(Component) {
|
|
const propTypes = {
|
|
id: String,
|
|
min: Number,
|
|
max: Number,
|
|
step: Number,
|
|
marks: PropTypes.object,
|
|
included: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
prefixCls: String,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
handle: Function,
|
|
dots: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
vertical: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
reverse: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
minimumTrackStyle: PropTypes.object,
|
|
maximumTrackStyle: PropTypes.object,
|
|
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
|
trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
|
railStyle: PropTypes.object,
|
|
dotStyle: PropTypes.object,
|
|
activeDotStyle: PropTypes.object,
|
|
autofocus: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
draggableTrack: {
|
|
type: Boolean,
|
|
default: void 0
|
|
}
|
|
};
|
|
return defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "CreateSlider",
|
|
mixins: [BaseMixin, Component],
|
|
inheritAttrs: false,
|
|
props: initDefaultProps(propTypes, {
|
|
prefixCls: "rc-slider",
|
|
min: 0,
|
|
max: 100,
|
|
step: 1,
|
|
marks: {},
|
|
included: true,
|
|
disabled: false,
|
|
dots: false,
|
|
vertical: false,
|
|
reverse: false,
|
|
trackStyle: [{}],
|
|
handleStyle: [{}],
|
|
railStyle: {},
|
|
dotStyle: {},
|
|
activeDotStyle: {}
|
|
}),
|
|
emits: ["change", "blur", "focus"],
|
|
data() {
|
|
const {
|
|
step,
|
|
max,
|
|
min
|
|
} = this;
|
|
this.handlesRefs = {};
|
|
return {};
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.document = this.sliderRef && this.sliderRef.ownerDocument;
|
|
const {
|
|
autofocus,
|
|
disabled
|
|
} = this;
|
|
if (autofocus && !disabled) {
|
|
this.focus();
|
|
}
|
|
});
|
|
},
|
|
beforeUnmount() {
|
|
this.$nextTick(() => {
|
|
this.removeDocumentEvents();
|
|
});
|
|
},
|
|
methods: {
|
|
defaultHandle(_a) {
|
|
var {
|
|
index,
|
|
directives,
|
|
className,
|
|
style
|
|
} = _a, restProps = __rest$1(_a, ["index", "directives", "className", "style"]);
|
|
delete restProps.dragging;
|
|
if (restProps.value === null) {
|
|
return null;
|
|
}
|
|
const handleProps = _extends(_extends({}, restProps), {
|
|
class: className,
|
|
style,
|
|
key: index
|
|
});
|
|
return createVNode(VcHandle, handleProps, null);
|
|
},
|
|
onDown(e, position) {
|
|
let p = position;
|
|
const {
|
|
draggableTrack,
|
|
vertical: isVertical
|
|
} = this.$props;
|
|
const {
|
|
bounds
|
|
} = this.$data;
|
|
const value = draggableTrack && this.positionGetValue ? this.positionGetValue(p) || [] : [];
|
|
const inPoint = isEventFromHandle(e, this.handlesRefs);
|
|
this.dragTrack = draggableTrack && bounds.length >= 2 && !inPoint && !value.map((n, i) => {
|
|
const v = !i ? n >= bounds[i] : true;
|
|
return i === value.length - 1 ? n <= bounds[i] : v;
|
|
}).some((c) => !c);
|
|
if (this.dragTrack) {
|
|
this.dragOffset = p;
|
|
this.startBounds = [...bounds];
|
|
} else {
|
|
if (!inPoint) {
|
|
this.dragOffset = 0;
|
|
} else {
|
|
const handlePosition = getHandleCenterPosition(isVertical, e.target);
|
|
this.dragOffset = p - handlePosition;
|
|
p = handlePosition;
|
|
}
|
|
this.onStart(p);
|
|
}
|
|
},
|
|
onMouseDown(e) {
|
|
if (e.button !== 0) {
|
|
return;
|
|
}
|
|
this.removeDocumentEvents();
|
|
const isVertical = this.$props.vertical;
|
|
const position = getMousePosition(isVertical, e);
|
|
this.onDown(e, position);
|
|
this.addDocumentMouseEvents();
|
|
},
|
|
onTouchStart(e) {
|
|
if (isNotTouchEvent(e)) return;
|
|
const isVertical = this.vertical;
|
|
const position = getTouchPosition(isVertical, e);
|
|
this.onDown(e, position);
|
|
this.addDocumentTouchEvents();
|
|
pauseEvent(e);
|
|
},
|
|
onFocus(e) {
|
|
const {
|
|
vertical
|
|
} = this;
|
|
if (isEventFromHandle(e, this.handlesRefs) && !this.dragTrack) {
|
|
const handlePosition = getHandleCenterPosition(vertical, e.target);
|
|
this.dragOffset = 0;
|
|
this.onStart(handlePosition);
|
|
pauseEvent(e);
|
|
this.$emit("focus", e);
|
|
}
|
|
},
|
|
onBlur(e) {
|
|
if (!this.dragTrack) {
|
|
this.onEnd();
|
|
}
|
|
this.$emit("blur", e);
|
|
},
|
|
onMouseUp() {
|
|
if (this.handlesRefs[this.prevMovedHandleIndex]) {
|
|
this.handlesRefs[this.prevMovedHandleIndex].clickFocus();
|
|
}
|
|
},
|
|
onMouseMove(e) {
|
|
if (!this.sliderRef) {
|
|
this.onEnd();
|
|
return;
|
|
}
|
|
const position = getMousePosition(this.vertical, e);
|
|
this.onMove(e, position - this.dragOffset, this.dragTrack, this.startBounds);
|
|
},
|
|
onTouchMove(e) {
|
|
if (isNotTouchEvent(e) || !this.sliderRef) {
|
|
this.onEnd();
|
|
return;
|
|
}
|
|
const position = getTouchPosition(this.vertical, e);
|
|
this.onMove(e, position - this.dragOffset, this.dragTrack, this.startBounds);
|
|
},
|
|
onKeyDown(e) {
|
|
if (this.sliderRef && isEventFromHandle(e, this.handlesRefs)) {
|
|
this.onKeyboard(e);
|
|
}
|
|
},
|
|
onClickMarkLabel(e, value) {
|
|
e.stopPropagation();
|
|
this.onChange({
|
|
sValue: value
|
|
});
|
|
this.setState({
|
|
sValue: value
|
|
}, () => this.onEnd(true));
|
|
},
|
|
getSliderStart() {
|
|
const slider = this.sliderRef;
|
|
const {
|
|
vertical,
|
|
reverse
|
|
} = this;
|
|
const rect = slider.getBoundingClientRect();
|
|
if (vertical) {
|
|
return reverse ? rect.bottom : rect.top;
|
|
}
|
|
return (void 0).scrollX + (reverse ? rect.right : rect.left);
|
|
},
|
|
getSliderLength() {
|
|
const slider = this.sliderRef;
|
|
if (!slider) {
|
|
return 0;
|
|
}
|
|
const coords = slider.getBoundingClientRect();
|
|
return this.vertical ? coords.height : coords.width;
|
|
},
|
|
addDocumentTouchEvents() {
|
|
this.onTouchMoveListener = addEventListenerWrap(this.document, "touchmove", this.onTouchMove);
|
|
this.onTouchUpListener = addEventListenerWrap(this.document, "touchend", this.onEnd);
|
|
},
|
|
addDocumentMouseEvents() {
|
|
this.onMouseMoveListener = addEventListenerWrap(this.document, "mousemove", this.onMouseMove);
|
|
this.onMouseUpListener = addEventListenerWrap(this.document, "mouseup", this.onEnd);
|
|
},
|
|
removeDocumentEvents() {
|
|
this.onTouchMoveListener && this.onTouchMoveListener.remove();
|
|
this.onTouchUpListener && this.onTouchUpListener.remove();
|
|
this.onMouseMoveListener && this.onMouseMoveListener.remove();
|
|
this.onMouseUpListener && this.onMouseUpListener.remove();
|
|
},
|
|
focus() {
|
|
var _a;
|
|
if (this.$props.disabled) {
|
|
return;
|
|
}
|
|
(_a = this.handlesRefs[0]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
},
|
|
blur() {
|
|
if (this.$props.disabled) {
|
|
return;
|
|
}
|
|
Object.keys(this.handlesRefs).forEach((key) => {
|
|
var _a, _b;
|
|
(_b = (_a = this.handlesRefs[key]) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
});
|
|
},
|
|
calcValue(offset) {
|
|
const {
|
|
vertical,
|
|
min,
|
|
max
|
|
} = this;
|
|
const ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength());
|
|
const value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
|
|
return value;
|
|
},
|
|
calcValueByPos(position) {
|
|
const sign = this.reverse ? -1 : 1;
|
|
const pixelOffset = sign * (position - this.getSliderStart());
|
|
const nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
|
|
return nextValue;
|
|
},
|
|
calcOffset(value) {
|
|
const {
|
|
min,
|
|
max
|
|
} = this;
|
|
const ratio = (value - min) / (max - min);
|
|
return Math.max(0, ratio * 100);
|
|
},
|
|
saveSlider(slider) {
|
|
this.sliderRef = slider;
|
|
},
|
|
saveHandle(index, handle) {
|
|
this.handlesRefs[index] = handle;
|
|
}
|
|
},
|
|
render() {
|
|
const {
|
|
prefixCls,
|
|
marks,
|
|
dots,
|
|
step,
|
|
included,
|
|
disabled,
|
|
vertical,
|
|
reverse,
|
|
min,
|
|
max,
|
|
maximumTrackStyle,
|
|
railStyle,
|
|
dotStyle,
|
|
activeDotStyle,
|
|
id
|
|
} = this;
|
|
const {
|
|
class: className,
|
|
style
|
|
} = this.$attrs;
|
|
const {
|
|
tracks,
|
|
handles
|
|
} = this.renderSlider();
|
|
const sliderClassName = classNames(prefixCls, className, {
|
|
[`${prefixCls}-with-marks`]: Object.keys(marks).length,
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
[`${prefixCls}-vertical`]: vertical,
|
|
[`${prefixCls}-horizontal`]: !vertical
|
|
});
|
|
const markProps = {
|
|
vertical,
|
|
marks,
|
|
included,
|
|
lowerBound: this.getLowerBound(),
|
|
upperBound: this.getUpperBound(),
|
|
max,
|
|
min,
|
|
reverse,
|
|
class: `${prefixCls}-mark`,
|
|
onClickLabel: disabled ? noop : this.onClickMarkLabel
|
|
};
|
|
const touchEvents = {
|
|
[supportsPassive ? "onTouchstartPassive" : "onTouchstart"]: disabled ? noop : this.onTouchStart
|
|
};
|
|
return createVNode("div", _objectSpread(_objectSpread({
|
|
"id": id,
|
|
"ref": this.saveSlider,
|
|
"tabindex": "-1",
|
|
"class": sliderClassName
|
|
}, touchEvents), {}, {
|
|
"onMousedown": disabled ? noop : this.onMouseDown,
|
|
"onMouseup": disabled ? noop : this.onMouseUp,
|
|
"onKeydown": disabled ? noop : this.onKeyDown,
|
|
"onFocus": disabled ? noop : this.onFocus,
|
|
"onBlur": disabled ? noop : this.onBlur,
|
|
"style": style
|
|
}), [createVNode("div", {
|
|
"class": `${prefixCls}-rail`,
|
|
"style": _extends(_extends({}, maximumTrackStyle), railStyle)
|
|
}, null), tracks, createVNode(Steps, {
|
|
"prefixCls": prefixCls,
|
|
"vertical": vertical,
|
|
"reverse": reverse,
|
|
"marks": marks,
|
|
"dots": dots,
|
|
"step": step,
|
|
"included": included,
|
|
"lowerBound": this.getLowerBound(),
|
|
"upperBound": this.getUpperBound(),
|
|
"max": max,
|
|
"min": min,
|
|
"dotStyle": dotStyle,
|
|
"activeDotStyle": activeDotStyle
|
|
}, null), handles, createVNode(Marks, markProps, {
|
|
mark: this.$slots.mark
|
|
}), getSlot(this)]);
|
|
}
|
|
});
|
|
}
|
|
const Slider$2 = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "Slider",
|
|
mixins: [BaseMixin],
|
|
inheritAttrs: false,
|
|
props: {
|
|
defaultValue: Number,
|
|
value: Number,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
autofocus: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
reverse: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
min: Number,
|
|
max: Number,
|
|
ariaLabelForHandle: String,
|
|
ariaLabelledByForHandle: String,
|
|
ariaValueTextFormatterForHandle: String,
|
|
startPoint: Number
|
|
},
|
|
emits: ["beforeChange", "afterChange", "change"],
|
|
data() {
|
|
const defaultValue = this.defaultValue !== void 0 ? this.defaultValue : this.min;
|
|
const value = this.value !== void 0 ? this.value : defaultValue;
|
|
return {
|
|
sValue: this.trimAlignValue(value),
|
|
dragging: false
|
|
};
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(val) {
|
|
this.setChangeValue(val);
|
|
},
|
|
deep: true
|
|
},
|
|
min() {
|
|
const {
|
|
sValue
|
|
} = this;
|
|
this.setChangeValue(sValue);
|
|
},
|
|
max() {
|
|
const {
|
|
sValue
|
|
} = this;
|
|
this.setChangeValue(sValue);
|
|
}
|
|
},
|
|
methods: {
|
|
setChangeValue(value) {
|
|
const newValue = value !== void 0 ? value : this.sValue;
|
|
const nextValue = this.trimAlignValue(newValue, this.$props);
|
|
if (nextValue === this.sValue) return;
|
|
this.setState({
|
|
sValue: nextValue
|
|
});
|
|
if (isValueOutOfRange(newValue, this.$props)) {
|
|
this.$emit("change", nextValue);
|
|
}
|
|
},
|
|
onChange(state) {
|
|
const isNotControlled = !hasProp(this, "value");
|
|
const nextState = state.sValue > this.max ? _extends(_extends({}, state), {
|
|
sValue: this.max
|
|
}) : state;
|
|
if (isNotControlled) {
|
|
this.setState(nextState);
|
|
}
|
|
const changedValue = nextState.sValue;
|
|
this.$emit("change", changedValue);
|
|
},
|
|
onStart(position) {
|
|
this.setState({
|
|
dragging: true
|
|
});
|
|
const {
|
|
sValue
|
|
} = this;
|
|
this.$emit("beforeChange", sValue);
|
|
const value = this.calcValueByPos(position);
|
|
this.startValue = value;
|
|
this.startPosition = position;
|
|
if (value === sValue) return;
|
|
this.prevMovedHandleIndex = 0;
|
|
this.onChange({
|
|
sValue: value
|
|
});
|
|
},
|
|
onEnd(force) {
|
|
const {
|
|
dragging
|
|
} = this;
|
|
this.removeDocumentEvents();
|
|
if (dragging || force) {
|
|
this.$emit("afterChange", this.sValue);
|
|
}
|
|
this.setState({
|
|
dragging: false
|
|
});
|
|
},
|
|
onMove(e, position) {
|
|
pauseEvent(e);
|
|
const {
|
|
sValue
|
|
} = this;
|
|
const value = this.calcValueByPos(position);
|
|
if (value === sValue) return;
|
|
this.onChange({
|
|
sValue: value
|
|
});
|
|
},
|
|
onKeyboard(e) {
|
|
const {
|
|
reverse,
|
|
vertical
|
|
} = this.$props;
|
|
const valueMutator = getKeyboardValueMutator(e, vertical, reverse);
|
|
if (valueMutator) {
|
|
pauseEvent(e);
|
|
const {
|
|
sValue
|
|
} = this;
|
|
const mutatedValue = valueMutator(sValue, this.$props);
|
|
const value = this.trimAlignValue(mutatedValue);
|
|
if (value === sValue) return;
|
|
this.onChange({
|
|
sValue: value
|
|
});
|
|
this.$emit("afterChange", value);
|
|
this.onEnd();
|
|
}
|
|
},
|
|
getLowerBound() {
|
|
const minPoint = this.$props.startPoint || this.$props.min;
|
|
return this.$data.sValue > minPoint ? minPoint : this.$data.sValue;
|
|
},
|
|
getUpperBound() {
|
|
if (this.$data.sValue < this.$props.startPoint) {
|
|
return this.$props.startPoint;
|
|
}
|
|
return this.$data.sValue;
|
|
},
|
|
trimAlignValue(v) {
|
|
let nextProps = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
if (v === null) {
|
|
return null;
|
|
}
|
|
const mergedProps = _extends(_extends({}, this.$props), nextProps);
|
|
const val = ensureValueInRange(v, mergedProps);
|
|
return ensureValuePrecision(val, mergedProps);
|
|
},
|
|
getTrack(_ref) {
|
|
let {
|
|
prefixCls,
|
|
reverse,
|
|
vertical,
|
|
included,
|
|
minimumTrackStyle,
|
|
mergedTrackStyle,
|
|
length,
|
|
offset
|
|
} = _ref;
|
|
return createVNode(Track, {
|
|
"class": `${prefixCls}-track`,
|
|
"vertical": vertical,
|
|
"included": included,
|
|
"offset": offset,
|
|
"reverse": reverse,
|
|
"length": length,
|
|
"style": _extends(_extends({}, minimumTrackStyle), mergedTrackStyle)
|
|
}, null);
|
|
},
|
|
renderSlider() {
|
|
const {
|
|
prefixCls,
|
|
vertical,
|
|
included,
|
|
disabled,
|
|
minimumTrackStyle,
|
|
trackStyle,
|
|
handleStyle,
|
|
tabindex,
|
|
ariaLabelForHandle,
|
|
ariaLabelledByForHandle,
|
|
ariaValueTextFormatterForHandle,
|
|
min,
|
|
max,
|
|
startPoint,
|
|
reverse,
|
|
handle,
|
|
defaultHandle
|
|
} = this;
|
|
const handleGenerator = handle || defaultHandle;
|
|
const {
|
|
sValue,
|
|
dragging
|
|
} = this;
|
|
const offset = this.calcOffset(sValue);
|
|
const handles = handleGenerator({
|
|
class: `${prefixCls}-handle`,
|
|
prefixCls,
|
|
vertical,
|
|
offset,
|
|
value: sValue,
|
|
dragging,
|
|
disabled,
|
|
min,
|
|
max,
|
|
reverse,
|
|
index: 0,
|
|
tabindex,
|
|
ariaLabel: ariaLabelForHandle,
|
|
ariaLabelledBy: ariaLabelledByForHandle,
|
|
ariaValueTextFormatter: ariaValueTextFormatterForHandle,
|
|
style: handleStyle[0] || handleStyle,
|
|
ref: (h) => this.saveHandle(0, h),
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur
|
|
});
|
|
const trackOffset = startPoint !== void 0 ? this.calcOffset(startPoint) : 0;
|
|
const mergedTrackStyle = trackStyle[0] || trackStyle;
|
|
return {
|
|
tracks: this.getTrack({
|
|
prefixCls,
|
|
reverse,
|
|
vertical,
|
|
included,
|
|
offset: trackOffset,
|
|
minimumTrackStyle,
|
|
mergedTrackStyle,
|
|
length: offset - trackOffset
|
|
}),
|
|
handles
|
|
};
|
|
}
|
|
}
|
|
});
|
|
const VcSlider = createSlider(Slider$2);
|
|
const trimAlignValue = (_ref) => {
|
|
let {
|
|
value,
|
|
handle,
|
|
bounds,
|
|
props
|
|
} = _ref;
|
|
const {
|
|
allowCross,
|
|
pushable
|
|
} = props;
|
|
const thershold = Number(pushable);
|
|
const valInRange = ensureValueInRange(value, props);
|
|
let valNotConflict = valInRange;
|
|
if (!allowCross && handle != null && bounds !== void 0) {
|
|
if (handle > 0 && valInRange <= bounds[handle - 1] + thershold) {
|
|
valNotConflict = bounds[handle - 1] + thershold;
|
|
}
|
|
if (handle < bounds.length - 1 && valInRange >= bounds[handle + 1] - thershold) {
|
|
valNotConflict = bounds[handle + 1] - thershold;
|
|
}
|
|
}
|
|
return ensureValuePrecision(valNotConflict, props);
|
|
};
|
|
const rangeProps = {
|
|
defaultValue: PropTypes.arrayOf(PropTypes.number),
|
|
value: PropTypes.arrayOf(PropTypes.number),
|
|
count: Number,
|
|
pushable: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.number])),
|
|
allowCross: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
reverse: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
tabindex: PropTypes.arrayOf(PropTypes.number),
|
|
prefixCls: String,
|
|
min: Number,
|
|
max: Number,
|
|
autofocus: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
ariaLabelGroupForHandles: Array,
|
|
ariaLabelledByGroupForHandles: Array,
|
|
ariaValueTextFormatterGroupForHandles: Array,
|
|
draggableTrack: {
|
|
type: Boolean,
|
|
default: void 0
|
|
}
|
|
};
|
|
const Range = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "Range",
|
|
mixins: [BaseMixin],
|
|
inheritAttrs: false,
|
|
props: initDefaultProps(rangeProps, {
|
|
count: 1,
|
|
allowCross: true,
|
|
pushable: false,
|
|
tabindex: [],
|
|
draggableTrack: false,
|
|
ariaLabelGroupForHandles: [],
|
|
ariaLabelledByGroupForHandles: [],
|
|
ariaValueTextFormatterGroupForHandles: []
|
|
}),
|
|
emits: ["beforeChange", "afterChange", "change"],
|
|
displayName: "Range",
|
|
data() {
|
|
const {
|
|
count,
|
|
min,
|
|
max
|
|
} = this;
|
|
const initialValue = Array(...Array(count + 1)).map(() => min);
|
|
const defaultValue = hasProp(this, "defaultValue") ? this.defaultValue : initialValue;
|
|
let {
|
|
value
|
|
} = this;
|
|
if (value === void 0) {
|
|
value = defaultValue;
|
|
}
|
|
const bounds = value.map((v, i) => trimAlignValue({
|
|
value: v,
|
|
handle: i,
|
|
props: this.$props
|
|
}));
|
|
const recent = bounds[0] === max ? 0 : bounds.length - 1;
|
|
return {
|
|
sHandle: null,
|
|
recent,
|
|
bounds
|
|
};
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(val) {
|
|
const {
|
|
bounds
|
|
} = this;
|
|
this.setChangeValue(val || bounds);
|
|
},
|
|
deep: true
|
|
},
|
|
min() {
|
|
const {
|
|
value
|
|
} = this;
|
|
this.setChangeValue(value || this.bounds);
|
|
},
|
|
max() {
|
|
const {
|
|
value
|
|
} = this;
|
|
this.setChangeValue(value || this.bounds);
|
|
}
|
|
},
|
|
methods: {
|
|
setChangeValue(value) {
|
|
const {
|
|
bounds
|
|
} = this;
|
|
let nextBounds = value.map((v, i) => trimAlignValue({
|
|
value: v,
|
|
handle: i,
|
|
bounds,
|
|
props: this.$props
|
|
}));
|
|
if (bounds.length === nextBounds.length) {
|
|
if (nextBounds.every((v, i) => v === bounds[i])) {
|
|
return null;
|
|
}
|
|
} else {
|
|
nextBounds = value.map((v, i) => trimAlignValue({
|
|
value: v,
|
|
handle: i,
|
|
props: this.$props
|
|
}));
|
|
}
|
|
this.setState({
|
|
bounds: nextBounds
|
|
});
|
|
if (value.some((v) => isValueOutOfRange(v, this.$props))) {
|
|
const newValues = value.map((v) => {
|
|
return ensureValueInRange(v, this.$props);
|
|
});
|
|
this.$emit("change", newValues);
|
|
}
|
|
},
|
|
onChange(state) {
|
|
const isNotControlled = !hasProp(this, "value");
|
|
if (isNotControlled) {
|
|
this.setState(state);
|
|
} else {
|
|
const controlledState = {};
|
|
["sHandle", "recent"].forEach((item) => {
|
|
if (state[item] !== void 0) {
|
|
controlledState[item] = state[item];
|
|
}
|
|
});
|
|
if (Object.keys(controlledState).length) {
|
|
this.setState(controlledState);
|
|
}
|
|
}
|
|
const data = _extends(_extends({}, this.$data), state);
|
|
const changedValue = data.bounds;
|
|
this.$emit("change", changedValue);
|
|
},
|
|
positionGetValue(position) {
|
|
const bounds = this.getValue();
|
|
const value = this.calcValueByPos(position);
|
|
const closestBound = this.getClosestBound(value);
|
|
const index = this.getBoundNeedMoving(value, closestBound);
|
|
const prevValue = bounds[index];
|
|
if (value === prevValue) return null;
|
|
const nextBounds = [...bounds];
|
|
nextBounds[index] = value;
|
|
return nextBounds;
|
|
},
|
|
onStart(position) {
|
|
const {
|
|
bounds
|
|
} = this;
|
|
this.$emit("beforeChange", bounds);
|
|
const value = this.calcValueByPos(position);
|
|
this.startValue = value;
|
|
this.startPosition = position;
|
|
const closestBound = this.getClosestBound(value);
|
|
this.prevMovedHandleIndex = this.getBoundNeedMoving(value, closestBound);
|
|
this.setState({
|
|
sHandle: this.prevMovedHandleIndex,
|
|
recent: this.prevMovedHandleIndex
|
|
});
|
|
const prevValue = bounds[this.prevMovedHandleIndex];
|
|
if (value === prevValue) return;
|
|
const nextBounds = [...bounds];
|
|
nextBounds[this.prevMovedHandleIndex] = value;
|
|
this.onChange({
|
|
bounds: nextBounds
|
|
});
|
|
},
|
|
onEnd(force) {
|
|
const {
|
|
sHandle
|
|
} = this;
|
|
this.removeDocumentEvents();
|
|
if (!sHandle) {
|
|
this.dragTrack = false;
|
|
}
|
|
if (sHandle !== null || force) {
|
|
this.$emit("afterChange", this.bounds);
|
|
}
|
|
this.setState({
|
|
sHandle: null
|
|
});
|
|
},
|
|
onMove(e, position, dragTrack, startBounds) {
|
|
pauseEvent(e);
|
|
const {
|
|
$data: state,
|
|
$props: props
|
|
} = this;
|
|
const maxValue = props.max || 100;
|
|
const minValue = props.min || 0;
|
|
if (dragTrack) {
|
|
let pos = props.vertical ? -position : position;
|
|
pos = props.reverse ? -pos : pos;
|
|
const max = maxValue - Math.max(...startBounds);
|
|
const min = minValue - Math.min(...startBounds);
|
|
const ratio = Math.min(Math.max(pos / (this.getSliderLength() / 100), min), max);
|
|
const nextBounds = startBounds.map((v) => Math.floor(Math.max(Math.min(v + ratio, maxValue), minValue)));
|
|
if (state.bounds.map((c, i) => c === nextBounds[i]).some((c) => !c)) {
|
|
this.onChange({
|
|
bounds: nextBounds
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
const {
|
|
bounds,
|
|
sHandle
|
|
} = this;
|
|
const value = this.calcValueByPos(position);
|
|
const oldValue = bounds[sHandle];
|
|
if (value === oldValue) return;
|
|
this.moveTo(value);
|
|
},
|
|
onKeyboard(e) {
|
|
const {
|
|
reverse,
|
|
vertical
|
|
} = this.$props;
|
|
const valueMutator = getKeyboardValueMutator(e, vertical, reverse);
|
|
if (valueMutator) {
|
|
pauseEvent(e);
|
|
const {
|
|
bounds,
|
|
sHandle
|
|
} = this;
|
|
const oldValue = bounds[sHandle === null ? this.recent : sHandle];
|
|
const mutatedValue = valueMutator(oldValue, this.$props);
|
|
const value = trimAlignValue({
|
|
value: mutatedValue,
|
|
handle: sHandle,
|
|
bounds,
|
|
props: this.$props
|
|
});
|
|
if (value === oldValue) return;
|
|
const isFromKeyboardEvent = true;
|
|
this.moveTo(value, isFromKeyboardEvent);
|
|
}
|
|
},
|
|
getClosestBound(value) {
|
|
const {
|
|
bounds
|
|
} = this;
|
|
let closestBound = 0;
|
|
for (let i = 1; i < bounds.length - 1; i += 1) {
|
|
if (value >= bounds[i]) {
|
|
closestBound = i;
|
|
}
|
|
}
|
|
if (Math.abs(bounds[closestBound + 1] - value) < Math.abs(bounds[closestBound] - value)) {
|
|
closestBound += 1;
|
|
}
|
|
return closestBound;
|
|
},
|
|
getBoundNeedMoving(value, closestBound) {
|
|
const {
|
|
bounds,
|
|
recent
|
|
} = this;
|
|
let boundNeedMoving = closestBound;
|
|
const isAtTheSamePoint = bounds[closestBound + 1] === bounds[closestBound];
|
|
if (isAtTheSamePoint && bounds[recent] === bounds[closestBound]) {
|
|
boundNeedMoving = recent;
|
|
}
|
|
if (isAtTheSamePoint && value !== bounds[closestBound + 1]) {
|
|
boundNeedMoving = value < bounds[closestBound + 1] ? closestBound : closestBound + 1;
|
|
}
|
|
return boundNeedMoving;
|
|
},
|
|
getLowerBound() {
|
|
return this.bounds[0];
|
|
},
|
|
getUpperBound() {
|
|
const {
|
|
bounds
|
|
} = this;
|
|
return bounds[bounds.length - 1];
|
|
},
|
|
/**
|
|
* Returns an array of possible slider points, taking into account both
|
|
* `marks` and `step`. The result is cached.
|
|
*/
|
|
getPoints() {
|
|
const {
|
|
marks,
|
|
step,
|
|
min,
|
|
max
|
|
} = this;
|
|
const cache = this.internalPointsCache;
|
|
if (!cache || cache.marks !== marks || cache.step !== step) {
|
|
const pointsObject = _extends({}, marks);
|
|
if (step !== null) {
|
|
for (let point = min; point <= max; point += step) {
|
|
pointsObject[point] = point;
|
|
}
|
|
}
|
|
const points = Object.keys(pointsObject).map(parseFloat);
|
|
points.sort((a, b) => a - b);
|
|
this.internalPointsCache = {
|
|
marks,
|
|
step,
|
|
points
|
|
};
|
|
}
|
|
return this.internalPointsCache.points;
|
|
},
|
|
moveTo(value, isFromKeyboardEvent) {
|
|
const nextBounds = [...this.bounds];
|
|
const {
|
|
sHandle,
|
|
recent
|
|
} = this;
|
|
const handle = sHandle === null ? recent : sHandle;
|
|
nextBounds[handle] = value;
|
|
let nextHandle = handle;
|
|
if (this.$props.pushable !== false) {
|
|
this.pushSurroundingHandles(nextBounds, nextHandle);
|
|
} else if (this.$props.allowCross) {
|
|
nextBounds.sort((a, b) => a - b);
|
|
nextHandle = nextBounds.indexOf(value);
|
|
}
|
|
this.onChange({
|
|
recent: nextHandle,
|
|
sHandle: nextHandle,
|
|
bounds: nextBounds
|
|
});
|
|
if (isFromKeyboardEvent) {
|
|
this.$emit("afterChange", nextBounds);
|
|
this.setState({}, () => {
|
|
this.handlesRefs[nextHandle].focus();
|
|
});
|
|
this.onEnd();
|
|
}
|
|
},
|
|
pushSurroundingHandles(bounds, handle) {
|
|
const value = bounds[handle];
|
|
const {
|
|
pushable
|
|
} = this;
|
|
const threshold = Number(pushable);
|
|
let direction = 0;
|
|
if (bounds[handle + 1] - value < threshold) {
|
|
direction = 1;
|
|
}
|
|
if (value - bounds[handle - 1] < threshold) {
|
|
direction = -1;
|
|
}
|
|
if (direction === 0) {
|
|
return;
|
|
}
|
|
const nextHandle = handle + direction;
|
|
const diffToNext = direction * (bounds[nextHandle] - value);
|
|
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
|
|
bounds[handle] = bounds[nextHandle] - direction * threshold;
|
|
}
|
|
},
|
|
pushHandle(bounds, handle, direction, amount) {
|
|
const originalValue = bounds[handle];
|
|
let currentValue = bounds[handle];
|
|
while (direction * (currentValue - originalValue) < amount) {
|
|
if (!this.pushHandleOnePoint(bounds, handle, direction)) {
|
|
bounds[handle] = originalValue;
|
|
return false;
|
|
}
|
|
currentValue = bounds[handle];
|
|
}
|
|
return true;
|
|
},
|
|
pushHandleOnePoint(bounds, handle, direction) {
|
|
const points = this.getPoints();
|
|
const pointIndex = points.indexOf(bounds[handle]);
|
|
const nextPointIndex = pointIndex + direction;
|
|
if (nextPointIndex >= points.length || nextPointIndex < 0) {
|
|
return false;
|
|
}
|
|
const nextHandle = handle + direction;
|
|
const nextValue = points[nextPointIndex];
|
|
const {
|
|
pushable
|
|
} = this;
|
|
const threshold = Number(pushable);
|
|
const diffToNext = direction * (bounds[nextHandle] - nextValue);
|
|
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
|
|
return false;
|
|
}
|
|
bounds[handle] = nextValue;
|
|
return true;
|
|
},
|
|
trimAlignValue(value) {
|
|
const {
|
|
sHandle,
|
|
bounds
|
|
} = this;
|
|
return trimAlignValue({
|
|
value,
|
|
handle: sHandle,
|
|
bounds,
|
|
props: this.$props
|
|
});
|
|
},
|
|
ensureValueNotConflict(handle, val, _ref2) {
|
|
let {
|
|
allowCross,
|
|
pushable: thershold
|
|
} = _ref2;
|
|
const state = this.$data || {};
|
|
const {
|
|
bounds
|
|
} = state;
|
|
handle = handle === void 0 ? state.sHandle : handle;
|
|
thershold = Number(thershold);
|
|
if (!allowCross && handle != null && bounds !== void 0) {
|
|
if (handle > 0 && val <= bounds[handle - 1] + thershold) {
|
|
return bounds[handle - 1] + thershold;
|
|
}
|
|
if (handle < bounds.length - 1 && val >= bounds[handle + 1] - thershold) {
|
|
return bounds[handle + 1] - thershold;
|
|
}
|
|
}
|
|
return val;
|
|
},
|
|
getTrack(_ref3) {
|
|
let {
|
|
bounds,
|
|
prefixCls,
|
|
reverse,
|
|
vertical,
|
|
included,
|
|
offsets,
|
|
trackStyle
|
|
} = _ref3;
|
|
return bounds.slice(0, -1).map((_, index) => {
|
|
const i = index + 1;
|
|
const trackClassName = classNames({
|
|
[`${prefixCls}-track`]: true,
|
|
[`${prefixCls}-track-${i}`]: true
|
|
});
|
|
return createVNode(Track, {
|
|
"class": trackClassName,
|
|
"vertical": vertical,
|
|
"reverse": reverse,
|
|
"included": included,
|
|
"offset": offsets[i - 1],
|
|
"length": offsets[i] - offsets[i - 1],
|
|
"style": trackStyle[index],
|
|
"key": i
|
|
}, null);
|
|
});
|
|
},
|
|
renderSlider() {
|
|
const {
|
|
sHandle,
|
|
bounds,
|
|
prefixCls,
|
|
vertical,
|
|
included,
|
|
disabled,
|
|
min,
|
|
max,
|
|
reverse,
|
|
handle,
|
|
defaultHandle,
|
|
trackStyle,
|
|
handleStyle,
|
|
tabindex,
|
|
ariaLabelGroupForHandles,
|
|
ariaLabelledByGroupForHandles,
|
|
ariaValueTextFormatterGroupForHandles
|
|
} = this;
|
|
const handleGenerator = handle || defaultHandle;
|
|
const offsets = bounds.map((v) => this.calcOffset(v));
|
|
const handleClassName = `${prefixCls}-handle`;
|
|
const handles = bounds.map((v, i) => {
|
|
let mergedTabIndex = tabindex[i] || 0;
|
|
if (disabled || tabindex[i] === null) {
|
|
mergedTabIndex = null;
|
|
}
|
|
const dragging = sHandle === i;
|
|
return handleGenerator({
|
|
class: classNames({
|
|
[handleClassName]: true,
|
|
[`${handleClassName}-${i + 1}`]: true,
|
|
[`${handleClassName}-dragging`]: dragging
|
|
}),
|
|
prefixCls,
|
|
vertical,
|
|
dragging,
|
|
offset: offsets[i],
|
|
value: v,
|
|
index: i,
|
|
tabindex: mergedTabIndex,
|
|
min,
|
|
max,
|
|
reverse,
|
|
disabled,
|
|
style: handleStyle[i],
|
|
ref: (h) => this.saveHandle(i, h),
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
ariaLabel: ariaLabelGroupForHandles[i],
|
|
ariaLabelledBy: ariaLabelledByGroupForHandles[i],
|
|
ariaValueTextFormatter: ariaValueTextFormatterGroupForHandles[i]
|
|
});
|
|
});
|
|
return {
|
|
tracks: this.getTrack({
|
|
bounds,
|
|
prefixCls,
|
|
reverse,
|
|
vertical,
|
|
included,
|
|
offsets,
|
|
trackStyle
|
|
}),
|
|
handles
|
|
};
|
|
}
|
|
}
|
|
});
|
|
const VcRange = createSlider(Range);
|
|
const SliderTooltip = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "SliderTooltip",
|
|
inheritAttrs: false,
|
|
props: tooltipProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const innerRef = ref(null);
|
|
const rafRef = ref(null);
|
|
function cancelKeepAlign() {
|
|
wrapperRaf.cancel(rafRef.value);
|
|
rafRef.value = null;
|
|
}
|
|
function keepAlign() {
|
|
rafRef.value = wrapperRaf(() => {
|
|
var _a;
|
|
(_a = innerRef.value) === null || _a === void 0 ? void 0 : _a.forcePopupAlign();
|
|
rafRef.value = null;
|
|
});
|
|
}
|
|
const align = () => {
|
|
cancelKeepAlign();
|
|
if (props.open) {
|
|
keepAlign();
|
|
}
|
|
};
|
|
watch([() => props.open, () => props.title], () => {
|
|
align();
|
|
}, {
|
|
flush: "post",
|
|
immediate: true
|
|
});
|
|
return () => {
|
|
return createVNode(__nuxt_component_2$1, _objectSpread(_objectSpread({
|
|
"ref": innerRef
|
|
}, props), attrs), slots);
|
|
};
|
|
}
|
|
});
|
|
const genBaseStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
controlSize,
|
|
dotSize,
|
|
marginFull,
|
|
marginPart,
|
|
colorFillContentHover
|
|
} = token;
|
|
return {
|
|
[componentCls]: _extends(_extends({}, resetComponent(token)), {
|
|
position: "relative",
|
|
height: controlSize,
|
|
margin: `${marginPart}px ${marginFull}px`,
|
|
padding: 0,
|
|
cursor: "pointer",
|
|
touchAction: "none",
|
|
[`&-vertical`]: {
|
|
margin: `${marginFull}px ${marginPart}px`
|
|
},
|
|
[`${componentCls}-rail`]: {
|
|
position: "absolute",
|
|
backgroundColor: token.colorFillTertiary,
|
|
borderRadius: token.borderRadiusXS,
|
|
transition: `background-color ${token.motionDurationMid}`
|
|
},
|
|
[`${componentCls}-track`]: {
|
|
position: "absolute",
|
|
backgroundColor: token.colorPrimaryBorder,
|
|
borderRadius: token.borderRadiusXS,
|
|
transition: `background-color ${token.motionDurationMid}`
|
|
},
|
|
"&:hover": {
|
|
[`${componentCls}-rail`]: {
|
|
backgroundColor: token.colorFillSecondary
|
|
},
|
|
[`${componentCls}-track`]: {
|
|
backgroundColor: token.colorPrimaryBorderHover
|
|
},
|
|
[`${componentCls}-dot`]: {
|
|
borderColor: colorFillContentHover
|
|
},
|
|
[`${componentCls}-handle::after`]: {
|
|
boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorderHover}`
|
|
},
|
|
[`${componentCls}-dot-active`]: {
|
|
borderColor: token.colorPrimary
|
|
}
|
|
},
|
|
[`${componentCls}-handle`]: {
|
|
position: "absolute",
|
|
width: token.handleSize,
|
|
height: token.handleSize,
|
|
outline: "none",
|
|
[`${componentCls}-dragging`]: {
|
|
zIndex: 1
|
|
},
|
|
// 扩大选区
|
|
"&::before": {
|
|
content: '""',
|
|
position: "absolute",
|
|
insetInlineStart: -token.handleLineWidth,
|
|
insetBlockStart: -token.handleLineWidth,
|
|
width: token.handleSize + token.handleLineWidth * 2,
|
|
height: token.handleSize + token.handleLineWidth * 2,
|
|
backgroundColor: "transparent"
|
|
},
|
|
"&::after": {
|
|
content: '""',
|
|
position: "absolute",
|
|
insetBlockStart: 0,
|
|
insetInlineStart: 0,
|
|
width: token.handleSize,
|
|
height: token.handleSize,
|
|
backgroundColor: token.colorBgElevated,
|
|
boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorder}`,
|
|
borderRadius: "50%",
|
|
cursor: "pointer",
|
|
transition: `
|
|
inset-inline-start ${token.motionDurationMid},
|
|
inset-block-start ${token.motionDurationMid},
|
|
width ${token.motionDurationMid},
|
|
height ${token.motionDurationMid},
|
|
box-shadow ${token.motionDurationMid}
|
|
`
|
|
},
|
|
"&:hover, &:active, &:focus": {
|
|
"&::before": {
|
|
insetInlineStart: -((token.handleSizeHover - token.handleSize) / 2 + token.handleLineWidthHover),
|
|
insetBlockStart: -((token.handleSizeHover - token.handleSize) / 2 + token.handleLineWidthHover),
|
|
width: token.handleSizeHover + token.handleLineWidthHover * 2,
|
|
height: token.handleSizeHover + token.handleLineWidthHover * 2
|
|
},
|
|
"&::after": {
|
|
boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.colorPrimary}`,
|
|
width: token.handleSizeHover,
|
|
height: token.handleSizeHover,
|
|
insetInlineStart: (token.handleSize - token.handleSizeHover) / 2,
|
|
insetBlockStart: (token.handleSize - token.handleSizeHover) / 2
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-mark`]: {
|
|
position: "absolute",
|
|
fontSize: token.fontSize
|
|
},
|
|
[`${componentCls}-mark-text`]: {
|
|
position: "absolute",
|
|
display: "inline-block",
|
|
color: token.colorTextDescription,
|
|
textAlign: "center",
|
|
wordBreak: "keep-all",
|
|
cursor: "pointer",
|
|
userSelect: "none",
|
|
"&-active": {
|
|
color: token.colorText
|
|
}
|
|
},
|
|
[`${componentCls}-step`]: {
|
|
position: "absolute",
|
|
background: "transparent",
|
|
pointerEvents: "none"
|
|
},
|
|
[`${componentCls}-dot`]: {
|
|
position: "absolute",
|
|
width: dotSize,
|
|
height: dotSize,
|
|
backgroundColor: token.colorBgElevated,
|
|
border: `${token.handleLineWidth}px solid ${token.colorBorderSecondary}`,
|
|
borderRadius: "50%",
|
|
cursor: "pointer",
|
|
transition: `border-color ${token.motionDurationSlow}`,
|
|
"&-active": {
|
|
borderColor: token.colorPrimaryBorder
|
|
}
|
|
},
|
|
[`&${componentCls}-disabled`]: {
|
|
cursor: "not-allowed",
|
|
[`${componentCls}-rail`]: {
|
|
backgroundColor: `${token.colorFillSecondary} !important`
|
|
},
|
|
[`${componentCls}-track`]: {
|
|
backgroundColor: `${token.colorTextDisabled} !important`
|
|
},
|
|
[`
|
|
${componentCls}-dot
|
|
`]: {
|
|
backgroundColor: token.colorBgElevated,
|
|
borderColor: token.colorTextDisabled,
|
|
boxShadow: "none",
|
|
cursor: "not-allowed"
|
|
},
|
|
[`${componentCls}-handle::after`]: {
|
|
backgroundColor: token.colorBgElevated,
|
|
cursor: "not-allowed",
|
|
width: token.handleSize,
|
|
height: token.handleSize,
|
|
boxShadow: `0 0 0 ${token.handleLineWidth}px ${new TinyColor(token.colorTextDisabled).onBackground(token.colorBgContainer).toHexString()}`,
|
|
insetInlineStart: 0,
|
|
insetBlockStart: 0
|
|
},
|
|
[`
|
|
${componentCls}-mark-text,
|
|
${componentCls}-dot
|
|
`]: {
|
|
cursor: `not-allowed !important`
|
|
}
|
|
}
|
|
})
|
|
};
|
|
};
|
|
const genDirectionStyle = (token, horizontal) => {
|
|
const {
|
|
componentCls,
|
|
railSize,
|
|
handleSize,
|
|
dotSize
|
|
} = token;
|
|
const railPadding = horizontal ? "paddingBlock" : "paddingInline";
|
|
const full = horizontal ? "width" : "height";
|
|
const part = horizontal ? "height" : "width";
|
|
const handlePos = horizontal ? "insetBlockStart" : "insetInlineStart";
|
|
const markInset = horizontal ? "top" : "insetInlineStart";
|
|
return {
|
|
[railPadding]: railSize,
|
|
[part]: railSize * 3,
|
|
[`${componentCls}-rail`]: {
|
|
[full]: "100%",
|
|
[part]: railSize
|
|
},
|
|
[`${componentCls}-track`]: {
|
|
[part]: railSize
|
|
},
|
|
[`${componentCls}-handle`]: {
|
|
[handlePos]: (railSize * 3 - handleSize) / 2
|
|
},
|
|
[`${componentCls}-mark`]: {
|
|
// Reset all
|
|
insetInlineStart: 0,
|
|
top: 0,
|
|
[markInset]: handleSize,
|
|
[full]: "100%"
|
|
},
|
|
[`${componentCls}-step`]: {
|
|
// Reset all
|
|
insetInlineStart: 0,
|
|
top: 0,
|
|
[markInset]: railSize,
|
|
[full]: "100%",
|
|
[part]: railSize
|
|
},
|
|
[`${componentCls}-dot`]: {
|
|
position: "absolute",
|
|
[handlePos]: (railSize - dotSize) / 2
|
|
}
|
|
};
|
|
};
|
|
const genHorizontalStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
marginPartWithMark
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-horizontal`]: _extends(_extends({}, genDirectionStyle(token, true)), {
|
|
[`&${componentCls}-with-marks`]: {
|
|
marginBottom: marginPartWithMark
|
|
}
|
|
})
|
|
};
|
|
};
|
|
const genVerticalStyle = (token) => {
|
|
const {
|
|
componentCls
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-vertical`]: _extends(_extends({}, genDirectionStyle(token, false)), {
|
|
height: "100%"
|
|
})
|
|
};
|
|
};
|
|
const useStyle = genComponentStyleHook("Slider", (token) => {
|
|
const sliderToken = merge(token, {
|
|
marginPart: (token.controlHeight - token.controlSize) / 2,
|
|
marginFull: token.controlSize / 2,
|
|
marginPartWithMark: token.controlHeightLG - token.controlSize
|
|
});
|
|
return [genBaseStyle(sliderToken), genHorizontalStyle(sliderToken), genVerticalStyle(sliderToken)];
|
|
}, (token) => {
|
|
const increaseHandleWidth = 1;
|
|
const controlSize = token.controlHeightLG / 4;
|
|
const controlSizeHover = token.controlHeightSM / 2;
|
|
const handleLineWidth = token.lineWidth + increaseHandleWidth;
|
|
const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3;
|
|
return {
|
|
controlSize,
|
|
railSize: 4,
|
|
handleSize: controlSize,
|
|
handleSizeHover: controlSizeHover,
|
|
dotSize: 8,
|
|
handleLineWidth,
|
|
handleLineWidthHover
|
|
};
|
|
});
|
|
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 defaultTipFormatter = (value) => typeof value === "number" ? value.toString() : "";
|
|
const sliderProps = () => ({
|
|
id: String,
|
|
prefixCls: String,
|
|
tooltipPrefixCls: String,
|
|
range: someType([Boolean, Object]),
|
|
reverse: booleanType(),
|
|
min: Number,
|
|
max: Number,
|
|
step: someType([Object, Number]),
|
|
marks: objectType(),
|
|
dots: booleanType(),
|
|
value: someType([Array, Number]),
|
|
defaultValue: someType([Array, Number]),
|
|
included: booleanType(),
|
|
disabled: booleanType(),
|
|
vertical: booleanType(),
|
|
tipFormatter: someType([Function, Object], () => defaultTipFormatter),
|
|
tooltipOpen: booleanType(),
|
|
/** @deprecated `tooltipVisible` is deprecated. Please use `tooltipOpen` instead. */
|
|
tooltipVisible: booleanType(),
|
|
tooltipPlacement: stringType(),
|
|
getTooltipPopupContainer: functionType(),
|
|
autofocus: booleanType(),
|
|
handleStyle: someType([Array, Object]),
|
|
trackStyle: someType([Array, Object]),
|
|
onChange: functionType(),
|
|
onAfterChange: functionType(),
|
|
onFocus: functionType(),
|
|
onBlur: functionType(),
|
|
"onUpdate:value": functionType()
|
|
});
|
|
const Slider = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "ASlider",
|
|
inheritAttrs: false,
|
|
props: sliderProps(),
|
|
// emits: ['update:value', 'change', 'afterChange', 'blur'],
|
|
slots: Object,
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots,
|
|
emit,
|
|
expose
|
|
} = _ref;
|
|
const {
|
|
prefixCls,
|
|
rootPrefixCls,
|
|
direction,
|
|
getPopupContainer,
|
|
configProvider
|
|
} = useConfigInject("slider", props);
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
const formItemContext = useInjectFormItemContext();
|
|
const sliderRef = ref();
|
|
const visibles = ref({});
|
|
const toggleTooltipOpen = (index, visible) => {
|
|
visibles.value[index] = visible;
|
|
};
|
|
const tooltipPlacement = computed(() => {
|
|
if (props.tooltipPlacement) {
|
|
return props.tooltipPlacement;
|
|
}
|
|
if (!props.vertical) {
|
|
return "top";
|
|
}
|
|
return direction.value === "rtl" ? "left" : "right";
|
|
});
|
|
const focus = () => {
|
|
var _a;
|
|
(_a = sliderRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
|
};
|
|
const blur = () => {
|
|
var _a;
|
|
(_a = sliderRef.value) === null || _a === void 0 ? void 0 : _a.blur();
|
|
};
|
|
const handleChange = (val) => {
|
|
emit("update:value", val);
|
|
emit("change", val);
|
|
formItemContext.onFieldChange();
|
|
};
|
|
const handleBlur = (e) => {
|
|
emit("blur", e);
|
|
};
|
|
expose({
|
|
focus,
|
|
blur
|
|
});
|
|
const handleWithTooltip = (_a) => {
|
|
var {
|
|
tooltipPrefixCls
|
|
} = _a, _b = _a.info, {
|
|
value,
|
|
dragging,
|
|
index
|
|
} = _b, restProps = __rest(_b, ["value", "dragging", "index"]);
|
|
const {
|
|
tipFormatter,
|
|
tooltipOpen = props.tooltipVisible,
|
|
getTooltipPopupContainer
|
|
} = props;
|
|
const isTipFormatter = tipFormatter ? visibles.value[index] || dragging : false;
|
|
const open = tooltipOpen || tooltipOpen === void 0 && isTipFormatter;
|
|
return createVNode(SliderTooltip, {
|
|
"prefixCls": tooltipPrefixCls,
|
|
"title": tipFormatter ? tipFormatter(value) : "",
|
|
"open": open,
|
|
"placement": tooltipPlacement.value,
|
|
"transitionName": `${rootPrefixCls.value}-zoom-down`,
|
|
"key": index,
|
|
"overlayClassName": `${prefixCls.value}-tooltip`,
|
|
"getPopupContainer": getTooltipPopupContainer || (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value)
|
|
}, {
|
|
default: () => [createVNode(VcHandle, _objectSpread(_objectSpread({}, restProps), {}, {
|
|
"value": value,
|
|
"onMouseenter": () => toggleTooltipOpen(index, true),
|
|
"onMouseleave": () => toggleTooltipOpen(index, false)
|
|
}), null)]
|
|
});
|
|
};
|
|
return () => {
|
|
const {
|
|
tooltipPrefixCls: customizeTooltipPrefixCls,
|
|
range,
|
|
id = formItemContext.id.value
|
|
} = props, restProps = __rest(props, ["tooltipPrefixCls", "range", "id"]);
|
|
const tooltipPrefixCls = configProvider.getPrefixCls("tooltip", customizeTooltipPrefixCls);
|
|
const cls = classNames(attrs.class, {
|
|
[`${prefixCls.value}-rtl`]: direction.value === "rtl"
|
|
}, hashId.value);
|
|
if (direction.value === "rtl" && !restProps.vertical) {
|
|
restProps.reverse = !restProps.reverse;
|
|
}
|
|
let draggableTrack;
|
|
if (typeof range === "object") {
|
|
draggableTrack = range.draggableTrack;
|
|
}
|
|
if (range) {
|
|
return wrapSSR(createVNode(VcRange, _objectSpread(_objectSpread(_objectSpread({}, attrs), restProps), {}, {
|
|
"step": restProps.step,
|
|
"draggableTrack": draggableTrack,
|
|
"class": cls,
|
|
"ref": sliderRef,
|
|
"handle": (info) => handleWithTooltip({
|
|
tooltipPrefixCls,
|
|
prefixCls: prefixCls.value,
|
|
info
|
|
}),
|
|
"prefixCls": prefixCls.value,
|
|
"onChange": handleChange,
|
|
"onBlur": handleBlur
|
|
}), {
|
|
mark: slots.mark
|
|
}));
|
|
}
|
|
return wrapSSR(createVNode(VcSlider, _objectSpread(_objectSpread(_objectSpread({}, attrs), restProps), {}, {
|
|
"id": id,
|
|
"step": restProps.step,
|
|
"class": cls,
|
|
"ref": sliderRef,
|
|
"handle": (info) => handleWithTooltip({
|
|
tooltipPrefixCls,
|
|
prefixCls: prefixCls.value,
|
|
info
|
|
}),
|
|
"prefixCls": prefixCls.value,
|
|
"onChange": handleChange,
|
|
"onBlur": handleBlur
|
|
}), {
|
|
mark: slots.mark
|
|
}));
|
|
};
|
|
}
|
|
});
|
|
const Slider$1 = withInstall(Slider);
|
|
function tryOnScopeDispose(fn) {
|
|
if (getCurrentScope()) {
|
|
onScopeDispose(fn);
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
|
|
const _queue = /* @__PURE__ */ new WeakMap();
|
|
function useRouteQuery(name, defaultValue, options = {}) {
|
|
const {
|
|
mode = "replace",
|
|
route = useRoute(),
|
|
router = useRouter(),
|
|
transform
|
|
} = options;
|
|
let transformGet = (value) => value;
|
|
let transformSet = (value) => value;
|
|
if (typeof transform === "function") {
|
|
transformGet = transform;
|
|
} else if (transform) {
|
|
if (transform.get)
|
|
transformGet = transform.get;
|
|
if (transform.set)
|
|
transformSet = transform.set;
|
|
}
|
|
if (!_queue.has(router))
|
|
_queue.set(router, /* @__PURE__ */ new Map());
|
|
const _queriesQueue = _queue.get(router);
|
|
let query = route.query[name];
|
|
tryOnScopeDispose(() => {
|
|
query = void 0;
|
|
});
|
|
let _trigger;
|
|
const proxy = customRef((track, trigger) => {
|
|
_trigger = trigger;
|
|
return {
|
|
get() {
|
|
track();
|
|
return transformGet(query !== void 0 ? query : toValue(defaultValue));
|
|
},
|
|
set(v) {
|
|
v = transformSet(v);
|
|
if (query === v)
|
|
return;
|
|
query = v === toValue(defaultValue) ? void 0 : v;
|
|
_queriesQueue.set(name, v === toValue(defaultValue) ? void 0 : v);
|
|
trigger();
|
|
nextTick(() => {
|
|
if (_queriesQueue.size === 0)
|
|
return;
|
|
const newQueries = Object.fromEntries(_queriesQueue.entries());
|
|
_queriesQueue.clear();
|
|
const { params, query: query2, hash } = route;
|
|
router[toValue(mode)]({
|
|
params,
|
|
query: { ...query2, ...newQueries },
|
|
hash
|
|
});
|
|
});
|
|
}
|
|
};
|
|
});
|
|
watch(
|
|
() => route.query[name],
|
|
(v) => {
|
|
if (query === transformGet(v))
|
|
return;
|
|
query = v;
|
|
_trigger();
|
|
},
|
|
{ flush: "sync" }
|
|
);
|
|
return proxy;
|
|
}
|
|
async function getCollection() {
|
|
return await myAxios.get("/site/collection/menu");
|
|
}
|
|
const useCategoryStore = defineStore("category", () => {
|
|
const _category = ref([]);
|
|
const category = computed(() => {
|
|
return _category.value.sort((a, b) => {
|
|
return a.position - b.position;
|
|
});
|
|
});
|
|
async function getCategory() {
|
|
_category.value = await getCollection();
|
|
}
|
|
const getCategorySubs = (ids) => {
|
|
return category.value.filter((x) => ids.includes(x.parent_id));
|
|
};
|
|
const categoryWithoutSub = computed(() => {
|
|
return category.value.filter((x) => !x.parent_id);
|
|
});
|
|
return {
|
|
_category,
|
|
category,
|
|
getCategory,
|
|
getCategorySubs,
|
|
categoryWithoutSub
|
|
};
|
|
});
|
|
const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
__name: "BasicActionSheet",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
cancelText: { default: "\u0628\u0627\u0632\u06AF\u0634\u062A" },
|
|
showButton: { type: Boolean, default: false },
|
|
showCancel: { type: Boolean, default: true },
|
|
showOk: { type: Boolean, default: true },
|
|
okText: { default: "\u062B\u0628\u062A" }
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_VanActionSheet = stdin_default;
|
|
const _component_AButton = Button;
|
|
_push(ssrRenderComponent(_component_VanActionSheet, mergeProps({
|
|
teleport: "body",
|
|
dir: "ltr",
|
|
"close-on-click-overlay": true
|
|
}, _attrs), {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div class="justify-center cursor-pointer flex mt-1"${_scopeId}><span class="rounded-sm w-12 border-t-2 border-t-solid border-t-gray-500 mt-2"${_scopeId}></span></div><div class="mx-4 mb-5 mt-3 max-h-90% overflow-y-auto"${_scopeId}>`);
|
|
ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
|
|
if (props.showButton && (props.showCancel || props.showOk)) {
|
|
_push2(`<div class="${ssrRenderClass([[!props.showOk || !props.showCancel ? "grid-cols-1" : "grid-cols-12"], "grid gap-3 mb-5 mt-2"])}"${_scopeId}>`);
|
|
if (props.showCancel) {
|
|
_push2(ssrRenderComponent(_component_AButton, {
|
|
onClick: ($event) => _ctx.$emit("cancel"),
|
|
type: "primary",
|
|
class: [{ "col-span-4": props.showOk }],
|
|
size: "large",
|
|
ghost: "",
|
|
block: ""
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(props.cancelText)}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(props.cancelText), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
if (props.showOk) {
|
|
_push2(ssrRenderComponent(_component_AButton, {
|
|
onClick: ($event) => _ctx.$emit("ok"),
|
|
type: "primary",
|
|
class: [{ "col-span-8": props.showCancel }],
|
|
size: "large",
|
|
block: ""
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(props.okText)}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(props.okText), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
_push2(`</div>`);
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
_push2(`</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", {
|
|
class: "justify-center cursor-pointer flex mt-1",
|
|
onClick: ($event) => _ctx.$emit("update:show", false)
|
|
}, [
|
|
createVNode("span", { class: "rounded-sm w-12 border-t-2 border-t-solid border-t-gray-500 mt-2" })
|
|
], 8, ["onClick"]),
|
|
createVNode("div", { class: "mx-4 mb-5 mt-3 max-h-90% overflow-y-auto" }, [
|
|
renderSlot(_ctx.$slots, "default"),
|
|
props.showButton && (props.showCancel || props.showOk) ? (openBlock(), createBlock("div", {
|
|
key: 0,
|
|
class: ["grid gap-3 mb-5 mt-2", [!props.showOk || !props.showCancel ? "grid-cols-1" : "grid-cols-12"]]
|
|
}, [
|
|
props.showCancel ? (openBlock(), createBlock(_component_AButton, {
|
|
key: 0,
|
|
onClick: ($event) => _ctx.$emit("cancel"),
|
|
type: "primary",
|
|
class: [{ "col-span-4": props.showOk }],
|
|
size: "large",
|
|
ghost: "",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(props.cancelText), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick", "class"])) : createCommentVNode("", true),
|
|
props.showOk ? (openBlock(), createBlock(_component_AButton, {
|
|
key: 1,
|
|
onClick: ($event) => _ctx.$emit("ok"),
|
|
type: "primary",
|
|
class: [{ "col-span-8": props.showCancel }],
|
|
size: "large",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(props.okText), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick", "class"])) : createCommentVNode("", true)
|
|
], 2)) : createCommentVNode("", true)
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 3
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$f = _sfc_main$f.setup;
|
|
_sfc_main$f.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/BasicPacks/BasicActionSheet.vue");
|
|
return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
__name: "SortProductSheet",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
open: { type: Boolean, default: false },
|
|
value: {}
|
|
},
|
|
emits: ["update:open", "update:value", "success"],
|
|
setup(__props, { emit: __emit }) {
|
|
const config = useConfigStore();
|
|
const props = __props;
|
|
const emits = __emit;
|
|
const orderSelected = computed({
|
|
get() {
|
|
return props.value;
|
|
},
|
|
set(value) {
|
|
emits("update:value", value);
|
|
}
|
|
});
|
|
const visible = computed({
|
|
get() {
|
|
return props.open;
|
|
},
|
|
set(value) {
|
|
emits("update:open", value);
|
|
}
|
|
});
|
|
async function handleChangeOrder(orderItem) {
|
|
orderSelected.value = orderItem;
|
|
closeSheet();
|
|
emits("success");
|
|
}
|
|
function closeSheet() {
|
|
visible.value = false;
|
|
}
|
|
const sortProducts = ref([
|
|
{ title: config.useString("newest"), order: "-created_at" },
|
|
{ title: config.useString("popular"), order: "-count_fav" },
|
|
{ title: config.useString("bestSeller"), order: "-count_order" },
|
|
{ title: config.useString("mostVisited"), order: "-count_view" },
|
|
{ title: config.useString("cheapest"), order: "+price" },
|
|
{ title: config.useString("mostExpensive"), order: "-price" }
|
|
]);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_a_menu = Menu;
|
|
const _component_a_menu_item = __nuxt_component_1;
|
|
_push(ssrRenderComponent(_sfc_main$f, mergeProps({
|
|
"close-on-click-overlay": "",
|
|
show: visible.value,
|
|
"onUpdate:show": ($event) => visible.value = $event,
|
|
onClose: closeSheet
|
|
}, _attrs), {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
var _a, _b;
|
|
if (_push2) {
|
|
_push2(`<div class="overflow-y-auto px-2 mt3"${_scopeId}><div class="pb-5"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_component_a_menu, {
|
|
selectedKeys: [(_a = orderSelected.value) == null ? void 0 : _a.order],
|
|
class: "!border-none select-none"
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`<!--[-->`);
|
|
ssrRenderList(sortProducts.value, (item, index) => {
|
|
_push3(ssrRenderComponent(_component_a_menu_item, {
|
|
key: item.order,
|
|
onClick: ($event) => handleChangeOrder(item)
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(`${ssrInterpolate(item.title)}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(item.title), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 2
|
|
}, _parent3, _scopeId2));
|
|
});
|
|
_push3(`<!--]-->`);
|
|
} else {
|
|
return [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(sortProducts.value, (item, index) => {
|
|
return openBlock(), createBlock(_component_a_menu_item, {
|
|
key: item.order,
|
|
onClick: ($event) => handleChangeOrder(item)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(item.title), 1)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["onClick"]);
|
|
}), 128))
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(`</div></div>`);
|
|
_push2(ssrRenderComponent(_sfc_main$g, {
|
|
block: "",
|
|
danger: "",
|
|
onClick: closeSheet
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(unref(config).useString("cancel"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("cancel")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "overflow-y-auto px-2 mt3" }, [
|
|
createVNode("div", { class: "pb-5" }, [
|
|
createVNode(_component_a_menu, {
|
|
selectedKeys: [(_b = orderSelected.value) == null ? void 0 : _b.order],
|
|
class: "!border-none select-none"
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(sortProducts.value, (item, index) => {
|
|
return openBlock(), createBlock(_component_a_menu_item, {
|
|
key: item.order,
|
|
onClick: ($event) => handleChangeOrder(item)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(item.title), 1)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["onClick"]);
|
|
}), 128))
|
|
]),
|
|
_: 1
|
|
}, 8, ["selectedKeys"])
|
|
])
|
|
]),
|
|
createVNode(_sfc_main$g, {
|
|
block: "",
|
|
danger: "",
|
|
onClick: closeSheet
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("cancel")), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$e = _sfc_main$e.setup;
|
|
_sfc_main$e.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/search/mainSearch/components/SortProductSheet.vue");
|
|
return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
__name: "CollapsePanel",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(ssrRenderComponent(unref(__nuxt_component_6), _attrs, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
|
|
} else {
|
|
return [
|
|
renderSlot(_ctx.$slots, "default")
|
|
];
|
|
}
|
|
}),
|
|
_: 3
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$d = _sfc_main$d.setup;
|
|
_sfc_main$d.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/search/mainSearch/components/CollapsePanel.vue");
|
|
return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
__name: "CollapsePanelFilter",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
options: { default: () => [] },
|
|
value: { default: () => [] }
|
|
},
|
|
emits: ["update:value"],
|
|
setup(__props, { emit: __emit }) {
|
|
const props = __props;
|
|
const config = useConfigStore();
|
|
const text = ref("");
|
|
const { prefixCls } = usePrefix("collapse-filter");
|
|
const emit = __emit;
|
|
const selectValue = computed({
|
|
set: (val) => {
|
|
emit("update:value", val);
|
|
},
|
|
get: () => {
|
|
return props.value;
|
|
}
|
|
});
|
|
const list = computed(() => {
|
|
if (text.value) return props.options.filter((item) => {
|
|
var _a;
|
|
return (_a = item.label) == null ? void 0 : _a.includes(text.value);
|
|
});
|
|
return props.options;
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_a_input = Input;
|
|
_push(ssrRenderComponent(_sfc_main$d, mergeProps({
|
|
class: [unref(prefixCls)]
|
|
}, _attrs), {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(_component_a_input, {
|
|
value: text.value,
|
|
"onUpdate:value": ($event) => text.value = $event,
|
|
bordered: false,
|
|
size: "large",
|
|
placeholder: unref(config).useString("search"),
|
|
class: "input-search myCustomCollapseSearch"
|
|
}, {
|
|
prefix: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`<img${ssrRenderAttr("src", _imports_0)}${ssrRenderAttr("alt", unref(reactiveProjectName))} class="w-4"${_scopeId2}>`);
|
|
} else {
|
|
return [
|
|
createVNode("img", {
|
|
src: _imports_0,
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-4"
|
|
}, null, 8, ["alt"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(`<div class="max-h-60 mt-4 overflow-y-auto w-full px-2"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(unref(CheckboxGroup), {
|
|
value: selectValue.value,
|
|
"onUpdate:value": ($event) => selectValue.value = $event
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`<div class="flex flex-col gap-4 font-medium !text-gray-600"${_scopeId2}><!--[-->`);
|
|
ssrRenderList(list.value, (item, index) => {
|
|
_push3(ssrRenderComponent(unref(Checkbox), {
|
|
key: index,
|
|
value: item.value
|
|
}, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(`<div class="truncate w-10rem"${_scopeId3}>${ssrInterpolate(item.label)}</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "truncate w-10rem" }, toDisplayString(item.label), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 2
|
|
}, _parent3, _scopeId2));
|
|
});
|
|
_push3(`<!--]--></div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "flex flex-col gap-4 font-medium !text-gray-600" }, [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(list.value, (item, index) => {
|
|
return openBlock(), createBlock(unref(Checkbox), {
|
|
key: index,
|
|
value: item.value
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("div", { class: "truncate w-10rem" }, toDisplayString(item.label), 1)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["value"]);
|
|
}), 128))
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
} else {
|
|
return [
|
|
createVNode(_component_a_input, {
|
|
value: text.value,
|
|
"onUpdate:value": ($event) => text.value = $event,
|
|
bordered: false,
|
|
size: "large",
|
|
placeholder: unref(config).useString("search"),
|
|
class: "input-search myCustomCollapseSearch"
|
|
}, {
|
|
prefix: withCtx(() => [
|
|
createVNode("img", {
|
|
src: _imports_0,
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-4"
|
|
}, null, 8, ["alt"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value", "placeholder"]),
|
|
createVNode("div", { class: "max-h-60 mt-4 overflow-y-auto w-full px-2" }, [
|
|
createVNode(unref(CheckboxGroup), {
|
|
value: selectValue.value,
|
|
"onUpdate:value": ($event) => selectValue.value = $event
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("div", { class: "flex flex-col gap-4 font-medium !text-gray-600" }, [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(list.value, (item, index) => {
|
|
return openBlock(), createBlock(unref(Checkbox), {
|
|
key: index,
|
|
value: item.value
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("div", { class: "truncate w-10rem" }, toDisplayString(item.label), 1)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["value"]);
|
|
}), 128))
|
|
])
|
|
]),
|
|
_: 1
|
|
}, 8, ["value", "onUpdate:value"])
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$c = _sfc_main$c.setup;
|
|
_sfc_main$c.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/search/mainSearch/components/CollapsePanelFilter.vue");
|
|
return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
|
|
};
|
|
const getBrandsList = async (search) => {
|
|
let queryBuilder = supabase.from("brands").select("*");
|
|
if (search == null ? void 0 : search.length)
|
|
queryBuilder.like("title", `%${search}%`);
|
|
return (await queryBuilder.select("*").order("created_at", { ascending: false })).data;
|
|
};
|
|
const getCategoriesList = async (search) => {
|
|
let queryBuilder = supabase.from("collections").select("*");
|
|
if (search == null ? void 0 : search.length)
|
|
queryBuilder.like("title", `%${search}%`);
|
|
return (await queryBuilder.select("*").order("created_at", { ascending: false })).data;
|
|
};
|
|
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
__name: "Filters",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
price: { default: () => [] },
|
|
selectedBrand: { default: () => [] },
|
|
selectedCollection: { default: () => [] }
|
|
},
|
|
emits: ["update:price", "update:selectedBrand", "update:selectedCollection", "change"],
|
|
setup(__props, { emit: __emit }) {
|
|
useCategoryStore();
|
|
const activeKey = ref([0]);
|
|
const maxPrice = ref(0);
|
|
const _price = ref([0, 0]);
|
|
const config = useConfigStore();
|
|
const brands = ref([]);
|
|
const categories = ref([]);
|
|
const props = __props;
|
|
const { prefixCls } = usePrefix("shop-filter");
|
|
const emit = __emit;
|
|
watch(
|
|
() => props.price,
|
|
() => {
|
|
if (props.price.length > 0) _price.value = props.price;
|
|
else _price.value = [1e4, maxPrice.value];
|
|
}
|
|
);
|
|
const brandOptions = computed(() => {
|
|
return brands.value.map((item) => {
|
|
return { label: item.title, value: item.id };
|
|
});
|
|
});
|
|
const collectionOptions = computed(() => {
|
|
return categories.value.map((item) => {
|
|
return { label: item.title, value: item.id };
|
|
});
|
|
});
|
|
const _selectedCollection = computed({
|
|
set: (val) => {
|
|
emit("update:selectedCollection", val);
|
|
emit("change");
|
|
},
|
|
get: () => {
|
|
return props.selectedCollection;
|
|
}
|
|
});
|
|
function applyFilter(val) {
|
|
emit("update:price", val);
|
|
emit("change");
|
|
}
|
|
const _selectedBrand = computed({
|
|
set: (val) => {
|
|
emit("update:selectedBrand", val);
|
|
emit("change");
|
|
},
|
|
get: () => {
|
|
return props.selectedBrand;
|
|
}
|
|
});
|
|
const router = useRouter();
|
|
const search = ref("");
|
|
watch(
|
|
() => router.currentRoute,
|
|
() => {
|
|
if (router.currentRoute.value.query.search) {
|
|
search.value = router.currentRoute.value.query.search;
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
function handleSearch() {
|
|
router.push({ name: "shop", query: { search: search.value } });
|
|
}
|
|
watchDebounced(
|
|
search,
|
|
() => {
|
|
handleSearch();
|
|
},
|
|
{ debounce: 300 }
|
|
);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(mergeProps({
|
|
class: [[unref(prefixCls)], "overflow-y-auto pb-5 max-h-60vh"]
|
|
}, _attrs))}>`);
|
|
_push(ssrRenderComponent(unref(Collapse), {
|
|
activeKey: activeKey.value,
|
|
"onUpdate:activeKey": ($event) => activeKey.value = $event,
|
|
accordion: "",
|
|
bordered: false,
|
|
"expand-icon-position": "end",
|
|
class: "filter-collapse select-none"
|
|
}, {
|
|
expandIcon: withCtx(({ isActive }, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div${_scopeId}>`);
|
|
_push2(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:arrow-left-1",
|
|
class: ["!text-gray-400 transition-all", [{ "rotate--90": isActive }]],
|
|
size: "18"
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", null, [
|
|
createVNode(BasicIconOld, {
|
|
icon: "vuesax-linear:arrow-left-1",
|
|
class: ["!text-gray-400 transition-all", [{ "rotate--90": isActive }]],
|
|
size: "18"
|
|
}, null, 8, ["class"])
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div class="p-4"${_scopeId}>${ssrInterpolate(unref(config).useString("price"))} <div class="bottom-divider"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(unref(Slider$1), {
|
|
value: _price.value,
|
|
"onUpdate:value": ($event) => _price.value = $event,
|
|
max: maxPrice.value,
|
|
min: 1e4,
|
|
step: 1e4,
|
|
range: "",
|
|
reverse: "",
|
|
onAfterChange: applyFilter
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`<div class="flex items-center justify-between"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(unref(Input), {
|
|
value: unref(usePrice)(_price.value[0], true, ""),
|
|
class: "w-20",
|
|
readonly: ""
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`<span class="text-gray-600 text-lg"${_scopeId}>${ssrInterpolate(unref(config).priceUnit)}</span>`);
|
|
_push2(ssrRenderComponent(unref(Input), {
|
|
value: unref(usePrice)(_price.value[1], true, ""),
|
|
class: "w-20",
|
|
readonly: ""
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div></div></div>`);
|
|
_push2(ssrRenderComponent(_sfc_main$c, {
|
|
value: _selectedCollection.value,
|
|
"onUpdate:value": ($event) => _selectedCollection.value = $event,
|
|
header: unref(config).useString("category"),
|
|
options: collectionOptions.value,
|
|
class: "bottom-divider"
|
|
}, null, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_sfc_main$c, {
|
|
value: _selectedBrand.value,
|
|
"onUpdate:value": ($event) => _selectedBrand.value = $event,
|
|
header: unref(config).useString("brand"),
|
|
options: brandOptions.value
|
|
}, null, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "p-4" }, [
|
|
createTextVNode(toDisplayString(unref(config).useString("price")) + " ", 1),
|
|
createVNode("div", { class: "bottom-divider" }, [
|
|
createVNode(unref(Slider$1), {
|
|
value: _price.value,
|
|
"onUpdate:value": ($event) => _price.value = $event,
|
|
max: maxPrice.value,
|
|
min: 1e4,
|
|
step: 1e4,
|
|
range: "",
|
|
reverse: "",
|
|
onAfterChange: applyFilter
|
|
}, null, 8, ["value", "onUpdate:value", "max"]),
|
|
createVNode("div", { class: "flex items-center justify-between" }, [
|
|
createVNode(unref(Input), {
|
|
value: unref(usePrice)(_price.value[0], true, ""),
|
|
class: "w-20",
|
|
readonly: ""
|
|
}, null, 8, ["value"]),
|
|
createVNode("span", { class: "text-gray-600 text-lg" }, toDisplayString(unref(config).priceUnit), 1),
|
|
createVNode(unref(Input), {
|
|
value: unref(usePrice)(_price.value[1], true, ""),
|
|
class: "w-20",
|
|
readonly: ""
|
|
}, null, 8, ["value"])
|
|
])
|
|
])
|
|
]),
|
|
createVNode(_sfc_main$c, {
|
|
value: _selectedCollection.value,
|
|
"onUpdate:value": ($event) => _selectedCollection.value = $event,
|
|
header: unref(config).useString("category"),
|
|
options: collectionOptions.value,
|
|
class: "bottom-divider"
|
|
}, null, 8, ["value", "onUpdate:value", "header", "options"]),
|
|
createVNode(_sfc_main$c, {
|
|
value: _selectedBrand.value,
|
|
"onUpdate:value": ($event) => _selectedBrand.value = $event,
|
|
header: unref(config).useString("brand"),
|
|
options: brandOptions.value
|
|
}, null, 8, ["value", "onUpdate:value", "header", "options"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$b = _sfc_main$b.setup;
|
|
_sfc_main$b.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/search/mainSearch/components/Filters.vue");
|
|
return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
__name: "FilterProductSheet",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
open: { type: Boolean, default: false },
|
|
value: {}
|
|
},
|
|
emits: ["update:open", "update:value", "success"],
|
|
setup(__props, { emit: __emit }) {
|
|
const config = useConfigStore();
|
|
const props = __props;
|
|
const emits = __emit;
|
|
const filterItems = computed({
|
|
get() {
|
|
return props.value;
|
|
},
|
|
set(value) {
|
|
emits("update:value", value);
|
|
}
|
|
});
|
|
const visible = computed({
|
|
get() {
|
|
return props.open;
|
|
},
|
|
set(value) {
|
|
emits("update:open", value);
|
|
}
|
|
});
|
|
const deleteFilters = async () => {
|
|
filterItems.value.brand = [];
|
|
filterItems.value.collection = [];
|
|
filterItems.value.price = [];
|
|
await emits("success");
|
|
};
|
|
function closeSheet() {
|
|
visible.value = false;
|
|
}
|
|
ref([
|
|
{ title: config.useString("newest"), order: "-created_at" },
|
|
{ title: config.useString("popular"), order: "-count_fav" },
|
|
{ title: config.useString("bestSeller"), order: "-count_order" },
|
|
{ title: config.useString("mostVisited"), order: "-count_view" },
|
|
{ title: config.useString("cheapest"), order: "+price" },
|
|
{ title: config.useString("mostExpensive"), order: "-price" }
|
|
]);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(ssrRenderComponent(_sfc_main$f, mergeProps({
|
|
"close-on-click-overlay": "",
|
|
show: visible.value,
|
|
"onUpdate:show": ($event) => visible.value = $event,
|
|
onClose: closeSheet
|
|
}, _attrs), {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<div class="overflow-y-auto"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_sfc_main$b, {
|
|
price: filterItems.value.price,
|
|
"onUpdate:price": ($event) => filterItems.value.price = $event,
|
|
"selected-brand": filterItems.value.brand,
|
|
"onUpdate:selectedBrand": ($event) => filterItems.value.brand = $event,
|
|
"selected-collection": filterItems.value.collection,
|
|
"onUpdate:selectedCollection": ($event) => filterItems.value.collection = $event
|
|
}, null, _parent2, _scopeId));
|
|
_push2(`</div><div class="flex gap-3 bg-white pb-5"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(_sfc_main$g, {
|
|
class: "w-2/3 bg-primary",
|
|
size: "large",
|
|
type: "primary",
|
|
onClick: ($event) => emits("success")
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(unref(config).useString("filter"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("filter")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_sfc_main$g, {
|
|
class: "w-1/3",
|
|
size: "large",
|
|
onClick: deleteFilters
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(unref(config).useString("reset"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("reset")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(`</div>`);
|
|
_push2(ssrRenderComponent(_sfc_main$g, {
|
|
block: "",
|
|
danger: "",
|
|
onClick: closeSheet
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(unref(config).useString("cancel"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("cancel")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "overflow-y-auto" }, [
|
|
createVNode(_sfc_main$b, {
|
|
price: filterItems.value.price,
|
|
"onUpdate:price": ($event) => filterItems.value.price = $event,
|
|
"selected-brand": filterItems.value.brand,
|
|
"onUpdate:selectedBrand": ($event) => filterItems.value.brand = $event,
|
|
"selected-collection": filterItems.value.collection,
|
|
"onUpdate:selectedCollection": ($event) => filterItems.value.collection = $event
|
|
}, null, 8, ["price", "onUpdate:price", "selected-brand", "onUpdate:selectedBrand", "selected-collection", "onUpdate:selectedCollection"])
|
|
]),
|
|
createVNode("div", { class: "flex gap-3 bg-white pb-5" }, [
|
|
createVNode(_sfc_main$g, {
|
|
class: "w-2/3 bg-primary",
|
|
size: "large",
|
|
type: "primary",
|
|
onClick: ($event) => emits("success")
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("filter")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode(_sfc_main$g, {
|
|
class: "w-1/3",
|
|
size: "large",
|
|
onClick: deleteFilters
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("reset")), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
createVNode(_sfc_main$g, {
|
|
block: "",
|
|
danger: "",
|
|
onClick: closeSheet
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("cancel")), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$a = _sfc_main$a.setup;
|
|
_sfc_main$a.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/search/mainSearch/components/FilterProductSheet.vue");
|
|
return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
__name: "ProductSearchList",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
search: {}
|
|
},
|
|
async setup(__props) {
|
|
let __temp, __restore;
|
|
const router = useRouter$1();
|
|
const config = useConfigStore();
|
|
const props = __props;
|
|
const posts = ref([]);
|
|
const total = ref(0);
|
|
const search = useRouteQuery("search", "");
|
|
const videoThumbnails = ref({});
|
|
const seller = computed(() => {
|
|
var _a;
|
|
return (_a = config.sellerConfig) == null ? void 0 : _a.store;
|
|
});
|
|
const orderSelected = ref();
|
|
const pagination = ref({ limit: 30, page: 0 });
|
|
const paginationClone = cloneDeep(pagination.value);
|
|
const showOrderAction = ref(false);
|
|
const products = ref([]);
|
|
const showFilterAction = ref(false);
|
|
const categoryStore = useCategoryStore();
|
|
const filterItems = reactive({
|
|
brand: [],
|
|
collection: [],
|
|
price: []
|
|
});
|
|
watch(showOrderAction, () => {
|
|
console.log(showOrderAction.value);
|
|
});
|
|
const { data } = ([__temp, __restore] = withAsyncContext(() => useAsyncData("productSearch", getProductList)), __temp = await __temp, __restore(), __temp);
|
|
async function applyFilter() {
|
|
showOrderAction.value = false;
|
|
pagination.value = cloneDeep(paginationClone);
|
|
products.value = [];
|
|
showFilterAction.value = false;
|
|
await getProductList();
|
|
}
|
|
async function getProductList() {
|
|
var _a2, _b2;
|
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
|
|
try {
|
|
loading.value = true;
|
|
const filters = [];
|
|
if (filterItems.brand.length > 0 || ((_c = (_b = (_a = router.currentRoute.value) == null ? void 0 : _a.query) == null ? void 0 : _b.brand) == null ? void 0 : _c.length)) {
|
|
filters.push({
|
|
field: "brand_id",
|
|
op: "in",
|
|
value: ((_d = filterItems.brand) == null ? void 0 : _d.length) ? filterItems.brand : [(_f = (_e = router.currentRoute.value) == null ? void 0 : _e.query) == null ? void 0 : _f.brand]
|
|
});
|
|
}
|
|
if (filterItems.collection.length > 0 || ((_i = (_h = (_g = router.currentRoute.value) == null ? void 0 : _g.query) == null ? void 0 : _h.category) == null ? void 0 : _i.length)) {
|
|
filters.push({
|
|
field: "collection_id",
|
|
op: "in",
|
|
value: ((_j = filterItems.collection) == null ? void 0 : _j.length) ? filterItems.collection : [(_l = (_k = router.currentRoute.value) == null ? void 0 : _k.query) == null ? void 0 : _l.category]
|
|
});
|
|
const cat = categoryStore.category.find((item) => item.id == filterItems.collection[0]);
|
|
if (cat) {
|
|
}
|
|
}
|
|
if (filterItems.price.length > 0) {
|
|
filters.push({
|
|
field: "price",
|
|
op: "eq",
|
|
value: filterItems.price
|
|
});
|
|
}
|
|
if ((_m = props.search) == null ? void 0 : _m.length)
|
|
filters.push({
|
|
field: "title_fa",
|
|
op: "like",
|
|
value: props.search
|
|
});
|
|
Object.assign(pagination.value, {
|
|
filters,
|
|
text_search: search.value,
|
|
order: (_n = orderSelected.value) == null ? void 0 : _n.order
|
|
});
|
|
const res = await getStoreSearchPosts((_o = seller.value) == null ? void 0 : _o.user_id, pagination.value);
|
|
posts.value = (_a2 = res == null ? void 0 : res.rows) != null ? _a2 : [];
|
|
total.value = (_b2 = (_p = res == null ? void 0 : res.query) == null ? void 0 : _p.total) != null ? _b2 : 0;
|
|
} catch (e) {
|
|
console.log(e);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
watchDebounced(() => props.search, () => {
|
|
applyFilter();
|
|
}, { debounce: 300 });
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
var _a;
|
|
const _directive_lazy = resolveDirective("lazy");
|
|
let _temp0;
|
|
_push(`<div${ssrRenderAttrs(_attrs)}><div class="flex justify-between items-center px4 pt-4"><div class="flex gap-2 lg:hidden">`);
|
|
_push(ssrRenderComponent(_sfc_main$g, {
|
|
class: "flex gap-1 items-center text-xs",
|
|
type: "text",
|
|
size: "small",
|
|
onClick: ($event) => showFilterAction.value = true
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<span${_scopeId}>${ssrInterpolate(unref(config).useString("filterProducts"))}</span>`);
|
|
_push2(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:filter",
|
|
size: "16"
|
|
}, null, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode("span", null, toDisplayString(unref(config).useString("filterProducts")), 1),
|
|
createVNode(BasicIconOld, {
|
|
icon: "vuesax-linear:filter",
|
|
size: "16"
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(_sfc_main$g, {
|
|
class: "flex gap-1 items-center text-xs",
|
|
type: "text",
|
|
size: "small",
|
|
onClick: ($event) => showOrderAction.value = true
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
var _a2, _b;
|
|
if (_push2) {
|
|
_push2(`<span${_scopeId}>${ssrInterpolate((_a2 = orderSelected.value) == null ? void 0 : _a2.title)}</span>`);
|
|
_push2(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:sort",
|
|
size: "16"
|
|
}, null, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode("span", null, toDisplayString((_b = orderSelected.value) == null ? void 0 : _b.title), 1),
|
|
createVNode(BasicIconOld, {
|
|
icon: "vuesax-linear:sort",
|
|
size: "16"
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div><div class="flex gap-2 items-center"><span class="font-bold">${ssrInterpolate(unref(usePrice)((_a = total.value) != null ? _a : 0, true, ""))}</span><span class="text-xs text-gray-400">${ssrInterpolate(unref(config).useString("countProducts"))}</span></div></div>`);
|
|
if (!unref(loading)) {
|
|
_push(`<div class="w-full grid grid-cols-3 mt-2 gap-2px"><!--[-->`);
|
|
ssrRenderList(posts.value, (post, i) => {
|
|
var _a3;
|
|
var _a2;
|
|
_push(`<div class="w-full aspect-square relative">`);
|
|
if ((_a2 = post.files) == null ? void 0 : _a2.length) {
|
|
_push(`<!--[-->`);
|
|
if (post.files[0].type === "image") {
|
|
_push(`<img${ssrRenderAttrs(_temp0 = mergeProps({
|
|
class: "w-full h-full object-cover",
|
|
alt: unref(reactiveProjectName)
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)(post.files[0].url), loading: unref(loadGray), error: unref(loadGray) })))}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : (_a3 = _temp0.innerHTML) != null ? _a3 : ""}`);
|
|
} else if (post.files[0].type === "video") {
|
|
_push(`<div class="relative w-full h-full"><video${ssrRenderAttr("src", post.files[0].url)} class="hidden"></video><img${ssrRenderAttr("src", videoThumbnails.value[post.files[0].url])} class="w-full h-full object-cover" alt="Video Thumbnail"><div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30"><svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<!--]-->`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
});
|
|
_push(`<!--]--></div>`);
|
|
} else {
|
|
_push(ssrRenderComponent(_sfc_main$h, null, null, _parent));
|
|
}
|
|
_push(ssrRenderComponent(_sfc_main$e, {
|
|
open: showOrderAction.value,
|
|
"onUpdate:open": ($event) => showOrderAction.value = $event,
|
|
value: orderSelected.value,
|
|
"onUpdate:value": ($event) => orderSelected.value = $event,
|
|
onSuccess: applyFilter
|
|
}, null, _parent));
|
|
_push(ssrRenderComponent(_sfc_main$a, {
|
|
open: showFilterAction.value,
|
|
"onUpdate:open": ($event) => showFilterAction.value = $event,
|
|
value: filterItems,
|
|
"onUpdate:value": ($event) => filterItems = $event,
|
|
onSuccess: applyFilter
|
|
}, null, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$9 = _sfc_main$9.setup;
|
|
_sfc_main$9.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/search/mainSearch/components/ProductSearchList.vue");
|
|
return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
__name: "BrandCard",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
item: {},
|
|
hasFunction: { type: Boolean, default: true }
|
|
},
|
|
emits: ["edit", "delete"],
|
|
setup(__props, { emit: __emit }) {
|
|
const config = useConfigStore();
|
|
const emit = __emit;
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
var _a;
|
|
const _directive_lazy = resolveDirective("lazy");
|
|
let _temp0;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({
|
|
class: ["flex w-full mt-2 p-2 items-center justify-between rounded-lg", unref(config).isNightStore ? "bg-zinc-800" : "bg-gray-50"]
|
|
}, _attrs))}><div class="flex items-center"><img${ssrRenderAttrs(_temp0 = mergeProps({
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-2.5rem h-2.5rem rounded-lg object-contain"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)(_ctx.item.image), loading: unref(previewImg$1), error: unref(previewImg$1) })))}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : (_a = _temp0.innerHTML) != null ? _a : ""}<div class="ms-5 text-sm">${ssrInterpolate(_ctx.item.title)}</div></div>`);
|
|
if (_ctx.hasFunction) {
|
|
_push(`<div class="flex items-center gap-2">`);
|
|
_push(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:edit",
|
|
color: "blue",
|
|
onClick: ($event) => emit("edit", _ctx.item)
|
|
}, null, _parent));
|
|
_push(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:trash",
|
|
color: "red",
|
|
onClick: ($event) => emit("delete", _ctx.item.id)
|
|
}, null, _parent));
|
|
_push(`</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$8 = _sfc_main$8.setup;
|
|
_sfc_main$8.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/user/userMain/brands/components/BrandCard.vue");
|
|
return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
__name: "BrandCardSkeleton",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const skeletonRatio = ref(null);
|
|
const skeletonSize = reactive(
|
|
useElementSize(skeletonRatio, { width: 0, height: 0 }, { box: "border-box" })
|
|
);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(mergeProps({
|
|
ref_key: "skeletonRatio",
|
|
ref: skeletonRatio,
|
|
class: "h-fit"
|
|
}, _attrs))}>`);
|
|
_push(ssrRenderComponent(unref(ContentLoader), {
|
|
width: skeletonSize.width,
|
|
height: "60"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<rect height="50" rx="3" ry="3"${ssrRenderAttr("width", skeletonSize.width)} x="0" y="8"${_scopeId}></rect>`);
|
|
} else {
|
|
return [
|
|
createVNode("rect", {
|
|
height: "50",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: skeletonSize.width,
|
|
x: "0",
|
|
y: "8"
|
|
}, null, 8, ["width"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$7 = _sfc_main$7.setup;
|
|
_sfc_main$7.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/user/userMain/brands/components/BrandCardSkeleton.vue");
|
|
return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
|
|
__name: "BrandSearchList",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
search: {}
|
|
},
|
|
emits: ["selected"],
|
|
setup(__props, { emit: __emit }) {
|
|
const props = __props;
|
|
const emits = __emit;
|
|
const records = ref([]);
|
|
async function reload() {
|
|
loading.value = true;
|
|
records.value = await getBrandsList(props.search);
|
|
loading.value = false;
|
|
}
|
|
watchDebounced(() => props.search, () => {
|
|
reload();
|
|
}, { debounce: 300 });
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(_attrs)}><div class="px-4"><!--[-->`);
|
|
ssrRenderList(records.value, (item, key) => {
|
|
_push(ssrRenderComponent(_sfc_main$8, {
|
|
key,
|
|
item,
|
|
"has-function": false,
|
|
onClick: ($event) => emits("selected", item.id)
|
|
}, null, _parent));
|
|
});
|
|
_push(`<!--]-->`);
|
|
if (unref(loading)) {
|
|
_push(`<div><!--[-->`);
|
|
ssrRenderList(10, (i) => {
|
|
_push(ssrRenderComponent(_sfc_main$7, null, null, _parent));
|
|
});
|
|
_push(`<!--]--></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$6 = _sfc_main$6.setup;
|
|
_sfc_main$6.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/search/mainSearch/components/BrandSearchList.vue");
|
|
return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
|
|
};
|
|
const previewImg = "" + buildAssetsURL("logo_preview.B3D6jfxw.png");
|
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
__name: "CategoryCard",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
item: {},
|
|
hasFunction: { type: Boolean, default: true }
|
|
},
|
|
emits: ["edit", "delete"],
|
|
setup(__props, { emit: __emit }) {
|
|
const config = useConfigStore();
|
|
const emit = __emit;
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
var _a2;
|
|
var _a;
|
|
const _component_a_tag = Tag;
|
|
const _directive_lazy = resolveDirective("lazy");
|
|
let _temp0;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({
|
|
class: ["flex w-full mt-2 p-2 items-center justify-between", unref(config).isNightStore ? "bg-zinc-800" : "bg-gray-50"]
|
|
}, _attrs))}><div class="flex items-center"><img${ssrRenderAttrs(_temp0 = mergeProps({
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-2.5rem h-2.5rem rounded-lg object-contain"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)(_ctx.item.image), loading: unref(previewImg), error: unref(previewImg) })))}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : (_a2 = _temp0.innerHTML) != null ? _a2 : ""}<div><div class="ms-5 text-sm">${ssrInterpolate(_ctx.item.title)}</div>`);
|
|
if (((_a = _ctx.item.children) == null ? void 0 : _a.length) !== 0) {
|
|
_push(`<!--[-->`);
|
|
ssrRenderList(_ctx.item.children, (val) => {
|
|
_push(ssrRenderComponent(_component_a_tag, { color: "blue" }, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<span${_scopeId}>${ssrInterpolate(val.title)}</span>`);
|
|
} else {
|
|
return [
|
|
createVNode("span", null, toDisplayString(val.title), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 2
|
|
}, _parent));
|
|
});
|
|
_push(`<!--]-->`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div>`);
|
|
if (_ctx.hasFunction) {
|
|
_push(`<div class="flex items-center gap-2">`);
|
|
_push(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:edit",
|
|
color: "blue",
|
|
onClick: ($event) => emit("edit", _ctx.item)
|
|
}, null, _parent));
|
|
_push(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:trash",
|
|
color: "red",
|
|
onClick: ($event) => emit("delete", _ctx.item.id)
|
|
}, null, _parent));
|
|
_push(`</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$5 = _sfc_main$5.setup;
|
|
_sfc_main$5.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/Cards/CategoryCard.vue");
|
|
return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
__name: "CategoryCardSkeleton",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const skeletonRatio = ref(null);
|
|
const skeletonSize = reactive(
|
|
useElementSize(skeletonRatio, { width: 0, height: 0 }, { box: "border-box" })
|
|
);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(mergeProps({
|
|
ref_key: "skeletonRatio",
|
|
ref: skeletonRatio,
|
|
class: "h-fit"
|
|
}, _attrs))}>`);
|
|
_push(ssrRenderComponent(unref(ContentLoader), {
|
|
width: skeletonSize.width,
|
|
height: "60"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<rect height="50" rx="3" ry="3"${ssrRenderAttr("width", skeletonSize.width)} x="0" y="8"${_scopeId}></rect>`);
|
|
} else {
|
|
return [
|
|
createVNode("rect", {
|
|
height: "50",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: skeletonSize.width,
|
|
x: "0",
|
|
y: "8"
|
|
}, null, 8, ["width"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_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/CategoryCardSkeleton.vue");
|
|
return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
__name: "CategorySearchList",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
search: {}
|
|
},
|
|
emits: ["selected"],
|
|
setup(__props, { emit: __emit }) {
|
|
const props = __props;
|
|
const emits = __emit;
|
|
const records = ref([]);
|
|
async function reload() {
|
|
loading.value = true;
|
|
records.value = await getCategoriesList(props.search);
|
|
loading.value = false;
|
|
}
|
|
watchDebounced(() => props.search, () => {
|
|
reload();
|
|
}, { debounce: 300 });
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(_attrs)}><div class="px-4"><!--[-->`);
|
|
ssrRenderList(records.value, (item, key) => {
|
|
_push(ssrRenderComponent(_sfc_main$5, {
|
|
key,
|
|
item,
|
|
hasFunction: false,
|
|
onClick: ($event) => emits("selected", item.id)
|
|
}, null, _parent));
|
|
});
|
|
_push(`<!--]-->`);
|
|
if (unref(loading)) {
|
|
_push(`<div><!--[-->`);
|
|
ssrRenderList(10, (i) => {
|
|
_push(ssrRenderComponent(_sfc_main$4, null, null, _parent));
|
|
});
|
|
_push(`<!--]--></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_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("views/base/pages/search/mainSearch/components/CategorySearchList.vue");
|
|
return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
__name: "CustomerSearchList",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
search: {}
|
|
},
|
|
setup(__props) {
|
|
const router = useRouter$1();
|
|
const props = __props;
|
|
const userStore = useUserStore();
|
|
const loading2 = ref(false);
|
|
const endPage = ref(false);
|
|
const currentPage = ref(0);
|
|
const limit = ref(10);
|
|
const users = ref([]);
|
|
const request = async () => {
|
|
var _a2;
|
|
var _a;
|
|
try {
|
|
if (!endPage.value) {
|
|
loading2.value = true;
|
|
const userId = (_a2 = (_a = router.currentRoute.value.query) == null ? void 0 : _a.user_id) != null ? _a2 : userStore.user.id;
|
|
const res = await getCustomerList(userId, ++currentPage.value, limit.value, props.search);
|
|
if ((res == null ? void 0 : res.length) <= limit.value) endPage.value = true;
|
|
users.value.push(...res);
|
|
}
|
|
} catch (e) {
|
|
console.log("e ===>", e);
|
|
} finally {
|
|
loading2.value = false;
|
|
}
|
|
};
|
|
const reset = () => {
|
|
endPage.value = false;
|
|
users.value = [];
|
|
currentPage.value = 0;
|
|
};
|
|
watchDebounced(() => props.search, () => {
|
|
reset();
|
|
request();
|
|
}, { debounce: 300 });
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "flex flex-col gap-2 mx-4" }, _attrs))}>`);
|
|
if (!loading2.value) {
|
|
_push(`<!--[-->`);
|
|
ssrRenderList(users.value, (user) => {
|
|
_push(ssrRenderComponent(_sfc_main$1$1, { user }, null, _parent));
|
|
});
|
|
_push(`<!--]-->`);
|
|
} else {
|
|
_push(`<!--[-->`);
|
|
ssrRenderList(8, (i) => {
|
|
_push(ssrRenderComponent(_sfc_main$i, null, null, _parent));
|
|
});
|
|
_push(`<!--]-->`);
|
|
}
|
|
_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("views/base/pages/search/mainSearch/components/CustomerSearchList.vue");
|
|
return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "index",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const router = useRouter$1();
|
|
const config = useConfigStore();
|
|
const activeKey = ref("products");
|
|
const searchValue = ref("");
|
|
function SelectCategory(id) {
|
|
router.replace({
|
|
name: "mainSearch",
|
|
query: { category: id }
|
|
// Directly use the value instead of an array
|
|
});
|
|
setTimeout(() => {
|
|
activeKey.value = "products";
|
|
}, 50);
|
|
}
|
|
function selectBrand(id) {
|
|
router.replace({
|
|
name: "mainSearch",
|
|
query: { brand: id }
|
|
// Directly use the value instead of an array
|
|
});
|
|
setTimeout(() => {
|
|
activeKey.value = "products";
|
|
}, 50);
|
|
}
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_a_input = Input;
|
|
const _component_ATabs = Tabs;
|
|
const _component_ATabPane = __nuxt_component_2;
|
|
_push(`<div${ssrRenderAttrs(_attrs)}><div class="flex items-center p3 gap-3">`);
|
|
_push(ssrRenderComponent(BasicIconOld, {
|
|
icon: !unref(config).isRTL ? "vuesax-linear:arrow-left" : "vuesax-linear:arrow-right",
|
|
onClick: ($event) => unref(router).back()
|
|
}, null, _parent));
|
|
_push(ssrRenderComponent(_component_a_input, {
|
|
value: searchValue.value,
|
|
"onUpdate:value": ($event) => searchValue.value = $event,
|
|
placeholder: unref(config).useString("search"),
|
|
class: "w-full border-none"
|
|
}, {
|
|
prefix: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<img${ssrRenderAttr("src", _imports_0)}${ssrRenderAttr("alt", unref(reactiveProjectName))} class="w-4"${_scopeId}>`);
|
|
} else {
|
|
return [
|
|
createVNode("img", {
|
|
src: _imports_0,
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-4"
|
|
}, null, 8, ["alt"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div>`);
|
|
_push(ssrRenderComponent(_component_ATabs, {
|
|
activeKey: activeKey.value,
|
|
"onUpdate:activeKey": ($event) => activeKey.value = $event,
|
|
centered: "",
|
|
class: "instaTab"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(_component_ATabPane, {
|
|
class: "!w-full",
|
|
key: "products",
|
|
tab: unref(config).useString("products")
|
|
}, null, _parent2, _scopeId));
|
|
if (unref(config).isSeller) {
|
|
_push2(ssrRenderComponent(_component_ATabPane, {
|
|
class: "!w-full",
|
|
key: "customers",
|
|
tab: unref(config).useString("customers")
|
|
}, null, _parent2, _scopeId));
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
_push2(ssrRenderComponent(_component_ATabPane, {
|
|
class: "!w-full",
|
|
key: "categories",
|
|
tab: unref(config).useString("categories")
|
|
}, null, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_ATabPane, {
|
|
class: "!w-full",
|
|
key: "brands",
|
|
tab: unref(config).useString("brands")
|
|
}, null, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(_component_ATabPane, {
|
|
class: "!w-full",
|
|
key: "products",
|
|
tab: unref(config).useString("products")
|
|
}, null, 8, ["tab"]),
|
|
unref(config).isSeller ? (openBlock(), createBlock(_component_ATabPane, {
|
|
class: "!w-full",
|
|
key: "customers",
|
|
tab: unref(config).useString("customers")
|
|
}, null, 8, ["tab"])) : createCommentVNode("", true),
|
|
createVNode(_component_ATabPane, {
|
|
class: "!w-full",
|
|
key: "categories",
|
|
tab: unref(config).useString("categories")
|
|
}, null, 8, ["tab"]),
|
|
createVNode(_component_ATabPane, {
|
|
class: "!w-full",
|
|
key: "brands",
|
|
tab: unref(config).useString("brands")
|
|
}, null, 8, ["tab"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`<div class="h-85vh overflow-y-auto pb-5vh">`);
|
|
if (activeKey.value === "products") {
|
|
_push(ssrRenderComponent(_sfc_main$9, { search: searchValue.value }, null, _parent));
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (activeKey.value === "customers") {
|
|
_push(ssrRenderComponent(_sfc_main$2, { search: searchValue.value }, null, _parent));
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (activeKey.value === "categories") {
|
|
_push(ssrRenderComponent(_sfc_main$3, {
|
|
search: searchValue.value,
|
|
onSelected: SelectCategory
|
|
}, null, _parent));
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (activeKey.value === "brands") {
|
|
_push(ssrRenderComponent(_sfc_main$6, {
|
|
search: searchValue.value,
|
|
onSelected: selectBrand
|
|
}, null, _parent));
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></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/search/mainSearch/index.vue");
|
|
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "index",
|
|
__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/search/main/index.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|
|
//# sourceMappingURL=index-DB_7EPH7.mjs.map
|