@nextcloud/vue 8.12.0 → 8.13.0

package/dist/Components/NcChip.cjs

@@ -0,0 +1,111 @@
+require('../assets/NcChip-CQm1mq2C.css');
+"use strict";
+const Vue = require("vue");
+const _l10n = require("../chunks/_l10n-BGF_R72e.cjs");
+const NcActions = require("../chunks/NcActions-B4kN_x_I.cjs");
+const Components_NcActionButton = require("./NcActionButton.cjs");
+const NcIconSvgWrapper = require("../chunks/NcIconSvgWrapper-DaSgIT19.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
+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";
+_l10n.register(_l10n.t16);
+const _sfc_main = Vue.defineComponent({
+  name: "NcChip",
+  components: {
+    NcActions: NcActions.NcActions,
+    NcActionButton: Components_NcActionButton,
+    NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper
+  },
+  props: {
+    /**
+     * aria label to set on the close button
+     * @default 'Close'
+     */
+    ariaLabelClose: {
+      type: String,
+      default: _l10n.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.
+     * 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() {
+    return {
+      mdiClose
+    };
+  },
+  computed: {
+    canClose() {
+      return !this.noClose;
+    },
+    hasActions() {
+      var _a;
+      return this.canClose || ((_a = this.$slots) == null ? void 0 : _a.actions) !== void 0 || this.$scopedSlots.actions !== void 0;
+    }
+  },
+  methods: {
+    t: _l10n.t,
+    onClose() {
+      this.$emit("close");
+    }
+  }
+});
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("div", { staticClass: "nc-chip", class: { ["nc-chip--".concat(_vm.type)]: true, "nc-chip--no-actions": !_vm.hasActions } }, [_c("span", { staticClass: "nc-chip__icon" }, [_vm._t("icon", function() {
+    return [_vm.iconPath || _vm.iconSvg ? _c("NcIconSvgWrapper", { attrs: { "inline": "", "path": _vm.iconPath, "svg": _vm.iconPath ? void 0 : _vm.iconSvg, "size": 18 } }) : _vm._e()];
+  })], 2), _c("span", { staticClass: "nc-chip__text" }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.text))];
+  })], 2), _vm.hasActions ? _c("NcActions", { staticClass: "nc-chip__actions", attrs: { "force-menu": !_vm.canClose, "type": "tertiary-no-background" } }, [_vm.canClose ? _c("NcActionButton", { attrs: { "close-after-click": "" }, on: { "click": _vm.onClose }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("NcIconSvgWrapper", { attrs: { "path": _vm.mdiClose, "size": 20 } })];
+  }, proxy: true }], null, false, 2592946578) }, [_vm._v(" " + _vm._s(_vm.ariaLabelClose) + " ")]) : _vm._e(), _vm._t("actions")], 2) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "e01fcb1e",
+  null,
+  null
+);
+const NcChip = __component__.exports;
+module.exports = NcChip;