memorial-ui-component-library 1.0.0-dev.2184

package/types/form.d.ts

@@ -0,0 +1,122 @@
+import { MemorialUIComponent, MemorialUIPluginComponent } from './component';
+import {
+  ValidationResult,
+  SchemaDescriptor,
+  RuleProperty
+} from './async-validator';
+
+export type SdValidationTriggerType = 'blur' | 'change' | 'input';
+export type SdValidationTrigger =
+  | SdValidationTriggerType
+  | SdValidationTriggerType[];
+
+export type SdFormValidationState = 'success' | 'error' | 'validating' | '';
+
+export declare class SdValidationResult {
+  valid: boolean;
+  result?: ValidationResult;
+}
+
+/** Form Item component */
+export declare abstract class SdFormWidget extends MemorialUIComponent {
+  /** The parent form if nested within one. */
+  form: SdForm | null;
+
+  /** The the containing form item if nested within one. */
+  formItem: SdFormItem | null;
+
+  /** The widgets name. */
+  name: string;
+
+  /** Computed name attribute, takes into account the FormItem's label if it exists. */
+  nameAttr: string;
+
+  /** The widgets current validation state within the context of its form. */
+  validationState: SdFormValidationState;
+
+  /**
+   * Broadcasts an event to the parent form.
+   * @param {String} type the type of event associated to the triggering action.
+   * @param {Any} value the value to emit to the form.
+   * @param {Event} event the Event to propagate
+   */
+  protected broadcastFormEvent(
+    type: SdValidationTrigger,
+    value: any,
+    event: Event | undefined
+  ): void;
+}
+
+/** Form component */
+export declare class SdForm extends MemorialUIPluginComponent {
+  /** Object model to bind the form to. */
+  model?: { [field: string]: any };
+
+  /** The form validation rules to apply to the specified model properties. */
+  rules?: SchemaDescriptor;
+
+  /** Collection of form items active within the form. */
+  fields: SdFormItem[];
+
+  /**
+   * The event types which should trigger validation.
+   * @default ['blur', 'change']
+   * */
+  triggers: SdValidationTrigger;
+
+  /** Whether the form is currently being reset. */
+  resetting: boolean;
+
+  /** Reset the form model to its original value and clear all validation errors/messages. */
+  reset(): void;
+
+  /** Clear all form validation errors and messages. */
+  clearErrors(...props: string[]): void;
+
+  /**
+   * Validates all properties on the form model.
+   */
+  validateAsync(): Promise<SdValidationResult>;
+
+  /**
+   * Validates a single property on the form model.
+   * @property {String} prop the property name of the field to validate.
+   */
+  validateItemAsync(prop: string): Promise<SdValidationResult>;
+}
+
+/** Form Item component */
+export declare class SdFormItem extends MemorialUIComponent {
+  /** The form items display label. */
+  label: string;
+
+  /** The of the associated property name on the forms model in which the form item is bound to. Only needs to be set if the form item needs to be included in validation. */
+  prop?: string;
+
+  /** Whether this item is a required validation field. */
+  required?: boolean;
+
+  /** Extended validation properties to include for the form item. */
+  rules?: RuleProperty | RuleProperty[];
+
+  /** The widgets current validation state within the context of its form. */
+  validationState: SdFormValidationState;
+
+  /** The validation error message if the form item is in an **error** state.*/
+  validationMessage: string;
+
+  /** The initial value of the form items property within the form model.*/
+  initialValue?: any;
+
+  /** All instances of SdFormWidget components within the form item. */
+  widgets: SdFormWidget[];
+
+  /** The parent form. */
+  form: SdForm;
+
+  /** The value of the form items field within the model bound to the form. */
+  fieldValue: any;
+}
+
+declare const plugin: SdForm;
+export default plugin;

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './memorial-ui-component-library';
+
+import * as MemorialUI from './memorial-ui-component-library';
+export default MemorialUI;

package/types/input.d.ts

@@ -0,0 +1,53 @@
+import { MemorialUIFormPluginComponent } from './component';
+
+export type SdInputType =
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'range'
+  | 'search'
+  | 'tel'
+  | 'phone'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week'
+  | 'textarea'
+  | 'image'
+  | 'file'
+  | 'color'
+  | 'hidden';
+
+/** Input component */
+export declare class SdInput extends MemorialUIFormPluginComponent {
+  /** The inputs value. */
+  value?: any;
+
+  /**
+   * The type of the input.
+   * @default 'text'
+   */
+  type: SdInputType;
+
+  /**
+   * Whether to display a clear button that will reset the components value.
+   * @default false
+   */
+  clearable: boolean;
+
+  /**
+   * Disables spinkit controls like numeric arrows in the number type and dropdown calendar in date type.
+   * Compatible with Chrome/Firefox.
+   * @default false
+   */
+  disableSpinkit: boolean;
+
+  /** Resets the components value. */
+  clear(): void;
+}
+
+declare const plugin: SdInput;
+export default plugin;

package/types/loader.d.ts

@@ -0,0 +1,28 @@
+import { MemorialUIPluginComponent } from './component';
+
+export type SdLoaderType = 'elipse' | 'circle';
+
+/** Loader component */
+export declare class SdLoader extends MemorialUIPluginComponent {
+  /**
+   * The type of loader.
+   * **NOTE:** Currently only supports 'elipse'
+   * @default 'elipse'
+   */
+  type: SdLoaderType;
+
+  /**
+   * The loader's color.
+   * @default '#ee3224'
+   */
+  color: string;
+
+  /**
+   * The loader's size.
+   * @default '16px'
+   */
+  size: string;
+}
+
+declare const plugin: SdLoader;
+export default plugin;

package/types/memorial-ui.d.ts

@@ -0,0 +1,41 @@
+import Vue, { DirectiveOptions } from 'vue';
+import { MemorialLib, MemorialLibComponentOptions } from './options';
+
+declare global {
+  interface Window {
+    $memorial: MemorialLib;
+  }
+}
+
+export declare const $memorial: MemorialLib;
+
+export declare const Directives: {
+  /**
+   * Executes a callback whenever the user clicks outside of the element the directive is attached to.
+   */
+  ClickOutside: DirectiveOptions;
+};
+/**
+ * Install all memorial-ui-component-library components into Vue.
+ * Please do not invoke this method directly.
+ * Call `Vue.use(MemorialUI)` to install.
+ */
+export function install(
+  vue: typeof Vue,
+  options?: MemorialLibComponentOptions
+): void;
+
+export * from './autocomplete';
+export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './component';
+export * from './dialog';
+export * from './divider';
+export * from './form';
+export * from './input';
+export * from './loader';
+export * from './popout-menu';
+export * from './radio';
+export * from './rater';
+export * from './select';

package/types/options.d.ts

@@ -0,0 +1,20 @@
+export interface MemorialLibComponentOptions {
+  button: SdButtonPluginOptions;
+  dialog: SdDialogPluginOptions;
+}
+
+export interface MemorialLib {
+  version: string;
+  options: MemorialLibComponentOptions;
+}
+
+export interface SdButtonPluginOptions {
+  size: 'mini' | 'small' | 'medium' | 'large';
+}
+
+export interface SdDialogPluginOptions {
+  /**
+   * Whether to reject or resolve the promise on cancel.
+   */
+  rejectOnCancel: boolean;
+}

package/types/popout-menu.d.ts

@@ -0,0 +1,14 @@
+import { MemorialUIPluginComponent } from './component';
+
+export declare class SdPopoutMenu extends MemorialUIPluginComponent {
+  /**
+   * Whether the menu is open.
+   */
+  open: boolean;
+
+  /**
+   * Sets the visibility state of the menu, being either *open* or *closed*.
+   * @param state The visibility state of the menu
+   */
+  setState(state: 'open' | 'closed'): void;
+}

package/types/radio.d.ts

@@ -0,0 +1,45 @@
+import Vue from 'vue';
+import { MemorialUIFormPluginComponent } from './component';
+import { SdFormWidget } from './form';
+
+export type SdRadioGroupDirection = 'row' | 'column';
+
+/** Radio component */
+export declare class SdRadio extends MemorialUIFormPluginComponent {
+  $refs: Vue['$refs'] & {
+    radio: HTMLInputElement;
+  };
+
+  /** The current state value of the component. This value changes in response to what the component is bound to (v-model). */
+  state: any;
+
+  /** The value the radio component represents. */
+  value: any;
+
+  /** Whether the radio component is disabled. */
+  disabled: boolean;
+
+  /** Whether the radio is checked. */
+  checked: boolean;
+}
+
+/** Radio Group component */
+export declare class SdRadioGroup extends SdFormWidget {
+  /** The selected value from within the radio group. */
+  value: any;
+
+  /** The name of the radio group. */
+  name: string;
+
+  /** Whether the radio group and its containing radio components are disabled. */
+  disabled: boolean;
+
+  /**
+   * The direction in which the radio group displays its radio components.
+   * @default 'column'
+   */
+  direction: SdRadioGroupDirection;
+}
+
+declare const plugin: SdRadio;
+export default plugin;

package/types/rater.d.ts

@@ -0,0 +1,34 @@
+import { MemorialUIPluginComponent } from './component';
+
+export type SdRaterShapeType = 'heart' | 'star' | 'circle';
+
+export declare class SdRater extends MemorialUIPluginComponent {
+  /**
+   * Rater value
+   */
+  value: number | null;
+
+  /**
+   * Rater Icon Shape
+   * @default 'heart'
+   */
+  shape: SdRaterShapeType;
+
+  /**
+   * Number of shapes in rater
+   * @default 5
+   */
+  count: number;
+
+  /**
+   * Disbled state of the rater
+   * @default false
+   */
+  disabled: boolean;
+
+  /**
+   * Read only state of the rater
+   * @default false
+   */
+  readonly: boolean;
+}

package/types/select.d.ts

@@ -0,0 +1,77 @@
+import Vue from 'vue';
+import {
+  MemorialUIComponent,
+  MemorialUIFormPluginComponent
+} from './component';
+
+/** Select component */
+export declare class SdSelect extends MemorialUIFormPluginComponent {
+  $refs: Vue['$refs'] & {
+    select: HTMLSelectElement;
+  };
+
+  /** The value of the selected option. */
+  value: any;
+
+  /** Whether the select component is disabled. */
+  disabled: boolean;
+
+  /** Whether the components value can be cleared. */
+  clearable: boolean;
+
+  /** Whether to force the component to always use the **native** select menu for both desktop and mobile. */
+  native: boolean;
+
+  /** Whether to force the component to always use the **custom** select menu for both desktop and mobile. */
+  custom: boolean;
+
+  /** Whether the select menu is open. */
+  open: boolean;
+
+  /** Resets the components value. */
+  clear(): void;
+
+  /** Toggles the open state of the select menu. */
+  toggleMenu(): void;
+
+  /** Closes the select menu. */
+  close(): void;
+
+  /**
+   * A function which updates the components value and emits an event
+   * in order to make the component usable with v-model.
+   * This method can be injected into child components.
+   * @param value - The updated value.
+   * @param type - The types of events to emit (input, change)
+   * @returns {void}
+   */
+  notifyOfUpdatedValue(value: any, type: Array<'change' | 'input'>): void;
+}
+
+/** Select option component */
+export declare class SdSelectOption extends MemorialUIComponent {
+  /** The options value. */
+  value: any;
+
+  /** The label to display in the select box when this item has been selected. If this is not assigned the string representation of {@link value} is used.*/
+  label?: string;
+
+  /** Whether the option is disabled. */
+  disabled: boolean;
+
+  /** Toggles the open state of the select menu. */
+  toggleMenu(): void;
+
+  /**
+   * A function which updates the components value and emits an event
+   * in order to make the component usable with v-model.
+   * This method can be injected into child components.
+   * @param value - The updated value.
+   * @param type - The types of events to emit (input, change)
+   * @returns {void}
+   */
+  notifyOfUpdatedValue(value: any, type: Array<'change' | 'input'>): void;
+}
+
+declare const plugin: SdSelect;
+export default plugin;