feat(vue-demo): create state and country component

[mdanilowicz]

Description

closes #245

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Screenshots (if applicable)

Additional context

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
frontends-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 3, 2023 8:23am
shopware-frontends-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 3, 2023 8:23am

[patzick]

Nice work. Overall I'd go for extracting whole SharedAddressForm/SharedAddressFields, as the API of this component would be much simpler and validation rules would be handled in a single place as well instead of being passed as props. Additionally I left comment for simplification of data passing. Let me know what do you think about moving all address fields to single component

[mdanilowicz]

Nice work. Overall I'd go for extracting whole SharedAddressForm/SharedAddressFields, as the API of this component would be much simpler and validation rules would be handled in a single place as well instead of being passed as props. Additionally I left comment for simplification of data passing. Let me know what do you think about moving all address fields to single component

Sure, I created a new task for that #277

Regarding the changes that you suggest. I'm not convinced because:

• Watchers make code more complicated for debugging
• Code will be less understandable, especially for people who don't know vueUse
• There is too much magic 🪄 . For example, without @change="handleCountryUpdate" it's hard to figure out what action is done after the change action. With action, you see where to go :D

[patzick]

• component watchers are standard Vue3 solution - simple and reactive way to do something in response for a change in other reactive value(s)
• code is much cleaner, VueUse is now practically official set of composables for Vue3 + a lot of stuff from it is adapted into the Vue3 itfelf. We should use it as much as we can, so let's do it
• one thing before "magic" - storing additional local state is almost always ending with problems, when the data is changed in the parent (for example, some late loading/refresh/change address to edit) then suddenly your data is wrong as you have two sources of truth
• the "magic" is standard Vue way (same as first point) and the code is (again) much cleaner with proper responsibility
  • v-model is changing field value in parent
  • watcher for country value is resetting state value
  • a single place where field values are saved (in parent, where the data belongs)

So I'm still standing with previous review and suggestions, I hope that now you're more convinced though :)

[patzick]

I see a pending review as the previous was dismissed, so setting it up for last comment

[patzick]

great work!