diff --git a/docs/components/content/ComponentPreview.vue b/docs/components/content/ComponentPreview.vue index ca5af5f..8f6caf6 100644 --- a/docs/components/content/ComponentPreview.vue +++ b/docs/components/content/ComponentPreview.vue @@ -39,14 +39,13 @@ const props = defineProps({ }, }) - const componentName = props.slug || `Ray${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}` const componentMeta = await fetchComponentMeta(componentName) const componentProps = reactive({ ...props.props }) const customizableOptions = (key: string, schema: { kind: string, type: string, schema: [] }) => { - let options: string[] = []; + 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 || {}) @@ -56,14 +55,14 @@ const customizableOptions = (key: string, schema: { kind: string, type: string, } if (key.toLowerCase() === 'size' && schemaOptions?.length) { - const baseSizeOrder = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }; + const baseSizeOrder = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 } schemaOptions.sort((a: string, b: string) => { - const [aBase, aNum] = [(a.match(/[a-z]+/i)?.[0].toLowerCase() || 'xs') as keyof typeof baseSizeOrder, parseInt(a.match(/\d+/)?.[0] || '1')]; - const [bBase, bNum] = [(b.match(/[a-z]+/i)?.[0].toLowerCase() || 'xs') as keyof typeof baseSizeOrder, parseInt(b.match(/\d+/)?.[0] || '1')]; + const [aBase, aNum] = [(a.match(/[a-z]+/i)?.[0].toLowerCase() || 'xs') as keyof typeof baseSizeOrder, Number.parseInt(a.match(/\d+/)?.[0] || '1')] + const [bBase, bNum] = [(b.match(/[a-z]+/i)?.[0].toLowerCase() || 'xs') as keyof typeof baseSizeOrder, Number.parseInt(b.match(/\d+/)?.[0] || '1')] return aBase === bBase ? (aBase === 'xs' ? bNum - aNum : aNum - bNum) - : baseSizeOrder[aBase] - baseSizeOrder[bBase]; - }); + : baseSizeOrder[aBase] - baseSizeOrder[bBase] + }) } if (schemaOptions?.length > 0 && schema?.kind === 'enum' && !hasInvalidType) { @@ -73,7 +72,7 @@ const customizableOptions = (key: string, schema: { kind: string, type: string, return options } -const customizableProps = computed(() => Object.keys(componentProps).map(k => { +const customizableProps = computed(() => Object.keys(componentProps).map((k) => { const prop = componentMeta?.meta?.props?.find((prop: any) => prop.name === k) const schema = prop?.schema || {} const options = customizableOptions(k, schema) @@ -137,15 +136,27 @@ const { data: codeRender, error: codeRenderError } = await useAsyncData(`${compo
-
+
- + - +
diff --git a/docs/composables/useComponentMeta.ts b/docs/composables/useComponentMeta.ts index a8af2ed..335f3f7 100644 --- a/docs/composables/useComponentMeta.ts +++ b/docs/composables/useComponentMeta.ts @@ -1,39 +1,39 @@ interface ComponentMetaState { - [key: string]: any; + [key: string]: any } const useComponentsMetaState = () => - useState("components-meta", () => ({})); + useState('components-meta', () => ({})) export const fetchComponentMeta = async (name: string) => { - const state = useComponentsMetaState(); + const state = useComponentsMetaState() if (state.value[name]?.then) { - await state.value[name]; - return state.value[name]; + await state.value[name] + return state.value[name] } if (state.value[name]) { - return state.value[name]; + return state.value[name] } if (import.meta.server) { - const event = useRequestEvent(); + const event = useRequestEvent() if (event && event.node && event.node.res) { event.node.res.setHeader( - "x-nitro-prerender", + 'x-nitro-prerender', [ - event.node.res.getHeader("x-nitro-prerender"), + event.node.res.getHeader('x-nitro-prerender'), `/api/component-meta/${name}.json`, - ].filter(Boolean) as string[] - ); + ].filter(Boolean) as string[], + ) } } state.value[name] = $fetch(`/api/component-meta/${name}.json`).then( (meta) => { - state.value[name] = meta; - } - ); + state.value[name] = meta + }, + ) - await state.value[name]; - return state.value[name]; -}; + await state.value[name] + return state.value[name] +} diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index a650f29..32d0fef 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -1,49 +1,55 @@ -import { createResolver } from "@nuxt/kit"; -import defaultTheme from "tailwindcss/defaultTheme"; -import module from "../src/module"; -import { excludeColors } from "#rayui/utils/colors"; -import colors from "tailwindcss/colors"; +import { createResolver } from '@nuxt/kit' +import defaultTheme from 'tailwindcss/defaultTheme' +import colors from 'tailwindcss/colors' +import module from '../src/module' +import { excludeColors } from '../dist/runtime/utils/colors' -const { resolve } = createResolver(import.meta.url); +console.log(excludeColors(colors)) + +const { resolve } = createResolver(import.meta.url) // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: [ - "@nuxt/content", - "@nuxt/fonts", - "@nuxtjs/color-mode", + '@nuxt/content', + '@nuxt/fonts', + '@nuxtjs/color-mode', module, - "nuxt-component-meta", + 'nuxt-component-meta', ], devtools: { enabled: true }, colorMode: { - preference: "system", - classSuffix: "", + preference: 'system', + classSuffix: '', }, content: { highlight: { - langs: ["postcss", "mdc", "html", "vue", "ts", "js", "bash"], + langs: ['postcss', 'mdc', 'html', 'vue', 'ts', 'js', 'bash'], }, }, mdc: { highlight: { theme: { - light: "material-theme-lighter", - dark: "material-theme", + light: 'material-theme-lighter', + dark: 'material-theme', }, - themes: ["material-theme-lighter", "material-theme"], + themes: ['material-theme-lighter', 'material-theme'], }, }, routeRules: { - "/components": { redirect: "/components/button" }, + '/components': { redirect: '/components/button' }, + }, + compatibilityDate: '2024-04-03', + typescript: { + includeWorkspace: true, }, componentMeta: { exclude: [ - "@nuxt/content", - "@nuxtjs/color-mode", - "@nuxtjs/mdc", - "nuxt/dist", - resolve("./components"), + '@nuxt/content', + '@nuxtjs/color-mode', + '@nuxtjs/mdc', + 'nuxt/dist', + resolve('./components'), ], metaFields: { type: false, @@ -53,23 +59,19 @@ export default defineNuxtConfig({ exposed: false, }, }, - compatibilityDate: "2024-04-03", - typescript: { - includeWorkspace: true, - }, rayui: { globalComponents: true, - safeColors: [excludeColors(colors)], + safeColors: [...excludeColors(colors)], }, tailwindcss: { config: { theme: { extend: { fontFamily: { - sans: ["Rubik", '"Noto Sans SC"', ...defaultTheme.fontFamily.sans], + sans: ['Rubik', '"Noto Sans SC"', ...defaultTheme.fontFamily.sans], }, }, }, }, }, -}); +})