aetherx-dt-ui 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cli/index.mjs +20 -22
  2. package/package.json +1 -1
  3. package/src/registry/components/layout/DtLayoutSidebar.vue +2 -2
  4. package/src/registry/components/layout/DtProfileModal.vue +9 -2
package/dist/cli/index.mjs CHANGED
@@ -131,30 +131,30 @@ This project uses dt-ui components. Below is the complete API reference for all
131
131
 
132
132
  All components use CSS custom properties prefixed with \`--dt-\` defined in \`base.css\`. Override them in your project's CSS to customize the look.
133
133
 
134
- ### Available Tokens
134
+ ### Key Tokens
135
135
 
136
136
  | Token | Default (Light) | Description |
137
137
  |-------|-----------------|-------------|
138
- | \`--dt-primary\` | \`hsl(190 100% 35%)\` | Brand/primary color (RGB 0, 150, 178) |
139
- | \`--dt-primary-hover\` | \`hsl(190 100% 28%)\` | Primary hover state |
140
- | \`--dt-primary-foreground\` | \`hsl(0 0% 100%)\` | Text on primary bg |
141
- | \`--dt-secondary\` | \`hsl(220 13% 46%)\` | Secondary color (RGB 102, 112, 133) |
142
- | \`--dt-secondary-foreground\` | \`hsl(0 0% 100%)\` | Text on secondary bg |
143
- | \`--dt-destructive\` | \`hsl(0 72% 51%)\` | Destructive/danger color |
144
- | \`--dt-success\` | \`hsl(142 72% 40%)\` | Success color |
145
- | \`--dt-warning\` | \`hsl(38 92% 50%)\` | Warning color |
146
- | \`--dt-border\` | \`hsl(190 13% 88%)\` | Border color |
147
- | \`--dt-ring\` | \`hsl(190 100% 35%)\` | Focus ring color |
148
- | \`--dt-radius-sm\` | \`0.25rem\` | Small border radius |
149
- | \`--dt-radius-md\` | \`0.375rem\` | Medium border radius |
150
- | \`--dt-radius-lg\` | \`0.5rem\` | Large border radius |
151
- | \`--dt-shadow-sm\` | \`0 1px 2px...\` | Small shadow |
152
- | \`--dt-shadow-md\` | \`0 4px 6px...\` | Medium shadow |
153
- | \`--dt-shadow-lg\` | \`0 10px 15px...\` | Large shadow |
138
+ | \`--dt-color-accent\` | \`#0096b2\` | Brand/primary color |
139
+ | \`--dt-color-accent-hover\` | \`#007a94\` | Primary hover state |
140
+ | \`--dt-color-accent-foreground\` | \`#ffffff\` | Text on primary bg |
141
+ | \`--dt-color-text\` | \`#101828\` | Main text color |
142
+ | \`--dt-color-text-secondary\` | \`#667085\` | Secondary text |
143
+ | \`--dt-color-background\` | \`#ffffff\` | Page background |
144
+ | \`--dt-color-background-tertiary\` | \`#f2f5f7\` | Tertiary surface |
145
+ | \`--dt-color-border\` | \`#dfe2e9\` | Border color |
146
+ | \`--dt-color-error\` | \`#ed5151\` | Error/destructive color |
147
+ | \`--dt-color-success\` | \`#12b76a\` | Success color |
148
+ | \`--dt-color-warning\` | \`#f79009\` | Warning color |
149
+ | \`--dt-color-ring\` | \`#0096b2\` | Focus ring color |
150
+ | \`--dt-radius-sm\` | \`6px\` | Small radius (badges) |
151
+ | \`--dt-radius-base\` | \`12px\` | Base radius (inputs, buttons) |
152
+ | \`--dt-radius-lg\` | \`16px\` | Large radius (cards, rows) |
153
+ | \`--dt-font-family\` | \`'Lab Grotesque', system-ui\` | Font family |
154
154
 
155
155
  ### Dark Mode
156
156
 
157
- Add the \`dark\` class to your \`<html>\` or \`<body>\` element. All tokens automatically adjust.
157
+ Set \`data-theme="dark"\` on \`<html>\`. All tokens automatically adjust.
158
158
 
159
159
  ---
160
160
 
@@ -178,7 +178,7 @@ function appendComponentDoc(componentName) {
178
178
  createAgentMd();
179
179
  }
180
180
  const existing = fs.readFileSync(agentPath, "utf-8");
181
- if (existing.includes(`### ${component.name}`)) return;
181
+ if (existing.includes(`# ${component.name}`)) return;
182
182
  const separator = "\n---\n\n";
183
183
  fs.appendFileSync(agentPath, docContent + separator, "utf-8");
184
184
  }
@@ -388,9 +388,7 @@ async function addCommand(componentNames) {
388
388
  if (!config.installedComponents.includes(componentName)) {
389
389
  config.installedComponents.push(componentName);
390
390
  }
391
- if (config.agent) {
392
- appendComponentDoc(componentName);
393
- }
391
+ appendComponentDoc(componentName);
394
392
  installed.push(componentName);
395
393
  s.stop(`${pc.green("\u2713")} ${comp.name} installed`);
396
394
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aetherx-dt-ui",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "Lightweight, customizable Vue components for DT projects",
5
5
  "type": "module",
6
6
  "bin": {
package/src/registry/components/layout/DtLayoutSidebar.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <script lang="ts" setup>
2
- import { ref, computed, type Component } from 'vue'
2
+ import { ref, computed } from 'vue'
3
3
 
4
4
  export interface DtNavItem {
5
5
  to: string
6
- icon?: Component
6
+ icon?: object
7
7
  label: string
8
8
  }
9
9
 
package/src/registry/components/layout/DtProfileModal.vue CHANGED
@@ -68,6 +68,7 @@ const props = withDefaults(defineProps<{
68
68
  menuItems?: DtProfileMenuItem[]
69
69
  isOrganization?: boolean
70
70
  profileUrl?: string
71
+ resourceUrl?: string
71
72
  }>(), {
72
73
  locale: 'uz',
73
74
  theme: 'light',
@@ -103,6 +104,12 @@ const displayDetails = computed(() => {
103
104
  return props.user.phone_numbers?.[0]?.number || ''
104
105
  })
105
106
 
107
+ const avatarUrl = computed(() => {
108
+ if (!props.user.logo_url) return null
109
+ if (props.resourceUrl) return `${props.resourceUrl}/${props.user.logo_url}`
110
+ return props.user.logo_url
111
+ })
112
+
106
113
  const profileInitials = computed(() => {
107
114
  const first = props.user.first_name?.[0] || ''
108
115
  const last = props.user.last_name?.[0] || ''
@@ -168,8 +175,8 @@ const onMenuItemClick = (item: DtProfileMenuItem) => {
168
175
  </div>
169
176
 
170
177
  <div class="dt-profile-modal__user">
171
- <div class="dt-profile-modal__avatar" :class="{ 'dt-profile-modal__avatar--initials': !user.logo_url }">
172
- <img v-if="user.logo_url" :src="user.logo_url" :alt="displayName" />
178
+ <div class="dt-profile-modal__avatar" :class="{ 'dt-profile-modal__avatar--initials': !avatarUrl }">
179
+ <img v-if="avatarUrl" :src="avatarUrl" :alt="displayName" />
173
180
  <span v-else>{{ profileInitials }}</span>
174
181
  </div>
175
182
  <h3 class="dt-profile-modal__name">{{ displayName }}</h3>