@byyuurin/ui 0.0.10 → 0.1.0

package/dist/runtime/components/Alert.vue

@@ -1,121 +1,103 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { alert } from '../theme'
-import type { ButtonProps, ComponentAttrs } from '../types'
-
-export interface AlertEmits {
-  'update:open': [value: boolean]
-}
-
-export interface AlertSlots {
-  leading?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  actions?: (props?: {}) => any
-  close?: (props: { ui: ComponentAttrs<typeof alert>['ui'] }) => any
-}
-
-type AlertVariants = VariantProps<typeof alert>
-
-export interface AlertProps extends ComponentAttrs<typeof alert> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  title?: string
-  description?: string
-  icon?: string
-  variant?: AlertVariants['variant']
-  orientation?: AlertVariants['orientation']
-  /**
-   * Display a list of actions:
-   * - under the title and description when orientation is `vertical`
-   * - next to the close button when orientation is `horizontal`
-   */
-  actions?: ButtonProps[]
-  /**
-   * Display a close button to dismiss the alert.
-   * @default false
-   */
-  close?: ButtonProps | boolean
-  /**
-   * The icon displayed in the close button.
-   * @default app.icons.close
-   */
-  closeIcon?: string
-}
+<script>
+import theme from "#build/ui/alert";
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { useLocale } from '../composables/useLocale'
-import { useTheme } from '../composables/useTheme'
-import Button from './Button.vue'
-
-const props = withDefaults(defineProps<AlertProps>(), {
-  variant: 'solid',
-  orientation: 'vertical',
-})
-
-const emit = defineEmits<AlertEmits>()
-const slots = defineSlots<AlertSlots>()
-
-const { t } = useLocale()
-const { theme, generateStyle } = useTheme()
-const style = computed(() => generateStyle('alert', {
-  ...props,
-  title: !!props.title || !!slots.title,
-}))
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  actions: { type: Array, required: false },
+  close: { type: [Boolean, Object], required: false },
+  closeIcon: { type: [String, Object], required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const emit = defineEmits(["update:open"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.alert));
+  return styler({
+    ...props,
+    title: !!props.title || !!slots.title
+  });
+});
 </script>
 
 <template>
   <Primitive
     :as="props.as"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :data-orientation="props.orientation"
-    :class="style.root({ class: [props.class, props.ui?.root] })"
+    data-part="root"
   >
-    <slot name="leading">
-      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
+    <slot name="leading" :ui="ui">
+      <Avatar
+        v-if="props.avatar"
+        :size="props.ui?.avatarSize || ui.avatarSize()"
+        v-bind="props.avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
+        data-part="avatar"
+      />
+      <Icon
+        v-else-if="props.icon"
+        :name="props.icon"
+        :class="ui.icon({ class: props.ui?.icon })"
+        data-part="icon"
+      />
     </slot>
 
-    <div :class="style.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="props.title || slots.title" :class="style.title({ class: props.ui?.title })">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <div v-if="props.title || slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
         <slot name="title">
           {{ props.title }}
         </slot>
       </div>
-      <div v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
+      <div v-if="props.description || slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
         <slot name="description">
           {{ props.description }}
         </slot>
       </div>
 
-      <div v-if="props.orientation === 'vertical' && props.actions?.length" :class="style.actions({ class: props.ui?.actions })">
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
         <slot name="actions">
           <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="(props.orientation === 'horizontal' && props.actions?.length) || props.close" :class="style.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
-      <template v-if="props.orientation === 'horizontal' && props.actions?.length">
+    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions) || props.close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })" data-part="actions">
+      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions)">
         <slot name="actions">
           <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </template>
 
-      <slot name="close" :ui="props.ui">
+      <slot name="close" :ui="ui">
         <Button
           v-if="props.close"
-          :icon="props.closeIcon || theme.app.icons.close"
-          size="md"
+          :icon="props.closeIcon || appConfig.ui.icons.close"
+          color="neutral"
           variant="link"
           :aria-label="t('alert.close')"
-          v-bind="typeof props.close === 'object' ? props.close : undefined"
-          :class="style.close({ class: props.ui?.close })"
+          v-bind="typeof props.close === 'object' ? props.close : {}"
+          :class="ui.close({ class: props.ui?.close })"
+          data-part="close"
           @click="emit('update:open', false)"
         />
       </slot>

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

@@ -0,0 +1,71 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/alert';
+import type { AvatarProps, ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface AlertProps extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    title?: string;
+    description?: string;
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "solid" */
+    variant?: ThemeVariants['variant'];
+    /**
+     * The orientation between the content and the actions.
+     * @default "vertical"
+     */
+    orientation?: ThemeVariants['orientation'];
+    /**
+     * Display a list of actions:
+     * - under the title and description when orientation is `vertical`
+     * - next to the close button when orientation is `horizontal`
+     */
+    actions?: ButtonProps[];
+    /**
+     * Display a close button to dismiss the alert.
+     * @default false
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @default app.icons.close
+     */
+    closeIcon?: IconProps['name'];
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface AlertEmits {
+    'update:open': [open: boolean];
+}
+export interface AlertSlots {
+    leading: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    title: StaticSlot;
+    description: StaticSlot;
+    actions: StaticSlot;
+    close: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/App.vue

@@ -1,56 +1,42 @@
-<script lang="ts">
-import type { UserConfig } from '@unocss/core'
-import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import type { Messages, ThemeExtension, ToastProviderProps } from '../types'
-import type { Locale } from '../utils'
+<script>
 
-export interface AppSlots {
-  default: (props?: {}) => any
-}
-
-export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
-  unoConfig?: UserConfig
-  ui?: ThemeExtension
-  toaster?: ToastProviderProps
-  tooltip?: TooltipProviderProps
-  locale?: Locale<Messages>
-}
 </script>
 
-<script setup lang="ts">
-import { reactivePick } from '@vueuse/core'
-import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
-import { toRef, useId } from 'vue'
-import { provideLocaleContext, provideThemeExtension, provideUnoConfig } from '../app/injections'
-import OverlayProvider from './OverlayProvider.vue'
-import ToastProvider from './ToastProvider.vue'
-
-const props = withDefaults(defineProps<AppProps>(), {
-  unoConfig: () => ({}),
-  ui: () => ({}),
-})
-
-defineSlots<AppSlots>()
-
-const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
-const tooltipProps = toRef(() => props.tooltip)
-const toastProviderProps = toRef(() => props.toaster)
-
-provideUnoConfig(() => props.unoConfig)
-provideThemeExtension(() => props.ui)
-
-const locale = toRef(() => props.locale)
-provideLocaleContext(locale)
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { ConfigProvider, TooltipProvider, useForwardProps } from "reka-ui";
+import { toRef, useId } from "vue";
+import { provideLocaleContext } from "../composables/useLocale";
+import { providePortalTarget } from "../composables/usePortal";
+import OverlayProvider from "./OverlayProvider.vue";
+import ToastProvider from "./ToastProvider.vue";
+const props = defineProps({
+  toaster: { type: null, required: false },
+  tooltip: { type: Object, required: false },
+  locale: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: "body" },
+  scrollBody: { type: [Boolean, Object], required: false },
+  nonce: { type: String, required: false }
+});
+defineSlots();
+const configProviderProps = useForwardProps(reactivePick(props, "scrollBody"));
+const tooltipProps = toRef(() => props.tooltip);
+const toastProviderProps = toRef(() => props.toaster);
+const locale = toRef(() => props.locale);
+provideLocaleContext(locale);
+const portal = toRef(() => props.portal);
+providePortalTarget(portal);
 </script>
 
 <template>
-  <ConfigProvider :use-id="useId" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => useId()" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <ToastProvider v-if="props.toaster !== null" v-bind="toastProviderProps">
         <slot></slot>
       </ToastProvider>
       <slot v-else></slot>
+
+      <OverlayProvider />
     </TooltipProvider>
-    <OverlayProvider />
   </ConfigProvider>
 </template>

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

@@ -0,0 +1,26 @@
+import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
+import type { Locale, Messages, ToastProviderProps } from '../types';
+import type { MaybeNull, StaticSlot } from '../types/utils';
+export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+    toaster?: MaybeNull<ToastProviderProps>;
+    tooltip?: TooltipProviderProps;
+    locale?: Locale<T>;
+    portal?: boolean | string | HTMLElement;
+}
+export interface AppSlots {
+    default: StaticSlot;
+}
+declare const __VLS_export: <T extends Messages>(__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<AppProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: AppSlots;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/Avatar.vue

@@ -1,70 +1,94 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { AvatarRootProps } from 'reka-ui'
-import type { avatar } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-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']
-}
+<script>
+import theme from "#build/ui/avatar";
 </script>
 
-<script setup lang="ts">
-import { AvatarFallback, AvatarImage, AvatarRoot } from 'reka-ui'
-import { computed, shallowRef, watch } from 'vue'
-import { useAvatarGroup } from '../composables/useAvatarGroup'
-import { useTheme } from '../composables/useTheme'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<AvatarProps>(), {
-  src: '',
-})
-
-const { size } = useAvatarGroup(props)
-const fallback = computed(() => props.text || (props.alt || '').split(' ').map((word) => word.charAt(0)).join('').slice(0, 2))
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('avatar', {
-  ...props,
-  size: size.value,
-}))
-
-const error = shallowRef(false)
-
+<script setup>
+import { defu } from "defu";
+import { Primitive } from "reka-ui";
+import { computed, shallowRef, watch } from "vue";
+import ImageComponent from "#build/ui-image-component";
+import { useAppConfig } from "#imports";
+import { useAvatarGroup } from "../composables/useAvatarGroup";
+import { cv, merge } from "../utils/style";
+import Chip from "./Chip.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  src: { type: String, required: false },
+  alt: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
+  text: { type: String, required: false },
+  size: { type: null, required: false },
+  chip: { type: [Boolean, Object], required: false },
+  style: { type: null, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const as = computed(() => {
+  if (typeof props.as === "string" || props.as && "render" in props.as && typeof props.as.render === "function")
+    return { root: props.as };
+  return defu(props.as, { root: "span" });
+});
+const fallback = computed(() => props.text || (props.alt || "").split(" ").map((word) => word.charAt(0)).join("").slice(0, 2));
+const { size } = useAvatarGroup(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.avatar));
+  return styler({
+    ...props,
+    size: size.value
+  });
+});
+const sizePx = computed(() => ({
+  "3xs": 16,
+  "2xs": 20,
+  "xs": 24,
+  "sm": 28,
+  "md": 32,
+  "lg": 36,
+  "xl": 40,
+  "2xl": 44,
+  "3xl": 48
+})[props.size || "md"]);
+const error = shallowRef(false);
 watch(() => props.src, () => {
   if (error.value)
-    error.value = false
-})
+    error.value = false;
+});
+function onError() {
+  error.value = true;
+}
 </script>
 
 <template>
-  <AvatarRoot :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" :style="props.style">
-    <AvatarImage
+  <component
+    :is="props.chip ? Chip : Primitive"
+    :as="as.root"
+    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    :style="props.style"
+  >
+    <component
+      :is="as.img || ImageComponent"
+      v-if="props.src && !error"
       :src="props.src"
       :alt="props.alt"
-      :class="style.image({ class: props.ui?.image })"
+      :width="sizePx"
+      :height="sizePx"
+      v-bind="$attrs"
+      :class="ui.image({ class: props.ui?.image })"
+      data-part="image"
+      @error="onError"
     />
 
-    <AvatarFallback as-child>
-      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
-      <span v-else :class="style.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
-    </AvatarFallback>
-  </AvatarRoot>
+    <slot v-else v-bind="$attrs">
+      <Icon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" data-part="icon" />
+      <span v-else :class="ui.fallback({ class: props.ui?.fallback })" data-part="fallback">
+        <template v-if="fallback">{{ fallback }}</template>
+        <template v-else>&nbsp;</template>
+      </span>
+    </slot>
+  </component>
 </template>

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

@@ -0,0 +1,39 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/avatar';
+import type { ChipProps, ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+interface InnerAs {
+    root?: PrimitiveProps['as'];
+    img?: PrimitiveProps['as'];
+}
+export interface AvatarProps extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "span"
+     */
+    as?: PrimitiveProps['as'] | InnerAs;
+    src?: string;
+    alt?: string;
+    icon?: IconProps['name'];
+    text?: string;
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    chip?: boolean | ChipProps;
+    style?: string | HTMLElement['style'];
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface AvatarSlots {
+    default: StaticSlot;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};