fix(filters): Adds switch render (#29)

Included some improvements in the filters general code

docs/components/filters.md

@@ -53,6 +53,11 @@ Using filters property with the OFilters element:
       placeholder: 'Multi-select',
       options: multiOptions,
       multiple: true
+    },
+    {
+      type: 'switch',
+      name: 'test3.3',
+      label: 'Toggle something'
     }
   ];
 

src/components/filters/filters.ts

@@ -5,6 +5,7 @@ import { html, nothing } from 'lit';
 import { InputFilterRender } from './renders/filter.input.render';
 import { RowFilterRender } from './renders/filter.row.render';
 import { SelectFilterRender } from './renders/filter.select.render';
+import { SwitchFilterRender } from './renders/filter.switch.render';
 import { watch } from '../../internal/watch';
 import LibraryBaseElement from '../../internal/library-base-element';
 import styles from './filters.styles';
@@ -93,8 +94,11 @@ export default class OFilters extends LibraryBaseElement {
     const selectRender = new SelectFilterRender();
     this.addRender(selectRender);
 
-    // TODO: Add the rest of the renders
     // Switch filter
+    const switchRender = new SwitchFilterRender();
+    this.addRender(switchRender);
+
+    // TODO: Add the rest of the renders
     // Autocomplete filter
   }
 
@@ -246,8 +250,9 @@ export default class OFilters extends LibraryBaseElement {
     const changeHandler = (event: CustomEvent) => {
       cancelEvent(event);
 
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
-      const value = (el as any).value;
+      const renderInstance = this.rendersMap[filter.type].instance;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const value = renderInstance.getElementValue(el);
       this.setFilterData(filter, value, true);
     };
 

src/components/filters/filters.types.ts

@@ -37,7 +37,7 @@ export interface InputFilter extends BaseFilter {
   // Custom input filter properties, these ones are treated in a special way by the filter component, usually they are not passed to the input component,
   // it means that are ignored in the getValidPropsFromFilterConfig method
   type: 'input';
-  inputType: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
+  inputType?: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
   prefix?: string;
   suffix?: string;
   // Default value is 'icon'
@@ -145,7 +145,31 @@ export interface OptionSelectFilter {
   disabled?: boolean;
 }
 
-export type Filter = InputFilter | DividerFilter | RowFilter | SelectFilter;
+/**
+ * @summary Switch filter type.
+ * @description
+ * Defines the properties for the switch filter, the useful ones are defined to provide auto-complete options for the IDE (i.e.: vscode),
+ * the rest are passed to the switch component
+ *
+ * Please take into account here can be only passed properties that are not functions, promises, etc, because the filter configurations
+ * are serialized to JSON
+ *
+ * Please check the OSwitch component documentation for more details about the properties that can be passed.
+ */
+export interface SwitchFilter extends BaseFilter {
+  // Custom switch filter properties, these ones are treated in a special way by the filter component, usually they are not passed to the input component,
+  // it means that are ignored in the getValidPropsFromFilterConfig method
+  type: 'switch';
+  label: string;
+
+  // Native switch attributes, these ones are passed as is to the switch component. Please check the OSwitch component documentation for more details
+  value?: string;
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  checked?: boolean;
+}
+
+export type Filter = InputFilter | DividerFilter | RowFilter | SelectFilter | SwitchFilter;
 
 export type Filters = Filter | Filter[];
 

src/components/filters/renders/filter.abstract.render.ts

@@ -1,7 +1,10 @@
 import { DEFAULT_PROPS_TO_IGNORE, type Filter, type FilterType } from '../filters.types';
 import type { nothing, TemplateResult } from 'lit';
+import type LibraryBaseElement from '../../../internal/library-base-element';
 import type OFilters from '../filters';
 
+export const DEFAULT_MANDATORY_PROPS = ['name', 'type'];
+
 export abstract class FilterAbstractRender {
   abstract type: FilterType;
   abstract render(filtersComponent: OFilters, filter: Filter): typeof nothing | TemplateResult<1 | 2>;
@@ -24,6 +27,11 @@ export abstract class FilterAbstractRender {
 
   isPropMandatory(prop: string) {
     // name is mandatory for all filters
-    return !['name', 'type'].includes(prop);
+    return !DEFAULT_MANDATORY_PROPS.includes(prop);
+  }
+
+  getElementValue(el: LibraryBaseElement) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+    return (el as any).value;
   }
 }

src/components/filters/renders/filter.row.render.ts

@@ -1,5 +1,5 @@
+import { DEFAULT_MANDATORY_PROPS, FilterAbstractRender } from './filter.abstract.render';
 import { DEFAULT_PROPS_TO_IGNORE, type FilterType, type RowFilter } from '../filters.types';
-import { FilterAbstractRender } from './filter.abstract.render';
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type OFilters from '../filters';
@@ -34,6 +34,6 @@ export class RowFilterRender extends FilterAbstractRender {
 
   isPropMandatory(prop: string) {
     // items are mandatory
-    return !['name', 'items'].includes(prop);
+    return ![...DEFAULT_MANDATORY_PROPS, 'items'].includes(prop);
   }
 }

src/components/filters/renders/filter.select.render.ts

@@ -1,6 +1,6 @@
 import { addPrefixSuffixToElement, appendIconToElement } from './filter.utilities';
+import { DEFAULT_MANDATORY_PROPS, FilterAbstractRender } from './filter.abstract.render';
 import { DEFAULT_PROPS_TO_IGNORE, type Filter, type FilterType, type SelectFilter } from '../filters.types';
-import { FilterAbstractRender } from './filter.abstract.render';
 import { html } from 'lit';
 import type OFilters from '../filters';
 import type OSelect from '../../select/select';
@@ -45,4 +45,9 @@ export class SelectFilterRender extends FilterAbstractRender {
     const keysToIgnore = [...DEFAULT_PROPS_TO_IGNORE, 'prefix', 'prefixType', 'expandIconName', 'clearIconName'];
     return this.removeIgnoredKeysFromFilterConfig(keysToIgnore, filter);
   }
+
+  isPropMandatory(prop: string) {
+    // name is mandatory for all filters
+    return ![...DEFAULT_MANDATORY_PROPS, 'options'].includes(prop);
+  }
 }

src/components/filters/renders/filter.switch.render.ts

@@ -0,0 +1,30 @@
+import { DEFAULT_MANDATORY_PROPS, FilterAbstractRender } from './filter.abstract.render';
+import { DEFAULT_PROPS_TO_IGNORE, type FilterType, type SwitchFilter } from '../filters.types';
+import { html } from 'lit';
+import type OFilters from '../filters';
+import type OSwitch from '../../switch/switch';
+
+export class SwitchFilterRender extends FilterAbstractRender {
+  type: FilterType = 'switch';
+
+  render(filtersComponent: OFilters, filter: SwitchFilter) {
+    const el = filtersComponent.createFilterElement('o-switch', filter) as OSwitch;
+    el.innerHTML = filter.label ?? '';
+
+    return html`${el}`;
+  }
+
+  getValidPropsFromFilterConfig(filter: SwitchFilter) {
+    const keysToIgnore = [...DEFAULT_PROPS_TO_IGNORE, 'label'];
+    return this.removeIgnoredKeysFromFilterConfig(keysToIgnore, filter);
+  }
+
+  isPropMandatory(prop: string) {
+    // name is mandatory for all filters
+    return ![...DEFAULT_MANDATORY_PROPS, 'label'].includes(prop);
+  }
+
+  getElementValue(el: OSwitch) {
+    return el.checked;
+  }
+}