edvoyui-component-library-test-flight 0.0.183 → 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 +28 -28
- package/dist/edvoy-ui.es.js +1262 -1273
- package/dist/edvoy-ui.umd.js +28 -28
- package/dist/tabs/EUITabs.vue.d.ts +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 -1974
- 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 -299
- 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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"HelloWorld.vue.js","sourceRoot":"","sources":["HelloWorld.vue"],"names":[],"mappings":"AAAA,MA23DM,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,GAAG,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;AAC/H,MAAM,iBAAiB,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,EAC/D,CAAC,CAAC;AACuD,CAAC;AAC3D,IAAI,8BAAmJ,CAAC;AAExJ,SAAS,cAAc;IACvB,MAAM,SAAS,GAAG,EAAqE,CAAC;IACxF,MAAM,qBAAqB,GAAG;QAC9B,GAAG,EAKA;QACH,GAAG,EAA6E;QAChF,GAAG,SAAS;KACX,CAAC;IACF,IAAI,gBAAwE,CAAC;IAC7E,MAAM,qBAAqB,GAAG;QAC9B,GAAG,EAA6E;QAChF,GAAG,SAAS;KACX,CAAC;IACF,IAAI,gBAAwE,CAAC;IAC7E,IAAI,wBAA6B,CAAC;IAElC,0BAA0B;IAC1B,8BAA8B;IAC9B,IAAI,sCAAqD,CAAC;IAC1D,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,kCAAkC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1I,uBAAuB,CAAC,uBAAuB,CAAC,EAAE,EAAE,uBAAuB,CAAC,EAAE,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,sHAAsH,CAAC,EAAE,GAAG,CAAC,CAAC;IAC5N,wBAAwB,CAAC,iBAAiB,CAAC,CAAC;IAC5C,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,UAAU,CAAC,CAAC;IACrC,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAClC,wBAAwB,CAAC,UAAU,CAAC,CAAC;IACrC,wBAAwB,CAAC,WAAW,CAAC,CAAC;IACtC,wBAAwB,CAAC,aAAa,CAAC,CAAC;IACxC,wBAAwB,CAAC,eAAe,CAAC,CAAC;IAC1C,wBAAwB,CAAC,WAAW,CAAC,CAAC;IACtC,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IAC/C,wBAAwB,CAAC,sBAAsB,CAAC,CAAC;IACjD,wBAAwB,CAAC,iBAAiB,CAAC,CAAC;IAE5C,IAAI,WACH,CAAC;IACF,IAAI,oBAAyB,CAAC;IAC9B,MAAM,UAAU,GAAG,EAClB,CAAC;IACF,IAAI,KAAyB,CAAC;IAC9B,OAAO;QACN,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,EAA0C;KACjD,CAAC;AACF,CAAC;AAAA,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AAEH,eAAe,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACrD,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,CAAC"}
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/vue3";
|
|
2
|
-
import EUIAccordion from "./EUIAccordion.vue";
|
|
3
|
-
|
|
4
|
-
const meta: Meta<typeof EUIAccordion> = {
|
|
5
|
-
title: "Example/Accordion",
|
|
6
|
-
component: EUIAccordion,
|
|
7
|
-
tags: ["autodocs"],
|
|
8
|
-
argTypes: {
|
|
9
|
-
datas: {
|
|
10
|
-
control: "object",
|
|
11
|
-
description:
|
|
12
|
-
"* The template method allows you to define how content is rendered in the <mark>EUIAccordion</mark> component. \n\n* Named slots <mark>(#title, #content)</mark> enable you to customize the display of titles and content for each accordion item. \n\n* The <mark>item.className</mark> data to send additional CSS classes for styling the accordion item.",
|
|
13
|
-
},
|
|
14
|
-
defaultOpen: {
|
|
15
|
-
control: { type: "object" },
|
|
16
|
-
description: "Accordion default one open [1]",
|
|
17
|
-
},
|
|
18
|
-
collapse: {
|
|
19
|
-
control: "boolean",
|
|
20
|
-
description:
|
|
21
|
-
"Accordion panel default one opened. Next one click close previous another one open",
|
|
22
|
-
},
|
|
23
|
-
accordionStyle: {
|
|
24
|
-
control: "select",
|
|
25
|
-
options: ["grouped", "separated"],
|
|
26
|
-
},
|
|
27
|
-
className: {
|
|
28
|
-
control: "text",
|
|
29
|
-
description:
|
|
30
|
-
"Additional CSS classes for styling the accordion container.",
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
} satisfies Meta<typeof EUIAccordion>;
|
|
34
|
-
|
|
35
|
-
export default meta;
|
|
36
|
-
type Story = StoryObj<typeof meta>;
|
|
37
|
-
|
|
38
|
-
export const Default: Story = {
|
|
39
|
-
args: {
|
|
40
|
-
datas: [
|
|
41
|
-
{
|
|
42
|
-
title: "1.How long does the course take?",
|
|
43
|
-
content:
|
|
44
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
title: "2.How long does the course take?",
|
|
48
|
-
content:
|
|
49
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
title: "3.How long does the course take?",
|
|
53
|
-
content:
|
|
54
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
title: "4.How long does the course take?",
|
|
58
|
-
content:
|
|
59
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
60
|
-
},
|
|
61
|
-
],
|
|
62
|
-
defaultOpen: [1],
|
|
63
|
-
accordionStyle: "grouped",
|
|
64
|
-
},
|
|
65
|
-
render: (args) => ({
|
|
66
|
-
components: { EUIAccordion },
|
|
67
|
-
setup() {
|
|
68
|
-
return { args };
|
|
69
|
-
},
|
|
70
|
-
template: `<EUIAccordion v-bind="args" />`,
|
|
71
|
-
}),
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export const AccordionCollopse: Story = {
|
|
75
|
-
args: {
|
|
76
|
-
datas: [
|
|
77
|
-
{
|
|
78
|
-
title: "1.How long does the course take?",
|
|
79
|
-
content:
|
|
80
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
title: "2.How long does the course take?",
|
|
84
|
-
content:
|
|
85
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
title: "3.How long does the course take?",
|
|
89
|
-
content:
|
|
90
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
title: "4.How long does the course take?",
|
|
94
|
-
content:
|
|
95
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
96
|
-
},
|
|
97
|
-
],
|
|
98
|
-
defaultOpen: [1],
|
|
99
|
-
collapse: true,
|
|
100
|
-
},
|
|
101
|
-
render: (args) => ({
|
|
102
|
-
components: { EUIAccordion },
|
|
103
|
-
setup() {
|
|
104
|
-
return { args };
|
|
105
|
-
},
|
|
106
|
-
template: `<EUIAccordion v-bind="args" />`,
|
|
107
|
-
}),
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
export const AccordionSeparated: Story = {
|
|
111
|
-
args: {
|
|
112
|
-
datas: [
|
|
113
|
-
{
|
|
114
|
-
title: "1.How long does the course take?",
|
|
115
|
-
content:
|
|
116
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
117
|
-
},
|
|
118
|
-
{
|
|
119
|
-
title: "2.How long does the course take?",
|
|
120
|
-
content:
|
|
121
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
title: "3.How long does the course take?",
|
|
125
|
-
content:
|
|
126
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
127
|
-
},
|
|
128
|
-
{
|
|
129
|
-
title: "4.How long does the course take?",
|
|
130
|
-
content:
|
|
131
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
132
|
-
},
|
|
133
|
-
],
|
|
134
|
-
defaultOpen: [1],
|
|
135
|
-
collapse: true,
|
|
136
|
-
accordionStyle: "separated",
|
|
137
|
-
},
|
|
138
|
-
render: (args) => ({
|
|
139
|
-
components: { EUIAccordion },
|
|
140
|
-
setup() {
|
|
141
|
-
return { args };
|
|
142
|
-
},
|
|
143
|
-
template: `<EUIAccordion v-bind="args" />`,
|
|
144
|
-
}),
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
export const UseTemplate: Story = {
|
|
148
|
-
args: {
|
|
149
|
-
datas: [
|
|
150
|
-
{
|
|
151
|
-
name: "How long does the course take?",
|
|
152
|
-
description:
|
|
153
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
154
|
-
},
|
|
155
|
-
],
|
|
156
|
-
defaultOpen: [0],
|
|
157
|
-
collapse: false,
|
|
158
|
-
},
|
|
159
|
-
render: (args) => ({
|
|
160
|
-
components: { EUIAccordion },
|
|
161
|
-
setup() {
|
|
162
|
-
return { args };
|
|
163
|
-
},
|
|
164
|
-
template: `<EUIAccordion v-bind="args">
|
|
165
|
-
<template #title="{ item }">
|
|
166
|
-
<h3>{{ item.name }}</h3>
|
|
167
|
-
</template>
|
|
168
|
-
<template #content="{ item }">
|
|
169
|
-
<p>{{ item.description }}</p>
|
|
170
|
-
</template>
|
|
171
|
-
</EUIAccordion>`,
|
|
172
|
-
}),
|
|
173
|
-
parameters: {
|
|
174
|
-
docs: {
|
|
175
|
-
description: {
|
|
176
|
-
story:
|
|
177
|
-
"* The template method allows you to define how content is rendered in the <mark>EUIAccordion</mark> component. \n\n* Named slots <mark>(#title, #content)</mark> enable you to customize the display of titles and content for each accordion item.",
|
|
178
|
-
},
|
|
179
|
-
source: {
|
|
180
|
-
code: `<script setup lang="ts">
|
|
181
|
-
const datas = [
|
|
182
|
-
{
|
|
183
|
-
name: "How long does the course take?",
|
|
184
|
-
description:
|
|
185
|
-
"The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
|
|
186
|
-
},
|
|
187
|
-
];
|
|
188
|
-
const defaultOpen = [0]
|
|
189
|
-
</script>
|
|
190
|
-
|
|
191
|
-
<template>
|
|
192
|
-
<EUIAccordion :datas="datas" :defaultOpen="defaultOpen">
|
|
193
|
-
<template #title="{ item }">
|
|
194
|
-
<h3>{{ item.name }}</h3>
|
|
195
|
-
</template>
|
|
196
|
-
<template #content="{ item }">
|
|
197
|
-
<p>{{ item.description }}</p>
|
|
198
|
-
</template>
|
|
199
|
-
</EUIAccordion>
|
|
200
|
-
</template>`,
|
|
201
|
-
},
|
|
202
|
-
},
|
|
203
|
-
},
|
|
204
|
-
};
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<div
|
|
4
|
-
:class="[
|
|
5
|
-
accordionStyle === 'grouped'
|
|
6
|
-
? 'p-2 bg-gray-50 rounded-xl'
|
|
7
|
-
: 'space-y-3',
|
|
8
|
-
'max-w-full transition-all duration-100 ease-in-out',
|
|
9
|
-
]"
|
|
10
|
-
>
|
|
11
|
-
<details
|
|
12
|
-
v-for="(item, index) in datas"
|
|
13
|
-
:key="`accordion-${index}`"
|
|
14
|
-
:open="openAccordions[index]"
|
|
15
|
-
@click.prevent="onClick(index)"
|
|
16
|
-
:class="[
|
|
17
|
-
accordionStyle === 'grouped'
|
|
18
|
-
? 'rounded-lg hover:bg-gray-100 open:bg-gray-100 open:mb-4 open:last:mb-0'
|
|
19
|
-
: 'bg-white px-8 py-4 rounded-2xl hover:ring-2 hover:ring-purple-500 open:ring-2 ring-purple-700 open:shadow-lg open:shadow-purple-100',
|
|
20
|
-
'box-border relative mx-auto my-0 text-base font-normal transition-colors duration-150 ease-in-out group',
|
|
21
|
-
className, item?.className,
|
|
22
|
-
]"
|
|
23
|
-
>
|
|
24
|
-
<summary
|
|
25
|
-
:class="[
|
|
26
|
-
accordionStyle === 'grouped'
|
|
27
|
-
? 'p-4'
|
|
28
|
-
: 'group-open:pb-4 gap-6 group-open:border-b group-open:border-gray-200',
|
|
29
|
-
'flex items-center font-semibold list-none cursor-pointer select-none focus:outline-none max-w-full justify-between',
|
|
30
|
-
]"
|
|
31
|
-
:aria-expanded="openAccordions[index]"
|
|
32
|
-
>
|
|
33
|
-
<div
|
|
34
|
-
:class="[
|
|
35
|
-
accordionStyle === 'grouped' ? 'w-11/12' : 'flex-initial w-[calc(75%-1.5rem)]',
|
|
36
|
-
'text-gray-700 transition-all duration-200 ease-in-out faq-title group-hover:text-gray-900 group-open:text-gray-900',
|
|
37
|
-
]"
|
|
38
|
-
>
|
|
39
|
-
<slot name="title" :item="item">
|
|
40
|
-
{{ item.title }}
|
|
41
|
-
</slot>
|
|
42
|
-
</div>
|
|
43
|
-
<svg
|
|
44
|
-
v-if="accordionStyle === 'grouped'"
|
|
45
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
46
|
-
class="absolute text-gray-700 transition-all duration-150 ease-out pointer-events-none expand-icon group-open:text-gray-900 right-4 group-open:rotate-90"
|
|
47
|
-
width="24"
|
|
48
|
-
height="24"
|
|
49
|
-
viewBox="0 0 24 24"
|
|
50
|
-
stroke-width="2"
|
|
51
|
-
stroke="currentColor"
|
|
52
|
-
fill="none"
|
|
53
|
-
stroke-linecap="round"
|
|
54
|
-
stroke-linejoin="round"
|
|
55
|
-
>
|
|
56
|
-
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
57
|
-
<path d="M9 6l6 6l-6 6"></path>
|
|
58
|
-
</svg>
|
|
59
|
-
<div v-else class="flex-1 max-w-[25%] flex items-center justify-end gap-3" @click.stop>
|
|
60
|
-
<slot name="right-icon" :item="item"></slot>
|
|
61
|
-
</div>
|
|
62
|
-
</summary>
|
|
63
|
-
<div
|
|
64
|
-
:class="[
|
|
65
|
-
accordionStyle === 'grouped' ? 'p-4 pt-1 ' : 'pt-3',
|
|
66
|
-
'font-light text-gray-600',
|
|
67
|
-
]"
|
|
68
|
-
>
|
|
69
|
-
<slot name="content" :item="item">
|
|
70
|
-
{{ item.content }}
|
|
71
|
-
</slot>
|
|
72
|
-
</div>
|
|
73
|
-
</details>
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
</template>
|
|
77
|
-
|
|
78
|
-
<script setup lang="ts">
|
|
79
|
-
import { onMounted, PropType, ref, watch } from "vue";
|
|
80
|
-
|
|
81
|
-
const props = defineProps({
|
|
82
|
-
datas: {
|
|
83
|
-
type: Array as PropType<any[]>,
|
|
84
|
-
required: true,
|
|
85
|
-
default: () => [],
|
|
86
|
-
},
|
|
87
|
-
defaultOpen: {
|
|
88
|
-
type: Array as PropType<number[]>,
|
|
89
|
-
default: () => [0],
|
|
90
|
-
},
|
|
91
|
-
collapse: {
|
|
92
|
-
type: Boolean,
|
|
93
|
-
default: false,
|
|
94
|
-
},
|
|
95
|
-
accordionStyle: {
|
|
96
|
-
type: String as PropType<"grouped" | "separated">,
|
|
97
|
-
default: "grouped",
|
|
98
|
-
},
|
|
99
|
-
className: {
|
|
100
|
-
type: String,
|
|
101
|
-
required: false,
|
|
102
|
-
},
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
const openAccordions = ref<boolean[]>(Array(props.datas.length).fill(false));
|
|
106
|
-
|
|
107
|
-
const initializeOpenAccordions = () => {
|
|
108
|
-
openAccordions.value = props.datas.map((_, index) =>
|
|
109
|
-
props.defaultOpen.includes(index)
|
|
110
|
-
);
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
watch(
|
|
114
|
-
() => props.defaultOpen,
|
|
115
|
-
() => {
|
|
116
|
-
initializeOpenAccordions();
|
|
117
|
-
},
|
|
118
|
-
{ immediate: true }
|
|
119
|
-
);
|
|
120
|
-
|
|
121
|
-
onMounted(() => {
|
|
122
|
-
props.defaultOpen.forEach((index: number) => {
|
|
123
|
-
if (index >= 0 && index < openAccordions.value.length) {
|
|
124
|
-
openAccordions.value[index] = true; // Open specified accordions
|
|
125
|
-
}
|
|
126
|
-
});
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
const emit = defineEmits(['update:activeItem']);
|
|
130
|
-
const onClick = (index: number) => {
|
|
131
|
-
// openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
|
|
132
|
-
if (props.collapse) {
|
|
133
|
-
openAccordions.value = openAccordions.value.map((_, i) => i === index);
|
|
134
|
-
} else {
|
|
135
|
-
openAccordions.value = openAccordions.value.map((isOpen, i) =>
|
|
136
|
-
i === index ? !isOpen : isOpen
|
|
137
|
-
);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
// Emit active index accessible from parent component
|
|
141
|
-
const activeItems = openAccordions.value.map((isOpen, i) => (isOpen ? i : null)).filter((i) => i !== null);
|
|
142
|
-
emit('update:activeItem', activeItems);
|
|
143
|
-
};
|
|
144
|
-
</script>
|
|
145
|
-
|
|
146
|
-
<style lang="scss" scoped>
|
|
147
|
-
summary {
|
|
148
|
-
&::-webkit-details-marker {
|
|
149
|
-
display: none;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
</style>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EUIAccordion.vue.js","sourceRoot":"","sources":["EUIAccordion.vue"],"names":[],"mappings":"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"}
|
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/vue3";
|
|
2
|
-
import EUIAlerts from "./EUIAlerts.vue"; // Adjust the path if necessary
|
|
3
|
-
import { CalendarDaysIcon } from "@heroicons/vue/24/outline";
|
|
4
|
-
|
|
5
|
-
const meta = {
|
|
6
|
-
title: "Components/Alerts",
|
|
7
|
-
component: EUIAlerts,
|
|
8
|
-
tags: ["autodocs"],
|
|
9
|
-
argTypes: {
|
|
10
|
-
...{
|
|
11
|
-
showAlert: {
|
|
12
|
-
control: "boolean",
|
|
13
|
-
description: "Controls the visibility of the alert.",
|
|
14
|
-
defaultValue: true,
|
|
15
|
-
},
|
|
16
|
-
alertType: {
|
|
17
|
-
control: {
|
|
18
|
-
type: "select",
|
|
19
|
-
options: ["Default", "Warning", "Success", "Error"],
|
|
20
|
-
},
|
|
21
|
-
description:
|
|
22
|
-
'Determines the style and icon of the alert. Options are "Default", "Warning", "Success", and "Error".',
|
|
23
|
-
},
|
|
24
|
-
heading: {
|
|
25
|
-
control: "text",
|
|
26
|
-
description: "The title text displayed in the alert header.",
|
|
27
|
-
},
|
|
28
|
-
textMessage: {
|
|
29
|
-
control: "text",
|
|
30
|
-
description:
|
|
31
|
-
"Additional information about the alert. This text appears below the title.",
|
|
32
|
-
},
|
|
33
|
-
alertIcon: {
|
|
34
|
-
control: "text",
|
|
35
|
-
description:
|
|
36
|
-
"An optional custom icon to display. This can be a Vue component, a string, or a function.",
|
|
37
|
-
},
|
|
38
|
-
closeIcon: {
|
|
39
|
-
control: "boolean",
|
|
40
|
-
description:
|
|
41
|
-
"If set to true, shows a close icon to allow dismissing the alert.",
|
|
42
|
-
},
|
|
43
|
-
actionItems: {
|
|
44
|
-
control: "boolean",
|
|
45
|
-
description:
|
|
46
|
-
'If set to true, displays action buttons (e.g., "View status" and "Dismiss") within the alert.',
|
|
47
|
-
},
|
|
48
|
-
"update:showAlert": {
|
|
49
|
-
action: "update:showAlert",
|
|
50
|
-
description: "Emitted to update the visibility of the alert.",
|
|
51
|
-
},
|
|
52
|
-
alertAction: {
|
|
53
|
-
action: "alertAction",
|
|
54
|
-
description: "Emitted when the action button is clicked.",
|
|
55
|
-
},
|
|
56
|
-
alertDismiss: {
|
|
57
|
-
action: "alertDismiss",
|
|
58
|
-
description: "Emitted when the alert is dismissed.",
|
|
59
|
-
},
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
parameters: {
|
|
63
|
-
docs: {
|
|
64
|
-
description: {
|
|
65
|
-
component:
|
|
66
|
-
"An alert component that displays messages with various styles (Default, Warning, Success, Error). It supports custom titles, descriptions, icons, and optional action buttons.",
|
|
67
|
-
},
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
} satisfies Meta<typeof EUIAlerts>;
|
|
71
|
-
|
|
72
|
-
export default meta;
|
|
73
|
-
type Story = StoryObj<typeof meta>;
|
|
74
|
-
|
|
75
|
-
// Default button story with default slot content
|
|
76
|
-
export const Default: Story = {
|
|
77
|
-
argTypes: {
|
|
78
|
-
alertType: {
|
|
79
|
-
control: "select",
|
|
80
|
-
options: ["Default", "Warning", "Success", "Error"],
|
|
81
|
-
},
|
|
82
|
-
alertIcon: {
|
|
83
|
-
control: "text",
|
|
84
|
-
},
|
|
85
|
-
},
|
|
86
|
-
args: {
|
|
87
|
-
alertType: "Default",
|
|
88
|
-
showAlert: true,
|
|
89
|
-
heading: "Default Alert",
|
|
90
|
-
textMessage: "This is a default alert message.",
|
|
91
|
-
},
|
|
92
|
-
render: (args) => ({
|
|
93
|
-
components: { EUIAlerts },
|
|
94
|
-
setup() {
|
|
95
|
-
return { args };
|
|
96
|
-
},
|
|
97
|
-
template: `<EUIAlerts v-bind="args"></EUIAlerts>`,
|
|
98
|
-
}),
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
export const onlyTitle: Story = {
|
|
102
|
-
args: {
|
|
103
|
-
alertType: "Success",
|
|
104
|
-
heading: "Your account activated",
|
|
105
|
-
},
|
|
106
|
-
render: (args) => ({
|
|
107
|
-
components: { EUIAlerts },
|
|
108
|
-
setup() {
|
|
109
|
-
return { args };
|
|
110
|
-
},
|
|
111
|
-
template: `<EUIAlerts v-bind="args"></EUIAlerts>`,
|
|
112
|
-
}),
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
export const UseCustomIcon: Story = {
|
|
116
|
-
args: {
|
|
117
|
-
alertType: "Success",
|
|
118
|
-
heading: "Send Icon here",
|
|
119
|
-
alertIcon: CalendarDaysIcon,
|
|
120
|
-
},
|
|
121
|
-
render: (args) => ({
|
|
122
|
-
components: { EUIAlerts, CalendarDaysIcon },
|
|
123
|
-
setup() {
|
|
124
|
-
return { args };
|
|
125
|
-
},
|
|
126
|
-
template: `<EUIAlerts v-bind="args"></EUIAlerts>`,
|
|
127
|
-
}),
|
|
128
|
-
parameters: {
|
|
129
|
-
docs: {
|
|
130
|
-
source: {
|
|
131
|
-
code: `<template>
|
|
132
|
-
<EUIAlerts
|
|
133
|
-
alertType="Success"
|
|
134
|
-
heading="Send Icon here"
|
|
135
|
-
:alertIcon="CalendarDaysIcon"
|
|
136
|
-
>
|
|
137
|
-
</EUIAlerts>
|
|
138
|
-
</template>`,
|
|
139
|
-
},
|
|
140
|
-
},
|
|
141
|
-
},
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
export const EnableClose: Story = {
|
|
145
|
-
args: {
|
|
146
|
-
alertType: "Default",
|
|
147
|
-
heading: "Close Icon Boolean enabled",
|
|
148
|
-
closeIcon: true,
|
|
149
|
-
},
|
|
150
|
-
render: (args) => ({
|
|
151
|
-
components: { EUIAlerts },
|
|
152
|
-
setup() {
|
|
153
|
-
return { args };
|
|
154
|
-
},
|
|
155
|
-
template: `<EUIAlerts v-bind="args"></EUIAlerts>`,
|
|
156
|
-
}),
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
export const UseSlots: Story = {
|
|
160
|
-
args: {
|
|
161
|
-
alertType: "Warning",
|
|
162
|
-
alertIcon: CalendarDaysIcon,
|
|
163
|
-
},
|
|
164
|
-
render: (args) => ({
|
|
165
|
-
components: { EUIAlerts },
|
|
166
|
-
setup() {
|
|
167
|
-
return { args };
|
|
168
|
-
},
|
|
169
|
-
template: `<EUIAlerts v-bind="args">
|
|
170
|
-
<template #title> Custom Header here</template>
|
|
171
|
-
<template #content><p class="text-sm font-normal"> Custom message here Are you sure you want to deactivate your account?.</p></template>
|
|
172
|
-
<template #actionButtons>
|
|
173
|
-
<div class="mt-4">
|
|
174
|
-
<button type="button"
|
|
175
|
-
class="rounded-md px-3 py-1.5 text-sm font-medium bg-black text-white focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
176
|
-
>
|
|
177
|
-
View status
|
|
178
|
-
</button>
|
|
179
|
-
<button
|
|
180
|
-
type="button"
|
|
181
|
-
class="ml-3 rounded-md px-3 py-1.5 bg-white text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
182
|
-
>
|
|
183
|
-
Dismiss
|
|
184
|
-
</button>
|
|
185
|
-
</div>
|
|
186
|
-
</template>
|
|
187
|
-
</EUIAlerts>`,
|
|
188
|
-
}),
|
|
189
|
-
parameters: {
|
|
190
|
-
docs: {
|
|
191
|
-
source: {
|
|
192
|
-
code: `<template>
|
|
193
|
-
<EUIAlerts>
|
|
194
|
-
<template #icon> <CalendarDaysIcon class="text-current size-5" aria-hidden="true" /></template>
|
|
195
|
-
<template #title> Custom Header here</template>
|
|
196
|
-
<template #content><p class="text-sm font-normal"> Custom message here Are you sure you want to deactivate your account?.</p></template>
|
|
197
|
-
<template #actionButtons>
|
|
198
|
-
<div>
|
|
199
|
-
<button type="button"
|
|
200
|
-
class="rounded-md px-3 py-1.5 text-sm font-medium bg-black text-white focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
201
|
-
>
|
|
202
|
-
View status
|
|
203
|
-
</button>
|
|
204
|
-
<button
|
|
205
|
-
type="button"
|
|
206
|
-
class="ml-3 rounded-md px-3 py-1.5 bg-white text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
207
|
-
>
|
|
208
|
-
Dismiss
|
|
209
|
-
</button>
|
|
210
|
-
</div>
|
|
211
|
-
</template>
|
|
212
|
-
</EUIAlerts>
|
|
213
|
-
</template>`,
|
|
214
|
-
},
|
|
215
|
-
},
|
|
216
|
-
},
|
|
217
|
-
};
|