@meistrari/chat-nuxt 1.11.0 → 1.12.0

package/dist/runtime/components/chat/conversation-list.vue

@@ -1,68 +1,55 @@
 <script setup>
-import { filterConversationsByTitle } from "../../utils/conversation-search";
-import { groupConversationsByDate } from "../../utils/format-time";
-import { exportConversationToMarkdown } from "../../utils/export-conversation";
-import { conversationListSkeletonRows } from "../../utils/conversation-list-skeleton";
+import { useConversationList } from "../../composables/useConversationList";
 const props = defineProps({
   conversations: { type: null, required: true },
   currentId: { type: String, required: false },
   getMemberImage: { type: Function, required: false },
   selectConversation: { type: Function, required: false },
   resetConversation: { type: Function, required: false },
+  startConversation: { type: Function, required: false },
   loading: { type: Boolean, required: false }
 });
-const chatApi = useChatApi();
-const { deleteConversation, renameConversation, duplicateConversation } = useConversations();
-const { setConversation } = useChat();
-const router = useRouter();
-const conversationSearch = ref("");
-const filteredConversations = computed(
-  () => filterConversationsByTitle(props.conversations, conversationSearch.value, {
-    fallbackTitle: "Nova conversa",
-    shouldInclude: (conversation) => !conversation.title && conversation.id === props.currentId
-  })
-);
-const groupedConversations = computed(() => {
-  return groupConversationsByDate(filteredConversations.value);
-});
-const hasConversationSearchQuery = computed(() => conversationSearch.value.trim().length > 0);
-async function handleDelete(id) {
-  const route = useRoute();
-  const shouldResetConversation = props.currentId === id || route.params.id === id;
-  const deleted = await deleteConversation(id);
-  if (deleted && shouldResetConversation) {
-    if (props.resetConversation) {
-      void props.resetConversation();
-    } else {
-      router.push("/");
-    }
-  }
-}
-async function handleRename(id, title) {
-  await renameConversation(id, title);
-}
-async function handleDuplicate(id) {
-  const duplicated = await duplicateConversation(id);
-  if (duplicated) {
-    setConversation(duplicated);
-    if (props.selectConversation) {
-      void props.selectConversation(duplicated.id);
-    } else {
-      router.push(`/${duplicated.id}`);
-    }
-  }
-}
-async function handleExport(id) {
-  try {
-    const conversation = await $fetch(
-      chatApi.path(`/conversations/${id}`),
-      chatApi.withChatHeaders()
-    );
-    exportConversationToMarkdown(conversation);
-  } catch (err) {
-    console.error("Failed to export conversation:", err);
-  }
-}
+const {
+  conversationSearch,
+  hasConversationContent,
+  shouldShowSkeleton,
+  emptyConversationMessage,
+  skeletonRows,
+  groupItems,
+  ungroupedConversations,
+  ungroupedDropTarget,
+  ungroupedConversationLabel,
+  shouldShowUngroupedHeader,
+  showGroupCreationPrompt,
+  showDeleteGroupModal,
+  showDeleteGroupConversationsModal,
+  groupActionLoading,
+  renameGroupName,
+  renameGroupError,
+  deleteGroupConfirmationMessage,
+  deleteGroupConversationsConfirmationMessage,
+  toggleGroup,
+  clearDeleteGroupTarget,
+  clearDeleteGroupConversationsTarget,
+  confirmDeleteGroup,
+  confirmDeleteGroupConversations,
+  cancelRenameGroup,
+  submitRenameGroup,
+  handleRenameGroupBlur,
+  setRenameGroupInputRef,
+  handleDelete,
+  handleRename,
+  handleDuplicate,
+  handleExport,
+  handleConversationDragStart,
+  clearDragState,
+  handleDragEnter,
+  handleDragOver,
+  handleDragLeave,
+  getConversationItemProps,
+  handleConversationDrop,
+  startConversationInGroup
+} = useConversationList(props);
 </script>
 
 <template>
@@ -72,14 +59,14 @@ async function handleExport(id) {
             <ChatConversationCreatorFilter />
         </div>
 
-        <div v-if="loading && conversations.length === 0" flex="~ col" gap-4px>
+        <div v-if="shouldShowSkeleton" flex="~ col" gap-4px>
             <div h-20px flex items-center pl-12px pr-4px mb-4px>
                 <TelaSkeleton rounded-4px bg-neutral-200 style="width: 68px; height: 12px;" />
             </div>
 
             <div flex="~ col" gap-1px>
                 <div
-                    v-for="row in conversationListSkeletonRows"
+                    v-for="row in skeletonRows"
                     :key="row.id"
                     flex items-center h-32px px-8px rounded-8px
                 >
@@ -88,37 +75,278 @@ async function handleExport(id) {
             </div>
         </div>
 
-        <div v-else-if="filteredConversations.length === 0" p-16px text-center>
+        <div v-else-if="!hasConversationContent" p-16px text-center>
             <p text-14px text-neutral-400>
-                {{ hasConversationSearchQuery ? "Nenhuma conversa encontrada" : "Nenhuma conversa ainda" }}
+                {{ emptyConversationMessage }}
             </p>
         </div>
 
         <template v-else>
-            <div v-for="group in groupedConversations" :key="group.title" flex="~ col" gap-4px>
-                <!-- Section Header -->
-                <div h-20px flex items-center pl-12px pr-4px mb-4px>
-                    <span text-12px font-medium text-neutral-400>
-                        {{ group.title }}
+            <div
+                v-if="showGroupCreationPrompt"
+                mx-8px
+                flex="~ col" gap-10px
+            >
+                <div h-20px flex items-center px-4px>
+                    <span text-12px font-semibold text-neutral-400 uppercase style="letter-spacing: 0">
+                        PASTAS
+                    </span>
+                </div>
+                <div flex="~ col" gap-6px>
+                    <div
+                        h-36px px-10px
+                        flex items-center gap-10px
+                        rounded-8px
+                        b=".5px dashed neutral-200"
+                    >
+                        <span i-ph-folder text-16px text-neutral-400 shrink-0 />
+                        <span h-10px w-120px rounded-full bg-neutral-100 />
+                    </div>
+                    <div
+                        h-36px px-10px
+                        flex items-center gap-10px
+                        rounded-8px
+                        b=".5px dashed neutral-200"
+                    >
+                        <span i-ph-folder text-16px text-neutral-400 shrink-0 />
+                        <span h-10px w-84px rounded-full bg-neutral-100 />
+                    </div>
+                </div>
+                <p px-4px text-14px text-neutral-500 leading-20px>
+                    Suas pastas aparecem aqui. Crie uma para começar a agrupar conversas.
+                </p>
+                <ChatConversationNewGroupButton label="Criar pasta" variant="empty-state" />
+            </div>
+
+            <div v-if="groupItems.length > 0" flex="~ col" gap-2px>
+                <div
+                    v-for="groupBucket in groupItems"
+                    :key="groupBucket.group.id"
+                    flex="~ col"
+                    rounded-8px
+                    transition-colors
+                    :class="groupBucket.dropTarget ? 'bg-neutral-200' : ''"
+                    @dragenter.prevent="handleDragEnter(groupBucket.group.id)"
+                    @dragover.prevent="handleDragOver($event, groupBucket.group.id)"
+                    @dragleave="handleDragLeave($event, groupBucket.group.id)"
+                    @drop.prevent="handleConversationDrop($event, groupBucket.group.id)"
+                >
+                    <div
+                        v-if="groupBucket.isRenaming"
+                        h-32px w-full px-8px
+                        flex items-center gap-8px
+                        rounded-8px
+                        :class="groupBucket.dropTarget ? 'bg-neutral-200' : ''"
+                    >
+                        <span
+                            i-ph-caret-right
+                            text-12px text-neutral-400
+                            transition-transform
+                            :class="groupBucket.open && 'rotate-90'"
+                        />
+                        <span
+                            :class="groupBucket.folderIcon"
+                            text-16px text-neutral-500 shrink-0
+                        />
+                        <div
+                            flex-1 min-w-0 flex items-center
+                            pb-1px
+                            b-b=".5px solid #A3A3A3"
+                            :class="renameGroupError && 'border-red-500'"
+                        >
+                            <input
+                                :ref="(element) => setRenameGroupInputRef(element, groupBucket.group.id)"
+                                v-model="renameGroupName"
+                                type="text"
+                                autocomplete="off"
+                                maxlength="80"
+                                aria-label="Nome da pasta"
+                                w-full min-w-0
+                                bg-transparent border-none outline-none
+                                text-14px font-semibold text-neutral-700 leading-18px
+                                p-0
+                                :disabled="groupActionLoading"
+                                @blur="handleRenameGroupBlur"
+                                @keydown.enter.prevent="submitRenameGroup"
+                                @keydown.escape.prevent.stop="cancelRenameGroup"
+                                @click.stop
+                                @dblclick.stop
+                            >
+                        </div>
+                    </div>
+
+                    <div v-else rounded-8px class="group" :class="groupBucket.dropTarget ? '' : 'hover:bg-neutral-100'">
+                        <div h-32px w-full px-8px flex items-center gap-4px text-left>
+                            <button
+                                type="button"
+                                h-full flex-1 min-w-0
+                                flex items-center gap-8px
+                                text-left
+                                cursor-pointer
+                                @click="toggleGroup(groupBucket.group.id)"
+                            >
+                                <span
+                                    i-ph-caret-right
+                                    text-12px text-neutral-400
+                                    transition-transform
+                                    :class="groupBucket.open && 'rotate-90'"
+                                />
+                                <span
+                                    :class="groupBucket.folderIcon"
+                                    text-16px text-neutral-500 shrink-0
+                                />
+                                <span flex-1 min-w-0 truncate text-14px font-semibold text-neutral-900 leading-18px>
+                                    {{ groupBucket.group.name }}
+                                </span>
+                                <span v-if="groupBucket.conversationCountLabel" text-13px font-medium text-neutral-400 tabular-nums>
+                                    {{ groupBucket.conversationCountLabel }}
+                                </span>
+                            </button>
+
+                            <div
+                                flex items-center justify-center shrink-0
+                                class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity"
+                            >
+                                <TelaDropdownMenu
+                                    :items="groupBucket.menuItems"
+                                    align="end"
+                                    content-class="chat-sidebar-floating"
+                                >
+                                    <button
+                                        type="button"
+                                        aria-label="Ações da pasta"
+                                        p-4px
+                                        rounded-6px
+                                        hover:bg-neutral-200
+                                        transition-colors
+                                        cursor-pointer
+                                        @click.prevent.stop
+                                    >
+                                        <div i-ph-dots-three-vertical text-16px text-neutral-400 />
+                                    </button>
+                                </TelaDropdownMenu>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        v-if="groupBucket.isRenaming && renameGroupError"
+                        ml-44px mr-8px mb-4px
+                    >
+                        <span text-12px text-red-600 leading-16px aria-live="polite">
+                            {{ renameGroupError }}
+                        </span>
+                    </div>
+
+                    <Transition name="group-slide">
+                        <div v-if="groupBucket.open" class="group-slide-panel">
+                            <div class="group-slide__inner">
+                                <div flex="~ col" gap-1px ml-20px mt-1px mb-4px>
+                                    <ChatConversationItem
+                                        v-for="conversation in groupBucket.items"
+                                        :key="conversation.id"
+                                        v-bind="getConversationItemProps(conversation)"
+                                        @delete="handleDelete"
+                                        @rename="handleRename"
+                                        @duplicate="handleDuplicate"
+                                        @export="handleExport"
+                                        @drag-start="handleConversationDragStart"
+                                        @drag-end="clearDragState"
+                                    />
+                                    <button
+                                        v-if="groupBucket.showNewConversationAction"
+                                        type="button"
+                                        h-32px px-8px
+                                        flex items-center gap-8px
+                                        rounded-8px
+                                        text-left
+                                        hover:bg-neutral-100
+                                        transition-colors
+                                        cursor-pointer
+                                        @click="startConversationInGroup(groupBucket.group.id)"
+                                    >
+                                        <span i-ph-plus text-14px text-neutral-500 shrink-0 />
+                                        <span text-14px font-medium text-neutral-500 leading-18px>
+                                            Nova conversa
+                                        </span>
+                                    </button>
+                                    <div
+                                        v-else-if="groupBucket.showSearchEmpty"
+                                        h-32px px-8px flex items-center
+                                    >
+                                        <span text-13px text-neutral-400 leading-17px>
+                                            Sem resultados
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </Transition>
+                </div>
+            </div>
+
+            <div
+                flex="~ col" gap-4px
+                rounded-8px
+                transition-colors
+                :class="ungroupedDropTarget ? 'bg-neutral-100' : ''"
+                @dragenter.prevent="handleDragEnter(null)"
+                @dragover.prevent="handleDragOver($event, null)"
+                @dragleave="handleDragLeave($event, null)"
+                @drop.prevent="handleConversationDrop($event, null)"
+            >
+                <div v-if="shouldShowUngroupedHeader" h-20px flex items-center pl-12px pr-4px mb-4px>
+                    <span text-12px font-semibold text-neutral-400 uppercase style="letter-spacing: 0">
+                        {{ ungroupedConversationLabel }}
                     </span>
                 </div>
 
-                <!-- Conversation Items -->
-                <div flex="~ col" gap-1px>
+                <div v-if="ungroupedConversations.length > 0" flex="~ col" gap-1px>
                     <ChatConversationItem
-                        v-for="conversation in group.items"
+                        v-for="conversation in ungroupedConversations"
                         :key="conversation.id"
-                        :conversation="conversation"
-                        :active="conversation.id === currentId"
-                        :user-image="getMemberImage?.(conversation.userId)"
-                        :select-conversation="selectConversation"
+                        v-bind="getConversationItemProps(conversation)"
                         @delete="handleDelete"
                         @rename="handleRename"
                         @duplicate="handleDuplicate"
                         @export="handleExport"
+                        @drag-start="handleConversationDragStart"
+                        @drag-end="clearDragState"
                     />
                 </div>
             </div>
         </template>
     </div>
+
+    <TelaConfirmationModal
+        v-model:open="showDeleteGroupModal"
+        title="Excluir pasta"
+        variant="danger"
+        class="chat-sidebar-floating"
+        confirm-button-text="Excluir pasta"
+        cancel-button-text="Cancelar"
+        :loading="groupActionLoading"
+        @confirm="confirmDeleteGroup"
+        @cancel="clearDeleteGroupTarget"
+    >
+        {{ deleteGroupConfirmationMessage }}
+    </TelaConfirmationModal>
+
+    <TelaConfirmationModal
+        v-model:open="showDeleteGroupConversationsModal"
+        title="Excluir conversas"
+        variant="danger"
+        class="chat-sidebar-floating"
+        confirm-button-text="Excluir conversas"
+        cancel-button-text="Cancelar"
+        :loading="groupActionLoading"
+        @confirm="confirmDeleteGroupConversations"
+        @cancel="clearDeleteGroupConversationsTarget"
+    >
+        {{ deleteGroupConversationsConfirmationMessage }}
+    </TelaConfirmationModal>
 </template>
+
+<style scoped>
+.group-slide-panel{display:grid;grid-template-rows:1fr}.group-slide-enter-active,.group-slide-leave-active{overflow:hidden;transition:grid-template-rows .18s cubic-bezier(.2,.8,.2,1),opacity .14s ease,transform .18s cubic-bezier(.2,.8,.2,1)}.group-slide-enter-from,.group-slide-leave-to{grid-template-rows:0fr;opacity:0;transform:translateY(-4px)}.group-slide-enter-to,.group-slide-leave-from{grid-template-rows:1fr;opacity:1;transform:translateY(0)}.group-slide__inner{min-height:0;overflow:hidden}
+</style>

package/dist/runtime/components/chat/conversation-list.vue.d.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     getMemberImage?: (userId: string) => string | undefined;
     selectConversation?: (id: string) => void | Promise<void>;
     resetConversation?: () => void | Promise<void>;
+    startConversation?: (groupId?: string | null) => void | Promise<void>;
     loading?: boolean;
 };
 declare const __VLS_export: 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>;

package/dist/runtime/components/chat/conversation-new-group-button.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    label?: string;
+    variant?: 'empty-state';
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/conversation-new-group-button.vue

@@ -0,0 +1,90 @@
+<script setup>
+import ChatConversationNewGroupPopoverContent from "./conversation-new-group-popover-content.vue";
+const props = defineProps({
+  label: { type: String, required: false },
+  variant: { type: String, required: false }
+});
+const { createGroup, error: groupCreationError } = useConversationGroups();
+const isOpen = ref(false);
+const groupName = ref("");
+const isSaving = ref(false);
+const creationErrorMessage = ref(null);
+const popoverContentRef = ref(null);
+const hasLabel = computed(() => Boolean(props.label?.trim()));
+const isEmptyState = computed(() => props.variant === "empty-state");
+const buttonClasses = computed(() => {
+  if (isEmptyState.value)
+    return "h-32px w-full gap-6px px-12px border-neutral-300 hover:bg-neutral-50";
+  if (hasLabel.value)
+    return "h-28px px-10px gap-6px self-start border-neutral-300 hover:bg-neutral-50";
+  return "h-32px w-40px border-neutral-300 hover:bg-neutral-50";
+});
+const iconClasses = computed(() => isEmptyState.value ? "text-neutral-900" : "text-neutral-700");
+const labelClasses = computed(
+  () => isEmptyState.value ? "text-14px font-semibold text-neutral-900 leading-18px" : "text-13px font-medium text-neutral-700 leading-17px"
+);
+watch(isOpen, async (open) => {
+  if (!open) {
+    creationErrorMessage.value = null;
+    return;
+  }
+  await nextTick();
+  popoverContentRef.value?.focusInput?.();
+});
+watch(groupName, () => {
+  creationErrorMessage.value = null;
+});
+async function submitGroup() {
+  const name = groupName.value.trim();
+  if (!name || isSaving.value)
+    return;
+  creationErrorMessage.value = null;
+  isSaving.value = true;
+  const group = await createGroup(name);
+  isSaving.value = false;
+  if (!group) {
+    creationErrorMessage.value = groupCreationError.value || "Erro ao criar pasta";
+    return;
+  }
+  groupName.value = "";
+  creationErrorMessage.value = null;
+  isOpen.value = false;
+}
+function cancelGroup() {
+  groupName.value = "";
+  creationErrorMessage.value = null;
+  isOpen.value = false;
+}
+</script>
+
+<template>
+    <TelaPopover v-model:open="isOpen">
+        <TelaPopoverTrigger as-child>
+            <button
+                type="button"
+                flex items-center justify-center
+                bg-white b=".5px solid"
+                rounded-10px
+                transition-colors
+                cursor-pointer
+                :class="buttonClasses"
+                :aria-label="label || 'Nova pasta'"
+                :title="label || 'Nova pasta'"
+            >
+                <span i-ph-folder-plus text-16px :class="iconClasses" />
+                <span v-if="hasLabel" :class="labelClasses">
+                    {{ label }}
+                </span>
+            </button>
+        </TelaPopoverTrigger>
+
+        <ChatConversationNewGroupPopoverContent
+            ref="popoverContentRef"
+            v-model="groupName"
+            :error-message="creationErrorMessage"
+            :saving="isSaving"
+            @submit="submitGroup"
+            @cancel="cancelGroup"
+        />
+    </TelaPopover>
+</template>

package/dist/runtime/components/chat/conversation-new-group-button.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    label?: string;
+    variant?: 'empty-state';
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/conversation-new-group-popover-content.d.vue.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    errorMessage?: string | null;
+    saving?: boolean;
+};
+declare function focusInput(): void;
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focusInput: typeof focusInput;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+} & {
+    submit: () => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/conversation-new-group-popover-content.vue

@@ -0,0 +1,75 @@
+<script setup>
+defineProps({
+  errorMessage: { type: [String, null], required: false },
+  saving: { type: Boolean, required: false }
+});
+const emit = defineEmits(["submit", "cancel"]);
+const groupName = defineModel({ type: String, ...{ required: true } });
+const inputRef = ref(null);
+function focusInput() {
+  inputRef.value?.focus();
+}
+defineExpose({
+  focusInput
+});
+</script>
+
+<template>
+    <TelaPopoverContent
+        align="end"
+        :side-offset="4"
+        data-chat-sidebar-floating
+        class="!w-auto !rounded-12px !border-neutral-200 !bg-white !p-0 !text-neutral-900 !shadow-lg"
+    >
+        <form w-236px p-8px flex="~ col" gap-8px @submit.prevent="emit('submit')">
+            <input
+                ref="inputRef"
+                v-model="groupName"
+                type="text"
+                autocomplete="off"
+                maxlength="80"
+                placeholder="Nome da pasta"
+                aria-label="Nome da pasta"
+                h-32px w-full
+                px-10px
+                rounded-8px
+                b=".5px neutral-300"
+                bg-white
+                outline-none
+                text-14px text-neutral-900 leading-18px
+                focus:b-neutral-900
+                @keydown.escape.prevent.stop="emit('cancel')"
+            >
+            <p
+                v-if="errorMessage"
+                text-12px text-red-600 leading-16px
+                aria-live="polite"
+            >
+                {{ errorMessage }}
+            </p>
+            <div flex justify-end gap-6px>
+                <button
+                    type="button"
+                    h-28px px-10px rounded-8px
+                    text-13px font-medium text-neutral-700
+                    hover:bg-neutral-100
+                    transition-colors
+                    @click="emit('cancel')"
+                >
+                    Cancelar
+                </button>
+                <button
+                    type="submit"
+                    h-28px px-10px rounded-8px
+                    bg-neutral-900 text-white
+                    text-13px font-medium
+                    transition-opacity
+                    :disabled="!groupName.trim() || saving"
+                    :class="(!groupName.trim() || saving) && 'opacity-40 cursor-not-allowed'"
+                >
+                    Criar
+                </button>
+            </div>
+        </form>
+    </TelaPopoverContent>
+</template>

package/dist/runtime/components/chat/conversation-new-group-popover-content.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    errorMessage?: string | null;
+    saving?: boolean;
+};
+declare function focusInput(): void;
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focusInput: typeof focusInput;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+} & {
+    submit: () => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;