o not use this._uid in EditDropdown

owncloud · Jan 23, 2023 · a3bf55a · a3bf55a
1 parent 3a51714
commit a3bf55a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -1,6 +1,7 @@
 <template>
  <component
  :is="type"
+ :id="id"
  v-bind="additionalAttributes"
  :aria-label="ariaLabel"
  :class="$_ocButton_buttonClass"
@@ -12,6 +13,7 @@
 </template>
 
 <script lang="ts">
+import uniqueId from '../../utils/uniqueId'
 import { defineComponent } from 'vue'
 import { getSizeClass } from '../../utils/sizeClasses'
 
@@ -20,6 +22,14 @@ export default defineComponent({
  status: 'ready',
  release: '1.0.0',
  props: {
+ /**
+ * The ID of the element.
+ */
+ id: {
+ type: String,
+ required: false,
+ default: () => uniqueId('oc-button-')
+ },
  /**
  * The html element used for the button.
  * `button, a, router-link`

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -1,11 +1,11 @@
 <template>
  <span class="oc-flex oc-flex-middle">
- <oc-button :id="editShareBtnId" class="collaborator-edit-dropdown-options-btn" appearance="raw">
+ <oc-button ref="editShareBtn" class="collaborator-edit-dropdown-options-btn" appearance="raw">
  <oc-icon name="more-2" />
  </oc-button>
  <oc-drop
  ref="expirationDateDrop"
- :toggle="'#' + editShareBtnId"
+ :toggle="'#' + editShareBtn.id"
  mode="click"
  padding-size="small"
  >
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { mapGetters } from 'vuex'
 import { DateTime } from 'luxon'
 
@@ -78,6 +78,13 @@ export default defineComponent({
  required: true
  }
  },
+ setup() {
+ const editShareBtn = ref()
+
+ return {
+ editShareBtn
+ }
+ },
  data: function () {
  return {
  enteredExpirationDate: null
@@ -121,10 +128,6 @@ export default defineComponent({
  }
  ]
  },
-
- editShareBtnId() {
- return 'files-collaborators-edit-button-' + this._uid
- },
  shareEditOptions() {
  return this.$gettext('Context menu of the share')
  },