edvoyui-component-library-test-flight 0.0.168 → 0.0.170

package/src/components/tag/EUITag.vue

@@ -1,88 +0,0 @@
-<template>
-  <div
-    :class="[
-      'inline-flex items-center max-w-xs w-auto',
-       {'pointer-events-none select-none': disabled},
-      tagClass
-    ]"
-  >
-    <div class="text-current truncate cursor-pointer" :class="[props.size === 'lg'? 'text-base font-semibold':'text-sm font-medium']"><slot /></div>
-    <button
-      v-if="closeIcon"
-      type="button"
-      class="relative -mr-1 rounded group hover:bg-red-300/50 active:bg-red-300"
-      :class="[props.size === 'lg' ? 'size-6' : props.size === 'md'? 'size-5' : 'size-3.5']"
-      @click.stop="removeTag"
-    >
-      <span class="sr-only">Remove</span>
-      <svg
-        viewBox="0 0 14 14"
-        class="stroke-gray-400 group-hover:stroke-red-600/75"
-      >
-        <path d="M4 4l6 6m0-6l-6 6" />
-      </svg>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, PropType, reactive, toRefs } from "vue";
-
-const props = defineProps({
-  closeIcon: {
-    type: Boolean,
-    default: false,
-  },
-  errors: { type: Object, required: false, default: () => {} },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-   size: {
-    type: String as PropType<"sm" | "md" | "lg">, //28,40, 48
-    default: "sm",
-  },
-  color: {
-    type: String as PropType<
-      "white" | "secondary" | 'tertiary'>,
-    default: "tertiary",
-  },
-});
-const { closeIcon } = toRefs(props);
-const emit = defineEmits(["remove"]);
-
-const removeTag = () => {
-  emit("remove");
-};
-
-const sizeClasses = reactive({
-  sm: "px-2 py-1 rounded-md gap-x-1", // 32
-  md: "px-4 py-2 rounded-full gap-2", // 40
-  lg: "px-6 py-3 rounded-full gap-2", // 48
-});
-
-const tagClass = computed(() => {
-  const btnDisabled = props.disabled;
-  const btnColor = {
-  white: btnDisabled
-      ? "bg-opacity-80 cursor-not-allowed text-gray-400 bg-gray-200"
-      : "bg-white hover:bg-gray-100 text-black cursor-pointer active:shadow-white/50 active:bg-transparent",
-  secondary: btnDisabled
-      ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-purple-50"
-      : "bg-purple-100 hover:bg-purple-50 active:bg-purple-100 cursor-pointer text-gray-700 active:shadow-purple-200",
-   tertiary: btnDisabled
-      ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-gray-50 ring-1 ring-gray-400/20"
-      : "bg-gray-100 hover:bg-gray-50 active:bg-gray-100 text-gray-700 cursor-pointer active:shadow-bg-gray-200/50 ring-1 ring-gray-200",
-  }
-   const disabledClass =
-    props.disabled === true
-      ? "active:!translate-y-0 active:!scale-100 active:!shadow-none"
-      : "";
-
-  const colorClass = btnColor[props.color] || "";
-  const sizeClass = sizeClasses[props.size] || "";
-  return `${colorClass} ${sizeClass}  ${disabledClass}`;
-})
-</script>
-
-<style scoped></style>

package/src/components/telephone/EUITelephone.vue

@@ -1,299 +0,0 @@
-<template>
-  <div class="relative z-[calc(infinity)]">
-    <label
-        v-if="!inputFilled && label"
-        :class="[
-          'text-xs w-full text-gray-500 cursor-pointer font-medium',
-          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-        ]"> {{ label }} </label>
-
-    <button
-      type="button"
-      :class="[disabled ? 'pointer-events-none cursor-not-allowed bg-gray-50' : 'bg-white', inputFilled ? 'h-14 rounded-2xl' : 'h-10 rounded-md', 'relative w-full mb-2 border border-gray-200 cursor-pointer z-1 group focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600']"
-      @click="focusInput"
-    >
-      <label
-        v-if="inputFilled"
-        :for="`${name}-${id}`"
-        :class="[
-          getIconClass(),
-          inputValue
-            ? 'top-3.5 text-xs text-gray-400 leading-none cursor-default'
-            : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4 bg-white ring-1 ring-gray-200',
-          disabled ? ' cursor-not-allowed' : '',
-          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-        ]"
-        class="absolute font-medium left-0 px-4 z-[1] -translate-y-1/2 duration-200 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 text-start first-letter:capitalize"
-      >
-        {{ label }}
-      </label>
-      <div
-        v-if="icon && iconType"
-        class="absolute inset-y-0 z-10 flex items-center pointer-events-none"
-        :class="[
-          iconType === 'startIcon' ? 'start-0 ps-3' : 'end-0 pe-3',
-          disabled ? 'cursor-not-allowed' : '',
-        ]"
-      >
-        <component
-          :is="icon"
-          class="text-gray-400 size-6"
-          aria-hidden="true"
-        />
-      </div>
-      <vue-tel-input
-        ref="inputRef"
-        v-model.trim="mobile"
-        v-bind="bindProps"
-        :class="[getIconClass()]"
-        @on-input="onInputChanged"
-        @country-changed="onCountryChanged"
-        @blur="$emit('blur')"
-      ></vue-tel-input>
-    </button>
-
-    <div class="errors" v-if="errorMessage">
-      <p class="mt-2 text-xs text-red-500">
-        {{ errorMessage }}
-      </p>
-    </div>
-    <div
-      class="absolute top-0 px-2 text-xs text-white rounded right-2"
-      :class="[
-        { 'bg-gray-400': tagColor === 'None' },
-        { 'bg-green-400': tagColor === 'Success' },
-        { 'bg-red-400': tagColor === 'Error' },
-      ]"
-      v-if="tag"
-    >
-      {{ tag }}
-    </div>
-  </div>
-
-</template>
-<script lang="ts" setup>
-import { computed, onUpdated, PropType, ref, toRefs, watch } from "vue";
-import { VueTelInput, VueTelInputCountryOption } from "vue-tel-input";
-import "vue-tel-input/vue-tel-input.css";
-const emit = defineEmits(["update:modelValue", "blur", "update:isValid"]);
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  name: {
-    type: String,
-    default: "",
-  },
-  label: {
-    type: String,
-    default: "Mobile Number"
-  },
-  placeholder: {
-    type: String,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-  },
-  disabled: {
-    type: Boolean,
-  },
-  autoFocus: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  errors: { type: Object, required: false, default: () => {} },
-  isValid: {
-    type: Boolean,
-    default: false,
-  },
-  tag: {
-    type: String,
-    default: "",
-  },
-  tagColor: {
-    type: String as PropType<"None" | "Success" | "Error">,
-    default: "None",
-  },
-  length: {
-    type: Number,
-    required: false,
-    default: 25,
-  },
-  iconType: {
-    type: String as PropType<"startIcon" | "endIcon">,
-    default: "",
-  },
-  icon: {
-    type: [Object, String],
-    default: "",
-  },
-  inputFilled: {
-    type:Boolean,
-    default: false
-  }
-});
-const { isValid } = toRefs(props);
-
-const generateUID = () => {
-  const data = "euid-" + Math.random().toString(36).substr(2, 9) + "-" + Date.now().toString(36);
-  return data;
-};
-const id = generateUID();
-
-const hasError = computed({
-  set: (value) => {
-    emit("update:isValid", value);
-  },
-  get: () => isValid.value,
-});
-
-const inputValue = computed(() => {
-  return props.modelValue === 0 ? true : !!props.modelValue;
-});
-
-const mobile = ref(props.modelValue);
-const listener = computed(() => props.modelValue);
-watch(listener, (value) => {
-  mobile.value = value;
-});
-
-const updateValue = computed(() => {
-  return {
-    focus: props.autoFocus,
-    place: props.placeholder,
-    disabled: props.disabled,
-    required: props.required,
-    name: props.name,
-    length: props.length,
-    readonly: props.readonly
-  };
-});
-
-const bindProps = {
-  mode: "international",
-  autoFormat: false,
-  autoDefaultCountry: true,
-  styleClasses: "eui-tel",
-  invalidMsg: "Required mobile number",
-  validCharactersOnly: true,
-  preferredCountries: [],
-  disabled: updateValue.value.disabled,
-  inputOptions: {
-    autocomplete: "off",
-    autofocus: updateValue.value.focus,
-    name: updateValue.value.name,
-    id: id,
-    placeholder: updateValue.value.place,
-    maxlength: updateValue.value.length,
-    showDialCode: true,
-    tabindex: 0,
-    readonly: updateValue.value.readonly,
-    required: updateValue.value.required,
-    styleClasses: "eui-tel_input",
-  },
-  dropdownOptions: {
-    disabled: updateValue.value.readonly || updateValue.value.disabled,
-    showFlags: true,
-    showDialCodeInList: true,
-    showSearchBox: true,
-    searchBoxPlaceholder: "Search country...",
-  },
-};
-
-const onInputChanged = (_formattedNumber: string, phoneObject: any) => {
-  hasError.value = phoneObject.valid ? true : false;
-  emit("update:modelValue", phoneObject.number);
-};
-
-const firstTime = ref(true);
-const onCountryChanged = (_event: VueTelInputCountryOption) => {
-  if (!firstTime.value) {
-    emit("update:modelValue", "");
-  }
-};
-
-onUpdated(() => {
-  setTimeout(() => {
-    firstTime.value = false;
-  }, 1500);
-});
-
-const errorMessage = computed(() => {
-  if (Array.isArray(props.errors)) {
-    if (typeof props.errors?.at(0) === "object") {
-      return props.errors?.at(0)?.$message;
-    } else {
-      return props.errors[0];
-    }
-  } else {
-    if (typeof props.errors === "object") {
-      return props.errors?.[props.name];
-    } else {
-      return props.errors;
-    }
-  }
-});
-
-const getIconClass = () => {
-  switch (props.iconType) {
-    case "startIcon":
-      return props.inputFilled ? "pl-12 pr-4" : "normal pl-10 pr-4";
-    case "endIcon":
-     return props.inputFilled ? "pr-12 pl-4" : "normal pr-10 pl-4";
-    default:
-      return props.inputFilled ? "px-4" : "normal px-4";
-  }
-};
-
-const inputRef = ref<HTMLElement | null>(null);
-const focusInput = () => {
-  if (inputRef.value) {
-    inputRef.value?.focus();
-  }
-};
-</script>
-
-<style lang="scss">
-.vue-tel-input.eui-tel {
-  @apply rounded-none border-none focus-within:shadow-none focus-within:border-transparent;
-  .vti__dropdown {
-    @apply mt-4 p-2 ps-0 rounded-2xl hover:bg-transparent open:bg-transparent bg-transparent;
-  }
-  .vti__dropdown-list {
-    @apply rounded-md;
-    .vti__search_box_container {
-      @apply sticky top-0 left-0 p-1 pr-0 bg-white;
-    }
-    .vti__dropdown-item {
-      @apply text-sm text-gray-700 hover:text-gray-900;
-      strong {
-        @apply font-medium;
-      }
-      &.highlighted {
-        @apply bg-gray-100;
-      }
-    }
-  }
-  .vti__search_box {
-    @apply w-[98%] rounded-[4px] placeholder:text-sm;
-  }
-  .eui-tel_input {
-    @apply z-0 h-full w-full pt-6 pb-3 placeholder:text-gray-400 focus:outline-none block text-sm font-medium appearance-none focus:border-purple-600 autofill:bg-white leading-6 disabled:opacity-75 disabled:bg-transparent;
-  }
-}
-
-.vue-tel-input.eui-tel.normal {
-  .vti__dropdown {
-    @apply mt-0 p-2 ps-0 hover:bg-transparent open:bg-transparent bg-transparent;
-  }
-  .eui-tel_input {
-    @apply rounded-md py-2;
-  }
-}
-</style>

package/src/components/textArea/EUITextArea.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="relative">
-    <button
-      v-if="inputFilled"
-      :class="[
-        disabled ? 'pointer-events-none cursor-not-allowed bg-gray-50' : '',
-        'group transition-all duration-100 ease-in-out outline-none border-none z-0 focus:border-purple-600 min-h-[4.5rem] mb-2 relative w-full rounded-md ring-1 ring-gray-200 focus-within:ring-2 focus-within:ring-purple-600 cursor-pointer overflow-hidden;',
-      ]"
-      @click="focusInput"
-    >
-      <label
-        for="text"
-        :class="[
-          inputValue
-            ? 'top-2 text-xs text-gray-400 cursor-default'
-            : 'top-4 text-sm text-gray-700 cursor-pointer pb-2',
-          disabled ? 'cursor-not-allowed bg-gray-50' : 'bg-white',
-          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-          'absolute left-0 z-10 w-full h-auto px-4 font-medium leading-normal text-left transition-all duration-300 ease-in-out transform translate-y-0 group-focus-within:top-2 group-focus-within:bg-transparent group-focus-within:py-0 group-focus-within:h-auto'
-        ]"
-      >
-        {{ label }}
-      </label>
-      <textarea
-        ref="inputRef"
-        :class="['min-h-[4.5rem] max-h-40 appearance-none block w-full px-4 py-2 placeholder:text-gray-400 text-sm font-medium relative z-0 mt-4 bg-transparent border-none focus:outline-none focus:shadow-none focus-within:outline-none focus:border-none disabled:opacity-75 autofill:bg-white leading-6 placeholder:capitalize rounded-2xl' ,{'border-red-500': errors}]"
-        :placeholder="placeholder"
-        v-model="localValue"
-        :disabled="disabled"
-        :readonly="readonly"
-        :autofocus="autoFocus"
-        aria-invalid="true"
-        :rows="rows"
-        :cols="cols"
-        @input="$emit('update:modelValue', localValue)"
-        @blur="$emit('blur')"
-      >
-      </textarea>
-    </button>
-
-    <div v-else>
-      <label
-        v-if="label"
-        :class="['text-xs w-full text-gray-500 cursor-pointer font-medium', required && `after:content-['*'] after:ml-0.5 after:text-red-500`]">
-        {{ label }}
-      </label>
-      <textarea
-        ref="inputRef"
-        :class="['min-h-[4.5rem] max-h-40 appearance-none block w-full px-4 py-2 placeholder:text-gray-400 text-sm font-medium relative z-0 bg-transparent border-gray-200 focus:outline-none focus:shadow-none focus-within:outline-none focus:border-purple-600 disabled:opacity-75 autofill:bg-white leading-6 placeholder:capitalize rounded-md border-solid border focus-within:ring-1 focus-within:ring-purple-600 transition-colors duration-300 ease-in-out',{'border-red-500': errors}]"
-        v-model="localValue"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        :autofocus="autoFocus"
-        aria-invalid="true"
-        :rows="rows"
-        :cols="cols"
-        @input="$emit('update:modelValue', localValue)"
-        @blur="$emit('blur')"
-        >
-      </textarea>
-    </div>
-  </div>
-   <template v-if="errors && Object.keys(errors).length">
-      <EUIErrorMessage :errors="errors" :name="name" />
-    </template>
-</template>
-<script setup lang="ts">
-import { PropType, ref, watch, computed } from "vue";
-import { ValidationErrors } from "../../utils/types";
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
-
-const props = defineProps({
-  errors: {
-    type: Object as PropType<ValidationErrors>,
-    required: false,
-    default: () => {},
-  },
-  modelValue: {
-    type: String as PropType<string>,
-    required: true,
-    default: "",
-  },
-  name: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  label: {
-    type: String as PropType<string>,
-    required: true,
-    default: "",
-  },
-  placeholder: {
-    type: String as PropType<string>,
-    required: true,
-    default: "",
-  },
-  rows: {
-    type: Number as PropType<number>,
-    required: true,
-    default: 5,
-  },
-  cols: {
-    type: Number as PropType<number>,
-    required: true,
-    default: 0,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  autoFocus: {
-    type: Boolean,
-    default: false,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  inputFilled: {
-    type:Boolean,
-    default: false
-  }
-});
-
-const { label, rows, cols, placeholder } = props;
-
-const localValue = ref(props.modelValue);
-const emit = defineEmits(["update:modelValue", "blur"]);
-
-watch(() => props.modelValue, (newVal) => {
-  localValue.value = newVal;
-});
-
-const inputRef = ref<HTMLElement | null>(null);
-const inputValue = computed(() => {
-  return !!localValue.value;
-});
-
-const focusInput = () => {
-  if (inputRef.value) {
-    inputRef.value?.focus();
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-
-</style>

package/src/components/timeLine/EUITimeLine.vue

@@ -1,148 +0,0 @@
-<template>
-  <div>
-    <ul role="list" class="p-4 space-y-6">
-      <li
-        v-for="(item, itemIdx) in items"
-        :data="item"
-        :key="`timeline_${itemIdx}`"
-        class="relative flex gap-x-4 group"
-        :type="type"
-        :timeline-icon="icon"
-        :show-more="showMore"
-      >
-        <div
-          :class="[
-            itemIdx === items.length - 1 ? 'h-6' : '-bottom-6',
-            'absolute left-0 top-0 flex w-6 justify-center',
-          ]"
-        >
-        <slot name="line" :type="type">
-          <div
-            :class="[
-              type === 'icon' ? 'w-0.5 bg-green-500' : 'w-px bg-gray-200',
-            ]"
-          />
-        </slot>
-
-        </div>
-        <template v-if="type === 'image'">
-          <slot name="image" :data="item" :dataIndex="itemIdx">
-            <img
-              :src="item.person?.imageUrl"
-              alt=""
-              class="relative flex-initial flex-shrink-0 rounded-full size-6 bg-gray-50"
-            />
-          </slot>
-          <slot name="details" :data="item" :dataIndex="itemIdx">
-            <div
-              class="flex-1 min-w-0 p-3 rounded-md ring-1 ring-inset ring-gray-200"
-            >
-              <div class="flex justify-between gap-x-4 mb-0.5">
-                <div class="text-xs leading-5 text-gray-500">
-                  <span class="font-medium text-gray-900">{{
-                    item.person?.name
-                  }}</span>
-                </div>
-                <time
-                  :datetime="item.dateTime"
-                  class="flex-none text-xs leading-5 text-gray-500"
-                >
-                  {{ item.date + " " + item.dateTime }}
-                </time>
-              </div>
-              <p class="text-sm leading-6 text-gray-500">
-                {{ item.comment }}
-              </p>
-
-              <details
-                v-if="showMore"
-                :open="itemIdx === 0"
-                class="h-6 p-2 mt-2 text-xs text-gray-500 transition-colors duration-100 ease-in-out select-none open:border open:border-gray-100 open:bg-gray-50 open:rounded-md group open:h-auto"
-              >
-                <summary
-                  class="flex flex-row items-center justify-start text-sm leading-5 text-gray-900 list-none cursor-pointer"
-                >
-                  <slot name="showMoreTitle" :data="item" :open="itemIdx === 0">
-                    {{ item.showmore?.title || "More Details" }}
-                    <PlusIcon
-                      class="ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:hidden"
-                    />
-                    <MinusIcon
-                      class="hidden ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:inline-block"
-                    />
-                  </slot>
-                </summary>
-                <slot name="showMoreContent" :data="item">
-                  <div>{{ item.showmore?.content }}</div>
-                </slot>
-              </details>
-            </div>
-          </slot>
-        </template>
-        <template v-else>
-          <div
-            class="relative flex items-center justify-center flex-none bg-white size-6"
-          >
-            <component
-              v-if="type === 'icon'"
-              :is="icon || CheckCircleIcon"
-              class="text-green-500 size-6"
-              aria-hidden="true"
-            />
-            <div
-              v-else
-              class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300 group-hover:bg-purple-200 group-hover:ring-purple-500"
-            />
-          </div>
-          <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
-            <span class="font-medium text-gray-900">{{
-              item.person?.name
-            }}</span>
-            {{ item?.comment }}
-          </p>
-          <time
-            :datetime="item.dateTime"
-            class="flex-none py-0.5 text-xs leading-5 text-gray-500"
-            >{{ item.date + " " + item.dateTime }}</time
-          >
-        </template>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, toRefs } from "vue";
-import { MinusIcon, PlusIcon } from "@heroicons/vue/24/outline";
-import { CheckCircleIcon } from "@heroicons/vue/24/solid";
-
-interface ITimeLine {
-  id: number | string;
-  person: any;
-  comment?: string;
-  date?: string;
-  dateTime?: string;
-  showmore?: any;
-}
-
-const props = defineProps({
-  items: {
-    type: Array<ITimeLine>,
-    default: [],
-  },
-  type: {
-    type: String as PropType<"view" | "icon" | "image">,
-    default: "",
-  },
-  icon: {
-    type: [String, Object],
-    default: "",
-  },
-  showMore: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const { items, type, icon, showMore } = toRefs(props);
-</script>