edvoyui-component-library-test-flight 0.0.181 → 0.0.183

package/dist/modal/EUIModal.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=script&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=e1811799&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=df346633&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIModal.vue.d.ts.map

package/dist/modal/EUIModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AA+F1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}
+{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AAiG1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.181",
+  "version": "0.0.183",
   "type": "module",
   "files": [
     "dist/",
@@ -15,7 +15,8 @@
   "exports": {
     ".": {
       "import": "./dist/edvoy-ui.es.js",
-      "require": "./dist/edvoy-ui.umd.js"
+      "require": "./dist/edvoy-ui.umd.js",
+      "types": "./dist/types/index.d.ts"
     },
     "./style": "./dist/edvoy-ui.css",
     "./dist/edvoy-ui.css": "./dist/edvoy-ui.css"

package/src/components/index.ts

@@ -8,7 +8,6 @@ export { default as EUITextArea } from "./textArea/EUITextArea.vue";
 export { default as EUINumberInput } from "./input/EUINumberInput.vue";
 
 export { default as EUISelect } from "./select/EUISelect.vue";
-export { default as EUISelectSearch } from "./selectSearch/EUISelectSearch.vue";
 export { default as EUICheckbox } from "./checkbox/EUICheckbox.vue";
 export { default as EUIRadio } from "./radio/EUIRadio.vue";
 export { default as EUIToggle } from "./toggle/EUIToggle.vue";

package/src/components/modal/EUIModal.vue

@@ -1,102 +1,106 @@
 <template>
-  <Teleport defer to="body">
-    <Transition name="modal" appear>
-      <div
-        v-if="isVisible"
-        class="fixed z-50 flex flex-col items-center justify-end inset-2 modal-wrapper"
-        :class="[
-          placement === 'top'
-            ? 'sm:justify-start'
-            : placement === 'bottom'
-            ? 'sm:justify-end'
-            : 'sm:justify-center',
-        ]"
-        @click.self="closeModal"
-      >
-        <div
-          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-none overflow-hidden cursor-auto backdrop-blur-sm"
-        ></div>
+  <div>
+    <Teleport defer to="body">
+      <Transition name="modal" appear>
         <div
+          v-if="isVisible"
+          class="fixed z-50 flex flex-col items-center justify-end inset-2 modal-wrapper"
           :class="[
-            'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between modal-container',
-            slideClass,
-            roundedClass !== '' ? roundedClass : 'rounded-t-3xl md:rounded-2xl',
-            size === 'full'
-              ? 'h-full max-h-svh'
-              : 'max-h-[calc(100vh-3rem)] md:h-auto',
+            placement === 'top'
+              ? 'sm:justify-start'
+              : placement === 'bottom'
+              ? 'sm:justify-end'
+              : 'sm:justify-center',
           ]"
+          @click.self="closeModal"
         >
-          <template v-if="$slots.header">
-            <slot name="header"></slot>
-          </template>
           <div
-            v-else
-            class="flex flex-row items-center justify-between font-medium text-gray-700"
-            :class="slimHeader ? 'p-4 text-base' : 'p-6 text-lg'"
+            class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-none overflow-hidden cursor-auto backdrop-blur-sm"
+          ></div>
+          <div
+            :class="[
+              'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between modal-container',
+              slideClass,
+              roundedClass !== ''
+                ? roundedClass
+                : 'rounded-t-3xl md:rounded-2xl',
+              size === 'full'
+                ? 'h-full max-h-svh'
+                : 'max-h-[calc(100vh-3rem)] md:h-auto',
+            ]"
           >
-            <h3 class="text-xl font-semibold">
-              <slot name="title">{{ title || "Modal Title" }}</slot>
-            </h3>
-            <div v-if="visibleClose" class="flex-initial">
-              <button
-                type="button"
-                class="flex items-center justify-center text-gray-400 bg-white hover:bg-gray-50 rounded-3xl hover:text-gray-600 size-8"
-                @click="closeModal"
-              >
-                <span class="sr-only">Close</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                  class="w-5 h-5"
+            <template v-if="$slots.header">
+              <slot name="header"></slot>
+            </template>
+            <div
+              v-else
+              class="flex flex-row items-center justify-between font-medium text-gray-700"
+              :class="slimHeader ? 'p-4 text-base' : 'p-6 text-lg'"
+            >
+              <h3 class="text-xl font-semibold">
+                <slot name="title">{{ title || "Modal Title" }}</slot>
+              </h3>
+              <div v-if="visibleClose" class="flex-initial">
+                <button
+                  type="button"
+                  class="flex items-center justify-center text-gray-400 bg-white hover:bg-gray-50 rounded-3xl hover:text-gray-600 size-8"
+                  @click="closeModal"
                 >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M6 18L18 6M6 6l12 12"
-                  ></path>
-                </svg>
-              </button>
+                  <span class="sr-only">Close</span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                    class="w-5 h-5"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M6 18L18 6M6 6l12 12"
+                    ></path>
+                  </svg>
+                </button>
+              </div>
             </div>
-          </div>
-
-          <template v-if="$slots.content">
-            <slot name="content"></slot>
-          </template>
-          <div
-            v-else
-            class="p-4 border-t border-b border-gray-200 max-h-[calc(100vh-3rem)] flex-1"
-          >
-            <slot></slot>
-          </div>
 
-          <template v-if="$slots.footer">
-            <slot name="footer"></slot>
-          </template>
-          <div
-            v-else
-            class="sticky bottom-0 flex items-center justify-end float-none p-4 space-x-2"
-          >
-            <button
-              @click="closeModal"
-              class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
+            <template v-if="$slots.content">
+              <slot name="content"></slot>
+            </template>
+            <div
+              v-else
+              class="p-4 border-t border-b border-gray-200 max-h-[calc(100vh-3rem)] flex-1"
             >
-              Cancel
-            </button>
-            <button
-              @click="$emit('confirm')"
-              class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
+              <slot></slot>
+            </div>
+
+            <template v-if="$slots.footer">
+              <slot name="footer"></slot>
+            </template>
+            <div
+              v-else
+              class="sticky bottom-0 flex items-center justify-end float-none p-4 space-x-2"
             >
-              Confirm
-            </button>
+              <button
+                @click="closeModal"
+                class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
+              >
+                Cancel
+              </button>
+              <button
+                @click="$emit('confirm')"
+                class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
+              >
+                Confirm
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-    </Transition>
-  </Teleport>
+      </Transition>
+    </Teleport>
+  </div>
 </template>
 
 <script lang="ts">

package/src/components/searchTagSelect/EUISearchTagSelect.stories.ts

@@ -0,0 +1,217 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUISearchTagSelect from "./EUISearchTagSelect.vue";
+
+const meta = {
+  title: "Forms/SearchTagSelect",
+  component: EUISearchTagSelect,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      control: "object",
+      description: "The currently selected values (array of items).",
+    },
+    items: {
+      control: "object",
+      description:
+        "Array of available options. Each should have value, label, and name properties.",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text for the search input.",
+    },
+    label: {
+      control: "text",
+      description: "Label for the search tag select field.",
+    },
+    name: {
+      control: "text",
+      description: "Name attribute of the input field.",
+    },
+    selectType: {
+      control: "select",
+      options: ["single", "multiple"],
+      description: "Whether to allow single or multiple selections.",
+      defaultValue: "multiple",
+    },
+    errors: {
+      control: "object",
+      description: "Validation error messages object.",
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the field is required.",
+      defaultValue: false,
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the input is disabled.",
+      defaultValue: false,
+    },
+    searchable: {
+      control: "boolean",
+      description: "Enable search functionality.",
+      defaultValue: true,
+    },
+    clearable: {
+      control: "boolean",
+      description: "Show clear button to remove all selections.",
+      defaultValue: true,
+    },
+  },
+} satisfies Meta<typeof EUISearchTagSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story - Multiple Select
+export const Default: Story = {
+  args: {
+    name: "tags",
+    label: "Select Tags",
+    placeholder: "Search and select tags...",
+    selectType: "multiple",
+    items: [
+      { value: "react", label: "React", name: "React" },
+      { value: "vue", label: "Vue", name: "Vue" },
+      { value: "angular", label: "Angular", name: "Angular" },
+      { value: "svelte", label: "Svelte", name: "Svelte" },
+      { value: "next", label: "Next.js", name: "Next.js" },
+    ],
+    modelValue: [{ value: "react", label: "React", name: "React" }],
+    errors: {},
+    required: false,
+    disabled: false,
+    searchable: true,
+    clearable: true,
+  },
+  render: (args) => ({
+    components: { EUISearchTagSelect },
+    setup() {
+      return { args };
+    },
+    template:
+      '<div class="max-w-md"><EUISearchTagSelect v-bind="args" /></div>',
+  }),
+};
+
+// Single Select Mode
+export const SingleSelect: Story = {
+  args: {
+    name: "framework",
+    label: "Select Framework",
+    placeholder: "Choose one framework...",
+    selectType: "single",
+    items: [
+      { value: "react", label: "React", name: "React" },
+      { value: "vue", label: "Vue", name: "Vue" },
+      { value: "angular", label: "Angular", name: "Angular" },
+      { value: "svelte", label: "Svelte", name: "Svelte" },
+    ],
+    modelValue: [],
+    errors: {},
+    required: true,
+    disabled: false,
+    searchable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Single select mode allows selecting only one item.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { EUISearchTagSelect },
+    setup() {
+      return { args };
+    },
+    template:
+      '<div class="max-w-md"><EUISearchTagSelect v-bind="args" /></div>',
+  }),
+};
+
+// With Errors
+export const WithErrors: Story = {
+  args: {
+    name: "tags",
+    label: "Select Tags",
+    placeholder: "Search and select tags...",
+    selectType: "multiple",
+    items: [
+      { value: "tag1", label: "Tag 1", name: "Tag 1" },
+      { value: "tag2", label: "Tag 2", name: "Tag 2" },
+      { value: "tag3", label: "Tag 3", name: "Tag 3" },
+    ],
+    modelValue: [],
+    errors: { tags: "At least one tag is required" },
+    required: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows validation error state.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { EUISearchTagSelect },
+    setup() {
+      return { args };
+    },
+    template:
+      '<div class="max-w-md"><EUISearchTagSelect v-bind="args" /></div>',
+  }),
+};
+
+// Disabled State
+export const Disabled: Story = {
+  args: {
+    name: "tags",
+    label: "Select Tags",
+    placeholder: "Search and select tags...",
+    selectType: "multiple",
+    items: [
+      { value: "tag1", label: "Tag 1", name: "Tag 1" },
+      { value: "tag2", label: "Tag 2", name: "Tag 2" },
+    ],
+    modelValue: [{ value: "tag1", label: "Tag 1", name: "Tag 1" }],
+    errors: {},
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { EUISearchTagSelect },
+    setup() {
+      return { args };
+    },
+    template:
+      '<div class="max-w-md"><EUISearchTagSelect v-bind="args" /></div>',
+  }),
+};
+
+// Searchable
+export const Searchable: Story = {
+  args: {
+    name: "cities",
+    label: "Select Cities",
+    placeholder: "Type to search cities...",
+    selectType: "multiple",
+    items: [
+      { value: "nyc", label: "New York City", name: "New York City" },
+      { value: "la", label: "Los Angeles", name: "Los Angeles" },
+      { value: "chicago", label: "Chicago", name: "Chicago" },
+      { value: "houston", label: "Houston", name: "Houston" },
+      { value: "phoenix", label: "Phoenix", name: "Phoenix" },
+    ],
+    modelValue: [],
+    searchable: true,
+    clearable: true,
+  },
+  render: (args) => ({
+    components: { EUISearchTagSelect },
+    setup() {
+      return { args };
+    },
+    template:
+      '<div class="max-w-md"><EUISearchTagSelect v-bind="args" /></div>',
+  }),
+};

package/dist/EUISelectSearch.vue.d.ts

@@ -1,4 +0,0 @@
-import _sfc_main from "/Volumes/work/repos/edvoy-ui-v2/src/components/selectSearch/EUISelectSearch.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/selectSearch/EUISelectSearch.vue?vue&type=script&setup=true&lang.ts";
-export default _sfc_main;
-//# sourceMappingURL=EUISelectSearch.vue.d.ts.map

package/dist/EUISelectSearch.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUISelectSearch.vue.d.ts","sourceRoot":"","sources":["../src/components/selectSearch/EUISelectSearch.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oHAAoH,CAAC;AAC3I,cAAc,oHAAoH,CAAC;AACnI,eAAe,SAAS,CAAC"}

package/src/components/selectSearch/EUISelectSearch.vue

@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <label for="label" class="mb-4 text-xs font-medium text-gray-400">{{selected?.length < 3}} - {{ selected?.length < 3 }}</label>
-    <v-select
-      v-model="selected"
-      multiple
-      placeholder="Choose up to 3 books!"
-      label="title"
-      :options="dataBooks"
-      :selectable="() => selected?.length < 3"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import vSelect from "vue-select";
-import "vue-select/dist/vue-select.css";
-const selected = ref([]);
-import books from "../../data/books";
-
-const dataBooks = computed(() => books);
-</script>

package/src/components/selectSearch/EUISelectSearch.vue.js.map

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