@quazardous/qdadm 1.22.0 → 2.0.0

package/src/components/edit/FormTab.vue

@@ -1,217 +0,0 @@
-<script setup lang="ts">
-/**
- * FormTab - Normalized tab header component
- *
- * @deprecated Use FieldGroups with layout="tabs" instead. FieldGroups now supports
- * icon, badge, count, visible, and disabled options on groups.
- *
- * ```ts
- * // Before (deprecated)
- * <FormTab value="general" label="General" icon="pi-cog" :count="5" />
- *
- * // After (recommended)
- * form.group('general', ['field1'], { label: 'General', icon: 'cog', count: 5 })
- * ```
- */
-
-import { type PropType } from 'vue'
-import Tab from 'primevue/tab'
-import Tag from 'primevue/tag'
-
-type BadgeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast'
-
-const props = defineProps({
-  /**
-   * Tab identifier (used for v-model matching)
-   */
-  value: {
-    type: String,
-    required: true
-  },
-
-  /**
-   * Display label
-   */
-  label: {
-    type: String,
-    required: true
-  },
-
-  /**
-   * PrimeIcon class (without 'pi' prefix or with full class)
-   * Examples: 'pi-cog', 'cog', 'pi pi-cog'
-   */
-  icon: {
-    type: String as () => string | null,
-    default: null
-  },
-
-  /**
-   * Count to display as badge (shows only if > 0)
-   */
-  count: {
-    type: Number as () => number | null,
-    default: null
-  },
-
-  /**
-   * Custom badge text (alternative to count)
-   */
-  badge: {
-    type: [String, Number] as unknown as PropType<string | number | null>,
-    default: null
-  },
-
-  /**
-   * Badge severity/color
-   */
-  badgeSeverity: {
-    type: String as () => BadgeSeverity,
-    default: 'secondary',
-    validator: (v: string) => ['secondary', 'info', 'success', 'warn', 'danger', 'contrast'].includes(v)
-  },
-
-  /**
-   * Show/hide the tab
-   */
-  visible: {
-    type: Boolean,
-    default: true
-  },
-
-  /**
-   * Disable tab interaction
-   */
-  disabled: {
-    type: Boolean,
-    default: false
-  }
-})
-
-/**
- * Normalize icon class
- */
-function getIconClass(): string | null {
-  if (!props.icon) return null
-  // Already has 'pi' prefix
-  if (props.icon.startsWith('pi')) {
-    return props.icon.includes(' ') ? props.icon : `pi ${props.icon}`
-  }
-  // Just icon name
-  return `pi pi-${props.icon}`
-}
-
-/**
- * Get count value to display
- */
-function getCountValue(): number | null {
-  if (props.count !== null && props.count > 0) return props.count
-  return null
-}
-
-/**
- * Get badge value to display (separate from count)
- */
-function getBadgeValue(): string | number | null {
-  if (props.badge !== null) return props.badge
-  // If no badge but count provided, show count as badge (legacy behavior)
-  if (props.count !== null && props.count > 0 && props.badge === null) return props.count
-  return null
-}
-
-/**
- * Check if we should show count and badge separately
- */
-function showBothCountAndBadge(): boolean {
-  return props.count !== null && props.count > 0 && props.badge !== null
-}
-</script>
-
-<template>
-  <Tab
-    v-if="visible"
-    :value="value"
-    :disabled="disabled"
-  >
-    <i v-if="icon" :class="getIconClass()" class="tab-icon" ></i>
-    <span class="tab-label">{{ label }}</span>
-    <!-- When both count and badge are provided, show count first then badge indicator -->
-    <template v-if="showBothCountAndBadge()">
-      <Tag
-        :value="String(getCountValue())"
-        severity="secondary"
-        class="tab-badge"
-      />
-      <span class="tab-alert-dot" :class="`alert-${badgeSeverity}`"></span>
-    </template>
-    <!-- Otherwise show single badge (legacy behavior) -->
-    <Tag
-      v-else-if="getBadgeValue() !== null"
-      :value="String(getBadgeValue())"
-      :severity="badgeSeverity"
-      class="tab-badge"
-    />
-  </Tab>
-</template>
-
-<style scoped>
-/*
- * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
- * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
- */
-.tab-icon {
-  margin-right: 0.5rem;
-}
-
-.tab-label {
-  /* Ensure consistent text rendering */
-}
-
-.tab-badge {
-  margin-left: 0.5rem;
-  font-size: 0.7rem;
-  padding: 0.15rem 0.4rem;
-  min-width: 1.25rem;
-  text-align: center;
-}
-
-.tab-alert-dot {
-  display: inline-block;
-  width: 8px !important;
-  height: 8px !important;
-  min-width: 8px;
-  max-width: 8px;
-  border-radius: 50%;
-  margin-left: 0.35rem;
-  animation: pulse 1.5s infinite;
-}
-
-.alert-warn {
-  background-color: var(--p-orange-500);
-}
-
-.alert-danger {
-  background-color: var(--p-red-500);
-}
-
-.alert-info {
-  background-color: var(--p-blue-500);
-}
-
-.alert-success {
-  background-color: var(--p-green-500);
-}
-
-.alert-secondary {
-  background-color: var(--p-gray-500);
-}
-
-.alert-contrast {
-  background-color: var(--p-primary-500);
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-</style>

package/src/components/edit/FormTabs.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-/**
- * FormTabs - Normalized tab container for forms
- *
- * @deprecated Use FieldGroups with layout="tabs" instead. FieldGroups now supports
- * icon, badge, count, visible, and disabled options on groups.
- *
- * ```vue
- * <!-- Before (deprecated) -->
- * <FormTabs v-model="activeTab">
- *   <template #tabs>
- *     <FormTab value="general" label="General" icon="pi-cog" />
- *   </template>
- *   <template #panels>
- *     <TabPanel value="general">...</TabPanel>
- *   </template>
- * </FormTabs>
- *
- * <!-- After (recommended) -->
- * form.group('general', ['field1', 'field2'], { label: 'General', icon: 'cog' })
- * <FieldGroups :groups="form.groups.value" layout="tabs">
- *   <template #field="{ field }">
- *     <FormField :field="field" />
- *   </template>
- * </FieldGroups>
- * ```
- */
-
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
-import TabPanels from 'primevue/tabpanels'
-
-defineProps({
-  /**
-   * Active tab value (v-model)
-   */
-  modelValue: {
-    type: String,
-    required: true
-  }
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-function onTabChange(value: string | number): void {
-  emit('update:modelValue', String(value))
-}
-</script>
-
-<template>
-  <div class="form-tabs">
-    <Tabs :value="modelValue" @update:value="onTabChange">
-      <TabList class="form-tabs__list">
-        <slot name="tabs" ></slot>
-      </TabList>
-      <TabPanels class="form-tabs__panels">
-        <slot name="panels" ></slot>
-      </TabPanels>
-    </Tabs>
-  </div>
-</template>
-
-<style scoped>
-/*
- * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
- * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
- */
-.form-tabs {
-  margin-top: 1rem;
-}
-
-.form-tabs :deep(.form-tabs__list) {
-  border-bottom: 1px solid var(--p-surface-200);
-  gap: 0;
-}
-
-.form-tabs :deep(.form-tabs__panels) {
-  padding: 1.5rem 0;
-}
-
-/* Tab styling */
-.form-tabs :deep(.p-tab) {
-  padding: 0.75rem 1.25rem;
-  border-radius: 0;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: all 0.2s ease;
-}
-
-.form-tabs :deep(.p-tab:hover) {
-  background: var(--p-surface-50);
-}
-
-.form-tabs :deep(.p-tab[data-p-active="true"]) {
-  border-bottom-color: var(--p-primary-500);
-  color: var(--p-primary-500);
-}
-
-/* Tab icon alignment */
-.form-tabs :deep(.p-tab .pi) {
-  margin-right: 0.5rem;
-}
-
-/* Tab badge/count styling */
-.form-tabs :deep(.tab-badge) {
-  margin-left: 0.5rem;
-  font-size: 0.7rem;
-  padding: 0.15rem 0.4rem;
-  min-width: 1.25rem;
-  text-align: center;
-}
-
-/* Disabled tab */
-.form-tabs :deep(.p-tab[data-p-disabled="true"]) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-</style>

package/src/components/lists/ActionColumn.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-/**
- * ActionColumn - Reusable table action buttons (edit, delete)
- *
- * Slots:
- * - default: Extra actions (after edit/delete)
- *
- * Emits:
- * - edit: When edit button is clicked
- * - delete: When delete button is clicked
- */
-import Button from 'primevue/button'
-
-defineEmits<{
-  edit: []
-  delete: []
-}>()
-</script>
-
-<template>
-  <div class="table-actions">
-    <Button
-      icon="pi pi-pencil"
-      severity="secondary"
-      text
-      rounded
-      @click="$emit('edit')"
-      v-tooltip.top="'Edit'"
-    />
-    <Button
-      icon="pi pi-trash"
-      severity="danger"
-      text
-      rounded
-      @click="$emit('delete')"
-      v-tooltip.top="'Delete'"
-    />
-    <slot ></slot>
-  </div>
-</template>

package/src/composables/useCurrentEntity.ts

@@ -1,60 +0,0 @@
-/**
- * @deprecated Use useStackHydrator() instead
- *
- * Legacy composable for setting breadcrumb entity data.
- * This has been replaced by the activeStack + stackHydrator system.
- *
- * Migration:
- * ```ts
- * // Before (deprecated)
- * const { setBreadcrumbEntity } = useCurrentEntity()
- * setBreadcrumbEntity(data)
- *
- * // After
- * const hydrator = useStackHydrator()
- * hydrator.setCurrentData(data)
- * ```
- */
-import { useStackHydrator } from '../chain/useStackHydrator'
-
-/**
- * Return type for useCurrentEntity
- */
-export interface UseCurrentEntityReturn {
-  /** @deprecated Use hydrator.setCurrentData() instead */
-  setBreadcrumbEntity: (data: unknown, level?: number) => void
-  /** @deprecated Use hydrator.setCurrentData() instead */
-  setCurrentEntity: (data: unknown) => void
-}
-
-/**
- * @deprecated Use useStackHydrator() instead
- */
-export function useCurrentEntity(): UseCurrentEntityReturn {
-  console.warn(
-    '[qdadm] useCurrentEntity is deprecated. Use useStackHydrator() instead.'
-  )
-
-  const hydrator = useStackHydrator()
-
-  /**
-   * @deprecated Use hydrator.setCurrentData() instead
-   */
-  function setBreadcrumbEntity(data: unknown, level = 1): void {
-    if (level === 1) {
-      hydrator.setCurrentData(data)
-    } else {
-      // For parent levels, use setEntityData with entity name
-      // But we don't have entity name here - just set current
-      hydrator.setCurrentData(data)
-    }
-  }
-
-  // Backwards compat alias
-  const setCurrentEntity = (data: unknown): void => setBreadcrumbEntity(data, 1)
-
-  return {
-    setBreadcrumbEntity,
-    setCurrentEntity,
-  }
-}