@jumentix/cli-init 0.0.0

package/templates/frontend/src/components/AppSidebarNav.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { CBadge, CNavGroup, CNavItem, CNavTitle, CSidebarNav } from '@coreui/vue'
+
+import { can } from '@/contracts/rbac'
+import { useI18n } from '@/i18n'
+import { navFromModules } from '@/modules/nav'
+import type { NavItem } from '@/modules/navTypes'
+import { useProfileStore } from '@/stores/profile'
+import { useTaskStore } from '@/stores/tasks'
+import { useRouter } from 'vue-router'
+
+const profile = useProfileStore()
+const { t } = useI18n()
+const tasks = useTaskStore()
+const router = useRouter()
+
+const allowed = (item: NavItem): boolean => (
+  !item.operationId || can(profile.record?.roles ?? [], item.operationId)
+)
+
+const visibleItems = computed(() => navFromModules(profile.record?.roles ?? [])
+  .map((item) => {
+    if (!item.items) return allowed(item) ? item : null;
+    const children = item.items.filter(allowed);
+    return children.length ? { ...item, items: children } : null;
+  })
+  .filter((item): item is NavItem => item !== null))
+
+const isGroup = (item: NavItem) => Boolean(item.items)
+const isTitle = (item: NavItem) => item.component === 'CNavTitle'
+
+const openModule = (to: string) => {
+  const match = to.match(/^\/m\/([^/]+)/);
+  if (match) {
+    tasks.openModule(match[1]);
+    router.push(to);
+  }
+}
+</script>
+
+<template>
+  <CSidebarNav>
+    <template v-for="item in visibleItems" :key="item.name">
+      <CNavTitle v-if="isTitle(item)">{{ t(item.name) }}</CNavTitle>
+      <CNavGroup v-else-if="isGroup(item)">
+        <template #togglerContent>
+          <CIcon v-if="item.icon" custom-class-name="nav-icon" :icon="item.icon" />
+          {{ t(item.name) }}
+        </template>
+        <CNavItem v-for="child in item.items" :key="child.name">
+          <RouterLink custom :to="child.to ?? '#'" v-slot="{ href, isActive, navigate }">
+            <a
+              class="nav-link"
+              :class="{ active: isActive }"
+              :href="href"
+              @click="(event) => { event.preventDefault(); openModule(child.to ?? '#'); navigate(event); }"
+            >
+              <span class="nav-icon"><span class="nav-icon-bullet" /></span>
+              {{ t(child.name) }}
+            </a>
+          </RouterLink>
+        </CNavItem>
+      </CNavGroup>
+      <CNavItem v-else-if="item.to">
+        <RouterLink custom :to="item.to" v-slot="{ href, isActive, navigate }">
+          <a
+            class="nav-link"
+            :class="{ active: isActive }"
+            :href="href"
+            @click="(event) => { event.preventDefault(); openModule(item.to ?? '#'); navigate(event); }"
+          >
+            <CIcon v-if="item.icon" custom-class-name="nav-icon" :icon="item.icon" />
+            <span v-else class="nav-icon"><span class="nav-icon-bullet" /></span>
+            {{ t(item.name) }}
+            <CBadge v-if="item.badge" class="ms-auto" :color="item.badge.color" size="sm">
+              {{ item.badge.text }}
+            </CBadge>
+          </a>
+        </RouterLink>
+      </CNavItem>
+      <CNavItem v-else-if="item.href" :href="item.href" target="_blank" rel="noopener noreferrer">
+        <CIcon v-if="item.icon" custom-class-name="nav-icon" :icon="item.icon" />
+        {{ t(item.name) }}
+        <CBadge v-if="item.badge" class="ms-auto" :color="item.badge.color" size="sm">
+          {{ item.badge.text }}
+        </CBadge>
+      </CNavItem>
+    </template>
+  </CSidebarNav>
+</template>

package/templates/frontend/src/components/AppTaskbar.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import {
+  CButton,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle
+} from '@coreui/vue';
+
+import { localized, useI18n } from '@/i18n';
+import { findModule } from '@/modules/manifest';
+import { useShellViewport } from '@/shell/breakpoints';
+import { useTaskStore, visibleTaskSlice } from '@/stores/tasks';
+
+const tasks = useTaskStore();
+const router = useRouter();
+const { t } = useI18n();
+const {
+  compactTaskbar,
+  bottomSheetSwitcher
+} = useShellViewport();
+const sheetOpen = ref(false);
+
+const MAX_VISIBLE = 8;
+
+const sliced = computed(() => (
+  bottomSheetSwitcher.value
+    ? { shown: [] as string[], overflow: tasks.open }
+    : visibleTaskSlice(tasks.open, MAX_VISIBLE)
+));
+
+const titleFor = (moduleId: string): string => {
+  const mod = findModule(moduleId);
+  return mod ? localized(mod.title) : moduleId;
+};
+
+const iconFor = (moduleId: string): string => findModule(moduleId)?.icon ?? 'cil-task';
+
+const activate = (moduleId: string) => {
+  tasks.activate(moduleId);
+  router.push(`/m/${moduleId}`);
+  sheetOpen.value = false;
+};
+
+const closeTask = (moduleId: string, event: Event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  tasks.close(moduleId);
+  if (tasks.active) {
+    router.push(`/m/${tasks.active}`);
+  }
+};
+
+const onKey = (event: KeyboardEvent, moduleId: string) => {
+  const ids = tasks.open;
+  const index = ids.indexOf(moduleId);
+  if (event.key === 'ArrowRight' && ids[index + 1]) {
+    activate(ids[index + 1]);
+  } else if (event.key === 'ArrowLeft' && ids[index - 1]) {
+    activate(ids[index - 1]);
+  } else if (event.key === 'Enter' || event.key === ' ') {
+    activate(moduleId);
+  } else if (event.key === 'Delete' || event.key === 'Backspace') {
+    closeTask(moduleId, event);
+  }
+};
+</script>
+
+<template>
+  <nav
+    class="app-taskbar"
+    data-taskbar
+    :data-compact="compactTaskbar ? 'true' : 'false'"
+    :data-sheet="bottomSheetSwitcher ? 'true' : 'false'"
+    :aria-label="t('taskbar.label')"
+  >
+    <div
+      v-if="bottomSheetSwitcher"
+      class="app-taskbar__sheet"
+    >
+      <CButton
+        color="secondary"
+        variant="ghost"
+        class="app-taskbar__touch"
+        :aria-expanded="sheetOpen"
+        @click="sheetOpen = !sheetOpen"
+      >
+        {{ t('taskbar.switcher') }}
+        <span v-if="tasks.open.length" class="ms-1">({{ tasks.open.length }})</span>
+      </CButton>
+      <ul v-if="sheetOpen" class="app-taskbar__sheet-list">
+        <li v-for="id in tasks.open" :key="id">
+          <button type="button" class="app-taskbar__sheet-item" @click="activate(id)">
+            {{ titleFor(id) }}
+          </button>
+        </li>
+      </ul>
+    </div>
+    <div
+      v-else
+      class="app-taskbar__row"
+      role="tablist"
+    >
+      <div
+        v-for="id in sliced.shown"
+        :key="id"
+        class="app-taskbar__item"
+        :data-active="tasks.active === id ? 'true' : 'false'"
+      >
+        <button
+          type="button"
+          class="app-taskbar__btn app-taskbar__touch"
+          role="tab"
+          :aria-selected="tasks.active === id"
+          :title="titleFor(id)"
+          @click="activate(id)"
+          @keydown="onKey($event, id)"
+        >
+          <CIcon :icon="iconFor(id)" />
+          <span class="app-taskbar__label">{{ titleFor(id) }}</span>
+        </button>
+        <button
+          type="button"
+          class="app-taskbar__close app-taskbar__touch"
+          :aria-label="t('taskbar.close', { name: titleFor(id) })"
+          @click="closeTask(id, $event)"
+        >
+          <CIcon icon="cil-x" />
+        </button>
+      </div>
+      <CDropdown v-if="sliced.overflow.length" variant="nav-item">
+        <CDropdownToggle caret class="app-taskbar__touch">
+          {{ t('taskbar.more') }}
+        </CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem
+            v-for="id in sliced.overflow"
+            :key="id"
+            component="button"
+            type="button"
+            @click="activate(id)"
+          >
+            {{ titleFor(id) }}
+          </CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </div>
+    <p v-if="!tasks.open.length" class="app-taskbar__empty mb-0">{{ t('taskbar.empty') }}</p>
+  </nav>
+</template>

package/templates/frontend/src/components/ModuleLayout.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, markRaw, ref, watch, type Component } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { CNav, CNavItem, CNavLink } from '@coreui/vue';
+
+import { usePermissions } from '@/contracts/usePermissions';
+import { localized, useI18n } from '@/i18n';
+import {
+  findModule,
+  firstAllowedTab,
+  visibleEntityTabs,
+  type ModuleManifest
+} from '@/modules/manifest';
+
+const props = defineProps<{ moduleId: string }>();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { roles } = usePermissions();
+
+const mod = computed<ModuleManifest | undefined>(() => findModule(props.moduleId));
+
+const tabs = computed(() => {
+  const manifest = mod.value;
+  if (!manifest) return [];
+  const entities = visibleEntityTabs(manifest, roles.value).map((entity) => ({
+    id: entity.id,
+    label: localized(entity.title),
+    kind: 'entity' as const
+  }));
+  return [
+    ...entities,
+    { id: 'dashboard', label: t('nav.dashboard'), kind: 'dashboard' as const }
+  ];
+});
+
+const activeTab = computed(() => {
+  const tab = typeof route.params.tab === 'string' ? route.params.tab : '';
+  if (tabs.value.some((item) => item.id === tab)) return tab;
+  const manifest = mod.value;
+  return manifest ? firstAllowedTab(manifest, roles.value) : 'dashboard';
+});
+
+watch(
+  [() => props.moduleId, tabs, () => route.params.tab, () => route.name],
+  () => {
+    if (route.name !== 'Module') return;
+    if (route.params.moduleId !== props.moduleId) return;
+    const tab = typeof route.params.tab === 'string' ? route.params.tab : '';
+    if (!mod.value) return;
+    if (!tab || !tabs.value.some((item) => item.id === tab)) {
+      const next = firstAllowedTab(mod.value, roles.value);
+      if (route.path !== `/m/${props.moduleId}/${next}`) {
+        router.replace(`/m/${props.moduleId}/${next}`);
+      }
+    }
+  },
+  { immediate: true }
+);
+
+const loaded = ref<Record<string, Component>>({});
+
+watch(
+  [activeTab, mod],
+  async () => {
+    const manifest = mod.value;
+    const tab = activeTab.value;
+    if (!manifest || loaded.value[tab]) return;
+    if (tab === 'dashboard' && manifest.dashboard) {
+      const chunk = await manifest.dashboard.load();
+      loaded.value = { ...loaded.value, dashboard: markRaw(chunk.default) };
+      return;
+    }
+    const entity = manifest.entities.find((item) => item.id === tab);
+    if (!entity) return;
+    const chunk = await entity.load();
+    loaded.value = { ...loaded.value, [tab]: markRaw(chunk.default) };
+  },
+  { immediate: true }
+);
+
+const selectTab = (tabId: string) => {
+  router.push(`/m/${props.moduleId}/${tabId}`);
+};
+</script>
+
+<template>
+  <div v-if="mod" class="module-layout">
+    <CNav variant="underline" class="module-tabs mb-3" data-module-tabs role="tablist">
+      <CNavItem v-for="tab in tabs" :key="tab.id">
+        <CNavLink
+          component="button"
+          type="button"
+          role="tab"
+          :active="tab.id === activeTab"
+          :aria-selected="tab.id === activeTab"
+          @click="selectTab(tab.id)"
+        >
+          {{ tab.label }}
+        </CNavLink>
+      </CNavItem>
+    </CNav>
+    <div
+      v-for="tab in tabs"
+      :key="tab.id"
+      v-show="tab.id === activeTab"
+      class="module-pane"
+      role="tabpanel"
+    >
+      <component :is="loaded[tab.id]" v-if="loaded[tab.id]" />
+      <p v-else class="text-body-secondary">{{ t('app.loading') }}</p>
+    </div>
+  </div>
+  <p v-else class="text-danger">{{ t('module.unknown', { id: moduleId }) }}</p>
+</template>

package/templates/frontend/src/components/NetworkActivity.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+import {
+  CBadge,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CSpinner
+} from '@coreui/vue';
+
+import { useI18n } from '@/i18n';
+import { useNetworkStore } from '@/stores/network';
+
+const network = useNetworkStore();
+const { t } = useI18n();
+
+onMounted(() => network.start());
+onUnmounted(() => network.stop());
+
+const statusColor = (ok: boolean, status?: number): string => {
+  if (ok) return 'success';
+  return status && status < 500 ? 'warning' : 'danger';
+};
+</script>
+
+<template>
+  <CDropdown variant="nav-item" placement="bottom-end" :aria-label="t('network.title')">
+    <CDropdownToggle :caret="false">
+      <span class="position-relative d-inline-flex align-items-center">
+        <CSpinner v-if="network.inFlight > 0" color="primary" size="sm" :aria-label="t('network.inFlight', { count: network.inFlight })" />
+        <CIcon v-else icon="cil-cloud-download" size="lg" />
+        <CBadge
+          v-if="network.inFlight > 0"
+          color="primary"
+          shape="rounded-pill"
+          class="position-absolute top-0 start-100 translate-middle"
+        >
+          {{ network.inFlight }}
+        </CBadge>
+      </span>
+    </CDropdownToggle>
+    <CDropdownMenu class="pt-0" style="min-width: 22rem">
+      <CDropdownItem
+        v-if="network.recent.length === 0"
+        disabled
+        class="text-body-secondary"
+      >
+        {{ t('network.empty') }}
+      </CDropdownItem>
+      <CDropdownItem
+        v-for="(item, index) in network.recent"
+        :key="`${item.operationId}-${index}`"
+        class="d-flex align-items-center gap-2"
+      >
+        <CBadge :color="statusColor(item.ok, item.status)" shape="rounded-pill">
+          {{ item.status ?? 'ERR' }}
+        </CBadge>
+        <span class="fw-semibold">{{ item.operationId }}</span>
+        <span class="text-body-secondary small ms-auto">{{ item.durationMs ?? 0 }} ms</span>
+      </CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</template>

package/templates/frontend/src/components/OasFormField.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { CFormCheck, CFormInput, CFormLabel } from '@coreui/vue';
+
+import SearchableEnumInput from '@/components/SearchableEnumInput.vue';
+import type { FieldDescriptor } from '@/contracts/formSchema';
+import { fieldHelp, fieldLabel } from '@/contracts/labels';
+
+/**
+ * Renders one OAS field descriptor (JUM-766 + JUM-768): type/format/required/
+ * lengths/enum/pattern/default/example all come from the spec — this component
+ * owns nothing static about the field. Enums render as a searchable dropdown
+ * (native datalist: typing filters the options). maxlength always applies —
+ * declared or derived from the mask — so over-typing is blocked at the input,
+ * never "valid until it isn't".
+ */
+const props = defineProps<{
+  descriptor: FieldDescriptor;
+  modelValue: unknown;
+  mask?: (raw: string) => string;
+  maskCap?: number;
+  invalid?: string | null;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: unknown];
+}>();
+
+const inputId = computed(() => `oas-field-${props.descriptor.name}`);
+
+// Effective cap: declared maxLength wins; a mask derives its own length.
+const maxLength = computed(() => props.descriptor.maxLength ?? props.maskCap);
+
+const isNumericField = computed(() => Boolean(
+  props.descriptor.pattern && /^\^\\[dsS]|^\^\\d/.test(props.descriptor.pattern)
+));
+
+const text = computed({
+  get: () => (props.modelValue === undefined || props.modelValue === null
+    ? ''
+    : String(props.modelValue)),
+  set: (value: string) => {
+    emit('update:modelValue', props.mask ? props.mask(value) : value);
+  }
+});
+
+const checked = computed({
+  get: () => Boolean(props.modelValue ?? props.descriptor.default ?? false),
+  set: (value: boolean) => emit('update:modelValue', value)
+});
+
+const onKeypress = (event: KeyboardEvent) => {
+  if (isNumericField.value && event.key.length === 1 && !/[\d+]/.test(event.key)) {
+    event.preventDefault();
+  }
+};
+
+// Label from the contract (x-label → title → humanized name); the OAS
+// description is help text under the control (JUM-780/781).
+const label = computed(() => fieldLabel(props.descriptor));
+const help = computed(() => fieldHelp(props.descriptor));
+const placeholder = computed(() => props.descriptor.example ?? label.value);
+</script>
+
+<template>
+  <div class="mb-3">
+    <template v-if="descriptor.type === 'boolean'">
+      <CFormCheck
+        :id="inputId"
+        v-model="checked"
+        :label="label"
+      />
+      <div v-if="help" class="form-text">{{ help }}</div>
+    </template>
+    <template v-else>
+      <CFormLabel :for="inputId">
+        {{ label }}
+        <span v-if="descriptor.required" class="text-danger">*</span>
+      </CFormLabel>
+      <template v-if="descriptor.enum">
+        <SearchableEnumInput
+          :id="inputId"
+          :model-value="text"
+          :options="descriptor.enum"
+          :maxlength="maxLength"
+          :aria-label="descriptor.name"
+          :invalid="Boolean(invalid)"
+          @update:model-value="text = $event"
+        />
+      </template>
+      <CFormInput
+        v-else
+        :id="inputId"
+        v-model="text"
+        :type="descriptor.format === 'password' ? 'password' : 'text'"
+        :placeholder="placeholder"
+        :required="descriptor.required"
+        :minlength="descriptor.minLength"
+        :maxlength="maxLength"
+        :pattern="descriptor.pattern"
+        :invalid="Boolean(invalid)"
+        @keypress="onKeypress"
+      />
+      <div v-if="invalid" class="text-danger small mt-1" role="alert">{{ invalid }}</div>
+      <div v-else-if="help" class="form-text">{{ help }}</div>
+    </template>
+  </div>
+</template>

package/templates/frontend/src/components/SearchableEnumInput.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { CFormInput } from '@coreui/vue';
+
+import { t } from '@/i18n';
+
+/**
+ * Searchable enum input (JUM-769): a text input bound to a native datalist
+ * (typing filters the options, zero deps) plus a visible "▾" affordance so
+ * the control reads as a dropdown, not a plain text field. Options come from
+ * the OAS enum — never hardcoded (requirement 136).
+ *
+ * With `{ value, label }` options the input shows the **label** and emits the
+ * **value** (JUM-781): an organization reference displays "ACME", never the
+ * uuid, while the form body still carries the id.
+ */
+type Option = string | { value: string; label: string };
+
+const props = defineProps<{
+  id: string;
+  modelValue: string;
+  /** Plain values, or { value, label } pairs (labels render in the dropdown). */
+  options: Option[];
+  maxlength?: number;
+  ariaLabel?: string;
+  placeholder?: string;
+  invalid?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const optionValue = (option: Option) => (typeof option === 'string' ? option : option.value);
+const optionLabel = (option: Option) => (typeof option === 'string' ? option : option.label);
+
+const labelFor = (value: string): string => {
+  const match = props.options.find((option) => optionValue(option) === value);
+  return match ? optionLabel(match) : value;
+};
+
+/** What the user sees: the label of the selected value, or their in-progress text. */
+const text = ref(labelFor(props.modelValue));
+
+watch(
+  () => [props.modelValue, props.options] as const,
+  () => {
+    const selected = props.options.find((option) => optionValue(option) === props.modelValue);
+    if (selected) {
+      text.value = optionLabel(selected);
+      return;
+    }
+    const typed = props.options.find((option) => (
+      optionLabel(option) === props.modelValue || optionLabel(option) === text.value
+    ));
+    if (typed) {
+      text.value = optionLabel(typed);
+      const value = optionValue(typed);
+      if (value !== props.modelValue) emit('update:modelValue', value);
+      return;
+    }
+    text.value = labelFor(props.modelValue);
+  }
+);
+
+const onInput = (raw: string): void => {
+  text.value = raw;
+  // A typed label (or a raw value) that matches an option resolves to its value;
+  // anything else is passed through so plain enums keep free typing + validation.
+  const byLabel = props.options.find((option) => optionLabel(option) === raw);
+  const byValue = props.options.find((option) => optionValue(option) === raw);
+  emit('update:modelValue', byLabel ? optionValue(byLabel) : byValue ? optionValue(byValue) : raw);
+};
+
+const placeholderText = computed(() => props.placeholder ?? t('crud.typeToFilter'));
+</script>
+
+<template>
+  <div class="oas-enum-input">
+    <CFormInput
+      :id="id"
+      :model-value="text"
+      type="text"
+      :list="`${id}-list`"
+      :aria-label="ariaLabel"
+      :placeholder="placeholderText"
+      :maxlength="maxlength"
+      :invalid="invalid"
+      autocomplete="off"
+      @update:model-value="onInput(String($event))"
+    />
+    <span class="oas-enum-caret" aria-hidden="true">▾</span>
+    <datalist :id="`${id}-list`">
+      <option
+        v-for="option in options"
+        :key="optionValue(option)"
+        :value="optionLabel(option)"
+      />
+    </datalist>
+  </div>
+</template>
+
+<style scoped>
+.oas-enum-input {
+  position: relative;
+}
+
+.oas-enum-caret {
+  position: absolute;
+  right: 0.6rem;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--cui-secondary-color, #6b7785);
+  font-size: 0.85rem;
+}
+</style>