pukaad-ui-lib 1.0.1

package/dist/runtime/components/input/input-password.vue

@@ -0,0 +1,128 @@
+<template>
+  <InputTextField
+    v-bind="props"
+    :type="isShowPassword ? 'text' : 'password'"
+    :icon-append="isShowPassword ? 'lucide:eye' : 'lucide:eye-off'"
+    :disabled-error-message="props.new"
+    :rules="defaultRules || props.rules"
+    @click-icon-append="switchEye"
+    v-model="modelValue"
+  >
+    <template #label>
+      <ShadFormLabel class="w-full flex justify-between">
+        <div>
+          {{ props.label }}
+          <span v-if="props.required" class="text-destructive">*</span>
+        </div>
+        <div
+          v-if="!props.disabledForgotPassword"
+          class="font-body-medium text-primary"
+          @click="handleForgotPassword"
+        >
+          ลืมรหัสผ่าน
+        </div>
+      </ShadFormLabel>
+    </template>
+  </InputTextField>
+  <div v-if="props.new" class="space-y-[4px]">
+    <div
+      v-for="(item, i) in listValid"
+      :key="i"
+      class="font-body-large text-gray flex gap-[8px] items-center"
+    >
+      <Icon
+        :name="
+  item.valid ? 'fa6-solid:circle-check' : 'fa6-solid:circle-exclamation'
+"
+        :class="colorValidate(item.valid)"
+      />
+      <div>
+        {{ item.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  new: { type: Boolean, required: false, default: false },
+  disabledForgotPassword: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false, default: "input-password" },
+  name: { type: String, required: false, default: "input-password" },
+  disabled: { type: Boolean, required: false },
+  label: { type: String, required: false },
+  rules: { type: [Object, String, Function], required: false },
+  readonly: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  type: { type: String, required: false },
+  description: { type: String, required: false },
+  disabledErrorMessage: { type: Boolean, required: false },
+  disabledBorder: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  iconPrepend: { type: String, required: false },
+  iconAppend: { type: String, required: false },
+  showCounter: { type: Boolean, required: false },
+  limit: { type: Number, required: false },
+  defaultValue: { type: [String, Number], required: false },
+  modelValue: { type: [String, Number], required: false },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["forgotPassword"]);
+const isShowPassword = ref(false);
+const modelValue = defineModel({ type: String });
+const switchEye = () => {
+  if (props.disabled) return;
+  isShowPassword.value = !isShowPassword.value;
+};
+const isCheckLength = ref(false);
+const isCheckUppercase = ref(false);
+const isCheckNumber = ref(false);
+const isCheckNoSpace = ref(false);
+const listValid = computed(() => [
+  {
+    label: "\u0E40\u0E0A\u0E47\u0E04\u0E04\u0E27\u0E32\u0E21\u0E22\u0E32\u0E27 8-20 \u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23",
+    valid: isCheckLength.value
+  },
+  {
+    label: "\u0E15\u0E31\u0E27\u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E43\u0E2B\u0E0D\u0E48\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 1 \u0E15\u0E31\u0E27",
+    valid: isCheckUppercase.value
+  },
+  {
+    label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 1 \u0E15\u0E31\u0E27",
+    valid: isCheckNumber.value
+  },
+  {
+    label: "\u0E2B\u0E49\u0E32\u0E21\u0E40\u0E27\u0E49\u0E19\u0E27\u0E23\u0E23\u0E04",
+    valid: isCheckNoSpace.value
+  }
+]);
+const colorValidate = (valid) => {
+  if (!modelValue.value) return "text-cloud";
+  if (valid) return "text-success";
+  return "text-destructive";
+};
+const defaultRules = (v) => {
+  if (!v) return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19";
+  const isNotLength = v.length < 8 || v.length > 20;
+  const isNotUppercase = !/[A-Z]/.test(v);
+  const isNotNumber = !/\d/.test(v);
+  const isNotNoSpace = v != "" && /\s/.test(v);
+  isCheckLength.value = false;
+  isCheckUppercase.value = false;
+  isCheckNumber.value = false;
+  isCheckNoSpace.value = false;
+  if (!isNotLength) isCheckLength.value = true;
+  if (!isNotUppercase) isCheckUppercase.value = true;
+  if (!isNotNumber) isCheckNumber.value = true;
+  if (!isNotNoSpace) isCheckNoSpace.value = true;
+  if (isNotLength) return "\u0E40\u0E0A\u0E47\u0E04\u0E04\u0E27\u0E32\u0E21\u0E22\u0E32\u0E27 8-20 \u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23";
+  if (isNotUppercase) return "\u0E15\u0E31\u0E27\u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E43\u0E2B\u0E0D\u0E48\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 1 \u0E15\u0E31\u0E27";
+  if (isNotNumber) return "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E19\u0E49\u0E2D\u0E22 1 \u0E15\u0E31\u0E27";
+  if (isNotNoSpace) return "\u0E2B\u0E49\u0E32\u0E21\u0E40\u0E27\u0E49\u0E19\u0E27\u0E23\u0E23\u0E04";
+  return true;
+};
+const handleForgotPassword = () => {
+  console.log("forgot-password");
+};
+</script>

package/dist/runtime/components/input/input-password.vue.d.ts

@@ -0,0 +1,25 @@
+import type { InputTextFieldProps } from "./input-text-field.vue.js";
+export interface InputPasswordProps extends InputTextFieldProps {
+    new?: boolean;
+    disabledForgotPassword?: boolean;
+}
+type __VLS_Props = InputPasswordProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+} & {
+    forgotPassword: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onForgotPassword?: ((event: Event) => any) | undefined;
+}>, {
+    id: string;
+    name: string;
+    disabledForgotPassword: boolean;
+    new: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/input/input-phone.d.vue.ts

@@ -0,0 +1,20 @@
+import type { InputTextFieldProps } from "@/runtime/components/input/input-text-field.vue";
+interface InputPhoneProps extends InputTextFieldProps {
+}
+type __VLS_Props = InputPhoneProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    setErrors: (errMsg: string[]) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    id: string;
+    name: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/input/input-phone.vue

@@ -0,0 +1,66 @@
+<template>
+  <InputTextField
+    ref="phoneRef"
+    v-bind="props"
+    :rules="defaultRules || props.rules"
+    v-model="phoneCode"
+  />
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import {
+  formatPhone,
+  reverseFormatPhone,
+  checkPattern
+} from "@/runtime/utils/phone";
+const props = defineProps({
+  id: { type: String, required: false, default: "input-phone" },
+  name: { type: String, required: false, default: "input-phone" },
+  disabled: { type: Boolean, required: false },
+  label: { type: String, required: false },
+  rules: { type: [Object, String, Function], required: false },
+  readonly: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  type: { type: String, required: false },
+  description: { type: String, required: false },
+  disabledErrorMessage: { type: Boolean, required: false },
+  disabledBorder: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  iconPrepend: { type: String, required: false },
+  iconAppend: { type: String, required: false },
+  showCounter: { type: Boolean, required: false },
+  limit: { type: Number, required: false },
+  defaultValue: { type: [String, Number], required: false },
+  modelValue: { type: [String, Number], required: false },
+  class: { type: null, required: false }
+});
+const phoneRef = ref();
+const phoneCode = ref("");
+const modelValue = defineModel({ type: String, ...{
+  default: ""
+} });
+const defaultRules = (v) => {
+  if (!v) return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C";
+  if (!checkPattern(v)) return "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+  return true;
+};
+watch(
+  phoneCode,
+  (v) => {
+    if (!v) return;
+    const newNumber = formatPhone(v) || "";
+    phoneCode.value = newNumber;
+    modelValue.value = reverseFormatPhone(newNumber);
+  },
+  {
+    immediate: true
+  }
+);
+const setErrors = (errMsg) => {
+  phoneRef.value?.setErrors(errMsg);
+};
+defineExpose({
+  setErrors
+});
+</script>

package/dist/runtime/components/input/input-phone.vue.d.ts

@@ -0,0 +1,20 @@
+import type { InputTextFieldProps } from "@/runtime/components/input/input-text-field.vue";
+interface InputPhoneProps extends InputTextFieldProps {
+}
+type __VLS_Props = InputPhoneProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    setErrors: (errMsg: string[]) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    id: string;
+    name: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/input/input-radio.d.vue.ts

@@ -0,0 +1,51 @@
+import type { InputRadioProps } from "@/types/components/input/input-radio";
+type __VLS_Props = InputRadioProps;
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {
+    item: number | import("@/types/components/input/input-radio").InputRadioItem;
+}, __VLS_10: `label-${string}-text` | `label-${number}-text`, __VLS_11: {}, __VLS_14: `label-${string}-text` | `label-${number}-text`, __VLS_15: {}, __VLS_17: {
+    item: string | number;
+}, __VLS_20: `label-${string}-text` | `label-${number}-text`, __VLS_21: {}, __VLS_24: `label-${string}-text` | `label-${number}-text`, __VLS_25: {}, __VLS_27: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_14>]?: (props: typeof __VLS_15) => any;
+} & {
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
+} & {
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    error?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    items: import("@/types/components/input/input-radio").InputRadioItem[] | string[] | number[];
+    size: number | string;
+    item: string | number;
+    name: string;
+    columnGap: number | string;
+    disabled: boolean;
+    disabledErrorMessage: boolean;
+    labelPosition: "left" | "right";
+    layout: "vertical" | "horizontal";
+    layoutGap: number | string;
+    standalone: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/input/input-radio.vue

@@ -0,0 +1,161 @@
+<template>
+  <Field
+    :name="props.name"
+    v-slot="{ field, errorMessage }"
+    :standalone="props.standalone"
+    :rules="rules"
+    v-model="modelValue"
+  >
+    <div
+      :class="[layout, layoutGapClass]"
+      :style="{
+  gap: layoutGapStyle
+}"
+    >
+      <template v-if="items.length > 0" v-for="(item, i) in items" :key="i">
+        <slot name="default" :item="item">
+          <label
+            :class="[
+  'flex items-center font-body-large',
+  columnGapClass,
+  cursor
+]"
+            :style="{ gap: columnGapStyle }"
+          >
+            <template v-if="props.labelPosition == 'left'">
+              <slot
+                :name="`label-${typeof item === 'object' ? item.value : item}-text`"
+              >
+                {{ typeof item === "object" ? item.label : item }}
+              </slot>
+            </template>
+
+            <input
+              v-bind="field"
+              :class="['border-[1px] accent-primary', cursor]"
+              type="radio"
+              :name="props.name"
+              :style="{ width: `${props.size}px`, height: `${props.size}px` }"
+              :value="typeof item === 'object' ? item.value : item"
+              :disabled="
+  props.disabled || typeof item === 'object' && item.disabled
+"
+              :checked="
+  modelValue === (typeof item === 'object' ? item.value : item)
+"
+            />
+
+            <template v-if="props.labelPosition == 'right'">
+              <slot
+                :name="`label-${typeof item === 'object' ? item.value : item}-text`"
+              >
+                {{ typeof item === "object" ? item.label : item }}
+              </slot>
+            </template>
+          </label>
+        </slot>
+      </template>
+      <template v-else>
+        <slot name="default" :item="item">
+          <label
+            :class="[
+  'flex items-center font-body-large',
+  columnGapClass,
+  cursor
+]"
+            :style="{ gap: columnGapStyle }"
+          >
+            <template v-if="props.labelPosition == 'left'">
+              <slot :name="`label-${item}-text`">
+                {{ item }}
+              </slot>
+            </template>
+
+            <input
+              v-bind="field"
+              :class="['border-[1px] accent-primary', cursor]"
+              type="radio"
+              :name="props.name"
+              :style="{ width: `${props.size}px`, height: `${props.size}px` }"
+              :value="item"
+              :disabled="props.disabled"
+            />
+
+            <template v-if="props.labelPosition == 'right'">
+              <slot :name="`label-${item}-text`">
+                {{ item }}
+              </slot>
+            </template>
+          </label>
+        </slot>
+      </template>
+
+      <div
+        v-if="!props.disabledErrorMessage && errorMessage"
+        class="font-body-small text-error"
+      >
+        <slot name="error">
+          {{ errorMessage }}
+        </slot>
+      </div>
+    </div>
+  </Field>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  name: { type: String, required: false, default: "radio" },
+  labelPosition: { type: String, required: false, default: "right" },
+  layout: { type: String, required: false, default: "vertical" },
+  rules: { type: null, required: false },
+  layoutGap: { type: [Number, String], required: false, default: 8 },
+  columnGap: { type: [Number, String], required: false, default: 8 },
+  size: { type: [Number, String], required: false, default: 18 },
+  items: { type: Array, required: false, default: () => [] },
+  item: { type: [String, Number], required: false, default: () => "" },
+  disabled: { type: Boolean, required: false, default: false },
+  standalone: { type: Boolean, required: false, default: false },
+  disabledErrorMessage: { type: Boolean, required: false, default: false }
+});
+const modelValue = defineModel({ type: [String, Number] });
+const items = computed(() => {
+  if (!Array.isArray(props.items)) return [];
+  const arr = props.items.map((item) => {
+    if (typeof item === "string") {
+      return {
+        label: item,
+        value: item
+      };
+    }
+    return item;
+  });
+  return arr;
+});
+const columnGapStyle = computed(() => {
+  const columnGap = props?.columnGap.toString().toLowerCase();
+  return columnGap == "auto" ? "auto" : `${props?.columnGap}px`;
+});
+const columnGapClass = computed(() => {
+  const columnGap = props?.columnGap.toString().toLowerCase();
+  return columnGap == "auto" ? "justify-between" : "";
+});
+const layout = computed(() => {
+  if (props.layout === "vertical") {
+    return "flex flex-col";
+  } else {
+    return "flex flex-row";
+  }
+});
+const layoutGapStyle = computed(() => {
+  const layoutGap = props?.layoutGap.toString().toLowerCase();
+  return layoutGap == "auto" ? "auto" : `${props?.layoutGap}px`;
+});
+const layoutGapClass = computed(() => {
+  const layoutGap = props?.layoutGap.toString().toLowerCase();
+  return layoutGap == "auto" ? "justify-between" : "";
+});
+const cursor = computed(() => {
+  return props.disabled ? "cursor-not-allowed" : "cursor-pointer";
+});
+</script>

package/dist/runtime/components/input/input-radio.vue.d.ts

@@ -0,0 +1,51 @@
+import type { InputRadioProps } from "@/types/components/input/input-radio";
+type __VLS_Props = InputRadioProps;
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {
+    item: number | import("@/types/components/input/input-radio").InputRadioItem;
+}, __VLS_10: `label-${string}-text` | `label-${number}-text`, __VLS_11: {}, __VLS_14: `label-${string}-text` | `label-${number}-text`, __VLS_15: {}, __VLS_17: {
+    item: string | number;
+}, __VLS_20: `label-${string}-text` | `label-${number}-text`, __VLS_21: {}, __VLS_24: `label-${string}-text` | `label-${number}-text`, __VLS_25: {}, __VLS_27: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_14>]?: (props: typeof __VLS_15) => any;
+} & {
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
+} & {
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    error?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    items: import("@/types/components/input/input-radio").InputRadioItem[] | string[] | number[];
+    size: number | string;
+    item: string | number;
+    name: string;
+    columnGap: number | string;
+    disabled: boolean;
+    disabledErrorMessage: boolean;
+    labelPosition: "left" | "right";
+    layout: "vertical" | "horizontal";
+    layoutGap: number | string;
+    standalone: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/input/input-rating.d.vue.ts

@@ -0,0 +1,25 @@
+import type { InputRatingProps } from "@/types/components/input/input-rating";
+type __VLS_Props = InputRatingProps;
+declare const ratingValue: import("vue").ModelRef<number, string, number, number>;
+type __VLS_ModelProps = {
+    modelValue?: typeof ratingValue['value'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+} & {
+    select: (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    size: number;
+    borderColor: string;
+    backgroundColor: string;
+    readonly: boolean;
+    ratingStep: number;
+    borderSize: number;
+    activeColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/input/input-rating.vue

@@ -0,0 +1,69 @@
+<template>
+  <NuxtRating
+    :border-color="props.borderColor"
+    :active-color="props.activeColor"
+    :inactive-color="props.backgroundColor"
+    :border-width="props.borderSize"
+    :read-only="props.readonly"
+    :rating-step="props.ratingStep"
+    :rounded-corners="true"
+    :rating-size="props.size"
+    :rating-content="[
+  12,
+  17.27,
+  16.15,
+  19.78,
+  17.64,
+  18.7,
+  16.54,
+  13.98,
+  20.21,
+  10.8,
+  19.64,
+  9.05,
+  14.81,
+  8.64,
+  12.92,
+  4.18,
+  11.08,
+  4.18,
+  9.19,
+  8.63,
+  4.36,
+  9.04,
+  3.79,
+  10.8,
+  7.46,
+  13.98,
+  6.36,
+  18.7,
+  7.85,
+  19.78,
+  12,
+  17.27
+]"
+    @rating-selected="onSelect"
+    :rating-value="ratingValue"
+  />
+</template>
+
+<script setup>
+const emit = defineEmits(["select"]);
+const props = defineProps({
+  readonly: { type: Boolean, required: false, default: false },
+  ratingStep: { type: Number, required: false, default: 1 },
+  size: { type: Number, required: false, default: 24 },
+  borderSize: { type: Number, required: false, default: 0 },
+  borderColor: { type: String, required: false, default: "#fbc02d" },
+  backgroundColor: { type: String, required: false, default: "#c4c4c4" },
+  activeColor: { type: String, required: false, default: "#fbc02d" }
+});
+const ratingValue = defineModel({
+  type: Number,
+  default: 0
+});
+const onSelect = (value) => {
+  ratingValue.value = value;
+  emit("select", value);
+};
+</script>

package/dist/runtime/components/input/input-rating.vue.d.ts

@@ -0,0 +1,25 @@
+import type { InputRatingProps } from "@/types/components/input/input-rating";
+type __VLS_Props = InputRatingProps;
+declare const ratingValue: import("vue").ModelRef<number, string, number, number>;
+type __VLS_ModelProps = {
+    modelValue?: typeof ratingValue['value'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+} & {
+    select: (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    size: number;
+    borderColor: string;
+    backgroundColor: string;
+    readonly: boolean;
+    ratingStep: number;
+    borderSize: number;
+    activeColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/input/input-recaptcha.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    name?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: unknown | string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+} & {
+    verify: (token: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onVerify?: ((token: string) => any) | undefined;
+}>, {
+    name: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;