@fewangsit/wangsvue-fats 1.0.0-alpha.22 → 1.0.0-alpha.24

package/components/tabmenu/TabMenu.vue.d.ts

@@ -0,0 +1,288 @@
+/**
+ *
+ * TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.
+ *
+ * [Live Demo](https://www.WangsVue.org/tabmenu/)
+ *
+ * @module tabmenu
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, PassThrough } from '../ts-helpers';
+
+export declare type TabMenuPassThroughOptionType =
+    | TabMenuPassThroughAttributes
+    | ((
+          options: TabMenuPassThroughMethodOptions,
+      ) => TabMenuPassThroughAttributes | string)
+    | string
+    | null
+    | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabMenuPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: TabMenuProps;
+    /**
+     * Defines current inline state.
+     */
+    state: TabMenuState;
+    /**
+     * Defines current options.
+     */
+    context: TabMenuContext;
+    /**
+     * 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 TabMenuProps.pt}
+ */
+export interface TabMenuPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list's DOM element.
+     */
+    menu?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list item's DOM element.
+     */
+    menuitem?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the action's DOM element.
+     */
+    action?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the icon's DOM element.
+     */
+    icon?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the label's DOM element.
+     */
+    label?: TabMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the inkbar's DOM element.
+     */
+    inkbar?: TabMenuPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TabMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TabMenu component.
+ */
+export interface TabMenuState {
+    /**
+     * Current active index state as a number.
+     * @defaulValue 0
+     */
+    d_activeIndex: number;
+}
+
+/**
+ * Defines current options in TabMenu component.
+ */
+export interface TabMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Index of the menuitem
+     */
+    index: number;
+}
+
+/**
+ * Custom change event.
+ * @see {@link TabMenuEmits['tab-change']}
+ */
+export interface TabMenuChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Index of the selected tab
+     */
+    index: number;
+}
+
+/**
+ * Defines valid router binding props in TabMenu component.
+ */
+export interface TabMenuRouterBindProps {
+    /**
+     * Action element binding
+     */
+    action: object;
+    /**
+     * Icon element binding
+     */
+    icon: object;
+    /**
+     * Label element binding
+     */
+    label: object;
+}
+
+/**
+ * Defines valid properties in TabMenu component.
+ */
+export interface TabMenuProps {
+    /**
+     * An array of menuitems.
+     */
+    menu?: MenuItem[] | undefined;
+    /**
+     * Defines type of TabMenu.
+     * @defaultValue 'tab'
+     */
+    type?: 'tab' | 'pill';
+    /**
+     * Active index of menuitem.
+     * @defaultValue 0
+     */
+    activeIndex?: number | undefined;
+    /**
+     * Whether to use trailing line at the end of tab menu.
+     * @defaultValue true - when type is tab, otherwise true
+     */
+    useTrailingLine?: boolean | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {TabMenuPassThroughOptions}
+     */
+    pt?: PassThrough<TabMenuPassThroughOptions>;
+    /**
+     * 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 slots in TabMenu component.
+ */
+export interface TabMenuSlots {
+    /**
+     * Custom content for each item.
+     * @param {Object} scope - item slot's params.
+     */
+    item(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Index of the menuitem
+         */
+        index: number;
+        /**
+         * Current active state of the menuitem
+         */
+        active: boolean;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: TabMenuRouterBindProps;
+    }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in TabMenu component.
+ */
+export type TabMenuEmits = {
+    /**
+     * Callback to invoke when an active tab is changed.
+     * @param {TabMenuChangeEvent} event - Custom tab change event.
+     */
+    'tab-change': [event: TabMenuChangeEvent];
+    'update:activeIndex': [index: number];
+};
+
+/**
+ * **WangsVue - TabMenu**
+ *
+ * _TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu._
+ *
+ * [Live Demo](https://www.WangsVue.org/tabmenu/)
+ * --- ---
+ * ![WangsVue](https://primefaces.org/cdn/WangsVue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class TabMenu extends ClassComponent<
+    TabMenuProps,
+    TabMenuSlots,
+    TabMenuEmits
+> {}
+
+export default TabMenu;

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,121 @@
+import { JSONContent } from '../editor/Editor.vue.d';
+import { BadgeProps } from '../badge/Badge.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 DetailBadge extends BadgeProps {
+    type: 'badge';
+}
+
+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
+    | DetailBadge;
+
+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,64 @@
+import {
+    AttachmentFile,
+    AttachmentLink,
+    DetailBullet,
+    DetailJSONContent,
+    DetailText,
+    DetailUserText,
+    LinkTaskIframeEmbed,
+    LinkTaskURL,
+    DetailBadge,
+} from './Timeline.vue.d';
+declare const _default: import('vue').DefineComponent<
+    __VLS_TypePropsToOption<{
+        detail:
+            | AttachmentFile
+            | LinkTaskIframeEmbed
+            | LinkTaskURL
+            | AttachmentLink
+            | DetailText
+            | DetailUserText
+            | DetailBullet
+            | DetailJSONContent
+            | DetailBadge;
+    }>,
+    {},
+    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
+                    | DetailBadge;
+            }>
+        >
+    >,
+    {},
+    {}
+>;
+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;
+          };
+};