@byyuurin/ui 0.5.2 → 0.5.3

package/README.md

@@ -56,6 +56,7 @@ import { createUnoPreset } from '@byyuurin/ui/unocss'
 import { defineConfig, presetWind4 } from 'unocss'
 
 export default defineConfig({
+  outputToCssLayers: true,
   presets: [
     presetWind4(),
     createUnoPreset({
@@ -65,6 +66,10 @@ export default defineConfig({
 })
 ```
 
+> [!NOTE]
+> This preset relies on CSS layers to ensure generated CSS variables
+> can be properly overridden. Make sure `outputToCssLayers` is enabled.
+
 > [!IMPORTANT]
 > The preset colors configuration must be the same as your nuxt configuration
 
@@ -160,7 +165,7 @@ export default defineConfig({
 })
 ```
 
-3. Add UnoCSS preset in your `uno.config.ts`:
+1. Add UnoCSS preset in your `uno.config.ts`:
 
 ```ts
 import { createUnoPreset } from '@byyuurin/ui/unocss' // <---
@@ -168,6 +173,7 @@ import { defineConfig, presetWebFonts, presetWind4 } from 'unocss'
 import uiConfig from './ui.config' // <---
 
 export default defineConfig({
+  outputToCssLayers: true, // <--
   presets: [
     presetWind4(),
     createUnoPreset(uiConfig.uno), // <---
@@ -180,6 +186,10 @@ export default defineConfig({
 })
 ```
 
+> [!NOTE]
+> This preset relies on CSS layers to ensure generated CSS variables
+> can be properly overridden. Make sure `outputToCssLayers` is enabled.
+
 4. Add the UI Vue plugin in your `src/main.ts`
 
 ```ts

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@byyuurin/ui",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.16.2"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 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.B6u-xvto.mjs';
+import { v as version, n as name, a as addTemplates } from './shared/ui.zcNpBAcn.mjs';
 import { d as defaultOptions, r as resolveColors, g as getDefaultConfig } from './shared/ui.Dy7aH7sf.mjs';
 import 'node:module';
 import 'node:url';

package/dist/runtime/components/CheckboxGroup.vue

@@ -33,7 +33,7 @@ const props = defineProps({
   indicator: { type: null, required: false },
   icon: { type: [String, Object], required: false }
 });
-const emit = defineEmits(["update:modelValue", "change"]);
+const emit = defineEmits(["change", "update:modelValue"]);
 const slots = defineSlots();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emit);
 const checkboxProps = useForwardProps(reactivePick(props, "indicator", "icon"));

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

@@ -2,7 +2,7 @@ import type { VariantProps } from '@byyuurin/ui-kit';
 import type { CheckboxGroupRootEmits, CheckboxGroupRootProps, CheckboxRootProps } from 'reka-ui';
 import theme from '#build/ui/checkbox-group';
 import type { CheckboxProps, ComponentBaseProps, ComponentUIProps } from '../types';
-import type { AcceptableValue, GetItemKeys, GetModelValue, StaticSlot } from '../types/utils';
+import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits, StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
 export type CheckboxGroupValue = AcceptableValue;
 interface CheckboxGroupItemBase {
@@ -54,9 +54,9 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGrou
     orientation?: ThemeVariants['orientation'];
     ui?: ComponentUIProps<typeof theme>;
 }
-export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> = CheckboxGroupRootEmits<T[number]> & {
+export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> = Omit<CheckboxGroupRootEmits, 'update:modelValue'> & {
     change: [event: Event];
-};
+} & GetModelValueEmits<T, VK, true>;
 export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> {
     legend: StaticSlot;
     label: StaticSlot<{
@@ -75,14 +75,14 @@ export default _default;
 declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T[number][]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<CheckboxGroupItem[]>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/InputNumber.vue

@@ -55,13 +55,14 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultValue",
 const { t } = useLocale();
 const { id, name, size: formFieldSize, color, highlight, disabled, ariaAttrs, emitFormBlur, emitFormFocus, emitFormInput, emitFormChange } = useFormField(props);
 const { size: fieldGroupSize, orientation } = useFieldGroup(props);
+const size = computed(() => fieldGroupSize.value || formFieldSize.value);
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.inputNumber));
   return styler({
     ...pick(props, ["variant", "orientation", "disabled"]),
     color: color.value,
-    size: fieldGroupSize.value || formFieldSize.value,
+    size: size.value,
     highlight: highlight.value,
     fieldGroup: orientation.value,
     increment: props.orientation === "vertical" ? !!props.increment || !!props.decrement : !!props.increment,
@@ -118,7 +119,7 @@ defineExpose({
         <slot name="increment">
           <Button
             :icon="incrementIcon"
-            :size="props.size"
+            :size="size"
             :color="color"
             variant="link"
             :aria-label="t('inputNumber.increment')"
@@ -133,7 +134,7 @@ defineExpose({
         <slot name="decrement">
           <Button
             :icon="decrementIcon"
-            :size="props.size"
+            :size="size"
             :color="color"
             variant="link"
             :aria-label="t('inputNumber.decrement')"

package/dist/runtime/components/Select.vue

@@ -87,12 +87,13 @@ const appConfig = useAppConfig();
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, {
   trailingIcon: appConfig.ui.icons.chevronDown
 })));
+const size = computed(() => fieldGroupSize.value || formFieldSize.value);
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.select));
   return styler({
     ...pick(props, ["variant", "loading"]),
     color: color.value,
-    size: fieldGroupSize.value || formFieldSize.value,
+    size: size.value,
     highlight: highlight.value,
     leading: isLeading.value || !!props.avatar || !!slots.leading,
     trailing: isTrailing.value || !!slots.trailing,
@@ -287,6 +288,7 @@ defineExpose({
               <Button
                 as="span"
                 :icon="props.clearIcon || appConfig.ui.icons.close"
+                :size="size"
                 variant="link"
                 color="neutral"
                 tabindex="-1"
@@ -311,7 +313,7 @@ defineExpose({
             <Input
               autofocus
               autocomplete="off"
-              :size="props.size"
+              :size="size"
               v-bind="searchInputProps"
               data-part="input"
               :class="ui.input({ class: props.ui?.input })"

package/dist/runtime/plugins/colors.js

@@ -2,13 +2,14 @@ import { colors } from "@unocss/preset-wind4/colors";
 import { computed } from "vue";
 import { defineNuxtPlugin, useAppConfig, useHead, useNuxtApp } from "#imports";
 const themeShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+const newline = "\n    ";
 function getColor(color, shade) {
   if (color in colors && typeof colors[color] === "object" && shade in colors[color])
     return colors[color][shade];
   return "";
 }
 function generateShades(key, value) {
-  return themeShades.map((shade) => `--ui-color-${key}-${shade}: var(--colors-${value === "neutral" ? "tw-neutral" : value}-${shade}, ${getColor(value, shade)});`).join("\n  ");
+  return themeShades.map((shade) => `--ui-color-${key}-${shade}: var(--colors-${value === "neutral" ? "tw-neutral" : value}-${shade}, ${getColor(value, shade)});`).join(newline);
 }
 function generateColor(key, shade) {
   return `--ui-${key}: var(--ui-color-${key}-${shade});`;
@@ -18,17 +19,18 @@ export default defineNuxtPlugin(() => {
   const nuxtApp = useNuxtApp();
   const root = computed(() => {
     const { neutral, ...colors2 } = appConfig.ui.colors;
-    return `:root {
-  ${Object.entries(appConfig.ui.colors).map(([key, value]) => generateShades(key, value)).join("\n  ")}
-}
-:root,
-.light {
-  ${Object.keys(colors2).map((key) => generateColor(key, 500)).join("\n  ")}
-}
-.dark {
-  ${Object.keys(colors2).map((key) => generateColor(key, 400)).join("\n  ")}
-}
-`;
+    return `@layer theme {
+  :root, host {
+    ${Object.entries(appConfig.ui.colors).map(([key, value]) => generateShades(key, value)).join(newline)}
+  }
+  :root,
+  .light {
+    ${Object.keys(colors2).map((key) => generateColor(key, 500)).join(newline)}
+  }
+  .dark {
+    ${Object.keys(colors2).map((key) => generateColor(key, 400)).join(newline)}
+  }
+}`;
   });
   const headData = {
     style: [{

package/dist/shared/{ui.B6u-xvto.mjs → ui.zcNpBAcn.mjs}

@@ -10,7 +10,7 @@ import { ct } from '@byyuurin/ui-kit';
 import { defu } from 'defu';
 
 const name = "@byyuurin/ui";
-const version = "0.5.2";
+const version = "0.5.3";
 
 const accordion = ct({
   parts: {
@@ -822,9 +822,9 @@ const calendar = (options) => ct({
 const card = ct({
   parts: {
     root: "rounded divide-y overflow-hidden",
-    header: "flex flex-wrap items-center gap-1 p-4 sm:px-6",
-    body: "flex-1 overflow-y-auto p-4 sm:p-6 empty:hidden",
-    footer: "flex items-center gap-1.5 p-4 sm:px-6",
+    header: "flex flex-wrap items-center gap-1 p-4",
+    body: "flex-1 overflow-y-auto p-4",
+    footer: "flex items-center gap-1.5 p-4",
     title: "flex-grow text-xl text-highlighted font-semibold",
     description: "w-full text-muted text-sm"
   },
@@ -1322,9 +1322,9 @@ const drawer = ct({
   parts: {
     overlay: "fixed inset-0 bg-elevated/75",
     content: "fixed bg-default divide-y divide-default flex flex-col focus:outline-none",
-    header: "flex flex-wrap items-center gap-1 p-4 sm:px-6",
-    body: "flex-1 overflow-y-auto p-4 sm:p-6",
-    footer: "flex items-center gap-1 p-4 sm:p-6",
+    header: "flex flex-wrap items-center gap-1 p-4",
+    body: "flex-1 overflow-y-auto p-4",
+    footer: "flex items-center gap-1 p-4",
     title: "flex-grow text-xl text-highlighted font-semibold",
     description: "w-full text-muted text-sm",
     close: "ms-auto"
@@ -2387,9 +2387,9 @@ const modal = ct({
   parts: {
     overlay: "fixed inset-0 bg-elevated/75",
     content: "fixed bg-default divide-y divide-default flex flex-col focus:outline-none",
-    header: "flex flex-wrap items-center gap-1 p-4 sm:px-6",
-    body: "flex-1 overflow-y-auto p-4 sm:p-6",
-    footer: "flex items-center gap-1 p-4 sm:px-6",
+    header: "flex flex-wrap items-center gap-1 p-4",
+    body: "flex-1 overflow-y-auto p-4",
+    footer: "flex items-center gap-1 p-4",
     title: "flex-grow text-xl text-highlighted font-semibold",
     description: "w-full text-muted text-sm",
     close: "ms-auto"

package/dist/unplugin.mjs

@@ -2,7 +2,7 @@ import { fileURLToPath } from 'node:url';
 import { defu } from 'defu';
 import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
-import { g as getTemplates, n as name } from './shared/ui.B6u-xvto.mjs';
+import { g as getTemplates, n as name } from './shared/ui.zcNpBAcn.mjs';
 import { d as defaultOptions, r as resolveColors, g as getDefaultConfig } from './shared/ui.Dy7aH7sf.mjs';
 import AutoImport from 'unplugin-auto-import';
 import { globSync } from 'tinyglobby';

package/dist/vite.mjs

@@ -3,7 +3,7 @@ import 'node:url';
 import 'defu';
 import 'pathe';
 import 'unplugin';
-import './shared/ui.B6u-xvto.mjs';
+import './shared/ui.zcNpBAcn.mjs';
 import 'node:module';
 import '@nuxt/kit';
 import '@unocss/config';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@byyuurin/ui",
   "type": "module",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "",
   "author": "Yuurin <byyuurin@gmail.com>",
   "license": "MIT",