edvoyui-component-library-test-flight 0.0.42 → 0.0.44

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.42",
+  "version": "0.0.44",
   "type": "module",
   "files": [
     "dist/",

package/src/components/HelloWorld.vue

@@ -1,28 +1,25 @@
 <template>
-  <h1 class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-2 decoration-green-400 decoration-wavy">
+  <h1 class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-8 decoration-green-400 decoration-wavy">
     Edvoy User Interface
   </h1>
-
-  <UTableview />
 </template>
 <script setup lang="ts">
-import UTableview from './table/UTableview.vue';
-
-
 </script>
 <style lang="scss"></style>
 
 <!-- Development code here -->
-<!-- <template>
+<!--  <template>
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
+    <Delete />
+    <UTableview />
     <div class="">
        <pre class="text-[0.5rem] p-2 rounded-lg max-h-72 overflow-y-auto text-red-600 border border-gray-100">
         {{ `Total Row:${selectedRows.length}` }}
         {{ selectedRows.map(x => x?._id)}}
       </pre>
 
-            <div class="py-4">
+      <div class="py-4">
       <EUITable
         :checkable="true"
         :table-loading="loading"
@@ -59,7 +56,6 @@ import UTableview from './table/UTableview.vue';
       </EUITable>
     </div>
     </div>
-    <Delete />
     <div class="grid gap-4 sm:grid-cols-2 place-items-start">
       <div
         class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
@@ -947,6 +943,8 @@ import { capitalizeText } from "../utils/lodash";
 import ChevronDownStroke from '../assets/svg/ChevronDownStroke.vue';
 import EUIMultiDropdown from './dropdown/EUIMultiDropdown.vue';
 import Delete from "./delete.vue";
+import UTableview from './table/UTableview.vue';
+
 const mobileNumber = ref("+91 8667444951");
 const datepicker = ref(new Date());
 const loading = ref(false)

package/src/components/datepicker/EUIDatepicker.stories.ts

@@ -52,6 +52,24 @@ const meta = {
       control: "boolean",
       description: "Allows time selection in addition to the date if true.",
     },
+    maxDate: {
+      control: "date",
+      description:
+        "The maximum selectable date. ex: const maxDate = ref(new Date())",
+      table: {
+        type: { summary: "Date" },
+        defaultValue: { summary: '""' },
+      },
+    },
+    minDate: {
+      control: "date",
+      description:
+        "The minimum selectable date. ex: const minDate = ref(new Date(2024, 11))",
+      table: {
+        type: { summary: "Date" },
+        defaultValue: { summary: '""' },
+      },
+    },
     required: {
       control: "boolean",
       description: "Marks the datepicker as a required field.",
@@ -438,6 +456,24 @@ export const DatepickerDiasabled: Story = {
   }),
 };
 
+export const DatepickerMinMax: Story = {
+  args: {
+    placeholder: "Select your date",
+    modelValue: new Date(),
+    minDate: ref(new Date(2024, 11)),
+    maxDate: ref(new Date()),
+    inputFilled: true,
+  },
+  render: (args) => ({
+    components: { EUIDatepicker },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return { args, modelValue };
+    },
+    template: `<div class="max-w-sm"><EUIDatepicker v-bind="args" /></div>`,
+  }),
+};
+
 export const DatepickerReadonly: Story = {
   args: {
     placeholder: "Select your date",

package/src/components/datepicker/EUIDatepicker.vue

@@ -65,6 +65,8 @@
       :hide-input-icon="true"
       position="left"
       :multi-calendars="multiCalendars"
+      :min-date="minDate"
+      :max-date="maxDate"
       />
     </div>
     <EUIErrorMessage :errors="errors" :name="name" />
@@ -81,7 +83,15 @@ const props = defineProps({
     type: Date as any,
     default: "",
   },
-   name: {
+  maxDate: {
+    type: Date as any,
+    default: "",
+  },
+  minDate: {
+    type: Date as any,
+    default: "",
+  },
+  name: {
     type: String,
     required: false,
     default: "date-picker",

package/src/components/delete.vue

@@ -4,7 +4,6 @@
       class="flex flex-row items-center justify-end max-w-screen-xl gap-6 mx-auto mb-10"
     >
       <EUISearch />
-
       <div>
         <EUITooltip placement="top">
           <template v-slot:default>
@@ -18,11 +17,21 @@
         </EUITooltip>
       </div>
     </div>
-
-
     <div class="grid max-w-3xl gap-4 mx-auto mb-6 sm:grid-cols-3">
-
-        <div>
+      <div>
+      <EUIDatepicker
+        v-model:modelValue="datepickerRange"
+        label="Date Min and max"
+        placeholder="Select Date here..."
+        :range="true"
+        required
+        :icon="CalendarIcon"
+        iconType="startIcon"
+        :min-date="minDate"
+        :max-date="maxDate"
+      />
+    </div>
+    <div>
       <EUIDatepicker
         v-model:modelValue="datepickerRange"
         label="Datepicker Range multi"
@@ -35,7 +44,6 @@
       />
       <EUIButton @click="resetFilter">Reset</EUIButton>
     </div>
-
     <div>
       <EUIDatepicker
         v-model:modelValue="datepickerRange"
@@ -47,7 +55,6 @@
         iconType="startIcon"
       />
     </div>
-
     <div>
       <EUIDatepicker
         :disabled="false"
@@ -60,7 +67,6 @@
         iconType="endIcon"
       />
     </div>
-
     <div>
       <EUIDatepicker
         v-model:modelValue="timepicker"
@@ -73,8 +79,6 @@
       />
     </div>
   </div>
-
-
     <div class="grid max-w-3xl gap-4 mx-auto mb-6 sm:grid-cols-3">
     <div>
       <EUIDatepicker
@@ -221,6 +225,9 @@ const onSort = (field: string, order: string) => {
 const resetFilter = () => {
   datepickerRange.value  = []
 }
+
+const minDate = ref(new Date(2024, 11));
+const maxDate = ref(new Date());
 </script>
 
 <style scoped></style> -->

package/src/components/tag/EUITag.stories.ts

@@ -9,19 +9,20 @@ const meta = {
   tags: ["autodocs"],
   argTypes: {
     closeIcon: {
-      control: "boolean",
+      description:
+        "Displays a close (remove) button if true. <mark>@remove</mark>  remove: Event emitted when the close button is clicked. A customizable tag component with an optional close button. It can be disabled or interactive.",
+      control: { type: "boolean" },
+      defaultValue: false,
     },
     disabled: {
-      control: "boolean",
-    },
-    modelValue: {
-      control: "boolean",
+      description: "Disables the tag, making it non-interactive.",
+      control: { type: "boolean" },
+      defaultValue: false,
     },
     errors: {
-      control: "object",
-    },
-    name: {
-      control: "text",
+      description: "Object containing error information.",
+      control: { type: "object" },
+      defaultValue: {},
     },
   },
 } satisfies Meta<typeof EUITag>;
@@ -32,7 +33,6 @@ type Story = StoryObj<typeof meta>;
 // Default story with minimum props
 export const Default: Story = {
   args: {
-    modelValue: false,
     disabled: false,
     closeIcon: true,
   },
@@ -41,6 +41,13 @@ export const Default: Story = {
     setup() {
       return { args };
     },
-    template: `<EUITag v-bind="args">Name</EUITag>`,
+    template: `<EUITag v-bind="args" @remove="args.remove">Name</EUITag>`,
   }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template><EUITag @remove="remove">Name</EUITag></template>`,
+      },
+    },
+  },
 };

package/src/components/tag/EUITag.vue

@@ -1,9 +1,22 @@
 <template>
-  <div class="inline-flex items-center gap-x-1 rounded-md bg-gray-50 px-2 py-1 text-sm font-medium text-gray-600 ring-1 ring-inset ring-gray-400/10">
-    <slot />
-    <button v-if="closeIcon" type="button" class="relative -mr-1 size-3.5 group rounded hover:bg-red-300/50 active:bg-red-300" @click.stop.prevent="removeTag">
+  <div
+    :class="[
+      'inline-flex items-center px-2 py-1 rounded-md gap-x-1 bg-gray-50 ring-1 ring-inset ring-gray-400/10 max-w-xs w-auto',
+       {'pointer-events-none select-none cursor-none': disabled}
+    ]"
+  >
+    <div class="text-sm font-medium text-gray-600 truncate cursor-pointer"><slot /></div>
+    <button
+      v-if="closeIcon"
+      type="button"
+      class="relative -mr-1 size-3.5 group rounded hover:bg-red-300/50 active:bg-red-300"
+      @click.stop="removeTag"
+    >
       <span class="sr-only">Remove</span>
-      <svg viewBox="0 0 14 14" class="size-3.5 stroke-gray-400 group-hover:stroke-red-600/75">
+      <svg
+        viewBox="0 0 14 14"
+        class="size-3.5 stroke-gray-400 group-hover:stroke-red-600/75"
+      >
         <path d="M4 4l6 6m0-6l-6 6" />
       </svg>
     </button>
@@ -11,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from "vue";
+import { toRefs } from "vue";
 
 const props = defineProps({
   closeIcon: {
@@ -19,27 +32,16 @@ const props = defineProps({
     default: false,
   },
   errors: { type: Object, required: false, default: () => {} },
-  name: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  modelValue: {
-    type: Boolean as PropType<boolean>,
-    required: true,
-    default: false,
-  },
   disabled: {
     type: Boolean,
     default: false,
   },
 });
 const { closeIcon } = toRefs(props);
-const emit = defineEmits(["remove", "update:modelValue"]);
+const emit = defineEmits(["remove"]);
 
-const removeTag = (e: Event) => {
-  emit("remove", e);
-  emit("update:modelValue", false);
+const removeTag = () => {
+  emit("remove");
 };
 </script>