@phill-component/icons 1.0.3 → 1.0.4

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.
Files changed (14) hide show
  1. package/dist/mobile/uvue/icon-brush/brush.png +0 -0
  2. package/dist/mobile/uvue/icon-brush/icon-brush.uvue +75 -0
  3. package/dist/mobile/uvue/icon-oblique-line/icon-oblique-line.uvue +75 -0
  4. package/dist/mobile/uvue/icon-oblique-line/oblique-line.png +0 -0
  5. package/dist/mobile/uvue/icon-zoom-in/icon-zoom-in.uvue +75 -0
  6. package/dist/mobile/uvue/icon-zoom-in/zoom-in.png +0 -0
  7. package/dist/mobile/vue/icon-brush.vue +58 -0
  8. package/dist/mobile/vue/icon-oblique-line.vue +58 -0
  9. package/dist/mobile/vue/icon-zoom-in.vue +58 -0
  10. package/dist/web/vue/Brush.vue +53 -0
  11. package/dist/web/vue/ObliqueLine.vue +53 -0
  12. package/dist/web/vue/ZoomIn.vue +53 -0
  13. package/dist/web/vue/index.js +4 -1
  14. package/package.json +1 -1
package/dist/mobile/uvue/icon-brush/icon-brush.uvue ADDED
@@ -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="M33 13h7a1 1 0 0 1 1 1v12.14a1 1 0 0 1-.85.99l-21.3 3.24a1 1 0 0 0-.85.99V43"/><path stroke="currentColor" stroke-width="2" d="M7 18V8c0-.552.444-1 .997-1H32.01c.552 0 .99.447.99 1v10.002A1 1 0 0 1 32 19H8a1 1 0 0 1-1-1z"/></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-brush/brush.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>
package/dist/mobile/uvue/icon-oblique-line/icon-oblique-line.uvue ADDED
@@ -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="M29.506 6.502 18.494 41.498"/></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-oblique-line/oblique-line.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>
package/dist/mobile/uvue/icon-zoom-in/icon-zoom-in.uvue ADDED
@@ -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="M32.607 32.607A14.95 14.95 0 0 0 37 22c0-8.284-6.716-15-15-15S7 13.716 7 22s6.716 15 15 15c4.142 0 7.892-1.679 10.607-4.393zm0 0L41.5 41.5M29 22H15m7 7V15"/></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-zoom-in/zoom-in.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>
package/dist/mobile/vue/icon-brush.vue ADDED
@@ -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="M33 13h7a1 1 0 0 1 1 1v12.14a1 1 0 0 1-.85.99l-21.3 3.24a1 1 0 0 0-.85.99V43"/><path stroke="currentColor" stroke-width="2" d="M7 18V8c0-.552.444-1 .997-1H32.01c.552 0 .99.447.99 1v10.002A1 1 0 0 1 32 19H8a1 1 0 0 1-1-1z"/></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-brush/brush.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>
package/dist/mobile/vue/icon-oblique-line.vue ADDED
@@ -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="M29.506 6.502 18.494 41.498"/></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-oblique-line/oblique-line.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>
package/dist/mobile/vue/icon-zoom-in.vue ADDED
@@ -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="M32.607 32.607A14.95 14.95 0 0 0 37 22c0-8.284-6.716-15-15-15S7 13.716 7 22s6.716 15 15 15c4.142 0 7.892-1.679 10.607-4.393zm0 0L41.5 41.5M29 22H15m7 7V15"/></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-zoom-in/zoom-in.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>
package/dist/web/vue/Brush.vue ADDED
@@ -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="M33 13h7a1 1 0 0 1 1 1v12.14a1 1 0 0 1-.85.99l-21.3 3.24a1 1 0 0 0-.85.99V43"/><path stroke="currentColor" stroke-width="2" d="M7 18V8c0-.552.444-1 .997-1H32.01c.552 0 .99.447.99 1v10.002A1 1 0 0 1 32 19H8a1 1 0 0 1-1-1z"/></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/ObliqueLine.vue ADDED
@@ -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="M29.506 6.502 18.494 41.498"/></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/ZoomIn.vue ADDED
@@ -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="M32.607 32.607A14.95 14.95 0 0 0 37 22c0-8.284-6.716-15-15-15S7 13.716 7 22s6.716 15 15 15c4.142 0 7.892-1.679 10.607-4.393zm0 0L41.5 41.5M29 22H15m7 7V15"/></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,3 +1,4 @@
1
+ export { default as IconBrush } from './Brush.vue';
1
2
  export { default as IconCalendar } from './Calendar.vue';
2
3
  export { default as IconCopy } from './Copy.vue';
3
4
  export { default as IconEdit } from './Edit.vue';
@@ -7,7 +8,9 @@ export { default as IconFindReplace } from './FindReplace.vue';
7
8
  export { default as IconH6 } from './H6.vue';
8
9
  export { default as IconHighlight } from './Highlight.vue';
9
10
  export { default as IconHome } from './Home.vue';
11
+ export { default as IconObliqueLine } from './ObliqueLine.vue';
10
12
  export { default as IconOriginalSize } from './OriginalSize.vue';
11
13
  export { default as IconSetting } from './Setting.vue';
12
14
  export { default as IconTask } from './Task.vue';
13
- export { default as IconToLandscape } from './ToLandscape.vue';
15
+ export { default as IconToLandscape } from './ToLandscape.vue';
16
+ export { default as IconZoomIn } from './ZoomIn.vue';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phill-component/icons",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "Unified icons for phillUI mobile and pc libraries",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",