v0.2.4-beta.4

CHANGELOG.md

@@ -1,15 +1,31 @@
 # Changelog
 
-## v0.2.4-beta.3
+## v0.2.4-beta.4
 
-### Added utility routes in `import_map.json`
-  - `/components/**/setup.ts`
-  - `/mod.ts`
-  - `/src/utils.ts`
+### 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
+  - `/islands/Island.tsx`
+  - `/fresh.gen.ts`
+  - `/routes/index.tsx`
+
+### Minor updated
+  - `/components/Input/index.tsx`
+  - `/static/content.md`
 
 ## Changes so far
 
 - Added the `<Chip/>` component.
+- Added the `<Chiplist/>` component.
 - Fixed components' use of `nostyle` and `nostyleAll`.
 
 ## Roadmap

components/Chip/index.tsx

@@ -1,12 +1,25 @@
+import Text from '../Text/index.tsx';
 import setup, { iChip } from './setup.ts';
 
 export default function (props: Partial<iChip>) {
-  const { c, nostyle, nostyleAll, fref, children, ...p } = setup(props);
+  const { c, nostyle, nostyleAll, fref, children, onRemove, ...p } = setup(
+    props,
+  );
 
   return (
     <li ref={fref} class={c.chip} {...p}>
-      <>{children}</>
-      <button class={c.remove_button}>×</button>
+      <Text class={c.content}>{children}</Text>
+      <button
+        onClick={onRemove}
+        onKeyPress={(ev) => {
+          if (onRemove && (ev.key === 'Enter' || ev.key === 'Space')) {
+            onRemove!(ev);
+          }
+        }}
+        class={c.remove_button}
+      >
+        ×
+      </button>
     </li>
   );
 }

components/Chip/setup.ts

@@ -2,7 +2,9 @@ import { applyDefaults, cn, opt, partializeClasses } from 'utils';
 import { iComponent, iFwd } from 'types';
 
 export type iChip = iComponent<HTMLLIElement> & {
+  onRemove?: (ev: Event) => void;
   fwd: Partial<{
+    content: iFwd<HTMLSpanElement>;
     remove_button: iFwd<HTMLButtonElement>;
   }>;
 };
@@ -14,7 +16,7 @@ const defaults: iChip = {
 export default (props: Partial<iChip>) => {
   const p = applyDefaults<iChip>(defaults, props);
 
-  const { remove_button } = p.fwd;
+  const { remove_button, content } = p.fwd;
 
   const classes = partializeClasses({
     chip: opt(
@@ -27,6 +29,11 @@ export default (props: Partial<iChip>) => {
       remove_button?.class,
       remove_button?.nostyle || p.nostyleAll,
     ),
+    content: opt(
+      cn('comp-chip_content'),
+      content?.class,
+      content?.nostyle || p.nostyleAll,
+    ),
   });
 
   delete p.class;

components/Chiplist/index.tsx

@@ -0,0 +1,26 @@
+import setup, { iChiplist } from './setup.ts';
+import Chip from '../Chip/index.tsx';
+
+export default function (props: Partial<iChiplist>) {
+  const { c, nostyle, nostyleAll, fref, fwd, values, onRemove, ...p } = setup(
+    props,
+  );
+
+  return (
+    <ul ref={fref} class={c.list} {...p}>
+      {values.map((value) => (
+        <Chip
+          class={c.chip}
+          onRemove={onRemove}
+          fwd={{
+            remove_button: {
+              class: c.remove_button,
+            },
+          }}
+        >
+          {value}
+        </Chip>
+      ))}
+    </ul>
+  );
+}

components/Chiplist/setup.ts

@@ -0,0 +1,31 @@
+import { applyDefaults, cn, opt, partializeClasses } from 'utils';
+import { iComponent, iFwd } from 'types';
+
+export type iChiplist = iComponent<HTMLUListElement> & {
+  onRemove?: (ev: Event) => void;
+  values: string[];
+  fwd: Partial<{
+    chip: iFwd<HTMLLIElement>;
+    remove_button: iFwd<HTMLButtonElement>;
+  }>;
+};
+
+const defaults: iChiplist = {
+  values: [],
+  fwd: {},
+};
+
+export default (props: Partial<iChiplist>) => {
+  const p = applyDefaults<iChiplist>(defaults, props);
+
+  const { remove_button, chip } = p.fwd;
+
+  const classes = partializeClasses({
+    list: opt(cn('comp-chiplist'), p.class, p.nostyle || p.nostyleAll),
+    chip: cn(chip?.class),
+    remove_button: cn(remove_button?.class),
+  });
+
+  delete p.class;
+  return { c: classes, ...p };
+};

components/Input/index.tsx

@@ -8,29 +8,27 @@ export default function (props: Partial<iInput>) {
   return (
     <div ref={fwd.container?.ref} class={c.container}>
       <label ref={fwd.label?.ref} class={c.label}>
-        {label === ''
-          ? null
-          : (
-            <Text
-              nostyleAll={nostyleAll}
-              fref={fwd.text?.fref}
-              noMargins
-              class={c.text}
-            >
-              <>{label}</>
-              {p.required
-                ? (
-                  <sup
-                    ref={fwd.required?.ref}
-                    title='Required'
-                    class={c.required}
-                  >
-                    *
-                  </sup>
-                )
-                : null}
-            </Text>
-          )}
+        {label === '' ? null : (
+          <Text
+            nostyleAll={nostyleAll}
+            fref={fwd.text?.fref}
+            noMargins
+            class={c.text}
+          >
+            <>{label}</>
+            {p.required
+              ? (
+                <sup
+                  ref={fwd.required?.ref}
+                  title='Required'
+                  class={c.required}
+                >
+                  *
+                </sup>
+              )
+              : null}
+          </Text>
+        )}
         <input ref={fref} class={c.input} {...p} />
       </label>
       {error

fresh.gen.ts

@@ -7,6 +7,7 @@ import * as $1 from './routes/index.tsx';
 import * as $2 from './routes/md.tsx';
 import * as $3 from './routes/test/gradient.tsx';
 import * as $4 from './routes/test/input.tsx';
+import * as $$0 from './islands/Island.tsx';
 
 const manifest = {
   routes: {
@@ -16,7 +17,9 @@ const manifest = {
     './routes/test/gradient.tsx': $3,
     './routes/test/input.tsx': $4,
   },
-  islands: {},
+  islands: {
+    './islands/Island.tsx': $$0,
+  },
   baseUrl: import.meta.url,
 };
 

islands/Island.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'preact/hooks';
+import Chiplist from '../components/Chiplist/index.tsx';
+import Input from '../components/Input/index.tsx';
+
+export default function () {
+  const [values, setValues] = useState<string[]>([]);
+
+  return (
+    <div>
+      <Input
+        label='New tag'
+        onkeyup={(ev) => {
+          if (ev.key === 'Enter') {
+            setValues([...values, (ev.target as HTMLInputElement).value]);
+            (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));
+        }}
+        values={values}
+      />
+    </div>
+  );
+}

mod.ts

@@ -17,6 +17,7 @@ export { default as Panel } from './components/Panel/index.tsx';
 export { default as Markdown } from './components/Markdown/index.tsx';
 export { default as Gradient } from './components/Gradient/index.tsx';
 export { default as Chip } from './components/Chip/index.tsx';
+export { default as Chiplist } from './components/Chiplist/index.tsx';
 export * from 'enums';
 export * from 'types';
 export * from 'utils';

routes/index.tsx

@@ -1,8 +1,13 @@
-// import { } from '../mod.ts';
+import Island from '../islands/Island.tsx';
+import { Header, Main } from '../mod.ts';
 
 export default function Home() {
   return (
     <div>
+      <Header></Header>
+      <Main layout_type='center'>
+        <Island />
+      </Main>
     </div>
   );
 }

src/scss/components.scss

@@ -469,4 +469,18 @@
     height: var(--s-one-and-half);
     border-radius: var(--s-eighth);
   }
+
+  &_content {
+    max-width: var(--s-fifteen);
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// Chiplist
+.comp-chiplist {
+  display: flex;
+  gap: var(--s-third);
 }

static/content.md

@@ -23,7 +23,6 @@
 
 > Blockquote Lorem ispum
 
-
 - Buildscript
 
 ```ts