bge-ui 1.0.1

package/src/input/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="bge-input">
+    <div class="bge-input__wrapper" :class="{ focus: isFocus, textarea: type === 'textarea', disabled: disabled }">
+      <span class="bge-input__prefix" v-if="prefixSlot">
+        <span class="bge-input__prefix-inner">
+          <slot name="prefix" />
+        </span>
+      </span>
+      <input v-if="type !== 'textarea'" class="bge-input__inner" v-model="input" :maxlength="maxlength"
+        :disabled="disabled" :readonly="readonly" :type="type" :placeholder="placeholder" @focus="handleFocus"
+        @blur="handleBlur" @change="handleChange" @input="handleInput" />
+      <textarea v-else="type !== 'textarea'" :rows="rows" :maxlength="maxlength" class="bge-input__inner" v-model="input"
+        :disabled="disabled" :readonly="readonly" :placeholder="placeholder" @focus="handleFocus" @blur="handleBlur"
+        @change="handleChange" @input="handleInput" />
+      <span class="bge-input__suffix" :class="{ suffix: !!suffixSlot }">
+        <span class="bge-input__suffix-inner">
+          <mono-close class="bge-input__icon clear" v-show="isFocus" @mouseover.prevent="hoverClear(true)"
+            @mouseout.prevent="hoverClear(false)" @click="handelClear" size="20" />
+          <slot v-if="type !== 'textarea'" name="suffix" />
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import MonoClose from "../icons/MonoClose.vue";
+import { ref, defineProps, useSlots, defineEmits, inject, watch } from 'vue'
+const props = defineProps({
+  type: {
+    type: String,
+    value: [
+      'text',
+      'number',
+      'textarea'
+    ],
+    default: 'text'
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  placeholder: String,
+  disabled: Boolean,
+  readonly: Boolean,
+  rows: {
+    default: 2,
+    type: [Number, String]
+  },
+  maxlength: {
+    type: [Number, String]
+  },
+})
+const emit = defineEmits([
+  'blur',
+  'focus',
+  'change',
+  'input',
+  'clear',
+  'update:modelValue'
+])
+const formItemContextKey = 'bge-form-item-context'
+
+const formItemContext: any = inject(formItemContextKey, undefined)
+
+const suffixSlot = useSlots().suffix
+const prefixSlot = useSlots().prefix
+const input = ref<string | number>('')
+const isFocus = ref(false)
+const isClearHover = ref<Boolean>(false)
+function handleFocus() {
+  isFocus.value = true
+  emit('focus')
+}
+
+function handleBlur() {
+  if (!isClearHover.value) {
+    isFocus.value = false
+  }
+  emit('blur')
+  emit('update:modelValue', input.value)
+}
+
+watch(() => props.modelValue, (val) => {
+  input.value = val
+  formItemContext.validate && formItemContext.validate().catch((err: any) => (err))
+})
+
+function handleChange() {
+  emit('change', input.value)
+  emit('update:modelValue', input.value)
+}
+
+function handleInput() {
+  emit('input', input.value)
+  emit('update:modelValue', input.value)
+}
+
+function hoverClear(isHover: Boolean) {
+  isClearHover.value = isHover
+}
+
+function handelClear() {
+  input.value = ''
+  isFocus.value = false
+  emit('clear', input.value)
+  emit('input', input.value)
+  emit('change', input.value)
+  emit('update:modelValue', input.value)
+}
+
+</script>
+<style lang="scss">
+.bge-input {
+  position: relative;
+
+  .bge-input__wrapper {
+    height: 40px;
+    padding: var(--layout-x-0, 0px) var(--layout-x-4, 16px);
+    border-radius: var(--radius-small, 0px);
+    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;
+
+    &: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));
+      }
+    }
+
+    &.focus {
+      border: 1px solid var(--tc-secondary, #798EA3);
+      background: transparent;
+    }
+
+    &.textarea {
+      height: unset;
+      align-items: start;
+      position: reactive;
+      padding: 0;
+
+      .bge-input__inner {
+        padding: 8px 44px 8px 16px;
+      }
+
+      .bge-input__suffix {
+        position: absolute;
+        top: 8px;
+        right: 16px;
+        height: 24px;
+      }
+
+      .bge-input__prefix {
+        display: none;
+      }
+    }
+  }
+
+  .bge-input__inner {
+    color: var(--tc-primary, #E0E0E0);
+    caret-color: var(--tc-theme, #FFFF38);
+    font-size: inherit;
+    line-height: 24px;
+    width: 100%;
+    flex-grow: 1;
+    font-size: inherit;
+    padding: 0;
+    outline: none;
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    resize: none;
+
+    ::placeholder {
+      color: var(--tc-quaternary, #3B4C5C);
+      font-weight: 500;
+    }
+
+
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      font-size: 14px;
+      -webkit-transition-delay: 99999s;
+      -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
+    }
+
+  }
+
+  .bge-input__suffix,
+  .bge-input__prefix {
+    display: inline-flex;
+    white-space: nowrap;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    height: 100%;
+    text-align: center;
+    min-width: 20px;
+    color: var(--el-input-icon-color, var(--el-text-color-placeholder));
+    transition: all var(--el-transition-duration);
+    pointer-events: none;
+
+    &.suffix {
+      .bge-input__icon {
+        margin-right: 8px;
+      }
+    }
+
+    .bge-input__suffix-inner,
+    .bge-input__prefix-inner {
+      pointer-events: all;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--tc-tertiary, #53677A);
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 24px;
+
+      .bge-input__icon {
+        height: inherit;
+        line-height: inherit;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: all var(--el-transition-duration);
+      }
+
+      .clear {
+        color: #53677A;
+        cursor: pointer;
+
+        &:hover {
+          color: #E0E0E0;
+        }
+      }
+    }
+  }
+
+  .bge-input__prefix {
+    .bge-input__prefix-inner {
+      padding-right: 8px;
+    }
+  }
+}
+</style>

package/src/link/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <a v-if="href && !disabled" :class="`bge-link bge-link--${type} ${underline ? 'underline' : ''}`" :target="target"
+    :href="href">
+    <slot></slot>
+  </a>
+  <span v-else
+    :class="`bge-link bge-link--${type} ${disabled ? 'disabled' : ''} ${underline ? 'underline' : ''} no-link`">
+    <slot></slot>
+  </span>
+</template>
+<script setup lang="ts">
+defineOptions({
+  name: 'Link',
+})
+
+import { defineProps } from 'vue'
+
+defineProps({
+  target: {
+    default: '',
+    type: String,
+  },
+  type: {
+    default: 'default',
+    value: ['default', 'violet'],
+    type: String,
+  },
+  href: {
+    default: '',
+    type: String,
+  },
+  underline: {
+    default: false,
+    type: Boolean
+  },
+  disabled: {
+    default: false,
+    type: Boolean
+  }
+})
+</script>
+<style lang="scss" scoped>
+.bge-link {
+  --link-tc-color: var(--tc-tertiary, #53677A);
+  --link-tc-hover: var(--tc-secondary, #798EA3);
+  --link-tc-pressed: var(--tc-secondary, #798EA3);
+  --link-tc-disable: var(--tc-quaternary, #3B4C5C);
+
+  &.bge-link--violet {
+    --link-tc-color: var(--btn-violet, #6670FF);
+    --link-tc-hover: var(--btn-violet-hover, #7575FF);
+    --link-tc-pressed: var(--btn-violet-hover, #7575FF);
+    --link-tc-disable: var(--btn-violet-disable, #3C428F);
+  }
+
+  text-decoration:none;
+
+  &+.bge-link {
+    margin-left: 12px;
+  }
+
+  cursor: pointer;
+  color: var(--link-tc-color);
+
+  &:hover {
+    color: var(--link-tc-hover);
+  }
+
+  &:active {
+    color: var(--link-tc-hover);
+  }
+
+  &.underline {
+    text-decoration-line: underline;
+  }
+
+  &.no-link {
+    cursor: default;
+  }
+
+  &.disabled {
+    color: var(--link-tc-disable, #3B4C5C);
+    cursor: no-drop;
+
+    &:hover {
+      color: var(--link-tc-disable, #3B4C5C);
+    }
+
+    &:active {
+      color: var(--link-tc-disable, #3B4C5C);
+    }
+  }
+
+}
+</style>

package/src/message/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <transition name="fade" @before-leave="onClose" @after-leave="$emit('destroy')">
+    <div v-show="visible" :id="id" ref="messageRef" :class="`bge-message ${type}`" :style="customStyle" role="alert"
+      @mouseenter="clearTimer" @mouseleave="startTimer">
+      <component v-if="icon" :is="icon" class="bge-message__icon" :size="20" />
+      <slot>
+        <p v-html="message"></p>
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import MonoCheckFill from "../icons/MonoCheckFill.vue"
+import MonoExclamationmarkFill from "../icons/MonoExclamationmarkFill.vue"
+
+import { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'
+import { defineEmits, onMounted, ref, computed, CSSProperties, shallowReactive, render } from 'vue'
+
+const visible = ref(false)
+const messageRef = ref<HTMLDivElement>()
+const icon = computed(() => {
+  const map = {
+    success: MonoCheckFill,
+    error: MonoExclamationmarkFill,
+    info: ''
+  }
+  return map[props.type]
+})
+const props: any = defineProps({
+  id: String,
+  type: {
+    type: String,
+    default: 'info',
+    value: [
+      'success',
+      'error',
+      'info',
+    ],
+  },
+  offset: {
+    type: Number,
+    default: 64,
+  },
+  stopTimer: Number,
+  duration: Number,
+  message: {
+    type: [Object, String]
+  },
+  onClose: Function,
+  instances: Array
+})
+
+let stopTimer: (() => void) | undefined = undefined
+
+
+function startTimer() {
+  if (props.duration === 0) return
+    ; ({ stop: stopTimer } = useTimeoutFn(() => {
+      close()
+    }, props.duration))
+}
+
+function close() {
+  visible.value = false
+}
+
+function clearTimer() {
+  stopTimer?.()
+}
+
+const getInstance = (id: string) => {
+  const idx = props.instances.findIndex((instance) => instance.id === id)
+  const current = props.instances[idx]
+  let prev: any | undefined
+  if (idx > 0) {
+    prev = props.instances[idx - 1]
+  }
+  return { current, prev }
+}
+const getLastOffset = (id: string): number => {
+  const { prev } = getInstance(id)
+  if (!prev) return 0
+  return prev.vm.exposed!.bottom.value
+}
+const getOffsetOrSpace = (id: string, offset: number) => {
+  const idx = props.instances.findIndex((instance) => instance.id === id)
+  return idx > 0 ? 12 : offset
+}
+
+const height = ref(0)
+const lastOffset = computed(() => getLastOffset(props.id))
+const offset = computed(
+  () => getOffsetOrSpace(props.id, props.offset) + lastOffset.value
+)
+const bottom = computed((): number => height.value + offset.value)
+
+const customStyle = computed<CSSProperties>(() => {
+  return {
+    top: `${offset.value}px`,
+    zIndex: 3000,
+  }
+})
+onMounted(() => {
+  visible.value = true
+  startTimer()
+})
+const emit = defineEmits([
+  'destroy'
+])
+
+useResizeObserver(messageRef, () => {
+  height.value = messageRef.value!.getBoundingClientRect().height
+})
+
+defineExpose({
+  visible,
+  bottom,
+  close,
+})
+
+</script>
+<style lang="scss" >
+.bge-message {
+  position: fixed;
+  left: 50%;
+  top: 60px;
+  transform: translateX(-50%);
+  display: inline-block;
+  max-width: 320px;
+  transition: opacity 0.3s, transform 0.4s, top 0.4s;
+  padding: var(--layout-x-2, 8px) var(--layout-x-4, 16px);
+  overflow: hidden;
+  color: var(--persistent-white, #FFF);
+  /* shadow1 */
+  box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.08);
+
+  &.info {
+    background: var(--bg-tooltip, #53677A);
+  }
+
+  &.error {
+    background: var(--bg-red, #D14770);
+
+    p {
+      width: calc(100% - 24px)
+    }
+  }
+
+  &.success {
+    background: var(--bg-green, #00A389);
+
+    p {
+      width: calc(100% - 24px)
+    }
+  }
+
+  .bge-message__icon {
+    vertical-align: middle;
+    margin-right: 4px;
+    flex-shrink: 0;
+    display: inline-block;
+  }
+
+  p {
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+    width: 100%;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    color: var(--persistent-white, #FFF);
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+
+  &.fade-enter-active {
+    transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+  }
+
+  &.fade-leave-active {
+    transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
+
+    svg,
+    p {
+      opacity: 0.3;
+    }
+  }
+
+  &.fade-leave-to {
+    opacity: 0;
+    height: 0;
+  }
+
+  &.fade-enter-from {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+}
+</style>

package/src/message/method.ts

@@ -0,0 +1,138 @@
+import { createVNode, render, shallowReactive, isVNode } from 'vue'
+import MessageConstructor from './index.vue'
+import type { AppContext } from 'vue'
+
+const messageTypes = ['success', 'info', 'error'] as const
+
+const messageDefaults = {
+  customClass: '',
+  center: false,
+  dangerouslyUseHTMLString: false,
+  duration: 3000,
+  icon: undefined,
+  id: '',
+  message: '',
+  onClose: undefined,
+  showClose: false,
+  type: 'info',
+  offset: 64,
+  zIndex: 0,
+  grouping: false,
+  repeatNum: 1,
+  appendTo: document.body,
+} as const
+
+let seed = 1
+
+const instances: any[] = shallowReactive([])
+
+const closeMessage = (instance: any) => {
+  const idx = instances.indexOf(instance)
+  if (idx === -1) return
+
+  instances.splice(idx, 1)
+  const { handler } = instance
+  handler.close()
+}
+
+function isFunction(functionToCheck: any) {
+  return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
+}
+
+function createMessage(_options: any = {}, context?: AppContext | null) {
+  const id = `message_${seed++}`
+  const normalized = {
+    ...messageDefaults,
+    ..._options,
+  }
+
+  const { appendTo, ...options } = normalized
+
+  const userOnClose = normalized.onClose
+  const container = document.createElement('div')
+  const props = {
+    ...options,
+    // now the zIndex will be used inside the message.vue component instead of here.
+    // zIndex: nextIndex() + normalized.zIndex
+    id,
+    onClose: () => {
+      userOnClose?.()
+      closeMessage(instance)
+    },
+    instances,
+
+    // clean message element preventing mem leak
+    onDestroy: () => {
+      // since the element is destroy, then the VNode should be collected by GC as well
+      // we do not want cause any mem leak because we have returned vm as a reference to users
+      // so that we manually set it to false.
+      render(null, container)
+    },
+  }
+  const vnode = createVNode(
+    MessageConstructor,
+    props,
+    isFunction(props.message) || isVNode(props.message)
+      ? {
+        default: isFunction(props.message)
+          ? props.message
+          : () => props.message,
+      }
+      : null
+  )
+
+  vnode.appContext = context || message._context
+  render(vnode, container)
+  // instances will remove this item when close function gets called. So we do not need to worry about it.
+  appendTo.appendChild(container.firstElementChild!)
+  const vm = vnode.component!
+
+  const handler: any = {
+    close: () => {
+      vm.exposed!.visible.value = false
+    },
+  }
+
+  const instance: any = {
+    id,
+    vnode,
+    vm,
+    handler,
+    props: (vnode.component as any).props,
+  }
+
+  return instance
+}
+
+const message: any &
+  Partial<any> & { _context: AppContext | null } = (options = {}, context: any) => {
+    if (instances.length >= 10) {
+      return { close: () => undefined }
+    }
+    const normalized: any = typeof options === 'string' ? { message: options } : { ...options }
+    const instance = createMessage(normalized, context)
+
+    instances.push(instance)
+    return instance.handler
+
+  }
+
+messageTypes.forEach((type: any) => {
+  message[type] = (options = {}, appContext: any) => {
+    const normalized: any = typeof options === 'string' ? { message: options } : { ...options }
+    return message({ ...normalized, type }, appContext)
+  }
+})
+
+export function closeAll(type?: any): void {
+  for (const instance of instances) {
+    if (!type || type === instance.props.type) {
+      instance.handler.close()
+    }
+  }
+}
+
+message.closeAll = closeAll
+message._context = null
+
+export default message as any