ep-lib-ts 0.1.33 → 0.1.35

package/src/components/basics/EpListitem.vue

@@ -0,0 +1,70 @@
+
+<script setup lang="ts">
+
+import { computed, useSlots } from "vue";
+
+type Type = "default" | "nested"
+type Disabled="false"|"true"
+
+interface Props {
+    type?: Type;
+    disabled?:Disabled;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: 'default',
+    disabled:'false'
+})
+
+const slots = useSlots()
+console.log(slots)
+const hasLeftContent = computed(()=>{
+    return slots.leftContent?true:false
+})
+
+const hasRigthContent = computed(()=>{
+    return slots.rightContent?true:false
+})
+const isNested = computed(()=>{
+    if (props.type=="nested")
+        return "px-10"
+    else
+        return ""   
+})
+const isDisabled = computed(()=>{
+    if (props.disabled=="true")
+        return "opacity-75 text-slate-500 "
+    else
+        return "hover:bg-gray-200 active:bg-gray-300"   
+})
+</script>
+
+<template>
+    <li :class="`flex flex-row flex-nowrap justify-between font-medium items-center py-4  ${isNested} ${isDisabled}`">     
+          <div class="flex items-center">
+                <div v-if="hasLeftContent" class="mr-2 min-w-fit px-2">
+                    <slot name="leftContent"></slot>
+                </div>
+                <div>
+                    <slot></slot>
+                </div> 
+            </div>
+            <div v-if="hasRigthContent"  class="px-2 ">
+                <slot name="rightContent"></slot>
+            </div>   
+    </li>
+
+</template>
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/components/educationals/EpReading.vue

@@ -115,7 +115,7 @@ const {
               <div class="flex-1 py-2" v-if="hasDetails">
                 <p class="font-medium">
                   <span class="text-sm italic pr-1" v-if="author">par</span>
-                  <span class="font-bold" v-if="author">{{ author }}</span>
+                  <span class="font-bold mr-1" v-if="author">{{ author }}</span>
                   <span v-if="year">({{ year }})</span>
                   <span v-if="year && editor">, </span>
                   <span v-if="editor">{{ editor }}</span>
@@ -195,7 +195,7 @@ const {
                             <p class="font-medium">
                               <span class="text-sm italic pr-1" v-if="author">par</span>
                               <span class="font-bold mr-2" v-if="author">{{ author }}</span>
-                              <span v-if="year">({{ year }})</span>
+                              <span v-if="year"> ({{ year }})</span>
                               <span v-if="year && editor">, </span>
                               <span v-if="editor">{{ editor }}</span>
                             </p>

package/src/components/forms/EpSwitch.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { toRefs } from "vue";
+import { toRefs,computed } from "vue";
+import { defineEmits } from 'vue'
+import { SwitchColorVariant , ColorVariants} from "../../types/Switch";
 
 interface Props {
   id?: string;
+  type?:SwitchColorVariant;
   label?: string;
-  modelValue?: string;
-  type?: string;
-  placeholder?: string;
+  modelValue?: boolean ;
   disabled?: boolean;
   readonly?: boolean;
   checked?: boolean;
@@ -14,25 +15,30 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   id: "toggle",
-  label: "label",
-  modelValue: "",
-  type: "checkbox",
-  placeholder: "",
+  label: "",
+  type:"base",
+  modelValue: false,
   disabled: false,
   readonly: false,
   checked: false,
 });
 
-const emit = defineEmits<{
-  (e: "update:modelValue", modelValue: string): void;
-}>();
+
+const emit = defineEmits(['update:modelValue'])
+
+const updateValue = (event: Event) => {
+    emit("update:modelValue",(event.target as HTMLInputElement).checked)
+};
+
+const style = computed(()=>{ 
+    return `${ColorVariants[props.type]}`
+})
 
 const {
   id,
   label,
   type,
   modelValue,
-  placeholder,
   disabled,
   readonly,
   checked,
@@ -41,16 +47,26 @@ const {
 
 <template>
   <div>
-    <input
-      :id="id"
-      :type="type"
-      :checked="checked"
-      class="form-checkbox mr-2 mt-[0rem] h-4 w-8 appearance-none rounded-full bg-neutral-200 border-neutral-300 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0rem] after:h-3.5 after:w-3.5 after:rounded-full after:border-none after:bg-neutral-50 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-none checked:bg-blue-600 checked:after:absolute checked:after:z-[2] checked:after:-mt-[0px] checked:after:ml-[1.0625rem] checked:after:h-3.5 checked:after:w-3.5 checked:after:rounded-full checked:after:border-none checked:after:bg-neutral-100 checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:ring-0 focus:before:scale-75 focus:before:opacity-[0.12] focus:before:mt-[0.1rem] focus:before:shadow-[3px_-1px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-3.5 focus:after:w-3.5 focus:after:-mt-[0rem] focus:after:rounded-full focus:after:content-[''] checked:focus:border-neutral-200 checked:focus:bg-blue-600 checked:focus:before:ml-[1rem] checked:focus:before:mt-[0.1rem] checked:focus:before:scale-75 checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-blue-600 dark:checked:after:bg-blue-600 dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] disabled:opacity-40 disabled:cursor-not-allowed"
-      role="switch"
-      :disabled="disabled"
-    />
-    <label class="inline-block pl-[0.15rem] hover:cursor-pointer" :for="id"
-      >Default switch checkbox input</label
+    <label class="relative inline-flex items-center cursor-pointer">
+        <input            
+            :id="id"
+            type="checkbox"
+            :checked=modelValue  
+            :value=modelValue            
+            @input=updateValue          
+            class="sr-only peer"   
+            role="switch"  
+            :disabled="disabled"  
+            @change=updateValue>           
+        <div :class="`w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4         
+          ${style} dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full 
+          peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] 
+          after:bg-white  after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5  after:transition-all `">
+        </div>      
+    </label>
+
+    <label class="inline-block  pl-[0.15rem] hover:cursor-pointer" :for="id"
+      >{{label}}</label
     >
   </div>
 </template>

package/src/components/interactions/EpQuestion.vue

@@ -137,7 +137,7 @@ const { title, intentions, hideIcon, question, src } = toRefs(props);
         />
 
         <div class="mb-6">
-          <ol class="list-none">
+          <ol class="no-list">
             <li v-for="(answer, i) in answers" :key="answer.uid">
               <EpRadio
                 :label="`${typeList(i)}. ${answer.text}`"

package/src/components/signages/EpHeader.vue

@@ -83,8 +83,8 @@ const { title, headerImgColor, big } = toRefs(props);
           <EpChip v-if="duration"  :prependIcon="mdiTimerOutline"> {{ duration }}</EpChip>
           <EpChip v-if="assessment" :prependIcon="mdiChairSchool">Formatif</EpChip>
         </div>
-        <div class="md:px-64 flex w-full py-24 grow flex  h-full items-center">
-          <div class="container flex flex-col px-8 max-w-7xl md:flex-row lg:px-16">
+        <div class="flex w-full py-24 grow flex h-full items-center">
+          <div class="mx-auto w-8/12">
             <div v-if="title || subtitle"
               class="p-4 md:items-center backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded"
             >

package/src/components/signages/EpQuote.vue

@@ -49,7 +49,7 @@ const { author, img, card } = toRefs(props);
       <div class="flex flex-wrap rounded-md">
         <img
           v-if="img"
-          :class="`h-96 w-full object-cover h-auto w-48 ${imageStyle}`"
+          :class="`h-32 ${imageStyle}`"
           :src="img"
           alt="Image of quote"
         />

package/dist/EpBadge-1001b3f1.js

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

package/dist/EpBtn-d2ee85de.js

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

package/dist/EpCard-eb83211e.js

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

package/dist/EpChip-916932cb.js

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

package/dist/EpContentSlider-0cf1508d.js

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

package/dist/EpDivider-e7cb7f8a.js

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

package/dist/EpFlex-5a98c073.js

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

package/dist/EpHeader-6434c484.js

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

package/dist/EpIframe-22b07140.js

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

package/dist/EpImg-a6041dc8.js

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

package/dist/EpLineChart-2575d63d.js

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

package/dist/EpLink-973bc022.js

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

package/dist/EpLinkVersion-24002433.js

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

package/dist/EpModal-c85f0d51.js

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

package/dist/EpPieChart-0eb59e41.js

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

package/dist/EpQuestion-9a2344da.js

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

package/dist/EpQuote-aaa938d0.js

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

package/dist/EpRadio-57e34517.js

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

package/dist/EpReading-e17c098f.js

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

package/dist/EpResource-2adf0ce4.js

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

package/dist/EpSection-d658f245.js

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

package/dist/EpSkeleton-fccbc6be.js

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

package/dist/EpSoftware-32ca0529.js

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

package/dist/EpSpinner-d8682586.js

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

package/dist/EpSvg-7d74c2b2.js

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

package/dist/EpSwitch-1eaf9d3f.js

@@ -1,44 +0,0 @@
-import { defineComponent as l, toRefs as s, openBlock as n, createElementBlock as u, createElementVNode as r, unref as e } from "vue";
-const b = ["id", "type", "checked", "disabled"], _ = ["for"], y = /* @__PURE__ */ l({
-  __name: "EpSwitch",
-  props: {
-    id: { default: "toggle" },
-    label: { default: "label" },
-    modelValue: { default: "" },
-    type: { default: "checkbox" },
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: !1 },
-    readonly: { type: Boolean, default: !1 },
-    checked: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue"],
-  setup(a, { emit: p }) {
-    const c = a, {
-      id: o,
-      label: h,
-      type: t,
-      modelValue: k,
-      placeholder: i,
-      disabled: f,
-      readonly: x,
-      checked: d
-    } = s(c);
-    return (m, g) => (n(), u("div", null, [
-      r("input", {
-        id: e(o),
-        type: e(t),
-        checked: e(d),
-        class: "form-checkbox mr-2 mt-[0rem] h-4 w-8 appearance-none rounded-full bg-neutral-200 border-neutral-300 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0rem] after:h-3.5 after:w-3.5 after:rounded-full after:border-none after:bg-neutral-50 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-none checked:bg-blue-600 checked:after:absolute checked:after:z-[2] checked:after:-mt-[0px] checked:after:ml-[1.0625rem] checked:after:h-3.5 checked:after:w-3.5 checked:after:rounded-full checked:after:border-none checked:after:bg-neutral-100 checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:ring-0 focus:before:scale-75 focus:before:opacity-[0.12] focus:before:mt-[0.1rem] focus:before:shadow-[3px_-1px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-3.5 focus:after:w-3.5 focus:after:-mt-[0rem] focus:after:rounded-full focus:after:content-[''] checked:focus:border-neutral-200 checked:focus:bg-blue-600 checked:focus:before:ml-[1rem] checked:focus:before:mt-[0.1rem] checked:focus:before:scale-75 checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-blue-600 dark:checked:after:bg-blue-600 dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] disabled:opacity-40 disabled:cursor-not-allowed",
-        role: "switch",
-        disabled: e(f)
-      }, null, 8, b),
-      r("label", {
-        class: "inline-block pl-[0.15rem] hover:cursor-pointer",
-        for: e(o)
-      }, "Default switch checkbox input", 8, _)
-    ]));
-  }
-});
-export {
-  y as default
-};

package/dist/EpTable-e5bd6c19.js

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

package/dist/EpTerm-427f5b86.js

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

package/dist/EpText-f96b3863.js

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

package/dist/EpTimeLine-54cbf65e.js

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

package/dist/EpVideo-9a9ce1e1.js

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

package/dist/EpVideoPanopto-f42c01cc.js

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