@data-fair/lib-vuetify 0.1.0

package/search-address.vue.js

@@ -0,0 +1,125 @@
+/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
+import { VAutocomplete } from 'vuetify/components/VAutocomplete';
+import { ref, watch } from 'vue';
+import { ofetch } from 'ofetch';
+import { useDebounceFn } from '@vueuse/core';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+let __VLS_typeProps;
+const __VLS_props = defineProps();
+const emit = defineEmits(['selected']);
+const model = defineModel({ type: String });
+const addressesList = ref([]);
+const loadingAddresses = ref(false);
+const address = ref(null);
+const findAdressesFn = async (search, selectedId) => {
+    loadingAddresses.value = true;
+    if (!search || search.length < 3) {
+        addressesList.value = address.value ? [address.value] : [];
+    }
+    else {
+        const params = { q: search };
+        const result = (await ofetch('https://api-adresse.data.gouv.fr/search/', { params }));
+        addressesList.value = result.features.map((f) => ({
+            title: f.properties.label,
+            value: {
+                lat: f.geometry.coordinates[1],
+                lon: f.geometry.coordinates[0],
+                ...f.properties
+            }
+        }));
+    }
+    if (selectedId) {
+        address.value = addressesList.value.find(a => a.value.id === selectedId);
+    }
+    loadingAddresses.value = false;
+};
+const findAdresses = useDebounceFn(findAdressesFn, 300);
+if (model.value && model.value.length) {
+    // @ts-ignore
+    findAdresses(...JSON.parse(`[${model.value}]`));
+}
+watch(address, (addr) => {
+    if (addr) {
+        model.value = JSON.stringify([addr.title, addr.value.id]).slice(1, -1);
+    }
+    else {
+        model.value = undefined;
+        addressesList.value = [];
+    }
+    emit('selected', addr ? addr.value : undefined);
+});
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    emits: {
+        ...{},
+        ...{},
+    },
+});
+;
+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;
+    let __VLS_resolvedLocalAndGlobalComponents;
+    const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.VAutocomplete;
+    /** @type { [typeof __VLS_components.VAutocomplete, typeof __VLS_components.vAutocomplete, ] } */
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ 'onUpdate:search': {} }, modelValue: ((__VLS_ctx.address)), items: ((__VLS_ctx.addressesList)), loading: ((__VLS_ctx.loadingAddresses)), noFilter: (true), clearable: ((true)), returnObject: (true), hideNoData: (true), hideDetails: (true), label: ("Adresse"), placeholder: ("Saisissez une adresse"), variant: ((__VLS_ctx.variant)), density: ("compact"), menuIcon: (""), }));
+    const __VLS_2 = __VLS_1({ ...{ 'onUpdate:search': {} }, modelValue: ((__VLS_ctx.address)), items: ((__VLS_ctx.addressesList)), loading: ((__VLS_ctx.loadingAddresses)), noFilter: (true), clearable: ((true)), returnObject: (true), hideNoData: (true), hideDetails: (true), label: ("Adresse"), placeholder: ("Saisissez une adresse"), variant: ((__VLS_ctx.variant)), density: ("compact"), menuIcon: (""), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    let __VLS_6;
+    const __VLS_7 = {
+        'onUpdate:search': ((search) => __VLS_ctx.findAdresses(search))
+    };
+    let __VLS_3;
+    let __VLS_4;
+    const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
+    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 {
+            VAutocomplete: VAutocomplete,
+            addressesList: addressesList,
+            loadingAddresses: loadingAddresses,
+            address: address,
+            findAdresses: findAdresses,
+        };
+    },
+    emits: {
+        ...{},
+        ...{},
+    },
+    __typeProps: {},
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {
+        ...{},
+        ...{},
+    },
+    __typeProps: {},
+});
+;
+//# sourceMappingURL=search-address.vue.js.map

package/tutorial-alert.vue

@@ -0,0 +1,131 @@
+<!-- eslint-disable vue/no-v-html -->
+<template lang="html">
+  <div
+    v-if="show || showBtn"
+    class="tutorial-alert pt-3 pb-2 pr-3"
+  >
+    <v-alert
+      v-if="show"
+      dark
+      color="success"
+      density="compact"
+      border="start"
+      class="ma-0"
+      :variant="theme.current.value.dark ? 'outlined' : 'flat'"
+    >
+      <slot>
+        <a
+          v-if="href"
+          :href="href"
+          target="_blank"
+        >{{ text || $t('readDoc') }}</a>
+        <template v-else>
+          <span
+            v-if="text"
+            v-text="text"
+          />
+          <div
+            v-else-if="html"
+            v-html="html"
+          />
+        </template>
+      </slot>
+    </v-alert>
+    <v-btn
+      v-if="showBtn"
+      class="toggle"
+      icon
+      density="compact"
+      color="success"
+      :title="show ? $t('closeHelp') : $t('readHelp')"
+      @click="show = !show"
+    >
+      <v-icon v-if="show">
+        mdi-close-circle
+      </v-icon>
+      <v-icon v-else>
+        mdi-information
+      </v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<i18n lang="yaml">
+fr:
+  readHelp: Ouvrez un message d'aide
+  closeHelp: Fermez le message d'aide
+  readDoc: Consultez la documentation
+en:
+  readHelp: Open a help message
+  closeHelp: Close the help message
+  readDoc: Read the documentation
+</i18n>
+
+<script>
+import { useTheme } from 'vuetify';
+
+export default {
+  props: {
+    id: { type: String, required: true },
+    href: { type: String, required: false, default: null },
+    text: { type: String, required: false, default: null },
+    html: { type: String, required: false, default: null },
+    initial: { type: Boolean, default: true },
+    persistent: { type: Boolean, default: false }
+  },
+  setup() {
+    const theme = useTheme()
+    return {theme}
+  },
+  data: () => ({
+    show: false
+  }),
+  computed: {
+    showBtn () {
+      return this.show || (!this.show && this.persistent)
+    }
+  },
+  watch: {
+    show () {
+      window.localStorage['closed-tutorial-' + this.id] = '' + !this.show
+    }
+  },
+  mounted () {
+    if (window.localStorage) {
+      if (window.localStorage['closed-tutorial-' + this.id] !== 'true') {
+        this.show = this.initial
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.tutorial-alert {
+  /*background-color: rgba(10, 10, 10, 0.1);*/
+  position: relative;
+  overflow:visible;
+  min-height:28px;
+}
+.tutorial-alert .v-alert--outlined {
+  background: black !important
+}
+.tutorial-alert .v-alert .v-alert__content a {
+  color: white !important;
+  text-decoration: underline;
+}
+.tutorial-alert .toggle.v-btn {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+}
+.tutorial-alert .toggle.v-btn .v-icon {
+  border-radius: 30px;
+}
+.tutorial-alert .toggle.v-btn .v-icon.theme--dark {
+  background-color: black;
+}
+.tutorial-alert .toggle.v-btn .v-icon.theme--light {
+  background-color: white;
+}
+</style>

package/tutorial-alert.vue.d.ts

@@ -0,0 +1,70 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    href: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    text: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    html: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    initial: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    theme: import("vuetify", { with: { "resolution-mode": "import" } }).ThemeInstance;
+}, {
+    show: boolean;
+}, {
+    showBtn(): boolean;
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    href: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    text: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    html: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    initial: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    persistent: boolean;
+    html: string;
+    text: string;
+    href: string;
+    initial: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/tutorial-alert.vue.js

@@ -0,0 +1,138 @@
+/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
+import { useTheme } from 'vuetify';
+export default (await import('vue')).defineComponent({
+    props: {
+        id: { type: String, required: true },
+        href: { type: String, required: false, default: null },
+        text: { type: String, required: false, default: null },
+        html: { type: String, required: false, default: null },
+        initial: { type: Boolean, default: true },
+        persistent: { type: Boolean, default: false }
+    },
+    setup() {
+        const theme = useTheme();
+        return { theme };
+    },
+    data: () => ({
+        show: false
+    }),
+    computed: {
+        showBtn() {
+            return this.show || (!this.show && this.persistent);
+        }
+    },
+    watch: {
+        show() {
+            window.localStorage['closed-tutorial-' + this.id] = '' + !this.show;
+        }
+    },
+    mounted() {
+        if (window.localStorage) {
+            if (window.localStorage['closed-tutorial-' + this.id] !== 'true') {
+                this.show = this.initial;
+            }
+        }
+    }
+});
+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 (__VLS_ctx.show || __VLS_ctx.showBtn) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("tutorial-alert pt-3 pb-2 pr-3") }, });
+        if (__VLS_ctx.show) {
+            const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.VAlert;
+            /** @type { [typeof __VLS_components.VAlert, typeof __VLS_components.vAlert, typeof __VLS_components.VAlert, typeof __VLS_components.vAlert, ] } */
+            // @ts-ignore
+            const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ dark: (true), color: ("success"), density: ("compact"), border: ("start"), ...{ class: ("ma-0") }, variant: ((__VLS_ctx.theme.current.value.dark ? 'outlined' : 'flat')), }));
+            const __VLS_2 = __VLS_1({ dark: (true), color: ("success"), density: ("compact"), border: ("start"), ...{ class: ("ma-0") }, variant: ((__VLS_ctx.theme.current.value.dark ? 'outlined' : 'flat')), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+            var __VLS_6 = {};
+            if (__VLS_ctx.href) {
+                __VLS_elementAsFunction(__VLS_intrinsicElements.a, __VLS_intrinsicElements.a)({ href: ((__VLS_ctx.href)), target: ("_blank"), });
+                (__VLS_ctx.text || __VLS_ctx.$t('readDoc'));
+            }
+            else {
+                if (__VLS_ctx.text) {
+                    __VLS_elementAsFunction(__VLS_intrinsicElements.span)({});
+                    __VLS_directiveAsFunction(__VLS_directives.vText)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.text) }, null, null);
+                }
+                else if (__VLS_ctx.html) {
+                    __VLS_elementAsFunction(__VLS_intrinsicElements.div)({});
+                    __VLS_directiveAsFunction(__VLS_directives.vHtml)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.html) }, null, null);
+                }
+            }
+            __VLS_nonNullable(__VLS_5.slots).default;
+            __VLS_nonNullable(__VLS_5.slots).default;
+            const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
+        }
+        if (__VLS_ctx.showBtn) {
+            const __VLS_7 = __VLS_resolvedLocalAndGlobalComponents.VBtn;
+            /** @type { [typeof __VLS_components.VBtn, typeof __VLS_components.vBtn, typeof __VLS_components.VBtn, typeof __VLS_components.vBtn, ] } */
+            // @ts-ignore
+            const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ ...{ 'onClick': {} }, ...{ class: ("toggle") }, icon: (true), density: ("compact"), color: ("success"), title: ((__VLS_ctx.show ? __VLS_ctx.$t('closeHelp') : __VLS_ctx.$t('readHelp'))), }));
+            const __VLS_9 = __VLS_8({ ...{ 'onClick': {} }, ...{ class: ("toggle") }, icon: (true), density: ("compact"), color: ("success"), title: ((__VLS_ctx.show ? __VLS_ctx.$t('closeHelp') : __VLS_ctx.$t('readHelp'))), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+            let __VLS_13;
+            const __VLS_14 = {
+                onClick: (...[$event]) => {
+                    if (!((__VLS_ctx.show || __VLS_ctx.showBtn)))
+                        return;
+                    if (!((__VLS_ctx.showBtn)))
+                        return;
+                    __VLS_ctx.show = !__VLS_ctx.show;
+                }
+            };
+            let __VLS_10;
+            let __VLS_11;
+            if (__VLS_ctx.show) {
+                const __VLS_15 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
+                /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
+                // @ts-ignore
+                const __VLS_16 = __VLS_asFunctionalComponent(__VLS_15, new __VLS_15({}));
+                const __VLS_17 = __VLS_16({}, ...__VLS_functionalComponentArgsRest(__VLS_16));
+                __VLS_nonNullable(__VLS_20.slots).default;
+                const __VLS_20 = __VLS_pickFunctionalComponentCtx(__VLS_15, __VLS_17);
+            }
+            else {
+                const __VLS_21 = __VLS_resolvedLocalAndGlobalComponents.VIcon;
+                /** @type { [typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ] } */
+                // @ts-ignore
+                const __VLS_22 = __VLS_asFunctionalComponent(__VLS_21, new __VLS_21({}));
+                const __VLS_23 = __VLS_22({}, ...__VLS_functionalComponentArgsRest(__VLS_22));
+                __VLS_nonNullable(__VLS_26.slots).default;
+                const __VLS_26 = __VLS_pickFunctionalComponentCtx(__VLS_21, __VLS_23);
+            }
+            __VLS_nonNullable(__VLS_12.slots).default;
+            const __VLS_12 = __VLS_pickFunctionalComponentCtx(__VLS_7, __VLS_9);
+        }
+    }
+    __VLS_styleScopedClasses['tutorial-alert'];
+    __VLS_styleScopedClasses['pt-3'];
+    __VLS_styleScopedClasses['pb-2'];
+    __VLS_styleScopedClasses['pr-3'];
+    __VLS_styleScopedClasses['ma-0'];
+    __VLS_styleScopedClasses['toggle'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    return {
+        slots: __VLS_slots,
+        refs: $refs,
+        attrs: {},
+    };
+}
+;
+let __VLS_self;
+//# sourceMappingURL=tutorial-alert.vue.js.map

package/user-avatar.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    class="sd-avatar"
+    :class="{'has-secondary-avatar': showSecondAvatar}"
+  >
+    <v-avatar
+      v-if="showAccount && session.state.account && session.state.account.type === 'user'"
+      class="primary-avatar"
+      :size="36"
+    >
+      <img
+        :src="userAvatarUrl"
+        aria-hidden
+        alt=""
+      >
+    </v-avatar>
+    <v-avatar
+      v-else
+      class="primary-avatar"
+      :size="36"
+    >
+      <img
+        :src="accountAvatarUrl"
+        aria-hidden
+        alt=""
+      >
+    </v-avatar>
+    <v-avatar
+      v-if="showSecondAvatar"
+      class="secondary-avatar"
+      :size="28"
+    >
+      <img
+        :src="userAvatarUrl"
+        aria-hidden
+        alt=""
+      >
+    </v-avatar>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useSession } from '@data-fair/lib/vue/session.js'
+
+const props = defineProps({
+  showAccount: { type: Boolean, default: false }
+})
+
+const session = useSession()
+const userAvatarUrl = computed(() => session.state.user && `/simple-directory/api/avatars/user/${session.state.user.id}/avatar.png`)
+const accountAvatarUrl = computed(() => {
+  if (!session.state.account) return
+  let url = `/simple-directory/api/avatars/${session.state.account.type}/${session.state.account.id}`
+  if (session.state.account.department) url += `/${session.state.account.department}`
+  url += '/avatar.png'
+  return url
+})
+const showSecondAvatar = computed(() => props.showAccount && session.state.account && session.state.account.type !== 'user')
+
+</script>
+
+  <style>
+  .sd-avatar {
+    width: 36px;
+    text-indent: 0;
+  }
+  .sd-avatar.has-secondary-avatar {
+    width: 56px;
+    height: 40px;
+    position: relative;
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+  .sd-avatar.has-secondary-avatar .primary-avatar {
+    position: absolute;
+    left: 0;
+    top: 0
+  }
+  .sd-avatar .secondary-avatar {
+    position:absolute;
+    right:0px;
+    bottom:0;
+  }
+  </style>

package/user-avatar.vue.d.ts

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

package/user-avatar.vue.js

@@ -0,0 +1,112 @@
+/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
+import { computed } from 'vue';
+import { useSession } from '@data-fair/lib/vue/session.js';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    showAccount: { type: Boolean, default: false }
+});
+const session = useSession();
+const userAvatarUrl = computed(() => session.state.user && `/simple-directory/api/avatars/user/${session.state.user.id}/avatar.png`);
+const accountAvatarUrl = computed(() => {
+    if (!session.state.account)
+        return;
+    let url = `/simple-directory/api/avatars/${session.state.account.type}/${session.state.account.id}`;
+    if (session.state.account.department)
+        url += `/${session.state.account.department}`;
+    url += '/avatar.png';
+    return url;
+});
+const showSecondAvatar = computed(() => props.showAccount && session.state.account && session.state.account.type !== 'user');
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        showAccount: { type: Boolean, default: false }
+    },
+});
+;
+let __VLS_functionalComponentProps;
+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;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("sd-avatar") }, ...{ class: (({ 'has-secondary-avatar': __VLS_ctx.showSecondAvatar })) }, });
+    if (__VLS_ctx.showAccount && __VLS_ctx.session.state.account && __VLS_ctx.session.state.account.type === 'user') {
+        const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.VAvatar;
+        /** @type { [typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, ] } */
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ class: ("primary-avatar") }, size: ((36)), }));
+        const __VLS_2 = __VLS_1({ ...{ class: ("primary-avatar") }, size: ((36)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        __VLS_elementAsFunction(__VLS_intrinsicElements.img, __VLS_intrinsicElements.img)({ src: ((__VLS_ctx.userAvatarUrl)), "aria-hidden": (true), alt: (""), });
+        __VLS_nonNullable(__VLS_5.slots).default;
+        const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
+    }
+    else {
+        const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.VAvatar;
+        /** @type { [typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, ] } */
+        // @ts-ignore
+        const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ ...{ class: ("primary-avatar") }, size: ((36)), }));
+        const __VLS_8 = __VLS_7({ ...{ class: ("primary-avatar") }, size: ((36)), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+        __VLS_elementAsFunction(__VLS_intrinsicElements.img, __VLS_intrinsicElements.img)({ src: ((__VLS_ctx.accountAvatarUrl)), "aria-hidden": (true), alt: (""), });
+        __VLS_nonNullable(__VLS_11.slots).default;
+        const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
+    }
+    if (__VLS_ctx.showSecondAvatar) {
+        const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.VAvatar;
+        /** @type { [typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, typeof __VLS_components.VAvatar, typeof __VLS_components.vAvatar, ] } */
+        // @ts-ignore
+        const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ ...{ class: ("secondary-avatar") }, size: ((28)), }));
+        const __VLS_14 = __VLS_13({ ...{ class: ("secondary-avatar") }, size: ((28)), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+        __VLS_elementAsFunction(__VLS_intrinsicElements.img, __VLS_intrinsicElements.img)({ src: ((__VLS_ctx.userAvatarUrl)), "aria-hidden": (true), alt: (""), });
+        __VLS_nonNullable(__VLS_17.slots).default;
+        const __VLS_17 = __VLS_pickFunctionalComponentCtx(__VLS_12, __VLS_14);
+    }
+    __VLS_styleScopedClasses['sd-avatar'];
+    __VLS_styleScopedClasses['has-secondary-avatar'];
+    __VLS_styleScopedClasses['primary-avatar'];
+    __VLS_styleScopedClasses['primary-avatar'];
+    __VLS_styleScopedClasses['secondary-avatar'];
+    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,
+            session: session,
+            userAvatarUrl: userAvatarUrl,
+            accountAvatarUrl: accountAvatarUrl,
+            showSecondAvatar: showSecondAvatar,
+        };
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {
+            $props: __VLS_makeOptional(props),
+            ...props,
+        };
+    },
+});
+;
+//# sourceMappingURL=user-avatar.vue.js.map