@aplus-frontend/ui 0.0.16 → 0.0.18

package/es/src/check-card/index.vue2.mjs

@@ -0,0 +1,133 @@
+import { defineComponent as F, computed as i, unref as l, createVNode as m, watch as I, watchEffect as U, openBlock as c, createElementBlock as N, normalizeStyle as W, normalizeClass as P, withModifiers as j, createBlock as f, renderSlot as G, resolveDynamicComponent as V, createCommentVNode as v, createElementVNode as O } from "vue";
+import { Skeleton as $ } from "ant-design-vue";
+import "../config-provider/index.mjs";
+import "../hooks/index.mjs";
+import { isFunction as z } from "lodash-unified";
+import { useInjectCheckCard as q } from "./context.mjs";
+import "./style/index.css";
+import A from "./checked.svg.mjs";
+import { useNamespace as H } from "../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as J } from "../config-provider/hooks/use-global-config.mjs";
+import { useControllableValue as K } from "../hooks/useControllableValue.mjs";
+const L = ["src"], ne = /* @__PURE__ */ F({
+  name: "CheckCard",
+  __name: "index",
+  props: {
+    bordered: {
+      type: Boolean,
+      default: !0
+    },
+    disabled: {
+      type: Boolean
+    },
+    loading: {
+      type: Boolean
+    },
+    size: {
+      default: "middle"
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: !1
+    },
+    checked: {
+      type: Boolean,
+      default: void 0
+    },
+    "onUpdate:checked": {},
+    defaultChecked: {
+      type: Boolean
+    },
+    value: {
+      type: [String, Number, Boolean]
+    },
+    style: {
+      default: () => ({})
+    },
+    title: {},
+    content: {}
+  },
+  emits: ["update:checked"],
+  setup(_, {
+    emit: w
+  }) {
+    const o = _, {
+      b: g,
+      m: u,
+      e: p,
+      bm: D,
+      em: k
+    } = H("check-card"), b = J("uiMode", "aplus"), E = w, n = q(), {
+      value: r,
+      updateValue: h
+    } = K(o, E, {
+      valuePropName: "checked",
+      defaultValuePropName: "defaultChecked"
+    }), a = i(() => {
+      const e = {
+        ...o
+      }, t = l(n);
+      return t && (e.disabled = e.disabled || t.disabled, e.bordered = e.bordered || t.bordered, e.loading = e.loading || t.loading, e.size = e.size || t.size, e.stopPropagation = e.stopPropagation || t.stopPropagation), e;
+    }), S = i(() => {
+      const e = l(b), t = l(a);
+      return [g(), ...t.disabled ? [] : [g(e), l(r) ? D(e, "checked") : null], u(t.size), t.bordered ? u("bordered") : null, t.disabled ? u("disabled") : null];
+    }), M = i(() => ({
+      ...o.style,
+      "--check-card-border-color": b.value === "admin" ? "#D9D9D9" : "#E9EDF3"
+    })), y = i(() => {
+      if (!o.title)
+        return;
+      const e = z(o.title) ? o.title(l(r)) : m("span", null, [o.title]);
+      return m("div", {
+        class: [p("title"), a.value.disabled ? k("title", "disabled") : null]
+      }, [e]);
+    }), C = i(() => {
+      if (!o.content)
+        return;
+      const e = z(o.content) ? o.content(l(r)) : o.content;
+      return m("div", {
+        class: [p("content"), a.value.disabled ? k("content", "disabled") : null]
+      }, [e]);
+    });
+    function T(e) {
+      var t, d;
+      a.value.stopPropagation && e.target !== e.currentTarget || a.value.loading || a.value.disabled || (n.value ? (d = (t = n.value) == null ? void 0 : t.toggleOption) == null || d.call(t, o.value) : h(!l(r)));
+    }
+    return I(() => n.value, (e) => {
+      if (!e)
+        return;
+      const t = e.multiple ? (e.value || []).includes(o.value) : e.value === o.value;
+      h(t);
+    }, {
+      immediate: !0
+    }), U((e) => {
+      var t, d;
+      (d = (t = n.value) == null ? void 0 : t.registerValue) == null || d.call(t, o.value), e(() => {
+        var s, B;
+        return (B = (s = n.value) == null ? void 0 : s.cancelValue) == null ? void 0 : B.call(s, o.value);
+      });
+    }), (e, t) => (c(), N("div", {
+      style: W(M.value),
+      class: P(S.value),
+      onClick: j(T, ["stop"])
+    }, [a.value.loading ? (c(), f(l($), {
+      key: 0,
+      active: ""
+    })) : G(e.$slots, "default", {
+      key: 1,
+      checked: l(r)
+    }, () => [y.value ? (c(), f(V(y.value), {
+      key: 0
+    })) : v("", !0), C.value ? (c(), f(V(C.value), {
+      key: 1
+    })) : v("", !0)]), l(r) ? (c(), N("div", {
+      key: 2,
+      class: P(l(p)("checked-icon"))
+    }, [O("img", {
+      src: l(A)
+    }, null, 8, L)], 2)) : v("", !0)], 6));
+  }
+});
+export {
+  ne as default
+};

package/es/src/check-card/interface.d.ts

@@ -0,0 +1,100 @@
+import { CSSProperties, VNode } from 'vue';
+
+export type CheckCardValueType = string | number | boolean;
+/**
+ * 可选卡片的通用配置，在Group中使用将会是整组CheckCard生效
+ */
+type CheckCardCommonType = {
+    /**
+     * 是否显示边框
+     */
+    bordered?: boolean;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 是否显示加载中样式
+     */
+    loading?: boolean;
+    /**
+     * 卡片的尺寸，目前内置中等/小尺寸两种
+     */
+    size?: 'middle' | 'small';
+    /**
+     * 是否阻止点击事件冒泡（对于自定义内容包含输入控件时需要设置）
+     */
+    stopPropagation?: boolean;
+};
+export type CheckCardProps = CheckCardCommonType & {
+    /**
+     * 当前选项卡是否选中(v-model)
+     */
+    checked?: boolean;
+    'onUpdate:checked'?: (checked: boolean) => void;
+    /**
+     * 默认是否选中
+     */
+    defaultChecked?: boolean;
+    /**
+     * 作为选项时的值
+     */
+    value?: CheckCardValueType;
+    /**
+     * 容器自定义CSS样式
+     */
+    style?: CSSProperties;
+    /**
+     * 标题
+     */
+    title?: string | ((checked: boolean) => VNode);
+    /**
+     * 内容
+     */
+    content?: string | ((checked: boolean) => VNode);
+};
+export type CheckCardGroupValueType = CheckCardValueType | CheckCardValueType[] | undefined;
+export type CheckCardGroupProps = CheckCardCommonType & {
+    /**
+     * 是否多选
+     */
+    multiple?: boolean;
+    /**
+     * 选中的默认值
+     */
+    defaultValue?: CheckCardGroupValueType;
+    /**
+     * 选中的值（v-model）
+     */
+    value?: CheckCardGroupValueType;
+    'onUpdate:Value'?: (nextValue: CheckCardGroupValueType) => void;
+};
+export type CheckCardGroupContextType = CheckCardCommonType & {
+    /**
+     * 是否是多选
+     */
+    multiple?: boolean;
+    /**
+     * 切换单个可选卡片时触发
+     * @param value
+     * @returns
+     */
+    toggleOption?: (value: any) => void;
+    /**
+     * 当前被选中的值
+     */
+    value?: any;
+    /**
+     * 注册一个CheckCard的value
+     * @param value
+     * @returns
+     */
+    registerValue?: (value: any) => void;
+    /**
+     * 取消注册
+     * @param value
+     * @returns
+     */
+    cancelValue?: (value: any) => void;
+};
+export {};

package/es/src/check-card/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/check-card/style/index.css

@@ -0,0 +1,108 @@
+.aplus-check-card {
+  border-radius: 4px;
+  position: relative;
+}
+.aplus-check-card--disabled {
+  background-color: #F9F9FA;
+  cursor: not-allowed;
+}
+.aplus-check-card--bordered {
+  outline: 1px solid var(--check-card-border-color);
+}
+.aplus-check-card-aplus:hover {
+  cursor: pointer;
+  outline: 1px solid #0070ff;
+}
+.aplus-check-card-aplus::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  inset-block-start: -2px;
+  inset-inline-end: -2px;
+  border-inline-start: 16px solid transparent;
+  border-block-end: 16px solid transparent;
+  border-radius: 4px;
+}
+.aplus-check-card-aplus--checked {
+  outline: 2px solid #0070ff;
+}
+.aplus-check-card-aplus--checked:hover {
+  outline: 2px solid #0070ff;
+}
+.aplus-check-card-aplus--checked::after {
+  opacity: 1;
+  border: 16px solid #0070ff;
+  border-inline-start: 16px solid transparent;
+  border-block-end: 16px solid transparent;
+  inset-block-start: -2px;
+  inset-inline-end: -2px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.aplus-check-card-admin:hover {
+  cursor: pointer;
+  outline: 1px solid #34b77c;
+}
+.aplus-check-card-admin::after {
+  content: '';
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  opacity: 0;
+  inset-block-start: -2px;
+  inset-inline-end: -2px;
+  border-inline-start: 16px solid transparent;
+  border-block-end: 16px solid transparent;
+  border-radius: 4px;
+}
+.aplus-check-card-admin--checked {
+  outline: 2px solid #34b77c;
+}
+.aplus-check-card-admin--checked:hover {
+  outline: 2px solid #34b77c;
+}
+.aplus-check-card-admin--checked::after {
+  content: '';
+  opacity: 1;
+  border: 16px solid #34b77c;
+  border-inline-start: 16px solid transparent;
+  border-block-end: 16px solid transparent;
+  inset-block-start: -2px;
+  inset-inline-end: -2px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.aplus-check-card--middle {
+  padding: 16px 24px;
+}
+.aplus-check-card--small {
+  padding: 12px 24px;
+}
+.aplus-check-card__title {
+  margin-bottom: 8px;
+}
+.aplus-check-card__title > span {
+  font-size: 14px;
+  line-height: 22px;
+  color: #333;
+}
+.aplus-check-card__title--disabled {
+  color: #ABB7CC;
+}
+.aplus-check-card__content {
+  font-size: 14px;
+  line-height: 22px;
+  color: #333;
+}
+.aplus-check-card__content--disabled {
+  color: #ABB7CC;
+}
+.aplus-check-card__checked-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}

package/es/src/editable-table/interface.d.ts

@@ -35,7 +35,7 @@ export type EditableColumnType<RecordType = any, ValueType extends ApTableValueT
     /**
      * 值类型额外配置的参数（支持函数）
      */
-    fieldProps?: ApTableValueFields[ValueType] | ((opt?: {
+    fieldProps?: ApTableValueFields[ValueType] | ((opt: {
         value: any;
         text: any;
         record: RecordType;

package/es/src/hooks/useControllableValue.mjs

@@ -1,21 +1,23 @@
-import { ref as c, watch as m } from "vue";
-function N(a, r, e) {
-  const d = (e == null ? void 0 : e.defaultValuePropName) || "defaultValue", u = (e == null ? void 0 : e.valuePropName) || "value", f = c(
-    a[u] || a[d] || (e == null ? void 0 : e.defaultValue)
-  );
-  function v(l) {
-    a[u] === void 0 && (f.value = l), r(`update:${u}`, l);
+import { ref as v, watch as V } from "vue";
+import { isUndefined as d } from "lodash-unified";
+function P(u, t, e) {
+  const f = (e == null ? void 0 : e.defaultValuePropName) || "defaultValue", a = (e == null ? void 0 : e.valuePropName) || "value", r = v(c());
+  function m(l) {
+    u[a] === void 0 && (r.value = l), t(`update:${a}`, l);
   }
-  return m(
-    () => a[u],
+  function c() {
+    return d(u[a]) ? d(u[f]) ? e == null ? void 0 : e.defaultValue : u[f] : u[a];
+  }
+  return V(
+    () => u[a],
     (l) => {
-      f.value = l;
+      r.value = l;
     }
   ), {
-    value: f,
-    updateValue: v
+    value: r,
+    updateValue: m
   };
 }
 export {
-  N as useControllableValue
+  P as useControllableValue
 };

package/es/src/index.d.ts

@@ -26,6 +26,7 @@ export * from './ap-tag';
 export * from './ap-layout';
 export * from './ap-upload';
 export * from './ap-download';
+export * from './check-card';
 export * from './business';
 export * from './ap-table';
 export * from './editable-table';