@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/forms/auth/PwdScore.vue

@@ -1,68 +0,0 @@
-<script setup>
-import { cn } from '../../../lib/utils';
-import { ref } from 'vue';
-import { watch } from 'vue';
-
-const props = defineProps(['class', 'password']);
-const pwdStrength = ref('Very Weak');
-const model = defineModel({ default: 0 });
-const score = ref(0)
-
-watch(() => props.password, (pwd) => {
-  score.value = 0;
-  // Check the length of the password
-  if (pwd.length >= 8) {
-    score.value += 1;
-    if (pwd.length >= 12) score.value += 1;
-    // Check for lowercase letters
-    if (/[a-z]/.test(pwd)) score.value += 1;
-    // Check for uppercase letters
-    if (/[A-Z]/.test(pwd)) score.value += 1;
-    // Check for numbers
-    if (/\d/.test(pwd)) score.value += 1;
-    // Check for special characters
-    if (/[\W_]/.test(pwd)) score.value += 1;
-  }
-
-  // Determine password strength
-  switch (score.value) {
-    case 0:
-    case 1:
-      pwdStrength.value = 'Very Weak';
-      break;
-    case 2:
-      pwdStrength.value = 'Weak';
-      break;
-    case 3:
-    case 4:
-      pwdStrength.value = 'Moderate';
-      break;
-    case 5:
-      pwdStrength.value = 'Strong';
-      break;
-    default:
-      pwdStrength.value = 'Very Strong';
-      break;
-  }
-  model.value = score.value;
-})
-</script>
-
-<template>
-  <main :class="cn('bg-gray-300 rounded-full overflow-hidden', props.class)">
-    <div class="h-1 bg-gray-400 transition-all rounded-full"
-      :class="{'bg-green-500': score > 4,
-      'bg-orange-400': score === 3 || score === 4,
-      'bg-red-500': score < 3}"
-      :style="{width: `${Math.ceil(score / 6 * 100) || 5}%`}"></div>
-  </main>
-  <div class="flex text-[12px] mt-1 leading-tight">
-    <div class="text-gray-500">
-      Password minimal 8 karakter
-    </div>
-    <div class="font-semibold text-gray-500 ml-auto text-[11px]"
-      :class="{'text-green-500': score > 4,
-      'text-orange-400': score === 3 || score === 4,
-      'text-red-500': score < 3}">{{ pwdStrength }}</div>
-  </div>
-</template>

package/template/src/components/helper/ApiTester.vue

@@ -1,153 +0,0 @@
-<script setup lang="ts">
-import { Dialog, DialogContent } from "../../components/ui/dialog";
-import { LucideLoader2, LucideSend } from "lucide-vue-next";
-import { cn } from "../../lib/utils";
-import { ref } from "vue";
-import api from "../../api/api";
-
-const props = defineProps(["class", "secondaryBtnClass", "primaryBtnClass"]);
-const dialogOpen = ref<boolean>(false);
-const loading = ref<boolean>(false);
-const error = ref<string | null>(null);
-const next: any = ref(null);
-const item: any = ref(null);
-const headerStr = ref("");
-const bodyStr = ref("");
-const sendBtnEL: any = ref(null);
-const response: any = ref(null);
-const method = ref("get");
-const respStatus = ref(200);
-
-function open(d: any, n: any) {
-  dialogOpen.value = true;
-  next.value = n;
-  loading.value = false;
-  response.value = null;
-  respStatus.value = 200;
-  error.value = null;
-  item.value = d;
-  method.value = d.method;
-  headerStr.value = d.headers && Object.keys(d.headers).length > 0 ? JSON.stringify(d.headers, null, 2) : "";
-  bodyStr.value = d.requestBodyExample && Object.keys(d.requestBodyExample).length > 0 ? JSON.stringify(d.requestBodyExample, null, 2) : "";
-  setTimeout(() => {
-    if (sendBtnEL.value) sendBtnEL.value.focus();
-  });
-  console.log(d);
-}
-
-function sendRequest() {
-  let apiReq = null;
-  switch (method.value) {
-    case "get":
-      apiReq = api.get(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, { headers: headerStr.value ? JSON.parse(headerStr.value) : {} });
-      break;
-    case "post":
-      apiReq = api.post(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, bodyStr.value ? JSON.parse(bodyStr.value) : null, {
-        headers: headerStr.value ? JSON.parse(headerStr.value) : {}
-      });
-      break;
-    case "put":
-      apiReq = api.put(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, bodyStr.value ? JSON.parse(bodyStr.value) : null, {
-        headers: headerStr.value ? JSON.parse(headerStr.value) : {}
-      });
-      break;
-    case "patch":
-      apiReq = api.patch(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, bodyStr.value ? JSON.parse(bodyStr.value) : null, {
-        headers: headerStr.value ? JSON.parse(headerStr.value) : {}
-      });
-      break;
-    case "delete":
-      apiReq = api.delete(`${import.meta.env.VITE_API_URL}${item.value.endpointExample}`, bodyStr.value ? JSON.parse(bodyStr.value) : null);
-      break;
-    default:
-      break;
-  }
-  if (!apiReq) return;
-  loading.value = true;
-  apiReq
-    .then(r => {
-      respStatus.value = 200;
-      response.value = r.data;
-      error.value = null;
-    })
-    .catch(err => {
-      respStatus.value = err.response && err.response.status ? err.response.status : 500;
-      response.value = err.response && err.response.data ? err.response.data : null;
-      error.value = err.message;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-function close(b: boolean) {
-  dialogOpen.value = false;
-  if (next.value) next.value(b);
-}
-
-defineExpose({ open });
-</script>
-
-<template>
-  <Dialog v-model:open="dialogOpen">
-    <DialogContent :class="cn('max-w-[640px]', props.class)">
-      <div class="-mx-6 px-6 pb-1.5">
-        <h4 class="m-0 font-semibold">
-          Try API Endpoint
-          <span class="mx-1.5">&bull;</span>
-          {{ item.summary }}
-          {{ item.endpoint.split("/")[1].replace(/-/g, " ") }}
-        </h4>
-      </div>
-      <div class="-mt-3 flex">
-        <select class="flex-none rounded-l-sm border-r-0 border-gray-300" v-model="method">
-          <option value="get">GET</option>
-          <option value="post">POST</option>
-          <option value="put">PUT</option>
-          <option value="patch">PATCH</option>
-          <option value="delete">DELETE</option>
-        </select>
-        <div class="w-full">
-          <input type="text" class="w-full border-gray-300" placeholder="https://..." v-model="item.endpointExample" />
-        </div>
-        <div class="flex-none">
-          <button
-            class="flex h-full items-center rounded-r-sm bg-primary_main px-4 font-medium text-white"
-            :class="{ '!bg-gray-300 !text-gray-400': loading }"
-            v-on:click="sendRequest"
-            ref="sendBtnEL">
-            <LucideLoader2 :size="22" class="-ml-1 mr-2 animate-spin" v-if="loading" />
-            <LucideSend :size="18" class="mr-2" v-else />
-            Send
-          </button>
-        </div>
-      </div>
-      <div class="-mx-6 -mb-4 max-h-[60vh] overflow-auto border-b border-t px-6 pb-5 pt-3">
-        <div class="mb-3">
-          <label class="mb-1 block text-sm font-medium text-gray-500">Header</label>
-          <textarea class="w-full rounded-sm border-slate-600 bg-slate-600 px-2 py-1.5 text-sm text-white" rows="4" placeholder="Header in JSON format..." v-model="headerStr"></textarea>
-        </div>
-
-        <div class="mb-3" v-if="method !== 'get' && method !== 'delete'">
-          <label class="mb-1 block text-sm font-medium text-gray-500">Request Body</label>
-          <textarea class="w-full rounded-sm border-slate-600 bg-slate-600 px-2 py-1.5 text-sm text-white" rows="8" placeholder="Request body in JSON format..." v-model="bodyStr"></textarea>
-        </div>
-
-        <div class="" v-if="response || error">
-          <div class="mb-1 flex items-center">
-            <span class="text-sm font-medium text-gray-500">Response</span>
-            <div class="ml-auto flex-none text-sm font-medium">
-              <span class="text-green-500" v-if="respStatus === 200">200 - OK</span>
-              <span class="text-red-500" v-else>
-                {{ respStatus }}
-                -
-                {{ error?.substring(0, 26) }}{{ String(error).length > 26 ? "..." : "" }}
-              </span>
-            </div>
-          </div>
-          <pre class="w-full overflow-auto rounded-sm border-slate-600 bg-slate-600 px-2 py-1.5 text-sm text-white" :class="{ '!bg-red-700': error }">{{ response }}</pre>
-        </div>
-      </div>
-    </DialogContent>
-  </Dialog>
-</template>

package/template/src/components/helper/ChangePwd.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import FormInputerDialog from "../../components/dialog/FormInputerDialog.vue";
-import DialogTrigger from "../../components/ui/dialog/DialogTrigger.vue";
-import { Eye, EyeOff } from "lucide-vue-next";
-import { cn } from "../../lib/utils";
-import { ref, computed } from "vue";
-import api from "../../api/api";
-import { toast } from "vue-sonner";
-import PwdScore from "../../components/forms/auth/PwdScore.vue";
-
-// Use correct dialog imports (assume alias is ../../components/ui/dialog)
-import { DialogTitle, DialogDescription } from "../../components/ui/dialog";
-
-const props = defineProps<{ class?: string }>();
-const emits = defineEmits(["finish"]);
-
-const formError = ref<null | string>(null);
-const formLoading = ref(false);
-const dialogOpen = ref(false);
-
-// State for password visibility toggles
-const showPwd = ref(false);
-const showPwd1 = ref(false);
-const showPwd2 = ref(false);
-
-// State for password fields and score
-const pwdStr = ref("");
-const pwd1Str = ref("");
-const pwdScore = ref(0);
-const changePwdErr = ref<string | null>(null);
-
-// For loading spinner on submit
-const isLoadingChangePwd = computed(() => formLoading.value);
-
-// Handler for password input
-const pwd1Inputed = (e: Event) => {
-  const target = e.target as HTMLInputElement;
-  pwd1Str.value = target.value;
-  changePwdErr.value = null;
-};
-
-const pwdInputed = (e: Event) => {
-  const target = e.target as HTMLInputElement;
-  pwdStr.value = target.value;
-  changePwdErr.value = null;
-};
-
-function changePwd(_: FormData, form$: any) {
-  console.log(form$.data)
-  if (form$.data.password !== form$.data.password2) {
-    formError.value = "Ulangi password tidak sama";
-    return;
-  }
-  if (pwdScore.value < 4) {
-    formError.value = "Mohon gunakan password yang lebih sulit untuk ditebak";
-    return;
-  }
-  formError.value = null;
-  formLoading.value = true;
-  api
-    .post("/auth/changepassword", {
-      currentPassword: form$.data.currentPassword,
-      password: form$.data.password
-    })
-    .then(() => {
-      dialogOpen.value = false;
-      toast("Password sukses diubah");
-      emits("finish");
-    })
-    .catch((err: { message: string }) => {
-      formError.value = err.message;
-    })
-    .finally(() => {
-      formLoading.value = false;
-    });
-}
-</script>
-
-<template>
-  <FormInputerDialog @submit="changePwd" v-model:error="formError" v-model:saving="formLoading" v-model:show="dialogOpen">
-    <template #trigger>
-      <DialogTrigger :class="cn('', props.class)">
-        <slot></slot>
-      </DialogTrigger>
-    </template>
-    <template #body>
-      <Vueform :endpoint="changePwd">
-        <TextElement
-          name="currentPassword"
-          :input-type="showPwd ? 'text' : 'password'"
-          label="Kata Sandi saat ini"
-          placeholder="Masukkan kata sandi..."
-          :floating="false"
-          :rules="['required']"
-          @input="pwdInputed"
-          onpaste="return false;">
-          <template #addon-after>
-            <EyeOff :size="22" v-if="showPwd" class="cursor-pointer text-slate-400" @click="showPwd = false" />
-            <Eye :size="22" v-else class="cursor-pointer text-slate-400" @click="showPwd = true" />
-          </template>
-        </TextElement>
-        <TextElement
-          name="password"
-          :input-type="showPwd1 ? 'text' : 'password'"
-          label="Kata Sandi Baru"
-          placeholder="Masukkan kata sandi..."
-          :floating="false"
-          :rules="['required']"
-          @input="pwd1Inputed"
-          onpaste="return false;">
-          <template #addon-after>
-            <EyeOff :size="22" v-if="showPwd1" class="cursor-pointer text-slate-400" @click="showPwd1 = false" />
-            <Eye :size="22" v-else class="cursor-pointer text-slate-400" @click="showPwd1 = true" />
-          </template>
-        </TextElement>
-        <div class="col-span-12 -mt-2.5 mb-4 px-1">
-          <PwdScore v-model="pwdScore" :password="pwd1Str" />
-        </div>
-        <TextElement
-          name="password2"
-          :input-type="showPwd2 ? 'text' : 'password'"
-          label="Ulangi Kata Sandi"
-          placeholder="Masukkan kata sandi..."
-          :floating="false"
-          :rules="['required']"
-          @input="changePwdErr = null"
-          onpaste="return false;">
-          <template #addon-after>
-            <EyeOff :size="22" v-if="showPwd2" class="cursor-pointer text-slate-400" @click="showPwd2 = false" />
-            <Eye :size="22" v-else class="cursor-pointer text-slate-400" @click="showPwd2 = true" />
-          </template>
-        </TextElement>
-        <div class="relative col-span-12 mt-1 h-12 cursor-default overflow-hidden rounded-md !border-gray-300 !bg-gray-300 px-6 !text-gray-300 transition" v-if="isLoadingChangePwd">
-          <div class="bottom-0 left-0 right-0 top-0 bg-gray-300">
-            <svg class="absolute bottom-0 left-0 right-0 top-0 m-auto h-7 w-7 animate-spin text-black" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <circle class="opacity-15" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
-              <path class="opacity-15" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-            </svg>
-          </div>
-        </div>
-        <ButtonElement size="lg" name="submit" button-class="mt-1 font-medium h-12 text-md" button-label="Tetapkan Kata Sandi" :submits="true" :full="true" v-else />
-      </Vueform>
-    </template>
-    <template #header>
-      <DialogTitle>Ganti Password</DialogTitle>
-      <DialogDescription class="text-sm">Masukkan password lama dan password baru Anda di bawah ini</DialogDescription>
-    </template>
-  </FormInputerDialog>
-</template>

package/template/src/components/helper/CheckboxElement.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../lib/utils';
-import { LucideCheck, LucideMinus } from 'lucide-vue-next';
-import { onMounted, watch } from 'vue';
-
-const model = defineModel();
-const emits = defineEmits(['change']);
-const props = defineProps(['checked', 'disabled', 'class', 'ignoreModel', 'indeterminate']);
-
-function toggleCheckbox() {
-  if (props.disabled) return;
-  if (!props.ignoreModel) model.value = !model.value;
-  emits('change', model.value);
-}
-
-watch(() => props.checked, (checked) => {
-  if (props.ignoreModel) return;
-  model.value = checked;
-})
-
-onMounted(() => {
-  if (props.checked && !props.ignoreModel) model.value = props.checked;
-})
-</script>
-
-<template>
-  <div class="size-8 hover:bg-blue-100 rounded-full flex items-center justify-center cursor-pointer -my-[5px] -mx-1.5 group"
-    :class="{'!cursor-default hover:bg-transparent': props.disabled}"
-    v-on:click="toggleCheckbox">
-    <div :class="[
-        cn('size-[18px] border-2 border-gray-400 rounded-sm flex items-center justify-center text-transparent group-hover:border-blue-500 transition', props.class),
-        {
-        '!border-blue-500 bg-blue-500 !text-white': (model || props.checked || props.indeterminate) && !props.disabled,
-        'bg-gray-100 !border-gray-100': props.disabled,
-        '!text-gray-300': (model || props.checked) && props.disabled,
-        '!text-transparent': !model && !props.checked && props.disabled,
-        },
-      ]">
-      <LucideCheck :stroke-width="3" v-if="model || props.checked"/>
-      <LucideMinus :stroke-width="3" v-else-if="props.indeterminate"/>
-    </div>
-  </div>
-</template>

package/template/src/components/helper/ConfigSwitcher.vue

@@ -1,54 +0,0 @@
-<template>
-  <div v-if="isConfigLoaded" class="fixed bottom-4 right-4 z-50">
-    <div class="rounded-lg border bg-white p-4 shadow-lg dark:bg-gray-800">
-      <h3 class="mb-2 text-sm font-semibold">Configuration Test</h3>
-      <div class="space-y-2 text-xs">
-        <div><strong>App:</strong> {{ appName }}</div>
-        <div><strong>Company:</strong> {{ companyName }}</div>
-        <div>
-          <strong>Color:</strong>
-          <span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: primaryColor }"></span>
-          {{ primaryColor }}
-        </div>
-        <div><strong>API:</strong> {{ apiBaseUrl }}</div>
-        <div><strong>Token Key:</strong> {{ tokenKey }}</div>
-        <div><strong>Org Levels:</strong> {{ organizationLevels.join(", ") }}</div>
-      </div>
-      <div class="mt-3 space-x-2">
-        <button @click="switchToConfig('myApp')" class="rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600">My App</button>
-        <button @click="switchToConfig('generic')" class="rounded bg-purple-500 px-2 py-1 text-xs text-white hover:bg-purple-600">Generic</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useAppConfig } from "@/composables/useAppConfig";
-import { myAppConfig } from "@/config/my-app.config";
-import { genericConfig } from "@/config/examples/generic.config";
-
-const { appName, companyName, primaryColor, apiBaseUrl, tokenKey, organizationLevels, isConfigLoaded, initializeConfig } = useAppConfig();
-
-const switchToConfig = async (configName: string) => {
-  console.log(`🔄 Switching to ${configName} configuration...`);
-
-  let config;
-  switch (configName) {
-    case "myApp":
-      config = myAppConfig;
-      break;
-    case "generic":
-      config = genericConfig;
-      break;
-    default:
-      return;
-  }
-
-  try {
-    await initializeConfig(config);
-    console.log(`✅ Switched to ${configName} configuration`);
-  } catch (error) {
-    console.error(`❌ Failed to switch to ${configName} configuration:`, error);
-  }
-};
-</script>

package/template/src/components/helper/Copyright.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { useAppConfig } from '../../composables/useAppConfig'
-
-const { companyName, appVersion } = useAppConfig()
-</script>
-
-<template>
-    &copy; Copyright {{ new Date().getFullYear() }} {{ companyName }}
-    &bull; Version {{ appVersion }}
-</template>

package/template/src/components/helper/ErrorScreen.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  errorMessage: string;
-}
-
-defineProps<Props>();
-
-const emit = defineEmits<{
-  retry: [];
-}>();
-
-function handleRetry() {
-  emit('retry');
-}
-</script>
-
-<template>
-  <div class="fixed inset-0 z-50 bg-white dark:bg-dark_bg flex items-center justify-center">
-    <div class="text-center max-w-md mx-auto px-6">
-      <div class="mb-8">
-        <div class="w-16 h-16 mx-auto mb-4 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center">
-          <svg class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-2">Koneksi Gagal</h2>
-        <p class="text-gray-600 dark:text-gray-300 mb-6">{{ errorMessage }}</p>
-        <button
-          @click="handleRetry"
-          class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition-colors duration-200"
-        >
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-          </svg>
-          Muat Ulang
-        </button>
-      </div>
-    </div>
-  </div>
-</template>

package/template/src/components/helper/LucideIcon.vue

@@ -1,27 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import * as icons from "lucide-vue-next";
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true
-  },
-  size: Number,
-  color: String,
-  strokeWidth: Number,
-  defaultClass: String,
-})
-
-const icon = computed(() => icons[props.name]);
-</script>
-
-<template>
-  <component
-    :is="icon"
-    :size="size"
-    :color="color"
-    :stroke-width="strokeWidth"
-    :default-class="defaultClass"
-  />
-</template>

package/template/src/components/helper/PdfViewer.vue

@@ -1,103 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
-import * as pdfjsLib from 'pdfjs-dist';
-import { nanoid } from 'nanoid';
-
-const props = defineProps(['url', 'index', 'scale', 'zoomType']);
-const pages = ref<any[]>([]);
-let pdfDoc: any;
-let canvas: any;
-
-async function renderPages() {
-  if (!pdfDoc) return;
-  console.log('render page with zoom', props.zoomType);
-  for (let i = 1; i <= pdfDoc.numPages; i++) {
-    pdfDoc.getPage(i).then(function(page: any) {
-      let scale = 1;
-      switch (props.zoomType) {
-        case 'page-width':
-          scale = getPageWidthScale();
-          break;
-        case 'page-fit':
-          scale = getPageFitScale();
-          break;
-        default:
-          scale = props.scale ? Number(props.scale) : 1;
-          break;
-      }
-
-      const viewport = page.getViewport({ scale });
-      const canvasElement = document.getElementById(`page-${props.index}-${i}`) as HTMLCanvasElement;
-      const context = canvasElement.getContext('2d');
-
-      // Set canvas dimensions based on the viewport and device pixel ratio
-      const devicePixelRatio = window.devicePixelRatio || 1;
-      canvasElement.width = viewport.width * devicePixelRatio;
-      canvasElement.height = viewport.height * devicePixelRatio;
-      canvasElement.style.width = `${viewport.width}px`;
-      canvasElement.style.height = `${viewport.height}px`;
-
-      // Scale the context to ensure correct drawing
-      context?.scale(devicePixelRatio, devicePixelRatio);
-
-      // Render PDF page into canvas context
-      var renderContext = {
-        canvasContext: context,
-        viewport: viewport
-      };
-      var renderTask = page.render(renderContext);
-      renderTask.promise.then(function () {
-        console.log('Page rendered');
-      });
-    });
-  }
-}
-
-// Function to calculate scale for page width
-function getPageWidthScale() {
-  let containerWidth = document.getElementById('pdf-viewer-container')?.clientWidth;
-  return containerWidth || 0 / canvas?.width || 0;
-}
-
-// Function to calculate scale for page fit
-function getPageFitScale() {
-  let containerWidth = document.getElementById('pdf-viewer-container')?.clientWidth;
-  let containerHeight = document.getElementById('pdf-viewer-container')?.clientHeight;
-  return Math.min(containerWidth || 0 / canvas.width, containerHeight || 0 / canvas.height);
-}
-
-watch(() => props.scale, () => {
-  renderPages();
-})
-
-watch(() => props.zoomType, () => {
-  renderPages();
-})
-
-
-onMounted(async () => {
-  // Set the worker path
-  pdfjsLib.GlobalWorkerOptions.workerSrc = '/scripts/pdf.worker.min.js';
-
-  // Load the PDF document
-  pdfjsLib.getDocument({
-    // url: `${props.url}?v=${nanoid()}`,
-    url: props.url,
-    withCredentials: true,
-  }).promise.then((pdf) => {
-    for (let i = 1; i <= pdf.numPages; i++) {
-      pages.value.push(i);
-    }
-    pdfDoc = pdf;
-    renderPages();
-  });
-})
-</script>
-
-<template>
-  <div class="space-y-4" :id="`pdf-${index}-container`">
-    <div class="rounded-md shadow-sm overflow-hidden" v-for="page in pages">
-      <canvas :key="page" :id="`page-${index}-${page}`"></canvas>
-    </div>
-  </div>
-</template>