pukaad-ui-lib 1.0.1

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="space-y-[4px]">
+    <div class="flex flex-wrap gap-[8px]">
+      <Draggable v-model="arrFiles">
+        <template #item="{ item, index }">
+          <div class="relative">
+            <video
+              v-if="item.type.startsWith('video')"
+              :src="createBlobUrl(item)"
+              class="rounded-[4px] object-cover w-[98px] h-[98px]"
+            />
+            <Image
+              v-else-if="item.type.startsWith('image')"
+              width="98"
+              height="98"
+              :src="createBlobUrl(item)"
+              class="rounded-[4px]"
+            />
+            <div
+              v-else
+              class="w-[98px] h-[98px] rounded-[4px] flex justify-center items-center"
+            >
+              <Icon
+                name="material-symbols:lab-profile-rounded"
+                size="34"
+              ></Icon>
+            </div>
+            <div
+              class="absolute top-[2px] right-[2px] p-[1px] w-[20px] h-[20px] bg-white rounded-full cursor-pointer flex justify-center items-center"
+              @click="onDeleteImage(index)"
+            >
+              <Icon name="gravity-ui:xmark" size="16"></Icon>
+            </div>
+          </div>
+        </template>
+      </Draggable>
+
+      <label
+        v-if="props.limit == 0 || arrFiles.length < props.limit"
+        :class="[
+  'relative flex flex-col gap-[4px] justify-center items-center cursor-pointer',
+  'rounded-[4px] border-dashed',
+  actionOnDrop
+]"
+        :style="{
+  width: props.fullWidth ? '100%' : props.width,
+  height: props.fullHeight ? '100%' : props.height
+}"
+        @dragover.prevent="onDragOver"
+        @dragenter.prevent
+        @dragleave.prevent="onDragLeave"
+        @drop.prevent="onSelectFile"
+      >
+        <input
+          class="absolute w-full h-full cursor-pointer hidden"
+          type="file"
+          :accept="props.accept"
+          multiple
+          @change="onSelectFile"
+        />
+        <slot name="default" :label="label">
+          <div
+            class="flex flex-col gap-[4px] justify-center items-center w-[98px] h-[98px] rounded-[4px]"
+          >
+            <Icon
+              :class="isDrag ? 'text-primary' : 'text-gray'"
+              :name="labelIcon"
+              size="34"
+            ></Icon>
+            <div class="font-body-large">{{ `\u0E40\u0E1E\u0E34\u0E48\u0E21${label}` }}</div>
+          </div>
+        </slot>
+      </label>
+    </div>
+
+    <div
+      v-if="!props.disabledErrorMessage && errorMessage"
+      class="font-body-small text-error"
+    >
+      <slot name="error">
+        {{ errorMessage }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useField } from "vee-validate";
+const emit = defineEmits(["select"]);
+const props = defineProps({
+  name: { type: String, required: false, default: "input-files" },
+  accept: { type: String, required: false, default: "*" },
+  limit: { type: Number, required: false, default: 0 },
+  label: { type: String, required: false, default: "" },
+  labelIcon: { type: String, required: false, default: "" },
+  width: { type: [Number, String], required: false, default: 98 },
+  height: { type: [Number, String], required: false, default: 98 },
+  fullWidth: { type: Boolean, required: false, default: false },
+  fullHeight: { type: Boolean, required: false, default: false },
+  disabledDrop: { type: Boolean, required: false, default: false },
+  disabledErrorMessage: { type: Boolean, required: false, default: false }
+});
+const isDrag = ref(false);
+const { errorMessage, setErrors } = useField(props.name);
+const arrFiles = defineModel({ type: Array, ...{
+  default: []
+} });
+const createBlobUrl = (file) => {
+  return URL.createObjectURL(file);
+};
+const label = computed(() => {
+  if (props.label) return props.label;
+  if (props.accept.startsWith("image")) {
+    return "\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E";
+  } else if (props.accept.startsWith("video")) {
+    return "\u0E27\u0E35\u0E14\u0E35\u0E42\u0E2D";
+  } else {
+    return "\u0E44\u0E1F\u0E25\u0E4C";
+  }
+});
+const actionOnDrop = computed(() => {
+  if (isDrag.value) {
+    return "bg-info border-[2px] border-primary text-primary";
+  } else {
+    return "bg-mercury border-[1px] border-cloud text-black";
+  }
+});
+const labelIcon = computed(() => {
+  if (props.labelIcon) return props.labelIcon;
+  if (props.accept.startsWith("image")) {
+    return "lucide:image-plus";
+  } else if (props.accept.startsWith("video")) {
+    return "lucide:video";
+  } else {
+    return "lucide:file-plus";
+  }
+});
+const onSelectFile = (event) => {
+  isDrag.value = false;
+  let input = null;
+  let files = [];
+  if ("dataTransfer" in event && event.dataTransfer?.files) {
+    files = Array.from(event.dataTransfer.files);
+  } else {
+    input = event.target;
+    files = input.files ? Array.from(input.files) : [];
+  }
+  setErrors([]);
+  if (!files) return;
+  if (props.limit > 0 && arrFiles.value.length + files.length > props.limit) {
+    setErrors([
+      `\u0E04\u0E38\u0E13\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14${label.value}\u0E21\u0E32\u0E01\u0E40\u0E01\u0E34\u0E19\u0E44\u0E1B \u0E04\u0E38\u0E13\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E14\u0E49\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 ${props.limit} ${label.value}`
+    ]);
+    return;
+  }
+  arrFiles.value.push(...files);
+  if (input) input.value = "";
+  emit("select", arrFiles.value);
+};
+const onDeleteImage = (index) => {
+  arrFiles.value?.splice(index, 1);
+};
+const onDragOver = () => {
+  isDrag.value = true;
+};
+const onDragLeave = () => {
+  isDrag.value = false;
+};
+const checkLimitFile = () => {
+  if (props.limit > 0 && arrFiles.value.length > props.limit) {
+    setErrors([
+      `\u0E04\u0E38\u0E13\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14${label.value}\u0E21\u0E32\u0E01\u0E40\u0E01\u0E34\u0E19\u0E44\u0E1B \u0E04\u0E38\u0E13\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E14\u0E49\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 ${props.limit} ${label.value}`
+    ]);
+    return;
+  } else {
+    setErrors([]);
+  }
+};
+watch(arrFiles, checkLimitFile, { immediate: true, deep: true });
+</script>

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

@@ -0,0 +1,42 @@
+import type { InputFile } from "@/types/components/input/input-file";
+type __VLS_Props = InputFile;
+type __VLS_ModelProps = {
+    modelValue?: Array<File>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_22: {
+    label: string;
+}, __VLS_29: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_22) => any;
+} & {
+    error?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: File[]) => any;
+} & {
+    select: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((files: File[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+}>, {
+    width: number | string;
+    height: number | string;
+    fullWidth: boolean;
+    fullHeight: boolean;
+    label: string;
+    name: string;
+    limit: number;
+    accept: string;
+    labelIcon: string;
+    disabledDrop: boolean;
+    disabledErrorMessage: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,15 @@
+import type { InputLinkItem, InputLinkProps } from "@/types/components/input/input-link";
+type __VLS_Props = InputLinkProps;
+type __VLS_ModelProps = {
+    modelValue?: InputLinkItem[];
+};
+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: InputLinkItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: InputLinkItem[]) => any) | undefined;
+}>, {
+    name: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,106 @@
+<template>
+  <div class="relative">
+    <div class="font-body-large-prominent text-gray">ช่องทางการติดต่อ</div>
+    <ul class="flex flex-col gap-[16px]">
+      <li
+        v-for="(link, i) in linkValue"
+        :key="i"
+        class="flex items-start gap-[8px] font-body-large"
+      >
+        <InputSelect
+          :name="`${props.name}[${i}]name`"
+          width="172"
+          :items="listOption"
+          @select="onSelectSocial(i)"
+          v-model="link.name"
+        />
+        <div class="flex-1">
+          <InputTextField
+            :name="`${props.name}[${i}]link`"
+            full-width
+            :placeholder="listSocial.find((f) => f.name === link.name)?.example"
+            :rules="(v) => rules(v, link.name)"
+            @change="onChangeLink(link, i)"
+            v-model="link.link"
+          />
+        </div>
+      </li>
+      <li>
+        <Button
+          type="text"
+          variant="primary"
+          disabled-padding
+          prepend-icon="lucide:plus"
+          @click="addLink"
+        >
+          เพิ่มช่องทาง
+        </Button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  name: { type: String, required: false, default: "link" }
+});
+const listSocial = [
+  { name: "Email", example: "example@email.com" },
+  { name: "Facebook", example: "https://facebook.com/username" },
+  { name: "Instagram", example: "https://instagram.com/username" },
+  { name: "Line", example: "https://line.me/ti/p/~@line-id" },
+  { name: "LinkedIn", example: "https://linkedin.com/in/username" },
+  { name: "Pinterest", example: "https://pinterest.com/username" },
+  { name: "Snapchat", example: "https://snapchat.com/add/username" },
+  { name: "Threads", example: "https://threads.net/@username" },
+  { name: "TikTok", example: "https://tiktok.com/@username" },
+  { name: "Tumblr", example: "https://username.tumblr.com" },
+  { name: "Website", example: "https://example.com" },
+  { name: "WhatsApp", example: "https://wa.me/1234567890" },
+  { name: "X", example: "https://x.com/username" },
+  { name: "YouTube", example: "https://youtube.com/@username" }
+];
+const linkValue = defineModel({ type: Array, ...{
+  default: () => []
+} });
+const rules = (v, link) => {
+  if (link === "Email") {
+    const regex2 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!regex2.test(v)) {
+      return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E2D\u0E35\u0E40\u0E21\u0E25\u0E17\u0E35\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+    }
+    return;
+  }
+  const regex = /^https?:\/\/[^\s/$.?#].[^\s]*$/i;
+  return regex.test(v) || "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E25\u0E34\u0E07\u0E04\u0E4C\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+};
+const listOption = computed(() => {
+  const arr = listSocial.map((item) => {
+    return {
+      icon: `pukaad-social:${item.name}`,
+      value: item.name,
+      example: item.example
+    };
+  });
+  return arr;
+});
+const addLink = () => {
+  const obj = listOption.value[0];
+  const link = {
+    name: String(obj.value),
+    link: ""
+  };
+  linkValue.value.push(link);
+};
+const onSelectSocial = (index) => {
+  if (linkValue.value[index]) {
+    linkValue.value[index].link = String("");
+  }
+};
+const onChangeLink = (option, index) => {
+  if (option.link === "") {
+    linkValue.value.splice(index, 1);
+  }
+};
+</script>

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

@@ -0,0 +1,15 @@
+import type { InputLinkItem, InputLinkProps } from "@/types/components/input/input-link";
+type __VLS_Props = InputLinkProps;
+type __VLS_ModelProps = {
+    modelValue?: InputLinkItem[];
+};
+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: InputLinkItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: InputLinkItem[]) => any) | undefined;
+}>, {
+    name: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,22 @@
+import type { InputMediaProps } from "@/types/components/input/input-media";
+type __VLS_Props = InputMediaProps;
+type __VLS_ModelProps = {
+    modelValue?: Array<File>;
+    "thumbnail"?: File | undefined;
+};
+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[]) => any;
+    "update:thumbnail": (value: File | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+    "onUpdate:thumbnail"?: ((value: File | undefined) => any) | undefined;
+}>, {
+    fullWidth: boolean;
+    fullHeight: boolean;
+    name: string;
+    limitImage: number;
+    limitVideo: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,141 @@
+<template>
+  <InputFile
+    v-if="files.length == 0"
+    :name="props.name"
+    :accept="`${acceptImage},${acceptVideo}`"
+    full-width
+    full-height
+    :limit="
+  props.limitImage > props.limitVideo ? props.limitImage : props.limitVideo
+"
+    @select="onSelect"
+    v-model="files"
+  >
+    <div
+      class="flex flex-col justify-center items-center gap-[4px] p-[10px]"
+      :style="{
+  width: props.fullWidth ? '100%' : props.width,
+  height: props.fullHeight ? '100%' : props.height
+}"
+    >
+      <Icon name="fa6-solid:cloud-arrow-up" size="24" />
+      <div class="font-body-large">เพิ่มรูปภาพ/วิดีโอ</div>
+      <div class="font-body-small">หรือลากและวาง</div>
+    </div>
+  </InputFile>
+
+  <template v-else>
+    <InputFile
+      v-if="fileType == 'image'"
+      :name="props.name"
+      :accept="acceptImage"
+      :limit="props.limitImage"
+      v-model="files"
+    />
+    <InputFile
+      v-if="fileType == 'video'"
+      :name="props.name"
+      :accept="acceptVideo"
+      :limit="props.limitVideo"
+      v-model="files"
+    />
+  </template>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { useNuxtApp } from "nuxt/app";
+const { $alert } = useNuxtApp();
+const props = defineProps({
+  name: { type: String, required: false, default: "input-media" },
+  width: { type: [Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  fullWidth: { type: Boolean, required: false, default: true },
+  fullHeight: { type: Boolean, required: false, default: true },
+  limitImage: { type: Number, required: false, default: 4 },
+  limitVideo: { type: Number, required: false, default: 1 }
+});
+const acceptImage = "image/jpg,image/jpeg,image/png,image/webp,image/bmp,image/gif";
+const acceptVideo = "video/mp4,video/quicktime,video/x-ms-wmv";
+const files = defineModel({ type: Array, ...{
+  default: []
+} });
+const thumbnail = defineModel("thumbnail", { type: null, ...{
+  default: null
+} });
+const fileType = ref();
+const onSelect = async (files2) => {
+  let countImageFile = 0;
+  let countVideoFile = 0;
+  let countNotAllowedFile = 0;
+  for (const file of files2) {
+    if (acceptImage.includes(file.type)) {
+      countImageFile++;
+    } else if (acceptVideo.includes(file.type)) {
+      countVideoFile++;
+    } else {
+      countNotAllowedFile++;
+    }
+  }
+  if (countNotAllowedFile > 0 || countImageFile > 0 && countVideoFile > 0) {
+    files2.splice(0, files2.length);
+    $alert.show({
+      variant: "error",
+      title: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E09\u0E1E\u0E32\u0E30\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14 \u0E2B\u0E23\u0E37\u0E2D\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D\u0E40\u0E1E\u0E35\u0E22\u0E07\u0E44\u0E1F\u0E25\u0E4C\u0E40\u0E14\u0E35\u0E22\u0E27\u0E40\u0E17\u0E48\u0E32\u0E19\u0E31\u0E49\u0E19"
+    });
+  } else {
+    if (countImageFile > 0 && countVideoFile == 0) {
+      fileType.value = "image";
+      thumbnail.value = files2[0];
+    }
+    if (countVideoFile > 0 && countImageFile == 0) {
+      fileType.value = "video";
+      thumbnail.value = await getVideoThumbnailVideo(files2[0]);
+    }
+  }
+};
+function getVideoThumbnailVideo(file, atSecond = 1) {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.preload = "metadata";
+    video.muted = true;
+    video.playsInline = true;
+    video.src = URL.createObjectURL(file);
+    video.addEventListener("loadeddata", () => {
+      video.currentTime = atSecond;
+    });
+    video.addEventListener("seeked", () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const ctx = canvas.getContext("2d");
+      ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
+      canvas.toBlob((blob) => {
+        if (!blob) {
+          reject(new Error("Failed to create thumbnail blob"));
+          return;
+        }
+        const thumbnailFile = new File([blob], "thumbnail.png", {
+          type: "image/png"
+        });
+        URL.revokeObjectURL(video.src);
+        resolve(thumbnailFile);
+      }, "image/png");
+    });
+    video.addEventListener("error", () => {
+      reject(new Error("Failed to load video"));
+    });
+  });
+}
+watch(
+  files,
+  async (v) => {
+    if (fileType.value === "image") {
+      thumbnail.value = v[0];
+    }
+  },
+  {
+    deep: true
+  }
+);
+</script>

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

@@ -0,0 +1,22 @@
+import type { InputMediaProps } from "@/types/components/input/input-media";
+type __VLS_Props = InputMediaProps;
+type __VLS_ModelProps = {
+    modelValue?: Array<File>;
+    "thumbnail"?: File | undefined;
+};
+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[]) => any;
+    "update:thumbnail": (value: File | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+    "onUpdate:thumbnail"?: ((value: File | undefined) => any) | undefined;
+}>, {
+    fullWidth: boolean;
+    fullHeight: boolean;
+    name: string;
+    limitImage: number;
+    limitVideo: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,25 @@
+import type { InputTextFieldProps } from "./input-text-field.vue.js";
+export interface InputPasswordProps extends InputTextFieldProps {
+    new?: boolean;
+    disabledForgotPassword?: boolean;
+}
+type __VLS_Props = InputPasswordProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+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: string | undefined) => any;
+} & {
+    forgotPassword: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onForgotPassword?: ((event: Event) => any) | undefined;
+}>, {
+    id: string;
+    name: string;
+    disabledForgotPassword: boolean;
+    new: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;