tdesign-vue/lib/qrcode/components/qrcode-svg.js

tdesign-vue

/**
 * tdesign v1.15.0
 * (c) 2026 tdesign
 * @license MIT
 */

import { defineComponent, computed } from '@vue/composition-api';
import { QRCodeSubComponentProps } from './props.js';
import { DEFAULT_MINVERSION, DEFAULT_NEED_MARGIN, excavateModules, generatePath } from '../../_common/js/qrcode/utils.js';
import { useQRCode } from '../hooks/useQRCode.js';
import '../../_common/js/qrcode/qrcodegen.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/defineProperty';

var QRCodeSVG = defineComponent({
  name: "QRCodeSVG",
  props: QRCodeSubComponentProps,
  setup: function setup(props) {
    var qrCodeData = computed(function () {
      return useQRCode({
        value: props.value,
        level: props.level,
        minVersion: DEFAULT_MINVERSION,
        includeMargin: DEFAULT_NEED_MARGIN,
        marginSize: props.marginSize,
        imageSettings: props.imageSettings,
        size: props.size
      });
    });
    var cellsToDraw = computed(function () {
      var _calculatedImageSetti;
      var _qrCodeData$value = qrCodeData.value,
        cells = _qrCodeData$value.cells,
        calculatedImageSettings2 = _qrCodeData$value.calculatedImageSettings;
      if (props.imageSettings && ((_calculatedImageSetti = calculatedImageSettings2.value) === null || _calculatedImageSetti === void 0 ? void 0 : _calculatedImageSetti.excavation) != null) {
        return excavateModules(cells.value, calculatedImageSettings2.value.excavation);
      }
      return cells.value;
    });
    var calculatedImageSettings = computed(function () {
      return qrCodeData.value.calculatedImageSettings.value;
    });
    var margin = computed(function () {
      return qrCodeData.value.margin.value;
    });
    var numCells = computed(function () {
      return qrCodeData.value.numCells.value;
    });
    return {
      cellsToDraw: cellsToDraw,
      calculatedImageSettings: calculatedImageSettings,
      margin: margin,
      numCells: numCells
    };
  },
  render: function render() {
    var _this = this;
    var h = arguments[0];
    var fgPath = generatePath(this.cellsToDraw, this.margin);
    var imageNode = function imageNode() {
      if (!_this.imageSettings || !_this.calculatedImageSettings) return null;
      return h("image", {
        "attrs": {
          "href": _this.imageSettings.src,
          "height": _this.calculatedImageSettings.h,
          "width": _this.calculatedImageSettings.w,
          "x": _this.calculatedImageSettings.x + _this.margin,
          "y": _this.calculatedImageSettings.y + _this.margin,
          "crossOrigin": _this.calculatedImageSettings.crossOrigin
        }
      });
    };
    return h("svg", {
      "attrs": {
        "height": this.size,
        "width": this.size,
        "viewBox": "0 0 ".concat(this.numCells, " ").concat(this.numCells),
        "role": "img"
      },
      "style": this.style
    }, [!!this.title && h("title", [this.title]), h("path", {
      "attrs": {
        "fill": this.bgColor,
        "d": "M0,0 h".concat(this.numCells, "v").concat(this.numCells, "H0z"),
        "shape-rendering": "crispEdges"
      }
    }), h("path", {
      "attrs": {
        "fill": this.fgColor,
        "d": fgPath,
        "shape-rendering": "crispEdges"
      }
    }), imageNode()]);
  }
});

export { QRCodeSVG as default };
//# sourceMappingURL=qrcode-svg.js.map