poptong
83b162d2bd
Some checks failed
🚀 Deploy - Demo / deployment (push) Has been cancelled
- 웹훅 URL을 https://admin.youtooplay.com/webhook로 변경 - Nginx 리버스 프록시 설정 파일 추가 - 배포 가이드 업데이트
8155 lines
397 KiB
JavaScript
8155 lines
397 KiB
JavaScript
import { defineComponent, ref, unref, isRef, withCtx, createVNode, createTextVNode, toDisplayString, createBlock, openBlock, Fragment, renderList, useId, withModifiers, computed, shallowRef, watch, mergeProps, toRefs, toRef, onScopeDispose, nextTick, watchEffect, capitalize, provide, inject, useSSRContext } from 'vue';
|
|
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrInterpolate } from 'vue/server-renderer';
|
|
import { a as avatar1 } from './avatar-1-BLwzgS8N.mjs';
|
|
import { V as VRow, a as VCol } from './VRow-MQIguEmB.mjs';
|
|
import { a4 as useRoute$1, s as VIcon, _ as _export_sfc, B as VCard, C as VCardText, v as VAvatar, D as VBtn, g as genericComponent, p as propsFactory, l as useLocale, n as useProxiedModel, w as wrapInArray, a as useRender, t as VMenu, x as ensureValidVNode, y as VDefaultsProvider, o as forwardRefs, G as provideDefaults, q as makeTransitionProps, r as omit, V as VDialogTransition, z as checkPrintable, A as matchesSelector, e as getCurrentInstance, f as useDimension, h as useToggleScope, j as convertToUnit, U as deepEqual, $ as useLoader, a0 as useBackgroundColor, b as useDisplay, a1 as LoaderSlot, I as IconValue, k as makeDimensionProps, m as makeComponentProps, u as useResizeObserver, d as debounce, c as clamp, a3 as getPropertyFromItem, W as getObjectValueByPath, X as isEmpty, E as useRtl, F as provideTheme, H as createRange, Y as makeLoaderProps, Z as makeDisplayProps, S as defineFunctionalComponent, i as isOn, J as makeVariantProps, K as makeThemeProps, L as makeTagProps, M as makeSizeProps, N as makeRoundedProps, O as makeElevationProps, P as makeDensityProps, Q as makeBorderProps, R as keyValues, a2 as EventProp, T as consoleError } from './server.mjs';
|
|
import { V as VDivider } from './VDivider-C0e0b_O5.mjs';
|
|
import { V as VForm, a as VTextField, u as useForm, m as makeVTextFieldProps } from './VTextField-Bxu4ONGD.mjs';
|
|
import { u as useItems, V as VList, a as VListItem, m as makeItemsProps } from './VList-C7tHrCmP.mjs';
|
|
import { V as VCheckbox, a as VCheckboxBtn } from './VCheckbox-BsGzFEMx.mjs';
|
|
import { V as VChip } from './VChip-DNdty0q7.mjs';
|
|
import { V as VTable, m as makeVTableProps } from './VTable-CfOk5VYL.mjs';
|
|
import { V as VTabs, a as VTab, b as VWindow, c as VWindowItem } from './VTabs-BaH4QY_R.mjs';
|
|
import '../routes/renderer.mjs';
|
|
import 'vue-bundle-renderer/runtime';
|
|
import '../nitro/nitro.mjs';
|
|
import 'node:http';
|
|
import 'node:https';
|
|
import 'node:events';
|
|
import 'node:buffer';
|
|
import 'node:fs';
|
|
import 'node:path';
|
|
import 'node:crypto';
|
|
import 'node:url';
|
|
import 'devalue';
|
|
import '@unhead/ssr';
|
|
import 'unhead';
|
|
import '@unhead/shared';
|
|
import 'pinia';
|
|
import 'vue-router';
|
|
import './index-BNHdF426.mjs';
|
|
import './ssrBoot-BtvJZs44.mjs';
|
|
|
|
function getPrefixedEventHandlers(attrs, suffix, getData) {
|
|
return Object.keys(attrs).filter((key) => isOn(key) && key.endsWith(suffix)).reduce((acc, key) => {
|
|
acc[key.slice(0, -suffix.length)] = (event) => attrs[key](event, getData(event));
|
|
return acc;
|
|
}, {});
|
|
}
|
|
const makeVVirtualScrollItemProps = propsFactory({
|
|
renderless: Boolean,
|
|
...makeComponentProps()
|
|
}, "VVirtualScrollItem");
|
|
const VVirtualScrollItem = genericComponent()({
|
|
name: "VVirtualScrollItem",
|
|
inheritAttrs: false,
|
|
props: makeVVirtualScrollItemProps(),
|
|
emits: {
|
|
"update:height": (height) => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
emit,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
resizeRef,
|
|
contentRect
|
|
} = useResizeObserver();
|
|
watch(() => {
|
|
var _a;
|
|
return (_a = contentRect.value) == null ? void 0 : _a.height;
|
|
}, (height) => {
|
|
if (height != null) emit("update:height", height);
|
|
});
|
|
useRender(() => {
|
|
var _a, _b;
|
|
return props.renderless ? createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots, {
|
|
itemRef: resizeRef
|
|
})]) : createVNode("div", mergeProps({
|
|
"ref": resizeRef,
|
|
"class": ["v-virtual-scroll__item", props.class],
|
|
"style": props.style
|
|
}, attrs), [(_b = slots.default) == null ? void 0 : _b.call(slots)]);
|
|
});
|
|
}
|
|
});
|
|
const UP = -1;
|
|
const DOWN = 1;
|
|
const BUFFER_PX = 100;
|
|
const makeVirtualProps = propsFactory({
|
|
itemHeight: {
|
|
type: [Number, String],
|
|
default: null
|
|
},
|
|
height: [Number, String]
|
|
}, "virtual");
|
|
function useVirtual(props, items) {
|
|
const display = useDisplay();
|
|
const itemHeight = shallowRef(0);
|
|
watchEffect(() => {
|
|
itemHeight.value = parseFloat(props.itemHeight || 0);
|
|
});
|
|
const first = shallowRef(0);
|
|
const last = shallowRef(Math.ceil(
|
|
// Assume 16px items filling the entire screen height if
|
|
// not provided. This is probably incorrect but it minimises
|
|
// the chance of ending up with empty space at the bottom.
|
|
// The default value is set here to avoid poisoning getSize()
|
|
(parseInt(props.height) || display.height.value) / (itemHeight.value || 16)
|
|
) || 1);
|
|
const paddingTop = shallowRef(0);
|
|
const paddingBottom = shallowRef(0);
|
|
const containerRef = ref();
|
|
const markerRef = ref();
|
|
let markerOffset = 0;
|
|
const {
|
|
resizeRef,
|
|
contentRect
|
|
} = useResizeObserver();
|
|
watchEffect(() => {
|
|
resizeRef.value = containerRef.value;
|
|
});
|
|
const viewportHeight = computed(() => {
|
|
var _a;
|
|
return containerRef.value === (void 0).documentElement ? display.height.value : ((_a = contentRect.value) == null ? void 0 : _a.height) || parseInt(props.height) || 0;
|
|
});
|
|
const hasInitialRender = computed(() => {
|
|
return !!(containerRef.value && markerRef.value && viewportHeight.value && itemHeight.value);
|
|
});
|
|
let sizes = Array.from({
|
|
length: items.value.length
|
|
});
|
|
let offsets = Array.from({
|
|
length: items.value.length
|
|
});
|
|
const updateTime = shallowRef(0);
|
|
let targetScrollIndex = -1;
|
|
function getSize(index) {
|
|
return sizes[index] || itemHeight.value;
|
|
}
|
|
const updateOffsets = debounce(() => {
|
|
const start = performance.now();
|
|
offsets[0] = 0;
|
|
const length = items.value.length;
|
|
for (let i = 1; i <= length - 1; i++) {
|
|
offsets[i] = (offsets[i - 1] || 0) + getSize(i - 1);
|
|
}
|
|
updateTime.value = Math.max(updateTime.value, performance.now() - start);
|
|
}, updateTime);
|
|
const unwatch = watch(hasInitialRender, (v) => {
|
|
if (!v) return;
|
|
unwatch();
|
|
markerOffset = markerRef.value.offsetTop;
|
|
updateOffsets.immediate();
|
|
calculateVisibleItems();
|
|
if (!~targetScrollIndex) return;
|
|
nextTick(() => {
|
|
});
|
|
});
|
|
onScopeDispose(() => {
|
|
updateOffsets.clear();
|
|
});
|
|
function handleItemResize(index, height) {
|
|
const prevHeight = sizes[index];
|
|
const prevMinHeight = itemHeight.value;
|
|
itemHeight.value = prevMinHeight ? Math.min(itemHeight.value, height) : height;
|
|
if (prevHeight !== height || prevMinHeight !== itemHeight.value) {
|
|
sizes[index] = height;
|
|
updateOffsets();
|
|
}
|
|
}
|
|
function calculateOffset(index) {
|
|
index = clamp(index, 0, items.value.length - 1);
|
|
return offsets[index] || 0;
|
|
}
|
|
function calculateIndex(scrollTop) {
|
|
return binaryClosest(offsets, scrollTop);
|
|
}
|
|
let lastScrollTop = 0;
|
|
let scrollVelocity = 0;
|
|
let lastScrollTime = 0;
|
|
watch(viewportHeight, (val, oldVal) => {
|
|
if (oldVal) {
|
|
calculateVisibleItems();
|
|
if (val < oldVal) {
|
|
requestAnimationFrame(() => {
|
|
scrollVelocity = 0;
|
|
calculateVisibleItems();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
function handleScroll() {
|
|
if (!containerRef.value || !markerRef.value) return;
|
|
const scrollTop = containerRef.value.scrollTop;
|
|
const scrollTime = performance.now();
|
|
const scrollDeltaT = scrollTime - lastScrollTime;
|
|
if (scrollDeltaT > 500) {
|
|
scrollVelocity = Math.sign(scrollTop - lastScrollTop);
|
|
markerOffset = markerRef.value.offsetTop;
|
|
} else {
|
|
scrollVelocity = scrollTop - lastScrollTop;
|
|
}
|
|
lastScrollTop = scrollTop;
|
|
lastScrollTime = scrollTime;
|
|
calculateVisibleItems();
|
|
}
|
|
function handleScrollend() {
|
|
if (!containerRef.value || !markerRef.value) return;
|
|
scrollVelocity = 0;
|
|
lastScrollTime = 0;
|
|
calculateVisibleItems();
|
|
}
|
|
let raf = -1;
|
|
function calculateVisibleItems() {
|
|
cancelAnimationFrame(raf);
|
|
raf = requestAnimationFrame(_calculateVisibleItems);
|
|
}
|
|
function _calculateVisibleItems() {
|
|
if (!containerRef.value || !viewportHeight.value) return;
|
|
const scrollTop = lastScrollTop - markerOffset;
|
|
const direction = Math.sign(scrollVelocity);
|
|
const startPx = Math.max(0, scrollTop - BUFFER_PX);
|
|
const start = clamp(calculateIndex(startPx), 0, items.value.length);
|
|
const endPx = scrollTop + viewportHeight.value + BUFFER_PX;
|
|
const end = clamp(calculateIndex(endPx) + 1, start + 1, items.value.length);
|
|
if (
|
|
// Only update the side we're scrolling towards,
|
|
// the other side will be updated incidentally
|
|
(direction !== UP || start < first.value) && (direction !== DOWN || end > last.value)
|
|
) {
|
|
const topOverflow = calculateOffset(first.value) - calculateOffset(start);
|
|
const bottomOverflow = calculateOffset(end) - calculateOffset(last.value);
|
|
const bufferOverflow = Math.max(topOverflow, bottomOverflow);
|
|
if (bufferOverflow > BUFFER_PX) {
|
|
first.value = start;
|
|
last.value = end;
|
|
} else {
|
|
if (start <= 0) first.value = start;
|
|
if (end >= items.value.length) last.value = end;
|
|
}
|
|
}
|
|
paddingTop.value = calculateOffset(first.value);
|
|
paddingBottom.value = calculateOffset(items.value.length) - calculateOffset(last.value);
|
|
}
|
|
function scrollToIndex(index) {
|
|
const offset = calculateOffset(index);
|
|
if (!containerRef.value || index && !offset) {
|
|
targetScrollIndex = index;
|
|
} else {
|
|
containerRef.value.scrollTop = offset;
|
|
}
|
|
}
|
|
const computedItems = computed(() => {
|
|
return items.value.slice(first.value, last.value).map((item, index) => ({
|
|
raw: item,
|
|
index: index + first.value
|
|
}));
|
|
});
|
|
watch(items, () => {
|
|
sizes = Array.from({
|
|
length: items.value.length
|
|
});
|
|
offsets = Array.from({
|
|
length: items.value.length
|
|
});
|
|
updateOffsets.immediate();
|
|
calculateVisibleItems();
|
|
}, {
|
|
deep: true
|
|
});
|
|
return {
|
|
calculateVisibleItems,
|
|
containerRef,
|
|
markerRef,
|
|
computedItems,
|
|
paddingTop,
|
|
paddingBottom,
|
|
scrollToIndex,
|
|
handleScroll,
|
|
handleScrollend,
|
|
handleItemResize
|
|
};
|
|
}
|
|
function binaryClosest(arr, val) {
|
|
let high = arr.length - 1;
|
|
let low = 0;
|
|
let mid = 0;
|
|
let item = null;
|
|
let target = -1;
|
|
if (arr[high] < val) {
|
|
return high;
|
|
}
|
|
while (low <= high) {
|
|
mid = low + high >> 1;
|
|
item = arr[mid];
|
|
if (item > val) {
|
|
high = mid - 1;
|
|
} else if (item < val) {
|
|
target = mid;
|
|
low = mid + 1;
|
|
} else if (item === val) {
|
|
return mid;
|
|
} else {
|
|
return low;
|
|
}
|
|
}
|
|
return target;
|
|
}
|
|
const makeVVirtualScrollProps = propsFactory({
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
renderless: Boolean,
|
|
...makeVirtualProps(),
|
|
...makeComponentProps(),
|
|
...makeDimensionProps()
|
|
}, "VVirtualScroll");
|
|
const VVirtualScroll = genericComponent()({
|
|
name: "VVirtualScroll",
|
|
props: makeVVirtualScrollProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
getCurrentInstance("VVirtualScroll");
|
|
const {
|
|
dimensionStyles
|
|
} = useDimension(props);
|
|
const {
|
|
calculateVisibleItems,
|
|
containerRef,
|
|
markerRef,
|
|
handleScroll,
|
|
handleScrollend,
|
|
handleItemResize,
|
|
scrollToIndex,
|
|
paddingTop,
|
|
paddingBottom,
|
|
computedItems
|
|
} = useVirtual(props, toRef(props, "items"));
|
|
useToggleScope(() => props.renderless, () => {
|
|
function handleListeners() {
|
|
var _a, _b;
|
|
let add = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
|
|
const method = add ? "addEventListener" : "removeEventListener";
|
|
if (containerRef.value === (void 0).documentElement) {
|
|
(void 0)[method]("scroll", handleScroll, {
|
|
passive: true
|
|
});
|
|
(void 0)[method]("scrollend", handleScrollend);
|
|
} else {
|
|
(_a = containerRef.value) == null ? void 0 : _a[method]("scroll", handleScroll, {
|
|
passive: true
|
|
});
|
|
(_b = containerRef.value) == null ? void 0 : _b[method]("scrollend", handleScrollend);
|
|
}
|
|
}
|
|
onScopeDispose(handleListeners);
|
|
});
|
|
useRender(() => {
|
|
const children = computedItems.value.map((item) => createVNode(VVirtualScrollItem, {
|
|
"key": item.index,
|
|
"renderless": props.renderless,
|
|
"onUpdate:height": (height) => handleItemResize(item.index, height)
|
|
}, {
|
|
default: (slotProps) => {
|
|
var _a;
|
|
return (_a = slots.default) == null ? void 0 : _a.call(slots, {
|
|
item: item.raw,
|
|
index: item.index,
|
|
...slotProps
|
|
});
|
|
}
|
|
}));
|
|
return props.renderless ? createVNode(Fragment, null, [createVNode("div", {
|
|
"ref": markerRef,
|
|
"class": "v-virtual-scroll__spacer",
|
|
"style": {
|
|
paddingTop: convertToUnit(paddingTop.value)
|
|
}
|
|
}, null), children, createVNode("div", {
|
|
"class": "v-virtual-scroll__spacer",
|
|
"style": {
|
|
paddingBottom: convertToUnit(paddingBottom.value)
|
|
}
|
|
}, null)]) : createVNode("div", {
|
|
"ref": containerRef,
|
|
"class": ["v-virtual-scroll", props.class],
|
|
"onScrollPassive": handleScroll,
|
|
"onScrollend": handleScrollend,
|
|
"style": [dimensionStyles.value, props.style]
|
|
}, [createVNode("div", {
|
|
"ref": markerRef,
|
|
"class": "v-virtual-scroll__container",
|
|
"style": {
|
|
paddingTop: convertToUnit(paddingTop.value),
|
|
paddingBottom: convertToUnit(paddingBottom.value)
|
|
}
|
|
}, [children])]);
|
|
});
|
|
return {
|
|
calculateVisibleItems,
|
|
scrollToIndex
|
|
};
|
|
}
|
|
});
|
|
function useScrolling(listRef, textFieldRef) {
|
|
const isScrolling = shallowRef(false);
|
|
let scrollTimeout;
|
|
function onListScroll(e) {
|
|
cancelAnimationFrame(scrollTimeout);
|
|
isScrolling.value = true;
|
|
scrollTimeout = requestAnimationFrame(() => {
|
|
scrollTimeout = requestAnimationFrame(() => {
|
|
isScrolling.value = false;
|
|
});
|
|
});
|
|
}
|
|
async function finishScrolling() {
|
|
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
await new Promise((resolve) => {
|
|
if (isScrolling.value) {
|
|
const stop = watch(isScrolling, () => {
|
|
stop();
|
|
resolve();
|
|
});
|
|
} else resolve();
|
|
});
|
|
}
|
|
async function onListKeydown(e) {
|
|
var _a, _b;
|
|
if (e.key === "Tab") {
|
|
(_a = textFieldRef.value) == null ? void 0 : _a.focus();
|
|
}
|
|
if (!["PageDown", "PageUp", "Home", "End"].includes(e.key)) return;
|
|
const el = (_b = listRef.value) == null ? void 0 : _b.$el;
|
|
if (!el) return;
|
|
if (e.key === "Home" || e.key === "End") {
|
|
el.scrollTo({
|
|
top: e.key === "Home" ? 0 : el.scrollHeight,
|
|
behavior: "smooth"
|
|
});
|
|
}
|
|
await finishScrolling();
|
|
const children = el.querySelectorAll(":scope > :not(.v-virtual-scroll__spacer)");
|
|
if (e.key === "PageDown" || e.key === "Home") {
|
|
const top = el.getBoundingClientRect().top;
|
|
for (const child of children) {
|
|
if (child.getBoundingClientRect().top >= top) {
|
|
child.focus();
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
const bottom = el.getBoundingClientRect().bottom;
|
|
for (const child of [...children].reverse()) {
|
|
if (child.getBoundingClientRect().bottom <= bottom) {
|
|
child.focus();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
onScrollPassive: onListScroll,
|
|
onKeydown: onListKeydown
|
|
};
|
|
}
|
|
const makeSelectProps = propsFactory({
|
|
chips: Boolean,
|
|
closableChips: Boolean,
|
|
closeText: {
|
|
type: String,
|
|
default: "$vuetify.close"
|
|
},
|
|
openText: {
|
|
type: String,
|
|
default: "$vuetify.open"
|
|
},
|
|
eager: Boolean,
|
|
hideNoData: Boolean,
|
|
hideSelected: Boolean,
|
|
listProps: {
|
|
type: Object
|
|
},
|
|
menu: Boolean,
|
|
menuIcon: {
|
|
type: IconValue,
|
|
default: "$dropdown"
|
|
},
|
|
menuProps: {
|
|
type: Object
|
|
},
|
|
multiple: Boolean,
|
|
noDataText: {
|
|
type: String,
|
|
default: "$vuetify.noDataText"
|
|
},
|
|
openOnClear: Boolean,
|
|
itemColor: String,
|
|
...makeItemsProps({
|
|
itemChildren: false
|
|
})
|
|
}, "Select");
|
|
const makeVSelectProps = propsFactory({
|
|
...makeSelectProps(),
|
|
...omit(makeVTextFieldProps({
|
|
modelValue: null,
|
|
role: "combobox"
|
|
}), ["validationValue", "dirty", "appendInnerIcon"]),
|
|
...makeTransitionProps({
|
|
transition: {
|
|
component: VDialogTransition
|
|
}
|
|
})
|
|
}, "VSelect");
|
|
const VSelect = genericComponent()({
|
|
name: "VSelect",
|
|
props: makeVSelectProps(),
|
|
emits: {
|
|
"update:focused": (focused) => true,
|
|
"update:modelValue": (value) => true,
|
|
"update:menu": (ue) => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
t
|
|
} = useLocale();
|
|
const vTextFieldRef = ref();
|
|
const vMenuRef = ref();
|
|
const vVirtualScrollRef = ref();
|
|
const _menu = useProxiedModel(props, "menu");
|
|
const menu = computed({
|
|
get: () => _menu.value,
|
|
set: (v) => {
|
|
var _a;
|
|
if (_menu.value && !v && ((_a = vMenuRef.value) == null ? void 0 : _a.\u03A8openChildren.size)) return;
|
|
_menu.value = v;
|
|
}
|
|
});
|
|
const {
|
|
items,
|
|
transformIn,
|
|
transformOut
|
|
} = useItems(props);
|
|
const model = useProxiedModel(props, "modelValue", [], (v) => transformIn(v === null ? [null] : wrapInArray(v)), (v) => {
|
|
var _a;
|
|
const transformed = transformOut(v);
|
|
return props.multiple ? transformed : (_a = transformed[0]) != null ? _a : null;
|
|
});
|
|
const counterValue = computed(() => {
|
|
return typeof props.counterValue === "function" ? props.counterValue(model.value) : typeof props.counterValue === "number" ? props.counterValue : model.value.length;
|
|
});
|
|
const form = useForm(props);
|
|
const selectedValues = computed(() => model.value.map((selection) => selection.value));
|
|
const isFocused = shallowRef(false);
|
|
const label = computed(() => menu.value ? props.closeText : props.openText);
|
|
let keyboardLookupPrefix = "";
|
|
let keyboardLookupLastTime;
|
|
const displayItems = computed(() => {
|
|
if (props.hideSelected) {
|
|
return items.value.filter((item) => !model.value.some((s) => props.valueComparator(s, item)));
|
|
}
|
|
return items.value;
|
|
});
|
|
const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
|
|
const computedMenuProps = computed(() => {
|
|
var _a;
|
|
return {
|
|
...props.menuProps,
|
|
activatorProps: {
|
|
...((_a = props.menuProps) == null ? void 0 : _a.activatorProps) || {},
|
|
"aria-haspopup": "listbox"
|
|
// Set aria-haspopup to 'listbox'
|
|
}
|
|
};
|
|
});
|
|
const listRef = ref();
|
|
const listEvents = useScrolling(listRef, vTextFieldRef);
|
|
function onClear(e) {
|
|
if (props.openOnClear) {
|
|
menu.value = true;
|
|
}
|
|
}
|
|
function onMousedownControl() {
|
|
if (menuDisabled.value) return;
|
|
menu.value = !menu.value;
|
|
}
|
|
function onListKeydown(e) {
|
|
if (checkPrintable(e)) {
|
|
onKeydown(e);
|
|
}
|
|
}
|
|
function onKeydown(e) {
|
|
var _a, _b;
|
|
if (!e.key || form.isReadonly.value) return;
|
|
if (["Enter", " ", "ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
|
|
e.preventDefault();
|
|
}
|
|
if (["Enter", "ArrowDown", " "].includes(e.key)) {
|
|
menu.value = true;
|
|
}
|
|
if (["Escape", "Tab"].includes(e.key)) {
|
|
menu.value = false;
|
|
}
|
|
if (e.key === "Home") {
|
|
(_a = listRef.value) == null ? void 0 : _a.focus("first");
|
|
} else if (e.key === "End") {
|
|
(_b = listRef.value) == null ? void 0 : _b.focus("last");
|
|
}
|
|
const KEYBOARD_LOOKUP_THRESHOLD = 1e3;
|
|
if (props.multiple || !checkPrintable(e)) return;
|
|
const now = performance.now();
|
|
if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
|
|
keyboardLookupPrefix = "";
|
|
}
|
|
keyboardLookupPrefix += e.key.toLowerCase();
|
|
keyboardLookupLastTime = now;
|
|
const item = items.value.find((item2) => item2.title.toLowerCase().startsWith(keyboardLookupPrefix));
|
|
if (item !== void 0) {
|
|
model.value = [item];
|
|
displayItems.value.indexOf(item);
|
|
}
|
|
}
|
|
function select(item) {
|
|
let set = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
|
|
if (item.props.disabled) return;
|
|
if (props.multiple) {
|
|
const index = model.value.findIndex((selection) => props.valueComparator(selection.value, item.value));
|
|
const add = set == null ? !~index : set;
|
|
if (~index) {
|
|
const value = add ? [...model.value, item] : [...model.value];
|
|
value.splice(index, 1);
|
|
model.value = value;
|
|
} else if (add) {
|
|
model.value = [...model.value, item];
|
|
}
|
|
} else {
|
|
const add = set !== false;
|
|
model.value = add ? [item] : [];
|
|
nextTick(() => {
|
|
menu.value = false;
|
|
});
|
|
}
|
|
}
|
|
function onBlur(e) {
|
|
var _a;
|
|
if (!((_a = listRef.value) == null ? void 0 : _a.$el.contains(e.relatedTarget))) {
|
|
menu.value = false;
|
|
}
|
|
}
|
|
function onAfterEnter() {
|
|
var _a;
|
|
if (props.eager) {
|
|
(_a = vVirtualScrollRef.value) == null ? void 0 : _a.calculateVisibleItems();
|
|
}
|
|
}
|
|
function onAfterLeave() {
|
|
var _a;
|
|
if (isFocused.value) {
|
|
(_a = vTextFieldRef.value) == null ? void 0 : _a.focus();
|
|
}
|
|
}
|
|
function onFocusin(e) {
|
|
isFocused.value = true;
|
|
}
|
|
function onModelUpdate(v) {
|
|
if (v == null) model.value = [];
|
|
else if (matchesSelector(vTextFieldRef.value) || matchesSelector(vTextFieldRef.value)) ; else if (vTextFieldRef.value) {
|
|
vTextFieldRef.value.value = "";
|
|
}
|
|
}
|
|
watch(menu, () => {
|
|
if (!props.hideSelected && menu.value && model.value.length) {
|
|
displayItems.value.findIndex((item) => model.value.some((s) => props.valueComparator(s.value, item.value)));
|
|
}
|
|
});
|
|
watch(() => props.items, (newVal, oldVal) => {
|
|
if (menu.value) return;
|
|
if (isFocused.value && !oldVal.length && newVal.length) {
|
|
menu.value = true;
|
|
}
|
|
});
|
|
useRender(() => {
|
|
const hasChips = !!(props.chips || slots.chip);
|
|
const hasList = !!(!props.hideNoData || displayItems.value.length || slots["prepend-item"] || slots["append-item"] || slots["no-data"]);
|
|
const isDirty = model.value.length > 0;
|
|
const textFieldProps = VTextField.filterProps(props);
|
|
const placeholder = isDirty || !isFocused.value && props.label && !props.persistentPlaceholder ? void 0 : props.placeholder;
|
|
return createVNode(VTextField, mergeProps({
|
|
"ref": vTextFieldRef
|
|
}, textFieldProps, {
|
|
"modelValue": model.value.map((v) => v.props.value).join(", "),
|
|
"onUpdate:modelValue": onModelUpdate,
|
|
"focused": isFocused.value,
|
|
"onUpdate:focused": ($event) => isFocused.value = $event,
|
|
"validationValue": model.externalValue,
|
|
"counterValue": counterValue.value,
|
|
"dirty": isDirty,
|
|
"class": ["v-select", {
|
|
"v-select--active-menu": menu.value,
|
|
"v-select--chips": !!props.chips,
|
|
[`v-select--${props.multiple ? "multiple" : "single"}`]: true,
|
|
"v-select--selected": model.value.length,
|
|
"v-select--selection-slot": !!slots.selection
|
|
}, props.class],
|
|
"style": props.style,
|
|
"inputmode": "none",
|
|
"placeholder": placeholder,
|
|
"onClick:clear": onClear,
|
|
"onMousedown:control": onMousedownControl,
|
|
"onBlur": onBlur,
|
|
"onKeydown": onKeydown,
|
|
"aria-label": t(label.value),
|
|
"title": t(label.value)
|
|
}), {
|
|
...slots,
|
|
default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
|
|
"ref": vMenuRef,
|
|
"modelValue": menu.value,
|
|
"onUpdate:modelValue": ($event) => menu.value = $event,
|
|
"activator": "parent",
|
|
"contentClass": "v-select__content",
|
|
"disabled": menuDisabled.value,
|
|
"eager": props.eager,
|
|
"maxHeight": 310,
|
|
"openOnClick": false,
|
|
"closeOnContentClick": false,
|
|
"transition": props.transition,
|
|
"onAfterEnter": onAfterEnter,
|
|
"onAfterLeave": onAfterLeave
|
|
}, computedMenuProps.value), {
|
|
default: () => {
|
|
var _a;
|
|
return [hasList && createVNode(VList, mergeProps({
|
|
"ref": listRef,
|
|
"selected": selectedValues.value,
|
|
"selectStrategy": props.multiple ? "independent" : "single-independent",
|
|
"onMousedown": (e) => e.preventDefault(),
|
|
"onKeydown": onListKeydown,
|
|
"onFocusin": onFocusin,
|
|
"tabindex": "-1",
|
|
"aria-live": "polite",
|
|
"color": (_a = props.itemColor) != null ? _a : props.color
|
|
}, listEvents, props.listProps), {
|
|
default: () => {
|
|
var _a3;
|
|
var _a2, _b, _c;
|
|
return [(_a2 = slots["prepend-item"]) == null ? void 0 : _a2.call(slots), !displayItems.value.length && !props.hideNoData && ((_a3 = (_b = slots["no-data"]) == null ? void 0 : _b.call(slots)) != null ? _a3 : createVNode(VListItem, {
|
|
"title": t(props.noDataText)
|
|
}, null)), createVNode(VVirtualScroll, {
|
|
"ref": vVirtualScrollRef,
|
|
"renderless": true,
|
|
"items": displayItems.value
|
|
}, {
|
|
default: (_ref2) => {
|
|
var _a4;
|
|
var _a22;
|
|
let {
|
|
item,
|
|
index,
|
|
itemRef
|
|
} = _ref2;
|
|
const itemProps = mergeProps(item.props, {
|
|
ref: itemRef,
|
|
key: index,
|
|
onClick: () => select(item, null)
|
|
});
|
|
return (_a4 = (_a22 = slots.item) == null ? void 0 : _a22.call(slots, {
|
|
item,
|
|
index,
|
|
props: itemProps
|
|
})) != null ? _a4 : createVNode(VListItem, mergeProps(itemProps, {
|
|
"role": "option"
|
|
}), {
|
|
prepend: (_ref3) => {
|
|
let {
|
|
isSelected
|
|
} = _ref3;
|
|
return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
|
|
"key": item.value,
|
|
"modelValue": isSelected,
|
|
"ripple": false,
|
|
"tabindex": "-1"
|
|
}, null) : void 0, item.props.prependAvatar && createVNode(VAvatar, {
|
|
"image": item.props.prependAvatar
|
|
}, null), item.props.prependIcon && createVNode(VIcon, {
|
|
"icon": item.props.prependIcon
|
|
}, null)]);
|
|
}
|
|
});
|
|
}
|
|
}), (_c = slots["append-item"]) == null ? void 0 : _c.call(slots)];
|
|
}
|
|
})];
|
|
}
|
|
}), model.value.map((item, index) => {
|
|
function onChipClose(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
select(item, false);
|
|
}
|
|
const slotProps = {
|
|
"onClick:close": onChipClose,
|
|
onKeydown(e) {
|
|
if (e.key !== "Enter" && e.key !== " ") return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onChipClose(e);
|
|
},
|
|
onMousedown(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
},
|
|
modelValue: true,
|
|
"onUpdate:modelValue": void 0
|
|
};
|
|
const hasSlot = hasChips ? !!slots.chip : !!slots.selection;
|
|
const slotContent = hasSlot ? ensureValidVNode(hasChips ? slots.chip({
|
|
item,
|
|
index,
|
|
props: slotProps
|
|
}) : slots.selection({
|
|
item,
|
|
index
|
|
})) : void 0;
|
|
if (hasSlot && !slotContent) return void 0;
|
|
return createVNode("div", {
|
|
"key": item.value,
|
|
"class": "v-select__selection"
|
|
}, [hasChips ? !slots.chip ? createVNode(VChip, mergeProps({
|
|
"key": "chip",
|
|
"closable": props.closableChips,
|
|
"size": "small",
|
|
"text": item.title,
|
|
"disabled": item.props.disabled
|
|
}, slotProps), null) : createVNode(VDefaultsProvider, {
|
|
"key": "chip-defaults",
|
|
"defaults": {
|
|
VChip: {
|
|
closable: props.closableChips,
|
|
size: "small",
|
|
text: item.title
|
|
}
|
|
}
|
|
}, {
|
|
default: () => [slotContent]
|
|
}) : slotContent != null ? slotContent : createVNode("span", {
|
|
"class": "v-select__selection-text"
|
|
}, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
|
|
"class": "v-select__selection-comma"
|
|
}, [createTextVNode(",")])])]);
|
|
})]),
|
|
"append-inner": function() {
|
|
var _a;
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
return createVNode(Fragment, null, [(_a = slots["append-inner"]) == null ? void 0 : _a.call(slots, ...args), props.menuIcon ? createVNode(VIcon, {
|
|
"class": "v-select__menu-icon",
|
|
"icon": props.menuIcon
|
|
}, null) : void 0]);
|
|
}
|
|
});
|
|
});
|
|
return forwardRefs({
|
|
isFocused,
|
|
menu,
|
|
select
|
|
}, vTextFieldRef);
|
|
}
|
|
});
|
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
__name: "AccountSettingsAccount",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const accountData = {
|
|
avatarImg: avatar1,
|
|
firstName: "john",
|
|
lastName: "Doe",
|
|
email: "johnDoe@example.com",
|
|
org: "ThemeSelection",
|
|
phone: "+1 (917) 543-9876",
|
|
address: "123 Main St, New York, NY 10001",
|
|
state: "New York",
|
|
zip: "10001",
|
|
country: "USA",
|
|
language: "English",
|
|
timezone: "(GMT-11:00) International Date Line West",
|
|
currency: "USD"
|
|
};
|
|
const refInputEl = ref();
|
|
const accountDataLocal = ref(structuredClone(accountData));
|
|
const isAccountDeactivated = ref(false);
|
|
const resetForm = () => {
|
|
accountDataLocal.value = structuredClone(accountData);
|
|
};
|
|
const changeAvatar = (file) => {
|
|
const fileReader = new FileReader();
|
|
const { files } = file.target;
|
|
if (files && files.length) {
|
|
fileReader.readAsDataURL(files[0]);
|
|
fileReader.onload = () => {
|
|
if (typeof fileReader.result === "string")
|
|
accountDataLocal.value.avatarImg = fileReader.result;
|
|
};
|
|
}
|
|
};
|
|
const resetAvatar = () => {
|
|
accountDataLocal.value.avatarImg = accountData.avatarImg;
|
|
};
|
|
const timezones = [
|
|
"(GMT-11:00) International Date Line West",
|
|
"(GMT-11:00) Midway Island",
|
|
"(GMT-10:00) Hawaii",
|
|
"(GMT-09:00) Alaska",
|
|
"(GMT-08:00) Pacific Time (US & Canada)",
|
|
"(GMT-08:00) Tijuana",
|
|
"(GMT-07:00) Arizona",
|
|
"(GMT-07:00) Chihuahua",
|
|
"(GMT-07:00) La Paz",
|
|
"(GMT-07:00) Mazatlan",
|
|
"(GMT-07:00) Mountain Time (US & Canada)",
|
|
"(GMT-06:00) Central America",
|
|
"(GMT-06:00) Central Time (US & Canada)",
|
|
"(GMT-06:00) Guadalajara",
|
|
"(GMT-06:00) Mexico City",
|
|
"(GMT-06:00) Monterrey",
|
|
"(GMT-06:00) Saskatchewan",
|
|
"(GMT-05:00) Bogota",
|
|
"(GMT-05:00) Eastern Time (US & Canada)",
|
|
"(GMT-05:00) Indiana (East)",
|
|
"(GMT-05:00) Lima",
|
|
"(GMT-05:00) Quito",
|
|
"(GMT-04:00) Atlantic Time (Canada)",
|
|
"(GMT-04:00) Caracas",
|
|
"(GMT-04:00) La Paz",
|
|
"(GMT-04:00) Santiago",
|
|
"(GMT-03:30) Newfoundland",
|
|
"(GMT-03:00) Brasilia",
|
|
"(GMT-03:00) Buenos Aires",
|
|
"(GMT-03:00) Georgetown",
|
|
"(GMT-03:00) Greenland",
|
|
"(GMT-02:00) Mid-Atlantic",
|
|
"(GMT-01:00) Azores",
|
|
"(GMT-01:00) Cape Verde Is.",
|
|
"(GMT+00:00) Casablanca",
|
|
"(GMT+00:00) Dublin",
|
|
"(GMT+00:00) Edinburgh",
|
|
"(GMT+00:00) Lisbon",
|
|
"(GMT+00:00) London"
|
|
];
|
|
const currencies = [
|
|
"USD",
|
|
"EUR",
|
|
"GBP",
|
|
"AUD",
|
|
"BRL",
|
|
"CAD",
|
|
"CNY",
|
|
"CZK",
|
|
"DKK",
|
|
"HKD",
|
|
"HUF",
|
|
"INR"
|
|
];
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(ssrRenderComponent(VRow, _attrs, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(VCard, { title: "Account Details" }, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(VCardText, { class: "d-flex" }, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(ssrRenderComponent(VAvatar, {
|
|
rounded: "lg",
|
|
size: "100",
|
|
class: "me-6",
|
|
image: unref(accountDataLocal).avatarImg
|
|
}, null, _parent5, _scopeId4));
|
|
_push5(`<form class="d-flex flex-column justify-center gap-5"${_scopeId4}><div class="d-flex flex-wrap gap-2"${_scopeId4}>`);
|
|
_push5(ssrRenderComponent(VBtn, {
|
|
color: "primary",
|
|
onClick: ($event) => {
|
|
var _a;
|
|
return (_a = unref(refInputEl)) == null ? void 0 : _a.click();
|
|
}
|
|
}, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(ssrRenderComponent(VIcon, {
|
|
icon: "bx-cloud-upload",
|
|
class: "d-sm-none"
|
|
}, null, _parent6, _scopeId5));
|
|
_push6(`<span class="d-none d-sm-block"${_scopeId5}>Upload new photo</span>`);
|
|
} else {
|
|
return [
|
|
createVNode(VIcon, {
|
|
icon: "bx-cloud-upload",
|
|
class: "d-sm-none"
|
|
}),
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Upload new photo")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
_push5(`<input type="file" name="file" accept=".jpeg,.png,.jpg,GIF" hidden${_scopeId4}>`);
|
|
_push5(ssrRenderComponent(VBtn, {
|
|
type: "reset",
|
|
color: "error",
|
|
variant: "tonal",
|
|
onClick: resetAvatar
|
|
}, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(`<span class="d-none d-sm-block"${_scopeId5}>Reset</span>`);
|
|
_push6(ssrRenderComponent(VIcon, {
|
|
icon: "bx-refresh",
|
|
class: "d-sm-none"
|
|
}, null, _parent6, _scopeId5));
|
|
} else {
|
|
return [
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Reset"),
|
|
createVNode(VIcon, {
|
|
icon: "bx-refresh",
|
|
class: "d-sm-none"
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
_push5(`</div><p class="text-body-1 mb-0"${_scopeId4}> Allowed JPG, GIF or PNG. Max size of 800K </p></form>`);
|
|
} else {
|
|
return [
|
|
createVNode(VAvatar, {
|
|
rounded: "lg",
|
|
size: "100",
|
|
class: "me-6",
|
|
image: unref(accountDataLocal).avatarImg
|
|
}, null, 8, ["image"]),
|
|
createVNode("form", { class: "d-flex flex-column justify-center gap-5" }, [
|
|
createVNode("div", { class: "d-flex flex-wrap gap-2" }, [
|
|
createVNode(VBtn, {
|
|
color: "primary",
|
|
onClick: ($event) => {
|
|
var _a;
|
|
return (_a = unref(refInputEl)) == null ? void 0 : _a.click();
|
|
}
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VIcon, {
|
|
icon: "bx-cloud-upload",
|
|
class: "d-sm-none"
|
|
}),
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Upload new photo")
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode("input", {
|
|
ref_key: "refInputEl",
|
|
ref: refInputEl,
|
|
type: "file",
|
|
name: "file",
|
|
accept: ".jpeg,.png,.jpg,GIF",
|
|
hidden: "",
|
|
onInput: changeAvatar
|
|
}, null, 544),
|
|
createVNode(VBtn, {
|
|
type: "reset",
|
|
color: "error",
|
|
variant: "tonal",
|
|
onClick: resetAvatar
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Reset"),
|
|
createVNode(VIcon, {
|
|
icon: "bx-refresh",
|
|
class: "d-sm-none"
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
createVNode("p", { class: "text-body-1 mb-0" }, " Allowed JPG, GIF or PNG. Max size of 800K ")
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
_push4(ssrRenderComponent(VDivider, null, null, _parent4, _scopeId3));
|
|
_push4(ssrRenderComponent(VCardText, null, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(ssrRenderComponent(VForm, { class: "mt-6" }, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(ssrRenderComponent(VRow, null, {
|
|
default: withCtx((_6, _push7, _parent7, _scopeId6) => {
|
|
if (_push7) {
|
|
_push7(ssrRenderComponent(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).firstName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).firstName = $event,
|
|
placeholder: "John",
|
|
label: "First Name"
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).firstName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).firstName = $event,
|
|
placeholder: "John",
|
|
label: "First Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).lastName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).lastName = $event,
|
|
placeholder: "Doe",
|
|
label: "Last Name"
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).lastName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).lastName = $event,
|
|
placeholder: "Doe",
|
|
label: "Last Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).email,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).email = $event,
|
|
label: "E-mail",
|
|
placeholder: "johndoe@gmail.com",
|
|
type: "email"
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).email,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).email = $event,
|
|
label: "E-mail",
|
|
placeholder: "johndoe@gmail.com",
|
|
type: "email"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).org,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).org = $event,
|
|
label: "Organization",
|
|
placeholder: "ThemeSelection"
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).org,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).org = $event,
|
|
label: "Organization",
|
|
placeholder: "ThemeSelection"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).phone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).phone = $event,
|
|
label: "Phone Number",
|
|
placeholder: "+1 (917) 543-9876"
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).phone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).phone = $event,
|
|
label: "Phone Number",
|
|
placeholder: "+1 (917) 543-9876"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).address,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).address = $event,
|
|
label: "Address",
|
|
placeholder: "123 Main St, New York, NY 10001"
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).address,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).address = $event,
|
|
label: "Address",
|
|
placeholder: "123 Main St, New York, NY 10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).state,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).state = $event,
|
|
label: "State",
|
|
placeholder: "New York"
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).state,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).state = $event,
|
|
label: "State",
|
|
placeholder: "New York"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).zip,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).zip = $event,
|
|
label: "Zip Code",
|
|
placeholder: "10001"
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).zip,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).zip = $event,
|
|
label: "Zip Code",
|
|
placeholder: "10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).country,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).country = $event,
|
|
label: "Country",
|
|
items: ["USA", "Canada", "UK", "India", "Australia"],
|
|
placeholder: "Select Country"
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).country,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).country = $event,
|
|
label: "Country",
|
|
items: ["USA", "Canada", "UK", "India", "Australia"],
|
|
placeholder: "Select Country"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).language,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).language = $event,
|
|
label: "Language",
|
|
placeholder: "Select Language",
|
|
items: ["English", "Spanish", "Arabic", "Hindi", "Urdu"]
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).language,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).language = $event,
|
|
label: "Language",
|
|
placeholder: "Select Language",
|
|
items: ["English", "Spanish", "Arabic", "Hindi", "Urdu"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).timezone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).timezone = $event,
|
|
label: "Timezone",
|
|
placeholder: "Select Timezone",
|
|
items: timezones,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).timezone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).timezone = $event,
|
|
label: "Timezone",
|
|
placeholder: "Select Timezone",
|
|
items: timezones,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).currency,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).currency = $event,
|
|
label: "Currency",
|
|
placeholder: "Select Currency",
|
|
items: currencies,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).currency,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).currency = $event,
|
|
label: "Currency",
|
|
placeholder: "Select Currency",
|
|
items: currencies,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
class: "d-flex flex-wrap gap-4"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VBtn, null, {
|
|
default: withCtx((_8, _push9, _parent9, _scopeId8) => {
|
|
if (_push9) {
|
|
_push9(`Save changes`);
|
|
} else {
|
|
return [
|
|
createTextVNode("Save changes")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent8, _scopeId7));
|
|
_push8(ssrRenderComponent(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset",
|
|
onClick: resetForm
|
|
}, {
|
|
default: withCtx((_8, _push9, _parent9, _scopeId8) => {
|
|
if (_push9) {
|
|
_push9(` Reset `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Reset ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset",
|
|
onClick: withModifiers(resetForm, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
} else {
|
|
return [
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).firstName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).firstName = $event,
|
|
placeholder: "John",
|
|
label: "First Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).lastName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).lastName = $event,
|
|
placeholder: "Doe",
|
|
label: "Last Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).email,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).email = $event,
|
|
label: "E-mail",
|
|
placeholder: "johndoe@gmail.com",
|
|
type: "email"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).org,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).org = $event,
|
|
label: "Organization",
|
|
placeholder: "ThemeSelection"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).phone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).phone = $event,
|
|
label: "Phone Number",
|
|
placeholder: "+1 (917) 543-9876"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).address,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).address = $event,
|
|
label: "Address",
|
|
placeholder: "123 Main St, New York, NY 10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).state,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).state = $event,
|
|
label: "State",
|
|
placeholder: "New York"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).zip,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).zip = $event,
|
|
label: "Zip Code",
|
|
placeholder: "10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).country,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).country = $event,
|
|
label: "Country",
|
|
items: ["USA", "Canada", "UK", "India", "Australia"],
|
|
placeholder: "Select Country"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).language,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).language = $event,
|
|
label: "Language",
|
|
placeholder: "Select Language",
|
|
items: ["English", "Spanish", "Arabic", "Hindi", "Urdu"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).timezone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).timezone = $event,
|
|
label: "Timezone",
|
|
placeholder: "Select Timezone",
|
|
items: timezones,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).currency,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).currency = $event,
|
|
label: "Currency",
|
|
placeholder: "Select Currency",
|
|
items: currencies,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
class: "d-flex flex-wrap gap-4"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset",
|
|
onClick: withModifiers(resetForm, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent6, _scopeId5));
|
|
} else {
|
|
return [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).firstName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).firstName = $event,
|
|
placeholder: "John",
|
|
label: "First Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).lastName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).lastName = $event,
|
|
placeholder: "Doe",
|
|
label: "Last Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).email,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).email = $event,
|
|
label: "E-mail",
|
|
placeholder: "johndoe@gmail.com",
|
|
type: "email"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).org,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).org = $event,
|
|
label: "Organization",
|
|
placeholder: "ThemeSelection"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).phone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).phone = $event,
|
|
label: "Phone Number",
|
|
placeholder: "+1 (917) 543-9876"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).address,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).address = $event,
|
|
label: "Address",
|
|
placeholder: "123 Main St, New York, NY 10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).state,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).state = $event,
|
|
label: "State",
|
|
placeholder: "New York"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).zip,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).zip = $event,
|
|
label: "Zip Code",
|
|
placeholder: "10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).country,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).country = $event,
|
|
label: "Country",
|
|
items: ["USA", "Canada", "UK", "India", "Australia"],
|
|
placeholder: "Select Country"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).language,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).language = $event,
|
|
label: "Language",
|
|
placeholder: "Select Language",
|
|
items: ["English", "Spanish", "Arabic", "Hindi", "Urdu"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).timezone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).timezone = $event,
|
|
label: "Timezone",
|
|
placeholder: "Select Timezone",
|
|
items: timezones,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).currency,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).currency = $event,
|
|
label: "Currency",
|
|
placeholder: "Select Currency",
|
|
items: currencies,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
class: "d-flex flex-wrap gap-4"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset",
|
|
onClick: withModifiers(resetForm, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
} else {
|
|
return [
|
|
createVNode(VForm, { class: "mt-6" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).firstName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).firstName = $event,
|
|
placeholder: "John",
|
|
label: "First Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).lastName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).lastName = $event,
|
|
placeholder: "Doe",
|
|
label: "Last Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).email,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).email = $event,
|
|
label: "E-mail",
|
|
placeholder: "johndoe@gmail.com",
|
|
type: "email"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).org,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).org = $event,
|
|
label: "Organization",
|
|
placeholder: "ThemeSelection"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).phone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).phone = $event,
|
|
label: "Phone Number",
|
|
placeholder: "+1 (917) 543-9876"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).address,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).address = $event,
|
|
label: "Address",
|
|
placeholder: "123 Main St, New York, NY 10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).state,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).state = $event,
|
|
label: "State",
|
|
placeholder: "New York"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).zip,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).zip = $event,
|
|
label: "Zip Code",
|
|
placeholder: "10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).country,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).country = $event,
|
|
label: "Country",
|
|
items: ["USA", "Canada", "UK", "India", "Australia"],
|
|
placeholder: "Select Country"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).language,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).language = $event,
|
|
label: "Language",
|
|
placeholder: "Select Language",
|
|
items: ["English", "Spanish", "Arabic", "Hindi", "Urdu"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).timezone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).timezone = $event,
|
|
label: "Timezone",
|
|
placeholder: "Select Timezone",
|
|
items: timezones,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).currency,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).currency = $event,
|
|
label: "Currency",
|
|
placeholder: "Select Currency",
|
|
items: currencies,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
class: "d-flex flex-wrap gap-4"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset",
|
|
onClick: withModifiers(resetForm, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(VCardText, { class: "d-flex" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VAvatar, {
|
|
rounded: "lg",
|
|
size: "100",
|
|
class: "me-6",
|
|
image: unref(accountDataLocal).avatarImg
|
|
}, null, 8, ["image"]),
|
|
createVNode("form", { class: "d-flex flex-column justify-center gap-5" }, [
|
|
createVNode("div", { class: "d-flex flex-wrap gap-2" }, [
|
|
createVNode(VBtn, {
|
|
color: "primary",
|
|
onClick: ($event) => {
|
|
var _a;
|
|
return (_a = unref(refInputEl)) == null ? void 0 : _a.click();
|
|
}
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VIcon, {
|
|
icon: "bx-cloud-upload",
|
|
class: "d-sm-none"
|
|
}),
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Upload new photo")
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode("input", {
|
|
ref_key: "refInputEl",
|
|
ref: refInputEl,
|
|
type: "file",
|
|
name: "file",
|
|
accept: ".jpeg,.png,.jpg,GIF",
|
|
hidden: "",
|
|
onInput: changeAvatar
|
|
}, null, 544),
|
|
createVNode(VBtn, {
|
|
type: "reset",
|
|
color: "error",
|
|
variant: "tonal",
|
|
onClick: resetAvatar
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Reset"),
|
|
createVNode(VIcon, {
|
|
icon: "bx-refresh",
|
|
class: "d-sm-none"
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
createVNode("p", { class: "text-body-1 mb-0" }, " Allowed JPG, GIF or PNG. Max size of 800K ")
|
|
])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VDivider),
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, { class: "mt-6" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).firstName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).firstName = $event,
|
|
placeholder: "John",
|
|
label: "First Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).lastName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).lastName = $event,
|
|
placeholder: "Doe",
|
|
label: "Last Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).email,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).email = $event,
|
|
label: "E-mail",
|
|
placeholder: "johndoe@gmail.com",
|
|
type: "email"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).org,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).org = $event,
|
|
label: "Organization",
|
|
placeholder: "ThemeSelection"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).phone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).phone = $event,
|
|
label: "Phone Number",
|
|
placeholder: "+1 (917) 543-9876"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).address,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).address = $event,
|
|
label: "Address",
|
|
placeholder: "123 Main St, New York, NY 10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).state,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).state = $event,
|
|
label: "State",
|
|
placeholder: "New York"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).zip,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).zip = $event,
|
|
label: "Zip Code",
|
|
placeholder: "10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).country,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).country = $event,
|
|
label: "Country",
|
|
items: ["USA", "Canada", "UK", "India", "Australia"],
|
|
placeholder: "Select Country"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).language,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).language = $event,
|
|
label: "Language",
|
|
placeholder: "Select Language",
|
|
items: ["English", "Spanish", "Arabic", "Hindi", "Urdu"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).timezone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).timezone = $event,
|
|
label: "Timezone",
|
|
placeholder: "Select Timezone",
|
|
items: timezones,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).currency,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).currency = $event,
|
|
label: "Currency",
|
|
placeholder: "Select Currency",
|
|
items: currencies,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
class: "d-flex flex-wrap gap-4"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset",
|
|
onClick: withModifiers(resetForm, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(VCard, { title: "Account Details" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, { class: "d-flex" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VAvatar, {
|
|
rounded: "lg",
|
|
size: "100",
|
|
class: "me-6",
|
|
image: unref(accountDataLocal).avatarImg
|
|
}, null, 8, ["image"]),
|
|
createVNode("form", { class: "d-flex flex-column justify-center gap-5" }, [
|
|
createVNode("div", { class: "d-flex flex-wrap gap-2" }, [
|
|
createVNode(VBtn, {
|
|
color: "primary",
|
|
onClick: ($event) => {
|
|
var _a;
|
|
return (_a = unref(refInputEl)) == null ? void 0 : _a.click();
|
|
}
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VIcon, {
|
|
icon: "bx-cloud-upload",
|
|
class: "d-sm-none"
|
|
}),
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Upload new photo")
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode("input", {
|
|
ref_key: "refInputEl",
|
|
ref: refInputEl,
|
|
type: "file",
|
|
name: "file",
|
|
accept: ".jpeg,.png,.jpg,GIF",
|
|
hidden: "",
|
|
onInput: changeAvatar
|
|
}, null, 544),
|
|
createVNode(VBtn, {
|
|
type: "reset",
|
|
color: "error",
|
|
variant: "tonal",
|
|
onClick: resetAvatar
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Reset"),
|
|
createVNode(VIcon, {
|
|
icon: "bx-refresh",
|
|
class: "d-sm-none"
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
createVNode("p", { class: "text-body-1 mb-0" }, " Allowed JPG, GIF or PNG. Max size of 800K ")
|
|
])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VDivider),
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, { class: "mt-6" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).firstName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).firstName = $event,
|
|
placeholder: "John",
|
|
label: "First Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).lastName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).lastName = $event,
|
|
placeholder: "Doe",
|
|
label: "Last Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).email,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).email = $event,
|
|
label: "E-mail",
|
|
placeholder: "johndoe@gmail.com",
|
|
type: "email"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).org,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).org = $event,
|
|
label: "Organization",
|
|
placeholder: "ThemeSelection"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).phone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).phone = $event,
|
|
label: "Phone Number",
|
|
placeholder: "+1 (917) 543-9876"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).address,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).address = $event,
|
|
label: "Address",
|
|
placeholder: "123 Main St, New York, NY 10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).state,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).state = $event,
|
|
label: "State",
|
|
placeholder: "New York"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).zip,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).zip = $event,
|
|
label: "Zip Code",
|
|
placeholder: "10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).country,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).country = $event,
|
|
label: "Country",
|
|
items: ["USA", "Canada", "UK", "India", "Australia"],
|
|
placeholder: "Select Country"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).language,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).language = $event,
|
|
label: "Language",
|
|
placeholder: "Select Language",
|
|
items: ["English", "Spanish", "Arabic", "Hindi", "Urdu"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).timezone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).timezone = $event,
|
|
label: "Timezone",
|
|
placeholder: "Select Timezone",
|
|
items: timezones,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).currency,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).currency = $event,
|
|
label: "Currency",
|
|
placeholder: "Select Currency",
|
|
items: currencies,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
class: "d-flex flex-wrap gap-4"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset",
|
|
onClick: withModifiers(resetForm, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(VCard, { title: "Deactivate Account" }, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(VCardText, null, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(`<div${_scopeId4}>`);
|
|
_push5(ssrRenderComponent(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(isAccountDeactivated),
|
|
"onUpdate:modelValue": ($event) => isRef(isAccountDeactivated) ? isAccountDeactivated.value = $event : null,
|
|
label: "I confirm my account deactivation"
|
|
}, null, _parent5, _scopeId4));
|
|
_push5(`</div>`);
|
|
_push5(ssrRenderComponent(VBtn, {
|
|
disabled: !unref(isAccountDeactivated),
|
|
color: "error",
|
|
class: "mt-3"
|
|
}, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(` Deactivate Account `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Deactivate Account ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
} else {
|
|
return [
|
|
createVNode("div", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(isAccountDeactivated),
|
|
"onUpdate:modelValue": ($event) => isRef(isAccountDeactivated) ? isAccountDeactivated.value = $event : null,
|
|
label: "I confirm my account deactivation"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
createVNode(VBtn, {
|
|
disabled: !unref(isAccountDeactivated),
|
|
color: "error",
|
|
class: "mt-3"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Deactivate Account ")
|
|
]),
|
|
_: 1
|
|
}, 8, ["disabled"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("div", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(isAccountDeactivated),
|
|
"onUpdate:modelValue": ($event) => isRef(isAccountDeactivated) ? isAccountDeactivated.value = $event : null,
|
|
label: "I confirm my account deactivation"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
createVNode(VBtn, {
|
|
disabled: !unref(isAccountDeactivated),
|
|
color: "error",
|
|
class: "mt-3"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Deactivate Account ")
|
|
]),
|
|
_: 1
|
|
}, 8, ["disabled"])
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(VCard, { title: "Deactivate Account" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("div", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(isAccountDeactivated),
|
|
"onUpdate:modelValue": ($event) => isRef(isAccountDeactivated) ? isAccountDeactivated.value = $event : null,
|
|
label: "I confirm my account deactivation"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
createVNode(VBtn, {
|
|
disabled: !unref(isAccountDeactivated),
|
|
color: "error",
|
|
class: "mt-3"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Deactivate Account ")
|
|
]),
|
|
_: 1
|
|
}, 8, ["disabled"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCard, { title: "Account Details" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, { class: "d-flex" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VAvatar, {
|
|
rounded: "lg",
|
|
size: "100",
|
|
class: "me-6",
|
|
image: unref(accountDataLocal).avatarImg
|
|
}, null, 8, ["image"]),
|
|
createVNode("form", { class: "d-flex flex-column justify-center gap-5" }, [
|
|
createVNode("div", { class: "d-flex flex-wrap gap-2" }, [
|
|
createVNode(VBtn, {
|
|
color: "primary",
|
|
onClick: ($event) => {
|
|
var _a;
|
|
return (_a = unref(refInputEl)) == null ? void 0 : _a.click();
|
|
}
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VIcon, {
|
|
icon: "bx-cloud-upload",
|
|
class: "d-sm-none"
|
|
}),
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Upload new photo")
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode("input", {
|
|
ref_key: "refInputEl",
|
|
ref: refInputEl,
|
|
type: "file",
|
|
name: "file",
|
|
accept: ".jpeg,.png,.jpg,GIF",
|
|
hidden: "",
|
|
onInput: changeAvatar
|
|
}, null, 544),
|
|
createVNode(VBtn, {
|
|
type: "reset",
|
|
color: "error",
|
|
variant: "tonal",
|
|
onClick: resetAvatar
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("span", { class: "d-none d-sm-block" }, "Reset"),
|
|
createVNode(VIcon, {
|
|
icon: "bx-refresh",
|
|
class: "d-sm-none"
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
createVNode("p", { class: "text-body-1 mb-0" }, " Allowed JPG, GIF or PNG. Max size of 800K ")
|
|
])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VDivider),
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, { class: "mt-6" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).firstName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).firstName = $event,
|
|
placeholder: "John",
|
|
label: "First Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
md: "6",
|
|
cols: "12"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).lastName,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).lastName = $event,
|
|
placeholder: "Doe",
|
|
label: "Last Name"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).email,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).email = $event,
|
|
label: "E-mail",
|
|
placeholder: "johndoe@gmail.com",
|
|
type: "email"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).org,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).org = $event,
|
|
label: "Organization",
|
|
placeholder: "ThemeSelection"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).phone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).phone = $event,
|
|
label: "Phone Number",
|
|
placeholder: "+1 (917) 543-9876"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).address,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).address = $event,
|
|
label: "Address",
|
|
placeholder: "123 Main St, New York, NY 10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).state,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).state = $event,
|
|
label: "State",
|
|
placeholder: "New York"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).zip,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).zip = $event,
|
|
label: "Zip Code",
|
|
placeholder: "10001"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).country,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).country = $event,
|
|
label: "Country",
|
|
items: ["USA", "Canada", "UK", "India", "Australia"],
|
|
placeholder: "Select Country"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).language,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).language = $event,
|
|
label: "Language",
|
|
placeholder: "Select Language",
|
|
items: ["English", "Spanish", "Arabic", "Hindi", "Urdu"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).timezone,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).timezone = $event,
|
|
label: "Timezone",
|
|
placeholder: "Select Timezone",
|
|
items: timezones,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(accountDataLocal).currency,
|
|
"onUpdate:modelValue": ($event) => unref(accountDataLocal).currency = $event,
|
|
label: "Currency",
|
|
placeholder: "Select Currency",
|
|
items: currencies,
|
|
"menu-props": { maxHeight: 200 }
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
class: "d-flex flex-wrap gap-4"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset",
|
|
onClick: withModifiers(resetForm, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCard, { title: "Deactivate Account" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("div", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(isAccountDeactivated),
|
|
"onUpdate:modelValue": ($event) => isRef(isAccountDeactivated) ? isAccountDeactivated.value = $event : null,
|
|
label: "I confirm my account deactivation"
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
createVNode(VBtn, {
|
|
disabled: !unref(isAccountDeactivated),
|
|
color: "error",
|
|
class: "mt-3"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Deactivate Account ")
|
|
]),
|
|
_: 1
|
|
}, 8, ["disabled"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$3 = _sfc_main$3.setup;
|
|
_sfc_main$3.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/pages/account-settings/AccountSettingsAccount.vue");
|
|
return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
__name: "AccountSettingsNotification",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const recentDevices = ref(
|
|
[
|
|
{
|
|
type: "New for you",
|
|
email: true,
|
|
browser: true,
|
|
app: true
|
|
},
|
|
{
|
|
type: "Account activity",
|
|
email: true,
|
|
browser: true,
|
|
app: true
|
|
},
|
|
{
|
|
type: "A new browser used to sign in",
|
|
email: true,
|
|
browser: true,
|
|
app: false
|
|
},
|
|
{
|
|
type: "A new device is linked",
|
|
email: true,
|
|
browser: false,
|
|
app: false
|
|
}
|
|
]
|
|
);
|
|
const selectedNotification = ref("Only when I'm online");
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(ssrRenderComponent(VCard, mergeProps({ title: "Recent Devices" }, _attrs), {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(VCardText, null, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(` We need permission from your browser to show notifications. <a href="javascript:void(0)" data-v-5bf444da${_scopeId2}>Request Permission</a>`);
|
|
} else {
|
|
return [
|
|
createTextVNode(" We need permission from your browser to show notifications. "),
|
|
createVNode("a", { href: "javascript:void(0)" }, "Request Permission")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VTable, { class: "text-no-wrap" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`<thead data-v-5bf444da${_scopeId2}><tr data-v-5bf444da${_scopeId2}><th scope="col" data-v-5bf444da${_scopeId2}> Type </th><th scope="col" data-v-5bf444da${_scopeId2}> EMAIL </th><th scope="col" data-v-5bf444da${_scopeId2}> BROWSER </th><th scope="col" data-v-5bf444da${_scopeId2}> App </th></tr></thead><tbody data-v-5bf444da${_scopeId2}><!--[-->`);
|
|
ssrRenderList(unref(recentDevices), (device) => {
|
|
_push3(`<tr data-v-5bf444da${_scopeId2}><td data-v-5bf444da${_scopeId2}>${ssrInterpolate(device.type)}</td><td data-v-5bf444da${_scopeId2}>`);
|
|
_push3(ssrRenderComponent(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: device.email,
|
|
"onUpdate:modelValue": ($event) => device.email = $event
|
|
}, null, _parent3, _scopeId2));
|
|
_push3(`</td><td data-v-5bf444da${_scopeId2}>`);
|
|
_push3(ssrRenderComponent(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: device.browser,
|
|
"onUpdate:modelValue": ($event) => device.browser = $event
|
|
}, null, _parent3, _scopeId2));
|
|
_push3(`</td><td data-v-5bf444da${_scopeId2}>`);
|
|
_push3(ssrRenderComponent(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: device.app,
|
|
"onUpdate:modelValue": ($event) => device.app = $event
|
|
}, null, _parent3, _scopeId2));
|
|
_push3(`</td></tr>`);
|
|
});
|
|
_push3(`<!--]--></tbody>`);
|
|
} else {
|
|
return [
|
|
createVNode("thead", null, [
|
|
createVNode("tr", null, [
|
|
createVNode("th", { scope: "col" }, " Type "),
|
|
createVNode("th", { scope: "col" }, " EMAIL "),
|
|
createVNode("th", { scope: "col" }, " BROWSER "),
|
|
createVNode("th", { scope: "col" }, " App ")
|
|
])
|
|
]),
|
|
createVNode("tbody", null, [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(unref(recentDevices), (device) => {
|
|
return openBlock(), createBlock("tr", {
|
|
key: device.type
|
|
}, [
|
|
createVNode("td", null, toDisplayString(device.type), 1),
|
|
createVNode("td", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: device.email,
|
|
"onUpdate:modelValue": ($event) => device.email = $event
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
createVNode("td", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: device.browser,
|
|
"onUpdate:modelValue": ($event) => device.browser = $event
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
createVNode("td", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: device.app,
|
|
"onUpdate:modelValue": ($event) => device.app = $event
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
])
|
|
]);
|
|
}), 128))
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VDivider, null, null, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VCardText, null, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(VForm, { onSubmit: () => {
|
|
} }, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(`<p class="text-base font-weight-medium" data-v-5bf444da${_scopeId3}> When should we send you notifications? </p>`);
|
|
_push4(ssrRenderComponent(VRow, null, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
sm: "6"
|
|
}, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(ssrRenderComponent(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(selectedNotification),
|
|
"onUpdate:modelValue": ($event) => isRef(selectedNotification) ? selectedNotification.value = $event : null,
|
|
mandatory: "",
|
|
items: ["Only when I'm online", "Anytime"]
|
|
}, null, _parent6, _scopeId5));
|
|
} else {
|
|
return [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(selectedNotification),
|
|
"onUpdate:modelValue": ($event) => isRef(selectedNotification) ? selectedNotification.value = $event : null,
|
|
mandatory: "",
|
|
items: ["Only when I'm online", "Anytime"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
} else {
|
|
return [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
sm: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(selectedNotification),
|
|
"onUpdate:modelValue": ($event) => isRef(selectedNotification) ? selectedNotification.value = $event : null,
|
|
mandatory: "",
|
|
items: ["Only when I'm online", "Anytime"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
_push4(`<div class="d-flex flex-wrap gap-4 mt-4" data-v-5bf444da${_scopeId3}>`);
|
|
_push4(ssrRenderComponent(VBtn, { type: "submit" }, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(` Save Changes `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Save Changes ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
_push4(ssrRenderComponent(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset"
|
|
}, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(` Reset `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Reset ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
_push4(`</div>`);
|
|
} else {
|
|
return [
|
|
createVNode("p", { class: "text-base font-weight-medium" }, " When should we send you notifications? "),
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
sm: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(selectedNotification),
|
|
"onUpdate:modelValue": ($event) => isRef(selectedNotification) ? selectedNotification.value = $event : null,
|
|
mandatory: "",
|
|
items: ["Only when I'm online", "Anytime"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode("div", { class: "d-flex flex-wrap gap-4 mt-4" }, [
|
|
createVNode(VBtn, { type: "submit" }, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Save Changes ")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(VForm, {
|
|
onSubmit: withModifiers(() => {
|
|
}, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("p", { class: "text-base font-weight-medium" }, " When should we send you notifications? "),
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
sm: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(selectedNotification),
|
|
"onUpdate:modelValue": ($event) => isRef(selectedNotification) ? selectedNotification.value = $event : null,
|
|
mandatory: "",
|
|
items: ["Only when I'm online", "Anytime"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode("div", { class: "d-flex flex-wrap gap-4 mt-4" }, [
|
|
createVNode(VBtn, { type: "submit" }, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Save Changes ")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" We need permission from your browser to show notifications. "),
|
|
createVNode("a", { href: "javascript:void(0)" }, "Request Permission")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VTable, { class: "text-no-wrap" }, {
|
|
default: withCtx(() => [
|
|
createVNode("thead", null, [
|
|
createVNode("tr", null, [
|
|
createVNode("th", { scope: "col" }, " Type "),
|
|
createVNode("th", { scope: "col" }, " EMAIL "),
|
|
createVNode("th", { scope: "col" }, " BROWSER "),
|
|
createVNode("th", { scope: "col" }, " App ")
|
|
])
|
|
]),
|
|
createVNode("tbody", null, [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(unref(recentDevices), (device) => {
|
|
return openBlock(), createBlock("tr", {
|
|
key: device.type
|
|
}, [
|
|
createVNode("td", null, toDisplayString(device.type), 1),
|
|
createVNode("td", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: device.email,
|
|
"onUpdate:modelValue": ($event) => device.email = $event
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
createVNode("td", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: device.browser,
|
|
"onUpdate:modelValue": ($event) => device.browser = $event
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
createVNode("td", null, [
|
|
createVNode(VCheckbox, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: device.app,
|
|
"onUpdate:modelValue": ($event) => device.app = $event
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
])
|
|
]);
|
|
}), 128))
|
|
])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VDivider),
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, {
|
|
onSubmit: withModifiers(() => {
|
|
}, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode("p", { class: "text-base font-weight-medium" }, " When should we send you notifications? "),
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
sm: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(selectedNotification),
|
|
"onUpdate:modelValue": ($event) => isRef(selectedNotification) ? selectedNotification.value = $event : null,
|
|
mandatory: "",
|
|
items: ["Only when I'm online", "Anytime"]
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode("div", { class: "d-flex flex-wrap gap-4 mt-4" }, [
|
|
createVNode(VBtn, { type: "submit" }, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Save Changes ")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
color: "secondary",
|
|
variant: "tonal",
|
|
type: "reset"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$2 = _sfc_main$2.setup;
|
|
_sfc_main$2.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/pages/account-settings/AccountSettingsNotification.vue");
|
|
return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
|
|
};
|
|
const AccountSettingsNotification = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-5bf444da"]]);
|
|
function useRefs() {
|
|
const refs = ref([]);
|
|
function updateRef(e, i) {
|
|
refs.value[i] = e;
|
|
}
|
|
return {
|
|
refs,
|
|
updateRef
|
|
};
|
|
}
|
|
const makeVPaginationProps = propsFactory({
|
|
activeColor: String,
|
|
start: {
|
|
type: [Number, String],
|
|
default: 1
|
|
},
|
|
modelValue: {
|
|
type: Number,
|
|
default: (props) => props.start
|
|
},
|
|
disabled: Boolean,
|
|
length: {
|
|
type: [Number, String],
|
|
default: 1,
|
|
validator: (val) => val % 1 === 0
|
|
},
|
|
totalVisible: [Number, String],
|
|
firstIcon: {
|
|
type: IconValue,
|
|
default: "$first"
|
|
},
|
|
prevIcon: {
|
|
type: IconValue,
|
|
default: "$prev"
|
|
},
|
|
nextIcon: {
|
|
type: IconValue,
|
|
default: "$next"
|
|
},
|
|
lastIcon: {
|
|
type: IconValue,
|
|
default: "$last"
|
|
},
|
|
ariaLabel: {
|
|
type: String,
|
|
default: "$vuetify.pagination.ariaLabel.root"
|
|
},
|
|
pageAriaLabel: {
|
|
type: String,
|
|
default: "$vuetify.pagination.ariaLabel.page"
|
|
},
|
|
currentPageAriaLabel: {
|
|
type: String,
|
|
default: "$vuetify.pagination.ariaLabel.currentPage"
|
|
},
|
|
firstAriaLabel: {
|
|
type: String,
|
|
default: "$vuetify.pagination.ariaLabel.first"
|
|
},
|
|
previousAriaLabel: {
|
|
type: String,
|
|
default: "$vuetify.pagination.ariaLabel.previous"
|
|
},
|
|
nextAriaLabel: {
|
|
type: String,
|
|
default: "$vuetify.pagination.ariaLabel.next"
|
|
},
|
|
lastAriaLabel: {
|
|
type: String,
|
|
default: "$vuetify.pagination.ariaLabel.last"
|
|
},
|
|
ellipsis: {
|
|
type: String,
|
|
default: "..."
|
|
},
|
|
showFirstLastPage: Boolean,
|
|
...makeBorderProps(),
|
|
...makeComponentProps(),
|
|
...makeDensityProps(),
|
|
...makeElevationProps(),
|
|
...makeRoundedProps(),
|
|
...makeSizeProps(),
|
|
...makeTagProps({
|
|
tag: "nav"
|
|
}),
|
|
...makeThemeProps(),
|
|
...makeVariantProps({
|
|
variant: "text"
|
|
})
|
|
}, "VPagination");
|
|
const VPagination = genericComponent()({
|
|
name: "VPagination",
|
|
props: makeVPaginationProps(),
|
|
emits: {
|
|
"update:modelValue": (value) => true,
|
|
first: (value) => true,
|
|
prev: (value) => true,
|
|
next: (value) => true,
|
|
last: (value) => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
emit
|
|
} = _ref;
|
|
const page = useProxiedModel(props, "modelValue");
|
|
const {
|
|
t,
|
|
n
|
|
} = useLocale();
|
|
const {
|
|
isRtl
|
|
} = useRtl();
|
|
const {
|
|
themeClasses
|
|
} = provideTheme(props);
|
|
const {
|
|
width
|
|
} = useDisplay();
|
|
const maxButtons = shallowRef(-1);
|
|
provideDefaults(void 0, {
|
|
scoped: true
|
|
});
|
|
const {
|
|
resizeRef
|
|
} = useResizeObserver();
|
|
const length = computed(() => parseInt(props.length, 10));
|
|
const start = computed(() => parseInt(props.start, 10));
|
|
const totalVisible = computed(() => {
|
|
if (props.totalVisible != null) return parseInt(props.totalVisible, 10);
|
|
else if (maxButtons.value >= 0) return maxButtons.value;
|
|
return getMax(width.value, 58);
|
|
});
|
|
function getMax(totalWidth, itemWidth) {
|
|
const minButtons = props.showFirstLastPage ? 5 : 3;
|
|
return Math.max(0, Math.floor(
|
|
// Round to two decimal places to avoid floating point errors
|
|
+((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)
|
|
));
|
|
}
|
|
const range = computed(() => {
|
|
if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
|
|
if (totalVisible.value <= 0) return [];
|
|
else if (totalVisible.value === 1) return [page.value];
|
|
if (length.value <= totalVisible.value) {
|
|
return createRange(length.value, start.value);
|
|
}
|
|
const even = totalVisible.value % 2 === 0;
|
|
const middle = even ? totalVisible.value / 2 : Math.floor(totalVisible.value / 2);
|
|
const left = even ? middle : middle + 1;
|
|
const right = length.value - middle;
|
|
if (left - page.value >= 0) {
|
|
return [...createRange(Math.max(1, totalVisible.value - 1), start.value), props.ellipsis, length.value];
|
|
} else if (page.value - right >= (even ? 1 : 0)) {
|
|
const rangeLength = totalVisible.value - 1;
|
|
const rangeStart = length.value - rangeLength + start.value;
|
|
return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)];
|
|
} else {
|
|
const rangeLength = Math.max(1, totalVisible.value - 3);
|
|
const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value;
|
|
return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value];
|
|
}
|
|
});
|
|
function setValue(e, value, event) {
|
|
e.preventDefault();
|
|
page.value = value;
|
|
event && emit(event, value);
|
|
}
|
|
const {
|
|
refs,
|
|
updateRef
|
|
} = useRefs();
|
|
provideDefaults({
|
|
VPaginationBtn: {
|
|
color: toRef(props, "color"),
|
|
border: toRef(props, "border"),
|
|
density: toRef(props, "density"),
|
|
size: toRef(props, "size"),
|
|
variant: toRef(props, "variant"),
|
|
rounded: toRef(props, "rounded"),
|
|
elevation: toRef(props, "elevation")
|
|
}
|
|
});
|
|
const items = computed(() => {
|
|
return range.value.map((item, index) => {
|
|
const ref2 = (e) => updateRef(e, index);
|
|
if (typeof item === "string") {
|
|
return {
|
|
isActive: false,
|
|
key: `ellipsis-${index}`,
|
|
page: item,
|
|
props: {
|
|
ref: ref2,
|
|
ellipsis: true,
|
|
icon: true,
|
|
disabled: true
|
|
}
|
|
};
|
|
} else {
|
|
const isActive = item === page.value;
|
|
return {
|
|
isActive,
|
|
key: item,
|
|
page: n(item),
|
|
props: {
|
|
ref: ref2,
|
|
ellipsis: false,
|
|
icon: true,
|
|
disabled: !!props.disabled || +props.length < 2,
|
|
color: isActive ? props.activeColor : props.color,
|
|
"aria-current": isActive,
|
|
"aria-label": t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
|
|
onClick: (e) => setValue(e, item)
|
|
}
|
|
};
|
|
}
|
|
});
|
|
});
|
|
const controls = computed(() => {
|
|
const prevDisabled = !!props.disabled || page.value <= start.value;
|
|
const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1;
|
|
return {
|
|
first: props.showFirstLastPage ? {
|
|
icon: isRtl.value ? props.lastIcon : props.firstIcon,
|
|
onClick: (e) => setValue(e, start.value, "first"),
|
|
disabled: prevDisabled,
|
|
"aria-label": t(props.firstAriaLabel),
|
|
"aria-disabled": prevDisabled
|
|
} : void 0,
|
|
prev: {
|
|
icon: isRtl.value ? props.nextIcon : props.prevIcon,
|
|
onClick: (e) => setValue(e, page.value - 1, "prev"),
|
|
disabled: prevDisabled,
|
|
"aria-label": t(props.previousAriaLabel),
|
|
"aria-disabled": prevDisabled
|
|
},
|
|
next: {
|
|
icon: isRtl.value ? props.prevIcon : props.nextIcon,
|
|
onClick: (e) => setValue(e, page.value + 1, "next"),
|
|
disabled: nextDisabled,
|
|
"aria-label": t(props.nextAriaLabel),
|
|
"aria-disabled": nextDisabled
|
|
},
|
|
last: props.showFirstLastPage ? {
|
|
icon: isRtl.value ? props.firstIcon : props.lastIcon,
|
|
onClick: (e) => setValue(e, start.value + length.value - 1, "last"),
|
|
disabled: nextDisabled,
|
|
"aria-label": t(props.lastAriaLabel),
|
|
"aria-disabled": nextDisabled
|
|
} : void 0
|
|
};
|
|
});
|
|
function updateFocus() {
|
|
var _a;
|
|
const currentIndex = page.value - start.value;
|
|
(_a = refs.value[currentIndex]) == null ? void 0 : _a.$el.focus();
|
|
}
|
|
function onKeydown(e) {
|
|
if (e.key === keyValues.left && !props.disabled && page.value > +props.start) {
|
|
page.value = page.value - 1;
|
|
nextTick(updateFocus);
|
|
} else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
|
|
page.value = page.value + 1;
|
|
nextTick(updateFocus);
|
|
}
|
|
}
|
|
useRender(() => createVNode(props.tag, {
|
|
"ref": resizeRef,
|
|
"class": ["v-pagination", themeClasses.value, props.class],
|
|
"style": props.style,
|
|
"role": "navigation",
|
|
"aria-label": t(props.ariaLabel),
|
|
"onKeydown": onKeydown,
|
|
"data-test": "v-pagination-root"
|
|
}, {
|
|
default: () => [createVNode("ul", {
|
|
"class": "v-pagination__list"
|
|
}, [props.showFirstLastPage && createVNode("li", {
|
|
"key": "first",
|
|
"class": "v-pagination__first",
|
|
"data-test": "v-pagination-first"
|
|
}, [slots.first ? slots.first(controls.value.first) : createVNode(VBtn, mergeProps({
|
|
"_as": "VPaginationBtn"
|
|
}, controls.value.first), null)]), createVNode("li", {
|
|
"key": "prev",
|
|
"class": "v-pagination__prev",
|
|
"data-test": "v-pagination-prev"
|
|
}, [slots.prev ? slots.prev(controls.value.prev) : createVNode(VBtn, mergeProps({
|
|
"_as": "VPaginationBtn"
|
|
}, controls.value.prev), null)]), items.value.map((item, index) => createVNode("li", {
|
|
"key": item.key,
|
|
"class": ["v-pagination__item", {
|
|
"v-pagination__item--is-active": item.isActive
|
|
}],
|
|
"data-test": "v-pagination-item"
|
|
}, [slots.item ? slots.item(item) : createVNode(VBtn, mergeProps({
|
|
"_as": "VPaginationBtn"
|
|
}, item.props), {
|
|
default: () => [item.page]
|
|
})])), createVNode("li", {
|
|
"key": "next",
|
|
"class": "v-pagination__next",
|
|
"data-test": "v-pagination-next"
|
|
}, [slots.next ? slots.next(controls.value.next) : createVNode(VBtn, mergeProps({
|
|
"_as": "VPaginationBtn"
|
|
}, controls.value.next), null)]), props.showFirstLastPage && createVNode("li", {
|
|
"key": "last",
|
|
"class": "v-pagination__last",
|
|
"data-test": "v-pagination-last"
|
|
}, [slots.last ? slots.last(controls.value.last) : createVNode(VBtn, mergeProps({
|
|
"_as": "VPaginationBtn"
|
|
}, controls.value.last), null)])])]
|
|
}));
|
|
return {};
|
|
}
|
|
});
|
|
const makeDataTablePaginateProps = propsFactory({
|
|
page: {
|
|
type: [Number, String],
|
|
default: 1
|
|
},
|
|
itemsPerPage: {
|
|
type: [Number, String],
|
|
default: 10
|
|
}
|
|
}, "DataTable-paginate");
|
|
const VDataTablePaginationSymbol = Symbol.for("vuetify:data-table-pagination");
|
|
function createPagination(props) {
|
|
const page = useProxiedModel(props, "page", void 0, (value) => +(value != null ? value : 1));
|
|
const itemsPerPage = useProxiedModel(props, "itemsPerPage", void 0, (value) => +(value != null ? value : 10));
|
|
return {
|
|
page,
|
|
itemsPerPage
|
|
};
|
|
}
|
|
function providePagination(options) {
|
|
const {
|
|
page,
|
|
itemsPerPage,
|
|
itemsLength
|
|
} = options;
|
|
const startIndex = computed(() => {
|
|
if (itemsPerPage.value === -1) return 0;
|
|
return itemsPerPage.value * (page.value - 1);
|
|
});
|
|
const stopIndex = computed(() => {
|
|
if (itemsPerPage.value === -1) return itemsLength.value;
|
|
return Math.min(itemsLength.value, startIndex.value + itemsPerPage.value);
|
|
});
|
|
const pageCount = computed(() => {
|
|
if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
|
|
return Math.ceil(itemsLength.value / itemsPerPage.value);
|
|
});
|
|
watch([page, pageCount], () => {
|
|
if (page.value > pageCount.value) {
|
|
page.value = pageCount.value;
|
|
}
|
|
});
|
|
function setItemsPerPage(value) {
|
|
itemsPerPage.value = value;
|
|
page.value = 1;
|
|
}
|
|
function nextPage() {
|
|
page.value = clamp(page.value + 1, 1, pageCount.value);
|
|
}
|
|
function prevPage() {
|
|
page.value = clamp(page.value - 1, 1, pageCount.value);
|
|
}
|
|
function setPage(value) {
|
|
page.value = clamp(value, 1, pageCount.value);
|
|
}
|
|
const data = {
|
|
page,
|
|
itemsPerPage,
|
|
startIndex,
|
|
stopIndex,
|
|
pageCount,
|
|
itemsLength,
|
|
nextPage,
|
|
prevPage,
|
|
setPage,
|
|
setItemsPerPage
|
|
};
|
|
provide(VDataTablePaginationSymbol, data);
|
|
return data;
|
|
}
|
|
function usePagination() {
|
|
const data = inject(VDataTablePaginationSymbol);
|
|
if (!data) throw new Error("Missing pagination!");
|
|
return data;
|
|
}
|
|
function usePaginatedItems(options) {
|
|
const vm = getCurrentInstance("usePaginatedItems");
|
|
const {
|
|
items,
|
|
startIndex,
|
|
stopIndex,
|
|
itemsPerPage
|
|
} = options;
|
|
const paginatedItems = computed(() => {
|
|
if (itemsPerPage.value <= 0) return items.value;
|
|
return items.value.slice(startIndex.value, stopIndex.value);
|
|
});
|
|
watch(paginatedItems, (val) => {
|
|
vm.emit("update:currentItems", val);
|
|
});
|
|
return {
|
|
paginatedItems
|
|
};
|
|
}
|
|
const makeVDataTableFooterProps = propsFactory({
|
|
prevIcon: {
|
|
type: IconValue,
|
|
default: "$prev"
|
|
},
|
|
nextIcon: {
|
|
type: IconValue,
|
|
default: "$next"
|
|
},
|
|
firstIcon: {
|
|
type: IconValue,
|
|
default: "$first"
|
|
},
|
|
lastIcon: {
|
|
type: IconValue,
|
|
default: "$last"
|
|
},
|
|
itemsPerPageText: {
|
|
type: String,
|
|
default: "$vuetify.dataFooter.itemsPerPageText"
|
|
},
|
|
pageText: {
|
|
type: String,
|
|
default: "$vuetify.dataFooter.pageText"
|
|
},
|
|
firstPageLabel: {
|
|
type: String,
|
|
default: "$vuetify.dataFooter.firstPage"
|
|
},
|
|
prevPageLabel: {
|
|
type: String,
|
|
default: "$vuetify.dataFooter.prevPage"
|
|
},
|
|
nextPageLabel: {
|
|
type: String,
|
|
default: "$vuetify.dataFooter.nextPage"
|
|
},
|
|
lastPageLabel: {
|
|
type: String,
|
|
default: "$vuetify.dataFooter.lastPage"
|
|
},
|
|
itemsPerPageOptions: {
|
|
type: Array,
|
|
default: () => [{
|
|
value: 10,
|
|
title: "10"
|
|
}, {
|
|
value: 25,
|
|
title: "25"
|
|
}, {
|
|
value: 50,
|
|
title: "50"
|
|
}, {
|
|
value: 100,
|
|
title: "100"
|
|
}, {
|
|
value: -1,
|
|
title: "$vuetify.dataFooter.itemsPerPageAll"
|
|
}]
|
|
},
|
|
showCurrentPage: Boolean
|
|
}, "VDataTableFooter");
|
|
const VDataTableFooter = genericComponent()({
|
|
name: "VDataTableFooter",
|
|
props: makeVDataTableFooterProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
t
|
|
} = useLocale();
|
|
const {
|
|
page,
|
|
pageCount,
|
|
startIndex,
|
|
stopIndex,
|
|
itemsLength,
|
|
itemsPerPage,
|
|
setItemsPerPage
|
|
} = usePagination();
|
|
const itemsPerPageOptions = computed(() => props.itemsPerPageOptions.map((option) => {
|
|
if (typeof option === "number") {
|
|
return {
|
|
value: option,
|
|
title: option === -1 ? t("$vuetify.dataFooter.itemsPerPageAll") : String(option)
|
|
};
|
|
}
|
|
return {
|
|
...option,
|
|
title: !isNaN(Number(option.title)) ? option.title : t(option.title)
|
|
};
|
|
}));
|
|
useRender(() => {
|
|
var _a;
|
|
const paginationProps = VPagination.filterProps(props);
|
|
return createVNode("div", {
|
|
"class": "v-data-table-footer"
|
|
}, [(_a = slots.prepend) == null ? void 0 : _a.call(slots), createVNode("div", {
|
|
"class": "v-data-table-footer__items-per-page"
|
|
}, [createVNode("span", null, [t(props.itemsPerPageText)]), createVNode(VSelect, {
|
|
"items": itemsPerPageOptions.value,
|
|
"modelValue": itemsPerPage.value,
|
|
"onUpdate:modelValue": (v) => setItemsPerPage(Number(v)),
|
|
"density": "compact",
|
|
"variant": "outlined",
|
|
"hide-details": true
|
|
}, null)]), createVNode("div", {
|
|
"class": "v-data-table-footer__info"
|
|
}, [createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), createVNode("div", {
|
|
"class": "v-data-table-footer__pagination"
|
|
}, [createVNode(VPagination, mergeProps({
|
|
"modelValue": page.value,
|
|
"onUpdate:modelValue": ($event) => page.value = $event,
|
|
"density": "comfortable",
|
|
"first-aria-label": props.firstPageLabel,
|
|
"last-aria-label": props.lastPageLabel,
|
|
"length": pageCount.value,
|
|
"next-aria-label": props.nextPageLabel,
|
|
"previous-aria-label": props.prevPageLabel,
|
|
"rounded": true,
|
|
"show-first-last-page": true,
|
|
"total-visible": props.showCurrentPage ? 1 : 0,
|
|
"variant": "plain"
|
|
}, paginationProps), null)])]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
const VDataTableColumn = defineFunctionalComponent({
|
|
align: {
|
|
type: String,
|
|
default: "start"
|
|
},
|
|
fixed: Boolean,
|
|
fixedOffset: [Number, String],
|
|
height: [Number, String],
|
|
lastFixed: Boolean,
|
|
noPadding: Boolean,
|
|
tag: String,
|
|
width: [Number, String],
|
|
maxWidth: [Number, String],
|
|
nowrap: Boolean
|
|
}, (props, _ref) => {
|
|
var _a;
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const Tag = (_a = props.tag) != null ? _a : "td";
|
|
return createVNode(Tag, {
|
|
"class": ["v-data-table__td", {
|
|
"v-data-table-column--fixed": props.fixed,
|
|
"v-data-table-column--last-fixed": props.lastFixed,
|
|
"v-data-table-column--no-padding": props.noPadding,
|
|
"v-data-table-column--nowrap": props.nowrap
|
|
}, `v-data-table-column--align-${props.align}`],
|
|
"style": {
|
|
height: convertToUnit(props.height),
|
|
width: convertToUnit(props.width),
|
|
maxWidth: convertToUnit(props.maxWidth),
|
|
left: convertToUnit(props.fixedOffset || null)
|
|
}
|
|
}, {
|
|
default: () => {
|
|
var _a2;
|
|
return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
|
|
}
|
|
});
|
|
});
|
|
const makeDataTableHeaderProps = propsFactory({
|
|
headers: Array
|
|
}, "DataTable-header");
|
|
const VDataTableHeadersSymbol = Symbol.for("vuetify:data-table-headers");
|
|
const defaultHeader = {
|
|
title: "",
|
|
sortable: false
|
|
};
|
|
const defaultActionHeader = {
|
|
...defaultHeader,
|
|
width: 48
|
|
};
|
|
function priorityQueue() {
|
|
let arr = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
|
|
const queue = arr.map((element) => ({
|
|
element,
|
|
priority: 0
|
|
}));
|
|
return {
|
|
enqueue: (element, priority) => {
|
|
let added = false;
|
|
for (let i = 0; i < queue.length; i++) {
|
|
const item = queue[i];
|
|
if (item.priority > priority) {
|
|
queue.splice(i, 0, {
|
|
element,
|
|
priority
|
|
});
|
|
added = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!added) queue.push({
|
|
element,
|
|
priority
|
|
});
|
|
},
|
|
size: () => queue.length,
|
|
count: () => {
|
|
let count = 0;
|
|
if (!queue.length) return 0;
|
|
const whole = Math.floor(queue[0].priority);
|
|
for (let i = 0; i < queue.length; i++) {
|
|
if (Math.floor(queue[i].priority) === whole) count += 1;
|
|
}
|
|
return count;
|
|
},
|
|
dequeue: () => {
|
|
return queue.shift();
|
|
}
|
|
};
|
|
}
|
|
function extractLeaves(item) {
|
|
let columns = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
|
|
if (!item.children) {
|
|
columns.push(item);
|
|
} else {
|
|
for (const child of item.children) {
|
|
extractLeaves(child, columns);
|
|
}
|
|
}
|
|
return columns;
|
|
}
|
|
function extractKeys(headers) {
|
|
let keys = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : /* @__PURE__ */ new Set();
|
|
for (const item of headers) {
|
|
if (item.key) keys.add(item.key);
|
|
if (item.children) {
|
|
extractKeys(item.children, keys);
|
|
}
|
|
}
|
|
return keys;
|
|
}
|
|
function getDefaultItem(item) {
|
|
if (!item.key) return void 0;
|
|
if (item.key === "data-table-group") return defaultHeader;
|
|
if (["data-table-expand", "data-table-select"].includes(item.key)) return defaultActionHeader;
|
|
return void 0;
|
|
}
|
|
function getDepth(item) {
|
|
let depth = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
|
|
if (!item.children) return depth;
|
|
return Math.max(depth, ...item.children.map((child) => getDepth(child, depth + 1)));
|
|
}
|
|
function parseFixedColumns(items) {
|
|
let seenFixed = false;
|
|
function setFixed(item) {
|
|
let parentFixed = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
if (!item) return;
|
|
if (parentFixed) {
|
|
item.fixed = true;
|
|
}
|
|
if (item.fixed) {
|
|
if (item.children) {
|
|
for (let i = item.children.length - 1; i >= 0; i--) {
|
|
setFixed(item.children[i], true);
|
|
}
|
|
} else {
|
|
if (!seenFixed) {
|
|
item.lastFixed = true;
|
|
} else if (isNaN(+item.width)) {
|
|
consoleError(`Multiple fixed columns should have a static width (key: ${item.key})`);
|
|
}
|
|
seenFixed = true;
|
|
}
|
|
} else {
|
|
if (item.children) {
|
|
for (let i = item.children.length - 1; i >= 0; i--) {
|
|
setFixed(item.children[i]);
|
|
}
|
|
} else {
|
|
seenFixed = false;
|
|
}
|
|
}
|
|
}
|
|
for (let i = items.length - 1; i >= 0; i--) {
|
|
setFixed(items[i]);
|
|
}
|
|
function setFixedOffset(item) {
|
|
let fixedOffset2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
|
|
if (!item) return fixedOffset2;
|
|
if (item.children) {
|
|
item.fixedOffset = fixedOffset2;
|
|
for (const child of item.children) {
|
|
fixedOffset2 = setFixedOffset(child, fixedOffset2);
|
|
}
|
|
} else if (item.fixed) {
|
|
item.fixedOffset = fixedOffset2;
|
|
fixedOffset2 += parseFloat(item.width || "0") || 0;
|
|
}
|
|
return fixedOffset2;
|
|
}
|
|
let fixedOffset = 0;
|
|
for (const item of items) {
|
|
fixedOffset = setFixedOffset(item, fixedOffset);
|
|
}
|
|
}
|
|
function parse(items, maxDepth) {
|
|
const headers = [];
|
|
let currentDepth = 0;
|
|
const queue = priorityQueue(items);
|
|
while (queue.size() > 0) {
|
|
let rowSize = queue.count();
|
|
const row = [];
|
|
let fraction = 1;
|
|
while (rowSize > 0) {
|
|
const {
|
|
element: item,
|
|
priority
|
|
} = queue.dequeue();
|
|
const diff = maxDepth - currentDepth - getDepth(item);
|
|
row.push({
|
|
...item,
|
|
rowspan: diff != null ? diff : 1,
|
|
colspan: item.children ? extractLeaves(item).length : 1
|
|
});
|
|
if (item.children) {
|
|
for (const child of item.children) {
|
|
const sort = priority % 1 + fraction / Math.pow(10, currentDepth + 2);
|
|
queue.enqueue(child, currentDepth + diff + sort);
|
|
}
|
|
}
|
|
fraction += 1;
|
|
rowSize -= 1;
|
|
}
|
|
currentDepth += 1;
|
|
headers.push(row);
|
|
}
|
|
const columns = items.map((item) => extractLeaves(item)).flat();
|
|
return {
|
|
columns,
|
|
headers
|
|
};
|
|
}
|
|
function convertToInternalHeaders(items) {
|
|
var _a, _b, _c, _d;
|
|
const internalHeaders = [];
|
|
for (const item of items) {
|
|
const defaultItem = {
|
|
...getDefaultItem(item),
|
|
...item
|
|
};
|
|
const key = (_a = defaultItem.key) != null ? _a : typeof defaultItem.value === "string" ? defaultItem.value : null;
|
|
const value = (_c = (_b = defaultItem.value) != null ? _b : key) != null ? _c : null;
|
|
const internalItem = {
|
|
...defaultItem,
|
|
key,
|
|
value,
|
|
sortable: (_d = defaultItem.sortable) != null ? _d : defaultItem.key != null || !!defaultItem.sort,
|
|
children: defaultItem.children ? convertToInternalHeaders(defaultItem.children) : void 0
|
|
};
|
|
internalHeaders.push(internalItem);
|
|
}
|
|
return internalHeaders;
|
|
}
|
|
function createHeaders(props, options) {
|
|
const headers = ref([]);
|
|
const columns = ref([]);
|
|
const sortFunctions = ref({});
|
|
const sortRawFunctions = ref({});
|
|
const filterFunctions = ref({});
|
|
watchEffect(() => {
|
|
var _a2;
|
|
var _a, _b, _c;
|
|
const _headers = props.headers || Object.keys((_a2 = props.items[0]) != null ? _a2 : {}).map((key) => ({
|
|
key,
|
|
title: capitalize(key)
|
|
}));
|
|
const items = _headers.slice();
|
|
const keys = extractKeys(items);
|
|
if (((_a = options == null ? void 0 : options.groupBy) == null ? void 0 : _a.value.length) && !keys.has("data-table-group")) {
|
|
items.unshift({
|
|
key: "data-table-group",
|
|
title: "Group"
|
|
});
|
|
}
|
|
if (((_b = options == null ? void 0 : options.showSelect) == null ? void 0 : _b.value) && !keys.has("data-table-select")) {
|
|
items.unshift({
|
|
key: "data-table-select"
|
|
});
|
|
}
|
|
if (((_c = options == null ? void 0 : options.showExpand) == null ? void 0 : _c.value) && !keys.has("data-table-expand")) {
|
|
items.push({
|
|
key: "data-table-expand"
|
|
});
|
|
}
|
|
const internalHeaders = convertToInternalHeaders(items);
|
|
parseFixedColumns(internalHeaders);
|
|
const maxDepth = Math.max(...internalHeaders.map((item) => getDepth(item))) + 1;
|
|
const parsed = parse(internalHeaders, maxDepth);
|
|
headers.value = parsed.headers;
|
|
columns.value = parsed.columns;
|
|
const flatHeaders = parsed.headers.flat(1);
|
|
for (const header of flatHeaders) {
|
|
if (!header.key) continue;
|
|
if (header.sortable) {
|
|
if (header.sort) {
|
|
sortFunctions.value[header.key] = header.sort;
|
|
}
|
|
if (header.sortRaw) {
|
|
sortRawFunctions.value[header.key] = header.sortRaw;
|
|
}
|
|
}
|
|
if (header.filter) {
|
|
filterFunctions.value[header.key] = header.filter;
|
|
}
|
|
}
|
|
});
|
|
const data = {
|
|
headers,
|
|
columns,
|
|
sortFunctions,
|
|
sortRawFunctions,
|
|
filterFunctions
|
|
};
|
|
provide(VDataTableHeadersSymbol, data);
|
|
return data;
|
|
}
|
|
function useHeaders() {
|
|
const data = inject(VDataTableHeadersSymbol);
|
|
if (!data) throw new Error("Missing headers!");
|
|
return data;
|
|
}
|
|
const singleSelectStrategy = {
|
|
showSelectAll: false,
|
|
allSelected: () => [],
|
|
select: (_ref) => {
|
|
var _a;
|
|
let {
|
|
items,
|
|
value
|
|
} = _ref;
|
|
return new Set(value ? [(_a = items[0]) == null ? void 0 : _a.value] : []);
|
|
},
|
|
selectAll: (_ref2) => {
|
|
let {
|
|
selected
|
|
} = _ref2;
|
|
return selected;
|
|
}
|
|
};
|
|
const pageSelectStrategy = {
|
|
showSelectAll: true,
|
|
allSelected: (_ref3) => {
|
|
let {
|
|
currentPage
|
|
} = _ref3;
|
|
return currentPage;
|
|
},
|
|
select: (_ref4) => {
|
|
let {
|
|
items,
|
|
value,
|
|
selected
|
|
} = _ref4;
|
|
for (const item of items) {
|
|
if (value) selected.add(item.value);
|
|
else selected.delete(item.value);
|
|
}
|
|
return selected;
|
|
},
|
|
selectAll: (_ref5) => {
|
|
let {
|
|
value,
|
|
currentPage,
|
|
selected
|
|
} = _ref5;
|
|
return pageSelectStrategy.select({
|
|
items: currentPage,
|
|
value,
|
|
selected
|
|
});
|
|
}
|
|
};
|
|
const allSelectStrategy = {
|
|
showSelectAll: true,
|
|
allSelected: (_ref6) => {
|
|
let {
|
|
allItems
|
|
} = _ref6;
|
|
return allItems;
|
|
},
|
|
select: (_ref7) => {
|
|
let {
|
|
items,
|
|
value,
|
|
selected
|
|
} = _ref7;
|
|
for (const item of items) {
|
|
if (value) selected.add(item.value);
|
|
else selected.delete(item.value);
|
|
}
|
|
return selected;
|
|
},
|
|
selectAll: (_ref8) => {
|
|
let {
|
|
value,
|
|
allItems,
|
|
selected
|
|
} = _ref8;
|
|
return allSelectStrategy.select({
|
|
items: allItems,
|
|
value,
|
|
selected
|
|
});
|
|
}
|
|
};
|
|
const makeDataTableSelectProps = propsFactory({
|
|
showSelect: Boolean,
|
|
selectStrategy: {
|
|
type: [String, Object],
|
|
default: "page"
|
|
},
|
|
modelValue: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
valueComparator: {
|
|
type: Function,
|
|
default: deepEqual
|
|
}
|
|
}, "DataTable-select");
|
|
const VDataTableSelectionSymbol = Symbol.for("vuetify:data-table-selection");
|
|
function provideSelection(props, _ref9) {
|
|
let {
|
|
allItems,
|
|
currentPage
|
|
} = _ref9;
|
|
const selected = useProxiedModel(props, "modelValue", props.modelValue, (v) => {
|
|
return new Set(wrapInArray(v).map((v2) => {
|
|
var _a2;
|
|
var _a;
|
|
return (_a2 = (_a = allItems.value.find((item) => props.valueComparator(v2, item.value))) == null ? void 0 : _a.value) != null ? _a2 : v2;
|
|
}));
|
|
}, (v) => {
|
|
return [...v.values()];
|
|
});
|
|
const allSelectable = computed(() => allItems.value.filter((item) => item.selectable));
|
|
const currentPageSelectable = computed(() => currentPage.value.filter((item) => item.selectable));
|
|
const selectStrategy = computed(() => {
|
|
if (typeof props.selectStrategy === "object") return props.selectStrategy;
|
|
switch (props.selectStrategy) {
|
|
case "single":
|
|
return singleSelectStrategy;
|
|
case "all":
|
|
return allSelectStrategy;
|
|
case "page":
|
|
default:
|
|
return pageSelectStrategy;
|
|
}
|
|
});
|
|
function isSelected(items) {
|
|
return wrapInArray(items).every((item) => selected.value.has(item.value));
|
|
}
|
|
function isSomeSelected(items) {
|
|
return wrapInArray(items).some((item) => selected.value.has(item.value));
|
|
}
|
|
function select(items, value) {
|
|
const newSelected = selectStrategy.value.select({
|
|
items,
|
|
value,
|
|
selected: new Set(selected.value)
|
|
});
|
|
selected.value = newSelected;
|
|
}
|
|
function toggleSelect(item) {
|
|
select([item], !isSelected([item]));
|
|
}
|
|
function selectAll(value) {
|
|
const newSelected = selectStrategy.value.selectAll({
|
|
value,
|
|
allItems: allSelectable.value,
|
|
currentPage: currentPageSelectable.value,
|
|
selected: new Set(selected.value)
|
|
});
|
|
selected.value = newSelected;
|
|
}
|
|
const someSelected = computed(() => selected.value.size > 0);
|
|
const allSelected = computed(() => {
|
|
const items = selectStrategy.value.allSelected({
|
|
allItems: allSelectable.value,
|
|
currentPage: currentPageSelectable.value
|
|
});
|
|
return !!items.length && isSelected(items);
|
|
});
|
|
const showSelectAll = computed(() => selectStrategy.value.showSelectAll);
|
|
const data = {
|
|
toggleSelect,
|
|
select,
|
|
selectAll,
|
|
isSelected,
|
|
isSomeSelected,
|
|
someSelected,
|
|
allSelected,
|
|
showSelectAll
|
|
};
|
|
provide(VDataTableSelectionSymbol, data);
|
|
return data;
|
|
}
|
|
function useSelection() {
|
|
const data = inject(VDataTableSelectionSymbol);
|
|
if (!data) throw new Error("Missing selection!");
|
|
return data;
|
|
}
|
|
const makeDataTableSortProps = propsFactory({
|
|
sortBy: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
customKeySort: Object,
|
|
multiSort: Boolean,
|
|
mustSort: Boolean
|
|
}, "DataTable-sort");
|
|
const VDataTableSortSymbol = Symbol.for("vuetify:data-table-sort");
|
|
function createSort(props) {
|
|
const sortBy = useProxiedModel(props, "sortBy");
|
|
const mustSort = toRef(props, "mustSort");
|
|
const multiSort = toRef(props, "multiSort");
|
|
return {
|
|
sortBy,
|
|
mustSort,
|
|
multiSort
|
|
};
|
|
}
|
|
function provideSort(options) {
|
|
const {
|
|
sortBy,
|
|
mustSort,
|
|
multiSort,
|
|
page
|
|
} = options;
|
|
const toggleSort = (column) => {
|
|
var _a;
|
|
if (column.key == null) return;
|
|
let newSortBy = (_a = sortBy.value.map((x) => ({
|
|
...x
|
|
}))) != null ? _a : [];
|
|
const item = newSortBy.find((x) => x.key === column.key);
|
|
if (!item) {
|
|
if (multiSort.value) newSortBy = [...newSortBy, {
|
|
key: column.key,
|
|
order: "asc"
|
|
}];
|
|
else newSortBy = [{
|
|
key: column.key,
|
|
order: "asc"
|
|
}];
|
|
} else if (item.order === "desc") {
|
|
if (mustSort.value) {
|
|
item.order = "asc";
|
|
} else {
|
|
newSortBy = newSortBy.filter((x) => x.key !== column.key);
|
|
}
|
|
} else {
|
|
item.order = "desc";
|
|
}
|
|
sortBy.value = newSortBy;
|
|
if (page) page.value = 1;
|
|
};
|
|
function isSorted(column) {
|
|
return !!sortBy.value.find((item) => item.key === column.key);
|
|
}
|
|
const data = {
|
|
sortBy,
|
|
toggleSort,
|
|
isSorted
|
|
};
|
|
provide(VDataTableSortSymbol, data);
|
|
return data;
|
|
}
|
|
function useSort() {
|
|
const data = inject(VDataTableSortSymbol);
|
|
if (!data) throw new Error("Missing sort!");
|
|
return data;
|
|
}
|
|
function useSortedItems(props, items, sortBy, options) {
|
|
const locale = useLocale();
|
|
const sortedItems = computed(() => {
|
|
var _a, _b;
|
|
if (!sortBy.value.length) return items.value;
|
|
return sortItems(items.value, sortBy.value, locale.current.value, {
|
|
transform: options == null ? void 0 : options.transform,
|
|
sortFunctions: {
|
|
...props.customKeySort,
|
|
...(_a = options == null ? void 0 : options.sortFunctions) == null ? void 0 : _a.value
|
|
},
|
|
sortRawFunctions: (_b = options == null ? void 0 : options.sortRawFunctions) == null ? void 0 : _b.value
|
|
});
|
|
});
|
|
return {
|
|
sortedItems
|
|
};
|
|
}
|
|
function sortItems(items, sortByItems, locale, options) {
|
|
const stringCollator = new Intl.Collator(locale, {
|
|
sensitivity: "accent",
|
|
usage: "sort"
|
|
});
|
|
const transformedItems = items.map((item) => [item, (options == null ? void 0 : options.transform) ? options.transform(item) : item]);
|
|
return transformedItems.sort((a, b) => {
|
|
var _a2;
|
|
var _a, _b;
|
|
for (let i = 0; i < sortByItems.length; i++) {
|
|
let hasCustomResult = false;
|
|
const sortKey = sortByItems[i].key;
|
|
const sortOrder = (_a2 = sortByItems[i].order) != null ? _a2 : "asc";
|
|
if (sortOrder === false) continue;
|
|
let sortA = getObjectValueByPath(a[1], sortKey);
|
|
let sortB = getObjectValueByPath(b[1], sortKey);
|
|
let sortARaw = a[0].raw;
|
|
let sortBRaw = b[0].raw;
|
|
if (sortOrder === "desc") {
|
|
[sortA, sortB] = [sortB, sortA];
|
|
[sortARaw, sortBRaw] = [sortBRaw, sortARaw];
|
|
}
|
|
if ((_a = options == null ? void 0 : options.sortRawFunctions) == null ? void 0 : _a[sortKey]) {
|
|
const customResult = options.sortRawFunctions[sortKey](sortARaw, sortBRaw);
|
|
if (customResult == null) continue;
|
|
hasCustomResult = true;
|
|
if (customResult) return customResult;
|
|
}
|
|
if ((_b = options == null ? void 0 : options.sortFunctions) == null ? void 0 : _b[sortKey]) {
|
|
const customResult = options.sortFunctions[sortKey](sortA, sortB);
|
|
if (customResult == null) continue;
|
|
hasCustomResult = true;
|
|
if (customResult) return customResult;
|
|
}
|
|
if (hasCustomResult) continue;
|
|
if (sortA instanceof Date && sortB instanceof Date) {
|
|
return sortA.getTime() - sortB.getTime();
|
|
}
|
|
[sortA, sortB] = [sortA, sortB].map((s) => s != null ? s.toString().toLocaleLowerCase() : s);
|
|
if (sortA !== sortB) {
|
|
if (isEmpty(sortA) && isEmpty(sortB)) return 0;
|
|
if (isEmpty(sortA)) return -1;
|
|
if (isEmpty(sortB)) return 1;
|
|
if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB);
|
|
return stringCollator.compare(sortA, sortB);
|
|
}
|
|
}
|
|
return 0;
|
|
}).map((_ref) => {
|
|
let [item] = _ref;
|
|
return item;
|
|
});
|
|
}
|
|
const makeVDataTableHeadersProps = propsFactory({
|
|
color: String,
|
|
sticky: Boolean,
|
|
disableSort: Boolean,
|
|
multiSort: Boolean,
|
|
sortAscIcon: {
|
|
type: IconValue,
|
|
default: "$sortAsc"
|
|
},
|
|
sortDescIcon: {
|
|
type: IconValue,
|
|
default: "$sortDesc"
|
|
},
|
|
headerProps: {
|
|
type: Object
|
|
},
|
|
...makeDisplayProps(),
|
|
...makeLoaderProps()
|
|
}, "VDataTableHeaders");
|
|
const VDataTableHeaders = genericComponent()({
|
|
name: "VDataTableHeaders",
|
|
props: makeVDataTableHeadersProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
t
|
|
} = useLocale();
|
|
const {
|
|
toggleSort,
|
|
sortBy,
|
|
isSorted
|
|
} = useSort();
|
|
const {
|
|
someSelected,
|
|
allSelected,
|
|
selectAll,
|
|
showSelectAll
|
|
} = useSelection();
|
|
const {
|
|
columns,
|
|
headers
|
|
} = useHeaders();
|
|
const {
|
|
loaderClasses
|
|
} = useLoader(props);
|
|
function getFixedStyles(column, y) {
|
|
if (!props.sticky && !column.fixed) return void 0;
|
|
return {
|
|
position: "sticky",
|
|
left: column.fixed ? convertToUnit(column.fixedOffset) : void 0,
|
|
top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : void 0
|
|
};
|
|
}
|
|
function getSortIcon(column) {
|
|
const item = sortBy.value.find((item2) => item2.key === column.key);
|
|
if (!item) return props.sortAscIcon;
|
|
return item.order === "asc" ? props.sortAscIcon : props.sortDescIcon;
|
|
}
|
|
const {
|
|
backgroundColorClasses,
|
|
backgroundColorStyles
|
|
} = useBackgroundColor(props, "color");
|
|
const {
|
|
displayClasses,
|
|
mobile
|
|
} = useDisplay(props);
|
|
const slotProps = computed(() => ({
|
|
headers: headers.value,
|
|
columns: columns.value,
|
|
toggleSort,
|
|
isSorted,
|
|
sortBy: sortBy.value,
|
|
someSelected: someSelected.value,
|
|
allSelected: allSelected.value,
|
|
selectAll,
|
|
getSortIcon
|
|
}));
|
|
const headerCellClasses = computed(() => ["v-data-table__th", {
|
|
"v-data-table__th--sticky": props.sticky
|
|
}, displayClasses.value, loaderClasses.value]);
|
|
const VDataTableHeaderCell = (_ref2) => {
|
|
var _a, _b;
|
|
let {
|
|
column,
|
|
x,
|
|
y
|
|
} = _ref2;
|
|
const noPadding = column.key === "data-table-select" || column.key === "data-table-expand";
|
|
const headerProps = mergeProps((_a = props.headerProps) != null ? _a : {}, (_b = column.headerProps) != null ? _b : {});
|
|
return createVNode(VDataTableColumn, mergeProps({
|
|
"tag": "th",
|
|
"align": column.align,
|
|
"class": [{
|
|
"v-data-table__th--sortable": column.sortable && !props.disableSort,
|
|
"v-data-table__th--sorted": isSorted(column),
|
|
"v-data-table__th--fixed": column.fixed
|
|
}, ...headerCellClasses.value],
|
|
"style": {
|
|
width: convertToUnit(column.width),
|
|
minWidth: convertToUnit(column.minWidth),
|
|
maxWidth: convertToUnit(column.maxWidth),
|
|
...getFixedStyles(column, y)
|
|
},
|
|
"colspan": column.colspan,
|
|
"rowspan": column.rowspan,
|
|
"onClick": column.sortable ? () => toggleSort(column) : void 0,
|
|
"fixed": column.fixed,
|
|
"nowrap": column.nowrap,
|
|
"lastFixed": column.lastFixed,
|
|
"noPadding": noPadding
|
|
}, headerProps), {
|
|
default: () => {
|
|
var _a3;
|
|
var _a2;
|
|
const columnSlotName = `header.${column.key}`;
|
|
const columnSlotProps = {
|
|
column,
|
|
selectAll,
|
|
isSorted,
|
|
toggleSort,
|
|
sortBy: sortBy.value,
|
|
someSelected: someSelected.value,
|
|
allSelected: allSelected.value,
|
|
getSortIcon
|
|
};
|
|
if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
|
|
if (column.key === "data-table-select") {
|
|
return (_a3 = (_a2 = slots["header.data-table-select"]) == null ? void 0 : _a2.call(slots, columnSlotProps)) != null ? _a3 : showSelectAll.value && createVNode(VCheckboxBtn, {
|
|
"modelValue": allSelected.value,
|
|
"indeterminate": someSelected.value && !allSelected.value,
|
|
"onUpdate:modelValue": selectAll
|
|
}, null);
|
|
}
|
|
return createVNode("div", {
|
|
"class": "v-data-table-header__content"
|
|
}, [createVNode("span", null, [column.title]), column.sortable && !props.disableSort && createVNode(VIcon, {
|
|
"key": "icon",
|
|
"class": "v-data-table-header__sort-icon",
|
|
"icon": getSortIcon(column)
|
|
}, null), props.multiSort && isSorted(column) && createVNode("div", {
|
|
"key": "badge",
|
|
"class": ["v-data-table-header__sort-badge", ...backgroundColorClasses.value],
|
|
"style": backgroundColorStyles.value
|
|
}, [sortBy.value.findIndex((x2) => x2.key === column.key) + 1])]);
|
|
}
|
|
});
|
|
};
|
|
const VDataTableMobileHeaderCell = () => {
|
|
var _a, _b;
|
|
const headerProps = mergeProps((_b = (_a = props.headerProps) != null ? _a : {}) != null ? _b : {});
|
|
const displayItems = computed(() => {
|
|
return columns.value.filter((column) => (column == null ? void 0 : column.sortable) && !props.disableSort);
|
|
});
|
|
const appendIcon = computed(() => {
|
|
const showSelectColumn = columns.value.find((column) => column.key === "data-table-select");
|
|
if (showSelectColumn == null) return;
|
|
return allSelected.value ? "$checkboxOn" : someSelected.value ? "$checkboxIndeterminate" : "$checkboxOff";
|
|
});
|
|
return createVNode(VDataTableColumn, mergeProps({
|
|
"tag": "th",
|
|
"class": [...headerCellClasses.value],
|
|
"colspan": headers.value.length + 1
|
|
}, headerProps), {
|
|
default: () => [createVNode("div", {
|
|
"class": "v-data-table-header__content"
|
|
}, [createVNode(VSelect, {
|
|
"chips": true,
|
|
"class": "v-data-table__td-sort-select",
|
|
"clearable": true,
|
|
"density": "default",
|
|
"items": displayItems.value,
|
|
"label": t("$vuetify.dataTable.sortBy"),
|
|
"multiple": props.multiSort,
|
|
"variant": "underlined",
|
|
"onClick:clear": () => sortBy.value = [],
|
|
"appendIcon": appendIcon.value,
|
|
"onClick:append": () => selectAll(!allSelected.value)
|
|
}, {
|
|
...slots,
|
|
chip: (props2) => {
|
|
var _a2;
|
|
return createVNode(VChip, {
|
|
"onClick": ((_a2 = props2.item.raw) == null ? void 0 : _a2.sortable) ? () => toggleSort(props2.item.raw) : void 0,
|
|
"onMousedown": (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
}, {
|
|
default: () => [props2.item.title, createVNode(VIcon, {
|
|
"class": ["v-data-table__td-sort-icon", isSorted(props2.item.raw) && "v-data-table__td-sort-icon-active"],
|
|
"icon": getSortIcon(props2.item.raw),
|
|
"size": "small"
|
|
}, null)]
|
|
});
|
|
}
|
|
})])]
|
|
});
|
|
};
|
|
useRender(() => {
|
|
return mobile.value ? createVNode("tr", null, [createVNode(VDataTableMobileHeaderCell, null, null)]) : createVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
|
|
"column": column,
|
|
"x": x,
|
|
"y": y
|
|
}, null))])), props.loading && createVNode("tr", {
|
|
"class": "v-data-table-progress"
|
|
}, [createVNode("th", {
|
|
"colspan": columns.value.length
|
|
}, [createVNode(LoaderSlot, {
|
|
"name": "v-data-table-progress",
|
|
"absolute": true,
|
|
"active": true,
|
|
"color": typeof props.loading === "boolean" ? void 0 : props.loading,
|
|
"indeterminate": true
|
|
}, {
|
|
default: slots.loader
|
|
})])])]);
|
|
});
|
|
}
|
|
});
|
|
const makeDataTableGroupProps = propsFactory({
|
|
groupBy: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
}, "DataTable-group");
|
|
const VDataTableGroupSymbol = Symbol.for("vuetify:data-table-group");
|
|
function createGroupBy(props) {
|
|
const groupBy = useProxiedModel(props, "groupBy");
|
|
return {
|
|
groupBy
|
|
};
|
|
}
|
|
function provideGroupBy(options) {
|
|
const {
|
|
disableSort,
|
|
groupBy,
|
|
sortBy
|
|
} = options;
|
|
const opened = ref(/* @__PURE__ */ new Set());
|
|
const sortByWithGroups = computed(() => {
|
|
return groupBy.value.map((val) => {
|
|
var _a;
|
|
return {
|
|
...val,
|
|
order: (_a = val.order) != null ? _a : false
|
|
};
|
|
}).concat((disableSort == null ? void 0 : disableSort.value) ? [] : sortBy.value);
|
|
});
|
|
function isGroupOpen(group) {
|
|
return opened.value.has(group.id);
|
|
}
|
|
function toggleGroup(group) {
|
|
const newOpened = new Set(opened.value);
|
|
if (!isGroupOpen(group)) newOpened.add(group.id);
|
|
else newOpened.delete(group.id);
|
|
opened.value = newOpened;
|
|
}
|
|
function extractRows(items) {
|
|
function dive(group) {
|
|
const arr = [];
|
|
for (const item of group.items) {
|
|
if ("type" in item && item.type === "group") {
|
|
arr.push(...dive(item));
|
|
} else {
|
|
arr.push(item);
|
|
}
|
|
}
|
|
return arr;
|
|
}
|
|
return dive({
|
|
items
|
|
});
|
|
}
|
|
const data = {
|
|
sortByWithGroups,
|
|
toggleGroup,
|
|
opened,
|
|
groupBy,
|
|
extractRows,
|
|
isGroupOpen
|
|
};
|
|
provide(VDataTableGroupSymbol, data);
|
|
return data;
|
|
}
|
|
function useGroupBy() {
|
|
const data = inject(VDataTableGroupSymbol);
|
|
if (!data) throw new Error("Missing group!");
|
|
return data;
|
|
}
|
|
function groupItemsByProperty(items, groupBy) {
|
|
if (!items.length) return [];
|
|
const groups = /* @__PURE__ */ new Map();
|
|
for (const item of items) {
|
|
const value = getObjectValueByPath(item.raw, groupBy);
|
|
if (!groups.has(value)) {
|
|
groups.set(value, []);
|
|
}
|
|
groups.get(value).push(item);
|
|
}
|
|
return groups;
|
|
}
|
|
function groupItems(items, groupBy) {
|
|
let depth = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0;
|
|
let prefix = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "root";
|
|
if (!groupBy.length) return [];
|
|
const groupedItems = groupItemsByProperty(items, groupBy[0]);
|
|
const groups = [];
|
|
const rest = groupBy.slice(1);
|
|
groupedItems.forEach((items2, value) => {
|
|
const key = groupBy[0];
|
|
const id = `${prefix}_${key}_${value}`;
|
|
groups.push({
|
|
depth,
|
|
id,
|
|
key,
|
|
value,
|
|
items: rest.length ? groupItems(items2, rest, depth + 1, id) : items2,
|
|
type: "group"
|
|
});
|
|
});
|
|
return groups;
|
|
}
|
|
function flattenItems(items, opened) {
|
|
const flatItems = [];
|
|
for (const item of items) {
|
|
if ("type" in item && item.type === "group") {
|
|
if (item.value != null) {
|
|
flatItems.push(item);
|
|
}
|
|
if (opened.has(item.id) || item.value == null) {
|
|
flatItems.push(...flattenItems(item.items, opened));
|
|
}
|
|
} else {
|
|
flatItems.push(item);
|
|
}
|
|
}
|
|
return flatItems;
|
|
}
|
|
function useGroupedItems(items, groupBy, opened) {
|
|
const flatItems = computed(() => {
|
|
if (!groupBy.value.length) return items.value;
|
|
const groupedItems = groupItems(items.value, groupBy.value.map((item) => item.key));
|
|
return flattenItems(groupedItems, opened.value);
|
|
});
|
|
return {
|
|
flatItems
|
|
};
|
|
}
|
|
const makeVDataTableGroupHeaderRowProps = propsFactory({
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
}, "VDataTableGroupHeaderRow");
|
|
const VDataTableGroupHeaderRow = genericComponent()({
|
|
name: "VDataTableGroupHeaderRow",
|
|
props: makeVDataTableGroupHeaderRowProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
isGroupOpen,
|
|
toggleGroup,
|
|
extractRows
|
|
} = useGroupBy();
|
|
const {
|
|
isSelected,
|
|
isSomeSelected,
|
|
select
|
|
} = useSelection();
|
|
const {
|
|
columns
|
|
} = useHeaders();
|
|
const rows = computed(() => {
|
|
return extractRows([props.item]);
|
|
});
|
|
return () => createVNode("tr", {
|
|
"class": "v-data-table-group-header-row",
|
|
"style": {
|
|
"--v-data-table-group-header-row-depth": props.item.depth
|
|
}
|
|
}, [columns.value.map((column) => {
|
|
var _a2, _b2;
|
|
var _a, _b;
|
|
if (column.key === "data-table-group") {
|
|
const icon = isGroupOpen(props.item) ? "$expand" : "$next";
|
|
const onClick = () => toggleGroup(props.item);
|
|
return (_a2 = (_a = slots["data-table-group"]) == null ? void 0 : _a.call(slots, {
|
|
item: props.item,
|
|
count: rows.value.length,
|
|
props: {
|
|
icon,
|
|
onClick
|
|
}
|
|
})) != null ? _a2 : createVNode(VDataTableColumn, {
|
|
"class": "v-data-table-group-header-row__column"
|
|
}, {
|
|
default: () => [createVNode(VBtn, {
|
|
"size": "small",
|
|
"variant": "text",
|
|
"icon": icon,
|
|
"onClick": onClick
|
|
}, null), createVNode("span", null, [props.item.value]), createVNode("span", null, [createTextVNode("("), rows.value.length, createTextVNode(")")])]
|
|
});
|
|
}
|
|
if (column.key === "data-table-select") {
|
|
const modelValue = isSelected(rows.value);
|
|
const indeterminate = isSomeSelected(rows.value) && !modelValue;
|
|
const selectGroup = (v) => select(rows.value, v);
|
|
return (_b2 = (_b = slots["data-table-select"]) == null ? void 0 : _b.call(slots, {
|
|
props: {
|
|
modelValue,
|
|
indeterminate,
|
|
"onUpdate:modelValue": selectGroup
|
|
}
|
|
})) != null ? _b2 : createVNode("td", null, [createVNode(VCheckboxBtn, {
|
|
"modelValue": modelValue,
|
|
"indeterminate": indeterminate,
|
|
"onUpdate:modelValue": selectGroup
|
|
}, null)]);
|
|
}
|
|
return createVNode("td", null, null);
|
|
})]);
|
|
}
|
|
});
|
|
const makeDataTableExpandProps = propsFactory({
|
|
expandOnClick: Boolean,
|
|
showExpand: Boolean,
|
|
expanded: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
}, "DataTable-expand");
|
|
const VDataTableExpandedKey = Symbol.for("vuetify:datatable:expanded");
|
|
function provideExpanded(props) {
|
|
const expandOnClick = toRef(props, "expandOnClick");
|
|
const expanded = useProxiedModel(props, "expanded", props.expanded, (v) => {
|
|
return new Set(v);
|
|
}, (v) => {
|
|
return [...v.values()];
|
|
});
|
|
function expand(item, value) {
|
|
const newExpanded = new Set(expanded.value);
|
|
if (!value) {
|
|
newExpanded.delete(item.value);
|
|
} else {
|
|
newExpanded.add(item.value);
|
|
}
|
|
expanded.value = newExpanded;
|
|
}
|
|
function isExpanded(item) {
|
|
return expanded.value.has(item.value);
|
|
}
|
|
function toggleExpand(item) {
|
|
expand(item, !isExpanded(item));
|
|
}
|
|
const data = {
|
|
expand,
|
|
expanded,
|
|
expandOnClick,
|
|
isExpanded,
|
|
toggleExpand
|
|
};
|
|
provide(VDataTableExpandedKey, data);
|
|
return data;
|
|
}
|
|
function useExpanded() {
|
|
const data = inject(VDataTableExpandedKey);
|
|
if (!data) throw new Error("foo");
|
|
return data;
|
|
}
|
|
const makeVDataTableRowProps = propsFactory({
|
|
index: Number,
|
|
item: Object,
|
|
cellProps: [Object, Function],
|
|
onClick: EventProp(),
|
|
onContextmenu: EventProp(),
|
|
onDblclick: EventProp(),
|
|
...makeDisplayProps()
|
|
}, "VDataTableRow");
|
|
const VDataTableRow = genericComponent()({
|
|
name: "VDataTableRow",
|
|
props: makeVDataTableRowProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
displayClasses,
|
|
mobile
|
|
} = useDisplay(props, "v-data-table__tr");
|
|
const {
|
|
isSelected,
|
|
toggleSelect,
|
|
someSelected,
|
|
allSelected,
|
|
selectAll
|
|
} = useSelection();
|
|
const {
|
|
isExpanded,
|
|
toggleExpand
|
|
} = useExpanded();
|
|
const {
|
|
toggleSort,
|
|
sortBy,
|
|
isSorted
|
|
} = useSort();
|
|
const {
|
|
columns
|
|
} = useHeaders();
|
|
useRender(() => createVNode("tr", {
|
|
"class": ["v-data-table__tr", {
|
|
"v-data-table__tr--clickable": !!(props.onClick || props.onContextmenu || props.onDblclick)
|
|
}, displayClasses.value],
|
|
"onClick": props.onClick,
|
|
"onContextmenu": props.onContextmenu,
|
|
"onDblclick": props.onDblclick
|
|
}, [props.item && columns.value.map((column, i) => {
|
|
const item = props.item;
|
|
const slotName = `item.${column.key}`;
|
|
const headerSlotName = `header.${column.key}`;
|
|
const slotProps = {
|
|
index: props.index,
|
|
item: item.raw,
|
|
internalItem: item,
|
|
value: getObjectValueByPath(item.columns, column.key),
|
|
column,
|
|
isSelected,
|
|
toggleSelect,
|
|
isExpanded,
|
|
toggleExpand
|
|
};
|
|
const columnSlotProps = {
|
|
column,
|
|
selectAll,
|
|
isSorted,
|
|
toggleSort,
|
|
sortBy: sortBy.value,
|
|
someSelected: someSelected.value,
|
|
allSelected: allSelected.value,
|
|
getSortIcon: () => ""
|
|
};
|
|
const cellProps = typeof props.cellProps === "function" ? props.cellProps({
|
|
index: slotProps.index,
|
|
item: slotProps.item,
|
|
internalItem: slotProps.internalItem,
|
|
value: slotProps.value,
|
|
column
|
|
}) : props.cellProps;
|
|
const columnCellProps = typeof column.cellProps === "function" ? column.cellProps({
|
|
index: slotProps.index,
|
|
item: slotProps.item,
|
|
internalItem: slotProps.internalItem,
|
|
value: slotProps.value
|
|
}) : column.cellProps;
|
|
return createVNode(VDataTableColumn, mergeProps({
|
|
"align": column.align,
|
|
"class": {
|
|
"v-data-table__td--expanded-row": column.key === "data-table-expand",
|
|
"v-data-table__td--select-row": column.key === "data-table-select"
|
|
},
|
|
"fixed": column.fixed,
|
|
"fixedOffset": column.fixedOffset,
|
|
"lastFixed": column.lastFixed,
|
|
"maxWidth": !mobile.value ? column.maxWidth : void 0,
|
|
"noPadding": column.key === "data-table-select" || column.key === "data-table-expand",
|
|
"nowrap": column.nowrap,
|
|
"width": !mobile.value ? column.width : void 0
|
|
}, cellProps, columnCellProps), {
|
|
default: () => {
|
|
var _a2, _b2, _c2, _d2;
|
|
var _a, _b, _c, _d, _e;
|
|
if (slots[slotName] && !mobile.value) return (_a = slots[slotName]) == null ? void 0 : _a.call(slots, slotProps);
|
|
if (column.key === "data-table-select") {
|
|
return (_a2 = (_b = slots["item.data-table-select"]) == null ? void 0 : _b.call(slots, slotProps)) != null ? _a2 : createVNode(VCheckboxBtn, {
|
|
"disabled": !item.selectable,
|
|
"modelValue": isSelected([item]),
|
|
"onClick": withModifiers(() => toggleSelect(item), ["stop"])
|
|
}, null);
|
|
}
|
|
if (column.key === "data-table-expand") {
|
|
return (_b2 = (_c = slots["item.data-table-expand"]) == null ? void 0 : _c.call(slots, slotProps)) != null ? _b2 : createVNode(VBtn, {
|
|
"icon": isExpanded(item) ? "$collapse" : "$expand",
|
|
"size": "small",
|
|
"variant": "text",
|
|
"onClick": withModifiers(() => toggleExpand(item), ["stop"])
|
|
}, null);
|
|
}
|
|
const displayValue = toDisplayString(slotProps.value);
|
|
return !mobile.value ? displayValue : createVNode(Fragment, null, [createVNode("div", {
|
|
"class": "v-data-table__td-title"
|
|
}, [(_c2 = (_d = slots[headerSlotName]) == null ? void 0 : _d.call(slots, columnSlotProps)) != null ? _c2 : column.title]), createVNode("div", {
|
|
"class": "v-data-table__td-value"
|
|
}, [(_d2 = (_e = slots[slotName]) == null ? void 0 : _e.call(slots, slotProps)) != null ? _d2 : displayValue])]);
|
|
}
|
|
});
|
|
})]));
|
|
}
|
|
});
|
|
const makeVDataTableRowsProps = propsFactory({
|
|
loading: [Boolean, String],
|
|
loadingText: {
|
|
type: String,
|
|
default: "$vuetify.dataIterator.loadingText"
|
|
},
|
|
hideNoData: Boolean,
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
noDataText: {
|
|
type: String,
|
|
default: "$vuetify.noDataText"
|
|
},
|
|
rowProps: [Object, Function],
|
|
cellProps: [Object, Function],
|
|
...makeDisplayProps()
|
|
}, "VDataTableRows");
|
|
const VDataTableRows = genericComponent()({
|
|
name: "VDataTableRows",
|
|
inheritAttrs: false,
|
|
props: makeVDataTableRowsProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
columns
|
|
} = useHeaders();
|
|
const {
|
|
expandOnClick,
|
|
toggleExpand,
|
|
isExpanded
|
|
} = useExpanded();
|
|
const {
|
|
isSelected,
|
|
toggleSelect
|
|
} = useSelection();
|
|
const {
|
|
toggleGroup,
|
|
isGroupOpen
|
|
} = useGroupBy();
|
|
const {
|
|
t
|
|
} = useLocale();
|
|
const {
|
|
mobile
|
|
} = useDisplay(props);
|
|
useRender(() => {
|
|
var _a2, _b2;
|
|
var _a, _b;
|
|
if (props.loading && (!props.items.length || slots.loading)) {
|
|
return createVNode("tr", {
|
|
"class": "v-data-table-rows-loading",
|
|
"key": "loading"
|
|
}, [createVNode("td", {
|
|
"colspan": columns.value.length
|
|
}, [(_a2 = (_a = slots.loading) == null ? void 0 : _a.call(slots)) != null ? _a2 : t(props.loadingText)])]);
|
|
}
|
|
if (!props.loading && !props.items.length && !props.hideNoData) {
|
|
return createVNode("tr", {
|
|
"class": "v-data-table-rows-no-data",
|
|
"key": "no-data"
|
|
}, [createVNode("td", {
|
|
"colspan": columns.value.length
|
|
}, [(_b2 = (_b = slots["no-data"]) == null ? void 0 : _b.call(slots)) != null ? _b2 : t(props.noDataText)])]);
|
|
}
|
|
return createVNode(Fragment, null, [props.items.map((item, index) => {
|
|
var _a3;
|
|
var _a22;
|
|
if (item.type === "group") {
|
|
const slotProps2 = {
|
|
index,
|
|
item,
|
|
columns: columns.value,
|
|
isExpanded,
|
|
toggleExpand,
|
|
isSelected,
|
|
toggleSelect,
|
|
toggleGroup,
|
|
isGroupOpen
|
|
};
|
|
return slots["group-header"] ? slots["group-header"](slotProps2) : createVNode(VDataTableGroupHeaderRow, mergeProps({
|
|
"key": `group-header_${item.id}`,
|
|
"item": item
|
|
}, getPrefixedEventHandlers(attrs, ":group-header", () => slotProps2)), slots);
|
|
}
|
|
const slotProps = {
|
|
index,
|
|
item: item.raw,
|
|
internalItem: item,
|
|
columns: columns.value,
|
|
isExpanded,
|
|
toggleExpand,
|
|
isSelected,
|
|
toggleSelect
|
|
};
|
|
const itemSlotProps = {
|
|
...slotProps,
|
|
props: mergeProps({
|
|
key: `item_${(_a3 = item.key) != null ? _a3 : item.index}`,
|
|
onClick: expandOnClick.value ? () => {
|
|
toggleExpand(item);
|
|
} : void 0,
|
|
index,
|
|
item,
|
|
cellProps: props.cellProps,
|
|
mobile: mobile.value
|
|
}, getPrefixedEventHandlers(attrs, ":row", () => slotProps), typeof props.rowProps === "function" ? props.rowProps({
|
|
item: slotProps.item,
|
|
index: slotProps.index,
|
|
internalItem: slotProps.internalItem
|
|
}) : props.rowProps)
|
|
};
|
|
return createVNode(Fragment, {
|
|
"key": itemSlotProps.props.key
|
|
}, [slots.item ? slots.item(itemSlotProps) : createVNode(VDataTableRow, itemSlotProps.props, slots), isExpanded(item) && ((_a22 = slots["expanded-row"]) == null ? void 0 : _a22.call(slots, slotProps))]);
|
|
})]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
const makeDataTableItemsProps = propsFactory({
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
itemValue: {
|
|
type: [String, Array, Function],
|
|
default: "id"
|
|
},
|
|
itemSelectable: {
|
|
type: [String, Array, Function],
|
|
default: null
|
|
},
|
|
rowProps: [Object, Function],
|
|
cellProps: [Object, Function],
|
|
returnObject: Boolean
|
|
}, "DataTable-items");
|
|
function transformItem(props, item, index, columns) {
|
|
const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue);
|
|
const selectable = getPropertyFromItem(item, props.itemSelectable, true);
|
|
const itemColumns = columns.reduce((obj, column) => {
|
|
if (column.key != null) obj[column.key] = getPropertyFromItem(item, column.value);
|
|
return obj;
|
|
}, {});
|
|
return {
|
|
type: "item",
|
|
key: props.returnObject ? getPropertyFromItem(item, props.itemValue) : value,
|
|
index,
|
|
value,
|
|
selectable,
|
|
columns: itemColumns,
|
|
raw: item
|
|
};
|
|
}
|
|
function transformItems(props, items, columns) {
|
|
return items.map((item, index) => transformItem(props, item, index, columns));
|
|
}
|
|
function useDataTableItems(props, columns) {
|
|
const items = computed(() => transformItems(props, props.items, columns.value));
|
|
return {
|
|
items
|
|
};
|
|
}
|
|
function useOptions(_ref) {
|
|
let {
|
|
page,
|
|
itemsPerPage,
|
|
sortBy,
|
|
groupBy,
|
|
search
|
|
} = _ref;
|
|
const vm = getCurrentInstance("VDataTable");
|
|
const options = computed(() => ({
|
|
page: page.value,
|
|
itemsPerPage: itemsPerPage.value,
|
|
sortBy: sortBy.value,
|
|
groupBy: groupBy.value,
|
|
search: search.value
|
|
}));
|
|
let oldOptions = null;
|
|
watch(options, () => {
|
|
if (deepEqual(oldOptions, options.value)) return;
|
|
if (oldOptions && oldOptions.search !== options.value.search) {
|
|
page.value = 1;
|
|
}
|
|
vm.emit("update:options", options.value);
|
|
oldOptions = options.value;
|
|
}, {
|
|
deep: true,
|
|
immediate: true
|
|
});
|
|
}
|
|
const defaultFilter = (value, query, item) => {
|
|
if (value == null || query == null) return -1;
|
|
return value.toString().toLocaleLowerCase().indexOf(query.toString().toLocaleLowerCase());
|
|
};
|
|
const makeFilterProps = propsFactory({
|
|
customFilter: Function,
|
|
customKeyFilter: Object,
|
|
filterKeys: [Array, String],
|
|
filterMode: {
|
|
type: String,
|
|
default: "intersection"
|
|
},
|
|
noFilter: Boolean
|
|
}, "filter");
|
|
function filterItems(items, query, options) {
|
|
var _a2, _b;
|
|
var _a;
|
|
const array = [];
|
|
const filter = (_a2 = options == null ? void 0 : options.default) != null ? _a2 : defaultFilter;
|
|
const keys = (options == null ? void 0 : options.filterKeys) ? wrapInArray(options.filterKeys) : false;
|
|
const customFiltersLength = Object.keys((_b = options == null ? void 0 : options.customKeyFilter) != null ? _b : {}).length;
|
|
if (!(items == null ? void 0 : items.length)) return array;
|
|
loop: for (let i = 0; i < items.length; i++) {
|
|
const [item, transformed = item] = wrapInArray(items[i]);
|
|
const customMatches = {};
|
|
const defaultMatches = {};
|
|
let match = -1;
|
|
if ((query || customFiltersLength > 0) && !(options == null ? void 0 : options.noFilter)) {
|
|
if (typeof item === "object") {
|
|
const filterKeys = keys || Object.keys(transformed);
|
|
for (const key of filterKeys) {
|
|
const value = getPropertyFromItem(transformed, key);
|
|
const keyFilter = (_a = options == null ? void 0 : options.customKeyFilter) == null ? void 0 : _a[key];
|
|
match = keyFilter ? keyFilter(value, query, item) : filter(value, query, item);
|
|
if (match !== -1 && match !== false) {
|
|
if (keyFilter) customMatches[key] = match;
|
|
else defaultMatches[key] = match;
|
|
} else if ((options == null ? void 0 : options.filterMode) === "every") {
|
|
continue loop;
|
|
}
|
|
}
|
|
} else {
|
|
match = filter(item, query, item);
|
|
if (match !== -1 && match !== false) {
|
|
defaultMatches.title = match;
|
|
}
|
|
}
|
|
const defaultMatchesLength = Object.keys(defaultMatches).length;
|
|
const customMatchesLength = Object.keys(customMatches).length;
|
|
if (!defaultMatchesLength && !customMatchesLength) continue;
|
|
if ((options == null ? void 0 : options.filterMode) === "union" && customMatchesLength !== customFiltersLength && !defaultMatchesLength) continue;
|
|
if ((options == null ? void 0 : options.filterMode) === "intersection" && (customMatchesLength !== customFiltersLength || !defaultMatchesLength)) continue;
|
|
}
|
|
array.push({
|
|
index: i,
|
|
matches: {
|
|
...defaultMatches,
|
|
...customMatches
|
|
}
|
|
});
|
|
}
|
|
return array;
|
|
}
|
|
function useFilter(props, items, query, options) {
|
|
const filteredItems = ref([]);
|
|
const filteredMatches = ref(/* @__PURE__ */ new Map());
|
|
const transformedItems = computed(() => (options == null ? void 0 : options.transform) ? unref(items).map((item) => [item, options.transform(item)]) : unref(items));
|
|
watchEffect(() => {
|
|
const _query = typeof query === "function" ? query() : unref(query);
|
|
const strQuery = typeof _query !== "string" && typeof _query !== "number" ? "" : String(_query);
|
|
const results = filterItems(transformedItems.value, strQuery, {
|
|
customKeyFilter: {
|
|
...props.customKeyFilter,
|
|
...unref(options == null ? void 0 : options.customKeyFilter)
|
|
},
|
|
default: props.customFilter,
|
|
filterKeys: props.filterKeys,
|
|
filterMode: props.filterMode,
|
|
noFilter: props.noFilter
|
|
});
|
|
const originalItems = unref(items);
|
|
const _filteredItems = [];
|
|
const _filteredMatches = /* @__PURE__ */ new Map();
|
|
results.forEach((_ref) => {
|
|
let {
|
|
index,
|
|
matches
|
|
} = _ref;
|
|
const item = originalItems[index];
|
|
_filteredItems.push(item);
|
|
_filteredMatches.set(item.value, matches);
|
|
});
|
|
filteredItems.value = _filteredItems;
|
|
filteredMatches.value = _filteredMatches;
|
|
});
|
|
function getMatches(item) {
|
|
return filteredMatches.value.get(item.value);
|
|
}
|
|
return {
|
|
filteredItems,
|
|
filteredMatches,
|
|
getMatches
|
|
};
|
|
}
|
|
const makeDataTableProps = propsFactory({
|
|
...makeVDataTableRowsProps(),
|
|
hideDefaultBody: Boolean,
|
|
hideDefaultFooter: Boolean,
|
|
hideDefaultHeader: Boolean,
|
|
width: [String, Number],
|
|
search: String,
|
|
...makeDataTableExpandProps(),
|
|
...makeDataTableGroupProps(),
|
|
...makeDataTableHeaderProps(),
|
|
...makeDataTableItemsProps(),
|
|
...makeDataTableSelectProps(),
|
|
...makeDataTableSortProps(),
|
|
...makeVDataTableHeadersProps(),
|
|
...makeVTableProps()
|
|
}, "DataTable");
|
|
const makeVDataTableProps = propsFactory({
|
|
...makeDataTablePaginateProps(),
|
|
...makeDataTableProps(),
|
|
...makeFilterProps(),
|
|
...makeVDataTableFooterProps()
|
|
}, "VDataTable");
|
|
const VDataTable = genericComponent()({
|
|
name: "VDataTable",
|
|
props: makeVDataTableProps(),
|
|
emits: {
|
|
"update:modelValue": (value) => true,
|
|
"update:page": (value) => true,
|
|
"update:itemsPerPage": (value) => true,
|
|
"update:sortBy": (value) => true,
|
|
"update:options": (value) => true,
|
|
"update:groupBy": (value) => true,
|
|
"update:expanded": (value) => true,
|
|
"update:currentItems": (value) => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
groupBy
|
|
} = createGroupBy(props);
|
|
const {
|
|
sortBy,
|
|
multiSort,
|
|
mustSort
|
|
} = createSort(props);
|
|
const {
|
|
page,
|
|
itemsPerPage
|
|
} = createPagination(props);
|
|
const {
|
|
disableSort
|
|
} = toRefs(props);
|
|
const {
|
|
columns,
|
|
headers,
|
|
sortFunctions,
|
|
sortRawFunctions,
|
|
filterFunctions
|
|
} = createHeaders(props, {
|
|
groupBy,
|
|
showSelect: toRef(props, "showSelect"),
|
|
showExpand: toRef(props, "showExpand")
|
|
});
|
|
const {
|
|
items
|
|
} = useDataTableItems(props, columns);
|
|
const search = toRef(props, "search");
|
|
const {
|
|
filteredItems
|
|
} = useFilter(props, items, search, {
|
|
transform: (item) => item.columns,
|
|
customKeyFilter: filterFunctions
|
|
});
|
|
const {
|
|
toggleSort
|
|
} = provideSort({
|
|
sortBy,
|
|
multiSort,
|
|
mustSort,
|
|
page
|
|
});
|
|
const {
|
|
sortByWithGroups,
|
|
opened,
|
|
extractRows,
|
|
isGroupOpen,
|
|
toggleGroup
|
|
} = provideGroupBy({
|
|
groupBy,
|
|
sortBy,
|
|
disableSort
|
|
});
|
|
const {
|
|
sortedItems
|
|
} = useSortedItems(props, filteredItems, sortByWithGroups, {
|
|
transform: (item) => ({
|
|
...item.raw,
|
|
...item.columns
|
|
}),
|
|
sortFunctions,
|
|
sortRawFunctions
|
|
});
|
|
const {
|
|
flatItems
|
|
} = useGroupedItems(sortedItems, groupBy, opened);
|
|
const itemsLength = computed(() => flatItems.value.length);
|
|
const {
|
|
startIndex,
|
|
stopIndex,
|
|
pageCount,
|
|
setItemsPerPage
|
|
} = providePagination({
|
|
page,
|
|
itemsPerPage,
|
|
itemsLength
|
|
});
|
|
const {
|
|
paginatedItems
|
|
} = usePaginatedItems({
|
|
items: flatItems,
|
|
startIndex,
|
|
stopIndex,
|
|
itemsPerPage
|
|
});
|
|
const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value));
|
|
const {
|
|
isSelected,
|
|
select,
|
|
selectAll,
|
|
toggleSelect,
|
|
someSelected,
|
|
allSelected
|
|
} = provideSelection(props, {
|
|
allItems: items,
|
|
currentPage: paginatedItemsWithoutGroups
|
|
});
|
|
const {
|
|
isExpanded,
|
|
toggleExpand
|
|
} = provideExpanded(props);
|
|
useOptions({
|
|
page,
|
|
itemsPerPage,
|
|
sortBy,
|
|
groupBy,
|
|
search
|
|
});
|
|
provideDefaults({
|
|
VDataTableRows: {
|
|
hideNoData: toRef(props, "hideNoData"),
|
|
noDataText: toRef(props, "noDataText"),
|
|
loading: toRef(props, "loading"),
|
|
loadingText: toRef(props, "loadingText")
|
|
}
|
|
});
|
|
const slotProps = computed(() => ({
|
|
page: page.value,
|
|
itemsPerPage: itemsPerPage.value,
|
|
sortBy: sortBy.value,
|
|
pageCount: pageCount.value,
|
|
toggleSort,
|
|
setItemsPerPage,
|
|
someSelected: someSelected.value,
|
|
allSelected: allSelected.value,
|
|
isSelected,
|
|
select,
|
|
selectAll,
|
|
toggleSelect,
|
|
isExpanded,
|
|
toggleExpand,
|
|
isGroupOpen,
|
|
toggleGroup,
|
|
items: paginatedItemsWithoutGroups.value.map((item) => item.raw),
|
|
internalItems: paginatedItemsWithoutGroups.value,
|
|
groupedItems: paginatedItems.value,
|
|
columns: columns.value,
|
|
headers: headers.value
|
|
}));
|
|
useRender(() => {
|
|
const dataTableFooterProps = VDataTableFooter.filterProps(props);
|
|
const dataTableHeadersProps = VDataTableHeaders.filterProps(props);
|
|
const dataTableRowsProps = VDataTableRows.filterProps(props);
|
|
const tableProps = VTable.filterProps(props);
|
|
return createVNode(VTable, mergeProps({
|
|
"class": ["v-data-table", {
|
|
"v-data-table--show-select": props.showSelect,
|
|
"v-data-table--loading": props.loading
|
|
}, props.class],
|
|
"style": props.style
|
|
}, tableProps), {
|
|
top: () => {
|
|
var _a;
|
|
return (_a = slots.top) == null ? void 0 : _a.call(slots, slotProps.value);
|
|
},
|
|
default: () => {
|
|
var _a, _b, _c, _d, _e, _f;
|
|
return slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [(_a = slots.colgroup) == null ? void 0 : _a.call(slots, slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
|
|
"key": "thead"
|
|
}, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), (_b = slots.thead) == null ? void 0 : _b.call(slots, slotProps.value), !props.hideDefaultBody && createVNode("tbody", null, [(_c = slots["body.prepend"]) == null ? void 0 : _c.call(slots, slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
|
|
"items": paginatedItems.value
|
|
}), slots), (_d = slots["body.append"]) == null ? void 0 : _d.call(slots, slotProps.value)]), (_e = slots.tbody) == null ? void 0 : _e.call(slots, slotProps.value), (_f = slots.tfoot) == null ? void 0 : _f.call(slots, slotProps.value)]);
|
|
},
|
|
bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
|
|
prepend: slots["footer.prepend"]
|
|
})])
|
|
});
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "AccountSettingsSecurity",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const isCurrentPasswordVisible = ref(false);
|
|
const isNewPasswordVisible = ref(false);
|
|
const isConfirmPasswordVisible = ref(false);
|
|
const currentPassword = ref("12345678");
|
|
const newPassword = ref("87654321");
|
|
const confirmPassword = ref("87654321");
|
|
const passwordRequirements = [
|
|
"Minimum 8 characters long - the more, the better",
|
|
"At least one lowercase character",
|
|
"At least one number, symbol, or whitespace character"
|
|
];
|
|
const serverKeys = [
|
|
{
|
|
name: "Server Key 1",
|
|
key: "23eaf7f0-f4f7-495e-8b86-fad3261282ac",
|
|
createdOn: "28 Apr 2021, 18:20 GTM+4:10",
|
|
permission: "Full Access"
|
|
},
|
|
{
|
|
name: "Server Key 2",
|
|
key: "bb98e571-a2e2-4de8-90a9-2e231b5e99",
|
|
createdOn: "12 Feb 2021, 10:30 GTM+2:30",
|
|
permission: "Read Only"
|
|
},
|
|
{
|
|
name: "Server Key 3",
|
|
key: "2e915e59-3105-47f2-8838-6e46bf83b711",
|
|
createdOn: "28 Dec 2020, 12:21 GTM+4:10",
|
|
permission: "Full Access"
|
|
}
|
|
];
|
|
const recentDevicesHeaders = [
|
|
{ title: "BROWSER", key: "browser" },
|
|
{ title: "DEVICE", key: "device" },
|
|
{ title: "LOCATION", key: "location" },
|
|
{ title: "RECENT ACTIVITY", key: "recentActivity" }
|
|
];
|
|
const recentDevices = [
|
|
{
|
|
browser: "Chrome on Windows",
|
|
device: "HP Spectre 360",
|
|
location: "New York, NY",
|
|
recentActivity: "28 Apr 2022, 18:20",
|
|
deviceIcon: { icon: "bxl-windows", color: "primary" }
|
|
},
|
|
{
|
|
browser: "Chrome on iPhone",
|
|
device: "iPhone 12x",
|
|
location: "Los Angeles, CA",
|
|
recentActivity: "20 Apr 2022, 10:20",
|
|
deviceIcon: { icon: "bx-mobile", color: "error" }
|
|
},
|
|
{
|
|
browser: "Chrome on Android",
|
|
device: "Oneplus 9 Pro",
|
|
location: "San Francisco, CA",
|
|
recentActivity: "16 Apr 2022, 04:20",
|
|
deviceIcon: { icon: "bxl-android", color: "success" }
|
|
},
|
|
{
|
|
browser: "Chrome on macOS",
|
|
device: "Apple iMac",
|
|
location: "New York, NY",
|
|
recentActivity: "28 Apr 2022, 18:20",
|
|
deviceIcon: { icon: "bxl-apple", color: "secondary" }
|
|
},
|
|
{
|
|
browser: "Chrome on Windows",
|
|
device: "HP Spectre 360",
|
|
location: "Los Angeles, CA",
|
|
recentActivity: "20 Apr 2022, 10:20",
|
|
deviceIcon: { icon: "bxl-windows", color: "primary" }
|
|
},
|
|
{
|
|
browser: "Chrome on Android",
|
|
device: "Oneplus 9 Pro",
|
|
location: "San Francisco, CA",
|
|
recentActivity: "16 Apr 2022, 04:20",
|
|
deviceIcon: { icon: "bxl-android", color: "success" }
|
|
}
|
|
];
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(ssrRenderComponent(VRow, _attrs, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(VCard, { title: "Change Password" }, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(VForm, null, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(ssrRenderComponent(VCardText, null, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(ssrRenderComponent(VRow, null, {
|
|
default: withCtx((_6, _push7, _parent7, _scopeId6) => {
|
|
if (_push7) {
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(currentPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(currentPassword) ? currentPassword.value = $event : null,
|
|
type: unref(isCurrentPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isCurrentPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Current Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isCurrentPasswordVisible.value = !unref(isCurrentPasswordVisible)
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(currentPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(currentPassword) ? currentPassword.value = $event : null,
|
|
type: unref(isCurrentPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isCurrentPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Current Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isCurrentPasswordVisible.value = !unref(isCurrentPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
} else {
|
|
return [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(currentPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(currentPassword) ? currentPassword.value = $event : null,
|
|
type: unref(isCurrentPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isCurrentPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Current Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isCurrentPasswordVisible.value = !unref(isCurrentPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent6, _scopeId5));
|
|
_push6(ssrRenderComponent(VRow, null, {
|
|
default: withCtx((_6, _push7, _parent7, _scopeId6) => {
|
|
if (_push7) {
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(newPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(newPassword) ? newPassword.value = $event : null,
|
|
type: unref(isNewPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isNewPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "New Password",
|
|
autocomplete: "on",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isNewPasswordVisible.value = !unref(isNewPasswordVisible)
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(newPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(newPassword) ? newPassword.value = $event : null,
|
|
type: unref(isNewPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isNewPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "New Password",
|
|
autocomplete: "on",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isNewPasswordVisible.value = !unref(isNewPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
_push7(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(confirmPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(confirmPassword) ? confirmPassword.value = $event : null,
|
|
type: unref(isConfirmPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isConfirmPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Confirm New Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isConfirmPasswordVisible.value = !unref(isConfirmPasswordVisible)
|
|
}, null, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(confirmPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(confirmPassword) ? confirmPassword.value = $event : null,
|
|
type: unref(isConfirmPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isConfirmPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Confirm New Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isConfirmPasswordVisible.value = !unref(isConfirmPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
} else {
|
|
return [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(newPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(newPassword) ? newPassword.value = $event : null,
|
|
type: unref(isNewPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isNewPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "New Password",
|
|
autocomplete: "on",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isNewPasswordVisible.value = !unref(isNewPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(confirmPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(confirmPassword) ? confirmPassword.value = $event : null,
|
|
type: unref(isConfirmPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isConfirmPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Confirm New Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isConfirmPasswordVisible.value = !unref(isConfirmPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent6, _scopeId5));
|
|
} else {
|
|
return [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(currentPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(currentPassword) ? currentPassword.value = $event : null,
|
|
type: unref(isCurrentPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isCurrentPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Current Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isCurrentPasswordVisible.value = !unref(isCurrentPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(newPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(newPassword) ? newPassword.value = $event : null,
|
|
type: unref(isNewPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isNewPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "New Password",
|
|
autocomplete: "on",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isNewPasswordVisible.value = !unref(isNewPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(confirmPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(confirmPassword) ? confirmPassword.value = $event : null,
|
|
type: unref(isConfirmPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isConfirmPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Confirm New Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isConfirmPasswordVisible.value = !unref(isConfirmPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
_push5(ssrRenderComponent(VCardText, null, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(`<p class="text-base font-weight-medium mt-2"${_scopeId5}> Password Requirements: </p><ul class="d-flex flex-column gap-y-3"${_scopeId5}><!--[-->`);
|
|
ssrRenderList(passwordRequirements, (item) => {
|
|
_push6(`<li class="d-flex"${_scopeId5}><div${_scopeId5}>`);
|
|
_push6(ssrRenderComponent(VIcon, {
|
|
size: "7",
|
|
icon: "bxs-circle",
|
|
class: "me-3"
|
|
}, null, _parent6, _scopeId5));
|
|
_push6(`</div><span class="font-weight-medium"${_scopeId5}>${ssrInterpolate(item)}</span></li>`);
|
|
});
|
|
_push6(`<!--]--></ul>`);
|
|
} else {
|
|
return [
|
|
createVNode("p", { class: "text-base font-weight-medium mt-2" }, " Password Requirements: "),
|
|
createVNode("ul", { class: "d-flex flex-column gap-y-3" }, [
|
|
(openBlock(), createBlock(Fragment, null, renderList(passwordRequirements, (item) => {
|
|
return createVNode("li", {
|
|
key: item,
|
|
class: "d-flex"
|
|
}, [
|
|
createVNode("div", null, [
|
|
createVNode(VIcon, {
|
|
size: "7",
|
|
icon: "bxs-circle",
|
|
class: "me-3"
|
|
})
|
|
]),
|
|
createVNode("span", { class: "font-weight-medium" }, toDisplayString(item), 1)
|
|
]);
|
|
}), 64))
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
_push5(ssrRenderComponent(VCardText, { class: "d-flex flex-wrap gap-4" }, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(ssrRenderComponent(VBtn, null, {
|
|
default: withCtx((_6, _push7, _parent7, _scopeId6) => {
|
|
if (_push7) {
|
|
_push7(`Save changes`);
|
|
} else {
|
|
return [
|
|
createTextVNode("Save changes")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent6, _scopeId5));
|
|
_push6(ssrRenderComponent(VBtn, {
|
|
type: "reset",
|
|
color: "secondary",
|
|
variant: "tonal"
|
|
}, {
|
|
default: withCtx((_6, _push7, _parent7, _scopeId6) => {
|
|
if (_push7) {
|
|
_push7(` Reset `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Reset ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent6, _scopeId5));
|
|
} else {
|
|
return [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
type: "reset",
|
|
color: "secondary",
|
|
variant: "tonal"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
} else {
|
|
return [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(currentPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(currentPassword) ? currentPassword.value = $event : null,
|
|
type: unref(isCurrentPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isCurrentPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Current Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isCurrentPasswordVisible.value = !unref(isCurrentPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(newPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(newPassword) ? newPassword.value = $event : null,
|
|
type: unref(isNewPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isNewPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "New Password",
|
|
autocomplete: "on",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isNewPasswordVisible.value = !unref(isNewPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(confirmPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(confirmPassword) ? confirmPassword.value = $event : null,
|
|
type: unref(isConfirmPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isConfirmPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Confirm New Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isConfirmPasswordVisible.value = !unref(isConfirmPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("p", { class: "text-base font-weight-medium mt-2" }, " Password Requirements: "),
|
|
createVNode("ul", { class: "d-flex flex-column gap-y-3" }, [
|
|
(openBlock(), createBlock(Fragment, null, renderList(passwordRequirements, (item) => {
|
|
return createVNode("li", {
|
|
key: item,
|
|
class: "d-flex"
|
|
}, [
|
|
createVNode("div", null, [
|
|
createVNode(VIcon, {
|
|
size: "7",
|
|
icon: "bxs-circle",
|
|
class: "me-3"
|
|
})
|
|
]),
|
|
createVNode("span", { class: "font-weight-medium" }, toDisplayString(item), 1)
|
|
]);
|
|
}), 64))
|
|
])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, { class: "d-flex flex-wrap gap-4" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
type: "reset",
|
|
color: "secondary",
|
|
variant: "tonal"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(VForm, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(currentPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(currentPassword) ? currentPassword.value = $event : null,
|
|
type: unref(isCurrentPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isCurrentPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Current Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isCurrentPasswordVisible.value = !unref(isCurrentPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(newPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(newPassword) ? newPassword.value = $event : null,
|
|
type: unref(isNewPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isNewPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "New Password",
|
|
autocomplete: "on",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isNewPasswordVisible.value = !unref(isNewPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(confirmPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(confirmPassword) ? confirmPassword.value = $event : null,
|
|
type: unref(isConfirmPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isConfirmPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Confirm New Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isConfirmPasswordVisible.value = !unref(isConfirmPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("p", { class: "text-base font-weight-medium mt-2" }, " Password Requirements: "),
|
|
createVNode("ul", { class: "d-flex flex-column gap-y-3" }, [
|
|
(openBlock(), createBlock(Fragment, null, renderList(passwordRequirements, (item) => {
|
|
return createVNode("li", {
|
|
key: item,
|
|
class: "d-flex"
|
|
}, [
|
|
createVNode("div", null, [
|
|
createVNode(VIcon, {
|
|
size: "7",
|
|
icon: "bxs-circle",
|
|
class: "me-3"
|
|
})
|
|
]),
|
|
createVNode("span", { class: "font-weight-medium" }, toDisplayString(item), 1)
|
|
]);
|
|
}), 64))
|
|
])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, { class: "d-flex flex-wrap gap-4" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
type: "reset",
|
|
color: "secondary",
|
|
variant: "tonal"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(VCard, { title: "Change Password" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(currentPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(currentPassword) ? currentPassword.value = $event : null,
|
|
type: unref(isCurrentPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isCurrentPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Current Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isCurrentPasswordVisible.value = !unref(isCurrentPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(newPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(newPassword) ? newPassword.value = $event : null,
|
|
type: unref(isNewPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isNewPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "New Password",
|
|
autocomplete: "on",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isNewPasswordVisible.value = !unref(isNewPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(confirmPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(confirmPassword) ? confirmPassword.value = $event : null,
|
|
type: unref(isConfirmPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isConfirmPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Confirm New Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isConfirmPasswordVisible.value = !unref(isConfirmPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("p", { class: "text-base font-weight-medium mt-2" }, " Password Requirements: "),
|
|
createVNode("ul", { class: "d-flex flex-column gap-y-3" }, [
|
|
(openBlock(), createBlock(Fragment, null, renderList(passwordRequirements, (item) => {
|
|
return createVNode("li", {
|
|
key: item,
|
|
class: "d-flex"
|
|
}, [
|
|
createVNode("div", null, [
|
|
createVNode(VIcon, {
|
|
size: "7",
|
|
icon: "bxs-circle",
|
|
class: "me-3"
|
|
})
|
|
]),
|
|
createVNode("span", { class: "font-weight-medium" }, toDisplayString(item), 1)
|
|
]);
|
|
}), 64))
|
|
])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, { class: "d-flex flex-wrap gap-4" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
type: "reset",
|
|
color: "secondary",
|
|
variant: "tonal"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(VCard, { title: "Two-steps verification" }, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(VCardText, null, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(`<p class="font-weight-semibold"${_scopeId4}> Two factor authentication is not enabled yet. </p><p${_scopeId4}> Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in. <a href="javascript:void(0)" class="text-decoration-none"${_scopeId4}>Learn more.</a></p>`);
|
|
_push5(ssrRenderComponent(VBtn, null, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(` Enable 2FA `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Enable 2FA ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
} else {
|
|
return [
|
|
createVNode("p", { class: "font-weight-semibold" }, " Two factor authentication is not enabled yet. "),
|
|
createVNode("p", null, [
|
|
createTextVNode(" Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in. "),
|
|
createVNode("a", {
|
|
href: "javascript:void(0)",
|
|
class: "text-decoration-none"
|
|
}, "Learn more.")
|
|
]),
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Enable 2FA ")
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("p", { class: "font-weight-semibold" }, " Two factor authentication is not enabled yet. "),
|
|
createVNode("p", null, [
|
|
createTextVNode(" Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in. "),
|
|
createVNode("a", {
|
|
href: "javascript:void(0)",
|
|
class: "text-decoration-none"
|
|
}, "Learn more.")
|
|
]),
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Enable 2FA ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(VCard, { title: "Two-steps verification" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("p", { class: "font-weight-semibold" }, " Two factor authentication is not enabled yet. "),
|
|
createVNode("p", null, [
|
|
createTextVNode(" Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in. "),
|
|
createVNode("a", {
|
|
href: "javascript:void(0)",
|
|
class: "text-decoration-none"
|
|
}, "Learn more.")
|
|
]),
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Enable 2FA ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(VCard, { title: "Create an API key" }, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(VRow, null, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(ssrRenderComponent(VCol, {
|
|
cols: "12",
|
|
md: "5",
|
|
"order-md": "0",
|
|
order: "1"
|
|
}, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(ssrRenderComponent(VCardText, null, {
|
|
default: withCtx((_6, _push7, _parent7, _scopeId6) => {
|
|
if (_push7) {
|
|
_push7(ssrRenderComponent(VForm, { onSubmit: () => {
|
|
} }, {
|
|
default: withCtx((_7, _push8, _parent8, _scopeId7) => {
|
|
if (_push8) {
|
|
_push8(ssrRenderComponent(VRow, null, {
|
|
default: withCtx((_8, _push9, _parent9, _scopeId8) => {
|
|
if (_push9) {
|
|
_push9(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_9, _push10, _parent10, _scopeId9) => {
|
|
if (_push10) {
|
|
_push10(ssrRenderComponent(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, _parent10, _scopeId9));
|
|
} else {
|
|
return [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, 8, ["id"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent9, _scopeId8));
|
|
_push9(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_9, _push10, _parent10, _scopeId9) => {
|
|
if (_push10) {
|
|
_push10(ssrRenderComponent(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, _parent10, _scopeId9));
|
|
} else {
|
|
return [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, 8, ["id"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent9, _scopeId8));
|
|
_push9(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_9, _push10, _parent10, _scopeId9) => {
|
|
if (_push10) {
|
|
_push10(ssrRenderComponent(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx((_10, _push11, _parent11, _scopeId10) => {
|
|
if (_push11) {
|
|
_push11(` Create Key `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" Create Key ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent10, _scopeId9));
|
|
} else {
|
|
return [
|
|
createVNode(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Create Key ")
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent9, _scopeId8));
|
|
} else {
|
|
return [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Create Key ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent8, _scopeId7));
|
|
} else {
|
|
return [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Create Key ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent7, _scopeId6));
|
|
} else {
|
|
return [
|
|
createVNode(VForm, {
|
|
onSubmit: withModifiers(() => {
|
|
}, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Create Key ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent6, _scopeId5));
|
|
} else {
|
|
return [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, {
|
|
onSubmit: withModifiers(() => {
|
|
}, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Create Key ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent5, _scopeId4));
|
|
} else {
|
|
return [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "5",
|
|
"order-md": "0",
|
|
order: "1"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, {
|
|
onSubmit: withModifiers(() => {
|
|
}, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Create Key ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "5",
|
|
"order-md": "0",
|
|
order: "1"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, {
|
|
onSubmit: withModifiers(() => {
|
|
}, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Create Key ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(VCard, { title: "Create an API key" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "5",
|
|
"order-md": "0",
|
|
order: "1"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, {
|
|
onSubmit: withModifiers(() => {
|
|
}, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Create Key ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(VCard, { title: "API Key List & Access" }, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(VCardText, null, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(` An API key is a simple encrypted string that identifies an application without any principal. They are useful for accessing public data anonymously, and are used to associate API requests with your project for quota and billing. `);
|
|
} else {
|
|
return [
|
|
createTextVNode(" An API key is a simple encrypted string that identifies an application without any principal. They are useful for accessing public data anonymously, and are used to associate API requests with your project for quota and billing. ")
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
_push4(ssrRenderComponent(VCardText, { class: "d-flex flex-column gap-y-4" }, {
|
|
default: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(`<!--[-->`);
|
|
ssrRenderList(serverKeys, (serverKey) => {
|
|
_push5(`<div class="bg-var-theme-background pa-4"${_scopeId4}><div class="d-flex align-center flex-wrap mb-3"${_scopeId4}><h6 class="text-h6 mb-0 me-3"${_scopeId4}>${ssrInterpolate(serverKey.name)}</h6>`);
|
|
_push5(ssrRenderComponent(VChip, {
|
|
label: "",
|
|
color: "primary",
|
|
size: "small"
|
|
}, {
|
|
default: withCtx((_5, _push6, _parent6, _scopeId5) => {
|
|
if (_push6) {
|
|
_push6(`${ssrInterpolate(serverKey.permission)}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(serverKey.permission), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 2
|
|
}, _parent5, _scopeId4));
|
|
_push5(`</div><p class="text-base font-weight-medium"${_scopeId4}><span class="me-3"${_scopeId4}>${ssrInterpolate(serverKey.key)}</span>`);
|
|
_push5(ssrRenderComponent(VIcon, {
|
|
size: 18,
|
|
icon: "bx-copy",
|
|
class: "cursor-pointer"
|
|
}, null, _parent5, _scopeId4));
|
|
_push5(`</p><span${_scopeId4}>Created on ${ssrInterpolate(serverKey.createdOn)}</span></div>`);
|
|
});
|
|
_push5(`<!--]-->`);
|
|
} else {
|
|
return [
|
|
(openBlock(), createBlock(Fragment, null, renderList(serverKeys, (serverKey) => {
|
|
return createVNode("div", {
|
|
key: serverKey.key,
|
|
class: "bg-var-theme-background pa-4"
|
|
}, [
|
|
createVNode("div", { class: "d-flex align-center flex-wrap mb-3" }, [
|
|
createVNode("h6", { class: "text-h6 mb-0 me-3" }, toDisplayString(serverKey.name), 1),
|
|
createVNode(VChip, {
|
|
label: "",
|
|
color: "primary",
|
|
size: "small"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(serverKey.permission), 1)
|
|
]),
|
|
_: 2
|
|
}, 1024)
|
|
]),
|
|
createVNode("p", { class: "text-base font-weight-medium" }, [
|
|
createVNode("span", { class: "me-3" }, toDisplayString(serverKey.key), 1),
|
|
createVNode(VIcon, {
|
|
size: 18,
|
|
icon: "bx-copy",
|
|
class: "cursor-pointer"
|
|
})
|
|
]),
|
|
createVNode("span", null, "Created on " + toDisplayString(serverKey.createdOn), 1)
|
|
]);
|
|
}), 64))
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" An API key is a simple encrypted string that identifies an application without any principal. They are useful for accessing public data anonymously, and are used to associate API requests with your project for quota and billing. ")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, { class: "d-flex flex-column gap-y-4" }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(Fragment, null, renderList(serverKeys, (serverKey) => {
|
|
return createVNode("div", {
|
|
key: serverKey.key,
|
|
class: "bg-var-theme-background pa-4"
|
|
}, [
|
|
createVNode("div", { class: "d-flex align-center flex-wrap mb-3" }, [
|
|
createVNode("h6", { class: "text-h6 mb-0 me-3" }, toDisplayString(serverKey.name), 1),
|
|
createVNode(VChip, {
|
|
label: "",
|
|
color: "primary",
|
|
size: "small"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(serverKey.permission), 1)
|
|
]),
|
|
_: 2
|
|
}, 1024)
|
|
]),
|
|
createVNode("p", { class: "text-base font-weight-medium" }, [
|
|
createVNode("span", { class: "me-3" }, toDisplayString(serverKey.key), 1),
|
|
createVNode(VIcon, {
|
|
size: 18,
|
|
icon: "bx-copy",
|
|
class: "cursor-pointer"
|
|
})
|
|
]),
|
|
createVNode("span", null, "Created on " + toDisplayString(serverKey.createdOn), 1)
|
|
]);
|
|
}), 64))
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(VCard, { title: "API Key List & Access" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" An API key is a simple encrypted string that identifies an application without any principal. They are useful for accessing public data anonymously, and are used to associate API requests with your project for quota and billing. ")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, { class: "d-flex flex-column gap-y-4" }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(Fragment, null, renderList(serverKeys, (serverKey) => {
|
|
return createVNode("div", {
|
|
key: serverKey.key,
|
|
class: "bg-var-theme-background pa-4"
|
|
}, [
|
|
createVNode("div", { class: "d-flex align-center flex-wrap mb-3" }, [
|
|
createVNode("h6", { class: "text-h6 mb-0 me-3" }, toDisplayString(serverKey.name), 1),
|
|
createVNode(VChip, {
|
|
label: "",
|
|
color: "primary",
|
|
size: "small"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(serverKey.permission), 1)
|
|
]),
|
|
_: 2
|
|
}, 1024)
|
|
]),
|
|
createVNode("p", { class: "text-base font-weight-medium" }, [
|
|
createVNode("span", { class: "me-3" }, toDisplayString(serverKey.key), 1),
|
|
createVNode(VIcon, {
|
|
size: 18,
|
|
icon: "bx-copy",
|
|
class: "cursor-pointer"
|
|
})
|
|
]),
|
|
createVNode("span", null, "Created on " + toDisplayString(serverKey.createdOn), 1)
|
|
]);
|
|
}), 64))
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VCol, { cols: "12" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(VCard, { title: "Recent Devices" }, {
|
|
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
|
if (_push4) {
|
|
_push4(ssrRenderComponent(VDataTable, {
|
|
headers: recentDevicesHeaders,
|
|
items: recentDevices,
|
|
class: "text-no-wrap rounded-0 text-sm"
|
|
}, {
|
|
"item.browser": withCtx(({ item }, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) {
|
|
_push5(`<div class="d-flex"${_scopeId4}>`);
|
|
_push5(ssrRenderComponent(VIcon, {
|
|
start: "",
|
|
icon: item.deviceIcon.icon,
|
|
color: item.deviceIcon.color
|
|
}, null, _parent5, _scopeId4));
|
|
_push5(`<span class="text-high-emphasis text-base"${_scopeId4}>${ssrInterpolate(item.browser)}</span></div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "d-flex" }, [
|
|
createVNode(VIcon, {
|
|
start: "",
|
|
icon: item.deviceIcon.icon,
|
|
color: item.deviceIcon.color
|
|
}, null, 8, ["icon", "color"]),
|
|
createVNode("span", { class: "text-high-emphasis text-base" }, toDisplayString(item.browser), 1)
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
bottom: withCtx((_4, _push5, _parent5, _scopeId4) => {
|
|
if (_push5) ;
|
|
else {
|
|
return [];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent4, _scopeId3));
|
|
} else {
|
|
return [
|
|
createVNode(VDataTable, {
|
|
headers: recentDevicesHeaders,
|
|
items: recentDevices,
|
|
class: "text-no-wrap rounded-0 text-sm"
|
|
}, {
|
|
"item.browser": withCtx(({ item }) => [
|
|
createVNode("div", { class: "d-flex" }, [
|
|
createVNode(VIcon, {
|
|
start: "",
|
|
icon: item.deviceIcon.icon,
|
|
color: item.deviceIcon.color
|
|
}, null, 8, ["icon", "color"]),
|
|
createVNode("span", { class: "text-high-emphasis text-base" }, toDisplayString(item.browser), 1)
|
|
])
|
|
]),
|
|
bottom: withCtx(() => []),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(VCard, { title: "Recent Devices" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VDataTable, {
|
|
headers: recentDevicesHeaders,
|
|
items: recentDevices,
|
|
class: "text-no-wrap rounded-0 text-sm"
|
|
}, {
|
|
"item.browser": withCtx(({ item }) => [
|
|
createVNode("div", { class: "d-flex" }, [
|
|
createVNode(VIcon, {
|
|
start: "",
|
|
icon: item.deviceIcon.icon,
|
|
color: item.deviceIcon.color
|
|
}, null, 8, ["icon", "color"]),
|
|
createVNode("span", { class: "text-high-emphasis text-base" }, toDisplayString(item.browser), 1)
|
|
])
|
|
]),
|
|
bottom: withCtx(() => []),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCard, { title: "Change Password" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(currentPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(currentPassword) ? currentPassword.value = $event : null,
|
|
type: unref(isCurrentPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isCurrentPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Current Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isCurrentPasswordVisible.value = !unref(isCurrentPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(newPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(newPassword) ? newPassword.value = $event : null,
|
|
type: unref(isNewPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isNewPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "New Password",
|
|
autocomplete: "on",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isNewPasswordVisible.value = !unref(isNewPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "6"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
modelValue: unref(confirmPassword),
|
|
"onUpdate:modelValue": ($event) => isRef(confirmPassword) ? confirmPassword.value = $event : null,
|
|
type: unref(isConfirmPasswordVisible) ? "text" : "password",
|
|
"append-inner-icon": unref(isConfirmPasswordVisible) ? "bx-hide" : "bx-show",
|
|
label: "Confirm New Password",
|
|
placeholder: "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7",
|
|
"onClick:appendInner": ($event) => isConfirmPasswordVisible.value = !unref(isConfirmPasswordVisible)
|
|
}, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "append-inner-icon", "onClick:appendInner"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("p", { class: "text-base font-weight-medium mt-2" }, " Password Requirements: "),
|
|
createVNode("ul", { class: "d-flex flex-column gap-y-3" }, [
|
|
(openBlock(), createBlock(Fragment, null, renderList(passwordRequirements, (item) => {
|
|
return createVNode("li", {
|
|
key: item,
|
|
class: "d-flex"
|
|
}, [
|
|
createVNode("div", null, [
|
|
createVNode(VIcon, {
|
|
size: "7",
|
|
icon: "bxs-circle",
|
|
class: "me-3"
|
|
})
|
|
]),
|
|
createVNode("span", { class: "font-weight-medium" }, toDisplayString(item), 1)
|
|
]);
|
|
}), 64))
|
|
])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, { class: "d-flex flex-wrap gap-4" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode("Save changes")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VBtn, {
|
|
type: "reset",
|
|
color: "secondary",
|
|
variant: "tonal"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Reset ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCard, { title: "Two-steps verification" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode("p", { class: "font-weight-semibold" }, " Two factor authentication is not enabled yet. "),
|
|
createVNode("p", null, [
|
|
createTextVNode(" Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in. "),
|
|
createVNode("a", {
|
|
href: "javascript:void(0)",
|
|
class: "text-decoration-none"
|
|
}, "Learn more.")
|
|
]),
|
|
createVNode(VBtn, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Enable 2FA ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCard, { title: "Create an API key" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, {
|
|
cols: "12",
|
|
md: "5",
|
|
"order-md": "0",
|
|
order: "1"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VForm, {
|
|
onSubmit: withModifiers(() => {
|
|
}, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VRow, null, {
|
|
default: withCtx(() => [
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VSelect, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Choose the API key type you want to create",
|
|
placeholder: "Select API key type",
|
|
items: ["Full Control", "Modify", "Read & Execute", "List Folder Contents", "Read Only", "Read & Write"]
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VTextField, {
|
|
id: ("useId" in _ctx ? _ctx.useId : unref(useId))(),
|
|
label: "Name the API key",
|
|
placeholder: "Name the API key"
|
|
}, null, 8, ["id"])
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VBtn, {
|
|
type: "submit",
|
|
block: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" Create Key ")
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCard, { title: "API Key List & Access" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCardText, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(" An API key is a simple encrypted string that identifies an application without any principal. They are useful for accessing public data anonymously, and are used to associate API requests with your project for quota and billing. ")
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCardText, { class: "d-flex flex-column gap-y-4" }, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(Fragment, null, renderList(serverKeys, (serverKey) => {
|
|
return createVNode("div", {
|
|
key: serverKey.key,
|
|
class: "bg-var-theme-background pa-4"
|
|
}, [
|
|
createVNode("div", { class: "d-flex align-center flex-wrap mb-3" }, [
|
|
createVNode("h6", { class: "text-h6 mb-0 me-3" }, toDisplayString(serverKey.name), 1),
|
|
createVNode(VChip, {
|
|
label: "",
|
|
color: "primary",
|
|
size: "small"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(serverKey.permission), 1)
|
|
]),
|
|
_: 2
|
|
}, 1024)
|
|
]),
|
|
createVNode("p", { class: "text-base font-weight-medium" }, [
|
|
createVNode("span", { class: "me-3" }, toDisplayString(serverKey.key), 1),
|
|
createVNode(VIcon, {
|
|
size: 18,
|
|
icon: "bx-copy",
|
|
class: "cursor-pointer"
|
|
})
|
|
]),
|
|
createVNode("span", null, "Created on " + toDisplayString(serverKey.createdOn), 1)
|
|
]);
|
|
}), 64))
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VCol, { cols: "12" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VCard, { title: "Recent Devices" }, {
|
|
default: withCtx(() => [
|
|
createVNode(VDataTable, {
|
|
headers: recentDevicesHeaders,
|
|
items: recentDevices,
|
|
class: "text-no-wrap rounded-0 text-sm"
|
|
}, {
|
|
"item.browser": withCtx(({ item }) => [
|
|
createVNode("div", { class: "d-flex" }, [
|
|
createVNode(VIcon, {
|
|
start: "",
|
|
icon: item.deviceIcon.icon,
|
|
color: item.deviceIcon.color
|
|
}, null, 8, ["icon", "color"]),
|
|
createVNode("span", { class: "text-high-emphasis text-base" }, toDisplayString(item.browser), 1)
|
|
])
|
|
]),
|
|
bottom: withCtx(() => []),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$1 = _sfc_main$1.setup;
|
|
_sfc_main$1.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/pages/account-settings/AccountSettingsSecurity.vue");
|
|
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
|
|
};
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "account-settings",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const route = useRoute$1();
|
|
const activeTab = ref(route.params.tab);
|
|
const tabs = [
|
|
{ title: "Account", icon: "bx-user", tab: "account" },
|
|
{ title: "Security", icon: "bx-lock-open", tab: "security" },
|
|
{ title: "Notifications", icon: "bx-bell", tab: "notification" }
|
|
];
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(_attrs)}>`);
|
|
_push(ssrRenderComponent(VTabs, {
|
|
modelValue: unref(activeTab),
|
|
"onUpdate:modelValue": ($event) => isRef(activeTab) ? activeTab.value = $event : null,
|
|
"show-arrows": "",
|
|
class: "v-tabs-pill"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<!--[-->`);
|
|
ssrRenderList(tabs, (item) => {
|
|
_push2(ssrRenderComponent(VTab, {
|
|
key: item.icon,
|
|
value: item.tab
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(VIcon, {
|
|
size: "20",
|
|
start: "",
|
|
icon: item.icon
|
|
}, null, _parent3, _scopeId2));
|
|
_push3(` ${ssrInterpolate(item.title)}`);
|
|
} else {
|
|
return [
|
|
createVNode(VIcon, {
|
|
size: "20",
|
|
start: "",
|
|
icon: item.icon
|
|
}, null, 8, ["icon"]),
|
|
createTextVNode(" " + toDisplayString(item.title), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 2
|
|
}, _parent2, _scopeId));
|
|
});
|
|
_push2(`<!--]-->`);
|
|
} else {
|
|
return [
|
|
(openBlock(), createBlock(Fragment, null, renderList(tabs, (item) => {
|
|
return createVNode(VTab, {
|
|
key: item.icon,
|
|
value: item.tab
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(VIcon, {
|
|
size: "20",
|
|
start: "",
|
|
icon: item.icon
|
|
}, null, 8, ["icon"]),
|
|
createTextVNode(" " + toDisplayString(item.title), 1)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["value"]);
|
|
}), 64))
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(VWindow, {
|
|
modelValue: unref(activeTab),
|
|
"onUpdate:modelValue": ($event) => isRef(activeTab) ? activeTab.value = $event : null,
|
|
class: "mt-5 disable-tab-transition"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(VWindowItem, { value: "account" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_sfc_main$3, null, null, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(_sfc_main$3)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VWindowItem, { value: "security" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(_sfc_main$1, null, null, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(_sfc_main$1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(VWindowItem, { value: "notification" }, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(ssrRenderComponent(AccountSettingsNotification, null, null, _parent3, _scopeId2));
|
|
} else {
|
|
return [
|
|
createVNode(AccountSettingsNotification)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(VWindowItem, { value: "account" }, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$3)
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VWindowItem, { value: "security" }, {
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(VWindowItem, { value: "notification" }, {
|
|
default: withCtx(() => [
|
|
createVNode(AccountSettingsNotification)
|
|
]),
|
|
_: 1
|
|
})
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/account-settings.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|