@byyuurin/ui 0.0.11 → 0.1.0

package/dist/runtime/components/InputNumber.vue

@@ -1,92 +1,106 @@
 <script>
-
+import theme from "#build/ui/input-number";
 </script>
 
 <script setup>
-import { reactivePick } from "@vueuse/core";
+import { reactivePick, useVModel } from "@vueuse/core";
 import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from "reka-ui";
 import { computed, onMounted, ref } from "vue";
-import { useFormItem } from "../composables/useFormItem";
+import { useAppConfig } from "#imports";
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
-import { useTheme } from "../composables/useTheme";
+import { cv, merge } from "../utils/style";
 import Button from "./Button.vue";
-defineOptions({
-  inheritAttrs: false
-});
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  as: { type: null, required: false },
   placeholder: { type: String, required: false },
   variant: { type: null, required: false },
+  color: { type: null, required: false },
   size: { type: null, required: false },
-  underline: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
-  increment: { type: Object, required: false },
-  incrementIcon: { type: String, required: false },
-  decrement: { type: Object, required: false },
-  decrementIcon: { type: String, required: false },
+  increment: { type: [Boolean, Object], required: false, default: true },
+  incrementIcon: { type: [String, Object], required: false },
+  incrementDisabled: { type: Boolean, required: false },
+  decrement: { type: [Boolean, Object], required: false, default: true },
+  decrementIcon: { type: [String, Object], required: false },
+  decrementDisabled: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false },
+  modelModifiers: { type: Object, required: false },
   locale: { type: String, required: false },
-  class: { type: null, required: false },
   ui: { type: null, required: false },
-  as: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
   modelValue: { type: [Number, null], required: false },
   defaultValue: { type: Number, required: false },
   min: { type: Number, required: false },
   max: { type: Number, required: false },
   step: { type: Number, required: false },
+  stepSnapping: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },
-  formatOptions: { type: null, required: false }
+  formatOptions: { type: null, required: false },
+  disableWheelChange: { type: Boolean, required: false },
+  invertWheelChange: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "formatOptions"), emit);
-const inputRef = ref(null);
+const modelValue = useVModel(props, "modelValue", emit, { defaultValue: props.defaultValue });
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "readonly"), emit);
 const { t, code: codeLocale } = useLocale();
 const locale = computed(() => props.locale || codeLocale.value);
-const { id, name, size, highlight, disabled, ariaAttrs, emitFormBlur, emitFormFocus, emitFormInput, emitFormChange } = useFormItem(props);
-const { theme, generateStyle } = useTheme();
-const incrementIcon = computed(() => props.incrementIcon || (props.orientation === "horizontal" ? theme.value.app.icons.plus : theme.value.app.icons.chevronUp));
-const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? theme.value.app.icons.minus : theme.value.app.icons.chevronDown));
-const style = computed(() => generateStyle("inputNumber", {
-  ...props,
-  size: size.value,
-  highlight: highlight.value
-}));
-onMounted(() => {
-  setTimeout(() => {
-    autoFocus();
-  }, props.autofocusDelay);
+const { id, name, size: formFieldSize, color, highlight, disabled, ariaAttrs, emitFormBlur, emitFormFocus, emitFormInput, emitFormChange } = useFormField(props);
+const { size: fieldGroupSize, orientation } = useFieldGroup(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.inputNumber));
+  return styler({
+    ...props,
+    size: fieldGroupSize.value || formFieldSize.value,
+    color: color.value,
+    highlight: highlight.value,
+    fieldGroup: orientation.value,
+    increment: props.orientation === "vertical" ? !!props.increment || !!props.decrement : !!props.increment,
+    decrement: props.orientation === "vertical" ? false : !!props.decrement
+  });
 });
-defineExpose({
-  inputRef
-});
-function autoFocus() {
-  if (props.autofocus)
-    inputRef.value?.$el?.focus();
-}
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp));
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown));
+const inputRef = ref(null);
 function onUpdate(value) {
+  if (props.modelModifiers?.optional)
+    value ??= void 0;
   const event = new Event("change", { target: { value } });
   emit("change", event);
   emitFormChange();
   emitFormInput();
 }
 function onBlur(event) {
-  emit("blur", event);
   emitFormBlur();
+  emit("blur", event);
+}
+function autoFocus() {
+  if (props.autofocus)
+    inputRef.value?.$el?.focus();
 }
+onMounted(() => {
+  setTimeout(() => autoFocus(), props.autofocusDelay);
+});
+defineExpose({
+  inputRef
+});
 </script>
 
 <template>
   <NumberFieldRoot
-    v-bind="{ ...rootProps, id, name, disabled }"
-    :locale="locale"
-    :aria-disabled="disabled ? true : void 0"
-    :class="style.base({ class: [props.class, props.ui?.base] })"
-    :data-part="$attrs['data-part'] ?? 'base'"
+    v-bind="{ ...rootProps, id, name, disabled, locale, modelValue }"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
     @update:model-value="onUpdate"
   >
     <NumberFieldInput
@@ -94,18 +108,19 @@ function onBlur(event) {
       ref="inputRef"
       :placeholder="props.placeholder"
       :required="props.required"
-      :class="style.input({ class: props.ui?.input })"
-      data-part="input"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
       @blur="onBlur"
       @focus="emitFormFocus"
     />
 
-    <div :class="style.increment({ class: props.ui?.increment })" data-part="increment">
-      <NumberFieldIncrement as-child :disabled="disabled">
+    <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"
@@ -114,12 +129,13 @@ function onBlur(event) {
       </NumberFieldIncrement>
     </div>
 
-    <div :class="style.decrement({ class: props.ui?.decrement })" data-part="decrement">
-      <NumberFieldDecrement as-child :disabled="disabled">
+    <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"

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

@@ -1,59 +1,76 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { NumberFieldRootProps } from 'reka-ui';
-import type { inputNumber } from '../theme/index.js';
-import type { ButtonProps, ComponentAttrs } from '../types/index.js';
-export interface InputNumberEmits {
-    'update:modelValue': [payload: number];
-    'blur': [event: FocusEvent];
-    'change': [payload: Event];
-}
-export interface InputNumberSlots {
-    increment?: (props?: {}) => any;
-    decrement?: (props?: {}) => any;
-}
-type InputNumberVariants = VariantProps<typeof inputNumber>;
-export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pick<NumberFieldRootProps, 'as' | 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
+import theme from '#build/ui/input-number';
+import type { ButtonProps, ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { ModelModifiers } from '../types/input';
+import type { MaybeNull, StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface InputNumberProps extends ComponentBaseProps, Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: NumberFieldRootProps['as'];
     /** The placeholder text when the input is empty. */
     placeholder?: string;
-    variant?: InputNumberVariants['variant'];
-    size?: InputNumberVariants['size'];
-    underline?: boolean;
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
     /**
      * The orientation of the input menu.
      * @default "horizontal"
      */
-    orientation?: InputNumberVariants['orientation'];
+    orientation?: ThemeVariants['orientation'];
     /**
      * Configure the increment button. The `color` and `size` are inherited.
      * @default { variant: 'link' }
      */
-    increment?: ButtonProps;
+    increment?: boolean | ButtonProps;
     /**
      * The icon displayed to increment the value.
      * @default app.icons.plus
      */
-    incrementIcon?: string;
+    incrementIcon?: IconProps['name'];
+    /** Disable the increment button. */
+    incrementDisabled?: boolean;
     /**
      * Configure the decrement button. The `color` and `size` are inherited.
      * @default { variant: 'link' }
      */
-    decrement?: ButtonProps;
+    decrement?: boolean | ButtonProps;
     /**
      * The icon displayed to decrement the value.
      * @default app.icons.minus
      */
-    decrementIcon?: string;
+    decrementIcon?: IconProps['name'];
+    /** Disable the decrement button. */
+    decrementDisabled?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
+    modelModifiers?: Pick<ModelModifiers, 'optional'>;
     /**
      * The locale to use for formatting and parsing numbers.
+     * @default App.locale.code
      */
     locale?: string;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface InputNumberEmits {
+    'update:modelValue': [value: number];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
+}
+export interface InputNumberSlots {
+    increment: StaticSlot;
+    decrement: StaticSlot;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
-    inputRef: import("vue").Ref<({
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
+    inputRef: import("vue").Ref<MaybeNull<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
@@ -65,43 +82,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         };
         $refs: {
             [x: string]: unknown;
-        } & {
-            primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                asChild: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-                as: {
-                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                    default: string;
-                };
-            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                asChild: boolean;
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import("vue").ExtractPropTypes<{
-                asChild: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-                as: {
-                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                    default: string;
-                };
-            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, {}, {}, {}, {
-                asChild: boolean;
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }> | null;
         };
         $slots: Readonly<{
             [name: string]: import("vue").Slot<any> | undefined;
@@ -137,9 +117,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         as: import("reka-ui").AsTag | import("vue").Component;
     }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
-            default?(_: {}): any;
+            default?: (props: {}) => any;
         };
-    }) | null, ({
+    }>, MaybeNull<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
@@ -151,43 +131,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         };
         $refs: {
             [x: string]: unknown;
-        } & {
-            primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                asChild: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-                as: {
-                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                    default: string;
-                };
-            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                asChild: boolean;
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import("vue").ExtractPropTypes<{
-                asChild: {
-                    type: BooleanConstructor;
-                    default: boolean;
-                };
-                as: {
-                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                    default: string;
-                };
-            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                [key: string]: any;
-            }>, {}, {}, {}, {
-                asChild: boolean;
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }> | null;
         };
         $slots: Readonly<{
             [name: string]: import("vue").Slot<any> | undefined;
@@ -223,20 +166,23 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         as: import("reka-ui").AsTag | import("vue").Component;
     }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
-            default?(_: {}): any;
+            default?: (props: {}) => any;
         };
-    }) | null>;
+    }>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (event: Event) => any;
     blur: (event: FocusEvent) => any;
-    change: (payload: Event) => any;
-    "update:modelValue": (payload: number) => any;
+    "update:modelValue": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
-    onChange?: ((payload: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((payload: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     orientation: "horizontal" | "vertical";
+    increment: boolean | ButtonProps;
+    decrement: boolean | ButtonProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Kbd.vue

@@ -1,26 +1,32 @@
 <script>
 import { computed } from "vue";
+import theme from "#build/ui/kbd";
 </script>
 
 <script setup>
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { useKbd } from "../composables/useKbd";
-import { useTheme } from "../composables/useTheme";
+import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false, default: "kbd" },
   variant: { type: null, required: false },
   size: { type: null, required: false },
+  color: { type: null, required: false },
   value: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
 });
 defineSlots();
 const { getKbdKey } = useKbd();
-const { generateStyle } = useTheme();
-const style = computed(() => generateStyle("kbd", props));
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.kbd));
+  return styler(props);
+});
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.base()" data-part="base">
+  <Primitive :as="props.as" :class="ui.base({ class: props.class })" data-part="base">
     <slot>{{ getKbdKey(props.value) }}</slot>
   </Primitive>
 </template>

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

@@ -1,25 +1,31 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PrimitiveProps } from 'reka-ui';
-import type { KbdKey } from '../composables/useKbd.js';
-import type { kbd } from '../theme/index.js';
-import type { ComponentAttrs } from '../types/index.js';
-export interface KbdSlots {
-    default?: (props?: {}) => any;
-}
-type KbdVariants = VariantProps<typeof kbd>;
-export interface KbdProps extends Omit<ComponentAttrs<typeof kbd>, 'ui'> {
+import theme from '#build/ui/kbd';
+import type { KbdKey } from '../composables/useKbd';
+import type { ComponentBaseProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface KbdProps extends ComponentBaseProps {
     /**
      * The element or component this component should render as.
      * @default "kbd"
      */
     as?: PrimitiveProps['as'];
-    variant?: KbdVariants['variant'];
-    size?: KbdVariants['size'];
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "neutral" */
+    color?: ThemeVariants['color'];
     value?: KbdKey | (string & {});
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & Readonly<{}>, {
+export interface KbdSlots {
+    default: StaticSlot;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & Readonly<{}>, {
     as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, KbdSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {