@vyr/design 0.0.1

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@vyr/design",
+  "version": "0.0.1",
+  "main": "./src/index.ts",
+  "dependencies": {
+    "vue": "3.5.22",
+    "@popperjs/core": "^2.11.8",
+    "@vyr/locale": "0.0.1",
+    "async-validator": "^4.2.5",
+    "tinycolor2": "1.6.0"
+  },
+  "files": [
+    "package.json",
+    "src/"
+  ]
+}

package/src/components/Button.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="vyr-button" :style="style" @click="e => emit('click', e)">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  width: { default: 'auto' }
+})
+const style = computed(() => {
+  let style = ''
+
+  style += props.width === 'auto' ? '' : 'width:100%;text-align:center;'
+
+  return style
+})
+const emit = defineEmits(['click'])
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@button-background-color: rgba(35, 35, 35, 1);
+@button-border-color: rgba(71, 71, 71, 1);
+@button-background-color-hover: rgba(40, 40, 40, 1);
+@button-border-color-hover: rgba(87, 87, 87, 1);
+@button-background-color-active: rgba(47, 47, 47, 1);
+@button-border-color-active: rgba(111, 111, 111, 1);
+
+.vyr-button {
+  .vyr-font-family;
+  cursor: pointer;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  line-height: 1em;
+  padding: 10px 18px;
+  background-color: @button-background-color;
+  display: inline-block;
+  border-radius: var(--vyr-radius-size);
+  border: @button-border-color 1px solid;
+  box-sizing: border-box;
+  user-select: none;
+  letter-spacing: 2px;
+  transition: all 0.2s;
+  margin: 0 20px 0 0;
+
+  &:hover {
+    background-color: @button-background-color-hover;
+    border: @button-border-color-hover 1px solid;
+  }
+
+  &:active {
+    background-color: @button-background-color-active;
+    border: @button-border-color-active 1px solid;
+  }
+}
+
+.vyr-button:last-child {
+  margin-right: 0;
+}
+</style>

package/src/components/Card.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="vyr-card" :style="style">
+    <div class="card-header" :class="{ 'handle': arrow }" @click="changeVisible">
+      <div class="header-title">
+        <slot v-if="$slots.title" name="title"></slot>
+        <div v-else class="title-text">
+          {{ title }}
+        </div>
+      </div>
+      <div class="header-icon" :class="{ 'expand': state.visible }">
+        <slot name="icon">
+          <i v-if="arrow" class="vyrfont vyr-arrow-down-bold"></i>
+        </slot>
+      </div>
+    </div>
+    <div class="card-body" :class="{ scroll }" ref="refBody" :style="state.style">
+      <template v-if="scroll">
+        <vyr-scroll :margin="8" :padding="8">
+          <slot></slot>
+        </vyr-scroll>
+      </template>
+      <template v-else>
+        <div class="body-wrapper" ref="refWrapper">
+          <slot></slot>
+        </div>
+      </template>
+    </div>
+    <div class="card-tool" v-if="$slots.tool">
+      <slot name="tool"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { Theme } from '../theme';
+import VyrScroll from './Scroll.vue'
+
+const props = defineProps({
+  title: { default: '' },
+  arrow: { default: false },
+  scroll: { default: false }
+})
+
+const refBody = useTemplateRef('refBody')
+const refWrapper = useTemplateRef('refWrapper')
+const state = ref({
+  visible: true,
+  style: '',
+  showing: false,
+})
+const showBodyEnd = () => {
+  state.value.showing = false
+  state.value.style = ''
+}
+const showBody = () => {
+  if (!refWrapper.value) return
+  let height = refWrapper.value.clientHeight
+  state.value.style = `height:${height}px;overflow:hidden;`
+  setTimeout(showBodyEnd, Theme.config.animationTime.value)
+}
+const hideBodyEnd = () => {
+  state.value.showing = false
+  state.value.style = 'display:none;'
+}
+const hideBody = () => {
+  if (!refBody.value) return
+  state.value.style = `height:${refBody.value.clientHeight}px;overflow:hidden;`
+  requestAnimationFrame(() => state.value.style = `height:0px;overflow:hidden;`)
+  setTimeout(hideBodyEnd, Theme.config.animationTime.value)
+}
+const watchVisible = () => {
+  state.value.showing = true
+  if (state.value.visible === true) {
+    state.value.style = 'height:0px;overflow:hidden;'
+    requestAnimationFrame(showBody)
+  } else {
+    hideBody()
+  }
+}
+watch(() => state.value.visible, watchVisible)
+
+const style = computed(() => {
+  return props.scroll ? 'height:100%;' : ''
+})
+
+const changeVisible = () => {
+  if (props.arrow === false || state.value.showing === true) return
+  state.value.visible = !state.value.visible
+}
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@card-pad-size: 10px;
+@header-icon-width: 25px;
+
+.vyr-card {
+  .vyr-font-family;
+  width: 100%;
+  font-size: var(--vyr-font-size);
+  color: var(--vyr-font-color);
+  border: 1px solid var(--vyr-border-color);
+  box-sizing: border-box;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+
+  .card-header {
+    width: 100%;
+    box-sizing: border-box;
+    line-height: 1.5em;
+    padding: 0 @card-pad-size;
+    background-color: var(--vyr-topic-color);
+    position: relative;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+
+    .header-title {
+      width: calc(~'100% - @{header-icon-width}');
+      display: flex;
+      align-items: center;
+
+      .title-text {
+        .t_hide;
+        line-height: calc(1em + 24px);
+        margin-right: 4px;
+      }
+    }
+
+    .header-icon {
+      width: @header-icon-width;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      align-content: center;
+
+      .vyrfont {
+        cursor: pointer;
+        font-size: var(--vyr-font-size);
+        display: inline-block;
+        transition: all var(--vyr-animation-time);
+        color: var(--vyr-helper-color);
+      }
+    }
+
+    .header-icon.expand {
+      .vyrfont {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  .card-body {
+    width: 100%;
+    box-sizing: border-box;
+    background-color: var(--vyr-topic-color);
+    border-top: var(--vyr-border-size) solid var(--vyr-border-color);
+    transition: height var(--vyr-animation-time);
+    flex: 1;
+
+    .body-wrapper {
+      min-height: @card-pad-size;
+      box-sizing: border-box;
+      padding: @card-pad-size*0.5 @card-pad-size;
+    }
+  }
+
+  .card-body.scroll {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .card-tool {
+    border-top: var(--vyr-border-size) solid var(--vyr-border-color);
+    padding: @card-pad-size;
+    box-sizing: border-box;
+    display: flex;
+
+    >* {
+      font-size: 18px;
+      margin-right: 16px;
+      cursor: pointer;
+      transition: all var(--vyr-animation-time);
+
+      &:hover {
+        color: var(--vyr-active-topic-color);
+      }
+    }
+  }
+}
+</style>

package/src/components/Cascader.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="vyr-cascader" :style="`width:${curInputWidth};`">
+    <vyr-select ref="refSelector" popover-class="vyr-cascader-popover" :popover-card="false" :placement
+      :model-value="modelValue" :placeholder="placeholder" :data="data" :getter="curGetter" :arrow="arrow"
+      :offset="offset" :readonly="curReadonly" :clearable="curClearable" :readonly-clearable="curReadonlyClearable"
+      :searchable="searchable" :width="`100%`" :popover-width="popoverWidth" @show="selectShow" @close="emit('close')"
+      @clear="emit('update:modelValue', '')">
+      <template #trigger>
+        <slot name="trigger"></slot>
+      </template>
+      <template #default="select">
+        <vyr-options v-for="(items, i) in currentRenderQuaua" :key="i" :data="items" :getter="curGetter"
+          :forced-prompt="select.forcedPrompt" :width="select.width" :max-count :min-count="curMinCount"
+          :checked="checked" :left="state.left" :visible="visible" @click="clickOption"></vyr-options>
+      </template>
+    </vyr-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { commonDefaultProps, selectCommonDefaultProps, popoverCommonDefaultProps, getterCommonDefaultProps, useInputCommonProps, inputCommonDefaultProps } from './composables/useDefaultProps'
+import { usePopoverProvider, updatePopoverProvider, updateCascaderProvider } from './composables/useProvider'
+import { useCommonProps } from './composables/useDefaultProps'
+import { searchDefaultProps } from './composables/useSearch'
+import { useGetter } from './composables/useGetter'
+import { CascaderOption, CascaderOptions, SelectPopoverLayout } from './types'
+import { getInputValue, getSearchOptions, getSelectOptions } from './utils'
+import VyrSelect from './Select.vue'
+import VyrOptions from './Options.vue'
+
+
+const getPopoverLayout = (layout: SelectPopoverLayout) => {
+  state.value.left = layout.position[1] === 'end' ? false : true
+}
+const cascaderProvider = ref({ getInputValue, getPopoverLayout, getSearchOptions, searchOptions: [] as CascaderOptions })
+updateCascaderProvider(cascaderProvider)
+const popoverProvider = usePopoverProvider()
+updatePopoverProvider(ref({ ...popoverProvider.value, useFlexLayout: true }))
+
+const props = defineProps({
+  ...commonDefaultProps,
+  ...popoverCommonDefaultProps,
+  ...searchDefaultProps,
+  ...inputCommonDefaultProps,
+  ...selectCommonDefaultProps,
+  ...getterCommonDefaultProps,
+  popoverWidth: { default: 'auto' },
+  maxCount: { default: 5 },
+  minCount: { default: 1 },
+  data: { default() { return [] as CascaderOptions }, },
+  visible: { default() { return (item: CascaderOption) => { return true as boolean } } },
+})
+const curGetter = useGetter(props)
+const refSelector = useTemplateRef('refSelector')
+const emit = defineEmits(['update:modelValue', 'change', 'show', 'close'])
+const state = ref({
+  renderOption: '' as CascaderOption['value'],
+  checkedOption: '' as CascaderOption['value'],
+  left: true
+})
+
+const { curReadonly, curClearable, curReadonlyClearable } = useCommonProps(props)
+const { curInputWidth } = useInputCommonProps(props)
+const checked = computed(() => {
+  const checked = []
+  const options = getSelectOptions(props.data, state.value.checkedOption, curGetter)
+  for (const item of options) checked.push(curGetter.value(item))
+  return checked
+})
+const traceQuaua = computed(() => {
+  const quaua: CascaderOptions[] = []
+  const options = getSelectOptions(props.data, state.value.renderOption, curGetter)
+
+  for (const item of options) {
+    const children = curGetter.children(item)
+    if (children.length === 0) continue
+    quaua.push(children)
+  }
+  quaua.push(props.data)
+
+  return quaua
+})
+const renderQuaua = computed(() => {
+  const quaua: Array<CascaderOption>[] = [...traceQuaua.value]
+
+  return state.value.left ? quaua.reverse() : quaua
+})
+const currentRenderQuaua = computed(() => cascaderProvider.value.searchOptions.length === 0 ? renderQuaua.value : [cascaderProvider.value.searchOptions])
+const curMinCount = computed(() => {
+  let count = props.minCount
+
+  for (const item of currentRenderQuaua.value) {
+    count = Math.max(item.length, count)
+  }
+
+  return Math.min(count, props.maxCount)
+})
+watch(currentRenderQuaua, () => refSelector.value?.resize())
+
+const selectShow = () => {
+  state.value.renderOption = props.modelValue
+  state.value.checkedOption = props.modelValue
+  emit('show')
+}
+const clickOption = (item: CascaderOption, e: MouseEvent) => {
+  e.stopPropagation()
+
+  const children = curGetter.children(item)
+  const select = children.length === 0 ? true : false
+  select ? selectItem(item, e) : expandItem(item, e)
+}
+const expandItem = (item: CascaderOption, e: MouseEvent) => {
+  const value = curGetter.value(item)
+  state.value.renderOption = value
+  state.value.checkedOption = value
+}
+const selectItem = (item: CascaderOption, e: MouseEvent) => {
+  if (props.readonly) return
+  refSelector.value?.close()
+  const value = curGetter.value(item)
+  if (props.modelValue === value) return
+  emit('update:modelValue', value)
+  emit('change', item, e)
+}
+
+const expose = {
+  show: () => refSelector.value?.show(),
+  close: () => refSelector.value?.close()
+}
+defineExpose(expose)
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-cascader {
+  .vyr-font-family;
+}
+
+@option-pad-left: 4px;
+
+.vyr-cascader-popover {
+  .vyr-options {
+    border-radius: 0;
+
+
+    :deep(.vyr-option) {
+      padding: 0 @option-pad-left 0 var(--vyr-input-l-r-padding);
+    }
+
+    :deep(.vyr-option.justify) {
+      padding: 0 var(--vyr-input-l-r-padding) 0 @option-pad-left;
+    }
+  }
+
+  .vyr-options:not(:first-child) {
+    border-left-color: transparent;
+  }
+
+  .vyr-options:first-child {
+    border-top-left-radius: var(--vyr-radius-size);
+    border-bottom-left-radius: var(--vyr-radius-size);
+  }
+
+  .vyr-options:last-child {
+    border-top-right-radius: var(--vyr-radius-size);
+    border-bottom-right-radius: var(--vyr-radius-size);
+  }
+}
+</style>

package/src/components/Checked.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="vyr-checked" :class="{ disabled: disabled }" @click="change">
+    <div class="checked-box">
+      <i class="vyrfont vyr-checked-no" :class="{ 'active': multiple || checked }"> </i>
+      <template v-if="multiple">
+        <i class="vyrfont vyr-checked-multiple"></i>
+      </template>
+      <template v-else>
+        <i class="vyrfont vyr-checked-all" v-if="checked"> </i>
+      </template>
+    </div>
+    <div class="checked-body" v-if="$slots.default">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { checkedCommonDefaultProps } from './composables/useDefaultProps'
+import { useCheckedGroupProvider, useProvider } from './composables/useProvider'
+
+const props = defineProps({
+  ...checkedCommonDefaultProps,
+  readonly: { default: null as boolean | null },
+  disabled: { default: false },
+  multiple: { default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const provider = useProvider()
+const curReadonly = computed(() => props.readonly === null ? provider.value.readonly : props.readonly)
+
+const checkedGroupProvider = useCheckedGroupProvider()
+const checked = computed(() => checkedGroupProvider === null ? props.modelValue === props.value : checkedGroupProvider.value.checked(props.value))
+
+const change = () => {
+  if (curReadonly.value === true) return
+
+  if (checkedGroupProvider === null) {
+    const value = !props.modelValue
+    emit('update:modelValue', value)
+    emit('change', value)
+    return
+  }
+
+  checkedGroupProvider.value.change(props.value)
+}
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@checked-icon-color: #676767;
+
+.vyr-checked {
+  .vyr-font-family;
+  cursor: pointer;
+  max-width: 100%;
+  color: var(--vyr-font-color);
+  margin: 0 10px 0 0;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  vertical-align: top;
+
+  .checked-box {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    align-content: center;
+    position: relative;
+    left: 0;
+    top: 0;
+
+    .vyrfont {
+      font-size: 22px;
+      color: @checked-icon-color;
+      transition: all var(--vyr-animation-time);
+    }
+
+    .vyrfont:hover,
+    .vyrfont.active,
+    .vyr-checked-all,
+    .vyr-checked-multiple {
+      color: var(--vyr-active-topic-color);
+    }
+
+    .vyr-checked-multiple,
+    .vyr-checked-all {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .checked-body {
+    .t_hide;
+    line-height: var(--vyr-input-height);
+    padding: 0 0 0 10px;
+    box-sizing: border-box;
+  }
+}
+
+.vyr-checked.disabled {
+  cursor: not-allowed;
+
+  .checked-box {
+
+    .vyrfont,
+    .vyrfont:hover {
+      color: #313131 !important;
+    }
+  }
+}
+
+.vyr-checked:last-child {
+  margin-right: 0;
+}
+</style>

package/src/components/CheckedGroup.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="vyr-checked-group">
+        <slot>
+            <vyr-checked v-for="(item, i) in data" :key="i" :value="item.value">{{ item.label }}</vyr-checked>
+        </slot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Options } from './types';
+import { updateCheckedGroupProvider } from './composables/useProvider'
+import { ArrayUtils } from '../tool';
+import VyrChecked from './Checked.vue';
+
+const props = defineProps({
+    modelValue: { default: [] as any[] | any },
+    data: { default() { return [] as Options } },
+    multiple: { default: true }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const change = (value: any) => {
+    let values
+    if (props.multiple) {
+        values = [...props.modelValue]
+        ArrayUtils.auto(values, value)
+    } else {
+        values = value
+    }
+    emit('update:modelValue', values)
+}
+const checked = (value: any) => {
+    if (props.multiple) {
+        return props.modelValue.includes(value)
+    } else {
+        return props.modelValue === value
+    }
+}
+updateCheckedGroupProvider(ref({ change, checked }))
+
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-checked-group {
+    .vyr-font-family;
+}
+</style>

package/src/components/Col.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="vyr-col" :class="[`vyr-col-${span}`, offset > 0 ? `vyr-col-offset-${offset}` : '']" :style="style">
+        <slot></slot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { useRowProvider } from './composables/useProvider';
+
+defineProps({
+    span: { default: 24, validator(value: number) { return value > 0 && value <= 24 } },
+    offset: { default: 0 },
+})
+
+const rowProvider = useRowProvider()
+const style = computed(() => `padding:0 ${rowProvider.value.gutter}px;`)
+
+onMounted(() => rowProvider.value.count++)
+onBeforeUnmount(() => rowProvider.value.count--)
+
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+@col-unit: (1/24) * 100%;
+
+.vyr-col {
+    .vyr-font-family;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    box-sizing: border-box;
+    vertical-align: top;
+}
+
+.vyr-col-loop (@i) when (@i > 1) {
+
+    .vyr-col-@{i} {
+        width: @i * @col-unit;
+    }
+
+    .vyr-col-offset-@{i} {
+        margin: 0 0 0 @i * @col-unit;
+    }
+
+    .vyr-col-loop(@i - 1);
+}
+
+.vyr-col-loop(24);
+</style>