@flyanra/vue-core 0.4.0 → 0.4.1

package/src/components/form/input-renderers/number/FlyNumber.vue

@@ -1,48 +1,48 @@
-<template>
-  <el-input
-    v-model.number="inputProxy"
-    style="width: 100%"
-    type="number"
-    v-bind="input?.attrs"
-    :placeholder="input?.placeholder"
-    @change="(val) => emit('change', displayToNumber(val))"
-    @blur="() => emit('blur')"
-    @focus="() => emit('focus')"
-  >
-  </el-input>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { ElInput } from 'element-plus'
-
-import { getInputDisplayValue } from '../input-renderer.utils'
-
-import './FlyNumber.scss'
-import type { T_InputNumber, T_InputTextValues } from './FlyNumber.types'
-import { displayToNumber } from './FlyNumber.utils'
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: T_InputTextValues): void
-  (e: 'change', v: T_InputTextValues): void
-  (e: 'blur'): void
-  (e: 'focus'): void
-}>()
-
-const props = defineProps<{
-  modelValue?: unknown
-  input?: T_InputNumber
-}>()
-
-const inputProxy = computed({
-  get: () => {
-    return getInputDisplayValue(props.modelValue, 'number')
-  },
-  set: (v) => {
-    const parsed = displayToNumber(v)
-    emit('update:modelValue', parsed)
-    emit('change', parsed)
-  }
-})
-</script>
+<template>
+  <el-input
+    v-model.number="inputProxy"
+    style="width: 100%"
+    type="number"
+    v-bind="input?.attrs"
+    :placeholder="input?.placeholder"
+    @change="(val) => emit('change', displayToNumber(val))"
+    @blur="() => emit('blur')"
+    @focus="() => emit('focus')"
+  >
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElInput } from 'element-plus'
+
+import { getInputDisplayValue } from '../input-renderer.utils'
+
+import './FlyNumber.scss'
+import type { T_InputNumber, T_InputTextValues } from './FlyNumber.types'
+import { displayToNumber } from './FlyNumber.utils'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: T_InputTextValues): void
+  (e: 'change', v: T_InputTextValues): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: unknown
+  input?: T_InputNumber
+}>()
+
+const inputProxy = computed({
+  get: () => {
+    return getInputDisplayValue(props.modelValue, 'number')
+  },
+  set: (v) => {
+    const parsed = displayToNumber(v)
+    emit('update:modelValue', parsed)
+    emit('change', parsed)
+  }
+})
+</script>

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

@@ -1,15 +1,15 @@
-import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
-
-export type T_TenantRegionalFormSection = {
-  key: string
-  fields: T_InputSchema[]
-  title: string
-  description?: string
-  lookupData?: T_FormSchemaLookupData
-  modelValue?: Record<string, unknown>
-}
-
-export type T_TenantRegionalFormProps = {
-  mainFormTitle: string
-  sections?: T_TenantRegionalFormSection[]
-}
+import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
+
+export type T_TenantRegionalFormSection = {
+  key: string
+  fields: T_InputSchema[]
+  title: string
+  description?: string
+  lookupData?: T_FormSchemaLookupData
+  modelValue?: Record<string, unknown>
+}
+
+export type T_TenantRegionalFormProps = {
+  mainFormTitle: string
+  sections?: T_TenantRegionalFormSection[]
+}

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

@@ -1,99 +1,99 @@
-<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>
-
-        <div style="padding: 1rem">
-          <slot></slot>
-        </div>
-      </el-collapse-item>
-
-      <template v-for="section in sections">
-        <el-collapse-item v-if="section.fields?.length" :key="section.key" :name="section.key">
-          <template #title>
-            <FlyCollapseTitleRenderer :title="section.title" />
-          </template>
-          <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) }}
-              </p>
-            </div>
-
-            <FlyFormSchemaRenderer
-              :ref="(el) => setFormRef(el, section.key)"
-              v-model="section.modelValue"
-              :lookup-data="section.lookupData"
-              :form-config="section.fields"
-              :column-span="6"
-            />
-          </div>
-        </el-collapse-item>
-      </template>
-    </el-collapse>
-
-    <div v-else>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { type ComponentPublicInstance, reactive, ref } from 'vue'
-
-import { ElCollapse, ElCollapseItem } from 'element-plus'
-
-import { UseLocaleInjector } from '../../../../composables/UseLocaleInjector'
-import '../../../../styles/element/overrides/collapse.scss'
-import FlyCollapseTitleRenderer from '../../../basic/typography/FlyCollapseTitleRenderer.vue'
-import type { T_FlyFormSchemaRendererInstance } from '../form-schema-renderer/FlyFormSchemaRenderer.types'
-import FlyFormSchemaRenderer from '../form-schema-renderer/FlyFormSchemaRenderer.vue'
-
-import type { T_TenantRegionalFormProps } from './FlyRegionalTenantFormRenderer.types'
-
-enum E_CollapsibleSections {
-  mainForm
-}
-
-defineProps<T_TenantRegionalFormProps>()
-
-const { t } = UseLocaleInjector()
-
-const activeNames = ref<string | number>(E_CollapsibleSections.mainForm)
-const formRefs = reactive<{ [K: string]: T_FlyFormSchemaRendererInstance }>({})
-
-function setFormRef(formRef: Element | ComponentPublicInstance | null, key: string) {
-  if (formRef) {
-    formRefs[key] = formRef as T_FlyFormSchemaRendererInstance
-  }
-}
-
-async function validateForms() {
-  const keys = Object.keys(formRefs)
-  for (let index = 0; index < keys.length; index++) {
-    const element = formRefs[keys[index]]
-    const hasErrors = await element?.validateForm()
-    if (!hasErrors) continue
-    return hasErrors
-  }
-
-  return
-}
-
-defineExpose({
-  validateForms
-})
-</script>
-
-<style lang="scss" scoped>
-@use '../../../../styles/element/mixins/collapse.scss' as el-collapse-mixin;
-
-.fly-regional-tenant-form-renderer {
-  :deep(.el-collapse) {
-    @include el-collapse-mixin.el-collapse-operation-style;
-  }
-}
-</style>
+<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>
+
+        <div style="padding: 1rem">
+          <slot></slot>
+        </div>
+      </el-collapse-item>
+
+      <template v-for="section in sections">
+        <el-collapse-item v-if="section.fields?.length" :key="section.key" :name="section.key">
+          <template #title>
+            <FlyCollapseTitleRenderer :title="section.title" />
+          </template>
+          <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) }}
+              </p>
+            </div>
+
+            <FlyFormSchemaRenderer
+              :ref="(el) => setFormRef(el, section.key)"
+              v-model="section.modelValue"
+              :lookup-data="section.lookupData"
+              :form-config="section.fields"
+              :column-span="6"
+            />
+          </div>
+        </el-collapse-item>
+      </template>
+    </el-collapse>
+
+    <div v-else>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type ComponentPublicInstance, reactive, ref } from 'vue'
+
+import { ElCollapse, ElCollapseItem } from 'element-plus'
+
+import { UseLocaleInjector } from '../../../../composables/UseLocaleInjector'
+import '../../../../styles/element/overrides/collapse.scss'
+import FlyCollapseTitleRenderer from '../../../basic/typography/FlyCollapseTitleRenderer.vue'
+import type { T_FlyFormSchemaRendererInstance } from '../form-schema-renderer/FlyFormSchemaRenderer.types'
+import FlyFormSchemaRenderer from '../form-schema-renderer/FlyFormSchemaRenderer.vue'
+
+import type { T_TenantRegionalFormProps } from './FlyRegionalTenantFormRenderer.types'
+
+enum E_CollapsibleSections {
+  mainForm
+}
+
+defineProps<T_TenantRegionalFormProps>()
+
+const { t } = UseLocaleInjector()
+
+const activeNames = ref<string | number>(E_CollapsibleSections.mainForm)
+const formRefs = reactive<{ [K: string]: T_FlyFormSchemaRendererInstance }>({})
+
+function setFormRef(formRef: Element | ComponentPublicInstance | null, key: string) {
+  if (formRef) {
+    formRefs[key] = formRef as T_FlyFormSchemaRendererInstance
+  }
+}
+
+async function validateForms() {
+  const keys = Object.keys(formRefs)
+  for (let index = 0; index < keys.length; index++) {
+    const element = formRefs[keys[index]]
+    const hasErrors = await element?.validateForm()
+    if (!hasErrors) continue
+    return hasErrors
+  }
+
+  return
+}
+
+defineExpose({
+  validateForms
+})
+</script>
+
+<style lang="scss" scoped>
+@use '../../../../styles/element/mixins/collapse.scss' as el-collapse-mixin;
+
+.fly-regional-tenant-form-renderer {
+  :deep(.el-collapse) {
+    @include el-collapse-mixin.el-collapse-operation-style;
+  }
+}
+</style>

package/src/components/form/input-renderers/select/FlySelect.scss

@@ -1 +1,9 @@
-@use '../../../../styles/element/overrides/select.scss';
+@use 'element-plus/theme-chalk/src/select.scss';
+@use 'element-plus/theme-chalk/src/option.scss';
+
+@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/tag.scss';
+
+@use 'element-plus/theme-chalk/src/popper.scss';
+@use 'element-plus/theme-chalk/src/scrollbar.scss';
+@use 'element-plus/theme-chalk/src/icon.scss';

package/src/components/form/input-renderers/select/FlySelect.types.ts

@@ -1,25 +1,25 @@
-export type T_InputSelectValue = string | number | (string | number)[] | undefined
-
-export type T_InputLabelValue = {
-  label: string
-  value: string | number
-}
-export type T_InputSelectOption = T_InputLabelValue | (number | string)
-export type T_InputSelectOptionList = T_InputSelectOption[] | Record<string, T_InputLabelValue>
-
-export type T_InputSelectBase = T_InputSelect & {
-  type: 'select'
-}
-
-export type T_InputSelect = {
-  placeholder?: string
-  /**
-   * Attrs are passed directly to the input element as props
-   */
-  attrs?: {
-    multiple?: boolean
-  }
-  config?: {
-    options: T_InputSelectOptionList
-  }
-}
+export type T_InputSelectValue = string | number | (string | number)[] | undefined
+
+export type T_InputLabelValue = {
+  label: string
+  value: string | number
+}
+export type T_InputSelectOption = T_InputLabelValue | (number | string)
+export type T_InputSelectOptionList = T_InputSelectOption[] | Record<string, T_InputLabelValue>
+
+export type T_InputSelectBase = T_InputSelect & {
+  type: 'select'
+}
+
+export type T_InputSelect = {
+  placeholder?: string
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: {
+    multiple?: boolean
+  }
+  config?: {
+    options: T_InputSelectOptionList
+  }
+}

package/src/components/form/input-renderers/select/FlySelect.utils.ts

@@ -1,37 +1,37 @@
-import { isArray, isObject } from 'lodash'
-
-import type {
-  T_InputLabelValue,
-  T_InputSelectOption,
-  T_InputSelectOptionList
-} from './FlySelect.types'
-
-export function normalizeSelectOptionsToDict(
-  options: T_InputSelectOptionList
-): Record<string, T_InputLabelValue> {
-  // already a dict: Record<string, {label,value}>
-  if (!isArray(options)) {
-    const out: Record<string, T_InputLabelValue> = {}
-    Object.keys(options).forEach((k) => {
-      const item = options[k]
-      out[String(item.value)] = item
-    })
-    return out
-  }
-
-  // array: (string|number) OR {label,value}
-  const out: Record<string, T_InputLabelValue> = {}
-  options.forEach((opt: T_InputSelectOption) => {
-    if (isObject(opt)) {
-      const lv = opt as T_InputLabelValue
-      out[String(lv.value)] = lv
-    } else {
-      // primitive option => label=value
-      out[String(opt)] = {
-        label: String(opt),
-        value: opt
-      }
-    }
-  })
-  return out
-}
+import { isArray, isObject } from 'lodash'
+
+import type {
+  T_InputLabelValue,
+  T_InputSelectOption,
+  T_InputSelectOptionList
+} from './FlySelect.types'
+
+export function normalizeSelectOptionsToDict(
+  options: T_InputSelectOptionList
+): Record<string, T_InputLabelValue> {
+  // already a dict: Record<string, {label,value}>
+  if (!isArray(options)) {
+    const out: Record<string, T_InputLabelValue> = {}
+    Object.keys(options).forEach((k) => {
+      const item = options[k]
+      out[String(item.value)] = item
+    })
+    return out
+  }
+
+  // array: (string|number) OR {label,value}
+  const out: Record<string, T_InputLabelValue> = {}
+  options.forEach((opt: T_InputSelectOption) => {
+    if (isObject(opt)) {
+      const lv = opt as T_InputLabelValue
+      out[String(lv.value)] = lv
+    } else {
+      // primitive option => label=value
+      out[String(opt)] = {
+        label: String(opt),
+        value: opt
+      }
+    }
+  })
+  return out
+}

package/src/components/form/input-renderers/select/FlySelect.vue

@@ -1,48 +1,48 @@
-<template>
-  <el-select
-    v-model="inputProxy"
-    style="width: 100%"
-    v-bind="input?.attrs"
-    filterable
-    :placeholder="input?.placeholder && input?.placeholder"
-    clearable
-    @change="(val) => emit('change', val)"
-    @blur="() => emit('blur')"
-    @focus="() => emit('focus')"
-  >
-    <el-option v-for="unit in options" :key="unit.value" :value="unit.value" :label="unit.label" />
-  </el-select>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { ElOption, ElSelect } from 'element-plus'
-
-import './FlySelect.scss'
-import type { T_InputSelect, T_InputSelectValue } from './FlySelect.types'
-import { normalizeSelectOptionsToDict } from './FlySelect.utils'
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: T_InputSelectValue): void
-  (e: 'change', v: T_InputSelectValue): void
-  (e: 'blur'): void
-  (e: 'focus'): void
-}>()
-
-const props = defineProps<{
-  modelValue?: T_InputSelectValue
-  input?: T_InputSelect
-}>()
-
-const options = computed(() => normalizeSelectOptionsToDict(props.input?.config?.options || []))
-
-const inputProxy = computed({
-  get: () => {
-    return props.modelValue
-  },
-  set: (v) => {
-    emit('update:modelValue', v)
-  }
-})
-</script>
+<template>
+  <el-select
+    v-model="inputProxy"
+    style="width: 100%"
+    v-bind="input?.attrs"
+    filterable
+    :placeholder="input?.placeholder && input?.placeholder"
+    clearable
+    @change="(val) => emit('change', val)"
+    @blur="() => emit('blur')"
+    @focus="() => emit('focus')"
+  >
+    <el-option v-for="unit in options" :key="unit.value" :value="unit.value" :label="unit.label" />
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElOption, ElSelect } from 'element-plus'
+
+import './FlySelect.scss'
+import type { T_InputSelect, T_InputSelectValue } from './FlySelect.types'
+import { normalizeSelectOptionsToDict } from './FlySelect.utils'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: T_InputSelectValue): void
+  (e: 'change', v: T_InputSelectValue): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: T_InputSelectValue
+  input?: T_InputSelect
+}>()
+
+const options = computed(() => normalizeSelectOptionsToDict(props.input?.config?.options || []))
+
+const inputProxy = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (v) => {
+    emit('update:modelValue', v)
+  }
+})
+</script>

package/src/components/form/input-renderers/text/FlyText.scss

@@ -1 +1 @@
-@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/input.scss';

package/src/components/form/input-renderers/text/FlyText.types.ts

@@ -1,20 +1,20 @@
-export type T_InputTextValues = string | number | undefined
-
-export type T_InputTextBase = T_InputText & {
-  type: 'text' | 'textarea'
-}
-
-export type T_InputText = {
-  placeholder?: string
-  /**
-   * Attrs are passed directly to the input element as props
-   */
-  attrs?: {
-    minlength?: number
-    maxlength?: number
-    showWordLimit?: boolean
-    type?: string
-    rows?: number
-  }
-  mask?: string // example ###-###.@ - uses Maska: https://github.com/beholdr/maska
-}
+export type T_InputTextValues = string | number | undefined
+
+export type T_InputTextBase = T_InputText & {
+  type: 'text' | 'textarea'
+}
+
+export type T_InputText = {
+  placeholder?: string
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: {
+    minlength?: number
+    maxlength?: number
+    showWordLimit?: boolean
+    type?: string
+    rows?: number
+  }
+  mask?: string // example ###-###.@ - uses Maska: https://github.com/beholdr/maska
+}