@tekkare/auriga 0.2.154 → 0.2.155
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/module.json
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
<p v-else class="filters_title">
|
|
11
11
|
{{ langData?.title }}
|
|
12
12
|
</p>
|
|
13
|
+
{{ filtersOpen }}
|
|
13
14
|
<div class="filters_amount">{{ filters_amount }}</div>
|
|
14
15
|
<p
|
|
15
16
|
v-if="haveSaveScope && filtersOpen"
|
|
@@ -74,12 +75,15 @@ export default defineComponent({
|
|
|
74
75
|
validator: (value) => {
|
|
75
76
|
return ["en", "fr", "es", "jp", "kr"].includes(value);
|
|
76
77
|
}
|
|
78
|
+
},
|
|
79
|
+
autoOpen: {
|
|
80
|
+
type: Boolean,
|
|
81
|
+
default: true
|
|
77
82
|
}
|
|
78
83
|
},
|
|
79
84
|
emits: ["clearFilters", "saveScope"],
|
|
80
85
|
setup(props, { emit }) {
|
|
81
86
|
const filtersOpen = ref(null);
|
|
82
|
-
const scrollPosition = ref(0);
|
|
83
87
|
const lastScrollY = ref(0);
|
|
84
88
|
const isUserScrolling = ref(false);
|
|
85
89
|
const langData = ref(null);
|
|
@@ -105,31 +109,37 @@ export default defineComponent({
|
|
|
105
109
|
}
|
|
106
110
|
);
|
|
107
111
|
function openFromScroll() {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
} else {
|
|
117
|
-
const filters = document.getElementById("arg_filters_section");
|
|
118
|
-
if (filters) {
|
|
119
|
-
if (window.scrollY > lastScrollY.value + filters.offsetHeight) {
|
|
112
|
+
if (window.scrollY !== lastScrollY.value) {
|
|
113
|
+
isUserScrolling.value = true;
|
|
114
|
+
}
|
|
115
|
+
if (!props.autoOpen) {
|
|
116
|
+
if (window.scrollY > 0) {
|
|
117
|
+
if (isUserScrolling.value) {
|
|
118
|
+
console.log("close on open");
|
|
120
119
|
filtersOpen.value = false;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
if (props.autoOpen) {
|
|
124
|
+
const currentScrollY = window.scrollY;
|
|
125
|
+
if (currentScrollY === 0) {
|
|
126
|
+
if (!isUserScrolling.value) {
|
|
127
|
+
return;
|
|
128
|
+
} else {
|
|
129
|
+
filtersOpen.value = true;
|
|
121
130
|
lastScrollY.value = currentScrollY;
|
|
122
131
|
}
|
|
132
|
+
} else {
|
|
133
|
+
const filters = document.getElementById("arg_filters_section");
|
|
134
|
+
if (filters) {
|
|
135
|
+
if (window.scrollY > lastScrollY.value + filters.offsetHeight) {
|
|
136
|
+
filtersOpen.value = false;
|
|
137
|
+
lastScrollY.value = currentScrollY;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
123
140
|
}
|
|
124
141
|
}
|
|
125
142
|
}
|
|
126
|
-
onMounted(() => {
|
|
127
|
-
adjustFilterPosition();
|
|
128
|
-
listenToHeaderChange();
|
|
129
|
-
setTimeout(() => {
|
|
130
|
-
openFromScroll();
|
|
131
|
-
});
|
|
132
|
-
});
|
|
133
143
|
onUpdated(() => {
|
|
134
144
|
adjustFilterPosition();
|
|
135
145
|
});
|
|
@@ -144,9 +154,15 @@ export default defineComponent({
|
|
|
144
154
|
function handleCard() {
|
|
145
155
|
if (filtersOpen.value === false) {
|
|
146
156
|
document.removeEventListener("scroll", openFromScroll);
|
|
157
|
+
if (!props.autoOpen) {
|
|
158
|
+
document.removeEventListener("scroll", openFromScroll);
|
|
159
|
+
}
|
|
147
160
|
filtersOpen.value = true;
|
|
148
161
|
} else {
|
|
149
162
|
filtersOpen.value = false;
|
|
163
|
+
if (!props.autoOpen) {
|
|
164
|
+
document.addEventListener("scroll", openFromScroll);
|
|
165
|
+
}
|
|
150
166
|
}
|
|
151
167
|
}
|
|
152
168
|
function listenToHeaderChange() {
|
|
@@ -178,10 +194,13 @@ export default defineComponent({
|
|
|
178
194
|
emit("saveScope");
|
|
179
195
|
}
|
|
180
196
|
onMounted(() => {
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
197
|
+
if (!props.autoOpen) {
|
|
198
|
+
filtersOpen.value = true;
|
|
199
|
+
}
|
|
200
|
+
adjustFilterPosition();
|
|
201
|
+
listenToHeaderChange();
|
|
202
|
+
setTimeout(() => {
|
|
203
|
+
openFromScroll();
|
|
185
204
|
});
|
|
186
205
|
});
|
|
187
206
|
return {
|
|
@@ -28,6 +28,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
28
28
|
default: string;
|
|
29
29
|
validator: (value: string) => boolean;
|
|
30
30
|
};
|
|
31
|
+
autoOpen: {
|
|
32
|
+
type: BooleanConstructor;
|
|
33
|
+
default: boolean;
|
|
34
|
+
};
|
|
31
35
|
}>, {
|
|
32
36
|
filtersOpen: import("vue").Ref<any, any>;
|
|
33
37
|
clear: () => void;
|
|
@@ -64,6 +68,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
64
68
|
default: string;
|
|
65
69
|
validator: (value: string) => boolean;
|
|
66
70
|
};
|
|
71
|
+
autoOpen: {
|
|
72
|
+
type: BooleanConstructor;
|
|
73
|
+
default: boolean;
|
|
74
|
+
};
|
|
67
75
|
}>> & Readonly<{
|
|
68
76
|
onClearFilters?: ((...args: any[]) => any) | undefined;
|
|
69
77
|
onSaveScope?: ((...args: any[]) => any) | undefined;
|
|
@@ -75,6 +83,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
75
83
|
haveClear: boolean;
|
|
76
84
|
clearMsg: string;
|
|
77
85
|
saveScopeMsg: string;
|
|
86
|
+
autoOpen: boolean;
|
|
78
87
|
}, {}, {
|
|
79
88
|
argIcon: any;
|
|
80
89
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
2
|
+
<div :class="selectorIcon ? 'relative' : ''">
|
|
3
3
|
<!-- Simple select -->
|
|
4
4
|
<div class="oip_select_display">
|
|
5
5
|
<p
|
|
@@ -1065,4 +1065,8 @@ export default defineComponent({
|
|
|
1065
1065
|
.open-info:hover svg {
|
|
1066
1066
|
color: var(--primary) !important;
|
|
1067
1067
|
}
|
|
1068
|
+
|
|
1069
|
+
.relative {
|
|
1070
|
+
position: relative;
|
|
1071
|
+
}
|
|
1068
1072
|
</style>
|
|
@@ -71,7 +71,7 @@ const drawSquircle=(ctx,geom,radii,smooth,lineWidth,color)=>{const defaultFill=c
|
|
|
71
71
|
</script>
|
|
72
72
|
|
|
73
73
|
<style>
|
|
74
|
-
.oip_select_icon{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;cursor:pointer;display:flex;justify-content:center;padding:8px;position:relative;transition:border .15s ease-in}.oip_select_icon:hover{border:1.5px solid var(--primary-light)!important}.oip_select_wrap.open .oip_select_icon{border:1.5px solid var(--primary)!important;filter:drop-shadow(1px 1px 1px rgba(33,118,255,.3))!important}.oip_select_wrap:not(.open) .oip_select_icon:hover svg{color:var(--primary)!important}.oip_select_dropdown_block.icon{right:
|
|
74
|
+
.oip_select_icon{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;cursor:pointer;display:flex;justify-content:center;padding:8px;position:relative;transition:border .15s ease-in}.oip_select_icon:hover{border:1.5px solid var(--primary-light)!important}.oip_select_wrap.open .oip_select_icon{border:1.5px solid var(--primary)!important;filter:drop-shadow(1px 1px 1px rgba(33,118,255,.3))!important}.oip_select_wrap:not(.open) .oip_select_icon:hover svg{color:var(--primary)!important}.oip_select_dropdown_block.icon{right:0}.oip_select_dropdown_block{background:var(--demi-fond);border:1.5px solid var(--light);border-radius:12px;box-shadow:var(--overlay-shadow);display:flex;flex-direction:column;margin-top:15px;max-height:500px;min-width:230px;padding:16px;position:absolute;z-index:12}.oip_select_block{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;cursor:pointer;display:flex;gap:4px;-webkit-mask-image:paint(squircle);mask-image:paint(squircle);padding:12px;position:relative;width:196px;--squircle-radius:8px;--squircle-smooth:1}.filter_box:hover,.filter_wrap:hover>.filter_box:not(.open),.oip_select_block:hover,.oip_select_dropdown_block:hover,.prmt_parent_switch:hover{border:1.5px solid var(--primary-primary-20,#d3e4ff)!important}.filter_box.open,.oip_select_dropdown_block.open,.oip_select_wrap.open>.oip_select_block,.prmt_parent_switch.open{border:1.5px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filter_wrap.open,.oip_select_wrap.open,.switch_wrapper.open{filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.oip_select_block.open>svg{color:var(--primary)!important}.oip_select_block.disabled{background:var(--light)!important;cursor:not-allowed}.oip_select_label .prmt_tooltip{display:flex}.oip_select_label .prmt_tooltip span,.oip_select_label>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:98%}.oip_select_label{color:var(--darkest);font-size:14px;font-weight:700;line-height:16px;max-height:16px;width:90%}.oip_select_block svg{flex-shrink:0!important}.oip_select_label.disabled{color:var(--dark)}.oip_select_caret_down{float:right;margin-left:auto}.oip_select_complex_selection_loop_name{font-style:normal;line-height:160%;width:-moz-fit-content;width:fit-content}.oip_select_complex_selection_loop.del>svg{color:var(--system-alert)!important;flex-shrink:0}.oip_select_complex_selection_loop.add>svg{color:var(--primary)!important;flex-shrink:0}.oip_select_complex_selection_loop{align-self:stretch;cursor:pointer;display:flex;flex-grow:1;gap:8px;min-height:24px}.oip_select_complex_selection_container{margin:8px 0;max-height:350px;overflow-y:auto}.oip_select_complex_selection_loop_name{font-size:14px;font-weight:400;line-height:16px}.oip_search_container>svg{color:var(--medium)!important}.oip_search_name:focus-visible{outline:none}.oip_search_name::-moz-placeholder{color:var(--medium);font-size:12px;font-weight:400;line-height:20px}.oip_search_name::placeholder{color:var(--medium);font-size:12px;font-weight:400;line-height:20px}.oip_search_name{border:none;padding-left:8px;width:100%}.oip_search_container{align-items:center;align-self:stretch;background:var(--white);border:1px solid var(--light);border-radius:8px;display:flex;gap:8px;padding:8px 12px}.oip_select_dropdown_title{color:var(--darkest);font-size:14px;font-weight:500;margin-bottom:8px}.oip_select_dropdown_selection_container{display:flex;flex:1 1 auto;flex-direction:column;gap:0;margin-top:16px;min-height:10px;overflow-y:auto}.oip_select_dropdown_selection_container:only-child{margin-top:0}.oip_empty_dropdown{color:var(--dark);font-size:14px;font-style:italic;font-weight:400;line-height:16px;padding-top:16px;text-align:center}.oip_select_complex_selection_loop>svg.add{fill:var(--accent)!important;color:var(--white)!important}.arg-circle-amount{align-items:center;background:#e9f1ff;border-radius:50%;color:var(--primary);display:flex;flex-direction:column;flex-shrink:0;font-size:14px;font-style:normal;font-weight:600;gap:10px;height:20px;justify-content:center;padding:4px;position:absolute;right:34px;width:20px}.oip_empty_select{color:var(--dark);font-size:14px;font-style:italic;font-weight:400;line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oip_select_display{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.close-icon{background:var(--light);border-radius:100%;cursor:pointer;margin-left:auto;padding:4px}.arg-icon-circle-amount,.close-icon{align-items:center;display:flex;justify-content:center}.arg-icon-circle-amount{background:#e9f1ff;border-radius:50%;color:var(--primary);flex-direction:column;font-size:12px;font-style:normal;font-weight:900;height:var(--m,20px);line-height:normal;position:absolute;right:-5px;top:-5px;width:var(--m,20px);z-index:1}.close-icon:hover svg{color:var(--primary)!important}
|
|
75
75
|
</style>
|
|
76
76
|
<style scoped>
|
|
77
77
|
.oip_select_complex_selection_loop > svg.add {
|