Components Vue Composition API #27
Conversation
| @@ -4,6 +4,7 @@ | |||
| </template> | |||
|
|
|||
| <script> | |||
| // todo delete | |||
There was a problem hiding this comment.
What's the reason for todo delete ? is a dead code?
There was a problem hiding this comment.
yes, there is a non-existent component HelloWorld.vue used there, and besides, there is another App.vue
| name: "VCardContent", | ||
| }; | ||
| <script setup lang="ts"> | ||
| // |
There was a problem hiding this comment.
can those '//' be removed?
| name: "VCardFooterItem", | ||
| }; | ||
| <script setup lang="ts"> | ||
| // |
There was a problem hiding this comment.
can those '//' be removed?
| name: "VCardImage", | ||
| }; | ||
| <script setup lang="ts"> | ||
| // |
There was a problem hiding this comment.
can those '//' be removed?
| name: "VMenu", | ||
| }; | ||
| <script setup lang="ts"> | ||
| // |
There was a problem hiding this comment.
can those '//' be removed?
| const toggle = (isHeaderTrigger) => { | ||
| if (props.disabled) return; | ||
| const state = reactive({ | ||
| isExpanded: props.expanded, |
There was a problem hiding this comment.
This code works, but Can I suggest use computed props for props in state? something like:
const isExpanded = ref(props.expanded);
// Access props directly: props.hover, props.isLink
same for hover, isLink and isExpanded props.
for best practices but it didn't affect functionality.
| name: "VAccordionMenu", | ||
| }; | ||
| <script setup lang="ts"> | ||
| // |
There was a problem hiding this comment.
can we delete those '//'?
| }, | ||
| success(message: string, options: ToastOptions = {}) { | ||
| options.type = "is-success"; | ||
| return this.show(message, options); |
There was a problem hiding this comment.
maybe this should be more readable is you do this:
success(message: string, options: ToastOptions = {}) {
return this.show(message, { ...options, type: "is-success" });
}
but it works.
| }, | ||
| warning(message: string, options: ToastOptions = {}) { | ||
| options.type = "is-warning"; | ||
| return this.show(message, options); |
There was a problem hiding this comment.
same as above for other items.
| }, | ||
| }; | ||
| <script setup lang="ts"> | ||
| defineProps<{ |
There was a problem hiding this comment.
Could you please try to do this in a best verbose mode, union types? my suggestion is:
// Before: Verbose union types
size?: "is-1" | "is-2" | ... | "is-one-fifth"
// After: Use type aliases
type ColumnSize =
| is-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}
| "is-three-quarters"
| "is-two-thirds"
| "is-half"
| "is-one-third"
| "is-one-quarter"
| "is-full"
| is-${"four" | "three" | "two" | "one"}-fifths;
type ColumnOffset = is-offset-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12};
type NarrowBreakpoint = is-narrow-${"mobile" | "tablet" | "touch" | "desktop" | "widescreen" | "fullhd"};
try and let me know if it works better, The code should be more readable.
- Update menu item click handlers - Fix aria attributes for accessibility
- Fix tests menu.
This PR includes multiple improvements and refactors to align components with modern Vue standards:
compoundsfolder usingthe modern Vue SFC syntax (
<script setup lang="ts">).Dropdown.vue:valueprop with the newmodelValueprop.tsconfig.json(due to comments being flagged).onClickOutside.tsAutocomplete.vueandDropdown.vuefor outside click detection.Tabs.vueandSteps.vueto simplify shared state management.