@saooti/octopus-sdk 40.2.6 → 40.2.7
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/package.json
CHANGED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="format-switch">
|
|
3
|
+
<input
|
|
4
|
+
id="format-switch-checkbox"
|
|
5
|
+
:checked="isSvg"
|
|
6
|
+
class="format-switch-checkbox"
|
|
7
|
+
type="checkbox"
|
|
8
|
+
@input="$emit('update:isSvg', !isSvg)"/>
|
|
9
|
+
<label class="format-switch-label" for="format-switch-checkbox">
|
|
10
|
+
<span class="format-switch-label-span">SVG</span>
|
|
11
|
+
</label>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script lang="ts">
|
|
16
|
+
import { defineComponent } from 'vue';
|
|
17
|
+
export default defineComponent({
|
|
18
|
+
name: "FormatSwitch",
|
|
19
|
+
props:{
|
|
20
|
+
isSvg: { default: true, type: Boolean },
|
|
21
|
+
},
|
|
22
|
+
emits: ['update:isSvg'],
|
|
23
|
+
});
|
|
24
|
+
</script>
|
|
25
|
+
<style lang="scss">
|
|
26
|
+
.octopus-app {
|
|
27
|
+
|
|
28
|
+
--format-switch-size:140px;
|
|
29
|
+
--format-switch-half: calc(var(--format-switch-size) / 2 );
|
|
30
|
+
|
|
31
|
+
.format-switch {
|
|
32
|
+
background: var(--octopus-secondary);
|
|
33
|
+
border-radius: 30px;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
width: var(--format-switch-size);
|
|
36
|
+
text-align: center;
|
|
37
|
+
color: black;
|
|
38
|
+
border: 2px solid var(--octopus-secondary);
|
|
39
|
+
padding-right: var(--format-switch-half);
|
|
40
|
+
position: relative;
|
|
41
|
+
|
|
42
|
+
&::before {
|
|
43
|
+
content: "PNG";
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 0;
|
|
46
|
+
bottom: 0;
|
|
47
|
+
right: 0;
|
|
48
|
+
width: var(--format-switch-half);
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
z-index: 3;
|
|
53
|
+
pointer-events: none;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
&-checkbox {
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: 0;
|
|
61
|
+
left: 0;
|
|
62
|
+
bottom: 0;
|
|
63
|
+
width: 100%;
|
|
64
|
+
height: 100%;
|
|
65
|
+
opacity: 0;
|
|
66
|
+
z-index: 2;
|
|
67
|
+
margin: 0;
|
|
68
|
+
|
|
69
|
+
& + .format-switch-label {
|
|
70
|
+
position: relative;
|
|
71
|
+
padding: 0.5rem 0;
|
|
72
|
+
display: block;
|
|
73
|
+
user-select: none;
|
|
74
|
+
pointer-events: none;
|
|
75
|
+
|
|
76
|
+
&::before {
|
|
77
|
+
content: "";
|
|
78
|
+
background: white;
|
|
79
|
+
height: 100%;
|
|
80
|
+
width: 100%;
|
|
81
|
+
position: absolute;
|
|
82
|
+
left: 0;
|
|
83
|
+
top: 0;
|
|
84
|
+
border-radius: 30px;
|
|
85
|
+
transform: translateX(var(--format-switch-half));
|
|
86
|
+
transition: transform 300ms;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.format-switch-label-span {
|
|
90
|
+
position: relative;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&:checked + .format-switch-label::before {
|
|
95
|
+
transform: translateX(0px);
|
|
96
|
+
transition: transform 300ms linear;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:has(input:focus-visible){
|
|
101
|
+
box-shadow: 0 0 10px 1px var(--octopus-primary) !important;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
</style>
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
:data-color="color"
|
|
16
16
|
/>
|
|
17
17
|
</div>
|
|
18
|
-
<qrcode-
|
|
18
|
+
<qrcode-vue
|
|
19
|
+
:render-as="renderQrCode"
|
|
19
20
|
:value="url"
|
|
20
21
|
:size="size"
|
|
21
22
|
level="H"
|
|
@@ -23,9 +24,12 @@
|
|
|
23
24
|
class="myQrCode"
|
|
24
25
|
:margin="2"
|
|
25
26
|
/>
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
<div class="d-flex align-items-center my-3">
|
|
28
|
+
<FormatSwitch class="me-3" v-model:isSvg="isSvg"/>
|
|
29
|
+
<button class="btn btn-primary" @click="download">
|
|
30
|
+
{{ $t("Download") }}
|
|
31
|
+
</button>
|
|
32
|
+
</div>
|
|
29
33
|
<SnackBar ref="snackbar" position="bottom-left" />
|
|
30
34
|
</div>
|
|
31
35
|
</template>
|
|
@@ -34,7 +38,8 @@
|
|
|
34
38
|
import { VSwatches } from "vue3-swatches";
|
|
35
39
|
import "vue3-swatches/dist/style.css";
|
|
36
40
|
import SnackBar from "../../misc/SnackBar.vue";
|
|
37
|
-
import
|
|
41
|
+
import QrcodeVue from "qrcode.vue";
|
|
42
|
+
import FormatSwitch from "./FormatSwitch.vue";
|
|
38
43
|
import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
|
|
39
44
|
import { mapActions } from "pinia";
|
|
40
45
|
import { defineComponent } from "vue";
|
|
@@ -43,8 +48,9 @@ export default defineComponent({
|
|
|
43
48
|
|
|
44
49
|
components: {
|
|
45
50
|
SnackBar,
|
|
46
|
-
QrcodeSvg,
|
|
47
51
|
VSwatches,
|
|
52
|
+
QrcodeVue,
|
|
53
|
+
FormatSwitch
|
|
48
54
|
},
|
|
49
55
|
props: {
|
|
50
56
|
url: { default: "", type: String },
|
|
@@ -52,10 +58,16 @@ export default defineComponent({
|
|
|
52
58
|
},
|
|
53
59
|
data() {
|
|
54
60
|
return {
|
|
55
|
-
size:
|
|
61
|
+
size: 1000 as number,
|
|
56
62
|
color: "#000000" as string,
|
|
63
|
+
isSvg: true as boolean
|
|
57
64
|
};
|
|
58
65
|
},
|
|
66
|
+
computed:{
|
|
67
|
+
renderQrCode(){
|
|
68
|
+
return this.isSvg ? 'svg' : 'canvas';
|
|
69
|
+
}
|
|
70
|
+
},
|
|
59
71
|
created() {
|
|
60
72
|
this.initDefaultColor();
|
|
61
73
|
},
|
|
@@ -63,18 +75,28 @@ export default defineComponent({
|
|
|
63
75
|
...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
|
|
64
76
|
download(): void {
|
|
65
77
|
const canvas = document.getElementsByClassName("myQrCode");
|
|
66
|
-
if (canvas
|
|
78
|
+
if (!canvas || canvas.length <=0 || !canvas[0]) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
var downloadLink = document.createElement("a");
|
|
82
|
+
if (this.isSvg) {
|
|
67
83
|
var svgData = canvas[0].outerHTML;
|
|
68
84
|
var svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
|
|
69
85
|
var svgUrl = URL.createObjectURL(svgBlob);
|
|
70
|
-
var downloadLink = document.createElement("a");
|
|
71
86
|
downloadLink.href = svgUrl;
|
|
72
87
|
downloadLink.download = "qrcode.svg";
|
|
73
88
|
downloadLink.click();
|
|
74
89
|
(this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
|
|
75
90
|
this.$t("Download started"),
|
|
76
91
|
);
|
|
92
|
+
}else{
|
|
93
|
+
downloadLink.download = "qrcode.png";
|
|
94
|
+
downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();
|
|
77
95
|
}
|
|
96
|
+
downloadLink.click();
|
|
97
|
+
(this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
|
|
98
|
+
this.$t("Download started"),
|
|
99
|
+
);
|
|
78
100
|
},
|
|
79
101
|
async initDefaultColor(): Promise<void> {
|
|
80
102
|
if (undefined === this.orgaForColor) return;
|
|
@@ -86,3 +108,11 @@ export default defineComponent({
|
|
|
86
108
|
},
|
|
87
109
|
});
|
|
88
110
|
</script>
|
|
111
|
+
<style lang="scss">
|
|
112
|
+
.octopus-app {
|
|
113
|
+
.myQrCode{
|
|
114
|
+
height: 200px !important;
|
|
115
|
+
width: 200px !important;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
</style>
|