@operato/input 1.5.22 → 1.5.24

package/src/ox-input-duration.ts

@@ -86,7 +86,7 @@ export class OxInputDuration extends OxFormField {
     }
   `
 
-  @property({ type: Number }) declare value?: number
+  @property({ type: Number }) value?: number
 
   render() {
     var d = Number(this.value || 0)
@@ -100,16 +100,16 @@ export class OxInputDuration extends OxFormField {
 
     return html`
       <form @change=${this.onChange.bind(this)}>
-        <input id="days" type="number" .value=${days} pattern="\\d*" />
+        <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" />
         <label for="days">${i18next.t('label.days')}</label>
 
-        <input id="hours" type="number" .value=${hours} pattern="[01]?\\d|2[0-3]" />
+        <input id="hours" type="number" .value=${String(hours || 0)} pattern="[01]?\\d|2[0-3]" />
         <label for="hour">${i18next.t('label.hours')}</label>
 
-        <input id="minutes" type="number" .value=${minutes} pattern="[0-5]?\\d" />
+        <input id="minutes" type="number" .value=${String(minutes || 0)} pattern="[0-5]?\\d" />
         <label for="minute">${i18next.t('label.minutes')}</label>
 
-        <input id="seconds" type="number" .value=${seconds} pattern="[0-5]?\\d" />
+        <input id="seconds" type="number" .value=${String(seconds || 0)} pattern="[0-5]?\\d" />
         <label for="second">${i18next.t('label.seconds')}</label>
 
         <button

package/src/ox-input-permission.ts

@@ -0,0 +1,180 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-button'
+
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { i18next } from '@operato/i18n'
+
+import { OxFormField } from './ox-form-field'
+
+@customElement('ox-input-permission')
+export class OxInputPermission extends OxFormField {
+  static styles = css`
+    :host {
+      text-align: center;
+      padding: 10px;
+    }
+
+    :host * {
+      box-sizing: border-box;
+    }
+
+    :host *:focus {
+      outline: none;
+    }
+
+    form {
+      width: 100%;
+      height: 100%;
+    }
+
+    div[values] {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 10px;
+    }
+
+    div[values] > [col1] {
+      text-align: right;
+      align-self: center;
+    }
+
+    div[values] > [col2] {
+      text-align: left;
+      align-self: center;
+      margin-right: auto;
+    }
+
+    input {
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      padding-right: 0;
+      max-width: 70px;
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      text-align: right;
+    }
+
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
+    input:invalid {
+      border-bottom: 1px solid var(--status-danger-color);
+      color: var(--status-danger-color);
+    }
+
+    label {
+      margin-right: var(--margin-default);
+      font: normal 0.8em var(--theme-font);
+      color: var(--primary-color);
+    }
+
+    div[buttons] {
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      padding: 10px;
+    }
+
+    button {
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      min-height: 35px;
+      line-height: 0.8;
+      color: var(--button-color);
+      cursor: pointer;
+    }
+    button:focus,
+    button:hover,
+    button:active {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
+    }
+  `
+
+  @property({ type: Object }) value?: {
+    category: string
+    privilege: string
+    owner: boolean
+    super: boolean
+  } | null
+
+  @property({ type: Array }) privileges: { name: string; category: string; description: string }[] = []
+
+  @query('form') private form!: HTMLFormElement
+
+  render() {
+    const { category, privilege, owner, super: superUser } = this.value || {}
+    const privileges = this.privileges || []
+
+    return html`
+      <form @change=${this.onChange.bind(this)}>
+        <div values>
+          <label for="privilege" col1>${i18next.t('label.privilege')}</label>
+          <select id="privilege" name="privilege" value=${ifDefined(privilege)}>
+            <option value="">&nbsp;</option>
+            ${privileges.map(
+              p =>
+                html`<option
+                  value=${`${p.category}-${p.name}`}
+                  ?selected=${category == p.category && privilege == p.name}
+                >
+                  ${p.description}
+                </option>`
+            )}
+          </select>
+
+          <label for="owner" col1>${i18next.t('label.domain-owner')}</label>
+          <input id="owner" type="checkbox" name="owner" ?checked=${owner} col2></input>
+
+          <label for="super" col1>${i18next.t('label.superuser')}</label>
+          <input id="super" type="checkbox" name="super" ?checked=${superUser} col2></input>
+        </div>
+      </form>
+    `
+  }
+
+  buildValue() {
+    const formData = new FormData(this.form)
+
+    const [category = '', privilege = ''] = (formData.get('privilege') as string).split('-')
+    const owner = formData.get('owner') as string
+    const superUser = formData.get('super') as string
+
+    return {
+      category,
+      privilege,
+      owner: owner == 'on',
+      super: superUser == 'on'
+    }
+  }
+
+  firstUpdated() {
+    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()
+  }
+
+  onChange(e: Event) {
+    e.stopPropagation()
+
+    this.value = this.buildValue()
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    )
+  }
+}

package/stories/ox-input-permission.stories.ts

@@ -0,0 +1,80 @@
+import '../src/ox-input-permission.js'
+import '../src/locale/locale-picker.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-permission',
+  component: 'ox-input-permission',
+  argTypes: {
+    value: { control: 'number' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  privileges: { name: string; category: string; description: string }[]
+  value?: {
+    privilege: string
+    category: string
+    owner: boolean
+    super: boolean
+  } | null
+}
+
+const Template: Story<ArgTypes> = ({ name = 'permission', value = null, privileges }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+
+    ox-input-permission {
+      width: 100%;
+      min-height: 500px;
+    }
+  </style>
+
+  <locale-picker></locale-picker>
+  <br /><br />
+
+  <ox-input-permission
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    .privileges=${privileges}
+  >
+  </ox-input-permission>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'permission',
+  privileges: [
+    {
+      name: 'query',
+      category: 'aaa',
+      description: 'readable aaa'
+    },
+    {
+      name: 'mutation',
+      category: 'aaa',
+      description: 'writable aaa'
+    }
+  ],
+  value: {
+    privilege: 'mutation',
+    category: 'aaa',
+    owner: true,
+    super: true
+  }
+}