📝 Doc(frame): initial

docs/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

docs/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

docs/app.vue

@@ -0,0 +1,10 @@
+<script>
+</script>
+
+<template>
+  <RayMessageProvider>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </RayMessageProvider>
+</template>

docs/components/DocContentBlock.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    required: false,
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+  accentTitle: {
+    type: Boolean,
+    default: false,
+  },
+  padTop: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1 v-if="title" class="font-medium" :class="{ 'mt-8': padTop, 'text-primary text-2xl font-medium': accentTitle, 'text-xl font-normal': !accentTitle }">{{ title }}</h1>
+    <p v-if="description" class="text-sm text-justify">{{ description }}</p>
+  </div>
+</template>
+
+<style scoped></style>

docs/components/DocExampleBlock.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import FileTypeVue from "./icon/VscodeIconsFileTypeVue.vue"
+import FileTypeTypescript from "./icon/VscodeIconsFileTypeTypescriptOfficial.vue"
+import FileTypeJavascript from "./icon/VscodeIconsFileTypeJsOfficial.vue"
+import TablerTerminal from "./icon/TablerTerminal.vue";
+
+const slots = defineSlots<{
+  default?: () => VNode[];
+  code?: () => VNode[];
+}>();
+
+const IconComponents = {
+  'vue': FileTypeVue,
+  'vue-html': FileTypeVue,
+  'sh': TablerTerminal,
+  'ts': FileTypeTypescript,
+  'js': FileTypeJavascript,
+}
+
+const codeSlotContent = computed(() => {
+  if (slots.code) {
+    const slotContent = slots.code();
+    let contentLines = slotContent
+      .map(vnode => vnode.children || '')
+      .join('')
+      .replace('\n', '') // remove first line break
+      .split('\n');
+
+    // calculate the minimum indent
+    const minIndent = contentLines.reduce((min, line) => {
+      const match = line.match(/^(\s*)\S/);
+      if (match) {
+        return Math.min(min, match[1].length);
+      }
+      return min;
+    }, Infinity);
+
+    // remove the minimum indent from each line
+    const stringContent = contentLines.map(line => line.slice(minIndent)).join('\n');
+
+    return stringContent;
+  }
+  return '';
+})
+
+defineProps({
+  filename: {
+    type: String,
+    default: '',
+  },
+  lang: {
+    type: String as PropType<keyof typeof IconComponents>,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg">
+    <div v-if="filename" class="p-4 py-2 border-b border-neutral-200 dark:border-neutral-700">
+      <span class="flex items-center gap-1">
+        <component v-if="lang" :is="IconComponents[lang]" class="inline" />
+        <span class="text-sm text-neutral-500 dark:text-neutral-400">{{ filename }}</span>
+      </span>
+    </div>
+
+    <template v-if="slots.default">
+      <div :class="['p-4 overflow-auto', $slots.code ? 'border-b border-neutral-200 dark:border-neutral-700' : '']">
+        <slot></slot>
+      </div>
+    </template>
+
+    <template v-if="slots.code">
+      <div class="p-4 overflow-auto">
+        <LazyShiki class="text-sm" :lang="lang" :code="codeSlotContent" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped></style>

docs/components/TitleBar.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+// const appConfig = useAppConfig();
+// appConfig.rayui.primary = 'red';
+</script>
+
+<template>
+  <header class="w-full flex justify-between items-center py-2 border-b border-b-neutral-100 dark:border-b-neutral-800">
+    <div class="text-neutral-900 dark:text-neutral-100">
+      <h1 class="font-medium text-xl">RayineSoft<sup class="text-sm"> &copy;</sup></h1>
+      <h2 class="font-normal text-xs">Common Components</h2>
+    </div>
+    <div class="flex items-center gap-4">
+      <NuxtLink to="/" class="text-neutral-400 dark:text-neutral-500"
+        active-class="!text-neutral-700 dark:!text-neutral-300">Docs</NuxtLink>
+      <NuxtLink to="/installation" class="text-neutral-400 dark:text-neutral-500"
+        active-class="!text-neutral-700 dark:!text-neutral-300">Installation</NuxtLink>
+    </div>
+  </header>
+</template>
+
+<style scoped></style>

docs/components/icon/TablerTerminal.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7l5 5l-5 5m7 2h7"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'TablerTerminal'
+}
+</script>

docs/components/icon/VscodeIconsFileTypeJsOfficial.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'VscodeIconsFileTypeJsOfficial'
+}
+</script>

docs/components/icon/VscodeIconsFileTypeTypescriptOfficial.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><rect width="28" height="28" x="2" y="2" fill="#3178c6" rx="1.312"></rect><path fill="#fff" fillRule="evenodd" d="M18.245 23.759v3.068a6.5 6.5 0 0 0 1.764.575a11.6 11.6 0 0 0 2.146.192a10 10 0 0 0 2.088-.211a5.1 5.1 0 0 0 1.735-.7a3.54 3.54 0 0 0 1.181-1.266a4.47 4.47 0 0 0 .186-3.394a3.4 3.4 0 0 0-.717-1.117a5.2 5.2 0 0 0-1.123-.877a12 12 0 0 0-1.477-.734q-.6-.249-1.08-.484a5.5 5.5 0 0 1-.813-.479a2.1 2.1 0 0 1-.516-.518a1.1 1.1 0 0 1-.181-.618a1.04 1.04 0 0 1 .162-.571a1.4 1.4 0 0 1 .459-.436a2.4 2.4 0 0 1 .726-.283a4.2 4.2 0 0 1 .956-.1a6 6 0 0 1 .808.058a6 6 0 0 1 .856.177a6 6 0 0 1 .836.3a4.7 4.7 0 0 1 .751.422V13.9a7.5 7.5 0 0 0-1.525-.4a12.4 12.4 0 0 0-1.9-.129a8.8 8.8 0 0 0-2.064.235a5.2 5.2 0 0 0-1.716.733a3.66 3.66 0 0 0-1.171 1.271a3.73 3.73 0 0 0-.431 1.845a3.6 3.6 0 0 0 .789 2.34a6 6 0 0 0 2.395 1.639q.63.26 1.175.509a6.5 6.5 0 0 1 .942.517a2.5 2.5 0 0 1 .626.585a1.2 1.2 0 0 1 .23.719a1.1 1.1 0 0 1-.144.552a1.3 1.3 0 0 1-.435.441a2.4 2.4 0 0 1-.726.292a4.4 4.4 0 0 1-1.018.105a5.8 5.8 0 0 1-1.969-.35a5.9 5.9 0 0 1-1.805-1.045m-5.154-7.638h4v-2.527H5.938v2.527H9.92v11.254h3.171Z"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'VscodeIconsFileTypeTypescriptOfficial'
+}
+</script>

docs/components/icon/VscodeIconsFileTypeVue.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6l3.22-5.6Z"></path><path fill="#41b883" d="m2 3.925l14 24.15l14-24.15h-5.6L16 18.415L7.53 3.925Z"></path><path fill="#35495e" d="M7.53 3.925L16 18.485l8.4-14.56h-5.18L16 9.525l-3.29-5.6Z"></path></svg>
+</template>
+
+<script>
+export default {
+  name: 'VscodeIconsFileTypeVue'
+}
+</script>

docs/layouts/default.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+useSeoMeta({
+  title: 'RayineSoft Common Components'
+})
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto px-4">
+    <TitleBar />
+    <main class="pt-4">
+      <slot></slot>
+    </main>
+  </div>
+</template>
+
+<style>
+body {
+  @apply bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100;
+}
+
+.shiki,
+.shiki span {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+
+  .shiki,
+  .shiki span,
+  code.shiki {
+    color: var(--shiki-dark) !important;
+    background-color: rgba(0, 0, 0, 0) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
+</style>

docs/nuxt.config.ts

@@ -0,0 +1,23 @@
+import module from "../src/module";
+import defaultTheme from "tailwindcss/defaultTheme";
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: "2024-04-03",
+  modules: ["@nuxt/fonts", module],
+  devtools: { enabled: true },
+  rayui: {
+    safeColors: ["amber", "emerald", "red", "sky", "violet", "cyan"],
+  },
+  tailwindcss: {
+    config: {
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ["Rubik", '"Noto Sans SC"', ...defaultTheme.fontFamily.sans],
+          },
+        },
+      },
+    },
+  },
+});

docs/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "rayine-ui-docs",
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.14.159",
+    "rayine-ui": "workspace:rayine-ui",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "@nuxt/fonts": "^0.10.2"
+  }
+}

docs/pages/index.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+const message = useMessage();
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-16 pb-20">
+    <section>
+      <DocContentBlock title="Button" accent-title />
+
+      <DocContentBlock title="Variants" />
+      <DocExampleBlock lang="vue-html">
+        <div class="flex items-center gap-2">
+          <RayButton>Solid</RayButton>
+          <RayButton variant="outline">Outline</RayButton>
+          <RayButton variant="soft">Soft</RayButton>
+          <RayButton variant="ghost">Ghost</RayButton>
+          <RayButton variant="link">Link</RayButton>
+        </div>
+        <template #code>
+          {{ `
+          <template>
+            <RayButton>Solid</RayButton>
+            <RayButton variant="outline">Outline</RayButton>
+            <RayButton variant="soft">Soft</RayButton>
+            <RayButton variant="ghost">Ghost</RayButton>
+            <RayButton variant="link">Link</RayButton>
+          </template>` }}
+        </template>
+      </DocExampleBlock>
+
+      <DocContentBlock title="Colors" />
+      <DocExampleBlock lang="vue-html">
+        <div class="flex items-center gap-2">
+          <RayButton color="amber">amber</RayButton>
+          <RayButton color="violet" variant="outline" @click="message.success('I like this color!')">violet</RayButton>
+          <RayButton color="red" variant="soft">red</RayButton>
+          <RayButton color="emerald" variant="ghost">emerald</RayButton>
+          <RayButton color="cyan" variant="link">cyan</RayButton>
+        </div>
+        <template #code>
+          {{ `
+          <template>
+            <RayButton color="amber">amber</RayButton>
+            <RayButton color="violet" variant="outline">violet</RayButton>
+            <RayButton color="red" variant="soft">red</RayButton>
+            <RayButton color="emerald" variant="ghost">emerald</RayButton>
+          </template>` }}
+        </template>
+      </DocExampleBlock>
+
+      <DocContentBlock title="Sizes" />
+      <DocExampleBlock lang="vue-html">
+        <div class="flex items-center gap-2 flex-wrap">
+          <RayButton size="2xs">Button</RayButton>
+          <RayButton size="xs">Button</RayButton>
+          <RayButton size="sm">Button</RayButton>
+          <RayButton size="md">Button</RayButton>
+          <RayButton size="lg">Button</RayButton>
+          <RayButton size="xl">Button</RayButton>
+        </div>
+        <template #code>
+          {{ `
+          <template>
+            <RayButton size="2xs">Button</RayButton>
+            <RayButton size="xs">Button</RayButton>
+            <RayButton size="sm">Button</RayButton>
+            <RayButton size="md">Button</RayButton>
+            <RayButton size="lg">Button</RayButton>
+            <RayButton size="xl">Button</RayButton>
+          </template>` }}
+        </template>
+      </DocExampleBlock>
+    </section>
+
+    <section>
+      <DocContentBlock title="Message" description="Message component like a toast" accent-title />
+
+      <DocExampleBlock lang="vue-html" filename="app.vue">
+        <template #code>
+          {{ `
+          <template>
+            <RayMessageProvider>
+              <NuxtLayout>
+                <NuxtPage />
+              </NuxtLayout>
+            </RayMessageProvider>
+          </template>`}}
+        </template>
+      </DocExampleBlock>
+
+      <DocExampleBlock lang="ts">
+        <div class="flex items-center gap-2">
+          <RayButton @click="message.info('message info', 10000)">Info 10s</RayButton>
+          <RayButton @click="message.success('message success')">Success</RayButton>
+          <RayButton @click="message.warning('message warning')">Warning</RayButton>
+          <RayButton @click="message.error('message error')">Error</RayButton>
+        </div>
+        <template #code>
+          {{ `
+          const message = useMessage();
+
+          message.info('message info', 10000);
+          message.success('message success');
+          message.warning('message warning');
+          message.error('message error');` }}
+        </template>
+      </DocExampleBlock>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+section {
+  @apply w-full flex flex-col gap-4;
+}
+</style>

docs/public/robots.txt

@@ -0,0 +1 @@
+

docs/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

docs/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -19,9 +19,10 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "dev": "nuxi dev docs",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare docs",
+    "build:docs" : "nuxi generate docs",
+    "play": "nuxi dev playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+packages:
+  - './'
+  - 'playground'
+  - 'docs'

src/module.ts

@@ -84,11 +84,17 @@ export default defineNuxtModule<ModuleOptions>({
       watch: false,
     })
     addComponentsDir({
-      path: resolve(runtimePath, 'components', 'overlays'),
+      path: resolve(runtimePath, "components", "overlays"),
       prefix: _options.prefix,
       global: false,
       watch: false,
     })
+    addComponentsDir({
+      path: resolve(runtimePath, "components", "icons"),
+      prefix: 'Icon',
+      global: false,
+      watch: false,
+    })
 
     // Composables
     addImportsDir(resolve(runtimePath, 'composables'))