feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
2026-01-18 22:11:43 +01:00 · 2023-05-04 14:49:19 +02:00
parent 56230ea915
commit 6da0db0113
144 changed files with 10470 additions and 8109 deletions
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
    <input
      :id="name"
      ref="input"
@@ -8,7 +8,7 @@
      :type="type"
      :required="required"
      :placeholder="placeholder"
-      :disabled="disabled"
+      :disabled="disabled || loading"
      :readonly="readonly"
      :autocomplete="autocomplete"
      :spellcheck="spellcheck"
@@ -18,176 +18,216 @@
      @blur="$emit('blur', $event)"
    >
    <slot />
-    <div v-if="isLeading" :class="iconLeadingWrapperClass">
-      <Icon v-if="iconName" :name="iconName" :class="iconClass" />
+    <div v-if="isLeading && leadingIconName" :class="leadingIconClass">
+      <Icon :name="leadingIconName" :class="iconClass" />
    </div>
-    <div v-if="isTrailing" :class="iconTrailingWrapperClass">
-      <Icon v-if="iconName" :name="iconName" :class="iconClass" />
+    <div v-if="isTrailing && trailingIconName" :class="trailingIconClass">
+      <Icon :name="trailingIconName" :class="iconClass" />
    </div>
  </div>
 </template>

-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+<script lang="ts">
+import { ref, computed, onMounted, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
 import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
-import $ui from '#build/ui'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'

-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: ''
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  components: {
+    Icon
  },
-  type: {
-    type: String,
-    default: 'text'
-  },
-  name: {
-    type: String,
-    required: true
-  },
-  placeholder: {
-    type: String,
-    default: null
-  },
-  required: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  autofocus: {
-    type: Boolean,
-    default: false
-  },
-  autocomplete: {
-    type: String,
-    default: null
-  },
-  spellcheck: {
-    type: Boolean,
-    default: null
-  },
-  icon: {
-    type: String,
-    default: null
-  },
-  loadingIcon: {
-    type: String,
-    default: () => $ui.input.icon.loading
-  },
-  trailing: {
-    type: Boolean,
-    default: false
-  },
-  leading: {
-    type: Boolean,
-    default: false
-  },
-  size: {
-    type: String,
-    default: 'md',
-    validator (value: string) {
-      return Object.keys($ui.input.size).includes(value)
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    spellcheck: {
+      type: Boolean,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    loadingIcon: {
+      type: String,
+      default: () => appConfig.ui.input.default.loadingIcon
+    },
+    leadingIcon: {
+      type: String,
+      default: null
+    },
+    trailingIcon: {
+      type: String,
+      default: null
+    },
+    trailing: {
+      type: Boolean,
+      default: false
+    },
+    leading: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: () => appConfig.ui.input.default.size,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.input.size).includes(value)
+      }
+    },
+    appearance: {
+      type: String,
+      default: () => appConfig.ui.input.default.appearance,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.input.appearance).includes(value)
+      }
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.input>>,
+      default: () => appConfig.ui.input
    }
  },
-  wrapperClass: {
-    type: String,
-    default: () => $ui.input.wrapper
-  },
-  baseClass: {
-    type: String,
-    default: () => $ui.input.base
-  },
-  iconBaseClass: {
-    type: String,
-    default: () => $ui.input.icon.base
-  },
-  customClass: {
-    type: String,
-    default: null
-  },
-  appearance: {
-    type: String,
-    default: 'default',
-    validator (value: string) {
-      return Object.keys($ui.input.appearance).includes(value)
+  emits: ['update:modelValue', 'focus', 'blur'],
+  setup (props, { emit }) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.input>>(() => defu({}, props.ui, appConfig.ui.input))
+
+    const input = ref<HTMLInputElement | null>(null)
+
+    const autoFocus = () => {
+      if (props.autofocus) {
+        input.value?.focus()
+      }
+    }
+
+    const onInput = (value: string) => {
+      emit('update:modelValue', value)
+    }
+
+    onMounted(() => {
+      setTimeout(() => {
+        autoFocus()
+      }, 100)
+    })
+
+    const inputClass = computed(() => {
+      return classNames(
+        ui.value.base,
+        ui.value.size[props.size],
+        ui.value.spacing[props.size],
+        ui.value.appearance[props.appearance],
+        isLeading.value && ui.value.leading.spacing[props.size],
+        isTrailing.value && ui.value.trailing.spacing[props.size],
+        ui.value.custom
+      )
+    })
+
+    const isLeading = computed(() => {
+      return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
+    })
+
+    const isTrailing = computed(() => {
+      return (props.icon && props.trailing) || (props.loading && props.trailing) || props.trailingIcon
+    })
+
+    const leadingIconName = computed(() => {
+      if (props.loading) {
+        return props.loadingIcon
+      }
+
+      return props.leadingIcon || props.icon
+    })
+
+    const trailingIconName = computed(() => {
+      if (props.loading && !isLeading.value) {
+        return props.loadingIcon
+      }
+
+      return props.trailingIcon || props.icon
+    })
+
+    const iconClass = computed(() => {
+      return classNames(
+        ui.value.icon.base,
+        ui.value.icon.size[props.size],
+        props.loading && 'animate-spin'
+      )
+    })
+
+    const leadingIconClass = computed(() => {
+      return classNames(
+        ui.value.icon.leading.wrapper,
+        ui.value.icon.leading.spacing[props.size]
+      )
+    })
+
+    const trailingIconClass = computed(() => {
+      return classNames(
+        ui.value.icon.trailing.wrapper,
+        ui.value.icon.trailing.spacing[props.size]
+      )
+    })
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      isLeading,
+      isTrailing,
+      inputClass,
+      iconClass,
+      leadingIconName,
+      leadingIconClass,
+      trailingIconName,
+      trailingIconClass,
+      onInput
    }
-  },
-  loading: {
-    type: Boolean,
-    default: false
  }
 })
-
-const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
-
-const input = ref<HTMLInputElement | null>(null)
-
-const autoFocus = () => {
-  if (props.autofocus) {
-    input.value?.focus()
-  }
-}
-
-const onInput = (value: string) => {
-  emit('update:modelValue', value)
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    autoFocus()
-  }, 100)
-})
-
-const isLeading = computed(() => {
-  return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing)
-})
-
-const isTrailing = computed(() => {
-  return (props.icon && props.trailing) || (props.loading && props.trailing)
-})
-
-const inputClass = computed(() => {
-  return classNames(
-    props.baseClass,
-    $ui.input.size[props.size],
-    $ui.input.spacing[props.size],
-    $ui.input.appearance[props.appearance],
-    isLeading.value && $ui.input.leading.spacing[props.size],
-    isTrailing.value && $ui.input.trailing.spacing[props.size],
-    props.customClass
-  )
-})
-
-const iconName = computed(() => {
-  if (props.loading) {
-    return props.loadingIcon
-  }
-
-  return props.icon
-})
-
-const iconClass = computed(() => {
-  return classNames(
-    props.iconBaseClass,
-    $ui.input.icon.size[props.size],
-    isLeading.value && $ui.input.icon.leading.spacing[props.size],
-    isTrailing.value && $ui.input.icon.trailing.spacing[props.size],
-    props.loading && 'animate-spin'
-  )
-})
-
-const iconLeadingWrapperClass = $ui.input.icon.leading.wrapper
-const iconTrailingWrapperClass = $ui.input.icon.trailing.wrapper
-</script>
-
-<script lang="ts">
-export default { name: 'UInput' }
 </script>