adtec-core-package 2.2.6 → 2.2.8

package/src/components/icon/ElIconBtn.vue

@@ -1,243 +1,243 @@
-<!--创建人 丁盼-->
-<!--说明: ElIconBtn-->
-<!--创建时间: 2024/11/24 下午3:12-->
-<!--修改时间: 2024/11/24 下午3:12-->
-<template>
-  <el-button
-    v-if="elementType === 'button'"
-    :disabled="disabled"
-    ref="ref_icons"
-    @click.stop="iconClick"
-    style="padding: 8px 10px; margin-left: 4px"
-  >
-    <el-icon
-      @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-if="disabled"
-    ref="ref_icons"
-    :disabled="disabled"
-    @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>
-  <el-icon
-    v-else
-    ref="ref_icons"
-    @click.stop="iconClick"
-    @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 iconClick = (ev: any) => {
-  //@ts-ignore
-  emit('click', ev)
-}
-/**
- * 获取样式
- */
-const getClass = computed(() => {
-  let className = 'icon-btn--'
-  // + props.type
-  if (props.type !== 'default') {
-    className += props.type
-    if (props.disabled) {
-      className += ' icon-btn--' + props.type + '--disabled'
-    }
-  } else {
-    if (iconName.value === 'adtec-plus') {
-      className += 'primary'
-      if (props.disabled) {
-        className += ' icon-btn--primary--disabled'
-      }
-    } else if (iconName.value === 'adtec-refresh') {
-      className += 'default'
-      if (props.disabled) {
-        className += ' icon-btn--default--disabled'
-      }
-    } else if (iconName.value === 'adtec-delete') {
-      className += 'danger'
-      if (props.disabled) {
-        className += ' icon-btn--danger--disabled'
-      }
-    } else if (iconName.value === 'adtec-edit') {
-      className += 'warning'
-      if (props.disabled) {
-        className += ' icon-btn--warning--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'|'medium'}
-   * @default 'default'
-   * @description 图标大小
-   */
-  size: {
-    type: String,
-    default: 'default',
-    // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
-    validator: (value: string) => ['large', 'default', 'medium', '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', 'click'])
-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) !important;
-    cursor: not-allowed !important;
-  }
-
-  &--size-large {
-    font-size: var(--el-font-size-large);
-  }
-
-  &--size-default {
-    font-size: var(--el-font-size-base);
-  }
-
-  &--size-medium {
-    font-size: var(--el-font-size-medium);
-  }
-
-  &--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});
-    }
-    //icon-btn--danger--disabled
-    &--#{$type}--disabled{
-      color: var(--el-color-#{$type}-light-5) !important;
-      cursor: not-allowed !important;
-    }
-  }
-}
-</style>
+<!--创建人 丁盼-->
+<!--说明: ElIconBtn-->
+<!--创建时间: 2024/11/24 下午3:12-->
+<!--修改时间: 2024/11/24 下午3:12-->
+<template>
+  <el-button
+    v-if="elementType === 'button'"
+    :disabled="disabled"
+    ref="ref_icons"
+    @click.stop="iconClick"
+    style="padding: 8px 10px; margin-left: 4px"
+  >
+    <el-icon
+      @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-if="disabled"
+    ref="ref_icons"
+    :disabled="disabled"
+    @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>
+  <el-icon
+    v-else
+    ref="ref_icons"
+    @click.stop="iconClick"
+    @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 iconClick = (ev: any) => {
+  //@ts-ignore
+  emit('click', ev)
+}
+/**
+ * 获取样式
+ */
+const getClass = computed(() => {
+  let className = 'icon-btn--'
+  // + props.type
+  if (props.type !== 'default') {
+    className += props.type
+    if (props.disabled) {
+      className += ' icon-btn--' + props.type + '--disabled'
+    }
+  } else {
+    if (iconName.value === 'adtec-plus') {
+      className += 'primary'
+      if (props.disabled) {
+        className += ' icon-btn--primary--disabled'
+      }
+    } else if (iconName.value === 'adtec-refresh') {
+      className += 'default'
+      if (props.disabled) {
+        className += ' icon-btn--default--disabled'
+      }
+    } else if (iconName.value === 'adtec-delete') {
+      className += 'danger'
+      if (props.disabled) {
+        className += ' icon-btn--danger--disabled'
+      }
+    } else if (iconName.value === 'adtec-edit') {
+      className += 'warning'
+      if (props.disabled) {
+        className += ' icon-btn--warning--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'|'medium'}
+   * @default 'default'
+   * @description 图标大小
+   */
+  size: {
+    type: String,
+    default: 'default',
+    // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
+    validator: (value: string) => ['large', 'default', 'medium', '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', 'click'])
+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) !important;
+    cursor: not-allowed !important;
+  }
+
+  &--size-large {
+    font-size: var(--el-font-size-large);
+  }
+
+  &--size-default {
+    font-size: var(--el-font-size-base);
+  }
+
+  &--size-medium {
+    font-size: var(--el-font-size-medium);
+  }
+
+  &--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});
+    }
+    //icon-btn--danger--disabled
+    &--#{$type}--disabled{
+      color: var(--el-color-#{$type}-light-5) !important;
+      cursor: not-allowed !important;
+    }
+  }
+}
+</style>