# ivyforms/1.1/frontend/src/composables/useGeneralStyleSection.ts

The Innovative Form Builder – IvyForms, version 1.1. 106 lines.

- Page: https://pluginprobe.com/plugins/ivyforms/1.1/code/frontend/src/composables/useGeneralStyleSection.ts
- Raw: https://pluginprobe.com/plugins/ivyforms/1.1/raw/frontend/src/composables/useGeneralStyleSection.ts
- Modified: 2026-05-06T08:31:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ivyforms/1.1/code/frontend/src/composables/useGeneralStyleSection.ts#L10-L20`.

```typescript
import { ref } from 'vue'
import {
  parseDimension,
  resolveBorderStyle,
  normalizeAlignment,
  type BorderStyle,
  type Alignment,
} from '@/utils/styleUtils.ts'

interface GeneralSectionDefaults {
  formBackground?: string
  formBorderColor?: string
  formBorderWidth?: string
  formBorderStyle?: BorderStyle
  formPaddingLeftRight?: string
  formPaddingTopBottom?: string
  verticalSpacing?: string
  horizontalSpacing?: string
  alignment?: string
}

export function useGeneralStyleSection(defaults: GeneralSectionDefaults = {}) {
  const formBorderWidthDefault = parseDimension(defaults.formBorderWidth || '1px')
  const formPaddingLeftRightDefault = parseDimension(defaults.formPaddingLeftRight || '24px')
  const formPaddingTopBottomDefault = parseDimension(defaults.formPaddingTopBottom || '24px')
  const verticalSpacingDefault = parseDimension(defaults.verticalSpacing || '16px')
  const horizontalSpacingDefault = parseDimension(defaults.horizontalSpacing || '12px')

  const formBackground = ref(defaults.formBackground || 'transparent')
  const formBorderColor = ref(defaults.formBorderColor || '')
  const formBorderStyle = ref<BorderStyle>(resolveBorderStyle(defaults.formBorderStyle))
  const formBorderWidthValue = ref(Number(formBorderWidthDefault.value ?? 1))
  const formBorderWidthUnit = ref(formBorderWidthDefault.unit)
  const formPaddingLeftRightValue = ref(Number(formPaddingLeftRightDefault.value ?? 24))
  const formPaddingLeftRightUnit = ref(formPaddingLeftRightDefault.unit)
  const formPaddingTopBottomValue = ref(Number(formPaddingTopBottomDefault.value ?? 24))
  const formPaddingTopBottomUnit = ref(formPaddingTopBottomDefault.unit)
  const verticalSpacingValue = ref(Number(verticalSpacingDefault.value ?? 16))
  const verticalSpacingUnit = ref(verticalSpacingDefault.unit)
  const horizontalSpacingValue = ref(Number(horizontalSpacingDefault.value ?? 12))
  const horizontalSpacingUnit = ref(horizontalSpacingDefault.unit)
  const formAlignment = ref<Alignment>(normalizeAlignment(defaults.alignment))

  const syncGeneralSection = (general?: GeneralSectionDefaults) => {
    formBackground.value = general?.formBackground || defaults.formBackground || 'transparent'
    formBorderColor.value = general?.formBorderColor || defaults.formBorderColor || ''
    formBorderStyle.value = resolveBorderStyle(
      general?.formBorderStyle,
      resolveBorderStyle(defaults.formBorderStyle),
    )

    const borderWidth = parseDimension(
      general?.formBorderWidth || defaults.formBorderWidth || '1px',
    )
    formBorderWidthValue.value = borderWidth.value !== '' ? Number(borderWidth.value) : null
    formBorderWidthUnit.value = borderWidth.unit

    const formPaddingLeftRight = parseDimension(
      general?.formPaddingLeftRight || defaults.formPaddingLeftRight || '24px',
    )
    formPaddingLeftRightValue.value =
      formPaddingLeftRight.value !== '' ? Number(formPaddingLeftRight.value) : null
    formPaddingLeftRightUnit.value = formPaddingLeftRight.unit

    const formPaddingTopBottom = parseDimension(
      general?.formPaddingTopBottom || defaults.formPaddingTopBottom || '24px',
    )
    formPaddingTopBottomValue.value =
      formPaddingTopBottom.value !== '' ? Number(formPaddingTopBottom.value) : null
    formPaddingTopBottomUnit.value = formPaddingTopBottom.unit

    const verticalSpacing = parseDimension(
      general?.verticalSpacing || defaults.verticalSpacing || '16px',
    )
    verticalSpacingValue.value = verticalSpacing.value !== '' ? Number(verticalSpacing.value) : null
    verticalSpacingUnit.value = verticalSpacing.unit

    const horizontalSpacing = parseDimension(
      general?.horizontalSpacing || defaults.horizontalSpacing || '12px',
    )
    horizontalSpacingValue.value =
      horizontalSpacing.value !== '' ? Number(horizontalSpacing.value) : null
    horizontalSpacingUnit.value = horizontalSpacing.unit

    formAlignment.value = normalizeAlignment(general?.alignment || defaults.alignment)
  }

  return {
    formBackground,
    formBorderColor,
    formBorderStyle,
    formBorderWidthValue,
    formBorderWidthUnit,
    formPaddingLeftRightValue,
    formPaddingLeftRightUnit,
    formPaddingTopBottomValue,
    formPaddingTopBottomUnit,
    verticalSpacingValue,
    verticalSpacingUnit,
    horizontalSpacingValue,
    horizontalSpacingUnit,
    formAlignment,
    syncGeneralSection,
  }
}

```