chore(vue3): Nc*Field rename default to icon slot

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
nextcloud-libraries · Sep 18, 2023 · bf36543 · bf36543
1 parent 33ecf70
commit bf36543
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
@@ -47,7 +47,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
  :class="[inputClass,
  {
  'input-field__input--trailing-icon': showTrailingButton || hasTrailingIcon,
- 'input-field__input--leading-icon': hasLeadingIcon,
+ 'input-field__input--leading-icon': !!$slots.icon,
  'input-field__input--label-outside': labelOutside,
  'input-field__input--success': success,
  'input-field__input--error': error,
@@ -59,16 +59,16 @@ For a list of all available props and attributes, please check the [HTMLInputEle
  class="input-field__label"
  :class="[{
  'input-field__label--trailing-icon': showTrailingButton || hasTrailingIcon,
- 'input-field__label--leading-icon': hasLeadingIcon,
+ 'input-field__label--leading-icon': !!$slots.icon,
  }]"
  :for="computedId">
  {{ label }}
  </label>
 
  <!-- Leading icon -->
- <div v-show="hasLeadingIcon" class="input-field__icon input-field__icon--leading">
+ <div v-show="!!$slots.icon" class="input-field__icon input-field__icon--leading">
  <!-- Leading material design icon in the text field, set the size to 18 -->
- <slot />
+ <slot name="icon" />
  </div>
 
  <!-- trailing button -->
@@ -109,7 +109,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 <script>
 import NcButton from '../NcButton/index.js'
 import GenRandomId from '../../utils/GenRandomId.js'
-import isSlotPopulated from '../../utils/isSlotPopulated.js'
 
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -266,10 +265,6 @@ export default {
  return 'input' + GenRandomId()
  },
 
- hasLeadingIcon() {
- return isSlotPopulated(this.$slots.default?.())
- },
-
  hasTrailingIcon() {
  return this.success
  },

diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue
@@ -52,14 +52,20 @@ General purpose password field component.
  label="Good new password"
  :success="true"
  placeholder="Min. 12 characters"
- helper-text="Password is secure" />
+ helper-text="Password is secure">
+ <template #icon>
+ <Lock :size="20" />
+ </template>
+ </NcPasswordField>
 
  <NcPasswordField v-model:value="text5"
  :disabled="true"
  label="Disabled" />
  </div>
 </template>
 <script>
+import Lock from 'vue-material-design-icons/Lock'
+
 export default {
  data() {
  return {
@@ -70,6 +76,10 @@ export default {
  text5: '',
  }
  },
+
+ components: {
+ Lock,
+ },
 }
 </script>
 <style lang="scss" scoped>
@@ -107,8 +117,10 @@ export default {
  :minlength="rules.minlength"
  @trailing-button-click="togglePasswordVisibility"
  @input="handleInput">
- <!-- Default slot for the leading icon -->
- <slot />
+ <template v-if="!!$slots.icon" #icon>
+ <!-- Default slot for the leading icon -->
+ <slot name="icon" />
+ </template>
  <template #trailing-button-icon>
  <Eye v-if="isPasswordHidden" :size="18" />
  <EyeOff v-else :size="18" />

diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
@@ -39,15 +39,19 @@ and `minlength`.
  trailing-button-icon="close"
  :show-trailing-button="text1 !== ''"
  @trailing-button-click="clearText">
- <Magnify :size="20" />
+ <template #icon>
+ <Magnify :size="20" />
+ </template>
  </NcTextField>
  <NcTextField :value.sync="text4"
  label="Internal label"
  placeholder="That can be used together with placeholder"
  trailing-button-icon="close"
  :show-trailing-button="text4 !== ''"
  @trailing-button-click="clearText">
- <Lock :size="20" />
+ <template #icon>
+ <Lock :size="20" />
+ </template>
  </NcTextField>
  <NcTextField v-model:value="text2"
  label="Success state"
@@ -136,8 +140,10 @@ export default {
  ref="inputField"
  :trailing-button-label="clearTextLabel"
  @input="handleInput">
- <!-- Default slot for the leading icon -->
- <slot />
+ <template v-if="!!$slots.icon" #icon>
+ <!-- Default slot for the leading icon -->
+ <slot name="icon" />
+ </template>
 
  <!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->
  <template v-if="type !== 'search'" #trailing-button-icon>