@fewangsit/wangsvue-fats 1.0.0-alpha.0

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

@@ -0,0 +1,288 @@
+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;
+  /**
+   * Slot for content in the right side of field label
+   */
+  'field-label-addon': Slot;
+  'validatormessage': 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/inputotp/InputOtp.vue.d.ts

@@ -0,0 +1,3 @@
+import { WangsInputOtp } from '@wangs-ui/vue';
+
+export default WangsInputOtp;

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

@@ -0,0 +1,33 @@
+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;

package/components/inputphonenumber/InputPhoneNumber.vue.d.ts

@@ -0,0 +1,99 @@
+import { DefineComponent } from 'vue';
+
+export interface InputPhoneNumberLocaleConfig {
+  defaultPlaceholder?: string;
+}
+
+/**
+ * InputPhoneNumber component props
+ */
+export interface InputPhoneNumberProps {
+  /**
+   * ModelValue of the input.
+   */
+  modelValue?: string;
+  /**
+   * 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?: string;
+  /**
+   * The input label. Tell the user what input is this.
+   */
+  label?: string;
+  /**
+   * Specify the input placeholder.
+   *
+   * @default 'Enter phone number'
+   */
+  placeholder?: string;
+  /**
+   * Disabled the input.
+   */
+  disabled?: boolean;
+  /**
+   * The maximum input length.
+   *
+   * @default 14 digit number
+   */
+  maxDigit?: number;
+  /**
+   * State of invalid input.
+   */
+  invalid?: boolean;
+  /**
+   * 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 the custom validator message.
+   * By default each field has preserved with its validator message, you don't need to worrying about the message.
+   */
+  validatorMessage?: string;
+  /**
+   * Show information about the field.
+   */
+  fieldInfo?: string;
+}
+
+/**
+ * InputPhoneNumber component emits
+ */
+export type InputPhoneNumberEmits = {
+  /**
+   * Emits when the input already filled.
+   */
+  'update:modelValue': [value?: string];
+};
+
+/**
+ * **WangsVue - InputPhoneNumber**
+ *
+ * _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 InputPhoneNumber: DefineComponent<
+  InputPhoneNumberProps,
+  InputPhoneNumberEmits,
+  Record<string, unknown>
+>;
+
+export default InputPhoneNumber;

package/components/inputrangenumber/InputRangeNumber.vue.d.ts

@@ -0,0 +1,121 @@
+import { DefineComponent } from 'vue';
+
+import { CustomValidation } from '../form/Form.vue.d';
+
+export interface InputrangeNumberLocaleConfig {
+  /**
+   * Locale configuration for min input placeholder.
+   */
+  minPlaceholder?: string;
+
+  /**
+   * Locale configuration for max input placeholder.
+   */
+  maxPlaceholder?: string;
+}
+
+/**
+ * InputRangeNumber component props
+ */
+export interface InputRangeNumberProps {
+  /**
+   * Number modelValue of the input.
+   */
+  modelValue?: number[];
+
+  /**
+   * Initial Form value.
+   */
+  value?: number[];
+
+  /**
+   * The input label. Tell the user what input is this.
+   */
+  label?: string;
+
+  /**
+   * Placeholder for both input
+   *
+   * @default undefined
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the min number input placeholder.
+   *
+   * @default - Default value of Locale Config {@link InputrangeNumberLocaleConfig.minPlaceholder}
+   */
+  minPlaceholder?: string;
+
+  /**
+   * Specify the max number input placeholder.
+   *
+   * @default - Default value of Locale Config {@link InputrangeNumberLocaleConfig.maxPlaceholder}
+   */
+  maxPlaceholder?: string;
+
+  /**
+   * Disabled the input.
+   */
+  disabled?: boolean;
+
+  /**
+   * State of invalid input.
+   */
+  invalid?: boolean;
+
+  /**
+   * Show the text (opsional)
+   *
+   * @default true if mandatory true
+   */
+  showOptionalText?: boolean;
+
+  /**
+   * 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;
+
+  /**
+   * Whether this input field is required or not.
+   */
+  mandatory?: boolean;
+
+  /**
+   * Set custom validator message.
+   * Will be show if invalid="true"
+   */
+  validatorMessage?: string | CustomValidation;
+  minFieldName?: string;
+  maxFieldName?: string;
+}
+
+/**
+ * InputRangeNumber component emits
+ */
+export type InputRangeNumberEmits = {
+  /**
+   * Emits when the both input already filled.
+   */
+  'update:modelValue': [payload?: (number | undefined)[]];
+  'submit': [];
+};
+
+/**
+ * **WangsVUe - InputRangeNumber**
+ *
+ * _Handle input range number._
+ *
+ * --- ---
+ * ![WangsVUe](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare const InputRangeNumber: DefineComponent<
+  InputRangeNumberProps,
+  InputRangeNumberEmits,
+  unknown
+>;
+
+export default InputRangeNumber;

package/components/inputsearch/InputSearch.vue.d.ts

@@ -0,0 +1,36 @@
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+} from '../../components/ts-helpers';
+
+export type InputSearchEmits = {
+  /**
+   * Emits when the Enter key is pressed.
+   */
+  search: [payload?: string];
+};
+
+/**
+ * **WangsVue - InputSearch**
+ *
+ * _InputSearch is an search input for fixed asset navbar_
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/inputsearch)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class InputSearch extends ClassComponent<
+  unknown,
+  unknown,
+  InputSearchEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    InputSearch: GlobalComponentConstructor<InputSearch>;
+  }
+}
+
+export default InputSearch;