@operato/app 2.0.0-alpha.11 → 2.0.0-alpha.111

package/stories/ox-selector-resource-object.stories.ts

@@ -0,0 +1,98 @@
+import { html, TemplateResult } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'
+import '../src/selector/ox-selector-resource-object'
+
+setClientLink(
+  createMockLink({
+    request: {
+      query: ''
+    },
+    result: {
+      data: {
+        viewer: null
+      }
+    }
+  })
+)
+
+export default {
+  title: 'ox-selector-resource-object',
+  component: 'ox-selector-resource-object',
+  argTypes: {
+    queryName: { control: 'string' },
+    value: { control: 'string' },
+    valueField: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  queryName: string
+  value?: string
+  valueField?: string
+}
+
+const Template: Story<ArgTypes> = ({ value = '', queryName, valueField }: ArgTypes) => html`
+  <style>
+    body {
+    }
+  </style>
+
+  <script>
+    const select = ['name', 'description']
+  </script>
+
+  <ox-selector-resource-object
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    value=${ifDefined(value)}
+    valueField=${ifDefined(valueField)}
+    .queryName=${queryName}
+    .confirmCallback=${(record: any) => console.log('confirm', record)}
+    .columns=${[
+      {
+        type: 'string',
+        name: 'id',
+        header: 'id',
+        hidden: true,
+        width: 100,
+        queryName: ''
+      },
+      {
+        type: 'string',
+        name: 'name',
+        header: 'name',
+        hidden: false,
+        width: 150,
+        queryName: ''
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: 'description',
+        hidden: false,
+        width: 150,
+        queryName: ''
+      }
+    ]}
+    .list=${['name', 'description']}
+    .basicArgs=${''}
+  >
+  </ox-selector-resource-object>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  value: '',
+  queryName: 'entity',
+  valueField: 'id'
+}

package/themes/app-theme.css

@@ -82,6 +82,16 @@ body {
   --mdc-button-outline-width: 1px;
   --mdc-button-horizontal-padding: 16px;
 
+  /* material style component themes */
+  --md-theme-on-primary: var(--theme-white-color);
+  --md-theme-primary: var(--secondary-text-color);
+  --md-theme-on-secondary: var(--theme-white-color);
+  --md-theme-secondary: var(--primary-color);
+  --md-button-outline-color: var(--primary-color);
+  --md-danger-button-primary-color: var(--status-danger-color);
+  --md-danger-button-outline-color: var(--status-danger-color);
+  --md-button-outline-width: 1px;
+
   /* button style */
   --button-background-color: #fafbfc;
   --button-background-focus-color: var(--primary-color);

package/themes/grist-theme.css

@@ -35,9 +35,11 @@ body {
   --grid-header-filter-title-font: normal 12px var(--theme-font);
   --grid-header-filter-title-icon-color: var(--primary-color);
 
+  --grid-body-bottom-border: 1px solid rgba(var(--secondary-color-rgb), 0.2);
+
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
-  --grid-record-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+  --grid-record-padding: 0 5px 0 5px;
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);
   --grid-record-wide-fontsize: var(--fontsize-small);