mgv-backoffice 1.27.0 → 1.28.0

package/src/components/BaseAlert.vue

@@ -1,8 +1,31 @@
 <template>
-  <div :class="computeCss()" role="alert">
-    <component :is="iconComponent" class="w-6 h-6 flex-shrink-0" :class="iconColorClass"/>
-    <div>
-      <span class="font-medium pl-1">{{ title }}</span>
+  <!--
+    Inline notice panel (error / warning / success / info).
+
+    v2 (1.27.0): rewritten from the legacy dynamic-class version —
+      • theme-aware via the shared `isDark` ref (same pattern as the other
+        extracted components; no runtime-composed class names, so every
+        class survives Tailwind's static scan)
+      • optional default slot for body content below the title
+      • `compact` variant for slim in-form warnings (text-xs, small icon)
+    Backward compatible: `<BaseAlert title="..." :color="AlertEnum.X" />`
+    renders the same single-line alert as before, mb-4 included.
+  -->
+  <div
+    role="alert"
+    class="flex gap-3 mb-4 rounded-lg border text-sm transition-colors"
+    :class="[compact ? 'items-start px-3 py-2 text-xs' : 'items-start p-4', palette]"
+  >
+    <component
+      :is="iconComponent"
+      class="shrink-0"
+      :class="[compact ? 'w-4 h-4 mt-px' : 'w-5 h-5 mt-0.5', iconColorClass]"
+      aria-hidden="true"
+    />
+    <div class="min-w-0 flex-1">
+      <p v-if="title" class="font-medium">{{ title }}</p>
+      <!-- Body — caller-styled free-form content under the title. -->
+      <slot />
     </div>
   </div>
 </template>
@@ -14,45 +37,68 @@ import {
   ExclamationTriangleIcon,
   InformationCircleIcon,
 } from '@heroicons/vue/24/outline'
-import { AlertEnum } from "../enums/AlertEnum";
-import { computed, PropType } from "vue";
-import { getBaseColor } from "../utils/util";
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  color: {
-    type: String as PropType<AlertEnum>,
-    required: false,
-    default: AlertEnum.ERROR
-  }
+import { AlertEnum } from '../enums/AlertEnum'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  /** Bold headline. Optional when the slot carries the whole message. */
+  title?: string
+  /** Alert mode — drives palette and icon. Defaults to ERROR. */
+  color?: AlertEnum
+  /** Slim variant for in-form warnings: text-xs, smaller icon/padding. */
+  compact?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  color: AlertEnum.ERROR,
+  compact: false,
 })
 
+const { isDark } = useTheme()
+
+// Literal palette table so Tailwind's scanner sees every class.
+const PALETTES: Record<AlertEnum, { light: string; dark: string }> = {
+  [AlertEnum.ERROR]: {
+    light: 'bg-red-50 border-red-200 text-red-700',
+    dark: 'bg-red-500/10 border-red-500/30 text-red-300',
+  },
+  [AlertEnum.WARNING]: {
+    light: 'bg-amber-50 border-amber-200 text-amber-700',
+    dark: 'bg-amber-500/10 border-amber-500/30 text-amber-300',
+  },
+  [AlertEnum.SUCCESS]: {
+    light: 'bg-emerald-50 border-emerald-200 text-emerald-700',
+    dark: 'bg-emerald-500/10 border-emerald-500/30 text-emerald-300',
+  },
+  [AlertEnum.INFO]: {
+    light: 'bg-sky-50 border-sky-200 text-sky-700',
+    dark: 'bg-sky-500/10 border-sky-500/30 text-sky-300',
+  },
+}
+
+const palette = computed(() =>
+  isDark.value ? PALETTES[props.color].dark : PALETTES[props.color].light,
+)
+
 // Icon + tint follow the alert mode so an error doesn't render with a
 // neutral info glyph.
 const iconComponent = computed(() => {
   switch (props.color) {
-    case AlertEnum.SUCCESS: return CheckCircleIcon;
-    case AlertEnum.WARNING: return ExclamationTriangleIcon;
-    case AlertEnum.INFO: return InformationCircleIcon;
-    default: return ExclamationCircleIcon;
+    case AlertEnum.SUCCESS: return CheckCircleIcon
+    case AlertEnum.WARNING: return ExclamationTriangleIcon
+    case AlertEnum.INFO: return InformationCircleIcon
+    default: return ExclamationCircleIcon
   }
 })
 
 const iconColorClass = computed(() => {
   switch (props.color) {
-    case AlertEnum.SUCCESS: return 'text-green-500';
-    case AlertEnum.WARNING: return 'text-yellow-500';
-    case AlertEnum.INFO: return 'text-gray-500';
-    default: return 'text-red-500';
+    case AlertEnum.SUCCESS: return 'text-emerald-500'
+    case AlertEnum.WARNING: return 'text-amber-500'
+    case AlertEnum.INFO: return 'text-sky-500'
+    default: return 'text-red-500'
   }
 })
-
-function computeCss() {
-  let baseColor = getBaseColor(props.color);
-  return "flex items-center p-4 mb-4 text-sm text-" + baseColor + "-800 border border-" + baseColor + "-300 rounded-lg bg-" + baseColor + "-50 dark:bg-gray-800 dark:text-" + baseColor + "-400 dark:border-" + baseColor + "-800"
-}
 </script>

package/src/components/BaseChipButton.vue

@@ -0,0 +1,42 @@
+<template>
+  <!--
+    Small tinted "chip" action button — the compact emerald "+ Add" pill
+    used above repeatable form rows (extracted from WireMate's CreateMock,
+    where the identical class string appeared seven times).
+
+    Label comes from the default slot so callers can mix text and icons.
+  -->
+  <button
+    type="button"
+    :disabled="disabled"
+    class="inline-flex items-center gap-1 font-medium rounded-md border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+    :class="[
+      size === 'xs' ? 'text-xs px-2 py-0.5' : 'text-xs px-2.5 py-1',
+      isDark
+        ? 'text-emerald-300 border-emerald-700 bg-emerald-900/30 hover:bg-emerald-800/50'
+        : 'text-emerald-700 border-emerald-200 bg-emerald-50 hover:bg-emerald-100',
+    ]"
+    @click="emit('click')"
+  >
+    <slot />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  /** 'sm' = px-2.5 py-1 (default); 'xs' = px-2 py-0.5 for tight corners. */
+  size?: 'xs' | 'sm'
+  disabled?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  disabled: false,
+})
+
+const emit = defineEmits<{ click: [] }>()
+
+const { isDark } = useTheme()
+</script>

package/src/components/BaseRemoveButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <!--
+    The "×" remove-row affordance used beside repeatable form rows
+    (extracted from WireMate's CreateMock, where the identical red ×
+    button appeared on every key/value, matcher, and cookie row).
+
+    Renders a multiplication sign; name it for screen readers via
+    `aria-label` (falls through as an attr, as do `title`, `disabled`,
+    and any extra classes like `pt-1` / `self-start`).
+  -->
+  <button
+    type="button"
+    class="px-2 text-lg leading-none text-red-400 hover:text-red-600 transition-colors cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:text-gray-400"
+    @click="emit('click')"
+  >
+    &times;
+  </button>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits<{ click: [] }>()
+</script>

package/src/components/BaseStatusPill.vue

@@ -0,0 +1,54 @@
+<template>
+  <!--
+    Connection/health status pill: a colored dot (pulsing while ok) next
+    to a short label, on a tinted rounded background. Extracted from
+    WireMate's sidebar WireMock health indicator.
+
+    status: 'ok' → emerald + pulse, 'error' → red, 'unknown' → gray.
+  -->
+  <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs" :class="pillClass">
+    <span class="relative flex h-2 w-2">
+      <span
+        v-if="status === 'ok'"
+        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"
+        aria-hidden="true"
+      ></span>
+      <span class="relative inline-flex rounded-full h-2 w-2" :class="dotClass"></span>
+    </span>
+    {{ label }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  status: 'ok' | 'error' | 'unknown'
+  /** Short text next to the dot, e.g. "WireMock Connected". */
+  label: string
+}
+
+const props = defineProps<Props>()
+
+const { isDark } = useTheme()
+
+const pillClass = computed(() => {
+  switch (props.status) {
+    case 'ok':
+      return isDark.value ? 'bg-emerald-500/10 text-emerald-400' : 'bg-emerald-50 text-emerald-700'
+    case 'error':
+      return isDark.value ? 'bg-red-500/10 text-red-400' : 'bg-red-50 text-red-700'
+    default:
+      return isDark.value ? 'bg-gray-700 text-gray-400' : 'bg-gray-100 text-gray-500'
+  }
+})
+
+const dotClass = computed(() => {
+  switch (props.status) {
+    case 'ok': return 'bg-emerald-500'
+    case 'error': return 'bg-red-500'
+    default: return 'bg-gray-400'
+  }
+})
+</script>

package/src/index.ts

@@ -33,6 +33,9 @@ export { default as BaseCopyButton } from './components/BaseCopyButton.vue'
 export { default as BaseGoogleSignInButton } from './components/BaseGoogleSignInButton.vue'
 export { default as BaseLoginForm } from './components/BaseLoginForm.vue'
 export { default as BaseNotificationPanel } from './components/BaseNotificationPanel.vue'
+export { default as BaseChipButton } from './components/BaseChipButton.vue'
+export { default as BaseRemoveButton } from './components/BaseRemoveButton.vue'
+export { default as BaseStatusPill } from './components/BaseStatusPill.vue'
 
 // Components — extracted from TradeAutomation
 export { default as BaseInput } from './components/BaseInput.vue'