edvoyui-component-library-test-flight 0.0.182 → 0.0.184

package/dist/tabs/EUITabs.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=4ef02613&lang.css";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=eda5f59b&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITabs.vue.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.182",
+  "version": "0.0.184",
   "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/HelloWorld.vue

@@ -12,7 +12,7 @@
 
 <!-- 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>
     <div
@@ -808,7 +808,6 @@
             :custom-offset="[-20, 10]"
             inputFilled
           />
-          <EUISelectSearch />
         </div>
       </div>
 
@@ -1512,7 +1511,6 @@ import EUIModal from "./modal/EUIModal.vue";
 import EUISelect from "./select/EUISelect.vue";
 import EUITabs from "./tabs/EUITabs.vue";
 import EUITextarea from "./textArea/EUITextArea.vue";
-import EUISelectSearch from "./selectSearch/EUISelectSearch.vue";
 import EUITimeLine from "./timeLine/EUITimeLine.vue";
 import {
   ArrowDownCircleIcon,

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/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/src/components/tabs/EUITabs.vue

@@ -104,7 +104,7 @@
           'px-3 py-1 leading-5 transition-all duration-150 ease-in-out hover:text-gray-800',
           tabSize === 'sm'
             ? 'text-sm font-semibold border-b-2'
-            : 'text-base font-bold border-b-[3px]',
+            : 'text-base font-semibold border-b-[3px]',
           activeTabIndex === tabindex
             ? 'border-gray-900 text-gray-900'
             : 'border-transparent text-gray-500',

package/src/components/telephone/EUITelephone.vue

@@ -69,13 +69,15 @@
       {{ 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";
+
 const emit = defineEmits(["update:modelValue", "blur", "update:isValid"]);
+
 const props = defineProps({
   modelValue: {
     type: [String, Number],
@@ -134,10 +136,11 @@ const props = defineProps({
     default: "",
   },
   inputFilled: {
-    type:Boolean,
+    type: Boolean,
     default: false
   }
 });
+
 const { isValid } = toRefs(props);
 
 const generateUID = () => {
@@ -163,19 +166,8 @@ 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 = {
+// Make bindProps a reactive computed property
+const bindProps = computed(() => ({
   mode: "international",
   autoFormat: false,
   autoDefaultCountry: true,
@@ -183,28 +175,28 @@ const bindProps = {
   invalidMsg: "Required mobile number",
   validCharactersOnly: true,
   preferredCountries: [],
-  disabled: updateValue.value.disabled,
+  disabled: props.disabled,
   inputOptions: {
     autocomplete: "off",
-    autofocus: updateValue.value.focus,
-    name: updateValue.value.name,
+    autofocus: props.autoFocus,
+    name: props.name,
     id: id,
-    placeholder: updateValue.value.place,
-    maxlength: updateValue.value.length,
+    placeholder: props.placeholder,
+    maxlength: props.length,
     showDialCode: true,
     tabindex: 0,
-    readonly: updateValue.value.readonly,
-    required: updateValue.value.required,
+    readonly: props.readonly,
+    required: props.required,
     styleClasses: "eui-tel_input",
   },
   dropdownOptions: {
-    disabled: updateValue.value.readonly || updateValue.value.disabled,
+    disabled: props.readonly || props.disabled,
     showFlags: true,
     showDialCodeInList: true,
     showSearchBox: true,
     searchBoxPlaceholder: "Search country...",
   },
-};
+}));
 
 const onInputChanged = (_formattedNumber: string, phoneObject: any) => {
   hasError.value = phoneObject.valid ? true : false;
@@ -245,7 +237,7 @@ const getIconClass = () => {
     case "startIcon":
       return props.inputFilled ? "pl-12 pr-4" : "normal pl-10 pr-4";
     case "endIcon":
-     return props.inputFilled ? "pr-12 pl-4" : "normal pr-10 pl-4";
+      return props.inputFilled ? "pr-12 pl-4" : "normal pr-10 pl-4";
     default:
       return props.inputFilled ? "px-4" : "normal px-4";
   }
@@ -296,4 +288,4 @@ const focusInput = () => {
     @apply rounded-md py-2;
   }
 }
-</style>
+</style>

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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"}