HoshinoSuzumi/rayine-ui
1
0
Fork 0
mirror of https://github.com/HoshinoSuzumi/rayine-ui.git synced 2025-04-07 12:48:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

💥 refactor(message): BREAKING redesign component props

Browse Source
This commit is contained in:
Timothy Yin 2024-11-22 22:16:08 +08:00
parent 440613047a
commit 222d2e8f1d
10 changed files with 189 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/TitleBar.vue
View File

@ -6,8 +6,8 @@ const route = useRoute()
<template>
<header
class="w-full flex justify-between items-center py-2 h-16 z-50 border-b sticky top-0 bg-white/90 dark:bg-neutral-900 transition-colors"
:class="[route.path !== '/' ? 'border-b-neutral-100 dark:border-b-neutral-800' : 'border-b-transparent dark:border-b-transparent']"
class="w-full flex justify-between items-center py-2 h-16 z-50 border-b sticky top-0 bg-white dark:bg-neutral-900 transition-colors"
:class="[route.path !== '/' ? 'border-b-neutral-200 dark:border-b-neutral-700' : 'border-b-transparent dark:border-b-transparent']"
>
<NuxtLink to="/" class="text-neutral-900 dark:text-neutral-100">
<h1 class="font-medium text-xl">

33
docs/components/content/ComponentDefaults.vue Normal file
View File

@ -0,0 +1,33 @@
<script lang="ts" setup>
import { camelCase, upperFirst } from 'scule';
import * as config from '#rayui/ui.config'
const route = useRoute()
const props = defineProps({
slug: {
type: String,
default: null,
},
})
const slug = props.slug || route.params.slug[route.params.slug.length - 1]
const componentCamelName = camelCase(slug)
const componentName = `Ray${upperFirst(componentCamelName)}`
const defaults = config[componentCamelName as keyof typeof config]
const { data: defaultsRender } = await useAsyncData(`${componentName}-defaults`, () => parseMarkdown(`
\`\`\`json
${JSON.stringify(defaults, null, 2)}
\`\`\`
`, {}))
</script>
<template>
<ContentRenderer v-if="defaultsRender?.body" :value="defaultsRender" />
</template>
<style scoped>
</style>

85
docs/components/content/ComponentPreview.vue
View File

@ -29,6 +29,14 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
options: {
type: Array as PropType<{ name: string, values: string[], restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
default: () => []
},
excludedProps: {
type: Array,
default: () => []
},
filename: {
type: String,
default: '',
@ -46,14 +54,17 @@ const componentProps = reactive({ ...props.props })
const customizableOptions = (key: string, schema: { kind: string, type: string, schema: [] }) => {
let options: string[] = []
const invalidTypes = ['string', 'array', 'boolean', 'object', 'number', 'Function']
const hasInvalidType = schema?.type?.split('|')?.map(item => item.trim()?.replaceAll('"', ''))?.some(type => invalidTypes.includes(type))
const schemaOptions = Object.values(schema?.schema || {})
const optionItem = props?.options?.find(item => item?.name === key) || null
const types = schema?.type?.split('|')?.map(item => item.trim()?.replaceAll('"', '')) || []
const invalidTypes = ['string', 'number', 'boolean', 'array', 'object', 'Function', 'undefined']
const hasInvalidType = types?.every(type => invalidTypes.includes(type))
if (key.toLowerCase().endsWith('color')) {
options = [...appConfig.rayui.colors]
}
const schemaOptions = Object.values(schema?.schema || {})
if (key.toLowerCase() === 'size' && schemaOptions?.length) {
const baseSizeOrder = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
schemaOptions.sort((a: string, b: string) => {
@ -65,24 +76,41 @@ const customizableOptions = (key: string, schema: { kind: string, type: string,
})
}
if (schemaOptions?.length > 0 && schema?.kind === 'enum' && !hasInvalidType) {
options = schemaOptions.filter(option => option !== 'undefined' && typeof option === 'string').map((option: string) => option.replaceAll('"', ''))
if (schemaOptions?.length > 0 && schema?.kind === 'enum' && !hasInvalidType && optionItem?.restriction !== 'only') {
options = schemaOptions.filter(option => typeof option === 'string' && option !== 'undefined').map((option: string) => option.replaceAll('"', ''))
}
if (optionItem?.restriction === 'only') {
options = optionItem.values
}
if (optionItem?.restriction === 'expected') {
options = options.filter(item => optionItem.values.includes(item))
}
if (optionItem?.restriction === 'included') {
options = [...options, ...optionItem.values]
}
if (optionItem?.restriction === 'excluded') {
options = options.filter(item => !optionItem.values.includes(item))
}
return options
}
const customizableProps = computed(() => Object.keys(componentProps).map((k) => {
if (props.excludedProps.includes(k)) return null
const prop = componentMeta?.meta?.props?.find((prop: any) => prop.name === k)
const schema = prop?.schema || {}
const options = customizableOptions(k, schema)
return {
name: k,
type: prop?.type,
type: prop?.type || 'string',
label: camelCase(k),
options,
}
}))
}).filter((prop) => prop !== null))
const code = computed(() => {
let code = `\`\`\`html
@ -99,22 +127,8 @@ const code = computed(() => {
return code
})
const { data: codeRender, error: codeRenderError } = await useAsyncData(`${componentName}-renderer-${JSON.stringify({ slots: props.slots, code: code.value })}`, async () => {
let formatted = ''
try {
// @ts-ignore
formatted = await $prettier.format(code.value, {
trailingComma: 'none',
semi: false,
singleQuote: true,
})
}
catch {
formatted = code.value
}
return parseMarkdown(formatted, {
})
const { data: codeRender, error: codeRenderError } = await useAsyncData(`${componentName}-renderer-${JSON.stringify({ props: componentProps, slots: props.slots, code: code.value })}`, async () => {
return parseMarkdown(code.value, {})
}, {
watch: [code],
})
@ -131,32 +145,23 @@ const { data: codeRender, error: codeRenderError } = await useAsyncData(`${compo
<div :class="['p-4 overflow-auto', !!codeRender ? 'border-b border-neutral-200 dark:border-neutral-700' : '']">
<component :is="componentName" v-bind="componentProps">
<slot />
<slot></slot>
</component>
</div>
<div v-if="customizableProps.length > 0" class="border-b border-neutral-200 dark:border-neutral-700 flex">
<div v-for="(prop, k) in customizableProps" :key="k" class="px-2 py-0.5 flex flex-col gap-0.5 border-r dark:border-neutral-700">
<div v-for="(prop, k) in customizableProps" :key="k"
class="px-2 py-0.5 flex flex-col gap-0.5 border-r dark:border-neutral-700">
<label :for="`${prop.name}-prop`" class="text-sm text-neutral-400">{{ prop.name }}</label>
<input
v-if="prop.type.startsWith('boolean')"
:id="`${prop.name}-prop`"
v-model="componentProps[prop.name]"
type="checkbox"
class="mt-1 mb-2"
>
<select v-else-if="prop.options.length > 0" :id="`${prop.name}-prop`" v-model="componentProps[prop.name]">
<input v-if="prop.type.startsWith('boolean')" :id="`${prop.name}-prop`" v-model="componentProps[prop.name]"
type="checkbox" class="mt-1 mb-2">
<select v-else-if="prop.options.length" :id="`${prop.name}-prop`" v-model="componentProps[prop.name]">
<option v-for="option in prop.options" :key="option" :value="option">
{{ option }}
</option>
</select>
<input
v-else
:id="`${prop.name}-prop`"
v-model="componentProps[prop.name]"
type="text"
placeholder="type something..."
>
<input v-else :id="`${prop.name}-prop`" v-model="componentProps[prop.name]" type="text"
placeholder="type something...">
</div>
</div>

2
docs/nuxt.config.ts
View File

@ -22,7 +22,7 @@ export default defineNuxtConfig({
},
content: {
highlight: {
langs: ['postcss', 'mdc', 'html', 'vue', 'ts', 'js', 'bash'],
langs: ['postcss', 'mdc', 'html', 'vue', 'ts', 'js', 'bash', 'yml'],
},
},
mdc: {

22
docs/pages/[...slug].vue
View File

@ -29,7 +29,7 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
<template>
<div class="grid grid-cols-12 gap-4 pb-10">
<div class="hidden col-span-2 md:block">
<nav class="ml-1">
<nav class="ml-1 overflow-hidden overflow-y-auto sticky top-[calc(64px+16px)]">
<ContentNavigation v-slot="{ navigation }">
<ul class="space-y-2">
<li v-for="link of navigation" :key="link._path">
@ -38,11 +38,8 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
</NuxtLink>
<ul v-if="link.children" class="pl-4 pt-2 space-y-1">
<li v-for="child in link.children" :key="child._path">
<NuxtLink
:to="child._path"
class="text-sm text-neutral-500 dark:text-neutral-400"
active-class="text-primary font-medium"
>
<NuxtLink :to="child._path" class="text-sm text-neutral-500 dark:text-neutral-400"
active-class="text-primary font-medium">
{{ child.title }}
</NuxtLink>
</li>
@ -68,8 +65,7 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
</div>
<div
class="w-full flex justify-between gap-4 mt-12 pt-12 border-t border-t-neutral-200 dark:border-t-neutral-700"
>
class="w-full flex justify-between gap-4 mt-12 pt-12 border-t border-t-neutral-200 dark:border-t-neutral-700">
<div class="flex-1">
<NuxtLink v-if="surround?.[0]" :to="surround[0]._path" class="surround-btn">
<div>
@ -93,14 +89,14 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
<div v-if="hasToc" class="hidden" :class="{ 'col-span-2 md:block': hasToc }">
<div
class="bg-neutral-50 dark:bg-neutral-800/50 rounded-lg px-4 py-3 overflow-hidden overflow-y-auto sticky top-[calc(64px+16px)]"
>
class="bg-neutral-50 dark:bg-neutral-800/50 rounded-lg px-4 py-3 overflow-hidden overflow-y-auto sticky top-[calc(64px+16px)]">
<span class="text-xs text-neutral-600 dark:text-neutral-300 font-medium inline-block mb-2">
Table of contents
</span>
<Toc :toc="page!.body!.toc!.links" />
</div>
</div>
</div>
</template>
@ -126,10 +122,10 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
}
.surround-btn {
@apply font-medium;
@apply font-medium;
div {
@apply bg-neutral-100 dark:bg-neutral-800 rounded-lg px-8 py-6 w-full flex flex-col gap-0 border border-transparent;
@apply bg-neutral-100 dark:bg-neutral-800 rounded-lg px-8 py-6 w-full h-full flex flex-col gap-0 border border-transparent;
&:hover {
@apply border-primary;
@ -149,7 +145,7 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
}
.description {
@apply pt-2 text-sm font-normal text-neutral-500 dark:text-neutral-400;
@apply pt-2 text-sm font-normal text-neutral-500 dark:text-neutral-400 line-clamp-2;
}
}
</style>

59
src/runtime/components/overlays/Message.vue
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { ref, onMounted, defineComponent, type PropType, toRef, computed } from 'vue'
import { twJoin, twMerge } from 'tailwind-merge'
import type { Message, MessageType } from '../../types/message'
import type { Message, MessageColor, MessageType } from '../../types/message'
import { message } from '../../ui.config'
import type { DeepPartial, Strategy } from '../../types'
import { useMessage, useRayUI } from '#build/imports'
@ -10,9 +10,25 @@ const config = message
export default defineComponent({
props: {
message: {
type: Object as PropType<Message>,
require: true,
type: {
type: String as PropType<MessageType>,
default: config.default.type,
},
color: {
type: String as PropType<MessageColor>,
default: undefined,
},
duration: {
type: Number,
default: config.default.duration,
},
content: {
type: String,
default: '',
},
id: {
type: String,
default: undefined,
},
class: {
type: String,
@ -26,28 +42,27 @@ export default defineComponent({
setup(props) {
const { ui, attrs } = useRayUI('message', toRef(props, 'ui'), config)
const resolvedColor = computed(() => {
if (!props.message?.type) return props.message?.color || ui.value.default.color || 'primary'
return ({
info: 'blue',
success: 'emerald',
warning: 'orange',
error: 'rose',
} as Record<MessageType, string>)[props.message.type]
})
const containerClass = computed(() => {
const color = props.color ? props.color : (ui.value.type[props.type]?.color || ui.value.default.color)
return twMerge(twJoin(
ui.value.container,
ui.value.rounded,
ui.value.background.replaceAll('{color}', resolvedColor.value),
ui.value.content.replaceAll('{color}', resolvedColor.value),
ui.value.border.replaceAll('{color}', resolvedColor.value),
ui.value.shadow.replaceAll('{color}', color),
ui.value.background.replaceAll('{color}', color),
ui.value.content.replaceAll('{color}', color),
ui.value.border.replaceAll('{color}', color),
), props.class)
})
const message = useMessage()
const messageBody = ref<Message>(props.message as Message)
const messageBody = computed<Message>(() => {
return {
id: props.id || message.generateId(),
content: props.content,
duration: props.duration,
type: props.type,
}
})
onMounted(() => {
setTimeout(() => {
@ -69,10 +84,10 @@ export default defineComponent({
<template>
<div :class="ui.wrapper" v-bind="attrs">
<div :class="containerClass">
<IconCircleSuccess v-if="messageBody.type === 'success'" class="text-xl" />
<IconCircleWarning v-if="messageBody.type === 'warning'" class="text-xl" />
<IconCircleError v-if="messageBody.type === 'error'" class="text-xl" />
<IconCircleInfo v-if="messageBody.type === 'info'" class="text-xl" />
<IconCircleSuccess v-if="messageBody?.type === 'success'" class="text-xl" />
<IconCircleWarning v-if="messageBody?.type === 'warning'" class="text-xl" />
<IconCircleError v-if="messageBody?.type === 'error'" class="text-xl" />
<IconCircleInfo v-if="messageBody?.type === 'info'" class="text-xl" />
<span>
{{ messageBody.content }}
</span>

5
src/runtime/composables/useMessage.ts
View File

@ -4,6 +4,10 @@ import { useState } from '#imports'
export const useMessage = () => {
const messages = useState<Message[]>('messages', () => [])
const generateId = () => {
return (Date.now() + Math.random() * 100).toString(32).toUpperCase()
}
const add = (message: Partial<Message>) => {
const msg = {
id: (Date.now() + Math.random() * 100).toString(32).toUpperCase(),
@ -38,6 +42,7 @@ export const useMessage = () => {
}
return {
generateId,
add,
update,
remove,

19
src/runtime/types/message.d.ts vendored
View File

@ -1,27 +1,16 @@
import type { message } from '../ui.config'
import type colors from '#ray-colors'
import type { AppConfig } from 'nuxt/schema';
export type MessageType = 'success' | 'warning' | 'error' | 'info'
export type MessageType = keyof typeof message.type
export type MessageColor = (typeof colors)[number]
export interface Message {
id: string
content: string
type: MessageType
type?: MessageType
color?: MessageColor
duration?: number
}
export type MessageOption = Omit<Message, 'id'>
export interface MessageApi {
info: (content: string, duration?: number) => void
success: (content: string, duration?: number) => void
warning: (content: string, duration?: number) => void
error: (content: string, duration?: number) => void
destroyAll: () => void
}
export interface MessageProviderApi {
destroy: (id: string) => void
}
// export type MessageOption = Omit<Message, 'id'>

30
src/runtime/ui.config/overlays/message.ts
View File

@ -1,12 +1,28 @@
export default {
wrapper: 'mx-auto w-fit pointer-events-auto',
container: 'px-2 py-1.5 border flex items-center gap-1.5',
rounded: 'rounded-md',
border: 'border-{color}-400 dark:border-{color}-600',
background: 'bg-{color}-50 dark:bg-{color}-900',
content: 'text-xs font-sans font-bold text-{color}-500 dark:text-{color}-300',
wrapper: "mx-auto w-fit pointer-events-auto",
container: "px-2 py-1.5 border flex items-center gap-1.5",
shadow: "shadow-md shadow-{color}-100 dark:shadow-{color}-900",
rounded: "rounded-md",
border: "border-{color}-400 dark:border-{color}-600",
background: "bg-{color}-50 dark:bg-{color}-900",
content: "text-xs font-sans font-bold text-{color}-500 dark:text-{color}-300",
type: {
success: {
color: "emerald",
},
warning: {
color: "amber",
},
error: {
color: "red",
},
info: {
color: "blue",
},
},
default: {
type: 'info',
color: 'primary',
duration: 4000,
},
}
};

53
src/runtime/utils/colors.ts
View File

@ -63,98 +63,105 @@ export const setColors = (theme: TwConfig['theme']) => {
const safelistForComponent: Record<
string,
(colors: string) => TwConfig['safelist']
(colors: string) => TwConfig["safelist"]
> = {
button: colorsToRegex => [
button: (colorsToRegex) => [
{
pattern: RegExp(`^bg-(${colorsToRegex})-50$`),
variants: ['hover', 'disabled'],
variants: ["hover", "disabled"],
},
{
pattern: RegExp(`^bg-(${colorsToRegex})-100$`),
variants: ['hover'],
variants: ["hover"],
},
{
pattern: RegExp(`^bg-(${colorsToRegex})-400$`),
variants: ['dark', 'dark:disabled'],
variants: ["dark", "dark:disabled"],
},
{
pattern: RegExp(`^bg-(${colorsToRegex})-500$`),
variants: ['disabled', 'dark:hover', 'dark:active'],
variants: ["disabled", "dark:hover", "dark:active"],
},
{
pattern: RegExp(`^bg-(${colorsToRegex})-600$`),
variants: ['hover'],
variants: ["hover"],
},
{
pattern: RegExp(`^bg-(${colorsToRegex})-700$`),
variants: ['active'],
variants: ["active"],
},
{
pattern: RegExp(`^bg-(${colorsToRegex})-900$`),
variants: ['dark:hover'],
variants: ["dark:hover"],
},
{
pattern: RegExp(`^bg-(${colorsToRegex})-950$`),
variants: ['dark', 'dark:hover', 'dark:disabled'],
variants: ["dark", "dark:hover", "dark:disabled"],
},
{
pattern: RegExp(`^text-(${colorsToRegex})-400$`),
variants: ['dark', 'dark:hover', 'dark:disabled'],
variants: ["dark", "dark:hover", "dark:disabled"],
},
{
pattern: RegExp(`^text-(${colorsToRegex})-500$`),
variants: ['dark:hover', 'disabled'],
variants: ["dark:hover", "disabled"],
},
{
pattern: RegExp(`^text-(${colorsToRegex})-600$`),
variants: ['hover'],
variants: ["hover"],
},
{
pattern: RegExp(`^outline-(${colorsToRegex})-400$`),
variants: ['dark:focus-visible'],
variants: ["dark:focus-visible"],
},
{
pattern: RegExp(`^outline-(${colorsToRegex})-500$`),
variants: ['focus-visible'],
variants: ["focus-visible"],
},
{
pattern: RegExp(`^ring-(${colorsToRegex})-300$`),
variants: ['focus', 'dark:focus'],
variants: ["focus", "dark:focus"],
},
{
pattern: RegExp(`^ring-(${colorsToRegex})-400$`),
variants: ['dark:focus-visible'],
variants: ["dark:focus-visible"],
},
{
pattern: RegExp(`^ring-(${colorsToRegex})-500$`),
variants: ['focus-visible'],
variants: ["focus-visible"],
},
],
message: colorsToRegex => [
message: (colorsToRegex) => [
{
pattern: RegExp(`^bg-(${colorsToRegex})-50$`),
},
{
pattern: RegExp(`^bg-(${colorsToRegex})-900$`),
variants: ['dark'],
variants: ["dark"],
},
{
pattern: RegExp(`^text-(${colorsToRegex})-500$`),
},
{
pattern: RegExp(`^text-(${colorsToRegex})-300$`),
variants: ['dark'],
variants: ["dark"],
},
{
pattern: RegExp(`^border-(${colorsToRegex})-400$`),
},
{
pattern: RegExp(`^border-(${colorsToRegex})-600$`),
variants: ['dark'],
variants: ["dark"],
},
{
pattern: RegExp(`^shadow-(${colorsToRegex})-100$`),
},
{
pattern: RegExp(`^shadow-(${colorsToRegex})-900$`),
variants: ["dark"],
},
],
}
};
export const generateSafelist = (colors: string[], globalColors: string[]) => {
const safelist = Object.keys(safelistForComponent).flatMap(component =>