From 565a4b5e4fc9035c15457c4140968a5c59550b5a Mon Sep 17 00:00:00 2001 From: HoshinoSuzumi Date: Sun, 24 Nov 2024 05:15:38 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat{input}:=20new=20input=20compon?= =?UTF-8?q?ent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added input component and merge the common size, padding etc. values to ui.config/standard.ts --- docs/components/content/ComponentPreview.vue | 78 +- docs/package.json | 1 + docs/plugins/prettier.ts | 73 + docs/pnpm-lock.yaml | 6378 ------------------ docs/workers/prettier.js | 34 + pnpm-lock.yaml | 449 +- src/runtime/components/forms/Input.vue | 166 +- src/runtime/types/index.ts | 1 + src/runtime/types/input.d.ts | 24 + src/runtime/ui.config/elements/button.ts | 23 +- src/runtime/ui.config/forms/input.ts | 23 + src/runtime/ui.config/index.ts | 6 + src/runtime/ui.config/standard.ts | 34 + src/runtime/utils/colors.ts | 18 + 14 files changed, 856 insertions(+), 6452 deletions(-) create mode 100644 docs/plugins/prettier.ts delete mode 100644 docs/pnpm-lock.yaml create mode 100644 docs/workers/prettier.js create mode 100644 src/runtime/types/input.d.ts create mode 100644 src/runtime/ui.config/forms/input.ts create mode 100644 src/runtime/ui.config/standard.ts diff --git a/docs/components/content/ComponentPreview.vue b/docs/components/content/ComponentPreview.vue index 7e570db..4022247 100644 --- a/docs/components/content/ComponentPreview.vue +++ b/docs/components/content/ComponentPreview.vue @@ -1,20 +1,9 @@ - + diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts index 6a853f6..9f28fbc 100644 --- a/src/runtime/types/index.ts +++ b/src/runtime/types/index.ts @@ -1,4 +1,5 @@ export * from './button' export * from './message' +export * from './input' export * from './utils' diff --git a/src/runtime/types/input.d.ts b/src/runtime/types/input.d.ts new file mode 100644 index 0000000..2b94764 --- /dev/null +++ b/src/runtime/types/input.d.ts @@ -0,0 +1,24 @@ +import type { AppConfig } from 'nuxt/schema' +import type { InputHTMLAttributes } from 'vue' +import type { input } from '../ui.config' +import type { ExtractDeepKey } from './utils' +import type colors from '#ray-colors' + +export type InputSize = + | keyof typeof input.size + | ExtractDeepKey +export type InputColor = + | ExtractDeepKey + | (typeof colors)[number] +export type InputVariant = + | keyof typeof input.variant + | ExtractDeepKey +export type InputType = Extract< + 'text' | 'password' | 'number' | 'url' | 'email' | 'search' | 'file' | 'hidden', + InputHTMLAttributes['type'] +> +export type InputModelModifiers = { + number?: boolean + trim?: boolean + lazy?: boolean +} diff --git a/src/runtime/ui.config/elements/button.ts b/src/runtime/ui.config/elements/button.ts index 2b00b33..20fd392 100644 --- a/src/runtime/ui.config/elements/button.ts +++ b/src/runtime/ui.config/elements/button.ts @@ -1,3 +1,5 @@ +import { standard } from '..' + export default { base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 flex-shrink-0 transition', rounded: 'rounded-lg', @@ -5,28 +7,13 @@ export default { block: 'w-full flex justify-center items-center', inline: 'inline-flex items-center', size: { - '2xs': 'text-xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-sm', - 'lg': 'text-sm', - 'xl': 'text-base', + ...standard.size, }, padding: { - '2xs': 'px-2 py-1', - 'xs': 'px-2.5 py-1.5', - 'sm': 'px-2.5 py-1.5', - 'md': 'px-3 py-2', - 'lg': 'px-3.5 py-2.5', - 'xl': 'px-3.5 py-2.5', + ...standard.padding, }, square: { - '2xs': 'p-1', - 'xs': 'p-1.5', - 'sm': 'p-1.5', - 'md': 'p-2', - 'lg': 'p-2.5', - 'xl': 'p-2.5', + ...standard.square, }, icon: { base: 'flex-shrink-0', diff --git a/src/runtime/ui.config/forms/input.ts b/src/runtime/ui.config/forms/input.ts new file mode 100644 index 0000000..fac209e --- /dev/null +++ b/src/runtime/ui.config/forms/input.ts @@ -0,0 +1,23 @@ +import { standard } from '..' + +export default { + wrapper: 'relative', + base: 'relative w-full block focus:outline-none disabled:cursor-not-allowed disabled:opacity-70 transition', + placeholder: 'placeholder:text-gray-400 dark:placeholder:text-gray-500', + rounded: 'rounded-md', + size: { + ...standard.size, + }, + padding: { + ...standard.padding, + }, + variant: { + outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400', + plain: 'bg-transparent', + }, + default: { + size: 'sm', + color: 'primary', + variant: 'outline', + }, +} diff --git a/src/runtime/ui.config/index.ts b/src/runtime/ui.config/index.ts index 3dd4b23..12f22a7 100644 --- a/src/runtime/ui.config/index.ts +++ b/src/runtime/ui.config/index.ts @@ -1,6 +1,12 @@ +// universal +export { default as standard } from './standard' + // elements export { default as button } from './elements/button' +// forms +export { default as input } from './forms/input' + // overlays export { default as message } from './overlays/message' export { default as messages } from './overlays/messages' diff --git a/src/runtime/ui.config/standard.ts b/src/runtime/ui.config/standard.ts new file mode 100644 index 0000000..27e2bf9 --- /dev/null +++ b/src/runtime/ui.config/standard.ts @@ -0,0 +1,34 @@ +export default { + size: { + '2xs': 'text-xs', + 'xs': 'text-xs', + 'sm': 'text-sm', + 'md': 'text-sm', + 'lg': 'text-sm', + 'xl': 'text-base', + }, + gap: { + '2xs': 'gap-x-1', + 'xs': 'gap-x-1.5', + 'sm': 'gap-x-1.5', + 'md': 'gap-x-2', + 'lg': 'gap-x-2.5', + 'xl': 'gap-x-2.5', + }, + padding: { + '2xs': 'px-2 py-1', + 'xs': 'px-2.5 py-1.5', + 'sm': 'px-2.5 py-1.5', + 'md': 'px-3 py-2', + 'lg': 'px-3.5 py-2.5', + 'xl': 'px-3.5 py-2.5', + }, + square: { + '2xs': 'p-1', + 'xs': 'p-1.5', + 'sm': 'p-1.5', + 'md': 'p-2', + 'lg': 'p-2.5', + 'xl': 'p-2.5', + }, +} as const diff --git a/src/runtime/utils/colors.ts b/src/runtime/utils/colors.ts index 942a878..8ceb802 100644 --- a/src/runtime/utils/colors.ts +++ b/src/runtime/utils/colors.ts @@ -161,6 +161,24 @@ const safelistForComponent: Record< variants: ['dark'], }, ], + input: colorsToRegex => [ + { + pattern: RegExp(`^text-(${colorsToRegex})-400$`), + variants: ['placeholder'], + }, + { + pattern: RegExp(`^text-(${colorsToRegex})-500$`), + variants: ['dark:placeholder'], + }, + { + pattern: RegExp(`^ring-(${colorsToRegex})-400$`), + variants: ['dark:focus'], + }, + { + pattern: RegExp(`^ring-(${colorsToRegex})-500$`), + variants: ['focus'], + }, + ], } export const generateSafelist = (colors: string[], globalColors: string[]) => {