bge-ui 1.2.4 → 1.2.6

package/dist/select/index.vue.d.ts

@@ -0,0 +1,37 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    disabled: BooleanConstructor;
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: (StringConstructor | NumberConstructor)[];
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (...args: any[]) => void;
+    change: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+    clear: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: BooleanConstructor;
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: (StringConstructor | NumberConstructor)[];
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    placeholder: string;
+}, {}>, {
+    label?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/option.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    label: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
+}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/style.css

@@ -738,7 +738,8 @@ to {
   vertical-align: middle;
   margin-right: 32px;
 }
-.bge-form .bge-form-item__content.error .bge-input__wrapper {
+.bge-form .bge-form-item__content.error .bge-input__wrapper,
+.bge-form .bge-form-item__content.error .bge-select__wrapper {
   border: 1px solid var(--tc-red, #FF477E);
   background-color: var(--bg-red-08, rgba(255, 82, 133, 0.08));
 }.bge-form {
@@ -1435,7 +1436,7 @@ to {
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: 7px 16px;
+  padding: 15px 2px;
 }
 .bge-slider.mark {
   margin-bottom: 32px;
@@ -1459,7 +1460,7 @@ to {
   height: 14px;
   width: 14px;
   position: absolute;
-  z-index: 100;
+  z-index: 2;
   top: -6px;
   transform: translateX(-50%);
   background-color: transparent;
@@ -1553,4 +1554,83 @@ to {
 }
 .bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-10 .bge-slider__stop:nth-child(-n+11) {
   background: var(--bg-slider-selected, #4F5C71);
+}.bge-select {
+  position: relative;
+  vertical-align: middle;
+  --bg-input: var(--bg-opacity);
+  --bg-input-hover: var(--bg-opacity-hover);
+}
+.bge-select .bge-select__wrapper {
+  height: 40px;
+  padding: var(--layout-x-0, 0px) var(--layout-x-4, 16px);
+  border-radius: var(--radius-small, 4px);
+  border: 1px solid transparent;
+  background: var(--bg-input, rgba(88, 126, 163, 0.08));
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+  align-self: stretch;
+}
+.bge-select .bge-select__wrapper .bge-select__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.bge-select .bge-select__wrapper .arrow-down {
+  font-size: 20px;
+  width: 20px;
+  color: var(--tc-tertiary);
+}
+.bge-select .bge-select__wrapper:hover {
+  border: 1px solid transparent;
+  background: var(--bg-input-hover, rgba(88, 126, 163, 0.12));
+}
+.bge-select .bge-select__wrapper.disabled:hover {
+  border: 1px solid transparent;
+  background: var(--bg-input, rgba(88, 126, 163, 0.08));
+}
+.bge-select .bge-select__wrapper.disabled:hover .arrow-down {
+  font-size: 20px;
+  width: 20px;
+  color: var(--tc-tertiary);
+}
+.bge-select .bge-select__wrapper .placeholder {
+  color: var(--tc-quaternary);
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 500;
+}
+.bge-select .bge-select__wrapper.focus {
+  border: 1px solid var(--tc-theme, #292D33);
+  background: transparent;
+}
+.bge-select .bge-select__wrapper.focus .arrow-down {
+  font-size: 20px;
+  width: 20px;
+  color: var(--tc-title);
+}
+.bge-select .bge-select__wrapper:hover .bge-select__suffix .bge-select__suffix-inner .clear, .bge-select .bge-select__wrapper.focus .bge-select__suffix .bge-select__suffix-inner .clear {
+  display: block;
+}
+.bge-select .bge-popper-wrapper {
+  min-width: 120px;
+  width: 100%;
+}
+.bge-select .bge-popper-wrapper .popper-content {
+  max-width: unset;
+  width: 100%;
+}.bge-option[data-v-8a6e1228] {
+  padding: 8px 24px;
+  color: var(--tc-secondary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+}
+.bge-option[data-v-8a6e1228]:hover {
+  background: var(--bg-opacity);
+  color: var(--tc-title);
+}
+.bge-option.active[data-v-8a6e1228] {
+  color: var(--tc-title);
 }

package/dist/tooltip/index.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { PositioningStrategy, Placement, Modifier } from '@popperjs/core';
+import type { PositioningStrategy, Placement } from '@popperjs/core';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     /**
      * title
@@ -87,13 +87,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<Placement>;
         default: string;
     };
-    /**
-     * Set the modifiers of the popper
-     */
-    modifiers: {
-        type: PropType<Modifier<any, any>[]>;
-        default: () => never[];
-    };
     /**
      * Set the type of animation
      *
@@ -206,13 +199,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<Placement>;
         default: string;
     };
-    /**
-     * Set the modifiers of the popper
-     */
-    modifiers: {
-        type: PropType<Modifier<any, any>[]>;
-        default: () => never[];
-    };
     /**
      * Set the type of animation
      *
@@ -239,7 +225,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     type: string;
     title: string;
     teleported: boolean;
-    modifiers: Modifier<any, any>[];
     animation: string;
     animationDuration: number | unknown[];
     placement: Placement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/form/index.vue

@@ -108,7 +108,8 @@ defineExpose({
 
   .bge-form-item__content {
     &.error {
-      .bge-input__wrapper {
+      .bge-input__wrapper,
+      .bge-select__wrapper  {
         border: 1px solid var(--tc-red, #FF477E);
         background-color: var(--bg-red-08, rgba(#ff5285, 0.08));
       }

package/src/index.ts

@@ -13,7 +13,8 @@ import UiDialog from "./dialog/index.vue"
 import UiCheckbox from "./checkBox/index.vue"
 import UiRadio from "./radio/index.vue"
 import UiSlider from "./slider/index.vue"
-
+import UiSelect from "./select/index.vue"
+import UiOption from "./select/option.vue"
 const components: any = {
   UiButton,
   UiLink,
@@ -26,7 +27,9 @@ const components: any = {
   UiDialog,
   UiCheckbox,
   UiRadio,
-  UiSlider
+  UiSlider,
+  UiSelect,
+  UiOption
 }
 
 export * from './icons/index.ts'
@@ -44,7 +47,9 @@ export {
   UiMessage,
   UiCheckbox,
   UiRadio,
-  UiSlider
+  UiSlider,
+  UiSelect,
+  UiOption
 }
 
 export default {

package/src/input/index.vue

@@ -81,8 +81,6 @@ function handleBlur() {
 watch(() => props.modelValue, (val) => {
   input.value = val
   formItemContext && formItemContext.validate && formItemContext.validate().catch((err: any) => (err))
-}, {
-  immediate: true
 })
 
 function handleChange() {

package/src/select/index.vue

@@ -1,3 +1,183 @@
 <template>
-  <div></div>
-</template>
+  <div
+    ref="selectRef"
+    class="bge-select"
+    @click="isFocus = !isFocus"
+  >
+    <ui-tooltip
+      ref="tooltipRef"
+      placement="bottom"
+      class="bge-select-popper-wrapper"
+      :teleported="false"
+      :show-arrow="false"
+      type="dropdown"
+      :hover="false"
+    >
+      <div class="bge-select__wrapper" :class="{ focus: isFocus, disabled: disabled }">
+        <div class="bge-select__inner">
+          <div class="bge-select__current">
+            <slot v-if="labelSlot" name="label">
+            </slot>
+            <template v-else-if="!!modelValue">
+              {{ optionsMap[modelValue] }}
+            </template>
+            <span class="placeholder" v-else>{{ placeholder }}</span>
+          </div>
+          <MonoArrowDown class="arrow-down" />
+        </div>
+      </div>
+      <template #content>
+        <slot name="default"></slot>
+      </template>
+    </ui-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useSlots, ref, provide, reactive, computed, toRef, inject } from 'vue'
+import UiTooltip from '../tooltip/index.vue'
+import MonoArrowDown from '../icons/MonoArrowDown.vue'
+const isFocus = ref(false)
+const tooltipRef = ref()
+const labelSlot = useSlots().label
+const props = defineProps({
+  disabled: Boolean,
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  modelValue: [String, Number]
+})
+
+const formItemContextKey = 'bge-form-item-context'
+
+const formItemContext: any = inject(formItemContextKey, undefined)
+
+function changeValue(value: string|number) {
+  emits('change', value)
+  emits('input', value)
+  emits('update:modelValue', value)
+  formItemContext && formItemContext.validate && formItemContext.validate().catch((err: any) => (err))
+  tooltipRef.value.toggleTooltip()
+}
+
+const options = ref<any>([])
+const optionsMap: any = computed(() => {
+  const result: any = {}
+  options.value.forEach((v: any) => {
+    result[v.value] = v.label
+  })
+  return result
+})
+function addOption(option: any) {
+  options.value.push(option)
+}
+
+
+const context: any = reactive({
+  changeValue,
+  addOption,
+  modelValue: toRef(props, 'modelValue')
+})
+
+provide('bge-select-context', context)
+
+const emits = defineEmits([
+  'update:modelValue',
+  'change',
+  'input',
+  'clear',
+])
+</script>
+<style lang="scss">
+.bge-select {
+  position: relative;
+  vertical-align: middle;
+
+  --bg-input: var(--bg-opacity);
+  --bg-input-hover: var(--bg-opacity-hover);
+
+  .bge-select__wrapper {
+    height: 40px;
+    padding: var(--layout-x-0, 0px) var(--layout-x-4, 16px);
+    border-radius: var(--radius-small, 4px);
+    border: 1px solid transparent;
+    background: var(--bg-input, rgba(88, 126, 163, 0.08));
+    display: flex;
+    font-size: 14px;
+    align-items: center;
+    align-self: stretch;
+
+    .bge-select__inner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .arrow-down {
+      font-size: 20px;
+      width: 20px;
+      color: var(--tc-tertiary);
+    }
+
+    &:hover {
+      border: 1px solid transparent;
+      background: var(--bg-input-hover, rgba(88, 126, 163, 0.12));
+    }
+
+    &.disabled {
+      &:hover {
+        border: 1px solid transparent;
+        background: var(--bg-input, rgba(88, 126, 163, 0.08));
+
+
+        .arrow-down {
+          font-size: 20px;
+          width: 20px;
+          color: var(--tc-tertiary);
+        }
+      }
+    }
+
+    .placeholder {
+      color: var(--tc-quaternary);
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    &.focus {
+      border: 1px solid var(--tc-theme, #292D33);
+      background: transparent;
+
+
+      .arrow-down {
+        font-size: 20px;
+        width: 20px;
+        color: var(--tc-title);
+      }
+    }
+
+    &:hover, 
+    &.focus {
+      .bge-select__suffix {
+        .bge-select__suffix-inner{
+          .clear {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+  .bge-popper-wrapper {
+    min-width: 120px;
+    width: 100%;
+    .popper-content {
+      max-width: unset;
+      width: 100%;
+    }
+  }
+}
+</style>

package/src/select/option.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="bge-option" :class="{active: value === context.modelValue}" @click="context.changeValue(value)">
+    <slot v-if="defaultSlot" name="default"></slot>
+    <template v-else>{{ props.label }}</template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useSlots, inject, onMounted } from 'vue'
+const defaultSlot = useSlots().default
+
+const props = defineProps({
+  label: String,
+  value: [Number, String]
+}) 
+
+const context: any = inject('bge-select-context', undefined)
+
+onMounted(() => {
+  context.addOption({
+    ...props
+  })
+})
+</script>
+<style lang="scss" scoped>
+  .bge-option {
+    padding: 8px 24px;
+    color: var(--tc-secondary);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    &:hover {
+      background: var(--bg-opacity);
+      color: var(--tc-title);
+    }
+
+    &.active {
+      color: var(--tc-title);
+    }
+  }
+</style>

package/src/slider/index.vue

@@ -171,7 +171,7 @@ watch(() => props.modelValue, (val: number) => {
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: 7px 16px;
+  padding: 15px 2px;
 
   &.mark {
     margin-bottom: 32px;
@@ -197,7 +197,7 @@ watch(() => props.modelValue, (val: number) => {
       height: 14px;
       width: 14px;
       position: absolute;
-      z-index: 100;
+      z-index: 2;
       top: -6px;
       transform: translateX(-50%);
       background-color: transparent;

package/src/tooltip/index.vue

@@ -26,7 +26,7 @@
 import { OnlyChild as UiOnlyChild } from './only-child'
 import type { PropType } from 'vue'
 import { computed, ref, onMounted, onBeforeMount, nextTick } from 'vue';
-import type { PositioningStrategy, Placement, Modifier } from '@popperjs/core'
+import type { PositioningStrategy, Placement } from '@popperjs/core'
 import UiDialog from '../dialog/index.vue'
 import UiButton from '../button/index.vue'
 import { usePopper } from './usePopper'
@@ -142,16 +142,6 @@ const props = defineProps({
     default: 'top',
   },
 
-  /**
-   * Set the modifiers of the popper
-   */
-  modifiers: {
-    type: Array as PropType<Modifier<any, any>[]>,
-    default: () => {
-      return [];
-    },
-  },
-
   /**
    * Set the type of animation
    *
@@ -222,7 +212,6 @@ function initTooltip() {
     closeDelay: props.closeDelay,
     showArrow: props.showArrow,
     strategy: props.strategy,
-    modifiers: props.modifiers,
     animation: props.animation,
     placement: props.placement,
     interactive: props.interactive,

package/src/tooltip/usePopper.ts

@@ -170,9 +170,10 @@ const usePopper = function (triggerReference, suppliedOptions: Options = {}) {
    */
   const getPopperOptions = computed(() => {
     let { modifiers } = popperDefaultOptions;
-    if (options.modifiers) {
-      modifiers = [...modifiers, ...options.modifiers];
-    }
+      if (options.showArrow === false) {
+        modifiers[0].options.offset = [0, 8]
+      }
+      modifiers = [...modifiers]
 
     return {
       ...popperDefaultOptions,