plain-design 0.0.97 → 1.0.0-beta.2

package/src/styles/data/scan.scss.ts

@@ -1,160 +0,0 @@
-const path = require("path")
-const fs = require("fs").promises
-// @ts-ignore
-const resolve = (filePath: string) => path.join(__dirname, "../../../", filePath)
-const utils = {path, fs, resolve, join: path.join}
-
-interface ScanOption {
-    path: string,
-    handleFile?: (fileRelativePath: string) => void
-    handleDirectory?: (directoryRelativePath: string) => void
-    excludeFileRegexp?: RegExp | RegExp[],
-    excludeDirectoryRegExp?: RegExp | RegExp[],
-}
-
-const ScanUtils = (() => {
-
-    /*获取文件状态，文件不存在则返回null*/
-    const getStat = async (filePath: string) => {
-        try {
-            return await fs.stat(filePath)
-        } catch (e) {
-            return null
-        }
-    }
-
-    /*将路径中的符号转成系统支持的路径分隔符*/
-    const formatPath = (filePath: string) => filePath.replace(/([\/\\])/g, path.sep)
-
-    /*扫描路径*/
-    async function scan({path, handleFile, handleDirectory, excludeFileRegexp, excludeDirectoryRegExp,}: ScanOption) {
-        path = utils.path.normalize(path)
-        const state = await getStat(path)
-        if (!!state) {
-            if (state.isFile()) {
-                if (!!excludeFileRegexp && (Array.isArray(excludeFileRegexp) ? excludeFileRegexp.some(i => i.test(path)) : excludeFileRegexp.test(path))) {
-                    return
-                }
-                !!handleFile && await handleFile(path)
-            } else {
-                if (!!excludeDirectoryRegExp && (Array.isArray(excludeDirectoryRegExp) ? excludeDirectoryRegExp.some(i => i.test(path)) : excludeDirectoryRegExp.test(path))) {
-                    return
-                }
-                !!handleDirectory && await handleDirectory(path)
-                const files = await utils.fs.readdir(path)
-                await Promise.all(files.map((file: string) => scan({
-                    path: utils.join(path, file),
-                    handleFile,
-                    handleDirectory,
-                    excludeFileRegexp,
-                    excludeDirectoryRegExp,
-                })))
-            }
-        }
-    }
-
-    return {
-        scan,
-    }
-})();
-
-(async () => {
-    const output = resolve("src/styles/data/scan.scss.json")
-    const packages = resolve("src/packages")
-    const entry = resolve('src/index.ts')
-    const globalImportFilePath = resolve('src/styles/global-import.scss')
-
-    /*文件path映射code对象*/
-    const pathToCode: Record<string, string> = {}
-
-    /*属于依赖的scss文件，最后输出的数据中，会去除这里出现的依赖文件*/
-    let dependList: string[] = []
-
-    /*扫描scss，如果scss引入了其他的scss文件，一并输出到结果去*/
-    const resolveScssCode = async (filePath: string): Promise<string> => {
-        let code = (await utils.fs.readFile(filePath)).toString("utf-8")
-        // .replace(/([\r\n])/g, '')
-        if (code.indexOf('@import') > -1) {
-            const regexp = /@import "(.*?)";?/g
-            let match = regexp.exec(code)
-            let dependencies: {
-                input: string,
-                path: string,
-            }[] = []
-            while (!!match) {
-                let name = match[1]
-                if (!name.endsWith('.scss')) {name = name + '.scss'}
-                const p = utils.path.resolve(utils.path.dirname(filePath), name)
-                dependencies.push({
-                    input: match[0],
-                    path: p,
-                })
-                dependList.push(p.replace(/[\\\/]/g, '/'))
-                match = regexp.exec(code)
-            }
-            await Promise.all(dependencies.map(async ({input, path}) => {
-                const subCode = await resolveScssCode(path)
-                code = code.replace(input, subCode)
-            }))
-        }
-        return code
-    }
-
-    await ScanUtils.scan({
-        path: packages,
-        handleFile: async (path: string) => {
-            const name = path.replace(/[\\\/]/g, '/')
-            if (!!pathToCode[name]) return
-            const basename = utils.path.basename(path)
-            const extname = utils.path.extname(basename)
-            if (extname !== '.scss') return;
-            pathToCode[name] = await resolveScssCode(path)
-        },
-    })
-
-    pathToCode['plain-loading'] = await resolveScssCode(utils.resolve('node_modules/plain-loading/src/index.scss'))
-    pathToCode['click-wave'] = await resolveScssCode(utils.resolve('src/directives/ClickWave/click-wave.scss'))
-
-    const compReg = /src\/packages\/(.*?)\/.*/
-
-    let data = Object.entries(pathToCode)
-        .filter(([path]) => dependList.indexOf(path) === -1)
-        .map(([path, source]) => {
-            const match = compReg.exec(path)
-            return {
-                source,
-                component: !match ? 'no component!' : match[1],
-            }
-        })
-        .reduce((prev, item) => {
-            if (!prev[item.component]) prev[item.component] = []
-            prev[item.component].push(item.source)
-            return prev
-        }, {} as Record<string, string[]>)
-
-    const sortIndex = await new Promise<Record<string, number>>(async (resolve, reject) => {
-        try {
-            const entryContent = (await fs.readFile(entry)).toString('utf-8')
-            let regexp = /\.\/packages\/(.*?)(['"])/g
-            let count = 0
-            let ret: Record<string, number> = {}
-            let match = regexp.exec(entryContent)
-            while (!!match) {
-                ret[match[1]] = count++
-                match = regexp.exec(entryContent)
-            }
-            resolve(ret)
-        } catch (e) {
-            console.error(e)
-        }
-    })
-    const packagesScss = Object.entries(data).map(([name, codes]) => ({
-        name, codes, seq: sortIndex[name] == null ? 9999 : sortIndex[name],
-    })).sort((a, b) => a.seq - b.seq)
-    const globalImport = await resolveScssCode(globalImportFilePath)
-
-    await fs.writeFile(output, JSON.stringify({
-        globalImport,
-        packagesScss,
-    }, null, 2))
-})();

package/src/styles/global-import.scss

@@ -1,12 +0,0 @@
-@import "./main";
-@import "./theme/blue";
-
-$themes: map_merge($theme-default, $theme-blue);
-
-@mixin theme {
-  @each $curThemeName, $curTheme in $themes {
-    @include generateThemeContent($curThemeName, $curTheme) {
-      @content;
-    }
-  }
-}

package/src/styles/main.scss

@@ -1,104 +0,0 @@
-@import "./theme/default";
-
-$dt: map_get($theme-default, '');
-$generate_default: true;
-
-@function plv($key) {
-  @if (map_has_key($globalTheme, $key)) {
-    @return map-get($globalTheme, $key);
-  } @else {
-    @return map-get($dt, $key);
-  }
-}
-
-@mixin generateThemeContent($name,$theme) {
-  $globalTheme: $theme !global;
-  $globalThemeName: $name !global;
-
-  $colorPrimary: plv(colorPrimary) !global;
-  $colorPrimaryLight: mix(white, $colorPrimary, 85%) !global;
-  $colorSuccess: plv(colorSuccess) !global;
-  $colorWarn: plv(colorWarn) !global;
-  $colorError: plv(colorError) !global;
-  $colorInfo: plv(colorInfo) !global;
-  $disabled: plv(disabled) !global;
-  $disabledLight: plv(disabledLight) !global;
-  $disabledDeep: plv(disabledDeep) !global;
-  $disabledText: plv(disabledText) !global;
-  $font: plv(font) !global;
-  $ibc: plv(ibc) !global;
-  $ibl: plv(ibl) !global;
-  $itc: plv(itc) !global;
-  $itl: plv(itl) !global;
-  $ihc: plv(ihc) !global;
-  $ipc: plv(ipc) !global;
-  $icc: plv(icc) !global;
-  $transitionFlexible: plv(transitionFlexible) !global;
-  $transition: plv(transition) !global;
-  $transition2: plv(transition2) !global;
-  $shapeFillet: plv(shapeFillet) !global;
-  $shapeRound: plv(shapeRound) !global;
-  $shapeNone: plv(shapeNone) !global;
-  $popperRadius: plv(popperRadius) !global;
-  $boxshadow: plv(boxshadow) !global;
-  $boxshadowColor: plv(boxshadowColor) !global;
-
-  @if (str_length($name)>0) {
-    .theme-#{$name} {
-      @content;
-    }
-  } @else {
-    html {
-      @if ($generate_default) {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin statusMixin($component) {
-  @each $key in (Primary, Success, Warn, Error, Info) {
-
-    $value: plv(color#{$key}) !global;
-
-    $name: to-lower-case($key) !global;
-    &.pl-#{$component}-status-#{$name} {
-      @content;
-    }
-  }
-}
-
-@mixin shapeMixin($component) {
-  @each $key in (Fillet, Round, Square) {
-
-    $value: plv(shape#{$key}) !global;
-    $name: to-lower-case($key) !global;
-
-    &.pl-#{$component}-shape-#{$name} {
-      @content;
-    }
-  }
-}
-
-@mixin sizeMixin($component) {
-  @each $key in (Large, Normal, Mini) {
-
-    $value: plv(size#{$key}) !global;
-    $name: to-lower-case($key) !global;
-
-    &.pl-#{$component}-size-#{$name} {
-      @content;
-    }
-  }
-}
-
-@mixin public-style {
-  box-sizing: border-box;
-  font-weight: 400;
-  margin: 0;
-  padding: 0;
-}
-
-@mixin transition {
-  transition: all $transition 300ms;
-}

package/src/styles/public/public.scss

@@ -1,68 +0,0 @@
-@import "./normalize";
-@import "./transition";
-
-@include theme {
-  font-family: $font;
-
-  --color-primary: #{$colorPrimary};
-  --color-success: #{$colorSuccess};
-  --color-warn: #{$colorWarn};
-  --color-error: #{$colorError};
-  --color-info: #{$colorInfo};
-
-  --color-disabled: #{$disabled};
-  --color-disbaled-light: #{$disabledLight};
-  --color-disbaled-deep: #{$disabledDeep};
-  --color-disbaled-text: #{$disabledText};
-
-  --color-ibc: #{$ibc};
-  --color-ibl: #{$ibl};
-  --color-itc: #{$itc};
-  --color-itl: #{$itl};
-  --color-ihc: #{$ihc};
-  --color-ipc: #{$ipc};
-  --color-icc: #{$icc};
-
-  --transition-flexible: #{$transitionFlexible};
-  --transition: #{$transition};
-  --transition2: #{$transition2};
-
-  --shape-fllet: #{$shapeFillet};
-  --shape-round: #{$shapeRound};
-  --shape-none: #{$shapeNone};
-
-  --boxshadow: #{$boxshadow};
-  --boxshadow-color: #{$boxshadowColor};
-
-  .pl-text-primary {color: $colorPrimary;}
-  .pl-text-success {color: $colorSuccess;}
-  .pl-text-warn {color: $colorWarn;}
-  .pl-text-error {color: $colorError;}
-  .pl-text-info {color: $colorInfo;}
-
-  .pl-background-primary {background-color: $colorPrimary;}
-  .pl-background-success {background-color: $colorSuccess;}
-  .pl-background-warn {background-color: $colorWarn;}
-  .pl-background-error {background-color: $colorError;}
-  .pl-background-info {background-color: $colorInfo;}
-
-  .pl-background-disabled{background-color: $disabled;}
-  .pl-background-disabled-light {background-color: $disabledLight;}
-  .pl-background-disabled-deep {background-color: $disabledDeep;}
-  .pl-background-disabled-text {color: $disabledText;}
-
-  .pl-border-radius-fillet{border-radius: $shapeFillet;}
-  .pl-border-radius-round{border-radius: $shapeRound;}
-  .pl-border-radius-none{border-radius: $shapeNone;}
-
-  .pl-border-color{border-color: $ibc}
-  .pl-border-color-light{border-color: $ibl}
-
-  .pl-text-color{color: $itc}
-  .pl-text-color-light{color: $itl}
-  .pl-title-color{color: $ihc}
-  .pl-placeholder-color{color: $ipc}
-  .pl-icon-color{color: $icc}
-
-  .pl-boxshadow{box-shadow: $boxshadow}
-}

package/src/styles/public/transition.scss

@@ -1,127 +0,0 @@
-$transition: ease;
-
-/*---------------------------------------scale-------------------------------------------*/
-
-.pl-transition-scale-enter {
-    opacity: 0;
-    transform: scale(0.75);
-}
-
-.pl-transition-scale-enter-active {
-    opacity: 1;
-    transform: scale(1);
-}
-
-.pl-transition-scale-exit {
-    opacity: 1;
-    transform: scale(1);
-}
-
-.pl-transition-scale-exit-active {
-    opacity: 0;
-    transform: scale(0.75);
-}
-
-.pl-transition-scale-enter-active, .pl-transition-scale-exit-active {
-    transition: opacity 300ms linear, transform 300ms $transition;
-}
-
-/*---------------------------------------scale-y-------------------------------------------*/
-
-.pl-transition-scale-y-enter {
-    transform: scaleY(0);
-    opacity: 0;
-}
-
-.pl-transition-scale-y-enter-active {
-    transform: scaleY(1);
-    opacity: 1;
-}
-
-.pl-transition-scale-y-exit {
-    transform: scaleY(1);
-    opacity: 1;
-}
-
-.pl-transition-scale-y-exit-active {
-    transform: scaleY(0);
-    opacity: 0;
-}
-
-.pl-transition-scale-y-enter-active, .pl-transition-scale-y-exit-active {
-    transform-origin: top;
-    transition: opacity 300ms linear, transform 300ms $transition;
-}
-
-/*---------------------------------------fade-------------------------------------------*/
-
-.pl-transition-fade-enter {
-    opacity: 0;
-}
-
-.pl-transition-fade-enter-active {
-    opacity: 1;
-}
-
-.pl-transition-fade-exit {
-    opacity: 1;
-}
-
-.pl-transition-fade-exit-active {
-    opacity: 0;
-}
-
-.pl-transition-fade-enter-active, .pl-transition-fade-exit-active {
-    transition: opacity 300ms linear;
-}
-
-/*---------------------------------------slider-------------------------------------------*/
-
-[direction=horizontal] {
-
-    /*horizontal next*/
-    &.pl-transition-slide-next-enter {
-        transform: translate3d(100%, 0, 0);
-    }
-
-    &.pl-transition-slide-next-enter-active {
-        transform: translate3d(0, 0, 0);
-        transition: transform 150ms linear;
-    }
-
-    /*horizontal prev*/
-    &.pl-transition-slide-prev-enter {
-        transform: translate3d(-100%, 0, 0);
-    }
-
-    &.pl-transition-slide-prev-enter-active {
-        transform: translate3d(0, 0, 0);
-        transition: transform 150ms linear;
-    }
-}
-
-[direction=vertical] {
-
-    /*vertical next*/
-    &.pl-transition-slide-next-enter {
-        transform: translate3d(0, 100%, 0);
-    }
-
-    &.pl-transition-slide-next-enter-active {
-        transform: translate3d(0, 0, 0);
-    }
-
-    /*horizontal prev*/
-    &.pl-transition-slide-prev-enter {
-        transform: translate3d(0, -100%, 0);
-    }
-
-    &.pl-transition-slide-prev-enter-active {
-        transform: translate3d(0, 0, 0);
-        transition: transform 150ms linear;
-    }
-}
-
-.pl-collapse-transition {
-    transition: 0.3s height linear, 0.3s padding-top linear, 0.3s padding-bottom linear;
-}

package/src/styles/theme/blue.scss

@@ -1,20 +0,0 @@
-$theme-blue: (
-    /*'blue':(
-            colorPrimary: #409EFF,
-            colorSuccess: #67C23A,
-            colorWarn: #E6A23C,
-            colorError: #F56C6C,
-            colorInfo:#909399,
-
-            shapeFillet:4px,
-    ),
-    'violet':(
-            colorPrimary: #8A2BE2,
-            colorSuccess: #4caf50,
-            colorWarn: #ff9800,
-            colorError: #e91e63,
-            colorInfo:#000042,
-
-            shapeFillet:8px,
-    )*/
-);

package/src/styles/theme/color.scss

@@ -1,158 +0,0 @@
-/*red*/
-$red_1: #fff1f0;
-$red_2: #ffccc7;
-$red_3: #ffa39e;
-$red_4: #ff4d4f;
-$red_5: #ff4d4f;
-$red_6: #f5222d;
-$red_7: #cf1322;
-$red_8: #a8071a;
-$red_9: #820014;
-$red_10: #5c0011;
-
-/*volcano*/
-$volcano_1: #fff2e8;
-$volcano_2: #ffd8bf;
-$volcano_3: #ffbb96;
-$volcano_4: #ff9c6e;
-$volcano_5: #ff7a45;
-$volcano_6: #fa541c;
-$volcano_7: #d4380d;
-$volcano_8: #ad2102;
-$volcano_9: #871400;
-$volcano_10: #610b00;
-
-/*orange*/
-$orange_1: #fff7e6;
-$orange_2: #ffe7ba;
-$orange_3: #ffd591;
-$orange_4: #ffc069;
-$orange_5: #ffa940;
-$orange_6: #fa8c16;
-$orange_7: #d46b08;
-$orange_8: #ad4e00;
-$orange_9: #873800;
-$orange_10: #612500;
-
-/*gold*/
-$gold_1: #fffbe6;
-$gold_2: #fff1b8;
-$gold_3: #ffe58f;
-$gold_4: #ffd666;
-$gold_5: #ffc53d;
-$gold_6: #faad14;
-$gold_7: #d48806;
-$gold_8: #ad6800;
-$gold_9: #874d00;
-$gold_10: #613400;
-
-/*yellow*/
-$yellow_1: #feffe6;
-$yellow_2: #ffffb8;
-$yellow_3: #fffb8f;
-$yellow_4: #fff566;
-$yellow_5: #ffec3d;
-$yellow_6: #fadb14;
-$yellow_7: #d4b106;
-$yellow_8: #ad8b00;
-$yellow_9: #876800;
-$yellow_10: #614700;
-
-/*lime*/
-$lime_1: #fcffe6;
-$lime_2: #f4ffb8;
-$lime_3: #eaff8f;
-$lime_4: #d3f261;
-$lime_5: #bae637;
-$lime_6: #a0d911;
-$lime_7: #7cb305;
-$lime_8: #5b8c00;
-$lime_9: #3f6600;
-$lime_10: #254000;
-
-/*green*/
-$green_1: #f6ffed;
-$green_2: #d9f7be;
-$green_3: #b7eb8f;
-$green_4: #95de64;
-$green_5: #73d13d;
-$green_6: #52c41a;
-$green_7: #389e0d;
-$green_8: #237804;
-$green_9: #135200;
-$green_10: #092b00;
-
-/*cyan*/
-$cyan_1: #e6fffb;
-$cyan_2: #b5f5ec;
-$cyan_3: #87e8de;
-$cyan_4: #5cdbd3;
-$cyan_5: #36cfc9;
-$cyan_6: #13c2c2;
-$cyan_7: #08979c;
-$cyan_8: #006d75;
-$cyan_9: #00474f;
-$cyan_10: #002329;
-
-/*blue*/
-$blue_1: #e6f7ff;
-$blue_2: #bae7ff;
-$blue_3: #91d5ff;
-$blue_4: #69c0ff;
-$blue_5: #40a9ff;
-$blue_6: #1890ff;
-$blue_7: #096dd9;
-$blue_8: #0050b3;
-$blue_9: #003a8c;
-$blue_10: #002766;
-
-/*geek*/
-$geek_1: #f0f5ff;
-$geek_2: #d6e4ff;
-$geek_3: #adc6ff;
-$geek_4: #85a5ff;
-$geek_5: #597ef7;
-$geek_6: #2f54eb;
-$geek_7: #1d39c4;
-$geek_8: #10239e;
-$geek_9: #061178;
-$geek_10: #030852;
-
-/*purple*/
-$purple_1: #f9f0ff;
-$purple_2: #efdbff;
-$purple_3: #d3adf7;
-$purple_4: #b37feb;
-$purple_5: #9254de;
-$purple_6: #722ed1;
-$purple_7: #531dab;
-$purple_8: #391085;
-$purple_9: #22075e;
-$purple_10: #120338;
-
-/*magenta*/
-$magenta_1: #fff0f6;
-$magenta_2: #ffd6e7;
-$magenta_3: #ffadd2;
-$magenta_4: #ff85c0;
-$magenta_5: #f759ab;
-$magenta_6: #eb2f96;
-$magenta_7: #c41d7f;
-$magenta_8: #9e1068;
-$magenta_9: #780650;
-$magenta_10: #520339;
-
-/*gray*/
-$gray_1: #ffffff;
-$gray_2: #fafafa;
-$gray_3: #f5f5f5;
-$gray_4: #f0f0f0;
-$gray_5: #d9d9d9;
-$gray_6: #bfbfbf;
-$gray_7: #8c8c8c;
-$gray_8: #595959;
-$gray_9: #434343;
-$gray_10: #262626;
-$gray_11: #1f1f1f;
-$gray_12: #141414;
-$gray_13: #000000;

package/src/styles/theme/default.scss

@@ -1,47 +0,0 @@
-@import "./color";
-//$boxshadow: 0 1px 1px 0 rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.16);
-$boxshadowColor: #f0f1f2;
-$boxshadow: 0 2px 8px $boxshadowColor;
-
-/*@formatter:off*/
-$theme-default: (
-  '':(
-    colorPrimary: $geek_7,                                  /*基础*/
-    colorSuccess: $cyan_7,                                  /*成功*/
-    colorWarn: $yellow_7,                                   /*警告*/
-    colorError: $red_7,                                     /*错误*/
-    colorInfo:$gray_7,                                      /*帮助*/
-
-    disabled:#f5f7fa,                                       /*禁用*/
-    disabledLight:#fcfcfc,                                  /*禁用(轻)*/
-    disabledDeep:#c6c6c6,                                   /*禁用(深)*/
-    disabledText:#c0c4cc,                                   /*禁用字体*/
-
-    sizeLarge:40px,                                         /*尺寸(大)*/
-    sizeNormal:32px,                                        /*尺寸(中)*/
-    sizeMini:28px,                                          /*尺寸(小)*/
-
-    shapeFillet:2px,                                        /*小圆角*/
-    shapeRound:100px,                                       /*大圆角*/
-    shapeNone:0,                                            /*无圆角*/
-
-    font:'-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji',/**/
-
-    ibc:#dcdfe6,                                            /*边框色*/
-    ibl:#ebeef5,                                            /*边框色(轻)*/
-    itc:#314659,                                            /*文本色*/
-    itl:#697b8c,                                            /*文本色(轻)*/
-    ihc:#000000,                                            /*标题色*/
-    ipc:rgba(0, 0, 0, 0.25),                                /*占位符颜色*/
-    icc:rgba(0, 0, 0, 0.45),                                /*图标色*/
-
-    transitionFlexible:cubic-bezier(.24, .22, .015, 1.2),   /*flexible过度动画*/
-    transition:ease,              /*默认过渡动画*/
-    transition2:ease,             /*过渡动画(轻)*/
-
-    boxshadow:$boxshadow,                                   /*阴影*/
-    boxshadowColor:$boxshadowColor,                         /*阴影*/
-    popperRadius:2px,                                       /*阴影*/
-  )
-);
-/*@formatter:on*/