adtec-core-package 0.4.0 → 0.4.2

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>

package/src/components/icon/ElIcons.vue

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