ui-thing 0.1.9 → 0.1.11

package/CHANGELOG.md

@@ -1,18 +1,46 @@
 # Changelog
 
-## v0.1.9
+## v0.1.11
 
-[compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.1.8...v0.1.9)
+[compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.1.10...v0.1.11)
 
 ### 🏡 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))
+- Update component array ([7e94f02](https://github.com/BayBreezy/ui-thing-cli/commit/7e94f02))
 
 ### ❤️ Contributors
 
 - Behon Baker <behon.baker@yahoo.com>
 
+## 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>\r
+  <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" />\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import { defu } from "defu";\r
+  import { useCurrencyInput } from "vue-currency-input";\r
+  import type { CurrencyInputOptions } from "vue-currency-input";\r
+\r
+  const props = defineProps<{\r
+    class?: any;\r
+    id?: string;\r
+    name?: string;\r
+    placeholder?: string;\r
+    disabled?: boolean;\r
+    required?: boolean;\r
+    modelValue?: any;\r
+    options?: CurrencyInputOptions;\r
+  }>();\r
+\r
+  const { inputRef } = useCurrencyInput(\r
+    defu({}, props.options, {\r
+      currency: "USD",\r
+      locale: "en-US",\r
+      hideCurrencySymbolOnFocus: false,\r
+      hideGroupingSeparatorOnFocus: false,\r
+    })\r
+  );\r
+\r
+  const styles = tv({\r
+    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",\r
+  });\r
+</script>\r
 `}],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";
@@ -3414,57 +3447,57 @@ export default defineNuxtPlugin((nuxtApp) => {
     }\r
   }\r
 </style>\r
-`}],utils:[],composables:[]},{name:"Date Field",value:"date-field",devDeps:["@internationalized/date"],files:[{fileName:"DateField.vue",dirPath:"components/UI",fileContent:`<template>
-  <DateFieldRoot
-    v-slot="{ segments, modelValue, isInvalid }"
-    :class="styles({ class: props.class })"
-    v-bind="props"
-    v-model="localModel"
-  >
-    <template v-for="item in segments" :key="item.part">
-      <DateFieldInput
-        v-if="item.part === 'literal'"
-        :part="item.part"
-        class="flex items-center justify-center text-muted-foreground"
-      >
-        <Icon :name="separatorIcon" class="text-muted-foreground" v-if="separatorIcon" />
-        <span class="mx-1 text-muted-foreground" v-else-if="separator">{{ separator }}</span>
-      </DateFieldInput>
-      <DateFieldInput
-        v-else
-        :part="item.part"
-        class="flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"
-      >
-        {{ item.value }}
-      </DateFieldInput>
-    </template>
-  </DateFieldRoot>
-</template>
-
-<script lang="ts" setup>
-  import { type DateValue } from "@internationalized/date";
-  import { DateFieldInput, DateFieldRoot } from "radix-vue";
-  import type { DateFieldRootEmits, DateFieldRootProps } from "radix-vue";
-
-  const props = withDefaults(
-    defineProps<
-      DateFieldRootProps & {
-        class?: any;
-        separator?: string;
-        separatorIcon?: string;
-      }
-    >(),
-    {
-      separator: "/",
-    }
-  );
-  const emits = defineEmits<DateFieldRootEmits>();
-  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",
-  });
-</script>
+`}],utils:[],composables:[]},{name:"Date Field",value:"date-field",devDeps:["@internationalized/date"],files:[{fileName:"DateField.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <DateFieldRoot\r
+    v-slot="{ segments, modelValue, isInvalid }"\r
+    :class="styles({ class: props.class })"\r
+    v-bind="props"\r
+    v-model="localModel"\r
+  >\r
+    <template v-for="item in segments" :key="item.part">\r
+      <DateFieldInput\r
+        v-if="item.part === 'literal'"\r
+        :part="item.part"\r
+        class="flex items-center justify-center text-muted-foreground"\r
+      >\r
+        <Icon :name="separatorIcon" class="text-muted-foreground" v-if="separatorIcon" />\r
+        <span class="mx-1 text-muted-foreground" v-else-if="separator">{{ separator }}</span>\r
+      </DateFieldInput>\r
+      <DateFieldInput\r
+        v-else\r
+        :part="item.part"\r
+        class="flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"\r
+      >\r
+        {{ item.value }}\r
+      </DateFieldInput>\r
+    </template>\r
+  </DateFieldRoot>\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import { type DateValue } from "@internationalized/date";\r
+  import { DateFieldInput, DateFieldRoot } from "radix-vue";\r
+  import type { DateFieldRootEmits, DateFieldRootProps } from "radix-vue";\r
+\r
+  const props = withDefaults(\r
+    defineProps<\r
+      DateFieldRootProps & {\r
+        class?: any;\r
+        separator?: string;\r
+        separatorIcon?: string;\r
+      }\r
+    >(),\r
+    {\r
+      separator: "/",\r
+    }\r
+  );\r
+  const emits = defineEmits<DateFieldRootEmits>();\r
+  const localModel = defineModel<DateValue>();\r
+\r
+  const styles = tv({\r
+    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",\r
+  });\r
+</script>\r
 `}],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>
   <ClientOnly>
     <VDatePicker
@@ -4891,33 +4924,33 @@ export function useFormField() {
   defineOptions({ inheritAttrs: false });
   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 :class="styles({ class: props.class })" v-bind="props" v-model="localModel" />
-</template>
-
-<script lang="ts" setup>
-  const props = withDefaults(
-    defineProps<{
-      class?: any;
-      id?: string;
-      name?: string;
-      placeholder?: string;
-      disabled?: boolean;
-      required?: boolean;
-      type?: string;
-      modelValue?: any;
-    }>(),
-    { type: "text" }
-  );
-  const emits = defineEmits<{
-    "update:modelValue": [value: any];
-  }>();
-  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",
-  });
-</script>
+`}],utils:[],composables:[],plugins:[]},{name:"Input",value:"input",devDeps:["@vueuse/core"],files:[{fileName:"Input.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <input :class="styles({ class: props.class })" v-bind="props" v-model="localModel" />\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  const props = withDefaults(\r
+    defineProps<{\r
+      class?: any;\r
+      id?: string;\r
+      name?: string;\r
+      placeholder?: string;\r
+      disabled?: boolean;\r
+      required?: boolean;\r
+      type?: string;\r
+      modelValue?: any;\r
+    }>(),\r
+    { type: "text" }\r
+  );\r
+  const emits = defineEmits<{\r
+    "update:modelValue": [value: any];\r
+  }>();\r
+  const localModel = useVModel(props, "modelValue", emits);\r
+\r
+  const styles = tv({\r
+    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",\r
+  });\r
+</script>\r
 `}],utils:[],composables:[],plugins:[]},{name:"Keyboard Key",value:"kbd",files:[{fileName:"Kbd.vue",dirPath:"components/UI",fileContent:`<template>
   <Primitive
     :class="styles({ size, class: props.class })"
@@ -5591,64 +5624,64 @@ export function useFormField() {
     base: "flex cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
   });
 </script>
-`}],utils:[],composables:[],plugins:[]},{name:"Native Select",value:"native-select",devDeps:["@vueuse/core"],files:[{fileName:"NativeSelect.vue",dirPath:"components/UI",fileContent:`<template>
-  <div class="relative">
-    <select
-      ref="select"
-      :multiple="multiple"
-      :name="name"
-      :size="size"
-      :id="id"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :required="required"
-      v-model="localModel"
-      :class="styles({ class: props.class })"
-    >
-      <slot></slot>
-    </select>
-    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center justify-center">
-      <slot name="trailingIcon">
-        <Icon
-          :name="trailingIcon || 'lucide:chevrons-up-down'"
-          class="h-4 w-4 text-muted-foreground"
-        />
-      </slot>
-    </span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  const props = defineProps<{
-    class?: any;
-    id?: string;
-    name?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    required?: boolean;
-    modelValue?: any;
-    multiple?: boolean;
-    size?: number;
-    autofocus?: boolean;
-    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",
-  });
-
-  const select = ref<HTMLSelectElement | null>(null);
-  const emits = defineEmits<{
-    "update:modelValue": [value: any];
-  }>();
-
-  const localModel = useVModel(props, "modelValue", emits);
-
-  onMounted(() => {
-    if (props.autofocus) {
-      select.value?.focus();
-    }
-  });
-</script>
+`}],utils:[],composables:[],plugins:[]},{name:"Native Select",value:"native-select",devDeps:["@vueuse/core"],files:[{fileName:"NativeSelect.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <div class="relative">\r
+    <select\r
+      ref="select"\r
+      :multiple="multiple"\r
+      :name="name"\r
+      :size="size"\r
+      :id="id"\r
+      :placeholder="placeholder"\r
+      :disabled="disabled"\r
+      :required="required"\r
+      v-model="localModel"\r
+      :class="styles({ class: props.class })"\r
+    >\r
+      <slot></slot>\r
+    </select>\r
+    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center justify-center">\r
+      <slot name="trailingIcon">\r
+        <Icon\r
+          :name="trailingIcon || 'lucide:chevrons-up-down'"\r
+          class="h-4 w-4 text-muted-foreground"\r
+        />\r
+      </slot>\r
+    </span>\r
+  </div>\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  const props = defineProps<{\r
+    class?: any;\r
+    id?: string;\r
+    name?: string;\r
+    placeholder?: string;\r
+    disabled?: boolean;\r
+    required?: boolean;\r
+    modelValue?: any;\r
+    multiple?: boolean;\r
+    size?: number;\r
+    autofocus?: boolean;\r
+    trailingIcon?: string;\r
+  }>();\r
+  const styles = tv({\r
+    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",\r
+  });\r
+\r
+  const select = ref<HTMLSelectElement | null>(null);\r
+  const emits = defineEmits<{\r
+    "update:modelValue": [value: any];\r
+  }>();\r
+\r
+  const localModel = useVModel(props, "modelValue", emits);\r
+\r
+  onMounted(() => {\r
+    if (props.autofocus) {\r
+      select.value?.focus();\r
+    }\r
+  });\r
+</script>\r
 `}],utils:[],composables:[],plugins:[]},{name:"Navbar",value:"navbar",files:[{fileName:"Navbar.vue",dirPath:"components/UI",fileContent:`<template>
   <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, 'class')">
     <slot> </slot>
@@ -8917,6 +8950,75 @@ export { toast, useToast };
     }
   );
 </script>
+`}],utils:[],composables:[],plugins:[]},{name:"VeeCurrencyInput",value:"vee-currency-input",deps:["@vee-validate/nuxt","@morev/vue-transitions"],askValidator:!0,nuxtModules:["@vee-validate/nuxt","@morev/vue-transitions/nuxt"],components:["currency-input","label"],files:[{fileName:"Vee/CurrencyInput.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <div class="w-full">\r
+    <UiLabel\r
+      :for="inputId"\r
+      v-if="label"\r
+      :hint="labelHint"\r
+      :class="[disabled && 'text-muted-foreground', errorMessage && 'text-destructive', 'mb-2']"\r
+      >{{ label }}</UiLabel\r
+    >\r
+    <div class="relative">\r
+      <slot name="icon">\r
+        <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r
+          <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\r
+        </span>\r
+      </slot>\r
+      <UiCurrencyInput\r
+        type="text"\r
+        v-model="value"\r
+        :id="inputId"\r
+        :name="name"\r
+        :disabled="disabled"\r
+        v-bind="$attrs"\r
+        :class="[hasIcon && 'pl-9']"\r
+        :placeholder="placeholder"\r
+        :options="options"\r
+      />\r
+    </div>\r
+    <TransitionSlide group tag="div">\r
+      <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\r
+        {{ hint }}\r
+      </p>\r
+\r
+      <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\r
+        {{ errorMessage }}\r
+      </p>\r
+    </TransitionSlide>\r
+  </div>\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import type { CurrencyInputOptions } from "vue-currency-input";\r
+\r
+  const props = defineProps<{\r
+    label?: string;\r
+    labelHint?: string;\r
+    icon?: string;\r
+    hint?: string;\r
+    disabled?: boolean;\r
+    modelValue?: string;\r
+    name?: string;\r
+    id?: string;\r
+    rules?: any;\r
+    validateOnMount?: boolean;\r
+    type?: string;\r
+    placeholder?: string;\r
+    options?: CurrencyInputOptions;\r
+  }>();\r
+\r
+  const inputId = useId();\r
+\r
+  const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r
+\r
+  const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r
+    initialValue: props.modelValue,\r
+    label: props.label,\r
+    validateOnMount: props.validateOnMount,\r
+    syncVModel: true,\r
+  });\r
+</script>\r
 `}],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