diff --git a/build/utils/handle-merge-code.js b/build/utils/handle-merge-code.js index 6b58e1c8e62..467f6dc7468 100644 --- a/build/utils/handle-merge-code.js +++ b/build/utils/handle-merge-code.js @@ -38,9 +38,9 @@ ${tsToJs(parts.script)} mergedParts.jsCode += isVue ? `` : `` + .split('\n') + .map(line => (line.length ? ` ${line}` : line)) + .join('\n')}\n` } if (parts.script) { if (parts.template) { diff --git a/src/back-top/src/BackTop.tsx b/src/back-top/src/BackTop.tsx index 846a5a59c03..5bc0476d774 100644 --- a/src/back-top/src/BackTop.tsx +++ b/src/back-top/src/BackTop.tsx @@ -291,10 +291,10 @@ export default defineComponent({ 'div', mergeProps(this.$attrs, { class: [ - `${mergedClsPrefix}-back-top`, - this.themeClass, - this.transitionDisabled - && `${mergedClsPrefix}-back-top--transition-disabled` + `${mergedClsPrefix}-back-top`, + this.themeClass, + this.transitionDisabled + && `${mergedClsPrefix}-back-top--transition-disabled` ], style: [this.style, this.cssVars], onClick: this.handleClick diff --git a/src/badge/src/Badge.tsx b/src/badge/src/Badge.tsx index f94ab4bd49a..1a30ef4a6af 100644 --- a/src/badge/src/Badge.tsx +++ b/src/badge/src/Badge.tsx @@ -74,9 +74,9 @@ export default defineComponent({ return ( props.show && (props.dot - || (props.value !== undefined - && !(!props.showZero && Number(props.value) <= 0)) - || !isSlotEmpty(slots.value)) + || (props.value !== undefined + && !(!props.showZero && Number(props.value) <= 0)) + || !isSlotEmpty(slots.value)) ) }) onMounted(() => { diff --git a/src/cascader/src/CascaderOption.tsx b/src/cascader/src/CascaderOption.tsx index b9ba434e87b..3a07bb37955 100644 --- a/src/cascader/src/CascaderOption.tsx +++ b/src/cascader/src/CascaderOption.tsx @@ -248,7 +248,7 @@ export default defineComponent({ }} ) : this.checkStrategy === 'child' - && !(this.multiple && this.cascade) ? ( + && !(this.multiple && this.cascade) ? ( {{ default: () => @@ -282,7 +282,7 @@ export default defineComponent({ `${mergedClsPrefix}-cascader-option`, this.keyboardPending || (this.hoverPending - && `${mergedClsPrefix}-cascader-option--pending`), + && `${mergedClsPrefix}-cascader-option--pending`), this.disabled && `${mergedClsPrefix}-cascader-option--disabled`, this.showCheckbox && `${mergedClsPrefix}-cascader-option--show-prefix` ]} diff --git a/src/cascader/src/interface.ts b/src/cascader/src/interface.ts index b5274102033..3b2021672a7 100644 --- a/src/cascader/src/interface.ts +++ b/src/cascader/src/interface.ts @@ -32,19 +32,19 @@ export type OnLoad = (option: CascaderOption) => Promise export type OnUpdateValue = ( value: string & - number & - string[] & - number[] & - Array & - (string | null) & - (number | null) & - (string[] | null) & - (number[] | null) & - (Array | null), + number & + string[] & + number[] & + Array & + (string | null) & + (number | null) & + (string[] | null) & + (number[] | null) & + (Array | null), option: null & - CascaderOption & - CascaderOption[] & - Array, + CascaderOption & + CascaderOption[] & + Array, path: null & CascaderOption[] & Array ) => void diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md index 0607ac4aad2..f84a6fcc5fd 100644 --- a/src/data-table/demos/enUS/index.demo-entry.md +++ b/src/data-table/demos/enUS/index.demo-entry.md @@ -192,20 +192,20 @@ interface DataTableFilterState { ```ts type DataTableCreateSummary = (pageData: RowData[]) => -| Array<{ - [columnKey: string]: { - value?: VNodeChild - colSpan?: number - rowSpan?: number + | Array<{ + [columnKey: string]: { + value?: VNodeChild + colSpan?: number + rowSpan?: number + } + }> + | { + [columnKey: string]: { + value?: VNodeChild + colSpan?: number + rowSpan?: number + } } -}> -| { - [columnKey: string]: { - value?: VNodeChild - colSpan?: number - rowSpan?: number - } -} ``` ### DataTable Methods diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md index 391fbab32d5..dfdfea046f5 100644 --- a/src/data-table/demos/zhCN/index.demo-entry.md +++ b/src/data-table/demos/zhCN/index.demo-entry.md @@ -203,20 +203,20 @@ interface DataTableFilterState { ```ts type DataTableCreateSummary = (pageData: RowData[]) => -| Array<{ - [columnKey: string]: { - value?: VNodeChild - colSpan?: number - rowSpan?: number + | Array<{ + [columnKey: string]: { + value?: VNodeChild + colSpan?: number + rowSpan?: number + } + }> + | { + [columnKey: string]: { + value?: VNodeChild + colSpan?: number + rowSpan?: number + } } -}> -| { - [columnKey: string]: { - value?: VNodeChild - colSpan?: number - rowSpan?: number - } -} ``` ### DataTable Methods diff --git a/src/data-table/src/HeaderButton/FilterMenu.tsx b/src/data-table/src/HeaderButton/FilterMenu.tsx index b85925bae3f..8f5410be8da 100644 --- a/src/data-table/src/HeaderButton/FilterMenu.tsx +++ b/src/data-table/src/HeaderButton/FilterMenu.tsx @@ -78,9 +78,9 @@ export default defineComponent({ if (shouldUseArrayInSingleMode(props.column)) { return ( (Array.isArray(temporalValue) - && temporalValue.length - && temporalValue[0]) - || null + && temporalValue.length + && temporalValue[0]) + || null ) } if (!Array.isArray(temporalValue)) diff --git a/src/data-table/src/TableParts/Header.tsx b/src/data-table/src/TableParts/Header.tsx index 7f5ed582ca4..fe3859410b5 100644 --- a/src/data-table/src/TableParts/Header.tsx +++ b/src/data-table/src/TableParts/Header.tsx @@ -323,8 +323,8 @@ export default defineComponent({ `${mergedClsPrefix}-data-table-th`, (leftFixed || rightFixed) && `${mergedClsPrefix}-data-table-th--fixed-${ - leftFixed ? 'left' : 'right' - }`, + leftFixed ? 'left' : 'right' + }`, { [`${mergedClsPrefix}-data-table-th--sorting`]: isColumnSorting( column, diff --git a/src/data-table/src/use-check.ts b/src/data-table/src/use-check.ts index 7455c5c9360..3586dfbe8ac 100644 --- a/src/data-table/src/use-check.ts +++ b/src/data-table/src/use-check.ts @@ -65,11 +65,11 @@ export function useCheck( const { value: mergedInderminateRowKeySet } = mergedInderminateRowKeySetRef return ( (countOfCurrentPageCheckedRowsRef.value > 0 - && countOfCurrentPageCheckedRowsRef.value - < length - countOfCurrentPageDisabledRowsRef.value) - || paginatedDataRef.value.some(rowData => - mergedInderminateRowKeySet.has(rowData.key) - ) + && countOfCurrentPageCheckedRowsRef.value + < length - countOfCurrentPageDisabledRowsRef.value) + || paginatedDataRef.value.some(rowData => + mergedInderminateRowKeySet.has(rowData.key) + ) ) }) const allRowsCheckedRef = computed(() => { diff --git a/src/data-table/src/use-sorter.ts b/src/data-table/src/use-sorter.ts index 8dc165c7330..446cf75a89f 100644 --- a/src/data-table/src/use-sorter.ts +++ b/src/data-table/src/use-sorter.ts @@ -31,8 +31,8 @@ function getSortFunction( if ( columnKey && (sorter === undefined - || sorter === 'default' - || (typeof sorter === 'object' && sorter.compare === 'default')) + || sorter === 'default' + || (typeof sorter === 'object' && sorter.compare === 'default')) ) { return getDefaultSorterFn(columnKey) } @@ -111,8 +111,8 @@ export function useSorter( column.type !== 'selection' && column.sorter !== undefined && (column.sortOrder === 'ascend' - || column.sortOrder === 'descend' - || column.sortOrder === false) + || column.sortOrder === 'descend' + || column.sortOrder === false) ) // if multiple columns are controlled sortable, then we need to find columns with active sortOrder const columnToSort: TableBaseColumn[] | undefined = ( diff --git a/src/data-table/src/utils.ts b/src/data-table/src/utils.ts index 1dee8c5f680..b64b838e453 100644 --- a/src/data-table/src/utils.ts +++ b/src/data-table/src/utils.ts @@ -128,7 +128,7 @@ export function shouldUseArrayInSingleMode(column: TableBaseColumn): boolean { return ( column.filterOptionValues !== undefined || (column.filterOptionValue === undefined - && column.defaultFilterOptionValues !== undefined) + && column.defaultFilterOptionValues !== undefined) ) } @@ -207,10 +207,10 @@ function formatCsvCell(value: unknown): string { export function generateCsv(columns: TableColumn[], data: RowData[]): string { const exportableColumns = columns.filter( - (column) => - column.type !== 'expand' && - column.type !== 'selection' && - column.allowExport !== false + column => + column.type !== 'expand' + && column.type !== 'selection' + && column.allowExport !== false ) const header = exportableColumns.map((col: any) => col.title).join(',') const rows = data.map((row) => { diff --git a/src/date-picker/src/DatePicker.tsx b/src/date-picker/src/DatePicker.tsx index 16e24cf9011..c9c0d54a235 100644 --- a/src/date-picker/src/DatePicker.tsx +++ b/src/date-picker/src/DatePicker.tsx @@ -990,8 +990,8 @@ export default defineComponent({ ) : type === 'month' || type === 'year' || type === 'quarter' ? ( ) : type === 'monthrange' - || type === 'yearrange' - || type === 'quarterrange' ? ( + || type === 'yearrange' + || type === 'quarterrange' ? ( ) : ( void export type OnConfirm = OnUpdateValue @@ -58,13 +58,13 @@ export type OnConfirmImpl = OnUpdateValueImpl export type OnUpdateFormattedValue = ( value: string & - (string | null) & - [string, string] & - ([string, string] | null), + (string | null) & + [string, string] & + ([string, string] | null), timestampValue: number & - (number | null) & - [number, number] & - ([number, number] | null) + (number | null) & + [number, number] & + ([number, number] | null) ) => void export type OnUpdateFormattedValueImpl = ( @@ -79,9 +79,9 @@ export type OnUpdateValueImpl = ( export type OnPanelUpdateValue = ( value: number & - (number | null) & - [number, number] & - ([number, number] | null), + (number | null) & + [number, number] & + ([number, number] | null), doUpdate: boolean ) => void diff --git a/src/dialog/src/Dialog.tsx b/src/dialog/src/Dialog.tsx index bd57273f79f..4a2d657e18b 100644 --- a/src/dialog/src/Dialog.tsx +++ b/src/dialog/src/Dialog.tsx @@ -266,8 +266,8 @@ export const NDialog = defineComponent({ {closable ? resolveWrappedSlot(this.$slots.close, (node) => { const classNames = [ - `${mergedClsPrefix}-dialog__close`, - this.rtlEnabled && `${mergedClsPrefix}-dialog--rtl` + `${mergedClsPrefix}-dialog__close`, + this.rtlEnabled && `${mergedClsPrefix}-dialog--rtl` ] return node ? (
{node}
diff --git a/src/drawer/src/DrawerBodyWrapper.tsx b/src/drawer/src/DrawerBodyWrapper.tsx index 6d857e6e71f..f466eae4fd7 100644 --- a/src/drawer/src/DrawerBodyWrapper.tsx +++ b/src/drawer/src/DrawerBodyWrapper.tsx @@ -272,26 +272,26 @@ export default defineComponent({ ref: 'bodyRef', 'aria-modal': 'true', class: [ - `${mergedClsPrefix}-drawer`, - this.rtlEnabled - && `${mergedClsPrefix}-drawer--rtl`, - `${mergedClsPrefix}-drawer--${this.placement}-placement`, - /** - * When the mouse is pressed to resize the drawer, - * disable text selection - */ - this.isDragging - && `${mergedClsPrefix}-drawer--unselectable`, - this.nativeScrollbar - && `${mergedClsPrefix}-drawer--native-scrollbar` + `${mergedClsPrefix}-drawer`, + this.rtlEnabled + && `${mergedClsPrefix}-drawer--rtl`, + `${mergedClsPrefix}-drawer--${this.placement}-placement`, + /** + * When the mouse is pressed to resize the drawer, + * disable text selection + */ + this.isDragging + && `${mergedClsPrefix}-drawer--unselectable`, + this.nativeScrollbar + && `${mergedClsPrefix}-drawer--native-scrollbar` ] }), [ this.resizable ? (
{ return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${ - labelTextAlignRef.value?.[0] || '' - }` + labelTextAlignRef.value?.[0] || '' + }` }), cssVarsRef, props diff --git a/src/input/src/Input.tsx b/src/input/src/Input.tsx index fe1f59ac917..78a5252a833 100644 --- a/src/input/src/Input.tsx +++ b/src/input/src/Input.tsx @@ -257,8 +257,8 @@ export default defineComponent({ return ( !isComposing && (isEmptyInputValue(mergedValue) - || (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[0]))) - && mergedPlaceholder[0] + || (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[0]))) + && mergedPlaceholder[0] ) }) const showPlaceholder2Ref = computed(() => { @@ -269,7 +269,7 @@ export default defineComponent({ !isComposing && mergedPlaceholder[1] && (isEmptyInputValue(mergedValue) - || (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[1]))) + || (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[1]))) ) }) // focus @@ -575,8 +575,8 @@ export default defineComponent({ !( e.relatedTarget !== null && (e.relatedTarget === inputElRef.value - || e.relatedTarget === inputEl2Ref.value - || e.relatedTarget === textareaElRef.value) + || e.relatedTarget === inputEl2Ref.value + || e.relatedTarget === textareaElRef.value) ) ) { activatedRef.value = false @@ -617,9 +617,9 @@ export default defineComponent({ if ( e.relatedTarget !== null && (e.relatedTarget === inputElRef.value - || e.relatedTarget === inputEl2Ref.value - || e.relatedTarget === textareaElRef.value - || e.relatedTarget === wrapperElRef.value) + || e.relatedTarget === inputEl2Ref.value + || e.relatedTarget === textareaElRef.value + || e.relatedTarget === wrapperElRef.value) ) { /** * activeElement transfer inside the input, do nothing diff --git a/src/layout/src/interface.ts b/src/layout/src/interface.ts index 11fc86c8d7d..66a19dbd0f6 100644 --- a/src/layout/src/interface.ts +++ b/src/layout/src/interface.ts @@ -13,7 +13,7 @@ export const positionProp = { export interface LayoutInst { scrollTo: ((options: ScrollToOptions) => void) & - ((x: number, y: number) => void) + ((x: number, y: number) => void) } export type LayoutSiderInst = LayoutInst diff --git a/src/menu/src/Menu.tsx b/src/menu/src/Menu.tsx index c67de05c8f1..18edeee3806 100644 --- a/src/menu/src/Menu.tsx +++ b/src/menu/src/Menu.tsx @@ -228,10 +228,10 @@ export default defineComponent({ uncontrolledExpandedKeysRef.value = props.defaultExpandAll ? treeMateRef.value.getNonLeafKeys() : props.defaultExpandedNames - || props.defaultExpandedKeys - || treeMateRef.value.getPath(mergedValueRef.value, { - includeSelf: false - }).keyPath + || props.defaultExpandedKeys + || treeMateRef.value.getPath(mergedValueRef.value, { + includeSelf: false + }).keyPath } if (watchProps?.includes('defaultExpandedKeys')) { watchEffect(initUncontrolledExpandedKeys) diff --git a/src/modal/src/BodyWrapper.tsx b/src/modal/src/BodyWrapper.tsx index 5d190b21e8d..e5fdae7b755 100644 --- a/src/modal/src/BodyWrapper.tsx +++ b/src/modal/src/BodyWrapper.tsx @@ -256,12 +256,12 @@ export default defineComponent({ } return withDirectives( (this.preset === 'confirm' - || this.preset === 'dialog' ? ( + || this.preset === 'dialog' ? ( mergedPageCount - || disabled) - && `${mergedClsPrefix}-pagination-item--disabled` + || mergedPage > mergedPageCount + || disabled) + && `${mergedClsPrefix}-pagination-item--disabled` ]} onClick={handleBackwardClick} > @@ -765,10 +765,10 @@ export default defineComponent({ && `${mergedClsPrefix}-pagination-item--active`, type !== 'page' && ((type === 'fast-backward' - && this.showFastBackwardMenu) - || (type === 'fast-forward' - && this.showFastForwardMenu)) - && `${mergedClsPrefix}-pagination-item--hover`, + && this.showFastBackwardMenu) + || (type === 'fast-forward' + && this.showFastForwardMenu)) + && `${mergedClsPrefix}-pagination-item--hover`, disabled && `${mergedClsPrefix}-pagination-item--disabled`, type === 'page' diff --git a/src/popover/src/PopoverBody.tsx b/src/popover/src/PopoverBody.tsx index 2b4b6846269..f7d6faeeb6d 100644 --- a/src/popover/src/PopoverBody.tsx +++ b/src/popover/src/PopoverBody.tsx @@ -279,10 +279,10 @@ export default defineComponent({ function handleClickOutside(e: MouseEvent): void { if ( (props.trigger === 'click' - && !getTriggerElement().contains( - getPreciseEventTarget(e) as Node | null - )) - || props.onClickoutside + && !getTriggerElement().contains( + getPreciseEventTarget(e) as Node | null + )) + || props.onClickoutside ) { NPopover.handleClickOutside(e) } @@ -373,8 +373,8 @@ export default defineComponent({ hasHeaderOrFooter ? undefined : `${mergedClsPrefix}-popover__content ${ - props.contentClass ?? '' - }` + props.contentClass ?? '' + }` } contentStyle={hasHeaderOrFooter ? undefined : props.contentStyle} > diff --git a/src/progress/src/MultipleCircle.tsx b/src/progress/src/MultipleCircle.tsx index 2ba49b948a9..377d7c33639 100644 --- a/src/progress/src/MultipleCircle.tsx +++ b/src/progress/src/MultipleCircle.tsx @@ -59,9 +59,9 @@ export default defineComponent({ `${ ((Math.PI * v) / 100) * (props.viewBoxWidth / 2 - - (props.strokeWidth / 2) * (1 + 2 * i) - - props.circleGap * i) - * 2 + - (props.strokeWidth / 2) * (1 + 2 * i) + - props.circleGap * i) + * 2 }, ${props.viewBoxWidth * 8}` ) return strokeDasharrays diff --git a/src/select/src/interface.ts b/src/select/src/interface.ts index 8095da23ef1..508c33efa68 100644 --- a/src/select/src/interface.ts +++ b/src/select/src/interface.ts @@ -41,15 +41,15 @@ export type ValueAtom = string | number export type Value = ValueAtom | string[] | number[] | ValueAtom[] export type OnUpdateValue = ( value: string & - number & - ValueAtom & - string[] & - number[] & - ValueAtom[] & - (ValueAtom | null) & - (string[] | null) & - (number[] | null) & - (ValueAtom[] | null), + number & + ValueAtom & + string[] & + number[] & + ValueAtom[] & + (ValueAtom | null) & + (string[] | null) & + (number[] | null) & + (ValueAtom[] | null), option: SelectBaseOption & null & SelectBaseOption[] ) => void export type OnUpdateValueImpl = ( diff --git a/src/tabs/src/Tabs.tsx b/src/tabs/src/Tabs.tsx index 2d0d2567255..046878a7dc4 100644 --- a/src/tabs/src/Tabs.tsx +++ b/src/tabs/src/Tabs.tsx @@ -849,9 +849,9 @@ export default defineComponent({ internalLeftPadded={ index !== 0 && (!mergedJustifyContent - || mergedJustifyContent === 'center' - || mergedJustifyContent === 'start' - || mergedJustifyContent === 'end') + || mergedJustifyContent === 'center' + || mergedJustifyContent === 'start' + || mergedJustifyContent === 'end') } > {tabPaneVNode.children @@ -1038,7 +1038,7 @@ export default defineComponent({
{showPane && (this.animated - && (resolvedPlacement === 'top' || resolvedPlacement === 'bottom') ? ( + && (resolvedPlacement === 'top' || resolvedPlacement === 'bottom') ? (
{!props.contentIndented && (slots.header - || props.title - || slots['header-extra'] - || props.titleExtra - || slots.avatar) ? ( + || props.title + || slots['header-extra'] + || props.titleExtra + || slots.avatar) ? (
{slots.avatar ? (
@@ -117,8 +117,8 @@ export default defineComponent({ {slots.description || props.description ? (
@@ -154,8 +154,8 @@ export default defineComponent({ {slots.description || props.description ? (
diff --git a/src/tree-select/src/interface.ts b/src/tree-select/src/interface.ts index 41bd69b1a16..77099978c61 100644 --- a/src/tree-select/src/interface.ts +++ b/src/tree-select/src/interface.ts @@ -15,16 +15,16 @@ export type TreeSelectTmNode = TreeNode export type OnUpdateValue = ( value: string & - number & - (string | number) & - string[] & - number[] & - Array & - null, + number & + (string | number) & + string[] & + number[] & + Array & + null, option: TreeSelectOption & - null & - TreeSelectOption[] & - Array, + null & + TreeSelectOption[] & + Array, meta: | { node: TreeSelectOption diff --git a/src/tree/src/Tree.tsx b/src/tree/src/Tree.tsx index 97e6da420e7..f7591cafcbd 100644 --- a/src/tree/src/Tree.tsx +++ b/src/tree/src/Tree.tsx @@ -1403,7 +1403,7 @@ export default defineComponent({ if ( draggingNode.contains(finalDropNode) || (finalDropPosition === 'inside' - && draggingNode.parent?.key === finalDropNode.key) + && draggingNode.parent?.key === finalDropNode.key) ) { if ( draggingNode.key === droppingMouseNode.key diff --git a/src/tree/src/TreeNode.tsx b/src/tree/src/TreeNode.tsx index 31329756163..a217d70aafc 100644 --- a/src/tree/src/TreeNode.tsx +++ b/src/tree/src/TreeNode.tsx @@ -134,8 +134,8 @@ const TreeNode = defineComponent({ () => NTree.checkableRef.value && (NTree.cascadeRef.value - || NTree.mergedCheckStrategyRef.value !== 'child' - || props.tmNode.isLeaf) + || NTree.mergedCheckStrategyRef.value !== 'child' + || props.tmNode.isLeaf) ) const checkedRef = useMemo(() => diff --git a/src/typography/src/create-header.ts b/src/typography/src/create-header.ts index 921611adb28..9f4e52897e7 100644 --- a/src/typography/src/create-header.ts +++ b/src/typography/src/create-header.ts @@ -61,10 +61,10 @@ export default (level: '1' | '2' | '3' | '4' | '5' | '6') => }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( - `h${level}`, - computed(() => props.type[0]), - cssVarsRef, - props + `h${level}`, + computed(() => props.type[0]), + cssVarsRef, + props ) : undefined return { diff --git a/src/watermark/src/Watermark.tsx b/src/watermark/src/Watermark.tsx index 9d49352eed7..fc31b26df4d 100644 --- a/src/watermark/src/Watermark.tsx +++ b/src/watermark/src/Watermark.tsx @@ -181,13 +181,13 @@ export default defineComponent({ canvasOffsetLeft, canvasOffsetTop, (props.imageWidth - || (imageHeight - ? (img.width * imageHeight) / img.height - : img.width)) * ratio, + || (imageHeight + ? (img.width * imageHeight) / img.height + : img.width)) * ratio, (props.imageHeight - || (imageWidth - ? (img.height * imageWidth) / img.width - : img.height)) * ratio + || (imageWidth + ? (img.height * imageWidth) / img.width + : img.height)) * ratio ) base64UrlRef.value = canvas.toDataURL() } @@ -269,10 +269,10 @@ export default defineComponent({ : '' : props.cross ? `calc(${rotatedImageOffset} + ${ - props.width / 2 - }px) calc(${rotatedImageOffset} + ${ - props.height / 2 - }px), ${rotatedImageOffset} ${rotatedImageOffset}` + props.width / 2 + }px) calc(${rotatedImageOffset} + ${ + props.height / 2 + }px), ${rotatedImageOffset} ${rotatedImageOffset}` : rotatedImageOffset, backgroundImage: props.cross ? `url(${base64UrlRef.value}), url(${base64UrlRef.value})`