{"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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"}