@drax/settings-vue 0.40.0 → 0.42.2

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.40.0",
+  "version": "0.42.2",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,11 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.40.0",
-    "@drax/identity-vue": "^0.40.0",
-    "@drax/settings-front": "^0.40.0",
-    "@drax/settings-share": "^0.40.0"
+    "@drax/common-front": "^0.42.2",
+    "@drax/crud-vue": "^0.42.2",
+    "@drax/identity-vue": "^0.42.2",
+    "@drax/settings-front": "^0.42.2",
+    "@drax/settings-share": "^0.42.2"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -64,5 +65,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "269ec7921d83364dfba091cd74bd3f45a8135c26"
+  "gitHead": "6b4f9f50a8e3f0fbdaff7ec913356834a4e2c0b5"
 }

package/src/components/SettingAvConfig.vue

@@ -0,0 +1,396 @@
+<script setup lang="ts">
+import {useSetting} from "../composables/UseSetting";
+import {onMounted, reactive, ref} from "vue";
+import {useI18n} from "vue-i18n";
+import type {ISetting} from "@drax/settings-share";
+import dayjs from 'dayjs'
+import SettingField from "./SettingField.vue";
+
+const {fetchSettings, settingsGrouped, updateSettingValue} = useSetting()
+const {t} = useI18n()
+
+onMounted(async () => {
+  await fetchSettings()
+  onSearchUpdate('')
+})
+
+
+
+function getTypeColor(type: string): string {
+
+  //'string' | 'longString' | 'number' | 'enum' | 'boolean' | 'password' |'stringList' | 'numberList' | 'enumList' |'ref' |'secret'
+  switch (type) {
+    case 'string': return 'blue';
+    case 'longString': return 'blue';
+    case 'number': return 'purple';
+    case 'enum': return 'orange';
+    case 'boolean': return 'green';
+    case 'password': return 'red';
+    case 'stringList': return 'light-blue';
+    case 'numberList': return 'purple';
+    case 'enumList': return 'orange';
+    case 'ref': return 'pink';
+    case 'secret': return 'error';
+    default: return 'grey';
+  }
+}
+
+
+
+
+
+const settingsGroupedFiltered = ref<Record<string, ISetting[]>>({})
+
+const search = ref<string>('')
+function onSearchUpdate(value: string) {
+  if(!value) settingsGroupedFiltered.value = {...settingsGrouped.value};
+
+  for (const groupKey of Object.keys(settingsGroupedFiltered.value)) {
+    settingsGroupedFiltered.value[groupKey] = settingsGroupedFiltered.value[groupKey].filter((setting: ISetting) =>
+      setting.key.toLowerCase().includes(value.toLowerCase()) ||
+      (setting.description && setting.description.toLowerCase().includes(value.toLowerCase()))
+    )
+
+    if(!settingsGroupedFiltered.value[groupKey]?.length) {
+      delete settingsGroupedFiltered.value[groupKey];
+    }
+  }
+}
+
+const showModal = reactive<{
+  isOpen: boolean, value?: string,
+  setting?: ISetting
+}>({ isOpen: false, value: '', setting: undefined})
+
+const openShowModal = (key: string, value: string | undefined, setting: ISetting) => {
+  showModal.isOpen = true;
+  showModal.value = value;
+  showModal.setting = setting
+}
+
+const closeShowModal = () => {
+  showModal.isOpen = false;
+  showModal.value = '';
+}
+
+const getSettingDescription = (key: string, description?: string) => {
+  return {
+    _id: "123",
+    category: "Description",
+    key: key,
+    label: `${t('setting.descriptionof')} ${key}`,
+    type: "longString",
+    value: description
+  } as ISetting
+}
+
+const informationUpdatingModal = reactive<{
+  isOpen: boolean, setting?: ISetting, readonly: boolean
+}>({isOpen: false, readonly: false})
+
+const openInformationUpdatingModal = (setting: ISetting, readonly: boolean) => {
+  informationUpdatingModal.isOpen = true
+  informationUpdatingModal.setting = setting
+  informationUpdatingModal.readonly = readonly
+}
+
+const closeInformationUpdatingModal = () => {
+  informationUpdatingModal.isOpen = false
+}
+
+const updateLoading = ref<boolean>(false)
+
+const form = ref()
+
+const alert = reactive<{
+  value: boolean, type: 'error' | 'success' | 'warning',
+  text: string
+}>({value: false, type: 'success', text: ''})
+
+const showSuccess = (text: string) => {
+  alert.value = true
+  alert.type = "success"
+  alert.text = text
+}
+
+const updateSetting = async (setting?: ISetting) => {
+  try {
+    if(!setting){
+      console.error('[updateSetting] - setting not provided')
+      return
+    }
+    updateLoading.value = true
+    const validation = await form.value.validate()
+    if(validation && validation.valid === true){
+      const settingUpdated = await updateSettingValue(setting._id, setting.value)
+      setting.updatedBy = settingUpdated.updatedBy
+    }
+    closeInformationUpdatingModal()
+    showSuccess(t('setting.updated.successfuly'))
+  } catch (e) {
+    console.error(e)
+  } finally {
+    updateLoading.value = false
+  }
+}
+
+</script>
+
+<template>
+  <div class="d-flex align-center px-16">
+    <v-avatar style="border-radius: 7px;" color="menuIcon" class="mr-4">
+      <v-icon>mdi-cog</v-icon>
+    </v-avatar>
+    <v-toolbar-title>{{ t('setting.page.title') }}</v-toolbar-title>
+  </div>
+  <v-divider class="my-4"></v-divider>
+  <div class="d-flex justify-space-between px-16">
+    <v-text-field
+      :placeholder="t('setting.search')"
+      persistent-placeholder
+      clearable variant="outlined"
+      prepend-inner-icon="mdi-magnify"
+      v-model="search"
+      @update:model-value="onSearchUpdate"
+    ></v-text-field>
+  </div>
+  <div
+    class="px-16"
+  >
+    <div class="pa-0 ma-0" style="width: calc(100%); height: calc(100vh - 315px); overflow-y: auto; scrollbar-width: thin;">
+      <v-expansion-panels
+        class="pr-1 mb-4" variant="accordion" v-for="groupkey of Object.keys(settingsGroupedFiltered)" :key="groupkey"
+        :model-value="1"
+      >
+        <v-expansion-panel :value="1">
+          <template #title>
+            {{ groupkey }}
+            <v-avatar class="ml-4" color="blue-grey-darken-2" style="border-radius: 4px;" size="24">
+              {{ settingsGroupedFiltered[groupkey]?.length }}
+            </v-avatar>
+          </template>
+          <template #text>
+            <table style="width: 100%;">
+              <thead>
+                <v-row>
+                  <v-col cols="2" class="text-caption">{{t('setting.field.key')}}</v-col>
+                  <v-col cols="1" class="text-caption">{{t('setting.field.value')}}</v-col>
+                  <v-col cols="1" class="text-caption">{{t('setting.field.type')}}</v-col>
+                  <v-col cols="3" class="text-caption">{{t('setting.field.description')}}</v-col>
+                  <v-col cols="1" class="text-caption">{{t('setting.field.visibility')}}</v-col>
+                  <v-col cols="1" class="text-caption">{{t('setting.field.permission')}}</v-col>
+                  <v-col cols="2" class="text-caption">{{t('setting.field.updated')}}</v-col>
+                  <v-col cols="1"></v-col>
+                </v-row>
+              </thead>
+              <tbody>
+                <template :key="setting.key" v-for="setting in settingsGroupedFiltered[groupkey]">
+                  <v-row class="mt-2">
+                    <v-col cols="2" class="pr-4">
+                      <span
+                        style="display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+                      >
+                        {{ setting.key }}
+                      </span>
+                    </v-col>
+                    <v-col cols="1" class="pr-4 d-flex ga-2">
+                      <template v-if="setting.value">
+                        <v-icon size="small" color="grey" style="cursor: pointer;" @click="openShowModal(setting.key, setting.value, setting)">mdi-eye</v-icon>
+                        <span
+                          class="text-caption text-grey"
+                          style="display: inline-block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+                        >
+                          {{ setting.value }}
+                        </span>
+                      </template>
+                      <span v-else class="text-caption text-grey">-</span>
+                    </v-col>
+                    <v-col cols="1" class="pr-4">
+                      <v-chip :color="getTypeColor(setting.type)" density="compact" style="border-radius: 7px">
+                        {{ setting.type }}
+                      </v-chip>
+                    </v-col>
+                    <v-col cols="3" class="pr-4 d-flex ga-2">
+                      <v-icon size="small" color="grey" style="cursor: pointer;" @click="openShowModal(setting.key, setting.description, getSettingDescription(setting.key, setting.description))">mdi-eye</v-icon>
+                      <span
+                          class="text-caption text-grey"
+                          style="display: inline-block; max-width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+                        >
+                          {{ setting.description }}
+                        </span>
+                    </v-col>
+                    <v-col cols="1" class="pr-4">
+                      <v-chip
+                        :color="setting.public ? 'green' : 'red'"
+                        density="compact" style="border-radius: 7px;"
+                      >
+                        <v-icon start>{{ setting.public ? 'mdi-web' : 'mdi-lock' }}</v-icon>
+                        {{ setting.public ? 'Público' : 'Privado' }}
+                      </v-chip>
+                    </v-col>
+                    <v-col cols="1" class="pr-4">
+                      <span class="text-caption" style="display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                        {{ setting.permission ? setting.permission : 'N/A' }}
+                      </span>
+                    </v-col>
+                    <v-col cols="2" class="pr-4">
+                      <span>
+                        {{ dayjs(setting.updatedAt).format('DD/MM/YYYY HH:mm') }}<br>
+                        {{ setting.updatedBy }}
+                      </span>
+                    </v-col>
+                    <v-col cols="1" class="d-flex justify-end">
+                      <v-menu location="bottom right">
+                        <template v-slot:activator="{ props }">
+                          <v-btn icon size="small" variant="text" v-bind="props">
+                            <v-icon>mdi-dots-vertical</v-icon>
+                          </v-btn>
+                        </template>
+                        <v-list>
+                          <v-list-item @click="openInformationUpdatingModal(setting, true)">
+                            <v-icon start>mdi-eye</v-icon>
+                            {{ t('action.view') }}
+                          </v-list-item>
+                          <v-list-item @click="openInformationUpdatingModal(setting, false)">
+                            <v-icon start>mdi-pencil</v-icon>
+                            {{ t('action.edit') }}
+                          </v-list-item>
+                        </v-list>
+                      </v-menu>
+                    </v-col>
+                  </v-row>
+                  <v-divider class="my-2"></v-divider>
+                </template>
+              </tbody>
+            </table>
+          </template>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </div>
+  </div>
+
+  <!-- SHOW MODAL -->
+
+  <v-dialog v-model="showModal.isOpen" width="auto">
+    <v-card width="800">
+      <v-toolbar class="pl-4">
+        <v-icon start>mdi-information</v-icon>
+        <v-card-title>{{ showModal.setting?.category === 'Description' ? t('setting.field.description') : t('setting.field.value') }}</v-card-title>
+        <v-spacer></v-spacer>
+        <v-btn text @click="closeShowModal">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-card-text>
+        <!-- @vue-ignore -->
+        <setting-field
+          :model-value="showModal.value"
+          :setting="showModal.setting"
+          :editing="false"
+        ></setting-field>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
+  <!-- INFORMATION / UPDATING MODAL -->
+
+  <v-dialog v-model="informationUpdatingModal.isOpen" width="auto">
+    <v-card width="1200">
+      <v-toolbar class="px-4">
+        <v-icon start>{{ informationUpdatingModal.readonly ? 'mdi-eye' : 'mdi-pencil' }}</v-icon>
+        <v-card-title>
+          {{ informationUpdatingModal.readonly ? t('action.view') : t('action.edit') }} {{t('setting.configurationValue.title')}}
+        </v-card-title>
+        <v-spacer></v-spacer>
+        <v-icon size="small" @click="closeInformationUpdatingModal">mdi-close</v-icon>
+      </v-toolbar>
+      <v-card-text>
+        {{ t('setting.configurationValue.subtitle') }}
+
+        <v-form ref="form">
+          <v-row class="mt-5">
+            <v-col cols="12" md="8" class="ma-0 pa-0 px-3" v-if="informationUpdatingModal.setting?.category">
+              <v-text-field
+                density="compact"
+                variant="outlined"
+                :label="t('setting.field.category')"
+                readonly :model-value="informationUpdatingModal.setting?.category"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="4" class="ma-0 pa-0 px-3">
+              <v-checkbox
+                :label="t('setting.field.publicinfo')" density="compact"
+                readonly :model-value="informationUpdatingModal.setting?.public"
+              ></v-checkbox>
+            </v-col>
+            <v-col cols="12" md="8" class="ma-0 pa-0 px-3">
+              <v-text-field
+                density="compact"
+                variant="outlined"
+                :label="t('setting.field.key')"
+                readonly :model-value="informationUpdatingModal.setting?.key"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="4" class="ma-0 pa-0 px-3">
+              <v-text-field
+                density="compact"
+                variant="outlined"
+                :label="t('setting.field.type')"
+                readonly :model-value="informationUpdatingModal.setting?.type"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="12" class="ma-0 pa-0 px-3" v-if="informationUpdatingModal.setting?.permission">
+              <v-text-field
+                density="compact"
+                variant="outlined"
+                :label="t('setting.field.permission')"
+                readonly :model-value="informationUpdatingModal.setting?.permission"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6" class="ma-0 pa-0 px-3" v-if="informationUpdatingModal.setting?.prefix">
+              <v-text-field
+                density="compact"
+                variant="outlined"
+                :label="t('setting.field.prefix')"
+                readonly :model-value="informationUpdatingModal.setting?.prefix"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6" class="ma-0 pa-0 px-3" v-if="informationUpdatingModal.setting?.suffix">
+              <v-text-field
+                density="compact"
+                variant="outlined"
+                :label="t('setting.field.suffix')"
+                readonly :model-value="informationUpdatingModal.setting?.suffix"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="12" class="ma-0 pa-0 px-3">
+              <!-- @vue-ignore -->
+              <setting-field
+                variant="outlined"
+                v-model="informationUpdatingModal.setting.value"
+                :setting="informationUpdatingModal.setting"
+                :editing="!informationUpdatingModal.readonly"
+              ></setting-field>
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn variant="text" @click="closeInformationUpdatingModal">{{ t('action.close') }}</v-btn>
+        <v-btn
+          v-if="!informationUpdatingModal.readonly"
+          variant="elevated" color="primary"
+          @click="updateSetting(informationUpdatingModal.setting)"
+          :loading="updateLoading"
+        >
+          {{ t('action.save') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/SettingEditor.vue

@@ -54,7 +54,7 @@ async function updateValue() {
       <v-card-text>
         <v-form v-if="setting" ref="form" autocomplete="off" @submit.prevent>
           <v-row>
-            <v-col cols="10">
+            <v-col cols="12">
               <setting-field
                   v-model="value"
                   :setting="setting"

package/src/components/SettingField.vue

@@ -1,23 +1,21 @@
 <script setup lang="ts">
 
 import type {ISetting} from "@drax/settings-share";
+import {CrudAutocomplete, useEntityStore} from "@drax/crud-vue";
 import {type PropType, ref, computed} from "vue";
 
 
 const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Array], default: false})
 
 
-const {setting, editing} = defineProps({
+const {setting, editing, variant} = defineProps({
   setting: {type: Object as PropType<ISetting>, required: true},
-  editing: {type: Boolean as PropType<boolean>, default: false}
+  editing: {type: Boolean as PropType<boolean>, default: false},
+  variant: {type: String as PropType<'filled' | 'outlined' | 'underlined'>, default: 'filled'},
 })
 
 const visible = ref(false)
 
-const variant = computed(() => {
-  return editing ? 'filled' : 'underlined'
-})
-
 const validateRegex = computed(() => {
   return [(val: any) => {
     if (!setting.regex) return true
@@ -49,6 +47,14 @@ const validateNumberList = computed(() => {
   }]
 })
 
+const entityStore = useEntityStore()
+
+const getEntity = computed(() => {
+  return (entity: string | undefined) => {
+    return entity ? entityStore.getEntity(entity) : undefined
+  }
+})
+
 
 </script>
 
@@ -93,7 +99,7 @@ const validateNumberList = computed(() => {
 
 
   <!--password-->
-  <v-text-field v-if=" setting.type === 'password'"
+  <v-text-field v-if=" setting.type === 'password' || setting.type === 'secret'"
                 :name="setting.key"
                 v-model="valueModel"
                 :label="setting.label"
@@ -224,17 +230,12 @@ const validateNumberList = computed(() => {
   </v-select>
 
   <!--ref-->
-  <!--        <v-select v-if="setting.type === 'ref'"-->
-  <!--                  prepend-icon="list"-->
-  <!--                  :name="setting.key"-->
-  <!--                  setting-text="entityText"-->
-  <!--                  setting-value="entityValue"-->
-  <!--                  :settings="entityOptions"-->
-  <!--                  v-model="valueModel"-->
-  <!--                  :label="setting.label"-->
-  <!--                  :placeholder="setting.label"-->
-  <!--                  color="secondary">-->
-  <!--        </v-select>-->
+<crud-autocomplete
+    v-if="setting.type ==='ref'"
+    v-model="valueModel"
+    :entity="getEntity(setting.entity)"
+    :field="{name: setting.key, type: 'ref', label: setting.label, default:null}"
+></crud-autocomplete>
 
 </template>
 

package/src/components/SettingTableConfig.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import {useSetting} from "../composables/UseSetting";
 import SettingEditor from "./SettingEditor.vue";
-import {onMounted, ref} from "vue";
+import {onMounted, ref, computed} from "vue";
 import {useI18n} from "vue-i18n";
 import type {ISetting} from "@drax/settings-share";
+import {CrudAutocomplete, useEntityStore} from "@drax/crud-vue";
 
 const {fetchSettings, settingsGrouped} = useSetting()
 const {t, te} = useI18n()
 
 onMounted(async () => {
   await fetchSettings()
+  onSearchUpdate('')
 })
 
 const settingEditing = ref()
@@ -21,7 +23,7 @@ function edit(setting: ISetting) {
   editing.value = true
 }
 
-function clearEdit() {
+function clearEdit(newValue: any) {
   editing.value = false
   settingEditing.value = null
 }
@@ -38,11 +40,47 @@ function getObfuscatedValue(value: string): string {
   return '•'.repeat(Math.min(value?.length || 8, 12))
 }
 
+const search = ref<string>('')
+function onSearchUpdate(value: string) {
+  search.value = value
+}
+
+const settingsGroupedFiltered = computed(() => {
+  if (!search.value) {
+    return settingsGrouped.value
+  }
+
+  const filtered: Record<string, ISetting[]> = {}
+  const searchLower = search.value.toLowerCase()
+
+  for (const groupKey of Object.keys(settingsGrouped.value)) {
+    const filteredSettings = settingsGrouped.value[groupKey].filter((setting: ISetting) =>
+      setting.key.toLowerCase().includes(searchLower) ||
+      (setting.description && setting.description.toLowerCase().includes(searchLower))
+    )
+
+    if (filteredSettings.length > 0) {
+      filtered[groupKey] = filteredSettings
+    }
+  }
+
+  return filtered
+})
+
+const entityStore = useEntityStore()
+
+const getEntity = computed(() => {
+  return (entity: string | undefined) => {
+    return entity ? entityStore.getEntity(entity) : undefined
+  }
+})
+
 </script>
 
 <template>
   <div>
-    <h1 class="mb-6 text-h2">{{t('setting.menu')}}</h1>
+    <h3 class="mb-2 text-h3">{{t('setting.menu')}}</h3>
+    <v-divider class="mb-3"></v-divider>
 
     <setting-editor
         v-if="editing"
@@ -52,21 +90,30 @@ function getObfuscatedValue(value: string): string {
     ></setting-editor>
 
     <v-row>
-      <v-col cols="12" v-for="(category,k) in settingsGrouped" class="mt-4">
+      <v-col>
+          <v-text-field
+              :placeholder="t('setting.search')"
+              persistent-placeholder
+              clearable variant="outlined"
+              prepend-inner-icon="mdi-magnify"
+              v-model="search"
+              @update:model-value="onSearchUpdate"
+          ></v-text-field>
+      </v-col>
+
+      <v-col cols="12" v-for="(category,k) in settingsGroupedFiltered">
         <v-card>
           <v-card-title>
-            <h4 class="text-h4 mt-2">{{ k }}</h4>
+            <h4 class="text-h4 mt-2 ">{{ k }}</h4>
           </v-card-title>
           <v-card-text>
 
             <v-data-table
                 hide-default-footer
                 :headers="[
-                { title: t('setting.field.key'), key: 'key', width: '130px', minWidth: '130px' },
-                { title: t('setting.field.label'), key: 'label', width: '130px', minWidth: '130px' },
+                { title: t('setting.field.variable'), key: 'label', width: '220px', minWidth: '220px', maxWidth: '220px' },
                 { title: t('setting.field.value'), key: 'value' },
-                { title: t('setting.field.type'), key: 'type', width: '120px', minWidth: '120px' },
-                { title: t('setting.field.scope'), key:'scope', width: '170px', minWidth: '170px' },
+                { title: t('setting.field.config'), key: 'config', width: '220px', minWidth: '220px', maxWidth: '220px' },
                 { title: t('action.edit'), key: 'actions', width: '70px' },
 
             ]"
@@ -74,18 +121,25 @@ function getObfuscatedValue(value: string): string {
 
             >
 
+
+              <template v-slot:item.label="{ item }">
+                <span class="font-weight-bold">{{item.label }}</span><br>
+                <span class="font-italic">{{ item.description }}</span>
+              </template>
+
               <template v-slot:item.value="{ item }">
-                <v-card variant="tonal" density="compact" class="my-1"><v-card-text>
-                {{ item.prefix }}
-                <template v-if="item.type === 'boolean'">
-                  <v-chip :color="item.value ? 'green' : 'red' " tile>
-                    {{ item.value }}
-                  </v-chip>
-                </template>
-                <template v-else-if="['stringList','numberList','enumList'].includes(item.type)">
-                  <v-chip v-for="(v,i) in item.value" :key="i">{{v}}</v-chip>
-                </template>
-                <template v-else-if="['password','secret'].includes(item.type)">
+                <v-card :variant="['stringList','numberList','enumList','boolean','ref'].includes(item.type) ? 'flat' : 'tonal'" density="compact" class="my-1">
+                  <v-card-text>
+                  {{ item.prefix }}
+                  <template v-if="item.type === 'boolean'">
+                    <v-chip size="large" :color="item.value ? 'green' : 'red' " tile>
+                      {{ item.value }}
+                    </v-chip>
+                  </template>
+                  <template v-else-if="['stringList','numberList','enumList'].includes(item.type)">
+                    <v-chip v-for="(v,i) in item.value" :key="i">{{v}}</v-chip>
+                  </template>
+                  <template v-else-if="['password','secret'].includes(item.type)">
                   <span class="d-inline-flex align-center">
                     <span class="mr-2">
                       {{ isSecretVisible(item.key) ? item.value : getObfuscatedValue(item.value) }}
@@ -97,26 +151,42 @@ function getObfuscatedValue(value: string): string {
                         @click="toggleSecretVisibility(item.key)"
                     ></v-btn>
                   </span>
-                </template>
-                <template v-else>
-                  {{item.value}}
-                </template>
-                {{ item.suffix }}
-                </v-card-text></v-card>
+                  </template>
+                    <template v-else-if="['ref'].includes(item.type)">
+                      <!--ref-->
+                      <crud-autocomplete
+                          readonly
+                          v-model="item.value"
+                          :entity="getEntity(item.entity)"
+                          :field="{name: item.key, type: 'ref', label: item.label, default:null}"
+                          :clearable="false"
+                      ></crud-autocomplete>
+                    </template>
+                  <template v-else>
+                    {{item.value}}
+                  </template>
+                  {{ item.suffix }}
+                </v-card-text>
+                </v-card>
               </template>
 
-              <template v-slot:item.scope="{ item }">
-                <div style="width: 200px;">
-                  <v-chip v-if="item?.permission" density="compact" color="purple">
+              <template v-slot:item.config="{ item }">
+                <div class="py-1">
+                <span class="font-weight-bold">{{item.key }}</span><br>
+                <span class="font-italic">{{ item.type }}</span>
+                <div>
+                  <v-chip tile v-if="item?.permission" density="compact" color="purple" prepend-icon="mdi-key">
                     {{
                       te('permission.' + item?.permission) ? t('permission.' + item?.permission) : item?.permission
                     }}
                   </v-chip>
-                  <v-chip v-else-if="item?.public" color="blue" density="compact">Public</v-chip>
-                  <v-chip v-else color="orange" density="compact">Private</v-chip>
+                  <v-chip tile v-else-if="item?.public" color="blue" density="compact" prepend-icon="mdi-earth">Public</v-chip>
+                  <v-chip tile v-else color="orange" density="compact" prepend-icon="mdi-lock">Private</v-chip>
+                </div>
                 </div>
               </template>
 
+
               <template v-slot:item.actions="{ item }">
                 <v-btn
                     class="mr-1 mt-1"

package/src/index.ts

@@ -1,7 +1,7 @@
 import {useSetting} from "./composables/UseSetting";
 import {useSettingStore} from "./stores/UseSettingStore";
 import SettingCardConfig from "./components/SettingCardConfig.vue";
-import SettingTableConfig from "./components/SettingTableConfig.vue";
+import SettingTableConfig from "./components/SettingAvConfig.vue";
 import SettingLoaded from "./components/SettingLoaded.vue";
 import SettingPage from "./pages/SettingPage.vue";
 import SettingRoutes from "./routes/SettingRoutes";

package/src/pages/SettingAvPage.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import SettingAvConfig from "../components/SettingAvConfig.vue";
+</script>
+
+<template>
+  <v-container fluid>
+    <setting-av-config></setting-av-config>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/SettingPage.vue

@@ -3,10 +3,9 @@ import SettingTableConfig from "../components/SettingTableConfig.vue";
 </script>
 
 <template>
-  <v-container >
+  <v-container fluid>
     <setting-table-config></setting-table-config>
   </v-container>
-
 </template>
 
 <style scoped>

package/src/routes/SettingRoutes.ts

@@ -1,5 +1,6 @@
 import SettingPage from '../pages/SettingPage.vue'
 import SettingCardPage from '../pages/SettingCardPage.vue'
+import SettingAvPage from '../pages/SettingAvPage.vue'
 
 const routes = [
     {
@@ -20,7 +21,15 @@ const routes = [
             permission: 'setting:manage'
         }
     },
-
+    {
+        name: 'SettingAvPage',
+        path: '/settings/av',
+        component: SettingAvPage,
+        meta: {
+            auth: true,
+            permission: 'setting:manage'
+        }
+    },
 ]