alytus-ff 0.1.19 → 0.1.20

package/dist/App.vue.d.ts

@@ -1,6 +1,56 @@
 declare const _default: import('vue').DefineComponent<{}, {
     showDialog: import('vue').Ref<boolean, boolean>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    UserAvatar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        user: {
+            type: import('vue').PropType<import('.').IUser>;
+            required: true;
+        };
+        size: {
+            type: NumberConstructor;
+            required: true;
+        };
+        baseUrl: {
+            type: StringConstructor;
+            required: true;
+        };
+    }>, {
+        fullName: import('vue').ComputedRef<string>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        user: {
+            type: import('vue').PropType<import('.').IUser>;
+            required: true;
+        };
+        size: {
+            type: NumberConstructor;
+            required: true;
+        };
+        baseUrl: {
+            type: StringConstructor;
+            required: true;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    AccountAvatar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        item: {
+            type: import('vue').PropType<import('.').IAccount>;
+            required: true;
+        };
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        item: {
+            type: import('vue').PropType<import('.').IAccount>;
+            required: true;
+        };
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>> & Readonly<{}>, {
+        size: number;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     PageTitle: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         title: {
             type: StringConstructor;
@@ -39,7 +89,9 @@ declare const _default: import('vue').DefineComponent<{}, {
             type: BooleanConstructor;
             default: boolean;
         };
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }>, {}, {}, {}, {
+        mdiClose(): string;
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         value: {
             type: BooleanConstructor;
             required: true;

package/dist/alytus-ff.js

@@ -1,5 +1,5 @@
-import { defineComponent as m, openBlock as a, createElementBlock as u, createElementVNode as d, toDisplayString as f, createCommentVNode as v, renderSlot as i, resolveComponent as l, createBlock as $, withCtx as c, createVNode as p } from "vue";
-const k = m({
+import { defineComponent as m, openBlock as a, createElementBlock as $, createElementVNode as v, toDisplayString as d, createCommentVNode as y, renderSlot as c, resolveComponent as r, createBlock as p, withCtx as l, createVNode as _, normalizeClass as b, createTextVNode as N, computed as S } from "vue";
+const U = m({
   name: "PageTitle",
   props: {
     title: {
@@ -11,27 +11,27 @@ const k = m({
       default: null
     }
   }
-}), _ = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [s, o] of t)
-    n[s] = o;
-  return n;
-}, S = { class: "mt-6 mb-3 ff-page-title" }, w = { class: "text-h5 ff-title" }, B = {
+}), f = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [s, n] of t)
+    o[s] = n;
+  return o;
+}, q = { class: "mt-6 mb-3 ff-page-title" }, A = { class: "text-h5 ff-title" }, w = {
   key: 0,
   class: "text-body-2 ff-description"
 };
-function D(e, t, n, s, o, r) {
-  return a(), u("div", S, [
-    d("div", null, [
-      d("span", w, f(e.title), 1),
-      e.description ? (a(), u("div", B, f(e.description), 1)) : v("", !0)
+function B(e, t, o, s, n, i) {
+  return a(), $("div", q, [
+    v("div", null, [
+      v("span", A, d(e.title), 1),
+      e.description ? (a(), $("div", w, d(e.description), 1)) : y("", !0)
     ]),
-    d("div", null, [
-      i(e.$slots, "buttons")
+    v("div", null, [
+      c(e.$slots, "buttons")
     ])
   ]);
 }
-const I = /* @__PURE__ */ _(k, [["render", D]]), T = m({
+const K = /* @__PURE__ */ f(U, [["render", B]]), T = m({
   name: "PageSubtitle",
   props: {
     subtitle: {
@@ -39,12 +39,19 @@ const I = /* @__PURE__ */ _(k, [["render", D]]), T = m({
       required: !0
     }
   }
-}), U = { class: "text-h6 font-weight-bold mt-7 mb-4" };
-function P(e, t, n, s, o, r) {
-  return a(), u("div", U, f(e.subtitle), 1);
+}), D = { class: "text-h6 font-weight-bold mt-7 mb-4" };
+function V(e, t, o, s, n, i) {
+  return a(), $("div", D, d(e.subtitle), 1);
 }
-const N = /* @__PURE__ */ _(T, [["render", P]]), R = m({
+const Q = /* @__PURE__ */ f(T, [["render", V]]);
+var P = "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";
+const R = m({
   name: "CustomDialog",
+  methods: {
+    mdiClose() {
+      return P;
+    }
+  },
   props: {
     value: {
       type: Boolean,
@@ -63,31 +70,41 @@ const N = /* @__PURE__ */ _(T, [["render", P]]), R = m({
       default: !1
     }
   }
-});
-function V(e, t, n, s, o, r) {
-  const g = l("v-card-text"), y = l("v-spacer"), C = l("v-card-actions"), b = l("v-card"), h = l("v-dialog");
-  return a(), $(h, {
+}), E = { class: "close-btn" };
+function F(e, t, o, s, n, i) {
+  const u = r("v-btn"), g = r("v-card-text"), h = r("v-spacer"), C = r("v-card-actions"), k = r("v-card"), L = r("v-dialog");
+  return a(), p(L, {
     "model-value": e.value,
     "max-width": "960",
     persistent: e.persistent,
     fullscreen: e.$vuetify.display.smAndDown,
-    "onUpdate:modelValue": t[0] || (t[0] = (q) => e.$emit("close"))
+    class: "ff-dialog",
+    "onUpdate:modelValue": t[1] || (t[1] = (z) => e.$emit("close"))
   }, {
-    default: c(() => [
-      i(e.$slots, "card", {}, () => [
-        p(b, { title: e.title }, {
-          default: c(() => [
-            p(g, null, {
-              default: c(() => [
-                i(e.$slots, "default")
+    default: l(() => [
+      c(e.$slots, "card", {}, () => [
+        _(k, { title: e.title }, {
+          append: l(() => [
+            v("div", E, [
+              _(u, {
+                variant: "text",
+                icon: e.mdiClose(),
+                onClick: t[0] || (t[0] = (z) => e.$emit("close"))
+              }, null, 8, ["icon"])
+            ])
+          ]),
+          default: l(() => [
+            _(g, null, {
+              default: l(() => [
+                c(e.$slots, "default")
               ]),
               _: 3
             }),
-            e.noFooter ? v("", !0) : (a(), $(C, { key: 0 }, {
-              default: c(() => [
-                i(e.$slots, "left-footer"),
-                p(y),
-                i(e.$slots, "footer")
+            e.noFooter ? y("", !0) : (a(), p(C, { key: 0 }, {
+              default: l(() => [
+                c(e.$slots, "left-footer"),
+                _(h),
+                c(e.$slots, "footer")
               ]),
               _: 3
             }))
@@ -99,18 +116,83 @@ function V(e, t, n, s, o, r) {
     _: 3
   }, 8, ["model-value", "persistent", "fullscreen"]);
 }
-const F = /* @__PURE__ */ _(R, [["render", V]]), A = (e) => e ? e.replace(/(?:\r\n|\r|\n)/g, "<br>") : "", O = (e) => {
+const W = /* @__PURE__ */ f(R, [["render", F]]), I = m({
+  name: "AccountAvatar",
+  props: {
+    item: {
+      type: Object,
+      required: !0
+    },
+    size: {
+      type: Number,
+      default: 32
+    }
+  }
+});
+function O(e, t, o, s, n, i) {
+  const u = r("v-avatar");
+  return a(), p(u, {
+    class: b(`ff-avatar avatar-${e.size}-${e.item.initials.length >= 3 ? "l" : "s"}`),
+    size: e.size
+  }, {
+    default: l(() => [
+      N(d(e.item.initials), 1)
+    ]),
+    _: 1
+  }, 8, ["class", "size"]);
+}
+const X = /* @__PURE__ */ f(I, [["render", O]]), M = (e) => e.surname ? `${e.name} ${e.surname}` : e.name, Z = m({
+  name: "UserAvatar",
+  props: {
+    user: {
+      type: Object,
+      required: !0
+    },
+    size: {
+      type: Number,
+      required: !0
+    },
+    baseUrl: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    return { fullName: S(() => M(e.user)) };
+  }
+}), G = { key: 1 };
+function H(e, t, o, s, n, i) {
+  const u = r("v-img"), g = r("v-avatar");
+  return a(), p(g, {
+    color: e.user.avatar_thumb ? "light_grey_bg" : e.user.color ?? "primary",
+    class: b(`avatar-${e.size}-${e.user.initials.length >= 3 ? "l" : "s"}`),
+    size: e.size
+  }, {
+    default: l(() => [
+      e.user.avatar_thumb ? (a(), p(u, {
+        key: 0,
+        alt: e.fullName,
+        src: `${e.baseUrl}/${e.user.avatar_thumb}`
+      }, null, 8, ["alt", "src"])) : (a(), $("span", G, d(e.user.initials), 1))
+    ]),
+    _: 1
+  }, 8, ["color", "class", "size"]);
+}
+const Y = /* @__PURE__ */ f(Z, [["render", H]]), j = (e) => e ? e.replace(/(?:\r\n|\r|\n)/g, "<br>") : "", x = (e) => {
   let t = document.cookie.match(new RegExp("(^|;\\s*)(" + e + ")=([^;]*)"));
   return t ? decodeURIComponent(t[3]) : null;
-}, j = (e, t, n, s) => {
-  let o, r;
-  return s == null && (s = "/"), r = "", n && (o = /* @__PURE__ */ new Date(), o.setTime(o.getTime() + n * 24 * 60 * 60 * 1e3), r = "; expires=" + o.toUTCString()), document.cookie = encodeURIComponent(e) + "=" + encodeURIComponent(t) + r + "; path=" + s, !0;
+}, ee = (e, t, o, s) => {
+  let n, i;
+  return s == null && (s = "/"), i = "", o && (n = /* @__PURE__ */ new Date(), n.setTime(n.getTime() + o * 24 * 60 * 60 * 1e3), i = "; expires=" + n.toUTCString()), document.cookie = encodeURIComponent(e) + "=" + encodeURIComponent(t) + i + "; path=" + s, !0;
 };
 export {
-  F as CustomDialog,
-  N as PageSubtitle,
-  I as PageTitle,
-  O as getCookie,
-  A as nl2br,
-  j as setCookie
+  X as AccountAvatar,
+  W as CustomDialog,
+  Q as PageSubtitle,
+  K as PageTitle,
+  Y as UserAvatar,
+  M as formatFullName,
+  x as getCookie,
+  j as nl2br,
+  ee as setCookie
 };

package/dist/alytus-ff.umd.cjs

@@ -1 +1 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o["Alytus FF"]={},o.Vue))})(this,function(o,e){"use strict";const d=e.defineComponent({name:"PageTitle",props:{title:{type:String,required:!0},description:{type:String,default:null}}}),c=(t,n)=>{const l=t.__vccOpts||t;for(const[s,r]of n)l[s]=r;return l},a={class:"mt-6 mb-3 ff-page-title"},p={class:"text-h5 ff-title"},m={key:0,class:"text-body-2 ff-description"};function f(t,n,l,s,r,i){return e.openBlock(),e.createElementBlock("div",a,[e.createElementVNode("div",null,[e.createElementVNode("span",p,e.toDisplayString(t.title),1),t.description?(e.openBlock(),e.createElementBlock("div",m,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",null,[e.renderSlot(t.$slots,"buttons")])])}const u=c(d,[["render",f]]),_=e.defineComponent({name:"PageSubtitle",props:{subtitle:{type:String,required:!0}}}),g={class:"text-h6 font-weight-bold mt-7 mb-4"};function C(t,n,l,s,r,i){return e.openBlock(),e.createElementBlock("div",g,e.toDisplayString(t.subtitle),1)}const $=c(_,[["render",C]]),y=e.defineComponent({name:"CustomDialog",props:{value:{type:Boolean,required:!0},title:{type:String,default:null},persistent:{type:Boolean,default:!1},noFooter:{type:Boolean,default:!1}}});function k(t,n,l,s,r,i){const V=e.resolveComponent("v-card-text"),w=e.resolveComponent("v-spacer"),T=e.resolveComponent("v-card-actions"),D=e.resolveComponent("v-card"),N=e.resolveComponent("v-dialog");return e.openBlock(),e.createBlock(N,{"model-value":t.value,"max-width":"960",persistent:t.persistent,fullscreen:t.$vuetify.display.smAndDown,"onUpdate:modelValue":n[0]||(n[0]=E=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"card",{},()=>[e.createVNode(D,{title:t.title},{default:e.withCtx(()=>[e.createVNode(V,null,{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3}),t.noFooter?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(T,{key:0},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"left-footer"),e.createVNode(w),e.renderSlot(t.$slots,"footer")]),_:3}))]),_:3},8,["title"])])]),_:3},8,["model-value","persistent","fullscreen"])}const S=c(y,[["render",k]]),h=t=>t?t.replace(/(?:\r\n|\r|\n)/g,"<br>"):"",b=t=>{let n=document.cookie.match(new RegExp("(^|;\\s*)("+t+")=([^;]*)"));return n?decodeURIComponent(n[3]):null},B=(t,n,l,s)=>{let r,i;return s==null&&(s="/"),i="",l&&(r=new Date,r.setTime(r.getTime()+l*24*60*60*1e3),i="; expires="+r.toUTCString()),document.cookie=encodeURIComponent(t)+"="+encodeURIComponent(n)+i+"; path="+s,!0};o.CustomDialog=S,o.PageSubtitle=$,o.PageTitle=u,o.getCookie=b,o.nl2br=h,o.setCookie=B,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["Alytus FF"]={},n.Vue))})(this,function(n,e){"use strict";const m=e.defineComponent({name:"PageTitle",props:{title:{type:String,required:!0},description:{type:String,default:null}}}),i=(t,o)=>{const s=t.__vccOpts||t;for(const[a,r]of o)s[a]=r;return s},f={class:"mt-6 mb-3 ff-page-title"},u={class:"text-h5 ff-title"},_={key:0,class:"text-body-2 ff-description"};function $(t,o,s,a,r,l){return e.openBlock(),e.createElementBlock("div",f,[e.createElementVNode("div",null,[e.createElementVNode("span",u,e.toDisplayString(t.title),1),t.description?(e.openBlock(),e.createElementBlock("div",_,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",null,[e.renderSlot(t.$slots,"buttons")])])}const C=i(m,[["render",$]]),g=e.defineComponent({name:"PageSubtitle",props:{subtitle:{type:String,required:!0}}}),y={class:"text-h6 font-weight-bold mt-7 mb-4"};function k(t,o,s,a,r,l){return e.openBlock(),e.createElementBlock("div",y,e.toDisplayString(t.subtitle),1)}const h=i(g,[["render",k]]);var b="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";const B=e.defineComponent({name:"CustomDialog",methods:{mdiClose(){return b}},props:{value:{type:Boolean,required:!0},title:{type:String,default:null},persistent:{type:Boolean,default:!1},noFooter:{type:Boolean,default:!1}}}),S={class:"close-btn"};function N(t,o,s,a,r,l){const c=e.resolveComponent("v-btn"),d=e.resolveComponent("v-card-text"),F=e.resolveComponent("v-spacer"),O=e.resolveComponent("v-card-actions"),R=e.resolveComponent("v-card"),I=e.resolveComponent("v-dialog");return e.openBlock(),e.createBlock(I,{"model-value":t.value,"max-width":"960",persistent:t.persistent,fullscreen:t.$vuetify.display.smAndDown,class:"ff-dialog","onUpdate:modelValue":o[1]||(o[1]=M=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"card",{},()=>[e.createVNode(R,{title:t.title},{append:e.withCtx(()=>[e.createElementVNode("div",S,[e.createVNode(c,{variant:"text",icon:t.mdiClose(),onClick:o[0]||(o[0]=M=>t.$emit("close"))},null,8,["icon"])])]),default:e.withCtx(()=>[e.createVNode(d,null,{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3}),t.noFooter?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(O,{key:0},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"left-footer"),e.createVNode(F),e.renderSlot(t.$slots,"footer")]),_:3}))]),_:3},8,["title"])])]),_:3},8,["model-value","persistent","fullscreen"])}const V=i(B,[["render",N]]),w=e.defineComponent({name:"AccountAvatar",props:{item:{type:Object,required:!0},size:{type:Number,default:32}}});function z(t,o,s,a,r,l){const c=e.resolveComponent("v-avatar");return e.openBlock(),e.createBlock(c,{class:e.normalizeClass(`ff-avatar avatar-${t.size}-${t.item.initials.length>=3?"l":"s"}`),size:t.size},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.item.initials),1)]),_:1},8,["class","size"])}const L=i(w,[["render",z]]),p=t=>t.surname?`${t.name} ${t.surname}`:t.name,A=e.defineComponent({name:"UserAvatar",props:{user:{type:Object,required:!0},size:{type:Number,required:!0},baseUrl:{type:String,required:!0}},setup(t){return{fullName:e.computed(()=>p(t.user))}}}),D={key:1};function T(t,o,s,a,r,l){const c=e.resolveComponent("v-img"),d=e.resolveComponent("v-avatar");return e.openBlock(),e.createBlock(d,{color:t.user.avatar_thumb?"light_grey_bg":t.user.color??"primary",class:e.normalizeClass(`avatar-${t.size}-${t.user.initials.length>=3?"l":"s"}`),size:t.size},{default:e.withCtx(()=>[t.user.avatar_thumb?(e.openBlock(),e.createBlock(c,{key:0,alt:t.fullName,src:`${t.baseUrl}/${t.user.avatar_thumb}`},null,8,["alt","src"])):(e.openBlock(),e.createElementBlock("span",D,e.toDisplayString(t.user.initials),1))]),_:1},8,["color","class","size"])}const U=i(A,[["render",T]]),E=t=>t?t.replace(/(?:\r\n|\r|\n)/g,"<br>"):"",q=t=>{let o=document.cookie.match(new RegExp("(^|;\\s*)("+t+")=([^;]*)"));return o?decodeURIComponent(o[3]):null},P=(t,o,s,a)=>{let r,l;return a==null&&(a="/"),l="",s&&(r=new Date,r.setTime(r.getTime()+s*24*60*60*1e3),l="; expires="+r.toUTCString()),document.cookie=encodeURIComponent(t)+"="+encodeURIComponent(o)+l+"; path="+a,!0};n.AccountAvatar=L,n.CustomDialog=V,n.PageSubtitle=h,n.PageTitle=C,n.UserAvatar=U,n.formatFullName=p,n.getCookie=q,n.nl2br=E,n.setCookie=P,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/dist/components/Avatar/AccountAvatar.vue.d.ts

@@ -0,0 +1,24 @@
+import { PropType } from 'vue';
+import { IAccount } from '../../types/Account.ts';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    item: {
+        type: PropType<IAccount>;
+        required: true;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    item: {
+        type: PropType<IAccount>;
+        required: true;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    size: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Avatar/UserAvatar.vue.d.ts

@@ -0,0 +1,32 @@
+import { PropType } from 'vue';
+import { IUser } from '../../types/User.ts';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    user: {
+        type: PropType<IUser>;
+        required: true;
+    };
+    size: {
+        type: NumberConstructor;
+        required: true;
+    };
+    baseUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {
+    fullName: import('vue').ComputedRef<string>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    user: {
+        type: PropType<IUser>;
+        required: true;
+    };
+    size: {
+        type: NumberConstructor;
+        required: true;
+    };
+    baseUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Dialog/CustomDialog.vue.d.ts

@@ -15,7 +15,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {
+    mdiClose(): string;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     value: {
         type: BooleanConstructor;
         required: true;

package/dist/index.d.ts

@@ -1,7 +1,12 @@
 import { default as PageTitle } from './components/Page/PageTitle.vue';
 import { default as PageSubtitle } from './components/Page/PageSubtitle.vue';
 import { default as CustomDialog } from './components/Dialog/CustomDialog.vue';
+import { default as AccountAvatar } from './components/Avatar/AccountAvatar.vue';
+import { default as UserAvatar } from './components/Avatar/UserAvatar.vue';
 import { nl2br } from './utils/HtmlUtil.ts';
 import { getCookie, setCookie } from './utils/CookieUtil.ts';
+import { formatFullName } from './utils/StringUtil.ts';
 import { NameValuePair } from './types/Base.ts';
-export { PageTitle, PageSubtitle, CustomDialog, nl2br, getCookie, setCookie, NameValuePair };
+import { IAccount } from './types/Account.ts';
+import { IUser } from './types/User.ts';
+export { PageTitle, PageSubtitle, CustomDialog, AccountAvatar, UserAvatar, nl2br, getCookie, setCookie, formatFullName, NameValuePair, IAccount, IUser };

package/dist/style.css

@@ -1 +1 @@
-.ff-page-title,.ff-page-subtitle{display:flex;justify-content:space-between;align-items:center}.ff-page-title .v-btn,.ff-page-subtitle .v-btn{text-transform:unset;letter-spacing:.045em}
+.ff-page-title,.ff-page-subtitle{display:flex;justify-content:space-between;align-items:center}.ff-page-title .v-btn,.ff-page-subtitle .v-btn{text-transform:unset;letter-spacing:.045em}.ff-dialog.v-dialog .close-btn{margin-right:-4px}@media screen and (min-width: 600px){.ff-dialog.v-dialog .close-btn{margin-right:-12px}}.ff-dialog.v-dialog>.v-overlay__content>.v-card>.v-card-item{padding-left:16px;padding-right:16px}@media screen and (min-width: 600px){.ff-dialog.v-dialog>.v-overlay__content>.v-card>.v-card-item{padding-left:24px;padding-right:24px}}@media screen and (min-width: 960px){.ff-dialog.v-dialog>.v-overlay__content>.v-card>.v-card-item{padding-left:36px;padding-right:36px}}.ff-dialog.v-dialog>.v-overlay__content>.v-card>.v-card-text{padding-left:16px;padding-right:16px}@media screen and (min-width: 600px){.ff-dialog.v-dialog>.v-overlay__content>.v-card>.v-card-text{padding-left:24px;padding-right:24px}}@media screen and (min-width: 960px){.ff-dialog.v-dialog>.v-overlay__content>.v-card>.v-card-text{padding-left:36px;padding-right:36px}}.ff-dialog.v-dialog>.v-overlay__content>.v-card>.v-card-actions{padding:12px 16px 16px}@media screen and (min-width: 600px){.ff-dialog.v-dialog>.v-overlay__content>.v-card>.v-card-actions{padding-left:24px;padding-right:24px}}@media screen and (min-width: 960px){.ff-dialog.v-dialog>.v-overlay__content>.v-card>.v-card-actions{padding-left:36px;padding-right:36px}}.ff-avatar{background:linear-gradient(180deg,#3c3c3c,#4f4f4f 25%,#787878)!important;color:#fff!important}.avatar-96-s{font-size:32px!important;font-weight:500!important}.avatar-96-l{font-size:26px!important;font-weight:500!important}.avatar-32-s{font-size:14px!important;font-weight:500!important;line-height:normal!important;letter-spacing:1px}.avatar-32-l{font-size:11px!important;font-weight:500!important;line-height:normal!important;letter-spacing:1px}

package/dist/types/Account.d.ts

@@ -0,0 +1,5 @@
+export interface IAccount {
+    name: string;
+    surname: string | null;
+    initials: string;
+}

package/dist/types/User.d.ts

@@ -0,0 +1,7 @@
+export interface IUser {
+    name: string;
+    surname: string | null;
+    initials: string;
+    color: string;
+    avatar_thumb: string | null;
+}

package/dist/utils/StringUtil.d.ts

@@ -0,0 +1,4 @@
+export declare const formatFullName: (obj: {
+    name: string;
+    surname: string | null;
+}) => string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "alytus-ff",
   "private": false,
-  "version": "0.1.19",
+  "version": "0.1.20",
   "type": "module",
   "files": [
     "dist",

package/src/components/Avatar/AccountAvatar.vue

@@ -0,0 +1,22 @@
+<template>
+    <v-avatar :class="`ff-avatar avatar-${size}-${item.initials.length >= 3 ? 'l' : 's'}`" :size="size">{{ item.initials }}</v-avatar>
+</template>
+
+<script lang="ts">
+import {defineComponent, type PropType} from "vue"
+import {IAccount} from "../../types/Account.ts"
+
+export default defineComponent({
+    name: "AccountAvatar",
+    props: {
+        item: {
+            type: Object as PropType<IAccount>,
+            required: true
+        },
+        size: {
+            type: Number,
+            default: 32
+        }
+    }
+})
+</script>

package/src/components/Avatar/UserAvatar.vue

@@ -0,0 +1,38 @@
+<template>
+    <v-avatar
+        :color="user.avatar_thumb ? 'light_grey_bg' : (user.color ?? 'primary')"
+        :class="`avatar-${size}-${user.initials.length >= 3 ? 'l' : 's'}`"
+        :size="size"
+    >
+        <v-img v-if="user.avatar_thumb" :alt="fullName" :src="`${baseUrl}/${user.avatar_thumb}`" />
+        <span v-else>{{user.initials}}</span>
+    </v-avatar>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, type PropType} from "vue"
+import {IUser} from "../../types/User.ts"
+import {formatFullName} from "../../utils/StringUtil.ts";
+
+export default defineComponent({
+    name: "UserAvatar",
+    props: {
+        user: {
+            type: Object as PropType<IUser>,
+            required: true
+        },
+        size: {
+            type: Number,
+            required: true
+        },
+        baseUrl: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props) {
+        const fullName = computed(() => formatFullName(props.user))
+        return {fullName}
+    }
+})
+</script>

package/src/components/Dialog/CustomDialog.vue

@@ -1,7 +1,12 @@
 <template>
-    <v-dialog :model-value="value" max-width="960" :persistent="persistent" :fullscreen="$vuetify.display.smAndDown" @update:modelValue="$emit('close')">
+    <v-dialog :model-value="value" max-width="960" :persistent="persistent" :fullscreen="$vuetify.display.smAndDown" class="ff-dialog" @update:modelValue="$emit('close')">
         <slot name="card">
             <v-card :title="title">
+                <template v-slot:append>
+                    <div class="close-btn">
+                        <v-btn variant="text" :icon="mdiClose()" @click="$emit('close')" />
+                    </div>
+                </template>
                 <v-card-text>
                     <slot></slot>
                 </v-card-text>
@@ -17,9 +22,15 @@
 
 <script lang="ts">
 import {defineComponent} from "vue";
+import {mdiClose} from "@mdi/js";
 
 export default defineComponent({
     name: "CustomDialog",
+    methods: {
+        mdiClose() {
+            return mdiClose
+        }
+    },
     props: {
         value: {
             type: Boolean,