pukaad-ui-lib 1.381.0 → 1.382.0

package/dist/module.json

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

package/dist/runtime/components/drawer/drawer-post-content.vue

@@ -81,9 +81,9 @@
               :key="color.name"
               class="w-[40px] h-[40px] cursor-pointer transition-all"
               :class="
-  selectedColor === color.name ? 'p-[4px] bg-white shadow-xl rounded-[4px]' : ''
+  selectedColor === color.hex ? 'p-[4px] bg-white shadow-xl rounded-[4px]' : ''
 "
-              @click="selectedColor = color.name"
+              @click="selectedColor = color.hex"
             >
               <div
                 :style="{ backgroundColor: color.hex }"
@@ -159,22 +159,16 @@ import { ref, computed, watch } from "vue";
 import { useNuxtApp } from "nuxt/app";
 import { useApi } from "../../composables/useApi";
 import { usePresignedUpload } from "../../composables/usePresignedUpload";
+import { CONTENT_COVER_COLORS } from "../../composables/useContentCard";
 const emit = defineEmits(["success", "saveDraft"]);
 const { $toast, $alert } = useNuxtApp();
 const api = useApi();
 const { uploadFiles } = usePresignedUpload();
-const colors = [
-  { hex: "#E6DEFF", name: "purple-info" },
-  { hex: "#C9E8FF", name: "blue-info" },
-  { hex: "#DEFFE1", name: "green-info" },
-  { hex: "#FFF5C2", name: "yellow-info" },
-  { hex: "#FDD", name: "red-info" },
-  { hex: "#FFE6F4", name: "pink-info" }
-];
+const colors = CONTENT_COVER_COLORS;
 const props = defineProps({
   item: { type: Object, required: false, default: () => ({
     coverText: "",
-    coverColor: "purple-info",
+    coverColor: "#E6DEFF",
     coverFiles: [],
     posterFiles: [],
     description: "",
@@ -185,7 +179,7 @@ const props = defineProps({
 });
 const modelValue = defineModel({ type: Boolean });
 const currentId = ref(void 0);
-const selectedColor = ref(colors[0].name);
+const selectedColor = ref(colors[0].hex);
 const coverText = ref("");
 const coverFiles = ref([]);
 const posterFiles = ref([]);
@@ -202,9 +196,6 @@ const drawerTitle = computed(() => isEditMode.value ? "\u0E41\u0E01\u0E49\u0E44\
 const previewLocation = computed(() => selectedPlaces.value[0]?.address);
 const hasCoverText = computed(() => !!coverText.value?.trim());
 const hasCoverFile = computed(() => coverFiles.value.length > 0);
-const selectedColorHex = computed(
-  () => colors.find((c) => c.name === selectedColor.value)?.hex
-);
 const coverFileType = computed(() => {
   const first = coverFiles.value[0];
   if (!first) return null;
@@ -253,7 +244,7 @@ const previewItem = computed(() => {
       id: "preview",
       type: "postIt",
       content: coverText.value,
-      backgroundColor: selectedColorHex.value,
+      backgroundColor: selectedColor.value,
       location: previewLocation.value
     };
   }
@@ -286,7 +277,7 @@ const deleteDraft = async (draftId) => {
 const applyItem = (item) => {
   currentId.value = item.id;
   coverText.value = item.coverText ?? "";
-  selectedColor.value = item.coverColor || colors[0].name;
+  selectedColor.value = item.coverColor || colors[0].hex;
   coverFiles.value = (item.coverFiles ?? []).map((f) => ({ ...f }));
   posterFiles.value = (item.posterFiles ?? []).map((f) => ({ ...f }));
   description.value = item.description ?? "";

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

@@ -64,15 +64,15 @@ 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;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    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,15 +64,15 @@ 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;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    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,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
-    gap: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
+    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -50,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
-    gap: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
+    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-personal-card-id.d.vue.ts

@@ -11,12 +11,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: File | null) => any;
 } & {
-    complete: (file: File) => any;
     remove: () => any;
+    complete: (file: File) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
-    onComplete?: ((file: File) => any) | undefined;
     onRemove?: (() => any) | undefined;
+    onComplete?: ((file: File) => any) | undefined;
 }>, {
     name: string;
     disabledErrorMessage: boolean;

package/dist/runtime/components/input/input-personal-card-id.vue.d.ts

@@ -11,12 +11,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: File | null) => any;
 } & {
-    complete: (file: File) => any;
     remove: () => any;
+    complete: (file: File) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
-    onComplete?: ((file: File) => any) | undefined;
     onRemove?: (() => any) | undefined;
+    onComplete?: ((file: File) => any) | undefined;
 }>, {
     name: string;
     disabledErrorMessage: boolean;

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/useContentCard.d.ts

@@ -0,0 +1,25 @@
+import type { CardContentItem } from "#pukaad-ui/types/components/card/card-content";
+export interface ContentCoverColor {
+    name: string;
+    hex: string;
+}
+export declare const CONTENT_COVER_COLORS: ContentCoverColor[];
+export interface RawContentCard {
+    id: string;
+    content_type: string;
+    cover_text?: string;
+    cover_color?: string;
+    video_poster_url?: string;
+    description?: string;
+    media?: {
+        media_type: string;
+        url: string;
+    }[];
+    places?: {
+        name: string;
+        address: string;
+    }[];
+    is_pinned?: boolean;
+    is_liked?: boolean;
+}
+export declare const mapContentToCard: (raw: RawContentCard) => CardContentItem;

package/dist/runtime/composables/useContentCard.js

@@ -0,0 +1,31 @@
+export const CONTENT_COVER_COLORS = [
+  { hex: "#E6DEFF", name: "purple-info" },
+  { hex: "#C9E8FF", name: "blue-info" },
+  { hex: "#DEFFE1", name: "green-info" },
+  { hex: "#FFF5C2", name: "yellow-info" },
+  { hex: "#FDD", name: "red-info" },
+  { hex: "#FFE6F4", name: "pink-info" }
+];
+export const mapContentToCard = (raw) => {
+  const type = raw.content_type === "post_it" ? "postIt" : raw.content_type;
+  const firstMedia = raw.media?.[0];
+  const place = raw.places?.[0];
+  const item = {
+    id: raw.id,
+    type,
+    location: place?.address || place?.name,
+    pinned: !!raw.is_pinned,
+    bookmarked: !!raw.is_liked
+  };
+  if (type === "postIt") {
+    item.content = raw.cover_text;
+    item.backgroundColor = raw.cover_color;
+  } else if (type === "image") {
+    item.content = raw.description;
+    item.image = firstMedia?.url;
+  } else if (type === "video") {
+    item.title = raw.description;
+    item.video = { src: firstMedia?.url ?? "", poster: raw.video_poster_url };
+  }
+  return item;
+};

package/package.json

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