Skip to content

Commit

Permalink
refactor: apply review fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlmoravek
mlmoravek committed Dec 17, 2024
1 parent 5947acd commit 182accb
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 33 deletions.
28 changes: 14 additions & 14 deletions packages/docs/components/Menu.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,20 @@ sidebarDepth: 2

### Props

| Prop name | Description | Type | Values | Default |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| accordion | If sub menu items are collapsible | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| disabled | Menu will be disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| icon | Icon to be shown | string | - | |
| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>menu: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
| iconSize | Icon size | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>menu: {<br>&nbsp;&nbsp;iconSize: undefined<br>}</code> |
| label | Menu label | string | - | |
| labelId | HTML element Id of the label element | string | - | <code style='white-space: nowrap; padding: 0;'>useId()</code> |
| menuId | HTML element Id of the ol list element | string | - | <code style='white-space: nowrap; padding: 0;'>useId()</code> |
| v-model | The selected item value, use v-model to make it two-way binding | unknown | - | |
| options | Menu items, unnecessary when default slot is used | OptionsProp&lt;unknown&gt; | - | |
| override | Override existing theme classes completely | boolean | - | |
| role | Role attribute to be passed to the list container for better accessibility.<br/>Use menu only in situations where your dropdown is related to a navigation menu. | "menu" \| "tree" | `menu`, `tree` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>menu: {<br>&nbsp;&nbsp;ariaRole: "tree"<br>}</code> |
| Prop name | Description | Type | Values | Default |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| accordion | If sub menu items are collapsible | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| disabled | Menu will be disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| icon | Icon to be shown | string | - | |
| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>menu: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
| iconSize | Icon size | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>menu: {<br>&nbsp;&nbsp;iconSize: undefined<br>}</code> |
| label | Menu label | string | - | |
| labelId | HTML element Id of the label element | string | - | <code style='white-space: nowrap; padding: 0;'>useId()</code> |
| menuId | HTML element Id of the ol list element | string | - | <code style='white-space: nowrap; padding: 0;'>useId()</code> |
| v-model | The selected item value, use v-model to make it two-way binding | unknown | - | |
| options | Menu items, unnecessary when default slot is used | OptionsPropWithGroups&lt;unknown&gt; | - | |
| override | Override existing theme classes completely | boolean | - | |
| role | Role attribute to be passed to the list container for better accessibility.<br/>Use menu only in situations where your dropdown is related to a navigation menu. | "menu" \| "tree" | `menu`, `tree` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>menu: {<br>&nbsp;&nbsp;ariaRole: "tree"<br>}</code> |

### Events

Expand Down
30 changes: 23 additions & 7 deletions packages/oruga/src/components/menu/Menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { getDefault } from "@/utils/config";
import { mod } from "@/utils/helpers";
import {
defineClasses,
isGroupOption,
normalizeOptions,
useProviderParent,
useSequentialId,
Expand Down Expand Up @@ -281,13 +282,28 @@ const labelClasses = defineClasses(["labelClass", "o-menu__label"]);
:focused-index="focusedItem?.index"
:selected="selectedItem?.data"
:selected-index="selectedItem?.index">
<OMenuItem
v-for="option in normalizedOptions"
:key="option.key"
v-bind="option.attrs"
:value="option.value"
:label="option.label"
:hidden="option.hidden" />
<template v-for="option in normalizedOptions" :key="option.key">
<OMenuItem
v-if="isGroupOption(option)"
v-bind="option.attrs"
:label="option.group"
:hidden="option.hidden">
<OMenuItem
v-for="_option in option.options"
v-bind="_option.attrs"
:key="_option.key"
:value="_option.value"
:label="_option.label"
:hidden="_option.hidden" />
</OMenuItem>

<OMenuItem
v-else
v-bind="option.attrs"
:value="option.value"
:label="option.label"
:hidden="option.hidden" />
</template>
</slot>
</ul>
</nav>
Expand Down
14 changes: 6 additions & 8 deletions packages/oruga/src/components/menu/examples/options.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
<script setup lang="ts">
import { ref } from "vue";
import type { OptionsProp } from "@oruga-ui/oruga-next";
import type { OptionsPropWithGroups } from "@oruga-ui/oruga-next";
const options: OptionsProp<string> = [
const options: OptionsPropWithGroups<string> = [
{
label: "Fruits",
value: "fruits",
group: "Fruits",
attrs: {
icon: "info-circle",
options: ["Apple", "Banana", "Watermelon"],
},
options: ["Apple", "Banana", "Watermelon"],
},
{
label: "Vegetables",
value: "vegetables",
group: "Vegetables",
attrs: {
icon: "info-circle",
options: ["Carrot", "Broccoli", "Cucumber", "Onion"],
},
options: ["Carrot", "Broccoli", "Cucumber", "Onion"],
},
];
Expand Down
5 changes: 3 additions & 2 deletions packages/oruga/src/components/menu/props.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import type { ComponentClass, DynamicComponent, OptionsProp } from "@/types";
import type { ComponentClass, DynamicComponent } from "@/types";
import type { OptionsProp, OptionsPropWithGroups } from "@/composables";

export type MenuProps<T> = {
/** Override existing theme classes completely */
override?: boolean;
/** The selected item value, use v-model to make it two-way binding */
modelValue?: T;
/** Menu items, unnecessary when default slot is used */
options?: OptionsProp<T>;
options?: OptionsPropWithGroups<T>;
/** Menu label */
label?: string;
/** If sub menu items are collapsible */
Expand Down
4 changes: 2 additions & 2 deletions packages/oruga/src/components/select/Select.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ watch(
const { nextSequence } = useSequentialId();
/** normalized programamtic options */
const normalizedptions = computed(() =>
const normalizedOptions = computed(() =>
normalizeOptions<T>(props.options, nextSequence),
);
Expand Down Expand Up @@ -304,7 +304,7 @@ defineExpose({ focus: setFocus, value: vmodel });
@slot Override the options, default is options prop
-->
<slot>
<template v-for="option in normalizedptions" :key="option.key">
<template v-for="option in normalizedOptions" :key="option.key">
<optgroup
v-if="isGroupOption(option)"
v-show="!option.hidden"
Expand Down

0 comments on commit 182accb

Please sign in to comment.