ik-next-ui 0.0.1

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

@@ -0,0 +1 @@
+.ik-statu-tag[data-v-7a277a65]:not(:first-child){margin-left:4px}.el-tag[data-v-7a277a65]:not(.el-tag--plain){border:none}.el-tag--danger[data-v-7a277a65]:not(.el-tag--plain){color:var(--ik-color-error);background-color:var(--ik-color-error-light)}.ik-statu-over{width:auto!important;min-width:0!important}.tag-container[data-v-a3bfebee]{display:flex;width:100%}.tag-container .ik-statu-tag[data-v-a3bfebee]{max-width:calc(100% - 46px)}.tag-container .el-tag[data-v-a3bfebee]:not(:last-child){margin-right:5px}.tag-container[data-v-a3bfebee] .el-tag__content{display:inline-block!important;width:100%;overflow:hidden;text-overflow:ellipsis}

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

@@ -0,0 +1,359 @@
+import { defineComponent as W, computed as g, resolveComponent as h, openBlock as i, createBlock as b, normalizeStyle as I, normalizeClass as j, withCtx as m, createElementBlock as v, createCommentVNode as _, createTextVNode as B, toDisplayString as V, ref as D, Fragment as C, renderList as x, unref as T, mergeProps as $, createElementVNode as L, getCurrentInstance as P, useModel as M, renderSlot as z, withDirectives as E, createVNode as H, vShow as R, mergeModels as N } from "vue";
+import { ikDom as F } from "iking-utils-pro";
+const A = (l, f) => (l.install = (e) => {
+  for (const a of [l, ...Object.values({})])
+    e.component(a.name, a);
+}, l), O = (l, f) => {
+  const e = l.__vccOpts || l;
+  for (const [a, n] of f)
+    e[a] = n;
+  return e;
+}, U = /* @__PURE__ */ W({
+  __name: "index",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "primary"
+    },
+    // 传了type时，color和background不生效
+    // 文字颜色
+    color: {
+      type: String,
+      default: ""
+    },
+    // 背景色
+    background: {
+      type: String,
+      default: ""
+    },
+    circleColor: {
+      type: String,
+      default: ""
+    },
+    effect: {
+      type: String,
+      default: "plain"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    circle: {
+      type: Boolean,
+      default: !1
+    },
+    // 预留参数
+    circleW: {
+      type: Number,
+      default: 8
+    },
+    // 预留参数
+    circleH: {
+      type: Number,
+      default: 8
+    },
+    borderWidth: {
+      type: Number,
+      default: 1
+    },
+    borderType: {
+      type: String,
+      default: "solid"
+    }
+  },
+  emits: ["close"],
+  setup(l, { emit: f }) {
+    const e = l, a = g(() => {
+      const o = e.type ? e.type === "danger" ? `var(--el-color-${e.type})` : {
+        color: `var(--ik-color-${e.type})`,
+        backgroundColor: `var(--ik-color-${e.type}-light)`
+      } : {
+        color: e.color,
+        backgroundColor: e.background,
+        border: "none"
+      };
+      if (e.color)
+        return o.backgroundColor = e.background || "transparent", o.borderColor = e.background ? "transparent" : e.color, o.color = e.color, o;
+      if (e.effect === "plain" && e.type !== "danger")
+        o.backgroundColor = "transparent", o.borderColor = e.type ? `var(--ik-color-${e.type})` : e.color, o.color = e.type ? `var(--ik-color-${e.type})` : e.color;
+      else if (e.effect === "dark" && e.type !== "danger") {
+        const y = e.type ? `var(--ik-color-${e.type})` : e.color;
+        o.backgroundColor = y, o.borderColor = y, o.color = "#fff";
+      }
+      return o;
+    }), n = f, s = () => {
+      n("close");
+    };
+    return (o, y) => {
+      const k = h("el-tag");
+      return i(), b(k, {
+        effect: l.effect,
+        class: j(["ik-statu-tag", { disabled: l.disabled }]),
+        type: l.type,
+        style: I(a.value),
+        closable: o.$attrs.closable && !l.disabled,
+        onClose: s
+      }, {
+        default: m(() => [
+          l.circle ? (i(), v(
+            "span",
+            {
+              key: 0,
+              class: "inline-block rounded-full",
+              style: I({
+                backgroundColor: l.circleColor ? l.circleColor : l.type === "danger" ? `var(--el-color-${l.type})` : `var(--ik-color-${l.type})`,
+                width: `${l.circleW}px`,
+                height: `${l.circleH}px`
+              })
+            },
+            null,
+            4
+            /* STYLE */
+          )) : _("v-if", !0),
+          B(
+            " " + V(l.title),
+            1
+            /* TEXT */
+          )
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["effect", "class", "type", "style", "closable"]);
+    };
+  }
+}), q = /* @__PURE__ */ O(U, [["__scopeId", "data-v-7a277a65"]]), w = A(q), G = {
+  key: 1,
+  style: { color: "var(--el-color-info-light-3)" }
+}, J = /* @__PURE__ */ W({
+  __name: "index",
+  props: {
+    // 超出长度时以 +2 这样的方式显示
+    overfolw: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @description: 标签列表 - 支持两种方式
+     * 1. 传入字符串以“,”分割，会随机设置颜色
+     * 2. 传入对象数组，对象包含 title 和 type 两个属性
+     *  type: 除了'success' | 'warning' | 'info' | 'danger' | 'primary' | 'default'这些状态。 也可以是自己定义的颜色值
+     * @return {*}
+     */
+    list: {
+      type: Array,
+      default: () => []
+    },
+    // 可选
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["close"],
+  setup(l, { emit: f }) {
+    const e = l, a = g(() => Array.isArray(e.list) ? e.list : typeof e.list == "string" ? e.list.split(",").map((r, d) => {
+      var p;
+      return {
+        ...((p = e.data) == null ? void 0 : p[d]) || {},
+        title: r,
+        type: ""
+      };
+    }) : []), n = D(null), s = g(() => {
+      try {
+        if (n.value) {
+          const r = n.value.clientWidth;
+          let d = 24;
+          const p = [];
+          let u = 0;
+          for (const t of a.value) {
+            const S = F.useTextWidth(String((t == null ? void 0 : t.title) || t));
+            d += S + 40, (d <= r || !u) && p.push(t), u++;
+          }
+          return p;
+        }
+        return a.value;
+      } catch {
+        return a.value;
+      }
+    }), o = g(() => a.value.length - s.value.length), y = g(() => a.value.slice(s.value.length)), k = f, c = (r) => {
+      k("close", r);
+    };
+    return (r, d) => {
+      const p = h("el-tag"), u = h("el-popover");
+      return i(), v(
+        "div",
+        {
+          ref_key: "containerRef",
+          ref: n,
+          class: "tag-container"
+        },
+        [
+          (i(!0), v(
+            C,
+            null,
+            x(s.value, (t) => (i(), v(
+              C,
+              {
+                key: t.title
+              },
+              [
+                t.title !== "--" ? (i(), b(T(w), $({
+                  key: 0,
+                  title: t.title,
+                  onClose: (S) => c(t),
+                  color: t.color,
+                  type: t.type || "primary"
+                }, { ref_for: !0 }, r.$attrs, {
+                  circle: !1,
+                  disabled: t == null ? void 0 : t.disabled
+                }), null, 16, ["title", "onClose", "color", "type", "disabled"])) : (i(), v(
+                  "span",
+                  G,
+                  V(t.title),
+                  1
+                  /* TEXT */
+                ))
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          o.value ? (i(), b(u, {
+            key: 0,
+            placement: "bottom",
+            "popper-class": "ik-statu-over",
+            trigger: "hover"
+          }, {
+            reference: m(() => [
+              o.value ? (i(), b(p, {
+                key: 0,
+                class: "more-tags",
+                type: "info",
+                closable: !1
+              }, {
+                default: m(() => [
+                  B(
+                    " +" + V(o.value),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                _: 1
+                /* STABLE */
+              })) : _("v-if", !0)
+            ]),
+            default: m(() => [
+              L("div", null, [
+                (i(!0), v(
+                  C,
+                  null,
+                  x(y.value, (t) => (i(), b(T(w), $({
+                    key: t.title,
+                    title: t.title,
+                    color: t.color,
+                    onClose: (S) => c(t),
+                    type: t.type || "primary",
+                    circle: !1
+                  }, { ref_for: !0 }, r.$attrs, {
+                    disabled: t == null ? void 0 : t.disabled
+                  }), null, 16, ["title", "color", "onClose", "type", "disabled"]))),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          })) : _("v-if", !0)
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+}), K = /* @__PURE__ */ O(J, [["__scopeId", "data-v-a3bfebee"]]), Q = A(K), X = /* @__PURE__ */ W({
+  __name: "index",
+  props: /* @__PURE__ */ N({
+    prop: {
+      type: Object,
+      default: () => ({})
+    },
+    tagProps: {
+      type: Object,
+      default: () => ({})
+    }
+  }, {
+    modelValue: {
+      type: [Array, String],
+      default: ""
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ N(["close"], ["update:modelValue"]),
+  setup(l, { emit: f }) {
+    const e = l, a = P(), n = g(() => ({
+      label: "label",
+      value: "value",
+      ...e.prop
+    })), s = M(l, "modelValue"), o = g(() => {
+      let c = [];
+      const r = a == null ? void 0 : a.attrs.options;
+      return Array.isArray(s.value) ? c = s.value.map((d) => r.find((p) => p[n.value.value] === d)) : s.value && (c = [r.find((d) => d[n.value.value] === s.value)]), {
+        list: c.map((d) => d[n.value.label]).join(","),
+        data: c
+      };
+    }), y = f, k = (c) => {
+      s.value = s.value.filter((r) => r !== c[n.value.value]), y("close", c, s.value);
+    };
+    return (c, r) => {
+      const d = h("el-option"), p = h("el-select");
+      return i(), b(p, $(c.$attrs, {
+        "collapse-tags": !1,
+        modelValue: s.value,
+        "onUpdate:modelValue": r[0] || (r[0] = (u) => s.value = u),
+        "no-data-text": "暂无数据",
+        "no-match-text": "无匹配项"
+      }), {
+        tag: m(() => {
+          var u, t;
+          return [
+            E(H(T(Q), $({
+              list: o.value.list,
+              data: o.value.data
+            }, l.tagProps, { onClose: k }), null, 16, ["list", "data"]), [
+              [R, (t = (u = o.value) == null ? void 0 : u.list) == null ? void 0 : t.length]
+            ])
+          ];
+        }),
+        default: m(() => [
+          z(c.$slots, "default", {}, () => [
+            (i(!0), v(
+              C,
+              null,
+              x(c.$attrs.options, (u) => (i(), b(d, {
+                key: u[n.value.value],
+                label: u[n.value.label],
+                value: u[n.value.value],
+                disabled: u.disabled
+              }, null, 8, ["label", "value", "disabled"]))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["modelValue"]);
+    };
+  }
+}), ee = A(X);
+export {
+  ee as IkSelectTag,
+  ee as default
+};

package/dist/IkSideText/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%}.form-icon[data-v-0bc5a180]{--ik-color-white: #fff;display:flex;align-items:center;justify-content:center;width:var(--v435077c3);height:var(--v435077c3);border-radius:4px}.form-icon i[data-v-0bc5a180]{font-size:27px;color:var(--ik-color-white)}.side-text[data-v-da7b45ec]{display:flex}.side-text .side-left[data-v-da7b45ec]{margin-right:12px}.side-text .side-right[data-v-da7b45ec]{display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;text-overflow:ellipsis}.side-text .side-right p[data-v-da7b45ec]{overflow:hidden;text-overflow:ellipsis;line-height:1}.side-text .side-right p[data-v-da7b45ec]:first-child{padding-bottom:7px}.side-text .side-right p[data-v-da7b45ec]:last-child{color:var(--ik-color-font-secondary, #b5b5c3);font-size:13px}