@byyuurin/ui 0.0.10 → 0.1.0

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

@@ -0,0 +1,102 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { DateValue } from '@internationalized/date';
+import type { CalendarCellTriggerProps, CalendarRootEmits, CalendarRootProps, DateRange, RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui';
+import theme from '#build/ui/calendar';
+import type { ButtonProps, ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { MaybeNull, StaticSlot } from '../types/utils';
+type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true ? DateRange : M extends true ? DateValue[] : DateValue;
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true ? MaybeNull<DateRange> : M extends true ? (DateValue[] | undefined) : (DateValue | undefined);
+type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
+type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>;
+type ThemeVariants = VariantProps<typeof theme>;
+export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends ComponentBaseProps, _CalendarRootProps, _RangeCalendarRootProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: CalendarRootProps['as'];
+    /**
+     * The icon to use for the next year control.
+     * @default app.icons.chevronDoubleRight
+     */
+    nextYearIcon?: IconProps['name'];
+    /**
+     * Configure the next year button.
+     */
+    nextYear?: ButtonProps;
+    /**
+     * The icon to use for the next month control.
+     * @default app.icons.chevronRight
+     */
+    nextMonthIcon?: IconProps['name'];
+    /**
+     * Configure the next month button.
+     */
+    nextMonth?: ButtonProps;
+    /**
+     * The icon to use for the previous year control.
+     * @default app.icons.chevronDoubleLeft
+     */
+    prevYearIcon?: IconProps['name'];
+    /**
+     * Configure the prev year button.
+     */
+    prevYear?: ButtonProps;
+    /**
+     * The icon to use for the previous month control.
+     * @default app.icons.chevronLeft
+     */
+    prevMonthIcon?: IconProps['name'];
+    /**
+     * Configure the prev month button.
+     */
+    prevMonth?: ButtonProps;
+    /**
+     * @default "md"
+     */
+    size?: ThemeVariants['size'];
+    color?: ThemeVariants['color'];
+    variant?: ThemeVariants['variant'];
+    /** Whether or not a range of dates can be selected */
+    range?: R & boolean;
+    /** Whether or not multiple dates can be selected */
+    multiple?: M & boolean;
+    /** Show month controls */
+    monthControls?: boolean;
+    /** Show year controls */
+    yearControls?: boolean;
+    defaultValue?: CalendarDefaultValue<R, M>;
+    modelValue?: CalendarDefaultValue<R, M>;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+    'update:modelValue': [date: CalendarModelValue<R, M>];
+}
+export interface CalendarSlots {
+    'heading': StaticSlot<{
+        value: string;
+    }>;
+    'day': StaticSlot<Pick<CalendarCellTriggerProps, 'day'>>;
+    'week-day': StaticSlot<{
+        day: string;
+    }>;
+}
+declare const __VLS_export: <R extends boolean, M extends boolean>(__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<CalendarProps<R, M> & {
+        "onUpdate:modelValue"?: ((date: CalendarModelValue<R, M>) => any) | undefined;
+        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+        "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
+        "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: CalendarSlots;
+    emit: ((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
+}>) => 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/Card.vue

@@ -1,56 +1,42 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { card } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-export interface CardSlots {
-  default?: (props?: {}) => any
-  content?: (props?: {}) => any
-  header?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  footer?: (props?: {}) => any
-}
-
-type CardVariants = VariantProps<typeof card>
-
-export interface CardProps extends ComponentAttrs<typeof card> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  variant?: CardVariants['variant']
-  title?: string
-  description?: string
-}
+<script>
+import theme from "#build/ui/card";
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<CardProps>(), {})
-const slots = defineSlots<CardSlots>()
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('card', props))
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { cv, merge } from "../utils/style";
+const props = defineProps({
+  as: { type: null, required: false },
+  variant: { type: null, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.card));
+  return styler(props);
+});
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="props.as" :class="ui.root({ class: [props.class, props.ui?.root] })" data-part="root">
     <slot name="content">
       <div
-        v-if="slots.header || props.title || slots.title || props.description || slots.description "
-        :class="style.header({ class: props.ui?.header })"
+        v-if="slots.header || props.title || slots.title || props.description || slots.description"
+        :class="ui.header({ class: props.ui?.header })"
+        data-part="header"
       >
         <slot name="header">
           <Primitive
             v-if="props.title || slots.title"
-            :as="slots.title ? undefined : 'h2'"
-            :class="style.title({ class: props.ui?.title })"
+            :as="!!slots.title ? void 0 : 'h2'"
+            :class="ui.title({ class: props.ui?.title })"
+            data-part="title"
           >
             <slot name="title">
               {{ props.title }}
@@ -58,9 +44,10 @@ const style = computed(() => generateStyle('card', props))
           </Primitive>
           <Primitive
             v-if="props.description || slots.description"
-            :as="slots.description ? undefined : 'p'"
+            :as="!!slots.description ? void 0 : 'p'"
             :as-child="!!slots.description"
-            :class="style.description({ class: props.ui?.description })"
+            :class="ui.description({ class: props.ui?.description })"
+            data-part="description"
           >
             <slot name="description">
               {{ props.description }}
@@ -69,11 +56,11 @@ const style = computed(() => generateStyle('card', props))
         </slot>
       </div>
 
-      <div v-if="slots.default" :class="style.body({ class: props.ui?.body })">
+      <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })" data-part="body">
         <slot></slot>
       </div>
 
-      <div v-if="slots.footer" :class="style.footer({ class: props.ui?.footer })">
+      <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
         <slot name="footer"></slot>
       </div>
     </slot>

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

@@ -0,0 +1,34 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/card';
+import type { ComponentBaseProps, ComponentUIProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface CardProps extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
+    title?: string;
+    description?: string;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface CardSlots {
+    default: StaticSlot;
+    content: StaticSlot;
+    header: StaticSlot;
+    title: StaticSlot;
+    description: StaticSlot;
+    footer: StaticSlot;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};