@flyanra/vue-core 0.3.0 → 1.0.0

package/dist/types/components/general/fly-icon-v2/index.d.ts

@@ -0,0 +1,4 @@
+import FlyIconV2 from './FlyIconV2.vue';
+export default FlyIconV2;
+export { FlyIconV2 };
+export type { T_FlyIconV2Props } from './FlyIconV2.types.ts';

package/dist/types/components/general/index.d.ts

@@ -1,2 +1,4 @@
 export { default as FlyIcon } from './fly-icon';
 export type * from './fly-icon';
+export { default as T_FlyIconV2 } from './fly-icon-v2';
+export type * from './fly-icon-v2';

package/dist/types/components/index.d.ts

@@ -1,8 +1,5 @@
-export { default as AppButton } from './AppButton';
-export type * from './AppButton';
-export { default as AppCard } from './AppCard';
-export type * from './AppCard';
 export * from './navigation';
 export * from './basic';
 export * from './feedback';
 export * from './general';
+export * from './form';

package/dist/types/components/navigation/menu/fly-mini-sidebar/FlyMiniSidebar.types.d.ts

@@ -1,7 +1,7 @@
-import type { T_FlyIconProps } from '../../../general/fly-icon';
+import type { T_FlyIconV2Props } from '../../../general/fly-icon-v2/FlyIconV2.types';
 export type T_FlyMiniSidebarItem = {
     key: string | number;
     label: string;
     path: string;
-    icon: T_FlyIconProps;
+    icon: T_FlyIconV2Props['icon'];
 };

package/dist/types/components/navigation/menu/fly-sidebar/FlySidebar.types.d.ts

@@ -1,8 +1,8 @@
-import type { T_FlyIconProps } from '../../../general/fly-icon/FlyIcon.types';
+import type { T_FlyIconV2Props } from '../../../general';
 export type T_FlySidebarBase = {
     index: string;
     label?: string;
-    icon?: T_FlyIconProps;
+    icon?: T_FlyIconV2Props['icon'];
     disabled?: boolean;
 };
 export type T_FlySidebarItem = T_FlySidebarBase & {

package/dist/types/composables/UseLocaleInjector.d.ts

@@ -0,0 +1,8 @@
+import type { Locale } from '@flyanra/js-utils/locales';
+import type { ComposerTranslation } from 'vue-i18n';
+type T_LocaleInjector = {
+    t: ComposerTranslation;
+    locale: Locale;
+};
+export declare function UseLocaleInjector(): T_LocaleInjector;
+export {};

package/dist/types/composables/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/pure-functions.d.ts

@@ -0,0 +1 @@
+export declare function checkRange(value: unknown, min?: number, max?: number): boolean;

package/dist/types/utils/validators.d.ts

@@ -0,0 +1,8 @@
+import type { FormItemRule } from 'element-plus';
+export declare const isRequiredError: (languageKey: string) => string;
+type RangeObject = {
+    min?: number;
+    max?: number;
+};
+export declare const checkInputRange: (languageKey: string | undefined, range: RangeObject, valueTypeLanguageKey?: string, errorMessage?: string) => FormItemRule["validator"];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyanra/vue-core",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "private": false,
   "description": "Source-distributed Vue component library for Vite and Nuxt consumers.",
   "sideEffects": false,
@@ -30,6 +30,14 @@
       "types": "./dist/types/components/*/index.d.ts",
       "import": "./src/components/*/index.ts"
     },
+    "./composables": {
+      "types": "./dist/types/composables/index.d.ts",
+      "import": "./src/composables/index.ts"
+    },
+    "./composables/*": {
+      "types": "./dist/types/composables/*/index.d.ts",
+      "import": "./src/composables/*/index.ts"
+    },
     "./package.json": "./package.json"
   },
   "types": "./dist/types/index.d.ts",
@@ -79,13 +87,15 @@
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@eslint/js": "^10.0.1",
+    "@flyanra/js-utils": "^1.3.2",
+    "@iconify-json/ri": "^1.2.10",
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mdi/js": "^7.4.47",
     "@remixicon/vue": "^4.9.0",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/vue3-vite": "^10.3.5",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/vue3-vite": "^10.3.6",
     "@tailwindcss/vite": "^4.2.2",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/node": "^24.12.2",
@@ -93,33 +103,41 @@
     "@vitest/browser-playwright": "^4.1.4",
     "@vitest/coverage-v8": "^4.1.4",
     "@vue/tsconfig": "^0.9.1",
+    "dompurify": "^3.4.2",
     "element-plus": "^2.13.7",
     "eslint": "^10.2.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.3.5",
+    "eslint-plugin-storybook": "^10.3.6",
     "eslint-plugin-vue": "^10.8.0",
     "globals": "^17.5.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.4.0",
+    "lodash-es": "^4.18.1",
+    "maska": "^3.2.0",
     "playwright": "^1.59.1",
     "prettier": "^3.8.3",
     "prettier-plugin-packagejson": "^3.0.2",
     "sass": "^1.99.0",
-    "storybook": "^10.3.5",
+    "storybook": "^10.3.6",
     "storybook-vue3-router": "^7.0.0",
     "tailwindcss": "^4.2.2",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.58.2",
+    "unplugin-icons": "^23.0.1",
     "vite": "^8.0.4",
     "vitest": "^4.1.4",
     "vue": "^3.5.32",
     "vue-eslint-parser": "^10.4.0",
+    "vue-i18n": "^11.4.0",
     "vue-tsc": "^3.2.6"
   },
   "peerDependencies": {
+    "@flyanra/js-utils": "^1.3.2",
     "@jamescoyle/vue-icon": "^0.1.2",
     "element-plus": "^2.13.7",
-    "vue": "^3.5.32"
+    "maska": "^3.2.0",
+    "vue": "^3.5.32",
+    "vue-i18n": "^11.4.0"
   },
   "volta": {
     "node": "24.12.0",

package/src/components/basic/fly-button/FlyButton.types.ts

@@ -1,6 +1,6 @@
 import type { ButtonType, ElButton, UseTooltipProps } from 'element-plus'
 
-import type { T_FlyIconTypes } from '../../general/fly-icon/FlyIcon.types'
+import type { T_FlyIconV2Props } from '../../general'
 
 export type FlyButtonIconPosition = 'left' | 'right'
 
@@ -16,9 +16,8 @@ export type FlyButtonProps = {
    */
   clipRound?: boolean
   full?: boolean
-  icon?: string | object
+  icon?: T_FlyIconV2Props['icon']
   iconPosition?: FlyButtonIconPosition
-  iconType?: T_FlyIconTypes
   imageUrl?: string
   label?: string
   size?: FlyButtonSizes

package/src/components/basic/fly-button/FlyButton.vue

@@ -13,18 +13,16 @@
         :class="[{ active, 'aspect-1': aspect1 }]"
         @click="handleClick"
       >
-        <FlyIcon
+        <FlyIconV2
           v-if="icon && resolvedIconPosition === 'left'"
-          :type="iconType"
           :icon="icon"
           :class="[{ 'left-icon': slots.default }]"
         />
 
         <slot></slot>
 
-        <FlyIcon
+        <FlyIconV2
           v-if="icon && resolvedIconPosition === 'right'"
-          :type="iconType"
           :icon="icon"
           :class="[{ 'right-icon': slots.default }]"
         />
@@ -42,10 +40,10 @@ import { computed, useAttrs, useSlots } from 'vue'
 
 import { ElButton } from 'element-plus'
 
-import { isEmpty } from 'lodash'
+import { isEmpty } from 'lodash-es'
 
 import FlyTooltip from '../../feedback/tooltip/FlyTooltip.vue'
-import FlyIcon from '../../general/fly-icon/FlyIcon.vue'
+import FlyIconV2 from '../../general/fly-icon-v2/FlyIconV2.vue'
 
 import './FlyButton.element.scss'
 import type { FlyButtonIconPosition, FlyButtonProps } from './FlyButton.types'

package/src/components/basic/typography/FlyCollapseTitleRenderer.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="fly-collapse-title-renderer">
+    <div class="fly-collapse-title-renderer__inner">
+      <p class="fly-collapse-title-renderer__title">
+        {{ t(title) }}
+      </p>
+
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UseLocaleInjector } from '../../../composables/UseLocaleInjector'
+
+defineProps<{
+  title: string
+}>()
+
+const { t } = UseLocaleInjector()
+</script>
+
+<style lang="scss" scoped>
+.fly-collapse-title-renderer {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  text-align: left;
+  flex-grow: 1;
+
+  &__inner {
+    display: flex;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    flex-grow: 1;
+    align-items: center;
+  }
+
+  &__title {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    flex-grow: 1;
+  }
+}
+</style>

package/src/components/feedback/tooltip/FlyInfoTooltip.vue

@@ -0,0 +1,49 @@
+<template>
+  <span class="fly-info-tooltip">
+    <FlyTooltip
+      v-if="content"
+      :tooltip="{
+        content: DOMPurify.sanitize(content)
+      }"
+    >
+      <slot name="trigger">
+        <FlyIcon class="tw-cursor-pointer" :icon="mdiInformationSlabBoxOutline" />
+      </slot>
+      <template #content>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-if="html" v-html="DOMPurify.sanitize(content)"></div>
+        <slot v-else></slot>
+      </template>
+    </FlyTooltip>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { mdiInformationSlabBoxOutline } from '@mdi/js'
+import DOMPurify from 'dompurify'
+
+import FlyIcon from '../../general/fly-icon/FlyIcon.vue'
+
+import FlyTooltip from './FlyTooltip.vue'
+
+defineProps({
+  content: {
+    type: String,
+    default: ''
+  },
+  html: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.fly-info-tooltip {
+  :deep(.app-icon) {
+    svg {
+      display: inline;
+    }
+  }
+}
+</style>

package/src/components/feedback/tooltip/FlyTooltip.element.scss

@@ -1,4 +1,4 @@
-@use '../../../../styles/element/common.scss' as *;
+@use '../../../styles//element/common.scss' as *;
 
 @use 'element-plus/theme-chalk/src/popper.scss' as *;
 @use 'element-plus/theme-chalk/src/tooltip.scss' as *;

package/src/components/feedback/tooltip/FlyTooltip.vue

@@ -19,6 +19,7 @@ import { computed } from 'vue'
 
 import { ElTooltip, type UseTooltipProps } from 'element-plus'
 
+import './FlyTooltip.element.scss'
 import type { T_FlyTooltipProps } from './FlyTooltip.types'
 
 const props = defineProps<T_FlyTooltipProps>()

package/src/components/form/form.utils.ts

@@ -0,0 +1,72 @@
+import type { FormInstance } from 'element-plus'
+
+import { UseLocaleInjector } from '../../composables/UseLocaleInjector'
+
+export type ValidateFieldsError = { [K: string]: { message?: string }[] }
+
+/**
+ * @returns Translated error message based on active locale
+ */
+export function formFieldErrorMessageFormatter(errors: ValidateFieldsError) {
+  const { t, locale } = UseLocaleInjector()
+  const keys = Object.keys(errors)
+
+  if (keys.length) {
+    const requiredFieldNames: (string | undefined)[] = []
+    const otherErrors: (string | undefined)[] = []
+    let formFieldErrorMessage = ''
+
+    keys.forEach((k) => {
+      const msg = errors[k][0].message
+      const index = msg?.indexOf(t ? t('validation.isRequired') : 'validation.isRequired')
+
+      if (index && index >= 0) {
+        requiredFieldNames.push(msg?.slice(0, index)?.trim())
+      } else {
+        otherErrors.push(msg)
+      }
+    })
+
+    const requiredFieldsLength = requiredFieldNames.length
+    const otherErrorsLength = otherErrors.length
+
+    if (requiredFieldsLength >= 1) {
+      const joinedList = new Intl.ListFormat(locale, {
+        style: 'long',
+        type: 'conjunction'
+      }).format(requiredFieldNames.filter((item): item is string => Boolean(item)))
+
+      formFieldErrorMessage = t
+        ? t('validation.requiredFields', {
+            field: joinedList,
+            count: requiredFieldNames.length
+          })
+        : joinedList
+    }
+
+    if (otherErrorsLength) {
+      if (formFieldErrorMessage) formFieldErrorMessage += ' || ' // temporary
+      otherErrors.forEach((e, i) => {
+        formFieldErrorMessage += e + `${i === otherErrorsLength - 1 ? '' : ' || '}` // temporary
+      })
+    }
+
+    return formFieldErrorMessage
+  }
+
+  return t ? t('validation.someInputsInvalid') : 'validation.someInputsInvalid'
+}
+
+export async function genericFormValidator(formRef: FormInstance): Promise<true> {
+  return new Promise((resolve, reject) => {
+    formRef.validate((valid, errors) => {
+      if (!valid) {
+        if (errors) {
+          return reject(formFieldErrorMessageFormatter(errors))
+        }
+      } else {
+        return resolve(true)
+      }
+    })
+  })
+}

package/src/components/form/index.ts

@@ -0,0 +1,6 @@
+export * from './input-renderers/form-item-renderer'
+export * from './input-renderers/input-renderer'
+
+export type { T_InputRendererBase } from './input-renderers/input-renderer.types'
+export * from './input-validators'
+export * from './form.utils'

package/src/components/form/input-renderers/boolean/FlyBoolean.scss

@@ -0,0 +1 @@
+@use 'element-plus/theme-chalk/src/switch.scss' as *;

package/src/components/form/input-renderers/boolean/FlyBoolean.types.ts

@@ -0,0 +1,16 @@
+export type T_InputBooleanValues = string | number | boolean | undefined
+
+export type T_InputBooleanBase = T_InputBoolean & {
+  type: 'boolean'
+  placeholder?: string
+}
+
+export type T_InputBoolean = {
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: {
+    activeText?: string
+    inactiveText?: string
+  }
+}

package/src/components/form/input-renderers/boolean/FlyBoolean.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-switch
+    v-model="inputProxy"
+    v-bind="input?.attrs"
+    @change="(v) => emit('change', v)"
+  ></el-switch>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+
+import { ElSwitch } from 'element-plus'
+
+import './FlyBoolean.scss'
+import type { T_InputBoolean, T_InputBooleanValues } from './FlyBoolean.types'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: T_InputBooleanValues): void
+  (e: 'change', v: T_InputBooleanValues): void
+}>()
+
+const props = defineProps<{
+  modelValue?: T_InputBooleanValues
+  input?: T_InputBoolean
+}>()
+
+const inputProxy = computed({
+  get: () => {
+    return Boolean(props.modelValue)
+  },
+  set: (v) => {
+    emit('update:modelValue', Boolean(v))
+  }
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    const parsed = Boolean(props.modelValue)
+    if (parsed !== props.modelValue) {
+      emit('update:modelValue', parsed)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>

package/src/components/form/input-renderers/date-time/FlyDateTime.scss

@@ -0,0 +1 @@
+@use '../../../../styles/element/overrides/date-time.scss';

package/src/components/form/input-renderers/date-time/FlyDateTime.types.ts

@@ -0,0 +1,21 @@
+export type T_DateTimeRawValue = Date | [Date, Date] | undefined
+export type T_DateTimeValues = string | string[] | undefined
+
+export type T_DateInputTypes = 'date' | 'dateTime' | 'dateRange' | 'dateTimeRange'
+
+export type T_InputDateTimeBase = T_InputDateTime & {
+  type: 'dateTime'
+}
+
+export type T_InputDateTime = {
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  /**
+   * Attrs are passed directly to the input element as props
+   */
+  attrs?: { [K: string]: unknown }
+  config?: {
+    inputType?: T_DateInputTypes // defaults to dateTime
+  }
+}

package/src/components/form/input-renderers/date-time/FlyDateTime.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-date-picker
+    v-model="inputProxy"
+    style="width: 100%"
+    :type="inputTypeMap[input?.config?.inputType || 'dateTime']"
+    :popper-options="{
+      modifiers: [
+        {
+          name: 'preventOverflow',
+          options: {
+            padding: 8
+          }
+        }
+      ]
+    }"
+    :placeholder="input?.placeholder"
+    :start-placeholder="input?.startPlaceholder"
+    :end-placeholder="input?.endPlaceholder"
+    @change="(val: T_DateTimeRawValue) => emit('change', parseValueForEmit(val))"
+    @blur="() => emit('blur')"
+    @focus="() => emit('focus')"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { type DatePickerProps, ElDatePicker } from 'element-plus'
+
+import './FlyDateTime.scss'
+import type { T_DateTimeRawValue, T_DateTimeValues, T_InputDateTime } from './FlyDateTime.types'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: T_DateTimeValues): void
+  (e: 'change', v: T_DateTimeValues): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: T_DateTimeValues
+  input?: T_InputDateTime
+}>()
+
+const inputTypeMap: Record<string, DatePickerProps['type']> = {
+  date: 'date',
+  dateTime: 'datetime',
+  dateRange: 'daterange',
+  dateTimeRange: 'datetimerange'
+}
+
+const isRange = computed(
+  () =>
+    props.input?.config?.inputType === 'dateRange' ||
+    props.input?.config?.inputType === 'dateTimeRange'
+)
+
+const inputProxy = computed({
+  get: (): T_DateTimeRawValue => {
+    if (!props.modelValue) return undefined
+
+    if (isRange.value && Array.isArray(props.modelValue)) {
+      const d = props.modelValue.map((d) => new Date(d))
+      return [d[0], d[1]]
+    }
+
+    return new Date(props.modelValue as string)
+  },
+  set: (v) => {
+    emit('update:modelValue', parseValueForEmit(v))
+  }
+})
+
+function parseValueForEmit(v: T_DateTimeRawValue) {
+  if (!v) {
+    return undefined
+  }
+
+  if (isRange.value && Array.isArray(v)) {
+    return v.map((d: Date) => d.toISOString())
+  }
+
+  return (v as Date).toISOString()
+}
+</script>

package/src/components/form/input-renderers/form-item-renderer/FlyFormItemRenderer.scss

@@ -0,0 +1,4 @@
+@use 'element-plus/theme-chalk/src/form.scss';
+@use 'element-plus/theme-chalk/src/form-item.scss';
+
+@use 'element-plus/theme-chalk/src/icon.scss';

package/src/components/form/input-renderers/form-item-renderer/FlyFormItemRenderer.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-form-item :prop="input.prop || input.key">
+    <template #label>
+      <FlyInfoTooltip v-if="input.tooltip" :content="input.tooltip" />
+      {{ t(input.label) }}
+    </template>
+
+    <FlyInputRenderer
+      v-model="modelProxy"
+      :input="input"
+      @change="(val: unknown) => emit('change', val)"
+      @blur="() => emit('blur')"
+      @focus="() => emit('focus')"
+    />
+  </el-form-item>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElFormItem } from 'element-plus'
+
+import { UseLocaleInjector } from '../../../../composables/UseLocaleInjector'
+import FlyInfoTooltip from '../../../feedback/tooltip/FlyInfoTooltip.vue'
+import type { T_InputRendererBase } from '../input-renderer.types'
+import FlyInputRenderer from '../input-renderer/FlyInputRenderer.vue'
+
+import './FlyFormItemRenderer.scss'
+
+const props = defineProps<{
+  modelValue: unknown
+  input: T_InputRendererBase
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: unknown): void
+  (e: 'change', value: unknown): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const { t } = UseLocaleInjector()
+
+const modelProxy = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+</script>

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

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

package/src/components/form/input-renderers/form-schema-renderer/FlyFormSchemaRenderer.types.ts

@@ -0,0 +1,3 @@
+import type FlyFormSchemaRenderer from './FlyFormSchemaRenderer.vue'
+
+export type T_FlyFormSchemaRendererInstance = InstanceType<typeof FlyFormSchemaRenderer> | null