v0.2.5

CHANGELOG.md

@@ -1,31 +1,21 @@
 # Changelog
 
-## v0.2.4-beta.4
+## v0.2.5
 
-### Added the Chiplist component
-  - `/components/Chiplist/index.tsx`
-  - `/components/Chiplist/setup.ts`
-  - `/mod`
-  - `/src/scss/components.scss`
-  - `/static/style.css`
-
-### Added remove interaction to the chip component
-  - `/components/Chip/index.tsx`
-  - `/components/Chip/setup.ts`
-
-### Added Island for testing
+### Added the handler module 
+  - `/src/handlers.ts`
+  - `/import_map.json`
+  - `/mod.ts`
   - `/islands/Island.tsx`
-  - `/fresh.gen.ts`
-  - `/routes/index.tsx`
 
-### Minor updated
-  - `/components/Input/index.tsx`
-  - `/static/content.md`
+### Minor updates
+  - `/components/Code/index.tsx`
 
 ## Changes so far
 
 - Added the `<Chip/>` component.
 - Added the `<Chiplist/>` component.
+- Added the handler module.
 - Fixed components' use of `nostyle` and `nostyleAll`.
 
 ## Roadmap
@@ -58,6 +48,7 @@
   - [ ] Page
   - [ ] Fieldset
   - [x] Chip
+    - [x] Chiplist
   - [ ] Spinner
   - [ ] Screen
   - [ ] Dialog

components/Code/index.tsx

@@ -2,6 +2,8 @@ import setup, { iCode } from './setup.ts';
 
 /**
  * @todo [ ] Click to copy to clipboard.
+ * @todo [?] Implement the possibility of large code blocks. That can use real code and parse it with a
+ *           markdown component and a property for the language for syntax highlighting.
  */
 export default function (props: Partial<iCode>) {
   const { c, nostyle, nostyleAll, fref, fwd, children, ...p } = setup(props);

import_map.json

@@ -10,6 +10,7 @@
     "twind/": "https://esm.sh/[email protected]/",
     "utils": "./src/utils.ts",
     "types": "./src/types.ts",
-    "enums": "./src/enums.ts"
+    "enums": "./src/enums.ts",
+    "handlers": "./src/handlers.ts"
   }
 }

islands/Island.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'preact/hooks';
 import Chiplist from '../components/Chiplist/index.tsx';
 import Input from '../components/Input/index.tsx';
+import { certainKeyPressed, removeChiplistValue } from 'handlers';
 
 export default function () {
   const [values, setValues] = useState<string[]>([]);
@@ -9,19 +10,17 @@ export default function () {
     <div>
       <Input
         label='New tag'
-        onkeyup={(ev) => {
-          if (ev.key === 'Enter') {
-            setValues([...values, (ev.target as HTMLInputElement).value]);
+        onkeyup={(ev) =>
+          certainKeyPressed(ev, ['Enter', 'Spacebar', ' '], (ev) => {
+            const newValue = (ev.target as HTMLInputElement).value;
+            if (newValue.replace(' ', '').length > 0) {
+              setValues([...values, newValue]);
+            }
             (ev.target as HTMLInputElement).value = '';
-          }
-        }}
+          })}
       />
       <Chiplist
-        onRemove={(ev: Event) => {
-          const target = ev.target as HTMLButtonElement;
-          const chipValue = (target.previousSibling as HTMLElement).innerHTML;
-          setValues(values.filter((value) => value !== chipValue));
-        }}
+        onRemove={(ev: Event) => removeChiplistValue(ev, values, setValues)}
         values={values}
       />
     </div>

mod.ts

@@ -21,3 +21,4 @@ export { default as Chiplist } from './components/Chiplist/index.tsx';
 export * from 'enums';
 export * from 'types';
 export * from 'utils';
+export * from 'handlers';

src/handlers.ts

@@ -0,0 +1,33 @@
+import { StateUpdater } from 'preact/hooks';
+
+/**
+ * This function contains the basic needs for a `<Chiplist/>` component's state. This handler is made for the `onRemove` property.
+ *
+ * @param {Event} ev
+ *  The event triggered by the mouse or keyboard on the `remove_button` in the `<Chip/>` component.
+ *
+ * @param {string[]} values
+ *  The list of values that make up the chiplist.
+ *
+ * @param {StateUpdater<string[]>} setValues
+ *  The state updater function for the list of values.
+ */
+export const removeChiplistValue = (
+  ev: Event,
+  values: string[],
+  setValues: StateUpdater<string[]>,
+): void => {
+  const target = ev.target as HTMLButtonElement;
+  const chipValue = (target.previousSibling as HTMLElement).innerHTML;
+  setValues(values.filter((value) => value !== chipValue));
+};
+
+export const certainKeyPressed = (
+  ev: Event,
+  keys: string[],
+  cb: (ev: Event) => void,
+) => {
+  if (keys.includes((ev as KeyboardEvent).key)) {
+    cb(ev);
+  }
+};