\n')) data = data.replace('
\n', ''); - zui.Modal.alert({message: {html: data}, title: `Fatal error: ${options.url}`, actions: [], size: 'lg', custom: {className: 'backdrop-blur border-2 border-canvas bg-opacity-80 rounded-xl', bodyClass: 'font-mono', headerClass: 'text-danger'}}); - } - - function initZinbar() - { - if(!DEBUG || isIndexPage) return; - let $bar = $('#zinbar'); - if($bar.length) return; - - $bar = $('').insertAfter('body'); - zinbar = new zui.Zinbar($bar[0]); - } - - function registerTimer(callback, time, type) - { - type = type || 'timeout'; - const id = type === 'interval' ? setInterval(callback, time) : setTimeout(callback, time); - timers[type].push(id); - return id; - } - - function updateConfigJS(data) - { - $('#configJS').replaceWith(data); - config = window.config; - const $body = $(document.body); - const classList = ($body.attr('class') || '').split(' ').filter(x => x.length && !x.startsWith('m-')); - classList.push(`m-${config.currentModule}-${config.currentMethod}`); - $body.attr('class', classList.join(' ')); - } - - function updatePageJS(data) - { - if(window.onPageUnmount) window.onPageUnmount(); - - window.onPageUnmount = null; - window.beforePageUpdate = null; - window.afterPageUpdate = null; - window.onPageRender = null; - - if(timers.interval.length) timers.interval.forEach(clearInterval); - if(timers.timeout.length) timers.timeout.forEach(clearTimeout); - timers.interval = []; - timers.timeout = []; - - $('script.zin-page-js').replaceWith(data); - } - - function updateZinbar(perf, errors, basePath) - { - if(!DEBUG) return; - - if(zinbar && zinbar.$) zinbar.$.update(perf, errors, basePath); - else requestAnimationFrame(() => updateZinbar(perf, errors, basePath)); - } - - function updatePerfInfo(options, stage, info) - { - if(!DEBUG) return; - - const perf = {id: options.id, url: options.url || currentAppUrl}; - perf[stage] = performance.now(); - if(stage === 'requestBegin') $.extend(perf, {requestEnd: undefined, renderBegin: undefined, renderEnd: undefined}); - if(info) - { - if(info.perf) $.extend(perf, info.perf); - if(info.dataSize) perf.dataSize = info.dataSize; - } - updateZinbar(perf); - } - - function showZinDebugInfo(data, options) - { - if(!DEBUG) return; - - updateZinbar({id: options.id, trace: data.trace, xhprof: data.xhprof}, data.errors, data.basePath); - } - - function updatePageWithHtml(data) - { - const html = []; - const skipTags = new Set(['SCRIPT', 'META']); - $(data).each(function(_idx, node) - { - const nodeName = node.nodeName; - if(nodeName === '#text') html.push(node.textContent); - else if(nodeName === 'SCRIPT' && node.innerText.startsWith('window.config={')) html.push(node.outerHTML); - else if(nodeName === 'TITLE') document.title = node.innerText; - else if(skipTags.has(nodeName)) return; - else html.push(node.outerHTML); - }); - $('body').html(html.join('')); - window.zin = {config: window.config}; - if(DEBUG) console.log('[ZIN] ', window.zin); - if(DEBUG) zui.Messager.show({content: 'ZIN: load an old page.', close: false}); - } - - function updateNavbar(data) - { - const $navbar = $('#navbar'); - const $newNav = $(data); - if($newNav.text().trim() !== $navbar.text().trim() || $newNav.find('.nav-item>a').map((_, element) => element.href).get().join(' ') !== $navbar.find('.nav-item>a').map((_, element) => element.href).get().join(' ')) return $navbar.empty().append($newNav); - - activeNav($newNav.find('.nav-item>a.active').data('id'), $navbar); - } - - function updateHeading(data) - { - const $data = $(data); - const $heading = $('#heading'); - const $dropmenu = $heading.find('#dropmenu'); - const $nextDropmenu = $data.filter('#dropmenu'); - if($dropmenu.dataset('fetcher') === $nextDropmenu.dataset('fetcher')) - { - const $toolbar = $heading.find('.toolbar'); - const $nextToolbar = $data.filter('.toolbar'); - if($nextToolbar.text().trim() !== $toolbar.text().trim()) $toolbar.replaceWith($nextToolbar); - } - else - { - $heading.html(data); - } - } - - function activeNav(activeID, nav) - { - const $nav = $(nav || '#navbar'); - const $active = $nav.find('.nav-item>a.active'); - if($active.data('id') === activeID) return; - $active.removeClass('active'); - $nav.find('.nav-item>a[data-id="' + activeID + '"]').addClass('active'); - } - - function beforeUpdate($target, info, options) - { - if($target && $target.length) $target.find('[data-zin-events]').off('.on.zin'); - if(window.beforePageUpdate) window.beforePageUpdate($target, info, options); - } - - function afterUpdate($target, info, options) - { - if(window.afterPageUpdate) window.afterPageUpdate($target, info, options); - } - - function renderPartial(info, options) - { - if(window.onPageRender && window.onPageRender(info, options)) return; - if(options.onRender && options.onRender(info, options)) return; - - const render = (options.renders ? options.renders[info.name] : null) || renderMap[info.name]; - const isHtml = info.type === 'html'; - const selector = parseSelector(info.selector); - const $target = selector ? $(selector.select) : $target; - if(render) - { - if(isHtml) beforeUpdate($target, info, options); - render(info.data, info, options); - if(isHtml) afterUpdate($target, info, options); - return; - } - - /* Common render */ - if(!selector) return console.warn('[APP] ', 'cannot render partial content with data', info); - - if(!$target.length) return console.warn('[APP] ', 'cannot find target element with selector', selector); - if(selector.first) $target = $target.first(); - if(selector.type === 'json') - { - const props = info.data.props; - if(typeof props !== 'object') return; - const component = $target.zui(info.name); - if(typeof component === 'object' && typeof component.render === 'function') component.render(props); - return; - } - - beforeUpdate($target, info, options); - if(selector.inner) $target.html(info.data); - else $target.replaceWith(info.data); - afterUpdate($target, info, options); - } - - function renderPage(list, options) - { - if(DEBUG) console.log('[APP] ', 'render:', list); - list.forEach(item => renderPartial(item, options)); - if(!options.partial) - { - const newState = $.apps.updateApp(currentCode, currentAppUrl, document.title); - if (newState) historyState = newState; - } - } - - function toggleLoading(target, isLoading) - { - const $target = $(target); - const position = $target.css('position'); - if(!['relative', 'absolute', 'fixed'].includes(position)) $target.css('position', 'relative'); - if(!$target.hasClass('load-indicator')) $target.addClass('load-indicator'); - if(isLoading === undefined) isLoading = !$target.hasClass('loading'); - $target.toggleClass('loading', isLoading); - } - - /** - * Request data from remote server - * @param {Object} options - * @param {string} options.id - * @param {string} options.url - * @param {string} options.selector - * @param {string} [options.target] - * @param {string} [options.method] - * @param {FormData|Form|Record
extends Component ): ClassNameLike {\n return [props.className, props.class];\n }\n\n protected _getProps(props: RenderableProps ): Record ): ComponentType | keyof JSX.IntrinsicElements {\n return props.component || 'div';\n }\n\n protected _getChildren(props: RenderableProps ): ComponentChildren {\n return props.children;\n }\n\n protected _beforeRender(props: RenderableProps ): RenderableProps | undefined | void {\n return props;\n }\n\n render(props: RenderableProps ) {\n props = this._beforeRender(props) || props;\n return h(this._getComponent(props) as ComponentType, this._getProps(props), this._getChildren(props));\n }\n}\n","import{options as r}from\"preact\";export{Fragment}from\"preact\";var _=0;function o(o,e,n,t,f,l){var s,u,a={};for(u in e)\"ref\"==u?s=e[u]:a[u]=e[u];var i={type:o,props:a,key:n,ref:s,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:--_,__source:f,__self:l};if(\"function\"==typeof o&&(s=o.defaultProps))for(u in s)void 0===a[u]&&(a[u]=s[u]);return r.vnode&&r.vnode(i),i}export{o as jsx,o as jsxDEV,o as jsxs};\n//# sourceMappingURL=jsxRuntime.module.js.map\n","import {Component, createRef} from 'preact';\nimport {$} from '../../cash';\nimport {HElement, HElementProps} from './h-element';\n\n/**\n * HTML content component props.\n */\nexport interface HtmlContentProps extends HElementProps {\n /**\n * HTML code.\n */\n html: string,\n\n /**\n * Execute script.\n */\n executeScript?: boolean,\n}\n\n/**\n * HTML content component.\n *\n * @example\n * // Render extends HElement {\n protected declare _isEmptyText?: boolean;\n\n protected declare _onlyCaret?: boolean;\n\n protected _beforeRender(props: RenderableProps ) {\n const {text, loading, loadingText, caret, icon, trailingIcon, children} = props;\n this._isEmptyText = text === undefined || text === null || (typeof text === 'string' && !text.length) || loading && !loadingText;\n this._onlyCaret = caret && this._isEmptyText && !icon && !trailingIcon && !children && !loading;\n }\n\n protected _getChildren(props: RenderableProps ) {\n const {loading, loadingIcon, loadingText, icon, text, children, trailingIcon, caret} = props;\n return [\n loading ? ) {\n const {type, className, disabled, loading, active, children, square, size, rounded} = props;\n return classes('btn', type, className, {\n 'btn-caret': this._onlyCaret,\n disabled: disabled || loading,\n active,\n loading,\n square: square === undefined ? (!this._onlyCaret && !children && this._isEmptyText) : square,\n }, size ? `size-${size}` : '', typeof rounded === 'string' ? rounded : {rounded});\n }\n\n protected _getComponent(props: RenderableProps ) {\n return props.component || (props.url ? 'a' : 'button');\n }\n\n protected _getProps(props: RenderableProps ) {\n const component = this._getComponent(props);\n const {url, target, btnType = 'button', hint} = props;\n const componentProps: RecordHello world
) {\n const {state, className} = props;\n const {open: opened, disabled} = state;\n return classes(\n 'pick',\n className,\n opened && 'is-open focus',\n disabled && 'disabled',\n );\n }\n\n protected _getProps(props: RenderableProps
): JSX.HTMLAttributes ): ComponentChildren {\n const {children, state} = props;\n return children ?? (state.value as string);\n }\n\n protected _renderValue(props: RenderableProps ): ComponentChildren {\n const {name, state: {value = ''}, id} = props;\n if (name) {\n if (this.#hasInput) {\n $(`#${id}`).val(value);\n } else {\n return ;\n\n }\n }\n return null;\n }\n\n componentDidMount(): void {\n const {id, state} = this.props;\n $(`#${id}`).on(`change.pick.zui.${id}`, (event: Event, from: symbol) => {\n if (from === EVENT_PICK) {\n return;\n }\n const value = (event.target as HTMLInputElement).value;\n if (value !== state.value) {\n this.props.changeState({value} as Partial ): void {\n const {id, state, name} = this.props;\n if (name && previousProps.state.value !== state.value) {\n $(`#${id}`).trigger('change', EVENT_PICK);\n }\n }\n\n render(props: RenderableProps ) {\n return _h(\n props.tagName || 'div',\n this._getProps(props),\n this._renderTrigger(props),\n this._renderValue(props),\n );\n }\n}\n","import {Component, ComponentChildren, JSX, RefObject, RenderableProps, VNode, createRef} from 'preact';\nimport {computePosition, flip, offset, shift, autoUpdate} from '@floating-ui/dom';\nimport {$, classes, createPortal} from '@zui/core';\nimport type {PickState, PickPopProps} from '../types';\n\nexport class PickPop ) {\n const {className, state} = props;\n const {open} = state;\n return classes(\n 'pick-pop',\n className,\n open === true && 'in',\n );\n }\n\n protected _getProps(props: RenderableProps ): JSX.HTMLAttributes ): HTMLElement {\n if (!this.#container) {\n const $containerParent = $(props.container || 'body');\n let $container = $containerParent.find('.pick-container');\n if (!$container.length) {\n $container = $(' ): VNode {\n return (\n ): ComponentChildren {\n return props.children;\n }\n\n protected _handleDocClick = (e: MouseEvent) => {\n const {state: {open}, id, togglePop} = this.props;\n const $target = $(e.target as HTMLElement);\n if (open !== 'closing' && !$target.closest(`#pick-${id},#pick-pop-${id}`).length && $target.parent().length) {\n togglePop(false);\n }\n };\n\n protected layout() {\n const {element, trigger, props} = this;\n const {state} = props;\n if (!element || !trigger || !state.open) {\n if (this.#layoutWatcher) {\n this.#layoutWatcher();\n this.#layoutWatcher = undefined;\n }\n return;\n }\n\n if (this.#layoutWatcher) {\n return;\n }\n\n this.#layoutWatcher = autoUpdate(trigger, element, () => {\n const {placement, width} = props;\n computePosition(trigger, element, {\n placement: (!placement || placement === 'auto') ? 'bottom-start' : placement,\n middleware: [placement === 'auto' ? flip() : null, shift(), offset(1)].filter(Boolean),\n }).then(({x, y}) => {\n $(element).css({\n left: x,\n top: y,\n width: width === '100%' ? $(trigger).outerWidth() : undefined,\n });\n this.props.onLayout?.(element);\n });\n if (width === '100%') {\n $(element).css({width: $(element).width()});\n }\n });\n }\n\n componentDidMount() {\n this.layout();\n $(document).on('click', this._handleDocClick);\n this.props.afterRender?.({firstRender: true});\n }\n\n componentDidUpdate(): void {\n this.props.afterRender?.({firstRender: false});\n }\n\n\n componentWillUnmount(): void {\n $(document).off('click', this._handleDocClick);\n\n const layoutWatcher = this.#layoutWatcher;\n if (layoutWatcher) {\n layoutWatcher();\n this.#layoutWatcher = undefined;\n }\n this.#container = undefined;\n this.#ref = undefined;\n $(`pick-pop-${this.props.id}`).remove();\n\n this.props.beforeDestroy?.();\n }\n\n render(props: RenderableProps ) {\n return createPortal(this._render(props), this._getContainer(props));\n }\n}\n","import {Component, ComponentChildren, ComponentType, RefObject, RenderableProps, createRef} from 'preact';\nimport {$, delay} from '@zui/core';\nimport type {PickOptions, PickPopProps, PickState, PickTriggerProps} from '../types';\nimport {PickTrigger} from './pick-trigger';\nimport {PickPop} from './pick-pop';\nimport '../style';\n\nexport class Pick);\n }\n });\n }\n\n componentWillUnmount(): void {\n const {id} = this.props;\n $(`#${id}`).off(`change.pick.zui.${id}`);\n }\n\n componentDidUpdate(previousProps: Readonly = PickPopProps, STATE = {}> extends Component);\n }\n if ($target.closest('[data-dismiss=\"pick\"]').length) {\n return togglePop(false);\n }\n }\n\n protected _getClass(props: RenderableProps = PickOptions> extends Component | ((prevState: Readonly) => Partial), callback?: () => void): Promise => {\n return new Promise(resolve => {\n this.setState(state, () => {\n callback?.();\n resolve(this.state);\n });\n });\n };\n\n toggle = async (open?: boolean, state?: Partial): Promise => {\n if (this.props.disabled) {\n open = false;\n }\n const {state: currentState} = this;\n if (typeof open === 'boolean' && open === (!!currentState.open && currentState.open !== 'closing')) {\n if (state) {\n await this.changeState(state);\n }\n return this.state;\n }\n\n if (this.#toggleTimer) {\n clearTimeout(this.#toggleTimer);\n this.#toggleTimer = 0;\n }\n\n let newState = await this.changeState(prevState => {\n open = open ?? !prevState.open;\n\n return {\n open: open ? 'opening' : 'closing',\n ...state,\n } as Partial;\n });\n const {open: openState} = newState;\n\n if (openState === 'closing') {\n await delay(200, (id) => {\n this.#toggleTimer = id;\n });\n this.#toggleTimer = 0;\n newState = await this.changeState({open: false} as Partial);\n } else if (openState === 'opening') {\n await delay(50, (id) => {\n this.#toggleTimer = id;\n });\n\n this.#toggleTimer = 0;\n newState = await this.changeState({open: true} as Partial);\n }\n\n return newState;\n };\n\n open(state?: Partial) {\n return this.toggle(true, state);\n }\n\n close(state?: Partial) {\n return this.toggle(false, state);\n }\n\n protected _getTriggerProps(props: RenderableProps): PickTriggerProps {\n return {\n id: this.id,\n state: state,\n className: props.className,\n style: props.style,\n name: props.name,\n tagName: props.tagName,\n attrs: props.attrs,\n clickType: props.clickType,\n onClick: props.onClick,\n changeState: this.changeState,\n togglePop: this.toggle,\n };\n }\n\n protected _getPopProps(props: RenderableProps): PickPopProps {\n return {\n id: this.id,\n state: state,\n className: props.popClass,\n style: props.popStyle,\n changeState: this.changeState,\n togglePop: this.toggle,\n placement: props.popPlacement,\n\n container: props.popContainer,\n width: props.popWidth,\n height: props.popHeight,\n minHeight: props.popMinHeight,\n maxHeight: props.popMaxHeight,\n maxWidth: props.popMaxWidth,\n minWidth: props.popMinWidth,\n };\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected _renderTrigger(_props: RenderableProps): ComponentChildren {\n return null;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected _renderPop(_props: RenderableProps): ComponentChildren {\n return null;\n }\n\n protected _afterRender(firstRender = false) {\n this.props.afterRender?.call(this, {firstRender});\n }\n\n protected _getPop(props: RenderableProps): void {\n const {open: opened} = this.state;\n const {open: nextOpened} = nextState;\n if (opened === nextOpened) {\n return;\n }\n const {onPopShow, onPopHide} = this.props;\n if (nextOpened && onPopShow) {\n onPopShow();\n } else if (!nextOpened && onPopHide) {\n onPopHide();\n }\n }\n\n componentDidUpdate(_previousProps: Readonly): void {\n const {open: opened, value} = this.state;\n const {open: prevOpened, value: prevValue} = previousState;\n if (!!opened !== !!prevOpened) {\n const {onPopShown, onPopHidden} = this.props;\n if (opened && onPopShown) {\n onPopShown();\n } else if (!opened && onPopHidden) {\n onPopHidden();\n }\n }\n if (value !== prevValue) {\n this._handleChange(value, prevValue);\n }\n this._afterRender();\n }\n\n componentWillUnmount(): void {\n this.props.beforeDestroy?.call(this);\n if (this.#toggleTimer) {\n clearTimeout(this.#toggleTimer);\n }\n const pop = this.#pop.current as unknown as Component) {\n const {open: opened} = state;\n const Trigger = this._getTrigger(props);\n let popView: ComponentChildren;\n if (opened) {\n const Pop = this._getPop(props);\n popView = ( = PickOptions> extends ComponentFromReact');\n const $tip = $(`${tip}`);\n\n if (!draggable) {\n this.$label = $(``);\n if (uploadIcon) {\n const $uploadIcon = $(``);\n this.$label.prepend($uploadIcon);\n }\n const $children = listPosition === 'bottom'\n ? [this.$label, $tip, this.$list]\n : [this.$list, this.$label, $tip];\n this.$element.append(this.$input, ...$children);\n return;\n }\n\n const $uploadText = $(`${uploadText}`);\n if (uploadIcon) {\n const $uploadIcon = $(``);\n $uploadText.prepend($uploadIcon);\n }\n this.$label = $(``)\n .append($uploadText)\n .append($tip);\n this.bindDragEvent();\n const $children = listPosition === 'bottom'\n ? [this.$label, this.$list]\n : [this.$list, this.$label];\n this.$element.append(this.$input, ...$children);\n }\n\n protected bindDragEvent() {\n this.$label\n .on('dragover', (e) => {\n e.preventDefault();\n console.log('dragover');\n if (!this.$label.hasClass('border-primary')) {\n this.$label.removeClass('border-gray');\n this.$label.addClass('border-primary');\n }\n })\n .on('dragleave', (e) => {\n e.preventDefault();\n this.$label.removeClass('border-primary');\n this.$label.addClass('border-gray');\n })\n .on('drop', (e) => {\n e.preventDefault();\n this.$label.removeClass('border-primary');\n this.$label.addClass('border-gray');\n const files = Array.from(e.dataTransfer?.files ?? []) as File[];\n console.log(e.dataTransfer.files);\n this.addFileItem(files);\n });\n }\n\n private initFileInputCash() {\n const {name, multiple, accept} = this.options;\n\n this.$input = $('')\n .addClass('hidden')\n .prop('type', 'file')\n .prop('name', name)\n .prop('id', name)\n .prop('multiple', multiple)\n .on('change', event => {\n const fileList = (event.target as HTMLInputElement).files;\n if (!fileList) {\n return;\n }\n\n const files = [...fileList];\n this.addFileItem(files);\n });\n\n if (accept) {\n this.$input.prop('accept', accept);\n }\n }\n\n private addFile(file: File) {\n const {multiple, onSizeChange} = this.options;\n if (!multiple) {\n this.renameMap.clear();\n this.fileMap.clear();\n this.dataTransfer.items.clear();\n this.currentBytes = file.size;\n }\n\n this.renameMap.set(file.name, file.name);\n this.fileMap.set(file.name, file);\n this.dataTransfer.items.add(file);\n this.$input.prop('files', this.dataTransfer.files);\n this.currentBytes += file.size;\n onSizeChange?.(this.currentBytes);\n }\n\n private renameDuplicatedFile(file: File) {\n if (!this.fileMap.has(file.name)) {\n return file;\n }\n\n const pos = file.name.lastIndexOf('.');\n if (pos === -1) {\n return this.renameDuplicatedFile(new File([file], `${file.name}(1)`));\n }\n\n const fileName = file.name.substring(0, pos);\n const fileExt = file.name.substring(pos);\n return this.renameDuplicatedFile(new File([file], `${fileName}(1)${fileExt}`));\n }\n\n protected filterFiles(files: File[]) {\n const {accept} = this.options;\n if (!accept) return files;\n\n const fileTypes = accept.replace(/\\s/g, '').split(',');\n const mimeList: string[] = [];\n const mimeAllList: string[] = [];\n const extList: string[] = [];\n\n fileTypes.forEach(type => {\n if (type.endsWith('/*')) {\n mimeAllList.push(type.substring(0, type.length - 1));\n } else if (type.includes('/')) {\n mimeList.push(type);\n } else if (type.startsWith('.')) {\n extList.push(type);\n }\n });\n\n return files.filter(file => (\n mimeList.includes(file.type)\n || mimeAllList.some(x => file.type.startsWith(x))\n || extList.some(x => file.name.endsWith(x))\n ));\n }\n\n protected addFileItem(files: File[]) {\n files = this.filterFiles(files);\n const {multiple, limitCount, exceededSizeHint, exceededCountHint, onAdd} = this.options;\n if (multiple) {\n const validFiles: File[] = [];\n for (let file of files) {\n if (limitCount && this.fileMap.size >= limitCount) {\n onAdd?.(validFiles);\n return alert(exceededCountHint);\n }\n if (this.currentBytes + file.size > this.limitBytes) {\n onAdd?.(validFiles);\n return alert(exceededSizeHint);\n }\n file = this.renameDuplicatedFile(file);\n const item = this.createFileItem(file);\n this.itemMap.set(file.name, item);\n this.$list.append(item);\n validFiles.push(file);\n }\n onAdd?.(validFiles);\n return;\n }\n\n if (files[0].size > this.limitBytes) {\n return;\n }\n\n const file = this.renameDuplicatedFile(files[0]);\n const item = this.createFileItem(file);\n this.itemMap.clear();\n this.itemMap.set(file.name, item);\n this.$list.empty().append(item);\n onAdd?.(file);\n }\n\n protected deleteFileItem(name: string) {\n const fileName = this.renameMap.get(name) ?? name;\n this.renameMap.delete(name);\n const file = this.fileMap.get(fileName);\n if (!file) {\n return;\n }\n\n const {onDelete, onSizeChange} = this.options;\n const $item = this.itemMap.get(file.name);\n this.itemMap.delete(file.name);\n $item?.addClass('hidden');\n const tooltipInstance = $item?.find('.file-delete')?.data('tooltip');\n if (tooltipInstance) {\n tooltipInstance.destroy();\n tooltipInstance.tooltip.remove();\n }\n setTimeout(() => $item?.remove(), 3000);\n onDelete?.(file);\n this.fileMap.delete(file.name);\n\n this.currentBytes -= file.size;\n onSizeChange?.(this.currentBytes);\n this.dataTransfer = new DataTransfer();\n this.fileMap.forEach((f) => this.dataTransfer.items.add(f));\n this.$input.prop('files', this.dataTransfer.files);\n }\n\n protected renameFileItem(file: File, newName: string) {\n const fileName = this.renameMap.get(file.name);\n this.renameMap.set(file.name, newName);\n if (fileName) {\n file = this.fileMap.get(fileName) ?? file;\n }\n const item = this.itemMap.get(file.name);\n if (!item) {\n return;\n }\n\n this.itemMap\n .set(newName, item)\n .delete(file.name);\n this.options.onRename?.(newName, file.name);\n this.fileMap.delete(file.name);\n\n this.dataTransfer = new DataTransfer();\n file = new File([file], newName);\n this.fileMap\n .set(newName, file)\n .forEach((f) => this.dataTransfer.items.add(f));\n\n this.$input.prop('files', this.dataTransfer.files);\n }\n\n\n protected createFileItem(file: File) {\n const {showIcon} = this.options;\n this.addFile(file);\n\n return $('')\n .append(showIcon ? this.fileIcon() : null)\n .append(this.createFileInfo(file))\n .append(this.createRenameContainer(file));\n }\n\n private fileIcon() {\n const {icon} = this.options;\n return $(``);\n }\n\n protected fileRenameBtn() {\n const {useIconBtn, renameText, renameIcon, renameClass} = this.options;\n if (useIconBtn) {\n const $iconBtn = $(``)\n .prop('type', 'button')\n .addClass('file-action file-rename');\n new Tooltip($iconBtn, {title: renameText});\n return $iconBtn;\n }\n\n return $('')\n .prop('type', 'button')\n .addClass(`btn size-sm rounded-sm text-primary canvas file-action file-rename ${renameClass}`)\n .html(renameText!);\n }\n\n protected fileDeleteBtn() {\n const {useIconBtn, deleteText, deleteIcon, deleteClass} = this.options;\n if (useIconBtn) {\n const $iconBtn = $(``)\n .prop('type', 'button')\n .addClass('file-action file-delete');\n $iconBtn.data('tooltip', new Tooltip($iconBtn, {title: deleteText}));\n return $iconBtn;\n }\n\n return $('')\n .html(deleteText!)\n .prop('type', 'button')\n .addClass(`btn size-sm rounded-sm text-primary canvas file-action file-delete ${deleteClass}`);\n }\n\n protected fileName(name: string) {\n return $(`${name}`);\n }\n\n protected fileSize(size: number) {\n return $(`${formatBytes(size)}`);\n }\n\n protected createFileInfo(file: File) {\n const {renameBtn, deleteBtn, showSize} = this.options;\n const $fileInfo = $('');\n $fileInfo.append(this.fileName(file.name));\n if (showSize) {\n $fileInfo.append(this.fileSize(file.size));\n }\n if (renameBtn) {\n $fileInfo.append(\n this.fileRenameBtn()\n .on('click', (e) => {\n $fileInfo\n .addClass('hidden')\n .closest('.file-item')\n .find('.input-rename-container.hidden')\n .removeClass('hidden');\n const inputEl = $(e.target).closest('li').find('input')[0] as HTMLInputElement;\n inputEl.focus();\n if (inputEl.value.lastIndexOf('.') !== -1) {\n inputEl.setSelectionRange(0, inputEl.value.lastIndexOf('.'));\n }\n }),\n );\n }\n if (deleteBtn) {\n $fileInfo.append(\n this.fileDeleteBtn()\n .on('click', () => this.deleteFileItem(file.name)),\n );\n }\n return $fileInfo;\n }\n\n protected createRenameContainer(file: File) {\n const {confirmText, cancelText, duplicatedHint} = this.options;\n const $renameContainer = $('');\n const $input = $('')\n .addClass('form-control')\n .prop('type', 'text')\n .prop('autofocus', true)\n .prop('defaultValue', file.name)\n .on('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n const $fileItem = $renameContainer.closest('.file-item');\n const $fileName = $fileItem.find('.file-name');\n if ($fileName.html() === $input.val()) {\n $renameContainer.addClass('hidden');\n $fileItem.find('.file-info.hidden').removeClass('hidden');\n return;\n }\n\n if (this.fileMap.has($input.val() as string)) {\n return alert(duplicatedHint);\n }\n\n this.renameFileItem(file, $input.val() as string);\n $renameContainer.addClass('hidden');\n $fileItem.find('.file-info.hidden').removeClass('hidden');\n $fileName.html($input.val() as string);\n } else if (e.key === 'Escape') {\n $input.val(file.name);\n $renameContainer\n .addClass('hidden')\n .closest('.file-item')\n .find('.file-info.hidden')\n .removeClass('hidden');\n }\n });\n const $submitBtn = $('')\n .addClass('btn primary rename-confirm-btn')\n .prop('type', 'button')\n .html(confirmText!)\n .on('click', () => {\n const $fileItem = $renameContainer.closest('.file-item');\n const $fileName = $fileItem.find('.file-name');\n if ($fileName.html() === $input.val()) {\n $renameContainer.addClass('hidden');\n $fileItem.find('.file-info.hidden').removeClass('hidden');\n return;\n }\n\n if (this.fileMap.has($input.val() as string)) {\n return alert(duplicatedHint);\n }\n this.renameFileItem(file, $input.val() as string);\n $renameContainer.addClass('hidden');\n $fileItem.find('.file-info.hidden').removeClass('hidden');\n $fileName.html($input.val() as string);\n });\n const $cancelBtn = $('')\n .prop('type', 'button')\n .addClass('btn rename-cancel-btn')\n .html(cancelText!)\n .on('click', () => {\n $input.val(file.name);\n $renameContainer\n .addClass('hidden')\n .closest('.file-item')\n .find('.file-info.hidden')\n .removeClass('hidden');\n });\n const $groupBtn = $('
');\n this.$label = $('').css({minHeight: 64});\n const $uploadText = $(``);\n if (uploadIcon) {\n const $uploadIcon = $(``);\n $uploadText.prepend($uploadIcon);\n }\n this.$tip = $('')\n .append($uploadText);\n if (tip) {\n this.$tip.append($(`${tip}`));\n }\n this.$label.append(this.$tip);\n this.$label.append(this.$input, this.$list);\n this.bindDragEvent();\n this.$element.append(this.$label);\n\n this.$uploadInfo = $('')\n .css({color: 'var(--color-slate-500)'})\n .html(totalCountText!.replace('%s', this.fileMap.size.toString()).replace('%s', this.fileMap.size.toString()));\n this.$element.append(this.$uploadInfo);\n }\n\n protected filterFiles(files: File[]) {\n const {accept} = this.options;\n if (accept === 'image/*') {\n return files.filter(file => file.type.includes('image'));\n }\n\n const imageTypes = accept!.replace(/\\s/g, '').replace(/\\./g, 'image/').split(',');\n return files.filter(file => imageTypes.includes(file.type));\n }\n\n protected createFileItem(file: File) {\n const $fileItem = super.createFileItem(file)\n .addClass('relative')\n .removeClass('flex items-center gap-2 my-1');\n this.setImageUrl(file, $fileItem);\n\n const {deleteBtn, showSize} = this.options;\n if (deleteBtn) {\n $fileItem.append(\n this.fileDeleteBtn()\n .addClass('absolute right-0 top-0 text-white')\n .css({background: 'var(--color-slate-500)'})\n .on('click', () => this.deleteFileItem(file.name)),\n );\n }\n if (showSize) {\n $fileItem.append(\n this.fileSize(file.size)\n .addClass('file-size label text-white circle darker absolute px-1 hidden')\n .removeClass('text-gray')\n .css({top: 96, left: 4}),\n );\n }\n\n return $fileItem;\n }\n\n private setImageUrl(file: File, $fileItem: Cash) {\n const fr = new FileReader();\n fr.onload = () => {\n $('')\n .addClass('rounded')\n .css({backgroundImage: `url(${fr.result})`})\n .prependTo($fileItem);\n };\n fr.readAsDataURL(file);\n }\n\n protected createFileInfo(file: File) {\n const $renameBtn = this.fileRenameBtn()\n .addClass('flex-none')\n .on('click', (e) => {\n const $item = $(e.target).closest('.file-item');\n $item.find('.file-info').addClass('hidden');\n $item.find('.input-rename-container').removeClass('hidden');\n\n const inputEl = $item.find('input')[0] as HTMLInputElement;\n inputEl.focus();\n if (inputEl.value.lastIndexOf('.') !== -1) {\n inputEl.setSelectionRange(0, inputEl.value.lastIndexOf('.'));\n }\n });\n const $fileInfo = $('')\n .css({width: 120})\n .append($(`
`).appendTo($row);\n }\n if (col.index) {\n $col.find('.form-control-static').text(id).attr('id', `${col.name}_${gid}`);\n onRenderRowCol?.call(this, $col, col, data, index);\n return;\n }\n\n if (!$col.data('init') || data) {\n if (col.name === 'ACTIONS') {\n $col.addClass('form-batch-row-actions');\n if (!isAddMode) {\n return;\n }\n this.#renderActions($col);\n return;\n }\n $col.data('init', 1)\n .find('[name],.form-control-static')\n .each((_, ele) => {\n const $ele = $(ele);\n if ($ele.hasClass('form-control-static')) {\n const name = $ele.attr('data-name')!;\n $ele.attr('id', `${col.name}_${gid}`);\n if (data) {\n $ele.text(String(data[name] ?? ''));\n }\n } else {\n const name = $ele.attr('name')!;\n const domID = $ele.attr('id')!;\n $ele.attr({\n id: `${domID}_${gid}`,\n name: `${name}[${id}]`,\n 'data-name': name,\n }).addClass('form-batch-input');\n $col.find(`label[for=\"${domID}\"]`)\n .each((_1, e) => {\n $(e).attr('for', `${domID}_${gid}`);\n });\n\n if (data) {\n $ele.val(String(data[name] ?? ''));\n }\n\n }\n });\n } else {\n $col.find('[name]').each((_, ele) => {\n const $ele = $(ele);\n const name = $ele.attr('data-name')!;\n if ($ele.attr('name')?.startsWith(`${name}[`)) {\n $ele.attr('name', `${name}[${id}]`);\n }\n });\n }\n\n if (col.ditto && !$col.hasClass('form-batch-ditto')) {\n $col.addClass('form-batch-ditto');\n if (index) {\n const $btn = $(``);\n const $control = $('')\n .append($col.children())\n .append($btn)\n .appendTo($col);\n requestAnimationFrame(() => $control.css('--input-control-suffix', `${$btn.find('.btn').outerWidth()}px`));\n $col.attr('data-ditto', col.defaultDitto ?? 'on');\n } else {\n $col.attr('data-ditto', '');\n const $ditto = $col.find('.input-control-ditto');\n if ($ditto.length) {\n $ditto.children().not('.form-batch-ditto-btn').appendTo($col);\n $ditto.remove();\n }\n }\n }\n\n onRenderRowCol?.call(this, $col, col, data, index);\n });\n\n onRenderRow?.call(this, $row, index, data);\n }\n}\n","import {Component, createRef} from 'preact';\nimport {$} from '@zui/core';\nimport {BurnProps} from '../types';\n\nexport type BurnState = {\n width: number;\n height: number;\n};\n\nfunction formatData(data: BurnProps['data']): (number | null)[] {\n if (typeof data === 'string') {\n return data.split(',').map(value => {\n const num = parseFloat(value);\n return Number.isNaN(num) ? null : num;\n });\n }\n return data;\n}\n\nexport class Burn extends Component \n {tabs.map(({name, text, count}) => (\n
\n \n {this.renderCommonSearch('secondary')}\n
\n );\n }\n\n return (\n \n {this.renderCommonSearch()}\n {\n searchItems.map(({key, text, url}) => (\n
\n );\n }\n}\n","import {ContainerNode, render} from 'preact';\nimport {Component, $} from '@zui/core';\nimport {Popovers} from '@zui/popovers';\nimport {GlobalSearchPanel} from '../component/global-search-panel';\nimport {GlobalSearchProps} from '../types';\n\nexport class GlobalSearch extends Component\n \n );\n}\n","import {useState} from 'preact/hooks';\n\ntype SearchConditionProps = {\n text: string;\n applyURL: string;\n deleteURL: string;\n};\n\nexport default function SearchCondition(props: SearchConditionProps) {\n const {text, applyURL, deleteURL} = props;\n const [wrapBg, setWrapBg] = useState('lighter');\n const [btnBg, setBtnBg] = useState('lighter');\n\n return (\n \n {\n index === 1\n ? {groupName[0]}\n : index === 4\n ? {groupName[1]}\n : \n \n \n \n \n \n {\n selectedField?.control === 'input' || !selectedField\n ? \n