@simsustech/quasar-components 0.11.8 → 0.11.10

package/dist/general.js

@@ -1,13 +1,13 @@
-import { u as useLang, l as loadLang, _ as _sfc_main$5 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-UtpXkOh7.js";
-import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QLayout, QHeader, QToolbar, QBtn, QToolbarTitle, QPageContainer, QPage, QPageSticky, QSpace, QSelect, QItem, QItemSection, QItemLabel, QList } from "quasar";
-import { defineComponent, watch, ref, createBlock, openBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps, normalizeClass, createCommentVNode, toRefs, createElementBlock, useAttrs, computed, mergeProps, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
+import { u as useLang, l as loadLang, _ as _sfc_main$6 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-UtpXkOh7.js";
+import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QLayout, QHeader, QToolbar, QBtn, QToolbarTitle, QPageContainer, QPage, QPageSticky, QSpace, QSelect, QItem, QItemSection, QItemLabel, QMenu, QList } from "quasar";
+import { defineComponent, watch, ref, createBlock, openBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps, normalizeClass, createCommentVNode, toRefs, createElementBlock, useAttrs, computed, mergeProps, resolveDynamicComponent, createTextVNode, toDisplayString, resolveDirective, Fragment, renderList, withDirectives } from "vue";
 import { u as useLang$1, f as flags } from "./index-DnmJt2wP.js";
-const _hoisted_1$2 = { class: "text-h6" };
+const _hoisted_1$3 = { class: "text-h6" };
 const _hoisted_2$1 = { class: "text-subtitle2" };
 const __default__$2 = {
   name: "QStyledCard"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: {
     actions: {}
@@ -35,31 +35,30 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       const _component_q_card_actions = QCardActions;
       return openBlock(), createBlock(unref(QCard), {
         ref_key: "qCardRef",
-        ref: qCardRef,
-        class: "card"
+        ref: qCardRef
       }, {
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "image", {}, void 0, true),
+          renderSlot(_ctx.$slots, "image"),
           createVNode(_component_q_card_section, null, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$2, [
-                renderSlot(_ctx.$slots, "title", {}, void 0, true)
+              createElementVNode("div", _hoisted_1$3, [
+                renderSlot(_ctx.$slots, "title")
               ]),
               createElementVNode("div", _hoisted_2$1, [
-                renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)
+                renderSlot(_ctx.$slots, "subtitle")
               ])
             ]),
             _: 3
           }),
           createVNode(_component_q_card_section, { class: "q-pt-none" }, {
             default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
           }),
           createVNode(_component_q_card_actions, normalizeProps(guardReactiveProps(_ctx.actions)), {
             default: withCtx(() => [
-              renderSlot(_ctx.$slots, "actions", {}, void 0, true)
+              renderSlot(_ctx.$slots, "actions")
             ]),
             _: 3
           }, 16)
@@ -69,24 +68,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const QStyledCard = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-302df27a"]]);
 const __default__$1 = {
   name: "ResponsiveDialog"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: {
     display: { type: Boolean },
     buttonType: { default: "submit" },
-    closeIcon: { default: "close" },
-    padding: { type: Boolean }
+    padding: { type: Boolean },
+    icons: { default: () => ({
+      close: "close"
+    }) }
   },
   emits: ["submit"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -157,7 +150,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                   createVNode(_component_q_toolbar, null, {
                     default: withCtx(() => [
                       createVNode(_component_q_btn, {
-                        icon: _ctx.closeIcon,
+                        icon: _ctx.icons.close,
                         flat: "",
                         round: "",
                         dense: "",
@@ -169,7 +162,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                         ]),
                         _: 3
                       }),
-                      !_ctx.display ? (openBlock(), createBlock(_sfc_main$5, {
+                      !_ctx.display ? (openBlock(), createBlock(_sfc_main$6, {
                         key: 0,
                         color: "accent",
                         type: _ctx.buttonType,
@@ -204,19 +197,23 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { style: { "margin-top": "80px" } };
+const _hoisted_1$2 = { style: { "margin-top": "80px" } };
 const _hoisted_2 = { key: 0 };
 const _hoisted_3 = { key: 1 };
 const __default__ = {
   name: "ResourcePage"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
     type: { default: void 0 },
     disabled: { type: Boolean, default: false },
     topBarFab: { type: Boolean, default: false },
-    topBarShrink: { type: Boolean, default: true }
+    topBarShrink: { type: Boolean, default: true },
+    icons: { default: () => ({
+      add: "add",
+      edit: "edit"
+    }) }
   },
   emits: ["create", "update"],
   setup(__props, { emit: __emit }) {
@@ -241,7 +238,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       const _component_q_page = QPage;
       return openBlock(), createBlock(_component_q_page, { class: "q-ma-md" }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$1, [
+          createElementVNode("div", _hoisted_1$2, [
             renderSlot(_ctx.$slots, "default")
           ]),
           createVNode(_component_q_page_sticky, {
@@ -263,10 +260,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       round: "",
                       size: "lg",
                       dense: "",
-                      icon: "add",
+                      icon: _ctx.icons.add,
                       class: "q-mr-sm bg-primary text-white",
                       onClick: create
-                    }, null, 8, ["disable"])) : unref(type) === "update" ? (openBlock(), createBlock(_component_q_btn, {
+                    }, null, 8, ["disable", "icon"])) : unref(type) === "update" ? (openBlock(), createBlock(_component_q_btn, {
                       key: 1,
                       disable: unref(disabled),
                       flat: "",
@@ -274,10 +271,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       round: "",
                       size: "lg",
                       dense: "",
-                      icon: "edit",
+                      icon: _ctx.icons.edit,
                       class: "q-mr-sm bg-primary text-white",
                       onClick: update
-                    }, null, 8, ["disable"])) : createCommentVNode("", true)
+                    }, null, 8, ["disable", "icon"])) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true),
                   createVNode(_component_q_toolbar_title, { shrink: _ctx.topBarShrink }, {
                     default: withCtx(() => [
@@ -291,17 +288,17 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       key: 0,
                       disable: unref(disabled),
                       label: unref(lang).add,
-                      icon: "add",
+                      icon: _ctx.icons.add,
                       outline: "",
                       onClick: create
-                    }, null, 8, ["disable", "label"])) : unref(type) === "update" ? (openBlock(), createBlock(_component_q_btn, {
+                    }, null, 8, ["disable", "label", "icon"])) : unref(type) === "update" ? (openBlock(), createBlock(_component_q_btn, {
                       key: 1,
                       disable: unref(disabled),
                       label: unref(lang).edit,
-                      icon: "edit",
+                      icon: _ctx.icons.edit,
                       outline: "",
                       onClick: update
-                    }, null, 8, ["disable", "label"])) : createCommentVNode("", true)
+                    }, null, 8, ["disable", "label", "icon"])) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true),
                   createVNode(_component_q_space, { horizontal: "" }),
                   renderSlot(_ctx.$slots, "header-side")
@@ -317,8 +314,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { key: 0 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1 = { key: 0 };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "QLanguageSelect",
   props: {
     modelValue: {},
@@ -363,11 +360,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(QSelect), mergeProps(unref(attrs), {
         options: languageOptions.value,
         "model-value": _ctx.modelValue,
+        borderless: "",
         "emit-value": "",
         "map-options": ""
       }), {
         selected: withCtx(() => [
-          _ctx.modelValue ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          _ctx.modelValue ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
             (openBlock(), createBlock(resolveDynamicComponent(flags[_ctx.modelValue.slice(-2).toLowerCase()])))
           ])) : createCommentVNode("", true)
         ]),
@@ -402,6 +400,105 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1 = { key: 0 };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "QLanguageSelectBtn",
+  props: {
+    modelValue: {},
+    languageImports: {},
+    allowedCodes: { default: () => ["en-US", "nl"] }
+  },
+  setup(__props) {
+    const $q = useQuasar();
+    const flagsLang = useLang$1();
+    const languageOptions = computed(() => {
+      const options = [];
+      for (let lang of Object.keys(flagsLang.value.languages)) {
+        if (!__props.allowedCodes.length || __props.allowedCodes.includes(lang)) {
+          options.push({
+            label: flagsLang.value.languages[lang],
+            value: lang
+          });
+        }
+      }
+      return options;
+    });
+    watch(
+      () => __props.modelValue,
+      (langIso) => {
+        try {
+          __props.languageImports[langIso]().then(
+            // langList[`../../../node_modules/quasar/lang/${langIso}.mjs`]().then(
+            (lang) => {
+              $q.lang.set(lang.default);
+            }
+          );
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_q_item_section = QItemSection;
+      const _component_q_item_label = QItemLabel;
+      const _component_q_item = QItem;
+      const _component_q_list = QList;
+      const _component_q_menu = QMenu;
+      const _component_q_btn = QBtn;
+      const _directive_close_popup = resolveDirective("close-popup");
+      return openBlock(), createBlock(_component_q_btn, null, {
+        default: withCtx(() => [
+          _ctx.modelValue ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            (openBlock(), createBlock(resolveDynamicComponent(flags[_ctx.modelValue.slice(-2).toLowerCase()])))
+          ])) : createCommentVNode("", true),
+          createVNode(_component_q_menu, null, {
+            default: withCtx(() => [
+              createVNode(_component_q_list, null, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(languageOptions.value, (option) => {
+                    return withDirectives((openBlock(), createBlock(_component_q_item, {
+                      key: option.value,
+                      clickable: "",
+                      onClick: ($event) => _ctx.$emit("update:model-value", option.value)
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_q_item_section, { avatar: "" }, {
+                          default: withCtx(() => [
+                            (openBlock(), createBlock(resolveDynamicComponent(
+                              flags[option.value.slice(-2).toLowerCase()]
+                            )))
+                          ]),
+                          _: 2
+                        }, 1024),
+                        createVNode(_component_q_item_section, null, {
+                          default: withCtx(() => [
+                            createVNode(_component_q_item_label, null, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(option.label), 1)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"])), [
+                      [_directive_close_popup]
+                    ]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "QDrawerList",
   setup(__props) {
@@ -417,11 +514,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 export {
   _sfc_main as QDrawerList,
-  _sfc_main$1 as QLanguageSelect,
-  QStyledCard,
-  _sfc_main$5 as QSubmitButton,
-  _sfc_main$2 as ResourcePage,
-  _sfc_main$3 as ResponsiveDialog,
+  _sfc_main$2 as QLanguageSelect,
+  _sfc_main$1 as QLanguageSelectBtn,
+  _sfc_main$5 as QStyledCard,
+  _sfc_main$6 as QSubmitButton,
+  _sfc_main$3 as ResourcePage,
+  _sfc_main$4 as ResponsiveDialog,
   loadLang,
   useLang
 };

package/dist/quasar-components.css

@@ -1,7 +1,4 @@
-.card[data-v-302df27a] {
-  width: 100%;
-  max-width: 300px;
-}/* https://github.com/quasarframework/quasar/blob/dev/docs/src/layouts/doc-layout/DocPageMenu.sass */
+/* https://github.com/quasarframework/quasar/blob/dev/docs/src/layouts/doc-layout/DocPageMenu.sass */
 .q-drawer-list .q-item__section--avatar {
   color: var(--q-primary);
   min-width: 28px;

package/dist/types/ui/authentication/AccountsTable.vue.d.ts

@@ -32,6 +32,11 @@ declare const _default: <T extends Account>(__VLS_props: NonNullable<Awaited<typ
         pagination: Pagination;
         mappedRoles: Record<string, string>;
         columns?: QTableColumn[];
+        icons?: {
+            search: string;
+            cancel: string;
+            moreVert: string;
+        };
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/types/ui/authentication/ConsentList.vue.d.ts

@@ -8,6 +8,9 @@ export interface Props {
     resourceScopes?: {
         name: string;
     }[];
+    icons?: {
+        check: string;
+    };
 }
 declare const _default: import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{

package/dist/types/ui/authentication/LoginForm.vue.d.ts

@@ -6,6 +6,10 @@ export interface Props {
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
+    icons?: {
+        visibility: string;
+        visibilifyOff: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{

package/dist/types/ui/authentication/PasswordChangeForm.vue.d.ts

@@ -6,6 +6,10 @@ export interface Props {
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
+    icons?: {
+        visibility: string;
+        visibilityOff: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
@@ -41,6 +45,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     }) => any) | undefined;
 }>, {
     minimumPasswordLength: number;
+    icons: {
+        visibility: string;
+        visibilityOff: string;
+    };
     form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
     input: Omit<QInputProps, "id" | "name" | "modelValue" | "label" | "rules" | "type" | "lazy-rules" | "autofocus" | ("label" & {
         style?: Partial<CSSStyleDeclaration>;

package/dist/types/ui/authentication/RegisterForm.vue.d.ts

@@ -11,6 +11,10 @@ export interface Props {
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
+    icons?: {
+        visibility: string;
+        visibilityOff: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{
@@ -66,6 +70,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     }) => any) | undefined;
 }>, {
     minimumPasswordLength: number;
+    icons: {
+        visibility: string;
+        visibilityOff: string;
+    };
     form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
     input: Omit<QInputProps, "id" | "name" | "modelValue" | "label" | "rules" | "type" | "lazy-rules" | "autofocus" | ("label" & {
         style?: Partial<CSSStyleDeclaration>;

package/dist/types/ui/authentication/UserMenuButton.vue.d.ts

@@ -1,6 +1,9 @@
 import type { RouteLocationRaw } from 'vue-router';
 export interface Props {
     userRoute: RouteLocationRaw;
+    icons?: {
+        person: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;

package/dist/types/ui/form/DateInput.vue.d.ts

@@ -7,6 +7,10 @@ export interface Props {
     required?: boolean;
     clearable?: boolean;
     date?: Partial<QDateProps>;
+    icons?: {
+        event: string;
+        clear: string;
+    };
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (val: string | null) => any;
@@ -14,6 +18,10 @@ declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, imp
     "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }>, {
     label: string;
+    icons: {
+        event: string;
+        clear: string;
+    };
     format: "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY";
     date: Partial<QDateProps>;
     locale: QuasarLanguageCodes[number];

package/dist/types/ui/general/QLanguageSelectBtn.vue.d.ts

@@ -0,0 +1,11 @@
+import { QuasarLanguage } from 'quasar';
+import { useLang as useFlagsLang } from '../flags/lang/index.js';
+export interface Props {
+    modelValue: string;
+    languageImports: Record<string, () => Promise<{
+        default: QuasarLanguage;
+    }>>;
+    allowedCodes?: [keyof ReturnType<typeof useFlagsLang>['value']['languages']];
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/ui/general/ResourcePage.vue.d.ts

@@ -3,6 +3,10 @@ export interface Props {
     disabled?: boolean;
     topBarFab?: boolean;
     topBarShrink?: boolean;
+    icons?: {
+        add: string;
+        edit: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     update: (args_0: {
@@ -24,6 +28,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {},
     }) => any) | undefined;
 }>, {
     type: "create" | "update";
+    icons: {
+        add: string;
+        edit: string;
+    };
     disabled: boolean;
     topBarFab: boolean;
     topBarShrink: boolean;

package/dist/types/ui/general/ResponsiveDialog.vue.d.ts

@@ -1,8 +1,10 @@
 export interface Props {
     display?: boolean;
     buttonType?: 'submit' | 'send';
-    closeIcon?: string;
     padding?: boolean;
+    icons?: {
+        close: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
@@ -28,8 +30,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
         done: (success?: boolean) => void;
     }) => any) | undefined;
 }>, {
+    icons: {
+        close: string;
+    };
     buttonType: "submit" | "send";
-    closeIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     title?: ((props: {}) => any) | undefined;
     default?: ((props: {}) => any) | undefined;

package/dist/types/ui/general/index.d.ts

@@ -3,5 +3,6 @@ export { default as QStyledCard } from './QStyledCard.vue';
 export { default as ResponsiveDialog } from './ResponsiveDialog.vue';
 export { default as ResourcePage } from './ResourcePage.vue';
 export { default as QLanguageSelect } from './QLanguageSelect.vue';
+export { default as QLanguageSelectBtn } from './QLanguageSelectBtn.vue';
 export { default as QDrawerList } from './QDrawerList.vue';
 export { useLang, loadLang } from './lang/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.11.8",
+  "version": "0.11.10",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",

package/src/ui/authentication/AccountsTable.vue

@@ -17,17 +17,17 @@
       </q-tr>
     </template>
     <template #top-right>
-      <q-btn icon="search" flat>
+      <q-btn :icon="searchIcon" flat>
         <q-menu>
           <div class="q-pa-sm">
             <q-input v-model="name" :label="lang.account.fields.name">
               <template #append>
                 <q-icon
                   v-if="name"
-                  name="cancel"
-                  @click="name = ''"
                   class="q-field__focusable-action"
                   role="button"
+                  :name="cancelIcon"
+                  @click="name = ''"
                 />
               </template>
             </q-input>
@@ -35,10 +35,10 @@
               <template #append>
                 <q-icon
                   v-if="email"
-                  name="cancel"
-                  @click="email = ''"
                   class="q-field__focusable-action"
                   role="button"
+                  :name="cancelIcon"
+                  @click="email = ''"
                 />
               </template>
             </q-input>
@@ -55,10 +55,10 @@
               <template #append>
                 <q-icon
                   v-if="roles.length"
-                  name="cancel"
-                  @click="roles = []"
                   class="q-field__focusable-action"
                   role="button"
+                  :name="cancelIcon"
+                  @click="roles = []"
                 />
               </template>
             </q-select>
@@ -72,7 +72,7 @@
           {{ col.value }}
         </q-td>
         <q-td auto-width>
-          <q-btn size="sm" round flat icon="more_vert">
+          <q-btn size="sm" round flat :icon="moreVertIcon">
             <q-menu>
               <q-list>
                 <q-item clickable @click="openAddRoleDialog(props.row)">
@@ -127,6 +127,11 @@ const props = defineProps<{
   pagination: Pagination
   mappedRoles: Record<string, string> // value: label
   columns?: QTableColumn[]
+  icons?: {
+    search: string
+    cancel: string
+    moreVert: string
+  }
 }>()
 
 const emit = defineEmits<{
@@ -136,7 +141,7 @@ const emit = defineEmits<{
   (e: 'removeRole', { id, role }: { id: number; role: string }): void
 }>()
 
-const { modelValue, count, mappedRoles, columns } = toRefs(props)
+const { modelValue, count, mappedRoles, columns, icons } = toRefs(props)
 
 // const { useQuery } = await createUseTrpc()
 const lang = useLang()
@@ -275,4 +280,8 @@ const openRemoveRoleDialog = (account: Account) => {
     emit('removeRole', { id: account.id, role })
   })
 }
+
+const searchIcon = icons.value?.search ?? 'search'
+const cancelIcon = icons.value?.cancel ?? 'cancel'
+const moreVertIcon = icons.value?.moreVert ?? 'more_vert'
 </script>