@fewangsit/wangsvue-fats 1.0.0-alpha.31 → 1.0.0-alpha.32

package/components/icon/Icon.vue.d.ts

@@ -0,0 +1,256 @@
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export type WangsIconseverities =
+  | 'danger'
+  | 'info'
+  | 'warning'
+  | 'primary'
+  | 'success'
+  | 'secondary';
+
+/**
+ * List of all available icons.
+ */
+export type WangsIcons =
+  | 'add'
+  | 'admin-line'
+  | 'arrow-down'
+  | 'arrow-down-fill'
+  | 'arrow-drop-down'
+  | 'arrow-go-back'
+  | 'arrow-up-s'
+  | 'arrow-up-down'
+  | 'arrow-left'
+  | 'arrow-left-double'
+  | 'arrow-left-right'
+  | 'arrow-right'
+  | 'arrow-right-circle-line'
+  | 'arrow-right-double'
+  | 'arrow-right-fill'
+  | 'asset-view'
+  | 'asset'
+  | 'assignment'
+  | 'attachment-2'
+  | 'audit'
+  | 'barcode'
+  | 'barricade-line'
+  | 'bell'
+  | 'bell-alert'
+  | 'borrow'
+  | 'building'
+  | 'building-2'
+  | 'building-4'
+  | 'calculator'
+  | 'calendar'
+  | 'calendar-event'
+  | 'calendar-todo'
+  | 'chat'
+  | 'chat-check'
+  | 'change-tag'
+  | 'check'
+  | 'checkout'
+  | 'check-double-fill'
+  | 'checkbox-circle'
+  | 'checkbox-circle-fill'
+  | 'checkbox-blank-circle'
+  | 'checkbox-blank-circle-fill'
+  | 'checkbox-multiple'
+  | 'close'
+  | 'close-circle'
+  | 'close-circle-fill'
+  | 'cloud-line'
+  | 'coins'
+  | 'completion'
+  | 'dashboard'
+  | 'database'
+  | 'delete-back'
+  | 'delete-bin'
+  | 'delete-bin-7'
+  | 'device'
+  | 'disposal'
+  | 'download'
+  | 'dropbox'
+  | 'dragable-menu'
+  | 'edit'
+  | 'ellipsis-h'
+  | 'emotion-happy-fill'
+  | 'emotion-unhappy-fill'
+  | 'error'
+  | 'error-fill'
+  | 'exchange'
+  | 'expired'
+  | 'extension-borrow'
+  | 'eye'
+  | 'eye-off'
+  | 'flag'
+  | 'file-add'
+  | 'file-copy'
+  | 'file-copy-2-line'
+  | 'file-edit'
+  | 'file-history'
+  | 'file-history-fill'
+  | 'file-info'
+  | 'files'
+  | 'file-lines'
+  | 'file-list-2'
+  | 'file-list'
+  | 'file-settings'
+  | 'file-shield-line'
+  | 'file-shield-2'
+  | 'file-up'
+  | 'file-user'
+  | 'filter-fill'
+  | 'filter'
+  | 'folder'
+  | 'folder-add-line'
+  | 'group'
+  | 'hand-coin'
+  | 'handheld'
+  | 'history'
+  | 'image-add'
+  | 'indeterminate-circle-fill'
+  | 'info'
+  | 'information-line'
+  | 'infrared-thermometer'
+  | 'list-check'
+  | 'link'
+  | 'luggage-cart'
+  | 'csv'
+  | 'xls'
+  | 'doc'
+  | 'data'
+  | 'line-chart'
+  | 'link-unlink-m'
+  | 'list-settings'
+  | 'loader-4'
+  | 'logout-box-r'
+  | 'mail-open'
+  | 'mail-send'
+  | 'magic-line'
+  | 'map-2'
+  | 'map-pin'
+  | 'menu'
+  | 'menu-unfold'
+  | 'minus'
+  | 'money-cny-box'
+  | 'money-dollar-circle'
+  | 'more'
+  | 'move-to'
+  | 'nfc'
+  | 'node-tree'
+  | 'note'
+  | 'notification'
+  | 'pdf'
+  | 'pair-tag'
+  | 'pencil'
+  | 'phone'
+  | 'printer'
+  | 'printer-cloud'
+  | 'price-tag-3'
+  | 'profile'
+  | 'qr'
+  | 'qr-scan'
+  | 'reception'
+  | 'refresh'
+  | 'replace-tag'
+  | 'report-tag'
+  | 'repair-ticketing'
+  | 'rfid'
+  | 'round-keyboard-arrow-left'
+  | 'round-keyboard-arrow-right'
+  | 'round-keyboard-double-arrow-left'
+  | 'round-keyboard-double-arrow-right'
+  | 'search'
+  | 'search-line'
+  | 'search-eye'
+  | 'send-plane-line'
+  | 'settings'
+  | 'shopping-cart-2'
+  | 'smartphone'
+  | 'sort-asc'
+  | 'sort-desc'
+  | 'supplier-return'
+  | 'internal-return'
+  | 'spinner'
+  | 'stack'
+  | 'star'
+  | 'store'
+  | 'subtract'
+  | 'time'
+  | 'ticket'
+  | 'tools'
+  | 'tracking'
+  | 'unassign'
+  | 'upload-2'
+  | 'upload-cloud-2'
+  | 'user'
+  | 'user-add'
+  | 'user-follow'
+  | 'user-received-2-line'
+  | 'user-search'
+  | 'user-settings'
+  | 'user-shared-2-line'
+  | 'user-star'
+  | 'user-unfollow'
+  | 'verification'
+  | 'team'
+  | 'mail'
+  | 'timer'
+  | 'format-clear'
+  | 'code-line'
+  | 'link-m'
+  | 'list-ordered'
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'list-unordered'
+  | 'external-link'
+  | 'whatsapp'
+  | 'chat-1-line'
+  | 'chat-1-fill'
+  | 'attachment-2'
+  | 'save'
+  | 'chat-new-line'
+  | 'code-box-line'
+  | 'file-chart-line'
+  | 'bar-chart-line'
+  | 'bug-2-line'
+  | 'run-line'
+  | 'user-unfollow-line'
+  | 'archive-line'
+  | 'shield-user-line'
+  | 'emotion-happy-line'
+  | 'list-settings-line'
+  | 'timer-line'
+  | 'star-fill'
+  | 'focus-2-line'
+  | 'global-line'
+  | 'focus-3-line';
+
+export interface IconProps {
+  icon: WangsIcons | null;
+  severity?: WangsIconseverities;
+  /**
+   * Show info on hover.
+   */
+  info?: string;
+  /**
+   * Set the position of tooltip.
+   */
+  tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  class?: any;
+}
+
+/**
+ * Display icon with svg backrgounds
+ */
+declare class Icon extends ClassComponent<IconProps, unknown, unknown> {}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Icon: GlobalComponentConstructor<Icon>;
+  }
+}
+
+export default Icon;

package/components/image/Image.vue.d.ts

@@ -0,0 +1,403 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ *
+ * Displays an image with preview.
+ *
+ * [Live Demo](https://www.WangsVue.org/image/)
+ *
+ * @module image
+ *
+ */
+import { TransitionProps, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  PassThrough,
+} from '../ts-helpers';
+
+export declare type ImagePassThroughOptionType =
+  | ImagePassThroughAttributes
+  | ((
+      options: ImagePassThroughMethodOptions,
+    ) => ImagePassThroughAttributes | string)
+  | string
+  | null
+  | undefined;
+
+export declare type ImagePassThroughTransitionType =
+  | TransitionProps
+  | ((options: ImagePassThroughMethodOptions) => TransitionProps)
+  | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ImagePassThroughMethodOptions {
+  /**
+   * Defines instance.
+   */
+  instance: any;
+  /**
+   *ˆ
+   * Defines valid properties.
+   */
+  props: ImageProps;
+  /**
+   * Defines current inline state.
+   */
+  state: ImageState;
+  /**
+   * 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 ImageProps.pt}
+ */
+export interface ImagePassThroughOptions {
+  /**
+   * Used to pass attributes to the root's DOM element.
+   */
+  root?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the image's DOM element.
+   */
+  image?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the button's DOM element.
+   */
+  button?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the icon's DOM element.
+   */
+  icon?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the mask's DOM element.
+   */
+  mask?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the toolbar's DOM element.
+   */
+  toolbar?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the rotate right button's DOM element.
+   */
+  rotateRightButton?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the rotate right icon's DOM element.
+   */
+  rotateRightIcon?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the rotate left button's DOM element.
+   */
+  rotateLeftButton?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the rotate left icon's DOM element.
+   */
+  rotateLeftIcon?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the zoom out button's DOM element.
+   */
+  zoomOutButton?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the zoom out icon's DOM element.
+   */
+  zoomOutIcon?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the zoom in button's DOM element.
+   */
+  zoomInButton?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the zoom in icon's DOM element.
+   */
+  zoomInIcon?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the close button's DOM element.
+   */
+  closeButton?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the close icon's DOM element.
+   */
+  closeIcon?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the preview container's DOM element.
+   */
+  previewContainer?: ImagePassThroughOptionType;
+  /**
+   * Used to pass attributes to the preview's DOM element.
+   */
+  preview?: ImagePassThroughOptionType;
+  /**
+   * Used to manage all lifecycle hooks.
+   * @see {@link BaseComponent.ComponentHooks}
+   */
+  hooks?: ComponentHooks;
+  /**
+   * Used to control Vue Transition API.
+   */
+  transition?: ImagePassThroughTransitionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ImagePassThroughAttributes {
+  [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Image component.
+ */
+export interface ImageState {
+  /**
+   * Mask visible state as a boolean.
+   * @defaultValue false
+   */
+  maskVisible: boolean;
+  /**
+   * Preview visible state as a boolean.
+   * @defaultValue false
+   */
+  previewVisible: boolean;
+  /**
+   * Rotate state as a number.
+   * @defaultValue 0
+   */
+  rotate: number;
+  /**
+   * Scale state as a boolean.
+   * @defaultValue 1
+   */
+  scale: number;
+}
+
+export type ImageGallery = {
+  src?: ImageProps['src'];
+};
+
+/**
+ * Defines valid properties in Image component.
+ */
+export interface ImageProps {
+  /**
+   * The thumbnail image.
+   */
+  src?: string | Blob;
+  /**
+   * The thumbnail image width.
+   *
+   * small: 30
+   * medium: 80
+   * big: 125
+   *
+   * @default to 'big' or {@link width} - When the props.width specified, the size will use this value
+   */
+  size?: 'small' | 'medium' | 'big';
+
+  /**
+   * Set custom size in pixels (without 'px')
+   * @example 30
+   */
+  width?: number;
+  /**
+   * Specify the rounded level.
+   *
+   * If true, the image will be full rounded.
+   *
+   * @default 'false'
+   */
+  rounded?: boolean;
+  /**
+   * Inline style of the image element.
+   */
+  imageStyle?: any;
+  /**
+   * Style class of the image element.
+   */
+  imageClass?: any;
+  /**
+   * Show preview as galeria. Display multiple image with thumbnail.
+   */
+  galleries?: ImageGallery[];
+  /**
+   * Custom indicator icon.
+   * @deprecated since v3.27.0. Use 'indicator' slot.
+   */
+  indicatorIcon?: string;
+  /**
+   * Disable the zoom-in button
+   * @defaultValue false
+   */
+  zoomInDisabled?: boolean | undefined;
+  /**
+   * Disable the zoom-out button
+   * @defaultValue false
+   */
+  zoomOutDisabled?: boolean | undefined;
+  /**
+   * Used to pass attributes to DOM elements inside the component.
+   * @type {ImagePassThroughOptions}
+   */
+  pt?: PassThrough<ImagePassThroughOptions>;
+  /**
+   * 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;
+
+  /**
+   * Get image url for specifics project from its server.
+   * @returns The full URL of the image from the server.
+   * @param path - the Image path from API Response JSON
+   * @param width - the image width in pixels
+   * @param height - the image height in pixels
+   */
+  getImageURL?: (
+    path?: string | null,
+    width?: number,
+    height?: number,
+  ) => string | undefined;
+
+  /**
+   * The placeholder to be shown when the image failed to load, or the src is not provided.
+   * It should be preserved by project configuration.
+   */
+  placeholder?: string | undefined;
+}
+
+/**
+ * Defines valid slots in Image slots.
+ */
+export interface ImageSlots {
+  /**
+   * Custom indicator template.
+   */
+  indicator(): VNode[];
+  /**
+   * Custom indicator icon template.
+   */
+  indicatoricon(): VNode[];
+  /**
+   * Custom refresh template.
+   */
+  refresh(): VNode[];
+  /**
+   * Custom undo template.
+   */
+  undo(): VNode[];
+  /**
+   * Custom zoomout template.
+   */
+  zoomout(): VNode[];
+  /**
+   * Custom zoomin template.
+   */
+  zoomin(): VNode[];
+  /**
+   * Custom close template.
+   */
+  close(): VNode[];
+  /**
+   * Custom image template.
+   * @param {Object} scope - image slot's params.
+   */
+  image(scope: {
+    /**
+     * Style class of the image element.
+     */
+    class: any;
+    /**
+     * Style of the image element.
+     */
+    style: any;
+    /**
+     * Image error function.
+     * @deprecated since v3.39.0. Use 'errorCallback' property instead.
+     */
+    onError: () => void;
+    /**
+     * Preview click function.
+     */
+    errorCallback: () => void;
+  }): VNode[];
+  /**
+   * Custom preview template.
+   * @param {Object} scope - preview slot's params.
+   */
+  preview(scope: {
+    /**
+     * Style class of the preview image element.
+     */
+    class: any;
+    /**
+     * Style of the preview image element.
+     */
+    style: any;
+    /**
+     * Preview click function.
+     * @deprecated since v3.39.0. Use 'previewCallback' property instead.
+     */
+    onClick: () => void;
+    /**
+     * Preview click function.
+     */
+    previewCallback: () => void;
+  }): VNode[];
+}
+
+/**
+ * **WangsVue - Image**
+ *
+ * _Displays an image with preview._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class Image extends ClassComponent<ImageProps, ImageSlots, unknown> {
+  /**
+   * Triggered when the preview overlay is shown.
+   *
+   * @memberof Image
+   */
+  show(): void;
+  /**
+   * Triggered when the preview overlay is hidden.
+   *
+   * @memberof Image
+   */
+  hide(): void;
+  /**
+   * Triggered when an error occurs while loading an image file.
+   *
+   * @memberof Image
+   */
+  error(): void;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Image: GlobalComponentConstructor<Image>;
+  }
+}
+
+export default Image;