@byyuurin/ui 0.3.0 → 0.4.0

package/dist/runtime/components/Input.vue

@@ -10,7 +10,7 @@ import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useFormField } from "../composables/useFormField";
-import { looseToNumber } from "../utils";
+import { looseToNumber, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Icon from "./Icon.vue";
@@ -54,14 +54,14 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.input));
   return styler({
-    ...props,
+    ...pick(props, ["variant", "loading"]),
     type: props.type,
     color: color.value,
     size: fieldGroupSize.value || formFieldSize.value,
     highlight: highlight.value,
-    fieldGroup: orientation.value,
     leading: isLeading.value || !!props.avatar || !!slots.leading,
-    trailing: isTrailing.value || !!slots.trailing
+    trailing: isTrailing.value || !!slots.trailing,
+    fieldGroup: orientation.value
   });
 });
 const inputRef = ref(null);
@@ -107,52 +107,52 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <span v-if="isLeading || !!props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
-      <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>
-    </span>
-
-    <input
-      ref="inputRef"
-      :type="props.type"
-      :value="modelValue"
-      :placeholder="props.placeholder"
-      :required="props.required"
-      :autocomplete="props.autocomplete"
-      v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      @input="onInput"
-      @blur="onBlur"
-      @change="onChange"
-      @focus="emitFormFocus"
-    />
-
-    <slot :ui="ui"></slot>
-
-    <span v-if="isTrailing || slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
-      <slot name="trailing" :ui="ui">
-        <Icon
-          v-if="trailingIconName"
-          :name="trailingIconName"
-          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
-          data-part="trailingIcon"
-        />
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <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>
+    </span>
+
+    <input
+      ref="inputRef"
+      :type="props.type"
+      :value="modelValue"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      :autocomplete="props.autocomplete"
+      v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    />
+
+    <slot :ui="ui"></slot>
+
+    <span v-if="isTrailing || slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+      <slot name="trailing" :ui="ui">
+        <Icon
+          v-if="trailingIconName"
+          :name="trailingIconName"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
+          data-part="trailingIcon"
+        />
+      </slot>
+    </span>
+  </Primitive>
 </template>

package/dist/runtime/components/InputNumber.vue

@@ -10,6 +10,7 @@ import { useAppConfig } from "#imports";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Button from "./Button.vue";
 defineOptions({ inheritAttrs: false });
@@ -58,9 +59,9 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.inputNumber));
   return styler({
-    ...props,
-    size: fieldGroupSize.value || formFieldSize.value,
+    ...pick(props, ["variant", "orientation", "disabled"]),
     color: color.value,
+    size: fieldGroupSize.value || formFieldSize.value,
     highlight: highlight.value,
     fieldGroup: orientation.value,
     increment: props.orientation === "vertical" ? !!props.increment || !!props.decrement : !!props.increment,
@@ -95,51 +96,51 @@ defineExpose({
 </script>
 
 <template>
-  <NumberFieldRoot
-    v-bind="{ ...rootProps, id, name, disabled, modelValue }"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-    @update:model-value="onUpdate"
-  >
-    <NumberFieldInput
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      ref="inputRef"
-      :placeholder="props.placeholder"
-      :required="props.required"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
-
-    <div v-if="props.increment" :class="ui.increment({ class: props.ui?.increment })" data-part="increment">
-      <NumberFieldIncrement :disabled="disabled || incrementDisabled" as-child>
-        <slot name="increment">
-          <Button
-            :icon="incrementIcon"
-            :size="props.size"
-            :color="color"
-            variant="link"
-            :aria-label="t('inputNumber.increment')"
-            v-bind="typeof props.increment === 'object' ? props.increment : void 0"
-          />
-        </slot>
-      </NumberFieldIncrement>
-    </div>
-
-    <div v-if="props.decrement" :class="ui.decrement({ class: props.ui?.decrement })" data-part="decrement">
-      <NumberFieldDecrement :disabled="disabled || decrementDisabled" as-child>
-        <slot name="decrement">
-          <Button
-            :icon="decrementIcon"
-            :size="props.size"
-            :color="color"
-            variant="link"
-            :aria-label="t('inputNumber.decrement')"
-            v-bind="typeof props.decrement === 'object' ? props.decrement : void 0"
-          />
-        </slot>
-      </NumberFieldDecrement>
-    </div>
-  </NumberFieldRoot>
+  <NumberFieldRoot
+    v-bind="{ ...rootProps, id, name, disabled, modelValue }"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <NumberFieldInput
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      ref="inputRef"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    />
+
+    <div v-if="props.increment" :class="ui.increment({ class: props.ui?.increment })" data-part="increment">
+      <NumberFieldIncrement :disabled="disabled || incrementDisabled" as-child>
+        <slot name="increment">
+          <Button
+            :icon="incrementIcon"
+            :size="props.size"
+            :color="color"
+            variant="link"
+            :aria-label="t('inputNumber.increment')"
+            v-bind="typeof props.increment === 'object' ? props.increment : void 0"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div v-if="props.decrement" :class="ui.decrement({ class: props.ui?.decrement })" data-part="decrement">
+      <NumberFieldDecrement :disabled="disabled || decrementDisabled" as-child>
+        <slot name="decrement">
+          <Button
+            :icon="decrementIcon"
+            :size="props.size"
+            :color="color"
+            variant="link"
+            :aria-label="t('inputNumber.decrement')"
+            v-bind="typeof props.decrement === 'object' ? props.decrement : void 0"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
 </template>

package/dist/runtime/components/InputTags.vue

@@ -10,6 +10,7 @@ import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useFormField } from "../composables/useFormField";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Avatar from "./Avatar.vue";
 import Icon from "./Icon.vue";
@@ -60,8 +61,7 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.inputTags));
   return styler({
-    ...props,
-    type: void 0,
+    ...pick(props, ["variant", "loading"]),
     color: color.value,
     size: fieldGroupSize.value || formFieldSize.value,
     highlight: highlight.value,
@@ -100,57 +100,57 @@ defineExpose({
 </script>
 
 <template>
-  <TagsInputRoot
-    v-slot="{ modelValue: tags }"
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
-    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
-    v-bind="{ ...rootProps, id, name, disabled }"
-    data-part="root"
-    @update:model-value="onUpdate"
-  >
-    <TagsInputItem
-      v-for="(item, index) in tags"
-      :key="index"
-      :value="item"
-      :class="ui.item({ class: props.ui?.item })"
-      data-part="item"
-    >
-      <TagsInputItemText :class="ui.itemText({ class: props.ui?.itemText })" data-part="itemText">
-        <slot name="item-text" :item="item" :index="index" :ui="ui"></slot>
-      </TagsInputItemText>
-
-      <TagsInputItemDelete :disabled="disabled" :class="ui.itemDelete({ class: props.ui?.itemDelete })" data-part="itemDelete">
-        <slot name="item-delete" :item="item" :index="index" :ui="ui">
-          <Icon :name="props.deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: props.ui?.itemDeleteIcon })" data-part="itemDeleteIcon" />
-        </slot>
-      </TagsInputItemDelete>
-    </TagsInputItem>
-
-    <TagsInputInput
-      ref="inputRef"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      :placeholder="props.placeholder"
-      :max-length="props.maxLength"
-      :class="ui.input({ class: props.ui?.input })"
-      data-part="input"
-      @blur="onBlur"
-      @focus="onFocus"
-    />
-
-    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
-      <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>
-    </span>
-
-    <slot :ui="ui"></slot>
-
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
-      <slot name="trailing" :ui="ui">
-        <Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
-      </slot>
-    </span>
-  </TagsInputRoot>
+  <TagsInputRoot
+    v-slot="{ modelValue: tags }"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
+    v-bind="{ ...rootProps, id, name, disabled }"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <TagsInputItem
+      v-for="(item, index) in tags"
+      :key="index"
+      :value="item"
+      :class="ui.item({ class: props.ui?.item })"
+      data-part="item"
+    >
+      <TagsInputItemText :class="ui.itemText({ class: props.ui?.itemText })" data-part="itemText">
+        <slot name="item-text" :item="item" :index="index" :ui="ui"></slot>
+      </TagsInputItemText>
+
+      <TagsInputItemDelete :disabled="disabled" :class="ui.itemDelete({ class: props.ui?.itemDelete })" data-part="itemDelete">
+        <slot name="item-delete" :item="item" :index="index" :ui="ui">
+          <Icon :name="props.deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: props.ui?.itemDeleteIcon })" data-part="itemDeleteIcon" />
+        </slot>
+      </TagsInputItemDelete>
+    </TagsInputItem>
+
+    <TagsInputInput
+      ref="inputRef"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      :placeholder="props.placeholder"
+      :max-length="props.maxLength"
+      :class="ui.input({ class: props.ui?.input })"
+      data-part="input"
+      @blur="onBlur"
+      @focus="onFocus"
+    />
+
+    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <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>
+    </span>
+
+    <slot :ui="ui"></slot>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+      <slot name="trailing" :ui="ui">
+        <Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
+      </slot>
+    </span>
+  </TagsInputRoot>
 </template>

package/dist/runtime/components/Kbd.vue

@@ -7,6 +7,7 @@ import theme from "#build/ui/kbd";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useKbd } from "../composables/useKbd";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false, default: "kbd" },
@@ -21,12 +22,12 @@ const { getKbdKey } = useKbd();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.kbd));
-  return styler(props);
+  return styler(pick(props, ["color", "variant", "size"]));
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.base({ class: props.class })" data-part="base">
-    <slot>{{ getKbdKey(props.value) }}</slot>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.base({ class: props.class })" data-part="base">
+    <slot>{{ getKbdKey(props.value) }}</slot>
+  </Primitive>
 </template>

package/dist/runtime/components/Link.vue

@@ -9,6 +9,7 @@ import { useForwardProps } from "reka-ui";
 import { computed } from "vue";
 import theme from "#build/ui/link";
 import { useAppConfig, useRoute } from "#imports";
+import { pick } from "../utils";
 import { isPartiallyEqual } from "../utils/link";
 import { cv, merge } from "../utils/style";
 import LinkBase from "./LinkBase.vue";
@@ -83,19 +84,19 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   const active = isLinkActive({ route: route2, isActive, isExactActive });
   if (props.raw)
     return [props.class, active ? props.activeClass : props.inactiveClass];
-  return ui.value.base({ ...props, active });
+  return ui.value.base({ ...pick(props, ["class", "disabled"]), active });
 }
 </script>
 
 <template>
-  <NuxtLink
-    v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }"
-    v-bind="nuxtLinkProps"
-    :to="to"
-    custom
-  >
-    <template v-if="custom">
-      <slot
+  <NuxtLink
+    v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }"
+    v-bind="nuxtLinkProps"
+    :to="to"
+    custom
+  >
+    <template v-if="custom">
+      <slot
         v-bind="{
   ...$attrs,
   ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -106,13 +107,13 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   target,
   isExternal,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-}"
-      >
-        {{ props.label }}
-      </slot>
-    </template>
-    <LinkBase
-      v-else
+}"
+      >
+        {{ props.label }}
+      </slot>
+    </template>
+    <LinkBase
+      v-else
       v-bind="{
   ...$attrs,
   ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -122,12 +123,12 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   rel,
   target,
   isExternal
-}"
-      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
-    >
-      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
-        {{ props.label }}
-      </slot>
-    </LinkBase>
-  </NuxtLink>
+}"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+    >
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
+        {{ props.label }}
+      </slot>
+    </LinkBase>
+  </NuxtLink>
 </template>

package/dist/runtime/components/LinkBase.vue

@@ -42,7 +42,7 @@ function onClickWrapper(e) {
 </script>
 
 <template>
-  <Primitive v-bind="linkProps" @click="onClickWrapper">
-    <slot></slot>
-  </Primitive>
+  <Primitive v-bind="linkProps" @click="onClickWrapper">
+    <slot></slot>
+  </Primitive>
 </template>

package/dist/runtime/components/Marquee.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/marquee";
 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 },
@@ -21,16 +22,16 @@ defineSlots();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.marquee));
-  return styler(props);
+  return styler(pick(props, ["pauseOnHover", "orientation", "reverse", "overlay"]));
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div v-for="i in props.repeat" :key="i" :class="ui.content({ class: props.ui?.content })" data-part="content">
-      <slot></slot>
-    </div>
-  </Primitive>
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div v-for="i in props.repeat" :key="i" :class="ui.content({ class: props.ui?.content })" data-part="content">
+      <slot></slot>
+    </div>
+  </Primitive>
 </template>
 
 <style>