ant-design-x-vue-next/es/actions/ActionsFeedback.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as T, useAttrs as U, computed as q, createVNode as i, mergeProps as z, isVNode as G } from "vue";
import { Tooltip as L } from "ant-design-vue";
import { b as d, L as H, d as J, D as Q, e as R } from "../chunks/module-chunk.mjs";
import { useMobile as W } from "../_util/hooks/use-mobile.mjs";
import "../x-provider/index.mjs";
import { FEEDBACK_VALUE as s } from "./constants.mjs";
import Y from "../locale/useLocale.mjs";
import Z from "./style/index.mjs";
import ee from "../x-provider/hooks/use-x-provider-context.mjs";
function g(o) {
  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !G(o);
}
const re = /* @__PURE__ */ T({
  name: "AXActionsFeedback",
  inheritAttrs: !1,
  __name: "ActionsFeedback",
  props: {
    value: {
      default: "default"
    },
    prefixCls: {
      default: void 0
    },
    rootClassName: {
      default: ""
    },
    classNames: {
      default: () => ({})
    },
    styles: {
      default: () => ({})
    }
  },
  emits: ["change"],
  setup(o, {
    emit: D
  }) {
    const e = o, k = D, r = U(), u = W(), {
      direction: x,
      getPrefixCls: S
    } = ee(), a = S("actions", e.prefixCls), [F, V, O] = Z(a), t = `${a}-feedback`, [m] = Y("Actions"), j = q(() => {
      var l;
      return d(a, t, V.value, O, e.rootClassName, (l = e.classNames) == null ? void 0 : l.root, `${a}-list`, r.class, {
        [`${t}-rtl`]: x.value === "rtl"
      });
    }), w = () => {
      k("change", e.value === s.dislike ? s.default : s.dislike);
    }, E = () => {
      k("change", e.value === s.like ? s.default : s.like);
    };
    return () => {
      var f, p, C, v, y, $, N, b, A, _, h;
      const l = e.value, I = l === s.like ? i(H, null, null) : i(J, null, null), c = i("span", {
        onClick: E,
        style: {
          ...(f = e.styles) == null ? void 0 : f.like,
          ...l === "like" ? (p = e.styles) == null ? void 0 : p.liked : {}
        },
        class: d(`${t}-item`, `${a}-item`, `${t}-item-like`, (C = e.classNames) == null ? void 0 : C.like, {
          [`${(v = e.classNames) == null ? void 0 : v.liked}`]: ((y = e.classNames) == null ? void 0 : y.liked) && l === "like",
          [`${t}-item-like-active`]: l === "like"
        })
      }, [I]), P = l === s.dislike ? i(Q, null, null) : i(R, null, null), n = i("span", {
        onClick: w,
        style: {
          ...($ = e.styles) == null ? void 0 : $.dislike,
          ...l === "dislike" ? (N = e.styles) == null ? void 0 : N.disliked : {}
        },
        class: d(`${t}-item`, `${a}-item`, `${t}-item-dislike`, (b = e.classNames) == null ? void 0 : b.dislike, {
          [`${(A = e.classNames) == null ? void 0 : A.disliked}`]: ((_ = e.classNames) == null ? void 0 : _.disliked) && l === "dislike",
          [`${t}-item-dislike-active`]: l === "dislike"
        })
      }, [P]), M = [s.default, s.like].includes(l), X = [s.default, s.dislike].includes(l), {
        class: le,
        style: B,
        ...K
      } = r;
      return F(i("div", z(K, {
        class: j.value,
        style: {
          ...B,
          ...(h = e.styles) == null ? void 0 : h.root
        }
      }), [M ? u.value ? c : i(L, {
        key: `like_${l}`,
        title: m.value.feedbackLike
      }, g(c) ? c : {
        default: () => [c]
      }) : null, X ? u.value ? n : i(L, {
        key: `dislike_${l}`,
        title: m.value.feedbackDislike
      }, g(n) ? n : {
        default: () => [n]
      }) : null]));
    };
  }
});
export {
  re as default
};