pukaad-ui-lib 1.2.0 → 1.3.2

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

@@ -1,173 +1,173 @@
 <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)"
+  <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>
+]"
+        >
+          <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>

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

@@ -1,27 +1,27 @@
 <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>
+  <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>

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

@@ -1,53 +1,53 @@
 <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> -->
+  <!-- <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>