ep-lib-ts 0.1.43 → 1.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.1.43",
+  "version": "1.0.0",
   "files": [
     "dist",
     "src/components/"
@@ -26,41 +26,37 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@highlightjs/vue-plugin": "^2.1.0",
-    "@mdi/js": "^7.1.96",
-    "@vueuse/core": "^10.1.2",
-    "@wdns/vue-code-block": "^2.3.1",
-    "apexcharts": "^3.41.1",
-    "highlight.js": "^11.9.0",
-    "katex": "^0.16.8",
-    "markdown-it": "^13.0.1",
-    "postcss-cli": "^10.1.0",
-    "vee-validate": "^4.8.6",
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6",
-    "vue3-apexcharts": "^1.4.4",
-    "vue3-highlightjs": "^1.0.5"
+    "@mdi/js": "^7.4.47",
+    "@vueuse/core": "^10.9.0",
+    "@wdns/vue-code-block": "^2.3.2",
+    "apexcharts": "^3.49.0",
+    "katex": "^0.16.10",
+    "markdown-it": "^14.1.0",
+    "postcss-cli": "^11.0.0",
+    "vee-validate": "^4.12.6",
+    "vue": "^3.4.25",
+    "vue-router": "^4.3.2",
+    "vue3-apexcharts": "^1.5.2"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.3",
-    "@types/katex": "^0.16.2",
-    "@types/markdown-it": "^12.2.3",
-    "@types/node": "^20.4.9",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "autoprefixer": "^10.4.14",
+    "@tailwindcss/forms": "^0.5.7",
+    "@types/katex": "^0.16.7",
+    "@types/markdown-it": "^14.0.1",
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
     "path": "^0.12.7",
-    "postcss": "^8.4.27",
-    "shikiji": "^0.9.11",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.2.0-dev.20230801",
-    "vite": "^4.1.0",
-    "vite-plugin-dts": "^3.5.2",
-    "vue-tsc": "^1.8.27"
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.10",
+    "vite-plugin-dts": "^3.9.0",
+    "vue-tsc": "^2.0.14"
   },
   "peerDependencies": {
     "vue": "^3.2.45"
   },
   "engines": {
-    "node": "18.x.x"
+    "node": "20.x.x"
   }
 }

package/src/components/charts/EpBarChart.vue

@@ -16,8 +16,8 @@ interface Options {
   xaxis: {
     categories: (number | string)[];
     convertedCatToNumeric?: boolean;
-  }
-
+   }
+  colors?:string[];
 }
 
 interface Props {
@@ -31,7 +31,7 @@ interface Props {
   type?: MediaVariants;
   mandateLevel?: string | null;
   source?:string;
-  width?:string
+  width?:string;
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/charts/EpLineChart.vue

@@ -15,8 +15,8 @@ interface Options {
     xaxis: {
         categories: (number | string)[];
         convertedCatToNumeric?: boolean;
-    }
-
+    },
+    colors?:string[]
 }
 
 interface Props {
@@ -30,7 +30,7 @@ interface Props {
     type?: MediaVariants;
     mandateLevel?: string | null;
     source?: string;
-    width?:string
+    width?:string;
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/charts/EpPieChart.vue

@@ -18,6 +18,7 @@ interface OptionsPieChart {
   }
   title:TitlePie;
   labels:string[];
+  colors?:string[];
 }
 
 

package/src/components/interactions/EpDarkmode.vue

@@ -0,0 +1,48 @@
+<template> 
+<button @click="toggleTheme">
+   <span v-if="userTheme === 'dark'">
+    ☀️
+    </span>
+    <span v-if="userTheme === 'light'">
+    🌙
+    </span> 
+  </button>
+</template>
+
+<script setup lang="ts">
+    import { ref, onMounted } from 'vue';
+
+    export type UserTheme = 'light' | 'dark';
+
+    const setTheme = (theme: UserTheme) => {
+        localStorage.setItem('user-theme', theme);
+        userTheme.value = theme;
+        document.documentElement.className = theme;
+    };
+
+    const getTheme = (): UserTheme => {
+        return localStorage.getItem('user-theme') as UserTheme;
+    };
+
+    const toggleTheme = (): void => {
+        const activeTheme = localStorage.getItem('user-theme');
+        if (activeTheme === 'light') {
+            setTheme('dark');
+        } else {
+            setTheme('light');
+        }
+    };
+
+    const getMediaPreference = (): UserTheme => {
+        const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (hasDarkPreference) {
+            return 'dark';
+        } else {
+            return 'light';
+        }
+    };
+
+    const userTheme = ref<UserTheme>(getTheme() || getMediaPreference());
+
+    onMounted(() => setTheme(userTheme.value));
+</script>

package/src/components/interactions/EpSummativeTable.vue

@@ -35,7 +35,7 @@ const transformNumber = (value:string|number) => {
     <div class="mt-4 bg-gray-50 p-4">
         <h4 v-if="title" class="text-xl font-semibold mb-6">{{ title }}</h4>
         <template v-for="(question,i) in questions" :key="`item-question-${i}`">
-            <p class=" text-gray-600 py-2 rounded">{{question.question}}</p>
+            <p class=" text-gray-600 py-2 rounded">{{question.label}}</p>
             <div class="flex flex-row flex-wrap gap-y-2 sm:gap-x-4">
                 <template v-for="(_option, j) in question.options" :key="`option-question-${j}`">
                     <EpRadioSummative 

package/src/components/medias/EpLink.vue

@@ -2,14 +2,13 @@
 import { computed, toRefs } from "vue";
 //types with capital letter, object styles in lowercase
 import { MediaVariants } from "../../types/Medias";
-import { MandateLevel } from '../../types/MandateLevel';
+import { MandateLevel } from "../../types/MandateLevel";
 import EpBtn from "../basics/EpBtn.vue";
 import { mdiLinkVariant } from "@mdi/js";
 import EpEdu from "../educationals/EpEdu.vue";
 import useColors from "../../composables/useColors";
 import { useRenderText } from "../../composables/useRenderText";
 
-
 interface Props {
   url: string;
   title?: string;
@@ -26,36 +25,54 @@ const props = withDefaults(defineProps<Props>(), {
   labelIntentions: "Intentions d'écoute",
   type: "primary",
   hideIcon: false,
-  intentions: ""
+  intentions: "",
 });
 
 const renderIcon = computed(() => {
   if (props.icon) {
-    return props.icon
+    return props.icon;
   }
-  return mdiLinkVariant
-})
+  return mdiLinkVariant;
+});
 
 const hoverColor = computed(() => {
-  return `absolute ${useColors('bg', props.type + 'light')} bottom-0 w-0 left-1/2 h-full -translate-x-1/2 transition-all ease-in-out duration-300 group-hover:w-[105%] -z-[1] group-focus:w-[105%]`
-})
+  return `absolute ${useColors(
+    "bg",
+    props.type + "light"
+  )} bottom-0 w-0 left-1/2 h-full -translate-x-1/2 transition-all ease-in-out duration-300 group-hover:w-[105%] -z-[1] group-focus:w-[105%]`;
+});
 
 const { url, title, intentions, mandateLevel, hideIcon } = toRefs(props);
 </script>
 
 <template>
-  <EpEdu :title="labelCard" :icon="renderIcon" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
+  <EpEdu
+    :title="labelCard"
+    :icon="renderIcon"
+    flat
+    :type="type"
+    :hideIcon="hideIcon"
+    :mandateLevel="mandateLevel"
+  >
     <template #intentions v-if="useRenderText(intentions)">
       <div v-html="useRenderText(intentions)"></div>
     </template>
     <template #content>
       <div class="flex justify-center">
         <div class="w-4/5">
-          <EpBtn block :color="type === 'base' ? 'text-black' : 'text-white'" rounded :type="type" :prependIcon="renderIcon"
+          <EpBtn
+            block
+            :color="type === 'base' ? 'text-black' : 'text-white'"
+            rounded
+            :type="type"
+            :prependIcon="renderIcon"
             :href="url"
-            extraClass="group font-medium tracking-wide relative inline-flex justify-center overflow-hidden z-10 transition-all duration-300 ease-in-out ">
-            <span class="font-medium tracking-wider ">{{ title }}</span>
-            <span :class='hoverColor'></span>
+            extraClass="group font-medium tracking-wide relative inline-flex justify-center overflow-hidden z-10 transition-all duration-300 ease-in-out "
+          >
+            <div>
+              <span class="font-medium tracking-wider">{{ title }}</span>
+              <span :class="hoverColor"></span>
+            </div>
           </EpBtn>
         </div>
       </div>

package/src/components/medias/EpVideoPanopto.vue

@@ -18,6 +18,7 @@ interface Props{
    labelIntentions?:string;
    type?:MediaVariants;
    hideIcon?:boolean;
+   big?:boolean;
 }
 
 const props = withDefaults(defineProps<Props>(),{ 
@@ -41,6 +42,13 @@ const renderText = computed(()=>{
 //controls
 //const controls = useMediaControls(video, {src:props.src})
 
+const sizeVideo = computed(()=> {
+   if(props.big){
+      return "700"
+   }
+   return "360"
+})
+
 const {src, title, hideIcon, type} = toRefs(props)
 
 </script>
@@ -53,7 +61,8 @@ const {src, title, hideIcon, type} = toRefs(props)
      </template>
      <template #content>
       <div class="max-w-screen-sm mx-auto">
-         <iframe :src="src" width="100%" height="360" frameborder="0" allowfullscreen></iframe>
+         <iframe :src="src" width="100%" :height="sizeVideo" frameborder="0" allowfullscreen></iframe>
+     
       </div>
      </template>
      <!-- <template #actions>

package/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}

package/dist/BgAudio-9074bf47.js

@@ -1,6 +0,0 @@
-import { S as o } from "./index-a3ad71e0.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/DisplayBox-e2f9c14b.js

@@ -1,6 +0,0 @@
-import { T as o } from "./index-a3ad71e0.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpAlert-98a8913b.js

@@ -1,6 +0,0 @@
-import { O as o } from "./index-a3ad71e0.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpAudio-8bca3f8b.js

@@ -1,6 +0,0 @@
-import { E as o } from "./index-a3ad71e0.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpAvatar-1e55fdc7.js

@@ -1,50 +0,0 @@
-import { defineComponent as x, computed as t, openBlock as r, createElementBlock as n, createElementVNode as s, normalizeClass as o, toDisplayString as f, createCommentVNode as h } from "vue";
-const p = {
-  circle: {
-    small: " rounded-full  w-12 h-12  text-5xl ",
-    middle: "rounded-full  w-14 h-14  text-6xl",
-    big: "rounded-full  w-16 h-16  text-7xl"
-  },
-  square: {
-    small: "w-12 h-12  text-5xl",
-    middle: "w-14 h-14  text-6xl",
-    big: "w-16 h-16  text-7xl"
-  },
-  rounded: {
-    small: "rounded  w-12 h-12  text-5xl",
-    middle: "rounded  w-14 h-14  text-6xl",
-    big: "rounded  w-16 h-16  text-7xl"
-  }
-}, v = { key: 0 }, _ = ["src", "alt"], w = { key: 1 }, b = /* @__PURE__ */ x({
-  __name: "EpAvatar",
-  props: {
-    src: { default: "" },
-    alt: { default: "" },
-    color: { default: "primary" },
-    size: { default: "small" },
-    variant: { default: "circle" },
-    name: { default: "" }
-  },
-  setup(c) {
-    const e = c, d = t(() => e.variant), u = t(() => e.size), a = t(() => {
-      var l;
-      return `${(l = p[d.value]) == null ? void 0 : l[u.value]}`;
-    }), i = t(() => " bg-" + e.color), m = t(() => e.name.length > 2 ? e.name.slice(0, 2) : e.name);
-    return (l, g) => (r(), n("div", null, [
-      e.src != "" ? (r(), n("div", v, [
-        s("img", {
-          src: e.src,
-          alt: e.alt,
-          class: o(`${a.value} `)
-        }, null, 10, _)
-      ])) : e.src == "" ? (r(), n("div", w, [
-        s("div", {
-          class: o(`${a.value}  ${i.value}  justify-center font-bold text-white flex items-center`)
-        }, f(m.value), 3)
-      ])) : h("", !0)
-    ]));
-  }
-});
-export {
-  b as default
-};

package/dist/EpBadge-aa69b61f.js

@@ -1,6 +0,0 @@
-import { c as o } from "./index-a3ad71e0.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpBadge-f5faab43.js

@@ -1,55 +0,0 @@
-import { defineComponent as u, computed as t, openBlock as f, createElementBlock as s, renderSlot as b, createElementVNode as c, normalizeClass as h, toDisplayString as m } from "vue";
-const x = {
-  top_left: {
-    default: "-top-2 -left-2 absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold  text-white    border-2 border-white rounded-full  dark:border-gray-900",
-    dot: "-top-2 -left-2 absolute inline-flex items-center justify-center w-4 h-4  border-2 border-white rounded-full  dark:border-gray-900",
-    hide: ""
-  },
-  top_right: {
-    default: "-top-2 -right-2 absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold  text-white  border-2 border-white rounded-full  dark:border-gray-900",
-    dot: "-top-2 -right-2 absolute inline-flex items-center justify-center w-4 h-4  font-bold font-bold text-white  border-2 border-white rounded-full  dark:border-gray-900",
-    hide: ""
-  },
-  bottom_left: {
-    default: "-bottom-2 -left-2 absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold   text-white  border-2 border-white rounded-full  dark:border-gray-900",
-    dot: "-bottom-2 -left-2 absolute inline-flex items-center justify-center w-4 h-4 font-bold   border-2 border-white rounded-full  dark:border-gray-900",
-    hide: ""
-  },
-  bottom_right: {
-    default: "-bottom-2 -right-2 absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold    text-white border-2 border-white rounded-full  dark:border-gray-900",
-    dot: "-bottom-2 -right-2 absolute inline-flex items-center justify-center w-4 h-4          font-bold              border-2 border-white rounded-full  dark:border-gray-900",
-    hide: ""
-  }
-}, p = { class: "group relative w-max" }, w = /* @__PURE__ */ u({
-  __name: "EpBadge",
-  props: {
-    content: {},
-    mode: { default: "default" },
-    placement: { default: "top_right" },
-    visibility: { default: "true" },
-    color: { default: "primary" },
-    maxValue: { default: 0 }
-  },
-  setup(o) {
-    const e = o, l = t(() => e.placement), n = t(() => {
-      if (e.mode == "dot")
-        return "";
-      if (e.visibility == "false")
-        return "";
-      if (e.content != 0)
-        return e.content > e.maxValue && e.maxValue != 0 ? e.maxValue + "+" : e.content;
-    }), d = t(() => e.visibility == "true" ? e.mode : "hide"), i = t(() => "bg-" + e.color), a = t(() => {
-      var r;
-      return `${(r = x[l.value]) == null ? void 0 : r[d.value]}`;
-    });
-    return (r, y) => (f(), s("div", p, [
-      b(r.$slots, "default"),
-      c("div", {
-        class: h(`${a.value} ${i.value}`)
-      }, m(n.value), 3)
-    ]));
-  }
-});
-export {
-  w as default
-};

package/dist/EpBarChart-89719705.js

@@ -1,6 +0,0 @@
-import { o as m } from "./index-a3ad71e0.js";
-import "vue";
-import "vue-router";
-export {
-  m as default
-};

package/dist/EpBtn-94de00aa.js

@@ -1,6 +0,0 @@
-import { d as o } from "./index-a3ad71e0.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpCard-d31b9544.js

@@ -1,6 +0,0 @@
-import { e as o } from "./index-a3ad71e0.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpCheckbox-b4696548.js

@@ -1,41 +0,0 @@
-import { defineComponent as y, computed as b, toRefs as g, openBlock as x, createElementBlock as v, withDirectives as _, createElementVNode as d, unref as e, vModelCheckbox as h, toDisplayString as k } from "vue";
-const V = { class: "cursor-pointer flex items-center rounded-md py-3 px-3 text-xs font-semibold uppercase sm:flex-1 hover:bg-gray-200" }, B = ["id", "value", "disabled", "readonly"], C = { class: "ml-2" }, D = /* @__PURE__ */ y({
-  __name: "EpCheckbox",
-  props: {
-    id: { default: "0" },
-    label: { default: "check" },
-    modelValue: { type: [String, Array, Boolean], default: "" },
-    disabled: { type: Boolean, default: !1 },
-    readonly: { type: Boolean, default: !1 },
-    value: { default: void 0 }
-  },
-  emits: ["update:modelValue"],
-  setup(r, { emit: s }) {
-    const o = r, n = s, t = b({
-      get() {
-        return o.modelValue;
-      },
-      set(a) {
-        n("update:modelValue", a);
-      }
-    }), { id: u, label: i, disabled: c, readonly: p, value: m } = g(o);
-    return (a, l) => (x(), v("label", V, [
-      _(d("input", {
-        type: "checkbox",
-        id: e(u),
-        "onUpdate:modelValue": l[0] || (l[0] = (f) => t.value = f),
-        value: e(m),
-        disabled: e(c),
-        readonly: e(p),
-        name: "notification-method",
-        class: "rounded bg-gray-200 border-gray-300 focus:border-transparent focus:bg-gray-200 text-primary focus:ring-1 focus:ring-offset-2 focus:ring-primary"
-      }, null, 8, B), [
-        [h, t.value]
-      ]),
-      d("span", C, k(e(i)), 1)
-    ]));
-  }
-});
-export {
-  D as default
-};

package/dist/EpChip-b1c3761b.js

@@ -1,6 +0,0 @@
-import { f as o } from "./index-a3ad71e0.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};