chore: add component basic layout & basic props

packages/ui-vue/components/combo-list/src/combo-list.component.tsx

@@ -1,15 +1,42 @@
-import { defineComponent, SetupContext } from 'vue';
+import { defineComponent, ref, SetupContext } from 'vue';
 import { comboListProps, ComboListProps } from './combo-list.props';
 import { ButtonEdit } from '../../button-edit';
+import { ViewType } from './types';
 export default defineComponent({
   name: 'FComboList',
   props: comboListProps,
   emits: [],
   setup(props: ComboListProps, context: SetupContext) {
+    const modelValue = ref(props.modelValue);
     return () => {
       return (
         <>
-          <ButtonEdit id={props.id} />
+          <ButtonEdit v-if={!props.viewType || props.viewType === ViewType.Text} id={props.id} disable={props.disabled} readonly={props.readonly} />
+          {/** Tag展示 */}
+          <div class="f-cmp-inputgroup" v-if={props.viewType === ViewType.Tag}>
+            <div class="input-group">
+              <div class="form-control f-cmp-inputgroup--multi-wrapper multi-more">
+                <div class="multi--content">
+                  <span class="multi--item">
+                    <i class="f-icon multi--close"></i>
+                  </span>
+                </div>
+                <div class="multi--more">
+                  <i class="f-icon multi--more-icon"></i><span class="multi--more-text"></span>
+                </div>
+              </div>
+              <div class="input-group-append">
+                <span class="input-group-text input-group-clear ng-star-inserted" style="display: none;">
+                  <i class="f-icon modal_close"></i>
+                </span>
+                <span class="input-group-text ng-star-inserted">
+                  <span class="f-icon f-icon-arrow-60-down"></span>
+                </span>
+              </div>
+            </div>
+          </div>
+          {/** 下拉面板区域 */}
+          <div v-if={false} class="comboPanel f-area-hide" style="z-index: 99999"></div>
         </>
       );
     };

packages/ui-vue/components/combo-list/src/combo-list.props.ts

@@ -69,7 +69,7 @@ export const comboListProps = {
    * 可选，是否支持多选
    * 默认`false`
    */
-  multiSelect: Type({default: false, type: Boolean}),
+  multiSelect: Type({ default: false, type: Boolean }),
   /**
    * 数据源地址
    */
@@ -78,22 +78,31 @@ export const comboListProps = {
    * 可选，最大高度
    * 默认`200`
    */
-  maxHeight: Type({default: 200, type: Number}),
+  maxHeight: Type({ default: 200, type: Number }),
   /**
    * 可选，是否支持远端过滤
    * 默认`false`
    */
-  remoteSearch: Type({default: false, type: Boolean}),
+  remoteSearch: Type({ default: false, type: Boolean }),
   /**
    * 可选，清空值时隐藏面板
    * 默认`true`
    */
-  hidePanelOnClear: Type({default: true, type: Boolean}),
+  hidePanelOnClear: Type({ default: true, type: Boolean }),
   /**
    * 可选，分隔符
    * 默认`,`
    */
-  separator: Type({default: ',', type: String}),
+  separator: Type({ default: ',', type: String }),
+  /**
+   * 可选，展示文本
+   * 默认为空字符串
+   */
+  displayText: Type({ type: String, default: '' }),
+  /**
+   * 绑定值
+   */
+  modelValue: Type(String)
 
 };
 export type ComboListProps = ExtractPropTypes<typeof comboListProps>;