@nextcloud/vue/dist/chunks/NcSelectUsers-CMF_h9c0.mjs

Nextcloud vue components

import '../assets/NcSelectUsers-CfOSPgtz.css';
import { ref, watch } from "vue";
import { N as NcListItemIcon } from "./NcListItemIcon-bQZej-L0.mjs";
import { N as NcSelect } from "./NcSelect-PvjbF3jF.mjs";
import { r as register, j as t44, g as t16, a as t } from "./_l10n-BEfeU7gr.mjs";
import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
register(t16, t44);
const __default__ = {
  model: {
    prop: "modelValue",
    event: "update:modelValue"
  }
};
const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
  __name: "NcSelectUsers",
  props: {
    /**
     * `aria-label` for the clear input button
     */
    ariaLabelClearSelected: {
      type: String,
      default: t("Clear selected")
    },
    /**
     * `aria-label` for the listbox element
     */
    ariaLabelListbox: {
      type: String,
      default: t("Options")
    },
    /**
     * Allows to customize the `aria-label` for the deselect-option button
     * The default is "Deselect " + optionLabel
     *
     * @type {(optionLabel: string) => string}
     */
    ariaLabelDeselectOption: {
      type: Function,
      default: (optionLabel) => t("Deselect {option}", { option: optionLabel })
    },
    /**
     * Keep the dropdown open after selecting an entry.
     */
    keepOpen: {
      type: Boolean,
      default: false
    },
    /**
     * Disable the component
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * Callback to determine if the provided option should match the current search text.
     * Used to determine if the option should be displayed.
     *
     * By default it filters by the `displayName` and `subname` properties of the user
     * option object unless this prop is set explicitly
     */
    filterBy: {
      type: Function,
      default: null
    },
    /**
     * Input element id
     */
    inputId: {
      type: String,
      default: () => GenRandomId()
    },
    /**
     * Visible label for the input element
     *
     * @default 'Select account'
     */
    inputLabel: {
      type: String,
      default: t("Select account")
    },
    /**
     * Pass true if you are using an external label.
     * In this case make sure you set the `for` attribute of your `<label>` to the `inputId` of this component.
     */
    labelOutside: {
      type: Boolean,
      default: false
    },
    /**
     * Show a loading icon.
     *
     * @default false
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * Allow selection of multiple options
     *
     * @default false
     */
    multiple: {
      type: Boolean,
      default: false
    },
    /**
     * Disable automatic wrapping when selected options overflow the width.
     *
     * @default false
     */
    noWrap: {
      type: Boolean,
      default: false
    },
    /**
     * Array of users.
     *
     * @type {{displayName: string, user: string, subname?: string, iconSvg?: string, iconName?: string, isGuest?: boolean, isNoUser?: boolean}[]}
     */
    options: {
      type: Array,
      default: () => []
    },
    /**
     * Placeholder text.
     */
    placeholder: {
      type: String,
      default: ""
    },
    /**
     * Enable if a value is required for native form validation
     */
    required: {
      type: Boolean,
      default: false
    },
    /**
     * Currently selected value
     *
     * The `v-model` directive may be used for two-way data binding
     */
    modelValue: {
      type: Object,
      default: null
    }
  },
  emits: ["search", "update:modelValue"],
  setup(__props, { emit }) {
    const props = __props;
    const search = ref("");
    watch(search, () => {
      emit("search", search.value);
    });
    const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-clickable-area"));
    const gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-grid-baseline"));
    const avatarSize = clickableArea - 2 * gridBaseLine;
    function localFilterBy(option, label, search2) {
      if (props.filterBy) {
        return props.filterBy;
      }
      const EMAIL_NOTATION = /[^<]*<([^>]+)/;
      const match = search2.match(EMAIL_NOTATION);
      const subname = option.subname?.toLocaleLowerCase() ?? "";
      return match && subname.indexOf(match[1].toLocaleLowerCase()) > -1 || `${label} ${option.subname}`.toLocaleLowerCase().indexOf(search2.toLocaleLowerCase()) > -1;
    }
    return { __sfc: true, props, emit, search, clickableArea, gridBaseLine, avatarSize, localFilterBy, NcListItemIcon, NcSelect };
  }
});
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
  return _c(_setup.NcSelect, _vm._b({ staticClass: "nc-select-users", attrs: { "filter-by": _setup.localFilterBy, "label": "displayName" }, on: { "search": function($event) {
    _setup.search = $event;
  }, "update:model-value": function($event) {
    return _vm.$emit("update:modelValue", $event);
  } }, scopedSlots: _vm._u([{ key: "option", fn: function(option) {
    return [_c(_setup.NcListItemIcon, _vm._b({ attrs: { "avatar-size": 32, "name": option.displayName, "search": _setup.search } }, "NcListItemIcon", option, false))];
  } }, { key: "selected-option", fn: function(selectedOption) {
    return [_c(_setup.NcListItemIcon, _vm._b({ attrs: { "avatar-size": _setup.avatarSize, "name": selectedOption.displayName, "no-margin": "", "search": _setup.search } }, "NcListItemIcon", selectedOption, false))];
  } }]) }, "NcSelect", _vm.$props, false));
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "e5d43b0e"
);
const NcSelectUsers = __component__.exports;
export {
  NcSelectUsers as N
};
//# sourceMappingURL=NcSelectUsers-CMF_h9c0.mjs.map