@kubex/zinc 0.0.2 → 1.0.0

package/docs/pages/components/panel.md

@@ -0,0 +1,124 @@
+---
+meta:
+  title: Panel
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-panel caption="Example Panel" description="Full Example of a panel" flush tabbed>
+
+  <!-- All the panel actions -->
+  <zn-chip slot="actions" icon="home">Awesome</zn-chip>
+  <zn-chip slot="actions" icon="phone" type="info">example</zn-chip>
+
+  <!-- Example panel content -->
+  <zn-tabs flush>
+    <zn-navbar slot="top">
+      <li tab>Customer</li>
+      <li tab="something-else">Something Else</li>
+    </zn-navbar>
+
+    <zn-sp id="" no-gap divide>
+      <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
+      <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
+    </zn-sp>
+
+    <zn-sp id="something-else" no-gap divide>
+      <zn-inline-edit padded inline caption="Label 3" value="This is not Awesome"></zn-inline-edit>
+      <zn-inline-edit padded inline caption="Label 4" value="This is not Awesome"></zn-inline-edit>
+    </zn-sp>
+  </zn-tabs>
+
+  <!-- Panel Footer -->
+  <span slot="footer">
+    Some awesome footer information
+  </span>
+</zn-panel>
+```
+
+## Examples
+
+### Basic Panel
+
+Basic panels are just that, basic. However, they are a key component in the zn framework as most content is designed
+around been displayed in a panel.
+
+```html:preview
+<zn-panel caption="Example Panel" description="Simple Panels are the best">
+  <div>Panel Content</div>
+</zn-panel>
+```
+
+### Flush with Tabs
+
+`flush` panels are designed to be used in a layout where the content of the panel needs to take up the entire width of
+the
+panel. This can be useful when using other components such as `zn-tabs`.
+
+```html:preview
+
+<zn-panel caption="Example Panel" flush tabbed>
+
+  <!-- All the panel actions -->
+  <zn-chip slot="actions" icon="home">Awesome</zn-chip>
+  <zn-chip slot="actions" icon="phone" type="info">example</zn-chip>
+
+  <!-- Example panel content -->
+  <zn-tabs flush>
+    <zn-navbar slot="top">
+      <li tab>Customer</li>
+      <li tab="something-else">Something Else</li>
+    </zn-navbar>
+
+    <zn-sp id="" no-gap divide>
+      <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
+      <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
+    </zn-sp>
+
+    <zn-sp id="something-else" no-gap divide>
+      <zn-inline-edit padded inline caption="Label 3" value="This is not Awesome"></zn-inline-edit>
+      <zn-inline-edit padded inline caption="Label 4" value="This is not Awesome"></zn-inline-edit>
+    </zn-sp>
+  </zn-tabs>
+
+  <!-- Panel Footer -->
+  <span slot="footer">
+    Some awesome footer information
+  </span>
+</zn-panel>
+```
+
+### Moving the caption
+
+```html:preview
+
+<zn-panel flush>
+
+  <!-- Example panel content -->
+  <zn-tabs caption="Example Panel">
+    <zn-navbar slot="top">
+      <li tab>Customer</li>
+      <li tab="something-else">Something Else</li>
+    </zn-navbar>
+
+    <zn-sp id="" no-gap divide>
+      <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
+      <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
+    </zn-sp>
+
+    <zn-sp id="something-else" no-gap divide>
+      <zn-inline-edit padded inline caption="Label 3" value="This is not Awesome"></zn-inline-edit>
+      <zn-inline-edit padded inline caption="Label 4" value="This is not Awesome"></zn-inline-edit>
+    </zn-sp>
+  </zn-tabs>
+
+  <!-- Panel Footer -->
+  <span slot="footer">
+    Some awesome footer information
+  </span>
+</zn-panel>
+```
+
+

package/docs/pages/components/popup.md

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Popup
+  description:
+layout: component
+---
+
+```html:preview
+<zn-popup></zn-popup>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/progress-bar.md

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Progress Bar
+  description:
+layout: component
+---
+
+```html:preview
+<zn-progress-bar></zn-progress-bar>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/progress-tile.md

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Progress Tile
+  description:
+layout: component
+---
+
+```html:preview
+<zn-progress-tile></zn-progress-tile>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/query-builder.md

@@ -0,0 +1,148 @@
+---
+meta:
+  title: Query Builder
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-query-builder
+  filters="[
+      {
+        &quot;id&quot;:&quot;title&quot;,
+        &quot;name&quot;:&quot;Title&quot;,
+        &quot;operators&quot;:[
+          &quot;eq&quot;
+        ]
+      },
+      {
+        &quot;id&quot;:&quot;active&quot;,
+        &quot;name&quot;:&quot;Active&quot;,
+        &quot;type&quot;:&quot;boolean&quot;,
+        &quot;operators&quot;:[
+          &quot;eq&quot;
+        ]
+      },
+      {
+        &quot;id&quot;:&quot;author&quot;,
+        &quot;name&quot;:&quot;Author&quot;,
+        &quot;operators&quot;:[
+          &quot;eq&quot;,
+          &quot;fuzzy&quot;
+        ]
+      }
+    ]">
+</zn-query-builder>
+```
+
+## Examples
+
+### Query String
+
+This example will show the produced query string from the selected parameters.
+
+```html:preview
+
+<zn-query-builder
+  id="query-string-example"
+  filters="[
+      {
+        &quot;id&quot;:&quot;title&quot;,
+        &quot;name&quot;:&quot;Title&quot;,
+        &quot;operators&quot;:[
+          &quot;eq&quot;
+        ]
+      },
+      {
+        &quot;id&quot;:&quot;author&quot;,
+        &quot;name&quot;:&quot;Author&quot;,
+        &quot;operators&quot;:[
+          &quot;eq&quot;,
+          &quot;fuzzy&quot;
+        ]
+      },
+      {
+        &quot;id&quot;:&quot;genre&quot;,
+        &quot;name&quot;:&quot;Genre&quot;,
+        &quot;options&quot;:{
+          &quot;action&quot;:&quot;Action&quot;,
+          &quot;comedy&quot;:&quot;Comedy&quot;,
+          &quot;drama&quot;:&quot;Drama&quot;,
+          &quot;fantasy&quot;:&quot;Fantasy&quot;,
+          &quot;horror&quot;:&quot;Horror&quot;,
+          &quot;mystery&quot;:&quot;Mystery&quot;,
+          &quot;romance&quot;:&quot;Romance&quot;,
+          &quot;thriller&quot;:&quot;Thriller&quot;,
+          &quot;sci-fi&quot;:&quot;Science Fiction&quot;
+        },
+        &quot;maxOptionsVisible&quot;: &quot;3&quot;,
+        &quot;operators&quot;:[
+          &quot;eq&quot;,
+          &quot;in&quot;
+        ]
+      },
+      {
+        &quot;id&quot;:&quot;rating&quot;,
+        &quot;name&quot;:&quot;Rating&quot;,
+        &quot;type&quot;:&quot;number&quot;,
+        &quot;operators&quot;:[
+          &quot;eq&quot;,
+          &quot;gt&quot;,
+          &quot;gte&quot;,
+          &quot;lt&quot;,
+          &quot;lte&quot;
+        ]
+      },
+      {
+        &quot;id&quot;:&quot;created&quot;,
+        &quot;name&quot;:&quot;Created&quot;,
+        &quot;type&quot;:&quot;date&quot;,
+        &quot;operators&quot;:[
+          &quot;eq&quot;,
+          &quot;before&quot;,
+          &quot;after&quot;
+        ]
+      }
+    ]">
+</zn-query-builder>
+
+<br>
+
+<div style="word-wrap: break-word;"><b>Query String:</b> </span><span class="query-string"></span></div>
+```
+
+## Types
+
+| Name      |
+|-----------|
+| `bool`    |
+| `boolean` |
+| `date`    |
+| `number`  |
+
+## Comparators
+
+| Name              | Description                  |
+|-------------------|------------------------------|
+| `Eq`              | Equals                       |
+| `Neq`             | Not Equals                   |
+| `Before`          | Was Before                   |
+| `After`           | Was After                    |
+| `In`              | In                           |
+| `MatchPhrasePre`  | Match Phrase Prefix          |
+| `NMatchPhrasePre` | Does Not Match Phrase Prefix |
+| `MatchPhrase`     | Match Phrase                 |
+| `NMatchPhrase`    | Does Not Match Phrase        |
+| `Match`           | Match                        |
+| `NMatch`          | Does Not Match               |
+| `Starts`          | Starts With                  |
+| `NStarts`         | Does Not Start With          |
+| `Wild`            | Wildcard Match               |
+| `NWild`           | Does Not Match Wildcard      |
+| `Fuzzy`           | Fuzzy Match With             |
+| `NFuzzy`          | Does Not Match Fuzzy With    |
+| `Gte`             | Greater Than or Equals       |
+| `Gt`              | Greater Than                 |
+| `Lt`              | Less Than                    |
+| `Lte`             | Less Than or Equals          |

package/docs/pages/components/radio-group.md

@@ -0,0 +1,129 @@
+---
+meta:
+  title: Radio Group
+  description:
+layout: component
+---
+
+```html:preview
+<zn-radio-group>
+  <zn-radio value="1">Option 1</zn-radio>
+  <zn-radio value="2">Option 2</zn-radio>
+  <zn-radio value="3">Option 3</zn-radio>
+</zn-radio-group>
+```
+
+## Examples
+
+### Basic Radio Group
+
+A basic radio group lays out multiple radio items vertically.
+
+```html:preview
+<zn-radio-group label="Financial products permissions" name="a">
+  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
+  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
+  <zn-radio value="export">Export transactions</zn-radio>
+</zn-radio-group>
+```
+
+### Help Text
+
+Add descriptive help text to a radio group with the `help-text` attribute. For help texts that contain HTML, use the
+`help-text` slot instead.
+
+```html:preview
+<zn-radio-group label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" name="a">
+  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
+  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
+  <zn-radio value="export">Export transactions</zn-radio>
+</zn-radio-group>
+```
+
+### Label with Tooltip
+
+Use the `label-tooltip` attribute to add text that appears in a tooltip triggered by an info icon next to the label.
+
+:::tip
+**Usage:** Use a **label tooltip** to provide helpful but non-essential instructions or examples to guide people when
+making a selection from the radio group. Use **help text** to communicate instructions or requirements for making a
+selection without errors.
+:::
+
+```html:preview
+<zn-radio-group name="a" label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" label-tooltip="These apply to cash account only">
+  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
+  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
+  <zn-radio value="export">Export transactions</zn-radio>
+</zn-radio-group>
+```
+
+### Horizontal Radio Group
+
+Use the `horizontal` attribute to lay out multiple radio items horizontally.
+
+:::tip
+**Making the horizontal radio group responsive:** Use a container query to adjust the layout of the radio group's
+`form-control-input` part (which wraps the radio items) at a custom target breakpoint (the container's width when the
+horizontal layout breaks). In the example below, a container query checks the width of the radio group container and
+switches the layout to vertical (setting `flex-direction` to `column`) when the container becomes too narrow for a
+horizontal layout.
+:::
+
+```html:preview
+<zn-radio-group name="a" id="permissions" label="Financial products permissions" horizontal>
+  <zn-radio value="manage-transfers">Manage transfers</zn-radio>
+  <zn-radio value="export">Export transactions</zn-radio>
+</zn-radio-group>
+
+<style>
+  zn-radio-group[id="permissions"] {
+    container-type: inline-size;
+    container-name: permissions;
+  }
+
+  @container permissions (max-width: 400px) {
+    zn-radio-group[id="permissions"]::part(form-control-input) {
+      flex-direction: column;
+    }
+  }
+</style>
+```
+
+### Contained Radio Group
+
+Use the `contained` attribute to draw a card-like container around each radio item in the radio group. This style
+is useful for giving more emphasis to the list of options.
+
+This option can be combined with the `horizontal` attribute.
+
+```html:preview
+<zn-radio-group name="a" label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" contained>
+  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
+  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
+  <zn-radio value="export">Export transactions</zn-radio>
+</zn-radio-group>
+<br/>
+<br/>
+<zn-radio-group name="b" label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" contained horizontal>
+  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
+  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
+</zn-radio-group>
+```
+
+:::tip
+When [radios](/components/radio) are wrapped with the Radio Group , adding the `contained` attribute to the
+parent Radio Group or to _any_ radio in the group will create `contained` radios for the entire group.
+:::
+
+### Disabling Options
+
+Radios can be disabled by adding the `disabled` attribute to the respective options inside the radio group.
+
+```html:preview
+<zn-radio-group name="a"  label="Financial products permissions" help-text="Exporting is currently disabled for all users" required>
+  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
+  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
+  <zn-radio value="export" disabled>Export transactions</zn-radio>
+</zn-radio-group>
+```

package/docs/pages/components/radio.md

@@ -0,0 +1,20 @@
+---
+meta:
+  title: Radio
+  description:
+layout: component
+---
+
+```html:preview
+<zn-radio></zn-radio>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/rating.md

@@ -0,0 +1,28 @@
+---
+meta:
+  title: Rating
+  description:
+layout: component
+---
+
+```html:preview
+<zn-rating></zn-rating>
+```
+
+## Examples
+
+### Form example with Value and Name
+
+```html:preview
+
+<form action="#" method="get">
+  <zn-rating value="2" name="rating"></zn-rating>
+  <zn-button type="submit">Submit</zn-button>
+</form>
+```
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/scroll-container.md

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Scroll Container
+  description:
+layout: component
+---
+
+```html:preview
+<zn-scroll-container></zn-scroll-container>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+