Skip to content

Commit

Permalink
fix(hydration): replace custom uuid with vues native useId compos…
Browse files Browse the repository at this point in the history 
…able (#1053)
  • Loading branch information
@mlmoravek
mlmoravek committed Sep 20, 2024
1 parent aad7af8 commit d7091ff
Show file tree
Hide file tree
Showing 28 changed files with 80 additions and 569 deletions.
2 changes: 1 addition & 1 deletion packages/docs/components/Collapse.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
| Prop name | Description | Type | Values | Default |
| --------- | ---------------------------------------------------------------------------- | ----------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| animation | Custom animation (transition name) | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>collapse: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code> |
| contentId | Id property of the content container | string | - | Default function (see source code) |
| contentId | Id property of the content container - default is an uuid | string | - | Default function (see source code) |
| open | Whether collapse is open or not, use v-model:open to make it two-way binding | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| override | Override existing theme classes completely | boolean | - | |
| position | Trigger position | "top" \| "bottom" | `top`, `bottom` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>collapse: {<br>&nbsp;&nbsp;position: "top"<br>}</code> |
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/components/Dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ sidebarDepth: 2
| label | Item label, unnecessary when default slot is used | string | - | |
| tabindex | Set the tabindex attribute on the dropdown item div (-1 to prevent selection via tab key) | number\|string | - | <code style='white-space: nowrap; padding: 0;'>0</code> |
| tag | Dropdown item tag name | DynamicComponent | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>dropdown: {<br>&nbsp;&nbsp;itemTag: "div"<br>}</code> |
| value | Item value (it will be used as v-model of wrapper component) - default is a uuid | string\|number\|object | - | Default function (see source code) |
| value | Item value (it will be used as v-model of wrapper component) - default is an uuid | string\|number\|object | - | Default function (see source code) |

### Events

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/components/Input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
| iconRight | | | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>input: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code> |
| iconRightClickable | | | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| iconRightVariant | | | - | |
| id | | | - | <code style='white-space: nowrap; padding: 0;'>uuid()</code> |
| id | | | - | Default function (see source code) |
| maxlength | | | - | |
| v-model | | | - | |
| override | | | - | |
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/components/Select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
| iconRight | | | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;iconRight: undefined<br>}</code> |
| iconRightClickable | | | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| iconRightVariant | | | - | |
| id | | | - | <code style='white-space: nowrap; padding: 0;'>uuid()</code> |
| id | | | - | Default function (see source code) |
| v-model | | | - | <code style='white-space: nowrap; padding: 0;'>null</code> |
| nativeSize | | | - | |
| options | | | - | |
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/components/Steps.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ sidebarDepth: 2
| override | Override existing theme classes completely | boolean | - | |
| step | Step marker content (when there is no icon) | string\|number | - | |
| tag | Step item tag name | DynamicComponent | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;itemTag: "button"<br>}</code> |
| value | Item value (it will be used as v-model of wrapper component) - default is a uuid | string\|number\|object | - | Default function (see source code) |
| value | Item value (it will be used as v-model of wrapper component) - default is an uuid | string\|number\|object | - | Default function (see source code) |
| variant | Default style for the step.<br/>This will override parent type.<br/>Could be used to set a completed step to "success" for example | string | - | |
| visible | Show/hide item | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |

Expand Down
22 changes: 11 additions & 11 deletions packages/docs/components/Tabs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,17 +80,17 @@ sidebarDepth: 2

### Props

| Prop name | Description | Type | Values | Default |
| --------- | -------------------------------------------------------------------------------- | ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ariaRole | Role attribute to be passed to the div wrapper for better accessibility. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;ariaRole: "tab"<br>}</code> |
| disabled | Item will be disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| icon | Icon on the left | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;icon: undefined<br>}</code> |
| iconPack | Icon pack | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
| label | Item label | string | - | |
| override | Override existing theme classes completely | boolean | - | |
| tag | Tabs item tag name | DynamicComponent | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;itemTag: "button"<br>}</code> |
| value | Item value (it will be used as v-model of wrapper component) - default is a uuid | string\|number\|object | - | Default function (see source code) |
| visible | Show/hide item | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| Prop name | Description | Type | Values | Default |
| --------- | --------------------------------------------------------------------------------- | ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ariaRole | Role attribute to be passed to the div wrapper for better accessibility. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;ariaRole: "tab"<br>}</code> |
| disabled | Item will be disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| icon | Icon on the left | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;icon: undefined<br>}</code> |
| iconPack | Icon pack | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
| label | Item label | string | - | |
| override | Override existing theme classes completely | boolean | - | |
| tag | Tabs item tag name | DynamicComponent | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>tabs: {<br>&nbsp;&nbsp;itemTag: "button"<br>}</code> |
| value | Item value (it will be used as v-model of wrapper component) - default is an uuid | string\|number\|object | - | Default function (see source code) |
| visible | Show/hide item | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |

### Events

Expand Down
9 changes: 0 additions & 9 deletions packages/oruga/src/__tests__/vitest.setup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,6 @@ import { toHaveNoViolations } from "jest-axe";

expect.extend(toHaveNoViolations);

vi.mock("@/utils/helpers", async (importOriginal) => {
return {
...(await importOriginal<typeof import("@/utils/helpers")>()),
// mock uuid helper function
// this will only affect "foo" outside of the original module
uuid: (): string => "mocked",
};
});

// mock window.machMedia function
Object.defineProperty(window, "matchMedia", {
writable: true,
Expand Down
5 changes: 3 additions & 2 deletions packages/oruga/src/components/autocomplete/Autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
toRaw,
onMounted,
useSlots,
useId,
type PropType,
type Component,
} from "vue";
Expand All @@ -18,7 +19,7 @@ import ODropdown from "../dropdown/Dropdown.vue";
import ODropdownItem from "../dropdown/DropdownItem.vue";
import { getOption } from "@/utils/config";
import { getValueByPath, getPropertyValue, uuid } from "@/utils/helpers";
import { getValueByPath, getPropertyValue } from "@/utils/helpers";
import { isClient } from "@/utils/ssr";
import {
unrefElement,
Expand Down Expand Up @@ -395,7 +396,7 @@ const headerHovered = ref(false);
const footerHovered = ref(false);
const hoveredId = ref(null);
const menuId = uuid();
const menuId = useId();
/** options filtered by input value */
const filteredOptions = computed<T[]>(() =>
Expand Down
4 changes: 2 additions & 2 deletions packages/oruga/src/components/autocomplete/tests/__snapshots__/autocomplete.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`OAutocomplete tests > render correctly 1`] = `
@slot Override the trigger element, default is label prop
@binding {boolean} active - dropdown active state
-->
<div data-oruga="input" class="o-input__wrapper"><input role="combobox" aria-autocomplete="list" aria-controls="mocked" aria-expanded="false" id="mocked" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
<div data-oruga="input" class="o-input__wrapper"><input role="combobox" aria-autocomplete="list" aria-controls="v-0" aria-expanded="false" id="v-1" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
<!--v-if-->
<!--v-if-->
<!--v-if-->
Expand All @@ -18,7 +18,7 @@ exports[`OAutocomplete tests > render correctly 1`] = `
<!--v-if-->
</transition-stub>
<transition-stub name="fade" appear="false" persisted="true" css="true">
<div id="mocked" tabindex="-1" class="o-drop__menu o-drop__menu--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-hidden="true" aria-modal="false">
<div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-hidden="true" aria-modal="false">
<!--
@slot Place dropdown items here
@binding {boolean} active - dropdown active state
Expand Down
7 changes: 3 additions & 4 deletions packages/oruga/src/components/collapse/Collapse.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<script setup lang="ts">
import { type PropType } from "vue";
import { useId, type PropType } from "vue";
import { getOption } from "@/utils/config";
import { uuid } from "@/utils/helpers";
import { defineClasses } from "@/composables";
import type { ComponentClass } from "@/types";
Expand All @@ -28,8 +27,8 @@ defineProps({
type: String,
default: () => getOption("collapse.animation", "fade"),
},
/** Id property of the content container */
contentId: { type: String, default: () => uuid() },
/** Id property of the content container - default is an uuid */
contentId: { type: String, default: () => useId() },
/**
* Trigger position
* @values top, bottom
Expand Down
2 changes: 1 addition & 1 deletion packages/oruga/src/components/collapse/tests/__snapshots__/collapse.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`OCollapse tests > render correctly 1`] = `
-->
</div>
<transition-stub name="fade" appear="false" persisted="true" css="true">
<div id="mocked" class="o-clps__content">
<div id="v-0" class="o-clps__content">
<!--
@slot Default content
-->
Expand Down
Loading

0 comments on commit d7091ff

Please sign in to comment.