ui-thing 0.1.44 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",

package/src/commands/add.ts

@@ -11,6 +11,7 @@ import { compareUIConfig } from "../utils/compareUIConfig";
 import { addModuleToConfig, getNuxtConfig, getUIConfig, updateConfig } from "../utils/config";
 import { fileExists } from "../utils/fileExists";
 import { installPackages } from "../utils/installPackages";
+import { installValidator } from "../utils/installValidator";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 import { promptUserForComponents } from "../utils/promptForComponents";
 import { writeFile } from "../utils/writeFile";
@@ -281,6 +282,21 @@ export const add = new Command()
       }
     }
 
+    // check if any of the components has the `askValidator` property set to true
+    let shouldAskValidator = false;
+    // Check if any component has askValidator set to true
+    for (const component of found) {
+      if (component.askValidator) {
+        shouldAskValidator = true;
+        break;
+      }
+    }
+
+    if (shouldAskValidator) {
+      // Ask the user for their choice of validator
+      await installValidator(uiConfig.packageManager);
+    }
+
     printFancyBoxMessage(
       "All Done!",
       { title: "Components Added" },

package/src/comps.ts

@@ -338,7 +338,7 @@ export default [
         fileName: "Button.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <component\n    :is="elementType"\n    :class="\n      buttonStyles({\n        hasIcon: !!icon,\n        disabled: disabled || loading,\n        variant: variant,\n        size: size,\n        class: props.class,\n      })\n    "\n    :disabled="disabled || loading"\n    v-bind="forwarded"\n  >\n    <slot name="iconLeft">\n      <div\n        v-if="icon && iconPlacement == \'left\'"\n        class="group-hover:translate-x-100 flex w-0 shrink-0 translate-x-[0%] items-center justify-center pr-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:pr-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n    <slot>\n      <span v-if="text">{{ text }}</span>\n    </slot>\n    <slot name="iconRight">\n      <div\n        v-if="icon && iconPlacement == \'right\'"\n        class="flex w-0 shrink-0 translate-x-[100%] items-center justify-center pl-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n  </component>\n</template>\n\n<script setup lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { useForwardProps } from "radix-vue";\n  import type { NuxtLinkProps } from "#app/components";\n\n  type ButtonProps = VariantProps<typeof buttonStyles>;\n  const props = withDefaults(\n    defineProps<\n      NuxtLinkProps & {\n        /** The type fro the button */\n        type?: "button" | "submit" | "reset";\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** Whether the button is loading */\n        loading?: boolean;\n        /** The action to perform when the button is clicked */\n        onClick?: any;\n        /** The element to render the button as */\n        as?: string;\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** The variant of the button */\n        variant?: ButtonProps["variant"];\n        /** The size of the button */\n        size?: ButtonProps["size"];\n        /** The text to display in the button */\n        text?: string;\n        /** Should the icon be displayed on the `left` or the `right`? */\n        iconPlacement?: "left" | "right";\n        /** The icon to display in the button */\n        icon?: string;\n      }\n    >(),\n    {\n      type: "button",\n    }\n  );\n\n  const elementType = computed(() => {\n    if (props.as) return props.as;\n    if (props.href || props.to || props.target) return resolveComponent("NuxtLink");\n    return "button";\n  });\n\n  const forwarded = useForwardProps(\n    reactiveOmit(\n      props,\n      "class",\n      "text",\n      "icon",\n      "iconPlacement",\n      "size",\n      "variant",\n      "as",\n      "loading",\n      "disabled"\n    )\n  );\n</script>\n',
+          '<template>\n  <component\n    :is="elementType"\n    :class="\n      buttonStyles({\n        hasIcon: !!icon,\n        disabled: disabled || loading,\n        variant: variant,\n        size: size,\n        class: props.class,\n      })\n    "\n    :disabled="disabled || loading"\n    v-bind="forwarded"\n  >\n    <slot name="iconLeft">\n      <div\n        v-if="icon && iconPlacement == \'left\'"\n        class="group-hover:translate-x-100 flex w-0 shrink-0 translate-x-[0%] items-center justify-center pr-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:pr-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n    <slot name="loading">\n      <Icon v-if="loading" class="size-4 shrink-0" :name="loadingIcon" />\n    </slot>\n    <slot>\n      <span v-if="text">{{ text }}</span>\n    </slot>\n    <slot name="iconRight">\n      <div\n        v-if="icon && iconPlacement == \'right\'"\n        class="flex w-0 shrink-0 translate-x-[100%] items-center justify-center pl-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n  </component>\n</template>\n\n<script setup lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { useForwardProps } from "radix-vue";\n  import type { NuxtLinkProps } from "#app/components";\n\n  type ButtonProps = VariantProps<typeof buttonStyles>;\n  const props = withDefaults(\n    defineProps<\n      NuxtLinkProps & {\n        /** The type for the button */\n        type?: "button" | "submit" | "reset";\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** Whether the button is loading */\n        loading?: boolean;\n        /** The action to perform when the button is clicked */\n        onClick?: any;\n        /** The element to render the button as */\n        as?: string;\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** The variant of the button */\n        variant?: ButtonProps["variant"];\n        /** The size of the button */\n        size?: ButtonProps["size"];\n        /** The text to display in the button */\n        text?: string;\n        /** Should the icon be displayed on the `left` or the `right`? */\n        iconPlacement?: "left" | "right";\n        /** The icon to display in the button */\n        icon?: string;\n        /** The icon to display when the button is loading */\n        loadingIcon?: string;\n      }\n    >(),\n    {\n      type: "button",\n      loadingIcon: "line-md:loading-loop",\n      iconPlacement: "left",\n      loading: false,\n    }\n  );\n\n  const elementType = computed(() => {\n    if (props.as) return props.as;\n    if (props.href || props.to || props.target) return resolveComponent("NuxtLink");\n    return "button";\n  });\n\n  const forwarded = useForwardProps(\n    reactiveOmit(\n      props,\n      "class",\n      "text",\n      "icon",\n      "iconPlacement",\n      "size",\n      "variant",\n      "as",\n      "loading",\n      "disabled",\n      "loadingIcon"\n    )\n  );\n</script>\n',
       },
     ],
     composables: [],

package/src/utils/installValidator.ts

@@ -0,0 +1,35 @@
+import prompts from "prompts";
+
+import { installPackages } from "./installPackages";
+
+export const installValidator = async (packageManager: string) => {
+  // Depending on the selected validator, install the corresponding packages
+  const validatorPackages = {
+    yup: ["yup", "@vee-validate/yup"],
+    zod: ["zod", "@vee-validate/zod"],
+    joi: ["joi", "@vee-validate/joi"],
+    valibot: ["valibot", "@vee-validate/valibot"],
+  };
+
+  const { validator }: { validator: keyof typeof validatorPackages } = await prompts({
+    type: "select",
+    name: "validator",
+    message: "Choose the validator package to use with Vee Validate: ",
+    choices: [
+      { title: "Yup", value: "yup" },
+      { title: "Zod", value: "zod" },
+      { title: "Joi", value: "joi" },
+      { title: "Valibot", value: "valibot" },
+    ],
+  });
+  if (!validator) {
+    console.log("No validator package selected");
+    return;
+  }
+  console.log(`Selected ${validator} as the validator package`);
+
+  if (validatorPackages[validator]) {
+    await installPackages(packageManager, validatorPackages[validator]);
+  }
+  return validator;
+};