ep-lib-ts 1.0.63 → 1.0.65

package/dist/components/basics/EpAvatar.vue.js

@@ -1,57 +1,4 @@
-import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, createElementVNode, normalizeClass, toDisplayString } from "vue";
-import { typeAvatar } from "../../types/Avatar.js";
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = ["src", "alt"];
-const _hoisted_3 = { key: 1 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "EpAvatar",
-  props: {
-    src: { default: "" },
-    alt: { default: "" },
-    color: { default: "primary" },
-    size: { default: "small" },
-    variant: { default: "circle" },
-    name: { default: "" }
-  },
-  setup(__props) {
-    const props = __props;
-    const style = computed(() => {
-      return props.variant;
-    });
-    const size = computed(() => {
-      return props.size;
-    });
-    const final_style = computed(() => {
-      var _a;
-      return `${(_a = typeAvatar[style.value]) == null ? void 0 : _a[size.value]}`;
-    });
-    const bgcolor = computed(() => {
-      return " bg-" + props.color;
-    });
-    const final_name = computed(() => {
-      if (props.name.length > 2) {
-        return props.name.slice(0, 2);
-      } else {
-        return props.name;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        props.src != "" ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          createElementVNode("img", {
-            src: props.src,
-            alt: props.alt,
-            class: normalizeClass(`${final_style.value} `)
-          }, null, 10, _hoisted_2)
-        ])) : props.src == "" ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          createElementVNode("div", {
-            class: normalizeClass(`${final_style.value}  ${bgcolor.value}  justify-center font-bold text-white flex items-center`)
-          }, toDisplayString(final_name.value), 3)
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
+import _sfc_main from "./EpAvatar.vue2.js";
 export {
   _sfc_main as default
 };

package/dist/components/basics/EpAvatar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpAvatar.vue.js","sources":["../../../src/components/basics/EpAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { typeAvatar } from \"~/types/Avatar\";\nimport type { EpAvatarProps } from \"~/types/basics/EpAvatar\";\n\n// define parameter and default valule\nconst props = withDefaults(defineProps<EpAvatarProps>(), {\n  src: \"\",\n  alt: \"\",\n  color: \"primary\",\n  size: \"small\",\n  variant: \"circle\",\n  name: \"\",\n});\n\nconst style = computed(() => {\n  return props.variant;\n});\n\nconst size = computed(() => {\n  return props.size;\n});\n\nconst final_style = computed(() => {\n  return `${typeAvatar[style.value]?.[size.value]}`;\n});\n\nconst bgcolor = computed(() => {\n  return \" bg-\" + props.color;\n});\n\nconst final_name = computed(() => {\n  if (props.name.length > 2) {\n    return props.name.slice(0, 2);\n  } else {\n    return props.name;\n  }\n});\n</script>\n<template>\n  <div>\n    <div v-if=\"props.src != ''\">\n      <img :src=\"props.src\" :alt=\"props.alt\" :class=\"`${final_style} `\" />\n    </div>\n    <div v-else-if=\"props.src == ''\">\n      <div\n        :class=\"`${final_style}  ${bgcolor}  justify-center font-bold text-white flex items-center`\"\n      >\n        {{ final_name }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AASd,UAAM,QAAQ,SAAS,MAAM;AAC3B,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,OAAO,SAAS,MAAM;AAC1B,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;;AACjC,aAAO,IAAG,gBAAW,MAAM,KAAK,MAAtB,mBAA0B,KAAK,MAAM;AAAA,IACjD,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,aAAO,SAAS,MAAM;AAAA,IACxB,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,KAAK,SAAS,GAAG;AACzB,eAAO,MAAM,KAAK,MAAM,GAAG,CAAC;AAAA,MAC9B,OAAO;AACL,eAAO,MAAM;AAAA,MACf;AAAA,IACF,CAAC;;0BAGCA,mBAWM,OAAA,MAAA;AAAA,QAVO,MAAM,OAAG,mBAApBA,mBAEM,OAAA,YAAA;AAAA,UADJC,mBAAoE,OAAA;AAAA,YAA9D,KAAK,MAAM;AAAA,YAAM,KAAK,MAAM;AAAA,YAAM,yBAAU,YAAA,KAAW,GAAA;AAAA,UAAA;cAE/C,MAAM,OAAG,mBAAzBD,mBAMM,OAAA,YAAA;AAAA,UALJC,mBAIM,OAAA;AAAA,YAHH,OAAKC,eAAA,GAAK,YAAA,KAAW,KAAK,QAAA,KAAO,yDAAA;AAAA,UAAA,mBAE/B,WAAA,KAAU,GAAA,CAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"EpAvatar.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/basics/EpAvatar.vue2.js

@@ -1,4 +1,57 @@
-import _sfc_main from "./EpAvatar.vue.js";
+import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, createElementVNode, normalizeClass, toDisplayString } from "vue";
+import { typeAvatar } from "../../types/Avatar.js";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = ["src", "alt"];
+const _hoisted_3 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EpAvatar",
+  props: {
+    src: { default: "" },
+    alt: { default: "" },
+    color: { default: "primary" },
+    size: { default: "small" },
+    variant: { default: "circle" },
+    name: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const style = computed(() => {
+      return props.variant;
+    });
+    const size = computed(() => {
+      return props.size;
+    });
+    const final_style = computed(() => {
+      var _a;
+      return `${(_a = typeAvatar[style.value]) == null ? void 0 : _a[size.value]}`;
+    });
+    const bgcolor = computed(() => {
+      return "ep-bg-" + props.color;
+    });
+    const final_name = computed(() => {
+      if (props.name.length > 2) {
+        return props.name.slice(0, 2);
+      } else {
+        return props.name;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        props.src != "" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("img", {
+            src: props.src,
+            alt: props.alt,
+            class: normalizeClass(`${final_style.value} `)
+          }, null, 10, _hoisted_2)
+        ])) : props.src == "" ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createElementVNode("div", {
+            class: normalizeClass(`${final_style.value}  ${bgcolor.value}  justify-center font-bold text-white flex items-center`)
+          }, toDisplayString(final_name.value), 3)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 export {
   _sfc_main as default
 };

package/dist/components/basics/EpAvatar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpAvatar.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"EpAvatar.vue2.js","sources":["../../../src/components/basics/EpAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { typeAvatar } from \"~/types/Avatar\";\nimport type { EpAvatarProps } from \"~/types/basics/EpAvatar\";\n\n// define parameter and default valule\nconst props = withDefaults(defineProps<EpAvatarProps>(), {\n  src: \"\",\n  alt: \"\",\n  color: \"primary\",\n  size: \"small\",\n  variant: \"circle\",\n  name: \"\",\n});\n\nconst style = computed(() => {\n  return props.variant;\n});\n\nconst size = computed(() => {\n  return props.size;\n});\n\nconst final_style = computed(() => {\n  return `${typeAvatar[style.value]?.[size.value]}`;\n});\n\nconst bgcolor = computed(() => {\n  return \"ep-bg-\" + props.color;\n});\n\nconst final_name = computed(() => {\n  if (props.name.length > 2) {\n    return props.name.slice(0, 2);\n  } else {\n    return props.name;\n  }\n});\n</script>\n<template>\n  <div>\n    <div v-if=\"props.src != ''\">\n      <img :src=\"props.src\" :alt=\"props.alt\" :class=\"`${final_style} `\" />\n    </div>\n    <div v-else-if=\"props.src == ''\">\n      <div\n        :class=\"`${final_style}  ${bgcolor}  justify-center font-bold text-white flex items-center`\"\n      >\n        {{ final_name }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AASd,UAAM,QAAQ,SAAS,MAAM;AAC3B,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,OAAO,SAAS,MAAM;AAC1B,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;;AACjC,aAAO,IAAG,gBAAW,MAAM,KAAK,MAAtB,mBAA0B,KAAK,MAAM;AAAA,IACjD,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,aAAO,WAAW,MAAM;AAAA,IAC1B,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,KAAK,SAAS,GAAG;AACzB,eAAO,MAAM,KAAK,MAAM,GAAG,CAAC;AAAA,MAC9B,OAAO;AACL,eAAO,MAAM;AAAA,MACf;AAAA,IACF,CAAC;;0BAGCA,mBAWM,OAAA,MAAA;AAAA,QAVO,MAAM,OAAG,mBAApBA,mBAEM,OAAA,YAAA;AAAA,UADJC,mBAAoE,OAAA;AAAA,YAA9D,KAAK,MAAM;AAAA,YAAM,KAAK,MAAM;AAAA,YAAM,yBAAU,YAAA,KAAW,GAAA;AAAA,UAAA;cAE/C,MAAM,OAAG,mBAAzBD,mBAMM,OAAA,YAAA;AAAA,UALJC,mBAIM,OAAA;AAAA,YAHH,OAAKC,eAAA,GAAK,YAAA,KAAW,KAAK,QAAA,KAAO,yDAAA;AAAA,UAAA,mBAE/B,WAAA,KAAU,GAAA,CAAA;AAAA,QAAA;;;;;"}

package/dist/components/basics/EpBadge.vue2.js

@@ -1,5 +1,4 @@
-import { defineComponent, computed, toRefs, createElementBlock, openBlock, createElementVNode } from "vue";
-import useColors from "../../composables/useColors.js";
+import { defineComponent, createElementBlock, openBlock, createElementVNode } from "vue";
 const _hoisted_1 = { class: "p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning dark:bg-warning-dark" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpBadge",
@@ -10,14 +9,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     iconPath: { default: null }
   },
   setup(__props) {
-    const props = __props;
-    computed(() => {
-      return props.outlined ? useColors("border", props.color) : useColors("bg", props.color);
-    });
-    computed(() => {
-      return props.square ? "" : "rounded-full";
-    });
-    toRefs(props);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [..._cache[0] || (_cache[0] = [
         createElementVNode("p", { class: "text-center text-error font-bold uppercase" }, "In progress", -1)

package/dist/components/basics/EpBadge.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpBadge.vue2.js","sources":["../../../src/components/basics/EpBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, computed } from \"vue\";\nimport useColors from \"~/composables/useColors\";\nimport type { EpBadgeProps } from \"~/types/basics/EpBadge\";\n\nconst props = withDefaults(defineProps<EpBadgeProps>(), {\n  color: \"primary\",\n  square: false,\n  iconPath: null,\n});\n\nconst styleChip = computed(() => {\n  return props.outlined\n    ? useColors(\"border\", props.color)\n    : useColors(\"bg\", props.color);\n});\n\nconst typeChip = computed(() => {\n  return props.square ? \"\" : \"rounded-full\";\n});\n\nconst { iconPath } = toRefs(props);\n\n/*\n//image gallery\n\"labelRef\": \"Reference\",\n\"labelClose\": \"Close\",\n\"labelRefLib\": \"Reference Library\",\n\n\n//reading\n\"labelCard\": \"Reading\",\n\"labelRead\": \"Read\",\n\"labelIn\": \"In\",\n\"labelIntentions\": \"Important topics\",\n\"labelDetails\":\"details\",\n\"labelClose\":\"Close\",\n\n\n//video\n\"labelIntentions\": \"Important topics\"\n\n\n//quiz\n\"labelNoAnswer\":\"Please choose an answer.\",\n\"labelAnswerBtn\" : \"Submit\",\n\"labelTryAgainBtn\": \"Try Again\",\n\n\nCompulsory\nOptional\n*/\n</script>\n\n<template>\n  <!-- <span :class=\"`py-2 px-3 ${styleChip} ${typeChip} mx-2 text-sm`\">\n    <EpIcon v-if=\"icon\" :iconPath=\"icon\" size=\"20\" extraClass=\"mr-2\"/>\n    <slot/>\n  </span> -->\n  <!--\n  <span class=\"text-white badge absolute -top-1 -right-1 flex h-3 w-3\">\n    <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75\"/>\n    <span class=\"relative inline-flex rounded-full h-3 w-3 bg-red-500\">\n    \n      <EpIcon v-if=\"iconPath\" :iconPath=\"iconPath\" size=\"32\" extra-class=\"p-1\"/>\n    </span>\n  </span>-->\n  <div\n    class=\"p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning dark:bg-warning-dark\"\n  >\n    <p class=\"text-center text-error font-bold uppercase\">In progress</p>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;;;;;;;;;;;AAKA,UAAM,QAAQ;AAMI,aAAS,MAAM;AAC/B,aAAO,MAAM,WACT,UAAU,UAAU,MAAM,KAAK,IAC/B,UAAU,MAAM,MAAM,KAAK;AAAA,IACjC,CAAC;AAEgB,aAAS,MAAM;AAC9B,aAAO,MAAM,SAAS,KAAK;AAAA,IAC7B,CAAC;AAEoB,WAAO,KAAK;;AA8C/B,aAAAA,UAAA,GAAAC,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,QADJC,mBAAqE,KAAA,EAAlE,OAAM,6CAAA,GAA6C,eAAW,EAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"EpBadge.vue2.js","sources":["../../../src/components/basics/EpBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, computed } from \"vue\";\nimport type { EpBadgeProps } from \"~/types/basics/EpBadge\";\n\nconst props = withDefaults(defineProps<EpBadgeProps>(), {\n  color: \"primary\",\n  square: false,\n  iconPath: null,\n});\n\n\n\n/*\n//image gallery\n\"labelRef\": \"Reference\",\n\"labelClose\": \"Close\",\n\"labelRefLib\": \"Reference Library\",\n\n\n//reading\n\"labelCard\": \"Reading\",\n\"labelRead\": \"Read\",\n\"labelIn\": \"In\",\n\"labelIntentions\": \"Important topics\",\n\"labelDetails\":\"details\",\n\"labelClose\":\"Close\",\n\n\n//video\n\"labelIntentions\": \"Important topics\"\n\n\n//quiz\n\"labelNoAnswer\":\"Please choose an answer.\",\n\"labelAnswerBtn\" : \"Submit\",\n\"labelTryAgainBtn\": \"Try Again\",\n\n\nCompulsory\nOptional\n*/\n</script>\n\n<template>\n  <!-- <span :class=\"`py-2 px-3 ${styleChip} ${typeChip} mx-2 text-sm`\">\n    <EpIcon v-if=\"icon\" :iconPath=\"icon\" size=\"20\" extraClass=\"mr-2\"/>\n    <slot/>\n  </span> -->\n  <!--\n  <span class=\"text-white badge absolute -top-1 -right-1 flex h-3 w-3\">\n    <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75\"/>\n    <span class=\"relative inline-flex rounded-full h-3 w-3 bg-red-500\">\n    \n      <EpIcon v-if=\"iconPath\" :iconPath=\"iconPath\" size=\"32\" extra-class=\"p-1\"/>\n    </span>\n  </span>-->\n  <div\n    class=\"p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning dark:bg-warning-dark\"\n  >\n    <p class=\"text-center text-error font-bold uppercase\">In progress</p>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode"],"mappings":";;;;;;;;;;;;AAwDE,aAAAA,UAAA,GAAAC,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,QADJC,mBAAqE,KAAA,EAAlE,OAAM,6CAAA,GAA6C,eAAW,EAAA;AAAA,MAAA;;;;"}

package/dist/components/basics/EpCard.vue.js

@@ -1,21 +1,23 @@
 import { defineComponent, computed, toRefs, useSlots, createElementBlock, openBlock, normalizeClass, createCommentVNode, unref, createVNode, renderSlot, createElementVNode, toDisplayString } from "vue";
 import _sfc_main$2 from "./EpIcon.vue.js";
 import _sfc_main$1 from "../medias/EpSvg.vue.js";
-import useColors from "../../composables/useColors.js";
 import { density_style } from "../../types/Card.js";
 const _hoisted_1 = ["src"];
 const _hoisted_2 = {
   key: 1,
-  class: "w-full rounded-t-md dark:text-white"
+  class: "w-full rounded-t-md"
 };
 const _hoisted_3 = {
   key: 0,
-  class: "mb-2 flex items-center justify-between dark:text-white"
+  class: "mb-2 flex items-center justify-between"
 };
-const _hoisted_4 = { class: "text-2xl dark:text-white font-bold" };
-const _hoisted_5 = { key: 0 };
-const _hoisted_6 = { class: "dark:text-white" };
+const _hoisted_4 = { class: "text-2xl font-bold dark:text-white" };
+const _hoisted_5 = {
+  class: /* @__PURE__ */ normalizeClass(`text-xs dark:text-white`)
+};
+const _hoisted_6 = { key: 0 };
 const _hoisted_7 = { class: "dark:text-white" };
+const _hoisted_8 = { class: "dark:text-white" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpCard",
   props: {
@@ -24,7 +26,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     outlined: { type: Boolean, default: false },
     flat: { type: Boolean, default: false },
     icon: { default: null },
-    color: { default: null },
+    bordercolor: { default: "neutral" },
+    bgcolor: { default: "neutral" },
     src: { default: null },
     maxWidth: { default: "max-w-full" },
     density: { default: "default" },
@@ -36,45 +39,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const shadowCard = computed(() => {
       return !props.flat ? "shadow-lg" : "";
     });
-    const borderColor = computed(() => {
-      if (props.outlined && props.color) {
-        return `border solid ${useColors("border", props.color)}`;
-      }
+    const borderBgStyle = computed(() => {
       if (props.outlined) {
-        return "border solid border-primary dark:border-white";
+        return `border ep-border-${props.bordercolor}`;
       }
-      return "dark:border dark:solid dark:border-white";
     });
-    const isLinkStyle = computed(() => {
-      if (props.isLink) {
-        return "dark:hover:border-white hover:border-primary hover:border hover:border rounded-md cursor-pointer";
+    const bgColorStyle = computed(() => {
+      if (props.bgcolor !== "neutral") {
+        return `ep-bg-${props.bgcolor} text-white`;
       }
-      return "";
-    });
-    const bgColor = computed(() => {
-      if (props.color && !props.outlined) {
-        return `${useColors("bg", props.color)}`;
-      }
-      return `bg-white text-black`;
-    });
-    const subTitleText = computed(() => {
-      if (props.color && !props.outlined) {
-        return "text-white";
-      }
-      return "text-gray-600";
+      return `ep-surface-2`;
     });
     const density_class = computed(() => {
       return density_style[props.density];
     });
+    const linkStyle = computed(() => {
+      return props.isLink ? "cursor-pointer" : "";
+    });
     const stylesCard = computed(() => {
       return `
     ${shadowCard.value} 
-    ${borderColor.value} 
-    ${bgColor.value} 
     ${props.maxWidth} 
-    rounded-md 
-    dark:bg-dark
-    dark:text-white
+    ${borderBgStyle.value}
+    ${bgColorStyle.value}
+    ${linkStyle.value}
+    rounded-md
+
     `;
     });
     const { title, subtitle, icon, src, svg } = toRefs(props);
@@ -84,7 +74,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(`${stylesCard.value} ${isLinkStyle.value}`)
+        class: normalizeClass(`${stylesCard.value}`)
       }, [
         unref(src) ? (openBlock(), createElementBlock("img", {
           key: 0,
@@ -102,11 +92,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           unref(title) || unref(subtitle) || unref(icon) ? (openBlock(), createElementBlock("div", _hoisted_3, [
             createElementVNode("div", null, [
               createElementVNode("h3", _hoisted_4, toDisplayString(unref(title)), 1),
-              createElementVNode("h4", {
-                class: normalizeClass(`text-xs dark:text-white ${subTitleText.value}`)
-              }, toDisplayString(unref(subtitle)), 3)
+              createElementVNode("h4", _hoisted_5, toDisplayString(unref(subtitle)), 1)
             ]),
-            unref(icon) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            unref(icon) ? (openBlock(), createElementBlock("div", _hoisted_6, [
               createVNode(_sfc_main$2, {
                 "icon-path": unref(icon),
                 "extra-class": "dark:text-white"
@@ -114,10 +102,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "card-header"),
-          createElementVNode("div", _hoisted_6, [
+          createElementVNode("div", _hoisted_7, [
             renderSlot(_ctx.$slots, "default")
           ]),
-          createElementVNode("div", _hoisted_7, [
+          createElementVNode("div", _hoisted_8, [
             renderSlot(_ctx.$slots, "card-actions")
           ])
         ], 2)) : createCommentVNode("", true)

package/dist/components/basics/EpCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpCard.vue.js","sources":["../../../src/components/basics/EpCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, computed, useSlots, type Slots } from \"vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpSvg from \"~/components/medias/EpSvg.vue\";\nimport useColors from \"~/composables/useColors\";\nimport { density_style } from \"~/types/Card\";\nimport type { EpCardProps } from \"~/types/basics/EpCard\";\n\nconst props = withDefaults(defineProps<EpCardProps>(), {\n  title: null,\n  subtitle: null,\n  outlined: false,\n  flat: false,\n  icon: null,\n  color: null,\n  src: null,\n  density: \"default\",\n  maxWidth: \"max-w-full\",\n  isLink: false,\n});\n\n//styles card\nconst shadowCard = computed(() => {\n  return !props.flat ? \"shadow-lg\" : \"\";\n});\n\nconst borderColor = computed(() => {\n  if (props.outlined && props.color) {\n    return `border solid ${useColors(\"border\", props.color)}`;\n  }\n  if (props.outlined) {\n    return \"border solid border-primary dark:border-white\";\n  }\n  return \"dark:border dark:solid dark:border-white\";\n});\n\nconst isLinkStyle = computed(() => {\n  if (props.isLink) {\n    return \"dark:hover:border-white hover:border-primary hover:border hover:border rounded-md cursor-pointer\";\n  }\n  return \"\";\n});\n\nconst bgColor = computed(() => {\n  if (props.color && !props.outlined) {\n    return `${useColors(\"bg\", props.color)}`;\n  }\n  return `bg-white text-black`;\n});\n\nconst subTitleText = computed(() => {\n  if (props.color && !props.outlined) {\n    return \"text-white\";\n  }\n  return \"text-gray-600\";\n});\n\nconst density_class = computed(() => {\n  return density_style[props.density];\n});\n\nconst stylesCard = computed(() => {\n  return `\n    ${shadowCard.value} \n    ${borderColor.value} \n    ${bgColor.value} \n    ${props.maxWidth} \n    rounded-md \n    dark:bg-dark\n    dark:text-white\n    `;\n});\n\nconst { title, subtitle, icon, src, svg } = toRefs(props);\n\nconst slots: Slots = useSlots();\n\nconst hasContent = computed(() => {\n  return !!slots.default || !!props.title || !!props.subtitle || !!props.icon;\n});\n</script>\n<template>\n  <div :class=\"`${stylesCard} ${isLinkStyle}`\">\n    <img\n      v-if=\"src\"\n      :src=\"src\"\n      :class=\"`w-full ${hasContent ? 'rounded-t-md' : 'rounded-md'}`\"\n      alt=\"header card\"\n    />\n    <div v-if=\"!src && svg\" class=\"w-full rounded-t-md dark:text-white\">\n      <EpSvg :content=\"svg\" />\n    </div>\n\n    <div :class=\"density_class\" v-if=\"hasContent\">\n      <div\n        v-if=\"title || subtitle || icon\"\n        class=\"mb-2 flex items-center justify-between dark:text-white\"\n      >\n        <div>\n          <h3 class=\"text-2xl dark:text-white font-bold\">{{ title }}</h3>\n          <h4 :class=\"`text-xs dark:text-white ${subTitleText}`\">\n            {{ subtitle }}\n          </h4>\n        </div>\n        <div v-if=\"icon\">\n          <EpIcon :icon-path=\"icon\" extra-class=\"dark:text-white\" />\n        </div>\n      </div>\n      <slot name=\"card-header\" />\n      <div class=\"dark:text-white\">\n        <slot />\n      </div>\n      <div class=\"dark:text-white\">\n        <slot name=\"card-actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_openBlock","_createVNode","EpSvg","_createElementVNode","_toDisplayString","EpIcon","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"EpCard.vue.js","sources":["../../../src/components/basics/EpCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, computed, useSlots, type Slots } from \"vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpSvg from \"~/components/medias/EpSvg.vue\";\nimport { density_style } from \"~/types/Card\";\nimport type { EpCardProps } from \"~/types/basics/EpCard\";\n\nconst props = withDefaults(defineProps<EpCardProps>(), {\n  title: null,\n  subtitle: null,\n  outlined: false,\n  flat: false,\n  icon: null,\n  src: null,\n  bordercolor:\"neutral\",\n  bgcolor:\"neutral\",\n  density: \"default\",\n  maxWidth: \"max-w-full\",\n  isLink: false,\n});\n\n//styles card\nconst shadowCard = computed(() => {\n  return !props.flat ? \"shadow-lg\" : \"\";\n});\n\nconst borderBgStyle = computed(()=> {\n  if(props.outlined) {\n    return `border ep-border-${props.bordercolor}`\n  }\n})\n\nconst bgColorStyle = computed(()=> {\n  if(props.bgcolor !== 'neutral') {\n    return `ep-bg-${props.bgcolor} text-white`\n  }\n  return `ep-surface-2`\n}) \n\n\nconst density_class = computed(() => {\n  return density_style[props.density];\n});\n\nconst linkStyle = computed(()=> {\n  return props.isLink ? \"cursor-pointer\" : \"\"\n})\n\nconst stylesCard = computed(() => {\n  return `\n    ${shadowCard.value} \n    ${props.maxWidth} \n    ${borderBgStyle.value}\n    ${bgColorStyle.value}\n    ${linkStyle.value}\n    rounded-md\n\n    `;\n});\n\nconst { title, subtitle, icon, src, svg } = toRefs(props);\n\nconst slots: Slots = useSlots();\n\nconst hasContent = computed(() => {\n  return !!slots.default || !!props.title || !!props.subtitle || !!props.icon;\n});\n</script>\n<template>\n  <div :class=\"`${stylesCard}`\">\n    <img\n      v-if=\"src\"\n      :src=\"src\"\n      :class=\"`w-full ${hasContent ? 'rounded-t-md' : 'rounded-md'}`\"\n      alt=\"header card\"\n    />\n    <div v-if=\"!src && svg\" class=\"w-full rounded-t-md \">\n      <EpSvg :content=\"svg\" />\n    </div>\n\n    <div :class=\"density_class\" v-if=\"hasContent\">\n      <div\n        v-if=\"title || subtitle || icon\"\n        class=\"mb-2 flex items-center justify-between\"\n      >\n        <div>\n          <h3 class=\"text-2xl font-bold dark:text-white\">{{ title }}</h3>\n          <h4 :class=\"`text-xs dark:text-white`\">\n            {{ subtitle }}\n          </h4>\n        </div>\n        <div v-if=\"icon\">\n          <EpIcon :icon-path=\"icon\" extra-class=\"dark:text-white\" />\n        </div>\n      </div>\n      <slot name=\"card-header\" />\n      <div class=\"dark:text-white\">\n        <slot />\n      </div>\n      <div class=\"dark:text-white\">\n        <slot name=\"card-actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_openBlock","_createVNode","EpSvg","_createElementVNode","_toDisplayString","EpIcon","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AAed,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,MAAM,OAAO,cAAc;AAAA,IACrC,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAK;AAClC,UAAG,MAAM,UAAU;AACjB,eAAO,oBAAoB,MAAM,WAAW;AAAA,MAC9C;AAAA,IACF,CAAC;AAED,UAAM,eAAe,SAAS,MAAK;AACjC,UAAG,MAAM,YAAY,WAAW;AAC9B,eAAO,SAAS,MAAM,OAAO;AAAA,MAC/B;AACA,aAAO;AAAA,IACT,CAAC;AAGD,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,cAAc,MAAM,OAAO;AAAA,IACpC,CAAC;AAED,UAAM,YAAY,SAAS,MAAK;AAC9B,aAAO,MAAM,SAAS,mBAAmB;AAAA,IAC3C,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO;AAAA,MACH,WAAW,KAAK;AAAA,MAChB,MAAM,QAAQ;AAAA,MACd,cAAc,KAAK;AAAA,MACnB,aAAa,KAAK;AAAA,MAClB,UAAU,KAAK;AAAA;AAAA;AAAA;AAAA,IAIrB,CAAC;AAED,UAAM,EAAE,OAAO,UAAU,MAAM,KAAK,IAAA,IAAQ,OAAO,KAAK;AAExD,UAAM,QAAe,SAAA;AAErB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM,YAAY,CAAC,CAAC,MAAM;AAAA,IACzE,CAAC;;0BAGCA,mBAkCM,OAAA;AAAA,QAlCA,yBAAU,WAAA,KAAU,EAAA;AAAA,MAAA;QAEhBC,MAAA,GAAA,kBADRD,mBAKE,OAAA;AAAA;UAHC,KAAKC,MAAA,GAAA;AAAA,UACL,gCAAiB,WAAA,QAAU,iBAAA,YAAA,EAAA;AAAA,UAC5B,KAAI;AAAA,QAAA;QAEM,CAAAA,MAAA,GAAA,KAAOA,MAAA,GAAA,KAAnBC,aAAAF,mBAEM,OAFN,YAEM;AAAA,UADJG,YAAwBC,aAAA,EAAhB,SAASH,MAAA,GAAA,EAAA,GAAG,MAAA,GAAA,CAAA,SAAA,CAAA;AAAA,QAAA;QAGY,WAAA,sBAAlCD,mBAsBM,OAAA;AAAA;UAtBA,sBAAO,cAAA,KAAa;AAAA,QAAA;UAEhBC,MAAA,KAAA,KAASA,MAAA,QAAA,KAAYA,MAAA,IAAA,KAD7BC,UAAA,GAAAF,mBAaM,OAbN,YAaM;AAAA,YATJK,mBAKM,OAAA,MAAA;AAAA,cAJJA,mBAA+D,MAA/D,YAA+DC,gBAAbL,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,cACvDI,mBAEK,MAFL,YAEKC,gBADAL,MAAA,QAAA,CAAQ,GAAA,CAAA;AAAA,YAAA;YAGJA,MAAA,IAAA,kBAAXD,mBAEM,OAAA,YAAA;AAAA,cADJG,YAA0DI,aAAA;AAAA,gBAAjD,aAAWN,MAAA,IAAA;AAAA,gBAAM,eAAY;AAAA,cAAA;;;UAG1CO,WAA2B,KAAA,QAAA,aAAA;AAAA,UAC3BH,mBAEM,OAFN,YAEM;AAAA,YADJG,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAEVH,mBAEM,OAFN,YAEM;AAAA,YADJG,WAA4B,KAAA,QAAA,cAAA;AAAA,UAAA;;;;;;"}

package/dist/components/basics/EpDivider.vue.js

@@ -1,5 +1,4 @@
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass } from "vue";
-import useColors from "../../composables/useColors.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpDivider",
   props: {
@@ -13,9 +12,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const border = computed(() => {
       if (props.color) {
-        return `${props.size} ${useColors("border", props.color)}`;
+        return `${props.size} ${props.color}`;
       }
-      return `${props.size} border-grey-700`;
+      return `${props.size} ep-border-netural`;
     });
     const styles = computed(() => {
       return `${border.value} ${props.inset ? "w-9/12 mx-auto" : "w-full"} ${props.margin}`;

package/dist/components/basics/EpDivider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpDivider.vue.js","sources":["../../../src/components/basics/EpDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport useColors from \"~/composables/useColors\";\nimport type { EpDividerProps } from \"~/types/basics/EpDivider\";\n\nconst props = withDefaults(defineProps<EpDividerProps>(), {\n  color: null,\n  size: \"border\",\n  inset: false,\n  icon: null,\n  margin: \"my-2\",\n});\n\nconst border = computed(() => {\n  if (props.color) {\n    return `${props.size} ${useColors(\"border\", props.color)}`;\n  }\n  return `${props.size} border-grey-700`;\n});\n\nconst styles = computed(() => {\n  return `${border.value} ${props.inset ? \"w-9/12 mx-auto\" : \"w-full\"} ${\n    props.margin\n  }`;\n});\n</script>\n\n<template>\n  <hr :class=\"`h-px ${styles}`\" />\n</template>\n"],"names":["_createElementBlock"],"mappings":";;;;;;;;;;;;AAKA,UAAM,QAAQ;AAQd,UAAM,SAAS,SAAS,MAAM;AAC5B,UAAI,MAAM,OAAO;AACf,eAAO,GAAG,MAAM,IAAI,IAAI,UAAU,UAAU,MAAM,KAAK,CAAC;AAAA,MAC1D;AACA,aAAO,GAAG,MAAM,IAAI;AAAA,IACtB,CAAC;AAED,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO,GAAG,OAAO,KAAK,IAAI,MAAM,QAAQ,mBAAmB,QAAQ,IACjE,MAAM,MACR;AAAA,IACF,CAAC;;0BAICA,mBAAgC,MAAA;AAAA,QAA3B,8BAAe,OAAA,KAAM,EAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"EpDivider.vue.js","sources":["../../../src/components/basics/EpDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { EpDividerProps } from \"~/types/basics/EpDivider\";\n\nconst props = withDefaults(defineProps<EpDividerProps>(), {\n  color: null,\n  size: \"border\",\n  inset: false,\n  icon: null,\n  margin: \"my-2\",\n});\n\nconst border = computed(() => {\n  if (props.color) {\n    return `${props.size} ${props.color}`;\n  }\n  return `${props.size} ep-border-netural`;\n});\n\nconst styles = computed(() => {\n  return `${border.value} ${props.inset ? \"w-9/12 mx-auto\" : \"w-full\"} ${\n    props.margin\n  }`;\n});\n</script>\n\n<template>\n  <hr :class=\"`h-px ${styles}`\" />\n</template>\n"],"names":["_createElementBlock"],"mappings":";;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,SAAS,SAAS,MAAM;AAC5B,UAAI,MAAM,OAAO;AACf,eAAO,GAAG,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA,MACrC;AACA,aAAO,GAAG,MAAM,IAAI;AAAA,IACtB,CAAC;AAED,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO,GAAG,OAAO,KAAK,IAAI,MAAM,QAAQ,mBAAmB,QAAQ,IACjE,MAAM,MACR;AAAA,IACF,CAAC;;0BAICA,mBAAgC,MAAA;AAAA,QAA3B,8BAAe,OAAA,KAAM,EAAA;AAAA,MAAA;;;;"}

package/dist/components/basics/EpFlex.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpFlex.vue.js","sources":["../../../src/components/basics/EpFlex.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\nimport { computed } from \"vue\";\nimport useColors from \"~/composables/useColors\";\n\nconst props = withDefaults(defineProps<EpFlexProps>(), {\n  color: null,\n  size: \"border\",\n  inset: false,\n  icon: null,\n});\n\nconst border = computed(() => {\n  if (props.color) {\n    return `${props.size} ${useColors(\"border\", props.color)}`;\n  }\n  return `${props.size} border-grey-700`;\n});\n\nconst styles = computed(() => {\n  return `${border.value} ${props.inset ? \"w-9/12 mx-auto\" : \"w-full\"}`;\n});*/\n</script>\n\n<template>\n  <!-- <hr :class=\"`h-px ${styles} my-2`\"> -->\n  <!-- Option: content-between self-center justify-evenly  place-items-stretch-->\n  <!-- mb-20 flex md:flex-row flex-col ep-flex gap-4 justify-evenly -->\n  <div class=\"grid grid-cols-2 gap-4\">\n    <slot />\n  </div>\n</template>\n\n//TODO component\n"],"names":["_openBlock","_createElementBlock","_renderSlot"],"mappings":";;;;;;AA4BE,aAAAA,UAAA,GAAAC,mBAEM,OAFN,YAEM;AAAA,QADJC,WAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"EpFlex.vue.js","sources":["../../../src/components/basics/EpFlex.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\nimport { computed } from \"vue\";\ni\n\nconst props = withDefaults(defineProps<EpFlexProps>(), {\n  color: null,\n  size: \"border\",\n  inset: false,\n  icon: null,\n});\n\n\n\nconst styles = computed(() => {\n  return `${border.value} ${props.inset ? \"w-9/12 mx-auto\" : \"w-full\"}`;\n});*/\n</script>\n\n<template>\n  <!-- <hr :class=\"`h-px ${styles} my-2`\"> -->\n  <!-- Option: content-between self-center justify-evenly  place-items-stretch-->\n  <!-- mb-20 flex md:flex-row flex-col ep-flex gap-4 justify-evenly -->\n  <div class=\"grid grid-cols-2 gap-4\">\n    <slot />\n  </div>\n</template>\n\n//TODO component\n"],"names":["_openBlock","_createElementBlock","_renderSlot"],"mappings":";;;;;;AAuBE,aAAAA,UAAA,GAAAC,mBAEM,OAFN,YAEM;AAAA,QADJC,WAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/dist/components/basics/EpHoverCard.vue.js

@@ -1,17 +1,18 @@
 import { defineComponent, computed, toRefs, useSlots, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, unref, withCtx, createElementVNode, renderSlot, toDisplayString, createVNode } from "vue";
 import _sfc_main$1 from "./EpHover.vue.js";
 import _sfc_main$2 from "./EpIcon.vue.js";
-import useColors from "../../composables/useColors.js";
 import { density_style } from "../../types/Card.js";
 const _hoisted_1 = ["src"];
 const _hoisted_2 = {
   key: 0,
-  class: "mb-2 flex items-center justify-between dark:text-white"
+  class: "mb-2 flex items-center justify-between"
 };
-const _hoisted_3 = { class: "text-2xl dark:text-white font-bold" };
-const _hoisted_4 = { key: 0 };
-const _hoisted_5 = { class: "dark:text-white" };
-const _hoisted_6 = { class: "dark:text-white max-w-4xl" };
+const _hoisted_3 = { class: "text-2xl font-bold" };
+const _hoisted_4 = {
+  class: /* @__PURE__ */ normalizeClass(`text-xs`)
+};
+const _hoisted_5 = { key: 0 };
+const _hoisted_6 = { class: "max-w-4xl" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpHoverCard",
   props: {
@@ -37,25 +38,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return !props.flat ? "shadow-lg" : "";
     });
     const borderColor = computed(() => {
-      if (props.outlined && props.color) {
-        return `border solid ${useColors("border", props.color)}`;
-      }
       if (props.outlined) {
-        return "border solid border-primary dark:border-primary";
-      }
-      return "dark:border dark:solid dark:border-primary";
-    });
-    const bgColor = computed(() => {
-      if (props.color && !props.outlined) {
-        return `${useColors("bg", props.color)}`;
-      }
-      return `bg-white text-black`;
-    });
-    const subTitleText = computed(() => {
-      if (props.color && !props.outlined) {
-        return "text-white";
+        return "border ep-border-border";
       }
-      return "text-gray-600";
+      return "";
     });
     const density_class = computed(() => {
       return density_style[props.density];
@@ -64,11 +50,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return `
     ${shadowCard.value} 
     ${borderColor.value} 
-    ${bgColor.value} 
     ${props.maxWidth} 
     rounded-md 
-    dark:bg-dark
-    dark:text-white`;
+    ep-surface-2`;
     });
     const { title, subtitle, icon, src, hoverContent } = toRefs(props);
     const slots = useSlots();
@@ -104,16 +88,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           unref(title) || unref(subtitle) ? (openBlock(), createElementBlock("div", _hoisted_2, [
             createElementVNode("div", null, [
               createElementVNode("h3", _hoisted_3, toDisplayString(unref(title)), 1),
-              createElementVNode("h4", {
-                class: normalizeClass(`text-xs dark:text-white ${subTitleText.value}`)
-              }, toDisplayString(unref(subtitle)), 3)
+              createElementVNode("h4", _hoisted_4, toDisplayString(unref(subtitle)), 1)
             ]),
-            unref(icon) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            unref(icon) ? (openBlock(), createElementBlock("div", _hoisted_5, [
               createVNode(_sfc_main$2, { "icon-path": unref(icon) }, null, 8, ["icon-path"])
             ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "card-header"),
-          createElementVNode("div", _hoisted_5, [
+          createElementVNode("div", null, [
             renderSlot(_ctx.$slots, "default")
           ]),
           createElementVNode("div", _hoisted_6, [

package/dist/components/basics/EpHoverCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpHoverCard.vue.js","sources":["../../../src/components/basics/EpHoverCard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, toRefs, useSlots, type Slots } from \"vue\";\nimport EpHover from \"~/components/basics/EpHover.vue\";\nimport EpIcon from \"~/components/basics//EpIcon.vue\";\nimport useColors from \"~/composables/useColors\";\nimport { density_style } from \"~/types/Card\";\nimport type { EpHoverCardProps } from \"~/types/basics/EpHoverCard\";\n\nconst props = withDefaults(defineProps<EpHoverCardProps>(), {\n  title: null,\n  subtitle: null,\n  outlined: false,\n  flat: false,\n  icon: null,\n  color: null,\n  src: null,\n  density: \"default\",\n  maxWidth: \"max-w-xl\",\n  hoverBg: \"\",\n  hoverAnimation: \"translateY\",\n});\n\n//styles card\nconst shadowCard = computed(() => {\n  return !props.flat ? \"shadow-lg\" : \"\";\n});\n\nconst borderColor = computed(() => {\n  if (props.outlined && props.color) {\n    return `border solid ${useColors(\"border\", props.color)}`;\n  }\n  if (props.outlined) {\n    return \"border solid border-primary dark:border-primary\";\n  }\n  return \"dark:border dark:solid dark:border-primary\";\n});\n\nconst bgColor = computed(() => {\n  if (props.color && !props.outlined) {\n    return `${useColors(\"bg\", props.color)}`;\n  }\n  return `bg-white text-black`;\n});\n\nconst subTitleText = computed(() => {\n  if (props.color && !props.outlined) {\n    return \"text-white\";\n  }\n  return \"text-gray-600\";\n});\n\nconst density_class = computed(() => {\n  return density_style[props.density];\n});\n\nconst stylesCard = computed(() => {\n  return `\n    ${shadowCard.value} \n    ${borderColor.value} \n    ${bgColor.value} \n    ${props.maxWidth} \n    rounded-md \n    dark:bg-dark\n    dark:text-white`;\n});\n\nconst { title, subtitle, icon, src, hoverContent } = toRefs(props);\n\nconst slots: Slots = useSlots();\n\nconst hasContent = computed(() => {\n  return !!slots.default || !!props.title || !!props.subtitle;\n});\n</script>\n\n<template>\n  <div :class=\"`${stylesCard} mx-auto`\">\n    <EpHover\n      :textColor=\"hoverColor\"\n      :textSize=\"textSize\"\n      :seeThrough=\"seeThrough\"\n      :bgColor=\"hoverBg\"\n      :animation=\"hoverAnimation\"\n      :text=\"hoverContent\"\n      v-if=\"src && hoverContent\"\n    >\n      <img\n        :src=\"src\"\n        :class=\"`w-full ${hasContent ? 'rounded-t-md' : 'rounded-md'}`\"\n        alt=\"header card\"\n      />\n    </EpHover>\n    <div :class=\"density_class\" v-if=\"hasContent\">\n      <div\n        v-if=\"title || subtitle\"\n        class=\"mb-2 flex items-center justify-between dark:text-white\"\n      >\n        <div>\n          <h3 class=\"text-2xl dark:text-white font-bold\">{{ title }}</h3>\n          <h4 :class=\"`text-xs dark:text-white ${subTitleText}`\">\n            {{ subtitle }}\n          </h4>\n        </div>\n        <div v-if=\"icon\">\n          <EpIcon :icon-path=\"icon\" />\n        </div>\n      </div>\n      <slot name=\"card-header\" />\n      <div class=\"dark:text-white\">\n        <slot />\n      </div>\n      <div class=\"dark:text-white max-w-4xl\">\n        <slot name=\"card-actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_createBlock","EpHover","hoverColor","textSize","seeThrough","hoverBg","hoverAnimation","_createElementVNode","_openBlock","_toDisplayString","_createVNode","EpIcon","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,QAAQ;AAed,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,MAAM,OAAO,cAAc;AAAA,IACrC,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,UAAI,MAAM,YAAY,MAAM,OAAO;AACjC,eAAO,gBAAgB,UAAU,UAAU,MAAM,KAAK,CAAC;AAAA,MACzD;AACA,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,UAAI,MAAM,SAAS,CAAC,MAAM,UAAU;AAClC,eAAO,GAAG,UAAU,MAAM,MAAM,KAAK,CAAC;AAAA,MACxC;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,eAAe,SAAS,MAAM;AAClC,UAAI,MAAM,SAAS,CAAC,MAAM,UAAU;AAClC,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,cAAc,MAAM,OAAO;AAAA,IACpC,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO;AAAA,MACH,WAAW,KAAK;AAAA,MAChB,YAAY,KAAK;AAAA,MACjB,QAAQ,KAAK;AAAA,MACb,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIpB,CAAC;AAED,UAAM,EAAE,OAAO,UAAU,MAAM,KAAK,aAAA,IAAiB,OAAO,KAAK;AAEjE,UAAM,QAAe,SAAA;AAErB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM;AAAA,IACrD,CAAC;;0BAICA,mBAuCM,OAAA;AAAA,QAvCA,yBAAU,WAAA,KAAU,UAAA;AAAA,MAAA;QAQhBC,MAAA,GAAA,KAAOA,MAAA,YAAA,kBAPfC,YAcUC,aAAA;AAAA;UAbP,WAAWC,KAAAA;AAAAA,UACX,UAAUC,KAAAA;AAAAA,UACV,YAAYC,KAAAA;AAAAA,UACZ,SAASC,KAAAA;AAAAA,UACT,WAAWC,KAAAA;AAAAA,UACX,MAAMP,MAAA,YAAA;AAAA,QAAA;2BAGP,MAIE;AAAA,YAJFQ,mBAIE,OAAA;AAAA,cAHC,KAAKR,MAAA,GAAA;AAAA,cACL,gCAAiB,WAAA,QAAU,iBAAA,YAAA,EAAA;AAAA,cAC5B,KAAI;AAAA,YAAA;;;;QAG0B,WAAA,sBAAlCD,mBAsBM,OAAA;AAAA;UAtBA,sBAAO,cAAA,KAAa;AAAA,QAAA;UAEhBC,MAAA,KAAA,KAASA,MAAA,QAAA,KADjBS,aAAAV,mBAaM,OAbN,YAaM;AAAA,YATJS,mBAKM,OAAA,MAAA;AAAA,cAJJA,mBAA+D,MAA/D,YAA+DE,gBAAbV,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,cACvDQ,mBAEK,MAAA;AAAA,gBAFA,iDAAkC,aAAA,KAAY,EAAA;AAAA,cAAA,mBAC9CR,MAAA,QAAA,CAAQ,GAAA,CAAA;AAAA,YAAA;YAGJA,MAAA,IAAA,kBAAXD,mBAEM,OAAA,YAAA;AAAA,cADJY,YAA4BC,aAAA,EAAnB,aAAWZ,MAAA,IAAA,EAAA,GAAI,MAAA,GAAA,CAAA,WAAA,CAAA;AAAA,YAAA;;UAG5Ba,WAA2B,KAAA,QAAA,aAAA;AAAA,UAC3BL,mBAEM,OAFN,YAEM;AAAA,YADJK,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAEVL,mBAEM,OAFN,YAEM;AAAA,YADJK,WAA4B,KAAA,QAAA,cAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"EpHoverCard.vue.js","sources":["../../../src/components/basics/EpHoverCard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, toRefs, useSlots, type Slots } from \"vue\";\nimport EpHover from \"~/components/basics/EpHover.vue\";\nimport EpIcon from \"~/components/basics//EpIcon.vue\";\nimport { density_style } from \"~/types/Card\";\nimport type { EpHoverCardProps } from \"~/types/basics/EpHoverCard\";\n\nconst props = withDefaults(defineProps<EpHoverCardProps>(), {\n  title: null,\n  subtitle: null,\n  outlined: false,\n  flat: false,\n  icon: null,\n  color: null,\n  src: null,\n  density: \"default\",\n  maxWidth: \"max-w-xl\",\n  hoverBg: \"\",\n  hoverAnimation: \"translateY\",\n});\n\n//styles card\nconst shadowCard = computed(() => {\n  return !props.flat ? \"shadow-lg\" : \"\";\n});\n\nconst borderColor = computed(() => {\n  if (props.outlined) {\n    return \"border ep-border-border\";\n  }\n  return \"\";\n});\n\n\n\nconst density_class = computed(() => {\n  return density_style[props.density];\n});\n\nconst stylesCard = computed(() => {\n  return `\n    ${shadowCard.value} \n    ${borderColor.value} \n    ${props.maxWidth} \n    rounded-md \n    ep-surface-2`;\n});\n\nconst { title, subtitle, icon, src, hoverContent } = toRefs(props);\n\nconst slots: Slots = useSlots();\n\nconst hasContent = computed(() => {\n  return !!slots.default || !!props.title || !!props.subtitle;\n});\n</script>\n\n<template>\n  <div :class=\"`${stylesCard} mx-auto`\">\n    <EpHover\n      :textColor=\"hoverColor\"\n      :textSize=\"textSize\"\n      :seeThrough=\"seeThrough\"\n      :bgColor=\"hoverBg\"\n      :animation=\"hoverAnimation\"\n      :text=\"hoverContent\"\n      v-if=\"src && hoverContent\"\n    >\n      <img\n        :src=\"src\"\n        :class=\"`w-full ${hasContent ? 'rounded-t-md' : 'rounded-md'}`\"\n        alt=\"header card\"\n      />\n    </EpHover>\n    <div :class=\"density_class\" v-if=\"hasContent\">\n      <div\n        v-if=\"title || subtitle\"\n        class=\"mb-2 flex items-center justify-between\"\n      >\n        <div>\n          <h3 class=\"text-2xl font-bold\">{{ title }}</h3>\n          <h4 :class=\"`text-xs`\">\n            {{ subtitle }}\n          </h4>\n        </div>\n        <div v-if=\"icon\">\n          <EpIcon :icon-path=\"icon\" />\n        </div>\n      </div>\n      <slot name=\"card-header\" />\n      <div>\n        <slot />\n      </div>\n      <div class=\"max-w-4xl\">\n        <slot name=\"card-actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_createBlock","EpHover","hoverColor","textSize","seeThrough","hoverBg","hoverAnimation","_createElementVNode","_openBlock","_toDisplayString","_createVNode","EpIcon","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AAed,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,MAAM,OAAO,cAAc;AAAA,IACrC,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC;AAID,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,cAAc,MAAM,OAAO;AAAA,IACpC,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO;AAAA,MACH,WAAW,KAAK;AAAA,MAChB,YAAY,KAAK;AAAA,MACjB,MAAM,QAAQ;AAAA;AAAA;AAAA,IAGpB,CAAC;AAED,UAAM,EAAE,OAAO,UAAU,MAAM,KAAK,aAAA,IAAiB,OAAO,KAAK;AAEjE,UAAM,QAAe,SAAA;AAErB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM;AAAA,IACrD,CAAC;;0BAICA,mBAuCM,OAAA;AAAA,QAvCA,yBAAU,WAAA,KAAU,UAAA;AAAA,MAAA;QAQhBC,MAAA,GAAA,KAAOA,MAAA,YAAA,kBAPfC,YAcUC,aAAA;AAAA;UAbP,WAAWC,KAAAA;AAAAA,UACX,UAAUC,KAAAA;AAAAA,UACV,YAAYC,KAAAA;AAAAA,UACZ,SAASC,KAAAA;AAAAA,UACT,WAAWC,KAAAA;AAAAA,UACX,MAAMP,MAAA,YAAA;AAAA,QAAA;2BAGP,MAIE;AAAA,YAJFQ,mBAIE,OAAA;AAAA,cAHC,KAAKR,MAAA,GAAA;AAAA,cACL,gCAAiB,WAAA,QAAU,iBAAA,YAAA,EAAA;AAAA,cAC5B,KAAI;AAAA,YAAA;;;;QAG0B,WAAA,sBAAlCD,mBAsBM,OAAA;AAAA;UAtBA,sBAAO,cAAA,KAAa;AAAA,QAAA;UAEhBC,MAAA,KAAA,KAASA,MAAA,QAAA,KADjBS,aAAAV,mBAaM,OAbN,YAaM;AAAA,YATJS,mBAKM,OAAA,MAAA;AAAA,cAJJA,mBAA+C,MAA/C,YAA+CE,gBAAbV,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,cACvCQ,mBAEK,MAFL,YAEKE,gBADAV,MAAA,QAAA,CAAQ,GAAA,CAAA;AAAA,YAAA;YAGJA,MAAA,IAAA,kBAAXD,mBAEM,OAAA,YAAA;AAAA,cADJY,YAA4BC,aAAA,EAAnB,aAAWZ,MAAA,IAAA,EAAA,GAAI,MAAA,GAAA,CAAA,WAAA,CAAA;AAAA,YAAA;;UAG5Ba,WAA2B,KAAA,QAAA,aAAA;AAAA,UAC3BL,mBAEM,OAAA,MAAA;AAAA,YADJK,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAEVL,mBAEM,OAFN,YAEM;AAAA,YADJK,WAA4B,KAAA,QAAA,cAAA;AAAA,UAAA;;;;;;"}

package/dist/components/basics/EpImg.vue.js

@@ -26,7 +26,7 @@ const _hoisted_5 = {
 };
 const _hoisted_6 = {
   key: 3,
-  class: "px-4 py-2 dark:bg-black dark:border-white dark:rounded-b-md"
+  class: "px-4 py-2 dark:rounded-b-md"
 };
 const _hoisted_7 = { class: "text-2xl dark:text-white font-bold" };
 const _hoisted_8 = { class: "text-gray-500 dark:text-white text-sm mt-4" };
@@ -103,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, [
         !unref(thumbnail) ? (openBlock(), createElementBlock("div", _hoisted_1, [
           createElementVNode("div", {
-            class: normalizeClass(`mx-auto bg-white dark:bg-dark rounded-md overflow-hidden shadow-md ${renderCols.value}`)
+            class: normalizeClass(`mx-auto rounded-md overflow-hidden ep-surface-2 shadow-md ${renderCols.value}`)
           }, [
             unref(isLoading) ? (openBlock(), createElementBlock("span", _hoisted_2, [
               createVNode(_sfc_main$1, {
@@ -140,6 +140,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               renderBib.value ? (openBlock(), createElementBlock("div", _hoisted_9, [
                 createVNode(_sfc_main$2, {
                   onClick: toggleBib,
+                  rounded: "",
                   size: "small",
                   type: "primary"
                 }, {
@@ -206,7 +207,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onClick: toggleBib,
                 size: "small",
                 type: "error",
-                outlined: ""
+                outlined: "",
+                rounded: ""
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(_ctx.labelClose), 1)

package/dist/components/basics/EpImg.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpImg.vue.js","sources":["../../../src/components/basics/EpImg.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, ref, computed } from \"vue\";\nimport { sizeThumbnailStyle, cols_img } from \"~/types/Image\";\nimport { useImage } from \"@vueuse/core\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport { mdiArrowExpandAll } from \"@mdi/js\";\nimport { mdiImage } from \"@mdi/js\";\nimport { mdiImageRemove } from \"@mdi/js\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport type { EpImgProps } from \"~/types/basics/EpImg\";\n\nconst props = withDefaults(defineProps<EpImgProps>(), {\n  alt: \"Image snfas\",\n  cols: \"6\",\n  thumbnail: false,\n  noModal: false,\n  sizeThumbnail: \"medium\",\n  labelClose: \"Fermer\",\n  labelRef: \"Référence\",\n  labelRefLib: \"Référence bibliographique\",\n});\n\n// To access freely the image\nconst imgEl = ref<HTMLImageElement | null>(null);\n\ndefineExpose({ imgEl });\n\nconst renderCols = computed(() => {\n  return cols_img[+props.cols];\n});\n\nconst renderBib = computed(() => {\n  if (props.bib) {\n    return useRenderText(props.bib);\n  }\n  return \"\";\n});\n\nconst showModal = ref<boolean>(false);\n\nconst toggleModal = (): void => {\n  if (props.noModal) {\n    return;\n  }\n  showModal.value = !showModal.value;\n};\n\nconst showBib = ref<boolean>(false);\n\nconst toggleBib = (): void => {\n  showBib.value = !showBib.value;\n};\n\nconst styleSizeThumbnail = computed(() => {\n  return sizeThumbnailStyle[props.sizeThumbnail];\n});\n\nconst { isLoading, error } = useImage({ src: props.src });\nconst { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =\n  toRefs(props);\n</script>\n\n<template>\n  <div :class=\"thumbnail ? 'inline-block' : ''\">\n    <div v-if=\"!thumbnail\" class=\"flex m-2\">\n      <div\n        :class=\"`mx-auto bg-white dark:bg-dark rounded-md overflow-hidden shadow-md ${renderCols}`\"\n      >\n        <template v-if=\"isLoading\">\n          <span class=\"text-gray-200\"\n            ><EpIcon :icon-path=\"mdiImage\" size=\"250\"></EpIcon\n          ></span>\n        </template>\n        <template v-else-if=\"error\">\n          <span class=\"text-red-200\"\n            ><EpIcon :icon-path=\"mdiImageRemove\" size=\"150\"></EpIcon\n          ></span>\n        </template>\n        <template v-else>\n          <div\n            :class=\"`${\n              !noModal ? 'cursor-pointer' : ''\n            } dark:bg-white group relative`\"\n          >\n            <img\n              class=\"object-cover object-center w-full\"\n              :src=\"src\"\n              :alt=\"alt\"\n              @click=\"toggleModal\"\n              ref=\"imgEl\"\n            />\n            <div\n              v-if=\"!noModal\"\n              class=\"absolute bottom-2 right-2 text-white text-center bg-black rounded opacity-0 transition-opacity duration-300 group-hover:opacity-50 cursor-pointer\"\n            >\n              <EpIcon size=\"28\" :icon-path=\"mdiArrowExpandAll\" />\n            </div>\n          </div>\n        </template>\n        <div\n          class=\"px-4 py-2 dark:bg-black dark:border-white dark:rounded-b-md\"\n          v-if=\"title || caption || bib\"\n        >\n          <h2 class=\"text-2xl dark:text-white font-bold\">\n            {{ title }}\n          </h2>\n          <p class=\"text-gray-500 dark:text-white text-sm mt-4\">\n            {{ caption }}\n          </p>\n          <div class=\"text-right\" v-if=\"renderBib\">\n            <EpBtn @click=\"toggleBib\" size=\"small\" type=\"primary\">{{\n              labelRef\n            }}</EpBtn>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"thumbnail\" class=\"relative group inline-block m-2\">\n      <img\n        :class=\"`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `\"\n        :src=\"src\"\n        :alt=\"alt\"\n        ref=\"imgEl\"\n      />\n      <div\n        :class=\"`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`\"\n        @click=\"toggleModal\"\n      >\n        <div\n          class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center\"\n        >\n          <EpIcon :icon-path=\"mdiArrowExpandAll\" />\n        </div>\n      </div>\n    </div>\n    <EpModal v-model=\"showModal\">\n      <img\n        class=\"object-cover object-center h-5/6 w-5/6 mx-auto dark:bg-white\"\n        :src=\"src\"\n        :alt=\"alt\"\n        @click=\"toggleModal\"\n      />\n      <div class=\"px-4 py-2\" v-if=\"thumbnail\">\n        <h2 class=\"text-2xl dark:text-white font-bold\">\n          {{ title }}\n        </h2>\n        <p class=\"text-gray-500 dark:text-white text-sm mt-4\">\n          {{ caption }}\n        </p>\n        <div class=\"text-gray-700 dark:text-white mt-4\" v-html=\"renderBib\" />\n      </div>\n      <!-- <div class=\"flex justify-end\"><EpBtn @click=\"toggleModal\" size=\"small\" type=\"error\" outlined>Fermer</EpBtn/> -->\n    </EpModal>\n    <EpModal v-model=\"showBib\" :title=\"labelRefLib\">\n      <div class=\"text-gray-700 dark:text-white mt-4\" v-html=\"renderBib\" />\n      <div class=\"flex justify-end\">\n        <EpBtn @click=\"toggleBib\" size=\"small\" type=\"error\" outlined>\n          {{ labelClose }}\n        </EpBtn>\n      </div>\n    </EpModal>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_openBlock","_createElementVNode","_createVNode","EpIcon","_normalizeClass","noModal","_toDisplayString","EpBtn","labelRef","EpModal","labelRefLib","labelClose"],"mappings":"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"}
+{"version":3,"file":"EpImg.vue.js","sources":["../../../src/components/basics/EpImg.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, ref, computed } from \"vue\";\nimport { sizeThumbnailStyle, cols_img } from \"~/types/Image\";\nimport { useImage } from \"@vueuse/core\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport { mdiArrowExpandAll } from \"@mdi/js\";\nimport { mdiImage } from \"@mdi/js\";\nimport { mdiImageRemove } from \"@mdi/js\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport type { EpImgProps } from \"~/types/basics/EpImg\";\n\nconst props = withDefaults(defineProps<EpImgProps>(), {\n  alt: \"Image snfas\",\n  cols: \"6\",\n  thumbnail: false,\n  noModal: false,\n  sizeThumbnail: \"medium\",\n  labelClose: \"Fermer\",\n  labelRef: \"Référence\",\n  labelRefLib: \"Référence bibliographique\",\n});\n\n// To access freely the image\nconst imgEl = ref<HTMLImageElement | null>(null);\n\ndefineExpose({ imgEl });\n\nconst renderCols = computed(() => {\n  return cols_img[+props.cols];\n});\n\nconst renderBib = computed(() => {\n  if (props.bib) {\n    return useRenderText(props.bib);\n  }\n  return \"\";\n});\n\nconst showModal = ref<boolean>(false);\n\nconst toggleModal = (): void => {\n  if (props.noModal) {\n    return;\n  }\n  showModal.value = !showModal.value;\n};\n\nconst showBib = ref<boolean>(false);\n\nconst toggleBib = (): void => {\n  showBib.value = !showBib.value;\n};\n\nconst styleSizeThumbnail = computed(() => {\n  return sizeThumbnailStyle[props.sizeThumbnail];\n});\n\nconst { isLoading, error } = useImage({ src: props.src });\nconst { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =\n  toRefs(props);\n</script>\n\n<template>\n  <div :class=\"thumbnail ? 'inline-block' : ''\">\n    <div v-if=\"!thumbnail\" class=\"flex m-2\">\n      <div\n        :class=\"`mx-auto rounded-md overflow-hidden ep-surface-2 shadow-md ${renderCols}`\"\n      >\n        <template v-if=\"isLoading\">\n          <span class=\"text-gray-200\"\n            ><EpIcon :icon-path=\"mdiImage\" size=\"250\"></EpIcon\n          ></span>\n        </template>\n        <template v-else-if=\"error\">\n          <span class=\"text-red-200\"\n            ><EpIcon :icon-path=\"mdiImageRemove\" size=\"150\"></EpIcon\n          ></span>\n        </template>\n        <template v-else>\n          <div\n            :class=\"`${\n              !noModal ? 'cursor-pointer' : ''\n            } dark:bg-white group relative`\"\n          >\n            <img\n              class=\"object-cover object-center w-full\"\n              :src=\"src\"\n              :alt=\"alt\"\n              @click=\"toggleModal\"\n              ref=\"imgEl\"\n            />\n            <div\n              v-if=\"!noModal\"\n              class=\"absolute bottom-2 right-2 text-white text-center bg-black rounded opacity-0 transition-opacity duration-300 group-hover:opacity-50 cursor-pointer\"\n            >\n              <EpIcon size=\"28\" :icon-path=\"mdiArrowExpandAll\" />\n            </div>\n          </div>\n        </template>\n        <div\n          class=\"px-4 py-2 dark:rounded-b-md\"\n          v-if=\"title || caption || bib\"\n        >\n          <h2 class=\"text-2xl dark:text-white font-bold\">\n            {{ title }}\n          </h2>\n          <p class=\"text-gray-500 dark:text-white text-sm mt-4\">\n            {{ caption }}\n          </p>\n          <div class=\"text-right\" v-if=\"renderBib\">\n            <EpBtn @click=\"toggleBib\" rounded size=\"small\" type=\"primary\">{{\n              labelRef\n            }}</EpBtn>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"thumbnail\" class=\"relative group inline-block m-2\">\n      <img\n        :class=\"`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `\"\n        :src=\"src\"\n        :alt=\"alt\"\n        ref=\"imgEl\"\n      />\n      <div\n        :class=\"`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`\"\n        @click=\"toggleModal\"\n      >\n        <div\n          class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center\"\n        >\n          <EpIcon :icon-path=\"mdiArrowExpandAll\" />\n        </div>\n      </div>\n    </div>\n    <EpModal v-model=\"showModal\">\n      <img\n        class=\"object-cover object-center h-5/6 w-5/6 mx-auto dark:bg-white\"\n        :src=\"src\"\n        :alt=\"alt\"\n        @click=\"toggleModal\"\n      />\n      <div class=\"px-4 py-2\" v-if=\"thumbnail\">\n        <h2 class=\"text-2xl dark:text-white font-bold\">\n          {{ title }}\n        </h2>\n        <p class=\"text-gray-500 dark:text-white text-sm mt-4\">\n          {{ caption }}\n        </p>\n        <div class=\"text-gray-700 dark:text-white mt-4\" v-html=\"renderBib\" />\n      </div>\n      <!-- <div class=\"flex justify-end\"><EpBtn @click=\"toggleModal\" size=\"small\" type=\"error\" outlined>Fermer</EpBtn/> -->\n    </EpModal>\n    <EpModal v-model=\"showBib\" :title=\"labelRefLib\">\n      <div class=\"text-gray-700 dark:text-white mt-4\" v-html=\"renderBib\" />\n      <div class=\"flex justify-end\">\n        <EpBtn @click=\"toggleBib\" size=\"small\" type=\"error\" outlined rounded>\n          {{ labelClose }}\n        </EpBtn>\n      </div>\n    </EpModal>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_openBlock","_createElementVNode","_createVNode","EpIcon","_normalizeClass","noModal","_toDisplayString","EpBtn","labelRef","EpModal","labelRefLib","labelClose"],"mappings":"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"}

package/dist/components/basics/EpListItem.vue.js

@@ -33,7 +33,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("li", {
-        class: normalizeClass(`flex flex-row flex-nowrap justify-between font-medium items-center py-4  ${isNested.value} ${isDisabled.value}`)
+        class: normalizeClass(`flex flex-row flex-nowrap justify-between font-medium items-center py-4 ${isNested.value} ${isDisabled.value}`)
       }, [
         createElementVNode("div", _hoisted_1, [
           hasLeftContent.value ? (openBlock(), createElementBlock("div", _hoisted_2, [

package/dist/components/basics/EpListItem.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpListItem.vue.js","sources":["../../../src/components/basics/EpListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type SetupContext, useSlots } from \"vue\";\nimport type { EpListItemProps } from \"~/types/basics/EpListItem\";\n\nconst props = withDefaults(defineProps<EpListItemProps>(), {\n  type: \"default\",\n  disabled: \"false\",\n});\n\nconst slots: SetupContext[\"slots\"] = useSlots();\n\nconst hasLeftContent = computed(() => {\n  return slots.leftContent ? true : false;\n});\n\nconst hasRigthContent = computed(() => {\n  return slots.rightContent ? true : false;\n});\nconst isNested = computed(() => {\n  if (props.type == \"nested\") return \"px-10\";\n  else return \"\";\n});\nconst isDisabled = computed(() => {\n  if (props.disabled == \"true\") return \"opacity-75 text-slate-500 \";\n  else return \"hover:bg-gray-200 active:bg-gray-300\";\n});\n</script>\n\n<template>\n  <li\n    :class=\"`flex flex-row flex-nowrap justify-between font-medium items-center py-4  ${isNested} ${isDisabled}`\"\n  >\n    <div class=\"flex items-center\">\n      <div v-if=\"hasLeftContent\" class=\"mr-2 min-w-fit px-2\">\n        <slot name=\"leftContent\" />\n      </div>\n      <div>\n        <slot />\n      </div>\n    </div>\n    <div v-if=\"hasRigthContent\" class=\"px-2\">\n      <slot name=\"rightContent\" />\n    </div>\n  </li>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_openBlock","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAKd,UAAM,QAA+B,SAAA;AAErC,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,MAAM,cAAc,OAAO;AAAA,IACpC,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM;AACrC,aAAO,MAAM,eAAe,OAAO;AAAA,IACrC,CAAC;AACD,UAAM,WAAW,SAAS,MAAM;AAC9B,UAAI,MAAM,QAAQ,SAAU,QAAO;AAAA,UAC9B,QAAO;AAAA,IACd,CAAC;AACD,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,YAAY,OAAQ,QAAO;AAAA,UAChC,QAAO;AAAA,IACd,CAAC;;0BAICA,mBAcK,MAAA;AAAA,QAbF,OAAKC,eAAA,4EAA8E,SAAA,KAAQ,IAAI,WAAA,KAAU,EAAA;AAAA,MAAA;QAE1GC,mBAOM,OAPN,YAOM;AAAA,UANO,eAAA,SAAXC,UAAA,GAAAH,mBAEM,OAFN,YAEM;AAAA,YADJI,WAA2B,KAAA,QAAA,aAAA;AAAA,UAAA;UAE7BF,mBAEM,OAAA,MAAA;AAAA,YADJE,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;QAGD,gBAAA,SAAXD,UAAA,GAAAH,mBAEM,OAFN,YAEM;AAAA,UADJI,WAA4B,KAAA,QAAA,cAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"EpListItem.vue.js","sources":["../../../src/components/basics/EpListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type SetupContext, useSlots } from \"vue\";\nimport type { EpListItemProps } from \"~/types/basics/EpListItem\";\n\nconst props = withDefaults(defineProps<EpListItemProps>(), {\n  type: \"default\",\n  disabled: \"false\",\n});\n\nconst slots: SetupContext[\"slots\"] = useSlots();\n\nconst hasLeftContent = computed(() => {\n  return slots.leftContent ? true : false;\n});\n\nconst hasRigthContent = computed(() => {\n  return slots.rightContent ? true : false;\n});\nconst isNested = computed(() => {\n  if (props.type == \"nested\") return \"px-10\";\n  else return \"\";\n});\nconst isDisabled = computed(() => {\n  if (props.disabled == \"true\") return \"opacity-75 text-slate-500 \";\n  else return \"hover:bg-gray-200 active:bg-gray-300\";\n});\n</script>\n\n<template>\n  <li\n    :class=\"`flex flex-row flex-nowrap justify-between font-medium items-center py-4 ${isNested} ${isDisabled}`\"\n  >\n    <div class=\"flex items-center\">\n      <div v-if=\"hasLeftContent\" class=\"mr-2 min-w-fit px-2\">\n        <slot name=\"leftContent\" />\n      </div>\n      <div>\n        <slot />\n      </div>\n    </div>\n    <div v-if=\"hasRigthContent\" class=\"px-2\">\n      <slot name=\"rightContent\" />\n    </div>\n  </li>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_openBlock","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAKd,UAAM,QAA+B,SAAA;AAErC,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,MAAM,cAAc,OAAO;AAAA,IACpC,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM;AACrC,aAAO,MAAM,eAAe,OAAO;AAAA,IACrC,CAAC;AACD,UAAM,WAAW,SAAS,MAAM;AAC9B,UAAI,MAAM,QAAQ,SAAU,QAAO;AAAA,UAC9B,QAAO;AAAA,IACd,CAAC;AACD,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,YAAY,OAAQ,QAAO;AAAA,UAChC,QAAO;AAAA,IACd,CAAC;;0BAICA,mBAcK,MAAA;AAAA,QAbF,OAAKC,eAAA,2EAA6E,SAAA,KAAQ,IAAI,WAAA,KAAU,EAAA;AAAA,MAAA;QAEzGC,mBAOM,OAPN,YAOM;AAAA,UANO,eAAA,SAAXC,UAAA,GAAAH,mBAEM,OAFN,YAEM;AAAA,YADJI,WAA2B,KAAA,QAAA,aAAA;AAAA,UAAA;UAE7BF,mBAEM,OAAA,MAAA;AAAA,YADJE,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;QAGD,gBAAA,SAAXD,UAAA,GAAAH,mBAEM,OAFN,YAEM;AAAA,UADJI,WAA4B,KAAA,QAAA,cAAA;AAAA,QAAA;;;;;"}