pukaad-ui-lib 1.459.0 → 1.460.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.459.0",
+  "version": "1.460.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/card/card-color-post-it.d.vue.ts

@@ -0,0 +1,10 @@
+export interface CardColorPostItProps {
+    color?: string;
+    size?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<CardColorPostItProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardColorPostItProps> & Readonly<{}>, {
+    size: number;
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-color-post-it.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex">
+    <div
+      class="rounded-[4px] shrink-0 flex items-center justify-center"
+      :style="{
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+  backgroundColor: background,
+  color: iconColor
+}"
+    >
+      <Icon name="fa6-solid:message" size="24" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  color: { type: String, required: false, default: "" },
+  size: { type: Number, required: false, default: 40 }
+});
+const DEFAULT_BACKGROUND = "#E6DEFF";
+const DEFAULT_ICON_COLOR = "#8836F1";
+const ICON_COLORS = {
+  "#E6DEFF": "#8836F1",
+  "#C9E8FF": "#1976B8",
+  "#DEFFE1": "#23AA99",
+  "#FFF5C2": "#FFD233",
+  "#FFDDDD": "#F80003",
+  // #FDD
+  "#FFDAC3": "#ED4D2D",
+  "#FFE6F4": "#F50D71"
+};
+const normalizeHex = (hex) => {
+  const value = hex.trim().toUpperCase();
+  if (/^#[0-9A-F]{3}$/.test(value)) {
+    return `#${value.slice(1).split("").map((c) => c + c).join("")}`;
+  }
+  return value;
+};
+const background = computed(() => props.color?.trim() || DEFAULT_BACKGROUND);
+const iconColor = computed(
+  () => ICON_COLORS[normalizeHex(background.value)] ?? DEFAULT_ICON_COLOR
+);
+</script>

package/dist/runtime/components/card/card-color-post-it.vue.d.ts

@@ -0,0 +1,10 @@
+export interface CardColorPostItProps {
+    color?: string;
+    size?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<CardColorPostItProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardColorPostItProps> & Readonly<{}>, {
+    size: number;
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-mention/card-mention.d.vue.ts

@@ -3,6 +3,7 @@ export interface CardMentionItem {
     mentionType: "post" | "blog" | "link";
     title: string;
     contentType?: string;
+    coverColor?: string;
     image?: string | null;
     thumbnail?: string;
     placeName?: string;

package/dist/runtime/components/card/card-mention/card-mention.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="flex gap-[8px] items-center w-full min-w-0 contain-inline-size">
     <template v-if="isPost">
-      <div
+      <CardColorPostIt
         v-if="props.item.contentType === 'post-it'"
-        class="w-[40px] h-[40px] shrink-0 bg-info rounded-sm flex items-center justify-center"
-      >
-        <Icon name="fa6-solid:message" size="24" class="text-primary" />
-      </div>
+        :color="props.item.coverColor"
+        class="shrink-0"
+      />
       <div
         v-else-if="props.item.contentType === 'video'"
         class="relative w-[40px] h-[40px] shrink-0 bg-black/20 rounded-[4px]"
@@ -83,6 +82,7 @@
 
 <script setup>
 import { computed } from "vue";
+import CardColorPostIt from "../card-color-post-it.vue";
 const props = defineProps({
   item: { type: Object, required: true },
   selected: { type: Boolean, required: false, default: false },

package/dist/runtime/components/card/card-mention/card-mention.vue.d.ts

@@ -3,6 +3,7 @@ export interface CardMentionItem {
     mentionType: "post" | "blog" | "link";
     title: string;
     contentType?: string;
+    coverColor?: string;
     image?: string | null;
     thumbnail?: string;
     placeName?: string;

package/dist/runtime/components/chat/chat-conversation-item.d.vue.ts

@@ -27,12 +27,12 @@ declare const __VLS_export: import("vue").DefineComponent<ChatConversationItemPr
     avatar: string | null;
     muted: boolean;
     disabledMenu: boolean;
+    unreadCount: number;
+    pinned: boolean;
     preview: string;
     to: string;
     active: boolean;
     typing: boolean;
-    unreadCount: number;
-    pinned: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/chat/chat-conversation-item.vue.d.ts

@@ -27,12 +27,12 @@ declare const __VLS_export: import("vue").DefineComponent<ChatConversationItemPr
     avatar: string | null;
     muted: boolean;
     disabledMenu: boolean;
+    unreadCount: number;
+    pinned: boolean;
     preview: string;
     to: string;
     active: boolean;
     typing: boolean;
-    unreadCount: number;
-    pinned: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/display/display-video.d.vue.ts

@@ -102,9 +102,9 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     loop: boolean;
     controls: boolean;
     preload: "none" | "metadata" | "auto";
-    playsinline: boolean;
     sources: DisplayVideoSource[];
     tracks: DisplayVideoTrack[];
+    playsinline: boolean;
     disablePictureInPicture: boolean;
     disableRemotePlayback: boolean;
     volume: number;

package/dist/runtime/components/display/display-video.vue.d.ts

@@ -102,9 +102,9 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     loop: boolean;
     controls: boolean;
     preload: "none" | "metadata" | "auto";
-    playsinline: boolean;
     sources: DisplayVideoSource[];
     tracks: DisplayVideoTrack[];
+    playsinline: boolean;
     disablePictureInPicture: boolean;
     disableRemotePlayback: boolean;
     volume: number;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,6 +64,7 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
     responsive: boolean;
     restore: boolean;
@@ -72,7 +73,6 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
     modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,6 +64,7 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
     responsive: boolean;
     restore: boolean;
@@ -72,7 +73,6 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
     modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/input/input-address.d.vue.ts

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     name: string;
     required: boolean;
-    placeholder: string;
     layout: "vertical" | "horizontal";
+    placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;

package/dist/runtime/components/input/input-address.vue.d.ts

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     name: string;
     required: boolean;
-    placeholder: string;
     layout: "vertical" | "horizontal";
+    placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -69,9 +69,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    options: AutocompleteOption[] | string[] | number[];
     labelKey: string;
     placeholder: string;
-    options: AutocompleteOption[] | string[] | number[];
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -69,9 +69,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    options: AutocompleteOption[] | string[] | number[];
     labelKey: string;
     placeholder: string;
-    options: AutocompleteOption[] | string[] | number[];
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/input/input-birth-date.d.vue.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     minAge: number;

package/dist/runtime/components/input/input-birth-date.vue.d.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     minAge: number;

package/dist/runtime/components/input/input-comment.d.vue.ts

@@ -47,10 +47,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     loading: boolean;
     disabled: boolean;
     placeholder: string;
-    cancelText: string;
     autofocus: boolean;
     disabledAvatar: boolean;
     submitText: string;
+    cancelText: string;
     actionsOnFocus: boolean;
     disabledActions: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-comment.vue.d.ts

@@ -47,10 +47,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     loading: boolean;
     disabled: boolean;
     placeholder: string;
-    cancelText: string;
     autofocus: boolean;
     disabledAvatar: boolean;
     submitText: string;
+    cancelText: string;
     actionsOnFocus: boolean;
     disabledActions: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     showTime: boolean;

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -44,9 +44,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    layout: "month-and-year" | "month-only" | "year-only";
     locale: string;
     placeholder: string;
-    layout: "month-and-year" | "month-only" | "year-only";
     disabledErrorMessage: boolean;
     dateFormat: string;
     showTime: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
+    placeholder: string;
     limit: number;
     removable: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
+    placeholder: string;
     limit: number;
     removable: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-mention.d.vue.ts

@@ -9,6 +9,7 @@ export interface MentionItem {
     placeName?: string;
     authorName?: string;
     authorAvatar?: string;
+    coverColor?: string;
 }
 interface InputMentionProps {
     label?: string;

package/dist/runtime/components/input/input-mention.vue

@@ -157,6 +157,7 @@ const mapPost = (raw) => {
     mentionType: "post",
     title: raw.cover_text?.trim() || raw.description?.trim() || "",
     contentType,
+    coverColor: contentType === "post-it" ? raw.cover_color : void 0,
     image: contentType === "image" ? raw.media?.[0]?.url ?? null : null,
     thumbnail: contentType === "video" ? raw.video_poster_url : void 0,
     placeName: raw.places?.[0]?.name || void 0
@@ -272,7 +273,8 @@ const toMentionItem = (card) => ({
   mentionType: card.mentionType,
   placeName: card.placeName,
   authorName: card.author?.name,
-  authorAvatar: card.author?.avatar ?? void 0
+  authorAvatar: card.author?.avatar ?? void 0,
+  coverColor: card.coverColor
 });
 const fromMentionItem = (item) => {
   const mentionType = item.mentionType === "blog" || item.mentionType === "link" ? item.mentionType : "post";
@@ -281,6 +283,7 @@ const fromMentionItem = (item) => {
     mentionType,
     title: item.title,
     contentType: mentionType === "post" ? item.type : void 0,
+    coverColor: item.coverColor,
     image: item.image,
     thumbnail: item.thumnail,
     placeName: item.placeName,

package/dist/runtime/components/input/input-mention.vue.d.ts

@@ -9,6 +9,7 @@ export interface MentionItem {
     placeName?: string;
     authorName?: string;
     authorAvatar?: string;
+    coverColor?: string;
 }
 interface InputMentionProps {
     label?: string;

package/dist/runtime/components/input/input-tag-modal.d.vue.ts

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    options: InputTagModalOption[];
     labelKey: string;
     placeholder: string;
-    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

package/dist/runtime/components/input/input-tag-modal.vue.d.ts

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    options: InputTagModalOption[];
     labelKey: string;
     placeholder: string;
-    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
+    placeholder: string;
     limit: number;
     profileScope: "personal" | "business";
     ignore: string[];

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
+    placeholder: string;
     limit: number;
     profileScope: "personal" | "business";
     ignore: string[];

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/store-chat.d.ts

@@ -121,7 +121,7 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
     startRealtime: () => void;
     stopRealtime: () => void;
     resync: (activeConversationId?: string) => Promise<void>;
-}, "headers" | "conversations" | "unreadFirst" | "hasMoreConversations" | "hasLoadedConversations" | "isLoadingConversations" | "peerLastRead" | "messages" | "hasOlder" | "isLoadingOlder" | "isConnected" | "unreadChatCount">, Pick<{
+}, "headers" | "isConnected" | "conversations" | "unreadFirst" | "hasMoreConversations" | "hasLoadedConversations" | "isLoadingConversations" | "peerLastRead" | "messages" | "hasOlder" | "isLoadingOlder" | "unreadChatCount">, Pick<{
     conversations: import("vue").Ref<{
         id: string;
         profile: {
@@ -365,4 +365,4 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
     startRealtime: () => void;
     stopRealtime: () => void;
     resync: (activeConversationId?: string) => Promise<void>;
-}, "reset" | "setUnreadFirst" | "setMyProfileId" | "fetchConversations" | "fetchConversation" | "fetchLatestMessages" | "fetchOlderMessages" | "sendMessage" | "sendMedia" | "retryMessage" | "markRead" | "isReadByPeer" | "unreadCountOf" | "startUnreadBadge" | "stopUnreadBadge" | "previewOf" | "sendTyping" | "isPeerTyping" | "deleteMessage" | "startRealtime" | "stopRealtime" | "resync">>;
+}, "reset" | "markRead" | "setUnreadFirst" | "setMyProfileId" | "fetchConversations" | "fetchConversation" | "fetchLatestMessages" | "fetchOlderMessages" | "sendMessage" | "sendMedia" | "retryMessage" | "isReadByPeer" | "unreadCountOf" | "startUnreadBadge" | "stopUnreadBadge" | "previewOf" | "sendTyping" | "isPeerTyping" | "deleteMessage" | "startRealtime" | "stopRealtime" | "resync">>;

package/dist/runtime/composables/store-notification.d.ts

@@ -215,4 +215,4 @@ export declare const useNotificationStore: import("pinia").StoreDefinition<"noti
     openDrawer: () => void;
     closeDrawer: () => void;
     toggleDrawer: () => void;
-}, "markRead" | "fetchList" | "loadMore" | "prefetch" | "markAllRead" | "fetchUnreadCount" | "initRealtime" | "closeRealtime" | "setUnreadCount" | "openDrawer" | "closeDrawer" | "toggleDrawer">>;
+}, "fetchList" | "loadMore" | "prefetch" | "markRead" | "markAllRead" | "fetchUnreadCount" | "initRealtime" | "closeRealtime" | "setUnreadCount" | "openDrawer" | "closeDrawer" | "toggleDrawer">>;

package/dist/runtime/composables/useContentCard.js

@@ -3,6 +3,7 @@ export const CONTENT_COVER_COLORS = [
   { hex: "#C9E8FF", name: "blue-info" },
   { hex: "#DEFFE1", name: "green-info" },
   { hex: "#FFF5C2", name: "yellow-info" },
+  { hex: "#FFDAC3", name: "orange-info" },
   { hex: "#FDD", name: "red-info" },
   { hex: "#FFE6F4", name: "pink-info" }
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.459.0",
+  "version": "1.460.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",