@iqual/nuxt-icms 1.1.0 → 1.2.2

package/components/ui/stepper/StepperDescription.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { StepperDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { StepperDescription, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot v-bind="slotProps" />
+  </StepperDescription>
+</template>

package/components/ui/stepper/StepperIndicator.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { StepperIndicatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { StepperIndicator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperIndicator
+    v-bind="forwarded"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',
+      // Disabled
+      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
+      // Active
+      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
+      // Completed
+      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </StepperIndicator>
+</template>

package/components/ui/stepper/StepperItem.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { StepperItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { StepperItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperItem
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </StepperItem>
+</template>

package/components/ui/stepper/StepperSeparator.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { StepperSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { StepperSeparator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperSeparator
+    v-bind="forwarded"
+    :class="cn(
+      'bg-muted',
+      // Disabled
+      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
+      // Completed
+      'group-data-[state=completed]:bg-accent-foreground',
+      props.class,
+    )"
+  />
+</template>

package/components/ui/stepper/StepperTitle.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { StepperTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { StepperTitle, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
+    <slot />
+  </StepperTitle>
+</template>

package/components/ui/stepper/StepperTrigger.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { StepperTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { StepperTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTrigger
+    v-bind="forwarded"
+    :class="cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)"
+  >
+    <slot />
+  </StepperTrigger>
+</template>

package/components/ui/stepper/index.ts

@@ -0,0 +1,7 @@
+export { default as Stepper } from './Stepper.vue'
+export { default as StepperDescription } from './StepperDescription.vue'
+export { default as StepperIndicator } from './StepperIndicator.vue'
+export { default as StepperItem } from './StepperItem.vue'
+export { default as StepperSeparator } from './StepperSeparator.vue'
+export { default as StepperTitle } from './StepperTitle.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'

package/components/ui/switch/Switch.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  SwitchRoot,
+
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

package/components/ui/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'

package/components/ui/table/Table.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>

package/components/ui/table/TableBody.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>

package/components/ui/table/TableCaption.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>

package/components/ui/table/TableCell.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>

package/components/ui/table/TableEmpty.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { computed } from 'vue'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>

package/components/ui/table/TableFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>

package/components/ui/table/TableHead.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+    <slot />
+  </th>
+</template>

package/components/ui/table/TableHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>

package/components/ui/table/TableRow.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>

package/components/ui/table/index.ts

@@ -0,0 +1,9 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'

package/components/ui/tabs/TabsContent.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import type { TabsContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { TabsContent, type TabsContentProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { TabsContent } from 'radix-vue'
+import { computed } from 'vue'
 
-const props = defineProps<
-  TabsContentProps & { class?: HTMLAttributes['class'] }
->()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -16,12 +16,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <TabsContent
-    :class="
-      cn(
-        'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300',
-        props.class,
-      )
-    "
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
     v-bind="delegatedProps"
   >
     <slot />

package/components/ui/tabs/TabsList.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { TabsListProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { TabsList, type TabsListProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { TabsList } from 'radix-vue'
+import { computed } from 'vue'
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
 
@@ -15,12 +17,10 @@ const delegatedProps = computed(() => {
 <template>
   <TabsList
     v-bind="delegatedProps"
-    :class="
-      cn(
-        'inline-flex items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500 dark:bg-gray-800 dark:text-gray-400',
-        props.class,
-      )
-    "
+    :class="cn(
+      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
   >
     <slot />
   </TabsList>

package/components/ui/tabs/TabsTrigger.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import type { TabsTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { TabsTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
 
-const props = defineProps<
-  TabsTriggerProps & { class?: HTMLAttributes['class'] }
->()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -19,12 +19,10 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <TabsTrigger
     v-bind="forwardedProps"
-    :class="
-      cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-950 data-[state=active]:shadow-sm dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300 dark:data-[state=active]:bg-gray-950 dark:data-[state=active]:text-gray-50',
-        props.class,
-      )
-    "
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      props.class,
+    )"
   >
     <span class="truncate">
       <slot />

package/components/ui/tags-input/TagsInput.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TagsInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)">
+    <slot />
+  </TagsInputRoot>
+</template>

package/components/ui/tags-input/TagsInputInput.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TagsInputInput, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>

package/components/ui/tags-input/TagsInputItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { TagsInputItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>

package/components/ui/tags-input/TagsInputItemDelete.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import { TagsInputItemDelete, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <X class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>

package/components/ui/tags-input/TagsInputItemText.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TagsInputItemText, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-1 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>

package/components/ui/tags-input/index.ts

@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'

package/components/ui/textarea/Textarea.vue

@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:bg-gray-950 dark:ring-offset-gray-950 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300', props.class)" />
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
 </template>