@dssp/project 1.0.0-alpha.93 → 1.0.0-alpha.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -143,7 +143,9 @@ DsspDomainSwitch.styles = [
|
|
|
143
143
|
ScrollbarStyles,
|
|
144
144
|
css `
|
|
145
145
|
:host {
|
|
146
|
-
|
|
146
|
+
/* content 폭으로 — 헤더바 전체를 채우지 않도록 (inline-flex + fit-content) */
|
|
147
|
+
display: inline-flex;
|
|
148
|
+
width: fit-content;
|
|
147
149
|
position: relative;
|
|
148
150
|
max-width: 100%;
|
|
149
151
|
background-color: var(--md-sys-color-primary-container, rgb(215 231 241));
|
|
@@ -155,7 +157,6 @@ DsspDomainSwitch.styles = [
|
|
|
155
157
|
}
|
|
156
158
|
|
|
157
159
|
button.trigger {
|
|
158
|
-
flex: 1;
|
|
159
160
|
display: flex;
|
|
160
161
|
align-items: center;
|
|
161
162
|
gap: var(--spacing-small);
|
|
@@ -177,7 +178,7 @@ DsspDomainSwitch.styles = [
|
|
|
177
178
|
}
|
|
178
179
|
|
|
179
180
|
.current-label {
|
|
180
|
-
|
|
181
|
+
/* 이름 전체가 보이도록 content 폭 (말줄임 없음). 헤더바를 넘길 때만 :host max-width 로 잘림 */
|
|
181
182
|
overflow: hidden;
|
|
182
183
|
text-overflow: ellipsis;
|
|
183
184
|
white-space: nowrap;
|
|
@@ -186,11 +187,14 @@ DsspDomainSwitch.styles = [
|
|
|
186
187
|
.panel {
|
|
187
188
|
position: absolute;
|
|
188
189
|
top: 100%;
|
|
189
|
-
right: 0;
|
|
190
190
|
left: 0;
|
|
191
|
+
/* 아이템(최장 이름) 길이에 맞춘 content 폭. 줄바꿈 없이 다 보이도록 캡을 넉넉히,
|
|
192
|
+
화면을 넘지 않을 정도(90vw)로만 상한. */
|
|
193
|
+
width: max-content;
|
|
191
194
|
min-width: 280px;
|
|
195
|
+
max-width: 90vw;
|
|
192
196
|
max-height: 60vh;
|
|
193
|
-
overflow
|
|
197
|
+
overflow: auto;
|
|
194
198
|
background: var(--md-sys-color-surface, #fff);
|
|
195
199
|
border: var(--border-dim-color);
|
|
196
200
|
border-radius: 0 0 var(--border-radius-default, 4px) var(--border-radius-default, 4px);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"domain-switch.js","sourceRoot":"","sources":["../../client/viewparts/domain-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { AppController } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next, localize } from '@operato/i18n'\n\nconst CATEGORY_ICON: Record<string, string> = {\n domain: 'business',\n project: 'assignment',\n company: 'corporate_fare',\n equipment: 'precision_manufacturing'\n}\n\nconst CATEGORY_FALLBACK_ICON = 'folder'\n\nconst CATEGORY_ORDER = ['project', 'domain', 'company', 'equipment']\n\n@customElement('dssp-domain-switch')\nexport class DsspDomainSwitch extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n position: relative;\n max-width: 100%;\n background-color: var(--md-sys-color-primary-container, rgb(215 231 241));\n border-bottom: var(--border-dim-color);\n }\n\n :host * {\n vertical-align: middle;\n }\n\n button.trigger {\n flex: 1;\n display: flex;\n align-items: center;\n gap: var(--spacing-small);\n padding: var(--spacing-small);\n background: transparent;\n border: 0;\n cursor: pointer;\n color: var(--md-sys-color-on-primary-container, rgb(50 66 82));\n font: bold 14px/20px var(--theme-font);\n text-align: left;\n }\n\n button.trigger > md-icon.lead {\n background-color: var(--md-sys-color-primary, rgb(46 121 190));\n padding: 2px;\n border-radius: 50%;\n font-size: var(--fontsize-large);\n color: var(--md-sys-color-on-primary, rgba(255, 255, 255, 0.9));\n }\n\n .current-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .panel {\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n min-width: 280px;\n max-height: 60vh;\n overflow-y: auto;\n background: var(--md-sys-color-surface, #fff);\n border: var(--border-dim-color);\n border-radius: 0 0 var(--border-radius-default, 4px) var(--border-radius-default, 4px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n z-index: 10;\n padding: var(--spacing-small) 0;\n }\n\n .category-header {\n display: flex;\n align-items: center;\n gap: var(--spacing-small);\n padding: var(--spacing-small) var(--spacing-medium);\n background: var(--md-sys-color-surface-variant, #f3f4f6);\n font: bold 12px/16px var(--theme-font);\n color: var(--md-sys-color-on-surface-variant, #555);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n .category-header md-icon {\n font-size: 16px;\n color: var(--md-sys-color-primary, #2e79be);\n }\n\n .category-header .count {\n margin-left: auto;\n font-weight: normal;\n color: var(--md-sys-color-on-surface-variant, #777);\n }\n\n ul.domains {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n ul.domains li {\n padding: var(--spacing-small) var(--spacing-medium);\n cursor: pointer;\n color: var(--md-sys-color-on-surface, #222);\n font: normal 13px/18px var(--theme-font);\n }\n\n ul.domains li[selected] {\n background: var(--md-sys-color-primary-container, #d7e7f1);\n font-weight: bold;\n }\n\n ul.domains li:hover {\n background: var(--md-sys-color-secondary-container, #eef3fa);\n }\n\n ul.domains li .sub {\n display: block;\n font-size: 11px;\n color: var(--md-sys-color-on-surface-variant, #888);\n }\n `\n ]\n\n private _appCtrl = new AppController(this)\n\n @property({ type: String, attribute: true }) attrname: string = 'name'\n @property({ type: String, attribute: true }) icon: string = 'domain'\n\n @state() private _open = false\n\n private _outsideClickHandler = (e: MouseEvent) => {\n if (!this._open) return\n const path = e.composedPath()\n if (!path.includes(this)) {\n this._open = false\n }\n }\n\n private _escHandler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') this._open = false\n }\n\n connectedCallback() {\n super.connectedCallback()\n document.addEventListener('click', this._outsideClickHandler, true)\n document.addEventListener('keydown', this._escHandler)\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this._outsideClickHandler, true)\n document.removeEventListener('keydown', this._escHandler)\n super.disconnectedCallback()\n }\n\n render() {\n const domains: any[] = (this._appCtrl.domains as any[]) || []\n const current: any = (this._appCtrl.domain as any) || {}\n const attrname = this.attrname || 'name'\n const currentLabel = current[attrname] || current.name || ''\n\n if (domains.length <= 1) {\n return html`\n <button class=\"trigger\" disabled>\n ${this.icon ? html`<md-icon class=\"lead\">${this.icon}</md-icon>` : nothing}\n <span class=\"current-label\">${(domains[0] as any)?.[attrname] || currentLabel}</span>\n </button>\n `\n }\n\n const ordered = this._groupAndOrder(domains)\n\n return html`\n <button\n class=\"trigger\"\n @click=${(e: Event) => {\n e.stopPropagation()\n this._open = !this._open\n }}\n aria-haspopup=\"listbox\"\n aria-expanded=${this._open ? 'true' : 'false'}\n >\n ${this.icon ? html`<md-icon class=\"lead\">${this.icon}</md-icon>` : nothing}\n <span class=\"current-label\">${currentLabel}</span>\n <md-icon>${this._open ? 'expand_less' : 'expand_more'}</md-icon>\n </button>\n ${this._open\n ? html`\n <div class=\"panel\" role=\"listbox\">\n ${ordered.map(([category, items]) => this._renderCategory(category, items, current, attrname))}\n </div>\n `\n : nothing}\n `\n }\n\n private _renderCategory(category: string, items: any[], current: any, attrname: string) {\n return html`\n <section>\n <header class=\"category-header\">\n <md-icon>${CATEGORY_ICON[category] || CATEGORY_FALLBACK_ICON}</md-icon>\n <span>${i18next.t(`label.domain_type.${category}`, { defaultValue: category })}</span>\n <span class=\"count\">${items.length}</span>\n </header>\n <ul class=\"domains\">\n ${items.map(\n d => html`\n <li\n ?selected=${d.subdomain === current.subdomain}\n role=\"option\"\n aria-selected=${d.subdomain === current.subdomain ? 'true' : 'false'}\n title=${d.description ? `${d.name}\\n${d.description}` : d.name || ''}\n @click=${() => this._select(d)}\n >\n <strong>${d[attrname] || d.name}</strong>\n ${attrname !== 'subdomain' && d.subdomain\n ? html`<span class=\"sub\">${d.subdomain}</span>`\n : nothing}\n </li>\n `\n )}\n </ul>\n </section>\n `\n }\n\n private _select(d: any) {\n if (!d?.subdomain) return\n window.location.pathname = `/auth/checkin/${d.subdomain}`\n }\n\n private _groupAndOrder(domains: any[]): [string, any[]][] {\n const groups: Record<string, any[]> = {}\n for (const d of domains) {\n const cat = d.extType || 'domain'\n ;(groups[cat] ||= []).push(d)\n }\n\n // 카테고리 안 등록번호 (subdomain) 역순.\n for (const items of Object.values(groups)) {\n items.sort((a, b) => (b.subdomain || '').localeCompare(a.subdomain || ''))\n }\n\n const ordered: [string, any[]][] = []\n const seen = new Set<string>()\n for (const cat of CATEGORY_ORDER) {\n if (groups[cat]?.length) {\n ordered.push([cat, groups[cat]])\n seen.add(cat)\n }\n }\n for (const [cat, items] of Object.entries(groups)) {\n if (!seen.has(cat)) ordered.push([cat, items])\n }\n return ordered\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"domain-switch.js","sourceRoot":"","sources":["../../client/viewparts/domain-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { AppController } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next, localize } from '@operato/i18n'\n\nconst CATEGORY_ICON: Record<string, string> = {\n domain: 'business',\n project: 'assignment',\n company: 'corporate_fare',\n equipment: 'precision_manufacturing'\n}\n\nconst CATEGORY_FALLBACK_ICON = 'folder'\n\nconst CATEGORY_ORDER = ['project', 'domain', 'company', 'equipment']\n\n@customElement('dssp-domain-switch')\nexport class DsspDomainSwitch extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n /* content 폭으로 — 헤더바 전체를 채우지 않도록 (inline-flex + fit-content) */\n display: inline-flex;\n width: fit-content;\n position: relative;\n max-width: 100%;\n background-color: var(--md-sys-color-primary-container, rgb(215 231 241));\n border-bottom: var(--border-dim-color);\n }\n\n :host * {\n vertical-align: middle;\n }\n\n button.trigger {\n display: flex;\n align-items: center;\n gap: var(--spacing-small);\n padding: var(--spacing-small);\n background: transparent;\n border: 0;\n cursor: pointer;\n color: var(--md-sys-color-on-primary-container, rgb(50 66 82));\n font: bold 14px/20px var(--theme-font);\n text-align: left;\n }\n\n button.trigger > md-icon.lead {\n background-color: var(--md-sys-color-primary, rgb(46 121 190));\n padding: 2px;\n border-radius: 50%;\n font-size: var(--fontsize-large);\n color: var(--md-sys-color-on-primary, rgba(255, 255, 255, 0.9));\n }\n\n .current-label {\n /* 이름 전체가 보이도록 content 폭 (말줄임 없음). 헤더바를 넘길 때만 :host max-width 로 잘림 */\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .panel {\n position: absolute;\n top: 100%;\n left: 0;\n /* 아이템(최장 이름) 길이에 맞춘 content 폭. 줄바꿈 없이 다 보이도록 캡을 넉넉히,\n 화면을 넘지 않을 정도(90vw)로만 상한. */\n width: max-content;\n min-width: 280px;\n max-width: 90vw;\n max-height: 60vh;\n overflow: auto;\n background: var(--md-sys-color-surface, #fff);\n border: var(--border-dim-color);\n border-radius: 0 0 var(--border-radius-default, 4px) var(--border-radius-default, 4px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n z-index: 10;\n padding: var(--spacing-small) 0;\n }\n\n .category-header {\n display: flex;\n align-items: center;\n gap: var(--spacing-small);\n padding: var(--spacing-small) var(--spacing-medium);\n background: var(--md-sys-color-surface-variant, #f3f4f6);\n font: bold 12px/16px var(--theme-font);\n color: var(--md-sys-color-on-surface-variant, #555);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n .category-header md-icon {\n font-size: 16px;\n color: var(--md-sys-color-primary, #2e79be);\n }\n\n .category-header .count {\n margin-left: auto;\n font-weight: normal;\n color: var(--md-sys-color-on-surface-variant, #777);\n }\n\n ul.domains {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n ul.domains li {\n padding: var(--spacing-small) var(--spacing-medium);\n cursor: pointer;\n color: var(--md-sys-color-on-surface, #222);\n font: normal 13px/18px var(--theme-font);\n }\n\n ul.domains li[selected] {\n background: var(--md-sys-color-primary-container, #d7e7f1);\n font-weight: bold;\n }\n\n ul.domains li:hover {\n background: var(--md-sys-color-secondary-container, #eef3fa);\n }\n\n ul.domains li .sub {\n display: block;\n font-size: 11px;\n color: var(--md-sys-color-on-surface-variant, #888);\n }\n `\n ]\n\n private _appCtrl = new AppController(this)\n\n @property({ type: String, attribute: true }) attrname: string = 'name'\n @property({ type: String, attribute: true }) icon: string = 'domain'\n\n @state() private _open = false\n\n private _outsideClickHandler = (e: MouseEvent) => {\n if (!this._open) return\n const path = e.composedPath()\n if (!path.includes(this)) {\n this._open = false\n }\n }\n\n private _escHandler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') this._open = false\n }\n\n connectedCallback() {\n super.connectedCallback()\n document.addEventListener('click', this._outsideClickHandler, true)\n document.addEventListener('keydown', this._escHandler)\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this._outsideClickHandler, true)\n document.removeEventListener('keydown', this._escHandler)\n super.disconnectedCallback()\n }\n\n render() {\n const domains: any[] = (this._appCtrl.domains as any[]) || []\n const current: any = (this._appCtrl.domain as any) || {}\n const attrname = this.attrname || 'name'\n const currentLabel = current[attrname] || current.name || ''\n\n if (domains.length <= 1) {\n return html`\n <button class=\"trigger\" disabled>\n ${this.icon ? html`<md-icon class=\"lead\">${this.icon}</md-icon>` : nothing}\n <span class=\"current-label\">${(domains[0] as any)?.[attrname] || currentLabel}</span>\n </button>\n `\n }\n\n const ordered = this._groupAndOrder(domains)\n\n return html`\n <button\n class=\"trigger\"\n @click=${(e: Event) => {\n e.stopPropagation()\n this._open = !this._open\n }}\n aria-haspopup=\"listbox\"\n aria-expanded=${this._open ? 'true' : 'false'}\n >\n ${this.icon ? html`<md-icon class=\"lead\">${this.icon}</md-icon>` : nothing}\n <span class=\"current-label\">${currentLabel}</span>\n <md-icon>${this._open ? 'expand_less' : 'expand_more'}</md-icon>\n </button>\n ${this._open\n ? html`\n <div class=\"panel\" role=\"listbox\">\n ${ordered.map(([category, items]) => this._renderCategory(category, items, current, attrname))}\n </div>\n `\n : nothing}\n `\n }\n\n private _renderCategory(category: string, items: any[], current: any, attrname: string) {\n return html`\n <section>\n <header class=\"category-header\">\n <md-icon>${CATEGORY_ICON[category] || CATEGORY_FALLBACK_ICON}</md-icon>\n <span>${i18next.t(`label.domain_type.${category}`, { defaultValue: category })}</span>\n <span class=\"count\">${items.length}</span>\n </header>\n <ul class=\"domains\">\n ${items.map(\n d => html`\n <li\n ?selected=${d.subdomain === current.subdomain}\n role=\"option\"\n aria-selected=${d.subdomain === current.subdomain ? 'true' : 'false'}\n title=${d.description ? `${d.name}\\n${d.description}` : d.name || ''}\n @click=${() => this._select(d)}\n >\n <strong>${d[attrname] || d.name}</strong>\n ${attrname !== 'subdomain' && d.subdomain\n ? html`<span class=\"sub\">${d.subdomain}</span>`\n : nothing}\n </li>\n `\n )}\n </ul>\n </section>\n `\n }\n\n private _select(d: any) {\n if (!d?.subdomain) return\n window.location.pathname = `/auth/checkin/${d.subdomain}`\n }\n\n private _groupAndOrder(domains: any[]): [string, any[]][] {\n const groups: Record<string, any[]> = {}\n for (const d of domains) {\n const cat = d.extType || 'domain'\n ;(groups[cat] ||= []).push(d)\n }\n\n // 카테고리 안 등록번호 (subdomain) 역순.\n for (const items of Object.values(groups)) {\n items.sort((a, b) => (b.subdomain || '').localeCompare(a.subdomain || ''))\n }\n\n const ordered: [string, any[]][] = []\n const seen = new Set<string>()\n for (const cat of CATEGORY_ORDER) {\n if (groups[cat]?.length) {\n ordered.push([cat, groups[cat]])\n seen.add(cat)\n }\n }\n for (const [cat, items] of Object.entries(groups)) {\n if (!seen.has(cat)) ordered.push([cat, items])\n }\n return ordered\n }\n}\n"]}
|