bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/checkbox/checkbox.component.less

@@ -1,104 +0,0 @@
-:host {
-  display: block;
-}
-:host ::ng-deep {
-  .ant-checkbox {
-    display: inline-block;
-  }
-
-  .ant-checkbox-checked .ant-checkbox-inner,
-  .ant-checkbox-wrapper,
-  .ant-checkbox {
-    background-color: inherit;
-    border-color: inherit;
-    color: inherit;
-    font-size: inherit;
-  }
-
-  .ant-checkbox-checked .ant-checkbox-inner::after,
-  .ant-checkbox-inner {
-    border-color: inherit;
-    background-color: inherit;
-  }
-
-  .ant-checkbox-wrapper {
-    margin-left: 0px;
-  }
-
-  .label-vertical {
-    label.ant-checkbox-wrapper {
-      text-align: center;
-    }
-
-    .ant-checkbox + span {
-      display: block;
-    }
-  }
-
-  .content {
-    // display: flex;
-    .customRadio {
-      display: inline-flex;
-      align-items: center;
-      cursor: pointer;
-      padding: 15px;
-    }
-
-    &.layout-vertical {
-      display: flex;
-      flex-direction: column;
-    }
-
-    &.label-vertical {
-      .customRadio {
-        flex-direction: column;
-        text-align: center;
-
-        > i.input-checkbox {
-          margin: 0 0 5px 0;
-        }
-      }
-    }
-  }
-
-  .ant-checkbox + span,
-  .customRadio > i.input-checkbox + span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .customRadio > i.input-checkbox {
-    display: inline-block;
-    width: var(--width);
-    height: var(--height);
-    font-size: var(--outerSize);
-    line-height: var(--height);
-    color: var(--color);
-    font-weight: var(--weight);
-    font-family: var(--family);
-    text-align: center;
-    background-image: var(--notSelect);
-    background-repeat: no-repeat;
-    background-size: cover;
-    margin: 0 5px 0 0;
-    flex: none;
-  }
-
-  .customRadio.checked > i.input-checkbox {
-    background-image: var(--select);
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-}
-
-.ant-checkbox-group {
-  display: inline;
-}
-
-:host.vertical::ng-deep {
-  .ant-checkbox-wrapper {
-    display: block;
-    text-align: center;
-  }
-}

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

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

package/src/lib/checkbox/checkbox.component.ts

@@ -1,292 +0,0 @@
-import { Component, ElementRef, OnInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
-import { NzCheckBoxOptionInterface } from 'ng-zorro-antd/checkbox';
-import { Property, Widget, DataOutput, Data, Event, DataInput } from 'bbj-widget-base';
-
-interface CheckBoxOption extends NzCheckBoxOptionInterface {
-  color?: string;
-}
-
-@Component({
-  selector: 'sc-checkbox',
-  templateUrl: './checkbox.component.html',
-  styleUrls: ['./checkbox.component.less'],
-  host: {
-    '[class.vertical]': 'layout==="vertical"',
-  },
-})
-@Widget('复选框', {
-  group: 'component',
-  image: 'assets/img/screen/checkbox.png',
-  icon: 'iconmokuai',
-})
-export class CheckboxComponent implements OnInit, OnChanges {
-  @Data({
-    properties: {
-      label: { title: '标签', type: 'string' },
-      value: { title: '值', type: 'string' },
-      checked: { title: '是否选中', type: 'boolean' },
-    },
-  })
-  options: CheckBoxOption[] = [
-    { label: '多选一', value: 'option1', checked: true },
-    { label: '多选二', value: 'option2' },
-    { label: '多选三', value: 'option3' },
-  ];
-  @Property('复选框颜色', {
-    ui: {
-      widget: 'myColor',
-    },
-  })
-  borderColor = '#3285FF';
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    weight: 'normal',
-    size: 12,
-    space: 0,
-    lineHeight: 26,
-  };
-  textStyle: any;
-  @Property('整体布局', {
-    enum: [
-      { label: '横向', value: 'horizontal' },
-      { label: '纵向', value: 'vertical' },
-    ],
-  })
-  layout = 'horizontal';
-  @Property('选项布局', {
-    enum: [
-      { label: '横向', value: 'horizontal' },
-      { label: '纵向', value: 'vertical' },
-    ],
-  })
-  lableLayout = 'horizontal';
-  @Property('选项宽度')
-  labelWidthNum: any;
-  @Property('选项边距', { ui: { widget: 'myGrid' } })
-  lablePaddNum: any = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  };
-
-  @Property('显示全选')
-  showCheckAll: boolean;
-  @Property('隐藏文本')
-  hiddenLabel: boolean;
-  @Property('输出格式', {
-    enum: [
-      { label: '数组', value: 'array' },
-      { label: '字符串', value: 'string' },
-    ],
-  })
-  outputFormat = 'array';
-  @Property('分隔字符', { ui: { visibleIf: { outputFormat: ['string'] } } })
-  separator = ',';
-  @Property('标签颜色', {
-    ui: {
-      widget: 'seriesColor',
-    },
-  })
-  labelColors: string[];
-  @Property('选中图片', {
-    type: 'string',
-    ui: {
-      widget: 'myUpload',
-    },
-  })
-  selectImage = '';
-  @Property('未选图片', {
-    type: 'string',
-    ui: {
-      widget: 'myUpload',
-    },
-  })
-  notSelectImage = '';
-  @Property('图片宽', { type: 'number' })
-  width = 150;
-  @Property('图片高', { type: 'number' })
-  height = 50;
-  isCustom = false;
-
-  @DataInput('选中值')
-  value: any;
-
-  @DataOutput('值')
-  @Event('值改变', { params: '值' })
-  valueChange = new EventEmitter<any>();
-
-  checkOptions: CheckBoxOption[];
-  allChecked = false;
-  indeterminate = true;
-  lablePadd: any;
-  labelWidth: any;
-  @Property('禁用', { type: 'boolean' })
-  disabled: boolean;
-
-  constructor(private ele: ElementRef) {}
-
-  ngOnInit() {
-    /*this.ele.nativeElement.style.borderColor = this.borderColor;*/
-    /*  this.ele.nativeElement.style.setProperty('--color', this.borderColor);*/
-    this.textStyle = {
-      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',
-      borderColor: this.borderColor,
-      backgroudColor: this.borderColor,
-    };
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.selectImage && this.notSelectImage && this.selectImage != '' && this.notSelectImage != '') {
-      this.ele.nativeElement.style.setProperty('--outerSize', this.font.size + 'px');
-      this.ele.nativeElement.style.setProperty('--innerSize', this.font.size / 2 + 'px');
-      this.ele.nativeElement.style.setProperty('--width', this.width + 'px');
-      this.ele.nativeElement.style.setProperty('--height', this.height + 'px');
-      this.ele.nativeElement.style.setProperty('--color', this.font.color);
-      this.ele.nativeElement.style.setProperty('--weight', this.font.weight);
-      this.ele.nativeElement.style.setProperty('--family', this.font.weight);
-      this.ele.nativeElement.style.setProperty('--select', 'url(' + this.selectImage + ')');
-      this.ele.nativeElement.style.setProperty('--notSelect', 'url(' + this.notSelectImage + ')');
-      this.isCustom = true;
-    }
-    if (changes.value) {
-      this.updateCheckOptions();
-    }
-    if (changes.options) {
-      this.checkOptions = this.options.map((option, i) => {
-        option = { ...option };
-        if (this.labelColors?.length) {
-          option.color = this.labelColors[i % this.labelColors.length];
-        }
-        return option;
-      });
-      this.updateSingleChecked();
-      if (this.value) {
-        this.updateCheckOptions();
-      } else {
-        this.updateValue(true);
-      }
-    }
-
-    if (changes.lablePaddNum && changes.lablePaddNum.currentValue) {
-      const padd = changes.lablePaddNum.currentValue;
-      this.lablePadd = `${padd.top || 0}px ${padd.right || 0}px ${padd.bottom || 0}px ${padd.left || 0}px`;
-      // console.log(this.lablePadd);
-    }
-    if (changes.labelWidthNum && changes.labelWidthNum.currentValue) {
-      const labelWidth = changes.labelWidthNum.currentValue;
-      if (Number(labelWidth)) {
-        this.labelWidth = labelWidth + 'px';
-      } else {
-        const isPercent =
-          labelWidth.charAt(labelWidth.length - 1) === '%' ? Number(labelWidth.slice(0, labelWidth.length - 1)) : false;
-
-        if (isPercent) {
-          this.labelWidth = labelWidth;
-        }
-      }
-    }
-  }
-  change(event: NzCheckBoxOptionInterface[]) {
-    this.updateSingleChecked();
-    this.updateValue();
-  }
-
-  updateCheckOptions() {
-    if (this.value && this.checkOptions?.length) {
-      let values: string[];
-      if (typeof this.value === 'string') {
-        values = this.value.split(this.separator || ',');
-      } else {
-        values = this.value;
-      }
-      let changed = false;
-      this.checkOptions.forEach((option) => {
-        const checked = option.value && values.includes(option.value.toString());
-        if (option.checked !== checked) {
-          changed = true;
-          option.checked = checked;
-        }
-      });
-      if (changed) {
-        this.checkOptions = [...this.checkOptions];
-        this.updateSingleChecked();
-      }
-    }
-  }
-
-  updateValue(init?: boolean) {
-    const value = [];
-    this.checkOptions.forEach((item) => {
-      if (item.checked) {
-        value.push(item.value);
-      }
-    });
-    if (!init || value.length) {
-      if (this.outputFormat === 'string') {
-        this.valueChange.emit(value.join(this.separator || ','));
-      } else {
-        this.valueChange.emit(value);
-      }
-    }
-  }
-
-  updateAllChecked(): void {
-    this.indeterminate = false;
-    if (this.allChecked) {
-      this.checkOptions = this.checkOptions.map((item) => {
-        return {
-          ...item,
-          checked: true,
-        };
-      });
-    } else {
-      this.checkOptions = this.checkOptions.map((item) => {
-        return {
-          ...item,
-          checked: false,
-        };
-      });
-    }
-    this.updateValue();
-  }
-
-  updateSingleChecked(): void {
-    if (this.showCheckAll) {
-      if (this.checkOptions.every((item) => !item.checked)) {
-        this.allChecked = false;
-        this.indeterminate = false;
-      } else if (this.checkOptions.every((item) => item.checked)) {
-        this.allChecked = true;
-        this.indeterminate = false;
-      } else {
-        this.indeterminate = true;
-      }
-    }
-  }
-
-  // 全选
-  checkedAll() {
-    this.allChecked = !this.allChecked;
-    // this.
-  }
-
-  checked(option) {
-    let arr = [];
-    this.options.forEach((o) => {
-      if (o.value === option.value) {
-        o.checked = !o.checked;
-      }
-      if (o.checked) {
-        arr.push(o.value);
-      }
-    });
-    this.valueChange.emit(arr.join(this.separator || ','));
-  }
-}

package/src/lib/checkbox/checkbox.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
-import { CheckboxComponent } from './checkbox.component';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-
-@NgModule({
-  declarations: [CheckboxComponent],
-  imports: [CommonModule, WidgetBaseModule, NzCheckboxModule, FormsModule],
-})
-export class CheckboxModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(CheckboxComponent);
-  }
-}

package/src/lib/cross-table/cross-table.component.html

@@ -1,16 +0,0 @@
-<nz-table #basicTable [nzData]="data" [nzScroll]="{ x: '50px', y: '100%' }" [nzPageSize]="pageSize"
-          [ngStyle]="bodyStyle"
-          [nzBordered]="showBorder" [nzWidthConfig]="widthConfig" [nzFrontPagination]="needPage">
-  <thead>
-  <tr >
-      <th  *ngFor="let head of ths" nzAlign="{{contentAlign}}" [ngStyle]="headStyle">{{ head }}</th>
-  </tr>
-  </thead>
-  <tbody>
-  <tr *ngFor="let row of basicTable.data"  >
-      <ng-container *ngFor="let td of row">
-        <td  nzAlign="{{contentAlign}}"  [ngStyle]="bodyStyle">{{td.value}}</td>
-      </ng-container>
-  </tr>
-  </tbody>
-</nz-table>

package/src/lib/cross-table/cross-table.component.less

@@ -1,75 +0,0 @@
-// .table {
-//     width: 100%;
-//     display: block;
-//     overflow: auto;
-// }
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.ant-table-wrapper {
-  height: 100%;
-  ::ng-deep.ant-spin-nested-loading {
-    height: 100%;
-    .ant-spin-container {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      .ant-table {
-        background: inherit;
-        flex: 1;
-        overflow: hidden;
-        .ant-table-thead > tr > th {
-          background: inherit;
-        }
-        .ant-table-container {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          .ant-table-header{
-            flex: none;
-          }
-          .ant-table-body{
-            flex: 1;
-            overflow: auto;
-          }
-        }
-      }
-      .ant-table-pagination-right {
-        align-self: flex-end;
-      }
-    }
-  }
-}
-// .ant-table-wrapper, .ant-spin-nested-loading, .ant-spin-container, .ant-table-scroll {
-//     height: 100%;
-// }
-// .ant-table {
-//     height: 100%;
-//     padding-bottom: 40px;
-//     background: unset;
-//     .ant-table-thead>tr>th {
-//         background: inherit;
-//     }
-// }
-// .ant-table-content {
-//     height: 100%;
-// }
-// nz-pagination {
-//     position: absolute;
-//     bottom: 0;
-//     right: 0;
-//     .ant-table-pagination.ant-pagination {
-//         margin: 0;
-//     }
-// }
-// .ant-table-scroll {
-//     overflow: hidden;
-//     display: flex;
-//     flex-direction: column;
-// }
-// .ant-table-header {
-//     flex-shrink: 0;
-// }
-// }

package/src/lib/cross-table/cross-table.component.spec.ts

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