@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.5 → 1.0.7

package/src/ui/table-header.vue

@@ -1,132 +1,132 @@
-<template>
-  <th
-    ref="headerRef"
-    data-slot="table-header"
-    :class="headerClass"
-    :tabindex="sortable ? 0 : undefined"
-    :role="sortable ? 'button' : undefined"
-    :aria-sort="ariaSort"
-    @click="sortable ? handleClick : undefined"
-    @keydown="sortable ? handleKeyDown : undefined"
-    :style="headerStyle"
-  >
-    <div class="flex items-center">
-      <slot />
-      <component v-if="sortable" :is="sortIcon" />
-    </div>
-    <div
-      v-if="resizable"
-      class="absolute right-0 top-0 w-1 h-full cursor-col-resize bg-transparent hover:bg-blue-500/50 transition-colors opacity-0 group-hover:opacity-100"
-      @mousedown="handleMouseDown"
-    />
-  </th>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, defineEmits } from 'vue';
-import { cn } from './utils';
-import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-vue-next';
-
-const props = defineProps({
-  sortable: Boolean,
-  sortDirection: {
-    type: String,
-    default: null,
-  },
-  resizable: Boolean,
-  width: Number,
-  minWidth: {
-    type: Number,
-    default: 100,
-  },
-  maxWidth: {
-    type: Number,
-    default: 500,
-  },
-  class: {
-    type: String,
-    default: '',
-  },
-});
-
-const headerRef = ref(null);
-const emit = defineEmits(['sort', 'resize']);
-const isResizing = ref(false);
-const currentWidth = ref(props.width || 150);
-
-watch(() => props.width, (val) => {
-  if (val) currentWidth.value = val;
-});
-
-const headerClass = computed(() =>
-  cn(
-    'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-    props.sortable && 'cursor-pointer select-none hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors',
-    'relative group',
-    props.class
-  )
-);
-
-const ariaSort = computed(() => {
-  if (!props.sortable) return undefined;
-  if (props.sortDirection === 'asc') return 'ascending';
-  if (props.sortDirection === 'desc') return 'descending';
-  return 'none';
-});
-
-import { h } from 'vue';
-const sortIcon = computed(() => {
-  if (!props.sortable) return null;
-  switch (props.sortDirection) {
-    case 'asc':
-      return h(ArrowUp, { class: 'ml-2 h-4 w-4' });
-    case 'desc':
-      return h(ArrowDown, { class: 'ml-2 h-4 w-4' });
-    default:
-      return h(ArrowUpDown, { class: 'ml-2 h-4 w-4 opacity-50' });
-  }
-});
-
-const headerStyle = computed(() => {
-  return {
-    width: props.resizable ? currentWidth.value + 'px' : (props.width ? props.width + 'px' : undefined),
-    minWidth: props.resizable ? props.minWidth + 'px' : undefined,
-    maxWidth: props.resizable ? props.maxWidth + 'px' : undefined,
-  };
-});
-
-function handleClick() {
-  if (props.sortable && !isResizing.value) {
-    emit('sort');
-  }
-}
-
-function handleKeyDown(e) {
-  if (props.sortable && (e.key === 'Enter' || e.key === ' ')) {
-    e.preventDefault();
-    emit('sort');
-  }
-}
-
-function handleMouseDown(e) {
-  if (!props.resizable) return;
-  e.preventDefault();
-  isResizing.value = true;
-  const startX = e.clientX;
-  const startWidth = currentWidth.value;
-
-  function onMouseMove(ev) {
-    const deltaX = ev.clientX - startX;
-    const newWidth = Math.min(props.maxWidth, Math.max(props.minWidth, startWidth + deltaX));
-    currentWidth.value = newWidth;
-    emit('resize', newWidth);
-  }
-  function onMouseUp() {
-    isResizing.value = false;
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
-  }
-  document.addEventListener('mousemove', onMouseMove);
-  document.addEventListener('mouseup', onMouseUp);
-}
-</script>
+<template>
+  <th
+    ref="headerRef"
+    data-slot="table-header"
+    :class="headerClass"
+    :tabindex="sortable ? 0 : undefined"
+    :role="sortable ? 'button' : undefined"
+    :aria-sort="ariaSort"
+    @click="sortable ? handleClick : undefined"
+    @keydown="sortable ? handleKeyDown : undefined"
+    :style="headerStyle"
+  >
+    <div class="flex items-center">
+      <slot />
+      <component v-if="sortable" :is="sortIcon" />
+    </div>
+    <div
+      v-if="resizable"
+      class="absolute right-0 top-0 w-1 h-full cursor-col-resize bg-transparent hover:bg-blue-500/50 transition-colors opacity-0 group-hover:opacity-100"
+      @mousedown="handleMouseDown"
+    />
+  </th>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, defineEmits } from 'vue';
+import { cn } from './utils';
+import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-vue-next';
+
+const props = defineProps({
+  sortable: Boolean,
+  sortDirection: {
+    type: String,
+    default: null,
+  },
+  resizable: Boolean,
+  width: Number,
+  minWidth: {
+    type: Number,
+    default: 100,
+  },
+  maxWidth: {
+    type: Number,
+    default: 500,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const headerRef = ref(null);
+const emit = defineEmits(['sort', 'resize']);
+const isResizing = ref(false);
+const currentWidth = ref(props.width || 150);
+
+watch(() => props.width, (val) => {
+  if (val) currentWidth.value = val;
+});
+
+const headerClass = computed(() =>
+  cn(
+    'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+    props.sortable && 'cursor-pointer select-none hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors',
+    'relative group',
+    props.class
+  )
+);
+
+const ariaSort = computed(() => {
+  if (!props.sortable) return undefined;
+  if (props.sortDirection === 'asc') return 'ascending';
+  if (props.sortDirection === 'desc') return 'descending';
+  return 'none';
+});
+
+import { h } from 'vue';
+const sortIcon = computed(() => {
+  if (!props.sortable) return null;
+  switch (props.sortDirection) {
+    case 'asc':
+      return h(ArrowUp, { class: 'ml-2 h-4 w-4' });
+    case 'desc':
+      return h(ArrowDown, { class: 'ml-2 h-4 w-4' });
+    default:
+      return h(ArrowUpDown, { class: 'ml-2 h-4 w-4 opacity-50' });
+  }
+});
+
+const headerStyle = computed(() => {
+  return {
+    width: props.resizable ? currentWidth.value + 'px' : (props.width ? props.width + 'px' : undefined),
+    minWidth: props.resizable ? props.minWidth + 'px' : undefined,
+    maxWidth: props.resizable ? props.maxWidth + 'px' : undefined,
+  };
+});
+
+function handleClick() {
+  if (props.sortable && !isResizing.value) {
+    emit('sort');
+  }
+}
+
+function handleKeyDown(e) {
+  if (props.sortable && (e.key === 'Enter' || e.key === ' ')) {
+    e.preventDefault();
+    emit('sort');
+  }
+}
+
+function handleMouseDown(e) {
+  if (!props.resizable) return;
+  e.preventDefault();
+  isResizing.value = true;
+  const startX = e.clientX;
+  const startWidth = currentWidth.value;
+
+  function onMouseMove(ev) {
+    const deltaX = ev.clientX - startX;
+    const newWidth = Math.min(props.maxWidth, Math.max(props.minWidth, startWidth + deltaX));
+    currentWidth.value = newWidth;
+    emit('resize', newWidth);
+  }
+  function onMouseUp() {
+    isResizing.value = false;
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  }
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+}
+</script>

package/src/ui/table-row.vue

@@ -1,16 +1,16 @@
-<template>
-  <tr data-slot="table-row" :class="rowClass">
-    <slot />
-  </tr>
-</template>
-
-<script setup lang="ts">
-import { cn } from './utils';
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-});
-const rowClass = cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class);
-</script>
+<template>
+  <tr data-slot="table-row" :class="rowClass">
+    <slot />
+  </tr>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const rowClass = cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class);
+</script>

package/src/ui/table.vue

@@ -1,55 +1,55 @@
-<template>
-  <div data-slot="table-container" class="relative w-full overflow-x-auto">
-    <table data-slot="table" :class="tableClass">
-      <!-- Table caption slot -->
-      <slot name="caption" />
-
-      <!-- Auto-wrap first TableRow in thead, rest in tbody -->
-      <thead v-if="rows.length" data-slot="table-head" class="[&_tr]:border-b">
-        <component :is="rows[0]" />
-      </thead>
-      <tbody v-if="rows.length > 1" data-slot="table-body" class="[&_tr:last-child]:border-0">
-        <template v-for="(row, i) in rows.slice(1)" :key="i">
-          <component :is="row" />
-        </template>
-      </tbody>
-
-      <!-- Render any other default slot content (e.g., TableBody, TableCaption, etc.) -->
-      <slot />
-    </table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from 'vue';
-import { cn } from './utils';
-
-const props = defineProps({
-  resizable: {
-    type: Boolean,
-    default: false,
-  },
-  class: {
-    type: String,
-    default: '',
-  },
-});
-
-const slots = useSlots();
-const rows = computed(() => {
-  const vnodes = slots.default ? slots.default() : [];
-  // Vue SFC: TableRow is a functional component, so check type.name or type.__name
-  return vnodes.filter(v => {
-    const type = v.type;
-    return type && (type.name === 'TableRow' || type.__name === 'TableRow');
-  });
-});
-
-const tableClass = computed(() =>
-  cn(
-    'w-full caption-bottom text-sm',
-    props.resizable && 'table-fixed',
-    props.class
-  )
-);
-</script>
+<template>
+  <div data-slot="table-container" class="relative w-full overflow-x-auto">
+    <table data-slot="table" :class="tableClass">
+      <!-- Table caption slot -->
+      <slot name="caption" />
+
+      <!-- Auto-wrap first TableRow in thead, rest in tbody -->
+      <thead v-if="rows.length" data-slot="table-head" class="[&_tr]:border-b">
+        <component :is="rows[0]" />
+      </thead>
+      <tbody v-if="rows.length > 1" data-slot="table-body" class="[&_tr:last-child]:border-0">
+        <template v-for="(row, i) in rows.slice(1)" :key="i">
+          <component :is="row" />
+        </template>
+      </tbody>
+
+      <!-- Render any other default slot content (e.g., TableBody, TableCaption, etc.) -->
+      <slot />
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  resizable: {
+    type: Boolean,
+    default: false,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const slots = useSlots();
+const rows = computed(() => {
+  const vnodes = slots.default ? slots.default() : [];
+  // Vue SFC: TableRow is a functional component, so check type.name or type.__name
+  return vnodes.filter(v => {
+    const type = v.type;
+    return type && (type.name === 'TableRow' || type.__name === 'TableRow');
+  });
+});
+
+const tableClass = computed(() =>
+  cn(
+    'w-full caption-bottom text-sm',
+    props.resizable && 'table-fixed',
+    props.class
+  )
+);
+</script>

package/src/ui/tabs.vue

@@ -1,33 +1,33 @@
-<script setup>
-
-import { cn } from './utils';
-import { defineProps, useAttrs } from 'vue';
-import { Tabs } from '@/shadcn/tabs';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'default',
-  },
-  orientation: {
-    type: String,
-    default: 'horizontal',
-  },
-});
-
-const attrs = useAttrs();
-</script>
-
-<template>
-  <Tabs
-    data-slot="tabs"
-    :class="cn(
-      'flex flex-col',
-      props.variant === 'vertical' && 'flex-row',
-      attrs.class
-    )"
-    v-bind="{ ...attrs, ...props }"
-  >
-    <slot />
-  </Tabs>
-</template>
+<script setup>
+
+import { cn } from './utils';
+import { defineProps, useAttrs } from 'vue';
+import { Tabs } from '@/shadcn/tabs';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+  orientation: {
+    type: String,
+    default: 'horizontal',
+  },
+});
+
+const attrs = useAttrs();
+</script>
+
+<template>
+  <Tabs
+    data-slot="tabs"
+    :class="cn(
+      'flex flex-col',
+      props.variant === 'vertical' && 'flex-row',
+      attrs.class
+    )"
+    v-bind="{ ...attrs, ...props }"
+  >
+    <slot />
+  </Tabs>
+</template>

package/src/ui/textarea.vue

@@ -1,91 +1,91 @@
-<template>
-  <div v-if="label" class="space-y-2">
-    <div class="flex items-center gap-2">
-      <component v-if="icon" :is="icon" class="h-4 w-4" />
-      <Label v-if="label" :for="id">{{ label }}</Label>
-    </div>
-    <textarea
-      :id="id"
-      data-slot="textarea"
-      :class="cn(
-        'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        validationState === 'error' && 'border-red-500 focus:border-red-500 focus:ring-red-500',
-        validationState === 'success' && 'border-green-500 focus:border-green-500 focus:ring-green-500',
-        $attrs.class
-      )"
-      v-bind="$attrs"
-      :disabled="disabled"
-      :readonly="readonly"
-      :value="modelValue"
-      @input="$emit('update:modelValue', $event.target.value)"
-    />
-    <p v-if="validationState === 'error' && validationText" class="text-sm text-red-600 flex items-center gap-1">
-      <AlertCircle class="h-4 w-4" />
-      {{ validationText }}
-    </p>
-    <p v-else-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
-      <CheckCircle class="h-4 w-4" />
-      {{ validationText }}
-    </p>
-  </div>
-  <textarea
-    v-else
-    data-slot="textarea"
-    :class="cn(
-      'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      $attrs.class
-    )"
-    v-bind="$attrs"
-    :disabled="disabled"
-    :readonly="readonly"
-    :value="modelValue"
-    @input="$emit('update:modelValue', $event.target.value)"
-  />
-</template>
-
-
-<script setup>
-import { defineProps, useAttrs, defineEmits } from 'vue';
-import { AlertCircle, CheckCircle } from 'lucide-vue-next';
-import Label from './label.vue';
-import { cn } from '@/lib/utils';
-
-const $attrs = useAttrs();
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: [Object, Function, String],
-    default: null,
-  },
-  id: {
-    type: String,
-    default: undefined,
-  },
-  validationState: {
-    type: String,
-    default: undefined,
-  },
-  validationText: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-</script>
+<template>
+  <div v-if="label" class="space-y-2">
+    <div class="flex items-center gap-2">
+      <component v-if="icon" :is="icon" class="h-4 w-4" />
+      <Label v-if="label" :for="id">{{ label }}</Label>
+    </div>
+    <textarea
+      :id="id"
+      data-slot="textarea"
+      :class="cn(
+        'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        validationState === 'error' && 'border-red-500 focus:border-red-500 focus:ring-red-500',
+        validationState === 'success' && 'border-green-500 focus:border-green-500 focus:ring-green-500',
+        $attrs.class
+      )"
+      v-bind="$attrs"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <p v-if="validationState === 'error' && validationText" class="text-sm text-red-600 flex items-center gap-1">
+      <AlertCircle class="h-4 w-4" />
+      {{ validationText }}
+    </p>
+    <p v-else-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
+      <CheckCircle class="h-4 w-4" />
+      {{ validationText }}
+    </p>
+  </div>
+  <textarea
+    v-else
+    data-slot="textarea"
+    :class="cn(
+      'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      $attrs.class
+    )"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :readonly="readonly"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+
+<script setup>
+import { defineProps, useAttrs, defineEmits } from 'vue';
+import { AlertCircle, CheckCircle } from 'lucide-vue-next';
+import Label from './label.vue';
+import { cn } from '@/lib/utils';
+
+const $attrs = useAttrs();
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: [Object, Function, String],
+    default: null,
+  },
+  id: {
+    type: String,
+    default: undefined,
+  },
+  validationState: {
+    type: String,
+    default: undefined,
+  },
+  validationText: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+</script>