arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-01 20:57:57 +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> <template>
<div> <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> <UContainer padded>
<div class="flex items-center justify-between h-16"> <div class="flex items-center justify-between h-16">
<div class="flex items-center"> <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 @nuxthq/ui
</NuxtLink> </NuxtLink>
</div> </div>
@@ -22,7 +22,7 @@
<nav class="overflow-y-auto h-auto py-12"> <nav class="overflow-y-auto h-auto py-12">
<ul class="space-y-6"> <ul class="space-y-6">
<li v-for="section of sections" :key="section"> <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 }} {{ section.label }}
</h5> </h5>
<ul class="space-y-1.5"> <ul class="space-y-1.5">
@@ -31,7 +31,7 @@
:to="link.to" :to="link.to"
class="relative block text-sm rounded-md" class="relative block text-sm rounded-md"
active-class="text-primary-600" 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 exact
> >
{{ link.label }} {{ link.label }}
@@ -54,19 +54,6 @@
<script setup> <script setup>
import { UseDark } from '@vueuse/components' 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 = [ const sections = [
{ label: 'Getting Started', links: [{ label: 'Installation', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }] }, { 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' }] }, { 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 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({ 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: [ buildModules: [
'../src' '../src'
], ],

38
docs/pages/examples.vue
View File

@@ -1,19 +1,19 @@
<template> <template>
<div class="space-y-4"> <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> <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 Examples
</h1> </h1>
</div> </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. Examples of real-life usage of components.
</p> </p>
</div> </div>
<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: Avatar:
</div> </div>
@@ -21,7 +21,7 @@
</div> </div>
<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: Button:
</div> </div>
@@ -31,7 +31,7 @@
</div> </div>
<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: Modal:
</div> </div>
@@ -45,11 +45,11 @@
<UIcon name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" /> <UIcon name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
</div> </div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <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 Deactivate account
</h3> </h3>
<div class="mt-2"> <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. 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> </p>
</div> </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"> <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 Deactivate
</button> </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 Cancel
</button> </button>
</div> </div>
@@ -67,7 +67,7 @@
</div> </div>
<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: Dropdown:
</div> </div>
@@ -79,7 +79,7 @@
</div> </div>
<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: Dropdown with avatar:
</div> </div>
@@ -96,7 +96,7 @@
</div> </div>
<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: Popover:
</div> </div>
@@ -124,10 +124,10 @@
<div v-html="item.icon" /> <div v-html="item.icon" />
</div> </div>
<div class="ml-4"> <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 }} {{ item.name }}
</p> </p>
<p class="text-sm text-tw-gray-500"> <p class="text-sm u-text-gray-500">
{{ item.description }} {{ item.description }}
</p> </p>
</div> </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" 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="flex items-center">
<span class="text-sm font-medium text-tw-gray-900"> <span class="text-sm font-medium u-text-gray-900">
Documentation Documentation
</span> </span>
</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 Start integrating products and tools
</span> </span>
</a> </a>
@@ -154,7 +154,7 @@
</div> </div>
<!-- <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: Tooltip:
</div> </div>
@@ -164,14 +164,14 @@
</div> --> </div> -->
<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: Toggle:
</div> </div>
<UToggle v-model="isSwitchEnabled" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" /> <UToggle v-model="isSwitchEnabled" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
</div> </div>
<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: Card:
</div> </div>

20
docs/pages/index.vue
View File

@@ -1,29 +1,29 @@
<template> <template>
<div class="space-y-4"> <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> <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 Documentation
</h1> </h1>
</div> </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>. Components library as a Nuxt3 module using <a href="https://github.com/antfu/unocss" target="_blank">UnoCSS</a>.
</p> </p>
</div> </div>
<h2 class="font-bold text-2xl text-tw-gray-900"> <h2 class="font-bold text-2xl u-text-gray-900">
Installation Installation
</h2> </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"> <code class="text-sm">
yarn add --dev @nuxthq/ui</code> yarn add --dev @nuxthq/ui</code>
</pre> </pre>
<p>Then, register the module in your `nuxt.config.js`:</p> <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"> <code class="text-sm">
import { defineNuxtConfig } from 'nuxt3' 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> <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"> <code class="text-sm">
{ {
"devDependencies": { "devDependencies": {
@@ -45,7 +45,7 @@ export default defineNuxtConfig({
}</code> }</code>
</pre> </pre>
<h2 class="font-bold text-2xl text-tw-gray-900"> <h2 class="font-bold text-2xl u-text-gray-900">
Options Options
</h2> </h2>
@@ -57,7 +57,7 @@ export default defineNuxtConfig({
Example: Example:
</p> </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"> <code class="text-sm">
import { defineNuxtConfig } from 'nuxt3' import { defineNuxtConfig } from 'nuxt3'
@@ -79,7 +79,7 @@ export default defineNuxtConfig({
Example: Example:
</p> </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"> <code class="text-sm">
import { defineNuxtConfig } from 'nuxt3' import { defineNuxtConfig } from 'nuxt3'

20
docs/pages/migration.vue
View File

@@ -1,37 +1,37 @@
<template> <template>
<div class="space-y-4"> <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> <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 Migration
</h1> </h1>
</div> </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`. Check out the components that have been migrated to Vue3 coming from `@nuxthq/volta-ui`.
</p> </p>
</div> </div>
<UCard body-class> <UCard body-class>
<table class="min-w-full divide-y divide-tw-gray-200"> <table class="min-w-full divide-y u-divide-gray-200">
<thead class="bg-tw-gray-50"> <thead class="u-bg-gray-50">
<tr> <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 Component
</th> </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? Ready?
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(component, index) of components" :key="index" :class="index % 2 === 0 ? 'bg-tw-white' : 'bg-tw-gray-50'"> <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 text-tw-gray-900"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium u-text-gray-900">
<NuxtLink :to="component.to" class="hover:underline"> <NuxtLink :to="component.to" class="hover:underline">
{{ component.label }} {{ component.label }}
</NuxtLink> </NuxtLink>
</td> </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-if="component.ready">✅</span>
<span v-else>❌</span> <span v-else>❌</span>
</td> </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="gradientPlaceholder" class="w-full h-full overflow-hidden" :class="roundedClass" v-html="gradientPlaceholder" />
<span <span
v-else-if="placeholder" v-else-if="placeholder"
class="font-medium leading-none text-white uppercase" class="font-medium leading-none u-text-gray-900 uppercase"
>{{ placeholder }}</span> >{{ placeholder }}</span>
<svg <svg
v-else v-else
class="w-full h-full text-tw-gray-300" class="w-full h-full u-text-gray-300"
:class="roundedClass" :class="roundedClass"
fill="currentColor" fill="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -21,7 +21,7 @@
<span <span
v-if="status" 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" :class="statusClass"
/> />
</span> </span>
@@ -109,8 +109,8 @@ export default {
}, },
placeholderClass () { placeholderClass () {
return ({ return ({
true: 'bg-gray-500 dark:bg-gray-900', true: 'u-bg-gray-100',
false: 'bg-tw-gray-100' false: 'u-bg-gray-100'
})[!!this.alt] })[!!this.alt]
}, },
avatarClass () { avatarClass () {
@@ -126,7 +126,7 @@ export default {
({ ({
online: 'bg-green-400', online: 'bg-green-400',
idle: 'bg-yellow-400', idle: 'bg-yellow-400',
invisible: 'bg-tw-gray-300', invisible: 'u-bg-gray-300',
donotdisturb: 'bg-red-400', donotdisturb: 'bg-red-400',
focus: 'bg-primary-500' focus: 'bg-primary-500'
})[this.status], })[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', 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', 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', 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: '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 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', '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 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: '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 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', '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 text-tw-white bg-tw-gray-800 hover:bg-tw-gray-900 focus:bg-tw-gray-900', 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 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', '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 text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 disabled:hover:text-tw-gray-500', 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', 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', 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: '' custom: ''

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

@@ -76,7 +76,7 @@ export default {
}, },
itemsClass: { itemsClass: {
type: String, 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: { itemClass: {
type: String, type: String,
@@ -84,11 +84,11 @@ export default {
}, },
itemActiveClass: { itemActiveClass: {
type: String, type: String,
default: 'bg-tw-gray-100 text-tw-gray-900' default: 'u-bg-gray-100 u-text-gray-900'
}, },
itemInactiveClass: { itemInactiveClass: {
type: String, type: String,
default: 'text-tw-gray-700' default: 'u-text-gray-700'
}, },
itemDisabledClass: { itemDisabledClass: {
type: String, type: String,
@@ -96,7 +96,7 @@ export default {
}, },
itemIconClass: { itemIconClass: {
type: String, 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) { setup (props) {

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

@@ -1,11 +1,11 @@
<template> <template>
<Switch <Switch
v-model="enabled" 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 ? '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"> <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>
<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"> <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" /> <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>
<div v-if="label" class="ml-3 text-sm"> <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 }} {{ label }}
<span v-if="required" class="text-red-400">*</span> <span v-if="required" class="text-red-400">*</span>
</label> </label>
<p v-if="help" class="text-tw-gray-500"> <p v-if="help" class="u-text-gray-500">
{{ help }} {{ help }}
</p> </p>
</div> </div>
@@ -68,7 +68,7 @@ export default {
}, },
baseClass: { baseClass: {
type: String, 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: { customClass: {
type: String, type: String,

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

@@ -6,7 +6,7 @@
> >
<Icon <Icon
:name="iconName" :name="iconName"
class="text-tw-gray-400" class="u-text-gray-400"
:class="iconClass" :class="iconClass"
/> />
</div> </div>
@@ -34,7 +34,7 @@
> >
<Icon <Icon
:name="iconName" :name="iconName"
class="text-tw-gray-400" class="u-text-gray-400"
:class="iconClass" :class="iconClass"
/> />
</div> </div>
@@ -119,7 +119,7 @@ export default {
}, },
baseClass: { baseClass: {
type: String, 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: { customClass: {
type: String, type: String,
@@ -176,7 +176,7 @@ export default {
})[props.size]) })[props.size])
const appearanceClass = computed(() => ({ 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' none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
})[props.appearance]) })[props.appearance])

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

@@ -1,13 +1,13 @@
<template> <template>
<div <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"> <slot name="label">
<div :class="{ 'flex content-center justify-between': !inline }"> <div :class="{ 'flex content-center justify-between': !inline }">
<label <label
v-if="label" v-if="label"
:for="name" :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 }" :class="{'sm:mt-px sm:pt-2': inline }"
> >
{{ label }} {{ label }}
@@ -15,7 +15,7 @@
</label> </label>
<span <span
v-if="$slots.hint || hint" 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 }" :class="{ 'mt-1 max-w-2xl': inline }"
><slot name="hint">{{ hint }}</slot></span> ><slot name="hint">{{ hint }}</slot></span>
</div> </div>
@@ -24,7 +24,7 @@
:class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }" :class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
> >
<slot /> <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 }} {{ help }}
</p> </p>
</div> </div>

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

@@ -14,11 +14,11 @@
@change="onChange" @change="onChange"
> >
<div v-if="label" class="flex flex-col ml-3"> <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 }} {{ label }}
<span v-if="required" class="text-red-400">*</span> <span v-if="required" class="text-red-400">*</span>
</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> </div>
</label> </label>
</template> </template>
@@ -60,7 +60,7 @@ export default {
}, },
baseClass: { baseClass: {
type: String, 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: { customClass: {
type: String, type: String,

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

@@ -90,7 +90,7 @@ export default {
}, },
baseClass: { baseClass: {
type: String, 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: { customClass: {
type: String, type: String,

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

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

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

@@ -83,7 +83,7 @@ export default {
}, },
baseClass: { baseClass: {
type: String, 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: { customClass: {
type: String, type: String,
@@ -146,7 +146,7 @@ export default {
})[props.size]) })[props.size])
const appearanceClass = computed(() => ({ 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' none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
})[props.appearance]) })[props.appearance])

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

@@ -39,7 +39,7 @@ export default {
}, },
backgroundClass: { backgroundClass: {
type: String, type: String,
default: 'bg-tw-white' default: 'u-bg-white'
}, },
shadowClass: { shadowClass: {
type: String, type: String,
@@ -47,7 +47,7 @@ export default {
}, },
ringClass: { ringClass: {
type: String, type: String,
default: 'ring-1 ring-gray-200 dark:ring-gray-800' default: 'ring-1 u-ring-gray-200'
}, },
bodyClass: { bodyClass: {
type: String, type: String,
@@ -75,7 +75,7 @@ export default {
}, },
borderColorClass: { borderColorClass: {
type: String, 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: { activeClass: {
type: String, 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: { computed: {

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

@@ -28,11 +28,11 @@ export default {
}, },
activeClass: { activeClass: {
type: String, 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: { inactiveClass: {
type: String, 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> <nav>
<h3 <h3
v-if="title || $slots.title" 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"> <slot name="title">
{{ title }} {{ title }}
@@ -34,7 +34,7 @@
<span class="truncate">{{ link.label }}</span> <span class="truncate">{{ link.label }}</span>
</slot> </slot>
<div v-if="link.shortcuts" class="hidden ml-3 space-x-1 lg:flex"> <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 }} {{ shortcut }}
</span> </span>
</div> </div>
@@ -44,8 +44,8 @@
v-if="link.badge" v-if="link.badge"
class="ml-auto inline-block py-0.5 px-3 text-xs rounded-full" class="ml-auto inline-block py-0.5 px-3 text-xs rounded-full"
:class="{ :class="{
'bg-tw-gray-50': isActive, 'u-bg-gray-50': isActive,
'bg-gray-200 dark:bg-gray-700 text-tw-gray-600': !isActive 'bg-gray-200 dark:bg-gray-700 u-text-gray-600': !isActive
}" }"
> >
{{ link.badge }} {{ link.badge }}
@@ -89,26 +89,26 @@ export default {
}, },
variantClass () { variantClass () {
return ({ return ({
white: '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: 'text-tw-gray-600 hover:text-tw-gray-900 hover:bg-tw-gray-50 focus:bg-tw-gray-50' gray: 'u-text-gray-600 hover:u-text-gray-900 hover:u-bg-gray-50 focus:u-bg-gray-50'
})[this.variant] })[this.variant]
}, },
activeVariantClass () { activeVariantClass () {
return ({ 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', 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: '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' 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] })[this.variant]
}, },
iconClass () { iconClass () {
return ({ return ({
white: 'text-tw-gray-400 group-hover:text-tw-gray-500', white: 'u-text-gray-400 group-hover:u-text-gray-500',
gray: 'text-tw-gray-400 group-hover:text-tw-gray-500' gray: 'u-text-gray-400 group-hover:u-text-gray-500'
})[this.variant] })[this.variant]
}, },
activeIconClass () { activeIconClass () {
return ({ return ({
white: 'text-tw-gray-500 group-hover:text-tw-gray-500', white: 'u-text-gray-500 group-hover:u-text-gray-500',
gray: 'text-tw-gray-500 group-hover:text-tw-gray-500' gray: 'u-text-gray-500 group-hover:u-text-gray-500'
})[this.variant] })[this.variant]
} }
}, },

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

@@ -30,7 +30,7 @@
<Card <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" 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" v-bind="$attrs"
ring-class="sm:ring-1 sm:ring-transparent dark:ring-gray-700" ring-class
> >
<template v-if="$slots.header" #header> <template v-if="$slots.header" #header>
<slot name="header" /> <slot name="header" />

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

@@ -13,17 +13,17 @@
@mouseover="onMouseover" @mouseover="onMouseover"
@mouseout="onMouseout" @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="p-4">
<div class="flex"> <div class="flex">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<Icon :name="iconName" class="w-6 h-6" :class="iconClass" /> <Icon :name="iconName" class="w-6 h-6" :class="iconClass" />
</div> </div>
<div class="ml-3 w-0 flex-1 pt-0.5"> <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 }} {{ title }}
</p> </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 }} {{ description }}
</p> </p>
<Button <Button
@@ -34,8 +34,8 @@
@click.native.stop="cancel" @click.native.stop="cancel"
> >
Undo Undo
<div class="inline-flex items-center rounded bg-tw-gray-200 ml-1.5"> <div class="inline-flex items-center rounded u-bg-gray-200 ml-1.5">
<span class="w-full px-1 text-center text-tw-gray-600 text-xxs"> <span class="w-full px-1 text-center u-text-gray-600 text-xxs">
Z Z
</span> </span>
</div> </div>
@@ -43,7 +43,7 @@
</div> </div>
<div class="flex-shrink-0 ml-4"> <div class="flex-shrink-0 ml-4">
<button <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" @click.stop="close"
> >
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
@@ -129,7 +129,7 @@ export default {
info: 'text-blue-400', info: 'text-blue-400',
success: 'text-green-400', success: 'text-green-400',
error: 'text-red-400' error: 'text-red-400'
})[this.type] || 'text-tw-gray-400' })[this.type] || 'u-text-gray-400'
}, },
progressBarStyle () { progressBarStyle () {
const remainingPercent = this.remainingTime / this.timeout * 100 const remainingPercent = this.remainingTime / this.timeout * 100

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

@@ -38,14 +38,14 @@
</template> </template>
<template v-else-if="title" #header> <template v-else-if="title" #header>
<div class="flex items-center justify-between"> <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 }} {{ title }}
</h2> </h2>
<div class="flex items-center"> <div class="flex items-center">
<button <button
type="button" type="button"
aria-label="Close panel" 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" @click="open = false"
> >
<Icon name="outline/x" class="w-6 h-6" /> <Icon name="outline/x" class="w-6 h-6" />

108
src/index.ts
View File

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