pukaad-ui-lib 1.0.1

package/dist/runtime/components/modal/modal-profile-edit.vue

@@ -0,0 +1,316 @@
+<template>
+  <Modal
+    width="468"
+    title="โปรไฟล์"
+    title-position="center"
+    @close="onClose"
+    v-model="modelValue"
+  >
+    <template #header>
+      <div v-if="step !== 'menu'">
+        <div class="flex justify-between items-center w-full">
+          <Button
+            variant="text"
+            color="black"
+            disabled-padding
+            icon-size="24"
+            prepend-icon="lucide:chevron-left"
+            @click="step = 'menu'"
+          />
+          <div class="font-title-medium-prominent">
+            <div v-if="step === 'profile-name'">แก้ไขชื่อโปรไฟล์</div>
+            <div v-if="step === 'premium-id'">พรีเมียม ID</div>
+            <div v-if="step === 'category'">หมวดหมู่</div>
+          </div>
+          <Button
+            variant="text"
+            color="black"
+            disabled-padding
+            icon-size="24"
+            prepend-icon="lucide:x"
+            @click="onClose"
+          />
+        </div>
+      </div>
+    </template>
+
+    <div v-if="step === 'menu'" class="flex flex-col gap-[16px]">
+      <div class="font-body-large">
+        จัดการชื่อโปรไฟล์และชื่อผู้ใช้ของคุณสำหรับการแสดงผลในระบบ
+        และการเข้าถึงโปรไฟล์
+        <span class="text-primary cursor-pointer"> เรียนรู้เพิ่มเติม</span>
+      </div>
+      <div class="flex flex-col border border-mercury rounded-[8px]">
+        <div
+          v-for="(menu, i) in listMenu"
+          :key="menu.label"
+          @click="handleMenuClick(menu)"
+          :class="[
+  'flex p-[16px] justify-between items-center',
+  isMenuClickable(menu) ? 'cursor-pointer hover:bg-smoke' : '',
+  i < listMenu.length - 1 ? 'border-b border-mercury' : isMenuClickable(menu) ? 'hover:rounded-b-[8px]' : ''
+]"
+        >
+          <div class="flex flex-col min-w-[378px]">
+            <div class="font-body-large-prominent">{{ menu.label }}</div>
+            <div class="font-body-large text-gray">{{ menu.value || "-" }}</div>
+          </div>
+          <Button
+            v-if="isMenuClickable(menu)"
+            variant="text"
+            size="small"
+            color="black"
+            icon-size="18"
+            prepend-icon="lucide:chevron-right"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="flex flex-col gap-[16px]">
+      <template v-if="step === 'profile-name'">
+        <div class="flex flex-col gap-[16px]">
+          <div class="font-body-large">
+            หากคุณเปลี่ยนชื่อ คุณจะไม่สามารถเปลี่ยนชื่อได้อีกเป็นเวลา 60 วัน
+            <Button
+              variant="text"
+              color="primary"
+              disabled-padding
+              @click="goToHelpCenter"
+            >
+              เรียนรู้เพิ่มเติม
+            </Button>
+          </div>
+        </div>
+        <Form
+          v-slot="{ meta }"
+          class="flex flex-col gap-[16px]"
+          @submit="saveProfileName"
+        >
+          <InputTextField
+            name="profileName"
+            label="ชื่อโปรไฟล์"
+            :placeholder="listMenu[0]?.value || '-'"
+            full-width
+            validate-on-input
+            :rules="ruleProfileName"
+            v-model="profileName"
+          />
+          <Button
+            type="submit"
+            color="primary"
+            full-width
+            :disabled="!meta.valid"
+          >
+            บันทึก
+          </Button>
+        </Form>
+      </template>
+
+      <template v-if="step === 'premium-id'">
+        <div class="flex flex-col gap-[16px]">
+          <div class="font-body-large">
+            ดูรายละเอียดเกี่ยวกับการใช้พรีเมียม ID และซื้อพรีเมียม ID ได้ที่นี่
+
+            <Button
+              variant="text"
+              color="primary"
+              disabled-padding
+              @click="goToDetailPremiumID"
+            >
+              ดูรายละเอียดเกี่ยวกับพรีเมียม ID
+            </Button>
+          </div>
+          <div class="flex gap-[40px]">
+            <div class="font-body-large w-[140px]">พรีเมียม ID</div>
+            <div class="font-body-large text-gray">ไม่มี</div>
+          </div>
+          <div class="flex gap-[40px]">
+            <div class="font-body-large w-[140px]">วันชำระเงินครั้งต่อไป</div>
+            <div class="font-body-large text-gray">ไม่มี</div>
+          </div>
+          <Divider :height="0" />
+          <div class="font-body-large-prominent">
+            ค่าบริการรายปีของพรีเมียม ID
+          </div>
+          <div class="flex gap-[40px]">
+            <div class="font-body-large w-[140px]">ราคา (ไม่รวมภาษี)</div>
+            <div class="font-body-large text-gray">฿444</div>
+          </div>
+          <Divider :height="0" />
+          <InputTextField
+            v-model="namePremiumID"
+            label="ซื้อพรีเมียม ID"
+            full-width
+            show-counter
+            :limit="18"
+            prepend-icon="lucide:at-sign"
+          />
+          <Button color="primary" :disabled="!namePremiumID"
+            >ซื้อพรีเมียม ID</Button
+          >
+        </div>
+      </template>
+
+      <template v-if="step === 'category'">
+        <div class="flex flex-col gap-[16px]">
+          <div class="font-body-large">เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์</div>
+          <InputAutocomplete
+            v-model="profileCategory"
+            :items="profileCategoryItems"
+            name="profileCategory"
+            placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง"
+            label="หมวดหมู่"
+            full-width
+          />
+          <Button color="primary" :disabled="!profileCategory">บันทึก</Button>
+        </div>
+      </template>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from "vue";
+const props = defineProps({
+  state: { type: String, required: false, default: "profile" }
+});
+const modelValue = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const step = ref("menu");
+const profileName = ref();
+const premiumId = ref();
+const category = ref();
+const namePremiumID = ref();
+const isOpenDropdown = ref(false);
+const profileCategory = ref();
+const profileCategoryItems = ref([]);
+const isEmoji = (v) => {
+  const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu;
+  return emojiRegex.test(v);
+};
+const isMixedLanguages = (v) => {
+  const isLatin = /[a-zA-Z]/.test(v);
+  const isThai = /[\u0E00-\u0E7F]/.test(v);
+  const isChinese = /[\u4E00-\u9FFF]/.test(v);
+  const isJapanese = /[\u3040-\u309F\u30A0-\u30FF]/.test(v);
+  const isKorean = /[\uAC00-\uD7AF]/.test(v);
+  const isArabic = /[\u0600-\u06FF]/.test(v);
+  const isRussian = /[\u0400-\u04FF]/.test(v);
+  const languages = [
+    isLatin,
+    isThai,
+    isChinese,
+    isJapanese,
+    isKorean,
+    isArabic,
+    isRussian
+  ];
+  const activeLanguages = languages.filter(Boolean).length;
+  return activeLanguages > 1;
+};
+const isInvalidSymbols = (v) => {
+  const validPattern = /^[a-zA-Z\u0E00-\u0E7F\u4E00-\u9FFF\u3040-\u309F\u30A0-\u30FF\uAC00-\uD7AF\u0400-\u04FF\u0600-\u06FF.\s-]+$/;
+  return !validPattern.test(v);
+};
+const ruleProfileName = (value) => {
+  if (!value) return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E0A\u0E37\u0E48\u0E2D\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C";
+  const v = value.trim();
+  if (!v) return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E0A\u0E37\u0E48\u0E2D\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C";
+  if (v.length < 4) return "\u0E01\u0E23\u0E2D\u0E01\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 4 \u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23";
+  if (v.length > 50) return "\u0E01\u0E23\u0E2D\u0E01\u0E44\u0E14\u0E49\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 50 \u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23";
+  if (/\d/.test(v)) return "\u0E2B\u0E49\u0E32\u0E21\u0E43\u0E2A\u0E48\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02\u0E43\u0E19\u0E0A\u0E37\u0E48\u0E2D\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C";
+  if (/\.{2,}/.test(v)) return "\u0E2B\u0E49\u0E32\u0E21\u0E43\u0E2A\u0E48\u0E08\u0E38\u0E14 (.) \u0E15\u0E34\u0E14\u0E01\u0E31\u0E19";
+  if (/\s{2,}/.test(v)) return "\u0E2B\u0E49\u0E32\u0E21\u0E40\u0E27\u0E49\u0E19\u0E27\u0E23\u0E23\u0E04\u0E15\u0E34\u0E14\u0E01\u0E31\u0E19";
+  if (isEmoji(v)) return "\u0E2B\u0E49\u0E32\u0E21\u0E43\u0E2A\u0E48 Emoji \u0E43\u0E19\u0E0A\u0E37\u0E48\u0E2D\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C";
+  if (isMixedLanguages(v)) return "\u0E2B\u0E49\u0E32\u0E21\u0E43\u0E0A\u0E49\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23 2 \u0E20\u0E32\u0E29\u0E32\u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E01\u0E31\u0E19";
+  if (isInvalidSymbols(v)) return "\u0E43\u0E0A\u0E49\u0E44\u0E14\u0E49\u0E40\u0E09\u0E1E\u0E32\u0E30\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23 \u0E08\u0E38\u0E14 (.) \u0E41\u0E25\u0E30\u0E02\u0E35\u0E14 (-)";
+  return true;
+};
+const listMenu = ref([]);
+const isMenuClickable = (menu) => {
+  if (menu.label === "\u0E40\u0E1A\u0E2A\u0E34\u0E04 ID") return false;
+  if (props.state === "business") return true;
+  if (props.state === "profile") {
+    return menu.label === "\u0E0A\u0E37\u0E48\u0E2D\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C";
+  }
+  return false;
+};
+const handleMenuClick = (menu) => {
+  if (isMenuClickable(menu) && menu.action) {
+    menu.action();
+  }
+};
+const saveProfileName = () => {
+  console.log(profileName.value);
+  step.value = "menu";
+};
+const goToHelpCenter = () => {
+  console.log("go to help center");
+};
+const goToDetailPremiumID = () => {
+  console.log("go to detail premium id");
+};
+const getProfile = () => {
+  const fakeProfileName = "testProfile";
+  const fakeBasicID = "@100006047146577";
+  const fakePremiumID = "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E01\u0E33\u0E2B\u0E19\u0E14";
+  const fakeCategory = "testCategory";
+  const commonMenus = [
+    {
+      label: "\u0E0A\u0E37\u0E48\u0E2D\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C",
+      value: fakeProfileName,
+      action: () => {
+        step.value = "profile-name";
+      }
+    },
+    {
+      label: "\u0E40\u0E1A\u0E2A\u0E34\u0E04 ID",
+      value: fakeBasicID,
+      action: () => {
+      }
+    }
+  ];
+  const businessMenus = [
+    {
+      label: "\u0E1E\u0E23\u0E35\u0E40\u0E21\u0E35\u0E22\u0E21 ID",
+      value: fakePremiumID,
+      action: () => {
+        step.value = "premium-id";
+      }
+    }
+  ];
+  const profileMenus = [
+    {
+      label: "\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48",
+      value: fakeCategory,
+      action: () => {
+        step.value = "category";
+      }
+    }
+  ];
+  if (props.state === "business") {
+    listMenu.value = [...commonMenus, ...businessMenus, ...profileMenus];
+  } else {
+    listMenu.value = [...commonMenus, ...profileMenus];
+  }
+};
+const reset = () => {
+  profileName.value = "";
+  premiumId.value = "";
+};
+const onClose = () => {
+  reset();
+  step.value = "menu";
+  modelValue.value = false;
+};
+watch(step, (state) => {
+  if (state == "menu") {
+    reset();
+  }
+});
+onMounted(() => {
+  getProfile();
+});
+</script>

package/dist/runtime/components/modal/modal-profile-edit.vue.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    state?: "profile" | "business";
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    state: "profile" | "business";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-province-domain.d.vue.ts

@@ -0,0 +1,18 @@
+import type { ModalProviceDomainProps } from "@/types/components/modal/modal-province-domain";
+type __VLS_Props = ModalProviceDomainProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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: boolean) => any;
+} & {
+    confirmed: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onConfirmed?: ((value: string) => any) | undefined;
+}>, {
+    confirmedText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-province-domain.vue

@@ -0,0 +1,55 @@
+<template>
+  <Modal
+    title="เลือกจังหวัดที่คุณต้องการใช้งาน"
+    :column-gap="24"
+    v-model="modelValue"
+  >
+    <div class="flex flex-col gap-[16px] w-full">
+      <div class="flex flex-col font-body-large text-center">
+        <div>เลือกจังหวัดที่คุณต้องการจัดการข้อมูลธุรกิจ</div>
+        <div>เพื่อให้เข้าถึงเครื่องมือและข้อมูลในพื้นที่ได้ถูกต้อง</div>
+      </div>
+      <InputAutocomplete
+        :items="provinces"
+        full-width
+        placeholder="เลือกจังหวัด"
+        v-model="selected"
+      />
+    </div>
+    <template #footer>
+      <Button full-width color="primary" :disabled="!selected" @click="onNext">
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const emit = defineEmits(["confirmed"]);
+const props = defineProps({
+  confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" }
+});
+const selected = ref("");
+const provinces = ref([
+  {
+    label: "\u0E01\u0E23\u0E38\u0E07\u0E40\u0E17\u0E1E\u0E21\u0E2B\u0E32\u0E19\u0E04\u0E23",
+    value: "https://www.someting_eie.com"
+  },
+  {
+    label: "\u0E1A\u0E38\u0E23\u0E35\u0E23\u0E31\u0E21\u0E22\u0E4C",
+    value: "https://www.someting_eie.com"
+  },
+  {
+    label: "\u0E01\u0E23\u0E30\u0E1A\u0E35\u0E48",
+    value: "\u0E01\u0E23\u0E30\u0E1A\u0E35\u0E48"
+  }
+]);
+const modelValue = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const onNext = () => {
+  emit("confirmed", selected.value);
+  modelValue.value = false;
+};
+</script>

package/dist/runtime/components/modal/modal-province-domain.vue.d.ts

@@ -0,0 +1,18 @@
+import type { ModalProviceDomainProps } from "@/types/components/modal/modal-province-domain";
+type __VLS_Props = ModalProviceDomainProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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: boolean) => any;
+} & {
+    confirmed: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onConfirmed?: ((value: string) => any) | undefined;
+}>, {
+    confirmedText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-report.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-report.vue

@@ -0,0 +1,55 @@
+<template>
+  <!-- <Modal
+    :title="title"
+    title-position="left"
+    disabled-padding-content
+    :loading="loadingModal"
+    @close="onCancel"
+    v-model="modelValue"
+  >
+    <Form @submit="onSendReport">
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        :class="[
+          'flex flex-col gap-[4px] justify-center px-[16px] border-b-[1px] border-mercury',
+          i === 0 && 'border-t-[1px]',
+          formState.report_value === item[0]?.value ? 'h-[164px]' : 'h-[40px]',
+        ]"
+      >
+        <InputRadio
+          name="report_value"
+          :label="item[0]?.label"
+          layoutGap="0"
+          :items="item"
+          v-model="formState.report_value"
+        />
+        <InputTextarea
+          v-if="formState.report_value === item[0]?.value"
+          name="report_detail"
+          rows="4"
+          resize="none"
+          placeholder="คำอธิบายประกอบการรายงาน"
+          v-model="formState.report_detail"
+        />
+      </div>
+      <div class="flex gap-[16px] px-[16px] pt-[16px]">
+        <Button full-width variant="outline" color="black" @click="onCancel">
+          ยกเลิก
+        </Button>
+        <Button
+          type="submit"
+          color="primary"
+          full-width
+          :disabled="formState.report_value === ''"
+        >
+          ส่ง
+        </Button>
+      </div>
+    </Form>
+  </Modal> -->
+</template>
+
+<script setup>
+
+</script>

package/dist/runtime/components/modal/modal-report.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-review-detail.d.vue.ts

@@ -0,0 +1,21 @@
+import type { ModalReviewDetailProps } from "@/types/components/modal/modal-review-detail";
+type __VLS_Props = ModalReviewDetailProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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: boolean) => any;
+    "toggle-like": (reviewId: string, liked: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onToggle-like"?: ((reviewId: string, liked: boolean) => any) | undefined;
+}>, {
+    items: string[];
+    selectIndex: number;
+    title: string;
+    isProfile: boolean;
+    review: import("../../../types/components/card/card-review.js").CardReviewProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;