@nextcloud/vue/dist/chunks/NcChip.mjs

Nextcloud vue components

import '../assets/NcChip.css';
import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createCommentVNode, createElementVNode, createTextVNode, toDisplayString, withCtx, createVNode, unref } from "vue";
import { b as mdiClose } from "./mdi.mjs";
import { N as NcActionButton } from "./NcActionButton.mjs";
import { N as NcActions } from "./NcActions.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
import { r as register, A as t20, a as t } from "./_l10n.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
register(t20);
const _hoisted_1 = {
  key: 0,
  class: "nc-chip__icon"
};
const _hoisted_2 = { class: "nc-chip__text" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "NcChip",
  props: {
    ariaLabelClose: { default: t("Close") },
    actionsContainer: { default: "body" },
    text: { default: "" },
    iconPath: { default: void 0 },
    iconSvg: { default: void 0 },
    noClose: { type: Boolean },
    variant: { default: "secondary" }
  },
  emits: ["close"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const slots = useSlots();
    const canClose = computed(() => !props.noClose);
    const hasActions = () => !!slots.actions;
    const hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["nc-chip", {
          [`nc-chip--${__props.variant}`]: true,
          "nc-chip--no-actions": __props.noClose && !hasActions(),
          "nc-chip--no-icon": !hasIcon()
        }])
      }, [
        hasIcon() ? (openBlock(), createElementBlock("span", _hoisted_1, [
          renderSlot(_ctx.$slots, "icon", {}, () => [
            __props.iconPath || __props.iconSvg ? (openBlock(), createBlock(NcIconSvgWrapper, {
              key: 0,
              inline: "",
              path: __props.iconPath,
              svg: __props.iconPath ? void 0 : __props.iconSvg,
              size: 18
            }, null, 8, ["path", "svg"])) : createCommentVNode("", true)
          ], true)
        ])) : createCommentVNode("", true),
        createElementVNode("span", _hoisted_2, [
          renderSlot(_ctx.$slots, "default", {}, () => [
            createTextVNode(toDisplayString(__props.text), 1)
          ], true)
        ]),
        canClose.value || hasActions() ? (openBlock(), createBlock(NcActions, {
          key: 1,
          class: "nc-chip__actions",
          container: __props.actionsContainer,
          forceMenu: !canClose.value,
          variant: "tertiary-no-background"
        }, {
          default: withCtx(() => [
            canClose.value ? (openBlock(), createBlock(NcActionButton, {
              key: 0,
              closeAfterClick: "",
              onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
            }, {
              icon: withCtx(() => [
                createVNode(NcIconSvgWrapper, {
                  path: unref(mdiClose),
                  size: 20
                }, null, 8, ["path"])
              ]),
              default: withCtx(() => [
                createTextVNode(" " + toDisplayString(__props.ariaLabelClose), 1)
              ]),
              _: 1
            })) : createCommentVNode("", true),
            renderSlot(_ctx.$slots, "actions", {}, void 0, true)
          ]),
          _: 3
        }, 8, ["container", "forceMenu"])) : createCommentVNode("", true)
      ], 2);
    };
  }
});
const NcChip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8f5d3c40"]]);
export {
  NcChip as N
};
//# sourceMappingURL=NcChip.mjs.map