vim-web 1.0.0-alpha.1 → 1.0.0-alpha.2

package/dist/style.css

@@ -706,6 +706,9 @@ video:where(.vim-component,.vim-component *) {
 .vc-bottom-0 {
   bottom: 0px;
 }
+.vc-bottom-full {
+  bottom: 100%;
+}
 .vc-left-0 {
   left: 0px;
 }
@@ -840,6 +843,9 @@ video:where(.vim-component,.vim-component *) {
 .vc-block {
   display: block;
 }
+.vc-inline-block {
+  display: inline-block;
+}
 .vc-inline {
   display: inline;
 }
@@ -855,6 +861,9 @@ video:where(.vim-component,.vim-component *) {
 .vc-h-2 {
   height: 0.5rem;
 }
+.vc-h-3 {
+  height: 0.75rem;
+}
 .vc-h-4 {
   height: 1rem;
 }
@@ -915,6 +924,9 @@ video:where(.vim-component,.vim-component *) {
 .vc-min-w-0 {
   min-width: 0px;
 }
+.vc-min-w-full {
+  min-width: 100%;
+}
 .\!vc-max-w-xs {
   max-width: 20rem !important;
 }
@@ -985,6 +997,9 @@ video:where(.vim-component,.vim-component *) {
 .vc-justify-evenly {
   justify-content: space-evenly;
 }
+.vc-gap-1 {
+  gap: 0.25rem;
+}
 .vc-gap-2 {
   gap: 0.5rem;
 }
@@ -1183,6 +1198,9 @@ video:where(.vim-component,.vim-component *) {
 .vc-pr-2 {
   padding-right: 0.5rem;
 }
+.vc-text-left {
+  text-align: left;
+}
 .vc-text-center {
   text-align: center;
 }

package/dist/vim-web.iife.js

@@ -86178,7 +86178,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           "a",
           {
             className: "vc-text-primary vc-underline vc-font-bold",
-            href: "https://docs.vimaec.com/docs/vim-for-windows/configuring-vim-ultra",
+            href: "https://docs.vimaec.com/docs/vim-flex/vim-ultra",
             target: "_blank",
             rel: "noopener noreferrer",
             children: "VIM Ultra"
@@ -86564,19 +86564,48 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function GenericSelectField(props) {
     const refresher = useRefresher();
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "select",
-      {
-        disabled: props.disabled ?? false,
-        value: props.field.state.get(),
-        onChange: (e) => {
-          refresher.refresh();
-          props.field.state.set(e.target.value);
+    const [open, setOpen] = React2.useState(false);
+    const ref = React2.useRef(null);
+    React2.useEffect(() => {
+      if (!open) return;
+      const onPointerDown = (e) => {
+        if (ref.current && !ref.current.contains(e.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("pointerdown", onPointerDown);
+      return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open]);
+    const current = props.field.options.find((o) => o.value === props.field.state.get());
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref, className: "vc-relative vc-w-full", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: props.disabled ?? false,
+          onClick: () => setOpen((o) => !o),
+          className: "vc-border vc-border-gray-300 vc-py-1 vc-w-full vc-px-1 vc-text-left vc-bg-white vc-cursor-pointer vc-flex vc-items-center vc-justify-between",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (current == null ? void 0 : current.label) ?? "" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "vc-w-3 vc-h-3 vc-ml-1 vc-shrink-0", viewBox: "0 0 12 12", fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vc-absolute vc-left-0 vc-right-0 vc-bottom-full vc-z-50 vc-border vc-border-gray-300 vc-bg-white vc-shadow-lg", children: props.field.options.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `vc-px-1 vc-py-1 vc-cursor-pointer hover:vc-bg-gray-100 ${opt.value === props.field.state.get() ? "vc-bg-gray-100" : ""}`,
+          onPointerDown: (e) => {
+            e.stopPropagation();
+            props.field.state.set(opt.value);
+            refresher.refresh();
+            setOpen(false);
+          },
+          children: opt.label
         },
-        className: "vc-border vc-inline vc-border-gray-300 vc-py-1 vc-w-full vc-px-1",
-        children: props.field.options.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value))
-      }
-    );
+        opt.value
+      )) })
+    ] });
   }
   function useCustomizer(baseEntries, ref) {
     const customization = React2.useRef();
@@ -87240,20 +87269,48 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function renderSettingsSelect(settings2, item) {
     const value = item.getter(settings2.value);
-    const handleChange = (e) => {
-      settings2.update((s) => item.setter(s, e.target.value));
-    };
+    const [open, setOpen] = React2.useState(false);
+    const ref = React2.useRef(null);
+    React2.useEffect(() => {
+      if (!open) return;
+      const onPointerDown = (e) => {
+        if (ref.current && !ref.current.contains(e.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("pointerdown", onPointerDown);
+      return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open]);
+    const current = item.options.find((o) => o.value === value);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm", children: [
       item.label,
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "select",
-        {
-          value,
-          onChange: handleChange,
-          className: "vc-ml-2 vc-rounded vc-border vc-border-gray-medium vc-bg-white vc-px-1 vc-py-0.5 vc-text-sm",
-          children: item.options.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value))
-        }
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref, className: "vc-relative vc-inline-block vc-ml-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((o) => !o),
+            className: "vc-rounded vc-border vc-border-gray-medium vc-bg-white vc-px-1 vc-py-0.5 vc-text-sm vc-cursor-pointer vc-text-left vc-inline-flex vc-items-center vc-gap-1",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (current == null ? void 0 : current.label) ?? "" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "vc-w-3 vc-h-3 vc-shrink-0", viewBox: "0 0 12 12", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vc-absolute vc-left-0 vc-bottom-full vc-z-50 vc-min-w-full vc-rounded vc-border vc-border-gray-medium vc-bg-white vc-shadow-lg vc-text-sm", children: item.options.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: `vc-px-2 vc-py-1 vc-cursor-pointer hover:vc-bg-gray-100 vc-whitespace-nowrap ${opt.value === value ? "vc-bg-gray-100" : ""}`,
+            onPointerDown: (e) => {
+              e.stopPropagation();
+              settings2.update((s) => item.setter(s, opt.value));
+              setOpen(false);
+            },
+            children: opt.label
+          },
+          opt.value
+        )) })
+      ] })
     ] });
   }
   function renderSettingsSubtitle(item) {