@gct-paas/core-web 0.1.5-test.1 → 0.1.6-dev.0

package/es/components/label-design/panels/widget/panel-widget.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,282 @@
+/* stylelint-disable scss/double-slash-comment-empty-line-before, no-descending-specificity, block-no-empty */
+.element-properties .border-wrapper .font_family {
+  margin-right: 5px;
+  cursor: pointer;
+}
+.element-properties .border-wrapper .font_family.selected {
+  color: var(--ant-primary-color);
+}
+.panel-box .ant-input-affix-wrapper {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+.panel-box .ant-input-affix-wrapper .ant-input {
+  font-size: 12px;
+  line-height: 1.5;
+}
+.panel-box .ant-input-number {
+  font-size: 12px;
+  line-height: 1.5;
+}
+.panel-box .ant-input-number .ant-input-number-input {
+  height: inherit;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.panel-box .ant-select {
+  font-size: 12px;
+  line-height: 1.5;
+}
+.panel-box .ant-select-single .ant-select-selector .ant-select-selection-item {
+  line-height: 26px;
+}
+.panel-box .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+  height: 28px;
+  padding: 0 8px;
+}
+.panel-box .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input {
+  height: 26px;
+}
+.panel-box .dimension-menu,
+.panel-box .position-menu {
+  grid-template-columns: repeat(2, 1fr);
+}
+.panel-box .text-menu,
+.panel-box .color-menu,
+.panel-box .image-menu {
+  grid-template-columns: repeat(1, 1fr);
+}
+.panel-box .icon-bar {
+  display: flex;
+  justify-content: space-between;
+  padding: 2px;
+  text-align: center;
+  user-select: none;
+  background-color: #F0F0F0;
+  border-radius: 4px;
+}
+.panel-box .icon-bar.disabled {
+  cursor: not-allowed;
+}
+.panel-box .icon-bar.disabled .icon-bar_item {
+  pointer-events: none;
+}
+.panel-box .icon-bar_item {
+  flex: 1;
+  padding: 3px 3px 1px;
+  margin-left: 2px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.38);
+  cursor: pointer;
+  border-radius: 2px;
+}
+.panel-box .icon-bar_item:first-child {
+  margin-left: 0;
+}
+.panel-box .icon-bar_item.active {
+  color: rgba(0, 0, 0, 0.97);
+  background-color: #fff;
+}
+.panel-box .icon-bar_item:hover {
+  color: rgba(0, 0, 0, 0.97);
+  background-color: #fff;
+}
+.panel-box .icon-bar i {
+  width: 20px;
+  font-size: 20px;
+  line-height: 1;
+}
+.panel-box .text-input,
+.panel-box .item-wrapper {
+  margin: 0 20px 10px;
+}
+.panel-box .mini-text-input {
+  margin: 0 20px;
+}
+.panel-box .setting-row {
+  display: flex;
+  margin-bottom: 12px;
+}
+.panel-box .setting-row.inner {
+  margin: 0;
+}
+.panel-box .sub-title {
+  margin-right: 6px;
+  font-size: 12px;
+  line-height: 18px;
+  word-break: keep-all;
+}
+.panel-box .sub-content {
+  display: flex;
+  flex: 1;
+}
+.panel-box .sub-content::after {
+  clear: both;
+  display: block;
+  content: '';
+}
+.panel-box .sub-content.inner {
+  margin-left: 0;
+}
+.panel-box .sub-content .sub-content_inner {
+  flex: 1;
+  border-radius: 4px;
+}
+.panel-box .sub-content .sub-content_inner .stack-order-btn-box {
+  display: flex;
+}
+.panel-box .sub-content .sub-content_inner .stack-order-btn-box .ant-btn {
+  flex: 1;
+  color: var(--ant-primary-color);
+  border-radius: 0;
+}
+.panel-box .sub-content .sub-content_inner .stack-order-btn-box .ant-btn:first-child {
+  margin-right: -1px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.panel-box .sub-content .sub-content_inner .stack-order-btn-box .ant-btn:first-child:focus,
+.panel-box .sub-content .sub-content_inner .stack-order-btn-box .ant-btn:first-child:hover {
+  margin-right: 0;
+}
+.panel-box .sub-content .sub-content_inner .stack-order-btn-box .ant-btn:nth-child(2) {
+  margin-right: -1px;
+}
+.panel-box .sub-content .sub-content_inner .stack-order-btn-box .ant-btn:nth-child(2):focus,
+.panel-box .sub-content .sub-content_inner .stack-order-btn-box .ant-btn:nth-child(2):hover {
+  margin-right: 0;
+}
+.panel-box .sub-content .sub-content_inner .stack-order-btn-box .ant-btn:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.panel-box .sub-content_tag {
+  width: 16px;
+  line-height: 26px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.panel-box .sub-content_tag:hover {
+  background-color: #d7d7d7;
+}
+.panel-box .sub-content_tag.has-bind-tag {
+  color: #fff;
+  background: #5da9ff;
+}
+.panel-box .sub-content_tag.has-bind-tag.opc-disconnect {
+  background: #ff0712;
+}
+.panel-box .sub-content_tag i {
+  font-size: 12px;
+}
+.panel-box .setting-col {
+  float: left;
+  width: 48%;
+}
+.panel-box .setting-col.full-col {
+  width: 90%;
+}
+.panel-box .setting-col.setting-col_left {
+  float: left;
+}
+.panel-box .setting-col.setting-col_right {
+  float: right;
+}
+.panel-box .setting-col .setting-col_inner {
+  display: flex;
+  height: 28px;
+}
+.panel-box .setting-col .setting-col_inner > *:first-child {
+  flex: 1;
+}
+.panel-box .setting-col .setting-col_tag {
+  width: 16px;
+  line-height: 26px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.panel-box .setting-col .setting-col_tag:hover {
+  background-color: #d7d7d7;
+}
+.panel-box .setting-col .setting-col_tag.has-bind-tag {
+  color: #fff;
+  background: #5da9ff;
+}
+.panel-box .setting-col .setting-col_tag.has-bind-tag.opc-disconnect {
+  background: #ff0712;
+}
+.panel-box .setting-col .setting-col_tag i {
+  font-size: 12px;
+}
+.panel-box .setting-col .el-input {
+  width: 100%;
+}
+.panel-box .setting-col .setting-label {
+  font-size: 12px;
+  line-height: 22px;
+  color: #666;
+}
+.panel-box .setting-col .setting-label > i {
+  color: #CCC;
+}
+.panel-box .setting-col .setting-label > span {
+  color: #8F8F8F;
+}
+.panel-box .el-input--mini .el-input__inner {
+  height: 26px;
+  line-height: 26px;
+  text-align: inherit;
+  border-radius: 0;
+}
+.panel-box .el-button--mini {
+  padding: 6px 7px;
+}
+.panel-box .el-slider__runway {
+  height: 4px;
+  margin: 10px 0;
+}
+.panel-box .el-slider__bar {
+  height: 4px;
+}
+.panel-box .el-slider__button-wrapper {
+  top: -14px;
+  width: 32px;
+  height: 32px;
+}
+.panel-box .el-color-picker {
+  display: block;
+  width: 26px;
+}
+.panel-box .el-color-picker--mini .el-color-picker__trigger {
+  width: 100%;
+  height: 26px;
+}
+.panel-box .vue-treeselect .vue-treeselect__control {
+  height: 26px;
+  border-radius: 0;
+}
+.panel-box .vue-treeselect .vue-treeselect__control .vue-treeselect__placeholder {
+  line-height: 26px;
+}
+.panel-box .vue-treeselect .vue-treeselect__control .vue-treeselect__single-value {
+  line-height: 26px;
+}
+.panel-box {
+  position: relative;
+  height: 100%;
+  overflow: auto;
+}
+.panel-box::-webkit-scrollbar {
+  width: 0;
+}
+.panel-box .selection-title__wrapper {
+  height: 42px;
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+  color: #212528;
+  border-bottom: 1px solid #e0e3ea;
+}

package/es/components/label-design/stage/StageEl.vue.d.ts

@@ -0,0 +1,40 @@
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    elem: {
+        type: PropType<IObject>;
+        required: true;
+    };
+    tableData: {
+        type: PropType<IObject>;
+        default: undefined;
+    };
+}>, {}, {
+    currentSize: {
+        width: any;
+        height: any;
+    };
+}, {}, {
+    updateElementSize(width: string, height: string): void;
+    updatePBarcodeSize({ width, rotateWidth, height, }: {
+        width: string;
+        rotateWidth: string;
+        height: string;
+    }): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "updatePBarcodeWidth"[], "updatePBarcodeWidth", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    elem: {
+        type: PropType<IObject>;
+        required: true;
+    };
+    tableData: {
+        type: PropType<IObject>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onUpdatePBarcodeWidth?: ((...args: any[]) => any) | undefined;
+}>, {
+    tableData: IObject;
+}, {}, {
+    [x: string]: any;
+    [x: symbol]: any;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/label-design/stage/StageEl.vue.mjs

@@ -0,0 +1,5 @@
+import StageEl_vue_vue_type_script_lang_default from "./StageEl.vue_vue_type_script_lang.mjs";
+//#region src/components/label-design/stage/StageEl.vue
+var StageEl_default = StageEl_vue_vue_type_script_lang_default;
+//#endregion
+export { StageEl_default as default };

package/es/components/label-design/stage/StageEl.vue_vue_type_script_lang.mjs

@@ -0,0 +1,164 @@
+import { PRINT_ELE_TYPE } from "../constants/CommonPrintElems.mjs";
+import MrEl_default from "../components/mr-vue/MrEl.vue.mjs";
+import comps from "../components/widgets/index.mjs";
+import { h } from "vue";
+//#region src/components/label-design/stage/StageEl.vue?vue&type=script&lang.ts
+var StageEl_vue_vue_type_script_lang_default = {
+	name: "StageEl",
+	components: { ...comps },
+	props: {
+		elem: {
+			type: Object,
+			required: true
+		},
+		tableData: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: ["updatePBarcodeWidth"],
+	data() {
+		return { currentSize: {
+			width: this.elem.width,
+			height: this.elem.height
+		} };
+	},
+	computed: {},
+	watch: {
+		"elem.width"(nv) {
+			this.currentSize.width = nv;
+		},
+		"elem.height"(nv) {
+			this.currentSize.height = nv;
+		}
+	},
+	methods: {
+		updateElementSize(width, height) {
+			this.currentSize = {
+				width: parseInt(width),
+				height: parseInt(height)
+			};
+		},
+		updatePBarcodeSize({ width, rotateWidth, height }) {
+			this.$emit("updatePBarcodeWidth", {
+				width: parseInt(width),
+				rotateWidth: parseInt(rotateWidth),
+				height: parseInt(height),
+				elId: this.elem.id
+			});
+		}
+	},
+	render: function() {
+		let elementO = this.elem;
+		let styles = elementO.styles;
+		if (elementO.rotate === 90) {
+			styles.transform = `rotate(${elementO.rotate}deg)`;
+			styles.height = elementO.width + "px";
+			styles.width = elementO.height + "px";
+			styles.transformOrigin = `${parseInt(styles.height) / 2}px ${parseInt(styles.height) / 2}px`;
+		} else if (elementO.rotate === 270) {
+			styles.transform = `rotate(${elementO.rotate}deg) translateX(-100%)`;
+			styles.height = elementO.width + "px";
+			styles.width = elementO.height + "px";
+			styles.transformOrigin = `0 0`;
+		} else if (elementO.rotate === 180) {
+			styles.transform = `rotate(${elementO.rotate}deg)`;
+			styles.height = "100%";
+			styles.width = "100%";
+			styles.transformOrigin = `center center`;
+		} else {
+			styles.height = "100%";
+			styles.width = "100%";
+			styles.transform = "none";
+			styles.transformOrigin = "none";
+		}
+		let attrs = {};
+		for (let key in elementO.attrs) attrs[key] = elementO.attrs[key]["value"];
+		let props = {};
+		if (elementO.type === PRINT_ELE_TYPE.BAR_CODE) props = {
+			elId: elementO.id,
+			...elementO.attrs,
+			height: elementO.rotate === 90 ? this.currentSize.width : this.currentSize.height,
+			rotate: elementO.rotate
+		};
+		else if (elementO.type === PRINT_ELE_TYPE.QR_CODE) props = { ...elementO.attrs };
+		else if (elementO.type === PRINT_ELE_TYPE.HORIZONTAL_LINE || elementO.type === PRINT_ELE_TYPE.VERTICAL_LINE || elementO.type === PRINT_ELE_TYPE.RECTANGLE) props = {
+			"border-width": styles["border-width"],
+			color: styles["color"]
+		};
+		else if (elementO.type === PRINT_ELE_TYPE.TEXT || elementO.type === PRINT_ELE_TYPE.RICH_TEXT) props = {
+			"font-size": styles["font-size"],
+			"font-family": styles["font-family"],
+			"bg-color": styles["bg-color"],
+			"border-top": styles["border-top"],
+			"border-right": styles["border-right"],
+			"border-bottom": styles["border-bottom"],
+			"border-left": styles["border-left"],
+			"border-top-left-radius": styles["border-top-left-radius"],
+			"border-top-right-radius": styles["border-top-right-radius"],
+			"border-bottom-left-radius": styles["border-bottom-left-radius"],
+			"border-bottom-right-radius": styles["border-bottom-right-radius"],
+			type: elementO.attrs.text.type,
+			label: elementO.attrs.text.label,
+			isEdit: elementO.isEdit,
+			styles
+		};
+		let event = {};
+		if (elementO.type === PRINT_ELE_TYPE.BAR_CODE) event = { onBarcodeChange: this.updatePBarcodeSize };
+		const data = {
+			class: elementO.classes,
+			style: styles,
+			id: elementO.id,
+			ownId: elementO.ownId,
+			"el-width": this.currentSize.width,
+			"el-height": this.currentSize.height,
+			...JSON.parse(JSON.stringify(attrs)),
+			...props,
+			...event
+		};
+		let stageElem;
+		let mrElProps = {
+			id: elementO.id,
+			type: elementO.type,
+			internal: elementO.internal,
+			events: elementO.events,
+			left: elementO.left,
+			top: elementO.top,
+			right: elementO.right,
+			bottom: elementO.bottom,
+			zIndex: elementO.zIndex,
+			width: elementO.width,
+			height: elementO.height,
+			rotate: elementO.rotate,
+			minWidth: elementO.minWidth,
+			minHeight: elementO.minHeight,
+			elem: this.elem
+		};
+		if (elementO.type === PRINT_ELE_TYPE.QR_CODE) mrElProps = {
+			...mrElProps,
+			handles: null
+		};
+		else if (elementO.type === PRINT_ELE_TYPE.BAR_CODE) if (elementO.rotate === 90) mrElProps = {
+			...mrElProps,
+			handles: [
+				"ml",
+				"mr",
+				"lc",
+				"rc"
+			]
+		};
+		else mrElProps = {
+			...mrElProps,
+			handles: [
+				"mt",
+				"mb",
+				"tc",
+				"bc"
+			]
+		};
+		stageElem = h(MrEl_default, mrElProps, [h(comps[elementO.type] || elementO.type, data)]);
+		return stageElem;
+	}
+};
+//#endregion
+export { StageEl_vue_vue_type_script_lang_default as default };

package/es/components/label-design/stage/StageElv.vue.d.ts

@@ -0,0 +1,21 @@
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    elem: {
+        type: PropType<IObject>;
+        required: true;
+    };
+}>, {}, {
+    currentSize: {
+        width: any;
+        height: any;
+    };
+}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    elem: {
+        type: PropType<IObject>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {
+    [x: string]: any;
+    [x: symbol]: any;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/label-design/stage/StageElv.vue.mjs

@@ -0,0 +1,5 @@
+import StageElv_vue_vue_type_script_lang_default from "./StageElv.vue_vue_type_script_lang.mjs";
+//#region src/components/label-design/stage/StageElv.vue
+var StageElv_default = StageElv_vue_vue_type_script_lang_default;
+//#endregion
+export { StageElv_default as default };

package/es/components/label-design/stage/StageElv.vue_vue_type_script_lang.mjs

@@ -0,0 +1,98 @@
+import { PRINT_ELE_TYPE } from "../constants/CommonPrintElems.mjs";
+import MrEl_default from "../components/mr-vue/MrEl.vue.mjs";
+import comps from "../components/widgets/index.mjs";
+import { h } from "vue";
+//#region src/components/label-design/stage/StageElv.vue?vue&type=script&lang.ts
+var StageElv_vue_vue_type_script_lang_default = {
+	name: "StageElv",
+	components: { ...comps },
+	props: { elem: {
+		type: Object,
+		required: true
+	} },
+	data() {
+		return { currentSize: {
+			width: this.elem.width,
+			height: this.elem.height
+		} };
+	},
+	computed: {},
+	render: function() {
+		let elementO = this.elem;
+		let styles = elementO.styles;
+		if (elementO.rotate === 90) {
+			styles.transform = `rotate(${elementO.rotate}deg)`;
+			styles.height = elementO.width + "px";
+			styles.width = elementO.height + "px";
+			styles.transformOrigin = `${parseInt(styles.height) / 2}px ${parseInt(styles.height) / 2}px`;
+		} else {
+			styles.height = "100%";
+			styles.width = "100%";
+			styles.transform = "none";
+			styles.transformOrigin = "none";
+		}
+		let attrs = {};
+		for (let key in elementO.attrs) attrs[key] = elementO.attrs[key]["value"];
+		let props = {};
+		if (elementO.type === PRINT_ELE_TYPE.BAR_CODE) props = {
+			elId: "view_" + elementO.id,
+			...elementO.attrs,
+			height: elementO.rotate === 90 ? this.currentSize.width : this.currentSize.height,
+			rotate: elementO.rotate
+		};
+		else if (elementO.type === PRINT_ELE_TYPE.QR_CODE) props = { ...elementO.attrs };
+		else if (elementO.type === PRINT_ELE_TYPE.HORIZONTAL_LINE || elementO.type === PRINT_ELE_TYPE.VERTICAL_LINE || elementO.type === PRINT_ELE_TYPE.RECTANGLE) props = {
+			"border-width": styles["border-width"],
+			color: styles["color"]
+		};
+		else if (elementO.type === PRINT_ELE_TYPE.TEXT) props = {
+			"font-size": styles["font-size"],
+			type: elementO.attrs.text.type,
+			label: elementO.attrs.text.label
+		};
+		const data = {
+			class: elementO.classes,
+			style: styles,
+			id: "view_" + elementO.id,
+			ownId: elementO.ownId,
+			"el-width": this.currentSize.width,
+			"el-height": this.currentSize.height,
+			...JSON.parse(JSON.stringify(attrs)),
+			...props
+		};
+		let stageElem;
+		let mrElProps = {
+			id: "view_" + elementO.id,
+			type: elementO.type,
+			internal: elementO.internal,
+			events: elementO.events,
+			left: elementO.left,
+			top: elementO.top,
+			right: elementO.right,
+			bottom: elementO.bottom,
+			zIndex: elementO.zIndex,
+			width: elementO.width,
+			height: elementO.height,
+			rotate: elementO.rotate,
+			minWidth: elementO.minWidth,
+			minHeight: elementO.minHeight,
+			elem: this.elem
+		};
+		if (elementO.type === PRINT_ELE_TYPE.QR_CODE) mrElProps = {
+			...mrElProps,
+			handles: null
+		};
+		else if (elementO.type === PRINT_ELE_TYPE.BAR_CODE) if (elementO.rotate === 90) mrElProps = {
+			...mrElProps,
+			handles: ["ml", "mr"]
+		};
+		else mrElProps = {
+			...mrElProps,
+			handles: ["mt", "mb"]
+		};
+		stageElem = h(MrEl_default, mrElProps, [h(comps[elementO.type] || elementO.type, data)]);
+		return stageElem;
+	}
+};
+//#endregion
+export { StageElv_vue_vue_type_script_lang_default as default };