duoyun-ui
Version:
A lightweight desktop UI component library, implemented using Gem
297 lines • 14.9 kB
JavaScript
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
var _, done = false;
for (var i = decorators.length - 1; i >= 0; i--) {
var context = {};
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
if (kind === "accessor") {
if (result === void 0) continue;
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
if (_ = accept(result.get)) descriptor.get = _;
if (_ = accept(result.set)) descriptor.set = _;
if (_ = accept(result.init)) initializers.unshift(_);
}
else if (_ = accept(result)) {
if (kind === "field") initializers.unshift(_);
else descriptor[key] = _;
}
}
if (target) Object.defineProperty(target, contextIn.name, descriptor);
done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
var useValue = arguments.length > 2;
for (var i = 0; i < initializers.length; i++) {
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
}
return useValue ? value : void 0;
};
import { adoptedStyle, connectStore, customElement, effect, emitter, memo, property, shadow, willMount, } from '@mantou/gem/lib/decorators';
import { createState, css, GemElement, html } from '@mantou/gem/lib/element';
import { connect } from '@mantou/gem/lib/store';
import { icons } from '../lib/icons';
import { locale } from '../lib/locale';
import { blockContainer } from '../lib/styles';
import { Time } from '../lib/time';
import { ComparerType, isIncludesString } from '../lib/utils';
import '../elements/button';
import '../elements/date-panel';
import '../elements/input';
import '../elements/radio';
import '../elements/select';
import '../elements/time-panel';
const style = css `
dy-input,
dy-select {
width: 100%;
}
dy-input-group.duration dy-select,
dy-input-group.filter dy-select {
flex-grow: 5;
}
dy-select {
max-height: 13.2em;
}
dy-time-panel {
height: 15em;
}
.line {
margin-block-end: 1em;
}
.filter {
margin-block-end: 0.5em;
}
`;
const durationUnitList = [
{ label: locale.minute, value: 1000 * 60 },
{ label: locale.hour, value: 1000 * 60 * 60 },
];
const defaultState = {
comparerType: ComparerType.Eq,
value: '',
durationUnit: durationUnitList[0].value,
search: '',
provider: undefined,
};
let DyPatFilterFormElement = (() => {
let _classDecorators = [customElement('dy-pat-filter-form'), adoptedStyle(style), adoptedStyle(blockContainer), connectStore(locale), shadow()];
let _classDescriptor;
let _classExtraInitializers = [];
let _classThis;
let _classSuper = GemElement;
let _options_decorators;
let _options_initializers = [];
let _options_extraInitializers = [];
let _getText_decorators;
let _getText_initializers = [];
let _getText_extraInitializers = [];
let _submit_decorators;
let _submit_initializers = [];
let _submit_extraInitializers = [];
let _private_initState_decorators;
let _private_initState_initializers = [];
let _private_initState_extraInitializers = [];
let _private_applyInitValue_decorators;
let _private_applyInitValue_initializers = [];
let _private_applyInitValue_extraInitializers = [];
let _private_connectStores_decorators;
let _private_connectStores_initializers = [];
let _private_connectStores_extraInitializers = [];
var DyPatFilterFormElement = class extends _classSuper {
static { _classThis = this; }
static {
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
_options_decorators = [property];
_getText_decorators = [property];
_submit_decorators = [emitter];
_private_initState_decorators = [memo((i) => [i.options])];
_private_applyInitValue_decorators = [willMount()];
_private_connectStores_decorators = [effect((i) => [i.options])];
__esDecorate(null, null, _options_decorators, { kind: "field", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
__esDecorate(null, null, _getText_decorators, { kind: "field", name: "getText", static: false, private: false, access: { has: obj => "getText" in obj, get: obj => obj.getText, set: (obj, value) => { obj.getText = value; } }, metadata: _metadata }, _getText_initializers, _getText_extraInitializers);
__esDecorate(null, null, _submit_decorators, { kind: "field", name: "submit", static: false, private: false, access: { has: obj => "submit" in obj, get: obj => obj.submit, set: (obj, value) => { obj.submit = value; } }, metadata: _metadata }, _submit_initializers, _submit_extraInitializers);
__esDecorate(null, null, _private_initState_decorators, { kind: "field", name: "#initState", static: false, private: true, access: { has: obj => #initState in obj, get: obj => obj.#initState, set: (obj, value) => { obj.#initState = value; } }, metadata: _metadata }, _private_initState_initializers, _private_initState_extraInitializers);
__esDecorate(null, null, _private_applyInitValue_decorators, { kind: "field", name: "#applyInitValue", static: false, private: true, access: { has: obj => #applyInitValue in obj, get: obj => obj.#applyInitValue, set: (obj, value) => { obj.#applyInitValue = value; } }, metadata: _metadata }, _private_applyInitValue_initializers, _private_applyInitValue_extraInitializers);
__esDecorate(null, null, _private_connectStores_decorators, { kind: "field", name: "#connectStores", static: false, private: true, access: { has: obj => #connectStores in obj, get: obj => obj.#connectStores, set: (obj, value) => { obj.#connectStores = value; } }, metadata: _metadata }, _private_connectStores_initializers, _private_connectStores_extraInitializers);
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
DyPatFilterFormElement = _classThis = _classDescriptor.value;
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
__runInitializers(_classThis, _classExtraInitializers);
}
options = __runInitializers(this, _options_initializers, void 0);
getText = (__runInitializers(this, _options_extraInitializers), __runInitializers(this, _getText_initializers, void 0));
submit = (__runInitializers(this, _getText_extraInitializers), __runInitializers(this, _submit_initializers, void 0));
get #type() {
return this.options?.type || 'string';
}
get #durationValue() {
return ((Number(this.#state.value) || 0) / this.#state.durationUnit).toString();
}
get #comparerList() {
switch (this.#type) {
case 'enum':
return [ComparerType.Have, ComparerType.Miss];
case 'string':
return [ComparerType.Have, ComparerType.Miss, ComparerType.Eq];
default:
return [ComparerType.Lte, ComparerType.Gte];
}
}
get #disabled() {
const { value } = this.#state;
switch (this.#type) {
case 'enum':
return !Array.isArray(value) || !value.length;
default:
return !value;
}
}
#state = (__runInitializers(this, _submit_extraInitializers), createState({ ...defaultState }));
#initState = __runInitializers(this, _private_initState_initializers, () => {
this.#state({ ...defaultState, comparerType: this.#comparerList[0] });
});
#applyInitValue = (__runInitializers(this, _private_initState_extraInitializers), __runInitializers(this, _private_applyInitValue_initializers, () => {
this.#state(this.initValue || {});
}));
#onSubmit = (__runInitializers(this, _private_applyInitValue_extraInitializers), () => {
if (this.#disabled)
return;
const { comparerType, value } = this.#state;
this.submit({ comparerType, value });
});
#onChangeValue = ({ detail }) => {
this.#state({ value: detail });
};
#onChangeDataValue = ({ detail }) => {
this.#state({
value: String(this.#state.comparerType === ComparerType.Lte ? new Time(detail).endOf('d').valueOf() : detail),
});
};
#onChangeTimeValue = ({ detail }) => {
this.#state({
value: String(new Time(detail).diff(new Time(detail).startOf('d'))),
});
};
#onChangeDurationValue = ({ detail }) => {
if (Number.isNaN(Number(detail)))
return;
this.#state({
value: (Number(detail) * this.#state.durationUnit).toString(),
});
};
#onChangeDurationUnit = ({ detail }) => {
this.#state({
value: String(((Number(this.#state.value) || 0) / this.#state.durationUnit) * detail),
durationUnit: detail,
});
};
#renderInput = () => {
switch (this.#type) {
case 'date':
case 'date-time':
return html `
<dy-date-panel
?time=${this.#type === 'date-time'}
=${this.#type === 'date' ? this.#onChangeDataValue : this.#onChangeValue}
.value=${this.#state.value === '' ? undefined : Number(this.#state.value)}
></dy-date-panel>
`;
case 'time':
return html `
<dy-time-panel
=${this.#onChangeTimeValue}
.value=${this.#state.value === '' ? undefined : Number(this.#state.value) + new Time().startOf('d').valueOf()}
></dy-time-panel>
`;
case 'enum': {
const getProviders = this.options?.getProviders;
const options = this.options?.getOptions?.(this.#state.provider);
const filteredOptions = this.#state.search
? options?.filter(({ label }) => isIncludesString(label, this.#state.search))
: options;
const hasFilter = !!options && options.length > 30;
return html `
<dy-input-group v-if=${hasFilter} class="filter">
<dy-select
v-if=${!!getProviders}
=${({ detail }) => this.#state({ provider: detail })}
.value=${this.#state.provider}
.options=${getProviders?.()}
.placeholder=${locale.filter}
></dy-select>
<dy-input
.icon=${icons.search}
.placeholder=${locale.search}
autofocus
value=${this.#state.search}
=${({ detail: search }) => this.#state({ search })}
clearable
=${() => this.#state({ search: '' })}
></dy-input>
</dy-input-group>
<dy-select
v-if=${!!filteredOptions?.length}
=${this.#onChangeValue}
.inline=${true}
.multiple=${true}
.value=${this.#state.value}
.options=${filteredOptions}
></dy-select>
`;
}
case 'duration':
return html `
<dy-input-group class="duration">
<dy-input =${this.#onChangeDurationValue} .value=${this.#durationValue}></dy-input>
<dy-select
=${this.#onChangeDurationUnit}
.value=${this.#state.durationUnit}
.options=${durationUnitList}
></dy-select>
</dy-input-group>
`;
case 'number':
return html `
<dy-input
type="number"
autofocus
=${this.#onChangeValue}
.value=${String(this.#state.value)}
></dy-input>
`;
default:
return html `
<dy-input autofocus =${this.#onChangeValue} .value=${String(this.#state.value)}></dy-input>
`;
}
};
#connectStores = __runInitializers(this, _private_connectStores_initializers, () => {
const disconnects = this.options?.connectStores?.map((e) => connect(e, this.update));
return () => disconnects?.forEach((disconnect) => disconnect());
});
render = (__runInitializers(this, _private_connectStores_extraInitializers), () => {
const { comparerType } = this.#state;
return html `
${this.#comparerList.map((e) => html `
<div class="line">
<dy-radio ?checked=${e === comparerType} =${() => this.#state({ comparerType: e, value: '' })}>
${this.getText?.(e) || e}
</dy-radio>
</div>
<div class="line">${e === comparerType ? this.#renderInput() : ''}</div>
`)}
<dy-button ?disabled=${this.#disabled} =${this.#onSubmit}>${locale.ok}</dy-button>
`;
});
initValue;
};
return DyPatFilterFormElement = _classThis;
})();
export { DyPatFilterFormElement };
//# sourceMappingURL=filter-form.js.map