feat: component props defaults & aliases (#182)

.eslintrc.js

@@ -70,6 +70,12 @@ module.exports = {
       singleline: 'beside',
       multiline: 'below',
     }],
+    'vue/require-name-property': 'error',
+    'vue/component-definition-name-casing': 'error',
+    'vue/no-duplicate-attr-inheritance': 'error',
+    'vue/match-component-file-name': ['error', {
+      extensions: ['vue', 'tsx'],
+    }],
 
     // 'vue/require-prop-comment': ['error', {
     //   type: 'JSDoc',
@@ -102,37 +108,6 @@ module.exports = {
         argsIgnorePattern: '^_+$',
       },
     ],
-
-    // JSX rules
-    // 'react/jsx-boolean-value': ['error', 'never'],
-    // 'react/jsx-child-element-spacing': 'error',
-    // 'react/jsx-closing-bracket-location': 'error',
-
-    // // 'react/jsx-closing-tag-location': 'error',
-    // 'react/jsx-curly-brace-presence': 'error',
-    // 'react/jsx-curly-newline': 'error',
-    // 'react/jsx-curly-spacing': 'error',
-    // 'react/jsx-equals-spacing': 'error',
-    // 'react/jsx-filename-extension': ['error', { extensions: ['.tsx', '.jsx'] }],
-    // 'react/jsx-first-prop-new-line': 'error',
-    // 'react/jsx-indent-props': [2, 2],
-    // 'react/jsx-indent': [2, 2],
-    // 'react/jsx-max-props-per-line': 'error',
-    // 'react/jsx-no-comment-textnodes': 'error',
-    // 'react/jsx-no-duplicate-props': 'error',
-    // 'react/jsx-no-leaked-render': 'error',
-    // 'react/jsx-no-target-blank': 'error',
-    // 'react/jsx-no-useless-fragment': 'error',
-    // 'react/jsx-one-expression-per-line': 'error',
-    // 'react/jsx-pascal-case': 'error',
-    // 'react/jsx-props-no-multi-spaces': 'error',
-    // 'react/jsx-sort-props': 'error',
-    // 'react/jsx-tag-spacing': 'error',
-    // 'react/self-closing-comp': 'error',
-
-    // // 'react/no-unknown-property': ['error', { ignore: ['class', 'v-show', 'v-model', 'v-slots', 'for', 'tabindex'] }],
-    // 'react/no-unescaped-entities': 'error',
-    // 'react/no-invalid-html-attribute': 'error',
   },
   settings: {
     'import/parsers': {

.vscode/extensions.json

@@ -14,6 +14,9 @@
         "streetsidesoftware.code-spell-checker",
         "matijao.vue-nuxt-snippets",
         "webhint.vscode-webhint",
-        "johnsoncodehk.vscode-tsconfig-helper"
+        "johnsoncodehk.vscode-tsconfig-helper",
+        "orta.vscode-twoslash-queries",
+        "antfu.smart-clicks",
+        "meganrogge.template-string-converter"
     ]
 }

.vscode/settings.json

@@ -83,6 +83,7 @@
   // Extention: Code Spell Checker
   "cSpell.words": [
     "composables",
+    "deepmerge",
     "defu",
     "endregion",
     "globby",
@@ -98,4 +99,5 @@
   // Extension: Volar
   "volar.vueserver.vitePress.processMdFile": true,
   "references.preferredLocation": "peek",
+  "commentAnchors.tagHighlights.enabled": true,
 }

docs/.vitepress/theme/index.ts

@@ -1,32 +1,40 @@
 import '@anu-vue/preset-theme-default/dist/style.css'
 import { anu } from 'anu-vue'
-import 'anu-vue/dist/style.css'
-import 'uno.css'
 import DefaultTheme from 'vitepress/theme'
+import type { App } from 'vue'
+
+import 'uno.css'
+
+import 'anu-vue/dist/style.css'
+
 import Api from '../../components/Api.vue'
 import Demo from '../../components/Demo.vue'
 import { extractFileNameFromPath } from '../../utils'
 import './style.css'
 
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }) {
+  enhanceApp({ app }: { app: App }) {
     app.use(anu)
 
     // Register demos as components
-    const demos = import.meta.globEager('../../components/demos/**/*.vue')
+    const demos = import.meta.glob('../../components/demos/**/*.vue', { eager: true })
 
     for (const path in demos)
-      app.component(extractFileNameFromPath(path), demos[path].default)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      app.component(extractFileNameFromPath(path) as string, (demos[path] as any).default)
 
     // Register UI as components
-    const ui = import.meta.globEager('../../components/ui/**/*.vue')
+    const ui = import.meta.glob('../../components/ui/**/*.vue', { eager: true })
 
     for (const path in ui)
-      app.component(extractFileNameFromPath(path), ui[path].default)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      app.component(extractFileNameFromPath(path) as string, (ui[path] as any).default)
 
     // Other component registration
+    /* eslint-disable vue/multi-word-component-names */
     app.component('Demo', Demo)
     app.component('Api', Api)
+    /* eslint-enable */
   },
 }

docs/components/Playground.vue

@@ -1,11 +1,5 @@
 <script lang="ts" setup>
-const colors = [
-  'primary',
-  'success',
-  'info',
-  'warning',
-  'danger',
-]
+
 </script>
 
 <template>
@@ -14,9 +8,8 @@ const colors = [
       title="Playground"
       class="m-8"
     >
-      <div class="a-card-body flex items-center gap-4">
-        <ABtn class="focus:ring-4 transition-shadow transition-ease-both ring-offset-0 ring-[hsla(var(--a-layer-c),.35)]" v-for="color in colors" :key="color" :color="color">{{ color }}</ABtn>
-        <AIcon icon="i-bx-home"></AIcon>
+      <div class="a-card-body">
+        Play here...
       </div>
     </ACard>
   </div>

docs/utils/index.ts

@@ -1,8 +1,15 @@
 export const extractFileNameFromPath = (path: string) => (path.split('/').at(-1) as string).split('.')[0]
 
-export function extractFileNameFromGlobImport(demos: string[]) {
+export function extractFileNameFromGlobImport(demos: string[]): string[] {
   const names = []
-  for (const path in demos) names.push(extractFileNameFromPath(path))
+  for (const path in demos) {
+    const extractedName = extractFileNameFromPath(path)
+
+    if (!extractedName)
+      throw new Error(`Could not extract name from path: ${path}`)
+
+    names.push(extractedName)
+  }
 
   return names
 }

package.json

@@ -21,37 +21,37 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@antfu/eslint-config": "^0.38.6",
+    "@antfu/eslint-config": "^0.39.5",
     "@antfu/ni": "^0.21.3",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^20.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
+    "@types/node": "^20.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "@vue/tsconfig": "^0.4.0",
     "bumpp": "^9.1.0",
-    "concurrently": "^8.0.1",
+    "concurrently": "^8.1.0",
     "defu": "^6.1.2",
-    "eslint": "^8.40.0",
+    "eslint": "^8.42.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsonc": "^2.8.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-unicorn": "^47.0.0",
-    "eslint-plugin-vue": "^9.13.0",
+    "eslint-plugin-vue": "^9.14.1",
     "fast-glob": "^3.2.12",
     "fs-extra": "^11.1.1",
     "globby": "^13.1.4",
     "jiti": "^1.18.2",
-    "pathe": "^1.1.0",
-    "pnpm": "^8.5.1",
+    "pathe": "^1.1.1",
+    "pnpm": "^8.6.0",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^5.0.1",
     "semver": "^7.5.1",
     "taze": "^0.10.1",
     "tsx": "^3.12.7",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.3",
     "unbuild": "^1.2.1",
     "vue-component-meta": "^1.6.5"
   },

packages/anu-vue/package.json

@@ -50,10 +50,12 @@
   "dependencies": {
     "@floating-ui/vue": "^1.0.0",
     "colord": "^2.9.3",
+    "deepmerge-ts": "^5.1.0",
     "defu": "^6.1.2",
     "vue": "3.3.4"
   },
   "devDependencies": {
+    "@antfu/utils": "^0.7.4",
     "@unocss/core": "^0.51.13",
     "@unocss/reset": "^0.51.13",
     "@vitejs/plugin-vue": "^4.2.3",

packages/anu-vue/src/components/alert/AAlert.vue

@@ -2,16 +2,24 @@
 import type { AAlertEvents, aAlertSlots } from './meta'
 import { aAlertProps } from './meta'
 import { AIcon } from '@/components'
+import { useDefaults } from '@/composables/useDefaults'
 import { useLayer } from '@/composables/useLayer'
 
-const props = defineProps(aAlertProps)
+// SECTION Meta
+const _props = defineProps(aAlertProps)
+
 const emit = defineEmits<AAlertEvents>()
+
 defineSlots<typeof aAlertSlots>()
 
 defineOptions({
   name: 'AAlert',
 })
 
+const { props, defaultsClass, defaultsStyle, defaultsAttrs } = useDefaults(_props)
+
+// !SECTION
+
 const isAlertVisible = useVModel(props, 'modelValue', emit, { defaultValue: true, passive: true })
 
 const { getLayerClasses } = useLayer()
@@ -22,7 +30,7 @@ const { styles, classes } = getLayerClasses(
 )
 
 // 👉 Append icon
-const appendIcon = props.appendIcon || (props.dismissible ? 'i-bx-x' : null)
+const appendIcon = computed(() => props.appendIcon || (props.dismissible ? 'i-bx-x' : null))
 function handleAppendIconClick() {
   isAlertVisible.value = false
 
@@ -33,13 +41,13 @@ function handleAppendIconClick() {
 const appendIconBindings = computed(() => {
   if (props.dismissible) {
     return {
-      icon: appendIcon,
+      icon: appendIcon.value,
       ariaLabel: 'close',
     }
   }
 
   return {
-    class: appendIcon,
+    class: appendIcon.value,
   }
 })
 </script>
@@ -48,11 +56,13 @@ const appendIconBindings = computed(() => {
   <div
     role="alert"
     class="a-alert items-start w-full"
+    v-bind="defaultsAttrs"
     :class="[
+      defaultsClass,
       ...classes,
       isAlertVisible ? 'flex' : 'hidden',
     ]"
-    :style="styles"
+    :style="[styles, defaultsStyle]"
   >
     <!-- ℹ️ We need div as wrapper with span having `vertical-align: text-top` to center the icon with the text -->
     <div v-if="props.icon">

packages/anu-vue/src/components/badge/ABadge.vue

@@ -1,15 +1,20 @@
 <script lang="ts" setup>
 import type { aBadgeSlots } from './meta'
 import { aBadgeDefaultOffset, aBadgeDefaultOverlapOffset, aBadgeProps } from './meta'
+import { useDefaults } from '@/composables/useDefaults'
 import { isNumeric } from '@/utils/helpers'
 
-const props = defineProps(aBadgeProps)
+// SECTION Meta
+const _props = defineProps(aBadgeProps)
 defineSlots<typeof aBadgeSlots>()
 
 defineOptions({
   name: 'ABadge',
   inheritAttrs: false,
 })
+const { props, defaultsClass, defaultsStyle, defaultsAttrs } = useDefaults(_props)
+
+// !SECTION
 
 function formatMaxContent(content: unknown) {
   if (!isNumeric(content) || props.max === undefined)
@@ -47,14 +52,15 @@ const positionStyles = computed(() => {
     <Transition name="dialog">
       <div
         v-show="props.modelValue"
-        v-bind="$attrs"
+        v-bind="{ ...$attrs, ...defaultsAttrs }"
         class="a-badge absolute"
         :class="[
           `bg-${props.color}`,
           { 'a-badge-dot': props.dot },
           { 'a-badge-bordered': props.bordered },
+          defaultsClass,
         ]"
-        :style="positionStyles"
+        :style="[positionStyles, defaultsStyle]"
       >
         <template v-if="!props.dot">
           <template v-if="$slots.content">

packages/anu-vue/src/components/base-input/ABaseInput.vue

@@ -3,17 +3,26 @@ import type { ABaseInputEvents, aBaseInputSlots } from './meta'
 import { aBaseInputProps } from './meta'
 import { ALoader } from '@/components/loader'
 import { useConfigurable } from '@/composables/useConfigurable'
+import { useDefaults } from '@/composables/useDefaults'
 import TransitionExpand from '@/transitions/TransitionExpand.vue'
 
+// SECTION Meta
+
 // TODO: Provide a way to attach classes to root element
-const props = defineProps(aBaseInputProps)
+const _props = defineProps(aBaseInputProps)
+
 defineEmits<ABaseInputEvents>()
+
 defineSlots<typeof aBaseInputSlots>()
 
 defineOptions({
   name: 'ABaseInput',
 })
 
+const { props, defaultsClass, defaultsStyle, defaultsAttrs } = useDefaults(_props)
+
+// !SECTION
+
 const attrs = useAttrs()
 
 const configurableLabel = useConfigurable(toRef(props, 'label'))
@@ -42,7 +51,10 @@ defineExpose({
       props.disabled && 'a-base-input-disabled',
       (props.disabled || props.readonly) && 'pointer-events-none',
       !(props.disabled || props.readonly) && 'a-base-input-interactive',
+      defaultsClass,
     ]"
+    :style="defaultsStyle"
+    v-bind="defaultsAttrs"
   >
     <!-- 👉 Label -->
     <slot name="label">