@fewangsit/wangsvue-gsts 1.0.0-alpha.1

package/components/inputcurrency/InputCurrency.vue.d.ts

@@ -0,0 +1,170 @@
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export type CurrencyFormat = {
+  name?: string;
+  label: string;
+  currency: string;
+  symbol: string;
+  locale: string;
+};
+
+export interface CurrencyValue {
+  currency: string; // Currency ISO Code
+  value?: number;
+}
+
+/**
+ * Configuration interface for locale-specific settings of the InputCurrency component.
+ */
+export interface InputCurrencyLocaleConfig {
+  /**
+   * Error message to display when the input is empty.
+   *
+   * @example '{label} must not be empty' - 'Amount must not be empty'
+   */
+  emptyInputErrorMessage?: string;
+}
+
+/**
+ * InputCurrency component props
+ */
+export interface InputCurrencyProps {
+  /**
+   * Number modelValue of the input.
+   */
+  modelValue?: CurrencyValue;
+
+  /**
+   * Sets the initial value of the field.
+   * This will only available with option 'useValidator'.
+   *
+   * In usecase like edit form, you need to display the previous inputted value.
+   */
+  value?: number;
+
+  /**
+   * The input label. Tell the user what input is this.
+   */
+  label?: string;
+
+  /**
+   * Max input number value.
+   */
+  max?: number;
+
+  /**
+   * Wether the input should be validated with vee-validator or not.
+   * If you use this component within form input, you need to set this props as true.
+   */
+  useValidator?: 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 'numberInput'
+   */
+  fieldName?: string;
+
+  /**
+   * Wether this input field is required or not.
+   */
+  mandatory?: boolean;
+
+  /**
+   * Set custom validator message.
+   * It is rarely use, this component has handled the validator message.
+   *
+   * @example: '{label} is required'
+   * @example: { empty: '{label} field is required' }
+   */
+  validatorMessage?: string | CustomValidation<'empty'>;
+
+  /**
+   * Custom invalid state.
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the input placeholder.
+   *
+   * @default 'Enter {label}' or 'Enter number'
+   */
+  placeholder?: string;
+
+  /**
+   * Disabled the input.
+   */
+  disabled?: boolean;
+
+  /**
+   * Displays increment/decrement buttons.
+   */
+  showButtons?: boolean;
+
+  /**
+   * The width of input.
+   */
+  size?: 'small' | 'normal' | 'full';
+
+  /**
+   * Defines the behavior of the component.
+   * @defaultValue currency
+   */
+  mode?: 'decimal' | 'currency';
+
+  /**
+   * Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
+   * @defaultValue true
+   */
+  useGrouping?: boolean;
+
+  /**
+   * Show information about the field.
+   */
+  fieldInfo?: string;
+  inputnNumberId?: string;
+}
+
+/**
+ * InputCurrency component emits
+ */
+export type InputCurrencyEmits = {
+  /**
+   * Emits when the input has loosen focus.
+   * The model value is the valid value from given min and max number.
+   *
+   * If the inputted number is above max, return the max. And vice versa.
+   */
+  'update:modelValue': [payload?: CurrencyValue];
+
+  /**
+   * If you need to check validation, you can use this events.
+   */
+  'input': [payload?: number];
+};
+
+/**
+ * **WangsVue - InputCurrency**
+ *
+ * _Handle input Currency with form validation._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare class InputCurrency extends ClassComponent<
+  InputCurrencyProps,
+  unknown,
+  InputCurrencyEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    InputCurrency: GlobalComponentConstructor<InputCurrency>;
+  }
+}
+
+export default InputCurrency;

package/components/inputcurrency/helpers/currency.helper.d.ts

@@ -0,0 +1,4 @@
+import { CurrencyFormat } from '../InputCurrency.vue.d';
+declare const getCurrency: (code?: string) => CurrencyFormat;
+declare const formatCurrency: (value?: number | string | null, currency?: string, prefix?: boolean) => string;
+export { getCurrency, formatCurrency };

package/components/inputemail/InputEmail.vue.d.ts

@@ -0,0 +1,25 @@
+import { DefineComponent } from 'vue';
+import { InputTextEmits, InputTextProps } from '../inputtext/InputText.vue.d';
+
+/**
+ * InputEmail component props
+ */
+export type InputEmailProps = Omit<InputTextProps, 'type'>;
+
+/**
+ * InputEmail component emits
+ */
+export type InputEmailEmits = InputTextEmits;
+/**
+ * **WangsVue - InputEmail**
+ *
+ * _Handle input email with form validation._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare const InputEmail: DefineComponent<InputEmailProps, InputEmailEmits>;
+
+export default InputEmail;

package/components/inputgroup/InputGroup.vue.d.ts

@@ -0,0 +1,141 @@
+/**
+ *
+ * InputGroup displays text, icon, buttons and other content can be grouped next to an input.
+ *
+ * @module inputgroup
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+
+export declare type InputGroupPassThroughOptionType =
+  | InputGroupPassThroughAttributes
+  | ((
+      options: InputGroupPassThroughMethodOptions,
+    ) => InputGroupPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputGroupPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * 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 InputGroupProps.pt}
+ */
+export interface InputGroupPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: InputGroupPassThroughOptionType;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputGroupPassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines valid properties in InputGroup component.
+ */
+export interface InputGroupProps {
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {InputGroupPassThroughOptions}
+   */
+  pt?: PassThrough<InputGroupPassThroughOptions>;
+  /**
+   * Used to configure passthrough(pt) options of the component.
+   * @type {PassThroughOptions}
+   */
+  ptOptions?: PassThroughOptions;
+  /**
+   * @default default
+   */
+  ring?: 'none' | 'default';
+  /**
+   * When enabled, it removes component related styles in the core.
+   * @defaultValue false
+   */
+  unstyled?: boolean;
+  /**
+   * @defaultValue false
+   */
+  invalid?: boolean;
+  /**
+   * @defaultValue false
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Defines valid slots in InputGroup component.
+ */
+export interface InputGroupSlots {
+  /**
+   * Custom default template.
+   */
+  default(): VNode[];
+  /**
+   * Dynamic content template.
+   * @todo
+   */
+  [key: string]: (node: any) => VNode[];
+}
+
+/**
+ * **WangsVue - InputGroup**
+ *
+ * _InputGroup displays text, icon, buttons and other content can be grouped next to an input._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class InputGroup extends ClassComponent<
+  InputGroupProps,
+  InputGroupSlots,
+  unknown
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    InputGroup: GlobalComponentConstructor<InputGroup>;
+  }
+}
+
+export default InputGroup;

package/components/inputnumber/InputNumber.vue.d.ts

@@ -0,0 +1,282 @@
+import { DefineComponent, Slot } from 'vue';
+import { CustomValidation } from '../form/Form.vue.d';
+
+export type InputNumberEvent = number | string | undefined;
+
+export interface InputNumberLocaleConfig {
+  /**
+   * @example 'Tulis {label}' - label can be ommited, and if exist will be replaced with props.label
+   */
+  defaultPlaceholder?: string;
+
+  /**
+   * @example '{label} sudah ada' - label will be replaced with props.label
+   */
+  alreadyExistInvalidText?: string;
+
+  /**
+   * @example '{label} must not be empty' - label will be replaced with props.label
+   */
+  emptyInvalidText?: string;
+}
+
+/**
+ * InputNumber component props
+ */
+export interface InputNumberProps {
+  /**
+   * Number modelValue of the input.
+   */
+  modelValue?: number;
+
+  /**
+   * Sets the initial value of the field.
+   * This will only available with option 'useValidator'.
+   *
+   * In use case like edit form, you need to display the previous inputted value.
+   */
+  value?: number;
+
+  /**
+   * Existing values to be checked with validation 'exist' - check the validatorMessage props
+   *
+   * - Need to specify the custom validation : { empty: 'Error message when empty' } within props validatorMessage
+   */
+  existingValues?: number[];
+
+  /**
+   * The input label. Tell the user what input is this.
+   */
+  label?: string;
+
+  /**
+   * Min input number value.
+   */
+  min?: number;
+
+  /**
+   * Max input number value.
+   */
+  max?: number;
+
+  /**
+   * The maximum input length.
+   *
+   * @default 16 digit number
+   */
+  maxDigit?: number;
+
+  /**
+   * Set the pad start of value.
+   *
+   * Insert '0' in the front of value
+   * @default 1
+   */
+  padStart?: number;
+
+  /**
+   * Weather the input should be validated with vee-validator or not.
+   * If you use this component within form input, you need to set this props as true.
+   */
+  useValidator?: 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 'numberInput'
+   */
+  fieldName?: string;
+
+  /**
+   * Whether this input field is required or not.
+   */
+  mandatory?: boolean;
+
+  /**
+   * Set custom validator message.
+   * Will be show if invalid="true"
+   */
+  validatorMessage?: string | CustomValidation;
+
+  /**
+   * Show the validator message on error.
+   *
+   * @default true;
+   */
+  showValidatorMessage?: boolean;
+
+  /**
+   * Specify the input placeholder.
+   *
+   * @default 'Enter {label}' or 'Enter number'
+   */
+  placeholder?: string;
+
+  /**
+   * Disabled the input.
+   */
+  disabled?: boolean;
+
+  /**
+   * State of invalid input.
+   */
+  invalid?: boolean;
+
+  /**
+   * Displays increment/decrement buttons.
+   */
+  showButtons?: boolean;
+
+  /**
+   * The width of input.
+   */
+  size?: 'small' | 'normal' | 'full';
+
+  /**
+   * Defines the behavior of the component.
+   * @defaultValue decimal
+   */
+  mode?: 'decimal' | 'currency';
+
+  /**
+   * The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as 'USD' for the US dollar, 'EUR' for the euro, or 'CNY' for the Chinese RMB.
+   * There is no default value; if the style is 'currency', the currency property must be provided.
+   */
+  currency?: string | undefined;
+
+  /**
+   * The `locale` variable specifies the regional setting or language preference to be used.
+   * It is an optional string that can influence date, time, number formatting, and other locale-specific operations.
+   *
+   * If not provided, the system may default to a pre-configured or fallback locale.
+   */
+  locale?: string;
+
+  /**
+   * Text to display before the value.
+   */
+  prefix?: string | undefined;
+
+  /**
+   * Text to display after the value.
+   */
+  suffix?: string | undefined;
+
+  /**
+   * The minimal digits of decimal value.
+   */
+  minFractionDigits?: number;
+
+  /**
+   * The maximal digits of decimal value.
+   */
+  maxFractionDigits?: number;
+
+  /**
+   * Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
+   * @defaultValue false
+   */
+  useGrouping?: boolean;
+
+  /**
+   * Show information about the field.
+   */
+  fieldInfo?: string;
+
+  /**
+   * The filed info tooltip position
+   */
+  tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
+
+  /**
+   * Specify the appearance of addon right and left
+   * - filled - has background and border
+   * - plain - no background, no border
+   *
+   * @defaultValue filled
+   */
+  addonVariant?: 'filled' | 'plain';
+
+  /**
+   * Class to be bind on addon left component
+   */
+  addonLeftClass?: any;
+
+  /**
+   * Class to be bind on addon left component
+   */
+  addonRightClass?: any;
+
+  /**
+   * Class to be bind on input group component
+   */
+  inputGroupClass?: any;
+
+  /**
+   * Class to be bind on input number component
+   */
+  inputNumberClass?: any;
+
+  /**
+   * Unique id for input number element
+   */
+  inputId?: string;
+
+  /**
+   * Set auto Resize Input
+   * The input width is counted by the value length
+   *
+   * @default false
+   */
+  autoResize?: boolean;
+
+  /**
+   * Allow input to have value null or undefined.
+   * If it sets to 'false', when the value is empty, it will fall back to min value if exists, zero otherwise
+   *
+   * @default true
+   */
+  allowEmptyValue?: boolean;
+}
+
+/**
+ * InputNumber component emits
+ */
+export type InputNumberEmits = {
+  /**
+   * Emits when the input has losen focus.
+   * The model value is the valid value from given min and max number.
+   *
+   * If the inputed number is above max, return the max. And vice versa.
+   */
+  'update:modelValue': [payload?: number];
+
+  /**
+   * If you need to check validation, you can use this events.
+   */
+  'input': [payload?: number];
+};
+
+export interface InputNumberSlots {
+  'addon-left': Slot;
+  'addon-right': Slot;
+}
+
+/**
+ * **WangsVue - InputNumber**
+ *
+ * _Handle input number with form validation._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare const InputNumber: DefineComponent<
+  InputNumberProps,
+  InputNumberEmits,
+  InputNumberSlots
+>;
+
+export default InputNumber;

package/components/inputpassword/InputPassword.vue.d.ts

@@ -0,0 +1,32 @@
+import { DefineComponent } from 'vue';
+import { CustomValidation } from '../form/Form.vue.d';
+
+export type InputPasswordProps = {
+  modelValue?: string;
+  label?: string;
+  labelClass?: string;
+  inputContainerClass?: string;
+  mandatory?: boolean;
+  placeholder?: string;
+  feedback?: boolean;
+  fieldName?: string;
+  useValidator?: boolean;
+  invalid?: boolean;
+  /**
+   * Set custom validator message.
+   * Will be show if invalid="true"
+   */
+  validatorMessage?: string | CustomValidation;
+  validatorMessageClass?: string;
+};
+
+export type InputPasswordEmits = {
+  'update:modelValue': [payload?: string];
+};
+
+declare const InputPassword: DefineComponent<
+  InputPasswordProps,
+  InputPasswordEmits
+>;
+
+export default InputPassword;