ep-lib-ts 0.0.8 → 0.0.9

package/src/components/educationals/EpReading.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { toRefs, computed } from "vue";
+import EpIcon from "../basics/EpIcon.vue";
+import EpBtn from "../basics/EpBtn.vue";
+import DisplayBox from "../tools/DisplayBox.vue";
+import EpEdu from "./EpEdu.vue";
+import { MediaVariants } from "../../types/Medias";
+import { useRenderText } from "../../composables/useRenderText";
+import { mdiBookmarkBox } from "@mdi/js";
+import { mdiBookOpenVariant } from "@mdi/js";
+import { mdiBookOpenPageVariant } from "@mdi/js";
+import { mdiOpenInNew } from "@mdi/js";
+
+interface Props {
+  url?: string;
+  year?: string;
+  author?: string;
+  cover?: string;
+  title: string | null;
+  container?: string; /// is publication complete
+  editor?: string;
+  pages?: string;
+  mandateLevel?: string;
+  intentions?: string;
+  compact?: boolean;
+  more?: boolean;
+  version_link?: null;
+  hideCover?: boolean;
+  labelcard?: string;
+  labelBtb?: string;
+  labelIntentions?: string;
+  type?:MediaVariants;
+  hideIcon?:boolean;
+}
+
+// type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
+
+const props = withDefaults(defineProps<Props>(), {
+  title: null,
+  cover: "",
+  icon: "mdiBookmarkBox",
+  hideCover: false,
+  labelcard: "lecture",
+  labelBtb: "lire",
+  labelIntentions: "Intentions de lecture",
+  intentions: "",
+  compact: false,
+  type:"base",
+  hideIcon:false
+});
+
+const old_image = "https://live.staticflickr.com/4868/45940268562_c5f7fdd06b_q.jpg";
+
+const hasCover = computed(() => {
+  if (props.cover === old_image || props.cover.trim().length === 0) {
+    return false;
+  }
+  return true;
+});
+
+const hasDetails = computed(() => {
+  if (props.author || props.editor || props.container || props.year) {
+    return true;
+  }
+  return false;
+});
+
+const {
+  title,
+  intentions,
+  cover,
+  hideCover,
+  labelcard,
+  year,
+  author,
+  container,
+  editor,
+  pages,
+  type,
+  mandateLevel
+} = toRefs(props);
+</script>
+
+<template>
+  <div class="flex rounded-lg overflow-hidden bg-white md:flex-row" v-if="!compact">
+    <template v-if="!hideCover">
+      <div
+        v-if="hasCover"
+        class="bg-primary h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
+      >
+        <img :src="cover" :alt="`image de la lecture ${title}`" />
+      </div>
+
+      <div
+        v-else
+        class="h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
+      >
+        <EpIcon :icon-path="mdiBookOpenPageVariant" size="95"></EpIcon>
+      </div>
+    </template>
+    <div class="flex flex-col w-full">
+      <EpEdu :title="labelcard" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
+        <template #intentions v-if="useRenderText(intentions)">
+          <div v-html="useRenderText(intentions)"></div>
+        </template>
+        <template #content>
+          <div class="w-full">
+            <h4 :class="`text-xl font-semibold ${hasDetails || pages ? 'border-b' : ''}`">
+              {{ title }}
+            </h4>
+            <div class="flex">
+              <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 v-if="year">({{ year }})</span>
+                  <span v-if="year && editor">, </span>
+                  <span v-if="editor">{{ editor }}</span>
+                </p>
+                <p v-if="container">
+                  <span class="text-sm italic pr-1">dans</span>
+                  <span class="">{{ container }}</span>
+                </p>
+              </div>
+              <div
+                :class="`flex-1 pt-2 pb-2 ${hasDetails ? 'border-l pl-2' : ''}`"
+                v-if="pages"
+              >
+                <EpIcon :size="24" :icon-path="mdiBookmarkBox"></EpIcon>
+                <span class="pl-2 align-middle">{{ pages }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template #actions>
+          <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">LIRE</EpBtn>
+        </template>
+      </EpEdu>
+    </div>
+  </div>
+  <!--compact mode-->
+  <EpEdu :title="labelcard" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" v-else>
+    <template #intentions v-if="useRenderText(intentions)">
+      <div v-html="useRenderText(intentions)"></div>
+    </template>
+    <template #content>
+      <div class="flex flex-row justify-between">
+        <div class="p-5">
+          <span
+            class="text-lg leading-6 font-semibold font-sans text-skin-inverted group-hover:text-skin-primary"
+            >{{ title }}</span
+          >
+        </div>
+        <div class="flex">
+          <div class="p-5">
+            <DisplayBox>
+              <template #default="{ open }">
+                <EpBtn text @click.stop="open"> détails </EpBtn>
+              </template>
+              <template #menu="{ close }">
+                <div class="w-[32rem]">
+                  <div class="flex flex-col rounded-lg bg-white md:flex-row">
+                    <template v-if="!hideCover">
+                      <img
+                        v-if="hasCover"
+                        class="object-cover h-96 w-full rounded-t-lg object-cover md:h-auto md:w-56 md:rounded-none md:rounded-l-lg"
+                        :src="cover"
+                        :alt="`image de la lecture ${title}`"
+                      />
+                      <div
+                        v-else
+                        class="h-96 border-l border-t border-b w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
+                      >
+                        <EpIcon :icon-path="mdiBookOpenPageVariant" size="95"></EpIcon>
+                      </div>
+                    </template>
+                    <div class="flex flex-col justify-between w-full">
+                      <div class="bg-neutral-100 text-left px-5 py-2">
+                        <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon>
+                        <span class="pl-2 align-middle">Lecture</span>
+                      </div>
+                      <div class="w-full px-5">
+                        <h4
+                          :class="`text-xl font-semibold py-4 ${
+                            hasDetails || pages ? 'border-b' : ''
+                          }`"
+                        >
+                          {{ title }}
+                        </h4>
+                        <div class="flex">
+                          <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 v-if="year">({{ year }})</span>
+                              <span v-if="year && editor">, </span>
+                              <span v-if="editor">{{ editor }}</span>
+                            </p>
+                            <p v-if="container">
+                              <span class="text-sm italic pr-1">dans</span>
+                              <span class="">{{ container }}</span>
+                            </p>
+                          </div>
+                          <div
+                            :class="`flex-1 pt-2 pb-2 ${
+                              hasDetails ? 'border-l pl-2' : ''
+                            }`"
+                            v-if="pages"
+                          >
+                            <EpIcon :size="24" :icon-path="mdiBookmarkBox"></EpIcon>
+                            <span class="pl-2 align-middle">{{ pages }}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="bg-neutral-100 text-right pr-5">
+                        <EpBtn text @click.stop="close"> Fermer </EpBtn>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </DisplayBox>
+          </div>
+
+          <div class="border-l p-5">
+            <EpBtn text>
+              <EpIcon :size="20" :icon-path="mdiOpenInNew"></EpIcon> Lire
+            </EpBtn>
+          </div>
+        </div>
+      </div>
+    </template>
+  </EpEdu>
+</template>

package/src/components/educationals/EpScope.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { toRefs } from "vue";
+//types with capital letter, object styles in lowercase
+import EpChip from "../basics/EpChip.vue";
+
+interface Props {
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Essentiel", //[Enrichissement]
+  type: "base",
+});
+
+
+
+//controls
+//const controls = useMediaControls(video, {src:props.src})
+
+const { title } = toRefs(props);
+</script>
+
+<template>
+    <EpChip size="small" type="base">{{ title }}</EpChip>
+</template>

package/src/components/forms/EpCheckbox.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import {toRefs } from "vue";
+const name: string = "checkbox";
+interface Props {
+  id?: string;
+  label?: string;
+  modelValue?: string;
+  type?: "checkbox" | "radio";
+  disabled?: boolean;
+  readonly?: boolean;
+  checked?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "0",
+  label: "check",
+  modelValue: "",
+  type: "checkbox",
+  disabled: false,
+  readonly: false,
+  checked: false,
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", modelValue: string): void;
+}>();
+
+const { id, label, type, modelValue, disabled, readonly, checked } =
+  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>
+</template>

package/src/components/forms/EpInput.vue

@@ -0,0 +1,178 @@
+<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

@@ -0,0 +1,72 @@
+<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?: 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>
+  
+    <input
+      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">{{
+      label
+    }}</label>
+    
+  </span>
+</template>