Server IP : 80.87.202.40 / Your IP : 216.73.216.169 Web Server : Apache System : Linux rospirotorg.ru 5.14.0-539.el9.x86_64 #1 SMP PREEMPT_DYNAMIC Thu Dec 5 22:26:13 UTC 2024 x86_64 User : bitrix ( 600) PHP Version : 8.2.27 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/bitrix/ext_www/rospirotorg.ru/bitrix/js/ui/image-stack-steps/dist/ |
Upload File : |
/* eslint-disable */ this.BX = this.BX || {}; (function (exports,ui_vue3,main_core_events,ui_tooltip,ui_iconSet_api_vue,main_core,main_date) { 'use strict'; const headerTypeEnum = Object.freeze({ TEXT: 'text', STUB: 'stub' }); const imageTypeEnum = Object.freeze({ IMAGE: 'image', IMAGE_STUB: 'image-stub', USER: 'user', USER_STUB: 'user-stub', ICON: 'icon', COUNTER: 'counter' }); const stackStatusEnum = Object.freeze({ CUSTOM: 'custom', OK: 'ok', CANCEL: 'cancel', WAIT: 'wait' }); const footerTypeEnum = Object.freeze({ TEXT: 'text', STUB: 'stub', DURATION: 'duration' }); function validateStep(data) { if (!main_core.Type.isStringFilled(data.id)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StepData.id must be filled string'); return false; } if (!main_core.Type.isUndefined(data.progressBox)) { if (!main_core.Type.isPlainObject(data.progressBox)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StepData.progressBox must be plain object'); } if (!main_core.Type.isString(data.progressBox.title)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StepData.progressBox.title must be string'); return false; } } return validateHeader(data.header) && validateStack(data.stack) && validateFooter(data.footer); } function validateHeader(data) { if (main_core.Type.isNil(data)) { return true; } if (!main_core.Type.isPlainObject(data)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StepData.header must be plain object'); return false; } if (!Object.values(headerTypeEnum).includes(data.type)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StepData.header.type must be one of headerTypeEnum values'); return false; } if (data.type === headerTypeEnum.TEXT) { var _data$data; if (main_core.Type.isString((_data$data = data.data) == null ? void 0 : _data$data.text)) { return true; } // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: ' + 'StepData.header with type "text" must contain HeaderData.text; ' + 'HeaderData.text must be string'); return false; } return data.type === headerTypeEnum.STUB; } function validateFooter(data) { if (main_core.Type.isNil(data)) { return true; } if (!main_core.Type.isPlainObject(data)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StepData.footer must be plain object'); return false; } if (data.type === footerTypeEnum.TEXT) { var _data$data2; if (main_core.Type.isString((_data$data2 = data.data) == null ? void 0 : _data$data2.text)) { return true; } // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: ' + 'StepData.footer with type "text" must contain FooterData.text; ' + 'FooterData.text must be string'); return false; } if (data.type === footerTypeEnum.DURATION) { return validateFooterDuration(data.data); } return data.type === footerTypeEnum.STUB; } function validateStack(data) { if (!main_core.Type.isPlainObject(data)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StepData.stack must be plain object'); return false; } if (!main_core.Type.isUndefined(data.status)) { if (!main_core.Type.isPlainObject(data.status)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StackData.status must be plain object'); return false; } if (!validateStatus(data.status)) { return false; } } if (!main_core.Type.isArrayFilled(data.images)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StackData.images must be filled array'); return false; } for (const image of data.images) { if (!validateImage(image)) { return false; } } return true; } function validateImage(data) { var _data$data3, _data$data4, _data$data5, _data$data6, _data$data7, _data$data8; if (!main_core.Type.isPlainObject(data)) { return false; } if (data.type === imageTypeEnum.IMAGE && main_core.Type.isString((_data$data3 = data.data) == null ? void 0 : _data$data3.src) && (main_core.Type.isUndefined((_data$data4 = data.data) == null ? void 0 : _data$data4.title) || main_core.Type.isStringFilled((_data$data5 = data.data) == null ? void 0 : _data$data5.title))) { return true; } if (data.type === imageTypeEnum.USER && main_core.Type.isString((_data$data6 = data.data) == null ? void 0 : _data$data6.src) && main_core.Type.isNumber((_data$data7 = data.data) == null ? void 0 : _data$data7.userId) && data.data.userId > 0) { return true; } if (data.type === imageTypeEnum.ICON && validateIcon(data.data)) { return true; } if (data.type === imageTypeEnum.USER_STUB || data.type === imageTypeEnum.IMAGE_STUB) { return true; } if (data.type === imageTypeEnum.COUNTER && main_core.Type.isStringFilled((_data$data8 = data.data) == null ? void 0 : _data$data8.text)) { return true; } // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StackData.data must be correct', data); return false; } function validateStatus(data) { if (data.type === stackStatusEnum.CUSTOM && !validateIcon(data.data)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StackData.status with type "custom" must be correct', data); return false; } if (Object.values(stackStatusEnum).includes(data.type)) { return true; } // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: StackData.status must be correct', data); return false; } function validateFooterDuration(data) { if (!main_core.Type.isNumber(data.duration) || data.duration < 0) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: FooterDurationData.duration must be not negative number'); return false; } if (!main_core.Type.isBoolean(data.realtime)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: FooterDurationData.realtime must be boolean'); return false; } if (data.realtime === true && !main_core.Type.isUndefined(data.realtimeBoundary) && (!main_core.Type.isNumber(data.realtimeBoundary) || data.realtimeBoundary <= 0)) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: FooterDurationData.realtimeBoundary must be positive integer'); return false; } if (!main_core.Type.isUndefined(data.format) && !(main_core.Type.isString(data.format) || main_core.Type.isArray(data.format))) { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: FooterDurationData.format must be array or string'); return false; } return true; } function validateIcon(data) { return main_core.Type.isPlainObject(data) && main_core.Type.isStringFilled(data.icon) && main_core.Type.isStringFilled(data.color); } const ProgressBox = { name: 'ui-image-stack-steps-step-progress-box', components: { BIcon: ui_iconSet_api_vue.BIcon }, props: { title: { type: String, required: true } }, template: ` <div :title="title" class="ui-image-stack-steps-step-progress-box" > <BIcon name="more" :size="12" color="var(--ui-color-base-70)" class="ui-image-stack-steps-step-progress-box__icon" /> <div class="ui-image-stack-steps-step-progress-box__icon-overlay"></div> </div> ` }; const Text = { name: 'ui-image-stack-steps-text', props: { text: { type: String, required: true } }, template: ` <div class="ui-image-stack-steps-text" :title="text">{{ text }}</div> ` }; const TextStub = { name: 'ui-image-stack-steps-text-skeleton', template: ` <div class="ui-image-stack-steps-text-skeleton-area"> <div class="ui-image-stack-steps-text-skeleton-area-stub"></div> </div> ` }; const Header = { name: 'ui-image-stack-steps-step-header', props: { /** @var {HeaderType} header */ header: { type: Object, required: true, validator: value => { return validateHeader(value); } } }, methods: { getComponent() { if (this.header.type === headerTypeEnum.TEXT) { return Text; } return TextStub; }, getCustomStyles() { var _this$header$styles; const styles = {}; if (main_core.Type.isNumber((_this$header$styles = this.header.styles) == null ? void 0 : _this$header$styles.maxWidth)) { styles.maxWidth = `${this.header.styles.maxWidth}px`; } return styles; } }, template: ` <div class="ui-image-stack-steps-header" :style="getCustomStyles()"> <component :is="getComponent()" v-bind="header.data"/> </div> ` }; const StackStatus = { name: 'ui-image-stack-steps-step-stack-status', components: { BIcon: ui_iconSet_api_vue.BIcon }, props: { /** @var { StackStatusType } status */ status: { type: Object, required: true, validator: value => { return validateStatus(value); } } }, computed: { icon() { switch (this.status.type) { case stackStatusEnum.OK: return 'circle-check'; case stackStatusEnum.WAIT: return 'black-clock'; case stackStatusEnum.CANCEL: return 'cross-circle-60'; default: return this.status.data.icon; } }, color() { switch (this.status.type) { case stackStatusEnum.OK: return 'var(--ui-color-primary-alt)'; case stackStatusEnum.WAIT: return 'var(--ui-color-palette-blue-60)'; case stackStatusEnum.CANCEL: return 'var(--ui-color-base-35)'; default: return this.status.data.color; } } }, template: ` <div class="ui-image-stack-steps-step-stack-status"> <BIcon v-if="icon" :name="icon" :color="color" :size="24" class="ui-image-stack-steps-step-stack-status-icon" /> <div class="ui-image-stack-steps-step-stack-status-icon__overlay"></div> </div> ` }; const Image = { name: 'ui-image-stack-steps-image', props: { src: { type: String, required: true, validator: value => { return main_core.Type.isStringFilled(value); } }, title: { type: String, required: false, validator: value => { return main_core.Type.isStringFilled(value); } } }, methods: { getSafeSrc() { return `url('${encodeURI(main_core.Text.encode(this.src))}')`; } }, template: ` <div :style="{ backgroundImage: getSafeSrc()}" class="ui-image-stack-steps-image" :title="title" ></div> ` }; const ImageStub = { name: 'ui-image-stack-steps-image-stub', template: ` <div class="ui-image-stack-steps-image --image-stub"></div> ` }; const User = { name: 'ui-image-stack-steps-user', props: { src: { type: String, required: true }, userId: { type: Number, required: true, validator: value => { return value > 0; } } }, data() { return { style: { backgroundImage: main_core.Type.isStringFilled(this.src) ? this.getSafeSrc() : '' } }; }, methods: { getSafeSrc() { return `url('${encodeURI(main_core.Text.encode(this.src))}')`; } }, template: ` <div class="ui-image-stack-steps-image --user" :style="style" :bx-tooltip-user-id="userId" ></div> ` }; const Icon = { name: 'ui-image-stack-steps-icon', components: { BIcon: ui_iconSet_api_vue.BIcon }, props: { icon: { type: String, required: true, validator: value => { return main_core.Type.isStringFilled(value); } }, color: { type: String, required: true, validator: value => { return main_core.Type.isStringFilled(value); } } }, template: ` <div class="ui-image-stack-steps-image --icon"> <BIcon :name="icon" :color="color" :size="24"/> </div> ` }; const UserStub = { name: 'ui-image-stack-steps-user-stub', components: { Icon }, template: ` <Icon icon="person" color="var(--ui-color-base-15)"/> ` }; const Counter = { name: 'ui-image-stack-steps-counter', props: { text: { type: String, required: true, validator: value => { return main_core.Type.isStringFilled(value); } } }, template: ` <div class="ui-image-stack-steps-counter">{{ text }}</div> ` }; const Stack = { name: 'ui-image-stack-steps-step-stack', components: { StackStatus }, props: { /** @var { StackType } status */ stack: { type: Object, required: true, validator: value => { return validateStack(value); } } }, computed: { hasStatus() { return main_core.Type.isPlainObject(this.stack.status); } }, methods: { getComponent(image) { switch (image.type) { case imageTypeEnum.IMAGE: return Image; case imageTypeEnum.USER: return User; case imageTypeEnum.ICON: return Icon; case imageTypeEnum.USER_STUB: return UserStub; case imageTypeEnum.COUNTER: return Counter; default: return ImageStub; } }, computeKey(image, index) { let key = 'image-stub'; // eslint-disable-next-line default-case switch (image.type) { case imageTypeEnum.IMAGE: key = image.data.src; break; case imageTypeEnum.USER: key = String(image.data.userId); break; case imageTypeEnum.ICON: key = `${image.data.icon}-${image.data.color}`; break; case imageTypeEnum.USER_STUB: key = 'user-stub'; break; case imageTypeEnum.COUNTER: key = 'counter'; break; } return `${key}-${index}`; } }, template: ` <div class="ui-image-stack-steps-step-stack"> <StackStatus v-if="hasStatus" :status="stack.status"/> <template v-for="(image, index) in stack.images" :key="computeKey(image, index)"> <component :is="getComponent(image)" v-bind="image.data"/> </template> </div> ` }; const Duration = { name: 'ui-image-stack-steps-duration', components: { Text }, props: { duration: { type: Number, required: true, validator: value => { return value >= 0; } }, realtime: { type: Boolean, required: true }, realtimeBoundary: { type: Number, required: false }, format: { type: [String, Array], required: false } }, data() { return { defaultFormat: [['s', 'sdiff'], ['i', 'idiff'], ['H', 'Hdiff'], ['d', 'ddiff'], ['m', 'mdiff'], ['Y', 'Ydiff']], defaultRealtimeBoundary: 60 * 60, // 1 hour computedDuration: 0, startTime: Math.floor(Date.now() / 1000), timer: null }; }, watch: { duration() { this.computedDuration = 0; this.startTime = Math.floor(Date.now() / 1000); }, isRealtime(realtime) { if (realtime) { this.startTime = Math.floor(Date.now() / 1000); this.computedDuration = 0; this.startTimer(); } else { this.stopTimer(); } } }, computed: { text() { const duration = this.isRealtime ? this.duration + this.computedDuration : this.duration; return main_date.DateTimeFormat.format(this.getFormat(), 0, duration); }, isRealtime() { return this.realtime; } }, mounted() { this.startTimer(); }, unmounted() { this.stopTimer(); }, methods: { startTimer() { if (!this.isRealtime) { return; } this.timer = setInterval(() => { if (!this.isRealtime) { this.stopTimer(); return; } if (this.duration + this.computedDuration < (this.realtimeBoundary || this.defaultRealtimeBoundary)) { this.computedDuration = Math.floor(Date.now() / 1000) - this.startTime; return; } this.stopTimer(); }, 1000); }, stopTimer() { if (this.timer) { clearInterval(this.timer); this.timer = null; } }, getFormat() { if (main_core.Type.isArray(this.format) || main_core.Type.isString(this.format)) { return this.format; } return this.defaultFormat; } }, template: ` <Text :text="text"/> ` }; const Footer = { name: 'ui-image-stack-steps-step-footer', props: { /** @var { FooterType } footer */ footer: { type: Object, required: true, validator: value => { return main_core.Type.isPlainObject(value); } } }, methods: { getComponent() { switch (this.footer.type) { case footerTypeEnum.TEXT: return Text; case footerTypeEnum.DURATION: return Duration; default: return TextStub; } }, getCustomStyles() { var _this$footer$styles; const styles = {}; if (main_core.Type.isNumber((_this$footer$styles = this.footer.styles) == null ? void 0 : _this$footer$styles.maxWidth)) { styles.maxWidth = `${this.footer.styles.maxWidth}px`; } return styles; } }, template: ` <div class="ui-image-stack-steps-footer" :style="getCustomStyles()"> <component :is="getComponent()" v-bind="footer.data"/> </div> ` }; const Step = { name: 'ui-image-stack-steps-step', components: { ProgressBox, Header, Stack, Footer }, props: { /** @var {StepType} step */ step: { type: Object, required: true, validator: value => { return validateStep(value); } } }, computed: { hasProgressBox() { return main_core.Type.isPlainObject(this.step.progressBox); }, hasHeader() { return !main_core.Type.isNil(this.step.header); }, hasFooter() { return !main_core.Type.isNil(this.step.footer); }, getCustomStyles() { var _this$step$styles; const styles = {}; if ((_this$step$styles = this.step.styles) != null && _this$step$styles.minWidth) { styles.minWidth = `${main_core.Text.toInteger(this.step.styles.minWidth)}px`; } return styles; } }, template: ` <div class="ui-image-stack-steps-step" :class="{'--with-header': hasHeader, '--with-footer': hasFooter}" :style="getCustomStyles" > <ProgressBox v-if="hasProgressBox" :title="step.progressBox.title"/> <Header v-if="hasHeader" :header="step.header"/> <Stack :stack="step.stack"/> <Footer v-if="hasFooter" :footer="step.footer"/> </div> ` }; const Application = { name: 'ui-image-stack-steps-application', components: { Step }, props: { initialSteps: { type: Array, required: true, validator: value => { return main_core.Type.isArrayFilled(value); } } }, data() { return { steps: this.initialSteps }; }, created() { this.subscribeOnEvents(); }, methods: { subscribeOnEvents() { if (this.$root.$app) { main_core_events.EventEmitter.subscribe(this.$root.$app, 'UI.ImageStackSteps.onUpdateSteps', () => { this.steps = this.$root.$app.getSteps(); }); } } }, template: ` <div class="ui-image-stack-steps"> <template v-for="step in steps" :key="step.id"> <Step :step="step"/> </template> </div> ` }; var _steps = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("steps"); var _application = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("application"); var _setSteps = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("setSteps"); var _initApplication = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("initApplication"); class ImageStackSteps { constructor(options) { Object.defineProperty(this, _initApplication, { value: _initApplication2 }); Object.defineProperty(this, _setSteps, { value: _setSteps2 }); Object.defineProperty(this, _steps, { writable: true, value: [] }); Object.defineProperty(this, _application, { writable: true, value: void 0 }); if (!main_core.Type.isArrayFilled(options.steps)) { throw new TypeError('options.steps must be filled array'); } babelHelpers.classPrivateFieldLooseBase(this, _setSteps)[_setSteps](options.steps); if (!main_core.Type.isArrayFilled(babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps])) { throw new TypeError('options.steps must be contain correct steps data, see warnings'); } babelHelpers.classPrivateFieldLooseBase(this, _initApplication)[_initApplication](); } renderTo(node) { babelHelpers.classPrivateFieldLooseBase(this, _application)[_application].mount(node); } getSteps() { return babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps].map(step => ({ ...step })); } addStep(stepData) { if (validateStep(stepData)) { babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps].push(stepData); main_core_events.EventEmitter.emit(this, 'UI.ImageStackSteps.onUpdateSteps'); return true; } // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: Step was skipped due to incorrect stepData', stepData); return false; } updateStep(stepData, stepId) { const index = babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps].findIndex(step => step.id === stepId); if (index === -1) { // eslint-disable-next-line no-console console.warn(`UI.Image-Stack-Steps: Step with id ${stepId} not find`); return false; } const oldStepData = babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps][index]; const modifiedData = Object.assign(oldStepData, stepData); modifiedData.id = oldStepData.id; if (validateStep(modifiedData)) { babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps][index] = modifiedData; main_core_events.EventEmitter.emit(this, 'UI.ImageStackSteps.onUpdateSteps'); return true; } // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: Step was not updated due to incorrect stepData', modifiedData); return false; } deleteStep(stepId) { const index = babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps].findIndex(step => step.id === stepId); if (index === -1) { return true; } babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps].splice(index, 1); main_core_events.EventEmitter.emit(this, 'UI.ImageStackSteps.onUpdateSteps'); return true; } destroy() { babelHelpers.classPrivateFieldLooseBase(this, _application)[_application].unmount(); babelHelpers.classPrivateFieldLooseBase(this, _application)[_application] = null; babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps] = null; } } function _setSteps2(stepsData) { babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps] = []; stepsData.forEach(step => { if (validateStep(step)) { babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps].push(step); } else { // eslint-disable-next-line no-console console.warn('UI.Image-Stack-Steps: Step was skipped due to incorrect stepData', step); } }); } function _initApplication2() { // eslint-disable-next-line unicorn/no-this-assignment const context = this; babelHelpers.classPrivateFieldLooseBase(this, _application)[_application] = ui_vue3.BitrixVue.createApp({ name: 'ui-image-stack-steps', components: { Application }, props: { steps: Array }, created() { this.$app = context; }, template: ` <Application :initialSteps="steps" ></Application> ` }, { steps: babelHelpers.classPrivateFieldLooseBase(this, _steps)[_steps] }); } exports.headerTypeEnum = headerTypeEnum; exports.imageTypeEnum = imageTypeEnum; exports.footerTypeEnum = footerTypeEnum; exports.stackStatusEnum = stackStatusEnum; exports.ImageStackSteps = ImageStackSteps; }((this.BX.UI = this.BX.UI || {}),BX.Vue3,BX.Event,BX.UI,BX.UI.IconSet,BX,BX.Main)); //# sourceMappingURL=image-stack-steps.bundle.js.map