adtec-core-package 0.2.2 → 0.2.4

package/src/components/Search/ElSearch.vue

@@ -1,132 +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 '../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>
+<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 '../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/icon/ElIconBtn.vue

@@ -1,182 +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>
+<!--创建人 丁盼-->
+<!--说明: 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>