feat: add timeline component

Author: BayBreezy

src/comps.ts

@@ -2655,7 +2655,6 @@ export default [
   {
     name: "Textarea",
     value: "textarea",
-    devDeps: ["@vueuse/core"],
     files: [
       {
         fileName: "Textarea.vue",
@@ -2668,6 +2667,63 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Timeline",
+    value: "timeline",
+    files: [
+      {
+        fileName: "Timeline/Content.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive\n    data-slot="timeline-content"\n    v-bind="forwarded"\n    :class="styles({ class: props.class })"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive, useForwardProps } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const styles = tv({\n    base: "text-sm text-muted-foreground",\n  });\n  const props = defineProps<\n    PrimitiveProps & {\n      class?: any;\n    }\n  >();\n\n  const forwarded = useForwardProps(reactiveOmit(props, ["class"]));\n</script>\n',
+      },
+      {
+        fileName: "Timeline/Date.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive data-slot="timeline-date" v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive, useForwardProps } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const styles = tv({\n    base: "mb-1 block text-xs font-medium text-muted-foreground sm:max-sm:group-data-[orientation=vertical]/timeline:h-4",\n  });\n  const props = withDefaults(\n    defineProps<\n      PrimitiveProps & {\n        class?: any;\n      }\n    >(),\n    {\n      as: "time",\n    }\n  );\n\n  const forwarded = useForwardProps(reactiveOmit(props, ["class"]));\n</script>\n',
+      },
+      {
+        fileName: "Timeline/Header.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive data-slot="timeline-header" :as :as-child>\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  defineProps<PrimitiveProps>();\n</script>\n',
+      },
+      {
+        fileName: "Timeline/Indicator.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive\n    data-slot="timeline-indicator"\n    aria-hidden="true"\n    v-bind="forwarded"\n    :class="styles({ class: props.class })"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive, useForwardProps } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const styles = tv({\n    base: "absolute size-4 rounded-full border-2 border-primary/20 group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-0 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[completed=true]/timeline-item:border-primary",\n  });\n  const props = defineProps<\n    PrimitiveProps & {\n      class?: any;\n    }\n  >();\n\n  const forwarded = useForwardProps(reactiveOmit(props, ["class"]));\n</script>\n',
+      },
+      {
+        fileName: "Timeline/Item.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive\n    :data-completed="timelineData?.model?.value && step <= timelineData?.model?.value"\n    :data-step="step"\n    data-slot="timeline-item"\n    aria-hidden="true"\n    v-bind="forwarded"\n    :class="styles({ class: props.class })"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive, useForwardProps } from "radix-vue";\n  import type { TimelineData } from "./Timeline.vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  import { timelineDataSymbol } from "./Timeline.vue";\n\n  const timelineData = inject<TimelineData>(timelineDataSymbol);\n\n  const styles = tv({\n    base: "group/timeline-item relative flex flex-1 flex-col gap-0.5 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=vertical]/timeline:ml-8 group-data-[orientation=horizontal]/timeline:[&:not(:last-child)]:pe-8 group-data-[orientation=vertical]/timeline:[&:not(:last-child)]:pb-12 [&_[data-slot=timeline-separator]]:has-[+[data-completed=true]]:bg-primary",\n  });\n  const props = defineProps<\n    PrimitiveProps & {\n      class?: any;\n      step: number;\n    }\n  >();\n\n  const forwarded = useForwardProps(reactiveOmit(props, ["class", "step"]));\n</script>\n',
+      },
+      {
+        fileName: "Timeline/Separator.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive\n    data-slot="timeline-separator"\n    aria-hidden="true"\n    v-bind="forwarded"\n    :class="styles({ class: props.class })"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive, useForwardProps } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const styles = tv({\n    base: "absolute self-start bg-primary/10 group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=horizontal]/timeline:translate-x-[1.125rem] group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=vertical]/timeline:translate-y-[1.125rem]",\n  });\n  const props = defineProps<\n    PrimitiveProps & {\n      class?: any;\n    }\n  >();\n\n  const forwarded = useForwardProps(reactiveOmit(props, ["class"]));\n</script>\n',
+      },
+      {
+        fileName: "Timeline/Timeline.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive\n    :data-orientation="orientation"\n    data-slot="timeline"\n    v-bind="forwarded"\n    :class="styles({ class: props.class })"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive, useForwardProps } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n  import type { ModelRef } from "vue";\n\n  export type TimelineData = {\n    model: ModelRef<number | undefined, string, number | undefined, number | undefined>;\n    orientation: "horizontal" | "vertical";\n  };\n  export type TimelineProps = PrimitiveProps & {\n    class?: any;\n    orientation?: "horizontal" | "vertical";\n    modelValue?: number | undefined;\n  };\n  export const timelineDataSymbol = Symbol("timeline-data");\n</script>\n\n<script lang="ts" setup>\n  const styles = tv({\n    base: "group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",\n  });\n  const model = defineModel<number | undefined>({ default: 1 });\n  const props = withDefaults(defineProps<TimelineProps>(), {\n    orientation: "vertical",\n  });\n  const forwarded = useForwardProps(reactiveOmit(props, ["modelValue", "class", "orientation"]));\n  provide<TimelineData>(timelineDataSymbol, {\n    model,\n    orientation: props.orientation,\n  });\n</script>\n',
+      },
+      {
+        fileName: "Timeline/Title.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive\n    data-slot="timeline-title"\n    aria-hidden="true"\n    v-bind="forwarded"\n    :class="styles({ class: props.class })"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive, useForwardProps } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  const styles = tv({\n    base: "text-sm font-medium",\n  });\n  const props = defineProps<\n    PrimitiveProps & {\n      class?: any;\n    }\n  >();\n\n  const forwarded = useForwardProps(reactiveOmit(props, ["class"]));\n</script>\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Toast",
     value: "toast",