@meistrari/chat-nuxt 1.11.0 → 1.12.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -180,6 +180,10 @@ const DEFAULT_FEATURES = {
   credentials: false
 };
 const VUE_COMPONENT_EXTENSIONS = [".vue"];
+const DYNAMIC_ICON_SAFELIST = [
+  "i-ph-folder-minus",
+  "i-ph-folder-open"
+];
 function resolveChatAuthMode(runtimeConfig) {
   const publicConfig = runtimeConfig.public;
   const telaAuth = publicConfig?.telaAuth;
@@ -283,6 +287,16 @@ function ensureIconifyPackages(consumerRoot) {
     }
   }
 }
+function ensureDynamicIconSafelist(nuxtOptions) {
+  const unocssOptions = nuxtOptions.unocss ||= {};
+  const currentSafelist = Array.isArray(unocssOptions.safelist) ? unocssOptions.safelist : unocssOptions.safelist ? [unocssOptions.safelist] : [];
+  for (const icon of DYNAMIC_ICON_SAFELIST) {
+    if (!currentSafelist.includes(icon)) {
+      currentSafelist.push(icon);
+    }
+  }
+  unocssOptions.safelist = currentSafelist;
+}
 function validateRuntimeConfig(runtimeConfig, mode, features) {
   if (!mode) {
     return;
@@ -326,6 +340,7 @@ const module$1 = defineNuxtModule({
       );
     }
     ensureIconifyPackages(nuxt.options.rootDir);
+    ensureDynamicIconSafelist(nuxt.options);
     const resolver = createResolver(import.meta.url);
     const builtRuntimeDir = resolver.resolve("./runtime");
     const sourceRuntimeDir = resolver.resolve("../src/runtime");

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

@@ -1,8 +1,9 @@
-import type { Conversation } from '../../types/chat.js';
 import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../types/chat.js';
 type __VLS_Props = {
     conversation: DeepReadonly<Conversation>;
     active: boolean;
+    draggable?: boolean;
     userImage?: string;
     selectConversation?: (id: string) => void | Promise<void>;
 };
@@ -11,11 +12,15 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     rename: (id: string, title: string) => any;
     duplicate: (id: string) => any;
     export: (id: string) => any;
+    dragStart: (id: string) => any;
+    dragEnd: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((id: string) => any) | undefined;
     onRename?: ((id: string, title: string) => any) | undefined;
     onDuplicate?: ((id: string) => any) | undefined;
     onExport?: ((id: string) => any) | undefined;
+    onDragStart?: ((id: string) => any) | undefined;
+    onDragEnd?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,148 +1,33 @@
 <script setup>
-import { useMagicKeys, useMutationObserver } from "@vueuse/core";
-import { resolveConversationRenameTitle } from "../../utils/conversation-title";
-import { capitalizeFirst } from "../../utils/string";
+import { useConversationItem } from "../../composables/useConversationItem";
 const props = defineProps({
   conversation: { type: null, required: true },
   active: { type: Boolean, required: true },
+  draggable: { type: Boolean, required: false },
   userImage: { type: String, required: false },
   selectConversation: { type: Function, required: false }
 });
-const emit = defineEmits(["delete", "rename", "duplicate", "export"]);
-const isRenamingInline = ref(false);
-const renameTitle = ref("");
-const renameInputRef = ref(null);
-const isIgnoringInitialRenameBlur = ref(false);
-const showDeleteModal = ref(false);
-const { escape } = useMagicKeys();
-watch(() => escape?.value, (pressed) => {
-  if (pressed && isRenamingInline.value) {
-    cancelRename();
-  }
-  if (pressed && showDeleteModal.value) {
-    showDeleteModal.value = false;
-  }
-});
-function confirmDelete() {
-  showDeleteModal.value = false;
-  emit("delete", props.conversation.id);
-}
-const menuButtonRef = ref(null);
-const isMenuOpen = ref(false);
-useMutationObserver(menuButtonRef, (mutations) => {
-  for (const mutation of mutations) {
-    if (mutation.attributeName === "data-state") {
-      isMenuOpen.value = menuButtonRef.value?.getAttribute("data-state") === "open";
-    }
-  }
-}, { attributes: true });
-const conversationPath = computed(() => `/${props.conversation.id}`);
-const conversationNavigationDelayMs = 250;
-let conversationNavigationTimer = null;
-let renameBlurTimer = null;
-function clearPendingConversationNavigation() {
-  if (conversationNavigationTimer === null)
-    return;
-  clearTimeout(conversationNavigationTimer);
-  conversationNavigationTimer = null;
-}
-function clearRenameBlurTimer() {
-  if (renameBlurTimer === null)
-    return;
-  clearTimeout(renameBlurTimer);
-  renameBlurTimer = null;
-}
-function allowRenameBlurSoon() {
-  clearRenameBlurTimer();
-  renameBlurTimer = setTimeout(() => {
-    isIgnoringInitialRenameBlur.value = false;
-    renameBlurTimer = null;
-  }, 100);
-}
-function handleConversationClick(event) {
-  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
-    return;
-  event.preventDefault();
-  clearPendingConversationNavigation();
-  if (event.detail > 1)
-    return;
-  conversationNavigationTimer = setTimeout(() => {
-    if (props.selectConversation) {
-      void props.selectConversation(props.conversation.id);
-    } else {
-      navigateTo(conversationPath.value);
-    }
-    conversationNavigationTimer = null;
-  }, conversationNavigationDelayMs);
-}
-async function focusRenameInput() {
-  await nextTick();
-  renameInputRef.value?.focus();
-  renameInputRef.value?.select();
-  allowRenameBlurSoon();
-}
-function startRename() {
-  isMenuOpen.value = false;
-  clearPendingConversationNavigation();
-  clearRenameBlurTimer();
-  renameTitle.value = props.conversation.title;
-  isIgnoringInitialRenameBlur.value = true;
-  isRenamingInline.value = true;
-  void focusRenameInput();
-}
-function handleConversationDoubleClick() {
-  clearPendingConversationNavigation();
-  startRename();
-}
-function cancelRename() {
-  isRenamingInline.value = false;
-  isIgnoringInitialRenameBlur.value = false;
-  renameTitle.value = "";
-  clearRenameBlurTimer();
-}
-function submitRename() {
-  if (!isRenamingInline.value)
-    return;
-  const title = resolveConversationRenameTitle(renameTitle.value, props.conversation.title);
-  if (!title) {
-    cancelRename();
-    return;
-  }
-  emit("rename", props.conversation.id, title);
-  cancelRename();
-}
-function handleRenameBlur() {
-  if (isIgnoringInitialRenameBlur.value)
-    return;
-  submitRename();
-}
-const menuItems = [
-  {
-    label: "Renomear",
-    icon: "i-ph-pencil-simple",
-    click: () => startRename()
-  },
-  {
-    label: "Duplicar",
-    icon: "i-ph-copy",
-    click: () => emit("duplicate", props.conversation.id)
-  },
-  {
-    label: "Exportar",
-    icon: "i-ph-download-simple",
-    click: () => emit("export", props.conversation.id)
-  },
-  {
-    label: "Excluir",
-    icon: "i-ph-trash",
-    color: "negative",
-    click: () => showDeleteModal.value = true
-  }
-];
-onBeforeUnmount(() => {
-  clearPendingConversationNavigation();
-  clearRenameBlurTimer();
-});
+const emit = defineEmits(["delete", "rename", "duplicate", "export", "dragStart", "dragEnd"]);
+const {
+  isRenamingInline,
+  renameTitle,
+  renameInputRef,
+  showDeleteModal,
+  menuButtonRef,
+  isMenuOpen,
+  conversationPath,
+  displayTitle,
+  menuItems,
+  confirmDelete,
+  cancelDelete,
+  handleConversationClick,
+  handleConversationDoubleClick,
+  handleConversationDragStart,
+  handleConversationDragEnd,
+  cancelRename,
+  submitRename,
+  handleRenameBlur
+} = useConversationItem(props, emit);
 </script>
 
 <template>
@@ -189,6 +74,7 @@ onBeforeUnmount(() => {
     <a
         v-else
         :href="conversationPath"
+        :draggable="draggable"
         block
         px-12px
         h-32px
@@ -201,6 +87,8 @@ onBeforeUnmount(() => {
 ]"
         @click="handleConversationClick"
         @dblclick.prevent.stop="handleConversationDoubleClick"
+        @dragstart="handleConversationDragStart"
+        @dragend="handleConversationDragEnd"
     >
         <div flex items-center justify-between gap-12px h-full>
             <!-- User Avatar -->
@@ -220,7 +108,7 @@ onBeforeUnmount(() => {
                     truncate
                     tracking="-.15px"
                 >
-                    {{ capitalizeFirst(conversation.title) }}
+                    {{ displayTitle }}
                 </span>
             </div>
 
@@ -231,7 +119,7 @@ onBeforeUnmount(() => {
                 class="opacity-0 group-hover:opacity-100 transition-opacity"
                 :class="isMenuOpen && 'opacity-100'"
             >
-                <TelaDropdownMenu :items="menuItems">
+                <TelaDropdownMenu :items="menuItems" content-class="chat-sidebar-floating">
                     <button
                         ref="menuButtonRef"
                         p-4px
@@ -253,10 +141,11 @@ onBeforeUnmount(() => {
         v-model:open="showDeleteModal"
         title="Excluir conversa"
         variant="danger"
+        class="chat-sidebar-floating"
         confirm-button-text="Excluir"
         cancel-button-text="Cancelar"
         @confirm="confirmDelete"
-        @cancel="showDeleteModal = false"
+        @cancel="cancelDelete"
     >
         Tem certeza que deseja excluir esta conversa? Esta ação não pode ser desfeita.
     </TelaConfirmationModal>

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

@@ -1,8 +1,9 @@
-import type { Conversation } from '../../types/chat.js';
 import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../types/chat.js';
 type __VLS_Props = {
     conversation: DeepReadonly<Conversation>;
     active: boolean;
+    draggable?: boolean;
     userImage?: string;
     selectConversation?: (id: string) => void | Promise<void>;
 };
@@ -11,11 +12,15 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     rename: (id: string, title: string) => any;
     duplicate: (id: string) => any;
     export: (id: string) => any;
+    dragStart: (id: string) => any;
+    dragEnd: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((id: string) => any) | undefined;
     onRename?: ((id: string, title: string) => any) | undefined;
     onDuplicate?: ((id: string) => any) | undefined;
     onExport?: ((id: string) => any) | undefined;
+    onDragStart?: ((id: string) => any) | undefined;
+    onDragEnd?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/chat/conversation-list.d.vue.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>;