diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000000000000000000000000000000000000..b4acfe57dfbdaf16a9c84d1cba8fece45f1fa281 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,110 @@ +module.exports = { + root: true, + extends: [ + // add more generic rulesets here, + 'plugin:vue/vue3-recommended', + // 'plugin:@typescript-eslint/recommended', + ], + parser: 'vue-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser', + sourceType: 'module', + // project: ['./**/tsconfig.json'], + }, + plugins: ['@typescript-eslint'], + rules: { + // override/add rules settings here, + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'warn', + 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', + quotes: ['error', 'single', { avoidEscape: true }], + 'quote-props': ['warn', 'as-needed'], + 'comma-dangle': ['error', 'only-multiline'], + camelcase: ['error', { properties: 'never' }], + 'array-bracket-spacing': 'warn', + 'arrow-spacing': 'warn', + 'block-spacing': 'warn', + 'comma-spacing': 'warn', + 'computed-property-spacing': 'warn', + 'generator-star-spacing': 'warn', + 'key-spacing': 'warn', + 'keyword-spacing': 'warn', + 'object-curly-spacing': ['warn', 'always'], + 'rest-spread-spacing': 'warn', + 'switch-colon-spacing': 'error', + 'semi-spacing': 'warn', + 'template-curly-spacing': 'warn', + 'template-tag-spacing': 'warn', + 'yield-star-spacing': 'warn', + semi: ['warn', 'always'], + 'no-trailing-spaces': 'warn', + 'prefer-template': 'error', + 'prefer-spread': 'error', + 'no-var': 'error', + 'max-lines-per-function': ['error', { + max: 100, + skipComments: true, + skipBlankLines: true + }], + complexity: ['warn', 20], + 'max-depth': ['warn', 4], + 'max-len': ['warn', { + code: 160, + ignoreTemplateLiterals: true, + ignoreStrings: true, + ignorePattern: 'd="([\\s\\S]*?)"', + }], + 'default-param-last': 'off', + 'no-param-reassign': ['error', { props: false }], + + // 'vue/max-attributes-per-line': ['error', { + // singleline: { max: 4 }, + // multiline: { max: 2 }, + // }], + 'vue/max-attributes-per-line': 'off', + 'vue/html-self-closing': ['warn', { + html: { + void: 'always', + normal: 'never', + }, + }], + // "vue/html-indent": ["error", type, { + // "attribute": 1, + // "baseIndent": 1, + // "closeBracket": 2, + // "alignAttributesVertically": true, + // "ignores": [] + // }], + + 'vue/singleline-html-element-content-newline': 'off', + 'vue/html-closing-bracket-newline': 'off', + 'vue/multiline-html-element-content-newline': 'warn', + + // for ts + // '@typescript-eslint/strict-boolean-expressions': 'warn', + '@typescript-eslint/default-param-last': 'warn', + 'init-declarations': 'off', + '@typescript-eslint/init-declarations': 'warn', + 'no-shadow': 'off', + '@typescript-eslint/no-shadow': ['error', { hoist: 'all' }], + 'no-unused-vars': 'off', + '@typescript-eslint/no-unused-vars': 'warn', + 'no-unused-expressions': 'off', + '@typescript-eslint/no-unused-expressions': 'warn', + 'no-useless-constructor': 'off', + '@typescript-eslint/no-useless-constructor': 'warn', + 'no-use-before-define': 'off', + '@typescript-eslint/no-use-before-define': 'warn', + 'func-call-spacing': 'off', + '@typescript-eslint/func-call-spacing': 'warn' + + // 'dot-notation': 'off', + // '@typescript-eslint/dot-notation': 'warn', + // 'no-return-await': 'off', + // '@typescript-eslint/return-await': 'warn', + // 'require-await': 'off', + // '@typescript-eslint/require-await': 'error', + // 'no-throw-literal': 'off', + // '@typescript-eslint/no-throw-literal': 'warn', + + }, +}; \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..3fb0166c5c7b3de144b3c458770f764b09c57baf --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +!.vscode/*.code-snippets +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000000000000000000000000000000000000..858f3e46a50edfffd5a3af1b6254781e76aa240c --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,4 @@ +module.exports = { + printWidth: 160, + singleQuote: true, +}; \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000000000000000000000000000000000000..a7cea0b0678120a1b590d1b6592c7318039b9179 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar"] +} diff --git a/.vscode/opendesign.token.code-snippets b/.vscode/opendesign.token.code-snippets new file mode 100644 index 0000000000000000000000000000000000000000..9f671d7289a74daba5992848348bb53fa751a78f --- /dev/null +++ b/.vscode/opendesign.token.code-snippets @@ -0,0 +1,1522 @@ +{ + "--o-color-white": { + "prefix": [ + "var(--o-color-white)" + ], + "body": "var(--o-color-white)", + "description": "[light: 255, 255, 255, dark: 255, 255, 255]", + "scope": "css,scss,less" + }, + "--o-color-black": { + "prefix": [ + "var(--o-color-black)" + ], + "body": "var(--o-color-black)", + "description": "[light: 0, 0, 0, dark: 0, 0, 0]", + "scope": "css,scss,less" + }, + "--o-blue-1": { + "prefix": [ + "var(--o-blue-1)" + ], + "body": "var(--o-blue-1)", + "description": "[light: 232, 243, 255, dark: 0, 13, 77]", + "scope": "css,scss,less" + }, + "--o-blue-2": { + "prefix": [ + "var(--o-blue-2)" + ], + "body": "var(--o-blue-2)", + "description": "[light: 190, 218, 255, dark: 4, 27, 121]", + "scope": "css,scss,less" + }, + "--o-blue-3": { + "prefix": [ + "var(--o-blue-3)" + ], + "body": "var(--o-blue-3)", + "description": "[light: 148, 191, 255, dark: 14, 50, 166]", + "scope": "css,scss,less" + }, + "--o-blue-4": { + "prefix": [ + "var(--o-blue-4)" + ], + "body": "var(--o-blue-4)", + "description": "[light: 106, 161, 255, dark: 29, 77, 210]", + "scope": "css,scss,less" + }, + "--o-blue-5": { + "prefix": [ + "var(--o-blue-5)" + ], + "body": "var(--o-blue-5)", + "description": "[light: 64, 128, 255, dark: 48, 111, 255]", + "scope": "css,scss,less" + }, + "--o-blue-6": { + "prefix": [ + "var(--o-blue-6)" + ], + "body": "var(--o-blue-6)", + "description": "[light: 22, 93, 255, dark: 60, 126, 255]", + "scope": "css,scss,less" + }, + "--o-blue-7": { + "prefix": [ + "var(--o-blue-7)" + ], + "body": "var(--o-blue-7)", + "description": "[light: 14, 66, 210, dark: 104, 159, 255]", + "scope": "css,scss,less" + }, + "--o-blue-8": { + "prefix": [ + "var(--o-blue-8)" + ], + "body": "var(--o-blue-8)", + "description": "[light: 7, 44, 166, dark: 147, 190, 255]", + "scope": "css,scss,less" + }, + "--o-blue-9": { + "prefix": [ + "var(--o-blue-9)" + ], + "body": "var(--o-blue-9)", + "description": "[light: 3, 26, 121, dark: 190, 218, 255]", + "scope": "css,scss,less" + }, + "--o-blue-10": { + "prefix": [ + "var(--o-blue-10)" + ], + "body": "var(--o-blue-10)", + "description": "[light: 0, 13, 77, dark: 234, 244, 255]", + "scope": "css,scss,less" + }, + "--o-yellow-1": { + "prefix": [ + "var(--o-yellow-1)" + ], + "body": "var(--o-yellow-1)", + "description": "[light: 254, 255, 232, dark: 77, 56, 0]", + "scope": "css,scss,less" + }, + "--o-yellow-2": { + "prefix": [ + "var(--o-yellow-2)" + ], + "body": "var(--o-yellow-2)", + "description": "[light: 254, 254, 190, dark: 120, 94, 7]", + "scope": "css,scss,less" + }, + "--o-yellow-3": { + "prefix": [ + "var(--o-yellow-3)" + ], + "body": "var(--o-yellow-3)", + "description": "[light: 253, 250, 148, dark: 163, 134, 20]", + "scope": "css,scss,less" + }, + "--o-yellow-4": { + "prefix": [ + "var(--o-yellow-4)" + ], + "body": "var(--o-yellow-4)", + "description": "[light: 252, 242, 107, dark: 207, 179, 37]", + "scope": "css,scss,less" + }, + "--o-yellow-5": { + "prefix": [ + "var(--o-yellow-5)" + ], + "body": "var(--o-yellow-5)", + "description": "[light: 251, 232, 66, dark: 250, 225, 60]", + "scope": "css,scss,less" + }, + "--o-yellow-6": { + "prefix": [ + "var(--o-yellow-6)" + ], + "body": "var(--o-yellow-6)", + "description": "[light: 250, 220, 25, dark: 251, 233, 75]", + "scope": "css,scss,less" + }, + "--o-yellow-7": { + "prefix": [ + "var(--o-yellow-7)" + ], + "body": "var(--o-yellow-7)", + "description": "[light: 207, 175, 15, dark: 252, 243, 116]", + "scope": "css,scss,less" + }, + "--o-yellow-8": { + "prefix": [ + "var(--o-yellow-8)" + ], + "body": "var(--o-yellow-8)", + "description": "[light: 163, 132, 8, dark: 253, 250, 157]", + "scope": "css,scss,less" + }, + "--o-yellow-9": { + "prefix": [ + "var(--o-yellow-9)" + ], + "body": "var(--o-yellow-9)", + "description": "[light: 120, 93, 3, dark: 254, 254, 198]", + "scope": "css,scss,less" + }, + "--o-yellow-10": { + "prefix": [ + "var(--o-yellow-10)" + ], + "body": "var(--o-yellow-10)", + "description": "[light: 77, 56, 0, dark: 254, 255, 240]", + "scope": "css,scss,less" + }, + "--o-green-1": { + "prefix": [ + "var(--o-green-1)" + ], + "body": "var(--o-green-1)", + "description": "[light: 232, 255, 234, dark: 0, 77, 28]", + "scope": "css,scss,less" + }, + "--o-green-2": { + "prefix": [ + "var(--o-green-2)" + ], + "body": "var(--o-green-2)", + "description": "[light: 175, 240, 181, dark: 4, 102, 37]", + "scope": "css,scss,less" + }, + "--o-green-3": { + "prefix": [ + "var(--o-green-3)" + ], + "body": "var(--o-green-3)", + "description": "[light: 123, 225, 136, dark: 10, 128, 45]", + "scope": "css,scss,less" + }, + "--o-green-4": { + "prefix": [ + "var(--o-green-4)" + ], + "body": "var(--o-green-4)", + "description": "[light: 76, 210, 99, dark: 18, 154, 55]", + "scope": "css,scss,less" + }, + "--o-green-5": { + "prefix": [ + "var(--o-green-5)" + ], + "body": "var(--o-green-5)", + "description": "[light: 35, 195, 67, dark: 29, 180, 64]", + "scope": "css,scss,less" + }, + "--o-green-6": { + "prefix": [ + "var(--o-green-6)" + ], + "body": "var(--o-green-6)", + "description": "[light: 0, 180, 42, dark: 39, 195, 70]", + "scope": "css,scss,less" + }, + "--o-green-7": { + "prefix": [ + "var(--o-green-7)" + ], + "body": "var(--o-green-7)", + "description": "[light: 0, 154, 41, dark: 80, 210, 102]", + "scope": "css,scss,less" + }, + "--o-green-8": { + "prefix": [ + "var(--o-green-8)" + ], + "body": "var(--o-green-8)", + "description": "[light: 0, 128, 38, dark: 126, 225, 139]", + "scope": "css,scss,less" + }, + "--o-green-9": { + "prefix": [ + "var(--o-green-9)" + ], + "body": "var(--o-green-9)", + "description": "[light: 0, 102, 34, dark: 178, 240, 183]", + "scope": "css,scss,less" + }, + "--o-green-10": { + "prefix": [ + "var(--o-green-10)" + ], + "body": "var(--o-green-10)", + "description": "[light: 0, 77, 28, dark: 235, 255, 236]", + "scope": "css,scss,less" + }, + "--o-orange-1": { + "prefix": [ + "var(--o-orange-1)" + ], + "body": "var(--o-orange-1)", + "description": "[light: 255, 247, 232, dark: 77, 27, 0]", + "scope": "css,scss,less" + }, + "--o-orange-2": { + "prefix": [ + "var(--o-orange-2)" + ], + "body": "var(--o-orange-2)", + "description": "[light: 255, 228, 186, dark: 121, 48, 4]", + "scope": "css,scss,less" + }, + "--o-orange-3": { + "prefix": [ + "var(--o-orange-3)" + ], + "body": "var(--o-orange-3)", + "description": "[light: 255, 207, 139, dark: 166, 75, 10]", + "scope": "css,scss,less" + }, + "--o-orange-4": { + "prefix": [ + "var(--o-orange-4)" + ], + "body": "var(--o-orange-4)", + "description": "[light: 255, 182, 93, dark: 210, 105, 19]", + "scope": "css,scss,less" + }, + "--o-orange-5": { + "prefix": [ + "var(--o-orange-5)" + ], + "body": "var(--o-orange-5)", + "description": "[light: 255, 154, 46, dark: 255, 141, 31]", + "scope": "css,scss,less" + }, + "--o-orange-6": { + "prefix": [ + "var(--o-orange-6)" + ], + "body": "var(--o-orange-6)", + "description": "[light: 255, 125, 0, dark: 255, 150, 38]", + "scope": "css,scss,less" + }, + "--o-orange-7": { + "prefix": [ + "var(--o-orange-7)" + ], + "body": "var(--o-orange-7)", + "description": "[light: 210, 95, 0, dark: 255, 179, 87]", + "scope": "css,scss,less" + }, + "--o-orange-8": { + "prefix": [ + "var(--o-orange-8)" + ], + "body": "var(--o-orange-8)", + "description": "[light: 166, 69, 0, dark: 255, 205, 135]", + "scope": "css,scss,less" + }, + "--o-orange-9": { + "prefix": [ + "var(--o-orange-9)" + ], + "body": "var(--o-orange-9)", + "description": "[light: 121, 46, 0, dark: 255, 227, 184]", + "scope": "css,scss,less" + }, + "--o-orange-10": { + "prefix": [ + "var(--o-orange-10)" + ], + "body": "var(--o-orange-10)", + "description": "[light: 77, 27, 0, dark: 255, 247, 232]", + "scope": "css,scss,less" + }, + "--o-red-1": { + "prefix": [ + "var(--o-red-1)" + ], + "body": "var(--o-red-1)", + "description": "[light: 255, 236, 232, dark: 77, 0, 10]", + "scope": "css,scss,less" + }, + "--o-red-2": { + "prefix": [ + "var(--o-red-2)" + ], + "body": "var(--o-red-2)", + "description": "[light: 253, 205, 197, dark: 119, 6, 17]", + "scope": "css,scss,less" + }, + "--o-red-3": { + "prefix": [ + "var(--o-red-3)" + ], + "body": "var(--o-red-3)", + "description": "[light: 251, 172, 163, dark: 161, 22, 31]", + "scope": "css,scss,less" + }, + "--o-red-4": { + "prefix": [ + "var(--o-red-4)" + ], + "body": "var(--o-red-4)", + "description": "[light: 249, 137, 129, dark: 203, 46, 52]", + "scope": "css,scss,less" + }, + "--o-red-5": { + "prefix": [ + "var(--o-red-5)" + ], + "body": "var(--o-red-5)", + "description": "[light: 247, 101, 96, dark: 245, 78, 78]", + "scope": "css,scss,less" + }, + "--o-red-6": { + "prefix": [ + "var(--o-red-6)" + ], + "body": "var(--o-red-6)", + "description": "[light: 245, 63, 63, dark: 247, 105, 101]", + "scope": "css,scss,less" + }, + "--o-red-7": { + "prefix": [ + "var(--o-red-7)" + ], + "body": "var(--o-red-7)", + "description": "[light: 203, 39, 45, dark: 249, 141, 134]", + "scope": "css,scss,less" + }, + "--o-red-8": { + "prefix": [ + "var(--o-red-8)" + ], + "body": "var(--o-red-8)", + "description": "[light: 161, 21, 30, dark: 251, 176, 167]", + "scope": "css,scss,less" + }, + "--o-red-9": { + "prefix": [ + "var(--o-red-9)" + ], + "body": "var(--o-red-9)", + "description": "[light: 119, 8, 19, dark: 253, 209, 202]", + "scope": "css,scss,less" + }, + "--o-red-10": { + "prefix": [ + "var(--o-red-10)" + ], + "body": "var(--o-red-10)", + "description": "[light: 77, 0, 10, dark: 255, 240, 236]", + "scope": "css,scss,less" + }, + "--o-gray-1": { + "prefix": [ + "var(--o-gray-1)" + ], + "body": "var(--o-gray-1)", + "description": "[light: 255, 255, 255, dark: 0, 0, 0]", + "scope": "css,scss,less" + }, + "--o-gray-2": { + "prefix": [ + "var(--o-gray-2)" + ], + "body": "var(--o-gray-2)", + "description": "[light: 238, 238, 238, dark: 36, 36, 36]", + "scope": "css,scss,less" + }, + "--o-gray-3": { + "prefix": [ + "var(--o-gray-3)" + ], + "body": "var(--o-gray-3)", + "description": "[light: 221, 221, 221, dark: 57, 57, 57]", + "scope": "css,scss,less" + }, + "--o-gray-4": { + "prefix": [ + "var(--o-gray-4)" + ], + "body": "var(--o-gray-4)", + "description": "[light: 198, 198, 198, dark: 94, 94, 94]", + "scope": "css,scss,less" + }, + "--o-gray-5": { + "prefix": [ + "var(--o-gray-5)" + ], + "body": "var(--o-gray-5)", + "description": "[light: 139, 139, 139, dark: 119, 119, 122]", + "scope": "css,scss,less" + }, + "--o-gray-6": { + "prefix": [ + "var(--o-gray-6)" + ], + "body": "var(--o-gray-6)", + "description": "[light: 119, 119, 119, dark: 166, 166, 166]", + "scope": "css,scss,less" + }, + "--o-gray-7": { + "prefix": [ + "var(--o-gray-7)" + ], + "body": "var(--o-gray-7)", + "description": "[light: 94, 94, 94, dark: 221, 221, 221]", + "scope": "css,scss,less" + }, + "--o-gray-8": { + "prefix": [ + "var(--o-gray-8)" + ], + "body": "var(--o-gray-8)", + "description": "[light: 75, 75, 75, dark: 238, 238, 238]", + "scope": "css,scss,less" + }, + "--o-gray-9": { + "prefix": [ + "var(--o-gray-9)" + ], + "body": "var(--o-gray-9)", + "description": "[light: 44, 44, 44, dark: 243, 243, 243]", + "scope": "css,scss,less" + }, + "--o-gray-10": { + "prefix": [ + "var(--o-gray-10)" + ], + "body": "var(--o-gray-10)", + "description": "[light: 0, 0, 0, dark: 255, 255, 255]", + "scope": "css,scss,less" + }, + "--o-mixedgray-1": { + "prefix": [ + "var(--o-mixedgray-1)" + ], + "body": "var(--o-mixedgray-1)", + "description": "[light: 247, 248, 250, dark: 23, 23, 26]", + "scope": "css,scss,less" + }, + "--o-mixedgray-2": { + "prefix": [ + "var(--o-mixedgray-2)" + ], + "body": "var(--o-mixedgray-2)", + "description": "[light: 242, 243, 245, dark: 46, 46, 48]", + "scope": "css,scss,less" + }, + "--o-mixedgray-3": { + "prefix": [ + "var(--o-mixedgray-3)" + ], + "body": "var(--o-mixedgray-3)", + "description": "[light: 229, 230, 235, dark: 72, 72, 73]", + "scope": "css,scss,less" + }, + "--o-mixedgray-4": { + "prefix": [ + "var(--o-mixedgray-4)" + ], + "body": "var(--o-mixedgray-4)", + "description": "[light: 201, 205, 212, dark: 95, 95, 96]", + "scope": "css,scss,less" + }, + "--o-mixedgray-5": { + "prefix": [ + "var(--o-mixedgray-5)" + ], + "body": "var(--o-mixedgray-5)", + "description": "[light: 169, 174, 184, dark: 120, 120, 122]", + "scope": "css,scss,less" + }, + "--o-mixedgray-6": { + "prefix": [ + "var(--o-mixedgray-6)" + ], + "body": "var(--o-mixedgray-6)", + "description": "[light: 134, 144, 156, dark: 146, 146, 147]", + "scope": "css,scss,less" + }, + "--o-mixedgray-7": { + "prefix": [ + "var(--o-mixedgray-7)" + ], + "body": "var(--o-mixedgray-7)", + "description": "[light: 107, 119, 133, dark: 171, 171, 172]", + "scope": "css,scss,less" + }, + "--o-mixedgray-8": { + "prefix": [ + "var(--o-mixedgray-8)" + ], + "body": "var(--o-mixedgray-8)", + "description": "[light: 78, 89, 105, dark: 197, 197, 197]", + "scope": "css,scss,less" + }, + "--o-mixedgray-9": { + "prefix": [ + "var(--o-mixedgray-9)" + ], + "body": "var(--o-mixedgray-9)", + "description": "[light: 39, 46, 59, dark: 223, 223, 223]", + "scope": "css,scss,less" + }, + "--o-mixedgray-10": { + "prefix": [ + "var(--o-mixedgray-10)" + ], + "body": "var(--o-mixedgray-10)", + "description": "[light: 29, 33, 41, dark: 246, 246, 246]", + "scope": "css,scss,less" + }, + "--o-color-info1": { + "prefix": [ + "var(--o-color-info1)" + ], + "body": "var(--o-color-info1)", + "description": "一级/强调/标题[light: rgb(var(--o-gray-10)), dark: rgb(var(--o-gray-10))]", + "scope": "css,scss,less" + }, + "--o-color-info2": { + "prefix": [ + "var(--o-color-info2)" + ], + "body": "var(--o-color-info2)", + "description": "二级/次强调/正文[light: rgb(var(--o-gray-8)), dark: rgb(var(--o-gray-8))]", + "scope": "css,scss,less" + }, + "--o-color-info3": { + "prefix": [ + "var(--o-color-info3)" + ], + "body": "var(--o-color-info3)", + "description": "三级/辅助信息[light: rgb(var(--o-gray-6)), dark: rgb(var(--o-gray-6))]", + "scope": "css,scss,less" + }, + "--o-color-info4": { + "prefix": [ + "var(--o-color-info4)" + ], + "body": "var(--o-color-info4)", + "description": "置灰/禁用[light: rgb(var(--o-gray-4)), dark: rgb(var(--o-gray-4))]", + "scope": "css,scss,less" + }, + "--o-color-info1-inverse": { + "prefix": [ + "var(--o-color-info1-inverse)" + ], + "body": "var(--o-color-info1-inverse)", + "description": "一级/次强调/正文反色[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-1))]", + "scope": "css,scss,less" + }, + "--o-color-info2-inverse": { + "prefix": [ + "var(--o-color-info2-inverse)" + ], + "body": "var(--o-color-info2-inverse)", + "description": "二级/辅助信息反色[light: rgb(var(--o-gray-3)), dark: rgb(var(--o-gray-3))]", + "scope": "css,scss,less" + }, + "--o-color-info3-inverse": { + "prefix": [ + "var(--o-color-info3-inverse)" + ], + "body": "var(--o-color-info3-inverse)", + "description": "三级/辅助信息反色[light: rgb(var(--o-gray-5)), dark: rgb(var(--o-gray-5))]", + "scope": "css,scss,less" + }, + "--o-color-info4-inverse": { + "prefix": [ + "var(--o-color-info4-inverse)" + ], + "body": "var(--o-color-info4-inverse)", + "description": "置灰/禁用反色[light: rgb(var(--o-gray-7)), dark: rgb(var(--o-gray-7))]", + "scope": "css,scss,less" + }, + "--o-color-mask1": { + "prefix": [ + "var(--o-color-mask1)" + ], + "body": "var(--o-color-mask1)", + "description": "全局遮罩[light: rgba(var(--o-gray-10), .2), dark: rgba(var(--o-gray-10), .2)]", + "scope": "css,scss,less" + }, + "--o-color-mask2": { + "prefix": [ + "var(--o-color-mask2)" + ], + "body": "var(--o-color-mask2)", + "description": "局部遮罩[light: rgba(var(--o-gray-10), .1), dark: rgba(var(--o-gray-10), .1)]", + "scope": "css,scss,less" + }, + "--o-color-fill1": { + "prefix": [ + "var(--o-color-fill1)" + ], + "body": "var(--o-color-fill1)", + "description": "一级填充/页面背景[light: rgb(var(--o-mixedgray-1)), dark: rgb(var(--o-mixedgray-1))]", + "scope": "css,scss,less" + }, + "--o-color-fill2": { + "prefix": [ + "var(--o-color-fill2)" + ], + "body": "var(--o-color-fill2)", + "description": "二级填充/区块、卡片[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-1))]", + "scope": "css,scss,less" + }, + "--o-color-fill3": { + "prefix": [ + "var(--o-color-fill3)" + ], + "body": "var(--o-color-fill3)", + "description": "三级填充/卡片[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]", + "scope": "css,scss,less" + }, + "--o-color-fill4": { + "prefix": [ + "var(--o-color-fill4)" + ], + "body": "var(--o-color-fill4)", + "description": "四级填充/禁用[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]", + "scope": "css,scss,less" + }, + "--o-color-control-light": { + "prefix": [ + "var(--o-color-control-light)" + ], + "body": "var(--o-color-control-light)", + "description": "很浅背景[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-1))]", + "scope": "css,scss,less" + }, + "--o-color-control1": { + "prefix": [ + "var(--o-color-control1)" + ], + "body": "var(--o-color-control1)", + "description": "常规，常用于边框[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]", + "scope": "css,scss,less" + }, + "--o-color-control2": { + "prefix": [ + "var(--o-color-control2)" + ], + "body": "var(--o-color-control2)", + "description": "悬浮[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]", + "scope": "css,scss,less" + }, + "--o-color-control3": { + "prefix": [ + "var(--o-color-control3)" + ], + "body": "var(--o-color-control3)", + "description": "激活[light: rgb(var(--o-mixedgray-6)), dark: rgb(var(--o-mixedgray-6))]", + "scope": "css,scss,less" + }, + "--o-color-control4": { + "prefix": [ + "var(--o-color-control4)" + ], + "body": "var(--o-color-control4)", + "description": "禁用[light: rgb(var(--o-mixedgray-5)), dark: rgb(var(--o-mixedgray-5))]", + "scope": "css,scss,less" + }, + "--o-color-control1-light": { + "prefix": [ + "var(--o-color-control1-light)" + ], + "body": "var(--o-color-control1-light)", + "description": "常规-浅，常用于背景[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-3))]", + "scope": "css,scss,less" + }, + "--o-color-control2-light": { + "prefix": [ + "var(--o-color-control2-light)" + ], + "body": "var(--o-color-control2-light)", + "description": "悬浮-浅[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-4))]", + "scope": "css,scss,less" + }, + "--o-color-control3-light": { + "prefix": [ + "var(--o-color-control3-light)" + ], + "body": "var(--o-color-control3-light)", + "description": "激活-浅[light: rgb(var(--o-mixedgray-5)), dark: rgb(var(--o-mixedgray-5))]", + "scope": "css,scss,less" + }, + "--o-color-control4-light": { + "prefix": [ + "var(--o-color-control4-light)" + ], + "body": "var(--o-color-control4-light)", + "description": "禁用-浅[light: rgb(var(--o-mixedgray-2)), dark: rgb(var(--o-mixedgray-2))]", + "scope": "css,scss,less" + }, + "--o-color-primary1": { + "prefix": [ + "var(--o-color-primary1)" + ], + "body": "var(--o-color-primary1)", + "description": "常规[light: rgb(var(--o-blue-6)), dark: rgb(var(--o-blue-6))]", + "scope": "css,scss,less" + }, + "--o-color-primary2": { + "prefix": [ + "var(--o-color-primary2)" + ], + "body": "var(--o-color-primary2)", + "description": "悬浮[light: rgb(var(--o-blue-5)), dark: rgb(var(--o-blue-5))]", + "scope": "css,scss,less" + }, + "--o-color-primary3": { + "prefix": [ + "var(--o-color-primary3)" + ], + "body": "var(--o-color-primary3)", + "description": "激活[light: rgb(var(--o-blue-7)), dark: rgb(var(--o-blue-7))]", + "scope": "css,scss,less" + }, + "--o-color-primary4": { + "prefix": [ + "var(--o-color-primary4)" + ], + "body": "var(--o-color-primary4)", + "description": "禁用[light: rgb(var(--o-blue-3)), dark: rgb(var(--o-blue-3))]", + "scope": "css,scss,less" + }, + "--o-color-primary1-light": { + "prefix": [ + "var(--o-color-primary1-light)" + ], + "body": "var(--o-color-primary1-light)", + "description": "浅/常规[light: rgb(var(--o-blue-2)), dark: rgb(var(--o-blue-2))]", + "scope": "css,scss,less" + }, + "--o-color-primary2-light": { + "prefix": [ + "var(--o-color-primary2-light)" + ], + "body": "var(--o-color-primary2-light)", + "description": "浅/悬浮[light: rgb(var(--o-blue-3)), dark: rgb(var(--o-blue-3))]", + "scope": "css,scss,less" + }, + "--o-color-primary3-light": { + "prefix": [ + "var(--o-color-primary3-light)" + ], + "body": "var(--o-color-primary3-light)", + "description": "浅/激活[light: rgb(var(--o-blue-4)), dark: rgb(var(--o-blue-4))]", + "scope": "css,scss,less" + }, + "--o-color-primary4-light": { + "prefix": [ + "var(--o-color-primary4-light)" + ], + "body": "var(--o-color-primary4-light)", + "description": "浅/禁用[light: rgb(var(--o-blue-1)), dark: rgb(var(--o-blue-1))]", + "scope": "css,scss,less" + }, + "--o-color-success1": { + "prefix": [ + "var(--o-color-success1)" + ], + "body": "var(--o-color-success1)", + "description": "常规[light: rgb(var(--o-green-6)), dark: rgb(var(--o-green-6))]", + "scope": "css,scss,less" + }, + "--o-color-success2": { + "prefix": [ + "var(--o-color-success2)" + ], + "body": "var(--o-color-success2)", + "description": "悬浮[light: rgb(var(--o-green-5)), dark: rgb(var(--o-green-5))]", + "scope": "css,scss,less" + }, + "--o-color-success3": { + "prefix": [ + "var(--o-color-success3)" + ], + "body": "var(--o-color-success3)", + "description": "激活[light: rgb(var(--o-green-7)), dark: rgb(var(--o-green-7))]", + "scope": "css,scss,less" + }, + "--o-color-success4": { + "prefix": [ + "var(--o-color-success4)" + ], + "body": "var(--o-color-success4)", + "description": "禁用[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]", + "scope": "css,scss,less" + }, + "--o-color-success1-light": { + "prefix": [ + "var(--o-color-success1-light)" + ], + "body": "var(--o-color-success1-light)", + "description": "浅/常规[light: rgb(var(--o-green-2)), dark: rgb(var(--o-green-2))]", + "scope": "css,scss,less" + }, + "--o-color-success2-light": { + "prefix": [ + "var(--o-color-success2-light)" + ], + "body": "var(--o-color-success2-light)", + "description": "浅/悬浮[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]", + "scope": "css,scss,less" + }, + "--o-color-success3-light": { + "prefix": [ + "var(--o-color-success3-light)" + ], + "body": "var(--o-color-success3-light)", + "description": "浅/激活[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]", + "scope": "css,scss,less" + }, + "--o-color-success4-light": { + "prefix": [ + "var(--o-color-success4-light)" + ], + "body": "var(--o-color-success4-light)", + "description": "浅/禁用[light: rgb(var(--o-green-1)), dark: rgb(var(--o-green-1))]", + "scope": "css,scss,less" + }, + "--o-color-warning1": { + "prefix": [ + "var(--o-color-warning1)" + ], + "body": "var(--o-color-warning1)", + "description": "常规[light: rgb(var(--o-orange-6)), dark: rgb(var(--o-orange-6))]", + "scope": "css,scss,less" + }, + "--o-color-warning2": { + "prefix": [ + "var(--o-color-warning2)" + ], + "body": "var(--o-color-warning2)", + "description": "悬浮[light: rgb(var(--o-orange-5)), dark: rgb(var(--o-orange-5))]", + "scope": "css,scss,less" + }, + "--o-color-warning3": { + "prefix": [ + "var(--o-color-warning3)" + ], + "body": "var(--o-color-warning3)", + "description": "激活[light: rgb(var(--o-orange-7)), dark: rgb(var(--o-orange-7))]", + "scope": "css,scss,less" + }, + "--o-color-warning4": { + "prefix": [ + "var(--o-color-warning4)" + ], + "body": "var(--o-color-warning4)", + "description": "禁用[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]", + "scope": "css,scss,less" + }, + "--o-color-warning1-light": { + "prefix": [ + "var(--o-color-warning1-light)" + ], + "body": "var(--o-color-warning1-light)", + "description": "浅/常规[light: rgb(var(--o-orange-2)), dark: rgb(var(--o-orange-2))]", + "scope": "css,scss,less" + }, + "--o-color-warning2-light": { + "prefix": [ + "var(--o-color-warning2-light)" + ], + "body": "var(--o-color-warning2-light)", + "description": "浅/悬浮[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]", + "scope": "css,scss,less" + }, + "--o-color-warning3-light": { + "prefix": [ + "var(--o-color-warning3-light)" + ], + "body": "var(--o-color-warning3-light)", + "description": "浅/激活[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]", + "scope": "css,scss,less" + }, + "--o-color-warning4-light": { + "prefix": [ + "var(--o-color-warning4-light)" + ], + "body": "var(--o-color-warning4-light)", + "description": "浅/禁用[light: rgb(var(--o-orange-1)), dark: rgb(var(--o-orange-1))]", + "scope": "css,scss,less" + }, + "--o-color-danger1": { + "prefix": [ + "var(--o-color-danger1)" + ], + "body": "var(--o-color-danger1)", + "description": "常规[light: rgb(var(--o-red-6)), dark: rgb(var(--o-red-6))]", + "scope": "css,scss,less" + }, + "--o-color-danger2": { + "prefix": [ + "var(--o-color-danger2)" + ], + "body": "var(--o-color-danger2)", + "description": "悬浮[light: rgb(var(--o-red-5)), dark: rgb(var(--o-red-5))]", + "scope": "css,scss,less" + }, + "--o-color-danger3": { + "prefix": [ + "var(--o-color-danger3)" + ], + "body": "var(--o-color-danger3)", + "description": "激活[light: rgb(var(--o-red-7)), dark: rgb(var(--o-red-7))]", + "scope": "css,scss,less" + }, + "--o-color-danger4": { + "prefix": [ + "var(--o-color-danger4)" + ], + "body": "var(--o-color-danger4)", + "description": "禁用[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]", + "scope": "css,scss,less" + }, + "--o-color-danger1-light": { + "prefix": [ + "var(--o-color-danger1-light)" + ], + "body": "var(--o-color-danger1-light)", + "description": "浅/常规[light: rgb(var(--o-red-2)), dark: rgb(var(--o-red-2))]", + "scope": "css,scss,less" + }, + "--o-color-danger2-light": { + "prefix": [ + "var(--o-color-danger2-light)" + ], + "body": "var(--o-color-danger2-light)", + "description": "浅/悬浮[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]", + "scope": "css,scss,less" + }, + "--o-color-danger3-light": { + "prefix": [ + "var(--o-color-danger3-light)" + ], + "body": "var(--o-color-danger3-light)", + "description": "浅/激活[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]", + "scope": "css,scss,less" + }, + "--o-color-danger4-light": { + "prefix": [ + "var(--o-color-danger4-light)" + ], + "body": "var(--o-color-danger4-light)", + "description": "浅/禁用[light: rgb(var(--o-red-1)), dark: rgb(var(--o-red-1))]", + "scope": "css,scss,less" + }, + "--o-shadow-1": { + "prefix": [ + "var(--o-shadow-1)" + ], + "body": "var(--o-shadow-1)", + "description": "用于卡片、小弹窗、楼层阴影[light: 0 1px 5px rgba(var(--o-gray-10), 0.1), dark: 0 1px 7px rgba(var(--o-gray-10), 0.3)]", + "scope": "css,scss,less" + }, + "--o-shadow-2": { + "prefix": [ + "var(--o-shadow-2)" + ], + "body": "var(--o-shadow-2)", + "description": "用于卡片悬浮阴影[light: 0 6px 18px rgba(var(--o-gray-10), 0.14), dark: 0 6px 18px rgba(var(--o-gray-10), 0.42)]", + "scope": "css,scss,less" + }, + "--o-shadow-3": { + "prefix": [ + "var(--o-shadow-3)" + ], + "body": "var(--o-shadow-3)", + "description": "用于提示阴影[light: 0 10px 32px rgba(var(--o-gray-10), 0.18), dark: 0 10px 32px rgba(var(--o-gray-10), 0.54)]", + "scope": "css,scss,less" + }, + "--o-gap-1": { + "prefix": [ + "var(--o-gap-1)" + ], + "body": "var(--o-gap-1)", + "description": "用于组件之间的间距1[light: 4px, dark: 4px]", + "scope": "css,scss,less" + }, + "--o-gap-2": { + "prefix": [ + "var(--o-gap-2)" + ], + "body": "var(--o-gap-2)", + "description": "用于组件之间的间距2[light: 8px, dark: 8px]", + "scope": "css,scss,less" + }, + "--o-gap-3": { + "prefix": [ + "var(--o-gap-3)" + ], + "body": "var(--o-gap-3)", + "description": "用于组件之间的间距3[light: 12px, dark: 12px]", + "scope": "css,scss,less" + }, + "--o-gap-4": { + "prefix": [ + "var(--o-gap-4)" + ], + "body": "var(--o-gap-4)", + "description": "用于组件之间的间距4[light: 16px, dark: 16px]", + "scope": "css,scss,less" + }, + "--o-gap-5": { + "prefix": [ + "var(--o-gap-5)" + ], + "body": "var(--o-gap-5)", + "description": "用于组件之间的间距5[light: 24px, dark: 24px]", + "scope": "css,scss,less" + }, + "--o-gap-6": { + "prefix": [ + "var(--o-gap-6)" + ], + "body": "var(--o-gap-6)", + "description": "用于组件之间的间距6[light: 32px, dark: 32px]", + "scope": "css,scss,less" + }, + "--o-gap-7": { + "prefix": [ + "var(--o-gap-7)" + ], + "body": "var(--o-gap-7)", + "description": "用于组件之间的间距7[light: 40px, dark: 40px]", + "scope": "css,scss,less" + }, + "--o-gap-8": { + "prefix": [ + "var(--o-gap-8)" + ], + "body": "var(--o-gap-8)", + "description": "用于组件之间的间距8[light: 64px, dark: 64px]", + "scope": "css,scss,less" + }, + "--o-size-xxs": { + "prefix": [ + "var(--o-size-xxs)" + ], + "body": "var(--o-size-xxs)", + "description": "小尺寸[light: 12px, dark: 12px]", + "scope": "css,scss,less" + }, + "--o-size-xs": { + "prefix": [ + "var(--o-size-xs)" + ], + "body": "var(--o-size-xs)", + "description": "小尺寸[light: 18px, dark: 18px]", + "scope": "css,scss,less" + }, + "--o-size-s": { + "prefix": [ + "var(--o-size-s)" + ], + "body": "var(--o-size-s)", + "description": "小尺寸[light: 24px, dark: 24px]", + "scope": "css,scss,less" + }, + "--o-size-m": { + "prefix": [ + "var(--o-size-m)" + ], + "body": "var(--o-size-m)", + "description": "尺寸[light: 32px, dark: 32px]", + "scope": "css,scss,less" + }, + "--o-size-l": { + "prefix": [ + "var(--o-size-l)" + ], + "body": "var(--o-size-l)", + "description": "尺寸[light: 40px, dark: 40px]", + "scope": "css,scss,less" + }, + "--o-size-xl": { + "prefix": [ + "var(--o-size-xl)" + ], + "body": "var(--o-size-xl)", + "description": "尺寸[light: 48px, dark: 48px]", + "scope": "css,scss,less" + }, + "--o-icon_size-xxs": { + "prefix": [ + "var(--o-icon_size-xxs)" + ], + "body": "var(--o-icon_size-xxs)", + "description": "小尺寸[light: 12px, dark: 12px]", + "scope": "css,scss,less" + }, + "--o-icon_size-xs": { + "prefix": [ + "var(--o-icon_size-xs)" + ], + "body": "var(--o-icon_size-xs)", + "description": "小尺寸[light: 16px, dark: 16px]", + "scope": "css,scss,less" + }, + "--o-icon_size-s": { + "prefix": [ + "var(--o-icon_size-s)" + ], + "body": "var(--o-icon_size-s)", + "description": "小尺寸[light: 24px, dark: 24px]", + "scope": "css,scss,less" + }, + "--o-icon_size-m": { + "prefix": [ + "var(--o-icon_size-m)" + ], + "body": "var(--o-icon_size-m)", + "description": "尺寸[light: 32px, dark: 32px]", + "scope": "css,scss,less" + }, + "--o-icon_size-l": { + "prefix": [ + "var(--o-icon_size-l)" + ], + "body": "var(--o-icon_size-l)", + "description": "尺寸[light: 48px, dark: 48px]", + "scope": "css,scss,less" + }, + "--o-font_size-display1": { + "prefix": [ + "var(--o-font_size-display1)" + ], + "body": "var(--o-font_size-display1)", + "description": "一级数据展示[light: 64px, dark: 64px]", + "scope": "css,scss,less" + }, + "--o-font_size-display2": { + "prefix": [ + "var(--o-font_size-display2)" + ], + "body": "var(--o-font_size-display2)", + "description": "二级数据展示[light: 54px, dark: 54px]", + "scope": "css,scss,less" + }, + "--o-font_size-display3": { + "prefix": [ + "var(--o-font_size-display3)" + ], + "body": "var(--o-font_size-display3)", + "description": "三级数据展示[light: 36px, dark: 36px]", + "scope": "css,scss,less" + }, + "--o-font_size-display4": { + "prefix": [ + "var(--o-font_size-display4)" + ], + "body": "var(--o-font_size-display4)", + "description": "四级数据展示[light: 28px, dark: 28px]", + "scope": "css,scss,less" + }, + "--o-font_size-h1": { + "prefix": [ + "var(--o-font_size-h1)" + ], + "body": "var(--o-font_size-h1)", + "description": "一级标题[light: 24px, dark: 24px]", + "scope": "css,scss,less" + }, + "--o-font_size-h2": { + "prefix": [ + "var(--o-font_size-h2)" + ], + "body": "var(--o-font_size-h2)", + "description": "二级标题[light: 20px, dark: 20px]", + "scope": "css,scss,less" + }, + "--o-font_size-h3": { + "prefix": [ + "var(--o-font_size-h3)" + ], + "body": "var(--o-font_size-h3)", + "description": "三级标题[light: 18px, dark: 18px]", + "scope": "css,scss,less" + }, + "--o-font_size-text1": { + "prefix": [ + "var(--o-font_size-text1)" + ], + "body": "var(--o-font_size-text1)", + "description": "常规正文[light: 14px, dark: 14px]", + "scope": "css,scss,less" + }, + "--o-font_size-text2": { + "prefix": [ + "var(--o-font_size-text2)" + ], + "body": "var(--o-font_size-text2)", + "description": "大号正文[light: 16px, dark: 16px]", + "scope": "css,scss,less" + }, + "--o-font_size-tip1": { + "prefix": [ + "var(--o-font_size-tip1)" + ], + "body": "var(--o-font_size-tip1)", + "description": "提示文本1[light: 12px, dark: 12px]", + "scope": "css,scss,less" + }, + "--o-font_size-tip2": { + "prefix": [ + "var(--o-font_size-tip2)" + ], + "body": "var(--o-font_size-tip2)", + "description": "提示文本2[light: 10px, dark: 10px]", + "scope": "css,scss,less" + }, + "--o-line_height-display1": { + "prefix": [ + "var(--o-line_height-display1)" + ], + "body": "var(--o-line_height-display1)", + "description": "一级数据展示[light: 84px, dark: 84px]", + "scope": "css,scss,less" + }, + "--o-line_height-display2": { + "prefix": [ + "var(--o-line_height-display2)" + ], + "body": "var(--o-line_height-display2)", + "description": "二级数据展示[light: 76px, dark: 76px]", + "scope": "css,scss,less" + }, + "--o-line_height-display3": { + "prefix": [ + "var(--o-line_height-display3)" + ], + "body": "var(--o-line_height-display3)", + "description": "三级数据展示[light: 48px, dark: 48px]", + "scope": "css,scss,less" + }, + "--o-line_height-display4": { + "prefix": [ + "var(--o-line_height-display4)" + ], + "body": "var(--o-line_height-display4)", + "description": "四级数据展示[light: 36px, dark: 36px]", + "scope": "css,scss,less" + }, + "--o-line_height-h1": { + "prefix": [ + "var(--o-line_height-h1)" + ], + "body": "var(--o-line_height-h1)", + "description": "一级标题[light: 32px, dark: 32px]", + "scope": "css,scss,less" + }, + "--o-line_height-h2": { + "prefix": [ + "var(--o-line_height-h2)" + ], + "body": "var(--o-line_height-h2)", + "description": "二级标题[light: 28px, dark: 28px]", + "scope": "css,scss,less" + }, + "--o-line_height-h3": { + "prefix": [ + "var(--o-line_height-h3)" + ], + "body": "var(--o-line_height-h3)", + "description": "三级标题[light: 26px, dark: 26px]", + "scope": "css,scss,less" + }, + "--o-line_height-text1": { + "prefix": [ + "var(--o-line_height-text1)" + ], + "body": "var(--o-line_height-text1)", + "description": "常规正文[light: 22px, dark: 22px]", + "scope": "css,scss,less" + }, + "--o-line_height-text2": { + "prefix": [ + "var(--o-line_height-text2)" + ], + "body": "var(--o-line_height-text2)", + "description": "大号正文[light: 24px, dark: 24px]", + "scope": "css,scss,less" + }, + "--o-line_height-tip1": { + "prefix": [ + "var(--o-line_height-tip1)" + ], + "body": "var(--o-line_height-tip1)", + "description": "提示文本1[light: 18px, dark: 18px]", + "scope": "css,scss,less" + }, + "--o-line_height-tip2": { + "prefix": [ + "var(--o-line_height-tip2)" + ], + "body": "var(--o-line_height-tip2)", + "description": "提示文本2[light: 14px, dark: 14px]", + "scope": "css,scss,less" + }, + "--o-radius-s": { + "prefix": [ + "var(--o-radius-s)" + ], + "body": "var(--o-radius-s)", + "description": "小尺寸圆角[light: 2px, dark: 2px]", + "scope": "css,scss,less" + }, + "--o-radius-m": { + "prefix": [ + "var(--o-radius-m)" + ], + "body": "var(--o-radius-m)", + "description": "中尺寸圆角[light: 4px, dark: 4px]", + "scope": "css,scss,less" + }, + "--o-radius-l": { + "prefix": [ + "var(--o-radius-l)" + ], + "body": "var(--o-radius-l)", + "description": "大尺寸圆角[light: 8px, dark: 8px]", + "scope": "css,scss,less" + }, + "--o-radius-control-s": { + "prefix": [ + "var(--o-radius-control-s)" + ], + "body": "var(--o-radius-control-s)", + "description": "小尺寸控件圆角[light: var(--o-radius-s), dark: var(--o-radius-s)]", + "scope": "css,scss,less" + }, + "--o-radius-control-m": { + "prefix": [ + "var(--o-radius-control-m)" + ], + "body": "var(--o-radius-control-m)", + "description": "中尺寸控件圆角[light: var(--o-radius-m), dark: var(--o-radius-m)]", + "scope": "css,scss,less" + }, + "--o-radius-control-l": { + "prefix": [ + "var(--o-radius-control-l)" + ], + "body": "var(--o-radius-control-l)", + "description": "大尺寸控件圆角[light: var(--o-radius-l), dark: var(--o-radius-l)]", + "scope": "css,scss,less" + }, + "--o-duration-s": { + "prefix": [ + "var(--o-duration-s)" + ], + "body": "var(--o-duration-s)", + "description": "用于退出屏幕的动画[light: 200ms, dark: 200ms]", + "scope": "css,scss,less" + }, + "--o-duration-m1": { + "prefix": [ + "var(--o-duration-m1)" + ], + "body": "var(--o-duration-m1)", + "description": "用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]", + "scope": "css,scss,less" + }, + "--o-duration-m2": { + "prefix": [ + "var(--o-duration-m2)" + ], + "body": "var(--o-duration-m2)", + "description": "用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]", + "scope": "css,scss,less" + }, + "--o-duration-m3": { + "prefix": [ + "var(--o-duration-m3)" + ], + "body": "var(--o-duration-m3)", + "description": "用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]", + "scope": "css,scss,less" + }, + "--o-duration-l": { + "prefix": [ + "var(--o-duration-l)" + ], + "body": "var(--o-duration-l)", + "description": "用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]", + "scope": "css,scss,less" + }, + "--o-duration-xl": { + "prefix": [ + "var(--o-duration-xl)" + ], + "body": "var(--o-duration-xl)", + "description": "用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]", + "scope": "css,scss,less" + }, + "--o-easing-linear": { + "prefix": [ + "var(--o-easing-linear)" + ], + "body": "var(--o-easing-linear)", + "description": "线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]", + "scope": "css,scss,less" + }, + "--o-easing-standard": { + "prefix": [ + "var(--o-easing-standard)" + ], + "body": "var(--o-easing-standard)", + "description": "用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]", + "scope": "css,scss,less" + }, + "--o-easing-standard-in": { + "prefix": [ + "var(--o-easing-standard-in)" + ], + "body": "var(--o-easing-standard-in)", + "description": "用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]", + "scope": "css,scss,less" + }, + "--o-easing-standard-out": { + "prefix": [ + "var(--o-easing-standard-out)" + ], + "body": "var(--o-easing-standard-out)", + "description": "用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]", + "scope": "css,scss,less" + }, + "--o-easing-emphasized": { + "prefix": [ + "var(--o-easing-emphasized)" + ], + "body": "var(--o-easing-emphasized)", + "description": "用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]", + "scope": "css,scss,less" + }, + "--o-easing-emphasized-in": { + "prefix": [ + "var(--o-easing-emphasized-in)" + ], + "body": "var(--o-easing-emphasized-in)", + "description": "用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15), dark: cubic-bezier(0.3, 0, 0.8, 0.15)]", + "scope": "css,scss,less" + }, + "--o-easing-emphasized-out": { + "prefix": [ + "var(--o-easing-emphasized-out)" + ], + "body": "var(--o-easing-emphasized-out)", + "description": "用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1), dark: cubic-bezier(0.05, 0.7, 0.1, 1)]", + "scope": "css,scss,less" + } +} \ No newline at end of file diff --git a/README.md b/README.md index 96ed962275d2be38e65f853d2640edc54f524ab8..536ac5a713bdbf6fec1d5e96b8ed439a1409311e 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,16 @@ # opendesign-components #### 介绍 + The repository of OpenDesign components +# 首次发布 + +`npm publish --access=public` + #### 软件架构 -软件架构说明 +软件架构说明 #### 安装教程 @@ -26,10 +31,9 @@ The repository of OpenDesign components 3. 提交代码 4. 新建 Pull Request - #### 特技 -1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md +1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 diff --git a/package.json b/package.json new file mode 100644 index 0000000000000000000000000000000000000000..89f5c17b44d7e83b62d851edf996f8de6b967f7e --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "opendesign-components", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "dev:portal": "pnpm --filter portal dev", + "dev:lib": "pnpm --filter @opensig/opendesign dev" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "@types/node": "^18.11.9", + "@typescript-eslint/eslint-plugin": "^5.45.0", + "@typescript-eslint/parser": "^5.45.0", + "eslint": "^8.28.0", + "eslint-plugin-vue": "^9.8.0", + "typescript": "^4.6.4" + } +} diff --git a/packages/components/icons1/icons.json b/packages/components/icons1/icons.json new file mode 100644 index 0000000000000000000000000000000000000000..0637a088a01e8ddab3bf3fa98dbe804cbde1a0dc --- /dev/null +++ b/packages/components/icons1/icons.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/packages/components/icons1/index.ts b/packages/components/icons1/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/packages/docs/badge.md b/packages/docs/badge.md new file mode 100644 index 0000000000000000000000000000000000000000..b0e72ebf4b04e4396ccb8800f8487c8382c24036 --- /dev/null +++ b/packages/docs/badge.md @@ -0,0 +1,8 @@ +# Badge 徽标 + +| name | type | 默认值 | 说明 | +| :----- | :--------------- | :----- | -------------------------------------------------------------------- | +| value | string \| number | '' | 可选，显示值 | +| max | number | 99 | 可选，最大值，超过最大值显示${max}+(仅当 value 类型为 number 时生效) | +| offset | number [] | [] | 可选，徽标位置偏移量 | +| dot | boolean | fasle | 可选，是否显示为小红点 | diff --git a/packages/docs/breadcrumb.md b/packages/docs/breadcrumb.md new file mode 100644 index 0000000000000000000000000000000000000000..aaa575a3c8e2dff137bcb22a4a68b07723674454 --- /dev/null +++ b/packages/docs/breadcrumb.md @@ -0,0 +1,15 @@ +# Breadcrumb 面包屑 + +| name | type | 默认值 | 说明 | +| :-------- | :--------------- | :----- | ---------------- | +| separator | string \| number | - | 可选，分隔符字符 | + +# BreadcrumbItem + +| name | type | 默认值 | 说明 | +| :-------- | :--------------------------------------------- | :------- | ---------------------------------------- | +| href | string | - | 可选，链接跳转地址 | +| target | '\_blank' \| '\_parent' \| '\_self' \| '\_top' | '\_self' | 可选，链接跳转方式 | +| to | string \| obeject | - | 可选，路由跳转对象，同 vue-router | +| replace | boolean | false | 可选，路由跳转时，是否覆盖浏览器历史记录 | +| separator | string \| number | - | 可选，分隔符字符 | diff --git a/packages/docs/button.md b/packages/docs/button.md new file mode 100644 index 0000000000000000000000000000000000000000..ac5149bb9df4a650fe2aa831ce8459e0652b3e0c --- /dev/null +++ b/packages/docs/button.md @@ -0,0 +1,20 @@ +# Button 按钮 + +## props + +| name | type | 默认值 | 说明 | +| :------ | :--------------------------------------- | :-------- | :------------- | +| shape | 'large' \| 'normal' \| 'small' | 'normal' | 可选，形状 | +| size | 'mini' \| 'small' \| 'medium' \| 'large' | 'medium' | 可选，尺寸 | +| type | 'primary' \|'outline'\| 'text' \|'link' | 'outline' | 可选，状态 | +| loading | boolean | false | 可选，加载状态 | + +## event + +## expose + +## slot + +| name | 说明 | +| :--- | :------- | +| icon | 按钮图标 | diff --git a/packages/docs/checkbox.md b/packages/docs/checkbox.md new file mode 100644 index 0000000000000000000000000000000000000000..e8e726e25f14acd856d48698ced7135064be66cc --- /dev/null +++ b/packages/docs/checkbox.md @@ -0,0 +1,52 @@ +# Checkbox 多选框 + +## props + +| name | type | 默认值 | 说明 | +| :------------------ | :------------------------ | :----- | -------------------------------- | +| value | string \| number | - | 必选，多选框 value | +| modelValue(v-model) | Array | - | 可选，多选框双向绑定值 | +| defaultChecked | boolean | false | 可选，非受控状态时，默认是否选中 | +| disabled | boolean | false | 可选，是否禁用 | +| indeterminate | boolean | false | 可选，是否为半选状态 | + +## event + +| name | 参数 | 说明 | +| :----- | :------------------------------ | :----------------------------------- | +| change | val: Array; | 双向绑定值改变时，在选中多选框上触发 | + +## expose + +| name | 说明 | +| :------ | :------------- | +| checked | 多选框是否选中 | + +## slot + +| name | 参数 | 说明 | +| :------- | :--------------------------------- | :----------- | +| checkbox | checked:boolean; disabled: boolean | 自定义多选框 | + +# CheckboxGroup 多选框组 + +## props + +| name | type | 默认值 | 说明 | +| :------------------ | :------------------------- | :----------- | -------------------------------------- | +| modelValue(v-model) | Array | - | 可选，多选框组双向绑定值 | +| defaultValue | Array | [] | 可选，非受控状态时，多选框组默认值 | +| disabled | boolean | false | 可选，是否禁用 | +| direction | 'horizontal' \| 'vertical' | 'horizontal' | 可选，排列方向 | +| min | number | - | 可选，多选框组支持选中的最小多选框数量 | +| max | number | - | 可选，多选框组支持选中的最大多选框数量 | + +## event + +| name | 参数 | 说明 | +| :----- | :----------------------------- | :------------- | +| change | val: Array | 状态切换后触发 | + +## expose + +## slot diff --git a/packages/docs/divider.md b/packages/docs/divider.md new file mode 100644 index 0000000000000000000000000000000000000000..12a495ecd242788f89be808c7728dfbdc2fb8590 --- /dev/null +++ b/packages/docs/divider.md @@ -0,0 +1,9 @@ +# Divider 分割线 + +## props + +| name | type | 默认值 | 说明 | +| :-------------- | :------------------------------ | :----------- | -------------------- | +| type | 'solid' \| 'dashed' \| 'dotted' | 'solid' | 可选，分割线类型 | +| direction | 'horizontal' \| 'vertical' | 'horizontal' | 可选，分割线方向 | +| contentPosition | 'left' \| 'center' \| 'right' | 'center' | 可选，自定义内容位置 | diff --git a/packages/docs/global.md b/packages/docs/global.md new file mode 100644 index 0000000000000000000000000000000000000000..a5cb12b338235fa6df0cc9db20281b9a8664cc3a --- /dev/null +++ b/packages/docs/global.md @@ -0,0 +1,43 @@ +# 全局配置 + +## 配置全局样式 + +| 方法名 | 参数 | 返回值 | 说明 | +| :-------- | :------------------------------------- | :----- | :--------------- | +| initSize | (type: 'large' \| 'normal' \| 'small') | -- | 设置全局组件尺寸 | +| initShape | (type: 'normal' \| 'round') | -- | 设置全局组件形状 | + +## 配置全局图标 + +| 方法名 | 参数 | 返回值 | 说明 | +| :----------------- | :---------------- | :----- | :--------------------- | +| initLoadingIcon | (icon: Component) | -- | 设置全局加载按钮图标 | +| initLinkArrowIcon | (icon: Component) | -- | 设置 link 组件箭头图标 | +| initLinkPrefixIcon | (icon: Component) | -- | 设置 link 组件前缀图标 | +| initCloseIcon | (icon: Component) | -- | 设置全局关闭图标 | +| initAddIcon | (icon: Component) | -- | 设置全局添加图标 | + +| 方法名 | 参数 | 默认值 | +| :------ | :------------------------------------ | :-------- | +| color | normal primary success warning danger | normal | +| variant | fill outline text | outline | +| rounded | undefined string 'pill' | undefined | +| size | small normal large | normal | + +# 变量定义都在 var.scss 里，同时使用最外层内定义； + +# 状态类 如果在最外层使用 o-[component]-[status]，在内部可以使用 is-[status] + +# 不同状态通过类改变变量值，而不是新定义多个变量； + +# 变量命名 + +- 边框（bd） `--btn-bd: 1px solid var(--o-color-control1)` +- 边框颜色（bd-color） `--btn-bd-color: var(--o-color-control1)` +- 背景颜色（bg-color） `--btn-bg-color: var(--o-color-control1)` + +# polyfill + +> resize-observer-polyfill +> intersection-observer-polyfill +> 建议在项目使用时引入 diff --git a/packages/docs/input-number.md b/packages/docs/input-number.md new file mode 100644 index 0000000000000000000000000000000000000000..0ceb8d2cae562699395b42a3223925ef80b25ee3 --- /dev/null +++ b/packages/docs/input-number.md @@ -0,0 +1,40 @@ +# Divider 分割线 + +## 说明 + +> currentValue: number|string 数字输入框当前值 + +> realValue: number 数字输入框当前真实值 + +> inputValue: string 输入框框当前值 + +> 数字非法判断：非 number 字符串（Number 无法转换为数字）、不在[min, max]范围内； + +## 设计 + +1. 初始化 currentValue + + `currentValue = modelValue ?? defaultValue` + +- 如果 modelValue 非法，展示该值，并使用删除线样式 +- 如果 defaultValue 非法，展示该值，并使用删除线样式 + +2. 聚焦时（鼠标点击，键盘 Tab 切换） + +- 触发 focus 事件，参数：(realValue, event) + +3. 输入时 + +- 触发`input`事件，参数：(inputValue, event) +- 如果输入值非法，展示该值，并使用删除线样式 + +4. 失焦时 + +- +- 触发`blur`事件，参数：(currentValue, event) + +parse/format + +1. 当 change 事件时，执行 format + +2. diff --git a/packages/docs/input.md b/packages/docs/input.md new file mode 100644 index 0000000000000000000000000000000000000000..77b3ab07f023ce79c6d34d7c4c75dec1dfe3d65c --- /dev/null +++ b/packages/docs/input.md @@ -0,0 +1,46 @@ +# Input 输入框 + +## 说明 + +> `realValue: number|string` 数字输入框当前值 + +> `inputValue: string` 输入框框当前值 + +> `displayValue: string` 输入框展示的值 + +> 数字非法判断：非 number 字符串（Number 无法转换为数字）、不在[min, max]范围内； + +## 设计 + +1. 初始化 realValue + + `realValue = modelValue ?? defaultValue` + +- 如果 `modelValue` 非法，展示该值，并使用删除线样式; +- 如果 `defaultValue` 非法，展示该值，并使用删除线样式; + +2. 聚焦时（鼠标点击，键盘 Tab 切换） + +- 触发 `focus` 事件，参数：`(realValue, e)`; + +3. 输入时 + +- 触发`input`事件，参数：`(inputValue, event)`; +- 如果无 `parse`, 赋值`realValue = inputValue`,触发`update:modelValue`事件，参数`(inputValue)`; + +4. 失焦时 + +- 如果有 `format`, `displayValue = format(realValue)`; +- 如果没有 `format`, `displayValue = realValue`; +- 如果有 `parse`, `realValue = parse(inputValue)`; +- 触发`blur`事件，参数：`(realValue, event)`; +- 如果值改变，触发`change`事件，参数: `(realValue)` +- 触发`update:modelValue`事件，参数: `(realValue)` + +5. Enter 键按下时 + +- 如果有 `format`, `displayValue = format(inputValue)`; +- 如果没有 `format`, `displayValue = inputValue`; +- 触发`pressEnter`事件，参数：`(realValue, KeyboardEvent)`; +- 如果值改变，触发`change`事件，参数: `(realValue)` +- 触发`update:modelValue`事件，参数: `(realValue)` diff --git a/packages/docs/link.md b/packages/docs/link.md new file mode 100644 index 0000000000000000000000000000000000000000..bb23a5b0c2cd7d05ed23dc595aca0a6d0884916f --- /dev/null +++ b/packages/docs/link.md @@ -0,0 +1,28 @@ +# Link 按钮 + +## props + +| name | type | 默认值 | 说明 | +| :--------- | :---------------------------------------------------------- | :------- | :--------------------------------------- | +| href | string | '' | 可选，包含超链接指向的 URL 或 URL 片段。 | +| target | '\_blank' \| '\_parent' \| '\_self' \| '\_top' | 'normal' | 可选，指定在何处显示链接的资源。 | +| type | 'normal' \| 'primary' \| 'warning' \| 'danger' \| 'success' | 'normal' | 可选，链接类型 | +| disabled | boolean | false | 可选，是否禁用 | +| loading | boolean | false | 可选，是否为 loading 状态 | +| iconPrefix | boolean | false | 可选，前缀图标 | +| iconArrow | boolean | false | 可选，图标箭头 | +| hoverable | boolean | false | 可选，hover 时是否显示背景 | + +## event + +| event | 参数 | 说明 | +| :---- | :------------- | :------- | +| click | (e:MouseEvent) | 点击事件 | + +## expose + +## slot + +| name | 说明 | +| :--- | :------- | +| icon | 按钮图标 | diff --git a/packages/docs/menu.md b/packages/docs/menu.md new file mode 100644 index 0000000000000000000000000000000000000000..3f78af70401f587bf4da15e9791fa2bc8439fd3c --- /dev/null +++ b/packages/docs/menu.md @@ -0,0 +1,50 @@ +# Menu 菜单 + +## OMenu + +### props + +| name | type | 默认值 | 说明 | +| :------------------ | :-------------- | :----- | -------------------------------------- | +| modelValue(v-model) | string | - | 可选，双向绑定值 | +| defaultValue | boolean | false | 可选，非受控状态时，默认选中值 | +| expanded(v-model) | Array | - | 可选，双向展开的子菜单值 | +| defaultExpanded | Array | false | 可选，非受控状态时，默认展开的子菜单值 | +| accordion | boolean | false | 可选，是否开启手风琴模式 | +| levelIndent | number | 24 | 可选，层级缩进值 | + +### event + +| name | 参数 | 说明 | +| :-------------- | :------------------- | :--------------------- | +| change | val: string | 选中值切换后触发 | +| expanded-change | val: Array | 展开子菜单值切换后触发 | + +## OSubMenu + +### props + +| name | type | 默认值 | 说明 | +| :---- | :----- | :----- | -------------- | +| value | string | - | 必选，子菜单值 | + +## slot + +| name | 参数 | 说明 | +| :--- | :--- | :--------- | +| icon | | 自定义图标 | + +## OMenuItem + +### props + +| name | type | 默认值 | 说明 | +| :------- | :------ | :----- | ---------------- | +| value | string | - | 必选，菜单选项值 | +| disabled | boolean | false | 可选，是否禁用 | + +## event + +| name | 参数 | 说明 | +| :---- | :--- | :------- | +| click | | 点击触发 | diff --git a/packages/docs/name.md b/packages/docs/name.md new file mode 100644 index 0000000000000000000000000000000000000000..32a5afc1bbda7a112cdf8998d36b1a24b2aa64b1 --- /dev/null +++ b/packages/docs/name.md @@ -0,0 +1,12 @@ +## 变量命名 + +1. 命名规则： `--o-[模块/组件]-[属性]-[状态]` + +2. 模块、组件、属性、状态内部使用 “\_” 连接 + +> 示例： + +```css +--btn-color-inverse +--o-font_size-display4 +``` diff --git a/packages/docs/radio.md b/packages/docs/radio.md new file mode 100644 index 0000000000000000000000000000000000000000..bb6d4e34d96a9b430e270783f2f99476fdef0cfa --- /dev/null +++ b/packages/docs/radio.md @@ -0,0 +1,49 @@ +# Radio 单选框 + +## props + +| name | type | 默认值 | 说明 | +| :------------------ | :-------------------------- | :----- | -------------------------------- | +| value | string \| number \| boolean | - | 必选，单选框 value | +| modelValue(v-model) | string \| number \| boolean | - | 可选，单选框双向绑定值 | +| defaultChecked | boolean | false | 可选，非受控状态时，默认是否选中 | +| disabled | boolean | false | 可选，是否禁用 | + +## event + +| name | 参数 | 说明 | +| :----- | :------------------------------- | :----------------------------------- | +| change | val: string \| number \| boolean | 双向绑定值改变时，在选中单选框上触发 | + +## expose + +| name | type | 说明 | +| :------ | :------ | :------------- | +| checked | boolean | 单选框是否选中 | + +## slot + +| name | 参数 | 说明 | +| :---- | :--------------------------------- | :----------- | +| radio | checked:boolean; disabled: boolean | 自定义单选框 | + +# RadioGroup 单选框组 + +## props + +| name | type | 默认值 | 说明 | +| :------------------ | :-------------------------- | :----------- | ---------------------------------- | +| modelValue(v-model) | string \| number \| boolean | - | 可选，单选框组双向绑定值 | +| defaultValue | string \| number \| boolean | '' | 可选，非受控状态时，单选框组默认值 | +| disabled | boolean | false | 可选，是否禁用 | +| direction | 'horizontal' \| 'vertical' | 'horizontal' | 可选，排列方向 | + +## event + +| name | 参数 | 说明 | +| :----- | :------------------------------- | :------------- | +| change | val: string \| number \| boolean | 状态切换后触发 | + +## expose + +## slot diff --git a/packages/docs/rate.md b/packages/docs/rate.md new file mode 100644 index 0000000000000000000000000000000000000000..de58c4814c0e3db8da9c34b30eaf870b9c79c0ac --- /dev/null +++ b/packages/docs/rate.md @@ -0,0 +1,27 @@ +# Rate 评分 + +## props + +| name | type | 默认值 | 说明 | +| :------------------ | :--------------------------------------------- | :------- | -------------------------- | +| count | number | 5 | 可选，评分数量 | +| modelValue(v-model) | number | - | 可选，双向绑定值 | +| defaultValue | number | 0 | 可选，非受控状态时，默认值 | +| size | 'large' \| 'normal' \| 'small' | 'normal' | 标签尺寸 | +| color | 'normal' \| 'primary' \| 'warning' \| 'danger' | 'normal' | 标签颜色 | +| readonly | boolean | false | 可选，是否只读 | +| allowHalf | boolean | false | 可选，是否支持半选 | +| clearable | boolean | false | 可选，是否支持可清 | +| 空 | + +## event + +| name | 参数 | 说明 | +| :----- | :---------- | :------------------- | +| change | val: number | 双向绑定值改变时触发 | + +## slot + +| name | 参数 | 说明 | +| :--- | :--- | :------------- | +| icon | - | 自定义评分图标 | diff --git a/packages/docs/select.md b/packages/docs/select.md new file mode 100644 index 0000000000000000000000000000000000000000..bcbeb9899cb7b0f6b828849f0a515176a3a9d16f --- /dev/null +++ b/packages/docs/select.md @@ -0,0 +1,26 @@ +# Select 下拉选择器 + +## props + +| name | type | 默认值 | 说明 | +| :-------------- | :------------------------------- | :----------------- | ------------------------------------------------------------------- | +| modelValue | string \| number（v-model） | -- | 必选，开关状态 | +| shape | ShapeT | 'normal' | 可选，形状: large \| normal \| small | +| size | SizeT | 'normal' | 可选，形状 normal \| round | +| disabled | boolean | false | 可选，形状 | +| placeholder | string | 'please select...' | 可选，提示文本 | +| loading | boolean | false | 可选，加载状态 | +| beforeChange | function | ()=>true | 可选，return Promise. resolve(true)继续切换，resolve(false)阻止切换 | +| optionWrapClass | string | '' | 可选，下拉的自定义类 | +| optionPosition | PopupPositionT | 'bl' | 可选，下拉的位置 | +| optionWidthMode | 'auto' \| 'min-width' \| 'width' | 'min-width' | 可选，下拉的宽度适配方式 | + +## event + +| name | 参数 | 说明 | +| :----- | :-------------------------- | :------------- | +| change | (value: boolean; ev: Event) | 选择切换后触发 | + +## expose + +## slot diff --git a/packages/docs/switch.md b/packages/docs/switch.md new file mode 100644 index 0000000000000000000000000000000000000000..eb0a7e4a56f61e881f98ab32dcc82ec2de2e0dba --- /dev/null +++ b/packages/docs/switch.md @@ -0,0 +1,30 @@ +# Switch 开关 + +## props + +| name | type | 默认值 | 说明 | +| :------------------ | :-------------------------------------------- | :------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| modelValue(v-model) | string \| number \| boolean | - | 可选，双向绑定值 | +| checkedValue | string \| number \| boolean | true | 可选，选中状态对应值 | +| uncheckedValue | string \| number \| boolean | false | 可选，未选中状态对应值 | +| defaultChecked | boolean | false | 非受控状态时，默认是否选中 | +| size | 'large' \| 'normal' \| 'small' | 'normal' | 可选，开关尺寸 | +| shape | 'normal' \| 'round' | 'normal' | 可选，开关形状 | +| disabled | boolean | false | 可选，是否禁用 | +| loading | boolean | false | 可选，是否加载中 | +| beforeChange | (val: boolean): Promise\ \| boolean | - | 状态改变前的钩子函数，返回 true 或者返回 promise 且 resolve(true)则继续切换，返回 false 或者返回 promise 且被 reject 或 resolve(false)则阻止切换， | + +## event + +| name | 参数 | 说明 | +| :----- | :-------------- | :------------- | +| change | value: boolean; | 状态切换后触发 | + +## expose + +## slot + +| name | 说明 | +| :--- | :--------------------- | +| on | 自定义开启状态文字内容 | +| off | 自定义关闭状态文字内容 | diff --git a/packages/docs/tab.md b/packages/docs/tab.md new file mode 100644 index 0000000000000000000000000000000000000000..50d3737cfc69e59ebd0cfd17ae4519bed7b2507c --- /dev/null +++ b/packages/docs/tab.md @@ -0,0 +1,48 @@ +# Tab 页签 + +## props + +### OTabs + +| name | type | 默认值 | 说明 | +| :--------- | :-------------------------- | :----- | ------------------------------------ | +| modelValue | string \| number（v-model） | '' | 可选，开关状态 | +| lazy | boolean | false | 可选，是否在首次激活标签时再挂载内容 | +| addable | boolean | false | 可选，是否可以添加页签 | + +### OTabPane + +| name | type | 默认值 | 说明 | +| :------------ | :--------------- | :-------------- | ------------------------------------ | +| value | string \| number | instance.uid | 可选，tab id | +| label | string | undefined | 可选，页签文本 | +| transition | string | o-fade-up-enter | 可选，页签切换时过渡动画 | +| lazy | boolean | false | 可选，是否在首次激活标签时再挂载内容 | +| unmountOnHide | boolean | false | 可选，是否在未激活时卸载页签内容 | +| disabled | boolean | false | 可选，是否禁用选中 | +| closable | boolean | false | 可选，是否可以删除 | + +## event + +### OTabs + +| name | 参数 | 说明 | +| :----- | :---------------------------------------------------- | :------------- | +| change | (value: string \| number, oldValue: string \| number) | 页签切换后触发 | +| delete | (value: string \| number ) | 页签删除后触发 | + +## expose + +## slot + +### OTabs + +| name | 说明 | +| :--- | :------------------- | +| act | 页签右侧额外内容插槽 | + +### OTabPane + +| name | 说明 | +| :--- | :------- | +| nav | 页签插槽 | diff --git a/packages/docs/table.md b/packages/docs/table.md new file mode 100644 index 0000000000000000000000000000000000000000..3706aa49a2281a58a3227584349fea3c8d87cb1c --- /dev/null +++ b/packages/docs/table.md @@ -0,0 +1,48 @@ +# Table 表格 + +## props + +### OTabs + +| name | type | 默认值 | 说明 | +| :--------- | :-------------------------- | :----- | ------------------------------------ | +| modelValue | string \| number（v-model） | '' | 可选，开关状态 | +| lazy | boolean | false | 可选，是否在首次激活标签时再挂载内容 | +| addable | boolean | false | 可选，是否可以添加页签 | + +### OTabPane + +| name | type | 默认值 | 说明 | +| :------------ | :--------------- | :-------------- | ------------------------------------ | +| value | string \| number | instance.uid | 可选，tab id | +| label | string | undefined | 可选，页签文本 | +| transition | string | o-fade-up-enter | 可选，页签切换时过渡动画 | +| lazy | boolean | false | 可选，是否在首次激活标签时再挂载内容 | +| unmountOnHide | boolean | false | 可选，是否在未激活时卸载页签内容 | +| disabled | boolean | false | 可选，是否禁用选中 | +| closable | boolean | false | 可选，是否可以删除 | + +## event + +### OTabs + +| name | 参数 | 说明 | +| :----- | :---------------------------------------------------- | :------------- | +| change | (value: string \| number, oldValue: string \| number) | 页签切换后触发 | +| delete | (value: string \| number ) | 页签删除后触发 | + +## expose + +## slot + +### OTabs + +| name | 说明 | +| :--- | :------------------- | +| act | 页签右侧额外内容插槽 | + +### OTabPane + +| name | 说明 | +| :--- | :------- | +| nav | 页签插槽 | diff --git a/packages/docs/tag.md b/packages/docs/tag.md new file mode 100644 index 0000000000000000000000000000000000000000..53dd9197f642208cabf09b3e3768318aadcfc512 --- /dev/null +++ b/packages/docs/tag.md @@ -0,0 +1,27 @@ +# Tag 标签 + +## props + +| name | type | 默认值 | 说明 | +| :--------------- | :--------------------------------------------- | :------- | ------------------------------------------------------- | +| status | 'normal' \| 'success' \| 'warning' \| 'danger' | 'normal' | 标签状态 | +| bordered | boolean | false | 是否有边框 | +| size | 'large' \| 'normal' \| 'small' | 'normal' | 标签尺寸 | +| shape | 'normal' \| 'round' | 'normal' | 标签形状 | +| closable | boolean | false | 是否可关闭 | +| checkable | boolean | false | 是否可选中 | +| checked(v-model) | boolean | false | 是否被选中（仅 checkable 为 true 生效） | +| defaultChecked | boolean | false | 非受控状态时，默认是否选中（仅 checkable 为 true 生效） | + +## event + +| name | 参数 | 说明 | +| :---- | :----------- | :----------- | +| close | | 值改变时触发 | +| check | val: boolean | 选中时触发 | + +## slot + +| name | 说明 | +| :--- | :------- | +| icon | 按钮图标 | diff --git a/packages/opendesign/.gitignore b/packages/opendesign/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..a717f79be4849ddf016c34e0eab6b3e29aecadb1 --- /dev/null +++ b/packages/opendesign/.gitignore @@ -0,0 +1,28 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +src/components/icons +es +lib \ No newline at end of file diff --git a/packages/opendesign/README.md b/packages/opendesign/README.md new file mode 100644 index 0000000000000000000000000000000000000000..b6adf0304ef99a3e0539fa367c8cac32584a6a92 --- /dev/null +++ b/packages/opendesign/README.md @@ -0,0 +1,3 @@ +# opendesign components + +- vue3 components for opendesign diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json new file mode 100644 index 0000000000000000000000000000000000000000..67d374731d2773226bf6e853e43a59e88825c7ee --- /dev/null +++ b/packages/opendesign/package.json @@ -0,0 +1,41 @@ +{ + "name": "@opensig/opendesign", + "version": "0.0.9", + "main": "lib/index.js", + "module": "es/index.mjs", + "types": "es/index.d.ts", + "typings": "lib/index.d.ts", + "unpkg": "dist/opendesign.min.js", + "files": [ + "es", + "lib", + "dist" + ], + "keywords": [ + "opendesign", + "vue3 components" + ], + "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" + }, + "peerDependencies": { + "vue": "^3.1.0" + }, + "devDependencies": { + "@opensig/opensig-scripts": "workspace:^0.0.1", + "@types/lodash-es": "^4.17.6", + "typescript": "^4.6.4", + "vue": "^3.2.41", + "vue-tsc": "^1.0.13" + }, + "dependencies": { + "intersection-observer-polyfill": "^0.1.0", + "lodash-es": "^4.17.21", + "resize-observer-polyfill": "^1.5.1" + } +} diff --git a/packages/opendesign/src/components/_shared/components/client-only.ts b/packages/opendesign/src/components/_shared/components/client-only.ts new file mode 100644 index 0000000000000000000000000000000000000000..04dc3d01c60aaf308cd6e7f7d3281b60ed0fa1c4 --- /dev/null +++ b/packages/opendesign/src/components/_shared/components/client-only.ts @@ -0,0 +1,17 @@ +import { defineComponent, onMounted, ref } from 'vue'; + +/** + * 只渲染一个子元素 + */ +export default defineComponent({ + name: 'ClientOnly', + setup(props, { slots }) { + const isMoutned = ref(false); + onMounted(() => { + isMoutned.value = true; + }); + return () => { + return isMoutned.value ? slots.default?.() : null; + }; + }, +}); diff --git a/packages/opendesign/src/components/_shared/components/html-tag.ts b/packages/opendesign/src/components/_shared/components/html-tag.ts new file mode 100644 index 0000000000000000000000000000000000000000..c8fee7e7ce83b96c7675ae1f363fcb5f05b9949f --- /dev/null +++ b/packages/opendesign/src/components/_shared/components/html-tag.ts @@ -0,0 +1,20 @@ +import { defineComponent, h } from 'vue'; + +/** + * 只渲染一个子元素 + */ +export default defineComponent({ + name: 'HtmlTag', + props: { + tag: { + type: String, + default: 'div' + } + }, + setup(props, { slots, attrs }) { + + return () => { + return h(props.tag, attrs, slots.default?.()); + }; + }, +}); diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts new file mode 100644 index 0000000000000000000000000000000000000000..ead36de1bc3bacdec791eb6a6664699122eb8731 --- /dev/null +++ b/packages/opendesign/src/components/_shared/dom.ts @@ -0,0 +1,101 @@ +import { isArray } from './is'; + +export type DirectionT = 'left' | 'right' | 'top' | 'bottom'; + +export function isElement(el: any) { + return typeof HTMLElement === 'object' + ? el instanceof HTMLElement + : !!(el && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 9) && typeof el.nodeName === 'string'); +} + +export function isDocumentElement(el: HTMLElement | Window) { + return el === window || ['HTML'].includes((el as HTMLElement).tagName); +} +// 获取真实相对父元素 当body没有设置position时，返回html +export function getOffsetElement(el: HTMLElement) { + let offsetEl = el.offsetParent; + if (offsetEl && offsetEl.tagName === 'BODY') { + const stylePosition = window.getComputedStyle(document.body).getPropertyValue('position'); + if (stylePosition === 'static') { + return document.documentElement; + } + } + return offsetEl; +} +// 获取元素scroll值 +export function getScroll(el: HTMLElement | Window = window) { + if (!el) { + return { + scrollLeft: 0, + scrollTop: 0, + }; + } + const isroot = isDocumentElement(el); + return { + scrollLeft: isroot ? window.scrollX : (el as HTMLElement).scrollLeft, + scrollTop: isroot ? window.scrollY : (el as HTMLElement).scrollTop, + }; +} +// 获取元素的可滚动的父元素 +export function getScrollParents(el: HTMLElement) { + const parents: Array = []; + let ele: HTMLElement | null = el; + while (ele && ele !== document.documentElement) { + const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = ele; + if (offsetHeight < scrollHeight || offsetWidth < scrollWidth) { + parents.push(ele); + } + ele = ele.parentElement; + } + return parents; +} +export function getRelativeBounding(e: DOMRect, c: DOMRect) { + return { + top: e.top, + bottom: e.bottom, + left: e.left, + right: e.right, + width: e.width, + height: e.height, + offsetLeft: e.left - c.left, + offsetTop: e.top - c.top, + offsetRight: e.right - c.left, + offsetBottom: e.bottom - c.top, + }; +} +export type RelativeRect = ReturnType; + +export function getElementSize(el: HTMLElement | Window) { + return { + width: (el as Window).innerWidth || (el as HTMLElement).clientWidth, + height: (el as Window).innerHeight || (el as HTMLElement).clientHeight, + offsetWidth: (el as Window).innerWidth || (el as HTMLElement).offsetWidth, + offsetHeight: (el as Window).innerHeight || (el as HTMLElement).offsetHeight, + }; +} + +export function getElementBorder(el: HTMLElement, dir?: DirectionT | DirectionT[]) { + const style = window.getComputedStyle(el); + let d: DirectionT[] = []; + + if (typeof dir === 'string') { + d = [dir]; + } else { + d = isArray(dir) ? dir : ['left', 'right', 'bottom', 'top']; + } + const rlt: { + left?: number; + right?: number; + top?: number; + bottom?: number; + } = {}; + 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/_shared/event.ts b/packages/opendesign/src/components/_shared/event.ts new file mode 100644 index 0000000000000000000000000000000000000000..b8352916d50ad9f60a774bbaaf2afd6f5185eb28 --- /dev/null +++ b/packages/opendesign/src/components/_shared/event.ts @@ -0,0 +1,10 @@ +/** + * 触发元素事件 + */ +export function trigger(el: HTMLElement, type: string) { + const evt = new Event(type, { + bubbles: true, + cancelable: true + }); + el.dispatchEvent(evt); +} \ No newline at end of file diff --git a/packages/opendesign/src/components/_shared/export.ts b/packages/opendesign/src/components/_shared/export.ts new file mode 100644 index 0000000000000000000000000000000000000000..71cb527f7b6c522982d80caf388413e88c9b182a --- /dev/null +++ b/packages/opendesign/src/components/_shared/export.ts @@ -0,0 +1,3 @@ +export { initSize, initShape, initRound } from './global'; + +export * from './init-icons'; \ No newline at end of file diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts new file mode 100644 index 0000000000000000000000000000000000000000..8be32c05f6fac79a408f2f6e3b7282025f7ac3b5 --- /dev/null +++ b/packages/opendesign/src/components/_shared/global.ts @@ -0,0 +1,34 @@ +import { ref } from 'vue'; + +// 尺寸 +export type SizeT = 'large' | 'medium' | 'small'; +export const defaultSize = ref('medium'); +export function initSize(val: SizeT) { + defaultSize.value = val; +} + +// 圆角 +export type RoundT = 'pill' | 'normal' | string; +export const defaultRound = ref<'pill' | 'normal'>('normal'); + +export function initRound(type: 'pill' | 'normal') { + defaultRound.value = type; +} + +// 方向 +export type DirectionT = 'h' | 'v'; + +export type VariantT = 'solid' | 'outline' | 'text'; + +export type ColorT = 'normal' | 'primary' | 'success' | 'warning' | 'danger'; + + +// todo 废弃 +// 形状 +export type ShapeT = 'round' | 'normal'; +export const defaultShape = ref('normal'); +export function initShape(type: ShapeT) { + defaultShape.value = type; +} +// 状态 +export type StatusT = 'normal' | 'primary' | 'warning' | 'danger' | 'success'; diff --git a/packages/opendesign/src/components/_shared/icons.ts b/packages/opendesign/src/components/_shared/icons.ts new file mode 100644 index 0000000000000000000000000000000000000000..317ef013a73aea890d692d42cc2dcde891744885 --- /dev/null +++ b/packages/opendesign/src/components/_shared/icons.ts @@ -0,0 +1,84 @@ +/** + * 定义全局图标，支持全局初始化自定义 + */ +import { Component, shallowRef } from 'vue'; +import { + IconLoading as _IconLoading, + IconLink as IconLink, + IconArrowRight, + IconX, + IconAdd as _IconAdd, + IconMinus as _IconMinus, + IconDone as _IconDone, + IconChevronUp as _IconChevronUp, + IconChevronDown as _IconChevronDown, + IconChevronLeft as _IconChevronLeft, + IconChevronRight as _IconChevronRight, + IconEllipsis as _IconEllipsis, + IconStar as _IconStar +} from '../icons'; + +/** + * 全局loading图标 + */ +export const IconLoading = shallowRef(_IconLoading); + +/** + * link前缀图标 + */ +export const IconLinkPrefix = shallowRef(IconLink); + +/** + * link箭头图标 + */ +export const IconLinkArrow = shallowRef(IconArrowRight); + +/** + * close图标 + */ +export const IconClose = shallowRef(IconX); + +/** + * add图标 + */ +export const IconAdd = shallowRef(_IconAdd); + +/** + * minus图标 + */ +export const IconMinus = shallowRef(_IconMinus); + +/** + * up图标 + */ +export const IconChevronUp = shallowRef(_IconChevronUp); + +/** + * down图标 + */ +export const IconChevronDown = shallowRef(_IconChevronDown); + +/** + * left图标 + */ +export const IconChevronLeft = shallowRef(_IconChevronLeft); + +/** + * right图标 + */ +export const IconChevronRight = shallowRef(_IconChevronRight); + +/** + * done图标 + */ +export const IconDone = shallowRef(_IconDone); + +/** + * 更多...图标 + */ +export const IconEllipsis = shallowRef(_IconEllipsis); + +/** + * star图标 + */ +export const IconStar = shallowRef(_IconStar); diff --git a/packages/opendesign/src/components/_shared/init-icons.ts b/packages/opendesign/src/components/_shared/init-icons.ts new file mode 100644 index 0000000000000000000000000000000000000000..bc9a6e4eba17f4ece04949e74e1000bdf19323c4 --- /dev/null +++ b/packages/opendesign/src/components/_shared/init-icons.ts @@ -0,0 +1,108 @@ +/** + * 定义全局图标，支持全局初始化自定义 + */ +import { Component } from 'vue'; +import { + IconLoading, + IconLinkPrefix, + IconLinkArrow, + IconClose, + IconAdd, + IconMinus, + IconDone, + IconChevronUp, + IconChevronDown, + IconChevronLeft, + IconChevronRight, + IconEllipsis, + IconStar +} from './icons'; + +/** + * 全局loading图标 + */ +export function initIconLoading(icon: Component) { + IconLoading.value = icon; +} + +/** + * link前缀图标 + */ +export function initIconLinkPrefix(icon: Component) { + IconLinkPrefix.value = icon; +} + +/** + * link箭头图标 + */ +export function initIconLinkArrow(icon: Component) { + IconLinkArrow.value = icon; +} + +/** + * close图标 + */ +export function initIconClose(icon: Component) { + IconClose.value = icon; +} + +/** + * add图标 + */ +export function initIconAdd(icon: Component) { + IconAdd.value = icon; +} + +/** + * minus图标 + */ +export function initIconMinus(icon: Component) { + IconMinus.value = icon; +} + +/** + * up图标 + */ +export function initIconChevronUp(icon: Component) { + IconChevronUp.value = icon; +} + +/** + * down图标 + */ +export function initIconChevronDown(icon: Component) { + IconChevronDown.value = icon; +} + +/** + * left图标 + */ +export function initIconChevronLeft(icon: Component) { + IconChevronLeft.value = icon; +} + +/** + * right图标 + */ +export function initIconChevronRight(icon: Component) { + IconChevronRight.value = icon; +} + +/** + * done图标 + */ +export function initIconDone(icon: Component) { + IconDone.value = icon; +} +/** + * 更多...图标 + */ +export function initIconEllipsis(icon: Component) { + IconEllipsis.value = icon; +} +/** + * star图标 + */ +export function initIconStar(icon: Component) { + IconStar.value = icon; +} diff --git a/packages/opendesign/src/components/_shared/is.ts b/packages/opendesign/src/components/_shared/is.ts new file mode 100644 index 0000000000000000000000000000000000000000..b7ad608940700183324303375a9400aeb677fca3 --- /dev/null +++ b/packages/opendesign/src/components/_shared/is.ts @@ -0,0 +1,44 @@ + +const opt = Object.prototype.toString; + +export function isUndefined(val: unknown): val is undefined { + return val === undefined; +} + +export function isNull(val: unknown): val is null { + return opt.call(val) === '[object Null]'; +} + +export function isBoolean(val: unknown): val is boolean { + return opt.call(val) === '[object Boolean]'; +} + +export function isString(val: unknown): val is string { + return opt.call(val) === '[object String]'; +} + +export function isNumber(val: unknown): val is number { + return opt.call(val) === '[object Number]' && !isNaN(val as number); +} + +export function isFunction(val: unknown): val is Function { + return typeof val === 'function'; +} + +export function isArray(val: unknown): val is Array { + return Array.isArray(val); +} + +// 是否是对象或者数组等（key:value 形式） +export function isObject(val: unknown): val is Record { + return val !== null && typeof val === 'object'; +} + +// 是否是纯对象 +export function isPlainObject(val: unknown): val is object { + return opt.call(val) === '[object Object]'; +} + +export const isPromise = (val: unknown): val is Promise => { + return isObject(val) && isFunction(val.then) && isFunction(val.catch); +}; \ No newline at end of file diff --git a/packages/opendesign/src/components/_shared/keycode.ts b/packages/opendesign/src/components/_shared/keycode.ts new file mode 100644 index 0000000000000000000000000000000000000000..0f1520cb9bf5a35d339d169409364107754f41d3 --- /dev/null +++ b/packages/opendesign/src/components/_shared/keycode.ts @@ -0,0 +1,44 @@ +// 键盘 Keycode +export const Enter = { + key: 'Enter', + code: 'Enter', +}; + +export const Esc = { + key: 'Escape', + code: 'Escape', +}; + +export const Backspace = { + key: 'Backspace', + code: 'Backspace', +}; + +export const Tab = { + key: 'Tab', + code: 'Tab', +}; + +export const Space = { + key: '', + code: 'Space', +}; +export const ArrowUp = { + key: 'ArrowUp', + code: 'ArrowUp', +}; + +export const ArrowDown = { + key: 'ArrowDown', + code: 'ArrowDown', +}; + +export const ArrowLeft = { + key: 'ArrowLeft', + code: 'ArrowLeft', +}; + +export const ArrowRight = { + key: 'ArrowRight', + code: 'ArrowRight', +}; diff --git a/packages/opendesign/src/components/_shared/style-class.ts b/packages/opendesign/src/components/_shared/style-class.ts new file mode 100644 index 0000000000000000000000000000000000000000..dd85fdad1cb92f95d4a1105ef1fd07e157c210bc --- /dev/null +++ b/packages/opendesign/src/components/_shared/style-class.ts @@ -0,0 +1,22 @@ +import { computed } from 'vue'; +import { defaultRound } from '../_shared/global'; + +export function getRoundClass(props: any, name: string) { + + return { + class: computed(() => { + if (props.round === 'pill' || (!props.round && defaultRound.value === 'pill')) { + return `o-${name}-round-pill`; + } + return ''; + }), + style: computed(() => { + if (props.round && props.round !== 'pill') { + return { + [`--${name}-radius`]: props.round + }; + } + return {}; + }) + }; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/_shared/tree.ts b/packages/opendesign/src/components/_shared/tree.ts new file mode 100644 index 0000000000000000000000000000000000000000..0b160f7d9fe293d25cde45eb5356ac9a37766426 --- /dev/null +++ b/packages/opendesign/src/components/_shared/tree.ts @@ -0,0 +1,71 @@ +export interface TreeNodeT { + value: string | number; + parent: TreeNodeT | null; + children: Array; +} + +export interface TreeT { + root: TreeNodeT; + getNode(node: TreeNodeT, val: string | number): TreeNodeT | undefined; + getPath(node: TreeNodeT, val: string | number, path: Array): Array | undefined; +} + +export class VTree implements TreeT { + root: TreeNodeT; + constructor(value: string | number, parent: TreeNodeT | null, children: Array = []) { + this.root = { + value, + parent, + children, + }; + } + + getNode(node: TreeNodeT, val: string | number): TreeNodeT | undefined { + if (node.value === val) { + return node; + } + + const children: Array = node.children; + for (let i = 0, len = children.length; i < len; i++) { + const rlt = this.getNode(children[i], val); + if (rlt) { + return rlt; + } + } + } + + getPath(node: TreeNodeT, val: string | number, path: Array): Array | undefined { + const children: Array = node.children; + for (let i = 0, len = children.length; i < len; i++) { + const child = children[i]; + if (child.value === val) { + return [...path, child]; + } + + const rlt = this.getPath(child, val, [...path, child]); + if (rlt) { + return rlt; + } + } + } + + hasSameNode(nodes: Array, val: string | number) { + return nodes.some((item) => item.value === val); + } + + addNode(node: TreeNodeT) { + const parent = node.parent; + if (!parent) { + if (!this.hasSameNode(this.root.children, node.value)) { + node.parent = this.root; + this.root.children.push(node); + } + } else { + const parentNode = this.getNode(this.root, parent.value); + if (parentNode && !this.hasSameNode(parentNode.children, node.value)) { + node.parent = parentNode; + parentNode.children.push(node); + } + } + } +} diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts new file mode 100644 index 0000000000000000000000000000000000000000..aacccf1fe10188797181eca1265b3c26274f53e9 --- /dev/null +++ b/packages/opendesign/src/components/_shared/utils.ts @@ -0,0 +1,82 @@ +import { throttle as _throttle, debounce as _debounce } from 'lodash-es'; +import type { ThrottleSettings, DebounceSettings } from 'lodash-es'; + +// 防抖 +export function debounce) => unknown>(fn: T, wait?: number, ctx?: unknown | null, opts?: ThrottleSettings) { + return _debounce.apply(ctx, [fn, wait, opts]); +} +// 节流 +export function throttle) => unknown>(fn: T, wait?: number, ctx?: unknown | null, opts?: DebounceSettings) { + return _throttle.apply(ctx, [fn, wait, opts]); +} +// 防抖 时间为一个一帧 +export function debounceRAF) => any>(fn: T) { + let handle = 0; + const rlt = (...args: Array) => { + if (handle) { + cancelAnimationFrame(handle); + } + handle = requestAnimationFrame(() => { + fn(...args); + handle = 0; + }); + }; + rlt.cancel = () => { + cancelAnimationFrame(handle); + handle = 0; + }; + return rlt; +} +// 节流 时间为一个一帧 +export function throttleRAF) => unknown>(fn: T) { + let handle = 0; + const rlt = (...args: Array) => { + if (handle) { + return; + } + handle = requestAnimationFrame(() => { + fn(...args); + handle = 0; + }); + }; + rlt.cancel = () => { + cancelAnimationFrame(handle); + handle = 0; + }; + return rlt; +} + +/** + * 颜色池 + */ +class ColorPool { + pool: Array; + tmpPool: Array; + + constructor(pool: Array) { + this.pool = pool; + this.tmpPool = [...pool]; + } + /** + * 返回指定位置颜色，或者从颜色池随机返回一个颜色 + * @param index + * @returns + */ + pick(index?: number): string { + if (index !== undefined) { + return this.pool[index % this.pool.length]; + } + const { length } = this.tmpPool; + if (length === 0) { + this.tmpPool = [...this.pool]; + } + const idx = Math.floor(Math.random() * length); + const color = this.tmpPool[idx]; + this.tmpPool.splice(idx, 1); + + return color; + } +} + +const PrestColor = ['#d9e6c3', '#ebd5be', '#d1e6de', '#e0ceeb', '#ebd3c7', '#e6dada', '#e3deeb', '#dedae6', '#cad0e8', '#cedeeb']; +export const PrestColorPool = new ColorPool(PrestColor); \ No newline at end of file diff --git a/packages/opendesign/src/components/_shared/vue-utils.ts b/packages/opendesign/src/components/_shared/vue-utils.ts new file mode 100644 index 0000000000000000000000000000000000000000..73e401acc48e857f195f4efeaa9741b34045058d --- /dev/null +++ b/packages/opendesign/src/components/_shared/vue-utils.ts @@ -0,0 +1,159 @@ +import { Component, onMounted, ref, Slots, VNode, VNodeTypes, Comment } from 'vue'; +import { isArray } from './is'; + +// 来着vuejs/core +// https://github.com/vuejs/core/blob/main/packages/shared/src/shapeFlags.ts +export const enum ShapeFlags { + ELEMENT = 1, // 普通HTML元素 + FUNCTIONAL_COMPONENT = 1 << 1, //函数式组件 + STATEFUL_COMPONENT = 1 << 2, //有状态组件 + TEXT_CHILDREN = 1 << 3, //文本节点 + ARRAY_CHILDREN = 1 << 4, //数组子节点 + SLOTS_CHILDREN = 1 << 5, //插槽子节点 + TELEPORT = 1 << 6, // teleport组件 + SUSPENSE = 1 << 7, //suspense组件 + COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, //需要被keep-live的有状态组件 + COMPONENT_KEPT_ALIVE = 1 << 9, //已经被keep-alive的有状态组件 + COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT//有状态或函数式组件 +} +/** + * 判断vnode是不是element + */ +export const isElement = (vnode: VNode) => { + return Boolean(vnode && vnode.shapeFlag & ShapeFlags.ELEMENT); +}; +/** + * 判断vnode是不是文本节点 + * 包含注释节点 + */ +export const isTextElement = (vnode: VNode) => { + return Boolean(vnode && vnode.shapeFlag & ShapeFlags.TEXT_CHILDREN); +}; +/** + * 判断vnode是不是vue组件 + * @param vnode vnode节点 + * @param type 组件信息 + */ +export function isComponent(vnode: VNode, type?: VNodeTypes): type is Component { + return Boolean(vnode && vnode.shapeFlag & ShapeFlags.COMPONENT); +} +/** + * 判断vnode是不是vue组件 + */ +export const isSlotsChildren = (vnode: VNode, children?: VNode['children']): children is Slots => { + return Boolean(vnode && vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN); +}; + +/** + * 判断vnode是不是slot的子元素 + */ +export const isArrayChildren = (vn: VNode, children?: VNode['children']): children is VNode[] => { + return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN); +}; + +// TODO +export function useSlotElement(componentName?: string) { + let children: VNode[] | null = null; + const components = []; + + onMounted(() => { + children?.forEach(child => { + console.log(child, isComponent(child)); + if (isComponent(child, child.type)) { + if (componentName && child.type.name === componentName) { + components.push(child); + } + } + }); + }); + return { + setSlotChildren(nodes: VNode[] | undefined) { + if (nodes) { + children = nodes; + } + } + }; +} +export function getFirstComponent(vn: VNode | VNode[]): VNode | null { + if (isArray(vn)) { + for (const child of vn) { + const result = getFirstComponent(child); + if (result) { + return result; + } + } + } else if (isElement(vn) || isComponent(vn) || (isTextElement(vn) && vn.type !== Comment)) { + return vn; + } else if (isArrayChildren(vn, vn.children)) { + for (const child of vn.children) { + const result = getFirstComponent(child); + if (result) { + return result; + } + } + } else if (isSlotsChildren(vn, vn.children)) { + const children = vn.children.default?.(); + if (children) { + const result = getFirstComponent(children); + if (result) { + return result; + } + } + } + return null; +} + + +export const getFirstElement = (vn: VNode | VNode[]): HTMLElement | null => { + if (isArray(vn)) { + for (const child of vn) { + const result = getFirstElement(child); + if (result) { + return result; + } + } + } else if (isElement(vn)) { + return vn.el as HTMLElement; + } else if (isComponent(vn)) { + if ((vn.el as Node).nodeType === 1) { + return vn.el as HTMLElement; + } + if (vn.component) { + const result = getFirstElement(vn.component.subTree); + if (result) { + return result; + }; + } + } else if (isArrayChildren(vn, vn.children)) { + for (const child of vn.children) { + const result = getFirstElement(child); + if (result) { + return result; + } + } + } + return null; +}; + +export function useSlotFirstElement() { + let children: VNode[] | null = null; + const fistElement = ref(null); + + onMounted(() => { + if (children) { + fistElement.value = getFirstElement(children); + console.log(fistElement.value); + + } + }); + return { + setSlot(nodes: VNode[] | undefined) { + if (nodes) { + children = nodes; + console.log(children); + + } + }, + fistElement + }; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/badge/OBadge.vue b/packages/opendesign/src/components/badge/OBadge.vue new file mode 100644 index 0000000000000000000000000000000000000000..0d4408f3f6f35d5ecd157c54e3fcf8d526235e31 --- /dev/null +++ b/packages/opendesign/src/components/badge/OBadge.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue b/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..dbc79427a955604c1fced6e91ebe321a3cb4e7c5 --- /dev/null +++ b/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue b/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue new file mode 100644 index 0000000000000000000000000000000000000000..8b1ba3efd23a4cd5256b37dd033fa9f5c0e7ad47 --- /dev/null +++ b/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue new file mode 100644 index 0000000000000000000000000000000000000000..30cd6db2adab3ce6aeabca66b1069be0f773c977 --- /dev/null +++ b/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue new file mode 100644 index 0000000000000000000000000000000000000000..f2f23a11e630c406bca2fdede7f2ec9fbb849969 --- /dev/null +++ b/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue b/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue new file mode 100644 index 0000000000000000000000000000000000000000..21ae52cf48e51c5123c47fbdf760a2c6221d2086 --- /dev/null +++ b/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue new file mode 100644 index 0000000000000000000000000000000000000000..ee7a4c2d04f0c5e45b857855576012a41c516e90 --- /dev/null +++ b/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/opendesign/src/components/badge/__demo__/IndexBadge.vue b/packages/opendesign/src/components/badge/__demo__/IndexBadge.vue new file mode 100644 index 0000000000000000000000000000000000000000..279380bc3b08b7bebfd2fc5f92372a919199db70 --- /dev/null +++ b/packages/opendesign/src/components/badge/__demo__/IndexBadge.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/opendesign/src/components/badge/index.ts b/packages/opendesign/src/components/badge/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..7ff1738e8901e7ed02aba68c21c7fa17a2e65d2a --- /dev/null +++ b/packages/opendesign/src/components/badge/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _OBadge from './OBadge.vue'; + +const OBadge = Object.assign(_OBadge, { + install(app: App) { + app.component(_OBadge.name, _OBadge); + }, +}); + +export * from './types'; + +export { OBadge }; diff --git a/packages/opendesign/src/components/badge/style/index.scss b/packages/opendesign/src/components/badge/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..cfd05e63b4ff3b161fe4f404b7ec28a12bbb22a6 --- /dev/null +++ b/packages/opendesign/src/components/badge/style/index.scss @@ -0,0 +1,44 @@ +@use './var.scss'; + +.o-badge { + position: relative; + display: inline-block; +} + +.o-badge-content { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + min-width: 20px; + font-size: var(--badge-text-size); + line-height: var(--badge-text-height); + height: var(--badge-text-height); + text-align: center; + color: var(--badge-color); + background-color: var(--badge-bg-color); + padding-left: var(--badge-padding); + padding-right: var(--badge-padding); + border-radius: var(--badge-radius); +} + +.o-badge-dot { + .o-badge-content { + height: var(--badge-dot-size); + width: var(--badge-dot-size); + padding: 0; + border-radius: 50%; + min-width: unset; + } +} + +.o-badge-only { + .o-badge-content { + position: relative; + top: unset; + right: unset; + transform: none; + display: inline-block; + } +} diff --git a/packages/opendesign/src/components/badge/style/index.ts b/packages/opendesign/src/components/badge/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/badge/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/badge/style/var.scss b/packages/opendesign/src/components/badge/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..8cf92c680e1b739c46a3c034943c96c6b73a49c5 --- /dev/null +++ b/packages/opendesign/src/components/badge/style/var.scss @@ -0,0 +1,33 @@ +.o-badge { + --badge-text-size: var(--o-font_size-tip1); + --badge-text-height: var(--o-line_height-tip1); + + --badge-color: var(--o-color-info1); + --badge-bg-color: var(--o-color-control1); + + --badge-radius: var(--o-size-l); + + --badge-padding: 8px; + + --badge-dot-size: 8px; +} + +.o-badge-primary { + --badge-color: var(--o-color-fill1); + --badge-bg-color: var(--o-color-primary1); +} + +.o-badge-success { + --badge-color: var(--o-color-fill1); + --badge-bg-color: var(--o-color-success1); +} + +.o-badge-warning { + --badge-color: var(--o-color-fill1); + --badge-bg-color: var(--o-color-warning1); +} + +.o-badge-danger { + --badge-color: var(--o-color-fill1); + --badge-bg-color: var(--o-color-danger1); +} diff --git a/packages/opendesign/src/components/badge/types.ts b/packages/opendesign/src/components/badge/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..2e14440779a5436022cd2df58e3dd10014541b33 --- /dev/null +++ b/packages/opendesign/src/components/badge/types.ts @@ -0,0 +1,43 @@ +import type { ExtractPropTypes, PropType } from 'vue'; +import type { ColorT } from '../_shared/global'; + +export const badgeProps = { + /** + * 显示值 + */ + value: { + type: [String, Number], + default: '', + }, + /** + * 最大值，超过最大值显示${max}+(仅当 value 类型为 number 时生效) + */ + max: { + type: Number, + default: 99, + }, + /** + * 颜色类型 + * 'normal' | 'primary' | 'success' | 'warning' | 'danger' + */ + color: { + type: String as PropType, + default: 'normal', + }, + /** + * 是否显示为小红点 + */ + dot: { + type: Boolean, + default: false, + } + /** + * 徽标位置偏移量 + */, + offset: { + type: Array as PropType>, + default: () => [], + }, +}; + +export type BadgePropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue b/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue new file mode 100644 index 0000000000000000000000000000000000000000..79553264fe85b20f0e608f887e03a1b3e8e5170b --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue new file mode 100644 index 0000000000000000000000000000000000000000..70f2c25a8794ba3f5fbd30a0921927862d3c90f2 --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbBasic.vue b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..044526444b232d5c0b439863d418cd9a8b5b2e20 --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbBasic.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue new file mode 100644 index 0000000000000000000000000000000000000000..c535768e71762be40a1b57fd962a772febba2260 --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/IndexBreadcrumb.vue b/packages/opendesign/src/components/breadcrumb/__demo__/IndexBreadcrumb.vue new file mode 100644 index 0000000000000000000000000000000000000000..5f1c96e77aa2c40f7d67c5a1cb91bc8f5e736e86 --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/__demo__/IndexBreadcrumb.vue @@ -0,0 +1,12 @@ + + + diff --git a/packages/opendesign/src/components/breadcrumb/index.ts b/packages/opendesign/src/components/breadcrumb/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..8beaad780fbc4f9c1af9932f967d047ef9752f6e --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/index.ts @@ -0,0 +1,20 @@ +import type { App } from 'vue'; + +import _OBreadcrumb from './OBreadcrumb.vue'; +import _OBreadcrumbItem from './OBreadcrumbItem.vue'; + +const OBreadcrumb = Object.assign(_OBreadcrumb, { + install(app: App) { + app.component(_OBreadcrumb.name, _OBreadcrumb); + }, +}); + +const OBreadcrumbItem = Object.assign(_OBreadcrumbItem, { + install(app: App) { + app.component(_OBreadcrumbItem.name, _OBreadcrumbItem); + }, +}); + +export * from './types'; + +export { OBreadcrumb, OBreadcrumbItem }; diff --git a/packages/opendesign/src/components/breadcrumb/provide.ts b/packages/opendesign/src/components/breadcrumb/provide.ts new file mode 100644 index 0000000000000000000000000000000000000000..961ee72ab84453939efdb124834ceedf831af62e --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/provide.ts @@ -0,0 +1,7 @@ +import { InjectionKey, Ref } from 'vue'; + +export interface BreadcrumbInjectT { + separator: Ref; +} + +export const breadcrumbInjectKey: InjectionKey = Symbol('provide-breadcrumb'); diff --git a/packages/opendesign/src/components/breadcrumb/style/index.scss b/packages/opendesign/src/components/breadcrumb/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..4e5e16c386d7df938e83d5cc9a8926479e621212 --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/style/index.scss @@ -0,0 +1,49 @@ +@use './var.scss'; + +.o-breadcrumb { + display: inline-flex; + align-items: center; + color: var(--breadcrumb-color); + font-size: var(--breadcrumb-text-size); + line-height: var(--breadcrumb-text-height); + + a { + color: inherit; + text-decoration: none; + } +} + +.o-breadcrumb-item { + display: inline-flex; + align-items: center; + + &:last-child { + color: var(--breadcrumb-color-active); + font-weight: 500; + + .o-breadcrumb-item-label { + cursor: default; + } + + .o-breadcrumb-item-separator { + display: none; + } + } +} + +.o-breadcrumb-item-label { + cursor: pointer; + &:hover { + color: var(--breadcrumb-color-active); + } +} + +.o-breadcrumb-item-separator { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: var(--breadcrumb-seperator-size); + font-size: var(--breadcrumb-seperator-size); + line-height: 1; + margin: 0 var(--breadcrumb-gap); +} diff --git a/packages/opendesign/src/components/breadcrumb/style/index.ts b/packages/opendesign/src/components/breadcrumb/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/breadcrumb/style/var.scss b/packages/opendesign/src/components/breadcrumb/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..0318102cd6f445b344947f6ec4c7901c19641f49 --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/style/var.scss @@ -0,0 +1,10 @@ +.o-breadcrumb { + --breadcrumb-color: var(--o-color-info3); + --breadcrumb-color-active: var(--o-color-info1); + + --breadcrumb-text-size: var(--o-font_size-text1); + --breadcrumb-text-height: var(--o-line_height-text1); + + --breadcrumb-gap: var(--o-gap-1); + --breadcrumb-seperator-size: var(--o-icon_size-xs); +} diff --git a/packages/opendesign/src/components/breadcrumb/types.ts b/packages/opendesign/src/components/breadcrumb/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..ac9d91bb21c4ff33bb9abc686e7a8e7f5f8ed3c5 --- /dev/null +++ b/packages/opendesign/src/components/breadcrumb/types.ts @@ -0,0 +1,51 @@ +import type { ExtractPropTypes, PropType } from 'vue'; + +export const breadcrumbProps = { + /** + * 分隔符字符 + */ + separator: { + type: [String, Number], + }, +}; + +export type TargetTypeT = '_blank' | '_self' | '_parent' | '_top'; + +export const breadcrumbItemProps = { + /** + * 链接跳转地址 + */ + href: { + type: String, + }, + /** + * 链接跳转方式 + */ + target: { + type: String as PropType, + default: '_self', + }, + /** + * 路由跳转对象 + */ + to: { + type: [String, Object] as PropType>, + }, + /** + * 路由跳转时，是否覆盖浏览器历史记录 + */ + replace: { + type: Boolean, + default: false, + }, + /** + * 分隔符字符 + */ + separator: { + type: [String, Number], + }, +}; + +export type BreadcrumbPropsT = ExtractPropTypes; + +export type BreadcrumbItemPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue new file mode 100644 index 0000000000000000000000000000000000000000..a5cd049c5a62c2d888d504f0c0aa4d34ebe1f1b3 --- /dev/null +++ b/packages/opendesign/src/components/button/OButton.vue @@ -0,0 +1,39 @@ + + diff --git a/packages/opendesign/src/components/button/__demo__/BtnBasic.vue b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..a53a46121026999177b2127f9d67e65a588338a9 --- /dev/null +++ b/packages/opendesign/src/components/button/__demo__/BtnBasic.vue @@ -0,0 +1,85 @@ + + + diff --git a/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue b/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue new file mode 100644 index 0000000000000000000000000000000000000000..2e769dab5aaff23bf6b7e57b3370cb328d96eaa9 --- /dev/null +++ b/packages/opendesign/src/components/button/__demo__/BtnIconSize.vue @@ -0,0 +1,76 @@ + + + diff --git a/packages/opendesign/src/components/button/__demo__/BtnLoading.vue b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue new file mode 100644 index 0000000000000000000000000000000000000000..475ceec11ececa7f370366254db75ca066a27591 --- /dev/null +++ b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue @@ -0,0 +1,28 @@ + + + diff --git a/packages/opendesign/src/components/button/__demo__/BtnRound.vue b/packages/opendesign/src/components/button/__demo__/BtnRound.vue new file mode 100644 index 0000000000000000000000000000000000000000..2af78a5f4dbc458393132294a464db59fe125a08 --- /dev/null +++ b/packages/opendesign/src/components/button/__demo__/BtnRound.vue @@ -0,0 +1,58 @@ + + + diff --git a/packages/opendesign/src/components/button/__demo__/IndexBtn.vue b/packages/opendesign/src/components/button/__demo__/IndexBtn.vue new file mode 100644 index 0000000000000000000000000000000000000000..47f889de512cfa61f298fafc2c14c04ab6c4f980 --- /dev/null +++ b/packages/opendesign/src/components/button/__demo__/IndexBtn.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/opendesign/src/components/button/index.ts b/packages/opendesign/src/components/button/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..5a101088b34b315850bd14990cd01341499392a7 --- /dev/null +++ b/packages/opendesign/src/components/button/index.ts @@ -0,0 +1,14 @@ +import _OButton from './OButton.vue'; +import type { App } from 'vue'; + + +const OButton = Object.assign(_OButton, { + install(app: App) { + app.component(_OButton.name, _OButton); + }, +}); + +export { + OButton, +}; +export * from './types'; diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..ed75acbd706d3f5f703c8eb537404381c5f9fb77 --- /dev/null +++ b/packages/opendesign/src/components/button/style/index.scss @@ -0,0 +1,151 @@ +@use './var.scss'; + +.o-btn { + outline: none; + background-color: transparent; + border: 1px solid transparent; + transition: all var(--o-duration-s) var(--o-easing-standard); + white-space: nowrap; + text-decoration: none; + border-radius: var(--btn-radius); + display: inline-flex; + align-items: center; + justify-content: center; + + &:hover { + cursor: pointer; + } + &.o-btn-disabled { + cursor: not-allowed; + } +} +.o-btn-outline { + color: var(--btn-color); + border: 1px solid var(--btn-bd-color); + &:not(.o-btn-disabled) { + &:hover { + color: var(--btn-color-hover); + border: 1px solid var(--btn-bd-color-hover); + } + + &:active { + color: var(--btn-color-active); + border: 1px solid var(--btn-bd-color-active); + } + &:focus-visible { + border: 1px solid var(--btn-bd-color-active); + } + } +} + +.o-btn-solid { + color: var(--btn-color); + border: 1px solid var(--btn-bd-color); + background-color: var(--btn-bg-color); + &:not(.o-btn-disabled) { + &:hover { + color: var(--btn-color-hover); + border: 1px solid var(--btn-bd-color-hover); + background-color: var(--btn-bg-color-hover); + } + + &:active { + color: var(--btn-color-active); + border: 1px solid var(--btn-bd-color-active); + background-color: var(--btn-bg-color-active); + } + &:focus-visible { + border: 1px solid var(--btn-bd-color-active); + } + } +} +.o-btn-text { + color: var(--btn-color); + background-color: transparent; + + &:not(.o-btn-disabled) { + &:hover { + color: var(--btn-color-hover); + background-color: var(--btn-bg-color-hover); + } + + &:active { + color: var(--btn-color-active); + background-color: var(--btn-bg-color-active); + } + } +} + +.o-btn-disabled { + color: var(--btn-color-disabled); + border: 1px solid var(--btn-bd-color-disabled); + background-color: var(--btn-bg-color-disabled); +} + +.o-btn-mini { + padding: 0 4px; + height: var(--o-size-xs); + font-size: var(--o-font_size-tip2); + line-height: var(--o-line_height-tip2); + + &.o-btn-icon-only { + width: var(--o-size-xs); + } + .o-btn-icon { + margin-right: 2px; + } +} +.o-btn-small { + padding: 0 7px; + height: var(--o-size-s); + font-size: var(--o-font_size-tip1); + line-height: var(--o-line_height-tip1); + + &.o-btn-icon-only { + width: var(--o-size-s); + } + .o-btn-icon { + margin-right: 2px; + } +} + +.o-btn-medium { + padding: 0 15px; + height: var(--o-size-m); + font-size: var(--o-font_size-text1); + line-height: var(--o-line_height-text1); + + &.o-btn-icon-only { + width: var(--o-size-m); + } +} + +.o-btn-large { + padding: 0 19px; + height: var(--o-size-l); + font-size: var(--o-font_size-text2); + line-height: var(--o-line_height-text2); + + &.o-btn-icon-only { + width: var(--o-size-l); + } +} + +.o-btn-icon-only { + padding: 0; +} +.o-btn-icon { + display: inline-flex; + align-items: center; + margin-right: 6px; + > svg { + vertical-align: top; + } + + .o-btn-icon-only & { + margin-right: 0; + display: flex; + align-items: center; + justify-content: center; + } +} diff --git a/packages/opendesign/src/components/button/style/index.ts b/packages/opendesign/src/components/button/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/button/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..6e442ede811068a3c050bda094a679532a2b5f0f --- /dev/null +++ b/packages/opendesign/src/components/button/style/var.scss @@ -0,0 +1,175 @@ +.o-btn { + --btn-color: var(--o-color-info2); + --btn-color-hover: var(--o-color-info1); + --btn-color-active: var(--o-color-info1); + + --btn-bd-color: var(--o-color-control1); + --btn-bd-color-hover: var(--o-color-control2); + --btn-bd-color-active: var(--o-color-control3); + --btn-bd-color-disabled: var(--o-color-control1); + + &.o-btn-solid { + --btn-color: var(--o-color-info1-inverse); + --btn-color-hover: var(--o-color-info1-inverse); + --btn-color-active: var(--o-color-info1-inverse); + --btn-color-disabled: var(--o-color-info1-inverse); + + --btn-bg-color: var(--o-color-control1-light); + --btn-bg-color-hover: var(--o-color-control2-light); + --btn-bg-color-active: var(--o-color-control3-light); + --btn-bd-color-disabled: var(--o-color-control4-light); + + --btn-bd-color: var(--o-color-control1-light); + --btn-bd-color-hover: var(--o-color-control2-light); + --btn-bd-color-active: var(--o-color-control3-light); + --btn-bg-color-disabled: var(--o-color-control4-light); + } + + &.o-btn-text { + --btn-bd-color-disabled: transparent; + --btn-bg-color-hover: var(--o-color-control1-light); + --btn-bg-color-active: var(--o-color-control2-light); + } +} +.o-btn-normal { + --btn-color-disabled: var(--o-color-info4); + &.o-btn-solid { + --btn-color: var(--o-color-info2); + --btn-color-hover: var(--o-color-info2); + --btn-color-active: var(--o-color-info2); + --btn-color-disabled: var(--o-color-info4); + } +} +.o-btn-primary { + --btn-color: var(--o-color-primary1); + --btn-color-hover: var(--o-color-primary2); + --btn-color-active: var(--o-color-primary3); + --btn-color-disabled: var(--o-color-primary4); + + --btn-bd-color: var(--o-color-primary1); + --btn-bd-color-hover: var(--o-color-primary2); + --btn-bd-color-active: var(--o-color-primary3); + --btn-bd-color-disabled: var(--o-color-primary4); + + &.o-btn-solid { + --btn-bg-color: var(--o-color-primary1); + --btn-bg-color-hover: var(--o-color-primary2); + --btn-bg-color-active: var(--o-color-primary3); + --btn-bg-color-disabled: var(--o-color-primary4); + + --btn-bd-color: var(--o-color-primary1); + --btn-bd-color-hover: var(--o-color-primary2); + --btn-bd-color-active: var(--o-color-primary3); + --btn-bd-color-disabled: var(--o-color-primary4-light); + } + + &.o-btn-text { + --btn-bd-color-disabled: transparent; + --btn-bg-color-hover: var(--o-color-primary1-light); + --btn-bg-color-active: var(--o-color-primary2-light); + } +} +.o-btn-success { + --btn-color: var(--o-color-success1); + --btn-color-hover: var(--o-color-success2); + --btn-color-active: var(--o-color-success3); + --btn-color-disabled: var(--o-color-success4); + + --btn-bd-color: var(--o-color-success1); + --btn-bd-color-hover: var(--o-color-success2); + --btn-bd-color-active: var(--o-color-success3); + --btn-bd-color-disabled: var(--o-color-success4); + + &.o-btn-solid { + --btn-bg-color: var(--o-color-success1); + --btn-bg-color-hover: var(--o-color-success2); + --btn-bg-color-active: var(--o-color-success3); + --btn-bg-color-disabled: var(--o-color-success4); + + --btn-bd-color: var(--o-color-success1); + --btn-bd-color-hover: var(--o-color-success2); + --btn-bd-color-active: var(--o-color-success3); + } + + &.o-btn-text { + --btn-bd-color-disabled: transparent; + --btn-bg-color-hover: var(--o-color-success1-light); + --btn-bg-color-active: var(--o-color-success2-light); + } +} +.o-btn-warning { + --btn-color: var(--o-color-warning1); + --btn-color-hover: var(--o-color-warning2); + --btn-color-active: var(--o-color-warning3); + --btn-color-disabled: var(--o-color-warning4); + + --btn-bd-color: var(--o-color-warning1); + --btn-bd-color-hover: var(--o-color-warning2); + --btn-bd-color-active: var(--o-color-warning3); + --btn-bd-color-disabled: var(--o-color-warning4); + + &.o-btn-solid { + --btn-bg-color: var(--o-color-warning1); + --btn-bg-color-hover: var(--o-color-warning2); + --btn-bg-color-active: var(--o-color-warning3); + --btn-bg-color-disabled: var(--o-color-warning4); + + --btn-bd-color: var(--o-color-warning1); + --btn-bd-color-hover: var(--o-color-warning2); + --btn-bd-color-active: var(--o-color-warning3); + } + + &.o-btn-text { + --btn-bd-color-disabled: transparent; + --btn-bg-color-hover: var(--o-color-warning1-light); + --btn-bg-color-active: var(--o-color-warning2-light); + } + + &.o-btn-disabled { + --btn-color: var(--o-color-warning4); + --btn-bg-color: var(--o-color-warning4); + --btn-bd-color: var(--o-color-warning4); + } +} +.o-btn-danger { + --btn-color: var(--o-color-danger1); + --btn-color-hover: var(--o-color-danger2); + --btn-color-active: var(--o-color-danger3); + --btn-color-disabled: var(--o-color-danger4); + + --btn-bd-color: var(--o-color-danger1); + --btn-bd-color-hover: var(--o-color-danger2); + --btn-bd-color-active: var(--o-color-danger3); + --btn-bd-color-disabled: var(--o-color-danger4); + + &.o-btn-solid { + --btn-bg-color: var(--o-color-danger1); + --btn-bg-color-hover: var(--o-color-danger2); + --btn-bg-color-active: var(--o-color-danger3); + --btn-bg-color-disabled: var(--o-color-danger4); + + --btn-bd-color: var(--o-color-danger1); + --btn-bd-color-hover: var(--o-color-danger2); + --btn-bd-color-active: var(--o-color-danger3); + } + + &.o-btn-text { + --btn-bd-color-disabled: transparent; + --btn-bg-color-hover: var(--o-color-danger1-light); + --btn-bg-color-active: var(--o-color-danger2-light); + } +} + +.o-btn-small { + --btn-radius: var(--o-radius-control-s); +} +.o-btn-medium { + --btn-radius: var(--o-radius-control-m); +} +.o-btn-large { + --btn-radius: var(--o-radius-control-l); +} + +.o-btn-round-pill { + --btn-radius: var(--o-size-l); +} diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..98dcbc5390f2528486e2c5540e1b5e73fc561df0 --- /dev/null +++ b/packages/opendesign/src/components/button/types.ts @@ -0,0 +1,53 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { RoundT, ColorT, VariantT } from '../_shared/global'; + +export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link' + +export const buttonProps = { + /** + * 颜色类型：ColorT + */ + color: { + type: String as PropType, + default: 'normal' + }, + /** + * 按钮类型：ColorT + */ + variant: { + type: String as PropType, + default: 'outline' + }, + /** + * 按钮尺寸：SizeT + */ + size: { + type: String as PropType<'mini' | 'small' | 'medium' | 'large'> + }, + /** + * 圆角值 + */ + round: { + type: String as PropType + }, + /** + * 是否为loading状态 + */ + loading: { + type: Boolean + }, + /** + * 是否为禁用状态 + */ + disabled: { + type: Boolean + }, + /** + * 链接跳转 + */ + href: { + type: String, + } +}; + +export type ButtonPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/card/OCard.vue b/packages/opendesign/src/components/card/OCard.vue new file mode 100644 index 0000000000000000000000000000000000000000..6c8ae1552625724fde96b9fdaf9611b26df3c765 --- /dev/null +++ b/packages/opendesign/src/components/card/OCard.vue @@ -0,0 +1,65 @@ + + diff --git a/packages/opendesign/src/components/card/__demo__/CardBasic.vue b/packages/opendesign/src/components/card/__demo__/CardBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..2ef7ed1657f2b088afcb21a3602ae008f3042ac8 --- /dev/null +++ b/packages/opendesign/src/components/card/__demo__/CardBasic.vue @@ -0,0 +1,150 @@ + + + diff --git a/packages/opendesign/src/components/card/__demo__/IndexCard.vue b/packages/opendesign/src/components/card/__demo__/IndexCard.vue new file mode 100644 index 0000000000000000000000000000000000000000..ab6c750493b3a788a447b660f973d67b9a7b0601 --- /dev/null +++ b/packages/opendesign/src/components/card/__demo__/IndexCard.vue @@ -0,0 +1,10 @@ + + + diff --git a/packages/opendesign/src/components/card/index.ts b/packages/opendesign/src/components/card/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..99344ab4876f11b40e806c51c4a8f600252f4863 --- /dev/null +++ b/packages/opendesign/src/components/card/index.ts @@ -0,0 +1,12 @@ +import _OCard from './OCard.vue'; +import type { App } from 'vue'; + +const OCard = Object.assign(_OCard, { + install(app: App) { + app.component(_OCard.name, _OCard); + }, +}); + +export { + OCard, +}; diff --git a/packages/opendesign/src/components/card/style/index.scss b/packages/opendesign/src/components/card/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..624bb5471e748dedaef0f53873e28a69cf426184 --- /dev/null +++ b/packages/opendesign/src/components/card/style/index.scss @@ -0,0 +1,114 @@ +@use './var.scss'; + +.o-card { + background-color: var(--o-color-control-light); + border-radius: var(--card-radius); + overflow: hidden; + display: flex; +} +.o-card-cover { + flex-shrink: 0; +} +.o-card-cover-v { + padding: 8px 8px 0; +} +.o-card-cover-h { + padding: 8px 0 8px 8px; +} +.o-card-cover-hr { + padding: 8px 8px 8px 0; +} + +.o-card-only-cover { + padding: 0; +} + +.o-card-cover-img { + width: 100%; + border-radius: calc(var(--card-radius) / 2); + &.is-full { + height: 100%; + } +} + +.o-card-title { + font-size: var(--o-font_size-h3); + line-height: var(--o-line_height-h3); + color: var(--o-color-info1); + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: var(--card-title-max-row); + -webkit-box-orient: vertical; +} + +.o-card-main { + padding: var(--card-main-padding); + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1; +} + +.o-card-content { + font-size: var(--o-font_size-text1); + line-height: var(--o-line_height-text1); + color: var(--o-color-info2); + .o-card-title + & { + margin-top: 12px; + } +} +.o-card-detail { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: var(--card-detail-max-row); + -webkit-box-orient: vertical; +} + +.o-card-hoverable { + position: relative; + cursor: pointer; + transition: box-shadow var(--o-easing-standard) var(--o-duration-m2); + + &:hover { + box-shadow: var(--o-shadow-2); + .o-card-cover img { + transform: scale(1.05); + } + } + &:active { + box-shadow: var(--o-shadow-1); + .o-card-cover img { + transform: scale(1.02); + } + } +} +.o-card-bottom { + margin-top: 24px; + font-size: var(--o-font_size-tip1); + line-height: var(--o-line_height-tip1); + color: var(--o-color-info3); +} +.o-card-layout-v { + display: flex; + flex-direction: column; +} +.o-card-layout-h { + display: flex; + flex-direction: row; +} +.o-card-layout-hr { + display: flex; + flex-direction: row-reverse; +} +.o-card-cover-h, +.o-card-cover-hr { + width: var(--card-h-cover-width); +} + +.o-card-large { + .o-card-main { + padding: 24px 32px; + } +} diff --git a/packages/opendesign/src/components/card/style/index.ts b/packages/opendesign/src/components/card/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..8da214d055299fb83f830967b3af4b7f67966a5e --- /dev/null +++ b/packages/opendesign/src/components/card/style/index.ts @@ -0,0 +1,3 @@ +import '../../style'; +import '../../figure/style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/card/style/var.scss b/packages/opendesign/src/components/card/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..9475659ed78d94cf479aafe58764f483381ff854 --- /dev/null +++ b/packages/opendesign/src/components/card/style/var.scss @@ -0,0 +1,13 @@ +.o-card { + --card-radius: var(--o-radius-control-l); + --card-title-max-row: 0; + --card-detail-max-row: 0; + --card-main-padding: 24px; +} + +.o-card-medium { + --card-h-cover-width: 274px; +} +.o-card-large { + --card-h-cover-width: 442px; +} diff --git a/packages/opendesign/src/components/card/types.ts b/packages/opendesign/src/components/card/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..0f4a32fdd7d1e8f1a5b13e1d855959d9bf37c33a --- /dev/null +++ b/packages/opendesign/src/components/card/types.ts @@ -0,0 +1,75 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export const dialogProps = { + /** + * 封面 + */ + layout: { + type: String as PropType<'h' | 'v' | 'hr'>, + default: 'v' + }, + /** + * 封面 + */ + cover: { + type: String, + }, + /** + * 封面长宽比 + */ + coverRatio: { + type: Number, + }, + /** + * 标题 + */ + title: { + type: String, + }, + /** + * 标题 + */ + content: { + type: String, + }, + /** + * 可hover + */ + hoverable: { + type: Boolean, + }, + /** + * cover classname + */ + coverClass: { + type: String, + }, + /** + * 尺寸 + */ + size: { + type: String as PropType<'medium' | 'large'>, + default: 'medium' + }, + /** + * 标题最大行数 + */ + titleMaxRow: { + type: Number, + }, + /** + * 详情最大行数 + */ + detailMaxRow: { + type: Number, + }, + /** + * 链接跳转 + */ + href: { + type: String, + } + +}; + +export type DialogPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/cascader/OCascader.vue b/packages/opendesign/src/components/cascader/OCascader.vue new file mode 100644 index 0000000000000000000000000000000000000000..13d95d0eb98a347899766304273a4120e4502343 --- /dev/null +++ b/packages/opendesign/src/components/cascader/OCascader.vue @@ -0,0 +1,138 @@ + + + diff --git a/packages/opendesign/src/components/cascader/__demo__/CascaderBasic.vue b/packages/opendesign/src/components/cascader/__demo__/CascaderBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..b301008d85dfe5d5112ee45a98699cbc573cb641 --- /dev/null +++ b/packages/opendesign/src/components/cascader/__demo__/CascaderBasic.vue @@ -0,0 +1,120 @@ + + + diff --git a/packages/opendesign/src/components/cascader/__demo__/IndexCascader.vue b/packages/opendesign/src/components/cascader/__demo__/IndexCascader.vue new file mode 100644 index 0000000000000000000000000000000000000000..51dd708aa207c272b9f2347ba2123af35344141e --- /dev/null +++ b/packages/opendesign/src/components/cascader/__demo__/IndexCascader.vue @@ -0,0 +1,10 @@ + + + diff --git a/packages/opendesign/src/components/cascader/cascader.ts b/packages/opendesign/src/components/cascader/cascader.ts new file mode 100644 index 0000000000000000000000000000000000000000..1d318e3250223cfb05bec9028bff839c40d9ac08 --- /dev/null +++ b/packages/opendesign/src/components/cascader/cascader.ts @@ -0,0 +1,149 @@ +import { isArray, isUndefined } from '../_shared/is'; +import { CascaderValueT } from './types'; +import { CascaderOptionT } from './types'; + +interface CascaderNodeT { + value: string | number; + label?: string; + depth: number; + parent: CascaderNodeT | null; + children: CascaderNodeT[]; + isLeaf: boolean; +} + +export interface ColumnInfoT { + value: string | number; + label?: string; + depth: number; + isLeaf: boolean; + isActive: boolean; +} + +const DFS = (options: Array, parentNode: CascaderNodeT, depth: number) => { + for (let i = 0, len = options.length; i < len; i++) { + const item = options[i]; + let node: CascaderNodeT = { + value: item.value, + label: item.label, + parent: parentNode, + depth: depth + 1, + children: [], + isLeaf: true, + }; + parentNode.children.push(node); + + if (item.children && item.children.length) { + node.isLeaf = false; + DFS(item.children, node, depth + 1); + } + } +}; + +export default class CascaderTree { + root: CascaderNodeT; + constructor() { + this.root = { + value: NaN, + label: '', + depth: 0, + parent: null, + children: [], + isLeaf: true, + }; + } + + updateTree(options: Array) { + this.root = { + value: NaN, + label: '', + depth: 0, + parent: null, + children: [], + isLeaf: true, + }; + DFS(options, this.root, 0); + } + + getNode(node: CascaderNodeT, val: string | number): CascaderNodeT | undefined { + if (node.value === val) { + return node; + } + + const children: Array = node.children; + + for (let i = 0, len = children.length; i < len; i++) { + const rlt = this.getNode(children[i], val); + if (rlt) { + return rlt; + } + } + } + + getChild(node: CascaderNodeT, val: string | number): CascaderNodeT | undefined { + const children: Array = node.children; + return children.find((item) => item.value === val); + } + + getPanelInfo(val: CascaderValueT | undefined) { + let rlt: Array> = []; + + if (isUndefined(val)) { + return rlt; + } + + if (!isArray(val)) { + let node = this.getNode(this.root, val); + if (isUndefined(node)) { + const columnInfo = this.getNextColumnInfo(this.root); + if (!isUndefined(columnInfo)) { + rlt = [columnInfo]; + } + } else { + while (node.parent) { + const columnInfo = this.getNextColumnInfo(node.parent, node.value); + if (!isUndefined(columnInfo)) { + rlt.unshift(columnInfo); + } + node = node.parent; + } + } + } else { + let parent = this.root; + + for (let i = 0, len = val.length; i < len; i++) { + const child = this.getChild(parent, val[i]); + if (isUndefined(child)) { + const columnInfo = this.getNextColumnInfo(this.root); + if (!isUndefined(columnInfo)) { + rlt = [columnInfo]; + } + break; + } else { + const columnInfo = this.getNextColumnInfo(parent, val[i]); + rlt.push(columnInfo); + parent = child; + } + } + } + + return rlt; + } + + getNextColumnInfo(node: CascaderNodeT, activeVal?: string | number): Array { + return node.children.map((item) => { + const rlt = { + value: item.value, + label: item.label, + depth: item.depth, + isActive: false, + isLeaf: item.children && item.children.length ? false : true, + }; + + if (!isUndefined(activeVal)) { + rlt.isActive = item.value === activeVal; + } + + return rlt; + }); + } +} diff --git a/packages/opendesign/src/components/cascader/index.ts b/packages/opendesign/src/components/cascader/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..2b67087af27e08fc1ee0784b94c0725fea6abf28 --- /dev/null +++ b/packages/opendesign/src/components/cascader/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _OCascader from './OCascader.vue'; + +const OCascader = Object.assign(_OCascader, { + install(app: App) { + app.component(_OCascader.name, _OCascader); + }, +}); + +export * from './types'; + +export { OCascader }; diff --git a/packages/opendesign/src/components/cascader/style/index.scss b/packages/opendesign/src/components/cascader/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..8f59c84af2885157e68f789163299bc9f9a59347 --- /dev/null +++ b/packages/opendesign/src/components/cascader/style/index.scss @@ -0,0 +1,62 @@ +@use './var.scss'; + +.o-cascader-panel { + position: relative; + display: inline-flex; + border-radius: var(--o-radius-control-l); + height: 200px; +} + +.o-cascader-options { + list-style: none; + margin: 0; + padding: 4px 4px 4px 4px; + min-width: 144px; + max-width: 192px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + & + .o-cascader-options { + border-left: 1px solid var(--cascader-options-bd-clor); + } + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } +} + +.o-cascader-option { + display: flex; + align-items: center; + padding: var(--cascader-option-padding); + + color: var(--cascader-option-color); + border-radius: var(--cascader-option-radius); + background-color: var(--cascader-option-bg-color); + transition: background-color var(--o-duration-s) var(--o-easing-standard); + cursor: pointer; + + &:not(.o-cascader-option-active):hover { + background-color: var(--cascader-option-bg-color-hover); + } +} + +.o-cascader-option-label { + font-size: var(--cascader-option-text-size); + line-height: var(--cascader-option-text-height); +} + +.o-cascader-option-arrow { + font-size: var(--cascader-option-icon-size); + margin-left: auto; +} + +.o-cascader-option-active { + background-color: var(--cascader-option-bg-color-active); + font-weight: 500; +} diff --git a/packages/opendesign/src/components/cascader/style/index.ts b/packages/opendesign/src/components/cascader/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..33107e5d2c59f2090e3e52d9cf07964e7175ca10 --- /dev/null +++ b/packages/opendesign/src/components/cascader/style/index.ts @@ -0,0 +1,3 @@ +import '../../style'; +import '../../select/style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/cascader/style/var.scss b/packages/opendesign/src/components/cascader/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..d84c776c555bd2231db41ace2c458eaa801fc634 --- /dev/null +++ b/packages/opendesign/src/components/cascader/style/var.scss @@ -0,0 +1,18 @@ +.o-cascader-options { + --cascader-options-bd-clor: var(--o-color-control1-light); +} + +.o-cascader-option { + --cascader-option-color: var(--o-color-info1); + --cascader-option-text-size: var(--o-font_size-text1); + --cascader-option-text-height: var(--o-line_height-text1); + + --cascader-option-padding: 8px 12px; + --cascader-option-radius: var(--o-radius-control-m); + + --cascader-option-bg-color: transparent; + --cascader-option-bg-color-hover: var(--o-color-control2-light); + --cascader-option-bg-color-active: var(--o-color-control3-light); + + --cascader-option-icon-size: var(--o-icon_size-xs); +} diff --git a/packages/opendesign/src/components/cascader/types.ts b/packages/opendesign/src/components/cascader/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..637fc7b4e66393f2b8a2537e1b659ee3dc404397 --- /dev/null +++ b/packages/opendesign/src/components/cascader/types.ts @@ -0,0 +1,96 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { PopupPositionT, PopupTriggerT } from '../popup'; +import type { RoundT, VariantT } from '../_shared/global'; + +export type CascaderNodeValueT = string | number; +export type CascaderNodePathT = Array; +export type CascaderValueT = CascaderNodeValueT | CascaderNodePathT; + +export type CascaderOptionT = { + value: CascaderNodeValueT; + label?: string; + children?: CascaderOptionT[]; +}; + +export const cascaderProps = { + /** + * 级联选择器的值 + * v-model + */ + modelValue: { + type: [String, Number, Array] as PropType, + }, + /** + * 级联选择器选项值 + * + * */ + options: { + type: Array as PropType>, + }, + /** + * 是否使用路径模式 + * + * */ + pathMode: { + type: Boolean, + default: false, + }, + /** + * 圆角值 + */ + round: { + type: String as PropType, + }, + /** + * 级联选择器类型 + */ + variant: { + type: String as PropType, + default: 'outline', + }, + /** + * 提示文本 + */ + placeholder: { + type: String, + default: 'please select...', + }, + /** + * 下拉选项触发方式 + */ + trigger: { + type: String as PropType, + default: 'click', + }, + /** + * 下拉选项位置 + */ + optionPosition: { + type: String as PropType, + default: 'bl', + }, + /** + * 下拉选项宽度自适应规则 + * 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致 + */ + optionWidthMode: { + type: String as PropType<'auto' | 'min-width' | 'width'>, + default: 'min-width', + }, + /** + * 是否在结束选择时，卸载下拉选项 + * v-model + */ + unmountOnHide: { + type: Boolean, + default: true, + }, + /** + * 过渡名称 + */ + transition: { + type: String, + }, +}; + +export type CascaderPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue new file mode 100644 index 0000000000000000000000000000000000000000..7ad11cd76ba091dd2464767b5aa1c5bb9afd409f --- /dev/null +++ b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue @@ -0,0 +1,52 @@ + + + diff --git a/packages/opendesign/src/components/checkbox-group/index.ts b/packages/opendesign/src/components/checkbox-group/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..8c21b489b08cd7ec4028736108c3c7cff10efcba --- /dev/null +++ b/packages/opendesign/src/components/checkbox-group/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _OCheckboxGroup from './OCheckboxGroup.vue'; + +const OCheckboxGroup = Object.assign(_OCheckboxGroup, { + install(app: App) { + app.component(_OCheckboxGroup.name, _OCheckboxGroup); + }, +}); + +export * from './types'; + +export { OCheckboxGroup }; diff --git a/packages/opendesign/src/components/checkbox-group/provide.ts b/packages/opendesign/src/components/checkbox-group/provide.ts new file mode 100644 index 0000000000000000000000000000000000000000..d22eeb7bcb0925452bd08ce67fdcd37d851bfe6c --- /dev/null +++ b/packages/opendesign/src/components/checkbox-group/provide.ts @@ -0,0 +1,10 @@ +import { InjectionKey, Ref } from 'vue'; + +export const checkboxGroupInjectKey: InjectionKey<{ + realValue: Ref>; + disabled: Ref; + isMinimum: Ref; + isMaximum: Ref; + updateModelValue: (val: Array) => void; + onChange: (val: Array, ev: Event) => void; +}> = Symbol('provide-checkbox-group'); diff --git a/packages/opendesign/src/components/checkbox-group/style/index.scss b/packages/opendesign/src/components/checkbox-group/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..b692815837ee1d2e067648fac0411440dfe4c221 --- /dev/null +++ b/packages/opendesign/src/components/checkbox-group/style/index.scss @@ -0,0 +1,19 @@ +@use './var.scss'; + +.o-checkbox-group { + display: inline-flex; + flex-wrap: wrap; +} + +.o-checkbox-group-direction-h { + .o-checkbox + .o-checkbox { + margin-left: var(--checkbox-group-gap); + } +} + +.o-checkbox-group-direction-v { + flex-direction: column; + .o-checkbox + .o-checkbox { + margin-top: var(--checkbox-group-gap); + } +} diff --git a/packages/opendesign/src/components/checkbox-group/style/index.ts b/packages/opendesign/src/components/checkbox-group/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/checkbox-group/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/checkbox-group/style/var.scss b/packages/opendesign/src/components/checkbox-group/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..42ca62cebaa5968ea7bd1ac453a8252ce9659cac --- /dev/null +++ b/packages/opendesign/src/components/checkbox-group/style/var.scss @@ -0,0 +1,3 @@ +.o-checkbox-group { + --checkbox-group-gap: var(--o-gap-5); +} diff --git a/packages/opendesign/src/components/checkbox-group/types.ts b/packages/opendesign/src/components/checkbox-group/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..553533991feab95d039943c474dd09fe16383fb1 --- /dev/null +++ b/packages/opendesign/src/components/checkbox-group/types.ts @@ -0,0 +1,49 @@ +import type { DirectionT } from '../_shared/global'; +import type { ExtractPropTypes, PropType } from 'vue'; + +export const checkboxGroupProps = { + /** + * 多选框组双向绑定值 + */ + modelValue: { + type: Array as PropType>, + }, + /** + * 非受控状态时，多选框组默认值 + */ + defaultValue: { + type: Array as PropType>, + default: () => [], + }, + /** + * 多选框组是否禁用 + */ + disabled: { + type: Boolean, + default: false, + }, + /** + * 多选框组方向 + * 'h' | 'v' + */ + direction: { + type: String as PropType, + default: 'h', + }, + /** + * 多选框组支持选中的最小多选框数量 + */ + min: { + type: Number, + default: undefined, + }, + /** + * 多选框组支持选中的最大多选框数量 + */ + max: { + type: Number, + default: undefined, + }, +}; + +export type CheckboxGroupPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue new file mode 100644 index 0000000000000000000000000000000000000000..f3d6eec65bd86176989960c4dba255f81f251016 --- /dev/null +++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue @@ -0,0 +1,112 @@ + + + diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..1045649f54bcfba8c3af758cfd71e06ceeb96c6f --- /dev/null +++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue new file mode 100644 index 0000000000000000000000000000000000000000..c33eab46a6700680345478f5369d7444f494bfb6 --- /dev/null +++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue new file mode 100644 index 0000000000000000000000000000000000000000..cc99e049678ecd1e27734f807f12680e3e56f34d --- /dev/null +++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxEvents.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue new file mode 100644 index 0000000000000000000000000000000000000000..700ebcc61493da46e9549bb230a44a405a5ec5b0 --- /dev/null +++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue @@ -0,0 +1,26 @@ + + + diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroupLimit.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroupLimit.vue new file mode 100644 index 0000000000000000000000000000000000000000..b1a75aaf52dec0c84af43c3593c393160a5c2ad6 --- /dev/null +++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroupLimit.vue @@ -0,0 +1,19 @@ + + + diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxIndeterminate.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxIndeterminate.vue new file mode 100644 index 0000000000000000000000000000000000000000..2b192333a53b3bdaa42781eec1919cc8c18a8d29 --- /dev/null +++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxIndeterminate.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue new file mode 100644 index 0000000000000000000000000000000000000000..ccf80cbfb796400bb65359eaf41dd094d628d5f2 --- /dev/null +++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue b/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue new file mode 100644 index 0000000000000000000000000000000000000000..3c737ffbd4931aa4f482740e16c83cf12563f01d --- /dev/null +++ b/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue @@ -0,0 +1,24 @@ + + + diff --git a/packages/opendesign/src/components/checkbox/index.ts b/packages/opendesign/src/components/checkbox/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..f499a976882868b82b1066c0d0d3e1f84f7511eb --- /dev/null +++ b/packages/opendesign/src/components/checkbox/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _OCheckbox from './OCheckbox.vue'; + +const OCheckbox = Object.assign(_OCheckbox, { + install(app: App) { + app.component(_OCheckbox.name, _OCheckbox); + }, +}); + +export * from './types'; + +export { OCheckbox }; diff --git a/packages/opendesign/src/components/checkbox/style/index.scss b/packages/opendesign/src/components/checkbox/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..44af42a15748b2184540af51b24703ec42f89961 --- /dev/null +++ b/packages/opendesign/src/components/checkbox/style/index.scss @@ -0,0 +1,75 @@ +@use './var.scss'; + +.o-checkbox { + color: var(--checkbox-color); + font-size: var(--checkbox-text-size); + line-height: var(--checkbox-text-height); + cursor: pointer; + + input[type='checkbox'] { + position: absolute; + outline: none; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + } + + &:not(.o-checkbox-checked):not(.o-checkbox-disabled):hover { + .o-checkbox-input { + border-color: var(--checkbox-input-bd-color-hover); + } + } +} + +.o-checkbox-wrap { + display: inline-flex; + align-items: center; + position: relative; + height: 100%; +} + +.o-checkbox-input { + display: inline-flex; + justify-content: center; + align-items: center; + width: var(--checkbox-input-size); + height: var(--checkbox-input-size); + font-size: var(--checkbox-input-size); + background-color: var(--checkbox-input-bg-color); + color: var(--checkbox-input-color); + border: 1px solid var(--checkbox-input-bd-color); + border-radius: var(--checkbox-radius); + transition: border-color var(--o-duration-s) var(--o-easing-standard), border-color var(--o-duration-s) var(--o-easing-standard); +} + +.o-checkbox-label { + margin-left: 12px; +} + +.o-checkbox-checked, +.o-checkbox-indeterminate { + .o-checkbox-input { + background-color: var(--checkbox-input-bg-color-checked); + border-color: var(--checkbox-input-bd-color-checked); + } +} + +.o-checkbox-disabled { + cursor: not-allowed; + color: var(--checkbox-color-disabled); + .o-checkbox-input { + background-color: var(--checkbox-input-bg-color-disabled); + border-color: var(--checkbox-input-bd-color-disabled); + } +} + +.o-checkbox-checked.o-checkbox-disabled, +.o-checkbox-indeterminate.o-checkbox-disabled { + .o-checkbox-input { + background-color: var(--checkbox-input-bg-color-checked-disabled); + border-color: var(--checkbox-input-bg-color-checked-disabled); + } +} diff --git a/packages/opendesign/src/components/checkbox/style/index.ts b/packages/opendesign/src/components/checkbox/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/checkbox/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/checkbox/style/var.scss b/packages/opendesign/src/components/checkbox/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..36eb835583de46d48725b48031fe4c2fdcb72dff --- /dev/null +++ b/packages/opendesign/src/components/checkbox/style/var.scss @@ -0,0 +1,24 @@ +.o-checkbox { + --checkbox-text-size: var(--o-font_size-text1); + --checkbox-text-height: var(--o-line_height-text1); + + --checkbox-input-size: calc(var(--o-size-s) / 2); + + --checkbox-radius: var(--o-radius-control-s); + + --checkbox-color: var(--o-color-info1); + --checkbox-color-disabled: var(--o-color-info4); + + --checkbox-input-color: rgb(var(--o-color-white)); + + --checkbox-input-bg-color: var(--o-color-control-light); + --checkbox-input-bd-color-hover: var(--o-color-primary1); + --checkbox-input-bg-color-checked: var(--o-color-primary1); + --checkbox-input-bg-color-disabled: var(--o-color-control4-light); + --checkbox-input-bg-color-checked-disabled: var(--o-color-primary4); + + --checkbox-input-bd-color: var(--o-color-control1); + --checkbox-input-bd-color-checked: var(--o-color-primary1); + --checkbox-input-bd-color-disabled: var(--o-color-control4); + --checkbox-input-bd-color-checked-disabled: var(--o-color-primary4); +} diff --git a/packages/opendesign/src/components/checkbox/types.ts b/packages/opendesign/src/components/checkbox/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..4ebab02de5b8134e8c0331191e97c55f43ddb2d6 --- /dev/null +++ b/packages/opendesign/src/components/checkbox/types.ts @@ -0,0 +1,40 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export const checkboxProps = { + /** + * 多选框value + */ + value: { + type: [String, Number], + required: true, + }, + /** + * 多选框双向绑定值 + */ + modelValue: { + type: Array as PropType>, + }, + /** + * 非受控状态时，默认是否选中 + */ + defaultChecked: { + type: Boolean, + default: false, + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + default: false, + }, + /** + * 是否为半选状态 + */ + indeterminate: { + type: Boolean, + default: false, + }, +}; + +export type CheckboxPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/child-only/__demo__/IndexChildOnly.vue b/packages/opendesign/src/components/child-only/__demo__/IndexChildOnly.vue new file mode 100644 index 0000000000000000000000000000000000000000..72fd013793b59bc1e9581bbb7a58ae8a64907a7a --- /dev/null +++ b/packages/opendesign/src/components/child-only/__demo__/IndexChildOnly.vue @@ -0,0 +1,30 @@ + + diff --git a/packages/opendesign/src/components/child-only/__demo__/SlotChild.vue b/packages/opendesign/src/components/child-only/__demo__/SlotChild.vue new file mode 100644 index 0000000000000000000000000000000000000000..bffab6319cfe6ea3716150d47021473e717c0bcb --- /dev/null +++ b/packages/opendesign/src/components/child-only/__demo__/SlotChild.vue @@ -0,0 +1,15 @@ + + diff --git a/packages/opendesign/src/components/child-only/child-only.ts b/packages/opendesign/src/components/child-only/child-only.ts new file mode 100644 index 0000000000000000000000000000000000000000..3c4c5ea17b1824efc0dd5d530e4fd831eb99b6c6 --- /dev/null +++ b/packages/opendesign/src/components/child-only/child-only.ts @@ -0,0 +1,17 @@ +import { defineComponent } from 'vue'; +import { getFirstComponent } from '../_shared/vue-utils'; + +/** + * 只渲染一个子元素 + */ +export default defineComponent({ + name: 'OChildOnly', + setup(props, { slots }) { + return () => { + const children = slots.default?.(); + // console.log(children); + + return children ? getFirstComponent(children) : null; + }; + }, +}); diff --git a/packages/opendesign/src/components/child-only/index.ts b/packages/opendesign/src/components/child-only/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..d833b6d49c2bef29cf3a835a39fe0203e28eb251 --- /dev/null +++ b/packages/opendesign/src/components/child-only/index.ts @@ -0,0 +1 @@ +export { default as OChildOnly } from './child-only'; \ No newline at end of file diff --git a/packages/opendesign/src/components/dialog/ODialog.vue b/packages/opendesign/src/components/dialog/ODialog.vue new file mode 100644 index 0000000000000000000000000000000000000000..8f0bd25efbd097f64272fb1de7c02d1c9d51e9f8 --- /dev/null +++ b/packages/opendesign/src/components/dialog/ODialog.vue @@ -0,0 +1,69 @@ + + diff --git a/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..ac12485b4e2d3455e640df247b2db0c5abd24144 --- /dev/null +++ b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue @@ -0,0 +1,42 @@ + + + diff --git a/packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue b/packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue new file mode 100644 index 0000000000000000000000000000000000000000..d90af5c2be4b135c4bb7b051caf8ee87b3b3503b --- /dev/null +++ b/packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue @@ -0,0 +1,10 @@ + + + diff --git a/packages/opendesign/src/components/dialog/index.ts b/packages/opendesign/src/components/dialog/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..4050065fbba5bec838b2d2b720ddf1b884c54ea1 --- /dev/null +++ b/packages/opendesign/src/components/dialog/index.ts @@ -0,0 +1,12 @@ +import _ODialog from './ODialog.vue'; +import type { App } from 'vue'; + +const ODialog = Object.assign(_ODialog, { + install(app: App) { + app.component(_ODialog.name, _ODialog); + }, +}); + +export { + ODialog, +}; diff --git a/packages/opendesign/src/components/dialog/style/index.scss b/packages/opendesign/src/components/dialog/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..2dd4310281b54d7093070a93b500def5741932db --- /dev/null +++ b/packages/opendesign/src/components/dialog/style/index.scss @@ -0,0 +1,59 @@ +@use './var.scss'; + +.o-dialog { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + align-items: center; + justify-content: center; + z-index: var(--dlg-z-index); + display: none; + &.is-show { + display: flex; + } +} +.o-dlg-mask { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-color: var(--o-color-mask1); +} +.o-dlg-main { + position: relative; + background-color: var(--o-color-control-light); + min-width: 200px; + box-shadow: var(--o-shadow-1); +} + +.o-dlg-btn-close { + position: absolute; + right: var(--o-gap-3); + top: var(--o-gap-3); + font-size: var(--o-icon_size-s); + color: var(--dlg-close-color); + border-radius: var(--dlg-close-radius); + display: flex; + &:hover { + text-decoration: none; + color: var(--dlg-close-color-hover); + background-color: var(--dlg-close-bg-color-hover); + } + &:active { + color: var(--dlg-close-color-active); + background-color: var(--dlg-close-bg-color-active); + } +} + +.o-dlg-head { + padding: 8px 16px; +} +.o-dlg-body { + padding: 8px 16px; +} +.o-dlg-foot { + padding: 8px 16px; +} diff --git a/packages/opendesign/src/components/dialog/style/index.ts b/packages/opendesign/src/components/dialog/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/dialog/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/dialog/style/var.scss b/packages/opendesign/src/components/dialog/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..664c3d71e96d4e28f8cb59704dbf902cd724ff61 --- /dev/null +++ b/packages/opendesign/src/components/dialog/style/var.scss @@ -0,0 +1,9 @@ +.o-dialog { + --dlg-close-color: var(--o-color-info2); + --dlg-close-color-hover: var(--o-color-primary2); + --dlg-close-color-active: var(--o-color-primary3); + --dlg-close-bg-color-hover: var(--o-color-control1-light); + --dlg-close-bg-color-active: var(--o-color-control2-light); + --dlg-close-radius: 50%; + --dlg-z-index: calc(var(--o-z-index-base) + 10); +} diff --git a/packages/opendesign/src/components/dialog/types.ts b/packages/opendesign/src/components/dialog/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..487360b544345876b089410bdbbb9eacbac96be9 --- /dev/null +++ b/packages/opendesign/src/components/dialog/types.ts @@ -0,0 +1,46 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export const dialogProps = { + /** + * 控制对话框是否显示 + */ + modelValue: { + type: Boolean, + }, + /** + * 挂载容器，默认为body + */ + wrapper: { + type: [String, Object] as PropType, + default: 'body', + }, + /** + * 是否隐藏可以关闭 + */ + hideClose: { + type: Boolean, + }, + /** + * 是否在popup隐藏时unmout + */ + unmountOnHide: { + type: Boolean, + default: true, + }, + /** + * 挂载容器，默认为body + */ + wrapClass: { + type: String, + }, + /** + * 过渡名称 + */ + transition: { + type: String, + default: 'o-zoom-fade', + }, + +}; + +export type DialogPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/directves/click-outside.ts b/packages/opendesign/src/components/directves/click-outside.ts new file mode 100644 index 0000000000000000000000000000000000000000..2530a3cd35c6d3f3fc3e227e2f649eb2f9e77bbe --- /dev/null +++ b/packages/opendesign/src/components/directves/click-outside.ts @@ -0,0 +1,18 @@ +import { ObjectDirective, DirectiveBinding } from 'vue'; +import { useOutClick } from '../hooks/use-out-click'; + + +let out: ReturnType | null = null; +const vOutClick: ObjectDirective = { + beforeMount(el: HTMLElement, binding: DirectiveBinding) { + out = useOutClick(); + out?.addOutClickListener(el, binding.value); + }, + unmounted(el: HTMLElement) { + out?.removeOutClickListener(el); + } +}; + +export { + vOutClick +}; \ No newline at end of file diff --git a/packages/opendesign/src/components/directves/focus.ts b/packages/opendesign/src/components/directves/focus.ts new file mode 100644 index 0000000000000000000000000000000000000000..4e8d9773dd52805c1b4b5d9bbaad7e2823a9e841 --- /dev/null +++ b/packages/opendesign/src/components/directves/focus.ts @@ -0,0 +1,11 @@ +import { ObjectDirective } from 'vue'; + +const vFocus: ObjectDirective = { + mounted(el: HTMLElement) { + el.focus(); + } +}; + +export { + vFocus +}; \ No newline at end of file diff --git a/packages/opendesign/src/components/directves/index.ts b/packages/opendesign/src/components/directves/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..aab73ab4a7e355dd095747f79f6a835327d794be --- /dev/null +++ b/packages/opendesign/src/components/directves/index.ts @@ -0,0 +1,4 @@ +export * from './click-outside'; +export * from './focus'; +export * from './on-intersection'; +export * from './on-resize'; \ No newline at end of file diff --git a/packages/opendesign/src/components/directves/on-intersection.ts b/packages/opendesign/src/components/directves/on-intersection.ts new file mode 100644 index 0000000000000000000000000000000000000000..158c2cf84ac77419349a3ad3dd973a5772a1de5f --- /dev/null +++ b/packages/opendesign/src/components/directves/on-intersection.ts @@ -0,0 +1,27 @@ +import { DirectiveBinding, ObjectDirective } from 'vue'; +import { useIntersectionObserver, IntersectionListenerT } from '../hooks'; +import { isFunction } from '../_shared/is'; + +let io: ReturnType | null = null; +let listener: IntersectionListenerT = () => null; + +const vIntersection: ObjectDirective = { + beforeMount() { + io = useIntersectionObserver(); + }, + mounted(el: HTMLElement, binding: DirectiveBinding) { + if (isFunction(binding.value)) { + listener = binding.value; + io?.addIntersectionListener(el, listener); + } + }, + unmounted(el: HTMLElement) { + if (listener) { + io?.removeIntersectionListener(el, listener); + } + }, +}; + +export { + vIntersection +}; \ No newline at end of file diff --git a/packages/opendesign/src/components/directves/on-resize.ts b/packages/opendesign/src/components/directves/on-resize.ts new file mode 100644 index 0000000000000000000000000000000000000000..7d7f9619ad0f76b2e6db159dfccd676f5066e995 --- /dev/null +++ b/packages/opendesign/src/components/directves/on-resize.ts @@ -0,0 +1,27 @@ +import { DirectiveBinding, ObjectDirective } from 'vue'; +import { useResizeObserver, ResizeListenerT } from '../hooks'; +import { isFunction } from '../_shared/is'; + +let listener: ResizeListenerT = () => null; +let ro: ReturnType | null = null; + +const vOnResize: ObjectDirective = { + beforeMount() { + ro = useResizeObserver(); + }, + mounted(el: HTMLElement, binding: DirectiveBinding) { + if (isFunction(binding.value)) { + listener = binding.value; + ro?.addResizeListener(el, listener); + } + }, + unmounted(el: HTMLElement) { + if (listener) { + ro?.removeResizeListener(el, listener); + } + }, +}; + +export { + vOnResize +}; \ No newline at end of file diff --git a/packages/opendesign/src/components/divider/ODivider.vue b/packages/opendesign/src/components/divider/ODivider.vue new file mode 100644 index 0000000000000000000000000000000000000000..99276e1bb174449f226ac7f28e078963afd71727 --- /dev/null +++ b/packages/opendesign/src/components/divider/ODivider.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/opendesign/src/components/divider/__demo__/DividerBasic.vue b/packages/opendesign/src/components/divider/__demo__/DividerBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..23c838c192cf63533cc7c80d1a3e80c9f83620b8 --- /dev/null +++ b/packages/opendesign/src/components/divider/__demo__/DividerBasic.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/opendesign/src/components/divider/__demo__/DividerContent.vue b/packages/opendesign/src/components/divider/__demo__/DividerContent.vue new file mode 100644 index 0000000000000000000000000000000000000000..33e68e55c525bc6ad97af138a6caef3a026fca18 --- /dev/null +++ b/packages/opendesign/src/components/divider/__demo__/DividerContent.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/opendesign/src/components/divider/__demo__/DividerDirection.vue b/packages/opendesign/src/components/divider/__demo__/DividerDirection.vue new file mode 100644 index 0000000000000000000000000000000000000000..46a18f07de4da2c7bdfdc6929cd696d7af360ddd --- /dev/null +++ b/packages/opendesign/src/components/divider/__demo__/DividerDirection.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/opendesign/src/components/divider/__demo__/DividerType.vue b/packages/opendesign/src/components/divider/__demo__/DividerType.vue new file mode 100644 index 0000000000000000000000000000000000000000..c0f85a694847b5a338f0b23e54420869954562b2 --- /dev/null +++ b/packages/opendesign/src/components/divider/__demo__/DividerType.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/opendesign/src/components/divider/__demo__/IndexDivider.vue b/packages/opendesign/src/components/divider/__demo__/IndexDivider.vue new file mode 100644 index 0000000000000000000000000000000000000000..f1991bcedf8a0d702d7b528354db6b9a1e6a441a --- /dev/null +++ b/packages/opendesign/src/components/divider/__demo__/IndexDivider.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/opendesign/src/components/divider/index.ts b/packages/opendesign/src/components/divider/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..d02d0ffab4dccaa4dcccf2817aba043af345f1e4 --- /dev/null +++ b/packages/opendesign/src/components/divider/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _ODivider from './ODivider.vue'; + +const ODivider = Object.assign(_ODivider, { + install(app: App) { + app.component(_ODivider.name, _ODivider); + }, +}); + +export * from './types'; + +export { ODivider }; diff --git a/packages/opendesign/src/components/divider/style/index.scss b/packages/opendesign/src/components/divider/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..d4a0eaac29a6e77d6c37a3ec5866a57b3c186a88 --- /dev/null +++ b/packages/opendesign/src/components/divider/style/index.scss @@ -0,0 +1,74 @@ +@use './var.scss'; + +.o-divider { + color: var(--o-divider-color); + font-size: var(--o-divider-text-size); + line-height: var(--o-divider-text-height); + font-weight: 500; +} + +.o-divider-h { + display: flex; + align-items: center; + width: 100%; + margin: var(--o-divider-gap) 0; +} + +.o-divider-line { + width: 100%; + height: 1px; + border-width: 1px 0 0 0; + border-color: var(--o-divider-bd-color); +} + +.o-divider-content { + margin: 0 16px; + white-space: nowrap; +} + +.o-divider-content-left { + .o-divider-line { + &:nth-child(1) { + width: 28px; + } + } +} + +.o-divider-content-right { + .o-divider-line { + &:nth-child(3) { + width: 28px; + } + } +} + +.o-divider-v { + display: inline-block; + width: 1px; + height: 1em; + margin: 0 var(--o-divider-gap); + vertical-align: middle; + border-width: 0 0 0 1px; + border-color: var(--o-divider-bd-color); +} + +.o-divider-solid { + &.o-divider-v, + .o-divider-line { + border-style: solid; + } +} + +.o-divider-dashed { + &.o-divider-v, + .o-divider-line { + border-style: dashed; + } +} + +.o-divider-dotted { + &.o-divider-v, + .o-divider-line { + border-style: dotted; + } +} diff --git a/packages/opendesign/src/components/divider/style/index.ts b/packages/opendesign/src/components/divider/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..4513560262c6648e14e7da5a5f205185979a68f5 --- /dev/null +++ b/packages/opendesign/src/components/divider/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; \ No newline at end of file diff --git a/packages/opendesign/src/components/divider/style/var.scss b/packages/opendesign/src/components/divider/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..17ab3cf511b490d8d31f48c108818068f4691783 --- /dev/null +++ b/packages/opendesign/src/components/divider/style/var.scss @@ -0,0 +1,16 @@ +.o-divider { + --o-divider-color: var(--o-color-info1); + + --o-divider-bd-color: var(--o-color-control1-light); + + --o-divider-text-size: var(--o-font_size-text1); + --o-divider-text-height: var(--o-line_height-text1); +} + +.o-divider-h { + --o-divider-gap: var(--o-gap-3); +} + +.o-divider-v { + --o-divider-gap: var(--o-gap-3); +} diff --git a/packages/opendesign/src/components/divider/types.ts b/packages/opendesign/src/components/divider/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..b2d821a84f7a2f4c1c3e33bcb4359eb269f9fb19 --- /dev/null +++ b/packages/opendesign/src/components/divider/types.ts @@ -0,0 +1,34 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import type { DirectionT } from '../_shared/global'; + +export type DividerTypeT = 'solid' | 'dashed' | 'dotted'; +export type DividerContentPositionT = 'left' | 'center' | 'right'; + +export const dividerProps = { + /** + * 分割线类型 + * 'solid' | 'dashed' | 'dotted' + */ + type: { + type: String as PropType, + default: 'solid', + }, + /** + * 分割线方向 + * 'h' | 'v' + */ + direction: { + type: String as PropType, + default: 'h', + }, + /** + * 自定义内容位置 + * 'left' | 'center' | 'right' + */ + contentPosition: { + type: String as PropType, + default: 'center', + }, +}; + +export type DividerPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/dropdown/ODropdown.vue b/packages/opendesign/src/components/dropdown/ODropdown.vue new file mode 100644 index 0000000000000000000000000000000000000000..cf48944f6d4b93570559810bcab948ded9aaab1c --- /dev/null +++ b/packages/opendesign/src/components/dropdown/ODropdown.vue @@ -0,0 +1,59 @@ + + + diff --git a/packages/opendesign/src/components/dropdown/ODropdownItem.vue b/packages/opendesign/src/components/dropdown/ODropdownItem.vue new file mode 100644 index 0000000000000000000000000000000000000000..85f49e8571949fce6fdd1ac51e85b9c4a685d284 --- /dev/null +++ b/packages/opendesign/src/components/dropdown/ODropdownItem.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/opendesign/src/components/dropdown/__demo__/DropdownBasic.vue b/packages/opendesign/src/components/dropdown/__demo__/DropdownBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..3227b4dc823d75258fa630dd0edcdddfafdd0a8d --- /dev/null +++ b/packages/opendesign/src/components/dropdown/__demo__/DropdownBasic.vue @@ -0,0 +1,25 @@ + + + diff --git a/packages/opendesign/src/components/dropdown/__demo__/IndexDropdown.vue b/packages/opendesign/src/components/dropdown/__demo__/IndexDropdown.vue new file mode 100644 index 0000000000000000000000000000000000000000..0408b4ca437a2da23827efd7c8734a3f65cdabbe --- /dev/null +++ b/packages/opendesign/src/components/dropdown/__demo__/IndexDropdown.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/opendesign/src/components/dropdown/index.ts b/packages/opendesign/src/components/dropdown/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..b6ff5169abe181f9f220a0209b82a35463505b62 --- /dev/null +++ b/packages/opendesign/src/components/dropdown/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue'; + +import _ODropdown from './ODropdown.vue'; +import _ODropdownItem from './ODropdownItem.vue'; + +const ODropdown = Object.assign(_ODropdown, { + install(app: App) { + app.component(_ODropdown.name, _ODropdown); + }, +}); + +const ODropdownItem = Object.assign(_ODropdownItem, { + install(app: App) { + app.component(_ODropdownItem.name, _ODropdownItem); + }, +}); + +export { ODropdown, ODropdownItem }; diff --git a/packages/opendesign/src/components/dropdown/provide.ts b/packages/opendesign/src/components/dropdown/provide.ts new file mode 100644 index 0000000000000000000000000000000000000000..77ee794c3efdb77d91172c71015085f74fd938a8 --- /dev/null +++ b/packages/opendesign/src/components/dropdown/provide.ts @@ -0,0 +1,5 @@ +import { InjectionKey } from 'vue'; + +export const dropdownInjectKey: InjectionKey<{ + updateVisible: (val: boolean) => void; +}> = Symbol('provide-dropdown'); diff --git a/packages/opendesign/src/components/dropdown/style/index.scss b/packages/opendesign/src/components/dropdown/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..f6e9eee647d8faa3fe6e73d10cb4edb95d5803c7 --- /dev/null +++ b/packages/opendesign/src/components/dropdown/style/index.scss @@ -0,0 +1,36 @@ +@use './var.scss'; + +.o-dropdown-list { + list-style: none; + margin: 0; + padding: var(--dropdown-list-padding); + background-color: var(--dropdown-list-bg-color); + box-shadow: var(--dropdown-list-shadow); + border-radius: var(--dropdown-list-radius); + border: var(--dropdown-list-bd); +} + +.o-dropdown-item { + display: flex; + align-items: center; + padding: var(--dropdown-item-padding); + background-color: var(--dropdown-item-bg-color); + font-size: var(--dropdown-item-text-size); + line-height: var(--dropdown-item-text-height); + border-radius: var(--dropdown-item-radius); + transition: background-color var(--o-duration-s) var(--o-easing-standard); + cursor: pointer; + + &:not(.o-dropdown-item-disabled) { + &:hover { + background-color: var(--dropdown-item-bg-color-hover); + color: var(--dropdown-item-color-hover); + } + } +} + +.o-dropdown-item-disabled { + cursor: not-allowed; + color: var(--dropdown-item-color-disabled); + background-color: var(--dropdown-item-bg-color-disabled); +} diff --git a/packages/opendesign/src/components/dropdown/style/index.ts b/packages/opendesign/src/components/dropdown/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..97806f75ad147dd20bd3802a7001ea21d7911191 --- /dev/null +++ b/packages/opendesign/src/components/dropdown/style/index.ts @@ -0,0 +1,3 @@ +import '../../style'; +import '../../popup/style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/dropdown/style/var.scss b/packages/opendesign/src/components/dropdown/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..4c6d178d25deea7d5ec7c02427df1270a2c35b9a --- /dev/null +++ b/packages/opendesign/src/components/dropdown/style/var.scss @@ -0,0 +1,23 @@ +.o-dropdown-list { + --dropdown-list-bg-color: var(--o-color-control-light); + --dropdown-list-shadow: var(--o-shadow-2); + --dropdown-list-bd: none; + --dropdown-list-radius: var(--o-radius-control-l); + --dropdown-list-padding: 4px; +} + +.o-dropdown-item { + --dropdown-item-color: var(--o-color-info1); + --dropdown-item-color-hover: var(--o-color-info1); + --dropdown-item-color-disabled: var(--o-color-info4); + + --dropdown-item-bg-color: transparent; + --dropdown-item-bg-color-hover: var(--o-color-control2-light); + --dropdown-item-bg-color-disabled: transparent; + + --dropdown-item-text-size: var(--o-font_size-text1); + --dropdown-item-text-height: var(--o-line_height-text1); + + --dropdown-item-padding: 8px 12px; + --dropdown-item-radius: var(--o-radius-control-m); +} diff --git a/packages/opendesign/src/components/dropdown/types.ts b/packages/opendesign/src/components/dropdown/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..6db69939c0ac6fade965ea66a391c823f3dc1c59 --- /dev/null +++ b/packages/opendesign/src/components/dropdown/types.ts @@ -0,0 +1,100 @@ +import { PopupPositionT, PopupTriggerT } from '../popup'; +import { ExtractPropTypes, PropType } from 'vue'; +import type { SizeT, RoundT } from '../_shared/global'; + +export const dropdownProps = { + /** + * 弹出框是否可见 + */ + visible: { + type: Boolean, + }, + /** + * 非受控模式，弹出框是否默认可见 + */ + defaultVisible: { + type: Boolean, + default: false, + }, + /** + * 大小 + */ + size: { + type: String as PropType, + }, + /** + * 圆角值 + */ + round: { + type: String as PropType, + }, + /** + * 下拉选项触发方式 + */ + trigger: { + type: String as PropType, + default: 'click', + }, + /** + * 下拉选项位置 + */ + optionPosition: { + type: String as PropType, + default: 'bl', + }, + /** + * 下拉选项宽度自适应规则 + * 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致 + */ + optionWidthMode: { + type: String as PropType<'auto' | 'min-width' | 'width'>, + default: 'min-width', + }, + /** + * 下拉容器自定义类 + */ + optionWrapClass: { + type: String, + }, + /** + * 是否在结束选择时，卸载下拉选项 + * v-model + */ + unmountOnHide: { + type: Boolean, + default: true, + }, + /** + * 过渡名称 + */ + transition: { + type: String, + }, +}; + +export type DropdownPropsT = ExtractPropTypes; + +export const dropdownItemProps = { + /** + * 显示文本 + */ + label: { + type: String, + default: '', + }, + /** + * 选项值 + */ + value: { + type: [String, Number] as PropType, + default: '', + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + }, +}; + +export type DropdownItemPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue new file mode 100644 index 0000000000000000000000000000000000000000..d6b0e3abda012b6ff8a89e79ed9242c35be878fd --- /dev/null +++ b/packages/opendesign/src/components/figure/OFigure.vue @@ -0,0 +1,106 @@ + + diff --git a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..baeededf26c45b6da5a69b18f8a6da3a97d4a547 --- /dev/null +++ b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue @@ -0,0 +1,26 @@ + + + diff --git a/packages/opendesign/src/components/figure/__demo__/IndexFigure.vue b/packages/opendesign/src/components/figure/__demo__/IndexFigure.vue new file mode 100644 index 0000000000000000000000000000000000000000..0e8aec36975eeab8e03a63b731031d8165c6906b --- /dev/null +++ b/packages/opendesign/src/components/figure/__demo__/IndexFigure.vue @@ -0,0 +1,10 @@ + + + diff --git a/packages/opendesign/src/components/figure/index.ts b/packages/opendesign/src/components/figure/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..f94942b8c16aada5bf57183203ca7faf94f4f869 --- /dev/null +++ b/packages/opendesign/src/components/figure/index.ts @@ -0,0 +1,12 @@ +import _OFigure from './OFigure.vue'; +import type { App } from 'vue'; + +const OFigure = Object.assign(_OFigure, { + install(app: App) { + app.component(_OFigure.name, _OFigure); + }, +}); + +export { + OFigure, +}; diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..5a11e4e8914db3e4d9be590e9821a9a03576c36b --- /dev/null +++ b/packages/opendesign/src/components/figure/style/index.scss @@ -0,0 +1,66 @@ +@use './var.scss'; + +.o-figure { + display: inline-flex; + overflow: hidden; + transition: background-color var(--o-duration-m2); + &.is-loading { + &.is-colorfull { + background-color: var(--figure-prest-color); + } + img { + opacity: 0; + } + } + img { + max-width: 100%; + vertical-align: top; + opacity: 1; + transition: opacity var(--o-duration-m2), transform var(--o-easing-standard) var(--o-duration-m2); + will-change: transform; + } + &.is-error { + background-color: var(--o-color-control4); + } +} +.o-figure-hoverable { + cursor: pointer; + + &:hover { + img { + transform: scale(1.05); + } + } + &:active { + img { + transform: scale(1.02); + } + } +} +.o-figure-wrapper { + position: relative; + width: 100%; + height: 100%; + padding-top: var(--figure-padding-top); +} +.o-figure-bg { + background-size: var(--figure-fit); + background-position: var(--figure-position); + background-repeat: no-repeat; +} +.o-figure-img-ratio { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + object-fit: var(--figure-fit); + object-position: var(--figure-position); +} + +.o-figure-img { + width: 100%; + height: 100%; + object-fit: var(--figure-fit); + object-position: var(--figure-position); +} diff --git a/packages/opendesign/src/components/figure/style/index.ts b/packages/opendesign/src/components/figure/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/figure/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/figure/style/var.scss b/packages/opendesign/src/components/figure/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..1f49819f9362fab25a272c17eeea43b39e3aea57 --- /dev/null +++ b/packages/opendesign/src/components/figure/style/var.scss @@ -0,0 +1,5 @@ +.o-figure { + --figure-padding-top: 50%; + --figure-fit: 'cover'; + --figure-position: 'center'; +} diff --git a/packages/opendesign/src/components/figure/types.ts b/packages/opendesign/src/components/figure/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..dde3eee188fdbb518417a2865e08fee6c6a391d7 --- /dev/null +++ b/packages/opendesign/src/components/figure/types.ts @@ -0,0 +1,62 @@ +import { ExtractPropTypes } from 'vue'; + +export const figureProps = { + /** + * 地址 + */ + src: { + type: String, + }, + /** + * 长宽比 + */ + ratio: { + type: Number, + }, + /** + * 适配方式 + */ + position: { + type: String, + default: 'center' + }, + /** + * 适配方式 + */ + fit: { + type: String, + default: 'cover' + }, + /** + * img alt + */ + alt: { + type: String, + }, + /** + * 使用背景 + */ + background: { + type: Boolean, + }, + /** + * 可hover + */ + hoverable: { + type: Boolean, + }, + /** + * 链接跳转 + */ + href: { + type: String, + }, + /** + * 预置随机多彩背景 + */ + colorfull: { + type: Boolean, + }, +}; + +export type FigurePropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/form/OForm.vue b/packages/opendesign/src/components/form/OForm.vue new file mode 100644 index 0000000000000000000000000000000000000000..740610efd166a1170d6d9ae8d53db15d9f7818d2 --- /dev/null +++ b/packages/opendesign/src/components/form/OForm.vue @@ -0,0 +1,6 @@ + + diff --git a/packages/opendesign/src/components/form/__demo__/FormBasic.vue b/packages/opendesign/src/components/form/__demo__/FormBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..af2f495ff8874f22388cae6639ca47dec1effb4e --- /dev/null +++ b/packages/opendesign/src/components/form/__demo__/FormBasic.vue @@ -0,0 +1,5 @@ + + + diff --git a/packages/opendesign/src/components/form/__demo__/IndexForm.vue b/packages/opendesign/src/components/form/__demo__/IndexForm.vue new file mode 100644 index 0000000000000000000000000000000000000000..8bc968ef82cb015567eddcc78abb779cb2f0d2a1 --- /dev/null +++ b/packages/opendesign/src/components/form/__demo__/IndexForm.vue @@ -0,0 +1,12 @@ + + + diff --git a/packages/opendesign/src/components/form/form.ts b/packages/opendesign/src/components/form/form.ts new file mode 100644 index 0000000000000000000000000000000000000000..e21489896f2623584380b61ba9e26e7d313968df --- /dev/null +++ b/packages/opendesign/src/components/form/form.ts @@ -0,0 +1,8 @@ +import { isNull, isUndefined } from '../_shared/is'; + +export function toInputString(val: unknown): string { + if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) { + return ''; + } + return String(val); +} diff --git a/packages/opendesign/src/components/form/index.ts b/packages/opendesign/src/components/form/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..02f3334b803fe8b4991f0de43b40dc1131d97d59 --- /dev/null +++ b/packages/opendesign/src/components/form/index.ts @@ -0,0 +1,9 @@ +import _OForm from './OForm.vue'; +import type { App } from 'vue'; + +const OForm = Object.assign(_OForm, { + install(app: App) { + app.component(_OForm.name, _OForm); + }, +}); +export { OForm }; diff --git a/packages/opendesign/src/components/form/style/index.scss b/packages/opendesign/src/components/form/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..3a33a0936677a4f2f68f190d61376956d18cc734 --- /dev/null +++ b/packages/opendesign/src/components/form/style/index.scss @@ -0,0 +1,10 @@ +@use './var.scss'; + +.o-form { + cursor: pointer; + color: var(--input-color); + display: inline-flex; + height: var(--input-height); + font-size: var(--input-text-size); + line-height: var(--input-text-height); +} diff --git a/packages/opendesign/src/components/form/style/index.ts b/packages/opendesign/src/components/form/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/form/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/form/style/var.scss b/packages/opendesign/src/components/form/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..447b3517ff17b483ae4bc3b79ea36e91e1de1148 --- /dev/null +++ b/packages/opendesign/src/components/form/style/var.scss @@ -0,0 +1,2 @@ +.o-form { +} diff --git a/packages/opendesign/src/components/grid/OCol.vue b/packages/opendesign/src/components/grid/OCol.vue new file mode 100644 index 0000000000000000000000000000000000000000..d3b781a7973b4dc50b5d585376d7cdb337f1031a --- /dev/null +++ b/packages/opendesign/src/components/grid/OCol.vue @@ -0,0 +1,74 @@ + + diff --git a/packages/opendesign/src/components/grid/ORow.vue b/packages/opendesign/src/components/grid/ORow.vue new file mode 100644 index 0000000000000000000000000000000000000000..5e53bb5b0cd3ddefc97f9d59eac747892f58aacd --- /dev/null +++ b/packages/opendesign/src/components/grid/ORow.vue @@ -0,0 +1,48 @@ + + diff --git a/packages/opendesign/src/components/grid/__demo__/GridBasic.vue b/packages/opendesign/src/components/grid/__demo__/GridBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..110c0a0fb579db54762561b935c57648796c6f16 --- /dev/null +++ b/packages/opendesign/src/components/grid/__demo__/GridBasic.vue @@ -0,0 +1,73 @@ + + + diff --git a/packages/opendesign/src/components/grid/__demo__/IndexGrid.vue b/packages/opendesign/src/components/grid/__demo__/IndexGrid.vue new file mode 100644 index 0000000000000000000000000000000000000000..4280c9a7de056d99199b55b9547e58da39d556be --- /dev/null +++ b/packages/opendesign/src/components/grid/__demo__/IndexGrid.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/opendesign/src/components/grid/index.ts b/packages/opendesign/src/components/grid/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..88ecc8a4bcf0a1ba1ce661b1b77c3e650eb29a2b --- /dev/null +++ b/packages/opendesign/src/components/grid/index.ts @@ -0,0 +1,13 @@ +import _ORow from './ORow.vue'; +import OCol from './OCol.vue'; +import type { App } from 'vue'; + +const ORow = Object.assign(_ORow, { + OCol, + install(app: App) { + app.component(_ORow.name, _ORow); + }, +}); + +export { ORow, OCol }; +export * from './types'; diff --git a/packages/opendesign/src/components/grid/style/index.scss b/packages/opendesign/src/components/grid/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..75691655b51c5b0856342f8dd2f1b26b8b7baf42 --- /dev/null +++ b/packages/opendesign/src/components/grid/style/index.scss @@ -0,0 +1,69 @@ +@use './var.scss'; + +$media-xs: 576px; +$media-s: 721px; +$media-m: 1201px; +$media-l: 1441px; +$media-xl: 1681px; +$media-xxl: 1920px; + +.o-row { + display: flex; + justify-content: var(--row-justify); + align-items: var(--row-align); + flex-wrap: var(--row-wrap); + flex-direction: var(--row-direction); + margin-left: var(--row-gap-x); + margin-right: var(--row-gap-x); + margin-bottom: var(--row-gap-y); +} +.o-row-inline { + display: inline-flex; +} + +.o-col { + flex: var(--col-flex); + flex-grow: var(--col-grow); + flex-shrink: var(--col-shrink); + flex-basis: var(--col-basis); + align-self: var(--col-align); + padding-left: var(--col-gap-x); + padding-right: var(--col-gap-x); + margin-bottom: var(--col-gap-y); +} + +@media (min-width: $media-xs) { + .o-col-xs { + flex-basis: var(--col-basis-xs); + } +} + +@media (min-width: $media-s) { + .o-col-s { + flex-basis: var(--col-basis-s); + } +} + +@media (min-width: $media-m) { + .o-col-m { + flex-basis: var(--col-basis-m); + } +} + +@media (min-width: $media-l) { + .o-col-l { + flex-basis: var(--col-basis-l); + } +} + +@media (min-width: $media-xl) { + .o-col-xl { + flex-basis: var(--col-basis-xl); + } +} + +@media (min-width: $media-xxl) { + .o-col-xxl { + flex-basis: var(--col-basis-xxl); + } +} diff --git a/packages/opendesign/src/components/grid/style/index.ts b/packages/opendesign/src/components/grid/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/grid/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/grid/style/var.scss b/packages/opendesign/src/components/grid/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..8b137891791fe96927ad78e64b0aad7bded08bdc --- /dev/null +++ b/packages/opendesign/src/components/grid/style/var.scss @@ -0,0 +1 @@ + diff --git a/packages/opendesign/src/components/grid/types.ts b/packages/opendesign/src/components/grid/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..1a4c2a2fcf2e124554a3bded29a084bb31acbcda --- /dev/null +++ b/packages/opendesign/src/components/grid/types.ts @@ -0,0 +1,118 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export const rowProps = { + /** + * 是否为inline-flex + */ + inline: { + type: Boolean, + }, + /** + * 同 align-items + */ + align: { + type: String as PropType<'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'inherit' | 'initial'>, + }, + /** + * 同 justify-content + */ + justify: { + type: String as PropType<'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'inherit' | 'initial'>, + }, + /** + * flex-wrap + */ + wrap: { + type: String as PropType<'nowrap' | 'wrap' | 'wrap-reverse' | 'initial' | 'inherit'>, + }, + /** + * flex-direction + */ + direction: { + type: String as PropType<'row' | 'row-reverse' | 'column' | 'column-reverse'>, + }, + /** + * gapX + */ + gapX: { + type: String, + }, + /** + * gapY + */ + gapY: { + type: String, + }, +}; + +export const colProps = { + /** + * flex-grow + */ + grow: { + type: [Number, String], + }, + /** + * flex-shrink + */ + shrink: { + type: [Number, String], + }, + /** + * flex-basic + */ + width: { + type: String, + }, + /** + * flex + */ + flex: { + type: String, + }, + /** + * 同 align-self + */ + align: { + type: String as PropType<'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'inherit' | 'initial'>, + }, + /** + * @media (min-width: 576px) + */ + xs: { + type: Object, + }, + /** + * @media (min-width: 721px) + */ + s: { + type: Object, + }, + /** + * @media (min-width: 1201px) + */ + m: { + type: Object, + }, + /** + * @media (min-width: 1441px) + */ + l: { + type: Object, + }, + /** + * @media (min-width: 1681px) + */ + xl: { + type: Object, + }, + /** + * @media (min-width: 1920px) + */ + xxl: { + type: Object, + }, +}; + +export type RowPropsT = ExtractPropTypes; +export type ColPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/hooks/index.ts b/packages/opendesign/src/components/hooks/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..27f2a3f5522fb8c70f0c3263ed21cea264ff87fa --- /dev/null +++ b/packages/opendesign/src/components/hooks/index.ts @@ -0,0 +1,5 @@ +export * from './use-resize-observer'; +export * from './use-intersection-observer'; +export * from './use-element'; +export * from './use-element-resize'; +export * from './use-element-intersection'; diff --git a/packages/opendesign/src/components/hooks/use-element-intersection.ts b/packages/opendesign/src/components/hooks/use-element-intersection.ts new file mode 100644 index 0000000000000000000000000000000000000000..30c20e713ba137099401df560ce5a78dfa459849 --- /dev/null +++ b/packages/opendesign/src/components/hooks/use-element-intersection.ts @@ -0,0 +1,28 @@ +import { ObjectDirective } from 'vue'; +import { useIntersectionObserver } from './use-intersection-observer'; +import type { IntersectionListenerT } from './use-intersection-observer'; +import { isFunction } from '../_shared/is'; + +let io: ReturnType | null = null; +export function useIntersectionObserverDirective({ listener, removeOnUnmounted }: { + listener: IntersectionListenerT, + removeOnUnmounted?: boolean +}): { vIntersectionObserver: ObjectDirective } { + return { + vIntersectionObserver: { + beforeMount() { + io = useIntersectionObserver(); + }, + mounted(el: HTMLElement) { + if (isFunction(listener)) { + io?.addIntersectionListener(el, listener); + } + }, + unmounted(el: HTMLElement) { + if (listener && removeOnUnmounted) { + io?.removeIntersectionListener(el, listener); + } + }, + } + }; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/hooks/use-element-resize.ts b/packages/opendesign/src/components/hooks/use-element-resize.ts new file mode 100644 index 0000000000000000000000000000000000000000..bfc633ed2fe143d2ff3619e2f35ae5413a5be61f --- /dev/null +++ b/packages/opendesign/src/components/hooks/use-element-resize.ts @@ -0,0 +1,25 @@ +import { ObjectDirective } from 'vue'; +import { useResizeObserver } from './use-resize-observer'; +import type { ResizeListenerT } from './use-resize-observer'; +import { isFunction } from '../_shared/is'; + +let ro: ReturnType | null = null; +export function useReiszeObserverDirective(onResize: ResizeListenerT): { vResizeObserver: ObjectDirective } { + return { + vResizeObserver: { + beforeMount() { + ro = useResizeObserver(); + }, + mounted(el: HTMLElement) { + if (isFunction(onResize)) { + ro?.addResizeListener(el, onResize); + } + }, + unmounted(el: HTMLElement) { + if (onResize) { + ro?.removeResizeListener(el, onResize); + } + }, + } + }; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/hooks/use-element.ts b/packages/opendesign/src/components/hooks/use-element.ts new file mode 100644 index 0000000000000000000000000000000000000000..21978f24705bf557bc70e44fa62cfca26245aeb9 --- /dev/null +++ b/packages/opendesign/src/components/hooks/use-element.ts @@ -0,0 +1,20 @@ +import { ObjectDirective } from 'vue'; + +export type LifeCycleT = 'mounted' | 'updated' | 'unmounted' + +export function useElementDirective(onElementChange: (el: HTMLElement | null, type: LifeCycleT) => void) { + const directive: ObjectDirective = { + mounted(el: HTMLElement) { + onElementChange(el, 'mounted'); + }, + updated(el: HTMLElement) { + onElementChange(el, 'updated'); + }, + unmounted() { + onElementChange(null, 'unmounted'); + } + }; + return { + getElementDirective: directive + }; +} diff --git a/packages/opendesign/src/components/hooks/use-intersection-observer.ts b/packages/opendesign/src/components/hooks/use-intersection-observer.ts new file mode 100644 index 0000000000000000000000000000000000000000..8d20223190f153ab30d14ee9ffbac0eb1d169ee1 --- /dev/null +++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts @@ -0,0 +1,102 @@ +// import IntersectionObserver from 'intersection-observer-polyfill'; +import { isFunction } from '../_shared/is'; + +export type IntersectionListenerT = (entry: IntersectionObserverEntry) => void; +/** + * 监听元素尺寸变化， + * ele: 监听元素； + * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调); + */ +export function useIntersectionObserver( + element?: HTMLElement, + listenerFn?: IntersectionListenerT, +) { + let el = element; + let cb = listenerFn; + + /** + * 监听池 + * isFirst: 监听的第一次回调 + */ + const observerPool = new Map + } | null>(); + + // 创建监听实例 + const instance = new IntersectionObserver((entries: IntersectionObserverEntry[]) => { + entries.forEach((entry) => { + const ele = entry.target as HTMLElement; + const ins = observerPool.get(ele); + + if (!ins) { + return; + } + + ins?.callbacks?.forEach(fn => fn(entry)); + }); + }); + + return { + /** + * 监听实例 + */ + observer: instance, + /** + * 创建监听实例 + * ele: 监听元素 + * listener: resize回调, 移除监听时需要指定该监听函数 + * isFirst: 是否为初次监听时的回调 + */ + addIntersectionListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => { + el = ele || element; + cb = listener || cb; + + if (!el || !cb || !isFunction(cb)) { + return null; + } + + // 同一元素，只创建一次ResizeObserver，通过数组存储回调 + const val = observerPool.get(el); + if (val) { + val.callbacks.push(cb); + } else { + instance.observe(el); + + observerPool.set(el, { + element: el, + callbacks: [cb], + }); + } + + return instance; + }, + /** + * 移除监听 + * listener: 要移除的监听函数，如果不传，则使用初始化时的回调 + */ + removeIntersectionListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => { + let fn = listener || cb; + el = ele || element; + + if (!el || !fn) { + return; + } + + const val = observerPool.get(el); + + if (val) { + const idx = val.callbacks.indexOf(fn); + val.callbacks.splice(idx, 1); + if (val.callbacks.length === 0) { + // 当el无监听时，销毁resizeObserver + instance.unobserve(el); + observerPool.delete(el); + } + if (observerPool.size === 0) { + instance.disconnect(); + } + } + } + }; +}; \ No newline at end of file diff --git a/packages/opendesign/src/components/hooks/use-out-click.ts b/packages/opendesign/src/components/hooks/use-out-click.ts new file mode 100644 index 0000000000000000000000000000000000000000..b2a8126eff7b6265c6bef6c93f7c115f719f402e --- /dev/null +++ b/packages/opendesign/src/components/hooks/use-out-click.ts @@ -0,0 +1,54 @@ +interface handlerItemT { + handler: () => void, + exception?: (e: MouseEvent) => boolean +} + +const elList = new Map>(); + +function addOutClickListener(el: HTMLElement, fn: () => void, exception?: (e: MouseEvent) => boolean) { + if (!elList.has(el)) { + elList.set(el, []); + } + + const handlers = elList.get(el); + if (handlers) { + handlers.push({ + handler: fn, + exception: exception + }); + } +} + +function removeOutClickListener(el: HTMLElement, listener?: () => void) { + if (listener) { + const handlers = elList.get(el); + if (!handlers) { + return; + } + const idx = handlers.findIndex(item => item.handler === listener); + if (idx > -1) { + handlers.splice(idx, 1); + } + } else { + elList.delete(el); + } +} + +export function useOutClick() { + window.addEventListener('mousedown', (e) => { + elList.forEach((handlers, el) => { + if (!el.contains(e.target as HTMLElement)) { + handlers.forEach(item => { + if (!item.exception || !item.exception(e)) { + item.handler(); + } + }); + } + }); + }); + + return { + addOutClickListener, + removeOutClickListener, + }; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts new file mode 100644 index 0000000000000000000000000000000000000000..70a5ec1b601cdae24abae32a854cf2ddb8237b1d --- /dev/null +++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts @@ -0,0 +1,108 @@ +// import ResizeObserver from 'resize-observer-polyfill'; +import { isFunction } from '../_shared/is'; + +export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) => void; +/** + * 监听元素尺寸变化， + * ele: 监听元素； + * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调); + */ +export function useResizeObserver( + element?: HTMLElement, + onResize?: ResizeListenerT, +) { + let el = element; + let cb = onResize; + + /** + * 监听池 + * isFirst: 监听的第一次回调 + */ + const observerPool = new Map void> + } | null>(); + + // 创建监听实例 + const instance = new ResizeObserver((entries: ResizeObserverEntry[]) => { + entries.forEach((entry) => { + const ele = entry.target as HTMLElement; + const ins = observerPool.get(ele); + if (!ins) { + return; + } + + ins?.callbacks?.forEach(fn => fn(entry, ins.isFirst)); + + if (ins.isFirst) { + ins.isFirst = false; + } + }); + }); + + return { + /** + * 监听实例 + */ + observer: instance, + /** + * 创建监听实例 + * ele: 监听元素 + * listener: resize回调, 移除监听时需要指定该监听函数 + * isFirst: 是否为初次监听时的回调 + */ + addResizeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => { + el = ele || element; + cb = listener || onResize; + + if (!el || !cb || !isFunction(cb)) { + return null; + } + + // 同一元素，只创建一次ResizeObserver，通过数组存储回调 + const val = observerPool.get(el); + if (val) { + val.callbacks.push(cb); + } else { + instance.observe(el); + + observerPool.set(el, { + element: el, + callbacks: [cb], + isFirst: true + }); + } + + return instance; + }, + /** + * 移除监听 + * listener: 要移除的监听函数，如果不传，则使用初始化时的onResize回调 + */ + removeResizeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => { + + let fn = listener || cb; + el = ele || element; + + if (!el || !fn) { + return; + } + + const val = observerPool.get(el); + + if (val) { + const idx = val.callbacks.indexOf(fn); + val.callbacks.splice(idx, 1); + if (val.callbacks.length === 0) { + // 当el无监听时，销毁resizeObserver + instance.unobserve(el); + observerPool.delete(el); + } + if (observerPool.size === 0) { + instance.disconnect(); + } + } + } + }; +}; \ No newline at end of file diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..a9c77e309aefe541ac20a6583d38661aa193f217 --- /dev/null +++ b/packages/opendesign/src/components/index.scss @@ -0,0 +1,35 @@ +@use './style/index.scss' as *; + +@use './button/style/index.scss' as *; +@use './switch/style/index.scss' as *; +@use './link/style/index.scss' as *; +@use './popup/style/index.scss' as *; +@use './popover/style/index.scss' as *; +@use './input/style/index.scss' as *; +@use './input-number/style/index.scss' as *; +@use './textarea/style/index.scss' as *; +@use './option/style/index.scss' as *; +@use './select/style/index.scss' as *; +@use './tabs/style/index.scss' as *; +@use './table/style/index.scss' as *; +@use './pagination/style/index.scss' as *; +@use './radio/style/index.scss' as *; +@use './radio-group/style/index.scss' as *; +@use './checkbox/style/index.scss' as *; +@use './checkbox-group/style/index.scss' as *; +@use './rate/style/index.scss' as *; +@use './tag/style/index.scss' as *; +@use './badge/style/index.scss' as *; +@use './divider/style/index.scss' as *; +@use './form/style/index.scss' as *; +@use './menu/style/index.scss' as *; +@use './breadcrumb/style/index.scss' as *; +@use './dropdown/style/index.scss' as *; +@use './progress/style/index.scss' as *; +@use './dialog/style/index.scss' as *; +@use './figure/style/index.scss' as *; +@use './card/style/index.scss' as *; +@use './slides/style/index.scss' as *; +@use './message/style/index.scss' as *; +@use './cascader/style/index.scss' as *; +@use './grid/style/index.scss' as *; diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..c1e067ebf72e810d59588601ab21fdf4c35572b9 --- /dev/null +++ b/packages/opendesign/src/components/index.ts @@ -0,0 +1,43 @@ +export * from './_shared/export'; +export * from './hooks'; +export * from './directves'; + +export * from './icons'; +export * from './button'; +export * from './switch'; +export * from './link'; +export * from './popup'; +export * from './popover'; +export * from './input'; +export * from './input-number'; +export * from './textarea'; +export * from './option'; +export * from './select'; +export * from './tabs'; +export * from './table'; +export * from './pagination'; +export * from './radio'; +export * from './radio-group'; +export * from './checkbox'; +export * from './checkbox-group'; +export * from './rate'; +export * from './tag'; +export * from './badge'; +export * from './divider'; +export * from './form'; +export * from './menu'; +export * from './breadcrumb'; +export * from './progress'; +export * from './dropdown'; +export * from './dialog'; +export * from './figure'; +export * from './card'; +export * from './message'; +export * from './slides'; +export * from './cascader'; +export * from './grid'; + +// export * from './scrollbar'; +export * from './intersection-observer'; +export * from './resize-observer'; +export * from './child-only'; diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue new file mode 100644 index 0000000000000000000000000000000000000000..6440ac3aa4fd63956d2ad3e2edfda48b7a0f2c27 --- /dev/null +++ b/packages/opendesign/src/components/input-number/OInputNumber.vue @@ -0,0 +1,258 @@ + + diff --git a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue new file mode 100644 index 0000000000000000000000000000000000000000..fbbf8d791a0d8e24caa5d4b84c20d29283d89129 --- /dev/null +++ b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..281aedf324096239e7d84518f4ac06acd878f752 --- /dev/null +++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue @@ -0,0 +1,140 @@ + + + diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue new file mode 100644 index 0000000000000000000000000000000000000000..1e353858afffc8c4970fdffb77e571ceb83da251 --- /dev/null +++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue @@ -0,0 +1,58 @@ + + + diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue new file mode 100644 index 0000000000000000000000000000000000000000..db24829e0df5ff929b4d58d7b8c5b9b6df3fbc05 --- /dev/null +++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/opendesign/src/components/input-number/index.ts b/packages/opendesign/src/components/input-number/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..e1a463aa3ca90427c49d543b8cc41ec308c4c0d9 --- /dev/null +++ b/packages/opendesign/src/components/input-number/index.ts @@ -0,0 +1,10 @@ +import _OInputNumber from './OInputNumber.vue'; +import type { App } from 'vue'; + +const OInputNumber = Object.assign(_OInputNumber, { + install(app: App) { + app.component(_OInputNumber.name, _OInputNumber); + }, +}); +export { OInputNumber }; +export * from './types'; diff --git a/packages/opendesign/src/components/input-number/input-number.ts b/packages/opendesign/src/components/input-number/input-number.ts new file mode 100644 index 0000000000000000000000000000000000000000..a863fa6096c3c4af5a7b409673c8e9dfa4e23b9a --- /dev/null +++ b/packages/opendesign/src/components/input-number/input-number.ts @@ -0,0 +1,50 @@ +import { isFunction, isNumber, isUndefined } from '../_shared/is'; + +export function isValidNumber(val?: string | number, min?: number, max?: number, parse?: (value: string) => string) { + if (Number.isNaN(val)) { + return true; + } + const value = isFunction(parse) ? parse(String(val)) : val; + if (isNumber(Number(value))) { + const v = Number(value); + if (!isUndefined(min) && v < min) { + return false; + } + if (!isUndefined(max) && v > max) { + return false; + } + + return true; + } + return false; +} + +export function getRealValue(val?: string | number, min?: number, max?: number, parse?: (value: string) => string) { + + const value = isFunction(parse) ? parse(String(val)) : val; + + let rlt: number = NaN; + if (value !== '' && isValidNumber(value, min, max)) { + rlt = Number(value); + if (min !== undefined) { + rlt = rlt < min ? min : rlt; + } + if (max !== undefined) { + rlt = rlt > max ? max : rlt; + } + } + return rlt; +} + +export function correctValue(val: string | number, lastVal: number, min?: number, max?: number) { + const v = Number(val); + if (isNumber(v)) { + if (!isUndefined(max) && v > max) { + return max; + } if (!isUndefined(min) && v < min) { + return min; + } + return v; + } + return lastVal; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..6f1cedf984ee03c40af82c487d212458ba0b5041 --- /dev/null +++ b/packages/opendesign/src/components/input-number/style/index.scss @@ -0,0 +1,84 @@ +@use './var.scss'; + +.o-input-number { + .o-input-prepend, + .o-input-append { + font-size: var(--o-font_size-text1); + padding: 0; + align-items: stretch; + overflow: hidden; + } + + &.is-invalid { + .o-input-input { + text-decoration: line-through; + } + } +} + +.o-input-number-btn-wrap { + user-select: none; + justify-content: center; + display: flex; + min-width: var(--input-height); + font-size: 16px; + flex-wrap: wrap; + color: var(--input-number-btn-color); +} + +.o-input-number-btn, +.o-input-number-btn { + width: 100%; + height: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + font-size: 16px; + overflow: hidden; + position: relative; + background-color: var(--input-number-btn-bg-color); + &.both-left, + &.both-right { + height: 100%; + } + &:hover { + color: var(--input-number-btn-color-hover); + background-color: var(--input-number-btn-bg-color-hover); + } + &:focus { + color: var(--input-number-btn-color-active); + background-color: var(--input-number-btn-bg-color-active); + } + &.is-disabled { + cursor: not-allowed; + color: var(--input-number-btn-color-disabled); + background-color: var(--input-number-btn-bg-color-disabled); + } + + .o-input-round-pill & { + &.both-right { + padding-right: var(--input-number-btn-pill-fix); + } + &.both-left { + padding-left: var(--input-number-btn-pill-fix); + } + } +} +.o-input-number-icon-minus { + position: absolute; + margin-top: -4px; +} +.o-input-number-icon-plus { + position: absolute; + margin-bottom: -4px; +} + +.o-input-number-size-small { + width: 90px; +} +.o-input-number-size-medium { + width: 120px; +} +.o-input-number-size-large { + width: 160px; +} diff --git a/packages/opendesign/src/components/input-number/style/index.ts b/packages/opendesign/src/components/input-number/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..cb6997f11f11b59ee5e559fd9e37339e395a856d --- /dev/null +++ b/packages/opendesign/src/components/input-number/style/index.ts @@ -0,0 +1,3 @@ +import '../../style'; +import '../../input/style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/input-number/style/var.scss b/packages/opendesign/src/components/input-number/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..61c6c487dba7a9a675e88ad07410bc6a9d52689d --- /dev/null +++ b/packages/opendesign/src/components/input-number/style/var.scss @@ -0,0 +1,11 @@ +.o-input-number { + --input-number-btn-color: var(--o-color-info3); + --input-number-btn-color-hover: var(--o-color-info1); + --input-number-btn-color-active: var(--o-color-info1); + --input-number-btn-color-disabled: var(--o-color-info4); + --input-number-btn-bg-color: transparent; + --input-number-btn-bg-color-hover: var(--o-color-control1-light); + --input-number-btn-bg-color-active: var(--o-color-control2-light); + --input-number-btn-bg-color-disabled: var(--o-color-control4-light); + --input-number-btn-pill-fix: 2px; +} diff --git a/packages/opendesign/src/components/input-number/types.ts b/packages/opendesign/src/components/input-number/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..754352712398fd5efd8fbdf1804f9ae61cf8af69 --- /dev/null +++ b/packages/opendesign/src/components/input-number/types.ts @@ -0,0 +1,103 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { SizeT, RoundT } from '../_shared/global'; + +export const inputNumberPorps = { + /** + * 下拉框的值 + * v-model + */ + modelValue: { + type: [String, Number], + }, + /** + * 下拉框的默认值 + * 非受控 + */ + defaultValue: { + type: [String, Number], + }, + /** + * 按钮点击时步长 + */ + step: { + type: Number, + default: 1 + }, + /** + * 最小值 + */ + min: { + type: Number, + }, + /** + * 最大值 + */ + max: { + type: Number, + }, + /** + * 大小 + */ + size: { + type: String as PropType, + }, + /** + * 控制按钮位置 + */ + controls: { + type: String as PropType<'both' | 'right' | 'left' | 'none'>, + default: 'both' + }, + /** + * 圆角值 + */ + round: { + type: String as PropType + }, + /** + * 颜色类型：ColorT + */ + color: { + type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>, + default: 'normal' + }, + /** + * 提示文本 + */ + placeholder: { + type: String, + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + }, + /** + * 是否只读 + */ + readonly: { + type: Boolean, + }, + /** + * 是否自动增加宽度 + */ + autoWidth: { + type: Boolean, + }, + /** + * 解析输入框的值 + */ + parse: { + type: Function as PropType<(value: string) => string>, + }, + /** + * 对值格式化，控制显示格式 + * 需搭配parse处理，保证值的正确性 + */ + format: { + type: Function as PropType<(value: string | number) => string | number>, + }, +}; + +export type InputNumberPorpsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue new file mode 100644 index 0000000000000000000000000000000000000000..d021b666a946f30cd7885295ded7274be00b9679 --- /dev/null +++ b/packages/opendesign/src/components/input/OInput.vue @@ -0,0 +1,222 @@ + + diff --git a/packages/opendesign/src/components/input/__demo__/IndexInput.vue b/packages/opendesign/src/components/input/__demo__/IndexInput.vue new file mode 100644 index 0000000000000000000000000000000000000000..550adcad57c78eaa2eda37f221d0112f77e08cda --- /dev/null +++ b/packages/opendesign/src/components/input/__demo__/IndexInput.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue new file mode 100644 index 0000000000000000000000000000000000000000..ebb62b940b99ceb08860809dc6db52cb34b5846e --- /dev/null +++ b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue @@ -0,0 +1,24 @@ + + + diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..d1d9aaf79f57059a55e40d2b9d6bb24bff202386 --- /dev/null +++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue @@ -0,0 +1,139 @@ + + + diff --git a/packages/opendesign/src/components/input/__demo__/InputEvent.vue b/packages/opendesign/src/components/input/__demo__/InputEvent.vue new file mode 100644 index 0000000000000000000000000000000000000000..88c1ac1240b8233fa5bb231372b4b1cc783ffb00 --- /dev/null +++ b/packages/opendesign/src/components/input/__demo__/InputEvent.vue @@ -0,0 +1,30 @@ + + + diff --git a/packages/opendesign/src/components/input/__demo__/InputMethod.vue b/packages/opendesign/src/components/input/__demo__/InputMethod.vue new file mode 100644 index 0000000000000000000000000000000000000000..ad6f74a14d8670b22070a2ff8b27a6d79dd2043a --- /dev/null +++ b/packages/opendesign/src/components/input/__demo__/InputMethod.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/opendesign/src/components/input/__demo__/InputRound.vue b/packages/opendesign/src/components/input/__demo__/InputRound.vue new file mode 100644 index 0000000000000000000000000000000000000000..441d6d0956b8b905264d121bacc72be52ee2c5b7 --- /dev/null +++ b/packages/opendesign/src/components/input/__demo__/InputRound.vue @@ -0,0 +1,67 @@ + + + diff --git a/packages/opendesign/src/components/input/__demo__/InputSlot.vue b/packages/opendesign/src/components/input/__demo__/InputSlot.vue new file mode 100644 index 0000000000000000000000000000000000000000..be6b0f0eafc156c5df858938ea3873c162766f3a --- /dev/null +++ b/packages/opendesign/src/components/input/__demo__/InputSlot.vue @@ -0,0 +1,39 @@ + + + diff --git a/packages/opendesign/src/components/input/index.ts b/packages/opendesign/src/components/input/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..8b7f59f5418bef9c0384b17f5a8c519d5fcac682 --- /dev/null +++ b/packages/opendesign/src/components/input/index.ts @@ -0,0 +1,10 @@ +import _OInput from './OInput.vue'; +import type { App } from 'vue'; + +const OInput = Object.assign(_OInput, { + install(app: App) { + app.component(_OInput.name, _OInput); + }, +}); +export { OInput }; +export * from './types'; diff --git a/packages/opendesign/src/components/input/input.ts b/packages/opendesign/src/components/input/input.ts new file mode 100644 index 0000000000000000000000000000000000000000..e21489896f2623584380b61ba9e26e7d313968df --- /dev/null +++ b/packages/opendesign/src/components/input/input.ts @@ -0,0 +1,8 @@ +import { isNull, isUndefined } from '../_shared/is'; + +export function toInputString(val: unknown): string { + if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) { + return ''; + } + return String(val); +} diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..07e34562c35388a91b89fcc509a17932d659d9a8 --- /dev/null +++ b/packages/opendesign/src/components/input/style/index.scss @@ -0,0 +1,177 @@ +@use './var.scss'; + +.o-input { + cursor: pointer; + color: var(--input-color); + display: inline-flex; + height: var(--input-height); + font-size: var(--input-text-size); + line-height: var(--input-text-height); +} +.o-input-disabled { + --input-color: var(--input-color-disabled); +} +.o-input-wrap { + display: flex; + padding: var(--input-padding); + width: 100%; + overflow: hidden; + position: relative; + border-radius: var(--input-radius); + border: 1px solid var(--input-bd-color); + background-color: var(--input-bg-color); + + &:not(.is-readonly):not(.is-disabled) { + &:hover { + border-color: var(--input-bd-color-hover); + background-color: var(--input-bg-color-hover); + } + &.is-focus { + border-color: var(--input-bd-color-focus); + background-color: var(--input-bg-color-focus); + } + } + &.is-disabled { + border-color: var(--input-bd-color-disabled); + background-color: var(--input-bg-color-disabled); + cursor: not-allowed; + } + + &.has-prepend { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + &.has-append { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} +.o-input-input-wrap { + width: 100%; +} +.o-input-input { + outline: none; + border: none; + color: inherit; + cursor: inherit; + background-color: transparent; + display: inline-flex; + padding: 0; + line-height: inherit; + height: 100%; + width: 100%; + font-size: inherit; + min-width: 20px; + &::-webkit-input-placeholder { + color: var(--input-placeholder); + } +} + +.o-input-clear { + visibility: hidden; + opacity: 0; + transform: scale(0.1); + transition: all var(--o-duration-m1) var(--o-easing-standard-in); + display: flex; + align-items: center; + justify-content: center; + color: var(--input-icon-color); + background-color: var(--input-icon-bg-color); + border-radius: 50%; + + &:hover { + color: var(--input-icon-color-hover); + } + .o-input-suffix-wrap + & { + position: absolute; + right: 0; + } +} + +.o-input-clearable { + &:hover { + .o-input-suffix-wrap { + visibility: hidden; + opacity: 0; + } + .o-input-clear { + visibility: visible; + opacity: 1; + transform: scale(1); + } + } +} + +.o-input-suffix-wrap { + transition: all var(var(--o-duration-m1)) var(--o-easing-standard-out); +} +.o-input-suffix { + display: flex; + flex-shrink: 0; + align-items: center; + position: relative; + margin-left: 4px; +} +.o-input-prefix { + display: flex; + align-items: center; + margin-right: 4px; +} + +.o-input-clear-icon { + stroke-width: 0.5px; +} + +.o-input-append, +.o-input-prepend { + display: flex; + align-items: center; + background-color: var(--input-prepend-append-bg-color); + border: 1px solid var(--input-prepend-append-bd-color); +} + +.o-input-append { + flex-shrink: 0; + padding: var(--input-append-padding); + border-top-right-radius: var(--input-radius); + border-bottom-right-radius: var(--input-radius); +} + +.o-input-prepend { + flex-shrink: 0; + padding: var(--input-prepend-padding); + border-top-left-radius: var(--input-radius); + border-bottom-left-radius: var(--input-radius); +} +.o-input-solid { + .o-input-prepend { + border-width: 0 1px 0 0; + } + .o-input-append { + border-width: 0 0 0 1px; + } +} + +.o-input-outline { + .o-input-prepend { + border-right: 0; + } + .o-input-append { + border-left: 0; + } +} +.o-input-input-wrap { + position: relative; +} +.o-input-mirror { + white-space: pre; + line-height: inherit; + display: inline-flex; + align-items: center; + height: 100%; + visibility: hidden; + position: absolute; + left: 0; + top: 100%; + pointer-events: none; +} diff --git a/packages/opendesign/src/components/input/style/index.ts b/packages/opendesign/src/components/input/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/input/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..bb2302c37e94852acb9299db8f7e23023b15ab22 --- /dev/null +++ b/packages/opendesign/src/components/input/style/var.scss @@ -0,0 +1,143 @@ +.o-input { + --input-color: var(--o-color-info2); + --input-color-disabled: var(--o-color-info4); + --input-placeholder: var(--o-color-info4); + + --input-bg-color: transparent; + --input-bg-color-hover: transparent; + --input-bg-color-focus: var(--o-color-control-light); + + --input-prepend-append-bd-color: var(--o-color-control1); +} + +.o-input-normal { + --input-bd-color: var(--o-color-control1); + --input-bd-color-hover: var(--o-color-primary2); + --input-bd-color-focus: var(--o-color-primary3); + --input-bd-color-disabled: var(--o-color-control4); + &.o-input-solid { + --input-bd-color: var(--o-color-control1-light); + --input-bd-color-hover: var(--o-color-control2-light); + --input-bd-color-focus: var(--o-color-primary3-light); + --input-bd-color-disabled: var(--o-color-control4-light); + + --input-bg-color: var(--o-color-control1-light); + --input-bg-color-hover: var(--o-color-control2-light); + --input-bg-color-disabled: var(--o-color-control4-light); + + --input-prepend-append-bd-color: var(--o-color-control2-light); + &.o-input-disabled { + --input-prepend-append-bd-color: var(--o-color-control4-light); + } + } +} + +.o-input-success { + --input-bd-color: var(--o-color-success1); + --input-bd-color-hover: var(--o-color-success2); + --input-bd-color-focus: var(--o-color-success3); + --input-bd-color-disabled: var(--o-color-success4); + + &.o-input-solid { + --input-bd-color: var(--o-color-success1-light); + --input-bd-color-hover: var(--o-color-success2-light); + --input-bd-color-focus: var(--o-color-success3-light); + --input-bd-color-disabled: var(--o-color-success4-light); + + --input-bg-color: var(--o-color-success1-light); + --input-bg-color-hover: var(--o-color-success2-light); + --input-bg-color-disabled: var(--o-color-success4-light); + } +} + +.o-input-warning { + --input-bd-color: var(--o-color-warning1); + --input-bd-color-hover: var(--o-color-warning2); + --input-bd-color-focus: var(--o-color-warning3); + --input-bd-color-disabled: var(--o-color-warning4); + + &.o-input-solid { + --input-bd-color: var(--o-color-warning1-light); + --input-bd-color-hover: var(--o-color-warning2-light); + --input-bd-color-focus: var(--o-color-warning3-light); + --input-bd-color-disabled: var(--o-color-warning4-light); + + --input-bg-color: var(--o-color-warning1-light); + --input-bg-color-hover: var(--o-color-warning2-light); + --input-bg-color-disabled: var(--o-color-warning4-light); + } +} + +.o-input-danger { + --input-bd-color: var(--o-color-danger1); + --input-bd-color-hover: var(--o-color-danger2); + --input-bd-color-focus: var(--o-color-danger3); + --input-bd-color-disabled: var(--o-color-danger4); + + &.o-input-solid { + --input-bd-color: var(--o-color-danger1-light); + --input-bd-color-hover: var(--o-color-danger2-light); + --input-bd-color-focus: var(--o-color-danger3-light); + --input-bd-color-disabled: var(--o-color-danger4-light); + + --input-bg-color: var(--o-color-danger1-light); + --input-bg-color-hover: var(--o-color-danger2-light); + --input-bg-color-disabled: var(--o-color-danger4-light); + } +} + +.o-input-solid { + --input-prepend-append-bg-color: var(--o-color-control1-light); +} + +.o-input-size-small { + --input-height: var(--o-size-s); + --input-text-size: var(--o-font_size-tip1); + --input-text-height: var(--o-line_height-tip1); + + --input-padding: 0 8px; + --input-append-padding: 0 4px; + --input-prepend-padding: 0 4px; + --input-radius: var(--o-radius-control-s); + + &.o-input-round-pill { + --input-append-padding: 0 6px 0 4px; + --input-prepend-padding: 0 4px 0 6px; + } +} + +.o-input-size-medium { + --input-height: var(--o-size-m); + --input-text-size: var(--o-font_size-text1); + --input-text-height: var(--o-line_height-text1); + + --input-padding: 0 12px; + --input-append-padding: 0 8px; + --input-prepend-padding: 0 8px; + --input-radius: var(--o-radius-control-m); + + &.o-input-round-pill { + --input-append-padding: 0 12px 0 8px; + --input-prepend-padding: 0 8px 0 12px; + } +} + +.o-input-size-large { + --input-height: var(--o-size-l); + --input-text-size: var(--o-font_size-text2); + --input-text-height: var(--o-font_size-text2); + + --input-padding: 0 16px; + --input-append-padding: 0 12px; + --input-prepend-padding: 0 12px; + --input-radius: var(--o-radius-control-l); + + &.o-input-round-pill { + --input-append-padding: 0 16px 0 12px; + --input-prepend-padding: 0 12px 0 16px; + } +} + +.o-input-round-pill { + --input-radius: var(--o-size-l); +} diff --git a/packages/opendesign/src/components/input/types.ts b/packages/opendesign/src/components/input/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..adc351e1691be1faccddada272607f87c8d7b8ce --- /dev/null +++ b/packages/opendesign/src/components/input/types.ts @@ -0,0 +1,98 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import type { SizeT, RoundT, VariantT } from '../_shared/global'; + +export const inputProps = { + /** + * 下拉框的值 + * v-model + */ + modelValue: { + type: [String, Number], + }, + /** + * 下拉框的默认值 + * 非受控 + */ + defaultValue: { + type: [String, Number], + }, + /** + * 大小 + */ + size: { + type: String as PropType, + }, + /** + * 圆角值 + */ + round: { + type: String as PropType + }, + /** + * 颜色类型 + */ + color: { + type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>, + default: 'normal' + }, + /** + * 按钮类型：ColorT + */ + variant: { + type: String as PropType, + default: 'outline' + }, + /** + * 提示文本 + */ + placeholder: { + type: String, + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + }, + /** + * 是否只读 + */ + readonly: { + type: Boolean, + }, + /** + * 是否可以清除 + */ + clearable: { + type: Boolean, + default: true + }, + /** + * 是否自动增加宽度 + */ + autoWidth: { + type: Boolean, + }, + /** + * 是否是密码输入 + */ + type: { + type: String as PropType<'text' | 'password'>, + default: 'text' + }, + /** + * 解析输入框的值 + */ + parse: { + type: Function as PropType<(value: string) => string>, + }, + /** + * 对值格式化，控制显示格式 + * 需搭配parse处理，保证值的正确性 + */ + format: { + type: Function as PropType<(value: string | number) => string | number>, + }, +}; + +export type InputPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/intersection-observer/__demo__/IndexIntersection.vue b/packages/opendesign/src/components/intersection-observer/__demo__/IndexIntersection.vue new file mode 100644 index 0000000000000000000000000000000000000000..402de8cf4750fc8db5efac08a0ce945f9e10f205 --- /dev/null +++ b/packages/opendesign/src/components/intersection-observer/__demo__/IndexIntersection.vue @@ -0,0 +1,9 @@ + + + diff --git a/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionDemo.vue b/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionDemo.vue new file mode 100644 index 0000000000000000000000000000000000000000..c489da5896d17cb61951bcdec6b5cec51c2fcdc0 --- /dev/null +++ b/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionDemo.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/opendesign/src/components/intersection-observer/index.ts b/packages/opendesign/src/components/intersection-observer/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..01d6a0b13808a98017b63b2eafce475335395936 --- /dev/null +++ b/packages/opendesign/src/components/intersection-observer/index.ts @@ -0,0 +1 @@ +export { default as OIntersectionObserver } from './intersection-observer'; \ No newline at end of file diff --git a/packages/opendesign/src/components/intersection-observer/intersection-observer.ts b/packages/opendesign/src/components/intersection-observer/intersection-observer.ts new file mode 100644 index 0000000000000000000000000000000000000000..eb1e28cc50e687ec05b7bc265017e19c93c75678 --- /dev/null +++ b/packages/opendesign/src/components/intersection-observer/intersection-observer.ts @@ -0,0 +1,25 @@ +import { defineComponent, cloneVNode, withDirectives } from 'vue'; +import { useIntersectionObserverDirective } from '../hooks'; + +/** + * 子元素resize监听 + * 如果有多个子元素，每个子元素都会被监听到 + */ +export default defineComponent({ + name: 'OIntersectionObserver', + emits: ['intersection'], + setup(props, { emit, slots }) { + const { vIntersectionObserver } = useIntersectionObserverDirective({ + listener: (entry: IntersectionObserverEntry) => { + // 触发resize事件 + emit('intersection', entry.isIntersecting, entry); + }, + removeOnUnmounted: false + }); + + return () => { + const children = slots.default?.(); + return children?.map((item) => withDirectives(cloneVNode(item), [[vIntersectionObserver]])); + }; + }, +}); diff --git a/packages/opendesign/src/components/link/OLink.vue b/packages/opendesign/src/components/link/OLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..c29be9b2920be8298e19f74583dab6bb57c4f78b --- /dev/null +++ b/packages/opendesign/src/components/link/OLink.vue @@ -0,0 +1,46 @@ + + diff --git a/packages/opendesign/src/components/link/__demo__/IndexLink.vue b/packages/opendesign/src/components/link/__demo__/IndexLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..671f93996439f17b5f56e3ac38fde9c4f18119da --- /dev/null +++ b/packages/opendesign/src/components/link/__demo__/IndexLink.vue @@ -0,0 +1,10 @@ + + + diff --git a/packages/opendesign/src/components/link/__demo__/LinkBasic.vue b/packages/opendesign/src/components/link/__demo__/LinkBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..2dc69c75994b6e7ca3cbb6ab05729c96f16c3edc --- /dev/null +++ b/packages/opendesign/src/components/link/__demo__/LinkBasic.vue @@ -0,0 +1,73 @@ + + + diff --git a/packages/opendesign/src/components/link/index.ts b/packages/opendesign/src/components/link/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..7b8e241be348e0a8293e928b48451714528b34b1 --- /dev/null +++ b/packages/opendesign/src/components/link/index.ts @@ -0,0 +1,12 @@ +import _OLink from './OLink.vue'; +import type { App } from 'vue'; + +const OLink = Object.assign(_OLink, { + install(app: App) { + app.component(_OLink.name, _OLink); + }, +}); + +export { + OLink, +}; diff --git a/packages/opendesign/src/components/link/style/index.scss b/packages/opendesign/src/components/link/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..b4337165b6d27837b66a556757c92340aac55e9c --- /dev/null +++ b/packages/opendesign/src/components/link/style/index.scss @@ -0,0 +1,56 @@ +@use './var.scss'; + +.o-link { + cursor: pointer; + text-decoration: none; + padding: 0 2px; + color: var(--link-color); + + &:not(.o-link-disabled) { + &:hover { + text-decoration: underline; + color: var(--link-color-hover); + text-underline-offset: 4px; + .o-link-icon.arrow svg { + transform: translateX(4px); + } + } + + &:active { + color: var(--link-color-active); + } + } +} + +.o-link-disabled { + cursor: not-allowed; + text-decoration: none; + color: var(--link-color-disabled); +} + +.o-link-icon { + &.prefix { + margin-right: 2px; + } + &.suffix { + margin-left: 2px; + } + + &.arrow svg { + transition: transform var(--o-duration-s) var(--o-easing-standard); + } +} + +.o-link-hoverable { + &:not(.is-disabled) { + &:hover { + text-decoration: none; + color: var(--link-color); + background-color: var(--link-bg-color-hover); + } + &:active { + color: var(--link-color); + background-color: var(--link-bg-color-active); + } + } +} diff --git a/packages/opendesign/src/components/link/style/index.ts b/packages/opendesign/src/components/link/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/link/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/link/style/var.scss b/packages/opendesign/src/components/link/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..917457ec2c1bb50269a969dfd2268bed7eb037c6 --- /dev/null +++ b/packages/opendesign/src/components/link/style/var.scss @@ -0,0 +1,44 @@ +.o-link-normal { + --link-color: var(--o-color-info2); + --link-color-hover: var(--o-color-primary2); + --link-color-active: var(--o-color-primary3); + --link-color-disabled: var(--o-color-info4); + --link-bg-color-hover: var(--o-color-control1-light); + --link-bg-color-active: var(--o-color-control2-light); +} + +.o-link-primary { + --link-color: var(--o-color-primary1); + --link-color-hover: var(--o-color-primary2); + --link-color-active: var(--o-color-primary3); + --link-color-disabled: var(--o-color-primary4); + --link-bg-color-hover: var(--o-color-primary1-light); + --link-bg-color-active: var(--o-color-primary2-light); +} + +.o-link-success { + --link-color: var(--o-color-success1); + --link-color-hover: var(--o-color-success2); + --link-color-active: var(--o-color-success3); + --link-color-disabled: var(--o-color-success4); + --link-bg-color-hover: var(--o-color-success1-light); + --link-bg-color-active: var(--o-color-success2-light); +} + +.o-link-warning { + --link-color: var(--o-color-warning1); + --link-color-hover: var(--o-color-warning2); + --link-color-active: var(--o-color-warning3); + --link-color-disabled: var(--o-color-warning4); + --link-bg-color-hover: var(--o-color-warning1-light); + --link-bg-color-active: var(--o-color-warning2-light); +} + +.o-link-danger { + --link-color: var(--o-color-danger1); + --link-color-hover: var(--o-color-danger2); + --link-color-active: var(--o-color-danger3); + --link-color-disabled: var(--o-color-danger4); + --link-bg-color-hover: var(--o-color-danger1-light); + --link-bg-color-active: var(--o-color-danger2-light); +} diff --git a/packages/opendesign/src/components/link/types.ts b/packages/opendesign/src/components/link/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..cc397dc32a073a07723211552d32097147247ea5 --- /dev/null +++ b/packages/opendesign/src/components/link/types.ts @@ -0,0 +1,56 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { ColorT } from '../_shared/global'; + +export const linkProps = { + /** + * 包含超链接指向的 URL 或 URL 片段。 + */ + href: { + type: String, + }, + /** + * 指定在何处显示链接的资源。 + */ + target: { + type: String as PropType<'_blank' | '_parent' | '_self' | '_top'>, + }, + /** + * 是否为loading状态 + */ + loading: { + type: Boolean, + }, + /** + * 链接颜色 + */ + color: { + type: String as PropType, + default: 'normal' + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + }, + /** + * 前缀图标 + */ + iconPrefix: { + type: Boolean, + }, + /** + * 图标箭头 + */ + iconArrow: { + type: Boolean, + }, + /** + * hover时是否显示背景 + */ + hoverable: { + type: Boolean, + }, +}; + +export type LinkPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/menu/OMenu.vue b/packages/opendesign/src/components/menu/OMenu.vue new file mode 100644 index 0000000000000000000000000000000000000000..729453141d888b5c23b11d2172169df8c3a6bb3b --- /dev/null +++ b/packages/opendesign/src/components/menu/OMenu.vue @@ -0,0 +1,88 @@ + + + diff --git a/packages/opendesign/src/components/menu/OMenuItem.vue b/packages/opendesign/src/components/menu/OMenuItem.vue new file mode 100644 index 0000000000000000000000000000000000000000..4da6ea2448300d3deba2282b3af0b8883fdf29b9 --- /dev/null +++ b/packages/opendesign/src/components/menu/OMenuItem.vue @@ -0,0 +1,57 @@ + + + diff --git a/packages/opendesign/src/components/menu/OSubMenu.vue b/packages/opendesign/src/components/menu/OSubMenu.vue new file mode 100644 index 0000000000000000000000000000000000000000..67b57ce2d07fd0b91299061d9ab73f3754c03798 --- /dev/null +++ b/packages/opendesign/src/components/menu/OSubMenu.vue @@ -0,0 +1,109 @@ + + + diff --git a/packages/opendesign/src/components/menu/__demo__/IndexMenu.vue b/packages/opendesign/src/components/menu/__demo__/IndexMenu.vue new file mode 100644 index 0000000000000000000000000000000000000000..e5334052a14c12e99684894b93231fb63a98cdde --- /dev/null +++ b/packages/opendesign/src/components/menu/__demo__/IndexMenu.vue @@ -0,0 +1,12 @@ + + + diff --git a/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue b/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue new file mode 100644 index 0000000000000000000000000000000000000000..7ace3bb585dce2f6757492e23222192145819d72 --- /dev/null +++ b/packages/opendesign/src/components/menu/__demo__/MenuAccordion.vue @@ -0,0 +1,48 @@ + + + diff --git a/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue b/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..82821f9e44b5194d28042996250d69550fbeca0e --- /dev/null +++ b/packages/opendesign/src/components/menu/__demo__/MenuBasic.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/packages/opendesign/src/components/menu/index.ts b/packages/opendesign/src/components/menu/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..7202a587b56ea81e6ed4049dbfe3e78f2040c72b --- /dev/null +++ b/packages/opendesign/src/components/menu/index.ts @@ -0,0 +1,24 @@ +import type { App } from 'vue'; + +import _OMenu from './OMenu.vue'; +import _OSubMenu from './OSubMenu.vue'; +import _OMenuItem from './OMenuItem.vue'; + +const OMenu = Object.assign(_OMenu, { + install(app: App) { + app.component(_OMenu.name, _OMenu); + }, +}); + +const OSubMenu = Object.assign(_OSubMenu, { + install(app: App) { + app.component(_OSubMenu.name, _OSubMenu); + }, +}); + +const OMenuItem = Object.assign(_OMenuItem, { + install(app: App) { + app.component(_OMenuItem.name, _OMenuItem); + }, +}); +export { OMenu, OSubMenu, OMenuItem }; diff --git a/packages/opendesign/src/components/menu/menu.ts b/packages/opendesign/src/components/menu/menu.ts new file mode 100644 index 0000000000000000000000000000000000000000..cfc4aac98d2696077119bf73af20db80dfe3605c --- /dev/null +++ b/packages/opendesign/src/components/menu/menu.ts @@ -0,0 +1,54 @@ +import { VTree } from '../_shared/tree'; +import type { TreeNodeT } from '../_shared/tree'; +import { isString, isUndefined } from '../_shared/is'; + +interface MenuNodeT extends TreeNodeT {} + +export default class MenuTree extends VTree { + constructor(value: string | number, parent: MenuNodeT | null, children: Array = []) { + super(value, parent, children); + } + + addChild(opitons: { value: string; parentVal: string | undefined }) { + const { value, parentVal } = opitons; + const node: MenuNodeT = { + value, + parent: null, + children: [], + }; + + if (isUndefined(parentVal)) { + if (!this.hasSameNode(this.root.children, node.value)) { + node.parent = this.root; + this.root.children.push(node); + } + } else { + const parentNode = this.getNode(this.root, parentVal); + if (parentNode && !this.hasSameNode(parentNode.children, node.value)) { + node.parent = parentNode; + parentNode.children.push(node); + } + } + } + + selectNode(val: string) { + const path = this.getPath(this.root, val, []) || []; + return path.map((node) => { + if (isString(node.value)) { + return node.value; + } + }); + } + + getSiblings(val: string) { + const node = this.getNode(this.root, val); + if (!node || !node.parent) { + return []; + } + return node.parent.children.map((item) => { + if (item.value !== val) { + return item.value; + } + }); + } +} diff --git a/packages/opendesign/src/components/menu/provide.ts b/packages/opendesign/src/components/menu/provide.ts new file mode 100644 index 0000000000000000000000000000000000000000..99811e06642f178642f246b7b976f88b0762d50e --- /dev/null +++ b/packages/opendesign/src/components/menu/provide.ts @@ -0,0 +1,19 @@ +import { InjectionKey, Ref } from 'vue'; +import MenuTree from './menu'; + +export const menuInjectKey: InjectionKey<{ + accordion: Ref; + levelIndent: Ref; + realValue: Ref; + activeNodes: Ref>; + realExpanded: Ref>; + menuTree: MenuTree; + depth: number; + updateModelValue: (val: string) => void; + updateExpanded: (val: Array) => void; +}> = Symbol('provide-menu'); + +export const subMenuInjectKey: InjectionKey<{ + value: string; + depth: number; +}> = Symbol('provide-sub-menu'); diff --git a/packages/opendesign/src/components/menu/style/index.scss b/packages/opendesign/src/components/menu/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..32ca07b6acac8b4bc5426a333c1dd2c2603a19a2 --- /dev/null +++ b/packages/opendesign/src/components/menu/style/index.scss @@ -0,0 +1,98 @@ +@use './var.scss'; + +.o-menu { + width: var(--menu-width); + background-color: var(--menu-bg-color); + list-style: none; + margin: 0; + padding: 0; +} + +// submenu +.o-sub-menu { + font-size: var(--sub-menu-text-size); + line-height: var(--sub-menu-text-height); + color: var(--sub-menu-color); +} + +.o-sub-menu-active { + & > .o-sub-menu-title { + font-weight: 500; + } +} + +.o-sub-menu-expanded { + & > .o-sub-menu-title { + .o-sub-menu-title-arrow { + transform: rotate(90deg); + } + } +} + +.o-sub-menu-title { + position: relative; + display: flex; + align-items: center; + padding: 12px 48px 12px 24px; + border-radius: var(--sub-menu-radius); + cursor: pointer; + transition: background-color var(--o-duration-s) var(--o-easing-standard); + + &:hover { + background-color: var(--sub-menu-bg-color-hover); + } +} + +.o-sub-menu-title-icon { + margin-right: 4px; + font-size: var(--sub-menu-icon-size); +} + +.o-sub-menu-title-content { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.o-sub-menu-title-arrow { + position: absolute; + right: 16px; + transform: rotate(0); + font-size: var(--sub-menu-icon-arrow-size); + transition: transform var(--o-duration-m2) var(--o-easing-standard); +} + +.o-sub-menu-children { + padding: 0; + margin: 0; + list-style: none; + overflow: hidden; + transition: height var(--o-duration-m2) var(--o-easing-standard); +} + +//menu-item +.o-menu-item { + color: var(--menu-item-color); + font-size: var(--menu-item-text-size); + line-height: var(--menu-item-text-height); + border-radius: var(--menu-item-radius); + padding: 12px 16px 12px 24px; + cursor: pointer; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + transition: background-color var(--o-duration-s) var(--o-easing-standard); + + &:not(.o-menu-item-active):hover { + background-color: var(--menu-item-bg-color-hover); + } +} + +.o-menu-item-active { + background-color: var(--menu-item-bg-color-active); +} + +.o-menu-item-disabled { + cursor: not-allowed; + color: var(--menu-item-color-disabled); +} diff --git a/packages/opendesign/src/components/menu/style/index.ts b/packages/opendesign/src/components/menu/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/menu/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/menu/style/var.scss b/packages/opendesign/src/components/menu/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..ab63a14148d969b3c93964454fcc61384d7bb663 --- /dev/null +++ b/packages/opendesign/src/components/menu/style/var.scss @@ -0,0 +1,24 @@ +.o-menu { + --menu-width: 240px; + --menu-bg-color: transparent; +} + +.o-sub-menu { + --sub-menu-color: var(--o-color-info1); + --sub-menu-bg-color-hover: var(--o-color-control2-light); + --sub-menu-text-size: var(--o-font_size-text1); + --sub-menu-text-height: var(--o-line_height-text1); + --sub-menu-icon-size: var(--o-icon_size-s); + --sub-menu-icon-arrow-size: var(--o-icon_size-xs); + --sub-menu-radius: var(--o-radius-control-m); +} + +.o-menu-item { + --menu-item-color: var(--o-color-info1); + --menu-item-color-disabled: var(--o-color-info4); + --menu-item-text-size: var(--o-font_size-text1); + --menu-item-text-height: var(--o-line_height-text1); + --menu-item-bg-color-active: var(--o-color-control3-light); + --menu-item-bg-color-hover: var(--o-color-control2-light); + --menu-item-radius: var(--o-radius-control-m); +} diff --git a/packages/opendesign/src/components/menu/types.ts b/packages/opendesign/src/components/menu/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..21a0004d6de3df4f8f779b2283e2c3625ae7b3d9 --- /dev/null +++ b/packages/opendesign/src/components/menu/types.ts @@ -0,0 +1,63 @@ +import type { ExtractPropTypes, PropType } from 'vue'; + +// MenuProps +export const menuProps = { + /** + * 是否开启手风琴模式 + */ + accordion: { + type: Boolean, + default: false, + }, + // 层级缩进 + levelIndent: { + type: Number, + default: 24, + }, + /** + * 默认选中值 + */ + modelValue: { + type: String, + }, + // 非受控模式时，默认选中值 + defaultValue: { + type: String, + default: '', + }, + /** + * 默认展开的子菜单值 + */ + expanded: { + type: Array as PropType>, + }, + // 非受控模式时，默认展开的子菜单值 + defaultExpanded: { + type: Array as PropType>, + default: () => [], + }, +}; + +export type MenuPropsT = ExtractPropTypes; + +// SubMenuProps +export const subMenuProps = { + value: { + type: String, + required: true, + }, +}; +export type SubMenuPropsT = ExtractPropTypes; + +// MenuItemProps +export const menuItemProps = { + value: { + type: String, + required: true, + }, + disabled: { + type: Boolean, + default: false, + }, +}; +export type MenuItemPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/message/OMessage.vue b/packages/opendesign/src/components/message/OMessage.vue new file mode 100644 index 0000000000000000000000000000000000000000..b55cef66ebf9b6d4e35ae7a83332429c3a729ca8 --- /dev/null +++ b/packages/opendesign/src/components/message/OMessage.vue @@ -0,0 +1,42 @@ + + + diff --git a/packages/opendesign/src/components/message/OMessageList.vue b/packages/opendesign/src/components/message/OMessageList.vue new file mode 100644 index 0000000000000000000000000000000000000000..0b45998fa44dfa1313083207bbd92b423166344b --- /dev/null +++ b/packages/opendesign/src/components/message/OMessageList.vue @@ -0,0 +1,66 @@ + + + diff --git a/packages/opendesign/src/components/message/__demo__/IndexMessage.vue b/packages/opendesign/src/components/message/__demo__/IndexMessage.vue new file mode 100644 index 0000000000000000000000000000000000000000..e074ad3502d98830200b3c6865e3ac8b925c5c38 --- /dev/null +++ b/packages/opendesign/src/components/message/__demo__/IndexMessage.vue @@ -0,0 +1,10 @@ + + + diff --git a/packages/opendesign/src/components/message/__demo__/MessageBasic.vue b/packages/opendesign/src/components/message/__demo__/MessageBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..651c77c8254634685fca0ea25965cad848695178 --- /dev/null +++ b/packages/opendesign/src/components/message/__demo__/MessageBasic.vue @@ -0,0 +1,43 @@ + + + diff --git a/packages/opendesign/src/components/message/index.ts b/packages/opendesign/src/components/message/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..c5bf979732b2b7a6ce03c1776251b484ab57b69e --- /dev/null +++ b/packages/opendesign/src/components/message/index.ts @@ -0,0 +1,14 @@ +import type { App } from 'vue'; + +import _OMessage from './OMessage.vue'; +import useMessage from './use-message'; + +const OMessage = Object.assign(_OMessage, { + install(app: App) { + app.component(_OMessage.name, _OMessage); + }, +}); + +export * from './types'; + +export { OMessage, useMessage }; diff --git a/packages/opendesign/src/components/message/style/index.scss b/packages/opendesign/src/components/message/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..1acb757f271f4fd127a5e28308f1e8fe08314fc9 --- /dev/null +++ b/packages/opendesign/src/components/message/style/index.scss @@ -0,0 +1,43 @@ +@use './var.scss'; + +.o-message { + display: flex; + align-items: center; + padding: var(--message-padding); + font-size: var(--message-text-size); + line-height: var(--message-text-height); + color: var(--message-color); + background-color: var(--message-bg-color); + border-radius: var(--message-radius); + border: 1px solid var(--message-bd-color); + width: fit-content; + transition: all var(--o-duration-m1) var(--o-easing-standard-out); +} + +.o-message + .o-message { + margin-top: var(--message-gap); +} + +.o-message-list { + position: fixed; + z-index: 1001; + left: 50%; + top: 32px; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; +} + +.fade-message-enter-from { + opacity: 0; +} + +.fade-message-enter-active, +.fade-message-leave-active { + transition: all var(--o-duration-m1) var(--o-easing-standard-out); +} + +.fade-message-leave-to { + opacity: 0; +} diff --git a/packages/opendesign/src/components/message/style/index.ts b/packages/opendesign/src/components/message/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/message/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/message/style/var.scss b/packages/opendesign/src/components/message/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..5dfb21997badf121b88716b40c17ff33ed2f4a1a --- /dev/null +++ b/packages/opendesign/src/components/message/style/var.scss @@ -0,0 +1,31 @@ +.o-message { + --message-color: var(--o-color-info1); + + --message-padding: 8px 16px; + --message-text-size: var(--o-font_size-text1); + --message-text-height: var(--o-line_height-text1); + + --message-radius: var(--o-radius-control-m); + + --message-gap: 16px; +} + +.o-message-normal { + --message-bg-color: var(--o-color-control-light); + --message-bd-color: var(--o-color-control1); +} + +.o-message-success { + --message-bg-color: var(--o-color-success4-light); + --message-bd-color: var(--o-color-success1); +} + +.o-message-warning { + --message-bg-color: var(--o-color-warning4-light); + --message-bd-color: var(--o-color-warning1); +} + +.o-message-danger { + --message-bg-color: var(--o-color-danger4-light); + --message-bd-color: var(--o-color-danger1); +} diff --git a/packages/opendesign/src/components/message/types.ts b/packages/opendesign/src/components/message/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..6f7d7b190b24f3c9afbb9a8287903cc809240ab5 --- /dev/null +++ b/packages/opendesign/src/components/message/types.ts @@ -0,0 +1,26 @@ +import type { ExtractPropTypes, PropType } from 'vue'; +import { ColorT } from '../_shared/global'; + +export const messageProps = { + color: { + type: String as PropType, + default: 'normal', + }, + content: { + type: String, + default: '', + }, + duration: { + type: Number, + default: 3000, + }, + onClose: { + type: Function as PropType<() => void>, + }, +}; + +export type MessagePropsT = ExtractPropTypes; + +export type MessagePositionT = 'top' | 'bottom'; + +export type MessageParamsT = Partial; diff --git a/packages/opendesign/src/components/message/use-message.ts b/packages/opendesign/src/components/message/use-message.ts new file mode 100644 index 0000000000000000000000000000000000000000..4df6da19a1718eb1f4545073b8f423a0e35a9480 --- /dev/null +++ b/packages/opendesign/src/components/message/use-message.ts @@ -0,0 +1,108 @@ +import { createVNode, render } from 'vue'; +import { isString } from '../_shared/is'; +import { MessageParamsT } from './types'; +import OMessageList from './OMessageList.vue'; + +const DEFAULT_OPTIONS: MessageParamsT = { + color: 'normal', + position: 'top', + duration: 3000, +}; + +const instanceMap = new Map(); + +const normalizeOptions = (params: MessageParamsT) => { + const options: MessageParamsT = !params || isString(params) ? { content: params } : params; + + const normalized = { + ...DEFAULT_OPTIONS, + ...options, + }; + + return normalized; +}; + +const showMessage = (params: MessageParamsT) => { + const { position } = params; + + const instance = instanceMap.get(position); + if (!instance) { + let wrap: HTMLDivElement | null = document.createElement('div'); + + const vnode = createVNode(OMessageList, { + position: params.position, + onDestory: () => { + if (wrap) { + document.body.removeChild(wrap); + wrap = null; + } + instanceMap.set(position, undefined); + }, + }); + + render(vnode, wrap); + + const vm = vnode.component!; + vm.exposed?.add(params); + + instanceMap.set(position, vm); + + document.body.appendChild(wrap); + } else { + instance.exposed?.add(params); + } +}; + +const normal = (params: MessageParamsT): void => { + const options: MessageParamsT = normalizeOptions(params); + showMessage({ + ...options, + color: 'normal', + }); +}; + +const primary = (params: MessageParamsT): void => { + const options: MessageParamsT = normalizeOptions(params); + showMessage({ + ...options, + color: 'primary', + }); +}; + +const success = (params: MessageParamsT): void => { + const options: MessageParamsT = normalizeOptions(params); + showMessage({ + ...options, + color: 'success', + }); +}; + +const warning = (params: MessageParamsT): void => { + const options: MessageParamsT = normalizeOptions(params); + showMessage({ + ...options, + color: 'warning', + }); +}; + +const danger = (params: MessageParamsT): void => { + const options: MessageParamsT = normalizeOptions(params); + showMessage({ + ...options, + color: 'danger', + }); +}; + +const Message = { + normal, + primary, + success, + warning, + danger, +}; + +const useMessage = () => { + return Message; +}; + +export default useMessage; diff --git a/packages/opendesign/src/components/option/OOption.vue b/packages/opendesign/src/components/option/OOption.vue new file mode 100644 index 0000000000000000000000000000000000000000..21e8cb5a0de5132492ba9b8ce60cf8580257f8c1 --- /dev/null +++ b/packages/opendesign/src/components/option/OOption.vue @@ -0,0 +1,63 @@ + + diff --git a/packages/opendesign/src/components/option/index.ts b/packages/opendesign/src/components/option/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..45c30c0fb8ec7cb807681e641a31a91cf4e094d0 --- /dev/null +++ b/packages/opendesign/src/components/option/index.ts @@ -0,0 +1,12 @@ +import _OOption from './OOption.vue'; +import type { App } from 'vue'; + +const OOption = Object.assign(_OOption, { + install(app: App) { + app.component(_OOption.name, _OOption); + }, +}); + +export { + OOption, +}; diff --git a/packages/opendesign/src/components/option/style/index.scss b/packages/opendesign/src/components/option/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..4916078068343a8a1bcf28b349588ad86426d71c --- /dev/null +++ b/packages/opendesign/src/components/option/style/index.scss @@ -0,0 +1,35 @@ +@use './var.scss'; + +.o-option { + display: flex; + align-items: center; + padding: var(--option-padding); + color: var(--option-color); + background-color: var(--option-bg-color); + font-size: var(--option-text-size); + line-height: var(--option-text-height); + border-radius: var(--option-radius); + transition: background-color var(--o-duration-s) var(--o-easing-standard); + cursor: pointer; + + &:not(.o-option-disabled) { + &:hover { + background-color: var(--option-bg-color-hover); + color: var(--option-color-hover); + } + &.active { + color: var(--option-color-active); + background-color: var(--option-bg-color-active); + } + } + + &.active { + font-weight: 500; + } +} + +.o-option-disabled { + cursor: not-allowed; + color: var(--option-color-disabled); + background-color: var(--option-bg-color-disabled); +} diff --git a/packages/opendesign/src/components/option/style/index.ts b/packages/opendesign/src/components/option/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/option/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/option/style/var.scss b/packages/opendesign/src/components/option/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..df41b6469a26d4b1eaabb6e0f9c884194457724c --- /dev/null +++ b/packages/opendesign/src/components/option/style/var.scss @@ -0,0 +1,17 @@ +.o-option { + --option-color: var(--o-color-info1); + --option-color-hover: var(--o-color-info1); + --option-color-active: var(--o-color-info1); + --option-color-disabled: var(--o-color-info4); + + --option-bg-color: transparent; + --option-bg-color-hover: var(--o-color-control2-light); + --option-bg-color-active: var(--o-color-control3-light); + --option-bg-color-disabled: transparent; + + --option-text-size: var(--o-font_size-text1); + --option-text-height: var(--o-line_height-text1); + + --option-padding: 8px 12px; + --option-radius: var(--o-radius-control-m); +} diff --git a/packages/opendesign/src/components/option/types.ts b/packages/opendesign/src/components/option/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..7327a7b28f9b3ae652afcc6445e94a030d164b94 --- /dev/null +++ b/packages/opendesign/src/components/option/types.ts @@ -0,0 +1,26 @@ +import { ExtractPropTypes } from 'vue'; + +export const optionProps = { + /** + * 显示文本 + */ + label: { + type: String, + default: '' + }, + /** + * 值 + */ + value: { + type: [String, Number], + default: '' + }, + /** + * 禁用 + */ + disabled: { + type: Boolean + }, +}; + +export type OptionPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue new file mode 100644 index 0000000000000000000000000000000000000000..0437f149f73eb692467025edbf4669be9a62e05e --- /dev/null +++ b/packages/opendesign/src/components/pagination/OPagination.vue @@ -0,0 +1,203 @@ + + diff --git a/packages/opendesign/src/components/pagination/__demo__/IndexPagination.vue b/packages/opendesign/src/components/pagination/__demo__/IndexPagination.vue new file mode 100644 index 0000000000000000000000000000000000000000..60792c905243c4cda81f8878c3bbc34750b67028 --- /dev/null +++ b/packages/opendesign/src/components/pagination/__demo__/IndexPagination.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..d4cd6f2f4cf5bb965ec222bc5cee495d6bce3ab2 --- /dev/null +++ b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue @@ -0,0 +1,65 @@ + + + diff --git a/packages/opendesign/src/components/pagination/index.ts b/packages/opendesign/src/components/pagination/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..a07fbd34ff5e2a86f6098bd21778a60a7f375aa5 --- /dev/null +++ b/packages/opendesign/src/components/pagination/index.ts @@ -0,0 +1,11 @@ +import _OPagination from './OPagination.vue'; +import type { App } from 'vue'; + +const OPagination = Object.assign(_OPagination, { + install(app: App) { + app.component(_OPagination.name, _OPagination); + }, +}); + +export { OPagination }; +export * from './types'; diff --git a/packages/opendesign/src/components/pagination/pagination.ts b/packages/opendesign/src/components/pagination/pagination.ts new file mode 100644 index 0000000000000000000000000000000000000000..cce67a5b1432ed0d4d2006417dad9bd5e9889e40 --- /dev/null +++ b/packages/opendesign/src/components/pagination/pagination.ts @@ -0,0 +1,96 @@ +function getNumbers(min: number, max: number) { + const arr = []; + for (let i = min; i <= max; i++) { + arr.push(i); + } + return arr; +} +export function getPagerItem(totalPage: number, currentPage = 1, showPageCount = 9) { + const activePage = currentPage > totalPage ? totalPage : currentPage; + + const maxCount = showPageCount > 3 ? showPageCount : 3; + let pages: Array<{ value: number | 'left' | 'right', isMore?: boolean, list?: number[] }> = []; + + /** + * 如果页码小于最大显示页码数，直接显示全部 + */ + if (totalPage <= maxCount) { + for (let i = 1; i <= totalPage; i++) { + pages.push({ value: i }); + } + return pages; + } + + /** + * 如果页码大于最大显示页码数，需要处理页码隐藏 + */ + // 先设置首尾页码 + pages[0] = { value: 1 }; + pages[maxCount - 1] = { value: totalPage }; + + if (maxCount === 3) { + // 如果只显示3个，则中间全部隐藏 + pages[1] = { + isMore: true, + value: 'left', + list: getNumbers(2, totalPage - 1) + }; + } else { + const d = (maxCount - 3) / 2; + + let min = activePage - Math.floor(d); + let max = activePage + Math.ceil(d); + + // 处理边缘问题 + if (max > totalPage - 1) { + min -= (max - totalPage + 1); + max = totalPage - 1; + } + if (min < 2) { + max += (2 - min); + min = 2; + } + + // 判断第二个页码是否隐藏 + if (min < 3) { + pages[1] = { value: 2 }; + min = 2; + } else { + pages[1] = { + isMore: true, + value: 'left', + list: getNumbers(2, min) + }; + } + + // 判断倒数第二个页码是否隐藏 + if (max > totalPage - 2) { + pages[maxCount - 2] = { value: totalPage - 1 }; + max = totalPage - 1; + } else { + pages[maxCount - 2] = { + isMore: true, + value: 'right', + list: getNumbers(max, totalPage - 1) + }; + } + + // 处理中间显示的页码 + getNumbers(min + 1, max - 1).forEach((item, idx) => { + pages[2 + idx] = ({ value: item }); + }); + } + + return pages; +} + +export type PagerItemT = ReturnType + + +export function getSizeOptions(pageSizes: number[], sufix: string, currentPageSize?: number) { + return pageSizes.map(item => ({ + label: item + sufix, + value: item, + active: currentPageSize === item + })); +} \ No newline at end of file diff --git a/packages/opendesign/src/components/pagination/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..92604c7b3a2c7105fd66f44dd6dc945181ae9877 --- /dev/null +++ b/packages/opendesign/src/components/pagination/style/index.scss @@ -0,0 +1,111 @@ +@use './var.scss'; + +.o-pagination-wrap { + display: flex; + align-items: center; + white-space: nowrap; + + > *:not(:first-child) { + margin-left: var(--pagination-item-gap); + } +} +.o-pagination-pager { + display: flex; + user-select: none; +} +.o-pagination-prev, +.o-pagination-next { + width: var(--pagination-item-size); + height: var(--pagination-item-size); + display: inline-flex; + justify-content: center; + align-items: center; + color: var(--pagination-item-color); + border: 1px solid var(--pagination-item-bd-color); + background-color: var(--pagination-item-bg-color); + cursor: pointer; + user-select: none; + border-radius: var(--pagination-radius); + &:hover { + border-color: var(--pagination-item-bd-color-hover); + background-color: var(--pagination-item-bg-color-hover); + } + &:active { + border-color: var(--pagination-item-bd-color-active); + background-color: var(--pagination-item-bg-color-active); + } + &.is-disabled { + cursor: not-allowed; + color: var(--pagination-item-color-disabled); + border: 1px solid var(--pagination-item-bd-color-disabled); + background-color: var(--pagination-item-bg-color-disabled); + } +} +.o-pagination-pages { + margin-left: 8px; + margin-right: 8px; + display: flex; + align-items: center; +} +.o-pagination-item { + width: var(--pagination-item-size); + height: var(--pagination-item-size); + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + color: var(--pagination-item-color); + border: 1px solid var(--pagination-item-bd-color); + background-color: var(--pagination-item-bg-color); + border-radius: var(--pagination-radius); + + + .o-pagination-item { + margin-left: 8px; + } + &:hover { + color: var(--pagination-item-color-hover); + border: 1px solid var(--pagination-item-bd-color-hover); + background-color: var(--pagination-item-bg-color-hover); + } + &:active { + color: var(--pagination-item-color-active); + border: 1px solid var(--pagination-item-bd-color-active); + background-color: var(--pagination-item-bg-color-active); + } + &.active { + color: var(--pagination-item-color-current); + border: 1px solid var(--pagination-item-bd-color-current); + background-color: var(--pagination-item-bg-color-current); + } +} + +.o-pagination-more-popup { + min-width: 64px; + text-align: center; + max-height: 200px; + overflow: auto; + padding: 4px 0; +} +.o-pagination-more-item { + padding: 2px 16px; + cursor: pointer; + &:hover { + background-color: var(--pagination-more-item-bg-color-hover); + } +} + +.o-pagination-input { + width: 60px; +} + +.o-pagination-select { + width: 110px; +} + +.o-pagination { + .o-table + & { + margin-top: 12px; + display: flex; + justify-content: flex-end; + } +} diff --git a/packages/opendesign/src/components/pagination/style/index.ts b/packages/opendesign/src/components/pagination/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..aa8a4285e54a74d28064f01c9460f1a620077d19 --- /dev/null +++ b/packages/opendesign/src/components/pagination/style/index.ts @@ -0,0 +1,6 @@ +import '../../style'; +import '../../popover/style'; +import '../../input-number/style'; +import '../../select/style'; +import '../../option/style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/pagination/style/var.scss b/packages/opendesign/src/components/pagination/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..d8806d06ee7ac26b831d208f0c8d75e53a9fee69 --- /dev/null +++ b/packages/opendesign/src/components/pagination/style/var.scss @@ -0,0 +1,35 @@ +.o-pagination { + --pagination-item-size: var(--o-size-m); + --pagination-item-gap: 12px; + + --pagination-item-color: var(--o-color-info2); + --pagination-item-color-current: var(--o-color-primary1); + --pagination-item-color-disabled: var(--o-color-info4); + + --pagination-item-bd-color: var(--o-color-control1-light); + --pagination-item-bd-color-hover: var(--o-color-control2-light); + --pagination-item-bd-color-active: var(--o-color-control3-light); + --pagination-item-bd-color-current: var(--o-color-primary1-light); + --pagination-item-bd-color-disabled: var(--o-color-control4-light); + --pagination-radius: var(--o-radius-control-m); +} + +.o-pagination-solid { + --pagination-item-bd-color: transparent; + --pagination-item-bd-color-hover: var(--o-color-control2-light); + --pagination-item-bd-color-active: var(--o-color-control3-light); + --pagination-item-bd-color-current: var(--o-color-primary1-light); + --pagination-item-bd-color-disabled: var(--o-color-control4-light); + + --pagination-item-bg-color: transparent; + --pagination-item-bg-color-hover: var(--o-color-control2-light); + --pagination-item-bg-color-active: var(--o-color-control3-light); + --pagination-item-bg-color-current: var(--o-color-primary1-light); + --pagination-item-bg-color-disabled: var(--o-color-control4-light); +} +.o-pagination-round-pill { + --pagination-radius: var(--pagination-item-size); +} +.o-pagination-more-popup { + --pagination-more-item-bg-color-hover: var(--o-color-primary1-light); +} diff --git a/packages/opendesign/src/components/pagination/types.ts b/packages/opendesign/src/components/pagination/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..74f8ffc9aaed26e0527d7d36368acfa9a77dfe41 --- /dev/null +++ b/packages/opendesign/src/components/pagination/types.ts @@ -0,0 +1,69 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { RoundT } from '../_shared/global'; + +const pageSizes = [6, 12, 24, 48]; + +export const paginationProps = { + /** + * 按钮类型：ColorT + */ + variant: { + type: String as PropType<'solid' | 'outline'>, + default: 'outline' + }, + /** + * 圆角值 + */ + round: { + type: String as PropType + }, + /** + * 支持选择的每页数据条数 + */ + pageSizes: { + type: Array as PropType, + default: () => pageSizes + }, + /** + * 每页数据条数 + */ + pageSize: { + type: Number, + default: pageSizes[0] + }, + /** + * 数据总条数 + */ + total: { + type: Number, + default: 0 + }, + /** + * 当前页码 + */ + page: { + type: Number, + default: 1 + }, + /** + * 显示页面数 > 3 + */ + showPageCount: { + type: Number, + default: 9 + }, + /** + * 显示页面数 > 3 + */ + showJumper: { + type: Boolean + }, + /** + * 简洁模式 + */ + simple: { + type: Boolean + }, +}; + +export type PaginationPropsT = ExtractPropTypes; \ No newline at end of file diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue new file mode 100644 index 0000000000000000000000000000000000000000..201b7e943d1746fddcad7b0983d495b7f5f7e60e --- /dev/null +++ b/packages/opendesign/src/components/popover/OPopover.vue @@ -0,0 +1,41 @@ + + + diff --git a/packages/opendesign/src/components/popover/__demo__/IndexPopover.vue b/packages/opendesign/src/components/popover/__demo__/IndexPopover.vue new file mode 100644 index 0000000000000000000000000000000000000000..f03510f939bf156b2fa45cf3f511684a206d7256 --- /dev/null +++ b/packages/opendesign/src/components/popover/__demo__/IndexPopover.vue @@ -0,0 +1,12 @@ + + + diff --git a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue new file mode 100644 index 0000000000000000000000000000000000000000..5e26d8b18d0eb736952507508bd25ae997af25a9 --- /dev/null +++ b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue @@ -0,0 +1,117 @@ + + + diff --git a/packages/opendesign/src/components/popover/index.ts b/packages/opendesign/src/components/popover/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..f9475923a5666cc65b80c8fae4fc84c8c341afef --- /dev/null +++ b/packages/opendesign/src/components/popover/index.ts @@ -0,0 +1,12 @@ +import _OPopover from './OPopover.vue'; +import type { App } from 'vue'; + +const OPopover = Object.assign(_OPopover, { + install(app: App) { + app.component(_OPopover.name, _OPopover); + }, +}); + +export { + OPopover, +}; diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..55ed4dc351b23acdfca6321ab4074620d9c8f1d6 --- /dev/null +++ b/packages/opendesign/src/components/popover/style/index.scss @@ -0,0 +1,53 @@ +@use './var.scss'; + +.o-popover-wrap { + background-color: var(--popover-bg-color); + box-shadow: var(--popover-shadow); + border-radius: var(--popover-radius); + border: var(--popover-bd); +} +.o-popover-body { + min-width: 120px; + padding: 4px 8px; +} +.o-popover-anchor { + border: var(--popover-bd); + border-bottom: none; + border-right: none; + border-top-left-radius: 2px; + width: 8px; + height: 8px; + background-color: var(--popover-bg-color); +} + +.o-popup-pos-left, +.o-popup-pos-lb, +.o-popup-pos-lt { + .o-popover-anchor { + transform: translate(50%, -50%) rotate(135deg); + } +} + +.o-popup-pos-top, +.o-popup-pos-tl, +.o-popup-pos-tr { + .o-popover-anchor { + transform: translate(-50%, 50%) rotate(225deg); + } +} + +.o-popup-pos-right, +.o-popup-pos-rt, +.o-popup-pos-rb { + .o-popover-anchor { + transform: translate(-50%, -50%) rotate(-45deg); + } +} + +.o-popup-pos-bottom, +.o-popup-pos-bl, +.o-popup-pos-br { + .o-popover-anchor { + transform: translate(-50%, -50%) rotate(45deg); + } +} diff --git a/packages/opendesign/src/components/popover/style/index.ts b/packages/opendesign/src/components/popover/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..97806f75ad147dd20bd3802a7001ea21d7911191 --- /dev/null +++ b/packages/opendesign/src/components/popover/style/index.ts @@ -0,0 +1,3 @@ +import '../../style'; +import '../../popup/style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/popover/style/var.scss b/packages/opendesign/src/components/popover/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..70b085d8163ef41e32235b24a6f91579cca39715 --- /dev/null +++ b/packages/opendesign/src/components/popover/style/var.scss @@ -0,0 +1,6 @@ +.o-popover { + --popover-bg-color: var(--o-color-fill2); + --popover-shadow: var(--o-shadow-1); + --popover-radius: var(--o-radius-control-l); + --popover-bd: none; +} diff --git a/packages/opendesign/src/components/popover/types.ts b/packages/opendesign/src/components/popover/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..a04d4b8ac966977a79c105feb0993392fc750403 --- /dev/null +++ b/packages/opendesign/src/components/popover/types.ts @@ -0,0 +1,31 @@ +import { ExtractPropTypes } from 'vue'; + +import { popupProps } from '../popup/types'; + +const { position, trigger, target, visible, wrapper, unmountOnHide, anchorClass } = popupProps; + +export const popoverProps = { + position, + trigger, + target, + visible, + wrapper, + unmountOnHide, + anchorClass, + /** + * 距离触发元素的偏移量 + */ + offset: { + type: Number, + default: 8, + }, + /** + * 是否展示箭头 + */ + anchor: { + type: Boolean, + default: true, + }, +}; + +export type PopupPropsT = ExtractPropTypes; \ No newline at end of file diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue new file mode 100644 index 0000000000000000000000000000000000000000..3adb623480162cd3b42039ef086019e96ac50fbe --- /dev/null +++ b/packages/opendesign/src/components/popup/OPopup.vue @@ -0,0 +1,378 @@ + + + diff --git a/packages/opendesign/src/components/popup/__demo__/IndexPopup.vue b/packages/opendesign/src/components/popup/__demo__/IndexPopup.vue new file mode 100644 index 0000000000000000000000000000000000000000..cb6658b5c71562886f4552ee49f985443bbf5efd --- /dev/null +++ b/packages/opendesign/src/components/popup/__demo__/IndexPopup.vue @@ -0,0 +1,25 @@ + + + diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue new file mode 100644 index 0000000000000000000000000000000000000000..5e1c16a403be7a5470baa2c0852dfb3c081c7c1e --- /dev/null +++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue @@ -0,0 +1,156 @@ + + + diff --git a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue new file mode 100644 index 0000000000000000000000000000000000000000..9248cdc915af325b51822c5bcd1f2a44279c5dd9 --- /dev/null +++ b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue @@ -0,0 +1,137 @@ + + + + diff --git a/packages/opendesign/src/components/popup/__demo__/PopupTarget.vue b/packages/opendesign/src/components/popup/__demo__/PopupTarget.vue new file mode 100644 index 0000000000000000000000000000000000000000..dd4ea8de3e4ad15383548e14b7f276399b9e4c36 --- /dev/null +++ b/packages/opendesign/src/components/popup/__demo__/PopupTarget.vue @@ -0,0 +1,26 @@ + + + diff --git a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue new file mode 100644 index 0000000000000000000000000000000000000000..8ab1c7fac86a180886da57d4da37c82cf4f0a889 --- /dev/null +++ b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue @@ -0,0 +1,35 @@ + + + diff --git a/packages/opendesign/src/components/popup/index.ts b/packages/opendesign/src/components/popup/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..1da05317b9365ebb667a9968a3ba7da3b77f16b5 --- /dev/null +++ b/packages/opendesign/src/components/popup/index.ts @@ -0,0 +1,14 @@ +import _OPopup from './OPopup.vue'; +import type { App } from 'vue'; + +export * from './types'; + +const OPopup = Object.assign(_OPopup, { + install(app: App) { + app.component(_OPopup.name, _OPopup); + }, +}); + +export { + OPopup, +}; diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts new file mode 100644 index 0000000000000000000000000000000000000000..4f0190bc0ad44fa32a5d2b3508e123d47d531c7e --- /dev/null +++ b/packages/opendesign/src/components/popup/popup.ts @@ -0,0 +1,508 @@ +import { Ref } from 'vue'; +import { getElementBorder, getElementSize, getOffsetElement, getScroll } from '../_shared/dom'; +import type { DirectionT } from '../_shared/dom'; +import type { PopupPositionT, PopupTriggerT } from './types'; + +import { useOutClick } from '../hooks/use-out-click'; + +interface Pos { + left: number, + top: number +} +interface DomContentRect { + left: number, + right: number, + top: number, + bottom: number, +} + +interface AnchorPosition { + left?: number, + top?: number, + right?: number, + bottom?: number +} + +type ElementSize = ReturnType + +// 获取wrapper content box范围，因为绝对定位需要排除border +function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): DomContentRect { + const { left = 0, top = 0, right = 0, bottom = 0 } = getElementBorder(wrapperEl); + const rect = wrapperRect || wrapperEl.getBoundingClientRect(); + return { + left: rect.left + left, + top: rect.top + top, + right: rect.right - right, + bottom: rect.bottom - bottom + }; +} + +// 根据position计算popup的位置 +function getPopupViewOffset( + position: PopupPositionT, + t: DOMRect, + p: DOMRect, + { + offset = 0 + }: { + offset?: number + } = {}): Pos { + const formula: { + [k in PopupPositionT]: { left: number, top: number } + } = { + top: { + left: t.left + t.width / 2 - p.width / 2, + top: t.top - p.height - offset + }, + tl: { + left: t.left, + top: t.top - p.height - offset + }, + tr: { + left: t.right - p.width, + top: t.top - p.height - offset + }, + bottom: { + left: t.left + t.width / 2 - p.width / 2, + top: t.bottom + offset + }, + bl: { + left: t.left, + top: t.bottom + offset + }, + br: { + left: t.right - p.width, + top: t.bottom + offset + }, + left: { + left: t.left - p.width - offset, + top: t.top + t.height / 2 - p.height / 2 + }, + lt: { + left: t.left - p.width - offset, + top: t.top + }, + lb: { + left: t.left - p.width - offset, + top: t.bottom - p.height + }, + right: { + left: t.right + offset, + top: t.top + t.height / 2 - p.height / 2 + }, + rt: { + left: t.right + offset, + top: t.top + }, + rb: { + left: t.right + offset, + top: t.bottom - p.height + + } + }; + return formula[position] || { left: 0, top: 0 }; +} + +// 根据视窗与相对容器，返回popup的位置范围 +function getWrapperViewEdge(popupSize: ElementSize, wrapperRect?: DomContentRect) { + const viewport = { + left: 0, + right: window.innerWidth - popupSize.width, + top: 0, + bottom: window.innerHeight - popupSize.height + }; + + if (!wrapperRect) { + return viewport; + } + return { + left: Math.max(viewport.left, wrapperRect.left), + top: Math.max(viewport.top, wrapperRect.top), + right: Math.min(viewport.right, wrapperRect.right - popupSize.width), + bottom: Math.min(viewport.bottom, wrapperRect.bottom - popupSize.height), + }; +} + +// 根据触发元素，返回popup的位置范围 +function getPopupEdge(popupSize: ElementSize, targetRect: DOMRect, anchorOffset: number = 0) { + const { left, right, top, bottom } = targetRect; + const { width, height } = popupSize; + return { + left: left - width + anchorOffset, + top: top - height + anchorOffset, + right: right - anchorOffset, + bottom: bottom - anchorOffset + }; +} + +// 计算相对于wrapper的位置信息 +function getPopupWrapOffset(pos: Pos, wrapperEl: HTMLElement | null, wrapperContentRect?: DomContentRect) { + if (!wrapperEl) { + return pos; + } + const cs = getScroll(wrapperEl); + if (wrapperContentRect) { + return { + left: pos.left + cs.scrollLeft - wrapperContentRect.left, + top: pos.top + cs.scrollTop - wrapperContentRect.top + }; + } + return { + left: pos.left + cs.scrollLeft, + top: pos.top + cs.scrollTop + }; +} + +// 根据position获取方向 +function getDirection(position: PopupPositionT): DirectionT { + switch (position) { + case 'tl': + case 'tr': + case 'top': + return 'top'; + case 'bl': + case 'br': + case 'bottom': + return 'bottom'; + case 'lt': + case 'lb': + case 'left': + return 'left'; + case 'rt': + case 'rb': + case 'right': + return 'right'; + } +} + +// 调整position +function adjustPosition(position: PopupPositionT, direction: DirectionT) { + const fixFn = { + top: (p: PopupPositionT) => { + if (p === 'bottom') { + return 'top'; + } else if (p === 'bl') { + return 'tl'; + } else if (p === 'br') { + return 'tr'; + } + return p; + }, + bottom: (p: PopupPositionT) => { + if (p === 'top') { + return 'bottom'; + } else if (p === 'tl') { + return 'bl'; + } else if (p === 'tr') { + return 'br'; + } + return p; + }, + left: (p: PopupPositionT) => { + if (p === 'right') { + return 'left'; + } else if (p === 'rt') { + return 'lt'; + } else if (p === 'rb') { + return 'lb'; + } + return p; + }, + right: (p: PopupPositionT) => { + if (p === 'left') { + return 'right'; + } else if (p === 'lt') { + return 'rt'; + } else if (p === 'lb') { + return 'rb'; + } + return p; + } + }; + + const fn = fixFn[direction]; + return fn ? fn(position) : position; +} + +// 根据popup的极值调整 +function adjustOffset( + position: PopupPositionT, + popupPosition: Pos, + popupSize: ElementSize, + pRect: DOMRect, + tRect: DOMRect, + wRect?: DomContentRect, + { + anchorOffset, + offset + }: { + anchorOffset?: number, + offset?: number + } = {} +) { + const { top, left } = popupPosition; + const edge = getWrapperViewEdge(popupSize, wRect); + + let fixedPosition = position; + let style = popupPosition; + + const d = getDirection(position); + if (d === 'top') { + if (edge.top > top) { + fixedPosition = adjustPosition(position, 'bottom'); + style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset }); + } + } else if (d === 'left') { + if (edge.left > left) { + fixedPosition = adjustPosition(position, 'right'); + style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset }); + } + } else if (d === 'right') { + if (edge.right < left) { + fixedPosition = adjustPosition(position, 'left'); + style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset }); + } + } else if (d === 'bottom') { + if (edge.bottom < top) { + fixedPosition = adjustPosition(position, 'top'); + style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset }); + } + } + + const popEdge = getPopupEdge(popupSize, tRect, anchorOffset); + + if (['top', 'bottom'].includes(d)) { + if (edge.left > left) { + style.left = edge.left < popEdge.right ? edge.left : popEdge.right; + } else if (edge.right < left) { + style.left = edge.right > popEdge.left ? edge.right : popEdge.left; + } + } + if (['left', 'right'].includes(d)) { + if (edge.top > top) { + style.top = edge.top < popEdge.bottom ? edge.top : popEdge.bottom; + } else if (edge.bottom < top) { + style.top = edge.bottom > popEdge.top ? edge.bottom : popEdge.top; + } + } + + return { + position: fixedPosition, + popupStyle: style, + }; +} + +function getAnchorOffset(position: PopupPositionT, tRect: DOMRect, popupStyle: Pos, popupSize: ElementSize): AnchorPosition { + const pos: AnchorPosition = {}; + const limit = 8; + + const { left: pl, top: pt } = popupStyle; + if (['top', 'tl', 'tr', 'bottom', 'bl', 'br'].includes(position)) { + let l = tRect.left + (tRect.width / 2) - pl; + + if (l > popupSize.width - limit) { + l = popupSize.width - limit; + } else if (l < limit) { + l = limit; + } + + pos.left = l; + + if (['top', 'tl', 'tr'].includes(position)) { + pos.bottom = 0; + } else { + pos.top = 0; + } + } else if (['left', 'lt', 'lb', 'right', 'rt', 'rb'].includes(position)) { + let t = tRect.top + (tRect.height / 2) - pt; + + if (t > popupSize.height - limit) { + t = popupSize.height - limit; + } else if (t < limit) { + t = limit; + } + + pos.top = t; + + if (['left', 'lt', 'lb'].includes(position)) { + pos.right = 0; + } else { + pos.left = 0; + } + } + + + return pos; +} + +// 处理popup位置 +export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, position: PopupPositionT, + { + adaptive = true, anchorOffset = 8, offset = 8 + }: { + adaptive?: boolean, anchorOffset?: number, offset?: number + } = {}) { + + const tRect = targetEl.getBoundingClientRect(); + + const pRect = popupEl.getBoundingClientRect(); + const popupSize = getElementSize(popupEl); + + // 根据position计算popup相对视窗的位置 + let popupStyle = getPopupViewOffset(position, tRect, pRect, { offset: offset }); + let anchorStyle: AnchorPosition = {}; + + const wrapperEl = getOffsetElement(popupEl) as HTMLElement; + if (!wrapperEl) { + return { + popupStyle, + position, + anchorStyle + }; + } + const wrapperRect = wrapperEl.getBoundingClientRect(); + let wrapperContentRect = undefined; + + // wrapper为body时，如果body有偏移，但position值为static，不需要计算wrapper的content rect。 + if (wrapperEl.nodeName !== 'HTML') { + wrapperContentRect = getWrapperContentRect(wrapperEl, wrapperRect); + } + + let fixedPosition = position; + // 自适应容器边缘 + if (adaptive) { + const rlt = adjustOffset(position, popupStyle, popupSize, pRect, tRect, wrapperContentRect, { offset: offset, anchorOffset }); + fixedPosition = rlt.position; + popupStyle = rlt.popupStyle; + } + // 获取锚点相对popup的位置 + anchorStyle = getAnchorOffset(fixedPosition, tRect, popupStyle, popupSize); + // 计算相对容器的位置 + popupStyle = getPopupWrapOffset(popupStyle, wrapperEl, wrapperContentRect); + + return { + position: fixedPosition, + popupStyle, + anchorStyle + }; +}; + +// 监听元素的触发事件 +export function bindTrigger( + el: HTMLElement | null, + popupRef: Ref, + triggers: PopupTriggerT[], + { + updateFn, + hoverDelay = 100 + }: { + updateFn: (isVisible?: boolean, delay?: number) => void, + hoverDelay?: number + } +) { + if (!el) { + return []; + } + const { addOutClickListener, removeOutClickListener } = useOutClick(); + + const listeners: Array<() => void> = []; + + const showFn = () => { + updateFn(true); + }; + const hideFn = () => { + updateFn(false); + }; + const toggleFn = () => { + updateFn(); + }; + + const enterFn = () => { + updateFn(true, hoverDelay); + }; + const leavefn = () => { + updateFn(false, hoverDelay); + }; + + const triggerHandlers: Record void> = { + hover: () => { + el?.addEventListener('mouseover', enterFn); + el?.addEventListener('mouseleave', leavefn); + const removeFn = () => { + el?.removeEventListener('mouseover', enterFn); + el?.removeEventListener('mouseleave', leavefn); + }; + listeners.push(removeFn); + }, + click: () => { + el?.addEventListener('click', toggleFn); + + addOutClickListener(el, hideFn, (e: MouseEvent) => { + return !!popupRef.value?.contains(e.target as HTMLElement); + }); + + listeners.push(() => { + el?.removeEventListener('click', toggleFn); + }); + listeners.push(() => { + removeOutClickListener(el, hideFn); + }); + }, + focus: () => { + el?.addEventListener('focusin', showFn); + el?.addEventListener('focusout', hideFn); + const removeFn = () => { + el?.removeEventListener('focusin', showFn); + el?.removeEventListener('focusout', hideFn); + }; + listeners.push(removeFn); + }, + contextmenu: () => { + const fn = (e: Event) => { + e.preventDefault(); + showFn(); + }; + el?.addEventListener('contextmenu', fn); + + addOutClickListener(el, hideFn, (e: MouseEvent) => { + return !!popupRef.value?.contains(e.target as HTMLElement); + }); + + listeners.push(() => { + el?.removeEventListener('contextmenu', fn); + }); + + listeners.push(() => { + removeOutClickListener(el, hideFn); + }); + }, + none: () => { } + }; + + triggers.forEach((tr: PopupTriggerT) => { + triggerHandlers[tr](); + }); + + return listeners; +}; + +export function getTransformOrigin(position: PopupPositionT) { + let left = '0px'; + let top = '0px'; + if (['lt', 'lb', 'left', 'tr', 'br'].includes(position)) { + left = '100%'; + } else if (['top', 'bottom'].includes(position)) { + left = '50%'; + } + + if (['tl', 'tr', 'top', 'lb', 'rb'].includes(position)) { + top = '100%'; + } else if (['left', 'right'].includes(position)) { + top = '50%'; + } + + return { + top, + left, + }; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..6d58d2919814a7df638047c6f25b7455a288f273 --- /dev/null +++ b/packages/opendesign/src/components/popup/style/index.scss @@ -0,0 +1,24 @@ +@use './var.scss'; + +.o-popup { + position: absolute; + z-index: var(--popup-z-index); + opacity: 1; + transition: opacity var(--o-duration-m1) var(--o-easing-standard); + &.out-view { + opacity: 0; + pointer-events: none; + } + &.animating { + pointer-events: none; + } +} + +.o-popup-anchor { + position: absolute; + z-index: 0; +} +.o-popup-body { + position: relative; + z-index: 1; +} diff --git a/packages/opendesign/src/components/popup/style/index.ts b/packages/opendesign/src/components/popup/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/popup/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/popup/style/var.scss b/packages/opendesign/src/components/popup/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..dc25e3cc3d35d5eb8f63efd2c0b8132e7a1fc2d5 --- /dev/null +++ b/packages/opendesign/src/components/popup/style/var.scss @@ -0,0 +1,3 @@ +.o-popup { + --popup-z-index: var(--o-z-index-base); +} diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..7b3552a6485f664be5fe95f5daa58e5fc5aa0df4 --- /dev/null +++ b/packages/opendesign/src/components/popup/types.ts @@ -0,0 +1,116 @@ +import { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'; + +export type PopupPositionT = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb'; + +export type PopupTriggerT = 'hover' | 'click' | 'focus' | 'contextmenu' | 'none'; + +export const popupProps = { + /** + * 弹出位置 + */ + position: { + type: String as PropType, + default: 'top', + }, + /** + * 触发事件 + * 'hover','click','focus','contextMenu' + */ + trigger: { + type: [String, Array] as PropType, + default: 'hover', + }, + /** + * 触发元素或组件 + */ + target: { + type: [String, Object] as PropType, + default: null, + }, + /** + * 是否可见 + * v-model + */ + visible: { + type: Boolean, + }, + /** + * 挂载容器，默认为body + */ + wrapper: { + type: [String, Object] as PropType, + default: 'body', + }, + /** + * 距离target偏移量 + */ + offset: { + type: Number, + default: 0, + }, + /** + * hover事件延时触发的时间（毫秒） + */ + hoverDelay: { + type: Number, + default: 100, + }, + /** + * 是否当触发元素不可见时隐藏弹层 + */ + hideWhenTargetInvisible: { + type: Boolean, + default: true, + }, + /** + * 锚点自定义class + */ + anchorClass: { + type: String, + default: '', + }, + /** + * 是否在popup隐藏时unmout + */ + unmountOnHide: { + type: Boolean, + default: true, + }, + /** + * Popup在hover时是否不消失，当trigger包含hover时有效 + */ + statyOnHoverin: { + type: Boolean, + default: true, + }, + /** + * popup wrap自定义class + */ + wrapClass: { + type: String, + default: '', + }, + /** + * popup最小宽度设置为触发元素宽度 + */ + adjustMinWidth: { + type: Boolean, + default: true, + }, + /** + * popup宽度设置为触发元素宽度 + */ + adjustWidth: { + type: Boolean, + default: true, + }, + /** + * 过渡名称 + */ + transition: { + type: String, + default: 'o-zoom-fade', + }, +}; + +export type PopupPropsT = ExtractPropTypes; \ No newline at end of file diff --git a/packages/opendesign/src/components/progress/OProgress.vue b/packages/opendesign/src/components/progress/OProgress.vue new file mode 100644 index 0000000000000000000000000000000000000000..0648efbd86552575b4da870f70a8358b93aed6e6 --- /dev/null +++ b/packages/opendesign/src/components/progress/OProgress.vue @@ -0,0 +1,87 @@ + + + diff --git a/packages/opendesign/src/components/progress/__demo__/IndexProgress.vue b/packages/opendesign/src/components/progress/__demo__/IndexProgress.vue new file mode 100644 index 0000000000000000000000000000000000000000..8755ff61e6bd3163d0343ce43d068a6924745afe --- /dev/null +++ b/packages/opendesign/src/components/progress/__demo__/IndexProgress.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue b/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..646d97d645af5b711bcba881bd830cf3fe4db11f --- /dev/null +++ b/packages/opendesign/src/components/progress/__demo__/ProgressBasic.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue b/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue new file mode 100644 index 0000000000000000000000000000000000000000..664f662fa08fd23ca36c39410f95ffc065eb5d2d --- /dev/null +++ b/packages/opendesign/src/components/progress/__demo__/ProgressCircle.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue b/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue new file mode 100644 index 0000000000000000000000000000000000000000..ff2b4e677200b9ba8d01cb6c3e4f379e039c78b5 --- /dev/null +++ b/packages/opendesign/src/components/progress/__demo__/ProgressColor.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue b/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue new file mode 100644 index 0000000000000000000000000000000000000000..1ca0bdb1897de528a2366ba43c93a0ecbc974939 --- /dev/null +++ b/packages/opendesign/src/components/progress/__demo__/ProgressCustom.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue b/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue new file mode 100644 index 0000000000000000000000000000000000000000..3feb2eb169be42bc05ea3ba15b3be891bad0a3c7 --- /dev/null +++ b/packages/opendesign/src/components/progress/__demo__/ProgressLabelInside.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue b/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue new file mode 100644 index 0000000000000000000000000000000000000000..a0ba5f0603589c8a61e4eed8f8c75022c678a15b --- /dev/null +++ b/packages/opendesign/src/components/progress/__demo__/ProgressStrokeWidth.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/packages/opendesign/src/components/progress/index.ts b/packages/opendesign/src/components/progress/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..9d364fafd7349f9500ea525f3a225106093615f5 --- /dev/null +++ b/packages/opendesign/src/components/progress/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _OProgress from './OProgress.vue'; + +const OProgress = Object.assign(_OProgress, { + install(app: App) { + app.component(_OProgress.name, _OProgress); + }, +}); + +export * from './types'; + +export { OProgress }; diff --git a/packages/opendesign/src/components/progress/style/index.scss b/packages/opendesign/src/components/progress/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..ddbdd86f9f80845fc25b0b55f4a75a9d372dde6b --- /dev/null +++ b/packages/opendesign/src/components/progress/style/index.scss @@ -0,0 +1,70 @@ +@use './var.scss'; + +.o-progress-line { + width: 100%; +} + +.o-progress-line-wrap { + display: flex; + align-items: center; +} + +.o-progress-line-track { + width: 100%; + overflow: hidden; + background-color: var(--o-progress-track-bg-color); +} + +.o-progress-line-bar { + max-width: 100%; + height: 100%; + background-color: var(--o-progress-bar-bg-color); + transition: all var(--o-duration-m1) var(--o-easing-standard); + text-align: right; + +} + +.o-progress-line-label { + color: var(--o-progress-color); + font-size: var(--o-progress-text-size); + line-height: var(--o-progress-text-height); + margin-left: 8px; + white-space: nowrap; +} + +.o-progress-line-inner-label { + display: inline-block; + color: rgb(var(--o-color-white)); + margin-left: 8px; + margin-right: 8px; +} + +.o-progress-circle { + font-size: 0; + line-height: 0; +} + +.o-progress-circle-wrap { + position: relative; + display: inline-block; +} + +.o-progress-circle-track { + stroke: var(--o-progress-track-bg-color); +} + +.o-progress-circle-bar { + stroke: var(--o-progress-bar-bg-color); + transition: all var(--o-duration-m1) var(--o-easing-standard); +} + +.o-progress-circle-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: var(--o-progress-color); + font-size: var(--o-progress-text-size); + line-height: var(--o-progress-text-height); +} diff --git a/packages/opendesign/src/components/progress/style/index.ts b/packages/opendesign/src/components/progress/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..4513560262c6648e14e7da5a5f205185979a68f5 --- /dev/null +++ b/packages/opendesign/src/components/progress/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; \ No newline at end of file diff --git a/packages/opendesign/src/components/progress/style/var.scss b/packages/opendesign/src/components/progress/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..86a8ea45b33957a6872d38022f115ceecf62a32f --- /dev/null +++ b/packages/opendesign/src/components/progress/style/var.scss @@ -0,0 +1,22 @@ +.o-progress { + --o-progress-track-bg-color: var(--o-color-control1-light); + --o-progress-text-size: var(--o-font_size-text1); + --o-progress-text-height: var(--o-font_size-text1); + --o-progress-color: var(--o-color-info2); +} + +.o-progress-primary { + --o-progress-bar-bg-color: var(--o-color-primary1); +} + +.o-progress-success { + --o-progress-bar-bg-color: var(--o-color-success1); +} + +.o-progress-warning { + --o-progress-bar-bg-color: var(--o-color-warning1); +} + +.o-progress-danger { + --o-progress-bar-bg-color: var(--o-color-danger1); +} diff --git a/packages/opendesign/src/components/progress/types.ts b/packages/opendesign/src/components/progress/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..bd63b8e0fe96837d7cd0dca460aece18d3edb555 --- /dev/null +++ b/packages/opendesign/src/components/progress/types.ts @@ -0,0 +1,69 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export type ProgressVariantT = 'line' | 'circle'; + +export type ProgressColorT = 'primary' | 'success' | 'warning' | 'danger'; + +export const progressProps = { + /** + * 进度条类型 + * 'line' | 'circle' + */ + variant: { + type: String as PropType, + default: 'line', + }, + /** + * 进度条百分比 + */ + percentage: { + type: Number, + default: 0, + validator: (val: number): boolean => val >= 0 && val <= 100, + }, + /** + * 进度条线宽 + */ + strokeWidth: { + type: Number, + default: 6, + }, + /** + * 进度条颜色类型 + * 'primary' | 'success' | 'warning' | 'danger' + */ + color: { + type: String as PropType, + default: 'primary', + }, + /** + * 环形进度条尺寸 + */ + width: { + type: Number, + default: 80, + }, + /** + * 格式化文字 + */ + format: { + type: Function as PropType<(percentage: number) => string>, + default: (percentage: number) => `${percentage}%`, + }, + /** + * 是否展示文字 + */ + showLabel: { + type: Boolean, + default: true, + }, + /** + * 线形进度条，文字是否在进度条内部 + */ + labelInside: { + type: Boolean, + default: false, + }, +}; + +export type ProgressPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/radio-group/ORadioGroup.vue b/packages/opendesign/src/components/radio-group/ORadioGroup.vue new file mode 100644 index 0000000000000000000000000000000000000000..0593e7cd2342c6438676ea9ea3015e547ec4d381 --- /dev/null +++ b/packages/opendesign/src/components/radio-group/ORadioGroup.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/opendesign/src/components/radio-group/index.ts b/packages/opendesign/src/components/radio-group/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..2d876dff1e2ddc7d9f631d915f8e055d1692881a --- /dev/null +++ b/packages/opendesign/src/components/radio-group/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _ORadioGroup from './ORadioGroup.vue'; + +const ORadioGroup = Object.assign(_ORadioGroup, { + install(app: App) { + app.component(_ORadioGroup.name, _ORadioGroup); + }, +}); + +export * from './types'; + +export { ORadioGroup }; diff --git a/packages/opendesign/src/components/radio-group/provide.ts b/packages/opendesign/src/components/radio-group/provide.ts new file mode 100644 index 0000000000000000000000000000000000000000..513274434ebddc34971b387e5c2b3ad477cc9989 --- /dev/null +++ b/packages/opendesign/src/components/radio-group/provide.ts @@ -0,0 +1,8 @@ +import { InjectionKey, Ref } from 'vue'; + +export const radioGroupInjectKey: InjectionKey<{ + realValue: Ref; + disabled: Ref; + updateModelValue: (val: string | number | boolean) => void; + onChange: (val: string | number | boolean, ev: Event) => void; +}> = Symbol('provide-radio-group'); diff --git a/packages/opendesign/src/components/radio-group/style/index.scss b/packages/opendesign/src/components/radio-group/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..49fde798f5735d1a6869fe877cb9202e5813391e --- /dev/null +++ b/packages/opendesign/src/components/radio-group/style/index.scss @@ -0,0 +1,19 @@ +@use './var.scss'; + +.o-radio-group { + display: inline-flex; + flex-wrap: wrap; +} + +.o-radio-group-direction-h { + .o-radio + .o-radio { + margin-left: var(--radio-group-gap); + } +} + +.o-radio-group-direction-v { + flex-direction: column; + .o-radio + .o-radio { + margin-top: var(--radio-group-gap); + } +} diff --git a/packages/opendesign/src/components/radio-group/style/index.ts b/packages/opendesign/src/components/radio-group/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/radio-group/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/radio-group/style/var.scss b/packages/opendesign/src/components/radio-group/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..f1278aa001ea1dd8fdb2235c91a313d4233865ab --- /dev/null +++ b/packages/opendesign/src/components/radio-group/style/var.scss @@ -0,0 +1,5 @@ +.o-radio-group { + --radio-group-gap: var(--o-gap-5); +} + + diff --git a/packages/opendesign/src/components/radio-group/types.ts b/packages/opendesign/src/components/radio-group/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..2ae682f8d858701cf5ea31aaf19b65042e6cebe1 --- /dev/null +++ b/packages/opendesign/src/components/radio-group/types.ts @@ -0,0 +1,35 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { DirectionT } from '../_shared/global'; + +export const radioGroupProps = { + /** + * 单选框组双向绑定值 + */ + modelValue: { + type: [String, Number, Boolean], + }, + /** + * 非受控状态时，单选框组默认值 + */ + defaultValue: { + type: [String, Number, Boolean], + default: '', + }, + /** + * 单选框组是否禁用 + */ + disabled: { + type: Boolean, + default: false, + }, + /** + * 单选框组方向 + * 'h' | 'v' + */ + direction: { + type: String as PropType, + default: 'h', + }, +}; + +export type RadioGroupPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue new file mode 100644 index 0000000000000000000000000000000000000000..d55fd313e8d43693e876e0a25b29685265b8f2e7 --- /dev/null +++ b/packages/opendesign/src/components/radio/ORadio.vue @@ -0,0 +1,85 @@ + + + diff --git a/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue b/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue new file mode 100644 index 0000000000000000000000000000000000000000..1559c273e148cd6e1bbebeefc8499b558c870610 --- /dev/null +++ b/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue b/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..ece24079143f4ad291714920ce01587607a895ea --- /dev/null +++ b/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue b/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue new file mode 100644 index 0000000000000000000000000000000000000000..5f585dbd32f2b1ef8233a8b499e6cbd997c6a4d7 --- /dev/null +++ b/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue b/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue new file mode 100644 index 0000000000000000000000000000000000000000..07a103d25a3dc6b8612d23ce46364c17b5df74dc --- /dev/null +++ b/packages/opendesign/src/components/radio/__demo__/RadioEvents.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue b/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue new file mode 100644 index 0000000000000000000000000000000000000000..a10cdff778ab2c1de9e82a9112279466da0814e8 --- /dev/null +++ b/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/opendesign/src/components/radio/__demo__/RadioSlots.vue b/packages/opendesign/src/components/radio/__demo__/RadioSlots.vue new file mode 100644 index 0000000000000000000000000000000000000000..7329d4a401373e53b0c930a04eb101778f5b37c3 --- /dev/null +++ b/packages/opendesign/src/components/radio/__demo__/RadioSlots.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/opendesign/src/components/radio/index.ts b/packages/opendesign/src/components/radio/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..98bae88519359ca49bd6a4b863817d9727ff6773 --- /dev/null +++ b/packages/opendesign/src/components/radio/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _ORadio from './ORadio.vue'; + +const ORadio = Object.assign(_ORadio, { + install(app: App) { + app.component(_ORadio.name, _ORadio); + }, +}); + +export * from './types'; + +export { ORadio }; diff --git a/packages/opendesign/src/components/radio/style/index.scss b/packages/opendesign/src/components/radio/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..5a00a4c9de7e5560895bd4f0bb78f99db53c7502 --- /dev/null +++ b/packages/opendesign/src/components/radio/style/index.scss @@ -0,0 +1,89 @@ +@use './var.scss'; + +.o-radio { + color: var(--radio-color); + font-size: var(--radio-text-size); + line-height: var(--radio-text-height); + cursor: pointer; + + input[type='radio'] { + position: absolute; + outline: none; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + } + + &:not(.o-radio-checked):not(.o-radio-disabled):hover { + .o-radio-input { + border-color: var(--radio-input-bd-color-hover); + } + } +} + +.o-radio-wrap { + position: relative; + display: inline-flex; + align-items: center; + height: 100%; +} + +.o-radio-input { + position: relative; + display: inline-block; + width: var(--radio-input-size); + height: var(--radio-input-size); + background-color: var(--radio-input-bg-color); + border: 1px solid var(--radio-input-bd-color); + border-radius: 50%; + transition: border-color var(--o-duration-s) var(--o-easing-standard); + + &::after { + content: ''; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: var(--radio-input-inner-size); + height: var(--radio-input-inner-size); + border-radius: 50%; + background-color: var(--radio-input-inner-bg-color); + transition: background-color var(--o-duration-s) var(--o-easing-standard); + } +} + +.o-radio-label { + margin-left: 12px; +} + +.o-radio-checked { + .o-radio-input { + background-color: var(--radio-input-bg-color-checked); + border-color: var(--radio-input-bd-color-checked); + &::after { + background-color: var(--radio-input-inner-bg-color-checked); + } + } +} + +.o-radio-disabled { + cursor: not-allowed; + color: var(--radio-color-disabled); + .o-radio-input { + background-color: var(--radio-input-bg-color-disabled); + border-color: var(--radio-input-bd-color-disabled); + } +} + +.o-radio-checked.o-radio-disabled { + .o-radio-input { + background-color: var(--radio-input-bg-color-checked-disabled); + border-color: var(--radio-input-bd-color-checked-disabled); + &::after { + background-color: var(--radio-input-inner-bg-color-checked-disabled); + } + } +} diff --git a/packages/opendesign/src/components/radio/style/index.ts b/packages/opendesign/src/components/radio/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/radio/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/radio/style/var.scss b/packages/opendesign/src/components/radio/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..914ec4b550d1ac149f1b4b8c3c98dc45f4753215 --- /dev/null +++ b/packages/opendesign/src/components/radio/style/var.scss @@ -0,0 +1,25 @@ +.o-radio { + --radio-text-size: var(--o-font_size-text1); + --radio-text-height: var(--o-line_height-text1); + + --radio-input-size: calc(var(--o-size-s) / 2); + --radio-input-inner-size: calc(var(--o-size-s) / 4); + + --radio-color: var(--o-color-info1); + --radio-color-disabled: var(--o-color-info4); + + --radio-input-bg-color: var(--o-color-control-light); + --radio-input-bg-color-checked: var(--o-color-primary1); + --radio-input-bg-color-disabled: var(--o-color-control4-light); + --radio-input-bg-color-checked-disabled: var(--o-color-primary4); + + --radio-input-bd-color: var(--o-color-control1); + --radio-input-bd-color-hover: var(--o-color-primary1); + --radio-input-bd-color-checked: var(--o-color-primary1); + --radio-input-bd-color-disabled: var(--o-color-control4); + --radio-input-bd-color-checked-disabled: var(--o-color-primary4); + + --radio-input-inner-bg-color: transparent; + --radio-input-inner-bg-color-checked: rgb(var(--o-color-white)); + --radio-input-inner-bg-color-checked-disabled: rgb(var(--o-color-white)); +} diff --git a/packages/opendesign/src/components/radio/types.ts b/packages/opendesign/src/components/radio/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..e5538d6f733de63e28f3adc60d73e8f3555d2fa9 --- /dev/null +++ b/packages/opendesign/src/components/radio/types.ts @@ -0,0 +1,33 @@ +import { ExtractPropTypes } from 'vue'; + +export const radioProps = { + /** + * 单选框value + */ + value: { + type: [String, Number, Boolean], + required: true, + }, + /** + * 单选框双向绑定值 + */ + modelValue: { + type: [String, Number, Boolean], + }, + /** + * 非受控状态时，默认是否选中 + */ + defaultChecked: { + type: Boolean, + default: false, + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + default: false, + }, +}; + +export type RadioPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/rate/ORate.vue b/packages/opendesign/src/components/rate/ORate.vue new file mode 100644 index 0000000000000000000000000000000000000000..874ae7391a5a9443eee4f73f1097dee08a36e5d1 --- /dev/null +++ b/packages/opendesign/src/components/rate/ORate.vue @@ -0,0 +1,100 @@ + + + diff --git a/packages/opendesign/src/components/rate/__demo__/IndexRate.vue b/packages/opendesign/src/components/rate/__demo__/IndexRate.vue new file mode 100644 index 0000000000000000000000000000000000000000..cf400f88c042c731d3f12d169b3fa6f9e400d2b3 --- /dev/null +++ b/packages/opendesign/src/components/rate/__demo__/IndexRate.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/opendesign/src/components/rate/__demo__/RateAllowHalf.vue b/packages/opendesign/src/components/rate/__demo__/RateAllowHalf.vue new file mode 100644 index 0000000000000000000000000000000000000000..66fd1820919aeafb0fbcb7999e0aecf3405eca08 --- /dev/null +++ b/packages/opendesign/src/components/rate/__demo__/RateAllowHalf.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/opendesign/src/components/rate/__demo__/RateBasic.vue b/packages/opendesign/src/components/rate/__demo__/RateBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..9cc0ed61ebff2d4af639dd335d7756f894872d51 --- /dev/null +++ b/packages/opendesign/src/components/rate/__demo__/RateBasic.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/opendesign/src/components/rate/__demo__/RateClearable.vue b/packages/opendesign/src/components/rate/__demo__/RateClearable.vue new file mode 100644 index 0000000000000000000000000000000000000000..afe1d64f7e1d5a099bba060211720ccb8149c1a7 --- /dev/null +++ b/packages/opendesign/src/components/rate/__demo__/RateClearable.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/opendesign/src/components/rate/__demo__/RateColor.vue b/packages/opendesign/src/components/rate/__demo__/RateColor.vue new file mode 100644 index 0000000000000000000000000000000000000000..a4c4e9560c57ca5c34f4e438b547d5e641178643 --- /dev/null +++ b/packages/opendesign/src/components/rate/__demo__/RateColor.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/opendesign/src/components/rate/__demo__/RateCount.vue b/packages/opendesign/src/components/rate/__demo__/RateCount.vue new file mode 100644 index 0000000000000000000000000000000000000000..cf45b7367b5eefcef7690c61d97a911c4f0fe486 --- /dev/null +++ b/packages/opendesign/src/components/rate/__demo__/RateCount.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/opendesign/src/components/rate/__demo__/RateIcon.vue b/packages/opendesign/src/components/rate/__demo__/RateIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..c36d0b2ec88df655651d320eb9f32d3605567060 --- /dev/null +++ b/packages/opendesign/src/components/rate/__demo__/RateIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/opendesign/src/components/rate/__demo__/RateSize.vue b/packages/opendesign/src/components/rate/__demo__/RateSize.vue new file mode 100644 index 0000000000000000000000000000000000000000..a7d0b654b98362bf0db12d27de2ca9938303f14e --- /dev/null +++ b/packages/opendesign/src/components/rate/__demo__/RateSize.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/opendesign/src/components/rate/index.ts b/packages/opendesign/src/components/rate/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..bc28bf6256f452d456b56a890af2d48d360cff09 --- /dev/null +++ b/packages/opendesign/src/components/rate/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _ORate from './ORate.vue'; + +const ORate = Object.assign(_ORate, { + install(app: App) { + app.component(_ORate.name, _ORate); + }, +}); + +export * from './types'; + +export { ORate }; diff --git a/packages/opendesign/src/components/rate/style/index.scss b/packages/opendesign/src/components/rate/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..7f147b76c1325cb654781f10d45747545f92267f --- /dev/null +++ b/packages/opendesign/src/components/rate/style/index.scss @@ -0,0 +1,44 @@ +@use './var.scss'; + +.o-rate { + display: inline-flex; + align-items: center; + user-select: none; + font-size: var(--rate-size); + cursor: pointer; +} + +.o-rate-item { + position: relative; + + &.is-half{ + .o-rate-icon-top { + opacity: 1; + } + } + + &.is-full{ + .o-rate-icon-bottom { + color: var(--rate-color-active); + } + } + + & + .o-rate-item { + margin-left: var(--rate-gap); + } +} + +.o-rate-icon { + color: var(--rate-color); + transition: all var(--o-duration-m1) var(--o-easing-standard); +} + +.o-rate-icon-top { + position: absolute; + top: 0; + left: 0; + width: 50%; + opacity: 0; + overflow: hidden; + color: var(--rate-color-active); +} diff --git a/packages/opendesign/src/components/rate/style/index.ts b/packages/opendesign/src/components/rate/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/rate/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/rate/style/var.scss b/packages/opendesign/src/components/rate/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..e520f5d99d5054d392d638e76f53d69d145f1f5a --- /dev/null +++ b/packages/opendesign/src/components/rate/style/var.scss @@ -0,0 +1,33 @@ +.o-rate { + --rate-color: var(--o-color-control1-light); + --rate-color-active: var(--o-color-warning1); + --rate-gap: 0; +} + +.o-rate-medium { + --rate-size: var(--o-icon_size-xs); +} + +.o-rate-large { + --rate-size: var(--o-icon_size-s); +} + +.o-rate-size-small { + --rate-size: var(--o-icon_size-xxs); +} + +.o-rate-primary { + --rate-color-active: var(--o-color-primary1); +} + +.o-rate-success { + --rate-color-active: var(--o-color-success1); +} + +.o-rate-warning { + --rate-color-active: var(--o-color-warning1); +} + +.o-rate-danger { + --rate-color-active: var(--o-color-danger1); +} diff --git a/packages/opendesign/src/components/rate/types.ts b/packages/opendesign/src/components/rate/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..81e2d6caeaf7c7ce6f8378939e5cbd2481215277 --- /dev/null +++ b/packages/opendesign/src/components/rate/types.ts @@ -0,0 +1,64 @@ +import type { ExtractPropTypes, PropType } from 'vue'; +import type { ColorT, SizeT } from '../_shared/global'; + +export const rateProps = { + /** + * 评分数量 + */ + count: { + type: Number, + default: 5, + }, + /** + * 双向绑定值 + */ + modelValue: { + type: Number, + }, + /** + * 非受控状态时，默认值 + */ + defaultValue: { + type: Number, + default: 0, + }, + /** + * 尺寸 + * "small"| "medium" | "large" + */ + size: { + type: String as PropType, + default: 'medium', + }, + /** + * 颜色类型 + * 'normal' | 'primary' | 'success' | 'warning' | 'danger' + */ + color: { + type: String as PropType, + default: 'normal', + }, + /** + * 是否只读 + */ + readonly: { + type: Boolean, + default: false, + }, + /** + * 是否支持半选 + */ + allowHalf: { + type: Boolean, + default: false, + }, + /** + * 是否支持可清空 + */ + clearable: { + type: Boolean, + default: false, + }, +}; + +export type RatePropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/resize-observer/__demo__/IndexResize.vue b/packages/opendesign/src/components/resize-observer/__demo__/IndexResize.vue new file mode 100644 index 0000000000000000000000000000000000000000..4ea04af1263276ad130e265e9770e91dd8142478 --- /dev/null +++ b/packages/opendesign/src/components/resize-observer/__demo__/IndexResize.vue @@ -0,0 +1,9 @@ + + + diff --git a/packages/opendesign/src/components/resize-observer/__demo__/ResizeDemo.vue b/packages/opendesign/src/components/resize-observer/__demo__/ResizeDemo.vue new file mode 100644 index 0000000000000000000000000000000000000000..0c98f96e147d3213063222be84b49aea3aa5b7bf --- /dev/null +++ b/packages/opendesign/src/components/resize-observer/__demo__/ResizeDemo.vue @@ -0,0 +1,67 @@ + + + diff --git a/packages/opendesign/src/components/resize-observer/index.ts b/packages/opendesign/src/components/resize-observer/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..da305eacd55400e5a37b7bd2b4f8ec6286e520b9 --- /dev/null +++ b/packages/opendesign/src/components/resize-observer/index.ts @@ -0,0 +1 @@ +export { default as OResizeObserver } from './resize-observer'; \ No newline at end of file diff --git a/packages/opendesign/src/components/resize-observer/resize-observer.ts b/packages/opendesign/src/components/resize-observer/resize-observer.ts new file mode 100644 index 0000000000000000000000000000000000000000..7d0993fe253dde108e82b5c028b4cd63f4acd85c --- /dev/null +++ b/packages/opendesign/src/components/resize-observer/resize-observer.ts @@ -0,0 +1,22 @@ +import { defineComponent, cloneVNode, withDirectives } from 'vue'; +import { useReiszeObserverDirective } from '../hooks'; + +/** + * 子元素resize监听 + * 如果有多个子元素，每个子元素都会被监听到 + */ +export default defineComponent({ + name: 'OResizeObserver', + emits: ['resize'], + setup(props, { emit, slots }) { + const { vResizeObserver } = useReiszeObserverDirective((entry: ResizeObserverEntry, isFirst: boolean) => { + // 触发resize事件 + emit('resize', entry, isFirst); + }); + + return () => { + const children = slots.default?.(); + return children?.map((item) => withDirectives(cloneVNode(item), [[vResizeObserver]])); + }; + }, +}); diff --git a/packages/opendesign/src/components/scrollbar/OScrollbar.vue b/packages/opendesign/src/components/scrollbar/OScrollbar.vue new file mode 100644 index 0000000000000000000000000000000000000000..a3891b87bd8d9dae847a5df0b8091e8b32a82d82 --- /dev/null +++ b/packages/opendesign/src/components/scrollbar/OScrollbar.vue @@ -0,0 +1,5 @@ + + + diff --git a/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue b/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue new file mode 100644 index 0000000000000000000000000000000000000000..2ec5dc7c6bd25f7e64fd9a0630f89f0b72a1db88 --- /dev/null +++ b/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue @@ -0,0 +1,9 @@ + + + diff --git a/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..39b8f290b0528de46f0cb650ca6d18c81a99b840 --- /dev/null +++ b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue @@ -0,0 +1,9 @@ + + + diff --git a/packages/opendesign/src/components/scrollbar/index.ts b/packages/opendesign/src/components/scrollbar/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..d55162bde6686f65c0bee837307855c86daf8ac4 --- /dev/null +++ b/packages/opendesign/src/components/scrollbar/index.ts @@ -0,0 +1,11 @@ +import type { App } from 'vue'; + +import _OScrollbar from './OScrollbar.vue'; + +const OScrollbar = Object.assign(_OScrollbar, { + install(app: App) { + app.component(_OScrollbar.name, _OScrollbar); + }, +}); + +export { OScrollbar }; diff --git a/packages/opendesign/src/components/scrollbar/scrollbar.ts b/packages/opendesign/src/components/scrollbar/scrollbar.ts new file mode 100644 index 0000000000000000000000000000000000000000..7d0993fe253dde108e82b5c028b4cd63f4acd85c --- /dev/null +++ b/packages/opendesign/src/components/scrollbar/scrollbar.ts @@ -0,0 +1,22 @@ +import { defineComponent, cloneVNode, withDirectives } from 'vue'; +import { useReiszeObserverDirective } from '../hooks'; + +/** + * 子元素resize监听 + * 如果有多个子元素，每个子元素都会被监听到 + */ +export default defineComponent({ + name: 'OResizeObserver', + emits: ['resize'], + setup(props, { emit, slots }) { + const { vResizeObserver } = useReiszeObserverDirective((entry: ResizeObserverEntry, isFirst: boolean) => { + // 触发resize事件 + emit('resize', entry, isFirst); + }); + + return () => { + const children = slots.default?.(); + return children?.map((item) => withDirectives(cloneVNode(item), [[vResizeObserver]])); + }; + }, +}); diff --git a/packages/opendesign/src/components/scrollbar/style/index.scss b/packages/opendesign/src/components/scrollbar/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..bce181a7e1bc7db28c5418100a87d16fd0cea708 --- /dev/null +++ b/packages/opendesign/src/components/scrollbar/style/index.scss @@ -0,0 +1,4 @@ +@use './var.scss'; + +.o-scrollbar { +} diff --git a/packages/opendesign/src/components/scrollbar/style/index.ts b/packages/opendesign/src/components/scrollbar/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/scrollbar/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/scrollbar/style/var.scss b/packages/opendesign/src/components/scrollbar/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..8b9ec5be345abef50894b1206d47e2c6409eabed --- /dev/null +++ b/packages/opendesign/src/components/scrollbar/style/var.scss @@ -0,0 +1,2 @@ +.o-scrollbar { +} diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue new file mode 100644 index 0000000000000000000000000000000000000000..08ab2b97bc71dce854010c09df99db43c97252da --- /dev/null +++ b/packages/opendesign/src/components/select/OSelect.vue @@ -0,0 +1,121 @@ + + diff --git a/packages/opendesign/src/components/select/__demo__/IndexSelect.vue b/packages/opendesign/src/components/select/__demo__/IndexSelect.vue new file mode 100644 index 0000000000000000000000000000000000000000..4f307888bd309056c69a387687996c99c2de71f8 --- /dev/null +++ b/packages/opendesign/src/components/select/__demo__/IndexSelect.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/opendesign/src/components/select/__demo__/SelectBasic.vue b/packages/opendesign/src/components/select/__demo__/SelectBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..35daa6612197c0b15f03cca6d7057a0476a2ca54 --- /dev/null +++ b/packages/opendesign/src/components/select/__demo__/SelectBasic.vue @@ -0,0 +1,146 @@ + + + diff --git a/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue new file mode 100644 index 0000000000000000000000000000000000000000..55ab60bbf5b0ebd20cfb7b3c1e580db9dd0402a6 --- /dev/null +++ b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue @@ -0,0 +1,101 @@ + + + diff --git a/packages/opendesign/src/components/select/index.ts b/packages/opendesign/src/components/select/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..898c93e9f3b1079f84a3bfbb2c73b4a3bb8a2efc --- /dev/null +++ b/packages/opendesign/src/components/select/index.ts @@ -0,0 +1,9 @@ +import _OSelect from './OSelect.vue'; +import type { App } from 'vue'; + +const OSelect = Object.assign(_OSelect, { + install(app: App) { + app.component(_OSelect.name, _OSelect); + }, +}); +export { OSelect }; diff --git a/packages/opendesign/src/components/select/provide.ts b/packages/opendesign/src/components/select/provide.ts new file mode 100644 index 0000000000000000000000000000000000000000..67700a3cf9d3f6ea467bb8fa757714cf0a51efac --- /dev/null +++ b/packages/opendesign/src/components/select/provide.ts @@ -0,0 +1,7 @@ +import { InjectionKey, Ref } from 'vue'; +import { SelectOptionT } from './types'; + + +export const selectOptionInjectKey: InjectionKey<{ update: (val: SelectOptionT, emit?: boolean) => void, value: Ref }> = + Symbol('provide-select-option'); + diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..4b9aa6ad9e9c47505deaddd732bdc71677504f4c --- /dev/null +++ b/packages/opendesign/src/components/select/style/index.scss @@ -0,0 +1,107 @@ +@use './var.scss'; + +.o-select { + display: inline-flex; + padding: var(--select-padding); + color: var(--select-color); + height: var(--select-height); + border-radius: var(--select-radius); + border: 1px solid var(--select-bd-color); + background-color: var(--select-bg-color); + cursor: pointer; + + &:not(.o-select-disabled) { + &:hover { + border-color: var(--select-bd-color-hover); + background-color: var(--select-bg-color-hover); + } + &.is-selecting { + border-color: var(--select-bd-color-focus); + background-color: var(--select-bg-color-focus); + } + } +} + +.o-select-disabled { + cursor: not-allowed; + color: var(--select-color-disabled); + border-color: var(--select-bd-color-disabled); + background-color: var(--select-bg-color-disabled); +} + +.o-select-input { + outline: none; + border: none; + padding: 0; + color: inherit; + cursor: inherit; + background-color: transparent; + display: inline-flex; + width: 100%; + font-size: var(--select-text-size); + line-height: var(--select-text-height); +} +.o-select-suffix { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + position: relative; +} +.o-select-icon-arrow { + font-size: 20px; + color: var(--select-icon-color); + display: inline-flex; + align-items: center; + transition: transform var(--o-duration-s) var(--o-easing-standard); + svg { + display: block; + } + &.active { + transform: rotateX(180deg); + } + .o-select-disabled & { + color: var(--select-icon-color-disabled); + } +} + +.o-select-options { + background-color: var(--select-options-bg-color); + box-shadow: var(--select-options-shadow); + border-radius: var(--select-options-radius); + border: var(--select-options-bd); + padding: var(--select-options-padding); +} + +.o-select-clear { + position: absolute; + transition: all var(--o-duration-m1) var(--o-easing-standard-in); + opacity: 0; + transform: scale(0.1); + display: flex; + align-items: center; + justify-content: center; + color: var(--input-icon-color); + background-color: var(--input-icon-bg-color); + border-radius: 50%; + z-index: 1; +} +.o-select-suffix-wrap { + transition: all var(var(--o-duration-m1)) var(--o-easing-standard-out); + align-items: center; + display: flex; + justify-content: center; +} +.o-input-clearable { + &:hover { + .o-select-suffix-wrap { + visibility: hidden; + opacity: 0; + } + .o-select-clear { + visibility: visible; + opacity: 1; + transform: scale(1); + } + } +} diff --git a/packages/opendesign/src/components/select/style/index.ts b/packages/opendesign/src/components/select/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..97806f75ad147dd20bd3802a7001ea21d7911191 --- /dev/null +++ b/packages/opendesign/src/components/select/style/index.ts @@ -0,0 +1,3 @@ +import '../../style'; +import '../../popup/style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/select/style/var.scss b/packages/opendesign/src/components/select/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..7694d764cef23d1bc5d352b5dec29375b4b82ece --- /dev/null +++ b/packages/opendesign/src/components/select/style/var.scss @@ -0,0 +1,126 @@ +.o-select { + --select-text-size: var(--o-font_size-text1); + --select-text-height: var(--o-line_height-text1); + + --select-color: var(--o-color-info2); + --select-color-disabled: var(--o-color-info4); + + --select-bg-color: transparent; + --select-bg-color-hover: transparent; + --select-bg-color-focus: var(--o-color-control-light); + + --select-icon-color: var(--o-color-info3); + --select-icon-color-disabled: var(--o-color-info4); + --input-icon-bg-color: var(--o-color-control1-light); +} + +.o-select-options { + --select-options-bg-color: var(--o-color-control-light); + --select-options-shadow: var(--o-shadow-2); + --select-options-bd: none; + --select-options-radius: var(--o-radius-control-l); + --select-options-padding: 4px; +} + +.o-select-normal { + --select-bd-color: var(--o-color-control1); + --select-bd-color-hover: var(--o-color-primary2); + --select-bd-color-focus: var(--o-color-primary3); + --select-bd-color-disabled: var(--o-color-control4); + + &.o-select-solid { + --select-bd-color: var(--o-color-control1-light); + --select-bd-color-hover: var(--o-color-control2-light); + + --select-bg-color: var(--o-color-control1-light); + --select-bg-color-hover: var(--o-color-control2-light); + --select-bg-color-disabled: var(--o-color-control4-light); + } +} + +.o-select-success { + --select-bd-color: var(--o-color-success1); + --select-bd-color-hover: var(--o-color-success2); + --select-bd-color-focus: var(--o-color-success3); + --select-bd-color-disabled: var(--o-color-success4); + + &.o-select-solid { + --select-bd-color: var(--o-color-success1-light); + --select-bd-color-hover: var(--o-color-success2-light); + + --select-bg-color: var(--o-color-success1-light); + --select-bg-color-hover: var(--o-color-success2-light); + --select-bg-color-disabled: var(--o-color-success4-light); + } +} + +.o-select-warning { + --select-bd-color: var(--o-color-warning1); + --select-bd-color-hover: var(--o-color-warning2); + --select-bd-color-focus: var(--o-color-warning3); + --select-bd-color-disabled: var(--o-color-warning4); + + &.o-select-solid { + --select-bd-color: var(--o-color-warning1-light); + --select-bd-color-hover: var(--o-color-warning2-light); + + --select-bg-color: var(--o-color-warning1-light); + --select-bg-color-hover: var(--o-color-warning2-light); + --select-bg-color-disabled: var(--o-color-warning4-light); + } +} + +.o-select-danger { + --select-bd-color: var(--o-color-danger1); + --select-bd-color-hover: var(--o-color-danger2); + --select-bd-color-focus: var(--o-color-danger3); + --select-bd-color-disabled: var(--o-color-danger4); + + &.o-select-solid { + --select-bd-color: var(--o-color-danger1-light); + --select-bd-color-hover: var(--o-color-danger2-light); + + --select-bg-color: var(--o-color-danger1-light); + --select-bg-color-hover: var(--o-color-danger2-light); + --select-bg-color-disabled: var(--o-color-danger4-light); + } +} + +.o-select-size-small { + --select-height: var(--o-size-s); + --select-text-size: var(--o-font_size-tip1); + --select-text-height: var(--o-line_height-tip1); + --select-padding: 0 6px 0 8px; + --select-radius: var(--o-radius-control-s); +} +.o-select-size-medium { + --select-height: var(--o-size-m); + --select-text-size: var(--o-font_size-text1); + --select-text-height: var(--o-line_height-text1); + --select-padding: 4px 8px 4px 12px; + --select-radius: var(--o-radius-control-m); +} +.o-select-size-large { + --select-height: var(--o-size-l); + --select-text-size: var(--o-font_size-text2); + --select-text-height: var(--o-line_height-text2); + --select-padding: 4px 12px 4px 16px; + --select-radius: var(--o-radius-control-l); +} +.o-select-round-pill { + --select-radius: var(--o-size-l); +} + +.o-option { + .o-select-options-size-small & { + --option-padding: 3px 8px; + --option-text-size: var(--o-font_size-tip1); + --option-text-height: var(--o-line_height-tip1); + } + + .o-select-options-size-large & { + --option-padding: 7px 16px; + --option-text-size: var(--o-font_size-text2); + --option-text-height: var(--o-line_height-text2); + } +} diff --git a/packages/opendesign/src/components/select/types.ts b/packages/opendesign/src/components/select/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..9b2ba2622c623ed081c25b98a51b6b351c3b6b31 --- /dev/null +++ b/packages/opendesign/src/components/select/types.ts @@ -0,0 +1,114 @@ +import { PopupPositionT, PopupTriggerT } from '../popup'; +import { ExtractPropTypes, PropType } from 'vue'; +import type { SizeT, RoundT, VariantT } from '../_shared/global'; + +export const selectProps = { + /** + * 下拉框的值 + * v-model + */ + modelValue: { + type: [String, Number], + }, + /** + * 下拉框的默认值 + * 非受控 + */ + defaultValue: { + type: [String, Number], + }, + /** + * 大小 + */ + size: { + type: String as PropType, + }, + /** + * 圆角值 + */ + round: { + type: String as PropType + }, + /** + * 颜色类型 + */ + color: { + type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>, + default: 'normal' + }, + /** + * 按钮类型：ColorT + */ + variant: { + type: String as PropType, + default: 'outline' + }, + /** + * 提示文本 + */ + placeholder: { + type: String, + default: 'please select...' + }, + /** + * 是否可以清除 + */ + clearable: { + type: Boolean, + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + }, + /** + * 下拉选项触发方式 + */ + trigger: { + type: String as PropType, + default: 'click' + }, + /** + * 下拉选项位置 + */ + optionPosition: { + type: String as PropType, + default: 'bl' + }, + /** + * 下拉选项宽度自适应规则 + * 'auto':自动 | 'min-width':最小宽度与选择框一致 | 'width': 宽度与选择框一致 + */ + optionWidthMode: { + type: String as PropType<'auto' | 'min-width' | 'width'>, + default: 'min-width' + }, + /** + * 下拉容器自定义类 + */ + optionWrapClass: { + type: String, + }, + /** + * 是否在结束选择时，卸载下拉选项 + * v-model + */ + unmountOnHide: { + type: Boolean, + default: true + }, + /** + * 过渡名称 + */ + transition: { + type: String, + }, +}; + +export type SelectPropsT = ExtractPropTypes; + +export interface SelectOptionT { + label: string; + value: string | number; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/slides/OSlideItem.vue b/packages/opendesign/src/components/slides/OSlideItem.vue new file mode 100644 index 0000000000000000000000000000000000000000..d4a662951e55f93b027c2a48d340a6f053729771 --- /dev/null +++ b/packages/opendesign/src/components/slides/OSlideItem.vue @@ -0,0 +1,6 @@ + + diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue new file mode 100644 index 0000000000000000000000000000000000000000..20038e9ddf58840554884e80393234b959bec9e6 --- /dev/null +++ b/packages/opendesign/src/components/slides/OSlides.vue @@ -0,0 +1,279 @@ + + diff --git a/packages/opendesign/src/components/slides/__demo__/IndexSlides.vue b/packages/opendesign/src/components/slides/__demo__/IndexSlides.vue new file mode 100644 index 0000000000000000000000000000000000000000..3282793605a51c243f0b87791a22ab120ca245f3 --- /dev/null +++ b/packages/opendesign/src/components/slides/__demo__/IndexSlides.vue @@ -0,0 +1,10 @@ + + + diff --git a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..f089c0d28306019dc3da3160553024944b69745a --- /dev/null +++ b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue @@ -0,0 +1,49 @@ + + + diff --git a/packages/opendesign/src/components/slides/index.ts b/packages/opendesign/src/components/slides/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..437e94412e0d0a07acf77a4b8ead6b9e4a4546fe --- /dev/null +++ b/packages/opendesign/src/components/slides/index.ts @@ -0,0 +1,15 @@ +import _OSlides from './OSlides.vue'; +import OSlideItem from './OSlideItem.vue'; +import type { App } from 'vue'; + +const OSlides = Object.assign(_OSlides, { + OSlideItem, + install(app: App) { + app.component(_OSlides.name, _OSlides); + }, +}); + +export { + OSlides, + OSlideItem +}; diff --git a/packages/opendesign/src/components/slides/provide.ts b/packages/opendesign/src/components/slides/provide.ts new file mode 100644 index 0000000000000000000000000000000000000000..e70f164f98ac91627b607011c96b21206a0d10a6 --- /dev/null +++ b/packages/opendesign/src/components/slides/provide.ts @@ -0,0 +1,10 @@ +import { InjectionKey, Ref } from 'vue'; + + +export const slidesInjectKey: InjectionKey<{ + currentIndex: Ref + // Ref: Ref, + // updateValue: (value: string | number, navEl: HTMLElement | null) => void, + // onDeletePane: (value: string | number, evt: MouseEvent) => void, +}> = Symbol('provide-slides'); + diff --git a/packages/opendesign/src/components/slides/style/index.scss b/packages/opendesign/src/components/slides/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..04ddbb072729a1c7b6c8b54030e2817c9a710653 --- /dev/null +++ b/packages/opendesign/src/components/slides/style/index.scss @@ -0,0 +1,164 @@ +@use './var.scss'; + +.o-slides { + position: relative; + visibility: hidden; + overflow: hidden; +} +.o-slides-visible { + visibility: visible; +} + +.o-slides-wrap { + position: relative; + width: 100%; + height: 100%; + z-index: 1; +} + +// arrow +.o-slides-arrow-prev, +.o-slides-arrow-next { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + user-select: none; + cursor: pointer; +} +.o-slides-arrow-prev { + top: 50%; + left: 12px; + transform: translate3d(0, -50%, 0); +} +.o-slides-arrow-next { + top: 50%; + right: 12px; + transform: translate3d(0, -50%, 0); +} +.o-slides-arrow-icon { + font-size: var(--slides-arrow-size); + color: var(--slides-arrow-color); + background-color: var(--slides-arrow-bg-color); + border-radius: 50%; + opacity: var(--slides-arrow-opacity); + &:hover { + opacity: var(--slides-arrow-opacity-hover); + color: var(--slides-arrow-color-hover); + background-color: var(--slides-arrow-bg-color-hover); + } +} +// indicator +.o-slides-indicator-wrap { + position: absolute; + left: 0; + bottom: 12px; + display: flex; + justify-content: center; + z-index: 2; + left: 50%; + transform: translate3d(-50%, 0, 0); +} +.o-slides-indicator-dot { + width: 48px; + height: 3px; + background-color: var(--slides-indicator-bg-color); + margin: 4px; + border-radius: 3px; + opacity: 0.3; + cursor: pointer; +} +.o-slides-indicator-dot-active { + opacity: 1; + background-color: var(--slides-indicator-bg-color-active); +} + +// slide +.o-slides-type-switch { + overflow: hidden; + .o-slide-item { + position: absolute; + left: 0; + right: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 1; + opacity: 0; + } + .o-slide-item-animating { + opacity: 1; + } + .o-slide-item-active { + z-index: 5; + opacity: 1; + } +} + +.o-slide-item-in { + z-index: 5; + opacity: 1; + animation: slides-slide-x-in var(--o-duration-l) var(--o-easing-standard-in); +} +.o-slide-item-out { + z-index: 3; + animation: slides-slide-x-out var(--o-duration-l) var(--o-easing-standard-in); +} +.o-slide-item-in-reverse { + z-index: 5; + animation: slides-slide-x-in-reverse var(--o-duration-l) var(--o-easing-standard-in); +} +.o-slide-item-out-reverse { + z-index: 3; + animation: slides-slide-x-out-reverse var(--o-duration-l) var(--o-easing-standard-in); +} + +@keyframes slides-slide-x-in { + 0% { + transform: translate3d(100%, 0, 0); + } + 100% { + transform: translate3d(0, 0, 0); + } +} +@keyframes slides-slide-x-in-reverse { + 0% { + transform: translate3d(-100%, 0, 0); + } + 100% { + transform: translate3d(0, 0, 0); + } +} +@keyframes slides-slide-x-out { + 0% { + transform: translate3d(0, 0, 0); + } + 100% { + transform: translate3d(-100%, 0, 0); + } +} +@keyframes slides-slide-x-out-reverse { + 0% { + transform: translate3d(0, 0, 0); + } + 100% { + transform: translate3d(100%, 0, 0); + } +} + +.o-slides-type-carousel { + transition: transform var(--o-duration-l) var(--o-easing-emphasized); + display: flex; + width: 100%; + height: 100%; + .o-slide-item { + flex-shrink: 0; + flex-grow: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 1; + margin-right: var(--slide-gap-x); + } +} diff --git a/packages/opendesign/src/components/slides/style/index.ts b/packages/opendesign/src/components/slides/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/slides/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/slides/style/var.scss b/packages/opendesign/src/components/slides/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..7fd24baba73ee6bf5865bdf068963c9d6db70e1b --- /dev/null +++ b/packages/opendesign/src/components/slides/style/var.scss @@ -0,0 +1,17 @@ +.o-slides { + --slide-gap-x: 8px; + + // arrow + --slides-arrow-size: var(--o-icon_size-l); + --slides-arrow-opacity: 0.6; + --slides-arrow-opacity-hover: 1; + --slides-arrow-color: var(--o-color-control-light); + --slides-arrow-color-hover: var(--o-color-control-light); + --slides-arrow-bg-color: rgba(var(--o-gray-1), 0.3); + --slides-arrow-bg-color-hover: rgba(var(--o-gray-1), 0.3); + // indicator + --slides-indicator-opacity: 0.3; + --slides-indicator-opacity-active: 1; + --slides-indicator-bg-color: var(--o-color-control-light); + --slides-indicator-bg-color-active: var(--o-color-control-light); +} diff --git a/packages/opendesign/src/components/slides/types.ts b/packages/opendesign/src/components/slides/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..9b3a169107f709e7bc14f92cc4890b8f1d54f81c --- /dev/null +++ b/packages/opendesign/src/components/slides/types.ts @@ -0,0 +1,58 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export const slidesProps = { + /** + * 激活索引 + */ + activeIndex: { + type: Number, + }, + /** + * 样式类型 + */ + type: { + type: String as PropType<'carousel'|'switch'>, + default: 'switch' + }, + /** + * 自动播放 + */ + autoPlay: { + type: Boolean + }, + /** + * 自动播放间隔 + */ + interval: { + type: Number, + default: 5000 + }, + /** + * 是否显示切换箭头 + */ + arrow: { + type: Boolean, + default: true + }, + /** + * 设置切换箭头容器类 + */ + arrowWrapClass: { + type: String + }, + /** + * 是否显示指示器 + */ + indicator: { + type: Boolean, + default: true + }, + /** + * 设置指示器容器类 + */ + indicatorWrapClass: { + type: String + } +}; + +export type SlidesPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss new file mode 100644 index 0000000000000000000000000000000000000000..619bff4d6acb9d687552d8cfe00adc7d16c26757 --- /dev/null +++ b/packages/opendesign/src/components/style/animation.scss @@ -0,0 +1,71 @@ +@keyframes o-rotating { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + } +} + +.o-rotating { + animation: o-rotating 2s var(--o-easing-linear) infinite; +} + +@keyframes o-zoom-fade-in { + 0% { + transform: scale(0.95); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} + +.o-zoom-fade-enter-active { + animation: o-zoom-fade-in var(--o-duration-m1); +} +.o-zoom-fade-leave-active { + animation: o-zoom-fade-in var(--o-duration-s) reverse; +} + +@keyframes o-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes o-fade-up { + 0% { + transform: translateY(10px); + opacity: 0; + } + 100% { + transform: translateY(0px); + opacity: 1; + } +} + +.o-fade-up-enter-enter-active { + animation: o-fade-up var(--o-duration-s) var(--o-easing-standard-out); +} +.o-fade-in-enter-enter-active { + animation: o-fade-in var(--o-duration-m1) var(--o-easing-standard-in); +} + +.o-fade-up-enter-active { + transition: all var(--o-duration-m1) var(--o-easing-standard-in); +} +.o-fade-up-leave-active { + transition: all var(--o-duration-s) var(--o-easing-standard-out); +} + +.o-fade-up-enter-from, +.o-fade-up-leave-to { + opacity: 0; + transform: translateY(10px); +} diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css new file mode 100644 index 0000000000000000000000000000000000000000..4925155de9314e519ac050d354b44081290a19c3 --- /dev/null +++ b/packages/opendesign/src/components/style/dark.token.css @@ -0,0 +1,1333 @@ +/* theme: dark */ +[data-o-theme="dark"] { + /** + * @name + * @type palette + * @group base + * @description + */ + --o-color-white: 255, 255, 255; + /** + * @name + * @type palette + * @group base + * @description + */ + --o-color-black: 0, 0, 0; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-1: 0, 13, 77; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-2: 4, 27, 121; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-3: 14, 50, 166; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-4: 29, 77, 210; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-5: 48, 111, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-6: 60, 126, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-7: 104, 159, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-8: 147, 190, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-9: 190, 218, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-10: 234, 244, 255; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-1: 77, 56, 0; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-2: 120, 94, 7; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-3: 163, 134, 20; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-4: 207, 179, 37; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-5: 250, 225, 60; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-6: 251, 233, 75; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-7: 252, 243, 116; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-8: 253, 250, 157; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-9: 254, 254, 198; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-10: 254, 255, 240; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-1: 0, 77, 28; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-2: 4, 102, 37; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-3: 10, 128, 45; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-4: 18, 154, 55; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-5: 29, 180, 64; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-6: 39, 195, 70; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-7: 80, 210, 102; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-8: 126, 225, 139; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-9: 178, 240, 183; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-10: 235, 255, 236; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-1: 77, 27, 0; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-2: 121, 48, 4; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-3: 166, 75, 10; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-4: 210, 105, 19; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-5: 255, 141, 31; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-6: 255, 150, 38; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-7: 255, 179, 87; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-8: 255, 205, 135; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-9: 255, 227, 184; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-10: 255, 247, 232; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-1: 77, 0, 10; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-2: 119, 6, 17; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-3: 161, 22, 31; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-4: 203, 46, 52; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-5: 245, 78, 78; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-6: 247, 105, 101; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-7: 249, 141, 134; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-8: 251, 176, 167; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-9: 253, 209, 202; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-10: 255, 240, 236; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-1: 0, 0, 0; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-2: 36, 36, 36; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-3: 57, 57, 57; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-4: 94, 94, 94; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-5: 119, 119, 122; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-6: 166, 166, 166; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-7: 221, 221, 221; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-8: 238, 238, 238; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-9: 243, 243, 243; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-10: 255, 255, 255; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-1: 23, 23, 26; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-2: 46, 46, 48; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-3: 72, 72, 73; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-4: 95, 95, 96; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-5: 120, 120, 122; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-6: 146, 146, 147; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-7: 171, 171, 172; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-8: 197, 197, 197; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-9: 223, 223, 223; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-10: 246, 246, 246; + /** + * @name + * @type color + * @group info + * @description 一级/强调/标题 + */ + --o-color-info1: rgb(var(--o-gray-10)); + /** + * @name + * @type color + * @group info + * @description 二级/次强调/正文 + */ + --o-color-info2: rgb(var(--o-gray-8)); + /** + * @name + * @type color + * @group info + * @description 三级/辅助信息 + */ + --o-color-info3: rgb(var(--o-gray-6)); + /** + * @name + * @type color + * @group info + * @description 置灰/禁用 + */ + --o-color-info4: rgb(var(--o-gray-4)); + /** + * @name + * @type color + * @group info + * @description 一级/次强调/正文反色 + */ + --o-color-info1-inverse: rgb(var(--o-gray-1)); + /** + * @name + * @type color + * @group info + * @description 二级/辅助信息反色 + */ + --o-color-info2-inverse: rgb(var(--o-gray-3)); + /** + * @name + * @type color + * @group info + * @description 三级/辅助信息反色 + */ + --o-color-info3-inverse: rgb(var(--o-gray-5)); + /** + * @name + * @type color + * @group info + * @description 置灰/禁用反色 + */ + --o-color-info4-inverse: rgb(var(--o-gray-7)); + /** + * @name + * @type color + * @group mask + * @description 全局遮罩 + */ + --o-color-mask1: rgba(var(--o-gray-10), .2); + /** + * @name + * @type color + * @group mask + * @description 局部遮罩 + */ + --o-color-mask2: rgba(var(--o-gray-10), .1); + /** + * @name + * @type color + * @group fill + * @description 一级填充/页面背景 + */ + --o-color-fill1: rgb(var(--o-mixedgray-1)); + /** + * @name + * @type color + * @group fill + * @description 二级填充/区块、卡片 + */ + --o-color-fill2: rgb(var(--o-gray-1)); + /** + * @name + * @type color + * @group fill + * @description 三级填充/卡片 + */ + --o-color-fill3: rgb(var(--o-mixedgray-3)); + /** + * @name + * @type color + * @group fill + * @description 四级填充/禁用 + */ + --o-color-fill4: rgb(var(--o-mixedgray-4)); + /** + * @name + * @type color + * @group control + * @description 很浅背景 + */ + --o-color-control-light: rgb(var(--o-gray-1)); + /** + * @name + * @type color + * @group control + * @description 常规，常用于边框 + */ + --o-color-control1: rgb(var(--o-mixedgray-3)); + /** + * @name + * @type color + * @group control + * @description 悬浮 + */ + --o-color-control2: rgb(var(--o-mixedgray-4)); + /** + * @name + * @type color + * @group control + * @description 激活 + */ + --o-color-control3: rgb(var(--o-mixedgray-6)); + /** + * @name + * @type color + * @group control + * @description 禁用 + */ + --o-color-control4: rgb(var(--o-mixedgray-5)); + /** + * @name + * @type color + * @group control + * @description 常规-浅，常用于背景 + */ + --o-color-control1-light: rgb(var(--o-mixedgray-3)); + /** + * @name + * @type color + * @group control + * @description 悬浮-浅 + */ + --o-color-control2-light: rgb(var(--o-mixedgray-4)); + /** + * @name + * @type color + * @group control + * @description 激活-浅 + */ + --o-color-control3-light: rgb(var(--o-mixedgray-5)); + /** + * @name + * @type color + * @group control + * @description 禁用-浅 + */ + --o-color-control4-light: rgb(var(--o-mixedgray-2)); + /** + * @name + * @type color + * @group primary + * @description 常规 + */ + --o-color-primary1: rgb(var(--o-blue-6)); + /** + * @name + * @type color + * @group primary + * @description 悬浮 + */ + --o-color-primary2: rgb(var(--o-blue-5)); + /** + * @name + * @type color + * @group primary + * @description 激活 + */ + --o-color-primary3: rgb(var(--o-blue-7)); + /** + * @name + * @type color + * @group primary + * @description 禁用 + */ + --o-color-primary4: rgb(var(--o-blue-3)); + /** + * @name + * @type color + * @group primary + * @description 浅/常规 + */ + --o-color-primary1-light: rgb(var(--o-blue-2)); + /** + * @name + * @type color + * @group primary + * @description 浅/悬浮 + */ + --o-color-primary2-light: rgb(var(--o-blue-3)); + /** + * @name + * @type color + * @group primary + * @description 浅/激活 + */ + --o-color-primary3-light: rgb(var(--o-blue-4)); + /** + * @name + * @type color + * @group primary + * @description 浅/禁用 + */ + --o-color-primary4-light: rgb(var(--o-blue-1)); + /** + * @name + * @type color + * @group success + * @description 常规 + */ + --o-color-success1: rgb(var(--o-green-6)); + /** + * @name + * @type color + * @group success + * @description 悬浮 + */ + --o-color-success2: rgb(var(--o-green-5)); + /** + * @name + * @type color + * @group success + * @description 激活 + */ + --o-color-success3: rgb(var(--o-green-7)); + /** + * @name + * @type color + * @group success + * @description 禁用 + */ + --o-color-success4: rgb(var(--o-green-3)); + /** + * @name + * @type color + * @group success + * @description 浅/常规 + */ + --o-color-success1-light: rgb(var(--o-green-2)); + /** + * @name + * @type color + * @group success + * @description 浅/悬浮 + */ + --o-color-success2-light: rgb(var(--o-green-3)); + /** + * @name + * @type color + * @group success + * @description 浅/激活 + */ + --o-color-success3-light: rgb(var(--o-green-4)); + /** + * @name + * @type color + * @group success + * @description 浅/禁用 + */ + --o-color-success4-light: rgb(var(--o-green-1)); + /** + * @name + * @type color + * @group warning + * @description 常规 + */ + --o-color-warning1: rgb(var(--o-orange-6)); + /** + * @name + * @type color + * @group warning + * @description 悬浮 + */ + --o-color-warning2: rgb(var(--o-orange-5)); + /** + * @name + * @type color + * @group warning + * @description 激活 + */ + --o-color-warning3: rgb(var(--o-orange-7)); + /** + * @name + * @type color + * @group warning + * @description 禁用 + */ + --o-color-warning4: rgb(var(--o-orange-3)); + /** + * @name + * @type color + * @group warning + * @description 浅/常规 + */ + --o-color-warning1-light: rgb(var(--o-orange-2)); + /** + * @name + * @type color + * @group warning + * @description 浅/悬浮 + */ + --o-color-warning2-light: rgb(var(--o-orange-3)); + /** + * @name + * @type color + * @group warning + * @description 浅/激活 + */ + --o-color-warning3-light: rgb(var(--o-orange-4)); + /** + * @name + * @type color + * @group warning + * @description 浅/禁用 + */ + --o-color-warning4-light: rgb(var(--o-orange-1)); + /** + * @name + * @type color + * @group danger + * @description 常规 + */ + --o-color-danger1: rgb(var(--o-red-6)); + /** + * @name + * @type color + * @group danger + * @description 悬浮 + */ + --o-color-danger2: rgb(var(--o-red-5)); + /** + * @name + * @type color + * @group danger + * @description 激活 + */ + --o-color-danger3: rgb(var(--o-red-7)); + /** + * @name + * @type color + * @group danger + * @description 禁用 + */ + --o-color-danger4: rgb(var(--o-red-3)); + /** + * @name + * @type color + * @group danger + * @description 浅/常规 + */ + --o-color-danger1-light: rgb(var(--o-red-2)); + /** + * @name + * @type color + * @group danger + * @description 浅/悬浮 + */ + --o-color-danger2-light: rgb(var(--o-red-3)); + /** + * @name + * @type color + * @group danger + * @description 浅/激活 + */ + --o-color-danger3-light: rgb(var(--o-red-4)); + /** + * @name + * @type color + * @group danger + * @description 浅/禁用 + */ + --o-color-danger4-light: rgb(var(--o-red-1)); + /** + * @name 阴影1 + * @type shadow + * @group shadow + * @description 用于卡片、小弹窗、楼层阴影 + */ + --o-shadow-1: 0 1px 7px rgba(var(--o-gray-10), 0.3); + /** + * @name 阴影2 + * @type shadow + * @group shadow + * @description 用于卡片悬浮阴影 + */ + --o-shadow-2: 0 6px 18px rgba(var(--o-gray-10), 0.42); + /** + * @name 阴影3 + * @type shadow + * @group shadow + * @description 用于提示阴影 + */ + --o-shadow-3: 0 10px 32px rgba(var(--o-gray-10), 0.54); + /** + * @name 间距1 + * @type gap + * @group gap + * @description 用于组件之间的间距1 + */ + --o-gap-1: 4px; + /** + * @name 间距2 + * @type gap + * @group gap + * @description 用于组件之间的间距2 + */ + --o-gap-2: 8px; + /** + * @name 间距3 + * @type gap + * @group gap + * @description 用于组件之间的间距3 + */ + --o-gap-3: 12px; + /** + * @name 间距4 + * @type gap + * @group gap + * @description 用于组件之间的间距4 + */ + --o-gap-4: 16px; + /** + * @name 间距5 + * @type gap + * @group gap + * @description 用于组件之间的间距5 + */ + --o-gap-5: 24px; + /** + * @name 间距6 + * @type gap + * @group gap + * @description 用于组件之间的间距6 + */ + --o-gap-6: 32px; + /** + * @name 间距7 + * @type gap + * @group gap + * @description 用于组件之间的间距7 + */ + --o-gap-7: 40px; + /** + * @name 间距8 + * @type gap + * @group gap + * @description 用于组件之间的间距8 + */ + --o-gap-8: 64px; + /** + * @name 小尺寸 + * @type size + * @group size + * @description 小尺寸 + */ + --o-size-xxs: 12px; + /** + * @name 小尺寸 + * @type size + * @group size + * @description 小尺寸 + */ + --o-size-xs: 18px; + /** + * @name 小尺寸 + * @type size + * @group size + * @description 小尺寸 + */ + --o-size-s: 24px; + /** + * @name 中尺寸 + * @type size + * @group size + * @description 尺寸 + */ + --o-size-m: 32px; + /** + * @name 大尺寸 + * @type size + * @group size + * @description 尺寸 + */ + --o-size-l: 40px; + /** + * @name 大尺寸 + * @type size + * @group size + * @description 尺寸 + */ + --o-size-xl: 48px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸 + */ + --o-icon_size-xxs: 12px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸 + */ + --o-icon_size-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸 + */ + --o-icon_size-s: 24px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 尺寸 + */ + --o-icon_size-m: 32px; + /** + * @name 大尺寸图标 + * @type size + * @group icon_size + * @description 尺寸 + */ + --o-icon_size-l: 48px; + /** + * @name 一级数据展示 + * @type font + * @group font_size + * @description 一级数据展示 + */ + --o-font_size-display1: 64px; + /** + * @name 二级数据展示 + * @type font + * @group font_size + * @description 二级数据展示 + */ + --o-font_size-display2: 54px; + /** + * @name 三级数据展示 + * @type font + * @group font_size + * @description 三级数据展示 + */ + --o-font_size-display3: 36px; + /** + * @name 四级数据展示 + * @type font + * @group font_size + * @description 四级数据展示 + */ + --o-font_size-display4: 28px; + /** + * @name 一级标题 + * @type font + * @group font_size + * @description 一级标题 + */ + --o-font_size-h1: 24px; + /** + * @name 二级标题 + * @type font + * @group font_size + * @description 二级标题 + */ + --o-font_size-h2: 20px; + /** + * @name 三级标题 + * @type font + * @group font_size + * @description 三级标题 + */ + --o-font_size-h3: 18px; + /** + * @name 常规正文 + * @type font + * @group font_size + * @description 常规正文 + */ + --o-font_size-text1: 14px; + /** + * @name 大号正文 + * @type font + * @group font_size + * @description 大号正文 + */ + --o-font_size-text2: 16px; + /** + * @name 提示文本1 + * @type font + * @group font_size + * @description 提示文本1 + */ + --o-font_size-tip1: 12px; + /** + * @name 提示文本2 + * @type font + * @group font_size + * @description 提示文本2 + */ + --o-font_size-tip2: 10px; + /** + * @name 一级数据展示 + * @type font + * @group line_height + * @description 一级数据展示 + */ + --o-line_height-display1: 84px; + /** + * @name 二级数据展示 + * @type font + * @group line_height + * @description 二级数据展示 + */ + --o-line_height-display2: 76px; + /** + * @name 三级数据展示 + * @type font + * @group line_height + * @description 三级数据展示 + */ + --o-line_height-display3: 48px; + /** + * @name 四级数据展示 + * @type font + * @group line_height + * @description 四级数据展示 + */ + --o-line_height-display4: 36px; + /** + * @name 一级标题 + * @type font + * @group line_height + * @description 一级标题 + */ + --o-line_height-h1: 32px; + /** + * @name 二级标题 + * @type font + * @group line_height + * @description 二级标题 + */ + --o-line_height-h2: 28px; + /** + * @name 三级标题 + * @type font + * @group line_height + * @description 三级标题 + */ + --o-line_height-h3: 26px; + /** + * @name 常规正文 + * @type font + * @group line_height + * @description 常规正文 + */ + --o-line_height-text1: 22px; + /** + * @name 大号正文 + * @type font + * @group line_height + * @description 大号正文 + */ + --o-line_height-text2: 24px; + /** + * @name 提示文本1 + * @type font + * @group line_height + * @description 提示文本1 + */ + --o-line_height-tip1: 18px; + /** + * @name 提示文本2 + * @type font + * @group line_height + * @description 提示文本2 + */ + --o-line_height-tip2: 14px; + /** + * @name 小尺寸圆角 + * @type size + * @group radius + * @description 小尺寸圆角 + */ + --o-radius-s: 2px; + /** + * @name 中尺寸圆角 + * @type size + * @group radius + * @description 中尺寸圆角 + */ + --o-radius-m: 4px; + /** + * @name 大尺寸圆角 + * @type size + * @group radius + * @description 大尺寸圆角 + */ + --o-radius-l: 8px; + /** + * @name 小尺寸控件圆角 + * @type size + * @group radius + * @description 小尺寸控件圆角 + */ + --o-radius-control-s: var(--o-radius-s); + /** + * @name 中尺寸控件圆角 + * @type size + * @group radius + * @description 中尺寸控件圆角 + */ + --o-radius-control-m: var(--o-radius-m); + /** + * @name 大尺寸控件圆角 + * @type size + * @group radius + * @description 大尺寸控件圆角 + */ + --o-radius-control-l: var(--o-radius-l); + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于退出屏幕的动画 + */ + --o-duration-s: 200ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为standard-in时进入屏幕的动画 + */ + --o-duration-m1: 250ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为standard时开始、结束的动画 + */ + --o-duration-m2: 300ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为emphasized-in时进入屏幕的动画 + */ + --o-duration-m3: 400ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为emphasized时开始、结束的动画 + */ + --o-duration-l: 500ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为emphasized时，轮播切换动画 + */ + --o-duration-xl: 1000ms; + /** + * @name 线性动画曲线 + * @type animation + * @group easing + * @description 线性曲线 + */ + --o-easing-linear: cubic-bezier(0, 0, 1, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于组件 + */ + --o-easing-standard: cubic-bezier(0.2, 0, 0, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于组件 + */ + --o-easing-standard-in: cubic-bezier(0, 0, 0, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于组件 + */ + --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于大卡片、场景切换 + */ + --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于大卡片、场景切换 + */ + --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于大卡片、场景切换 + */ + --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1); +} \ No newline at end of file diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css new file mode 100644 index 0000000000000000000000000000000000000000..f1462de13a1b34ca72f7c2c04d621631e4d7f1d8 --- /dev/null +++ b/packages/opendesign/src/components/style/default-light.token.css @@ -0,0 +1,1334 @@ +/* theme: default|light */ +:root, +[data-o-theme="light"] { + /** + * @name + * @type palette + * @group base + * @description + */ + --o-color-white: 255, 255, 255; + /** + * @name + * @type palette + * @group base + * @description + */ + --o-color-black: 0, 0, 0; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-1: 232, 243, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-2: 190, 218, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-3: 148, 191, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-4: 106, 161, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-5: 64, 128, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-6: 22, 93, 255; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-7: 14, 66, 210; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-8: 7, 44, 166; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-9: 3, 26, 121; + /** + * @name + * @type palette + * @group blue + * @description + */ + --o-blue-10: 0, 13, 77; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-1: 254, 255, 232; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-2: 254, 254, 190; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-3: 253, 250, 148; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-4: 252, 242, 107; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-5: 251, 232, 66; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-6: 250, 220, 25; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-7: 207, 175, 15; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-8: 163, 132, 8; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-9: 120, 93, 3; + /** + * @name + * @type palette + * @group yellow + * @description + */ + --o-yellow-10: 77, 56, 0; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-1: 232, 255, 234; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-2: 175, 240, 181; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-3: 123, 225, 136; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-4: 76, 210, 99; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-5: 35, 195, 67; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-6: 0, 180, 42; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-7: 0, 154, 41; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-8: 0, 128, 38; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-9: 0, 102, 34; + /** + * @name + * @type palette + * @group green + * @description + */ + --o-green-10: 0, 77, 28; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-1: 255, 247, 232; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-2: 255, 228, 186; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-3: 255, 207, 139; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-4: 255, 182, 93; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-5: 255, 154, 46; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-6: 255, 125, 0; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-7: 210, 95, 0; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-8: 166, 69, 0; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-9: 121, 46, 0; + /** + * @name + * @type palette + * @group orange + * @description + */ + --o-orange-10: 77, 27, 0; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-1: 255, 236, 232; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-2: 253, 205, 197; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-3: 251, 172, 163; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-4: 249, 137, 129; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-5: 247, 101, 96; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-6: 245, 63, 63; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-7: 203, 39, 45; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-8: 161, 21, 30; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-9: 119, 8, 19; + /** + * @name + * @type palette + * @group red + * @description + */ + --o-red-10: 77, 0, 10; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-1: 255, 255, 255; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-2: 238, 238, 238; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-3: 221, 221, 221; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-4: 198, 198, 198; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-5: 139, 139, 139; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-6: 119, 119, 119; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-7: 94, 94, 94; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-8: 75, 75, 75; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-9: 44, 44, 44; + /** + * @name + * @type palette + * @group gray + * @description + */ + --o-gray-10: 0, 0, 0; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-1: 247, 248, 250; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-2: 242, 243, 245; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-3: 229, 230, 235; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-4: 201, 205, 212; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-5: 169, 174, 184; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-6: 134, 144, 156; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-7: 107, 119, 133; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-8: 78, 89, 105; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-9: 39, 46, 59; + /** + * @name + * @type palette + * @group mixedgray + * @description + */ + --o-mixedgray-10: 29, 33, 41; + /** + * @name + * @type color + * @group info + * @description 一级/强调/标题 + */ + --o-color-info1: rgb(var(--o-gray-10)); + /** + * @name + * @type color + * @group info + * @description 二级/次强调/正文 + */ + --o-color-info2: rgb(var(--o-gray-8)); + /** + * @name + * @type color + * @group info + * @description 三级/辅助信息 + */ + --o-color-info3: rgb(var(--o-gray-6)); + /** + * @name + * @type color + * @group info + * @description 置灰/禁用 + */ + --o-color-info4: rgb(var(--o-gray-4)); + /** + * @name + * @type color + * @group info + * @description 一级/次强调/正文反色 + */ + --o-color-info1-inverse: rgb(var(--o-gray-1)); + /** + * @name + * @type color + * @group info + * @description 二级/辅助信息反色 + */ + --o-color-info2-inverse: rgb(var(--o-gray-3)); + /** + * @name + * @type color + * @group info + * @description 三级/辅助信息反色 + */ + --o-color-info3-inverse: rgb(var(--o-gray-5)); + /** + * @name + * @type color + * @group info + * @description 置灰/禁用反色 + */ + --o-color-info4-inverse: rgb(var(--o-gray-7)); + /** + * @name + * @type color + * @group mask + * @description 全局遮罩 + */ + --o-color-mask1: rgba(var(--o-gray-10), .2); + /** + * @name + * @type color + * @group mask + * @description 局部遮罩 + */ + --o-color-mask2: rgba(var(--o-gray-10), .1); + /** + * @name + * @type color + * @group fill + * @description 一级填充/页面背景 + */ + --o-color-fill1: rgb(var(--o-mixedgray-1)); + /** + * @name + * @type color + * @group fill + * @description 二级填充/区块、卡片 + */ + --o-color-fill2: rgb(var(--o-gray-1)); + /** + * @name + * @type color + * @group fill + * @description 三级填充/卡片 + */ + --o-color-fill3: rgb(var(--o-mixedgray-3)); + /** + * @name + * @type color + * @group fill + * @description 四级填充/禁用 + */ + --o-color-fill4: rgb(var(--o-mixedgray-4)); + /** + * @name + * @type color + * @group control + * @description 很浅背景 + */ + --o-color-control-light: rgb(var(--o-gray-1)); + /** + * @name + * @type color + * @group control + * @description 常规，常用于边框 + */ + --o-color-control1: rgb(var(--o-mixedgray-3)); + /** + * @name + * @type color + * @group control + * @description 悬浮 + */ + --o-color-control2: rgb(var(--o-mixedgray-4)); + /** + * @name + * @type color + * @group control + * @description 激活 + */ + --o-color-control3: rgb(var(--o-mixedgray-6)); + /** + * @name + * @type color + * @group control + * @description 禁用 + */ + --o-color-control4: rgb(var(--o-mixedgray-5)); + /** + * @name + * @type color + * @group control + * @description 常规-浅，常用于背景 + */ + --o-color-control1-light: rgb(var(--o-mixedgray-3)); + /** + * @name + * @type color + * @group control + * @description 悬浮-浅 + */ + --o-color-control2-light: rgb(var(--o-mixedgray-4)); + /** + * @name + * @type color + * @group control + * @description 激活-浅 + */ + --o-color-control3-light: rgb(var(--o-mixedgray-5)); + /** + * @name + * @type color + * @group control + * @description 禁用-浅 + */ + --o-color-control4-light: rgb(var(--o-mixedgray-2)); + /** + * @name + * @type color + * @group primary + * @description 常规 + */ + --o-color-primary1: rgb(var(--o-blue-6)); + /** + * @name + * @type color + * @group primary + * @description 悬浮 + */ + --o-color-primary2: rgb(var(--o-blue-5)); + /** + * @name + * @type color + * @group primary + * @description 激活 + */ + --o-color-primary3: rgb(var(--o-blue-7)); + /** + * @name + * @type color + * @group primary + * @description 禁用 + */ + --o-color-primary4: rgb(var(--o-blue-3)); + /** + * @name + * @type color + * @group primary + * @description 浅/常规 + */ + --o-color-primary1-light: rgb(var(--o-blue-2)); + /** + * @name + * @type color + * @group primary + * @description 浅/悬浮 + */ + --o-color-primary2-light: rgb(var(--o-blue-3)); + /** + * @name + * @type color + * @group primary + * @description 浅/激活 + */ + --o-color-primary3-light: rgb(var(--o-blue-4)); + /** + * @name + * @type color + * @group primary + * @description 浅/禁用 + */ + --o-color-primary4-light: rgb(var(--o-blue-1)); + /** + * @name + * @type color + * @group success + * @description 常规 + */ + --o-color-success1: rgb(var(--o-green-6)); + /** + * @name + * @type color + * @group success + * @description 悬浮 + */ + --o-color-success2: rgb(var(--o-green-5)); + /** + * @name + * @type color + * @group success + * @description 激活 + */ + --o-color-success3: rgb(var(--o-green-7)); + /** + * @name + * @type color + * @group success + * @description 禁用 + */ + --o-color-success4: rgb(var(--o-green-3)); + /** + * @name + * @type color + * @group success + * @description 浅/常规 + */ + --o-color-success1-light: rgb(var(--o-green-2)); + /** + * @name + * @type color + * @group success + * @description 浅/悬浮 + */ + --o-color-success2-light: rgb(var(--o-green-3)); + /** + * @name + * @type color + * @group success + * @description 浅/激活 + */ + --o-color-success3-light: rgb(var(--o-green-4)); + /** + * @name + * @type color + * @group success + * @description 浅/禁用 + */ + --o-color-success4-light: rgb(var(--o-green-1)); + /** + * @name + * @type color + * @group warning + * @description 常规 + */ + --o-color-warning1: rgb(var(--o-orange-6)); + /** + * @name + * @type color + * @group warning + * @description 悬浮 + */ + --o-color-warning2: rgb(var(--o-orange-5)); + /** + * @name + * @type color + * @group warning + * @description 激活 + */ + --o-color-warning3: rgb(var(--o-orange-7)); + /** + * @name + * @type color + * @group warning + * @description 禁用 + */ + --o-color-warning4: rgb(var(--o-orange-3)); + /** + * @name + * @type color + * @group warning + * @description 浅/常规 + */ + --o-color-warning1-light: rgb(var(--o-orange-2)); + /** + * @name + * @type color + * @group warning + * @description 浅/悬浮 + */ + --o-color-warning2-light: rgb(var(--o-orange-3)); + /** + * @name + * @type color + * @group warning + * @description 浅/激活 + */ + --o-color-warning3-light: rgb(var(--o-orange-4)); + /** + * @name + * @type color + * @group warning + * @description 浅/禁用 + */ + --o-color-warning4-light: rgb(var(--o-orange-1)); + /** + * @name + * @type color + * @group danger + * @description 常规 + */ + --o-color-danger1: rgb(var(--o-red-6)); + /** + * @name + * @type color + * @group danger + * @description 悬浮 + */ + --o-color-danger2: rgb(var(--o-red-5)); + /** + * @name + * @type color + * @group danger + * @description 激活 + */ + --o-color-danger3: rgb(var(--o-red-7)); + /** + * @name + * @type color + * @group danger + * @description 禁用 + */ + --o-color-danger4: rgb(var(--o-red-3)); + /** + * @name + * @type color + * @group danger + * @description 浅/常规 + */ + --o-color-danger1-light: rgb(var(--o-red-2)); + /** + * @name + * @type color + * @group danger + * @description 浅/悬浮 + */ + --o-color-danger2-light: rgb(var(--o-red-3)); + /** + * @name + * @type color + * @group danger + * @description 浅/激活 + */ + --o-color-danger3-light: rgb(var(--o-red-4)); + /** + * @name + * @type color + * @group danger + * @description 浅/禁用 + */ + --o-color-danger4-light: rgb(var(--o-red-1)); + /** + * @name 阴影1 + * @type shadow + * @group shadow + * @description 用于卡片、小弹窗、楼层阴影 + */ + --o-shadow-1: 0 1px 5px rgba(var(--o-gray-10), 0.1); + /** + * @name 阴影2 + * @type shadow + * @group shadow + * @description 用于卡片悬浮阴影 + */ + --o-shadow-2: 0 6px 18px rgba(var(--o-gray-10), 0.14); + /** + * @name 阴影3 + * @type shadow + * @group shadow + * @description 用于提示阴影 + */ + --o-shadow-3: 0 10px 32px rgba(var(--o-gray-10), 0.18); + /** + * @name 间距1 + * @type gap + * @group gap + * @description 用于组件之间的间距1 + */ + --o-gap-1: 4px; + /** + * @name 间距2 + * @type gap + * @group gap + * @description 用于组件之间的间距2 + */ + --o-gap-2: 8px; + /** + * @name 间距3 + * @type gap + * @group gap + * @description 用于组件之间的间距3 + */ + --o-gap-3: 12px; + /** + * @name 间距4 + * @type gap + * @group gap + * @description 用于组件之间的间距4 + */ + --o-gap-4: 16px; + /** + * @name 间距5 + * @type gap + * @group gap + * @description 用于组件之间的间距5 + */ + --o-gap-5: 24px; + /** + * @name 间距6 + * @type gap + * @group gap + * @description 用于组件之间的间距6 + */ + --o-gap-6: 32px; + /** + * @name 间距7 + * @type gap + * @group gap + * @description 用于组件之间的间距7 + */ + --o-gap-7: 40px; + /** + * @name 间距8 + * @type gap + * @group gap + * @description 用于组件之间的间距8 + */ + --o-gap-8: 64px; + /** + * @name 小尺寸 + * @type size + * @group size + * @description 小尺寸 + */ + --o-size-xxs: 12px; + /** + * @name 小尺寸 + * @type size + * @group size + * @description 小尺寸 + */ + --o-size-xs: 18px; + /** + * @name 小尺寸 + * @type size + * @group size + * @description 小尺寸 + */ + --o-size-s: 24px; + /** + * @name 中尺寸 + * @type size + * @group size + * @description 尺寸 + */ + --o-size-m: 32px; + /** + * @name 大尺寸 + * @type size + * @group size + * @description 尺寸 + */ + --o-size-l: 40px; + /** + * @name 大尺寸 + * @type size + * @group size + * @description 尺寸 + */ + --o-size-xl: 48px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸 + */ + --o-icon_size-xxs: 12px; + /** + * @name 超小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸 + */ + --o-icon_size-xs: 16px; + /** + * @name 小尺寸图标 + * @type size + * @group icon_size + * @description 小尺寸 + */ + --o-icon_size-s: 24px; + /** + * @name 中尺寸图标 + * @type size + * @group icon_size + * @description 尺寸 + */ + --o-icon_size-m: 32px; + /** + * @name 大尺寸图标 + * @type size + * @group icon_size + * @description 尺寸 + */ + --o-icon_size-l: 48px; + /** + * @name 一级数据展示 + * @type font + * @group font_size + * @description 一级数据展示 + */ + --o-font_size-display1: 64px; + /** + * @name 二级数据展示 + * @type font + * @group font_size + * @description 二级数据展示 + */ + --o-font_size-display2: 54px; + /** + * @name 三级数据展示 + * @type font + * @group font_size + * @description 三级数据展示 + */ + --o-font_size-display3: 36px; + /** + * @name 四级数据展示 + * @type font + * @group font_size + * @description 四级数据展示 + */ + --o-font_size-display4: 28px; + /** + * @name 一级标题 + * @type font + * @group font_size + * @description 一级标题 + */ + --o-font_size-h1: 24px; + /** + * @name 二级标题 + * @type font + * @group font_size + * @description 二级标题 + */ + --o-font_size-h2: 20px; + /** + * @name 三级标题 + * @type font + * @group font_size + * @description 三级标题 + */ + --o-font_size-h3: 18px; + /** + * @name 常规正文 + * @type font + * @group font_size + * @description 常规正文 + */ + --o-font_size-text1: 14px; + /** + * @name 大号正文 + * @type font + * @group font_size + * @description 大号正文 + */ + --o-font_size-text2: 16px; + /** + * @name 提示文本1 + * @type font + * @group font_size + * @description 提示文本1 + */ + --o-font_size-tip1: 12px; + /** + * @name 提示文本2 + * @type font + * @group font_size + * @description 提示文本2 + */ + --o-font_size-tip2: 10px; + /** + * @name 一级数据展示 + * @type font + * @group line_height + * @description 一级数据展示 + */ + --o-line_height-display1: 84px; + /** + * @name 二级数据展示 + * @type font + * @group line_height + * @description 二级数据展示 + */ + --o-line_height-display2: 76px; + /** + * @name 三级数据展示 + * @type font + * @group line_height + * @description 三级数据展示 + */ + --o-line_height-display3: 48px; + /** + * @name 四级数据展示 + * @type font + * @group line_height + * @description 四级数据展示 + */ + --o-line_height-display4: 36px; + /** + * @name 一级标题 + * @type font + * @group line_height + * @description 一级标题 + */ + --o-line_height-h1: 32px; + /** + * @name 二级标题 + * @type font + * @group line_height + * @description 二级标题 + */ + --o-line_height-h2: 28px; + /** + * @name 三级标题 + * @type font + * @group line_height + * @description 三级标题 + */ + --o-line_height-h3: 26px; + /** + * @name 常规正文 + * @type font + * @group line_height + * @description 常规正文 + */ + --o-line_height-text1: 22px; + /** + * @name 大号正文 + * @type font + * @group line_height + * @description 大号正文 + */ + --o-line_height-text2: 24px; + /** + * @name 提示文本1 + * @type font + * @group line_height + * @description 提示文本1 + */ + --o-line_height-tip1: 18px; + /** + * @name 提示文本2 + * @type font + * @group line_height + * @description 提示文本2 + */ + --o-line_height-tip2: 14px; + /** + * @name 小尺寸圆角 + * @type size + * @group radius + * @description 小尺寸圆角 + */ + --o-radius-s: 2px; + /** + * @name 中尺寸圆角 + * @type size + * @group radius + * @description 中尺寸圆角 + */ + --o-radius-m: 4px; + /** + * @name 大尺寸圆角 + * @type size + * @group radius + * @description 大尺寸圆角 + */ + --o-radius-l: 8px; + /** + * @name 小尺寸控件圆角 + * @type size + * @group radius + * @description 小尺寸控件圆角 + */ + --o-radius-control-s: var(--o-radius-s); + /** + * @name 中尺寸控件圆角 + * @type size + * @group radius + * @description 中尺寸控件圆角 + */ + --o-radius-control-m: var(--o-radius-m); + /** + * @name 大尺寸控件圆角 + * @type size + * @group radius + * @description 大尺寸控件圆角 + */ + --o-radius-control-l: var(--o-radius-l); + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于退出屏幕的动画 + */ + --o-duration-s: 200ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为standard-in时进入屏幕的动画 + */ + --o-duration-m1: 250ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为standard时开始、结束的动画 + */ + --o-duration-m2: 300ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为emphasized-in时进入屏幕的动画 + */ + --o-duration-m3: 400ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为emphasized时开始、结束的动画 + */ + --o-duration-l: 500ms; + /** + * @name 持续时间 + * @type animation + * @group duration + * @description 用于当曲线为emphasized时，轮播切换动画 + */ + --o-duration-xl: 1000ms; + /** + * @name 线性动画曲线 + * @type animation + * @group easing + * @description 线性曲线 + */ + --o-easing-linear: cubic-bezier(0, 0, 1, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于组件 + */ + --o-easing-standard: cubic-bezier(0.2, 0, 0, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于组件 + */ + --o-easing-standard-in: cubic-bezier(0, 0, 0, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于组件 + */ + --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于大卡片、场景切换 + */ + --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于大卡片、场景切换 + */ + --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15); + /** + * @name 动画曲线 + * @type animation + * @group easing + * @description 用于大卡片、场景切换 + */ + --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1); +} \ No newline at end of file diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..8fa3561de81283c5e417b554db019b282cfc7ec4 --- /dev/null +++ b/packages/opendesign/src/components/style/index.scss @@ -0,0 +1,32 @@ +@import './animation.scss'; + +[class^='o-'], +[class^='o-'] * { + box-sizing: border-box; +} + +:root { + --o-z-index-base: 100; +} + +// icons +.o-icon { + --icon-g1: var(--o-color-text1); + --icon-g2: var(--o-color-primary1); +} + +.o-icon { + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -0.2em; + color: inherit; + font-style: normal; + outline: none; + &.type-stroke { + stroke: currentColor; + } + &.type-fill { + fill: currentColor; + } +} diff --git a/packages/opendesign/src/components/style/index.ts b/packages/opendesign/src/components/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e --- /dev/null +++ b/packages/opendesign/src/components/style/index.ts @@ -0,0 +1 @@ +import './index.scss'; diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue new file mode 100644 index 0000000000000000000000000000000000000000..4cdd01388eb092800522f6288e84d83c0d518b33 --- /dev/null +++ b/packages/opendesign/src/components/switch/OSwitch.vue @@ -0,0 +1,95 @@ + + + diff --git a/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue new file mode 100644 index 0000000000000000000000000000000000000000..fe679a0fd18cec2893a19bdf37bbc29b412ddbc2 --- /dev/null +++ b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchBasic.vue b/packages/opendesign/src/components/switch/__demo__/SwitchBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..7c8a3cd9c22a7ce53a2561a95975308b0525653c --- /dev/null +++ b/packages/opendesign/src/components/switch/__demo__/SwitchBasic.vue @@ -0,0 +1,19 @@ + + + diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue b/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue new file mode 100644 index 0000000000000000000000000000000000000000..68ed61f266fc49671579880232998dee2d689dad --- /dev/null +++ b/packages/opendesign/src/components/switch/__demo__/SwitchBeforeChange.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue b/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue new file mode 100644 index 0000000000000000000000000000000000000000..3a34a59775826af8cf7819222f14464e9abd7b5d --- /dev/null +++ b/packages/opendesign/src/components/switch/__demo__/SwitchDisabledAndLoading.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue b/packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue new file mode 100644 index 0000000000000000000000000000000000000000..9fb90f48776e06d2d21c667c6ee366914ca03b21 --- /dev/null +++ b/packages/opendesign/src/components/switch/__demo__/SwitchEvents.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue b/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue new file mode 100644 index 0000000000000000000000000000000000000000..b66d62993beffe6f0f556862d80d125a35485c08 --- /dev/null +++ b/packages/opendesign/src/components/switch/__demo__/SwitchRound.vue @@ -0,0 +1,39 @@ + + + diff --git a/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue new file mode 100644 index 0000000000000000000000000000000000000000..4b144b7f26a3a405da779b8312fa6b810d89f3d6 --- /dev/null +++ b/packages/opendesign/src/components/switch/__demo__/SwitchSlots.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/opendesign/src/components/switch/index.ts b/packages/opendesign/src/components/switch/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..158930781399c5da87147662288f62c6b945ef4a --- /dev/null +++ b/packages/opendesign/src/components/switch/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _OSWitch from './OSwitch.vue'; + +const OSWitch = Object.assign(_OSWitch, { + install(app: App) { + app.component(_OSWitch.name, _OSWitch); + }, +}); + +export * from './types'; + +export { OSWitch }; diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..9430a1081a0164784dda86d4d3a4850f00edfd5c --- /dev/null +++ b/packages/opendesign/src/components/switch/style/index.scss @@ -0,0 +1,86 @@ +@use './var.scss'; + +.o-switch { + display: inline-block; + height: var(--switch-size); + font-size: var(--switch-text-size); + line-height: var(--switch-text-height); + color: var(--switch-color); + background-color: var(--switch-bg-color); + border-radius: var(--switch-radius); + transition: background-color var(--o-duration-s) var(--o-easing-standard); + cursor: pointer; +} + +.o-switch-disabled.o-switch-checked, +.o-switch-loading.o-switch-checked { + background-color: var(--switch-bg-color-checked-disabled); + .o-switch-handler { + .o-switch-icon-loading { + color: var(--switch-bg-color-checked-disabled); + } + } +} + +.o-switch-wrap { + position: relative; + height: 100%; +} + +.o-switch-handler { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: var(--switch-handler-size); + height: var(--switch-handler-size); + border-radius: calc(var(--switch-radius) - 2px); + background-color: var(--switch-handler-bg-color); + transition: left var(--o-duration-s) var(--o-easing-standard); + left: var(--switch-handler-offset); + + .o-switch-icon-loading { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: var(--switch-bg-color); + } +} + +.o-switch-content { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding-left: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-content-padding)); + padding-right: var(--switch-content-padding); +} + +.o-switch-checked { + background-color: var(--switch-bg-color-checked); + + .o-switch-handler { + left: calc(100% - var(--switch-handler-offset) - var(--switch-handler-size)); + } + + .o-switch-content { + padding-left: var(--switch-content-padding); + padding-right: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-content-padding)); + } +} + +.o-switch-disabled, +.o-switch-loading { + cursor: not-allowed; + background-color: var(--switch-bg-color-disabled); +} + +.o-switch-medium { + min-width: 40px; +} + +.o-switch-small { + min-width: 40px; +} diff --git a/packages/opendesign/src/components/switch/style/index.ts b/packages/opendesign/src/components/switch/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/switch/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/switch/style/var.scss b/packages/opendesign/src/components/switch/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..7542032882d8d0f8b75e5dca8f543b243a10aa3e --- /dev/null +++ b/packages/opendesign/src/components/switch/style/var.scss @@ -0,0 +1,36 @@ +.o-switch { + --switch-color: var(--o-color-info1-inverse); + + --switch-bg-color: var(--o-color-control1); + --switch-bg-color-disabled: var(--o-color-control4); + --switch-bg-color-checked: var(--o-color-primary1); + --switch-bg-color-checked-disabled: var(--o-color-primary4); + + --switch-handler-bg-color: rgb(var(--o-color-white)); +} + +.o-switch-medium { + --switch-size: var(--o-size-xs); + --switch-radius: var(--o-radius-control-s); + --switch-text-size: var(--o-font_size-tip1); + --switch-text-height: var(--o-line_height-tip1); + --switch-handler-size: var(--o-size-xxs); + --switch-content-padding: 6px; + --switch-handler-offset: var(--o-gap-1); +} + +.o-switch-small { + --switch-size: var(--o-size-xs); + --switch-radius: var(--o-radius-control-s); + --switch-text-size: var(--o-font_size-tip1); + --switch-text-height: var(--o-line_height-tip1); + --switch-handler-size: var(--o-size-xxs); + --switch-content-padding: 6px; + --switch-handler-offset: 4px; + scale: 0.8; +} + +.o-switch-round-pill { + --switch-radius: var(--o-size-l); + --switch-handler-radius: var(--o-size-l); +} diff --git a/packages/opendesign/src/components/switch/types.ts b/packages/opendesign/src/components/switch/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..7ef866c89f3f103410129e85284265dda1348639 --- /dev/null +++ b/packages/opendesign/src/components/switch/types.ts @@ -0,0 +1,70 @@ +import type { RoundT } from '../_shared/global'; +import type { ExtractPropTypes, PropType } from 'vue'; + +export type SwitchSizeT = 'medium' | 'small'; + +export const switchProps = { + /** + * 双向绑定值 + */ + modelValue: { + type: [String, Number, Boolean], + }, + /** + * 非受控状态时，默认是否选中 + */ + defaultChecked: { + type: Boolean, + default: false, + }, + /** + * 选中状态对应值 + */ + checkedValue: { + type: [String, Number, Boolean], + default: true, + }, + /** + * 未选中状态对应值 + */ + uncheckedValue: { + type: [String, Number, Boolean], + default: false, + }, + /** + * 开关尺寸 + * 'medium' | 'small' + */ + size: { + type: String as PropType, + }, + /** + * 圆角值 + */ + round: { + type: String as PropType, + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + default: false, + }, + /** + * 是否加载中 + */ + loading: { + type: Boolean, + default: false, + }, + /** + * + * 状态改变前的钩子函数 + */ + beforeChange: { + type: Function as PropType<(val: boolean) => Promise | boolean>, + }, +}; + +export type SwitchPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/table/OTable.vue b/packages/opendesign/src/components/table/OTable.vue new file mode 100644 index 0000000000000000000000000000000000000000..2eb01486e7b6882bd102fca5b2a76c5cdbae2fc1 --- /dev/null +++ b/packages/opendesign/src/components/table/OTable.vue @@ -0,0 +1,68 @@ + + diff --git a/packages/opendesign/src/components/table/__demo__/IndexTable.vue b/packages/opendesign/src/components/table/__demo__/IndexTable.vue new file mode 100644 index 0000000000000000000000000000000000000000..068d8b5fa796d00d6050fb8410ebb1f971d72b42 --- /dev/null +++ b/packages/opendesign/src/components/table/__demo__/IndexTable.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/opendesign/src/components/table/__demo__/TableBasic.vue b/packages/opendesign/src/components/table/__demo__/TableBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..3d59812d322133f0e3aee242527c875f701825df --- /dev/null +++ b/packages/opendesign/src/components/table/__demo__/TableBasic.vue @@ -0,0 +1,55 @@ + + + diff --git a/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue b/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue new file mode 100644 index 0000000000000000000000000000000000000000..528ead8130f91bd00ba813859a91e1a47706b9f8 --- /dev/null +++ b/packages/opendesign/src/components/table/__demo__/TableDiyHead.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/opendesign/src/components/table/__demo__/TablePagination.vue b/packages/opendesign/src/components/table/__demo__/TablePagination.vue new file mode 100644 index 0000000000000000000000000000000000000000..76b9f715da71f0dbfd0f8b4f7542df033e0b052f --- /dev/null +++ b/packages/opendesign/src/components/table/__demo__/TablePagination.vue @@ -0,0 +1,49 @@ + + + diff --git a/packages/opendesign/src/components/table/__demo__/TableSpan.vue b/packages/opendesign/src/components/table/__demo__/TableSpan.vue new file mode 100644 index 0000000000000000000000000000000000000000..2a22c4cb7d6a7b61ae006e876c62bc9826a74ecb --- /dev/null +++ b/packages/opendesign/src/components/table/__demo__/TableSpan.vue @@ -0,0 +1,52 @@ + + + diff --git a/packages/opendesign/src/components/table/__demo__/data.ts b/packages/opendesign/src/components/table/__demo__/data.ts new file mode 100644 index 0000000000000000000000000000000000000000..c982081dfef115d0f333d9988c0118670c2d4dd2 --- /dev/null +++ b/packages/opendesign/src/components/table/__demo__/data.ts @@ -0,0 +1,32 @@ +function getItem(index: number) { + return { + no: index, + key: index, + name: `William Smith ${index}`, + salary: 27000 + index, + address: `${index} Park Road, London`, + email: `william.smith${index}@example.com`, + other: `other info ${index}`, + }; +} + +export function getTableData(total: number, idx = 0) { + const rlt = []; + for (let i = idx; i <= idx + total; i++) { + rlt.push(getItem(i + 1)); + } + return rlt; +} + +export function requestTableData(cursor: number, length: number): Promise<{ total: number, list: any[] }> { + const total = 100; + return new Promise((resolve) => { + const list = getTableData(length, cursor); + setTimeout(() => { + resolve({ + total, + list + }); + }, 1000); + }); +} \ No newline at end of file diff --git a/packages/opendesign/src/components/table/index.ts b/packages/opendesign/src/components/table/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..3a0d0b313d1d3ae6e9c4bd07127ca76191f65958 --- /dev/null +++ b/packages/opendesign/src/components/table/index.ts @@ -0,0 +1,12 @@ +import _OTable from './OTable.vue'; +import type { App } from 'vue'; + +const OTable = Object.assign(_OTable, { + install(app: App) { + app.component(_OTable.name, _OTable); + }, +}); + +export * from './types'; + +export { OTable }; diff --git a/packages/opendesign/src/components/table/style/index.scss b/packages/opendesign/src/components/table/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..398d3f3917350b364b90a4dfcc693d15562300ad --- /dev/null +++ b/packages/opendesign/src/components/table/style/index.scss @@ -0,0 +1,89 @@ +@use './var.scss'; + +.o-table { + position: relative; + table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + } + th { + text-align: left; + font-weight: normal; + } + + th, + td { + padding: var(--table-cell-padding); + font-size: var(--table-text-size); + line-height: var(--table-text-height); + } + + th { + background-color: var(--table-head-bg); + } + + tbody tr:hover { + background-color: var(--table-row-hover); + } +} + +// border +.o-table-border-all, +.o-table-border-frame { + border: var(--table-border); + tr:last-child { + td { + border-bottom: none; + } + } +} +.o-table-border-all, +.o-table-border-row { + th, + td { + border-bottom: var(--table-border); + } +} + +.o-table-border-all, +.o-table-border-column { + th, + td { + border-right: var(--table-border); + + &.last { + border-right: none; + } + } +} + +// tip +.o-table-tip-wrap { + display: flex; + justify-content: center; + align-items: center; + border-bottom: var(--table-border); + font-size: var(--table-tip-text-size); + line-height: var(--table-tip-text-height); + color: var(--table-tip-color); + min-height: var(--table-body-min-height); +} +.o-table-loading-wrap { + display: flex; + justify-content: center; + align-items: center; + font-size: var(--table-tip-text-size); + line-height: var(--table-tip-text-height); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--table-loading-mask); + color: var(--table-loading-color); +} + +.o-table-loading-label { + margin-left: 8px; +} diff --git a/packages/opendesign/src/components/table/style/index.ts b/packages/opendesign/src/components/table/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/table/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/table/style/var.scss b/packages/opendesign/src/components/table/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..af5fd50944c4ab2933649dde6c20ebe3cc019ef1 --- /dev/null +++ b/packages/opendesign/src/components/table/style/var.scss @@ -0,0 +1,36 @@ +.o-table { + --table-text-size: var(--o-font_size-text1); + --table-text-height: var(--o-line_height-text1); + --table-color: var(--o-color-info2); + + --table-tip-text-size: var(--o-font_size-tip1); + --table-tip-text-height: var(--o-line_height-tip1); + --table-tip-color: var(--o-color-info3); + + --table-cell-padding: 13px 16px; + + --table-head-bg: var(--o-color-control1); + --table-row-hover: var(--o-color-control1-light); + + --table-border: 1px solid var(--o-color-control1-light); + --table-loading-mask: var(--o-color-mask2); + --table-loading-color: var(--o-color-info2); + + --table-body-min-height: 200px; +} + +.o-table-border-all, +.o-table-border-row { + --table-cell-padding: 13px 16px 12px; +} + +.o-table-small { + --table-text-size: var(--o-font_size-tip1); + --table-text-height: var(--o-line_height-tip1); + + --table-cell-padding: 7px 8px; + .o-table-border-all, + .o-table-border-row { + --table-cell-padding: 7px 8px 6px; + } +} diff --git a/packages/opendesign/src/components/table/table.ts b/packages/opendesign/src/components/table/table.ts new file mode 100644 index 0000000000000000000000000000000000000000..7490179f4c4c6c0e0a2e2b44cb987df62a7d207e --- /dev/null +++ b/packages/opendesign/src/components/table/table.ts @@ -0,0 +1,86 @@ +import { Ref } from 'vue'; +import { isArray, isFunction, isString } from '../_shared/is'; +import { TableColumnT, TableRowT, CellSpanT, TableCellT } from './types'; + +export function getColumnData(columns?: string[] | TableColumnT[]): TableColumnT[] { + if (!isArray(columns)) { + return []; + } + + return columns.map(item => { + if (isString(item)) { + return { + key: item + }; + } + + return item; + }); +} +function getSkipCell(rowIndex: number, columnIndex: number, span: { rowspan?: number; colspan?: number }) { + const skip: Record = {}; + const { colspan = 1, rowspan = 1 } = span; + for (let i = 0; i < rowspan; i++) { + for (let j = 0; j < colspan; j++) { + if (i !== 0 || j !== 0) { + skip[`${rowIndex + i}-${columnIndex + j}`] = true; + } + } + } + return skip; +} + + +export function getBodyData(columnData: Ref, bodyData?: TableRowT[], cellSpan?: CellSpanT) { + if (!bodyData) { + return []; + } + let t = bodyData.length; + let s = 0; + + const colLenght = columnData.value.length; + + const rlt = []; + let span = null; + const skipCell: Record = {}; + console.log(s, t); + const end = Math.min(s + t, bodyData.length); + + for (let r = s; r < end; r += 1) { + const row = bodyData[r]; + let cols = []; + for (let c = 0; c < colLenght; c += 1) { + const col = columnData.value[c]; + if (isFunction(cellSpan)) { + span = cellSpan(r, c); + } + const cell: TableCellT = { + value: row[col.key], + key: col.key + }; + + if (span) { + const { colspan = 1, rowspan = 1 } = span; + Object.assign(skipCell, getSkipCell(r, c, span)); + + if (colspan > 1) { + cell.colspan = colspan; + } + if (rowspan > 1) { + cell.rowspan = rowspan; + } + } + + + if (!skipCell[`${r}-${c}`]) { + if (c === colLenght - 1) { + cell.last = true; + } + cols.push(cell); + } + } + rlt.push({ key: row.key, data: cols }); + } + + return rlt; +} diff --git a/packages/opendesign/src/components/table/types.ts b/packages/opendesign/src/components/table/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..84c4f71f8b6c17238cccec51fe49466d560007d8 --- /dev/null +++ b/packages/opendesign/src/components/table/types.ts @@ -0,0 +1,86 @@ +import { StyleValue, ExtractPropTypes, PropType } from 'vue'; + +export interface TableColumnT { + key: string, + label?: string, + style?: StyleValue +} + +export interface TableRowT { + key?: string | number; + [key: string]: any; +} + +export interface TableCellT { + value: any, + key: string | number, + colspan?: number, + rowspan?: number, + last?: boolean +} + +export type ColumnKeysT = Array; + +export type CellSpanT = (rowIndex: number, columnIndex: number) => { rowspan?: number; colspan?: number } | undefined; + +export type TableBorderT = 'all' | 'row' | 'column' | 'frame' | 'row-column' | 'row-frame' | 'column-frame' | 'none'; + +export const tableProps = { + /** + * 表头内容 + */ + columns: { + type: Array as PropType + }, + /** + * 表头内容 + */ + columnKeys: { + type: Array as PropType, + }, + /** + * 表格数据 + */ + data: { + type: Array as PropType, + }, + /** + * 是否显示边框 + */ + border: { + type: String as PropType, + default: 'row' + }, + /** + * 是否小表格 + */ + small: { + type: Boolean, + }, + /** + * 处理单元格合并(表体部分，不包含表头) + */ + cellSpan: { + type: Function as PropType, + }, + /** + * 空数据提示文本 + */ + emptyLabel: { + type: String, + }, + /** + * 是否正在加载 + */ + loading: { + type: Boolean, + }, + /** + * 加载提示文本 + */ + loadingLabel: { + type: String, + }, +}; + +export type TablePropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue new file mode 100644 index 0000000000000000000000000000000000000000..24a53119c929448969d2acf20305490938a9e9d7 --- /dev/null +++ b/packages/opendesign/src/components/tabs/OTabPane.vue @@ -0,0 +1,116 @@ + + + diff --git a/packages/opendesign/src/components/tabs/OTabs.vue b/packages/opendesign/src/components/tabs/OTabs.vue new file mode 100644 index 0000000000000000000000000000000000000000..14bd832bbb059a389741a7f97a4f6dc5243602ff --- /dev/null +++ b/packages/opendesign/src/components/tabs/OTabs.vue @@ -0,0 +1,126 @@ + + diff --git a/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue b/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue new file mode 100644 index 0000000000000000000000000000000000000000..d2ddd489b093af11c33ef9f5ba133007fdc0feda --- /dev/null +++ b/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..31bf2db94bc1d5d7b5cabcfa887c02d4a8db526f --- /dev/null +++ b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue @@ -0,0 +1,110 @@ + + + diff --git a/packages/opendesign/src/components/tabs/index.ts b/packages/opendesign/src/components/tabs/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..4290a713146cdba7fb964b5d9a086f642d986902 --- /dev/null +++ b/packages/opendesign/src/components/tabs/index.ts @@ -0,0 +1,12 @@ +import _OTabs from './OTabs.vue'; +import OTabPane from './OTabPane.vue'; +import type { App } from 'vue'; + +const OTabs = Object.assign(_OTabs, { + OTabPane, + install(app: App) { + app.component(_OTabs.name, _OTabs); + }, +}); + +export { OTabs, OTabPane }; diff --git a/packages/opendesign/src/components/tabs/provide.ts b/packages/opendesign/src/components/tabs/provide.ts new file mode 100644 index 0000000000000000000000000000000000000000..da5f3b85cd70b6b515f70c0f9fd38de6118a5f41 --- /dev/null +++ b/packages/opendesign/src/components/tabs/provide.ts @@ -0,0 +1,13 @@ +import { InjectionKey, Ref } from 'vue'; + + +export const tabsInjectKey: InjectionKey<{ + lazy: boolean, + navsRef: Ref, + bodyRef: Ref, + activeValue: Ref, + initValue: (value: string | number, navEl: HTMLElement | null) => void, + updateValue: (value: string | number, navEl: HTMLElement | null) => void, + onDeletePane: (value: string | number, evt: MouseEvent) => void, +}> = Symbol('provide-tabs'); + diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..466b66418f6058ccd1637f28ddcc85e084b45934 --- /dev/null +++ b/packages/opendesign/src/components/tabs/style/index.scss @@ -0,0 +1,141 @@ +@use './var.scss'; + +.o-tabs-navs { + display: flex; + align-items: center; + position: relative; + width: 100%; +} +.o-tabs-head { + font-size: var(--tabs-nav-text-size); + line-height: var(--tabs-nav-text-height); + color: var(--tabs-nav-color); + position: relative; + + &.with-act { + display: flex; + align-items: center; + // justify-content: space-between; + } + &.show-line::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + border-bottom: var(--tabs-nav-divider); + } +} +.o-tabs-navs-wrap { + display: inline-flex; + align-items: center; +} +.o-tab-nav { + display: inline-flex; + align-items: center; + cursor: pointer; + border: 1px solid var(--tabs-nav-bd-color); + border-bottom-width: 0; + background-color: var(--tabs-nav-bg-color); + position: relative; + z-index: 1; + &:not(.o-tab-nav-disabled) { + &:hover { + color: var(--tabs-nav-color-hover); + border-color: var(--tabs-nav-bd-color-hover); + background-color: var(--tabs-nav-bg-color-hover); + } + } +} +.o-tab-nav-active { + color: var(--tabs-nav-color-active); + border-color: var(--tabs-nav-bd-color-active); + background-color: var(--tabs-nav-bg-color-active); +} +.o-tab-nav-disabled { + cursor: not-allowed; + color: var(--tabs-nav-color-disabled); + border-color: var(--tabs-nav-bd-color-disabled); + background-color: var(--tabs-nav-bg-color-disabled); +} +.o-tab-nav-closable { + position: relative; +} +.o-tab-nav-title { + padding: 4px 16px; +} +.o-tabs-text { + .o-tab-nav { + border: none; + } +} +.o-tabs-head-prefix { + flex-shrink: 0; +} +.o-tabs-head-suffix { + flex-shrink: 0; +} +.o-tab-nav-archor { + position: absolute; + left: 0; + bottom: 0; + width: 0; + z-index: 2; + transition: all var(--o-easing-standard-in) var(--o-duration-m1); +} +.o-tab-nav-archor-line { + width: 100%; + height: 3px; + background-color: var(--tabs-nav-archor-color); +} +.o-tab-nav-close { + position: absolute; + right: 0; + top: 0; + font-size: 14px; + padding: 1px; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--tabs-icon-color); + border-radius: 50%; + &:hover { + color: var(--tabs-icon-color-hover); + background-color: var(--tabs-icon-bg-color-hover); + } +} + +.o-tab-nav-add { + margin-left: 8px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + cursor: pointer; + color: var(--tabs-icon-color); + font-size: 14px; + border-radius: 50%; + &:hover { + color: var(--tabs-icon-color-hover); + background-color: var(--tabs-nav-bg-color-hover); + } +} + +.o-tabs-body { + display: flex; +} + +.o-tab-pane { + flex-shrink: 0; + width: 100%; + display: none; +} +.o-tab-pane-active { + display: block; +} +.o-tabs-solid { + .o-tab-nav + .o-tab-nav { + margin-left: 8px; + } +} diff --git a/packages/opendesign/src/components/tabs/style/index.ts b/packages/opendesign/src/components/tabs/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/tabs/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/tabs/style/var.scss b/packages/opendesign/src/components/tabs/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..1e2ccd8913153854f3bd391359c04dd5456f9dc7 --- /dev/null +++ b/packages/opendesign/src/components/tabs/style/var.scss @@ -0,0 +1,35 @@ +.o-tabs { + --tabs-nav-text-size: var(--o-font_size-text1); + --tabs-nav-text-height: var(--o-line_height-text1); + + --tabs-nav-color: var(--o-color-info2); + --tabs-nav-color-disabled: var(--o-color-info4); + + --tabs-nav-radius: 2px; + + --tabs-icon-color: var(--o-color-info2); + --tabs-icon-color-hover: var(--o-color-primary1); + --tabs-icon-bg-color-hover: var(--o-color-control3-light); + + --tabs-nav-divider: 1px solid var(--o-color-control1); + --tabs-nav-archor-color: var(--o-color-primary1); +} + +.o-tabs-solid { + --tabs-nav-bd-color: var(--o-color-control1-light); + --tabs-nav-bd-color-hover: var(--o-color-control2-light); + --tabs-nav-bd-color-active: var(--o-color-control1-light); + --tabs-nav-bd-color-disabled: var(--o-color-control4-light); + + --tabs-nav-bg-color: var(--o-color-control1-light); + --tabs-nav-bg-color-hover: var(--o-color-control2-light); + --tabs-nav-bg-color-active: var(--o-color-control-light); + --tabs-nav-bg-color-disabled: var(--o-color-control4-light); +} +.o-tabs-text { + --tabs-nav-color-hover: var(--o-color-primary1); + --tabs-nav-color-active: var(--o-color-primary1); + --tabs-nav-bd-color: transparent; + --tabs-nav-bd-color-hover: transparent; + --tabs-nav-bd-color-active: var(--o-color-primary1); +} diff --git a/packages/opendesign/src/components/tabs/types.ts b/packages/opendesign/src/components/tabs/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..b3ddf43aa5a7ed5fab7091c4830cdb0caa8e6e41 --- /dev/null +++ b/packages/opendesign/src/components/tabs/types.ts @@ -0,0 +1,101 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export const tabsProps = { + /** + * tab选中的nav值 + * v-model + */ + modelValue: { + type: [String, Number], + default: undefined + }, + /** + * VariantT + */ + variant: { + type: String as PropType<'solid' | 'text'>, + default: 'text' + }, + /** + * 是否激活时再加载 + */ + lazy: { + type: Boolean, + }, + /** + * 是否可以添加页签 + */ + addable: { + type: Boolean, + }, + /** + * 是否展示nav线 + */ + line: { + type: Boolean, + default: true + }, + /** + * 是否nav的横向排列布局，支持justify-content的所有值 + */ + navJustify: { + type: String, + }, +}; + +export type TabsPropsT = ExtractPropTypes; + + +export const tabPaneProps = { + /** + * 页签项的key + */ + value: { + type: [String, Number], + default: undefined, + }, + /** + * 页签项的文本，如果不传，使用nav插槽或者value + */ + label: { + type: String, + default: undefined, + }, + /** + * 页签切换时过渡动画 + */ + transition: { + type: String, + default: 'o-fade-in-enter', + }, + /** + * 是否禁用选中该页签 + */ + disabled: { + type: Boolean, + default: false, + }, + /** + * 是否可以删除该页签 + */ + closable: { + type: Boolean, + default: false, + }, + /** + * 是否页签首次激活前不渲染页签内容 + */ + lazy: { + type: Boolean, + default: false, + }, + /** + * 是否在隐藏时卸载页签内容 + */ + unmountOnHide: { + type: Boolean, + default: false, + }, +}; + +export type TabPanePropsT = ExtractPropTypes; \ No newline at end of file diff --git a/packages/opendesign/src/components/tag/OTag.vue b/packages/opendesign/src/components/tag/OTag.vue new file mode 100644 index 0000000000000000000000000000000000000000..d9a35a2612894f17d518a0d9ec18ffb381a3ac58 --- /dev/null +++ b/packages/opendesign/src/components/tag/OTag.vue @@ -0,0 +1,82 @@ + + + diff --git a/packages/opendesign/src/components/tag/__demo__/IndexTag.vue b/packages/opendesign/src/components/tag/__demo__/IndexTag.vue new file mode 100644 index 0000000000000000000000000000000000000000..072a3d9a72849fc8fe47cd0ef20e999345d07001 --- /dev/null +++ b/packages/opendesign/src/components/tag/__demo__/IndexTag.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/opendesign/src/components/tag/__demo__/TagBasic.vue b/packages/opendesign/src/components/tag/__demo__/TagBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..edb8590aea52e6013cee8a4fadafcbadbbd25d92 --- /dev/null +++ b/packages/opendesign/src/components/tag/__demo__/TagBasic.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue new file mode 100644 index 0000000000000000000000000000000000000000..5083ec415a899d81e38f2ef76a93e65a88298e58 --- /dev/null +++ b/packages/opendesign/src/components/tag/__demo__/TagCheckable.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/opendesign/src/components/tag/__demo__/TagClosable.vue b/packages/opendesign/src/components/tag/__demo__/TagClosable.vue new file mode 100644 index 0000000000000000000000000000000000000000..a050bb09bd8222f3aeac1aa510b1f14d3c30b587 --- /dev/null +++ b/packages/opendesign/src/components/tag/__demo__/TagClosable.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/opendesign/src/components/tag/__demo__/TagColor.vue b/packages/opendesign/src/components/tag/__demo__/TagColor.vue new file mode 100644 index 0000000000000000000000000000000000000000..cca7728a8486ddf837df56bb090bc9101f171395 --- /dev/null +++ b/packages/opendesign/src/components/tag/__demo__/TagColor.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/opendesign/src/components/tag/__demo__/TagOutline.vue b/packages/opendesign/src/components/tag/__demo__/TagOutline.vue new file mode 100644 index 0000000000000000000000000000000000000000..666206d11faa6a6ba0ebee95ea0c32012214305f --- /dev/null +++ b/packages/opendesign/src/components/tag/__demo__/TagOutline.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/opendesign/src/components/tag/__demo__/TagRound.vue b/packages/opendesign/src/components/tag/__demo__/TagRound.vue new file mode 100644 index 0000000000000000000000000000000000000000..85edc9cc3a307335ae33b549cbdb1e9e7b1e7f52 --- /dev/null +++ b/packages/opendesign/src/components/tag/__demo__/TagRound.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/opendesign/src/components/tag/__demo__/TagSize.vue b/packages/opendesign/src/components/tag/__demo__/TagSize.vue new file mode 100644 index 0000000000000000000000000000000000000000..524a99bffab98bf50ce026cf4f56fd21fbf8fcf5 --- /dev/null +++ b/packages/opendesign/src/components/tag/__demo__/TagSize.vue @@ -0,0 +1,12 @@ + + + diff --git a/packages/opendesign/src/components/tag/index.ts b/packages/opendesign/src/components/tag/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..64dae6f735186c82c54d020bd10c2a92c12825e8 --- /dev/null +++ b/packages/opendesign/src/components/tag/index.ts @@ -0,0 +1,13 @@ +import type { App } from 'vue'; + +import _OTag from './OTag.vue'; + +export * from './types'; + +const OTag = Object.assign(_OTag, { + install(app: App) { + app.component(_OTag.name, _OTag); + }, +}); + +export { OTag }; diff --git a/packages/opendesign/src/components/tag/style/index.scss b/packages/opendesign/src/components/tag/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..3561e8d55ebed543dbfce0d0fed230115e00d07c --- /dev/null +++ b/packages/opendesign/src/components/tag/style/index.scss @@ -0,0 +1,41 @@ +@use './var.scss'; + +.o-tag { + font-size: var(--tag-text-size); + line-height: var(--tag-text-height); + height: var(--tag-height); + border: 1px solid var(--tag-bd-color); + border-radius: var(--tag-radius); + padding: var(--tag-padding); + background-color: var(--tag-bg-color); + color: var(--tag-color); + white-space: nowrap; + + display: inline-flex; + align-items: center; + justify-content: center; +} + +.o-tag-icon { + display: inline-flex; + align-items: center; + > svg { + vertical-align: top; + } + + &.prefix { + margin-right: 6px; + } + + &.suffix { + margin-left: 6px; + } +} + +.o-tag-icon-close { + cursor: pointer; +} + +.o-tag-checkable { + cursor: pointer; +} diff --git a/packages/opendesign/src/components/tag/style/index.ts b/packages/opendesign/src/components/tag/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/tag/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/tag/style/var.scss b/packages/opendesign/src/components/tag/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..05fa8a47b78447be50fd646a7682c4eb1c78c10f --- /dev/null +++ b/packages/opendesign/src/components/tag/style/var.scss @@ -0,0 +1,107 @@ +.o-tag-normal { + --tag-color: var(--o-color-info1); + --tag-bg-color: var(--o-color-control1-light); + --tag-bd-color: var(--o-color-control1-light); +} + +.o-tag-primary { + --tag-color: var(--o-color-info1-inverse); + --tag-bg-color: var(--o-color-primary1); + --tag-bd-color: var(--o-color-primary1); +} + +.o-tag-success { + --tag-color: var(--o-color-info1-inverse); + --tag-bg-color: var(--o-color-success1); + --tag-bd-color: var(--o-color-success1); +} + +.o-tag-warning { + --tag-color: var(--o-color-info1-inverse); + --tag-bg-color: var(--o-color-warning1); + --tag-bd-color: var(--o-color-warning1); +} + +.o-tag-danger { + --tag-color: var(--o-color-info1-inverse); + --tag-bg-color: var(--o-color-danger1); + --tag-bd-color: var(--o-color-danger1); +} + +.o-tag-small { + --tag-padding: 0 6px; + --tag-radius: var(--o-radius-control-s); + --tag-text-size: 10px; + --tag-text-height: 16px; + --tag-height: var(--o-size-xxs); +} + +.o-tag-medium { + --tag-padding: 0 12px; + --tag-radius: var(--o-radius-control-s); + --tag-text-size: var(--o-font_size-tip2); + --tag-text-height: var(--o-line_height-tip2); + --tag-height: var(--o-size-xs); +} + +.o-tag-large { + --tag-padding: 0 14px; + --tag-radius: var(--o-radius-control-s); + --tag-text-size: var(--o-font_size-tip1); + --tag-text-height: var(--o-line_height-tip1); + --tag-height: var(--o-size-s); +} + +.o-tag-round-pill { + --tag-radius: var(--o-size-l); +} + +.o-tag-outline { + --tag-bg-color: transparent; + + &.o-tag-normal { + --tag-color: var(--o-color-info1); + } + + &.o-tag-primary { + --tag-color: var(--o-color-primary1); + } + + &.o-tag-success { + --tag-color: var(--o-color-success1); + } + + &.o-tag-warning { + --tag-color: var(--o-color-warning1); + } + + &.o-tag-danger { + --tag-color: var(--o-color-danger1); + } +} + +.o-tag-checkable { + &:not(.o-tag-checked) { + --tag-bg-color: transparent; + --tag-bd-color: transparent; + &.o-tag-normal { + --tag-color: var(--o-color-info1); + } + + &.o-tag-primary { + --tag-color: var(--o-color-primary1); + } + + &.o-tag-success { + --tag-color: var(--o-color-success1); + } + + &.o-tag-warning { + --tag-color: var(--o-color-warning1); + } + + &.o-tag-danger { + --tag-color: var(--o-color-danger1); + } + } +} diff --git a/packages/opendesign/src/components/tag/types.ts b/packages/opendesign/src/components/tag/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..4652b89abc38563a6d6a44b049da50c854e568b0 --- /dev/null +++ b/packages/opendesign/src/components/tag/types.ts @@ -0,0 +1,66 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { SizeT, RoundT, ColorT, VariantT } from '../_shared/global'; + +export type TagVariantT = 'solid' | 'outline'; + +export const tagProps = { + /** + * 标签颜色 + * 'normal' | 'primary' | 'success' | 'warning' | 'danger'; + */ + color: { + type: String as PropType, + default: 'normal', + }, + /** + * 标签类型 + * 'solid' | 'outline' + */ + variant: { + type: String as PropType, + default: 'solid', + }, + /** + * 标签尺寸 + * 'large' | 'medium' | 'small' + */ + size: { + type: String as PropType, + }, + /** + * 圆角值 + */ + round: { + type: String as PropType, + }, + /** + * 是否可关闭 + */ + closable: { + type: Boolean, + default: false, + }, + /** + * 是否可选中 + */ + checkable: { + type: Boolean, + default: false, + }, + /** + * 双向绑定值，是否被选中(标签可选中时该属性生效) + */ + checked: { + type: Boolean, + default: undefined, + }, + /** + * 非受控状态时，默认是否选中(标签可选中时该属性生效) + */ + defaultChecked: { + type: Boolean, + default: true, + }, +}; + +export type TagPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue new file mode 100644 index 0000000000000000000000000000000000000000..de7bd065a8d5f2a008c104cf86d5893efa4f5948 --- /dev/null +++ b/packages/opendesign/src/components/textarea/OTextarea.vue @@ -0,0 +1,203 @@ + + diff --git a/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue new file mode 100644 index 0000000000000000000000000000000000000000..20a9d3be45982439e05c77faeec2aec57506244c --- /dev/null +++ b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue new file mode 100644 index 0000000000000000000000000000000000000000..3eea2a6c6b0b96b5baf404441415e22be7214166 --- /dev/null +++ b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue @@ -0,0 +1,28 @@ + + + diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue new file mode 100644 index 0000000000000000000000000000000000000000..72574e31e5b4bd4ab546ff9714186749fa99a8cb --- /dev/null +++ b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue @@ -0,0 +1,111 @@ + + + diff --git a/packages/opendesign/src/components/textarea/index.ts b/packages/opendesign/src/components/textarea/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..4e45e3fc4a22e8c5e5639c67febd3aefb3324d7c --- /dev/null +++ b/packages/opendesign/src/components/textarea/index.ts @@ -0,0 +1,9 @@ +import _OTextarea from './OTextarea.vue'; +import type { App } from 'vue'; + +const OTextarea = Object.assign(_OTextarea, { + install(app: App) { + app.component(_OTextarea.name, _OTextarea); + }, +}); +export { OTextarea }; diff --git a/packages/opendesign/src/components/textarea/style/index.scss b/packages/opendesign/src/components/textarea/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..b1bd1ffeb75b215e7302db7533dc831508b10777 --- /dev/null +++ b/packages/opendesign/src/components/textarea/style/index.scss @@ -0,0 +1,125 @@ +@use './var.scss'; + +.o-textarea { + cursor: pointer; + color: var(--textarea-color); + display: inline-flex; + font-size: var(--textarea-text-size); + line-height: var(--textarea-text-height); +} + +.o-textarea-wrap { + display: flex; + border-radius: var(--textarea-radius); + border: 1px solid var(--textarea-bd-color); + background-color: var(--textarea-bg-color); + position: relative; + flex-direction: column; + justify-items: stretch; + width: 100%; + height: 100%; + &:hover { + border-color: var(--textarea-bd-color-hover); + background-color: var(--textarea-bg-color-hover); + } + &.is-focus { + border-color: var(--textarea-bd-color-focus); + background-color: var(--textarea-bg-color-focus); + } +} +.o-textarea-round-pill { + .o-textarea-wrap { + border-radius: var(--textarea-radius-pill); + } +} +.o-textarea-textarea { + padding: var(--textarea-padding-v) var(--textarea-padding-h); + outline: none; + border: none; + color: inherit; + cursor: inherit; + background-color: transparent; + display: inline-flex; + width: 100%; + line-height: inherit; + min-height: calc(var(--textarea-text-height) + var(--textarea-padding-v) * 2); + + white-space: pre-wrap; + overflow-wrap: break-word; +} + +.o-textarea-clear { + position: absolute; + right: 8px; + top: 50%; + font-size: 16px; + margin-top: -8px; + border-radius: 50%; + visibility: hidden; + opacity: 0; + transform: scale(0.1); + transition: all var(--o-duration-m1) var(--o-easing-standard-in); + display: flex; + align-items: center; + justify-content: center; + color: var(--textarea-icon-color); + background-color: var(--textarea-icon-bg-color); + + &:hover { + color: var(--textarea-icon-color-hover); + } +} + +.o-textarea-clear-icon { + stroke-width: 0.5px; +} + +.o-textarea-clearable { + &:hover { + .o-textarea-clear { + visibility: visible; + opacity: 1; + transform: scale(1); + } + } +} + +.o-textarea-disabled { + .o-textarea-clear { + display: none; + } + .o-textarea-wrap { + color: var(--textarea-color-disabled); + cursor: not-allowed; + border-color: var(--textarea-bd-color-disabled); + background-color: var(--textarea-bg-color-disabled); + } +} + +.o-textarea-limit { + position: absolute; + right: 8px; + bottom: 4px; + color: var(--textarea-limit-color); + font-size: var(--textarea-limit-text-size); + line-height: var(--textarea-limit-text-height); + > .is-error { + color: var(--textarea-limit-color-error); + } +} + +.o-textarea-mirror { + padding: var(--textarea-padding-v) var(--textarea-padding-h); + white-space: pre-wrap; + overflow-wrap: break-word; + line-height: inherit; + display: inline-flex; + flex-direction: column; + width: 100%; + visibility: hidden; + min-height: var(--textarea-text-height); + position: absolute; + left: 100%; + top: 0; + pointer-events: none; +} diff --git a/packages/opendesign/src/components/textarea/style/index.ts b/packages/opendesign/src/components/textarea/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716 --- /dev/null +++ b/packages/opendesign/src/components/textarea/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/textarea/style/var.scss b/packages/opendesign/src/components/textarea/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..607acd4b62d6bbb3c63dc7f1e58a78424eb5e1ab --- /dev/null +++ b/packages/opendesign/src/components/textarea/style/var.scss @@ -0,0 +1,103 @@ +.o-textarea { + --textarea-color: var(--o-color-info2); + --textarea-color-disabled: var(--o-color-info4); + + --textarea-bg-color: transparent; + --textarea-bg-color-hover: transparent; + --textarea-bg-color-focus: var(--o-color-control-light); + + --textarea-icon-color: var(--o-color-control3); + --textarea-icon-color-hover: var(--o-color-primary1); + --textarea-icon-bg-color: var(--o-color-control1-light); + + --textarea-limit-color: var(--o-color-text3); + --textarea-limit-color-error: var(--o-color-danger1); + --textarea-limit-text-size: var(--o-font_size-tip2); + --textarea-limit-text-height: var(--o-line_height-tip2); +} + +.o-textarea-normal { + --textarea-bd-color: var(--o-color-control1); + --textarea-bd-color-hover: var(--o-color-primary2); + --textarea-bd-color-focus: var(--o-color-primary3); + --textarea-bd-color-disabled: var(--o-color-control4); + + &.o-textarea-solid { + --textarea-bd-color: var(--o-color-control1-light); + --textarea-bd-color-hover: var(--o-color-control2-light); + + --textarea-bg-color: var(--o-color-control1-light); + --textarea-bg-color-hover: var(--o-color-control2-light); + --textarea-bg-color-disabled: var(--o-color-control4-light); + } +} +.o-textarea-success { + --textarea-bd-color: var(--o-color-success1); + --textarea-bd-color-hover: var(--o-color-success2); + --textarea-bd-color-focus: var(--o-color-success3); + --textarea-bd-color-disabled: var(--o-color-success4); + + &.o-textarea-solid { + --textarea-bd-color: var(--o-color-success1-light); + --textarea-bd-color-hover: var(--o-color-success2-light); + + --textarea-bg-color: var(--o-color-success1-light); + --textarea-bg-color-hover: var(--o-color-success2-light); + --textarea-bg-color-disabled: var(--o-color-success4-light); + } +} +.o-textarea-warning { + --textarea-bd-color: var(--o-color-warning1); + --textarea-bd-color-hover: var(--o-color-warning2); + --textarea-bd-color-focus: var(--o-color-warning3); + --textarea-bd-color-disabled: var(--o-color-warning4); + + &.o-textarea-solid { + --textarea-bd-color: var(--o-color-warning1-light); + --textarea-bd-color-hover: var(--o-color-warning2-light); + + --textarea-bg-color: var(--o-color-warning1-light); + --textarea-bg-color-hover: var(--o-color-warning2-light); + --textarea-bg-color-disabled: var(--o-color-warning4-light); + } +} +.o-textarea-danger { + --textarea-bd-color: var(--o-color-danger1); + --textarea-bd-color-hover: var(--o-color-danger2); + --textarea-bd-color-focus: var(--o-color-danger3); + --textarea-bd-color-disabled: var(--o-color-danger4); + + &.o-textarea-solid { + --textarea-bd-color: var(--o-color-danger1-light); + --textarea-bd-color-hover: var(--o-color-danger2-light); + + --textarea-bg-color: var(--o-color-danger1-light); + --textarea-bg-color-hover: var(--o-color-danger2-light); + --textarea-bg-color-disabled: var(--o-color-danger4-light); + } +} + +.o-textarea-size-small { + --textarea-text-size: var(--o-font_size-tip1); + --textarea-text-height: var(--o-line_height-tip1); + --textarea-padding-v: 2px; + --textarea-padding-h: 8px; + --textarea-radius: var(--o-radius-control-s); + --textarea-radius-pill: 12px; +} +.o-textarea-size-medium { + --textarea-text-size: var(--o-font_size-text1); + --textarea-text-height: var(--o-line_height-text1); + --textarea-padding-v: 4px; + --textarea-padding-h: 12px; + --textarea-radius: var(--o-radius-control-m); + --textarea-radius-pill: 16px; +} +.o-textarea-size-large { + --textarea-text-size: var(--o-font_size-text2); + --textarea-text-height: var(--o-line_height-text2); + --textarea-padding-v: 6px; + --textarea-padding-h: 12px; + --textarea-radius: var(--o-radius-control-l); + --textarea-radius-pill: 20px; +} diff --git a/packages/opendesign/src/components/textarea/textarea.ts b/packages/opendesign/src/components/textarea/textarea.ts new file mode 100644 index 0000000000000000000000000000000000000000..72b9319cd0b45a52c5e331dc8c53a5f66df1741b --- /dev/null +++ b/packages/opendesign/src/components/textarea/textarea.ts @@ -0,0 +1,18 @@ +import { isNull, isUndefined } from '../_shared/is'; +import { ResizeT } from './types'; + +export function toInputString(val: unknown): string { + if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) { + return ''; + } + return String(val); +} + +export function getResizeValue(resize: ResizeT) { + if (resize === 'h') { + return 'horizontal'; + } else if (resize ==='v') { + return 'vertical'; + } + return resize; +} \ No newline at end of file diff --git a/packages/opendesign/src/components/textarea/types.ts b/packages/opendesign/src/components/textarea/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..7877ba2e00e4156c1376832699a13e33251aabef --- /dev/null +++ b/packages/opendesign/src/components/textarea/types.ts @@ -0,0 +1,132 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import type { SizeT, RoundT, VariantT } from '../_shared/global'; + +export type ResizeT = 'both' | 'horizontal'| 'h' | 'vertical' | 'v' | 'none'; +export const textareaProps = { + /** + * 下拉框的值 + * v-model + */ + modelValue: { + type: [String, Number], + }, + /** + * 下拉框的默认值 + * 非受控 + */ + defaultValue: { + type: [String, Number], + }, + /** + * 大小 + */ + size: { + type: String as PropType, + }, + /** + * 圆角值 + */ + round: { + type: String as PropType + }, + /** + * 颜色类型 + */ + color: { + type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>, + default: 'normal' + }, + /** + * 按钮类型：ColorT + */ + variant: { + type: String as PropType, + default: 'outline' + }, + /** + * 提示文本 + */ + placeholder: { + type: String, + default: '' + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + }, + /** + * 是否只读 + */ + readonly: { + type: Boolean, + }, + /** + * 是否可以清除 + */ + clearable: { + type: Boolean, + default: true + }, + /** + * 是否自动增加宽度 + */ + autoWidth: { + type: Boolean, + }, + /** + * 是否支持调整尺寸 + */ + resize: { + type: String as PropType, + default: 'vertical' + }, + /** + * 显示的行数 + */ + rows: { + type: Number, + default: 3 + }, + /** + * 显示的行数 + */ + cols: { + type: Number, + default: 20 + }, + /** + * 最大字符长度 + */ + maxLength: { + type: Number, + }, + /** + * 超过最大字符长度时是否允许输入 + */ + inputOnOutLimit: { + type: Boolean, + default: true + }, + /** + * 是否自动计算高度 + */ + autoHeight: { + type: Boolean, + }, + /** + * 高度自适应 + */ + autoResize: { + type: Boolean, + }, + /** + * 获取长度方法 + */ + getLength: { + type: Function as PropType<(val: string) => Number>, + }, +}; + +export type TextareaPropsT = ExtractPropTypes; diff --git a/packages/opendesign/src/components/vite-env.d.ts b/packages/opendesign/src/components/vite-env.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..8fd2afcddd240bd40b8abb86ea88761b3b743645 --- /dev/null +++ b/packages/opendesign/src/components/vite-env.d.ts @@ -0,0 +1,11 @@ +/// + +declare module '*.vue' { + import type { DefineComponent } from 'vue'; + const component: DefineComponent<{}, {}, any>; + export default component; +} + +// declare module 'intersection-observer-polyfill' { +// export default IntersectionObserver; +// } \ No newline at end of file diff --git a/packages/opendesign/src/icons/cleansvg.config.ts b/packages/opendesign/src/icons/cleansvg.config.ts new file mode 100644 index 0000000000000000000000000000000000000000..7641c0717d4a8e48c9b083d6a2fc6ebb719cb0ff --- /dev/null +++ b/packages/opendesign/src/icons/cleansvg.config.ts @@ -0,0 +1,4 @@ +module.exports = { + input: './svgs', + output: './_svgs', +}; diff --git a/packages/opendesign/src/icons/icon.config.ts b/packages/opendesign/src/icons/icon.config.ts new file mode 100644 index 0000000000000000000000000000000000000000..40200897330f750aa65902e2d0f3406d0f7c9fc9 --- /dev/null +++ b/packages/opendesign/src/icons/icon.config.ts @@ -0,0 +1,4 @@ +module.exports = { + input: './svgs', + output: '../components/icons/', +}; \ No newline at end of file diff --git a/packages/opendesign/src/icons/svgs/color/ascend.svg b/packages/opendesign/src/icons/svgs/color/ascend.svg new file mode 100644 index 0000000000000000000000000000000000000000..1af3ec354de9f576d8efae63d236d630ddf12cc8 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/color/ascend.svg @@ -0,0 +1,18 @@ + + + st_logo_dh_ascend + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/opendesign/src/icons/svgs/color/kunpeng.svg b/packages/opendesign/src/icons/svgs/color/kunpeng.svg new file mode 100644 index 0000000000000000000000000000000000000000..1b4019b9498a35b1ea9b64a3f5a1b163e89c5eb0 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/color/kunpeng.svg @@ -0,0 +1,28 @@ + + + a备份 + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/opendesign/src/icons/svgs/fill/add.svg b/packages/opendesign/src/icons/svgs/fill/add.svg new file mode 100644 index 0000000000000000000000000000000000000000..de17cbdc97bf23a2ccd38cdb0ae87a9b1c767f6d --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/add.svg @@ -0,0 +1,4 @@ + +add + + diff --git a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-down.svg b/packages/opendesign/src/icons/svgs/fill/arrow-traingle-down.svg new file mode 100644 index 0000000000000000000000000000000000000000..c47b18d3daab5bd50578996e942bd3c3a848ead5 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/arrow-traingle-down.svg @@ -0,0 +1,4 @@ + +arrow-triangle-solid-down + + diff --git a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-left.svg b/packages/opendesign/src/icons/svgs/fill/arrow-traingle-left.svg new file mode 100644 index 0000000000000000000000000000000000000000..27b72d68c910365f00aaa9a1ff97c877163e1f8a --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/arrow-traingle-left.svg @@ -0,0 +1,4 @@ + +arrow-triangle-solid-left + + diff --git a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-right.svg b/packages/opendesign/src/icons/svgs/fill/arrow-traingle-right.svg new file mode 100644 index 0000000000000000000000000000000000000000..b13302ad7a91fb736b2c6249a296445263103033 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/arrow-traingle-right.svg @@ -0,0 +1,4 @@ + +arrow-triangle-solid-right + + diff --git a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-up.svg b/packages/opendesign/src/icons/svgs/fill/arrow-traingle-up.svg new file mode 100644 index 0000000000000000000000000000000000000000..3eb80e7ad5be628156f64f4dae1b170c1ebef2c7 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/arrow-traingle-up.svg @@ -0,0 +1,5 @@ + + +arrow-triangle-solid-up + + diff --git a/packages/opendesign/src/icons/svgs/fill/chevron-down.svg b/packages/opendesign/src/icons/svgs/fill/chevron-down.svg new file mode 100644 index 0000000000000000000000000000000000000000..66b976e3237d8f243e28112d41f2e4839e5e9e86 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/chevron-down.svg @@ -0,0 +1,4 @@ + +chevron-down + + diff --git a/packages/opendesign/src/icons/svgs/fill/chevron-left.svg b/packages/opendesign/src/icons/svgs/fill/chevron-left.svg new file mode 100644 index 0000000000000000000000000000000000000000..52bee9e625bf4877fca2baa1040c22bc0a8de792 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/chevron-left.svg @@ -0,0 +1,4 @@ + +chevron-left + + diff --git a/packages/opendesign/src/icons/svgs/fill/chevron-right.svg b/packages/opendesign/src/icons/svgs/fill/chevron-right.svg new file mode 100644 index 0000000000000000000000000000000000000000..b2ddf739080111e1adea1e197ebc8bb677561ae1 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/chevron-right.svg @@ -0,0 +1,4 @@ + +chevron-right + + diff --git a/packages/opendesign/src/icons/svgs/fill/chevron-up.svg b/packages/opendesign/src/icons/svgs/fill/chevron-up.svg new file mode 100644 index 0000000000000000000000000000000000000000..29bd404e011e6742092abf06e7c9ed4553c1d88a --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/chevron-up.svg @@ -0,0 +1,4 @@ + +chevron-up + + diff --git a/packages/opendesign/src/icons/svgs/fill/done.svg b/packages/opendesign/src/icons/svgs/fill/done.svg new file mode 100644 index 0000000000000000000000000000000000000000..e295ef2ed58c49e901e3621414a6ef6b1f43c0e3 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/done.svg @@ -0,0 +1,4 @@ + +done + + diff --git a/packages/opendesign/src/icons/svgs/fill/ellipsis.svg b/packages/opendesign/src/icons/svgs/fill/ellipsis.svg new file mode 100644 index 0000000000000000000000000000000000000000..15f7108a9ccd3cc662b983fccc090af681593b88 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/ellipsis.svg @@ -0,0 +1,6 @@ + +ellipsis + + + + diff --git a/packages/opendesign/src/icons/svgs/fill/filter.svg b/packages/opendesign/src/icons/svgs/fill/filter.svg new file mode 100644 index 0000000000000000000000000000000000000000..e5ce5f489df32d6fcc848ffe2d324f2ced8a8cc2 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/filter.svg @@ -0,0 +1,4 @@ + +filter + + diff --git a/packages/opendesign/src/icons/svgs/fill/loading.svg b/packages/opendesign/src/icons/svgs/fill/loading.svg new file mode 100644 index 0000000000000000000000000000000000000000..5cff7c7401c17cff7a2b604c0d5c29cafbc9dfca --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/loading.svg @@ -0,0 +1,12 @@ + + +loading + + + + + + + + + diff --git a/packages/opendesign/src/icons/svgs/fill/minus.svg b/packages/opendesign/src/icons/svgs/fill/minus.svg new file mode 100644 index 0000000000000000000000000000000000000000..a2c66c1f3507e08cef156f2f9e0c502f353c0df6 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/minus.svg @@ -0,0 +1,4 @@ + +minus + + diff --git a/packages/opendesign/src/icons/svgs/fill/refresh.svg b/packages/opendesign/src/icons/svgs/fill/refresh.svg new file mode 100644 index 0000000000000000000000000000000000000000..2acdac4c4bfb0d5071107068f8376257f1691d7a --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/refresh.svg @@ -0,0 +1,4 @@ + +refresh + + diff --git a/packages/opendesign/src/icons/svgs/fill/search.svg b/packages/opendesign/src/icons/svgs/fill/search.svg new file mode 100644 index 0000000000000000000000000000000000000000..846548ace11935cdba25d0444c7dcf40c44ec565 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/search.svg @@ -0,0 +1,4 @@ + +search + + diff --git a/packages/opendesign/src/icons/svgs/fill/star.svg b/packages/opendesign/src/icons/svgs/fill/star.svg new file mode 100644 index 0000000000000000000000000000000000000000..6deab4a7a827dd1248b3245c35f13c62a33ed9cf --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/star.svg @@ -0,0 +1,4 @@ + +star + + diff --git a/packages/opendesign/src/icons/svgs/fill/x.svg b/packages/opendesign/src/icons/svgs/fill/x.svg new file mode 100644 index 0000000000000000000000000000000000000000..d739028ec0ed16920265d40e2973213e79a2ee37 --- /dev/null +++ b/packages/opendesign/src/icons/svgs/fill/x.svg @@ -0,0 +1,4 @@ + +cancel + + diff --git a/packages/opendesign/src/icons/svgs/stroke/arrow-right.svg b/packages/opendesign/src/icons/svgs/stroke/arrow-right.svg new file mode 100644 index 0000000000000000000000000000000000000000..939b57c5b54ecebb4a34168643726e264846f71b --- /dev/null +++ b/packages/opendesign/src/icons/svgs/stroke/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/opendesign/src/icons/svgs/stroke/link.svg b/packages/opendesign/src/icons/svgs/stroke/link.svg new file mode 100644 index 0000000000000000000000000000000000000000..c89dd41c2330024a38406a01d9863bacbb376cbe --- /dev/null +++ b/packages/opendesign/src/icons/svgs/stroke/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/opendesign/src/tokens/ascend-token.json b/packages/opendesign/src/tokens/ascend-token.json new file mode 100644 index 0000000000000000000000000000000000000000..526031d0fb3a4cd38383d37192667c170afe7eca --- /dev/null +++ b/packages/opendesign/src/tokens/ascend-token.json @@ -0,0 +1,2311 @@ +{ + "base": { + "name": "基础色(不同皮肤色相不变)", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "color-white", + "value": { + "light": "255, 255, 255", + "dark": "255, 255, 255" + } + }, + { + "key": "color-black", + "value": { + "light": "0, 0, 0", + "dark": "0, 0, 0" + } + } + ] + }, + "deepblue": { + "name": "深蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "deepblue-1", + "value": { + "light": "232, 240, 255", + "dark": "232, 240, 255" + } + }, + { + "key": "deepblue-2", + "value": { + "light": "194, 213, 254", + "dark": "194, 213, 254" + } + }, + { + "key": "deepblue-3", + "value": { + "light": "157, 184, 253", + "dark": "157, 184, 253" + } + }, + { + "key": "deepblue-4", + "value": { + "light": "120, 153, 252", + "dark": "120, 153, 252" + } + }, + { + "key": "deepblue-5", + "value": { + "light": "83, 119, 251", + "dark": "83, 119, 251" + } + }, + { + "key": "deepblue-6", + "value": { + "light": "46, 83, 250", + "dark": "46, 83, 250" + } + }, + { + "key": "deepblue-7", + "value": { + "light": "29, 55, 207", + "dark": "29, 55, 207" + } + }, + { + "key": "deepblue-8", + "value": { + "light": "15, 32, 163", + "dark": "15, 32, 163" + } + }, + { + "key": "deepblue-9", + "value": { + "light": "6, 15, 120", + "dark": "6, 15, 120" + } + }, + { + "key": "deepblue-10", + "value": { + "light": "0, 4, 47", + "dark": "0, 4, 47" + } + } + ] + }, + "green": { + "name": "绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "green-1", + "value": { + "light": "232, 255, 238", + "dark": "232, 255, 238" + } + }, + { + "key": "green-2", + "value": { + "light": "177, 239, 195", + "dark": "177, 239, 195" + } + }, + { + "key": "green-3", + "value": { + "light": "128, 224, 158", + "dark": "128, 224, 158" + } + }, + { + "key": "green-4", + "value": { + "light": "84, 208, 127", + "dark": "84, 208, 127" + } + }, + { + "key": "green-5", + "value": { + "light": "45, 193, 101", + "dark": "45, 193, 101" + } + }, + { + "key": "green-6", + "value": { + "light": "11, 177, 81", + "dark": "11, 177, 81" + } + }, + { + "key": "green-7", + "value": { + "light": "7, 152, 72", + "dark": "7, 152, 72" + } + }, + { + "key": "green-8", + "value": { + "light": "4, 127, 63", + "dark": "4, 127, 63" + } + }, + { + "key": "green-9", + "value": { + "light": "2, 102, 53", + "dark": "2, 102, 53" + } + }, + { + "key": "green-10", + "value": { + "light": "0, 77, 42", + "dark": "0, 77, 42" + } + } + ] + }, + "orange": { + "name": "橘红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "orange-1", + "value": { + "light": "255, 246, 232", + "dark": "255, 246, 232" + } + }, + { + "key": "orange-2", + "value": { + "light": "254, 226, 186", + "dark": "254, 226, 186" + } + }, + { + "key": "orange-3", + "value": { + "light": "253, 202, 140", + "dark": "253, 202, 140" + } + }, + { + "key": "orange-4", + "value": { + "light": "252, 176, 95", + "dark": "252, 176, 95" + } + }, + { + "key": "orange-5", + "value": { + "light": "251, 147, 50", + "dark": "251, 147, 50" + } + }, + { + "key": "orange-6", + "value": { + "light": "250, 115, 5", + "dark": "250, 115, 5" + } + }, + { + "key": "orange-7", + "value": { + "light": "207, 88, 3", + "dark": "207, 88, 3" + } + }, + { + "key": "orange-8", + "value": { + "light": "163, 64, 2", + "dark": "163, 64, 2" + } + }, + { + "key": "orange-9", + "value": { + "light": "120, 42, 1", + "dark": "120, 42, 1" + } + }, + { + "key": "orange-10", + "value": { + "light": "77, 24, 0", + "dark": "77, 24, 0" + } + } + ] + }, + "red": { + "name": "红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-1", + "value": { + "light": "255, 234, 232", + "dark": "255, 234, 232" + } + }, + { + "key": "red-2", + "value": { + "light": "250, 185, 182", + "dark": "250, 185, 182" + } + }, + { + "key": "red-3", + "value": { + "light": "245, 136, 134", + "dark": "245, 136, 134" + } + }, + { + "key": "red-4", + "value": { + "light": "240, 87, 90", + "dark": "240, 87, 90" + } + }, + { + "key": "red-5", + "value": { + "light": "235, 43, 52", + "dark": "235, 43, 52" + } + }, + { + "key": "red-6", + "value": { + "light": "230, 0, 18", + "dark": "230, 0, 18" + } + }, + { + "key": "red-7", + "value": { + "light": "192, 0, 45", + "dark": "192, 0, 45" + } + }, + { + "key": "red-8", + "value": { + "light": "153, 0, 23", + "dark": "153, 0, 23" + } + }, + { + "key": "red-9", + "value": { + "light": "115, 0, 21", + "dark": "115, 0, 21" + } + }, + { + "key": "red-10", + "value": { + "light": "77, 0, 17", + "dark": "77, 0, 17" + } + } + ] + }, + "huaweired": { + "name": "华为红", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-huawei", + "value": { + "light": "199, 0, 11", + "dark": "199, 0, 11" + } + } + ] + }, + "gray": { + "name": "中性灰", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "gray-1", + "value": { + "light": "255, 255, 255", + "dark": "255, 255, 255" + } + }, + { + "key": "gray-2", + "value": { + "light": "250, 250, 250", + "dark": "250, 250, 250" + } + }, + { + "key": "gray-3", + "value": { + "light": "247, 247, 247", + "dark": "247, 247, 247" + } + }, + { + "key": "gray-4", + "value": { + "light": "242, 242, 242", + "dark": "242, 242, 242" + } + }, + { + "key": "gray-5", + "value": { + "light": "235, 235, 235", + "dark": "235, 235, 235" + } + }, + { + "key": "gray-6", + "value": { + "light": "219, 219, 219", + "dark": "219, 219, 219" + } + }, + { + "key": "gray-7", + "value": { + "light": "189, 189, 189", + "dark": "189, 189, 189" + } + }, + { + "key": "gray-8", + "value": { + "light": "148, 148, 148", + "dark": "148, 148, 148" + } + }, + { + "key": "gray-9", + "value": { + "light": "110, 110, 110", + "dark": "110, 110, 110" + } + }, + { + "key": "gray-10", + "value": { + "light": "79, 79, 79", + "dark": "79, 79, 79" + } + }, + { + "key": "gray-11", + "value": { + "light": "48, 48, 48", + "dark": "48, 48, 48" + } + }, + { + "key": "gray-12", + "value": { + "light": "36, 36, 36", + "dark": "36, 36, 36" + } + }, + { + "key": "gray-13", + "value": { + "light": "18, 18, 18", + "dark": "18, 18, 18" + } + }, + { + "key": "gray-14", + "value": { + "light": "0, 0, 0", + "dark": "0, 0, 0" + } + } + ] + }, + "mixedgray": { + "name": "混合中性色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "mixedgray-1", + "value": { + "light": "255, 255, 255", + "dark": "255, 255, 255" + } + }, + { + "key": "mixedgray-2", + "value": { + "light": "244, 245, 247", + "dark": "244, 245, 247" + } + }, + { + "key": "mixedgray-3", + "value": { + "light": "237, 239, 242", + "dark": "237, 239, 242" + } + }, + { + "key": "mixedgray-4", + "value": { + "light": "232, 234, 237", + "dark": "232, 234, 237" + } + }, + { + "key": "mixedgray-5", + "value": { + "light": "224, 226, 230", + "dark": "224, 226, 230" + } + }, + { + "key": "mixedgray-6", + "value": { + "light": "209, 214, 219", + "dark": "209, 214, 219" + } + }, + { + "key": "mixedgray-7", + "value": { + "light": "179, 185, 191", + "dark": "179, 185, 191" + } + }, + { + "key": "mixedgray-8", + "value": { + "light": "144, 150, 158", + "dark": "144, 150, 158" + } + }, + { + "key": "mixedgray-9", + "value": { + "light": "104, 109, 117", + "dark": "104, 109, 117" + } + }, + { + "key": "mixedgray-10", + "value": { + "light": "79, 84, 92", + "dark": "79, 84, 92" + } + }, + { + "key": "mixedgray-11", + "value": { + "light": "55, 59, 66", + "dark": "55, 59, 66" + } + }, + { + "key": "mixedgray-12", + "value": { + "light": "32, 35, 41", + "dark": "32, 35, 41" + } + }, + { + "key": "mixedgray-13", + "value": { + "light": "18, 20, 23", + "dark": "18, 20, 23" + } + }, + { + "key": "mixedgray-14", + "value": { + "light": "0, 0, 0", + "dark": "0, 0, 0" + } + } + ] + }, + "yellow": { + "name": "黄色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "yellow-1", + "value": { + "light": "255, 255, 232", + "dark": "255, 255, 232" + } + }, + { + "key": "yellow-2", + "value": { + "light": "253, 251, 185", + "dark": "253, 251, 185" + } + }, + { + "key": "yellow-3", + "value": { + "light": "251, 244, 139", + "dark": "251, 244, 139" + } + }, + { + "key": "yellow-4", + "value": { + "light": "249, 233, 94", + "dark": "249, 233, 94" + } + }, + { + "key": "yellow-5", + "value": { + "light": "247, 221, 49", + "dark": "247, 221, 49" + } + }, + { + "key": "yellow-6", + "value": { + "light": "245, 205, 5", + "dark": "245, 205, 5" + } + }, + { + "key": "yellow-7", + "value": { + "light": "203, 163, 3", + "dark": "203, 163, 3" + } + }, + { + "key": "yellow-8", + "value": { + "light": "161, 124, 2", + "dark": "161, 124, 2" + } + }, + { + "key": "yellow-9", + "value": { + "light": "119, 87, 1", + "dark": "119, 87, 1" + } + }, + { + "key": "yellow-10", + "value": { + "light": "77, 54, 0", + "dark": "77, 54, 0" + } + } + ] + }, + "lime": { + "name": "黄绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "lime-1", + "value": { + "light": "251, 255, 232", + "dark": "251, 255, 232" + } + }, + { + "key": "lime-2", + "value": { + "light": "233, 245, 184", + "dark": "233, 245, 184" + } + }, + { + "key": "lime-3", + "value": { + "light": "213, 236, 139", + "dark": "213, 236, 139" + } + }, + { + "key": "lime-4", + "value": { + "light": "192, 226, 97", + "dark": "192, 226, 97" + } + }, + { + "key": "lime-5", + "value": { + "light": "169, 217, 59", + "dark": "169, 217, 59" + } + }, + { + "key": "lime-6", + "value": { + "light": "146, 207, 23", + "dark": "146, 207, 23" + } + }, + { + "key": "lime-7", + "value": { + "light": "116, 174, 15", + "dark": "116, 174, 15" + } + }, + { + "key": "lime-8", + "value": { + "light": "88, 142, 8", + "dark": "88, 142, 8" + } + }, + { + "key": "lime-9", + "value": { + "light": "63, 109, 3", + "dark": "63, 109, 3" + } + }, + { + "key": "lime-10", + "value": { + "light": "41, 77, 0", + "dark": "41, 77, 0" + } + } + ] + }, + "cyan": { + "name": "青色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "cyan-1", + "value": { + "light": "232, 255, 249", + "dark": "232, 255, 249" + } + }, + { + "key": "cyan-2", + "value": { + "light": "176, 240, 226", + "dark": "176, 240, 226" + } + }, + { + "key": "cyan-3", + "value": { + "light": "125, 225, 207", + "dark": "125, 225, 207" + } + }, + { + "key": "cyan-4", + "value": { + "light": "79, 221, 191", + "dark": "79, 221, 191" + } + }, + { + "key": "cyan-5", + "value": { + "light": "38, 196, 177", + "dark": "38, 196, 177" + } + }, + { + "key": "cyan-6", + "value": { + "light": "3, 181, 165", + "dark": "3, 181, 165" + } + }, + { + "key": "cyan-7", + "value": { + "light": "2, 155, 147", + "dark": "2, 155, 147" + } + }, + { + "key": "cyan-8", + "value": { + "light": "1, 129, 127", + "dark": "1, 129, 127" + } + }, + { + "key": "cyan-9", + "value": { + "light": "0, 101, 103", + "dark": "0, 101, 103" + } + }, + { + "key": "cyan-10", + "value": { + "light": "0, 73, 77", + "dark": "0, 73, 77" + } + } + ] + }, + "blue": { + "name": "蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "blue-1", + "value": { + "light": "232, 249, 255", + "dark": "232, 249, 255" + } + }, + { + "key": "blue-2", + "value": { + "light": "185, 233, 252", + "dark": "185, 233, 252" + } + }, + { + "key": "blue-3", + "value": { + "light": "138, 214, 249", + "dark": "138, 214, 249" + } + }, + { + "key": "blue-4", + "value": { + "light": "93, 192, 246", + "dark": "93, 192, 246" + } + }, + { + "key": "blue-5", + "value": { + "light": "48, 168, 243", + "dark": "48, 168, 243" + } + }, + { + "key": "blue-6", + "value": { + "light": "5, 142, 240", + "dark": "5, 142, 240" + } + }, + { + "key": "blue-7", + "value": { + "light": "3, 111, 199", + "dark": "3, 111, 199" + } + }, + { + "key": "blue-8", + "value": { + "light": "2, 83, 158", + "dark": "2, 83, 158" + } + }, + { + "key": "blue-9", + "value": { + "light": "1, 57, 117", + "dark": "1, 57, 117" + } + }, + { + "key": "blue-10", + "value": { + "light": "0, 34, 77", + "dark": "0, 34, 77" + } + } + ] + }, + "purple": { + "name": "紫色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "purple-1", + "value": { + "light": "245, 232, 255", + "dark": "245, 232, 255" + } + }, + { + "key": "purple-2", + "value": { + "light": "225, 192, 253", + "dark": "225, 192, 253" + } + }, + { + "key": "purple-3", + "value": { + "light": "203, 152, 251", + "dark": "203, 152, 251" + } + }, + { + "key": "purple-4", + "value": { + "light": "178, 113, 248", + "dark": "178, 113, 248" + } + }, + { + "key": "purple-5", + "value": { + "light": "152, 75, 246", + "dark": "152, 75, 246" + } + }, + { + "key": "purple-6", + "value": { + "light": "123, 37, 244", + "dark": "123, 37, 244" + } + }, + { + "key": "purple-7", + "value": { + "light": "92, 23, 202", + "dark": "92, 23, 202" + } + }, + { + "key": "purple-8", + "value": { + "light": "64, 12, 160", + "dark": "64, 12, 160" + } + }, + { + "key": "purple-9", + "value": { + "light": "41, 4, 118", + "dark": "41, 4, 118" + } + }, + { + "key": "purple-10", + "value": { + "light": "22, 0, 77", + "dark": "22, 0, 77" + } + } + ] + }, + "pink": { + "name": "粉色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "pink-1", + "value": { + "light": "255, 232, 253", + "dark": "255, 232, 253" + } + }, + { + "key": "pink-2", + "value": { + "light": "246, 188, 243", + "dark": "246, 188, 243" + } + }, + { + "key": "pink-3", + "value": { + "light": "238, 146, 235", + "dark": "238, 146, 235" + } + }, + { + "key": "pink-4", + "value": { + "light": "229, 107, 229", + "dark": "229, 107, 229" + } + }, + { + "key": "pink-5", + "value": { + "light": "216, 71, 221", + "dark": "216, 71, 221" + } + }, + { + "key": "pink-6", + "value": { + "light": "199, 37, 212", + "dark": "199, 37, 212" + } + }, + { + "key": "pink-7", + "value": { + "light": "163, 23, 178", + "dark": "163, 23, 178" + } + }, + { + "key": "pink-8", + "value": { + "light": "127, 13, 144", + "dark": "127, 13, 144" + } + }, + { + "key": "pink-9", + "value": { + "light": "93, 5, 110", + "dark": "93, 5, 110" + } + }, + { + "key": "pink-10", + "value": { + "light": "61, 0, 77", + "dark": "61, 0, 77" + } + } + ] + }, + "rosyred": { + "name": "玫红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "rosyred-1", + "value": { + "light": "255, 232, 240", + "dark": "255, 232, 240" + } + }, + { + "key": "rosyred-2", + "value": { + "light": "249, 185, 209", + "dark": "249, 185, 209" + } + }, + { + "key": "rosyred-3", + "value": { + "light": "243, 141, 182", + "dark": "243, 141, 182" + } + }, + { + "key": "rosyred-4", + "value": { + "light": "238, 98, 158", + "dark": "238, 98, 158" + } + }, + { + "key": "rosyred-5", + "value": { + "light": "232, 57, 139", + "dark": "232, 57, 139" + } + }, + { + "key": "rosyred-6", + "value": { + "light": "226, 18, 122", + "dark": "226, 18, 122" + } + }, + { + "key": "rosyred-7", + "value": { + "light": "189, 11, 106", + "dark": "189, 11, 106" + } + }, + { + "key": "rosyred-8", + "value": { + "light": "151, 6, 88", + "dark": "151, 6, 88" + } + }, + { + "key": "rosyred-9", + "value": { + "light": "114, 2, 69", + "dark": "114, 2, 69" + } + }, + { + "key": "rosyred-10", + "value": { + "light": "77, 0, 48", + "dark": "77, 0, 48" + } + } + ] + }, + "info": { + "name": "信息色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-info1", + "description": "一级/强调/标题", + "value": { + "light": "rgb(var(--o-mixedgray-14))", + "dark": "rgb(var(--o-mixedgray-14))" + } + }, + { + "key": "color-info2", + "description": "二级/次强调/正文", + "value": { + "light": "rgb(var(--o-mixedgray-11))", + "dark": "rgb(var(--o-mixedgray-11))" + } + }, + { + "key": "color-info3", + "description": "三级/辅助信息", + "value": { + "light": "rgb(var(--o-mixedgray-9))", + "dark": "rgb(var(--o-mixedgray-9))" + } + }, + { + "key": "color-info4", + "description": "置灰/禁用", + "value": { + "light": "rgb(var(--o-mixedgray-7))", + "dark": "rgb(var(--o-mixedgray-7))" + } + }, + { + "key": "color-info1-inverse", + "description": "一级/次强调/正文反色", + "value": { + "light": "rgb(var(--o-mixedgray-1))", + "dark": "rgb(var(--o-mixedgray-1))" + } + }, + { + "key": "color-info2-inverse", + "description": "二级/辅助信息反色", + "value": { + "light": "rgb(var(--o-mixedgray-1))", + "dark": "rgb(var(--o-mixedgray-1))" + } + }, + { + "key": "color-info3-inverse", + "description": "三级/辅助信息反色", + "value": { + "light": "rgb(var(--o-mixedgray-1))", + "dark": "rgb(var(--o-mixedgray-1))" + } + }, + { + "key": "color-info4-inverse", + "description": "置灰/禁用反色", + "value": { + "light": "rgb(var(--o-mixedgray-7))", + "dark": "rgb(var(--o-mixedgray-7))" + } + } + ] + }, + "mask": { + "name": "遮罩色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-mask1", + "description": "全局遮罩", + "value": { + "light": "rgba(var(--o-mixedgray-13), .6)", + "dark": "rgba(var(--o-mixedgray-13), .6)" + } + }, + { + "key": "color-mask2", + "description": "局部遮罩", + "value": { + "light": "rgba(var(--o-mixedgray-13), .2)", + "dark": "rgba(var(--o-mixedgray-13), .2)" + } + } + ] + }, + "fill": { + "name": "填充色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-fill1", + "description": "一级填充/页面背景", + "value": { + "light": "rgb(var(--o-mixedgray-2))", + "dark": "rgb(var(--o-mixedgray-2))" + } + }, + { + "key": "color-fill2", + "description": "二级填充/区块、卡片", + "value": { + "light": "rgb(var(--o-mixedgray-1))", + "dark": "rgb(var(--o-mixedgray-1))" + } + }, + { + "key": "color-fill3", + "description": "三级填充/卡片", + "value": { + "light": "rgb(var(--o-mixedgray-3))", + "dark": "rgb(var(--o-mixedgray-3))" + } + } + ] + }, + "control": { + "name": "控件色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-control-light", + "description": "很浅背景/表格背景色", + "value": { + "light": "rgb(var(--o-mixedgray-1))", + "dark": "rgb(var(--o-mixedgray-1))" + } + }, + { + "key": "color-control1", + "description": "常规，常用于边框", + "value": { + "light": "rgb(var(--o-mixedgray-7))", + "dark": "rgb(var(--o-mixedgray-7))" + } + }, + { + "key": "color-control2", + "description": "hover，常用于边框", + "value": { + "light": "rgb(var(--o-mixedgray-9))", + "dark": "rgb(var(--o-mixedgray-9))" + } + }, + { + "key": "color-control3", + "description": "激活，常用于边框", + "value": { + "light": "rgb(var(--o-mixedgray-12))", + "dark": "rgb(var(--o-mixedgray-12))" + } + }, + { + "key": "color-control4", + "description": "边框禁用/深色背景分割线", + "value": { + "light": "rgb(var(--o-mixedgray-6))", + "dark": "rgb(var(--o-mixedgray-6))" + } + }, + { + "key": "color-control1-light", + "description": "浅色背景分割线/表格线/表格描边", + "value": { + "light": "rgb(var(--o-mixedgray-5))", + "dark": "rgb(var(--o-mixedgray-5))" + } + }, + { + "key": "color-control2-light", + "description": "表格行hover、激活/手风琴hover/下拉菜单hover", + "value": { + "light": "rgb(var(--o-mixedgray-3))", + "dark": "rgb(var(--o-mixedgray-3))" + } + }, + { + "key": "color-control3-light", + "description": "表头背景色/手风琴激活/下拉菜单激活", + "value": { + "light": "rgb(var(--o-mixedgray-4))", + "dark": "rgb(var(--o-mixedgray-4))" + } + }, + { + "key": "color-control4-light", + "description": "禁用背景", + "value": { + "light": "rgb(var(--o-mixedgray-3))", + "dark": "rgb(var(--o-mixedgray-3))" + } + } + ] + }, + "primary": { + "name": "强调色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-primary1", + "description": "常规", + "value": { + "light": "rgb(var(--o-mixedgray-12))", + "dark": "rgb(var(--o-mixedgray-12))" + } + }, + { + "key": "color-primary2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-mixedgray-11))", + "dark": "rgb(var(--o-mixedgray-11))" + } + }, + { + "key": "color-primary3", + "description": "激活", + "value": { + "light": "rgb(var(--o-mixedgray-13))", + "dark": "rgb(var(--o-mixedgray-13))" + } + }, + { + "key": "color-primary4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-mixedgray-6))", + "dark": "rgb(var(--o-mixedgray-6))" + } + }, + { + "key": "color-primary1-light", + "description": "浅/常规", + "value": { + "light": "rgb(var(--o-mixedgray-12))", + "dark": "rgb(var(--o-mixedgray-12))" + } + }, + { + "key": "color-primary2-light", + "description": "浅/悬浮", + "value": { + "light": "rgb(var(--o-mixedgray-11))", + "dark": "rgb(var(--o-mixedgray-11))" + } + }, + { + "key": "color-primary3-light", + "description": "浅/激活", + "value": { + "light": "rgb(var(--o-mixedgray-13))", + "dark": "rgb(var(--o-mixedgray-13))" + } + }, + { + "key": "color-primary4-light", + "description": "浅/禁用", + "value": { + "light": "rgb(var(--o-mixedgray-6))", + "dark": "rgb(var(--o-mixedgray-6))" + } + } + ] + }, + "success": { + "name": "成功色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-success1", + "description": "常规", + "value": { + "light": "rgb(var(--o-green-6))", + "dark": "rgb(var(--o-green-6))" + } + }, + { + "key": "color-success2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-green-4))", + "dark": "rgb(var(--o-green-4))" + } + }, + { + "key": "color-success3", + "description": "激活", + "value": { + "light": "rgb(var(--o-green-7))", + "dark": "rgb(var(--o-green-7))" + } + }, + { + "key": "color-success4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success1-light", + "description": "浅/常规", + "value": { + "light": "rgb(var(--o-green-2))", + "dark": "rgb(var(--o-green-2))" + } + }, + { + "key": "color-success2-light", + "description": "浅/悬浮", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success3-light", + "description": "浅/激活", + "value": { + "light": "rgb(var(--o-green-4))", + "dark": "rgb(var(--o-green-4))" + } + }, + { + "key": "color-success4-light", + "description": "浅/禁用", + "value": { + "light": "rgb(var(--o-green-1))", + "dark": "rgb(var(--o-green-1))" + } + } + ] + }, + "warning": { + "name": "告警色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-warning1", + "description": "常规", + "value": { + "light": "rgb(var(--o-orange-6))", + "dark": "rgb(var(--o-orange-6))" + } + }, + { + "key": "color-warning2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-orange-4))", + "dark": "rgb(var(--o-orange-4))" + } + }, + { + "key": "color-warning3", + "description": "激活", + "value": { + "light": "rgb(var(--o-orange-7))", + "dark": "rgb(var(--o-orange-7))" + } + }, + { + "key": "color-warning4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning1-light", + "description": "浅/常规", + "value": { + "light": "rgb(var(--o-orange-2))", + "dark": "rgb(var(--o-orange-2))" + } + }, + { + "key": "color-warning2-light", + "description": "浅/悬浮", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning3-light", + "description": "浅/激活", + "value": { + "light": "rgb(var(--o-orange-4))", + "dark": "rgb(var(--o-orange-4))" + } + }, + { + "key": "color-warning4-light", + "description": "浅/禁用", + "value": { + "light": "rgb(var(--o-orange-1))", + "dark": "rgb(var(--o-orange-1))" + } + } + ] + }, + "danger": { + "name": "危险色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-danger1", + "description": "常规", + "value": { + "light": "rgb(var(--o-red-6))", + "dark": "rgb(var(--o-red-6))" + } + }, + { + "key": "color-danger2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-red-4))", + "dark": "rgb(var(--o-red-4))" + } + }, + { + "key": "color-danger3", + "description": "激活", + "value": { + "light": "rgb(var(--o-red-7))", + "dark": "rgb(var(--o-red-7))" + } + }, + { + "key": "color-danger4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger1-light", + "description": "浅/常规", + "value": { + "light": "rgb(var(--o-red-2))", + "dark": "rgb(var(--o-red-2))" + } + }, + { + "key": "color-danger2-light", + "description": "浅/悬浮", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger3-light", + "description": "浅/激活", + "value": { + "light": "rgb(var(--o-red-4))", + "dark": "rgb(var(--o-red-4))" + } + }, + { + "key": "color-danger4-light", + "description": "浅/禁用", + "value": { + "light": "rgb(var(--o-red-1))", + "dark": "rgb(var(--o-red-1))" + } + } + ] + }, + "shadow": { + "name": "阴影", + "type": "shadow", + "typeName": "阴影", + "value": [ + { + "key": "shadow-1", + "name": "阴影1", + "description": "用于卡片、小弹窗、楼层阴影", + "value": { + "light": "0 3px 8px rgba(var(--o-mixedgray-13), 0.08)", + "dark": "0 3px 8px rgba(var(--o-mixedgray-13), 0.08)" + } + }, + { + "key": "shadow-2", + "name": "阴影2", + "description": "用于卡片悬浮阴影", + "value": { + "light": "0 6px 24px rgba(var(--o-mixedgray-13), 0.08)", + "dark": "0 6px 24px rgba(var(--o-mixedgray-13), 0.08)" + } + }, + { + "key": "shadow-3", + "name": "阴影3", + "description": "用于提示阴影", + "value": { + "light": "0 10px 40px rgba(var(--o-mixedgray-13), 0.08)", + "dark": "0 10px 40px rgba(var(--o-mixedgray-13), 0.08)" + } + } + ] + }, + "gap": { + "name": "间距", + "type": "gap", + "typeName": "间距", + "value": [ + { + "key": "gap-1", + "name": "间距1", + "description": "用于组件之间的间距1", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "gap-2", + "name": "间距2", + "description": "用于组件之间的间距2", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "gap-3", + "name": "间距3", + "description": "用于组件之间的间距3", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "gap-4", + "name": "间距4", + "description": "用于组件之间的间距4", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "gap-5", + "name": "间距5", + "description": "用于组件之间的间距5", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "gap-6", + "name": "间距6", + "description": "用于组件之间的间距6", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "gap-7", + "name": "间距7", + "description": "用于组件之间的间距7", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "gap-8", + "name": "间距8", + "description": "用于组件之间的间距8", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "gap-9", + "name": "间距9", + "description": "用于组件之间的间距9", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "gap-10", + "name": "间距10", + "description": "用于组件之间的间距10", + "value": { + "light": "72px", + "dark": "72px" + } + } + ] + }, + "size": { + "name": "组件尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "size-xs", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "size-s", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "size-m", + "name": "中尺寸", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "size-l", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "size-xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "size-xxl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "56px", + "dark": "56px" + } + } + ] + }, + "icon_size": { + "name": "图标尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "icon_size-xs", + "name": "超小尺寸图标", + "description": "小尺寸", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "icon_size-s", + "name": "小尺寸图标", + "description": "小尺寸", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "icon_size-m", + "name": "中尺寸图标", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "icon_size-l", + "name": "大尺寸图标", + "description": "尺寸", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "icon_size-xl", + "name": "大尺寸图标", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "icon_size-xxl", + "name": "大尺寸图标", + "description": "尺寸", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "icon_size-xxxl", + "name": "大尺寸图标", + "description": "尺寸", + "value": { + "light": "72px", + "dark": "72px" + } + }, + { + "key": "icon_size-xxxxl", + "name": "大尺寸图标", + "description": "尺寸", + "value": { + "light": "96px", + "dark": "96px" + } + } + ] + }, + "font_size": { + "name": "字体尺寸", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "font_size-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "font_size-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "56px", + "dark": "56px" + } + }, + { + "key": "font_size-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "font_size-display4", + "name": "四级数据展示", + "description": "四级数据展示", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "font_size-display5", + "name": "五级数据展示", + "description": "五级数据展示", + "value": { + "light": "36px", + "dark": "36px" + } + }, + { + "key": "font_size-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "font_size-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "key": "font_size-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "font_size-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "font_size-text1", + "name": "常规正文", + "description": "常规正文", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "font_size-text2", + "name": "大号正文", + "description": "大号正文", + "value": { + "light": "18px", + "dark": "18px" + } + }, + { + "key": "font_size-tip1", + "name": "提示文本1", + "description": "提示文本1", + "value": { + "light": "14px", + "dark": "14px" + } + }, + { + "key": "font_size-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "12px", + "dark": "12px" + } + } + ] + }, + "line_height": { + "name": "字体行高", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "line_height-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "90px", + "dark": "90px" + } + }, + { + "key": "line_height-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "80px", + "dark": "80px" + } + }, + { + "key": "line_height-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "line_height-display4", + "name": "四级数据展示", + "description": "四级数据展示", + "value": { + "light": "56px", + "dark": "56px" + } + }, + { + "key": "line_height-display5", + "name": "五级数据展示", + "description": "五级数据展示", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "line_height-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "44px", + "dark": "44px" + } + }, + { + "key": "line_height-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "line_height-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "line_height-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "key": "line_height-h5", + "name": "五级标题", + "description": "五级标题", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "key": "line_height-text1", + "name": "正文", + "description": "正文", + "value": { + "light": "22px", + "dark": "22px" + } + }, + { + "key": "line_height-text2", + "name": "正文-大", + "description": "正文-大", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "line_height-tip1", + "name": "提示文本1", + "description": "提示文本1", + "value": { + "light": "22px", + "dark": "22px" + } + }, + { + "key": "line_height-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "18px", + "dark": "18px" + } + } + ] + }, + "radius": { + "name": "圆角尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "radius-s", + "name": "小尺寸圆角", + "description": "小尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-m", + "name": "中尺寸圆角", + "description": "中尺寸圆角", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "radius-l", + "name": "大尺寸圆角", + "description": "大尺寸圆角", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "radius-xl", + "name": "大尺寸圆角", + "description": "大尺寸圆角", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "radius-control-l", + "name": "大尺寸控件圆角", + "description": "大尺寸控件圆角", + "value": { + "light": "var(--o-radius-l)", + "dark": "var(--o-radius-l)" + } + }, + { + "key": "radius-control-m", + "name": "中尺寸控件圆角", + "description": "中尺寸控件圆角", + "value": { + "light": "var(--o-radius-m)", + "dark": "var(--o-radius-m)" + } + }, + { + "key": "radius-control-s", + "name": "小尺寸控件圆角", + "description": "小尺寸控件圆角", + "value": { + "light": "var(--o-radius-s)", + "dark": "var(--o-radius-s)" + } + } + ] + }, + "duration": { + "name": "动画持续时间", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "duration-s", + "name": "持续时间", + "description": "用于退出屏幕的动画", + "value": { + "light": "200ms", + "dark": "200ms" + } + }, + { + "key": "duration-m1", + "name": "持续时间", + "description": "用于当曲线为standard-in时进入屏幕的动画", + "value": { + "light": "250ms", + "dark": "250ms" + } + }, + { + "key": "duration-m2", + "name": "持续时间", + "description": "用于当曲线为standard时开始、结束的动画", + "value": { + "light": "300ms", + "dark": "300ms" + } + }, + { + "key": "duration-m3", + "name": "持续时间", + "description": "用于当曲线为emphasized-in时进入屏幕的动画", + "value": { + "light": "400ms", + "dark": "400ms" + } + }, + { + "key": "duration-l", + "name": "持续时间", + "description": "用于当曲线为emphasized时开始、结束的动画", + "value": { + "light": "500ms", + "dark": "500ms" + } + }, + { + "key": "duration-xl", + "name": "持续时间", + "description": "用于当曲线为emphasized时，轮播切换动画", + "value": { + "light": "1000ms", + "dark": "1000ms" + } + } + ] + }, + "easing": { + "name": "动画曲线", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "easing-linear", + "name": "线性动画曲线", + "description": "线性曲线", + "value": { + "light": "cubic-bezier(0, 0, 1, 1)", + "dark": "cubic-bezier(0, 0, 1, 1)" + } + }, + { + "key": "easing-standard", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-standard-in", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0, 0, 0, 1)", + "dark": "cubic-bezier(0, 0, 0, 1)" + } + }, + { + "key": "easing-standard-out", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.3, 0, 1, 1)", + "dark": "cubic-bezier(0.3, 0, 1, 1)" + } + }, + { + "key": "easing-emphasized", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-emphasized-in", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.3, 0, 0.8, 0.15)", + "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)" + } + }, + { + "key": "easing-emphasized-out", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.05, 0.7, 0.1, 1)", + "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)" + } + } + ] + } +} diff --git a/packages/opendesign/src/tokens/opendesign-token.json b/packages/opendesign/src/tokens/opendesign-token.json new file mode 100644 index 0000000000000000000000000000000000000000..d34be7e9b3c9b762c9876625c4c9193310425e24 --- /dev/null +++ b/packages/opendesign/src/tokens/opendesign-token.json @@ -0,0 +1,1688 @@ +{ + "base": { + "name": "基础色(不同皮肤色相不变)", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "color-white", + "value": { + "light": "255, 255, 255", + "dark": "255, 255, 255" + } + }, + { + "key": "color-black", + "value": { + "light": "0, 0, 0", + "dark": "0, 0, 0" + } + } + ] + }, + "blue": { + "name": "蓝色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "blue-1", + "value": { + "light": "232, 243, 255", + "dark": "0, 13, 77" + } + }, + { + "key": "blue-2", + "value": { + "light": "190, 218, 255", + "dark": "4, 27, 121" + } + }, + { + "key": "blue-3", + "value": { + "light": "148, 191, 255", + "dark": "14, 50, 166" + } + }, + { + "key": "blue-4", + "value": { + "light": "106, 161, 255", + "dark": "29, 77, 210" + } + }, + { + "key": "blue-5", + "value": { + "light": "64, 128, 255", + "dark": "48, 111, 255" + } + }, + { + "key": "blue-6", + "value": { + "light": "22, 93, 255", + "dark": "60, 126, 255" + } + }, + { + "key": "blue-7", + "value": { + "light": "14, 66, 210", + "dark": "104, 159, 255" + } + }, + { + "key": "blue-8", + "value": { + "light": "7, 44, 166", + "dark": "147, 190, 255" + } + }, + { + "key": "blue-9", + "value": { + "light": "3, 26, 121", + "dark": "190, 218, 255" + } + }, + { + "key": "blue-10", + "value": { + "light": "0, 13, 77", + "dark": "234, 244, 255" + } + } + ] + }, + "yellow": { + "name": "黄色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "yellow-1", + "value": { + "light": "254, 255, 232", + "dark": "77, 56, 0" + } + }, + { + "key": "yellow-2", + "value": { + "light": "254, 254, 190", + "dark": "120, 94, 7" + } + }, + { + "key": "yellow-3", + "value": { + "light": "253, 250, 148", + "dark": "163, 134, 20" + } + }, + { + "key": "yellow-4", + "value": { + "light": "252, 242, 107", + "dark": "207, 179, 37" + } + }, + { + "key": "yellow-5", + "value": { + "light": "251, 232, 66", + "dark": "250, 225, 60" + } + }, + { + "key": "yellow-6", + "value": { + "light": "250, 220, 25", + "dark": "251, 233, 75" + } + }, + { + "key": "yellow-7", + "value": { + "light": "207, 175, 15", + "dark": "252, 243, 116" + } + }, + { + "key": "yellow-8", + "value": { + "light": "163, 132, 8", + "dark": "253, 250, 157" + } + }, + { + "key": "yellow-9", + "value": { + "light": "120, 93, 3", + "dark": "254, 254, 198" + } + }, + { + "key": "yellow-10", + "value": { + "light": "77, 56, 0", + "dark": "254, 255, 240" + } + } + ] + }, + "green": { + "name": "绿色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "green-1", + "value": { + "light": "232, 255, 234", + "dark": "0, 77, 28" + } + }, + { + "key": "green-2", + "value": { + "light": "175, 240, 181", + "dark": "4, 102, 37" + } + }, + { + "key": "green-3", + "value": { + "light": "123, 225, 136", + "dark": "10, 128, 45" + } + }, + { + "key": "green-4", + "value": { + "light": "76, 210, 99", + "dark": "18, 154, 55" + } + }, + { + "key": "green-5", + "value": { + "light": "35, 195, 67", + "dark": "29, 180, 64" + } + }, + { + "key": "green-6", + "value": { + "light": "0, 180, 42", + "dark": "39, 195, 70" + } + }, + { + "key": "green-7", + "value": { + "light": "0, 154, 41", + "dark": "80, 210, 102" + } + }, + { + "key": "green-8", + "value": { + "light": "0, 128, 38", + "dark": "126, 225, 139" + } + }, + { + "key": "green-9", + "value": { + "light": "0, 102, 34", + "dark": "178, 240, 183" + } + }, + { + "key": "green-10", + "value": { + "light": "0, 77, 28", + "dark": "235, 255, 236" + } + } + ] + }, + "orange": { + "name": "橘红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "orange-1", + "value": { + "light": "255, 247, 232", + "dark": "77, 27, 0" + } + }, + { + "key": "orange-2", + "value": { + "light": "255, 228, 186", + "dark": "121, 48, 4" + } + }, + { + "key": "orange-3", + "value": { + "light": "255, 207, 139", + "dark": "166, 75, 10" + } + }, + { + "key": "orange-4", + "value": { + "light": "255, 182, 93", + "dark": "210, 105, 19" + } + }, + { + "key": "orange-5", + "value": { + "light": "255, 154, 46", + "dark": "255, 141, 31" + } + }, + { + "key": "orange-6", + "value": { + "light": "255, 125, 0", + "dark": "255, 150, 38" + } + }, + { + "key": "orange-7", + "value": { + "light": "210, 95, 0", + "dark": "255, 179, 87" + } + }, + { + "key": "orange-8", + "value": { + "light": "166, 69, 0", + "dark": "255, 205, 135" + } + }, + { + "key": "orange-9", + "value": { + "light": "121, 46, 0", + "dark": "255, 227, 184" + } + }, + { + "key": "orange-10", + "value": { + "light": "77, 27, 0", + "dark": "255, 247, 232" + } + } + ] + }, + "red": { + "name": "红色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "red-1", + "value": { + "light": "255, 236, 232", + "dark": "77, 0, 10" + } + }, + { + "key": "red-2", + "value": { + "light": "253, 205, 197", + "dark": "119, 6, 17" + } + }, + { + "key": "red-3", + "value": { + "light": "251, 172, 163", + "dark": "161, 22, 31" + } + }, + { + "key": "red-4", + "value": { + "light": "249, 137, 129", + "dark": "203, 46, 52" + } + }, + { + "key": "red-5", + "value": { + "light": "247, 101, 96", + "dark": "245, 78, 78" + } + }, + { + "key": "red-6", + "value": { + "light": "245, 63, 63", + "dark": "247, 105, 101" + } + }, + { + "key": "red-7", + "value": { + "light": "203, 39, 45", + "dark": "249, 141, 134" + } + }, + { + "key": "red-8", + "value": { + "light": "161, 21, 30", + "dark": "251, 176, 167" + } + }, + { + "key": "red-9", + "value": { + "light": "119, 8, 19", + "dark": "253, 209, 202" + } + }, + { + "key": "red-10", + "value": { + "light": "77, 0, 10", + "dark": "255, 240, 236" + } + } + ] + }, + "gray": { + "name": "中性灰", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "gray-1", + "value": { + "light": "255, 255, 255", + "dark": "0, 0, 0" + } + }, + { + "key": "gray-2", + "value": { + "light": "238, 238, 238", + "dark": "36, 36, 36" + } + }, + { + "key": "gray-3", + "value": { + "light": "221, 221, 221", + "dark": "57, 57, 57" + } + }, + { + "key": "gray-4", + "value": { + "light": "198, 198, 198", + "dark": "94, 94, 94" + } + }, + { + "key": "gray-5", + "value": { + "light": "139, 139, 139", + "dark": "119, 119, 122" + } + }, + { + "key": "gray-6", + "value": { + "light": "119, 119, 119", + "dark": "166, 166, 166" + } + }, + { + "key": "gray-7", + "value": { + "light": "94, 94, 94", + "dark": "221, 221, 221" + } + }, + { + "key": "gray-8", + "value": { + "light": "75, 75, 75", + "dark": "238, 238, 238" + } + }, + { + "key": "gray-9", + "value": { + "light": "44, 44, 44", + "dark": "243, 243, 243" + } + }, + { + "key": "gray-10", + "value": { + "light": "0, 0, 0", + "dark": "255, 255, 255" + } + } + ] + }, + "mixedgray": { + "name": "混合中性色", + "type": "palette", + "typeName": "色盘", + "value": [ + { + "key": "mixedgray-1", + "value": { + "light": "247, 248, 250", + "dark": "23, 23, 26" + } + }, + { + "key": "mixedgray-2", + "value": { + "light": "242, 243, 245", + "dark": "46, 46, 48" + } + }, + { + "key": "mixedgray-3", + "value": { + "light": "229, 230, 235", + "dark": "72, 72, 73" + } + }, + { + "key": "mixedgray-4", + "value": { + "light": "201, 205, 212", + "dark": "95, 95, 96" + } + }, + { + "key": "mixedgray-5", + "value": { + "light": "169, 174, 184", + "dark": "120, 120, 122" + } + }, + { + "key": "mixedgray-6", + "value": { + "light": "134, 144, 156", + "dark": "146, 146, 147" + } + }, + { + "key": "mixedgray-7", + "value": { + "light": "107, 119, 133", + "dark": "171, 171, 172" + } + }, + { + "key": "mixedgray-8", + "value": { + "light": "78, 89, 105", + "dark": "197, 197, 197" + } + }, + { + "key": "mixedgray-9", + "value": { + "light": "39, 46, 59", + "dark": "223, 223, 223" + } + }, + { + "key": "mixedgray-10", + "value": { + "light": "29, 33, 41", + "dark": "246, 246, 246" + } + } + ] + }, + "info": { + "name": "信息色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-info1", + "description": "一级/强调/标题", + "value": { + "light": "rgb(var(--o-gray-10))", + "dark": "rgb(var(--o-gray-10))" + } + }, + { + "key": "color-info2", + "description": "二级/次强调/正文", + "value": { + "light": "rgb(var(--o-gray-8))", + "dark": "rgb(var(--o-gray-8))" + } + }, + { + "key": "color-info3", + "description": "三级/辅助信息", + "value": { + "light": "rgb(var(--o-gray-6))", + "dark": "rgb(var(--o-gray-6))" + } + }, + { + "key": "color-info4", + "description": "置灰/禁用", + "value": { + "light": "rgb(var(--o-gray-4))", + "dark": "rgb(var(--o-gray-4))" + } + }, + { + "key": "color-info1-inverse", + "description": "一级/次强调/正文反色", + "value": { + "light": "rgb(var(--o-gray-1))", + "dark": "rgb(var(--o-gray-1))" + } + }, + { + "key": "color-info2-inverse", + "description": "二级/辅助信息反色", + "value": { + "light": "rgb(var(--o-gray-3))", + "dark": "rgb(var(--o-gray-3))" + } + }, + { + "key": "color-info3-inverse", + "description": "三级/辅助信息反色", + "value": { + "light": "rgb(var(--o-gray-5))", + "dark": "rgb(var(--o-gray-5))" + } + }, + { + "key": "color-info4-inverse", + "description": "置灰/禁用反色", + "value": { + "light": "rgb(var(--o-gray-7))", + "dark": "rgb(var(--o-gray-7))" + } + } + ] + }, + "mask": { + "name": "遮罩色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-mask1", + "description": "全局遮罩", + "value": { + "light": "rgba(var(--o-gray-10), .2)", + "dark": "rgba(var(--o-gray-10), .2)" + } + }, + { + "key": "color-mask2", + "description": "局部遮罩", + "value": { + "light": "rgba(var(--o-gray-10), .1)", + "dark": "rgba(var(--o-gray-10), .1)" + } + } + ] + }, + "fill": { + "name": "填充色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-fill1", + "description": "一级填充/页面背景", + "value": { + "light": "rgb(var(--o-mixedgray-1))", + "dark": "rgb(var(--o-mixedgray-1))" + } + }, + { + "key": "color-fill2", + "description": "二级填充/区块、卡片", + "value": { + "light": "rgb(var(--o-gray-1))", + "dark": "rgb(var(--o-gray-1))" + } + }, + { + "key": "color-fill3", + "description": "三级填充/卡片", + "value": { + "light": "rgb(var(--o-mixedgray-3))", + "dark": "rgb(var(--o-mixedgray-3))" + } + }, + { + "key": "color-fill4", + "description": "四级填充/禁用", + "value": { + "light": "rgb(var(--o-mixedgray-4))", + "dark": "rgb(var(--o-mixedgray-4))" + } + } + ] + }, + "control": { + "name": "控件色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-control-light", + "description": "很浅背景", + "value": { + "light": "rgb(var(--o-gray-1))", + "dark": "rgb(var(--o-gray-1))" + } + }, + { + "key": "color-control1", + "description": "常规，常用于边框", + "value": { + "light": "rgb(var(--o-mixedgray-3))", + "dark": "rgb(var(--o-mixedgray-3))" + } + }, + { + "key": "color-control2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-mixedgray-4))", + "dark": "rgb(var(--o-mixedgray-4))" + } + }, + { + "key": "color-control3", + "description": "激活", + "value": { + "light": "rgb(var(--o-mixedgray-6))", + "dark": "rgb(var(--o-mixedgray-6))" + } + }, + { + "key": "color-control4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-mixedgray-5))", + "dark": "rgb(var(--o-mixedgray-5))" + } + }, + { + "key": "color-control1-light", + "description": "常规-浅，常用于背景", + "value": { + "light": "rgb(var(--o-mixedgray-3))", + "dark": "rgb(var(--o-mixedgray-3))" + } + }, + { + "key": "color-control2-light", + "description": "悬浮-浅", + "value": { + "light": "rgb(var(--o-mixedgray-4))", + "dark": "rgb(var(--o-mixedgray-4))" + } + }, + { + "key": "color-control3-light", + "description": "激活-浅", + "value": { + "light": "rgb(var(--o-mixedgray-5))", + "dark": "rgb(var(--o-mixedgray-5))" + } + }, + { + "key": "color-control4-light", + "description": "禁用-浅", + "value": { + "light": "rgb(var(--o-mixedgray-2))", + "dark": "rgb(var(--o-mixedgray-2))" + } + } + ] + }, + "primary": { + "name": "强调色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-primary1", + "description": "常规", + "value": { + "light": "rgb(var(--o-blue-6))", + "dark": "rgb(var(--o-blue-6))" + } + }, + { + "key": "color-primary2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-blue-5))", + "dark": "rgb(var(--o-blue-5))" + } + }, + { + "key": "color-primary3", + "description": "激活", + "value": { + "light": "rgb(var(--o-blue-7))", + "dark": "rgb(var(--o-blue-7))" + } + }, + { + "key": "color-primary4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-blue-3))", + "dark": "rgb(var(--o-blue-3))" + } + }, + { + "key": "color-primary1-light", + "description": "浅/常规", + "value": { + "light": "rgb(var(--o-blue-2))", + "dark": "rgb(var(--o-blue-2))" + } + }, + { + "key": "color-primary2-light", + "description": "浅/悬浮", + "value": { + "light": "rgb(var(--o-blue-3))", + "dark": "rgb(var(--o-blue-3))" + } + }, + { + "key": "color-primary3-light", + "description": "浅/激活", + "value": { + "light": "rgb(var(--o-blue-4))", + "dark": "rgb(var(--o-blue-4))" + } + }, + { + "key": "color-primary4-light", + "description": "浅/禁用", + "value": { + "light": "rgb(var(--o-blue-1))", + "dark": "rgb(var(--o-blue-1))" + } + } + ] + }, + "success": { + "name": "成功色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-success1", + "description": "常规", + "value": { + "light": "rgb(var(--o-green-6))", + "dark": "rgb(var(--o-green-6))" + } + }, + { + "key": "color-success2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-green-5))", + "dark": "rgb(var(--o-green-5))" + } + }, + { + "key": "color-success3", + "description": "激活", + "value": { + "light": "rgb(var(--o-green-7))", + "dark": "rgb(var(--o-green-7))" + } + }, + { + "key": "color-success4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success1-light", + "description": "浅/常规", + "value": { + "light": "rgb(var(--o-green-2))", + "dark": "rgb(var(--o-green-2))" + } + }, + { + "key": "color-success2-light", + "description": "浅/悬浮", + "value": { + "light": "rgb(var(--o-green-3))", + "dark": "rgb(var(--o-green-3))" + } + }, + { + "key": "color-success3-light", + "description": "浅/激活", + "value": { + "light": "rgb(var(--o-green-4))", + "dark": "rgb(var(--o-green-4))" + } + }, + { + "key": "color-success4-light", + "description": "浅/禁用", + "value": { + "light": "rgb(var(--o-green-1))", + "dark": "rgb(var(--o-green-1))" + } + } + ] + }, + "warning": { + "name": "告警色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-warning1", + "description": "常规", + "value": { + "light": "rgb(var(--o-orange-6))", + "dark": "rgb(var(--o-orange-6))" + } + }, + { + "key": "color-warning2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-orange-5))", + "dark": "rgb(var(--o-orange-5))" + } + }, + { + "key": "color-warning3", + "description": "激活", + "value": { + "light": "rgb(var(--o-orange-7))", + "dark": "rgb(var(--o-orange-7))" + } + }, + { + "key": "color-warning4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning1-light", + "description": "浅/常规", + "value": { + "light": "rgb(var(--o-orange-2))", + "dark": "rgb(var(--o-orange-2))" + } + }, + { + "key": "color-warning2-light", + "description": "浅/悬浮", + "value": { + "light": "rgb(var(--o-orange-3))", + "dark": "rgb(var(--o-orange-3))" + } + }, + { + "key": "color-warning3-light", + "description": "浅/激活", + "value": { + "light": "rgb(var(--o-orange-4))", + "dark": "rgb(var(--o-orange-4))" + } + }, + { + "key": "color-warning4-light", + "description": "浅/禁用", + "value": { + "light": "rgb(var(--o-orange-1))", + "dark": "rgb(var(--o-orange-1))" + } + } + ] + }, + "danger": { + "name": "危险色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-danger1", + "description": "常规", + "value": { + "light": "rgb(var(--o-red-6))", + "dark": "rgb(var(--o-red-6))" + } + }, + { + "key": "color-danger2", + "description": "悬浮", + "value": { + "light": "rgb(var(--o-red-5))", + "dark": "rgb(var(--o-red-5))" + } + }, + { + "key": "color-danger3", + "description": "激活", + "value": { + "light": "rgb(var(--o-red-7))", + "dark": "rgb(var(--o-red-7))" + } + }, + { + "key": "color-danger4", + "description": "禁用", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger1-light", + "description": "浅/常规", + "value": { + "light": "rgb(var(--o-red-2))", + "dark": "rgb(var(--o-red-2))" + } + }, + { + "key": "color-danger2-light", + "description": "浅/悬浮", + "value": { + "light": "rgb(var(--o-red-3))", + "dark": "rgb(var(--o-red-3))" + } + }, + { + "key": "color-danger3-light", + "description": "浅/激活", + "value": { + "light": "rgb(var(--o-red-4))", + "dark": "rgb(var(--o-red-4))" + } + }, + { + "key": "color-danger4-light", + "description": "浅/禁用", + "value": { + "light": "rgb(var(--o-red-1))", + "dark": "rgb(var(--o-red-1))" + } + } + ] + }, + "shadow": { + "name": "阴影", + "type": "shadow", + "typeName": "阴影", + "value": [ + { + "key": "shadow-1", + "name": "阴影1", + "description": "用于卡片、小弹窗、楼层阴影", + "value": { + "light": "0 1px 5px rgba(var(--o-gray-10), 0.1)", + "dark": "0 1px 7px rgba(var(--o-gray-10), 0.3)" + } + }, + { + "key": "shadow-2", + "name": "阴影2", + "description": "用于卡片悬浮阴影", + "value": { + "light": "0 6px 18px rgba(var(--o-gray-10), 0.14)", + "dark": "0 6px 18px rgba(var(--o-gray-10), 0.42)" + } + }, + { + "key": "shadow-3", + "name": "阴影3", + "description": "用于提示阴影", + "value": { + "light": "0 10px 32px rgba(var(--o-gray-10), 0.18)", + "dark": "0 10px 32px rgba(var(--o-gray-10), 0.54)" + } + } + ] + }, + "gap": { + "name": "间距", + "type": "gap", + "typeName": "间距", + "value": [ + { + "key": "gap-1", + "name": "间距1", + "description": "用于组件之间的间距1", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "gap-2", + "name": "间距2", + "description": "用于组件之间的间距2", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "gap-3", + "name": "间距3", + "description": "用于组件之间的间距3", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "gap-4", + "name": "间距4", + "description": "用于组件之间的间距4", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "gap-5", + "name": "间距5", + "description": "用于组件之间的间距5", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "gap-6", + "name": "间距6", + "description": "用于组件之间的间距6", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "gap-7", + "name": "间距7", + "description": "用于组件之间的间距7", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "gap-8", + "name": "间距8", + "description": "用于组件之间的间距8", + "value": { + "light": "64px", + "dark": "64px" + } + } + ] + }, + "size": { + "name": "组件尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "size-xxs", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "size-xs", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "18px", + "dark": "18px" + } + }, + { + "key": "size-s", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "size-m", + "name": "中尺寸", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "size-l", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "size-xl", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" + } + } + ] + }, + "icon_size": { + "name": "图标尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "icon_size-xxs", + "name": "超小尺寸图标", + "description": "小尺寸", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "icon_size-xs", + "name": "超小尺寸图标", + "description": "小尺寸", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "icon_size-s", + "name": "小尺寸图标", + "description": "小尺寸", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "icon_size-m", + "name": "中尺寸图标", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "icon_size-l", + "name": "大尺寸图标", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" + } + } + ] + }, + "font_size": { + "name": "字体尺寸", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "font_size-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "font_size-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "54px", + "dark": "54px" + } + }, + { + "key": "font_size-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "36px", + "dark": "36px" + } + }, + { + "key": "font_size-display4", + "name": "四级数据展示", + "description": "四级数据展示", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "key": "font_size-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "font_size-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "font_size-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "18px", + "dark": "18px" + } + }, + { + "key": "font_size-text1", + "name": "常规正文", + "description": "常规正文", + "value": { + "light": "14px", + "dark": "14px" + } + }, + { + "key": "font_size-text2", + "name": "大号正文", + "description": "大号正文", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "font_size-tip1", + "name": "提示文本1", + "description": "提示文本1", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "font_size-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "10px", + "dark": "10px" + } + } + ] + }, + "line_height": { + "name": "字体行高", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "line_height-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "84px", + "dark": "84px" + } + }, + { + "key": "line_height-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "76px", + "dark": "76px" + } + }, + { + "key": "line_height-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "line_height-display4", + "name": "四级数据展示", + "description": "四级数据展示", + "value": { + "light": "36px", + "dark": "36px" + } + }, + { + "key": "line_height-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "line_height-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "key": "line_height-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "26px", + "dark": "26px" + } + }, + { + "key": "line_height-text1", + "name": "常规正文", + "description": "常规正文", + "value": { + "light": "22px", + "dark": "22px" + } + }, + { + "key": "line_height-text2", + "name": "大号正文", + "description": "大号正文", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "line_height-tip1", + "name": "提示文本1", + "description": "提示文本1", + "value": { + "light": "18px", + "dark": "18px" + } + }, + { + "key": "line_height-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "14px", + "dark": "14px" + } + } + ] + }, + "radius": { + "name": "圆角尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "radius-s", + "name": "小尺寸圆角", + "description": "小尺寸圆角", + "value": { + "light": "2px", + "dark": "2px" + } + }, + { + "key": "radius-m", + "name": "中尺寸圆角", + "description": "中尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-l", + "name": "大尺寸圆角", + "description": "大尺寸圆角", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "radius-control-s", + "name": "小尺寸控件圆角", + "description": "小尺寸控件圆角", + "value": { + "light": "var(--o-radius-s)", + "dark": "var(--o-radius-s)" + } + }, + { + "key": "radius-control-m", + "name": "中尺寸控件圆角", + "description": "中尺寸控件圆角", + "value": { + "light": "var(--o-radius-m)", + "dark": "var(--o-radius-m)" + } + }, + { + "key": "radius-control-l", + "name": "大尺寸控件圆角", + "description": "大尺寸控件圆角", + "value": { + "light": "var(--o-radius-l)", + "dark": "var(--o-radius-l)" + } + } + ] + }, + "duration": { + "name": "动画持续时间", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "duration-s", + "name": "持续时间", + "description": "用于退出屏幕的动画", + "value": { + "light": "200ms", + "dark": "200ms" + } + }, + { + "key": "duration-m1", + "name": "持续时间", + "description": "用于当曲线为standard-in时进入屏幕的动画", + "value": { + "light": "250ms", + "dark": "250ms" + } + }, + { + "key": "duration-m2", + "name": "持续时间", + "description": "用于当曲线为standard时开始、结束的动画", + "value": { + "light": "300ms", + "dark": "300ms" + } + }, + { + "key": "duration-m3", + "name": "持续时间", + "description": "用于当曲线为emphasized-in时进入屏幕的动画", + "value": { + "light": "400ms", + "dark": "400ms" + } + }, + { + "key": "duration-l", + "name": "持续时间", + "description": "用于当曲线为emphasized时开始、结束的动画", + "value": { + "light": "500ms", + "dark": "500ms" + } + }, + { + "key": "duration-xl", + "name": "持续时间", + "description": "用于当曲线为emphasized时，轮播切换动画", + "value": { + "light": "1000ms", + "dark": "1000ms" + } + } + ] + }, + "easing": { + "name": "动画曲线", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "easing-linear", + "name": "线性动画曲线", + "description": "线性曲线", + "value": { + "light": "cubic-bezier(0, 0, 1, 1)", + "dark": "cubic-bezier(0, 0, 1, 1)" + } + }, + { + "key": "easing-standard", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-standard-in", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0, 0, 0, 1)", + "dark": "cubic-bezier(0, 0, 0, 1)" + } + }, + { + "key": "easing-standard-out", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.3, 0, 1, 1)", + "dark": "cubic-bezier(0.3, 0, 1, 1)" + } + }, + { + "key": "easing-emphasized", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-emphasized-in", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.3, 0, 0.8, 0.15)", + "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)" + } + }, + { + "key": "easing-emphasized-out", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.05, 0.7, 0.1, 1)", + "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)" + } + } + ] + } +} diff --git a/packages/opendesign/src/tokens/token.config.ts b/packages/opendesign/src/tokens/token.config.ts new file mode 100644 index 0000000000000000000000000000000000000000..ad571baa1674dee5bc523c93d5d16df8a18b423e --- /dev/null +++ b/packages/opendesign/src/tokens/token.config.ts @@ -0,0 +1,8 @@ +module.exports = { + prefix: '--o-', + output: '../components/style/', + themes: ['light', 'dark'], + defaultTheme: 'light', + tokenFile: ['./opendesign-token.json'], + codeSnippetsFile: '../../../../.vscode/opendesign.token.code-snippets' +}; \ No newline at end of file diff --git a/packages/opendesign/src/tokens/tokens.json b/packages/opendesign/src/tokens/tokens.json new file mode 100644 index 0000000000000000000000000000000000000000..d2927c45f2786303e0c8a79961c0a5ce3ce77b28 --- /dev/null +++ b/packages/opendesign/src/tokens/tokens.json @@ -0,0 +1,1031 @@ +{ + "primary": { + "name": "主色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-primary1", + "name": "常规色", + "description": "用于按钮、文本、链接强调状态时常规颜色", + "value": { + "light": "#002fa7", + "dark": "#406fe7" + } + }, + { + "key": "color-primary2", + "name": "悬浮色", + "description": "用于按钮、文本、链接强调状态时悬浮颜色", + "value": { + "light": "#406fe7", + "dark": "#5988ff" + } + }, + { + "key": "color-primary3", + "name": "聚焦色", + "description": "用于按钮、文本、链接强调状态时聚焦颜色", + "value": { + "light": "#00288d", + "dark": "#002fa7" + } + }, + { + "key": "color-primary4", + "name": "禁用色", + "description": "用于按钮、文本、链接强调状态时禁用颜色", + "value": { + "light": "#b2c0e4", + "dark": "#0c2360" + } + } + ] + }, + "major": { + "name": "辅色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-major1", + "name": "常规色", + "description": "用于按钮、文本、链接major状态时文本颜色", + "value": { + "light": "#feb32a", + "dark": "#feb32a" + } + } + ] + }, + "normal": { + "name": "常态色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-normal1", + "name": "常规色", + "description": "用于按钮、文本、链接常态时常规颜色", + "value": { + "light": "var(--o-color-info1)", + "dark": "var(--o-color-info1)" + } + }, + { + "key": "color-normal2", + "name": "悬浮色", + "description": "用于按钮、文本、链接常态时悬浮颜色", + "value": { + "light": "var(--o-color-primary2)", + "dark": "var(--o-color-primary2)" + } + }, + { + "key": "color-normal3", + "name": "聚焦色", + "description": "用于按钮、文本、链接常态时聚焦颜色", + "value": { + "light": "var(--o-color-primary3)", + "dark": "var(--o-color-primary3)" + } + }, + { + "key": "color-normal4", + "name": "禁用色", + "description": "用于按钮、文本、链接常态时禁用颜色", + "value": { + "light": "var(--o-color-info4)", + "dark": "var(--o-color-info4)" + } + } + ] + }, + "success": { + "name": "成功色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-success1", + "name": "常规色", + "description": "用于按钮、文本、链接成功状态时常规颜色", + "value": { + "light": "#6dc335", + "dark": "#6dc335" + } + }, + { + "key": "color-success2", + "name": "悬浮色", + "description": "用于按钮、文本、链接成功状态时悬浮颜色", + "value": { + "light": "#93e95b", + "dark": "#93e95b" + } + }, + { + "key": "color-success3", + "name": "聚焦色", + "description": "用于按钮、文本、链接成功状态时聚焦颜色", + "value": { + "light": "#62af30", + "dark": "#62af30" + } + }, + { + "key": "color-success4", + "name": "禁用色", + "description": "用于按钮、文本、链接成功状态时禁用颜色", + "value": { + "light": "#c5e7ae", + "dark": "#355f1a" + } + } + ] + }, + "warning": { + "name": "告警色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-warning1", + "name": "常规色", + "description": "用于按钮、文本、链接告警状态时常规颜色", + "value": { + "light": "#ff8e36", + "dark": "#ff8e36" + } + }, + { + "key": "color-warning2", + "name": "悬浮色", + "description": "用于按钮、文本、链接告警状态时悬浮颜色", + "value": { + "light": "#ffb45c", + "dark": "#ffb45c" + } + }, + { + "key": "color-warning3", + "name": "聚焦色", + "description": "用于按钮、文本、链接告警状态时聚焦颜色", + "value": { + "light": "#ff801c", + "dark": "#ff801c" + } + }, + { + "key": "color-warning4", + "name": "禁用色", + "description": "用于按钮、文本、链接告警状态时禁用颜色", + "value": { + "light": "#ffd2af", + "dark": "#b54f00" + } + } + ] + }, + "danger": { + "name": "危险色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-danger1", + "name": "常规色", + "description": "用于按钮、文本、链接错误状态时常规颜色", + "value": { + "light": "#f3524d", + "dark": "#f3524d" + } + }, + { + "key": "color-danger2", + "name": "悬浮色", + "description": "用于按钮、文本、链接错误状态时悬浮颜色", + "value": { + "light": "#ff7873", + "dark": "#ff7873" + } + }, + { + "key": "color-danger3", + "name": "聚焦色", + "description": "用于按钮、文本、链接错误状态时聚焦颜色", + "value": { + "light": "#f13b35", + "dark": "#f13b35" + } + }, + { + "key": "color-danger4", + "name": "禁用色", + "description": "用于按钮、文本、链接错误状态时禁用颜色", + "value": { + "light": "#fabab8", + "dark": "#850d09" + } + } + ] + }, + "info": { + "name": "信息色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-info1", + "name": "常规色", + "description": "用于按钮、文本、链接信息状态时常规颜色", + "value": { + "light": "#e5e5e5", + "dark": "#242424" + } + }, + { + "key": "color-info2", + "name": "悬浮色", + "description": "用于按钮、文本、链接信息状态时悬浮颜色", + "value": { + "light": "#e5e8f0", + "dark": "#2e2e2e" + } + }, + { + "key": "color-info3", + "name": "聚焦色", + "description": "用于按钮、文本、链接信息状态时聚焦颜色", + "value": { + "light": "#cccccc", + "dark": "#1e1e1e" + } + }, + { + "key": "color-info4", + "name": "禁用色", + "description": "用于按钮、文本、链接信息状态时禁用颜色", + "value": { + "light": "#f7f8fa", + "dark": "#151515" + } + } + ] + }, + "background": { + "name": "背景色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-bg1", + "name": "一级容器背景色", + "description": "用于页面整体背景色", + "value": { + "light": "#f5f6f8", + "dark": "#121212" + } + }, + { + "key": "color-bg2", + "name": "二级容器背景色", + "description": "用于区块、卡片、弹出框、tooltip背景色", + "value": { + "light": "#ffffff", + "dark": "#1e1e1e" + } + }, + { + "key": "color-bg3", + "name": "三级容器背景色", + "description": "用于区块卡片背景色", + "value": { + "light": "#f7f8fa", + "dark": "#242424" + } + }, + { + "key": "color-bg4", + "name": "四级容器背景色", + "description": "用于区块、卡片、表头背景色", + "value": { + "light": "#e5e8f0", + "dark": "#2e2e2e" + } + } + ] + }, + "text": { + "name": "文字色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-text1", + "name": "标题色", + "description": "用于强调、标题颜色", + "value": { + "light": "#000000", + "dark": "#ffffff" + } + }, + { + "key": "color-text1-inverse", + "name": "标题反色", + "description": "用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题", + "value": { + "light": "#ffffff", + "dark": "#000000" + } + }, + { + "key": "color-text2", + "name": "正文色", + "description": "用于次强调、次级标题、正文颜色", + "value": { + "light": "#3f3f3f", + "dark": "#e5e5e5" + } + }, + { + "key": "color-text2-inverse", + "name": "正文反色", + "description": "用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文", + "value": { + "light": "#e5e5e5", + "dark": "#3f3f3f" + } + }, + { + "key": "color-text3", + "name": "提示色", + "description": "用于提示文本颜色", + "value": { + "light": "#707070", + "dark": "#b2b2b2" + } + }, + { + "key": "color-text3-inverse", + "name": "提示反色", + "description": "用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示", + "value": { + "light": "#b2b2b2", + "dark": "#707070" + } + }, + { + "key": "color-text4", + "name": "置灰色", + "description": "用于禁用文本颜色", + "value": { + "light": "#cccccc", + "dark": "#555555" + } + }, + { + "key": "color-text4-inverse", + "name": "置灰反色", + "description": "用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本", + "value": { + "light": "#e5e5e5", + "dark": "#2d2d2d" + } + } + ] + }, + "border": { + "name": "边框色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-border1", + "name": "边框色", + "description": "较明显的边框", + "value": { + "light": "#707070", + "dark": "#b2b2b2" + } + }, + { + "key": "color-border2", + "name": "弱边框色", + "description": "较弱的边框", + "value": { + "light": "#e5e5e5", + "dark": "#2d2d2d" + } + } + ] + }, + "division": { + "name": "分隔线色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-division1", + "name": "分隔线色1", + "description": "用于分隔线颜色", + "value": { + "light": "#707070", + "dark": "#b2b2b2" + } + } + ] + }, + "mask": { + "name": "遮罩色", + "type": "color", + "typeName": "颜色", + "value": [ + { + "key": "color-mask1", + "name": "遮罩色1", + "description": "用于弹窗遮罩色", + "value": { + "light": "rgba(0, 0, 0, 0.5)", + "dark": "rgba(0, 0, 0, 0.5)" + } + }, + { + "key": "color-mask2", + "name": "遮罩色2", + "description": "用于loading遮罩色", + "value": { + "light": "rgba(0, 0, 0, 0.1)", + "dark": "rgba(0, 0, 0, 0.1)" + } + } + ] + }, + "shadow": { + "name": "阴影", + "type": "shadow", + "typeName": "阴影", + "value": [ + { + "key": "shadow-1", + "name": "阴影1", + "description": "用于卡片、小弹窗、楼层阴影", + "value": { + "light": "0 1px 5px rgba(45, 47, 51, 0.1)", + "dark": "0 1px 7px rgba(0, 0, 0, 0.3)" + } + }, + { + "key": "shadow-2", + "name": "阴影2", + "description": "用于卡片悬浮阴影", + "value": { + "light": "0 6px 18px rgba(0, 47, 167, 0.14)", + "dark": "0 6px 18px rgba(0, 0, 0, 0.42)" + } + }, + { + "key": "shadow-3", + "name": "阴影3", + "description": "用于提示阴影", + "value": { + "light": "0 10px 32px rgba(45, 47, 51, 0.18)", + "dark": "0 10px 32px rgba(0, 0, 0, 0.54)" + } + } + ] + }, + "gap": { + "name": "间距", + "type": "gap", + "typeName": "间距", + "value": [ + { + "key": "gap-1", + "name": "间距1", + "description": "用于组件之间的间距1", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "gap-2", + "name": "间距2", + "description": "用于组件之间的间距2", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "gap-3", + "name": "间距3", + "description": "用于组件之间的间距3", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "gap-4", + "name": "间距4", + "description": "用于组件之间的间距4", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "gap-5", + "name": "间距5", + "description": "用于组件之间的间距5", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "gap-6", + "name": "间距6", + "description": "用于组件之间的间距6", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "gap-7", + "name": "间距7", + "description": "用于组件之间的间距7", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "gap-8", + "name": "间距8", + "description": "用于组件之间的间距8", + "value": { + "light": "64px", + "dark": "64px" + } + } + ] + }, + "size": { + "name": "组件尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "size-l", + "name": "大尺寸", + "description": "尺寸", + "value": { + "light": "40px", + "dark": "40px" + } + }, + { + "key": "size-m", + "name": "中尺寸", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "size-s", + "name": "小尺寸", + "description": "小尺寸", + "value": { + "light": "24px", + "dark": "24px" + } + } + ] + }, + "icon_size": { + "name": "图标尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "icon_size-l", + "name": "大尺寸图标", + "description": "尺寸", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "icon_size-m", + "name": "中尺寸图标", + "description": "尺寸", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "icon_size-s", + "name": "小尺寸图标", + "description": "小尺寸", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "icon_size-xs", + "name": "超小尺寸图标", + "description": "小尺寸", + "value": { + "light": "16px", + "dark": "16px" + } + } + ] + }, + "font_size": { + "name": "字体尺寸", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "font_size-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "64px", + "dark": "64px" + } + }, + { + "key": "font_size-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "54px", + "dark": "54px" + } + }, + { + "key": "font_size-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "36px", + "dark": "36px" + } + }, + { + "key": "font_size-display4", + "name": "四级数据展示", + "description": "四级数据展示", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "key": "font_size-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "font_size-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "20px", + "dark": "20px" + } + }, + { + "key": "font_size-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "18px", + "dark": "18px" + } + }, + { + "key": "font_size-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "16px", + "dark": "16px" + } + }, + { + "key": "font_size-text", + "name": "正文", + "description": "正文", + "value": { + "light": "14px", + "dark": "14px" + } + }, + { + "key": "font_size-tip1", + "name": "提示文本1", + "description": "提示文本1", + "value": { + "light": "12px", + "dark": "12px" + } + }, + { + "key": "font_size-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "10px", + "dark": "10px" + } + } + ] + }, + "line_height": { + "name": "字体行高", + "type": "font", + "typeName": "字体", + "value": [ + { + "key": "line_height-display1", + "name": "一级数据展示", + "description": "一级数据展示", + "value": { + "light": "84px", + "dark": "84px" + } + }, + { + "key": "line_height-display2", + "name": "二级数据展示", + "description": "二级数据展示", + "value": { + "light": "76px", + "dark": "76px" + } + }, + { + "key": "line_height-display3", + "name": "三级数据展示", + "description": "三级数据展示", + "value": { + "light": "48px", + "dark": "48px" + } + }, + { + "key": "line_height-display4", + "name": "四级数据展示", + "description": "四级数据展示", + "value": { + "light": "36px", + "dark": "36px" + } + }, + { + "key": "line_height-h1", + "name": "一级标题", + "description": "一级标题", + "value": { + "light": "32px", + "dark": "32px" + } + }, + { + "key": "line_height-h2", + "name": "二级标题", + "description": "二级标题", + "value": { + "light": "28px", + "dark": "28px" + } + }, + { + "key": "line_height-h3", + "name": "三级标题", + "description": "三级标题", + "value": { + "light": "26px", + "dark": "26px" + } + }, + { + "key": "line_height-h4", + "name": "四级标题", + "description": "四级标题", + "value": { + "light": "24px", + "dark": "24px" + } + }, + { + "key": "line_height-text", + "name": "正文", + "description": "正文", + "value": { + "light": "22px", + "dark": "22px" + } + }, + { + "key": "line_height-tip1", + "name": "提示文本1", + "description": "提示文本1", + "value": { + "light": "18px", + "dark": "18px" + } + }, + { + "key": "line_height-tip2", + "name": "提示文本2", + "description": "提示文本2", + "value": { + "light": "14px", + "dark": "14px" + } + } + ] + }, + "radius": { + "name": "圆角尺寸", + "type": "size", + "typeName": "尺寸", + "value": [ + { + "key": "radius-l", + "name": "大尺寸圆角", + "description": "大尺寸圆角", + "value": { + "light": "8px", + "dark": "8px" + } + }, + { + "key": "radius-m", + "name": "中尺寸圆角", + "description": "中尺寸圆角", + "value": { + "light": "4px", + "dark": "4px" + } + }, + { + "key": "radius-s", + "name": "小尺寸圆角", + "description": "小尺寸圆角", + "value": { + "light": "2px", + "dark": "2px" + } + } + ] + }, + "duration": { + "name": "动画持续时间", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "duration-s", + "name": "持续时间", + "description": "用于退出屏幕的动画", + "value": { + "light": "200ms", + "dark": "200ms" + } + }, + { + "key": "duration-m1", + "name": "持续时间", + "description": "用于当曲线为standard-in时进入屏幕的动画", + "value": { + "light": "250ms", + "dark": "250ms" + } + }, + { + "key": "duration-m2", + "name": "持续时间", + "description": "用于当曲线为standard时开始、结束的动画", + "value": { + "light": "300ms", + "dark": "300ms" + } + }, + { + "key": "duration-m3", + "name": "持续时间", + "description": "用于当曲线为emphasized-in时进入屏幕的动画", + "value": { + "light": "400ms", + "dark": "400ms" + } + }, + { + "key": "duration-l", + "name": "持续时间", + "description": "用于当曲线为emphasized时开始、结束的动画", + "value": { + "light": "500ms", + "dark": "500ms" + } + }, + { + "key": "duration-xl", + "name": "持续时间", + "description": "用于当曲线为emphasized时，轮播切换动画", + "value": { + "light": "1000ms", + "dark": "1000ms" + } + } + ] + }, + "easing": { + "name": "动画曲线", + "type": "animation", + "typeName": "动画", + "value": [ + { + "key": "easing-linear", + "name": "线性动画曲线", + "description": "线性曲线", + "value": { + "light": "cubic-bezier(0, 0, 1, 1)", + "dark": "cubic-bezier(0, 0, 1, 1)" + } + }, + { + "key": "easing-standard", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-standard-in", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0, 0, 0, 1)", + "dark": "cubic-bezier(0, 0, 0, 1)" + } + }, + { + "key": "easing-standard-out", + "name": "动画曲线", + "description": "用于组件", + "value": { + "light": "cubic-bezier(0.3, 0, 1, 1)", + "dark": "cubic-bezier(0.3, 0, 1, 1)" + } + }, + { + "key": "easing-emphasized", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.2, 0, 0, 1)", + "dark": "cubic-bezier(0.2, 0, 0, 1)" + } + }, + { + "key": "easing-emphasized-in", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.3, 0, 0.8, 0.15)", + "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)" + } + }, + { + "key": "easing-emphasized-out", + "name": "动画曲线", + "description": "用于大卡片、场景切换", + "value": { + "light": "cubic-bezier(0.05, 0.7, 0.1, 1)", + "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)" + } + } + ] + } +} diff --git a/packages/opendesign/tsconfig.json b/packages/opendesign/tsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..2fcfbf84fa774df5245ba864a7571fce067c2ed7 --- /dev/null +++ b/packages/opendesign/tsconfig.json @@ -0,0 +1,35 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "moduleResolution": "Node", + "strict": true, + "jsx": "preserve", + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "lib": [ + "ESNext", + "DOM" + ], + "skipLibCheck": true, + "noEmit": true, + "baseUrl": "./", + "paths": { + "resize-observer-polyfill": [ + "node_modules/resize-observer-polyfill" + ] + } + }, + "include": [ + "src/**/*.ts", + "src/**/*.d.ts", + "src/**/*.tsx", + "src/**/*.vue", + ], + "exclude": [ + "src/tokens/token.config.ts", + "src/icons/icon.config.ts", + ] +} \ No newline at end of file diff --git a/packages/portal/README.md b/packages/portal/README.md new file mode 100644 index 0000000000000000000000000000000000000000..30b15e215a24b78043970d820dd5dd5d2e6a3863 --- /dev/null +++ b/packages/portal/README.md @@ -0,0 +1,16 @@ +# Vue 3 + TypeScript + Vite + +This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` + + diff --git a/packages/portal/package.json b/packages/portal/package.json new file mode 100644 index 0000000000000000000000000000000000000000..1642235048aa19ab8019ea60bf417838490d55ee --- /dev/null +++ b/packages/portal/package.json @@ -0,0 +1,24 @@ +{ + "name": "portal", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vue-tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@opensig/opendesign": "workspace:^0.0.4", + "normalize.css": "^8.0.1", + "vue": "^3.2.41", + "vue-router": "^4.1.6" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^3.2.0", + "sass": "^1.56.1", + "typescript": "^4.6.4", + "vite": "^3.2.3", + "vue-tsc": "^1.0.13" + } +} diff --git a/packages/portal/src/App.vue b/packages/portal/src/App.vue new file mode 100644 index 0000000000000000000000000000000000000000..a3bb9432645f1343d45c8b096e9b3141da5bc256 --- /dev/null +++ b/packages/portal/src/App.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/portal/src/assets/vue.svg b/packages/portal/src/assets/vue.svg new file mode 100644 index 0000000000000000000000000000000000000000..770e9d333ee70e75fe7c0bad7fb13e4f6ed4627a --- /dev/null +++ b/packages/portal/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/portal/src/components/TheAside.vue b/packages/portal/src/components/TheAside.vue new file mode 100644 index 0000000000000000000000000000000000000000..4f510869a2c2619207ace88dc3790cee349246ea --- /dev/null +++ b/packages/portal/src/components/TheAside.vue @@ -0,0 +1,69 @@ + + + diff --git a/packages/portal/src/components/TheHeader.vue b/packages/portal/src/components/TheHeader.vue new file mode 100644 index 0000000000000000000000000000000000000000..960d5266948a771d1a728c2888e3fed5aaca2596 --- /dev/null +++ b/packages/portal/src/components/TheHeader.vue @@ -0,0 +1,36 @@ + + + diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts new file mode 100644 index 0000000000000000000000000000000000000000..d1c01396df0a03a9832b568ee949a54d6d782179 --- /dev/null +++ b/packages/portal/src/main.ts @@ -0,0 +1,18 @@ +import { createApp } from 'vue'; +import './style.scss'; +import 'normalize.css'; +// import '@opensig/opendesign/src/components/style'; +import '@opensig/opendesign/src/components/style/default-light.token.css'; +import '@opensig/opendesign/src/components/style/dark.token.css'; + + +import { router } from '@/router'; + +import App from './App.vue'; + +const app = createApp(App); + +app.use(router); + +app.mount('#app'); + diff --git a/packages/portal/src/pages/TheHome.vue b/packages/portal/src/pages/TheHome.vue new file mode 100644 index 0000000000000000000000000000000000000000..0d550dd4d3e44dbb0a18f58e912d2d8788614387 --- /dev/null +++ b/packages/portal/src/pages/TheHome.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/portal/src/pages/TheIcons.vue b/packages/portal/src/pages/TheIcons.vue new file mode 100644 index 0000000000000000000000000000000000000000..0b521627415e8f02ad00e5a66c7f9739d56375ad --- /dev/null +++ b/packages/portal/src/pages/TheIcons.vue @@ -0,0 +1,85 @@ + + + diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts new file mode 100644 index 0000000000000000000000000000000000000000..5c01f700fd2f9dd85d0d613fe144714ef86fc9c0 --- /dev/null +++ b/packages/portal/src/router.ts @@ -0,0 +1,224 @@ +import { createRouter, createWebHashHistory } from 'vue-router'; +import TheHome from './pages/TheHome.vue'; + +export const routes = [ + { + path: '/', + name: 'Home', + label: '通用', + component: TheHome, + }, + { + path: '/icons', + name: 'Icons', + label: '图标 Icon', + component: () => import('./pages/TheIcons.vue'), + }, + { + path: '/button', + name: 'Button', + label: '按钮 Button', + component: () => import('@components/button/__demo__/IndexBtn.vue'), + }, + { + path: '/link', + name: 'Link', + label: '链接 Link', + component: () => import('@components/link/__demo__/IndexLink.vue'), + }, + { + path: '/switch', + name: 'Switch', + label: '开关 Switch', + component: () => import('@components/switch/__demo__/IndexSwitch.vue'), + }, + { + path: '/popup', + name: 'Popup', + label: '弹层 Popup', + component: () => import('@components/popup/__demo__/IndexPopup.vue'), + }, + { + path: '/popover', + name: 'Popover', + label: '弹出框 Popover', + component: () => import('@components/popover/__demo__/IndexPopover.vue'), + }, + { + path: '/input', + name: 'Input', + label: '输入框 Input', + component: () => import('@components/input/__demo__/IndexInput.vue'), + }, + { + path: '/input-number', + name: 'InputNumber', + label: '数字输入框 InputNumber', + component: () => import('@components/input-number/__demo__/IndexInputNumber.vue'), + }, + { + path: '/textarea', + name: 'Textarea', + label: '文本域 Textarea', + component: () => import('@components/textarea/__demo__/IndexTextarea.vue'), + }, + { + path: '/select', + name: 'Select', + label: '下拉框 Select', + component: () => import('@components/select/__demo__/IndexSelect.vue'), + }, + { + path: '/cascader', + name: 'Cascader', + label: '级联选择器 Cascader', + component: () => import('@components/cascader/__demo__/IndexCascader.vue'), + }, + { + path: '/radio', + name: 'Radio', + label: '单选 Radio', + component: () => import('@components/radio/__demo__/IndexRadio.vue'), + }, + { + path: '/checkbox', + name: 'Checkbox', + label: '多选 Checkbox', + component: () => import('@components/checkbox/__demo__/IndexCheckbox.vue'), + }, + { + path: '/tabs', + name: 'Tabs', + label: '页签 Tabs', + component: () => import('@components/tabs/__demo__/IndexTabs.vue'), + }, + { + path: '/table', + name: 'Table', + label: '表格 Table', + component: () => import('@components/table/__demo__/IndexTable.vue'), + }, + { + path: '/pagination', + name: 'Pagination', + label: '分页 Pagination', + component: () => import('@components/pagination/__demo__/IndexPagination.vue'), + }, + { + path: '/divider', + name: 'Divider', + label: '分割线 Divider', + component: () => import('@components/divider/__demo__/IndexDivider.vue'), + }, + { + path: '/tag', + name: 'Tag', + label: '标签 Tag', + component: () => import('@components/tag/__demo__/IndexTag.vue'), + }, + { + path: '/badge', + name: 'Badge', + label: '徽标 Badge', + component: () => import('@components/badge/__demo__/IndexBadge.vue'), + }, + { + path: '/rate', + name: 'Rate', + label: '评分 Rate', + component: () => import('@components/rate/__demo__/IndexRate.vue'), + }, + { + path: '/breadcrumb', + name: 'Breadcrumb', + label: '面包屑 Breadcrumb', + component: () => import('@components/breadcrumb/__demo__/IndexBreadcrumb.vue'), + }, + { + path: '/menu', + name: 'Menu', + label: '菜单 Menu', + component: () => import('@components/menu/__demo__/IndexMenu.vue'), + }, + { + path: '/dropdown', + name: 'Dropdown', + label: '下拉菜单 Dropdown', + component: () => import('@components/dropdown/__demo__/IndexDropdown.vue'), + }, + { + path: '/progress', + name: 'Progress', + label: '进度条 Progress', + component: () => import('@components/progress/__demo__/IndexProgress.vue'), + }, + { + path: '/dialog', + name: 'Dialog', + label: '对话框 Dialog', + component: () => import('@components/dialog/__demo__/IndexDialog.vue'), + }, + { + path: '/figure', + name: 'Figure', + label: '图片 Figure', + component: () => import('@components/figure/__demo__/IndexFigure.vue'), + }, + { + path: '/card', + name: 'Card', + label: '卡片 Card', + component: () => import('@components/card/__demo__/IndexCard.vue'), + }, + { + path: '/message', + name: 'Message', + label: '消息提示 Message', + component: () => import('@components/message/__demo__/IndexMessage.vue'), + }, + { + path: '/slides', + name: 'Slides', + label: '幻灯片 Slides', + component: () => import('@components/slides/__demo__/IndexSlides.vue'), + }, + { + path: '/grid', + name: 'Grid', + label: '栅格 Grid', + component: () => import('@components/grid/__demo__/IndexGrid.vue'), + }, + { + path: '/resize-observer', + name: 'ResizeObserver', + label: 'Resize监听', + component: () => import('@components/resize-observer/__demo__/IndexResize.vue'), + }, + { + path: '/intersection-observer', + name: 'IntersectionObserver', + label: 'Intersection监听', + component: () => import('@components/intersection-observer/__demo__/IndexIntersection.vue'), + }, + { + path: '/child-only', + name: 'ChildOnly', + label: '只渲染一个子元素', + component: () => import('@components/child-only/__demo__/IndexChildOnly.vue'), + }, +]; + +export const router = createRouter({ + history: createWebHashHistory(), + routes, + scrollBehavior(to, from, savePosition) { + if (savePosition) { + return savePosition; + } else { + return { + top: 0, + behavior: 'smooth', + }; + } + }, +}); diff --git a/packages/portal/src/style.scss b/packages/portal/src/style.scss new file mode 100644 index 0000000000000000000000000000000000000000..7812ee8e262702d0d9b99e08735198e5f80eb518 --- /dev/null +++ b/packages/portal/src/style.scss @@ -0,0 +1,88 @@ +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color-scheme: light dark; + + color: var(--o-color-info1); + background-color: var(--o-color-fill1); + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +/* @media (prefers-color-scheme: dark) { + :root { + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + } + + a:hover { + color: #535bf2; + } +} */ + +.page-demo { + padding: 8px 24px; + h4 { + color: var(--o-color-text1); + } +} +.col { + display: flex; + align-items: center; + justify-content: flex-start; + flex-wrap: wrap; + gap: 8px; +} +.block { + padding: var(--o-gap-4); + border: 1px solid var(--o-color-control2-light); +} +.row { + display: flex; + align-items: center; + justify-content: flex-start; + flex-wrap: wrap; + gap: 16px; + padding: 8px; +} +section { + border: 1px solid var(--o-color-control2-light); + padding: var(--o-gap-4); + + h4 { + text-align: center; + margin: 0; + margin-bottom: var(--o-gap-3); + } + + section { + margin-top: 12px; + } + .row { + width: 100%; + } +} +.col-2 { + width: 50%; + padding: 24px; + + .col-2 { + margin-left: 12px; + } +} +section { + display: flex; + align-items: center; + justify-content: flex-start; + flex-wrap: wrap; + gap: 16px; +} diff --git a/packages/portal/src/vite-env.d.ts b/packages/portal/src/vite-env.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..af36df349a654c7c39061abbf656a6e5b5b48f8c --- /dev/null +++ b/packages/portal/src/vite-env.d.ts @@ -0,0 +1,7 @@ +/// + +declare module '*.vue' { + import type { DefineComponent } from 'vue'; + const component: DefineComponent<{}, {}, any>; + export default component; +} diff --git a/packages/portal/tsconfig.json b/packages/portal/tsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..f77811e9e9554c440d85a3d4705d9be4b2138f17 --- /dev/null +++ b/packages/portal/tsconfig.json @@ -0,0 +1,42 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "moduleResolution": "Node", + "strict": true, + "jsx": "preserve", + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "lib": [ + "ESNext", + "DOM" + ], + "skipLibCheck": true, + "noEmit": true, + "baseUrl": "./", + "paths": { + "@/*": [ + "src/*" + ], + "@demo/*": [ + "../opendesign/components/*" + ] + } + }, + "include": [ + "src/**/*.ts", + "src/**/*.d.ts", + "src/**/*.tsx", + "src/**/*.vue", + "../opendesign/**/*.ts", + // "../opendesign/**/*.d.ts", + // "../opendesign/**/*.vue" + ], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} \ No newline at end of file diff --git a/packages/portal/tsconfig.node.json b/packages/portal/tsconfig.node.json new file mode 100644 index 0000000000000000000000000000000000000000..9d31e2aed93c876bc048cf2f863cb2a847c901e8 --- /dev/null +++ b/packages/portal/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/packages/portal/vite.config.ts b/packages/portal/vite.config.ts new file mode 100644 index 0000000000000000000000000000000000000000..6a09736603bf05fb03d1a07ffc84c82929daa112 --- /dev/null +++ b/packages/portal/vite.config.ts @@ -0,0 +1,14 @@ +import path from 'path'; +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], + resolve: { + alias: { + '@/': `${path.resolve(__dirname, './src')}/`, + '@components': path.resolve(__dirname, '../opendesign/src/components'), + }, + }, +}); diff --git a/packages/scripts/README.md b/packages/scripts/README.md new file mode 100644 index 0000000000000000000000000000000000000000..4c48c6aa0fd00465180d738b340b328b4d02447f --- /dev/null +++ b/packages/scripts/README.md @@ -0,0 +1 @@ +# scripts for open-design diff --git a/packages/scripts/package.json b/packages/scripts/package.json new file mode 100644 index 0000000000000000000000000000000000000000..39de3914ba36eaf514b22a26e9e62c55ad99f551 --- /dev/null +++ b/packages/scripts/package.json @@ -0,0 +1,33 @@ +{ + "name": "@opensig/opensig-scripts", + "version": "0.0.6", + "description": "opendesign component Scripts", + "main": "dist/index.js", + "bin": "dist/index.js", + "files": [ + "dist" + ], + "scripts": { + "dev": "tsc --watch", + "build": "tsc" + }, + "dependencies": { + "@vitejs/plugin-vue": "^3.2.0", + "clean-css": "^5.3.1", + "commander": "^9.4.1", + "fs-extra": "^11.1.0", + "glob": "^8.0.3", + "sass": "^1.56.1", + "svgo": "^3.0.2", + "vite-plugin-dts": "^1.7.1", + "vue": "^3.2.41", + "@rollup/plugin-terser": "^0.2.1" + }, + "devDependencies": { + "@types/clean-css": "^4.2.6", + "@types/fs-extra": "^9.0.13", + "@types/glob": "^8.0.0", + "typescript": "^4.6.4", + "vite": "^3.2.3" + } +} diff --git a/packages/scripts/src/build-components/index.ts b/packages/scripts/src/build-components/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..b6cb370f7d6ba33fd776fd7b243cb3711faec47e --- /dev/null +++ b/packages/scripts/src/build-components/index.ts @@ -0,0 +1,22 @@ +import configUmd from './vite.config.umd'; +import config from './vite.config'; +import { build } from 'vite'; +import fs from 'fs-extra'; +import path from 'path'; + +const base = process.cwd(); + +export default function main() { + console.log('generating component es/cjs...'); + + fs.emptyDir(path.resolve(base, 'es')); + fs.emptyDir(path.resolve(base, 'lib')); + build(config()); + + // umd + console.log('generating component umd...'); + fs.emptyDir(path.resolve(base, 'dist')); + build(configUmd('component')); + build(configUmd('icon')); + +} \ No newline at end of file diff --git a/packages/scripts/src/build-components/vite.config.ts b/packages/scripts/src/build-components/vite.config.ts new file mode 100644 index 0000000000000000000000000000000000000000..687bd14434c2d6dc902f8b6cf7140ad82e7360d2 --- /dev/null +++ b/packages/scripts/src/build-components/vite.config.ts @@ -0,0 +1,45 @@ +import { InlineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import dts from 'vite-plugin-dts'; + +export default (): InlineConfig => { + return { + plugins: [ + vue(), + dts(), + dts({ + outputDir: 'lib', + }), + ], + build: { + target: 'modules', + outDir: 'es', + emptyOutDir: false, + minify: false, + rollupOptions: { + input: ['src/components/index.ts', 'src/components/icons/index.ts'], + output: [ + { + format: 'es', + dir: 'es', + entryFileNames: '[name].mjs', + preserveModules: true, + preserveModulesRoot: 'src/components', + }, + { + format: 'commonjs', + dir: 'lib', + entryFileNames: '[name].js', + preserveModules: true, + preserveModulesRoot: 'src/components', + }, + ], + external: ['vue'], + }, + lib: { + entry: 'src/components/index.ts', + formats: ['es', 'cjs'], + }, + }, + }; +}; diff --git a/packages/scripts/src/build-components/vite.config.umd.ts b/packages/scripts/src/build-components/vite.config.umd.ts new file mode 100644 index 0000000000000000000000000000000000000000..a515137a7e4623523eda65f8e8e80441165916a9 --- /dev/null +++ b/packages/scripts/src/build-components/vite.config.umd.ts @@ -0,0 +1,52 @@ +import { InlineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import terser from '@rollup/plugin-terser'; + +export default (type: 'component' | 'icon'): InlineConfig => { + const entry = + type === 'component' + ? 'src/components/index.ts' + : 'src/components/icons/index.ts'; + + const entryFileName = type === 'component' ? 'opendesign' : 'opendesign-icon'; + + const name = type === 'component' ? 'opendesign' : 'opendesignIcon'; + + return { + mode: 'production', + build: { + target: 'modules', + outDir: 'dist', + emptyOutDir: false, + sourcemap: true, + minify: false, + rollupOptions: { + external: 'vue', + output: [ + { + format: 'umd', + entryFileNames: `${entryFileName}.js`, + globals: { + vue: 'Vue', + }, + }, + { + format: 'umd', + entryFileNames: `${entryFileName}.min.js`, + globals: { + vue: 'Vue', + }, + plugins: [terser()], + }, + ], + }, + // 开启lib模式 + lib: { + entry, + formats: ['umd'], + name, + }, + }, + plugins: [vue()], + }; +}; diff --git a/packages/scripts/src/build-style/config.ts b/packages/scripts/src/build-style/config.ts new file mode 100644 index 0000000000000000000000000000000000000000..6bd2c7a2c994de59ff71eb4050333b0c5a40f13e --- /dev/null +++ b/packages/scripts/src/build-style/config.ts @@ -0,0 +1,6 @@ + +const config = { + input: './src/components', +}; + +export default config; \ No newline at end of file diff --git a/packages/scripts/src/build-style/index.ts b/packages/scripts/src/build-style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..edc0f1307afb98ea05ffa0ab32bb73163970386b --- /dev/null +++ b/packages/scripts/src/build-style/index.ts @@ -0,0 +1,63 @@ +import fs from 'fs-extra'; +import path from 'path'; +import glob from 'glob'; +import Config from './config'; +import sass from 'sass'; +import CleanCSS from 'clean-css'; + +const base = process.cwd(); + +export default function main() { + console.log('generating style...'); + const input = path.resolve(base, Config.input); + + // compile scss + const files = glob.sync('**/*.{scss,css}', { + cwd: input, + }); + + + files.forEach(fl => { + const fPath = path.resolve(input, fl); + fs.copySync(fPath, `es/${fl}`); + fs.copySync(fPath, `lib/${fl}`); + + if (/index\.scss/.test(fl)) { + console.log(`compiling ${fl}`); + const result = sass.compile(fPath, {}); + + const cssName = fl.replace('.scss', '.css'); + fs.outputFile(`es/${cssName}`, result.css); + fs.outputFile(`lib/${cssName}`, result.css); + + // compile total css + if (fl === 'index.scss') { + fs.outputFile('dist/opendesign.css', result.css); + // compile min.css + const compress = new CleanCSS().minify(result.css); + fs.outputFile('dist/opendesign.min.css', compress.styles); + + fs.writeFileSync( + 'dist/opendesign.scss', + "@import '../es/index.scss';", + ); + } + } + }); + // build index + const idxFiles = glob.sync('**/style/**/index.ts', { + cwd: input, + }); + idxFiles.forEach(fl => { + const fpath = path.resolve(input, fl); + const toFl = fl.replace(/\.ts$/, '.js'); + fs.copySync(fpath, `es/${toFl}`); + fs.copySync(fpath, `lib/${toFl}`); + + const content = fs.readFileSync(fpath, 'utf-8'); + const css = content.replace('.scss', '.css'); + const cssFile = fl.replace(/index\.ts$/, 'css.js'); + fs.outputFile(`es/${cssFile}`, css); + fs.outputFile(`lib/${cssFile}`, css); + }); +} \ No newline at end of file diff --git a/packages/scripts/src/clean-svg/config.ts b/packages/scripts/src/clean-svg/config.ts new file mode 100644 index 0000000000000000000000000000000000000000..cbc6279d23efa0c3b00f0d09802ab1a3b0f090f3 --- /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 0000000000000000000000000000000000000000..2e5c1a64f1e0962714eb353e1e99237fbe671d6c --- /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-icon/config.ts b/packages/scripts/src/gen-icon/config.ts new file mode 100644 index 0000000000000000000000000000000000000000..f2c7fdcaf31d117ca709410caf60806513ec770c --- /dev/null +++ b/packages/scripts/src/gen-icon/config.ts @@ -0,0 +1,130 @@ +import type { Config, PluginConfig } from 'svgo'; + +export interface IconsConfig { + svgo: { + fill: Config, + stroke: Config, + color: Config, + }, + input: string, + output: string, + template: typeof template +} +export const basePlugins:PluginConfig[] = [ + { + // 将id替换成class + name: 'addClassesbyId', + fn: () => { + const nodes:string[] = ['*']; + return { + element: { + enter: (node) => { + if (nodes.includes('*') || nodes.includes(node.name)){ + const classname = node.attributes.class|| ''; + const id = node.attributes.id||''; + const cls = classname.split(' '); + cls.push(id); + const classStr = cls.join(' ').trim(); + if (classStr) { + node.attributes.class = classStr; + } + } + }, + }, + }; + }, + }, + { + name: 'preset-default', + params: { + overrides: { + // 不移除view-box属性 + removeViewBox: false, + }, + }, + }, + 'removeStyleElement', + 'removeScriptElement', + 'removeDimensions', + 'sortAttrs', + 'removeUselessStrokeAndFill', + { + name: 'addAttributesToSVGElement', + params: { + attributes: [ + { ':class': 'classnames' }, + ], + }, + } +]; +const fillSvgoConfig: Config = { + plugins: [ + ...basePlugins, + { + name: 'removeAttrs', + params: { + attrs: [ + 'svg:class', + 'fill', + ], + }, + } + ], +}; +const strokeSvgoConfig: Config = { + plugins: [ + ...basePlugins, + { + name: 'removeAttrs', + params: { + attrs: [ + 'svg:class', + 'stroke', + ], + }, + } + ], +}; +const colorSvgoConfig: Config = { + plugins: [ + ...basePlugins, + { + name: 'removeAttrs', + params: { + attrs: [ + 'svg:class', + ], + }, + }, + ] +}; + +const template = ({ name, componentName, svg, type }: { name: string, componentName: string, svg: string, type: 'fill' | 'stroke' | 'color' }) => { + return ` +`; +}; + +export const defaultConfig: IconsConfig = { + svgo: { + color: colorSvgoConfig, + stroke: strokeSvgoConfig, + fill: fillSvgoConfig, + }, + input: './src/icons/svgs', + output: './src/components/icons/', + template, +}; diff --git a/packages/scripts/src/gen-icon/index.ts b/packages/scripts/src/gen-icon/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..22c01cf883dd5bff3ee31d212f664ef2c440393f --- /dev/null +++ b/packages/scripts/src/gen-icon/index.ts @@ -0,0 +1,137 @@ +import path from 'path'; +import { defaultConfig, IconsConfig } from './config'; +import glob from 'glob'; +import { toPascalCase } from '../utils'; +import { optimize } from 'svgo'; +import fs from 'fs-extra'; + +/** + * 读取配置文件 + */ +async function readConfig(cfg: string) { + const base = process.cwd(); + const configFile = path.resolve(base, cfg || './icon.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, + }; +} + +enum SvgType { + FILL = 'fill', + STROKE = 'stroke', + COLOR = 'color', +} + +interface IconItem { + type: SvgType; + name: string; + componentName: string; + path: string; +} + +/** + * 读取svg图标文件列表 + */ +function readSvgData(cfg: IconsConfig) { + const svgs: Array = []; + [SvgType.FILL, SvgType.STROKE, SvgType.COLOR].forEach((key) => { + const files = glob.sync(`${key}/**/*.svg`, { + cwd: cfg.input, + absolute: true, + }); + + files.forEach((file) => { + const name = `icon-${path.basename(file.replace(/\s/g, ''), '.svg')}`; + svgs.push({ + type: key, + name: name, + componentName: toPascalCase(name), + path: file, + }); + }); + }); + return svgs; +} + +/** + * 创建图标组件 + * @param icons 图标列表 + */ +function generateIconComponents(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[item.type]; + + const rlt = optimize(file, { + path: item.path, + ...svgoCfg, + }); + + const content = cfg.template({ + name: item.name, + componentName: item.componentName, + svg: rlt.data, + type: item.type, + }); + + fs.outputFile(path.resolve(cfg.output, `${item.componentName}/${item.componentName}.vue`), content, (err) => { + if (err) { + console.log(`build [${item.componentName}] failed: ${err}`); + } else { + console.log(`build [${item.componentName}] success`); + } + }); + + const idxContent = `export { default as ${item.componentName} } from './${item.componentName}.vue';`; + fs.outputFile(path.resolve(cfg.output, `${item.componentName}/index.ts`), idxContent, (err) => { + if (err) { + console.log(`build index [${item.componentName}] failed: ${err}`); + } else { + console.log(`build index [${item.componentName}] success`); + } + }); + }); +} +/** + * 创建入口文件 + * @param icons + */ +function generateExportIndex(icons: Array, output: string) { + console.log('generating index.ts...'); + + const content = icons.map((item) => { + return `export { ${item.componentName} } from './${item.componentName}';`; + }); + + fs.outputFileSync(path.resolve(output, 'index.ts'), content.join('\n')); + + // 创建图标地图 + fs.outputFileSync(path.resolve(output, 'icons.json'), JSON.stringify(icons, null, 2)); +} +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) { + generateIconComponents(svgs, data); + generateExportIndex(svgs, data.output); + } +} diff --git a/packages/scripts/src/gen-token/index.ts b/packages/scripts/src/gen-token/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..b6138c8ff9ded78fbaccc4dc92f446848f8c20c4 --- /dev/null +++ b/packages/scripts/src/gen-token/index.ts @@ -0,0 +1,218 @@ +import path from 'path'; +import fs from 'fs-extra'; + +export interface TokenConfigT { + output: string, + prefix: string, + themes: string[], + defaultTheme: string, + tokenFile: string[], + codeSnippetsFile: string +} +interface FlatTokenT { + prefix: string, + catgName: string, + key: string, + tokenKey: string, + name: string, + type: string, + group: string, + description: string, + themes: string[], + value: { + [key: string]: string + } +} +interface ThemeTokenT { + prefix: string, + catgName: string, + key: string, + tokenKey: string, + name: string, + type: string, + group: string, + description: string, + themes: string[], + value: string +} + +export interface TokenT { + [key: string]: { + name: string, + type: string, + value: Array<{ + key: string, + name: string, + description: string, + value: { + [key: string]: string + } + }> + } +} + +/** + * 读取配置文件 + */ +async function readConfig(cfg: string) { + const base = process.cwd(); + const configFile = path.resolve(base, cfg || './token.config.ts'); + const configData: TokenConfigT = await require(configFile); + const cfgDir = path.dirname(configFile); + + const { tokenFile, output = './', codeSnippetsFile } = configData; + + configData.output = path.resolve(cfgDir, output); + + if (codeSnippetsFile) { + configData.codeSnippetsFile = path.resolve(cfgDir, codeSnippetsFile); + } + + if (Array.isArray(tokenFile)) { + configData.tokenFile = tokenFile.map(item => path.resolve(cfgDir, item)); + } else if (typeof tokenFile === 'string') { + configData.tokenFile = [path.resolve(cfgDir, tokenFile)]; + } + + return { + file: configFile, + data: configData + }; +} +/** + * 读取tokens + */ +async function readTokens(configData: TokenConfigT) { + console.warn('reading tokens...'); + + const { prefix, tokenFile } = configData; + const tokens: Record = {}; + + tokenFile.forEach(tk => { + try { + const tokenContent: TokenT = require(tk); + Object.keys(tokenContent).forEach(k => { + const catg = tokenContent[k]; + catg.value.forEach(item => { + const { key, value, ...rest } = item; + const tokenKey = `${prefix}${item.key}`; + + if (tokens[key]) { + console.warn('重复定义的token:', tokenKey); + } + + tokens[key] = { + key, + tokenKey, + value, + prefix, + type: catg.type, + group: k, + catgName: catg.name, + themes: Object.keys(value), + ...rest, + }; + }); + }); + + } catch (error) { + console.warn('load token eror:', tk); + } + }); + + return tokens; +} +/** + * 生成css的模板 + */ +function tokenCssTemplate(themeArray: string[], tokens: Array) { + const content = tokens.map(item => { + const { tokenKey, value, name = '', type = '', description = '', group = '' } = item; + return ` /** + * @name ${name} + * @type ${type} + * @group ${group} + * @description ${description} + */ + ${tokenKey}: ${value};`; + }); + + const selector = themeArray.map(t => { + if (t === 'default') { + return ':root'; + } + return `[data-o-theme="${t}"]`; + }); + + return `/* theme: ${themeArray.join('|')} */ +${selector.join(',\n')} { +${content.join('\n')} +}`; +} + +/** + * 生成token.css + */ +function generateTokenCss(tokens: Record, themes: string[], defaultTheme: string, outDir: string) { + const themeToken: Record> = {}; + + Object.keys(tokens).forEach(k => { + const token = tokens[k]; + const { value, ...rest } = token; + + themes.forEach(theme => { + if (!themeToken[theme]) { + themeToken[theme] = []; + } + if (value[theme]) { + themeToken[theme].push({ + value: value[theme], + ...rest + }); + } + }); + }); + + themes.forEach(theme => { + let themeArray = [theme]; + if (theme === defaultTheme) { + themeArray.unshift('default'); + } + const content = tokenCssTemplate(themeArray, themeToken[theme]); + + fs.outputFileSync(path.join(outDir, `${themeArray.join('-')}.token.css`), content); + console.log(`[${themeArray.join('|')}] theme token file generated!`); + }); +} + +function generateCodeSnippets(tokens: Record, outFile: string) { + const snippets: Record = {}; + Object.keys(tokens).forEach(k => { + const token = tokens[k]; + const { value, tokenKey, description } = token; + const themes = Object.keys(value).map(theme => `${theme}: ${value[theme]}`); + const desc = `${description || ''}[${themes.join(', ')}]`; + const code = `var(${tokenKey})`; + + snippets[tokenKey] = { + prefix: [code], + body: code, + description: desc, + scope: 'css,scss,less' + }; + }); + fs.outputFileSync(outFile, JSON.stringify(snippets, null, ' ')); + console.log('code snippets generated!'); +} + +export default async function main(options: { config: string }) { + const { data } = await readConfig(options.config); + + const tokens = await readTokens(data); + + generateTokenCss(tokens, data.themes, data.defaultTheme, data.output); + + if (data.codeSnippetsFile) { + generateCodeSnippets(tokens, data.codeSnippetsFile); + } +} \ No newline at end of file diff --git a/packages/scripts/src/index.ts b/packages/scripts/src/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..19438ce03cac7c13674acc83ebbc0419bf7de07a --- /dev/null +++ b/packages/scripts/src/index.ts @@ -0,0 +1,55 @@ +import path from 'path'; +import fs from 'fs-extra'; +import { Command } from 'commander'; + +import buildIcons from './gen-icon'; +import cleanSvgs from './clean-svg'; +import buildComponents from './build-components'; +import buildStyle from './build-style'; +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 + .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') + .description('build opendesign components') + .action(() => { + buildComponents(); + }); + +program + .command('build:style') + .description('build opendesign style') + .action(() => { + buildStyle(); + }); + +program + .command('gen:token') + .description('generate opendesign tokens') + .option('-c, --config ', 'config file') + .action((options) => { + genTokens(options); + }); + +program.parse(process.argv); diff --git a/packages/scripts/src/utils.ts b/packages/scripts/src/utils.ts new file mode 100644 index 0000000000000000000000000000000000000000..ddb6a5be4087ae6240989cbe7c7dc77c8b1cd880 --- /dev/null +++ b/packages/scripts/src/utils.ts @@ -0,0 +1,13 @@ +export const toKebabCase = (string: string): string => { + return string.replace(/[A-Z]+/g, (match, offset) => { + return `${offset > 0 ? '-' : ''}${match.toLocaleLowerCase()}`; + }); +}; + +export const toPascalCase = (string: string): string => { + return string + .replace(/^./, (match) => match.toLocaleUpperCase()) + .replace(/-(.)/g, (match, $1: string) => { + return $1.toLocaleUpperCase(); + }); +}; diff --git a/packages/scripts/tsconfig.json b/packages/scripts/tsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..b6a9b04504df71912fa4d5a1593604f17770f3da --- /dev/null +++ b/packages/scripts/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "sourceMap": true, + "outDir": "dist", + "module": "CommonJS", + "target": "ES2015", + "allowJs": true, + "moduleResolution": "node", + "baseUrl": ".", + "strict": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "skipLibCheck": true, + "lib": [ + "DOM", + "ESNext", + ] + }, + "include": [ + "src", + ], +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 0000000000000000000000000000000000000000..5c02f09029094f56158fb42648ba69a63efee8d1 --- /dev/null +++ b/pnpm-lock.yaml @@ -0,0 +1,2198 @@ +lockfileVersion: 5.4 + +importers: + + .: + specifiers: + '@types/node': ^18.11.9 + '@typescript-eslint/eslint-plugin': ^5.45.0 + '@typescript-eslint/parser': ^5.45.0 + eslint: ^8.28.0 + eslint-plugin-vue: ^9.8.0 + typescript: ^4.6.4 + devDependencies: + '@types/node': 18.11.18 + '@typescript-eslint/eslint-plugin': 5.48.0_wxmz6cyorqfuzhhglktlvr5lve + '@typescript-eslint/parser': 5.48.0_p4cjf2r47dnfiqufepc5hp43sq + eslint: 8.31.0 + eslint-plugin-vue: 9.8.0_eslint@8.31.0 + typescript: 4.9.3 + + packages/opendesign: + specifiers: + '@opensig/opensig-scripts': workspace:^0.0.1 + '@types/lodash-es': ^4.17.6 + intersection-observer-polyfill: ^0.1.0 + lodash-es: ^4.17.21 + resize-observer-polyfill: ^1.5.1 + typescript: ^4.6.4 + vue: ^3.2.41 + vue-tsc: ^1.0.13 + dependencies: + intersection-observer-polyfill: 0.1.0 + lodash-es: 4.17.21 + resize-observer-polyfill: 1.5.1 + devDependencies: + '@opensig/opensig-scripts': link:../scripts + '@types/lodash-es': 4.17.6 + typescript: 4.9.3 + vue: 3.2.45 + vue-tsc: 1.0.13_typescript@4.9.3 + + packages/portal: + specifiers: + '@opensig/opendesign': workspace:^0.0.1 + '@vitejs/plugin-vue': ^3.2.0 + normalize.css: ^8.0.1 + sass: ^1.56.1 + typescript: ^4.6.4 + vite: ^3.2.3 + vue: ^3.2.41 + vue-router: ^4.1.6 + vue-tsc: ^1.0.13 + dependencies: + '@opensig/opendesign': link:../opendesign + normalize.css: 8.0.1 + vue: 3.2.45 + vue-router: 4.1.6_vue@3.2.45 + devDependencies: + '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.45 + sass: 1.57.1 + typescript: 4.9.3 + vite: 3.2.5_sass@1.57.1 + vue-tsc: 1.0.13_typescript@4.9.3 + + packages/scripts: + specifiers: + '@rollup/plugin-terser': ^0.2.1 + '@types/clean-css': ^4.2.6 + '@types/fs-extra': ^9.0.13 + '@types/glob': ^8.0.0 + '@vitejs/plugin-vue': ^3.2.0 + clean-css: ^5.3.1 + commander: ^9.4.1 + fs-extra: ^11.1.0 + glob: ^8.0.3 + sass: ^1.56.1 + svgo: ^3.0.2 + typescript: ^4.6.4 + vite: ^3.2.3 + vite-plugin-dts: ^1.7.1 + vue: ^3.2.41 + dependencies: + '@rollup/plugin-terser': 0.2.1 + '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.45 + clean-css: 5.3.1 + commander: 9.4.1 + fs-extra: 11.1.0 + glob: 8.0.3 + sass: 1.57.1 + svgo: 3.0.2 + vite-plugin-dts: 1.7.1_vite@3.2.5 + vue: 3.2.45 + devDependencies: + '@types/clean-css': 4.2.6 + '@types/fs-extra': 9.0.13 + '@types/glob': 8.0.0 + typescript: 4.9.3 + vite: 3.2.5_sass@1.57.1 + +packages: + + /@babel/helper-string-parser/7.19.4: + resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==} + engines: {node: '>=6.9.0'} + + /@babel/helper-validator-identifier/7.19.1: + resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==} + engines: {node: '>=6.9.0'} + + /@babel/parser/7.20.5: + resolution: {integrity: sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.20.5 + + /@babel/types/7.20.5: + resolution: {integrity: sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.19.4 + '@babel/helper-validator-identifier': 7.19.1 + to-fast-properties: 2.0.0 + + /@esbuild/android-arm/0.15.18: + resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + optional: true + + /@esbuild/linux-loong64/0.15.18: + resolution: {integrity: sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + optional: true + + /@eslint/eslintrc/1.4.1: + resolution: {integrity: sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + ajv: 6.12.6 + debug: 4.3.4 + espree: 9.4.1 + globals: 13.19.0 + ignore: 5.2.4 + import-fresh: 3.3.0 + js-yaml: 4.1.0 + minimatch: 3.1.2 + strip-json-comments: 3.1.1 + transitivePeerDependencies: + - supports-color + dev: true + + /@humanwhocodes/config-array/0.11.8: + resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==} + engines: {node: '>=10.10.0'} + dependencies: + '@humanwhocodes/object-schema': 1.2.1 + debug: 4.3.4 + minimatch: 3.1.2 + transitivePeerDependencies: + - supports-color + dev: true + + /@humanwhocodes/module-importer/1.0.1: + resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} + engines: {node: '>=12.22'} + dev: true + + /@humanwhocodes/object-schema/1.2.1: + resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} + dev: true + + /@jridgewell/gen-mapping/0.3.2: + resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} + engines: {node: '>=6.0.0'} + dependencies: + '@jridgewell/set-array': 1.1.2 + '@jridgewell/sourcemap-codec': 1.4.14 + '@jridgewell/trace-mapping': 0.3.17 + dev: false + + /@jridgewell/resolve-uri/3.1.0: + resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==} + engines: {node: '>=6.0.0'} + dev: false + + /@jridgewell/set-array/1.1.2: + resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} + engines: {node: '>=6.0.0'} + dev: false + + /@jridgewell/source-map/0.3.2: + resolution: {integrity: sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==} + dependencies: + '@jridgewell/gen-mapping': 0.3.2 + '@jridgewell/trace-mapping': 0.3.17 + dev: false + + /@jridgewell/sourcemap-codec/1.4.14: + resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==} + dev: false + + /@jridgewell/trace-mapping/0.3.17: + resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==} + dependencies: + '@jridgewell/resolve-uri': 3.1.0 + '@jridgewell/sourcemap-codec': 1.4.14 + dev: false + + /@microsoft/api-extractor-model/7.25.3: + resolution: {integrity: sha512-WWxBUq77p2iZ+5VF7Nmrm3y/UtqCh5bYV8ii3khwq3w99+fXWpvfsAhgSLsC7k8XDQc6De4ssMxH6He/qe1pzg==} + dependencies: + '@microsoft/tsdoc': 0.14.2 + '@microsoft/tsdoc-config': 0.16.2 + '@rushstack/node-core-library': 3.53.3 + dev: false + + /@microsoft/api-extractor/7.33.7: + resolution: {integrity: sha512-fQT2v/j/55DhvMFiopLtth66E7xTFNhnumMKgKY14SaG6qU/V1W0e4nOAgbA+SmLakQjAd1Evu06ofaVaxBPbA==} + hasBin: true + dependencies: + '@microsoft/api-extractor-model': 7.25.3 + '@microsoft/tsdoc': 0.14.2 + '@microsoft/tsdoc-config': 0.16.2 + '@rushstack/node-core-library': 3.53.3 + '@rushstack/rig-package': 0.3.17 + '@rushstack/ts-command-line': 4.13.1 + colors: 1.2.5 + lodash: 4.17.21 + resolve: 1.17.0 + semver: 7.3.8 + source-map: 0.6.1 + typescript: 4.8.4 + dev: false + + /@microsoft/tsdoc-config/0.16.2: + resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==} + dependencies: + '@microsoft/tsdoc': 0.14.2 + ajv: 6.12.6 + jju: 1.4.0 + resolve: 1.19.0 + dev: false + + /@microsoft/tsdoc/0.14.2: + resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==} + dev: false + + /@nodelib/fs.scandir/2.1.5: + resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} + engines: {node: '>= 8'} + dependencies: + '@nodelib/fs.stat': 2.0.5 + run-parallel: 1.2.0 + + /@nodelib/fs.stat/2.0.5: + resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==} + engines: {node: '>= 8'} + + /@nodelib/fs.walk/1.2.8: + resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} + engines: {node: '>= 8'} + dependencies: + '@nodelib/fs.scandir': 2.1.5 + fastq: 1.15.0 + + /@rollup/plugin-terser/0.2.1: + resolution: {integrity: sha512-hV52c8Oo6/cXZZxVVoRNBb4zh+EKSHS4I1sedWV5pf0O+hTLSkrf6w86/V0AZutYtwBguB6HLKwz89WDBfwGOA==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^2.x || ^3.x + peerDependenciesMeta: + rollup: + optional: true + dependencies: + serialize-javascript: 6.0.0 + smob: 0.0.6 + terser: 5.16.1 + dev: false + + /@rollup/pluginutils/5.0.2: + resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.0 + estree-walker: 2.0.2 + picomatch: 2.3.1 + dev: false + + /@rushstack/node-core-library/3.53.3: + resolution: {integrity: sha512-H0+T5koi5MFhJUd5ND3dI3bwLhvlABetARl78L3lWftJVQEPyzcgTStvTTRiIM5mCltyTM8VYm6BuCtNUuxD0Q==} + dependencies: + '@types/node': 12.20.24 + colors: 1.2.5 + fs-extra: 7.0.1 + import-lazy: 4.0.0 + jju: 1.4.0 + resolve: 1.17.0 + semver: 7.3.8 + z-schema: 5.0.5 + dev: false + + /@rushstack/rig-package/0.3.17: + resolution: {integrity: sha512-nxvAGeIMnHl1LlZSQmacgcRV4y1EYtgcDIrw6KkeVjudOMonlxO482PhDj3LVZEp6L7emSf6YSO2s5JkHlwfZA==} + dependencies: + resolve: 1.17.0 + strip-json-comments: 3.1.1 + dev: false + + /@rushstack/ts-command-line/4.13.1: + resolution: {integrity: sha512-UTQMRyy/jH1IS2U+6pyzyn9xQ2iMcoUKkTcZUzOP/aaMiKlWLwCTDiBVwhw/M1crDx6apF9CwyjuWO9r1SBdJQ==} + dependencies: + '@types/argparse': 1.0.38 + argparse: 1.0.10 + colors: 1.2.5 + string-argv: 0.3.1 + dev: false + + /@trysound/sax/0.2.0: + resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} + engines: {node: '>=10.13.0'} + dev: false + + /@ts-morph/common/0.17.0: + resolution: {integrity: sha512-RMSSvSfs9kb0VzkvQ2NWobwnj7TxCA9vI/IjR9bDHqgAyVbu2T0DN4wiKVqomyDWqO7dPr/tErSfq7urQ1Q37g==} + dependencies: + fast-glob: 3.2.12 + minimatch: 5.1.1 + mkdirp: 1.0.4 + path-browserify: 1.0.1 + dev: false + + /@types/argparse/1.0.38: + resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==} + dev: false + + /@types/clean-css/4.2.6: + resolution: {integrity: sha512-Ze1tf+LnGPmG6hBFMi0B4TEB0mhF7EiMM5oyjLDNPE9hxrPU0W+5+bHvO+eFPA+bt0iC1zkQMoU/iGdRVjcRbw==} + dependencies: + '@types/node': 18.11.18 + source-map: 0.6.1 + dev: true + + /@types/estree/1.0.0: + resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==} + dev: false + + /@types/fs-extra/9.0.13: + resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==} + dependencies: + '@types/node': 18.11.18 + dev: true + + /@types/glob/8.0.0: + resolution: {integrity: sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA==} + dependencies: + '@types/minimatch': 5.1.2 + '@types/node': 18.11.18 + dev: true + + /@types/json-schema/7.0.11: + resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==} + dev: true + + /@types/lodash-es/4.17.6: + resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==} + dependencies: + '@types/lodash': 4.14.191 + dev: true + + /@types/lodash/4.14.191: + resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==} + dev: true + + /@types/minimatch/5.1.2: + resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==} + dev: true + + /@types/node/12.20.24: + resolution: {integrity: sha512-yxDeaQIAJlMav7fH5AQqPH1u8YIuhYJXYBzxaQ4PifsU0GDO38MSdmEDeRlIxrKbC6NbEaaEHDanWb+y30U8SQ==} + dev: false + + /@types/node/18.11.18: + resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==} + dev: true + + /@types/semver/7.3.13: + resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==} + dev: true + + /@typescript-eslint/eslint-plugin/5.48.0_wxmz6cyorqfuzhhglktlvr5lve: + resolution: {integrity: sha512-SVLafp0NXpoJY7ut6VFVUU9I+YeFsDzeQwtK0WZ+xbRN3mtxJ08je+6Oi2N89qDn087COdO0u3blKZNv9VetRQ==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + '@typescript-eslint/parser': ^5.0.0 + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/parser': 5.48.0_p4cjf2r47dnfiqufepc5hp43sq + '@typescript-eslint/scope-manager': 5.48.0 + '@typescript-eslint/type-utils': 5.48.0_p4cjf2r47dnfiqufepc5hp43sq + '@typescript-eslint/utils': 5.48.0_p4cjf2r47dnfiqufepc5hp43sq + debug: 4.3.4 + eslint: 8.31.0 + ignore: 5.2.4 + natural-compare-lite: 1.4.0 + regexpp: 3.2.0 + semver: 7.3.8 + tsutils: 3.21.0_typescript@4.9.3 + typescript: 4.9.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript-eslint/parser/5.48.0_p4cjf2r47dnfiqufepc5hp43sq: + resolution: {integrity: sha512-1mxNA8qfgxX8kBvRDIHEzrRGrKHQfQlbW6iHyfHYS0Q4X1af+S6mkLNtgCOsGVl8+/LUPrqdHMssAemkrQ01qg==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/scope-manager': 5.48.0 + '@typescript-eslint/types': 5.48.0 + '@typescript-eslint/typescript-estree': 5.48.0_typescript@4.9.3 + debug: 4.3.4 + eslint: 8.31.0 + typescript: 4.9.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript-eslint/scope-manager/5.48.0: + resolution: {integrity: sha512-0AA4LviDtVtZqlyUQnZMVHydDATpD9SAX/RC5qh6cBd3xmyWvmXYF+WT1oOmxkeMnWDlUVTwdODeucUnjz3gow==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + '@typescript-eslint/types': 5.48.0 + '@typescript-eslint/visitor-keys': 5.48.0 + dev: true + + /@typescript-eslint/type-utils/5.48.0_p4cjf2r47dnfiqufepc5hp43sq: + resolution: {integrity: sha512-vbtPO5sJyFjtHkGlGK4Sthmta0Bbls4Onv0bEqOGm7hP9h8UpRsHJwsrCiWtCUndTRNQO/qe6Ijz9rnT/DB+7g==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: '*' + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/typescript-estree': 5.48.0_typescript@4.9.3 + '@typescript-eslint/utils': 5.48.0_p4cjf2r47dnfiqufepc5hp43sq + debug: 4.3.4 + eslint: 8.31.0 + tsutils: 3.21.0_typescript@4.9.3 + typescript: 4.9.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript-eslint/types/5.48.0: + resolution: {integrity: sha512-UTe67B0Ypius0fnEE518NB2N8gGutIlTojeTg4nt0GQvikReVkurqxd2LvYa9q9M5MQ6rtpNyWTBxdscw40Xhw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dev: true + + /@typescript-eslint/typescript-estree/5.48.0_typescript@4.9.3: + resolution: {integrity: sha512-7pjd94vvIjI1zTz6aq/5wwE/YrfIyEPLtGJmRfyNR9NYIW+rOvzzUv3Cmq2hRKpvt6e9vpvPUQ7puzX7VSmsEw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/types': 5.48.0 + '@typescript-eslint/visitor-keys': 5.48.0 + debug: 4.3.4 + globby: 11.1.0 + is-glob: 4.0.3 + semver: 7.3.8 + tsutils: 3.21.0_typescript@4.9.3 + typescript: 4.9.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript-eslint/utils/5.48.0_p4cjf2r47dnfiqufepc5hp43sq: + resolution: {integrity: sha512-x2jrMcPaMfsHRRIkL+x96++xdzvrdBCnYRd5QiW5Wgo1OB4kDYPbC1XjWP/TNqlfK93K/lUL92erq5zPLgFScQ==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + dependencies: + '@types/json-schema': 7.0.11 + '@types/semver': 7.3.13 + '@typescript-eslint/scope-manager': 5.48.0 + '@typescript-eslint/types': 5.48.0 + '@typescript-eslint/typescript-estree': 5.48.0_typescript@4.9.3 + eslint: 8.31.0 + eslint-scope: 5.1.1 + eslint-utils: 3.0.0_eslint@8.31.0 + semver: 7.3.8 + transitivePeerDependencies: + - supports-color + - typescript + dev: true + + /@typescript-eslint/visitor-keys/5.48.0: + resolution: {integrity: sha512-5motVPz5EgxQ0bHjut3chzBkJ3Z3sheYVcSwS5BpHZpLqSptSmELNtGixmgj65+rIfhvtQTz5i9OP2vtzdDH7Q==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + '@typescript-eslint/types': 5.48.0 + eslint-visitor-keys: 3.3.0 + dev: true + + /@vitejs/plugin-vue/3.2.0_vite@3.2.5+vue@3.2.45: + resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^3.0.0 + vue: ^3.2.25 + dependencies: + vite: 3.2.5_sass@1.57.1 + vue: 3.2.45 + + /@volar/language-core/1.0.13: + resolution: {integrity: sha512-aJhRiNjKFgLLB3nRJOfAeyle4StnEQgOKa0UpJU+k5EZd3QdiMfQmekXjxYeQj7NOZNQU7zCBEIvQ3gy15I7tA==} + dependencies: + '@volar/source-map': 1.0.13 + '@vue/reactivity': 3.2.45 + muggle-string: 0.1.0 + dev: true + + /@volar/source-map/1.0.13: + resolution: {integrity: sha512-dU0plR9BS+bLs7u4chWay+VEIFTrLF15rG2634lGcu7o+z01bRO1U2cegZuIPy46SNkN3ONErLHwS09NBM+Ucg==} + dependencies: + muggle-string: 0.1.0 + dev: true + + /@volar/typescript/1.0.13: + resolution: {integrity: sha512-CfJ4higRZrLDAHVGY84gZ444ZUcA3ktPqVMW0fM3mgHDbzYViB3/tsvXOtZk76D3HK2ap6n4cDwBSv3cY4xqlg==} + dependencies: + '@volar/language-core': 1.0.13 + dev: true + + /@volar/vue-language-core/1.0.13: + resolution: {integrity: sha512-DRUg7yk4w2+5XFk8LS1dbXEM0na2uAddOj3KWHROPQmn78pfgXEH3r0NGDCnxElWJX5Y16iameisOjtOhevxog==} + dependencies: + '@volar/language-core': 1.0.13 + '@volar/source-map': 1.0.13 + '@vue/compiler-dom': 3.2.45 + '@vue/compiler-sfc': 3.2.45 + '@vue/reactivity': 3.2.45 + '@vue/shared': 3.2.45 + minimatch: 5.1.1 + vue-template-compiler: 2.7.14 + dev: true + + /@volar/vue-typescript/1.0.13: + resolution: {integrity: sha512-iEdkF5l6G10fv/G5hs7WcvtT48AT6y/Pm7pvafnB6SxPhm2uHQ+130x3zeWLMaUel5t6h5LBw2pFsF5Bh85QAQ==} + dependencies: + '@volar/typescript': 1.0.13 + '@volar/vue-language-core': 1.0.13 + dev: true + + /@vue/compiler-core/3.2.45: + resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==} + dependencies: + '@babel/parser': 7.20.5 + '@vue/shared': 3.2.45 + estree-walker: 2.0.2 + source-map: 0.6.1 + + /@vue/compiler-dom/3.2.45: + resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==} + dependencies: + '@vue/compiler-core': 3.2.45 + '@vue/shared': 3.2.45 + + /@vue/compiler-sfc/3.2.45: + resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==} + dependencies: + '@babel/parser': 7.20.5 + '@vue/compiler-core': 3.2.45 + '@vue/compiler-dom': 3.2.45 + '@vue/compiler-ssr': 3.2.45 + '@vue/reactivity-transform': 3.2.45 + '@vue/shared': 3.2.45 + estree-walker: 2.0.2 + magic-string: 0.25.9 + postcss: 8.4.19 + source-map: 0.6.1 + + /@vue/compiler-ssr/3.2.45: + resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==} + dependencies: + '@vue/compiler-dom': 3.2.45 + '@vue/shared': 3.2.45 + + /@vue/devtools-api/6.4.5: + resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==} + dev: false + + /@vue/reactivity-transform/3.2.45: + resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==} + dependencies: + '@babel/parser': 7.20.5 + '@vue/compiler-core': 3.2.45 + '@vue/shared': 3.2.45 + estree-walker: 2.0.2 + magic-string: 0.25.9 + + /@vue/reactivity/3.2.45: + resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==} + dependencies: + '@vue/shared': 3.2.45 + + /@vue/runtime-core/3.2.45: + resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==} + dependencies: + '@vue/reactivity': 3.2.45 + '@vue/shared': 3.2.45 + + /@vue/runtime-dom/3.2.45: + resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==} + dependencies: + '@vue/runtime-core': 3.2.45 + '@vue/shared': 3.2.45 + csstype: 2.6.21 + + /@vue/server-renderer/3.2.45_vue@3.2.45: + resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==} + peerDependencies: + vue: 3.2.45 + dependencies: + '@vue/compiler-ssr': 3.2.45 + '@vue/shared': 3.2.45 + vue: 3.2.45 + + /@vue/shared/3.2.45: + resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==} + + /acorn-jsx/5.3.2_acorn@8.8.1: + resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + dependencies: + acorn: 8.8.1 + dev: true + + /acorn/8.8.1: + resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==} + engines: {node: '>=0.4.0'} + hasBin: true + + /ajv/6.12.6: + resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} + dependencies: + fast-deep-equal: 3.1.3 + fast-json-stable-stringify: 2.1.0 + json-schema-traverse: 0.4.1 + uri-js: 4.4.1 + + /ansi-regex/5.0.1: + resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} + engines: {node: '>=8'} + dev: true + + /ansi-styles/4.3.0: + resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} + engines: {node: '>=8'} + dependencies: + color-convert: 2.0.1 + dev: true + + /anymatch/3.1.3: + resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} + engines: {node: '>= 8'} + dependencies: + normalize-path: 3.0.0 + picomatch: 2.3.1 + + /argparse/1.0.10: + resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} + dependencies: + sprintf-js: 1.0.3 + dev: false + + /argparse/2.0.1: + resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + dev: true + + /array-union/2.1.0: + resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==} + engines: {node: '>=8'} + dev: true + + /balanced-match/1.0.2: + resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + + /binary-extensions/2.2.0: + resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} + engines: {node: '>=8'} + + /boolbase/1.0.0: + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} + + /brace-expansion/1.1.11: + resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} + dependencies: + balanced-match: 1.0.2 + concat-map: 0.0.1 + dev: true + + /brace-expansion/2.0.1: + resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} + dependencies: + balanced-match: 1.0.2 + + /braces/3.0.2: + resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} + engines: {node: '>=8'} + dependencies: + fill-range: 7.0.1 + + /buffer-from/1.1.2: + resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} + dev: false + + /callsites/3.1.0: + resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} + engines: {node: '>=6'} + dev: true + + /chalk/4.1.2: + resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} + engines: {node: '>=10'} + dependencies: + ansi-styles: 4.3.0 + supports-color: 7.2.0 + dev: true + + /chokidar/3.5.3: + resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} + engines: {node: '>= 8.10.0'} + dependencies: + anymatch: 3.1.3 + braces: 3.0.2 + glob-parent: 5.1.2 + is-binary-path: 2.1.0 + is-glob: 4.0.3 + normalize-path: 3.0.0 + readdirp: 3.6.0 + optionalDependencies: + fsevents: 2.3.2 + + /clean-css/5.3.1: + resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} + engines: {node: '>= 10.0'} + dependencies: + source-map: 0.6.1 + dev: false + + /code-block-writer/11.0.3: + resolution: {integrity: sha512-NiujjUFB4SwScJq2bwbYUtXbZhBSlY6vYzm++3Q6oC+U+injTqfPYFK8wS9COOmb2lueqp0ZRB4nK1VYeHgNyw==} + dev: false + + /color-convert/2.0.1: + resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} + engines: {node: '>=7.0.0'} + dependencies: + color-name: 1.1.4 + dev: true + + /color-name/1.1.4: + resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + dev: true + + /colors/1.2.5: + resolution: {integrity: sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==} + engines: {node: '>=0.1.90'} + dev: false + + /commander/2.20.3: + resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} + dev: false + + /commander/7.2.0: + resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} + engines: {node: '>= 10'} + dev: false + + /commander/9.4.1: + resolution: {integrity: sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==} + engines: {node: ^12.20.0 || >=14} + dev: false + + /concat-map/0.0.1: + resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} + dev: true + + /cross-spawn/7.0.3: + resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} + engines: {node: '>= 8'} + dependencies: + path-key: 3.1.1 + shebang-command: 2.0.0 + which: 2.0.2 + dev: true + + /css-select/5.1.0: + resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} + dependencies: + boolbase: 1.0.0 + css-what: 6.1.0 + domhandler: 5.0.3 + domutils: 3.0.1 + nth-check: 2.1.1 + dev: false + + /css-tree/2.2.1: + resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + dependencies: + mdn-data: 2.0.28 + source-map-js: 1.0.2 + dev: false + + /css-tree/2.3.1: + resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + dependencies: + mdn-data: 2.0.30 + source-map-js: 1.0.2 + dev: false + + /css-what/6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + dev: false + + /cssesc/3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + dev: true + + /csso/5.0.5: + resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + dependencies: + css-tree: 2.2.1 + dev: false + + /csstype/2.6.21: + resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==} + + /de-indent/1.0.2: + resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} + dev: true + + /debug/4.3.4: + resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + + /deep-is/0.1.4: + resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} + dev: true + + /dir-glob/3.0.1: + resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} + engines: {node: '>=8'} + dependencies: + path-type: 4.0.0 + dev: true + + /doctrine/3.0.0: + resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} + engines: {node: '>=6.0.0'} + dependencies: + esutils: 2.0.3 + dev: true + + /dom-serializer/2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.4.0 + dev: false + + /domelementtype/2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + dev: false + + /domhandler/5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + dependencies: + domelementtype: 2.3.0 + dev: false + + /domutils/3.0.1: + resolution: {integrity: sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==} + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + dev: false + + /entities/4.4.0: + resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==} + engines: {node: '>=0.12'} + dev: false + + /esbuild-android-64/0.15.18: + resolution: {integrity: sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + optional: true + + /esbuild-android-arm64/0.15.18: + resolution: {integrity: sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + optional: true + + /esbuild-darwin-64/0.15.18: + resolution: {integrity: sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + optional: true + + /esbuild-darwin-arm64/0.15.18: + resolution: {integrity: sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + optional: true + + /esbuild-freebsd-64/0.15.18: + resolution: {integrity: sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + optional: true + + /esbuild-freebsd-arm64/0.15.18: + resolution: {integrity: sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + optional: true + + /esbuild-linux-32/0.15.18: + resolution: {integrity: sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + optional: true + + /esbuild-linux-64/0.15.18: + resolution: {integrity: sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + optional: true + + /esbuild-linux-arm/0.15.18: + resolution: {integrity: sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + optional: true + + /esbuild-linux-arm64/0.15.18: + resolution: {integrity: sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + optional: true + + /esbuild-linux-mips64le/0.15.18: + resolution: {integrity: sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + optional: true + + /esbuild-linux-ppc64le/0.15.18: + resolution: {integrity: sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + optional: true + + /esbuild-linux-riscv64/0.15.18: + resolution: {integrity: sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + optional: true + + /esbuild-linux-s390x/0.15.18: + resolution: {integrity: sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + optional: true + + /esbuild-netbsd-64/0.15.18: + resolution: {integrity: sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + optional: true + + /esbuild-openbsd-64/0.15.18: + resolution: {integrity: sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + optional: true + + /esbuild-sunos-64/0.15.18: + resolution: {integrity: sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + optional: true + + /esbuild-windows-32/0.15.18: + resolution: {integrity: sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + optional: true + + /esbuild-windows-64/0.15.18: + resolution: {integrity: sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + optional: true + + /esbuild-windows-arm64/0.15.18: + resolution: {integrity: sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + optional: true + + /esbuild/0.15.18: + resolution: {integrity: sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/android-arm': 0.15.18 + '@esbuild/linux-loong64': 0.15.18 + esbuild-android-64: 0.15.18 + esbuild-android-arm64: 0.15.18 + esbuild-darwin-64: 0.15.18 + esbuild-darwin-arm64: 0.15.18 + esbuild-freebsd-64: 0.15.18 + esbuild-freebsd-arm64: 0.15.18 + esbuild-linux-32: 0.15.18 + esbuild-linux-64: 0.15.18 + esbuild-linux-arm: 0.15.18 + esbuild-linux-arm64: 0.15.18 + esbuild-linux-mips64le: 0.15.18 + esbuild-linux-ppc64le: 0.15.18 + esbuild-linux-riscv64: 0.15.18 + esbuild-linux-s390x: 0.15.18 + esbuild-netbsd-64: 0.15.18 + esbuild-openbsd-64: 0.15.18 + esbuild-sunos-64: 0.15.18 + esbuild-windows-32: 0.15.18 + esbuild-windows-64: 0.15.18 + esbuild-windows-arm64: 0.15.18 + + /escape-string-regexp/4.0.0: + resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} + engines: {node: '>=10'} + dev: true + + /eslint-plugin-vue/9.8.0_eslint@8.31.0: + resolution: {integrity: sha512-E/AXwcTzunyzM83C2QqDHxepMzvI2y6x+mmeYHbVDQlKFqmKYvRrhaVixEeeG27uI44p9oKDFiyCRw4XxgtfHA==} + engines: {node: ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 + dependencies: + eslint: 8.31.0 + eslint-utils: 3.0.0_eslint@8.31.0 + natural-compare: 1.4.0 + nth-check: 2.1.1 + postcss-selector-parser: 6.0.11 + semver: 7.3.8 + vue-eslint-parser: 9.1.0_eslint@8.31.0 + xml-name-validator: 4.0.0 + transitivePeerDependencies: + - supports-color + dev: true + + /eslint-scope/5.1.1: + resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==} + engines: {node: '>=8.0.0'} + dependencies: + esrecurse: 4.3.0 + estraverse: 4.3.0 + dev: true + + /eslint-scope/7.1.1: + resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + esrecurse: 4.3.0 + estraverse: 5.3.0 + dev: true + + /eslint-utils/3.0.0_eslint@8.31.0: + resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==} + engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} + peerDependencies: + eslint: '>=5' + dependencies: + eslint: 8.31.0 + eslint-visitor-keys: 2.1.0 + dev: true + + /eslint-visitor-keys/2.1.0: + resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==} + engines: {node: '>=10'} + dev: true + + /eslint-visitor-keys/3.3.0: + resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dev: true + + /eslint/8.31.0: + resolution: {integrity: sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + hasBin: true + dependencies: + '@eslint/eslintrc': 1.4.1 + '@humanwhocodes/config-array': 0.11.8 + '@humanwhocodes/module-importer': 1.0.1 + '@nodelib/fs.walk': 1.2.8 + ajv: 6.12.6 + chalk: 4.1.2 + cross-spawn: 7.0.3 + debug: 4.3.4 + doctrine: 3.0.0 + escape-string-regexp: 4.0.0 + eslint-scope: 7.1.1 + eslint-utils: 3.0.0_eslint@8.31.0 + eslint-visitor-keys: 3.3.0 + espree: 9.4.1 + esquery: 1.4.0 + esutils: 2.0.3 + fast-deep-equal: 3.1.3 + file-entry-cache: 6.0.1 + find-up: 5.0.0 + glob-parent: 6.0.2 + globals: 13.19.0 + grapheme-splitter: 1.0.4 + ignore: 5.2.4 + import-fresh: 3.3.0 + imurmurhash: 0.1.4 + is-glob: 4.0.3 + is-path-inside: 3.0.3 + js-sdsl: 4.2.0 + js-yaml: 4.1.0 + json-stable-stringify-without-jsonify: 1.0.1 + levn: 0.4.1 + lodash.merge: 4.6.2 + minimatch: 3.1.2 + natural-compare: 1.4.0 + optionator: 0.9.1 + regexpp: 3.2.0 + strip-ansi: 6.0.1 + strip-json-comments: 3.1.1 + text-table: 0.2.0 + transitivePeerDependencies: + - supports-color + dev: true + + /espree/9.4.1: + resolution: {integrity: sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + acorn: 8.8.1 + acorn-jsx: 5.3.2_acorn@8.8.1 + eslint-visitor-keys: 3.3.0 + dev: true + + /esquery/1.4.0: + resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==} + engines: {node: '>=0.10'} + dependencies: + estraverse: 5.3.0 + dev: true + + /esrecurse/4.3.0: + resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} + engines: {node: '>=4.0'} + dependencies: + estraverse: 5.3.0 + dev: true + + /estraverse/4.3.0: + resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==} + engines: {node: '>=4.0'} + dev: true + + /estraverse/5.3.0: + resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} + engines: {node: '>=4.0'} + dev: true + + /estree-walker/2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + + /esutils/2.0.3: + resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} + engines: {node: '>=0.10.0'} + dev: true + + /fast-deep-equal/3.1.3: + resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + + /fast-glob/3.2.12: + resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==} + engines: {node: '>=8.6.0'} + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.5 + + /fast-json-stable-stringify/2.1.0: + resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} + + /fast-levenshtein/2.0.6: + resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} + dev: true + + /fastq/1.15.0: + resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==} + dependencies: + reusify: 1.0.4 + + /file-entry-cache/6.0.1: + resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} + engines: {node: ^10.12.0 || >=12.0.0} + dependencies: + flat-cache: 3.0.4 + dev: true + + /fill-range/7.0.1: + resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} + engines: {node: '>=8'} + dependencies: + to-regex-range: 5.0.1 + + /find-up/5.0.0: + resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} + engines: {node: '>=10'} + dependencies: + locate-path: 6.0.0 + path-exists: 4.0.0 + dev: true + + /flat-cache/3.0.4: + resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==} + engines: {node: ^10.12.0 || >=12.0.0} + dependencies: + flatted: 3.2.7 + rimraf: 3.0.2 + dev: true + + /flatted/3.2.7: + resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==} + dev: true + + /fs-extra/10.1.0: + resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==} + engines: {node: '>=12'} + dependencies: + graceful-fs: 4.2.10 + jsonfile: 6.1.0 + universalify: 2.0.0 + dev: false + + /fs-extra/11.1.0: + resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==} + engines: {node: '>=14.14'} + dependencies: + graceful-fs: 4.2.10 + jsonfile: 6.1.0 + universalify: 2.0.0 + dev: false + + /fs-extra/7.0.1: + resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==} + engines: {node: '>=6 <7 || >=8'} + dependencies: + graceful-fs: 4.2.10 + jsonfile: 4.0.0 + universalify: 0.1.2 + dev: false + + /fs.realpath/1.0.0: + resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} + + /fsevents/2.3.2: + resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + requiresBuild: true + optional: true + + /function-bind/1.1.1: + resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} + + /glob-parent/5.1.2: + resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} + engines: {node: '>= 6'} + dependencies: + is-glob: 4.0.3 + + /glob-parent/6.0.2: + resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} + engines: {node: '>=10.13.0'} + dependencies: + is-glob: 4.0.3 + dev: true + + /glob/7.2.3: + resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + dependencies: + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 3.1.2 + once: 1.4.0 + path-is-absolute: 1.0.1 + dev: true + + /glob/8.0.3: + resolution: {integrity: sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==} + engines: {node: '>=12'} + dependencies: + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 5.1.1 + once: 1.4.0 + dev: false + + /globals/13.19.0: + resolution: {integrity: sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==} + engines: {node: '>=8'} + dependencies: + type-fest: 0.20.2 + dev: true + + /globby/11.1.0: + resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} + engines: {node: '>=10'} + dependencies: + array-union: 2.1.0 + dir-glob: 3.0.1 + fast-glob: 3.2.12 + ignore: 5.2.4 + merge2: 1.4.1 + slash: 3.0.0 + dev: true + + /graceful-fs/4.2.10: + resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==} + dev: false + + /grapheme-splitter/1.0.4: + resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==} + dev: true + + /has-flag/4.0.0: + resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} + engines: {node: '>=8'} + dev: true + + /has/1.0.3: + resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==} + engines: {node: '>= 0.4.0'} + dependencies: + function-bind: 1.1.1 + + /he/1.2.0: + resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} + hasBin: true + dev: true + + /ignore/5.2.4: + resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==} + engines: {node: '>= 4'} + dev: true + + /immutable/4.2.1: + resolution: {integrity: sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ==} + + /import-fresh/3.3.0: + resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} + engines: {node: '>=6'} + dependencies: + parent-module: 1.0.1 + resolve-from: 4.0.0 + dev: true + + /import-lazy/4.0.0: + resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==} + engines: {node: '>=8'} + dev: false + + /imurmurhash/0.1.4: + resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} + engines: {node: '>=0.8.19'} + dev: true + + /inflight/1.0.6: + resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} + dependencies: + once: 1.4.0 + wrappy: 1.0.2 + + /inherits/2.0.4: + resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} + + /intersection-observer-polyfill/0.1.0: + resolution: {integrity: sha512-kYxriUk7Dl8GPu2TuOFAbtG5+UK0LLrLzlUErF8R9w5iPWmrtfVZsjCYbGF0/SyRDo1VfHMOZYBB2svb2locbw==} + dev: false + + /is-binary-path/2.1.0: + resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} + engines: {node: '>=8'} + dependencies: + binary-extensions: 2.2.0 + + /is-core-module/2.11.0: + resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==} + dependencies: + has: 1.0.3 + + /is-extglob/2.1.1: + resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} + engines: {node: '>=0.10.0'} + + /is-glob/4.0.3: + resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} + engines: {node: '>=0.10.0'} + dependencies: + is-extglob: 2.1.1 + + /is-number/7.0.0: + resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} + engines: {node: '>=0.12.0'} + + /is-path-inside/3.0.3: + resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==} + engines: {node: '>=8'} + dev: true + + /isexe/2.0.0: + resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} + dev: true + + /jju/1.4.0: + resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} + dev: false + + /js-sdsl/4.2.0: + resolution: {integrity: sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==} + dev: true + + /js-yaml/4.1.0: + resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} + hasBin: true + dependencies: + argparse: 2.0.1 + dev: true + + /json-schema-traverse/0.4.1: + resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} + + /json-stable-stringify-without-jsonify/1.0.1: + resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} + dev: true + + /jsonfile/4.0.0: + resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} + optionalDependencies: + graceful-fs: 4.2.10 + dev: false + + /jsonfile/6.1.0: + resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} + dependencies: + universalify: 2.0.0 + optionalDependencies: + graceful-fs: 4.2.10 + dev: false + + /kolorist/1.6.0: + resolution: {integrity: sha512-dLkz37Ab97HWMx9KTes3Tbi3D1ln9fCAy2zr2YVExJasDRPGRaKcoE4fycWNtnCAJfjFqe0cnY+f8KT2JePEXQ==} + dev: false + + /levn/0.4.1: + resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} + engines: {node: '>= 0.8.0'} + dependencies: + prelude-ls: 1.2.1 + type-check: 0.4.0 + dev: true + + /locate-path/6.0.0: + resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} + engines: {node: '>=10'} + dependencies: + p-locate: 5.0.0 + dev: true + + /lodash-es/4.17.21: + resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + dev: false + + /lodash.get/4.4.2: + resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==} + dev: false + + /lodash.isequal/4.5.0: + resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} + dev: false + + /lodash.merge/4.6.2: + resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} + dev: true + + /lodash/4.17.21: + resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} + + /lru-cache/6.0.0: + resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} + engines: {node: '>=10'} + dependencies: + yallist: 4.0.0 + + /magic-string/0.25.9: + resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} + dependencies: + sourcemap-codec: 1.4.8 + + /mdn-data/2.0.28: + resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} + dev: false + + /mdn-data/2.0.30: + resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} + dev: false + + /merge2/1.4.1: + resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} + engines: {node: '>= 8'} + + /micromatch/4.0.5: + resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==} + engines: {node: '>=8.6'} + dependencies: + braces: 3.0.2 + picomatch: 2.3.1 + + /minimatch/3.1.2: + resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} + dependencies: + brace-expansion: 1.1.11 + dev: true + + /minimatch/5.1.1: + resolution: {integrity: sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==} + engines: {node: '>=10'} + dependencies: + brace-expansion: 2.0.1 + + /mkdirp/1.0.4: + resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==} + engines: {node: '>=10'} + hasBin: true + dev: false + + /ms/2.1.2: + resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} + + /muggle-string/0.1.0: + resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==} + dev: true + + /nanoid/3.3.4: + resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + + /natural-compare-lite/1.4.0: + resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} + dev: true + + /natural-compare/1.4.0: + resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} + dev: true + + /normalize-path/3.0.0: + resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} + engines: {node: '>=0.10.0'} + + /normalize.css/8.0.1: + resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==} + dev: false + + /nth-check/2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + dependencies: + boolbase: 1.0.0 + + /once/1.4.0: + resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} + dependencies: + wrappy: 1.0.2 + + /optionator/0.9.1: + resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==} + engines: {node: '>= 0.8.0'} + dependencies: + deep-is: 0.1.4 + fast-levenshtein: 2.0.6 + levn: 0.4.1 + prelude-ls: 1.2.1 + type-check: 0.4.0 + word-wrap: 1.2.3 + dev: true + + /p-limit/3.1.0: + resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==} + engines: {node: '>=10'} + dependencies: + yocto-queue: 0.1.0 + dev: true + + /p-locate/5.0.0: + resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} + engines: {node: '>=10'} + dependencies: + p-limit: 3.1.0 + dev: true + + /parent-module/1.0.1: + resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} + engines: {node: '>=6'} + dependencies: + callsites: 3.1.0 + dev: true + + /path-browserify/1.0.1: + resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} + dev: false + + /path-exists/4.0.0: + resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} + engines: {node: '>=8'} + dev: true + + /path-is-absolute/1.0.1: + resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} + engines: {node: '>=0.10.0'} + dev: true + + /path-key/3.1.1: + resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} + engines: {node: '>=8'} + dev: true + + /path-parse/1.0.7: + resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} + + /path-type/4.0.0: + resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} + engines: {node: '>=8'} + dev: true + + /picocolors/1.0.0: + resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} + + /picomatch/2.3.1: + resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} + engines: {node: '>=8.6'} + + /postcss-selector-parser/6.0.11: + resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==} + engines: {node: '>=4'} + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + dev: true + + /postcss/8.4.19: + resolution: {integrity: sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.4 + picocolors: 1.0.0 + source-map-js: 1.0.2 + + /prelude-ls/1.2.1: + resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} + engines: {node: '>= 0.8.0'} + dev: true + + /punycode/2.1.1: + resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==} + engines: {node: '>=6'} + + /queue-microtask/1.2.3: + resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + + /randombytes/2.1.0: + resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} + dependencies: + safe-buffer: 5.2.1 + dev: false + + /readdirp/3.6.0: + resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} + engines: {node: '>=8.10.0'} + dependencies: + picomatch: 2.3.1 + + /regexpp/3.2.0: + resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==} + engines: {node: '>=8'} + dev: true + + /resize-observer-polyfill/1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + dev: false + + /resolve-from/4.0.0: + resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} + engines: {node: '>=4'} + dev: true + + /resolve/1.17.0: + resolution: {integrity: sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==} + dependencies: + path-parse: 1.0.7 + dev: false + + /resolve/1.19.0: + resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==} + dependencies: + is-core-module: 2.11.0 + path-parse: 1.0.7 + dev: false + + /resolve/1.22.1: + resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==} + hasBin: true + dependencies: + is-core-module: 2.11.0 + path-parse: 1.0.7 + supports-preserve-symlinks-flag: 1.0.0 + + /reusify/1.0.4: + resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} + engines: {iojs: '>=1.0.0', node: '>=0.10.0'} + + /rimraf/3.0.2: + resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} + hasBin: true + dependencies: + glob: 7.2.3 + dev: true + + /rollup/2.79.1: + resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==} + engines: {node: '>=10.0.0'} + hasBin: true + optionalDependencies: + fsevents: 2.3.2 + + /run-parallel/1.2.0: + resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + dependencies: + queue-microtask: 1.2.3 + + /safe-buffer/5.2.1: + resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} + dev: false + + /sass/1.57.1: + resolution: {integrity: sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==} + engines: {node: '>=12.0.0'} + hasBin: true + dependencies: + chokidar: 3.5.3 + immutable: 4.2.1 + source-map-js: 1.0.2 + + /semver/7.3.8: + resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==} + engines: {node: '>=10'} + hasBin: true + dependencies: + lru-cache: 6.0.0 + + /serialize-javascript/6.0.0: + resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==} + dependencies: + randombytes: 2.1.0 + dev: false + + /shebang-command/2.0.0: + resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} + engines: {node: '>=8'} + dependencies: + shebang-regex: 3.0.0 + dev: true + + /shebang-regex/3.0.0: + resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} + engines: {node: '>=8'} + dev: true + + /slash/3.0.0: + resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} + engines: {node: '>=8'} + dev: true + + /smob/0.0.6: + resolution: {integrity: sha512-V21+XeNni+tTyiST1MHsa84AQhT1aFZipzPpOFAVB8DkHzwJyjjAmt9bgwnuZiZWnIbMo2duE29wybxv/7HWUw==} + dev: false + + /source-map-js/1.0.2: + resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} + engines: {node: '>=0.10.0'} + + /source-map-support/0.5.21: + resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} + dependencies: + buffer-from: 1.1.2 + source-map: 0.6.1 + dev: false + + /source-map/0.6.1: + resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} + engines: {node: '>=0.10.0'} + + /sourcemap-codec/1.4.8: + resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} + deprecated: Please use @jridgewell/sourcemap-codec instead + + /sprintf-js/1.0.3: + resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} + dev: false + + /string-argv/0.3.1: + resolution: {integrity: sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==} + engines: {node: '>=0.6.19'} + dev: false + + /strip-ansi/6.0.1: + resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} + engines: {node: '>=8'} + dependencies: + ansi-regex: 5.0.1 + dev: true + + /strip-json-comments/3.1.1: + resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} + engines: {node: '>=8'} + + /supports-color/7.2.0: + resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} + engines: {node: '>=8'} + dependencies: + has-flag: 4.0.0 + dev: true + + /supports-preserve-symlinks-flag/1.0.0: + resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} + engines: {node: '>= 0.4'} + + /svgo/3.0.2: + resolution: {integrity: sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + '@trysound/sax': 0.2.0 + commander: 7.2.0 + css-select: 5.1.0 + css-tree: 2.3.1 + csso: 5.0.5 + picocolors: 1.0.0 + dev: false + + /terser/5.16.1: + resolution: {integrity: sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==} + engines: {node: '>=10'} + hasBin: true + dependencies: + '@jridgewell/source-map': 0.3.2 + acorn: 8.8.1 + commander: 2.20.3 + source-map-support: 0.5.21 + dev: false + + /text-table/0.2.0: + resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} + dev: true + + /to-fast-properties/2.0.0: + resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} + engines: {node: '>=4'} + + /to-regex-range/5.0.1: + resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} + engines: {node: '>=8.0'} + dependencies: + is-number: 7.0.0 + + /ts-morph/16.0.0: + resolution: {integrity: sha512-jGNF0GVpFj0orFw55LTsQxVYEUOCWBAbR5Ls7fTYE5pQsbW18ssTb/6UXx/GYAEjS+DQTp8VoTw0vqYMiaaQuw==} + dependencies: + '@ts-morph/common': 0.17.0 + code-block-writer: 11.0.3 + dev: false + + /tslib/1.14.1: + resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} + dev: true + + /tsutils/3.21.0_typescript@4.9.3: + resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} + engines: {node: '>= 6'} + peerDependencies: + typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' + dependencies: + tslib: 1.14.1 + typescript: 4.9.3 + dev: true + + /type-check/0.4.0: + resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} + engines: {node: '>= 0.8.0'} + dependencies: + prelude-ls: 1.2.1 + dev: true + + /type-fest/0.20.2: + resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==} + engines: {node: '>=10'} + dev: true + + /typescript/4.8.4: + resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==} + engines: {node: '>=4.2.0'} + hasBin: true + dev: false + + /typescript/4.9.3: + resolution: {integrity: sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==} + engines: {node: '>=4.2.0'} + hasBin: true + dev: true + + /universalify/0.1.2: + resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==} + engines: {node: '>= 4.0.0'} + dev: false + + /universalify/2.0.0: + resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==} + engines: {node: '>= 10.0.0'} + dev: false + + /uri-js/4.4.1: + resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + dependencies: + punycode: 2.1.1 + + /util-deprecate/1.0.2: + resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + dev: true + + /validator/13.7.0: + resolution: {integrity: sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==} + engines: {node: '>= 0.10'} + dev: false + + /vite-plugin-dts/1.7.1_vite@3.2.5: + resolution: {integrity: sha512-2oGMnAjcrZN7jM1TloiS1b1mCn42s3El04ix2RFhId5P1WfMigF8WAwsqT6a6jk0Yso8t7AeZsBkkxYShR0hBQ==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: '>=2.9.0' + dependencies: + '@microsoft/api-extractor': 7.33.7 + '@rollup/pluginutils': 5.0.2 + '@rushstack/node-core-library': 3.53.3 + debug: 4.3.4 + fast-glob: 3.2.12 + fs-extra: 10.1.0 + kolorist: 1.6.0 + ts-morph: 16.0.0 + vite: 3.2.5_sass@1.57.1 + transitivePeerDependencies: + - rollup + - supports-color + dev: false + + /vite/3.2.5_sass@1.57.1: + resolution: {integrity: sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.15.18 + postcss: 8.4.19 + resolve: 1.22.1 + rollup: 2.79.1 + sass: 1.57.1 + optionalDependencies: + fsevents: 2.3.2 + + /vue-eslint-parser/9.1.0_eslint@8.31.0: + resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==} + engines: {node: ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: '>=6.0.0' + dependencies: + debug: 4.3.4 + eslint: 8.31.0 + eslint-scope: 7.1.1 + eslint-visitor-keys: 3.3.0 + espree: 9.4.1 + esquery: 1.4.0 + lodash: 4.17.21 + semver: 7.3.8 + transitivePeerDependencies: + - supports-color + dev: true + + /vue-router/4.1.6_vue@3.2.45: + resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==} + peerDependencies: + vue: ^3.2.0 + dependencies: + '@vue/devtools-api': 6.4.5 + vue: 3.2.45 + dev: false + + /vue-template-compiler/2.7.14: + resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==} + dependencies: + de-indent: 1.0.2 + he: 1.2.0 + dev: true + + /vue-tsc/1.0.13_typescript@4.9.3: + resolution: {integrity: sha512-DORISA3Fu9595xbg5HQqUj4XZVvkyRkcZFJCkCt1CeN7tIMgVRQ8ow07AKcbuHoEkqg7OI4qLu1wyC/VH3o5Ug==} + hasBin: true + peerDependencies: + typescript: '*' + dependencies: + '@volar/vue-language-core': 1.0.13 + '@volar/vue-typescript': 1.0.13 + typescript: 4.9.3 + dev: true + + /vue/3.2.45: + resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==} + dependencies: + '@vue/compiler-dom': 3.2.45 + '@vue/compiler-sfc': 3.2.45 + '@vue/runtime-dom': 3.2.45 + '@vue/server-renderer': 3.2.45_vue@3.2.45 + '@vue/shared': 3.2.45 + + /which/2.0.2: + resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} + engines: {node: '>= 8'} + hasBin: true + dependencies: + isexe: 2.0.0 + dev: true + + /word-wrap/1.2.3: + resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==} + engines: {node: '>=0.10.0'} + dev: true + + /wrappy/1.0.2: + resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} + + /xml-name-validator/4.0.0: + resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==} + engines: {node: '>=12'} + dev: true + + /yallist/4.0.0: + resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} + + /yocto-queue/0.1.0: + resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} + engines: {node: '>=10'} + dev: true + + /z-schema/5.0.5: + resolution: {integrity: sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==} + engines: {node: '>=8.0.0'} + hasBin: true + dependencies: + lodash.get: 4.4.2 + lodash.isequal: 4.5.0 + validator: 13.7.0 + optionalDependencies: + commander: 9.4.1 + dev: false diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml new file mode 100644 index 0000000000000000000000000000000000000000..eccc335f93b17c6507d051ec75f3234fff207706 --- /dev/null +++ b/pnpm-workspace.yaml @@ -0,0 +1,2 @@ +packages: + - 'packages/**' \ No newline at end of file