@vyr/design 0.0.1

package/src/components/Popover.vue

@@ -0,0 +1,271 @@
+<template>
+  <vyr-slot v-if="trigger === 'click'" @slot-change="changeTrigger" @click="click" @contextmenu="rightClick">
+    <slot name="trigger"></slot>
+  </vyr-slot>
+  <vyr-slot v-else @slot-change="changeTrigger" @mouseenter="mouseenter" @mouseleave="mouseleave"
+    @mousemove="delayDispatch">
+    <slot name="trigger"></slot>
+  </vyr-slot>
+  <teleport :to="tooltip.wrapper" :disabled="popoverProvider.appendToTooltip === false">
+    <div class="vyr-popover" ref="refPopover" data-vyr-popper-hidden :class="{
+      'card': popoverCard,
+      [popoverClass]: true
+    }" :style="{ width: popoverWidth, zIndex: layerStyle }" @mouseenter="state.needClose = false"
+      @mouseleave="mouseleave" @contextmenu.prevent.stop @transitionend="animationEnd">
+      <div class="popover-arrow" data-popper-arrow :style="`opacity:${arrow ? 1 : 0}`"></div>
+      <div class="popover-wrapper" :class="{ 'flex': popoverProvider.useFlexLayout }">
+        <slot></slot>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import { Instance } from '@popperjs/core';
+import { watch, ref, onBeforeUnmount, computed, useTemplateRef } from 'vue'
+import { popoverCommonDefaultProps } from './composables/useDefaultProps'
+import { usePopoverProvider, useFlotaLayerProvider } from './composables/useProvider'
+import { createPopper, getOptions, isContains, tooltip } from './utils';
+import { PopoverExpose } from './composables/usePopover';
+import VyrSlot from './Slot.vue'
+
+const props = defineProps({
+  ...popoverCommonDefaultProps,
+  popoverCard: { default: true },
+  popoverWidth: { default: 'auto' },
+  modelValue: { default: false },
+  trigger: { default: 'click' as 'click' | 'hover' },
+  disabled: { default: false },
+})
+
+let popper = null as unknown as Instance
+const emit = defineEmits(['update:modelValue', 'show', 'close', 'triggerChange'])
+const refPopover = useTemplateRef('refPopover')
+
+const changeTrigger = (cur: Element, old: HTMLElement) => {
+  if (cur) setup(cur)
+  emit('triggerChange', cur, old)
+}
+const setup = (cur: Element) => {
+  if (popper) popper.destroy()
+  if (!refPopover.value) return
+  popper = createPopper(cur, refPopover.value, getOptions(props))
+}
+const unsetup = () => {
+  unbindTrigger()
+  popper.destroy()
+}
+onBeforeUnmount(unsetup)
+const animationEnd = (event: TransitionEvent) => {
+  if (state.value.visible === true || event.target !== refPopover.value || event.propertyName !== 'opacity') return
+  popper.setOptions(getOptions(props, false))
+}
+
+const hideAttrbute = 'data-vyr-popper-hidden'
+const updatePopoverOnMove = () => popper.update()
+const closePopoverOnClick = (e: MouseEvent | KeyboardEvent) => {
+  if (state.value.visible === false || popoverProvider.value.autoClose === false) return
+  if ((e.target instanceof Node) && isContains(e.target, [refPopover.value, popper.state.elements.reference])) return
+  setVisible(false)
+}
+const closeOfKeydownESC = (e: KeyboardEvent) => {
+  if (e.code !== 'Escape') return
+  closePopoverOnClick(e)
+}
+const unbindTrigger = () => {
+  window.removeEventListener('click', closePopoverOnClick)
+  window.removeEventListener('keyup', closeOfKeydownESC)
+  if (flotaLayerProvider !== null) flotaLayerProvider.listener.unlisten('move', updatePopoverOnMove)
+}
+const bindTrigger = () => {
+  window.addEventListener('click', closePopoverOnClick)
+  window.addEventListener('keyup', closeOfKeydownESC)
+  if (flotaLayerProvider !== null) flotaLayerProvider.listener.listen('move', updatePopoverOnMove)
+}
+const setVisible = (v: boolean) => {
+  if (state.value.visible === v) return
+  emit('update:modelValue', v)
+  state.value.visible = v
+  const options = getOptions(props, v)
+  if (v) {
+    bindTrigger()
+    popper.setOptions(options)
+    refPopover.value?.removeAttribute(hideAttrbute)
+    emit('show')
+  } else {
+    unbindTrigger()
+    refPopover.value?.setAttribute(hideAttrbute, '')
+    emit('close')
+  }
+}
+
+const popoverProvider = usePopoverProvider()
+const flotaLayerProvider = useFlotaLayerProvider()
+const layerStyle = computed(() => {
+  const unit = 999
+  return flotaLayerProvider === null ? unit : (flotaLayerProvider.layer.value ?? 0) + 1
+})
+
+const state = ref({
+  visible: false,
+  needClose: false,
+  delayCount: 0,
+  needOpen: false,
+})
+
+const click = () => {
+  if (props.disabled === true) return
+  if (props.trigger !== 'click') return
+  setVisible(!state.value.visible)
+}
+const show = () => {
+  if (state.value.needClose === true) return
+  setVisible(true)
+}
+const delayShow = () => {
+  state.value.delayCount--
+  if (state.value.delayCount === 0 && state.value.needOpen === true) show()
+}
+const delayDispatch = () => {
+  if (props.disabled === true || props.trigger !== 'hover' || state.value.needOpen === false) return
+  state.value.delayCount++
+  setTimeout(delayShow, 200)
+}
+const mouseenter = () => {
+  if (props.disabled === true || props.trigger !== 'hover') return
+  state.value.needOpen = true
+  delayDispatch()
+}
+const close = () => {
+  if (state.value.needClose === false) return
+  state.value.needClose = false
+  setVisible(false)
+}
+const mouseleave = () => {
+  if (props.disabled === true || props.trigger !== 'hover') return
+  state.value.needOpen = false
+  if (state.value.needClose === true) return
+  state.value.needClose = true
+  setTimeout(close, 300)
+}
+const rightClick = () => {
+  state.value.needOpen = false
+  mouseleave()
+}
+
+watch(() => props.modelValue, setVisible)
+watch(() => [props.placement, props.arrow], () => popper.setOptions(getOptions(props)))
+
+const expose: PopoverExpose = {
+  update: () => popper.update(),
+  position: () => popper.state.placement.split('-'),
+}
+defineExpose(expose)
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@popover-pad: 20px;
+@popover-pad2: @popover-pad * 2;
+@popover-max-width: calc(100% - @popover-pad2);
+@popover-max-height: calc(100% - @popover-pad2);
+
+.vyr-popover-location {
+  .vyr-font-family;
+  display: none;
+}
+
+.vyr-popover {
+  .vyr-font-family;
+  max-width: @popover-max-width;
+  max-height: @popover-max-width;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  box-sizing: border-box;
+  transition: opacity var(--vyr-animation-time);
+
+  .popover-wrapper {
+    background-color: var(--vyr-popover-background-color);
+    position: relative;
+    left: 0;
+    top: 0;
+  }
+
+  .popover-wrapper.flex {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-content: flex-start;
+  }
+
+  .popover-arrow,
+  .popover-arrow::before {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: inherit;
+  }
+
+  .popover-arrow {
+    visibility: hidden;
+  }
+
+  .popover-arrow::before {
+    border: 1px solid var(--vyr-border-color);
+    content: '';
+    visibility: visible;
+    transform: rotate(45deg);
+    background-color: var(--vyr-topic-color);
+  }
+}
+
+.vyr-popover.dialog {
+  z-index: var(--vyr-popover-dialog-z-index);
+}
+
+.vyr-popover.dialog.active {
+  z-index: var(--vyr-popover-dialog-active-z-index);
+}
+
+.vyr-popover.card {
+  background-color: var(--vyr-popover-background-color);
+  border: 1px solid var(--vyr-border-color);
+  box-sizing: border-box;
+
+  .popover-wrapper {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+}
+
+.vyr-popover[data-popper-placement^='top']>.popover-arrow {
+  bottom: -3px;
+}
+
+.vyr-popover[data-popper-placement^='bottom']>.popover-arrow {
+  top: -3px;
+}
+
+.vyr-popover[data-popper-placement^='left']>.popover-arrow {
+  right: -3px;
+}
+
+.vyr-popover[data-popper-placement^='right']>.popover-arrow {
+  left: -3px;
+}
+
+.vyr-popover[data-vyr-popper-hidden],
+.vyr-popover[data-popper-escaped] {
+  opacity: 0;
+  pointer-events: none;
+
+  .popover-arrow {
+    opacity: 0;
+  }
+}
+</style>

package/src/components/Provider.vue

@@ -0,0 +1,12 @@
+<template>
+    <slot></slot>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { providerDefaultProps } from './composables/useDefaultProps';
+import { updateProvider } from './composables/useProvider';
+
+const props = defineProps(providerDefaultProps)
+updateProvider(computed(() => props) as any)
+</script>

package/src/components/RightMenu.vue

@@ -0,0 +1,127 @@
+<template>
+  <teleport to="body">
+    <transition v-if="state.enabled" name="vyr-transition" @before-enter="state.transform = true"
+      @after-enter="state.transform = false">
+      <div class="vyr-right-menu" :class="{ 'transform': state.transform }" :style="wrapperStyle"
+        v-show="setting.visible" @contextmenu.prevent.stop @click.prevent.stop="cancel">
+        <vyr-cascader ref="refCascader" placement="bottom-start" :data="setting.group" :max-count="state.maxCount"
+          :min-count="state.maxCount" :arrow="false" :visible="visible" :popover-width="`${state.width}px`"
+          @change="change" @click.stop @close="setting.visible = false">
+          <template #trigger>
+            <span :style="style" @click.stop></span>
+          </template>
+        </vyr-cascader>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+
+<script lang="ts" setup>
+import { watch, ref, computed, onMounted, onBeforeUnmount, useTemplateRef } from 'vue'
+import { computedFloatLayer, generateFloatLayer, isActiveLayer, RightMenuSetting } from "./utils"
+import { updatePopoverProvider, popoverProviderDefault, FlotaLayerProvider, updateFlotaLayerProvider } from './composables/useProvider';
+import { Listener } from '../tool';
+import { Theme } from '../theme';
+import { Option, RightMenuVue } from './types'
+import VyrCascader from './Cascader.vue';
+
+updatePopoverProvider(ref({ ...popoverProviderDefault.value, appendToTooltip: false, autoClose: true }))
+
+const refCascader = useTemplateRef('refCascader')
+
+const setting = ref(new RightMenuSetting(0, 0, []))
+const style = computed(() => `position:absolute;left:${setting.value.position.x}px;top:${setting.value.position.y}px;`)
+
+const state = ref({
+  id: generateFloatLayer(),
+  width: 240,
+  maxCount: 5,
+  enabled: true,
+  transform: false,
+})
+const getGroupMaxCount = (Options: Option[]) => {
+  let count = 0
+  for (const Option of Options) {
+    if (visible(Option) === true) count++
+  }
+  return count
+}
+const watchVisible = () => {
+  if (setting.value.visible === false || !refCascader.value) return
+  const groupMaxCount = getGroupMaxCount(setting.value.group)
+  const height = Theme.config.inputHeight.value + Theme.config.optionsScrollMargin.value * 2
+  const maxHeight = window.innerHeight * 0.75
+  const count = Math.min(Math.floor(maxHeight / height), 10)
+  state.value.maxCount = groupMaxCount > count ? count : groupMaxCount
+  refCascader.value.show()
+}
+watch(() => setting.value.visible, watchVisible, {})
+
+const active = computed(() => isActiveLayer(state.value.id))
+const layer = computed(() => computedFloatLayer(state.value.id, active.value))
+const flotaLayerProvider: FlotaLayerProvider = { listener: new Listener(), layer }
+updateFlotaLayerProvider(flotaLayerProvider)
+const wrapperStyle = computed(() => {
+  return layer.value === -1 ? '' : `z-index${layer.value};`
+})
+
+const visible = (item: any) => {
+  return item.show
+}
+const change = (item: Option) => {
+  if (state.value.transform === true) return
+  refCascader.value?.close()
+  setting.value.change(item)
+}
+const cancel = () => {
+  if (state.value.transform === true) return
+  refCascader.value?.close()
+  setting.value.cancel()
+}
+
+onMounted(() => window.addEventListener('resize', close))
+onBeforeUnmount(() => window.removeEventListener('resize', close))
+
+const autoClose = () => {
+  close()
+  state.value.enabled = false
+  requestAnimationFrame(() => state.value.enabled = true)
+
+}
+onMounted(() => window.addEventListener('resize', autoClose))
+onBeforeUnmount(() => window.addEventListener('resize', autoClose))
+
+const show = (set: RightMenuSetting) => {
+  setting.value = set
+}
+const close = () => {
+  setting.value.visible = false
+}
+defineExpose<RightMenuVue>({ show, close })
+
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-right-menu {
+  .vyr-font-family;
+  width: 100%;
+  height: 100%;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 99999;
+
+  :deep(.vyr-options) {
+    box-shadow: 0 0 2px var(--vyr-input-border-color);
+  }
+}
+
+.vyr-right-menu.transform {
+  pointer-events: none;
+}
+</style>

package/src/components/Row.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="vyr-row" :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { updateRowProvider, useProvider } from './composables/useProvider'
+import { joinMarginStyle, compileMarginStyle } from './composables/useMarginStyle'
+import { rowCommonDefaultProps } from './composables/useDefaultProps'
+
+const props = defineProps(rowCommonDefaultProps)
+
+const provider = useProvider()
+const curGutter = computed(() => props.gutter === null ? provider.value.row.gutter : props.gutter)
+const rowProvider = ref({ gutter: curGutter, count: 0 })
+updateRowProvider(rowProvider)
+
+const style = computed(() => {
+  const curMargin = props.margin === null ? provider.value.row.margin : props.margin
+  const margin = compileMarginStyle(curMargin)
+  const gutter = rowProvider.value.count === 0 ? 0 : -curGutter.value
+  margin[1] = gutter
+  margin[3] = gutter
+  return joinMarginStyle(margin, 'margin')
+})
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-row {
+  .vyr-font-family;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  box-sizing: border-box;
+
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+</style>

package/src/components/Scroll.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="vyr-scroll" :style="`${marginStyle}`" @wheel.passive="layout" @mousemove="move" @mouseleave="leave">
+    <div class="scroll-wrapper scrollbar" ref="refWrapper">
+      <div class="scroll-body" :style="`${paddingStyle}`" ref="refBody">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="scroll-bar"
+      :style="`display:${state.hide ? 'none' : 'display'};opacity:${opacity};top:${state.top}%;height:${state.height}%;`">
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, Ref, useTemplateRef } from 'vue'
+import { scrollCommonDefaultProps } from './composables/useDefaultProps'
+import { useMarginStyle } from './composables/useMarginStyle'
+import { useScroll } from './composables/useScroll';
+import { observer } from './utils/Scroll';
+import { language } from '../locale'
+
+const props = defineProps(scrollCommonDefaultProps)
+const { marginStyle, paddingStyle } = useMarginStyle(props)
+
+const emit = defineEmits(['resize'])
+const refWrapper = useTemplateRef('refWrapper')
+const refBody = useTemplateRef('refBody')
+const state = ref({
+  hide: true,
+  top: 0,
+  height: 0,
+})
+
+const rect = { wrapper: 0, body: 0, }
+const computeTop = () => {
+  if (refWrapper.value) {
+    state.value.top = (refWrapper.value.scrollTop / rect.body) * 100
+  }
+}
+const computeLayout = () => {
+  rect.wrapper = Math.floor(refWrapper.value?.getBoundingClientRect().height ?? 0)
+  rect.body = refBody.value?.scrollHeight ?? 0
+  state.value.height = (rect.wrapper / rect.body) * 100
+  state.value.hide = rect.body - rect.wrapper > 1 ? false : true
+  computeTop()
+  emit('resize')
+}
+
+const listen = () => {
+  if (!refBody.value || !refWrapper.value) throw language.get('scroll.listen.error')
+  observer.listen(refWrapper.value, computeLayout)
+  observer.listen(refBody.value, computeLayout)
+}
+const unlisten = () => {
+  observer.unlisten(refWrapper.value as Element)
+  observer.unlisten(refBody.value as Element)
+}
+onMounted(listen)
+onBeforeUnmount(unlisten)
+
+const { opacity, layout, move, leave } = useScroll(computeTop, refWrapper as Ref<HTMLElement>)
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-scroll {
+  .vyr-font-family;
+  width: 100%;
+  height: 100%;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  position: relative;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+
+  .scroll-wrapper {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    .scroll-body {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+
+  .scroll-bar {
+    width: 4px;
+    border-radius: var(--vyr-radius-size);
+    background-color: var(--vyr-scroll-bar-color);
+    position: absolute;
+    right: 2px;
+    transition: opacity var(--vyr-animation-time);
+  }
+}
+</style>