@eturnity/eturnity_reusable_components 7.45.5-EPDM-11711.0 → 7.45.5-EPDM-11313-EPDM-11314.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +29 -29
- package/package.json +85 -85
- package/src/App.vue +30 -30
- package/src/Test.vue +128 -128
- package/src/assets/icons/arrow_down.svg +3 -3
- package/src/assets/icons/arrow_up_red.svg +3 -3
- package/src/assets/icons/black_spinner.svg +35 -35
- package/src/assets/icons/delete_icon.svg +11 -11
- package/src/assets/icons/delete_icon_gray.svg +11 -11
- package/src/assets/icons/drag_icon.svg +8 -8
- package/src/assets/icons/external_icon.svg +6 -6
- package/src/assets/icons/language_icon.svg +6 -6
- package/src/assets/icons/pdf_icon.svg +6 -6
- package/src/assets/icons/plus_button.svg +4 -4
- package/src/assets/icons/search_icon_black.svg +3 -3
- package/src/assets/icons/subposition_icon.svg +3 -3
- package/src/assets/icons/subposition_marker.svg +3 -3
- package/src/assets/icons/warning_icon.svg +3 -3
- package/src/assets/svgIcons/2d_active.svg +7 -7
- package/src/assets/svgIcons/2d_inactive.svg +8 -8
- package/src/assets/svgIcons/3d_active.svg +7 -7
- package/src/assets/svgIcons/3d_inactive.svg +8 -8
- package/src/assets/svgIcons/_readme.md +7 -7
- package/src/assets/svgIcons/accept.svg +5 -5
- package/src/assets/svgIcons/activate_panels_active.svg +22 -22
- package/src/assets/svgIcons/activate_panels_inactive.svg +20 -20
- package/src/assets/svgIcons/add_icon-1.svg +3 -3
- package/src/assets/svgIcons/add_icon.svg +4 -4
- package/src/assets/svgIcons/address_book.svg +3 -3
- package/src/assets/svgIcons/adjust_roof.svg +6 -6
- package/src/assets/svgIcons/after_sale_as_a_service.svg +6 -6
- package/src/assets/svgIcons/all_good.svg +3 -3
- package/src/assets/svgIcons/angle_active.svg +5 -5
- package/src/assets/svgIcons/angle_inactive.svg +4 -4
- package/src/assets/svgIcons/area_active.svg +11 -11
- package/src/assets/svgIcons/area_inactive.svg +26 -26
- package/src/assets/svgIcons/areas_tool.svg +14 -14
- package/src/assets/svgIcons/arrow_down.svg +3 -3
- package/src/assets/svgIcons/arrow_left.svg +4 -4
- package/src/assets/svgIcons/arrow_right.svg +4 -4
- package/src/assets/svgIcons/arrow_up.svg +3 -3
- package/src/assets/svgIcons/attachment.svg +3 -3
- package/src/assets/svgIcons/base_layer.svg +3 -3
- package/src/assets/svgIcons/battery.svg +3 -3
- package/src/assets/svgIcons/bell.svg +3 -3
- package/src/assets/svgIcons/bexio.svg +4 -4
- package/src/assets/svgIcons/bold.svg +3 -3
- package/src/assets/svgIcons/bom.svg +3 -3
- package/src/assets/svgIcons/bom_generation.svg +10 -10
- package/src/assets/svgIcons/bookmaker.svg +3 -3
- package/src/assets/svgIcons/bubble.svg +3 -3
- package/src/assets/svgIcons/bug.svg +5 -5
- package/src/assets/svgIcons/buildings.svg +55 -55
- package/src/assets/svgIcons/bullet_list.svg +8 -8
- package/src/assets/svgIcons/calendar.svg +7 -7
- package/src/assets/svgIcons/calendar_icon.svg +7 -7
- package/src/assets/svgIcons/call.svg +3 -3
- package/src/assets/svgIcons/camera.svg +3 -3
- package/src/assets/svgIcons/car.svg +3 -3
- package/src/assets/svgIcons/cart.svg +3 -3
- package/src/assets/svgIcons/charger_icon_white.svg +44 -44
- package/src/assets/svgIcons/checkbox.svg +3 -3
- package/src/assets/svgIcons/clear_formatting.svg +7 -7
- package/src/assets/svgIcons/clickable_info.svg +4 -4
- package/src/assets/svgIcons/clip.svg +3 -3
- package/src/assets/svgIcons/clock.svg +17 -17
- package/src/assets/svgIcons/clock_full.svg +3 -3
- package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +4 -4
- package/src/assets/svgIcons/co_branding.svg +5 -5
- package/src/assets/svgIcons/collapse.svg +4 -4
- package/src/assets/svgIcons/collections.svg +3 -3
- package/src/assets/svgIcons/component_library.svg +7 -7
- package/src/assets/svgIcons/consumption_tariffs.svg +43 -43
- package/src/assets/svgIcons/context_menu-1.svg +6 -6
- package/src/assets/svgIcons/context_menu-2.svg +5 -5
- package/src/assets/svgIcons/context_menu.svg +5 -5
- package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
- package/src/assets/svgIcons/cross.svg +4 -4
- package/src/assets/svgIcons/current_variant.svg +4 -4
- package/src/assets/svgIcons/dashboard.svg +3 -3
- package/src/assets/svgIcons/data_transfer.svg +3 -3
- package/src/assets/svgIcons/deadline.svg +4 -4
- package/src/assets/svgIcons/deal_flow.svg +5 -5
- package/src/assets/svgIcons/delete.svg +4 -4
- package/src/assets/svgIcons/delete_area_active.svg +16 -16
- package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
- package/src/assets/svgIcons/direction_active-1.svg +12 -12
- package/src/assets/svgIcons/direction_active.svg +5 -5
- package/src/assets/svgIcons/direction_arrow.svg +4 -4
- package/src/assets/svgIcons/direction_inactive.svg +4 -4
- package/src/assets/svgIcons/dislike.svg +3 -3
- package/src/assets/svgIcons/distance_tool.svg +8 -8
- package/src/assets/svgIcons/distances_active.svg +9 -9
- package/src/assets/svgIcons/distances_inactive.svg +8 -8
- package/src/assets/svgIcons/distort_tool.svg +10 -10
- package/src/assets/svgIcons/distort_tool2.svg +16 -16
- package/src/assets/svgIcons/document.svg +3 -3
- package/src/assets/svgIcons/documents.svg +4 -4
- package/src/assets/svgIcons/downarrow.svg +3 -3
- package/src/assets/svgIcons/download.svg +4 -4
- package/src/assets/svgIcons/drag_icon.svg +8 -8
- package/src/assets/svgIcons/draggable_corner.svg +5 -5
- package/src/assets/svgIcons/draw_tool.svg +3 -3
- package/src/assets/svgIcons/duplicate-1.svg +8 -8
- package/src/assets/svgIcons/duplicate-2.svg +5 -5
- package/src/assets/svgIcons/duplicate.svg +4 -4
- package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
- package/src/assets/svgIcons/e_signature.svg +5 -5
- package/src/assets/svgIcons/edit_button.svg +3 -3
- package/src/assets/svgIcons/electricity_tariff.svg +3 -3
- package/src/assets/svgIcons/email.svg +3 -3
- package/src/assets/svgIcons/ems-1.svg +3 -3
- package/src/assets/svgIcons/ems.svg +3 -3
- package/src/assets/svgIcons/end_of_the_list.svg +5 -5
- package/src/assets/svgIcons/erase.svg +4 -4
- package/src/assets/svgIcons/external_icon.svg +5 -5
- package/src/assets/svgIcons/fav_icon.svg +4 -4
- package/src/assets/svgIcons/finance.svg +3 -3
- package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
- package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
- package/src/assets/svgIcons/financing_for_pv.svg +6 -6
- package/src/assets/svgIcons/finish-1.svg +4 -4
- package/src/assets/svgIcons/finish.svg +3 -3
- package/src/assets/svgIcons/flatten.svg +11 -11
- package/src/assets/svgIcons/flatten_roof.svg +20 -20
- package/src/assets/svgIcons/folder.svg +3 -3
- package/src/assets/svgIcons/free_technology.svg +5 -5
- package/src/assets/svgIcons/handle.svg +5 -5
- package/src/assets/svgIcons/heat_calc.svg +7 -7
- package/src/assets/svgIcons/height_equalize.svg +3 -3
- package/src/assets/svgIcons/height_snap.svg +3 -3
- package/src/assets/svgIcons/house.svg +3 -3
- package/src/assets/svgIcons/house_3d-1.svg +7 -7
- package/src/assets/svgIcons/house_3d.svg +7 -7
- package/src/assets/svgIcons/inclination.svg +2 -2
- package/src/assets/svgIcons/info.svg +3 -3
- package/src/assets/svgIcons/initial_situation.svg +3 -3
- package/src/assets/svgIcons/integrations.svg +3 -3
- package/src/assets/svgIcons/intro-tour-1.svg +3 -3
- package/src/assets/svgIcons/intro-tour.svg +3 -3
- package/src/assets/svgIcons/inverter-1.svg +5 -5
- package/src/assets/svgIcons/inverter.svg +3 -3
- package/src/assets/svgIcons/italic.svg +3 -3
- package/src/assets/svgIcons/key.svg +3 -3
- package/src/assets/svgIcons/lake.svg +29 -29
- package/src/assets/svgIcons/layers_close.svg +4 -4
- package/src/assets/svgIcons/layers_open.svg +4 -4
- package/src/assets/svgIcons/lead_marketplace.svg +6 -6
- package/src/assets/svgIcons/lead_provider.svg +4 -4
- package/src/assets/svgIcons/length_2d.svg +2 -2
- package/src/assets/svgIcons/length_3d.svg +4 -4
- package/src/assets/svgIcons/length_calculator.svg +2 -2
- package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
- package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
- package/src/assets/svgIcons/light_bulb.svg +3 -3
- package/src/assets/svgIcons/like.svg +3 -3
- package/src/assets/svgIcons/line_graph.svg +3 -3
- package/src/assets/svgIcons/local_subsidies.svg +18 -18
- package/src/assets/svgIcons/location.svg +3 -3
- package/src/assets/svgIcons/lock.svg +3 -3
- package/src/assets/svgIcons/logout.svg +3 -3
- package/src/assets/svgIcons/loop.svg +3 -3
- package/src/assets/svgIcons/low-vegetation.svg +37 -37
- package/src/assets/svgIcons/lunch.svg +4 -4
- package/src/assets/svgIcons/magic_tool.svg +6 -6
- package/src/assets/svgIcons/map_icon.svg +5 -5
- package/src/assets/svgIcons/map_settings.svg +3 -3
- package/src/assets/svgIcons/margin_tool.svg +4 -4
- package/src/assets/svgIcons/meeting.svg +6 -6
- package/src/assets/svgIcons/move_copy.svg +4 -4
- package/src/assets/svgIcons/new_area_inactive.svg +11 -11
- package/src/assets/svgIcons/next.svg +4 -4
- package/src/assets/svgIcons/normal-tg.svg +30 -30
- package/src/assets/svgIcons/normal-vegetation.svg +53 -53
- package/src/assets/svgIcons/not_equal_to.svg +3 -3
- package/src/assets/svgIcons/numbered_list.svg +6 -6
- package/src/assets/svgIcons/obstacle_tool.svg +8 -8
- package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
- package/src/assets/svgIcons/offset_tool.svg +8 -8
- package/src/assets/svgIcons/open-tg.svg +21 -21
- package/src/assets/svgIcons/outline_tool.svg +11 -11
- package/src/assets/svgIcons/pan_tool.svg +12 -12
- package/src/assets/svgIcons/panels_tool.svg +8 -8
- package/src/assets/svgIcons/pen_tool.svg +4 -4
- package/src/assets/svgIcons/picker_tool.svg +4 -4
- package/src/assets/svgIcons/picture.svg +3 -3
- package/src/assets/svgIcons/pin.svg +5 -5
- package/src/assets/svgIcons/presentation.svg +3 -3
- package/src/assets/svgIcons/previous.svg +4 -4
- package/src/assets/svgIcons/profile-1.svg +4 -4
- package/src/assets/svgIcons/profile.svg +4 -4
- package/src/assets/svgIcons/profitability.svg +3 -3
- package/src/assets/svgIcons/project_analysis.svg +4 -4
- package/src/assets/svgIcons/project_settings.svg +4 -4
- package/src/assets/svgIcons/protected-tg.svg +47 -47
- package/src/assets/svgIcons/pv.svg +3 -3
- package/src/assets/svgIcons/quotations.svg +6 -6
- package/src/assets/svgIcons/redo.svg +6 -6
- package/src/assets/svgIcons/resizer.svg +5 -5
- package/src/assets/svgIcons/roof_layer.svg +3 -3
- package/src/assets/svgIcons/rotate_tool.svg +3 -3
- package/src/assets/svgIcons/rotate_view.svg +5 -5
- package/src/assets/svgIcons/ruler_tool.svg +3 -3
- package/src/assets/svgIcons/run_simulation.svg +3 -3
- package/src/assets/svgIcons/save.svg +3 -3
- package/src/assets/svgIcons/scaling_tool.svg +8 -8
- package/src/assets/svgIcons/sea.svg +34 -34
- package/src/assets/svgIcons/search.svg +3 -3
- package/src/assets/svgIcons/security.svg +3 -3
- package/src/assets/svgIcons/settings.svg +3 -3
- package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
- package/src/assets/svgIcons/smartphone.svg +4 -4
- package/src/assets/svgIcons/solar_calc.svg +13 -13
- package/src/assets/svgIcons/sorting.svg +4 -4
- package/src/assets/svgIcons/split.svg +12 -12
- package/src/assets/svgIcons/start_of_the_list.svg +5 -5
- package/src/assets/svgIcons/strikethrough.svg +4 -4
- package/src/assets/svgIcons/subscriptions.svg +3 -3
- package/src/assets/svgIcons/subsidies-1.svg +5 -5
- package/src/assets/svgIcons/subsidies-2.svg +3 -3
- package/src/assets/svgIcons/subsidies.svg +3 -3
- package/src/assets/svgIcons/subtract_icon.svg +3 -3
- package/src/assets/svgIcons/suitcase.svg +3 -3
- package/src/assets/svgIcons/summer.svg +3 -3
- package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
- package/src/assets/svgIcons/transfer.svg +4 -4
- package/src/assets/svgIcons/trim_tool.svg +4 -4
- package/src/assets/svgIcons/truck.svg +3 -3
- package/src/assets/svgIcons/underlined.svg +3 -3
- package/src/assets/svgIcons/undo.svg +6 -6
- package/src/assets/svgIcons/uparrow.svg +3 -3
- package/src/assets/svgIcons/update.svg +3 -3
- package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
- package/src/assets/svgIcons/upload_avatar.svg +5 -5
- package/src/assets/svgIcons/upload_image.svg +8 -8
- package/src/assets/svgIcons/upload_image_tool.svg +7 -7
- package/src/assets/svgIcons/variants.svg +6 -6
- package/src/assets/svgIcons/vertical_tool.svg +3 -3
- package/src/assets/svgIcons/virtual_storage.svg +4 -4
- package/src/assets/svgIcons/warning.svg +4 -4
- package/src/assets/svgIcons/way.svg +5 -5
- package/src/assets/svgIcons/wifi.svg +3 -3
- package/src/assets/svgIcons/winter.svg +3 -3
- package/src/assets/svgIcons/workflow_template.svg +11 -11
- package/src/assets/tests/__mocks__/iconCache.js +1 -1
- package/src/assets/tests/__mocks__/svgMock.js +1 -1
- package/src/assets/tests/helpers.js +12 -12
- package/src/assets/theme.js +44 -44
- package/src/components/addNewButton/AddNewButton.stories.js +17 -17
- package/src/components/addNewButton/addNewButton.spec.js +23 -23
- package/src/components/addNewButton/index.vue +62 -62
- package/src/components/banner/actionBanner/ActionBanner.stories.js +45 -45
- package/src/components/banner/actionBanner/actionBanner.spec.js +76 -76
- package/src/components/banner/actionBanner/index.vue +86 -86
- package/src/components/banner/banner/Banner.stories.js +64 -64
- package/src/components/banner/banner/banner.spec.js +149 -149
- package/src/components/banner/banner/index.vue +205 -205
- package/src/components/banner/infoBanner/InfoBanner.spec.js +70 -70
- package/src/components/banner/infoBanner/InfoBanner.stories.js +42 -42
- package/src/components/banner/infoBanner/index.vue +97 -97
- package/src/components/buttons/buttonIcon/index.vue +145 -145
- package/src/components/buttons/closeButton/CloseButton.stories.js +25 -25
- package/src/components/buttons/closeButton/index.vue +62 -62
- package/src/components/buttons/mainButton/MainButton.stories.js +51 -51
- package/src/components/buttons/mainButton/index.vue +155 -150
- package/src/components/buttons/mainButton/mainButton.spec.js +35 -35
- package/src/components/card/Card.stories.js +79 -79
- package/src/components/card/card.spec.js +135 -135
- package/src/components/card/index.vue +116 -116
- package/src/components/collapsableInfoText/index.vue +127 -127
- package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
- package/src/components/deleteIcon/index.vue +78 -78
- package/src/components/draggableInputHandle/index.vue +46 -46
- package/src/components/dropdown/Dropdown.stories.js +53 -53
- package/src/components/dropdown/index.vue +138 -138
- package/src/components/errorMessage/index.vue +64 -64
- package/src/components/filter/filterSettings.vue +669 -669
- package/src/components/filter/index.vue +154 -154
- package/src/components/filter/parentDropdown.vue +91 -91
- package/src/components/icon/Icons.stories.js +41 -41
- package/src/components/icon/iconCache.mjs +23 -23
- package/src/components/icon/iconCollection.vue +82 -82
- package/src/components/icon/index.vue +140 -150
- package/src/components/iconWrapper/index.vue +179 -179
- package/src/components/infoCard/index.vue +126 -67
- package/src/components/infoText/index.vue +190 -190
- package/src/components/inputs/checkbox/Checkbox.stories.js +63 -63
- package/src/components/inputs/checkbox/checkbox.spec.js +109 -109
- package/src/components/inputs/checkbox/index.vue +225 -225
- package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
- package/src/components/inputs/inputNumber/index.vue +789 -789
- package/src/components/inputs/inputNumberQuestion/index.vue +218 -218
- package/src/components/inputs/inputText/InputText.stories.js +75 -75
- package/src/components/inputs/inputText/index.vue +380 -380
- package/src/components/inputs/radioButton/RadioButton.stories.js +77 -77
- package/src/components/inputs/radioButton/defaultProps.js +33 -33
- package/src/components/inputs/radioButton/index.vue +309 -309
- package/src/components/inputs/radioButton/radioButton.spec.js +269 -269
- package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
- package/src/components/inputs/searchInput/index.vue +151 -151
- package/src/components/inputs/select/index.vue +917 -910
- package/src/components/inputs/select/option/index.vue +156 -156
- package/src/components/inputs/select/select.stories.js +58 -58
- package/src/components/inputs/slider/index.vue +126 -126
- package/src/components/inputs/switchField/index.vue +254 -254
- package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
- package/src/components/inputs/textAreaInput/index.vue +198 -198
- package/src/components/inputs/toggle/Toggle.stories.js +77 -77
- package/src/components/inputs/toggle/index.vue +317 -317
- package/src/components/inputs/toggle/toggle.spec.js +102 -102
- package/src/components/label/index.vue +99 -99
- package/src/components/markerItem/index.vue +88 -88
- package/src/components/modals/actionModal/index.vue +64 -64
- package/src/components/modals/infoModal/index.vue +52 -52
- package/src/components/modals/modal/index.vue +196 -190
- package/src/components/modals/modal/modal.stories.js +31 -31
- package/src/components/navigationTabs/index.vue +114 -114
- package/src/components/pageSubtitle/PageSubtitle.stories.js +59 -59
- package/src/components/pageSubtitle/index.vue +78 -78
- package/src/components/pageSubtitle/pageSubtitle.spec.js +46 -46
- package/src/components/pageTitle/PageTitle.stories.js +95 -95
- package/src/components/pageTitle/index.vue +91 -91
- package/src/components/pageTitle/pageTitle.spec.js +46 -46
- package/src/components/pagination/index.vue +148 -148
- package/src/components/progressBar/index.vue +125 -125
- package/src/components/projectMarker/index.vue +300 -300
- package/src/components/rangeSlider/Slider.vue +573 -573
- package/src/components/rangeSlider/index.vue +517 -517
- package/src/components/rangeSlider/utils/dom.js +49 -49
- package/src/components/rangeSlider/utils/fns.js +26 -26
- package/src/components/roundTabs/index.vue +107 -107
- package/src/components/selectedOptions/index.vue +471 -471
- package/src/components/selectedOptions/selectedOptions.spec.js +176 -176
- package/src/components/selectedOptions/selectedOptions.stories.js +155 -155
- package/src/components/sideMenu/index.vue +270 -270
- package/src/components/spinner/Spinner.stories.js +34 -34
- package/src/components/spinner/index.vue +85 -85
- package/src/components/spinner/spinner.spec.js +69 -69
- package/src/components/tableDropdown/index.vue +638 -638
- package/src/components/tables/mainTable/exampleNested.vue +328 -328
- package/src/components/tables/mainTable/index.vue +510 -510
- package/src/components/tables/viewTable/index.vue +195 -195
- package/src/components/tabsHeader/index.vue +83 -83
- package/src/components/threeDots/index.vue +413 -413
- package/src/components/videoThumbnail/index.vue +103 -103
- package/src/components/videoThumbnail/videoThumbnail.stories.js +33 -33
- package/src/helpers/currencyMapping.js +28 -28
- package/src/helpers/numberConverter.js +103 -103
- package/src/helpers/translateLang.js +128 -128
- package/src/main.js +7 -7
- package/src/mixins/inputValidations.js +97 -97
- package/src/router/dynamicRoutes.js +23 -23
- package/src/stories/Button.stories.js +48 -48
- package/src/stories/Button.vue +52 -52
- package/src/stories/Configure.mdx +364 -364
- package/src/stories/Header.stories.js +41 -41
- package/src/stories/Header.vue +59 -59
- package/src/stories/Page.stories.js +30 -30
- package/src/stories/Page.vue +83 -83
- package/src/stories/button.css +30 -30
- package/src/stories/header.css +32 -32
- package/src/stories/page.css +69 -69
- package/src/utils/index.js +12 -12
- package/src/components/icon/icon.spec.js +0 -66
package/src/stories/Button.vue
CHANGED
@@ -1,52 +1,52 @@
|
|
1
|
-
<template>
|
2
|
-
<button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
|
3
|
-
</template>
|
4
|
-
|
5
|
-
<script>
|
6
|
-
import './button.css';
|
7
|
-
import { reactive, computed } from 'vue';
|
8
|
-
|
9
|
-
export default {
|
10
|
-
name: 'my-button',
|
11
|
-
|
12
|
-
props: {
|
13
|
-
label: {
|
14
|
-
type: String,
|
15
|
-
required: true,
|
16
|
-
},
|
17
|
-
primary: {
|
18
|
-
type: Boolean,
|
19
|
-
default: false,
|
20
|
-
},
|
21
|
-
size: {
|
22
|
-
type: String,
|
23
|
-
validator: function (value) {
|
24
|
-
return ['small', 'medium', 'large'].indexOf(value) !== -1;
|
25
|
-
},
|
26
|
-
},
|
27
|
-
backgroundColor: {
|
28
|
-
type: String,
|
29
|
-
},
|
30
|
-
},
|
31
|
-
|
32
|
-
emits: ['click'],
|
33
|
-
|
34
|
-
setup(props, { emit }) {
|
35
|
-
props = reactive(props);
|
36
|
-
return {
|
37
|
-
classes: computed(() => ({
|
38
|
-
'storybook-button': true,
|
39
|
-
'storybook-button--primary': props.primary,
|
40
|
-
'storybook-button--secondary': !props.primary,
|
41
|
-
[`storybook-button--${props.size || 'medium'}`]: true,
|
42
|
-
})),
|
43
|
-
style: computed(() => ({
|
44
|
-
backgroundColor: props.backgroundColor,
|
45
|
-
})),
|
46
|
-
onClick() {
|
47
|
-
emit('click');
|
48
|
-
},
|
49
|
-
};
|
50
|
-
},
|
51
|
-
};
|
52
|
-
</script>
|
1
|
+
<template>
|
2
|
+
<button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
|
3
|
+
</template>
|
4
|
+
|
5
|
+
<script>
|
6
|
+
import './button.css';
|
7
|
+
import { reactive, computed } from 'vue';
|
8
|
+
|
9
|
+
export default {
|
10
|
+
name: 'my-button',
|
11
|
+
|
12
|
+
props: {
|
13
|
+
label: {
|
14
|
+
type: String,
|
15
|
+
required: true,
|
16
|
+
},
|
17
|
+
primary: {
|
18
|
+
type: Boolean,
|
19
|
+
default: false,
|
20
|
+
},
|
21
|
+
size: {
|
22
|
+
type: String,
|
23
|
+
validator: function (value) {
|
24
|
+
return ['small', 'medium', 'large'].indexOf(value) !== -1;
|
25
|
+
},
|
26
|
+
},
|
27
|
+
backgroundColor: {
|
28
|
+
type: String,
|
29
|
+
},
|
30
|
+
},
|
31
|
+
|
32
|
+
emits: ['click'],
|
33
|
+
|
34
|
+
setup(props, { emit }) {
|
35
|
+
props = reactive(props);
|
36
|
+
return {
|
37
|
+
classes: computed(() => ({
|
38
|
+
'storybook-button': true,
|
39
|
+
'storybook-button--primary': props.primary,
|
40
|
+
'storybook-button--secondary': !props.primary,
|
41
|
+
[`storybook-button--${props.size || 'medium'}`]: true,
|
42
|
+
})),
|
43
|
+
style: computed(() => ({
|
44
|
+
backgroundColor: props.backgroundColor,
|
45
|
+
})),
|
46
|
+
onClick() {
|
47
|
+
emit('click');
|
48
|
+
},
|
49
|
+
};
|
50
|
+
},
|
51
|
+
};
|
52
|
+
</script>
|