edvoyui-component-library-test-flight 0.0.184 → 0.0.185
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -8
- package/dist/EUIButton.vue.d.ts.map +1 -0
- package/dist/EUIButtonGroup.vue.d.ts.map +1 -0
- package/dist/edvoy-ui.cjs.js +1 -1
- package/dist/edvoy-ui.es.js +7 -10
- package/dist/edvoy-ui.umd.js +1 -1
- package/package.json +18 -17
- package/dist/button/EUIButton.vue.d.ts.map +0 -1
- package/dist/button/EUIButtonGroup.vue.d.ts.map +0 -1
- package/src/App.vue +0 -16
- package/src/App.vue.js.map +0 -1
- package/src/assets/fonts/gilroy/GilroyBold/font.woff +0 -0
- package/src/assets/fonts/gilroy/GilroyBold/font.woff2 +0 -0
- package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff +0 -0
- package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff2 +0 -0
- package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff +0 -0
- package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff2 +0 -0
- package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff +0 -0
- package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff2 +0 -0
- package/src/assets/fonts/gilroy/GilroyMedium/font.woff +0 -0
- package/src/assets/fonts/gilroy/GilroyMedium/font.woff2 +0 -0
- package/src/assets/fonts/gilroy/GilroyRegular/font.woff +0 -0
- package/src/assets/fonts/gilroy/GilroyRegular/font.woff2 +0 -0
- package/src/assets/fonts/gilroy/GilroySemiBold/font.woff +0 -0
- package/src/assets/fonts/gilroy/GilroySemiBold/font.woff2 +0 -0
- package/src/assets/fonts/inter/Inter-Bold.woff +0 -0
- package/src/assets/fonts/inter/Inter-Bold.woff2 +0 -0
- package/src/assets/fonts/inter/Inter-Italic.woff +0 -0
- package/src/assets/fonts/inter/Inter-Italic.woff2 +0 -0
- package/src/assets/fonts/inter/Inter-Medium.woff +0 -0
- package/src/assets/fonts/inter/Inter-Medium.woff2 +0 -0
- package/src/assets/fonts/inter/Inter-MediumItalic.woff +0 -0
- package/src/assets/fonts/inter/Inter-MediumItalic.woff2 +0 -0
- package/src/assets/fonts/inter/Inter-Regular.woff +0 -0
- package/src/assets/fonts/inter/Inter-Regular.woff2 +0 -0
- package/src/assets/fonts/inter/Inter-SemiBold.woff +0 -0
- package/src/assets/fonts/inter/Inter-SemiBold.woff2 +0 -0
- package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff +0 -0
- package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff2 +0 -0
- package/src/assets/images/search-nodata.png +0 -0
- package/src/assets/scss/body.scss +0 -25
- package/src/assets/svg/CheckTick.vue +0 -21
- package/src/assets/svg/CheckTick.vue.js.map +0 -1
- package/src/assets/svg/ChevronBigDown.vue +0 -22
- package/src/assets/svg/ChevronBigDown.vue.js.map +0 -1
- package/src/assets/svg/ChevronDownSolid.vue +0 -19
- package/src/assets/svg/ChevronDownSolid.vue.js.map +0 -1
- package/src/assets/svg/ChevronDownStroke.vue +0 -22
- package/src/assets/svg/ChevronDownStroke.vue.js.map +0 -1
- package/src/assets/svg/ChevronDownStrokeSolid.vue +0 -19
- package/src/assets/svg/ChevronDownStrokeSolid.vue.js.map +0 -1
- package/src/assets/svg/SearchBigZoomIn.vue +0 -21
- package/src/assets/svg/SearchBigZoomIn.vue.js.map +0 -1
- package/src/assets/svg/SortArrow.vue +0 -24
- package/src/assets/svg/SortArrow.vue.js.map +0 -1
- package/src/assets/svg/Student.vue +0 -30
- package/src/assets/svg/Student.vue.js.map +0 -1
- package/src/assets/svg/partner.vue +0 -33
- package/src/assets/svg/partner.vue.js.map +0 -1
- package/src/assets/svg/people.vue +0 -25
- package/src/assets/svg/people.vue.js.map +0 -1
- package/src/assets/vue.svg +0 -1
- package/src/components/HelloWorld.vue +0 -1972
- package/src/components/HelloWorld.vue.js.map +0 -1
- package/src/components/accordion/EUIAccordion.stories.ts +0 -204
- package/src/components/accordion/EUIAccordion.vue +0 -152
- package/src/components/accordion/EUIAccordion.vue.js.map +0 -1
- package/src/components/alerts/EUIAlerts.stories.ts +0 -217
- package/src/components/alerts/EUIAlerts.vue +0 -194
- package/src/components/alerts/EUIAlerts.vue.js.map +0 -1
- package/src/components/avatar/EUIAvatar.stories.ts +0 -157
- package/src/components/avatar/EUIAvatar.vue +0 -96
- package/src/components/avatar/EUIAvatar.vue.js.map +0 -1
- package/src/components/breadcrumb/EUIBreadcrumb.stories.ts +0 -75
- package/src/components/breadcrumb/EUIBreadcrumb.vue +0 -59
- package/src/components/breadcrumb/EUIBreadcrumb.vue.js.map +0 -1
- package/src/components/button/EUIButton.stories.ts +0 -270
- package/src/components/button/EUIButton.vue +0 -154
- package/src/components/button/EUIButton.vue.js.map +0 -1
- package/src/components/button/EUIButtonGroup.vue +0 -287
- package/src/components/button/EUIButtonGroup.vue.js.map +0 -1
- package/src/components/button/buttonAnimateTab.vue +0 -74
- package/src/components/button/buttonAnimateTab.vue.js.map +0 -1
- package/src/components/checkbox/EUICheckbox.stories.ts +0 -58
- package/src/components/checkbox/EUICheckbox.vue +0 -110
- package/src/components/checkbox/EUICheckbox.vue.js.map +0 -1
- package/src/components/datepicker/EUIDatepicker.stories.ts +0 -492
- package/src/components/datepicker/EUIDatepicker.vue +0 -295
- package/src/components/datepicker/EUIDatepicker.vue.js.map +0 -1
- package/src/components/delete.vue +0 -262
- package/src/components/delete.vue.js.map +0 -1
- package/src/components/dragModal/EUIDrag.vue +0 -179
- package/src/components/dragModal/EUIDrag.vue.js.map +0 -1
- package/src/components/dropdown/EUIMultiDropdown.stories.ts +0 -294
- package/src/components/dropdown/EUIMultiDropdown.vue +0 -187
- package/src/components/dropdown/EUIMultiDropdown.vue.js.map +0 -1
- package/src/components/errorMessage/EUIErrorMessage.scss +0 -0
- package/src/components/errorMessage/EUIErrorMessage.stories.ts +0 -41
- package/src/components/errorMessage/EUIErrorMessage.vue +0 -25
- package/src/components/errorMessage/EUIErrorMessage.vue.js.map +0 -1
- package/src/components/index.js.map +0 -1
- package/src/components/index.ts +0 -61
- package/src/components/input/EUIInput.stories.ts +0 -387
- package/src/components/input/EUIInput.vue +0 -223
- package/src/components/input/EUIInput.vue.js.map +0 -1
- package/src/components/input/EUINumberInput.vue +0 -250
- package/src/components/loader/EUICircleLoader.vue +0 -31
- package/src/components/loader/EUICircleLoader.vue.js.map +0 -1
- package/src/components/loader/EUICubeLoader.vue +0 -237
- package/src/components/loader/EUICubeLoader.vue.js.map +0 -1
- package/src/components/loader/EUILoader.stories.ts +0 -99
- package/src/components/loader/EUILoader.vue +0 -17
- package/src/components/loader/EUILoader.vue.js.map +0 -1
- package/src/components/loader/EUISquareLoader.vue +0 -47
- package/src/components/loader/EUISquareLoader.vue.js.map +0 -1
- package/src/components/modal/EUIModal.stories.ts +0 -412
- package/src/components/modal/EUIModal.vue +0 -228
- package/src/components/modal/EUIModal.vue.js.map +0 -1
- package/src/components/pillSelect/EUIPillSelect.stories.ts +0 -74
- package/src/components/pillSelect/EUIPillSelect.vue +0 -149
- package/src/components/pillSelect/EUIPillSelect.vue.js.map +0 -1
- package/src/components/popover/EUIPopover.stories.ts +0 -306
- package/src/components/popover/EUIPopover.vue +0 -297
- package/src/components/popover/EUIPopover.vue.js.map +0 -1
- package/src/components/radio/EUIRadio.stories.ts +0 -54
- package/src/components/radio/EUIRadio.vue +0 -75
- package/src/components/radio/EUIRadio.vue.js.map +0 -1
- package/src/components/searchInput/EUISearch.stories.ts +0 -24
- package/src/components/searchInput/EUISearch.vue +0 -223
- package/src/components/searchInput/EUISearch.vue.js.map +0 -1
- package/src/components/searchTagSelect/EUISearchTagSelect.stories.ts +0 -217
- package/src/components/searchTagSelect/EUISearchTagSelect.vue +0 -642
- package/src/components/searchTagSelect/EUISearchTagSelect.vue.js.map +0 -1
- package/src/components/searchTagSelect/SearchInput.vue +0 -167
- package/src/components/searchTagSelect/SearchInput.vue.js.map +0 -1
- package/src/components/searchexpand/EUISearchExpand.vue +0 -148
- package/src/components/searchexpand/EUISearchExpand.vue.js.map +0 -1
- package/src/components/searchexpand/EUISearchToggle.vue +0 -86
- package/src/components/searchexpand/EUISearchToggle.vue.js.map +0 -1
- package/src/components/select/EUISelect.stories.ts +0 -101
- package/src/components/select/EUISelect.vue +0 -1092
- package/src/components/select/EUISelect.vue.js.map +0 -1
- package/src/components/slideover/EUISlideover.stories.ts +0 -318
- package/src/components/slideover/EUISlideover.vue +0 -212
- package/src/components/slideover/EUISlideover.vue.js.map +0 -1
- package/src/components/stepperTimeline/EUIStepperHorizontal.vue +0 -242
- package/src/components/stepperTimeline/EUIStepperHorizontal.vue.js.map +0 -1
- package/src/components/stepperTimeline/EUIStepperTimeline.stories.ts +0 -54
- package/src/components/stepperTimeline/EUIStepperTimeline.vue +0 -16
- package/src/components/stepperTimeline/EUIStepperTimeline.vue.js.map +0 -1
- package/src/components/stepperTimeline/EUIStepperVertical.vue +0 -112
- package/src/components/stepperTimeline/EUIStepperVertical.vue.js.map +0 -1
- package/src/components/table/ColumnResizeTable.vue +0 -740
- package/src/components/table/ColumnResizeTable.vue.js.map +0 -1
- package/src/components/table/EUIDashboardTable.vue +0 -514
- package/src/components/table/EUIDashboardTable.vue.js.map +0 -1
- package/src/components/table/EUIPageLimit.vue +0 -66
- package/src/components/table/EUIPageLimit.vue.js.map +0 -1
- package/src/components/table/EUIPagination.vue +0 -175
- package/src/components/table/EUIPagination.vue.js.map +0 -1
- package/src/components/table/EUIStudentPagination.vue +0 -172
- package/src/components/table/EUIStudentPagination.vue.js.map +0 -1
- package/src/components/table/EUITable.stories.ts +0 -300
- package/src/components/table/EUITable.vue +0 -559
- package/src/components/table/EUITable.vue.js.map +0 -1
- package/src/components/table/EUITableCheckbox.vue +0 -98
- package/src/components/table/EUITableCheckbox.vue.js.map +0 -1
- package/src/components/table/GrowthTable.vue +0 -575
- package/src/components/table/GrowthTable.vue.js.map +0 -1
- package/src/components/table/GrowthTableView.vue +0 -108
- package/src/components/table/GrowthTableView.vue.js.map +0 -1
- package/src/components/table/ResizeTableview.vue +0 -198
- package/src/components/table/ResizeTableview.vue.js.map +0 -1
- package/src/components/table/UCheckbox.vue +0 -169
- package/src/components/table/UCheckbox.vue.js.map +0 -1
- package/src/components/table/UTable.scss +0 -69
- package/src/components/table/UTable.vue +0 -611
- package/src/components/table/UTable.vue.js.map +0 -1
- package/src/components/table/UTableview.vue +0 -189
- package/src/components/table/UTableview.vue.js.map +0 -1
- package/src/components/tabs/EUITabOutline.vue +0 -263
- package/src/components/tabs/EUITabOutline.vue.js.map +0 -1
- package/src/components/tabs/EUITabs.vue +0 -262
- package/src/components/tabs/EUITabs.vue.js.map +0 -1
- package/src/components/tabs/EUItabs.stories.ts +0 -137
- package/src/components/tag/EUITag.stories.ts +0 -53
- package/src/components/tag/EUITag.vue +0 -88
- package/src/components/tag/EUITag.vue.js.map +0 -1
- package/src/components/telephone/EUITelephone.stories.ts +0 -358
- package/src/components/telephone/EUITelephone.vue +0 -291
- package/src/components/telephone/EUITelephone.vue.js.map +0 -1
- package/src/components/textArea/EUITextArea.stories.ts +0 -134
- package/src/components/textArea/EUITextArea.vue +0 -155
- package/src/components/textArea/EUITextArea.vue.js.map +0 -1
- package/src/components/timeLine/EUITimeLine.stories.ts +0 -247
- package/src/components/timeLine/EUITimeLine.vue +0 -148
- package/src/components/timeLine/EUITimeLine.vue.js.map +0 -1
- package/src/components/toggle/EUIToggle.stories.ts +0 -63
- package/src/components/toggle/EUIToggle.vue +0 -101
- package/src/components/toggle/EUIToggle.vue.js.map +0 -1
- package/src/components/tooltip/EUITooltip.stories.ts +0 -53
- package/src/components/tooltip/EUITooltip.vue +0 -111
- package/src/components/tooltip/EUITooltip.vue.js.map +0 -1
- package/src/components/uidemo/select-com.vue +0 -120
- package/src/components/uidemo/select-com.vue.js.map +0 -1
- package/src/data/books.js.map +0 -1
- package/src/data/books.ts +0 -163
- package/src/data/country.ts +0 -56
- package/src/data/tab.js.map +0 -1
- package/src/data/tab.ts +0 -40
- package/src/data/table.js.map +0 -1
- package/src/data/table.ts +0 -5654
- package/src/main.js.map +0 -1
- package/src/main.ts +0 -5
- package/src/style.scss +0 -186
- package/src/utils/helpers.js.map +0 -1
- package/src/utils/helpers.ts +0 -30
- package/src/utils/lodash.js.map +0 -1
- package/src/utils/lodash.ts +0 -9
- package/src/utils/types.js.map +0 -1
- package/src/utils/types.ts +0 -9
- package/src/vite-env.d.ts +0 -5
- /package/dist/{button/EUIButton.vue.d.ts → EUIButton.vue.d.ts} +0 -0
- /package/dist/{button/EUIButtonGroup.vue.d.ts → EUIButtonGroup.vue.d.ts} +0 -0
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/vue3";
|
|
2
|
-
|
|
3
|
-
import EUIPillSelect from "./EUIPillSelect.vue";
|
|
4
|
-
import { ref } from "vue";
|
|
5
|
-
|
|
6
|
-
// Meta configuration for the component's stories
|
|
7
|
-
const meta = {
|
|
8
|
-
title: "Example/Pill Select",
|
|
9
|
-
component: EUIPillSelect,
|
|
10
|
-
tags: ["autodocs"],
|
|
11
|
-
argTypes: {
|
|
12
|
-
disabled: {
|
|
13
|
-
control: "boolean",
|
|
14
|
-
},
|
|
15
|
-
items: {
|
|
16
|
-
control: "object",
|
|
17
|
-
description: "Array of options to display in the select pills.",
|
|
18
|
-
},
|
|
19
|
-
modelValue: {
|
|
20
|
-
control: "object",
|
|
21
|
-
},
|
|
22
|
-
label: {
|
|
23
|
-
control: "text",
|
|
24
|
-
},
|
|
25
|
-
name: {
|
|
26
|
-
control: "text",
|
|
27
|
-
},
|
|
28
|
-
multiple: {
|
|
29
|
-
control: "boolean",
|
|
30
|
-
},
|
|
31
|
-
errors: {
|
|
32
|
-
control: "object",
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
} satisfies Meta<typeof EUIPillSelect>;
|
|
36
|
-
|
|
37
|
-
export default meta;
|
|
38
|
-
type Story = StoryObj<typeof meta>;
|
|
39
|
-
|
|
40
|
-
// Default story with minimum props
|
|
41
|
-
export const Default: Story = {
|
|
42
|
-
args: {
|
|
43
|
-
name: "pill",
|
|
44
|
-
modelValue: {
|
|
45
|
-
value: "usa",
|
|
46
|
-
label: "United States",
|
|
47
|
-
},
|
|
48
|
-
label:"Please select country",
|
|
49
|
-
disabled: false,
|
|
50
|
-
multiple: false,
|
|
51
|
-
items: [
|
|
52
|
-
{ value: "usa", label: "United States", name: "United States" },
|
|
53
|
-
{ value: "canada", label: "Canada", name: "Canada" },
|
|
54
|
-
{ value: "uk", label: "United Kingdom", name: "United Kingdom" },
|
|
55
|
-
],
|
|
56
|
-
errors: {
|
|
57
|
-
pill: "Pill is Required",
|
|
58
|
-
},
|
|
59
|
-
},
|
|
60
|
-
render: (args) => ({
|
|
61
|
-
components: { EUIPillSelect },
|
|
62
|
-
setup() {
|
|
63
|
-
const modelValue = ref(args.modelValue);
|
|
64
|
-
|
|
65
|
-
const onUpdateModelValue = (newValue: any) => {
|
|
66
|
-
modelValue.value = newValue;
|
|
67
|
-
args.modelValue = newValue;
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
return { args, modelValue, onUpdateModelValue };
|
|
71
|
-
},
|
|
72
|
-
template: `<EUIPillSelect v-bind="args" v-model="modelValue" @update:modelValue="onUpdateModelValue" />`,
|
|
73
|
-
}),
|
|
74
|
-
};
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<p v-if="label" class="mb-3 text-sm font-medium text-gray-500 font-inter">
|
|
4
|
-
{{ label }}<span v-if="required" class="text-red-500">*</span>
|
|
5
|
-
</p>
|
|
6
|
-
<div class="flex flex-row flex-wrap w-full gap-3">
|
|
7
|
-
<EUIButton
|
|
8
|
-
v-for="(item, idx) in items"
|
|
9
|
-
:key="`${name}-${idx}`"
|
|
10
|
-
type="button"
|
|
11
|
-
size="md"
|
|
12
|
-
color="white"
|
|
13
|
-
:class="[
|
|
14
|
-
'!px-5 !text-sm leading-6 focus:!outline-0 !font-medium',
|
|
15
|
-
isSelected(item)
|
|
16
|
-
? '!bg-violet-100 !text-violet-500'
|
|
17
|
-
: '!bg-gray-100 !text-gray-600 hover:!text-gray-800',
|
|
18
|
-
]"
|
|
19
|
-
rounded
|
|
20
|
-
@click="handleSelect(item)"
|
|
21
|
-
:disabled="disabled"
|
|
22
|
-
>
|
|
23
|
-
{{
|
|
24
|
-
ignoreStartCase
|
|
25
|
-
? item[labelKey] || ""
|
|
26
|
-
: startCase(item[labelKey] || "")
|
|
27
|
-
}}
|
|
28
|
-
</EUIButton>
|
|
29
|
-
</div>
|
|
30
|
-
<template v-if="errors && Object.keys(errors).length">
|
|
31
|
-
<EUIErrorMessage :errors="errors" :name="name" />
|
|
32
|
-
</template>
|
|
33
|
-
</div>
|
|
34
|
-
</template>
|
|
35
|
-
|
|
36
|
-
<script setup lang="ts">
|
|
37
|
-
import { startCase } from "lodash";
|
|
38
|
-
import EUIButton from "../button/EUIButton.vue";
|
|
39
|
-
import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
|
|
40
|
-
import { PropType, computed, toRefs, watch } from "vue";
|
|
41
|
-
import { ErrorObject, ValidationErrors } from "../../utils/types";
|
|
42
|
-
const props = defineProps({
|
|
43
|
-
label: {
|
|
44
|
-
type: String,
|
|
45
|
-
default: "",
|
|
46
|
-
},
|
|
47
|
-
modelValue: {
|
|
48
|
-
type: Object as PropType<any | null>,
|
|
49
|
-
default: null,
|
|
50
|
-
},
|
|
51
|
-
labelKey: {
|
|
52
|
-
type: String,
|
|
53
|
-
default: "label",
|
|
54
|
-
},
|
|
55
|
-
valueKey: {
|
|
56
|
-
type: String,
|
|
57
|
-
default: "value",
|
|
58
|
-
},
|
|
59
|
-
items: {
|
|
60
|
-
type: Array<any>,
|
|
61
|
-
default: [],
|
|
62
|
-
},
|
|
63
|
-
multiple: {
|
|
64
|
-
type: Boolean,
|
|
65
|
-
default: false,
|
|
66
|
-
},
|
|
67
|
-
name: {
|
|
68
|
-
type: String,
|
|
69
|
-
default: "",
|
|
70
|
-
},
|
|
71
|
-
disabled: {
|
|
72
|
-
type: Boolean,
|
|
73
|
-
deault: false,
|
|
74
|
-
},
|
|
75
|
-
required: {
|
|
76
|
-
type: Boolean,
|
|
77
|
-
deault: false,
|
|
78
|
-
},
|
|
79
|
-
errors: {
|
|
80
|
-
type: Object as PropType<ValidationErrors | ErrorObject[]>,
|
|
81
|
-
default: [],
|
|
82
|
-
},
|
|
83
|
-
ignoreStartCase: {
|
|
84
|
-
type: Boolean,
|
|
85
|
-
deault: false,
|
|
86
|
-
},
|
|
87
|
-
});
|
|
88
|
-
const { multiple, valueKey, labelKey, errors, ignoreStartCase } = toRefs(props);
|
|
89
|
-
const emit = defineEmits(["update:model-value","on-change"]);
|
|
90
|
-
const activeItem = computed({
|
|
91
|
-
set: (value) => {
|
|
92
|
-
emit("update:model-value", value);
|
|
93
|
-
},
|
|
94
|
-
get: () => props.modelValue,
|
|
95
|
-
});
|
|
96
|
-
const handleMultiSelect = (item: any) => {
|
|
97
|
-
if (Array.isArray(activeItem.value)) {
|
|
98
|
-
const index = activeItem.value?.findIndex(
|
|
99
|
-
(x) => x?.[valueKey.value] === item?.[valueKey.value]
|
|
100
|
-
);
|
|
101
|
-
if (index != -1) {
|
|
102
|
-
activeItem.value.splice(index, 1);
|
|
103
|
-
} else {
|
|
104
|
-
activeItem.value.push(item);
|
|
105
|
-
}
|
|
106
|
-
emit('on-change',activeItem.value)
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
const handleSingleSelect = (item: any) => {
|
|
110
|
-
if (!Array.isArray(activeItem.value)) {
|
|
111
|
-
if (activeItem.value?.[valueKey.value] === item?.[valueKey.value]) {
|
|
112
|
-
activeItem.value = null;
|
|
113
|
-
} else {
|
|
114
|
-
activeItem.value = item;
|
|
115
|
-
}
|
|
116
|
-
emit('on-change',activeItem.value)
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
const handleSelect = (item: any) => {
|
|
120
|
-
if (multiple.value) {
|
|
121
|
-
handleMultiSelect(item);
|
|
122
|
-
} else {
|
|
123
|
-
handleSingleSelect(item);
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
|
|
127
|
-
const isSelected = (item: any) => {
|
|
128
|
-
if (Array.isArray(activeItem.value)) {
|
|
129
|
-
const values = activeItem.value
|
|
130
|
-
.map((x) => x[valueKey.value])
|
|
131
|
-
.filter((x) => x);
|
|
132
|
-
return values.includes(item?.[valueKey.value]);
|
|
133
|
-
}
|
|
134
|
-
return activeItem.value?.[valueKey.value] === item?.[valueKey.value];
|
|
135
|
-
};
|
|
136
|
-
watch(
|
|
137
|
-
multiple,
|
|
138
|
-
() => {
|
|
139
|
-
if (multiple.value) {
|
|
140
|
-
if (!Array.isArray(activeItem.value)) {
|
|
141
|
-
activeItem.value = [activeItem.value];
|
|
142
|
-
}
|
|
143
|
-
} else {
|
|
144
|
-
activeItem.value = activeItem.value ? activeItem.value : null;
|
|
145
|
-
}
|
|
146
|
-
},
|
|
147
|
-
{ immediate: true }
|
|
148
|
-
);
|
|
149
|
-
</script>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EUIPillSelect.vue.js","sourceRoot":"","sources":["EUIPillSelect.vue"],"names":[],"mappings":"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"}
|
|
@@ -1,306 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/vue3";
|
|
2
|
-
import EUIPopover from "./EUIPopover.vue";
|
|
3
|
-
import EUIButton from "../button/EUIButton.vue";
|
|
4
|
-
import { InformationCircleIcon } from "@heroicons/vue/24/outline";
|
|
5
|
-
import { ref } from "vue";
|
|
6
|
-
import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
|
|
7
|
-
|
|
8
|
-
const meta: Meta<typeof EUIPopover> = {
|
|
9
|
-
title: "Example/Popover",
|
|
10
|
-
component: EUIPopover,
|
|
11
|
-
tags: ["autodocs"],
|
|
12
|
-
argTypes: {
|
|
13
|
-
title: {
|
|
14
|
-
control: "text",
|
|
15
|
-
description: "Sets the title for the popper content.",
|
|
16
|
-
},
|
|
17
|
-
trigger: {
|
|
18
|
-
control: { type: "select" },
|
|
19
|
-
options: ["click", "hover", "manual"],
|
|
20
|
-
description:
|
|
21
|
-
"Specifies the trigger for displaying the popper. Default is 'click'.",
|
|
22
|
-
defaultValue: "click",
|
|
23
|
-
table: {
|
|
24
|
-
defaultValue: { summary: "click" },
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
placement: {
|
|
28
|
-
control: { type: "select" },
|
|
29
|
-
options: ["top", "left", "bottom", "right", "bottom-start", "bottom-end"],
|
|
30
|
-
description:
|
|
31
|
-
"Defines the position of the popper relative to the reference element. Default is 'bottom'.",
|
|
32
|
-
defaultValue: "bottom",
|
|
33
|
-
table: {
|
|
34
|
-
defaultValue: { summary: "bottom" },
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
className: {
|
|
38
|
-
control: "text",
|
|
39
|
-
description:
|
|
40
|
-
"Additional CSS classes for styling the popper content container.",
|
|
41
|
-
},
|
|
42
|
-
customButton: {
|
|
43
|
-
control: "text",
|
|
44
|
-
description:
|
|
45
|
-
"CSS classes for styling the button that triggers the popper.",
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
} satisfies Meta<typeof EUIPopover>;
|
|
49
|
-
|
|
50
|
-
export default meta;
|
|
51
|
-
type Story = StoryObj<typeof meta>;
|
|
52
|
-
|
|
53
|
-
export const Default: Story = {
|
|
54
|
-
args: {
|
|
55
|
-
className: "max-w-64 min-w-64",
|
|
56
|
-
title: "Popper click to show",
|
|
57
|
-
customButton: "border border-gray-600 px-4 py-2 rounded-lg",
|
|
58
|
-
trigger: "click",
|
|
59
|
-
placement: "bottom",
|
|
60
|
-
},
|
|
61
|
-
render: (args) => ({
|
|
62
|
-
components: { EUIPopover, EUIButton },
|
|
63
|
-
setup() {
|
|
64
|
-
return { args };
|
|
65
|
-
},
|
|
66
|
-
template: `<div class="min-h-72 mx-auto max-w-xl p-6">
|
|
67
|
-
<EUIPopover v-bind="args">
|
|
68
|
-
<template #referenceButton>
|
|
69
|
-
Information
|
|
70
|
-
</template>
|
|
71
|
-
<div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg text-start">
|
|
72
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
|
|
73
|
-
</div>
|
|
74
|
-
</EUIPopover>
|
|
75
|
-
</div>`,
|
|
76
|
-
}),
|
|
77
|
-
parameters: {
|
|
78
|
-
docs: {
|
|
79
|
-
description: {
|
|
80
|
-
story:
|
|
81
|
-
"This is the default configuration for the `EUIPopover` component, triggered by clicking the button.",
|
|
82
|
-
},
|
|
83
|
-
source: {
|
|
84
|
-
code: `<template>
|
|
85
|
-
<EUIPopover
|
|
86
|
-
trigger="click"
|
|
87
|
-
placement="bottom"
|
|
88
|
-
className="max-w-64 min-w-64"
|
|
89
|
-
title="Popper click to show"
|
|
90
|
-
customButton="border border-gray-600 px-4 py-2 rounded-lg"
|
|
91
|
-
>
|
|
92
|
-
<template #referenceButton>
|
|
93
|
-
Information
|
|
94
|
-
</template>
|
|
95
|
-
<!-- Popper Content Here... -->
|
|
96
|
-
<div
|
|
97
|
-
class="relative z-10 px-4 pt-0 pb-4 text-gray-900 bg-white rounded-lg shadow-lg text-start"
|
|
98
|
-
>
|
|
99
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a
|
|
100
|
-
quidem non delectus, est, ad voluptatum nostrum minus consequatur aut
|
|
101
|
-
excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
|
|
102
|
-
</div>
|
|
103
|
-
</EUIPopover>
|
|
104
|
-
</template>`,
|
|
105
|
-
},
|
|
106
|
-
},
|
|
107
|
-
},
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
export const PopoverHover: Story = {
|
|
111
|
-
args: {
|
|
112
|
-
title: "Popover hover to Shows",
|
|
113
|
-
className: "max-w-64 min-w-64",
|
|
114
|
-
customButton: "border border-gray-600 px-4 py-2 rounded-lg",
|
|
115
|
-
trigger: "hover",
|
|
116
|
-
placement: "bottom-start",
|
|
117
|
-
},
|
|
118
|
-
render: (args) => ({
|
|
119
|
-
components: { EUIPopover, InformationCircleIcon },
|
|
120
|
-
setup() {
|
|
121
|
-
return { args };
|
|
122
|
-
},
|
|
123
|
-
template: `<div class="min-h-72">
|
|
124
|
-
<EUIPopover v-bind="args" trigger="hover">
|
|
125
|
-
<template #referenceButton>
|
|
126
|
-
Information <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
|
|
127
|
-
</template>
|
|
128
|
-
<div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
|
|
129
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
|
|
130
|
-
</div>
|
|
131
|
-
</EUIPopover>
|
|
132
|
-
</div>`,
|
|
133
|
-
}),
|
|
134
|
-
parameters: {
|
|
135
|
-
docs: {
|
|
136
|
-
description: {
|
|
137
|
-
story:
|
|
138
|
-
"The `PopoverHover` story showcases the `EUIPopover` component triggered on hover.",
|
|
139
|
-
},
|
|
140
|
-
source: {
|
|
141
|
-
code: `<template>
|
|
142
|
-
<EUIPopover
|
|
143
|
-
trigger="hover"
|
|
144
|
-
placement="bottom-start"
|
|
145
|
-
:hover-hide-delay="150"
|
|
146
|
-
className="max-w-64 min-w-64"
|
|
147
|
-
title="Popper hover to Shows"
|
|
148
|
-
customButton="border border-gray-600 px-4 py-2 rounded-lg"
|
|
149
|
-
>
|
|
150
|
-
<template #referenceButton>
|
|
151
|
-
<InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
|
|
152
|
-
</template>
|
|
153
|
-
<!-- Popper Content Here... -->
|
|
154
|
-
<div
|
|
155
|
-
class="relative z-10 px-4 pt-0 pb-4 text-gray-900 bg-white rounded-lg shadow-lg text-start"
|
|
156
|
-
>
|
|
157
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a
|
|
158
|
-
quidem non delectus, est, ad voluptatum nostrum minus consequatur aut
|
|
159
|
-
excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
|
|
160
|
-
</div>
|
|
161
|
-
</EUIPopover>
|
|
162
|
-
</template>`,
|
|
163
|
-
},
|
|
164
|
-
},
|
|
165
|
-
},
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
export const PopoverManualAccess: Story = {
|
|
169
|
-
args: {
|
|
170
|
-
title: "Popover click to Show",
|
|
171
|
-
className: "max-w-64 min-w-64",
|
|
172
|
-
customButton: "border border-gray-600 px-4 py-2 rounded-lg",
|
|
173
|
-
trigger: "click",
|
|
174
|
-
placement: "bottom-start",
|
|
175
|
-
},
|
|
176
|
-
render: (args) => ({
|
|
177
|
-
components: { EUIPopover, InformationCircleIcon, EUIButton },
|
|
178
|
-
setup() {
|
|
179
|
-
const popoverVisible = ref(false);
|
|
180
|
-
|
|
181
|
-
const onPopoverToggle = () => {
|
|
182
|
-
popoverVisible.value = !popoverVisible.value;
|
|
183
|
-
};
|
|
184
|
-
|
|
185
|
-
const onPopoverHide = () => {
|
|
186
|
-
popoverVisible.value = false;
|
|
187
|
-
};
|
|
188
|
-
|
|
189
|
-
return { args, popoverVisible, onPopoverToggle, onPopoverHide };
|
|
190
|
-
},
|
|
191
|
-
template: `<div class="min-h-72">
|
|
192
|
-
<EUIPopover v-bind="args" trigger="manual" v-model:visible="popoverVisible" placement="top" title="Popper Manual Access" @click="onPopoverToggle">
|
|
193
|
-
<template #referenceButton>
|
|
194
|
-
Information <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
|
|
195
|
-
</template>
|
|
196
|
-
<div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
|
|
197
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
|
|
198
|
-
|
|
199
|
-
<EUIButton type="button" size="sm" color="purple" className="mt-4" @click="onPopoverHide()">Close</EUIButton>
|
|
200
|
-
</div>
|
|
201
|
-
</EUIPopover>
|
|
202
|
-
</div>`,
|
|
203
|
-
}),
|
|
204
|
-
parameters: {
|
|
205
|
-
docs: {
|
|
206
|
-
description: {
|
|
207
|
-
story:
|
|
208
|
-
"The `PopoverClick` story showcases the `EUIPopover` component triggered on Emit.",
|
|
209
|
-
},
|
|
210
|
-
source: {
|
|
211
|
-
code: `<script lang="ts" setup>
|
|
212
|
-
const popoverVisible = ref(false);
|
|
213
|
-
|
|
214
|
-
const onPopoverToggle = () => {
|
|
215
|
-
popoverVisible.value = !popoverVisible.value;
|
|
216
|
-
};
|
|
217
|
-
|
|
218
|
-
const onPopoverHide = () => {
|
|
219
|
-
popoverVisible.value = false;
|
|
220
|
-
};
|
|
221
|
-
</script>
|
|
222
|
-
<template>
|
|
223
|
-
<div>
|
|
224
|
-
Popover is {{ popoverVisible ? "visible" : "hidden" }}
|
|
225
|
-
</div>
|
|
226
|
-
<EUIPopover
|
|
227
|
-
trigger="manual"
|
|
228
|
-
v-model:visible="popoverVisible"
|
|
229
|
-
placement="top"
|
|
230
|
-
placement="bottom-start"
|
|
231
|
-
className="max-w-64 min-w-64"
|
|
232
|
-
title="Popover Manual access"
|
|
233
|
-
customButton="border border-gray-600 px-4 py-2 rounded-lg"
|
|
234
|
-
@click="onPopoverToggle"
|
|
235
|
-
>
|
|
236
|
-
<template #referenceButton>
|
|
237
|
-
<InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
|
|
238
|
-
</template>
|
|
239
|
-
<!-- Popover Content Here... -->
|
|
240
|
-
<div
|
|
241
|
-
class="relative z-10 px-4 pt-0 pb-4 text-gray-900 bg-white rounded-lg shadow-lg text-start"
|
|
242
|
-
>
|
|
243
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a
|
|
244
|
-
quidem non delectus, est, ad voluptatum nostrum minus consequatur aut
|
|
245
|
-
excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
|
|
246
|
-
<EUIButton type="button" size="sm" color="purple" className="mt-4" @click="onPopoverHide()">Close</EUIButton>
|
|
247
|
-
</div>
|
|
248
|
-
</EUIPopover>
|
|
249
|
-
</template>`,
|
|
250
|
-
},
|
|
251
|
-
},
|
|
252
|
-
},
|
|
253
|
-
};
|
|
254
|
-
|
|
255
|
-
export const PopoverDefaultOpen: Story = {
|
|
256
|
-
args: {
|
|
257
|
-
title: "Popover hover to Shows",
|
|
258
|
-
className: "max-w-64 min-w-64",
|
|
259
|
-
customButton: "border border-gray-600 px-4 py-2 rounded-lg",
|
|
260
|
-
trigger: "hover",
|
|
261
|
-
placement: "bottom-start",
|
|
262
|
-
},
|
|
263
|
-
render: (args) => ({
|
|
264
|
-
components: { EUIPopover, InformationCircleIcon, ChevronBigDown },
|
|
265
|
-
setup() {
|
|
266
|
-
const isInitiallyOpen = ref(true);
|
|
267
|
-
|
|
268
|
-
return { args, isInitiallyOpen };
|
|
269
|
-
},
|
|
270
|
-
template: `<div class="min-h-72">
|
|
271
|
-
<EUIPopover v-bind="args" v-model:visible="isInitiallyOpen" placement="bottom-end"
|
|
272
|
-
:hover-hide-delay="150">
|
|
273
|
-
<template #referenceButton #referenceButton="{ open }">
|
|
274
|
-
Information <ChevronBigDown :class="['text-gray-900 cursor-pointer size-6 transition duration-300 ease-in-out transform', open ? '-rotate-90' : 'rotate-0']" />
|
|
275
|
-
</template>
|
|
276
|
-
<div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
|
|
277
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
|
|
278
|
-
</div>
|
|
279
|
-
</EUIPopover>
|
|
280
|
-
</div>`,
|
|
281
|
-
}),
|
|
282
|
-
parameters: {
|
|
283
|
-
docs: {
|
|
284
|
-
description: {
|
|
285
|
-
story:
|
|
286
|
-
"The `PopoverHover` story showcases the `EUIPopover` component triggered on hover.",
|
|
287
|
-
},
|
|
288
|
-
source: {
|
|
289
|
-
code: `<script lang="ts" setup>
|
|
290
|
-
const isInitiallyOpen = ref(true);
|
|
291
|
-
</script>
|
|
292
|
-
<template>
|
|
293
|
-
<EUIPopover v-bind="args" v-model:visible="isInitiallyOpen" placement="bottom-end"
|
|
294
|
-
:hover-hide-delay="150">
|
|
295
|
-
<template #referenceButton #referenceButton="{ open }">
|
|
296
|
-
Information <ChevronBigDown :class="['text-gray-900 cursor-pointer size-6 transition duration-300 ease-in-out transform', open ? '-rotate-90' : 'rotate-0']" />
|
|
297
|
-
</template>
|
|
298
|
-
<div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
|
|
299
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
|
|
300
|
-
</div>
|
|
301
|
-
</EUIPopover>
|
|
302
|
-
</template>`,
|
|
303
|
-
},
|
|
304
|
-
},
|
|
305
|
-
},
|
|
306
|
-
};
|