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: replace shortcuts with prefix

Browse Source
This commit is contained in:
Benjamin Canac
2021-11-24 17:52:32 +01:00
parent 45827b317c
commit 2ee6f8b099
24 changed files with 183 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/app.vue
View File

@@ -1,10 +1,10 @@
<template>
<div>
<nav class="bg-white dark:bg-black border-b border-tw-gray-200 fixed top-0 inset-x-0 z-10">
<nav class="u-bg-white border-b u-border-gray-200 fixed top-0 inset-x-0 z-10">
<UContainer padded>
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<NuxtLink to="/" class="block font-bold text-lg text-tw-gray-900">
<NuxtLink to="/" class="block font-bold text-lg u-text-gray-900">
@nuxthq/ui
</NuxtLink>
</div>
@@ -22,7 +22,7 @@
<nav class="overflow-y-auto h-auto py-12">
<ul class="space-y-6">
<li v-for="section of sections" :key="section">
<h5 class="mb-3 uppercase tracking-wide font-semibold text-xs text-tw-gray-900">
<h5 class="mb-3 uppercase tracking-wide font-semibold text-xs u-text-gray-900">
{{ section.label }}
</h5>
<ul class="space-y-1.5">
@@ -31,7 +31,7 @@
:to="link.to"
class="relative block text-sm rounded-md"
active-class="text-primary-600"
inactive-class="text-tw-gray-500 hover:text-tw-gray-700"
inactive-class="u-text-gray-500 hover:u-text-gray-700"
exact
>
{{ link.label }}
@@ -54,19 +54,6 @@
<script setup>
import { UseDark } from '@vueuse/components'
useMeta({
title: '@nuxthq/ui',
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
],
htmlAttrs: {
class: 'bg-tw-white'
},
bodyAttrs: {
class: 'bg-tw-gray-50 text-tw-gray-700'
}
})
const sections = [
{ label: 'Getting Started', links: [{ label: 'Installation', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }] },
{ label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }, { label: 'Link', to: '/components/Link' }, { label: 'Toggle', to: '/components/Toggle' }] },

12
docs/nuxt.config.ts
View File

@@ -2,6 +2,18 @@ import { defineNuxtConfig } from 'nuxt3'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
meta: {
title: '@nuxthq/ui',
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
],
htmlAttrs: {
class: 'u-bg-white'
},
bodyAttrs: {
class: 'u-bg-gray-50 u-text-gray-700'
}
},
buildModules: [
'../src'
],

38
docs/pages/examples.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class="space-y-4">
<div class="pb-10 border-b border-tw-gray-200 mb-10">
<div class="pb-10 border-b u-border-gray-200 mb-10">
<div>
<h1 class="inline-block text-3xl font-extrabold text-tw-gray-900 tracking-tight">
<h1 class="inline-block text-3xl font-extrabold u-text-gray-900 tracking-tight">
Examples
</h1>
</div>
<p class="mt-1 text-lg text-tw-gray-500">
<p class="mt-1 text-lg u-text-gray-500">
Examples of real-life usage of components.
</p>
</div>
<div>
<div class="font-medium text-sm mb-1 text-tw-gray-700">
<div class="font-medium text-sm mb-1 u-text-gray-700">
Avatar:
</div>
@@ -21,7 +21,7 @@
</div>
<div>
<div class="font-medium text-sm mb-1 text-tw-gray-700">
<div class="font-medium text-sm mb-1 u-text-gray-700">
Button:
</div>
@@ -31,7 +31,7 @@
</div>
<div>
<div class="font-medium text-sm mb-1 text-tw-gray-700">
<div class="font-medium text-sm mb-1 u-text-gray-700">
Modal:
</div>
@@ -45,11 +45,11 @@
<UIcon name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-tw-gray-900">
<h3 class="text-lg leading-6 font-medium u-text-gray-900">
Deactivate account
</h3>
<div class="mt-2">
<p class="text-sm text-tw-gray-500">
<p class="text-sm u-text-gray-500">
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.
</p>
</div>
@@ -59,7 +59,7 @@
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
Deactivate
</button>
<button ref="cancelButtonRef" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-tw-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-tw-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" @click="open = false">
<button ref="cancelButtonRef" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border u-border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium u-text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" @click="open = false">
Cancel
</button>
</div>
@@ -67,7 +67,7 @@
</div>
<div>
<div class="font-medium text-sm mb-1 text-tw-gray-700">
<div class="font-medium text-sm mb-1 u-text-gray-700">
Dropdown:
</div>
@@ -79,7 +79,7 @@
</div>
<div>
<div class="font-medium text-sm mb-1 text-tw-gray-700">
<div class="font-medium text-sm mb-1 u-text-gray-700">
Dropdown with avatar:
</div>
@@ -96,7 +96,7 @@
</div>
<div>
<div class="font-medium text-sm mb-1 text-tw-gray-700">
<div class="font-medium text-sm mb-1 u-text-gray-700">
Popover:
</div>
@@ -124,10 +124,10 @@
<div v-html="item.icon" />
</div>
<div class="ml-4">
<p class="text-sm font-medium text-tw-gray-900">
<p class="text-sm font-medium u-text-gray-900">
{{ item.name }}
</p>
<p class="text-sm text-tw-gray-500">
<p class="text-sm u-text-gray-500">
{{ item.description }}
</p>
</div>
@@ -139,11 +139,11 @@
class="flow-root px-2 py-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<span class="flex items-center">
<span class="text-sm font-medium text-tw-gray-900">
<span class="text-sm font-medium u-text-gray-900">
Documentation
</span>
</span>
<span class="block text-sm text-tw-gray-500">
<span class="block text-sm u-text-gray-500">
Start integrating products and tools
</span>
</a>
@@ -154,7 +154,7 @@
</div>
<!-- <div>
<div class="font-medium text-sm mb-1 text-tw-gray-700">
<div class="font-medium text-sm mb-1 u-text-gray-700">
Tooltip:
</div>
@@ -164,14 +164,14 @@
</div> -->
<div>
<div class="font-medium text-sm mb-1 text-tw-gray-700">
<div class="font-medium text-sm mb-1 u-text-gray-700">
Toggle:
</div>
<UToggle v-model="isSwitchEnabled" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
</div>
<div>
<div class="font-medium text-sm mb-1 text-tw-gray-700">
<div class="font-medium text-sm mb-1 u-text-gray-700">
Card:
</div>

20
docs/pages/index.vue
View File

@@ -1,29 +1,29 @@
<template>
<div class="space-y-4">
<div class="pb-10 border-b border-tw-gray-200 mb-10">
<div class="pb-10 border-b u-border-gray-200 mb-10">
<div>
<h1 class="inline-block text-3xl font-extrabold text-tw-gray-900 tracking-tight">
<h1 class="inline-block text-3xl font-extrabold u-text-gray-900 tracking-tight">
Documentation
</h1>
</div>
<p class="mt-1 text-lg text-tw-gray-500">
<p class="mt-1 text-lg u-text-gray-500">
Components library as a Nuxt3 module using <a href="https://github.com/antfu/unocss" target="_blank">UnoCSS</a>.
</p>
</div>
<h2 class="font-bold text-2xl text-tw-gray-900">
<h2 class="font-bold text-2xl u-text-gray-900">
Installation
</h2>
<pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
<pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm">
yarn add --dev @nuxthq/ui</code>
</pre>
<p>Then, register the module in your `nuxt.config.js`:</p>
<pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
<pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm">
import { defineNuxtConfig } from 'nuxt3'
@@ -36,7 +36,7 @@ export default defineNuxtConfig({
<p>If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:</p>
<pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
<pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm">
{
"devDependencies": {
@@ -45,7 +45,7 @@ export default defineNuxtConfig({
}</code>
</pre>
<h2 class="font-bold text-2xl text-tw-gray-900">
<h2 class="font-bold text-2xl u-text-gray-900">
Options
</h2>
@@ -57,7 +57,7 @@ export default defineNuxtConfig({
Example:
</p>
<pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
<pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm">
import { defineNuxtConfig } from 'nuxt3'
@@ -79,7 +79,7 @@ export default defineNuxtConfig({
Example:
</p>
<pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
<pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm">
import { defineNuxtConfig } from 'nuxt3'

20
docs/pages/migration.vue
View File

@@ -1,37 +1,37 @@
<template>
<div class="space-y-4">
<div class="pb-10 border-b border-tw-gray-200 mb-10">
<div class="pb-10 border-b u-border-gray-200 mb-10">
<div>
<h1 class="inline-block text-3xl font-extrabold text-tw-gray-900 tracking-tight">
<h1 class="inline-block text-3xl font-extrabold u-text-gray-900 tracking-tight">
Migration
</h1>
</div>
<p class="mt-1 text-lg text-tw-gray-500">
<p class="mt-1 text-lg u-text-gray-500">
Check out the components that have been migrated to Vue3 coming from `@nuxthq/volta-ui`.
</p>
</div>
<UCard body-class>
<table class="min-w-full divide-y divide-tw-gray-200">
<thead class="bg-tw-gray-50">
<table class="min-w-full divide-y u-divide-gray-200">
<thead class="u-bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-tw-gray-500 uppercase tracking-wider">
<th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
Component
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-tw-gray-500 uppercase tracking-wider">
<th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
Ready?
</th>
</tr>
</thead>
<tbody>
<tr v-for="(component, index) of components" :key="index" :class="index % 2 === 0 ? 'bg-tw-white' : 'bg-tw-gray-50'">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-tw-gray-900">
<tr v-for="(component, index) of components" :key="index" :class="index % 2 === 0 ? 'u-bg-white' : 'u-bg-gray-50'">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium u-text-gray-900">
<NuxtLink :to="component.to" class="hover:underline">
{{ component.label }}
</NuxtLink>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-tw-gray-500">
<td class="px-6 py-4 whitespace-nowrap text-sm u-text-gray-500">
<span v-if="component.ready">✅</span>
<span v-else>❌</span>
</td>