ui-thing 0.0.15 → 0.0.16

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.0.16
+
+[compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.0.15...v0.0.16)
+
+### 🚀 Enhancements
+
+- **pin-input:** Replace OTP with pin input ([7287b6f](https://github.com/BayBreezy/ui-thing-cli/commit/7287b6f))
+
+### ❤️ Contributors
+
+- Behon Baker <behon.baker@yahoo.com>
+
 ## v0.0.15
 
 [compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.0.14...v0.0.15)

package/dist/index.js

@@ -5354,69 +5354,6 @@ export function useFormField() {\r
     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:"One-Time Password",value:"otp",deps:["tailwind-variants","vue3-otp-input"],devDeps:["@vueuse/core","@vueuse/nuxt"],nuxtModules:["@vueuse/nuxt"],files:[{fileName:"OTP.vue",dirPath:"components/UI",fileContent:`<template>
-  <VOtpInput
-    ref="otp"
-    v-model:value="localModel"
-    :input-classes="styles({ separator: Boolean(separator), class: inputClasses })"
-    :separator="separator"
-    :num-inputs="numInputs"
-    :input-type="inputType"
-    :inputmode="inputmode"
-    :should-auto-focus="shouldAutoFocus"
-    :placeholder="placeholder"
-    :is-disabled="disabled"
-    @on-change="emits('change', $event)"
-    @on-complete="emits('complete', $event)"
-  />
-</template>
-
-<script lang="ts" setup>
-  import VOtpInput from "vue3-otp-input";
-
-  const otp = ref<InstanceType<typeof VOtpInput> | null>(null);
-
-  const props = withDefaults(
-    defineProps<{
-      modelValue?: string;
-      numInputs?: number;
-      separator?: string;
-      inputClasses?: any;
-      conditionalClass?: any[];
-      inputType?: "number" | "tel" | "letter-numeric" | "password";
-      inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
-      shouldAutoFocus?: boolean;
-      placeholder?: string[];
-      disabled?: boolean;
-    }>(),
-    {
-      numInputs: 4,
-      inputType: "letter-numeric",
-      inputmode: "text",
-      separator: "",
-    }
-  );
-  const emits = defineEmits<{
-    "update:modelValue": [any];
-    change: [any];
-    complete: [any];
-    ready: [any];
-  }>();
-  const localModel = useVModel(props, "modelValue", emits);
-
-  const styles = tv({
-    base: "mr-3 h-10 w-10 rounded-md border border-input bg-background p-1 text-center text-base font-medium [-moz-appearance:_textfield] selection:bg-primary  selection:text-primary-foreground placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-    variants: {
-      separator: {
-        true: "mx-2",
-      },
-    },
-  });
-
-  onMounted(() => {
-    emits("ready", otp.value);
-  });
-</script>
 `}],utils:[],composables:[],plugins:[]},{name:"Pagination",value:"pagination",deps:["radix-vue","tailwind-variants"],devDeps:["nuxt-icon"],nuxtModules:["nuxt-icon"],files:[{fileName:"Pagination/Ellipsis.vue",dirPath:"components/UI",fileContent:`<template>
   <PaginationEllipsis v-bind="reactiveOmit(props, 'icon')">
     <slot>
@@ -5624,6 +5561,66 @@ export function useFormField() {\r
     }
   >();
 </script>
+`}],utils:[],composables:[],plugins:[]},{name:"Pin Input (OTP)",value:"pin-input",deps:["radix-vue","tailwind-variants"],devDeps:[],nuxtModules:[],files:[{fileName:"PinInput/PinInput.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <PinInputRoot v-bind="forwarded" :class="styles({ class: props.class })">\r
+    <slot>\r
+      <template v-for="(input, k) in inputCount" :key="k">\r
+        <UiPinInputInput :index="k" />\r
+        <template v-if="k < inputCount - 1">\r
+          <span v-if="separator" class="text-muted-foreground">{{ separator }}</span>\r
+        </template>\r
+      </template>\r
+    </slot>\r
+  </PinInputRoot>\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import { PinInputRoot, useForwardPropsEmits } from "radix-vue";\r
+  import type { PinInputRootEmits, PinInputRootProps } from "radix-vue";\r
+\r
+  const props = withDefaults(\r
+    defineProps<\r
+      PinInputRootProps & {\r
+        /** Custom class(es) to apply to the parent element. */\r
+        class?: any;\r
+        /** The number of inputs to render.  @default 4 */\r
+        inputCount?: number;\r
+        /** The separator to render between inputs.  @default undefined */\r
+        separator?: string;\r
+      }\r
+    >(),\r
+    {\r
+      inputCount: 4,\r
+    }\r
+  );\r
+\r
+  const emits = defineEmits<PinInputRootEmits>();\r
+\r
+  const forwarded = useForwardPropsEmits(\r
+    reactiveOmit(props, "class", "inputCount", "separator"),\r
+    emits\r
+  );\r
+  const styles = tv({\r
+    base: "flex items-center gap-2",\r
+  });\r
+</script>\r
+`},{fileName:"PinInput/PinInputInput.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <PinInputInput v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })" />\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import { PinInputInput } from "radix-vue";\r
+  import type { PinInputInputProps } from "radix-vue";\r
+\r
+  const props = defineProps<\r
+    PinInputInputProps & {\r
+      class?: any;\r
+    }\r
+  >();\r
+  const styles = tv({\r
+    base: "h-10 w-10 rounded-md border border-input bg-background p-1 text-center text-base font-medium placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r
+  });\r
+</script>\r
 `}],utils:[],composables:[],plugins:[]},{name:"Popover",value:"popover",deps:["radix-vue","tailwind-variants"],devDeps:["tailwindcss-animate","nuxt-icon"],nuxtModules:["nuxt-icon"],files:[{fileName:"Popover/Anchor.vue",dirPath:"components/UI",fileContent:`<template>
   <PopoverAnchor v-bind="forwarded">
     <slot></slot>
@@ -8697,82 +8694,68 @@ export { toast, useToast };
     --ms-empty-color: theme("colors.muted.foreground");
   }
 </style>
-`}],utils:[],composables:[],plugins:[]},{name:"VeeOTP",value:"vee-otp",deps:["@vee-validate/nuxt","radix-vue","@morev/vue-transitions","tailwind-variants","vue3-otp-input"],askValidator:!0,devDeps:[],nuxtModules:["@vee-validate/nuxt","@morev/vue-transitions/nuxt"],components:["label","otp"],files:[{fileName:"Vee/OTP.vue",dirPath:"components/UI",fileContent:`<template>
-  <div class="w-full">
-    <UiLabel
-      :for="inputId"
-      v-if="label"
-      :class="[disabled && 'text-muted-foreground', errorMessage && 'text-destructive', 'mb-2']"
-      >{{ label }}</UiLabel
-    >
-    <div class="relative">
-      <UiOtp
-        v-model="value"
-        v-bind="$attrs"
-        :input-classes="inputClasses"
-        :separator="separator"
-        :num-inputs="numInputs"
-        :input-type="inputType"
-        :inputmode="inputmode"
-        :should-auto-focus="shouldAutoFocus"
-        :placeholder="placeholder"
-        :is-disabled="disabled"
-        @change="emits('change', $event)"
-        @complete="emits('complete', $event)"
-        @ready="emits('ready', $event)"
-      />
-    </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 { useId } from "radix-vue";
-
-  const props = defineProps<{
-    label?: string;
-    hint?: string;
-    modelValue?: string;
-    name?: string;
-    id?: string;
-    rules?: any;
-    validateOnMount?: boolean;
-    numInputs?: number;
-    separator?: string;
-    inputClasses?: any;
-    conditionalClass?: any[];
-    inputType?: "number" | "tel" | "letter-numeric" | "password";
-    inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
-    shouldAutoFocus?: boolean;
-    placeholder?: string[];
-    disabled?: boolean;
-  }>();
-
-  defineOptions({ inheritAttrs: false });
-
-  const inputId = useId(props.id);
-
-  const emits = defineEmits<{
-    change: [any];
-    complete: [any];
-    ready: [any];
-  }>();
-
-  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:"Vee Pin Input",value:"vee-pin-input",deps:["@vee-validate/nuxt","radix-vue","@morev/vue-transitions","tailwind-variants"],askValidator:!0,devDeps:[],nuxtModules:["@vee-validate/nuxt","@morev/vue-transitions/nuxt"],components:["label","pin-input"],files:[{fileName:"Vee/PinInput.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <div class="w-full">\r
+    <UiLabel\r
+      :for="inputId"\r
+      v-if="label"\r
+      :class="[disabled && 'text-muted-foreground', errorMessage && 'text-destructive', 'mb-2']"\r
+      >{{ label }}</UiLabel\r
+    >\r
+    <div class="relative">\r
+      <UiPinInput\r
+        @complete="emits('complete', $event)"\r
+        :id="inputId"\r
+        v-bind="{\r
+          ...$attrs,\r
+          ...reactiveOmit(props, 'label', 'hint', 'id', 'rules', 'validateOnMount', 'modelValue'),\r
+        }"\r
+        v-model="value"\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 { useId } from "radix-vue";\r
+  import type { PinInputRootProps } from "radix-vue";\r
+\r
+  const props = defineProps<\r
+    Omit<PinInputRootProps, "as" | "asChild"> & {\r
+      label?: string;\r
+      hint?: string;\r
+      id?: string;\r
+      rules?: any;\r
+      validateOnMount?: boolean;\r
+      separator?: string;\r
+      inputCount?: number;\r
+    }\r
+  >();\r
+\r
+  const emits = defineEmits<{\r
+    complete: [value: string[]];\r
+  }>();\r
+\r
+  defineOptions({ inheritAttrs: false });\r
+\r
+  const inputId = useId(props.id);\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:"VeeRadioGroup",value:"vee-radio-group",deps:["@vee-validate/nuxt","radix-vue","@morev/vue-transitions","tailwind-variants"],askValidator:!0,devDeps:["nuxt-icon"],nuxtModules:["@vee-validate/nuxt","@morev/vue-transitions/nuxt","nuxt-icon"],components:["radio-group","label"],files:[{fileName:"Vee/RadioGroup.vue",dirPath:"components/UI",fileContent:`<template>
   <div :class="styles({ class: props.class })">
     <slot name="label" :errorMessage="errorMessage" :value="value">