@kubex/zinc 1.0.24 → 1.0.98

package/docs/pages/components/data-select.md

@@ -1,7 +1,7 @@
 ---
 meta:
   title: Data Select
-  description:
+  description: A select component with built-in data providers for common options like countries, currencies, colors, and phone prefixes. Supports icons, filtering, multiple selection, and all standard select features.
 layout: component
 ---
 
@@ -16,49 +16,228 @@ layout: component
 
 ## Examples
 
-### Icon Position
+### Data Providers
 
-Icon position can be set to `start` or `end`. The default is `none`.
+The component includes built-in providers for common data types.
 
 ```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Country" provider="country" name="country"></zn-data-select>
+  <zn-data-select label="Currency" provider="currency" name="currency"></zn-data-select>
+  <zn-data-select label="Color" provider="color" name="color"></zn-data-select>
+  <zn-data-select label="Phone Prefix" provider="phone" name="phone"></zn-data-select>
+</div>
+```
 
+### With Default Values
+
+Set a default selected value using the `value` attribute.
+
+```html:preview
 <div class="form-spacing">
-  <zn-data-select provider="country" name="country" value="GB" icon-position="start"></zn-data-select>
-  <zn-data-select provider="country" name="country" icon-position="end"></zn-data-select>
+  <zn-data-select label="Country" provider="country" name="country" value="GB"></zn-data-select>
+  <zn-data-select label="Currency" provider="currency" name="currency" value="USD"></zn-data-select>
+  <zn-data-select label="Color" provider="color" name="color" value="blue"></zn-data-select>
+</div>
+```
+
+### Icon Position
+
+Control where the icon appears using the `icon-position` attribute. Options are `start`, `end`, or `none` (default).
+
+```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Icon at Start" provider="country" name="country" value="GB" icon-position="start"></zn-data-select>
+  <zn-data-select label="Icon at End" provider="country" name="country" value="US" icon-position="end"></zn-data-select>
+  <zn-data-select label="No Icon" provider="country" name="country" value="FR" icon-position="none"></zn-data-select>
 </div>
 ```
 
 ### Icon Only
 
-Icon 
+Display only the icon without text using the `icon-only` attribute.
 
 ```html:preview
 <div class="form-spacing">
   <zn-data-select provider="color" name="color" value="red" icon-only></zn-data-select>
+  <zn-data-select provider="country" name="country" value="GB" icon-only></zn-data-select>
+  <zn-data-select provider="currency" name="currency" value="USD" icon-only></zn-data-select>
+</div>
+```
+
+### Multiple Selection
+
+Allow selecting multiple options using the `multiple` attribute.
+
+```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Countries" provider="country" name="countries" multiple></zn-data-select>
+  <zn-data-select label="Currencies" provider="currency" name="currencies" multiple></zn-data-select>
+  <zn-data-select label="Colors" provider="color" name="colors" multiple></zn-data-select>
 </div>
 ```
 
 ### Clearable
 
+Add a clear button to reset the selection using the `clearable` attribute.
+
 ```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Country" provider="country" name="country" value="GB" clearable></zn-data-select>
+  <zn-data-select label="Currency" provider="currency" name="currency" value="USD" clearable></zn-data-select>
+  <zn-data-select label="Color" provider="color" name="color" value="blue" clearable></zn-data-select>
+</div>
+```
+
+### Filtered Options
 
+Use the `filter` attribute to show only specific options from the provider.
+
+```html:preview
 <div class="form-spacing">
-  <zn-data-select provider="country" name="country" clearable></zn-data-select>
-  <zn-data-select provider="currency" name="currency" clearable></zn-data-select>
-  <zn-data-select provider="color" name="color" clearable></zn-data-select>
+  <zn-data-select label="Major Countries" provider="country" name="country" filter="gb,us,fr,de,jp,cn"></zn-data-select>
+  <zn-data-select label="Common Currencies" provider="currency" name="currency" filter="gbp,usd,eur,jpy"></zn-data-select>
+  <zn-data-select label="Primary Colors" provider="color" name="color" filter="red,green,blue"></zn-data-select>
 </div>
 ```
 
-### Filtered
+### Sizes
 
-If you only want to display a handful of the provider results, you can use the `filter` attribute to filter the
-results.
+Control the size of the select using the `size` attribute.
 
 ```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Small" provider="country" name="country" size="small" value="GB"></zn-data-select>
+  <zn-data-select label="Medium" provider="country" name="country" size="medium" value="US"></zn-data-select>
+  <zn-data-select label="Large" provider="country" name="country" size="large" value="FR"></zn-data-select>
+</div>
+```
 
+### With Help Text
+
+Provide additional context using the `help-text` attribute.
+
+```html:preview
 <div class="form-spacing">
-  <zn-data-select provider="country" name="country" filter="gb,us,fr,de"></zn-data-select>
-  <zn-data-select provider="currency" name="currency" filter="gbp,usd,eur"></zn-data-select>
-  <zn-data-select provider="color" name="color" filter="red,green,blue"></zn-data-select>
+  <zn-data-select label="Country"
+                  provider="country"
+                  name="country"
+                  help-text="Select your country of residence"></zn-data-select>
 </div>
+```
+
+### Required Field
+
+Mark fields as required using the `required` attribute.
+
+```html:preview
+<form>
+  <div class="form-spacing">
+    <zn-data-select label="Country" provider="country" name="country" required></zn-data-select>
+    <zn-data-select label="Currency" provider="currency" name="currency" required></zn-data-select>
+    <zn-button type="submit" color="success">Submit</zn-button>
+  </div>
+</form>
+```
+
+### Disabled State
+
+Disable the select using the `disabled` attribute.
+
+```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Country" provider="country" name="country" value="GB" disabled></zn-data-select>
+  <zn-data-select label="Currency" provider="currency" name="currency" value="USD" disabled></zn-data-select>
+</div>
+```
+
+### With Label Tooltip
+
+Add a tooltip to the label using the `label-tooltip` attribute.
+
+```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Country"
+                  provider="country"
+                  name="country"
+                  label-tooltip="This is used for shipping and tax calculations"></zn-data-select>
+</div>
+```
+
+### With Context Note
+
+Add contextual information using the `context-note` attribute.
+
+```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Currency"
+                  provider="currency"
+                  name="currency"
+                  context-note="Optional"></zn-data-select>
+</div>
+```
+
+### Placement Options
+
+Control where the dropdown menu appears using the `placement` attribute.
+
+```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Opens Below" provider="country" name="country" placement="bottom"></zn-data-select>
+  <zn-data-select label="Opens Above" provider="country" name="country" placement="top"></zn-data-select>
+</div>
+```
+
+### Allow All Option
+
+Include an "All" option at the top of the list using the `allow-all` attribute.
+
+```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Country" provider="country" name="country" allow-all></zn-data-select>
+  <zn-data-select label="Currency" provider="currency" name="currency" allow-all></zn-data-select>
+</div>
+```
+
+### Common Currencies
+
+For the currency provider, use `allow-common` to include a "Common Currencies" option.
+
+```html:preview
+<div class="form-spacing">
+  <zn-data-select label="Currency" provider="currency" name="currency" allow-common></zn-data-select>
+</div>
+```
+
+### Complete Form Example
+
+A complete form using data-select components.
+
+```html:preview
+<form>
+  <div class="form-spacing">
+    <zn-data-select label="Country"
+                    provider="country"
+                    name="country"
+                    required
+                    clearable
+                    icon-position="start"
+                    help-text="Select your country"></zn-data-select>
+
+    <zn-data-select label="Currency"
+                    provider="currency"
+                    name="currency"
+                    required
+                    clearable
+                    help-text="Preferred currency for transactions"></zn-data-select>
+
+    <zn-data-select label="Accent Color"
+                    provider="color"
+                    name="color"
+                    icon-position="start"
+                    help-text="Choose your preferred theme color"></zn-data-select>
+
+    <zn-button type="submit" color="success">Save Preferences</zn-button>
+  </div>
+</form>
 ```

package/docs/pages/components/data-table-filter.md

@@ -1,7 +1,7 @@
 ---
 meta:
   title: Data Table Filter
-  description:
+  description: A comprehensive filtering component that opens a slideout panel with a query builder interface. Supports text, number, date fields, dropdown options, and multiple filter operators.
 layout: component
 ---
 
@@ -14,10 +14,101 @@ layout: component
 
 ## Examples
 
-### First Example
+### Basic Text Filters
 
-TODO
+Create simple text-based filters with equality and fuzzy search operators.
 
-### Second Example
+```html:preview
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;name&quot;,&quot;name&quot;:&quot;Name&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;fuzzy&quot;]},{&quot;id&quot;:&quot;email&quot;,&quot;name&quot;:&quot;Email&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;fuzzy&quot;]},{&quot;id&quot;:&quot;company&quot;,&quot;name&quot;:&quot;Company&quot;,&quot;operators&quot;:[&quot;eq&quot;]}]"
+  name="text-filters">
+</zn-data-table-filter>
+```
+
+### Number Filters with Operators
+
+Use number type filters with comparison operators like equal, greater than, less than.
+
+```html:preview
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;age&quot;,&quot;name&quot;:&quot;Age&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;price&quot;,&quot;name&quot;:&quot;Price&quot;,&quot;type&quot;:&quot;number&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;gt&quot;,&quot;lt&quot;]},{&quot;id&quot;:&quot;quantity&quot;,&quot;name&quot;:&quot;Quantity&quot;,&quot;type&quot;:&quot;number&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;gte&quot;,&quot;lte&quot;]}]"
+  name="number-filters">
+</zn-data-table-filter>
+```
+
+### Date Filters
+
+Filter by dates with before, after, and equal operators.
+
+```html:preview
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;created&quot;,&quot;name&quot;:&quot;Created Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;before&quot;,&quot;after&quot;]},{&quot;id&quot;:&quot;modified&quot;,&quot;name&quot;:&quot;Modified Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;before&quot;,&quot;after&quot;]},{&quot;id&quot;:&quot;due_date&quot;,&quot;name&quot;:&quot;Due Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;before&quot;,&quot;after&quot;]}]"
+  name="date-filters">
+</zn-data-table-filter>
+```
+
+### Dropdown Options
 
-TODO
+Use predefined options for select-based filtering.
+
+```html:preview
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;status&quot;,&quot;name&quot;:&quot;Status&quot;,&quot;options&quot;:{&quot;open&quot;:&quot;Open&quot;,&quot;in_progress&quot;:&quot;In Progress&quot;,&quot;closed&quot;:&quot;Closed&quot;},&quot;operators&quot;:[&quot;eq&quot;,&quot;in&quot;]},{&quot;id&quot;:&quot;priority&quot;,&quot;name&quot;:&quot;Priority&quot;,&quot;options&quot;:{&quot;low&quot;:&quot;Low&quot;,&quot;medium&quot;:&quot;Medium&quot;,&quot;high&quot;:&quot;High&quot;,&quot;critical&quot;:&quot;Critical&quot;},&quot;operators&quot;:[&quot;eq&quot;,&quot;in&quot;]}]"
+  name="option-filters">
+</zn-data-table-filter>
+```
+
+### Limited Options Display
+
+Control how many options are initially visible using `maxOptionsVisible`.
+
+```html:preview
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;category&quot;,&quot;name&quot;:&quot;Category&quot;,&quot;options&quot;:{&quot;cat1&quot;:&quot;Category 1&quot;,&quot;cat2&quot;:&quot;Category 2&quot;,&quot;cat3&quot;:&quot;Category 3&quot;,&quot;cat4&quot;:&quot;Category 4&quot;,&quot;cat5&quot;:&quot;Category 5&quot;,&quot;cat6&quot;:&quot;Category 6&quot;},&quot;maxOptionsVisible&quot;:3,&quot;operators&quot;:[&quot;eq&quot;,&quot;in&quot;]}]"
+  name="limited-options">
+</zn-data-table-filter>
+```
+
+### Mixed Filter Types
+
+Combine different field types in a single filter component.
+
+```html:preview
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;product&quot;,&quot;name&quot;:&quot;Product Name&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;fuzzy&quot;]},{&quot;id&quot;:&quot;category&quot;,&quot;name&quot;:&quot;Category&quot;,&quot;options&quot;:{&quot;electronics&quot;:&quot;Electronics&quot;,&quot;clothing&quot;:&quot;Clothing&quot;,&quot;books&quot;:&quot;Books&quot;},&quot;operators&quot;:[&quot;eq&quot;,&quot;in&quot;]},{&quot;id&quot;:&quot;price&quot;,&quot;name&quot;:&quot;Price&quot;,&quot;type&quot;:&quot;number&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;gt&quot;,&quot;lt&quot;]},{&quot;id&quot;:&quot;in_stock&quot;,&quot;name&quot;:&quot;In Stock&quot;,&quot;type&quot;:&quot;boolean&quot;,&quot;operators&quot;:[&quot;eq&quot;]}]"
+  name="mixed-filters">
+</zn-data-table-filter>
+```
+
+### Employee Filter Example
+
+A practical example for filtering employee data.
+
+```html:preview
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;employee_name&quot;,&quot;name&quot;:&quot;Employee Name&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;fuzzy&quot;]},{&quot;id&quot;:&quot;department&quot;,&quot;name&quot;:&quot;Department&quot;,&quot;options&quot;:{&quot;engineering&quot;:&quot;Engineering&quot;,&quot;sales&quot;:&quot;Sales&quot;,&quot;marketing&quot;:&quot;Marketing&quot;,&quot;hr&quot;:&quot;Human Resources&quot;,&quot;finance&quot;:&quot;Finance&quot;},&quot;operators&quot;:[&quot;eq&quot;,&quot;in&quot;]},{&quot;id&quot;:&quot;hire_date&quot;,&quot;name&quot;:&quot;Hire Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;before&quot;,&quot;after&quot;]},{&quot;id&quot;:&quot;salary&quot;,&quot;name&quot;:&quot;Salary&quot;,&quot;type&quot;:&quot;number&quot;,&quot;operators&quot;:[&quot;gt&quot;,&quot;lt&quot;]}]"
+  name="employee-filters">
+</zn-data-table-filter>
+```
+
+### E-commerce Filter Example
+
+Filter products with various criteria.
+
+```html:preview
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;title&quot;,&quot;name&quot;:&quot;Product Title&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;fuzzy&quot;]},{&quot;id&quot;:&quot;brand&quot;,&quot;name&quot;:&quot;Brand&quot;,&quot;operators&quot;:[&quot;eq&quot;]},{&quot;id&quot;:&quot;category&quot;,&quot;name&quot;:&quot;Category&quot;,&quot;options&quot;:{&quot;electronics&quot;:&quot;Electronics&quot;,&quot;clothing&quot;:&quot;Clothing&quot;,&quot;home&quot;:&quot;Home &amp; Garden&quot;,&quot;sports&quot;:&quot;Sports&quot;,&quot;toys&quot;:&quot;Toys&quot;},&quot;maxOptionsVisible&quot;:3,&quot;operators&quot;:[&quot;eq&quot;,&quot;in&quot;]},{&quot;id&quot;:&quot;price&quot;,&quot;name&quot;:&quot;Price&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;rating&quot;,&quot;name&quot;:&quot;Rating&quot;,&quot;type&quot;:&quot;number&quot;,&quot;operators&quot;:[&quot;gte&quot;]},{&quot;id&quot;:&quot;release_date&quot;,&quot;name&quot;:&quot;Release Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;before&quot;,&quot;after&quot;]}]"
+  name="product-filters">
+</zn-data-table-filter>
+```
+
+### Content Library Filter
+
+Filter media content like books, movies, or articles.
+
+```html:preview
+<zn-data-table-filter
+  filters="[{&quot;id&quot;:&quot;title&quot;,&quot;name&quot;:&quot;Title&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;fuzzy&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;:3,&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;published&quot;,&quot;name&quot;:&quot;Published Date&quot;,&quot;type&quot;:&quot;date&quot;,&quot;operators&quot;:[&quot;eq&quot;,&quot;before&quot;,&quot;after&quot;]}]"
+  name="content-filters">
+</zn-data-table-filter>
+```