open-index/open-npm huggingface dataset:
npm package: @qqsl/ngx-qqsl-mapbox-components
Description: ## 更新日志
Latest version: 0.0.9

# ngx-qqsl-mapbox-components

## 更新日志

0.0.9

1. 更新依赖qqsl-utils至0.0.10
2. 修复组件样式

0.0.8

1. 更新依赖qqsl-utils至0.0.8

0.0.7

1. 更新依赖qqsl-utils至0.0.7

0.0.6

1. 更新依赖qqsl-utils至0.0.6

0.0.5

1. MapboxUtilsModule改名为MapboxComponentsModule
2. 完善README
3. 修复：NqMapLnglatInfoComponent未加入到MapboxUtilsModule中

## USAGE

````.js
import { MapboxComponentsModule } from "@qqsl/ngx-qqsl-mapbox-components";

@NgModule({
  imports: [
    MapboxComponentsModule,
  ]
})
export class AppModule{}

````

--------

## COMPONENTS

### NqMapLnglatInfoComponent

用于在地图左下角显示当前鼠标位置的经纬度

````.js
// nq-map-lnglat-info-component
@Input() lngLatInfo!:string
````

--------

### NqMapControlBtnComponent

用于在地图右上角显示放大、缩小、定位（定位至指定坐标）按钮

````.js
// nq-map-control-btn-component
@Input() map$!: Observable<mapboxgl.Map>
// 默认值是西宁
@Input() center: [number, number] = [101.778, 36.623]
````

--------

### NqMapToolComponent

该组件是地图工具按钮的容器。其内容投影分为四部分：

1. 自定义部分：该部分不需要任何特殊设置
2. 操作按钮部分：需要NqMapToolBtnsComponent组件
3. 图层切换部分：需要NqMapToolLayerSwitcherComponent组件
4. 图例部分：需要NqMapToolLegendComponent组件

````.js
<nq-map-tool
  [mapApi$]="mapApi$"
  class="map-tool"
>
  <nq-map-tool-btns nqMapToolBtnControl>
    <nq-map-tool-btn-reset nqMapToolBtnControl></nq-map-tool-btn-reset>
    <nq-measure-polygon nqMapToolBtnControl></nq-measure-polygon>
    <nq-measure-polyline nqMapToolBtnControl></nq-measure-polyline>
  </nq-map-tool-btns>
  <nq-map-tool-layer-switcher
    [token]="tiandituToken"
  >
  </nq-map-tool-layer-switcher>
  <nq-map-tool-legend-btn
    [legend]="legend"
  >
  </nq-map-tool-legend-btn>
</nq-map-tool>
````

--------

### NqMapToolBtnsComponent

该组件是操作按钮的父按钮（容器）。
他接受带有指令NqMapToolBtnDirective的组件作为子按钮。并通过该指令控制按钮。
具体示例见上方。

--------

### NqMapToolBtnResetComponent

操作按钮的子按钮之一，用于重置状态

--------

### NqMeasurePolygonComponent

操作按钮的子按钮之一，用于测量面

--------

### NqMeasurePolylineComponent

操作按钮的子按钮之一，用于测量线

--------

### NqMapToolBtnMarkComponent

selector: nq-map-tool-btn-mark

操作按钮的子按钮之一，用于提供定位功能（用户提供坐标以定位）

--------

### NqMapToolBtnDirective

操作按钮相关指令

--------

### AbstractMapToolPluginControl

操作按钮的基类。用户编写新的按钮时也应该继承该基类

--------

### NqMapToolLayerSwitcherComponent

用于切换图层

````.js
// nq-map-tool-layer-switcher
@Input() layer = LayerStatusEnum.CITY; // 默认图层
@Output() layerChange = new EventEmitter<LayerStatusEnum>()
@Input() token!: string // 天地图token
@Input() appName?: string // 应用名称，相同名称的应用可以保留图层状态
@Input() useHistory = false // 是否开启相同应用共享图层状态
````

--------

### NqMapToolLegendComponent

图例组件

````.js
// nq-map-tool-legend-btn
interface MapLegend{
  label: string,
  icon: string
}

@Input() legend: MapLegend[] = []
````
npm package: @qqsl/qqsl-formly
Description: 基于andt-zorro构建适配ngx-formly的表单控件。包括
Latest version: 0.0.4

# QqslFormly

基于andt-zorro构建适配ngx-formly的表单控件。包括

1. 表单控件的label、control支持百分比宽度调整
2. 表单控件的正常布局。
3. input
4. textArea
5. inputNumber
6. select
7. treeSelect
8. timePicker
9. datePicker
10. radio
11. checkbox
12. cascader(TODO)
13. colorPicker(TODO)
14. coordPicker(TODO)
15. slider(TODO)
16. switch(TODO)
npm package: @qqsl/qqsl-store-form-plugin
Description: 该表单插件基于 *@tethys/store*，为能够将angular中的form与store中的相应字段快速绑定而开发。
Latest version: 0.0.1

# QqslStoreFormPlugin

该表单插件基于 *@tethys/store*，为能够将angular中的form与store中的相应字段快速绑定而开发。

----------

## 指令 *thyStoreForm*

````.html
<form [formGroup]="form" [thyStoreForm]="store" thyStatePath="obj.form" thyDebounce="-1" [thyClearDestroy]="true">
  <input type="text" formControlName="value">
</form>
````

1. thyStatePath为store中的表单内容对应的路径
2. thyDebounce表示防抖时间，为-1则不防抖，每次数据同步更新
3. thyClearDestroy表示，该组件销毁后是否重置store中的对应表单内容
4. thyDynamic, 是否是动态表单，开启后，指令会在初始化时将表单内容同步至store

## createFormModel

在store中使用createFormModel构建表单内容，该函数返回如下：

````.js
interface FormModelState<T> {
    // 当表单被重置的时候，model为null，目前尚不支持nuNullAble。
    model: T | null;
    dirty: boolean | null;
    // 字段类型和angular保持一致
    status: FormControlStatus | null;
    errors: ValidationErrors | null;
}
````