@tekkare/auriga 0.1.128 → 0.1.129
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
|
@@ -1,29 +1,31 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="oip_select_display">
|
|
3
3
|
<p class="oip_filter_label">{{ checkbox_label }}</p>
|
|
4
|
-
<div
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
4
|
+
<div class="filter_wrap" :class="selectOption ? 'open' : ''">
|
|
5
|
+
<div
|
|
6
|
+
class="filter_box"
|
|
7
|
+
@focus="selectOption = true"
|
|
8
|
+
@focusout="selectOption = false"
|
|
9
|
+
tabindex="0"
|
|
10
|
+
:class="selectOption ? 'open' : ''"
|
|
11
|
+
@click="selectFilter()"
|
|
12
|
+
>
|
|
13
|
+
<div>
|
|
14
|
+
<arg-icon
|
|
15
|
+
:name="iconFilter"
|
|
16
|
+
:class="[
|
|
17
|
+
'flex',
|
|
18
|
+
returnValue ? 'filter_icon_check' : 'filter_icon_select',
|
|
19
|
+
disable ? 'disable' : 'filter_icon_select',
|
|
20
|
+
]"
|
|
21
|
+
size="24"
|
|
22
|
+
:color="iconColor"
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
25
|
+
<p :class="returnValue === false ? 'unselected' : ''">
|
|
26
|
+
{{ filterTitle }}
|
|
27
|
+
</p>
|
|
23
28
|
</div>
|
|
24
|
-
<p :class="returnValue === false ? 'unselected' : ''">
|
|
25
|
-
{{ filterTitle }}
|
|
26
|
-
</p>
|
|
27
29
|
<arg-tooltip
|
|
28
30
|
v-if="infoIcon"
|
|
29
31
|
:tooltip-text="tooltipText"
|
|
@@ -85,6 +87,13 @@ export default defineComponent({
|
|
|
85
87
|
const selectOption = ref(false);
|
|
86
88
|
onMounted(() => {
|
|
87
89
|
returnValue.value = props.defaultSelect;
|
|
90
|
+
if (navigator.userAgent.includes("Chrome") || navigator.userAgent.includes("Edge")) {
|
|
91
|
+
CSS.paintWorklet.addModule(
|
|
92
|
+
`data:application/javascript;charset=utf8,${encodeURIComponent(`
|
|
93
|
+
const drawSquircle=(ctx,geom,radii,smooth,lineWidth,color)=>{const defaultFill=color;const lineWidthOffset=lineWidth/2;ctx.beginPath();ctx.lineTo(radii[0],lineWidthOffset);ctx.lineTo(geom.width-radii[1],lineWidthOffset);ctx.bezierCurveTo(geom.width-radii[1]/smooth,lineWidthOffset,geom.width-lineWidthOffset,radii[1]/smooth,geom.width-lineWidthOffset,radii[1]);ctx.lineTo(geom.width-lineWidthOffset,geom.height-radii[2]);ctx.bezierCurveTo(geom.width-lineWidthOffset,geom.height-radii[2]/smooth,geom.width-radii[2]/smooth,geom.height-lineWidthOffset,geom.width-radii[2],geom.height-lineWidthOffset);ctx.lineTo(radii[3],geom.height-lineWidthOffset);ctx.bezierCurveTo(radii[3]/smooth,geom.height-lineWidthOffset,lineWidthOffset,geom.height-radii[3]/smooth,lineWidthOffset,geom.height-radii[3]);ctx.lineTo(lineWidthOffset,radii[0]);ctx.bezierCurveTo(lineWidthOffset,radii[0]/smooth,radii[0]/smooth,lineWidthOffset,radii[0],lineWidthOffset);ctx.closePath();if(lineWidth){ctx.strokeStyle=defaultFill;ctx.lineWidth=lineWidth;ctx.stroke()}else{ctx.fillStyle=defaultFill;ctx.fill()}};class SquircleClass{static get contextOptions(){return{alpha:true}}static get inputProperties(){return["--squircle-radius","--squircle-radius-top-left","--squircle-radius-top-right","--squircle-radius-bottom-right","--squircle-radius-bottom-left","--squircle-smooth","--squircle-outline","--squircle-fill"]}paint(ctx,geom,properties){const smoothRatio=10;const distanceRatio=1.8;const squircleSmooth=parseFloat(properties.get("--squircle-smooth")*smoothRatio);const individualRadiiProps=SquircleClass.inputProperties.slice(1,5);let squircleRadii=individualRadiiProps.map(prop=>{const value=properties.get(prop);return value?parseInt(value,10)*distanceRatio:NaN});let shorthand_R;if(squircleRadii.some(isNaN)){const radiusRegex=/([0-9]+[a-z%]*)/g;const radius_shorthand=properties.get("--squircle-radius").toString();const matches=radius_shorthand.match(radiusRegex);if(matches){shorthand_R=matches.map(val=>parseInt(val,10)*distanceRatio);while(shorthand_R.length<4){if(shorthand_R.length===1){shorthand_R.push(shorthand_R[0])}else if(shorthand_R.length===2){shorthand_R=[shorthand_R[0],shorthand_R[1],shorthand_R[0],shorthand_R[1]]}else if(shorthand_R.length===3){shorthand_R=[shorthand_R[0],shorthand_R[1],shorthand_R[2],shorthand_R[1]]}}}else{const defaultRadius=squircleRadii.every(isNaN)?8*distanceRatio:0;shorthand_R=[defaultRadius,defaultRadius,defaultRadius,defaultRadius]}}squircleRadii=squircleRadii.map((val,i)=>isNaN(val)?shorthand_R[i]:val);const squrcleOutline=parseFloat(properties.get("--squircle-outline"),10);const squrcleColor=properties.get("--squircle-fill").toString();const isSmooth=()=>{if(typeof properties.get("--squircle-smooth")[0]!=="undefined"){if(squircleSmooth===0){return 1}return squircleSmooth}else{return 10}};const isOutline=()=>{if(squrcleOutline){return squrcleOutline}else{return 0}};const isColor=()=>{if(squrcleColor){return squrcleColor}else{return"#f45"}};const maxRadius=Math.max(...squircleRadii);if(maxRadius<geom.width/2&&maxRadius<geom.height/2){drawSquircle(ctx,geom,squircleRadii,isSmooth(),isOutline(),isColor())}else{const minRadius=Math.min(geom.width/2,geom.height/2);drawSquircle(ctx,geom,squircleRadii.map(()=>minRadius),isSmooth(),isOutline(),isColor())}}}if(typeof registerPaint!=="undefined"){registerPaint("squircle",SquircleClass)}
|
|
94
|
+
`)}`
|
|
95
|
+
);
|
|
96
|
+
}
|
|
88
97
|
});
|
|
89
98
|
watch(
|
|
90
99
|
() => props.defaultSelect,
|
|
@@ -130,5 +139,5 @@ export default defineComponent({
|
|
|
130
139
|
});
|
|
131
140
|
</script>
|
|
132
141
|
<style scoped>
|
|
133
|
-
.filter_box{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:600;gap:8px;height:40px;line-height:16px;padding:0 12px;width:202px}.filter_tooltip{margin-left:auto!important}.filter_icon_check,.filter_icon_select{cursor:pointer}.filter_box:hover .filter_icon_select{color:var(--primary)!important}.filter_box:hover .filter_icon_check{color:var(--primary-hover)!important}.disable{cursor:auto}.disable:hover{color:var(--darkest)!important}.flex{display:flex}.unselected{color:var(--dark)!important}
|
|
142
|
+
.filter_box{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:600;gap:8px;height:40px;line-height:16px;-webkit-mask-image:paint(squircle);mask-image:paint(squircle);padding:0 12px;width:202px;--squircle-radius:8px;--squircle-smooth:1}.filter_wrap{position:relative}.filter_tooltip{margin-left:auto!important;position:absolute;right:20px;top:30%}.filter_icon_check,.filter_icon_select{cursor:pointer}.filter_box:hover .filter_icon_select{color:var(--primary)!important}.filter_box:hover .filter_icon_check{color:var(--primary-hover)!important}.disable{cursor:auto}.disable:hover{color:var(--darkest)!important}.flex{display:flex}.unselected{color:var(--dark)!important}
|
|
134
143
|
</style>
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<
|
|
2
|
+
<div class="oip_select_wrap">
|
|
3
|
+
<div class="oip_select_block" :class="disabled ? 'disabled' : ''">
|
|
4
|
+
<span class="oip_select_label" :class="disabled ? 'disabled' : ''">
|
|
5
|
+
<slot></slot>
|
|
6
|
+
</span>
|
|
7
|
+
<div v-if="show_amount && amount_value > 0" class="arg-circle-amount">
|
|
8
|
+
<span>{{ amount_value > 99 ? "99+" : amount_value }}</span>
|
|
9
|
+
</div>
|
|
10
|
+
<arg-icon
|
|
11
|
+
class="oip_select_caret_down"
|
|
12
|
+
:name="sortIcon ? 'CaretUpDown' : 'CaretDown'"
|
|
13
|
+
size="16"
|
|
14
|
+
color="var(--dark)"
|
|
15
|
+
thickness="32"
|
|
16
|
+
/>
|
|
8
17
|
</div>
|
|
9
|
-
<arg-icon
|
|
10
|
-
class="oip_select_caret_down"
|
|
11
|
-
:name="sortIcon ? 'CaretUpDown' : 'CaretDown'"
|
|
12
|
-
size="16"
|
|
13
|
-
color="var(--dark)"
|
|
14
|
-
thickness="32"
|
|
15
|
-
/>
|
|
16
18
|
</div>
|
|
17
19
|
</template>
|
|
18
20
|
|
|
@@ -50,7 +52,7 @@ const drawSquircle=(ctx,geom,radii,smooth,lineWidth,color)=>{const defaultFill=c
|
|
|
50
52
|
</script>
|
|
51
53
|
|
|
52
54
|
<style>
|
|
53
|
-
.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:300px;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:202px;--squircle-radius:8px;--squircle-smooth:1}.filter_box:hover,.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,.
|
|
55
|
+
.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:300px;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:202px;--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{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{flex-grow:1;margin:8px 0}.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_select_complex_selection_loop{cursor:pointer;display:flex;gap:8px;margin:4px 0}.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{background:var(--white);border:1px solid var(--light);border-radius:10px;display:flex;gap:0;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}
|
|
54
56
|
</style>
|
|
55
57
|
<style scoped>
|
|
56
58
|
.oip_select_complex_selection_loop > svg.add {
|
|
@@ -1,44 +1,52 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="oip_select_display">
|
|
3
3
|
<p class="oip_filter_label">{{ switch_label }}</p>
|
|
4
|
-
<div
|
|
5
|
-
@click="changeValue"
|
|
6
|
-
class="prmt_parent_switch"
|
|
7
|
-
@focus="activate_switch = true"
|
|
8
|
-
@focusout="activate_switch = false"
|
|
9
|
-
tabindex="0"
|
|
10
|
-
:class="activate_switch ? 'open' : ''"
|
|
11
|
-
>
|
|
4
|
+
<div class="switch_wrapper" :class="activate_switch ? 'open' : ''">
|
|
12
5
|
<div
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</div>
|
|
20
|
-
<div
|
|
21
|
-
:class="[
|
|
22
|
-
'prmt_switch',
|
|
23
|
-
true_is_active ? 'prmt_switch_is_active' : 'prmt_switch_is_inactive',
|
|
24
|
-
]"
|
|
6
|
+
@click="changeValue"
|
|
7
|
+
class="prmt_parent_switch"
|
|
8
|
+
@focus="activate_switch = true"
|
|
9
|
+
@focusout="activate_switch = false"
|
|
10
|
+
tabindex="0"
|
|
11
|
+
:class="activate_switch ? 'open' : ''"
|
|
25
12
|
>
|
|
26
13
|
<div
|
|
27
14
|
:class="[
|
|
28
|
-
'
|
|
15
|
+
'prmt_switch_text',
|
|
29
16
|
true_is_active
|
|
30
17
|
? 'prmt_switch_is_active'
|
|
31
18
|
: 'prmt_switch_is_inactive',
|
|
32
19
|
]"
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
20
|
+
>
|
|
21
|
+
{{ active_text }}
|
|
22
|
+
</div>
|
|
23
|
+
<div
|
|
24
|
+
:class="[
|
|
25
|
+
'prmt_switch',
|
|
26
|
+
true_is_active
|
|
27
|
+
? 'prmt_switch_is_active'
|
|
28
|
+
: 'prmt_switch_is_inactive',
|
|
29
|
+
]"
|
|
30
|
+
>
|
|
31
|
+
<div
|
|
32
|
+
:class="[
|
|
33
|
+
'prmt_switch_round',
|
|
34
|
+
true_is_active
|
|
35
|
+
? 'prmt_switch_is_active'
|
|
36
|
+
: 'prmt_switch_is_inactive',
|
|
37
|
+
]"
|
|
38
|
+
></div>
|
|
39
|
+
</div>
|
|
40
|
+
<div
|
|
41
|
+
:class="[
|
|
42
|
+
'prmt_switch_text',
|
|
43
|
+
true_is_active
|
|
44
|
+
? 'prmt_switch_is_inactive'
|
|
45
|
+
: 'prmt_switch_is_active',
|
|
46
|
+
]"
|
|
47
|
+
>
|
|
48
|
+
{{ inactive_text }}
|
|
49
|
+
</div>
|
|
42
50
|
</div>
|
|
43
51
|
</div>
|
|
44
52
|
</div>
|
|
@@ -46,6 +54,7 @@
|
|
|
46
54
|
|
|
47
55
|
<script>
|
|
48
56
|
import {
|
|
57
|
+
onMounted,
|
|
49
58
|
ref,
|
|
50
59
|
watch,
|
|
51
60
|
defineComponent
|
|
@@ -74,6 +83,15 @@ export default defineComponent({
|
|
|
74
83
|
emit("update:Switch", !true_is_active.value);
|
|
75
84
|
true_is_active.value = !true_is_active.value;
|
|
76
85
|
}
|
|
86
|
+
onMounted(() => {
|
|
87
|
+
if (navigator.userAgent.includes("Chrome") || navigator.userAgent.includes("Edge")) {
|
|
88
|
+
CSS.paintWorklet.addModule(
|
|
89
|
+
`data:application/javascript;charset=utf8,${encodeURIComponent(`
|
|
90
|
+
const drawSquircle=(ctx,geom,radii,smooth,lineWidth,color)=>{const defaultFill=color;const lineWidthOffset=lineWidth/2;ctx.beginPath();ctx.lineTo(radii[0],lineWidthOffset);ctx.lineTo(geom.width-radii[1],lineWidthOffset);ctx.bezierCurveTo(geom.width-radii[1]/smooth,lineWidthOffset,geom.width-lineWidthOffset,radii[1]/smooth,geom.width-lineWidthOffset,radii[1]);ctx.lineTo(geom.width-lineWidthOffset,geom.height-radii[2]);ctx.bezierCurveTo(geom.width-lineWidthOffset,geom.height-radii[2]/smooth,geom.width-radii[2]/smooth,geom.height-lineWidthOffset,geom.width-radii[2],geom.height-lineWidthOffset);ctx.lineTo(radii[3],geom.height-lineWidthOffset);ctx.bezierCurveTo(radii[3]/smooth,geom.height-lineWidthOffset,lineWidthOffset,geom.height-radii[3]/smooth,lineWidthOffset,geom.height-radii[3]);ctx.lineTo(lineWidthOffset,radii[0]);ctx.bezierCurveTo(lineWidthOffset,radii[0]/smooth,radii[0]/smooth,lineWidthOffset,radii[0],lineWidthOffset);ctx.closePath();if(lineWidth){ctx.strokeStyle=defaultFill;ctx.lineWidth=lineWidth;ctx.stroke()}else{ctx.fillStyle=defaultFill;ctx.fill()}};class SquircleClass{static get contextOptions(){return{alpha:true}}static get inputProperties(){return["--squircle-radius","--squircle-radius-top-left","--squircle-radius-top-right","--squircle-radius-bottom-right","--squircle-radius-bottom-left","--squircle-smooth","--squircle-outline","--squircle-fill"]}paint(ctx,geom,properties){const smoothRatio=10;const distanceRatio=1.8;const squircleSmooth=parseFloat(properties.get("--squircle-smooth")*smoothRatio);const individualRadiiProps=SquircleClass.inputProperties.slice(1,5);let squircleRadii=individualRadiiProps.map(prop=>{const value=properties.get(prop);return value?parseInt(value,10)*distanceRatio:NaN});let shorthand_R;if(squircleRadii.some(isNaN)){const radiusRegex=/([0-9]+[a-z%]*)/g;const radius_shorthand=properties.get("--squircle-radius").toString();const matches=radius_shorthand.match(radiusRegex);if(matches){shorthand_R=matches.map(val=>parseInt(val,10)*distanceRatio);while(shorthand_R.length<4){if(shorthand_R.length===1){shorthand_R.push(shorthand_R[0])}else if(shorthand_R.length===2){shorthand_R=[shorthand_R[0],shorthand_R[1],shorthand_R[0],shorthand_R[1]]}else if(shorthand_R.length===3){shorthand_R=[shorthand_R[0],shorthand_R[1],shorthand_R[2],shorthand_R[1]]}}}else{const defaultRadius=squircleRadii.every(isNaN)?8*distanceRatio:0;shorthand_R=[defaultRadius,defaultRadius,defaultRadius,defaultRadius]}}squircleRadii=squircleRadii.map((val,i)=>isNaN(val)?shorthand_R[i]:val);const squrcleOutline=parseFloat(properties.get("--squircle-outline"),10);const squrcleColor=properties.get("--squircle-fill").toString();const isSmooth=()=>{if(typeof properties.get("--squircle-smooth")[0]!=="undefined"){if(squircleSmooth===0){return 1}return squircleSmooth}else{return 10}};const isOutline=()=>{if(squrcleOutline){return squrcleOutline}else{return 0}};const isColor=()=>{if(squrcleColor){return squrcleColor}else{return"#f45"}};const maxRadius=Math.max(...squircleRadii);if(maxRadius<geom.width/2&&maxRadius<geom.height/2){drawSquircle(ctx,geom,squircleRadii,isSmooth(),isOutline(),isColor())}else{const minRadius=Math.min(geom.width/2,geom.height/2);drawSquircle(ctx,geom,squircleRadii.map(()=>minRadius),isSmooth(),isOutline(),isColor())}}}if(typeof registerPaint!=="undefined"){registerPaint("squircle",SquircleClass)}
|
|
91
|
+
`)}`
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
});
|
|
77
95
|
return {
|
|
78
96
|
changeValue,
|
|
79
97
|
activate_switch,
|
|
@@ -84,5 +102,5 @@ export default defineComponent({
|
|
|
84
102
|
</script>
|
|
85
103
|
|
|
86
104
|
<style>
|
|
87
|
-
.prmt_switch_pause{vertical-align:baseline!important;fill:var(--light)!important;color:var(--light)!important;margin:0 0 5% 11%;stroke-width:0px!important}.prmt_switch_text{font-size:14px;font-weight:600;line-height:16px;transition:all .3s ease}.prmt_switch_text.prmt_switch_is_inactive{color:var(--medium)}.prmt_switch_text.prmt_switch_is_active{color:var(--darkest)}.prmt_switch{border-radius:35.7px;height:18px;padding:0 2px;position:relative;transition:all .3s ease;width:36px}.prmt_switch.prmt_switch_is_active,.prmt_switch.prmt_switch_is_inactive{background-color:var(--accent);border:1px solid var(--accent)}.prmt_switch_round.prmt_switch_is_active{left:0;position:absolute}.prmt_switch_round.prmt_switch_is_inactive{transform:translateX(100%)}.prmt_switch_round{background-color:var(--white);border:.5px solid var(--light);border-radius:50%;box-shadow:var(--button-big-shadow);height:16px;margin-bottom:2px;transition:all .3s ease;width:16px}.prmt_parent_switch{align-items:center;background-color:var(--white);border:1.5px solid var(--light);border-radius:8px;cursor:pointer;display:flex;gap:10px;padding:10px 17px;width:-moz-fit-content;width:fit-content}.prmt_parent_switch:focus-within{border:1.5px solid var(--primary)!important;box-shadow:0 0 0 4px rgba(33,118,255,.1)!important}
|
|
105
|
+
.prmt_switch_pause{vertical-align:baseline!important;fill:var(--light)!important;color:var(--light)!important;margin:0 0 5% 11%;stroke-width:0px!important}.prmt_switch_text{font-size:14px;font-weight:600;line-height:16px;transition:all .3s ease}.prmt_switch_text.prmt_switch_is_inactive{color:var(--medium)}.prmt_switch_text.prmt_switch_is_active{color:var(--darkest)}.prmt_switch{border-radius:35.7px;height:18px;padding:0 2px;position:relative;transition:all .3s ease;width:36px}.prmt_switch.prmt_switch_is_active,.prmt_switch.prmt_switch_is_inactive{background-color:var(--accent);border:1px solid var(--accent)}.prmt_switch_round.prmt_switch_is_active{left:0;position:absolute}.prmt_switch_round.prmt_switch_is_inactive{transform:translateX(100%)}.prmt_switch_round{background-color:var(--white);border:.5px solid var(--light);border-radius:50%;box-shadow:var(--button-big-shadow);height:16px;margin-bottom:2px;transition:all .3s ease;width:16px}.prmt_parent_switch{align-items:center;background-color:var(--white);border:1.5px solid var(--light);border-radius:8px;cursor:pointer;display:flex;gap:10px;-webkit-mask-image:paint(squircle);mask-image:paint(squircle);padding:10px 17px;width:-moz-fit-content;width:fit-content;--squircle-radius:8px;--squircle-smooth:1}.prmt_parent_switch:focus-within{border:1.5px solid var(--primary)!important;box-shadow:0 0 0 4px rgba(33,118,255,.1)!important}
|
|
88
106
|
</style>
|