@operato/gantt 8.0.0-alpha.6 → 8.0.0-beta.0

package/src/ox-task-tooltip.ts

@@ -1,11 +1,11 @@
 import { LitElement, html, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 
 @customElement('ox-task-tooltip')
 export class OxTaskTooltip extends LitElement {
   static styles = css`
     :host {
-      position: fixed; /* position: absolute로 변경 */
+      position: fixed;
       background-color: var(--ox-gantt-tooltip-background-color, var(--md-sys-color-surface-variant, #f9f9f9));
       border: 1px solid var(--ox-gantt-tooltip-border-color, var(--md-sys-color-outline, #ccc));
       padding: var(--spacing-medium, 10px);
@@ -21,17 +21,18 @@ export class OxTaskTooltip extends LitElement {
       transition:
         visibility 0.1s,
         opacity 0.1s;
-      opacity: 0; /* 초기에는 보이지 않음 */
+      opacity: 0;
     }
     :host([visible]) {
       visibility: visible;
-      opacity: 1; /* 보일 때는 불투명 */
+      opacity: 1;
     }
     .title {
       font-weight: bold;
       font-size: 16px;
       margin-bottom: 8px;
-      color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4)); /* 파란색 텍스트 */
+      color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4));
+      outline: none;
     }
     .detail {
       display: grid;
@@ -42,14 +43,24 @@ export class OxTaskTooltip extends LitElement {
     .label {
       font-weight: bold;
       color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
-      text-align: right; /* 라벨을 우측 정렬 */
+      text-align: right;
     }
     .colon {
       text-align: center;
       color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
     }
     .value {
-      text-align: left; /* 값을 좌측 정렬 */
+      text-align: left;
+      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
+    }
+    .close-button {
+      position: absolute;
+      top: 4px;
+      right: 8px;
+      background: none;
+      border: none;
+      font-size: 16px;
+      cursor: pointer;
       color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
     }
   `
@@ -59,6 +70,9 @@ export class OxTaskTooltip extends LitElement {
   @property({ type: String }) endDate = ''
   @property({ type: Number }) progress = 0
   @property({ type: String }) type = ''
+  @property({ type: Boolean, attribute: true }) visible: boolean = false
+
+  @query('.title') titleElement!: HTMLDivElement
 
   show(x: number, y: number) {
     const tooltipWidth = this.offsetWidth
@@ -100,15 +114,23 @@ export class OxTaskTooltip extends LitElement {
     }
 
     this.setAttribute('visible', '')
+
+    setTimeout(() => {
+      this.titleElement.addEventListener('blur', this.hide)
+      this.titleElement.focus({ preventScroll: true })
+    }, 500)
   }
 
-  hide() {
+  hide = () => {
+    this.titleElement.removeEventListener('blur', this.hide)
     this.removeAttribute('visible')
   }
 
   render() {
     return html`
-      <div class="title">${this.title}</div>
+      <div class="close-button" @click=${this.hide} @touchstart=${this.hide}>✕</div>
+      <div class="title" tabindex="0">${this.title}</div>
+
       <div class="detail">
         <span class="label">Type</span><span class="colon">:</span><span class="value">${this.type}</span>
         <span class="label">Start Date</span><span class="colon">:</span><span class="value">${this.startDate}</span>

package/src/types.ts

@@ -11,6 +11,7 @@ export interface Task {
   dependsOn?: string
   duration: number
   tags?: TaskTag[]
+  style?: string
   children?: Task[]
   resources?: Resource[]
   collapsed?: boolean

package/stories/ox-gantt.stories.ts

@@ -68,6 +68,22 @@ const Template: Story<ArgTypes> = ({
   </style>
 
   <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+
+      overscroll-behavior: none;
+
+      /* This is a font-stack that tries to use the system-default sans-serifs first */
+      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+
+      accent-color: var(--md-sys-color-primary);
+    }
+
     body {
       width: 100%;
       height: 800px;
@@ -79,7 +95,7 @@ const Template: Story<ArgTypes> = ({
 
     ox-gantt {
       width: 95%;
-      height: 650px;
+      height: 800px;
       box-sizing: border-box;
 
       background-color: var(--md-sys-color-primary-container);
@@ -125,6 +141,7 @@ Regular.args = {
       id: '2',
       title: 'Development',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-06',
       endDate: '2023-01-06',
       progress: 30,
@@ -144,6 +161,7 @@ Regular.args = {
       dependsOn: '2',
       duration: 9,
       tags: ['critical'],
+      style: 'red',
       children: [
         {
           id: '3-1',
@@ -155,6 +173,7 @@ Regular.args = {
           dependsOn: '',
           duration: 4,
           tags: ['done'],
+          style: 'green',
           children: [
             {
               id: '3-1-1',
@@ -207,6 +226,7 @@ Regular.args = {
       dependsOn: '1',
       duration: 1,
       tags: ['done'],
+      style: 'green',
       resources: [{ type: '방수공', allocated: 5 }],
       children: []
     },
@@ -214,6 +234,7 @@ Regular.args = {
       id: '5',
       title: 'Deploy',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-15',
       endDate: '2023-01-21',
       dependsOn: '4',
@@ -226,6 +247,7 @@ Regular.args = {
       id: '6',
       title: 'Publishing',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-11',
       endDate: '2023-01-15',
       dependsOn: '5',
@@ -238,6 +260,7 @@ Regular.args = {
       id: '7',
       title: 'Provisioning',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-12',
       endDate: '2023-01-15',
       dependsOn: '6',
@@ -250,6 +273,7 @@ Regular.args = {
       id: '8',
       title: 'Alpha Test',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-15',
       endDate: '2023-01-17',
       dependsOn: '7',
@@ -262,6 +286,7 @@ Regular.args = {
       id: '9',
       title: 'Beta Task',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-15',
       endDate: '2023-01-18',
       dependsOn: '8',
@@ -280,6 +305,7 @@ Regular.args = {
       dependsOn: '9',
       duration: 1,
       tags: ['critical'],
+      style: 'red',
       resources: [{ type: '조적공', allocated: 6 }],
       children: []
     },
@@ -287,6 +313,7 @@ Regular.args = {
       id: '11',
       title: 'Zeta Test',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-18',
       endDate: '2023-01-22',
       dependsOn: '9',
@@ -299,6 +326,7 @@ Regular.args = {
       id: '12',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-18',
       endDate: '2023-01-23',
       dependsOn: '9',
@@ -316,6 +344,7 @@ Regular.args = {
           dependsOn: '',
           duration: 4,
           tags: ['done'],
+          style: 'green',
           resources: [{ type: '방수공', allocated: 6 }],
           children: []
         },
@@ -342,12 +371,14 @@ Regular.args = {
       dependsOn: '12',
       duration: 1,
       tags: ['done'],
+      style: 'green',
       children: []
     },
     {
       id: '14',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-27',
       endDate: '2023-01-30',
       dependsOn: '13',
@@ -360,6 +391,7 @@ Regular.args = {
       id: '15',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-30',
       endDate: '2023-01-31',
       dependsOn: '14',
@@ -371,6 +403,7 @@ Regular.args = {
       id: '16',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-01-31',
       endDate: '2023-02-05',
       dependsOn: '15',
@@ -383,6 +416,7 @@ Regular.args = {
       id: '17',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-02-06',
       endDate: '2023-02-07',
       dependsOn: '16',
@@ -399,12 +433,14 @@ Regular.args = {
       dependsOn: '17',
       duration: 1,
       tags: ['critical'],
+      style: 'red',
       children: []
     },
     {
       id: '19',
       title: 'Release',
       type: 'milestone',
+      style: 'blue',
       startDate: '2023-02-10',
       endDate: '2023-02-25',
       dependsOn: '18',

package/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);