@operato/dataset 2.0.0-beta.1 → 2.0.0-beta.12

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/dataset",
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.12",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -106,15 +106,15 @@
   },
   "dependencies": {
     "@material/web": "^1.4.0",
-    "@operato/data-grist": "^2.0.0-beta.1",
+    "@operato/data-grist": "^2.0.0-beta.12",
     "@operato/graphql": "^2.0.0-beta.0",
-    "@operato/grist-editor": "^2.0.0-beta.1",
-    "@operato/i18n": "^2.0.0-beta.0",
-    "@operato/input": "^2.0.0-beta.1",
-    "@operato/popup": "^2.0.0-beta.0",
-    "@operato/property-editor": "^2.0.0-beta.1",
-    "@operato/shell": "^2.0.0-beta.0",
-    "@operato/styles": "^2.0.0-beta.0",
+    "@operato/grist-editor": "^2.0.0-beta.12",
+    "@operato/i18n": "^2.0.0-beta.3",
+    "@operato/input": "^2.0.0-beta.12",
+    "@operato/popup": "^2.0.0-beta.12",
+    "@operato/property-editor": "^2.0.0-beta.12",
+    "@operato/shell": "^2.0.0-beta.12",
+    "@operato/styles": "^2.0.0-beta.5",
     "@operato/utils": "^2.0.0-beta.0",
     "lit": "^3.1.2"
   },
@@ -150,5 +150,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9ea81d43b1a5b47e2e40320baf6f8729552edc05"
+  "gitHead": "08cd1f9bacfca1f0559ee61089a26087cc1876ba"
 }

package/src/ox-data-entry-form.ts

@@ -57,7 +57,7 @@ export class OxDataEntryForm extends LitElement {
     div[name] {
       grid-area: name;
       font: var(--label-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
       text-align: right;
     }
     div[description] {

package/src/ox-data-item-spec.ts

@@ -39,7 +39,7 @@ export class OxDataItemSpec extends LitElement {
     div[name] {
       grid-area: name;
       font: var(--label-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
       text-align: right;
     }
     div[description] {

package/src/usecase/ccp/ox-input-ccp-limits.ts

@@ -57,7 +57,7 @@ export class OxInputCcpLimits extends LitElement {
     input[type='checkbox'] + span {
       display: inline-block;
       font: var(--label-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
       text-align: right;
     }
     input,
@@ -82,7 +82,7 @@ export class OxInputCcpLimits extends LitElement {
     }
     [properties] {
       font: var(--input-field-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
     }
   `
 
@@ -119,34 +119,34 @@ export class OxInputCcpLimits extends LitElement {
               </label>
             `
           : this.type === DataItemType.select
-          ? html`
-              <!-- <div>Acceptables</div> -->
-              ${this.options?.options?.map(
-                option => html`
+            ? html`
+                <!-- <div>Acceptables</div> -->
+                ${this.options?.options?.map(
+                  option => html`
+                    <div>
+                      <input
+                        type="checkbox"
+                        data-value=${option.value}
+                        ?checked=${(acceptables as string[]).includes(option.value)}
+                      />
+                      <span>${option.text}</span>
+                      <span value>(${option.value})</span>
+                    </div>
+                  `
+                )}
+              `
+            : this.type === DataItemType.boolean
+              ? html`
+                  <div>
+                    <input type="checkbox" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />
+                    <span value>true</span>
+                  </div>
                   <div>
-                    <input
-                      type="checkbox"
-                      data-value=${option.value}
-                      ?checked=${(acceptables as string[]).includes(option.value)}
-                    />
-                    <span>${option.text}</span>
-                    <span value>(${option.value})</span>
+                    <input type="checkbox" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />
+                    <span value>false</span>
                   </div>
                 `
-              )}
-            `
-          : this.type === DataItemType.boolean
-          ? html`
-              <div>
-                <input type="checkbox" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />
-                <span value>true</span>
-              </div>
-              <div>
-                <input type="checkbox" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />
-                <span value>false</span>
-              </div>
-            `
-          : html` <div properties>${i18next.t('text.no properties to set')}</div> `}
+              : html` <div properties>${i18next.t('text.no properties to set')}</div> `}
       </div>
     `
   }

package/src/usecase/qc/ox-input-qc-limits.ts

@@ -57,7 +57,7 @@ export class OxInputQcLimits extends LitElement {
     input[type='checkbox'] + span {
       display: inline-block;
       font: var(--label-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
       text-align: right;
     }
     input,
@@ -82,7 +82,7 @@ export class OxInputQcLimits extends LitElement {
     }
     [properties] {
       font: var(--input-field-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
     }
   `
 
@@ -119,33 +119,33 @@ export class OxInputQcLimits extends LitElement {
               </label>
             `
           : this.type === DataItemType.select
-          ? html`
-              ${this.options?.options?.map(
-                option => html`
+            ? html`
+                ${this.options?.options?.map(
+                  option => html`
+                    <div>
+                      <input
+                        type="checkbox"
+                        data-value=${option.value}
+                        ?checked=${(acceptables as string[]).includes(option.value)}
+                      />
+                      <span>${option.text}</span>
+                      <span value>(${option.value})</span>
+                    </div>
+                  `
+                )}
+              `
+            : this.type === DataItemType.boolean
+              ? html`
+                  <div>
+                    <input type="checkbox" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />
+                    <span value>true</span>
+                  </div>
                   <div>
-                    <input
-                      type="checkbox"
-                      data-value=${option.value}
-                      ?checked=${(acceptables as string[]).includes(option.value)}
-                    />
-                    <span>${option.text}</span>
-                    <span value>(${option.value})</span>
+                    <input type="checkbox" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />
+                    <span value>false</span>
                   </div>
                 `
-              )}
-            `
-          : this.type === DataItemType.boolean
-          ? html`
-              <div>
-                <input type="checkbox" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />
-                <span value>true</span>
-              </div>
-              <div>
-                <input type="checkbox" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />
-                <span value>false</span>
-              </div>
-            `
-          : html` <div properties>${i18next.t('text.no properties to set')}</div> `}
+              : html` <div properties>${i18next.t('text.no properties to set')}</div> `}
       </div>
     `
   }

package/src/usecase/spc/ox-input-spc-limits.ts

@@ -57,7 +57,7 @@ export class OxInputSpcLimits extends LitElement {
     input[type='checkbox'] + span {
       display: inline-block;
       font: var(--label-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
       text-align: right;
     }
     input,
@@ -82,7 +82,7 @@ export class OxInputSpcLimits extends LitElement {
     }
     [properties] {
       font: var(--input-field-font);
-      color: var(--label-color);
+      color: var(--label-color, var(--md-sys-color-on-surface));
     }
   `
 
@@ -119,34 +119,34 @@ export class OxInputSpcLimits extends LitElement {
               </label>
             `
           : this.type === DataItemType.select
-          ? html`
-              <!-- <div>Acceptables</div> -->
-              ${this.options?.options?.map(
-                option => html`
+            ? html`
+                <!-- <div>Acceptables</div> -->
+                ${this.options?.options?.map(
+                  option => html`
+                    <div>
+                      <input
+                        type="checkbox"
+                        data-value=${option.value}
+                        ?checked=${(acceptables as string[]).includes(option.value)}
+                      />
+                      <span>${option.text}</span>
+                      <span value>(${option.value})</span>
+                    </div>
+                  `
+                )}
+              `
+            : this.type === DataItemType.boolean
+              ? html`
+                  <div>
+                    <input type="checkbox" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />
+                    <span value>true</span>
+                  </div>
                   <div>
-                    <input
-                      type="checkbox"
-                      data-value=${option.value}
-                      ?checked=${(acceptables as string[]).includes(option.value)}
-                    />
-                    <span>${option.text}</span>
-                    <span value>(${option.value})</span>
+                    <input type="checkbox" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />
+                    <span value>false</span>
                   </div>
                 `
-              )}
-            `
-          : this.type === DataItemType.boolean
-          ? html`
-              <div>
-                <input type="checkbox" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />
-                <span value>true</span>
-              </div>
-              <div>
-                <input type="checkbox" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />
-                <span value>false</span>
-              </div>
-            `
-          : html` <div properties>${i18next.t('text.no properties to set')}</div> `}
+              : html` <div properties>${i18next.t('text.no properties to set')}</div> `}
       </div>
     `
   }

package/stories/ox-grist-editor-data-item-spec.stories.ts

@@ -369,7 +369,7 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
       margin-left: auto;
       margin-right: var(--spacing-medium);
       padding-left: var(--padding-narrow);
-      border-bottom: var(--border-dark-color);
+      border-bottom: var(--border-dim-color);
       position: relative;
       color: var(--md-sys-color-on-secondary-container);
       font-size: var(--fontsize-default);

package/themes/app-theme.css

@@ -26,7 +26,7 @@ body {
 
   /* common style */
   --border-radius: 4px;
-  --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);
+  --border-dim-color: 1px solid rgba(0, 0, 0, 0.15);
   --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
 
   --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
@@ -85,7 +85,7 @@ body {
   /* button style */
   --button-background-color: #fafbfc;
   --button-background-focus-color: var(--primary-color);
-  --button-border: var(--border-dark-color);
+  --button-border: var(--border-dim-color);
   --button-border-radius: var(--border-radius);
   --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
   --button-padding: var(--padding-default);
@@ -121,7 +121,6 @@ body {
 
   /* form style */
   --label-font: normal var(--fontsize-default) var(--theme-font);
-  --label-color: var(--md-sys-color-on-surface);
   --label-text-transform: capitalize;
   --input-margin: var(--margin-narrow) 0;
   --input-padding: var(--padding-default);
@@ -143,3 +142,7 @@ body {
     --subtitle-margin: 0;
   }
 }
+
+body.dark {
+  --border-dim-color: 1px solid rgba(255, 255, 255, 0.15);
+}

package/themes/form-theme.css

@@ -4,7 +4,6 @@ body {
   --form-max-width: 700px;
   --form-multi-column-max-width: 100%;
   --form-sublabel-font: normal 13px var(--theme-font);
-  --form-sublabel-color: var(--md-sys-color-secondary);
   --form-grid-gap: 12px 5px;
 
   --legend-padding: var(--spacing-medium) 0;
@@ -14,7 +13,6 @@ body {
 
   --label-padding: 3px 0;
   --label-font: normal 14px var(--theme-font);
-  --label-color: var(--md-sys-color-secondary);
 
   --input-field-border: 1px solid rgba(0, 0, 0, 0.2);
   --input-field-border-radius: var(--border-radius);
@@ -23,12 +21,8 @@ body {
 
   --search-panel-background-color: rgba(0, 0, 0, 0.1);
   --search-panel-search-iconbutton-size: var(--icon-default-size);
-  --search-form-icon-color: var(--md-sys-color-primary);
   --search-form-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15);
   --search-form-box-padding: 15px 30px 15px 15px;
-  --search-form-background-color: var(--md-sys-color-surface);
-  --search-form-narrow-background-color: var(--md-sys-color-surface);
-  --search-form-narrow-text-color: var(--md-sys-color-on-surface);
 
   --file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);
   --file-uploader-background-color: var(--md-sys-color-background);

package/themes/grist-theme.css

@@ -92,7 +92,7 @@ body {
 
   --data-card-background-color: var(--main-section-background-color);
   --data-card-record-card-background-color: var(--theme-white-color);
-  --data-card-record-card-border: var(--border-dark-color);
+  --data-card-record-card-border: var(--border-dim-color);
   --data-card-record-card-border-hover: 1px solid var(--primary-color);
   --data-card-record-card-boxshadow-hover: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);
   --data-card-record-card-selected-border: 1px solid var(--primary-color);
@@ -111,7 +111,7 @@ body {
   --data-card-item-etc-color: var(--secondary-color);
   --data-card-item-icon-font: normal 1em/1em;
   --data-card-item-icon-color: var(--secondary-text-color);
-  --data-card-item-btn-border: var(--border-dark-color);
+  --data-card-item-btn-border: var(--border-dim-color);
   --data-card-item-btn-border-radius: var(--border-radius);
   --data-card-item-btn-padding: var(--padding-narrow);
   --data-card-selected-background-color: var(--grid-record-selected-background-color);
@@ -120,7 +120,7 @@ body {
   --data-card-fab-color: var(--primary-color);
   --data-card-fab-shadow: var(--box-shadow);
   --data-card-thumbnail-height: 140px;
-  --data-card-thumbnail-border-bottom: var(--border-dark-color);
+  --data-card-thumbnail-border-bottom: var(--border-dim-color);
   --data-card-attachimg-height: 70px;
 
   --record-view-background-color: var(--main-section-background-color);
@@ -164,3 +164,7 @@ body {
     --data-card-create-form-padding: 7px;
   }
 }
+
+body.dark {
+  --grid-container-border-color: 1px solid rgba(255, 255, 255, 0.09);
+}