ui-thing 0.1.18 → 0.1.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.1.19
+
+[compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.1.18...v0.1.19)
+
+### 🚀 Enhancements
+
+- **Number Field:** Add number field component ([30745ec](https://github.com/BayBreezy/ui-thing-cli/commit/30745ec))
+
+### ❤️ Contributors
+
+- Behon Baker ([@BayBreezy](http://github.com/BayBreezy))
+
 ## v0.1.18
 
 [compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.1.17...v0.1.18)

package/dist/index.js

@@ -5241,7 +5241,7 @@ export function useFormField() {
   const props = defineProps<HoverCardTriggerProps>();
 </script>
 `}],utils:[],composables:[],plugins:[]},{name:"Input",value:"input",devDeps:["@vueuse/core"],files:[{fileName:"Input.vue",dirPath:"components/UI",fileContent:`<template>
-  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />
+  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" >
 </template>
 
 <script lang="ts" setup>
@@ -6371,6 +6371,125 @@ export function useFormField() {
     base: "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
   });
 </script>
+`}],utils:[],composables:[],plugins:[]},{name:"Number Field",value:"number-field",deps:["@internationalized/number"],files:[{fileName:"NumberField/Decrement.vue",dirPath:"components/UI",fileContent:`<template>
+  <NumberFieldDecrement v-bind="forwarded" :class="styles({ class: props.class })">
+    <slot>
+      <Icon :name="props.icon" />
+    </slot>
+  </NumberFieldDecrement>
+</template>
+
+<script lang="ts" setup>
+  import { NumberFieldDecrement, useForwardProps } from "radix-vue";
+  import type { NumberFieldDecrementProps } from "radix-vue";
+
+  const props = withDefaults(
+    defineProps<
+      NumberFieldDecrementProps & {
+        class?: any;
+        icon?: string;
+      }
+    >(),
+    { icon: "lucide:minus" }
+  );
+
+  const forwarded = useForwardProps(reactiveOmit(props, "class"));
+
+  const styles = tv({
+    base: "flex h-full shrink-0 items-center justify-center bg-transparent p-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  });
+</script>
+`},{fileName:"NumberField/Increment.vue",dirPath:"components/UI",fileContent:`<template>
+  <NumberFieldIncrement v-bind="forwarded" :class="styles({ class: props.class })">
+    <slot>
+      <Icon :name="props.icon" />
+    </slot>
+  </NumberFieldIncrement>
+</template>
+
+<script lang="ts" setup>
+  import { NumberFieldIncrement, useForwardProps } from "radix-vue";
+  import type { NumberFieldIncrementProps } from "radix-vue";
+
+  const props = withDefaults(
+    defineProps<
+      NumberFieldIncrementProps & {
+        class?: any;
+        icon?: string;
+      }
+    >(),
+    { icon: "lucide:plus" }
+  );
+
+  const forwarded = useForwardProps(reactiveOmit(props, "class"));
+
+  const styles = tv({
+    base: "flex h-full shrink-0 items-center justify-center bg-transparent p-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  });
+</script>
+`},{fileName:"NumberField/Input.vue",dirPath:"components/UI",fileContent:`<template>
+  <NumberFieldInput v-bind="forwarded" :class="styles({ class: props.class })" />
+</template>
+
+<script lang="ts" setup>
+  import { NumberFieldInput, useForwardProps } from "radix-vue";
+  import type { NumberFieldInputProps } from "radix-vue";
+
+  const props = withDefaults(
+    defineProps<
+      NumberFieldInputProps & {
+        class?: any;
+      }
+    >(),
+    {}
+  );
+
+  const forwarded = useForwardProps(reactiveOmit(props, "class"));
+
+  const styles = tv({
+    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",
+  });
+</script>
+`},{fileName:"NumberField/NumberField.vue",dirPath:"components/UI",fileContent:`<template>
+  <NumberFieldRoot
+    v-slot="rootSlotProps"
+    v-bind="forwarded"
+    :class="styles({ class: props.class })"
+  >
+    <slot v-bind="rootSlotProps">
+      <slot name="decrement">
+        <UiNumberFieldDecrement />
+      </slot>
+      <slot name="input">
+        <UiNumberFieldInput />
+      </slot>
+      <slot name="increment">
+        <UiNumberFieldIncrement />
+      </slot>
+    </slot>
+  </NumberFieldRoot>
+</template>
+
+<script lang="ts" setup>
+  import { NumberFieldRoot, useForwardPropsEmits } from "radix-vue";
+  import type { NumberFieldRootEmits, NumberFieldRootProps } from "radix-vue";
+
+  const props = withDefaults(
+    defineProps<
+      NumberFieldRootProps & {
+        class?: any;
+      }
+    >(),
+    {}
+  );
+
+  const emit = defineEmits<NumberFieldRootEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);
+
+  const styles = tv({
+    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",
+  });
+</script>
 `}],utils:[],composables:[],plugins:[]},{name:"Pagination",value:"pagination",files:[{fileName:"Pagination/Ellipsis.vue",dirPath:"components/UI",fileContent:`<template>
   <PaginationEllipsis v-bind="reactiveOmit(props, 'icon')">
     <slot>
@@ -10014,6 +10133,66 @@ export { toast, useToast };
     --ms-empty-color: theme("colors.muted.foreground");
   }
 </style>
+`}],utils:[],composables:[],plugins:[]},{name:"VeeNumberField",value:"vee-number-field",deps:["@vee-validate/nuxt","@morev/vue-transitions","@internationalized/number"],askValidator:!0,nuxtModules:["@vee-validate/nuxt","@morev/vue-transitions/nuxt"],components:["label","number-field"],files:[{fileName:"Vee/NumberField.vue",dirPath:"components/UI",fileContent:`<template>
+  <div class="w-full">
+    <UiLabel
+      v-if="label"
+      :for="inputId"
+      :hint="labelHint"
+      :class="[disabled && 'text-muted-foreground', errorMessage && 'text-destructive', 'mb-2']"
+      ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel
+    >
+    <div class="relative">
+      <UiNumberField
+        v-bind="($attrs, props)"
+        :id="inputId"
+        v-model="value"
+        :disabled="disabled"
+        :required="required"
+        :name="name"
+      >
+        <template v-for="(_, slotName) in $slots" #[slotName]="scope">
+          <slot :name="slotName" v-bind="scope" />
+        </template>
+      </UiNumberField>
+    </div>
+    <TransitionSlide group tag="div">
+      <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">
+        {{ hint }}
+      </p>
+
+      <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">
+        {{ errorMessage }}
+      </p>
+    </TransitionSlide>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { NumberFieldRootProps } from "radix-vue";
+
+  interface Props extends NumberFieldRootProps {
+    label?: string;
+    labelHint?: string;
+    hint?: string;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    rules?: any;
+    validateOnMount?: boolean;
+    required?: boolean;
+  }
+  const props = defineProps<Props>();
+
+  const inputId = computed(() => props.id || useId());
+
+  const { errorMessage, value } = useField(() => props.name || inputId.value, props.rules, {
+    initialValue: props.modelValue,
+    label: props.label,
+    validateOnMount: props.validateOnMount,
+    syncVModel: true,
+  });
+</script>
 `}],utils:[],composables:[],plugins:[]},{name:"Vee Pin Input",value:"vee-pin-input",deps:["@vee-validate/nuxt","@morev/vue-transitions"],askValidator:!0,nuxtModules:["@vee-validate/nuxt","@morev/vue-transitions/nuxt"],components:["label","pin-input"],files:[{fileName:"Vee/PinInput.vue",dirPath:"components/UI",fileContent:`<template>
   <div class="w-full">
     <UiLabel