@fewangsit/wangsvue-gsts 1.0.0-alpha.1

package/components/dialogform/DialogForm.vue.d.ts

@@ -0,0 +1,349 @@
+import { GenericObject } from 'vee-validate';
+import { Slot } from 'vue';
+import FormInstance, { FormPayload, FormProps } from '../form/Form.vue.d';
+import { WangsIcons } from '../icon/Icon.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export type DialogFormValue =
+  | string
+  | string[]
+  | number
+  | number[]
+  | boolean
+  | boolean[]
+  | Record<string, unknown>
+  | Record<string, unknown>[];
+
+/**
+ * Generic form payload, able to receive types from outside
+ */
+export type DialogFormPayload<
+  FormValuesType = Record<string, DialogFormValue>,
+> = {
+  stayAfterSubmit: boolean;
+  formValues: FormValuesType;
+};
+
+export interface DialogFormLocaleConfig {
+  /**
+   * @example 'Cancel'
+   */
+  cancelBtnLabel?: string;
+
+  /**
+   * @example 'Clear Field'
+   */
+  clearBtnLabel?: string;
+
+  /**
+   * @example 'Stay after submit'
+   */
+  stayCheckboxLabel?: string;
+
+  /**
+   * @example 'Submit'
+   */
+  submitBtnLabel?: string;
+
+  /**
+   * Set the label for button expand sidebar right when it is expanded.
+   *
+   * @example 'Tutup <'
+   */
+  asideRightExpandedButtonLabel?: string;
+
+  /**
+   * Set the label for button expand sidebar right when it is collapsed.
+   *
+   * @example 'Lihat data yang ada >'
+   */
+  asideRightCollapsedButtonLabel?: string;
+}
+
+/**
+ * Props for DialogForm component
+ */
+export interface DialogFormProps extends FormProps {
+  /**
+   * The template for form buttons.
+   */
+  buttonsTemplate: ('clear' | 'submit' | 'cancel')[];
+
+  /**
+   * The dialog header.
+   */
+  header: string;
+
+  /**
+   * Value binding to show/hide the dialog.
+   */
+  visible: boolean;
+
+  /**
+   * With in pixel
+   *
+   * @default 260
+   */
+  asideRightWidth?: number;
+  class?: string | string[];
+
+  /**
+   * Custom button cancel label.
+   *
+   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.cancelBtnLabel}
+   *
+   */
+  cancelBtnLabel?: string;
+
+  /**
+   * Custom button clear label.
+   *
+   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.clearBtnLabel}
+   */
+  clearBtnLabel?: string;
+
+  /**
+   * Wether show the Close icon or not.
+   */
+  closable?: boolean;
+
+  /**
+   * Close dialog after form validated and submitted.
+   *
+   * @default true
+   */
+  closeOnSubmit?: boolean;
+
+  /**
+   * @deprecated
+   */
+  contentClass?: string | string[];
+
+  /**
+   * Show Date time on header.
+   */
+  dateHeader?: string;
+
+  /**
+   * Set the header icon left beside of the title.
+   */
+  headerIcon?: WangsIcons;
+
+  /**
+   * Sets the invalid state.
+   *
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Prevent form resets after submitted. Default is resetted.
+   *
+   * @default true
+   */
+  resetAfterSubmit?: boolean;
+
+  /**
+   * The severity of the dialog.
+   * The severity will determine the dialog icons and color scheme.
+   */
+  severity?: 'success' | 'danger' | 'primary';
+
+  /**
+   * Show or hide the checkbox 'Stay after submit.'
+   *
+   * @default true - if the action is submit.
+   * @default false - if the action is save.
+   */
+  showStayCheckbox?: boolean;
+
+  /**
+   * Custom label for stay checkbox.
+   *
+   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.stayCheckboxLabel}
+   */
+  stayCheckboxLabel?: string;
+
+  /**
+   * Custom button submit label.
+   * @default - The default value from locale configuration {@link DialogFormLocaleConfig.submitBtnLabel}
+   */
+  submitBtnLabel?: string;
+
+  /**
+   * Define the invalid message to be shown on invalid state above the Form submit button.
+   *
+   * @default undefined
+   */
+  validatorMessage?: string;
+
+  /**
+   * Additional validation function.
+   * Within this this function, you need to set the invalid props value.
+   *
+   * If after executing this function the props invalid is true, the form will not be submitted.
+   * Otherwise, 'submit' event will be emitted.
+   *
+   * @param values - the Form values
+   */
+  validationFunction?: (values: GenericObject) => void | Promise<void>;
+
+  /**
+   * Set the dialog size.
+   *
+   * - small: 400px
+   * - medium: 500px
+   * - large: 572px
+   * - semi-xlarge: 600px
+   * - xlarge: 800px
+   *
+   * @default 'small';
+   */
+  width?: 'small' | 'medium' | 'large' | 'semi-xlarge' | 'xlarge';
+}
+
+export interface ConfirmSlots {
+  /**
+   * The Visible state.
+   */
+  visible: boolean;
+
+  /**
+   * Hide the confirm dialog.
+   */
+  hide: () => void;
+
+  /**
+   * The submit function to be called after confirmation.
+   */
+  submit: (submitFn: (value: FormPayload) => Promise<void> | void) => void;
+}
+
+export interface ActionSlots {
+  /**
+   * The submit function to be called after confirmation.
+   */
+  submit: (submitFn: () => Promise<void> | void) => void;
+}
+
+/**
+ * Slots for DialogForm component
+ */
+export interface DialogFormSlots {
+  /**
+   * Slot for action buttons.
+   */
+  'actionButtons': Slot<ActionSlots>;
+
+  /**
+   * Slot for aside right expansion.
+   */
+  'aside-right': Slot;
+
+  /**
+   * Slot for dialog confirm.
+   */
+  'confirm': Slot<ConfirmSlots>;
+
+  /**
+   * The fields slot for the Dialogform. Here is where you can put your Dialogform fields.
+   */
+  'fields': Slot<{ formValues: GenericObject; key?: number }>;
+
+  /**
+   * Slot for dialog header.
+   */
+  'header': Slot;
+}
+
+/**
+ * Emits for DialogForm component
+ */
+export type DialogFormEmits = {
+  /**
+   * Emits when 'Clear Field' button clicked.
+   */
+  'clear': [];
+
+  /**
+   * When dialog is closed by close button.
+   */
+  'close': [];
+
+  /**
+   * Callback to invoke when dialog is hidden.
+   */
+  'hide': [];
+
+  /**
+   * Callback to invoke when dialog is shown.
+   */
+  'show': [];
+
+  /**
+   * Emits when the form validation succes and props.invalid is 'false'.
+   */
+  'submit': [values: DialogFormPayload];
+
+  /**
+   * When dialog is closed.
+   */
+  'update:visible': [state: boolean];
+};
+
+/**
+ * **WangsVue - DialogForm**
+ *
+ * _DialogForm is combination of Form and Dialog. Handles validation on submit using vee-validate.
+ * You need to install vee-validate while using this component._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group components
+ */
+declare class DialogForm extends ClassComponent<
+  DialogFormProps,
+  DialogFormSlots,
+  DialogFormEmits
+> {
+  /**
+   * Exposed function to clears the form fields.
+   */
+  clearField: () => void;
+
+  /**
+   * The ref of form element.
+   */
+  form: FormInstance;
+
+  /**
+   * Set initial values for all fields.
+   */
+  setValues: (values: GenericObject) => void;
+
+  /**
+   * Set value for specific field.
+   */
+  setFieldValue: <T extends string>(
+    field: T,
+    value: GenericObject[T],
+    shouldValidate?: boolean,
+  ) => void;
+
+  /**
+   * Set errors fields
+   * @param fields - {
+   *   name: 'This name already exists'
+   * }
+   */
+  setErrors(fields: GenericObject): void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    DialogForm: GlobalComponentConstructor<DialogForm>;
+  }
+}
+
+export default DialogForm;

package/components/dialogselecttree/DialogSelectTree.vue.d.ts

@@ -0,0 +1,111 @@
+import { TreeSelectionKeys } from 'primevue/tree';
+import { TreeNode } from '../basetree/BaseTree.vue.d';
+import { ShortFetchResponse } from '../datatable/DataTable.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import TreeInstance from '../tree/Tree.vue.d';
+
+export interface DialogSelectTreeProps {
+  fetchTree?: (
+    type: 'group' | 'category',
+  ) => Promise<ShortFetchResponse<TreeNode> | undefined>;
+  visible?: boolean;
+  type?: 'group' | 'category';
+  /**
+   * Specify wether the all tree node should be auto checked once it rendered.
+   * @default false
+   */
+  autoSelectAll?: boolean;
+  header?: string;
+  subHeader?: string;
+  selectionMode?: 'single' | 'checkbox';
+  /**
+   * For checkbox selection, current behavior is preventing select if there is no node selected.
+   *
+   * @default true
+   */
+  allowEmptySelection?: boolean;
+  /**
+   * The previously selected tree key to be displayed again.
+   */
+  keys?: number[];
+  /**
+   * The lists to be displayed in the dialog.
+   */
+  lists?: (string | object)[];
+  /**
+   * The label of the list if your list item is an object.
+   * Choose a property from the item to be displayed on the list.
+   */
+  listLabel?: string;
+  /**
+   * Disable node 'All' selection
+   */
+  disableNodeAll?: boolean;
+  /**
+   * @deprecated
+   */
+  exactDisableKey?: number;
+  /**
+   * A list of node keys that should be disabled along with their children.
+   */
+  disableKeys?: number[];
+  /**
+   * A list of node keys that should be disabled, affecting only the specified nodes and not their children.
+   */
+  exactDisableKeys?: number[];
+  /**
+   * Defines the tree is readonly and disabled.
+   */
+  readonly?: boolean;
+  /**
+   * Defines the group tree to showing disposable groups.
+   */
+  showDisposableGroups?: boolean;
+  /**
+   * Defines the tree to be flattened and shows disposable only
+   */
+  flattenDisposableNode?: boolean;
+  /**
+   * Defines the group tree to disable excluded keys
+   */
+  excludedKeys?: number[];
+  /**
+   * Render hidden dialog to trigger fetch tree
+   */
+  hidden?: boolean;
+}
+
+export type TreeSelectPayload = {
+  keys: TreeSelectionKeys | undefined;
+  selectedNodes: TreeNode[] | undefined;
+  singleNode: TreeNode | undefined;
+};
+
+export type DialogSelectTreeEmits = {
+  select: [keys?: TreeSelectPayload];
+  hide: [];
+};
+
+/**
+ * **TSVue v2 - DialogSelectTree**
+ *
+ * --- ---
+ * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
+ *
+ * @group components
+ */
+declare class DialogSelectTree extends ClassComponent<
+  DialogSelectTreeProps,
+  Record<string, unknown>,
+  DialogSelectTreeEmits
+> {
+  treeComponent: TreeInstance;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    DialogSelectTree: GlobalComponentConstructor<DialogSelectTree>;
+  }
+}
+
+export default DialogSelectTree;

package/components/dropdown/Dropdown.vue.d.ts

@@ -0,0 +1,257 @@
+import { Slot } from 'vue';
+import { DropdownOption, OptionValue } from 'lib/types/options.type';
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { BadgeProps } from 'lib/components/badge/Badge.vue.d';
+
+/**
+ * Configuration interface for localizing dropdown component placeholders and error messages.
+ */
+export interface DropdownLocaleConfig {
+  /**
+   * Placeholder text for the filter input field.
+   *
+   * @default undefined
+   */
+  filterPlaceholder?: string;
+
+  /**
+   * Placeholder text displayed while the dropdown is loading.
+   *
+   * @example 'Loading...'
+   * @default undefined
+   */
+  loadingPlaceholder?: string;
+
+  /**
+   * Placeholder text for the input field when no selection has been made.
+   *
+   * This text can include a placeholder `{label}` which will be replaced with the value of `props.label`.
+   *
+   * @example 'Select {label}' - If `props.label` is 'Option', the placeholder will be 'Select Option'.
+   * @example 'Select {lowercaseLabel}' - If `props.label` is 'Option', the placeholder will be 'Select option'.
+   * @default undefined
+   */
+  inputPlaceholder?: string;
+
+  /**
+   * Error message displayed when no selection has been made.
+   *
+   * This message can include placeholders:
+   * - `{label}`: Replaced with the value of `props.label`.
+   * - `{formattedLabel}`: Replaced with the value of `props.label` formatted with an appropriate article (a/an).
+   *
+   * @example
+   * // If `props.label` is 'Label', the error message will be:
+   * '{label} must be picked' - 'Label must be picked'
+   *
+   * @example
+   * // If `props.label` is 'user', the error message will be:
+   * 'You must pick {formattedLabel}' - 'You must pick a user'
+   *
+   * @default undefined
+   */
+  emptySelectionErrorMessage?: string;
+}
+
+/**
+ * Dropdown component props
+ */
+export interface DropdownProps {
+  /**
+   * Don't use modelValue with useValidator at the same time.
+   * It may lead unexpected behavior.
+   */
+  modelValue?: OptionValue;
+
+  /**
+   * If you deals with form validation on edit form action, you can set the initial value of the field.
+   */
+  initialValue?: OptionValue;
+
+  /**
+   * The input label. Tell the user what input is this.
+   */
+  label?: string;
+
+  /**
+   * List of options to display.
+   */
+  options?: DropdownOption[] | string[] | Record<string, any>;
+
+  /**
+   * Specify the property name of option to be used as label.
+   *
+   * @default undefined - the label will be sets to the option itself.
+   */
+  optionLabel?: string;
+
+  /**
+   * Specify the property name of option to be used as value.
+   *
+   * @default undefined - the value will be sets to the option itself.
+   */
+  optionValue?: string;
+
+  /**
+   * Define the value style, whether badge or plain text
+   *
+   * @default 'plain'
+   */
+  valueType?: 'badge' | 'plain';
+
+  /**
+   * Bind the badge property to the dropdown value
+   */
+  badgeValueProps?: Omit<BadgeProps, 'label'>;
+
+  /**
+   * Set the input border style
+   *
+   * @default 'default'
+   */
+  inputBorder?: 'none' | 'default';
+
+  /**
+   * A property to uniquely identify an option.
+   */
+  dataKey?: string | undefined;
+
+  /**
+   * Determines if the field uses a validator
+   */
+  useValidator?: boolean;
+
+  /**
+   * Determines if the field is mandatory
+   */
+  mandatory?: boolean;
+
+  /**
+   * Show the text (opsional)
+   *
+   * @default true if mandatory true
+   */
+  showOptionalText?: boolean;
+
+  /**
+   * Set custom validator message.
+   * It is rarely use, this component has handled the validator message.
+   *
+   *
+   * @example: 'This field is required'
+   * @example: { empty: 'This field is required' }
+   */
+  validatorMessage?: string | CustomValidation<'empty'>;
+
+  /**
+   * Wether to format the message
+   *
+   * @default true
+   */
+  formatValidatorMessage?: boolean;
+
+  /**
+   * Set custom invalid state.
+   */
+  invalid?: boolean;
+
+  /**
+   * This prop is required if you use this component in a form input.
+   * Specify the unique field name, match with your needs for API request.
+   *
+   * @default 'dropdown'
+   */
+  fieldName?: string;
+
+  /**
+   * Default text to display when no option is selected.
+   *
+   * @default `Select ${label}`
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the dropdown is in loading state.
+   * @defaultValue false
+   */
+  loading?: boolean;
+
+  /**
+   * Show icon 'info' on the right side of label.
+   * Show information to user about the field on icon hover.
+   */
+  fieldInfo?: string;
+
+  /**
+   * Set disabled state for input dropdown.
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether show the Dropdown option search or not.
+   *
+   * @default true,
+   */
+  filter?: boolean;
+
+  /**
+   * The filter input Placeholder
+   *
+   * @default 'Search'
+   */
+  filterPlaceholder?: string;
+}
+
+export interface DropdownSlots {
+  'value': Slot<{ value: string; originalValue: any }>;
+  'option': Slot<{ option: DropdownOption }>;
+  'addon-left': Slot;
+  'addon-right': Slot;
+}
+
+/**
+ * Dropdown component emits
+ */
+export type DropdownEmits = {
+  /**
+   * Emits when an option selected.
+   */
+  'update:modelValue': [value: OptionValue | undefined];
+
+  /**
+   * Emits when overlay shown.
+   */
+  'show': [];
+};
+
+/**
+ * **WangsVue - Dropdown**
+ *
+ * _Dropdown also known as Select, is used to choose an item from a collection of options._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class Dropdown extends ClassComponent<
+  DropdownProps,
+  DropdownSlots,
+  DropdownEmits
+> {
+  /**
+   * Shows the overlay.
+   *
+   * @memberof MultiSelect
+   */
+  showOverlay(): void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Dropdown: GlobalComponentConstructor<Dropdown>;
+  }
+}
+
+export default Dropdown;