@vyr/design 0.0.1

package/src/components/Notify.vue

@@ -0,0 +1,130 @@
+<template>
+  <teleport to="body">
+    <transition name="vyr-notify-transform" @after-leave="setting.close">
+      <div class="vyr-notify" :class="`${setting.type}`" :style="`top:${20 + NotifySetting.offset + index * 50}px;`"
+        v-if="setting.visible">
+        <div class="notify-icon"><i class="vyrfont" :class="`vyr-${setting.icon}`"></i></div>
+        <div class="notify-body">{{ setting.message }}</div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { NotifyVue } from './types'
+import { NotifySetting } from './utils'
+import { ArrayUtils } from '../tool'
+import { Theme } from '../theme'
+
+const setting = ref(new NotifySetting(''))
+
+const index = computed(() => {
+  const i = NotifySetting.collection.value.indexOf(setting.value)
+  return i === -1 ? 0 : i
+})
+
+const remove = () => {
+  ArrayUtils.remove(NotifySetting.collection.value, setting.value)
+}
+const close = () => {
+  setTimeout(remove, Theme.config.animationTime.value)
+  setting.value.visible = false
+}
+const show = (set: NotifySetting) => {
+  NotifySetting.collection.value.push(set)
+
+  setting.value = set
+  setting.value.visible = true
+
+  if (set.duration === Infinity) return
+  setTimeout(close, set.duration)
+}
+
+defineExpose<NotifyVue>({ show })
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-notify {
+  .vyr-font-family;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  margin: 4px 0;
+  padding: 8px 16px;
+  border-radius: 2px;
+  z-index: var(--vyr-notify-z-index);
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: center;
+  min-width: 240px;
+  max-width: 360px;
+  line-height: 1.5em;
+  background-color: var(--vyr-topic-color);
+  box-shadow: 0 0 2px var(--vyr-white-color);
+  transition: all var(--vyr-animation-time);
+
+  .notify-icon {
+    height: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+  }
+
+  .notify-body {
+    margin: 0 0 0 8px;
+  }
+}
+
+.vyr-notify.warning {
+  box-shadow: 0 0 2px var(--vyr-warning-color);
+
+  .notify-icon {
+    color: var(--vyr-warning-color);
+  }
+}
+
+.vyr-notify.success {
+  box-shadow: 0 0 2px var(--vyr-success-color);
+
+  .notify-icon {
+    color: var(--vyr-success-color);
+  }
+}
+
+.vyr-notify.danger {
+  box-shadow: 0 0 2px var(--vyr-danger-color);
+
+  .notify-icon {
+    color: var(--vyr-danger-color);
+  }
+}
+
+.vyr-notify-transform-enter-active {
+  animation: vyr-notify-transform var(--vyr-animation-time);
+}
+
+.vyr-notify-transform-leave-active {
+  animation: vyr-notify-transform var(--vyr-animation-time) reverse;
+}
+
+@keyframes vyr-notify-transform {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 20px;
+  }
+}
+</style>

package/src/components/Option.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="vyr-option"
+    :class="{ 'active': checked, 'expand': expand, 'justify': left === false, 'warning': warning, 'disabled': disabled }"
+    @click="e => trigger('click', e)" @mousedown="e => trigger('mousedown', e)" @mouseup="e => trigger('mouseup', e)"
+    @mouseenter="e => trigger('mouseenter', e)" @mouseleave="e => trigger('mouseleave', e)"
+    @contextmenu="e => trigger('rightClick', e)">
+    <slot v-if="left">
+      <div class="option-label">
+        <slot name="label">{{ label }}</slot>
+      </div>
+    </slot>
+    <div class="option-arrow">
+      <slot name="icon">
+        <i v-if="arrow" class="vyrfont vyr-right-arrow"></i>
+      </slot>
+    </div>
+    <slot v-if="left === false">
+      <div class="option-label">
+        <slot name="label">{{ label }}</slot>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Option } from './types';
+
+const props = defineProps({
+  label: {
+    default: '' as Option['label']
+  },
+  value: {
+    default: '' as Option['value']
+  },
+  left: {
+    default: true
+  },
+  arrow: {
+    default: false
+  },
+  checked: {
+    default: false
+  },
+  expand: {
+    default: false
+  },
+  disabled: {
+    default: false
+  },
+  warning: {
+    default: false
+  }
+})
+
+const emit = defineEmits(['click', 'mousedown', 'mouseup', 'rightClick', 'mouseenter', 'mouseleave'])
+
+const trigger = (type: Parameters<typeof emit>[0], e: MouseEvent) => {
+  if (props.disabled === false) return emit(type, e)
+  e.stopPropagation()
+  e.preventDefault()
+}
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-option {
+  .vyr-font-family;
+  cursor: pointer;
+  color: var(--vyr-font-color);
+  background-color: var(--vyr-option-background-color);
+  font-size: var(--vyr-font-size);
+  width: 100%;
+  height: var(--vyr-input-height);
+  padding: 0 4px 0 var(--vyr-input-l-r-padding);
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+  transition: background-color var(--vyr-animation-time);
+
+  &:hover {
+    background-color: var(--vyr-active-topic-color);
+  }
+
+  .option-label {
+    .t_hide;
+    width: 100%;
+    padding: 0 0 0 5px;
+    box-sizing: border-box;
+  }
+
+  .option-arrow {
+    width: auto;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+
+    .vyrfont {
+      font-size: var(--vyr-font-size);
+    }
+  }
+}
+
+.vyr-option.justify {
+  text-align: right;
+  justify-content: end;
+
+  .vyr-right-arrow {
+    rotate: 180deg;
+  }
+}
+
+.vyr-option:hover {
+  background-color: var(--vyr-option-hover-background-color);
+}
+
+.vyr-option.expand {
+  background-color: var(--vyr-option-background-color-expand);
+}
+
+.vyr-option.active,
+.vyr-option.active:hover {
+  background-color: var(--vyr-active-topic-color);
+}
+
+.vyr-option.warning,
+.vyr-option.warning:hover {
+  background-color: rgba(var(--vyr-warning-color), 0.8);
+}
+
+.vyr-option.disabled,
+.vyr-option.disabled:hover {
+  background-color: inherit;
+  color: var(--vyr-option-disabled-background-color);
+  cursor: default;
+}
+
+.vyr-option.active.disabled,
+.vyr-option.active.disabled:hover {
+  color: var(--vyr-font-color);
+  background-color: var(--vyr-active-topic-color);
+  opacity: 0.5;
+}
+
+.vyr-drag-mouse {
+  .vyr-option {
+    cursor: move;
+  }
+}
+</style>

package/src/components/Options.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="vyr-options" :style="style">
+    <vyr-scroll :margin="Theme.config.optionsScrollMargin.value">
+      <template v-if="(options.length === 0 || forcedPrompt) && addable === false">
+        <vyr-option :label="`${language.get(forcedPrompt ? 'options.tips.notFound' : 'options.tips.notData')}`" value=""
+          :disabled="true"></vyr-option>
+      </template>
+      <template v-else>
+        <template v-for="(item, oi) in options" :key="oi">
+          <slot name="default" :option="item" :index="oi" :left="left" :emit="emit">
+            <vyr-option v-if="oi === state.currentEditIndex" class="custom-option">
+              <vyr-input v-model="state.currentEditValue" :autofocus="true"></vyr-input>
+              <template #icon>
+                <div class="custom-wrapper" @click.stop>
+                  <i class="vyrfont vyr-queren" @click="finishEdit"></i>
+                  <i class="vyrfont vyr-quxiao" @click="stopEdit"></i>
+                </div>
+              </template>
+            </vyr-option>
+            <vyr-option v-else :label="getter.label(item)" :value="getter.value(item)" :left="left" :arrow="arrow(item)"
+              :checked="checked.includes(getter.value(item))" :expand="expand.includes(getter.value(item))"
+              :disabled="getter.disabled(item)" @click="e => emit('click', item, e)"
+              @mouseenter="emit('mouseenter', item)" @mouseleave="emit('mouseleave', item)">
+              <template v-if="editable || removable" #icon>
+                <div class="custom-wrapper" @click.stop>
+                  <i v-if="editable" class="vyrfont vyr-bianji" @click="startEdit(oi, item)"></i>
+                  <i v-if="removable" class="vyrfont vyr-remove" @click="emit('remove', oi)"></i>
+                </div>
+              </template>
+            </vyr-option>
+          </slot>
+        </template>
+        <vyr-option v-if="addable" :value="-1" :left="left">
+          <div class="custom-add" @click.stop="emit('add')">
+            <i class="vyrfont vyr-add"></i>
+          </div>
+        </vyr-option>
+      </template>
+    </vyr-scroll>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import { computed, ref } from 'vue'
+import { Option, Options } from './types'
+import { Theme } from '../theme';
+import { language } from '../locale'
+import { defaultGetter } from './composables/useGetter'
+import VyrScroll from './Scroll.vue'
+import VyrOption from './Option.vue'
+import VyrInput from './Input.vue'
+
+const props = defineProps({
+  width: { default: '' },
+  left: { default: true },
+  arrow: { default: true },
+  maxCount: { default: 5 },
+  minCount: { default: 0 },
+  data: { default(): Options { return [] } },
+  getter: { default() { return defaultGetter } },
+  checked: { default() { return [] as any[] } },
+  expand: { default() { return [] as any[] } },
+  visible: { default() { return (item: Option) => { return true as boolean } } },
+  forcedPrompt: { default: false },
+  addable: { default: false },
+  removable: { default: false },
+  editable: { default: false },
+})
+
+const emit = defineEmits(['click', 'mouseenter', 'mouseleave', 'add', 'remove', 'edit'])
+
+const state = ref({
+  currentEditIndex: -1,
+  currentEditValue: '',
+})
+
+const options = computed(() => {
+  const options: Options = []
+
+  for (const item of props.data) {
+    if (props.visible(item) === true) options.push(item)
+  }
+
+  return options
+})
+const style = computed(() => {
+  let style = props.width ? `width:${props.width};` : ''
+
+  const padding = Theme.config.optionsScrollMargin.value * 2 + Theme.config.borderSize.value * 2 - Theme.config.optionMargin.value;
+
+  const heightUnit = Theme.config.optionMargin.value + Theme.config.inputHeight.value
+
+  style += `min-height:${props.minCount * heightUnit + padding}px;`;
+
+  if (props.data.length > props.maxCount) style += `height:${props.maxCount * heightUnit + padding}px;`
+
+
+  return style
+})
+
+const arrow = (item: Option) => {
+  if (props.arrow === false) return false
+
+  const children = props.getter.children(item)
+  return children.length > 0
+}
+
+const startEdit = (index: number, item: Option) => {
+  state.value.currentEditIndex = index
+  state.value.currentEditValue = props.getter.label(item)
+}
+const stopEdit = () => {
+  state.value.currentEditIndex = -1
+  state.value.currentEditValue = ''
+}
+const finishEdit = () => {
+  emit('edit', state.value.currentEditIndex, state.value.currentEditValue)
+  stopEdit()
+}
+</script>
+
+<style lang="less" scoped>
+@import '../theme/global.less';
+
+.vyr-options {
+  .vyr-font-family;
+  width: 100%;
+  height: auto;
+  color: var(--vyr-font-color);
+  font-size: var(--vyr-font-size);
+  background-color: var(--vyr-options-background-color);
+  overflow-x: hidden;
+  overflow-y: hidden;
+  border: var(--vyr-border-size) solid var(--vyr-options-border-color);
+  border-radius: var(--vyr-radius-size);
+  box-sizing: border-box;
+
+  :deep(.vyr-option) {
+    margin-bottom: var(--vyr-option-margin);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .custom-option {
+    padding-left: 0;
+  }
+
+  .custom-option:hover {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+
+  .custom-add {
+    width: 100%;
+    text-align: center;
+
+    .vyr-add {
+      font-size: 14px;
+    }
+  }
+
+  .custom-wrapper {
+    width: 45px;
+    padding: 0 0 0 8px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+
+    &:has(> :only-child) {
+      justify-content: flex-end;
+    }
+  }
+
+  .vyr-bianji {
+    font-size: 18px;
+  }
+
+  .vyr-remove,
+  .vyr-bianji,
+  .custom-wrapper .vyr-queren,
+  .custom-wrapper .vyr-quxiao {
+    cursor: pointer;
+    color: var(--vyr-helper-color);
+    transition: all var(--vyr-animation-time);
+  }
+
+  .vyr-remove:hover,
+  .vyr-bianji:hover,
+  .vyr-option.active .vyr-remove,
+  .vyr-option.active .vyr-bianji,
+  .custom-wrapper .vyr-queren:hover,
+  .custom-wrapper .vyr-quxiao:hover {
+    color: var(--vyr-white-color);
+  }
+}
+</style>