| 1 |
import { ref } from 'vue' |
| 2 |
import { |
| 3 |
parseDimension, |
| 4 |
resolveBorderStyle, |
| 5 |
normalizeAlignment, |
| 6 |
type BorderStyle, |
| 7 |
type Alignment, |
| 8 |
} from '@/utils/styleUtils.ts' |
| 9 |
|
| 10 |
interface GeneralSectionDefaults { |
| 11 |
formBackground?: string |
| 12 |
formBorderColor?: string |
| 13 |
formBorderWidth?: string |
| 14 |
formBorderStyle?: BorderStyle |
| 15 |
formPaddingLeftRight?: string |
| 16 |
formPaddingTopBottom?: string |
| 17 |
verticalSpacing?: string |
| 18 |
horizontalSpacing?: string |
| 19 |
alignment?: string |
| 20 |
} |
| 21 |
|
| 22 |
export function useGeneralStyleSection(defaults: GeneralSectionDefaults = {}) { |
| 23 |
const formBorderWidthDefault = parseDimension(defaults.formBorderWidth || '1px') |
| 24 |
const formPaddingLeftRightDefault = parseDimension(defaults.formPaddingLeftRight || '24px') |
| 25 |
const formPaddingTopBottomDefault = parseDimension(defaults.formPaddingTopBottom || '24px') |
| 26 |
const verticalSpacingDefault = parseDimension(defaults.verticalSpacing || '16px') |
| 27 |
const horizontalSpacingDefault = parseDimension(defaults.horizontalSpacing || '12px') |
| 28 |
|
| 29 |
const formBackground = ref(defaults.formBackground || 'transparent') |
| 30 |
const formBorderColor = ref(defaults.formBorderColor || '') |
| 31 |
const formBorderStyle = ref<BorderStyle>(resolveBorderStyle(defaults.formBorderStyle)) |
| 32 |
const formBorderWidthValue = ref(Number(formBorderWidthDefault.value ?? 1)) |
| 33 |
const formBorderWidthUnit = ref(formBorderWidthDefault.unit) |
| 34 |
const formPaddingLeftRightValue = ref(Number(formPaddingLeftRightDefault.value ?? 24)) |
| 35 |
const formPaddingLeftRightUnit = ref(formPaddingLeftRightDefault.unit) |
| 36 |
const formPaddingTopBottomValue = ref(Number(formPaddingTopBottomDefault.value ?? 24)) |
| 37 |
const formPaddingTopBottomUnit = ref(formPaddingTopBottomDefault.unit) |
| 38 |
const verticalSpacingValue = ref(Number(verticalSpacingDefault.value ?? 16)) |
| 39 |
const verticalSpacingUnit = ref(verticalSpacingDefault.unit) |
| 40 |
const horizontalSpacingValue = ref(Number(horizontalSpacingDefault.value ?? 12)) |
| 41 |
const horizontalSpacingUnit = ref(horizontalSpacingDefault.unit) |
| 42 |
const formAlignment = ref<Alignment>(normalizeAlignment(defaults.alignment)) |
| 43 |
|
| 44 |
const syncGeneralSection = (general?: GeneralSectionDefaults) => { |
| 45 |
formBackground.value = general?.formBackground || defaults.formBackground || 'transparent' |
| 46 |
formBorderColor.value = general?.formBorderColor || defaults.formBorderColor || '' |
| 47 |
formBorderStyle.value = resolveBorderStyle( |
| 48 |
general?.formBorderStyle, |
| 49 |
resolveBorderStyle(defaults.formBorderStyle), |
| 50 |
) |
| 51 |
|
| 52 |
const borderWidth = parseDimension( |
| 53 |
general?.formBorderWidth || defaults.formBorderWidth || '1px', |
| 54 |
) |
| 55 |
formBorderWidthValue.value = borderWidth.value !== '' ? Number(borderWidth.value) : null |
| 56 |
formBorderWidthUnit.value = borderWidth.unit |
| 57 |
|
| 58 |
const formPaddingLeftRight = parseDimension( |
| 59 |
general?.formPaddingLeftRight || defaults.formPaddingLeftRight || '24px', |
| 60 |
) |
| 61 |
formPaddingLeftRightValue.value = |
| 62 |
formPaddingLeftRight.value !== '' ? Number(formPaddingLeftRight.value) : null |
| 63 |
formPaddingLeftRightUnit.value = formPaddingLeftRight.unit |
| 64 |
|
| 65 |
const formPaddingTopBottom = parseDimension( |
| 66 |
general?.formPaddingTopBottom || defaults.formPaddingTopBottom || '24px', |
| 67 |
) |
| 68 |
formPaddingTopBottomValue.value = |
| 69 |
formPaddingTopBottom.value !== '' ? Number(formPaddingTopBottom.value) : null |
| 70 |
formPaddingTopBottomUnit.value = formPaddingTopBottom.unit |
| 71 |
|
| 72 |
const verticalSpacing = parseDimension( |
| 73 |
general?.verticalSpacing || defaults.verticalSpacing || '16px', |
| 74 |
) |
| 75 |
verticalSpacingValue.value = verticalSpacing.value !== '' ? Number(verticalSpacing.value) : null |
| 76 |
verticalSpacingUnit.value = verticalSpacing.unit |
| 77 |
|
| 78 |
const horizontalSpacing = parseDimension( |
| 79 |
general?.horizontalSpacing || defaults.horizontalSpacing || '12px', |
| 80 |
) |
| 81 |
horizontalSpacingValue.value = |
| 82 |
horizontalSpacing.value !== '' ? Number(horizontalSpacing.value) : null |
| 83 |
horizontalSpacingUnit.value = horizontalSpacing.unit |
| 84 |
|
| 85 |
formAlignment.value = normalizeAlignment(general?.alignment || defaults.alignment) |
| 86 |
} |
| 87 |
|
| 88 |
return { |
| 89 |
formBackground, |
| 90 |
formBorderColor, |
| 91 |
formBorderStyle, |
| 92 |
formBorderWidthValue, |
| 93 |
formBorderWidthUnit, |
| 94 |
formPaddingLeftRightValue, |
| 95 |
formPaddingLeftRightUnit, |
| 96 |
formPaddingTopBottomValue, |
| 97 |
formPaddingTopBottomUnit, |
| 98 |
verticalSpacingValue, |
| 99 |
verticalSpacingUnit, |
| 100 |
horizontalSpacingValue, |
| 101 |
horizontalSpacingUnit, |
| 102 |
formAlignment, |
| 103 |
syncGeneralSection, |
| 104 |
} |
| 105 |
} |
| 106 |
|
