arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: init

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-05 18:45:21 +01:00
commit f5e60a00ba
15 changed files with 7198 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@@ -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

75
README.md Normal file
View File

@@ -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.

12
app.config.ts Normal file
View File

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

5
app.vue Normal file
View File

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

3
assets/css/main.css Normal file
View File

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

31
modules/ui/index.ts Normal file
View File

@@ -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'))
}
})

190
modules/ui/runtime/components/Button.vue Normal file
View File

@@ -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>

12
modules/ui/runtime/components/Icon.vue Normal file
View File

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

168
modules/ui/runtime/components/Link.vue Normal file
View File

@@ -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>

11
nuxt.config.ts Normal file
View File

@@ -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: {},
},
},
})

28
package.json Normal file
View File

@@ -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"
}
}

6617
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

18
tailwind.config.ts Normal file
View File

@@ -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: [],
}

4
tsconfig.json Normal file
View File

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