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

package/dist/vim-web.js

@@ -86162,7 +86162,7 @@ function UltraSuggestion() {
         "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"
@@ -86548,19 +86548,48 @@ function GenericBoolField(props) {
 }
 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] = useState(false);
+  const ref = useRef(null);
+  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 = useRef();
@@ -87224,20 +87253,48 @@ function renderSettingsToggle(settings2, item) {
 }
 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] = useState(false);
+  const ref = useRef(null);
+  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) {