Guidelines

The following is the development guidelines for new components following AO Standard UI.

Each SUI Vue component has the following structure:

• script setup:
  • with TypeScript support and generics if needed:
  • this is where the main code and data resides.
• script: used to define the next interfaces (used mainly in script setup)
  • IProps: definition of component props
  • IEmits
  • ISlots
  • I<component_name>Ref
• template: where the HTML resides
• style: (optional) CSS scoped styles if needed

Script setup

• imports
• defineProps with defaults
  • other props
  • classes prop
  • styles prop
• defineModel (optional): if needs prop change from within the component
• defineEmits (optional): only if the component emits events
• classes and styles subcomponent computed props
• refs
• watchers
• other functions
• defineExpose (optional): only if method exposition is needed
• onMounted / onUnmounted, etc (optional)

Script

• interface IProps
• interface IEmits
• interface I<component_name>Ref (for exposing methods)
• interface I<component_name>Classes
• interface I<component_name>Styles
• const DEFAULT_STRUCTURE_CLASSES CSS
• const DEFAULT_SKIN_STYLES CSS
• const DEFAULT_STRUCTURE_STYLES CSS
• export default

Template

Final HTML where:

• subcomponents are attached the classes and styles computed props

Style (scoped)

• All CSS should be scoped in order to not conflict with other CSS classes