ik-next-ui 0.0.1

package/dist/IkHorizontalStepBar/ik.index.es.js

@@ -0,0 +1,279 @@
+import { defineComponent as M, ref as g, watch as w, nextTick as b, onMounted as F, resolveComponent as O, openBlock as d, createElementBlock as v, createVNode as I, withCtx as z, unref as W, createCommentVNode as L, createElementVNode as r, normalizeStyle as f, Fragment as V, renderList as j, normalizeClass as m, renderSlot as A, createTextVNode as q, toDisplayString as $ } from "vue";
+import { ArrowLeft as G, ArrowRight as J } from "@element-plus/icons-vue";
+const K = (e, C) => (e.install = (s) => {
+  for (const i of [e, ...Object.values({})])
+    s.component(i.name, i);
+}, e), P = { class: "ik-hor-step-content" }, Q = ["onClick"], U = { class: "ik-hor-step_main" }, X = ["id", "onClick"], Y = ["id", "onClick"], Z = /* @__PURE__ */ M({
+  __name: "IkHorizontalStepBar",
+  props: {
+    spaceNum: {
+      type: String,
+      default: "58px"
+    },
+    // 当前激活的下标
+    active: {
+      type: Number,
+      default: null
+    },
+    // 当前激活颜色
+    activeColor: {
+      type: String,
+      default: ""
+    },
+    // 步骤是否可点击
+    needClick: {
+      type: Boolean,
+      default: !0
+    },
+    // 步骤数据
+    list: {
+      type: Array,
+      default: () => []
+    },
+    // 文本方向 居中
+    alignCenter: {
+      type: Boolean,
+      default: !1
+    },
+    // 数字样式：circle 圆形，rect 矩形
+    numShape: {
+      type: String,
+      default: "rect",
+      validator: (e) => ["circle", "rect"].includes(e)
+    },
+    // 映射字段
+    propsField: {
+      type: Object,
+      default: () => ({
+        title: "title",
+        description: "description",
+        value: "value"
+      })
+    }
+  },
+  emits: ["click", "update:active"],
+  setup(e, { emit: C }) {
+    const s = e, i = C, a = g(!1), y = g(), k = g(), u = g(!1);
+    w(
+      () => s.active,
+      (n) => {
+        let t = document.getElementById("stepItemContent"), c = document.getElementById(`stepItem${n}`), o = document.getElementById("stepItem0");
+        const l = c && o ? (c == null ? void 0 : c.offsetLeft) - (o == null ? void 0 : o.offsetLeft) : 0;
+        t && c && (t.scrollLeft = l > (t == null ? void 0 : t.clientWidth) ? l - (t == null ? void 0 : t.offsetLeft) : 0);
+      }
+    ), w(
+      () => s.list,
+      () => {
+        b(() => {
+          let t = document.getElementById("stepItemContent"), c = (t == null ? void 0 : t.scrollWidth) > (t == null ? void 0 : t.clientWidth);
+          a.value = c, window.addEventListener("resize", n, !0);
+        });
+        const n = () => {
+          let t = document.getElementById("stepItemContent"), c = (t == null ? void 0 : t.scrollWidth) > (t == null ? void 0 : t.clientWidth);
+          a.value = c;
+        };
+      },
+      { deep: !0 }
+    ), F(() => {
+      b(() => {
+        let t = document.getElementById("stepItemContent"), c = (t == null ? void 0 : t.scrollWidth) > (t == null ? void 0 : t.clientWidth);
+        a.value = c, window.addEventListener("resize", n, !0);
+      });
+      const n = () => {
+        let t = document.getElementById("stepItemContent"), c = (t == null ? void 0 : t.scrollWidth) > (t == null ? void 0 : t.clientWidth);
+        a.value = c;
+      };
+    });
+    const p = (n, t) => {
+      if (!s.needClick) return;
+      i("update:active", t), i("click", n);
+      let c = document.getElementById("stepItemContent"), o = document.getElementById(`stepItem${t}`), l = document.getElementById("stepItem0");
+      const h = o && l ? (o == null ? void 0 : o.offsetLeft) - (l == null ? void 0 : l.offsetLeft) : 0;
+      c && o && (c.scrollLeft = h > (c == null ? void 0 : c.clientWidth) ? h - (c == null ? void 0 : c.offsetLeft) : 0);
+    }, B = () => {
+      let n = document.getElementById("stepItemContent");
+      n && (n.scrollLeft = n.scrollLeft - 20);
+    }, S = () => {
+      let n = document.getElementById("stepItemContent");
+      n && (n.scrollLeft = n.scrollLeft + 20);
+    }, N = () => {
+      clearInterval(k.value);
+      let n = document.getElementById("stepItemContent");
+      u.value = !1, k.value = setInterval(() => {
+        u.value = !0, n && (n.scrollLeft = n.scrollLeft - 20);
+      }, 100);
+    }, T = () => {
+      clearInterval(k.value), u.value || B();
+    }, H = () => {
+      clearInterval(y.value);
+      let n = document.getElementById("stepItemContent");
+      u.value = !1, y.value = setInterval(() => {
+        u.value = !0, n && (n.scrollLeft = n.scrollLeft + 20);
+      }, 100);
+    }, R = () => {
+      clearInterval(y.value), u.value || S();
+    };
+    return (n, t) => {
+      const c = O("el-icon");
+      return d(), v("div", P, [
+        a.value ? (d(), v(
+          "div",
+          {
+            key: 0,
+            class: "icon-left",
+            onMousedown: N,
+            onMouseup: T,
+            onClick: B
+          },
+          [
+            I(c, { class: "operation-icon" }, {
+              default: z(() => [
+                I(W(G), { size: "26px" })
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ],
+          32
+          /* NEED_HYDRATION */
+        )) : L("v-if", !0),
+        r(
+          "div",
+          {
+            class: "step-item-content",
+            id: "stepItemContent",
+            style: f({
+              justifyContent: a.value ? "flex-start" : "center"
+              // width: alignCenter ? `100%` : '',
+            })
+          },
+          [
+            (d(!0), v(
+              V,
+              null,
+              j(e.list, (o, l) => {
+                var h;
+                return d(), v(
+                  "div",
+                  {
+                    class: m(`${e.alignCenter ? "ik-hor-step-item" : ""} step-item ${l <= e.active ? "step-item-active" : ""}`),
+                    style: f({ width: e.alignCenter ? `calc(100%/${(h = e.list) == null ? void 0 : h.length})` : "" }),
+                    key: l
+                  },
+                  [
+                    r(
+                      "div",
+                      {
+                        class: m(`${e.alignCenter ? "ik-hor-step_head" : ""} `)
+                      },
+                      [
+                        l !== 0 ? (d(), v(
+                          "div",
+                          {
+                            key: 0,
+                            class: m(`ik-hor-step_line step-border ${l <= e.active ? "step-border-greater-than" : ""}`),
+                            style: f({
+                              width: `${e.spaceNum.indexOf("px") != -1 ? e.spaceNum : `${e.spaceNum}px`}`
+                            })
+                          },
+                          [...t[0] || (t[0] = [
+                            r(
+                              "i",
+                              { class: "ik-hor-step_line_inner" },
+                              null,
+                              -1
+                              /* CACHED */
+                            )
+                          ])],
+                          6
+                          /* CLASS, STYLE */
+                        )) : L("v-if", !0),
+                        r("div", {
+                          class: m(`step-num step-num-${e.numShape} ${l === e.active ? "step-num-active" : l < e.active ? "step-num-greater-than" : ""}`),
+                          onClick: (E) => p(o, l),
+                          style: f({
+                            backgroundColor: l === e.active && e.activeColor ? e.activeColor : "",
+                            "--ik-step-active-shadow": l === e.active && e.activeColor ? `${e.activeColor}40` : "rgba(3, 158, 247, 0.4)",
+                            cursor: o && o.disabled ? "not-allowed" : e.needClick ? "pointer" : "context-menu"
+                          })
+                        }, [
+                          A(n.$slots, "icon", {
+                            data: { item: o, index: l }
+                          }, () => [
+                            q(
+                              $(l + 1),
+                              1
+                              /* TEXT */
+                            )
+                          ], !0)
+                        ], 14, Q)
+                      ],
+                      2
+                      /* CLASS */
+                    ),
+                    r("div", U, [
+                      r("div", {
+                        id: `stepItem${l}`,
+                        class: m(`step-label ${e.active === l ? "step-label-active" : l < e.active ? "step-label-greater-than" : ""} step-item-${l}`),
+                        style: f({
+                          color: l === e.active && e.activeColor ? e.activeColor : "",
+                          cursor: o && o.disabled ? "not-allowed" : e.needClick ? "pointer" : "context-menu"
+                        }),
+                        onClick: (E) => p(o, l)
+                      }, $(o[e.propsField.title]), 15, X),
+                      r("div", {
+                        id: `stepItemDesc${l}`,
+                        class: m(`step-description step-label ${e.active === l ? "step-label-active" : l < e.active ? "step-label-greater-than" : ""} step-item-${l}`),
+                        style: f({
+                          color: l === e.active && e.activeColor ? e.activeColor : "",
+                          cursor: o && o.disabled ? "not-allowed" : e.needClick ? "pointer" : "context-menu"
+                        }),
+                        onClick: (E) => p(o, l)
+                      }, $(o[e.propsField.description]), 15, Y)
+                    ])
+                  ],
+                  6
+                  /* CLASS, STYLE */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          4
+          /* STYLE */
+        ),
+        a.value ? (d(), v(
+          "div",
+          {
+            key: 1,
+            class: "icon-right",
+            onMousedown: H,
+            onMouseup: R,
+            onClick: S
+          },
+          [
+            I(c, { class: "operation-icon" }, {
+              default: z(() => [
+                I(W(J))
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ],
+          32
+          /* NEED_HYDRATION */
+        )) : L("v-if", !0)
+      ]);
+    };
+  }
+}), D = (e, C) => {
+  const s = e.__vccOpts || e;
+  for (const [i, a] of C)
+    s[i] = a;
+  return s;
+}, x = /* @__PURE__ */ D(Z, [["__scopeId", "data-v-432d8709"]]), te = K(x);
+export {
+  te as IkHorizontalStepBar,
+  te as default
+};

package/dist/IkIconPicker/ik-next-ui.css

@@ -0,0 +1 @@
+.ik-icon[data-v-701f2359]{cursor:pointer;outline:none;border-radius:var(--ik-radius)}.ik-icon[data-v-701f2359] .el-tooltip__trigger{width:inherit;height:inherit}.ik-icon .iconfont[data-v-701f2359]{display:inline-flex;align-items:center;justify-content:center}.ik-icon .two-color-icon[data-v-701f2359]{transition:all .2s ease}.ik-icon.margin+.ik-icon[data-v-701f2359]:not(.un-margin){margin-left:var(--ik-margin-8)}.ik-icon:not(.is-disabled):hover .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-deep-hover);--ik-icon-shallow-color: var(--ik-icon-shallow-hover)}.ik-icon.is-active .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-deep-active);--ik-icon-shallow-color: var(--ik-icon-shallow-active)}.ik-icon.is-disabled .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-deep-disabled);--ik-icon-shallow-color: var(--ik-icon-shallow-disabled);cursor:not-allowed;opacity:.6}.ik-icon.is-success:not(.is-disabled):hover .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-success-deep-hover);--ik-icon-shallow-color: var(--ik-icon-success-shallow-hover)}.ik-icon.is-success.is-active .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-success-deep-active);--ik-icon-shallow-color: var(--ik-icon-success-shallow-active)}.ik-icon.is-warning:not(.is-disabled):hover .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-warning-deep-hover);--ik-icon-shallow-color: var(--ik-icon-warning-shallow-hover)}.ik-icon.is-warning.is-active .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-warning-deep-active);--ik-icon-shallow-color: var(--ik-icon-warning-shallow-active)}.ik-icon.is-danger:not(.is-disabled):hover .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-danger-deep-hover);--ik-icon-shallow-color: var(--ik-icon-danger-shallow-hover)}.ik-icon.is-danger.is-active .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-danger-deep-active);--ik-icon-shallow-color: var(--ik-icon-danger-shallow-active)}.ik-icon.is-error:not(.is-disabled):hover .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-danger-deep-hover);--ik-icon-shallow-color: var(--ik-icon-danger-shallow-hover)}.ik-icon.is-error.is-active .two-color-icon[data-v-701f2359]{--ik-icon-deep-color: var(--ik-icon-danger-deep-active);--ik-icon-shallow-color: var(--ik-icon-danger-shallow-active)}.ik-icon.text-danger[data-v-701f2359]:hover,.ik-icon .iksvg_shanchu[data-v-701f2359]:hover{color:var(--ik-color-error)}.ik-icon.is-active[data-v-701f2359]{color:var(--ik-color-primary)}.ik-icon.bg[data-v-701f2359]{color:var(--ik-icon-color);background-color:var(--ik-icon-bg)}.ik-icon.bg.is-active[data-v-701f2359]{color:var(--ik-color-primary);background-color:var(--ik-icon-hover-bg)}.ik-icon.bg[data-v-701f2359]:not(.is-disabled):hover{color:var(--ik-color-primary);background-color:var(--ik-icon-hover-bg)}.ik-icon.bg.is-disabled[data-v-701f2359]{background-color:var(--ik-icon-disabled-bg)}.ik-icon.bg.is-success.is-active[data-v-701f2359]{color:var(--ik-color-success);background-color:var(--ik-icon-success-hover-bg)}.ik-icon.bg.is-success[data-v-701f2359]:not(.is-disabled):hover{color:var(--ik-color-success);background-color:var(--ik-icon-success-hover-bg)}.ik-icon.bg.is-warning.is-active[data-v-701f2359]{color:var(--ik-color-warning);background-color:var(--ik-icon-warning-hover-bg)}.ik-icon.bg.is-warning[data-v-701f2359]:not(.is-disabled):hover{color:var(--ik-color-warning);background-color:var(--ik-icon-warning-hover-bg)}.ik-icon.bg.is-danger.is-active[data-v-701f2359]{color:var(--ik-color-error);background-color:var(--ik-icon-danger-hover-bg)}.ik-icon.bg.is-danger[data-v-701f2359]:not(.is-disabled):hover{color:var(--ik-color-error);background-color:var(--ik-icon-danger-hover-bg)}.ik-icon.bg.is-error.is-active[data-v-701f2359]{color:var(--ik-color-error);background-color:var(--ik-icon-error-hover-bg)}.ik-icon.bg.is-error[data-v-701f2359]:not(.is-disabled):hover{color:var(--ik-color-error);background-color:var(--ik-icon-error-bg)}.ik-icon.bg.text-danger.is-active[data-v-701f2359]{color:var(--ik-color-error);background-color:var(--ik-danger-light-2)}.ik-icon.bg.text-danger[data-v-701f2359]:not(.is-disabled):hover{color:var(--ik-color-error);background-color:var(--ik-danger-light-2)}.ik-icon.bg .iksvg_shanchu[data-v-701f2359]:hover{color:var(--ik-color-error);background-color:var(--ik-danger-light-2)}.ik-icon.bg svg[data-v-701f2359]{padding:21%}.icon-picker-pop .icon-list[data-v-3d7941f0]{display:grid;grid-template-columns:repeat(auto-fill,36px);grid-gap:var(--ik-margin-16);justify-content:flex-start;justify-items:flex-end;max-height:400px;margin-top:16px;overflow-y:auto;font-size:25px;content-visibility:auto}.icon-picker-pop .icon-list .ik-svg-icon[data-v-3d7941f0]{content-visibility:auto}.icon-picker-header{position:relative;display:inline-flex;display:flex;align-items:center;justify-content:center;width:var(--ik-base-height);height:var(--ik-base-height);cursor:pointer;border:1px dashed var(--ik-color-divider);border-radius:var(--ik-border-radius-xs);transition:border .25s ease-in-out}.icon-picker-header:hover{border-color:var(--ik-color-primary)}.icon-picker-header .icon-delete{position:absolute;top:-6px;right:-8px;font-size:var(--ik-font-size-t2)}