From bd88055563c2a695a0ff011b1bcf4195a5c2b8f2 Mon Sep 17 00:00:00 2001 From: devin Date: Wed, 22 Mar 2023 22:48:03 +0800 Subject: [PATCH 1/8] =?UTF-8?q?slide=20=E6=8F=92=E6=A7=BD=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/package.json | 2 +- .../src/components/slides/OSlides.vue | 28 +++++++++++-------- .../slides/__demo__/SlidesBasic.vue | 1 - .../opendesign/src/components/slides/types.ts | 26 +++++++++++++++++ 4 files changed, 43 insertions(+), 14 deletions(-) diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json index 09f53d01..2bdc8254 100644 --- a/packages/opendesign/package.json +++ b/packages/opendesign/package.json @@ -1,6 +1,6 @@ { "name": "@opensig/opendesign", - "version": "0.0.7", + "version": "0.0.8", "main": "lib/index.js", "module": "es/index.mjs", "types": "es/index.d.ts", diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue index 0d403b7e..cc8a929e 100644 --- a/packages/opendesign/src/components/slides/OSlides.vue +++ b/packages/opendesign/src/components/slides/OSlides.vue @@ -193,7 +193,7 @@ onUnmounted(() => {
-
+
{
-
-
+
+
-
- - - +
+
+ + + +
-
+
-
- - - +
+
+ + + +
diff --git a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue index c8a28dd6..afffa0d0 100644 --- a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue +++ b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue @@ -38,7 +38,6 @@ const onChange = (now: number, last: number) => { width: 50%; margin: auto; height: 200px; - background-color: red; } .slide-item2 { width: 100%; diff --git a/packages/opendesign/src/components/slides/types.ts b/packages/opendesign/src/components/slides/types.ts index 1481c9e4..9b3a1691 100644 --- a/packages/opendesign/src/components/slides/types.ts +++ b/packages/opendesign/src/components/slides/types.ts @@ -27,6 +27,32 @@ export const slidesProps = { type: Number, default: 5000 }, + /** + * 是否显示切换箭头 + */ + arrow: { + type: Boolean, + default: true + }, + /** + * 设置切换箭头容器类 + */ + arrowWrapClass: { + type: String + }, + /** + * 是否显示指示器 + */ + indicator: { + type: Boolean, + default: true + }, + /** + * 设置指示器容器类 + */ + indicatorWrapClass: { + type: String + } }; export type SlidesPropsT = ExtractPropTypes; -- Gitee From b2c59d8e30e28abe1e6951f6ca1004a53e1fcb34 Mon Sep 17 00:00:00 2001 From: devin Date: Thu, 23 Mar 2023 14:50:38 +0800 Subject: [PATCH 2/8] script --- packages/scripts/package.json | 2 +- packages/scripts/src/clean-svg/config.ts | 35 +++++++ packages/scripts/src/clean-svg/index.ts | 91 +++++++++++++++++++ .../src/{gen-icons => gen-icon}/config.ts | 0 .../src/{gen-icons => gen-icon}/index.ts | 39 +++----- .../src/{gen-tokens => gen-token}/index.ts | 0 packages/scripts/src/index.ts | 30 ++++-- 7 files changed, 160 insertions(+), 37 deletions(-) create mode 100644 packages/scripts/src/clean-svg/config.ts create mode 100644 packages/scripts/src/clean-svg/index.ts rename packages/scripts/src/{gen-icons => gen-icon}/config.ts (100%) rename packages/scripts/src/{gen-icons => gen-icon}/index.ts (85%) rename packages/scripts/src/{gen-tokens => gen-token}/index.ts (100%) diff --git a/packages/scripts/package.json b/packages/scripts/package.json index a6b027fc..39de3914 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -1,6 +1,6 @@ { "name": "@opensig/opensig-scripts", - "version": "0.0.5", + "version": "0.0.6", "description": "opendesign component Scripts", "main": "dist/index.js", "bin": "dist/index.js", diff --git a/packages/scripts/src/clean-svg/config.ts b/packages/scripts/src/clean-svg/config.ts new file mode 100644 index 00000000..cbc6279d --- /dev/null +++ b/packages/scripts/src/clean-svg/config.ts @@ -0,0 +1,35 @@ +import type { Config, PluginConfig } from 'svgo'; + +export interface IconsConfig { + svgo: Config; + input: string; + output: string; +} +export const basePlugins: PluginConfig[] = [ + { + name: 'preset-default', + params: { + overrides: { + // 不移除view-box属性 + removeViewBox: false, + }, + }, + }, + 'removeStyleElement', + 'removeScriptElement', + 'removeDimensions', + 'sortAttrs', + 'removeUselessStrokeAndFill', + { + name: 'removeAttrs', + params: { + attrs: ['class'], + }, + }, +]; + +export const defaultConfig: IconsConfig = { + svgo: { plugins: basePlugins }, + input: './src/icons/svgs', + output: './src/icons/output/', +}; diff --git a/packages/scripts/src/clean-svg/index.ts b/packages/scripts/src/clean-svg/index.ts new file mode 100644 index 00000000..2e5c1a64 --- /dev/null +++ b/packages/scripts/src/clean-svg/index.ts @@ -0,0 +1,91 @@ +import path from 'path'; +import { defaultConfig, IconsConfig } from './config'; +import glob from 'glob'; +import { optimize } from 'svgo'; +import fs from 'fs-extra'; + +/** + * 读取配置文件 + */ +async function readConfig(cfg: string) { + const base = process.cwd(); + const configFile = path.resolve(base, cfg || './clear-svg.config.ts'); + const cfgDir = path.dirname(configFile); + + const configData: IconsConfig = await require(configFile); + + const config = Object.assign(defaultConfig, configData); + + config.input = path.resolve(cfgDir, config.input); + config.output = path.resolve(cfgDir, config.output); + + return { + file: configFile, + data: config, + }; +} + +interface IconItem { + name: string; + path: string; +} + +/** + * 读取svg图标文件列表 + */ +function readSvgData(cfg: IconsConfig) { + const svgs: Array = []; + const files = glob.sync('./**/*.svg', { + cwd: cfg.input, + absolute: true, + }); + + files.forEach((file) => { + const name = path.basename(file.replace(/\s/g, '')); + svgs.push({ + name: name, + path: file, + }); + }); + return svgs; +} + +/** + * 创建图标组件 + * @param icons 图标列表 + */ +function generateSvgs(icons: Array, cfg: IconsConfig) { + console.log('generating icon components...'); + // 清空构建目录 + fs.emptyDirSync(cfg.output); + + // 遍历生成图标组件 + icons.forEach((item) => { + const file = fs.readFileSync(item.path, 'utf-8'); + const svgoCfg = cfg.svgo; + + const rlt = optimize(file, { + path: item.path, + ...svgoCfg, + }); + + fs.outputFile(path.resolve(cfg.output, item.name), rlt.data, (err) => { + if (err) { + console.log(`build [${item.name}] failed: ${err}`); + } else { + console.log(`build [${item.name}] success`); + } + }); + }); +} +export default async function main(options: { config: string }) { + const { data } = await readConfig(options.config); + + console.log('search svg...'); + const svgs = readSvgData(data); + console.log(`find ${svgs.length} svg files...`); + + if (svgs.length > 0) { + generateSvgs(svgs, data); + } +} diff --git a/packages/scripts/src/gen-icons/config.ts b/packages/scripts/src/gen-icon/config.ts similarity index 100% rename from packages/scripts/src/gen-icons/config.ts rename to packages/scripts/src/gen-icon/config.ts diff --git a/packages/scripts/src/gen-icons/index.ts b/packages/scripts/src/gen-icon/index.ts similarity index 85% rename from packages/scripts/src/gen-icons/index.ts rename to packages/scripts/src/gen-icon/index.ts index 90e8caab..22c01cf8 100644 --- a/packages/scripts/src/gen-icons/index.ts +++ b/packages/scripts/src/gen-icon/index.ts @@ -4,16 +4,6 @@ import glob from 'glob'; import { toPascalCase } from '../utils'; import { optimize } from 'svgo'; import fs from 'fs-extra'; -export interface TokenConfigT { - output: string, - prefix: string, - themes: string[], - defaultTheme: string, - tokenFile: string[], - codeSnippetsFile: string -} - -// TODO： 支持指定配置文件 /** * 读取配置文件 @@ -32,7 +22,7 @@ async function readConfig(cfg: string) { return { file: configFile, - data: config + data: config, }; } @@ -43,25 +33,24 @@ enum SvgType { } interface IconItem { - type: SvgType, - name: string, - componentName: string, - path: string + type: SvgType; + name: string; + componentName: string; + path: string; } /** * 读取svg图标文件列表 */ function readSvgData(cfg: IconsConfig) { - const svgs: Array = []; - [SvgType.FILL, SvgType.STROKE, SvgType.COLOR].forEach(key => { + [SvgType.FILL, SvgType.STROKE, SvgType.COLOR].forEach((key) => { const files = glob.sync(`${key}/**/*.svg`, { cwd: cfg.input, absolute: true, }); - files.forEach(file => { + files.forEach((file) => { const name = `icon-${path.basename(file.replace(/\s/g, ''), '.svg')}`; svgs.push({ type: key, @@ -70,7 +59,6 @@ function readSvgData(cfg: IconsConfig) { path: file, }); }); - }); return svgs; } @@ -85,7 +73,7 @@ function generateIconComponents(icons: Array, cfg: IconsConfig) { fs.emptyDirSync(cfg.output); // 遍历生成图标组件 - icons.forEach(item => { + icons.forEach((item) => { const file = fs.readFileSync(item.path, 'utf-8'); const svgoCfg = cfg.svgo[item.type]; @@ -98,10 +86,10 @@ function generateIconComponents(icons: Array, cfg: IconsConfig) { name: item.name, componentName: item.componentName, svg: rlt.data, - type: item.type + type: item.type, }); - fs.outputFile(path.resolve(cfg.output, `${item.componentName}/${item.componentName}.vue`), content, err => { + fs.outputFile(path.resolve(cfg.output, `${item.componentName}/${item.componentName}.vue`), content, (err) => { if (err) { console.log(`build [${item.componentName}] failed: ${err}`); } else { @@ -110,7 +98,7 @@ function generateIconComponents(icons: Array, cfg: IconsConfig) { }); const idxContent = `export { default as ${item.componentName} } from './${item.componentName}.vue';`; - fs.outputFile(path.resolve(cfg.output, `${item.componentName}/index.ts`), idxContent, err => { + fs.outputFile(path.resolve(cfg.output, `${item.componentName}/index.ts`), idxContent, (err) => { if (err) { console.log(`build index [${item.componentName}] failed: ${err}`); } else { @@ -118,7 +106,6 @@ function generateIconComponents(icons: Array, cfg: IconsConfig) { } }); }); - } /** * 创建入口文件 @@ -127,7 +114,7 @@ function generateIconComponents(icons: Array, cfg: IconsConfig) { function generateExportIndex(icons: Array, output: string) { console.log('generating index.ts...'); - const content = icons.map(item => { + const content = icons.map((item) => { return `export { ${item.componentName} } from './${item.componentName}';`; }); @@ -147,4 +134,4 @@ export default async function main(options: { config: string }) { generateIconComponents(svgs, data); generateExportIndex(svgs, data.output); } -} \ No newline at end of file +} diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-token/index.ts similarity index 100% rename from packages/scripts/src/gen-tokens/index.ts rename to packages/scripts/src/gen-token/index.ts diff --git a/packages/scripts/src/index.ts b/packages/scripts/src/index.ts index fa477d30..19438ce0 100644 --- a/packages/scripts/src/index.ts +++ b/packages/scripts/src/index.ts @@ -2,44 +2,54 @@ import path from 'path'; import fs from 'fs-extra'; import { Command } from 'commander'; -import buildIcons from './gen-icons'; +import buildIcons from './gen-icon'; +import cleanSvgs from './clean-svg'; import buildComponents from './build-components'; import buildStyle from './build-style'; -import genTokens from './gen-tokens'; +import genTokens from './gen-token'; const program = new Command(); const packageStr = fs.readFileSync(path.resolve(__dirname, '../package.json'), 'utf-8'); const packageJson = JSON.parse(packageStr); -program.name('opensig-scripts') - .version(packageJson.version) - .usage('command [options] '); +program.name('opensig-scripts').version(packageJson.version).usage('command [options] '); -program.command('gen:icon') +program + .command('gen:icon') .description('generate opendesign icon components') .option('-c, --config ', 'config file') .action((options) => { buildIcons(options); }); +program + .command('clean:svg') + .description('generate opendesign icon components') + .option('-c, --config ', 'config file') + .action((options) => { + cleanSvgs(options); + }); -program.command('build:component') +program + .command('build:component') .description('build opendesign components') .action(() => { buildComponents(); }); -program.command('build:style') +program + .command('build:style') .description('build opendesign style') .action(() => { buildStyle(); }); -program.command('gen:token') +program + .command('gen:token') .description('generate opendesign tokens') .option('-c, --config ', 'config file') .action((options) => { genTokens(options); }); -program.parse(process.argv); \ No newline at end of file +program.parse(process.argv); -- Gitee From 04d80248f6727727edb64bcaf0fffe5da2431e34 Mon Sep 17 00:00:00 2001 From: devin Date: Thu, 23 Mar 2023 14:51:02 +0800 Subject: [PATCH 3/8] =?UTF-8?q?slide=20=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/package.json | 1 + .../opendesign/src/components/_shared/dom.ts | 23 +++--- .../figure/__demo__/FigureBasic.vue | 9 +-- .../src/components/figure/style/index.scss | 3 +- .../src/components/slides/OSlides.vue | 72 +++++++++++++++---- .../slides/__demo__/SlidesBasic.vue | 13 ++-- .../src/components/slides/style/index.scss | 12 ++-- .../src/components/slides/style/var.scss | 6 +- .../opendesign/src/icons/cleansvg.config.ts | 4 ++ 9 files changed, 99 insertions(+), 44 deletions(-) create mode 100644 packages/opendesign/src/icons/cleansvg.config.ts diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json index 2bdc8254..64ba1365 100644 --- a/packages/opendesign/package.json +++ b/packages/opendesign/package.json @@ -18,6 +18,7 @@ "scripts": { "gen:token": "opensig-scripts gen:token --config ./src/tokens/token.config.ts", "gen:icon": "opensig-scripts gen:icon --config ./src/icons/icon.config.ts", + "clean:svg": "opensig-scripts clean:svg --config ./src/icons/cleansvg.config.ts", "build:component": "opensig-scripts build:component", "build:style": "opensig-scripts build:style", "build": "pnpm gen:icon && pnpm build:component && pnpm build:style" diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts index 8563d9f0..ead36de1 100644 --- a/packages/opendesign/src/components/_shared/dom.ts +++ b/packages/opendesign/src/components/_shared/dom.ts @@ -3,8 +3,8 @@ import { isArray } from './is'; export type DirectionT = 'left' | 'right' | 'top' | 'bottom'; export function isElement(el: any) { - return (typeof HTMLElement === 'object') - ? (el instanceof HTMLElement) + return typeof HTMLElement === 'object' + ? el instanceof HTMLElement : !!(el && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 9) && typeof el.nodeName === 'string'); } @@ -27,7 +27,7 @@ export function getScroll(el: HTMLElement | Window = window) { if (!el) { return { scrollLeft: 0, - scrollTop: 0 + scrollTop: 0, }; } const isroot = isDocumentElement(el); @@ -63,7 +63,7 @@ export function getRelativeBounding(e: DOMRect, c: DOMRect) { offsetBottom: e.bottom - c.top, }; } -export type RelativeRect = ReturnType +export type RelativeRect = ReturnType; export function getElementSize(el: HTMLElement | Window) { return { @@ -84,13 +84,18 @@ export function getElementBorder(el: HTMLElement, dir?: DirectionT | DirectionT[ d = isArray(dir) ? dir : ['left', 'right', 'bottom', 'top']; } const rlt: { - left?: number, - right?: number, - top?: number, - bottom?: number, + left?: number; + right?: number; + top?: number; + bottom?: number; } = {}; - d.forEach(k => { + d.forEach((k) => { rlt[k] = parseFloat(style.getPropertyValue(`border-${k}-width`)); }); return rlt; } + +export function getCssVariable(key: string, el?: HTMLElement) { + const ele = el ? el : document.documentElement; + return ele.style.getPropertyValue(key); +} diff --git a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue index 3a127b6a..baeededf 100644 --- a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue +++ b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue @@ -5,10 +5,10 @@ const img = 'https://www.hiascend.com/p/resource/202303/0a66367d573f4369a6d16090