mgv-backoffice 1.31.0 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgv-backoffice",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "Shared Vue 3 UI component library",
   "type": "module",
   "main": "./dist/ui-lib.umd.cjs",

package/src/components/BaseConfirmModal.vue

@@ -1,26 +1,14 @@
 <template>
   <BaseModalShell
     :title="title"
+    :icon="ExclamationTriangleIcon"
+    :icon-bg-class="variant === 'danger'
+      ? isDark ? 'bg-red-900/30' : 'bg-red-50'
+      : isDark ? 'bg-amber-900/30' : 'bg-amber-50'"
+    :icon-class="variant === 'danger' ? 'text-red-600' : 'text-amber-600'"
     :manual-close="submitting"
     @cancel="handleCancel"
   >
-    <template #icon>
-      <div
-        class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
-        :class="[
-          variant === 'danger'
-            ? isDark ? 'bg-red-900/30' : 'bg-red-50'
-            : isDark ? 'bg-amber-900/30' : 'bg-amber-50'
-        ]"
-      >
-        <ExclamationTriangleIcon
-          class="h-6 w-6"
-          :class="variant === 'danger' ? 'text-red-600' : 'text-amber-600'"
-          aria-hidden="true"
-        />
-      </div>
-    </template>
-
     <!--
       Default renders the plain `message` string. Callers that need rich
       text (bold names, inline code, etc.) can override the `message` slot

package/src/components/BaseEntityPickerModal.vue

@@ -1,18 +1,16 @@
 <template>
   <BaseModalShell
     :title="title"
+    :icon="FolderIcon"
+    :icon-bg-class="palette.iconBg"
+    :icon-class="palette.iconText"
     :manual-close="submitting"
     @cancel="handleCancel"
   >
-    <template #icon>
-      <slot name="icon">
-        <div
-          class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
-          :class="palette.iconBg"
-        >
-          <FolderIcon class="h-6 w-6" :class="palette.iconText" aria-hidden="true" />
-        </div>
-      </slot>
+    <!-- Forward a caller-supplied icon override; otherwise the shell
+         renders the default folder icon in the palette-tinted chip. -->
+    <template v-if="$slots.icon" #icon>
+      <slot name="icon" />
     </template>
 
     <p v-if="message" class="text-sm" :class="isDark ? 'text-gray-300' : 'text-gray-600'">

package/src/components/BaseFileDropzone.vue

@@ -0,0 +1,94 @@
+<template>
+  <!--
+    Dashed "click to select a file" upload zone — extracted from WireMate's
+    ImportPostmanModal file picker. Also accepts drag-and-drop.
+
+    The hidden input is reset after every selection so choosing the same
+    file twice still fires `files` — callers don't need their own reset.
+  -->
+  <label
+    class="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-10 text-center transition-colors"
+    :class="[
+      disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+      dragging
+        ? (isDark ? 'border-emerald-500 text-emerald-400' : 'border-emerald-500 text-emerald-600')
+        : (isDark
+          ? 'border-gray-700 hover:border-emerald-500 text-gray-400 hover:text-emerald-400'
+          : 'border-gray-300 hover:border-emerald-500 text-gray-500 hover:text-emerald-600'),
+    ]"
+    @dragover.prevent="onDragOver"
+    @dragleave.prevent="dragging = false"
+    @drop.prevent="onDrop"
+  >
+    <slot name="icon">
+      <svg class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12-3-3m0 0-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+        />
+      </svg>
+    </slot>
+    <p class="text-sm font-medium">{{ label }}</p>
+    <p v-if="hint" class="text-xs" :class="isDark ? 'text-gray-500' : 'text-gray-400'">
+      {{ hint }}
+    </p>
+    <input
+      type="file"
+      class="hidden"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="onChange"
+    />
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  /** Main line, e.g. "Click to select a Postman collection (.json)". */
+  label: string
+  /** Optional dimmed helper line below the label. */
+  hint?: string
+  /** Forwarded to the hidden input's `accept`. Dropped files are NOT filtered by it. */
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hint: '',
+  accept: '',
+  multiple: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{ files: [files: File[]] }>()
+
+const { isDark } = useTheme()
+
+const dragging = ref(false)
+
+function onChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  const files = Array.from(input.files ?? [])
+  // Reset so re-selecting the same file re-triggers change.
+  input.value = ''
+  if (files.length) emit('files', files)
+}
+
+function onDragOver() {
+  if (!props.disabled) dragging.value = true
+}
+
+function onDrop(e: DragEvent) {
+  dragging.value = false
+  if (props.disabled) return
+  const dropped = Array.from(e.dataTransfer?.files ?? [])
+  if (!dropped.length) return
+  emit('files', props.multiple ? dropped : dropped.slice(0, 1))
+}
+</script>

package/src/components/BaseModalShell.vue

@@ -4,8 +4,14 @@
     backdrop, dark-mode card, escape key, aria-modal). Concrete modals
     should compose this rather than re-implementing the chrome.
 
+    Every modal shows an icon left of the title: the REQUIRED `icon`
+    prop (a component, e.g. a heroicon) renders inside a tinted
+    circular chip. Tint via `icon-bg-class` / `icon-class`; the `icon`
+    slot remains as a full-markup override for callers that need
+    something richer than the standard chip.
+
     Slots:
-      • icon    — small circular icon shown next to the title
+      • icon    — override the standard icon chip next to the title
       • default — body content
       • footer  — action buttons (cancel / confirm / etc.)
 
@@ -37,7 +43,14 @@
       >
         <div class="flex items-start justify-between gap-4 p-6 border-b shrink-0" :class="t.border">
           <div class="flex items-start gap-4 min-w-0">
-            <slot name="icon" />
+            <slot name="icon">
+              <div
+                class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
+                :class="iconChipBg"
+              >
+                <component :is="icon" class="h-6 w-6" :class="iconClass" aria-hidden="true" />
+              </div>
+            </slot>
             <div class="flex-1 min-w-0">
               <h3 :id="titleId" class="text-lg font-medium" :class="t.primaryText">
                 {{ title }}
@@ -69,7 +82,14 @@
         <div class="p-6">
           <!-- Title row -->
           <div class="flex items-start gap-4">
-            <slot name="icon" />
+            <slot name="icon">
+              <div
+                class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
+                :class="iconChipBg"
+              >
+                <component :is="icon" class="h-6 w-6" :class="iconClass" aria-hidden="true" />
+              </div>
+            </slot>
             <div class="flex-1">
               <h3
                 :id="titleId"
@@ -98,12 +118,26 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { Component } from 'vue'
 import { useTheme } from '../composables/useTheme'
 import { useThemeClasses } from '../composables/useThemeClasses'
 import { useEscapeKey } from '../composables/useEscapeKey'
 
 interface Props {
   title: string
+  /**
+   * Icon component (e.g. a heroicon) rendered in a tinted circular
+   * chip left of the title. REQUIRED — every modal must name itself
+   * with an icon. The `icon` slot can override the whole chip.
+   */
+  icon: Component
+  /**
+   * Background classes of the icon chip. Defaults to the emerald
+   * tint (dark-mode aware).
+   */
+  iconBgClass?: string
+  /** Classes applied to the icon itself. Defaults to emerald. */
+  iconClass?: string
   /**
    * Max-width of the dialog card. Defaults to `max-w-md`. Pass any
    * Tailwind max-w utility, or empty string to opt out.
@@ -135,6 +169,8 @@ const props = withDefaults(defineProps<Props>(), {
   manualClose: false,
   scrollable: false,
   subtitle: '',
+  iconBgClass: '',
+  iconClass: 'text-emerald-600',
 })
 
 const emit = defineEmits<{
@@ -156,6 +192,12 @@ const shellClass = computed(() =>
     : 'bg-white border border-gray-200',
 )
 
+// The icon chip's background: an explicit `icon-bg-class` wins, else the
+// standard emerald tint in the current theme.
+const iconChipBg = computed(() =>
+  props.iconBgClass || (isDark.value ? 'bg-emerald-900/30' : 'bg-emerald-50'),
+)
+
 function onBackdrop() {
   emit('backdrop')
   if (!props.manualClose) emit('cancel')

package/src/components/BaseTextInputModal.vue

@@ -12,18 +12,14 @@
   -->
   <BaseModalShell
     :title="title"
+    :icon="DocumentDuplicateIcon"
     manual-close
     @backdrop="handleBackdropClick"
   >
-    <template #icon>
-      <slot name="icon">
-        <div
-          class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
-          :class="isDark ? 'bg-emerald-900/30' : 'bg-emerald-50'"
-        >
-          <DocumentDuplicateIcon class="h-6 w-6 text-emerald-600" aria-hidden="true" />
-        </div>
-      </slot>
+    <!-- Forward a caller-supplied icon override; otherwise the shell
+         renders the default document icon in the standard emerald chip. -->
+    <template v-if="$slots.icon" #icon>
+      <slot name="icon" />
     </template>
 
     <p class="text-sm" :class="isDark ? 'text-gray-300' : 'text-gray-600'">

package/src/index.ts

@@ -36,6 +36,7 @@ export { default as BaseNotificationPanel } from './components/BaseNotificationP
 export { default as BaseChipButton } from './components/BaseChipButton.vue'
 export { default as BaseRemoveButton } from './components/BaseRemoveButton.vue'
 export { default as BaseStatusPill } from './components/BaseStatusPill.vue'
+export { default as BaseFileDropzone } from './components/BaseFileDropzone.vue'
 
 // Components — extracted from TradeAutomation
 export { default as BaseInput } from './components/BaseInput.vue'