@datagouv/components-next 0.0.32 → 0.1.0

package/dist/{vue3-xml-viewer.common-1QyofKqS.js → vue3-xml-viewer.common-RC76oYFu.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-yWiuApVL.js";
+import { g as Ke } from "./main-DFEQrdg5.js";
 import We from "vue";
 function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {
@@ -18,94 +18,94 @@ function Fe(I, K) {
 }
 var Y = { exports: {} }, ee;
 function ze() {
-  return ee || (ee = 1, function(I) {
+  return ee || (ee = 1, (function(I) {
     (function() {
       var K = {
         /***/
         118: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.r(a);
             var t = e(246), n = /* @__PURE__ */ e.n(t), r = e(143), u = /* @__PURE__ */ e.n(r), l = u()(n());
             l.push([_.id, ".no-margin-padding[data-v-3c430bce]{margin:0;padding:0}.margin-left-sm[data-v-3c430bce]{margin-left:8px}.assignment[data-v-3c430bce]{color:var(--xml-viewer-assignment-color)}.quote[data-v-3c430bce]{color:var(--xml-viewer-quote-color)}", ""]), a.default = l;
-          }
+          })
         ),
         /***/
         743: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.r(a);
             var t = e(246), n = /* @__PURE__ */ e.n(t), r = e(143), u = /* @__PURE__ */ e.n(r), l = u()(n());
             l.push([_.id, ".attribute-name[data-v-17010745]{color:var(--xml-viewer-attribute-name-color)}", ""]), a.default = l;
-          }
+          })
         ),
         /***/
         102: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.r(a);
             var t = e(246), n = /* @__PURE__ */ e.n(t), r = e(143), u = /* @__PURE__ */ e.n(r), l = u()(n());
             l.push([_.id, ".attribute-value[data-v-36c46cbc]{color:var(--xml-viewer-attribute-value-color);padding:0;margin:0}", ""]), a.default = l;
-          }
+          })
         ),
         /***/
         80: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.r(a);
             var t = e(246), n = /* @__PURE__ */ e.n(t), r = e(143), u = /* @__PURE__ */ e.n(r), l = u()(n());
             l.push([_.id, ".content[data-v-0fce587a]{color:var(--xml-viewer-cdata-content-color)}.inline[data-v-0fce587a]{display:inline}.no-margin-padding[data-v-0fce587a]{margin:0;padding:0}", ""]), a.default = l;
-          }
+          })
         ),
         /***/
         722: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.r(a);
             var t = e(246), n = /* @__PURE__ */ e.n(t), r = e(143), u = /* @__PURE__ */ e.n(r), l = u()(n());
             l.push([_.id, ".xml-element[data-v-d071a178]{white-space:nowrap;font-size:14px;font-family:Consolas,Menlo,Courier,monospace}.bracket[data-v-d071a178],.caret[data-v-d071a178],.dots[data-v-d071a178]{color:var(--xml-viewer-bracket-color)}.caret[data-v-d071a178]{fill:var(--xml-viewer-bracket-color)}.child-elements>div[data-v-d071a178]{margin-left:20px}.clickable[data-v-d071a178]{cursor:pointer}", ""]), a.default = l;
-          }
+          })
         ),
         /***/
         715: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.r(a);
             var t = e(246), n = /* @__PURE__ */ e.n(t), r = e(143), u = /* @__PURE__ */ e.n(r), l = u()(n());
             l.push([_.id, ".content[data-v-75f773a5]{color:var(--xml-viewer-element-content-color)}", ""]), a.default = l;
-          }
+          })
         ),
         /***/
         204: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.r(a);
             var t = e(246), n = /* @__PURE__ */ e.n(t), r = e(143), u = /* @__PURE__ */ e.n(r), l = u()(n());
             l.push([_.id, ".bracket[data-v-5a0ac6a5]{color:var(--xml-viewer-bracket-color)}.element-name[data-v-5a0ac6a5]{color:var(--xml-viewer-element-name-color)}", ""]), a.default = l;
-          }
+          })
         ),
         /***/
         904: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.r(a);
             var t = e(246), n = /* @__PURE__ */ e.n(t), r = e(143), u = /* @__PURE__ */ e.n(r), l = u()(n());
             l.push([_.id, ".content[data-v-7bc574c6]{color:var(--xml-viewer-remark-content-color)}.inline[data-v-7bc574c6]{display:inline}.no-margin-padding[data-v-7bc574c6]{margin:0;padding:0}", ""]), a.default = l;
-          }
+          })
         ),
         /***/
         834: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.r(a);
             var t = e(246), n = /* @__PURE__ */ e.n(t), r = e(143), u = /* @__PURE__ */ e.n(r), l = u()(n());
             l.push([_.id, ":root{--xml-viewer-bracket-color:#111;--xml-viewer-assignment-color:#986801;--xml-viewer-quote-color:#50a14f;--xml-viewer-attribute-name-color:#986801;--xml-viewer-attribute-value-color:#50a14f;--xml-viewer-cdata-content-color:#50a14f;--xml-viewer-element-content-color:#383a42;--xml-viewer-element-name-color:#e45649;--xml-viewer-remark-content-color:#a0a1a7}.dark{--xml-viewer-bracket-color:#e1e4e8;--xml-viewer-assignment-color:#b392f0;--xml-viewer-quote-color:#9ecbff;--xml-viewer-attribute-name-color:#b392f0;--xml-viewer-attribute-value-color:#9ecbff;--xml-viewer-cdata-content-color:#9ecbff;--xml-viewer-element-content-color:#e1e4e8;--xml-viewer-element-name-color:#85e89d;--xml-viewer-remark-content-color:#6a737d}", ""]), a.default = l;
-          }
+          })
         ),
         /***/
         143: (
           /***/
-          function(_) {
+          (function(_) {
             _.exports = function(a) {
               var e = [];
               return e.toString = function() {
@@ -127,123 +127,123 @@ function ze() {
                 }
               }, e;
             };
-          }
+          })
         ),
         /***/
         246: (
           /***/
-          function(_) {
+          (function(_) {
             _.exports = function(a) {
               return a[1];
             };
-          }
+          })
         ),
         /***/
         708: (
           /***/
-          function(_, a) {
+          (function(_, a) {
             a.A = (e, t) => {
               const n = e.__vccOpts || e;
               for (const [r, u] of t)
                 n[r] = u;
               return n;
             };
-          }
+          })
         ),
         /***/
         873: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             var t = e(118);
             t.__esModule && (t = t.default), typeof t == "string" && (t = [[_.id, t, ""]]), t.locals && (_.exports = t.locals);
             var n = e(434).A;
             n("f80e68c0", t, !0, { sourceMap: !1, shadowMode: !1 });
-          }
+          })
         ),
         /***/
         656: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             var t = e(743);
             t.__esModule && (t = t.default), typeof t == "string" && (t = [[_.id, t, ""]]), t.locals && (_.exports = t.locals);
             var n = e(434).A;
             n("6c444b0c", t, !0, { sourceMap: !1, shadowMode: !1 });
-          }
+          })
         ),
         /***/
         679: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             var t = e(102);
             t.__esModule && (t = t.default), typeof t == "string" && (t = [[_.id, t, ""]]), t.locals && (_.exports = t.locals);
             var n = e(434).A;
             n("df6a1d4a", t, !0, { sourceMap: !1, shadowMode: !1 });
-          }
+          })
         ),
         /***/
         261: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             var t = e(80);
             t.__esModule && (t = t.default), typeof t == "string" && (t = [[_.id, t, ""]]), t.locals && (_.exports = t.locals);
             var n = e(434).A;
             n("f473a604", t, !0, { sourceMap: !1, shadowMode: !1 });
-          }
+          })
         ),
         /***/
         309: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             var t = e(722);
             t.__esModule && (t = t.default), typeof t == "string" && (t = [[_.id, t, ""]]), t.locals && (_.exports = t.locals);
             var n = e(434).A;
             n("6c4cedf4", t, !0, { sourceMap: !1, shadowMode: !1 });
-          }
+          })
         ),
         /***/
         174: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             var t = e(715);
             t.__esModule && (t = t.default), typeof t == "string" && (t = [[_.id, t, ""]]), t.locals && (_.exports = t.locals);
             var n = e(434).A;
             n("cb1de664", t, !0, { sourceMap: !1, shadowMode: !1 });
-          }
+          })
         ),
         /***/
         643: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             var t = e(204);
             t.__esModule && (t = t.default), typeof t == "string" && (t = [[_.id, t, ""]]), t.locals && (_.exports = t.locals);
             var n = e(434).A;
             n("7a820381", t, !0, { sourceMap: !1, shadowMode: !1 });
-          }
+          })
         ),
         /***/
         197: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             var t = e(904);
             t.__esModule && (t = t.default), typeof t == "string" && (t = [[_.id, t, ""]]), t.locals && (_.exports = t.locals);
             var n = e(434).A;
             n("0607c4c6", t, !0, { sourceMap: !1, shadowMode: !1 });
-          }
+          })
         ),
         /***/
         417: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             var t = e(834);
             t.__esModule && (t = t.default), typeof t == "string" && (t = [[_.id, t, ""]]), t.locals && (_.exports = t.locals);
             var n = e(434).A;
             n("8f2d6e24", t, !0, { sourceMap: !1, shadowMode: !1 });
-          }
+          })
         ),
         /***/
         434: (
           /***/
-          function(_, a, e) {
+          (function(_, a, e) {
             e.d(a, {
               A: function() {
                 return (
@@ -342,13 +342,13 @@ function ze() {
                   d();
               };
             }
-            var M = /* @__PURE__ */ function() {
+            var M = /* @__PURE__ */ (function() {
               var s = [];
               return function(m, d) {
                 return s[m] = d, s.filter(Boolean).join(`
 `);
               };
-            }();
+            })();
             function H(s, m, d, i) {
               var c = d ? "" : i.css;
               if (s.styleSheet)
@@ -370,7 +370,7 @@ function ze() {
                 s.appendChild(document.createTextNode(d));
               }
             }
-          }
+          })
         )
         /******/
       }, V = {};
@@ -404,22 +404,22 @@ function ze() {
           );
           return p.d(a, { a }), a;
         };
-      })(), function() {
+      })(), (function() {
         p.d = function(_, a) {
           for (var e in a)
             p.o(a, e) && !p.o(_, e) && Object.defineProperty(_, e, { enumerable: !0, get: a[e] });
         };
-      }(), function() {
+      })(), (function() {
         p.o = function(_, a) {
           return Object.prototype.hasOwnProperty.call(_, a);
         };
-      }(), function() {
+      })(), (function() {
         p.r = function(_) {
           typeof Symbol < "u" && Symbol.toStringTag && Object.defineProperty(_, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(_, "__esModule", { value: !0 });
         };
-      }(), function() {
+      })(), (function() {
         p.p = "";
-      }();
+      })();
       var X = {};
       (function() {
         if (p.r(X), p.d(X, {
@@ -747,7 +747,7 @@ function ze() {
         }), Ve = /* @__PURE__ */ (0, M.A)(Ne, [["render", t]]), $e = Ve, Ie = $e;
       })(), I.exports = X;
     })();
-  }(Y)), Y.exports;
+  })(Y)), Y.exports;
 }
 var te = ze();
 const Ge = /* @__PURE__ */ Ke(te), lt = /* @__PURE__ */ Fe({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "0.0.32",
+  "version": "0.1.0",
   "private": false,
   "type": "module",
   "main": "./src/main.ts",
@@ -25,6 +25,7 @@
     "@floating-ui/vue": "^1.1.8",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.5.0",
+    "@types/hast": "^3.0.4",
     "@vueuse/core": "^13.1.0",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
@@ -34,7 +35,7 @@
     "ol": "^10.6.1",
     "pdf-vue3": "^1.0.12",
     "pmtiles": "^4.3.0",
-    "popmotion": "^8.7.6",
+    "popmotion": "^11.0",
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -46,12 +47,12 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "strip-markdown": "^6.0.0",
+    "stylefire": "^7.0.3",
     "swagger-ui-dist": "^5.27.1",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
-    "vue-i18n": "^10.0.6",
     "vue-router": "^4.5.0",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",
@@ -64,20 +65,20 @@
     "@tsconfig/node22": "^22.0.0",
     "@types/geojson": "^7946.0.16",
     "@types/node": "^22.13.1",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^6.0",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.3.0",
-    "@vue/tsconfig": "^0.7.0",
+    "@vue/tsconfig": "^0.8.0",
     "eslint": "^9.18.0",
-    "eslint-plugin-vue": "^9.32.0",
+    "eslint-plugin-vue": "^10.0",
     "jiti": "^2.4.2",
-    "npm-run-all2": "^7.0.2",
+    "npm-run-all2": "^8.0",
     "prettier": "^3.0.0",
     "tailwindcss": "^4.0.8",
-    "typescript": "~5.7.3",
-    "vite": "^6.0.11",
-    "vite-plugin-vue-devtools": "^7.7.1",
-    "vue-tsc": "^2.2.0"
+    "typescript": "^5.7.3",
+    "vite": "^7.0",
+    "vite-plugin-vue-devtools": "^8.0",
+    "vue-tsc": "^3.0"
   },
   "scarfSettings": {
     "enabled": false

package/src/components/ActivityList/ActivityList.vue

@@ -0,0 +1,159 @@
+<template>
+  <PaddedContainer class="p-4 pr-7">
+    <LoadingBlock :status>
+      <template v-if="activities && activities.total">
+        <div
+          v-for="(monthlyActivities, month) in groupedActivities"
+          :key="month"
+          class="my-1"
+        >
+          <p class="pl-3 mb-1 text-xs text-gray-medium">
+            {{ month }}
+          </p>
+          <ul
+            class="space-y-2 p-0 m-0"
+          >
+            <li
+              v-for="(activity, activityIndex) in monthlyActivities"
+              :key="`${activity.key}${activity.created_at}`"
+              class="relative flex"
+            >
+              <div :class="[activityIndex === monthlyActivities.length - 1 ? 'h-6' : '-bottom-6', 'absolute left-0 top-0 flex w-6 justify-center']">
+                <div class="w-px bg-gray-silver" />
+              </div>
+              <div class="relative flex size-6 flex-none items-center justify-center bg-white">
+                <div class="size-[7px] rounded-full bg-gray-silver" />
+              </div>
+              <div class="flex w-full gap-x-3 items-start">
+                <div class="flex flex-none items-center">
+                  <Avatar
+                    :rounded="true"
+                    :size="16"
+                    :user="activity.actor"
+                    class="block"
+                  />
+                  <p class="m-0 text-xs font-bold ml-0.5 text-gray-title">
+                    {{ activity.actor.first_name }}
+                    {{ activity.actor.last_name }}
+                  </p>
+                </div>
+                <details
+                  v-if="hasChanges(activity)"
+                  class="min-w-0 flex-1"
+                >
+                  <summary class="m-0 text-xs text-gray-title">
+                    <slot
+                      name="activity"
+                      v-bind="{ class: 'px-3.5', activity }"
+                    >
+                      {{ getActivityTranslation(activity) }}
+                    </slot>
+                  </summary>
+                  <p class="m-2 text-xs">
+                    {{ t('Aucun Champs mis à jour : | 1 Champ mis à jour : | {n} Champs mis à jour :', { n: activity.changes?.length ?? 0 }) }}
+                  </p>
+                  <div class="font-mono text-xs rounded-sm bg-gray-some p-4 m-2">
+                    <ul class="list-['-'] pl-2 m-0">
+                      <li
+                        v-for="change in activity.changes"
+                        :key="change"
+                        class="pl-1"
+                      >
+                        {{ change }}
+                      </li>
+                    </ul>
+                  </div>
+                </details>
+                <p
+                  v-else
+                  class="m-0 text-xs text-gray-title min-w-0 flex-1"
+                >
+                  <slot
+                    name="activity"
+                    v-bind="{ class: '', activity }"
+                  >
+                    {{ getActivityTranslation(activity) }}
+                  </slot>
+                </p>
+                <p class="m-0 flex-none text-xs text-gray-medium">
+                  {{ t('le {date}', { date: formatDate(activity.created_at) }) }}
+                </p>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <Pagination
+          :total-results="activities.total"
+          :page-size="activities.page_size"
+          :page="activities.page"
+          :link="getLink"
+          @change="(newPage: number) => page = newPage"
+        />
+      </template>
+      <div
+        v-else
+        class="flex flex-col items-center"
+      >
+        <nuxt-img
+          src="/illustrations/list.svg"
+          class="h-32"
+        />
+        <p class="fr-text--bold fr-my-3v">
+          {{ t(`Il n'y a pas encore d'activité`) }}
+        </p>
+      </div>
+    </LoadingBlock>
+  </PaddedContainer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useTranslation } from '../../composables/useTranslation'
+import { getActivityTranslation } from '../../functions/activities'
+import { useFetch } from '../../functions/api'
+import { useFormatDate } from '../../functions/dates'
+import { getLink } from '../../functions/pagination'
+import type { PaginatedArray } from '../../types/api'
+import type { Activity } from '../../types/activity'
+import Avatar from '../Avatar.vue'
+import Pagination from '../Pagination.vue'
+import PaddedContainer from '../PaddedContainer.vue'
+
+const props = defineProps<{
+  id?: string
+  user?: string
+}>()
+
+const route = useRoute()
+const { formatDate } = useFormatDate()
+const { t } = useTranslation()
+
+const page = ref(parseInt(route.query.page as string | undefined ?? '1', 10))
+
+const { data: activities, status } = await useFetch<PaginatedArray<Activity>>('/api/1/activity/', {
+  query: {
+    related_to: props.id ?? undefined,
+    user: props.user ?? undefined,
+    page,
+  },
+})
+
+const groupedActivities = computed(() => activities.value?.data.reduce((grouped, activity) => {
+  const activityMonth = formatDate(activity.created_at, {
+    dateStyle: undefined,
+    day: undefined,
+    month: 'long',
+    year: 'numeric',
+  })
+  if (!grouped[activityMonth]) {
+    grouped[activityMonth] = []
+  }
+  grouped[activityMonth].push(activity)
+  return grouped
+}, {} as Record<string, Array<Activity>>))
+
+function hasChanges(activity: Activity) {
+  return activity.changes && Array.isArray(activity.changes) && activity.changes.length
+}
+</script>

package/src/components/ActivityList/UserActivityList.vue

@@ -0,0 +1,30 @@
+<template>
+  <ActivityList :user>
+    <template #activity="{ class: cls, activity }">
+      {{ getActivityTranslation(activity) }}
+      <slot :activity>
+        <div :class="cls">
+          <AppLink
+            :to="activity.related_to_url"
+            class="link flex truncate"
+            target="_blank"
+          >
+            <span
+              class="truncate"
+            >{{ activity.related_to }}</span>
+          </AppLink>
+        </div>
+      </slot>
+    </template>
+  </ActivityList>
+</template>
+
+<script setup lang="ts">
+import { getActivityTranslation } from '../../functions/activities'
+import AppLink from '../AppLink.vue'
+import ActivityList from './ActivityList.vue'
+
+defineProps<{
+  user: string
+}>()
+</script>

package/src/components/AppLink.vue

@@ -21,12 +21,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 import { useComponentsConfig } from '../config'
+import { useTranslation } from '../composables/useTranslation'
 
 const config = useComponentsConfig()
-const { locale } = useI18n()
+const { locale } = useTranslation()
 
 const props = defineProps<{
   to: string | RouteLocationRaw
@@ -44,7 +44,7 @@ const to = computed(() => {
   if (isExternal.value) return props.to
 
   // TODO harden this for path not starting with "/"x
-  if (typeof props.to === 'string') return `/${locale.value}${props.to}`
+  if (typeof props.to === 'string') return `/${locale}${props.to}`
 
   return props.to
 })

package/src/components/Avatar.vue

@@ -6,6 +6,7 @@
     :height="size"
     loading="lazy"
     alt=""
+    data-testid="user-avatar"
   >
 </template>
 

package/src/components/DataserviceCard.vue

@@ -1,6 +1,6 @@
 <template>
   <article
-    class="my-4 p-4 bg-white border fr-enlarge-link"
+    class="my-4 p-4 bg-white hover:bg-gray-some border fr-enlarge-link"
     :class="{
       'border-tabular-api': isTabularApi,
       'border-gray-default': !isTabularApi,
@@ -128,7 +128,6 @@
 
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue'
-import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 import { RiEyeLine, RiLockLine, RiPassValidLine, RiSparklingLine, RiStarLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
@@ -137,6 +136,7 @@ import { summarize } from '../functions/helpers'
 import { removeMarkdown } from '../functions/markdown'
 import { getOwnerName } from '../functions/owned'
 import type { Dataservice } from '../types/dataservices'
+import { useTranslation } from '../composables/useTranslation'
 import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
 import AppLink from './AppLink.vue'
 
@@ -164,7 +164,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const dataserviceUrl = computed(() => props.dataserviceUrl || props.dataservice.self_web_url)
 
-const { t } = useI18n()
+const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
 const ownerName = computed(() => getOwnerName(props.dataservice))
 const showBadge = computed(() => props.dataservice.access_type === 'restricted' || props.dataservice.access_type === 'open_with_account' || props.dataservice.private || props.dataservice.archived_at)