first commit

app/components/PhoneCodeField.vue

@@ -0,0 +1,173 @@
+<script>
+import "~/assets/styles/PhoneCodeField.CwyHXfML.css";
+import { toDisplayString } from "vue";
+import { renderList } from "vue";
+import { useId } from "vue";
+import { onBeforeUnmount } from "vue";
+import { ref } from "vue";
+import { createCommentVNode } from "vue";
+import { createElementBlock } from "vue";
+import { Fragment } from "vue";
+import { createElementVNode } from "vue";
+import { unref } from "vue";
+import { defineComponent } from "vue";
+import { openBlock } from "vue";
+import { useApi } from "~/lib/auth.js";
+import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
+var m = {
+    class: `phone-code-field`,
+  },
+  h = [`for`],
+  g = {
+    class: `phone-code-input`,
+  },
+  _ = [`id`, `value`, `list`, `disabled`],
+  v = [`id`],
+  y = [`value`],
+  b = {
+    key: 0,
+    role: `status`,
+  },
+  x = {
+    key: 1,
+    role: `status`,
+  },
+  S = Object.assign(
+    _plugin_vue_export_helper_t(
+      defineComponent({
+        __name: `PhoneCodeField`,
+        props: {
+          modelValue: {},
+          disabled: {
+            type: Boolean,
+          },
+        },
+        emits: [`update:modelValue`],
+        setup(u, { emit: p }) {
+          let S = u,
+            C = p,
+            w = useId(),
+            T = useApi(),
+            E = ref([]),
+            D = ref(!1),
+            O = ref(``),
+            k = !1;
+          onBeforeUnmount(() => {
+            k = !0;
+          });
+          async function A() {
+            if (!(D.value || E.value.length)) {
+              ((D.value = !0), (O.value = ``));
+              try {
+                let e = await T.get(`/country`, void 0, !1);
+                if (k) return;
+                E.value = (e.list || [])
+                  .filter((e) => /^[1-9]\d{0,3}$/.test(String(e.phone_code)))
+                  .map((e) => ({
+                    phone_code: String(e.phone_code),
+                    name: e.name_zh || e.name || ``,
+                  }));
+              } catch {
+                k || (O.value = `地区列表暂不可用，可直接填写国际区号`);
+              } finally {
+                k || (D.value = !1);
+              }
+            }
+          }
+          return (n, r) => (
+            openBlock(),
+            createElementBlock(`div`, m, [
+              createElementVNode(
+                `label`,
+                {
+                  for: `${unref(w)}-phone-code`,
+                },
+                `国际区号`,
+                8,
+                h,
+              ),
+              createElementVNode(`div`, g, [
+                (r[1] ||= createElementVNode(
+                  `span`,
+                  {
+                    "aria-hidden": `true`,
+                  },
+                  `+`,
+                  -1,
+                )),
+                createElementVNode(
+                  `input`,
+                  {
+                    id: `${unref(w)}-phone-code`,
+                    value: S.modelValue,
+                    list: `${unref(w)}-countries`,
+                    inputmode: `numeric`,
+                    autocomplete: `tel-country-code`,
+                    maxlength: `4`,
+                    disabled: u.disabled,
+                    onFocus: A,
+                    onInput: (r[0] ||= (e) =>
+                      C(
+                        `update:modelValue`,
+                        e.target.value.replace(/^\+/, ``).trim(),
+                      )),
+                  },
+                  null,
+                  40,
+                  _,
+                ),
+              ]),
+              createElementVNode(
+                `datalist`,
+                {
+                  id: `${unref(w)}-countries`,
+                },
+                [
+                  (openBlock(!0),
+                  createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(
+                      unref(E),
+                      (t, n) => (
+                        openBlock(),
+                        createElementBlock(
+                          `option`,
+                          {
+                            key: `${t.phone_code}-${n}`,
+                            value: t.phone_code,
+                          },
+                          toDisplayString(t.name) +
+                            ` +` +
+                            toDisplayString(t.phone_code),
+                          9,
+                          y,
+                        )
+                      ),
+                    ),
+                    128,
+                  )),
+                ],
+                8,
+                v,
+              ),
+              unref(D)
+                ? (openBlock(), createElementBlock(`small`, b, `正在加载地区…`))
+                : createCommentVNode(``, !0),
+              unref(O)
+                ? (openBlock(),
+                  createElementBlock(`small`, x, toDisplayString(unref(O)), 1))
+                : createCommentVNode(``, !0),
+            ])
+          );
+        },
+      }),
+      [[`__scopeId`, `data-v-24cb0489`]],
+    ),
+    {
+      __name: `PhoneCodeField`,
+    },
+  );
+export {};
+export default S;
+</script>