@omnitend/dashboard-for-laravel 0.22.0 → 0.23.0

package/resources/js/components/extended/DXUserAvatar.vue

@@ -0,0 +1,104 @@
+<!--
+  @component
+  The circular user avatar shown in the dashboard navbar's user menu: a single
+  initial on a solid disc, with an optional notification dot.
+
+  It exists as its own component because `DXDashboardNavbar`'s `user-icon` slot
+  is one consumers routinely *decorate* rather than replace — adding an unread
+  badge, wrapping it in a link. The navbar's styles are scoped, so slot content
+  (compiled in the consumer's scope) can't reuse them; without this component
+  every override starts by re-implementing the avatar's CSS, which then drifts
+  from the theme. Rendering it here means an override is one line and stays on
+  theme.
+-->
+<template>
+  <div class="dx-user-avatar">
+    <!-- `.user-avatar` (not a `dx-`-prefixed name) because it's the documented
+         theming hook consumers already override — see the theming guide. -->
+    <span class="user-avatar">
+      <!-- @slot Replaces the initial inside the disc (e.g. a photo or an icon). -->
+      <slot>{{ resolvedInitial }}</slot>
+    </span>
+
+    <span
+      v-if="badge"
+      class="dx-user-avatar__badge"
+      :class="`bg-${badgeVariant}`"
+    >
+      <span class="visually-hidden">{{ badgeLabel }}</span>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ColorVariant } from "bootstrap-vue-next";
+
+const props = withDefaults(
+  defineProps<{
+    /** The user whose initial is shown. The first letter of `name` is used. */
+    user?: { name: string; [key: string]: any } | null;
+
+    /** Overrides the initial derived from `user.name` (e.g. two-letter initials). */
+    initial?: string;
+
+    /** Show a notification dot on the avatar (e.g. unread updates). */
+    badge?: boolean;
+
+    /** Colour of the notification dot. */
+    badgeVariant?: ColorVariant;
+
+    /**
+     * Accessible text for the notification dot, announced to screen readers
+     * (the dot itself is a colour-only signal). Ignored unless `badge` is set.
+     */
+    badgeLabel?: string;
+  }>(),
+  {
+    user: null,
+    initial: "",
+    badge: false,
+    badgeVariant: "danger",
+    badgeLabel: "Unread notifications",
+  },
+);
+
+const resolvedInitial = computed(() => {
+  if (props.initial) return props.initial;
+  return props.user?.name?.charAt(0).toUpperCase() ?? "";
+});
+</script>
+
+<style scoped>
+/* The disc, not the root, carries the size: the root is a positioning context
+   for the badge, and giving it the disc's dimensions would clip the dot. */
+.dx-user-avatar {
+  position: relative;
+  display: inline-flex;
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--bs-dark);
+  color: var(--bs-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.dx-user-avatar__badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  /* Ring the dot in the bar's own background so it reads as a separate mark
+     rather than a bite out of the disc's edge. */
+  box-shadow: 0 0 0 2px var(--bs-body-bg);
+}
+</style>

package/resources/js/index.ts

@@ -24,6 +24,7 @@ export { default as DXBasicForm } from "./components/extended/DXBasicForm.vue";
 export { default as DXTable } from "./components/extended/DXTable.vue";
 export { default as DXDashboardSidebar } from "./components/extended/DXDashboardSidebar.vue";
 export { default as DXDashboardNavbar } from "./components/extended/DXDashboardNavbar.vue";
+export { default as DXUserAvatar } from "./components/extended/DXUserAvatar.vue";
 
 // Base components (wrapped Bootstrap with theming)
 export { default as DAccordion } from "./components/base/DAccordion.vue";

package/resources/js/types/index.ts

@@ -293,6 +293,31 @@ export interface FieldDefinition {
      */
     readonly?: MaybeFn<boolean>;
 
+    /**
+     * Display the value as static text instead of a control — no border, no
+     * input box (Bootstrap's `.form-control-plaintext`). For values a
+     * profile/settings page shows but never lets you edit, where a `readonly`
+     * input still reads as "you could edit this, but can't".
+     *
+     * Implies read-only, for every field type. Anything backed by a real input
+     * — the text family, textarea, currency, percentage, autocomplete — renders
+     * as static text; control types with no native readonly state
+     * (select/radio/checkbox/switch/file) are disabled instead, exactly as they
+     * are for `readonly`.
+     *
+     * Enforced over `inputProps`: unlike the field's other bindings, which
+     * `inputProps` may override, a plaintext field cannot be made editable
+     * again through it.
+     */
+    plaintext?: MaybeFn<boolean>;
+
+    /**
+     * Only for `type: "password"`. Show the reveal (eye) toggle that switches
+     * the input between masked and plain text. Defaults to `true` — set
+     * `false` to render a bare password input.
+     */
+    revealable?: boolean;
+
     /**
      * Conditionally show or hide this field. When omitted the field is
      * always visible. Boolean or a function of the form model; evaluated