@fewangsit/wangsvue-gsts 1.0.0-alpha.1

package/components/languagedropdown/LanguageDropdownOption.vue.d.ts

@@ -0,0 +1,18 @@
+import { LanguageOption } from './LanguageDropdown.vue.d';
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<{
+    option: LanguageOption;
+    iconOnly?: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
+    option: LanguageOption;
+    iconOnly?: boolean;
+}>>>, {}, {}>;
+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/litedropdown/LiteDropdown.vue.d.ts

@@ -0,0 +1,96 @@
+import { DropdownOption, OptionValue } from 'lib/types/options.type';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { DropdownChangeEvent } from 'primevue/dropdown';
+
+/**
+ * Lite dropdown component props
+ */
+export interface LiteDropdownProps {
+  modelValue: OptionValue | undefined;
+  options: DropdownOption[] | undefined;
+  /**
+   * Specify the property name of option to be used as label.
+   *
+   * @default undefined - the label will be sets to the option itself.
+   */
+  optionLabel: string;
+  /**
+   * Specify the property name of option to be used as value.
+   *
+   * @default undefined - the value will be sets to the option itself.
+   */
+  optionValue: string;
+  /**
+   * Determines if the field is mandatory
+   */
+  mandatory?: boolean;
+  /**
+   * Default text to display when no option is selected.
+   *
+   * @default `Pilih data`
+   */
+  placeholder?: string;
+  /**
+   * Whether the dropdown is in loading state.
+   * @defaultValue false
+   */
+  loading?: boolean;
+  /**
+   * Set disabled state for input dropdown.
+   */
+  disabled?: boolean;
+  /**
+   * Wether show the Dropdown option search or not.
+   *
+   * @default true,
+   */
+  filter?: boolean;
+  /**
+   * The filter input Placeholder
+   *
+   * @default 'Cari'
+   */
+  filterPlaceholder?: string;
+}
+
+/**
+ * Lite dropdown component emits
+ */
+export type LiteDropdownEmits = {
+  /**
+   * Emits when an option selected.
+   */
+  'update:modelValue': [value: OptionValue | undefined];
+  /**
+   * Emits when overlay shown.
+   */
+  'show': [];
+  /**
+   * Emits when there is a change on the dropdown value.
+   */
+  'change': [value: DropdownChangeEvent];
+};
+
+/**
+ * **WangsVue - LiteDropwdown**
+ *
+ * _LiteDropdown, a lite version of the Dropdown component._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class LiteDropdown extends ClassComponent<
+  LiteDropdownProps,
+  unknown,
+  LiteDropdownEmits
+> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Dropdown: GlobalComponentConstructor<LiteDropdown>;
+  }
+}
+
+export default LiteDropdown;

package/components/loading/Loading.vue.d.ts

@@ -0,0 +1,47 @@
+import { DefineComponent } from 'vue';
+
+/**
+ * Attributes for Loading pass-through customization.
+ */
+export interface LoadingPresetAttributes {
+  class?: any;
+  style?: any;
+  [key: string]: any;
+}
+
+export interface LoadingPresetOptions {
+  root: LoadingPresetAttributes;
+  animation: LoadingPresetAttributes;
+}
+
+/**
+ * **TSVue - Loading**
+ *
+ * _Tag Samurai Loading Overlay Animation._
+ *
+ * #### Example
+ *
+ * Script:
+ * ```ts
+ * import { Loading, useLoadingStore } from 'wangsvue';
+ *
+ * const { setLoading } = useLoadingStore();
+ *
+ * onMounted(() => {
+ *    setLoading(true);
+ * });
+ * ```
+ * ---
+ * Template:
+ * ```html
+ * <Loading />
+ * ```
+ *
+ * --- ---
+ * ![TSVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare const Loading: DefineComponent;
+
+export default Loading;

package/components/loading/store/loading.store.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+export interface LoadingStore {
+    loading: Ref<boolean>;
+    message: Ref<string | undefined>;
+    setLoading: (state: boolean, message?: string) => void;
+}
+declare const useLoadingStore: () => LoadingStore;
+export default useLoadingStore;

package/components/menu/Menu.vue.d.ts

@@ -0,0 +1,390 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ *
+ * Menu is a navigation / command component that supports dynamic and static positioning.
+ *
+ * [Live Demo](https://www.WangsVue.org/menu/)
+ *
+ * @module menu
+ *
+ */
+import { TransitionProps, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { MenuItem } from '../menuitem';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+
+export declare type MenuPassThroughOptionType =
+  | MenuPassThroughAttributes
+  | ((
+      options: MenuPassThroughMethodOptions,
+    ) => MenuPassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+export declare type MenuPassThroughTransitionType =
+  | TransitionProps
+  | ((options: MenuPassThroughMethodOptions) => TransitionProps)
+  | undefined;
+
+export interface MenuLocaleConfig {
+  /**
+   * The label of menu when no selectable menu available.
+   */
+  noOptionLabel?: string;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenuPassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   * Defines valid properties.
+   */
+  props: MenuProps;
+  /**
+   * Defines current inline state.
+   */
+  state: MenuState;
+  /**
+   * Defines current options.
+   */
+  context: MenuContext;
+  /**
+   * 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 MenuProps.pt}
+ */
+export interface MenuPassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the list's DOM element.
+   */
+  menu?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the submenu header's DOM element.
+   */
+  submenuHeader?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the list item's DOM element.
+   */
+  menuitem?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the content's DOM element.
+   */
+  content?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the action's DOM element.
+   */
+  action?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the icon's DOM element.
+   */
+  icon?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the label's DOM element.
+   */
+  label?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the separator's DOM element.
+   */
+  separator?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the start of the component.
+   */
+  start?: MenuPassThroughOptionType;
+  /**
+   * Used to pass attributes to the end of the component.
+   */
+  end?: MenuPassThroughOptionType;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link basecomponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+  /**
+   * Used to control Vue Transition API.
+   */
+  transition?: MenuPassThroughTransitionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MenuPassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Menu component.
+ */
+export interface MenuState {
+  /**
+   * Current id state as a string.
+   */
+  id: string;
+  /**
+   * Current visible state as a boolean.
+   * @defaultValue false
+   */
+  overlayVisible: boolean;
+  /**
+   * Current focus state as a boolean.
+   * @defaultValue false
+   */
+  focused: boolean;
+  /**
+   * Focused option index.
+   */
+  focusedOptionIndex: number;
+  /**
+   * Selected option index.
+   */
+  selectedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Menu component.
+ */
+export interface MenuContext {
+  /**
+   * Current menuitem
+   */
+  item: any;
+  /**
+   * Current index of the menuitem.
+   */
+  index: number;
+  /**
+   * Current focused state of menuitem as a boolean.
+   * @defaultValue false
+   */
+  focused: boolean;
+  /**
+   * Current disabled state of menuitem as a boolean.
+   * @defaultValue false
+   */
+  disabled: boolean;
+}
+
+/**
+ * Defines valid router binding props in Menu component.
+ */
+export interface MenuRouterBindProps {
+  /**
+   * Action element binding
+   */
+  action: object;
+  /**
+   * Icon element binding
+   */
+  icon: object;
+  /**
+   * Label element binding
+   */
+  label: object;
+}
+
+/**
+ * Defines valid properties in Menu component.
+ */
+export interface MenuProps {
+  /**
+   * An array of menuitems.
+   */
+  model?: MenuItem[] | undefined;
+  /**
+   * Defines if menu would displayed as a popup.
+   * @defaultValue true
+   */
+  popup?: boolean | undefined;
+  /**
+   * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+   * @defaultValue body
+   */
+  appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
+  /**
+   * Whether to automatically manage layering.
+   * @defaultValue true
+   */
+  autoZIndex?: boolean | undefined;
+  /**
+   * Base zIndex value to use in layering.
+   * @defaultValue 0
+   */
+  baseZIndex?: number | undefined;
+  /**
+   * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
+   * @deprecated since v3.40.0.
+   * @defaultValue true
+   */
+  exact?: boolean | undefined;
+  /**
+   * Index of the element in tabbing order.
+   */
+  tabindex?: number | string | 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 {MenuPassThroughOptions}
+   */
+  pt?: PassThrough<MenuPassThroughOptions>;
+  /**
+   * 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 Menu component.
+ */
+export interface MenuSlots {
+  /**
+   * Custom start template.
+   */
+  start(): VNode[];
+  /**
+   * Custom end template.
+   */
+  end(): VNode[];
+  /**
+   * Custom item template.
+   * @param {Object} scope - item slot's params.
+   */
+  item(scope: {
+    /**
+     * Menuitem instance
+     */
+    item: MenuItem;
+    /**
+     * Label property of the menuitem
+     */
+    label: string | ((...args: any) => string) | undefined;
+    /**
+     * Binding properties of the menuitem
+     */
+    props: MenuRouterBindProps;
+  }): 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[];
+  /**
+   * Custom item template.
+   * @param {Object} scope - submenuheader slot's params.
+   */
+  submenuheader(scope: {
+    /**
+     * Menuitem instance
+     */
+    item: MenuItem;
+  }): VNode[];
+}
+
+/**
+ * Defines valid emits in Menu component.
+ */
+export type MenuEmits = {
+  /**
+   * 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 - Menu**
+ *
+ * _Menu is a navigation / command component that supports dynamic and static positioning._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class Menu extends ClassComponent<MenuProps, MenuSlots, MenuEmits> {
+  /**
+   * Toggles the visibility of the overlay.
+   * @param {Event} event - Browser event.
+   *
+   * @memberof Menu
+   */
+  toggle(event: Event): void;
+  /**
+   * Shows the overlay.
+   * @param {Event} event - Browser event.
+   * @param {*} [target] - Target element
+   *
+   * @memberof Menu
+   */
+  show(event: Event, target?: any): void;
+  /**
+   * Hides the overlay.
+   *
+   * @memberof Menu
+   */
+  hide(): void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Menu: GlobalComponentConstructor<Menu>;
+  }
+}
+
+export default Menu;

package/components/menu/helpers/filterMenu.helper.d.ts

@@ -0,0 +1,12 @@
+import { MenuItem } from '../../menuitem';
+/**
+ * Filters the menu items to return only the visible ones.
+ * If no visible menu items are found, it returns a menu with a label 'No Option Available'.
+ *
+ * @param menuItems - The array of menu items to filter.
+ * @param noOptionLabel - The label of menu to be shown when no available option. The value is from locale configuration each project.
+ *
+ * @returns - The array of visible menu items or an array with a single menu item with label 'No Option Available'.
+ */
+declare const filterVisibleMenu: (menuItems: MenuItem[], noOptionLabel?: string) => MenuItem[];
+export default filterVisibleMenu;

package/components/menu/helpers/index.d.ts

@@ -0,0 +1 @@
+export { default as filterVisibleMenu } from './filterMenu.helper';

package/components/menuitem/MenuItem.vue.d.ts

@@ -0,0 +1,19 @@
+import { MenuRouterBindProps } from '../menu/Menu.vue.d';
+import { MenuItem } from '.';
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<{
+    item: MenuItem;
+    routerProps: MenuRouterBindProps;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
+    item: MenuItem;
+    routerProps: MenuRouterBindProps;
+}>>>, {}, {}>;
+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/menuitem/index.d.ts

@@ -0,0 +1,104 @@
+/**
+ *
+ * WangsVue menu components share a common api to specify the menuitems and submenus.
+ *
+ * @module menuitem
+ *
+ */
+
+/**
+ * Custom command event.
+ *  @todo next release should be able to change see menuItem.command
+ */
+export interface MenuItemCommandEvent {
+  /**
+   * Browser event.
+   */
+  originalEvent: Event;
+  /**
+   * Menuitem instance.
+   */
+  item: MenuItem;
+  /**
+   * Optional
+   */
+  [key: string]: any;
+}
+
+/**
+ * Defines model of MenuItem API.
+ */
+export interface MenuItem {
+  /**
+   * Property name or getter function to use as the label of an item.
+   */
+  label?: string | ((...args: any) => string) | undefined;
+  /**
+   * Icon of the item.
+   */
+  icon?: string | undefined;
+  /**
+   * Callback to execute when item is clicked.
+   * @param {MenuItemCommandEvent} event - Custom command event.
+   * @todo next release should be able to change
+   */
+  command?: (event: MenuItemCommandEvent) => void;
+  /**
+   * External link to navigate when item is clicked.
+   */
+  url?: string | undefined;
+  /**
+   * Specifies where to open the linked document.
+   */
+  target?: string | undefined;
+  /**
+   * Internal/ vue router link to navigate when item is clicked.
+   */
+  route?: string | undefined;
+  /**
+   * 	An array of children menuitems.
+   */
+  items?: MenuItem[] | undefined;
+  /**
+   * A boolean or a function to return a boolean to specify if the item is disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean | ((...args: any) => boolean) | undefined;
+  /**
+   * A boolean or a function to return a boolean to specify if the item is visible.
+   * @defaultValue true
+   */
+  visible?: boolean | ((...args: any) => boolean) | undefined;
+  /**
+   * A boolean or to specify if the item has danger severity.
+   * @defaultValue false
+   */
+  danger?: boolean | undefined;
+  /**
+   * Defines the item as a separator.
+   * @defaultValue false
+   */
+  separator?: boolean | undefined;
+  /**
+   * Inline style of the menuitem.
+   */
+  style?: any;
+  /**
+   * Style class of the menuitem.
+   */
+  class?: any;
+  /**
+   * Unique identifier of an item.
+   */
+  key?: string | undefined;
+  /**
+   * Specify if the there is additional slot for the selected menuitem.
+   * Only work on BulkAction when BulkActionProps.selectMenuType is "dropdown".
+   *
+   */
+  useAdditionSlot?: boolean;
+  /**
+   * Optional
+   */
+  [key: string]: any;
+}