@3t-transform/threeteeui 0.0.1

package/dist/collection/components/patterns/tttx-worksheet/tttx-worksheet.js

@@ -0,0 +1,70 @@
+import { Host, h } from '@stencil/core';
+import dxToolbar from 'devextreme/esm/ui/toolbar';
+import dxButton from 'devextreme/esm/ui/button';
+export class TttxWorksheet {
+  constructor() {
+    this.pageSize = 'large';
+  }
+  componentDidLoad() {
+    this.footer();
+  }
+  pageSizeIsNumeric() {
+    return /^\d+$/.test(this.pageSize);
+  }
+  pageSizeClasses(baseClassName) {
+    return this.pageSizeIsNumeric() ? baseClassName : `${baseClassName}--${this.pageSize}`;
+  }
+  footer() {
+    if (!['medium', 'small'].includes(this.pageSize)) {
+      return;
+    }
+    new dxToolbar(this.footerBar, {
+      items: [
+        {
+          location: 'after',
+          widget: dxButton,
+          options: {
+            text: 'save'
+          }
+        }
+      ]
+    });
+  }
+  render() {
+    const customPageWidth = this.pageSizeIsNumeric ? { width: `${this.pageSize}px` } : {};
+    return (h(Host, null, h("div", { class: this.pageSizeClasses('worksheet__container'), style: Object.assign({}, customPageWidth) }, h("slot", null), h("div", { class: `worksheet__footer--${this.pageSize}`, ref: el => (this.footerBar = el) }))));
+  }
+  static get is() { return "tttx-worksheet"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-worksheet.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-worksheet.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "pageSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'large' | 'medium' | 'small' | string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "page-size",
+        "reflect": false,
+        "defaultValue": "'large'"
+      }
+    };
+  }
+}

package/dist/collection/components/patterns/tttx-worksheet/tttx-worksheet.stories.js

@@ -0,0 +1,44 @@
+export default {
+  title: 'Patterns/Worksheet',
+  argTypes: {
+    pageSize: {
+      options: [
+        'large',
+        'medium',
+        'small',
+        '800'
+      ],
+      control: {
+        type: 'select'
+      },
+      description: 'A control on the width of the worksheet. Accepts three preset sizes (large, medium and small), as well as a number of pixels. Medium and small worksheets render a footer'
+    }
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    },
+    docs: {
+      transformSource: source => {
+        var _a;
+        const [, output] = (_a = source.match(/<span decorator-start \/>([\s\S]*?)<span decorator-end \/>/)) !== null && _a !== void 0 ? _a : [];
+        return output;
+      }
+    }
+  },
+  decorators: [
+    (Story) => `
+      <div style="height: 500px; transform: translateZ(0)">
+        <span decorator-start />
+          ${Story()}
+        <span decorator-end />
+      </div>
+    `
+  ]
+};
+const Template = (args) => `
+  <tttx-worksheet
+    ${args.pageSize ? `page-size=${args.pageSize}` : ''}>
+  </tttx-worksheet>
+`;
+export const Default = Template.bind({});

package/dist/collection/docs/gettingstarted-developer.stories.js

@@ -0,0 +1,9 @@
+export default {
+  title: 'Getting Started/Developer',
+};
+const Template = () => `
+<tttx-typography>
+    <p>Quick start guide for developers</p>
+</tttx-typography>
+`;
+export const Default = Template.bind({});

package/dist/collection/docs/template.stories.js

@@ -0,0 +1,10 @@
+export default {
+  title: 'Getting Started/Designer',
+};
+const Template = () => `
+<tttx-typography>
+    <h1>Getting Started</h1>
+    <p>....</p>
+</tttx-typography>
+`;
+export const Default = Template.bind({});

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,23 @@
+/* tttx custom elements */
+export { TttxPage as TttxPage } from '../types/components/patterns/tttx-page/tttx-page';
+export { TttxWorksheet as TttxWorksheet } from '../types/components/patterns/tttx-worksheet/tttx-worksheet';
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { TttxPage, defineCustomElement as defineCustomElementTttxPage } from './tttx-page.js';
+export { TttxWorksheet, defineCustomElement as defineCustomElementTttxWorksheet } from './tttx-worksheet.js';

package/dist/components/tttx-page.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxPage extends Components.TttxPage, HTMLElement {}
+export const TttxPage: {
+  prototype: TttxPage;
+  new (): TttxPage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;