label-print-design
Version:
操作简单，组件丰富的一站式打印解决方案打印设计器
1 lines • 15.9 kB
Source Map (JSON)
{"version":3,"file":"style-design.vue2.mjs","sources":["../../../../../../src/components/content/toolbar/style-design.vue"],"sourcesContent":["<template>\n <my-scrollbar class=\"my-style-design\" disabledScrollBar :hover-blod=\"false\">\n <font-family :disabled=\"fontDisabledComputed\" />\n \n <font-size :disabled=\"fontDisabledComputed\" />\n \n <div class=\"my-style-divider\" />\n \n <my-style-icon :tips=\"i18n('toolbar.style.blob')\"\n props=\"option.bold\"\n enableProps=\"bold\"\n class=\"icon-zitijiacu iconfont cursor-pointer my-style-item\" />\n <my-style-icon :tips=\"i18n('toolbar.style.italic')\" props=\"option.italic\" enableProps=\"italic\"\n class=\"icon-zitixieti iconfont cursor-pointer my-style-item\" />\n <my-style-icon :tips=\"i18n('toolbar.style.underline')\" props=\"option.underline\" enableProps=\"underline\"\n class=\"icon-zitixiahuaxian iconfont cursor-pointer my-style-item\" />\n <my-style-icon :tips=\"i18n('toolbar.style.lineThrough')\" props=\"option.lineThrough\" enableProps=\"lineThrough\"\n class=\"icon-wenben-shanchuxian iconfont cursor-pointer my-style-item\" />\n \n <my-color-picker\n :modelValue=\"multipleElementGetValue('option.color')\"\n @update:model-value=\"(val:any)=>multipleElementSetValue('option.color', val)\"\n :disabled=\"!hasStyle(multipleElementGetValue('type'), 'color')\">\n <my-icon class=\"icon-zitiyanse iconfont\"\n :size=\"14\"\n style=\"height: 100%\"\n :disabled=\"!hasStyle(multipleElementGetValue('type'), 'color')\" />\n </my-color-picker>\n <my-color-picker\n :modelValue=\"multipleElementGetValue('option.background')\"\n @update:model-value=\"(val:any)=>multipleElementSetValue('option.background', val)\"\n :disabled=\"!hasStyle(multipleElementGetValue('type'), 'background')\">\n <my-icon class=\"icon-bucket iconfont\"\n :size=\"14\"\n style=\"height: 100%\"\n :disabled=\"!hasStyle(multipleElementGetValue('type'), 'background')\" />\n </my-color-picker>\n <div class=\"my-style-divider\" />\n \n <my-style-icon :tips=\"i18n('toolbar.style.textAlignLeft')\"\n props=\"option.textAlign\"\n propsValue=\"start\"\n class=\"icon-zuoduiqi iconfont cursor-pointer my-style-item\"\n enableProps=\"textAlign\" />\n <my-style-icon :tips=\"i18n('toolbar.style.textAlignCenter')\"\n props=\"option.textAlign\"\n propsValue=\"center\"\n class=\"icon-chuizhijuzhong iconfont cursor-pointer my-style-item\"\n enableProps=\"textAlign\" />\n <my-style-icon :tips=\"i18n('toolbar.style.textAlignRight')\"\n props=\"option.textAlign\"\n propsValue=\"end\"\n enableProps=\"textAlign\"\n class=\"icon-youduiqi iconfont cursor-pointer my-style-item\" />\n \n \n <!-- <style-icon tips=\"两端对齐\" :modelValue=\"appStore.currentElement.option.textAlign == 'justify'\"-->\n <!-- @update:model-value=\"flag => {if(flag) appStore.currentElement.option.textAlign = 'justify'}\"-->\n <!-- :enable=\"['Text', 'Table'].includes(appStore.currentElement.type)\">-->\n <!-- <i class=\"icon-caidan iconfont\"/>-->\n <!-- </style-icon>-->\n \n <my-style-icon :tips=\"i18n('toolbar.style.verticalAlignTop')\"\n props=\"option.verticalAlign\"\n propsValue=\"start\"\n enableProps=\"verticalAlign\"\n class=\"icon-shangduiqi iconfont cursor-pointer my-style-item\" />\n <my-style-icon :tips=\"i18n('toolbar.style.verticalAlignCenter')\"\n props=\"option.verticalAlign\"\n propsValue=\"center\"\n enableProps=\"verticalAlign\"\n class=\"icon-shuipingjuzhong iconfont cursor-pointer my-style-item\" />\n <my-style-icon :tips=\"i18n('toolbar.style.verticalAlignBottom')\"\n props=\"option.verticalAlign\"\n propsValue=\"end\"\n enableProps=\"verticalAlign\"\n class=\"icon-xiaduiqi iconfont cursor-pointer my-style-item\" />\n <my-style-icon :tips=\"i18n('toolbar.style.lineBreak')\" marginTop=\"-3px\"\n props=\"option.lineBreak\"\n enableProps=\"lineBreak\"\n class=\"icon-wenbenhuanhang iconfont cursor-pointer my-style-item\" />\n \n <my-style-icon :tips=\"i18n('toolbar.style.borderAll')\"\n props=\"option.borderAll\"\n enableProps=\"borderAll\"\n class=\"icon-jurassic_border-all iconfont cursor-pointer my-style-item\" />\n \n <my-style-icon :tips=\"i18n('toolbar.style.group')\"\n @click=\"group()\"\n :disabled=\"groupDisabledIs\"\n class=\"icon-color-zh iconfont-color cursor-pointer my-style-item\" />\n \n <my-style-icon :tips=\"i18n('toolbar.style.unGroup')\"\n @click=\"ungroup()\"\n :disabled=\"ungroupDisabledIs\"\n class=\"icon-color-qxzh iconfont-color cursor-pointer my-style-item\" />\n \n <tool-icon-popover\n :disabled=\"!hasStyleByTypeList(multipleElementGetValueList('type') as elementType[], 'common')\">\n <template #reference>\n <my-icon>\n <i class=\"icon-color-zydic iconfont-color\" />\n </my-icon>\n \n </template>\n <template #panel>\n <element-align :elementAlignList=\"elementLayerList\" />\n </template>\n \n </tool-icon-popover>\n \n <tool-icon-popover\n :disabled=\"!hasStyleByTypeList(multipleElementGetValueList('type') as elementType[], 'common')\">\n <template #reference>\n <my-icon>\n <i class=\"icon-color-spz iconfont-color\" />\n </my-icon>\n </template>\n <template #panel>\n <element-align :elementAlignList=\"elementAlignList\" />\n </template>\n \n </tool-icon-popover>\n </my-scrollbar>\n\n</template>\n\n<script setup lang=\"ts\">\nimport myColorPicker from '@myprint/design/components/my/color-picker/my-color-picker.vue';\nimport MyStyleIcon from '@myprint/design/components/my/icon';\nimport { hasStyle, hasStyleByTypeList } from '@myprint/design/constants/common';\nimport { useAppStoreHook } from '@myprint/design/stores/app';\nimport {\n alignBottom,\n alignHorizontalCenter,\n alignLeft,\n alignRight,\n alignTop,\n alignVerticalCenter,\n arrangeHorizontalSpacing,\n arrangeVerticalSpacing,\n group,\n ungroup\n} from '@myprint/design/plugins/moveable/moveable';\nimport {\n elementDown,\n elementUp,\n multipleElementGetValue,\n multipleElementGetValueList,\n multipleElementSetValue\n} from '@myprint/design/utils/elementUtil';\nimport { computed, reactive } from 'vue-demi';\nimport ToolIconPopover from '@myprint/design/components/my/icon/tool-icon-popover.vue';\nimport ElementAlign from '@myprint/design/components/content/toolbar/toolbar-style/element-align.vue';\n//@ts-ignore\nimport { DownList, elementType } from '@myprint/design/types/entity';\nimport FontSize from '@myprint/design/components/content/toolbar/toolbar-style/font-size.vue';\nimport FontFamily from '@myprint/design/components/content/toolbar/toolbar-style/font-family.vue';\nimport MyIcon from '@myprint/design/components/my/icon/my-icon.vue';\nimport MyScrollbar from '@myprint/design/components/my/scrollbar/my-scrollbar.vue';\nimport { i18n } from '@myprint/design/locales';\n\nconst elementAlignList = reactive([\n [\n {\n label: i18n('toolbar.style.textAlignLeft'),\n click: alignLeft,\n icon: 'icon-color-spz iconfont-color',\n enable: true\n },\n {\n label: i18n('toolbar.style.alignHorizontalCenter'),\n click: alignHorizontalCenter,\n icon: 'icon-color-spjz iconfont-color',\n enable: true\n }, {\n label: i18n('toolbar.style.textAlignRight'),\n click: alignRight,\n icon: 'icon-color-spy iconfont-color',\n enable: true\n }\n ],\n [\n {\n label: i18n('toolbar.style.alignTop'),\n click: alignTop,\n icon: 'icon-color-czding iconfont-color',\n enable: true\n },\n {\n label: i18n('toolbar.style.alignVerticalCenter'),\n click: alignVerticalCenter,\n icon: 'icon-color-czjz iconfont-color',\n enable: true\n }, {\n label: i18n('toolbar.style.alignBottom'),\n click: alignBottom,\n icon: 'icon-color-czd iconfont-color',\n enable: true\n }\n ], [\n {\n label: i18n('toolbar.style.arrangeHorizontalSpacing'),\n click: arrangeHorizontalSpacing,\n icon: 'icon-color-spdjfb iconfont-color',\n enable: true\n },\n {\n label: i18n('toolbar.style.arrangeVerticalSpacing'),\n click: arrangeVerticalSpacing,\n icon: 'icon-color-czdjfb iconfont-color',\n enable: true\n }\n ]\n // , [\n // {\n // label: \"父元水平直平均分布\",\n // click: alignLeft,\n // icon: \"icon-color-fyzsp iconfont-color\",\n // enable: true\n // },\n // {\n // label: \"父元素垂直平均分布\",\n // click: alignHorizontalCenter,\n // icon: \"icon-color-fyscz iconfont-color\",\n // enable: true\n // }\n // ]\n] as DownList[][]);\n\nconst elementLayerList = reactive([\n [\n {\n label: i18n('toolbar.layer.top'),\n click: () => {\n elementUp(appStore.currentElement, 999999);\n },\n icon: 'icon-color-zydc iconfont-color',\n enable: true\n },\n {\n label: i18n('toolbar.layer.up.one'),\n click: () => {\n elementUp(appStore.currentElement, 1);\n },\n icon: 'icon-color-syyc iconfont-color',\n enable: true\n },\n {\n label: i18n('toolbar.layer.down.one'),\n click: () => {\n elementDown(appStore.currentElement, 1);\n },\n icon: 'icon-color-xyyc iconfont-color',\n enable: true\n },\n {\n label: i18n('toolbar.layer.bottom'),\n click: () => {\n elementDown(appStore.currentElement, 999999);\n },\n icon: 'icon-color-zydic iconfont-color',\n enable: true\n }\n ]\n] as DownList[][]);\n\nconst appStore = useAppStoreHook();\n\nconst groupDisabledIs = computed(() => {\n if (appStore.currentElement.length > 1) {\n const groupIs = multipleElementGetValue('groupIs');\n return groupIs || groupIs == false;\n } else {\n return true;\n }\n});\n\nconst ungroupDisabledIs = computed(() => {\n if (appStore.currentElement.length > 1) {\n for (let currentElementElement of appStore.currentElement) {\n if (currentElementElement.groupIs) {\n return false;\n }\n }\n return true;\n } else {\n return true;\n }\n});\n\nconst fontDisabledComputed = computed(() => {\n if (appStore.currentElement.length == 0) {\n return true;\n }\n for (let currentElementElement of appStore.currentElement) {\n if (!hasStyle(currentElementElement.type, 'fontFamily' as any)) {\n return true;\n }\n }\n return false;\n});\n\n</script>\n"],"names":[],"mappings":"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"}