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

package/package.json

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