nuxt-ui-elements-pro 0.1.10 → 0.1.11

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

@@ -0,0 +1,138 @@
+import type { AppConfig } from "@nuxt/schema";
+import type { ComponentConfig } from "nuxt-ui-elements";
+import type { DateValue } from "@internationalized/date";
+import type { GanttTask, GanttDependency, GanttZoomLevel, GanttTaskBar, GanttTaskDropPayload, GanttTaskResizePayload, GanttChartContext } from "../types/gantt-chart.js";
+import { type Component } from "vue";
+import theme from "#build/ui-elements-pro/gantt-chart";
+type GanttChartTheme = ComponentConfig<typeof theme, AppConfig, "ganttChart">;
+export interface GanttChartProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+    /** Array of tasks to display */
+    tasks?: GanttTask[];
+    /** Array of task dependencies */
+    dependencies?: GanttDependency[];
+    /** Displayed date (v-model) */
+    modelValue?: Date | string | DateValue;
+    /** Current zoom level (v-model:zoomLevel) @defaultValue 'month' */
+    zoomLevel?: GanttZoomLevel;
+    /** Available zoom levels @defaultValue all levels */
+    zoomLevels?: GanttZoomLevel[];
+    /** Locale for formatting @defaultValue 'en-US' */
+    locale?: string;
+    /** Enable drag/drop and resize @defaultValue true */
+    editable?: boolean;
+    /** Show loading state @defaultValue false */
+    loading?: boolean;
+    /** Theme color @defaultValue 'primary' */
+    color?: GanttChartTheme["variants"]["color"];
+    /** Row height in pixels @defaultValue 40 */
+    rowHeight?: number;
+    /** Two-way binding for expanded group IDs */
+    expanded?: (string | number)[];
+    /** Slot class overrides */
+    ui?: GanttChartTheme["slots"];
+}
+export interface GanttChartEmits {
+    /** Fires when displayed date changes */
+    "update:modelValue": [value: import("@internationalized/date").CalendarDate];
+    /** Fires when zoom level changes */
+    "update:zoomLevel": [value: GanttZoomLevel];
+    /** Fires when expanded group IDs change */
+    "update:expanded": [value: (string | number)[]];
+    /** Fires when a task is clicked */
+    "taskClick": [task: GanttTask];
+    /** Fires when a task is moved via drag */
+    "taskDrop": [payload: GanttTaskDropPayload];
+    /** Fires when a task is resized */
+    "taskResize": [payload: GanttTaskResizePayload];
+}
+export interface GanttChartSlots {
+    /** Compound mode: full rendering control */
+    default?: (props: GanttChartContext) => any;
+    /** Custom header rendering */
+    header?: (props: {
+        title: string;
+        zoomLevel: GanttZoomLevel;
+        setZoomLevel: (l: GanttZoomLevel) => void;
+    }) => any;
+    /** Custom header title */
+    "header-title"?: (props: {
+        title: string;
+    }) => any;
+    /** Custom navigation buttons */
+    "header-nav"?: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Custom zoom level switcher */
+    "zoom-switcher"?: (props: {
+        zoomLevel: GanttZoomLevel;
+        setZoomLevel: (l: GanttZoomLevel) => void;
+        zoomLevels: GanttZoomLevel[];
+    }) => any;
+    /** Custom task bar rendering */
+    "task-bar"?: (props: {
+        task: GanttTask;
+        bar: GanttTaskBar;
+    }) => any;
+    /** Custom milestone rendering */
+    milestone?: (props: {
+        task: GanttTask;
+        bar: GanttTaskBar;
+    }) => any;
+    /** Custom group header rendering */
+    "group-header"?: (props: {
+        task: GanttTask;
+        bar: GanttTaskBar;
+        expanded: boolean;
+        toggle: () => void;
+    }) => any;
+    /** Custom today marker */
+    "today-marker"?: () => any;
+    /** Custom dependency arrow rendering */
+    dependency?: (props: {
+        paths: import("../types/gantt-chart.js").GanttDependencyPath[];
+    }) => any;
+    /** Custom loading state */
+    loading?: () => any;
+    /** Custom empty state */
+    empty?: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<GanttChartProps, {
+    expandAll: () => void;
+    collapseAll: () => void;
+    toggleExpand: (id: string | number) => void;
+    scrollToDate: (date: import("@internationalized/date").CalendarDate) => void;
+    scrollToTask: (taskId: string | number) => void;
+    layout: import("vue").ComputedRef<import("../types/gantt-chart.js").GanttLayout>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("@internationalized/date").CalendarDate) => any;
+    "update:zoomLevel": (value: GanttZoomLevel) => any;
+    "update:expanded": (value: (string | number)[]) => any;
+    taskClick: (task: GanttTask) => any;
+    taskDrop: (payload: GanttTaskDropPayload) => any;
+    taskResize: (payload: GanttTaskResizePayload) => any;
+}, string, import("vue").PublicProps, Readonly<GanttChartProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("@internationalized/date").CalendarDate) => any) | undefined;
+    "onUpdate:zoomLevel"?: ((value: GanttZoomLevel) => any) | undefined;
+    "onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
+    onTaskClick?: ((task: GanttTask) => any) | undefined;
+    onTaskDrop?: ((payload: GanttTaskDropPayload) => any) | undefined;
+    onTaskResize?: ((payload: GanttTaskResizePayload) => any) | undefined;
+}>, {
+    editable: boolean;
+    loading: boolean;
+    locale: string;
+    zoomLevel: GanttZoomLevel;
+    zoomLevels: GanttZoomLevel[];
+    rowHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, GanttChartSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/GanttChart.vue

@@ -0,0 +1,206 @@
+<script>
+import { Primitive } from "reka-ui";
+import { computed, provide, useSlots } from "vue";
+import { tv } from "../utils/tv";
+import { useGanttChart } from "../composables/useGanttChart";
+import { useGanttChartDragDrop } from "../composables/useGanttChartDragDrop";
+import { useGanttChartResize } from "../composables/useGanttChartResize";
+import { useGanttChartKeyboard } from "../composables/useGanttChartKeyboard";
+import { ganttChartContextKey } from "../composables/useGanttChartContext";
+import { DEFAULT_ROW_HEIGHT } from "../utils/gantt-chart";
+import GanttChartHeader from "./gantt-chart/GanttChartHeader.vue";
+import GanttChartTimeline from "./gantt-chart/GanttChartTimeline.vue";
+import theme from "#build/ui-elements-pro/gantt-chart";
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false },
+  tasks: { type: Array, required: false },
+  dependencies: { type: Array, required: false },
+  modelValue: { type: null, required: false },
+  zoomLevel: { type: String, required: false, default: "month" },
+  zoomLevels: { type: Array, required: false, default: () => ["day", "week", "month", "quarter", "year"] },
+  locale: { type: String, required: false, default: "en-US" },
+  editable: { type: Boolean, required: false, default: true },
+  loading: { type: Boolean, required: false, default: false },
+  color: { type: null, required: false },
+  rowHeight: { type: Number, required: false, default: DEFAULT_ROW_HEIGHT },
+  expanded: { type: Array, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:zoomLevel", "update:expanded", "taskClick", "taskDrop", "taskResize"]);
+defineSlots();
+const slots = useSlots();
+const ui = computed(
+  () => tv({
+    extend: tv(theme)
+  })({
+    color: props.color ?? "primary"
+  })
+);
+const ganttChart = useGanttChart({
+  tasks: () => props.tasks ?? [],
+  dependencies: () => props.dependencies ?? [],
+  modelValue: () => props.modelValue,
+  zoomLevel: () => props.zoomLevel,
+  zoomLevels: () => props.zoomLevels,
+  locale: () => props.locale,
+  rowHeight: () => props.rowHeight,
+  expanded: () => props.expanded,
+  onUpdateModelValue: (date) => emit("update:modelValue", date),
+  onUpdateZoomLevel: (level) => emit("update:zoomLevel", level),
+  onUpdateExpanded: (ids) => emit("update:expanded", ids)
+});
+const dragDrop = useGanttChartDragDrop({
+  editable: () => props.editable,
+  layout: ganttChart.layout,
+  zoomLevel: ganttChart.zoomLevel,
+  unitWidth: ganttChart.unitWidth,
+  dateToPixel: ganttChart.dateToPixel,
+  pixelToDate: ganttChart.pixelToDate,
+  onTaskDrop: (payload) => emit("taskDrop", payload)
+});
+const resize = useGanttChartResize({
+  editable: () => props.editable,
+  zoomLevel: ganttChart.zoomLevel,
+  unitWidth: ganttChart.unitWidth,
+  dateToPixel: ganttChart.dateToPixel,
+  pixelToDate: ganttChart.pixelToDate,
+  onTaskResize: (payload) => emit("taskResize", payload)
+});
+const flatVisibleTaskBars = computed(() => ganttChart.layout.value.taskBars);
+const keyboard = useGanttChartKeyboard({
+  flatVisibleTasks: flatVisibleTaskBars,
+  expandedIds: ganttChart.expandedIds,
+  toggleExpand: ganttChart.toggleExpand,
+  scrollToTask: ganttChart.scrollToTask
+});
+function handleTaskClick(task, _e) {
+  emit("taskClick", task.original);
+}
+const ctx = {
+  zoomLevel: ganttChart.zoomLevel,
+  locale: computed(() => props.locale),
+  editable: computed(() => props.editable),
+  loading: computed(() => props.loading),
+  color: computed(() => props.color ?? "primary"),
+  layout: ganttChart.layout,
+  rowHeight: ganttChart.rowHeight,
+  timelineStart: ganttChart.timelineStart,
+  timelineEnd: ganttChart.timelineEnd,
+  headerTitle: ganttChart.headerTitle,
+  goToPrev: ganttChart.goToPrev,
+  goToNext: ganttChart.goToNext,
+  goToToday: ganttChart.goToToday,
+  setZoomLevel: ganttChart.setZoomLevel,
+  scrollToDate: ganttChart.scrollToDate,
+  scrollToTask: ganttChart.scrollToTask,
+  zoomLevels: ganttChart.zoomLevels,
+  expandedIds: ganttChart.expandedIds,
+  toggleExpand: ganttChart.toggleExpand,
+  expandAll: ganttChart.expandAll,
+  collapseAll: ganttChart.collapseAll,
+  isExpanded: ganttChart.isExpanded,
+  handleTaskClick,
+  getTaskStyle: ganttChart.getTaskStyle,
+  draggedTaskId: dragDrop.draggedTaskId,
+  dragPreview: dragDrop.dragPreview,
+  onDragStart: dragDrop.onDragStart,
+  resizingTaskId: resize.resizingTaskId,
+  resizeEdge: resize.resizeEdge,
+  resizePreview: resize.resizePreview,
+  onResizePointerDown: resize.onResizePointerDown,
+  focusedTaskId: keyboard.focusedTaskId,
+  onKeydown: keyboard.onKeydown,
+  dateToPixel: ganttChart.dateToPixel,
+  pixelToDate: ganttChart.pixelToDate,
+  ui,
+  propUi: computed(() => props.ui)
+};
+provide(ganttChartContextKey, ctx);
+defineExpose({
+  expandAll: ganttChart.expandAll,
+  collapseAll: ganttChart.collapseAll,
+  toggleExpand: ganttChart.toggleExpand,
+  scrollToDate: ganttChart.scrollToDate,
+  scrollToTask: ganttChart.scrollToTask,
+  layout: ganttChart.layout
+});
+</script>
+
+<template>
+  <Primitive
+    :as="props.as ?? 'div'"
+    data-slot="root"
+    :class="ui.root({ class: props.ui?.root })"
+    role="treegrid"
+    aria-label="Gantt chart"
+    tabindex="0"
+    @keydown="ctx.onKeydown"
+  >
+    <!-- Compound mode: user provides #default and owns rendering -->
+    <slot v-if="slots.default" v-bind="ctx" />
+
+    <!-- Auto mode: render everything with slot forwarding -->
+    <template v-else>
+      <slot name="header" :title="ctx.headerTitle.value" :zoom-level="ctx.zoomLevel.value" :set-zoom-level="ctx.setZoomLevel">
+        <GanttChartHeader>
+          <template v-if="slots['header-title']" #title="titleProps">
+            <slot name="header-title" v-bind="titleProps" />
+          </template>
+          <template v-if="slots['zoom-switcher']" #zoom-switcher="zoomProps">
+            <slot name="zoom-switcher" v-bind="zoomProps" />
+          </template>
+          <template v-if="slots['header-nav']" #nav="navProps">
+            <slot name="header-nav" v-bind="navProps" />
+          </template>
+        </GanttChartHeader>
+      </slot>
+
+      <div
+        v-if="ganttChart.layout.value.taskBars.length > 0"
+        :ref="(el) => {
+  ganttChart.bodyEl.value = el;
+}"
+        data-slot="body"
+        :class="ui.body({ class: props.ui?.body })"
+      >
+        <GanttChartTimeline>
+          <template v-if="slots['task-bar']" #task-bar="barProps">
+            <slot name="task-bar" v-bind="barProps" />
+          </template>
+          <template v-if="slots.milestone" #milestone="msProps">
+            <slot name="milestone" v-bind="msProps" />
+          </template>
+          <template v-if="slots['group-header']" #group-header="ghProps">
+            <slot name="group-header" v-bind="ghProps" />
+          </template>
+          <template v-if="slots['today-marker']" #today-marker>
+            <slot name="today-marker" />
+          </template>
+          <template v-if="slots.dependency" #dependency="depProps">
+            <slot name="dependency" v-bind="depProps" />
+          </template>
+        </GanttChartTimeline>
+      </div>
+
+      <slot v-else name="empty">
+        <div data-slot="emptyState" :class="ui.emptyState({ class: props.ui?.emptyState })">
+          <p :class="ui.emptyStateText({ class: props.ui?.emptyStateText })">No tasks to display</p>
+        </div>
+      </slot>
+
+      <!-- Loading overlay -->
+      <div
+        v-if="props.loading"
+        data-slot="loadingOverlay"
+        :class="ui.loadingOverlay({ class: props.ui?.loadingOverlay })"
+      >
+        <slot name="loading">
+          <UIcon name="i-lucide-loader-2" class="size-8 text-muted animate-spin" />
+        </slot>
+      </div>
+    </template>
+  </Primitive>
+</template>

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

@@ -0,0 +1,138 @@
+import type { AppConfig } from "@nuxt/schema";
+import type { ComponentConfig } from "nuxt-ui-elements";
+import type { DateValue } from "@internationalized/date";
+import type { GanttTask, GanttDependency, GanttZoomLevel, GanttTaskBar, GanttTaskDropPayload, GanttTaskResizePayload, GanttChartContext } from "../types/gantt-chart.js";
+import { type Component } from "vue";
+import theme from "#build/ui-elements-pro/gantt-chart";
+type GanttChartTheme = ComponentConfig<typeof theme, AppConfig, "ganttChart">;
+export interface GanttChartProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+    /** Array of tasks to display */
+    tasks?: GanttTask[];
+    /** Array of task dependencies */
+    dependencies?: GanttDependency[];
+    /** Displayed date (v-model) */
+    modelValue?: Date | string | DateValue;
+    /** Current zoom level (v-model:zoomLevel) @defaultValue 'month' */
+    zoomLevel?: GanttZoomLevel;
+    /** Available zoom levels @defaultValue all levels */
+    zoomLevels?: GanttZoomLevel[];
+    /** Locale for formatting @defaultValue 'en-US' */
+    locale?: string;
+    /** Enable drag/drop and resize @defaultValue true */
+    editable?: boolean;
+    /** Show loading state @defaultValue false */
+    loading?: boolean;
+    /** Theme color @defaultValue 'primary' */
+    color?: GanttChartTheme["variants"]["color"];
+    /** Row height in pixels @defaultValue 40 */
+    rowHeight?: number;
+    /** Two-way binding for expanded group IDs */
+    expanded?: (string | number)[];
+    /** Slot class overrides */
+    ui?: GanttChartTheme["slots"];
+}
+export interface GanttChartEmits {
+    /** Fires when displayed date changes */
+    "update:modelValue": [value: import("@internationalized/date").CalendarDate];
+    /** Fires when zoom level changes */
+    "update:zoomLevel": [value: GanttZoomLevel];
+    /** Fires when expanded group IDs change */
+    "update:expanded": [value: (string | number)[]];
+    /** Fires when a task is clicked */
+    "taskClick": [task: GanttTask];
+    /** Fires when a task is moved via drag */
+    "taskDrop": [payload: GanttTaskDropPayload];
+    /** Fires when a task is resized */
+    "taskResize": [payload: GanttTaskResizePayload];
+}
+export interface GanttChartSlots {
+    /** Compound mode: full rendering control */
+    default?: (props: GanttChartContext) => any;
+    /** Custom header rendering */
+    header?: (props: {
+        title: string;
+        zoomLevel: GanttZoomLevel;
+        setZoomLevel: (l: GanttZoomLevel) => void;
+    }) => any;
+    /** Custom header title */
+    "header-title"?: (props: {
+        title: string;
+    }) => any;
+    /** Custom navigation buttons */
+    "header-nav"?: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Custom zoom level switcher */
+    "zoom-switcher"?: (props: {
+        zoomLevel: GanttZoomLevel;
+        setZoomLevel: (l: GanttZoomLevel) => void;
+        zoomLevels: GanttZoomLevel[];
+    }) => any;
+    /** Custom task bar rendering */
+    "task-bar"?: (props: {
+        task: GanttTask;
+        bar: GanttTaskBar;
+    }) => any;
+    /** Custom milestone rendering */
+    milestone?: (props: {
+        task: GanttTask;
+        bar: GanttTaskBar;
+    }) => any;
+    /** Custom group header rendering */
+    "group-header"?: (props: {
+        task: GanttTask;
+        bar: GanttTaskBar;
+        expanded: boolean;
+        toggle: () => void;
+    }) => any;
+    /** Custom today marker */
+    "today-marker"?: () => any;
+    /** Custom dependency arrow rendering */
+    dependency?: (props: {
+        paths: import("../types/gantt-chart.js").GanttDependencyPath[];
+    }) => any;
+    /** Custom loading state */
+    loading?: () => any;
+    /** Custom empty state */
+    empty?: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<GanttChartProps, {
+    expandAll: () => void;
+    collapseAll: () => void;
+    toggleExpand: (id: string | number) => void;
+    scrollToDate: (date: import("@internationalized/date").CalendarDate) => void;
+    scrollToTask: (taskId: string | number) => void;
+    layout: import("vue").ComputedRef<import("../types/gantt-chart.js").GanttLayout>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("@internationalized/date").CalendarDate) => any;
+    "update:zoomLevel": (value: GanttZoomLevel) => any;
+    "update:expanded": (value: (string | number)[]) => any;
+    taskClick: (task: GanttTask) => any;
+    taskDrop: (payload: GanttTaskDropPayload) => any;
+    taskResize: (payload: GanttTaskResizePayload) => any;
+}, string, import("vue").PublicProps, Readonly<GanttChartProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("@internationalized/date").CalendarDate) => any) | undefined;
+    "onUpdate:zoomLevel"?: ((value: GanttZoomLevel) => any) | undefined;
+    "onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
+    onTaskClick?: ((task: GanttTask) => any) | undefined;
+    onTaskDrop?: ((payload: GanttTaskDropPayload) => any) | undefined;
+    onTaskResize?: ((payload: GanttTaskResizePayload) => any) | undefined;
+}>, {
+    editable: boolean;
+    loading: boolean;
+    locale: string;
+    zoomLevel: GanttZoomLevel;
+    zoomLevels: GanttZoomLevel[];
+    rowHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, GanttChartSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/event-calendar/EventCalendarTimeGrid.vue

@@ -1,6 +1,6 @@
 <script>
 import { Primitive } from "reka-ui";
-import {} from "vue";
+import { ref, onMounted, watch, nextTick } from "vue";
 import { useEventCalendarContext } from "../../composables/useEventCalendarContext";
 import { format } from "#std/date";
 </script>
@@ -11,6 +11,26 @@ const props = defineProps({
 });
 defineSlots();
 const ctx = useEventCalendarContext();
+const timeGridEl = ref(null);
+function scrollToTime() {
+  const el = timeGridEl.value;
+  if (!el) return;
+  const config = ctx.view.value === "day" ? ctx.dayConfig.value : ctx.weekConfig.value;
+  const scrollTime = config.scrollTime;
+  if (scrollTime == null) return;
+  const clampedScrollTime = Math.max(config.startHour, Math.min(scrollTime, config.endHour - 1));
+  const slotsPerHour = 60 / config.slotDuration;
+  const offsetHours = clampedScrollTime - config.startHour;
+  el.scrollTop = offsetHours * slotsPerHour * ctx.SLOT_HEIGHT;
+}
+onMounted(() => {
+  nextTick(scrollToTime);
+});
+watch(() => ctx.view.value, (v) => {
+  if (v === "week" || v === "day") {
+    nextTick(scrollToTime);
+  }
+});
 </script>
 
 <template>
@@ -163,8 +183,8 @@ const ctx = useEventCalendarContext();
     </div>
 
     <!-- Time grid -->
-    <div class="relative">
-    <div data-slot="timeGrid" :class="ctx.ui.value.timeGrid({ class: ctx.propUi.value?.timeGrid })" @selectstart.prevent>
+    <div data-slot="timeGridWrapper" :class="ctx.ui.value.timeGridWrapper({ class: ctx.propUi.value?.timeGridWrapper })">
+    <div ref="timeGridEl" data-slot="timeGrid" :class="ctx.ui.value.timeGrid({ class: ctx.propUi.value?.timeGrid })" @selectstart.prevent>
       <!-- Time gutter -->
       <div data-slot="timeGutter" :class="ctx.ui.value.timeGutter({ class: ctx.propUi.value?.timeGutter })">
         <div

package/dist/runtime/components/feedback-widget/FeedbackWidgetButton.d.vue.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    icon: string;
+    label: string;
+};
+declare var __VLS_1: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    isOpen: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/feedback-widget/FeedbackWidgetButton.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { useFeedbackWidgetContext } from "../../composables/useFeedbackWidgetContext";
+defineProps({
+  icon: { type: String, required: true },
+  label: { type: String, required: true }
+});
+const ctx = useFeedbackWidgetContext();
+</script>
+
+<template>
+  <slot
+    :open="ctx.open"
+    :close="ctx.close"
+    :toggle="ctx.toggle"
+    :is-open="ctx.isOpen.value"
+  >
+    <button
+      type="button"
+      data-slot="button"
+      :class="ctx.ui.value.button({ class: ctx.propUi.value?.button })"
+      :aria-label="label"
+      @click="ctx.toggle"
+    >
+      <UIcon :name="icon" :class="ctx.ui.value.buttonIcon({ class: ctx.propUi.value?.buttonIcon })" />
+    </button>
+  </slot>
+</template>

package/dist/runtime/components/feedback-widget/FeedbackWidgetButton.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    icon: string;
+    label: string;
+};
+declare var __VLS_1: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    isOpen: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/feedback-widget/FeedbackWidgetPanel.d.vue.ts

@@ -0,0 +1,42 @@
+type __VLS_Props = {
+    title: string;
+};
+declare var __VLS_1: {
+    reset: () => void;
+    close: () => void;
+}, __VLS_16: {
+    title: string;
+    close: () => void;
+}, __VLS_25: {
+    types: import("../../types/feedback-widget.js").FeedbackType[];
+    selected: (string & {}) | null;
+    select: (id: string) => string;
+}, __VLS_32: {
+    email: string;
+    message: string;
+    screenshot: string | null;
+}, __VLS_69: {
+    submit: () => Promise<void>;
+    isValid: boolean;
+    isSubmitting: boolean;
+};
+type __VLS_Slots = {} & {
+    success?: (props: typeof __VLS_1) => any;
+} & {
+    header?: (props: typeof __VLS_16) => any;
+} & {
+    'type-selector'?: (props: typeof __VLS_25) => any;
+} & {
+    form?: (props: typeof __VLS_32) => any;
+} & {
+    'submit-area'?: (props: typeof __VLS_69) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};