@operato/form 1.0.0-alpha.1

package/src/styles/single-column-form-styles.ts

@@ -0,0 +1,114 @@
+import { css } from 'lit'
+
+export const SingleColumnFormStyles = css`
+  :host {
+    overflow: auto;
+    padding: var(--form-container-padding);
+  }
+
+  .single-column-form {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: var(--form-grid-gap);
+    grid-auto-rows: minmax(24px, auto);
+    max-width: var(--form-max-width);
+    margin: var(--form-margin);
+  }
+  .single-column-form fieldset {
+    display: contents;
+  }
+  .single-column-form legend {
+    grid-column: span 12;
+    text-transform: capitalize;
+
+    padding: var(--legend-padding);
+    font: var(--legend-font);
+    color: var(--legend-text-color);
+    border-bottom: var(--legend-border-bottom);
+  }
+
+  .single-column-form label {
+    grid-column: span 3;
+    text-align: right;
+    text-transform: capitalize;
+
+    color: var(--label-color);
+    font: var(--label-font);
+  }
+
+  .single-column-form input,
+  .single-column-form table,
+  .single-column-form select,
+  .single-column-form textarea,
+  .single-column-form [custom-input] {
+    grid-column: span 8;
+
+    border: var(--input-field-border);
+    border-radius: var(--input-field-border-radius);
+    padding: var(--input-field-padding);
+    font: var(--input-field-font);
+  }
+
+  .single-column-form input[type='checkbox'],
+  .single-column-form input[type='radio'] {
+    justify-self: end;
+    align-self: start;
+    grid-column: span 3 / auto;
+    position: relative;
+    left: 17px;
+  }
+
+  .single-column-form input[type='checkbox'] + label,
+  .single-column-form input[type='radio'] + label {
+    padding-left: 17px;
+    text-align: left;
+    grid-column: span 9 / auto;
+
+    font: var(--form-sublabel-font);
+    color: var(--form-sublabel-color);
+  }
+
+  input:focus {
+    outline: none;
+    border: 1px solid var(--focus-background-color);
+  }
+  input[type='checkbox'] {
+    margin: 0;
+  }
+
+  @media screen and (max-width: 460px) {
+    .single-column-form {
+      max-width: 90%;
+      grid-gap: 5px;
+    }
+    .single-column-form label {
+      grid-column: span 12;
+      text-align: left;
+      align-self: end;
+    }
+    .single-column-form input,
+    .single-column-form table,
+    .single-column-form select,
+    .single-column-form textarea,
+    .single-column-form [custom-input] {
+      grid-column: span 12;
+
+      padding: var(--padding-default);
+      font: normal 15px var(--theme-font);
+    }
+    .single-column-form input[type='checkbox'],
+    .single-column-form input[type='radio'] {
+      justify-self: start;
+      align-self: center;
+      grid-column: span 1 / auto;
+      zoom: 1.4;
+    }
+
+    .single-column-form input[type='checkbox'] + label,
+    .single-column-form input[type='radio'] + label {
+      grid-column: span 11 / auto;
+      align-self: center;
+    }
+  }
+`

package/src/themes/form-theme.css

@@ -0,0 +1,75 @@
+body {
+  --form-border: none;
+  --form-margin: var(--margin-wide);
+  --form-max-width: 700px;
+  --form-multi-column-max-width: 100%;
+  --form-sublabel-font: normal 13px var(--theme-font);
+  --form-sublabel-color: var(--secondary-color);
+  --form-grid-gap: 12px 5px;
+
+  --legend-padding: var(--padding-default) 0;
+  --legend-font: bold 16px var(--theme-font);
+  --legend-text-color: var(--secondary-text-color);
+  --legend-border-bottom: 1px solid var(--primary-color);
+
+  --label-padding: 3px 0;
+  --label-font: normal 14px var(--theme-font);
+  --label-color: var(--secondary-color);
+
+  --input-field-border: 1px solid rgba(0, 0, 0, 0.2);
+  --input-field-border-radius: var(--border-radius);
+  --input-field-padding: 2px 9px;
+  --input-field-font: normal 14px var(--theme-font);
+
+  --search-panel-background-color: rgba(0, 0, 0, 0.1);
+  --search-panel-search-iconbutton-size: var(--icon-default-size);
+  --search-form-icon-color: var(--primary-color);
+  --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: #fff;
+  --search-form-narrow-background-color: var(--primary-color);
+  --search-form-narrow-text-color: #fff;
+
+  --file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);
+  --file-uploader-background-color: var(--main-section-background-color);
+  --file-uploader-font: normal 12px/20px var(--theme-font);
+  --file-uploader-color: var(--secondary-color);
+  --file-uploader-icon-color: var(--primary-color);
+  --file-uploader-candrop-background-color: #fffde9;
+  --file-uploader-label-padding: 3px 20px;
+  --file-uploader-label-border-radius: var(--border-radius);
+  --file-uploader-label-background-color: var(--secondary-color);
+  --file-uploader-label-font: normal 12px var(--theme-font);
+  --file-uploader-label-color: #fff;
+  --file-uploader-li-padding: 2px 5px 0px 5px;
+  --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
+  --file-uploader-li-icon-margin: 2px 0 2px 5px;
+  --file-uploader-li-icon-font: normal 15px var(--mdc-icon-font, 'Material Icons');
+  --file-uploader-li-icon-focus-color: var(--primary-color);
+}
+
+@media screen and (max-width: 480px) {
+  body {
+    --label-font: normal 15px var(--theme-font);
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1024px) {
+  body {
+    --form-margin: 15px 0;
+    --form-multi-column-max-width: 100%;
+    --form-container-padding: 0 9px 12px 9px;
+    --label-font: normal 14px var(--theme-font);
+    --input-field-font: normal 15px var(--theme-font);
+    --input-field-padding: 3px 5px;
+  }
+}
+
+@media only screen and (max-width: 925px) {
+  body {
+    --form-margin: 14px 0;
+    --form-multi-column-max-width: 100%;
+    --form-container-padding: 0 9px 12px 9px;
+    --input-field-padding: 3px 5px;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});