@flyanra/vue-core 0.4.0 → 0.4.1

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

@@ -1,48 +1,48 @@
-<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>
-        <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>
+<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>
+        <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 'element-plus/theme-chalk/src/popper.scss' as *;
-@use 'element-plus/theme-chalk/src/tooltip.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.types.ts

@@ -1,5 +1,5 @@
-import type { UseTooltipProps } from 'element-plus'
-
-export type T_FlyTooltipProps = {
-  tooltip?: UseTooltipProps
-}
+import type { UseTooltipProps } from 'element-plus'
+
+export type T_FlyTooltipProps = {
+  tooltip?: UseTooltipProps
+}

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

@@ -1,60 +1,60 @@
-<template>
-  <el-tooltip
-    v-bind="mergedElProps"
-    :popper-class="`fly-tooltip-popper ${popperClasses}`"
-    class="fly-tooltip"
-  >
-    <template v-if="$slots.default">
-      <slot></slot>
-    </template>
-
-    <template v-if="$slots.content" #content>
-      <slot name="content"></slot>
-    </template>
-  </el-tooltip>
-</template>
-
-<script lang="ts" setup>
-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>()
-
-const mergedElProps = computed<UseTooltipProps>(() => {
-  return {
-    enterable: false,
-    showAfter: 1000,
-    ...props.tooltip
-  }
-})
-
-const popperClasses = computed(() => {
-  const classes = []
-
-  if (!mergedElProps.value.enterable) {
-    classes.push('fly-tooltip-popper__no-enter')
-  }
-
-  return classes.join(' ')
-})
-</script>
-
-<style lang="scss">
-@use '../../../styles/mixins/shadows.scss' as shadow;
-
-.fly-tooltip-popper {
-  @include shadow.shadow-lg;
-  max-width: 400px;
-
-  &__no-enter {
-    .fly-tooltip {
-      pointer-events: none;
-      max-width: 400px;
-    }
-  }
-}
-</style>
+<template>
+  <el-tooltip
+    v-bind="mergedElProps"
+    :popper-class="`fly-tooltip-popper ${popperClasses}`"
+    class="fly-tooltip"
+  >
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+
+    <template v-if="$slots.content" #content>
+      <slot name="content"></slot>
+    </template>
+  </el-tooltip>
+</template>
+
+<script lang="ts" setup>
+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>()
+
+const mergedElProps = computed<UseTooltipProps>(() => {
+  return {
+    enterable: false,
+    showAfter: 1000,
+    ...props.tooltip
+  }
+})
+
+const popperClasses = computed(() => {
+  const classes = []
+
+  if (!mergedElProps.value.enterable) {
+    classes.push('fly-tooltip-popper__no-enter')
+  }
+
+  return classes.join(' ')
+})
+</script>
+
+<style lang="scss">
+@use '../../../styles/mixins/shadows.scss' as shadow;
+
+.fly-tooltip-popper {
+  @include shadow.shadow-lg;
+  max-width: 400px;
+
+  &__no-enter {
+    .fly-tooltip {
+      pointer-events: none;
+      max-width: 400px;
+    }
+  }
+}
+</style>

package/src/components/feedback/tooltip/index.ts

@@ -1,6 +1,6 @@
-import FlyTooltip from './FlyTooltip.vue'
-
-export default FlyTooltip
-export { FlyTooltip }
-
-export type { T_FlyTooltipProps } from './FlyTooltip.types'
+import FlyTooltip from './FlyTooltip.vue'
+
+export default FlyTooltip
+export { FlyTooltip }
+
+export type { T_FlyTooltipProps } from './FlyTooltip.types'

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

@@ -1,57 +1,57 @@
-import type { Composer } from 'vue-i18n'
-
-export type ValidateFieldsError = { [K: string]: { message?: string }[] }
-
-/**
- * @returns Translated error message based on active locale
- */
-export function formFieldErrorMessageFormatter(errors: ValidateFieldsError, composer?: Composer) {
-  const keys = Object.keys(errors)
-
-  const t = composer?.t
-
-  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(composer?.locale.value || 'en', {
-        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'
-}
+import type { Composer } from 'vue-i18n'
+
+export type ValidateFieldsError = { [K: string]: { message?: string }[] }
+
+/**
+ * @returns Translated error message based on active locale
+ */
+export function formFieldErrorMessageFormatter(errors: ValidateFieldsError, composer?: Composer) {
+  const keys = Object.keys(errors)
+
+  const t = composer?.t
+
+  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(composer?.locale.value || 'en', {
+        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'
+}

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

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

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

@@ -1,16 +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
-  }
-}
+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

@@ -1,35 +1,35 @@
-<template>
-  <el-switch
-    v-model="inputProxy"
-    v-bind="input?.attrs"
-    @change="(v) => emit('change', v)"
-  ></el-switch>
-</template>
-
-<script setup lang="ts">
-import { computed } 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 props.modelValue
-  },
-  set: (v) => {
-    emit('update:modelValue', v)
-  }
-})
-</script>
+<template>
+  <el-switch
+    v-model="inputProxy"
+    v-bind="input?.attrs"
+    @change="(v) => emit('change', v)"
+  ></el-switch>
+</template>
+
+<script setup lang="ts">
+import { computed } 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 props.modelValue
+  },
+  set: (v) => {
+    emit('update:modelValue', v)
+  }
+})
+</script>

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

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

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

@@ -1,21 +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
-  }
-}
+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
+  }
+}