jky-component-lib 0.0.35 → 0.0.37

package/dist/es/package.json.js

@@ -1,4 +1,4 @@
-const version = "0.0.35";
+const version = "0.0.37";
 export {
   version
 };

package/dist/es/page-header/PageHeader.vue.d.ts

@@ -1,19 +1,4 @@
-type __VLS_Props = {
-    logo?: string;
-    title?: string;
-    height?: string | number;
-    background?: string;
-    backgroundImage?: string;
-    statusIcons?: StatusIcon[];
-    userName?: string;
-    userAvatar?: string;
-};
-interface StatusIcon {
-    icon: string | object;
-    label: string;
-    color?: string;
-    onClick?: () => void;
-}
+import { PageHeaderProps } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -25,17 +10,16 @@ declare function __VLS_template(): {
     rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare const __VLS_component: import('vue').DefineComponent<PageHeaderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    command: (command: string) => any;
     logout: () => any;
-    clearCache: () => any;
-    profile: () => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<PageHeaderProps> & Readonly<{
+    onCommand?: ((command: string) => any) | undefined;
     onLogout?: (() => any) | undefined;
-    onClearCache?: (() => any) | undefined;
-    onProfile?: (() => any) | undefined;
 }>, {
     height: string | number;
-    statusIcons: StatusIcon[];
+    statusIcons: import('./types').PageHeaderStatusIcon[];
+    userDropdownItems: import('./types').PageHeaderUserDropdonItem[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/es/page-header/PageHeader.vue.js

@@ -17,8 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, toDisplayString, renderSlot, Fragment, renderList, normalizeClass, createBlock, unref, withCtx, resolveDynamicComponent, createVNode, createTextVNode } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, unref, createElementVNode, createBlock, normalizeProps, mergeProps, createCommentVNode, toDisplayString, renderSlot, Fragment, renderList, normalizeClass, withCtx, resolveDynamicComponent, createVNode, createTextVNode } from "vue";
 import { ElIcon, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
+import _sfc_main$1 from "./PopoverMenu.vue.js";
 const _hoisted_1 = { class: "jky-page-header__container" };
 const _hoisted_2 = { class: "jky-page-header__left" };
 const _hoisted_3 = ["src", "alt"];
@@ -41,7 +42,7 @@ const _hoisted_10 = { class: "jky-page-header__user" };
 const _hoisted_11 = ["src", "alt"];
 const _hoisted_12 = {
   key: 0,
-  class: "jky-page-header__username hidden md:block"
+  class: "jky-page-header__username text-base hidden md:block"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyPageHeader"
@@ -55,12 +56,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     backgroundImage: {},
     statusIcons: { default: () => [] },
     userName: {},
-    userAvatar: {}
+    userAvatar: {},
+    popover: {},
+    showMore: { type: Boolean },
+    showPopover: { type: Boolean },
+    showLogout: { type: Boolean },
+    userDropdownItems: { default: () => [
+      { label: "个人信息", value: "profile", icon: "icon-[heroicons--user]" },
+      { label: "清理缓存", value: "clear", icon: "icon-[heroicons--trash]" },
+      { label: "注销", value: "logout", icon: "icon-[heroicons--arrow-right-on-rectangle]" }
+    ] }
   },
-  emits: ["logout", "clearCache", "profile"],
+  emits: ["logout", "command"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    function handleCommand(command) {
+      emit("command", command);
+    }
     const heightValue = computed(() => {
       if (typeof props.height === "number") {
         return `${props.height}px`;
@@ -79,21 +92,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       }
       return style;
     });
-    function handleLogout() {
-      emit("logout");
-    }
-    function handleClearCache() {
-      emit("clearCache");
-    }
-    function handleProfile() {
-      emit("profile");
-    }
     return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
       return openBlock(), createElementBlock("header", {
         class: "jky-page-header",
-        style: normalizeStyle([backgroundStyle.value, { height: heightValue.value }])
+        style: normalizeStyle([unref(backgroundStyle), { height: unref(heightValue) }])
       }, [
         createElementVNode("div", _hoisted_1, [
+          __props.showPopover && ((_b = (_a = __props.popover) == null ? void 0 : _a.menus) == null ? void 0 : _b.length) ? (openBlock(), createBlock(_sfc_main$1, normalizeProps(mergeProps({ key: 0 }, __props.popover)), null, 16)) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2, [
             __props.logo ? (openBlock(), createElementBlock("img", {
               key: 0,
@@ -171,7 +177,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                   class: "jky-page-header__status-icon text-white"
                 }, {
                   default: withCtx(() => [
-                    (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[0] || (_cache[0] = [
+                    (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[1] || (_cache[1] = [
                       createElementVNode("path", {
                         "stroke-linecap": "round",
                         "stroke-linejoin": "round",
@@ -190,34 +196,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                 createElementVNode("span", null, toDisplayString((/* @__PURE__ */ new Date()).toLocaleString("zh-CN")), 1)
               ])
             ]),
-            createVNode(unref(ElDropdown), { trigger: "click" }, {
+            __props.showMore && ((_d = (_c = __props.popover) == null ? void 0 : _c.menus) == null ? void 0 : _d.length) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+              key: 1,
+              "ref-name": "更多",
+              "ref-icon-class": "icon-[mdi--format-list-bulleted]"
+            }, __props.popover), null, 16)) : createCommentVNode("", true),
+            createVNode(unref(ElDropdown), {
+              trigger: "hover",
+              onCommand: handleCommand
+            }, {
               dropdown: withCtx(() => [
                 createVNode(unref(ElDropdownMenu), null, {
                   default: withCtx(() => [
-                    createVNode(unref(ElDropdownItem), { onClick: handleProfile }, {
-                      default: withCtx(() => [..._cache[2] || (_cache[2] = [
-                        createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1),
-                        createTextVNode(" 个人信息 ", -1)
-                      ])]),
-                      _: 1
-                    }),
-                    createVNode(unref(ElDropdownItem), { onClick: handleClearCache }, {
-                      default: withCtx(() => [..._cache[3] || (_cache[3] = [
-                        createElementVNode("span", { class: "icon-[heroicons--trash]" }, null, -1),
-                        createTextVNode(" 清理缓存 ", -1)
-                      ])]),
-                      _: 1
-                    }),
-                    createVNode(unref(ElDropdownItem), {
-                      divided: "",
-                      onClick: handleLogout
-                    }, {
-                      default: withCtx(() => [..._cache[4] || (_cache[4] = [
-                        createElementVNode("span", { class: "icon-[heroicons--arrow-right-on-rectangle]" }, null, -1),
-                        createTextVNode(" 注销 ", -1)
-                      ])]),
-                      _: 1
-                    })
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(__props.userDropdownItems, (item) => {
+                      return openBlock(), createBlock(unref(ElDropdownItem), {
+                        key: item.value,
+                        command: item.value,
+                        disabled: item.disabled,
+                        divided: item.divided
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode("span", {
+                            class: normalizeClass(["mr-2", item.icon])
+                          }, null, 2),
+                          createTextVNode(" " + toDisplayString(item.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["command", "disabled", "divided"]);
+                    }), 128))
                   ]),
                   _: 1
                 })
@@ -243,7 +249,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                       size: 24,
                       class: "jky-page-header__avatar"
                     }, {
-                      default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                      default: withCtx(() => [..._cache[2] || (_cache[2] = [
                         createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1)
                       ])]),
                       _: 1
@@ -253,7 +259,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                 ])
               ]),
               _: 3
-            })
+            }),
+            __props.showLogout ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: "jky-page-header__logout h-full flex items-center text-white",
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("logout"))
+            }, [..._cache[3] || (_cache[3] = [
+              createElementVNode("span", { class: "icon-[ri--logout-circle-line] mr-2" }, null, -1),
+              createElementVNode("span", null, "退出登录", -1)
+            ])])) : createCommentVNode("", true)
           ])
         ])
       ], 4);

package/dist/es/page-header/PopoverMenu.vue.d.ts

@@ -0,0 +1,11 @@
+import { TooltipTriggerType } from 'element-plus';
+import { Arrayable } from 'element-plus/es/utils';
+import { PageHeaderPopoverMenuProps } from './types';
+declare const _default: import('vue').DefineComponent<PageHeaderPopoverMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PageHeaderPopoverMenuProps> & Readonly<{}>, {
+    trigger: Arrayable<TooltipTriggerType>;
+    menus: PopoverMenuItem[];
+    buttonClass: string;
+    width: number;
+    highlightCurrent: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/es/page-header/PopoverMenu.vue.js

@@ -0,0 +1,89 @@
+import { defineComponent, ref, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, normalizeClass, createCommentVNode, toDisplayString } from "vue";
+import { ElPopover, ElButton } from "element-plus";
+const _hoisted_1 = {
+  key: 0,
+  class: "jky-page-header__popover mr-2 h-full flex items-center text-white"
+};
+const _hoisted_2 = { class: "flex items-center" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-white ml-2"
+};
+const _hoisted_4 = { class: "grid grid-cols-3 gap-2 p-2" };
+const _hoisted_5 = { class: "text-sm text-center" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PopoverMenu",
+  props: {
+    refIconClass: {},
+    refName: {},
+    menus: { default: () => [] },
+    buttonClass: { default: "w-20 h-20" },
+    elButtonClass: {},
+    elButtonType: {},
+    width: { default: 400 },
+    trigger: { default: "click" },
+    highlightCurrent: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const popoverIndex = ref("");
+    function onPopoverButtonClick(item) {
+      var _a;
+      if (props.highlightCurrent) {
+        popoverIndex.value = item.value;
+      }
+      (_a = item.onClick) == null ? void 0 : _a.call(item);
+    }
+    return (_ctx, _cache) => {
+      var _a;
+      return ((_a = __props.menus) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(ElPopover), {
+          title: "菜单",
+          placement: "bottom-start",
+          class: "h-full",
+          trigger: __props.trigger,
+          width: __props.width
+        }, {
+          reference: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("span", {
+                class: normalizeClass(["icon-[ant-design--menu-fold-outlined] text-[white] text-2xl cursor-pointer hover:opacity-80", __props.refIconClass])
+              }, null, 2),
+              __props.refName ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.refName), 1)) : createCommentVNode("", true)
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_4, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menus, (item) => {
+                return openBlock(), createBlock(unref(ElButton), {
+                  key: item.value,
+                  disabled: item.disabled,
+                  class: normalizeClass(["w-fit! h-fit! ml-0!", [__props.elButtonClass, item.elButtonClass]]),
+                  type: unref(popoverIndex) === item.value ? "primary" : __props.elButtonType || "default",
+                  onClick: ($event) => onPopoverButtonClick(item)
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", {
+                      class: normalizeClass(["jky-page-header__popover-inner flex flex-col justify-around items-center", __props.buttonClass])
+                    }, [
+                      item.icon ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: normalizeClass(["text-xl mr-2", [item.icon]])
+                      }, null, 2)) : createCommentVNode("", true),
+                      createElementVNode("span", _hoisted_5, toDisplayString(item.label), 1)
+                    ], 2)
+                  ]),
+                  _: 2
+                }, 1032, ["disabled", "class", "type", "onClick"]);
+              }), 128))
+            ])
+          ]),
+          _: 1
+        }, 8, ["trigger", "width"])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/page-header/PopoverMenu.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./PopoverMenu.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/es/page-header/style.css

@@ -22,7 +22,7 @@
   --jky-page-header-title-size-mobile: 16px;
   --jky-page-header-title-weight: 600;
   --jky-page-header-text-color: rgba(255, 255, 255, 0.85);
-  --jky-page-header-text-size: 14px;
+  --jky-page-header-text-size: 16px;
   
   /* 图标 */
   --jky-page-header-icon-color: #ffffff;
@@ -123,6 +123,10 @@ img {
   color: var(--jky-page-header-text-color);
   white-space: nowrap;
 }
+.jky-page-header__logout {
+  font-size: var(--jky-page-header-text-size);
+  color: var(--jky-page-header-text-color);
+}
 /* 响应式设计 */
 @media (max-width: 768px) {
 .jky-page-header__container {

package/dist/es/style.css

@@ -31,8 +31,14 @@
     --spacing: .25rem;
     --text-sm: .875rem;
     --text-sm--line-height: calc(1.25 / .875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-semibold: 600;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@@ -323,10 +329,34 @@
     margin-bottom: calc(var(--spacing) * 4);
   }
 
+  .ml-0\! {
+    margin-left: calc(var(--spacing) * 0) !important;
+  }
+
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
 
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+
+  .icon-\[ant-design--menu-fold-outlined\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='1024' height='1024'%3E%3Cpath fill='black' d='M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8m-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8m0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8M115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .icon-\[carbon--arrow-right\] {
     width: 1em;
     height: 1em;
@@ -487,6 +517,22 @@
     mask-repeat: no-repeat;
   }
 
+  .icon-\[heroicons--chart-bar\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .icon-\[heroicons--check\] {
     width: 1em;
     height: 1em;
@@ -503,6 +549,22 @@
     mask-repeat: no-repeat;
   }
 
+  .icon-\[heroicons--cog-6-tooth\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87q.11.06.22.127c.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a8 8 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a7 7 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a7 7 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a7 7 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124q.108-.066.22-.128c.332-.183.582-.495.644-.869z'/%3E%3Cpath d='M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0'/%3E%3C/g%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .icon-\[heroicons--cog\] {
     width: 1em;
     height: 1em;
@@ -535,6 +597,22 @@
     mask-repeat: no-repeat;
   }
 
+  .icon-\[heroicons--document-text\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .icon-\[heroicons--ellipsis-horizontal\] {
     width: 1em;
     height: 1em;
@@ -583,6 +661,22 @@
     mask-repeat: no-repeat;
   }
 
+  .icon-\[heroicons--key\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .icon-\[heroicons--share\] {
     width: 1em;
     height: 1em;
@@ -663,6 +757,22 @@
     mask-repeat: no-repeat;
   }
 
+  .icon-\[heroicons--users\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15 19.128a9.4 9.4 0 0 0 2.625.372a9.3 9.3 0 0 0 4.121-.952q.004-.086.004-.173a4.125 4.125 0 0 0-7.536-2.32M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.3 12.3 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0a3.375 3.375 0 0 1 6.75 0m8.25 2.25a2.625 2.625 0 1 1-5.25 0a2.625 2.625 0 0 1 5.25 0'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .icon-\[mdi--account\] {
     width: 1em;
     height: 1em;
@@ -679,6 +789,38 @@
     mask-repeat: no-repeat;
   }
 
+  .icon-\[mdi--format-list-bulleted\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 5h14v2H7zm0 8v-2h14v2zM4 4.5A1.5 1.5 0 0 1 5.5 6A1.5 1.5 0 0 1 4 7.5A1.5 1.5 0 0 1 2.5 6A1.5 1.5 0 0 1 4 4.5m0 6A1.5 1.5 0 0 1 5.5 12A1.5 1.5 0 0 1 4 13.5A1.5 1.5 0 0 1 2.5 12A1.5 1.5 0 0 1 4 10.5M7 19v-2h14v2zm-3-2.5A1.5 1.5 0 0 1 5.5 18A1.5 1.5 0 0 1 4 19.5A1.5 1.5 0 0 1 2.5 18A1.5 1.5 0 0 1 4 16.5'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  .icon-\[ri--logout-circle-line\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 11h8v2H5v3l-5-4l5-4zm-1 7h2.708a8 8 0 1 0 0-12H4a9.99 9.99 0 0 1 8-4c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.99 9.99 0 0 1-8-4'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .contents {
     display: contents;
   }
@@ -687,6 +829,10 @@
     display: flex;
   }
 
+  .grid {
+    display: grid;
+  }
+
   .hidden {
     display: none;
   }
@@ -707,6 +853,18 @@
     height: calc(var(--spacing) * 6);
   }
 
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
+
+  .h-fit\! {
+    height: fit-content !important;
+  }
+
+  .h-full {
+    height: 100%;
+  }
+
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -719,6 +877,14 @@
     width: calc(var(--spacing) * 6);
   }
 
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+
+  .w-fit\! {
+    width: fit-content !important;
+  }
+
   .w-full {
     width: 100%;
   }
@@ -731,6 +897,14 @@
     cursor: pointer;
   }
 
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -739,6 +913,10 @@
     align-items: center;
   }
 
+  .justify-around {
+    justify-content: space-around;
+  }
+
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -788,10 +966,28 @@
     background-color: var(--color-red-500) !important;
   }
 
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
 
+  .text-center {
+    text-align: center;
+  }
+
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -802,11 +998,20 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
 
+  .text-\[white\] {
+    color: #fff;
+  }
+
   .text-blue-600 {
     color: var(--color-blue-600);
   }
@@ -846,6 +1051,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  @media (hover: hover) {
+    .hover\:opacity-80:hover {
+      opacity: .8;
+    }
+  }
+
   @media (min-width: 48rem) {
     .md\:block {
       display: block;