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

chore: design improvements

Browse Source
This commit is contained in:
Benjamin Canac
2022-01-10 11:02:33 +01:00
parent 542ee205df
commit a13a4b5e4f
4 changed files with 22 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/presets/tailwindui.ts
View File

@@ -47,17 +47,12 @@ const button = {
}, },
variant: { variant: {
...colors.reduce((acc: any, color) => { ...colors.reduce((acc: any, color) => {
acc[color] = `shadow-sm border border-transparent text-white bg-${color}-600 hover:bg-${color}-700 disabled:bg-${color}-600 focus:ring-2 focus:ring-${color}-200` acc[color] = `shadow-sm border border-transparent text-white bg-${color}-600 hover:bg-${color}-700 disabled:bg-${color}-600 focus:ring-2 focus:ring-offset-2 focus:ring-${color}-500`
return acc return acc
}, {}), }, {}),
primary: 'shadow-sm border border-transparent text-white bg-primary-600 hover:bg-primary-700 disabled:bg-primary-600 focus:ring-2 focus:ring-primary-200', primary: 'shadow-sm border border-transparent text-white bg-primary-600 hover:bg-primary-700 disabled:bg-primary-600 focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
secondary: 'border border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 disabled:bg-primary-100 focus:ring-2 focus:ring-primary-500', secondary: 'border border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 disabled:bg-primary-100 focus:ring-2 focus:ring-offset-2 focus:ring-primary-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 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-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 focus:ring-2 focus:ring-offset-2 focus:ring-primary-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 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 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-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', 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'
}, },
@@ -211,7 +206,7 @@ const select = {
const radio = { const radio = {
wrapper: 'relative flex items-start', wrapper: 'relative flex items-start',
base: 'h-4 w-4 text-primary-600 focus:ring-1 focus:ring-primary-500 u-border-gray-300 dark:checked:border-primary-600 disabled:opacity-50 disabled:cursor-not-allowed', base: 'h-4 w-4 text-primary-600 focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 u-border-gray-300 dark:checked:border-primary-600 disabled:opacity-50 disabled:cursor-not-allowed',
label: 'font-medium u-text-gray-700', label: 'font-medium u-text-gray-700',
required: 'text-red-400', required: 'text-red-400',
help: 'u-text-gray-500' help: 'u-text-gray-500'
@@ -238,7 +233,7 @@ const container = {
} }
const toggle = { const toggle = {
base: '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-500', base: '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-offset-2 focus:ring-primary-500',
active: 'bg-primary-600', active: 'bg-primary-600',
inactive: 'u-bg-gray-200', inactive: 'u-bg-gray-200',
container: { container: {

4
src/runtime/components/forms/Checkbox.vue
View File

@@ -14,9 +14,9 @@
@blur="$emit('blur', $event)" @blur="$emit('blur', $event)"
> >
</div> </div>
<div v-if="label" class="ml-3 text-sm"> <div v-if="label || $slots.label" class="ml-3 text-sm">
<label :for="name" :class="labelClass"> <label :for="name" :class="labelClass">
{{ label }} <slot name="label">{{ label }}</slot>
<span v-if="required" :class="requiredClass">*</span> <span v-if="required" :class="requiredClass">*</span>
</label> </label>
<p v-if="help" :class="helpClass"> <p v-if="help" :class="helpClass">

31
src/runtime/components/forms/FormGroup.vue
View File

@@ -1,24 +1,17 @@
<template> <template>
<div :class="wrapperClass"> <div :class="wrapperClass">
<slot name="label"> <div v-if="label || $slots.label" :class="labelWrapperClass">
<div :class="labelWrapperClass"> <label :for="name" :class="labelClass">
<label <slot name="label">{{ label }}</slot>
v-if="label" <span v-if="required" :class="requiredClass">*</span>
:for="name" </label>
:class="labelClass" <span v-if="$slots.hint || hint" :class="hintClass">
@click="onLabelClick" <slot name="hint">{{ hint }}</slot>
> </span>
{{ label }} </div>
<span v-if="required" :class="requiredClass">*</span> <p v-if="description" :class="descriptionClass">
</label> {{ description }}
<span v-if="$slots.hint || hint" :class="hintClass"> </p>
<slot name="hint">{{ hint }}</slot>
</span>
</div>
<p v-if="description" :class="descriptionClass">
{{ description }}
</p>
</slot>
<div :class="!!label && containerClass"> <div :class="!!label && containerClass">
<slot /> <slot />
<p v-if="help" :class="helpClass"> <p v-if="help" :class="helpClass">

4
src/runtime/components/forms/Radio.vue
View File

@@ -14,9 +14,9 @@
@blur="$emit('blur', $event)" @blur="$emit('blur', $event)"
> >
</div> </div>
<div v-if="label" class="ml-3 text-sm"> <div v-if="label || $slots.label" class="ml-3 text-sm">
<label :for="`${name}-${value}`" :class="labelClass"> <label :for="`${name}-${value}`" :class="labelClass">
{{ label }} <slot name="label">{{ label }}</slot>
<span v-if="required" :class="requiredClass">*</span> <span v-if="required" :class="requiredClass">*</span>
</label> </label>
<p v-if="help" :class="helpClass"> <p v-if="help" :class="helpClass">