# xframelib

<p>
<a href="https://www.npmjs.com/package/xframelib" target="_blank">
<img src="https://img.shields.io/npm/v/xframelib?color=orange&logo=npm" />
</a>
<a href="https://www.npmjs.com/package/xframelib" target="_blank">
<img src="https://img.shields.io/npm/dt/xframelib?logo=npm" />
</a>
</p>

## XFramelib Front-End Basic Library

> The core implementation is an enterprise-level micro-front-end architecture based on a Widget mechanism. It accumulates basic functions and components independent of UI interface libraries, improves the stability and high reusability of the basic code, and adheres to the philosophy of originating from and serving projects.

[README中文.md](https://share.note.youdao.com/s/bnDqvnDw) | [更新日志-中文](https://share.note.youdao.com/s/MrahKIVA)

## Main Functions:

- System configuration Sysconfig.js, corresponding Global.Config object

- LayoutManager: Implements the Widget scheduling mechanism

- Global.EventBus: Public event bus 

- UI Components:
  - LayoutContainer (Layout container)

  - ScaleContainer (Scale container)

  - XWindow (Window-like component)

  - SplitPanes (Page area splitting panel)

  - Popover (Floating panel)

  - RouterTransition related components

- Backend Service Calls:
  - HTTP Web Requests: Axios encapsulation implementation Global.Axios, AxiosHelper{get, post, requestPost, requestGet, getData, requestPostBody}

  - Hprose Service: Hprose Proxy method to call the backend hprose service

- Common Basic Functions:
  - H5Tool ：General functions

  - IsTool ：type detection tool (number, string, object, array, function, etc.)

  - ValidateTool： verification tool (ID card, mobile phone number, IP address, email, password strength judgment, URL, license plate number, etc.)

  - jQuery：jquery tools (hasClass, addClass, removeClass, toggleClass, setCssProperty)

  - Compression and decompression tools: ZipTool and GzipTool

  - Caching functions: StorageHelper for operating local cache objects, WebCacheTool for front-end caching

  - XXTEA encryption and decryption algorithm

- Commands: (Register and load commands using setupDirectives)
  - v-wow tiled scrolling display

  - v-media adaptive style

  - v-drag draggable

  - v-repeatClick to avoid repeated clicks

  - v-dc double-click command

- File upload and download:
  - BigFileDownload: large file download

  - FileUpload: large file upload

  - FileDownload Encapsulated for regular file downloads, including { Download, SaveAs, JsonDownload, HttpDownload, DownloadByUrl }

- WebWorkers:
  - iconvWorker: Text encoding/decoding

  - webCacheWorker: Front-end caching layer

  - xmathWorker: General mathematical calculations, large front-end images, tiled loading

-  NavigatorPlugin ：Browser plugin(provides general browser global method encapsulation)

## Usage

`pnpm add xframelib`

or
`npm i xframelib`

Globally import library styles:

import 'xframelib/dist/index.css';

- Open source application example: **Front-end development template vue-widget-template**

https://github.com/zorrowm/vue-widget-template

A development template fully based on XFramelib and Widget concepts

- **main.ts file**

In Typescript:

```ts
import { createApp } from 'vue';
import App from './App.vue';
//added by template
import { setupRouter } from './router/index';
import {setupGlobDirectives} from './directives/index';
import { init, Global } from 'xframelib';
import 'xframelib/dist/index.css';
import { getSystemPKG, getSystemID } from '@/utils/sysTool';
import { createPinia } from 'pinia';
import { message } from 'ant-design-vue';
import {Icon} from '@iconify/vue';
//dev phase opens, build logs out
import 'ant-design-vue/dist/antd.css';


message.config({ 
top: `100px`, 
duration: 1, maxCount: 3

});
// Bind messages and initialize xframe

// System ID, unique identifier

const sysID = getSystemID();

// Group name, project name

const sysGroup = getSystemPKG().name;

init(message, sysID, sysGroup);

// Create a pinia instance

const pinia = createPinia();

const app = createApp(App);

// Mount to the Vue root instance

app.use(pinia);

// Define v-drag commands

setupGlobDirectives(app);

setupRouter(app);

// Register global components

app.component('Icon', Icon);

app.mount('#app');
```

- **Quasar boot usage example**

```ts
import { boot } from 'quasar/wrappers';
import { addAPIProvider, Icon } from '@iconify/vue';
import { Dropdown } from 'floating-vue';
import { EmitLoadingInfo } from 'src/events/index';
import { autoRefresh } from 'src/utils/autoUpdate';
import { message } from 'src/utils/MessageNotify';

// Encapsulated message notification

import { getSystemID, getSystemPKG } from 'src/utils/sysTool';

import { Global, init } from 'xframelib';

function preInit() {

// System ID, unique identifier

const sysID = getSystemID();

 // Group name, project name

const sysGroup = getSystemPKG().name;

init(message, sysID, sysGroup);

 // Mounting progress notification method

Global.Loading = EmitLoadingInfo;

 // Register your own IconAPIProvider

if (Global.Config?.ServiceURL.IconServiceURL)

addAPIProvider('', {

resources: [Global.Config?.ServiceURL.IconServiceURL]

});

else {

//Offline icon usage: Enabled, IconServiceURL configuration is empty

import('../components/IconOffline').then((it) => {

it.default();

});

}
}
export default boot(({ app }) => {

EmitLoadingInfo('XFramelib library');

//Initialize Xframelib

preInit();

//Start hot update monitoring

if (import.meta.env.DEV) autoRefresh();

// Create pinia instance — 20240221 is not needed here, it is attached in src/stores/index.ts

// Register global component
app.component('Icon', Icon); app.component('VDropdown', Dropdown);
// app.component('VTooltip', Tooltip);
// app.component('VMenu', Menu);

console.log('Environment Variables',process.env);
 // Save the website root address
app.config.globalProperties.$AppURL=process.env.APP_URL;

});
```



## Application Examples

![Development Template](https://zorrowm.github.io/npm/xframelib.png)

![MapLibre Loading Large Images](https://zorrowm.github.io/npm/bigImageWorkerExample.png)