@byyuurin/ui 0.0.11 → 0.2.0

package/README.md

@@ -12,104 +12,216 @@ https://byyuurin-ui.netlify.app/
 
 ## Installation
 
-```ssh
-pnpm i -D unocss @unocss/reset @byyuurin/ui
+```bash [pnpm]
+pnpm add @byyuurin/ui
 ```
 
-icons
+```bash [yarn]
+yarn add @byyuurin/ui
+```
 
-```ssh
-pnpm i -D @iconify-json/[the-collection-you-want]
+```bash [npm]
+npm install @byyuurin/ui
 ```
 
-## Setup
+> [!WARNING]
+> If you're using pnpm, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/settings#shamefully-hoist) in your `.npmrc` file or install `@byyuurin/ui-kit` in your project's root directory.
+
+### Nuxt
 
-### UnoCSS
+1. Add the UI module in your `nuxt.config.ts`:
 
 ```ts
-// uno.config.ts
-import { preset as ui } from '@byyuurin/ui/unocss'
-import { defineConfig, presetIcons, presetWind3 } from 'unocss'
+export default defineNuxtConfig({
+  modules: [
+    '@byyuurin/ui',
+  ],
+
+  ui: {
+    prefix: 'U',
+    colorMode: true,
+    theme: {
+      colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
+      transitions: true,
+      defaultVariants: {
+        color: 'primary',
+        size: 'md',
+      },
+    },
+  },
+})
+```
+
+2. Add UnoCSS preset in your `uno.config.ts`:
+
+```ts
+import { createUnoPreset } from '@byyuurin/ui/unocss'
+import { defineConfig, presetWind4 } from 'unocss'
 
 export default defineConfig({
   presets: [
-    presetWind3(),
-    presetIcons({
-      cdn: 'https://esm.sh/', // OR install @iconify-json/[the-collection-you-want]
-    }),
-    ui({
-      radius: '0rem', // optional
-      radiusBox: '0rem', // optional
-      radiusButton: '0rem', // optional
-      radiusCheckbox: '0rem', // optional
-      radiusRadio: '0rem', // optional
-      radiusSwitch: '0rem', // optional
-      radiusTabs: '0rem', // optional
-      cb: '#1f2937', // optional
-      cp: '#1f2937', // optional
-      cx: '#ffffff', // optional
+    presetWind4(),
+    createUnoPreset({
+      colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
     }),
   ],
 })
 ```
 
-New Rules
+> [!IMPORTANT]
+> The preset colors configuration must be the same as your nuxt configuration
 
-- `ui-[color]`
-- `bg-soft-[color]`
-- `bg-soft-[color]/[mix-ratio]`
+### Vue
 
-### Vite
+1. Create `ui.config.ts` file for unified management of UI settings:
 
 ```ts
-// vite.config.ts
+// @unocss-include
+import { setup } from '@byyuurin/ui/setup'
+
+export default setup({
+  prefix: 'U',
+  autoImport: {
+    // ... unplugin-auto-import options
+  },
+  components: {
+    // ... unplugin-vue-components options
+  },
+  colorMode: true,
+  theme: {
+    colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
+    transitions: true,
+    defaultVariants: {
+      color: 'primary',
+      size: 'md',
+    },
+  },
+  ui: {
+    colors: {
+      primary: 'green',
+      secondary: 'blue',
+      success: 'green',
+      info: 'blue',
+      warning: 'yellow',
+      error: 'red',
+      neutral: 'slate',
+    },
+    icons: {
+      close: 'i-lucide-x',
+      loading: 'i-lucide-loader-circle',
+      check: 'i-lucide-check',
+      chevronUp: 'i-lucide-chevron-up',
+      chevronDown: 'i-lucide-chevron-down',
+      chevronLeft: 'i-lucide-chevron-left',
+      chevronRight: 'i-lucide-chevron-right',
+      chevronDoubleLeft: 'i-lucide-chevrons-left',
+      chevronDoubleRight: 'i-lucide-chevrons-right',
+      ellipsis: 'i-lucide-ellipsis',
+      plus: 'i-lucide-plus',
+      minus: 'i-lucide-minus',
+      external: 'i-lucide-arrow-up-right',
+    },
+  },
+})
+```
+
+> [!IMPORTANT]
+> Add `// @unocss-include` to add ui.config.ts to unocss scan files
+
+> [!NOTE]
+> Internally relies on custom alias to resolve the theme types. If you're using TypeScript, you should add an alias to your tsconfig to enable auto-completion in your ui.config.ts.
+
+```jsonc
+// tsconfig.node.json
 
-import UI from '@byyuurin/ui/vite'
-import Vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
+{
+  "compilerOptions": {
+    "paths": {
+      "#build/*": ["./node_modules/.nuxt/*"]
+    }
+  }
+}
+```
+
+2. Add the UI Vite plugin in your `vite.config.ts`:
+
+```ts
+import ui from '@byyuurin/ui/vite' // <---
+import vue from '@vitejs/plugin-vue'
+import unocss from 'unocss/vite'
 import { defineConfig } from 'vite'
+import uiConfig from './ui.config' // <---
 
 export default defineConfig({
   plugins: [
-    UnoCSS(),
-    Vue(),
-    UI({
-      prefix: 'U', // optional
-      autoImport: {
-        dts: 'src/typed-imports.d.ts',
-        imports: ['vue'],
-      },
-      components: {
-        dts: 'src/typed-components.d.ts',
+    unocss(),
+    vue(),
+    ui(uiConfig.vite), // <---
+  ],
+})
+```
+
+3. Add UnoCSS preset in your `uno.config.ts`:
+
+```ts
+import { createUnoPreset } from '@byyuurin/ui/unocss' // <---
+import { defineConfig, presetWebFonts, presetWind4 } from 'unocss'
+import uiConfig from './ui.config' // <---
+
+export default defineConfig({
+  presets: [
+    presetWind4(),
+    createUnoPreset(uiConfig.uno), // <---
+    presetWebFonts({
+      fonts: {
+        sans: { provider: 'google', name: 'Public Sans', weights: [400, 500, 600, 700] },
       },
     }),
   ],
 })
 ```
 
-### Nuxt
+4. Add the UI Vue plugin in your `src/main.ts`
 
 ```ts
-// nuxt.config.ts
+import 'uno.css'
 
-export default defineNuxtConfig({
-  modules: [
-    '@unocss/nuxt',
-    '@byyuurin/ui/nuxt',
-  ],
-  css: [
-    '@unocss/reset/tailwind.css',
-  ],
-  ui: {
-    prefix: 'U', // optional
-  },
+import ui from '@byyuurin/ui/vue-plugin' // <---
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './App.vue'
+
+const app = createApp(App)
+
+const router = createRouter({
+  routes: [],
+  history: createWebHistory(),
 })
+
+app.use(ui) // <----
+app.use(router)
+
+app.mount('#app')
+```
+
+5. Add the `isolate` class to your root container
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    ...
+  </head>
+  <body>
+    <div id="app" class="isolate"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
 ```
 
 ## Credits
 
 - [UnoCSS](https://github.com/unocss/unocss)
-- [daisyui](https://github.com/saadeghi/daisyui)
 - [@nuxt/ui](https://github.com/nuxt/ui)
 - [Reka UI](https://github.com/unovue/radix-vue)
 - [VueUse](https://github.com/vueuse/vueuse)

package/dist/module.d.mts

@@ -1,13 +1,4 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-interface ModuleOptions {
-    /**
-     * prefix for components used in templates
-     *
-     * @default "U"
-     */
-    prefix?: string;
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
-
-export { type ModuleOptions, _default as default };
+import '@nuxt/schema';
+export { M as ModuleOptions, _ as default } from './shared/ui.IulR-OYx.mjs';
+export * from '../dist/runtime/types/index.js';
+import '@unocss/preset-wind4/colors';

package/dist/module.json

@@ -1,12 +1,12 @@
 {
   "name": "@byyuurin/ui",
-  "version": "0.0.11",
+  "version": "0.2.0",
   "configKey": "ui",
   "compatibility": {
-    "nuxt": ">=3.13.1"
+    "nuxt": ">=3.16.2"
   },
   "builder": {
-    "@nuxt/module-builder": "1.0.1",
-    "unbuild": "3.5.0"
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,37 +1,71 @@
-import { defineNuxtModule, useLogger, createResolver, hasNuxtModule, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { v as version, n as name } from './shared/ui.D1BTWZFB.mjs';
+import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
+import { defu } from 'defu';
+import { v as version, n as name, a as addTemplates } from './shared/ui.DLOxhmP0.mjs';
+import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.CzIlLITK.mjs';
+import 'node:process';
+import 'node:url';
+import '@unocss/config';
+import 'knitwork';
+import 'scule';
+import '@byyuurin/ui-kit';
+import '../dist/runtime/utils/index.js';
 
 const module = defineNuxtModule({
   meta: {
-    name: name,
-    version: version,
+    name,
+    version,
     configKey: "ui",
     compatibility: {
-      nuxt: ">=3.13.1"
+      nuxt: ">=3.16.2"
     }
   },
-  defaults: {
-    prefix: "U"
-  },
-  setup(options, nuxt) {
-    const logger = useLogger(name);
+  defaults: defaultOptions,
+  async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    if (!hasNuxtModule("@unocss/nuxt")) {
-      logger.error(`\`${name}\` requires the \`@unocss/nuxt\` module to be installed.`);
-      return;
-    }
-    nuxt.options.vite.optimizeDeps ??= {};
-    nuxt.options.vite.optimizeDeps.include ??= [];
-    nuxt.options.vite.optimizeDeps.include.push(`${name}/unocss`);
+    options.theme ||= {};
+    options.theme.colors = resolveColors(options.theme.colors);
+    nuxt.options.ui = options;
     nuxt.options.alias["#ui"] = resolve("./runtime");
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUIConfig(options.theme.colors));
+    nuxt.options.app.rootAttrs ||= {};
+    nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
+    async function registerModule(name2, key, options2) {
+      if (hasNuxtModule(name2))
+        nuxt.options[key] = defu(nuxt.options[key], options2);
+      else
+        await installModule(name2, defu(nuxt.options[key], options2));
+    }
+    await registerModule("@unocss/nuxt", "unocss", {
+      preflight: false,
+      wind3: false,
+      wind4: true,
+      mergeSelectors: false
+    });
+    await registerModule("@nuxt/icon", "icon", {
+      cssLayer: "components"
+    });
+    if (options.fonts) {
+      await registerModule("@nuxt/fonts", "fonts", {
+        defaults: {
+          weights: [400, 500, 600, 700]
+        }
+      });
+    }
+    if (options.colorMode) {
+      await registerModule("@nuxtjs/color-mode", "colorMode", {
+        classSuffix: "",
+        disableTransition: true
+      });
+    }
+    addPlugin({ src: resolve("./runtime/plugins/colors") });
     addComponentsDir({
       path: resolve("./runtime/components"),
-      prefix: options.prefix,
-      pathPrefix: false
+      pathPrefix: false,
+      prefix: options.prefix
     });
     addImportsDir(resolve("./runtime/composables"));
+    addTemplates(options, nuxt, resolve);
   }
 });
 
 export { module as default };
-//# sourceMappingURL=module.mjs.map

package/dist/runtime/components/Accordion.vue

@@ -1,20 +1,22 @@
 <script>
-
+import theme from "#build/ui/accordion";
 </script>
 
 <script setup>
 import { reactivePick } from "@vueuse/core";
 import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, useForwardPropsEmits } from "reka-ui";
 import { computed } from "vue";
-import { useTheme } from "../composables/useTheme";
+import { useAppConfig } from "#imports";
 import { get } from "../utils";
+import { cv, merge } from "../utils/style";
+import Icon from "./Icon.vue";
 const props = defineProps({
+  as: { type: null, required: false },
   items: { type: Array, required: false },
-  trailingIcon: { type: String, required: false },
-  labelKey: { type: String, required: false, default: "label" },
-  class: { type: null, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  labelKey: { type: null, required: false, default: "label" },
   ui: { type: null, required: false },
-  as: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
   collapsible: { type: Boolean, required: false, default: true },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
@@ -24,46 +26,49 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "type", "unmountOnHide"), emit);
-const { theme, generateStyle } = useTheme();
-const style = computed(() => generateStyle("accordion", props));
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "unmountOnHide"), emit);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.accordion));
+  return styler(props);
+});
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
       :key="index"
       :value="item.value || String(index)"
       :disabled="item.disabled"
-      :class="style.item({ class: props.ui?.item })"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       data-part="item"
     >
-      <AccordionHeader :class="style.header({ class: props.ui?.header })" data-part="header">
-        <AccordionTrigger :class="style.trigger({ class: props.ui?.trigger, disabled: item.disabled })" data-part="trigger">
-          <slot name="leading" v-bind="{ item, index, open }">
-            <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })" data-part="leading-icon"></span>
+      <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })" data-part="header">
+        <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })" data-part="trigger">
+          <slot name="leading" v-bind="{ item, index, open, ui }">
+            <Icon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" data-part="leadingIcon" />
           </slot>
 
-          <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })" data-part="label">
+          <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
             <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey) }}</slot>
           </span>
 
-          <slot name="trailing" v-bind="{ item, index, open }">
-            <span :class="style.trailingIcon({ class: [item.trailingIcon || props.trailingIcon || theme.app.icons.chevronDown, props.ui?.trailingIcon] })" data-part="trailing-icon"></span>
+          <slot name="trailing" v-bind="{ item, index, open, ui }">
+            <Icon :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" data-part="trailingIcon" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
       <AccordionContent
-        v-if="item.content || slots.content || item.slot && slots[item.slot] || slots.body || item.slot && slots[`${item.slot}-body`]"
-        :class="style.content({ class: props.ui?.content })"
+        v-if="item.content || !!slots.content || item.slot && slots[item.slot] || !!slots.body || item.slot && slots[`${item.slot}-body`]"
+        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
         data-part="content"
       >
-        <slot :name="item.slot || 'content'" v-bind="{ item, index, open }">
-          <div :class="style.body({ class: props.ui?.body })" data-part="body">
-            <slot :name="item.slot ? `${item.slot}-body` : 'body'" v-bind="{ item, index, open }">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open" :ui="ui">
+          <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })" data-part="body">
+            <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open" :ui="ui">
               {{ item.content }}
             </slot>
           </div>

package/dist/runtime/components/Accordion.vue.d.ts

@@ -1,52 +1,74 @@
-import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui';
-import type { accordion } from '../theme/index.js';
-import type { ComponentAttrs, DynamicSlots } from '../types/index.js';
-export interface AccordionEmits extends AccordionRootEmits {
-}
-export interface AccordionItem {
+import type { AccordionRootEmits, AccordionRootProps, PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/accordion';
+import type { ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { DynamicSlots, GetItemKeys, StaticSlot } from '../types/utils';
+export interface AccordionItem extends ComponentBaseProps {
     label?: string;
-    icon?: string;
-    trailingIcon?: string;
+    icon?: IconProps['name'];
+    trailingIcon?: IconProps['name'];
     slot?: string;
     content?: string;
     /** A unique value for the accordion item. Defaults to the index. */
     value?: string;
     disabled?: boolean;
+    ui?: Pick<ComponentUIProps<typeof theme>, 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>;
     [key: string]: any;
 }
-type SlotProps<T extends AccordionItem> = (props: {
-    item: T;
-    index: number;
-    open: boolean;
-}) => any;
-export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
-    default?: SlotProps<T>;
-    leading?: SlotProps<T>;
-    trailing?: SlotProps<T>;
-    content?: SlotProps<T>;
-    body?: SlotProps<T>;
-} & DynamicSlots<T, 'body', SlotProps<T>>;
-export interface AccordionProps<T extends AccordionItem = AccordionItem> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'as' | 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
+export interface AccordionProps<T extends AccordionItem = AccordionItem> extends ComponentBaseProps, Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
     items?: T[];
     /**
      * The icon displayed on the right side of the trigger.
      * @default app.icons.chevronDown
      */
-    trailingIcon?: string;
-    labelKey?: string;
+    trailingIcon?: IconProps['name'];
+    /**
+     * The key used to get the label from the item.
+     * @default "label"
+     */
+    labelKey?: GetItemKeys<T>;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface AccordionEmits extends AccordionRootEmits {
 }
-declare const _default: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & AccordionProps<T> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+type SlotProps<T extends AccordionItem> = StaticSlot<{
+    item: T;
+    index: number;
+    open: boolean;
+    ui: ComponentStyler<typeof theme>;
+}>;
+export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
+    default: StaticSlot<{
+        item: T;
+        index: number;
+        open: boolean;
+    }>;
+    leading: SlotProps<T>;
+    trailing: SlotProps<T>;
+    content: SlotProps<T>;
+    body: SlotProps<T>;
+} & DynamicSlots<T, 'body', {
+    index: number;
+    open: boolean;
+    ui: ComponentStyler<typeof theme>;
+}>;
+declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<AccordionProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: AccordionSlots<T>;
     emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};