Config Provider 全局配置 ​

<template>
  <div>
    <u-button mb-2 @click="toggle">Switch Language</u-button>
    <br />

    <u-config-provider :locale="locale">
      <u-table mb-1 :data="[]" />
      <u-pagination :total="100" />
    </u-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import zhCn from 'uniboot-ui/es/locale/lang/zh-cn'
import en from 'uniboot-ui/es/locale/lang/en'

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}
</script>

<template>
  <div>
    <div>
      <u-checkbox v-model="config.autoInsertSpace">
        autoInsertSpace
      </u-checkbox>
      <u-checkbox v-model="config.plain"> plain </u-checkbox>
      <u-checkbox v-model="config.round"> round </u-checkbox>
      <u-checkbox v-model="config.dashed"> dashed </u-checkbox>
      <u-checkbox v-model="config.text"> text </u-checkbox>
      <u-select v-model="config.type" class="ml-5" style="max-width: 150px">
        <u-option
          v-for="type in buttonTypes.filter(Boolean)"
          :key="type"
          :value="type"
        />
      </u-select>
    </div>
    <u-divider />
    <u-config-provider :button="config">
      <u-button>中文</u-button>
    </u-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { buttonTypes } from 'uniboot-ui'

import type { ButtonConfigContext } from 'uniboot-ui'

const config = reactive<ButtonConfigContext>({
  autoInsertSpace: true,
  type: 'default',
  plain: true,
  round: true,
  text: false,
  dashed: false,
})
</script>

<template>
  <div>
    <div class="flex gap-4">
      <div class="flex flex-col basis-150px gap-1">
        <span>Type:</span>
        <u-select v-model="config.type">
          <u-option v-for="type in linkTypes" :key="type" :value="type" />
        </u-select>
      </div>
      <div class="flex flex-col basis-150px gap-1">
        <span>Underline:</span>
        <u-select v-model="config.underline">
          <u-option
            v-for="type in underlineOptions"
            :key="type"
            :value="type"
          />
        </u-select>
      </div>
    </div>
    <u-divider />
    <u-config-provider :link="config">
      <u-link>Link desu!</u-link>
    </u-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

import type { LinkConfigContext } from 'uniboot-ui'

const linkTypes = ['primary', 'success', 'warning', 'info', 'danger', 'default']
const underlineOptions = ['always', 'never', 'hover']

const config = reactive<LinkConfigContext>({
  type: 'success',
  underline: 'always',
})
</script>

<script lang="ts" setup>
import { reactive } from 'vue'

import type { CardConfigContext } from 'uniboot-ui'

const config = reactive<CardConfigContext>({
  shadow: 'always',
})
</script>

<template>
  Shadow:
  <div class="flex flex-col justify-center">
    <u-radio-group v-model="config.shadow">
      <u-radio value="always">always</u-radio>
      <u-radio value="hover">hover</u-radio>
      <u-radio value="never">never</u-radio>
    </u-radio-group>
    <u-divider />
    <u-config-provider :card="config">
      <u-card>Card desu!</u-card>
    </u-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref, shallowReactive } from 'vue'

import type { ButtonInstance, DialogTransition } from 'uniboot-ui'

type GlobalConfig = {
  alignCenter: boolean
  draggable: boolean
  overflow: boolean
  transition?: DialogTransition
}

const config = shallowReactive<GlobalConfig>({
  alignCenter: false,
  draggable: false,
  overflow: false,
})
const visible = ref(false)
const enableTransition = ref(false)
const isObjectTransition = ref(false)

const buttonRef = ref<ButtonInstance>()

const ANIMATION_DURATION = 300

const globalConfig = computed<GlobalConfig>(() => {
  let transition: DialogTransition | undefined
  if (enableTransition.value) {
    if (isObjectTransition.value) {
      transition = {
        css: false,
        onBeforeEnter(el) {
          nextTick(() => {
            if (buttonRef.value) {
              const buttonRect = buttonRef.value.ref!.getBoundingClientRect()
              const dialogEl = el.querySelector('.u-dialog') as HTMLElement

              if (dialogEl) {
                const dialogRect = dialogEl.getBoundingClientRect()

                const offsetX =
                  buttonRect.left +
                  buttonRect.width / 2 -
                  (dialogRect.left + dialogRect.width / 2)
                const offsetY =
                  buttonRect.top +
                  buttonRect.height / 2 -
                  (dialogRect.top + dialogRect.height / 2)

                dialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`
                dialogEl.style.opacity = '0'
              }
            }
          })
        },
        onEnter(el, done) {
          nextTick(() => {
            const dialogEl = el.querySelector('.u-dialog') as HTMLElement
            if (dialogEl) {
              // force reflow
              dialogEl.offsetHeight

              dialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`
              dialogEl.style.transform = 'translate(0, 0) scale(1)'
              dialogEl.style.opacity = '1'

              // wait for animation to complete, then cleanup inline styles to avoid affecting drag
              setTimeout(() => {
                dialogEl.style.transition = ''
                dialogEl.style.transform = ''
                dialogEl.style.opacity = ''
                done()
              }, ANIMATION_DURATION)
            } else {
              done()
            }
          })
        },
        onLeave(el, done) {
          const dialogEl = el.querySelector('.u-dialog') as HTMLElement
          if (dialogEl) {
            if (buttonRef.value) {
              const buttonRect = buttonRef.value.ref!.getBoundingClientRect()
              const dialogRect = dialogEl.getBoundingClientRect()

              const currentTransform = dialogEl.style.transform
              let dragOffsetX = 0
              let dragOffsetY = 0

              // avoid draggable effect
              if (currentTransform) {
                const translateMatch = currentTransform.match(
                  /translate\(([^,]+),\s*([^)]+)\)/
                )
                if (translateMatch) {
                  dragOffsetX = Number.parseFloat(translateMatch[1])
                  dragOffsetY = Number.parseFloat(translateMatch[2])
                }
              }

              const offsetX =
                buttonRect.left +
                buttonRect.width / 2 -
                (dialogRect.left + dialogRect.width / 2) +
                dragOffsetX
              const offsetY =
                buttonRect.top +
                buttonRect.height / 2 -
                (dialogRect.top + dialogRect.height / 2) +
                dragOffsetY

              dialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`
              dialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`
              dialogEl.style.opacity = '0'

              // wait for animation to complete, then cleanup inline styles
              setTimeout(() => {
                dialogEl.style.transition = ''
                dialogEl.style.transform = ''
                dialogEl.style.opacity = ''
                done()
              }, ANIMATION_DURATION)
            } else {
              done()
            }
          } else {
            done()
          }
        },
      }
    } else {
      transition = 'dialog-bounce'
    }
  }
  return {
    alignCenter: config.alignCenter,
    draggable: config.draggable,
    overflow: config.overflow,
    transition,
  }
})
</script>

<template>
  <div class="flex flex-col gap-4 justify-center">
    <div class="flex items-center gap-2">
      <u-switch v-model="config.alignCenter" active-text="alignCenter" />
    </div>
    <div class="flex items-center gap-4">
      <u-switch v-model="config.draggable" active-text="draggable" />
      <u-switch
        v-model="config.overflow"
        :disabled="!config.draggable"
        active-text="overflow"
      />
    </div>
    <div class="flex items-center gap-2">
      <u-switch v-model="enableTransition" active-text="enable transition" />
      <u-switch
        v-model="isObjectTransition"
        :disabled="!enableTransition"
        active-text="transition: object"
        inactive-text="transition: string"
      />
    </div>
    <div class="flex items-center gap-2">
      <u-button
        ref="buttonRef"
        type="primary"
        size="small"
        @click="visible = true"
      >
        Open Dialog
      </u-button>
    </div>
    <u-config-provider :dialog="globalConfig">
      <u-dialog v-model="visible" title="Dialog Title" destroy-on-close>
        Dialog Content
      </u-dialog>
    </u-config-provider>
    <div v-if="enableTransition" class="text-xs opacity-70">
      <div v-if="isObjectTransition">
        Using JavaScript controlled animation:
        <code>{{ JSON.stringify(globalConfig.transition) }}</code>
      </div>
      <div v-else>
        Using string transition name:
        <code>{{ globalConfig.transition }}</code>
      </div>
    </div>
  </div>
</template>

<style>
/* Bounce Animation */
.dialog-bounce-enter-active,
.dialog-bounce-leave-active,
.dialog-bounce-enter-active .u-dialog,
.dialog-bounce-leave-active .u-dialog {
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dialog-bounce-enter-from,
.dialog-bounce-leave-to {
  opacity: 0;
}

.dialog-bounce-enter-from .u-dialog,
.dialog-bounce-leave-to .u-dialog {
  transform: scale(0.3) translateY(-50px);
  opacity: 0;
}
</style>

<template>
  <div>
    <u-config-provider :message="config">
      <u-button @click="open">OPEN</u-button>
    </u-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { UMessage } from 'uniboot-ui'

const config = reactive({
  max: 3,
  plain: true,
  placement: 'bottom',
})

const open = () => {
  UMessage('This is a message from bottom.')
}
</script>

<template>
  <u-config-provider :value-on-clear="null" :empty-values="[undefined, null]">
    <div class="flex flex-wrap gap-4 items-center">
      <u-select
        v-model="value1"
        clearable
        placeholder="Select"
        style="width: 240px"
        @change="handleChange"
      >
        <u-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </u-select>
      <u-select-v2
        v-model="value2"
        clearable
        placeholder="Select"
        style="width: 240px"
        :options="options"
        :value-on-clear="() => undefined"
        @change="handleChange"
      />
    </div>
  </u-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { UMessage } from 'uniboot-ui'

const value1 = ref('')
const value2 = ref('')
const options = [
  {
    value: '',
    label: 'All',
  },
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const handleChange = (value) => {
  if ([undefined, null].includes(value)) {
    UMessage.info(`The clear value is: ${value}`)
  }
}
</script>

<template>
  <div>
    <div>
      <u-checkbox v-model="config.showOverflowTooltip">
        showOverflowTooltip
      </u-checkbox>
      <u-select
        v-model="config.tooltipEffect"
        class="ml-5"
        style="max-width: 150px"
      >
        <u-option value="dark" label="dark" />
        <u-option value="light" label="light" />
      </u-select>
    </div>
    <u-divider />
    <u-config-provider :table="config">
      <u-table :data="tableData" style="width: 100%">
        <u-table-column type="selection" width="55" />
        <u-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </u-table-column>
        <u-table-column property="name" label="Name" width="120" />
        <u-table-column
          property="address"
          label="Address (inherited from config-provider)"
          width="300"
        />
        <u-table-column
          property="address"
          label="Address (explicit false)"
          :show-overflow-tooltip="false"
        />
      </u-table>
    </u-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

import type { TableConfigContext } from 'uniboot-ui'

const config = reactive<TableConfigContext>({
  showOverflowTooltip: true,
  tooltipEffect: 'dark',
})

interface User {
  date: string
  name: string
  address: string
}

const tableData: User[] = [
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
    address: '760 A Street, South Frankfield, Illinois',
  },
  {
    date: '2016-05-02',
    name: 'Brandon Deckert',
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
]
</script>

<template>
  <div>
    <div class="flex flex-wrap gap-4">
      <u-checkbox v-model="config.tooltip.showArrow">
        tooltip showArrow
      </u-checkbox>
      <u-checkbox v-model="config.popover.showArrow">
        popover showArrow
      </u-checkbox>
      <u-checkbox v-model="config.dropdown.showArrow">
        dropdown showArrow
      </u-checkbox>
      <u-checkbox v-model="config.select.showArrow">
        select showArrow
      </u-checkbox>
    </div>
    <u-divider />
    <u-config-provider
      :tooltip="config.tooltip"
      :popover="config.popover"
      :dropdown="config.dropdown"
      :select="config.select"
    >
      <div class="flex flex-wrap gap-4 items-center">
        <u-tooltip content="Tooltip content">
          <u-button>Tooltip</u-button>
        </u-tooltip>

        <u-popover content="Popover content" title="Title">
          <template #reference>
            <u-button>Popover</u-button>
          </template>
        </u-popover>

        <u-dropdown>
          <u-button>Dropdown</u-button>
          <template #dropdown>
            <u-dropdown-menu>
              <u-dropdown-item>Action 1</u-dropdown-item>
              <u-dropdown-item>Action 2</u-dropdown-item>
            </u-dropdown-menu>
          </template>
        </u-dropdown>

        <u-select
          v-model="value"
          placeholder="Select"
          style="width: 160px"
          :options="options"
        />
      </div>
    </u-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

import type {
  DropdownConfigContext,
  PopoverConfigContext,
  SelectConfigContext,
  TooltipConfigContext,
} from 'uniboot-ui'

const config = reactive<{
  tooltip: TooltipConfigContext
  popover: PopoverConfigContext
  dropdown: DropdownConfigContext
  select: SelectConfigContext
}>({
  tooltip: { showArrow: false },
  popover: { showArrow: false },
  dropdown: { showArrow: false },
  select: { showArrow: false },
})

const value = ref('')
const options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
]
</script>