edvoyui-component-library-test-flight 0.0.22 → 0.0.24

package/src/components/telephone/EUITelephone.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="relative z-0">
+    <button
+      type="button"
+      :class="disabled ? 'pointer-events-none cursor-not-allowed' : ''"
+      class="relative w-full mb-2 bg-white border border-gray-100 cursor-pointer z-1 group h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600"
+      @click="focusInput"
+    >
+      <label
+        :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="w-6 h-6 text-gray-400"
+          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>
+     <EUIErrorMessage :errors="errors" :name="name" />
+    <div class="errors" v-if="errorMessage">
+      <p class="mt-2 text-xs text-red-600">
+        {{ 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";
+import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
+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: "",
+  },
+});
+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: false,
+    showFlags: true,
+    showDialCodeInList: true,
+    showSearchBox: true,
+    searchBoxPlaceholder: "Search country...",
+  },
+};
+
+const onInputChanged = (_formattedNumber: string, phoneObject: any) => {
+  console.log(phoneObject.number); // Debugging
+  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 "pl-12 pr-4";
+    case "endIcon":
+      return "pr-12 pl-4";
+    default:
+      return "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 rounded-2xl pt-6 pb-3 placeholder:text-gray-400 focus:outline-none block text-sm font-medium appearance-none disabled:opacity-75 focus:border-purple-600 autofill:bg-white leading-6;
+  }
+}
+</style>

package/src/components/textArea/EUITextArea.stories.ts

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUITextarea from "./EUITextArea.vue"; // Adjust the path if necessary
+
+const meta = {
+  title: "Forms/Textarea",
+  component: EUITextarea,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      control: "text",
+      description: "Two-way binding value for the textarea field.",
+    },
+    name: {
+      control: "text",
+      description:
+        "The `name` attribute of the input, typically used for form identification and validation.",
+    },
+    label: {
+      control: "text",
+      description:
+        "The label for the textarea field, usually displayed above or inside the textarea.",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text for the textarea.",
+    },
+    rows: {
+      control: { type: "number", min: 1 },
+      description: "The number of rows for the textarea.",
+    },
+    cols: {
+      control: { type: "number", min: 1 },
+      description: "The number of columns for the textarea.",
+    },
+    errors: {
+      control: "object",
+      description:
+        "Validation errors object, with field names as keys and error messages as values.",
+    },
+  },
+} satisfies Meta<typeof EUITextarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story for EUITextarea
+export const Default: Story = {
+  args: {
+    label: "Description",
+    modelValue: "",
+    rows: 3,
+    cols: 150,
+    placeholder: "Enter some description here...",
+  },
+};
+
+// Story to demonstrate textarea with an error message
+export const WithError: Story = {
+  args: {
+    label: "Description",
+    modelValue: "",
+    rows: 3,
+    cols: 150,
+    placeholder: "Enter your comments...",
+    errors: {
+      message: "This description field is required.",
+    },
+  },
+};
+
+// Story to demonstrate a pre-filled textarea
+export const PrefilledTextarea: Story = {
+  args: {
+    label: "Description",
+    name: "messageDesc",
+    modelValue:
+      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum porro quia hic sed voluptatem, laudantium dignissimos sequi illo quasi error maxime vel nam deleniti adipisci itaque.",
+    rows: 3,
+    cols: 150,
+    placeholder: "Enter some text...",
+  },
+};

package/src/components/textArea/EUITextArea.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="relative">
+    <button
+      :class="[
+        disabled ? 'pointer-events-none cursor-not-allowed' : '',
+        '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' : '',
+          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+        ]"
+        class="absolute left-0 z-10 w-full h-auto px-4 font-medium leading-normal text-left transition-all duration-100 ease-in-out transform translate-y-0 bg-white group-focus-within:top-2 group-focus-within:py-0"
+      >
+        {{ label }}
+      </label>
+      <textarea
+        ref="inputRef"
+        :class="[errors ? 'border-red-500' : '']"
+        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"
+        :placeholder="placeholder"
+        v-model="localValue"
+        :disabled="disabled"
+        :autofocus="autoFocus"
+        aria-invalid="true"
+        :rows="rows"
+        :cols="cols"
+        @input="$emit('update:modelValue', localValue)"
+        @blur="$emit('blur')"
+      >
+      </textarea>
+    </button>
+
+  </div>
+  <EUIErrorMessage :errors="errors" :name="name" />
+</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,
+  },
+});
+
+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>