@tekkare/auriga 0.1.145 → 0.1.146
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
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="oip_row">
|
|
3
|
+
<div
|
|
4
|
+
v-if="tabs[0] !== undefined"
|
|
5
|
+
ref="el"
|
|
6
|
+
class="wrapper"
|
|
7
|
+
>
|
|
8
|
+
<div class="toggle_radio">
|
|
9
|
+
<div
|
|
10
|
+
v-for="(tab, index) in tabs"
|
|
11
|
+
:key="index"
|
|
12
|
+
>
|
|
13
|
+
<input
|
|
14
|
+
:id="tabs[0].label + index"
|
|
15
|
+
:key="index"
|
|
16
|
+
type="radio"
|
|
17
|
+
class="toggle_option"
|
|
18
|
+
name="toggle_option"
|
|
19
|
+
:checked="index === activeTab"
|
|
20
|
+
@click="updateButton(index)"
|
|
21
|
+
>
|
|
22
|
+
<label
|
|
23
|
+
:key="index"
|
|
24
|
+
:for="tabs[0].label + index"
|
|
25
|
+
class="labels_container"
|
|
26
|
+
>
|
|
27
|
+
<div
|
|
28
|
+
ref="buttonContents"
|
|
29
|
+
:class="
|
|
30
|
+
tab.icon
|
|
31
|
+
? 'oip_row v-center gap-4 labels_container'
|
|
32
|
+
: 'oip_row v-center gap-2 labels_container'
|
|
33
|
+
"
|
|
34
|
+
>
|
|
35
|
+
<div
|
|
36
|
+
v-if="tab.icon"
|
|
37
|
+
class="icon_div"
|
|
38
|
+
>
|
|
39
|
+
<ArgIcon
|
|
40
|
+
:name="tab.icon"
|
|
41
|
+
thickness="15"
|
|
42
|
+
size="16px"
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
<div
|
|
46
|
+
v-else
|
|
47
|
+
class="icon_replacement-div"
|
|
48
|
+
/>
|
|
49
|
+
<p class="button_label">{{ tab.label }}</p>
|
|
50
|
+
</div>
|
|
51
|
+
</label>
|
|
52
|
+
</div>
|
|
53
|
+
<div
|
|
54
|
+
class="toggle_option_slider"
|
|
55
|
+
:style="{
|
|
56
|
+
background: 'white',
|
|
57
|
+
left: silderInfos.left,
|
|
58
|
+
width: silderInfos.width,
|
|
59
|
+
height: silderInfos.height,
|
|
60
|
+
}"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</template>
|
|
66
|
+
|
|
67
|
+
<script>
|
|
68
|
+
import { defineComponent, ref, computed } from "vue";
|
|
69
|
+
import ArgIcon from "./argIcon.vue";
|
|
70
|
+
export default defineComponent({
|
|
71
|
+
name: "ArgSliderTabs",
|
|
72
|
+
components: { ArgIcon },
|
|
73
|
+
props: {
|
|
74
|
+
tabs: {
|
|
75
|
+
type: Array,
|
|
76
|
+
required: true,
|
|
77
|
+
default: () => [{ label: "" }]
|
|
78
|
+
},
|
|
79
|
+
activeTab: {
|
|
80
|
+
type: Number,
|
|
81
|
+
required: true,
|
|
82
|
+
default: 0
|
|
83
|
+
},
|
|
84
|
+
switchTab: {
|
|
85
|
+
type: Function,
|
|
86
|
+
required: true
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
setup(props) {
|
|
90
|
+
const el = ref();
|
|
91
|
+
const buttonContents = ref(null);
|
|
92
|
+
const silderInfos = computed(() => {
|
|
93
|
+
return getSliderInfos(props.activeTab);
|
|
94
|
+
});
|
|
95
|
+
const updateButton = (value) => {
|
|
96
|
+
props.switchTab(value);
|
|
97
|
+
};
|
|
98
|
+
const getSliderInfos = (index) => {
|
|
99
|
+
if (el.value && buttonContents.value) {
|
|
100
|
+
let left = 0;
|
|
101
|
+
for (let i = 0; i < index; i++) {
|
|
102
|
+
left += buttonContents.value[i].clientWidth + 18;
|
|
103
|
+
}
|
|
104
|
+
const width = `${buttonContents.value[index].clientWidth + 16}px`;
|
|
105
|
+
return {
|
|
106
|
+
width,
|
|
107
|
+
left: `${left}px`,
|
|
108
|
+
height: `${el.value.clientHeight - 6}px`
|
|
109
|
+
};
|
|
110
|
+
} else {
|
|
111
|
+
return { width: "0", left: "0", height: "0" };
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
return { updateButton, el, buttonContents, silderInfos };
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
</script>
|
|
118
|
+
|
|
119
|
+
<style scoped>
|
|
120
|
+
.wrapper{background:rgba(82,86,112,.04);border:1px solid rgba(82,86,112,.1);border-radius:8px;padding:2px}.toggle_radio{background:hsla(0,0%,100%,.1);position:relative}.toggle_radio>*{float:left}.toggle_radio input[type=radio]{display:none}.toggle_radio label{color:var(--Main-Dark,#525670);cursor:pointer;display:block;font-family:Figtree;font-size:14px;font-weight:500;margin:3px;padding:2px 6px;text-align:center;z-index:20}.toggle_option_slider{background:var(--Main-White,#fff);border:1px solid var(--Main-Light,#dbdef0);border-radius:6px;box-shadow:0 1px 2px 0 rgba(30,41,59,.1);position:absolute;transition:all .4s ease}.labels_container{align-self:center;height:100%}.icon_replacement-div{height:24px;margin:0;padding:0;width:0}.button_label{z-index:2}.icon_div{align-items:center;display:flex;height:24px;justify-content:center;z-index:2}
|
|
121
|
+
</style>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
interface Tab {
|
|
2
|
+
label: string;
|
|
3
|
+
icon?: string;
|
|
4
|
+
}
|
|
5
|
+
type Tabs = Array<Tab>;
|
|
6
|
+
declare const _default: import("vue").DefineComponent<{
|
|
7
|
+
tabs: {
|
|
8
|
+
type: () => Tabs;
|
|
9
|
+
required: true;
|
|
10
|
+
default: () => {
|
|
11
|
+
label: string;
|
|
12
|
+
}[];
|
|
13
|
+
};
|
|
14
|
+
activeTab: {
|
|
15
|
+
type: NumberConstructor;
|
|
16
|
+
required: true;
|
|
17
|
+
default: number;
|
|
18
|
+
};
|
|
19
|
+
switchTab: {
|
|
20
|
+
type: FunctionConstructor;
|
|
21
|
+
required: true;
|
|
22
|
+
};
|
|
23
|
+
}, {
|
|
24
|
+
updateButton: (value: number) => void;
|
|
25
|
+
el: import("vue").Ref<any>;
|
|
26
|
+
buttonContents: import("vue").Ref<HTMLElement[] | null>;
|
|
27
|
+
silderInfos: import("vue").ComputedRef<{
|
|
28
|
+
width: string;
|
|
29
|
+
left: string;
|
|
30
|
+
height: string;
|
|
31
|
+
}>;
|
|
32
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
33
|
+
tabs: {
|
|
34
|
+
type: () => Tabs;
|
|
35
|
+
required: true;
|
|
36
|
+
default: () => {
|
|
37
|
+
label: string;
|
|
38
|
+
}[];
|
|
39
|
+
};
|
|
40
|
+
activeTab: {
|
|
41
|
+
type: NumberConstructor;
|
|
42
|
+
required: true;
|
|
43
|
+
default: number;
|
|
44
|
+
};
|
|
45
|
+
switchTab: {
|
|
46
|
+
type: FunctionConstructor;
|
|
47
|
+
required: true;
|
|
48
|
+
};
|
|
49
|
+
}>>, {
|
|
50
|
+
tabs: Tabs;
|
|
51
|
+
activeTab: number;
|
|
52
|
+
}, {}>;
|
|
53
|
+
export default _default;
|