@byyuurin/ui 0.0.5 → 0.0.7

package/README.md

@@ -5,7 +5,6 @@ A collection of Vue.js components for my projects.
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![bundle][bundle-src]][bundle-href]
-[![JSDocs][jsdocs-src]][jsdocs-href]
 [![License][license-src]][license-href]
 
 ## Preview
@@ -30,7 +29,7 @@ pnpm i -D @iconify-json/[the-collection-you-want]
 
 ```ts
 // uno.config.ts
-import ui from '@byyuurin/ui/unocss-preset'
+import { preset as ui } from '@byyuurin/ui/unocss'
 import { defineConfig, presetIcons, presetUno } from 'unocss'
 
 export default defineConfig({
@@ -43,16 +42,24 @@ export default defineConfig({
       radius: '0rem', // optional
       radiusBox: '0rem', // optional
       radiusButton: '0rem', // optional
+      radiusCheckbox: '0rem', // optional
+      radiusRadio: '0rem', // optional
+      radiusSwitch: '0rem', // optional
       radiusTabs: '0rem', // optional
       cb: '#1f2937', // optional
-      c1: '#ffffff', // optional
-      c2: '#f2f2f2', // optional
-      c3: '#e5e6e6', // optional
+      cp: '#1f2937', // optional
+      cx: '#ffffff', // optional
     }),
   ],
 })
 ```
 
+New Rules
+
+- `ui-[color]`
+- `bg-soft-[color]`
+- `bg-soft-[color]/[mix-ratio]`
+
 ### Vite
 
 ```ts
@@ -62,7 +69,6 @@ import UI from '@byyuurin/ui/vite'
 import Vue from '@vitejs/plugin-vue'
 import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
-import Inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
   plugins: [
@@ -111,7 +117,7 @@ export default defineNuxtConfig({
 
 ## License
 
-[MIT](./LICENSE) License © 2024-PRESENT [Yuurin](https://github.com/byyurin)
+[MIT](./LICENSE) License © 2024-PRESENT [Yuurin](https://github.com/byyuurin)
 
 <!-- Badges -->
 
@@ -121,7 +127,5 @@ export default defineNuxtConfig({
 [npm-downloads-href]: https://npmjs.com/package/@byyuurin/ui
 [bundle-src]: https://img.shields.io/bundlephobia/minzip/@byyuurin/ui?style=flat&colorA=080f12&colorB=1fa669&label=minzip
 [bundle-href]: https://bundlephobia.com/result?p=@byyuurin/ui
-[license-src]: https://img.shields.io/github/license/byyuurin/@byyuurin/ui.svg?style=flat&colorA=080f12&colorB=1fa669
-[license-href]: https://github.com/byyuurin/@byyuurin/ui/blob/main/LICENSE
-[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
-[jsdocs-href]: https://www.jsdocs.io/package/@byyuurin/ui
+[license-src]: https://img.shields.io/github/license/byyuurin/ui.svg?style=flat&colorA=080f12&colorB=1fa669
+[license-href]: https://github.com/byyuurin/ui/blob/main/LICENSE

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@byyuurin/ui",
+  "configKey": "ui",
+  "compatibility": {
+    "nuxt": ">=3.13.1"
+  },
+  "version": "0.0.7",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/{nuxt.mjs → module.mjs}

@@ -1,9 +1,7 @@
 import { defineNuxtModule, useLogger, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { p as packageName } from './shared/ui.CzDyI29e.mjs';
-import 'node:url';
-import 'pathe';
+import { p as packageName } from './shared/ui.d1728164.mjs';
 
-const nuxt = defineNuxtModule({
+const module = defineNuxtModule({
   meta: {
     name: packageName,
     configKey: "ui",
@@ -21,6 +19,9 @@ const nuxt = defineNuxtModule({
       logger.error(`\`${packageName}\` requires the \`@unocss/nuxt\` module to be installed.`);
       return;
     }
+    nuxt.options.vite.optimizeDeps ??= {};
+    nuxt.options.vite.optimizeDeps.include ??= [];
+    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`);
     nuxt.options.alias["#ui"] = resolve("./runtime");
     addComponentsDir({
       path: resolve("./runtime/components"),
@@ -31,5 +32,5 @@ const nuxt = defineNuxtModule({
   }
 });
 
-export { nuxt as default };
-//# sourceMappingURL=nuxt.mjs.map
+export { module as default };
+//# sourceMappingURL=module.mjs.map

package/dist/module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.mjs","sources":["../src/module.ts"],"sourcesContent":["import { addComponentsDir, addImportsDir, createResolver, defineNuxtModule, useLogger } from '@nuxt/kit'\nimport { packageName } from './shared'\n\nexport interface ModuleOptions {\n  /**\n   * prefix for components used in templates\n   *\n   * @default \"U\"\n   */\n  prefix?: string\n}\n\nexport default defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: packageName,\n    configKey: 'ui',\n    compatibility: {\n      nuxt: '>=3.13.1',\n    },\n  },\n  defaults: {\n    prefix: 'U',\n  },\n  setup(options, nuxt) {\n    const logger = useLogger(packageName)\n    const { resolve } = createResolver(import.meta.url)\n\n    // Make sure the UnoCSS Nuxt module is installed\n    if (!nuxt.options.modules.includes('@unocss/nuxt')) {\n      logger.error(`\\`${packageName}\\` requires the \\`@unocss/nuxt\\` module to be installed.`)\n      return\n    }\n\n    nuxt.options.vite.optimizeDeps ??= {}\n    nuxt.options.vite.optimizeDeps.include ??= []\n    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`)\n\n    nuxt.options.alias['#ui'] = resolve('./runtime')\n\n    addComponentsDir({\n      path: resolve('./runtime/components'),\n      prefix: options.prefix,\n      pathPrefix: false,\n    })\n\n    addImportsDir(resolve('./runtime/composables'))\n  },\n})\n"],"names":[],"mappings":";;;AAYA,eAAe,gBAAgC,CAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,WAAA;AAAA,IACN,SAAW,EAAA,IAAA;AAAA,IACX,aAAe,EAAA;AAAA,MACb,IAAM,EAAA,UAAA;AAAA,KACR;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,MAAQ,EAAA,GAAA;AAAA,GACV;AAAA,EACA,KAAA,CAAM,SAAS,IAAM,EAAA;AACnB,IAAM,MAAA,MAAA,GAAS,UAAU,WAAW,CAAA,CAAA;AACpC,IAAA,MAAM,EAAE,OAAA,EAAY,GAAA,cAAA,CAAe,YAAY,GAAG,CAAA,CAAA;AAGlD,IAAA,IAAI,CAAC,IAAK,CAAA,OAAA,CAAQ,OAAQ,CAAA,QAAA,CAAS,cAAc,CAAG,EAAA;AAClD,MAAO,MAAA,CAAA,KAAA,CAAM,CAAK,EAAA,EAAA,WAAW,CAA0D,wDAAA,CAAA,CAAA,CAAA;AACvF,MAAA,OAAA;AAAA,KACF;AAEA,IAAK,IAAA,CAAA,OAAA,CAAQ,IAAK,CAAA,YAAA,KAAiB,EAAC,CAAA;AACpC,IAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,CAAK,YAAa,CAAA,OAAA,KAAY,EAAC,CAAA;AAC5C,IAAA,IAAA,CAAK,QAAQ,IAAK,CAAA,YAAA,CAAa,QAAQ,IAAK,CAAA,CAAA,EAAG,WAAW,CAAS,OAAA,CAAA,CAAA,CAAA;AAEnE,IAAA,IAAA,CAAK,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,QAAQ,WAAW,CAAA,CAAA;AAE/C,IAAiB,gBAAA,CAAA;AAAA,MACf,IAAA,EAAM,QAAQ,sBAAsB,CAAA;AAAA,MACpC,QAAQ,OAAQ,CAAA,MAAA;AAAA,MAChB,UAAY,EAAA,KAAA;AAAA,KACb,CAAA,CAAA;AAED,IAAc,aAAA,CAAA,OAAA,CAAQ,uBAAuB,CAAC,CAAA,CAAA;AAAA,GAChD;AACF,CAAC,CAAA;;;;"}

package/dist/runtime/components/Accordion.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
-import type { AccordionRootEmits, AccordionRootProps, PrimitiveProps } from 'reka-ui'
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
 import type { accordion } from '../theme'
-import type { ComponentAttrs, DynamicSlots } from '../types'
+import type { ComponentAttrs } from '../types'
 
 export interface AccordionItem {
   label?: string
   icon?: string
-  trailingIcon?: string
+  suffixIcon?: string
   slot?: string
   content?: string
   /** A unique value for the accordion item. Defaults to the index. */
@@ -20,14 +20,19 @@ type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
 
 export type AccordionSlots<T extends { slot?: string }> = {
   default?: SlotProps<T>
-  icon?: SlotProps<T>
+  prefix?: SlotProps<T>
+  suffix?: SlotProps<T>
   content?: SlotProps<T>
   body?: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
+} & Record<string, SlotProps<T>>
 
-export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
-  as?: PrimitiveProps['as']
+export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'as' | 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
   items?: T[]
+  /**
+   * The icon displayed on the right side of the trigger.
+   * @default app.icons.down
+   */
+  suffixIcon?: string
   labelKey?: string
 }
 </script>
@@ -44,11 +49,11 @@ const props = withDefaults(defineProps<AccordionProps<T>>(), {
   collapsible: true,
   unmountOnHide: true,
   labelKey: 'label',
-  items: () => [],
 })
-const slots = defineSlots<AccordionSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'))
+const emit = defineEmits<AccordionEmits>()
+const slots = defineSlots<AccordionSlots<T>>()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'), emit)
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
@@ -69,16 +74,16 @@ const style = computed(() => {
     >
       <AccordionHeader :class="style.header({ class: props.ui?.header })">
         <AccordionTrigger :class="style.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
-          <slot name="icon" v-bind="{ item, index, open }">
-            <i v-if="item.icon" :class="style.icon({ class: [item.icon, props.ui?.icon] })"></i>
+          <slot name="prefix" v-bind="{ item, index, open }">
+            <span v-if="item.icon" :class="style.prefixIcon({ class: [item.icon, props.ui?.prefixIcon] })"></span>
           </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 }">
-            <i v-if="item.trailingIcon" :class="style.icon({ class: [item.trailingIcon, props.ui?.trailingIcon] })"></i>
+          <slot name="suffix" v-bind="{ item, index, open }">
+            <span :class="style.suffixIcon({ class: [item.suffixIcon || props.suffixIcon || theme.app.icons.down, props.ui?.suffixIcon] })"></span>
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
@@ -100,21 +105,5 @@ const style = computed(() => {
 </template>
 
 <style>
-@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);
-  }
-}
+@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)}}
 </style>

package/dist/runtime/components/Alert.vue

@@ -74,7 +74,7 @@ const style = computed(() => {
     :class="style.root({ class: [props.class, props.ui?.root] })"
   >
     <slot name="prepend">
-      <i v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></i>
+      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
     </slot>
 
     <div :class="style.wrapper({ class: props.ui?.wrapper })">

package/dist/runtime/components/App.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
+import type { UserConfig } from '@unocss/core'
 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'> {

package/dist/runtime/components/Badge.vue

@@ -37,7 +37,6 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<BadgeProps>(), {
-  size: 'md',
   position: 'top-right',
 })
 

package/dist/runtime/components/Button.vue

@@ -12,9 +12,8 @@ export interface ButtonSlots {
 }
 
 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'> {
+export interface ButtonProps extends ComponentAttrs<typeof button>, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
   icon?: string
   label?: string
   variant?: ButtonVariants['variant']
@@ -22,12 +21,13 @@ export interface ButtonProps extends Omit<ComponentAttrs<typeof button>, 'ui'>,
   loading?: boolean
   active?: boolean
   disabled?: boolean
-  ui?: UIOptions
 }
 </script>
 
 <script lang="ts" setup>
+import { useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
+import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useTheme } from '../composables/useTheme'
 import { omit, pickLinkProps } from '../utils'
@@ -35,16 +35,16 @@ import Link from './Link.vue'
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   variant: 'solid',
-  size: 'md',
 })
 
 const slots = defineSlots<ButtonSlots>()
 
+const { size, orientation } = useButtonGroup(props)
 const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: props.loading })),
 )
 
-const linkProps = pickLinkProps(props)
+const linkProps = useForwardProps(pickLinkProps(props))
 
 const { theme, createStyler } = useTheme()
 
@@ -52,12 +52,14 @@ const style = computed(() => {
   const styler = createStyler(theme.value.button)
   return styler({
     ...props,
+    size: size.value,
+    groupOrientation: orientation.value,
     prefix: isPrefix.value,
     suffix: isSuffix.value,
     class: [
       props.class,
-      props.active ? props.ui?.active : props.ui?.inactive,
-      props.disabled ? props.ui?.disabled : undefined,
+      props.active ? props.activeClass : props.inactiveClass,
+      props.disabled ? props.disableClass : undefined,
     ],
   })
 })
@@ -68,14 +70,14 @@ const style = computed(() => {
     :class="style.base({ class: [props.class, props.ui?.base] })"
     :type="props.type"
     :disabled="props.disabled || props.loading"
-    v-bind="omit(linkProps, ['type', 'disabled'])"
+    v-bind="omit(linkProps, ['type', 'disabled', 'activeClass', 'inactiveClass', 'disableClass'])"
     raw
   >
     <slot name="prefix">
-      <i
+      <span
         v-if="isPrefix && prefixIconName"
         :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
-      ></i>
+      ></span>
     </slot>
     <span
       v-if="props.label || slots.default"
@@ -84,10 +86,10 @@ const style = computed(() => {
       <slot>{{ label }}</slot>
     </span>
     <slot name="suffix">
-      <i
+      <span
         v-if="isSuffix && suffixIconName"
         :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
-      ></i>
+      ></span>
     </slot>
   </Link>
 </template>

package/dist/runtime/components/ButtonGroup.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { buttonGroup } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type ButtonGroupVariant = VariantProps<typeof buttonGroup>
+
+export interface ButtonGroupProps extends Omit<ComponentAttrs<typeof buttonGroup>, 'ui'>, Pick<PrimitiveProps, 'as'> {
+  size?: ButtonGroupVariant['size']
+  orientation?: ButtonGroupVariant['orientation']
+}
+
+export interface ButtonGroupSlots {
+  default?: (props?: any) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { provideButtonGroup } from '../composables/useButtonGroup'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<ButtonGroupProps>(), {
+  orientation: 'horizontal',
+})
+
+defineSlots<ButtonGroupSlots>()
+
+provideButtonGroup(computed(() => ({
+  size: props.size,
+  orientation: props.orientation,
+})))
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.buttonGroup)
+  return styler(props)
+})
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style">
+    <slot></slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Card.vue

@@ -1,14 +1,9 @@
 <script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
 import type { PrimitiveProps } from 'reka-ui'
 import type { card } from '../theme'
 import type { ComponentAttrs } from '../types'
 
-export interface CardProps extends ComponentAttrs<typeof card> {
-  as?: PrimitiveProps['as']
-  title?: string
-  description?: string
-}
-
 export interface CardSlots {
   default?: (props?: {}) => any
   content?: (props?: {}) => any
@@ -17,6 +12,14 @@ export interface CardSlots {
   description?: (props?: any) => any
   footer?: (props?: {}) => any
 }
+
+type CardVariants = VariantProps<typeof card>
+export interface CardProps extends ComponentAttrs<typeof card> {
+  as?: PrimitiveProps['as']
+  variant?: CardVariants['variant']
+  title?: string
+  description?: string
+}
 </script>
 
 <script setup lang="ts">