chore: init

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.config.ts

@@ -0,0 +1,12 @@
+export default defineAppConfig({
+  ui: {
+    button: {
+      base: 'font-semibold',
+      variants: {
+        color: {
+          pink: 'bg-pink-500 text-white',
+        }
+      }
+    }
+  }
+})

app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="max-w-7xl mx-auto py-24">
+    <UButton color="green" truncate>Click</UButton>
+  </div>
+</template>

assets/css/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

modules/ui/index.ts

@@ -0,0 +1,31 @@
+import { defu } from 'defu'
+import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'ui',
+    configKey: 'ui',
+    compatibility: {
+      nuxt: '^3.10.0'
+    }
+  },
+  setup (_, nuxt) {
+    const resolver = createResolver(import.meta.url)
+
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui, {
+      primary: 'green',
+      gray: 'cool',
+      icons: {
+        loading: 'i-heroicons-arrow-path-20-solid'
+      }
+    })
+
+    addComponentsDir({
+      path: resolver.resolve('./runtime/components'),
+      prefix: 'U',
+      pathPrefix: false
+    })
+
+    addImportsDir(resolver.resolve('./runtime/composables'))
+  }
+})

modules/ui/runtime/components/Button.vue

@@ -0,0 +1,190 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { LinkProps } from './Link.vue'
+// import appConfig from '#build/app.config'
+
+export const theme = {
+  slots: {
+    base: 'focus:outline-none rounded-md font-medium',
+    label: '',
+    icon: 'flex-shrink-0'
+  },
+  variants: {
+    color: {
+      blue: 'bg-blue-500 hover:bg-blue-700',
+      red: 'bg-red-500 hover:bg-red-700',
+      green: 'bg-green-500 hover:bg-green-700'
+    },
+    size: {
+      '2xs': 'px-2 py-1 text-xs gap-x-1',
+      xs: 'px-2.5 py-1.5 text-xs gap-x-1.5',
+      sm: 'px-2.5 py-1.5 text-sm gap-x-1.5',
+      md: 'px-3 py-2 text-sm gap-x-2',
+      lg: 'px-3.5 py-2.5 text-sm gap-x-2.5',
+      xl: 'px-3.5 py-2.5 text-base gap-x-2.5'
+    },
+    truncate: {
+      true: {
+        label: 'text-left break-all line-clamp-1'
+      }
+    }
+  },
+  defaultVariants: {
+    color: 'blue',
+    size: 'md'
+  }
+} as const
+
+// export const button = tv({ extend: tv(theme), ...appConfig.ui.button })
+export const button = tv(theme)
+
+type ButtonVariants = VariantProps<typeof button>
+
+export interface ButtonProps extends ButtonVariants, LinkProps {
+  label?: string
+  icon?: string
+  leading?: boolean
+  leadingIcon?: string
+  trailing?: boolean
+  trailingIcon?: string
+  loading?: boolean
+  loadingIcon?: string
+  square?: boolean
+  block?: boolean
+  disabled?: boolean
+  padded?: boolean
+  truncate?: boolean
+  class?: any
+  ui?: Partial<typeof button>
+}
+</script>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { linkProps } from './Link.vue'
+import UIcon from './Icon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  ...linkProps,
+  label: {
+    type: String as PropType<ButtonProps['label']>,
+    default: undefined
+  },
+  icon: {
+    type: String as PropType<ButtonProps['icon']>,
+    default: undefined
+  },
+  leading: {
+    type: Boolean as PropType<ButtonProps['leading']>,
+    default: false
+  },
+  leadingIcon: {
+    type: String as PropType<ButtonProps['leadingIcon']>,
+    default: undefined
+  },
+  trailing: {
+    type: Boolean as PropType<ButtonProps['trailing']>,
+    default: false
+  },
+  trailingIcon: {
+    type: String as PropType<ButtonProps['trailingIcon']>,
+    default: undefined
+  },
+  loading: {
+    type: Boolean as PropType<ButtonProps['loading']>,
+    default: false
+  },
+  loadingIcon: {
+    type: String as PropType<ButtonProps['loadingIcon']>,
+    default: undefined
+  },
+  square: {
+    type: Boolean as PropType<ButtonProps['square']>,
+    default: false
+  },
+  block: {
+    type: Boolean as PropType<ButtonProps['block']>,
+    default: false
+  },
+  disabled: {
+    type: Boolean as PropType<ButtonProps['disabled']>,
+    default: false
+  },
+  padded: {
+    type: Boolean as PropType<ButtonProps['padded']>,
+    default: false
+  },
+  truncate: {
+    type: Boolean as PropType<ButtonProps['truncate']>,
+    default: false
+  },
+  color: {
+    type: String as PropType<ButtonProps['color']>,
+    default: undefined
+  },
+  size: {
+    type: String as PropType<ButtonProps['size']>,
+    default: undefined
+  },
+  class: {
+    type: String as PropType<ButtonProps['class']>,
+    default: undefined
+  },
+  ui: {
+    type: Object as PropType<ButtonProps['ui']>,
+    default: undefined
+  }
+})
+
+
+const slots = useSlots()
+
+// Computed
+
+const isLeading = computed(() => (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon)
+
+const isTrailing = computed(() => (props.icon && props.trailing) || (props.loading && props.trailing) || props.trailingIcon)
+
+const ui = computed(() => tv({ extend: button, ...props.ui })({
+  color: props.color,
+  size: props.size,
+  square: props.square || (!slots.default && !props.label),
+  class: props.class
+}))
+
+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
+})
+</script>
+
+<template>
+  <ULink :type="type" :disabled="disabled || loading" :class="ui.base()" v-bind="$attrs">
+    <!-- <slot name="leading" :disabled="disabled" :loading="loading">
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.icon({ isLeading })" aria-hidden="true" />
+    </slot> -->
+
+    <span v-if="label || $slots.default" :class="ui.label({ truncate })">
+      <slot>
+        {{ label }}
+      </slot>
+    </span>
+
+    <!-- <slot name="trailing" :disabled="disabled" :loading="loading">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    </slot> -->
+  </ULink>
+</template>

modules/ui/runtime/components/Icon.vue

@@ -0,0 +1,12 @@
+<template>
+  <Icon :name="name" />
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</script>

modules/ui/runtime/components/Link.vue

@@ -0,0 +1,168 @@
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { NuxtLinkProps } from '#app'
+import type { RouteLocationRaw } from '#vue-router'
+
+export interface LinkProps extends NuxtLinkProps {
+  as?: string
+  type?: string
+  disabled?: boolean
+  active?: boolean
+  exact?: boolean
+  exactQuery?: boolean
+  exactHash?: boolean
+  inactiveClass?: string
+}
+
+export const linkProps = {
+  // Routing
+  to: {
+    type: [String, Object] as PropType<RouteLocationRaw>,
+    default: undefined,
+    required: false
+  },
+  href: {
+    type: [String, Object] as PropType<RouteLocationRaw>,
+    default: undefined,
+    required: false
+  },
+
+  // Attributes
+  target: {
+    type: String as PropType<NuxtLinkProps['target']>,
+    default: undefined,
+    required: false
+  },
+  rel: {
+    type: String as PropType<NuxtLinkProps['rel']>,
+    default: undefined,
+    required: false
+  },
+  noRel: {
+    type: Boolean as PropType<NuxtLinkProps['noRel']>,
+    default: undefined,
+    required: false
+  },
+
+  // Prefetching
+  prefetch: {
+    type: Boolean as PropType<NuxtLinkProps['prefetch']>,
+    default: undefined,
+    required: false
+  },
+  noPrefetch: {
+    type: Boolean as PropType<NuxtLinkProps['noPrefetch']>,
+    default: undefined,
+    required: false
+  },
+
+  // Styling
+  activeClass: {
+    type: String as PropType<NuxtLinkProps['activeClass']>,
+    default: undefined,
+    required: false
+  },
+  exactActiveClass: {
+    type: String as PropType<NuxtLinkProps['exactActiveClass']>,
+    default: undefined,
+    required: false
+  },
+  prefetchedClass: {
+    type: String as PropType<NuxtLinkProps['prefetchedClass']>,
+    default: undefined,
+    required: false
+  },
+
+  // Vue Router's `<RouterLink>` additional props
+  replace: {
+    type: Boolean as PropType<NuxtLinkProps['replace']>,
+    default: undefined,
+    required: false
+  },
+  ariaCurrentValue: {
+    type: String as PropType<NuxtLinkProps['ariaCurrentValue']>,
+    default: undefined,
+    required: false
+  },
+
+  // Edge cases handling
+  external: {
+    type: Boolean as PropType<NuxtLinkProps['external']>,
+    default: undefined,
+    required: false
+  },
+
+  // Specific props
+  as: {
+    type: String as PropType<LinkProps['as']>,
+    default: 'button'
+  },
+  type: {
+    type: String as PropType<LinkProps['type']>,
+    default: 'button'
+  },
+  disabled: {
+    type: Boolean as PropType<LinkProps['disabled']>,
+    default: null
+  },
+  active: {
+    type: Boolean as PropType<LinkProps['active']>,
+    default: undefined
+  },
+  exact: {
+    type: Boolean as PropType<LinkProps['exact']>,
+    default: false
+  },
+  exactQuery: {
+    type: Boolean as PropType<LinkProps['exactQuery']>,
+    default: false
+  },
+  exactHash: {
+    type: Boolean as PropType<LinkProps['exactHash']>,
+    default: false
+  },
+  inactiveClass: {
+    type: String as PropType<LinkProps['inactiveClass']>,
+    default: undefined
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { isEqual } from 'ohash'
+import type { RouteLocation } from '#vue-router'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps(linkProps)
+
+function resolveLinkClass (route: RouteLocation, currentRoute: RouteLocation, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
+  if (props.exactQuery && !isEqual(route.query, currentRoute.query)) {
+    return props.inactiveClass
+  }
+  if (props.exactHash && route.hash !== currentRoute.hash) {
+    return props.inactiveClass
+  }
+
+  if (props.exact && isExactActive) {
+    return props.activeClass
+  }
+
+  if (!props.exact && isActive) {
+    return props.activeClass
+  }
+
+  return props.inactiveClass
+}
+</script>
+
+<template>
+  <component :is="as" v-if="!to" :type="type" :disabled="disabled" v-bind="$attrs" :class="active ? activeClass : inactiveClass">
+    <slot v-bind="{ isActive: active }" />
+  </component>
+  <NuxtLink v-else v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }" v-bind="$props" custom>
+    <a v-bind="$attrs" :href="!disabled ? href : undefined" :aria-disabled="disabled ? 'true' : undefined" :role="disabled ? 'link' : undefined" :rel="rel" :target="target" :class="active !== undefined ? (active ? activeClass : inactiveClass) : resolveLinkClass(route, $route, { isActive, isExactActive })" @click="(e) => (!isExternal && !disabled) && navigate(e)">
+      <slot v-bind="{ isActive: active !== undefined ? active : (exact ? isExactActive : isActive) }" />
+    </a>
+  </NuxtLink>
+</template>

nuxt.config.ts

@@ -0,0 +1,11 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  css: ['~/assets/css/main.css'],
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+})

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^3.10.3",
+    "autoprefixer": "^10.4.18",
+    "defu": "^6.1.4",
+    "nuxt": "npm:nuxt-nightly@pr-26085",
+    "postcss": "^8.4.35",
+    "radix-vue": "^1.4.9",
+    "tailwind-variants": "^0.2.0",
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "vue-tsc": "^2.0.5"
+  },
+  "dependencies": {
+    "ohash": "^1.1.3"
+  }
+}

tailwind.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>> {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./modules/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./app.config.ts",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}