@fewangsit/wangsvue-fats 1.0.0-alpha.2

package/components/textarea/Textarea.vue.d.ts

@@ -0,0 +1,170 @@
+import { TextareaHTMLAttributes } from 'vue';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  Nullable,
+  Numberish,
+} from '../ts-helpers.d';
+import { CustomValidation } from '../form/Form.vue.d';
+
+export interface TextareaLocaleConfig {
+  /**
+   * @example '{label} must not be empty' - label will be replaced with props.label
+   */
+  emptyInvalidText?: string;
+
+  /**
+   * @example 'Max. {maxLength} characters' - maxLength will be replaced with props.maxLength
+   */
+  exceedMaxLengthInvalidText?: string;
+
+  /**
+   * @example 'Enter {label}' - label can be ommited, and if exist will be replaced with props.label
+   */
+  defaultPlaceholder?: string;
+}
+
+/**
+ * Defines valid properties in Textarea component. In addition to these, all properties of TextareaHTMLAttributes can be used in this component.
+ * @extends TextareaHTMLAttributes
+ */
+export interface TextareaProps
+  extends /* @vue-ignore */ TextareaHTMLAttributes {
+  /**
+   * The model value of text area.
+   */
+  modelValue?: Nullable<string>;
+
+  /**
+   * 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?: Nullable<string>;
+
+  /**
+   * Set invalid input state. And show validatorMessage if available.
+   */
+  invalid?: boolean;
+
+  /**
+   * Disabled input state.
+   */
+  disabled?: boolean;
+
+  /**
+   * When present, height of textarea changes as being typed.
+   * @defaultValue true
+   */
+  autoResize?: boolean | undefined;
+
+  /**
+   * Specifies the input variant of the component.
+   * @defaultValue outlined
+   */
+  variant?: 'outlined' | 'filled' | undefined;
+
+  /**
+   * Whether 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;
+
+  /**
+   * Set custom validator message.
+   * Will be show if invalid="true" or in some conditions. {@link Condition}
+   *
+   * @example: 'This field is required'
+   * @example: { empty: 'This field is required' }
+   */
+  validatorMessage?: string | CustomValidation<'empty' | 'exceed'>;
+
+  /**
+   * 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 'textareaInput'
+   */
+  fieldName?: string;
+
+  /**
+   * Show information to user about the field with a tooltip.
+   */
+  fieldInfo?: string;
+
+  /**
+   * Make the field mandatory.
+   */
+  mandatory?: boolean;
+
+  /**
+   * The maximum character length allowed by validator.
+   *
+   * @default unlimited
+   */
+  maxInput?: number;
+
+  /**
+   * The maximum character length allowed on input.
+   *
+   * @default unlimited
+   */
+  maxlength?: number;
+
+  /**
+   * Prevent input once the max length is reached, allowing only backspace.
+   *
+   * @default true
+   */
+  preventInputOnMaxLength?: boolean;
+
+  inputClass?: string;
+  rows?: Numberish;
+
+  /**
+   * Specify the input placeholder.
+   *
+   * @default 'Enter {label}' or 'Enter {type}'
+   */
+  placeholder?: string;
+
+  /**
+   * The input label. Tell the user what input is this.
+   */
+  label?: string;
+}
+
+/**
+ * Defines valid emits in Textarea component.
+ */
+export type TextareaEmits = {
+  /**
+   * Emitted when the value changes.
+   */
+  'update:modelValue': [value: Nullable<string>];
+};
+
+/**
+ * **TSVue - Textarea**
+ *
+ * _Textarea is a multi-line text input element._
+ *
+ * --- ---
+ * ![TSVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class Textarea extends ClassComponent<
+  TextareaProps,
+  Record<string, unknown>,
+  TextareaEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Textarea: GlobalComponentConstructor<Textarea>;
+  }
+}
+
+export default Textarea;

package/components/timeline/Timeline.vue.d.ts

@@ -0,0 +1,115 @@
+import { JSONContent } from '../editor/Editor.vue.d';
+import { ClassComponent } from '../ts-helpers';
+
+export interface AttachmentFile {
+  type: 'image' | 'xls' | 'doc' | 'pdf' | 'csv' | 'video' | 'data';
+  filePath?: string;
+}
+
+export interface AttachmentLink {
+  type: 'link';
+  url?: string;
+}
+
+export interface LinkTaskURL {
+  type: 'taskUrl';
+  url: string;
+}
+
+export interface LinkTaskIframeEmbed {
+  type: 'embed';
+  code: string;
+}
+
+export interface DetailText {
+  type: 'text';
+  value: string;
+}
+
+export interface DetailUserText {
+  type: 'userText';
+  user: {
+    _id: string;
+    nickName: string;
+  };
+  text: string;
+}
+
+export interface DetailBullet {
+  type: 'bullet';
+  value: (string | DetailUserText)[];
+}
+
+export interface DetailJSONContent {
+  type: 'json';
+  value: JSONContent;
+}
+
+export type Attachment =
+  | AttachmentLink
+  | AttachmentFile
+  | LinkTaskIframeEmbed
+  | LinkTaskURL;
+
+export type LinkTaskEditAction = Record<
+  'Sebelum' | 'Sesudah',
+  LinkTaskURL | LinkTaskIframeEmbed
+>;
+
+export type DetailType =
+  | Attachment
+  | LinkTaskEditAction
+  | DetailText
+  | DetailUserText
+  | DetailBullet
+  | DetailJSONContent;
+
+export type KeyValue = Record<string, string | DetailType>;
+
+export type TimelineItem = {
+  _id: string;
+  action: string;
+  createdAt: string;
+  user?: {
+    _id: string;
+    nickName: string;
+  };
+  detail?: KeyValue | DetailType;
+};
+
+export type TimelineProps = {
+  value: TimelineItem[];
+  /**
+   * Whether the detail values should be aligned with each other or not.
+   * @defaultValue false
+   */
+  alignDetail?: boolean;
+  /**
+   * Whether the timeline should be scrollable or not.
+   * @defaultValue false
+   */
+  noScroll?: boolean;
+  /**
+   * Whether the createdAt field should be displayed in raw format or not.
+   * @defaultValue false
+   */
+  noFormatDate?: boolean;
+};
+
+/**
+ * **WangsVue - Timeline**
+ *
+ * _Timeline visualizes a series of chained events._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/timeline/)
+ * --- ---
+ *
+ * @group Component
+ */
+declare class Timeline extends ClassComponent<
+  TimelineProps,
+  unknown,
+  unknown
+> {}
+
+export default Timeline;

package/components/timeline/TimelineContentByType.vue.d.ts

@@ -0,0 +1,16 @@
+import { AttachmentFile, AttachmentLink, DetailBullet, DetailJSONContent, DetailText, DetailUserText, LinkTaskIframeEmbed, LinkTaskURL } from './Timeline.vue.d';
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<{
+    detail: AttachmentFile | LinkTaskIframeEmbed | LinkTaskURL | AttachmentLink | DetailText | DetailUserText | DetailBullet | DetailJSONContent;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
+    detail: AttachmentFile | LinkTaskIframeEmbed | LinkTaskURL | AttachmentLink | DetailText | DetailUserText | DetailBullet | DetailJSONContent;
+}>>>, {}, {}>;
+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/toast/Toast.vue.d.ts

@@ -0,0 +1,367 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ *
+ * Toast is used to display messages in an overlay.
+ *
+ * [Live Demo](https://www.WangsVue.org/toast/)
+ *
+ * @module toast
+ *
+ */
+import { TransitionProps, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+import { WangsIcons } from '../icon/Icon.vue.d';
+
+export declare type ToastPassThroughOptionType =
+  | ToastPassThroughAttributes
+  | ((
+      options: ToastPassThroughMethodOptions,
+    ) => ToastPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+export declare type ToastPassThroughTransitionType =
+  | TransitionProps
+  | ((options: ToastPassThroughMethodOptions) => TransitionProps)
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToastPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: ToastProps;
+  /**
+   * Defines current inline state.
+   */
+  state: ToastState;
+  /**
+   * 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 ToastProps.pt}
+ */
+export interface ToastPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the message's DOM element.
+   */
+  message?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the container's DOM element.
+   */
+  container?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the content's DOM element.
+   */
+  content?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the icon's DOM element.
+   */
+  icon?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the text's DOM element.
+   */
+  text?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the summary's DOM element.
+   */
+  summary?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the detail's DOM element.
+   */
+  detail?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the button container's DOM element.
+   */
+  buttonContainer?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the button's DOM element.
+   * @deprecated since v3.30.2. Use 'closeButton' option.
+   */
+  button?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the button's DOM element.
+   */
+  closeButton?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the button icon's DOM element.
+   * @deprecated since v3.30.2. Use 'closeIcon' option.
+   */
+  buttonIcon?: ToastPassThroughOptionType;
+  /**
+   * Used to pass attributes to the button icon's DOM element.
+   */
+  closeIcon?: ToastPassThroughOptionType;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+  /**
+   * Used to control Vue Transition API.
+   */
+  transition?: ToastPassThroughTransitionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ToastPassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines message options in Toast component.
+ */
+export interface ToastMessageOptions {
+  /**
+   * Severity level of the message.
+   * @defaultValue info
+   */
+  severity?:
+    | 'success'
+    | 'info'
+    | 'warn'
+    | 'error'
+    | 'secondary'
+    | 'contrast'
+    | undefined;
+  /**
+   * Summary content of the message.
+   */
+  summary?: string | undefined;
+  /**
+   * Detail content of the message.
+   */
+  detail?: any | undefined;
+  /**
+   * Whether the message can be closed manually using the close icon.
+   * @defaultValue true
+   */
+  closable?: boolean | undefined;
+  /**
+   * Delay in milliseconds to close the message automatically.
+   */
+  life?: number | undefined;
+  /**
+   * Key of the Toast to display the message.
+   */
+  group?: string | undefined;
+  /**
+   * Style class of the message.
+   */
+  styleClass?: any;
+  /**
+   * Style class of the content.
+   */
+  contentStyleClass?: any;
+}
+
+/**
+ * Defines breakpoints type in Toast component.
+ */
+export interface ToastBreakpointsType {
+  /**
+   * Breakpoint for responsive mode.
+   *
+   * Example:
+   *
+   * <Toast :breakpoints="{'960px': { width: '75vw', ... }" ... />
+   *
+   */
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Toast component.
+ */
+export interface ToastState {
+  /**
+   * Current messages.
+   */
+  messages: any[];
+}
+
+/**
+ * Defines valid properties in Toast component.
+ */
+export interface ToastProps {
+  /**
+   * Unique identifier of a message group.
+   */
+  group?: string | undefined;
+  /**
+   * Position of the toast in viewport.
+   * @defaultValue bottom-right
+   */
+  position?:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'center'
+    | undefined;
+  /**
+   * Whether to automatically manage layering.
+   * @defaultValue true
+   */
+  autoZIndex?: boolean | undefined;
+  /**
+   * Base zIndex value to use in layering.
+   * @defaultValue 0
+   */
+  baseZIndex?: number | undefined;
+  /**
+   * Object literal to define styles per screen size.
+   * @see ToastBreakpointsType
+   */
+  breakpoints?: ToastBreakpointsType;
+  /**
+   * Used to access message options.
+   * @type {ToastMessageOptions}
+   */
+  message?: ToastMessageOptions;
+  icon?: WangsIcons;
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {ToastPassThroughOptions}
+   */
+  pt?: PassThrough<ToastPassThroughOptions>;
+  /**
+   * 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;
+}
+
+/**
+ * Defines valid slot in Toast component.
+ */
+export interface ToastSlots {
+  /**
+   * Custom message template.
+   * @param {Object} scope - message slot's params.
+   */
+  message(scope: {
+    /**
+     * Message of the component
+     */
+    message: any;
+  }): VNode[];
+  /**
+   * Custom icon template.
+   * @param {Object} scope - icon slot's params.
+   */
+  icon(scope: {
+    /**
+     * Style class of the icon
+     */
+    class: any;
+  }): VNode[];
+  /**
+   * Custom close icon template.
+   * @param {Object} scope - close icon slot's params.
+   */
+  closeicon(scope: {
+    /**
+     * Style class of the close icon
+     */
+    class: any;
+  }): VNode[];
+  /**
+   * Custom container slot.
+   * @param {Object} scope - container slot's params.
+   */
+  container(scope: {
+    /**
+     * Message of the component
+     */
+    message: any;
+    /**
+     * Close toast function
+     * @deprecated since v3.39.0. Use 'closeCallback' property instead.
+     */
+    onClose: () => void;
+    /**
+     * Close sidebar function.
+     */
+    closeCallback: () => void;
+  }): VNode[];
+}
+
+/**
+ * Defines valid emits in Toast component.
+ */
+export type ToastEmits = {
+  /**
+   * Callback to invoke when the toast is closed.
+   * @param {ToastMessageOptions} message - Toast message.
+   */
+  close: [message: ToastMessageOptions];
+  /**
+   * Callback to invoke when the toast's timeout is over.
+   * @param {ToastMessageOptions} message - Toast message.
+   */
+  lifeEnd: [message: ToastMessageOptions];
+};
+
+/**
+ * **WangsVue - Toast**
+ *
+ * _Toast is used to display messages in an overlay._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class Toast extends ClassComponent<
+  ToastProps,
+  ToastSlots,
+  ToastEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Toast: GlobalComponentConstructor<Toast>;
+  }
+}
+
+export default Toast;