feat(component): add a headless and daisy select

#76

packages/daisy/src/components/select/select.tsx

@@ -0,0 +1,29 @@
+import { component$, PropFunction } from '@builder.io/qwik';
+import {
+  Select as HeadlessSelect,
+  SelectItemProps,
+  SelectOption as HeadlessSelectOption,
+} from '@qwik-ui/headless';
+
+interface SelectProps {
+  options: SelectItemProps[];
+  onChange$?: PropFunction<(evt: any) => void>;
+  placeholder?: string;
+}
+
+export const Select = component$(
+  ({ onChange$, placeholder, options }: SelectProps) => {
+    return (
+      <HeadlessSelect class="select w-full max-w-xs" onChange={onChange$}>
+        {placeholder && <HeadlessSelectOption disabled label={placeholder} />}
+        {options.map((option) => (
+          <HeadlessSelectOption
+            value={option.value}
+            label={option.label}
+            disabled={option.disabled}
+          />
+        ))}
+      </HeadlessSelect>
+    );
+  }
+);

packages/daisy/src/index.ts

@@ -2,3 +2,5 @@ export * from './components/collapse/collapse';
 export * from './components/drawer/drawer';
 export * from './components/tabs';
 export * from './components/toggle/toggle';
+export * from './components/tooltip/tooltip';
+export * from './components/select/select';

packages/headless/src/components/select/select.tsx

@@ -0,0 +1,77 @@
+import {
+  component$,
+  createContext,
+  Signal,
+  Slot,
+  $,
+  QwikChangeEvent,
+  useContext,
+  useContextProvider,
+  useSignal,
+  PropFunction,
+} from '@builder.io/qwik';
+
+interface SelectItem {
+  value?: string;
+  label: string;
+}
+
+interface SelectContext {
+  selected: Signal<string>;
+}
+
+export const selectContext = createContext<SelectContext>('select');
+
+export interface SelectProps {
+  onChange?: PropFunction<(evt: QwikChangeEvent) => void>;
+  class?: string;
+}
+
+export const Select = component$(({ onChange, ...props }: SelectProps) => {
+  const selected = useSignal('');
+
+  const contextService: SelectContext = {
+    selected,
+  };
+
+  useContextProvider(selectContext, contextService);
+
+  return (
+    <select
+      role="listbox"
+      onChange$={$((evt: QwikChangeEvent) => {
+        contextService.selected = evt.target.value;
+        if (onChange) {
+          onChange(evt);
+        }
+      })}
+      {...props}
+    >
+      <Slot />
+    </select>
+  );
+});
+
+export interface SelectItemProps extends SelectItem {
+  disabled?: boolean;
+  class?: string;
+}
+
+// single select option
+export const SelectOption = component$(
+  ({ value, label, disabled, ...props }: SelectItemProps) => {
+    const contextService = useContext(selectContext);
+
+    return (
+      <option
+        role="option"
+        value={value}
+        selected={value === contextService.selected.value}
+        disabled={disabled}
+        {...props}
+      >
+        {label}
+      </option>
+    );
+  }
+);

packages/headless/src/index.ts

@@ -3,3 +3,4 @@ export * from './components/drawer';
 export * from './components/tabs/tabs';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
+export * from './components/select/select';

packages/website/src/routes/daisy-example/index.tsx

@@ -1,14 +1,32 @@
 import { component$, useSignal } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
-import { Collapse, Drawer, Tab, TabPanel, Tabs, Toggle } from '@qwik-ui/daisy';
+import {
+  Collapse,
+  Drawer,
+  Tab,
+  TabPanel,
+  Tabs,
+  Toggle,
+  Select,
+} from '@qwik-ui/daisy';
 
 export default component$(() => {
   const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
-  const activeTab = useSignal(0);
   const toggleChecked = useSignal(false);
 
   return (
     <div>
+      <Select
+        placeholder="select"
+        options={[
+          { value: 'option 1', label: 'option one', disabled: false },
+          { value: 'option 2', label: 'option two', disabled: false },
+          { value: 'option 3', label: 'option three', disabled: true },
+        ]}
+      />
+
+      <hr className="my-5" />
+
       <div style="width: 300px">
         <Collapse showArrow={true}>
           <label q:slot="label">Hi Glenn and Gil!</label>
@@ -22,16 +40,9 @@ export default component$(() => {
 
       <div style="width: 300px">
         <Tabs>
-          {tabs.map((tab, index) => {
+          {tabs.map((tab) => {
             return (
-              <Tab
-                onClick$={(clicked: number) => {
-                  activeTab.value = clicked;
-                }}
-                isLifted={false}
-                isBordered={true}
-                isActive={index === activeTab.value}
-              >
+              <Tab isLifted={false} isBordered={true}>
                 {tab}
               </Tab>
             );
@@ -85,14 +96,17 @@ export default component$(() => {
       {/* hack to prevent tailwind purge */}
       <div
         style={{ display: 'none' }}
-        class={`collapse border border-base-300 rounded-box collapse-arrow collapse-plus 
-                collapse-title text-xl font-medium collapse-content max-h-fit tabs tabs-boxed 
+        class={`select
+                collapse border border-base-300 rounded-box collapse-arrow collapse-plus
+                collapse-title text-xl font-medium collapse-content max-h-fit tabs tabs-boxed
                 tab tab-active tab-bordered tab-lifted form-control abel cursor-pointer toggle label-text
                 drawer
                 drawer-toggle
                 btn btn-primary drawer-button
                 drawer-side
                 drawer-overlay
+                w-full
+                max-w-xs
                 `}
       />
     </div>

packages/website/src/routes/headless-example/index.tsx

@@ -10,13 +10,30 @@ import {
   TabPanel,
   Tabs,
   Tooltip,
+  Select,
+  SelectOption,
 } from '@qwik-ui/headless';
 import styles from './index.css?inline';
 
 export default component$(() => {
   useStyles$(styles);
   return (
     <div>
+      <Select>
+        {[
+          { value: 'option 1', label: 'option one', disabled: false },
+          { value: 'option 2', label: 'option two', disabled: false },
+          { value: 'option 3', label: 'option three', disabled: true },
+        ].map((item) => {
+          return (
+            <SelectOption
+              value={item.value}
+              label={item.label}
+              disabled={item.disabled}
+            />
+          );
+        })}
+      </Select>
       <Tabs behavior="automatic">
         <h3 id="tablist-1">Danish Composers</h3>
         <TabList>