@propelinc/citrus-ui 0.4.2 → 0.4.3

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.
Files changed (11) hide show
  1. package/dist/citrus-ui.common.js +180 -81
  2. package/dist/citrus-ui.common.js.map +1 -1
  3. package/dist/citrus-ui.css +1 -1
  4. package/dist/citrus-ui.umd.js +180 -81
  5. package/dist/citrus-ui.umd.js.map +1 -1
  6. package/dist/citrus-ui.umd.min.js +4 -4
  7. package/dist/citrus-ui.umd.min.js.map +1 -1
  8. package/dist/components/index.d.ts +21 -21
  9. package/package.json +1 -1
  10. package/src/components/CNotification.vue +93 -0
  11. package/src/components/index.ts +21 -41
package/dist/components/index.d.ts CHANGED
@@ -1,21 +1,21 @@
1
- import _CAlert from '../components/CAlert.vue';
2
- export declare const CAlert: import("vue").VueConstructor<_CAlert>;
3
- export declare const CBanner: import("vue").VueConstructor<_CAlert>;
4
- export declare const CButton: import("vue").VueConstructor<_CAlert>;
5
- export declare const CCard: import("vue").VueConstructor<_CAlert>;
6
- export declare const CCardFooter: import("vue").VueConstructor<_CAlert>;
7
- export declare const CCardHeader: import("vue").VueConstructor<_CAlert>;
8
- export declare const CCardSection: import("vue").VueConstructor<_CAlert>;
9
- export declare const CCheckbox: import("vue").VueConstructor<_CAlert>;
10
- export declare const CIconButton: import("vue").VueConstructor<_CAlert>;
11
- export declare const CListItem: import("vue").VueConstructor<_CAlert>;
12
- export declare const CModal: import("vue").VueConstructor<_CAlert>;
13
- export declare const CModalLoading: import("vue").VueConstructor<_CAlert>;
14
- export declare const CSegmentedButton: import("vue").VueConstructor<_CAlert>;
15
- export declare const CSegmentedButtonOption: import("vue").VueConstructor<_CAlert>;
16
- export declare const CSelect: import("vue").VueConstructor<_CAlert>;
17
- export declare const CSkeletonLoaderCircle: import("vue").VueConstructor<_CAlert>;
18
- export declare const CSkeletonLoaderText: import("vue").VueConstructor<_CAlert>;
19
- export declare const CTextArea: import("vue").VueConstructor<_CAlert>;
20
- export declare const CTextField: import("vue").VueConstructor<_CAlert>;
21
- export declare const CTextLink: import("vue").VueConstructor<_CAlert>;
1
+ export { default as CAlert } from '../components/CAlert.vue';
2
+ export { default as CBanner } from '../components/CBanner.vue';
3
+ export { default as CButton } from '../components/CButton.vue';
4
+ export { default as CCard } from '../components/CCard.vue';
5
+ export { default as CCardFooter } from '../components/CCardFooter.vue';
6
+ export { default as CCardHeader } from '../components/CCardHeader.vue';
7
+ export { default as CCardSection } from '../components/CCardSection.vue';
8
+ export { default as CCheckbox } from '../components/CCheckbox.vue';
9
+ export { default as CIconButton } from '../components/CIconButton.vue';
10
+ export { default as CListItem } from '../components/CListItem.vue';
11
+ export { default as CModal } from '../components/CModal.vue';
12
+ export { default as CModalLoading } from '../components/CModalLoading.vue';
13
+ export { default as CNotification } from '../components/CNotification.vue';
14
+ export { default as CSegmentedButton } from '../components/CSegmentedButton.vue';
15
+ export { default as CSegmentedButtonOption } from '../components/CSegmentedButtonOption.vue';
16
+ export { default as CSelect } from '../components/CSelect.vue';
17
+ export { default as CSkeletonLoaderCircle } from '../components/CSkeletonLoaderCircle.vue';
18
+ export { default as CSkeletonLoaderText } from '../components/CSkeletonLoaderText.vue';
19
+ export { default as CTextArea } from '../components/CTextArea.vue';
20
+ export { default as CTextField } from '../components/CTextField.vue';
21
+ export { default as CTextLink } from '../components/CTextLink.vue';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@propelinc/citrus-ui",
3
- "version": "0.4.2",
3
+ "version": "0.4.3",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/propelinc/citrus-ui"
package/src/components/CNotification.vue ADDED
@@ -0,0 +1,93 @@
1
+ <template>
2
+ <div class="notification" :class="alert ? 'error' : 'primary'">
3
+ <c-icon-button
4
+ v-if="dismissible"
5
+ class="notification__close-button"
6
+ :icon="faTimes"
7
+ light
8
+ @click="$emit('dismiss')"
9
+ />
10
+ <div v-if="title || titleIcon" class="notification__title mb-2">
11
+ <!-- Wrapping the icon in a div aligns it with the title text -->
12
+ <div>
13
+ <font-awesome-icon v-if="titleIcon" class="mr-2" :icon="titleIcon" />
14
+ </div>
15
+ <div class="notification__title-text">
16
+ <strong>{{ title }}</strong>
17
+ </div>
18
+ </div>
19
+ <div class="mb-2">
20
+ <slot />
21
+ </div>
22
+ <c-button
23
+ v-if="hasButton"
24
+ secondary
25
+ class="mb-2"
26
+ :to="buttonTo"
27
+ :href="buttonHref"
28
+ :target="buttonTarget"
29
+ >
30
+ {{ buttonText }}
31
+ </c-button>
32
+ </div>
33
+ </template>
34
+
35
+ <script lang="ts">
36
+ import { IconDefinition } from '@fortawesome/fontawesome-common-types';
37
+ import { faTimes } from '@fortawesome/pro-light-svg-icons';
38
+ import { Component, Vue, Prop } from 'vue-property-decorator';
39
+ import { RawLocation } from 'vue-router';
40
+
41
+ import CButton from '@/components/CButton.vue';
42
+ import CIconButton from '@/components/CIconButton.vue';
43
+
44
+ @Component({ name: 'CNotification', components: { CButton, CIconButton } })
45
+ export default class CNotification extends Vue {
46
+ faTimes = faTimes;
47
+
48
+ /** Makes the background red, etc. */
49
+ @Prop(Boolean) alert?: boolean;
50
+
51
+ @Prop({ type: String, default: '' }) oneTimeMessageName!: string;
52
+ @Prop(Boolean) dismissible?: boolean;
53
+
54
+ @Prop(String) title?: string;
55
+ @Prop([String, Array, Object]) titleIcon?: IconDefinition;
56
+
57
+ /** To render a button, provide button text and one way to link it. */
58
+ @Prop(String) buttonText?: string;
59
+ @Prop([Object, String]) buttonTo?: RawLocation;
60
+ @Prop(String) buttonHref?: string;
61
+ @Prop(String) buttonTarget?: string;
62
+
63
+ get hasButton(): boolean {
64
+ return !!(this.buttonText && (this.buttonTo || this.buttonHref || this.buttonTarget));
65
+ }
66
+ }
67
+ </script>
68
+
69
+ <style lang="less" scoped>
70
+ @import '~@/styles/variables.less';
71
+
72
+ .notification {
73
+ border-radius: @border-radius;
74
+ color: @color-white;
75
+ padding: 16px 16px 8px;
76
+ position: relative;
77
+ }
78
+
79
+ .notification__close-button {
80
+ float: right;
81
+ font-size: 14px;
82
+ margin-right: -8px;
83
+ margin-top: -8px;
84
+ }
85
+
86
+ .notification__title {
87
+ display: flex;
88
+ }
89
+
90
+ .notification__title-text {
91
+ flex: 1;
92
+ }
93
+ </style>
package/src/components/index.ts CHANGED
@@ -1,41 +1,21 @@
1
- import _CAlert from '@/components/CAlert.vue';
2
- import _CBanner from '@/components/CBanner.vue';
3
- import _CButton from '@/components/CButton.vue';
4
- import _CCard from '@/components/CCard.vue';
5
- import _CCardFooter from '@/components/CCardFooter.vue';
6
- import _CCardHeader from '@/components/CCardHeader.vue';
7
- import _CCardSection from '@/components/CCardSection.vue';
8
- import _CCheckbox from '@/components/CCheckbox.vue';
9
- import _CIconButton from '@/components/CIconButton.vue';
10
- import _CListItem from '@/components/CListItem.vue';
11
- import _CModal from '@/components/CModal.vue';
12
- import _CModalLoading from '@/components/CModalLoading.vue';
13
- import _CSegmentedButton from '@/components/CSegmentedButton.vue';
14
- import _CSegmentedButtonOption from '@/components/CSegmentedButtonOption.vue';
15
- import _CSelect from '@/components/CSelect.vue';
16
- import _CSkeletonLoaderCircle from '@/components/CSkeletonLoaderCircle.vue';
17
- import _CSkeletonLoaderText from '@/components/CSkeletonLoaderText.vue';
18
- import _CTextArea from '@/components/CTextArea.vue';
19
- import _CTextField from '@/components/CTextField.vue';
20
- import _CTextLink from '@/components/CTextLink.vue';
21
-
22
- export const CAlert = _CAlert;
23
- export const CBanner = _CBanner;
24
- export const CButton = _CButton;
25
- export const CCard = _CCard;
26
- export const CCardFooter = _CCardFooter;
27
- export const CCardHeader = _CCardHeader;
28
- export const CCardSection = _CCardSection;
29
- export const CCheckbox = _CCheckbox;
30
- export const CIconButton = _CIconButton;
31
- export const CListItem = _CListItem;
32
- export const CModal = _CModal;
33
- export const CModalLoading = _CModalLoading;
34
- export const CSegmentedButton = _CSegmentedButton;
35
- export const CSegmentedButtonOption = _CSegmentedButtonOption;
36
- export const CSelect = _CSelect;
37
- export const CSkeletonLoaderCircle = _CSkeletonLoaderCircle;
38
- export const CSkeletonLoaderText = _CSkeletonLoaderText;
39
- export const CTextArea = _CTextArea;
40
- export const CTextField = _CTextField;
41
- export const CTextLink = _CTextLink;
1
+ export { default as CAlert } from '@/components/CAlert.vue';
2
+ export { default as CBanner } from '@/components/CBanner.vue';
3
+ export { default as CButton } from '@/components/CButton.vue';
4
+ export { default as CCard } from '@/components/CCard.vue';
5
+ export { default as CCardFooter } from '@/components/CCardFooter.vue';
6
+ export { default as CCardHeader } from '@/components/CCardHeader.vue';
7
+ export { default as CCardSection } from '@/components/CCardSection.vue';
8
+ export { default as CCheckbox } from '@/components/CCheckbox.vue';
9
+ export { default as CIconButton } from '@/components/CIconButton.vue';
10
+ export { default as CListItem } from '@/components/CListItem.vue';
11
+ export { default as CModal } from '@/components/CModal.vue';
12
+ export { default as CModalLoading } from '@/components/CModalLoading.vue';
13
+ export { default as CNotification } from '@/components/CNotification.vue';
14
+ export { default as CSegmentedButton } from '@/components/CSegmentedButton.vue';
15
+ export { default as CSegmentedButtonOption } from '@/components/CSegmentedButtonOption.vue';
16
+ export { default as CSelect } from '@/components/CSelect.vue';
17
+ export { default as CSkeletonLoaderCircle } from '@/components/CSkeletonLoaderCircle.vue';
18
+ export { default as CSkeletonLoaderText } from '@/components/CSkeletonLoaderText.vue';
19
+ export { default as CTextArea } from '@/components/CTextArea.vue';
20
+ export { default as CTextField } from '@/components/CTextField.vue';
21
+ export { default as CTextLink } from '@/components/CTextLink.vue';