@salesforce/templates 66.17.0-beta.3 → 66.17.0

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/FieldTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="field-label"
+    :class="
+      cn(
+        'gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/field/index.ts

@@ -0,0 +1,33 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export const fieldVariants = cva(
+  'data-[invalid=true]:text-destructive gap-2 group/field flex w-full',
+  {
+    variants: {
+      orientation: {
+        vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+        horizontal:
+          'flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        responsive:
+          'flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  }
+);
+
+export type FieldVariants = VariantProps<typeof fieldVariants>;
+
+export { default as Field } from './Field.vue';
+export { default as FieldContent } from './FieldContent.vue';
+export { default as FieldDescription } from './FieldDescription.vue';
+export { default as FieldError } from './FieldError.vue';
+export { default as FieldGroup } from './FieldGroup.vue';
+export { default as FieldLabel } from './FieldLabel.vue';
+export { default as FieldLegend } from './FieldLegend.vue';
+export { default as FieldSeparator } from './FieldSeparator.vue';
+export { default as FieldSet } from './FieldSet.vue';
+export { default as FieldTitle } from './FieldTitle.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/index.ts

@@ -0,0 +1,115 @@
+/**
+ * UI Components Index
+ *
+ * Re-exports all UI components for easier imports.
+ *
+ * Usage:
+ *   import { Button, Input } from "@/components/ui"
+ *
+ * Instead of:
+ *   import { Button } from "@/components/ui/button"
+ *   import { Input } from "@/components/ui/input"
+ */
+
+export {
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  AlertAction,
+  alertVariants,
+} from './alert';
+export { Avatar, AvatarImage, AvatarFallback } from './avatar';
+export { Button, buttonVariants } from './button';
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+} from './card';
+export { Checkbox } from './checkbox';
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from './collapsible';
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog';
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from './dropdown-menu';
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+  fieldVariants,
+} from './field';
+export { Input } from './input';
+export { Label } from './label';
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from './popover';
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './select';
+export { Separator } from './separator';
+export { Skeleton } from './skeleton';
+export { Sonner, Toaster, toast } from './sonner';
+export { Spinner } from './spinner';

package/lib/templates/uiBundles/vuebasic/src/components/ui/input/Input.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+  type?: string;
+}>();
+
+const modelValue = defineModel<string | number>();
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :type="type"
+    data-slot="input"
+    v-bind="$attrs"
+    :class="
+      cn(
+        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground/70 placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        props.class
+      )
+    "
+  />
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/input/index.ts

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

package/lib/templates/uiBundles/vuebasic/src/components/ui/label/Label.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { LabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { Label } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/label/index.ts

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

package/lib/templates/uiBundles/vuebasic/src/components/ui/pagination/Pagination.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    data-slot="pagination"
+    :class="cn('mx-auto flex w-full justify-center', props.class)"
+  >
+    <slot />
+  </nav>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/pagination/PaginationContent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <ul
+    data-slot="pagination-content"
+    :class="cn('gap-0.5 flex items-center', props.class)"
+  >
+    <slot />
+  </ul>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/pagination/PaginationEllipsis.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { MoreHorizontalIcon } from '@lucide/vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <span
+    aria-hidden
+    data-slot="pagination-ellipsis"
+    :class="
+      cn(
+        `size-8 [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center`,
+        props.class
+      )
+    "
+  >
+    <MoreHorizontalIcon />
+    <span class="sr-only">More pages</span>
+  </span>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/pagination/PaginationItem.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <li data-slot="pagination-item">
+    <slot />
+  </li>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/pagination/PaginationLink.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '../button';
+import { cn } from '@/lib/utils';
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<{
+    isActive?: boolean;
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+  }>(),
+  {
+    size: 'icon',
+  }
+);
+</script>
+
+<template>
+  <Button
+    as="a"
+    :variant="isActive ? 'outline' : 'ghost'"
+    :size="size"
+    :aria-current="isActive ? 'page' : undefined"
+    data-slot="pagination-link"
+    :data-active="isActive"
+    :class="cn(props.class)"
+  >
+    <slot />
+  </Button>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/pagination/PaginationNext.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { ChevronRightIcon } from '@lucide/vue';
+import { cn } from '@/lib/utils';
+import PaginationLink from './PaginationLink.vue';
+
+const props = withDefaults(
+  defineProps<{
+    isActive?: boolean;
+    text?: string;
+    class?: HTMLAttributes['class'];
+  }>(),
+  {
+    text: 'Next',
+  }
+);
+</script>
+
+<template>
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    :is-active="isActive"
+    :class="cn('pr-1.5!', props.class)"
+  >
+    <span class="hidden sm:block">{{ text }}</span>
+    <ChevronRightIcon data-icon="inline-end" class="cn-rtl-flip" />
+  </PaginationLink>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/pagination/PaginationPrevious.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { ChevronLeftIcon } from '@lucide/vue';
+import { cn } from '@/lib/utils';
+import PaginationLink from './PaginationLink.vue';
+
+const props = withDefaults(
+  defineProps<{
+    isActive?: boolean;
+    text?: string;
+    class?: HTMLAttributes['class'];
+  }>(),
+  {
+    text: 'Previous',
+  }
+);
+</script>
+
+<template>
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    :is-active="isActive"
+    :class="cn('pl-1.5!', props.class)"
+  >
+    <ChevronLeftIcon data-icon="inline-start" class="cn-rtl-flip" />
+    <span class="hidden sm:block">{{ text }}</span>
+  </PaginationLink>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/pagination/index.ts

@@ -0,0 +1,7 @@
+export { default as Pagination } from './Pagination.vue';
+export { default as PaginationContent } from './PaginationContent.vue';
+export { default as PaginationItem } from './PaginationItem.vue';
+export { default as PaginationLink } from './PaginationLink.vue';
+export { default as PaginationPrevious } from './PaginationPrevious.vue';
+export { default as PaginationNext } from './PaginationNext.vue';
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/popover/Popover.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/popover/PopoverAnchor.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from 'reka-ui';
+import { PopoverAnchor } from 'reka-ui';
+
+const props = defineProps<PopoverAnchorProps>();
+</script>
+
+<template>
+  <PopoverAnchor data-slot="popover-anchor" v-bind="props">
+    <slot />
+  </PopoverAnchor>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  }
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/popover/PopoverDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <p
+    data-slot="popover-description"
+    :class="cn('text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/popover/PopoverHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="popover-header"
+    :class="cn('flex flex-col gap-0.5 text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/popover/PopoverTitle.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>
+  <div data-slot="popover-title" :class="cn('font-medium', props.class)">
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui';
+import { PopoverTrigger } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger data-slot="popover-trigger" v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/popover/index.ts

@@ -0,0 +1,7 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverAnchor } from './PopoverAnchor.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverDescription } from './PopoverDescription.vue';
+export { default as PopoverHeader } from './PopoverHeader.vue';
+export { default as PopoverTitle } from './PopoverTitle.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/Select.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui';
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<SelectRootProps>();
+const emits = defineEmits<SelectRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </SelectRoot>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/SelectContent.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+import SelectScrollDownButton from './SelectScrollDownButton.vue';
+import SelectScrollUpButton from './SelectScrollUpButton.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'item-aligned',
+    align: 'center',
+  }
+);
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      :data-align-trigger="position === 'item-aligned'"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class
+        )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :data-position="position"
+        :class="
+          cn(
+            'data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)'
+          )
+        "
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/SelectGroup.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { SelectGroup } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectGroupProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectGroup
+    data-slot="select-group"
+    v-bind="delegatedProps"
+    :class="cn('scroll-my-1 p-1', props.class)"
+  >
+    <slot />
+  </SelectGroup>
+</template>