@cnamts/synapse 1.0.23 → 1.0.24

package/src/stories/GuideDuDev/Amelipro.stories.ts

@@ -0,0 +1,209 @@
+import {
+	VDivider,
+	VExpansionPanel,
+	VExpansionPanels,
+	VExpansionPanelText,
+	VExpansionPanelTitle,
+} from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+
+export default {
+	title: 'Guide Du Dev/Correspondance composants Amelipro',
+}
+
+export const ApComponents: StoryObj = {
+	render: () => {
+		return {
+			components: {
+				VExpansionPanels,
+				VExpansionPanel,
+				VExpansionPanelTitle,
+				VExpansionPanelText,
+				VDivider,
+			},
+			setup() {
+				return {}
+			},
+			template: `
+              <VExpansionPanels>
+
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    FooterBar
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Le composant <span class="component-name">AmeliproFooter</span> est remplacé par le composant
+                      <span class="component-name">FooterBar</span> de Synapse.
+                      <br>
+                      <a href="https://cnam-design-system.netlify.app/?path=/docs/composants-structure-footerbar--docs"
+                         target="_blank" rel="noopener noreferrer"
+                      >
+                        Documentation du composant Synapse FooterBar
+                      </a>
+                    </p>
+                    <p class="mt-4">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-footer">
+                        Documentation du composant AmeliproFooter correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    HeaderBar
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Le composant <span class="component-name">AmeliproHeader</span> est remplacé par le composant
+                      <span class="component-name">HeaderBar</span> de Synapse.
+                      <br>
+                      <a href="https://cnam-design-system.netlify.app/?path=/docs/composants-structure-headerbar--docs"
+                         target="_blank" rel="noopener noreferrer"
+                      >
+                        Documentation du composant Synapse HeaderBar
+                      </a>
+                    </p>
+                    <p class="mt-4">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-header">
+                        Documentation du composant AmeliproHeader correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    Boutons
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Les boutons de bases peuvent êtres crées en utilisant le composant <span class="component-name">VBtn</span>
+                      de Vuetify.
+                      <br>
+                      <a href="https://vuetifyjs.com/api/v-btn" target="_blank" rel="noopener noreferrer">
+                        Documentation du composant Vuetify Vbtn
+                      </a>
+                    </p>
+
+                    <div class="mt-4">
+								<pre>
+	&lt;VBtn color=&quot;primary&quot;&gt;
+		Bouton d’action primaire
+	&lt;/VBtn&gt;
+	&lt;VBtn&gt;
+		Bouton d’action par d&#233;faut
+	&lt;/VBtn&gt;
+								</pre>
+                    </div>
+
+                    <p class="mt-4">
+                      Les boutons case à cocher ou radio peuvent êtres crées avec le composant Vuetify <span
+                        class="component-name"
+                    >VBtnToggle</span>.
+                      <a href="https://vuetifyjs.com/components/button-groups" target="_blank"
+                         rel="noopener noreferrer"
+                      >
+                        Documentation du composant Vuetify VBtnToggle
+                      </a>
+                    </p>
+                    <p class="mt-6">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-btn">
+                        Documentation du composant AmeliproBtn correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    Tooltips
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Les tooltips de bases peuvent êtres crées en utilisant le composant <span class="component-name">Vtooltip</span>
+                      de Vuetify.
+                      <br>
+                      <a href="https://vuetifyjs.com/en/api/v-tooltip" target="_blank" rel="noopener noreferrer">
+                        Documentation du composant Vuetify Vtooltip
+                      </a>
+                    </p>
+
+                    <div class="mt-4">
+								<pre>
+    &lt;v-tooltip text=&quot;Tooltip&quot;&gt;
+      &lt;template v-slot:activator=&quot;{ props }&quot;&gt;
+        &lt;v-btn v-bind=&quot;props&quot;&gt;
+          Hover Over Me
+        &lt;/v-btn&gt;
+      &lt;/template&gt;
+    &lt;/v-tooltip&gt;
+								</pre>
+                    </div>
+
+                    <p class="mt-6">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-tooltips">
+                        Documentation du composant AmeliproTooltips correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    Layout
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Le composant <span class="component-name">AmeliproContentLayout</span> est remplacé par le
+                      composant
+                      <span class="component-name">PageContainer</span> de Synapse.
+                      <br>
+                      <a href="https://cnam-design-system.netlify.app/?path=/docs/composants-layout-pagecontainer--docs"
+                         target="_blank" rel="noopener noreferrer"
+                      >
+                        Documentation du composant Synapse PageContainer
+                      </a>
+                    </p>
+                    <p class="mt-4">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-content-layout">
+                        Documentation du composant AmeliproContentLayout correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+                <VExpansionPanel>
+                  <VExpansionPanelTitle class="font-weight-bold">
+                    Pagination
+                  </VExpansionPanelTitle>
+                  <VExpansionPanelText>
+                    <p>
+                      Le composant <span class="component-name">AmeliproPagination</span> est remplacé par le
+                      composant
+                      <span class="component-name">SyPagination</span> de Synapse.
+                      <br>
+                      <a href="https://cnam-design-system.netlify.app/?path=/docs/composants-navigation-sypagination--docs"
+                         target="_blank" rel="noopener noreferrer"
+                      >
+                        Documentation du composant Synapse SyPagination
+                      </a>
+                    </p>
+                    <p class="mt-4">
+                      <VDivider class="pb-2"/>
+                      <a href="https://p2-design-system-dev.app.ge-4.digital.ramage/composants/amelipro-pagination">
+                        Documentation du composant AmeliproPagination correspondant
+                      </a>
+                    </p>
+                  </VExpansionPanelText>
+                </VExpansionPanel>
+              </VExpansionPanels>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/GuideDuDev/vuetifyOptions.mdx

@@ -24,7 +24,7 @@ Prenons l'exemple d'un bouton (VBtn).
 Voici un exemple d'utilisation du composant :
 
 <Source dark code={`
-<MyButton
+<VBtn
     :title="'Cliquez ici'"
     :vuetifyOptions="{ btn: { color: 'secondary', icon: true } }"
 />
@@ -47,7 +47,7 @@ Dans cet exemple :
 Voici un exemple plus complet :
 
 <Source dark code={`
-<MyButton
+<VBtn
     :title="'Valider'"
     :vuetifyOptions="{ btn: { color: 'primary', outlined: false, icon: true } }"
  />
@@ -69,7 +69,7 @@ Exemple de bouton par défaut
 Sans fournir de vuetifyOptions, le bouton pourrait ressembler à ceci :
 
 <Source dark code={`
-<MyButton :title="'Par défaut'" />
+<VBtn :title="'Par défaut'" />
 `} />
 
 Ce bouton utilisera les options par défaut définies dans le design system, telles que la couleur, le style de bordure ou les icônes.

package/dist/SelectFilter-BioGT6Nn.js

@@ -1,136 +0,0 @@
-import { defineComponent as C, computed as p, ref as F, openBlock as S, createElementBlock as A, createVNode as B } from "vue";
-import { S as E, _ as D } from "./main-aLKwdMi1.js";
-const n = {
-  defaultOption: "- choisir -",
-  emptyValue: "(vide)"
-}, h = {}, I = { class: "select-filter-wrapper" }, N = /* @__PURE__ */ C({
-  __name: "SelectFilter",
-  props: {
-    header: {
-      type: Object,
-      required: !0
-    },
-    filters: {
-      type: Array,
-      default: () => []
-    },
-    filterValue: {
-      type: [String, Number, Object, Array, void 0, null],
-      default: null
-    },
-    inputConfig: {
-      type: Object,
-      default: () => ({})
-    },
-    disableErrorHandling: {
-      type: Boolean,
-      default: !1
-    },
-    variant: {
-      type: String,
-      default: "outlined"
-    },
-    hideDetails: {
-      type: Boolean,
-      default: !0
-    },
-    density: {
-      type: String,
-      default: "compact"
-    },
-    backgroundColor: {
-      type: String,
-      default: "white"
-    },
-    clearable: {
-      type: Boolean,
-      default: !0
-    }
-  },
-  emits: ["update:filters"],
-  setup(i, { emit: m }) {
-    const e = i, o = m;
-    function y() {
-      return String(e.header.key || e.header.value || (e.header.title ? `filter_${e.header.title}` : `filter_${Date.now()}`));
-    }
-    const v = p(() => {
-      if (!e.header.filterOptions || !Array.isArray(e.header.filterOptions))
-        return [{ text: n.defaultOption, value: n.defaultOption }];
-      const l = [{ text: n.defaultOption, value: n.defaultOption }];
-      return e.header.filterOptions.forEach((t) => {
-        t.text === void 0 || t.text === null || t.text === "" ? l.push({ text: n.emptyValue, value: t.value }) : l.push(t);
-      }), l;
-    }), f = p({
-      get: () => e.filterValue === null ? e.header.multiple ? [] : n.defaultOption : e.filterValue,
-      set: (l) => {
-        const t = y();
-        if (!t) return;
-        if (e.header.multiple) {
-          if (!l || Array.isArray(l) && l.length === 0) {
-            const d = e.filters.filter((c) => c.key !== t);
-            o("update:filters", d);
-            return;
-          }
-          const r = e.filters.findIndex((d) => d.key === t), a = [...e.filters];
-          r >= 0 ? a[r].value = l : a.push({
-            key: t,
-            value: l,
-            type: "select"
-          }), o("update:filters", a);
-          return;
-        }
-        if (l == null || l === n.defaultOption) {
-          const r = e.filters.filter((a) => a.key !== t);
-          o("update:filters", r);
-          return;
-        }
-        const u = e.filters.findIndex((r) => r.key === t), s = [...e.filters];
-        u >= 0 ? s[u].value = l : s.push({
-          key: t,
-          value: l,
-          type: "select"
-        }), o("update:filters", s);
-      }
-    });
-    function b() {
-      const l = y(), t = e.filters.filter((u) => u.key !== l);
-      o("update:filters", t);
-    }
-    const g = F(!1);
-    function O() {
-      g.value = !0;
-    }
-    function x() {
-      g.value = !1;
-    }
-    const k = p(() => (h == null ? void 0 : h.NODE_ENV) === "test" ? !0 : e.header.multiple ? Array.isArray(f.value) && f.value.length > 0 : f.value !== n.defaultOption);
-    return (l, t) => {
-      var u, s, r, a, d;
-      return S(), A("div", I, [
-        B(E, {
-          modelValue: f.value,
-          "onUpdate:modelValue": t[0] || (t[0] = (c) => f.value = c),
-          label: e.header.title || "",
-          items: v.value,
-          clearable: k.value,
-          density: ((u = i.inputConfig) == null ? void 0 : u.density) ?? i.density,
-          "hide-details": ((s = i.inputConfig) == null ? void 0 : s.hideDetails) ?? i.hideDetails,
-          "hide-messages": !0,
-          variant: ((r = i.inputConfig) == null ? void 0 : r.variant) ?? i.variant,
-          "bg-color": ((a = i.inputConfig) == null ? void 0 : a.backgroundColor) ?? i.backgroundColor,
-          "disable-error-handling": ((d = i.inputConfig) == null ? void 0 : d.disableErrorHandling) ?? i.disableErrorHandling,
-          multiple: e.header.multiple,
-          chips: e.header.chips,
-          class: "filter-input",
-          "aria-label": e.header.title || "Filtre",
-          "onClick:clear": b,
-          onFocus: O,
-          onBlur: x
-        }, null, 8, ["modelValue", "label", "items", "clearable", "density", "hide-details", "variant", "bg-color", "disable-error-handling", "multiple", "chips", "aria-label"])
-      ]);
-    };
-  }
-}), q = /* @__PURE__ */ D(N, [["__scopeId", "data-v-6ca4c9b4"]]);
-export {
-  q as default
-};