adtec-core-package 0.0.2 → 0.0.4

package/src/components/Search/ElIconSearch.vue

@@ -0,0 +1,239 @@
+<!--创建人 丁盼-->
+<!--说明: ELIconSearch-->
+<!--创建时间: 2024/11/25 上午10:17-->
+<!--修改时间: 2024/11/25 上午10:17-->
+<template>
+  <el-popover
+    :popper-options="{
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: elementType === 'button' ? [0 - 15, 20] : [0 - 15, 12],
+          },
+        },
+      ],
+    }"
+    @hide="visible = false"
+    :popper-style="{ paddingTop: 0 }"
+    ref="popoverRef"
+    :virtual-ref="buttonRef"
+    placement="right-end"
+    :width="width"
+    trigger="click"
+    :teleported="false"
+    :visible="visible"
+  >
+    <template #reference>
+      <el-tooltip :content="tip" placement="top" style="cursor: pointer">
+        <el-button v-if="elementType === 'button'" style="padding: 8px 10px; margin-left: 4px">
+          <el-icon
+            ref="buttonRef"
+            :model-value="iconName"
+            :style="style"
+            :tip="tip"
+            @click="iconClick"
+            :class="getClass"
+          >
+            <svg v-if="selcomp" aria-hidden="true">
+              <use :href="'#' + iconName"></use>
+            </svg>
+            <component v-else :is="iconName"></component>
+          </el-icon>
+        </el-button>
+        <el-icon
+          ref="buttonRef"
+          v-else
+          :model-value="iconName"
+          :style="style"
+          :tip="tip"
+          @click="iconClick"
+          class="icon-btn"
+          :class="getClass"
+        >
+          <svg v-if="selcomp" class="icon" aria-hidden="true">
+            <use :href="'#' + iconName"></use>
+          </svg>
+          <component v-else :is="iconName"></component>
+        </el-icon>
+      </el-tooltip>
+    </template>
+    <el-flex :vertical="true" @keypress="keypress">
+      <el-flex
+        height="45px"
+        style="border-bottom: var(--border); margin-bottom: 10px"
+        :align="alignItemsEnum.center"
+      >
+        <el-flex>
+          <el-text style="font-size: 16px">{{ title }}</el-text>
+        </el-flex>
+        <el-flex :align="alignItemsEnum.center" :justify="justifyContentEnum.flexEnd">
+          <el-icons
+            model-value="Close"
+            style="font-size: 16px; cursor: pointer"
+            @click="visible = false"
+          ></el-icons>
+        </el-flex>
+      </el-flex>
+      <slot></slot>
+      <el-flex
+        :align="alignItemsEnum.flexEnd"
+        :justify="justifyContentEnum.flexEnd"
+        height="40px"
+        style="border-top: var(--border)"
+      >
+        <el-button @click="reset">重置</el-button>
+        <el-button type="primary" @click="search">查询</el-button>
+      </el-flex>
+    </el-flex>
+  </el-popover>
+</template>
+<script setup lang="ts">
+// 定义Props类型
+import { useVModel } from '@vueuse/core'
+import { computed, ref, unref } from 'vue'
+import { alignItemsEnum, justifyContentEnum } from '@/interface/enum/FlexEnum'
+import ElFlex from '@/components/ElFlex/ElFlex.vue'
+
+const iconClick = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+  visible.value = !visible.value
+}
+const keypress = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') {
+    visible.value = false
+    emit('search')
+  }
+}
+const search = () => {
+  visible.value = false
+  emit('search')
+}
+const reset = () => {
+  emit('reset')
+}
+const visible = ref(false)
+const buttonRef = ref()
+const popoverRef = ref()
+const props = defineProps({
+  /**
+   * @type Object
+   * @default {}
+   * @description 样式对象
+   */
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * @type string
+   * @default ''
+   * @description 提示文字
+   */
+  tip: {
+    type: String,
+    default: '高级筛选',
+  },
+  /**
+   * @type number
+   * @default 400
+   * @description 宽度
+   */
+  width: {
+    type: Number,
+    default: 350,
+  },
+  title: {
+    type: String,
+    default: '高级筛选',
+  },
+  modelValue: {
+    type: String,
+    default: 'adtec-filter',
+  },
+  /**
+   * @type {'small'|'default'|'large'}
+   * @default 'default'
+   * @description 图标大小
+   */
+  size: {
+    type: String,
+    default: 'default',
+    // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
+    validator: (value: string) => ['large', 'default', 'small'].includes(value),
+  },
+  /**
+   * @type {"default" | "success" | "warning" | "info" | "primary" | "danger"}
+   * @default 'default'
+   * @description 图标类型
+   */
+  type: {
+    type: String,
+    default: 'default',
+    validator: (value: string) =>
+      ['default', 'success', 'warning', 'info', 'primary', 'danger'].includes(value),
+  },
+  /**
+   * @type {"icon" | "button"}
+   * @default 'icon'
+   * @description 元素类型
+   */
+  elementType: {
+    type: String,
+    default: 'icon',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const getClass = computed(() => {
+  let className = 'icon-btn--' + props.type
+  if (props.disabled) {
+    className += ' icon-btn--disabled'
+  }
+  className += ' icon-btn--size-' + props.size
+  return className
+})
+const emit = defineEmits(['update:modelValue', 'click', 'search', 'reset'])
+const iconName = useVModel(props, 'modelValue', emit)
+
+const selcomp = computed(() => {
+  if (iconName.value?.includes('adtec')) {
+    return true
+  } else {
+    return false
+  }
+})
+</script>
+<style scoped lang="scss">
+.icon-btn {
+  margin-right: 5px;
+  cursor: pointer;
+  --el-button-hover-bg-color: var(--el-color-primary-light-3);
+  &:hover {
+    color: var(--el-button-hover-bg-color);
+  }
+  &--disabled {
+    color: var(--el-color-disabled-text-color);
+    cursor: not-allowed !important;
+  }
+  &--size-large {
+    font-size: var(--el-font-size-large);
+  }
+  &--size-default {
+    font-size: var(--el-font-size-base);
+  }
+  &--size-small {
+    font-size: var(--el-font-size-small);
+  }
+  @each $type in (primary, success, warning, danger, info) {
+    &--#{$type} {
+      --el-button-hover-bg-color: var(--el-color-#{$type}-light-3);
+      --el-button-disabled-bg-color: var(--el-color-#{$type}-light-5);
+      color: var(--el-color-#{$type});
+    }
+  }
+}
+</style>

package/src/components/Search/ElSearch.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-flex
+    @keypress="keypress"
+    :height="height"
+    style="background: #ffffff; /*border-radius: 4px;*/ padding: 15px 10px 15px 15px;"
+  >
+    <el-flex style="overflow: hidden">
+      <div ref="ref_content" style="width: 100%; overflow: hidden" :style="{ height: height }">
+        <div ref="ref_div">
+          <slot></slot>
+        </div>
+      </div>
+    </el-flex>
+
+    <el-flex
+      width="240px"
+      justify="flex-end"
+      align="flex-start"
+      style="padding-top: 30px"
+    >
+      <el-button @click="reset">重置</el-button>
+      <el-button type="primary" @click="search" :class="getRouteName + '_search'">查询</el-button>
+      <el-button type="text" @click="retract" v-show="is_retract">
+        <el-icon
+          ><ArrowDown v-show="retractval === '展开'" /><ArrowUp
+            v-show="retractval === '收起'" /></el-icon
+        >{{ retractval }}</el-button
+      >
+    </el-flex>
+  </el-flex>
+</template>
+<script setup lang="ts">
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import { useRouter } from 'vue-router'
+import ElFlex from '@/components/ElFlex/ElFlex.vue'
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const getRouteName = computed(() => {
+  return router.currentRoute.value.name as string
+})
+const ref_content = ref()
+const retractval = ref('展开')
+const height = ref('95px')
+const is_retract = ref(false)
+const ref_div = ref()
+const windowContent = useWindowSize()
+const collapsed = inject<boolean>('collapsed')
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-expect-error
+watch(collapsed, () => {
+  calculation()
+})
+watch(windowContent.width, () => {
+  calculation()
+})
+const calculation = () => {
+  setTimeout(() => {
+    if (!(ref_div.value.offsetHeight > 95)) {
+      if (ref_div.value.offsetHeight !== 0) {
+        is_retract.value = false
+        height.value = ref_div.value.offsetHeight + 15 + 'px'
+        retractval.value = '收起'
+      } else {
+        calculation()
+      }
+    } else {
+      is_retract.value = true
+      height.value = '95px'
+      retractval.value = '展开'
+    }
+  }, 100)
+}
+watch(windowContent.height, () => {
+  calculation()
+})
+const retract = () => {
+  if (height.value === '95px') {
+    height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
+    retractval.value = '收起'
+  } else {
+    height.value = '95px'
+    retractval.value = '展开'
+  }
+}
+const reset = () => {
+  emit('reset')
+}
+const search = () => {
+  emit('search')
+}
+const keypress = () => {
+  // if (e.key === 'Enter') {
+  //   emit('search')
+  // }
+}
+const emit = defineEmits<{
+  (event: 'reset'): void
+  (event: 'search'): void
+}>()
+onMounted(() => {
+  nextTick(() => {
+    if (!(ref_content.value.children[0].scrollHeight > 95)) {
+      is_retract.value = false
+      height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
+      retractval.value = '收起'
+    } else {
+      is_retract.value = true
+      height.value = '95px'
+      retractval.value = '展开'
+    }
+  })
+})
+
+// onKeyStroke(['d', 'D', 'ArrowRight'], () => {
+//   translateX.value += 10
+// }, { dedupe: true })
+</script>
+<style scoped lang="scss">
+.elementSelect {
+  border: 2px dashed #1a67f8 !important;
+}
+
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>

package/src/components/Title/ElTitle.vue

@@ -0,0 +1,49 @@
+<!--创建人 丁盼-->
+<!--说明: ElTitle-->
+<!--创建时间: 2024/10/26 下午7:08-->
+<!--修改时间: 2024/10/26 下午7:08-->
+<template>
+  <el-flex align="center" height="44px" style="background: #ffffff">
+    <el-flex align="center">
+      <template v-if="level + '' === '0'">
+        <el-icons
+          model-value="adtec-titletag"
+          style="color: var(--el-color-primary); font-size: 16px"
+        ></el-icons>
+        <el-text style="font-size: 16px; line-height: 16px">{{ title }}</el-text>
+      </template>
+      <template v-if="level + '' === '1'">
+        <el-icons
+          model-value="adtec-contenttitle"
+          style="color: var(--el-color-primary); font-size: 16px"
+        ></el-icons>
+        <el-text style="font-size: 16px; line-height: 16px">{{ title }}</el-text>
+      </template>
+      <template v-if="level + '' === '2'">
+        <el-text style="font-size: 16px; line-height: 16px">{{ title }}</el-text>
+      </template>
+    </el-flex>
+    <slot></slot>
+  </el-flex>
+</template>
+<script setup lang="ts">
+import ElIcons from '@/components/icon/ElIcons.vue'
+import ElFlex from '@/components/ElFlex/ElFlex.vue'
+
+defineProps({
+  /**
+   * @type string
+   * @default ''
+   * @description 提示文字
+   */
+  title: {
+    type: String,
+    default: '标题',
+  },
+  level: {
+    type: String,
+    default: '0',
+  },
+})
+</script>
+<style scoped lang="scss"></style>

package/src/components/icon/ElIconBtn.vue

@@ -0,0 +1,182 @@
+<!--创建人 丁盼-->
+<!--说明: ElIconBtn-->
+<!--创建时间: 2024/11/24 下午3:12-->
+<!--修改时间: 2024/11/24 下午3:12-->
+<template>
+  <el-button v-if="elementType === 'button'" style="padding: 8px 10px; margin-left: 4px">
+    <el-icon
+      ref="ref_icons"
+      @mouseenter="visible = true"
+      @mouseleave="visible = false"
+      class="icon-btn"
+      style="margin: 0"
+      :class="getClass"
+    >
+      <svg v-if="selcomp" class="icon" aria-hidden="true">
+        <use :href="'#' + iconName"></use>
+      </svg>
+      <component v-else :is="iconName"></component>
+      <el-tooltip
+        v-model:visible="visible"
+        v-if="tip"
+        :content="tip"
+        placement="top"
+        effect="light"
+        trigger="click"
+        virtual-triggering
+        :virtual-ref="ref_icons"
+      />
+    </el-icon>
+  </el-button>
+  <el-icon
+    v-else
+    ref="ref_icons"
+    @mouseenter="visible = true"
+    @mouseleave="visible = false"
+    class="icon-btn"
+    :class="getClass"
+  >
+    <svg v-if="selcomp" class="icon" aria-hidden="true">
+      <use :href="'#' + iconName"></use>
+    </svg>
+    <component v-else :is="iconName"></component>
+    <el-tooltip
+      v-model:visible="visible"
+      v-if="tip"
+      :content="tip"
+      placement="top"
+      effect="light"
+      trigger="click"
+      virtual-triggering
+      :virtual-ref="ref_icons"
+    />
+  </el-icon>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed, ref } from 'vue'
+const visible = ref(false)
+const ref_icons = ref()
+const selcomp = computed(() => {
+  if (iconName.value?.includes('adtec')) {
+    return true
+  } else {
+    return false
+  }
+})
+/**
+ * 获取样式
+ */
+const getClass = computed(() => {
+  let className = 'icon-btn--'
+  // + props.type
+  if (props.type !== 'default') {
+    className += props.type
+  } else {
+    if (iconName.value === 'adtec-plus') {
+      className += 'primary'
+    } else if (iconName.value === 'adtec-refresh') {
+      className += 'default'
+    } else if (iconName.value === 'adtec-delete') {
+      className += 'danger'
+    } else if (iconName.value === 'adtec-edit') {
+      className += 'warning'
+    }
+  }
+
+  if (props.disabled) {
+    className += ' icon-btn--disabled'
+  }
+  className += ' icon-btn--size-' + props.size
+  return className
+})
+// 定义Props类型
+const props = defineProps({
+  /**
+   * @type string
+   * @default ''
+   * @description 提示文字
+   */
+  tip: {
+    type: String,
+    default: '',
+  },
+  /**
+   * @type {'adtec-plus'|'adtec-refresh'|'adtec-delete'|'adtec-edit'}
+   * @default 'default'
+   * @description 图标
+   */
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  /**
+   * @type {'small'|'default'|'large'}
+   * @default 'default'
+   * @description 图标大小
+   */
+  size: {
+    type: String,
+    default: 'default',
+    // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
+    validator: (value: string) => ['large', 'default', 'small'].includes(value),
+  },
+  /**
+   * @type {"default" | "success" | "warning" | "info" | "primary" | "danger"}
+   * @default 'default'
+   * @description 图标类型
+   */
+  type: {
+    type: String,
+    default: 'default',
+    validator: (value: string) =>
+      ['default', 'success', 'warning', 'info', 'primary', 'danger'].includes(value),
+  },
+  /**
+   * @type {"icon" | "button"}
+   * @default 'icon'
+   * @description 元素类型
+   */
+  elementType: {
+    type: String,
+    default: 'icon',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+const iconName = useVModel(props, 'modelValue', emit)
+</script>
+<style scoped lang="scss">
+.icon-btn {
+  cursor: pointer;
+  margin: 0px 0px 0px 8px;
+  //margin-left: 5px;
+  --el-button-hover-bg-color: var(--el-color-primary-light-3);
+  &:hover {
+    color: var(--el-button-hover-bg-color);
+  }
+  &--disabled {
+    color: var(--el-color-disabled-text-color);
+    cursor: not-allowed !important;
+  }
+  &--size-large {
+    font-size: var(--el-font-size-large);
+  }
+  &--size-default {
+    font-size: var(--el-font-size-base);
+  }
+  &--size-small {
+    font-size: var(--el-font-size-small);
+  }
+  @each $type in (primary, success, warning, danger, info) {
+    &--#{$type} {
+      --el-button-hover-bg-color: var(--el-color-#{$type}-light-3);
+      --el-button-disabled-bg-color: var(--el-color-#{$type}-light-5);
+      color: var(--el-color-#{$type});
+    }
+  }
+}
+</style>

package/src/components/icon/ElIcons.vue

@@ -0,0 +1,38 @@
+<!--创建人 丁盼-->
+<!--说明: ElIcons-->
+<!--创建时间: 2024/10/18 上午11:47-->
+<!--修改时间: 2024/10/18 上午11:47-->
+<template>
+  <!--  <span v-if="selcomp" class="adtec" :class="iconName"></span>-->
+  <el-icon>
+    <svg v-if="selcomp" class="icon" aria-hidden="true">
+      <use :href="'#' + iconName"></use>
+    </svg>
+    <component v-else :is="iconName"></component>
+  </el-icon>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useVModel } from '@vueuse/core'
+const props = defineProps({
+  modelValue: String,
+})
+const emit = defineEmits(['update:modelValue'])
+const iconName = useVModel(props, 'modelValue', emit)
+const selcomp = computed(() => {
+  if (iconName.value?.includes('adtec')) {
+    return true
+  } else {
+    return false
+  }
+})
+</script>
+<style scoped lang="scss">
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>