@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.18 → 1.0.20

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.18",
+  "version": "1.0.20",
   "main": "dist/perisai-ui.umd.js",
   "module": "dist/perisai-ui.es.js",
   "scripts": {

package/src/ui/SelectGroup.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { SelectGroup as RekaSelectGroup } from "reka-ui"
+import { cn } from "./utils"
+
+const props = defineProps({
+  class: String
+})
 </script>
 
 <template>
   <RekaSelectGroup
     data-slot="select-group"
+    :class="cn(props.class)"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/SelectValue.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
 import { SelectValue } from '@/shadcn/select';
+import { cn } from './utils';
+
+const props = defineProps({
+  class: String,
+});
 </script>
 
 <template>
-  <SelectValue data-slot="select-value" v-bind="$attrs">
+  <SelectValue 
+    data-slot="select-value" 
+    :class="cn(props.class)"
+    v-bind="$attrs"
+  >
     <slot />
   </SelectValue>
 </template>

package/src/ui/pagination.vue

@@ -1,21 +1,37 @@
 <template>
-  <nav class="flex items-center justify-center gap-2" role="navigation" aria-label="Pagination">
+  <nav class="flex items-center justify-center gap-1" role="navigation" aria-label="Pagination">
     <button
-      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      class="px-3 py-2 text-sm font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed"
       :disabled="page <= 1"
       @click="$emit('update:page', page - 1)"
       aria-label="Previous page"
     >
-      &lt;
+      Previous
     </button>
-    <span class="px-2 text-sm">{{ page }} / {{ totalPages }}</span>
+    
+    <template v-for="(pageNum, index) in visiblePages" :key="pageNum">
+      <span v-if="pageNum === '...'" class="px-3 py-2 text-sm">...</span>
+      <button
+        v-else
+        class="px-3 py-2 text-sm font-medium rounded-md transition-colors"
+        :class="pageNum === page 
+          ? 'border border-input bg-background' 
+          : 'hover:bg-accent hover:text-accent-foreground'"
+        @click="$emit('update:page', pageNum)"
+        :aria-label="`Page ${pageNum}`"
+        :aria-current="pageNum === page ? 'page' : undefined"
+      >
+        {{ pageNum }}
+      </button>
+    </template>
+    
     <button
-      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      class="px-3 py-2 text-sm font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed"
       :disabled="page >= totalPages"
       @click="$emit('update:page', page + 1)"
       aria-label="Next page"
     >
-      &gt;
+      Next
     </button>
   </nav>
 </template>
@@ -38,4 +54,45 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:page']);
 const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)));
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const current = props.page;
+  const total = totalPages.value;
+  
+  if (total <= 7) {
+    // Show all pages if total is 7 or less
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    // Always show first page
+    pages.push(1);
+    
+    if (current <= 4) {
+      // Show pages 2, 3, 4, 5, then ellipsis, then last page
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push('...');
+      pages.push(total);
+    } else if (current >= total - 3) {
+      // Show first page, ellipsis, then last 4 pages
+      pages.push('...');
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Show first page, ellipsis, current-1, current, current+1, ellipsis, last page
+      pages.push('...');
+      pages.push(current - 1);
+      pages.push(current);
+      pages.push(current + 1);
+      pages.push('...');
+      pages.push(total);
+    }
+  }
+  
+  return pages;
+});
 </script>

package/src/ui/select.vue

@@ -18,19 +18,24 @@
     v-else
     v-model="internalValue"
     :disabled="disabled"
+    :class="mergedClass"
   >
     <SelectTrigger class="w-full">
-      <SelectValue :placeholder="placeholder" />
+      <slot name="trigger">
+        <SelectValue :placeholder="placeholder" />
+      </slot>
     </SelectTrigger>
 
-    <SelectContent>
-      <SelectItem
-        v-for="opt in options"
-        :key="String(opt.value)"
-        :value="String(opt.value)"
-      >
-        {{ opt.label }}
-      </SelectItem>
+    <SelectContent :class="contentClass">
+      <slot name="content">
+        <SelectItem
+          v-for="opt in options"
+          :key="String(opt.value)"
+          :value="String(opt.value)"
+        >
+          {{ opt.label }}
+        </SelectItem>
+      </slot>
     </SelectContent>
   </ShadcnSelect>
 </template>
@@ -43,6 +48,8 @@ import {
   SelectContent,
   SelectItem,
 } from '@/shadcn/select'
+import { cn } from './utils'
+import SelectMultiple from './select-multiple.vue'
 
 const props = defineProps({
   modelValue: [String, Array],
@@ -51,6 +58,10 @@ const props = defineProps({
   placeholder: String,
   disabled: Boolean,
   customClass: String,
+  contentClass: String,
+  title: String,
+  maxDisplay: { type: Number, default: 3 },
+  size: { type: String, default: 'default' },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -61,5 +72,5 @@ const internalValue = computed({
 })
 
 const attrs = useAttrs()
-const mergedClass = computed(() => props.customClass || attrs.class || '')
+const mergedClass = computed(() => cn(props.customClass, attrs.class as string))
 </script>