@fewangsit/wangsvue-fats 1.0.0-alpha.2

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;

package/components/imagecompressor/BackgroundImageCropper.vue.d.ts

@@ -0,0 +1,36 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<{
+    touchMove?: unknown;
+    mouseMove?: unknown;
+    touchResize?: unknown;
+    wheelResize?: unknown;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    move: (e: any) => void;
+    resize: (e: any) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
+    touchMove?: unknown;
+    mouseMove?: unknown;
+    touchResize?: unknown;
+    wheelResize?: unknown;
+}>>> & {
+    onResize?: (e: any) => any;
+    onMove?: (e: any) => any;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+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/imagecompressor/ImageCompressor.vue.d.ts

@@ -0,0 +1,223 @@
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export interface ImageCompressorLocaleConfig {
+  cropDialogHeader: string;
+  /**
+   * @example 'Gunakan Ctrl + Scroll untuk perbesar atau perkecil gambar'
+   */
+  cropperCtrlScrollInfo: string;
+  /**
+   * @example 'Gunakan dua jari untuk untuk perbesar atau perkecil gambar'
+   */
+  cropperTwoFingerInfo: string;
+
+  /**
+   * @example 'Maks. 1 MB'
+   */
+  maxSizeRequirement: string;
+
+  /**
+   * @example 'Hanya mendukung format gambar'
+   */
+  imageTypeRequirement: string;
+
+  cancelCropLabel: string;
+  changeImageLabel: string;
+  applyCropLabel: string;
+}
+
+export type Image = {
+  src: string | null;
+  type: string | null;
+};
+
+export type ImageCompressorPayload = {
+  canvas: HTMLCanvasElement | undefined;
+  compressed: {
+    blob: string | Blob;
+    base64: string;
+    fileName: string;
+    file: File;
+    size: string;
+    type: 'image/webp' | 'image/jpeg' | 'image/jpg';
+  };
+  message?: string;
+};
+
+export interface ImageCompressorProps {
+  /**
+   * Specify the user initial name for the Image Placeholder
+   *
+   * max-length: 3
+   */
+  initialName?: string;
+  /**
+   * Specify the input type, wether single ro multiple image input.
+   *
+   * @default false - single input.
+   */
+  multiple?: boolean;
+  /**
+   * The default image index 0 / 1
+   */
+  defaultImage?: number;
+  /**
+   * Disable the image input.
+   *
+   * @todo add disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * Display a compressed Blob image or a string objectURL of a Blob when mounted.
+   */
+  compressedBlob?: string | Blob | (string | Blob)[];
+  /**
+   * Display an image with the URL instead.
+   */
+  imagePreviewUrl?: string | string[];
+  /**
+   * Specify the size image input and preview size.
+   *
+   * - small: 30px
+   * - medium: 80px
+   * - big: 125*125 px
+   *
+   * @todo Add small size. Currently only support big size.
+   * @default 'big'
+   */
+  imagePreviewSize?: 'small' | 'medium' | 'big';
+  /**
+   * Specify the rounded level.
+   *
+   * If true, the image will be full rounded.
+   *
+   * @default 'false'
+   */
+  rounded?: boolean;
+  /**
+   * Specify whether the image able to be deleted or not (in case image only able to added and edited)
+   *
+   * @default true
+   */
+  useDeleteButton?: boolean;
+  /**
+   * Specify whether the image input will be used as field within Form validation.
+   *
+   */
+  useValidator?: boolean;
+  /**
+   * Specify if the field is required or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Set the invalid state and display the custom validator message.
+   */
+  invalid?: boolean;
+  /**
+   * Set custom validation message.
+   */
+  validatorMessage?: string | CustomValidation;
+  /**
+   * The field label.
+   *
+   * @default undefined - if props.useValidator not presents.
+   * @default 'Photo' - if props.useValidator presents.
+   */
+  label?: string;
+  /**
+   * Specify the field name to make the input available on form validation payload.
+   *
+   * @default 'imageInput'
+   */
+  fieldName?: string;
+  /**
+   * Display field information as tooltip.
+   */
+  fieldInfo?: string;
+  /**
+   * Show the image requirement info section.
+   *
+   * @default true
+   */
+  showInfo?: boolean;
+  /**
+   * Show dialog confirmation before delete the image.
+   */
+  confirmOnDelete?: boolean;
+  /**
+   * On clicking delete button, emit the delete function instead of deleting the image.
+   * Useful when showing custom dialog confirmation.
+   */
+  emitDeleteFn?: boolean;
+  /**
+   * Show the validation message section.
+   *
+   * @default true
+   */
+  showValidatorMessage?: boolean;
+  /**
+   * Specify the file type for the uploaded image result.
+   *
+   * @default 'webp'
+   */
+  fileType?: 'webp' | 'jpeg' | 'jpg';
+}
+
+export interface ImageCompressorSlots {
+  [key: string]: unknown;
+}
+
+export type ImageCompressorEmits = {
+  /**
+   * On apply the image cropper.
+   */
+  'apply': [value: ImageCompressorPayload];
+  /**
+   * On apply image from props.
+   */
+  'applyProp': [];
+  'update:defaultImage': [index?: number];
+  /**
+   * On delete button clicked.
+   *
+   * When confirmOnDelete / emitDelete is true, this emit will be emitted with a delete function.
+   * You need to call the function inside your own delete funcition to clear the image.
+   *
+   * @param deleteFn - the function delete
+   * @param index - the index of image to be deleted
+   */
+  'delete': [deleteFn?: (index?: number) => void, index?: number];
+};
+
+/**
+ * **WangsVue - ImageCompressor**
+ *
+ * _Handle image input and compression._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class ImageCompressor extends ClassComponent<
+  ImageCompressorProps,
+  ImageCompressorSlots,
+  ImageCompressorEmits
+> {
+  /**
+   * Exposed function to assign image from props.
+   *
+   * @param isDelete
+   */
+  assignPreviewImagesFromProp(isDelete?: boolean): Promise<void>;
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    ImageCompressor: GlobalComponentConstructor<ImageCompressor>;
+  }
+}
+
+export default ImageCompressor;

package/components/imagecompressor/ImageInputInfo.vue.d.ts

@@ -0,0 +1,30 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<{
+    showInfo: boolean;
+    showAddButton?: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    addPhoto: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
+    showInfo: boolean;
+    showAddButton?: boolean;
+}>>> & {
+    onAddPhoto?: () => any;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+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;
+    };
+};