bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/search/search.component.ts

@@ -1,103 +0,0 @@
-import { Component, OnInit, EventEmitter } from '@angular/core';
-import { Property, Widget, DataOutput } from 'bbj-widget-base';
-import { getFontStyle } from '../shared/util/style.util';
-
-@Component({
-  selector: 'sc-search',
-  templateUrl: './search.component.html',
-  styleUrls: ['./search.component.less'],
-})
-@Widget('搜索框', { group: 'component', image: 'assets/img/screen/search.png', icon: 'iconmokuai' })
-export class SearchComponent implements OnInit {
-  @Property('按钮样式', {
-    ui: {
-      widget: 'myButton',
-      spanLabel: 24,
-      spanControl: 24,
-      icon: 'search',
-      reset: ['background', 'borderColor', { parent: 'font', child: 'color' }],
-      background: [
-        { color: '#F5A623', borderColor: '#F5A623', background: 'rgba(245,166,35,0.2)' },
-        { color: '#50E3C2', borderColor: '#50E3C2', background: 'rgba(80,227,194,0.2)' },
-        { color: '#9013fe', borderColor: '#9013fe', background: 'rgba(144,19,254,0.2)' },
-        { color: '#3285ff', borderColor: '#3285ff', background: 'rgba(50,133,255,0.2)' },
-      ],
-    },
-  })
-  colorExample: any = { color: '#3285ff', borderColor: '#3285ff', background: 'rgba(50,133,255,0.2)' };
-
-  @Property('填充', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  background = 'rgba(50,133,255,0.2)';
-  @Property('边框', {
-    ui: {
-      widget: 'myColor',
-      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  borderColor = '#3285ff';
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = { family: '', color: '#3285ff', weight: 'normal', size: 12, space: 0, lineHeight: '' };
-  @Property('按钮样式', {
-    enum: [
-      { label: '样式一', value: 'default' },
-      { label: '样式二', value: 'iconSingle' }
-    ],
-  })
-  btnStyleOption = 'default';
-
-  @Property('按钮颜色', {
-    ui: {
-      widget: 'myColor',
-      visibleIf: { btnStyleOption: ['iconSingle'] }
-    },
-  })
-  iconSingleColor = '#fff';
-  @Property('按钮大小', {
-    ui: {
-      visibleIf: { btnStyleOption: ['iconSingle'] }
-    },
-  })
-  iconSingleSize = 16;
-
-  @Property('隐藏按钮')
-  hideBtn: boolean;
-  @Property('提示文字')
-  placeholder: string;
-  @Property('高度')
-  height = 26;
-  btnStyle: any;
-  btnIconStyle: any;
-  @DataOutput('值')
-  valueChange = new EventEmitter<any>();
-  value: any;
-  constructor() { }
-
-  ngOnInit() {
-    this.btnStyle = {
-      backgroundColor: this.background,
-      borderColor: this.borderColor,
-      ...getFontStyle(this.font),
-    };
-    if (this.btnStyleOption === 'iconSingle') {
-      this.btnIconStyle = {
-        fontSize: this.iconSingleSize + 'px',
-        color: this.iconSingleColor,
-      }
-    }
-  }
-
-  searchChange(value) {
-    this.valueChange.emit(value);
-  }
-
-  onKeypress(event: KeyboardEvent) {
-    if (event.key === 'Enter') {
-      this.valueChange.emit(this.value);
-    }
-  }
-}

package/src/lib/search/search.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SearchComponent } from './search.component';
-import { NzInputModule } from 'ng-zorro-antd/input';
-import { NzButtonModule } from 'ng-zorro-antd/button';
-import { FormsModule } from '@angular/forms';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-import { NzIconModule, NzIconService } from 'ng-zorro-antd/icon';
-import { NzPipesModule } from 'ng-zorro-antd/pipes';
-
-@NgModule({
-  declarations: [SearchComponent],
-  imports: [CommonModule, WidgetBaseModule, NzIconModule, NzInputModule, NzButtonModule, FormsModule, NzPipesModule],
-})
-export class SearchModule {
-  constructor(widgetService: WidgetService, private iconService: NzIconService) {
-    widgetService.register(SearchComponent);
-    this.iconService.fetchFromIconfont({
-      scriptUrl: 'assets/icons/screen-icons.js'
-    });
-  }
-}

package/src/lib/select/select.component.html

@@ -1,30 +0,0 @@
-<nz-select
-  class="select-wrap"
-  [ngClass]="align"
-  [ngModel]="selectedValue"
-  [nzMode]="mode"
-  [nzMaxTagCount]="num"
-  [nzDropdownClassName]="'dropDown'"
-  [ngStyle]="ngStyle"
-  [nzDropdownStyle]="dropdownStyle"
-  [nzDropdownClassName]="'selectComp'"
-  [nzDropdownRender]="renderTemplate"
-  [nzShowSearch]="showSearch"
-  (ngModelChange)="selectChange($event)"
-  [nzAllowClear]="showClean"
-  [nzPlaceHolder]="hint"
-  [(nzOpen)]="open"
->
-  <nz-option
-    *ngFor="let item of options"
-    [nzValue]="item.value ? item.value : item.label"
-    [nzLabel]="item.label"
-  ></nz-option>
-</nz-select>
-<ng-template #renderTemplate>
-  <div *ngIf="options && options.length > 0 && mode === 'multiple'" class="select-footer">
-    <button nz-button (click)="selectAllData()">全选</button>
-    <button nz-button *ngIf="showClean" (click)="selectChange(null)">清空</button>
-    <button nz-button *ngIf="showConfirm" (click)="open = false">查看</button>
-  </div>
-</ng-template>

package/src/lib/select/select.component.less

@@ -1,117 +0,0 @@
-:host {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-}
-
-:host ::ng-deep {
-  .ant-select {
-    width: 100%;
-    height: 100%;
-
-    &.center .ant-select-selection-item {
-      justify-content: center;
-    }
-
-    &.right .ant-select-selection-item {
-      justify-content: flex-end;
-    }
-  }
-
-  .ant-select-selection-item {
-    display: flex;
-    align-items: center;
-  }
-
-  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
-    background-color: inherit;
-    border: 0;
-    height: 100%;
-    box-shadow: none !important;
-  }
-
-  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input {
-    height: 100%;
-  }
-
-  .ant-select-arrow {
-    color: inherit;
-  }
-
-  .ant-select-item,
-  .ant-select-item-empty {
-    color: inherit;
-  }
-
-  .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
-  .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
-    line-height: inherit;
-  }
-}
-
-:host ::ng-deep {
-  // .ant-select-item-option{
-  //   color: inherit;
-  // }
-  // .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-  //   background: rgba(255,255,255,0.2);
-  //   color: inherit;
-  // }
-}
-.select-allCheck:hover {
-  background-color: rgb(248, 248, 248);
-}
-.select-allCheck {
-  display: flex;
-  align-items: center;
-  border-top: 1px solid #eee;
-  justify-content: flex-end;
-  height: 32px;
-  padding: 5px 12px;
-  font-size: 14px;
-  position: relative;
-  line-height: 22px;
-  font-weight: 400;
-  color: #333333;
-
-  span {
-    flex: 1;
-  }
-  p {
-    line-height: 32px;
-  }
-}
-
-:host ::ng-deep {
-  ::-webkit-scrollbar {
-    width: 2px;
-  }
-}
-
-::ng-deep {
-  .selectComp {
-    // class=selectComp下拉组件 滚动条隐藏
-    .cdk-virtual-scroll-viewport::-webkit-scrollbar {
-      width: 0px;
-    }
-    .ant-select-item-option {
-      color: inherit;
-      font-size: 12px;
-    }
-    .ant-select-item-option-active {
-      background: var(--selectHoverBackgroundColor);
-      color: var(--selectHoverColor);
-    }
-    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-      background: var(--dropdownBackgroundColor);
-      color: var(--selectDropDownColor);
-    }
-    .ant-select-dropdown {
-      background-color: transparent;
-    }
-  }
-}
-
-.select-footer {
-  padding: 8px;
-}

package/src/lib/select/select.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { SelectComponent } from './select.component';
-
-describe('SelectComponent', () => {
-  let component: SelectComponent;
-  let fixture: ComponentFixture<SelectComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SelectComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SelectComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/select/select.component.ts

@@ -1,297 +0,0 @@
-import { Component, OnInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
-import { Property, Widget, DataOutput, Data, Event, DataInput, Method, Param } from 'bbj-widget-base';
-
-@Component({
-  selector: 'sc-select',
-  templateUrl: './select.component.html',
-  styleUrls: ['./select.component.less'],
-})
-@Widget('下拉框', {
-  group: 'component',
-  image: 'assets/img/screen/select.png',
-  icon: 'iconmokuai',
-})
-export class SelectComponent implements OnInit, OnChanges {
-  @Property('下拉框样式', {
-    ui: {
-      widget: 'myImageExample',
-      spanLabel: 24,
-      spanControl: 24,
-      reset: ['background', 'borderColor', 'selectColor'],
-      example: [
-        {
-          background: 'assets/img/screen/select1.png',
-          data: {
-            selectColor: '#F5A623',
-            borderColor: '#F5A623',
-            background: 'rgba(245,166,35,0.2)',
-            dropdownBg: 'rgba(245,166,35,0.2)',
-            dropdownBorderColor: '#F5A623',
-          },
-        },
-        {
-          background: 'assets/img/screen/select2.png',
-          data: {
-            selectColor: '#50E3C2',
-            borderColor: '#50E3C2',
-            background: 'rgba(80,227,194,0.2)',
-            dropdownBg: 'rgba(80,227,194,0.2)',
-            dropdownBorderColor: '#50E3C2',
-          },
-        },
-        {
-          background: 'assets/img/screen/select3.png',
-          data: {
-            selectColor: '#9013fe',
-            borderColor: '#9013fe',
-            background: 'rgba(144,19,254,0.2)',
-            dropdownBg: 'rgba(144,19,254,0.2)',
-            dropdownBorderColor: '#9013fe',
-          },
-        },
-        {
-          background: 'assets/img/screen/select4.png',
-          data: {
-            selectColor: '#3285ff',
-            borderColor: '#3285ff',
-            background: 'rgba(50,133,255,0.2)',
-            dropdownBg: 'rgba(50,133,255,0.2)',
-            dropdownBorderColor: '#3285ff',
-          },
-        },
-      ],
-    },
-  })
-  example: any;
-  @Property('提示用语', { type: 'string' })
-  hint = '请选择';
-  @Property('', {
-    ui: {
-      widget: 'myCheckNumber',
-      title: '多选个数',
-      spanLabel: 0,
-      spanControl: 24,
-    },
-  })
-  num = 1;
-  @Property('填充', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  background: string;
-  @Property('边框', {
-    ui: {
-      widget: 'myColor',
-      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  borderColor = '#d9d9d9';
-
-  // 通过全局变量来控制颜色变化 当多个时会互相替换 移除此功能
-  @Property('选中颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  dropdownBackgroundColor = '#E6F7FF';
-  @Property('选中字体颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  selectDropDownColor = 'rgba(0,0,0,0.85)';
-  @Property('hover字体颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  selectHoverColor = 'rgba(0,0,0,0.85)';
-  @Property('hover背景颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  selectHoverBackgroundColor = '#f5f5f5';
-
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    weight: 'normal',
-    size: 12,
-    space: 0,
-    lineHeight: 30,
-  };
-
-  @Property('对齐方式', {
-    enum: [
-      { label: '左对齐', value: 'left' },
-      { label: '居中', value: 'center' },
-      { label: '右对齐', value: 'right' },
-    ],
-  })
-  align = 'left';
-  @Property('搜索')
-  showSearch: boolean;
-  @Property('清空按钮')
-  showClean: boolean;
-  @Property('查看按钮')
-  showConfirm: boolean;
-  @Property('下拉宽度', { type: 'number' })
-  dropdownWidth = null;
-
-  @Property('下拉填充', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  dropdownBg = '#fff';
-  @Property('下拉边框', {
-    ui: {
-      widget: 'myColor',
-      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
-    },
-  })
-  dropdownBorderColor = '#fff';
-
-  @Property('输出格式', {
-    enum: [
-      { label: '数组', value: 'array' },
-      { label: '字符串', value: 'string' },
-    ],
-    ui: { widget: 'select', visibleIf: { num: (value) => value > 1 } },
-  })
-  outputFormat = 'array';
-  @Property('分隔字符', { ui: { visibleIf: { outputFormat: ['string'] } } })
-  separator = ',';
-  selectedValue: any;
-  ngStyle: any;
-  dropdownStyle: any;
-  mode = 'default';
-  open: boolean;
-
-  @Data({
-    properties: {
-      label: { title: '标签', type: 'string' },
-      value: { title: '值', type: 'string' },
-      checked: { title: '是否选中', type: 'boolean' },
-    },
-  })
-  options: any = [
-    { label: '选项1', value: 'option1' },
-    { label: '选项2', value: 'option2' },
-  ];
-
-  @DataInput('选中值')
-  value: any;
-
-  @DataOutput('值')
-  @Event('值改变', { params: '值' })
-  valueChange = new EventEmitter<any>();
-  @DataOutput('原始数据')
-  optionChange = new EventEmitter<any>();
-
-  constructor() {}
-
-  ngOnInit() {
-    this.ngStyle = {
-      backgroundColor: this.background,
-      border: '1px solid ' + this.borderColor,
-      fontSize: this.font.size + 'px',
-      fontFamily: this.font.family,
-      color: this.font.color,
-      fontWeight: this.font.weight,
-      letterSpacing: this.font.space + 'px',
-      lineHeight: this.font.lineHeight + 'px',
-    };
-    this.dropdownBg = this.dropdownBg ? this.dropdownBg : this.background;
-    this.dropdownBorderColor = this.dropdownBorderColor ? this.dropdownBorderColor : this.borderColor;
-    this.dropdownStyle = {
-      backgroundColor: this.dropdownBg,
-      border: '1px solid ' + this.dropdownBorderColor,
-      fontSize: this.font.size + 'px',
-      fontFamily: this.font.family,
-      color: this.font.color,
-      fontWeight: this.font.weight,
-      letterSpacing: this.font.space + 'px',
-      lineHeight: this.font.lineHeight + 'px',
-      width: this.dropdownWidth + 'px',
-    };
-    //  this.dropdownStyle.width = this.dropdownWidth ? this.dropdownWidth + 'px' : '';
-    document.body.style.setProperty(
-      '--dropdownBackgroundColor',
-      this.dropdownBackgroundColor || ' rgba(255,255,255,0.2)',
-    );
-    document.body.style.setProperty('--selectDropDownColor', this.selectDropDownColor || '#333');
-    document.body.style.setProperty('--selectHoverColor', this.selectHoverColor || 'rgba(255,255,255,0.5)');
-    document.body.style.setProperty('--selectHoverBackgroundColor', this.selectHoverBackgroundColor || '#333');
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.options) {
-      if (this.num && this.num > 1) {
-        this.mode = 'multiple';
-        this.selectedValue = [];
-        this.options.forEach((option) => {
-          if (option.checked && this.selectedValue.length < this.num) {
-            this.selectedValue.push(option.value ? option.value : option.label);
-          }
-        });
-        if (this.selectedValue.length > 0) {
-          this.selectChange(this.selectedValue);
-        }
-      } else {
-        this.mode = 'default';
-        const item = this.options.find((s) => s.checked);
-        if (item) {
-          this.selectedValue = item.value ? item.value : item.label;
-          this.selectChange(this.selectedValue);
-        }
-      }
-    }
-    if (changes.value) {
-      this.selectedValue = this.value;
-      // console.log(this.value);
-    }
-  }
-
-  selectAllData() {
-    this.selectedValue = [];
-    this.options.forEach((data) => {
-      this.selectedValue.push(data.value);
-    });
-    this.selectChange(this.selectedValue);
-    // this.valueChange.emit(this.selectedValue);
-    // this.optionChange.emit(this.options);
-  }
-
-  selectChange(value: string | string[]) {
-    this.selectedValue = value;
-    if (Array.isArray(value)) {
-      // 多选
-      if (this.outputFormat === 'string') {
-        this.valueChange.emit(value.join(this.separator || ','));
-      } else {
-        this.valueChange.emit(value);
-      }
-      const selectedOption = this.options.filter((option) => value.includes(option.value));
-      this.optionChange.emit(selectedOption);
-    } else {
-      this.valueChange.emit(value);
-      const selectedOption = this.options.find((option) => option.value === event);
-      this.optionChange.emit(selectedOption);
-    }
-  }
-
-  @Method('选中')
-  select(@Param('值') value: any) {
-    this.selectedValue = value;
-    this.selectChange(value);
-  }
-}

package/src/lib/select/select.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SelectComponent } from './select.component';
-import { FormsModule } from '@angular/forms';
-import { NzSelectModule } from 'ng-zorro-antd/select';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-import { NzButtonModule } from 'ng-zorro-antd/button';
-import { NzDividerModule } from 'ng-zorro-antd/divider';
-
-@NgModule({
-  declarations: [SelectComponent],
-  imports: [CommonModule, WidgetBaseModule, NzSelectModule, FormsModule, NzButtonModule],
-})
-export class SelectModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(SelectComponent);
-  }
-}

package/src/lib/shape/shape.component.html

@@ -1,39 +0,0 @@
-<svg width="100%" height="100%" [ngSwitch]="type">
-  <defs *ngIf="filterId">
-    <filter [id]="filterId" x="-100%" y="-100%" width="300%" height="300%" filterUnits="userSpaceOnUse">
-      <feOffset result="offOut" in="SourceGraphic" [attr.dx]="shadow.X" [attr.dy]="shadow.Y" />
-      <feGaussianBlur result="blurOut" in="offOut" [attr.stdDeviation]="shadow.Z" />
-      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
-    </filter>
-  </defs>
-  <rect
-    *ngSwitchCase="'rect'"
-    x="0"
-    y="0"
-    [attr.width]="width"
-    [attr.height]="height"
-    [ngStyle]="style"
-    [attr.filter]="filterUrl"
-  ></rect>
-  <ellipse
-    *ngSwitchCase="'circle'"
-    [attr.cx]="width / 2"
-    [attr.cy]="height / 2"
-    [attr.rx]="width / 2"
-    [attr.ry]="height / 2"
-    [ngStyle]="style"
-    [attr.filter]="filterUrl"
-  />
-  <line
-    *ngSwitchCase="'line'"
-    x1="0"
-    [attr.y1]="height / 2"
-    [attr.x2]="width"
-    [attr.y2]="height / 2"
-    [ngStyle]="style"
-    [attr.filter]="filterUrl"
-  />
-  <!-- <path *ngSwitchCase="'path'" [attr.d]="data.d" [ngStyle]="style" [attr.filter]="filterUrl" /> -->
-  <polyline *ngSwitchCase="'polyline'" [attr.points]="points" [ngStyle]="style" [attr.filter]="filterUrl" />
-  <polygon *ngSwitchDefault [attr.points]="points" [ngStyle]="style" [attr.filter]="filterUrl" />
-</svg>

package/src/lib/shape/shape.component.less

@@ -1,8 +0,0 @@
-:host {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-svg {
-  overflow: visible;
-}

package/src/lib/shape/shape.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { ShapeComponent } from './shape.component';
-
-describe('ShapeComponent', () => {
-  let component: ShapeComponent;
-  let fixture: ComponentFixture<ShapeComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ShapeComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ShapeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});