@flyanra/vue-core 1.2.0 → 1.3.0

package/src/components/navigation/menu/fly-sidebar/FlySidebar.vue

@@ -1,146 +1,146 @@
-<template>
-  <div class="fly-sidebar">
-    <el-scrollbar :height="height">
-      <el-menu
-        :default-active="defaultActive"
-        :collapse="isCollapsed"
-        :router="router"
-        popper-class="fly-sidebar-popper"
-      >
-        <FlySidebarNode v-for="node in menu" :key="node.index" :node="node" />
-      </el-menu>
-    </el-scrollbar>
-
-    <div class="fly_sidebar__collapse-trigger" role="button" @click="toggleCollapse">
-      <FlyIconV2 :icon="isCollapsed ? IconMdiChevronRight : IconMdiChevronLeft" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import IconMdiChevronLeft from '~icons/mdi/chevron-left'
-import IconMdiChevronRight from '~icons/mdi/chevron-right'
-
-import { ElMenu, ElScrollbar } from 'element-plus'
-
-import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
-
-import './FlySidebar.element.scss'
-import type { T_FlySidebarProps } from './FlySidebar.types'
-import FlySidebarNode from './FlySidebarNode.vue'
-
-const { router = true, defaultActive, menu, height } = defineProps<T_FlySidebarProps>()
-
-const isCollapsed = defineModel<boolean>('collapsed', { default: false })
-
-function toggleCollapse() {
-  isCollapsed.value = !isCollapsed.value
-}
-</script>
-
-<style lang="scss" scoped>
-$radius: 9999px;
-$height: 30px;
-$trigger-height: 20px;
-
-.fly-sidebar {
-  position: relative;
-  display: inline-block;
-  height: 100%;
-  background-color: var(--el-menu-bg-color);
-  border-inline-end: 1px solid var(--anra-border-color);
-
-  :deep(.el-menu) {
-    border-right: 0;
-    &.el-menu--vertical {
-      --el-menu-item-height: #{$height};
-      --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
-
-      padding-inline-end: 1rem;
-      padding-top: calc(#{$trigger-height} + 10px);
-      padding-bottom: 1rem;
-      min-height: auto;
-      height: 100%;
-
-      &.el-menu--collapse {
-        padding-inline-end: 0.3rem;
-      }
-
-      &:not(.el-menu--collapse) {
-        width: 200px;
-      }
-    }
-  }
-}
-
-.fly_sidebar__collapse-trigger {
-  position: absolute;
-  top: 5px;
-  inset-inline-end: 0;
-  width: calc(#{$trigger-height} + 5px);
-  height: $trigger-height;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid var(--anra-border-color);
-  border-left: 1px solid var(--anra-border-color);
-  border-bottom: 1px solid var(--anra-border-color);
-  color: var(--dynamic-light);
-  border-start-start-radius: 5px;
-  border-end-start-radius: 5px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: var(--anra-primary);
-    color: var(--anra-black);
-  }
-}
-</style>
-
-<style lang="scss">
-$radius: 9999px;
-$height: 30px;
-
-.fly-sidebar .el-menu.el-menu--vertical,
-.fly-sidebar-popper {
-  --el-menu-item-height: #{$height};
-  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 2px);
-
-  & > li:not(:last-child),
-  .el-sub-menu .el-menu .el-menu-item {
-    margin-bottom: 4px;
-  }
-
-  .el-sub-menu {
-    --el-menu-item-height: #{$height};
-
-    .el-menu {
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
-    }
-  }
-
-  .el-sub-menu__title,
-  .el-menu-item {
-    border-top-right-radius: $radius;
-    border-bottom-right-radius: $radius;
-  }
-
-  .el-menu-item.is-active {
-    font-weight: 500;
-    background-color: var(--anra-primary);
-    color: var(--anra-text-on-primary);
-  }
-}
-
-.fly-sidebar {
-  --el-menu-base-level-padding: 10px;
-
-  .el-menu-item [class^='el-icon'],
-  .el-sub-menu__title [class^='el-icon']:not(.el-sub-menu__icon-arrow) {
-    margin-right: 10px;
-    font-size: 15px;
-  }
-}
-</style>
+<template>
+  <div class="fly-sidebar">
+    <el-scrollbar :height="height">
+      <el-menu
+        :default-active="defaultActive"
+        :collapse="isCollapsed"
+        :router="router"
+        popper-class="fly-sidebar-popper"
+      >
+        <FlySidebarNode v-for="node in menu" :key="node.index" :node="node" />
+      </el-menu>
+    </el-scrollbar>
+
+    <div class="fly_sidebar__collapse-trigger" role="button" @click="toggleCollapse">
+      <FlyIconV2 :icon="isCollapsed ? IconMdiChevronRight : IconMdiChevronLeft" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import IconMdiChevronLeft from '~icons/mdi/chevron-left'
+import IconMdiChevronRight from '~icons/mdi/chevron-right'
+
+import { ElMenu, ElScrollbar } from 'element-plus'
+
+import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
+
+import './FlySidebar.element.scss'
+import type { T_FlySidebarProps } from './FlySidebar.types'
+import FlySidebarNode from './FlySidebarNode.vue'
+
+const { router = true, defaultActive, menu, height } = defineProps<T_FlySidebarProps>()
+
+const isCollapsed = defineModel<boolean>('collapsed', { default: false })
+
+function toggleCollapse() {
+  isCollapsed.value = !isCollapsed.value
+}
+</script>
+
+<style lang="scss" scoped>
+$radius: 9999px;
+$height: 30px;
+$trigger-height: 20px;
+
+.fly-sidebar {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+  background-color: var(--el-menu-bg-color);
+  border-inline-end: 1px solid var(--anra-border-color);
+
+  :deep(.el-menu) {
+    border-right: 0;
+    &.el-menu--vertical {
+      --el-menu-item-height: #{$height};
+      --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
+
+      padding-inline-end: 1rem;
+      padding-top: calc(#{$trigger-height} + 10px);
+      padding-bottom: 1rem;
+      min-height: auto;
+      height: 100%;
+
+      &.el-menu--collapse {
+        padding-inline-end: 0.3rem;
+      }
+
+      &:not(.el-menu--collapse) {
+        width: 200px;
+      }
+    }
+  }
+}
+
+.fly_sidebar__collapse-trigger {
+  position: absolute;
+  top: 5px;
+  inset-inline-end: 0;
+  width: calc(#{$trigger-height} + 5px);
+  height: $trigger-height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid var(--anra-border-color);
+  border-left: 1px solid var(--anra-border-color);
+  border-bottom: 1px solid var(--anra-border-color);
+  color: var(--dynamic-light);
+  border-start-start-radius: 5px;
+  border-end-start-radius: 5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--anra-primary);
+    color: var(--anra-black);
+  }
+}
+</style>
+
+<style lang="scss">
+$radius: 9999px;
+$height: 30px;
+
+.fly-sidebar .el-menu.el-menu--vertical,
+.fly-sidebar-popper {
+  --el-menu-item-height: #{$height};
+  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 2px);
+
+  & > li:not(:last-child),
+  .el-sub-menu .el-menu .el-menu-item {
+    margin-bottom: 4px;
+  }
+
+  .el-sub-menu {
+    --el-menu-item-height: #{$height};
+
+    .el-menu {
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+    }
+  }
+
+  .el-sub-menu__title,
+  .el-menu-item {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+
+  .el-menu-item.is-active {
+    font-weight: 500;
+    background-color: var(--anra-primary);
+    color: var(--anra-text-on-primary);
+  }
+}
+
+.fly-sidebar {
+  --el-menu-base-level-padding: 10px;
+
+  .el-menu-item [class^='el-icon'],
+  .el-sub-menu__title [class^='el-icon']:not(.el-sub-menu__icon-arrow) {
+    margin-right: 10px;
+    font-size: 15px;
+  }
+}
+</style>

package/src/components/navigation/menu/fly-sidebar/FlySidebarNode.vue

@@ -1,47 +1,47 @@
-<template>
-  <el-menu-item v-if="node.type === 'item'" :index="node.index" :disabled="node.disabled">
-    <template v-if="node.icon">
-      <i class="el-icon">
-        <FlyIconV2 :icon="node.icon" />
-      </i>
-    </template>
-
-    <template #title>
-      {{ node.label }}
-    </template>
-  </el-menu-item>
-
-  <el-sub-menu v-else-if="node.type === 'submenu'" :index="node.index">
-    <template #title>
-      <template v-if="node.icon">
-        <i class="el-icon">
-          <FlyIconV2 :icon="node.icon" />
-        </i>
-      </template>
-
-      <span>{{ node.label }}</span>
-    </template>
-
-    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
-  </el-sub-menu>
-
-  <el-menu-item-group v-else>
-    <template v-if="node.label" #title>
-      <span>{{ node.label }}</span>
-    </template>
-
-    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
-  </el-menu-item-group>
-</template>
-
-<script lang="ts" setup>
-import { ElMenuItem, ElMenuItemGroup, ElSubMenu } from 'element-plus'
-
-import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
-
-import type { T_FlySidebarNode } from './FlySidebar.types'
-
-defineProps<{
-  node: T_FlySidebarNode
-}>()
-</script>
+<template>
+  <el-menu-item v-if="node.type === 'item'" :index="node.index" :disabled="node.disabled">
+    <template v-if="node.icon">
+      <i class="el-icon">
+        <FlyIconV2 :icon="node.icon" />
+      </i>
+    </template>
+
+    <template #title>
+      {{ node.label }}
+    </template>
+  </el-menu-item>
+
+  <el-sub-menu v-else-if="node.type === 'submenu'" :index="node.index">
+    <template #title>
+      <template v-if="node.icon">
+        <i class="el-icon">
+          <FlyIconV2 :icon="node.icon" />
+        </i>
+      </template>
+
+      <span>{{ node.label }}</span>
+    </template>
+
+    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
+  </el-sub-menu>
+
+  <el-menu-item-group v-else>
+    <template v-if="node.label" #title>
+      <span>{{ node.label }}</span>
+    </template>
+
+    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
+  </el-menu-item-group>
+</template>
+
+<script lang="ts" setup>
+import { ElMenuItem, ElMenuItemGroup, ElSubMenu } from 'element-plus'
+
+import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
+
+import type { T_FlySidebarNode } from './FlySidebar.types'
+
+defineProps<{
+  node: T_FlySidebarNode
+}>()
+</script>

package/src/composables/index.ts

@@ -1,4 +1,4 @@
-export { initLocaleInjector, UseLocaleInjector } from './UseLocaleInjector'
-export type { T_LocaleInjector } from './UseLocaleInjector'
-
-export { useSidebarActiveIndex } from './useSidebarActiveIndex'
+export * from './useLocaleInjector'
+export * from './useSidebarActiveIndex'
+export * from './useFeatureGate'
+export * from './useFormHider'

package/src/composables/useFeatureGate/index.ts

@@ -0,0 +1 @@
+export * from './useFeatureGate'

package/src/composables/useFeatureGate/useFeatureGate.ts

@@ -0,0 +1,19 @@
+import { type MaybeRefOrGetter, computed, toValue } from 'vue'
+
+import {
+  type T_FeatureGatingConfig,
+  type T_GateInput,
+  isFeatureAllowedByPriority
+} from '@flyanra/js-utils/utils'
+
+export function useFeatureGate(
+  configRefs: MaybeRefOrGetter<(T_FeatureGatingConfig | undefined)[]>
+) {
+  const allow = <TModuleKey extends string>(gate: T_GateInput<TModuleKey> | undefined) =>
+    computed(() => isFeatureAllowedByPriority(toValue(configRefs), gate))
+
+  const allowNow = <TModuleKey extends string>(gate: T_GateInput<TModuleKey> | undefined) =>
+    isFeatureAllowedByPriority(toValue(configRefs), gate)
+
+  return { allow, allowNow }
+}

package/src/composables/useFormHider/index.ts

@@ -0,0 +1 @@
+export * from './useFormHider'

package/src/composables/useFormHider/useFormHider.ts

@@ -0,0 +1,37 @@
+import { type ComputedRef, type MaybeRefOrGetter, computed, toValue } from 'vue'
+
+import type { T_FeatureGatingConfig, T_FieldUiRule, T_FormUiConfig } from '@flyanra/js-utils/utils'
+
+export function useFormHider<
+  TConfig extends T_FeatureGatingConfig,
+  TModuleKey extends string,
+  TFormKey extends string,
+  TFieldKey extends string
+>(configsRef: MaybeRefOrGetter<(TConfig | undefined)[]>, moduleKey: TModuleKey, formKey: TFormKey) {
+  const resolved = computed(() => {
+    const configs = toValue(configsRef) ?? []
+    const fieldRules = new Map<TFieldKey, T_FieldUiRule>()
+
+    for (const config of configs) {
+      if (!config) continue
+      const formUi = config?.modules?.[moduleKey]?.ui?.forms?.[formKey] as
+        | T_FormUiConfig<TFieldKey>
+        | undefined
+      if (!formUi?.fields) continue
+
+      for (const [rawKey, rule] of Object.entries(formUi.fields) as [TFieldKey, T_FieldUiRule][]) {
+        const existing = fieldRules.get(rawKey)
+        fieldRules.set(rawKey, {
+          hidden: existing?.hidden === true || rule.hidden === true
+        })
+      }
+    }
+
+    return { fieldRules }
+  })
+
+  const isFieldHidden = (key: TFieldKey): ComputedRef<boolean> =>
+    computed(() => resolved.value.fieldRules.get(key)?.hidden === true)
+
+  return { resolved, isFieldHidden }
+}

package/src/composables/{UseLocaleInjector.ts → useLocaleInjector/UseLocaleInjector.ts}

@@ -1,37 +1,37 @@
-import { isRef } from 'vue'
-import type { MaybeRef } from 'vue'
-
-import { FallbackTranslateFn } from '@flyanra/js-utils/constants'
-import type { Locale } from '@flyanra/js-utils/locales'
-import type { ComposerTranslation } from 'vue-i18n'
-
-export type T_LocaleInjector = {
-  t: ComposerTranslation
-  locale: Locale
-}
-
-type I18nLike = {
-  t: ComposerTranslation
-  locale: MaybeRef<Locale>
-}
-
-let _t: ComposerTranslation = FallbackTranslateFn
-let _locale: MaybeRef<Locale> = 'en'
-let _initialized = false
-
-export function initLocaleInjector(i18n: I18nLike): void {
-  _t = i18n.t
-  _locale = i18n.locale
-  _initialized = true
-}
-
-export function UseLocaleInjector(): T_LocaleInjector {
-  if (!_initialized) {
-    console.warn('[vue-core] UseLocaleInjector: call initLocaleInjector() before use.')
-  }
-
-  return {
-    t: _t,
-    locale: isRef(_locale) ? _locale.value : _locale
-  }
-}
+import { isRef } from 'vue'
+import type { MaybeRef } from 'vue'
+
+import { FallbackTranslateFn } from '@flyanra/js-utils/constants'
+import type { Locale } from '@flyanra/js-utils/locales'
+import type { ComposerTranslation } from 'vue-i18n'
+
+export type T_LocaleInjector = {
+  t: ComposerTranslation
+  locale: Locale
+}
+
+type I18nLike = {
+  t: ComposerTranslation
+  locale: MaybeRef<Locale>
+}
+
+let _t: ComposerTranslation = FallbackTranslateFn
+let _locale: MaybeRef<Locale> = 'en'
+let _initialized = false
+
+export function initLocaleInjector(i18n: I18nLike): void {
+  _t = i18n.t
+  _locale = i18n.locale
+  _initialized = true
+}
+
+export function UseLocaleInjector(): T_LocaleInjector {
+  if (!_initialized) {
+    console.warn('[vue-core] UseLocaleInjector: call initLocaleInjector() before use.')
+  }
+
+  return {
+    t: _t,
+    locale: isRef(_locale) ? _locale.value : _locale
+  }
+}

package/src/composables/useLocaleInjector/index.ts

@@ -0,0 +1,2 @@
+export { initLocaleInjector, UseLocaleInjector } from './UseLocaleInjector'
+export type { T_LocaleInjector } from './UseLocaleInjector'

package/src/composables/useSidebarActiveIndex/index.ts

@@ -0,0 +1 @@
+export { useSidebarActiveIndex } from './useSidebarActiveIndex'