@project-trans/suggestion-box - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/App.vue.d.ts

 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     attachImageButtonText?: string | undefined;
     sendButtonText?: string | undefined;
+    sendingButtonText?: string | undefined;
     sentSuccessButtonText?: string | undefined;
@@ -12,2 +13,3 @@ sentFailedButtonText?: string | undefined;
     sendButtonText: string;
+    sendingButtonText: string;
     sentSuccessButtonText: string;
@@ -21,2 +23,3 @@ sentFailedButtonText: string;
     sendButtonText?: string | undefined;
+    sendingButtonText?: string | undefined;
     sentSuccessButtonText?: string | undefined;
@@ -30,2 +33,3 @@ sentFailedButtonText?: string | undefined;
     sendButtonText: string;
+    sendingButtonText: string;
     sentSuccessButtonText: string;
@@ -39,2 +43,3 @@ sentFailedButtonText: string;
     sendButtonText: string;
+    sendingButtonText: string;
     sentSuccessButtonText: string;
@@ -41,0 +46,0 @@ sentFailedButtonText: string;

dist/index.js

@@ -1,14 +0,14 @@
-import { defineComponent as C, ref as c, watch as T, openBlock as r, createElementBlock as u, withModifiers as j, createElementVNode as e, withDirectives as _, vModelText as b, toDisplayString as v, Fragment as B, renderList as U, createCommentVNode as S, normalizeClass as F, createVNode as I, Transition as L, withCtx as P } from "vue";
-const R = ["placeholder"], V = { class: "sb-auto-height inline-grid items-stretch" }, D = ["placeholder"], E = { class: "m-2" }, N = { key: 0 }, O = { class: "cursor-pointer appearance-none m-0!" }, A = { class: "flex overflow-x-scroll space-x-4" }, M = ["onClick"], $ = /* @__PURE__ */ e("div", {
+import { defineComponent as j, ref as u, watch as B, openBlock as s, createElementBlock as o, withModifiers as U, createElementVNode as e, withDirectives as g, vModelText as y, toDisplayString as h, Fragment as p, renderList as S, createCommentVNode as F, normalizeClass as I, createVNode as L, Transition as P, withCtx as R } from "vue";
+const V = ["placeholder"], D = { class: "inline-grid items-stretch sb-auto-height" }, E = ["placeholder"], N = { class: "m-2" }, O = { key: 0 }, A = { class: "cursor-pointer appearance-none m-0!" }, M = { class: "flex overflow-x-scroll space-x-4" }, $ = ["onClick"], q = /* @__PURE__ */ e("div", {
   "i-octicon:trash-24": "",
   class: "h-4 w-4 flex items-center justify-center"
-}, null, -1), q = [
-  $
-], G = ["src"], H = {
+}, null, -1), G = [
+  q
+], H = ["src"], J = {
   class: "flex justify-around rounded-b-md p-2 <sm:flex-col space-x-2 <sm:space-x-0 <sm:space-y-2",
   bg: "zinc-50 dark:zinc-900"
-}, J = ["aria-label"], K = /* @__PURE__ */ e("div", {
+}, K = ["aria-label"], Q = /* @__PURE__ */ e("div", {
   "i-octicon:image-24": "",
   class: "mr-1 flex items-center justify-center"
-}, null, -1), Q = { text: "sm" }, W = ["aria-label", "disabled"], X = { class: "flex items-center justify-center" }, Y = {
+}, null, -1), W = { text: "sm" }, X = ["aria-label", "disabled"], Y = { class: "flex items-center justify-center" }, Z = {
   key: 0,
@@ -18,6 +18,6 @@ flex: "",
   "space-x-1": ""
-}, Z = /* @__PURE__ */ e("div", {
+}, ee = /* @__PURE__ */ e("div", {
   "i-octicon:check-circle-fill-24": "",
   class: "mr-1 flex items-center justify-center text-green-600"
-}, null, -1), ee = { text: "sm" }, te = {
+}, null, -1), te = { text: "sm" }, ne = {
   key: 1,
@@ -27,6 +27,6 @@ flex: "",
   "space-x-1": ""
-}, ne = /* @__PURE__ */ e("div", {
+}, ae = /* @__PURE__ */ e("div", {
   "i-octicon:alert-fill-24": "",
   class: "mr-1 flex items-center justify-center text-red-600"
-}, null, -1), ae = { text: "sm" }, le = {
+}, null, -1), le = { text: "sm" }, se = {
   key: 2,
@@ -36,6 +36,9 @@ flex: "",
   "space-x-1": ""
-}, se = /* @__PURE__ */ e("div", {
+}, oe = /* @__PURE__ */ e("div", {
   "i-octicon:paper-airplane-24": "",
   class: "mr-1 flex items-center justify-center"
-}, null, -1), oe = { text: "sm" }, ce = /* @__PURE__ */ C({
+}, null, -1), ie = { text: "sm" }, ce = /* @__PURE__ */ e("div", {
+  "i-svg-spinners:180-ring-with-bg": "",
+  class: "mr-1 flex items-center justify-center"
+}, null, -1), re = { text: "sm" }, de = /* @__PURE__ */ j({
   __name: "App",
@@ -45,2 +48,3 @@ props: {
     sendButtonText: { default: "发送" },
+    sendingButtonText: { default: "发送中..." },
     sentSuccessButtonText: { default: "发送成功，谢谢反馈" },
@@ -52,8 +56,8 @@ sentFailedButtonText: { default: "发送失败，请稍后再试" },
   },
-  setup(y) {
-    const i = y, d = c(), s = c(!1), o = c(!1), f = c([]), m = c(""), h = c(""), a = c([]);
-    T(
+  setup(k) {
+    const i = k, f = u(), v = u(""), x = u(""), a = u([]), m = u([]), d = u(!1), c = u(!1), r = u(!1);
+    B(
       a,
       (n) => {
-        f.value.forEach((t) => URL.revokeObjectURL(t)), f.value = n.map((t) => URL.createObjectURL(t));
+        m.value.forEach((t) => URL.revokeObjectURL(t)), m.value = n.map((t) => URL.createObjectURL(t));
       },
@@ -64,3 +68,3 @@ {
     );
-    function g(n) {
+    function z(n) {
       const t = Array.from(n.target.files ?? []);
@@ -72,42 +76,46 @@ if (a.value.length === 0) {
       t.forEach((l) => {
-        a.value.find((x) => x.name === l.name) || a.value.push(l);
+        a.value.find((b) => b.name === l.name) || a.value.push(l);
       });
     }
-    function z() {
-      d.value && (d.value.value = "", d == null || d.value.click());
+    function w() {
+      f.value && (f.value.value = "", f == null || f.value.click());
     }
-    function k(n) {
-      f.value.splice(n, 1), a.value.splice(n, 1);
+    function C(n) {
+      m.value.splice(n, 1), a.value.splice(n, 1);
     }
-    async function w() {
-      if (s.value = !1, o.value = !1, !m.value)
+    async function T() {
+      if (c.value = !1, r.value = !1, !v.value)
         return;
       const n = new FormData();
-      if (n.append("textContent", m.value), a.value)
+      if (n.append("textContent", v.value), a.value)
         for (let t = 0; t < a.value.length; t += 1)
           n.append("images", a.value[t]);
       try {
-        await fetch(i.targetUrl || "", {
+        d.value = !0, await fetch(i.targetUrl || "", {
           method: "POST",
-          body: n
-        });
+          body: n,
+          // otherwise the fetch() call will failed even
+          // when the request has been sent successfully
+          // due to the CORS policy
+          mode: "no-cors"
+        }), d.value = !1;
       } catch (t) {
-        o.value = !0, console.error(t), setTimeout(() => {
-          s.value = !1, o.value = !1;
+        d.value = !1, r.value = !0, console.error(t), setTimeout(() => {
+          c.value = !1, r.value = !1;
         }, 2e3);
         return;
       }
-      s.value = !0, setTimeout(() => {
-        s.value = !1, o.value = !1;
+      c.value = !0, setTimeout(() => {
+        c.value = !1, r.value = !1;
       }, 2e3);
     }
-    return (n, t) => (r(), u("form", {
+    return (n, t) => (s(), o("form", {
       class: "flex flex-col overflow-hidden rounded-lg",
       border: "2 solid zinc-200 dark:zinc-800",
-      onSubmit: j(() => {
+      onSubmit: U(() => {
       }, ["prevent"])
     }, [
       e("label", null, [
-        _(e("input", {
-          "onUpdate:modelValue": t[0] || (t[0] = (l) => h.value = l),
+        g(e("input", {
+          "onUpdate:modelValue": t[0] || (t[0] = (l) => x.value = l),
           class: "min-h-0 w-full resize-none rounded-t-md border-none p-2 outline-none",
@@ -117,23 +125,23 @@ bg: "zinc-100 dark:zinc-900",
           placeholder: n.contactContentPlaceholder
-        }, null, 8, R), [
-          [b, h.value]
+        }, null, 8, V), [
+          [y, x.value]
         ])
       ]),
-      e("label", V, [
-        _(e("textarea", {
-          "onUpdate:modelValue": t[1] || (t[1] = (l) => m.value = l),
+      e("label", D, [
+        g(e("textarea", {
+          "onUpdate:modelValue": t[1] || (t[1] = (l) => v.value = l),
           class: "min-h-0 resize-none rounded-t-md border-none p-2 outline-none",
           bg: "$vp-c-bg",
           placeholder: n.textContentPlaceholder
-        }, null, 8, D), [
-          [b, m.value]
+        }, null, 8, E), [
+          [y, v.value]
         ])
       ]),
-      e("div", E, [
-        f.value.length !== 0 ? (r(), u("details", N, [
-          e("summary", O, [
-            e("span", null, v(f.value.length) + " 张图片 ", 1)
+      e("div", N, [
+        m.value.length !== 0 ? (s(), o("details", O, [
+          e("summary", A, [
+            e("span", null, " 当前选中了 " + h(m.value.length) + " 张图片 ", 1)
           ]),
-          e("div", A, [
-            (r(!0), u(B, null, U(f.value, (l, p) => (r(), u("div", {
+          e("div", M, [
+            (s(!0), o(p, null, S(m.value, (l, _) => (s(), o("div", {
               key: l,
@@ -147,4 +155,4 @@ class: "relative"
                 text: "zinc-100",
-                onClick: (x) => k(p)
-              }, q, 8, M),
+                onClick: (b) => C(_)
+              }, G, 8, $),
               e("img", {
@@ -154,8 +162,8 @@ src: l,
                 alt: "图片"
-              }, null, 8, G)
+              }, null, 8, H)
             ]))), 128))
           ])
-        ])) : S("", !0)
+        ])) : F("", !0)
       ]),
-      e("div", H, [
+      e("div", J, [
         e("label", {
@@ -167,3 +175,3 @@ "aria-label": i.attachImageButtonText,
             ref_key: "inputFile",
-            ref: d,
+            ref: f,
             type: "file",
@@ -173,3 +181,3 @@ accept: "image/*",
             hidden: "",
-            onChange: g
+            onChange: z
           }, null, 544),
@@ -181,14 +189,14 @@ e("button", {
             text: "zinc-700 dark:zinc-300 base",
-            onClick: z
+            onClick: w
           }, [
-            K,
-            e("span", Q, v(i.attachImageButtonText), 1)
+            Q,
+            e("span", W, h(i.attachImageButtonText), 1)
           ])
-        ], 8, J),
+        ], 8, K),
         e("button", {
           type: "submit",
           "aria-label": i.sendButtonText,
-          class: F([[
-            !m.value || s.value || o.value ? "cursor-not-allowed" : "",
-            s.value || o.value ? "text-zinc-700 disabled:text-zinc-700 dark:text-zinc-300 dark:disabled:text-zinc-300" : "text-zinc-700 disabled:text-zinc-400 dark:text-zinc-300 dark:disabled:text-zinc-600"
+          class: I([[
+            !v.value || d.value || c.value || r.value ? "cursor-not-allowed" : "",
+            d.value || c.value || r.value ? "text-zinc-700 disabled:text-zinc-700 dark:text-zinc-300 dark:disabled:text-zinc-300" : "text-zinc-700 disabled:text-zinc-400 dark:text-zinc-300 dark:disabled:text-zinc-600"
           ], "block w-full flex cursor-pointer justify-center rounded-md px-2 py-2 duration-250"]),
@@ -198,7 +206,7 @@ transition: "all ease-in-out",
           text: "base",
-          disabled: !m.value || s.value || o.value,
-          onClick: w
+          disabled: !v.value || d.value || c.value || r.value,
+          onClick: T
         }, [
-          e("div", X, [
-            I(L, {
+          e("div", Y, [
+            L(P, {
               mode: "out-in",
@@ -212,12 +220,17 @@ "enter-active-class": "transition-all duration-200 ease-out",
             }, {
-              default: P(() => [
-                s.value ? (r(), u("span", Y, [
-                  Z,
-                  e("span", ee, v(i.sentSuccessButtonText), 1)
-                ])) : o.value ? (r(), u("span", te, [
-                  ne,
-                  e("span", ae, v(i.sentFailedButtonText), 1)
-                ])) : (r(), u("span", le, [
-                  se,
-                  e("span", oe, v(i.sendButtonText), 1)
+              default: R(() => [
+                c.value ? (s(), o("span", Z, [
+                  ee,
+                  e("span", te, h(i.sentSuccessButtonText), 1)
+                ])) : r.value ? (s(), o("span", ne, [
+                  ae,
+                  e("span", le, h(i.sentFailedButtonText), 1)
+                ])) : (s(), o("span", se, [
+                  d.value ? (s(), o(p, { key: 1 }, [
+                    ce,
+                    e("span", re, h(i.sendingButtonText), 1)
+                  ], 64)) : (s(), o(p, { key: 0 }, [
+                    oe,
+                    e("span", ie, h(i.sendButtonText), 1)
+                  ], 64))
                 ]))
@@ -228,3 +241,3 @@ ]),
           ])
-        ], 10, W)
+        ], 10, X)
       ])
@@ -235,3 +248,3 @@ ], 32));
 export {
-  ce as default
+  de as default
 };

package.json

 {
   "name": "@project-trans/suggestion-box",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "packageManager": "pnpm@8.15.4",
@@ -48,2 +48,3 @@ "description": "Suggestion box for Project Trans",
     "@iconify-json/octicon": "^1.1.52",
+    "@iconify-json/svg-spinners": "^1.1.2",
     "@types/node": "^20.11.24",
@@ -50,0 +51,0 @@ "@unocss/eslint-plugin": "^0.58.5",

README.md

@@ -9,3 +9,3 @@ # Suggestion box
 # Or npm, yarn, bun, etc.
-pnpm add pjts-suggestion-box
+pnpm add @project-trans/suggestion-box
 pnpm add @iconify-json/octicon -D # Suggestion Box uses octicon.
@@ -18,7 +18,17 @@ ```
 <template>
-  <SuggestionBox target-url="https://example.com" send-text="发送" text-content-placeholder="114514" contact-content-placeholder="1919810" />
+  <SuggestionBox
+    target-url="https://example.com"
+    contact-content-placeholder="联系方式占位符"
+    text-content-placeholder="文本内容占位符"
+    attach-image-button-text="附加图片按钮文案"
+    send-button-text="发送按钮文案"
+    sending-button-text="发送中按钮文案"
+    sent-success-button-text="发送成功按钮文案"
+    sent-failed-button-text="发送失败按钮文案"
+  />
 </template>
 
 <script>
-import SuggestionBox from 'pjts-suggestion-box';
+import SuggestionBox from '@project-trans/suggestion-box';
+import '@project-trans/suggestion-box/dist/style.css';
 </script>
@@ -30,4 +40,4 @@ ```
 ```ts
-import presetSBox from 'pjts-suggestion-box/dist/preset';
 import { defineConfig, presetUno, presetIcons } from 'unocss';
+import presetSBox from '@project-trans/suggestion-box/dist/preset';
 
@@ -61,4 +71,20 @@ export default defineConfig({
 corepack enable
-pnpm i
+```
+
+### Install dependencies
+
+```bash
+pnpm install
+```
+
+### Start UI development server
+
+```bash
 pnpm dev
 ```
+
+### Start Cloudflare Pages Functions development server
+
+```bash
+pnpm -F server dev
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38025

increased by8.06%

Lines of code

422

increased by5.76%

Number of lines in readme file

87

increased by42.62%

Worsened metrics

Dev dependency count

13

increased by8.33%

No dependency changes