@propelinc/citrus-ui 0.4.0-dev.2 → 0.4.1-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.4.0-dev.2",
+  "version": "0.4.1-dev.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"
@@ -20,7 +20,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "main": "./dist/citrus-ui.common.js",
-  "types": "./src/index.d.ts",
+  "types": "./dist/index.d.ts",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/pro-light-svg-icons": "5.15.3",

package/src/components/CAlert.vue

@@ -37,9 +37,12 @@ import CIconButton from '@/components/CIconButton.vue';
 export default class CAlert extends Vue {
   faTimes = faTimes;
 
+  /** Controls whether the alert is shown */
   @Prop({ type: Boolean, default: false }) value!: boolean;
   @Prop(String) message?: string;
+  /** Renders the error state */
   @Prop({ type: Boolean, default: false }) error!: boolean;
+  /** Renders the success state */
   @Prop({ type: Boolean, default: false }) success!: boolean;
 
   get shouldAutoDismiss(): boolean {

package/src/components/CButton.vue

@@ -46,11 +46,15 @@ import { RawLocation } from 'vue-router';
 
 @Component({ name: 'CButton', components: { FontAwesomeIcon } })
 export default class CButton extends Vue {
+  /** Controls whether button appears as full-width */
   @Prop({ type: Boolean, default: false }) block!: boolean;
+  /** Renders navy variant */
   @Prop({ type: Boolean, default: false }) dark!: boolean;
   @Prop({ type: Boolean, default: false }) disabled!: boolean;
+  /** Chooses an icon to render on the left side of the button */
   @Prop([String, Array, Object]) icon?: IconDefinition;
   @Prop({ type: Boolean, default: false }) large!: boolean;
+  /** Renders white variant */
   @Prop({ type: Boolean, default: false }) light!: boolean;
   @Prop({ type: Boolean, default: false }) secondary!: boolean;
   @Prop({ type: Boolean, default: false }) tertiary!: boolean;

package/src/components/CIconButton.vue

@@ -28,12 +28,15 @@ interface ColorScheme {
 
 @Component({ name: 'CIconButton', components: { FontAwesomeIcon } })
 export default class CIconButton extends Vue {
+  /** Renders a filled circle around the button */
   @Prop({ type: Boolean, default: false }) contained!: boolean;
+  /** Renders the navy variant */
   @Prop({ type: Boolean, default: false }) dark!: boolean;
+  /** Renders the white variant */
   @Prop({ type: Boolean, default: false }) light!: boolean;
   @Prop({ type: [String, Array, Object], required: true }) icon!: IconDefinition;
+  /** Spins the icon for loading states */
   @Prop({ type: Boolean, default: false }) spinIcon!: boolean;
-  @Prop({ type: Boolean, default: false }) tertiary!: boolean;
   @Prop([Object, String]) to?: RawLocation;
   @Prop(String) href?: string;
   @Prop(String) target?: string;

package/src/components/CListItem.vue

@@ -36,6 +36,7 @@ export default class CListItem extends Vue {
   faChevronRight = faChevronRight;
 
   @Prop([String, Array, Object]) icon?: IconDefinition;
+  /** Makes the whole row tappable. Renders the right chevron. */
   @Prop({ type: Boolean, default: true }) tappable!: boolean;
   @Prop([String, Object]) to?: RawLocation;
   @Prop(String) target?: string;

package/src/components/CModal.vue

@@ -59,9 +59,10 @@ export default class CModal extends Vue {
   faSync = faSync;
   faTimes = faTimes;
 
+  /** Controls whether or not the modal is showing */
   @Prop({ type: Boolean, default: false }) value!: boolean;
   @Prop(String) title?: string;
-  /** Shows loading state + sets loading message if string */
+  /** Shows loading state and sets loading message if string */
   @Prop([String, Boolean]) loading?: string | boolean;
   /** Allows modal to be dismissed */
   @Prop({ type: Boolean, default: true }) dismissible!: boolean;

package/src/components/CSegmentedButton.vue

@@ -33,6 +33,7 @@ interface SegmentedButtonOption {
 export default class CSegmentedButton extends Vue {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   @Prop() value?: any;
+  /** An array of options like `{ value: true, label: 'Yes' }` */
   @Prop({ type: Array, required: true }) options!: SegmentedButtonOption[];
 }
 </script>

package/src/components/CSelect.vue

@@ -56,9 +56,11 @@ export default class CSelect extends Vue {
   @Prop(String) label?: string;
   @Prop(String) placeholder?: string;
   @Prop({ type: String, required: true }) id!: string;
+  /** List of options like `{ label: 'Yes', value: 'yes' }` */
   @Prop({ type: Array, default: () => [] }) items!: { label: string; value: string }[];
   @Prop({ type: Boolean, default: false }) disabled!: boolean;
   @Prop({ type: String, default: '' }) value!: string;
+  /** Prefix for test selectors */
   @Prop({ type: String, default: 'select-field' }) dataTest!: string;
   @Prop({ type: Boolean, default: false }) loading!: boolean;
   @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];

package/src/colors/theme.d.ts

@@ -1,12 +0,0 @@
-declare const _default: {
-    [x: string]: import("vuetify/types/services/theme").VuetifyThemeItem;
-    primary?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    secondary?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    accent?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    info?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    warning?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    error?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    success?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    anchor?: string | number | undefined;
-};
-export default _default;

package/src/components/index.d.ts

@@ -1,21 +0,0 @@
-import _CAlert from '../components/CAlert.vue';
-export declare const CAlert: import("vue").VueConstructor<_CAlert>;
-export declare const CBanner: import("vue").VueConstructor<_CAlert>;
-export declare const CButton: import("vue").VueConstructor<_CAlert>;
-export declare const CCard: import("vue").VueConstructor<_CAlert>;
-export declare const CCardFooter: import("vue").VueConstructor<_CAlert>;
-export declare const CCardHeader: import("vue").VueConstructor<_CAlert>;
-export declare const CCardSection: import("vue").VueConstructor<_CAlert>;
-export declare const CCheckbox: import("vue").VueConstructor<_CAlert>;
-export declare const CIconButton: import("vue").VueConstructor<_CAlert>;
-export declare const CListItem: import("vue").VueConstructor<_CAlert>;
-export declare const CModal: import("vue").VueConstructor<_CAlert>;
-export declare const CModalLoading: import("vue").VueConstructor<_CAlert>;
-export declare const CSegmentedButton: import("vue").VueConstructor<_CAlert>;
-export declare const CSegmentedButtonOption: import("vue").VueConstructor<_CAlert>;
-export declare const CSelect: import("vue").VueConstructor<_CAlert>;
-export declare const CSkeletonLoaderCircle: import("vue").VueConstructor<_CAlert>;
-export declare const CSkeletonLoaderText: import("vue").VueConstructor<_CAlert>;
-export declare const CTextArea: import("vue").VueConstructor<_CAlert>;
-export declare const CTextField: import("vue").VueConstructor<_CAlert>;
-export declare const CTextLink: import("vue").VueConstructor<_CAlert>;

package/src/index.d.ts

@@ -1,45 +0,0 @@
-import plugin from './plugin';
-import './styles/core.less';
-export default plugin;
-export declare const Colors: {
-    "color-providers-green-tint-2": string;
-    "color-providers-green-tint-1": string;
-    "color-providers-green": string;
-    "color-accent-green": string;
-    "color-accent-green-shade-1": string;
-    "color-accent-green-shade-2": string;
-    "color-providers-blue-tint-2": string;
-    "color-providers-blue-tint-1": string;
-    "color-providers-blue": string;
-    "color-accent-blue": string;
-    "color-accent-blue-shade-1": string;
-    "color-accent-blue-shade-2": string;
-    "color-navy-tint-4": string;
-    "color-navy-tint-3": string;
-    "color-navy-tint-2": string;
-    "color-navy-tint-1": string;
-    "color-navy": string;
-    "color-neutral": string;
-    "color-neutral-shade": string;
-    "color-white": string;
-    "color-purple": string;
-    "color-pink": string;
-    "color-orange": string;
-    "color-peach": string;
-    "color-yellow": string;
-    "color-lemon": string;
-    "color-alert-red": string;
-};
-export declare const Theme: {
-    [x: string]: import("vuetify/types/services/theme").VuetifyThemeItem;
-    primary?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    secondary?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    accent?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    info?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    warning?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    error?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    success?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    anchor?: string | number | undefined;
-};
-export declare const Icons: Partial<import("vuetify/types/services/icons").VuetifyIcons>;
-export * from './components/index';

package/src/plugin.d.ts

@@ -1,3 +0,0 @@
-import { PluginObject } from 'vue';
-declare const plugin: PluginObject<never>;
-export default plugin;

package/src/theme/icons.d.ts

@@ -1,3 +0,0 @@
-import { VuetifyIcons } from 'vuetify/types/services/icons';
-declare const Icons: Partial<VuetifyIcons>;
-export default Icons;