@simsustech/quasar-components 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @simsustech/quasar-components
 
+## 0.9.0
+
+### Minor Changes
+
+- 9fe6cd0: feat: add AccountsTable component
+
+### Patch Changes
+
+- eec2e00: fix(DateInput): fix locale prop
+
 ## 0.8.1
 
 ### Patch Changes

package/dist/authentication.js

@@ -1,6 +1,6 @@
-import { useQuasar, QForm, QInput, QStep, QStepperNavigation, QStepper, QIcon, QBtn, QSlider, QItemSection, QItem, QList, QMenu } from "quasar";
-import { ref, defineComponent, watch, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, toRef, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$c } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-DAnZaTMl.js";
+import { useQuasar, QForm, QInput, QStep, QStepperNavigation, QStepper, QIcon, QBtn, QSlider, QItemSection, QItem, QList, QMenu, QTable, QTh, QTr, QSelect, QTd, QItemLabel } from "quasar";
+import { ref, defineComponent, watch, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, toRef, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, toRefs, createElementVNode } from "vue";
+import { _ as _sfc_main$d } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-DAnZaTMl.js";
 const lang$1 = {
   isoName: "en-US",
   myAccount: "Account",
@@ -88,6 +88,22 @@ const lang$1 = {
   },
   verification: {
     slider: "Please drag the slider below all the way to the right."
+  },
+  account: {
+    title: "Accounts",
+    fields: {
+      name: "Name",
+      email: "Email",
+      roles: "Roles"
+    },
+    labels: {
+      addRole: "Add role",
+      removeRole: "Remove role"
+    },
+    messages: {
+      addRole: ({ email }) => `Select the role which you want to add to ${email}.`,
+      removeRole: ({ email }) => `Select the role which you want to remove from ${email}.`
+    }
   }
 };
 const enUS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -98,7 +114,7 @@ var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: f
 const lang = ref(lang$1);
 const locales = /* @__PURE__ */ Object.assign({
   "./en-US.ts": () => Promise.resolve().then(() => enUS),
-  "./nl.ts": () => import("./nl-D4kRrjEa.js")
+  "./nl.ts": () => import("./nl-jHKPHlmh.js")
 });
 const useLang = () => {
   return lang;
@@ -382,7 +398,7 @@ function isEmail(str, options) {
 const __default__$a = {
   name: "RequestOtpForm"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...__default__$a,
   props: {
     form: {},
@@ -454,7 +470,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "OtpInput",
   props: {
     modelValue: {}
@@ -482,7 +498,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
 const __default__$9 = {
   name: "EmailChangeForm"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...__default__$9,
   props: {
     email: {},
@@ -550,7 +566,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         onSubmit: _cache[3] || (_cache[3] = (e) => submit)
       }), {
         default: withCtx(() => [
-          createVNode(_sfc_main$a, mergeProps(_ctx.input, {
+          createVNode(_sfc_main$b, mergeProps(_ctx.input, {
             modelValue: otp.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => otp.value = $event)
           }), null, 16, ["modelValue"]),
@@ -584,7 +600,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 const __default__$8 = {
   name: "EmailChangeStepper"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...__default__$8,
   props: {
     input: {}
@@ -667,13 +683,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => {
               var _a, _b;
               return [
-                step.value === "requestOtp" ? (openBlock(), createBlock(_sfc_main$c, {
+                step.value === "requestOtp" ? (openBlock(), createBlock(_sfc_main$d, {
                   key: 0,
                   "is-next-button": "",
                   form: "requestOtpForm",
                   onSubmit: (_a = requestOtpFormRef.value) == null ? void 0 : _a.functions.submit
                 }, null, 8, ["onSubmit"])) : createCommentVNode("", true),
-                step.value === "changeEmail" ? (openBlock(), createBlock(_sfc_main$c, {
+                step.value === "changeEmail" ? (openBlock(), createBlock(_sfc_main$d, {
                   key: 1,
                   form: "emailChangeForm",
                   onSubmit: (_b = emailChangeFormRef.value) == null ? void 0 : _b.functions.submit
@@ -689,7 +705,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             title: requestOtpHeader.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$b, {
+              createVNode(_sfc_main$c, {
                 ref_key: "requestOtpFormRef",
                 ref: requestOtpFormRef,
                 form: { id: "requestOtpForm" },
@@ -704,7 +720,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             title: emailChangeHeader.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$9, {
+              createVNode(_sfc_main$a, {
                 ref_key: "emailChangeFormRef",
                 ref: emailChangeFormRef,
                 form: { id: "emailChangeForm" },
@@ -728,7 +744,7 @@ function equals(str, comparison) {
 const __default__$7 = {
   name: "PasswordChangeForm"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...__default__$7,
   props: {
     email: {},
@@ -800,7 +816,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         onSubmit: _cache[5] || (_cache[5] = (e) => submit)
       }), {
         default: withCtx(() => [
-          createVNode(_sfc_main$a, mergeProps(_ctx.input, {
+          createVNode(_sfc_main$b, mergeProps(_ctx.input, {
             modelValue: otp.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => otp.value = $event)
           }), null, 16, ["modelValue"]),
@@ -855,7 +871,7 @@ const __default__$6 = {
   name: "PasswordChangeStepper",
   useLang
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...__default__$6,
   props: {
     input: {}
@@ -920,13 +936,13 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => {
               var _a, _b;
               return [
-                step.value === "requestOtp" ? (openBlock(), createBlock(_sfc_main$c, {
+                step.value === "requestOtp" ? (openBlock(), createBlock(_sfc_main$d, {
                   key: 0,
                   "is-next-button": "",
                   form: "requestOtpForm",
                   onSubmit: (_a = requestOtpFormRef.value) == null ? void 0 : _a.functions.submit
                 }, null, 8, ["onSubmit"])) : createCommentVNode("", true),
-                step.value === "changePassword" ? (openBlock(), createBlock(_sfc_main$c, {
+                step.value === "changePassword" ? (openBlock(), createBlock(_sfc_main$d, {
                   key: 1,
                   form: "passwordChangeForm",
                   onSubmit: (_b = passwordChangeFormRef.value) == null ? void 0 : _b.functions.submit
@@ -942,7 +958,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             title: requestOtpHeader.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$b, {
+              createVNode(_sfc_main$c, {
                 ref_key: "requestOtpFormRef",
                 ref: requestOtpFormRef,
                 form: { id: "requestOtpForm" },
@@ -957,7 +973,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             title: passwordChangeHeader.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$7, {
+              createVNode(_sfc_main$8, {
                 ref_key: "passwordChangeFormRef",
                 ref: passwordChangeFormRef,
                 form: { id: "passwordChangeForm" },
@@ -977,7 +993,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 const __default__$5 = {
   name: "LoginForm"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...__default__$5,
   props: {
     useUsername: { type: Boolean },
@@ -1196,7 +1212,7 @@ function isAlphanumeric(_str) {
 const __default__$4 = {
   name: "RegisterForm"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...__default__$4,
   props: {
     useUsername: { type: Boolean },
@@ -1371,7 +1387,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 const __default__$3 = {
   name: "VerificationSlider"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...__default__$3,
   props: {
     useVerificationSlider: { type: Boolean }
@@ -1426,7 +1442,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 const __default__$2 = {
   name: "ConsentList"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: {
     scopes: {},
@@ -1544,7 +1560,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 const __default__$1 = {
   name: "UserMenuButton"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: {
     userRoute: {}
@@ -1619,12 +1635,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { key: 0 };
+const _hoisted_1$1 = { key: 0 };
 const _hoisted_2 = { key: 1 };
 const __default__ = {
   name: "LoginButton"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
     withNetwork: {}
@@ -1638,29 +1654,369 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       loadLang($q.lang.isoName);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, null, {
+      return openBlock(), createBlock(_sfc_main$d, null, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "icon"),
-          _ctx.withNetwork ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(lang2).login.loginWith) + " " + toDisplayString(_ctx.withNetwork), 1)) : (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(lang2).login.login), 1))
+          _ctx.withNetwork ? (openBlock(), createElementBlock("div", _hoisted_1$1, toDisplayString(unref(lang2).login.loginWith) + " " + toDisplayString(_ctx.withNetwork), 1)) : (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(lang2).login.login), 1))
         ]),
         _: 3
       });
     };
   }
 });
+const _hoisted_1 = { class: "q-pa-sm" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AccountsTable",
+  props: {
+    modelValue: {},
+    count: {},
+    pagination: {},
+    mappedRoles: {},
+    columns: {}
+  },
+  emits: ["update:pagination", "update:criteria", "addRole", "removeRole"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { modelValue, count, mappedRoles, columns } = toRefs(props);
+    const lang2 = useLang();
+    const $q = useQuasar();
+    const sortBy = ref(props.pagination.sortBy);
+    const descending = ref(props.pagination.descending);
+    const rowsPerPage = ref(props.pagination.limit);
+    const page = ref(props.pagination.offset / props.pagination.limit + 1);
+    const name = ref("");
+    const email = ref("");
+    const roles = ref([]);
+    const criteria = computed(() => ({
+      name: name.value,
+      email: email.value,
+      roles: roles.value
+    }));
+    const tablePagination = computed({
+      // getter
+      get() {
+        return {
+          sortBy: sortBy.value,
+          descending: descending.value,
+          page: page.value,
+          rowsPerPage: rowsPerPage.value,
+          rowsNumber: count.value || 0
+        };
+      },
+      // setter
+      set(newValue) {
+        sortBy.value = newValue.sortBy;
+        descending.value = newValue.descending;
+        page.value = newValue.page;
+        rowsPerPage.value = newValue.rowsPerPage;
+      }
+    });
+    watch(criteria, () => emit("update:criteria", criteria.value));
+    const onRequest = ({ pagination }) => {
+      descending.value = pagination.descending;
+      sortBy.value = pagination.sortBy;
+      page.value = pagination.page;
+      rowsPerPage.value = pagination.rowsPerPage;
+      emit("update:pagination", {
+        limit: rowsPerPage.value,
+        offset: (page.value - 1) * rowsPerPage.value,
+        sortBy: sortBy.value,
+        descending: descending.value
+      });
+      return;
+    };
+    const accountColumns = ref([
+      {
+        name: "id",
+        required: true,
+        label: "#",
+        align: "left",
+        field: (row) => row.id,
+        format: (val) => `${val}`,
+        sortable: true
+      },
+      {
+        name: "name",
+        required: true,
+        label: lang2.value.account.fields.name,
+        align: "left",
+        field: (row) => row.name,
+        format: (val) => `${val || ""}`,
+        sortable: false
+      },
+      {
+        name: "email",
+        required: true,
+        label: lang2.value.account.fields.email,
+        align: "left",
+        field: (row) => row.email,
+        format: (val) => `${val}`,
+        sortable: false
+      },
+      {
+        name: "roles",
+        required: true,
+        label: lang2.value.account.fields.roles,
+        align: "right",
+        field: (row) => row.roles,
+        format: (val) => val.map((role) => mappedRoles.value[role]).join(", ")
+      }
+    ]);
+    if (columns == null ? void 0 : columns.value)
+      accountColumns.value.push(...columns.value);
+    const roleOptions = computed(
+      () => Object.entries(mappedRoles.value).map(([key, value]) => ({
+        label: value,
+        value: key
+      }))
+    );
+    const openAddRoleDialog = (account) => {
+      $q.dialog({
+        message: lang2.value.account.messages.addRole(account),
+        options: {
+          type: "radio",
+          model: "role",
+          items: roleOptions.value.filter(
+            (newRole) => !account.roles.includes(newRole.value)
+          )
+        },
+        cancel: true,
+        persistent: true
+      }).onOk((role) => {
+        emit("addRole", { id: account.id, role });
+      });
+    };
+    const openRemoveRoleDialog = (account) => {
+      var _a;
+      $q.dialog({
+        message: lang2.value.account.messages.removeRole(account),
+        options: {
+          type: "radio",
+          model: "role",
+          items: (_a = account.roles) == null ? void 0 : _a.map((role) => ({
+            label: mappedRoles.value[role],
+            value: role
+          }))
+        },
+        cancel: true,
+        persistent: true
+      }).onOk((role) => {
+        emit("removeRole", { id: account.id, role });
+      });
+    };
+    return (_ctx, _cache) => {
+      const _component_q_th = QTh;
+      const _component_q_tr = QTr;
+      const _component_q_icon = QIcon;
+      const _component_q_input = QInput;
+      const _component_q_select = QSelect;
+      const _component_q_menu = QMenu;
+      const _component_q_btn = QBtn;
+      const _component_q_td = QTd;
+      const _component_q_item_label = QItemLabel;
+      const _component_q_item_section = QItemSection;
+      const _component_q_item = QItem;
+      const _component_q_list = QList;
+      return unref(modelValue) ? (openBlock(), createBlock(unref(QTable), {
+        key: 0,
+        pagination: tablePagination.value,
+        "onUpdate:pagination": _cache[6] || (_cache[6] = ($event) => tablePagination.value = $event),
+        title: unref(lang2).account.title,
+        class: "full-width",
+        rows: unref(modelValue),
+        columns: accountColumns.value,
+        "row-key": "id",
+        onRequest
+      }, {
+        header: withCtx((props2) => [
+          createVNode(_component_q_tr, { props: props2 }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(props2.cols, (col) => {
+                return openBlock(), createBlock(_component_q_th, {
+                  key: col.name,
+                  props: props2
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(col.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["props"]);
+              }), 128))
+            ]),
+            _: 2
+          }, 1032, ["props"])
+        ]),
+        "top-right": withCtx(() => [
+          createVNode(_component_q_btn, {
+            icon: "search",
+            flat: ""
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_q_menu, null, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_1, [
+                    createVNode(_component_q_input, {
+                      modelValue: name.value,
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => name.value = $event),
+                      label: unref(lang2).account.fields.name
+                    }, {
+                      append: withCtx(() => [
+                        name.value ? (openBlock(), createBlock(_component_q_icon, {
+                          key: 0,
+                          name: "cancel",
+                          onClick: _cache[0] || (_cache[0] = ($event) => name.value = ""),
+                          class: "q-field__focusable-action",
+                          role: "button"
+                        })) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue", "label"]),
+                    createVNode(_component_q_input, {
+                      modelValue: email.value,
+                      "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => email.value = $event),
+                      label: unref(lang2).account.fields.email
+                    }, {
+                      append: withCtx(() => [
+                        email.value ? (openBlock(), createBlock(_component_q_icon, {
+                          key: 0,
+                          name: "cancel",
+                          onClick: _cache[2] || (_cache[2] = ($event) => email.value = ""),
+                          class: "q-field__focusable-action",
+                          role: "button"
+                        })) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue", "label"]),
+                    createVNode(_component_q_select, {
+                      modelValue: roles.value,
+                      "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => roles.value = $event),
+                      multiple: "",
+                      style: { "min-width": "200px" },
+                      label: unref(lang2).account.fields.roles,
+                      options: roleOptions.value,
+                      "map-options": "",
+                      "emit-value": ""
+                    }, {
+                      append: withCtx(() => [
+                        roles.value.length ? (openBlock(), createBlock(_component_q_icon, {
+                          key: 0,
+                          name: "cancel",
+                          onClick: _cache[4] || (_cache[4] = ($event) => roles.value = []),
+                          class: "q-field__focusable-action",
+                          role: "button"
+                        })) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue", "label", "options"])
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        body: withCtx((props2) => [
+          createVNode(_component_q_tr, { props: props2 }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(props2.cols, (col) => {
+                return openBlock(), createBlock(_component_q_td, {
+                  key: col.name,
+                  props: props2
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(col.value), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["props"]);
+              }), 128)),
+              createVNode(_component_q_td, { "auto-width": "" }, {
+                default: withCtx(() => [
+                  createVNode(_component_q_btn, {
+                    size: "sm",
+                    round: "",
+                    flat: "",
+                    icon: "more_vert"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_q_menu, null, {
+                        default: withCtx(() => [
+                          createVNode(_component_q_list, null, {
+                            default: withCtx(() => [
+                              createVNode(_component_q_item, {
+                                clickable: "",
+                                onClick: ($event) => openAddRoleDialog(props2.row)
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_q_item_section, null, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_q_item_label, null, {
+                                        default: withCtx(() => [
+                                          createTextVNode(toDisplayString(unref(lang2).account.labels.addRole), 1)
+                                        ]),
+                                        _: 1
+                                      })
+                                    ]),
+                                    _: 1
+                                  })
+                                ]),
+                                _: 2
+                              }, 1032, ["onClick"]),
+                              createVNode(_component_q_item, {
+                                clickable: "",
+                                onClick: ($event) => openRemoveRoleDialog(props2.row)
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_q_item_section, null, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_q_item_label, null, {
+                                        default: withCtx(() => [
+                                          createTextVNode(toDisplayString(unref(lang2).account.labels.removeRole), 1)
+                                        ]),
+                                        _: 1
+                                      })
+                                    ]),
+                                    _: 1
+                                  })
+                                ]),
+                                _: 2
+                              }, 1032, ["onClick"])
+                            ]),
+                            _: 2
+                          }, 1024)
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1024)
+            ]),
+            _: 2
+          }, 1032, ["props"])
+        ]),
+        _: 1
+      }, 8, ["pagination", "title", "rows", "columns"])) : createCommentVNode("", true);
+    };
+  }
+});
 export {
-  _sfc_main$2 as ConsentList,
-  _sfc_main$9 as EmailChangeForm,
-  _sfc_main$8 as EmailChangeStepper,
-  _sfc_main as LoginButton,
-  _sfc_main$5 as LoginForm,
-  _sfc_main$a as OtpInput,
-  _sfc_main$7 as PasswordChangeForm,
-  _sfc_main$6 as PasswordChangeStepper,
-  _sfc_main$4 as RegisterForm,
-  _sfc_main$b as RequestOtpForm,
-  _sfc_main$1 as UserMenuButton,
-  _sfc_main$3 as VerificationSlider,
+  _sfc_main as AccountsTable,
+  _sfc_main$3 as ConsentList,
+  _sfc_main$a as EmailChangeForm,
+  _sfc_main$9 as EmailChangeStepper,
+  _sfc_main$1 as LoginButton,
+  _sfc_main$6 as LoginForm,
+  _sfc_main$b as OtpInput,
+  _sfc_main$8 as PasswordChangeForm,
+  _sfc_main$7 as PasswordChangeStepper,
+  _sfc_main$5 as RegisterForm,
+  _sfc_main$c as RequestOtpForm,
+  _sfc_main$2 as UserMenuButton,
+  _sfc_main$4 as VerificationSlider,
   loadLang,
   useLang
 };

package/dist/{nl-D4kRrjEa.js → nl-jHKPHlmh.js}

@@ -85,6 +85,22 @@ const lang = {
   },
   verification: {
     slider: "Sleep a.u.b. het onderstaande bolletje helemaal naar rechts."
+  },
+  account: {
+    title: "Accounts",
+    fields: {
+      name: "Naam",
+      email: "Email",
+      roles: "Rollen"
+    },
+    labels: {
+      addRole: "Rol toevoegen",
+      removeRole: "Rol verwijderen"
+    },
+    messages: {
+      addRole: ({ email }) => `Selecteer de rol die u wilt toevoegen aan ${email}.`,
+      removeRole: ({ email }) => `Selecteer de rol die u wilt verwijderen van ${email}.`
+    }
   }
 };
 export {

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

@@ -18,7 +18,6 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Pr
     functions: import("vue").Ref<{}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>;
 export default _default;
-
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {

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

@@ -10,4 +10,5 @@ export { default as VerificationSlider } from './VerificationSlider.vue';
 export { default as ConsentList } from './ConsentList.vue';
 export { default as UserMenuButton } from './UserMenuButton.vue';
 export { default as LoginButton } from './LoginButton.vue';
+export { default as AccountsTable } from './AccountsTable.vue';
 export { useLang, loadLang } from './lang/index.js';

package/dist/types/ui/authentication/lang/index.d.ts

@@ -86,6 +86,26 @@ export interface Language {
     verification: {
         slider: string;
     };
+    account: {
+        title: string;
+        fields: {
+            name: string;
+            email: string;
+            roles: string;
+        };
+        labels: {
+            addRole: string;
+            removeRole: string;
+        };
+        messages: {
+            addRole: ({ email }: {
+                email: string;
+            }) => string;
+            removeRole: ({ email }: {
+                email: string;
+            }) => string;
+        };
+    };
 }
 import type { Ref } from 'vue';
 export declare const lang: Ref<{
@@ -176,6 +196,26 @@ export declare const lang: Ref<{
     verification: {
         slider: string;
     };
+    account: {
+        title: string;
+        fields: {
+            name: string;
+            email: string;
+            roles: string;
+        };
+        labels: {
+            addRole: string;
+            removeRole: string;
+        };
+        messages: {
+            addRole: ({ email }: {
+                email: string;
+            }) => string;
+            removeRole: ({ email }: {
+                email: string;
+            }) => string;
+        };
+    };
 }>;
 export declare const defineLang: (lang: Language) => Language;
 export declare const useLang: () => Ref<Language>;

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

@@ -2,7 +2,7 @@ import { QDateProps, QuasarLanguageCodes } from 'quasar';
 export interface Props {
     modelValue: string | null;
     format?: 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MM-DD-YYYY';
-    locale?: QuasarLanguageCodes;
+    locale?: QuasarLanguageCodes[number];
     label?: string;
     required?: boolean;
     clearable?: boolean;
@@ -24,9 +24,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }, {
     label: string;
-    date: Partial<QDateProps>;
-    locale: keyof import("quasar").QuasarLanguageCodesHolder;
     format: "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY";
+    date: Partial<QDateProps>;
+    locale: string;
 }, {}>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

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

@@ -20,7 +20,6 @@ declare const _default: <T extends {
     hint?: string | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
-    slots: Partial<Record<NonNullable<string | number>, (_: any) => any>>;
     emit: {
         (e: 'update:model-value', id: number): void;
         (e: 'filter', { ids, searchPhrase, done }: {
@@ -29,6 +28,7 @@ declare const _default: <T extends {
             done: (success?: boolean) => void;
         }): void;
     };
+    slots: Partial<Record<NonNullable<string | number>, (_: any) => any>>;
 } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {
         onFilter?: ((args_0: {

package/package.json

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

package/src/ui/authentication/AccountsTable.vue

@@ -0,0 +1,279 @@
+<template>
+  <q-table
+    v-if="modelValue"
+    v-model:pagination="tablePagination"
+    :title="lang.account.title"
+    class="full-width"
+    :rows="modelValue"
+    :columns="accountColumns"
+    row-key="id"
+    @request="onRequest"
+  >
+    <template #header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          {{ col.label }}
+        </q-th>
+      </q-tr>
+    </template>
+    <template #top-right>
+      <q-btn icon="search" 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"
+                />
+              </template>
+            </q-input>
+            <q-input v-model="email" :label="lang.account.fields.email">
+              <template #append>
+                <q-icon
+                  v-if="email"
+                  name="cancel"
+                  @click="email = ''"
+                  class="q-field__focusable-action"
+                  role="button"
+                />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="roles"
+              multiple
+              style="min-width: 200px"
+              :label="lang.account.fields.roles"
+              :options="roleOptions"
+              map-options
+              emit-value
+            >
+              <template #append>
+                <q-icon
+                  v-if="roles.length"
+                  name="cancel"
+                  @click="roles = []"
+                  class="q-field__focusable-action"
+                  role="button"
+                />
+              </template>
+            </q-select>
+          </div>
+        </q-menu>
+      </q-btn>
+    </template>
+    <template #body="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          {{ col.value }}
+        </q-td>
+        <q-td auto-width>
+          <q-btn size="sm" round flat icon="more_vert">
+            <q-menu>
+              <q-list>
+                <q-item clickable @click="openAddRoleDialog(props.row)">
+                  <q-item-section>
+                    <q-item-label>
+                      {{ lang.account.labels.addRole }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable @click="openRemoveRoleDialog(props.row)">
+                  <q-item-section>
+                    <q-item-label>
+                      {{ lang.account.labels.removeRole }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script lang="ts" setup generic="T extends Account">
+import { computed, ref, toRefs, watch } from 'vue'
+import { QTable, QTableColumn, useQuasar } from 'quasar'
+import { useLang } from './lang/index.js'
+
+export interface Account {
+  id: number
+  name?: string
+  email: string
+  roles: string[]
+}
+
+interface Pagination {
+  limit: number
+  offset: number
+  sortBy: keyof Account
+  descending: boolean
+}
+
+interface Criteria {
+  roles: string[]
+}
+interface Props {
+  modelValue: T[]
+  count: number
+  pagination: Pagination
+  mappedRoles: Record<string, string> // value: label
+  columns?: QTableColumn[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:pagination', pagination: Pagination): void
+  (e: 'update:criteria', criteria: Criteria): void
+  (e: 'addRole', { id, role }: { id: number; role: string }): void
+  (e: 'removeRole', { id, role }: { id: number; role: string }): void
+}>()
+
+const { modelValue, count, mappedRoles, columns } = toRefs(props)
+
+// const { useQuery } = await createUseTrpc()
+const lang = useLang()
+const $q = useQuasar()
+
+const sortBy = ref<keyof Account>(props.pagination.sortBy)
+const descending = ref(props.pagination.descending)
+const rowsPerPage = ref(props.pagination.limit)
+const page = ref(props.pagination.offset / props.pagination.limit + 1)
+
+const name = ref<string>('')
+const email = ref<string>('')
+const roles = ref<string[]>([])
+const criteria = computed(() => ({
+  name: name.value,
+  email: email.value,
+  roles: roles.value
+}))
+
+const tablePagination = computed({
+  // getter
+  get() {
+    return {
+      sortBy: sortBy.value,
+      descending: descending.value,
+      page: page.value,
+      rowsPerPage: rowsPerPage.value,
+      rowsNumber: count.value || 0
+    }
+  },
+  // setter
+  set(newValue) {
+    sortBy.value = newValue.sortBy
+    descending.value = newValue.descending
+    page.value = newValue.page
+    rowsPerPage.value = newValue.rowsPerPage
+  }
+})
+
+watch(criteria, () => emit('update:criteria', criteria.value))
+
+const onRequest: QTable['$props']['onRequest'] = ({ pagination }) => {
+  descending.value = pagination.descending
+  sortBy.value = pagination.sortBy as keyof Account
+  page.value = pagination.page
+  rowsPerPage.value = pagination.rowsPerPage
+
+  emit('update:pagination', {
+    limit: rowsPerPage.value,
+    offset: (page.value - 1) * rowsPerPage.value,
+    sortBy: sortBy.value as keyof Account,
+    descending: descending.value
+  })
+  return
+}
+
+const accountColumns = ref<QTableColumn[]>([
+  {
+    name: 'id',
+    required: true,
+    label: '#',
+    align: 'left',
+    field: (row) => row.id,
+    format: (val) => `${val}`,
+    sortable: true
+  },
+  {
+    name: 'name',
+    required: true,
+    label: lang.value.account.fields.name,
+    align: 'left',
+    field: (row) => row.name,
+    format: (val) => `${val || ''}`,
+    sortable: false
+  },
+  {
+    name: 'email',
+    required: true,
+    label: lang.value.account.fields.email,
+    align: 'left',
+    field: (row) => row.email,
+    format: (val) => `${val}`,
+    sortable: false
+  },
+  {
+    name: 'roles',
+    required: true,
+    label: lang.value.account.fields.roles,
+    align: 'right',
+    field: (row) => row.roles,
+    format: (val) =>
+      val.map((role: string) => mappedRoles.value[role]).join(', ')
+  }
+])
+
+if (columns?.value) accountColumns.value.push(...columns.value)
+
+const roleOptions = computed(() =>
+  Object.entries(mappedRoles.value).map(([key, value]) => ({
+    label: value,
+    value: key
+  }))
+)
+
+const openAddRoleDialog = (account: Account) => {
+  $q.dialog({
+    message: lang.value.account.messages.addRole(account),
+    options: {
+      type: 'radio',
+      model: 'role',
+      items: roleOptions.value.filter(
+        (newRole) => !account.roles.includes(newRole.value)
+      )
+    },
+    cancel: true,
+    persistent: true
+  }).onOk((role: string) => {
+    emit('addRole', { id: account.id, role })
+  })
+}
+
+const openRemoveRoleDialog = (account: Account) => {
+  $q.dialog({
+    message: lang.value.account.messages.removeRole(account),
+    options: {
+      type: 'radio',
+      model: 'role',
+      items: account.roles?.map((role) => ({
+        label: mappedRoles.value[role],
+        value: role
+      }))
+    },
+    cancel: true,
+    persistent: true
+  }).onOk((role) => {
+    emit('removeRole', { id: account.id, role })
+  })
+}
+</script>

package/src/ui/authentication/index.ts

@@ -10,4 +10,5 @@ export { default as VerificationSlider } from './VerificationSlider.vue'
 export { default as ConsentList } from './ConsentList.vue'
 export { default as UserMenuButton } from './UserMenuButton.vue'
 export { default as LoginButton } from './LoginButton.vue'
+export { default as AccountsTable } from './AccountsTable.vue'
 export { useLang, loadLang } from './lang/index.js'

package/src/ui/authentication/lang/en-US.ts

@@ -90,6 +90,24 @@ const lang: Language = {
   },
   verification: {
     slider: 'Please drag the slider below all the way to the right.'
+  },
+  account: {
+    title: 'Accounts',
+    fields: {
+      name: 'Name',
+      email: 'Email',
+      roles: 'Roles'
+    },
+    labels: {
+      addRole: 'Add role',
+      removeRole: 'Remove role'
+    },
+    messages: {
+      addRole: ({ email }) =>
+        `Select the role which you want to add to ${email}.`,
+      removeRole: ({ email }) =>
+        `Select the role which you want to remove from ${email}.`
+    }
   }
 }
 

package/src/ui/authentication/lang/index.ts

@@ -86,6 +86,22 @@ export interface Language {
   verification: {
     slider: string
   }
+  account: {
+    title: string
+    fields: {
+      name: string
+      email: string
+      roles: string
+    }
+    labels: {
+      addRole: string
+      removeRole: string
+    }
+    messages: {
+      addRole: ({ email }: { email: string }) => string
+      removeRole: ({ email }: { email: string }) => string
+    }
+  }
 }
 
 import type { Ref } from 'vue'

package/src/ui/authentication/lang/nl.ts

@@ -90,6 +90,24 @@ const lang: Language = {
   },
   verification: {
     slider: 'Sleep a.u.b. het onderstaande bolletje helemaal naar rechts.'
+  },
+  account: {
+    title: 'Accounts',
+    fields: {
+      name: 'Naam',
+      email: 'Email',
+      roles: 'Rollen'
+    },
+    labels: {
+      addRole: 'Rol toevoegen',
+      removeRole: 'Rol verwijderen'
+    },
+    messages: {
+      addRole: ({ email }) =>
+        `Selecteer de rol die u wilt toevoegen aan ${email}.`,
+      removeRole: ({ email }) =>
+        `Selecteer de rol die u wilt verwijderen van ${email}.`
+    }
   }
 }
 

package/src/ui/form/DateInput.vue

@@ -68,7 +68,7 @@ import { useLang } from './lang'
 export interface Props {
   modelValue: string | null
   format?: 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MM-DD-YYYY'
-  locale?: QuasarLanguageCodes
+  locale?: QuasarLanguageCodes[number]
   label?: string
   required?: boolean
   clearable?: boolean