{"version":3,"file":"test-CgMmYeQA.js","sources":["../../../../components/Ld/Pagination/index.vue","../../../../pages/test.vue"],"sourcesContent":["<script setup lang=\"ts\">\ninterface Props {\n  /** 页数 */\n  pages: number\n\n  scrollToTop?: boolean\n}\n\ninterface Emits {\n  (e: 'update:current', value: number): void\n  (e: 'currentChange', value: number): void\n}\n\nconst props = defineProps<Props>()\nconst emit = defineEmits<Emits>()\nconst current = defineModel<number>('modelValue', { default: 0 })\n\nconst filterPage = computed(() => {\n  const length = props.pages < 5 ? props.pages : 5\n  if (current.value < 5)\n    return Array.from({ length }, (_, i) => i + 1)\n\n  else if (current.value > props.pages - 4)\n    return Array.from({ length }, (_, i) => props.pages - 5 + i + 1)\n\n  else\n    return Array.from({ length }, (_, i) => i + current.value - 2)\n})\n\nconst route = useRoute()\nconst localePath = useLocalePath()\nfunction handleUrl(num: number) {\n  if (num < 1)\n    num = 1\n  else if (num > props.pages)\n    num = props.pages\n\n  return localePath({\n    path: route.path,\n    query: {\n      ...route.query,\n      current: String(num),\n    },\n  })\n}\n\nconst { windowScrollTo } = useLayout()\nfunction switchPage(num: number) {\n  if (num === current.value)\n    return\n\n  if (num < 1)\n    num = 1\n  else if (num > props.pages)\n    num = props.pages\n\n  current.value = num\n  emit('currentChange', num)\n\n  if (props.scrollToTop) {\n    windowScrollTo()\n  }\n}\n</script>\n\n<template>\n  <div class=\"pagination flex-center\" text=\"14px\" gap=\"12px\">\n    <NuxtLink :class=\"{ 'c-op-30! pointer-events-none': current <= 1 }\" :to=\"handleUrl(1)\" aria-label=\"first page\" @click=\"switchPage(1)\">\n      <svg class=\"flip-rtl\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect width=\"24\" height=\"24\" rx=\"4\" transform=\"matrix(-1 0 0 1 24 0)\" fill=\"white\" />\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.3536 8.10636C15.1583 7.9111 14.8417 7.9111 14.6464 8.10636L11.1109 11.6419C10.9157 11.8372 10.9157 12.1537 11.1109 12.349L14.6464 15.8845C14.8417 16.0798 15.1583 16.0798 15.3536 15.8845C15.5488 15.6893 15.5488 15.3727 15.3536 15.1774L12.1716 11.9954L15.3536 8.81347C15.5488 8.61821 15.5488 8.30162 15.3536 8.10636Z\" fill=\"currentcolor\" />\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.25732 8.5C8.98118 8.5 8.75732 8.72386 8.75732 9V15C8.75732 15.2761 8.98118 15.5 9.25732 15.5C9.53347 15.5 9.75732 15.2761 9.75732 15V9C9.75732 8.72386 9.53347 8.5 9.25732 8.5Z\" fill=\"currentcolor\" />\n      </svg>\n    </NuxtLink>\n    <NuxtLink :class=\"{ 'c-op-30! pointer-events-none': current <= 1 }\" :to=\"handleUrl(current - 1)\" aria-label=\"previous page\" @click=\"switchPage(current - 1)\">\n      <svg class=\"flip-rtl\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect width=\"24\" height=\"24\" rx=\"4\" transform=\"matrix(-1 0 0 1 24 0)\" fill=\"white\" />\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.3536 8.10636C13.1583 7.9111 12.8417 7.9111 12.6464 8.10636L9.11091 11.6419C8.91565 11.8372 8.91565 12.1537 9.11091 12.349L12.6464 15.8845C12.8417 16.0798 13.1583 16.0798 13.3536 15.8845C13.5488 15.6893 13.5488 15.3727 13.3536 15.1774L10.1716 11.9954L13.3536 8.81347C13.5488 8.61821 13.5488 8.30162 13.3536 8.10636Z\" fill=\"currentcolor\" />\n      </svg>\n    </NuxtLink>\n\n    <!-- 非首尾的时候展示 -->\n    <template v-if=\"current > 4\">\n      <NuxtLink :to=\"handleUrl(1)\" @click=\"switchPage(1)\">\n        <span>1</span>\n      </NuxtLink>\n      <NuxtLink :to=\"handleUrl(current - 3)\" @click=\"switchPage(current - 3)\">\n        <span>...</span>\n      </NuxtLink>\n    </template>\n    <!-- 只展示五条 -->\n    <template v-for=\"i in filterPage\" :key=\"i\">\n      <NuxtLink :class=\"{ 'c-purple-5! after:op-100! font-700': current === i }\" :to=\"handleUrl(i)\" @click=\"switchPage(i)\">\n        <span>{{ i }}</span>\n      </NuxtLink>\n    </template>\n\n    <!-- 非首尾的时候展示 -->\n    <template v-if=\"current < pages - 3\">\n      <NuxtLink :to=\"handleUrl(current + 3)\" @click=\"switchPage(current + 3)\">\n        <span>...</span>\n      </NuxtLink>\n      <NuxtLink :to=\"handleUrl(pages)\" @click=\"switchPage(pages)\">\n        <span>{{ pages }}</span>\n      </NuxtLink>\n    </template>\n\n    <NuxtLink :class=\"{ 'c-op-30! pointer-events-none': current >= pages }\" :to=\"handleUrl(current + 1)\" aria-label=\"next page\" @click=\"switchPage(current + 1)\">\n      <svg class=\"flip-rtl\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"white\" />\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.6464 8.10636C10.8417 7.9111 11.1583 7.9111 11.3536 8.10636L14.8891 11.6419C15.0843 11.8372 15.0843 12.1537 14.8891 12.349L11.3536 15.8845C11.1583 16.0798 10.8417 16.0798 10.6464 15.8845C10.4512 15.6893 10.4512 15.3727 10.6464 15.1774L13.8284 11.9954L10.6464 8.81347C10.4512 8.61821 10.4512 8.30162 10.6464 8.10636Z\" fill=\"currentcolor\" />\n      </svg>\n    </NuxtLink>\n    <NuxtLink :class=\"{ 'c-op-30! pointer-events-none': current >= pages }\" :to=\"handleUrl(pages)\" aria-label=\"last page\" @click=\"switchPage(pages)\">\n      <svg class=\"flip-rtl\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"white\" />\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.64645 8.10636C8.84171 7.9111 9.15829 7.9111 9.35355 8.10636L12.8891 11.6419C13.0843 11.8372 13.0843 12.1537 12.8891 12.349L9.35355 15.8845C9.15829 16.0798 8.84171 16.0798 8.64645 15.8845C8.45118 15.6893 8.45118 15.3727 8.64645 15.1774L11.8284 11.9954L8.64645 8.81347C8.45118 8.61821 8.45118 8.30162 8.64645 8.10636Z\" fill=\"currentcolor\" />\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.7427 8.5C15.0188 8.5 15.2427 8.72386 15.2427 9V15C15.2427 15.2761 15.0188 15.5 14.7427 15.5C14.4665 15.5 14.2427 15.2761 14.2427 15V9C14.2427 8.72386 14.4665 8.5 14.7427 8.5Z\" fill=\"currentcolor\" />\n      </svg>\n    </NuxtLink>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.pagination a {\n  --at-apply:  relative min-w-24px h-24px flex-center c-#161636 c-op-70 transition-all-300 hover:c-purple-5 active:c-purple-6;\n\n  span {\n    --at-apply: px-6px;\n  }\n\n  &::after {\n    --at-apply: absolute content-empty left-0 right-0 bottom-0 h-2px op-0 rd-5px bg-#6964fd transition-all-300;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\ndefinePageMeta({\n  validate: () => {\n    return !isProd()\n  },\n})\n\nconst route = useRoute()\nconst dark = ref(false)\nconst current = ref(Number(route.query.current ?? 1))\n</script>\n\n<template>\n  <div class=\"view-content text-14px\" pb=\"80px md:160px\">\n    <div class=\"mt-40px\">\n      <button class=\"ld-button mis-4px ld-button-purple\" @click=\"dark = !dark\">\n        切换底色\n      </button>\n\n      <div class=\"mt-20px rd-8px p-8px\" :class=\"dark && 'bg-[var(--bg-color)] c-#fff'\">\n        <div>\n          <p class=\"mb-12px\">\n            purple\n          </p>\n          <div>\n            <span class=\"inline-block w-72px text-center c-purple-1\">purple-1</span>\n            <span class=\"inline-block w-72px text-center c-purple-15\">purple-15</span>\n            <span class=\"inline-block w-72px text-center c-purple-2\">purple-2</span>\n            <span class=\"inline-block w-72px text-center c-purple-25\">purple-25</span>\n            <span class=\"inline-block w-72px text-center c-purple-3\">purple-3</span>\n            <span class=\"inline-block w-72px text-center c-purple-35\">purple-35</span>\n            <span class=\"inline-block w-72px text-center c-purple-4\">purple-4</span>\n            <span class=\"inline-block w-72px text-center c-purple-45\">purple-45</span>\n            <span class=\"inline-block w-72px text-center c-purple-5\">purple-5</span>\n            <span class=\"inline-block w-72px text-center c-purple-55\">purple-55</span>\n            <span class=\"inline-block w-72px text-center c-purple-6\">purple-6</span>\n            <span class=\"inline-block w-72px text-center c-purple-65\">purple-65</span>\n            <span class=\"inline-block w-72px text-center c-purple-7\">purple-7</span>\n            <span class=\"inline-block w-72px text-center c-purple-75\">purple-75</span>\n            <span class=\"inline-block w-72px text-center c-purple-8\">purple-8</span>\n            <span class=\"inline-block w-72px text-center c-purple-85\">purple-85</span>\n            <span class=\"inline-block w-72px text-center c-purple-9\">purple-9</span>\n          </div>\n        </div>\n\n        <div>\n          <p class=\"mb-12px mt-20px\">\n            yellow\n          </p>\n          <div>\n            <span class=\"inline-block w-72px text-center c-yellow-1\">yellow-1</span>\n            <span class=\"inline-block w-72px text-center c-yellow-15\">yellow-15</span>\n            <span class=\"inline-block w-72px text-center c-yellow-2\">yellow-2</span>\n            <span class=\"inline-block w-72px text-center c-yellow-25\">yellow-25</span>\n            <span class=\"inline-block w-72px text-center c-yellow-3\">yellow-3</span>\n            <span class=\"inline-block w-72px text-center c-yellow-35\">yellow-35</span>\n            <span class=\"inline-block w-72px text-center c-yellow-4\">yellow-4</span>\n            <span class=\"inline-block w-72px text-center c-yellow-45\">yellow-45</span>\n            <span class=\"inline-block w-72px text-center c-yellow-5\">yellow-5</span>\n            <span class=\"inline-block w-72px text-center c-yellow-55\">yellow-55</span>\n            <span class=\"inline-block w-72px text-center c-yellow-6\">yellow-6</span>\n            <span class=\"inline-block w-72px text-center c-yellow-65\">yellow-65</span>\n            <span class=\"inline-block w-72px text-center c-yellow-7\">yellow-7</span>\n            <span class=\"inline-block w-72px text-center c-yellow-75\">yellow-75</span>\n            <span class=\"inline-block w-72px text-center c-yellow-8\">yellow-8</span>\n            <span class=\"inline-block w-72px text-center c-yellow-85\">yellow-85</span>\n            <span class=\"inline-block w-72px text-center c-yellow-9\">yellow-9</span>\n          </div>\n        </div>\n\n        <div>\n          <p class=\"mb-12px mt-20px\">\n            button\n          </p>\n          <div class=\"flex gap-8px\">\n            <button class=\"ld-button ld-button-purple\">\n              purple\n            </button>\n            <button class=\"ld-button ld-button-purple\" disabled>\n              purple disabled\n            </button>\n            <button class=\"ld-button ld-button-purple-outline\">\n              purple outline\n            </button>\n            <button class=\"ld-button ld-button-purple-outline\" disabled>\n              purple outline disabled\n            </button>\n            <button class=\"ld-button ld-button-yellow\">\n              yellow\n            </button>\n            <button class=\"ld-button ld-button-yellow\" disabled>\n              yellow disabled\n            </button>\n          </div>\n        </div>\n\n        <div>\n          <p class=\"mb-12px mt-20px\">\n            dropdown\n          </p>\n          <LdDropdown class=\"relative z-2 w-fit text-16px\" :list=\"['aaaa', 'bbbbb', 'ccccc']\">\n            <span class=\"font-700\">dropdown</span>\n            <template #item=\"{ item }\">\n              <LdOptionsItem>\n                {{ item }}\n              </LdOptionsItem>\n            </template>\n          </LdDropdown>\n        </div>\n\n        <div>\n          <p class=\"mb-12px mt-20px\">\n            pagination\n          </p>\n          <LdPagination v-model=\"current\" class=\"justify-start\" :pages=\"10\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n</style>\n"],"names":["props","__props","emit","__emit","current","_useModel","filterPage","computed","length","_","i","route","useRoute","localePath","useLocalePath","handleUrl","num","windowScrollTo","useLayout","switchPage","dark","ref"],"mappings":"6hBAaA,MAAMA,EAAQC,EACRC,EAAOC,EACPC,EAAUC,EAAmBJ,EAAC,YAA4B,EAE1DK,EAAaC,EAAS,IAAM,CAChC,MAAMC,EAASR,EAAM,MAAQ,EAAIA,EAAM,MAAQ,EAC/C,OAAII,EAAQ,MAAQ,EACX,MAAM,KAAK,CAAE,OAAAI,GAAU,CAACC,EAAGC,IAAMA,EAAI,CAAC,EAEtCN,EAAQ,MAAQJ,EAAM,MAAQ,EAC9B,MAAM,KAAK,CAAE,OAAAQ,CAAA,EAAU,CAACC,EAAGC,IAAMV,EAAM,MAAQ,EAAIU,EAAI,CAAC,EAGxD,MAAM,KAAK,CAAE,OAAAF,CAAO,EAAG,CAACC,EAAGC,IAAMA,EAAIN,EAAQ,MAAQ,CAAC,CAAA,CAChE,EAEKO,EAAQC,IACRC,EAAaC,IACnB,SAASC,EAAUC,EAAa,CAC9B,OAAIA,EAAM,EACFA,EAAA,EACCA,EAAMhB,EAAM,QACnBgB,EAAMhB,EAAM,OAEPa,EAAW,CAChB,KAAMF,EAAM,KACZ,MAAO,CACL,GAAGA,EAAM,MACT,QAAS,OAAOK,CAAG,CACrB,CAAA,CACD,CACH,CAEM,KAAA,CAAE,eAAAC,GAAmBC,IAC3B,SAASC,EAAWH,EAAa,CAC3BA,IAAQZ,EAAQ,QAGhBY,EAAM,EACFA,EAAA,EACCA,EAAMhB,EAAM,QACnBgB,EAAMhB,EAAM,OAEdI,EAAQ,MAAQY,EAChBd,EAAK,gBAAiBc,CAAG,EAErBhB,EAAM,aACOiB,IAEnB,2iJCvDA,MAAMN,EAAQC,IACRQ,EAAOC,EAAI,EAAK,EAChBjB,EAAUiB,EAAI,OAAOV,EAAM,MAAM,SAAW,CAAC,CAAC"}