@byyuurin/ui 0.3.0 → 0.4.0

package/dist/runtime/components/Pagination.vue

@@ -8,6 +8,7 @@ import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, Pa
 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({
@@ -41,7 +42,7 @@ const { dir } = useLocale();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.pagination));
-  return styler(props);
+  return styler(pick(props, []));
 });
 const firstIcon = computed(() => props.firstIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft));
 const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
@@ -50,51 +51,51 @@ const lastIcon = computed(() => props.lastIcon || (dir.value === "rtl" ? appConf
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })" data-part="list">
-      <PaginationFirst v-if="props.showControls || !!slots.first" :class="ui.first({ class: props.ui?.first })" as-child data-part="first">
-        <slot name="first">
-          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="firstIcon" :to="props.to?.(1)" />
-        </slot>
-      </PaginationFirst>
-      <PaginationPrev v-if="props.showControls || !!slots.prev" :class="ui.prev({ class: props.ui?.prev })" as-child data-part="perv">
-        <slot name="prev">
-          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="prevIcon" :to="page > 1 ? props.to?.(page - 1) : void 0" />
-        </slot>
-      </PaginationPrev>
-
-      <template v-for="(item, index) in items" :key="index">
-        <PaginationListItem v-if="item.type === 'page'" :value="item.value" :class="ui.item({ class: props.ui?.item })" as-child data-part="item">
-          <slot name="item" v-bind="{ item, index, page, pageCount }">
-            <Button
-              :color="props.page === item.value ? props.activeColor : props.color"
-              :variant="props.page === item.value ? props.activeVariant : props.variant"
-              :size="props.size"
-              :label="String(item.value)"
-              :to="props.to?.(item.value)"
-              :ui="{ label: ui.label({ class: props.ui?.label }) }"
-              square
-            />
-          </slot>
-        </PaginationListItem>
-
-        <PaginationEllipsis v-else :class="ui.ellipsis({ class: props.ui?.ellipsis })" as-child data-part="ellipsis">
-          <slot name="ellipsis" :ui="ui">
-            <Button as="div" :color="props.color" :variant="props.variant" :size="props.size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
-          </slot>
-        </PaginationEllipsis>
-      </template>
-
-      <PaginationNext v-if="props.showControls || !!slots.next" :class="ui.next({ class: props.ui?.next })" as-child data-part="next">
-        <slot name="next">
-          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="nextIcon" :to="page < pageCount ? props.to?.(page + 1) : void 0" />
-        </slot>
-      </PaginationNext>
-      <PaginationLast v-if="props.showControls || !!slots.last" :class="ui.last({ class: props.ui?.last })" as-child data-part="last">
-        <slot name="last">
-          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="lastIcon" :to="props.to?.(pageCount)" />
-        </slot>
-      </PaginationLast>
-    </PaginationList>
-  </PaginationRoot>
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })" data-part="list">
+      <PaginationFirst v-if="props.showControls || !!slots.first" :class="ui.first({ class: props.ui?.first })" as-child data-part="first">
+        <slot name="first">
+          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="firstIcon" :to="props.to?.(1)" />
+        </slot>
+      </PaginationFirst>
+      <PaginationPrev v-if="props.showControls || !!slots.prev" :class="ui.prev({ class: props.ui?.prev })" as-child data-part="perv">
+        <slot name="prev">
+          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="prevIcon" :to="page > 1 ? props.to?.(page - 1) : void 0" />
+        </slot>
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items" :key="index">
+        <PaginationListItem v-if="item.type === 'page'" :value="item.value" :class="ui.item({ class: props.ui?.item })" as-child data-part="item">
+          <slot name="item" v-bind="{ item, index, page, pageCount }">
+            <Button
+              :color="props.page === item.value ? props.activeColor : props.color"
+              :variant="props.page === item.value ? props.activeVariant : props.variant"
+              :size="props.size"
+              :label="String(item.value)"
+              :to="props.to?.(item.value)"
+              :ui="{ label: ui.label({ class: props.ui?.label }) }"
+              square
+            />
+          </slot>
+        </PaginationListItem>
+
+        <PaginationEllipsis v-else :class="ui.ellipsis({ class: props.ui?.ellipsis })" as-child data-part="ellipsis">
+          <slot name="ellipsis" :ui="ui">
+            <Button as="div" :color="props.color" :variant="props.variant" :size="props.size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
+          </slot>
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext v-if="props.showControls || !!slots.next" :class="ui.next({ class: props.ui?.next })" as-child data-part="next">
+        <slot name="next">
+          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="nextIcon" :to="page < pageCount ? props.to?.(page + 1) : void 0" />
+        </slot>
+      </PaginationNext>
+      <PaginationLast v-if="props.showControls || !!slots.last" :class="ui.last({ class: props.ui?.last })" as-child data-part="last">
+        <slot name="last">
+          <Button :color="props.color" :variant="props.variant" :size="props.size" :icon="lastIcon" :to="props.to?.(pageCount)" />
+        </slot>
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
 </template>

package/dist/runtime/components/PinInput.vue

@@ -8,7 +8,7 @@ import { PinInputInput, PinInputRoot, useForwardPropsEmits } from "reka-ui";
 import { computed, onMounted, ref } from "vue";
 import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
-import { looseToNumber } from "../utils";
+import { looseToNumber, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
@@ -39,9 +39,9 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.pinInput));
   return styler({
-    ...props,
-    size: size.value,
+    ...pick(props, ["variant"]),
     color: color.value,
+    size: size.value,
     highlight: highlight.value
   });
 });
@@ -71,26 +71,26 @@ defineExpose({
 </script>
 
 <template>
-  <PinInputRoot
-    v-bind="{ ...rootProps, ...ariaAttrs, id, name }"
-    :placeholder="props.placeholder"
-    :model-value="modelValue"
-    :default-value="props.defaultValue"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-    @update:model-value="emitFormInput"
-    @complete="onComplete"
-  >
-    <PinInputInput
-      v-for="(ids, index) in looseToNumber(props.length)"
-      :key="ids"
-      :ref="(el) => inputsRef[index] = el"
-      :index="index"
-      :disabled="disabled"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
-  </PinInputRoot>
+  <PinInputRoot
+    v-bind="{ ...rootProps, ...ariaAttrs, id, name }"
+    :placeholder="props.placeholder"
+    :model-value="modelValue"
+    :default-value="props.defaultValue"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="emitFormInput"
+    @complete="onComplete"
+  >
+    <PinInputInput
+      v-for="(ids, index) in looseToNumber(props.length)"
+      :key="ids"
+      :ref="(el) => inputsRef[index] = el"
+      :index="index"
+      :disabled="disabled"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    />
+  </PinInputRoot>
 </template>

package/dist/runtime/components/Popover.vue

@@ -49,31 +49,31 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.popover));
-  return styler(props);
+  return styler();
 });
 </script>
 
 <template>
-  <Component.Root v-slot="{ open, close }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default || !!props.reference" :reference="props.reference" as-child :class="props.class">
-      <slot :open="open"></slot>
-    </Component.Trigger>
-
-    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
-      <slot name="anchor" v-bind="close ? { close } : {}"></slot>
-    </Component.Anchor>
-
-    <Component.Portal v-bind="portalProps">
-      <Component.Content
-        v-bind="contentProps"
-        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
-        data-part="content"
-        v-on="contentEvents"
-      >
-        <slot name="content" v-bind="close ? { close } : {}"></slot>
-
-        <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
-      </Component.Content>
-    </Component.Portal>
-  </Component.Root>
+  <Component.Root v-slot="{ open, close }" v-bind="rootProps">
+    <Component.Trigger v-if="!!slots.default || !!props.reference" :reference="props.reference" as-child :class="props.class">
+      <slot :open="open"></slot>
+    </Component.Trigger>
+
+    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
+      <slot name="anchor" v-bind="close ? { close } : {}"></slot>
+    </Component.Anchor>
+
+    <Component.Portal v-bind="portalProps">
+      <Component.Content
+        v-bind="contentProps"
+        :class="ui.content({ class: [props.ui?.content, !slots.default && props.class] })"
+        data-part="content"
+        v-on="contentEvents"
+      >
+        <slot name="content" v-bind="close ? { close } : {}"></slot>
+
+        <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+      </Component.Content>
+    </Component.Portal>
+  </Component.Root>
 </template>

package/dist/runtime/components/Progress.vue

@@ -8,6 +8,7 @@ import { Primitive, ProgressIndicator, ProgressRoot, useForwardPropsEmits } from
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
@@ -82,34 +83,34 @@ function stepVariant(index) {
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.progress));
-  return styler(props);
+  return styler(pick(props, ["animation", "size", "color", "orientation", "inverted"]));
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="orientation" data-part="root">
-    <div v-if="!isIndeterminate && (props.status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" data-part="status" :style="statusStyle">
-      <slot name="status" :percent="percent">
-        {{ percent }}%
-      </slot>
-    </div>
-
-    <ProgressRoot
-      v-bind="rootProps"
-      :max="realMax"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      style="transform: translateZ(0)"
-    >
-      <ProgressIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" :style="indicatorStyle" />
-    </ProgressRoot>
-
-    <div v-if="hasSteps" :class="ui.steps({ class: props.ui?.steps })" data-part="steps">
-      <div v-for="(step, index) in props.max" :key="index" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })" data-part="step">
-        <slot :name="`step-${index}`" :step="step">
-          {{ step }}
-        </slot>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="orientation" data-part="root">
+    <div v-if="!isIndeterminate && (props.status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" data-part="status" :style="statusStyle">
+      <slot name="status" :percent="percent">
+        {{ percent }}%
+      </slot>
+    </div>
+
+    <ProgressRoot
+      v-bind="rootProps"
+      :max="realMax"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      style="transform: translateZ(0)"
+    >
+      <ProgressIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" :style="indicatorStyle" />
+    </ProgressRoot>
+
+    <div v-if="hasSteps" :class="ui.steps({ class: props.ui?.steps })" data-part="steps">
+      <div v-for="(step, index) in props.max" :key="index" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })" data-part="step">
+        <slot :name="`step-${index}`" :step="step">
+          {{ step }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/RadioGroup.vue

@@ -8,7 +8,7 @@ import { Label, RadioGroupIndicator, RadioGroupItem as RekaRadioGroupItem, Radio
 import { computed, useId } from "vue";
 import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
-import { get } from "../utils";
+import { get, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
@@ -40,9 +40,9 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.radioGroup));
   return styler({
-    ...props,
-    color: color.value,
+    ...pick(props, ["required", "orientation", "variant", "indicator"]),
     size: size.value,
+    color: color.value,
     disabled: disabled.value
   });
 });
@@ -96,54 +96,54 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <RadioGroupRoot
-    v-bind="{ id, ...rootProps, name, disabled }"
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
-    :orientation="props.orientation"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-    @update:model-value="onUpdate"
-  >
-    <fieldset v-bind="ariaAttrs" :class="ui.fieldset({ class: props.ui?.fieldset })" data-part="fieldset">
-      <legend v-if="props.legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })" data-part="legend">
-        <slot name="legend">
-          {{ props.legend }}
-        </slot>
-      </legend>
-      <component
-        :is="!props.variant || props.variant === 'list' ? 'div' : Label"
-        v-for="item in normalizedItems"
-        :key="item.value"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled })"
-        data-part="item"
-      >
-        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container], disabled: item.disabled })" data-part="container">
-          <RekaRadioGroupItem
-            :id="item.id"
-            :value="item.value"
-            :disabled="item.disabled"
-            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled, indicator: props.indicator })"
-            data-part="base"
-            :data-indicator="props.indicator"
-          >
-            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator], disabled: item.disabled })" data-part="indicator" force-mount />
-          </RekaRadioGroupItem>
-        </div>
-
-        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper], disabled: item.disabled })" data-part="wrapper">
-          <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled })" data-part="label">
-            <slot name="label" :item="item" :model-value="modelValue">
-              {{ item.label }}
-            </slot>
-          </component>
-          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description], disabled: item.disabled })" data-part="description">
-            <slot name="description" :item="item" :model-value="modelValue">
-              {{ item.description }}
-            </slot>
-          </p>
-        </div>
-      </component>
-    </fieldset>
-  </RadioGroupRoot>
+  <RadioGroupRoot
+    v-bind="{ id, ...rootProps, name, disabled }"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :orientation="props.orientation"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <fieldset v-bind="ariaAttrs" :class="ui.fieldset({ class: props.ui?.fieldset })" data-part="fieldset">
+      <legend v-if="props.legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })" data-part="legend">
+        <slot name="legend">
+          {{ props.legend }}
+        </slot>
+      </legend>
+      <component
+        :is="!props.variant || props.variant === 'list' ? 'div' : Label"
+        v-for="item in normalizedItems"
+        :key="item.value"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled })"
+        data-part="item"
+      >
+        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container], disabled: item.disabled })" data-part="container">
+          <RekaRadioGroupItem
+            :id="item.id"
+            :value="item.value"
+            :disabled="item.disabled"
+            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled, indicator: props.indicator })"
+            data-part="base"
+            :data-indicator="props.indicator"
+          >
+            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator], disabled: item.disabled })" data-part="indicator" force-mount />
+          </RekaRadioGroupItem>
+        </div>
+
+        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper], disabled: item.disabled })" data-part="wrapper">
+          <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled })" data-part="label">
+            <slot name="label" :item="item" :model-value="modelValue">
+              {{ item.label }}
+            </slot>
+          </component>
+          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description], disabled: item.disabled })" data-part="description">
+            <slot name="description" :item="item" :model-value="modelValue">
+              {{ item.description }}
+            </slot>
+          </p>
+        </div>
+      </component>
+    </fieldset>
+  </RadioGroupRoot>
 </template>

package/dist/runtime/components/ScrollArea.vue

@@ -7,6 +7,7 @@ import { reactivePick } from "@vueuse/core";
 import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "reka-ui";
 import { computed, ref } from "vue";
 import { useAppConfig } from "#imports";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   ui: { type: null, required: false },
@@ -20,7 +21,7 @@ const rootProps = reactivePick(props, "type", "dir", "scrollHideDelay");
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.scrollArea));
-  return styler(props);
+  return styler(pick(props, []));
 });
 defineExpose({
   scrollTop,
@@ -35,36 +36,36 @@ function scrollTopLeft() {
 </script>
 
 <template>
-  <ScrollAreaRoot
-    ref="rootRef"
-    v-bind="rootProps"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
-    data-part="root"
-  >
-    <ScrollAreaViewport :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
-      <slot></slot>
-    </ScrollAreaViewport>
-
-    <ScrollAreaScrollbar
-      key="scrollbar-horizontal"
-      orientation="horizontal"
-      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
-      data-part="scrollbar"
-    >
-      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
-    </ScrollAreaScrollbar>
-    <ScrollAreaScrollbar
-      key="scrollbar-vertical"
-      orientation="vertical"
-      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
-      data-part="scrollbar"
-    >
-      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
-    </ScrollAreaScrollbar>
-    <ScrollAreaCorner
-      key="corner"
-      :class="ui.corner({ class: props.ui?.corner })"
-      data-part="corner"
-    />
-  </ScrollAreaRoot>
+  <ScrollAreaRoot
+    ref="rootRef"
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    data-part="root"
+  >
+    <ScrollAreaViewport :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
+      <slot></slot>
+    </ScrollAreaViewport>
+
+    <ScrollAreaScrollbar
+      key="scrollbar-horizontal"
+      orientation="horizontal"
+      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
+      data-part="scrollbar"
+    >
+      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
+    </ScrollAreaScrollbar>
+    <ScrollAreaScrollbar
+      key="scrollbar-vertical"
+      orientation="vertical"
+      :class="ui.scrollbar({ class: props.ui?.scrollbar })"
+      data-part="scrollbar"
+    >
+      <ScrollAreaThumb :class="ui.thumb({ class: props.ui?.thumb })" data-part="thumb" />
+    </ScrollAreaScrollbar>
+    <ScrollAreaCorner
+      key="corner"
+      :class="ui.corner({ class: props.ui?.corner })"
+      data-part="corner"
+    />
+  </ScrollAreaRoot>
 </template>