{"version":3,"file":"sortable.cjs","sources":["../../../../packages/components-wc/src/subject/sortable.ts"],"sourcesContent":["import type { SubjectLikeItem } from './pagination'\nimport { css, html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\nimport { safeCustomElement } from '../base/define'\nimport { moveSubjectItem, reorderSubjects } from './sort-controller'\nimport { SubjectTypeLabel } from './types'\n\n@safeCustomElement('qxs-subject-sortable')\nexport class QxsSubjectSortable extends LitElement {\n static styles = css`\n :host { display: block; font-family: inherit; font-size: 13px; }\n *, ::before, ::after { box-sizing: border-box; }\n .sort-list { display: flex; flex-direction: column; gap: 10px; }\n .sort-item {\n display: flex; align-items: center; gap: 12px;\n padding: 12px 14px; background: #fff; border: 1px solid #e4e7ed; border-radius: 10px;\n cursor: grab; transition: all .2s;\n }\n .sort-item:hover { border-color: #bfd1ff; background: #f8fbff; }\n .sort-item.sort-ghost { opacity: .5; background: #ecf5ff; }\n .sort-item.sort-chosen { border-color: #3D61E3; box-shadow: 0 8px 20px rgba(61,97,227,.12); }\n .handle { color: #909399; font-size: 16px; user-select: none; }\n .content { flex: 1; min-width: 0; }\n .title { font-size: 13px; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .meta { margin-top: 4px; font-size: 12px; color: #909399; }\n `\n\n @property({ type: Array }) items: SubjectLikeItem[] = []\n @property({ type: Object, attribute: 'label-renderer' }) 'label-renderer'?: (item: SubjectLikeItem, index: number) => string\n\n @state() private _items: SubjectLikeItem[] = []\n private _sortable: Sortable | null = null\n\n willUpdate(changed: Map) {\n if (changed.has('items')) {\n this._items = Array.isArray(this.items) ? this.items.map(item => ({ ...item })) : []\n }\n }\n\n firstUpdated() {\n this._initSortable()\n }\n\n updated(changed: Map) {\n if (changed.has('_items')) {\n this._sortable?.destroy()\n this._sortable = null\n this.updateComplete.then(() => this._initSortable())\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this._sortable?.destroy()\n this._sortable = null\n }\n\n reorderByIds(orderedIds: string[]) {\n this._items = reorderSubjects(this._items, orderedIds)\n this._emitSortChange()\n }\n\n private _initSortable() {\n const list = this.renderRoot.querySelector('.sort-list')\n if (!list) {\n return\n }\n this._sortable = Sortable.create(list, {\n handle: '.handle',\n animation: 180,\n ghostClass: 'sort-ghost',\n chosenClass: 'sort-chosen',\n onEnd: (event) => {\n const { oldIndex, newIndex } = event\n if (oldIndex == null || newIndex == null || oldIndex === newIndex) {\n return\n }\n this._items = moveSubjectItem(this._items, oldIndex, newIndex)\n this._emitSortChange(oldIndex, newIndex)\n },\n })\n }\n\n private _emitSortChange(oldIndex?: number, newIndex?: number) {\n this.dispatchEvent(new CustomEvent('sort-change', {\n bubbles: true,\n composed: true,\n detail: {\n items: this._items.map(item => ({ ...item })),\n newIndex,\n oldIndex,\n orderedIds: this._items.map(item => String(item.customId || '')).filter(Boolean),\n },\n }))\n }\n\n private _label(item: SubjectLikeItem, index: number) {\n if (typeof this['label-renderer'] === 'function') {\n return this['label-renderer'](item, index)\n }\n return item.title || `未命名${SubjectTypeLabel[item.answerType] || '题目'}`\n }\n\n render() {\n return html`\n
\n ${this._items.map((item, index) => html`\n
\n ⋮⋮\n
\n
${this._label(item, index)}
\n
${SubjectTypeLabel[item.answerType] || item.answerType}
\n
\n
\n `)}\n
\n `\n }\n}\n\nexport function register() {}\n"],"names":["QxsSubjectSortable","LitElement","constructor","super","arguments","this","items","_items","_sortable","willUpdate","changed","has","Array","isArray","map","item","firstUpdated","_initSortable","updated","destroy","updateComplete","then","disconnectedCallback","reorderByIds","orderedIds","reorderSubjects","_emitSortChange","list","renderRoot","querySelector","Sortable","create","handle","animation","ghostClass","chosenClass","onEnd","event","oldIndex","newIndex","moveSubjectItem","dispatchEvent","CustomEvent","bubbles","composed","detail","String","customId","filter","Boolean","_label","index","title","SubjectTypeLabel","answerType","render","html","styles","css","__decorateClass","property","type","prototype","Object","attribute","state","safeCustomElement"],"mappings":"iXASaA,QAAAA,mBAAN,cAAiCC,EAAAA,WAAjCC,WAAAA,GAAAC,SAAAC,WAmBsBC,KAAAC,MAA2B,GAG7CD,KAAQE,OAA4B,GAC7CF,KAAQG,UAA6B,IAAA,CAErCC,UAAAA,CAAWC,GACLA,EAAQC,IAAI,WACdN,KAAKE,OAASK,MAAMC,QAAQR,KAAKC,OAASD,KAAKC,MAAMQ,YAAkBC,KAAW,GAEtF,CAEAC,YAAAA,GACEX,KAAKY,eACP,CAEAC,OAAAA,CAAQR,GACFA,EAAQC,IAAI,YACdN,KAAKG,WAAWW,UAChBd,KAAKG,UAAY,KACjBH,KAAKe,eAAeC,KAAK,IAAMhB,KAAKY,iBAExC,CAEAK,oBAAAA,GACEnB,MAAMmB,uBACNjB,KAAKG,WAAWW,UAChBd,KAAKG,UAAY,IACnB,CAEAe,YAAAA,CAAaC,GACXnB,KAAKE,OAASkB,EAAAA,gBAAgBpB,KAAKE,OAAQiB,GAC3CnB,KAAKqB,iBACP,CAEQT,aAAAA,GACN,MAAMU,EAAOtB,KAAKuB,WAAWC,cAA2B,cACnDF,IAGLtB,KAAKG,UAAYsB,EAASC,OAAOJ,EAAM,CACrCK,OAAQ,UACRC,UAAW,IACXC,WAAY,aACZC,YAAa,cACbC,MAAQC,IACN,MAAMC,SAAEA,EAAAC,SAAUA,GAAaF,EACf,MAAZC,GAAgC,MAAZC,GAAoBD,IAAaC,IAGzDlC,KAAKE,OAASiC,EAAAA,gBAAgBnC,KAAKE,OAAQ+B,EAAUC,GACrDlC,KAAKqB,gBAAgBY,EAAUC,OAGrC,CAEQb,eAAAA,CAAgBY,EAAmBC,GACzClC,KAAKoC,cAAc,IAAIC,YAAY,cAAe,CAChDC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNvC,MAAOD,KAAKE,OAAOO,YAAkBC,KACrCwB,WACAD,WACAd,WAAYnB,KAAKE,OAAOO,IAAIC,GAAQ+B,OAAO/B,EAAKgC,UAAY,KAAKC,OAAOC,YAG9E,CAEQC,MAAAA,CAAOnC,EAAuBoC,GACpC,MAAsC,mBAA3B9C,KAAK,kBACPA,KAAK,kBAAkBU,EAAMoC,GAE/BpC,EAAKqC,OAAS,MAAMC,EAAAA,iBAAiBtC,EAAKuC,aAAe,MAClE,CAEAC,MAAAA,GACE,OAAOC,EAAAA,IAAA;;UAEDnD,KAAKE,OAAOO,IAAI,CAACC,EAAMoC,IAAUK,EAAAA,IAAA;2CACAzC,EAAKgC,UAAY;;;mCAGzB1C,KAAK6C,OAAOnC,EAAMoC;kCACnBE,EAAAA,iBAAiBtC,EAAKuC,aAAevC,EAAKuC;;;;;KAM1E,GA7GWtD,QAAAA,mBACJyD,OAASC,EAAAA,GAAA;;;;;;;;;;;;;;;;IAkBWC,EAAA,CAA1BC,EAAAA,SAAS,CAAEC,KAAMjD,SAnBPZ,QAAAA,mBAmBgB8D,UAAA,QAAA,GAC8BH,EAAA,CAAxDC,EAAAA,SAAS,CAAEC,KAAME,OAAQC,UAAW,oBApB1BhE,QAAAA,mBAoB8C8D,UAAA,iBAAA,GAExCH,EAAA,CAAhBM,EAAAA,SAtBUjE,QAAAA,mBAsBM8D,UAAA,SAAA,GAtBN9D,QAAAA,mBAAN2D,EAAA,CADNO,EAAAA,kBAAkB,yBACNlE,QAAAA"}