ui-thing 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",
@@ -44,7 +44,7 @@
     "c12": "^1.10.0",
     "commander": "^12.1.0",
     "defu": "^6.1.4",
-    "execa": "^9.1.0",
+    "execa": "^9.2.0",
     "figlet": "^1.7.0",
     "fs-extra": "^11.2.0",
     "kleur": "^4.1.5",

package/src/comps.ts

@@ -1148,7 +1148,7 @@ export default [
         fileName: "Input.vue",
         dirPath: "components/UI",
         fileContent:
-          '<template>\n  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  const props = withDefaults(\n    defineProps<{\n      class?: any;\n      id?: string;\n      name?: string;\n      placeholder?: string;\n      disabled?: boolean;\n      required?: boolean;\n      type?: string;\n      modelValue?: any;\n    }>(),\n    { type: "text" }\n  );\n  const emits = defineEmits<{\n    "update:modelValue": [value: any];\n  }>();\n  const localModel = useVModel(props, "modelValue", emits);\n\n  const styles = tv({\n    base: "form-input h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
+          '<template>\n  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" >\n</template>\n\n<script lang="ts" setup>\n  const props = withDefaults(\n    defineProps<{\n      class?: any;\n      id?: string;\n      name?: string;\n      placeholder?: string;\n      disabled?: boolean;\n      required?: boolean;\n      type?: string;\n      modelValue?: any;\n    }>(),\n    { type: "text" }\n  );\n  const emits = defineEmits<{\n    "update:modelValue": [value: any];\n  }>();\n  const localModel = useVModel(props, "modelValue", emits);\n\n  const styles = tv({\n    base: "form-input h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1492,6 +1492,40 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Number Field",
+    value: "number-field",
+    deps: ["@internationalized/number"],
+    files: [
+      {
+        fileName: "NumberField/Decrement.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <NumberFieldDecrement v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <Icon :name="props.icon" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n\n<script lang="ts" setup>\n  import { NumberFieldDecrement, useForwardProps } from "radix-vue";\n  import type { NumberFieldDecrementProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      NumberFieldDecrementProps & {\n        class?: any;\n        icon?: string;\n      }\n    >(),\n    { icon: "lucide:minus" }\n  );\n\n  const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n  const styles = tv({\n    base: "flex h-full shrink-0 items-center justify-center bg-transparent p-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",\n  });\n</script>\n',
+      },
+      {
+        fileName: "NumberField/Increment.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <NumberFieldIncrement v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <Icon :name="props.icon" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n\n<script lang="ts" setup>\n  import { NumberFieldIncrement, useForwardProps } from "radix-vue";\n  import type { NumberFieldIncrementProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      NumberFieldIncrementProps & {\n        class?: any;\n        icon?: string;\n      }\n    >(),\n    { icon: "lucide:plus" }\n  );\n\n  const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n  const styles = tv({\n    base: "flex h-full shrink-0 items-center justify-center bg-transparent p-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",\n  });\n</script>\n',
+      },
+      {
+        fileName: "NumberField/Input.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <NumberFieldInput v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n  import { NumberFieldInput, useForwardProps } from "radix-vue";\n  import type { NumberFieldInputProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      NumberFieldInputProps & {\n        class?: any;\n      }\n    >(),\n    {}\n  );\n\n  const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n  const styles = tv({\n    base: "h-full w-full grow bg-transparent text-center text-base placeholder:text-muted-foreground/80 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
+      },
+      {
+        fileName: "NumberField/NumberField.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <NumberFieldRoot\n    v-slot="rootSlotProps"\n    v-bind="forwarded"\n    :class="styles({ class: props.class })"\n  >\n    <slot v-bind="rootSlotProps">\n      <slot name="decrement">\n        <UiNumberFieldDecrement />\n      </slot>\n      <slot name="input">\n        <UiNumberFieldInput />\n      </slot>\n      <slot name="increment">\n        <UiNumberFieldIncrement />\n      </slot>\n    </slot>\n  </NumberFieldRoot>\n</template>\n\n<script lang="ts" setup>\n  import { NumberFieldRoot, useForwardPropsEmits } from "radix-vue";\n  import type { NumberFieldRootEmits, NumberFieldRootProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      NumberFieldRootProps & {\n        class?: any;\n      }\n    >(),\n    {}\n  );\n\n  const emit = defineEmits<NumberFieldRootEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);\n\n  const styles = tv({\n    base: "flex h-10 w-full items-center gap-1 rounded-md border border-input bg-background text-base focus-within:border-input focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n  });\n</script>\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Pagination",
     value: "pagination",
@@ -2464,6 +2498,25 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "VeeNumberField",
+    value: "vee-number-field",
+    deps: ["@vee-validate/nuxt", "@morev/vue-transitions", "@internationalized/number"],
+    askValidator: true,
+    nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
+    components: ["label", "number-field"],
+    files: [
+      {
+        fileName: "Vee/NumberField.vue",
+        dirPath: "components/UI",
+        fileContent:
+          '<template>\n  <div class="w-full">\n    <UiLabel\n      v-if="label"\n      :for="inputId"\n      :hint="labelHint"\n      :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n      ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n    >\n    <div class="relative">\n      <UiNumberField\n        v-bind="($attrs, props)"\n        :id="inputId"\n        v-model="value"\n        :disabled="disabled"\n        :required="required"\n        :name="name"\n      >\n        <template v-for="(_, slotName) in $slots" #[slotName]="scope">\n          <slot :name="slotName" v-bind="scope" />\n        </template>\n      </UiNumberField>\n    </div>\n    <TransitionSlide group tag="div">\n      <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n        {{ hint }}\n      </p>\n\n      <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n        {{ errorMessage }}\n      </p>\n    </TransitionSlide>\n  </div>\n</template>\n\n<script lang="ts" setup>\n  import type { NumberFieldRootProps } from "radix-vue";\n\n  interface Props extends NumberFieldRootProps {\n    label?: string;\n    labelHint?: string;\n    hint?: string;\n    disabled?: boolean;\n    name?: string;\n    id?: string;\n    rules?: any;\n    validateOnMount?: boolean;\n    required?: boolean;\n  }\n  const props = defineProps<Props>();\n\n  const inputId = computed(() => props.id || useId());\n\n  const { errorMessage, value } = useField(() => props.name || inputId.value, props.rules, {\n    initialValue: props.modelValue,\n    label: props.label,\n    validateOnMount: props.validateOnMount,\n    syncVModel: true,\n  });\n</script>\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Vee Pin Input",
     value: "vee-pin-input",