ep-lib-ts 0.1.42 → 0.1.43

package/dist/style.css

@@ -1 +1 @@
-.content[data-v-7dc117b1]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}.h-custom{height:30rem}.p-custom p{margin-bottom:1em}.v-enter-active[data-v-63d168f1],.v-leave-active[data-v-63d168f1]{transition:opacity .5s ease}.v-enter-from[data-v-63d168f1],.v-leave-to[data-v-63d168f1]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}.content[data-v-89d118fb]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.shape{height:var(--5ad0279f);width:var(--6f1de84e)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}
+.content[data-v-7dc117b1]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}.h-custom{height:30rem}.p-custom p{margin-bottom:1em}.v-enter-active[data-v-8769146d],.v-leave-active[data-v-8769146d]{transition:opacity .5s ease}.v-enter-from[data-v-8769146d],.v-leave-to[data-v-8769146d]{opacity:0}.katex[data-v-31453b22]{font-size:1.6em}.content[data-v-89d118fb]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.shape{height:var(--5ad0279f);width:var(--6f1de84e)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}

package/dist/types/Codeblock.d.ts

@@ -0,0 +1,223 @@
+type Theme = "neon-bunny" | "neon-bunny-carrot" | "a11y-dark" | "a11y-light" | "agate" | "an-old-hope" | "androidstudio" | "arduino-light" | "arta" | "ascetic" | "atom-one-dark-reasonable" | "atom-one-dark" | "atom-one-light" | "brown-paper" | "codepen-embed" | "color-brewer" | "dark" | "default" | "devibeans" | "docco" | "far" | "felipec" | "foundation" | "github-dark-dimmed" | "github-dark" | "github" | "gml" | "googlecode" | "gradient-dark" | "gradient-light" | "grayscale" | "hybrid" | "idea" | "intellij-light" | "ir-black" | "isbl-editor-dark" | "isbl-editor-light" | "kimbie-dark" | "kimbie-light" | "lightfair" | "lioshi" | "magula" | "mono-blue" | "monokai-sublime" | "monokai" | "night-owl" | "nnfx-dark" | "nnfx-light" | "nord" | "obsidian" | "panda-syntax-dark" | "panda-syntax-light" | "paraiso-light" | "pojoaque" | "purebasic" | "qtcreator-dark" | "qtcreator-light" | "rainbow" | "routeros" | "school-book" | "shades-of-purple" | "srcery" | "stackoverflow-dark" | "stackoverflow-light" | "sunburst" | "tokyo-night-dark" | "tokyo-night-light" | "tomorrow-night-blue" | "tomorrow-night-bright" | "vs" | "vs2015" | "xcode" | "xt256";
+export default Theme;
+export declare const ThemeOptions: readonly [{
+    readonly text: "neon bunny";
+    readonly value: "neon-bunny";
+}, {
+    readonly text: "neon bunny carrot";
+    readonly value: "neon-bunny-carrot";
+}, {
+    readonly text: "a11y dark";
+    readonly value: "a11y-dark";
+}, {
+    readonly text: "a11y light";
+    readonly value: "a11y-light";
+}, {
+    readonly text: "agate";
+    readonly value: "agate";
+}, {
+    readonly text: "an old hope";
+    readonly value: "an-old-hope";
+}, {
+    readonly text: "androidstudio";
+    readonly value: "androidstudio";
+}, {
+    readonly text: "arduino light";
+    readonly value: "arduino-light";
+}, {
+    readonly text: "arta";
+    readonly value: "arta";
+}, {
+    readonly text: "ascetic";
+    readonly value: "ascetic";
+}, {
+    readonly text: "atom one dark reasonable";
+    readonly value: "atom-one-dark-reasonable";
+}, {
+    readonly text: "atom one dark";
+    readonly value: "atom-one-dark";
+}, {
+    readonly text: "atom one light";
+    readonly value: "atom-one-light";
+}, {
+    readonly text: "brown paper";
+    readonly value: "brown-paper";
+}, {
+    readonly text: "codepen embed";
+    readonly value: "codepen-embed";
+}, {
+    readonly text: "color brewer";
+    readonly value: "color-brewer";
+}, {
+    readonly text: "dark";
+    readonly value: "dark";
+}, {
+    readonly text: "default";
+    readonly value: "default";
+}, {
+    readonly text: "devibeans";
+    readonly value: "devibeans";
+}, {
+    readonly text: "docco";
+    readonly value: "docco";
+}, {
+    readonly text: "far";
+    readonly value: "far";
+}, {
+    readonly text: "felipec";
+    readonly value: "felipec";
+}, {
+    readonly text: "foundation";
+    readonly value: "foundation";
+}, {
+    readonly text: "github dark dimmed";
+    readonly value: "github-dark-dimmed";
+}, {
+    readonly text: "github dark";
+    readonly value: "github-dark";
+}, {
+    readonly text: "github";
+    readonly value: "github";
+}, {
+    readonly text: "gml";
+    readonly value: "gml";
+}, {
+    readonly text: "google code";
+    readonly value: "googlecode";
+}, {
+    readonly text: "gradient dark";
+    readonly value: "gradient-dark";
+}, {
+    readonly text: "gradient light";
+    readonly value: "gradient-light";
+}, {
+    readonly text: "grayscale";
+    readonly value: "grayscale";
+}, {
+    readonly text: "hybrid";
+    readonly value: "hybrid";
+}, {
+    readonly text: "idea";
+    readonly value: "idea";
+}, {
+    readonly text: "intellij light";
+    readonly value: "intellij-light";
+}, {
+    readonly text: "ir black";
+    readonly value: "ir-black";
+}, {
+    readonly text: "isbl editor dark";
+    readonly value: "isbl-editor-dark";
+}, {
+    readonly text: "isbl editor light";
+    readonly value: "isbl-editor-light";
+}, {
+    readonly text: "kimbie dark";
+    readonly value: "kimbie-dark";
+}, {
+    readonly text: "kimbie light";
+    readonly value: "kimbie-light";
+}, {
+    readonly text: "lightfair";
+    readonly value: "lightfair";
+}, {
+    readonly text: "lioshi";
+    readonly value: "lioshi";
+}, {
+    readonly text: "magula";
+    readonly value: "magula";
+}, {
+    readonly text: "mono blue";
+    readonly value: "mono-blue";
+}, {
+    readonly text: "monokai sublime";
+    readonly value: "monokai-sublime";
+}, {
+    readonly text: "monokai";
+    readonly value: "monokai";
+}, {
+    readonly text: "night owl";
+    readonly value: "night-owl";
+}, {
+    readonly text: "nnfx dark";
+    readonly value: "nnfx-dark";
+}, {
+    readonly text: "nnfx light";
+    readonly value: "nnfx-light";
+}, {
+    readonly text: "nord";
+    readonly value: "nord";
+}, {
+    readonly text: "obsidian";
+    readonly value: "obsidian";
+}, {
+    readonly text: "panda syntax dark";
+    readonly value: "panda-syntax-dark";
+}, {
+    readonly text: "panda syntax light";
+    readonly value: "panda-syntax-light";
+}, {
+    readonly text: "paraiso dark";
+    readonly value: "paraiso-light";
+}, {
+    readonly text: "pojoaque";
+    readonly value: "pojoaque";
+}, {
+    readonly text: "purebasic";
+    readonly value: "purebasic";
+}, {
+    readonly text: "qtcreator dark";
+    readonly value: "qtcreator-dark";
+}, {
+    readonly text: "qtcreator light";
+    readonly value: "qtcreator-light";
+}, {
+    readonly text: "rainbow";
+    readonly value: "rainbow";
+}, {
+    readonly text: "routeros";
+    readonly value: "routeros";
+}, {
+    readonly text: "school book";
+    readonly value: "school-book";
+}, {
+    readonly text: "shades of purple";
+    readonly value: "shades-of-purple";
+}, {
+    readonly text: "srcery";
+    readonly value: "srcery";
+}, {
+    readonly text: "stackoverflow dark";
+    readonly value: "stackoverflow-dark";
+}, {
+    readonly text: "stackoverflow light";
+    readonly value: "stackoverflow-light";
+}, {
+    readonly text: "sunburst";
+    readonly value: "sunburst";
+}, {
+    readonly text: "tokyo night dark";
+    readonly value: "tokyo-night-dark";
+}, {
+    readonly text: "tokyo night light";
+    readonly value: "tokyo-night-light";
+}, {
+    readonly text: "tomorrow night blue";
+    readonly value: "tomorrow-night-blue";
+}, {
+    readonly text: "tomorrow night bright";
+    readonly value: "tomorrow-night-bright";
+}, {
+    readonly text: "vs";
+    readonly value: "vs";
+}, {
+    readonly text: "vs2015";
+    readonly value: "vs2015";
+}, {
+    readonly text: "xcode";
+    readonly value: "xcode";
+}, {
+    readonly text: "xt256";
+    readonly value: "xt256";
+}];
+export declare const defaultOption: "neon-bunny";

package/dist/types/Image.d.ts

@@ -0,0 +1,6 @@
+export declare const sizeThumbnailStyle: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export type SizeThumbnail = keyof typeof sizeThumbnailStyle;

package/dist/types/SummativeTable.d.ts

@@ -0,0 +1,10 @@
+interface Option {
+    uid: string;
+    label: string;
+    value: number | string;
+}
+export interface QuestionSummative {
+    question: string;
+    options: Option[];
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.1.42",
+  "version": "0.1.43",
   "files": [
     "dist",
     "src/components/"
@@ -26,16 +26,20 @@
     "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-apexcharts": "^1.4.4",
+    "vue3-highlightjs": "^1.0.5"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
@@ -46,6 +50,7 @@
     "autoprefixer": "^10.4.14",
     "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",

package/src/components/basics/EpHover.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+    import { toRefs, computed, ref } from "vue";
+    import useColors from '../../composables/useColors'
+
+    type Animation=""|"scale"
+    type Color = ""|"white"|"black"|"primary"|"secondary"|"accent"|"error"|"warning"|"success"|"info"|"question"|"tip"
+    |"primarydark"|"secondarydark"|"accentdark"|"errordark"|"warningdark"|"successdark"|"infodark"|"questiondark"|"tipdark"
+    |"primarylight"|"secondarylight"|"accentlight"|"errorlight"|"warninglight"|"successlight"|"infolight"|"questionlight"|"tiplight";
+
+    interface Props {
+        bg_color?: Color;
+        text_color?:Color;
+        text?: string;
+        animation?:Animation
+    }
+
+    const props = withDefaults(defineProps<Props>(), {
+        bg_color: "black",
+        text_color:"white",
+        text: "",
+        animation:""
+    });
+
+
+    const bgcolor  = computed(()=>{  
+        if(props.bg_color ){
+            return `${useColors('bg', props.bg_color)}`
+        }   
+    })
+
+    const textcolor  = computed(()=>{      
+        if(props.text_color ){   
+            return `${useColors('text', props.text_color)}`
+        }
+    })
+
+    const hoverstyle  = computed(()=>{   
+        if (props.animation=="scale")
+            return `hover:scale-110 hover:opacity-100 `      
+        else
+            return `hover:opacity-100`
+    })
+
+
+</script>
+
+<template>
+    <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">          
+        <slot ></slot>
+        <div :class="`absolute  bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden ${bgcolor} 
+            font-bold flex justify-center items-center bg-fixed opacity-0 transition duration-300 ease-in-out 
+            text-4xl ${hoverstyle} ${textcolor}`">
+            {{ props.text }}
+        </div>    
+    </div> 
+</template>
+

package/src/components/basics/EpImg.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { toRefs, ref, computed } from 'vue'
+import { SizeThumbnail, sizeThumbnailStyle } from '../../types/Image'
 import { useImage } from '@vueuse/core'
 import EpModal from '../interactions/EpModal.vue'
 import EpIcon from '../basics/EpIcon.vue'
@@ -9,28 +10,13 @@ import { mdiImage } from '@mdi/js';
 import { mdiImageRemove } from '@mdi/js';
 import { useRenderText } from "../../composables/useRenderText";
 
-const Cols = [
-   'basis-6/12',
-   'basis-1/12',
-   'basis-2/12',
-   'basis-3/12',
-   'basis-4/12',
-   'basis-5/12',
-   'basis-6/12',
-   'basis-7/12',
-   'basis-8/12',
-   'basis-9/12',
-   'basis-10/12',
-   'basis-11/12',
-   'basis-12/12',
-]
-
 interface Props {
    src: string;
    alt?: string;
    height?: string | number;
    width?: string | number;
    thumbnail?: boolean;
+   sizeThumbnail?: SizeThumbnail;
    caption?: string;
    bib?: string;
    title?: string;
@@ -42,9 +28,26 @@ const props = withDefaults(defineProps<Props>(), {
    alt: "Image snfas",
    cols: "6",
    thumbnail: false,
-   noModal:false
+   noModal:false,
+   sizeThumbnail:"medium"
 })
 
+const Cols = [
+   'basis-6/12',
+   'basis-1/12',
+   'basis-2/12',
+   'basis-3/12',
+   'basis-4/12',
+   'basis-5/12',
+   'basis-6/12',
+   'basis-7/12',
+   'basis-8/12',
+   'basis-9/12',
+   'basis-10/12',
+   'basis-11/12',
+   'basis-full',
+]
+
 const renderCols = computed(() => {
    return Cols[+props.cols]
 })
@@ -71,8 +74,12 @@ const toggleBib = ():void => {
    showBib.value = !showBib.value
 }
 
+const styleSizeThumbnail = computed(()=> {
+   return sizeThumbnailStyle[props.sizeThumbnail]
+})
+
 const { isLoading, error } = useImage({ src: props.src })
-const { src, alt, title, caption, thumbnail, bib, noModal } = toRefs(props)
+const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } = toRefs(props)
 
 </script>
 
@@ -97,9 +104,9 @@ const { src, alt, title, caption, thumbnail, bib, noModal } = toRefs(props)
          </div>
       </div>
       <div v-if="thumbnail" class="relative group inline-block m-2">
-         <img class="w-36 h-36 object-cover object-center group-hover:opacity-30 " :src="src" :alt="alt">
+         <img :class="`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `" :src="src" :alt="alt">
          <div
-            class="absolute top-0 left-0 w-36 h-36 bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer"
+            :class="`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`"
             @click="toggleModal">
             <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
                <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>

package/src/components/educationals/EpCodeblock.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import VCodeBlock from '@wdns/vue-code-block';   
+  import {defaultOption} from "../../types/Codeblock";
+  import Theme from "../../types/Codeblock";
+  import { computed} from "vue";
+  import { ref } from "vue"; 
+
+  type Langue = "javascript"|"css"|"html"|"php"|"json"|"typescript";
+
+  interface Props {
+    code?: string;  
+    label?:string;
+    lang?:Langue;
+    theme?:Theme;
+  }
+const props = withDefaults(defineProps<Props>(), {   
+    code:"",
+    label:"",
+    lang:"javascript",
+    theme: defaultOption,
+})
+
+
+const code = computed(()=>{
+    return ref(props.code);
+})
+const label = computed(()=>{
+    return props.label;
+})
+const lang = computed(()=>{
+    return props.lang;
+})
+const theme = computed(()=>{
+    return props.theme;
+})
+</script>
+
+<template>
+ 
+  <VCodeBlock
+    :code=code
+    highlightjs 
+    :label=label
+    :lang=lang
+    :theme=theme
+  />
+  
+</template>

package/src/components/forms/EpCheckbox.vue

@@ -1,49 +1,47 @@
 <script setup lang="ts">
-import {toRefs } from "vue";
-const name: string = "checkbox";
+import { toRefs, computed } from "vue";
+
 interface Props {
   id?: string;
   label?: string;
-  modelValue?: string;
-  type?: "checkbox" | "radio";
+  modelValue?: string | string[] | boolean;
   disabled?: boolean;
   readonly?: boolean;
-  checked?: boolean;
+  value?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   id: "0",
   label: "check",
-  modelValue: "",
-  type: "checkbox",
   disabled: false,
   readonly: false,
-  checked: false,
+  value:undefined,
+  modelValue:""
 });
 
+
 const emit = defineEmits<{
-  (e: "update:modelValue", modelValue: string): void;
+  (e: "update:modelValue", modelValue:string|string[]|boolean): void;
 }>();
 
-const { id, label, type, modelValue, disabled, readonly, checked } =
-  toRefs(props);
+const model = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  },
+});
+
+
+const { id, label, disabled, readonly, value } = toRefs(props);
 </script>
 <template>
-  <div>
-    <input
-      :id="id"
-      :type="type"
-      :value="modelValue"
-      class="form-checkbox rounded border-neutral-300 text-blue-600 h-[1.125rem] w-[1.125rem] mr-2 disabled:opacity-40 disabled:cursor-not-allowed"
-      :disabled="disabled"
-      :readonly="readonly"
-      :checked="checked"
-    />
-    <label
-      :for="id"
-      class="disabled:opacity-40 hover:pointer-events-none"
-      :disabled="disabled"
-      >{{ label }}</label
-    >
-  </div>
+  <label
+    class="cursor-pointer flex items-center rounded-md py-3 px-3 text-xs font-semibold uppercase sm:flex-1 hover:bg-gray-200 ">
+    <input type="checkbox" :id="id" v-model="model" :value="value" :disabled="disabled" :readonly="readonly"
+     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" />
+    <span class="ml-2">{{ label }}</span> <!--  sm:w-24 md:w-48 -->
+  </label>
 </template>

package/src/components/forms/EpRadioSummative.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { toRefs, computed } from "vue";
+import { RadioVariants, radioVariants } from "../../types/Radio";
+
+interface Props {
+    id?: string;
+    label?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    type?: RadioVariants;
+    value?: number;
+    modelValue?: number|null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    id: "01",
+    disabled: false,
+    readonly: false,
+    checked: false,
+    type: "base",
+    value: undefined,
+    modelValue: null
+});
+
+
+const isChecked = computed(() => {
+    return props.modelValue === props.value;
+});
+
+
+const { label, disabled, readonly, value, id, } = toRefs(props);
+
+const emit = defineEmits<{
+    (e: "update:modelValue", modelValue: number): void
+}>()
+
+const onChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const value = +target.value ||  0
+    emit('update:modelValue', value)
+}
+
+</script>
+
+<template>
+    <label
+        class="cursor-pointer flex items-center rounded-md py-3 px-3 text-xs font-semibold uppercase sm:flex-1 hover:bg-gray-200 ">
+        <input type="radio" :id="id" :name="id" :disabled="disabled"
+            :readonly="readonly" :value="value" :checked="isChecked" @change="onChange"
+            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" />
+        <span class="ml-2">{{label}}</span> 
+    </label>
+</template>

package/src/components/forms/EpToggle.vue

@@ -70,10 +70,7 @@ const {
     </label>
   </div> -->
   <div>
-    <input
-      :id="id"
-      :type="type"
-      :checked="checked"
+    <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-[''] 
@@ -85,13 +82,7 @@ const {
 	  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
-    >
+      role="switch" :disabled="disabled" />
+    <label class="inline-block pl-[0.15rem] hover:cursor-pointer" :for="id">Default switch checkbox input</label>
   </div>
 </template>
-
-