@byyuurin/ui 0.0.9 → 0.0.11

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

@@ -0,0 +1,25 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { AvatarRootProps } from 'reka-ui';
+import type { avatar } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface AvatarSlots {
+    default?: (props?: {}) => any;
+}
+type AvatarVariants = VariantProps<typeof avatar>;
+export interface AvatarProps extends ComponentAttrs<typeof avatar> {
+    /**
+     * The element or component this component should render as.
+     * @default "span"
+     */
+    as?: AvatarRootProps['as'];
+    src?: string;
+    alt?: string;
+    icon?: string;
+    text?: string;
+    size?: AvatarVariants['size'];
+    style?: string | HTMLElement['style'];
+}
+declare const _default: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
+    src: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/AvatarGroup.vue

@@ -1,87 +1,56 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { avatarGroup } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface AvatarGroupSlots {
-  default?: (props?: {}) => any
-}
-
-type AvatarGroupVariants = VariantProps<typeof avatarGroup>
-
-export interface AvatarGroupProps extends ComponentAttrs<typeof avatarGroup> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  size?: AvatarGroupVariants['size']
-  /**
-   * The maximum number of avatars to display.
-   */
-  max?: number | string
-}
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { provideAvatarGroup } from '../app/injections'
-import { useTheme } from '../composables/useTheme'
-import Avatar from './Avatar.vue'
-
-const props = defineProps<AvatarGroupProps>()
-const slots = defineSlots<AvatarGroupSlots>()
-
-const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
-
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { provideAvatarGroup } from "../app/injections";
+import { useTheme } from "../composables/useTheme";
+import Avatar from "./Avatar.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  max: { type: [Number, String], required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const max = computed(() => typeof props.max === "string" ? Number.parseInt(props.max, 10) : props.max);
 const children = computed(() => {
-  let nodes = slots.default?.()
-
+  let nodes = slots.default?.();
   if (Array.isArray(nodes) && nodes?.length) {
     nodes = nodes.flatMap((child) => {
-      if (typeof child.type === 'symbol') {
-        // `v-if="false"` or commented node
-        if (typeof child.children === 'string')
-          return null
-
-        return child.children
+      if (typeof child.type === "symbol") {
+        if (typeof child.children === "string")
+          return null;
+        return child.children;
       }
-
-      return child
-    }).filter(Boolean)
+      return child;
+    }).filter(Boolean);
   }
-
-  return nodes || []
-})
-
+  return nodes || [];
+});
 const visibleAvatars = computed(() => {
   if (children.value.length === 0)
-    return []
-
+    return [];
   if (!max.value || max.value <= 0)
-    return [...children.value].reverse()
-
-  return [...children.value].slice(0, max.value).reverse()
-})
-
+    return [...children.value].reverse();
+  return [...children.value].slice(0, max.value).reverse();
+});
 const hiddenCount = computed(() => {
   if (children.value.length === 0)
-    return 0
-
-  return children.value.length - visibleAvatars.value.length
-})
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('avatarGroup', props))
-
-provideAvatarGroup(computed(() => props))
+    return 0;
+  return children.value.length - visibleAvatars.value.length;
+});
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("avatarGroup", props));
+provideAvatarGroup(computed(() => props));
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="style.base({ class: props.ui?.base })" />
-    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="style.base({ class: props.ui?.base })" />
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
+    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="style.base({ class: props.ui?.base })" data-part="base" />
+    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="style.base({ class: props.ui?.base })" data-part="base" />
   </Primitive>
 </template>

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

@@ -0,0 +1,27 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import type { avatarGroup } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface AvatarGroupSlots {
+    default?: (props?: {}) => any;
+}
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>;
+export interface AvatarGroupProps extends ComponentAttrs<typeof avatarGroup> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    size?: AvatarGroupVariants['size'];
+    /**
+     * The maximum number of avatars to display.
+     */
+    max?: number | string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Badge.vue

@@ -1,69 +1,43 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { badge } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface BadgeEmits {
-  (e: 'update:show', payload: boolean): void
-}
-
-export interface BadgeSlots {
-  default?: (props?: {}) => any
-  content?: (props?: {}) => any
-}
-
-type BadgeVariants = VariantProps<typeof badge>
-
-export interface BadgeProps extends ComponentAttrs<typeof badge> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  text?: string | number
-  size?: BadgeVariants['size']
-  position?: BadgeVariants['position']
-  show?: boolean
-  /** When `true`, keep the badge inside the component for rounded elements. */
-  inset?: boolean
-  /** When `true`, render the badge relatively to the parent. */
-  standalone?: boolean
-}
 </script>
 
-<script setup lang="ts">
-import { Primitive, Slot } from 'reka-ui'
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
+<script setup>
+import { Primitive, Slot } from "reka-ui";
+import { computed } from "vue";
+import { useTheme } from "../composables/useTheme";
 defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<BadgeProps>(), {
-  position: 'top-right',
-})
-
-defineEmits<BadgeEmits>()
-defineSlots<BadgeSlots>()
-
-const show = defineModel<boolean>('show', { default: true })
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('badge', props))
+  inheritAttrs: false
+});
+const props = defineProps({
+  as: { type: null, required: false },
+  text: { type: [String, Number], required: false },
+  size: { type: null, required: false },
+  position: { type: null, required: false, default: "top-right" },
+  show: { type: Boolean, required: false },
+  inset: { type: Boolean, required: false },
+  standalone: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineEmits(["update:show"]);
+defineSlots();
+const show = defineModel("show", { type: Boolean, ...{ default: true } });
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("badge", props));
 </script>
 
 <template>
   <Primitive
     :as="props.as"
     :class="style.root({ class: [props.class, props.ui?.root] })"
+    :data-part="$attrs['data-part'] ?? 'root'"
   >
     <Slot v-bind="$attrs">
       <slot></slot>
     </Slot>
 
-    <span v-if="show" :class="style.base({ class: props.ui?.base })">
+    <span v-if="show" :class="style.base({ class: props.ui?.base })" data-part="base">
       <slot name="content">
         {{ props.text }}
       </slot>

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

@@ -0,0 +1,44 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import type { badge } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface BadgeEmits {
+    'update:show': [payload: boolean];
+}
+export interface BadgeSlots {
+    default?: (props?: {}) => any;
+    content?: (props?: {}) => any;
+}
+type BadgeVariants = VariantProps<typeof badge>;
+export interface BadgeProps extends ComponentAttrs<typeof badge> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    text?: string | number;
+    size?: BadgeVariants['size'];
+    position?: BadgeVariants['position'];
+    show?: boolean;
+    /** When `true`, keep the badge inside the component for rounded elements. */
+    inset?: boolean;
+    /** When `true`, render the badge relatively to the parent. */
+    standalone?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps & {
+    show?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:show": (...args: unknown[]) => any;
+}, string, import("vue").PublicProps, Readonly<BadgeProps & {
+    show?: boolean;
+}> & Readonly<{
+    "onUpdate:show"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Breadcrumb.vue

@@ -1,105 +1,63 @@
-<script lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { breadcrumb } from '../theme'
-import type { ComponentAttrs, LinkProps } from '../types'
+<script>
 
-type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
-
-type DynamicSlots<T extends { slot?: string }, SlotProps, Slot = T['slot']> =
-  Slot extends string
-    ? Record<Slot | `${Slot}-${'leading' | 'label' | 'trailing'}`, SlotProps>
-    : Record<string, never>
-
-export type BreadcrumbSlots<T extends { slot?: string }> = {
-  'item'?: SlotProps<T>
-  'item-leading'?: SlotProps<T>
-  'item-label'?: SlotProps<T>
-  'item-trailing'?: SlotProps<T>
-  'separator'?: (props?: {}) => any
-} & DynamicSlots<T, SlotProps<T>>
-
-export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
-  label?: string
-  icon?: string
-  slot?: string
-}
-
-export interface BreadcrumbProps<T> extends ComponentAttrs<typeof breadcrumb> {
-  /**
-   * The element or component this component should render as.
-   * @default "nav"
-   */
-  as?: PrimitiveProps['as']
-  items?: T[]
-  /**
-   * The icon to use as a separator.
-   * @default app.icons.chevronRight
-   */
-  separatorIcon?: string
-  /**
-   * The key used to get the label from the item.
-   * @default "label"
-   */
-  labelKey?: string
-}
 </script>
 
-<script setup lang="ts" generic="T extends BreadcrumbItem">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { useLocale } from '../composables/useLocale'
-import { useTheme } from '../composables/useTheme'
-import { get, pickLinkProps } from '../utils'
-import Link from './Link.vue'
-import LinkBase from './LinkBase.vue'
-
-const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
-  as: 'nav',
-  labelKey: 'label',
-})
-
-const slots = defineSlots<BreadcrumbSlots<T>>()
-
-const { dir } = useLocale()
-const { theme, generateStyle } = useTheme()
-
-const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
-
-const style = computed(() => generateStyle('breadcrumb', props))
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useLocale } from "../composables/useLocale";
+import { useTheme } from "../composables/useTheme";
+import { get, pickLinkProps } from "../utils";
+import Link from "./Link.vue";
+import LinkBase from "./LinkBase.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  items: { type: Array, required: false },
+  separatorIcon: { type: String, required: false },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const { dir } = useLocale();
+const { theme, generateStyle } = useTheme();
+const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight));
+const style = computed(() => generateStyle("breadcrumb", props));
 </script>
 
 <template>
-  <Primitive :as="props.as" aria-label="breadcrumb" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <ol :class="style.list({ class: props.ui?.list })">
+  <Primitive :as="props.as" aria-label="breadcrumb" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
+    <ol :class="style.list({ class: props.ui?.list })" data-part="list">
       <template v-for="(item, index) in props.items" :key="index">
-        <li :class="style.item({ class: props.ui?.item })">
+        <li :class="style.item({ class: props.ui?.item })" data-part="item">
           <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <LinkBase
               v-bind="slotProps"
               as="span"
-              :aria-current="active && (index === items!.length - 1) ? 'page' : undefined"
-              :class="style.link({ class: props.ui?.link, active: index === items!.length - 1, disabled: item.disabled, to: !!item.to })"
+              :aria-current="active && index === items.length - 1 ? 'page' : void 0"
+              :class="style.link({ class: props.ui?.link, active: index === items.length - 1, disabled: item.disabled, to: !!item.to })"
+              data-part="link"
             >
               <slot :name="item.slot || 'item'" :item="item" :index="index">
-                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="index === items!.length - 1" :index="index">
-                  <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })"></span>
+                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="index === items.length - 1" :index="index">
+                  <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })" data-part="link-leading-icon"></span>
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
-                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="index === items!.length - 1" :index="index">
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="style.linkLabel({ class: props.ui?.linkLabel })" data-part="link-label">
+                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="index === items.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
                 </span>
 
-                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="index === items!.length - 1" :index="index"></slot>
+                <slot :name="`${item.slot || 'item'}-trailing`" :item="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="style.separator({ class: props.ui?.separator })">
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="style.separator({ class: props.ui?.separator })" data-part="separator">
           <slot name="separator">
-            <span :class="style.separatorIcon({ class: [separatorIcon, props.ui?.separatorIcon] })"></span>
+            <span :class="style.separatorIcon({ class: [separatorIcon, props.ui?.separatorIcon] })" data-part="separator-icon"></span>
           </slot>
         </li>
       </template>

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

@@ -0,0 +1,52 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { breadcrumb } from '../theme/index.js';
+import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types/index.js';
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+    label?: string;
+    icon?: string;
+    slot?: string;
+    [key: string]: any;
+}
+type SlotProps<T extends BreadcrumbItem> = (props: {
+    item: T;
+    index: number;
+    active?: boolean;
+}) => any;
+export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: SlotProps<T>;
+    'item-trailing'?: SlotProps<T>;
+    'separator'?: any;
+} & DynamicSlots<T, 'leading' | 'label' | 'trailing', SlotProps<T>>;
+export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> extends ComponentAttrs<typeof breadcrumb> {
+    /**
+     * The element or component this component should render as.
+     * @default "nav"
+     */
+    as?: PrimitiveProps['as'];
+    items?: T[];
+    /**
+     * The icon to use as a separator.
+     * @default app.icons.chevronRight
+     */
+    separatorIcon?: string;
+    /**
+     * The key used to get the label from the item.
+     * @default "label"
+     */
+    labelKey?: string;
+}
+declare const _default: <T extends BreadcrumbItem>(__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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & BreadcrumbProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: BreadcrumbSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};