@openremote/or-mwc-components 1.3.0-snapshot.20250117163435 → 1.3.0-snapshot.20250120082100

package/stories/input/button.stories.js

@@ -1,37 +0,0 @@
-import { getWcStorybookHelpers } from "wc-storybook-helpers";
-import {InputType, OrMwcInput} from "@openremote/or-mwc-components/or-mwc-input";
-import { html } from 'lit';
-
-const { events, args, argTypes, template } = getWcStorybookHelpers("or-mwc-input");
-
-/** @type { import('@storybook/web-components').Meta } */
-const meta = {
-  title: "Playground/or-mwc-input/button",
-  component: "or-mwc-input",
-  args: args,
-  argTypes: {
-    ...argTypes,
-    type: {
-      options: Object.values(InputType)
-    }
-  },
-  parameters: {
-    actions: {
-      handles: [...events, "or-mwc-input-changed"]
-    },
-    docs: {
-      subtitle: "<or-mwc-input>",
-    }
-  }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Primary = {
-  render: (args) => template(args),
-  args: {
-    type: InputType.BUTTON,
-    label: "Button"
-  }
-};
-
-export default meta;

package/stories/input/checkbox.stories.js

@@ -1,37 +0,0 @@
-import { getWcStorybookHelpers } from "wc-storybook-helpers";
-import {InputType, OrMwcInput} from "@openremote/or-mwc-components/or-mwc-input";
-import { html } from 'lit';
-
-const { events, args, argTypes, template } = getWcStorybookHelpers("or-mwc-input");
-
-/** @type { import('@storybook/web-components').Meta } */
-const meta = {
-  title: "Playground/or-mwc-input/checkbox",
-  component: "or-mwc-input",
-  args: args,
-  argTypes: {
-    ...argTypes,
-    type: {
-      options: Object.values(InputType)
-    }
-  },
-  parameters: {
-    actions: {
-      handles: [...events, "or-mwc-input-changed"]
-    },
-    docs: {
-      subtitle: "<or-mwc-input>",
-    }
-  }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Primary = {
-  render: (args) => template(args),
-  args: {
-    type: InputType.CHECKBOX,
-    label: "Checkbox"
-  }
-};
-
-export default meta;

package/stories/input/color.stories.js

@@ -1,36 +0,0 @@
-import { getWcStorybookHelpers } from "wc-storybook-helpers";
-import {InputType} from "@openremote/or-mwc-components/or-mwc-input";
-import { html } from 'lit';
-
-const { events, args, argTypes, template } = getWcStorybookHelpers("or-mwc-input");
-
-/** @type { import('@storybook/web-components').Meta } */
-const meta = {
-  title: "Playground/or-mwc-input/colour",
-  component: "or-mwc-input",
-  args: args,
-  argTypes: {
-    ...argTypes,
-    type: {
-      options: Object.values(InputType)
-    }
-  },
-  parameters: {
-    actions: {
-      handles: [...events, "or-mwc-input-changed"]
-    },
-    docs: {
-      subtitle: "<or-mwc-input>",
-    }
-  }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Primary = {
-  render: (args) => template(args),
-  args: {
-    type: InputType.COLOUR
-  }
-};
-
-export default meta;

package/stories/input/date.stories.js

@@ -1,36 +0,0 @@
-import { getWcStorybookHelpers } from "wc-storybook-helpers";
-import {InputType} from "@openremote/or-mwc-components/or-mwc-input";
-import { html } from 'lit';
-
-const { events, args, argTypes, template } = getWcStorybookHelpers("or-mwc-input");
-
-/** @type { import('@storybook/web-components').Meta } */
-const meta = {
-  title: "Playground/or-mwc-input/date",
-  component: "or-mwc-input",
-  args: args,
-  argTypes: {
-    ...argTypes,
-    type: {
-      options: Object.values(InputType)
-    }
-  },
-  parameters: {
-    actions: {
-      handles: [...events, "or-mwc-input-changed"]
-    },
-    docs: {
-      subtitle: "<or-mwc-input>",
-    }
-  }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Primary = {
-  render: (args) => template(args),
-  args: {
-    type: InputType.DATE
-  }
-};
-
-export default meta;

package/stories/input/general.stories.js

@@ -1,119 +0,0 @@
-import {getWcStorybookHelpers} from "wc-storybook-helpers";
-import {InputType, OrMwcInput} from "@openremote/or-mwc-components/or-mwc-input";
-import {html} from 'lit';
-
-const {events, args, argTypes, template} = getWcStorybookHelpers("or-mwc-input");
-
-/** @type { import('@storybook/web-components').Meta } */
-const meta = {
-  title: "Playground/or-mwc-input/general",
-  component: "or-mwc-input",
-  args: args,
-  argTypes: {
-    ...argTypes,
-    type: {
-      options: Object.values(InputType)
-    }
-  },
-  parameters: {
-    actions: {
-      handles: [...events, "or-mwc-input-changed"]
-    },
-    docs: {
-      subtitle: "<or-mwc-input>",
-    }
-  }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Primary = {
-  render: (args) => template(args),
-  args: {
-    type: InputType.NUMBER,
-    value: 100
-  }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Select = {
-  render: (_args) => {
-    const options = [
-      ["one", "One"],
-      ["two", "Two"],
-      ["three", "Three"],
-      ["four", "Four"],
-      ["five", "Five"],
-      ["six", "Six"],
-      ["seven", "Seven"],
-      ["eight", "Eight"],
-      ["nine", "Nine"],
-      ["ten", "Ten"],
-      ["eleven", "Eleven"],
-      ["twelve", "Twelve"],
-      ["thirteen", "Thirteen"],
-      ["fourteen", "Fourteen"],
-      ["fifteen", "Fifteen"],
-      ["sixteen", "Sixteen"],
-      ["seventeen", "Seventeen"],
-      ["eighteen", "Eighteen"],
-      ["nineteen", "Nineteen"],
-      ["twenty", "Twenty"],
-      ["twenty-one", "Twenty One"],
-      ["twenty-two", "Twenty Two"],
-      ["twenty-three", "Twenty Three"],
-      ["twenty-four", "Twenty Four"],
-      ["twenty-five", "Twenty Five"],
-      ["twenty-six", "Twenty Six"],
-      ["twenty-seven", "Twenty Seven"],
-      ["twenty-eight", "Twenty Eight"],
-      ["twenty-nine", "Twenty Nine"],
-      ["thirty", "Thirty"]
-    ];
-    const searchProviderAsync = async (search) => {
-      console.log(search);
-      return options;
-    }
-    const searchProvider = (search) => {
-      console.log(search);
-      return options;
-    }
-    return html`
-      <div style="display: flex; gap: 12px;">
-        <or-mwc-input .type="${InputType.SELECT}" .value="${options[0][0]}" .options="${options}"
-                      label="Search for an async value"
-                      outlined rounded .searchProvider=${searchProviderAsync} style="width: 300px;"
-        ></or-mwc-input>
-        <or-mwc-input .type="${InputType.SELECT}" .value="${options[0][0]}" .options="${options}"
-                      label="Search for a value"
-                      outlined rounded .searchProvider=${searchProvider} style="width: 300px;"
-        ></or-mwc-input>
-        <or-mwc-input .type="${InputType.SELECT}" .value="${options[0][0]}" .options="${options}" label="Select a value"
-                      outlined rounded style="width: 300px;"
-        ></or-mwc-input>
-      </div>
-    `;
-  }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Example = {
-  render: (args) => html`
-    <div style="display: flex; gap: 16px; align-items: center;">
-      ${template(args[0])}
-      ${template(args[1])}
-    </div>
-  `,
-  args: [{
-    type: InputType.NUMBER,
-    value: 100,
-    outlined: true,
-    comfortable: true,
-    compact: true
-  }, {
-    type: InputType.BUTTON,
-    label: "submit",
-    outlined: true
-  }]
-};
-
-export default meta;

package/stories/input/input.stories.js

@@ -1,37 +0,0 @@
-import { getWcStorybookHelpers } from "wc-storybook-helpers";
-import {InputType} from "@openremote/or-mwc-components/or-mwc-input";
-import { html } from 'lit';
-
-const { events, args, argTypes, template } = getWcStorybookHelpers("or-mwc-input");
-
-/** @type { import('@storybook/web-components').Meta } */
-const meta = {
-  title: "Playground/or-mwc-input/input",
-  component: "or-mwc-input",
-  args: args,
-  argTypes: {
-    ...argTypes,
-    type: {
-      options: Object.values(InputType)
-    }
-  },
-  parameters: {
-    actions: {
-      handles: [...events, "or-mwc-input-changed"]
-    },
-    docs: {
-      subtitle: "<or-mwc-input>",
-    }
-  }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Primary = {
-  render: (args) => template(args),
-  args: {
-    type: InputType.TEXT,
-    label: "Enter text"
-  }
-};
-
-export default meta;

package/stories/input/select.stories.js

@@ -1,43 +0,0 @@
-import { getWcStorybookHelpers } from "wc-storybook-helpers";
-import {InputType} from "@openremote/or-mwc-components/or-mwc-input";
-import { html } from 'lit';
-
-const { events, args, argTypes, template } = getWcStorybookHelpers("or-mwc-input");
-
-/** @type { import('@storybook/web-components').Meta } */
-const meta = {
-  title: "Playground/or-mwc-input/select",
-  component: "or-mwc-input",
-  args: args,
-  argTypes: {
-    ...argTypes,
-    type: {
-      options: Object.values(InputType)
-    }
-  },
-  parameters: {
-    actions: {
-      handles: [...events, "or-mwc-input-changed"]
-    },
-    docs: {
-      subtitle: "<or-mwc-input>",
-      story: {
-        height: "240px"
-      }
-    }
-  }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Primary = {
-  render: (args) => template(args),
-  args: {
-    type: InputType.SELECT,
-    label: "Select amount",
-    placeHolder: "Select amount",
-    options: JSON.stringify(["One", "Two", "Three"]),
-    fullWidth: true
-  }
-};
-
-export default meta;

package/stories/table.stories.js

@@ -1,73 +0,0 @@
-import { getWcStorybookHelpers } from "wc-storybook-helpers";
-import "@openremote/or-mwc-components/or-mwc-table";
-
-const { events, args, argTypes, template } = getWcStorybookHelpers("or-mwc-table");
-
-/** @type { import('@storybook/web-components').Meta } */
-const meta = {
-    title: "Playground/or-mwc-table",
-    component: "or-mwc-table",
-    args: args,
-    argTypes: argTypes,
-    parameters: {
-        actions: {
-            handles: events
-        },
-        docs: {
-          subtitle: "<or-mwc-table>"
-        }
-    }
-};
-
-/** @type { import('@storybook/web-components').StoryObj } */
-export const Primary = {
-    args: {
-        columns: JSON.stringify([{title: "Column 1"}, {title: "Column 2"}, {title: "Column 3"}]),
-        rows: JSON.stringify([
-            {content: ["Row 1, Column 1", "Row 1, Column 2", "Row 1, Column 3"]},
-            {content: ["Row 2, Column 1", "Row 2, Column 2", "Row 2, Column 3"]}
-        ])
-    },
-    parameters: {
-        docs: {
-            source: {
-                code: getExampleCode()
-            },
-            story: {
-                height: '240px'
-            }
-        }
-    },
-    render: (args) => template(args)
-};
-
-/* ------------------------------------------------------- */
-/*                   UTILITY FUNCTIONS                     */
-/* ------------------------------------------------------- */
-
-function getExampleCode() {
-
-    //language=javascript
-    return `
-import {TableColumn, TableRow} from "@openremote/or-mwc-components/or-mwc-table";
-import "@openremote/or-mwc-components/or-mwc-table"; // this is necessary
-
-// Set up table columns
-const columns: TableColumn[] = [{title: "Column 1"}, {title: "Column 2"}, {title: "Column 3"}];
-
-// Set up table rows
-const rows: TableRow[] = [
-    {content: ["Row 1, Column 1", "Row 1, Column 2", "Row 1, Column 3"]},
-    {content: ["Row 2, Column 1", "Row 2, Column 2", "Row 2, Column 3"]}
-];
-
-// (IF NOT USING LIT; you should parse the objects to JSON strings)
-// const columnsStr = JSON.stringify(columns);
-// const rowsStr = JSON.stringify(rows);
-
-// in your HTML code use this, and inject them;
-<or-mwc-table columns="columns" rows="rows"></or-mwc-table>
-`
-}
-
-export default meta;