@byyuurin/ui 0.3.0 → 0.4.0

package/dist/runtime/components/Breadcrumb.vue

@@ -7,7 +7,7 @@ import { Primitive } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { get, pickLinkProps } from "../utils";
+import { get, pick, pickLinkProps } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Icon from "./Icon.vue";
@@ -27,58 +27,58 @@ const appConfig = useAppConfig();
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.breadcrumb));
-  return styler(props);
+  return styler(pick(props, []));
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <ol :class="ui.list({ class: props.ui?.list })" data-part="list">
-      <template v-for="(item, index) in props.items" :key="index">
-        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" data-part="item">
-          <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <LinkBase
-              v-bind="slotProps"
-              as="span"
-              :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0"
-              :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: item.disabled, to: !!item.to })"
-              data-part="link"
-            >
-              <slot :name="item.slot || 'item'" :item="item" :index="index" :active="item.active ?? index === items.length - 1" :ui="ui">
-                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="item.active ?? index === items.length - 1" :index="index" :ui="ui">
-                  <Icon
-                    v-if="item.icon"
-                    :name="item.icon"
-                    :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
-                    data-part="linkLeadingIcon"
-                  />
-                  <Avatar
-                    v-else-if="item.avatar"
-                    :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()"
-                    v-bind="item.avatar"
-                    :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
-                    data-part="linkLeadingAvatar"
-                  />
-                </slot>
-
-                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="linkLabel">
-                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="item.active ?? index === items.length - 1" :index="index">
-                    {{ get(item, props.labelKey) }}
-                  </slot>
-                </span>
-
-                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="item.active ?? index === items.length - 1" :index="index"></slot>
-              </slot>
-            </LinkBase>
-          </Link>
-        </li>
-
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })" data-part="separator">
-          <slot name="separator" :ui="ui">
-            <Icon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" data-part="separatorIcon" />
-          </slot>
-        </li>
-      </template>
-    </ol>
-  </Primitive>
+  <Primitive :as="props.as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <ol :class="ui.list({ class: props.ui?.list })" data-part="list">
+      <template v-for="(item, index) in props.items" :key="index">
+        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" data-part="item">
+          <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <LinkBase
+              v-bind="slotProps"
+              as="span"
+              :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0"
+              :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: item.disabled, to: !!item.to })"
+              data-part="link"
+            >
+              <slot :name="item.slot || 'item'" :item="item" :index="index" :active="item.active ?? index === items.length - 1" :ui="ui">
+                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="item.active ?? index === items.length - 1" :index="index" :ui="ui">
+                  <Icon
+                    v-if="item.icon"
+                    :name="item.icon"
+                    :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
+                    data-part="linkLeadingIcon"
+                  />
+                  <Avatar
+                    v-else-if="item.avatar"
+                    :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()"
+                    v-bind="item.avatar"
+                    :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
+                    data-part="linkLeadingAvatar"
+                  />
+                </slot>
+
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="linkLabel">
+                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="item.active ?? index === items.length - 1" :index="index">
+                    {{ get(item, props.labelKey) }}
+                  </slot>
+                </span>
+
+                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="item.active ?? index === items.length - 1" :index="index"></slot>
+              </slot>
+            </LinkBase>
+          </Link>
+        </li>
+
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })" data-part="separator">
+          <slot name="separator" :ui="ui">
+            <Icon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" data-part="separatorIcon" />
+          </slot>
+        </li>
+      </template>
+    </ol>
+  </Primitive>
 </template>

package/dist/runtime/components/Button.vue

@@ -9,7 +9,7 @@ import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { injectFormLoading } from "../composables/useFormField";
-import { omit, pickLinkProps } from "../utils";
+import { omit, pick, pickLinkProps } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Icon from "./Icon.vue";
@@ -97,71 +97,70 @@ const ui = computed(() => {
   };
   const styler = cv(merge(theme, uiConfig));
   return styler({
-    ...props,
-    loading: isLoading.value,
+    ...pick(props, ["color", "variant", "block"]),
     size: size.value,
-    fieldGroup: orientation.value,
-    block: props.block,
+    loading: isLoading.value,
     square: props.square || !slots.default && !props.label,
     leading: isLeading.value,
-    trailing: isTrailing.value
+    trailing: isTrailing.value,
+    fieldGroup: orientation.value
   });
 });
 </script>
 
 <template>
-  <Link
-    v-slot="{ active, ...slotProps }"
-    :type="props.type"
-    :disabled="props.disabled || props.loading"
-    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
-    data-part="base"
-    custom
-  >
-    <LinkBase
-      v-bind="slotProps"
+  <Link
+    v-slot="{ active, ...slotProps }"
+    :type="props.type"
+    :disabled="props.disabled || props.loading"
+    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
+    data-part="base"
+    custom
+  >
+    <LinkBase
+      v-bind="slotProps"
       :class="ui.base({
   class: [props.ui?.base, props.class],
   active,
   ...props.active && props.activeVariant ? { variant: props.activeVariant } : {},
   ...props.active && props.activeColor ? { color: props.activeColor } : {}
-})"
-      @click="onClickWrapper"
-    >
-      <slot name="leading" :ui="ui">
-        <Icon
-          v-if="isLeading && leadingIconName"
-          :name="leadingIconName"
-          :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })"
-          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, active })"
-          data-part="leadingAvatar"
-        />
-      </slot>
-
-      <slot :ui="ui">
-        <span
-          v-if="props.label"
-          :class="ui.label({ class: props.ui?.label, active })"
-          data-part="label"
-        >
-          {{ label }}
-        </span>
-      </slot>
-
-      <slot name="trailing" :ui="ui">
-        <Icon
-          v-if="isTrailing && trailingIconName"
-          :name="trailingIconName"
-          :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })"
-          data-part="trailingIcon"
-        />
-      </slot>
-    </LinkBase>
-  </Link>
+})"
+      @click="onClickWrapper"
+    >
+      <slot name="leading" :ui="ui">
+        <Icon
+          v-if="isLeading && leadingIconName"
+          :name="leadingIconName"
+          :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })"
+          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, active })"
+          data-part="leadingAvatar"
+        />
+      </slot>
+
+      <slot :ui="ui">
+        <span
+          v-if="props.label"
+          :class="ui.label({ class: props.ui?.label, active })"
+          data-part="label"
+        >
+          {{ label }}
+        </span>
+      </slot>
+
+      <slot name="trailing" :ui="ui">
+        <Icon
+          v-if="isTrailing && trailingIconName"
+          :name="trailingIconName"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })"
+          data-part="trailingIcon"
+        />
+      </slot>
+    </LinkBase>
+  </Link>
 </template>

package/dist/runtime/components/Calendar.vue

@@ -9,6 +9,7 @@ import { Calendar as BaseCalendar, RangeCalendar } from "reka-ui/namespaced";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Button from "./Button.vue";
 const props = defineProps({
@@ -63,7 +64,7 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.calendar));
   return styler({
-    ...props,
+    ...pick(props, ["color", "variant", "size"]),
     outsideView: props.numberOfMonths === 1
   });
 });
@@ -80,78 +81,78 @@ const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar);
 </script>
 
 <template>
-  <Calendar.Root
-    v-slot="{ weekDays, grid }"
-    v-bind="rootProps"
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
-    data-part="root"
-  >
-    <Calendar.Header :class="ui.header({ class: props.ui?.header })" data-part="header">
-      <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
-        <Button :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
-      </Calendar.Prev>
-      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
-        <Button :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
-      </Calendar.Prev>
-
-      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })" data-part="heading">
-        <slot name="heading" :value="headingValue">
-          {{ headingValue }}
-        </slot>
-      </Calendar.Heading>
-      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
-        <Button :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
-      </Calendar.Next>
-      <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
-        <Button :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
-      </Calendar.Next>
-    </Calendar.Header>
-    <div :class="ui.body({ class: props.ui?.body })" data-part="body">
-      <Calendar.Grid
-        v-for="month in grid"
-        :key="month.value.toString()"
-        :class="ui.grid({ class: props.ui?.grid })"
-        data-part="grid"
-      >
-        <Calendar.GridHead>
-          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })" data-part="gridWeekDaysRow">
-            <Calendar.HeadCell v-for="day in weekDays" :key="day" :class="ui.headCell({ class: props.ui?.headCell })" data-part="headCell">
-              <slot name="week-day" :day="day">
-                {{ day }}
-              </slot>
-            </Calendar.HeadCell>
-          </Calendar.GridRow>
-        </Calendar.GridHead>
-        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })" data-part="gridBody">
-          <Calendar.GridRow
-            v-for="(weekDates, index) in month.rows"
-            :key="`weekDates-${index}`"
-            :class="ui.gridRow({ class: props.ui?.gridRow })"
-            data-part="gridRow"
-          >
-            <Calendar.Cell
-              v-for="weekDate in weekDates"
-              :key="weekDate.toString()"
-              :date="weekDate"
-              :class="ui.cell({ class: props.ui?.cell })"
-              data-part="cell"
-            >
-              <Calendar.CellTrigger
-                :day="weekDate"
-                :month="month.value"
-                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
-                data-part="cellTrigger"
-              >
-                <slot name="day" :day="weekDate">
-                  {{ weekDate.day }}
-                </slot>
-              </Calendar.CellTrigger>
-            </Calendar.Cell>
-          </Calendar.GridRow>
-        </Calendar.GridBody>
-      </Calendar.Grid>
-    </div>
-  </Calendar.Root>
+  <Calendar.Root
+    v-slot="{ weekDays, grid }"
+    v-bind="rootProps"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    data-part="root"
+  >
+    <Calendar.Header :class="ui.header({ class: props.ui?.header })" data-part="header">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <Button :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
+      </Calendar.Prev>
+      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+        <Button :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
+      </Calendar.Prev>
+
+      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })" data-part="heading">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </Calendar.Heading>
+      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+        <Button :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <Button :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
+      </Calendar.Next>
+    </Calendar.Header>
+    <div :class="ui.body({ class: props.ui?.body })" data-part="body">
+      <Calendar.Grid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="ui.grid({ class: props.ui?.grid })"
+        data-part="grid"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })" data-part="gridWeekDaysRow">
+            <Calendar.HeadCell v-for="day in weekDays" :key="day" :class="ui.headCell({ class: props.ui?.headCell })" data-part="headCell">
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })" data-part="gridBody">
+          <Calendar.GridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDates-${index}`"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
+            data-part="gridRow"
+          >
+            <Calendar.Cell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="ui.cell({ class: props.ui?.cell })"
+              data-part="cell"
+            >
+              <Calendar.CellTrigger
+                :day="weekDate"
+                :month="month.value"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+                data-part="cellTrigger"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
 </template>

package/dist/runtime/components/Card.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/card";
 import { Primitive } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
@@ -19,50 +20,50 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.card));
-  return styler(props);
+  return styler(pick(props, ["variant"]));
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.class, props.ui?.root] })" data-part="root">
-    <slot name="content">
-      <div
-        v-if="slots.header || props.title || slots.title || props.description || slots.description"
-        :class="ui.header({ class: props.ui?.header })"
-        data-part="header"
-      >
-        <slot name="header">
-          <Primitive
-            v-if="props.title || slots.title"
-            :as="!!slots.title ? void 0 : 'h2'"
-            :class="ui.title({ class: props.ui?.title })"
-            data-part="title"
-          >
-            <slot name="title">
-              {{ props.title }}
-            </slot>
-          </Primitive>
-          <Primitive
-            v-if="props.description || slots.description"
-            :as="!!slots.description ? void 0 : 'p'"
-            :as-child="!!slots.description"
-            :class="ui.description({ class: props.ui?.description })"
-            data-part="description"
-          >
-            <slot name="description">
-              {{ props.description }}
-            </slot>
-          </Primitive>
-        </slot>
-      </div>
-
-      <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })" data-part="body">
-        <slot></slot>
-      </div>
-
-      <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
-        <slot name="footer"></slot>
-      </div>
-    </slot>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.class, props.ui?.root] })" data-part="root">
+    <slot name="content">
+      <div
+        v-if="slots.header || props.title || slots.title || props.description || slots.description"
+        :class="ui.header({ class: props.ui?.header })"
+        data-part="header"
+      >
+        <slot name="header">
+          <Primitive
+            v-if="props.title || slots.title"
+            :as="!!slots.title ? void 0 : 'h2'"
+            :class="ui.title({ class: props.ui?.title })"
+            data-part="title"
+          >
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </Primitive>
+          <Primitive
+            v-if="props.description || slots.description"
+            :as="!!slots.description ? void 0 : 'p'"
+            :as-child="!!slots.description"
+            :class="ui.description({ class: props.ui?.description })"
+            data-part="description"
+          >
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </Primitive>
+        </slot>
+      </div>
+
+      <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })" data-part="body">
+        <slot></slot>
+      </div>
+
+      <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
+        <slot name="footer"></slot>
+      </div>
+    </slot>
+  </Primitive>
 </template>