{"version":3,"file":"QrCode-CyMUFfV2.mjs","names":[],"sources":["../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/FormatSwitch.vue","../src/components/display/sharing/QrCode.vue","../src/components/display/sharing/QrCode.vue"],"sourcesContent":["<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n    <div class=\"format-switch\">\n      <input \n        id=\"format-switch-checkbox\"\n        :checked=\"isSvg\"\n        class=\"format-switch-checkbox\" \n        type=\"checkbox\" \n        @input=\"changeIsSvg\"/>\n      <label class=\"format-switch-label\" for=\"format-switch-checkbox\">\n        <span class=\"format-switch-label-span\">SVG</span>\n      </label>\n    </div>\n  </template>\n  \n<script setup lang=\"ts\">\n\n//Props \nconst props = defineProps({\n  isSvg: { default: true, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits(['update:isSvg']);\n\n//Methods\nfunction changeIsSvg(){\n  emit('update:isSvg', !props.isSvg)\n}\n</script>\n  <style lang=\"scss\">\n  .octopus-app {\n\n    --format-switch-size:140px;\n    --format-switch-half: calc(var(--format-switch-size) / 2 );\n  \n    .format-switch {\n      background: var(--octopus-secondary);\n      border-radius: 30px;\n      overflow: hidden;\n      width: var(--format-switch-size);\n      text-align: center;\n      color: black;\n      border: 2px solid var(--octopus-secondary);\n      padding-right: var(--format-switch-half);\n      position: relative;\n  \n      &::before {\n        content: \"PNG\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        width: var(--format-switch-half);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 3;\n        pointer-events: none;\n      }\n  \n    \n      &-checkbox {\n        cursor: pointer;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        z-index: 2;\n        margin: 0;\n  \n        & + .format-switch-label {\n          position: relative;\n          padding: 0.5rem 0;\n          display: block;\n          user-select: none;\n          pointer-events: none;\n  \n          &::before {\n            content: \"\";\n            background: white;\n            height: 100%;\n            width: 100%;\n            position: absolute;\n            left: 0;\n            top: 0;\n            border-radius: 30px;\n            transform: translateX(var(--format-switch-half));\n            transition: transform 300ms;\n          }\n  \n          .format-switch-label-span {\n            position: relative;\n          }\n        }\n  \n        &:checked + .format-switch-label::before {\n          transform: translateX(0px);\n          transition: transform 300ms linear;\n        }\n      }\n  \n      &:has(input:focus-visible){\n        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;\n      }\n    }\n  }\n  </style>","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex align-items-center mb-3\">\n      <div class=\"form-label me-3\">\n        {{ t(\"Color of the QR Code\") }}\n      </div>\n      <VSwatches\n        v-model:model-value=\"color\"\n        class=\"c-hand\"\n        show-fallback\n        fallback-input-type=\"color\"\n        colors=\"text-advanced\"\n        popover-to=\"right\"\n        popover-y=\"bottom\"\n        :data-color=\"color\"\n      />\n    </div>\n    <qrcode-vue\n      :render-as=\"renderQrCode\"\n      :value=\"url\"\n      :size=\"size\"\n      level=\"H\"\n      :foreground=\"color\"\n      class=\"myQrCode\"\n      :margin=\"2\"\n    />\n    <div class=\"d-flex align-items-center my-3\">\n      <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\"/>\n      <button class=\"btn btn-primary\" @click=\"download\">\n        {{ t(\"Download\") }}\n      </button>\n    </div>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\n\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n  const canvas = document.getElementsByClassName(\"myQrCode\");\n  if (!canvas || canvas.length <=0 || !canvas[0]) {\n    return;\n  }\n  const downloadLink = document.createElement(\"a\");\n  if (isSvg.value) {\n    const svgData = canvas[0].outerHTML;\n    const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n    const svgUrl = URL.createObjectURL(svgBlob);\n    downloadLink.href = svgUrl;\n    downloadLink.download = \"qrcode.svg\";\n  }else{\n    downloadLink.download = \"qrcode.png\";\n    downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n  }\n  downloadLink.click();\n  (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n    t(\"Download started\"),\n  );\n}\nasync function initDefaultColor(): Promise<void> {\n  if (undefined === props.orgaForColor) return;\n  const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    color.value = attributes.COLOR as string;\n  }\n}\n</script>\n<style lang=\"scss\">\n.octopus-app {\n  .myQrCode{\n    height: 200px !important;\n    width: 200px !important;\n  }\n}\n</style>","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"d-flex align-items-center mb-3\">\n      <div class=\"form-label me-3\">\n        {{ t(\"Color of the QR Code\") }}\n      </div>\n      <VSwatches\n        v-model:model-value=\"color\"\n        class=\"c-hand\"\n        show-fallback\n        fallback-input-type=\"color\"\n        colors=\"text-advanced\"\n        popover-to=\"right\"\n        popover-y=\"bottom\"\n        :data-color=\"color\"\n      />\n    </div>\n    <qrcode-vue\n      :render-as=\"renderQrCode\"\n      :value=\"url\"\n      :size=\"size\"\n      level=\"H\"\n      :foreground=\"color\"\n      class=\"myQrCode\"\n      :margin=\"2\"\n    />\n    <div class=\"d-flex align-items-center my-3\">\n      <FormatSwitch v-model:is-svg=\"isSvg\" class=\"me-3\"/>\n      <button class=\"btn btn-primary\" @click=\"download\">\n        {{ t(\"Download\") }}\n      </button>\n    </div>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport SnackBar from \"../../misc/SnackBar.vue\";\nimport QrcodeVue from \"qrcode.vue\";\nimport FormatSwitch from \"./FormatSwitch.vue\";\nimport { useSaveFetchStore } from \"../../../stores/SaveFetchStore\";\nimport { computed, onBeforeMount, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  url: { default: \"\", type: String },\n    orgaForColor: { default: undefined, type: String },\n})\n\n//Data \nconst size = ref(1000);\nconst color = ref(\"#000000\");\nconst isSvg = ref(true);\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst saveFetchStore = useSaveFetchStore();\n\n\n//Computed\nconst renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');\n\nonBeforeMount(()=>initDefaultColor())\n\n//Methods\nfunction download(): void {\n  const canvas = document.getElementsByClassName(\"myQrCode\");\n  if (!canvas || canvas.length <=0 || !canvas[0]) {\n    return;\n  }\n  const downloadLink = document.createElement(\"a\");\n  if (isSvg.value) {\n    const svgData = canvas[0].outerHTML;\n    const svgBlob = new Blob([svgData], {type:\"image/svg+xml;charset=utf-8\"});\n    const svgUrl = URL.createObjectURL(svgBlob);\n    downloadLink.href = svgUrl;\n    downloadLink.download = \"qrcode.svg\";\n  }else{\n    downloadLink.download = \"qrcode.png\";\n    downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();\n  }\n  downloadLink.click();\n  (snackBarRef?.value as InstanceType<typeof SnackBar>).open(\n    t(\"Download started\"),\n  );\n}\nasync function initDefaultColor(): Promise<void> {\n  if (undefined === props.orgaForColor) return;\n  const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);\n  if (Object.hasOwn(attributes, \"COLOR\")) {\n    color.value = attributes.COLOR as string;\n  }\n}\n</script>\n<style lang=\"scss\">\n.octopus-app {\n  .myQrCode{\n    height: 200px !important;\n    width: 200px !important;\n  }\n}\n</style>"],"mappings":";;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAGb,SAAS,cAAa;GACpB,KAAK,gBAAgB,CAAC,MAAM,KAAK;EACnC;;;;;;;;;;;;;;;qBC1BS,OAAM,gBAAe;;;qBAA1B,mBAUM,OAVN,cAUM,CATJ,mBAKwB,SAAA;EAJtB,IAAG;EACF,SAAS,OAAA;EACV,OAAM;EACN,MAAK;EACJ,SAAO,OAAA;uDACV,mBAEQ,SAAA;EAFD,OAAM;EAAsB,KAAI;KACrC,mBAAiD,QAAA,EAA3C,OAAM,2BAA0B,GAAC,KAAG,CAAA,GAAA,EAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;ECsClD,MAAM,QAAQ;EAMd,MAAM,OAAO,IAAI,GAAI;EACrB,MAAM,QAAQ,IAAI,SAAS;EAC3B,MAAM,QAAQ,IAAI,IAAI;EACtB,MAAM,cAAc,eAAe,UAAU;EAG7C,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,iBAAiB,kBAAkB;EAIzC,MAAM,eAAe,eAAe,MAAM,QAAQ,QAAQ,QAAQ;EAElE,oBAAkB,iBAAiB,CAAC;EAGpC,SAAS,WAAiB;GACxB,MAAM,SAAS,SAAS,uBAAuB,UAAU;GACzD,IAAI,CAAC,UAAU,OAAO,UAAS,KAAK,CAAC,OAAO,IAC1C;GAEF,MAAM,eAAe,SAAS,cAAc,GAAG;GAC/C,IAAI,MAAM,OAAO;IACf,MAAM,UAAU,OAAO,GAAG;IAC1B,MAAM,UAAU,IAAI,KAAK,CAAC,OAAO,GAAG,EAAC,MAAK,8BAA6B,CAAC;IAExE,aAAa,OADE,IAAI,gBAAgB,OACf;IACpB,aAAa,WAAW;GAC1B,OAAK;IACH,aAAa,WAAW;IACxB,aAAa,OAAQ,OAAO,GAAyB,UAAU;GACjE;GACA,aAAa,MAAM;GACnB,CAAC,aAAa,OAAwC,KACpD,EAAE,kBAAkB,CACtB;EACF;EACA,eAAe,mBAAkC;GAC/C,IAAI,KAAA,MAAc,MAAM,cAAc;GACtC,MAAM,aAAa,MAAM,eAAe,kBAAkB,MAAM,YAAY;GAC5E,IAAI,OAAO,OAAO,YAAY,OAAO,GACnC,MAAM,QAAQ,WAAW;EAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBC/FO,OAAM,wCAAuC;mBAC3C,OAAM,iCAAgC;mBACpC,OAAM,kBAAiB;mBAuBzB,OAAM,iCAAgC;;qBAzB7C,mBAgCM,OAhCN,YAgCM;EA/BJ,mBAcM,OAdN,YAcM,CAbJ,mBAEM,OAFN,YAEM,gBADD,OAAA,EAAC,sBAAA,CAAA,GAAA,CAAA,GAEN,YASE,OAAA,cAAA;GARQ,eAAa,OAAA;gEAAA,OAAA,QAAK;GAC1B,OAAM;GACN,iBAAA;GACA,uBAAoB;GACpB,QAAO;GACP,cAAW;GACX,aAAU;GACT,cAAY,OAAA;;EAGjB,YAQE,OAAA,cAAA;GAPC,aAAW,OAAA;GACX,OAAO,OAAA;GACP,MAAM,OAAA;GACP,OAAM;GACL,YAAY,OAAA;GACb,OAAM;GACL,QAAQ;;;;;;;EAEX,mBAKM,OALN,YAKM,CAJJ,YAAmD,OAAA,iBAAA;GAA7B,UAAQ,OAAA;2DAAA,OAAA,QAAK;GAAE,OAAM;2BAC3C,mBAES,UAAA;GAFD,OAAM;GAAmB,SAAO,OAAA;qBACnC,OAAA,EAAC,UAAA,CAAA,GAAA,CAAA,CAAA,CAAA;EAGR,YAAkD,OAAA,aAAA;GAAxC,KAAI;GAAW,UAAS"}