ep-lib-ts 0.0.8 → 0.0.9

package/src/components/forms/EpSelect.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+
+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;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "0",
+  label: "label",
+  modelValue: "",
+  type: "text",
+  placeholder: "",
+  iconPath: "",
+  iconSize: "",
+  disabled: false,
+});
+
+
+</script>
+
+<template>
+<div class="relative h-10 w-72 min-w-[200px]">
+  <select :disabled="disabled" class="
+  peer 
+  h-full 
+  w-full 
+  rounded-[7px] 
+  border 
+  border-neutral-300
+  border-t-transparent 
+  bg-transparent 
+  px-3 
+  py-2.5 
+  font-sans 
+  text-sm 
+  font-normal 
+  text-blue-gray-700 
+  outline 
+  outline-0 
+  transition-all 
+  placeholder-shown:border 
+  placeholder-shown:border-blue-gray-200 
+  placeholder-shown:border-t-blue-gray-200 
+  empty:!bg-red-500 
+  focus:border-2 
+  focus:border-blue-500 
+  focus:border-t-transparent 
+  focus:outline-4 
+  placeholder-shown:outline-0
+  disabled:border-0 
+  disabled:cursor-not-allowed
+  disabled:bg-neutral-200
+  focus:ring-0
+  ">
+    <option value="option">Choisissez une option</option>
+    <option value="vanderpoel">Van Der Poel</option>
+    <option value="vanaert">Van Aert</option>
+    <option value="pogacar">Pogacar</option>
+    <option value="evenepoel">Evenepoel</option>
+  </select>
+  <label class="before:content[' '] 
+  after:content[' '] 
+  pointer-events-none 
+  absolute 
+  left-0 
+  border-red-500
+  -top-1.5 
+  flex 
+  h-full 
+  w-full 
+  select-none 
+  text-[11px] 
+  font-normal 
+  leading-tight 
+  text-blue-gray-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-gray-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-gray-200 
+  after:transition-all 
+  peer-placeholder-shown:text-sm 
+  peer-placeholder-shown:leading-[3.75] 
+  peer-placeholder-shown:text-blue-gray-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-gray-500
+  ">
+    Quel est le meilleur cycliste
+  </label>
+  <EpBadge :iconPath="mdiLockOutline" />
+</div>
+</template>

package/src/components/forms/EpSwitch.vue

@@ -0,0 +1,58 @@
+<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;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "toggle",
+  label: "label",
+  modelValue: "",
+  type: "checkbox",
+  placeholder: "",
+  disabled: false,
+  readonly: false,
+  checked: false,
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", modelValue: string): void;
+}>();
+
+const {
+  id,
+  label,
+  type,
+  modelValue,
+  placeholder,
+  disabled,
+  readonly,
+  checked,
+} = toRefs(props);
+</script>
+
+<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
+    >
+  </div>
+</template>
+
+

package/src/components/forms/EpTextarea.vue

@@ -0,0 +1,79 @@
+<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;
+}
+
+// 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,
+});
+
+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">
+                Message
+            </label>
+        </div>
+    </div>
+</template>

package/src/components/forms/EpToggle.vue

@@ -0,0 +1,97 @@
+<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;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "toggle",
+  label: "label",
+  modelValue: "",
+  type: "checkbox",
+  placeholder: "",
+  disabled: false,
+  readonly: false,
+  checked: false,
+});
+
+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"
+      >Default switch checkbox input</label
+    >
+  </div>
+</template>
+
+

package/src/components/interactions/EpAccordeon.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref, toRefs, onMounted, computed } from "vue";
+import EpIcon from "../basics/EpIcon.vue";
+import useColors from "../../composables/useColors";
+///types with Capital letters... object with styles same name in lowercase
+import { TypeAccordeon, typeAccordeon } from "../../types/Accordeon";
+interface Props {
+  title?: string|null;
+  type?: TypeAccordeon;
+  icon?: string|null;
+  open?: boolean;
+  outlined?:boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'En savoir plus',
+  open: false,
+  type:'base',
+  outlined:false,
+});
+
+
+const showDiv = ref(props.open);
+const collapsible = ref();
+
+const isOutlined = computed(()=>{
+  if(props.outlined){
+    return 'outlined'
+  }
+  return 'default'
+})
+
+const stylesHeader = computed(()=>{
+  return `flex justify-between items-center px-4 py-2 cursor-pointer ${typeAccordeon[props.type]?.[isOutlined.value]}`
+})
+
+const contentStyles = computed(()=>{
+  return `px-4 ${useColors('bg', props.type + 'light')}`
+})
+
+onMounted(() => {
+  var content = collapsible.value
+  if (props.open) {
+    content.style.maxHeight = content.scrollHeight + "px";
+  }
+})
+
+function toggleDivVisibility() {
+  showDiv.value = !showDiv.value;
+  var content = collapsible.value
+  if (content.style.maxHeight) {
+    content.style.maxHeight = null;
+  } else {
+    content.style.maxHeight = content.scrollHeight + "px";
+  }
+  //add transition 
+  if(!content.style.transition){
+    content.style.transition = 'max-height 0.2s ease-out';
+  }
+}
+
+
+const { title, icon } = toRefs(props)
+</script>
+
+<template>
+  <div :class="stylesHeader" @click="toggleDivVisibility">
+    <h3 class="text-lg"><EpIcon v-if="icon" :icon-path="icon"></EpIcon> {{ title }}</h3>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+      :class="`mx-4 my-3 h-6 w-6 transition-all duration-200 ${showDiv ? 'rotate-45' : ''}`">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
+    </svg>
+  </div>
+  <div ref="collapsible" :class="`${contentStyles} content`">
+    <div class="py-4">
+
+      <slot></slot>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  max-height: 0;
+  overflow: hidden;
+}
+</style>

package/src/components/interactions/EpContentSlider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning">
+        <p class="text-center text-error font-bold uppercase">In progress</p>
+   </div>
+  </template>
+
+  
+

package/src/components/interactions/EpModal.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, toRefs } from 'vue';
+import EpCard from '../basics/EpCard.vue'
+
+const size = {
+    compact:"w-[40%]",
+    default:"w-[75%]",
+    comfortable:"w-[85%]"
+}
+
+type Size = keyof typeof size;
+
+interface Props {
+  modelValue?:boolean;
+  title?: string | null;
+  subtitle?: string | null;
+  icon?: string | null;
+  persistent?:boolean;
+  size?:Size;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue:false,
+  title: null,
+  subtitle: null,
+  icon: null,
+  persistent:false,
+  size:"default"
+})
+
+const emit = defineEmits<{
+  (e:"update:modelValue", modelValue:boolean):void
+}>()
+
+
+const closeModal = ():void => {
+    if(!props.persistent){
+      emit('update:modelValue', false)
+    }
+}
+
+const sizeModal = computed(()=>{
+   return size[props.size];
+})
+
+const {title, subtitle, icon} = toRefs(props)
+
+
+
+///const slots = useSlots()  // import useSlots
+//console.log(slots)
+
+</script>
+
+<template> 
+      <Teleport to="body">
+      <Transition name="modal">
+         <div v-if="modelValue" class="modal-mask" @click.self="closeModal">
+            <div :class="`modal-container ${sizeModal}`">
+              <div class="mx-auto">
+               <EpCard :title="title" :subtitle="subtitle" :icon="icon">
+
+                 <slot></slot>
+               </EpCard>
+              </div>
+            </div>
+         </div>
+      </Transition>
+   </Teleport>
+</template>
+
+<style>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  transition: opacity 0.3s ease;
+}
+
+.modal-container {
+  margin: auto;
+  transition: all 0.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 {
+  opacity: 0;
+}
+
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal-container,
+.modal-leave-to .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>

package/src/components/interactions/EpQuestion.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+   <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning">
+        <p class="text-center text-error font-bold uppercase">In progress</p>
+   </div>
+</template>

package/src/components/interactions/EpTabs.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+   
+
+</script>
+
+<template>
+   <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning">
+        <p class="text-center text-error font-bold uppercase">In progress</p>
+   </div>
+</template>