aetherx-dt-ui 0.1.6 → 0.1.8

package/dist/cli/index.mjs

@@ -106,6 +106,12 @@ function getStylesContent() {
   const registryDir = getRegistryDir();
   return fs.readFileSync(path.join(registryDir, "styles", "base.css"), "utf-8");
 }
+function getTableCellsContent() {
+  const registryDir = getRegistryDir();
+  const filePath = path.join(registryDir, "styles", "table-cells.css");
+  if (!fs.existsSync(filePath)) return "";
+  return fs.readFileSync(filePath, "utf-8");
+}
 function getLibContent() {
   const registryDir = getRegistryDir();
   return fs.readFileSync(path.join(registryDir, "lib", "utils.ts"), "utf-8");
@@ -222,10 +228,6 @@ async function initCommand() {
         message: "Where should lib utils go?",
         initialValue: "src/lib",
         placeholder: "src/lib"
-      }),
-      agent: () => p.confirm({
-        message: "Include AI agent documentation (AGENT.md)?",
-        initialValue: true
       })
     },
     {
@@ -242,7 +244,7 @@ async function initCommand() {
     libDir: answers.libDir,
     stylesDir,
     installedComponents: [],
-    agent: answers.agent
+    agent: true
   };
   const s = p.spinner();
   writeConfig(config);
@@ -255,6 +257,16 @@ async function initCommand() {
     "utf-8"
   );
   s.stop("base.css copied");
+  const tableCellsContent = getTableCellsContent();
+  if (tableCellsContent) {
+    s.start("Copying table-cells.css...");
+    fs.writeFileSync(
+      path.join(stylesPath, "table-cells.css"),
+      tableCellsContent,
+      "utf-8"
+    );
+    s.stop("table-cells.css copied");
+  }
   s.start("Copying lib/utils.ts...");
   const libPath = path.resolve(process.cwd(), answers.libDir);
   fs.mkdirSync(libPath, { recursive: true });
@@ -264,11 +276,9 @@ async function initCommand() {
     "utf-8"
   );
   s.stop("lib/utils.ts copied");
-  if (answers.agent) {
-    s.start("Creating AGENT.md...");
-    createAgentMd();
-    s.stop("AGENT.md created");
-  }
+  s.start("Creating AGENT.md...");
+  createAgentMd();
+  s.stop("AGENT.md created");
   p.note(
     [
       `${pc.bold("Next steps:")}`,
@@ -454,6 +464,16 @@ async function updateCommand() {
     "utf-8"
   );
   s.stop("base.css updated");
+  const tableCellsContent = getTableCellsContent();
+  if (tableCellsContent) {
+    s.start("Updating table-cells.css...");
+    fs.writeFileSync(
+      path.join(stylesPath, "table-cells.css"),
+      tableCellsContent,
+      "utf-8"
+    );
+    s.stop("table-cells.css updated");
+  }
   s.start("Updating lib/utils.ts...");
   const libPath = path.resolve(process.cwd(), config.libDir);
   fs.mkdirSync(libPath, { recursive: true });
@@ -492,17 +512,15 @@ async function updateCommand() {
       }
     }
   }
-  if (config.agent) {
-    s.start("Rebuilding AGENT.md...");
-    rebuildAgentMd(config);
-    s.stop("AGENT.md rebuilt");
-  }
+  s.start("Rebuilding AGENT.md...");
+  rebuildAgentMd(config);
+  s.stop("AGENT.md rebuilt");
   p.note(
     [
       `${pc.green("\u2713")} base.css \u2014 latest design tokens`,
       `${pc.green("\u2713")} lib/utils.ts \u2014 latest helpers`,
-      config.agent ? `${pc.green("\u2713")} AGENT.md \u2014 rebuilt with current components` : ""
-    ].filter(Boolean).join("\n"),
+      `${pc.green("\u2713")} AGENT.md \u2014 rebuilt with current components`
+    ].join("\n"),
     "Updated files"
   );
   p.outro(pc.green("dt-ui updated successfully!"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetherx-dt-ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Lightweight, customizable Vue components for DT projects",
   "type": "module",
   "bin": {

package/src/registry/components/layout/DtLayoutHeader.vue

@@ -1,18 +1,21 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted } from 'vue'
 
 const props = withDefaults(defineProps<{
   badge?: string
   profileName?: string
   profileAvatar?: string
+  activeModule?: string
+  envMode?: 'dev' | 'preprod' | 'prod'
   showModulesButton?: boolean
 }>(), {
+  activeModule: 'cabinet',
+  envMode: 'dev',
   showModulesButton: true,
 })
 
 defineEmits<{
   'toggle-profile': []
-  'open-modules': []
 }>()
 
 const profileInitials = computed(() => {
@@ -20,6 +23,21 @@ const profileInitials = computed(() => {
   const parts = props.profileName.trim().split(/\s+/)
   return parts.map((p) => p[0]).join('').toUpperCase().slice(0, 2)
 })
+
+const openModules = () => {
+  if ((window as any).$showModulesModal) {
+    ;(window as any).$showModulesModal()
+  }
+}
+
+onMounted(() => {
+  if ((window as any).$loadDtModulesModal) {
+    ;(window as any).$loadDtModulesModal({
+      mode: props.envMode,
+      activeModule: props.activeModule,
+    })
+  }
+})
 </script>
 
 <template>
@@ -35,13 +53,18 @@ const profileInitials = computed(() => {
       <button
         v-if="showModulesButton"
         class="dt-header__circle-btn"
-        @click="$emit('open-modules')"
+        @click="openModules"
       >
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-          <rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
-          <rect x="14" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
-          <rect x="3" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
-          <rect x="14" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
+          <path d="M17 18C17 18.5523 17.4477 19 18 19C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17C17.4477 17 17 17.4477 17 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M5 18C5 18.5523 5.44772 19 6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M5 12C5 12.5523 5.44772 13 6 13C6.55228 13 7 12.5523 7 12C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5C17.4477 5 17 5.44772 17 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M11 6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5C5.44772 5 5 5.44772 5 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </button>
 

package/src/registry/components/layout/DtProfileModal.vue

@@ -23,6 +23,7 @@ type Locale = 'uz' | 'ru' | 'en'
 // Built-in i18n — shared across all 23 modules
 const i18n: Record<Locale, Record<string, string>> = {
   ru: {
+    profile: 'Профиль',
     appearance: 'Внешний вид',
     language: 'Язык',
     logout: 'Выйти',
@@ -31,6 +32,7 @@ const i18n: Record<Locale, Record<string, string>> = {
     systemTheme: 'Системная',
   },
   uz: {
+    profile: 'Profil',
     appearance: 'Tashqi ko\'rinish',
     language: 'Til',
     logout: 'Chiqish',
@@ -39,6 +41,7 @@ const i18n: Record<Locale, Record<string, string>> = {
     systemTheme: 'Tizim',
   },
   en: {
+    profile: 'Profile',
     appearance: 'Appearance',
     language: 'Language',
     logout: 'Logout',
@@ -149,6 +152,11 @@ onUnmounted(() => {
   document.removeEventListener('keydown', onKeydown)
 })
 
+const openProfile = () => {
+  if (props.profileUrl) window.open(props.profileUrl, '_blank')
+  close()
+}
+
 const onMenuItemClick = (item: DtProfileMenuItem) => {
   if (item.href) {
     window.open(item.href, '_blank')
@@ -186,12 +194,12 @@ const onMenuItemClick = (item: DtProfileMenuItem) => {
           <div class="dt-profile-modal__menu">
             <!-- Profile link -->
             <ul class="dt-profile-modal__list">
-              <li v-if="profileUrl" class="dt-profile-modal__item" @click="window.open(profileUrl, '_blank'); close()">
+              <li v-if="profileUrl" class="dt-profile-modal__item" @click="openProfile">
                 <svg class="dt-profile-modal__icon" width="22" height="22" viewBox="0 0 22 22" fill="none">
                   <circle cx="11" cy="8" r="3.5" stroke="currentColor" stroke-width="1.5"/>
                   <path d="M4.5 18.5C4.5 15 7.36 13 11 13C14.64 13 17.5 15 17.5 18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                 </svg>
-                <span>{{ t('profile') || (locale === 'ru' ? 'Профиль' : locale === 'uz' ? 'Profil' : 'Profile') }}</span>
+                <span>{{ t('profile') }}</span>
               </li>
             </ul>
 

package/src/registry/docs/badge.md

@@ -38,8 +38,8 @@ type BadgeSize = 'sm' | 'default'
 
 | Size | Padding | Font Size |
 |------|---------|-----------|
-| `sm` | 0.125rem 0.5rem | `--dt-text-xs` |
-| `default` | 0.25rem 0.625rem | `--dt-text-sm` |
+| `sm` | 0.125rem 0.375rem | `--dt-text-xs` |
+| `default` | 0.25rem 0.5rem | `--dt-text-xs` |
 
 ## Slots
 

package/src/registry/docs/layout.md

@@ -45,6 +45,8 @@ Pre-styled header with logo area, badge, module switcher button, and profile ava
 | `badge` | `string` | `undefined` | Badge text displayed next to the logo (e.g., "Specialist", "Cabinet"). |
 | `profileName` | `string` | `undefined` | Used to generate avatar initials when no image is provided. |
 | `profileAvatar` | `string` | `undefined` | URL for the profile avatar image. Falls back to initials. |
+| `activeModule` | `string` | `'cabinet'` | The current module's identifier. Passed to the DT modules modal to highlight the active module. |
+| `envMode` | `'dev' \| 'preprod' \| 'prod'` | `'dev'` | Environment mode. Determines which CDN domain the modules modal uses. |
 | `showModulesButton` | `boolean` | `true` | Whether to show the grid modules button. |
 
 #### Events
@@ -52,7 +54,17 @@ Pre-styled header with logo area, badge, module switcher button, and profile ava
 | Event | Payload | Description |
 |-------|---------|-------------|
 | `toggle-profile` | — | Emitted when the profile avatar button is clicked. |
-| `open-modules` | — | Emitted when the modules grid button is clicked. |
+
+#### Modules Modal (Built-in)
+
+The header automatically initializes the DT modules modal on mount using the external `dt-header.js` script. You must include it in your `index.html`:
+
+```html
+<script src="https://cdn.dthub.uz/dt-header/dist/dt-header.js"></script>
+<link rel="stylesheet" href="https://cdn.dthub.uz/dt-header/dist/style.css">
+```
+
+The `activeModule` prop highlights the current module in the grid. The `envMode` prop controls which API environment the modal uses (dev → `.dthub.uz`, preprod → `.predt.uz`, prod → `.dt.uz`).
 
 #### Slots
 
@@ -123,6 +135,7 @@ Fully self-contained profile dropdown with user info, theme switcher, language p
 | `menuItems` | `DtProfileMenuItem[]` | `[]` | Optional extra menu items specific to the module. |
 | `isOrganization` | `boolean` | `false` | If true, displays `user.organization_name` instead of personal name. |
 | `profileUrl` | `string` | `undefined` | URL for the "Profile" link (opens in new tab). If not set, profile link is hidden. |
+| `resourceUrl` | `string` | `undefined` | Base URL for file resources (e.g., `https://resource.dthub.uz/api/file/view-image`). Prepended to `user.logo_url` to build the full avatar URL. |
 
 #### DtUser Interface
 
@@ -242,6 +255,8 @@ const navItems: DtNavItem[] = [
         badge="Specialist"
         :profile-name="store.user?.first_name + ' ' + store.user?.last_name"
         :profile-avatar="store.user?.logo_url"
+        active-module="cabinet"
+        :env-mode="import.meta.env.DEV ? 'dev' : 'prod'"
         @toggle-profile="showProfile = !showProfile"
       >
         <template #logo>
@@ -255,6 +270,7 @@ const navItems: DtNavItem[] = [
             :theme="theme"
             :is-organization="store.isOrganization"
             profile-url="https://id.dthub.uz/cabinet"
+            resource-url="https://resource.dthub.uz/api/file/view-image"
             @theme-change="setTheme"
             @locale-change="setLang"
             @logout="store.logout()"