Skip to content

Commit

Permalink
fix(ui/icon): 增加复制icon功能
Browse files Browse the repository at this point in the history
affects: @varlet/cli, @varlet/icons, @varlet/ui
  • Loading branch information
haoziqaq committed Jan 7, 2021
1 parent a6bba67 commit 5282655
Show file tree
Hide file tree
Showing 10 changed files with 155 additions and 72 deletions.
48 changes: 26 additions & 22 deletions packages/varlet-cli/lib/index.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
#!/usr/bin/env node
'use strict'
Object.defineProperty(exports, '__esModule', { value: true })
var commander_1 = require('commander')
var dev_1 = require('./commands/dev')
var build_1 = require('./commands/build')
var compile_1 = require('./commands/compile')
var create_1 = require('./commands/create')
var jest_1 = require('./commands/jest')
commander_1.command('dev').description('Run varlet development environment').action(dev_1.dev)
commander_1.command('build').description('Build varlet site for production').action(build_1.build)
commander_1
.command('compile')
.description('Compile varlet components library code')
.option('-w, --watch', 'Watch files change auto compile')
.action(compile_1.compile)
commander_1.command('create <name>').description('Create a component directory').action(create_1.create)
commander_1
.command('jest')
.option('-c, --component [componentName]', 'Run Jest in component directory')
.description('Run Jest in work directory')
.action(jest_1.jest)
commander_1.parse()
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var commander_1 = require("commander");
var dev_1 = require("./commands/dev");
var build_1 = require("./commands/build");
var compile_1 = require("./commands/compile");
var create_1 = require("./commands/create");
var jest_1 = require("./commands/jest");
commander_1.command('dev')
.description('Run varlet development environment')
.action(dev_1.dev);
commander_1.command('build')
.description('Build varlet site for production')
.action(build_1.build);
commander_1.command('compile')
.description('Compile varlet components library code')
.option('-w, --watch', 'Watch files change auto compile')
.action(compile_1.compile);
commander_1.command('create <name>')
.description('Create a component directory')
.action(create_1.create);
commander_1.command('jest')
.option('-c, --component [componentName]', 'Run Jest in component directory')
.description('Run Jest in work directory')
.action(jest_1.jest);
commander_1.parse();
1 change: 1 addition & 0 deletions packages/varlet-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"chalk": "^4.1.0",
"chokidar": "^3.4.3",
"clean-webpack-plugin": "^3.0.0",
"clipboard": "^2.0.6",
"commander": "^6.2.0",
"css-loader": "^5.0.0",
"fork-ts-checker-webpack-plugin": "^5.2.1",
Expand Down
4 changes: 2 additions & 2 deletions packages/varlet-cli/src/config/webpack.base.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import { createPostcssOptions } from './postcss.config'
import { ForkTsCheckerWebpackPlugin } from 'fork-ts-checker-webpack-plugin/lib/ForkTsCheckerWebpackPlugin'
import { VueLoaderPlugin } from 'vue-loader'
import { pathExistsSync, writeFileSync } from 'fs-extra'
import { pathExistsSync } from 'fs-extra'
import { WebpackPluginInstance } from 'webpack'
import { isDev } from '../shared/env'
import { accessProperty } from '../shared/fsUtils'
Expand Down Expand Up @@ -175,7 +175,7 @@ export function createBaseConfig() {
{
test: /\.less$/,
use: [...createCSSLoaders(), 'less-loader'],
},
}
],
},
}
Expand Down
16 changes: 13 additions & 3 deletions packages/varlet-icons/lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ async function build() {

await Promise.all([ensureDir(FONTS_DIR), ensureDir(CSS_DIR)])

const iconNames = readdirSync(SVG_DIR).map((svgName) => {
const icons = readdirSync(SVG_DIR).map((svgName) => {
const i = svgName.indexOf('-')
const extIndex = svgName.lastIndexOf('.')

Expand Down Expand Up @@ -58,21 +58,31 @@ async function build() {
-webkit-font-smoothing: antialiased;
}
${iconNames
${icons
.map((icon) => {
return `.${namespace}-${icon.name}::before {
content: "\\${icon.pointCode}";
}`
})
.join('\n\n')}
`
await Promise.all([

const iconNames = icons.map((iconName) => ` "${iconName.name}"`)

const indexTemplate = `\
module.exports = [
${iconNames.join(',\n')}
]
`

await Promise.all([
writeFile(resolve(FONTS_DIR, `${fileName}-webfont.ttf`), ttf),
writeFile(resolve(FONTS_DIR, `${fileName}-webfont.eot`), eot),
writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff`), woff),
writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff2`), woff2),
writeFile(resolve(CSS_DIR, `${fileName}.css`), cssTemplate),
writeFile(resolve(CSS_DIR, `${fileName}.less`), cssTemplate),
writeFile(resolve(DIST_DIR, 'index.js'), indexTemplate)
])

console.log('build success!')
Expand Down
1 change: 1 addition & 0 deletions packages/varlet-icons/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"name": "@varlet/icons",
"version": "0.7.0",
"description": "Icons of varlet",
"main": "dist/index.js",
"bin": {
"varlet-icons": "lib/index.js"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/varlet-ui/src/button/button.less
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
justify-content: center;
align-items: center;
outline: none;
border: thin solid transparent;
border: none;
line-height: 1.2;
border-radius: @button-border-radius;
user-select: none;
transition: box-shadow .2s linear;
transition: box-shadow .1s linear;
will-change: box-shadow;

&:active {
Expand Down
8 changes: 4 additions & 4 deletions packages/varlet-ui/src/dialog/dialog.less
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
@import "../styles/var";

@dialog-width: 270px;
@dialog-width: 280px;
@dialog-padding: 20px;
@dialog-border-radius: 2px;

@dialog-message-padding: 26px 0;
@dialog-message-padding: 12px 0;
@dialog-message-line-height: 24px;

@dialog-button-margin-left: 6px;
@dialog-confirm-button-color: #005CAF;
@dialog-cancel-button-color: #005CAF;
@dialog-confirm-button-color: @color-primary;
@dialog-cancel-button-color: @color-primary;

.var-dialog {
width: @dialog-width;
Expand Down
104 changes: 70 additions & 34 deletions packages/varlet-ui/src/icon/example/index.vue
Original file line number Diff line number Diff line change
@@ -1,49 +1,85 @@
<template>
<var-icon :name="name" :transition="transition" color="red" size="30px" />
<div class="example">
<app-type>icons列表</app-type>
<div class="example__icons">
<div
class="example__icon"
v-for="iconName in iconNames"
:key="iconName"
v-ripple
:data-clipboard-text="iconName"
>
<var-icon :name="iconName" />
<div class="example__icon-name">
{{ iconName }}
</div>
</div>
</div>

<div>
<var-button @click="toggle">toggle</var-button>
<var-button @click="toggleTransition">toggle transition</var-button>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue'
import { defineComponent, reactive, onMounted } from 'vue'
import Icon from '..'
import Button from '../../button'
import Ripple from '../../ripple'
import Snackbar from '../../snackbar'
const Clipboard = require('clipboard')
export default defineComponent({
name: 'IconExample',
components: {
[Icon.name]: Icon,
[Button.name]: Button,
},
setup() {
const name: Ref<string> = ref('checkbox-marked-circle')
const show: Ref<boolean> = ref(true)
const transition: Ref<number> = ref(0)
return {
name,
show,
transition,
toggleTransition() {
transition.value = 300
name.value = name.value === 'checkbox-marked-circle' ? 'information-outline' : 'checkbox-marked-circle'
},
toggle() {
transition.value = 0
name.value = name.value === 'checkbox-marked-circle' ? 'information-outline' : 'checkbox-marked-circle'
},
}
},
name: 'IconExample',
components: {
[Icon.name]: Icon,
[Button.name]: Button
},
directives: { Ripple },
setup() {
const iconNames: string[] = reactive(require('@varlet/icons'))
onMounted(() => {
const clipboard = new Clipboard('.example__icon', {
text(trigger) {
const iconName = trigger.getAttribute('data-clipboard-text')
return `<var-icon name="${iconName}" />`
}
})
clipboard.on('success', (e: any) => {
Snackbar.success(`成功完成复制${e.text}`)
})
})
return {
iconNames
}
}
})
</script>

<style scoped>
<style lang="less" scoped>
.example {
background: antiquewhite;
display: flex;
flex-direction: column;
align-items: center;
&__icons {
display: flex;
flex-wrap: wrap;
}
&__icon {
display: flex;
flex-direction: column;
align-items: center;
width: 33%;
padding: 10px;
}
&__icon-name {
font-size: 12px;
text-align: center;
}
}
</style>
10 changes: 5 additions & 5 deletions packages/varlet-ui/src/styles/var.less
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
@icon-size-lg: 22px;

//颜色
@color-primary: #005CAF;
@color-info: #4496ec;
@color-success: #4CAF50;
@color-warning: #FB8C00;
@color-danger: #F44336;
@color-primary: #1E88E5;
@color-info: #0097A7;
@color-success: #43A047;
@color-warning: #FF6F00;
@color-danger: #E53935;
@color-background-base: #F5F5F5;
@color-font-md: #888;
31 changes: 31 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4096,6 +4096,15 @@ cli-width@^2.0.0:
resolved "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==

clipboard@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
dependencies:
good-listener "^1.2.2"
select "^1.1.2"
tiny-emitter "^2.0.0"

cliui@^5.0.0:
version "5.0.0"
resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
Expand Down Expand Up @@ -4952,6 +4961,11 @@ delayed-stream@~1.0.0:
resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=

delegate@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==

delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
Expand Down Expand Up @@ -6565,6 +6579,13 @@ gonzales-pe@^4.3.0:
dependencies:
minimist "^1.2.5"

good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
dependencies:
delegate "^3.1.2"

graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4:
version "4.2.4"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
Expand Down Expand Up @@ -11208,6 +11229,11 @@ select-hose@^2.0.0:
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=

select@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=

selfsigned@^1.10.7:
version "1.10.8"
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
Expand Down Expand Up @@ -12286,6 +12312,11 @@ timers-browserify@^2.0.4:
dependencies:
setimmediate "^1.0.4"

tiny-emitter@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==

tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
Expand Down

0 comments on commit 5282655

Please sign in to comment.