Merge branch 'main' of git.zcorp.cc:pangu/zentaoatf

ui/src/components/DropdownMenu.vue

@@ -7,8 +7,14 @@
       ref="menuRef"
   >
     <template v-if="state.show">
+      <input type="text" class="keywords"
+             v-if="filter"
+             v-model="keywords"
+             @input="onKeywordsChanged"
+             @click.stop />
+
       <List
-        :items="items"
+          :items="itemsToShow"
           :replaceFields="replaceFields"
           :checkedKey="checkedKey"
           :activeKey="activeKey"
@@ -18,18 +24,32 @@
           :divider="listDivider"
           @click="emit('click', $event)"
       />
-      <slot />
+      <slot/>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { withDefaults, defineProps, ref, reactive, onMounted, onUnmounted, computed, defineEmits } from 'vue';
-import { useWindowSize, onClickOutside } from '@vueuse/core'
+import {computed, defineEmits, defineProps, onMounted, onUnmounted, reactive, ref, withDefaults} from 'vue';
+import {onClickOutside, useWindowSize} from '@vueuse/core'
 import List from './List.vue';
 import {ListItemKey, ListItemProps} from './ListItem.vue';
 
-export type DropdownMenuPosition = 'bottom' | 'left' | 'right' | 'top' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' |{left: number, top: number} | ((toggleElement: HTMLElement) => {left: number, top: number});
+export type DropdownMenuPosition =
+    'bottom'
+    | 'left'
+    | 'right'
+    | 'top'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'top-left'
+    | 'top-right'
+    | 'left-top'
+    | 'left-bottom'
+    | 'right-top'
+    | 'right-bottom'
+    | { left: number, top: number }
+    | ((toggleElement: HTMLElement) => { left: number, top: number });
 
 const props = withDefaults(defineProps<{
   toggle?: object | string,
@@ -50,6 +70,7 @@ const props = withDefaults(defineProps<{
   menuClass?: string,
   limitInWindow?: boolean,
   menuStyle?: object
+  filter?: boolean
 }>(), {hideOnClickAway: true, hideOnClickMenu: true});
 
 const menuRef = ref<HTMLElement>();
@@ -57,6 +78,8 @@ const cleanUpRef = ref();
 const state = reactive({show: !!props.defaultShow, showed: false});
 const showTimerRef = ref<number>(0);
 
+const keywords = ref('')
+
 function _toggle(show?: boolean) {
   if (show === undefined) {
     show = !state.show;
@@ -87,7 +110,17 @@ function _handleClickMenu(event: MouseEvent) {
   }
 }
 
-const emit = defineEmits<{(type: 'click', event: {originalEvent: Event, key: ListItemKey, item: ListItemProps | Record<string, any>}) : void}>();
+const itemsToShow = computed(() => {
+  let arr = props.items?.filter((item) => {
+    return !keywords.value || item.name.indexOf(keywords.value) > -1;
+  })
+  return arr
+})
+const onKeywordsChanged = () => {
+  console.log('onKeywordsChanged')
+}
+
+const emit = defineEmits<{ (type: 'click', event: { originalEvent: Event, key: ListItemKey, item: ListItemProps | Record<string, any> }): void }>();
 
 onClickOutside(menuRef, _event => {
   if (props.hideOnClickAway && state.showed) {
@@ -228,11 +261,25 @@ onUnmounted(() => {
   padding-top: var(--space-sm);
   padding-bottom: var(--space-sm);
 }
+
 .dropdown-menu :deep(.list-item) {
   padding-left: var(--space-lg);
   padding-right: var(--space-lg);
 }
+
 .dropdown-menu :deep(.list-item.has-checkmark) {
   padding-right: var(--space-sm);
 }
+
+.dropdown-menu .keywords {
+  margin: 3px 10px;
+  padding: 0 5px;
+  height: 22px;
+  outline: 0;
+}
+
+.dropdown-menu .keywords input {
+
+}
+
 </style>

ui/src/views/site/SiteNav.vue

@@ -35,6 +35,7 @@
 
   <DropdownMenu
       v-if="products.length > 0"
+      :filter="true"
       toggle="#productMenuToggle"
       class="scrollbar-y scrollbar-hover"
       :items="products"
@@ -43,6 +44,7 @@
       @click="selectProduct"
       :replaceFields="replaceFields"
   />
+
   <SitesModal
     :show="showSitesModal"
     @cancel="sitesModalClose"