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

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

@@ -0,0 +1,134 @@
+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.",
+    },
+    inputFilled: {
+      control: "boolean",
+      description: "Toggles the alternate Textarea filled design.",
+      defaultValue: false,
+      table: {
+        type: { summary: "Boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+  },
+} 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...",
+  },
+};
+
+export const inputFilled: Story = {
+  args: {
+    label: "Description",
+    modelValue: "",
+    rows: 3,
+    cols: 150,
+    placeholder: "Enter some description here...",
+    inputFilled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Toggles the alternate Textarea Filled design.",
+      },
+    },
+  },
+};
+
+export const inputFilledDisabled: Story = {
+  args: {
+    label: "Description",
+    modelValue: "",
+    rows: 3,
+    cols: 150,
+    placeholder: "Enter some description here...",
+    inputFilled: true,
+    disabled: true,
+  },
+};
+
+export const inputFilledReadonly: Story = {
+  args: {
+    label: "Description",
+    rows: 3,
+    cols: 150,
+    placeholder: "Enter some description here...",
+    inputFilled: true,
+    readonly: true,
+    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.",
+  },
+};
+
+// 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,155 @@
+<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/textArea/EUITextArea.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUITextArea.vue.js","sourceRoot":"","sources":["EUITextArea.vue"],"names":[],"mappings":"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"}

package/src/components/timeLine/EUITimeLine.stories.ts

@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUITimeLine from "./EUITimeLine.vue";
+import { ArrowDownCircleIcon } from "@heroicons/vue/24/solid";
+const meta = {
+  title: "Example/TimeLine",
+  component: EUITimeLine,
+  tags: ["autodocs"],
+  argTypes: {
+    items: {
+      control: "object",
+    },
+    type: {
+      name: "string",
+    },
+  },
+} satisfies Meta<typeof EUITimeLine>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story for EUITextarea
+export const Default: Story = {
+  args: {
+    items: [
+      {
+        id: 1,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 2,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+      {
+        id: 3,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 4,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+      {
+        id: 5,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 6,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+    ],
+    type: "view",
+  },
+  render: (args) => ({
+    components: { EUITimeLine },
+    setup() {
+      return { args };
+    },
+    template: `<div class="max-w-xl"><EUITimeLine v-bind="args" datas="items" type="view"></EUITimeLine></div>`,
+  }),
+};
+
+export const TimeLineIcon: Story = {
+  args: {
+    items: [
+      {
+        id: 1,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 2,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+      {
+        id: 3,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 4,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+      {
+        id: 5,
+        person: { name: "Alex Curren" },
+        date: "2d ago",
+        dateTime: "2023-01-24T09:12",
+      },
+      {
+        id: 6,
+        person: { name: "Alex Curren" },
+        date: "1d ago",
+        dateTime: "2023-01-24T09:20",
+      },
+    ],
+    type: "icon",
+    icon: ArrowDownCircleIcon,
+  },
+  render: (args) => ({
+    components: { EUITimeLine, ArrowDownCircleIcon },
+    setup() {
+      return { args };
+    },
+    template: `<div class="max-w-xl"><EUITimeLine v-bind="args" datas="items" type="icon" timelineIcon="icon">
+              </EUITimeLine></div>`,
+  }),
+};
+
+export const TimeLineImage: Story = {
+  args: {
+    items: [
+      {
+        id: 1,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 2,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 3,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 4,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 5,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+      {
+        id: 6,
+        person: {
+          name: "Chelsea Hagon",
+          imageUrl:
+            "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        },
+        comment:
+          "Called client, they reassured me the invoice would be paid by the 25th.",
+        date: "3d ago",
+        dateTime: "2023-01-23T15:56",
+        showmore: {
+          title: "More Details",
+          content:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+        },
+      },
+    ],
+    type: "image",
+    showMore: true,
+  },
+  render: (args) => ({
+    components: { EUITimeLine, ArrowDownCircleIcon },
+    setup() {
+      return { args };
+    },
+    template: `<div class="max-w-xl"><EUITimeLine v-bind="args" datas="items" type="image" showmore="true">
+              </EUITimeLine></div>`,
+  }),
+};
+
+// export const TimeLineGroup: Story = {
+//   args: {},
+// };