edvoyui-component-library-test-flight 0.0.21 → 0.0.23

package/src/components/input/EUIInput.vue

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div
+      :class="disabled ? 'pointer-events-none cursor-not-allowed' : ''"
+      class="relative w-full mb-2 overflow-hidden border border-gray-100 cursor-pointer group h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600"
+    >
+      <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-0 -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"
+      >
+        {{ label }}
+      </label>
+      <div
+        v-if="icon && iconType"
+        class="absolute inset-y-0 flex items-center pointer-events-none"
+        :class="[
+          iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
+          disabled ? 'cursor-not-allowed' : '',
+        ]"
+      >
+        <component
+          :is="icon"
+          class="w-6 h-6 text-gray-400"
+          aria-hidden="true"
+        />
+      </div>
+
+      <input
+        :id="`${name}-${id}`"
+        ref="input"
+        :type="type"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :name="name"
+        class="z-10 block w-full h-full pt-6 pb-3 text-sm font-medium leading-6 appearance-none rounded-2xl placeholder:text-gray-400 focus:outline-none disabled:opacity-75 focus:border-purple-600 autofill:bg-white"
+        :class="[getIconClass(), disabled ? 'cursor-not-allowed' : '']"
+        :required="required"
+        :disabled="disabled"
+        :readonly="readonly"
+        autocomplete="off"
+        @input="emitInput"
+        @focus="hasFocus = true"
+        @blur="hasFocus = false"
+      />
+    </div>
+    <EUIErrorMessage :errors="errors" :name="name" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
+import {
+  defineProps,
+  defineEmits,
+  computed,
+  PropType,
+  ref,
+  onMounted,
+} from "vue";
+
+const props = defineProps({
+  errors: { type: Object, required: false, default: () => {} },
+  type: {
+    type: String as PropType<
+      "text" | "number" | "email" | "password" | "search" | "date" | "url"
+    >,
+    default: "text",
+  },
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  name: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  label: {
+    type: String,
+    required: true,
+    default: "",
+  },
+  autoFocus: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  iconType: {
+    type: String as PropType<"startIcon" | "endIcon">,
+    default: "",
+  },
+  icon: {
+    type: [Object, String],
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const hasFocus = ref(false);
+const input = ref<HTMLInputElement>();
+
+const id = "id"; //generateUID();
+
+const emit = defineEmits(["update:modelValue"]);
+const emitInput = (event: Event) => {
+  const newValue = (event?.target as HTMLInputElement)?.value;
+  if (newValue !== undefined) {
+    emit("update:modelValue", newValue);
+  }
+};
+
+const inputValue = computed(() => {
+  return props.modelValue === 0 ? true : !!props.modelValue;
+});
+
+const getIconClass = () => {
+  switch (props.iconType) {
+    case "startIcon":
+      return "pl-12 pr-4";
+    case "endIcon":
+      return "pr-12 pl-4";
+    default:
+      return "px-4";
+  }
+};
+
+onMounted(() => {
+  if (props?.autoFocus) {
+    input?.value?.focus();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>

package/src/components/inputNormal/EUIInputNormal.stories.ts

@@ -0,0 +1,164 @@
+import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIInputNormal from "./EUIInputNormal.vue";
+import { UserCircleIcon } from "@heroicons/vue/24/outline";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Forms/InputNormal",
+  component: EUIInputNormal,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      control: "text",
+      description:
+        "The value of the input. This is a two-way binding property, used to reflect the current value of the input 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 input field, usually displayed above or inside the input.",
+    },
+    type: {
+      control: {
+        type: "select",
+        options: [
+          "text",
+          "number",
+          "email",
+          "password",
+          "search",
+          "date",
+          "url",
+        ],
+      },
+      description:
+        "Specifies the type of input, such as `text`, `number`, `email`, etc.",
+    },
+    placeholder: {
+      control: "text",
+      description:
+        "A short hint that describes the expected value when the input is empty.",
+    },
+    autoFocus: {
+      control: "boolean",
+      description:
+        "Automatically focuses the input field when the page loads or the component mounts.",
+    },
+    required: {
+      control: "boolean",
+      description:
+        "Marks the field as required, showing validation for non-empty input.",
+    },
+    readonly: {
+      control: "boolean",
+      description:
+        "Makes the input field read-only, which means users can see the value but cannot edit it.",
+    },
+    disabled: {
+      control: "boolean",
+      description:
+        "Disables the input field, making it uneditable and unclickable.",
+    },
+    iconType: {
+      control: "select",
+      options: ["", "startIcon", "endIcon"],
+      description:
+        "Defines the position of the icon. It can be placed at the `start` or `end` of the input field.",
+    },
+    icon: {
+      control: { type: "text" },
+      description:
+        "Specifies an SVG icon or icon component to be displayed inside the input field.",
+    },
+    errors: {
+      control: "object",
+      description:
+        "An object containing error messages or validation information, typically used for form validation.",
+    },
+    rounded: {
+      control: "boolean",
+      description: "rounded the input field.",
+    },
+    className: {
+      control: "text",
+      description: "Required design to add class",
+    },
+  },
+} satisfies Meta<typeof EUIInputNormal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["text", "number", "email", "password", "search", "date"],
+    },
+  },
+  args: {
+    label: "Username",
+    type: "text",
+    placeholder: "Enter fullname here..",
+  },
+};
+
+export const InputValue: Story = {
+  args: {
+    label: "User Name",
+    type: "text",
+    placeholder: "Enter fullname here..",
+    modelValue: "John Cena",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const inputElement = canvas.getByPlaceholderText("Enter fullname here..");
+    await userEvent.type(inputElement, "Storybook Test");
+    await expect(inputElement).toBe("Storybook Test");
+  },
+};
+
+export const IconUsingStart: Story = {
+  args: {
+    label: "User Name",
+    type: "text",
+    placeholder: "Enter fullname here..",
+    modelValue: "John Cena",
+    disabled: false,
+    iconType: "startIcon",
+    icon: UserCircleIcon,
+  },
+  render: (args) => ({
+    components: { EUIInputNormal },
+    setup() {
+      return { args };
+    },
+    template: '<EUIInputNormal v-bind="args" />',
+  }),
+};
+
+export const IconUsingEnd: Story = {
+  args: {
+    label: "User Name",
+    type: "text",
+    placeholder: "Enter fullname here..",
+    modelValue: "John Cena",
+    disabled: false,
+    iconType: "endIcon",
+    icon: UserCircleIcon,
+  },
+  render: (args) => ({
+    components: { EUIInputNormal },
+    setup() {
+      return { args };
+    },
+    template: '<EUIInputNormal v-bind="args" />',
+  }),
+};

package/src/components/inputNormal/EUIInputNormal.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <label
+        v-if="label"
+        :for="`${name}-${id}`"
+        :class="[
+          'text-sm w-full text-gray-600 cursor-pointer font-medium',
+          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+        ]"
+      >
+        {{ label }}
+      </label>
+    <div
+      :class="disabled || readonly ? 'pointer-events-none cursor-not-allowed' : ''"
+      class="relative w-full overflow-hidden cursor-pointer group"
+    >
+      <div
+        v-if="icon && iconType"
+        class="absolute inset-y-0 flex items-center pointer-events-none"
+        :class="[
+          iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
+          disabled ? 'cursor-not-allowed' : '',
+        ]"
+      >
+        <component
+          :is="icon"
+          class="text-gray-400 size-6"
+          aria-hidden="true"
+        />
+      </div>
+      <input
+        :id="`${name}-${id}`"
+        ref="input"
+        :type="type"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :name="name"
+        :class="['z-10 h-10 w-full  px-4 py-3 placeholder:text-gray-400 focus:outline-none block text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 ring-1 ring-gray-100 focus-within:ring-purple-600 focus-within:ring-2 ring-inset transition-all duration-100 border-none outline-none', rounded ? 'rounded-2xl' : 'rounded-md', getIconClass(), disabled ? 'cursor-not-allowed' : 'cursor-text', className]"
+        :required="required"
+        :disabled="disabled"
+        :readonly="readonly"
+        autocomplete="off"
+        @input="emitInput"
+        @focus="hasFocus = true"
+        @blur="hasFocus = false"
+      />
+    </div>
+    <EUIErrorMessage :errors="errors" :name="name" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
+import {
+  defineProps,
+  defineEmits,
+  PropType,
+  ref,
+  onMounted,
+} from "vue";
+
+const props = defineProps({
+  errors: { type: Object, required: false, default: () => {} },
+  type: {
+    type: String as PropType<
+      "text" | "number" | "email" | "password" | "search" | "date"
+    >,
+    default: "text",
+  },
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  name: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  label: {
+    type: String,
+    required: true,
+    default: "",
+  },
+    placeholder: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  iconType: {
+    type: String as PropType<"startIcon" | "endIcon">,
+    default: "",
+  },
+  icon: {
+    type: [Object, String],
+    default: "",
+  },
+   autoFocus: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  readonly:{
+    type:Boolean,
+    default: false
+  },
+  rounded:Boolean,
+  className: {
+    type: Array as PropType<string[]>,
+    required: false,
+    default: () => [],
+  },
+});
+
+const hasFocus = ref(false);
+const input = ref<HTMLInputElement>();
+const id = "id"; //generateUID();
+
+const emit = defineEmits(["update:modelValue"]);
+const emitInput = (event: Event) => {
+  const newValue = (event?.target as HTMLInputElement)?.value;
+  if (newValue !== undefined) {
+    emit("update:modelValue", newValue);
+  }
+};
+
+const getIconClass = () => {
+  switch (props.iconType) {
+    case "startIcon":
+      return "pl-12 pr-4";
+    case "endIcon":
+      return "pr-12 pl-4";
+  }
+};
+
+onMounted(() => {
+  if (props?.autoFocus) {
+    input?.value?.focus();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>

package/src/components/loader/EUICircleLoader.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="flex flex-col items-center justify-center gap-4 size-72 mx-auto">
+        <div class="min-h-16 relative">
+            <div class="circle-loader">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+.circle-loader {
+    @apply box-border size-16 rounded-full relative transform rotate-45 border-[0.8rem] border-solid border-violet-500/25;
+    &::before {
+        content: "";
+        @apply absolute box-border -inset-3 rounded-full border-[0.8rem] border-solid border-violet-600;
+        animation: circleProgress 2s infinite linear;
+    }
+}
+
+@keyframes circleProgress {
+    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
+    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
+}
+</style>