bge-ui 1.0.1

package/src/button/index.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+defineOptions({
+  name: 'Button',
+})
+
+
+defineProps({
+  size: {
+    default: 'default',
+    value: [
+      'default',
+      'large',
+      'mini',
+    ],
+    type: String,
+  },
+  type: {
+    default: 'primary',
+    value: [
+      'primary',
+      'secondary',
+      'white',
+      'violet'
+    ],
+    type: String,
+  },
+  disabled: {
+    default: false,
+    type: Boolean
+  }
+})
+</script>
+
+<template>
+  <button type="button" :class="`bge-button bge-button--${type} bge-button--${size}`" :disabled="disabled">
+    <slot></slot>
+  </button>
+</template>
+<style lang="scss" scoped>
+.bge-button {
+
+  &+.bge-button {
+    margin-left: 12px;
+  }
+
+  &.bge-button--primary {
+    --color: var(--persistent-black);
+    --btn: var(--btn-primary);
+    --btn-hover: var(--btn-primary-hover);
+    --btn-pressed: var(--btn-primary-pressed);
+    --btn-disable: var(--btn-primary-disable);
+  }
+
+  &.bge-button--secondary {
+    --color: var(--tc-primary);
+    --btn: var(--btn-secondary);
+    --btn-hover: var(--btn-secondary-hover);
+    --btn-pressed: var(--btn-secondary-pressed);
+    --btn-disable: var(--btn-secondary-disable);
+  }
+
+  &.bge-button--white {
+    --color: var(--persistent-black);
+    --btn: var(--btn-white);
+    --btn-hover: var(--btn-white-hover);
+    --btn-pressed: var(--btn-white-pressed);
+    --btn-disable: var(--btn-white-disable);
+  }
+
+  &.bge-button--violet {
+    --color: var(--persistent-white);
+    --btn: var(--btn-violet);
+    --btn-hover: var(--btn-violet-hover);
+    --btn-pressed: var(--btn-violet-hover);
+    --btn-disable: var(--btn-violet-disable);
+  }
+
+  &.bge-button--large {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 28px;
+    padding: 12px 24px;
+  }
+
+  &.bge-button--mini {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 20px;
+    padding: 4px 16px;
+  }
+
+  background: var(--btn);
+  color: var(--color);
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 0;
+  border: none;
+  outline: none;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  user-select: none;
+
+  &:hover {
+    background: var(--btn-hover);
+  }
+
+  &:active {
+    background: var(--btn-pressed);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--btn-disable);
+  }
+}
+</style>

package/src/button/type.ts

@@ -0,0 +1,4 @@
+import { ExtractPropTypes } from "vue";
+import UiButton from "./index.vue";
+
+export type UiButtonProps = ExtractPropTypes<typeof UiButton>;

package/src/dropdown/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="bge-dropdown">
+    <slot></slot>
+    <div class="bge-popper bge-dropdown__popper">
+      <slot name="dropdown"></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+</script>

package/src/form/form-item.vue

@@ -0,0 +1,234 @@
+<template>
+  <div ref="formItemRef" class="bge-form-item">
+    <div class="bge-form-item__label" v-if="isShowLabel">
+      <slot name="label" :label="currentLabel">
+        {{ currentLabel }}
+      </slot>
+    </div>
+
+    <div class="bge-form-item__content" :class="{ error: shouldShowError }">
+      <slot />
+      <transition-group name="form-item-zoom-in-top">
+        <slot v-if="shouldShowError" name="error" :error="validateMessage">
+          <div class="bge-form-item__error">
+            {{ validateMessage }}
+          </div>
+        </slot>
+      </transition-group>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, inject, onMounted, provide, reactive, ref, toRefs, useSlots } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import AsyncValidator from 'async-validator'
+
+const props = defineProps({
+  label: String,
+  formItemClass: String,
+  prop: [String, Array],
+  required: Boolean,
+  rules: [Array, Object]
+})
+
+const labelSlot = useSlots().label
+const isShowLabel = computed(() => {
+  return !!labelSlot || props.label
+})
+let isString: any = (value: any) => typeof value === 'string' || value instanceof String;
+
+const propString: any = computed(() => {
+  if (!props.prop) return ''
+  return isString(props.prop) ? props.prop : (props.prop as Array<any>).join('.')
+})
+
+
+const formContextKey = 'bge-form-context'
+const formContext: any = inject(formContextKey, undefined)
+
+const validateMessage = ref('')
+const validateState = ref<string>('')
+const formItemRef = ref<HTMLDivElement>()
+
+let isResettingField = false
+
+const fieldValue = computed(() => {
+  const model = formContext?.model
+  if (!model || !props.prop) {
+    return
+  }
+  return model[props.prop as string]
+})
+
+const setValidationState = (state: any) => {
+  validateState.value = state
+}
+
+const onValidationFailed = (error: any) => {
+  const { errors, fields } = error
+  if (!errors || !fields) {
+    console.error(error)
+  }
+
+  setValidationState('error')
+  validateMessage.value = errors
+    ? errors?.[0]?.message ?? `${props.prop} is required`
+    : ''
+
+  formContext?.emit('validate', props.prop!, false, validateMessage.value)
+}
+
+const onValidationSucceeded = () => {
+  setValidationState('success')
+  formContext?.emit('validate', props.prop!, true, '')
+}
+
+const doValidate = async (rules: any[]): Promise<true> => {
+  const modelName: string = propString.value
+  const validator = new AsyncValidator({
+    [modelName]: rules,
+  })
+  return validator
+    .validate({ [modelName]: fieldValue.value }, { firstFields: true })
+    .then(() => {
+      onValidationSucceeded()
+      return true as const
+    })
+    .catch((err: any) => {
+      onValidationFailed(err)
+      return Promise.reject(err)
+    })
+}
+
+function isFunction(functionToCheck: any) {
+  return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
+}
+
+function ensureArray(arr: [] | object) {
+  return Array.isArray(arr) ? arr : [arr]
+}
+
+const validateEnabled = computed(() => normalizedRules.value.length > 0)
+
+const normalizedRules = computed(() => {
+
+  const rules: any[] = []
+
+  if (props.rules) {
+    rules.push(...ensureArray(props.rules))
+  }
+
+  const formRules: any = formContext?.rules
+  if (formRules && props.prop) {
+    const _rules = formRules[props.prop as string]
+    if (_rules) {
+      rules.push(...ensureArray(_rules))
+    }
+  }
+  return rules
+})
+
+const getFilteredRule = (trigger: string) => {
+  const rules = normalizedRules.value
+  return (
+    rules
+      .filter((rule) => {
+        if (!rule.trigger || !trigger) return true
+        if (Array.isArray(rule.trigger)) {
+          return rule.trigger.includes(trigger)
+        } else {
+          return rule.trigger === trigger
+        }
+      })
+      // exclude trigger
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      .map(({ trigger, ...rule }): any => rule)
+  )
+}
+
+const validate: any = async (trigger: any, callback: any) => {
+  // skip validation if its resetting
+  if (isResettingField || !props.prop) {
+    return false
+  }
+
+  const hasCallback = isFunction(callback)
+  if (!validateEnabled.value) {
+    callback?.(false)
+    return false
+  }
+
+  const rules = getFilteredRule(trigger)
+  if (rules.length === 0) {
+    callback?.(true)
+    return true
+  }
+
+  setValidationState('validating')
+
+  return doValidate(rules)
+    .then(() => {
+      callback?.(true)
+      return true as const
+    })
+    .catch((err: any) => {
+      const { fields } = err
+      callback?.(false, fields)
+      return hasCallback ? false : Promise.reject(fields)
+    })
+}
+
+const context: any = reactive({
+  ...toRefs(props),
+  $el: formItemRef,
+  validateState,
+  // resetField,
+  // clearValidate,
+  validate,
+})
+
+provide('bge-form-item-context', context)
+
+
+const validateStateDebounced = refDebounced(validateState, 100)
+
+
+const currentLabel = computed(
+  () => `${props.label || ''}`
+)
+
+const shouldShowError = computed(
+  () =>
+    validateStateDebounced.value === 'error'
+)
+
+onMounted(() => {
+  formContext?.addField(context)
+})
+</script>
+<style lang="scss" scoped>
+.bge-form-item {
+  margin-bottom: 24px;
+
+  .bge-form-item__label {
+    color: var(--tc-secondary, #798EA3);
+    padding: var(--layout-x-0, 0);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    margin-bottom: 4px;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .bge-form-item__error {
+    color: var(--tc-red, #FF477E);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    margin-top: 4px;
+  }
+}
+</style>

package/src/form/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <form class="bge-form" :class="{ inline: inline }">
+    <slot name="default" />
+  </form>
+</template>
+<script setup lang="ts">
+import { defineProps, provide, reactive, toRefs } from 'vue'
+defineOptions({
+  name: 'Form',
+})
+const emit = defineEmits(['validate'])
+const props = defineProps({
+  inline: Boolean,
+  formClass: {
+    type: String,
+    default: ''
+  },
+  rules: {
+    type: Object,
+  },
+  model: {
+    type: Object,
+  },
+  disabled: Boolean,
+})
+
+
+async function validate(callback: any) {
+  let validationErrors: any = {}
+  for (const field of fields) {
+    try {
+      await field.validate()
+    } catch (errors) {
+      validationErrors = {
+        ...validationErrors,
+        ...(errors as any),
+      }
+    }
+  }
+  if (Object.keys(validationErrors).length === 0) return callback && callback(true, validationErrors)
+
+  return callback(false, validationErrors)
+}
+function resetFields() {
+  console.log('resetFields')
+}
+
+function clearValidate() {
+  console.log('clearValidate')
+}
+
+function validateField() {
+  console.log('validateField')
+}
+
+const fields: any = []
+function addField(ctx: any) {
+  fields.push(ctx)
+}
+
+
+provide(
+  'bge-form-context',
+  reactive({
+    ...toRefs(props),
+    resetFields,
+    clearValidate,
+    validateField,
+    addField,
+    emit
+  })
+)
+
+defineExpose({
+  /**
+   * @description Validate the whole form. Receives a callback or returns `Promise`.
+   */
+  validate,
+  /**
+   * @description Validate specified fields.
+   */
+  validateField,
+  /**
+   * @description Reset specified fields and remove validation result.
+   */
+  resetFields,
+  /**
+   * @description Clear validation message for specified fields.
+   */
+  clearValidate,
+})
+
+</script>
+<style lang="scss">
+.bge-form {
+
+  &.inline {
+    .bge-form-item__content {
+      width: 220px;
+    }
+
+    .bge-form-item {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-right: 32px;
+    }
+  }
+
+  .bge-form-item__content {
+    &.error {
+      .bge-input__wrapper {
+        border: 1px solid var(--tc-red, #FF477E);
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.bge-form {
+  margin: 0;
+}
+</style>

package/src/icons/CoinHkd.vue

@@ -0,0 +1,80 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px;`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 12C-3.32088e-08 13.5759 0.310389 15.1363 0.913446 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 8.8174 22.7357 5.76516 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0C8.8174 0 5.76516 1.26428 3.51472 3.51472C1.26428 5.76516 0 8.8174 0 12Z"
+      fill="#D93145"
+    />
+    <path
+      d="M3.975 16.225V7.29641H5.94559V10.9119H7.3217V7.29641H9.3033V16.225H7.3217V12.3229H5.94559V16.225H3.975Z"
+      fill="white"
+    />
+    <path
+      d="M10.2828 16.225V7.29641H12.2534V10.945L13.7506 7.29641H15.6772L14.0259 11.3308L15.7542 16.225H13.7506L12.4626 12.2788L12.2534 12.6315V16.225H10.2828Z"
+      fill="white"
+    />
+    <path
+      d="M17.7114 17.4375V16.3463C16.9555 16.3095 16.5367 16.067 16.155 15.6187C15.7807 15.1631 15.5789 14.465 15.5496 13.5244L17.2339 13.2708C17.2413 13.653 17.2743 13.9616 17.333 14.1968C17.3917 14.4319 17.4761 14.601 17.5862 14.7038C17.7036 14.8067 17.8431 14.8582 18.0045 14.8582C18.21 14.8582 18.3421 14.7883 18.4009 14.6487C18.4669 14.5091 18.4999 14.3621 18.4999 14.2078C18.4999 13.8404 18.4119 13.5317 18.2357 13.2819C18.0669 13.0247 17.8321 12.7675 17.5312 12.5103L16.7495 11.8379C16.5293 11.6395 16.3275 11.4374 16.144 11.2316C15.9679 11.0185 15.8248 10.776 15.7147 10.5041C15.6046 10.2248 15.5496 9.89415 15.5496 9.51202C15.5496 8.8139 15.7477 8.26643 16.144 7.8696C16.5477 7.47278 16.9875 7.21877 17.3873 7.1972V6.15002H18.3238V7.18618C18.7495 7.20823 19.0907 7.30743 19.3476 7.4838C19.6045 7.65282 19.7953 7.86593 19.9201 8.12313C20.0522 8.37299 20.1403 8.64121 20.1843 8.92781C20.2357 9.20706 20.265 9.46793 20.2724 9.71044L18.566 9.91987C18.5586 9.65532 18.5403 9.42384 18.5109 9.22543C18.4889 9.02701 18.4376 8.87637 18.3568 8.77349C18.2834 8.66326 18.1623 8.61182 17.9935 8.61916C17.81 8.61916 17.6743 8.69633 17.5862 8.85065C17.4981 9.00497 17.4541 9.15929 17.4541 9.31361C17.4541 9.66634 17.5422 9.95294 17.7183 10.1734C17.9018 10.3865 18.0999 10.5886 18.3128 10.7797L19.0614 11.43C19.3109 11.6578 19.5384 11.9003 19.7439 12.1575C19.9568 12.4147 20.1256 12.7013 20.2503 13.0173C20.3751 13.3333 20.4375 13.6971 20.4375 14.1086C20.4375 14.4981 20.3568 14.8545 20.1953 15.1778C20.0338 15.5012 19.8027 15.7657 19.5017 15.9715C19.2008 16.1699 18.9912 16.2911 18.5729 16.3352V17.4375H17.7114Z"
+      fill="white"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'CoinHkd',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/CoinUsd.vue

@@ -0,0 +1,72 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px;`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 12C-3.32088e-08 13.5759 0.310389 15.1363 0.913446 16.5922C1.5165 18.0481 2.40042 19.371 3.51472 20.4853C4.62902 21.5996 5.95189 22.4835 7.4078 23.0866C8.86371 23.6896 10.4241 24 12 24C13.5759 24 15.1363 23.6896 16.5922 23.0866C18.0481 22.4835 19.371 21.5996 20.4853 20.4853C21.5996 19.371 22.4835 18.0481 23.0866 16.5922C23.6896 15.1363 24 13.5759 24 12C24 8.8174 22.7357 5.76516 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0C8.8174 0 5.76516 1.26428 3.51472 3.51472C1.26428 5.76516 0 8.8174 0 12Z"
+      fill="#4CAF50"
+    />
+    <path
+      d="M13.7942 15.0764C13.7942 13.805 12.7089 13.4632 11.5457 12.9415C9.92673 12.2279 8.19388 11.6162 8.19388 9.0916C8.19388 8.27005 8.45171 5.98529 11.6356 5.57751V3.71252H13.0267V5.6015C15.8448 6.08723 16.2585 8.19809 16.3125 9.6553H13.7942C13.7942 8.15611 13.1106 7.57443 12.2112 7.57443C12.0088 7.56077 11.8058 7.59101 11.6161 7.66306C11.4264 7.73512 11.2545 7.8473 11.1122 7.99193C10.9698 8.13656 10.8604 8.31023 10.7914 8.50105C10.7224 8.69188 10.6953 8.89537 10.7122 9.0976C10.7122 11.7122 16.3125 10.7407 16.3125 15.0584C16.3125 18.0927 13.3685 18.5005 12.8468 18.5545V20.2875H11.4437V18.5605C10.9233 18.5447 10.4114 18.4242 9.93859 18.2061C9.4658 17.988 9.04182 17.6768 8.692 17.2911C8.34218 16.9054 8.0737 16.4531 7.90261 15.9613C7.73151 15.4695 7.66131 14.9483 7.69621 14.4287H10.1966C10.1966 16.6295 11.8634 16.5755 12.1033 16.5755C12.3155 16.6019 12.5308 16.5828 12.735 16.5195C12.9392 16.4562 13.1276 16.35 13.2876 16.2082C13.4475 16.0663 13.5755 15.892 13.6628 15.6969C13.7502 15.5017 13.795 15.2902 13.7942 15.0764Z"
+      fill="#FDFDFD"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'CoinUsd',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>