@operato/property-editor 2.0.0-alpha.13 → 2.0.0-alpha.131

package/stories/ox-properties-dynamic-view.stories.ts

@@ -0,0 +1,296 @@
+import { TemplateResult, html } from 'lit'
+
+import '../src/ox-property-editor-3axis.js'
+import '../src/ox-property-editor-3dish.js'
+import '../src/ox-property-editor-angle.js'
+import '../src/ox-property-editor-checkbox.js'
+import '../src/ox-property-editor-color.js'
+import '../src/ox-property-editor-date.js'
+import '../src/ox-property-editor-legend.js'
+import '../src/ox-property-editor-number.js'
+import '../src/ox-property-editor-unit-number.js'
+import '../src/ox-property-editor-password.js'
+import '../src/ox-property-editor-range.js'
+import '../src/ox-property-editor-select.js'
+import '../src/ox-property-editor-string.js'
+import '../src/ox-property-editor-image.js'
+import '../src/ox-property-editor-file.js'
+import '../src/ox-property-editor-multiple-colors.js'
+import '../src/ox-property-editor-crontab.js'
+import '../src/ox-property-editor-work-shift.js'
+import '../src/ox-property-editor-partition-keys.js'
+import '../src/ox-property-editor-key-values.js'
+import '../src/ox-property-editor-textarea.js'
+import '../src/ox-property-editor-options.js'
+import '../src/ox-property-editor-hashtags.js'
+
+import '../src/ox-properties-dynamic-view.js'
+
+import { OxPropertyEditor } from '../src/ox-property-editor.js'
+import { PropertySpec } from '../src/types.js'
+
+export default {
+  title: 'Properties Dynamic View',
+  component: 'ox-properties-dynamic-view',
+  argTypes: {
+    title: { control: 'text' },
+    counter: { control: 'number' },
+    textColor: { control: 'color' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  title?: string
+  counter?: number
+  textColor?: string
+  slot?: TemplateResult
+}
+
+OxPropertyEditor.register({
+  legend: 'ox-property-editor-legend',
+  number: 'ox-property-editor-number',
+  'unit-number': 'ox-property-editor-unit-number',
+  slider: 'ox-property-editor-range',
+  password: 'ox-property-editor-password',
+  angle: 'ox-property-editor-angle',
+  string: 'ox-property-editor-string',
+  textarea: 'ox-property-editor-textarea',
+  javascript: 'ox-property-editor-textarea',
+  checkbox: 'ox-property-editor-checkbox',
+  boolean: 'ox-property-editor-checkbox',
+  select: 'ox-property-editor-select',
+  date: 'ox-property-editor-date',
+  options: 'ox-property-editor-options',
+  data: 'ox-property-editor-data',
+  file: 'ox-property-editor-file',
+  image: 'ox-property-editor-image',
+  'range-input': 'ox-property-editor-range',
+  'attachment-selector': 'ox-property-editor-attachment-selector',
+  'gltf-selector': 'ox-property-editor-attachment-selector',
+  'image-selector': 'ox-property-editor-image-selector',
+  color: 'ox-property-editor-color',
+  'solid-color-stops': 'ox-property-editor-solid-colorstops',
+  'gradient-color-stops': 'ox-property-editor-gradient-colorstops',
+  'multiple-color': 'ox-property-editor-multiple-colors',
+  map: 'ox-property-editor-value-map',
+  range: 'ox-property-editor-value-ranges',
+  graphql: 'ox-property-editor-graphql',
+  'editor-table': 'ox-property-editor-table',
+  'id-input': 'ox-property-editor-scene-component-id',
+  'font-selector': 'ox-property-editor-font-selector',
+  crontab: 'ox-property-editor-crontab',
+  shift: 'ox-property-editor-work-shift',
+  'partition-keys': 'ox-property-editor-partition-keys',
+  'key-values': 'ox-property-editor-key-values',
+  hashtags: 'ox-property-editor-hashtags',
+  '3axis': 'ox-property-editor-3axis',
+  '3dish': 'ox-property-editor-3dish'
+})
+
+const properties = [
+  {
+    type: 'string',
+    label: 'ABC',
+    name: 'ABC',
+    quantifier: [1, 20]
+  },
+  {
+    type: 'password',
+    label: 'PWD',
+    name: 'PWD'
+  },
+  {
+    type: 'select',
+    label: 'SLT',
+    name: 'SLT',
+    property: {
+      options: [
+        { display: '', value: '' },
+        { display: 'AAA', value: 'aaa' },
+        { display: 'BBB', value: 'bbb' }
+      ]
+    }
+  },
+  {
+    type: 'number',
+    label: 'N#',
+    name: 'N#'
+  },
+  {
+    type: 'unit-number',
+    label: 'NU',
+    name: 'NU',
+    property: {
+      unit: 'K'
+    }
+  },
+  {
+    type: 'checkbox',
+    label: 'XV',
+    name: 'XV'
+  },
+  {
+    type: 'angle',
+    label: 'Degree',
+    name: 'Degree'
+  },
+  {
+    type: 'date',
+    label: 'DD',
+    name: 'DD'
+  },
+  {
+    type: 'legend',
+    label: '',
+    name: 'NEW-GROUP',
+    property: {
+      label: 'NEW-GROUP'
+    }
+  },
+  {
+    type: 'slider',
+    label: 'S',
+    name: 'S',
+    property: {
+      min: 30,
+      max: 300,
+      step: 10
+    }
+  },
+  {
+    type: 'textarea',
+    label: 'TA',
+    name: 'TA',
+    styles: {
+      flex: '1'
+    }
+  },
+  {
+    type: 'options',
+    label: 'OT',
+    name: 'OT',
+    editor: {
+      fullwidth: true
+    }
+  },
+  {
+    type: 'data',
+    label: 'DT',
+    name: 'DT'
+  },
+  {
+    type: 'color',
+    label: 'CL',
+    name: 'CL'
+  },
+  {
+    type: 'multiple-color',
+    label: 'CLS',
+    name: 'CLS'
+  },
+  {
+    type: 'image',
+    label: 'IM',
+    name: 'IM'
+  },
+  {
+    type: 'file',
+    label: 'FL',
+    name: 'FL',
+    property: {
+      multiple: true
+    }
+  },
+  {
+    type: 'crontab',
+    label: 'schedule',
+    name: 'schedule'
+  },
+  {
+    type: 'shift',
+    label: 'shift',
+    name: 'shift'
+  },
+  {
+    type: 'key-values',
+    label: 'key-values',
+    name: 'key-values'
+  },
+  {
+    type: 'hashtags',
+    label: 'hashtags',
+    name: 'hashtags'
+  },
+  {
+    type: '3dish',
+    label: '3dish',
+    name: '3dish'
+  }
+] as PropertySpec[]
+
+const value = {
+  ABC: [4, 3, 2, 1],
+  S: 290,
+  SLT: 'bbb',
+  NU: 1000,
+  IM: 'https://www.hatiolab.com/assets/img/arch-thingsboard.png',
+  CLS: ['yello', 'green'],
+  schedule: '* * * * * *',
+  shift: [
+    {
+      name: 'DAY',
+      fromDate: -1,
+      fromTime: '22:00',
+      toDate: 0,
+      toTime: '06:00'
+    },
+    {
+      name: 'SWING',
+      fromDate: 0,
+      fromTime: '06:00',
+      toDate: 0,
+      toTime: '14:00'
+    },
+    {
+      name: 'NIGHT',
+      fromDate: 0,
+      fromTime: '14:00',
+      toDate: 0,
+      toTime: '22:00'
+    }
+  ],
+  hashtags: ['abc', 'def'],
+  '3dish': {
+    dimension: { x: 1, y: 1, z: 1 },
+    position: { x: 1, y: 1, z: 1 },
+    rotate: { x: 1, y: 1, z: 1 },
+    scale: { x: 1, y: 1, z: 1 }
+  }
+}
+
+const Template: Story<ArgTypes> = () => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <ox-properties-dynamic-view .props=${properties} .value=${value}></ox-properties-dynamic-view>
+`
+
+export const Regular = Template.bind({})

package/stories/ox-properties-editor-textarea.stories.ts

@@ -0,0 +1,97 @@
+import { TemplateResult, html } from 'lit'
+
+import '../src/ox-property-editor-textarea.js'
+import '../src/ox-properties-dynamic-view.js'
+
+import { OxPropertyEditor } from '../src/ox-property-editor.js'
+import { PropertySpec } from '../src/types.js'
+
+export default {
+  title: 'TextArea',
+  component: 'ox-property-editor-textarea',
+  argTypes: {
+    title: { control: 'text' },
+    counter: { control: 'number' },
+    textColor: { control: 'color' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  title?: string
+  counter?: number
+  textColor?: string
+  slot?: TemplateResult
+}
+
+OxPropertyEditor.register({
+  string: 'ox-property-editor-string',
+  textarea: 'ox-property-editor-textarea',
+  javascript: 'ox-property-editor-textarea'
+})
+
+const properties = [
+  {
+    type: 'string',
+    label: 'ABC',
+    name: 'ABC'
+  },
+  {
+    type: 'textarea',
+    label: 'TA',
+    name: 'TA',
+    styles: {
+      flex: '1'
+    }
+  }
+] as PropertySpec[]
+
+const value = {
+  ABC: [4, 3, 2, 1],
+  TA: 'QWERTYUIOASDFGHJKZXCVBNM'
+}
+
+const Template: Story<ArgTypes> = () => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    #container {
+      height: 600px;
+      background-color: cyan;
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    ox-properties-dynamic-view {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+
+  <div id="container">
+    <ox-properties-dynamic-view .props=${properties} .value=${value}></ox-properties-dynamic-view>
+  </div>
+`
+
+export const Regular = Template.bind({})

package/dist/stories/index.stories.js

@@ -1,33 +0,0 @@
-import '../index.js';
-import { html } from 'lit';
-export default {
-    title: 'PropertyEditor',
-    component: 'ox-property-editor',
-    argTypes: {
-        title: { control: 'text' },
-        counter: { control: 'number' },
-        textColor: { control: 'color' }
-    }
-};
-const Template = ({ title = 'Hello world', counter = 5, textColor, slot }) => html `
-  <ox-board-viewer style="--board-viewer-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
-    ${slot}
-  </ox-board-viewer>
-`;
-export const Regular = Template.bind({});
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'My title'
-};
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-    counter: 123456
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } }
-};
-//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;uDACtD,SAAS,IAAI,OAAO,YAAY,KAAK,aAAa,OAAO;MAC1G,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAA;AACD,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAA","sourcesContent":["import '../index.js'\n\nimport { TemplateResult, html } from 'lit'\n\nexport default {\n  title: 'PropertyEditor',\n  component: 'ox-property-editor',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title?: string\n  counter?: number\n  textColor?: string\n  slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`\n  <ox-board-viewer style=\"--board-viewer-text-color: ${textColor || 'black'}\" .title=${title} .counter=${counter}>\n    ${slot}\n  </ox-board-viewer>\n`\n\nexport const Regular = Template.bind({})\n\nexport const CustomTitle = Template.bind({})\nCustomTitle.args = {\n  title: 'My title'\n}\n\nexport const CustomCounter = Template.bind({})\nCustomCounter.args = {\n  counter: 123456\n}\n\nexport const SlottedContent = Template.bind({})\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`\n}\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } }\n}\n"]}

package/stories/index.stories.ts

@@ -1,52 +0,0 @@
-import '../index.js'
-
-import { TemplateResult, html } from 'lit'
-
-export default {
-  title: 'PropertyEditor',
-  component: 'ox-property-editor',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  title?: string
-  counter?: number
-  textColor?: string
-  slot?: TemplateResult
-}
-
-const Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`
-  <ox-board-viewer style="--board-viewer-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
-    ${slot}
-  </ox-board-viewer>
-`
-
-export const Regular = Template.bind({})
-
-export const CustomTitle = Template.bind({})
-CustomTitle.args = {
-  title: 'My title'
-}
-
-export const CustomCounter = Template.bind({})
-CustomCounter.args = {
-  counter: 123456
-}
-
-export const SlottedContent = Template.bind({})
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`
-}
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } }
-}