@fewangsit/wangsvue-gsts 1.0.0-alpha.1

package/components/changelog/Changelog.vue.d.ts

@@ -0,0 +1,158 @@
+import { ClassComponent, GlobalComponentConstructor, HintedString } from '../.././components/ts-helpers';
+import { TableColumn } from '../.././components/datatable/DataTable.vue.d';
+import { FilterField } from '../.././components/filtercontainer/FilterContainer.vue.d';
+import { ChangelogFilterQuery } from '@tagsamurai/acts-api-services/src/dto/changelog.dto';
+
+
+export type ChangelogTemplateColumn = { index: number; column: TableColumn };
+export type ChangelogTemplateFilter = { index: number; filter: FilterField };
+
+export type ChangelogDefaultField =
+  | 'createdAt'
+  | 'action'
+  | 'object'
+  | 'objectName'
+  | 'field'
+  | 'oldValue'
+  | 'newValue'
+  | 'modifiedBy';
+
+export type ChangelogFilter = {
+  object?: string[];
+  objectName?: string[];
+  field?: string[];
+  action?: string[];
+  modifiedBy?: number[];
+  createdAt?: number[];
+};
+
+/**
+ * Props for Changelog component
+ */
+export interface ChangelogProps {
+  /**
+   * Props to determine whether this component should using button or not
+   * For ChangelogPage
+   * @ignore
+   */
+  useButton?: boolean;
+  /**
+   * To set custom name for specific column in changelog table
+   */
+  objectNameColumn?: string;
+  /**
+   * Title content of the dialog.
+   * @example 'Changelog: Roles > Transfer'
+   */
+  header?: string | undefined;
+  /**
+   * To give additional columns in changelog table
+   */
+  additionalTemplateColumns?: ChangelogTemplateColumn[];
+  /**
+   * To give additional filters in changelog filter
+   */
+  additionalTemplateFilters?: ChangelogTemplateFilter[];
+  /**
+   * Array to determine that these columns will be hidden
+   */
+  removedColumns?: ChangelogDefaultField[];
+  /**
+   * Array to determine that these filter fields will be hidden
+   */
+  removedFilters?: Omit<ChangelogDefaultField, 'oldValue' | 'newValue'>[];
+  /**
+   * Changelog object.
+   * Note: Even if this props is mandatory, if you fill props `objects` then props `object` will not be processed in component.
+   */
+  object: string;
+  /**
+   * Changelog object ID.
+   */
+  objectId?: string;
+  /**
+   * Changelog custom params, contains stringified filter query needed.
+   */
+  customParams?: ChangelogFilterQuery;
+  /**
+   * Use this props if changelog need button download
+   * @default false
+   */
+  useButtonDownload?: boolean;
+  /**
+   * Text of the button.
+   */
+  label?: string | undefined;
+  /**
+   * Position of the icon.
+   * @defaultValue left
+   */
+  iconPos?: 'left' | 'right' | undefined;
+  /**
+   * Defines the style of the button.
+   */
+  severity?:
+    | HintedString<
+        | 'secondary'
+        | 'success'
+        | 'info'
+        | 'warning'
+        | 'help'
+        | 'danger'
+        | 'contrast'
+      >
+    | undefined;
+  /**
+   * To determine whether changelog button use outlined appearance or not
+   *
+   * @default true
+   */
+  outlined?: boolean;
+  /**
+   * To determine whether changelog button use text only appearance or not
+   *
+   * @default false
+   */
+  text?: boolean;
+  /**
+   * File name is a must if there's button download
+   * @default 'Changelog' only
+   */
+  fileName?: string;
+  /**
+   * Now changelog support custom table name from outside
+   */
+  tableName?: string;
+}
+
+/**
+ * Emits for Changelog component
+ */
+export type ChangelogEmits = {
+  hide: [];
+};
+
+/**
+ * **WangsVue - Changelog**
+ *
+ * _Changelog is a component for to show changelog dialog.
+ * 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 Changelog extends ClassComponent<
+  ChangelogProps,
+  unknown,
+  ChangelogEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Changelog: GlobalComponentConstructor<Changelog>;
+  }
+}
+
+export default Changelog;

package/components/changelogpage/ChangelogFilter.vue.d.ts

@@ -0,0 +1,16 @@
+import { BaseChangelogPageProps } from './ChangelogPage.vue.d';
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<BaseChangelogPageProps & {
+    tableName: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<BaseChangelogPageProps & {
+    tableName: string;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/components/changelogpage/ChangelogPage.vue.d.ts

@@ -0,0 +1,124 @@
+import { ClassComponent, GlobalComponentConstructor } from '../.././components/ts-helpers';
+import { ChangelogDefaultField, ChangelogTemplateColumn, ChangelogTemplateFilter } from '../changelog/Changelog.vue.d';
+import { ChangelogFilterQuery } from '@tagsamurai/acts-api-services/src/dto/changelog.dto';
+
+
+/**
+ * Props for Changelog component
+ */
+export interface BaseChangelogPageProps {
+  /**
+   * Note: Dont use this props since it's just for changelog dialog purpose
+   * @ignore
+   */
+  isDialog?: boolean;
+  /**
+   * To give additional columns in changelog table
+   */
+  additionalTemplateColumns?: ChangelogTemplateColumn[];
+  /**
+   * To give additional filters in changelog filter
+   */
+  additionalTemplateFilters?: ChangelogTemplateFilter[];
+  /**
+   * Array to determine that these columns will be hidden
+   */
+  removedColumns?: ChangelogDefaultField[];
+  /**
+   * Array to determine that these filter fields will be hidden
+   */
+  removedFilters?: Omit<ChangelogDefaultField, 'oldValue' | 'newValue'>[];
+  /**
+   * To set custom name for specific column in changelog table
+   */
+  objectNameColumn?: string;
+  /**
+   * Title content of the dialog.
+   */
+  header?: string | undefined;
+  /**
+   * Changelog object.
+   * Note: Even if this props is mandatory, if you fill props `objects` then props `object` will not be processed in component.
+   * @description If changelog using moduleId or subModuleId, just fill props object with any string (will not be used)
+   */
+  object: string;
+  /**
+   * Changelog objects.
+   * Note: This props will override props Object
+   */
+  objects?: string[];
+  /**
+   * Changelog object ID.
+   */
+  objectId?: string;
+  /**
+   * Changelog custom params, contains stringified filter query needed.
+   */
+  defaultParamsQuery?: ChangelogFilterQuery;
+  /**
+   * Changelog custom params, contains stringified filter query needed.
+   */
+  customParams?: ChangelogFilterQuery;
+  /**
+   * Now changelog support custom table name from outside
+   */
+  tableName?: string;
+}
+
+export interface ButtonDownloadTrue extends BaseChangelogPageProps {
+  /**
+   * Use this props if changelog need button download
+   */
+  useButtonDownload: true;
+  /**
+   * File name is a must if there's button download
+   * @default 'Changelog' only
+   */
+  fileName: string;
+}
+
+export interface ButtonDownloadFalse extends BaseChangelogPageProps {
+  /**
+   * Use this props if changelog need button download
+   */
+  useButtonDownload: false;
+  /**
+   * File name is a must if there's button download
+   * @default 'Changelog' only
+   */
+  fileName?: string;
+}
+
+export type ChangelogPageProps = ButtonDownloadFalse | ButtonDownloadTrue;
+
+/**
+ * Emits for Changelog component
+ */
+export type ChangelogPageEmits = {
+  hide: [];
+};
+
+/**
+ * **WangsVue - Changelog**
+ *
+ * _Changelog is a component for to show changelog dialog.
+ * 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 ChangelogPage extends ClassComponent<
+  ChangelogPageProps,
+  unknown,
+  ChangelogPageEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Changelog: GlobalComponentConstructor<ChangelogPage>;
+  }
+}
+
+export default ChangelogPage;

package/components/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,329 @@
+/**
+ *
+ * Checkbox is an extension to standard checkbox element with theming.
+ *
+ * @module checkbox
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+
+export declare type CheckboxPassThroughOptionType =
+  | CheckboxPassThroughAttributes
+  | ((
+      options: CheckboxPassThroughMethodOptions,
+    ) => CheckboxPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CheckboxPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: CheckboxProps;
+  /**
+   * Defines current inline state.
+   */
+  state: CheckboxState;
+  /**
+   * Defines current options.
+   */
+  context: CheckboxContext;
+  /**
+   * Defines valid attributes.
+   */
+  attrs: any;
+  /**
+   * Defines parent options.
+   */
+  parent: any;
+  /**
+   * Defines passthrough(pt) options in global config.
+   */
+  global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CheckboxProps.pt}
+ */
+export interface CheckboxPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: CheckboxPassThroughOptionType;
+  /**
+   * Used to pass attributes to the input's DOM element.
+   */
+  input?: CheckboxPassThroughOptionType;
+  /**
+   * Used to pass attributes to the box's DOM element.
+   */
+  box?: CheckboxPassThroughOptionType;
+  /**
+   * Used to pass attributes to the icon's DOM element.
+   */
+  icon?: CheckboxPassThroughOptionType;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CheckboxPassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Checkbox component.
+ */
+export interface CheckboxState {
+  [key: string]: any;
+}
+
+/**
+ * Defines valid properties in Checkbox component.
+ */
+export interface CheckboxProps {
+  /**
+   * Value of the checkbox. Can be used to set the checkbox field value when using use-validator
+   */
+  value?: any;
+  /**
+   * Value binding of the checkbox.
+   *
+   * The value is vary depends on the {@link trueValue}, {@link falseValue}, {@link binary}
+   */
+  modelValue?: any;
+  /**
+   * The checkbox label.
+   */
+  label?: string;
+  /**
+   * Tooltip info about the checkbox.
+   */
+  tooltip?: string;
+  /**
+   * Tooltip position.
+   *
+   * @default 'top'
+   */
+  tooltipPos?: 'top' | 'right' | 'left' | 'bottom';
+  /**
+   * Name of the input element.
+   */
+  name?: string | undefined;
+  /**
+   * To specify different style when used inside table header
+   *
+   * @default false
+   */
+  withinTable?: boolean;
+  /**
+   * Allows to select a boolean value instead of multiple values.
+   * @default true
+   */
+  binary?: boolean;
+  /**
+   * Enable triple state 'null' 'true' 'false'
+   *
+   * null: not checked;
+   * true: checked;
+   * false: partial checked;
+   *
+   * @default false
+   */
+  triState?: boolean | null;
+  /**
+   * When present, it specifies that the component should have invalid state style.
+   * @defaultValue false
+   */
+  invalid?: boolean | undefined;
+  /**
+   * When present, it specifies that the element should be disabled.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * When present, it specifies that the element should be selectable.
+   *
+   * Simillar to disabled state, but different style.
+   * @default true
+   */
+  selectable?: boolean | undefined;
+  /**
+   * Specifies the input variant of the component.
+   * @defaultValue outlined
+   */
+  variant?: 'outlined' | 'filled' | undefined;
+  /**
+   * When present, it specifies that an input field is read-only.
+   * @default false
+   */
+  readonly?: boolean | undefined;
+  useValidator?: boolean;
+  fieldName?: string;
+  /**
+   * When present, it specifies that the element is required.
+   * @default false
+   */
+  required?: boolean | undefined;
+  /**
+   * Index of the element in tabbing order.
+   */
+  tabindex?: number | undefined;
+  /**
+   * Value in checked state.
+   * @default true
+   */
+  trueValue?: any;
+  /**
+   * Value in unchecked state.
+   * @default false
+   */
+  falseValue?: any;
+  /**
+   * Identifier of the underlying input element.
+   */
+  inputId?: string | undefined;
+  /**
+   * Style class of the input field.
+   */
+  inputClass?: object | undefined;
+  /**
+   * Inline style of the input field.
+   */
+  inputStyle?: string | object | undefined;
+  /**
+   * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+   */
+  ariaLabelledby?: string | undefined;
+  /**
+   * Establishes a string value that labels the component.
+   */
+  ariaLabel?: string | undefined;
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {CheckboxPassThroughOptions}
+   */
+  pt?: PassThrough<CheckboxPassThroughOptions>;
+  /**
+   * Used to configure passthrough(pt) options of the component.
+   * @type {PassThroughOptions}
+   */
+  ptOptions?: PassThroughOptions;
+  /**
+   * When enabled, it removes component related styles in the core.
+   * @defaultValue false
+   */
+  unstyled?: boolean;
+  /**
+   * Style class of the checkbox's label.
+   */
+  labelClass?: any;
+}
+
+/**
+ * Defines current options in Checkbox component.
+ */
+export interface CheckboxContext {
+  /**
+   * Current checked state of the item as a boolean.
+   * @defaultValue false
+   */
+  checked: boolean;
+  /**
+   * Current disabled state of the item as a boolean.
+   * @defaultValue false
+   */
+  disabled: boolean;
+}
+
+/**
+ * Defines valid slots in Checkbox component.
+ */
+export interface CheckboxSlots {
+  /**
+   * Custom icon template.
+   * @param {Object} scope - icon slot's params.
+   */
+  icon(scope: {
+    /**
+     * State of the checkbox.
+     */
+    checked: boolean;
+    /**
+     * Style class of the icon.
+     */
+    class: string;
+  }): VNode[];
+}
+
+/**
+ * Defines valid emits in Checkbox component.
+ */
+export type CheckboxEmits = {
+  /**
+   * Emitted when the value changes.
+   * @param {*} value - New value.
+   */
+  'update:modelValue': [value: any];
+  /**
+   * Callback to invoke on value change.
+   * @param {Event} event - Browser event.
+   */
+  'change': [event: Event];
+  /**
+   * Callback to invoke when the component receives focus.
+   * @param {Event} event - Browser event.
+   */
+  'focus': [event: Event];
+  /**
+   * Callback to invoke when the component loses focus.
+   * @param {Event} event - Browser event.
+   */
+  'blur': [event: Event];
+};
+
+/**
+ * **WangsVue - Checkbox**
+ *
+ * Checkbox is an extension to checkbox element with label and info tooltip.
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class Checkbox extends ClassComponent<
+  CheckboxProps,
+  CheckboxSlots,
+  CheckboxEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Checkbox: GlobalComponentConstructor<Checkbox>;
+  }
+}
+
+export default Checkbox;

package/components/codesnippet/CodeSnippet.vue.d.ts

@@ -0,0 +1,14 @@
+export interface CodeSnippetProps {
+  code?: string;
+  /**
+   * @default 'json'
+   */
+  lang?: 'javascript' | 'typescript' | 'html' | 'json';
+  /**
+   * Make the code snippets readonly
+   *
+   * @default false editable
+   */
+  readonly?: boolean;
+  placeholder?: string;
+}

package/components/customcolumn/CustomColumn.vue.d.ts

@@ -0,0 +1,35 @@
+import { TableColumn } from '../datatable/DataTable.vue.d';
+import { ClassComponent } from '../ts-helpers';
+
+export interface CustomColumnLocaleConfig {
+  resetDefaultText: string;
+}
+
+export interface CustomColumnProps {
+  tableId: string;
+  defaultColumns: TableColumn[];
+  visibleColumns: TableColumn[];
+  /**
+   * The maximum column count allowed
+   * @default infinity
+   */
+  maxColumn?: number;
+  type?: 'menu' | 'flat';
+}
+
+declare class CustomColumn extends ClassComponent<
+  CustomColumnProps,
+  unknown,
+  unknown
+> {
+  /**
+   * Method to show custom column menu.
+   */
+  toggleMenu: () => void;
+  /**
+   * Resets the column visibility to default
+   */
+  resetToDefault: () => void;
+}
+
+export default CustomColumn;