nuxt-ui-elements-pro 0.1.0

package/README.md

@@ -0,0 +1 @@
+test

package/dist/module.d.mts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+interface ModuleOptions {
+    /**
+     * Prefix for component names
+     * @default 'UE'
+     */
+    prefix?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "nuxt-ui-elements-pro",
+  "configKey": "uiElementsPro",
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,178 @@
+import { addTemplate, defineNuxtModule, createResolver, addImportsDir, addComponentsDir } from '@nuxt/kit';
+import { kebabCase } from 'scule';
+
+const eventCalendar = (options) => ({
+  slots: {
+    // Shared
+    root: "w-full border border-default rounded-lg bg-default",
+    header: "flex items-center justify-between px-4 py-3 border-b border-default",
+    headerTitle: "text-lg font-semibold text-highlighted",
+    headerActions: "flex items-center gap-1",
+    viewSwitcher: "flex items-center gap-0.5 bg-elevated rounded-lg p-0.5",
+    // Month view
+    weekdayRow: "grid grid-cols-7 border-b border-default",
+    weekdayCell: "py-2 text-center text-xs font-medium text-muted uppercase tracking-wider",
+    monthBody: "grid grid-cols-7",
+    dayCell: "min-h-24 border-b border-r border-default p-1 last-of-type:border-r-0 hover:bg-elevated/50 cursor-pointer",
+    dayCellOutside: "bg-muted/20",
+    dayNumber: "text-xs font-medium p-1 leading-none",
+    dayNumberToday: "inline-flex items-center justify-center size-6 rounded-full text-inverted font-semibold",
+    dayNumberOutside: "text-muted",
+    eventList: "space-y-1 mt-1",
+    eventChip: [
+      "text-xs px-1.5 py-1 rounded truncate cursor-pointer mb-0.5",
+      "border-l-2 text-[var(--event-color)] border-[var(--event-color)]"
+    ],
+    eventTime: "font-medium mr-1",
+    moreEvents: "text-xs text-muted px-1.5 py-0.5 cursor-pointer hover:text-highlighted block w-full",
+    expandedOverlay: "absolute -m-1.5 min-h-[calc(100%+12px)] bg-default border border-default rounded-lg p-1.5 shadow-xl z-20 animate-expand-overlay",
+    // Week/Day view
+    columnHeaders: "flex border-b border-default",
+    timeGutterSpacer: "w-16 shrink-0 border-r border-default",
+    dayColumnHeader: "flex-1 bg-default py-2 text-center border-r border-default last:border-r-0",
+    dayColumnHeaderLabel: "text-xs font-medium text-muted uppercase",
+    dayColumnHeaderNumber: "text-lg font-semibold text-highlighted",
+    dayColumnHeaderToday: "inline-flex items-center justify-center size-8 rounded-full text-inverted font-semibold",
+    allDayRow: "flex border-b border-default min-h-8",
+    allDayLabel: "w-16 shrink-0 border-r border-default flex items-center justify-end pr-2 text-[10px] text-muted",
+    allDayCell: "flex-1 border-r border-default last:border-r-0 p-0.5 flex flex-wrap gap-0.5",
+    timeGrid: "relative flex items-start flex-1 overflow-auto h-[600px]",
+    timeGutter: "sticky left-0 z-10 w-16 shrink-0 bg-default border-r border-default",
+    timeGutterSlot: "relative border-b border-default/50",
+    timeLabel: "absolute top-0 right-0 px-2 mr-2 text-[10px] text-muted -translate-y-1/2 bg-default",
+    dayColumn: "flex-1 relative border-r border-default last:border-r-0",
+    timeSlotRow: "border-b border-default/50 transition-colors",
+    timeEvent: [
+      "absolute rounded px-1.5 py-0.5 text-xs cursor-pointer overflow-hidden",
+      "border-l-2 text-[var(--event-color)] border-[var(--event-color)]"
+    ],
+    timeEventTitle: "font-medium truncate",
+    timeEventTime: "opacity-70 text-[10px]",
+    // Drag state
+    dropTarget: "ring-2 ring-dashed ring-offset-1",
+    dragSnapSlot: ""
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      class: {
+        dayNumberToday: `bg-${color}`,
+        dayColumnHeaderToday: `bg-${color}`,
+        dropTarget: `ring-${color}`,
+        dragSnapSlot: `bg-${color}/10 ring-1 ring-inset ring-${color}/30`
+      }
+    })),
+    {
+      color: "neutral",
+      class: {
+        dayNumberToday: "bg-inverted",
+        dayColumnHeaderToday: "bg-inverted",
+        dropTarget: "ring-inverted",
+        dragSnapSlot: "bg-inverted/10 ring-1 ring-inset ring-inverted/30"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary"
+  }
+});
+
+const theme = {
+  __proto__: null,
+  eventCalendar: eventCalendar
+};
+
+function addTemplates(options, _nuxt) {
+  const templates = [];
+  function writeThemeTemplate(themeModules) {
+    for (const component in themeModules) {
+      templates.push({
+        filename: `ui-elements-pro/${kebabCase(component)}.ts`,
+        write: true,
+        getContents: () => {
+          const template = themeModules[component];
+          const result = typeof template === "function" ? template(options) : template;
+          const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
+            const keys = Object.keys(values);
+            return keys.some((key) => key !== "true" && key !== "false");
+          }).map(([key]) => key);
+          let json = JSON.stringify(result, null, 2);
+          for (const variant of variants) {
+            json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
+            json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
+              const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
+              return `${before}${replaced}${after}`;
+            });
+          }
+          const variantDeclarations = variants.filter((variant) => json.includes(`as typeof ${variant}`)).map((variant) => {
+            const keys = Object.keys(result.variants[variant]);
+            return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
+          });
+          return [...variantDeclarations, `export default ${json}`].join("\n\n");
+        }
+      });
+    }
+  }
+  writeThemeTemplate(theme);
+  templates.push({
+    filename: "ui-elements-pro.css",
+    write: true,
+    getContents: () => {
+      return `@source "./ui-elements-pro";
+
+@keyframes expand-overlay {
+  from {
+    margin: -1px;
+    min-height: calc(100% + 2px);
+    box-shadow: none;
+  }
+}
+
+.animate-expand-overlay {
+  animation: expand-overlay 200ms ease-out both;
+}
+`;
+    }
+  });
+  templates.forEach((template) => addTemplate(template));
+}
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-ui-elements-pro",
+    configKey: "uiElementsPro"
+  },
+  defaults: {
+    prefix: "UE"
+  },
+  moduleDependencies: {
+    "nuxt-ui-elements": {}
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const uiOptions = nuxt.options.ui;
+    const themeColors = uiOptions?.theme?.colors || ["primary", "secondary", "success", "info", "warning", "error"];
+    const optionsWithTheme = {
+      ...options,
+      theme: {
+        colors: themeColors
+      }
+    };
+    addTemplates(optionsWithTheme);
+    nuxt.options.css.push(resolver.resolve("./runtime/index.css"));
+    addImportsDir(resolver.resolve("./runtime/composables"));
+    nuxt.options.alias["#ui-elements-pro"] = resolver.resolve("./runtime");
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: options.prefix
+    });
+  }
+});
+
+export { module$1 as default };

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

@@ -0,0 +1,97 @@
+import type { CalendarDate, DateValue } from "@internationalized/date";
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements-pro/event-calendar";
+import type { ComponentConfig } from "nuxt-ui-elements";
+import type { CalendarEvent, CalendarDay, MonthViewOptions, WeekViewOptions, DayViewOptions, EventDropPayload } from "../types/event-calendar.js";
+type EventCalendar = ComponentConfig<typeof theme, AppConfig, "eventCalendar">;
+export interface EventCalendarProps {
+    /** Array of events to display */
+    events?: CalendarEvent[];
+    /** Currently displayed date. Controls which month/week/day is shown. Supports v-model. */
+    modelValue?: Date | string | DateValue;
+    /** Calendar view mode @defaultValue 'month' */
+    view?: "month" | "week" | "day";
+    /** Locale for day/month names @defaultValue 'en-US' */
+    locale?: string;
+    /** Day the week starts on @defaultValue 0 */
+    weekStartsOn?: 0 | 1;
+    /** Enable drag-and-drop globally @defaultValue true */
+    editable?: boolean;
+    /** Theme color for calendar chrome @defaultValue 'primary' */
+    color?: EventCalendar["variants"]["color"];
+    /** Month view options */
+    monthOptions?: MonthViewOptions;
+    /** Week view options */
+    weekOptions?: WeekViewOptions;
+    /** Day view options */
+    dayOptions?: DayViewOptions;
+    /** Slot class overrides */
+    ui?: EventCalendar["slots"];
+}
+export interface EventCalendarEmits {
+    /** Fires when the displayed date changes */
+    "update:modelValue": [value: CalendarDate];
+    /** Fires when the view changes */
+    "update:view": [value: "month" | "week" | "day"];
+    /** Fires when a date cell is clicked */
+    dateClick: [date: CalendarDate];
+    /** Fires when an event is clicked */
+    eventClick: [event: CalendarEvent];
+    /** Fires after drag-and-drop */
+    eventDrop: [payload: EventDropPayload];
+}
+export interface EventCalendarSlots {
+    header: (props: {
+        title: string;
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+        currentDate: CalendarDate;
+        view: "month" | "week" | "day";
+        setView: (v: "month" | "week" | "day") => void;
+    }) => any;
+    "day-header": (props: {
+        day: string;
+        index: number;
+    }) => any;
+    day: (props: {
+        day: CalendarDay;
+    }) => any;
+    event: (props: {
+        event: CalendarEvent;
+        view: "month" | "week" | "day";
+    }) => any;
+    "more-events": (props: {
+        events: CalendarEvent[];
+        count: number;
+        day: CalendarDay;
+    }) => any;
+    "time-label": (props: {
+        hour: number;
+        label: string;
+    }) => any;
+    "all-day": (props: {
+        events: CalendarEvent[];
+        date: CalendarDate;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CalendarDate) => any;
+    "update:view": (value: "day" | "week" | "month") => any;
+    dateClick: (date: CalendarDate) => any;
+    eventClick: (event: CalendarEvent) => any;
+    eventDrop: (payload: EventDropPayload) => any;
+}, string, import("vue").PublicProps, Readonly<EventCalendarProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CalendarDate) => any) | undefined;
+    "onUpdate:view"?: ((value: "day" | "week" | "month") => any) | undefined;
+    onDateClick?: ((date: CalendarDate) => any) | undefined;
+    onEventClick?: ((event: CalendarEvent) => any) | undefined;
+    onEventDrop?: ((payload: EventDropPayload) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};