@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/actions/link.md

@@ -0,0 +1,104 @@
+# Link
+
+```
+(pageId: string): void
+(params: {
+  back?: boolean,
+  home?: boolean,
+  input?: object,
+  newTab?:boolean,
+  pageId?: string,
+  url?: string,
+  urlQuery? object
+}): void
+```
+
+The `Link` action is used to link a user to another page. An input can be passed to the next page using either the
+`urlQuery`, which is visible to the user, but persists if the browser is refreshed, or by using the `input` object, which is not
+visible to the user.
+
+#### Parameters
+
+###### string
+The pageId of a page in the app to link to.
+
+###### object
+- `back: boolean`: Go to the previous page if true (has the same effect as using the browser back button).
+- `home: boolean`: Link to the home page. This is either the configured public or authenticated homepage, or the first page in the default menu visible to the user.
+- `input: object`: Object to set as the input for the linked page.
+- `newTab: boolean`: Open the link in a new tab.
+- `pageId: string`: The pageId of a page in the app to link to.
+- `url: string`: Link to an external url.
+- `urlQuery: object`: Object to set as the urlQuery for the linked page.
+
+#### Examples
+
+###### Shorthand, only specify pageId as string:
+```yaml
+- id: shorthand
+  type: Link
+  params: my_page_id
+```
+
+###### Specify pageId:
+```yaml
+- id: link_page_id
+  type: Link
+  params:
+    pageId: myPageId
+```
+
+###### Link to home page:
+```yaml
+- id: link_home
+  type: Link
+  params:
+    home: true
+```
+
+###### Link to an external url:
+```yaml
+- id: link_url
+  type: Link
+  params:
+    url: www.lowdefy.com
+```
+
+###### Open a link in a new tab:
+```yaml
+- id: link_new_tab
+  type: Link
+  params:
+    pageId: my_page_id
+    newTab: true
+```
+
+###### Set the urlQuery of the page that is linked to:
+```yaml
+- id: link_url_query
+  type: Link
+  params:
+    pageId: my_page_id
+    urlQuery:
+      id:
+        _state: id
+```
+
+###### Set the input of the page that is linked to:
+```yaml
+- id: link_input
+  type: Link
+  params:
+    pageId: my_page_id
+    input:
+      id:
+        _args: row.id
+```
+
+###### Go to the previous page:
+```yaml
+- id: link_back
+  type: Link
+  params:
+    back: true
+```

package/content/actions/login.md

@@ -0,0 +1,85 @@
+# Login
+
+```
+(params: {
+  authUrl?: {
+    urlQuery?: object,
+  }
+  callbackUrl?: {
+    home?: boolean
+    pageId?: string
+    url?: string
+    urlQuery?: object
+  }
+  providerId?: string,
+}): void
+```
+
+The `Login` action is used to start the user login flow. If only one provider is configured, or the `Login` action is called with a `providerId`, the `Login` action requests the Provider's authorization URL from the Lowdefy server, and redirects the user to this URL. Otherwise, the action redirects the user to a page where the user can choose which provider to use to sign in.
+
+The authorization url usually hosts a page where the user can input their credentials. After the user has logged in successfully, the user is redirected to the `api/auth/callback/[provider_id]` route in the Lowdefy app, where the rest of the authorization code flow is completed.
+
+The `callbackUrl` parameters of the Login action specify where the user is redirected after login is complete. If `callbackUrl` parameters not set, the user will return to the page from which the action was called.
+
+#### Parameters
+
+###### object
+- `authUrl: object`:
+  - `urlQuery: object`: Query parameters to set for the authorization URL.
+- `callbackUrl: object`:
+  - `home: boolean`: Redirect to the home page after the login flow is complete.
+  - `pageId: string`: The pageId of the page to redirect to after the login flow is complete.
+  - `url: string`: The URL to redirect to after the login flow is complete.
+  - `urlQuery: object`: The urlQuery to set for the page the user is redirected to after login.
+- `providerId: string`: The ID of the provider that should be used for login. If not set and only one provider is configured the configured provider will be used. Else the user will be redirected to a sign in page where they can choose a provider.
+
+#### Examples
+
+###### Login and return to the same page:
+```yaml
+- id: login
+  type: Login
+```
+
+###### Login with the google provider:
+```yaml
+- id: login_with_google
+  type: Login
+  params:
+    providerId: google
+```
+
+###### Login, with pageId and urlQuery:
+```yaml
+- id: login
+  type: Login
+  params:
+    callbackUrl:
+      pageId: page1
+      urlQuery:
+        url1: value
+```
+
+###### Only login if user is not logged in:
+```yaml
+- id: login
+  type: Login
+  skip:
+    _ne:
+      - _user: sub
+      - null
+```
+
+###### Request the signup page from the provider:
+```yaml
+- id: Signup
+  type: Button
+  events:
+    onClick:
+      - id: login
+        type: Login
+        params:
+          authUrl:
+            urlQuery:
+              screen_hint: signup
+```

package/content/actions/logout.md

@@ -0,0 +1,56 @@
+# Logout
+
+```
+(params: {
+  callbackUrl?: {
+    home?: boolean
+    pageId?: string
+    url?: string
+    urlQuery?: object
+  }
+  redirect?: boolean,
+}): void
+```
+
+When the `Logout` action is called, the user data and authorization cookies are cleared by the app.
+
+The `callbackUrl` parameters of the Logout action specify where the user is redirected after logout is complete. If `callbackUrl` parameters not set, the user will return to the page from which the action was called.
+
+#### Parameters
+
+###### object
+- `callbackUrl: object`:
+  - `home: boolean`: Redirect to the home page after the login flow is complete.
+  - `pageId: string`: The pageId of the page to redirect to after the login flow is complete.
+  - `url: string`: The URL to redirect to after the login flow is complete.
+  - `urlQuery: object`: The urlQuery to set for the page the user is redirected to after login.
+- `redirect: boolean`: If set to `false` the user session will be cleared, but the page will not be reloaded.
+
+#### Examples
+
+###### A logout button:
+```yaml
+- id: logout_button
+  type: Logout
+  properties:
+    title: Logout
+  events:
+    onClick:
+      - id: logout
+        type: Logout
+```
+
+###### Redirect to the `logged-out` page in the app after logout:
+```yaml
+- id: logout_button
+  type: Logout
+  properties:
+    title: Logout
+  events:
+    onClick:
+      - id: logout
+        type: Logout
+        params:
+          callbackUrl:
+            pageId: logged-out
+```

package/content/actions/pdfmake.md

@@ -0,0 +1,304 @@
+# PdfMake
+
+```
+(params: {
+  docDefinition: object,
+  tableLayouts?: object,
+  filename: string,
+  fonts?: object,
+}): void
+```
+
+The `PdfMake` action is used to generate and download a PDF file from a set of defined content using the [pdfMake](https://github.com/bpampuch/pdfmake) open-source library.
+
+#### Parameters
+
+###### object
+  - `docDefinition: object`: __Required__ - The document definition object which includes styling, columns, tables etc.
+  - `tableLayouts: object`: The table layouts for the generated PDF file.
+  - `filename: string`: __Required__ - The name for the generated PDF file.
+  - `fonts: object`: The fonts for the generated PDF file.
+###### See the [pdfMake docs](https://pdfmake.github.io/docs) for more info on these properties.
+
+#### Examples
+
+###### Generate a PDF (simple example):
+```yaml
+- id: generate_pdf_button
+  type: Button
+  properties:
+    title: Download PDF
+    icon: AiOutlineDownload
+  events:
+    onClick:
+      - id: make_pdf
+        type: PdfMake
+        params:
+          filename:
+            my_file_name.pdf
+          docDefinition:
+            pageMargins: 50
+            defaultStyle:
+              fontSize: 10
+            content:
+              - text: This pdf has been generated with Lowdefy and pdfMake.
+                bold: true
+```
+
+###### Generate a PDF (detailed example):
+```yaml
+- id: pdf_generate_button
+  type: Button
+  style:
+    textAlign: center
+  properties:
+    title: Generate & Download PDF
+    icon: AiOutlineDownload
+    color: '#6293F8'
+  events:
+    onMount:
+      - id: init_data
+        type: SetState
+        params:
+          invoice:
+            id: '0030135'
+            account_id: 'A-11344'
+            inv_date:
+              _date: now
+            subtotal: 397.034
+            discount: -19.8517
+            vat: 59.5551
+            total: 436.7374
+            balance: 413.2330
+            customer:
+              name: Service Center
+              phone: +123-456-7890
+              vat_nmr: 12-333-4567
+              address: |
+                123 Main St.
+                Anytown
+                CA
+                US
+                9999
+            services:
+              - name: Hosting and Maintannce
+                qty: 1
+                price: 235.90
+                code: X12-33C
+              - name: Developer Hours
+                qty: 16
+                price: 60.345
+                code: X12-39A
+              - name: Designer Hours
+                qty: 4
+                price: 40.122
+                code: X12-21A
+              - name: Project Management
+                qty: 2
+                price: 60.667
+                code: X12-49A
+    onClick:
+      - id: generate_pdf
+        type: PdfMake
+        params:
+          _ref: inv_template.yaml
+```
+
+###### `/inv_template.yaml`
+```yaml
+filename:
+  _nunjucks:
+    on:
+      _state: invoice
+    template: 'INV-{{ id }}-{{ inv_date | date("DD-MM-YYYY") }}.pdf'
+docDefinition:
+  pageMargins: [50, 25, 50, 70]
+  defaultStyle:
+    fontSize: 10
+  footer:
+    _function:
+      - columns:
+          - qr:
+              _string.concat:
+                - _location: origin
+                - /invoice?id="
+                - _state: invoice.id
+                - '"'
+            margin: [50, 0, 0, 0]
+            fit: '64'
+          - alignment: 'right'
+            fontSize: 7
+            margin: [0, 0, 50, 0]
+            text:
+              __nunjucks:
+                template: 'Page {{ page }} of {{ total }}'
+                on:
+                  page:
+                    __args: 0
+                  total:
+                    __args: 1
+  content:
+    - columns:
+        - width: 'auto'
+          margin: [0, 20, 0, 0]
+          stack:
+            - fontSize: 9
+              text: |
+
+            - fontSize: 7
+              text: |
+                Example Services Ltd.
+                112 Street Name
+                City, State 12345
+                Country
+                001-AB
+
+                +00-1234-5566
+                info@example.com
+
+                Vat Number: 444 5555 0000
+
+        - width: '*'
+          text: ' '
+        - width: 110
+          stack:
+            - margin: [0, 5, 0, 0]
+              alignment: right
+              fontSize: 7
+              text: |
+                Example Services Ltd.
+                Reg Number: 2001/22224/09
+
+    - margin: [0, 20, 0, 20]
+      text: Customer Invoice
+      bold: true
+      alignment: center
+      fontSize: 14
+    - columns:
+        - width: 150
+          bold: true
+          text: |
+            INVOICE NUMBER:
+            DATE ISSUED:
+            ACCOUNT NUMBER:
+        - width: '*'
+          text:
+            _nunjucks:
+              template: |
+                {{ id }}
+                {{ inv_date | date("YYYY/MM/DD") }}
+                {{ account_id }}
+              on:
+                _state: invoice
+        - width: 150
+          bold: true
+          text: |
+            CUSTOMER:
+            ADDRESS:
+        - width: '*'
+          text:
+            _nunjucks:
+              template: |
+                {{ customer.name }}
+                {{ customer.address }}
+              on:
+                _state: invoice
+
+    - layout: 'lightHorizontalLines'
+      margin: [0, 10, 0, 0]
+      table:
+        widths: [70, '*', 70, 70, 70]
+        headerRows: 1
+        body:
+          _json.parse:
+            _nunjucks:
+              on:
+                services:
+                  _state: invoice.services
+              template: |
+                [
+                  [
+                    { "text": "ITEM CODE", "bold": true },
+                    { "text": "SERVICE", "bold": true },
+                    { "text": "UNIT PRICE", "bold": true, "alignment": "right"  },
+                    { "text": "QTY", "bold": true, "alignment": "right"  },
+                    { "text": "COST", "bold": true, "alignment": "right" }
+                  ],
+                  {% for item in services %}
+                  [
+                    "{{ loop.index }}: {{ item.code }}",
+                    "{{ item.name | safe }}",
+                    { "text": "{{ ( item.price / item.qty ).toFixed(2) }}", "alignment": "right"},
+                    { "text": "{{ item.qty }}", "alignment": "right"},
+                    { "text": "{{ item.price.toFixed(2) }}", "alignment": "right"}
+                    {% if loop.last %} ] {% else %} ], {% endif %}
+                  {% endfor %}
+                ]
+    - layout: 'headerLineOnly'
+      margin: [0, -5, 0, 0]
+      table:
+        widths: ['*', 70, 70, 70]
+        headerRows: 1
+        body:
+          - - ''
+            - ''
+            - ''
+            - ''
+          - - ''
+            - alignment: right
+              text: 'Subtotal:'
+            - ''
+            - alignment: right
+              text:
+                _number.toFixed:
+                  - _state: invoice.subtotal
+                  - 2
+          - - ''
+            - alignment: right
+              text: 'Discount (5%):'
+            - ''
+            - alignment: right
+              text:
+                _number.toFixed:
+                  - _state: invoice.discount
+                  - 2
+          - - ''
+            - alignment: right
+              text: 'VAT (15%):'
+            - ''
+            - alignment: right
+              text:
+                _number.toFixed:
+                  - _state: invoice.vat
+                  - 2
+          - - ''
+            - alignment: right
+              text: 'Total:'
+            - ''
+            - alignment: right
+              text:
+                _number.toFixed:
+                  - _state: invoice.total
+                  - 2
+    - layout: 'headerLineOnly'
+      margin: [0, -5, 0, 0]
+      table:
+        widths: ['*', 70, 70, 70]
+        headerRows: 1
+        body:
+          - - ''
+            - ''
+            - ''
+            - ''
+          - - ''
+            - alignment: right
+              bold: true
+              text: 'BALANCE DUE:'
+            - ''
+            - alignment: right
+              bold: true
+              text:
+                _number.toFixed:
+                  - _state: invoice.balance
+                  - 2
+```

package/content/actions/request.md

@@ -0,0 +1,67 @@
+# Request
+
+```
+(params: { all: boolean, holdValue?: boolean }): void
+(params: { requestId: string, holdValue?: boolean }): void
+(params: { requestIds: string[], holdValue?: boolean }): void
+(params: { requestId: string }): void
+(params: { requestIds: string[] }): void
+```
+
+The `Request` action calls a request, or if used during an `onInit` event, calls those requests while a page loads.
+`Request` can be used to call all requests on a page, a list of requests, or a single request. The `Request` action is synchronous, actions defined after
+it will only run once all the called requests have returned.
+
+To call requests that load data, the `onInitAsync`, `onMount` and `onMountAsync` events can be used. These will execute the actions while the page begins to render. If the `onInit` event is used, the page will only start rendering after the actions have completed.
+
+`Request` can be called without any parameters to call all requests in the page. It can also be called with a list of requestIds or a single requestId to call.
+
+#### Parameters
+
+###### object
+- `all: boolean`: All requests in the page are called if `all` is set to true.
+- `requestId: string`: A single requestId to call. Use this object form when you also want to set `holdValue`.
+- `requestIds: string[]`: An array of requestIds to call. Use this object form when you also want to set `holdValue`.
+- `holdValue: boolean`: Optional. When `true`, the previous response value is retained on `requests[id][0].response` while the new request is loading. UI bound to `_request: <id>` continues to display the previous response instead of going to `null`. The previous response is also retained if the new request errors out — inspect `_request_details: <id>.error` to detect failures. Defaults to `false`.
+
+###### string
+A requestId of the request to call.
+
+###### string[]
+An array of requestIds of the requests to call.
+
+#### Examples
+
+###### Call a single request:
+```yaml
+- id: call_one_request
+  type: Request
+  params: my_request_id
+```
+
+###### Call a list of requests:
+```yaml
+- id: call_many_requests
+  type: Request
+  params:
+    - my_request_id_1
+    - my_request_id_2
+    - my_request_id_3
+```
+###### Call all requests:
+
+```yaml
+- id: call_all
+  type: Request
+  params:
+    all: true
+```
+
+###### Refresh a table without flashing the previous data:
+```yaml
+- id: refresh_table
+  type: Request
+  params:
+    requestId: my_table_request
+    holdValue: true
+```

package/content/actions/reset.md

@@ -0,0 +1,27 @@
+# Reset
+
+```
+(void): void
+```
+
+The `Reset` actions resets a page to the state it was in just after the `onInit` event was executed. This clears the user's inputs.
+
+>  The `Reset` action resets the state to the state after the `onInit` event was executed, and the `onMount` events are not executed after the reset happens. This might cause unexpected behavior if you used an `onInitAsync`, `onMount` or `onMountAsync` event to initialize the state.
+
+#### Parameters
+
+The `Reset` action does not take any parameters.
+
+#### Examples
+
+###### A reset button:
+```yaml
+- id: reset_button
+  type: Button
+  properties:
+    title: Reset
+  events:
+    onClick:
+      - id: reset
+        type: Reset
+```