cisse-vue-ui 0.8.3 → 0.9.0

package/dist/ListSkeleton.vue_vue_type_script_setup_true_lang-BHopJ9RG.js

@@ -0,0 +1,298 @@
+import { defineComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, Fragment, renderList, normalizeStyle, computed, toDisplayString, createVNode, unref, normalizeClass } from "vue";
+import { Icon } from "@iconify/vue";
+const _hoisted_1$3 = {
+  class: "bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 space-y-4",
+  "aria-hidden": "true"
+};
+const _hoisted_2$3 = {
+  key: 0,
+  class: "flex items-center gap-3"
+};
+const _hoisted_3$2 = { class: "space-y-2" };
+const _hoisted_4$2 = {
+  key: 1,
+  class: "flex justify-end gap-2 pt-2"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "CardSkeleton",
+  props: {
+    showAvatar: { type: Boolean, default: false },
+    lines: { default: 3 },
+    showActions: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        __props.showAvatar ? (openBlock(), createElementBlock("div", _hoisted_2$3, [..._cache[0] || (_cache[0] = [
+          createElementVNode("div", { class: "size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse" }, null, -1),
+          createElementVNode("div", { class: "flex-1 space-y-2" }, [
+            createElementVNode("div", { class: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2" }),
+            createElementVNode("div", { class: "h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/3" })
+          ], -1)
+        ])])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.lines, (line) => {
+            return openBlock(), createElementBlock("div", {
+              key: line,
+              class: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+              style: normalizeStyle({ width: line === __props.lines ? "60%" : "100%" })
+            }, null, 4);
+          }), 128))
+        ]),
+        __props.showActions ? (openBlock(), createElementBlock("div", _hoisted_4$2, [..._cache[1] || (_cache[1] = [
+          createElementVNode("div", { class: "h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }, null, -1),
+          createElementVNode("div", { class: "h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }, null, -1)
+        ])])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$2 = {
+  class: "w-full",
+  "aria-hidden": "true"
+};
+const _hoisted_2$2 = {
+  key: 0,
+  class: "flex gap-4 px-4 py-3 border-b border-gray-200 dark:border-gray-700"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "TableSkeleton",
+  props: {
+    rows: { default: 5 },
+    columns: { default: 4 },
+    showHeader: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        __props.showHeader ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+            return openBlock(), createElementBlock("div", {
+              key: `header-${col}`,
+              class: "flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+              style: normalizeStyle({ maxWidth: col === 1 ? "30%" : "20%" })
+            }, null, 4);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row) => {
+          return openBlock(), createElementBlock("div", {
+            key: `row-${row}`,
+            class: "flex items-center gap-4 px-4 py-4 border-b border-gray-100 dark:border-gray-800"
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+              return openBlock(), createElementBlock("div", {
+                key: `cell-${row}-${col}`,
+                class: "flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+                style: normalizeStyle({
+                  maxWidth: col === 1 ? "40%" : col === __props.columns ? "15%" : "25%",
+                  opacity: 1 - row * 0.1
+                })
+              }, null, 4);
+            }), 128))
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _hoisted_1$1 = {
+  key: 0,
+  class: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-200 px-4 sm:px-6 py-4 dark:border-gray-700"
+};
+const _hoisted_2$1 = { class: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4" };
+const _hoisted_3$1 = { class: "text-sm text-gray-700 dark:text-gray-300 text-center sm:text-left" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "flex items-center justify-center sm:justify-start gap-2"
+};
+const _hoisted_5 = {
+  class: "text-sm text-gray-600 dark:text-gray-400 hidden sm:inline",
+  for: "page-size"
+};
+const _hoisted_6 = ["value"];
+const _hoisted_7 = ["value"];
+const _hoisted_8 = { class: "flex justify-center sm:justify-end items-center gap-1" };
+const _hoisted_9 = ["disabled"];
+const _hoisted_10 = { class: "hidden sm:inline" };
+const _hoisted_11 = {
+  key: 0,
+  class: "px-2 py-2 text-sm text-gray-500 dark:text-gray-400"
+};
+const _hoisted_12 = ["disabled", "onClick"];
+const _hoisted_13 = ["disabled"];
+const _hoisted_14 = { class: "hidden sm:inline" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "PaginationControls",
+  props: {
+    currentPage: {},
+    totalPages: {},
+    loading: { type: Boolean, default: false },
+    pageSize: { default: 10 },
+    pageSizeOptions: { default: () => [10, 20, 50, 100] },
+    showPageSize: { type: Boolean, default: true },
+    showPageNumbers: { type: Boolean, default: true },
+    maxVisiblePages: { default: 7 },
+    pageLabel: { default: "Page" },
+    ofLabel: { default: "of" },
+    itemsPerPageLabel: { default: "Items per page:" },
+    previousLabel: { default: "Previous" },
+    nextLabel: { default: "Next" }
+  },
+  emits: ["update:page", "update:pageSize"],
+  setup(__props, { emit: __emit }) {
+    const visiblePages = computed(() => {
+      if (__props.totalPages <= __props.maxVisiblePages) {
+        return Array.from({ length: __props.totalPages }, (_, i) => i + 1);
+      }
+      const pages = [];
+      const sidePages = Math.floor((__props.maxVisiblePages - 3) / 2);
+      pages.push(1);
+      let rangeStart = Math.max(2, __props.currentPage - sidePages);
+      let rangeEnd = Math.min(__props.totalPages - 1, __props.currentPage + sidePages);
+      if (__props.currentPage <= sidePages + 2) {
+        rangeEnd = Math.min(__props.totalPages - 1, __props.maxVisiblePages - 2);
+      } else if (__props.currentPage >= __props.totalPages - sidePages - 1) {
+        rangeStart = Math.max(2, __props.totalPages - __props.maxVisiblePages + 3);
+      }
+      if (rangeStart > 2) {
+        pages.push("ellipsis-start");
+      }
+      for (let i = rangeStart; i <= rangeEnd; i++) {
+        pages.push(i);
+      }
+      if (rangeEnd < __props.totalPages - 1) {
+        pages.push("ellipsis-end");
+      }
+      if (__props.totalPages > 1) {
+        pages.push(__props.totalPages);
+      }
+      return pages;
+    });
+    const emit = __emit;
+    const changePage = (page) => {
+      if (page >= 1 && page <= __props.totalPages && !__props.loading) {
+        emit("update:page", page);
+      }
+    };
+    const changePageSize = (event) => {
+      const target = event.target;
+      emit("update:pageSize", Number(target.value));
+    };
+    return (_ctx, _cache) => {
+      return __props.totalPages > 1 ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2$1, [
+          createElementVNode("div", _hoisted_3$1, toDisplayString(__props.pageLabel) + " " + toDisplayString(__props.currentPage) + " " + toDisplayString(__props.ofLabel) + " " + toDisplayString(__props.totalPages), 1),
+          __props.showPageSize ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+            createElementVNode("label", _hoisted_5, toDisplayString(__props.itemsPerPageLabel), 1),
+            createElementVNode("select", {
+              id: "page-size",
+              value: __props.pageSize,
+              class: "focus:border-primary focus:ring-primary rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100",
+              onChange: changePageSize
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pageSizeOptions, (size) => {
+                return openBlock(), createElementBlock("option", {
+                  key: size,
+                  value: size
+                }, toDisplayString(size), 9, _hoisted_7);
+              }), 128))
+            ], 40, _hoisted_6)
+          ])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_8, [
+          createElementVNode("button", {
+            disabled: __props.currentPage === 1 || __props.loading,
+            class: "focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+            onClick: _cache[0] || (_cache[0] = ($event) => changePage(__props.currentPage - 1))
+          }, [
+            createVNode(unref(Icon), {
+              class: "size-4",
+              icon: "lucide:chevron-left"
+            }),
+            createElementVNode("span", _hoisted_10, toDisplayString(__props.previousLabel), 1)
+          ], 8, _hoisted_9),
+          __props.showPageNumbers ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(visiblePages.value, (page) => {
+            return openBlock(), createElementBlock(Fragment, { key: page }, [
+              page === "ellipsis-start" || page === "ellipsis-end" ? (openBlock(), createElementBlock("span", _hoisted_11, " … ")) : (openBlock(), createElementBlock("button", {
+                key: 1,
+                disabled: __props.loading,
+                class: normalizeClass([
+                  "min-w-[40px] px-3 py-2 text-sm font-medium rounded-lg border transition-colors",
+                  page === __props.currentPage ? "bg-primary-600 text-white border-primary-600 dark:bg-primary-500 dark:border-primary-500" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700",
+                  __props.loading ? "cursor-not-allowed opacity-50" : ""
+                ]),
+                onClick: ($event) => changePage(page)
+              }, toDisplayString(page), 11, _hoisted_12))
+            ], 64);
+          }), 128)) : createCommentVNode("", true),
+          createElementVNode("button", {
+            disabled: __props.currentPage === __props.totalPages || __props.loading,
+            class: "focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+            onClick: _cache[1] || (_cache[1] = ($event) => changePage(__props.currentPage + 1))
+          }, [
+            createElementVNode("span", _hoisted_14, toDisplayString(__props.nextLabel), 1),
+            createVNode(unref(Icon), {
+              class: "size-4",
+              icon: "lucide:chevron-right"
+            })
+          ], 8, _hoisted_13)
+        ])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1 = {
+  class: "divide-y divide-gray-200 dark:divide-gray-700",
+  "aria-hidden": "true"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "shrink-0 size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse"
+};
+const _hoisted_3 = { class: "flex-1 min-w-0 space-y-2" };
+const _hoisted_4 = {
+  key: 1,
+  class: "shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ListSkeleton",
+  props: {
+    items: { default: 5 },
+    showAvatar: { type: Boolean, default: true },
+    showSecondary: { type: Boolean, default: true },
+    showAction: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+          return openBlock(), createElementBlock("div", {
+            key: item,
+            class: "flex items-center gap-4 py-4 px-4"
+          }, [
+            __props.showAvatar ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", {
+                class: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+                style: normalizeStyle({ width: `${60 + Math.random() * 30}%` })
+              }, null, 4),
+              __props.showSecondary ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+                style: normalizeStyle({ width: `${40 + Math.random() * 20}%` })
+              }, null, 4)) : createCommentVNode("", true)
+            ]),
+            __props.showAction ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true)
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main$1 as _,
+  _sfc_main$2 as a,
+  _sfc_main$3 as b,
+  _sfc_main as c
+};
+//# sourceMappingURL=ListSkeleton.vue_vue_type_script_setup_true_lang-BHopJ9RG.js.map

package/dist/ListSkeleton.vue_vue_type_script_setup_true_lang-BHopJ9RG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSkeleton.vue_vue_type_script_setup_true_lang-BHopJ9RG.js","sources":["../src/components/feedback/CardSkeleton.vue","../src/components/feedback/TableSkeleton.vue","../src/components/feedback/PaginationControls.vue","../src/components/feedback/ListSkeleton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Number of text lines */\r\n    lines?: number\r\n    /** Show action buttons */\r\n    showActions?: boolean\r\n  }>(),\r\n  {\r\n    showAvatar: false,\r\n    lines: 3,\r\n    showActions: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 space-y-4\" aria-hidden=\"true\">\r\n    <!-- Header with avatar -->\r\n    <div v-if=\"showAvatar\" class=\"flex items-center gap-3\">\r\n      <div class=\"size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\" />\r\n      <div class=\"flex-1 space-y-2\">\r\n        <div class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2\" />\r\n        <div class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/3\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Content lines -->\r\n    <div class=\"space-y-2\">\r\n      <div\r\n        v-for=\"line in lines\"\r\n        :key=\"line\"\r\n        class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ width: line === lines ? '60%' : '100%' }\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Actions -->\r\n    <div v-if=\"showActions\" class=\"flex justify-end gap-2 pt-2\">\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of rows */\r\n    rows?: number\r\n    /** Number of columns */\r\n    columns?: number\r\n    /** Show header */\r\n    showHeader?: boolean\r\n  }>(),\r\n  {\r\n    rows: 5,\r\n    columns: 4,\r\n    showHeader: true,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"w-full\" aria-hidden=\"true\">\r\n    <!-- Header -->\r\n    <div\r\n      v-if=\"showHeader\"\r\n      class=\"flex gap-4 px-4 py-3 border-b border-gray-200 dark:border-gray-700\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`header-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ maxWidth: col === 1 ? '30%' : '20%' }\"\r\n      />\r\n    </div>\r\n    <!-- Rows -->\r\n    <div\r\n      v-for=\"row in rows\"\r\n      :key=\"`row-${row}`\"\r\n      class=\"flex items-center gap-4 px-4 py-4 border-b border-gray-100 dark:border-gray-800\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`cell-${row}-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{\r\n          maxWidth: col === 1 ? '40%' : col === columns ? '15%' : '25%',\r\n          opacity: 1 - (row * 0.1)\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nimport { computed } from 'vue'\r\nimport { Icon } from '@iconify/vue'\r\n\r\nconst {\r\n  currentPage,\r\n  totalPages,\r\n  loading = false,\r\n  pageSize = 10,\r\n  pageSizeOptions = [10, 20, 50, 100],\r\n  showPageSize = true,\r\n  showPageNumbers = true,\r\n  maxVisiblePages = 7,\r\n  pageLabel = 'Page',\r\n  ofLabel = 'of',\r\n  itemsPerPageLabel = 'Items per page:',\r\n  previousLabel = 'Previous',\r\n  nextLabel = 'Next',\r\n} = defineProps<{\r\n  currentPage: number\r\n  totalPages: number\r\n  loading?: boolean\r\n  pageSize?: number\r\n  pageSizeOptions?: number[]\r\n  showPageSize?: boolean\r\n  showPageNumbers?: boolean\r\n  maxVisiblePages?: number\r\n  pageLabel?: string\r\n  ofLabel?: string\r\n  itemsPerPageLabel?: string\r\n  previousLabel?: string\r\n  nextLabel?: string\r\n}>()\r\n\r\ntype PageItem = number | 'ellipsis-start' | 'ellipsis-end'\r\n\r\nconst visiblePages = computed<PageItem[]>(() => {\r\n  if (totalPages <= maxVisiblePages) {\r\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\r\n  }\r\n\r\n  const pages: PageItem[] = []\r\n  const sidePages = Math.floor((maxVisiblePages - 3) / 2)\r\n\r\n  // Always show first page\r\n  pages.push(1)\r\n\r\n  // Calculate range around current page\r\n  let rangeStart = Math.max(2, currentPage - sidePages)\r\n  let rangeEnd = Math.min(totalPages - 1, currentPage + sidePages)\r\n\r\n  // Adjust range to show more pages on one side if near edges\r\n  if (currentPage <= sidePages + 2) {\r\n    rangeEnd = Math.min(totalPages - 1, maxVisiblePages - 2)\r\n  } else if (currentPage >= totalPages - sidePages - 1) {\r\n    rangeStart = Math.max(2, totalPages - maxVisiblePages + 3)\r\n  }\r\n\r\n  // Add ellipsis or pages after first page\r\n  if (rangeStart > 2) {\r\n    pages.push('ellipsis-start')\r\n  }\r\n\r\n  // Add range pages\r\n  for (let i = rangeStart; i <= rangeEnd; i++) {\r\n    pages.push(i)\r\n  }\r\n\r\n  // Add ellipsis or pages before last page\r\n  if (rangeEnd < totalPages - 1) {\r\n    pages.push('ellipsis-end')\r\n  }\r\n\r\n  // Always show last page\r\n  if (totalPages > 1) {\r\n    pages.push(totalPages)\r\n  }\r\n\r\n  return pages\r\n})\r\n\r\nconst emit = defineEmits<{\r\n  'update:page': [page: number]\r\n  'update:pageSize': [size: number]\r\n}>()\r\n\r\nconst changePage = (page: number) => {\r\n  if (page >= 1 && page <= totalPages && !loading) {\r\n    emit('update:page', page)\r\n  }\r\n}\r\n\r\nconst changePageSize = (event: Event) => {\r\n  const target = event.target as HTMLSelectElement\r\n  emit('update:pageSize', Number(target.value))\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"totalPages > 1\"\r\n    class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-200 px-4 sm:px-6 py-4 dark:border-gray-700\"\r\n  >\r\n    <!-- Info and page size -->\r\n    <div class=\"flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4\">\r\n      <div class=\"text-sm text-gray-700 dark:text-gray-300 text-center sm:text-left\">\r\n        {{ pageLabel }} {{ currentPage }} {{ ofLabel }} {{ totalPages }}\r\n      </div>\r\n      <div\r\n        v-if=\"showPageSize\"\r\n        class=\"flex items-center justify-center sm:justify-start gap-2\"\r\n      >\r\n        <label\r\n          class=\"text-sm text-gray-600 dark:text-gray-400 hidden sm:inline\"\r\n          for=\"page-size\"\r\n        >\r\n          {{ itemsPerPageLabel }}\r\n        </label>\r\n        <select\r\n          id=\"page-size\"\r\n          :value=\"pageSize\"\r\n          class=\"focus:border-primary focus:ring-primary rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100\"\r\n          @change=\"changePageSize\"\r\n        >\r\n          <option\r\n            v-for=\"size in pageSizeOptions\"\r\n            :key=\"size\"\r\n            :value=\"size\"\r\n          >\r\n            {{ size }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Navigation buttons -->\r\n    <div class=\"flex justify-center sm:justify-end items-center gap-1\">\r\n      <!-- Previous button -->\r\n      <button\r\n        :disabled=\"currentPage === 1 || loading\"\r\n        class=\"focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\r\n        @click=\"changePage(currentPage - 1)\"\r\n      >\r\n        <Icon\r\n          class=\"size-4\"\r\n          icon=\"lucide:chevron-left\"\r\n        />\r\n        <span class=\"hidden sm:inline\">{{ previousLabel }}</span>\r\n      </button>\r\n\r\n      <!-- Page numbers -->\r\n      <template v-if=\"showPageNumbers\">\r\n        <template\r\n          v-for=\"page in visiblePages\"\r\n          :key=\"page\"\r\n        >\r\n          <!-- Ellipsis -->\r\n          <span\r\n            v-if=\"page === 'ellipsis-start' || page === 'ellipsis-end'\"\r\n            class=\"px-2 py-2 text-sm text-gray-500 dark:text-gray-400\"\r\n          >\r\n            …\r\n          </span>\r\n          <!-- Page number button -->\r\n          <button\r\n            v-else\r\n            :disabled=\"loading\"\r\n            :class=\"[\r\n              'min-w-[40px] px-3 py-2 text-sm font-medium rounded-lg border transition-colors',\r\n              page === currentPage\r\n                ? 'bg-primary-600 text-white border-primary-600 dark:bg-primary-500 dark:border-primary-500'\r\n                : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700',\r\n              loading ? 'cursor-not-allowed opacity-50' : ''\r\n            ]\"\r\n            @click=\"changePage(page)\"\r\n          >\r\n            {{ page }}\r\n          </button>\r\n        </template>\r\n      </template>\r\n\r\n      <!-- Next button -->\r\n      <button\r\n        :disabled=\"currentPage === totalPages || loading\"\r\n        class=\"focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\r\n        @click=\"changePage(currentPage + 1)\"\r\n      >\r\n        <span class=\"hidden sm:inline\">{{ nextLabel }}</span>\r\n        <Icon\r\n          class=\"size-4\"\r\n          icon=\"lucide:chevron-right\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of items */\r\n    items?: number\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Show secondary text */\r\n    showSecondary?: boolean\r\n    /** Show action button */\r\n    showAction?: boolean\r\n  }>(),\r\n  {\r\n    items: 5,\r\n    showAvatar: true,\r\n    showSecondary: true,\r\n    showAction: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"divide-y divide-gray-200 dark:divide-gray-700\" aria-hidden=\"true\">\r\n    <div\r\n      v-for=\"item in items\"\r\n      :key=\"item\"\r\n      class=\"flex items-center gap-4 py-4 px-4\"\r\n    >\r\n      <!-- Avatar -->\r\n      <div\r\n        v-if=\"showAvatar\"\r\n        class=\"shrink-0 size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n\r\n      <!-- Content -->\r\n      <div class=\"flex-1 min-w-0 space-y-2\">\r\n        <div\r\n          class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${60 + Math.random() * 30}%` }\"\r\n        />\r\n        <div\r\n          v-if=\"showSecondary\"\r\n          class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${40 + Math.random() * 20}%` }\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Action -->\r\n      <div\r\n        v-if=\"showAction\"\r\n        class=\"shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_Fragment","_renderList","_normalizeStyle","_hoisted_4","_toDisplayString","_createVNode","_unref","_normalizeClass"],"mappings":"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"}

package/dist/ListSkeleton.vue_vue_type_script_setup_true_lang-Bo3HqgX0.cjs

@@ -0,0 +1,297 @@
+"use strict";
+const vue = require("vue");
+const vue$1 = require("@iconify/vue");
+const _hoisted_1$3 = {
+  class: "bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 space-y-4",
+  "aria-hidden": "true"
+};
+const _hoisted_2$3 = {
+  key: 0,
+  class: "flex items-center gap-3"
+};
+const _hoisted_3$2 = { class: "space-y-2" };
+const _hoisted_4$2 = {
+  key: 1,
+  class: "flex justify-end gap-2 pt-2"
+};
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "CardSkeleton",
+  props: {
+    showAvatar: { type: Boolean, default: false },
+    lines: { default: 3 },
+    showActions: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+        __props.showAvatar ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [..._cache[0] || (_cache[0] = [
+          vue.createElementVNode("div", { class: "size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse" }, null, -1),
+          vue.createElementVNode("div", { class: "flex-1 space-y-2" }, [
+            vue.createElementVNode("div", { class: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2" }),
+            vue.createElementVNode("div", { class: "h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/3" })
+          ], -1)
+        ])])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_3$2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.lines, (line) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: line,
+              class: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+              style: vue.normalizeStyle({ width: line === __props.lines ? "60%" : "100%" })
+            }, null, 4);
+          }), 128))
+        ]),
+        __props.showActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [..._cache[1] || (_cache[1] = [
+          vue.createElementVNode("div", { class: "h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }, null, -1),
+          vue.createElementVNode("div", { class: "h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }, null, -1)
+        ])])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$2 = {
+  class: "w-full",
+  "aria-hidden": "true"
+};
+const _hoisted_2$2 = {
+  key: 0,
+  class: "flex gap-4 px-4 py-3 border-b border-gray-200 dark:border-gray-700"
+};
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableSkeleton",
+  props: {
+    rows: { default: 5 },
+    columns: { default: 4 },
+    showHeader: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        __props.showHeader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.columns, (col) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: `header-${col}`,
+              class: "flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+              style: vue.normalizeStyle({ maxWidth: col === 1 ? "30%" : "20%" })
+            }, null, 4);
+          }), 128))
+        ])) : vue.createCommentVNode("", true),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.rows, (row) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: `row-${row}`,
+            class: "flex items-center gap-4 px-4 py-4 border-b border-gray-100 dark:border-gray-800"
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.columns, (col) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: `cell-${row}-${col}`,
+                class: "flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+                style: vue.normalizeStyle({
+                  maxWidth: col === 1 ? "40%" : col === __props.columns ? "15%" : "25%",
+                  opacity: 1 - row * 0.1
+                })
+              }, null, 4);
+            }), 128))
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _hoisted_1$1 = {
+  key: 0,
+  class: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-200 px-4 sm:px-6 py-4 dark:border-gray-700"
+};
+const _hoisted_2$1 = { class: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4" };
+const _hoisted_3$1 = { class: "text-sm text-gray-700 dark:text-gray-300 text-center sm:text-left" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "flex items-center justify-center sm:justify-start gap-2"
+};
+const _hoisted_5 = {
+  class: "text-sm text-gray-600 dark:text-gray-400 hidden sm:inline",
+  for: "page-size"
+};
+const _hoisted_6 = ["value"];
+const _hoisted_7 = ["value"];
+const _hoisted_8 = { class: "flex justify-center sm:justify-end items-center gap-1" };
+const _hoisted_9 = ["disabled"];
+const _hoisted_10 = { class: "hidden sm:inline" };
+const _hoisted_11 = {
+  key: 0,
+  class: "px-2 py-2 text-sm text-gray-500 dark:text-gray-400"
+};
+const _hoisted_12 = ["disabled", "onClick"];
+const _hoisted_13 = ["disabled"];
+const _hoisted_14 = { class: "hidden sm:inline" };
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "PaginationControls",
+  props: {
+    currentPage: {},
+    totalPages: {},
+    loading: { type: Boolean, default: false },
+    pageSize: { default: 10 },
+    pageSizeOptions: { default: () => [10, 20, 50, 100] },
+    showPageSize: { type: Boolean, default: true },
+    showPageNumbers: { type: Boolean, default: true },
+    maxVisiblePages: { default: 7 },
+    pageLabel: { default: "Page" },
+    ofLabel: { default: "of" },
+    itemsPerPageLabel: { default: "Items per page:" },
+    previousLabel: { default: "Previous" },
+    nextLabel: { default: "Next" }
+  },
+  emits: ["update:page", "update:pageSize"],
+  setup(__props, { emit: __emit }) {
+    const visiblePages = vue.computed(() => {
+      if (__props.totalPages <= __props.maxVisiblePages) {
+        return Array.from({ length: __props.totalPages }, (_, i) => i + 1);
+      }
+      const pages = [];
+      const sidePages = Math.floor((__props.maxVisiblePages - 3) / 2);
+      pages.push(1);
+      let rangeStart = Math.max(2, __props.currentPage - sidePages);
+      let rangeEnd = Math.min(__props.totalPages - 1, __props.currentPage + sidePages);
+      if (__props.currentPage <= sidePages + 2) {
+        rangeEnd = Math.min(__props.totalPages - 1, __props.maxVisiblePages - 2);
+      } else if (__props.currentPage >= __props.totalPages - sidePages - 1) {
+        rangeStart = Math.max(2, __props.totalPages - __props.maxVisiblePages + 3);
+      }
+      if (rangeStart > 2) {
+        pages.push("ellipsis-start");
+      }
+      for (let i = rangeStart; i <= rangeEnd; i++) {
+        pages.push(i);
+      }
+      if (rangeEnd < __props.totalPages - 1) {
+        pages.push("ellipsis-end");
+      }
+      if (__props.totalPages > 1) {
+        pages.push(__props.totalPages);
+      }
+      return pages;
+    });
+    const emit = __emit;
+    const changePage = (page) => {
+      if (page >= 1 && page <= __props.totalPages && !__props.loading) {
+        emit("update:page", page);
+      }
+    };
+    const changePageSize = (event) => {
+      const target = event.target;
+      emit("update:pageSize", Number(target.value));
+    };
+    return (_ctx, _cache) => {
+      return __props.totalPages > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        vue.createElementVNode("div", _hoisted_2$1, [
+          vue.createElementVNode("div", _hoisted_3$1, vue.toDisplayString(__props.pageLabel) + " " + vue.toDisplayString(__props.currentPage) + " " + vue.toDisplayString(__props.ofLabel) + " " + vue.toDisplayString(__props.totalPages), 1),
+          __props.showPageSize ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
+            vue.createElementVNode("label", _hoisted_5, vue.toDisplayString(__props.itemsPerPageLabel), 1),
+            vue.createElementVNode("select", {
+              id: "page-size",
+              value: __props.pageSize,
+              class: "focus:border-primary focus:ring-primary rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100",
+              onChange: changePageSize
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.pageSizeOptions, (size) => {
+                return vue.openBlock(), vue.createElementBlock("option", {
+                  key: size,
+                  value: size
+                }, vue.toDisplayString(size), 9, _hoisted_7);
+              }), 128))
+            ], 40, _hoisted_6)
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        vue.createElementVNode("div", _hoisted_8, [
+          vue.createElementVNode("button", {
+            disabled: __props.currentPage === 1 || __props.loading,
+            class: "focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+            onClick: _cache[0] || (_cache[0] = ($event) => changePage(__props.currentPage - 1))
+          }, [
+            vue.createVNode(vue.unref(vue$1.Icon), {
+              class: "size-4",
+              icon: "lucide:chevron-left"
+            }),
+            vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(__props.previousLabel), 1)
+          ], 8, _hoisted_9),
+          __props.showPageNumbers ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(visiblePages.value, (page) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: page }, [
+              page === "ellipsis-start" || page === "ellipsis-end" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, " … ")) : (vue.openBlock(), vue.createElementBlock("button", {
+                key: 1,
+                disabled: __props.loading,
+                class: vue.normalizeClass([
+                  "min-w-[40px] px-3 py-2 text-sm font-medium rounded-lg border transition-colors",
+                  page === __props.currentPage ? "bg-primary-600 text-white border-primary-600 dark:bg-primary-500 dark:border-primary-500" : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700",
+                  __props.loading ? "cursor-not-allowed opacity-50" : ""
+                ]),
+                onClick: ($event) => changePage(page)
+              }, vue.toDisplayString(page), 11, _hoisted_12))
+            ], 64);
+          }), 128)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("button", {
+            disabled: __props.currentPage === __props.totalPages || __props.loading,
+            class: "focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+            onClick: _cache[1] || (_cache[1] = ($event) => changePage(__props.currentPage + 1))
+          }, [
+            vue.createElementVNode("span", _hoisted_14, vue.toDisplayString(__props.nextLabel), 1),
+            vue.createVNode(vue.unref(vue$1.Icon), {
+              class: "size-4",
+              icon: "lucide:chevron-right"
+            })
+          ], 8, _hoisted_13)
+        ])
+      ])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1 = {
+  class: "divide-y divide-gray-200 dark:divide-gray-700",
+  "aria-hidden": "true"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "shrink-0 size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse"
+};
+const _hoisted_3 = { class: "flex-1 min-w-0 space-y-2" };
+const _hoisted_4 = {
+  key: 1,
+  class: "shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "ListSkeleton",
+  props: {
+    items: { default: 5 },
+    showAvatar: { type: Boolean, default: true },
+    showSecondary: { type: Boolean, default: true },
+    showAction: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: item,
+            class: "flex items-center gap-4 py-4 px-4"
+          }, [
+            __props.showAvatar ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2)) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", _hoisted_3, [
+              vue.createElementVNode("div", {
+                class: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+                style: vue.normalizeStyle({ width: `${60 + Math.random() * 30}%` })
+              }, null, 4),
+              __props.showSecondary ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: "h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse",
+                style: vue.normalizeStyle({ width: `${40 + Math.random() * 20}%` })
+              }, null, 4)) : vue.createCommentVNode("", true)
+            ]),
+            __props.showAction ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4)) : vue.createCommentVNode("", true)
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main$1;
+exports._sfc_main$1 = _sfc_main$2;
+exports._sfc_main$2 = _sfc_main$3;
+exports._sfc_main$3 = _sfc_main;
+//# sourceMappingURL=ListSkeleton.vue_vue_type_script_setup_true_lang-Bo3HqgX0.cjs.map