@byyuurin/ui 0.0.2 → 0.0.4

package/README.md

@@ -15,10 +15,18 @@ https://byyuurin-ui.netlify.app/
 ## Installation
 
 ```ssh
-pnpm i @byyuurin/ui
+pnpm i -D unocss @unocss/reset @byyuurin/ui
 ```
 
-## UnoCSS
+icons
+
+```ssh
+pnpm i -D @iconify-json/[the-collection-you-want]
+```
+
+## Setup
+
+### UnoCSS
 
 ```ts
 // uno.config.ts
@@ -28,8 +36,19 @@ import { defineConfig, presetIcons, presetUno } from 'unocss'
 export default defineConfig({
   presets: [
     presetUno(),
-    presetIcons(),
-    ui(),
+    presetIcons({
+      cdn: 'https://esm.sh/', // OR install @iconify-json/[the-collection-you-want]
+    }),
+    ui({
+      radius: '0rem', // optional
+      radiusBox: '0rem', // optional
+      radiusButton: '0rem', // optional
+      radiusTabs: '0rem', // optional
+      cb: '#1f2937', // optional
+      c1: '#ffffff', // optional
+      c2: '#f2f2f2', // optional
+      c3: '#e5e6e6', // optional
+    }),
   ],
   content: {
     pipeline: {
@@ -42,11 +61,64 @@ export default defineConfig({
 })
 ```
 
+### Vite
+
+```ts
+// vite.config.ts
+
+import UIResolver from '@byyuurin/ui/resolver'
+import Vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import VueComponents from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    UnoCSS(),
+    Vue(),
+    VueComponents({
+      dts: 'src/typed-components.d.ts',
+      resolvers: [
+        UIResolver({
+          prefix: 'U', // optional
+        }),
+      ],
+    }),
+    AutoImport({
+      dts: 'src/typed-imports.d.ts',
+      imports: ['vue'],
+    }),
+  ],
+})
+```
+
+### Nuxt
+
+```ts
+// nuxt.config.ts
+
+export default defineNuxtConfig({
+  modules: [
+    '@unocss/nuxt',
+    '@byyuurin/ui/nuxt',
+  ],
+  css: [
+    '@unocss/reset/tailwind.css',
+  ],
+  ui: {
+    prefix: 'U', // optional
+  },
+})
+```
+
 ## 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)
 
 ## License
 

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export * from './components';
-export * from './composables';
-export * from './types';
+export * from './runtime/components';
+export * from './runtime/composables';
+export * from './runtime/types';

package/dist/index.mjs

@@ -1,3 +1,3 @@
-export * from "./components/index.mjs";
-export * from "./composables/index.mjs";
-export * from "./types/index.mjs";
+export * from "./runtime/components/index.mjs";
+export * from "./runtime/composables/index.mjs";
+export * from "./runtime/types/index.mjs";

package/dist/nuxt.d.mts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * prefix for components used in templates
+     *
+     * @default ""
+     */
+    prefix?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { type ModuleOptions, _default as default };

package/dist/nuxt.d.ts

@@ -1,4 +1,6 @@
-export interface ModuleOptions {
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
     /**
      * prefix for components used in templates
      *
@@ -6,5 +8,6 @@ export interface ModuleOptions {
      */
     prefix?: string;
 }
-declare const _default: import("@nuxt/schema").NuxtModule<ModuleOptions, ModuleOptions, false>;
-export default _default;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { type ModuleOptions, _default as default };

package/dist/nuxt.mjs

@@ -1,6 +1,7 @@
-import { addComponent, defineNuxtModule, useLogger } from "@nuxt/kit";
-import { componentNames, packageName } from "./internal/index.mjs";
-export default defineNuxtModule({
+import { defineNuxtModule, useLogger, addComponent } from '@nuxt/kit';
+import { p as packageName, c as componentNames } from './shared/ui.Cmq14xN9.mjs';
+
+const nuxt = defineNuxtModule({
   meta: {
     name: packageName,
     configKey: "ui",
@@ -26,3 +27,5 @@ export default defineNuxtModule({
     }
   }
 });
+
+export { nuxt as default };

package/dist/resolver.d.mts

@@ -0,0 +1,13 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+interface ResolverOptions {
+    /**
+     * prefix for components used in templates
+     *
+     * @default ""
+     */
+    prefix?: string;
+}
+declare function export_default(options?: ResolverOptions): ComponentResolver;
+
+export { type ResolverOptions, export_default as default };

package/dist/resolver.d.ts

@@ -1,5 +1,6 @@
-import type { ComponentResolver } from 'unplugin-vue-components';
-export interface ResolverOptions {
+import { ComponentResolver } from 'unplugin-vue-components';
+
+interface ResolverOptions {
     /**
      * prefix for components used in templates
      *
@@ -7,4 +8,6 @@ export interface ResolverOptions {
      */
     prefix?: string;
 }
-export default function (options?: ResolverOptions): ComponentResolver;
+declare function export_default(options?: ResolverOptions): ComponentResolver;
+
+export { type ResolverOptions, export_default as default };

package/dist/resolver.mjs

@@ -1,5 +1,6 @@
-import { componentNames, packageName } from "./internal/constants.mjs";
-export default function(options = {}) {
+import { c as componentNames, p as packageName } from './shared/ui.Cmq14xN9.mjs';
+
+function resolver(options = {}) {
   const { prefix = "" } = options;
   return {
     type: "component",
@@ -16,3 +17,5 @@ export default function(options = {}) {
     }
   };
 }
+
+export { resolver as default };

package/dist/{components → runtime/components}/Accordion.vue

@@ -73,8 +73,8 @@ const style = computed(() => {
             <i v-if="item.icon" :class="style.icon({ class: [item.icon, props.ui?.icon] })"></i>
           </slot>
 
-          <span v-if="get(item, props.labelKey as string) || slots.default" :class="style.label({ class: props.ui?.label })">
-            <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey as string) }}</slot>
+          <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
+            <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey) }}</slot>
           </span>
 
           <slot name="trailing-icon" v-bind="{ item, index, open }">
@@ -100,5 +100,21 @@ const style = computed(() => {
 </template>
 
 <style>
-@keyframes accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}
+@keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-accordion-content-height);
+  }
+}
 </style>

package/dist/{components → runtime/components}/App.vue

@@ -1,8 +1,10 @@
 <script lang="ts">
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
+import type { UserConfig } from 'unocss'
 import type { ThemeExtension, ToasterProps } from '../types'
 
 export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+  unoConfig?: UserConfig
   ui?: ThemeExtension
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps
@@ -19,11 +21,12 @@ import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { computed, shallowRef, toRef, useId } from 'vue'
 import type { ModalState } from '../composables/useModal'
 import { provideModalState } from '../composables/useModal'
-import { provideThemeExtension } from '../composables/useTheme'
+import { provideThemeExtension, provideUnoConfig } from '../composables/useTheme'
 import ModalProvider from './ModalProvider.vue'
 import Toaster from './Toaster.vue'
 
 const props = withDefaults(defineProps<AppProps>(), {
+  unoConfig: () => ({}),
   ui: () => ({}),
 })
 
@@ -41,6 +44,7 @@ const modalState = shallowRef<ModalState>({
 const themeExtension = computed(() => props.ui)
 
 provideModalState(modalState)
+provideUnoConfig(props.unoConfig)
 provideThemeExtension(themeExtension)
 </script>
 

package/dist/{components → runtime/components}/Button.vue

@@ -1,94 +1,92 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { button } from '../theme'
-import type { ComponentAttrs } from '../types'
-import type { LinkProps } from './Link.vue'
-
-export interface ButtonSlots {
-  default?: (props?: any) => any
-  prefix?: (props?: any) => any
-  suffix?: (props?: any) => any
-}
-
-type ButtonVariants = VariantProps<typeof button>
-type UIOptions = ComponentAttrs<typeof button>['ui'] & LinkProps['ui']
-
-export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>, UseComponentIconsProps, Omit<LinkProps, 'ui' | 'raw'> {
-  icon?: string
-  label?: string
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  round?: boolean
-  loading?: boolean
-  active?: boolean
-  disabled?: boolean
-  ui?: UIOptions
-}
-</script>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { useComponentIcons, useTheme } from '../composables'
-import { pickLinkProps } from '../internal'
-import { omit } from '../utils'
-import Link from './Link.vue'
-
-const props = withDefaults(defineProps<ButtonProps>(), {
-  variant: 'solid',
-  size: 'md',
-})
-
-const slots = defineSlots<ButtonSlots>()
-
-const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(
-  computed(() => ({ ...props, loading: props.loading })),
-)
-
-const linkProps = pickLinkProps(props)
-
-const { theme, createStyler } = useTheme()
-
-const style = computed(() => {
-  const styler = createStyler(theme.value.button)
-  return styler({
-    ...props,
-    prefix: isPrefix.value,
-    suffix: isSuffix.value,
-    class: [
-      props.class,
-      props.active ? props.ui?.active : props.ui?.inactive,
-      props.disabled ? props.ui?.disabled : undefined,
-    ],
-  })
-})
-</script>
-
-<template>
-  <Link
-    :class="style.base({ class: [props.class, props.ui?.base] })"
-    :type="props.type"
-    :disabled="props.disabled || props.loading"
-    v-bind="omit(linkProps, ['type', 'disabled'])"
-    raw
-  >
-    <slot name="prefix">
-      <i
-        v-if="isPrefix && prefixIconName"
-        :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
-      ></i>
-    </slot>
-    <span
-      v-if="slots.default || props.label"
-      :class="style.label({ class: props.ui?.label })"
-    >
-      <slot>{{ label }}</slot>
-    </span>
-    <slot name="suffix">
-      <i
-        v-if="isSuffix && suffixIconName"
-        :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
-      ></i>
-    </slot>
-  </Link>
-</template>
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { button } from '../theme'
+import type { ComponentAttrs } from '../types'
+import type { LinkProps } from './Link.vue'
+
+export interface ButtonSlots {
+  default?: (props?: any) => any
+  prefix?: (props?: any) => any
+  suffix?: (props?: any) => any
+}
+
+type ButtonVariants = VariantProps<typeof button>
+type UIOptions = ComponentAttrs<typeof button>['ui'] & LinkProps['ui']
+
+export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>, UseComponentIconsProps, Omit<LinkProps, 'ui' | 'raw'> {
+  icon?: string
+  label?: string
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  loading?: boolean
+  active?: boolean
+  disabled?: boolean
+  ui?: UIOptions
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useComponentIcons, useTheme } from '../composables'
+import { omit, pickLinkProps } from '../utils'
+import Link from './Link.vue'
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: 'solid',
+  size: 'md',
+})
+
+const slots = defineSlots<ButtonSlots>()
+
+const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(
+  computed(() => ({ ...props, loading: props.loading })),
+)
+
+const linkProps = pickLinkProps(props)
+
+const { theme, createStyler } = useTheme()
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.button)
+  return styler({
+    ...props,
+    prefix: isPrefix.value,
+    suffix: isSuffix.value,
+    class: [
+      props.class,
+      props.active ? props.ui?.active : props.ui?.inactive,
+      props.disabled ? props.ui?.disabled : undefined,
+    ],
+  })
+})
+</script>
+
+<template>
+  <Link
+    :class="style.base({ class: [props.class, props.ui?.base] })"
+    :type="props.type"
+    :disabled="props.disabled || props.loading"
+    v-bind="omit(linkProps, ['type', 'disabled'])"
+    raw
+  >
+    <slot name="prefix">
+      <i
+        v-if="isPrefix && prefixIconName"
+        :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
+      ></i>
+    </slot>
+    <span
+      v-if="slots.default || props.label"
+      :class="style.label({ class: props.ui?.label })"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+    <slot name="suffix">
+      <i
+        v-if="isSuffix && suffixIconName"
+        :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
+      ></i>
+    </slot>
+  </Link>
+</template>