@data-fair/lib-vuetify 0.1.0

package/owner-avatar.vue.js

@@ -0,0 +1,103 @@
+/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
+import { computed } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('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;
+});
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        owner: {
+            type: Object,
+            default: null
+        }
+    },
+});
+;
+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;
+    const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.VTooltip;
+    /** @type { [typeof __VLS_components.VTooltip, typeof __VLS_components.vTooltip, typeof __VLS_components.VTooltip, typeof __VLS_components.vTooltip, ] } */
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ location: ("top"), }));
+    const __VLS_2 = __VLS_1({ location: ("top"), }, ...__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);
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...(props), ...{ class: ("text-body-2") }, });
+        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({ size: ((28)), }));
+        const __VLS_8 = __VLS_7({ size: ((28)), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+        __VLS_elementAsFunction(__VLS_intrinsicElements.img, __VLS_intrinsicElements.img)({ src: ((__VLS_ctx.avatarUrl)), ...{ style: ({}) }, });
+        __VLS_nonNullable(__VLS_11.slots).default;
+        const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
+    }
+    (__VLS_ctx.label);
+    const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
+    __VLS_styleScopedClasses['text-body-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 {
+            $props: __VLS_makeOptional(ownerProps),
+            ...ownerProps,
+            avatarUrl: avatarUrl,
+            label: label,
+        };
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {
+            $props: __VLS_makeOptional(ownerProps),
+            ...ownerProps,
+        };
+    },
+});
+;
+//# sourceMappingURL=owner-avatar.vue.js.map

package/owner-pick.vue

@@ -0,0 +1,123 @@
+<template lang="html">
+  <v-row>
+    <v-col>
+      <template v-if="status === 'loading'">
+        <v-progress-linear
+          indeterminate
+          color="primary"
+        />
+      </template>
+      <template v-if="status === 'ok'">
+        <p>{{ message || t('message') }}</p>
+        <v-radio-group
+          v-if="model"
+          v-model="model"
+          class="my-3 ml-2"
+        >
+          <v-radio
+            v-for="(owner, $index) in owners"
+            :key="$index"
+            :label="getLabel(owner)"
+            :value="owner"
+          />
+        </v-radio-group>
+      </template>
+    </v-col>
+  </v-row>
+</template>
+
+<i18n lang="yaml">
+fr:
+  yourself: Compte personnel
+  org: Organisation
+  message: Choisissez un propriétaire
+en:
+  yourself: Personal account
+  org: Organization
+  message: Choisissez un propriétaire
+</i18n>
+
+<script setup>
+import { watch, computed } from 'vue'
+import { computedAsync } from '@vueuse/core'
+import { ofetch } from 'ofetch'
+import { useI18n } from 'vue-i18n'
+import { useSessionAuthenticated } from '@data-fair/lib/vue/session.js'
+
+const { t } = useI18n({ useScope: 'local' })
+
+const props = defineProps({
+  otherAccounts: { type: Boolean, default: false },
+  hideSingle: { type: Boolean, default: true },
+  message: { type: String, default: null }
+})
+
+const model = defineModel({ type: Object, default: null })
+const ready = defineModel('ready', { type: Boolean, default: false })
+
+const session = useSessionAuthenticated()
+
+const owners = computedAsync(async () => {
+  const user = session.state.user
+
+  /** @type {import('@data-fair/lib-common-types/session').Account[]} */
+  const owners = []
+  if (props.otherAccounts || session.state.account.type === 'user') {
+    owners.push({ type: 'user', id: user.id, name: user.name })
+  }
+  for (const o of user.organizations.filter(o => ['contrib', 'admin'].includes(o.role))) {
+    if (!props.otherAccounts) {
+      if (session.state.account.type !== 'organization' || o.id !== session.state.account.id) {
+        continue
+      }
+      if (session.state.account.department && session.state.account.department !== o.department) {
+        continue
+      }
+    }
+    if (o.department && !owners.find(ow => ow.type === 'organization' && ow.id === o.id && ow.department === o.department)) {
+      owners.push({ type: 'organization', id: o.id, name: o.name, department: o.department, departmentName: o.departmentName || '' })
+    }
+    if (!o.department) {
+      const org = await ofetch(`/simple-directory/api/organizations/${o.id}`)
+      owners.push({ type: 'organization', id: o.id, name: o.name })
+      if (!org.departments) continue
+      for (const dep of org.departments) {
+        if (!owners.find(ow => ow.type === 'organization' && ow.id === o.id && ow.department === dep.id)) {
+          owners.push({ type: 'organization', id: o.id, name: o.name, department: dep.id, departmentName: dep.name })
+        }
+      }
+    }
+  }
+
+  return owners
+})
+
+/**
+ * @param {import('@data-fair/lib-common-types/session').Account} owner
+ */
+const getLabel = (owner) => {
+  if (owner.type === 'user' && owner.id === session.state.user?.id) return t('yourself')
+  if (owner.type === 'organization') {
+    if (owner.department) return `${t('org')} ${owner.name} / ${owner.departmentName || owner.department}`
+    else return `${t('org')} ${owner.name}`
+  }
+  return owner.name
+}
+
+watch(owners, () => {
+  if (!model.value && owners.value?.length) {
+    model.value = owners.value[0]
+  }
+  if (owners.value) {
+    ready.value = true
+  }
+})
+
+const status = computed(() => {
+  if (!owners.value) return 'loading'
+  if (owners.value.length === 0) return 'hidden'
+  if (props.hideSingle && owners.value.length === 1) return 'hidden'
+  return 'ok'
+})
+
+</script>

package/owner-pick.vue.d.ts

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

package/owner-pick.vue.js

@@ -0,0 +1,186 @@
+/// <reference types=".vue-global-types/vue_3.5_false.d.ts" />
+import { watch, computed } from 'vue';
+import { computedAsync } from '@vueuse/core';
+import { ofetch } from 'ofetch';
+import { useI18n } from 'vue-i18n';
+import { useSessionAuthenticated } from '@data-fair/lib/vue/session.js';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const { t } = useI18n({ useScope: 'local' });
+const props = defineProps({
+    otherAccounts: { type: Boolean, default: false },
+    hideSingle: { type: Boolean, default: true },
+    message: { type: String, default: null }
+});
+const model = defineModel({ type: Object, default: null });
+const ready = defineModel('ready', { type: Boolean, default: false });
+const session = useSessionAuthenticated();
+const owners = computedAsync(async () => {
+    const user = session.state.user;
+    /** @type {import('@data-fair/lib-common-types/session').Account[]} */
+    const owners = [];
+    if (props.otherAccounts || session.state.account.type === 'user') {
+        owners.push({ type: 'user', id: user.id, name: user.name });
+    }
+    for (const o of user.organizations.filter(o => ['contrib', 'admin'].includes(o.role))) {
+        if (!props.otherAccounts) {
+            if (session.state.account.type !== 'organization' || o.id !== session.state.account.id) {
+                continue;
+            }
+            if (session.state.account.department && session.state.account.department !== o.department) {
+                continue;
+            }
+        }
+        if (o.department && !owners.find(ow => ow.type === 'organization' && ow.id === o.id && ow.department === o.department)) {
+            owners.push({ type: 'organization', id: o.id, name: o.name, department: o.department, departmentName: o.departmentName || '' });
+        }
+        if (!o.department) {
+            const org = await ofetch(`/simple-directory/api/organizations/${o.id}`);
+            owners.push({ type: 'organization', id: o.id, name: o.name });
+            if (!org.departments)
+                continue;
+            for (const dep of org.departments) {
+                if (!owners.find(ow => ow.type === 'organization' && ow.id === o.id && ow.department === dep.id)) {
+                    owners.push({ type: 'organization', id: o.id, name: o.name, department: dep.id, departmentName: dep.name });
+                }
+            }
+        }
+    }
+    return owners;
+});
+/**
+ * @param {import('@data-fair/lib-common-types/session').Account} owner
+ */
+const getLabel = (owner) => {
+    if (owner.type === 'user' && owner.id === session.state.user?.id)
+        return t('yourself');
+    if (owner.type === 'organization') {
+        if (owner.department)
+            return `${t('org')} ${owner.name} / ${owner.departmentName || owner.department}`;
+        else
+            return `${t('org')} ${owner.name}`;
+    }
+    return owner.name;
+};
+watch(owners, () => {
+    if (!model.value && owners.value?.length) {
+        model.value = owners.value[0];
+    }
+    if (owners.value) {
+        ready.value = true;
+    }
+});
+const status = computed(() => {
+    if (!owners.value)
+        return 'loading';
+    if (owners.value.length === 0)
+        return 'hidden';
+    if (props.hideSingle && owners.value.length === 1)
+        return 'hidden';
+    return 'ok';
+});
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        otherAccounts: { type: Boolean, default: false },
+        hideSingle: { type: Boolean, default: true },
+        message: { type: String, default: null }
+    },
+    __typeEmits: {},
+});
+;
+let __VLS_functionalComponentProps;
+const __VLS_defaults = {
+    modelValue: null,
+    ready: 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;
+    let __VLS_resolvedLocalAndGlobalComponents;
+    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({}));
+    const __VLS_2 = __VLS_1({}, ...__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({}));
+    const __VLS_8 = __VLS_7({}, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    if (__VLS_ctx.status === 'loading') {
+        const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.VProgressLinear;
+        /** @type { [typeof __VLS_components.VProgressLinear, typeof __VLS_components.vProgressLinear, ] } */
+        // @ts-ignore
+        const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ indeterminate: (true), color: ("primary"), }));
+        const __VLS_14 = __VLS_13({ indeterminate: (true), color: ("primary"), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+    }
+    if (__VLS_ctx.status === 'ok') {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.p, __VLS_intrinsicElements.p)({});
+        (__VLS_ctx.message || __VLS_ctx.t('message'));
+        if (__VLS_ctx.model) {
+            const __VLS_18 = __VLS_resolvedLocalAndGlobalComponents.VRadioGroup;
+            /** @type { [typeof __VLS_components.VRadioGroup, typeof __VLS_components.vRadioGroup, typeof __VLS_components.VRadioGroup, typeof __VLS_components.vRadioGroup, ] } */
+            // @ts-ignore
+            const __VLS_19 = __VLS_asFunctionalComponent(__VLS_18, new __VLS_18({ modelValue: ((__VLS_ctx.model)), ...{ class: ("my-3 ml-2") }, }));
+            const __VLS_20 = __VLS_19({ modelValue: ((__VLS_ctx.model)), ...{ class: ("my-3 ml-2") }, }, ...__VLS_functionalComponentArgsRest(__VLS_19));
+            for (const [owner, $index] of __VLS_getVForSourceType((__VLS_ctx.owners))) {
+                const __VLS_24 = __VLS_resolvedLocalAndGlobalComponents.VRadio;
+                /** @type { [typeof __VLS_components.VRadio, typeof __VLS_components.vRadio, ] } */
+                // @ts-ignore
+                const __VLS_25 = __VLS_asFunctionalComponent(__VLS_24, new __VLS_24({ key: (($index)), label: ((__VLS_ctx.getLabel(owner))), value: ((owner)), }));
+                const __VLS_26 = __VLS_25({ key: (($index)), label: ((__VLS_ctx.getLabel(owner))), value: ((owner)), }, ...__VLS_functionalComponentArgsRest(__VLS_25));
+            }
+            __VLS_nonNullable(__VLS_23.slots).default;
+            const __VLS_23 = __VLS_pickFunctionalComponentCtx(__VLS_18, __VLS_20);
+        }
+    }
+    __VLS_nonNullable(__VLS_11.slots).default;
+    const __VLS_11 = __VLS_pickFunctionalComponentCtx(__VLS_6, __VLS_8);
+    __VLS_nonNullable(__VLS_5.slots).default;
+    const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
+    __VLS_styleScopedClasses['my-3'];
+    __VLS_styleScopedClasses['ml-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 {
+            $props: __VLS_makeOptional(props),
+            ...props,
+            t: t,
+            model: model,
+            owners: owners,
+            getLabel: getLabel,
+            status: status,
+        };
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {
+            $props: __VLS_makeOptional(props),
+            ...props,
+        };
+    },
+});
+;
+//# sourceMappingURL=owner-pick.vue.js.map

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@data-fair/lib-vuetify",
+  "version": "0.1.0",
+  "description": "Components based on the Vuetify 3 UI lib for the data-fair stack.",
+  "main": "index.js",
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.vue"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "ofetch": "^1.4.0",
+    "vue-i18n": "^10.0.4",
+    "vuetify": "^3.7.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "@data-fair/lib-common-types": "^0.2.0"
+  }
+}