arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +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>

12
src/components/elements/Avatar.vue
View File

@@ -5,11 +5,11 @@
<span v-else-if="gradientPlaceholder" class="w-full h-full overflow-hidden" :class="roundedClass" v-html="gradientPlaceholder" />
<span
v-else-if="placeholder"
class="font-medium leading-none text-white uppercase"
class="font-medium leading-none u-text-gray-900 uppercase"
>{{ placeholder }}</span>
<svg
v-else
class="w-full h-full text-tw-gray-300"
class="w-full h-full u-text-gray-300"
:class="roundedClass"
fill="currentColor"
viewBox="0 0 24 24"
@@ -21,7 +21,7 @@
<span
v-if="status"
class="absolute top-0 right-0 block rounded-full ring-1 ring-white dark:ring-black"
class="absolute top-0 right-0 block rounded-full ring-1 u-ring-white"
:class="statusClass"
/>
</span>
@@ -109,8 +109,8 @@ export default {
},
placeholderClass () {
return ({
true: 'bg-gray-500 dark:bg-gray-900',
false: 'bg-tw-gray-100'
true: 'u-bg-gray-100',
false: 'u-bg-gray-100'
})[!!this.alt]
},
avatarClass () {
@@ -126,7 +126,7 @@ export default {
({
online: 'bg-green-400',
idle: 'bg-yellow-400',
invisible: 'bg-tw-gray-300',
invisible: 'u-bg-gray-300',
donotdisturb: 'bg-red-400',
focus: 'bg-primary-500'
})[this.status],

14
src/components/elements/Button.vue
View File

@@ -195,13 +195,13 @@ export default {
primary: 'shadow-sm border border-transparent text-white bg-primary-600 hover:bg-primary-700 disabled:bg-primary-600',
secondary: 'border border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 disabled:bg-primary-100',
danger: 'shadow-sm border border-transparent text-white bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-500 disabled:bg-red-500 dark:disabled:bg-red-600',
white: 'shadow-sm border border-tw-gray-300 text-tw-gray-700 bg-tw-white hover:bg-tw-gray-50 disabled:bg-tw-white',
'white-hover': 'border border-transparent text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900 disabled:text-tw-gray-500',
gray: 'shadow-sm border border-tw-gray-300 text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 bg-gray-50 dark:bg-gray-800 disabled:text-tw-gray-500',
'gray-hover': 'border border-transparent text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800 disabled:text-tw-gray-500',
black: 'border border-transparent text-tw-white bg-tw-gray-800 hover:bg-tw-gray-900 focus:bg-tw-gray-900',
'black-hover': 'border border-transparent text-tw-gray-500 hover:text-tw-gray-900 focus:text-tw-gray-700 bg-transparent hover:bg-white dark:hover:bg-black focus:bg-white dark:focus:bg-black',
transparent: 'border border-transparent text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 disabled:hover:text-tw-gray-500',
white: 'shadow-sm border u-border-gray-300 u-text-gray-700 u-bg-white hover:u-bg-gray-50 disabled:u-bg-white',
'white-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900 disabled:u-text-gray-500',
gray: 'shadow-sm border u-border-gray-300 u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-gray-50 dark:bg-gray-800 disabled:u-text-gray-500',
'gray-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800 disabled:u-text-gray-500',
black: 'border border-transparent u-text-white u-bg-gray-800 hover:u-bg-gray-900 focus:u-bg-gray-900',
'black-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-900 focus:u-text-gray-700 bg-transparent hover:bg-white dark:hover:bg-black focus:bg-white dark:focus:bg-black',
transparent: 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 disabled:hover:u-text-gray-500',
link: 'border border-transparent text-primary-500 hover:text-primary-700 focus:text-primary-700',
gradient: 'shadow-sm text-white border border-transparent bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-700 hover:to-blue-700',
custom: ''

8
src/components/elements/Dropdown.vue
View File

@@ -76,7 +76,7 @@ export default {
},
itemsClass: {
type: String,
default: 'bg-white divide-y divide-gray-100 dark:divide-gray-700 rounded-md ring-1 ring-black ring-opacity-5'
default: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 ring-black ring-opacity-5'
},
itemClass: {
type: String,
@@ -84,11 +84,11 @@ export default {
},
itemActiveClass: {
type: String,
default: 'bg-tw-gray-100 text-tw-gray-900'
default: 'u-bg-gray-100 u-text-gray-900'
},
itemInactiveClass: {
type: String,
default: 'text-tw-gray-700'
default: 'u-text-gray-700'
},
itemDisabledClass: {
type: String,
@@ -96,7 +96,7 @@ export default {
},
itemIconClass: {
type: String,
default: 'mr-3 h-5 w-5 text-tw-gray-400 group-hover:text-tw-gray-500'
default: 'mr-3 h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500'
}
},
setup (props) {

4
src/components/elements/Toggle.vue
View File

@@ -1,11 +1,11 @@
<template>
<Switch
v-model="enabled"
:class="[enabled ? 'bg-primary-600' : 'bg-tw-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-200']"
:class="[enabled ? 'bg-primary-600' : 'u-bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-200']"
>
<span :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']">
<span :class="[enabled ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity']" aria-hidden="true">
<Icon :name="iconOff" class="h-3 w-3 text-tw-gray-400" />
<Icon :name="iconOff" class="h-3 w-3 u-text-gray-400" />
</span>
<span :class="[enabled ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity']" aria-hidden="true">
<Icon :name="iconOn" class="h-3 w-3 text-primary-600" />

6
src/components/forms/Checkbox.vue
View File

@@ -16,11 +16,11 @@
>
</div>
<div v-if="label" class="ml-3 text-sm">
<label :for="name" class="font-medium text-tw-gray-700">
<label :for="name" class="font-medium u-text-gray-700">
{{ label }}
<span v-if="required" class="text-red-400">*</span>
</label>
<p v-if="help" class="text-tw-gray-500">
<p v-if="help" class="u-text-gray-500">
{{ help }}
</p>
</div>
@@ -68,7 +68,7 @@ export default {
},
baseClass: {
type: String,
default: 'h-4 w-4 text-primary-600 focus:ring-primary-500 border-tw-gray-300 bg-white dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
default: 'h-4 w-4 text-primary-600 focus:ring-primary-500 u-border-gray-300 bg-white dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
},
customClass: {
type: String,

8
src/components/forms/Input.vue
View File

@@ -6,7 +6,7 @@
>
<Icon
:name="iconName"
class="text-tw-gray-400"
class="u-text-gray-400"
:class="iconClass"
/>
</div>
@@ -34,7 +34,7 @@
>
<Icon
:name="iconName"
class="text-tw-gray-400"
class="u-text-gray-400"
:class="iconClass"
/>
</div>
@@ -119,7 +119,7 @@ export default {
},
baseClass: {
type: String,
default: 'block w-full bg-tw-white text-tw-gray-700 disabled:cursor-not-allowed disabled:bg-tw-gray-50 focus:outline-none'
default: 'block w-full u-bg-white u-text-gray-700 disabled:cursor-not-allowed disabled:u-bg-gray-50 focus:outline-none'
},
customClass: {
type: String,
@@ -176,7 +176,7 @@ export default {
})[props.size])
const appearanceClass = computed(() => ({
default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm',
default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
})[props.appearance])

8
src/components/forms/InputGroup.vue
View File

@@ -1,13 +1,13 @@
<template>
<div
:class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-tw-gray-200': inline }"
:class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:u-border-gray-200': inline }"
>
<slot name="label">
<div :class="{ 'flex content-center justify-between': !inline }">
<label
v-if="label"
:for="name"
class="block text-sm font-medium leading-5 text-tw-gray-700"
class="block text-sm font-medium leading-5 u-text-gray-700"
:class="{'sm:mt-px sm:pt-2': inline }"
>
{{ label }}
@@ -15,7 +15,7 @@
</label>
<span
v-if="$slots.hint || hint"
class="text-sm leading-5 text-tw-gray-500"
class="text-sm leading-5 u-text-gray-500"
:class="{ 'mt-1 max-w-2xl': inline }"
><slot name="hint">{{ hint }}</slot></span>
</div>
@@ -24,7 +24,7 @@
:class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
>
<slot />
<p v-if="help" class="mt-2 text-sm text-tw-gray-500">
<p v-if="help" class="mt-2 text-sm u-text-gray-500">
{{ help }}
</p>
</div>

6
src/components/forms/Radio.vue
View File

@@ -14,11 +14,11 @@
@change="onChange"
>
<div v-if="label" class="flex flex-col ml-3">
<span class="block text-sm font-medium text-tw-gray-900">
<span class="block text-sm font-medium u-text-gray-900">
{{ label }}
<span v-if="required" class="text-red-400">*</span>
</span>
<span v-if="help" class="block text-sm text-tw-gray-500">{{ help }}</span>
<span v-if="help" class="block text-sm u-text-gray-500">{{ help }}</span>
</div>
</label>
</template>
@@ -60,7 +60,7 @@ export default {
},
baseClass: {
type: String,
default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 border-tw-gray-300 bg-tw-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 u-border-gray-300 u-bg-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
},
customClass: {
type: String,

2
src/components/forms/Select.vue
View File

@@ -90,7 +90,7 @@ export default {
},
baseClass: {
type: String,
default: 'block w-full disabled:cursor-not-allowed bg-tw-white text-tw-gray-700 disabled:bg-tw-gray-50 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm focus:outline-none'
default: 'block w-full disabled:cursor-not-allowed u-bg-white u-text-gray-700 disabled:u-bg-gray-50 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm focus:outline-none'
},
customClass: {
type: String,

14
src/components/forms/SelectCustom.vue
View File

@@ -5,7 +5,7 @@
<slot :toggle="toggle" :open="open">
<TwButton
icon="solid/selector"
icon-class="text-tw-gray-400"
icon-class="u-text-gray-400"
trailing
:size="size"
:variant="variant"
@@ -16,11 +16,11 @@
<div v-if="selectedOptions && selectedOptions.length" class="inline-flex w-full px-3 py-2 -my-2 -ml-3 truncate">
<span v-for="(selectedOption, index) of selectedOptions" :key="index" class="inline-flex items-center pr-2">
<slot name="label" :option="selectedOption">
<span class="text-tw-gray-700">{{ selectedOption[textAttribute] }}</span>
<span class="u-text-gray-700">{{ selectedOption[textAttribute] }}</span>
</slot>
</span>
</div>
<div v-else class="inline-flex w-full text-tw-gray-400">
<div v-else class="inline-flex w-full u-text-gray-400">
{{ placeholder || '' }}
</div>
</TwButton>
@@ -34,8 +34,8 @@
leave-active-class="transition duration-100 ease-in"
leave-to-class="opacity-0"
>
<div v-show="open" ref="tooltip" class="z-10 overflow-hidden bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700" :class="dropdownClass">
<div v-if="searchable" class="w-full border-b border-gray-200 dark:border-gray-700">
<div v-show="open" ref="tooltip" class="z-10 overflow-hidden bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 u-ring-gray-200" :class="dropdownClass">
<div v-if="searchable" class="w-full border-b u-border-gray-200">
<TwInput
ref="search"
v-model="q"
@@ -60,7 +60,7 @@
class="relative pl-3 pr-12 cursor-default select-none group hover:text-white hover:bg-primary-600"
:class="{
'bg-primary-600 text-white': active === -1,
'text-tw-gray-900': active !== -1,
'u-text-gray-900': active !== -1,
'py-2': dropdownSize === 'md',
'py-1 text-sm': dropdownSize === 'sm'
}"
@@ -80,7 +80,7 @@
:class="{
'font-semibold': isOptionSelected(option),
'bg-primary-600 text-white': active === index,
'text-tw-gray-900': active !== index,
'u-text-gray-900': active !== index,
'py-2': dropdownSize === 'md',
'py-1 text-sm': dropdownSize === 'sm'
}"

4
src/components/forms/Textarea.vue
View File

@@ -83,7 +83,7 @@ export default {
},
baseClass: {
type: String,
default: 'block w-full bg-tw-white text-tw-gray-700 disabled:cursor-not-allowed disabled:bg-tw-gray-50 focus:outline-none'
default: 'block w-full u-bg-white u-text-gray-700 disabled:cursor-not-allowed disabled:u-bg-gray-50 focus:outline-none'
},
customClass: {
type: String,
@@ -146,7 +146,7 @@ export default {
})[props.size])
const appearanceClass = computed(() => ({
default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm',
default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
})[props.appearance])

6
src/components/layout/Card.vue
View File

@@ -39,7 +39,7 @@ export default {
},
backgroundClass: {
type: String,
default: 'bg-tw-white'
default: 'u-bg-white'
},
shadowClass: {
type: String,
@@ -47,7 +47,7 @@ export default {
},
ringClass: {
type: String,
default: 'ring-1 ring-gray-200 dark:ring-gray-800'
default: 'ring-1 u-ring-gray-200'
},
bodyClass: {
type: String,
@@ -75,7 +75,7 @@ export default {
},
borderColorClass: {
type: String,
default: 'border-gray-200 dark:border-gray-800'
default: 'u-border-gray-200'
}
}
}

2
src/components/navigation/Pills.vue
View File

@@ -40,7 +40,7 @@ export default {
},
activeClass: {
type: String,
default: 'text-tw-gray-700 hover:text-tw-gray-700 focus:text-tw-gray-700'
default: 'u-text-gray-700 hover:u-text-gray-700 focus:u-text-gray-700'
}
},
computed: {

4
src/components/navigation/Tabs.vue
View File

@@ -28,11 +28,11 @@ export default {
},
activeClass: {
type: String,
default: 'border-black dark:border-white text-black dark:text-white hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white'
default: 'u-border-black u-text-black hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white'
},
inactiveClass: {
type: String,
default: 'border-transparent text-tw-gray-500 hover:text-tw-gray-700 hover:border-tw-gray-300'
default: 'border-transparent u-text-gray-500 hover:u-text-gray-700 hover:u-border-gray-300'
}
}
}

24
src/components/navigation/VerticalNavigation.vue
View File

@@ -2,7 +2,7 @@
<nav>
<h3
v-if="title || $slots.title"
class="flex items-center justify-between px-2 mb-1 text-xs font-semibold tracking-wider uppercase text-tw-gray-500"
class="flex items-center justify-between px-2 mb-1 text-xs font-semibold tracking-wider uppercase u-text-gray-500"
>
<slot name="title">
{{ title }}
@@ -34,7 +34,7 @@
<span class="truncate">{{ link.label }}</span>
</slot>
<div v-if="link.shortcuts" class="hidden ml-3 space-x-1 lg:flex">
<span v-for="shortcut of link.shortcuts" :key="shortcut" class="flex items-center justify-center w-4 h-4 font-normal bg-gray-200 rounded text-xxs dark:bg-gray-700 text-tw-gray-600">
<span v-for="shortcut of link.shortcuts" :key="shortcut" class="flex items-center justify-center w-4 h-4 font-normal bg-gray-200 rounded text-xxs dark:bg-gray-700 u-text-gray-600">
{{ shortcut }}
</span>
</div>
@@ -44,8 +44,8 @@
v-if="link.badge"
class="ml-auto inline-block py-0.5 px-3 text-xs rounded-full"
:class="{
'bg-tw-gray-50': isActive,
'bg-gray-200 dark:bg-gray-700 text-tw-gray-600': !isActive
'u-bg-gray-50': isActive,
'bg-gray-200 dark:bg-gray-700 u-text-gray-600': !isActive
}"
>
{{ link.badge }}
@@ -89,26 +89,26 @@ export default {
},
variantClass () {
return ({
white: 'text-tw-gray-600 hover:text-tw-gray-900 hover:bg-tw-gray-50 focus:bg-tw-gray-50',
gray: 'text-tw-gray-600 hover:text-tw-gray-900 hover:bg-tw-gray-50 focus:bg-tw-gray-50'
white: 'u-text-gray-600 hover:u-text-gray-900 hover:u-bg-gray-50 focus:u-bg-gray-50',
gray: 'u-text-gray-600 hover:u-text-gray-900 hover:u-bg-gray-50 focus:u-bg-gray-50'
})[this.variant]
},
activeVariantClass () {
return ({
white: 'text-tw-gray-900 bg-tw-gray-100 hover:text-tw-gray-900 hover:bg-tw-gray-100 focus:bg-tw-gray-100',
gray: 'text-tw-gray-900 bg-gray-200 dark:bg-gray-800 hover:text-tw-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 focus:bg-gray-200 dark:focus:bg-gray-800'
white: 'u-text-gray-900 u-bg-gray-100 hover:u-text-gray-900 hover:u-bg-gray-100 focus:u-bg-gray-100',
gray: 'u-text-gray-900 bg-gray-200 dark:bg-gray-800 hover:u-text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 focus:bg-gray-200 dark:focus:bg-gray-800'
})[this.variant]
},
iconClass () {
return ({
white: 'text-tw-gray-400 group-hover:text-tw-gray-500',
gray: 'text-tw-gray-400 group-hover:text-tw-gray-500'
white: 'u-text-gray-400 group-hover:u-text-gray-500',
gray: 'u-text-gray-400 group-hover:u-text-gray-500'
})[this.variant]
},
activeIconClass () {
return ({
white: 'text-tw-gray-500 group-hover:text-tw-gray-500',
gray: 'text-tw-gray-500 group-hover:text-tw-gray-500'
white: 'u-text-gray-500 group-hover:u-text-gray-500',
gray: 'u-text-gray-500 group-hover:u-text-gray-500'
})[this.variant]
}
},

2
src/components/overlays/Modal.vue
View File

@@ -30,7 +30,7 @@
<Card
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
v-bind="$attrs"
ring-class="sm:ring-1 sm:ring-transparent dark:ring-gray-700"
ring-class
>
<template v-if="$slots.header" #header>
<slot name="header" />

14
src/components/overlays/Notification.vue
View File

@@ -13,17 +13,17 @@
@mouseover="onMouseover"
@mouseout="onMouseout"
>
<div class="relative overflow-hidden rounded-lg ring-1 ring-gray-200 dark:ring-gray-700">
<div class="relative overflow-hidden rounded-lg ring-1 u-ring-gray-200">
<div class="p-4">
<div class="flex">
<div class="flex-shrink-0">
<Icon :name="iconName" class="w-6 h-6" :class="iconClass" />
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium leading-5 text-tw-gray-900">
<p class="text-sm font-medium leading-5 u-text-gray-900">
{{ title }}
</p>
<p v-if="description" class="mt-1 text-sm leading-5 text-tw-gray-500">
<p v-if="description" class="mt-1 text-sm leading-5 u-text-gray-500">
{{ description }}
</p>
<Button
@@ -34,8 +34,8 @@
@click.native.stop="cancel"
>
Undo
<div class="inline-flex items-center rounded bg-tw-gray-200 ml-1.5">
<span class="w-full px-1 text-center text-tw-gray-600 text-xxs">
<div class="inline-flex items-center rounded u-bg-gray-200 ml-1.5">
<span class="w-full px-1 text-center u-text-gray-600 text-xxs">
Z
</span>
</div>
@@ -43,7 +43,7 @@
</div>
<div class="flex-shrink-0 ml-4">
<button
class="transition duration-150 ease-in-out text-tw-gray-400 focus:outline-none hover:text-tw-gray-500 focus:text-tw-gray-500"
class="transition duration-150 ease-in-out u-text-gray-400 focus:outline-none hover:u-text-gray-500 focus:u-text-gray-500"
@click.stop="close"
>
<span class="sr-only">Close</span>
@@ -129,7 +129,7 @@ export default {
info: 'text-blue-400',
success: 'text-green-400',
error: 'text-red-400'
})[this.type] || 'text-tw-gray-400'
})[this.type] || 'u-text-gray-400'
},
progressBarStyle () {
const remainingPercent = this.remainingTime / this.timeout * 100

4
src/components/overlays/Slideover.vue
View File

@@ -38,14 +38,14 @@
</template>
<template v-else-if="title" #header>
<div class="flex items-center justify-between">
<h2 class="font-medium sm:leading-6 sm:text-lg text-tw-gray-900">
<h2 class="font-medium sm:leading-6 sm:text-lg u-text-gray-900">
{{ title }}
</h2>
<div class="flex items-center">
<button
type="button"
aria-label="Close panel"
class="rounded-md text-tw-gray-400 hover:text-tw-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
class="rounded-md u-text-gray-400 hover:u-text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
@click="open = false"
>
<Icon name="outline/x" class="w-6 h-6" />

108
src/index.ts
View File

@@ -59,57 +59,63 @@ export default defineNuxtModule<UiOptions>({
prefix: ''
},
shortcuts: {
'bg-tw-white': 'bg-white dark:bg-black',
'bg-tw-gray-50': 'bg-gray-50 dark:bg-gray-900',
'bg-tw-gray-100': 'bg-gray-100 dark:bg-gray-800',
'bg-tw-gray-200': 'bg-gray-200 dark:bg-gray-700',
'bg-tw-gray-300': 'bg-gray-300 dark:bg-gray-600',
'bg-tw-gray-400': 'bg-gray-400 dark:bg-gray-500',
'bg-tw-gray-500': 'bg-gray-500 dark:bg-gray-400',
'bg-tw-gray-600': 'bg-gray-600 dark:bg-gray-300',
'bg-tw-gray-700': 'bg-gray-700 dark:bg-gray-200',
'bg-tw-gray-800': 'bg-gray-800 dark:bg-gray-100',
'bg-tw-gray-900': 'bg-gray-900 dark:bg-gray-50',
'bg-tw-black': 'bg-black dark:bg-white',
'text-tw-white': 'text-white dark:text-black',
'text-tw-gray-50': 'text-gray-50 dark:text-gray-900',
'text-tw-gray-100': 'text-gray-100 dark:text-gray-800',
'text-tw-gray-200': 'text-gray-200 dark:text-gray-700',
'text-tw-gray-300': 'text-gray-300 dark:text-gray-600',
'text-tw-gray-400': 'text-gray-400 dark:text-gray-500',
'text-tw-gray-500': 'text-gray-500 dark:text-gray-400',
'text-tw-gray-600': 'text-gray-600 dark:text-gray-300',
'text-tw-gray-700': 'text-gray-700 dark:text-gray-200',
'text-tw-gray-800': 'text-gray-800 dark:text-gray-100',
'text-tw-gray-900': 'text-gray-900 dark:text-gray-50',
'text-tw-black': 'text-black dark:text-white',
'border-tw-gray-100': 'border-gray-100 dark:border-gray-900',
'border-tw-gray-200': 'border-gray-200 dark:border-gray-800',
'border-tw-gray-300': 'border-gray-300 dark:border-gray-700',
'border-tw-gray-400': 'border-gray-400 dark:border-gray-600',
'border-tw-gray-500': 'border-gray-500 dark:border-gray-500',
'border-tw-gray-600': 'border-gray-600 dark:border-gray-400',
'border-tw-gray-700': 'border-gray-700 dark:border-gray-300',
'border-tw-gray-800': 'border-gray-800 dark:border-gray-200',
'border-tw-gray-900': 'border-gray-900 dark:border-gray-100',
'divide-tw-gray-100': 'divide-gray-100 dark:divide-gray-900',
'divide-tw-gray-200': 'divide-gray-200 dark:divide-gray-800',
'divide-tw-gray-300': 'divide-gray-300 dark:divide-gray-700',
'divide-tw-gray-400': 'divide-gray-400 dark:divide-gray-600',
'divide-tw-gray-500': 'divide-gray-500 dark:divide-gray-500',
'divide-tw-gray-600': 'divide-gray-600 dark:divide-gray-400',
'divide-tw-gray-700': 'divide-gray-700 dark:divide-gray-300',
'divide-tw-gray-800': 'divide-gray-800 dark:divide-gray-200',
'divide-tw-gray-900': 'divide-gray-900 dark:divide-gray-100',
'ring-tw-gray-100': 'ring-gray-100 dark:ring-gray-900',
'ring-tw-gray-200': 'ring-gray-200 dark:ring-gray-800',
'ring-tw-gray-300': 'ring-gray-300 dark:ring-gray-700',
'ring-tw-gray-400': 'ring-gray-400 dark:ring-gray-600',
'ring-tw-gray-500': 'ring-gray-500 dark:ring-gray-500',
'ring-tw-gray-600': 'ring-gray-600 dark:ring-gray-400',
'ring-tw-gray-700': 'ring-gray-700 dark:ring-gray-300',
'ring-tw-gray-800': 'ring-gray-800 dark:ring-gray-200',
'ring-tw-gray-900': 'ring-gray-900 dark:ring-gray-100',
[`${prefix}-bg-white`]: 'bg-white dark:bg-black',
[`${prefix}-bg-gray-50`]: 'bg-gray-50 dark:bg-gray-900',
[`${prefix}-bg-gray-100`]: 'bg-gray-100 dark:bg-gray-800',
[`${prefix}-bg-gray-200`]: 'bg-gray-200 dark:bg-gray-700',
[`${prefix}-bg-gray-300`]: 'bg-gray-300 dark:bg-gray-600',
[`${prefix}-bg-gray-400`]: 'bg-gray-400 dark:bg-gray-500',
[`${prefix}-bg-gray-500`]: 'bg-gray-500 dark:bg-gray-400',
[`${prefix}-bg-gray-600`]: 'bg-gray-600 dark:bg-gray-300',
[`${prefix}-bg-gray-700`]: 'bg-gray-700 dark:bg-gray-200',
[`${prefix}-bg-gray-800`]: 'bg-gray-800 dark:bg-gray-100',
[`${prefix}-bg-gray-900`]: 'bg-gray-900 dark:bg-gray-50',
[`${prefix}-bg-black`]: 'bg-black dark:bg-white',
[`${prefix}-text-white`]: 'text-white dark:text-black',
[`${prefix}-text-gray-50`]: 'text-gray-50 dark:text-gray-900',
[`${prefix}-text-gray-100`]: 'text-gray-100 dark:text-gray-800',
[`${prefix}-text-gray-200`]: 'text-gray-200 dark:text-gray-700',
[`${prefix}-text-gray-300`]: 'text-gray-300 dark:text-gray-600',
[`${prefix}-text-gray-400`]: 'text-gray-400 dark:text-gray-500',
[`${prefix}-text-gray-500`]: 'text-gray-500 dark:text-gray-400',
[`${prefix}-text-gray-600`]: 'text-gray-600 dark:text-gray-300',
[`${prefix}-text-gray-700`]: 'text-gray-700 dark:text-gray-200',
[`${prefix}-text-gray-800`]: 'text-gray-800 dark:text-gray-100',
[`${prefix}-text-gray-900`]: 'text-gray-900 dark:text-gray-50',
[`${prefix}-text-black`]: 'text-black dark:text-white',
[`${prefix}-border-white`]: 'border-white dark:border-black',
[`${prefix}-border-gray-100`]: 'border-gray-100 dark:border-gray-900',
[`${prefix}-border-gray-200`]: 'border-gray-200 dark:border-gray-800',
[`${prefix}-border-gray-300`]: 'border-gray-300 dark:border-gray-700',
[`${prefix}-border-gray-400`]: 'border-gray-400 dark:border-gray-600',
[`${prefix}-border-gray-500`]: 'border-gray-500 dark:border-gray-500',
[`${prefix}-border-gray-600`]: 'border-gray-600 dark:border-gray-400',
[`${prefix}-border-gray-700`]: 'border-gray-700 dark:border-gray-300',
[`${prefix}-border-gray-800`]: 'border-gray-800 dark:border-gray-200',
[`${prefix}-border-gray-900`]: 'border-gray-900 dark:border-gray-100',
[`${prefix}-border-black`]: 'border-black dark:border-white',
[`${prefix}-divide-white`]: 'divide-white dark:divide-black',
[`${prefix}-divide-gray-100`]: 'divide-gray-100 dark:divide-gray-900',
[`${prefix}-divide-gray-200`]: 'divide-gray-200 dark:divide-gray-800',
[`${prefix}-divide-gray-300`]: 'divide-gray-300 dark:divide-gray-700',
[`${prefix}-divide-gray-400`]: 'divide-gray-400 dark:divide-gray-600',
[`${prefix}-divide-gray-500`]: 'divide-gray-500 dark:divide-gray-500',
[`${prefix}-divide-gray-600`]: 'divide-gray-600 dark:divide-gray-400',
[`${prefix}-divide-gray-700`]: 'divide-gray-700 dark:divide-gray-300',
[`${prefix}-divide-gray-800`]: 'divide-gray-800 dark:divide-gray-200',
[`${prefix}-divide-gray-900`]: 'divide-gray-900 dark:divide-gray-100',
[`${prefix}-divide-black`]: 'divide-black dark:divide-white',
[`${prefix}-ring-white`]: 'ring-white dark:ring-black',
[`${prefix}-ring-gray-100`]: 'ring-gray-100 dark:ring-gray-900',
[`${prefix}-ring-gray-200`]: 'ring-gray-200 dark:ring-gray-800',
[`${prefix}-ring-gray-300`]: 'ring-gray-300 dark:ring-gray-700',
[`${prefix}-ring-gray-400`]: 'ring-gray-400 dark:ring-gray-600',
[`${prefix}-ring-gray-500`]: 'ring-gray-500 dark:ring-gray-500',
[`${prefix}-ring-gray-600`]: 'ring-gray-600 dark:ring-gray-400',
[`${prefix}-ring-gray-700`]: 'ring-gray-700 dark:ring-gray-300',
[`${prefix}-ring-gray-800`]: 'ring-gray-800 dark:ring-gray-200',
[`${prefix}-ring-gray-900`]: 'ring-gray-900 dark:ring-gray-100',
[`${prefix}-ring-black`]: 'ring-black dark:ring-white',
...shortcuts
},
rules: [