@vyr/cli 0.0.12 → 0.0.13

package/output/design/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/output/design/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/output/design/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/output/design/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>