ep-lib-ts 1.0.56 → 1.0.58

package/src/components/forms/EpCheckbox.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-
-interface Props {
-  id?: string;
-  label?: string;
-  modelValue?: string | string[] | boolean;
-  disabled?: boolean;
-  readonly?: boolean;
-  value?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "0",
-  label: "check",
-  disabled: false,
-  readonly: false,
-  value:undefined,
-  modelValue:""
-});
-
-
-const emit = defineEmits<{
-  (e: "update:modelValue", modelValue:string|string[]|boolean): void;
-}>();
-
-const model = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit("update:modelValue", value);
-  },
-});
-
-
-const { id, label, disabled, readonly, value } = toRefs(props);
-</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="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/EpInput.vue

@@ -1,178 +0,0 @@
-<script setup lang="ts">
-import { toRefs, toRef } from "vue";
-import {useField} from 'vee-validate'
-import EpIcon from "../basics/EpIcon.vue";
-import EpBadge from "../basics/EpBadge.vue";
-import { mdiLockOutline } from "@mdi/js";
-
-interface Props {
-  name:string;
-  id?: string;
-  label?: string;
-  modelValue?: string;
-  type?:
-    | "text"
-    | "email"
-    | "url"
-    | "password"
-    | "number"
-    | "date"
-    | "search"
-    | "tel"
-    | "time";
-  placeholder?: string;
-  iconPath?: string | null;
-  iconSize?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-}
-
-// text: mdiText
-// email: mdiEmailOutline
-// url: mdiLink
-// password: mdiLockOutline
-// number: mdiNumeric
-// date: mdiCalendarMonthOutline
-// search: mdiMagnify
-// tel: mdiPhoneOutline
-// time: mdiClockOutline
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "0",
-  label: "label",
-  modelValue: "",
-  type: "text",
-  placeholder: "",
-  iconPath: "",
-  iconSize: "32",
-  disabled: false,
-  readonly: false,
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", modelValue: string): void;
-}>();
-
-
-const {
-  id,
- // name,
-  label,
-  type,
-  modelValue,
-  placeholder,
-  iconPath,
-  disabled,
-  readonly,
-} = toRefs(props);
-
-const name = toRef(props, 'name');
-
-
-function validateField(value:string) {
-  if (!value) {
-    return 'this field is required';
-  }
-  if (value.length < 8) {
-    return 'this field must contain at least 8 characters';
-  }
-  return true;
-}
-
-const {value, errorMessage, meta} = useField(name, validateField)
-//($event.target as HTMLInputElement).value)
-</script>
-
-<template>
-  {{ meta }}
-  <!-- <div>
-    <label :for="id">{{ label }}</label>
-    <input
-      :id="id"
-      :type="type"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      :value="modelValue"
-      @input="$emit('update:modelValue', $event.target.value)"
-      class="form-input p-2 border-solid border-gray-400 border-1 w-full rounded-md"
-    />
-  </div> -->
-
-  <!-- <EpIcon
-        v-if="prependIcon"
-        :iconPath="prependIcon"
-        :size="iconSize"
-        extraClass="mr-2"
-      ></EpIcon> -->
-
-  <!-- <label for="" class="text-xs px-1">
-    <span>First name</span>
-    <span class="text-xs font-semibold px-1">* requis</span>
-    <div class="flex">
-      <div
-        class="w-10 z-10 pl-1 text-center pointer-events-none text-gray-500 flex items-center justify-center"
-      >
-        <EpIcon
-          v-if="iconPath"
-          :iconPath="iconPath"
-          :size="iconSize"
-          extraClass="mr-2"
-        ></EpIcon>
-      </div>
-      <input
-      type="text"
-      class="w-full -ml-10 pl-10 pr-3 py-2 rounded-lg border-2 border-gray-300 outline-none focus:border-blue-500"
-      placeholder="John"
-    />
-      <input
-        type="text"
-        class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
-        placeholder=""
-      />
-    </div>
-  </label> -->
-  <div class="w-72">
-    <div class="relative h-10 w-full min-w-[200px]">
-      <div
-        class="absolute top-2/4 right-3 grid h-5 w-5 -translate-y-2/4 place-items-center text-neutral-400"
-      >
-        <!-- <EpIcon
-          v-if="iconPath"
-          :iconPath="iconPath"
-          :size="iconSize"
-          extraClass="mr-2"
-        ></EpIcon> -->
-      </div>
-      <input
-	  	:id="id"
-	  	:type="type"
-        class="peer h-full w-full rounded-[7px] border border-blue-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-neutral-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-neutral-200 placeholder-shown:border-t-neutral-200 focus:border-2 focus:border-blue-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-neutral-100 disabled:cursor-not-allowed"
-        placeholder=" "
-        :disabled="disabled"
-      />
-      <label
-	  	:for="id"
-        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-neutral-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-neutral-700 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-blue-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-blue-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-blue-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-neutral-500"
-      >
-        {{ label }}
-      </label>
-      <EpBadge :iconPath="mdiLockOutline" />
-      <!-- <span class="badge absolute -top-1 -right-1 flex h-3 w-3">
-        <span
-          class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"
-        ></span>
-        <span
-          class="relative inline-flex rounded-full h-3 w-3 bg-red-500"
-        ></span>
-      </span> -->
-    </div>
-  </div>
-  <div class="my-3">
-    {{ name }}
-    <input type="text" v-model="value" :name="name" :id="name">
-    <div v-if="errorMessage">{{ errorMessage }}</div>    
-    
-  </div>
-</template>
-

package/src/components/forms/EpRadio.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-import { type RadioVariants, radioVariants } from "../../types/Radio";
-
-interface Props {
-  id?: string;
-  label?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  type?: RadioVariants;
-  value?: string;
-  modelValue?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "01",
-  disabled: false,
-  readonly: false,
-  checked: false,
-  type: "base",
-  value:undefined,
-  modelValue:''
-});
-
-const styleRadio = computed(() => {
-  return `${radioVariants[props.type]} mx-2 `;
-});
-
-const isChecked = computed(() => {
-  return props.modelValue === props.value;
-});
-
-const labelFor = computed(()=> {
-  if(props.label){
-    return props.label.trim().replace(/\s/g, '_')
-  }
-  return `label_${Math.round(Math.random()*100)}` 
-})
-
-const { label, disabled, readonly, value } = toRefs(props);
-
-const emit = defineEmits<{
-  (e:"update:modelValue", modelValue:string):void
-}>()
-
-const onChange = (event:Event) => {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-}
-
-</script>
-
-<template>
-  <span class="flex items-center">
-    <input
-      class="cursor-pointer"
-      type="radio"
-      :id="labelFor"
-      :name="labelFor"
-      :disabled="disabled"
-      :readonly="readonly"
-      :class="styleRadio"
-      :value="value"
-      :checked="isChecked"
-      @change="onChange"
-    />
-    <label :for="labelFor" class="disabled:opacity-40 cursor-pointer">{{
-      label
-    }}</label>
-    
-  </span>
-</template>

package/src/components/forms/EpRadioSummative.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-import { type 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 hover:text-white dark:hover:text-black flex items-center rounded-md py-3 px-3 text-xs font-semibold uppercase sm:flex-1 hover:bg-base ">
-        <input type="radio" :id="id" :name="id" :disabled="disabled"
-            :readonly="readonly" :value="value" :checked="isChecked" @change="onChange"
-            class="rounded bg-base-dark border-gray-300 focus:border-transparent focus:bg-base text-primary focus:ring-1 focus:ring-offset-2 focus:ring-primary" />
-        <span class="ml-2">{{label}}</span> 
-    </label>
-</template>

package/src/components/forms/EpSelect.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-type Option = { text: string; value: string };
-
-interface Props {
-  options: Option[];
-  modelValue: string;
-  label?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
- label:"Select Theme:"
-})
-
-const model = defineModel()
-
-</script>
-
-<template>
-  <div class="w-full max-w-xs">
-    <label class="block text-sm font-medium text-gray-700 mb-1">{{label}}</label>
-    <select
-      v-model="model"
-      class="block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-    >
-      <option v-for="option in options" :key="option.value" :value="option.value">
-        {{ option.text }}
-      </option>
-    </select>
-  </div>
-</template>

package/src/components/forms/EpSwitch.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { toRefs,computed } from "vue";
-import { type SwitchColorVariant, ColorVariants} from "../../types/Switch";
-
-interface Props {
-  id?: string;
-  type?:SwitchColorVariant;
-  label?: string;
-  modelValue?: boolean ;
-  disabled?: boolean;
-  readonly?: boolean;
-  checked?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "toggle",
-  label: "",
-  type:"base",
-  modelValue: false,
-  disabled: false,
-  readonly: false,
-  checked: false,
-});
-
-
-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,
-  disabled,
-  readonly,
-  checked,
-} = toRefs(props);
-</script>
-
-<template>
-  <div>
-    <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/forms/EpTextarea.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import { toRefs } from "vue";
-
-import EpIcon from "../basics/EpIcon.vue";
-import EpBadge from "../basics/EpBadge.vue";
-import { mdiLockOutline } from "@mdi/js";
-
-interface Props {
-    id?: string;
-    label?: string;
-    modelValue?: string;
-    type?:
-    | "text"
-    | "email"
-    | "url"
-    | "password"
-    | "number"
-    | "date"
-    | "search"
-    | "tel"
-    | "time";
-    placeholder?: string;
-    iconPath?: string;
-    iconSize?: string;
-    disabled?: boolean;
-    readonly?: boolean;
-    labels?:{
-        message?:string; 
-    }
-}
-
-// text: mdiText
-// email: mdiEmailOutline
-// url: mdiLink
-// password: mdiLockOutline
-// number: mdiNumeric
-// date: mdiCalendarMonthOutline
-// search: mdiMagnify
-// tel: mdiPhoneOutline
-// time: mdiClockOutline
-
-const props = withDefaults(defineProps<Props>(), {
-    id: "0",
-    label: "label",
-    modelValue: "",
-    type: "text",
-    placeholder: "",
-    iconPath: "",
-    iconSize: "",
-    disabled: false,
-    readonly: false,
-    labels:()=>{
-        return {
-            message:"Message"
-        }       
-    }
-});
-
-const emit = defineEmits<{
-    (e: "update:modelValue", modelValue: string): void;
-}>();
-
-const {
-    id,
-    label,
-    type,
-    modelValue,
-    placeholder,
-    iconPath,
-    disabled,
-    readonly,
-} = toRefs(props);
-</script>
-
-<template>
-    <div class="w-96">
-        <div class="relative w-full min-w-[200px]">
-            <textarea :disabled="disabled"
-                class="peer h-full min-h-[100px] w-full resize-none rounded-[7px] border border-neutral-300 bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-neutral-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-neutral-300 placeholder-shown:border-t-neutral-200 focus:border-2 focus:border-blue-500 focus:border-t-transparent focus:outline-0 disabled:resize-none disabled:border-0 disabled:bg-neutral-100 disabled:cursor-not-allowed disabled:bg-neutral-200 focus:ring-0"
-                placeholder=" "></textarea>
-            <label
-                class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-neutral-300 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-neutral-300 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-blue-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-blue-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-blue-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-500">
-                {{labels.message}}
-            </label>
-        </div>
-    </div>
-</template>

package/src/components/forms/EpToggle.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { toRefs } from "vue";
-
-interface Props {
-  id?: string;
-  label?: string;
-  modelValue?: string;
-  type?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  checked?: boolean;
-  labels?:{
-    defaultSwitch?:string; //Default switch checkbox input
-  }
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "toggle",
-  label: "label",
-  modelValue: "",
-  type: "checkbox",
-  placeholder: "",
-  disabled: false,
-  readonly: false,
-  checked: false,
-  labels:()=>{
-    return {
-      defaultSwitch:"Default switch checkbox input"
-    }
-  }
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", modelValue: string): void;
-}>();
-
-const {
-  id,
-  label,
-  type,
-  modelValue,
-  placeholder,
-  disabled,
-  readonly,
-  checked,
-} = toRefs(props);
-</script>
-
-<template>
-  <!-- <div>
-    <label :for="id" class="flex items-center cursor-pointer relative mb-4">
-      <input :type="type" :id="id" class="sr-only form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out checked:bg-indigo-600 checked:border-transparent checked:text-white" :checked="checked" />
-      <div
-        class="
-		toggle-bg 
-		bg-gray-200 
-		border-2 
-		border-gray-200 
-		h-6 
-		w-11 
-		rounded-full 
-		after:absolute 
-		after:top-0.5 
-		after:left-0.5 
-		after:bg-white 
-		after:border-gray-400 
-		after:rounded-full 
-		after:h-5 
-		after:w-5 
-		after:transition
-		after:translate-x-0
-		after:checked:translate-x-full
-		checked:after:border-white
-		"
-      ></div>
-      <span class="ml-3 text-gray-900 text-base font-medium">Toggle me</span>
-    </label>
-  </div> -->
-  <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">{{labels.defaultSwitch}}</label>
-  </div>
-</template>