@byyuurin/ui 0.0.9 → 0.0.11

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

@@ -0,0 +1,93 @@
+import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui';
+import type { pagination } from '../theme/index.js';
+import type { ButtonProps, ComponentAttrs } from '../types/index.js';
+export interface PaginationEmits extends PaginationRootEmits {
+}
+export interface PaginationSlots {
+    first?: (props?: {}) => any;
+    prev?: (props?: {}) => any;
+    next?: (props?: {}) => any;
+    last?: (props?: {}) => any;
+    ellipsis?: (props?: {}) => any;
+    item?: (props: {
+        page: number;
+        pageCount: number;
+        item: {
+            type: 'ellipsis';
+        } | {
+            type: 'page';
+            value: number;
+        };
+        index: number;
+    }) => any;
+}
+export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick<PaginationRootProps, 'as' | 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'> {
+    /**
+     * The icon to use for the first page control.
+     * @default app.icons.doubleLeft
+     */
+    firstIcon?: string;
+    /**
+     * The icon to use for the last page control.
+     * @default app.icons.doubleRight
+     */
+    lastIcon?: string;
+    /**
+     * The icon to use for the previous page control.
+     * @default app.icons.chevronLeft
+     */
+    prevIcon?: string;
+    /**
+     * The icon to use for the next page control.
+     * @default app.icons.chevronRight
+     */
+    nextIcon?: string;
+    /**
+     * The icon to use for the ellipsis control.
+     * @default app.icons.ellipsis
+     */
+    ellipsisIcon?: string;
+    /**
+     * The size of the pagination controls.
+     * @default "md"
+     */
+    size?: ButtonProps['size'];
+    /**
+     * The variant of the pagination controls.
+     * @default "outline"
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The variant of the active pagination control.
+     * @default "solid"
+     */
+    activeVariant?: ButtonProps['variant'];
+    /**
+     * Whether to show the first, previous, next, and last controls.
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * A function to render page controls as links.
+     */
+    to?: (page: number) => ButtonProps['to'];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
+    variant: "solid" | "outline" | "soft" | "soft-outline" | "link" | "ghost";
+    itemsPerPage: number;
+    showEdges: boolean;
+    siblingCount: number;
+    total: number;
+    activeVariant: "solid" | "outline" | "soft" | "soft-outline" | "link" | "ghost";
+    showControls: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PaginationSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PinInput.vue

@@ -1,81 +1,81 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PinInputRootProps } from 'reka-ui'
-import type { pinInput } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface PinInputEmits {
-  (event: 'update:modelValue', value: string[]): void
-  (event: 'complete', value: string[]): void
-  (event: 'change', payload: Event): void
-  (event: 'blur', payload: Event): void
-}
-
-type PinInputVariants = VariantProps<typeof pinInput>
-
-export interface PinInputProps extends ComponentAttrs<typeof pinInput>, Pick<PinInputRootProps, 'as' | 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
-  variant?: PinInputVariants['variant']
-  size?: PinInputVariants['size']
-  length?: number | string
-  underline?: boolean
-  highlight?: boolean
-}
 </script>
 
-<script setup lang="ts">
-import { reactivePick } from '@vueuse/core'
-import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, ref } from 'vue'
-import { useTheme } from '../composables/useTheme'
-import { looseToNumber } from '../utils'
-
-const props = withDefaults(defineProps<PinInputProps>(), {
-  variant: 'outline',
-  length: 5,
-  type: 'text',
-})
-
-const emit = defineEmits<PinInputEmits>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'placeholder', 'required', 'type'), emit)
-
-const completed = ref(false)
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('pinInput', props))
-
-function onComplete(value: string[]) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
-  emit('change', event)
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { PinInputInput, PinInputRoot, useForwardPropsEmits } from "reka-ui";
+import { computed, ref } from "vue";
+import { useFormItem } from "../composables/useFormItem";
+import { useTheme } from "../composables/useTheme";
+import { looseToNumber } from "../utils";
+const props = defineProps({
+  variant: { type: null, required: false, default: "outline" },
+  size: { type: null, required: false },
+  length: { type: [Number, String], required: false, default: 5 },
+  underline: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  as: { type: null, required: false },
+  defaultValue: { type: Array, required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  mask: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  name: { type: String, required: false },
+  otp: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  type: { type: null, required: false, default: "text" }
+});
+const emit = defineEmits(["update:modelValue", "complete", "change", "blur"]);
+const rootProps = useForwardPropsEmits(reactivePick(props, "defaultValue", "disabled", "id", "mask", "modelValue", "name", "otp", "required", "type"), emit);
+const completed = ref(false);
+const { id, name, size, highlight, disabled, ariaAttrs, emitFormInput, emitFormChange, emitFormFocus, emitFormBlur } = useFormItem(props);
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("pinInput", {
+  ...props,
+  size: size.value,
+  highlight: highlight.value
+}));
+function onComplete(value) {
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
 }
-
-function onBlur(event: FocusEvent) {
-  if (!event.relatedTarget || completed.value)
-    emit('blur', event)
+function onBlur(event) {
+  if (!event.relatedTarget || completed.value) {
+    emit("blur", event);
+    emitFormBlur();
+  }
 }
 </script>
 
 <template>
   <PinInputRoot
-    v-bind="rootProps"
-    :id="props.id"
-    :name="props.name"
+    v-bind="{ ...rootProps, ...ariaAttrs, id, name }"
+    :placeholder="props.placeholder"
     :class="style.root({ class: [props.class, props.ui?.root] })"
+    data-part="root"
+    @update:model-value="emitFormInput"
     @complete="onComplete"
   >
     <span
       v-for="(ids, index) in looseToNumber(props.length)"
       :key="ids"
+      :aria-disabled="disabled ? true : void 0"
       :class="style.container({ class: props.ui?.container })"
-      :aria-disabled="props.disabled ? true : undefined"
+      data-part="container"
     >
       <PinInputInput
+        v-bind="$attrs"
         :index="index"
+        :disabled="disabled"
         :class="style.base({ class: props.ui?.base })"
-        v-bind="$attrs"
-        :disabled="props.disabled"
+        data-part="base"
         @blur="onBlur"
+        @focus="emitFormFocus"
       />
     </span>
   </PinInputRoot>

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

@@ -0,0 +1,35 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
+import type { pinInput } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+type PinInputType = 'text' | 'number';
+export type PinInputEmits<T extends PinInputType = 'text' | 'number'> = PinInputRootEmits<T> & {
+    change: [payload: Event];
+    blur: [payload: Event];
+};
+type PinInputVariants = VariantProps<typeof pinInput>;
+export interface PinInputProps<T extends PinInputType = 'text' | 'number'> extends ComponentAttrs<typeof pinInput>, Pick<PinInputRootProps<T>, 'as' | 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
+    variant?: PinInputVariants['variant'];
+    size?: PinInputVariants['size'];
+    length?: number | string;
+    underline?: boolean;
+    highlight?: boolean;
+}
+declare const _default: <T extends PinInputType = "text" | "number">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((payload: Event) => any) | undefined;
+        readonly onChange?: ((payload: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T extends "number" ? number[] : string[]) => any) | undefined;
+        readonly onComplete?: ((value: T extends "number" ? number[] : string[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue" | "onComplete"> & PinInputProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "blur", payload: Event) => void) & ((evt: "change", payload: Event) => void) & ((evt: "update:modelValue", value: T extends "number" ? number[] : string[]) => void) & ((evt: "complete", value: T extends "number" ? number[] : string[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Popover.vue

@@ -1,76 +1,46 @@
-<script lang="ts">
-import type { HoverCardRootProps, PopoverArrowProps, PopoverContentProps, PopoverRootEmits, PopoverRootProps } from 'reka-ui'
-import type { popover } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface PopoverEmits extends PopoverRootEmits {}
-
-export interface PopoverSlots {
-  default?: (props: { open: boolean }) => any
-  content?: (props?: {}) => any
-}
-
-export interface PopoverProps extends ComponentAttrs<typeof popover>, PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
-  /**
-   * The display mode of the popover.
-   * @default "click"
-   */
-  mode?: 'click' | 'hover'
-  /** @default { side: 'bottom', sideOffset: 8, collisionPadding: 8 } */
-  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'>
-  arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>
-  /** @default true */
-  portal?: boolean
-  /**
-   * When `false`, the popover will not close when clicking outside or pressing escape.
-   * @default true
-   */
-  dismissible?: boolean
-}
 </script>
 
-<script setup lang="ts">
-import { reactivePick } from '@vueuse/core'
-import { defu } from 'defu'
-import { useForwardPropsEmits } from 'reka-ui'
-import { HoverCard, Popover } from 'reka-ui/namespaced'
-import { computed, toRef } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<PopoverProps>(), {
-  mode: 'click',
-  portal: true,
-  openDelay: 0,
-  closeDelay: 0,
-  dismissible: true,
-})
-const emit = defineEmits<PopoverEmits>()
-const slots = defineSlots<PopoverSlots>()
-
-const pick = props.mode === 'hover'
-  ? reactivePick(props, 'defaultOpen', 'open', 'openDelay', 'closeDelay')
-  : reactivePick(props, 'defaultOpen', 'open', 'modal')
-
-const rootProps = useForwardPropsEmits(pick, emit)
-const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps)
-
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { defu } from "defu";
+import { useForwardPropsEmits } from "reka-ui";
+import { HoverCard, Popover } from "reka-ui/namespaced";
+import { computed, toRef } from "vue";
+import { useTheme } from "../composables/useTheme";
+const props = defineProps({
+  mode: { type: String, required: false, default: "click" },
+  content: { type: Object, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  portal: { type: Boolean, required: false, default: true },
+  dismissible: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+  openDelay: { type: Number, required: false, default: 0 },
+  closeDelay: { type: Number, required: false, default: 0 }
+});
+const emit = defineEmits(["update:open"]);
+const slots = defineSlots();
+const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay") : reactivePick(props, "defaultOpen", "open", "modal");
+const rootProps = useForwardPropsEmits(pick, emit);
+const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const contentEvents = computed(() => {
   if (props.dismissible)
-    return {}
-
+    return {};
   return {
-    pointerDownOutside: (e: Event) => e.preventDefault(),
-    interactOutside: (e: Event) => e.preventDefault(),
-    escapeKeyDown: (e: Event) => e.preventDefault(),
-  }
-})
-
-const arrowProps = toRef(() => props.arrow as PopoverArrowProps)
-
-const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('popover', props))
+    pointerDownOutside: (e) => e.preventDefault(),
+    interactOutside: (e) => e.preventDefault(),
+    escapeKeyDown: (e) => e.preventDefault()
+  };
+});
+const arrowProps = toRef(() => props.arrow);
+const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("popover", props));
 </script>
 
 <template>
@@ -83,11 +53,12 @@ const style = computed(() => generateStyle('popover', props))
       <Component.Content
         v-bind="contentProps"
         :class="style.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        data-part="content"
         v-on="contentEvents"
       >
         <slot name="content"></slot>
 
-        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="style.arrow({ class: props.ui?.arrow })" />
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="style.arrow({ class: props.ui?.arrow })" data-part="arrow" />
       </Component.Content>
     </Component.Portal>
   </Component.Root>

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

@@ -0,0 +1,45 @@
+import type { HoverCardRootProps, PopoverArrowProps, PopoverContentEmits, PopoverContentProps, PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import type { popover } from '../theme/index.js';
+import type { ComponentAttrs, EmitsToProps } from '../types/index.js';
+export interface PopoverEmits extends PopoverRootEmits {
+}
+export interface PopoverSlots {
+    default?: (props: {
+        open: boolean;
+    }) => any;
+    content?: (props?: {}) => any;
+}
+export interface PopoverProps extends ComponentAttrs<typeof popover>, PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+    /**
+     * The display mode of the popover.
+     * @default "click"
+     */
+    mode?: 'click' | 'hover';
+    /** @default { side: 'bottom', sideOffset: 8, collisionPadding: 8 } */
+    content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<PopoverContentEmits>>;
+    arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>;
+    /** @default true */
+    portal?: boolean;
+    /**
+     * When `false`, the popover will not close when clicking outside or pressing escape.
+     * @default true
+     */
+    dismissible?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    mode: "click" | "hover";
+    portal: boolean;
+    dismissible: boolean;
+    openDelay: number;
+    closeDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PopoverSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};