@byyuurin/ui 0.3.0 → 0.4.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) Yuurin<https://github.com/byyuurin>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) Yuurin<https://github.com/byyuurin>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,7 @@
 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.DpkP12cX.mjs';
-import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.9kQouwss.mjs';
+import { v as version, n as name, a as addTemplates } from './shared/ui.DcEKQd0n.mjs';
+import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.DYMXCXO6.mjs';
 import 'node:process';
 import 'node:url';
 import '@unocss/config';

package/dist/runtime/components/Accordion.vue

@@ -7,7 +7,7 @@ import { reactivePick } from "@vueuse/core";
 import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, useForwardPropsEmits } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { get } from "../utils";
+import { get, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Icon from "./Icon.vue";
 const props = defineProps({
@@ -30,52 +30,52 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible",
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.accordion));
-  return styler(props);
+  return styler(pick(props, ["disabled"]));
 });
 </script>
 
 <template>
-  <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="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      data-part="item"
-    >
-      <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="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, 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="ui.content({ class: [props.ui?.content, item.ui?.content] })"
-        data-part="content"
-      >
-        <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>
-        </slot>
-      </AccordionContent>
-    </AccordionItem>
-  </AccordionRoot>
+  <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="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      data-part="item"
+    >
+      <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="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, 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="ui.content({ class: [props.ui?.content, item.ui?.content] })"
+        data-part="content"
+      >
+        <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>
+        </slot>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
 </template>
 
 <style>

package/dist/runtime/components/Alert.vue

@@ -7,6 +7,7 @@ import { Primitive } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Button from "./Button.vue";
@@ -33,74 +34,74 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.alert));
   return styler({
-    ...props,
+    ...pick(props, ["color", "variant", "orientation"]),
     title: !!props.title || !!slots.title
   });
 });
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :data-orientation="props.orientation"
-    data-part="root"
-  >
-    <slot name="leading" :ui="ui">
-      <Avatar
-        v-if="props.avatar"
-        :size="props.ui?.avatarSize || ui.avatarSize()"
-        v-bind="props.avatar"
-        :class="ui.avatar({ class: props.ui?.avatar })"
-        data-part="avatar"
-      />
-      <Icon
-        v-else-if="props.icon"
-        :name="props.icon"
-        :class="ui.icon({ class: props.ui?.icon })"
-        data-part="icon"
-      />
-    </slot>
-
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <div v-if="props.title || slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
-        <slot name="title">
-          {{ props.title }}
-        </slot>
-      </div>
-      <div v-if="props.description || slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description">
-          {{ props.description }}
-        </slot>
-      </div>
-
-      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
-        <slot name="actions">
-          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
-        </slot>
-      </div>
-    </div>
-
-    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions) || props.close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })" data-part="actions">
-      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions)">
-        <slot name="actions">
-          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
-        </slot>
-      </template>
-
-      <slot name="close" :ui="ui">
-        <Button
-          v-if="props.close"
-          :icon="props.closeIcon || appConfig.ui.icons.close"
-          color="neutral"
-          variant="link"
-          :aria-label="t('alert.close')"
-          v-bind="typeof props.close === 'object' ? props.close : {}"
-          :class="ui.close({ class: props.ui?.close })"
-          data-part="close"
-          @click="emit('update:open', false)"
-        />
-      </slot>
-    </div>
-  </Primitive>
+  <Primitive
+    :as="props.as"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :data-orientation="props.orientation"
+    data-part="root"
+  >
+    <slot name="leading" :ui="ui">
+      <Avatar
+        v-if="props.avatar"
+        :size="props.ui?.avatarSize || ui.avatarSize()"
+        v-bind="props.avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
+        data-part="avatar"
+      />
+      <Icon
+        v-else-if="props.icon"
+        :name="props.icon"
+        :class="ui.icon({ class: props.ui?.icon })"
+        data-part="icon"
+      />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <div v-if="props.title || slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
+        <slot name="title">
+          {{ props.title }}
+        </slot>
+      </div>
+      <div v-if="props.description || slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </div>
+
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
+        <slot name="actions">
+          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions) || props.close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })" data-part="actions">
+      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions)">
+        <slot name="actions">
+          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </template>
+
+      <slot name="close" :ui="ui">
+        <Button
+          v-if="props.close"
+          :icon="props.closeIcon || appConfig.ui.icons.close"
+          color="neutral"
+          variant="link"
+          :aria-label="t('alert.close')"
+          v-bind="typeof props.close === 'object' ? props.close : {}"
+          :class="ui.close({ class: props.ui?.close })"
+          data-part="close"
+          @click="emit('update:open', false)"
+        />
+      </slot>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/App.vue

@@ -30,14 +30,14 @@ providePortalTarget(portal);
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => useId()" :dir="props.dir || locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
-    <TooltipProvider v-bind="tooltipProps">
-      <ToastProvider v-if="props.toaster !== null" v-bind="toastProviderProps">
-        <slot></slot>
-      </ToastProvider>
-      <slot v-else></slot>
-
-      <OverlayProvider />
-    </TooltipProvider>
-  </ConfigProvider>
+  <ConfigProvider :use-id="() => useId()" :dir="props.dir || locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
+    <TooltipProvider v-bind="tooltipProps">
+      <ToastProvider v-if="props.toaster !== null" v-bind="toastProviderProps">
+        <slot></slot>
+      </ToastProvider>
+      <slot v-else></slot>
+
+      <OverlayProvider />
+    </TooltipProvider>
+  </ConfigProvider>
 </template>

package/dist/runtime/components/Avatar.vue

@@ -9,6 +9,7 @@ import { computed, shallowRef, watch } from "vue";
 import ImageComponent from "#build/ui-image-component";
 import { useAppConfig } from "#imports";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Chip from "./Chip.vue";
 import Icon from "./Icon.vue";
@@ -36,7 +37,7 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.avatar));
   return styler({
-    ...props,
+    ...pick(props, []),
     size: size.value
   });
 });
@@ -62,33 +63,33 @@ function onError() {
 </script>
 
 <template>
-  <component
-    :is="props.chip ? Chip : Primitive"
-    :as="as.root"
-    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-    :style="props.style"
-  >
-    <component
-      :is="as.img || ImageComponent"
-      v-if="props.src && !error"
-      :src="props.src"
-      :alt="props.alt"
-      :width="sizePx"
-      :height="sizePx"
-      v-bind="$attrs"
-      :class="ui.image({ class: props.ui?.image })"
-      data-part="image"
-      @error="onError"
-    />
-
-    <slot v-else v-bind="$attrs">
-      <Icon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" data-part="icon" />
-      <span v-else :class="ui.fallback({ class: props.ui?.fallback })" data-part="fallback">
-        <template v-if="fallback">{{ fallback }}</template>
-        <template v-else>&nbsp;</template>
-      </span>
-    </slot>
-  </component>
+  <component
+    :is="props.chip ? Chip : Primitive"
+    :as="as.root"
+    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    :style="props.style"
+  >
+    <component
+      :is="as.img || ImageComponent"
+      v-if="props.src && !error"
+      :src="props.src"
+      :alt="props.alt"
+      :width="sizePx"
+      :height="sizePx"
+      v-bind="$attrs"
+      :class="ui.image({ class: props.ui?.image })"
+      data-part="image"
+      @error="onError"
+    />
+
+    <slot v-else v-bind="$attrs">
+      <Icon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" data-part="icon" />
+      <span v-else :class="ui.fallback({ class: props.ui?.fallback })" data-part="fallback">
+        <template v-if="fallback">{{ fallback }}</template>
+        <template v-else>&nbsp;</template>
+      </span>
+    </slot>
+  </component>
 </template>

package/dist/runtime/components/AvatarGroup.vue

@@ -7,6 +7,7 @@ import { Primitive } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { provideAvatarGroup } from "../composables/useAvatarGroup";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 const props = defineProps({
@@ -47,14 +48,14 @@ const hiddenCount = computed(() => {
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.avatarGroup));
-  return styler(props);
+  return styler(pick(props, ["size"]));
 });
 provideAvatarGroup(computed(() => props));
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" data-part="base" />
-    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="ui.base({ class: props.ui?.base })" data-part="base" />
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" data-part="base" />
+    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="ui.base({ class: props.ui?.base })" data-part="base" />
+  </Primitive>
 </template>

package/dist/runtime/components/Badge.vue

@@ -8,6 +8,7 @@ import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Icon from "./Icon.vue";
@@ -34,45 +35,45 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.badge));
   return styler({
-    ...props,
+    ...pick(props, ["color", "variant"]),
     size: size.value,
-    fieldGroup: orientation.value,
-    square: props.square || !slots.default && !props.label
+    square: props.square || !slots.default && !props.label,
+    fieldGroup: orientation.value
   });
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.base({ class: [props.ui?.base, props.class] })" data-part="base">
-    <slot name="leading" :ui="ui">
-      <Icon
-        v-if="isLeading && leadingIconName"
-        :name="leadingIconName"
-        :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
-        data-part="leadingIcon"
-      />
-      <Avatar
-        v-else-if="props.avatar"
-        :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
-        v-bind="props.avatar"
-        :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
-        data-part="leadingAvatar"
-      />
-    </slot>
-
-    <slot :ui="ui">
-      <span v-if="props.label" :class="ui.label({ class: props.ui?.label })" data-part="label">
-        {{ props.label }}
-      </span>
-    </slot>
-
-    <slot name="trailing" :ui="ui">
-      <Icon
-        v-if="isTrailing && trailingIconName"
-        :name="trailingIconName"
-        :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
-        data-part="trailingIcon"
-      />
-    </slot>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.base({ class: [props.ui?.base, props.class] })" data-part="base">
+    <slot name="leading" :ui="ui">
+      <Icon
+        v-if="isLeading && leadingIconName"
+        :name="leadingIconName"
+        :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
+        data-part="leadingIcon"
+      />
+      <Avatar
+        v-else-if="props.avatar"
+        :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
+        v-bind="props.avatar"
+        :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+        data-part="leadingAvatar"
+      />
+    </slot>
+
+    <slot :ui="ui">
+      <span v-if="props.label" :class="ui.label({ class: props.ui?.label })" data-part="label">
+        {{ props.label }}
+      </span>
+    </slot>
+
+    <slot name="trailing" :ui="ui">
+      <Icon
+        v-if="isTrailing && trailingIconName"
+        :name="trailingIconName"
+        :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
+        data-part="trailingIcon"
+      />
+    </slot>
+  </Primitive>
 </template>