@data-fair/lib-vuetify 0.1.0

package/date-match-filter.vue

@@ -0,0 +1,104 @@
+<!-- produces a string compatible with the _c_date_match filter of data-fair -->
+
+<template>
+  <v-menu
+    v-model="menu"
+    :close-on-content-click="false"
+    offset-y
+    min-width="auto"
+  >
+    <template #activator="{ props }">
+      <v-btn
+        v-model="date"
+        icon
+        color="white"
+        density="comfortable"
+        class="mx-1 mt-1"
+        v-bind="props"
+      >
+        <v-icon color="primary">
+          mdi-calendar
+        </v-icon>
+      </v-btn>
+    </template>
+    <v-sheet>
+      <h3
+        v-if="rangeMode"
+        class="text-h6 px-2"
+      >
+        Sélectionnez un interval entre 2 dates
+      </h3>
+      <h3
+        v-else
+        class="text-h6 px-2"
+      >
+        Sélectionnez une date
+      </h3>
+      <v-date-picker
+        v-model="date"
+        :multiple="rangeMode"
+        hide-header
+        show-adjacent-months
+        flat
+      />
+    </v-sheet>
+  </v-menu>
+</template>
+
+<script lang="ts">
+// 1 => 01, 12 => 12
+const padTimeComponent = (val: number) => {
+  const s = '' + val
+  return s.length === 1 ? '0' + s : s
+}
+
+// get the the date and short time components expected by date-time picker from a full date
+// 2020-04-03T21:07:43+02:00 => ['2020-04-03', '19:07']
+const getDateTimeParts = (date: Date) => {
+  return [`${date.getFullYear()}-${padTimeComponent(date.getMonth() + 1)}-${padTimeComponent(date.getDate())}`, `${padTimeComponent(date.getHours())}:${padTimeComponent(date.getMinutes())}`]
+}
+
+export default {
+  props: {
+    modelValue: {
+      type: String,
+      default: null
+    },
+    rangeMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  data: () => ({
+    menu: false
+  }),
+  computed: {
+    date: {
+      get (): Date | Date[] | null {
+        if (!this.modelValue) return null
+        if (this.rangeMode) return this.modelValue.split(',').map(v => new Date(v))
+        return this.modelValue ? new Date(this.modelValue) : null
+      },
+      set (value: Date | Date[]) {
+        if (Array.isArray(value)) {
+          const dates = value.map(v => getDateTimeParts(v)[0])
+          dates.sort()
+          const newValue = dates[0] + ',' + dates[dates.length - 1]
+          if (newValue !== this.modelValue) {
+            this.$emit('update:modelValue', dates[0] + ',' + dates[dates.length - 1])
+            if (dates.length >= 2) this.menu = false
+          }
+        } else {
+          const newValue = getDateTimeParts(value)[0] === this.modelValue ? undefined : getDateTimeParts(value)[0]
+          this.$emit('update:modelValue', newValue)
+          this.menu = false
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css">
+</style>

package/date-match-filter.vue.d.ts

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: null;
+    };
+    rangeMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {
+    menu: boolean;
+}, {
+    date: {
+        get(): Date | Date[] | null;
+        set(value: Date | Date[]): void;
+    };
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: null;
+    };
+    rangeMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string;
+    rangeMode: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/date-match-filter.vue.js

@@ -0,0 +1,133 @@
+/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
+// 1 => 01, 12 => 12
+const padTimeComponent = (val) => {
+    const s = '' + val;
+    return s.length === 1 ? '0' + s : s;
+};
+// get the the date and short time components expected by date-time picker from a full date
+// 2020-04-03T21:07:43+02:00 => ['2020-04-03', '19:07']
+const getDateTimeParts = (date) => {
+    return [`${date.getFullYear()}-${padTimeComponent(date.getMonth() + 1)}-${padTimeComponent(date.getDate())}`, `${padTimeComponent(date.getHours())}:${padTimeComponent(date.getMinutes())}`];
+};
+export default (await import('vue')).defineComponent({
+    props: {
+        modelValue: {
+            type: String,
+            default: null
+        },
+        rangeMode: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['update:modelValue'],
+    data: () => ({
+        menu: false
+    }),
+    computed: {
+        date: {
+            get() {
+                if (!this.modelValue)
+                    return null;
+                if (this.rangeMode)
+                    return this.modelValue.split(',').map(v => new Date(v));
+                return this.modelValue ? new Date(this.modelValue) : null;
+            },
+            set(value) {
+                if (Array.isArray(value)) {
+                    const dates = value.map(v => getDateTimeParts(v)[0]);
+                    dates.sort();
+                    const newValue = dates[0] + ',' + dates[dates.length - 1];
+                    if (newValue !== this.modelValue) {
+                        this.$emit('update:modelValue', dates[0] + ',' + dates[dates.length - 1]);
+                        if (dates.length >= 2)
+                            this.menu = false;
+                    }
+                }
+                else {
+                    const newValue = getDateTimeParts(value)[0] === this.modelValue ? undefined : getDateTimeParts(value)[0];
+                    this.$emit('update:modelValue', newValue);
+                    this.menu = false;
+                }
+            }
+        }
+    }
+});
+function __VLS_template() {
+    const __VLS_ctx = {};
+    const __VLS_localComponents = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_components;
+    const __VLS_localDirectives = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_directives;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.VMenu;
+    /** @type { [typeof __VLS_components.VMenu, typeof __VLS_components.vMenu, typeof __VLS_components.VMenu, typeof __VLS_components.vMenu, ] } */
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ modelValue: ((__VLS_ctx.menu)), closeOnContentClick: ((false)), offsetY: (true), minWidth: ("auto"), }));
+    const __VLS_2 = __VLS_1({ modelValue: ((__VLS_ctx.menu)), closeOnContentClick: ((false)), offsetY: (true), minWidth: ("auto"), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { activator: __VLS_thisSlot } = __VLS_nonNullable(__VLS_5.slots);
+        const [{ props }] = __VLS_getSlotParams(__VLS_thisSlot);
+        const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.VBtn;
+        /** @type { [typeof __VLS_components.VBtn, typeof __VLS_components.vBtn, typeof __VLS_components.VBtn, typeof __VLS_components.vBtn, ] } */
+        // @ts-ignore
+        const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ modelValue: ((__VLS_ctx.date)), icon: (true), color: ("white"), density: ("comfortable"), ...{ class: ("mx-1 mt-1") }, ...(props), }));
+        const __VLS_8 = __VLS_7({ modelValue: ((__VLS_ctx.date)), icon: (true), color: ("white"), density: ("comfortable"), ...{ class: ("mx-1 mt-1") }, ...(props), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+        const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
+        /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
+        // @ts-ignore
+        const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ color: ("primary"), }));
+        const __VLS_14 = __VLS_13({ color: ("primary"), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+        __VLS_nonNullable(__VLS_17.slots).default;
+        const __VLS_17 = __VLS_pickFunctionalComponentCtx(__VLS_12, __VLS_14);
+        __VLS_nonNullable(__VLS_11.slots).default;
+        const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
+    }
+    const __VLS_18 = __VLS_resolvedLocalAndGlobalComponents.VSheet;
+    /** @type { [typeof __VLS_components.VSheet, typeof __VLS_components.vSheet, typeof __VLS_components.VSheet, typeof __VLS_components.vSheet, ] } */
+    // @ts-ignore
+    const __VLS_19 = __VLS_asFunctionalComponent(__VLS_18, new __VLS_18({}));
+    const __VLS_20 = __VLS_19({}, ...__VLS_functionalComponentArgsRest(__VLS_19));
+    if (__VLS_ctx.rangeMode) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.h3, __VLS_intrinsicElements.h3)({ ...{ class: ("text-h6 px-2") }, });
+    }
+    else {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.h3, __VLS_intrinsicElements.h3)({ ...{ class: ("text-h6 px-2") }, });
+    }
+    const __VLS_24 = __VLS_resolvedLocalAndGlobalComponents.VDatePicker;
+    /** @type { [typeof __VLS_components.VDatePicker, typeof __VLS_components.vDatePicker, ] } */
+    // @ts-ignore
+    const __VLS_25 = __VLS_asFunctionalComponent(__VLS_24, new __VLS_24({ modelValue: ((__VLS_ctx.date)), multiple: ((__VLS_ctx.rangeMode)), hideHeader: (true), showAdjacentMonths: (true), flat: (true), }));
+    const __VLS_26 = __VLS_25({ modelValue: ((__VLS_ctx.date)), multiple: ((__VLS_ctx.rangeMode)), hideHeader: (true), showAdjacentMonths: (true), flat: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_25));
+    __VLS_nonNullable(__VLS_23.slots).default;
+    const __VLS_23 = __VLS_pickFunctionalComponentCtx(__VLS_18, __VLS_20);
+    const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
+    __VLS_styleScopedClasses['mx-1'];
+    __VLS_styleScopedClasses['mt-1'];
+    __VLS_styleScopedClasses['text-h6'];
+    __VLS_styleScopedClasses['px-2'];
+    __VLS_styleScopedClasses['text-h6'];
+    __VLS_styleScopedClasses['px-2'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    return {
+        slots: __VLS_slots,
+        refs: $refs,
+        attrs: {},
+    };
+}
+;
+let __VLS_self;
+//# sourceMappingURL=date-match-filter.vue.js.map

package/date-range-picker.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  min: { type: String, default: undefined },
+  max: { type: String, default: undefined },
+  label: { type: String, default: undefined }
+})
+
+const model = defineModel({ type: String })
+const initialValue = (model.value || '').split(',')
+const start = ref((initialValue.length && initialValue[0]) || props.min)
+const end = ref((initialValue.length && initialValue[initialValue.length - 1]) || props.max)
+
+watch(model, (val) => {
+  const value = (val || '').split(',')
+  start.value = value.length ? value[0] : undefined
+  end.value = value.length ? value[value.length - 1] : undefined
+})
+
+watch(start, (val) => {
+  const value = [end.value]
+  if (val !== end.value) value.unshift(val)
+  model.value = value.join(',')
+})
+
+watch(end, (val) => {
+  const value = [start.value]
+  if (val !== start.value) value.push(val)
+  model.value = value.join(',')
+})
+</script>
+
+<template>
+  <label
+    v-if="props.label"
+    class="text-body-2 text-medium-emphasis ml-2"
+  >{{ label }}</label>
+  <v-row
+    v-if="model && model.length"
+    class="date-range-picker"
+    align="center"
+  >
+    <v-col class="pr-0">
+      <v-text-field
+        v-model="start"
+        :min="min"
+        :max="max"
+        type="date"
+        density="compact"
+      />
+    </v-col>
+    <span class="pb-6">~</span>
+    <v-col class="pl-0">
+      <v-text-field
+        v-model="end"
+        :min="min"
+        :max="max"
+        type="date"
+        density="compact"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<style>
+.date-range-picker .v-input__control input{
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.date-range-picker .v-input__control label{
+  left: -8px;
+  right: -8px;
+}
+</style>

package/date-range-picker.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    label?: string | undefined;
+    max?: string | undefined;
+    min?: string | undefined;
+    $props: {
+        readonly label?: string | undefined;
+        readonly max?: string | undefined;
+        readonly min?: string | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/date-range-picker.vue.js

@@ -0,0 +1,134 @@
+/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
+import { ref, watch } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    min: { type: String, default: undefined },
+    max: { type: String, default: undefined },
+    label: { type: String, default: undefined }
+});
+const model = defineModel({ type: String });
+const initialValue = (model.value || '').split(',');
+const start = ref((initialValue.length && initialValue[0]) || props.min);
+const end = ref((initialValue.length && initialValue[initialValue.length - 1]) || props.max);
+watch(model, (val) => {
+    const value = (val || '').split(',');
+    start.value = value.length ? value[0] : undefined;
+    end.value = value.length ? value[value.length - 1] : undefined;
+});
+watch(start, (val) => {
+    const value = [end.value];
+    if (val !== end.value)
+        value.unshift(val);
+    model.value = value.join(',');
+});
+watch(end, (val) => {
+    const value = [start.value];
+    if (val !== start.value)
+        value.push(val);
+    model.value = value.join(',');
+});
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        min: { type: String, default: undefined },
+        max: { type: String, default: undefined },
+        label: { type: String, default: undefined }
+    },
+    __typeEmits: {},
+});
+;
+let __VLS_functionalComponentProps;
+const __VLS_defaults = {};
+function __VLS_template() {
+    const __VLS_ctx = {};
+    const __VLS_localComponents = {
+        ...{},
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_components;
+    const __VLS_localDirectives = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_directives;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    if (props.label) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.label, __VLS_intrinsicElements.label)({ ...{ class: ("text-body-2 text-medium-emphasis ml-2") }, });
+        (__VLS_ctx.label);
+    }
+    if (__VLS_ctx.model && __VLS_ctx.model.length) {
+        const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.VRow;
+        /** @type { [typeof __VLS_components.VRow, typeof __VLS_components.vRow, typeof __VLS_components.VRow, typeof __VLS_components.vRow, ] } */
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ class: ("date-range-picker") }, align: ("center"), }));
+        const __VLS_2 = __VLS_1({ ...{ class: ("date-range-picker") }, align: ("center"), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.VCol;
+        /** @type { [typeof __VLS_components.VCol, typeof __VLS_components.vCol, typeof __VLS_components.VCol, typeof __VLS_components.vCol, ] } */
+        // @ts-ignore
+        const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ ...{ class: ("pr-0") }, }));
+        const __VLS_8 = __VLS_7({ ...{ class: ("pr-0") }, }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+        const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.VTextField;
+        /** @type { [typeof __VLS_components.VTextField, typeof __VLS_components.vTextField, ] } */
+        // @ts-ignore
+        const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ modelValue: ((__VLS_ctx.start)), min: ((__VLS_ctx.min)), max: ((__VLS_ctx.max)), type: ("date"), density: ("compact"), }));
+        const __VLS_14 = __VLS_13({ modelValue: ((__VLS_ctx.start)), min: ((__VLS_ctx.min)), max: ((__VLS_ctx.max)), type: ("date"), density: ("compact"), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+        __VLS_nonNullable(__VLS_11.slots).default;
+        const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("pb-6") }, });
+        const __VLS_18 = __VLS_resolvedLocalAndGlobalComponents.VCol;
+        /** @type { [typeof __VLS_components.VCol, typeof __VLS_components.vCol, typeof __VLS_components.VCol, typeof __VLS_components.vCol, ] } */
+        // @ts-ignore
+        const __VLS_19 = __VLS_asFunctionalComponent(__VLS_18, new __VLS_18({ ...{ class: ("pl-0") }, }));
+        const __VLS_20 = __VLS_19({ ...{ class: ("pl-0") }, }, ...__VLS_functionalComponentArgsRest(__VLS_19));
+        const __VLS_24 = __VLS_resolvedLocalAndGlobalComponents.VTextField;
+        /** @type { [typeof __VLS_components.VTextField, typeof __VLS_components.vTextField, ] } */
+        // @ts-ignore
+        const __VLS_25 = __VLS_asFunctionalComponent(__VLS_24, new __VLS_24({ modelValue: ((__VLS_ctx.end)), min: ((__VLS_ctx.min)), max: ((__VLS_ctx.max)), type: ("date"), density: ("compact"), }));
+        const __VLS_26 = __VLS_25({ modelValue: ((__VLS_ctx.end)), min: ((__VLS_ctx.min)), max: ((__VLS_ctx.max)), type: ("date"), density: ("compact"), }, ...__VLS_functionalComponentArgsRest(__VLS_25));
+        __VLS_nonNullable(__VLS_23.slots).default;
+        const __VLS_23 = __VLS_pickFunctionalComponentCtx(__VLS_18, __VLS_20);
+        __VLS_nonNullable(__VLS_5.slots).default;
+        const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
+    }
+    __VLS_styleScopedClasses['text-body-2'];
+    __VLS_styleScopedClasses['text-medium-emphasis'];
+    __VLS_styleScopedClasses['ml-2'];
+    __VLS_styleScopedClasses['date-range-picker'];
+    __VLS_styleScopedClasses['pr-0'];
+    __VLS_styleScopedClasses['pb-6'];
+    __VLS_styleScopedClasses['pl-0'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    return {
+        slots: __VLS_slots,
+        refs: $refs,
+        attrs: {},
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            $props: __VLS_makeOptional(props),
+            ...props,
+            model: model,
+            start: start,
+            end: end,
+        };
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {
+            $props: __VLS_makeOptional(props),
+            ...props,
+        };
+    },
+});
+;
+//# sourceMappingURL=date-range-picker.vue.js.map

package/index.d.ts

@@ -0,0 +1,2 @@
+import { VuetifyOptions } from 'vuetify';
+export declare function defaultOptions(searchParams: Record<string, string>, darkCookie?: boolean): VuetifyOptions;

package/index.js

@@ -0,0 +1,53 @@
+import { fr, en } from 'vuetify/locale'
+const baseColors = {
+  primary: '#1E88E5', // blue.darken1
+  secondary: '#42A5F5', // blue.lighten1,
+  accent: '#FF9800', // orange.base
+  error: '#FF5252', // red.accent2
+  info: '#2196F3', // blue.base
+  success: '#4CAF50', // green.base
+  warning: '#E91E63', // pink.base
+  admin: '#E53935' // red.darken1
+}
+const baseDarkColors = {
+  primary: '#2196F3', // blue.base
+  success: '#00E676' // green.accent3
+}
+export function defaultOptions (searchParams, darkCookie = false) {
+  const dark = searchParams?.dark ? searchParams.dark === 'true' : darkCookie
+  const searchParamsColors = {}
+  for (const colorCode of ['primary', 'secondary']) {
+    if (searchParams?.[colorCode]) { searchParamsColors[colorCode] = searchParams[colorCode] }
+  }
+  const lightColors = { ...baseColors, ...searchParamsColors }
+  const darkColors = { ...baseColors, ...baseDarkColors, ...searchParamsColors }
+  const defaultTheme = dark ? 'dark' : 'light'
+  return {
+    ssr: false,
+    locale: {
+      locale: 'fr',
+      messages: { fr, en }
+    }, // TODO: sync this with the i18n locale
+    theme: {
+      defaultTheme,
+      themes: {
+        light: {
+          dark: false,
+          colors: lightColors
+        },
+        dark: {
+          dark: true,
+          colors: darkColors
+        }
+      }
+    },
+    defaults: {
+      VCard: {
+        // grey outlined card by default
+        variant: 'outlined',
+        style: 'border-color: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !important;'
+      }
+    }
+  }
+}
+// # sourceMappingURL=index.js.map

package/owner-avatar.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-tooltip location="top">
+    <template #activator="{ props }">
+      <span
+        v-bind="props"
+        class="text-body-2"
+      >
+        <v-avatar :size="28">
+          <img
+            :src="avatarUrl"
+            style="object-fit: cover; width: 100%; height: 100%;"
+          >
+        </v-avatar>
+      </span>
+    </template>
+    {{ label }}
+  </v-tooltip>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const ownerProps = defineProps({
+  owner: {
+    type: Object,
+    default: null
+  }
+})
+
+const avatarUrl = computed(() => {
+  if (ownerProps.owner.department) return `/simple-directory/api/avatars/${ownerProps.owner.type}/${ownerProps.owner.id}/${ownerProps.owner.department}/avatar.png`
+  else return `/simple-directory/api/avatars/${ownerProps.owner.type}/${ownerProps.owner.id}/avatar.png`
+})
+
+const label = computed(() => {
+  let label = ownerProps.owner.name
+  if (ownerProps.owner.department) label += ' - ' + (ownerProps.owner.departmentName || ownerProps.owner.department)
+  if (ownerProps.owner.role) label += ` (${ownerProps.owner.role})`
+  return label
+})
+</script>
+
+<style>
+</style>

package/owner-avatar.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    owner: Record<string, any>;
+    $props: {
+        readonly owner?: Record<string, any> | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;