context.ts

Inherit values along the logical hierarchy

When to use

Use context only where you need typed data or attributes, or when you want to pass values through <Teleport> nodes.

• A variant of a component affects all ancestor components
• The effect can be expressed as setting an attribute
• All affected ancestors use context to inherit and use the passed value
• Theinheritance rule is specific to certain components (otherwise amend fw.css)

If you just want to style a component or element based on some ancestor's variant, prefer CSS rules according to the principle of least power.

Example: "Inside a modal, buttons are raised and inputs are sunken by default to separate them from the background color."

1. Add the property to the context object in ~/ui/context.ts

2. In a parent or ancestor component, set the context:

   useContext({ uiBleedInline: true, uiSunken: true, uiRaised: true })

3. In any child component, you can now use the context to automatically default a prop:

   const {
     uiBlockSize = useContext().value.uiBlockSize ?? '48',
     ...props
   } = defineProps({
     uiBlockSize: '24'
   })

   If you don't need to process the data inside your <script setup>, you can also use the context directly inside the template.