@vuetify/nightly 3.0.0-next-20220107.0 → 3.0.0-next-20220126.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/json/attributes.json +96 -20
- package/dist/json/importMap.json +8 -0
- package/dist/json/tags.json +32 -3
- package/dist/json/web-types.json +338 -41
- package/dist/vuetify.css +77 -20
- package/dist/vuetify.d.ts +204 -48
- package/dist/vuetify.esm.js +707 -387
- package/dist/vuetify.esm.js.map +1 -1
- package/dist/vuetify.js +707 -387
- package/dist/vuetify.js.map +1 -1
- package/dist/vuetify.min.css +2 -2
- package/dist/vuetify.min.js +2 -2
- package/dist/vuetify.min.js.map +1 -1
- package/lib/components/VBtn/VBtn.css +0 -16
- package/lib/components/VBtn/VBtn.sass +0 -6
- package/lib/components/VBtn/_variables.scss +0 -2
- package/lib/components/VExpansionPanel/VExpansionPanel.mjs +2 -2
- package/lib/components/VExpansionPanel/VExpansionPanel.mjs.map +1 -1
- package/lib/components/VHover/VHover.mjs +3 -3
- package/lib/components/VHover/VHover.mjs.map +1 -1
- package/lib/components/VInput/VInput.mjs +3 -2
- package/lib/components/VInput/VInput.mjs.map +1 -1
- package/lib/components/VList/VList.css +4 -2
- package/lib/components/VList/VList.mjs +34 -35
- package/lib/components/VList/VList.mjs.map +1 -1
- package/lib/components/VList/VList.sass +5 -2
- package/lib/components/VList/VListChildren.mjs +19 -14
- package/lib/components/VList/VListChildren.mjs.map +1 -1
- package/lib/components/VList/VListGroup.mjs +16 -40
- package/lib/components/VList/VListGroup.mjs.map +1 -1
- package/lib/components/VList/VListItem.mjs +3 -3
- package/lib/components/VList/VListItem.mjs.map +1 -1
- package/lib/components/VList/VListSubheader.mjs +20 -12
- package/lib/components/VList/VListSubheader.mjs.map +1 -1
- package/lib/components/VList/list.mjs +31 -0
- package/lib/components/VList/list.mjs.map +1 -0
- package/lib/components/VMessages/VMessages.mjs +12 -4
- package/lib/components/VMessages/VMessages.mjs.map +1 -1
- package/lib/components/VOverlay/VOverlay.mjs +2 -2
- package/lib/components/VOverlay/VOverlay.mjs.map +1 -1
- package/lib/components/VOverlay/useActivator.mjs +12 -2
- package/lib/components/VOverlay/useActivator.mjs.map +1 -1
- package/lib/components/VPagination/VPagination.mjs +23 -31
- package/lib/components/VPagination/VPagination.mjs.map +1 -1
- package/lib/components/VWindow/VWindow.css +70 -0
- package/lib/components/VWindow/VWindow.mjs +158 -233
- package/lib/components/VWindow/VWindow.mjs.map +1 -1
- package/lib/components/VWindow/VWindow.sass +26 -50
- package/lib/components/VWindow/VWindowItem.mjs +72 -98
- package/lib/components/VWindow/VWindowItem.mjs.map +1 -1
- package/lib/components/VWindow/_variables.scss +2 -3
- package/lib/components/VWindow/index.mjs +2 -9
- package/lib/components/VWindow/index.mjs.map +1 -1
- package/lib/components/index.d.ts +200 -47
- package/lib/components/index.mjs +1 -1
- package/lib/components/index.mjs.map +1 -1
- package/lib/composables/group.mjs +1 -6
- package/lib/composables/group.mjs.map +1 -1
- package/lib/composables/nested/nested.mjs +1 -1
- package/lib/composables/nested/nested.mjs.map +1 -1
- package/lib/composables/nested/openStrategies.mjs +1 -1
- package/lib/composables/nested/openStrategies.mjs.map +1 -1
- package/lib/directives/touch/index.mjs +6 -3
- package/lib/directives/touch/index.mjs.map +1 -1
- package/lib/entry-bundler.mjs +1 -1
- package/lib/index.d.ts +2 -0
- package/package.json +2 -1
|
@@ -1,39 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/* eslint-disable */
|
|
1
|
+
import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
|
|
4
2
|
// Styles
|
|
5
|
-
import "./VWindow.css"; //
|
|
3
|
+
import "./VWindow.css"; // Components
|
|
4
|
+
|
|
5
|
+
import { VBtn } from "../VBtn/index.mjs"; // Composables
|
|
6
|
+
|
|
7
|
+
import { makeTagProps } from "../../composables/tag.mjs";
|
|
8
|
+
import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
|
|
9
|
+
import { provideDefaults } from "../../composables/defaults.mjs";
|
|
10
|
+
import { useGroup } from "../../composables/group.mjs";
|
|
11
|
+
import { useLocale } from "../../composables/locale.mjs";
|
|
12
|
+
import { useRtl } from "../../composables/rtl.mjs"; // Directives
|
|
6
13
|
|
|
7
|
-
//
|
|
8
|
-
import Touch from "../../directives/touch/index.mjs"; // Components
|
|
14
|
+
import { Touch } from "../../directives/touch/index.mjs"; // Utilities
|
|
9
15
|
|
|
10
|
-
import
|
|
11
|
-
import VIcon from "../VIcon/index.mjs";
|
|
12
|
-
import { BaseItemGroup } from "../VItemGroup/VItemGroup.mjs";
|
|
13
|
-
/* @vue/component */
|
|
16
|
+
import { computed, defineComponent, provide, ref, watch } from 'vue'; // Types
|
|
14
17
|
|
|
15
|
-
export
|
|
16
|
-
|
|
18
|
+
export const VWindowSymbol = Symbol.for('vuetify:v-window');
|
|
19
|
+
export const VWindowGroupSymbol = Symbol.for('vuetify:v-window-group');
|
|
20
|
+
export const VWindow = defineComponent({
|
|
21
|
+
name: 'VWindow',
|
|
17
22
|
directives: {
|
|
18
23
|
Touch
|
|
19
24
|
},
|
|
20
|
-
|
|
21
|
-
provide() {
|
|
22
|
-
return {
|
|
23
|
-
windowGroup: this
|
|
24
|
-
};
|
|
25
|
-
},
|
|
26
|
-
|
|
27
25
|
props: {
|
|
28
|
-
activeClass: {
|
|
29
|
-
type: String,
|
|
30
|
-
default: 'v-window-item--active'
|
|
31
|
-
},
|
|
32
26
|
continuous: Boolean,
|
|
33
|
-
mandatory: {
|
|
34
|
-
type: Boolean,
|
|
35
|
-
default: true
|
|
36
|
-
},
|
|
37
27
|
nextIcon: {
|
|
38
28
|
type: [Boolean, String],
|
|
39
29
|
default: '$next'
|
|
@@ -43,234 +33,169 @@ export default BaseItemGroup.extend({
|
|
|
43
33
|
default: '$prev'
|
|
44
34
|
},
|
|
45
35
|
reverse: Boolean,
|
|
46
|
-
showArrows:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
touchless: Boolean,
|
|
50
|
-
value: {
|
|
51
|
-
required: false
|
|
52
|
-
},
|
|
53
|
-
vertical: Boolean
|
|
54
|
-
},
|
|
55
|
-
|
|
56
|
-
data() {
|
|
57
|
-
return {
|
|
58
|
-
changedByDelimiters: false,
|
|
59
|
-
internalHeight: undefined,
|
|
60
|
-
// This can be fixed by child class.
|
|
61
|
-
transitionHeight: undefined,
|
|
62
|
-
// Intermediate height during transition.
|
|
63
|
-
transitionCount: 0,
|
|
64
|
-
// Number of windows in transition state.
|
|
65
|
-
isBooted: false,
|
|
66
|
-
isReverse: false
|
|
67
|
-
};
|
|
68
|
-
},
|
|
69
|
-
|
|
70
|
-
computed: {
|
|
71
|
-
isActive() {
|
|
72
|
-
return this.transitionCount > 0;
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
classes() {
|
|
76
|
-
return { ...BaseItemGroup.options.computed.classes.call(this),
|
|
77
|
-
'v-window--show-arrows-on-hover': this.showArrowsOnHover
|
|
78
|
-
};
|
|
79
|
-
},
|
|
80
|
-
|
|
81
|
-
computedTransition() {
|
|
82
|
-
if (!this.isBooted) return '';
|
|
83
|
-
const axis = this.vertical ? 'y' : 'x';
|
|
84
|
-
const reverse = this.internalReverse ? !this.isReverse : this.isReverse;
|
|
85
|
-
const direction = reverse ? '-reverse' : '';
|
|
86
|
-
return `v-window-${axis}${direction}-transition`;
|
|
36
|
+
showArrows: {
|
|
37
|
+
type: [Boolean, String],
|
|
38
|
+
validator: v => typeof v === 'boolean' || v === 'hover'
|
|
87
39
|
},
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
40
|
+
touch: {
|
|
41
|
+
type: [Object, Boolean],
|
|
42
|
+
default: undefined
|
|
91
43
|
},
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
44
|
+
direction: {
|
|
45
|
+
type: String,
|
|
46
|
+
default: 'horizontal'
|
|
95
47
|
},
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
48
|
+
modelValue: null,
|
|
49
|
+
disabled: Boolean,
|
|
50
|
+
selectedClass: {
|
|
51
|
+
type: String,
|
|
52
|
+
default: 'v-window-item--active'
|
|
99
53
|
},
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
return this.internalValue === this.getValue(item, i);
|
|
104
|
-
});
|
|
54
|
+
// TODO: mandatory should probably not be exposed but do this for now
|
|
55
|
+
mandatory: {
|
|
56
|
+
default: 'force'
|
|
105
57
|
},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
return this.$vuetify.rtl ? !this.reverse : this.reverse;
|
|
109
|
-
}
|
|
110
|
-
|
|
58
|
+
...makeTagProps(),
|
|
59
|
+
...makeThemeProps()
|
|
111
60
|
},
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
this.isReverse = this.updateReverse(val, oldVal);
|
|
115
|
-
}
|
|
116
|
-
|
|
61
|
+
emits: {
|
|
62
|
+
'update:modelValue': v => true
|
|
117
63
|
},
|
|
118
64
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
const on = {
|
|
150
|
-
click: e => {
|
|
151
|
-
e.stopPropagation();
|
|
152
|
-
this.changedByDelimiters = true;
|
|
153
|
-
click();
|
|
154
|
-
}
|
|
155
|
-
};
|
|
156
|
-
const attrs = {
|
|
157
|
-
'aria-label': this.$vuetify.lang.t(`$vuetify.carousel.${direction}`)
|
|
158
|
-
};
|
|
159
|
-
const children = (_this$$scopedSlots$di = (_this$$scopedSlots$di2 = (_this$$scopedSlots = this.$scopedSlots)[direction]) == null ? void 0 : _this$$scopedSlots$di2.call(_this$$scopedSlots, {
|
|
160
|
-
on,
|
|
161
|
-
attrs
|
|
162
|
-
})) != null ? _this$$scopedSlots$di : [this.$createElement(VBtn, {
|
|
163
|
-
props: {
|
|
164
|
-
icon: true
|
|
165
|
-
},
|
|
166
|
-
attrs,
|
|
167
|
-
on
|
|
168
|
-
}, [this.$createElement(VIcon, {
|
|
169
|
-
props: {
|
|
170
|
-
large: true
|
|
171
|
-
}
|
|
172
|
-
}, icon)])];
|
|
173
|
-
return this.$createElement('div', {
|
|
174
|
-
staticClass: `v-window__${direction}`
|
|
175
|
-
}, children);
|
|
176
|
-
},
|
|
177
|
-
|
|
178
|
-
genControlIcons() {
|
|
179
|
-
const icons = [];
|
|
180
|
-
const prevIcon = this.$vuetify.rtl ? this.nextIcon : this.prevIcon;
|
|
181
|
-
/* istanbul ignore else */
|
|
182
|
-
|
|
183
|
-
if (this.hasPrev && prevIcon && typeof prevIcon === 'string') {
|
|
184
|
-
const icon = this.genIcon('prev', prevIcon, this.prev);
|
|
185
|
-
icon && icons.push(icon);
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
const nextIcon = this.$vuetify.rtl ? this.prevIcon : this.nextIcon;
|
|
189
|
-
/* istanbul ignore else */
|
|
190
|
-
|
|
191
|
-
if (this.hasNext && nextIcon && typeof nextIcon === 'string') {
|
|
192
|
-
const icon = this.genIcon('next', nextIcon, this.next);
|
|
193
|
-
icon && icons.push(icon);
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
return icons;
|
|
197
|
-
},
|
|
198
|
-
|
|
199
|
-
getNextIndex(index) {
|
|
200
|
-
const nextIndex = (index + 1) % this.items.length;
|
|
201
|
-
const item = this.items[nextIndex];
|
|
202
|
-
if (item.disabled) return this.getNextIndex(nextIndex);
|
|
203
|
-
return nextIndex;
|
|
204
|
-
},
|
|
205
|
-
|
|
206
|
-
getPrevIndex(index) {
|
|
207
|
-
const prevIndex = (index + this.items.length - 1) % this.items.length;
|
|
208
|
-
const item = this.items[prevIndex];
|
|
209
|
-
if (item.disabled) return this.getPrevIndex(prevIndex);
|
|
210
|
-
return prevIndex;
|
|
211
|
-
},
|
|
212
|
-
|
|
213
|
-
next() {
|
|
214
|
-
/* istanbul ignore if */
|
|
215
|
-
if (!this.hasActiveItems || !this.hasNext) return;
|
|
216
|
-
const nextIndex = this.getNextIndex(this.internalIndex);
|
|
217
|
-
const item = this.items[nextIndex];
|
|
218
|
-
this.internalValue = this.getValue(item, nextIndex);
|
|
219
|
-
},
|
|
220
|
-
|
|
221
|
-
prev() {
|
|
222
|
-
/* istanbul ignore if */
|
|
223
|
-
if (!this.hasActiveItems || !this.hasPrev) return;
|
|
224
|
-
const lastIndex = this.getPrevIndex(this.internalIndex);
|
|
225
|
-
const item = this.items[lastIndex];
|
|
226
|
-
this.internalValue = this.getValue(item, lastIndex);
|
|
227
|
-
},
|
|
228
|
-
|
|
229
|
-
updateReverse(val, oldVal) {
|
|
230
|
-
const itemsLength = this.items.length;
|
|
65
|
+
setup(props, _ref) {
|
|
66
|
+
let {
|
|
67
|
+
slots
|
|
68
|
+
} = _ref;
|
|
69
|
+
const {
|
|
70
|
+
themeClasses
|
|
71
|
+
} = provideTheme(props);
|
|
72
|
+
const {
|
|
73
|
+
isRtl
|
|
74
|
+
} = useRtl();
|
|
75
|
+
const {
|
|
76
|
+
t
|
|
77
|
+
} = useLocale();
|
|
78
|
+
const group = useGroup(props, VWindowGroupSymbol);
|
|
79
|
+
const rootRef = ref();
|
|
80
|
+
const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse);
|
|
81
|
+
const isReversed = ref(false);
|
|
82
|
+
const transition = computed(() => {
|
|
83
|
+
const axis = props.direction === 'vertical' ? 'y' : 'x';
|
|
84
|
+
const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value;
|
|
85
|
+
const direction = reverse ? '-reverse' : '';
|
|
86
|
+
return `v-window-${axis}${direction}-transition`;
|
|
87
|
+
});
|
|
88
|
+
const transitionCount = ref(0);
|
|
89
|
+
const transitionHeight = ref(undefined);
|
|
90
|
+
const activeIndex = computed(() => {
|
|
91
|
+
return group.items.value.findIndex(item => group.selected.value.includes(item.id));
|
|
92
|
+
});
|
|
93
|
+
watch(activeIndex, (newVal, oldVal) => {
|
|
94
|
+
const itemsLength = group.items.value.length;
|
|
231
95
|
const lastIndex = itemsLength - 1;
|
|
232
|
-
if (itemsLength <= 2) return val < oldVal;
|
|
233
96
|
|
|
234
|
-
if (
|
|
235
|
-
|
|
236
|
-
} else if (
|
|
237
|
-
|
|
97
|
+
if (itemsLength <= 2) {
|
|
98
|
+
isReversed.value = newVal < oldVal;
|
|
99
|
+
} else if (newVal === lastIndex && oldVal === 0) {
|
|
100
|
+
isReversed.value = true;
|
|
101
|
+
} else if (newVal === 0 && oldVal === lastIndex) {
|
|
102
|
+
isReversed.value = false;
|
|
238
103
|
} else {
|
|
239
|
-
|
|
104
|
+
isReversed.value = newVal < oldVal;
|
|
240
105
|
}
|
|
106
|
+
});
|
|
107
|
+
provide(VWindowSymbol, {
|
|
108
|
+
transition,
|
|
109
|
+
isReversed,
|
|
110
|
+
transitionCount,
|
|
111
|
+
transitionHeight,
|
|
112
|
+
rootRef
|
|
113
|
+
});
|
|
114
|
+
const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0);
|
|
115
|
+
const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
|
|
116
|
+
|
|
117
|
+
function prev() {
|
|
118
|
+
canMoveBack.value && group.prev();
|
|
241
119
|
}
|
|
242
120
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
const data = {
|
|
247
|
-
staticClass: 'v-window',
|
|
248
|
-
class: this.classes,
|
|
249
|
-
directives: []
|
|
250
|
-
};
|
|
121
|
+
function next() {
|
|
122
|
+
canMoveForward.value && group.next();
|
|
123
|
+
}
|
|
251
124
|
|
|
252
|
-
|
|
253
|
-
|
|
125
|
+
provideDefaults({
|
|
126
|
+
VBtn: {
|
|
127
|
+
variant: 'text'
|
|
128
|
+
}
|
|
129
|
+
}, {
|
|
130
|
+
scoped: true
|
|
131
|
+
});
|
|
132
|
+
const arrows = computed(() => {
|
|
133
|
+
const arrows = [];
|
|
134
|
+
const prevProps = {
|
|
135
|
+
icon: isRtl.value ? props.nextIcon : props.prevIcon,
|
|
136
|
+
class: `v-window__${isRtlReverse.value ? 'right' : 'left'}`,
|
|
137
|
+
onClick: group.prev,
|
|
138
|
+
ariaLabel: t('$vuetify.carousel.prev')
|
|
139
|
+
};
|
|
140
|
+
arrows.push(canMoveBack.value ? slots.prev ? slots.prev({
|
|
141
|
+
props: prevProps
|
|
142
|
+
}) : _createVNode(VBtn, prevProps, null, 16) : _createVNode("div", null, null));
|
|
143
|
+
const nextProps = {
|
|
144
|
+
icon: isRtl.value ? props.prevIcon : props.nextIcon,
|
|
145
|
+
class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,
|
|
146
|
+
onClick: group.next,
|
|
147
|
+
ariaLabel: t('$vuetify.carousel.next')
|
|
148
|
+
};
|
|
149
|
+
arrows.push(canMoveForward.value ? slots.next ? slots.next({
|
|
150
|
+
props: nextProps
|
|
151
|
+
}) : _createVNode(VBtn, nextProps, null, 16) : _createVNode("div", null, null));
|
|
152
|
+
return arrows;
|
|
153
|
+
});
|
|
154
|
+
const touchOptions = computed(() => {
|
|
155
|
+
if (props.touch === false) return props.touch;
|
|
156
|
+
const options = {
|
|
254
157
|
left: () => {
|
|
255
|
-
|
|
158
|
+
isRtlReverse.value ? prev() : next();
|
|
256
159
|
},
|
|
257
160
|
right: () => {
|
|
258
|
-
|
|
161
|
+
isRtlReverse.value ? next() : prev();
|
|
259
162
|
},
|
|
260
|
-
end:
|
|
261
|
-
|
|
163
|
+
end: _ref2 => {
|
|
164
|
+
let {
|
|
165
|
+
originalEvent
|
|
166
|
+
} = _ref2;
|
|
167
|
+
originalEvent.stopPropagation();
|
|
262
168
|
},
|
|
263
|
-
start:
|
|
264
|
-
|
|
169
|
+
start: _ref3 => {
|
|
170
|
+
let {
|
|
171
|
+
originalEvent
|
|
172
|
+
} = _ref3;
|
|
173
|
+
originalEvent.stopPropagation();
|
|
265
174
|
}
|
|
266
175
|
};
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
176
|
+
return { ...options,
|
|
177
|
+
...(props.touch === true ? {} : props.touch)
|
|
178
|
+
};
|
|
179
|
+
});
|
|
180
|
+
return () => {
|
|
181
|
+
var _slots$default;
|
|
182
|
+
|
|
183
|
+
return _withDirectives(_createVNode(props.tag, {
|
|
184
|
+
"ref": rootRef,
|
|
185
|
+
"class": ['v-window', {
|
|
186
|
+
'v-window--show-arrows-on-hover': props.showArrows === 'hover'
|
|
187
|
+
}, themeClasses.value]
|
|
188
|
+
}, {
|
|
189
|
+
default: () => [_createVNode("div", {
|
|
190
|
+
"class": "v-window__container",
|
|
191
|
+
"style": {
|
|
192
|
+
height: transitionHeight.value
|
|
193
|
+
}
|
|
194
|
+
}, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), props.showArrows !== false && _createVNode("div", {
|
|
195
|
+
"class": "v-window__controls"
|
|
196
|
+
}, [arrows.value])], 4)]
|
|
197
|
+
}, 8, ["class"]), [[_resolveDirective("touch"), touchOptions.value]]);
|
|
198
|
+
};
|
|
274
199
|
}
|
|
275
200
|
|
|
276
201
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/VWindow/VWindow.ts"],"names":["Touch","VBtn","VIcon","BaseItemGroup","extend","name","directives","provide","windowGroup","props","activeClass","type","String","default","continuous","Boolean","mandatory","nextIcon","prevIcon","reverse","showArrows","showArrowsOnHover","touch","Object","touchless","value","required","vertical","data","changedByDelimiters","internalHeight","undefined","transitionHeight","transitionCount","isBooted","isReverse","computed","isActive","classes","options","call","computedTransition","axis","internalReverse","direction","hasActiveItems","items","find","item","disabled","hasNext","internalIndex","length","hasPrev","findIndex","i","internalValue","getValue","$vuetify","rtl","watch","val","oldVal","updateReverse","mounted","window","requestAnimationFrame","methods","genDefaultSlot","$slots","genContainer","children","push","genControlIcons","$createElement","staticClass","class","style","height","genIcon","icon","click","on","e","stopPropagation","attrs","lang","t","$scopedSlots","large","icons","prev","next","getNextIndex","index","nextIndex","getPrevIndex","prevIndex","lastIndex","itemsLength","render","h","left","right","end","start"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VWindow.sass'\n\n// Types\nimport { VNode, VNodeDirective } from 'vue/types/vnode'\nimport { PropType } from 'vue'\nimport { TouchHandlers } from 'vuetify/types'\n\n// Directives\nimport Touch from '../../directives/touch'\n\n// Components\nimport VBtn from '../VBtn'\nimport VIcon from '../VIcon'\nimport { BaseItemGroup } from '../VItemGroup/VItemGroup'\n\n/* @vue/component */\nexport default BaseItemGroup.extend({\n name: 'v-window',\n\n directives: { Touch },\n\n provide (): object {\n return {\n windowGroup: this,\n }\n },\n\n props: {\n activeClass: {\n type: String,\n default: 'v-window-item--active',\n },\n continuous: Boolean,\n mandatory: {\n type: Boolean,\n default: true,\n },\n nextIcon: {\n type: [Boolean, String],\n default: '$next',\n },\n prevIcon: {\n type: [Boolean, String],\n default: '$prev',\n },\n reverse: Boolean,\n showArrows: Boolean,\n showArrowsOnHover: Boolean,\n touch: Object as PropType<TouchHandlers>,\n touchless: Boolean,\n value: {\n required: false,\n },\n vertical: Boolean,\n },\n\n data () {\n return {\n changedByDelimiters: false,\n internalHeight: undefined as undefined | string, // This can be fixed by child class.\n transitionHeight: undefined as undefined | string, // Intermediate height during transition.\n transitionCount: 0, // Number of windows in transition state.\n isBooted: false,\n isReverse: false,\n }\n },\n\n computed: {\n isActive (): boolean {\n return this.transitionCount > 0\n },\n classes (): object {\n return {\n ...BaseItemGroup.options.computed.classes.call(this),\n 'v-window--show-arrows-on-hover': this.showArrowsOnHover,\n }\n },\n computedTransition (): string {\n if (!this.isBooted) return ''\n\n const axis = this.vertical ? 'y' : 'x'\n const reverse = this.internalReverse ? !this.isReverse : this.isReverse\n const direction = reverse ? '-reverse' : ''\n\n return `v-window-${axis}${direction}-transition`\n },\n hasActiveItems (): boolean {\n return Boolean(\n this.items.find(item => !item.disabled)\n )\n },\n hasNext (): boolean {\n return this.continuous || this.internalIndex < this.items.length - 1\n },\n hasPrev (): boolean {\n return this.continuous || this.internalIndex > 0\n },\n internalIndex (): number {\n return this.items.findIndex((item, i) => {\n return this.internalValue === this.getValue(item, i)\n })\n },\n internalReverse (): boolean {\n return this.$vuetify.rtl ? !this.reverse : this.reverse\n },\n },\n\n watch: {\n internalIndex (val, oldVal) {\n this.isReverse = this.updateReverse(val, oldVal)\n },\n },\n\n mounted () {\n window.requestAnimationFrame(() => (this.isBooted = true))\n },\n\n methods: {\n genDefaultSlot () {\n return this.$slots.default\n },\n genContainer (): VNode {\n const children = [this.genDefaultSlot()]\n\n if (this.showArrows) {\n children.push(this.genControlIcons())\n }\n\n return this.$createElement('div', {\n staticClass: 'v-window__container',\n class: {\n 'v-window__container--is-active': this.isActive,\n },\n style: {\n height: this.internalHeight || this.transitionHeight,\n },\n }, children)\n },\n genIcon (\n direction: 'prev' | 'next',\n icon: string,\n click: () => void\n ) {\n const on = {\n click: (e: Event) => {\n e.stopPropagation()\n this.changedByDelimiters = true\n click()\n },\n }\n const attrs = {\n 'aria-label': this.$vuetify.lang.t(`$vuetify.carousel.${direction}`),\n }\n const children = this.$scopedSlots[direction]?.({\n on,\n attrs,\n }) ?? [this.$createElement(VBtn, {\n props: { icon: true },\n attrs,\n on,\n }, [\n this.$createElement(VIcon, {\n props: { large: true },\n }, icon),\n ])]\n\n return this.$createElement('div', {\n staticClass: `v-window__${direction}`,\n }, children)\n },\n genControlIcons () {\n const icons = []\n\n const prevIcon = this.$vuetify.rtl\n ? this.nextIcon\n : this.prevIcon\n\n /* istanbul ignore else */\n if (\n this.hasPrev &&\n prevIcon &&\n typeof prevIcon === 'string'\n ) {\n const icon = this.genIcon('prev', prevIcon, this.prev)\n icon && icons.push(icon)\n }\n\n const nextIcon = this.$vuetify.rtl\n ? this.prevIcon\n : this.nextIcon\n\n /* istanbul ignore else */\n if (\n this.hasNext &&\n nextIcon &&\n typeof nextIcon === 'string'\n ) {\n const icon = this.genIcon('next', nextIcon, this.next)\n icon && icons.push(icon)\n }\n\n return icons\n },\n getNextIndex (index: number): number {\n const nextIndex = (index + 1) % this.items.length\n const item = this.items[nextIndex]\n\n if (item.disabled) return this.getNextIndex(nextIndex)\n\n return nextIndex\n },\n getPrevIndex (index: number): number {\n const prevIndex = (index + this.items.length - 1) % this.items.length\n const item = this.items[prevIndex]\n\n if (item.disabled) return this.getPrevIndex(prevIndex)\n\n return prevIndex\n },\n next () {\n /* istanbul ignore if */\n if (!this.hasActiveItems || !this.hasNext) return\n\n const nextIndex = this.getNextIndex(this.internalIndex)\n const item = this.items[nextIndex]\n\n this.internalValue = this.getValue(item, nextIndex)\n },\n prev () {\n /* istanbul ignore if */\n if (!this.hasActiveItems || !this.hasPrev) return\n\n const lastIndex = this.getPrevIndex(this.internalIndex)\n const item = this.items[lastIndex]\n\n this.internalValue = this.getValue(item, lastIndex)\n },\n updateReverse (val: number, oldVal: number) {\n const itemsLength = this.items.length\n const lastIndex = itemsLength - 1\n\n if (itemsLength <= 2) return val < oldVal\n\n if (val === lastIndex && oldVal === 0) {\n return true\n } else if (val === 0 && oldVal === lastIndex) {\n return false\n } else {\n return val < oldVal\n }\n },\n },\n\n render (h): VNode {\n const data = {\n staticClass: 'v-window',\n class: this.classes,\n directives: [] as VNodeDirective[],\n }\n\n if (!this.touchless) {\n const value = this.touch || {\n left: () => {\n this.$vuetify.rtl ? this.prev() : this.next()\n },\n right: () => {\n this.$vuetify.rtl ? this.next() : this.prev()\n },\n end: (e: TouchEvent) => {\n e.stopPropagation()\n },\n start: (e: TouchEvent) => {\n e.stopPropagation()\n },\n }\n\n data.directives.push({\n name: 'touch',\n value,\n })\n }\n\n return h('div', data, [this.genContainer()])\n },\n})\n"],"file":"VWindow.mjs"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/VWindow/VWindow.tsx"],"names":["VBtn","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useGroup","useLocale","useRtl","Touch","computed","defineComponent","provide","ref","watch","VWindowSymbol","Symbol","for","VWindowGroupSymbol","VWindow","name","directives","props","continuous","Boolean","nextIcon","type","String","default","prevIcon","reverse","showArrows","validator","v","touch","Object","undefined","direction","modelValue","disabled","selectedClass","mandatory","emits","setup","slots","themeClasses","isRtl","t","group","rootRef","isRtlReverse","value","isReversed","transition","axis","transitionCount","transitionHeight","activeIndex","items","findIndex","item","selected","includes","id","newVal","oldVal","itemsLength","length","lastIndex","canMoveBack","canMoveForward","prev","next","variant","scoped","arrows","prevProps","icon","class","onClick","ariaLabel","push","nextProps","touchOptions","options","left","right","end","originalEvent","stopPropagation","start","height"],"mappings":"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","sourcesContent":["// Styles\nimport './VWindow.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useGroup } from '@/composables/group'\nimport { useLocale } from '@/composables/locale'\nimport { useRtl } from '@/composables/rtl'\n\n// Directives\nimport { Touch } from '@/directives/touch'\n\n// Utilities\nimport { computed, defineComponent, provide, ref, watch } from 'vue'\n\n// Types\nimport type { ComputedRef, InjectionKey, PropType, Ref } from 'vue'\nimport type { GroupItemProvide } from '@/composables/group'\nimport type { TouchHandlers } from '@/directives/touch'\n\ntype WindowProvide = {\n transition: ComputedRef<undefined | string>\n transitionCount: Ref<number>\n transitionHeight: Ref<undefined | string>\n isReversed: Ref<boolean>\n rootRef: Ref<HTMLElement | undefined>\n}\n\nexport const VWindowSymbol: InjectionKey<WindowProvide> = Symbol.for('vuetify:v-window')\nexport const VWindowGroupSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-window-group')\n\nexport const VWindow = defineComponent({\n name: 'VWindow',\n\n directives: {\n Touch,\n },\n\n props: {\n continuous: Boolean,\n nextIcon: {\n type: [Boolean, String],\n default: '$next',\n },\n prevIcon: {\n type: [Boolean, String],\n default: '$prev',\n },\n reverse: Boolean,\n showArrows: {\n type: [Boolean, String],\n validator: (v: any) => typeof v === 'boolean' || v === 'hover',\n },\n touch: {\n type: [Object, Boolean] as PropType<boolean | TouchHandlers>,\n default: undefined,\n },\n direction: {\n type: String,\n default: 'horizontal',\n },\n\n modelValue: null,\n disabled: Boolean,\n selectedClass: {\n type: String,\n default: 'v-window-item--active',\n },\n // TODO: mandatory should probably not be exposed but do this for now\n mandatory: {\n default: 'force' as const,\n },\n\n ...makeTagProps(),\n ...makeThemeProps(),\n },\n\n emits: {\n 'update:modelValue': (v: any) => true,\n },\n\n setup (props, { slots }) {\n const { themeClasses } = provideTheme(props)\n const { isRtl } = useRtl()\n const { t } = useLocale()\n\n const group = useGroup(props, VWindowGroupSymbol)\n\n const rootRef = ref()\n const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse)\n const isReversed = ref(false)\n const transition = computed(() => {\n const axis = props.direction === 'vertical' ? 'y' : 'x'\n const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value\n const direction = reverse ? '-reverse' : ''\n\n return `v-window-${axis}${direction}-transition`\n })\n const transitionCount = ref(0)\n const transitionHeight = ref<undefined | string>(undefined)\n\n const activeIndex = computed(() => {\n return group.items.value.findIndex(item => group.selected.value.includes(item.id))\n })\n\n watch(activeIndex, (newVal, oldVal) => {\n const itemsLength = group.items.value.length\n const lastIndex = itemsLength - 1\n\n if (itemsLength <= 2) {\n isReversed.value = newVal < oldVal\n } else if (newVal === lastIndex && oldVal === 0) {\n isReversed.value = true\n } else if (newVal === 0 && oldVal === lastIndex) {\n isReversed.value = false\n } else {\n isReversed.value = newVal < oldVal\n }\n })\n\n provide(VWindowSymbol, {\n transition,\n isReversed,\n transitionCount,\n transitionHeight,\n rootRef,\n })\n\n const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0)\n const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1)\n\n function prev () {\n canMoveBack.value && group.prev()\n }\n\n function next () {\n canMoveForward.value && group.next()\n }\n\n provideDefaults({\n VBtn: {\n variant: 'text',\n },\n }, { scoped: true })\n\n const arrows = computed(() => {\n const arrows = []\n\n const prevProps = {\n icon: isRtl.value ? props.nextIcon : props.prevIcon,\n class: `v-window__${isRtlReverse.value ? 'right' : 'left'}`,\n onClick: group.prev,\n ariaLabel: t('$vuetify.carousel.prev'),\n }\n\n arrows.push(canMoveBack.value\n ? slots.prev\n ? slots.prev({ props: prevProps })\n : <VBtn { ...prevProps } />\n : <div />\n )\n\n const nextProps = {\n icon: isRtl.value ? props.prevIcon : props.nextIcon,\n class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,\n onClick: group.next,\n ariaLabel: t('$vuetify.carousel.next'),\n }\n\n arrows.push(canMoveForward.value\n ? slots.next\n ? slots.next({ props: nextProps })\n : <VBtn { ...nextProps } />\n : <div />\n )\n\n return arrows\n })\n\n const touchOptions = computed(() => {\n if (props.touch === false) return props.touch\n\n const options: TouchHandlers = {\n left: () => {\n isRtlReverse.value ? prev() : next()\n },\n right: () => {\n isRtlReverse.value ? next() : prev()\n },\n end: ({ originalEvent }) => {\n originalEvent.stopPropagation()\n },\n start: ({ originalEvent }) => {\n originalEvent.stopPropagation()\n },\n }\n\n return {\n ...options,\n ...(props.touch === true ? {} : props.touch),\n }\n })\n\n return () => (\n <props.tag\n ref={ rootRef }\n class={[\n 'v-window',\n {\n 'v-window--show-arrows-on-hover': props.showArrows === 'hover',\n },\n themeClasses.value,\n ]}\n v-touch={ touchOptions.value }\n >\n <div\n class=\"v-window__container\"\n style={{\n height: transitionHeight.value,\n }}\n >\n { slots.default?.() }\n\n { props.showArrows !== false && (\n <div class=\"v-window__controls\">\n { arrows.value }\n </div>\n ) }\n </div>\n </props.tag>\n )\n },\n})\n"],"file":"VWindow.mjs"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
// Imports
|
|
2
|
+
@forward './variables'
|
|
3
|
+
@use './variables' as *
|
|
2
4
|
|
|
3
5
|
.v-window
|
|
4
6
|
overflow: hidden
|
|
@@ -10,59 +12,33 @@
|
|
|
10
12
|
position: relative
|
|
11
13
|
transition: $window-transition
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
overflow: hidden
|
|
15
|
-
|
|
16
|
-
&__prev,
|
|
17
|
-
&__next
|
|
18
|
-
background: rgba(0, 0, 0, .3)
|
|
19
|
-
border-radius: 50%
|
|
15
|
+
&__controls
|
|
20
16
|
position: absolute
|
|
21
|
-
|
|
22
|
-
top:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
left: 0
|
|
31
|
-
|
|
32
|
-
+rtl()
|
|
33
|
-
right: 0
|
|
34
|
-
|
|
35
|
-
&__next
|
|
36
|
-
+ltr()
|
|
37
|
-
right: 0
|
|
17
|
+
left: 0
|
|
18
|
+
top: 0
|
|
19
|
+
width: 100%
|
|
20
|
+
height: 100%
|
|
21
|
+
display: flex
|
|
22
|
+
align-items: center
|
|
23
|
+
justify-content: space-between
|
|
24
|
+
padding: $window-controls-padding
|
|
25
|
+
pointer-events: none
|
|
38
26
|
|
|
39
|
-
|
|
40
|
-
|
|
27
|
+
*
|
|
28
|
+
pointer-events: auto
|
|
41
29
|
|
|
42
30
|
&--show-arrows-on-hover
|
|
43
31
|
overflow: hidden
|
|
44
32
|
|
|
45
|
-
.v-
|
|
46
|
-
|
|
47
|
-
transition: .2s transform map-get($transition, 'swing')
|
|
48
|
-
|
|
49
|
-
.v-window__prev
|
|
50
|
-
+ltr()
|
|
51
|
-
transform: translateX(-200%)
|
|
52
|
-
|
|
53
|
-
+rtl()
|
|
54
|
-
transform: translateX(200%)
|
|
55
|
-
|
|
56
|
-
.v-window__next
|
|
57
|
-
+ltr()
|
|
58
|
-
transform: translateX(200%)
|
|
33
|
+
.v-window__left
|
|
34
|
+
transform: translateX(-200%)
|
|
59
35
|
|
|
60
|
-
|
|
61
|
-
|
|
36
|
+
.v-window__right
|
|
37
|
+
transform: translateX(200%)
|
|
62
38
|
|
|
63
39
|
&:hover
|
|
64
|
-
.v-
|
|
65
|
-
.v-
|
|
40
|
+
.v-window__left,
|
|
41
|
+
.v-window__right
|
|
66
42
|
transform: translateX(0)
|
|
67
43
|
|
|
68
44
|
&-x-transition,
|
|
@@ -73,35 +49,35 @@
|
|
|
73
49
|
&-leave-active
|
|
74
50
|
transition: $window-transition
|
|
75
51
|
|
|
76
|
-
&-leave,
|
|
52
|
+
&-leave-from,
|
|
77
53
|
&-leave-to
|
|
78
54
|
position: absolute !important
|
|
79
55
|
top: 0
|
|
80
56
|
width: 100%
|
|
81
57
|
|
|
82
58
|
&-x-transition
|
|
83
|
-
&-enter
|
|
59
|
+
&-enter-from
|
|
84
60
|
transform: translateX(100%)
|
|
85
61
|
|
|
86
62
|
&-leave-to
|
|
87
63
|
transform: translateX(-100%)
|
|
88
64
|
|
|
89
65
|
&-x-reverse-transition
|
|
90
|
-
&-enter
|
|
66
|
+
&-enter-from
|
|
91
67
|
transform: translateX(-100%)
|
|
92
68
|
|
|
93
69
|
&-leave-to
|
|
94
70
|
transform: translateX(100%)
|
|
95
71
|
|
|
96
72
|
&-y-transition
|
|
97
|
-
&-enter
|
|
73
|
+
&-enter-from
|
|
98
74
|
transform: translateY(100%)
|
|
99
75
|
|
|
100
76
|
&-leave-to
|
|
101
77
|
transform: translateY(-100%)
|
|
102
78
|
|
|
103
79
|
&-y-reverse-transition
|
|
104
|
-
&-enter
|
|
80
|
+
&-enter-from
|
|
105
81
|
transform: translateY(-100%)
|
|
106
82
|
|
|
107
83
|
&-leave-to
|