@tekkare/romulus 0.1.251 → 0.1.253

package/layer/app/components/oip-science/common/Source.vue

@@ -0,0 +1,31 @@
+<!--
+  Les lignes « Source » d'une fiche (anciennement CommonSource de France
+  Augmented Science) : une par cle (« PubMed », « CT.gov »...), resolue par
+  sa fiche Directus.
+-->
+<template>
+  <div class="oip-sc-src">
+    <OipResourceSource v-for="uuid in uuids" :key="uuid" :uuid="uuid" :lang="lang" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { OIP_SCIENCE_SOURCE_UUIDS } from "../../../oip-science/utils/sources";
+
+const props = withDefaults(defineProps<{ sources?: string[]; lang?: "fr" | "en" }>(), {
+  sources: () => [],
+  lang: undefined,
+});
+
+const { locale } = useI18n();
+const lang = computed<"fr" | "en">(() => props.lang ?? (locale.value === "en" ? "en" : "fr"));
+const uuids = computed(() => props.sources.map((key) => OIP_SCIENCE_SOURCE_UUIDS[key]).filter((u): u is string => !!u));
+</script>
+
+<style scoped>
+.oip-sc-src {
+  display: grid;
+  gap: var(--space-4);
+  justify-items: start;
+}
+</style>

package/layer/app/components/oip-science/common/TableTags.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="oip-science">
+    <div ref="refContainer">
+      <div :class="!isVertical ? 'oip_row gap-16 v-start' : 'oip_grid gap-4'">
+        <div>
+          <div
+            class="oip_row gap-4 v-center"
+            :class="{
+              kk_block_limited_width: !isVertical && !isShortFirstColumn,
+              kk_block_limited_width_short: !isVertical && isShortFirstColumn,
+            }"
+          >
+            <RmIcon
+              :name="icon"
+              :size="12"
+              color="var(--cool-grey)"
+              v-if="icon"
+            />
+            <p class="kk_text cool_grey_light" v-if="showTitle">{{ title }}</p>
+            <RmIcon
+              v-if="infoIcon"
+              name="Info"
+              :size="12"
+              color="var(--cool-grey)"
+              class="hover-icon"
+            />
+            <RmTooltip
+              v-if="hoverText"
+              :text="hoverText"
+              class="hover-icon"
+
+              full
+              >
+            <RmIcon
+              name="Info"
+              :size="12"
+                          color="var(--primary)"
+              class="hover-icon"
+            />
+            </RmTooltip>
+          </div>
+        </div>
+
+        <div ref="refTagContainer">
+          <!-- WITHOUT LEGEND -->
+          <div
+            class="oip_row gap-8 wrap v-center"
+            v-if="values && values.length > 0"
+          >
+            <div
+              v-for="(val, index) in values.slice(
+                0,
+                isFullResults ? values.length : resultSizeLimit
+              )"
+              :key="index"
+            >
+              <component
+                :is="clickable ? 'button' : 'div'"
+                :type="clickable ? 'button' : undefined"
+                :class="{ tag_btn: clickable }"
+                @click="clickable && emit('tagClick', index)"
+              >
+                <RmTag variant="gray">
+                  <RmTextHighlight
+                    v-if="highlightQueries !== null"
+                    :queries="highlightQueries"
+                    :text="val || ifNoRes(null)"
+                  />
+                  <span v-else>{{ val }}</span>
+                </RmTag>
+              </component>
+            </div>
+
+            <OipScienceCommonToolTips
+              style="overflow: unset"
+              v-if="!isFullResults && values.length > resultSizeLimit"
+              :tooltip-text="tooltipData"
+              dir="right"
+              :sideLimit="false"
+            >
+              <p class="number_left">+{{ values.length - resultSizeLimit }}</p>
+            </OipScienceCommonToolTips>
+          </div>
+
+          <!-- WITH LEGEND -->
+
+          <div
+            class="oip_row gap-8 wrap v-center"
+            v-if="valuesWithLegend && valuesWithLegend.length > 0"
+          >
+            <div
+              v-for="(val, index) in valuesWithLegend.slice(
+                0,
+                isFullResults ? valuesWithLegend.length : resultSizeLimit
+              )"
+              :key="index"
+            >
+              <div>
+                <RmTooltip
+                  v-if="val?.legend"
+                  :text="val?.legend"
+                  class="hover-icon"
+                  full
+                >
+                  <RmTag variant="gray">
+                    <RmTextHighlight
+                      v-if="highlightQueries !== null"
+                      :queries="highlightQueries"
+                      :text="val?.value || ifNoRes(null)"
+                    />
+                    <span v-else>{{ val?.value }} </span>
+
+                    <RmIcon name="Info" :size="12" />
+                  </RmTag>
+                </RmTooltip>
+                <RmTag variant="gray" v-else>
+                  <RmTextHighlight
+                    v-if="highlightQueries !== null"
+                    :queries="highlightQueries"
+                    :text="val?.value || ifNoRes(null)"
+                  />
+                  <span v-else>{{ val?.value }} </span>
+                </RmTag>
+              </div>
+            </div>
+
+            <OipScienceCommonToolTips
+              v-if="!isFullResults && valuesWithLegend.length > resultSizeLimit"
+              :tooltip-text="tooltipData.map((val) => val?.value)"
+              dir="right"
+              :sideLimit="false"
+            >
+              <p class="number_left">
+                +{{ valuesWithLegend.length - resultSizeLimit }}
+              </p>
+            </OipScienceCommonToolTips>
+          </div>
+
+          <!-- NO TAGS -->
+          <p
+            v-if="
+              (values && values.length === 0) ||
+              (valuesWithLegend && valuesWithLegend.length === 0)
+            "
+            class="no-element"
+            :style="isVertical ? '' : 'padding:5px 0'"
+          >
+            {{ $t('oipScience.ui.tableTags.empty', { title: title?.toLowerCase() }) }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ifNoRes } from '../../../oip-science/utils/styleAndFormat';
+
+const props = defineProps({
+  isVertical: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  isReadMore: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  isShortFirstColumn: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  title: {
+    type: String,
+    required: false,
+  },
+  values: {
+    type: Array,
+    required: false,
+  },
+  valuesWithLegend: {
+    type: Array,
+    required: false,
+    default: null,
+  },
+  isFullResults: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+  resultSizeLimit: {
+    type: Number,
+    required: false,
+    default: 10,
+  },
+  highlightQueries: {
+    type: Array,
+    default: null,
+  },
+  infoIcon: {
+    type: Boolean,
+    default: false,
+  },
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+  hoverText: {
+    type: String,
+    default: null,
+  },
+  /** Les etiquettes (sans legende) deviennent des boutons : `tagClick` donne l'index. */
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{ tagClick: [index: number] }>();
+
+const tooltipData = computed(() => {
+  return props.values
+    ? props.values.slice(props.resultSizeLimit, props.values.length)
+    : props.valuesWithLegend?.slice(
+        props.resultSizeLimit,
+        props.valuesWithLegend.length
+      );
+});
+</script>
+
+<style>
+/* Global dans FAS : limite au conteneur `.oip-science` (specificite inchangee). */
+:where(.oip-science) .number_left {
+  color: var(--Main-Darkest, var(--text-primary));
+
+  font-size: 12px;
+  font-style: bold;
+  font-weight: 700;
+  line-height: normal;
+  cursor: pointer;
+}
+
+:where(.oip-science) .no-element {
+  color: var(--Main-Dark, var(--text-secondary));
+
+  font-size: 12px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: normal;
+}
+
+:where(.oip-science) .hover-icon {
+  cursor: pointer !important;
+}
+
+:where(.oip-science) .tag_btn {
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+:where(.oip-science) .tag_btn:hover .rm-tag,
+:where(.oip-science) .tag_btn:focus-visible .rm-tag {
+  box-shadow: inset 0 0 0 1px var(--color-primary);
+  color: var(--color-primary);
+}
+:where(.oip-science) svg.hover-icon:hover {
+  color: var(--primary) !important;
+}
+</style>

package/layer/app/components/oip-science/common/Timeline.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="oip-science common_timeline_block">
+    <div>
+      <svg
+        width="16"
+        height="16"
+        stroke-width="0"
+        viewBox="0 0 256 256"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="icon_filled_up"
+      >
+        <rect width="256" height="256" fill="none"></rect>
+        <rect
+          x="51.6"
+          y="51.6"
+          width="152.7"
+          height="152.74"
+          rx="8"
+          transform="translate(-53 128) rotate(-45)"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></rect>
+      </svg>
+      <div>
+        <h2 class="oip_underline">{{ title }}</h2>
+        <h1 class="oip_body">{{ content }}</h1>
+      </div>
+    </div>
+    <svg
+      width="16"
+      height="16"
+      stroke-width="0"
+      viewBox="0 0 256 256"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="prmt-phosphor-icon icon_filled_down"
+    >
+      <rect width="256" height="256" fill="none"></rect>
+      <rect
+        x="51.6"
+        y="51.6"
+        width="152.7"
+        height="152.74"
+        rx="8"
+        transform="translate(-53 128) rotate(-45)"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></rect>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style>
+.common_timeline_block {
+  margin-bottom: -20px;
+  width: 100%;
+}
+
+.common_timeline_block div:first-child {
+  display: flex;
+  border-left: 2px solid var(--dividers);
+  border-bottom: 3px solid var(--Main-Darkest);
+  margin-left: 5px;
+  padding-bottom: 10px;
+  width: auto;
+  padding-right: 15px;
+}
+
+.icon_filled_up {
+  fill: var(--dividers);
+  vertical-align: middle;
+  color: var(--dividers);
+  position: relative !important;
+  left: -9px !important;
+  top: -4px;
+}
+
+.icon_filled_down {
+  fill: var(--Main-Darkest, var(--text-primary));
+  vertical-align: middle;
+  color: var(--Main-Darkest, var(--text-primary));
+  position: relative !important;
+  top: -15px !important;
+  left: -2px !important;
+}
+</style>

package/layer/app/components/oip-science/common/ToolTips.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="oip-science prmt_tooltip"
+    :class="sideLimit ? 'last_tooltip' : 'prmt_tooltip'"
+  >
+    <slot> </slot>
+    <div
+      v-if="disable === false"
+      :class="`prmt_tooltip_text_replace prmt_tooltip_text-${dir}`"
+    >
+      <div v-for="(item, index) in tooltipText" :key="index">
+        <p>{{ item }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+export default defineComponent({
+  name: 'argTooltip',
+  props: {
+    tooltipText: { type: Array, required: true },
+    dir: { type: String, default: 'top' },
+    disable: { type: Boolean, default: false },
+    sideLimit: { type: Boolean, default: false },
+  },
+});
+</script>
+
+<style scoped>
+.prmt_tooltip {
+  position: relative;
+  display: flex;
+  width: fit-content;
+}
+.prmt_tooltip:hover .prmt_tooltip_text_replace {
+  visibility: visible;
+}
+
+.prmt_tooltip_text_replace {
+  visibility: hidden;
+  width: max-content;
+  /* max-width: 200px; */
+  background-color: var(--darkest);
+  color: var(--white);
+  border-radius: 4px;
+  position: absolute;
+  z-index: 2;
+  padding: 4px 12px;
+  margin-top: 4px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 160%;
+  white-space: wrap;
+  /* display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden; */
+  text-align: left;
+}
+
+.prmt_tooltip .prmt_tooltip_text-top {
+  bottom: 120%;
+  left: 50%;
+  margin-left: -72px;
+}
+
+.prmt_tooltip .prmt_tooltip_text-right {
+  top: -9px;
+  left: 110%;
+  margin-left: 16px;
+}
+.prmt_tooltip .prmt_tooltip_text-left {
+  top: -9px;
+  right: 110%;
+  margin-right: 16px;
+}
+
+.prmt_tooltip .prmt_tooltip_text-bottom {
+  top: 110%;
+  left: 50%;
+  margin-left: -72px;
+}
+
+.prmt_tooltip.last_tooltip .prmt_tooltip_text-bottom {
+  top: 110%;
+  left: 50%;
+  margin-left: -130px;
+}
+</style>