ui-thing 0.1.8 → 0.1.10

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## v0.1.10
+
+[compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.1.9...v0.1.10)
+
+### 🚀 Enhancements
+
+- Add currency-input component ([bc0f75b](https://github.com/BayBreezy/ui-thing-cli/commit/bc0f75b))
+
+### 🏡 Chore
+
+- Bump deps ([6e6dcf6](https://github.com/BayBreezy/ui-thing-cli/commit/6e6dcf6))
+
+### ❤️ Contributors
+
+- BayBreezy <behon.baker@yahoo.com>
+
+## v0.1.9
+
+[compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.1.8...v0.1.9)
+
+### 🏡 Chore
+
+- **form-elements:** Use nuxt's `useId` composable instead of the one from radix-vue ([17a952e](https://github.com/BayBreezy/ui-thing-cli/commit/17a952e))
+- Bump deps ([557e58c](https://github.com/BayBreezy/ui-thing-cli/commit/557e58c))
+
+### ❤️ Contributors
+
+- Behon Baker <behon.baker@yahoo.com>
+
 ## v0.1.8
 
 [compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.1.7...v0.1.8)

package/dist/index.js

@@ -2329,6 +2329,39 @@ export const buttonStyles = tv({
 
   const props = defineProps<ContextMenuTriggerProps>();
 </script>
+`}],utils:[],composables:[],plugins:[]},{name:"Currency Input",value:"currency-input",deps:["vue-currency-input"],files:[{fileName:"CurrencyInput.vue",dirPath:"components/UI",fileContent:`<template>
+  <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+  import { defu } from "defu";
+  import { useCurrencyInput } from "vue-currency-input";
+  import type { CurrencyInputOptions } from "vue-currency-input";
+
+  const props = defineProps<{
+    class?: any;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    modelValue?: any;
+    options?: CurrencyInputOptions;
+  }>();
+
+  const { inputRef } = useCurrencyInput(
+    defu({}, props.options, {
+      currency: "USD",
+      locale: "en-US",
+      hideCurrencySymbolOnFocus: false,
+      hideGroupingSeparatorOnFocus: false,
+    })
+  );
+
+  const styles = tv({
+    base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer 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",
+  });
+</script>
 `}],utils:[],composables:[],plugins:[]},{name:"DataTables.net",value:"datatable",deps:["datatables.net-buttons-dt","datatables.net-responsive-dt","datatables.net-searchbuilder-dt","datatables.net-select-dt","datatables.net-vue3","jszip"],plugins:[{fileName:"datatables.client.ts",dirPath:"plugins",fileContent:`import DataTablesCore from "datatables.net";
 import DataTable from "datatables.net-vue3";
 import JSZip from "jszip";
@@ -3462,7 +3495,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   const localModel = defineModel<DateValue>();
 
   const styles = tv({
-    base: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive data-[disabled]:opacity-50 sm:text-sm",
+    base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive data-[disabled]:opacity-50 sm:text-sm",
   });
 </script>
 `}],utils:[],composables:[],plugins:[]},{name:"Datepicker",value:"datepicker",devDeps:["@samk-dev/nuxt-vcalendar"],nuxtModules:["@samk-dev/nuxt-vcalendar"],instructions:["You can customize the datepicker by adding options to your nuxt.config.js file"],files:[{fileName:"Datepicker.vue",dirPath:"components/UI",fileContent:`<template>
@@ -4702,8 +4735,6 @@ export function useFormField() {
 </script>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   defineOptions({ inheritAttrs: false });
 
   const id = useId();
@@ -4917,7 +4948,7 @@ export function useFormField() {
   const localModel = useVModel(props, "modelValue", emits);
 
   const styles = tv({
-    base: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer 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",
+    base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer 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",
   });
 </script>
 `}],utils:[],composables:[],plugins:[]},{name:"Keyboard Key",value:"kbd",files:[{fileName:"Kbd.vue",dirPath:"components/UI",fileContent:`<template>
@@ -5635,7 +5666,7 @@ export function useFormField() {
     trailingIcon?: string;
   }>();
   const styles = tv({
-    base: "flex h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 pr-10 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",
+    base: "h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 pr-10 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",
   });
 
   const select = ref<HTMLSelectElement | null>(null);
@@ -8884,8 +8915,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -8906,9 +8935,7 @@ export { toast, useToast };
     base: "flex gap-3",
   });
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const { errorMessage, checked, handleChange } = useField(
     () => props.name || inputId,
@@ -8923,6 +8950,75 @@ export { toast, useToast };
     }
   );
 </script>
+`}],utils:[],composables:[],plugins:[]},{name:"VeeCurrencyInput",value:"vee-currencyinput",deps:["@vee-validate/nuxt","@morev/vue-transitions"],askValidator:!0,nuxtModules:["@vee-validate/nuxt","@morev/vue-transitions/nuxt"],components:["currencyinput","label"],files:[{fileName:"Vee/CurrencyInput.vue",dirPath:"components/UI",fileContent:`<template>
+  <div class="w-full">
+    <UiLabel
+      :for="inputId"
+      v-if="label"
+      :hint="labelHint"
+      :class="[disabled && 'text-muted-foreground', errorMessage && 'text-destructive', 'mb-2']"
+      >{{ label }}</UiLabel
+    >
+    <div class="relative">
+      <slot name="icon">
+        <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">
+          <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />
+        </span>
+      </slot>
+      <UiCurrencyInput
+        type="text"
+        v-model="value"
+        :id="inputId"
+        :name="name"
+        :disabled="disabled"
+        v-bind="$attrs"
+        :class="[hasIcon && 'pl-9']"
+        :placeholder="placeholder"
+        :options="options"
+      />
+    </div>
+    <TransitionSlide group tag="div">
+      <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">
+        {{ hint }}
+      </p>
+
+      <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">
+        {{ errorMessage }}
+      </p>
+    </TransitionSlide>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { CurrencyInputOptions } from "vue-currency-input";
+
+  const props = defineProps<{
+    label?: string;
+    labelHint?: string;
+    icon?: string;
+    hint?: string;
+    disabled?: boolean;
+    modelValue?: string;
+    name?: string;
+    id?: string;
+    rules?: any;
+    validateOnMount?: boolean;
+    type?: string;
+    placeholder?: string;
+    options?: CurrencyInputOptions;
+  }>();
+
+  const inputId = useId();
+
+  const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
+
+  const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {
+    initialValue: props.modelValue,
+    label: props.label,
+    validateOnMount: props.validateOnMount,
+    syncVModel: true,
+  });
+</script>
 `}],utils:[],composables:[],plugins:[]},{name:"VeeDatepicker",value:"vee-datepicker",deps:["@vee-validate/nuxt","@morev/vue-transitions"],askValidator:!0,nuxtModules:["@vee-validate/nuxt","@morev/vue-transitions/nuxt"],components:["datepicker","label","input"],files:[{fileName:"Vee/Datepicker.vue",dirPath:"components/UI",fileContent:`<template>
   <div class="w-full">
     <UiLabel
@@ -8971,8 +9067,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = withDefaults(
     defineProps<{
       label?: string;
@@ -8993,9 +9087,7 @@ export { toast, useToast };
     }
   );
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9048,8 +9140,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -9062,14 +9152,12 @@ export { toast, useToast };
     accept?: string;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
   const emits = defineEmits<{
     change: [files?: FileList | File | File[] | null];
     blur: [event?: FocusEvent];
   }>();
 
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9118,8 +9206,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     labelHint?: string;
@@ -9135,9 +9221,7 @@ export { toast, useToast };
     placeholder?: string;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9197,8 +9281,6 @@ export { toast, useToast };
 
   import "@vueform/multiselect/themes/default.css";
 
-  import { useId } from "radix-vue";
-
   const multiselect = shallowRef<InstanceType<typeof Multiselect> | null>(null);
 
   interface Props
@@ -9238,9 +9320,7 @@ export { toast, useToast };
     "ready",
   ]);
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {
     initialValue: props.modelValue,
@@ -9354,7 +9434,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
   import type { PinInputRootProps } from "radix-vue";
 
   const props = defineProps<
@@ -9373,9 +9452,7 @@ export { toast, useToast };
     complete: [value: string[]];
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {
     initialValue: props.modelValue || [],
@@ -9489,8 +9566,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -9504,9 +9579,7 @@ export { toast, useToast };
     trailingIcon?: string;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9555,8 +9628,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -9571,9 +9642,7 @@ export { toast, useToast };
     placeholder?: string;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));
 
@@ -9619,8 +9688,6 @@ export { toast, useToast };
 </template>
 
 <script lang="ts" setup>
-  import { useId } from "radix-vue";
-
   const props = defineProps<{
     label?: string;
     icon?: string;
@@ -9634,9 +9701,7 @@ export { toast, useToast };
     rows?: number;
   }>();
 
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
+  const inputId = props.id || useId();
 
   const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));