@qxs-bns/components 0.0.89 → 0.0.91

package/es/file-upload.mjs

@@ -0,0 +1,157 @@
+import{css as e,LitElement as t,nothing as s,html as i}from"lit";import{property as a,state as r,query as n}from"lit/decorators.js";import{classMap as o}from"lit/directives/class-map.js";import{repeat as l}from"lit/directives/repeat.js";import{safeCustomElement as p}from"./base/define.mjs";var d=Object.defineProperty,h=Object.getOwnPropertyDescriptor,c=(e,t,s,i)=>{for(var a,r=i>1?void 0:i?h(t,s):t,n=e.length-1;n>=0;n--)(a=e[n])&&(r=(i?a(t,s,r):a(r))||r);return i&&r&&d(t,s,r),r};function g(e){return e.trim().replace(/^\./,"").split("/").pop()?.toLowerCase()??""}let u=class extends t{constructor(){super(...arguments),this.action="",this.name="file",this.size=20,this.max=3,this.accept="zip,rar",this.files=[],this.notip=!1,this.ext=[],this._internalFiles=[],this._isDragging=!1,this._message="",this._messageType="info",this._pendingUploadCount=0}connectedCallback(){super.connectedCallback(),this._syncFilesFromProps()}updated(e){e.has("files")&&this._syncFilesFromProps()}get _exts(){return(this.ext.length?this.ext:this.accept.split(",")).map(g).filter(Boolean)}_syncFilesFromProps(){this._internalFiles=[...this.files]}_setMessage(e,t){this._messageType=e,this._message=t}_clearMessage(){this._message="",this._messageType="info"}_validateFile(e){const t=g(e.name.split(".").pop()??""),s=this._exts.includes(t),i=e.size/1024/1024<this.size;return s?i?!(this._internalFiles.length+this._pendingUploadCount>=this.max)||(this._setMessage("warning","文件上传超过限制"),!1):(this._setMessage("error",`上传文件大小不能超过 ${this.size}MB！`),!1):(this._setMessage("error",`上传文件只支持 ${this._exts.join(" / ")} 格式！`),!1)}_dispatchUploadSuccess(e){this.dispatchEvent(new CustomEvent("upload-success",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-success",{detail:e,bubbles:!0,composed:!0})),"function"==typeof this.onSuccess&&this.onSuccess(e.response,e.file,e.files)}_dispatchFilesChange(){this.dispatchEvent(new CustomEvent("files-change",{detail:{items:this._internalFiles.slice()},bubbles:!0,composed:!0}))}_handleSelectedFiles(e){this._clearMessage(),e.forEach(e=>{this._validateFile(e)&&this._uploadFile(e)})}_handleDrop(e){e.preventDefault(),this._isDragging=!1;const t=e.dataTransfer?.files;t&&this._handleSelectedFiles(Array.from(t))}_handleDragOver(e){e.preventDefault(),this._isDragging=!0}_handleDragLeave(){this._isDragging=!1}_handleInputChange(e){const t=e.target,s=t.files;s&&(this._handleSelectedFiles(Array.from(s)),t.value="")}_uploadFile(e){if(!this.action)return void this._setMessage("warning","请先配置上传地址 action");const t=new FormData;t.append(this.name,e),this.data&&Object.entries(this.data).forEach(e=>{let[s,i]=e;t.append(s,i)});const s=new XMLHttpRequest;s.open("POST",this.action),this._pendingUploadCount+=1,this.headers&&Object.entries(this.headers).forEach(e=>{let[t,i]=e;s.setRequestHeader(t,i)}),s.onload=()=>{if(this._pendingUploadCount=Math.max(0,this._pendingUploadCount-1),s.status>=200&&s.status<300){const t=function(e){try{return JSON.parse(e)}catch{return e}}(s.responseText),i={name:e.name,file:e};this._internalFiles=[...this._internalFiles,i],this._setMessage("info",`${e.name} 上传成功`),this._dispatchFilesChange(),this._dispatchUploadSuccess({response:t,file:e,files:this._internalFiles.map(e=>e.file).filter(Boolean),items:this._internalFiles.slice()})}else this._setMessage("error","上传失败")},s.onerror=()=>{this._pendingUploadCount=Math.max(0,this._pendingUploadCount-1),this._setMessage("error","上传失败")},s.send(t)}_handleRemove(e){this._internalFiles=this._internalFiles.filter((t,s)=>s!==e),this._dispatchFilesChange()}render(){const e={control:!0,"is-dragging":this._isDragging};return i`
+      <div class="upload" part="container">
+        <div
+          class=${o(e)}
+          part="control"
+          @click=${()=>this._input?.click()}
+          @drop=${this._handleDrop}
+          @dragover=${this._handleDragOver}
+          @dragleave=${this._handleDragLeave}
+        >
+          <input
+            type="file"
+            accept=${this.accept}
+            ?multiple=${this.max>1}
+            style="display:none"
+            @change=${this._handleInputChange}
+          >
+          <div class="icon" part="icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="52" height="52">
+              <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
+            </svg>
+          </div>
+          <div class="text" part="text">将文件拖到此处，或<em>点击上传</em></div>
+        </div>
+
+        ${this._internalFiles.length?i`
+              <div class="list" part="list">
+                ${l(this._internalFiles,e=>`${e.name}-${e.url??""}`,(e,t)=>i`
+                  <div class="item" part="item">
+                    <span class="item-name">${e.name}</span>
+                    <button
+                      class="remove"
+                      part="remove"
+                      type="button"
+                      @click=${e=>{e.stopPropagation(),this._handleRemove(t)}}
+                    >
+                      ×
+                    </button>
+                  </div>
+                `)}
+              </div>
+            `:s}
+
+        ${this._message?i`<div class="status ${this._messageType}" part="status">${this._message}</div>`:s}
+
+        ${this.notip?s:i`
+              <div class="status info" part="tip">
+                <slot name="tip">
+                  上传文件支持 ${this._exts.join(" / ")} 格式，单个文件大小不超过 ${this.size}MB，且文件数量不超过 ${this.max} 个
+                </slot>
+              </div>
+            `}
+      </div>
+    `}};u.styles=e`
+    :host {
+      display: block;
+      width: 100%;
+      color: #0f172a;
+      font-size: 14px;
+    }
+
+    .upload {
+      display: grid;
+      gap: 12px;
+    }
+
+    .control {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 150px;
+      padding: 24px;
+      cursor: pointer;
+      background: #f8fafc;
+      border: 1px dashed #cbd5e1;
+      border-radius: 16px;
+      transition: border-color 0.2s ease, background-color 0.2s ease;
+    }
+
+    .control.is-dragging {
+      background: #eef4ff;
+      border-color: #3d61e3;
+    }
+
+    .icon {
+      width: 52px;
+      height: 52px;
+      margin-bottom: 14px;
+      color: #3d61e3;
+    }
+
+    .text {
+      line-height: 1.6;
+      color: #475569;
+      text-align: center;
+    }
+
+    .text em {
+      font-style: normal;
+      color: #3d61e3;
+    }
+
+    .list {
+      display: grid;
+      gap: 8px;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 10px 12px;
+      background: #fff;
+      border: 1px solid #e2e8f0;
+      border-radius: 12px;
+    }
+
+    .item-name {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .remove {
+      padding: 0;
+      color: #94a3b8;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+    }
+
+    .status {
+      padding: 10px 12px;
+      line-height: 1.6;
+      border-radius: 12px;
+    }
+
+    .status.info {
+      color: #1d4ed8;
+      background: #eff6ff;
+    }
+
+    .status.warning {
+      color: #9a3412;
+      background: #fff7ed;
+    }
+
+    .status.error {
+      color: #b91c1c;
+      background: #fef2f2;
+    }
+  `,c([a({type:String})],u.prototype,"action",2),c([a({attribute:!1})],u.prototype,"headers",2),c([a({attribute:!1})],u.prototype,"data",2),c([a({type:String})],u.prototype,"name",2),c([a({type:Number})],u.prototype,"size",2),c([a({type:Number,attribute:"max"})],u.prototype,"max",2),c([a({type:String})],u.prototype,"accept",2),c([a({attribute:!1})],u.prototype,"files",2),c([a({type:Boolean})],u.prototype,"notip",2),c([a({attribute:!1})],u.prototype,"ext",2),c([r()],u.prototype,"_internalFiles",2),c([r()],u.prototype,"_isDragging",2),c([r()],u.prototype,"_message",2),c([r()],u.prototype,"_messageType",2),c([n('input[type="file"]')],u.prototype,"_input",2),u=c([p("qxs-file-upload")],u);export{u as QxsFileUpload};
+//# sourceMappingURL=file-upload.mjs.map

package/es/file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.mjs","sources":["../../../packages/components/src/file-upload.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { safeCustomElement } from './base/define'\n\ntype UploadItem = {\n  name: string\n  url?: string\n  file?: File\n}\n\ntype UploadSuccessDetail = {\n  response: any\n  file: File\n  files: File[]\n  items: UploadItem[]\n}\n\nfunction normalizeExt(value: string) {\n  return value.trim().replace(/^\\./, '').split('/').pop()?.toLowerCase() ?? ''\n}\n\nfunction parseJsonResponse(responseText: string) {\n  try {\n    return JSON.parse(responseText)\n  }\n  catch {\n    return responseText\n  }\n}\n\n@safeCustomElement('qxs-file-upload')\nexport class QxsFileUpload extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      color: #0f172a;\n      font-size: 14px;\n    }\n\n    .upload {\n      display: grid;\n      gap: 12px;\n    }\n\n    .control {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      min-height: 150px;\n      padding: 24px;\n      cursor: pointer;\n      background: #f8fafc;\n      border: 1px dashed #cbd5e1;\n      border-radius: 16px;\n      transition: border-color 0.2s ease, background-color 0.2s ease;\n    }\n\n    .control.is-dragging {\n      background: #eef4ff;\n      border-color: #3d61e3;\n    }\n\n    .icon {\n      width: 52px;\n      height: 52px;\n      margin-bottom: 14px;\n      color: #3d61e3;\n    }\n\n    .text {\n      line-height: 1.6;\n      color: #475569;\n      text-align: center;\n    }\n\n    .text em {\n      font-style: normal;\n      color: #3d61e3;\n    }\n\n    .list {\n      display: grid;\n      gap: 8px;\n    }\n\n    .item {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n      padding: 10px 12px;\n      background: #fff;\n      border: 1px solid #e2e8f0;\n      border-radius: 12px;\n    }\n\n    .item-name {\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .remove {\n      padding: 0;\n      color: #94a3b8;\n      cursor: pointer;\n      background: transparent;\n      border: 0;\n    }\n\n    .status {\n      padding: 10px 12px;\n      line-height: 1.6;\n      border-radius: 12px;\n    }\n\n    .status.info {\n      color: #1d4ed8;\n      background: #eff6ff;\n    }\n\n    .status.warning {\n      color: #9a3412;\n      background: #fff7ed;\n    }\n\n    .status.error {\n      color: #b91c1c;\n      background: #fef2f2;\n    }\n  `\n\n  @property({ type: String }) action = ''\n  @property({ attribute: false }) headers?: Record<string, string>\n  @property({ attribute: false }) data?: Record<string, string | Blob>\n  @property({ type: String }) name = 'file'\n  @property({ type: Number }) size = 20\n  @property({ type: Number, attribute: 'max' }) max = 3\n  @property({ type: String }) accept = 'zip,rar'\n  @property({ attribute: false }) files: UploadItem[] = []\n  @property({ type: Boolean }) notip = false\n  @property({ attribute: false }) ext: string[] = []\n\n  @state() private _internalFiles: UploadItem[] = []\n  @state() private _isDragging = false\n  @state() private _message = ''\n  @state() private _messageType: 'info' | 'warning' | 'error' = 'info'\n\n  @query('input[type=\"file\"]') private _input?: HTMLInputElement\n  private _pendingUploadCount = 0\n\n  connectedCallback() {\n    super.connectedCallback()\n    this._syncFilesFromProps()\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('files')) {\n      this._syncFilesFromProps()\n    }\n  }\n\n  private get _exts() {\n    const source = this.ext.length ? this.ext : this.accept.split(',')\n    return source.map(normalizeExt).filter(Boolean)\n  }\n\n  private _syncFilesFromProps() {\n    this._internalFiles = [...this.files]\n  }\n\n  private _setMessage(type: 'info' | 'warning' | 'error', message: string) {\n    this._messageType = type\n    this._message = message\n  }\n\n  private _clearMessage() {\n    this._message = ''\n    this._messageType = 'info'\n  }\n\n  private _validateFile(file: File) {\n    const fileExt = normalizeExt(file.name.split('.').pop() ?? '')\n    const isTypeOk = this._exts.includes(fileExt)\n    const isSizeOk = file.size / 1024 / 1024 < this.size\n\n    if (!isTypeOk) {\n      this._setMessage('error', `上传文件只支持 ${this._exts.join(' / ')} 格式！`)\n      return false\n    }\n\n    if (!isSizeOk) {\n      this._setMessage('error', `上传文件大小不能超过 ${this.size}MB！`)\n      return false\n    }\n\n    if (this._internalFiles.length + this._pendingUploadCount >= this.max) {\n      this._setMessage('warning', '文件上传超过限制')\n      return false\n    }\n\n    return true\n  }\n\n  private _dispatchUploadSuccess(detail: UploadSuccessDetail) {\n    this.dispatchEvent(new CustomEvent('upload-success', {\n      detail,\n      bubbles: true,\n      composed: true,\n    }))\n    this.dispatchEvent(new CustomEvent('on-success', {\n      detail,\n      bubbles: true,\n      composed: true,\n    }))\n\n    if (typeof (this as any).onSuccess === 'function') {\n      ;(this as any).onSuccess(detail.response, detail.file, detail.files)\n    }\n  }\n\n  private _dispatchFilesChange() {\n    this.dispatchEvent(new CustomEvent('files-change', {\n      detail: { items: this._internalFiles.slice() },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  private _handleSelectedFiles(files: File[]) {\n    this._clearMessage()\n    files.forEach((file) => {\n      if (this._validateFile(file)) {\n        this._uploadFile(file)\n      }\n    })\n  }\n\n  private _handleDrop(event: DragEvent) {\n    event.preventDefault()\n    this._isDragging = false\n    const files = event.dataTransfer?.files\n    if (!files) {\n      return\n    }\n    this._handleSelectedFiles(Array.from(files))\n  }\n\n  private _handleDragOver(event: DragEvent) {\n    event.preventDefault()\n    this._isDragging = true\n  }\n\n  private _handleDragLeave() {\n    this._isDragging = false\n  }\n\n  private _handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement\n    const files = target.files\n    if (!files) {\n      return\n    }\n\n    this._handleSelectedFiles(Array.from(files))\n    target.value = ''\n  }\n\n  private _uploadFile(file: File) {\n    if (!this.action) {\n      this._setMessage('warning', '请先配置上传地址 action')\n      return\n    }\n\n    const formData = new FormData()\n    formData.append(this.name, file)\n\n    if (this.data) {\n      Object.entries(this.data).forEach(([key, value]) => {\n        formData.append(key, value)\n      })\n    }\n\n    const xhr = new XMLHttpRequest()\n    xhr.open('POST', this.action)\n    this._pendingUploadCount += 1\n\n    if (this.headers) {\n      Object.entries(this.headers).forEach(([key, value]) => {\n        xhr.setRequestHeader(key, value)\n      })\n    }\n\n    xhr.onload = () => {\n      this._pendingUploadCount = Math.max(0, this._pendingUploadCount - 1)\n      if (xhr.status >= 200 && xhr.status < 300) {\n        const response = parseJsonResponse(xhr.responseText)\n        const nextItem: UploadItem = { name: file.name, file }\n        this._internalFiles = [...this._internalFiles, nextItem]\n        this._setMessage('info', `${file.name} 上传成功`)\n        this._dispatchFilesChange()\n        this._dispatchUploadSuccess({\n          response,\n          file,\n          files: this._internalFiles.map(item => item.file).filter(Boolean) as File[],\n          items: this._internalFiles.slice(),\n        })\n      }\n      else {\n        this._setMessage('error', '上传失败')\n      }\n    }\n\n    xhr.onerror = () => {\n      this._pendingUploadCount = Math.max(0, this._pendingUploadCount - 1)\n      this._setMessage('error', '上传失败')\n    }\n\n    xhr.send(formData)\n  }\n\n  private _handleRemove(index: number) {\n    this._internalFiles = this._internalFiles.filter((_, fileIndex) => fileIndex !== index)\n    this._dispatchFilesChange()\n  }\n\n  render() {\n    const controlClasses = {\n      control: true,\n      'is-dragging': this._isDragging,\n    }\n\n    return html`\n      <div class=\"upload\" part=\"container\">\n        <div\n          class=${classMap(controlClasses)}\n          part=\"control\"\n          @click=${() => this._input?.click()}\n          @drop=${this._handleDrop}\n          @dragover=${this._handleDragOver}\n          @dragleave=${this._handleDragLeave}\n        >\n          <input\n            type=\"file\"\n            accept=${this.accept}\n            ?multiple=${this.max > 1}\n            style=\"display:none\"\n            @change=${this._handleInputChange}\n          >\n          <div class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"52\" height=\"52\">\n              <path d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z\"/>\n            </svg>\n          </div>\n          <div class=\"text\" part=\"text\">将文件拖到此处，或<em>点击上传</em></div>\n        </div>\n\n        ${this._internalFiles.length\n          ? html`\n              <div class=\"list\" part=\"list\">\n                ${repeat(this._internalFiles, item => `${item.name}-${item.url ?? ''}`, (item, index) => html`\n                  <div class=\"item\" part=\"item\">\n                    <span class=\"item-name\">${item.name}</span>\n                    <button\n                      class=\"remove\"\n                      part=\"remove\"\n                      type=\"button\"\n                      @click=${(event: Event) => {\n                        event.stopPropagation()\n                        this._handleRemove(index)\n                      }}\n                    >\n                      ×\n                    </button>\n                  </div>\n                `)}\n              </div>\n            `\n          : nothing}\n\n        ${this._message\n          ? html`<div class=\"status ${this._messageType}\" part=\"status\">${this._message}</div>`\n          : nothing}\n\n        ${this.notip\n          ? nothing\n          : html`\n              <div class=\"status info\" part=\"tip\">\n                <slot name=\"tip\">\n                  上传文件支持 ${this._exts.join(' / ')} 格式，单个文件大小不超过 ${this.size}MB，且文件数量不超过 ${this.max} 个\n                </slot>\n              </div>\n            `}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qxs-file-upload': QxsFileUpload\n  }\n}\n"],"names":["normalizeExt","value","trim","replace","split","pop","toLowerCase","QxsFileUpload","LitElement","constructor","super","arguments","this","action","name","size","max","accept","files","notip","ext","_internalFiles","_isDragging","_message","_messageType","_pendingUploadCount","connectedCallback","_syncFilesFromProps","updated","changed","has","_exts","length","map","filter","Boolean","_setMessage","type","message","_clearMessage","_validateFile","file","fileExt","isTypeOk","includes","isSizeOk","join","_dispatchUploadSuccess","detail","dispatchEvent","CustomEvent","bubbles","composed","onSuccess","response","_dispatchFilesChange","items","slice","_handleSelectedFiles","forEach","_uploadFile","_handleDrop","event","preventDefault","dataTransfer","Array","from","_handleDragOver","_handleDragLeave","_handleInputChange","target","formData","FormData","append","data","Object","entries","_ref","key","xhr","XMLHttpRequest","open","headers","_ref2","setRequestHeader","onload","Math","status","responseText","JSON","parse","parseJsonResponse","nextItem","item","onerror","send","_handleRemove","index","_","fileIndex","render","controlClasses","control","html","classMap","_input","click","repeat","url","stopPropagation","nothing","styles","css","__decorateClass","property","String","prototype","attribute","Number","state","query","safeCustomElement"],"mappings":"meAmBA,SAASA,EAAaC,GACpB,OAAOA,EAAMC,OAAOC,QAAQ,MAAO,IAAIC,MAAM,KAAKC,OAAOC,eAAiB,EAC5E,CAYO,IAAMC,EAAN,cAA4BC,EAA5BC,WAAAA,GAAAC,SAAAC,WAyGuBC,KAAAC,OAAS,GAGTD,KAAAE,KAAO,OACPF,KAAAG,KAAO,GACWH,KAAAI,IAAM,EACxBJ,KAAAK,OAAS,UACLL,KAAAM,MAAsB,GACzBN,KAAAO,OAAQ,EACLP,KAAAQ,IAAgB,GAEvCR,KAAQS,eAA+B,GACvCT,KAAQU,aAAc,EACtBV,KAAQW,SAAW,GACnBX,KAAQY,aAA6C,OAG9DZ,KAAQa,oBAAsB,CAAA,CAE9BC,iBAAAA,GACEhB,MAAMgB,oBACNd,KAAKe,qBACP,CAEAC,OAAAA,CAAQC,GACFA,EAAQC,IAAI,UACdlB,KAAKe,qBAET,CAEA,SAAYI,GAEV,OADenB,KAAKQ,IAAIY,OAASpB,KAAKQ,IAAMR,KAAKK,OAAOb,MAAM,MAChD6B,IAAIjC,GAAckC,OAAOC,QACzC,CAEQR,mBAAAA,GACNf,KAAKS,eAAiB,IAAIT,KAAKM,MACjC,CAEQkB,WAAAA,CAAYC,EAAoCC,GACtD1B,KAAKY,aAAea,EACpBzB,KAAKW,SAAWe,CAClB,CAEQC,aAAAA,GACN3B,KAAKW,SAAW,GAChBX,KAAKY,aAAe,MACtB,CAEQgB,aAAAA,CAAcC,GACpB,MAAMC,EAAU1C,EAAayC,EAAK3B,KAAKV,MAAM,KAAKC,OAAS,IACrDsC,EAAW/B,KAAKmB,MAAMa,SAASF,GAC/BG,EAAWJ,EAAK1B,KAAO,KAAO,KAAOH,KAAKG,KAEhD,OAAK4B,EAKAE,IAKDjC,KAAKS,eAAeW,OAASpB,KAAKa,qBAAuBb,KAAKI,OAChEJ,KAAKwB,YAAY,UAAW,aACrB,IANPxB,KAAKwB,YAAY,QAAS,cAAcxB,KAAKG,YACtC,IANPH,KAAKwB,YAAY,QAAS,WAAWxB,KAAKmB,MAAMe,KAAK,eAC9C,EAcX,CAEQC,sBAAAA,CAAuBC,GAC7BpC,KAAKqC,cAAc,IAAIC,YAAY,iBAAkB,CACnDF,SACAG,SAAS,EACTC,UAAU,KAEZxC,KAAKqC,cAAc,IAAIC,YAAY,aAAc,CAC/CF,SACAG,SAAS,EACTC,UAAU,KAG2B,mBAA3BxC,KAAayC,WACrBzC,KAAayC,UAAUL,EAAOM,SAAUN,EAAOP,KAAMO,EAAO9B,MAElE,CAEQqC,oBAAAA,GACN3C,KAAKqC,cAAc,IAAIC,YAAY,eAAgB,CACjDF,OAAQ,CAAEQ,MAAO5C,KAAKS,eAAeoC,SACrCN,SAAS,EACTC,UAAU,IAEd,CAEQM,oBAAAA,CAAqBxC,GAC3BN,KAAK2B,gBACLrB,EAAMyC,QAASlB,IACT7B,KAAK4B,cAAcC,IACrB7B,KAAKgD,YAAYnB,IAGvB,CAEQoB,WAAAA,CAAYC,GAClBA,EAAMC,iBACNnD,KAAKU,aAAc,EACnB,MAAMJ,EAAQ4C,EAAME,cAAc9C,MAC7BA,GAGLN,KAAK8C,qBAAqBO,MAAMC,KAAKhD,GACvC,CAEQiD,eAAAA,CAAgBL,GACtBA,EAAMC,iBACNnD,KAAKU,aAAc,CACrB,CAEQ8C,gBAAAA,GACNxD,KAAKU,aAAc,CACrB,CAEQ+C,kBAAAA,CAAmBP,GACzB,MAAMQ,EAASR,EAAMQ,OACfpD,EAAQoD,EAAOpD,MAChBA,IAILN,KAAK8C,qBAAqBO,MAAMC,KAAKhD,IACrCoD,EAAOrE,MAAQ,GACjB,CAEQ2D,WAAAA,CAAYnB,GAClB,IAAK7B,KAAKC,OAER,YADAD,KAAKwB,YAAY,UAAW,mBAI9B,MAAMmC,EAAW,IAAIC,SACrBD,EAASE,OAAO7D,KAAKE,KAAM2B,GAEvB7B,KAAK8D,MACPC,OAAOC,QAAQhE,KAAK8D,MAAMf,QAAQkB,IAAkB,IAAhBC,EAAK7E,GAAK4E,EAC5CN,EAASE,OAAOK,EAAK7E,KAIzB,MAAM8E,EAAM,IAAIC,eAChBD,EAAIE,KAAK,OAAQrE,KAAKC,QACtBD,KAAKa,qBAAuB,EAExBb,KAAKsE,SACPP,OAAOC,QAAQhE,KAAKsE,SAASvB,QAAQwB,IAAkB,IAAhBL,EAAK7E,GAAKkF,EAC/CJ,EAAIK,iBAAiBN,EAAK7E,KAI9B8E,EAAIM,OAAS,KAEX,GADAzE,KAAKa,oBAAsB6D,KAAKtE,IAAI,EAAGJ,KAAKa,oBAAsB,GAC9DsD,EAAIQ,QAAU,KAAOR,EAAIQ,OAAS,IAAK,CACzC,MAAMjC,EAvRd,SAA2BkC,GACzB,IACE,OAAOC,KAAKC,MAAMF,EACpB,CAAA,MAEE,OAAOA,CACT,CACF,CAgRyBG,CAAkBZ,EAAIS,cACjCI,EAAuB,CAAE9E,KAAM2B,EAAK3B,KAAM2B,QAChD7B,KAAKS,eAAiB,IAAIT,KAAKS,eAAgBuE,GAC/ChF,KAAKwB,YAAY,OAAQ,GAAGK,EAAK3B,aACjCF,KAAK2C,uBACL3C,KAAKmC,uBAAuB,CAC1BO,WACAb,OACAvB,MAAON,KAAKS,eAAeY,OAAY4D,EAAKpD,MAAMP,OAAOC,SACzDqB,MAAO5C,KAAKS,eAAeoC,SAE/B,MAEE7C,KAAKwB,YAAY,QAAS,SAI9B2C,EAAIe,QAAU,KACZlF,KAAKa,oBAAsB6D,KAAKtE,IAAI,EAAGJ,KAAKa,oBAAsB,GAClEb,KAAKwB,YAAY,QAAS,SAG5B2C,EAAIgB,KAAKxB,EACX,CAEQyB,aAAAA,CAAcC,GACpBrF,KAAKS,eAAiBT,KAAKS,eAAea,OAAO,CAACgE,EAAGC,IAAcA,IAAcF,GACjFrF,KAAK2C,sBACP,CAEA6C,MAAAA,GACE,MAAMC,EAAiB,CACrBC,SAAS,EACT,cAAe1F,KAAKU,aAGtB,OAAOiF,CAAA;;;kBAGOC,EAASH;;mBAER,IAAMzF,KAAK6F,QAAQC;kBACpB9F,KAAKiD;sBACDjD,KAAKuD;uBACJvD,KAAKwD;;;;qBAIPxD,KAAKK;wBACFL,KAAKI,IAAM;;sBAEbJ,KAAKyD;;;;;;;;;;UAUjBzD,KAAKS,eAAeW,OAClBuE,CAAA;;kBAEMI,EAAO/F,KAAKS,eAAgBwE,GAAQ,GAAGA,EAAK/E,QAAQ+E,EAAKe,KAAO,KAAM,CAACf,EAAMI,IAAUM,CAAA;;8CAE3DV,EAAK/E;;;;;+BAKnBgD,IACRA,EAAM+C,kBACNjG,KAAKoF,cAAcC;;;;;;;cAS/Ba;;UAEFlG,KAAKW,SACHgF,CAAA,sBAA0B3F,KAAKY,+BAA+BZ,KAAKW,iBACnEuF;;UAEFlG,KAAKO,MACH2F,EACAP,CAAA;;;2BAGe3F,KAAKmB,MAAMe,KAAK,uBAAuBlC,KAAKG,mBAAmBH,KAAKI;;;;;KAM7F,GAhXWT,EACJwG,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwGYC,EAAA,CAA3BC,EAAS,CAAE7E,KAAM8E,UAzGP5G,EAyGiB6G,UAAA,SAAA,GACIH,EAAA,CAA/BC,EAAS,CAAEG,WAAW,KA1GZ9G,EA0GqB6G,UAAA,UAAA,GACAH,EAAA,CAA/BC,EAAS,CAAEG,WAAW,KA3GZ9G,EA2GqB6G,UAAA,OAAA,GACJH,EAAA,CAA3BC,EAAS,CAAE7E,KAAM8E,UA5GP5G,EA4GiB6G,UAAA,OAAA,GACAH,EAAA,CAA3BC,EAAS,CAAE7E,KAAMiF,UA7GP/G,EA6GiB6G,UAAA,OAAA,GACkBH,EAAA,CAA7CC,EAAS,CAAE7E,KAAMiF,OAAQD,UAAW,SA9G1B9G,EA8GmC6G,UAAA,MAAA,GAClBH,EAAA,CAA3BC,EAAS,CAAE7E,KAAM8E,UA/GP5G,EA+GiB6G,UAAA,SAAA,GACIH,EAAA,CAA/BC,EAAS,CAAEG,WAAW,KAhHZ9G,EAgHqB6G,UAAA,QAAA,GACHH,EAAA,CAA5BC,EAAS,CAAE7E,KAAMF,WAjHP5B,EAiHkB6G,UAAA,QAAA,GACGH,EAAA,CAA/BC,EAAS,CAAEG,WAAW,KAlHZ9G,EAkHqB6G,UAAA,MAAA,GAEfH,EAAA,CAAhBM,KApHUhH,EAoHM6G,UAAA,iBAAA,GACAH,EAAA,CAAhBM,KArHUhH,EAqHM6G,UAAA,cAAA,GACAH,EAAA,CAAhBM,KAtHUhH,EAsHM6G,UAAA,WAAA,GACAH,EAAA,CAAhBM,KAvHUhH,EAuHM6G,UAAA,eAAA,GAEoBH,EAAA,CAApCO,EAAM,uBAzHIjH,EAyH0B6G,UAAA,SAAA,GAzH1B7G,EAAN0G,EAAA,CADNQ,EAAkB,oBACNlH"}

package/es/fixed-action-bar.mjs

@@ -0,0 +1,39 @@
+import{css as t,LitElement as e,html as s}from"lit";import{property as i,state as r,query as o}from"lit/decorators.js";import{styleMap as a}from"lit/directives/style-map.js";import{safeCustomElement as n}from"./base/define.mjs";var h=Object.defineProperty,c=Object.getOwnPropertyDescriptor,l=(t,e,s,i)=>{for(var r,o=i>1?void 0:i?c(e,s):e,a=t.length-1;a>=0;a--)(r=t[a])&&(o=(i?r(e,s,o):r(o))||o);return i&&o&&h(e,s,o),o};let d=class extends e{constructor(){super(...arguments),this.padding=8,this.className="",this._barHeight=0,this._barLeft=0,this._barWidth=0,this._isBottom=!1,this._actionbarObserver=null,this._hostObserver=null,this._resizeHandler=()=>{this._syncGeometry(),this._syncScrollState()},this._scrollFrame=0,this._handleScroll=()=>{this._scrollFrame&&cancelAnimationFrame(this._scrollFrame),this._scrollFrame=requestAnimationFrame(()=>{this._scrollFrame=0,this._syncScrollState()})}}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._resizeHandler,{passive:!0}),window.addEventListener("scroll",this._handleScroll,{passive:!0})}firstUpdated(){this._initObservers(),queueMicrotask(()=>{this.isConnected&&(this._syncGeometry(),this._syncScrollState())})}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._resizeHandler),window.removeEventListener("scroll",this._handleScroll),this._actionbarObserver?.disconnect(),this._hostObserver?.disconnect(),this._scrollFrame&&(cancelAnimationFrame(this._scrollFrame),this._scrollFrame=0)}_initObservers(){if("undefined"==typeof ResizeObserver)return;const t=this._getLayoutAnchor();this._actionbarObserver=new ResizeObserver(()=>{this._syncGeometry()}),this._hostObserver=new ResizeObserver(()=>{this._syncGeometry()}),this._actionbar&&this._actionbarObserver.observe(this._actionbar),this._hostObserver.observe(this),t!==this&&this._hostObserver.observe(t)}_getLayoutAnchor(){return this.parentElement??this}_syncGeometry(){const t=this._getLayoutAnchor().getBoundingClientRect();this._barWidth=Math.max(Math.round(t.width),0),this._barLeft=Math.round(t.left);const e=Math.ceil(this._actionbar?.getBoundingClientRect().height||0);this._barHeight=Math.max(e,0)}_syncScrollState(){const t=document.documentElement;this._isBottom=Math.ceil(window.scrollY+t.clientHeight)>=t.scrollHeight}_bottomPadding(){return"undefined"!=typeof navigator&&/Android/i.test(navigator.userAgent)?Math.max(this.padding,20):this.padding}render(){const t=["actionbar",this._isBottom?"":"is-shadow",this.className].filter(Boolean).join(" ");return s`
+      <div
+        part="placeholder"
+        class="placeholder"
+        style=${a({height:`${this._barHeight}px`})}
+      >
+        <div
+          part="actionbar"
+          class=${t}
+          style=${a({width:`${this._barWidth}px`,left:`${this._barLeft}px`,padding:`${this.padding}px`,paddingBottom:`calc(env(safe-area-inset-bottom) + ${this._bottomPadding()}px)`})}
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `}};d.styles=t`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .placeholder {
+      width: 100%;
+    }
+
+    .actionbar {
+      position: fixed;
+      bottom: 0;
+      z-index: 10;
+      box-sizing: border-box;
+      text-align: center;
+      background-color: var(--qxs-bg-color, #fff);
+      transition: box-shadow 0.3s ease;
+    }
+
+    .actionbar.is-shadow {
+      box-shadow: 0 0 1px 0 var(--qxs-border-color, #f3f3f2);
+    }
+  `,l([i({type:Number})],d.prototype,"padding",2),l([i({type:String,attribute:"class-name"})],d.prototype,"className",2),l([r()],d.prototype,"_barHeight",2),l([r()],d.prototype,"_barLeft",2),l([r()],d.prototype,"_barWidth",2),l([r()],d.prototype,"_isBottom",2),l([o(".actionbar")],d.prototype,"_actionbar",2),d=l([n("qxs-fixed-action-bar")],d);export{d as QxsFixedActionBar};
+//# sourceMappingURL=fixed-action-bar.mjs.map

package/es/fixed-action-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixed-action-bar.mjs","sources":["../../../packages/components/src/fixed-action-bar.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { safeCustomElement } from './base/define'\n\nfunction isAndroidDevice() {\n  if (typeof navigator === 'undefined') {\n    return false\n  }\n\n  return /Android/i.test(navigator.userAgent)\n}\n\n@safeCustomElement('qxs-fixed-action-bar')\nexport class QxsFixedActionBar extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n    }\n\n    .placeholder {\n      width: 100%;\n    }\n\n    .actionbar {\n      position: fixed;\n      bottom: 0;\n      z-index: 10;\n      box-sizing: border-box;\n      text-align: center;\n      background-color: var(--qxs-bg-color, #fff);\n      transition: box-shadow 0.3s ease;\n    }\n\n    .actionbar.is-shadow {\n      box-shadow: 0 0 1px 0 var(--qxs-border-color, #f3f3f2);\n    }\n  `\n\n  @property({ type: Number }) padding = 8\n  @property({ type: String, attribute: 'class-name' }) className = ''\n\n  @state() private _barHeight = 0\n  @state() private _barLeft = 0\n  @state() private _barWidth = 0\n  @state() private _isBottom = false\n\n  @query('.actionbar') private _actionbar?: HTMLDivElement\n\n  private _actionbarObserver: ResizeObserver | null = null\n  private _hostObserver: ResizeObserver | null = null\n  private _resizeHandler = () => {\n    this._syncGeometry()\n    this._syncScrollState()\n  }\n  private _scrollFrame = 0\n\n  connectedCallback() {\n    super.connectedCallback()\n    window.addEventListener('resize', this._resizeHandler, { passive: true })\n    window.addEventListener('scroll', this._handleScroll, { passive: true })\n  }\n\n  firstUpdated() {\n    this._initObservers()\n    queueMicrotask(() => {\n      if (!this.isConnected) {\n        return\n      }\n\n      this._syncGeometry()\n      this._syncScrollState()\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    window.removeEventListener('resize', this._resizeHandler)\n    window.removeEventListener('scroll', this._handleScroll)\n    this._actionbarObserver?.disconnect()\n    this._hostObserver?.disconnect()\n\n    if (this._scrollFrame) {\n      cancelAnimationFrame(this._scrollFrame)\n      this._scrollFrame = 0\n    }\n  }\n\n  private _handleScroll = () => {\n    if (this._scrollFrame) {\n      cancelAnimationFrame(this._scrollFrame)\n    }\n\n    this._scrollFrame = requestAnimationFrame(() => {\n      this._scrollFrame = 0\n      this._syncScrollState()\n    })\n  }\n\n  private _initObservers() {\n    if (typeof ResizeObserver === 'undefined') {\n      return\n    }\n\n    const layoutAnchor = this._getLayoutAnchor()\n\n    this._actionbarObserver = new ResizeObserver(() => {\n      this._syncGeometry()\n    })\n    this._hostObserver = new ResizeObserver(() => {\n      this._syncGeometry()\n    })\n\n    if (this._actionbar) {\n      this._actionbarObserver.observe(this._actionbar)\n    }\n    this._hostObserver.observe(this)\n    if (layoutAnchor !== this) {\n      this._hostObserver.observe(layoutAnchor)\n    }\n  }\n\n  private _getLayoutAnchor() {\n    return this.parentElement ?? this\n  }\n\n  private _syncGeometry() {\n    const hostRect = this._getLayoutAnchor().getBoundingClientRect()\n    this._barWidth = Math.max(Math.round(hostRect.width), 0)\n    this._barLeft = Math.round(hostRect.left)\n\n    const barHeight = Math.ceil(this._actionbar?.getBoundingClientRect().height || 0)\n    this._barHeight = Math.max(barHeight, 0)\n  }\n\n  private _syncScrollState() {\n    const doc = document.documentElement\n    this._isBottom = Math.ceil(window.scrollY + doc.clientHeight) >= doc.scrollHeight\n  }\n\n  private _bottomPadding() {\n    return isAndroidDevice()\n      ? Math.max(this.padding, 20)\n      : this.padding\n  }\n\n  render() {\n    const actionbarClassName = ['actionbar', !this._isBottom ? 'is-shadow' : '', this.className]\n      .filter(Boolean)\n      .join(' ')\n\n    return html`\n      <div\n        part=\"placeholder\"\n        class=\"placeholder\"\n        style=${styleMap({ height: `${this._barHeight}px` })}\n      >\n        <div\n          part=\"actionbar\"\n          class=${actionbarClassName}\n          style=${styleMap({\n            width: `${this._barWidth}px`,\n            left: `${this._barLeft}px`,\n            padding: `${this.padding}px`,\n            paddingBottom: `calc(env(safe-area-inset-bottom) + ${this._bottomPadding()}px)`,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["QxsFixedActionBar","LitElement","constructor","super","arguments","this","padding","className","_barHeight","_barLeft","_barWidth","_isBottom","_actionbarObserver","_hostObserver","_resizeHandler","_syncGeometry","_syncScrollState","_scrollFrame","_handleScroll","cancelAnimationFrame","requestAnimationFrame","connectedCallback","window","addEventListener","passive","firstUpdated","_initObservers","queueMicrotask","isConnected","disconnectedCallback","removeEventListener","disconnect","ResizeObserver","layoutAnchor","_getLayoutAnchor","_actionbar","observe","parentElement","hostRect","getBoundingClientRect","Math","max","round","width","left","barHeight","ceil","height","doc","document","documentElement","scrollY","clientHeight","scrollHeight","_bottomPadding","navigator","test","userAgent","render","actionbarClassName","filter","Boolean","join","html","styleMap","paddingBottom","styles","css","__decorateClass","property","type","Number","prototype","String","attribute","state","query","safeCustomElement"],"mappings":"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"}

package/es/icon.mjs

@@ -0,0 +1,20 @@
+import{LitElement as t,nothing as e,html as i}from"lit";import{property as r,state as s}from"lit/decorators.js";import{styleMap as o}from"lit/directives/style-map.js";import{safeCustomElement as n}from"./base/define.mjs";var a=Object.defineProperty,l=Object.getOwnPropertyDescriptor,c=(t,e,i,r)=>{for(var s,o=r>1?void 0:r?l(e,i):e,n=t.length-1;n>=0;n--)(s=t[n])&&(o=(r?s(e,i,o):s(o))||o);return r&&o&&a(e,i,o),o};let h=class extends t{constructor(){super(...arguments),this.icon="",this.flip="",this.rotate=0,this.color="",this.localIconPrefix="icon-",this.fallback="",this.loading="",this._imageLoading=!1,this._imageError=!1}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this._resetImageState()}willUpdate(t){(t.has("icon")||t.has("color")&&"iconify"===this._outputType())&&this._resetImageState()}_outputType(){if("string"!=typeof this.icon)return"empty";const t=this.icon.trim();if(!t)return"empty";return/^https?:\/\//.test(t)||(/^\.{1,2}\//.test(e=t)||e.startsWith("/")||e.includes("/"))?"img":/^i-[^:]+:[^:]+/.test(t)?"unocss":t.startsWith("i-")&&!t.includes(":")?"css":t.includes(":")&&!t.startsWith("i-")?"iconify":/^[\w-]+$/.test(t)&&!t.startsWith("i-")?"svg":"css";var e}_iconName(){return"string"==typeof this.icon?this.icon.trim():""}_resetImageState(){const t=this._outputType();if("img"===t||"iconify"===t)return this._imageLoading=!0,void(this._imageError=!1);this._imageLoading=!1,this._imageError=!1}_formatSize(t){return null==t||""===t?"":"number"==typeof t||/^\d+(?:\.\d+)?$/.test(t)?`${t}px`:t}_transformStyle(){const t=[];switch(this.flip){case"horizontal":t.push("rotateY(180deg)");break;case"vertical":t.push("rotateX(180deg)");break;case"both":t.push("rotateX(180deg)","rotateY(180deg)")}return this.rotate&&t.push(`rotate(${this.rotate%360}deg)`),t.join(" ")}_containerStyle(){const t=this._formatSize(this.size)||"1em",e=this._transformStyle();return{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",width:t,height:t,fontSize:t,lineHeight:"1",color:this.color||"currentColor",verticalAlign:"-2px",transform:e||void 0,transformOrigin:"center",fill:"currentColor"}}_glyphStyle(){return{display:"inline-flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%",lineHeight:"1",color:"inherit",fontSize:"inherit",flexShrink:"0"}}_imageStyle(){return{display:!(arguments.length>0&&void 0!==arguments[0])||arguments[0]?"block":"none",width:"100%",height:"100%",objectFit:"contain",flexShrink:"0"}}_imageSource(){if("iconify"===this._outputType()){const t=new URL(`https://api.iconify.design/${this._iconName()}.svg`);return this.color&&t.searchParams.set("color",this.color),t.toString()}return this._iconName()}_renderClassGlyph(t){const r=t.split(/\s+/).filter(Boolean).join(" ");return r?i`<i class=${r} style=${o(this._glyphStyle())} aria-hidden="true"></i>`:e}_renderSvgSprite(){const t=this._iconName();return t?i`
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 1024 1024"
+        style=${o({display:"block",width:"100%",height:"100%",fill:"currentColor",flexShrink:"0"})}
+      >
+        <use href=${`#${this.localIconPrefix}${t}`}></use>
+      </svg>
+    `:e}_renderImage(){const t=this._imageSource();if(!t)return e;const r=this._imageError&&!!this.fallback,s=!this._imageError&&this._imageLoading&&!!this.loading,n=!this._imageError&&!s;return i`
+      ${s?this._renderClassGlyph(this.loading):e}
+      ${r?this._renderClassGlyph(this.fallback):e}
+      <img
+        src=${t}
+        alt=""
+        style=${o(this._imageStyle(n))}
+        @load=${()=>{this._imageLoading=!1,this._imageError=!1}}
+        @error=${()=>{this._imageLoading=!1,this._imageError=!0}}
+      />
+    `}render(){const t=this._outputType();if("empty"===t)return e;let r=e;switch(t){case"iconify":case"img":r=this._renderImage();break;case"unocss":case"css":r=this._renderClassGlyph(this._iconName());break;case"svg":r=this._renderSvgSprite();break;default:r=e}return i`<span class="qxs-icon-wc" style=${o(this._containerStyle())}>${r}</span>`}};c([r({attribute:!1})],h.prototype,"icon",2),c([r({type:String})],h.prototype,"flip",2),c([r({type:Number})],h.prototype,"rotate",2),c([r({type:String})],h.prototype,"color",2),c([r({attribute:!1})],h.prototype,"size",2),c([r({type:String,attribute:"local-icon-prefix"})],h.prototype,"localIconPrefix",2),c([r({type:String})],h.prototype,"fallback",2),c([r({type:String})],h.prototype,"loading",2),c([s()],h.prototype,"_imageLoading",2),c([s()],h.prototype,"_imageError",2),h=c([n("qxs-icon")],h);export{h as QxsIcon};
+//# sourceMappingURL=icon.mjs.map

package/es/icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.mjs","sources":["../../../packages/components/src/icon.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { safeCustomElement } from './base/define'\n\ntype IconOutputType = 'iconify' | 'unocss' | 'css' | 'img' | 'svg' | 'empty'\n\n@safeCustomElement('qxs-icon')\nexport class QxsIcon extends LitElement {\n  @property({ attribute: false }) icon = ''\n  @property({ type: String }) flip: 'horizontal' | 'vertical' | 'both' | '' = ''\n  @property({ type: Number }) rotate = 0\n  @property({ type: String }) color = ''\n  @property({ attribute: false }) size: string | number | undefined\n  @property({ type: String, attribute: 'local-icon-prefix' }) localIconPrefix = 'icon-'\n  @property({ type: String }) fallback = ''\n  @property({ type: String }) loading = ''\n\n  @state() private _imageLoading = false\n  @state() private _imageError = false\n\n  createRenderRoot() {\n    return this\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this._resetImageState()\n  }\n\n  protected willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('icon') || (changed.has('color') && this._outputType() === 'iconify')) {\n      this._resetImageState()\n    }\n  }\n\n  private _outputType(): IconOutputType {\n    if (typeof this.icon !== 'string') {\n      return 'empty'\n    }\n\n    const icon = this.icon.trim()\n    if (!icon) {\n      return 'empty'\n    }\n\n    const hasPathFeatures = (value: string) => /^\\.{1,2}\\//.test(value) || value.startsWith('/') || value.includes('/')\n    if (/^https?:\\/\\//.test(icon) || hasPathFeatures(icon)) {\n      return 'img'\n    }\n\n    if (/^i-[^:]+:[^:]+/.test(icon)) {\n      return 'unocss'\n    }\n\n    if (icon.startsWith('i-') && !icon.includes(':')) {\n      return 'css'\n    }\n\n    if (icon.includes(':') && !icon.startsWith('i-')) {\n      return 'iconify'\n    }\n\n    if (/^[\\w-]+$/.test(icon) && !icon.startsWith('i-')) {\n      return 'svg'\n    }\n\n    return 'css'\n  }\n\n  private _iconName() {\n    return typeof this.icon === 'string' ? this.icon.trim() : ''\n  }\n\n  private _resetImageState() {\n    const type = this._outputType()\n    if (type === 'img' || type === 'iconify') {\n      this._imageLoading = true\n      this._imageError = false\n      return\n    }\n\n    this._imageLoading = false\n    this._imageError = false\n  }\n\n  private _formatSize(size: string | number | undefined) {\n    if (size == null || size === '') {\n      return ''\n    }\n\n    if (typeof size === 'number') {\n      return `${size}px`\n    }\n\n    if (/^\\d+(?:\\.\\d+)?$/.test(size)) {\n      return `${size}px`\n    }\n\n    return size\n  }\n\n  private _transformStyle() {\n    const transforms: string[] = []\n\n    switch (this.flip) {\n      case 'horizontal':\n        transforms.push('rotateY(180deg)')\n        break\n      case 'vertical':\n        transforms.push('rotateX(180deg)')\n        break\n      case 'both':\n        transforms.push('rotateX(180deg)', 'rotateY(180deg)')\n        break\n    }\n\n    if (this.rotate) {\n      transforms.push(`rotate(${this.rotate % 360}deg)`)\n    }\n\n    return transforms.join(' ')\n  }\n\n  private _containerStyle() {\n    const formattedSize = this._formatSize(this.size) || '1em'\n    const transform = this._transformStyle()\n\n    return {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: formattedSize,\n      height: formattedSize,\n      fontSize: formattedSize,\n      lineHeight: '1',\n      color: this.color || 'currentColor',\n      verticalAlign: '-2px',\n      transform: transform || undefined,\n      transformOrigin: 'center',\n      fill: 'currentColor',\n    }\n  }\n\n  private _glyphStyle() {\n    return {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '100%',\n      height: '100%',\n      lineHeight: '1',\n      color: 'inherit',\n      fontSize: 'inherit',\n      flexShrink: '0',\n    }\n  }\n\n  private _imageStyle(visible = true) {\n    return {\n      display: visible ? 'block' : 'none',\n      width: '100%',\n      height: '100%',\n      objectFit: 'contain',\n      flexShrink: '0',\n    }\n  }\n\n  private _imageSource() {\n    if (this._outputType() === 'iconify') {\n      const url = new URL(`https://api.iconify.design/${this._iconName()}.svg`)\n      if (this.color) {\n        url.searchParams.set('color', this.color)\n      }\n      return url.toString()\n    }\n    return this._iconName()\n  }\n\n  private _renderClassGlyph(iconClass: string) {\n    const classes = iconClass.split(/\\s+/).filter(Boolean).join(' ')\n    if (!classes) {\n      return nothing\n    }\n\n    return html`<i class=${classes} style=${styleMap(this._glyphStyle())} aria-hidden=\"true\"></i>`\n  }\n\n  private _renderSvgSprite() {\n    const iconName = this._iconName()\n    if (!iconName) {\n      return nothing\n    }\n\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 1024 1024\"\n        style=${styleMap({\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          fill: 'currentColor',\n          flexShrink: '0',\n        })}\n      >\n        <use href=${`#${this.localIconPrefix}${iconName}`}></use>\n      </svg>\n    `\n  }\n\n  private _renderImage() {\n    const source = this._imageSource()\n    if (!source) {\n      return nothing\n    }\n\n    const showFallback = this._imageError && !!this.fallback\n    const showLoading = !this._imageError && this._imageLoading && !!this.loading\n    const showImage = !this._imageError && !showLoading\n\n    return html`\n      ${showLoading ? this._renderClassGlyph(this.loading) : nothing}\n      ${showFallback ? this._renderClassGlyph(this.fallback) : nothing}\n      <img\n        src=${source}\n        alt=\"\"\n        style=${styleMap(this._imageStyle(showImage))}\n        @load=${() => {\n          this._imageLoading = false\n          this._imageError = false\n        }}\n        @error=${() => {\n          this._imageLoading = false\n          this._imageError = true\n        }}\n      />\n    `\n  }\n\n  render() {\n    const type = this._outputType()\n    if (type === 'empty') {\n      return nothing\n    }\n\n    let content: ReturnType<typeof html> | typeof nothing = nothing\n\n    switch (type) {\n      case 'iconify':\n      case 'img':\n        content = this._renderImage()\n        break\n      case 'unocss':\n      case 'css':\n        content = this._renderClassGlyph(this._iconName())\n        break\n      case 'svg':\n        content = this._renderSvgSprite()\n        break\n      default:\n        content = nothing\n    }\n\n    return html`<span class=\"qxs-icon-wc\" style=${styleMap(this._containerStyle())}>${content}</span>`\n  }\n}\n\nexport function register() {\n  // auto-registered via @safeCustomElement\n}\n"],"names":["QxsIcon","LitElement","constructor","super","arguments","this","icon","flip","rotate","color","localIconPrefix","fallback","loading","_imageLoading","_imageError","createRenderRoot","connectedCallback","_resetImageState","willUpdate","changed","has","_outputType","trim","test","value","startsWith","includes","_iconName","type","_formatSize","size","_transformStyle","transforms","push","join","_containerStyle","formattedSize","transform","position","display","alignItems","justifyContent","width","height","fontSize","lineHeight","verticalAlign","transformOrigin","fill","_glyphStyle","flexShrink","_imageStyle","objectFit","_imageSource","url","URL","searchParams","set","toString","_renderClassGlyph","iconClass","classes","split","filter","Boolean","html","styleMap","nothing","_renderSvgSprite","iconName","_renderImage","source","showFallback","showLoading","showImage","render","content","__decorateClass","property","attribute","prototype","String","Number","state","safeCustomElement"],"mappings":"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"}