🤷‍♂️ Easy Daisy 🌼

Vue.js 3 Component Collection for DaisyUI

Installation

npm install @mycure/easy-daisy

Usage

EasySelect

Component

<script setup>
import { EasySelect } from '@mycure/easy-daisy';

const model = ref('Option 1');
const options = [
  {
    label: 'Option 1',
    value: 'Option 1',
  },
  {
    label: 'Option 2',
    value: 'Option 2',
  },
  {
    label: 'Option 3',
    value: 'Option 3',
  },
];

</script>

<template>
  <EasySelect v-model="model" :options="options" />

  <p>Selected: {{ model }}</p>
</template>

Props

| Prop Name | Type | Default Value | Description | |-----------------------|---------------------------------|-----------------------------|----------------------------------| | asyncSearch | Boolean | false | Enable asynchronous search. | | clearable | Boolean | false | Allow clearing the selection. | | disabled | Boolean | false | Disable the component. | | errors | Array | [] | Error messages to display. | | label | String | '' | Label for the component. | | loading | Boolean | false | Show loading indicator. | | options | Array | [] | The options to display. | | placeholder | String | 'Select an option' | Placeholder text for the input. | | required | Boolean | false | Make the field required. | | requiredErrorMessage| String | 'This field is required' | Error message for required field.| | returnObject | Boolean | false | Return the entire option object. | | searchable | Boolean | true | Enable search functionality. | | searchPlaceholder | String | 'Type to search' | Placeholder text for search. |

Events

| Event Name | Description | |-----------------------|----------------------------------| | search | Emitted when the search query changes. |

EasyMultipleSelect

Component

<script setup>
import { EasyMultipleSelect } from '@mycure/easy-daisy';

const model = ref(['Option 1']);

const options = [
  {
    label: 'Option 1',
    value: 'Option 1',
  },
  {
    label: 'Option 2',
    value: 'Option 2',
  },
  {
    label: 'Option 3',
    value: 'Option 3',
  },
];

</script>

<template>
  <EasyMultipleSelect v-model="model" :options="options" />
  <p>Selected: {{ model }}</p>
</template>

Props

| Prop Name | Type | Default Value | Description | |------------------------|----------|--------------------------|--------------------------------------| | asyncSearch | Boolean| false | Enable asynchronous search. | | clearable | Boolean| false | Allow clearing the selection. | | disabled | Boolean| false | Disable the component. | | errors | Array | [] | Error messages to display. | | label | String | '' | Label for the component. | | loading | Boolean| false | Show loading indicator. | | options | Array | [] | The options to display. | | placeholder | String | 'Select options' | Placeholder text for the input. | | required | Boolean| false | Make the field required. | | requiredErrorMessage | String | 'This field is required'| Error message for required field. | | returnObject | Boolean| false | Return the entire option object. | | searchable | Boolean| true | Enable search functionality. | | searchPlaceholder | String | 'Type to search' | Placeholder text for search. | | unique | Boolean| true | Ensure selected options are unique. |

Events

| Event Name | Description | |-----------------------|----------------------------------| | search | Emitted when the search query changes. |

EasyCombobox

Component

<script setup>
import { EasyCombobox } from '@mycure/easy-daisy';

const model = ref('Option 1');

const options = [
  {
    label: 'Option 1',
    value: 'Option 1',
  },
  {
    label: 'Option 2',
    value: 'Option 2',
  },
  {
    label: 'Option 3',
    value: 'Option 3',
  },
];
</script>

<template>
  <EasyCombobox v-model="model" :options="options" />
  <p>Selected: {{ model }}</p>
</template>

Props

| Prop Name | Type | Default Value | Description | |------------------------|----------|--------------------------|--------------------------------------| | clearable | Boolean| false | Allow clearing the selection. | | disabled | Boolean| false | Disable the component. | | errors | Array | [] | Error messages to display. | | label | String | '' | Label for the component. | | loading | Boolean| false | Show loading indicator. | | placeholder | String | 'Select options' | Placeholder text for the input. | | required | Boolean| false | Make the field required. | | requiredErrorMessage | String | 'This field is required'| Error message for required field. | | returnObject | Boolean| false | Return the entire option object. | | unique | Boolean| true | Ensure selected options are unique. |

Events

| Event Name | Description | |-----------------------|----------------------------------| | search | Emitted when the search query changes. |

Made with ❤️ by MYCURE