chore: change playground ui to use UI Thing

package.json

@@ -51,7 +51,6 @@
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.9.0",
     "@nuxt/test-utils": "^3.9.0",
-    "@nuxthq/ui": "^2.7.0",
     "@types/node": "^20.10.6",
     "@types/pdfmake": "^0.2.8",
     "changelogen": "^0.5.5",

playground/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": true,
+  "tailwindFunctions": ["tv"],
+  "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
+}

playground/assets/css/tailwind.css

@@ -1,12 +1,64 @@
+@import url("https://rsms.me/inter/inter.css");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
 @layer base {
   * {
-    @apply border-gray-200 dark:border-gray-700;
+    @apply border-border;
   }
   body {
-    @apply bg-white dark:bg-gray-900;
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 }

playground/components/Ui/Avatar/Avatar.vue

@@ -0,0 +1,43 @@
+<template>
+  <AvatarRoot :as="as" :as-child="asChild" :class="styles({ class: props.class })">
+    <slot>
+      <slot name="image">
+        <UiAvatarImage
+          @loading-status-change="emits('loadingStatusChange', $event)"
+          v-if="src"
+          :src="src"
+          :alt="alt"
+          :class="imageClass"
+        />
+      </slot>
+      <slot name="fallback">
+        <UiAvatarFallback :delay-ms="delayMs" :class="fallbackClass" :fallback="fallback" />
+      </slot>
+    </slot>
+  </AvatarRoot>
+</template>
+
+<script lang="ts" setup>
+  import { AvatarRoot } from "radix-vue";
+  import type { AvatarImageEmits, AvatarImageProps, AvatarRootProps } from "radix-vue";
+
+  const props = withDefaults(
+    defineProps<
+      AvatarRootProps &
+        Partial<AvatarImageProps> & {
+          class?: any;
+          imageClass?: any;
+          fallbackClass?: any;
+          alt?: string;
+          fallback?: string;
+          delayMs?: number;
+        }
+    >(),
+    {}
+  );
+
+  const emits = defineEmits<AvatarImageEmits>();
+  const styles = tv({
+    base: "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+  });
+</script>

playground/components/Ui/Avatar/Fallback.vue

@@ -0,0 +1,27 @@
+<template>
+  <AvatarFallback
+    :class="styles({ class: props.class })"
+    v-bind="reactiveOmit(props, 'class', 'fallback')"
+  >
+    <slot>
+      {{ fallback }}
+    </slot>
+  </AvatarFallback>
+</template>
+
+<script lang="ts" setup>
+  import { AvatarFallback } from "radix-vue";
+  import type { AvatarFallbackProps } from "radix-vue";
+
+  const props = defineProps<
+    AvatarFallbackProps & {
+      /** The text to display inside th eavatar */
+      fallback?: string;
+      /** Custom class(es) to add to the element */
+      class?: any;
+    }
+  >();
+  const styles = tv({
+    base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",
+  });
+</script>

playground/components/Ui/Avatar/Image.vue

@@ -0,0 +1,22 @@
+<template>
+  <AvatarImage v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })" />
+</template>
+
+<script lang="ts" setup>
+  import { AvatarImage } from "radix-vue";
+  import type { AvatarImageEmits, AvatarImageProps } from "radix-vue";
+
+  const props = defineProps<
+    AvatarImageProps & {
+      /** The alt text for the image */
+      alt?: string;
+      /** Custom class(es) to add to the element */
+      class?: any;
+    }
+  >();
+  const emits = defineEmits<AvatarImageEmits>();
+
+  const styles = tv({
+    base: "aspect-square h-full w-full object-cover",
+  });
+</script>

playground/components/Ui/Button.vue

@@ -0,0 +1,50 @@
+<template>
+  <component
+    :is="elementType"
+    :class="
+      buttonStyles({
+        disabled: disabled || loading,
+        variant: variant,
+        size: size,
+        class: props.class,
+      })
+    "
+    :disabled="disabled || loading"
+    :to="to"
+    :href="href"
+    :type="type"
+    @click="onClick"
+  >
+    <slot>{{ label }}</slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+  import type { RouteLocationRaw } from "vue-router";
+
+  type ButtonProps = VariantProps<typeof buttonStyles>;
+  const props = withDefaults(
+    defineProps<{
+      type?: "button" | "submit" | "reset";
+      disabled?: boolean;
+      loading?: boolean;
+      onClick?: any;
+      to?: string | RouteLocationRaw;
+      href?: string;
+      as?: string;
+      class?: any;
+      variant?: ButtonProps["variant"];
+      size?: ButtonProps["size"];
+      label?: string;
+    }>(),
+    {
+      type: "button",
+    }
+  );
+
+  const elementType = computed(() => {
+    if (props.as) return props.as;
+    if (props.href || props.to) return resolveComponent("NuxtLink");
+    return "button";
+  });
+</script>

playground/components/Ui/Container.vue

@@ -0,0 +1,25 @@
+<template>
+  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
+    <slot></slot>
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "radix-vue";
+  import type { PrimitiveProps } from "radix-vue";
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        class?: any;
+      }
+    >(),
+    {
+      as: "div",
+    }
+  );
+
+  const styles = tv({
+    base: "container mx-auto",
+  });
+</script>

playground/components/Ui/Divider.vue

@@ -0,0 +1,77 @@
+<template>
+  <Primitive as="div" :class="base({ orientation, type, class: props.class })">
+    <Separator :orientation="orientation" :class="border({ orientation, type })" />
+    <template v-if="label || icon || avatar || $slots.default">
+      <div :class="container({ orientation, type })">
+        <slot>
+          <slot name="label">
+            <span v-if="label" :class="labelClass({ orientation, type })">
+              {{ label }}
+            </span>
+          </slot>
+          <slot name="icon">
+            <Icon v-if="icon" :name="icon" :class="iconClass({ orientation, type })" />
+          </slot>
+          <slot name="avatar">
+            <UiAvatar v-if="avatar" :src="avatar" />
+          </slot>
+        </slot>
+      </div>
+    </template>
+    <Separator :orientation="orientation" :class="border({ orientation, type })" />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive, Separator } from "radix-vue";
+
+  const props = defineProps<{
+    class?: any;
+    type?: VariantProps<typeof style>["type"];
+    orientation?: VariantProps<typeof style>["orientation"];
+    icon?: string;
+    label?: string;
+    avatar?: string;
+  }>();
+
+  const style = tv({
+    slots: {
+      base: "flex w-full items-center text-center align-middle",
+      container: "flex font-medium",
+      border: "flex border-border",
+      icon: "h-5 w-5 shrink-0",
+      label: "text-sm",
+    },
+    variants: {
+      orientation: {
+        horizontal: {
+          base: "flex-row",
+          container: "mx-3 whitespace-nowrap",
+          border: "w-full border-t",
+        },
+        vertical: {
+          base: "h-full flex-col",
+          container: "my-3",
+          border: "h-full border-s",
+        },
+      },
+      type: {
+        solid: {
+          border: "border-solid",
+        },
+        dashed: {
+          border: "border-dashed",
+        },
+        dotted: {
+          border: "border-dotted",
+        },
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+      type: "solid",
+    },
+  });
+
+  const { base, border, container, icon: iconClass, label: labelClass } = style();
+</script>

playground/components/Ui/Navbar.vue

@@ -0,0 +1,31 @@
+<template>
+  <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, 'class')">
+    <slot> </slot>
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "radix-vue";
+  import type { PrimitiveProps } from "radix-vue";
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        class?: any;
+        sticky?: boolean;
+      }
+    >(),
+    {
+      as: "header",
+    }
+  );
+
+  const styles = tv({
+    base: "z-20 border-b bg-background/90 backdrop-blur",
+    variants: {
+      sticky: {
+        true: "sticky top-0",
+      },
+    },
+  });
+</script>