ng-devui
Version:
DevUI components based on Angular
211 lines (206 loc) • 16.2 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, forwardRef, Component, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class RateComponent {
/**
* @deprecated
* 用readonly替代
*/
set read(value) {
this.readonly = value;
}
/**
* @deprecated
* 用color替代
*/
set type(value) {
this.color = `var(--devui-${value})`;
}
constructor(cdr) {
this.cdr = cdr;
this.readonly = false;
this.count = 5;
this.color = '';
/**
* @deprecated
* 用character替代
*/
this.icon = '';
this.character = '';
this.allowHalf = false;
this.allowClear = false;
this.totalLevel_array = [];
this.width = '';
}
ngOnInit() {
for (let i = 0; i < this.count; i++) {
this.totalLevel_array.push({ width: '0' });
}
}
get isCharacterTemplate() {
return this.character instanceof TemplateRef;
}
get characterTemplate() {
return this.character;
}
// 只读模式配置
setStaticRating() {
const half_star = this.chooseValue < 0 ? this.chooseValue + 1 : this.chooseValue % 1;
const int_current_level = Math.floor(this.chooseValue);
this.setChange(0, int_current_level + 1, '100%');
if (half_star > 0) {
this.totalLevel_array[int_current_level + 1].width = `${half_star * 100}%`;
this.setChange(int_current_level + 2, this.count, '0');
}
else {
this.setChange(int_current_level + 1, this.count, '0');
}
}
// 动态模式配置
setDynamicRating() {
const halfStar = this.chooseValue % 1;
const wholeStar = Math.floor(this.chooseValue);
this.setChange(0, wholeStar + 1, '100%');
if (this.allowHalf && halfStar) {
this.setChange(wholeStar + 1, wholeStar + 2, '50%');
this.setChange(wholeStar + 2, this.count, '0');
}
else if (this.allowClear && this.chooseValue === -1) {
this.setChange(0, this.count, '0');
}
else {
this.setChange(wholeStar + 1, this.count, '0');
}
}
hoverToggle(event, index, reset = false) {
if (this.readonly) {
return;
}
if (reset) {
// chooseValue从index取值故比真实值小1
if (this.chooseValue >= -0.5) {
this.setDynamicRating();
}
else {
this.setChange(0, this.count, '0');
}
}
else {
this.setChange(0, index, '100%');
if (this.allowHalf && event.offsetX * 2 <= event.target.clientWidth) {
this.setChange(index, index + 1, '50%');
}
else {
this.setChange(index, index + 1, '100%');
}
this.setChange(index + 1, this.count, '0');
}
}
// 根据mouseMove，mouseLeave,select等操作，改变颜色与是否选中
setChange(start, end, width) {
for (let i = start; i < end; i++) {
this.totalLevel_array[i].width = width;
}
}
selectValue(event, index) {
if (this.readonly) {
return;
}
this.setChange(0, index, '100%');
const prevValue = this.chooseValue;
if (this.allowHalf && event.offsetX * 2 <= event.target.clientWidth) {
this.chooseValue = index - 0.5;
}
else {
this.chooseValue = index;
}
if (this.allowClear && this.chooseValue === prevValue) {
this.chooseValue = -1;
this.setChange(0, this.count, '0');
this.onChange(0);
}
else {
if (this.allowHalf && event.offsetX * 2 <= event.target.clientWidth) {
this.setChange(index, index + 1, '50%');
}
else {
this.setChange(index, index + 1, '100%');
}
this.setChange(index + 1, this.count, '0');
this.onChange(this.chooseValue + 1);
}
this.onTouched();
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
writeValue(value) {
this.chooseValue = value - 1;
if (this.readonly) {
this.setStaticRating();
}
else {
this.setDynamicRating();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RateComponent, selector: "d-rate", inputs: { read: "read", readonly: "readonly", count: "count", color: "color", icon: "icon", character: "character", type: "type", allowHalf: "allowHalf", allowClear: "allowClear" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RateComponent),
multi: true,
},
], ngImport: i0, template: "<div class=\"devui-star-container\" (mouseleave)=\"hoverToggle($event, chooseValue, true)\">\n <div\n *ngFor=\"let item of totalLevel_array; let i = index\"\n class=\"devui-star-align devui-pointer\"\n [ngClass]=\"{ 'devui-only-read': readonly }\"\n (mouseover)=\"hoverToggle($event, i)\"\n (click)=\"selectValue($event, i)\"\n >\n <span class=\"devui-star-color {{ icon }}\">\n <ng-container *ngIf=\"!isCharacterTemplate\">{{ character }}</ng-container>\n <ng-container *ngIf=\"isCharacterTemplate\">\n <ng-container *ngTemplateOutlet=\"characterTemplate\"></ng-container>\n </ng-container>\n <svg\n *ngIf=\"!icon && !character\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill=\"#E3E5E9\" id=\"Mask\">\n <polygon\n points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\n ></polygon>\n </g>\n </g>\n </svg>\n </span>\n <span class=\"devui-star-color-active devui-active-star {{ icon }}\" [style.color]=\"color\" [style.width]=\"item.width\">\n <ng-container *ngIf=\"!isCharacterTemplate\">{{ character }}</ng-container>\n <ng-container *ngIf=\"isCharacterTemplate\">\n <ng-container *ngTemplateOutlet=\"characterTemplate\"></ng-container>\n </ng-container>\n <svg\n *ngIf=\"!icon && !character\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g [style.fill]=\"color\" id=\"Mask\">\n <polygon\n points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\n ></polygon>\n </g>\n </g>\n </svg>\n </span>\n </div>\n <div style=\"clear: both\"></div>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-star-align{float:left;font-size:var(--devui-font-size-icon, 16px);margin-right:5px;position:relative;line-height:1}.devui-pointer{cursor:pointer}.devui-star-container{display:inline-block}.devui-star-color-active{color:var(--devui-brand, #0a59f7);line-height:1.5}.devui-star-color-active svg g{fill:var(--devui-brand, #0a59f7)}.devui-active-star{position:absolute;top:0;left:0;overflow:hidden}.devui-star-color{color:var(--devui-shape-icon-fill, #c2c2c2);line-height:1.5}.devui-star-color svg g{fill:var(--devui-shape-icon-fill, #c2c2c2)}.devui-only-read{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RateComponent, decorators: [{
type: Component,
args: [{ selector: 'd-rate', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RateComponent),
multi: true,
},
], preserveWhitespaces: false, template: "<div class=\"devui-star-container\" (mouseleave)=\"hoverToggle($event, chooseValue, true)\">\n <div\n *ngFor=\"let item of totalLevel_array; let i = index\"\n class=\"devui-star-align devui-pointer\"\n [ngClass]=\"{ 'devui-only-read': readonly }\"\n (mouseover)=\"hoverToggle($event, i)\"\n (click)=\"selectValue($event, i)\"\n >\n <span class=\"devui-star-color {{ icon }}\">\n <ng-container *ngIf=\"!isCharacterTemplate\">{{ character }}</ng-container>\n <ng-container *ngIf=\"isCharacterTemplate\">\n <ng-container *ngTemplateOutlet=\"characterTemplate\"></ng-container>\n </ng-container>\n <svg\n *ngIf=\"!icon && !character\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill=\"#E3E5E9\" id=\"Mask\">\n <polygon\n points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\n ></polygon>\n </g>\n </g>\n </svg>\n </span>\n <span class=\"devui-star-color-active devui-active-star {{ icon }}\" [style.color]=\"color\" [style.width]=\"item.width\">\n <ng-container *ngIf=\"!isCharacterTemplate\">{{ character }}</ng-container>\n <ng-container *ngIf=\"isCharacterTemplate\">\n <ng-container *ngTemplateOutlet=\"characterTemplate\"></ng-container>\n </ng-container>\n <svg\n *ngIf=\"!icon && !character\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g [style.fill]=\"color\" id=\"Mask\">\n <polygon\n points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\n ></polygon>\n </g>\n </g>\n </svg>\n </span>\n </div>\n <div style=\"clear: both\"></div>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-star-align{float:left;font-size:var(--devui-font-size-icon, 16px);margin-right:5px;position:relative;line-height:1}.devui-pointer{cursor:pointer}.devui-star-container{display:inline-block}.devui-star-color-active{color:var(--devui-brand, #0a59f7);line-height:1.5}.devui-star-color-active svg g{fill:var(--devui-brand, #0a59f7)}.devui-active-star{position:absolute;top:0;left:0;overflow:hidden}.devui-star-color{color:var(--devui-shape-icon-fill, #c2c2c2);line-height:1.5}.devui-star-color svg g{fill:var(--devui-shape-icon-fill, #c2c2c2)}.devui-only-read{cursor:not-allowed}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { read: [{
type: Input
}], readonly: [{
type: Input
}], count: [{
type: Input
}], color: [{
type: Input
}], icon: [{
type: Input
}], character: [{
type: Input
}], type: [{
type: Input
}], allowHalf: [{
type: Input
}], allowClear: [{
type: Input
}] } });
class RateModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RateModule, declarations: [RateComponent], imports: [CommonModule, FormsModule], exports: [RateComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RateModule, imports: [CommonModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RateModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule],
exports: [RateComponent],
declarations: [RateComponent],
providers: [],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { RateComponent, RateModule };
//# sourceMappingURL=ng-devui-rate.mjs.map