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

Nextcloud vue components

import '../assets/NcChip-CEKw1zaK.css';
import { useSlots, computed } from "vue";
import { r as register, v as t18, a as t } from "../chunks/_l10n-JYjUKekn.mjs";
import { N as NcActions } from "../chunks/NcActions-BgYpDq2n.mjs";
import NcActionButton from "./NcActionButton.mjs";
import { N as NcIconSvgWrapper } from "../chunks/NcIconSvgWrapper-DjrkBUkC.mjs";
import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
var mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
register(t18);
const _sfc_main = {
  __name: "NcChip",
  props: {
    /**
     * aria label to set on the close button
     * @default 'Close'
     */
    ariaLabelClose: {
      type: String,
      default: t("Close")
    },
    /**
     * Main text of the chip
     */
    text: {
      type: String,
      default: ""
    },
    /**
     * Chip style
     * This sets the background style of the chip, similar to NcButton's `type`
     */
    type: {
      type: String,
      default: "secondary",
      validator: (value) => ["primary", "secondary", "tertiary"].includes(value)
    },
    /**
     * SVG path of the icon to use, this takes precedence over `iconSVG`.
     * For example icon paths from `@mdi/js` can be used.
     */
    iconPath: {
      type: String,
      default: null
    },
    /**
     * Inline SVG to use as the icon
     */
    iconSvg: {
      type: String,
      default: null
    },
    /**
     * Set to true to prevent the close button to be shown
     */
    noClose: {
      type: Boolean,
      default: false
    }
  },
  emits: ["close"],
  setup(__props, { emit }) {
    const props = __props;
    const slots = useSlots();
    const canClose = computed(() => !props.noClose);
    const hasActions = () => {
      var _a;
      return Boolean((_a = slots.actions) == null ? void 0 : _a.call(slots));
    };
    const hasIcon = () => {
      var _a;
      return Boolean(props.iconPath || props.iconSvg || !!((_a = slots.icon) == null ? void 0 : _a.call(slots)));
    };
    const onClose = () => {
      emit("close");
    };
    return { __sfc: true, props, emit, slots, canClose, hasActions, hasIcon, onClose, mdiClose, NcActions, NcActionButton, NcIconSvgWrapper };
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
  return _c("div", { staticClass: "nc-chip", class: {
    ["nc-chip--".concat(_vm.type)]: true,
    "nc-chip--no-actions": _vm.noClose && !_setup.hasActions(),
    "nc-chip--no-icon": !_setup.hasIcon()
  } }, [_setup.hasIcon() ? _c("span", { staticClass: "nc-chip__icon" }, [_vm._t("icon", function() {
    return [_vm.iconPath || _vm.iconSvg ? _c(_setup.NcIconSvgWrapper, { attrs: { "inline": "", "path": _vm.iconPath, "svg": _vm.iconPath ? void 0 : _vm.iconSvg, "size": 18 } }) : _vm._e()];
  })], 2) : _vm._e(), _c("span", { staticClass: "nc-chip__text" }, [_vm._t("default", function() {
    return [_vm._v(_vm._s(_vm.text))];
  })], 2), _setup.canClose || _setup.hasActions() ? _c(_setup.NcActions, { staticClass: "nc-chip__actions", attrs: { "force-menu": !_setup.canClose, "type": "tertiary-no-background" } }, [_setup.canClose ? _c(_setup.NcActionButton, { attrs: { "close-after-click": "" }, on: { "click": _setup.onClose }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c(_setup.NcIconSvgWrapper, { attrs: { "path": _setup.mdiClose, "size": 20 } })];
  }, proxy: true }], null, false, 2547223506) }, [_vm._v(" " + _vm._s(_vm.ariaLabelClose) + " ")]) : _vm._e(), _vm._t("actions")], 2) : _vm._e()], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "470fc02d"
);
const NcChip = __component__.exports;
export {
  NcChip as default
};