@phill-component/icons 1.10.6 → 1.10.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mobile/uvue/icon-edit/edit.png +0 -0
- package/dist/mobile/uvue/icon-edit/icon-edit.uvue +75 -0
- package/dist/mobile/uvue/icon-fire/fire.png +0 -0
- package/dist/mobile/uvue/icon-fire/icon-fire.uvue +75 -0
- package/dist/mobile/vue/icon-edit.vue +58 -0
- package/dist/mobile/vue/icon-fire.vue +58 -0
- package/dist/web/vue/Edit.vue +53 -0
- package/dist/web/vue/Fire.vue +53 -0
- package/dist/web/vue/index.js +3 -1
- package/package.json +1 -1
|
Binary file
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="icon" @tap="onTap" :hover-class="hoverClass" :style="rootStyle">
|
|
3
|
+
<!-- #ifdef H5 -->
|
|
4
|
+
<svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="m30.479 19.038 5.734-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.591.286l-6.047.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M5.999 42h36"/></svg>
|
|
5
|
+
<!-- #endif -->
|
|
6
|
+
<!-- #ifndef H5 -->
|
|
7
|
+
<image :src="imgSrc" :style="iconBoxStyle" />
|
|
8
|
+
<!-- #endif -->
|
|
9
|
+
<text v-if="label != ''" class="icon__label" :style="labelStyle">{{ label }}</text>
|
|
10
|
+
</view>
|
|
11
|
+
</template>
|
|
12
|
+
<script setup lang="uts">
|
|
13
|
+
import { computed } from 'vue'
|
|
14
|
+
import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-edit/edit.png'
|
|
15
|
+
const props = defineProps({
|
|
16
|
+
size: { type: [String, Number], default: '1em' },
|
|
17
|
+
color: { type: String, default: 'var(--tsm-color-primary)' },
|
|
18
|
+
label: { type: [String, Number], default: '' },
|
|
19
|
+
labelPos: { type: String, default: 'right' },
|
|
20
|
+
labelSize: { type: [String, Number], default: '15px' },
|
|
21
|
+
labelColor: { type: String, default: '' },
|
|
22
|
+
space: { type: [String, Number], default: '3px' },
|
|
23
|
+
width: { type: [String, Number], default: '' },
|
|
24
|
+
height: { type: [String, Number], default: '' },
|
|
25
|
+
hoverClass: { type: String, default: '' },
|
|
26
|
+
index: { type: [String, Number], default: '' },
|
|
27
|
+
stop: { type: Boolean, default: false }
|
|
28
|
+
})
|
|
29
|
+
const emit = defineEmits(['click'])
|
|
30
|
+
function toPx(v: any): string {
|
|
31
|
+
if (typeof v === 'number') return (v as number).toString() + 'px'
|
|
32
|
+
const s = (v as string)
|
|
33
|
+
return s != '' ? s : ''
|
|
34
|
+
}
|
|
35
|
+
const iconW = computed((): string => (props.width != '' ? toPx(props.width) : toPx(props.size)))
|
|
36
|
+
const iconH = computed((): string => (props.height != '' ? toPx(props.height) : toPx(props.size)))
|
|
37
|
+
const iconStyle = computed((): UTSJSONObject => {
|
|
38
|
+
return { 'color': props.color != '' ? props.color : 'inherit' } as UTSJSONObject
|
|
39
|
+
})
|
|
40
|
+
const iconBoxStyle = computed((): UTSJSONObject => ({ width: iconW.value, height: iconH.value } as UTSJSONObject))
|
|
41
|
+
const wrapStyle = computed((): UTSJSONObject => {
|
|
42
|
+
const map = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' } as UTSJSONObject
|
|
43
|
+
let dir: string = 'row'
|
|
44
|
+
const cand = map[props.labelPos] as string | null
|
|
45
|
+
if (cand != null && cand.length > 0) {
|
|
46
|
+
dir = cand
|
|
47
|
+
}
|
|
48
|
+
return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
|
|
49
|
+
})
|
|
50
|
+
const rootStyle = computed((): UTSJSONObject => {
|
|
51
|
+
const s = wrapStyle.value
|
|
52
|
+
const i = iconStyle.value
|
|
53
|
+
for (const key in i) {
|
|
54
|
+
s[key] = i[key]
|
|
55
|
+
}
|
|
56
|
+
return s
|
|
57
|
+
})
|
|
58
|
+
const labelStyle = computed((): UTSJSONObject => {
|
|
59
|
+
const out = {} as UTSJSONObject
|
|
60
|
+
if (props.labelColor != '') out['color'] = props.labelColor
|
|
61
|
+
out['fontSize'] = toPx(props.labelSize)
|
|
62
|
+
out['marginLeft'] = props.labelPos == 'right' ? toPx(props.space) : 0
|
|
63
|
+
out['marginTop'] = props.labelPos == 'bottom' ? toPx(props.space) : 0
|
|
64
|
+
out['marginRight'] = props.labelPos == 'left' ? toPx(props.space) : 0
|
|
65
|
+
out['marginBottom'] = props.labelPos == 'top' ? toPx(props.space) : 0
|
|
66
|
+
return out
|
|
67
|
+
})
|
|
68
|
+
function onTap(e: UniPointerEvent) {
|
|
69
|
+
emit('click', props.index)
|
|
70
|
+
if (props.stop) e.stopPropagation()
|
|
71
|
+
}
|
|
72
|
+
</script>
|
|
73
|
+
<style scoped>
|
|
74
|
+
.icon__label { line-height: 1; }
|
|
75
|
+
</style>
|
|
Binary file
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="icon" @tap="onTap" :hover-class="hoverClass" :style="rootStyle">
|
|
3
|
+
<!-- #ifdef H5 -->
|
|
4
|
+
<svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="M17.577 27.477C20.022 22.579 17.041 12.98 24.546 6c0 0-1.156 15.55 5.36 17.181 2.145.537 2.68-5.369 4.289-8.59 0 0 .536 4.832 2.68 8.59 3.217 7.517-1 14.117-5.896 17.182-4.289 2.684-14.587 2.807-19.835-5.37-4.824-7.516 0-15.57 0-15.57s4.289 12.35 6.433 8.054z"/></svg>
|
|
5
|
+
<!-- #endif -->
|
|
6
|
+
<!-- #ifndef H5 -->
|
|
7
|
+
<image :src="imgSrc" :style="iconBoxStyle" />
|
|
8
|
+
<!-- #endif -->
|
|
9
|
+
<text v-if="label != ''" class="icon__label" :style="labelStyle">{{ label }}</text>
|
|
10
|
+
</view>
|
|
11
|
+
</template>
|
|
12
|
+
<script setup lang="uts">
|
|
13
|
+
import { computed } from 'vue'
|
|
14
|
+
import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-fire/fire.png'
|
|
15
|
+
const props = defineProps({
|
|
16
|
+
size: { type: [String, Number], default: '1em' },
|
|
17
|
+
color: { type: String, default: 'var(--tsm-color-primary)' },
|
|
18
|
+
label: { type: [String, Number], default: '' },
|
|
19
|
+
labelPos: { type: String, default: 'right' },
|
|
20
|
+
labelSize: { type: [String, Number], default: '15px' },
|
|
21
|
+
labelColor: { type: String, default: '' },
|
|
22
|
+
space: { type: [String, Number], default: '3px' },
|
|
23
|
+
width: { type: [String, Number], default: '' },
|
|
24
|
+
height: { type: [String, Number], default: '' },
|
|
25
|
+
hoverClass: { type: String, default: '' },
|
|
26
|
+
index: { type: [String, Number], default: '' },
|
|
27
|
+
stop: { type: Boolean, default: false }
|
|
28
|
+
})
|
|
29
|
+
const emit = defineEmits(['click'])
|
|
30
|
+
function toPx(v: any): string {
|
|
31
|
+
if (typeof v === 'number') return (v as number).toString() + 'px'
|
|
32
|
+
const s = (v as string)
|
|
33
|
+
return s != '' ? s : ''
|
|
34
|
+
}
|
|
35
|
+
const iconW = computed((): string => (props.width != '' ? toPx(props.width) : toPx(props.size)))
|
|
36
|
+
const iconH = computed((): string => (props.height != '' ? toPx(props.height) : toPx(props.size)))
|
|
37
|
+
const iconStyle = computed((): UTSJSONObject => {
|
|
38
|
+
return { 'color': props.color != '' ? props.color : 'inherit' } as UTSJSONObject
|
|
39
|
+
})
|
|
40
|
+
const iconBoxStyle = computed((): UTSJSONObject => ({ width: iconW.value, height: iconH.value } as UTSJSONObject))
|
|
41
|
+
const wrapStyle = computed((): UTSJSONObject => {
|
|
42
|
+
const map = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' } as UTSJSONObject
|
|
43
|
+
let dir: string = 'row'
|
|
44
|
+
const cand = map[props.labelPos] as string | null
|
|
45
|
+
if (cand != null && cand.length > 0) {
|
|
46
|
+
dir = cand
|
|
47
|
+
}
|
|
48
|
+
return { display: 'flex', alignItems: 'center', flexDirection: dir } as UTSJSONObject
|
|
49
|
+
})
|
|
50
|
+
const rootStyle = computed((): UTSJSONObject => {
|
|
51
|
+
const s = wrapStyle.value
|
|
52
|
+
const i = iconStyle.value
|
|
53
|
+
for (const key in i) {
|
|
54
|
+
s[key] = i[key]
|
|
55
|
+
}
|
|
56
|
+
return s
|
|
57
|
+
})
|
|
58
|
+
const labelStyle = computed((): UTSJSONObject => {
|
|
59
|
+
const out = {} as UTSJSONObject
|
|
60
|
+
if (props.labelColor != '') out['color'] = props.labelColor
|
|
61
|
+
out['fontSize'] = toPx(props.labelSize)
|
|
62
|
+
out['marginLeft'] = props.labelPos == 'right' ? toPx(props.space) : 0
|
|
63
|
+
out['marginTop'] = props.labelPos == 'bottom' ? toPx(props.space) : 0
|
|
64
|
+
out['marginRight'] = props.labelPos == 'left' ? toPx(props.space) : 0
|
|
65
|
+
out['marginBottom'] = props.labelPos == 'top' ? toPx(props.space) : 0
|
|
66
|
+
return out
|
|
67
|
+
})
|
|
68
|
+
function onTap(e: UniPointerEvent) {
|
|
69
|
+
emit('click', props.index)
|
|
70
|
+
if (props.stop) e.stopPropagation()
|
|
71
|
+
}
|
|
72
|
+
</script>
|
|
73
|
+
<style scoped>
|
|
74
|
+
.icon__label { line-height: 1; }
|
|
75
|
+
</style>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
|
|
3
|
+
<!-- #ifdef H5 -->
|
|
4
|
+
<svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="m30.479 19.038 5.734-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.591.286l-6.047.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M5.999 42h36"/></svg>
|
|
5
|
+
<!-- #endif -->
|
|
6
|
+
<!-- #ifndef H5 -->
|
|
7
|
+
<image :src="imgSrc" :style="iconBoxStyle" />
|
|
8
|
+
<!-- #endif -->
|
|
9
|
+
<text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
|
|
10
|
+
</view>
|
|
11
|
+
</template>
|
|
12
|
+
<script setup>
|
|
13
|
+
import { computed } from 'vue'
|
|
14
|
+
import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-edit/edit.png'
|
|
15
|
+
const props = defineProps({
|
|
16
|
+
size: { type: [String, Number], default: '1em' },
|
|
17
|
+
color: { type: String, default: 'var(--tsm-color-primary)' },
|
|
18
|
+
label: { type: [String, Number], default: '' },
|
|
19
|
+
labelPos: { type: String, default: 'right' },
|
|
20
|
+
labelSize: { type: [String, Number], default: '15px' },
|
|
21
|
+
labelColor: { type: String, default: '' },
|
|
22
|
+
space: { type: [String, Number], default: '3px' },
|
|
23
|
+
width: { type: [String, Number], default: '' },
|
|
24
|
+
height: { type: [String, Number], default: '' },
|
|
25
|
+
hoverClass: { type: String, default: '' },
|
|
26
|
+
index: { type: [String, Number], default: '' },
|
|
27
|
+
stop: { type: Boolean, default: false }
|
|
28
|
+
})
|
|
29
|
+
const emit = defineEmits(['click'])
|
|
30
|
+
const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
|
|
31
|
+
const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
|
|
32
|
+
const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
|
|
33
|
+
const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
|
|
34
|
+
const iconStyle = computed(() => {
|
|
35
|
+
return { color: props.color || 'inherit' }
|
|
36
|
+
})
|
|
37
|
+
const wrapStyle = computed(() => {
|
|
38
|
+
const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
|
|
39
|
+
return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
|
|
40
|
+
})
|
|
41
|
+
const labelStyle = computed(() => {
|
|
42
|
+
return {
|
|
43
|
+
color: props.labelColor || '',
|
|
44
|
+
fontSize: toPx(props.labelSize),
|
|
45
|
+
marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
|
|
46
|
+
marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
|
|
47
|
+
marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
|
|
48
|
+
marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
|
|
49
|
+
}
|
|
50
|
+
})
|
|
51
|
+
function onTap(e) {
|
|
52
|
+
emit('click', props.index)
|
|
53
|
+
if (props.stop && e && e.stopPropagation) e.stopPropagation()
|
|
54
|
+
}
|
|
55
|
+
</script>
|
|
56
|
+
<style scoped>
|
|
57
|
+
.icon__label { line-height: 1; }
|
|
58
|
+
</style>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
|
|
3
|
+
<!-- #ifdef H5 -->
|
|
4
|
+
<svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="M17.577 27.477C20.022 22.579 17.041 12.98 24.546 6c0 0-1.156 15.55 5.36 17.181 2.145.537 2.68-5.369 4.289-8.59 0 0 .536 4.832 2.68 8.59 3.217 7.517-1 14.117-5.896 17.182-4.289 2.684-14.587 2.807-19.835-5.37-4.824-7.516 0-15.57 0-15.57s4.289 12.35 6.433 8.054z"/></svg>
|
|
5
|
+
<!-- #endif -->
|
|
6
|
+
<!-- #ifndef H5 -->
|
|
7
|
+
<image :src="imgSrc" :style="iconBoxStyle" />
|
|
8
|
+
<!-- #endif -->
|
|
9
|
+
<text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
|
|
10
|
+
</view>
|
|
11
|
+
</template>
|
|
12
|
+
<script setup>
|
|
13
|
+
import { computed } from 'vue'
|
|
14
|
+
import imgSrc from '@/uni_modules/@phill-component/icons/mobile/uvue/icon-fire/fire.png'
|
|
15
|
+
const props = defineProps({
|
|
16
|
+
size: { type: [String, Number], default: '1em' },
|
|
17
|
+
color: { type: String, default: 'var(--tsm-color-primary)' },
|
|
18
|
+
label: { type: [String, Number], default: '' },
|
|
19
|
+
labelPos: { type: String, default: 'right' },
|
|
20
|
+
labelSize: { type: [String, Number], default: '15px' },
|
|
21
|
+
labelColor: { type: String, default: '' },
|
|
22
|
+
space: { type: [String, Number], default: '3px' },
|
|
23
|
+
width: { type: [String, Number], default: '' },
|
|
24
|
+
height: { type: [String, Number], default: '' },
|
|
25
|
+
hoverClass: { type: String, default: '' },
|
|
26
|
+
index: { type: [String, Number], default: '' },
|
|
27
|
+
stop: { type: Boolean, default: false }
|
|
28
|
+
})
|
|
29
|
+
const emit = defineEmits(['click'])
|
|
30
|
+
const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
|
|
31
|
+
const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
|
|
32
|
+
const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
|
|
33
|
+
const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
|
|
34
|
+
const iconStyle = computed(() => {
|
|
35
|
+
return { color: props.color || 'inherit' }
|
|
36
|
+
})
|
|
37
|
+
const wrapStyle = computed(() => {
|
|
38
|
+
const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
|
|
39
|
+
return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
|
|
40
|
+
})
|
|
41
|
+
const labelStyle = computed(() => {
|
|
42
|
+
return {
|
|
43
|
+
color: props.labelColor || '',
|
|
44
|
+
fontSize: toPx(props.labelSize),
|
|
45
|
+
marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
|
|
46
|
+
marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
|
|
47
|
+
marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
|
|
48
|
+
marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
|
|
49
|
+
}
|
|
50
|
+
})
|
|
51
|
+
function onTap(e) {
|
|
52
|
+
emit('click', props.index)
|
|
53
|
+
if (props.stop && e && e.stopPropagation) e.stopPropagation()
|
|
54
|
+
}
|
|
55
|
+
</script>
|
|
56
|
+
<style scoped>
|
|
57
|
+
.icon__label { line-height: 1; }
|
|
58
|
+
</style>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
|
|
3
|
+
<svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="m30.479 19.038 5.734-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.591.286l-6.047.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M5.999 42h36"/></svg>
|
|
4
|
+
<text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
|
|
5
|
+
</view>
|
|
6
|
+
</template>
|
|
7
|
+
<script setup>
|
|
8
|
+
import { computed } from 'vue'
|
|
9
|
+
const props = defineProps({
|
|
10
|
+
size: { type: [String, Number], default: '1em' },
|
|
11
|
+
color: { type: String, default: 'inherit' },
|
|
12
|
+
label: { type: [String, Number], default: '' },
|
|
13
|
+
labelPos: { type: String, default: 'right' },
|
|
14
|
+
labelSize: { type: [String, Number], default: '15px' },
|
|
15
|
+
labelColor: { type: String, default: '' },
|
|
16
|
+
space: { type: [String, Number], default: '3px' },
|
|
17
|
+
width: { type: [String, Number], default: '' },
|
|
18
|
+
height: { type: [String, Number], default: '' },
|
|
19
|
+
hoverClass: { type: String, default: '' },
|
|
20
|
+
index: { type: [String, Number], default: '' },
|
|
21
|
+
stop: { type: Boolean, default: false }
|
|
22
|
+
})
|
|
23
|
+
const emit = defineEmits(['click'])
|
|
24
|
+
const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
|
|
25
|
+
const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
|
|
26
|
+
const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
|
|
27
|
+
const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
|
|
28
|
+
const iconStyle = computed(() => {
|
|
29
|
+
return { color: props.color || 'inherit' }
|
|
30
|
+
})
|
|
31
|
+
const wrapStyle = computed(() => {
|
|
32
|
+
const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
|
|
33
|
+
return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
|
|
34
|
+
})
|
|
35
|
+
const labelStyle = computed(() => {
|
|
36
|
+
return {
|
|
37
|
+
color: props.labelColor || '',
|
|
38
|
+
fontSize: toPx(props.labelSize),
|
|
39
|
+
marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
|
|
40
|
+
marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
|
|
41
|
+
marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
|
|
42
|
+
marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
|
|
43
|
+
}
|
|
44
|
+
})
|
|
45
|
+
const imgSrc = '__IMG_SRC__'
|
|
46
|
+
function onTap(e) {
|
|
47
|
+
emit('click', props.index)
|
|
48
|
+
if (props.stop && e && e.stopPropagation) e.stopPropagation()
|
|
49
|
+
}
|
|
50
|
+
</script>
|
|
51
|
+
<style scoped>
|
|
52
|
+
.icon__label { line-height: 1; }
|
|
53
|
+
</style>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="icon" @tap="onTap" :hover-class="hoverClass" :style="[wrapStyle, iconStyle]">
|
|
3
|
+
<svg v-bind="$attrs" :style="iconStyle" :width="iconW" :height="iconH" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-width="2" d="M17.577 27.477C20.022 22.579 17.041 12.98 24.546 6c0 0-1.156 15.55 5.36 17.181 2.145.537 2.68-5.369 4.289-8.59 0 0 .536 4.832 2.68 8.59 3.217 7.517-1 14.117-5.896 17.182-4.289 2.684-14.587 2.807-19.835-5.37-4.824-7.516 0-15.57 0-15.57s4.289 12.35 6.433 8.054z"/></svg>
|
|
4
|
+
<text v-if="label !== ''" class="icon__label" :style="labelStyle">{{ label }}</text>
|
|
5
|
+
</view>
|
|
6
|
+
</template>
|
|
7
|
+
<script setup>
|
|
8
|
+
import { computed } from 'vue'
|
|
9
|
+
const props = defineProps({
|
|
10
|
+
size: { type: [String, Number], default: '1em' },
|
|
11
|
+
color: { type: String, default: 'inherit' },
|
|
12
|
+
label: { type: [String, Number], default: '' },
|
|
13
|
+
labelPos: { type: String, default: 'right' },
|
|
14
|
+
labelSize: { type: [String, Number], default: '15px' },
|
|
15
|
+
labelColor: { type: String, default: '' },
|
|
16
|
+
space: { type: [String, Number], default: '3px' },
|
|
17
|
+
width: { type: [String, Number], default: '' },
|
|
18
|
+
height: { type: [String, Number], default: '' },
|
|
19
|
+
hoverClass: { type: String, default: '' },
|
|
20
|
+
index: { type: [String, Number], default: '' },
|
|
21
|
+
stop: { type: Boolean, default: false }
|
|
22
|
+
})
|
|
23
|
+
const emit = defineEmits(['click'])
|
|
24
|
+
const toPx = (v) => typeof v === 'number' ? (v + 'px') : (String(v||''));
|
|
25
|
+
const iconW = computed(() => props.width ? toPx(props.width) : toPx(props.size))
|
|
26
|
+
const iconH = computed(() => props.height ? toPx(props.height) : toPx(props.size))
|
|
27
|
+
const iconBoxStyle = computed(() => ({ width: iconW.value, height: iconH.value }))
|
|
28
|
+
const iconStyle = computed(() => {
|
|
29
|
+
return { color: props.color || 'inherit' }
|
|
30
|
+
})
|
|
31
|
+
const wrapStyle = computed(() => {
|
|
32
|
+
const dirMap = { right: 'row', left: 'row-reverse', top: 'column-reverse', bottom: 'column' }
|
|
33
|
+
return { display: 'flex', alignItems: 'center', flexDirection: dirMap[props.labelPos] || 'row' }
|
|
34
|
+
})
|
|
35
|
+
const labelStyle = computed(() => {
|
|
36
|
+
return {
|
|
37
|
+
color: props.labelColor || '',
|
|
38
|
+
fontSize: toPx(props.labelSize),
|
|
39
|
+
marginLeft: props.labelPos === 'right' ? toPx(props.space) : 0,
|
|
40
|
+
marginTop: props.labelPos === 'bottom' ? toPx(props.space) : 0,
|
|
41
|
+
marginRight: props.labelPos === 'left' ? toPx(props.space) : 0,
|
|
42
|
+
marginBottom: props.labelPos === 'top' ? toPx(props.space) : 0
|
|
43
|
+
}
|
|
44
|
+
})
|
|
45
|
+
const imgSrc = '__IMG_SRC__'
|
|
46
|
+
function onTap(e) {
|
|
47
|
+
emit('click', props.index)
|
|
48
|
+
if (props.stop && e && e.stopPropagation) e.stopPropagation()
|
|
49
|
+
}
|
|
50
|
+
</script>
|
|
51
|
+
<style scoped>
|
|
52
|
+
.icon__label { line-height: 1; }
|
|
53
|
+
</style>
|
package/dist/web/vue/index.js
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
export { default as IconAttachment } from './Attachment.vue';
|
|
2
|
-
export { default as IconBrush } from './Brush.vue';
|
|
2
|
+
export { default as IconBrush } from './Brush.vue';
|
|
3
|
+
export { default as IconEdit } from './Edit.vue';
|
|
4
|
+
export { default as IconFire } from './Fire.vue';
|