@operato/data-grist 7.0.0-rc.9 → 7.0.5

package/src/data-grid/data-grid-header.ts

@@ -30,6 +30,11 @@ export class DataGridHeader extends LitElement {
         font-variation-settings: 'FILL' 1;
       }
 
+      :host([raised]) [fixed] {
+        /* 고정 컬럼이 살짝 올라와 있는 느낌을 표현 */
+        box-shadow: 3px 0 3px rgba(0, 0, 0, 0.1);
+      }
+
       div[column] {
         display: flex;
 
@@ -63,9 +68,12 @@ export class DataGridHeader extends LitElement {
         align-self: center;
       }
 
+      span[for-title] * {
+        vertical-align: middle;
+      }
+
       span[for-title] md-icon {
         font-size: 1.2em;
-        vertical-align: middle;
       }
 
       span[sorter],
@@ -169,6 +177,10 @@ export class DataGridHeader extends LitElement {
 
     const grid = closestElement('ox-grist', this)
 
+    this.addEventListener('scroll', function () {
+      this.scrollLeft == 0 ? this.removeAttribute('raised') : this.setAttribute('raised', '')
+    })
+
     if (this.filteringFeature) {
       this?.addEventListener('filter-change', (e: Event) => {
         const { name, operator, value } = (e as CustomEvent).detail

package/src/filters/filter-styles.ts

@@ -25,7 +25,7 @@ export const FilterStyles = css`
   }
 
   span {
-    font-weight:var(--md-sys-typescale-label-medium-weight);
+    font-weight: var(--md-sys-typescale-label-medium-weight);
     text-transform: capitalize;
   }
 
@@ -49,6 +49,7 @@ export const FilterStyles = css`
     font: var(--ox-filters-input-font);
     color: var(--ox-filters-input-color, var(--md-sys-color-on-surface));
     background-color: var(--ox-filters-input-background-color, transparent);
+    vertical-align: middle;
   }
 
   ox-select:focus,

package/src/gutters/gutter-dirty.ts

@@ -25,7 +25,7 @@ class GutterDirtyElement extends LitElement {
     }
 
     [remove] {
-      background-color: var(--status-danger-color);
+      background-color: var(--md-sys-color-error);
     }
 
     [done] {

package/src/sorters/sorters-control.ts

@@ -21,7 +21,7 @@ export class SortersControl extends LitElement {
         justify-content: center;
         align-items: center;
         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-        padding: 3px var(--padding-narrow);
+        padding: 3px var(--spacing-small);
       }
 
       [option] > span {

package/stories/accumulator-format.stories.ts

@@ -186,7 +186,6 @@ export default {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
     urlParamsSensitive: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] },
     withoutSearch: { control: 'boolean' }
   }
 }
@@ -203,7 +202,6 @@ interface ArgTypes {
   urlParamsSensitive: boolean
   withoutSearch: boolean
   fetchHandler: object
-  theme: 'light' | 'dark'
 }
 
 const Template: Story<ArgTypes> = ({
@@ -211,8 +209,7 @@ const Template: Story<ArgTypes> = ({
   mode = 'GRID',
   urlParamsSensitive = false,
   withoutSearch = false,
-  fetchHandler,
-  theme = 'light'
+  fetchHandler
 }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -243,10 +240,6 @@ const Template: Story<ArgTypes> = ({
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/barcode-input-filter.stories.ts

@@ -122,8 +122,7 @@ export default {
   argTypes: {
     englishOnly: { control: 'boolean' },
     selectAfterChange: { control: 'boolean' },
-    headerFilter: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    headerFilter: { control: 'boolean' }
   }
 }
 
@@ -137,10 +136,9 @@ interface ArgTypes {
   englishOnly: boolean
   selectAfterChange: boolean
   headerFilter: boolean
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -170,10 +168,6 @@ const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilte
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/bounded-select-filters.stories.ts

@@ -260,8 +260,7 @@ export default {
   title: 'bounded select filters for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    headerFilter: { control: 'boolean' }
   }
 }
 
@@ -273,10 +272,9 @@ interface Story<T> {
 
 interface ArgTypes {
   headerFilter: boolean
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -306,10 +304,6 @@ const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes)
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/bounded-select-record.stories.ts

@@ -263,8 +263,7 @@ export default {
   title: 'bounded select record for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    headerFilter: { control: 'boolean' }
   }
 }
 
@@ -276,10 +275,9 @@ interface Story<T> {
 
 interface ArgTypes {
   headerFilter: boolean
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -309,10 +307,6 @@ const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes)
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/click-event.stories.ts

@@ -192,8 +192,7 @@ export default {
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
     urlParamsSensitive: { control: 'boolean' },
     withoutSearch: { control: 'boolean' },
-    preventCloseOnBlur: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    preventCloseOnBlur: { control: 'boolean' }
   }
 }
 
@@ -210,7 +209,6 @@ interface ArgTypes {
   withoutSearch: boolean
   preventCloseOnBlur: boolean
   fetchHandler: FetchHandler
-  theme: 'light' | 'dark'
 }
 
 const Template: Story<ArgTypes> = ({
@@ -219,8 +217,7 @@ const Template: Story<ArgTypes> = ({
   urlParamsSensitive = false,
   withoutSearch = false,
   preventCloseOnBlur = false,
-  fetchHandler,
-  theme = 'light'
+  fetchHandler
 }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -251,10 +248,6 @@ const Template: Story<ArgTypes> = ({
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/creatable-only-column.stories.ts

@@ -156,8 +156,7 @@ export default {
   component: 'ox-grist',
   argTypes: {
     headerFilter: { control: 'boolean' },
-    preventCloseOnBlur: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    preventCloseOnBlur: { control: 'boolean' }
   }
 }
 
@@ -170,10 +169,9 @@ interface Story<T> {
 interface ArgTypes {
   headerFilter: boolean
   preventCloseOnBlur: boolean
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter, preventCloseOnBlur, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ headerFilter, preventCloseOnBlur }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -203,10 +201,6 @@ const Template: Story<ArgTypes> = ({ headerFilter, preventCloseOnBlur, theme = '
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/default-filters.stories.ts

@@ -150,8 +150,7 @@ export default {
   title: 'default filters for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    headerFilter: { control: 'boolean' }
   }
 }
 
@@ -166,7 +165,7 @@ interface ArgTypes {
   theme?: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -196,10 +195,6 @@ const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes)
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/dynamic-editable.stories.ts

@@ -217,8 +217,7 @@ export default {
   title: 'dynamic-editable for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    headerFilter: { control: 'boolean' }
   }
 }
 
@@ -230,10 +229,9 @@ interface Story<T> {
 
 interface ArgTypes {
   headerFilter: boolean
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -263,10 +261,6 @@ const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes)
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/empty-sorters.stories.ts

@@ -104,11 +104,9 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {
-  theme: 'light' | 'dark'
-}
+interface ArgTypes {}
 
-const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({}: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -138,10 +136,6 @@ const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/explicit-fetch.stories.ts

@@ -95,8 +95,7 @@ export default {
   title: 'explicit-fetch attribute for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    explicitFetch: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    explicitFetch: { control: 'boolean' }
   }
 }
 
@@ -108,10 +107,9 @@ interface Story<T> {
 
 interface ArgTypes {
   explicitFetch: boolean
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ explicitFetch = false, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ explicitFetch = false }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -141,10 +139,6 @@ const Template: Story<ArgTypes> = ({ explicitFetch = false, theme = 'light' }: A
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/fixed-column.stories.ts

@@ -318,8 +318,7 @@ export default {
   title: 'fixed column',
   component: 'ox-grist',
   argTypes: {
-    config: { control: 'object' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    config: { control: 'object' }
   }
 }
 
@@ -331,10 +330,9 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -364,10 +362,6 @@ const Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/grid-setting.stories.ts

@@ -346,7 +346,6 @@ export default {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
     urlParamsSensitive: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] },
     withoutSearch: { control: 'boolean' },
     debug: { control: 'boolean' }
   }
@@ -364,7 +363,6 @@ interface ArgTypes {
   urlParamsSensitive: boolean
   withoutSearch: boolean
   fetchHandler: FetchHandler
-  theme: 'light' | 'dark'
   debug: boolean
 }
 
@@ -385,8 +383,7 @@ const Template: Story<ArgTypes> = ({
   urlParamsSensitive = false,
   withoutSearch = false,
   debug = false,
-  fetchHandler,
-  theme = 'light'
+  fetchHandler
 }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -417,10 +414,6 @@ const Template: Story<ArgTypes> = ({
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/grist-modes.stories.ts

@@ -339,8 +339,7 @@ export default {
   argTypes: {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
-    urlParamsSensitive: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    urlParamsSensitive: { control: 'boolean' }
   }
 }
 
@@ -354,17 +353,10 @@ interface ArgTypes {
   config: object
   mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
-  theme: 'light' | 'dark'
   fetchHandler: FetchHandler
 }
 
-const Template: Story<ArgTypes> = ({
-  config,
-  mode = 'GRID',
-  urlParamsSensitive = false,
-  fetchHandler,
-  theme = 'light'
-}: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -394,10 +386,6 @@ const Template: Story<ArgTypes> = ({
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/group-header.stories.ts

@@ -347,8 +347,7 @@ export default {
   title: 'group header',
   component: 'ox-grist',
   argTypes: {
-    config: { control: 'object' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    config: { control: 'object' }
   }
 }
 
@@ -360,10 +359,9 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -393,10 +391,6 @@ const Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/textarea.stories.ts

@@ -176,8 +176,7 @@ export default {
   argTypes: {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
-    urlParamsSensitive: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    urlParamsSensitive: { control: 'boolean' }
   }
 }
 
@@ -191,17 +190,10 @@ interface ArgTypes {
   config: object
   mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
-  theme: 'light' | 'dark'
   fetchHandler: FetchHandler
 }
 
-const Template: Story<ArgTypes> = ({
-  config,
-  mode = 'GRID',
-  urlParamsSensitive = false,
-  fetchHandler,
-  theme = 'light'
-}: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -232,10 +224,6 @@ const Template: Story<ArgTypes> = ({
       }
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/tree-column-with-checkbox.stories.ts

@@ -203,8 +203,7 @@ export default {
   title: 'tree column with checkbox',
   component: 'ox-grist',
   argTypes: {
-    config: { control: 'object' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    config: { control: 'object' }
   }
 }
 
@@ -216,10 +215,9 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -249,10 +247,6 @@ const Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;

package/stories/tree-column.stories.ts

@@ -202,8 +202,7 @@ export default {
   title: 'tree column',
   component: 'ox-grist',
   argTypes: {
-    config: { control: 'object' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    config: { control: 'object' }
   }
 }
 
@@ -215,10 +214,9 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -248,10 +246,6 @@ const Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>
       ${CommonHeaderStyles.cssText}
     </style>
 
-    <script>
-      document.body.classList.add('${theme}')
-    </script>
-
     <style>
       ox-grist {
         height: 600px;