@indielayer/ui 1.0.0-alpha.0 → 1.0.0-alpha.5

package/src/create.ts

@@ -0,0 +1,38 @@
+import type { App } from 'vue'
+import type { ColorLibrary } from './composables/colors'
+import { injectColorsKey, injectIconsKey } from './composables/keys'
+
+export interface IndielayerUIOptions {
+  prefix?: string,
+  components?: any,
+  colors?: ColorLibrary,
+  icons?: any
+}
+
+const defaultOptions: IndielayerUIOptions = {
+  prefix: 'X',
+}
+
+const create = (createOptions: IndielayerUIOptions = {}) => {
+  const install = (app: App, installOptions: IndielayerUIOptions = {}) => {
+    const options = {
+      ...defaultOptions,
+      ...createOptions,
+      ...installOptions,
+    }
+
+    if (options.components)
+      options.components.forEach((component: any) => {
+        app.component(`${options.prefix}${component.name.slice(1)}`, component)
+      })
+
+    app.provide(injectColorsKey, options.colors)
+    app.provide(injectIconsKey, options.icons)
+  }
+
+  return {
+    install,
+  }
+}
+
+export default create

package/src/exports/nuxt.js

@@ -0,0 +1,32 @@
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtModule({
+  meta: {
+    name: '@indielayer/ui',
+    configKey: 'indielayer',
+    compatibility: {
+      nuxt: '^3.0.0',
+    },
+  },
+  defaults: {
+    prefix: 'X',
+  },
+  async setup(options, nuxt) {
+    // Create resolver to resolve relative paths
+    const { resolve } = createResolver(import.meta.url)
+
+    nuxt.options.runtimeConfig.public.indielayerOptions = options
+
+    // plugin install
+    addPlugin(resolve('./nuxt.plugin.js'))
+
+    // nuxt install
+    nuxt.hook('components:dirs', (dirs) => {
+      dirs.push({
+        path: fileURLToPath(new URL('../src/components', import.meta.url)),
+        prefix: options?.prefix ? options?.prefix : 'X',
+      })
+    })
+  },
+})

package/src/exports/nuxt.plugin.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app'
+import create from '../src/create'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const UI = create(nuxtApp.$config.indielayerOptions)
+
+  nuxtApp.vueApp.use(UI)
+})

package/src/exports/tailwind.preset.js

@@ -0,0 +1,55 @@
+const colors = require('tailwindcss/colors')
+
+module.exports = (useDark = true) => ({
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.emerald,
+        secondary: colors.slate,
+        success: colors.green,
+        warning: colors.yellow,
+        error: colors.red,
+      },
+      borderColor: colors.gray[100],
+      fontFamily: {
+        sans: [
+          'Inter',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'ui-sans-serif',
+          'system-ui',
+          '"Segoe UI"',
+          'Roboto',
+          '"Helvetica Neue"',
+          'Arial',
+          '"Noto Sans"',
+          'sans-serif',
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+          '"Noto Color Emoji"',
+        ],
+      },
+    },
+  },
+  plugins: useDark ? [
+    ({ addBase, config }) => {
+      addBase({
+        html: {
+          color: config('theme.colors.gray.900'),
+          backgroundColor: 'white',
+        },
+        'html.dark': {
+          color: config('theme.colors.gray.100'),
+          backgroundColor: config('theme.colors.gray.900'),
+        },
+        '*, ::before, ::after': {
+          borderColor: colors.gray[200],
+        },
+        '.dark *, .dark ::before, .dark ::after': {
+          borderColor: colors.slate[700],
+        },
+      })
+    },
+  ] : [],
+})

package/src/index.ts

@@ -0,0 +1,8 @@
+export { tailwindColors as colors } from './composables/colors-utils'
+export { default as version } from './version'
+export * from './components'
+export * from './composables'
+
+export { default as createUI } from './create'
+
+export { default } from './install'

package/src/install.ts

@@ -0,0 +1,8 @@
+import * as components from './components'
+import create from './create'
+
+export default create({
+  components: Object.keys(components).map(
+    (key) => components[key as keyof object],
+  ),
+})

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+// shims-vue.d.ts
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/version.ts

@@ -0,0 +1 @@
+export default '1.0.0-alpha.5'

package/volar.d.ts

@@ -40,7 +40,7 @@ declare module 'vue' {
     XTableHeader: typeof import('@indielayer/ui')['XTableHeader']
     XTableRow: typeof import('@indielayer/ui')['XTableRow']
     XTab: typeof import('@indielayer/ui')['XTab']
-    XTabs: typeof import('@indielayer/ui')['XTabs']
+    XTabGroup: typeof import('@indielayer/ui')['XTabGroup']
     XTag: typeof import('@indielayer/ui')['XTag']
     XTextarea: typeof import('@indielayer/ui')['XTextarea']
     XToggle: typeof import('@indielayer/ui')['XToggle']