Refactor @getodk/webform 1/2

[sadiqkhoja]

From #164 (comment)

• Consider some DOM-level way of identifying which component rendered what to the DOM
• Maybe there’s a lint rule (or maybe we could write one trivially?) to ensure consistent use of class/:class? It’s confusing every time I see both used on the same element. (And maybe I’ll get over that seeing it more?)
• Consider extracting event handlers into functions, especially where their logic is repeated. Case that stood out/made me think about this: several additions of @change="touched = true”.
• How do we choose between when to apply utility classes, versus using styles that achieve the same? (flex etc stand out)
• I’m normally not fond of “test helpers”, but have some concern about inconsistent use of mount and globalMountOptions: especially (but not only) whether or not PrimeVue plugin is in use. Worth considering a shared custom mount helper to ensure we’re testing all components under the same assumptions.
• Adding the same thing in multiple places can be a smell, may suggest there’s a composable component wanting to exist. Case that stood out/made me think about this: several additions of @change="touched = true”.
• Props naming:
  • “add” is a weird prefix for something that’s not an action/handler/callback. In general, verbs tend to suggest some kind of event handling or interaction -> state reaction.