@qi-tian-da-sheng/bin-project-ui 1.0.0

package/es/packages/components/floating/src/floating-props.mjs

@@ -0,0 +1,101 @@
+const t = {
+  /**
+   * @description floating 元素的出现的触发方式
+   */
+  trigger: {
+    type: String,
+    default: "click",
+    validator(e) {
+      return e ? ["hover", "click", "focus", "clickToOpen", "unset"].includes(e) : !0;
+    }
+  },
+  /**
+   * @description floating 元素相对于 reference 元素的定位
+   */
+  placement: {
+    type: String,
+    default: "bottom"
+  },
+  /**
+   * @description floating 元素相对于 reference 元素的偏移
+   */
+  offset: {
+    type: Number,
+    default: 5
+  },
+  /**
+   * @description floating 元素出现时的过渡
+   */
+  transition: {
+    type: String,
+    default: "p-transition-fade"
+  },
+  /**
+   * @description floating 元素出现前的延时
+   */
+  openDelay: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description floating元素消失前的延时
+   */
+  closeDelay: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description 是否禁止 floating 元素改变可视状态
+   */
+  disabled: Boolean,
+  /**
+   * @description 是否可以通过点击 body 来关闭 floating 元素
+   */
+  closeOnClickBody: Boolean,
+  /**
+   * @description 是否挂载后立即渲染 floating 元素
+   */
+  openOnMounted: Boolean,
+  /**
+   * @description 是否将 floating 元素瞬移到 body 下对应容器中, 当 floating 元素 z-index 层级出问题时开启此项
+   */
+  teleported: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description 是否在 floating 元素上创建小箭头
+   */
+  showArrow: Boolean,
+  /**
+   * @description floating 元素容器的类
+   */
+  floatingClass: String,
+  /**
+   * @description 动态 reference 元素, 注意，此项优先级小于 slot.reference
+   */
+  reference: Object,
+  /**
+   * @description 是否开启快速跟踪, 当 reference 元素是可以移动的且 floating 元素更不上移动时开启此项
+   */
+  quickTrack: Boolean,
+  /**
+   * @description 浮动元素打开时的回调
+   */
+  onOpen: Function,
+  /**
+   * @description 浮动元素打开后的回调
+   */
+  onOpened: Function,
+  /**
+   * @description 浮动元素关闭时的回调
+   */
+  onClose: Function,
+  /**
+   * @description 浮动元素关闭后的回调
+   */
+  onClosed: Function
+};
+export {
+  t as default
+};

package/es/packages/components/floating/src/floating.vue.mjs

@@ -0,0 +1,127 @@
+import { defineComponent as O, useSlots as L, ref as u, toRef as V, computed as z, watch as U, onMounted as R, onBeforeUnmount as j, openBlock as f, createElementBlock as w, Fragment as G, unref as c, createBlock as H, withCtx as S, renderSlot as C, createCommentVNode as k, createElementVNode as J, mergeProps as b, createVNode as K, Transition as Q, normalizeStyle as W } from "vue";
+import { useFloating as X, autoUpdate as Y, offset as Z, flip as ee, shift as te, arrow as oe } from "@floating-ui/vue";
+import { useMutationObserver as ne, useEventListener as n, unrefElement as m } from "@vueuse/core";
+import re from "../../abstract/src/partial.vue.mjs";
+import le from "./floating-props.mjs";
+import { useFlag as ae } from "../../../hooks/useFlag.mjs";
+import { useAttrs as A } from "../../../hooks/useAttrs.mjs";
+import { IndexManager as se } from "../../../tools/managers/index-manager.mjs";
+import { useNS as ie } from "../../../hooks/useNS.mjs";
+const ce = ["data-placement"], ue = O({
+  name: "PFloating",
+  inheritAttrs: !1
+}), ke = /* @__PURE__ */ O({
+  ...ue,
+  props: { ...le },
+  setup(F, { expose: B }) {
+    const e = F, h = L(), r = h.reference ? u(null) : V(e, "reference"), l = u(null), d = u(null), { floatingStyles: T, placement: M, middlewareData: P, update: $ } = X(r, l, {
+      placement: e.placement,
+      whileElementsMounted: Y,
+      middleware: [Z(e.offset), ee(), te(), oe({ element: d })]
+    }), { flag: a, setTrue: N, setFalse: q } = ae(!1);
+    let x;
+    const D = z(() => a.value ? (x = T.value, T.value) : x);
+    let p, g;
+    const s = (t) => {
+      clearTimeout(p), clearTimeout(g), !(a.value || e.disabled) && (p = setTimeout(() => {
+        var o;
+        N(), l.value.style.zIndex = new se().nextIndex().toString(), (o = e.onOpen) == null || o.call(e, t);
+      }, e.openDelay));
+    }, i = (t) => {
+      clearTimeout(p), clearTimeout(g), a.value && (g = setTimeout(() => {
+        var o;
+        q(), (o = e.onClose) == null || o.call(e, t);
+      }, e.closeDelay));
+    }, E = (t) => {
+      a.value ? i(t) : s(t);
+    }, v = u({
+      left: void 0,
+      top: void 0,
+      transform: "translate3d(0,0,0)"
+    });
+    if (e.showArrow && U(() => P.value.arrow, (t) => {
+      const o = d.value, { x: _, y } = t;
+      o && (v.value.left = `${_}px`, v.value.top = `${y}px`);
+    }), e.quickTrack && ne(r, () => {
+      $();
+    }, {
+      attributes: !0
+    }), e.closeOnClickBody) {
+      let t;
+      n(document.body, "mousedown", (o) => {
+        a.value && (o.stopPropagation(), t = o.target);
+      }), n(document.body, "mouseup", (o) => {
+        if (!a.value) return;
+        o.stopPropagation();
+        const _ = m(l), y = m(r);
+        _.contains(t) || y.contains(t) || i(o);
+      });
+    }
+    e.trigger === "hover" && (n(r, "mouseenter", s), n(r, "mouseleave", i), n(l, "mouseenter", s), n(l, "mouseleave", i)), e.trigger === "click" && n(r, "click", E), e.trigger === "clickToOpen" && n(r, "click", s), e.trigger === "focus" && (n(r, "mousedown", s), n(document.body, "mouseup", i)), R(() => {
+      import("./creat-floating-container.mjs").then(() => {
+        e.teleported && document.body.querySelector(".___pixel-floating-container").appendChild(m(l));
+      }), e.openOnMounted && s();
+    }), j(() => {
+      e.teleported && document.body.querySelector(".___pixel-floating-container").removeChild(m(l));
+    }), B({
+      /**
+       * @description 关闭 floating 元素
+       */
+      close: i,
+      /**
+       * @description 打开 floating 元素
+       */
+      open: s,
+      /**
+       * @description 打开/关闭 floating 元素轮循
+       */
+      toggle: E
+    });
+    const I = ie("floating");
+    return (t, o) => (f(), w(G, null, [
+      c(h).reference ? (f(), H(re, {
+        key: 0,
+        ref_key: "reference",
+        ref: r
+      }, {
+        default: S(() => [
+          C(t.$slots, "reference")
+        ]),
+        _: 3
+      }, 512)) : k("", !0),
+      J("div", b({
+        ref_key: "floating",
+        ref: l
+      }, c(A)("scopedOnly").value, {
+        style: D.value,
+        class: e.floatingClass
+      }), [
+        K(Q, {
+          name: e.transition,
+          onAfterEnter: e.onOpened,
+          onAfterLeave: e.onClosed
+        }, {
+          default: S(() => [
+            c(a) ? (f(), w("div", b({
+              key: 0,
+              class: c(I).namespace
+            }, c(A)("scoped").value, { "data-placement": c(M) }), [
+              C(t.$slots, "default"),
+              e.showArrow ? (f(), w("div", {
+                key: 0,
+                ref_key: "_arrow",
+                ref: d,
+                class: "p-floating__arrow",
+                style: W(v.value)
+              }, null, 4)) : k("", !0)
+            ], 16, ce)) : k("", !0)
+          ]),
+          _: 3
+        }, 8, ["name", "onAfterEnter", "onAfterLeave"])
+      ], 16)
+    ], 64));
+  }
+});
+export {
+  ke as default
+};

package/es/packages/components/floating/src/floating.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./floating.vue.mjs";
+export {
+  f as default
+};

package/es/packages/components/grid/index.mjs

@@ -0,0 +1,8 @@
+import m from "./src/row.vue.mjs";
+import t from "./src/col.vue.mjs";
+import { withInstall as o } from "../../tools/vn/with-install.mjs";
+const n = o(m), s = o(t);
+export {
+  s as Col,
+  n as Row
+};

package/es/packages/components/grid/src/col.mjs

@@ -0,0 +1,34 @@
+const e = {
+  /**
+   * @description 栅格占位格数，为 0 时相当于 display: none
+   */
+  span: {
+    type: [String, Number],
+    default: 1,
+    validator: (r) => {
+      const t = Number.parseInt(r);
+      return 0 <= t && t <= 24;
+    }
+  },
+  /**
+   * @description 栅格左侧的间隔格数，间隔内不可以有栅格
+   */
+  offset: {
+    type: [String, Number],
+    default: 0,
+    validator: (r) => {
+      const t = Number.parseInt(r);
+      return 0 <= t && t <= 24;
+    }
+  },
+  /**
+   * @description 自定义元素标签
+   */
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+export {
+  e as PColProps
+};

package/es/packages/components/grid/src/col.vue.mjs

@@ -0,0 +1,28 @@
+import { defineComponent as t, computed as a, openBlock as c, createBlock as l, resolveDynamicComponent as p, normalizeClass as m, withCtx as f, renderSlot as u } from "vue";
+import { PColProps as i } from "./col.mjs";
+import { useNS as _ } from "../../../hooks/useNS.mjs";
+const d = t({
+  name: "PCol",
+  inheritAttrs: !0
+}), k = /* @__PURE__ */ t({
+  ...d,
+  props: i,
+  setup(s) {
+    const e = _("col"), o = s, n = a(() => [
+      e.namespace,
+      e.bb("span", o.span),
+      e.bb("offset", o.offset)
+    ]);
+    return (r, C) => (c(), l(p(o.tag), {
+      class: m(n.value)
+    }, {
+      default: f(() => [
+        u(r.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  k as default
+};

package/es/packages/components/grid/src/col.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./col.vue.mjs";
+export {
+  f as default
+};

package/es/packages/components/grid/src/row.mjs

@@ -0,0 +1,35 @@
+import { isNumber as e } from "../../../tools/extra/types.mjs";
+const a = {
+  /**
+   * @description 栅格间隔
+   */
+  gutter: {
+    type: [Number, String],
+    default: 0,
+    validator: (t) => e(Number.parseInt(t))
+  },
+  /**
+   * @description 纵向对齐方式
+   */
+  align: {
+    type: String,
+    default: "stretch"
+  },
+  /**
+   * @description flex 布局下的水平排列方式
+   */
+  justify: {
+    type: String,
+    default: "flex-start"
+  },
+  /**
+   * @description 自定义元素标签
+   */
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+export {
+  a as PRowProps
+};

package/es/packages/components/grid/src/row.vue.mjs

@@ -0,0 +1,30 @@
+import { defineComponent as r, computed as a, openBlock as c, createBlock as l, resolveDynamicComponent as p, mergeProps as m, unref as u, withCtx as f, renderSlot as i } from "vue";
+import { PRowProps as d } from "./row.mjs";
+import { px as _ } from "../../../tools/extra/css.mjs";
+import { useNS as g } from "../../../hooks/useNS.mjs";
+const y = r({
+  name: "PRow",
+  inheritAttrs: !1
+}), j = /* @__PURE__ */ r({
+  ...y,
+  props: { ...d },
+  setup(o) {
+    const t = g("row"), e = o, n = a(() => ({
+      [t.cssVar("gutter")]: _(e.gutter),
+      [t.cssVar("justify")]: e.justify,
+      [t.cssVar("align")]: e.align
+    }));
+    return (s, w) => (c(), l(p(e.tag), m({
+      class: u(t).namespace,
+      style: n.value
+    }, s.$attrs), {
+      default: f(() => [
+        i(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["class", "style"]));
+  }
+});
+export {
+  j as default
+};

package/es/packages/components/grid/src/row.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./row.vue.mjs";
+export {
+  f as default
+};

package/es/packages/components/icon/index.mjs

@@ -0,0 +1,6 @@
+import o from "./src/icon.vue.mjs";
+import { withInstall as t } from "../../tools/vn/with-install.mjs";
+const i = t(o);
+export {
+  i as Icon
+};

package/es/packages/components/icon/src/icon.mjs

@@ -0,0 +1,31 @@
+const t = [
+  "i",
+  "label"
+], o = {
+  /**
+   * @description 图标的名称
+   */
+  target: String,
+  /**
+   * @description 图标的自定义元素标签
+   */
+  tag: {
+    type: String,
+    default: t[0]
+  },
+  /**
+   * @description 当图标标签为label时, label.for
+   */
+  for: String,
+  /**
+   * @description 图标是否会无限旋转
+   */
+  rotating: Boolean,
+  /**
+   * @description 图标的颜色
+   */
+  color: String
+};
+export {
+  o as PIconProps
+};

package/es/packages/components/icon/src/icon.vue.mjs

@@ -0,0 +1,31 @@
+import { defineComponent as r, ref as i, computed as t, openBlock as p, createBlock as m, resolveDynamicComponent as f, mergeProps as u, createCommentVNode as _ } from "vue";
+import { PIconProps as g } from "./icon.mjs";
+import { useNS as y } from "../../../hooks/useNS.mjs";
+const d = r({
+  name: "PIcon",
+  inheritAttrs: !1
+}), C = /* @__PURE__ */ r({
+  ...d,
+  props: { ...g },
+  setup(n) {
+    const o = y("icon"), e = n, s = i(null), c = t(() => [
+      o.namespace,
+      o.is(e.rotating, "rotating"),
+      "iconfont",
+      `pixel-${e.target}`
+    ]), a = t(() => ({
+      [o.cssVar("color")]: e.color ? `${e.color}` : "inherit"
+    }));
+    return (l, k) => e.target ? (p(), m(f(e.tag), u({
+      key: 0,
+      ref_key: "icon",
+      ref: s,
+      class: c.value,
+      style: a.value,
+      for: e.for
+    }, l.$attrs), null, 16, ["class", "style", "for"])) : _("", !0);
+  }
+});
+export {
+  C as default
+};

package/es/packages/components/icon/src/icon.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./icon.vue.mjs";
+export {
+  f as default
+};

package/es/packages/components/input/index.mjs

@@ -0,0 +1,6 @@
+import t from "./src/input.vue.mjs";
+import { withInstall as o } from "../../tools/vn/with-install.mjs";
+const i = o(t);
+export {
+  i as Input
+};

package/es/packages/components/input/src/input.mjs

@@ -0,0 +1,75 @@
+const e = [
+  "text",
+  "password",
+  "email"
+], o = {
+  /**
+   * @description 输入框类型
+   */
+  type: {
+    type: String,
+    default: e[0]
+  },
+  /**
+   * @description 输入框的绑定值
+   */
+  modelValue: [String, Number],
+  size: {
+    type: String
+  },
+  /**
+   * @description test
+   */
+  placeholder: String,
+  /**
+   * @description 输入框绑定值的最大长度
+   */
+  maxLength: [Number, String],
+  /**
+   * @description 输入框绑定值的最小长度
+   */
+  minLength: [Number, String],
+  /**
+   * @description ID
+   */
+  id: String,
+  /**
+   * @description 是否在挂载后聚焦
+   */
+  autofocus: Boolean,
+  /**
+   * @description 是否禁用输入框
+   */
+  disabled: Boolean,
+  /**
+   * @description 是否是只读输入框
+   */
+  readonly: Boolean,
+  /**
+   * @description 绑定值是否可以被清空
+   */
+  clearable: Boolean,
+  /**
+   * @description 是否显示文字长度
+   */
+  showWordLimit: Boolean,
+  /**
+   * @description 是否显示密码切换图标
+   */
+  showPassword: Boolean,
+  /**
+   * @description 输入框前缀图标
+   */
+  prefixIcon: String,
+  /**
+   * @description 输入框后缀图标
+   */
+  suffixIcon: String,
+  /**
+   * @description 输入框绑定值的校验函数
+   */
+  checkFunc: Function
+};
+export {
+  o as PInputProps
+};