@flyanra/vue-core 1.4.0 → 1.5.1

package/dist/types/components/form/input-renderers/country-input/FlyCountryCitySelect.vue.d.ts

@@ -1,4 +1,5 @@
 import '../select/FlySelect.scss';
+import '../text/FlyText.scss';
 type __VLS_Props = {
     modelValue?: string;
     country?: string;

package/dist/types/components/form/input-renderers/country-input/FlyCountryStatesSelect.vue.d.ts

@@ -1,4 +1,5 @@
 import '../select/FlySelect.scss';
+import '../text/FlyText.scss';
 type __VLS_Props = {
     modelValue?: string;
     country?: string;

package/dist/types/components/form/input-renderers/index.d.ts

@@ -2,4 +2,7 @@ export * from './form-item-renderer';
 export * from './input-renderer';
 export * from './country-input';
 export * from './phone-number';
+export * from './otp-input';
+export * from './regional-tenant-form-renderer';
 export type { T_InputRendererBase } from './input-renderer.types';
+export type { T_FormSchemaLookupData, T_InputSchema, T_InputSchemaText, T_InputSchemaNumber, T_InputSchemaBoolean, T_InputSchemaSelect, T_InputSchemaValueUnit, T_InputSchemaDateTime } from './form-schema.types';

package/dist/types/components/form/input-renderers/otp-input/FlyOTPInput.vue.d.ts

@@ -0,0 +1,15 @@
+import './FlyOTPInput.scss';
+type __VLS_Props = {
+    modelValue: string;
+    length?: number;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/form/input-renderers/otp-input/index.d.ts

@@ -0,0 +1,3 @@
+import FlyOTPInput from './FlyOTPInput.vue';
+export default FlyOTPInput;
+export { FlyOTPInput };

package/dist/types/components/form/input-renderers/regional-tenant-form-renderer/FlyRegionalTenantFormRenderer.types.d.ts

@@ -1,4 +1,10 @@
 import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types';
+import type FlyRegionalTenantFormRenderer from './FlyRegionalTenantFormRenderer.vue';
+export type T_FlyRegionalTenantFormRendererInstance = InstanceType<typeof FlyRegionalTenantFormRenderer> | null;
+export type T_TenantRegionalFormMainSection = {
+    key: string;
+    title: string;
+};
 export type T_TenantRegionalFormSection = {
     key: string;
     fields: T_InputSchema[];
@@ -8,6 +14,7 @@ export type T_TenantRegionalFormSection = {
     modelValue?: Record<string, unknown>;
 };
 export type T_TenantRegionalFormProps = {
-    mainFormTitle: string;
+    mainSections: T_TenantRegionalFormMainSection[];
     sections?: T_TenantRegionalFormSection[];
+    activeSection?: string | number;
 };

package/dist/types/components/form/input-renderers/regional-tenant-form-renderer/FlyRegionalTenantFormRenderer.vue.d.ts

@@ -1,15 +1,19 @@
 import '../../../../styles/element/overrides/collapse.scss';
 import type { T_TenantRegionalFormProps } from './FlyRegionalTenantFormRenderer.types';
 declare function validateForms(): Promise<true | undefined>;
-declare var __VLS_19: {}, __VLS_38: {};
+declare var __VLS_20: string, __VLS_21: {}, __VLS_40: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
 } & {
-    default?: (props: typeof __VLS_38) => any;
+    default?: (props: typeof __VLS_40) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<T_TenantRegionalFormProps, {
     validateForms: typeof validateForms;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<T_TenantRegionalFormProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeSection": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<T_TenantRegionalFormProps> & Readonly<{
+    "onUpdate:activeSection"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, 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;

package/dist/types/components/form/input-renderers/regional-tenant-form-renderer/index.d.ts

@@ -0,0 +1,4 @@
+import FlyRegionalTenantFormRenderer from './FlyRegionalTenantFormRenderer.vue';
+export default FlyRegionalTenantFormRenderer;
+export { FlyRegionalTenantFormRenderer };
+export type { T_TenantRegionalFormMainSection, T_TenantRegionalFormSection, T_TenantRegionalFormProps, T_FlyRegionalTenantFormRendererInstance } from './FlyRegionalTenantFormRenderer.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyanra/vue-core",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "private": false,
   "description": "Source-distributed Vue component library for Vite and Nuxt consumers.",
   "sideEffects": false,

package/src/components/form/input-renderers/country-input/FlyCountryCitySelect.vue

@@ -28,11 +28,12 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 
-import { ElOption, ElSelect } from 'element-plus'
+import { ElInput, ElOption, ElSelect } from 'element-plus'
 
 import { City } from 'country-state-city'
 
 import '../select/FlySelect.scss'
+import '../text/FlyText.scss'
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string | undefined): void

package/src/components/form/input-renderers/country-input/FlyCountryStatesSelect.vue

@@ -33,11 +33,12 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 
-import { ElOption, ElSelect } from 'element-plus'
+import { ElInput, ElOption, ElSelect } from 'element-plus'
 
 import { State } from 'country-state-city'
 
 import '../select/FlySelect.scss'
+import '../text/FlyText.scss'
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string | undefined): void

package/src/components/form/input-renderers/index.ts

@@ -3,5 +3,17 @@ export * from './input-renderer'
 
 export * from './country-input'
 export * from './phone-number'
+export * from './otp-input'
+export * from './regional-tenant-form-renderer'
 
 export type { T_InputRendererBase } from './input-renderer.types'
+export type {
+  T_FormSchemaLookupData,
+  T_InputSchema,
+  T_InputSchemaText,
+  T_InputSchemaNumber,
+  T_InputSchemaBoolean,
+  T_InputSchemaSelect,
+  T_InputSchemaValueUnit,
+  T_InputSchemaDateTime
+} from './form-schema.types'

package/src/components/form/input-renderers/otp-input/FlyOTPInput.scss

@@ -0,0 +1,27 @@
+@use 'element-plus/theme-chalk/src/input.scss';
+
+.fly-otp-input-group {
+  display: flex;
+  justify-content: center;
+  align-self: center;
+  flex-wrap: wrap;
+  gap: 1rem; // tw:gap-4
+}
+
+.fly-otp-input-slot {
+  width: 3rem; // tw:w-12
+}
+
+.fly-otp-input {
+  .el-input__wrapper {
+    aspect-ratio: 1 / 1; // tw:aspect-square
+    padding: 0;
+  }
+
+  .el-input__inner {
+    text-align: center; // tw:text-center
+    font-weight: 700; // tw:font-bold
+    font-size: 1.5rem; // tw:text-2xl
+    line-height: 2rem;
+  }
+}

package/src/components/form/input-renderers/otp-input/FlyOTPInput.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="fly-otp-input-group">
+    <div v-for="(_, index) in slots" :key="index" class="fly-otp-input-slot">
+      <el-input
+        :ref="(el) => (inputRefs[index] = el as InstanceType<typeof ElInput> | null)"
+        v-model="slots[index]"
+        :disabled="disabled"
+        :maxlength="1"
+        class="fly-otp-input"
+        @input="handleInput(index)"
+        @keydown="(e: KeyboardEvent | Event) => handleKeydown(e, index)"
+        @paste.prevent="handlePaste"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import { ElInput } from 'element-plus'
+
+import './FlyOTPInput.scss'
+
+const props = defineProps<{
+  modelValue: string
+  length?: number
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'complete', value: string): void
+}>()
+
+const resolvedLength = props.length ?? 4
+
+const slots = ref<string[]>(Array(resolvedLength).fill(''))
+const inputRefs = ref<(InstanceType<typeof ElInput> | null)[]>([])
+
+const emitValue = () => {
+  const joined = slots.value.join('')
+  emit('update:modelValue', joined)
+  if (joined.length === resolvedLength && slots.value.every((s) => s.length === 1)) {
+    emit('complete', joined)
+  }
+}
+
+const handleInput = (index: number) => {
+  const val = slots.value[index]
+  if (!val) return
+  // Only keep the last character in case browser allows more than 1
+  slots.value[index] = val.slice(-1).replace(/\D/, '')
+  if (!slots.value[index]) return
+  inputRefs.value[index + 1]?.focus()
+  emitValue()
+}
+
+const handleKeydown = (event: KeyboardEvent | Event, index: number) => {
+  if (!(event instanceof KeyboardEvent)) return
+  if (event.key === 'Backspace') {
+    if (slots.value[index]) {
+      slots.value[index] = ''
+      emitValue()
+    } else {
+      inputRefs.value[index - 1]?.focus()
+    }
+  } else if (event.key === 'ArrowLeft') {
+    inputRefs.value[index - 1]?.focus()
+  } else if (event.key === 'ArrowRight') {
+    inputRefs.value[index + 1]?.focus()
+  } else if (event.key === 'Enter') {
+    emit('complete', slots.value.join(''))
+  }
+}
+
+const handlePaste = (event: ClipboardEvent) => {
+  const pasted = event.clipboardData?.getData('text') ?? ''
+  const digits = pasted.replace(/\D/g, '').slice(0, resolvedLength).split('')
+  digits.forEach((d, i) => {
+    slots.value[i] = d
+  })
+  const lastFilled = Math.min(digits.length, resolvedLength - 1)
+  inputRefs.value[lastFilled]?.focus()
+  emitValue()
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const incoming = (value ?? '').slice(0, resolvedLength).split('')
+    slots.value = Array(resolvedLength)
+      .fill('')
+      .map((_, i) => incoming[i] ?? '')
+  },
+  { immediate: true }
+)
+</script>

package/src/components/form/input-renderers/otp-input/index.ts

@@ -0,0 +1,4 @@
+import FlyOTPInput from './FlyOTPInput.vue'
+
+export default FlyOTPInput
+export { FlyOTPInput }

package/src/components/form/input-renderers/phone-number/FlyPhoneNumberInput.vue

@@ -81,7 +81,6 @@ const handleCountryChange = (value?: string) => {
 watch(
   () => props.modelValue,
   (value) => {
-    console.log(props.modelValue)
     if (!value) {
       localInput.value = ''
       return

package/src/components/form/input-renderers/regional-tenant-form-renderer/FlyRegionalTenantFormRenderer.types.ts

@@ -1,5 +1,16 @@
 import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
 
+import type FlyRegionalTenantFormRenderer from './FlyRegionalTenantFormRenderer.vue'
+
+export type T_FlyRegionalTenantFormRendererInstance = InstanceType<
+  typeof FlyRegionalTenantFormRenderer
+> | null
+
+export type T_TenantRegionalFormMainSection = {
+  key: string
+  title: string
+}
+
 export type T_TenantRegionalFormSection = {
   key: string
   fields: T_InputSchema[]
@@ -10,6 +21,7 @@ export type T_TenantRegionalFormSection = {
 }
 
 export type T_TenantRegionalFormProps = {
-  mainFormTitle: string
+  mainSections: T_TenantRegionalFormMainSection[]
   sections?: T_TenantRegionalFormSection[]
+  activeSection?: string | number
 }

package/src/components/form/input-renderers/regional-tenant-form-renderer/FlyRegionalTenantFormRenderer.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="fly-regional-tenant-form-renderer">
     <el-collapse v-if="sections?.length" v-model="activeNames" accordion>
-      <el-collapse-item :name="E_CollapsibleSections.mainForm">
-        <template #title>
-          <FlyCollapseTitleRenderer :title="mainFormTitle" />
-        </template>
+      <template v-for="mainSection in mainSections" :key="mainSection.key">
+        <el-collapse-item :name="mainSection.key">
+          <template #title>
+            <FlyCollapseTitleRenderer :title="mainSection.title" />
+          </template>
 
-        <div style="padding: 1rem">
-          <slot></slot>
-        </div>
-      </el-collapse-item>
+          <div style="padding: 1rem">
+            <slot :name="mainSection.key"></slot>
+          </div>
+        </el-collapse-item>
+      </template>
 
       <template v-for="section in sections">
         <el-collapse-item v-if="section.fields?.length" :key="section.key" :name="section.key">
@@ -19,7 +21,7 @@
           <div style="padding: 1rem">
             <div v-if="section.description" style="margin-bottom: 1.25rem">
               <p style="font-size: 0.875; line-height: 1.25rem">
-                {{ t(section.description) }}
+                {{ section.description }}
               </p>
             </div>
 
@@ -42,11 +44,10 @@
 </template>
 
 <script setup lang="ts">
-import { type ComponentPublicInstance, reactive, ref } from 'vue'
+import { type ComponentPublicInstance, computed, reactive } from 'vue'
 
 import { ElCollapse, ElCollapseItem } from 'element-plus'
 
-import { useLocaleInjector } from '../../../../composables/useLocaleInjector/useLocaleInjector'
 import '../../../../styles/element/overrides/collapse.scss'
 import FlyCollapseTitleRenderer from '../../../basic/typography/FlyCollapseTitleRenderer.vue'
 import type { T_FlyFormSchemaRendererInstance } from '../form-schema-renderer/FlyFormSchemaRenderer.types'
@@ -54,15 +55,13 @@ import FlyFormSchemaRenderer from '../form-schema-renderer/FlyFormSchemaRenderer
 
 import type { T_TenantRegionalFormProps } from './FlyRegionalTenantFormRenderer.types'
 
-enum E_CollapsibleSections {
-  mainForm
-}
-
-defineProps<T_TenantRegionalFormProps>()
+const props = defineProps<T_TenantRegionalFormProps>()
+const emit = defineEmits<{ 'update:activeSection': [value: string | number] }>()
 
-const { t } = useLocaleInjector()
-
-const activeNames = ref<string | number>(E_CollapsibleSections.mainForm)
+const activeNames = computed<string | number>({
+  get: () => props.activeSection ?? props.mainSections[0]?.key ?? '',
+  set: (val) => emit('update:activeSection', val)
+})
 const formRefs = reactive<{ [K: string]: T_FlyFormSchemaRendererInstance }>({})
 
 function setFormRef(formRef: Element | ComponentPublicInstance | null, key: string) {

package/src/components/form/input-renderers/regional-tenant-form-renderer/index.ts

@@ -0,0 +1,10 @@
+import FlyRegionalTenantFormRenderer from './FlyRegionalTenantFormRenderer.vue'
+
+export default FlyRegionalTenantFormRenderer
+export { FlyRegionalTenantFormRenderer }
+export type {
+  T_TenantRegionalFormMainSection,
+  T_TenantRegionalFormSection,
+  T_TenantRegionalFormProps,
+  T_FlyRegionalTenantFormRendererInstance
+} from './FlyRegionalTenantFormRenderer.types'

package/src/styles/element/overrides/date-time.scss

@@ -9,3 +9,7 @@
 
 @use 'element-plus/theme-chalk/src/popper.scss';
 @use 'element-plus/theme-chalk/src/scrollbar.scss';
+
+.el-date-editor.el-input {
+  --el-date-editor-width: 100%;
+}

package/src/styles/element/overrides/form.scss

@@ -117,3 +117,16 @@
   line-height: 1px;
   font-weight: bolder;
 }
+
+.el-input-group--prepend .el-input-group__prepend .el-select .el-select__wrapper.is-disabled {
+  --el-input-border-color: var(--el-disabled-border-color);
+}
+
+.el-tag {
+  &.el-tag--info {
+    &.el-tag--light {
+      --el-tag-text-color: var(--default-text-color);
+      --el-tag-bg-color: var(--el-color-info-light-7);
+    }
+  }
+}