diff --git a/packages/taro-platform-harmony-hybrid/package.json b/packages/taro-platform-harmony-hybrid/package.json index 7578afebc3..c65b862a0d 100644 --- a/packages/taro-platform-harmony-hybrid/package.json +++ b/packages/taro-platform-harmony-hybrid/package.json @@ -38,6 +38,7 @@ "dependencies": { "@tarojs/api": "workspace:*", "@tarojs/components": "workspace:*", + "@tarojs/harmony-components": "workspace:*", "@tarojs/components-react": "workspace:*", "@tarojs/router": "workspace:*", "@tarojs/runtime": "workspace:*", diff --git a/packages/taro-platform-harmony-hybrid/rollup.config.ts b/packages/taro-platform-harmony-hybrid/rollup.config.ts index 42839ec30e..d0fccab011 100644 --- a/packages/taro-platform-harmony-hybrid/rollup.config.ts +++ b/packages/taro-platform-harmony-hybrid/rollup.config.ts @@ -1,17 +1,12 @@ import commonjs from '@rollup/plugin-commonjs' import json from '@rollup/plugin-json' import { nodeResolve } from '@rollup/plugin-node-resolve' -// import resolve from '@rollup/plugin-node-resolve2' import { merge } from 'lodash' import path from 'path' import { defineConfig } from 'rollup' import externals from 'rollup-plugin-node-externals' -import postcss from 'rollup-plugin-postcss' import ts from 'rollup-plugin-ts' -import typescript from 'rollup-plugin-typescript2' -import vue2 from 'rollup-plugin-vue2' -// import vue3 from 'rollup-plugin-vue3' import exportNameOnly from './build/rollup-plugin-export-name-only' import type { InputPluginOption, RollupOptions } from 'rollup' @@ -45,9 +40,6 @@ function getPlugins (pre: T[] = [], post: T[] = []) { sourceMap: true, }) }), - postcss({ - inject: { insertAt: 'top' } - }), commonjs(), ...post ] @@ -69,7 +61,7 @@ const variesConfig: RollupOptions[] = [{ 'src/api/apis/taro.ts', // APIS 'src/api/index.ts', // APIS 'src/components/react/index.ts', // React 组件 - // 'src/components/vue2/index.ts', // vue2 组件 + 'src/components/vue2/index.ts', // vue2 组件 'src/components/vue3/index.ts', // vue3 组件 'src/runtime/index.ts', // 供 Loader 使用的运行时入口 'src/runtime/apis/index.ts', // API 入口 @@ -84,67 +76,7 @@ const variesConfig: RollupOptions[] = [{ deps: true, devDeps: false, })]) -},{ - input: [ - 'src/components/vue2/index.ts', // vue2 组件 - // 'src/components/vue3/index.ts', // vue3 组件 - ], - output: { - dir: 'dist', - preserveModules: true, - preserveModulesRoot: 'src' - }, - plugins: [ - nodeResolve({ - preferBuiltins: false, - mainFields: ['main:harmony-hybrid', 'browser', 'module', 'jsnext:main', 'main'] - }), - json({ - compact: true, - preferConst: true, - }), - postcss({ - inject: { insertAt: 'top' } - }), - ts({ - tsconfig: e => ({ - ...e, - declaration: true, - sourceMap: true, - }) - }), - typescript({ - tsconfigOverride: { - compilerOptions: { - declaration: true - } - } - }), - vue2(), - commonjs(), - ] -},{ -// input: [ -// 'src/components/vue3/index.ts', // vue3 组件 -// ], -// output: { -// dir: 'dist', -// preserveModules: true, -// preserveModulesRoot: 'src' -// }, -// plugins: [ -// typescript(), -// resolve({ -// preferBuiltins: false, -// mainFields: ['main:harmony-hybrid', 'browser', 'module', 'jsnext:main', 'main'] -// }), -// vue2(), -// postcss({ -// inject: { insertAt: 'top' } -// }), -// commonjs(), -// ] -// }, { +}, { input: path.join(cwd, 'src/runtime/apis/index.ts'), // 供 babel-plugin-transform-taroapi 使用，为了能 tree-shaking output: { file: 'dist/taroApis.js', diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/.babelrc.json b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/.babelrc.json new file mode 100644 index 0000000000..3e7a4d3726 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/.babelrc.json @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "taro", + { + "absoluteRuntime": false, + "framework": "react", + "hot": false, + "modules": false, + "ts": true + } + ] + ] +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/.gitignore b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/.gitignore new file mode 100644 index 0000000000..5580458adc --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/.gitignore @@ -0,0 +1,2 @@ +# Stencil autogenerated +src/components.ts diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/package.json b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/package.json new file mode 100644 index 0000000000..32b6b06d45 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/package.json @@ -0,0 +1,38 @@ +{ + "name": "@tarojs/harmony-components-library-react", + "version": "3.6.23", + "description": "Taro 组件库 React 版本库", + "private": true, + "main": "index.js", + "scripts": { + "build:ci": "run-s clean prod", + "clean": "rimraf ../harmony-components/lib/react", + "dev": "pnpm run prod -w", + "preprod": "node ./scripts/fix.js", + "prod": "rollup -c" + }, + "keywords": [], + "author": "ZakaryCode", + "license": "MIT", + "dependencies": { + "@tarojs/harmony-components": "workspace:*", + "react-dom": "^18.2.0", + "tslib": "^2.6.2" + }, + "devDependencies": { + "@babel/cli": "^7.14.5", + "@babel/core": "^7.14.5", + "@rollup/plugin-commonjs": "^20.0.0", + "@rollup/plugin-node-resolve": "^8.0.0", + "@types/node": "^14.14.31", + "babel-preset-taro": "workspace:*", + "postcss": "^8.4.18", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "rollup": "^2.79.0", + "rollup-plugin-node-externals": "^5.0.0", + "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-ts": "^3.0.2", + "typescript": "^4.7.4" + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/rollup.config.js b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/rollup.config.js new file mode 100644 index 0000000000..6af38826c1 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/rollup.config.js @@ -0,0 +1,41 @@ +import commonjs from '@rollup/plugin-commonjs' +import resolve from '@rollup/plugin-node-resolve' +import externals from 'rollup-plugin-node-externals' +import postcss from 'rollup-plugin-postcss' +import ts from 'rollup-plugin-ts' + +const config = { + input: ['src/index.ts', 'src/component-lib/index.ts'], + output: { + dir: '../harmony-components/lib/react', + exports: 'named', + preserveModules: true, + preserveModulesRoot: 'src', + sourcemap: true + }, + treeshake: false, + plugins: [ + externals({ + deps: true, + devDeps: false, + include: ['react', 'react-dom'] + }), + resolve({ + preferBuiltins: false, + mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'main'] + }), + ts({ + sourceMap: true, + }), + commonjs({ + transformMixedEsModules: true, + dynamicRequireTargets: ['./src/**/*.js'] + }), + postcss({ + inject: { insertAt: 'top' }, + minimize: true, + }), + ] +} + +export default config diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/scripts/fix.js b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/scripts/fix.js new file mode 100644 index 0000000000..60ce86fc49 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/scripts/fix.js @@ -0,0 +1,39 @@ +const fs = require('@tarojs/helper').fs +const path = require('path') + +const componentsPath = path.resolve(__dirname, '..', 'src/components.ts') +// const avoidErrorType = ['Input', 'ScrollView'] + +if (fs.existsSync(componentsPath)) { + const codeBuffer = fs.readFileSync(componentsPath) + let code = codeBuffer.toString().replace(/import\stype\s\{\s([^}]*)\s\}\sfrom\s'@tarojs\/harmony-components[^']*';/ig, `import type { $1 } from '@tarojs/harmony-components/dist/types/components';`) + code = code.replace(/const\sTaro([A-Za-z]+)\s=/g, 'const $1 =').replace(/const\s([A-Za-z]+)Core\s=/g, 'const $1 =') + + // NOTE: HTMLStencilElement 与 HTMLTaroInputCoreElement 在 force 参数上冲突 + // const avoidType = avoidErrorType.join('|') + // code = code.replace( + // new RegExp(`createReactComponent`, 'ig'), + // 'createReactComponent' + // ) + + if (code.includes('defineCustomElement as define')) { + code = code.replace(/import\s\{\sdefineCustomElement\sas\sdefine([A-Za-z]+)\s.*/g, '// @ts-ignore\nimport { defineCustomElement$1 as define$1 } from \'@tarojs/harmony-components/dist/components\';') + } + + /** + * 当前不支持配置通用的 manipulatePropsFunction 方法，因此需要手动添加 + * https://github.com/ionic-team/stencil-ds-output-targets/issues/243 + */ + if (!code.includes('./helper')) { + code = code.replace('/* auto-generated react proxies */', `/* auto-generated react proxies */\nimport { manipulatePropsFunction } from './helper'`) + code = code.replace(/\(([^,)]+)[^;]*,\s([^,]+)\);/ig, '($1, undefined, manipulatePropsFunction, $2);') + } + + if (!code.includes('Fragment')) { + const comps = ['Block'] + code = code.replace('/* auto-generated react proxies */', `/* auto-generated react proxies */\nimport { Fragment } from 'react'`) + code = code.replace(new RegExp(`export const (${comps.join('|')}) = \\/\\*\\@__PURE__\\*\\/createReactComponent.*`, 'ig'), 'export const $1 = Fragment;') + } + + fs.writeFileSync(componentsPath, code) +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/index.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/index.ts new file mode 100644 index 0000000000..15297d4661 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/index.ts @@ -0,0 +1,75 @@ +import { Fragment } from 'react' + +import reactifyWc from './reactify-wc' + +// 视图容器 +export const CoverImage = /* @__PURE__ */ reactifyWc('taro-cover-image-core') +export const CoverView = /* @__PURE__ */ reactifyWc('taro-cover-view-core') +export const MatchMedia = /* @__PURE__ */ reactifyWc('taro-match-media-core') +export const MovableArea = /* @__PURE__ */ reactifyWc('taro-movable-area-core') +export const MovableView = /* @__PURE__ */ reactifyWc('taro-movable-view-core') +export const PageContainer = /* @__PURE__ */ reactifyWc('taro-page-container-core') +export const RootPortal = /* @__PURE__ */ reactifyWc('taro-root-portal-core') +export const ScrollView = /* @__PURE__ */ reactifyWc('taro-scroll-view-core') +export const ShareElement = /* @__PURE__ */ reactifyWc('taro-share-element-core') +export const Swiper = /* @__PURE__ */ reactifyWc('taro-swiper-core') +export const SwiperItem = /* @__PURE__ */ reactifyWc('taro-swiper-item-core') +export const View = /* @__PURE__ */ reactifyWc('taro-view-core') + +// 基础内容 +export const Icon = /* @__PURE__ */ reactifyWc('taro-icon-core') +export const Progress = /* @__PURE__ */ reactifyWc('taro-progress-core') +export const RichText = /* @__PURE__ */ reactifyWc('taro-rich-text-core') +export const Text = /* @__PURE__ */ reactifyWc('taro-text-core') + +// 表单组件 +export const Button = /* @__PURE__ */ reactifyWc('taro-button-core') +export const Checkbox = /* @__PURE__ */ reactifyWc('taro-checkbox-core') +export const CheckboxGroup = /* @__PURE__ */ reactifyWc('taro-checkbox-group-core') +export const Editor = /* @__PURE__ */ reactifyWc('taro-editor-core') +export const Form = /* @__PURE__ */ reactifyWc('taro-form-core') +export { default as Input } from './input' +export const KeyboardAccessory = /* @__PURE__ */ reactifyWc('taro-keyboard-accessory-core') +export const Label = /* @__PURE__ */ reactifyWc('taro-label-core') +export const Picker = /* @__PURE__ */ reactifyWc('taro-picker-core') +export const PickerView = /* @__PURE__ */ reactifyWc('taro-picker-view-core') +export const PickerViewColumn = /* @__PURE__ */ reactifyWc('taro-picker-view-column-core') +export const Radio = /* @__PURE__ */ reactifyWc('taro-radio-core') +export const RadioGroup = /* @__PURE__ */ reactifyWc('taro-radio-group-core') +export const Slider = /* @__PURE__ */ reactifyWc('taro-slider-core') +export const Switch = /* @__PURE__ */ reactifyWc('taro-switch-core') +export const Textarea = /* @__PURE__ */ reactifyWc('taro-textarea-core') + +// 导航 +export const FunctionalPageNavigator = /* @__PURE__ */ reactifyWc('taro-functional-page-navigator-core') +export const Navigator = /* @__PURE__ */ reactifyWc('taro-navigator-core') +export const NavigationBar = /* @__PURE__ */ reactifyWc('taro-navigation-bar-core') + +// 媒体组件 +export const Audio = /* @__PURE__ */ reactifyWc('taro-audio-core') +export const Camera = /* @__PURE__ */ reactifyWc('taro-camera-core') +export const Image = /* @__PURE__ */ reactifyWc('taro-image-core') +export const LivePlayer = /* @__PURE__ */ reactifyWc('taro-live-player-core') +export const LivePusher = /* @__PURE__ */ reactifyWc('taro-live-pusher-core') +export const Video = /* @__PURE__ */ reactifyWc('taro-video-core') +export const VoipRoom = /* @__PURE__ */ reactifyWc('taro-voip-room-core') + +// 地图 +export const Map = /* @__PURE__ */ reactifyWc('taro-map-core') + +// 画布 +export const Canvas = /* @__PURE__ */ reactifyWc('taro-canvas-core') + +// 开放能力 +export const Ad = /* @__PURE__ */ reactifyWc('taro-ad-core') +export const AdCustom = /* @__PURE__ */ reactifyWc('taro-ad-custom-core') +export const OfficialAccount = /* @__PURE__ */ reactifyWc('taro-official-account-core') +export const OpenData = /* @__PURE__ */ reactifyWc('taro-open-data-core') +export const WebView = /* @__PURE__ */ reactifyWc('taro-web-view-core') + +// 页面属性配置节点 +export const PageMeta = /* @__PURE__ */ reactifyWc('taro-page-meta-core') + +// 其他 +export const Block = Fragment +export const CustomWrapper = /* @__PURE__ */ reactifyWc('taro-custom-wrapper-core') diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/input.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/input.ts new file mode 100644 index 0000000000..430526a18d --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/input.ts @@ -0,0 +1,21 @@ +import React from 'react' + +import reactifyWc from './reactify-wc' + +const Input = reactifyWc('taro-input-core') + +const h = React.createElement + +// eslint-disable-next-line react/display-name +export default React.forwardRef((props, ref) => { + const args: Record = { ...props } + + if (args.hasOwnProperty('focus')) { + args.autoFocus = Boolean(args.focus) + delete args.focus + } + + return ( + h(Input, { ...args, ref }) + ) +}) diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/reactify-wc.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/reactify-wc.ts new file mode 100644 index 0000000000..3ae6f9ab4c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/component-lib/reactify-wc.ts @@ -0,0 +1,197 @@ +/** + * https://github.com/BBKolton/reactify-wc/ + * modified event naming + **/ +import React, { createElement, createRef } from 'react' + +const h = React.createElement + +const SCROLL_VIEW = 'taro-scroll-view-core' + +const IS_NON_DIMENSIONAL = /aspect|acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i + +// 为了不要覆盖 wc 中 host 内置的 class 和 stencil 加入的 class +function getClassName (wc, prevProps, props) { + const classList = Array.from(wc.classList) + const oldClassNames = (prevProps.className || prevProps.class || '').split(' ') + let incomingClassNames = (props.className || props.class || '').split(' ') + let finalClassNames = [] + + classList.forEach(classname => { + if (incomingClassNames.indexOf(classname) > -1) { + finalClassNames.push(classname) + incomingClassNames = incomingClassNames.filter(name => name !== classname) + } else if (oldClassNames.indexOf(classname) === -1) { + finalClassNames.push(classname) + } + }) + + finalClassNames = [...finalClassNames, ...incomingClassNames] + + return finalClassNames.join(' ') +} + +function updateStyle (dom, key, val) { + if (/^--/.test(key)) { + // css variable + dom.style.setProperty(key, val) + } else if (typeof val !== 'number' || IS_NON_DIMENSIONAL.test(key)) { + dom.style[key] = val + } else { + dom.style[key] = val + 'px' + } +} + +function updateProp (ctx, comp, propKey, prevProps, props) { + const dom = ctx.ref.current + const val = props[propKey] + const prevVal = prevProps ? prevProps[propKey] : undefined + + if (propKey === 'children') { + return + } + if (propKey.toLowerCase() === 'classname') { + dom.className = prevProps + ? getClassName(dom, prevProps, props) + : val + return + } + if (propKey === 'style') { + if (typeof val === 'string') { + dom.setAttribute(propKey, val) + return + } + if (!val) { + dom.removeAttribute(propKey) + return + } + + if (prevProps) { + if (typeof prevVal === 'string') { + dom.style.cssText = '' + } else { + for (const styleKey in prevVal) { + updateStyle(dom, styleKey, '') + } + } + } + + for (const styleKey in val) { + updateStyle(dom, styleKey, val[styleKey]) + } + return + } + if (/^data-.+/.test(propKey)) { + dom.setAttribute(propKey, val) + } + if (comp === SCROLL_VIEW) { + if (propKey === 'scrollTop') { + dom.mpScrollTop = val + return + } + if (propKey === 'scrollLeft') { + dom.mpScrollLeft = val + return + } + if (propKey === 'scrollIntoView') { + dom.mpScrollIntoView = val + return + } + } + if (typeof val === 'function' && propKey.match(/^on[A-Z]/)) { + const event = propKey.substr(2).toLowerCase() + + ctx.eventHandlers.push([event, val]) + return dom.addEventListener(event, val) + } + + if (typeof val === 'string' || typeof val === 'number') { + dom.setAttribute(propKey, val) + dom[propKey] = val + return + } + if (typeof val === 'boolean') { + if (val) { + dom[propKey] = true + return dom.setAttribute( + propKey, + val + ) + } + dom[propKey] = false + return dom.removeAttribute(propKey) + } + dom[propKey] = val +} + +const reactifyWebComponent = WC => { + class Index extends React.Component> { + eventHandlers: any[] + ref: React.RefObject + + constructor (props) { + super(props) + this.eventHandlers = [] + this.ref = createRef() + } + + update (prevProps) { + this.clearEventHandlers() + if (!this.ref.current) return + + Object.keys(prevProps || {}).forEach((key) => { + if (key !== 'children' && key !== 'key' && !(key in this.props)) { + updateProp(this, WC, key, prevProps, this.props) + } + }) + + Object.keys(this.props).forEach((key) => { + updateProp(this, WC, key, prevProps, this.props) + }) + } + + componentDidUpdate (prevProps) { + this.update(prevProps) + } + + componentDidMount () { + const { forwardRef } = this.props + if (typeof forwardRef === 'function') { + forwardRef(this.ref.current) + } else if (forwardRef && typeof forwardRef === 'object' && forwardRef.hasOwnProperty('current')) { + forwardRef.current = this.ref.current + } else if (typeof forwardRef === 'string') { + console.warn('内置组件不支持字符串 ref') + } + this.update(undefined) + } + + componentWillUnmount () { + this.clearEventHandlers() + } + + clearEventHandlers () { + this.eventHandlers.forEach(([event, handler]) => { + if (!this.ref.current) return + this.ref.current.removeEventListener(event, handler) + }) + this.eventHandlers = [] + } + + render () { + const { children, dangerouslySetInnerHTML } = this.props + const props: Record = { + ref: this.ref + } + if (dangerouslySetInnerHTML) props.dangerouslySetInnerHTML = dangerouslySetInnerHTML + return createElement(WC, props, children) + } + } + + // eslint-disable-next-line react/display-name + return React.forwardRef((props, ref) => ( + h(Index, { ...props, forwardRef: ref }) + )) +} + +export default reactifyWebComponent diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/helper.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/helper.ts new file mode 100644 index 0000000000..dcd113c0d6 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/helper.ts @@ -0,0 +1,18 @@ +interface StencilReactInternalProps extends React.HTMLAttributes { + forwardedRef: React.RefObject + ref?: React.Ref +} + +export const manipulatePropsFunction = ( + originalProps: StencilReactInternalProps, + propsToPass: Record = {} +) => { + const { dangerouslySetInnerHTML, style } = originalProps + if (typeof style !== 'string') { + propsToPass.style = style + } + return { + ...propsToPass, + dangerouslySetInnerHTML + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/index.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/index.ts new file mode 100644 index 0000000000..cb64ac1b52 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/index.ts @@ -0,0 +1 @@ +export * from './components' diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/createComponent.tsx b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/createComponent.tsx new file mode 100644 index 0000000000..2dfbc3a487 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/createComponent.tsx @@ -0,0 +1,122 @@ +/** + * Modify from https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/react-output-target/react-component-lib/createComponent.ts + * MIT License https://github.com/ionic-team/stencil-ds-output-targets/blob/main/LICENSE + */ +import React, { createElement } from 'react' + +import { + applyUnControlledDefaultValue, + attachProps, + camelToDashCase, + createForwardRef, + dashToPascalCase, + isCoveredByReact, + mergeRefs, +} from './utils' + +export interface HTMLStencilElement extends HTMLElement { + componentOnReady(): Promise +} + +interface StencilReactInternalProps extends React.HTMLAttributes { + forwardedRef: React.RefObject + ref?: React.Ref +} + +export const createReactComponent = < + PropType, + ElementType extends HTMLStencilElement, + ContextStateType = any, + ExpandedPropsTypes = any +>( + tagName: string, + ReactComponentContext?: React.Context, + manipulatePropsFunction?: ( + originalProps: StencilReactInternalProps, + propsToPass: any + ) => ExpandedPropsTypes, + defineCustomElement?: () => void +) => { + if (!DEPRECATED_ADAPTER_COMPONENT && defineCustomElement !== undefined) { + defineCustomElement() + } + + const displayName = dashToPascalCase(tagName) + const ReactComponent = class extends React.Component> { + componentEl!: ElementType + + setComponentElRef = (element: ElementType) => { + this.componentEl = element + } + + // eslint-disable-next-line no-useless-constructor + constructor (props: StencilReactInternalProps) { + super(props) + } + + componentDidMount () { + applyUnControlledDefaultValue(this.componentEl, this.props) + this.componentDidUpdate(this.props) + } + + componentDidUpdate (prevProps: StencilReactInternalProps) { + attachProps(this.componentEl, this.props, prevProps) + } + + render () { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { children, forwardedRef, className, ref, style, ...cProps } = this.props + + let propsToPass = Object.keys(cProps).reduce((acc: any, name) => { + const value = (cProps as any)[name] + + if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) { + const eventName = name.substring(2).toLowerCase() + if (typeof document !== 'undefined' && isCoveredByReact(eventName)) { + acc[name] = value + } + } else { + // we should only render strings, booleans, and numbers as attrs in html. + // objects, functions, arrays etc get synced via properties on mount. + const type = typeof value + + if (['string', 'boolean', 'number'].includes(type)) { + acc[camelToDashCase(name)] = value + } + } + return acc + }, {} as ExpandedPropsTypes) + + if (manipulatePropsFunction) { + propsToPass = manipulatePropsFunction(this.props, propsToPass) + } + + const newProps: Omit, 'forwardedRef'> = { + ...propsToPass, + ref: mergeRefs(forwardedRef, this.setComponentElRef), + // Note(taro): 需处理 string 类型的 style，调整到 manipulatePropsFunction 方法中判断是否需注入 (string 类型在 attachProps 中处理) + // style + } + + /** + * We use createElement here instead of + * React.createElement to work around a + * bug in Vite (https://github.com/vitejs/vite/issues/6104). + * React.createElement causes all elements to be rendered + * as instead of the actual Web Component. + */ + return createElement(tagName, newProps, children) + } + + static get displayName () { + return displayName + } + } + + // If context was passed to createReactComponent then conditionally add it to the Component Class + if (ReactComponentContext) { + ReactComponent.contextType = ReactComponentContext + } + + return createForwardRef(ReactComponent, displayName) +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/createOverlayComponent.tsx b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/createOverlayComponent.tsx new file mode 100644 index 0000000000..e79a476a6d --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/createOverlayComponent.tsx @@ -0,0 +1,149 @@ +/** + * Modify from https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/react-output-target/react-component-lib/createOverlayComponent.ts + * MIT License https://github.com/ionic-team/stencil-ds-output-targets/blob/main/LICENSE + */ +import React from 'react' +import ReactDOM from 'react-dom' + +import { OverlayEventDetail } from './interfaces' +import { attachProps, dashToPascalCase, defineCustomElement, setRef,StencilReactForwardedRef } from './utils' + +interface OverlayElement extends HTMLElement { + present: () => Promise + dismiss: (data?: any, role?: string | undefined) => Promise +} + +export interface ReactOverlayProps { + children?: React.ReactNode + isOpen: boolean + onDidDismiss?: (event: CustomEvent) => void + onDidPresent?: (event: CustomEvent) => void + onWillDismiss?: (event: CustomEvent) => void + onWillPresent?: (event: CustomEvent) => void +} + +export const createOverlayComponent = ( + tagName: string, + controller: { create: (options: any) => Promise }, + customElement?: any +) => { + defineCustomElement(tagName, customElement) + + const displayName = dashToPascalCase(tagName) + const didDismissEventName = `on${displayName}DidDismiss` + const didPresentEventName = `on${displayName}DidPresent` + const willDismissEventName = `on${displayName}WillDismiss` + const willPresentEventName = `on${displayName}WillPresent` + + type Props = OverlayComponent & + ReactOverlayProps & { + forwardedRef?: StencilReactForwardedRef + }; + + let isDismissing = false + + class Overlay extends React.Component { + overlay?: OverlayType + el!: HTMLDivElement + + constructor (props: Props) { + super(props) + if (typeof document !== 'undefined') { + this.el = document.createElement('div') + } + this.handleDismiss = this.handleDismiss.bind(this) + } + + static get displayName () { + return displayName + } + + componentDidMount () { + if (this.props.isOpen) { + this.present() + } + } + + componentWillUnmount () { + if (this.overlay) { + this.overlay.dismiss() + } + } + + handleDismiss (event: CustomEvent>) { + if (this.props.onDidDismiss) { + this.props.onDidDismiss(event) + } + setRef(this.props.forwardedRef, null) + } + + shouldComponentUpdate (nextProps: Props) { + // Check if the overlay component is about to dismiss + if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) { + isDismissing = true + } + + return true + } + + async componentDidUpdate (prevProps: Props) { + if (this.overlay) { + attachProps(this.overlay, this.props, prevProps) + } + + if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) { + this.present(prevProps) + } + if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) { + await this.overlay.dismiss() + isDismissing = false + + /** + * Now that the overlay is dismissed + * we need to render again so that any + * inner components will be unmounted + */ + this.forceUpdate() + } + } + + async present (prevProps?: Props) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props + const elementProps = { + ...cProps, + ref: this.props.forwardedRef, + [didDismissEventName]: this.handleDismiss, + [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e), + [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e), + [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e), + } + + this.overlay = await controller.create({ + ...elementProps, + component: this.el, + componentProps: {}, + }) + + setRef(this.props.forwardedRef, this.overlay) + attachProps(this.overlay, elementProps, prevProps) + + await this.overlay.present() + } + + render () { + /** + * Continue to render the component even when + * overlay is dismissing otherwise component + * will be hidden before animation is done. + */ + return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el) + } + } + + return React.forwardRef((props, ref) => { + // Note: 组件库错误引入 vue 的 ts 类型，导致 ts 报错，这里先忽略 + // @ts-ignore + return + }) +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/index.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/index.ts new file mode 100644 index 0000000000..45c0785730 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/index.ts @@ -0,0 +1,2 @@ +export { createReactComponent } from './createComponent' +export { createOverlayComponent } from './createOverlayComponent' diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/interfaces.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/interfaces.ts new file mode 100644 index 0000000000..fd9db01115 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/interfaces.ts @@ -0,0 +1,38 @@ +/** + * Modify from https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/react-output-target/react-component-lib/interfaces.ts + * MIT License https://github.com/ionic-team/stencil-ds-output-targets/blob/main/LICENSE + */ +// General types important to applications using stencil built components +export interface EventEmitter { + emit: (data?: T) => CustomEvent +} + +export interface StyleReactProps { + class?: string + className?: string + style?: { [key: string]: any } +} + +export interface OverlayEventDetail { + data?: T + role?: string +} + +export interface OverlayInterface { + el: HTMLElement + animated: boolean + keyboardClose: boolean + overlayIndex: number + presented: boolean + + enterAnimation?: any + leaveAnimation?: any + + didPresent: EventEmitter + willPresent: EventEmitter + willDismiss: EventEmitter + didDismiss: EventEmitter + + present(): Promise + dismiss(data?: any, role?: string): Promise +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/attachProps.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/attachProps.ts new file mode 100644 index 0000000000..14c72ee2df --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/attachProps.ts @@ -0,0 +1,209 @@ +/** + * Modify from https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/react-output-target/react-component-lib/utils/attachProps.ts + * MIT License https://github.com/ionic-team/stencil-ds-output-targets/blob/main/LICENSE + */ +import { flushSync, unstable_batchedUpdates } from 'react-dom' + +import { camelToDashCase } from './case' + +const arrayToMap = (arr: string[] | DOMTokenList) => { + const map = new Map(); + (arr as string[]).forEach((s: string) => map.set(s, s)) + return map +} + +export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => { + const newClassProp: string = newProps.className || newProps.class + const oldClassProp: string = oldProps.className || oldProps.class + // map the classes to Maps for performance + const currentClasses = arrayToMap(classList) + const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []) + const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []) + const finalClassNames: string[] = [] + // loop through each of the current classes on the component + // to see if it should be a part of the classNames added + currentClasses.forEach((currentClass) => { + if (incomingPropClasses.has(currentClass)) { + // add it as its already included in classnames coming in from newProps + finalClassNames.push(currentClass) + incomingPropClasses.delete(currentClass) + } else if (!oldPropClasses.has(currentClass)) { + // add it as it has NOT been removed by user + finalClassNames.push(currentClass) + } + }) + incomingPropClasses.forEach((s) => finalClassNames.push(s)) + return finalClassNames.join(' ') +} + +// Note(taro): 禁用 react 合成事件抛出 (避免自定义事件属性调用问题, 例如: event.detail.value 等) +export const isCoveredByReact = (__eventNameSuffix: string) => false + +interface EventCenter { + [key: string]: EventCenter.EventCallback | undefined +} + +namespace EventCenter { + export interface EventCallback { + (e: Event): any + fn?: (e: Event) => any + } +} + +type HTMLElementWithEvents = HTMLElement & { __events?: EventCenter } + +function getComponentName (node: HTMLElement): string { + return node.tagName.replace(/^TARO-/, '').replace(/-CORE$/, '') +} + +function getControlledValue (node: HTMLElement): string | null { + const componentName = getComponentName(node) + if (['INPUT', 'TEXTAREA', 'SLIDER', 'PICKER'].includes(componentName)) { + return 'value' + } else if (componentName === 'SWITCH') { + // Radio、Checkbox 受 RadioGroup、CheckboxGroup 控制，不支持受控 + return 'checked' + } else { + return null + } +} + +function getPropsAfterReactUpdate (node: HTMLElement): Record | null { + const key = Object.keys(node).find(key => key.includes('__reactProps')) + if (key) { + return node[key] as Record + } else { + return null + } +} + +function finishedEventHandler (node: HTMLElement) { + const controlledValue = getControlledValue(node) + + // 不是可以受控的表单组件，直接返回 + if (!controlledValue) return + + // 立即执行事件回调中用户可能触发了的 React 更新 + flushSync() + + // 组件在 React 更新后的 React props + const newProps = getPropsAfterReactUpdate(node) + if (newProps?.hasOwnProperty(controlledValue) && newProps[controlledValue] !== node[controlledValue]) { + // 如果 React Props 的 value 和 DOM 上的 value 不一致，以 React Props 为准（受控） + node[controlledValue] = newProps[controlledValue] + node.setAttribute(controlledValue, newProps[controlledValue]) + } +} + +export const syncEvent = ( + node: HTMLElementWithEvents, + eventName: string, + newEventHandler?: (e: Event) => any +) => { + const eventStore = node.__events ||= {} + const oldEventHandler = eventStore[eventName] + + if (!newEventHandler && oldEventHandler) { + node.removeEventListener(eventName, oldEventHandler) + } else { + if (oldEventHandler) { + if (oldEventHandler.fn === newEventHandler) { + return + } else { + // 删除旧的，绑定新的 + node.removeEventListener(eventName, oldEventHandler) + } + } + + const listener: EventCenter.EventCallback = eventStore[eventName] = function (e: Event) { + // React batch event updates + unstable_batchedUpdates(() => newEventHandler.call(this, e)) + // 控制是否更新受控组件的 value 值 + finishedEventHandler(node) + } + listener.fn = newEventHandler + node.addEventListener( + eventName, + listener + ) + } +} + +// TODO(performace): ReactComponent 已更新了一次，这里手动更新可能存在重复设置属性的问题 +export const attachProps = (node: HTMLElementWithEvents, newProps: any, oldProps: any = {}) => { + // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first + if (node instanceof Element) { + Object.keys(oldProps).forEach((name) => { + if (['style', 'children', 'ref', 'class', 'className', 'forwardedRef'].includes(name)) { + return + } + // Note: 移除节点上冗余事件、属性 + if (!newProps.hasOwnProperty(name)) { + if (/^on([A-Z].*)/.test(name)) { + const eventName = name.substring(2) + const eventNameLc = eventName.toLowerCase() + + if (!isCoveredByReact(eventNameLc)) { + syncEvent(node, eventNameLc) + } + } else { + (node as any)[name] = null + node.removeAttribute(camelToDashCase(name)) + } + } + }) + // add any classes in className to the class list + node.className = getClassName(node.classList, newProps, oldProps) + + Object.keys(newProps).forEach((name) => { + /** Note(taro): 优化 style 属性的处理 + * 1. 考虑到兼容旧版本项目，支持使用字符串配置 style 属性，但这并非推荐写法，且不考虑优化在 style 移除时同步删除属性 + * 2. style 属性应当交与前端 UI 框架自行处理，不考虑实现类似于 reactify-wc 的更新策略 + */ + if ((name === 'style' && typeof newProps[name] !== 'string') || ['children', 'ref', 'class', 'className', 'forwardedRef'].includes(name)) { + return + } + if (/^on([A-Z].*)/.test(name)) { + const eventName = name.substring(2) + const eventNameLc = eventName.toLowerCase() + + if (!isCoveredByReact(eventNameLc)) { + syncEvent(node, eventNameLc, newProps[name]) + } + } else { + (node as any)[name] = newProps[name] + const propType = typeof newProps[name] + if (propType === 'string') { + node.setAttribute(camelToDashCase(name), newProps[name]) + } + } + }) + + // 保证受控组件会被默认绑定一个空事件，用于触发 finishedEventHandler 中的受控逻辑 + const controlledValue = getControlledValue(node) + if ( + controlledValue && + newProps.hasOwnProperty(controlledValue) + ) { + const handleChangeEvent = ['INPUT', 'TEXTAREA'].includes(getComponentName(node)) ? 'input' : 'change' + node.__events ||= {} + if (!node.__events.hasOwnProperty(handleChangeEvent)) { + syncEvent(node, handleChangeEvent, function () {}) + } + } + } +} + +export function applyUnControlledDefaultValue (node: HTMLElementWithEvents, props: any) { + const controlledValue = getControlledValue(node) + + // 不是可以受控的表单组件，直接返回 + if (!controlledValue) return + + const defaultValueName = 'default' + controlledValue.charAt(0).toUpperCase() + controlledValue.slice(1) + if (!props.hasOwnProperty(controlledValue) && props.hasOwnProperty(defaultValueName)) { + // 如果是可以受控的表单组件，当没有传入 value/checked 而是传入 defaultValue/defaultChecked 时，把表单值初始化为 defaultValue/defaultChecked + node[controlledValue] = props[defaultValueName] + node.setAttribute(controlledValue, props[defaultValueName]) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/case.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/case.ts new file mode 100644 index 0000000000..c1b9332e55 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/case.ts @@ -0,0 +1,11 @@ +/** + * Modify from https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/react-output-target/react-component-lib/utils/case.ts + * MIT License https://github.com/ionic-team/stencil-ds-output-targets/blob/main/LICENSE + */ +export const dashToPascalCase = (str: string) => + str + .toLowerCase() + .split('-') + .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)) + .join('') +export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`) diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/dev.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/dev.ts new file mode 100644 index 0000000000..61c46c169a --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/dev.ts @@ -0,0 +1,18 @@ +/** + * Modify from https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/react-output-target/react-component-lib/utils/dev.ts + * MIT License https://github.com/ionic-team/stencil-ds-output-targets/blob/main/LICENSE + */ +export const isDevMode = () => { + return process && process.env && process.env.NODE_ENV === 'development' +} + +const warnings: { [key: string]: boolean } = {} + +export const deprecationWarning = (key: string, message: string) => { + if (isDevMode()) { + if (!warnings[key]) { + console.warn(message) + warnings[key] = true + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/index.tsx b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/index.tsx new file mode 100644 index 0000000000..bd5976361b --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/src/react-component-lib/utils/index.tsx @@ -0,0 +1,54 @@ +/** + * Modify from https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/react-output-target/react-component-lib/utils/index.ts + * MIT License https://github.com/ionic-team/stencil-ds-output-targets/blob/main/LICENSE + */ +import React from 'react' + +import type { StyleReactProps } from '../interfaces' + +export type StencilReactExternalProps = PropType & +Omit, 'style'> & +StyleReactProps; + +// This will be replaced with React.ForwardedRef when react-output-target is upgraded to React v17 +export type StencilReactForwardedRef = ((instance: T | null) => void) | React.MutableRefObject | null; + +export const setRef = (ref: StencilReactForwardedRef | React.Ref | undefined, value: any) => { + if (typeof ref === 'function') { + ref(value) + } else if (ref != null) { + // Cast as a MutableRef so we can assign current + (ref as React.MutableRefObject).current = value + } +} + +export const mergeRefs = ( + ...refs: (StencilReactForwardedRef | React.Ref | undefined)[] +): React.RefCallback => { + return (value: any) => { + refs.forEach((ref) => { + setRef(ref, value) + }) + } +} + +export const createForwardRef = (ReactComponent: any, displayName: string) => { + const forwardRef = ( + props: StencilReactExternalProps, + ref: StencilReactForwardedRef + ) => { + return + } + forwardRef.displayName = displayName + + return React.forwardRef(forwardRef) +} + +export const defineCustomElement = (tagName: string, customElement: any) => { + if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) { + customElements.define(tagName, customElement) + } +} + +export * from './attachProps' +export * from './case' diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/tsconfig.json b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/tsconfig.json new file mode 100644 index 0000000000..2d756d3097 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../../../../tsconfig.root.json", + "compilerOptions": { + "baseUrl": ".", + "declaration": true, + "jsx": "react", + "jsxFactory": "React.createElement", + "module": "ESNext", + "noUnusedLocals": false, + "skipLibCheck": true, + "skipDefaultLibCheck": true, + "sourceMap": false, + "strictNullChecks": false, + "target": "ES2017", + "typeRoots": ["./node_modules/@types"] + }, + "include": ["./src", "./types"] +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-react/types/define.d.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/types/define.d.ts new file mode 100644 index 0000000000..59b4eac98a --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-react/types/define.d.ts @@ -0,0 +1,2 @@ +// NOTE: 启用旧版本适配器 +declare const DEPRECATED_ADAPTER_COMPONENT: boolean | undefined diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/.babelrc.json b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/.babelrc.json new file mode 100644 index 0000000000..590c81860e --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/.babelrc.json @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "taro", + { + "absoluteRuntime": false, + "framework": "vue", + "hot": false, + "modules": false, + "ts": true + } + ] + ] +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/.gitignore b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/.gitignore new file mode 100644 index 0000000000..5580458adc --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/.gitignore @@ -0,0 +1,2 @@ +# Stencil autogenerated +src/components.ts diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/package.json b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/package.json new file mode 100644 index 0000000000..b419438596 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/package.json @@ -0,0 +1,37 @@ +{ + "name": "@tarojs/harmony-components-library-vue2", + "version": "3.6.23", + "description": "Taro 组件库 Vue2 版本库", + "private": true, + "main": "index.js", + "scripts": { + "build:ci": "run-s clean prod", + "clean": "rimraf ../harmony-components/lib/vue2", + "dev": "pnpm run prod -w", + "preprod": "node ./scripts/fix.js", + "prod": "rollup -c" + }, + "keywords": [], + "author": "ZakaryCode", + "license": "MIT", + "dependencies": { + "@tarojs/harmony-components": "workspace:*", + "tslib": "^2.6.2", + "vue-fragment": "^1.6.0" + }, + "devDependencies": { + "@babel/cli": "^7.14.5", + "@babel/core": "^7.14.5", + "@rollup/plugin-commonjs": "^20.0.0", + "@rollup/plugin-node-resolve": "^8.0.0", + "@types/node": "^14.14.31", + "babel-preset-taro": "workspace:*", + "postcss": "^8.4.18", + "rollup": "^2.79.0", + "rollup-plugin-node-externals": "^5.0.0", + "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-ts": "^3.0.2", + "typescript": "^4.7.4", + "vue": "^2.6.11" + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/rollup.config.js b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/rollup.config.js new file mode 100644 index 0000000000..99aeddacd2 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/rollup.config.js @@ -0,0 +1,42 @@ +import commonjs from '@rollup/plugin-commonjs' +import resolve from '@rollup/plugin-node-resolve' +import externals from 'rollup-plugin-node-externals' +import postcss from 'rollup-plugin-postcss' +import ts from 'rollup-plugin-ts' + +const config = { + input: ['src/index.ts', 'src/components-loader.ts', 'src/component-lib/index.ts'], + output: { + dir: '../harmony-components/lib/vue2', + exports: 'named', + preserveModules: true, + preserveModulesRoot: 'src', + sourcemap: true + }, + treeshake: false, + plugins: [ + externals({ + deps: true, + devDeps: false, + exclude: 'vue-fragment', + include: 'vue' + }), + resolve({ + preferBuiltins: false, + mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'main'] + }), + ts({ + sourceMap: true, + }), + commonjs({ + transformMixedEsModules: true, + dynamicRequireTargets: ['./src/**/*.js'] + }), + postcss({ + inject: { insertAt: 'top' }, + minimize: true, + }), + ] +} + +export default config diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/scripts/fix.js b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/scripts/fix.js new file mode 100644 index 0000000000..bc2b149958 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/scripts/fix.js @@ -0,0 +1,21 @@ +const fs = require('@tarojs/helper').fs +const path = require('path') + +const componentsPath = path.resolve(__dirname, '..', 'src/components.ts') + +if (fs.existsSync(componentsPath)) { + const codeBuffer = fs.readFileSync(componentsPath) + let code = codeBuffer.toString().replace(/import\stype\s\{\s([^}]*)\s\}\sfrom\s'@tarojs\/harmony-components[^']*';/ig, `import type { $1 } from '@tarojs/harmony-components/dist/types/components';`) + code = code.replace(/const\sTaro([A-Za-z]+)\s=/g, 'const $1 =').replace(/const\s([A-Za-z]+)Core\s=/g, 'const $1 =') + + if (code.includes('defineCustomElement as define')) { + code = code.replace(/import\s\{\sdefineCustomElement\sas\sdefine([A-Za-z]+)\s.*/g, '// @ts-ignore\nimport { defineCustomElement$1 as define$1 } from \'@tarojs/harmony-components/dist/components\';') + } + + if (!code.includes('fragment')) { + const comps = ['block'] + code = code.replace(new RegExp(`'taro-(${comps.join('|')})-core'`, 'ig'), `'fragment'`) + } + + fs.writeFileSync(componentsPath, code) +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/components.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/components.ts new file mode 100644 index 0000000000..0d8eded4b7 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/components.ts @@ -0,0 +1,83 @@ +import Icon from './icon' +import Image from './image' +import Picker from './picker' +import ScrollView from './scroll-view' +import Text from './text' + +const components = [ + // 视图容器 + 'taro-cover-image', + 'taro-cover-view', + 'taro-match-media', + 'taro-movable-area', + 'taro-movable-view', + 'taro-page-container', + 'taro-root-portal', + ['taro-scroll-view', { type: 'component', component: ScrollView }], + 'taro-share-element', + 'taro-swiper', + ['taro-swiper-item', { classNames: ['swiper-slide'] }], + 'taro-view', + + // 基础内容 + ['taro-icon', { type: 'component', component: Icon }], + ['taro-progress', { classNames: ['weui-progress'] }], + 'taro-rich-text', + ['taro-text', { type: 'component', component: Text }], + + // 表单组件 + 'taro-button', + ['taro-checkbox', { classNames: ['weui-cells_checkbox'] }], + 'taro-checkbox-group', + 'taro-editor', + 'taro-form', + ['taro-input', { type: 'forms', event: 'input' }], + 'taro-keyboard-accessory', + 'taro-label', + ['taro-picker', { type: 'component', component: Picker }], + 'taro-picker-view', + 'taro-picker-view-column', + ['taro-radio', { classNames: ['weui-cells_checkbox'] }], + ['taro-radio-group', { classNames: ['weui-cells_radiogroup'] }], + ['taro-slider', { type: 'forms', event: 'change', modelValue: 'value', classNames: ['weui-slider-box'] }], + ['taro-switch', { type: 'forms', event: 'change', modelValue: 'checked' }], + ['taro-textarea', { type: 'forms', event: 'input' }], + + // 导航 + 'taro-functional-page-navigator', + 'taro-navigator', + + // 媒体组件 + 'taro-audio', + 'taro-camera', + ['taro-image', { type: 'component', component: Image }], + 'taro-live-player', + ['taro-video', { classNames: ['taro-video-container'] }], + 'taro-voip-room', + + // 地图 + 'taro-map', + + // 画布 + 'taro-canvas', + + // 开放能力 + 'taro-web-view', + 'taro-ad', + 'taro-ad-custom', + 'taro-official-account', + 'taro-open-data', + + // 导航栏 + 'taro-navigation-bar', + + // 页面属性配置节点 + 'taro-page-meta', + + // 其他 + 'taro-block', + 'taro-custom-wrapper', + 'taro-slot' +] + +export default components diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/createComponent.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/createComponent.ts new file mode 100644 index 0000000000..9d12e120b9 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/createComponent.ts @@ -0,0 +1,20 @@ +import { listeners } from './mixins/listeners' +import { refs } from './mixins/refs' + +export default function createComponent (name, classNames = []) { + return { + name, + mixins: [listeners, refs], + props: ['nativeProps'], + render (createElement) { + return createElement(`${name}-core`, { + class: ['hydrated', ...classNames], + domProps: { + nativeProps: this.nativeProps + }, + attrs: this.$attrs, + on: this.listeners + }, this.$slots.default) + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/createFormsComponent.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/createFormsComponent.ts new file mode 100644 index 0000000000..8beaf1e101 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/createFormsComponent.ts @@ -0,0 +1,54 @@ +import { listeners } from './mixins/listeners' +import { refs } from './mixins/refs' + +export default function createFormsComponent (name, event, modelValue = 'value', classNames = []) { + const props: Record = { + nativeProps: { + type: Object + } + } + if (name === 'taro-input') { + props.focus = Boolean + } + + return { + name, + mixins: [listeners, refs], + model: { + prop: modelValue, + event: 'model' + }, + props, + methods: { + input (e) { + this.$emit('input', e) + this.$emit('model', e.target.value) + }, + change (e) { + this.$emit('change', e) + this.$emit('model', e.target.value) + } + }, + render (createElement) { + // eslint-disable-next-line + const self = this; + + const attrs = this.$attrs || {} + if (name === 'taro-input') { + attrs['auto-focus'] = self.focus + } + + const on = { ...self.listeners } + on[event] = self[event] + + return createElement(`${name}-core`, { + class: ['hydrated', ...classNames], + domProps: { + nativeProps: this.nativeProps + }, + attrs, + on + }, self.$slots.default) + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/icon.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/icon.ts new file mode 100644 index 0000000000..e1e22c2fbd --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/icon.ts @@ -0,0 +1,20 @@ +import { listeners } from './mixins/listeners' +import { refs } from './mixins/refs' + +export default { + name: 'taro-icon', + mixins: [listeners, refs], + props: { + type: String + }, + render (createElement) { + const iconType = this.type.replace(/_/g, '-') + return createElement('taro-icon-core', { + class: ['hydrated', `weui-icon-${iconType}`], + attrs: { + type: this.type + }, + on: this.listeners + }, this.$slots.default) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/image.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/image.ts new file mode 100644 index 0000000000..04da8aa52d --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/image.ts @@ -0,0 +1,21 @@ +import { listeners } from './mixins/listeners' +import { refs } from './mixins/refs' + +export default { + name: 'taro-image', + mixins: [listeners, refs], + props: { + mode: String + }, + render (createElement) { + return createElement('taro-image-core', { + class: ['hydrated', { + 'taro-img__widthfix': this.mode === 'widthFix' + }], + attrs: { + mode: this.mode + }, + on: this.listeners + }, this.$slots.default) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/index.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/index.ts new file mode 100644 index 0000000000..073c21d6b9 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/index.ts @@ -0,0 +1,23 @@ +import Vue from 'vue' + +import components from './components' +import createComponent from './createComponent' +import createFormsComponent from './createFormsComponent' + +components.forEach(params => { + if (typeof params === 'string') { + Vue.component(params, createComponent(params)) + } else if (params instanceof Array) { + const [name, props] = params as [string, Record] + const { classNames, type = 'simple' } = props + + if (type === 'simple') { + Vue.component(name, createComponent(name, classNames)) + } else if (type === 'forms') { + const { event, modelValue } = props + Vue.component(name, createFormsComponent(name, event, modelValue, classNames)) + } else if (type === 'component') { + Vue.component(name, props.component) + } + } +}) diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/mixins/listeners.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/mixins/listeners.ts new file mode 100644 index 0000000000..a77941c87d --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/mixins/listeners.ts @@ -0,0 +1,14 @@ +export const listeners = { + computed: { + listeners () { + // eslint-disable-next-line + const vm = this + return { + ...vm.$listeners, + click (e) { + vm.$emit('tap', e) + } + } + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/mixins/refs.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/mixins/refs.ts new file mode 100644 index 0000000000..51068e052f --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/mixins/refs.ts @@ -0,0 +1,53 @@ +export const refs = { + mounted () { + if ( + this.$parent && + typeof this.$parent.$refs === 'object' && + Object.keys(this.$parent.$refs).length + ) { + const refs = this.$parent.$refs + + if (this._refCacheKey) { + refs[this._refCacheKey] = this.$el + } else { + for (const key in refs) { + const ref = refs[key] + if (ref === this) { + this._refCacheKey = key + refs[key] = this.$el + break + } else if (Array.isArray(ref)) { + const index = ref.indexOf(this) + if (index > -1) { + ref[index] = this.$el + break + } + } + } + } + } + }, + beforeDestroy () { + if ( + this.$parent && + typeof this.$parent.$refs === 'object' && + Object.keys(this.$parent.$refs).length + ) { + const refs = this.$parent.$refs + + if (this._refCacheKey) { + refs[this._refCacheKey] = this + } else { + for (const key in refs) { + if (Array.isArray(refs[key])) { + const index = refs[key].indexOf(this.$el) + if (index > -1) { + refs[key][index] = this + break + } + } + } + } + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/picker.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/picker.ts new file mode 100644 index 0000000000..962a42d6e7 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/picker.ts @@ -0,0 +1,42 @@ +import { listeners } from './mixins/listeners' +import { refs } from './mixins/refs' + +export default { + name: 'taro-picker', + mixins: [listeners, refs], + model: { + event: 'model' + }, + props: { + range: Array, + rangeKey: String, + value: [Number, String, Array] + }, + mounted () { + this.$el.value = this.value + }, + watch: { + value (newVal) { + this.$el.value = newVal + } + }, + render (createElement) { + // eslint-disable-next-line @typescript-eslint/no-this-alias + const self = this + + return createElement('taro-picker-core', { + class: 'hydrated', + domProps: { + range: self.range, + rangeKey: self.rangeKey + }, + on: { + ...self.listeners, + change (e) { + self.$emit('change', e) + self.$emit('model', e.target.value) + } + } + }, self.$slots.default) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/scroll-view.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/scroll-view.ts new file mode 100644 index 0000000000..6233345799 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/scroll-view.ts @@ -0,0 +1,35 @@ +import { listeners } from './mixins/listeners' +import { refs } from './mixins/refs' + +export default { + name: 'taro-scroll-view', + mixins: [listeners, refs], + props: { + scrollX: Boolean, + scrollY: Boolean + }, + render (createElement) { + // eslint-disable-next-line @typescript-eslint/no-this-alias + const self = this + + const attrs = {} + if (self.scrollX) attrs['scroll-x'] = true + if (self.scrollY) attrs['scroll-y'] = true + + return createElement('taro-scroll-view-core', { + class: ['hydrated', { + 'taro-scroll-view__scroll-x': self.scrollX, + 'taro-scroll-view__scroll-y': self.scrollY + }], + attrs, + on: { + ...self.listeners, + scroll (e) { + if (e instanceof CustomEvent) { + self.$emit('scroll', e) + } + } + } + }, self.$slots.default) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/text.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/text.ts new file mode 100644 index 0000000000..35312b5d9c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/component-lib/text.ts @@ -0,0 +1,21 @@ +import { listeners } from './mixins/listeners' +import { refs } from './mixins/refs' + +export default { + name: 'taro-text', + mixins: [listeners, refs], + props: { + selectable: Boolean + }, + render (createElement) { + return createElement('taro-text-core', { + class: ['hydrated', { + 'taro-text__selectable': this.selectable + }], + attrs: { + selectable: this.selectable + }, + on: this.listeners + }, this.$slots.default) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/components-loader.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/components-loader.ts new file mode 100644 index 0000000000..fd23acdc93 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/components-loader.ts @@ -0,0 +1,18 @@ +import Vue from 'vue' +import Fragment from 'vue-fragment' + +export function initVue2Components (components: Record = {}) { + const ignoredElements = [/^taro-/, 'root', 'block'] + if (!Vue.config.ignoredElements?.includes(ignoredElements[0])) { + Vue.config.ignoredElements = [...Vue.config.ignoredElements, ...ignoredElements] + } + + Vue.use(Fragment.Plugin) + Object.entries(components).forEach(([name, definition]) => { + if (typeof definition === 'function') { + const tagName = 'taro' + name.replace(new RegExp('([A-Z])', 'g'), '-$1').toLowerCase() + const comp = Vue.extend(definition) + Vue.component(tagName, comp) + } + }) +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/index.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/index.ts new file mode 100644 index 0000000000..cb64ac1b52 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/index.ts @@ -0,0 +1 @@ +export * from './components' diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/vue-component-lib/utils.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/vue-component-lib/utils.ts new file mode 100644 index 0000000000..1e92f9adfa --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/src/vue-component-lib/utils.ts @@ -0,0 +1,76 @@ +/** + * Modify from https://github.com/diondree/stencil-vue2-output-target/blob/master/vue-component-lib/utils.ts + * MIT License https://github.com/diondree/stencil-vue2-output-target/blob/master/LICENSE.md + */ +import Vue, { CreateElement,VNode } from 'vue' + +export const createCommonMethod = (methodName: string) => + function (...args: any[]) { + this.$refs.wc[methodName](...args) + } as unknown + +export const toLowerCase = (str: string) => str.toLowerCase() + +export const toDashCase = (str: string) => + toLowerCase( + str + .replace(/([A-Z0-9])/g, (g) => ' ' + g[0]) + .trim() + .replace(/ /g, '-') + ) + +export const createCommonRender = ( + tagName: string, + eventNames: string[] = [], + defineCustomElement: any, +) => { + /** + * Create a Vue component wrapper around a Web Component. + * Note: The `props` here are not all properties on a component. + * They refer to whatever properties are set on an instance of a component. + */ + + if (!DEPRECATED_ADAPTER_COMPONENT && defineCustomElement !== undefined) { + defineCustomElement() + } + + return function (createElement: CreateElement): VNode { + const vueElement = this as Vue + const allListeners = eventNames.reduce((listeners, eventName) => { + return { + ...listeners, + [eventName]: (event: CustomEvent) => { + vueElement.$emit(eventName, event) + // Note(taro): 优化 input、change 事件与 v-model 兼容性问题 + if (['input', 'change'].includes(eventName)) { + vueElement.$emit('update:modelValue', event.detail.value) + } + }, + } + }, vueElement.$listeners) + const attributes = vueElement.$props + ? Object.keys(vueElement.$props).reduce((attrs: any, prop: string) => { + const attributeName = toDashCase(prop) + attrs[attributeName] = vueElement.$props[prop] + return attrs + }, {}) + : {} + return createElement( + tagName, + { + ref: 'wc', + domProps: vueElement.$props, + on: { + ...allListeners, + // Note(taro): click 事件绑定 tap 事件触发 + click: (event) => { + typeof allListeners.click === 'function' && allListeners.click(event) + vueElement.$emit('tap', event) + } + }, + attrs: { ...attributes, 'data-testid': tagName }, + }, + [vueElement.$slots.default] + ) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/tsconfig.json b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/tsconfig.json new file mode 100644 index 0000000000..8a00524f20 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../../../../tsconfig.root.json", + "compilerOptions": { + "baseUrl": ".", + "declaration": true, + "module": "ESNext", + "noUnusedLocals": false, + "skipLibCheck": true, + "skipDefaultLibCheck": true, + "sourceMap": false, + "strictNullChecks": false, + "target": "ES2017", + "typeRoots": ["./node_modules/@types"] + }, + "include": ["./src", "./types"] +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/types/define.d.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/types/define.d.ts new file mode 100644 index 0000000000..59b4eac98a --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue2/types/define.d.ts @@ -0,0 +1,2 @@ +// NOTE: 启用旧版本适配器 +declare const DEPRECATED_ADAPTER_COMPONENT: boolean | undefined diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/.babelrc.json b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/.babelrc.json new file mode 100644 index 0000000000..67a904e3c1 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/.babelrc.json @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "taro", + { + "absoluteRuntime": false, + "framework": "vue3", + "hot": false, + "modules": false, + "ts": true + } + ] + ] +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/.gitignore b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/.gitignore new file mode 100644 index 0000000000..5580458adc --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/.gitignore @@ -0,0 +1,2 @@ +# Stencil autogenerated +src/components.ts diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/package.json b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/package.json new file mode 100644 index 0000000000..870a2d8e65 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/package.json @@ -0,0 +1,36 @@ +{ + "name": "@tarojs/harmony-components-library-vue3", + "version": "3.6.23", + "description": "Taro 组件库 Vue3 版本库", + "private": true, + "main": "index.js", + "scripts": { + "build:ci": "run-s clean prod", + "clean": "rimraf ../harmony-components/lib/vue3", + "dev": "pnpm run prod -w", + "preprod": "node ./scripts/fix.js", + "prod": "rollup -c" + }, + "keywords": [], + "author": "ZakaryCode", + "license": "MIT", + "dependencies": { + "@tarojs/harmony-components": "workspace:*", + "tslib": "^2.6.2" + }, + "devDependencies": { + "@babel/cli": "^7.14.5", + "@babel/core": "^7.14.5", + "@rollup/plugin-commonjs": "^20.0.0", + "@rollup/plugin-node-resolve": "^8.0.0", + "@types/node": "^14.14.31", + "babel-preset-taro": "workspace:*", + "postcss": "^8.4.18", + "rollup": "^2.79.0", + "rollup-plugin-node-externals": "^5.0.0", + "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-ts": "^3.0.2", + "typescript": "^4.7.4", + "vue": "^3.0.0" + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/rollup.config.js b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/rollup.config.js new file mode 100644 index 0000000000..784bb1ab51 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/rollup.config.js @@ -0,0 +1,41 @@ +import commonjs from '@rollup/plugin-commonjs' +import resolve from '@rollup/plugin-node-resolve' +import externals from 'rollup-plugin-node-externals' +import postcss from 'rollup-plugin-postcss' +import ts from 'rollup-plugin-ts' + +const config = { + input: ['src/index.ts', 'src/components-loader.ts', 'src/component-lib/index.ts'], + output: { + dir: '../harmony-components/lib/vue3', + exports: 'named', + preserveModules: true, + preserveModulesRoot: 'src', + sourcemap: true + }, + treeshake: false, + plugins: [ + externals({ + deps: true, + devDeps: false, + include: 'vue' + }), + resolve({ + preferBuiltins: false, + mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'main'] + }), + ts({ + sourceMap: true, + }), + commonjs({ + transformMixedEsModules: true, + dynamicRequireTargets: ['./src/**/*.js'] + }), + postcss({ + inject: { insertAt: 'top' }, + minimize: true, + }), + ] +} + +export default config diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/scripts/fix.js b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/scripts/fix.js new file mode 100644 index 0000000000..0cfb1f24dc --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/scripts/fix.js @@ -0,0 +1,22 @@ +const fs = require('@tarojs/helper').fs +const path = require('path') + +const componentsPath = path.resolve(__dirname, '..', 'src/components.ts') + +if (fs.existsSync(componentsPath)) { + const codeBuffer = fs.readFileSync(componentsPath) + let code = codeBuffer.toString().replace(/import\stype\s\{\s([^}]*)\s\}\sfrom\s'@tarojs\/harmony-components[^']*';/ig, `import type { $1 } from '@tarojs/harmony-components/dist/types/components';`) + code = code.replace(/const\sTaro([A-Za-z]+)\s=/g, 'const $1 =').replace(/const\s([A-Za-z]+)Core\s=/g, 'const $1 =') + + if (code.includes('defineCustomElement as define')) { + code = code.replace(/import\s\{\sdefineCustomElement\sas\sdefine([A-Za-z]+)\s.*/g, '// @ts-ignore\nimport { defineCustomElement$1 as define$1 } from \'@tarojs/harmony-components/dist/components\';') + } + + if (!code.includes('slots.default')) { + const comps = ['Block'] + code = code.replace('/* auto-generated vue proxies */', `/* auto-generated vue proxies */\nimport { defineComponent } from 'vue'`) + code = code.replace(new RegExp(`export const (${comps.join('|')}) = \\/\\*\\@__PURE__\\*\\/ defineContainer[^;]*;`, 'ig'), 'export const $1 = defineComponent((__props, { slots }) => slots.default);') + } + + fs.writeFileSync(componentsPath, code) +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/createComponent.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/createComponent.ts new file mode 100644 index 0000000000..98e5f92af6 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/createComponent.ts @@ -0,0 +1,25 @@ +import { h } from 'vue' + +import { useForwardRef } from './forwardRef' + +export default function createComponent (name, classNames = []) { + return { + emits: ['tap'], + setup (__props, { slots, emit }) { + const forwardRef = useForwardRef() + return () => ( + h( + `${name}-core`, + { + ref: forwardRef, + class: ['hydrated', ...classNames], + onClick (e) { + emit('tap', e) + } + }, + slots + ) + ) + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/createFormsComponent.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/createFormsComponent.ts new file mode 100644 index 0000000000..5c4f8ebafb --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/createFormsComponent.ts @@ -0,0 +1,51 @@ +import { computed, h, toRefs } from 'vue' + +import { useForwardRef } from './forwardRef' + +export default function createFormsComponent (name, eventName, modelValue = 'value', classNames = []) { + const props: Record = { + modelValue: null + } + if (name === 'taro-input') { + props.focus = Boolean + } + + return { + emits: ['tap', 'update:modelValue'], + props, + setup (props, { slots, emit }) { + const { modelValue: model, focus } = toRefs(props) + + const attrs = computed(() => { + return name === 'taro-input' + ? { + [modelValue]: model.value, + 'auto-focus': focus.value + } + : { + [modelValue]: model.value + } + }) + + const forwardRef = useForwardRef() + + return () => ( + h( + `${name}-core`, + { + ref: forwardRef, + class: ['hydrated', ...classNames], + ...attrs.value, + onClick (e) { + emit('tap', e) + }, + [`on${eventName}`] (e) { + emit('update:modelValue', e.detail.value) + } + }, + slots + ) + ) + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/forwardRef.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/forwardRef.ts new file mode 100644 index 0000000000..48fe72f72a --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/forwardRef.ts @@ -0,0 +1,10 @@ +import { getCurrentInstance } from 'vue' + +export function useForwardRef () { + const instance = getCurrentInstance() + function forwardRef (ref) { + instance.exposed = ref + instance.exposeProxy = ref + } + return forwardRef +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/icon.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/icon.ts new file mode 100644 index 0000000000..cb7c2cbc4a --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/icon.ts @@ -0,0 +1,26 @@ +import { h } from 'vue' + +import { useForwardRef } from './forwardRef' + +export default { + emits: ['tap'], + setup (__props, { slots, emit, attrs }) { + const iconType = attrs.type.replace(/_/g, '-') + + const forwardRef = useForwardRef() + + return () => ( + h( + 'taro-icon-core', + { + ref: forwardRef, + class: ['hydrated', `weui-icon-${iconType}`], + onClick (e) { + emit('tap', e) + } + }, + slots + ) + ) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/image.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/image.ts new file mode 100644 index 0000000000..7510268bee --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/image.ts @@ -0,0 +1,25 @@ +import { h } from 'vue' + +import { useForwardRef } from './forwardRef' + +export default { + emits: ['tap'], + setup (__props, { slots, emit, attrs }) { + const forwardRef = useForwardRef() + return () => ( + h( + 'taro-image-core', + { + ref: forwardRef, + class: ['hydrated', { + 'taro-img__widthfix': attrs.mode === 'widthFix' + }], + onClick (e) { + emit('tap', e) + } + }, + slots + ) + ) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/index.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/index.ts new file mode 100644 index 0000000000..7d99f42700 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/index.ts @@ -0,0 +1,76 @@ +import createComponent from './createComponent' +import createFormsComponent from './createFormsComponent' + +// 视图容器 +export const CoverImage = /* @__PURE__ */ createComponent('taro-cover-image') +export const CoverView = /* @__PURE__ */ createComponent('taro-cover-view') +export const MatchMedia = /* @__PURE__ */ createComponent('taro-match-media') +export const MovableArea = /* @__PURE__ */ createComponent('taro-movable-area') +export const MovableView = /* @__PURE__ */ createComponent('taro-movable-view') +export const PageContainer = /* @__PURE__ */ createComponent('taro-page-container') +export const RootPortal = /* @__PURE__ */ createComponent('taro-root-portal') +export { default as ScrollView } from './scroll-view' +export const ShareElement = /* @__PURE__ */ createComponent('taro-share-element') +export const Swiper = /* @__PURE__ */ createComponent('taro-swiper') +export const SwiperItem = /* @__PURE__ */ createComponent('taro-swiper-item', ['swiper-slide']) +export const View = /* @__PURE__ */ createComponent('taro-view') + +// 基础内容 +export { default as Icon } from './icon' +export const Progress = /* @__PURE__ */ createComponent('taro-progress', ['weui-progress']) +export const RichText = /* @__PURE__ */ createComponent('taro-rich-text') +export { default as Text } from './text' + +// 表单组件 +export const Button = /* @__PURE__ */ createComponent('taro-button') +export const Checkbox = /* @__PURE__ */ createComponent('taro-checkbox', ['weui-cells_checkbox']) +export const CheckboxGroup = /* @__PURE__ */ createComponent('taro-checkbox-group') +export const Editor = /* @__PURE__ */ createComponent('taro-editor') +export const Form = /* @__PURE__ */ createComponent('taro-form') +export const Input = /* @__PURE__ */ createFormsComponent('taro-input', 'input') +export const KeyboardAccessory = /* @__PURE__ */ createComponent('taro-keyboard-accessory') +export const Label = /* @__PURE__ */ createComponent('taro-label') +export const Picker = /* @__PURE__ */ createFormsComponent('taro-picker', 'change') +export const PickerView = /* @__PURE__ */ createComponent('taro-picker-view') +export const PickerViewColumn = /* @__PURE__ */ createComponent('taro-picker-view-column') +export const Radio = /* @__PURE__ */ createComponent('taro-radio', ['weui-cells_checkbox']) +export const RadioGroup = /* @__PURE__ */ createComponent('taro-radio-group', ['weui-cells_radiogroup']) +export const Slider = /* @__PURE__ */ createFormsComponent('taro-slider', 'change', 'value', ['weui-slider-box']) +export const Switch = /* @__PURE__ */ createFormsComponent('taro-switch', 'change', 'checked') +export const Textarea = /* @__PURE__ */ createFormsComponent('taro-textarea', 'input') + +// 导航 +export const FunctionalPageNavigator = /* @__PURE__ */ createComponent('taro-functional-page-navigator') +export const Navigator = /* @__PURE__ */ createComponent('taro-navigator') + +// 媒体组件 +export const Audio = /* @__PURE__ */ createComponent('taro-audio') +export const Camera = /* @__PURE__ */ createComponent('taro-camera') +export { default as Image } from './image' +export const LivePlayer = /* @__PURE__ */ createComponent('taro-live-player') +export const Video = /* @__PURE__ */ createComponent('taro-video', ['taro-video-container']) +export const VoipRoom = /* @__PURE__ */ createComponent('taro-voip-room') + +// 地图 +export const Map = /* @__PURE__ */ createComponent('taro-map') + +// 画布 +export const Canvas = /* @__PURE__ */ createComponent('taro-canvas') + +// 开放能力 +export const WebView = /* @__PURE__ */ createComponent('taro-web-view') +export const Ad = /* @__PURE__ */ createComponent('taro-ad') +export const AdCustom = /* @__PURE__ */ createComponent('taro-ad-custom') +export const OfficialAccount = /* @__PURE__ */ createComponent('taro-official-account') +export const OpenData = /* @__PURE__ */ createComponent('taro-open-data') + +// 导航栏 +export const NavigationBar = /* @__PURE__ */ createComponent('taro-navigation-bar') + +// 页面属性配置节点 +export const PageMeta = /* @__PURE__ */ createComponent('taro-page-meta') + +// 其他 +export const Block = /* @__PURE__ */ createComponent('taro-block') +export const CustomWrapper = /* @__PURE__ */ createComponent('taro-custom-wrapper') +export const Slot = /* @__PURE__ */ createComponent('taro-slot') diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/scroll-view.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/scroll-view.ts new file mode 100644 index 0000000000..58ddd8bfa7 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/scroll-view.ts @@ -0,0 +1,31 @@ +import { h } from 'vue' + +import { useForwardRef } from './forwardRef' + +export default { + emits: ['tap', 'scroll'], + setup (__props, { slots, emit, attrs }) { + const forwardRef = useForwardRef() + return () => ( + h( + 'taro-scroll-view-core', + { + ref: forwardRef, + class: ['hydrated', { + 'taro-scroll-view__scroll-x': attrs['scroll-x'] === '', + 'taro-scroll-view__scroll-y': attrs['scroll-y'] === '' + }], + onClick (e) { + emit('tap', e) + }, + onScroll (e) { + if (e instanceof CustomEvent) { + emit('scroll', e) + } + } + }, + slots + ) + ) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/text.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/text.ts new file mode 100644 index 0000000000..b79a10172c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/component-lib/text.ts @@ -0,0 +1,25 @@ +import { h } from 'vue' + +import { useForwardRef } from './forwardRef' + +export default { + emits: ['tap'], + setup (__props, { slots, emit, attrs }) { + const forwardRef = useForwardRef() + return () => ( + h( + 'taro-text-core', + { + ref: forwardRef, + class: ['hydrated', { + 'taro-text_selectable': attrs.selectable + }], + onClick (e) { + emit('tap', e) + } + }, + slots + ) + ) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/components-loader.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/components-loader.ts new file mode 100644 index 0000000000..050fb9faf5 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/components-loader.ts @@ -0,0 +1,11 @@ +export function initVue3Components (app, components: Record = {}) { + app.config.isCustomElement = tag => /^taro-/.test(tag) || tag === 'root' || tag === 'block' + + Object.entries(components).forEach(([name, component]) => { + const tagName = component?.displayName + if (typeof tagName === 'string' && tagName) { + component.name = name + app.component(tagName.replace(/-core$/, ''), component) + } + }) +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/index.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/index.ts new file mode 100644 index 0000000000..cb64ac1b52 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/index.ts @@ -0,0 +1 @@ +export * from './components' diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/vue-component-lib/utils.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/vue-component-lib/utils.ts new file mode 100644 index 0000000000..0bf2f8f159 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/src/vue-component-lib/utils.ts @@ -0,0 +1,210 @@ +/** + * Modify from https://github.com/ionic-team/stencil-ds-output-targets/blob/main/packages/vue-output-target/vue-component-lib/utils.ts + * MIT License https://github.com/ionic-team/stencil-ds-output-targets/blob/main/LICENSE + */ +import { defineComponent, getCurrentInstance, h, inject, Ref,ref, VNode } from 'vue' + +export interface InputProps { + modelValue?: T +} + +const UPDATE_VALUE_EVENT = 'update:modelValue' +const MODEL_VALUE = 'modelValue' +const ROUTER_LINK_VALUE = 'routerLink' +const NAV_MANAGER = 'navManager' +const ROUTER_PROP_PREFIX = 'router' +const ARIA_PROP_PREFIX = 'aria' +/** + * Starting in Vue 3.1.0, all properties are + * added as keys to the props object, even if + * they are not being used. In order to correctly + * account for both value props and v-model props, + * we need to check if the key exists for Vue <3.1.0 + * and then check if it is not undefined for Vue >= 3.1.0. + * See https://github.com/vuejs/vue-next/issues/3889 + */ +const EMPTY_PROP = Symbol('EMPTY_PROP') +const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP } + +interface NavManager { + navigate: (options: T) => void +} + +const getComponentClasses = (classes: unknown) => { + return (classes as string)?.split(' ') || [] +} + +const getElementClasses = ( + ref: Ref, + componentClasses: Set, + defaultClasses: string[] = [] +) => { + return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter( + (c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i + ) +} + +/** + * Create a callback to define a Vue component wrapper around a Web Component. + * + * @prop name - The component tag name (i.e. `ion-button`) + * @prop componentProps - An array of properties on the + * component. These usually match up with the @Prop definitions + * in each component's TSX file. + * @prop customElement - An option custom element instance to pass + * to customElements.define. Only set if `includeImportCustomElements: true` in your config. + * @prop modelProp - The prop that v-model binds to (i.e. value) + * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange) + * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been + * correctly updated when a user's event callback fires. + */ +export const defineContainer = ( + name: string, + defineCustomElement: any, + componentProps: string[] = [], + modelProp?: string, + modelUpdateEvent?: string, + externalModelUpdateEvent?: string +) => { + /** + * Create a Vue component wrapper around a Web Component. + * Note: The `props` here are not all properties on a component. + * They refer to whatever properties are set on an instance of a component. + */ + + if (!DEPRECATED_ADAPTER_COMPONENT && defineCustomElement !== undefined) { + defineCustomElement() + } + + const Container = defineComponent>((props: any, { attrs, slots, emit }) => { + let modelPropValue = props[modelProp] + const containerRef = ref() + const classes = new Set(getComponentClasses(attrs.class)) + const onVnodeBeforeMount = (vnode: VNode) => { + // Add a listener to tell Vue to update the v-model + if (vnode.el) { + const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent] + eventsNames.forEach((eventName: string) => { + vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => { + modelPropValue = (e?.target as any)[modelProp] + emit(UPDATE_VALUE_EVENT, modelPropValue) + + /** + * We need to emit the change event here + * rather than on the web component to ensure + * that any v-model bindings have been updated. + * Otherwise, the developer will listen on the + * native web component, but the v-model will + * not have been updated yet. + */ + if (externalModelUpdateEvent) { + emit(externalModelUpdateEvent, e) + } + }) + }) + } + } + + const currentInstance = getCurrentInstance() + const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER] + const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined + const handleRouterLink = (ev: Event) => { + const { routerLink } = props + if (routerLink === EMPTY_PROP) return + + if (navManager !== undefined) { + const navigationPayload: any = { event: ev } + for (const key in props) { + const value = props[key] + if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) { + navigationPayload[key] = value + } + } + + navManager.navigate(navigationPayload) + } else { + console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.') + } + } + + return () => { + modelPropValue = props[modelProp] + + getComponentClasses(attrs.class).forEach((value) => { + classes.add(value) + }) + + const oldClick = props.onClick + const handleClick = (ev: Event) => { + if (oldClick !== undefined) { + oldClick(ev) + } + if (!ev.defaultPrevented) { + handleRouterLink(ev) + } + } + + let propsToAdd: any = { + ref: containerRef, + class: getElementClasses(containerRef, classes), + onClick: (ev: Event) => { + handleClick(ev) + emit('tap', ev) // Note(taro): 为 click 事件绑定 tap 事件 + }, + onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined, + } + + /** + * We can use Object.entries here + * to avoid the hasOwnProperty check, + * but that would require 2 iterations + * where as this only requires 1. + */ + for (const key in props) { + const value = props[key] + if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) { + propsToAdd[key] = value + } + } + + if (modelProp) { + /** + * If form value property was set using v-model + * then we should use that value. + * Otherwise, check to see if form value property + * was set as a static value (i.e. no v-model). + */ + if (props[MODEL_VALUE] !== EMPTY_PROP) { + propsToAdd = { + ...propsToAdd, + [modelProp]: props[MODEL_VALUE], + } + } else if (modelPropValue !== EMPTY_PROP) { + propsToAdd = { + ...propsToAdd, + [modelProp]: modelPropValue, + } + } + } + + return h(name, propsToAdd, slots.default && slots.default()) + } + }) + + Container.displayName = name + + Container.props = { + [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP, + } + + componentProps.forEach((componentProp) => { + Container.props[componentProp] = DEFAULT_EMPTY_PROP + }) + + if (modelProp) { + Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP + Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent] + } + + return Container +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/tsconfig.json b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/tsconfig.json new file mode 100644 index 0000000000..8a00524f20 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../../../../tsconfig.root.json", + "compilerOptions": { + "baseUrl": ".", + "declaration": true, + "module": "ESNext", + "noUnusedLocals": false, + "skipLibCheck": true, + "skipDefaultLibCheck": true, + "sourceMap": false, + "strictNullChecks": false, + "target": "ES2017", + "typeRoots": ["./node_modules/@types"] + }, + "include": ["./src", "./types"] +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/types/define.d.ts b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/types/define.d.ts new file mode 100644 index 0000000000..59b4eac98a --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/components-library-vue3/types/define.d.ts @@ -0,0 +1,2 @@ +// NOTE: 启用旧版本适配器 +declare const DEPRECATED_ADAPTER_COMPONENT: boolean | undefined diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-react/image/index.tsx b/packages/taro-platform-harmony-hybrid/src/components/components-react/image/index.tsx deleted file mode 100644 index 5629575b45..0000000000 --- a/packages/taro-platform-harmony-hybrid/src/components/components-react/image/index.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import 'weui' -import './style/index.css' - -// import classNames from 'classnames' -import React from 'react' - -require('intersection-observer') - -interface IProps extends React.HTMLAttributes { - src: string - mode: string - onError: () => void - onLoad: (e) => void - lazyLoad?: boolean - imgProps?: Record -} - -class Image extends React.Component { - constructor (props) { - super(props) - this.state = { - isLoaded: false - } - this.imageOnLoad = this.imageOnLoad.bind(this) - // this.observer = {} - } - - observer: any = {} - imgRef: any = null - - componentDidMount () { - // eslint-disable-next-line no-console - console.log('component-react/image/index') - if (this.props.lazyLoad) { - this.observer = new IntersectionObserver( - entries => { - // 异步 api 关系 - if (entries[entries.length - 1].isIntersecting) { - this.setState({ isLoaded: true }, () => { - // findDOMNode(this).children[0].src = this.props.src - this.imgRef.src = this.props.src - }) - } - }, - { - rootMargin: '300px 0px' - } - ) - this.observer.observe(this.imgRef) - } - } - - componentWillUnmount () { - this.observer.disconnect && this.observer.disconnect() - } - - imageOnLoad (e) { - const { onLoad } = this.props - Object.defineProperty(e, 'detail', { - enumerable: true, - writable: true, - value: { - width: e.target.width, - height: e.target.height - } - }) - - onLoad && onLoad(e) - } - - // render () { - // const { - // className, - // style = {}, - // src, - // mode, - // onError, - // lazyLoad, - // imgProps, - // ...reset - // } = this.props - // const cls = classNames( - // 'taro-img', - // { - // 'taro-img__widthfix': mode === 'widthFix' - // }, - // className - // ) - // const imgCls = classNames( - // 'taro-img__mode-' + - // (mode || 'scaleToFill').toLowerCase().replace(/\s/g, '') - // ) - - // return ( - //
- // {lazyLoad ? ( - // (this.imgRef = img)} - // className={imgCls} - // data-src={src} - // onLoad={this.imageOnLoad} - // onError={onError} - // {...imgProps} - // /> - // ) : ( - // (this.imgRef = img)} - // className={imgCls} - // src={src} - // onLoad={this.imageOnLoad} - // onError={onError} - // {...imgProps} - // /> - // )} - //
- // ) - // } -} - -export default Image diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-react/image/style/index.css b/packages/taro-platform-harmony-hybrid/src/components/components-react/image/style/index.css deleted file mode 100644 index 23b0a1987c..0000000000 --- a/packages/taro-platform-harmony-hybrid/src/components/components-react/image/style/index.css +++ /dev/null @@ -1,74 +0,0 @@ -img[src=""] { - opacity: 0; -} - -.taro-img { - display: inline-block; - overflow: hidden; - position: relative; - font-size: 0; - width: 100%; - height: 100%; -} - -.taro-img.taro-img__widthfix { - height: 100%; -} - -.taro-img__mode-scaletofill { - object-fit: contain; - width: 100%; - height: 100%; -} - -.taro-img__mode-aspectfit { - object-fit: contain; - width: 100%; - height: 100%; -} - -.taro-img__mode-aspectfill { - object-fit: cover; - width: 100%; - height: 100%; -} - -.taro-img__mode-widthfix { - width: 100%; -} - -.taro-img__mode-top { - width: 100%; -} - -.taro-img__mode-bottom { - width: 100%; - position: absolute; - bottom: 0; -} - -.taro-img__mode-left { - height: 100%; -} - -.taro-img__mode-right { - position: absolute; - height: 100%; - right: 0; -} - -.taro-img__mode-topright { - position: absolute; - right: 0; -} - -.taro-img__mode-bottomleft { - position: absolute; - bottom: 0; -} - -.taro-img__mode-bottomright { - position: absolute; - right: 0; - bottom: 0; -} diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-vue2/input/index.vue b/packages/taro-platform-harmony-hybrid/src/components/components-vue2/input/index.vue deleted file mode 100644 index e068041df0..0000000000 --- a/packages/taro-platform-harmony-hybrid/src/components/components-vue2/input/index.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-vue3/input/index.ts b/packages/taro-platform-harmony-hybrid/src/components/components-vue3/input/index.ts deleted file mode 100644 index 482c356467..0000000000 --- a/packages/taro-platform-harmony-hybrid/src/components/components-vue3/input/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ref } from 'vue3' - -export default { - setup () { - const count = ref(0) - return { count } - }, - template: ` - ` -} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/.eslintrc.js b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/.eslintrc.js new file mode 100644 index 0000000000..7d94831d02 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/.eslintrc.js @@ -0,0 +1,17 @@ +const config = require('../../../../../.eslintrc.js') + +module.exports = { + ...config, + rules: { + ...config.rules, + 'no-console': 0, + '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: 'h' }], + 'react/no-unknown-property': [2, { ignore: ['class'] }], + 'react/jsx-key': 1 + }, + settings: { + react: { + pragma: 'h' + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/.gitignore b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/.gitignore new file mode 100644 index 0000000000..ca115e8e24 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/.gitignore @@ -0,0 +1,28 @@ +# dependency +node_modules +webpack.config.js +src/demo + +# macOS +.DS_Store + +# ide +.vs_code +.idea + +# build +build +dist +lib + +# jest +coverage +.stencil +loader + +# Stencil autogenerated +src/components.d.ts +stuff.* +www + +stencil.config.* diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/CHANGELOG.md b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/CHANGELOG.md new file mode 100644 index 0000000000..afe9f88a0e --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/CHANGELOG.md @@ -0,0 +1,7 @@ +# Change Log + +## [0.0.67-beta.3](https://github.com/NervJS/taro/compare/v0.0.67-beta.2...v0.0.67-beta.3) (2018-07-04) + +### Features + +* 重构 swiper 组件 ([d10a9df](https://github.com/NervJS/taro/commit/d10a9df)) diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/README.md b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/README.md new file mode 100644 index 0000000000..c573f1e6ec --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/README.md @@ -0,0 +1,9 @@ +# harmony-components + +Taro 组件库。 + +在小程序端，React/Nerv 指向 `mini/index.js`，Vue 无需使用此包。 + +在 H5 端，React/Nerv 指向 `h5/react/index.js`，Vue 指向 `h5/vue/index.js`。H5 端使用 [stencil](https://stenciljs.com/) 把组件编译为 Web Components 以提供跨框架调用。 + +> NOTE: `@stencil/react-output-target`、`@stencil/vue-output-target`、`stencil-vue2-output-target` 在 harmony-components-library-* 中存在一些特殊处理，验证过无问题可以自行升级。 diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/fileMock.js b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/fileMock.js new file mode 100644 index 0000000000..0e56c5b5f7 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/fileMock.js @@ -0,0 +1 @@ +module.exports = 'test-file-stub' diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/hls.js.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/hls.js.ts new file mode 100644 index 0000000000..69f8625899 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/hls.js.ts @@ -0,0 +1,7 @@ +class HLS { + isSupported () { + return false + } +} + +export default new HLS() diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/intersection-observer.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/intersection-observer.ts new file mode 100644 index 0000000000..cc71b88e29 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/intersection-observer.ts @@ -0,0 +1,21 @@ +type ref = { + isIntersecting: boolean +} + +// @ts-ignore +class IntersectionObserver { + list: ref[] = [] + + constructor (fn: (args: ref[]) => void) { + setTimeout(() => { + fn([{ isIntersecting: true }]) + }, 1000) + } + + observe () {} + unobserve () {} + disconnect () {} +} + +window.IntersectionObserver = IntersectionObserver +global.IntersectionObserver = IntersectionObserver diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/setup.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/setup.ts new file mode 100644 index 0000000000..f5a5c98537 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/setup.ts @@ -0,0 +1,11 @@ +/* eslint-disable no-useless-constructor, @typescript-eslint/no-unused-vars */ +process.env.TARO_ENV = 'h5' +process.env.TARO_PLATFORM = 'web' +process.env.SUPPORT_TARO_POLYFILL = 'disabled' + +// @ts-ignore +globalThis.MutationObserver = class { + constructor (_callback) {} + disconnect () {} + observe (_element, _initObject) {} +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/styleMock.js b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/styleMock.js new file mode 100644 index 0000000000..d1c7435f5e --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/styleMock.js @@ -0,0 +1 @@ +module.exports = 'test-style-stub' diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/swiper/swiper-bundle.esm.js.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/swiper/swiper-bundle.esm.js.ts new file mode 100644 index 0000000000..f8314d4e62 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__mocks__/swiper/swiper-bundle.esm.js.ts @@ -0,0 +1,155 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import { SwiperOptions } from 'swiper' +import { A11yMethods } from 'swiper/types/components/a11y' +import { AutoplayMethods } from 'swiper/types/components/autoplay' +import { ControllerMethods } from 'swiper/types/components/controller' +import { CoverflowEffectMethods } from 'swiper/types/components/effect-coverflow' +import { CubeEffectMethods } from 'swiper/types/components/effect-cube' +import { FadeEffectMethods } from 'swiper/types/components/effect-fade' +import { FlipEffectMethods } from 'swiper/types/components/effect-flip' +import { HashNavigationMethods } from 'swiper/types/components/hash-navigation' +import { HistoryMethods } from 'swiper/types/components/history' +import { KeyboardMethods } from 'swiper/types/components/keyboard' +import { LazyMethods } from 'swiper/types/components/lazy' +import { MousewheelMethods } from 'swiper/types/components/mousewheel' +import { NavigationMethods } from 'swiper/types/components/navigation' +import { PaginationMethods } from 'swiper/types/components/pagination' +import { ParallaxMethods } from 'swiper/types/components/parallax' +import { ScrollbarMethods } from 'swiper/types/components/scrollbar' +import { ThumbsMethods } from 'swiper/types/components/thumbs' +import { VirtualMethods } from 'swiper/types/components/virtual' +import { ZoomMethods } from 'swiper/types/components/zoom' +import { SwiperEvents } from 'swiper/types/swiper-events' + +import type ISwiper from 'swiper' + +export default class Swiper implements ISwiper { + params: SwiperOptions + $el + el: HTMLElement + $wrapperEl + wrapperEl: HTMLElement + slides + width: number + height: number + translate: number + progress: number + activeIndex: number + realIndex: number + previousIndex: number + isBeginning: boolean + isEnd: boolean + animating: boolean + touches: { startX: number, startY: number, currentX: number, currentY: number, diff: number } + clickedIndex: number + clickedSlide: HTMLElement + allowSlideNext: boolean + allowSlidePrev: boolean + allowTouchMove: boolean + rtlTranslate: boolean + disable (): void {} + + enable (): void {} + + setProgress (progress: number, speed?: number | undefined): void {} + + slideNext (speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slidePrev (speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slideTo (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slideToLoop (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slideReset (speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + slideToClosest (speed?: number | undefined, runCallbacks?: boolean | undefined): void {} + + updateAutoHeight (speed?: number | undefined): void {} + + update (): void {} + + updateSize (): void {} + + updateSlides (): void {} + + updateProgress (): void {} + + updateSlidesClasses (): void {} + + changeDirection (direction?: 'horizontal' | 'vertical' | undefined, needUpdate?: boolean | undefined): void {} + + detachEvents (): void {} + + attachEvents (): void {} + + init (): void {} + + destroy (deleteInstance?: boolean | undefined, cleanStyles?: boolean | undefined): void {} + + appendSlide (slides: string | HTMLElement | string[] | HTMLElement[]): void {} + + prependSlide (slides: string | HTMLElement | string[] | HTMLElement[]): void {} + + addSlide (index: number, slides: string | HTMLElement | string[] | HTMLElement[]): void {} + + removeSlide (slideIndex: number | number[]): void {} + + removeAllSlides (): void {} + + setTranslate (translate: any): void {} + + getTranslate () {} + + translateTo (translate: number, speed: number, runCallbacks?: boolean | undefined, translateBounds?: boolean | undefined) {} + + unsetGrabCursor (): void {} + + setGrabCursor (): void {} + + onAny (handler: (eventName: string, ...args: any[]) => void): void {} + + offAny (handler: (eventName: string, ...args: any[]) => void): void {} + + isHorizontal (): boolean { + return false + } + + getBreakpoint (breakpoints: { [width: number]: SwiperOptions,[ratio: string]: SwiperOptions } | undefined): string { + return '' + } + + setBreakpoint (): void {} + + currentBreakpoint: any + destroyed: boolean + modules: any[] + a11y: A11yMethods + autoplay: AutoplayMethods + controller: ControllerMethods + coverflowEffect: CoverflowEffectMethods + cubeEffect: CubeEffectMethods + fadeEffect: FadeEffectMethods + flipEffect: FlipEffectMethods + hashNavigation: HashNavigationMethods + history: HistoryMethods + keyboard: KeyboardMethods + lazy: LazyMethods + mousewheel: MousewheelMethods + navigation: NavigationMethods + pagination: PaginationMethods + parallax: ParallaxMethods + scrollbar: ScrollbarMethods + thumbs: ThumbsMethods + virtual: VirtualMethods + zoom: ZoomMethods + on (event: E, handler: SwiperEvents[E]): void {} + + once (event: E, handler: SwiperEvents[E]): void {} + + off (event: E, handler: SwiperEvents[E]): void; + off (event: E): void; + off (event: unknown, handler?: unknown): void {} + + emit (event: E, ...args: any[]): void {} +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/__snapshots__/video.spec.tsx.snap b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/__snapshots__/video.spec.tsx.snap new file mode 100644 index 0000000000..a14b5137c8 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/__snapshots__/video.spec.tsx.snap @@ -0,0 +1,329 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Video danmu 1`] = ` + + + +
+
+

+
+ +
+ +
+
+ 音量 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`Video props 1`] = ` + + + +
+
+

+
+ +
+ +
+
+ 音量 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`Video should be controlled by bar 1`] = ` + + + +
+
+

+
+ +
+ +
+
+ 音量 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`Video should pause 1`] = ` + + + +
+
+

+
+ +
+ +
+
+ 音量 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`Video should play 1`] = ` + + + +
+
+

+
+ +
+ +
+
+ 音量 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`Video should seek and stop 1`] = ` + + + +
+
+

+
+ +
+ +
+
+ 音量 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`Video should set initial time 1`] = ` + + + +
+
+

+
+ +
+ +
+
+ 音量 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`Video should toggle full screen 1`] = ` + + + +
+
+

+
+ +
+ +
+
+ 音量 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/tsconfig.json b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/tsconfig.json new file mode 100644 index 0000000000..2367709a16 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "allowJs": true, + "jsx": "react", + "target": "ES6" + }, + "include": ["."] +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/utils.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/utils.ts new file mode 100644 index 0000000000..f60b80e8f1 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/utils.ts @@ -0,0 +1,59 @@ +import { AnyHTMLElement } from '@stencil/core/internal' + +export const delay = (ms = 500) => { + return new Promise((resolve) => { + setTimeout(() => { + resolve() + }, ms) + }) +} + +export function toCamelCase (s: string) { + let camel = '' + let nextCap = false + for (let i = 0; i < s.length; i++) { + if (s[i] !== '-') { + camel += nextCap ? s[i].toUpperCase() : s[i] + nextCap = false + } else { + nextCap = true + } + } + return camel +} + +export function capitalize (s: string) { + return s.charAt(0).toUpperCase() + s.slice(1) +} + +export function printUnimplementedWarning (node?: Node) { + const name = node?.nodeName.slice(5).replace('-CORE', '').toLowerCase() || 'unknown' + return `H5 暂不支持 ${capitalize(toCamelCase(name))} 组件！` +} + +export function parsePx2Number (px: string) { + return Number(px.replace('px', '')) +} + +export async function getBoundingClientRect (el: AnyHTMLElement): Promise { + const style = await el.getComputedStyle() + const rect = { + top: parsePx2Number(style.top), + left: parsePx2Number(style.left), + right: parsePx2Number(style.right), + bottom: parsePx2Number(style.bottom), + height: parsePx2Number(style.height), + width: parsePx2Number(style.width), + x: parsePx2Number(style.x), + y: parsePx2Number(style.y), + } + return { + ...rect, + toJSON: () => rect + } +} + +export function parseStyle2String (...styles: Record[]) { + const style = Object.assign({}, ...styles) + return Object.entries(style).map(([key, value]) => `${key}: ${value};`).join('') +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/video.spec.tsx b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/video.spec.tsx new file mode 100644 index 0000000000..6cf358ae66 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/__tests__/video.spec.tsx @@ -0,0 +1,287 @@ +import { h } from '@stencil/core' +import { AnyHTMLElement } from '@stencil/core/internal' +import { newSpecPage, SpecPage } from '@stencil/core/testing' + +import { Video } from '../src/components/video/video' + +describe('Video', () => { + const videoUrl = 'http://storage.jd.com/cjj-pub-images/bear.mp4' + let page: SpecPage + + it('props', async () => { + // TODO + page = await newSpecPage({ + components: [Video], + template: () => (), + }) + const video = page.root?.querySelector('video.taro-video-video') + // const centerPlayBtnCls = '.taro-video-cover-play-button' + // const controlsCls = '.taro-video-controls' + + // expect(video).toBeInstanceOf(HTMLDivElement) + expect(video?.style['object-fit']).toEqual('contain') + // expect(video?.getAttribute('autoplay')).toEqual(false) + // expect(video?.getAttribute('loop')).toEqual(false) + // expect(video?.muted === false) // .toEqual(false) + // expect(video?.poster === '') // .toEqual('') + // console.log('video?.poster', video?.poster, '-', typeof video?.poster) + // expect(page.root?.querySelector(controlsCls) === null) + // // expect(page.root?.querySelector(centerPlayBtnCls)).toBeInstanceOf(HTMLDivElement) + + // const objectFit = 'fill' + // const poster = 'http://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg' + + // page.root?.setAttribute('object-fit', objectFit) + // page.root?.setAttribute('autoplay', 'true') + // page.root?.setAttribute('loop', 'true') + // page.root?.setAttribute('muted', 'true') + // page.root?.setAttribute('control', 'true') + // page.root?.setAttribute('poster', poster) + // page.root?.setAttribute('showCenterPlayBtn', 'false') + // await page.waitForChanges() + + // console.log('video?.autoplay', video?.autoplay) + // expect(video?.style['object-fit']).toEqual(objectFit) + // expect(video?.autoplay).toEqual(true) + // expect(video?.loop).toEqual(true) + // expect(video?.muted).toEqual(true) + // expect(video?.poster).toEqual('true') + // expect(page.root?.querySelector(centerPlayBtnCls)).toBeNull() + + // page.root?.setAttribute('controls', 'true') + + // // expect(page.root?.querySelector(controlsCls)).toBeInstanceOf(HTMLDivElement) + // expect(video?.poster).toBe(poster) + + expect(page.root).toMatchSnapshot() + }) + + it('should set initial time', async () => { + const initialTime = 10 + page = await newSpecPage({ + components: [Video], + template: () => (), + }) + const video = page.root?.querySelector('video.taro-video-video') + + expect(video?.currentTime).toEqual(initialTime) + + expect(page.root).toMatchSnapshot() + }) + + it('should toggle full screen', async () => { + // TODO + const onFullScreenChange = jest.fn() + page = await newSpecPage({ + components: [Video], + template: () => (), + }) + // const wrapper = await mount(app, scratch) + // const { node } = wrapper + // const video = wrapper.find('video.taro-video-video') + // const fullscreenBtn = wrapper.find('.taro-video-fullscreen') + // video.requestFullscreen = sinon.fake() + + // expect(fullscreenBtn.classList.contains('taro-nodevideo-type-fullscreen') === false) + // fullscreenBtn.click() + // await waitForChange(node) + + // expect(fullscreenBtn.classList.contains('taro-video-type-fullscreen') === true) + // expect(onFullScreenChange.calledOnceWith({ + // fullScreen: true, + // direction: 'vertical' + // })) + // expect(video.requestFullscreen.calledOnceWith({ + // navigationUI: 'auto' + // })) + + // fullscreenBtn.click() + // await waitForChange(node) + + // expect(fullscreenBtn.classList.contains('taro-video-type-fullscreen') === false) + // expect(onFullScreenChange.callCount === 2) + // expect(onFullScreenChange.calledWith({ + // fullScreen: false, + // direction: 'vertical' + // })) + // expect(video.requestFullscreen.callCount === 1) + + expect(page.root).toMatchSnapshot() + }) + + it('should play', async () => { + page = await newSpecPage({ + components: [Video], + template: () => (), + }) + const video = page.root?.querySelector('video.taro-video-video') + if (video) { + const play = jest.fn() + video.play = play + await video?.play() + await page.waitForChanges() + + expect(play.mock.calls.length).toBe(1) + + expect(page.root).toMatchSnapshot() + } + }) + + it('should pause', async () => { + page = await newSpecPage({ + components: [Video], + template: () => (), + }) + const video = page.root?.querySelector('video.taro-video-video') + if (video) { + const pause = jest.fn() + video.pause = pause + await video?.pause() + await page.waitForChanges() + + expect(pause.mock.calls.length).toBe(1) + + expect(page.root).toMatchSnapshot() + } + }) + + it('should seek and stop', async () => { + // TODO + page = await newSpecPage({ + components: [Video], + template: () => (), + }) + // const wrapper = await mount(app, scratch) + // const video = wrapper.find('video.taro-video-video') + // ref.current.seek(233) + // const { node } = wrapper + // await waitForChange(node) + + // expect(video.currentTime === 233) + // video.pause = sinon.fake() + // ref.current.stop() + // await waitForChange(node) + + // expect(video.currentTime === 0) + // expect(video.pause.callCount === 1) + + expect(page.root).toMatchSnapshot() + }) + + it('should be controlled by bar', async () => { + // TODO + page = await newSpecPage({ + components: [Video], + template: () => (), + }) + // const wrapper = await mount(app, scratch) + // const controlBar = wrapper.find('.taro-video-controls') + // let currentTime = wrapper.find('.taro-video-current-time') + // let progress = wrapper.find('.taro-video-progress-container') + // let duration = wrapper.find('.taro-video-duration') + // let playBtn = wrapper.find('.taro-video-control-button-play') + // let muteBtn = wrapper.find('.taro-video-mute') + // let danmuBtn = wrapper.find('.taro-video-danmu-button') + // let fullscreenBtn = wrapper.find('.taro-video-fullscreen') + + // expect(currentTime instanceof HTMLDivElement) + // expect(progress instanceof HTMLDivElement) + // expect(duration instanceof HTMLDivElement) + // expect(fullscreenBtn instanceof HTMLDivElement) + // expect(playBtn instanceof HTMLDivElement) + // expect(muteBtn === null) + // expect(danmuBtn === null) + + // const video = wrapper.find('video.taro-video-video') + // video.play = sinon.fake() + // const { node } = wrapper + // playBtn.click() + // await waitForChange(node) + // expect(video.play.callCount === 1) + + // await wrapper.setProps({ + // showProgress: false, + // showFullscreenBtn: false, + // showPlayBtn: false, + // showMuteBtn: true, + // danmuBtn: true + // }) + // await waitForChange(controlBar) + + // currentTime = wrapper.find('.taro-video-current-time') + // progress = wrapper.find('.taro-video-progress-container') + // duration = wrapper.find('.taro-video-duration') + // playBtn = wrapper.find('.taro-video-control-button-play') + // muteBtn = wrapper.find('.taro-video-mute') + // danmuBtn = wrapper.find('.taro-video-danmu-button') + // fullscreenBtn = wrapper.find('.taro-video-fullscreen') + + // expect(currentTime === null) + // expect(progress === null) + // expect(duration === null) + // expect(fullscreenBtn === null) + // expect(playBtn === null) + // expect(muteBtn instanceof HTMLDivElement) + // expect(danmuBtn instanceof HTMLDivElement) + + expect(page.root).toMatchSnapshot() + }) + + it('danmu', async () => { + // TODO + const danmuList = [ + { + text: '第 1s 出现的弹幕', + color: 'rgb(255, 0, 0)', + time: 1 + }, + { + text: '第 3s 出现的弹幕', + color: 'rgb(255, 0, 255)', + time: 3 + } + ] + page = await newSpecPage({ + components: [Video], + template: () => (), + }) + // const wrapper = await mount(app, scratch) + // const danmu = wrapper.find('taro-video-danmu') + + // danmu.tick(2) + // await waitForChange(danmu) + + // expect(danmu.children.length === 1) + // expect(danmu.children[0].textContent === danmuList[0].text) + // expect(danmu.children[0].style.color === danmuList[0].color) + + // danmu.tick(4) + // await waitForChange(danmu) + + // expect(danmu.children.length === 2) + // expect(danmu.children[1].textContent === danmuList[1].text) + // expect(danmu.children[1].style.color === danmuList[1].color) + + expect(page.root).toMatchSnapshot() + }) +}) diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/babel.config.json b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/babel.config.json new file mode 100644 index 0000000000..0a5190c932 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/babel.config.json @@ -0,0 +1,5 @@ +{ + "presets": ["@babel/preset-react", "power-assert"], + "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread"], + "babelrcRoots": ["./h5/*"] +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/index.html b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/index.html new file mode 100644 index 0000000000..f8448be348 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/index.html @@ -0,0 +1,12 @@ + + + + + Nerv App + + + + +
+ + diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/mini/index.js b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/mini/index.js new file mode 100644 index 0000000000..0dc636d46c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/mini/index.js @@ -0,0 +1 @@ +export const Video = 'video' diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/package.json b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/package.json new file mode 100644 index 0000000000..bf3329e40c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/package.json @@ -0,0 +1,98 @@ +{ + "name": "@tarojs/harmony-components", + "version": "3.6.23", + "description": "Taro 组件库", + "browser": "dist/index.js", + "main:h5": "dist/index.js", + "main": "dist/index.js", + "module": "dist/index.cjs.js", + "types": "types/index.d.ts", + "sideEffects": [ + "*.scss", + "*.css" + ], + "files": [ + "dist", + "lib", + "loader", + "mini", + "types", + "virtual-list", + "vue3.d.ts" + ], + "collection": "dist/collection/collection-manifest.json", + "collection:main": "dist/collection/index.js", + "scripts": { + "prepare": "run-p generate:*", + "prebuild": "run-p generate:*", + "build": "cross-env NODE_ENV=production run-s build:components build:library", + "build:components": "stencil build", + "build:library": "pnpm --filter @tarojs/harmony-components-library-react --filter @tarojs/harmony-components-library-vue2 --filter @tarojs/harmony-components-library-vue3 run build:ci", + "dev:components": "cross-env NODE_ENV=development pnpm run build:components --watch", + "dev:library-react": "cross-env NODE_ENV=development pnpm --filter harmony-components-library-react run dev", + "dev:library-vue2": "cross-env NODE_ENV=development pnpm --filter harmony-components-library-vue2 run dev", + "dev:library-vue3": "cross-env NODE_ENV=development pnpm --filter harmony-components-library-vue3 run dev", + "generate:lib": "mkdirp lib", + "generate:stencil-config": "esbuild ./scripts/stencil/stencil.config.ts --external:lightningcss --bundle --platform=node --outfile=stencil.config.js", + "sync:types": "pnpm run tsx --files scripts/json-schema-to-types.ts", + "test": "cross-env NODE_ENV=test stencil test --spec --e2e", + "test:ci": "pnpm test -- --ci -i --coverage --silent --no-build", + "test:coverage": "pnpm test -- --ci --screenshot --coverage", + "test:watch": "pnpm test -- --screenshot --watch", + "tsx": "ts-node --skipIgnore" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/NervJS/taro.git" + }, + "keywords": [], + "author": "", + "license": "MIT", + "dependencies": { + "@stencil/core": "^2.22.2", + "@tarojs/components-advanced": "workspace:*", + "@tarojs/taro": "workspace:*", + "classnames": "^2.2.5", + "hls.js": "^1.1.5", + "resolve-pathname": "^3.0.0", + "tslib": "^2.6.2", + "swiper": "6.8.0" + }, + "devDependencies": { + "@babel/generator": "^7.20.0", + "@babel/parser": "^7.20.0", + "@babel/traverse": "^7.20.0", + "@babel/types": "^7.20.0", + "@stencil/react-output-target": "0.4.0", + "@stencil/vue-output-target": "0.7.0", + "@types/jest": "^27.4.1", + "@types/node": "^14.14.31", + "change-case": "^4.1.2", + "csstype": "^3.1.1", + "esbuild": "~0.19.5", + "jquery": "^3.4.1", + "lightningcss": "^1.22.1", + "lodash": "^4.17.21", + "miniapp-types": "1.6.0", + "puppeteer": "^19.2.0", + "rollup": "^3.8.1", + "rollup-plugin-node-externals": "^5.0.0", + "sass": "^1.58.3", + "stencil-vue2-output-target": "0.0.4", + "ts-node": "^10.9.1", + "tsconfig-paths": "^3.14.1", + "typescript": "^4.7.4", + "mkdirp": "^1.0.4" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-native": { + "optional": true + }, + "vue": { + "optional": true + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/screenshot/.gitignore b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/screenshot/.gitignore new file mode 100644 index 0000000000..563eaa94e4 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/screenshot/.gitignore @@ -0,0 +1,3 @@ +images +builds +compare.html \ No newline at end of file diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/checked-components.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/checked-components.ts new file mode 100644 index 0000000000..1a46c23ed8 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/checked-components.ts @@ -0,0 +1,36 @@ +import { pascalCase } from 'change-case' + +import { MINI_APP_TYPES } from './constants' +import { getTypesList } from './utils' + +/** + * 寻找小程序端存在，但未在 harmony-components 中实现的组件 + * + * Note: 缺失组件可以新增 types/[ComponentName].d.ts 文件，然后通过 json-schema 来生成对应的组件文件 + * ```ts + * import { ComponentType } from 'react' + * import { StandardProps } from './common' + * interface [ComponentName]Props extends StandardProps {} + * declare const [ComponentName]: ComponentType<[ComponentName]Props> + * export { [ComponentName], [ComponentName]Props } + * ``` + */ +export function findMissingComponents () { + const existComponents = ['Index', ...getTypesList().map(fileName => { + return fileName.replace(/\.d\.ts$/, '') + })] + const missingComponents: Record = {} + MINI_APP_TYPES.forEach((type) => { + const typeComponents = getTypesList(type) + typeComponents.forEach(typePath => { + const componentName = pascalCase(typePath.replace(/\.d\.ts$/, '')) + if (!existComponents.includes(componentName)) { + missingComponents[componentName] ||= [] + missingComponents[componentName].push(type) + } + }) + }) + return missingComponents +} + +console.log('Find Missing Components:', findMissingComponents()) diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/constants.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/constants.ts new file mode 100644 index 0000000000..a64b391426 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/constants.ts @@ -0,0 +1,4 @@ +import path from 'path' + +export const MINI_APP_TYPES = ['weapp', 'alipay', 'swan', 'tt', 'qq', 'jd'] as const +export const TYPES_DIR = path.join(process.cwd(), 'types') diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/json-schema-to-types.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/json-schema-to-types.ts new file mode 100644 index 0000000000..573f214415 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/json-schema-to-types.ts @@ -0,0 +1,300 @@ +import generator from '@babel/generator' +import * as parser from '@babel/parser' +import traverse from '@babel/traverse' +import * as t from '@babel/types' +import { fs } from '@tarojs/helper' +import { camelCase, paramCase } from 'change-case' +import { flattenDeep, isEmpty, isNil, toArray, xorWith } from 'lodash' +import { format as prettify } from 'prettier' + +import { MINI_APP_TYPES } from './constants' +import { camelCaseEnhance, getTypeFilePath, getTypesList } from './utils' + +const OMIT_PROPS = ['generic:simple-component', 'style', 'class'] +const catchStart = 'catch' +const eventStart = 'on' + +type AST = parser.ParseResult +type PROP_MAP = Partial> +type PROP = Record + +class GenerateTypes { + jsonSchemas: Record = {} + componentName: string + + constructor (componentName: string) { + this.componentName = componentName + + MINI_APP_TYPES.forEach((type) => { + try { + const json = require(`miniapp-types/dist/schema/${type}/${ + componentName === 'AD' ? 'ad' : paramCase(componentName) + }.json`) + + if (!json) { + return + } + if (!this.jsonSchemas[componentName]) { + this.jsonSchemas[componentName] = {} + } + this.jsonSchemas[componentName][type] = json + } catch (error) { + // console.log(error) + if (!this.jsonSchemas[componentName]) { + this.jsonSchemas[componentName] = {} + } + } + }) + } + + // 获取不存在的属性 + getMissingProps (props: PROP_MAP) { + const obj: PROP = {} + const jsonSchema = this.jsonSchemas[this.componentName] + if (!jsonSchema) { + return obj + } + Object.keys(this.jsonSchemas[this.componentName]).forEach((key) => { + const filteredList = xorWith(props[key], Object.keys(this.jsonSchemas[this.componentName][key].properties)) + if (filteredList.length > 0) { + obj[key] = filteredList.map((item) => + item.match(/^bind/) ? camelCase(item.replace(/^bind/, eventStart), { transform: camelCaseEnhance }) : item + ) + } + }) + + return obj + } + + // 转换不存在的属性，便于添加到已有的类型声明中 + convertProps (props: PROP = {}) { + const array = Array.from(new Set(flattenDeep(toArray(props)))) + const reverseProps: PROP = {} + array.forEach((prop) => { + reverseProps[prop] = Object.keys(props).filter((key) => props[key].includes(prop)) + }) + return reverseProps + } + + updateComment (ast: AST) { + const componentName = this.componentName + const jsonSchemas = this.jsonSchemas[this.componentName] + const existProps: PROP_MAP = {} + + traverse(ast, { + TSInterfaceDeclaration (astPath) { + if (astPath.node.id.name !== `${componentName}Props`) { + return + } + astPath.traverse({ + TSPropertySignature (astPath) { + const { name } = astPath.node.key as any + if (!name) { + return + } + const supportedPlatforms: string[] = [] + + const convertedName = name.match(/^on/) + ? name.replace(/^on/, 'bind') + : paramCase(name) + MINI_APP_TYPES.forEach((type) => { + if (jsonSchemas[type]?.properties[name]) { + if (isEmpty(existProps[type])) { + existProps[type] = [name] + } + existProps[type]?.push(name) + supportedPlatforms.push(type) + } + + if (name !== convertedName && jsonSchemas[type]?.properties[convertedName]) { + if (isEmpty(existProps[type])) { + existProps[type] = [convertedName] + } + existProps[type]?.push(convertedName) + supportedPlatforms.push(type) + } + }) + if (isEmpty(astPath.node.leadingComments) || !astPath.node.leadingComments?.[0]?.value) { + return + } + const value = astPath.node.leadingComments?.[0]?.value || '' + const preSupportedPlatforms = value.match(/@supported\s+(.+)/)?.[1].toLowerCase().split(/\s?[,，]\s?/) || [] + const isUnique = value.indexOf('@unique') !== -1 + const isIgnore = value.indexOf('@ignore') !== -1 + + // 保留内置类型 + const inherentTypes = ['global', 'h5', 'rn', 'quickapp', 'harmony', 'harmony_hybrid'] + inherentTypes.forEach((type) => { + if (preSupportedPlatforms?.includes(type)) { + supportedPlatforms.push(type) + } + }) + + // 保留 Taro 支持或平台独有特性 + if (isUnique || isIgnore) { + supportedPlatforms.push(...preSupportedPlatforms) + } + + if (isEmpty(supportedPlatforms) && !(isUnique || isIgnore)) { + astPath.remove() + } else { + astPath.node.leadingComments[0].value = value.replace( + /@supported .*?\n/, + `@supported ${supportedPlatforms.join(', ')}\n` + ) + } + }, + }) + }, + }) + return { + existProps, + ast, + } + } + + // 添加不存在的属性 + addProps (ast: AST, props: PROP = {}) { + const componentName = this.componentName + const jsonSchemas = this.jsonSchemas[this.componentName] + traverse(ast, { + TSInterfaceDeclaration (astPath) { + if (astPath.node.id.name !== `${componentName}Props`) { + return + } + const addedProps: string[] = [] + astPath.traverse({ + TSInterfaceBody (astPath) { + Object.keys(props).forEach((prop) => { + if (OMIT_PROPS.includes(prop)) { + return + } + const emptySignature = { type: 'TSPropertySignature', key: t.identifier(''), leadingComments: [], kind: 'get' } as t.TSPropertySignature + const list = astPath.node.body as t.TSPropertySignature[] + const node = t.cloneNode(list[0] || emptySignature) + node.key = t.identifier(camelCase(prop, { transform: camelCaseEnhance })) + const platform = props[prop][0] + const json = jsonSchemas[platform] + const propSchema = json.properties[prop] || json.properties[prop.replace(/^on/, 'bind')] + const { type, tsType, enum: enumArray } = propSchema + let value + if (type === 'string') { + if (!enumArray) { + value = t.tsTypeReference(t.identifier(type)) + } else { + value = t.tsUnionType(enumArray.map((item) => t.tsLiteralType(t.stringLiteral(item)))) + } + } else if (['boolean', 'number'].includes(type)) { + value = t.tsTypeReference(t.identifier(type)) + } else if (['array'].includes(type)) { + value = t.tsTypeReference(t.identifier('any[]')) + } else if (type instanceof Array) { + value = t.tsTypeReference(t.identifier(type.join('|'))) + } else if (tsType === '() => void') { + value = t.tsTypeReference(t.identifier('CommonEventFunction')) + } else { + value = t.tsTypeReference(t.identifier('string')) + } + node.typeAnnotation = t.tsTypeAnnotation(value) + node.optional = !json.required?.[prop] || !json.required?.[prop.replace(/^on/, 'bind')] + + if (node.leadingComments) { + let commentValue = `* ${propSchema.description?.replace(/\n/g, '\n * ')} \n` + commentValue += `* @supported ${props[prop].join(', ')}\n` + const { defaultValue, type } = propSchema + if (!isNil(defaultValue)) { + if (defaultValue instanceof Array) { + commentValue += `* @default ${defaultValue.join(',')}\n` + } else if (typeof defaultValue === 'string' && !defaultValue.startsWith('"') && !['none', '无'].includes(defaultValue) && type === 'string') { + commentValue += `* @default "${propSchema.defaultValue.replace(/(^')|('$)/ig, '')}"\n` + } else { + commentValue += `* @default ${defaultValue}\n` + } + } + + // @ts-ignore + node.leadingComments[0] ||= { type: 'CommentBlock' } + node.leadingComments[0].value = commentValue + } + list.push(node) + addedProps.push(prop) + }) + }, + }) + }, + }) + } + + formatJSDoc (ast: AST) { + traverse(ast, { + enter (astPath) { + if (astPath.node.trailingComments) { + astPath.node.trailingComments = [] + } + }, + }) + } + + // 属性排序 + sortProps (ast: AST) { + const componentName = this.componentName + traverse(ast, { + TSInterfaceDeclaration (astPath) { + if (astPath.node.id.name !== `${componentName}Props`) { + return + } + astPath.traverse({ + TSInterfaceBody (astPath) { + astPath.node.body.sort((a: any, b: any) => { + const aName = a.key?.name + const bName = b.key?.name + + if (aName.startsWith(catchStart) && !bName.startsWith(catchStart)) return 1 + if (bName.startsWith(catchStart) && !aName.startsWith(catchStart)) return -1 + + if (aName.startsWith(eventStart) && !bName.startsWith(eventStart)) return 1 + if (bName.startsWith(eventStart) && !aName.startsWith(eventStart)) return -1 + + return 0 + }) + }, + }) + }, + }) + + } + + exec () { + const filePath = getTypeFilePath(this.componentName) + const codeStr = fs.readFileSync(filePath, 'utf8') + const ast = parser.parse(codeStr, { + sourceType: 'module', + strictMode: false, + plugins: ['typescript'], + }) + const { existProps } = this.updateComment(ast) + const missingProps = this.getMissingProps(existProps) + const props = this.convertProps(missingProps) + this.addProps(ast, props) + this.sortProps(ast) + this.formatJSDoc(ast) + const result = generator(ast) + const code = prettify(result.code, { + parser: 'typescript', semi: false, + singleQuote: true, + printWidth: 120 + }) + fs.writeFileSync(filePath, code) + } +} + +getTypesList().forEach((fileName) => { + const componentName = fileName.replace(/\.d\.ts$/, '') + const generateTypes = new GenerateTypes(componentName) + if (isEmpty(generateTypes.jsonSchemas[componentName])) { + return + } + generateTypes.exec() +}) + +export default GenerateTypes diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/output-target/generate-vue2-component.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/output-target/generate-vue2-component.ts new file mode 100644 index 0000000000..bcd8392ec0 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/output-target/generate-vue2-component.ts @@ -0,0 +1,49 @@ +import { dashToPascalCase } from '@stencil/vue-output-target/dist/utils' + +import type { ComponentCompilerMeta } from '@stencil/core/internal' +import type { ComponentModelConfig } from '@stencil/vue-output-target/dist/types' + +export const createVue2ComponentDefinition = ( + [importCompsTypes, importTypes]: [string, string], + componentModelConfig?: ComponentModelConfig[], + includeCustomElement = false +) => (cmpMeta: Pick) => { + const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName) + const importAs = includeCustomElement ? 'define' + tagNameAsPascal : 'undefined' + + let props: string[] = [] + let methods: string[] = [] + + if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) { + props = cmpMeta.properties.map((prop) => ` ${prop.name}: {} as PropOptions<${importTypes}.${tagNameAsPascal}['${prop.name}']>`) + } + + if (Array.isArray(cmpMeta.methods) && cmpMeta.methods.length > 0) { + methods = cmpMeta.methods.map((method) => ` ${method.name}: createCommonMethod('${method.name}') as ${importCompsTypes}.${tagNameAsPascal}['${method.name}']`) + } + + let templateString = `\nexport const ${tagNameAsPascal} = /*@__PURE__*/ Vue.extend({` + + const findModel = + componentModelConfig && componentModelConfig.find((config) => config.elements.includes(cmpMeta.tagName)) + + if (props.length > 0) { + templateString += `\n props: {${props.length > 0 ? `\n ${props.join(',\n ')}\n ` : ''}},` + } else if (findModel) { + templateString += `\n props: {},` + } + + if (findModel) { + templateString += `\n model: { prop: '${findModel.targetAttr}' , event: '${findModel.event}' },` + } + + if (methods.length > 0) { + templateString += `\n methods: {${methods.length > 0 ? `\n ${methods.join(',\n ')}\n ` : ''}},` + } + + templateString += `\n render: createCommonRender('${cmpMeta.tagName}', [${cmpMeta.events.map((e) => `'${e.name}'`).join(', ')}], ${importAs}),` + templateString += `\n}` + templateString += `);\n` + + return templateString +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/output-target/index.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/output-target/index.ts new file mode 100644 index 0000000000..da593f37a8 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/output-target/index.ts @@ -0,0 +1,114 @@ +import { generateProxies as generateReactProxies } from '@stencil/react-output-target/dist/output-react' +import { normalizeOutputTarget as normalizeReactOutputTarget } from '@stencil/react-output-target/dist/plugin' +import { generateProxies as generateVue3Proxies } from '@stencil/vue-output-target/dist/output-vue' +import { normalizeOutputTarget as normalizeVueOutputTarget } from '@stencil/vue-output-target/dist/plugin' + +import { generateVue2Proxies } from './output-vue2' + +import type { CompilerCtx, ComponentCompilerMeta, Config, OutputTargetCustom } from '@stencil/core/internal' +import type { OutputTargetReact } from '@stencil/react-output-target' +import type { OutputTargetVue } from '@stencil/vue-output-target' + +export function sortBy (array: ReadonlyArray, prop: (item: T) => string): ReadonlyArray { + return array.slice().sort((a, b) => { + const nameA = prop(a) + const nameB = prop(b) + if (nameA < nameB) return -1 + if (nameA > nameB) return 1 + return 0 + }) +} + +function getFilteredComponents ( + excludeComponents: ReadonlyArray = [], + cmpList: ReadonlyArray +): ReadonlyArray { + return sortBy(cmpList, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal) +} + +export async function reactProxyOutput ( + config: Config, + compilerCtx: CompilerCtx, + outputTarget: OutputTargetReact, + components: ReadonlyArray +): Promise { + const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components) + const rootDir = config.rootDir + const pkgData = { types: 'dist/index.d.ts' } + const finalText = generateReactProxies(config, filteredComponents, pkgData, outputTarget, rootDir!) + await compilerCtx.fs.writeFile(outputTarget.proxiesFile, finalText) + // await copyResources(config, outputTarget) +} + +export async function vue2ProxyOutput ( + config: Config, + compilerCtx: CompilerCtx, + outputTarget: OutputTargetVue, + components: ReadonlyArray +) { + const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components) as ComponentCompilerMeta[] + const rootDir = config.rootDir as string + const pkgData = { types: 'dist/index.d.ts' } + + const finalText = generateVue2Proxies(config, filteredComponents, pkgData, outputTarget, rootDir) + await compilerCtx.fs.writeFile(outputTarget.proxiesFile, finalText) + // await copyResources(config, outputTarget) +} + +export async function vue3ProxyOutput ( + config: Config, + compilerCtx: CompilerCtx, + outputTarget: OutputTargetVue, + components: ReadonlyArray +) { + const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components) as ComponentCompilerMeta[] + const rootDir = config.rootDir as string + const pkgData = { types: 'dist/index.d.ts' } + + const finalText = generateVue3Proxies(config, filteredComponents, pkgData, outputTarget, rootDir) + await compilerCtx.fs.writeFile(outputTarget.proxiesFile, finalText) + // await copyResources(config, outputTarget) +} + +export const reactOutputTarget = (outputTarget: OutputTargetReact): OutputTargetCustom => ({ + type: 'custom', + name: 'react-library', + validate (config) { + return normalizeReactOutputTarget(config, outputTarget) + }, + async generator (config, compilerCtx, buildCtx) { + const timeSpan = buildCtx.createTimeSpan(`generate react started`, true) + await reactProxyOutput(config, compilerCtx, outputTarget, buildCtx.components) + timeSpan.finish(`generate react finished`) + }, +}) + +export const vue2OutputTarget = (outputTarget: OutputTargetVue): OutputTargetCustom => ({ + type: 'custom', + name: 'vue2-library', + validate (config) { + return normalizeVueOutputTarget(config, outputTarget) + }, + async generator (config, compilerCtx, buildCtx) { + const timeSpan = buildCtx.createTimeSpan(`generate vue2 started`, true) + + await vue2ProxyOutput(config, compilerCtx, outputTarget, buildCtx.components) + + timeSpan.finish(`generate vue2 finished`) + }, +}) + +export const vue3OutputTarget = (outputTarget: OutputTargetVue): OutputTargetCustom => ({ + type: 'custom', + name: 'vue3-library', + validate (config) { + return normalizeVueOutputTarget(config, outputTarget) + }, + async generator (config, compilerCtx, buildCtx) { + const timeSpan = buildCtx.createTimeSpan(`generate vue3 started`, true) + + await vue3ProxyOutput(config, compilerCtx, outputTarget, buildCtx.components) + + timeSpan.finish(`generate vue3 finished`) + }, +}) diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/output-target/output-vue2.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/output-target/output-vue2.ts new file mode 100644 index 0000000000..feed9d7fa2 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/output-target/output-vue2.ts @@ -0,0 +1,80 @@ +import { GENERATED_DTS, getPathToCorePackageLoader } from '@stencil/vue-output-target/dist/output-vue' +import { dashToPascalCase, normalizePath, relativeImport } from '@stencil/vue-output-target/dist/utils' +import path from 'path' + +import { createVue2ComponentDefinition } from './generate-vue2-component' + +import type { ComponentCompilerMeta, Config } from '@stencil/core/internal' +import type { OutputTargetVue, PackageJSON } from '@stencil/vue-output-target/dist/types' + +const IMPORT_TYPES = 'JSX' +const IMPORT_COMPS_TYPES = 'Components' +const REGISTER_CUSTOM_ELEMENTS = 'defineCustomElements' +const APPLY_POLYFILLS = 'applyPolyfills' + +export function generateVue2Proxies ( + config: Config, + components: ComponentCompilerMeta[], + pkgData: PackageJSON, + outputTarget: OutputTargetVue, + rootDir: string +) { + const distTypesDir = path.dirname(pkgData.types) + const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS) + const componentsTypeFile = relativeImport(outputTarget.proxiesFile, dtsFilePath, '.d.ts') + const pathToCorePackageLoader = getPathToCorePackageLoader(config, outputTarget) + + const imports = `/* eslint-disable */ +/* tslint:disable */ +/* auto-generated vue proxies */ +import Vue, { PropOptions } from 'vue'; +import { createCommonRender, createCommonMethod } from './vue-component-lib/utils';\n` + + const generateTypeImports = () => { + if (outputTarget.componentCorePackage !== undefined) { + const dirPath = outputTarget.includeImportCustomElements + ? `/${outputTarget.customElementsDir || 'components'}` + : '' + return `import type { ${IMPORT_COMPS_TYPES}, ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n` + } + + return `import type { ${IMPORT_COMPS_TYPES}, ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n` + } + + const typeImports = generateTypeImports() + + let sourceImports = '' + let registerCustomElements = '' + + if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) { + const cmpImports = components.map((component) => { + const pascalImport = dashToPascalCase(component.tagName) + + return `import { defineCustomElement as define${pascalImport} } from '${normalizePath( + outputTarget.componentCorePackage! + )}/${outputTarget.customElementsDir || 'components'}/${component.tagName}.js';` + }) + + sourceImports = cmpImports.join('\n') + } else if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) { + sourceImports = `import { ${APPLY_POLYFILLS}, ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n` + registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());` + } else if (!outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) { + sourceImports = `import { ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n` + registerCustomElements = `${REGISTER_CUSTOM_ELEMENTS}();` + } + + const final: string[] = [ + imports, + typeImports, + sourceImports, + registerCustomElements, + components + .map( + createVue2ComponentDefinition([IMPORT_COMPS_TYPES, IMPORT_TYPES], outputTarget.componentModels, outputTarget.includeImportCustomElements) + ) + .join('\n'), + ] + + return final.join('\n') + '\n' +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/declarations.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/declarations.ts new file mode 100644 index 0000000000..4b505bf8db --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/declarations.ts @@ -0,0 +1,103 @@ +export * from '@stencil/core/internal' + +export interface PluginOptions { + /** + * Path to a file to compile. + */ + file?: string + + /** + * A string to pass to compile. + * + * It is recommended that you use `includePaths` in conjunction with this so that sass can find files when using the @import directive. + */ + data?: string + + /** + * Handles when the @import directive is encountered. + * + * A custom importer allows extension of the sass engine in both a synchronous and asynchronous manner. + */ + importer?: Importer | Importer[] + + /** + * Holds a collection of custom functions that may be invoked by the sass files being compiled. + */ + functions?: { [key: string]: (...args: any[]) => any } + + /** + * An array of paths that should be looked in to attempt to resolve your @import declarations. + * When using `data`, it is recommended that you use this. + */ + includePaths?: string[] + + /** + * Used for Sass variables, mixins and functions files that do not contain any CSS. + * This config is custom to `@stencil/sass`. + */ + injectGlobalPaths?: string[] + + /** + * Enable Sass Indented Syntax for parsing the data string or file. + */ + indentedSyntax?: boolean + + /** + * Used to determine whether to use space or tab character for indentation. + */ + indentType?: 'space' | 'tab' + + /** + * Used to determine the number of spaces or tabs to be used for indentation. + */ + indentWidth?: number + + /** + * Used to determine which sequence to use for line breaks. + */ + linefeed?: 'cr' | 'crlf' | 'lf' | 'lfcr' + + /** + * Disable the inclusion of source map information in the output file. + */ + omitSourceMapUrl?: boolean + + /** + * Specify the intended location of the output file. + * Strongly recommended when outputting source maps so that they can properly refer back to their intended files. + */ + outFile?: string + + /** + * Determines the output format of the final CSS style. + */ + outputStyle?: 'compressed' | 'expanded' + + /** + * Enables the outputting of a source map. + */ + sourceMap?: boolean | string + + /** + * Includes the contents in the source map information. + */ + sourceMapContents?: boolean + + /** + * Embeds the source map as a data URI. + */ + sourceMapEmbed?: boolean + + /** + * The value will be emitted as `sourceRoot` in the source map information. + */ + sourceMapRoot?: string +} + +export type ImporterReturnType = { file: string } | { contents: string } | Error | null; + +export type Importer = ( + url: string, + prev: string, + done: (data: ImporterReturnType) => void, +) => ImporterReturnType | void diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/diagnostics.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/diagnostics.ts new file mode 100644 index 0000000000..df576aa9fb --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/diagnostics.ts @@ -0,0 +1,191 @@ +import { LegacyException } from 'sass' + +import * as d from './declarations' + +/** + * Generates a diagnostic as a result of an error originating from Sass. + * + * This function mutates the provided context by pushing the generated diagnostic to the context's collection of + * diagnostics. + * + * @param context the compilation context that the plugin has access to + * @param sassError the Sass error to create a diagnostic from + * @param filePath the path of the file that led to an error being raised + * @returns the created diagnostic, or `null` if one could not be generated + */ +export function loadDiagnostic ( + context: d.PluginCtx, + sassError: LegacyException, + filePath: string, +): d.Diagnostic | null { + if (sassError == null || context == null) { + return null + } + + type TErrorLine = d.PrintLine & { text: string, errorLength: number } + const diagnostic: d.Diagnostic & { lines: TErrorLine[] } = { + level: 'error', + type: 'css', + language: 'scss', + header: 'sass error', + code: formatCode(sassError.status), + messageText: formatMessage(sassError.message), + lines: [], + } + + if (typeof sassError.file === 'string' && sassError.file !== 'stdin') { + filePath = sassError.file + } + + if (typeof filePath === 'string') { + diagnostic.language = /(\.scss)$/i.test(filePath) ? 'scss' : 'sass' + diagnostic.absFilePath = filePath + diagnostic.relFilePath = formatFileName(context.config.rootDir!, diagnostic.absFilePath) + + const errorLineNumber = sassError.line || 0 + const errorLineIndex = errorLineNumber - 1 + + diagnostic.lineNumber = errorLineNumber + diagnostic.columnNumber = sassError.column + + if (errorLineIndex > -1) { + try { + const sourceText = context.fs.readFileSync(diagnostic.absFilePath) + const srcLines = sourceText.split(/\r?\n/) + + const errorLine: TErrorLine = { + lineIndex: errorLineIndex, + lineNumber: errorLineNumber, + text: typeof srcLines[errorLineIndex] === 'string' ? srcLines[errorLineIndex] : '', + errorCharStart: sassError.column!, + errorLength: 0, + } + + for (let i = errorLine.errorCharStart; i >= 0; i--) { + if (STOP_CHARS.indexOf(errorLine.text.charAt(i)) > -1) { + break + } + errorLine.errorCharStart = i + } + + for (let j = errorLine.errorCharStart; j <= errorLine.text.length; j++) { + if (STOP_CHARS.indexOf(errorLine.text.charAt(j)) > -1) { + break + } + errorLine.errorLength++ + } + + if (errorLine.errorLength === 0 && errorLine.errorCharStart > 0) { + errorLine.errorLength = 1 + errorLine.errorCharStart-- + } + + diagnostic.lines.push(errorLine) + + if (errorLine.lineIndex > 0) { + const previousLine: d.PrintLine = { + lineIndex: errorLine.lineIndex - 1, + lineNumber: errorLine.lineNumber - 1, + text: srcLines[errorLine.lineIndex - 1], + errorCharStart: -1, + errorLength: -1, + } + + diagnostic.lines.unshift(previousLine) + } + + if (errorLine.lineIndex + 1 < srcLines.length) { + const nextLine: d.PrintLine = { + lineIndex: errorLine.lineIndex + 1, + lineNumber: errorLine.lineNumber + 1, + text: srcLines[errorLine.lineIndex + 1], + errorCharStart: -1, + errorLength: -1, + } + + diagnostic.lines.push(nextLine) + } + } catch (e) { + console.error(`StyleSassPlugin loadDiagnostic, ${e}`) + } + } + } + + context.diagnostics.push(diagnostic) + + return diagnostic +} + +/** + * Helper function for converting a number error code to a string + * @param input the numeric error code to convert + * @returns the stringified error code + */ +function formatCode (input: number): string { + let output = '' + if (input != null) { + output = String(input) + } + return output +} + +/** + * Splits up a message from Sass, returning all input prior to the first '╷' character. + * If no such character exists, the entire original message will be returned. + * @param input the Sass message to split + * @returns the split message + */ +function formatMessage (input: string): string { + let output = '' + if (typeof input === 'string') { + output = input.split('╷')[0] + } + return output +} + +/** + * Formats the provided filename, by stripping the provided root directory out of the filename, and limiting the + * display string to 80 characters + * @param rootDir the root directory to strip out of the provided filename + * @param fileName the filename to format for pretty printing + * @returns the formatted filename + */ +function formatFileName (rootDir: string, fileName: string): string { + if (!rootDir || !fileName) return '' + + fileName = fileName.replace(rootDir, '') + if (/\/|\\/.test(fileName.charAt(0))) { + fileName = fileName.substring(1) + } + if (fileName.length > 80) { + fileName = '...' + fileName.substring(fileName.length - 80) + } + return fileName +} + +const STOP_CHARS = [ + '', + '\n', + '\r', + '\t', + ' ', + ':', + ';', + ',', + '{', + '}', + '.', + '#', + '@', + '!', + '[', + ']', + '(', + ')', + '&', + '+', + '~', + '^', + '*', + '$', +] diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/sass-plugin.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/sass-plugin.ts new file mode 100644 index 0000000000..e6fad2595b --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/sass-plugin.ts @@ -0,0 +1,97 @@ +import { Features, transform } from 'lightningcss' +import { render } from 'sass' + +import * as d from './declarations' +import { loadDiagnostic } from './diagnostics' +import { createResultsId, getRenderOptions, usePlugin } from './util' + +import type { LegacyException, LegacyResult } from 'sass' + +/** + * The entrypoint of the Stencil Sass plugin + * + * This function creates & configures the plugin to be used by consuming Stencil projects + * + * For configuration details, please see the [GitHub README](https://github.com/ionic-team/stencil-sass). + * + * @param opts options to configure the plugin + * @return the configured plugin + */ +export default function sassPlugin (opts: d.PluginOptions = {}): d.Plugin { + return { + name: 'sass', + pluginType: 'css', + /** + * Performs the Sass file compilation + * @param sourceText the contents of the Sass file to compile + * @param fileName the name of the Sass file to compile + * @param context a runtime context supplied by Stencil, providing access to the current configuration, an + * in-memory FS, etc. + * @returns the results of the Sass file compilation + */ + transform (sourceText: string, fileName: string, context: d.PluginCtx): Promise { + if ( + !usePlugin(fileName) + || typeof sourceText !== 'string' + ) { + // @ts-ignore + return null + } + + const renderOpts = getRenderOptions(opts, sourceText, fileName, context) + const results: d.PluginTransformResults = { + id: createResultsId(fileName), + dependencies: [], + } + + if (sourceText.trim() === '') { + results.code = '' + return Promise.resolve(results) + } + + return new Promise((resolve) => { + try { + // invoke sass' compiler at this point + render(renderOpts, (err?: LegacyException, sassResult?: LegacyResult): void => { + if (err) { + loadDiagnostic(context, err, fileName) + results.code = `/** sass error${err && err.message ? ': ' + err.message : ''} **/` + resolve(results) + } else if (sassResult) { + results.dependencies = Array.from(sassResult.stats.includedFiles) + results.code = sassResult.css.toString() + results.code = transform({ + filename: fileName, + code: Buffer.from(results.code), + minify: true, + sourceMap: false, + include: Features.HexAlphaColors, + }).code.toString() + + // write this css content to memory only so it can be referenced + // later by other plugins (autoprefixer) + // but no need to actually write to disk + context.fs.writeFile(results.id!, results.code!, { inMemoryOnly: true }).then(() => { + resolve(results) + }) + } + }) + } catch (e) { + // who knows, just good to play it safe here + const diagnostic: d.Diagnostic = { + level: 'error', + type: 'css', + language: 'scss', + header: 'sass error', + messageText: e, + lines: [], + } + context.diagnostics.push(diagnostic) + + results.code = `/** sass error${e && e.message ? ': ' + e.message : ''} **/` + resolve(results) + } + }) + }, + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/util.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/util.ts new file mode 100644 index 0000000000..e05ea84d85 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/stencil/plugin/util.ts @@ -0,0 +1,226 @@ +import * as path from 'path' +import { LegacyAsyncImporter, LegacyImporterResult } from 'sass' + +import * as d from './declarations' + +import type { LegacyOptions } from 'sass/types/legacy/options' + +/** + * Determine if the Sass plugin should be applied, based on the provided `fileName` + * + * @param fileName the name of a file to potentially transform + * @returns `true` if the name of the file ends with a sass extension (.scss, .sass), case insensitive. `false` + * otherwise + */ +export function usePlugin (fileName: string): boolean { + if (typeof fileName === 'string') { + return /(\.scss|\.sass)$/i.test(fileName) + } + return false +} + +/** + * Build a list of options to provide to Sass' `render` API. + * @param opts the options provided to the plugin within a Stencil configuration file + * @param sourceText the source text of the file to transform + * @param fileName the name of the file to transform + * @param context the runtime context being used by the plugin + * @returns the generated/normalized plugin options + */ +export function getRenderOptions ( + opts: d.PluginOptions, + sourceText: string, + fileName: string, + context: d.PluginCtx, +): LegacyOptions<'async'> { + // Create a copy of the original sass config, so we don't modify the one provided. + // Explicitly add `data` (as it's a required field) to be the source text + const renderOpts: LegacyOptions<'async'> = { ...opts, data: sourceText } + + // activate indented syntax if the file extension is .sass. + // this needs to be set prior to injecting global sass (as the syntax affects the import terminator) + renderOpts.indentedSyntax = /(\.sass)$/i.test(fileName) + + // create a copy of the original path config, so we don't modify the one provided + renderOpts.includePaths = Array.isArray(opts.includePaths) ? opts.includePaths.slice() : [] + // add the directory of the source file to includePaths + renderOpts.includePaths.push(path.dirname(fileName)) + // ensure each of the includePaths is an absolute path + renderOpts.includePaths = renderOpts.includePaths.map((includePath) => { + if (path.isAbsolute(includePath)) { + return includePath + } + // if it's a relative path then resolve it with the project's root directory + return path.resolve(context.config.rootDir!, includePath) + }) + + // create a copy of the original global config of paths to inject, so we don't modify the one provided. + // this is a Stencil-specific configuration, and not a part of the Sass API. + const injectGlobalPaths: string[] = Array.isArray(opts.injectGlobalPaths) ? opts.injectGlobalPaths.slice() : [] + + if (injectGlobalPaths.length > 0) { + // Automatically inject each of these paths into the source text. + // This is accomplished by prepending the global stylesheets to the file being processed. + const injectText = injectGlobalPaths + .map((injectGlobalPath) => { + if (!path.isAbsolute(injectGlobalPath)) { + // convert any relative paths to absolute paths relative to the project root + if (context.sys && typeof context.sys.normalizePath === 'function') { + // context.sys.normalizePath added in stencil 1.11.0 + injectGlobalPath = context.sys.normalizePath(path.join(context.config.rootDir!, injectGlobalPath)) + } else { + // TODO, eventually remove normalizePath() from @stencil/sass + injectGlobalPath = normalizePath(path.join(context.config.rootDir!, injectGlobalPath)) + } + } + + const importTerminator = renderOpts.indentedSyntax ? '\n' : ';' + + return `@import "${injectGlobalPath}"${importTerminator}` + }) + .join('') + + renderOpts.data = injectText + renderOpts.data + } + + // remove non-standard sass option + delete (renderOpts as any).injectGlobalPaths + + // the "file" config option is not valid here + delete renderOpts.file + + if (context.sys && typeof context.sys.resolveModuleId === 'function') { + const importers: LegacyAsyncImporter[] = [] + if (typeof renderOpts.importer === 'function') { + importers.push(renderOpts.importer) + } else if (Array.isArray(renderOpts.importer)) { + importers.push(...renderOpts.importer) + } + + /** + * Create a handler for loading files when a `@use` or `@import` rule is encountered for loading a path prefixed + * with a tilde (~). Such imports indicate that the module should be resolved from the `node_modules` directory. + * @param url the path to the module to load + * @param _prev Unused - typically, this is a string identifying the stylesheet that contained the @use or @import. + * @param done a callback to return the path to the resolved path + */ + const importer: LegacyAsyncImporter = ( + url: string, + _prev: string, + done: (data: LegacyImporterResult) => void, + ): void => { + if (typeof url === 'string') { + if (url.startsWith('~')) { + try { + const m = getModuleId(url) + + if (m.moduleId) { + context.sys + .resolveModuleId?.({ + moduleId: m.moduleId, + containingFile: m.filePath, + }) + .then((resolved: d.ResolveModuleIdResults) => { + if (resolved.pkgDirPath) { + const resolvedPath = path.join(resolved.pkgDirPath, m.filePath!) + done({ + file: context.sys.normalizePath(resolvedPath), + }) + } else { + done(null) + } + }) + .catch((err) => { + done(err) + }) + + return + } + } catch (e) { + done(e) + } + } + } + done(null) + } + importers.push(importer) + + renderOpts.importer = importers + } + + return renderOpts +} + +/** + * Replaces the extension with the provided file name with 'css'. + * + * If the file does not have an extension, no transformation will be applied. + * + * @param fileName the name of the file whose extension should be replaced + * @returns the updated filename, using 'css' as the file extension + */ +export function createResultsId (fileName: string): string { + // create what the new path is post transform (.css) + const pathParts = fileName.split('.') + pathParts[pathParts.length - 1] = 'css' + return pathParts.join('.') +} + +export function normalizePath (str: string) { + // Convert Windows backslash paths to slash paths: foo\\bar ➔ foo/bar + // https://github.com/sindresorhus/slash MIT + // By Sindre Sorhus + if (typeof str !== 'string') { + throw new Error(`invalid path to normalize`) + } + str = str.trim() + + if (EXTENDED_PATH_REGEX.test(str) || NON_ASCII_REGEX.test(str)) { + return str + } + + str = str.replace(SLASH_REGEX, '/') + + // always remove the trailing / + // this makes our file cache look ups consistent + if (str.charAt(str.length - 1) === '/') { + const colonIndex = str.indexOf(':') + if (colonIndex > -1) { + if (colonIndex < str.length - 2) { + str = str.substring(0, str.length - 1) + } + } else if (str.length > 1) { + str = str.substring(0, str.length - 1) + } + } + + return str +} + +/** + * Split an import path into a module ID and file path + * @param orgImport the import path to split + * @returns a module id and the filepath under that module id + */ +export function getModuleId (orgImport: string): { moduleId?: string, filePath?: string } { + if (orgImport.startsWith('~')) { + orgImport = orgImport.substring(1) + } + const split = orgImport.split('/') + const m: ReturnType = {} + + if (orgImport.startsWith('@') && split.length > 1) { + // we have a scoped package, it's module includes the word following the first slash + m.moduleId = split.slice(0, 2).join('/') + m.filePath = split.slice(2).join('/') + } else { + m.moduleId = split[0] + m.filePath = split.slice(1).join('/') + } + + return m +} + +const EXTENDED_PATH_REGEX = /^\\\\\?\\/ +const NON_ASCII_REGEX = /[^\x00-\x80]+/ // eslint-disable-line no-control-regex +const SLASH_REGEX = /\\/g diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/utils.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/utils.ts new file mode 100644 index 0000000000..2ee4732966 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/scripts/utils.ts @@ -0,0 +1,25 @@ +import { fs } from '@tarojs/helper' +import path from 'path' + +import { TYPES_DIR } from './constants' + +export function camelCaseEnhance (word = '', index: number) { + word = word.toLowerCase() + if (index !== 0) { + word = `${word[0].toUpperCase()}${word.slice(1)}` + } + return word +} + +export function getTypesList (type = ''): string[] { + if (type) { + return fs.readdirSync(path.join('node_modules', 'miniapp-types/dist/types', type)) + } + return fs.readdirSync(TYPES_DIR) +} + +export function getTypeFilePath (name: string): string { + return path.join(TYPES_DIR, `${name}.d.ts`) +} + + diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/full.png b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/full.png new file mode 100644 index 0000000000..9d1ec07a65 Binary files /dev/null and b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/full.png differ diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/mute.png b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/mute.png new file mode 100644 index 0000000000..158b426856 Binary files /dev/null and b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/mute.png differ diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/pause.png b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/pause.png new file mode 100644 index 0000000000..8a2afc2ca7 Binary files /dev/null and b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/pause.png differ diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/play.png b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/play.png new file mode 100644 index 0000000000..ceabd9faaa Binary files /dev/null and b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/play.png differ diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/shrink.png b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/shrink.png new file mode 100644 index 0000000000..2cd56f8520 Binary files /dev/null and b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/shrink.png differ diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/unmute.png b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/unmute.png new file mode 100644 index 0000000000..572b201e1e Binary files /dev/null and b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/unmute.png differ diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/volume.png b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/volume.png new file mode 100644 index 0000000000..e4fbbaeebb Binary files /dev/null and b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/images/volume.png differ diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/readme.md b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/readme.md new file mode 100644 index 0000000000..92d0c4200b --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/readme.md @@ -0,0 +1,90 @@ +# taro-video-danmu + +## API + +| 是否支持 | 属性 | 类型 | 默认值 | 说明 | +| -------- | -------------- | ----------- | ------ | ------------------------------------------------------------ | +| | autoPauseIfNavigate | boolean | true |当跳转到其它小程序页面时，是否自动暂停本页面的视频 +| | autoPauseIfOpenNative | boolean | true |当跳转到其它微信原生页面时，是否自动暂停本页面的视频 +| | direction | number | |设置全屏时视频的方向，不指定则根据宽高比自动判断 +| | title | string | |视频的标题，全屏时在顶部展示 +| √ | autoplay | boolean | false |是否自动播放 +| √ | controls | boolean | true |是否显示默认播放控件（播放/暂停按钮、播放进度、时间） +| √ | danmuBtn | boolean | false |是否显示弹幕按钮，只在初始化时有效，不能动态变更 +| √ | danmuList | Array. | [] |弹幕列表 +| √ | duration | number | |指定视频时长 +| √ | enableDanmu | boolean | false |是否展示弹幕，只在初始化时有效，不能动态变更 +| √ | enablePlayGesture | boolean | false |是否开启播放手势，即双击切换播放/暂停 +| √ | enableProgressGesture | boolean | true |是否开启控制进度的手势 +| √ | initialTime | number | 0 |指定视频初始播放位置 +| √ | loop | boolean | false |是否循环播放 +| √ | muted | boolean | false |是否静音播放 +| √ | objectFit | string | contain |当视频大小与 video 容器大小不一致时，视频的表现形式 +| √ | onEnded | Function | |当播放到末尾时触发 ended 事件 +| √ | onError | Function | |视频播放出错时触发 +| √ | onFullscreenChange | Function | |视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal +| √ | onPause | Function | |当暂停播放时触发 pause 事件 +| √ | onPlay | Function | |当开始/继续播放时触发play事件 +| √ | onProgress | Function | |加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比 +| √ | onTimeUpdate | Function | |播放进度变化时触发，event.detail = {currentTime, duration}。触发频率 250ms 一次 +| √ | onWaiting | Function | |视频出现缓冲时触发 +| √ | playBtnPosition | string | bottom |播放按钮的位置 +| √ | poster | string | |视频封面的图片网络资源地址。若 controls 属性值为 false 则设置 poster 无效 +| √ | showCenterPlayBtn | boolean | true |是否显示视频中间的播放按钮 +| √ | showFullscreenBtn | boolean | true |是否显示全屏按钮 +| √ | showMuteBtn | boolean | false |是否显示静音按钮 +| √ | showPlayBtn | boolean | true |是否显示视频底部控制栏的播放按钮 +| √ | showProgress | boolean | true |若不设置，宽度大于240时才会显示 +| √ | src | string | |要播放视频的资源地址 +| √ | vslideGesture | boolean | false |在非全屏模式下，是否开启亮度与音量调节手势（同 pageGesture） +| √ | vslideGestureInFullscreen | boolean | true |在全屏模式下，是否开启亮度与音量调节手势 + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | --------- | ------- | +| `enable` | `enable` | | `boolean` | `false` | + + +## Methods + +### `sendDanmu(danmuList?: Partial | Partial[]) => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `tick(currentTime: number) => Promise` + + + +#### Returns + +Type: `Promise` + + + + +## Dependencies + +### Used by + + - [taro-video-core](.) + +### Graph +```mermaid +graph TD; + taro-video-core --> taro-video-danmu + style taro-video-danmu fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/style/index.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/style/index.scss new file mode 100644 index 0000000000..acbc15bd24 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/style/index.scss @@ -0,0 +1,332 @@ +@charset 'UTF-8'; + +.taro-video { + display: inline-block; + overflow: hidden; + position: relative; + width: 100%; + height: 225px; + line-height: 0; +} + +.taro-video[hidden] { + display: none; +} + +.taro-video-container { + display: inline-block; + + // NOTE: video 元素父节点设置该属性会导致 iOS 元素层级问题 https://stackoverflow.com/questions/49653475/video-and-z-index-inside-scaled-element-some-divs-disappear + // overflow: hidden; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: #000; + object-position: inherit; +} + +.taro-video-container.taro-video-type-fullscreen { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 999; +} + +.taro-video-container.taro-video-type-fullscreen.taro-video-type-rotate-left { + transform: translate(-50%, -50%) rotate(-90deg); +} + +.taro-video-container.taro-video-type-fullscreen.taro-video-type-rotate-right { + transform: translate(-50%, -50%) rotate(90deg); +} + +.taro-video-video { + width: 100%; + height: 100%; + object-position: inherit; + display: block; +} + +.taro-video-cover { + display: flex; + position: absolute; + left: 0; + top: 0; + bottom: 0; + z-index: 1; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + background-color: rgb(1 1 1 / 50%); + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-box-pack: center; + -webkit-box-align: center; +} + +.taro-video-cover-play-button { + width: 40px; + height: 40px; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: 50%; +} + +.taro-video-cover-duration { + margin-top: 10px; + line-height: 1; + font-size: 16px; + color: #fff; +} + +.taro-video-bar { + display: flex; + visibility: hidden; + overflow: hidden; + position: absolute; + right: 0; + bottom: 0; + z-index: 1; + align-items: center; + padding: 0 10px; + height: 44px; + background-color: rgb(0 0 0 / 50%); + -webkit-box-align: center; +} + +.taro-video-bar.taro-video-bar-full { + left: 0; +} + +.taro-video-controls { + display: flex; + -webkit-box-flex: 1; + flex-grow: 1; + margin: 0 8.5px; +} + +.taro-video-control-button { + box-sizing: content-box; + margin-left: -8.5px; + padding: 14.5px 12.5px; + width: 13px; + height: 15px; +} + +.taro-video-control-button::after { + display: block; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: 100%; + content: ''; +} + +.taro-video-control-button.taro-video-control-button-play::after, +.taro-video-cover-play-button { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAAAXNSR0IArs4c6QAAAWhJREFUSA1j+P///0cgBoHjQGzCQCsAtgJB/AMy5wCxGNXtQ9iBwvoA5BUCMQvVLEQxHpNzDSjkRhXLMM3GKrIeKKpEkYVYjcUu+AMo3ALE3GRZiN1MvKKPgbIRJFuG10j8koeA0gZEW4jfLIKyf4EqpgOxMEELCRpFnIJ3QGU5QMyM00LizCFa1SWgSkeslhFtBGkKVwGVy6FYSJp+klR/A6quB2JOkIWMIK0oNlOf8xBoZDE9LAI7nYn6HsBq4l96WHQEaLUpAyiOaASeAM2NgvuPBpaACt82IEYtfKls0UagecpwXyAzqGTRdaA57sjmYrAptAjUsCkGYlYMg9EFyLQI1IiZB8Ti6Obh5JNh0QmgHlOcBuKSIMGi50C18UDMiMssvOJEWPQLqKYbiHnxGkRIkoBF24DyaoTMIEoeh0W3geI+RBlArCI0iz4D+RVAzEasfqLVAQ19AcSg5LoYiKWI1kiiQgCMBLnEEcfDSgAAAABJRU5ErkJggg==); +} + +.taro-video-control-button.taro-video-control-button-pause::after { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAAXNSR0IArs4c6QAAAFlJREFUSA3tksEKACAIQ7X//5zq98wOgQayum8QaGweHhMzG/6OujzKAymn+0LMqivu1XznWmX8/echTIyMyAgTwA72iIwwAexgj8gIE8CO3aMRbDPMaEy5BRGaKcZv8YxRAAAAAElFTkSuQmCC); +} + +.taro-video-current-time, +.taro-video-duration { + margin-top: 15px; + margin-bottom: 14.5px; + height: 14.5px; + line-height: 14.5px; + font-size: 12px; + color: #cbcbcb; +} + +.taro-video-progress-container { + position: relative; + flex-grow: 2; + -webkit-box-flex: 2; +} + +.taro-video-progress { + position: relative; + margin: 21px 12px; + height: 2px; + background-color: hsl(0deg 0% 100% / 40%); +} + +.taro-video-progress-buffered { + position: absolute; + left: 0; + top: 0; + width: 0; + height: 100%; + background-color: hsl(0deg 0% 100% / 80%); + transition: width 0.1s; +} + +.taro-video-ball { + position: absolute; + left: 0; + top: -21px; + box-sizing: content-box; + margin-left: -22px; + padding: 14px; + width: 16px; + height: 16px; +} + +.taro-video-inner { + border-radius: 50%; + width: 100%; + height: 100%; + background-color: #fff; +} + +.taro-video-danmu-button { + margin: 0 8.5px; + padding: 2px 10px; + border: 1px solid #fff; + border-radius: 5px; + line-height: 1; + font-size: 13px; + color: #fff; + white-space: nowrap; +} + +.taro-video-danmu-button.taro-video-danmu-button-active { + border-color: #48c23d; + color: #48c23d; +} + +.taro-video-fullscreen, +.taro-video-mute { + box-sizing: content-box; + padding: 8.5px; + width: 17px; + height: 17px; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: 50%; +} + +.taro-video-fullscreen { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAhUlEQVRYR+2WSwrAMAhEnZO3PfmULLooGEFTiIXJ2s/kRY2wzQeb85sE9CRA8jSzY1YfAFzhJBnU1AVgxH2dSiArCnD9QgGzRNnOech48SRABHoSyFb5in3PSbhyo6yvCPQkEM3u7BsPe/0FIvBfAh/vhKmVbO9SWun1qk/PSVi9TcVPBG6R1YIhgWwNpQAAAABJRU5ErkJggg==); +} + +.taro-video-fullscreen.taro-video-type-fullscreen { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABPUlEQVRYR+2Xu0pDURBF1/ZLxNcHKNiIlfhA7C0UBSEE8RNEBNFPUEQEEbGxFiSSSrCwEHsf5E/ccsSUuWfUhKQ40947+y42Z8+ZK/pcinzf9hhwD1xJ2q/qsb0JHAOzkl5y+lGAGnCWICQtZgAS6DxQk3TeLYA6cAo0JSXxjmW7CcwBdUkJurKiDhSA4kBvHbA9CqwBQx2O7BSw8ssU3ALPFRF4knT3nQLbr8B4LjLBOdAAFgJaLUkjbYC9n+zm+i4kXWbmwCqwnRMCHiXthuZAQOzPrxSA4kBxYDAcsH0EzATCfCLpJjOINoCtgFZabg7bk7AFDAeaGpKWgitZTu5N0kQbYBmYrujo9mX0CVxL+gidAdu9vY5zXhWA4sAgOND3X7NJ4AHYCaxkB8B62gslvecSFpoDOZH/PP8Cnt7hIaM5xCEAAAAASUVORK5CYII=); +} + +.taro-video-mute { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMTFUMTA6MTg6MjArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk3YmE4Yjg0LTFhNTYtNGM1MS04NDVkLTNiZmYyMGI0ZDc0ZiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjg1NGQ3MjlkLWUwNjctZjU0OC1hMTlhLTBlZjQ4OGRkYjJiOSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjA1ODY3ZDFlLWQ3NGEtNDgyNC04MDU3LTYzYmRmMTdjODk5ZSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDU4NjdkMWUtZDc0YS00ODI0LTgwNTctNjNiZGYxN2M4OTllIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjE4OjIwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OTdiYThiODQtMWE1Ni00YzUxLTg0NWQtM2JmZjIwYjRkNzRmIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz459+FoAAABqElEQVRYhc2XPWsVQRSGnxPjF4oGRfxoRQKGWCU2Ft7CykrQWosEyf/If0hhIPgHDEmbNJZqCFxiQEgTUGxsBUVEHgvnyrjZZJO92V1fGIaZnTPvszPszNlQ6VIjnbr/DwCoDLMNak/dUVfUK0f2rQugnlcX/FevWgFQH6gf3autRgHUC+piiXHzAOmtPx9gXgug8itQx9SXwDpw47AGKXZWvXvQmNFCwE3gCXA2dY0Az4GrRzHONA9cU/vAbERsllEOyh31e8USV2mrMPdG9uyn+rDom2/BHHCm5puWKiKmgdtAnz+rvaxO5mNygEvHaZ5BfADuARvAaWBpP4DGFBHfgBngFzClTrUKkCDeA+9S837rAEnbqb7VFcCpVJ/oCmCw959aB1AfAROpudYqgDoOLKRmPyLelAF8bcD4pPoMeAtcB34AT4uDBqXXwFG8XXUU/72MIuK1OgE8Bs6l7mEvo8up7lN1Ge0n9aK6VHMFZvJTr9S3CiALaCQhqZOSvegMIAvu2UVSWpigLC1fbQ0gm6in7qpfLCQbhwGIYcyPQ53/G3YO8BtUtd35bvKcVwAAAABJRU5ErkJggg==); +} + +.taro-video-mute.taro-video-type-mute { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMTFUMTA6MTk6MDMrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzYjJmNjE2LTZmZTUtNDJjNC1iNTgwLTczNzZjZjI2NzdmNSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjYzZjQ2NTYzLWE0ZjktOGQ0Mi1hM2FhLTY3ODJhNDBhYWNjMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIyYWNjMWFlLTg4ZmMtNDBlZi1iMWM1LTNmODgwY2QzYWI2MiI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjJhY2MxYWUtODhmYy00MGVmLWIxYzUtM2Y4ODBjZDNhYjYyIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjE5OjAzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDNiMmY2MTYtNmZlNS00MmM0LWI1ODAtNzM3NmNmMjY3N2Y1IiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5PmxYVAAACLklEQVRYhc2XP2sVQRRHz40hKoqaQgVBCy1EozFlGiVFxMLGh4piYWEh+hkEP4YKAVFEEFTyughaCH6DqIVpAhYWEgIxoJE8cywyi5tNHu/tJmvyg2WZO3dmzt47/zZUtoJ6Nhsg09YDiYhKDzACTAFNYH9lEpUq80TdrT5wpV5n/ZV9KoGoo+pXV2uyKkipOaLuUceAt8DhUvQd1FsCYhR4ChzaSIBMHSOi7lOfsByFWiCgEBH1GHAF2JlMPcBt4GC3HUYEaj9wF3gVEVPtfNVTwAXgWX7CDKq/1piAZTSZBmim8qJ6sQ3EgDqb/L7kU3MH2NHtl3dQX3r3Ak21UYAYAj4A/cl0JB+RF+uMRj4iQ+p8zt7KYFLdXKHuRi0gacBhV6a6pd5bA6KRNagFJPU9qv5u47toLmW1HnoR8Q5oAK1CVQu4FBHj/wUkaXsb+4pzpVaQFPqXrN7Be4Fx9VztIOr1BLEtmX4A94E/qdwHTKjDWYM6lu81dSlnn3V570BtuLxaMs2rZ/IgYxsBovaoPwsQA4VoFWEm8ql5DiysNyURsQTMpOIMcDYiPhd8xoGr/FtNC2G6FKXD6ihwGdiVHMoeeh8jYlA9ANwE3kTEp3bO6vE03qOONzR1r/q4RGrquaFFxFxE3ALOA9+6jExpdb180y55AhirhaRTatq0GXEzL8+ZIuI9cBJ4WKiartJf9nWV/mty7UfUafW7erpqRGI9EBuprffvu9n6C1KOmsqwI5A1AAAAAElFTkSuQmCC); +} + +.taro-video-danmu { + overflow: visible; + position: absolute; + left: 0; + top: 0; + bottom: 0; + margin-top: 14px; + margin-bottom: 44px; + width: 100%; + line-height: 14px; + font-size: 14px; +} + +.taro-video-danmu-item { + position: absolute; + left: 100%; + line-height: 1; + color: #fff; + white-space: nowrap; + transform: translateX(0); + transition-property: left, transform; + transition-duration: 3s; + transition-timing-function: linear; +} + +.taro-video-toast { + display: block; + visibility: hidden; + position: absolute; + left: 50%; + top: 50%; + border-radius: 5px; + background-color: hsl(0deg 0% 100% / 80%); + pointer-events: none; + color: #000; + transform: translate(-50%, -50%); +} + +.taro-video-toast.taro-video-toast-volume { + display: block; + width: 100px; + height: 100px; +} + +.taro-video-toast-volume .taro-video-toast-title { + display: block; + margin-top: 10px; + width: 100%; + line-height: 16px; + text-align: center; + font-size: 12px; +} + +.taro-video-toast-volume .taro-video-toast-icon { + display: block; + margin-left: 25%; + width: 50%; + height: 50%; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFhklEQVR4Xu2aeaxfQxTHP1VBES0NIQitWtpaaxeCUkQtaYVa0tiClAq1ExIiQTVppaWxt8RWSa2tWkJQRGgtQaSIpUKEpG0ssbbk28yV2+mZO/e9e3vvu/e98897mZnfzPl+75mZs0wvurn06ub46SGgxwLqZaA3sB/wO/A+8G/V6tS5BU4BJgJbO9DvAMOB36okoQ4CNgAeBEYbQK8Bbm4zAdsBc4EdAyA/APZoKwHHAA8DG2UA/AnYrG0ErAVcD1yXA9gfQJ8c40obsqbPgH7AY8CROTVuFQFD3X7fJid4DWsNAWOAGZ0w58YTsDZwKzChA189PbTRBGwKzAYO6iT4srbAMHfTfAksjulS1iG4JzAH2Dy2YKS/qAVcCdzi1vgZOBZ4PWvNGAG6wgYCW0IwctzNmf06BcEXtYABwOeA4otEfgEOdnGGqV6IAAUopwM6zDYuAVjeKYpYwCjgCWOhH513+b2lhE+Avrj89NPyalzyuCIE6EN9BfQ1dHoPOAD40+9LE6D/5aoqSqtLsgiQC60DTiHzfGCFoaSsQAexZdlTgEuyCDgLuK8u5G7dEAHyKN8CBrtxLwDHAX8Z+l4N3GS0L3db4aN0X5opmc+2XZQAfb2LPd2eciG1lUSRJZ9qYHkZONwiYAjwSc3gs24BXWWWfzEVuMjQez13HljX8v7A28lvEgsInaBVcxLaAvr6sgJLtBWeNTrOB+4w2p8DRvoEnAPcXTVaY70QAbrbXwIONX7zBSAL/tvrk1+iviTllnRry2irr/QSEws4D7izCxMg1XQLLAQGGXpeCkw22kOWI49RMUujCJC+uwAfGtfcImAng4AtAMsBeg04pIkESOfbgQsMsNoGnxrtSrfv7rXrSlwXWN6kLZBgEBiB8iWUUZZPIN/AF1nMoiYSICDfAlt5iB4CxhpAzwXuMtqPBuY1lYB5wFEeqFeAwwyguvIUqvuiQO/xphJwP3Cmhyh0EKrOoGDIF7n+M5pKwEwXrqdBCaQSM77Ig7SSIicDs5pKwIvACA+pzFwZIF9OlKm36QyQV7jEqDDJk5VD58uFgGIGX1Se+6yJFqAKsqI6X84GdDb4Mh0Y5zUqjFYFakUTCXja5QLSmBQHbAL8ahAgT1AeYVreSKLLphGwF/CuAfLJQLldGSTFD75c5d4mNCoWyAqG9gYWGED1AOMKo12ZbiWA/idA++deY2DVTZ0Jh5UJPsFQtD/wDaAHGWl5EzgwaUi2gK4UXS11S0cTIjrMFBtYQdAk4DID0BnAAz4B6wNLgTKKG0VIDBHwqitwpOcW+OOB540FdeipNKbUWFrUtn06o5xOij4KyDuqU0IE3Obl/rLA63pTzm9XA8jKACjdniZAaSKFmUpB1yUhAlTsUEpMh913wEkuTe7rKTzPAHqO44vpKPkFhH3cWWBVV6ogJVYZUgz/tXtIYelzI3Ct0fExIGx6j7iKWBUUveyYBehv1RIjIEsfqziq8Xp4pSBJOYTVJFQcVY3wCFeKUjVGyYfQWB00+5bEVBECrNS+qsOKBpVHNCVWHs+LS7H5PV5pOu9v0+OKEOAXR39w1e1C7wM6AkJ1eLmkRcrpRQiQrqobXO5S3vL3/4kBKMsCknV0k+iasVLUMV3UX5SAPGtED8EOT+L9YENnCasUIXNO2goChFWHqAIRyxXN4qI1BCQg9dJESYq8LnbrCBAR8t50Lig6i0krCRBoVWhVlt45wkBrCRBuRZyPuAguxIPe9lXqhpd9DcZMXOvdkPF0Xu/8dohNUmZ/1QQkuitXr+d4fryuFx3jywQYm6suAqSX8vLTXKJDt4QqO6rtLYspXWZ/nQQkOJTAUJZGIav19q9MvKvN1RUIWKMAY5P3EBBjqO393d4C/gMVHwRQlpx21QAAAABJRU5ErkJggg==); + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: 50%; + fill: #000; +} + +.taro-video-toast-volume .taro-video-toast-value { + margin-left: 10px; + margin-top: 5px; + width: 80px; + height: 5px; +} + +.taro-video-toast-volume .taro-video-toast-value > .taro-video-toast-value-content { + overflow: hidden; +} + +.taro-video-toast-volume-grids { + width: 80px; + height: 5px; +} + +.taro-video-toast-volume-grids-item { + float: left; + width: 7.1px; + height: 5px; + background-color: #000; +} + +.taro-video-toast-volume-grids-item:not(:first-child) { + margin-left: 1px; +} + +.taro-video-toast.taro-video-toast-progress { + padding: 6px; + background-color: rgb(0 0 0 / 80%); + line-height: 18px; + font-size: 14px; + color: #fff; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/utils.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/utils.ts new file mode 100644 index 0000000000..37747d0545 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/utils.ts @@ -0,0 +1,100 @@ +export const formatTime = (time?: number): string => { + if (!time) return '' + const sec = Math.round(time % 60) + const min = Math.round((time - sec) / 60) + return `${min < 10 ? `0${min}` : min}:${sec < 10 ? `0${sec}` : sec}` +} + +export const calcDist = (x: number, y: number): number => { + return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) +} + +export const normalizeNumber = (number: number): number => { + return Math.max(-1, Math.min(number, 1)) +} + +export let scene = 'default' + +export const screenFn = (function () { + let val + const fnMap = [ + [ + 'requestFullscreen', + 'exitFullscreen', + 'fullscreenElement', + 'fullscreenEnabled', + 'fullscreenchange', + 'fullscreenerror' + ], + // New WebKit + [ + 'webkitRequestFullscreen', + 'webkitExitFullscreen', + 'webkitFullscreenElement', + 'webkitFullscreenEnabled', + 'webkitfullscreenchange', + 'webkitfullscreenerror' + ], + // Old WebKit + [ + 'webkitRequestFullScreen', + 'webkitCancelFullScreen', + 'webkitCurrentFullScreenElement', + 'webkitCancelFullScreen', + 'webkitfullscreenchange', + 'webkitfullscreenerror' + ], + [ + 'mozRequestFullScreen', + 'mozCancelFullScreen', + 'mozFullScreenElement', + 'mozFullScreenEnabled', + 'mozfullscreenchange', + 'mozfullscreenerror' + ], + [ + 'msRequestFullscreen', + 'msExitFullscreen', + 'msFullscreenElement', + 'msFullscreenEnabled', + 'MSFullscreenChange', + 'MSFullscreenError' + ] + ] + const defaultIOSMap = [ + 'webkitEnterFullscreen', + 'webkitExitFullscreen', + 'webkitCurrentFullScreenElement', + 'webkitSupportsFullscreen', + 'fullscreenchange', + 'fullscreenerror' + ] + let i = 0 + const l = fnMap.length + const ret: Record = {} + // This for loop essentially checks the current document object for the property/methods above. + for (; i < l; i++) { + val = fnMap[i] + if (val && val[1] in document) { + for (i = 0; i < val.length; i++) { + ret[fnMap[0][i]] = val[i] + } + return ret + } + } + if (!ret[fnMap[0][0]]) { + scene = 'iOS' + // when there is no any APIs be set. + + // In IOS, there is no 'webkitEnterFullscreen' property `in document` but video can use it for fullscreen. + // ref: https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1633500-webkitenterfullscreen + for (i = 0; i < defaultIOSMap.length; i++) { + ret[fnMap[0][i]] = defaultIOSMap[i] + } + } + // If it doesn't find any of them, this whole function returns {} + // and the fn variable is set to this returned value. + return ret +})() + +export const isHls = url => /\.(m3u8)($|\?)/i.test(url) diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/video-control.tsx b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/video-control.tsx new file mode 100644 index 0000000000..9638bdfd8d --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/video-control.tsx @@ -0,0 +1,175 @@ +import { Component, ComponentInterface, Element, h, Host, Listen, Method,Prop } from '@stencil/core' + +import { formatTime } from './utils' + +@Component({ + tag: 'taro-video-control' +}) +export class VideoControl implements ComponentInterface { + private currentTimeRef: HTMLDivElement + private progressBallRef: HTMLDivElement + private visible = false + private isDraggingProgressBall = false + private hideControlsTimer: ReturnType + private percentage = 0 + private progressDimensions = { + left: 0, + width: 0 + } + + @Element() el: HTMLElement + + @Prop() controls: boolean + @Prop() currentTime: number + @Prop() duration: number + @Prop() isPlaying: boolean + @Prop() pauseFunc: () => void + @Prop() playFunc: () => void + @Prop() seekFunc: (position: number) => void + @Prop() showPlayBtn: boolean + @Prop() showProgress: boolean + + @Listen('touchmove', { + target: 'document' + }) + onDocumentTouchMove (e: TouchEvent) { + if (!this.isDraggingProgressBall) return + const touchX = e.touches[0].pageX + this.percentage = this.calcPercentage(touchX) + this.setProgressBall(this.percentage) + this.setCurrentTime(this.percentage * this.duration) + } + + @Listen('touchend', { + target: 'document' + }) + @Listen('touchcancel', { + target: 'document' + }) + onDocumentTouchEnd () { + if (!this.isDraggingProgressBall) return + + this.isDraggingProgressBall = false + this.seekFunc(this.percentage * this.duration) + this.toggleVisibility(true) + } + + @Method() + async setProgressBall (percentage: number) { + if (this.progressBallRef) { + this.progressBallRef.style.left = `${percentage * 100}%` + } + } + + @Method() + async toggleVisibility (nextVisible?: boolean) { + const visible = nextVisible === undefined ? !this.visible : nextVisible + if (visible) { + this.hideControlsTimer && clearTimeout(this.hideControlsTimer) + if (this.isPlaying) { + this.hideControlsTimer = setTimeout(() => { + this.toggleVisibility(false) + }, 2000) + } + this.el.style.visibility = 'visible' + } else { + this.el.style.visibility = 'hidden' + } + this.visible = !!visible + } + + @Method() + async getIsDraggingProgressBall () { + return this.isDraggingProgressBall + } + + @Method() + async setCurrentTime (time: number) { + this.currentTimeRef.innerHTML = formatTime(time) + } + + calcPercentage = (pageX: number): number => { + let pos = pageX - this.progressDimensions.left + pos = Math.max(pos, 0) + pos = Math.min(pos, this.progressDimensions.width) + return pos / this.progressDimensions.width + } + + onDragProgressBallStart = () => { + this.isDraggingProgressBall = true + this.hideControlsTimer && clearTimeout(this.hideControlsTimer) + } + + onClickProgress = (e: MouseEvent) => { + e.stopPropagation() + + const percentage = this.calcPercentage(e.pageX) + this.seekFunc(percentage * this.duration) + this.toggleVisibility(true) + } + + render () { + const { + controls, + currentTime, + duration, + isPlaying, + pauseFunc, + playFunc, + showPlayBtn, + showProgress + } = this + + const formattedDuration = formatTime(duration) + let playBtn + + if (!showPlayBtn) { + playBtn = null + } else if (isPlaying) { + playBtn =
+ } else { + playBtn =
+ } + + return ( + + {controls && ( +
+ {playBtn} + {showProgress && ( +
(this.currentTimeRef = dom as HTMLDivElement)}> + {formatTime(currentTime)} +
+ )} + {showProgress && ( +
+
{ + if (!ref) return + const rect = ref.getBoundingClientRect() + this.progressDimensions.left = rect.left + this.progressDimensions.width = rect.width + }}> +
+
(this.progressBallRef = dom as HTMLDivElement)} + onTouchStart={this.onDragProgressBallStart} + style={{ + left: `${formattedDuration ? (this.currentTime / duration) * 100 : 0}%` + }} + > +
+
+
+
+ )} + {showProgress &&
{formattedDuration}
} +
+ )} + + + ) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/video-danmu.tsx b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/video-danmu.tsx new file mode 100644 index 0000000000..4bf34ebb39 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/video-danmu.tsx @@ -0,0 +1,118 @@ +import { Component, ComponentInterface, h,Host, Method,Prop, State } from '@stencil/core' + +export interface Danmu { + text: string + color: string + time: number + key: number + bottom: string +} + +@Component({ + tag: 'taro-video-danmu' +}) +export class VideoDanmu implements ComponentInterface { + private list: Danmu[] = [] + private danmuElList: HTMLParagraphElement[] = [] + private currentTime = 0 + + @Prop() enable = false + + @State() danmuList: Danmu[] = [] + + ensureProperties (danmu: Partial): Danmu { + const clonedDanmu = { ...danmu } as Danmu + if (!('time' in danmu)) { + clonedDanmu.time = this.currentTime + } + clonedDanmu.key = Math.random() + clonedDanmu.bottom = `${Math.random() * 90 + 5}%` + return clonedDanmu + } + + @Method() + async sendDanmu (danmuList: Partial | Partial[] = []) { + if (Array.isArray(danmuList)) { + this.list = [ + ...this.list, + ...danmuList.map(danmu => this.ensureProperties(danmu)) + ] + } else { + const danmu = danmuList + this.list = [ + ...this.list, + { ...this.ensureProperties(danmu) } + ] + } + } + + @Method() + async tick (currentTime: number) { + this.currentTime = currentTime + + if (!this.enable) return + + const danmuList = this.list + + /** + * @todo 这个判断对拖拽进度的处理不严谨 + */ + const newDanmuList = danmuList.filter(({ time }) => { + return currentTime - time < 4 && currentTime > time + }) + let shouldUpdate = false + const oldDanmuList = this.danmuList + + if (newDanmuList.length !== oldDanmuList.length) { + shouldUpdate = true + } else { + shouldUpdate = newDanmuList.some(({ key }) => { + return oldDanmuList.every((danmu) => { + return key !== danmu.key + }) + }) + } + if (shouldUpdate) { + this.danmuList = newDanmuList + } + } + + componentDidUpdate () { + requestAnimationFrame(() => { + setTimeout(() => { + const danmuElList = this.danmuElList.splice(0) + danmuElList.forEach(danmu => { + danmu.style.left = '0' + danmu.style.webkitTransform = 'translateX(-100%)' + danmu.style.transform = 'translateX(-100%)' + }) + }) + }) + } + + render () { + if (!this.enable) return '' + + return ( + + {this.danmuList.map(({ text, color, bottom, key }) => ( +

{ + if (ref) { + this.danmuElList.push(ref) + } + }} + > + {text} +

+ ))} + + ) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/video.tsx b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/video.tsx new file mode 100644 index 0000000000..2643fcfc4a --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/components/video/video.tsx @@ -0,0 +1,727 @@ +import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Listen, Method,Prop, State, Watch } from '@stencil/core' +import Taro from '@tarojs/taro' +import classNames from 'classnames' + +import { throttle } from '../../utils' +import { + calcDist, + formatTime, + isHls, + normalizeNumber, + scene, + screenFn } from './utils' + +import type HLS from 'hls.js' + +@Component({ + tag: 'taro-video-core', + styleUrl: './style/index.scss' +}) +export class Video implements ComponentInterface { + private videoRef: HTMLVideoElement + private controlsRef: HTMLTaroVideoControlElement + private danmuRef: HTMLTaroVideoDanmuElement + private toastProgressRef: HTMLDivElement + private toastProgressTitleRef: HTMLDivElement + private toastVolumeRef: HTMLDivElement + private toastVolumeBarRef: HTMLDivElement + private currentTime = 0 + private lastClickedTime: number + private lastTouchScreenX: number | undefined + private lastTouchScreenY: number | undefined + private isDraggingProgress = false + private lastVolume: number + private lastPercentage: number + private nextPercentage: number + private gestureType = 'none' + private HLS: typeof HLS + private hls: HLS + + @Element() el: HTMLTaroVideoCoreElement + + /** + * 要播放视频的资源地址 + */ + @Prop() src: string + + /** + * 指定视频时长 + */ + @Prop() duration: number + + /** + * 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） + */ + @Prop() controls = true + + /** + * 是否自动播放 + */ + @Prop() autoplay = false + + /** + * 是否循环播放 + */ + @Prop() loop = false + + /** + * 是否静音播放 + */ + @Prop() muted = false + + /** + * 指定视频初始播放位置 + */ + @Prop() initialTime = 0 + + /** + * 视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效 + */ + @Prop() poster: string + + /** + * 当视频大小与 video 容器大小不一致时，视频的表现形式 + */ + @Prop() objectFit: 'contain' | 'fill' | 'cover' = 'contain' + + /** + * 若不设置，宽度大于 240 时才会显示 + */ + @Prop() showProgress = true + + /** + * 是否显示全屏按钮 + */ + @Prop() showFullscreenBtn = true + + /** + * 是否显示视频底部控制栏的播放按钮 + */ + @Prop() showPlayBtn = true + + /** + * 是否显示视频中间的播放按钮 + */ + @Prop() showCenterPlayBtn = true + + /** + * 是否显示静音按钮 + */ + @Prop() showMuteBtn = false + + /** + * 弹幕列表 + */ + @Prop() danmuList: [] + + /** + * 是否显示弹幕按钮 + */ + @Prop() danmuBtn = false + + /** + * 是否展示弹幕 + */ + @Prop() enableDanmu = false + + /** + * 是否开启播放手势，即双击切换播放/暂停 + */ + @Prop() enablePlayGesture = false + + /** + * 是否开启控制进度的手势 + */ + @Prop() enableProgressGesture = true + + /** + * 在非全屏模式下，是否开启亮度与音量调节手势 + */ + @Prop() vslideGesture = false + + /** + * 在全屏模式下，是否开启亮度与音量调节手势 + */ + @Prop() vslideGestureInFullscreen = true + + @Prop() nativeProps = {} + + @State() _duration: number + @State() _enableDanmu = false + @State() isPlaying = false + @State() isFirst = true + @State() isFullScreen = false + @State() fullScreenTimestamp = new Date().getTime() + @State() isMute = false + + @Event({ + eventName: 'play' + }) onPlay: EventEmitter + + @Event({ + eventName: 'pause' + }) onPause: EventEmitter + + @Event({ + eventName: 'ended' + }) onEnded: EventEmitter + + @Event({ + eventName: 'timeupdate' + }) onTimeUpdate: EventEmitter + + @Event({ + eventName: 'error' + }) onError: EventEmitter + + @Event({ + eventName: 'fullscreenchange' + }) onFullScreenChange: EventEmitter + + @Event({ + eventName: 'progress' + }) onProgress: EventEmitter + + @Event({ + eventName: 'loadedmetadata' + }) onLoadedMetaData: EventEmitter + + componentWillLoad () { + this._enableDanmu = this.enableDanmu + } + + componentDidLoad () { + this.init() + if (this.initialTime) { + this.videoRef.currentTime = this.initialTime + } + // 目前只支持 danmuList 初始化弹幕列表，还未支持更新弹幕列表 + this.danmuRef.sendDanmu?.(this.danmuList) + + if (document.addEventListener) { + document.addEventListener(screenFn.fullscreenchange, this.handleFullScreenChange) + } + if (this.videoRef && scene === 'iOS') { + // NOTE: iOS 场景下 fullscreenchange 并不会在退出全屏状态下触发，仅 webkitpresentationmodechanged 与 webkitendfullscreen 可替代 + this.videoRef.addEventListener('webkitendfullscreen', this.handleFullScreenChange) + } + } + + componentDidRender () { + } + + disconnectedCallback () { + if (document.removeEventListener) { + document.removeEventListener(screenFn.fullscreenchange, this.handleFullScreenChange) + } + if (this.videoRef && scene === 'iOS') { + this.videoRef.removeEventListener('webkitendfullscreen', this.handleFullScreenChange) + } + } + + @Watch('enableDanmu') + watchEnableDanmu (newVal) { + this._enableDanmu = newVal + } + + @Watch('src') + watchSrc () { + this.init() + } + + analyzeGesture = (e: TouchEvent) => { + const obj: { + type: string + dataX?: number + dataY?: number + } = { + type: 'none' + } + const nowX = e.touches[0].screenX + const nowY = e.touches[0].screenY + const distX = nowX - (this.lastTouchScreenX as number) + const distY = nowY - (this.lastTouchScreenY as number) + const enableVslideGesture = this.isFullScreen ? this.vslideGestureInFullscreen : this.vslideGesture + + if (this.gestureType === 'none') { + // 两点间距离 + const dist = calcDist(distX, distY) + + // 没有移动 + if (dist < 10) return obj + + if (Math.abs(distY) >= Math.abs(distX)) { + // 垂直方向移动：调整音量 + if (enableVslideGesture) { + this.gestureType = 'adjustVolume' + this.lastVolume = this.videoRef.volume + } else { + return obj + } + } else if (Math.abs(distY) < Math.abs(distX)) { + // 水平方向移动：调整进度 + if (this.enableProgressGesture) { + this.gestureType = 'adjustProgress' + this.lastPercentage = this.currentTime / (this.duration ?? this._duration) + } else { + return obj + } + } + } + obj.type = this.gestureType + obj.dataX = normalizeNumber(distX / 200) + obj.dataY = normalizeNumber(distY / 200) + return obj + } + + @Listen('touchmove', { + target: 'document' + }) + async onDocumentTouchMove (e: TouchEvent) { + if (this.lastTouchScreenX === undefined || this.lastTouchScreenY === undefined) return + if (await this.controlsRef.getIsDraggingProgressBall()) return + + const gestureObj = this.analyzeGesture(e) + if (gestureObj.type === 'adjustVolume') { + this.toastVolumeRef.style.visibility = 'visible' + const nextVolume = Math.max(Math.min(this.lastVolume - gestureObj.dataY!, 1), 0) + this.videoRef.volume = nextVolume + this.toastVolumeBarRef.style.width = `${nextVolume * 100}%` + } else if (gestureObj.type === 'adjustProgress') { + this.isDraggingProgress = true + this.nextPercentage = Math.max(Math.min(this.lastPercentage + (gestureObj.dataX || 0), 1), 0) + if (this.controls && this.showProgress) { + this.controlsRef.setProgressBall(this.nextPercentage) + this.controlsRef.toggleVisibility(true) + } + const duration = this.duration || this._duration + this.toastProgressTitleRef.innerHTML = `${formatTime(this.nextPercentage * duration)} / ${formatTime(duration)}` + this.toastProgressRef.style.visibility = 'visible' + } + } + + @Listen('touchend', { + target: 'document' + }) + @Listen('touchcancel', { + target: 'document' + }) + onDocumentTouchEnd () { + if (this.gestureType === 'adjustVolume') { + this.toastVolumeRef.style.visibility = 'hidden' + } else if (this.gestureType === 'adjustProgress') { + this.toastProgressRef.style.visibility = 'hidden' + } + + if (this.isDraggingProgress) { + this.isDraggingProgress = false + this.seek(this.nextPercentage * (this.duration ?? this._duration)) + } + + this.gestureType = 'none' + this.lastTouchScreenX = undefined + this.lastTouchScreenY = undefined + } + + loadNativePlayer = () => { + if (this.videoRef) { + this.videoRef.src = this.src + this.videoRef.load?.() + } + } + + init = () => { + const { src, videoRef } = this + + if (isHls(src)) { + import( + /* webpackExports: ["default"] */ + 'hls.js' + ).then(e => { + const Hls = e.default + this.HLS = Hls + if (Hls.isSupported()) { + if (this.hls) { + this.hls.destroy() + } + this.hls = new Hls() + this.hls.loadSource(src) + this.hls.attachMedia(videoRef) + this.hls.on(Hls.Events.MANIFEST_PARSED, () => { + this.autoplay && this.play() + }) + this.hls.on(Hls.Events.ERROR, (_, data) => { + this.handleError(data) + }) + } else if (videoRef.canPlayType('application/vnd.apple.mpegurl')) { + this.loadNativePlayer() + } else { + console.error('该浏览器不支持 HLS 播放') + } + }) + } else { + this.loadNativePlayer() + } + } + + handlePlay = () => { + this.isPlaying = true + this.isFirst = false + this.controlsRef.toggleVisibility(true) + this.onPlay.emit() + } + + handlePause = () => { + this.isPlaying = false + this.controlsRef.toggleVisibility(true) + this.onPause.emit() + } + + handleEnded = () => { + this.isFirst = true + this.pause() + this.controlsRef.toggleVisibility() + this.onEnded.emit() + } + + handleTimeUpdate = throttle(async e => { + this.currentTime = this.videoRef.currentTime + const duration = this.duration || this._duration + + const isControlDragging = await this.controlsRef.getIsDraggingProgressBall() + if (this.controls && this.showProgress) { + if (!isControlDragging && !this.isDraggingProgress) { + this.controlsRef.setProgressBall(this.currentTime / duration) + this.controlsRef.setCurrentTime(this.currentTime) + } + } + + this.danmuRef.tick(this.currentTime) + + this.onTimeUpdate.emit({ + duration: e.target?.duration, + currentTime: e.target?.currentTime + }) + + if (this.duration) { + if (this.currentTime >= this.duration) { + this.seek(0) + this.handleEnded() + } + } + }, 250) + + handleError = e => { + if (this.hls) { + switch (e.type) { + case this.HLS.ErrorTypes.NETWORK_ERROR: + // try to recover network error + this.onError.emit({ errMsg: e.response }) + this.hls.startLoad() + break + case this.HLS.ErrorTypes.MEDIA_ERROR: + this.onError.emit({ errMsg: e.reason || '媒体错误,请重试' }) + this.hls.recoverMediaError() + break + default: + break + } + } else { + this.onError.emit({ + errMsg: e.target?.error?.message, + }) + } + } + + handleDurationChange = () => { + this._duration = this.videoRef.duration + } + + handleProgress = () => { + this.onProgress.emit() + } + + handleLoadedMetaData = (e: Event) => { + const target = e.target as HTMLVideoElement + this.onLoadedMetaData.emit({ + width: target.videoWidth, + height: target.videoHeight, + duration: target.duration + }) + } + + @Method() + async getHlsObject () { + // Note: H5 端专属方法，获取 HLS 实例 fix #11894 + return this.hls + } + + /** 播放视频 */ + @Method() + async play () { + this._play() + } + + _play = () => this.videoRef.play() + + /** 暂停视频 */ + @Method() + async pause () { + this._pause() + } + + _pause = () => this.videoRef.pause() + + /** 停止视频 */ + @Method() + async stop () { + this._stop() + } + + _stop = () => { + this.videoRef.pause() + this._seek(0) + } + + /** 跳转到指定位置 */ + @Method() + async seek (position: number) { + this._seek(position) + } + + _seek = (position: number) => { + this.videoRef.currentTime = position + } + + /** 进入全屏。若有自定义内容需在全屏时展示，需将内容节点放置到 video 节点内。 */ + @Method() + async requestFullScreen () { + this.toggleFullScreen(true) + } + + /** 退出全屏 */ + @Method() + async exitFullScreen () { + this.toggleFullScreen(false) + } + + onTouchStartContainer = (e: TouchEvent) => { + this.lastTouchScreenX = e.touches[0].screenX + this.lastTouchScreenY = e.touches[0].screenY + } + + onClickContainer = () => { + if (this.enablePlayGesture) { + const now = Date.now() + if (now - this.lastClickedTime < 300) { + // 双击 + this.isPlaying ? this.pause() : this.play() + } + this.lastClickedTime = now + } + this.controlsRef.toggleVisibility() + } + + onClickFullScreenBtn = (e: MouseEvent) => { + e.stopPropagation() + this.toggleFullScreen() + } + + handleFullScreenChange = e => { + // 全屏后，"退出"走的是浏览器事件，在此同步状态 + const timestamp = new Date().getTime() + if (!e.detail && this.isFullScreen && !document[screenFn.fullscreenElement] && timestamp - this.fullScreenTimestamp > 100) { + this.toggleFullScreen(false, true) + } + } + + toggleFullScreen = (isFullScreen = !this.isFullScreen, fromBrowser = false) => { + this.isFullScreen = isFullScreen // this.videoRef?.['webkitDisplayingFullscreen'] + this.controlsRef.toggleVisibility(true) + this.fullScreenTimestamp = new Date().getTime() + this.onFullScreenChange.emit({ + fullScreen: this.isFullScreen, + direction: 'vertical' + }) + if (this.isFullScreen && !document[screenFn.fullscreenElement]) { + setTimeout(() => { + this.videoRef[screenFn.requestFullscreen]({ navigationUI: 'auto' }) + Taro.eventCenter.trigger('__taroEnterFullScreen', {}) + }, 0) + } else { + if (!fromBrowser) { + document[screenFn.exitFullscreen]() + } + Taro.eventCenter.trigger('__taroExitFullScreen', {}) + } + // 全屏后，"退出全屏"是浏览器按钮是浏览器内部按钮，非html按钮，点击"退出全屏"按钮是浏览器内部实现功能。此时再次调用exitFullscreen反而会报错，因此不再调用 + } + + toggleMute = (e: MouseEvent) => { + e.stopPropagation() + this.videoRef.muted = !this.isMute + this.controlsRef.toggleVisibility(true) + this.isMute = !this.isMute + } + + toggleDanmu = (e: MouseEvent) => { + e.stopPropagation() + this.controlsRef.toggleVisibility(true) + this._enableDanmu = !this._enableDanmu + } + + render () { + const { + controls, + autoplay, + loop, + muted, + poster, + objectFit, + isFirst, + isMute, + isFullScreen, + showCenterPlayBtn, + isPlaying, + _enableDanmu, + showMuteBtn, + danmuBtn, + showFullscreenBtn, + nativeProps + } = this + const duration = this.duration || this._duration + const durationTime = formatTime(duration) + + return ( + + + + { + if (dom) { + this.danmuRef = dom as HTMLTaroVideoDanmuElement + } + }} + enable={_enableDanmu} + /> + + {isFirst && showCenterPlayBtn && !isPlaying && ( +
+
this.play()} /> +

{durationTime}

+
+ )} + + { + if (dom) { + this.controlsRef = dom + } + }} + controls={controls} + currentTime={this.currentTime} + duration={duration} + isPlaying={this.isPlaying} + pauseFunc={this._pause} + playFunc={this._play} + seekFunc={this._seek} + showPlayBtn={this.showPlayBtn} + showProgress={this.showProgress} + > + {showMuteBtn && ( +
+ )} + {danmuBtn && ( +
+ 弹幕 +
+ )} + {showFullscreenBtn && ( +
+ )} + + +
{ + if (dom) { + this.toastVolumeRef = dom + } + }}> +
音量
+
+
+
{ + if (dom) { + this.toastVolumeBarRef = dom + } + }}> +
+ {Array(10).fill(1).map(() => ( +
+ ))} +
+
+
+
+ +
{ + if (dom) { + this.toastProgressRef = dom + } + }}> +
{ + if (dom) { + this.toastProgressTitleRef = dom + } + }} /> +
+ + ) + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/index.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/index.ts new file mode 100644 index 0000000000..cb64ac1b52 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/index.ts @@ -0,0 +1 @@ +export * from './components' diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/a11y.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/a11y.scss new file mode 100644 index 0000000000..e06824e9fe --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/a11y.scss @@ -0,0 +1,64 @@ +@import './fn'; + +.weui-hidden_abs { + opacity: 0; + position: absolute; + width: 1px;//1px是为了兼容ios15 + height: 1px; + overflow: hidden; +} +.weui-a11y_ref { + display: none; +} +.weui-hidden-space:empty { + &::before { + content: '\00A0'; + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + } +} +.weui-a11y-combo { + position: relative; +} +.weui-a11y-combo__helper { + opacity: 0; + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} +.weui-a11y-combo__content { + position: relative; + z-index: 1; +} + +.weui-wa-hotarea-el { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 44px; + min-height: 44px; + width: 100%; + height: 100%; +} +.weui-wa-hotarea-el__wrp, +.weui-wa-hotarea, +.weui-wa-hotarea_before { + position: relative; + + // 如果是合法的点击嵌套，例如label[for]里的出现链接，需要把层级提高 + a, + button, + navigator { + position: relative; + z-index: 1; + } +} +.weui-wa-hotarea_before::before, +.weui-wa-hotarea::after { + content: ''; + pointer-events: auto; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/fn.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/fn.scss new file mode 100644 index 0000000000..47317446b6 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/fn.scss @@ -0,0 +1,33 @@ +@use 'sass:math'; + +// mixin +@import "./mixin/mobile"; +@import "./mixin/setOnepx"; +@import "./mixin/setArrow"; +@import "./mixin/setLoading"; +@import "./mixin/text"; +@import "./mixin/btnWrapLayout"; + +// variable +// @import "./variable/global"; +// @import "./variable/color"; +// @import "./variable/weui-tab"; +// @import "./variable/weui-cell"; +// @import "./variable/weui-button"; +// @import "./variable/weui-msg"; +// @import "./variable/weui-grid"; +// @import "./variable/weui-progress"; +// @import "./variable/weui-dialog"; + +$browser-context: 16; // Default + +@function em($pixels, $context: $browser-context) { + // @if math.unit($pixels) == px { + // $pixels: math.div($pixels, $context); + // } + @if math.unit($pixels) != '' { + $pixels: math.div($pixels, $pixels * 0 + 1); + } + + @return #{$pixels}em; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/btnWrapLayout.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/btnWrapLayout.scss new file mode 100644 index 0000000000..e308c6e4db --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/btnWrapLayout.scss @@ -0,0 +1,35 @@ +@mixin weuiBtnWrapLayoutDefault() { + display: flex; + align-items: center; + justify-content: center; + + .weui-btn { + width: $weuiBtnWidth; + padding-left: 16px; + padding-right: 16px; + } + .weui-btn:nth-last-child(n+2), + .weui-btn:nth-last-child(n+2) + .weui-btn { + margin: 0 8px; + width: 136px; + &:first-child { + margin-left: 0; + } + &:last-child { + margin-right: 0; + } + } +} + +@mixin weuiBtnWrapLayoutWrap() { + flex-direction: column; + .weui-btn:nth-last-child(n+2), + .weui-btn:nth-last-child(n+2) + .weui-btn { + width: 184px; + margin: 16px 0 0; + &:first-child { + margin-top: 0; + } + } +} + diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/mobile.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/mobile.scss new file mode 100644 index 0000000000..db5e8e4d48 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/mobile.scss @@ -0,0 +1,3 @@ +@mixin setTapColor($c:rgba(0,0,0,0)) { + -webkit-tap-highlight-color: $c; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/setArrow.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/setArrow.scss new file mode 100644 index 0000000000..471ec8f714 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/setArrow.scss @@ -0,0 +1,36 @@ +@mixin setArrow($arrowSize, $borderColor, $borderWidth){ + display: inline-block; + height: $arrowSize; + width: $arrowSize; + border-width: $borderWidth $borderWidth 0 0; + border-color: $borderColor; + border-style: solid; +} + +@mixin setArrow($direction, $arrowSize, $borderColor, $borderWidth) { + display: inline-block; + height: $arrowSize; + width: $arrowSize; + border-width: $borderWidth $borderWidth 0 0; + border-color: $borderColor; + border-style: solid; + + @if $direction == top { + transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0); // rotate(-45deg) + } + @else if $direction == right { + transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // rotate(45deg) + position: relative; + top: -2px; + } + @else if $direction == down { + transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); // rotate(135deg) + position: relative; + top: -3px; + } + @else if $direction == left { + transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0); // rotate(-135deg) + position: relative; + top: -2px; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/setLoading.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/setLoading.scss new file mode 100644 index 0000000000..84abc73e55 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/setLoading.scss @@ -0,0 +1,56 @@ +@use 'sass:math'; + +@mixin setCircleLoading($color: currentColor, $size: 80px, $wide: 7px) { + display: inline-flex; + position: relative; + width: $size; + height: $size; + vertical-align: middle; + color: $color; + animation: circleLoading 1s steps(60, end) infinite; + + &::before, + &::after { + content: ''; + display: block; + width: math.div($size, 2); + height: $size; + box-sizing: border-box; + border: $wide solid; + border-color: currentColor; + } + + &::before { + border-right-width: 0; + border-top-left-radius: $size; + border-bottom-left-radius: $size; + -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 0.3) 95%); + } + &::after { + border-left-width: 0; + border-top-right-radius: $size; + border-bottom-right-radius: $size; + -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.3) 95%); + } + &__dot { + position: absolute; + top: 0; + left: 50%; + margin-left: math.div(-$wide, 2); + width: $wide; + height: $wide; + border-top-right-radius: 100%; + border-bottom-right-radius: 100%; + background: currentColor; + } + + @keyframes circleLoading { + 0% { + transform: rotate3d(0, 0, 1, 0deg); + } + + 100% { + transform: rotate3d(0, 0, 1, 360deg); + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/setOnepx.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/setOnepx.scss new file mode 100644 index 0000000000..5b91e50285 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/setOnepx.scss @@ -0,0 +1,51 @@ +@mixin setTopLine($c: #C7C7C7) { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 1px; + border-top: 1px solid $c; + color: $c; + transform-origin: 0 0; + transform: scaleY(0.5); +} + +@mixin setBottomLine($c: #C7C7C7) { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 1px; + border-bottom: 1px solid $c; + color: $c; + transform-origin: 0 100%; + transform: scaleY(0.5); +} + +@mixin setLeftLine($c: #C7C7C7) { + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 1px; + bottom: 0; + border-left: 1px solid $c; + color: $c; + transform-origin: 0 0; + transform: scaleX(0.5); +} + +@mixin setRightLine($c: #C7C7C7) { // $weuiLineColorLight + content: ' '; + position: absolute; + right: 0; + top: 0; + width: 1px; + bottom: 0; + border-right: 1px solid $c; + color: $c; + transform-origin: 100% 0; + transform: scaleX(0.5); +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/text.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/text.scss new file mode 100644 index 0000000000..56db1e3b5e --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/mixin/text.scss @@ -0,0 +1,26 @@ +@mixin ellipsis($w:auto) { + width: $w; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; +} + +@mixin ellipsisLn($line) { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $line; +} + +@mixin text_wrap() { + word-wrap: break-word; + word-break: break-all; +} + +@mixin hyphens() { + word-wrap: break-word; + -webkit-hyphens: auto; + hyphens: auto; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/patch.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/patch.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/reset.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/reset.scss new file mode 100644 index 0000000000..5218d551b4 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/reset.scss @@ -0,0 +1,31 @@ +html { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + line-height: 1.6; + font-family: $weuiFontDefault; +} + +* { + margin: 0; + padding: 0; + // outline: 0; +} + +a img { + border: 0; +} + +a { + text-decoration: none; + @include setTapColor(); +} +// input, +// textarea { +// caret-color: $weuiColorPrimary; +// } +// ::placeholder { +// color: var(--weui-FG-2); +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/fn.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/fn.scss new file mode 100644 index 0000000000..2fdfa59aca --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/fn.scss @@ -0,0 +1,81 @@ +@mixin dark { + .wx-root[data-weui-theme='dark'] &, + body[data-weui-theme='dark'] & { + @content; + } + + @media (prefers-color-scheme: dark) { + .wx-root:not([data-weui-theme='light']) &, + body:not([data-weui-theme='light']) & { + @content; + } + } +} +@mixin setColor($var, $color) { + @include setColor($var, $color, $color); +} +@mixin setColor($var, $light, $dark) { + .wx-root, + body { + #{$var}: $light; + } + .wx-root[data-weui-theme='dark'], + body[data-weui-theme='dark'] { + #{$var}: $dark; + } + + @media (prefers-color-scheme: dark) { + .wx-root:not([data-weui-theme='light']), + body:not([data-weui-theme='light']) { + #{$var}: $dark; + } + } +} + +@mixin care { + .wx-root[data-weui-mode='care'] &, + body[data-weui-mode='care'] & { + @content; + } +} +@mixin setCareColor($var, $color) { + @include setCareColor($var, $color, $color); +} +@mixin setCareColor($var, $light, $dark) { + .wx-root[data-weui-mode='care'], + body[data-weui-mode='care'] { + #{$var}: $light; + } + .wx-root[data-weui-mode='care'][data-weui-theme='dark'], + body[data-weui-mode='care'][data-weui-theme='dark'] { + #{$var}: $dark; + } + + @media (prefers-color-scheme: dark) { + .wx-root[data-weui-mode='care']:not([data-weui-theme='light']), + body[data-weui-mode='care']:not([data-weui-theme='light']) { + #{$var}: $dark; + } + } +} + +// 定义局部作用域的颜色变量 +@mixin setThisColor($var, $color) { + @include setColor($var, $color, $color); +} +@mixin setThisColor($var, $light, $dark) { + & { + #{$var}: $light; + } + .wx-root[data-weui-theme='dark'] &, + body[data-weui-theme='dark'] & { + #{$var}: $dark; + } + + @media (prefers-color-scheme: dark) { + .wx-root:not([data-weui-theme='light']) &, + body:not([data-weui-theme='light']) & { + #{$var}: $dark; + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/index.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/index.scss new file mode 100644 index 0000000000..92e3e927d8 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/index.scss @@ -0,0 +1,42 @@ +@import './fn'; +@import './scss-vars/light'; +@import './scss-vars/dark'; +@import './scss-vars/care-light'; +@import './scss-vars/care-dark'; +@import './vars/light'; +@import './vars/dark'; +@import './vars/care-light'; +@import './vars/care-dark'; + +body, +.wx-root { + @include varsLight(); +} + +@media (prefers-color-scheme: dark) { + .wx-root:not([data-weui-theme='light']), + body:not([data-weui-theme='light']) { + @include varsDark(); + } +} +.wx-root[data-weui-theme='dark'], +body[data-weui-theme='dark'] { + @include varsDark(); +} + + +.wx-root[data-weui-mode='care'], +body[data-weui-mode='care'] { + @include varsCareLight(); +} + +@media (prefers-color-scheme: dark) { + .wx-root[data-weui-mode='care']:not([data-weui-theme='light']), + body[data-weui-mode='care']:not([data-weui-theme='light']) { + @include varsCareDark(); + } +} +.wx-root[data-weui-mode='care'][data-weui-theme='dark'], +body[data-weui-mode='care'][data-weui-theme='dark'] { + @include varsCareDark(); +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/care-dark.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/care-dark.scss new file mode 100644 index 0000000000..4b88beca89 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/care-dark.scss @@ -0,0 +1,149 @@ +$CARE_DARK_BG_0: #111111; +$CARE_DARK_BG_1: #1E1E1E; +$CARE_DARK_BG_2: #191919; +$CARE_DARK_BG_3: #202020; +$CARE_DARK_BG_4: #404040; +$CARE_DARK_BG_5: #2C2C2C; +$CARE_DARK_BLUE_100: #10AEFF; +$CARE_DARK_BLUE_120: #0C8BCC; +$CARE_DARK_BLUE_170: #04344D; +$CARE_DARK_BLUE_80: #3FBEFF; +$CARE_DARK_BLUE_90: #28B6FF; +$CARE_DARK_BLUE_BG_100: #48A6E2; +$CARE_DARK_BLUE_BG_110: #4095CB; +$CARE_DARK_BLUE_BG_130: #32749E; +$CARE_DARK_BLUE_BG_90: #5AAFE4; +$CARE_DARK_BRAND_100: #07C160; +$CARE_DARK_BRAND_120: #059A4C; +$CARE_DARK_BRAND_170: #023A1C; +$CARE_DARK_BRAND_80: #38CD7F; +$CARE_DARK_BRAND_90: #20C770; +$CARE_DARK_BRAND_BG_100: #2AAE67; +$CARE_DARK_BRAND_BG_110: #259C5C; +$CARE_DARK_BRAND_BG_130: #1D7A48; +$CARE_DARK_BRAND_BG_90: #3EB575; +$CARE_DARK_FG_0: rgba(255,255,255,0.85); +$CARE_DARK_FG_0_5: rgba(255,255,255,0.65); +$CARE_DARK_FG_1: rgba(255,255,255,0.55); +$CARE_DARK_FG_2: rgba(255,255,255,0.35); +$CARE_DARK_FG_3: rgba(255,255,255,0.1); +$CARE_DARK_FG_4: rgba(255,255,255,0.15); +$CARE_DARK_GLYPH_0: rgba(255,255,255,0.85); +$CARE_DARK_GLYPH_1: rgba(255,255,255,0.55); +$CARE_DARK_GLYPH_2: rgba(255,255,255,0.35); +$CARE_DARK_GLYPH_WHITE_0: rgba(255,255,255,0.85); +$CARE_DARK_GLYPH_WHITE_1: rgba(255,255,255,0.55); +$CARE_DARK_GLYPH_WHITE_2: rgba(255,255,255,0.35); +$CARE_DARK_GLYPH_WHITE_3: #FFFFFF; +$CARE_DARK_GREEN_100: #74A800; +$CARE_DARK_GREEN_120: #5C8600; +$CARE_DARK_GREEN_170: #233200; +$CARE_DARK_GREEN_80: #8FB933; +$CARE_DARK_GREEN_90: #82B01A; +$CARE_DARK_GREEN_BG_100: #789833; +$CARE_DARK_GREEN_BG_110: #6B882D; +$CARE_DARK_GREEN_BG_130: #65802B; +$CARE_DARK_GREEN_BG_90: #85A247; +$CARE_DARK_INDIGO_100: #1196FF; +$CARE_DARK_INDIGO_120: #0D78CC; +$CARE_DARK_INDIGO_170: #052D4D; +$CARE_DARK_INDIGO_80: #40ABFF; +$CARE_DARK_INDIGO_90: #28A0FF; +$CARE_DARK_INDIGO_BG_100: #0D78CC; +$CARE_DARK_INDIGO_BG_110: #0B6BB7; +$CARE_DARK_INDIGO_BG_130: #09548F; +$CARE_DARK_INDIGO_BG_90: #2585D1; +$CARE_DARK_LIGHTGREEN_100: #3EB575; +$CARE_DARK_LIGHTGREEN_120: #31905D; +$CARE_DARK_LIGHTGREEN_170: #123522; +$CARE_DARK_LIGHTGREEN_80: #64C390; +$CARE_DARK_LIGHTGREEN_90: #51BC83; +$CARE_DARK_LIGHTGREEN_BG_100: #31905D; +$CARE_DARK_LIGHTGREEN_BG_110: #2C8153; +$CARE_DARK_LIGHTGREEN_BG_130: #226541; +$CARE_DARK_LIGHTGREEN_BG_90: #31905D; +$CARE_DARK_LINK_100: #7D90A9; +$CARE_DARK_LINK_120: #647387; +$CARE_DARK_LINK_170: #252A32; +$CARE_DARK_LINK_80: #97A6BA; +$CARE_DARK_LINK_90: #899AB1; +$CARE_DARK_LINKFINDER_100: #DEE9FF; +$CARE_DARK_MATERIAL_ATTACHMENTCOLUMN: rgba(32,32,32,0.93); +$CARE_DARK_MATERIAL_NAVIGATIONBAR: rgba(18,18,18,0.9); +$CARE_DARK_MATERIAL_REGULAR: rgba(37,37,37,0.6); +$CARE_DARK_MATERIAL_THICK: rgba(34,34,34,0.9); +$CARE_DARK_MATERIAL_THIN: rgba(245,245,245,0.4); +$CARE_DARK_MATERIAL_TOOLBAR: rgba(35,35,35,0.93); +$CARE_DARK_ORANGE_100: #C87D2F; +$CARE_DARK_ORANGE_120: #A06425; +$CARE_DARK_ORANGE_170: #3B250E; +$CARE_DARK_ORANGE_80: #D39758; +$CARE_DARK_ORANGE_90: #CD8943; +$CARE_DARK_ORANGE_BG_100: #BB6000; +$CARE_DARK_ORANGE_BG_110: #A85600; +$CARE_DARK_ORANGE_BG_130: #824300; +$CARE_DARK_ORANGE_BG_90: #C1701A; +$CARE_DARK_ORANGERED_100: #FF6146; +$CARE_DARK_OVERLAY: rgba(0,0,0,0.8); +$CARE_DARK_OVERLAY_WHITE: rgba(242,242,242,0.8); +$CARE_DARK_PURPLE_100: #8183FF; +$CARE_DARK_PURPLE_120: #6768CC; +$CARE_DARK_PURPLE_170: #26274C; +$CARE_DARK_PURPLE_80: #9A9BFF; +$CARE_DARK_PURPLE_90: #8D8FFF; +$CARE_DARK_PURPLE_BG_100: #6768CC; +$CARE_DARK_PURPLE_BG_110: #5C5DB7; +$CARE_DARK_PURPLE_BG_130: #48498F; +$CARE_DARK_PURPLE_BG_90: #7677D1; +$CARE_DARK_RED_100: #FA5151; +$CARE_DARK_RED_120: #C84040; +$CARE_DARK_RED_170: #4B1818; +$CARE_DARK_RED_80: #FB7373; +$CARE_DARK_RED_90: #FA6262; +$CARE_DARK_RED_BG_100: #CF5148; +$CARE_DARK_RED_BG_110: #BA4940; +$CARE_DARK_RED_BG_130: #913832; +$CARE_DARK_RED_BG_90: #D3625A; +$CARE_DARK_SECONDARY_BG: rgba(255,255,255,0.15); +$CARE_DARK_SEPARATOR_0: rgba(255,255,255,0.05); +$CARE_DARK_SEPARATOR_1: rgba(255,255,255,0.15); +$CARE_DARK_STATELAYER_HOVERED: rgba(0,0,0,0.02); +$CARE_DARK_STATELAYER_PRESSED: rgba(255,255,255,0.1); +$CARE_DARK_STATELAYER_PRESSEDSTRENGTHENED: rgba(255,255,255,0.2); +$CARE_DARK_YELLOW_100: #CC9C00; +$CARE_DARK_YELLOW_120: #A37C00; +$CARE_DARK_YELLOW_170: #3D2F00; +$CARE_DARK_YELLOW_80: #D6AF33; +$CARE_DARK_YELLOW_90: #D1A519; +$CARE_DARK_YELLOW_BG_100: #BF9100; +$CARE_DARK_YELLOW_BG_110: #AB8200; +$CARE_DARK_YELLOW_BG_130: #866500; +$CARE_DARK_YELLOW_BG_90: #C59C1A; +$CARE_DARK_FG_HALF: rgba(255,255,255,0.65); +$CARE_DARK_RED: #FA5151; +$CARE_DARK_ORANGERED: #FF6146; +$CARE_DARK_ORANGE: #C87D2F; +$CARE_DARK_YELLOW: #CC9C00; +$CARE_DARK_GREEN: #74A800; +$CARE_DARK_LIGHTGREEN: #3EB575; +$CARE_DARK_TEXTGREEN: #259C5C; +$CARE_DARK_BRAND: #07C160; +$CARE_DARK_BLUE: #10AEFF; +$CARE_DARK_INDIGO: #1196FF; +$CARE_DARK_PURPLE: #8183FF; +$CARE_DARK_LINK: #7D90A9; +$CARE_DARK_REDORANGE: #FF6146; +$CARE_DARK_TAG_BACKGROUND_BLACK: rgba(255,255,255,0.05); +$CARE_DARK_FG: #fff; +$CARE_DARK_WHITE: rgba(255, 255, 255, 0.8); +$CARE_DARK_FG_5: rgba(255, 255, 255, 0.1); +$CARE_DARK_TAG_BACKGROUND_ORANGE: rgba(250, 157, 59, 0.1); +$CARE_DARK_TAG_BACKGROUND_GREEN: rgba(6, 174, 86, 0.1); +$CARE_DARK_TAG_TEXT_RED: rgba(250, 81, 81, 0.6); +$CARE_DARK_TAG_BACKGROUND_RED: rgba(250, 81, 81, 0.1); +$CARE_DARK_TAG_BACKGROUND_BLUE: rgba(16, 174, 255, 0.1); +$CARE_DARK_TAG_TEXT_ORANGE: rgba(250, 157, 59, 0.6); +$CARE_DARK_BG: #000; +$CARE_DARK_TAG_TEXT_GREEN: rgba(6, 174, 86, 0.6); +$CARE_DARK_TAG_TEXT_BLUE: rgba(16, 174, 255, 0.6); +$CARE_DARK_TAG_TEXT_BLACK: rgba(255, 255, 255, 0.5); diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/care-light.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/care-light.scss new file mode 100644 index 0000000000..3349127ad9 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/care-light.scss @@ -0,0 +1,149 @@ +$CARE_LIGHT_BG_0: #EDEDED; +$CARE_LIGHT_BG_1: #F7F7F7; +$CARE_LIGHT_BG_2: #FFFFFF; +$CARE_LIGHT_BG_3: #F7F7F7; +$CARE_LIGHT_BG_4: #4C4C4C; +$CARE_LIGHT_BG_5: #FFFFFF; +$CARE_LIGHT_BLUE_100: #007DBB; +$CARE_LIGHT_BLUE_120: #3FBEFF; +$CARE_LIGHT_BLUE_170: #B7E6FF; +$CARE_LIGHT_BLUE_80: #0C8BCC; +$CARE_LIGHT_BLUE_90: #0E9CE6; +$CARE_LIGHT_BLUE_BG_100: #48A6E2; +$CARE_LIGHT_BLUE_BG_110: #5AAFE4; +$CARE_LIGHT_BLUE_BG_130: #7FC0EA; +$CARE_LIGHT_BLUE_BG_90: #4095CB; +$CARE_LIGHT_BRAND_100: #018942; +$CARE_LIGHT_BRAND_120: #38CD7F; +$CARE_LIGHT_BRAND_170: #B4ECCE; +$CARE_LIGHT_BRAND_80: #059A4C; +$CARE_LIGHT_BRAND_90: #06AE56; +$CARE_LIGHT_BRAND_BG_100: #2AAE67; +$CARE_LIGHT_BRAND_BG_110: #3EB575; +$CARE_LIGHT_BRAND_BG_130: #69C694; +$CARE_LIGHT_BRAND_BG_90: #259C5C; +$CARE_LIGHT_FG_0: #000000; +$CARE_LIGHT_FG_0_5: #000000; +$CARE_LIGHT_FG_1: rgba(0,0,0,0.6); +$CARE_LIGHT_FG_2: rgba(0,0,0,0.42); +$CARE_LIGHT_FG_3: rgba(0,0,0,0.1); +$CARE_LIGHT_FG_4: rgba(0,0,0,0.15); +$CARE_LIGHT_GLYPH_0: #000000; +$CARE_LIGHT_GLYPH_1: rgba(0,0,0,0.6); +$CARE_LIGHT_GLYPH_2: rgba(0,0,0,0.42); +$CARE_LIGHT_GLYPH_WHITE_0: rgba(255,255,255,0.85); +$CARE_LIGHT_GLYPH_WHITE_1: rgba(255,255,255,0.55); +$CARE_LIGHT_GLYPH_WHITE_2: rgba(255,255,255,0.35); +$CARE_LIGHT_GLYPH_WHITE_3: #FFFFFF; +$CARE_LIGHT_GREEN_100: #4F8400; +$CARE_LIGHT_GREEN_120: #A7DB33; +$CARE_LIGHT_GREEN_170: #DEF1B3; +$CARE_LIGHT_GREEN_80: #74A800; +$CARE_LIGHT_GREEN_90: #82BD00; +$CARE_LIGHT_GREEN_BG_100: #96BE40; +$CARE_LIGHT_GREEN_BG_110: #A0C452; +$CARE_LIGHT_GREEN_BG_130: #B5D179; +$CARE_LIGHT_GREEN_BG_90: #86AA39; +$CARE_LIGHT_INDIGO_100: #0075E2; +$CARE_LIGHT_INDIGO_120: #439DF1; +$CARE_LIGHT_INDIGO_170: #B8DAF9; +$CARE_LIGHT_INDIGO_80: #106ABE; +$CARE_LIGHT_INDIGO_90: #1277D6; +$CARE_LIGHT_INDIGO_BG_100: #2B77BF; +$CARE_LIGHT_INDIGO_BG_110: #3F84C5; +$CARE_LIGHT_INDIGO_BG_130: #6BA0D2; +$CARE_LIGHT_INDIGO_BG_90: #266AAB; +$CARE_LIGHT_LIGHTGREEN_100: #2E8800; +$CARE_LIGHT_LIGHTGREEN_120: #AAEF87; +$CARE_LIGHT_LIGHTGREEN_170: #DEF9D1; +$CARE_LIGHT_LIGHTGREEN_80: #77BC54; +$CARE_LIGHT_LIGHTGREEN_90: #85D35E; +$CARE_LIGHT_LIGHTGREEN_BG_100: #72CF60; +$CARE_LIGHT_LIGHTGREEN_BG_110: #80D370; +$CARE_LIGHT_LIGHTGREEN_BG_130: #9CDD90; +$CARE_LIGHT_LIGHTGREEN_BG_90: #66B956; +$CARE_LIGHT_LINK_100: #576B95; +$CARE_LIGHT_LINK_120: #7888AA; +$CARE_LIGHT_LINK_170: #CCD2DE; +$CARE_LIGHT_LINK_80: #455577; +$CARE_LIGHT_LINK_90: #4E6085; +$CARE_LIGHT_LINKFINDER_100: #002666; +$CARE_LIGHT_MATERIAL_ATTACHMENTCOLUMN: rgba(245,245,245,0.95); +$CARE_LIGHT_MATERIAL_NAVIGATIONBAR: rgba(237,237,237,0.94); +$CARE_LIGHT_MATERIAL_REGULAR: rgba(247,247,247,0.3); +$CARE_LIGHT_MATERIAL_THICK: rgba(247,247,247,0.8); +$CARE_LIGHT_MATERIAL_THIN: rgba(255,255,255,0.2); +$CARE_LIGHT_MATERIAL_TOOLBAR: rgba(246,246,246,0.82); +$CARE_LIGHT_ORANGE_100: #E17719; +$CARE_LIGHT_ORANGE_120: #FBB062; +$CARE_LIGHT_ORANGE_170: #FDE1C3; +$CARE_LIGHT_ORANGE_80: #C87D2F; +$CARE_LIGHT_ORANGE_90: #E08C34; +$CARE_LIGHT_ORANGE_BG_100: #EA7800; +$CARE_LIGHT_ORANGE_BG_110: #EC8519; +$CARE_LIGHT_ORANGE_BG_130: #F0A04D; +$CARE_LIGHT_ORANGE_BG_90: #D26B00; +$CARE_LIGHT_ORANGERED_100: #D14730; +$CARE_LIGHT_OVERLAY: rgba(0,0,0,0.5); +$CARE_LIGHT_OVERLAY_WHITE: rgba(242,242,242,0.8); +$CARE_LIGHT_PURPLE_100: #6265F1; +$CARE_LIGHT_PURPLE_120: #8385F3; +$CARE_LIGHT_PURPLE_170: #D0D1FA; +$CARE_LIGHT_PURPLE_80: #5052C0; +$CARE_LIGHT_PURPLE_90: #595CD7; +$CARE_LIGHT_PURPLE_BG_100: #6769BA; +$CARE_LIGHT_PURPLE_BG_110: #7678C1; +$CARE_LIGHT_PURPLE_BG_130: #9496CE; +$CARE_LIGHT_PURPLE_BG_90: #5C5EA7; +$CARE_LIGHT_RED_100: #DC3636; +$CARE_LIGHT_RED_120: #FB7373; +$CARE_LIGHT_RED_170: #FDCACA; +$CARE_LIGHT_RED_80: #C84040; +$CARE_LIGHT_RED_90: #E14949; +$CARE_LIGHT_RED_BG_100: #CF5148; +$CARE_LIGHT_RED_BG_110: #D3625A; +$CARE_LIGHT_RED_BG_130: #DD847E; +$CARE_LIGHT_RED_BG_90: #B94840; +$CARE_LIGHT_SECONDARY_BG: rgba(0,0,0,0.1); +$CARE_LIGHT_SEPARATOR_0: rgba(0,0,0,0.1); +$CARE_LIGHT_SEPARATOR_1: rgba(0,0,0,0.15); +$CARE_LIGHT_STATELAYER_HOVERED: rgba(0,0,0,0.02); +$CARE_LIGHT_STATELAYER_PRESSED: rgba(0,0,0,0.1); +$CARE_LIGHT_STATELAYER_PRESSEDSTRENGTHENED: rgba(0,0,0,0.2); +$CARE_LIGHT_YELLOW_100: #BB8E00; +$CARE_LIGHT_YELLOW_120: #FFCF33; +$CARE_LIGHT_YELLOW_170: #FFECB2; +$CARE_LIGHT_YELLOW_80: #CC9C00; +$CARE_LIGHT_YELLOW_90: #E6AF00; +$CARE_LIGHT_YELLOW_BG_100: #EFB600; +$CARE_LIGHT_YELLOW_BG_110: #F0BD19; +$CARE_LIGHT_YELLOW_BG_130: #F3CC4D; +$CARE_LIGHT_YELLOW_BG_90: #D7A400; +$CARE_LIGHT_FG_HALF: #000000; +$CARE_LIGHT_RED: #DC3636; +$CARE_LIGHT_ORANGERED: #D14730; +$CARE_LIGHT_ORANGE: #E17719; +$CARE_LIGHT_YELLOW: #BB8E00; +$CARE_LIGHT_GREEN: #4F8400; +$CARE_LIGHT_LIGHTGREEN: #2E8800; +$CARE_LIGHT_TEXTGREEN: #06AE56; +$CARE_LIGHT_BRAND: #018942; +$CARE_LIGHT_BLUE: #007DBB; +$CARE_LIGHT_INDIGO: #0075E2; +$CARE_LIGHT_PURPLE: #6265F1; +$CARE_LIGHT_LINK: #576B95; +$CARE_LIGHT_TAG_TEXT_ORANGE: #E17719; +$CARE_LIGHT_TAG_TEXT_GREEN: #06AE56; +$CARE_LIGHT_TAG_TEXT_BLUE: #007DBB; +$CARE_LIGHT_REDORANGE: #D14730; +$CARE_LIGHT_TAG_TEXT_BLACK: rgba(0,0,0,0.5); +$CARE_LIGHT_WHITE: #FFFFFF; +$CARE_LIGHT_BG: #FFFFFF; +$CARE_LIGHT_FG: #000; +$CARE_LIGHT_FG_5: rgba(0, 0, 0, 0.05); +$CARE_LIGHT_TAG_BACKGROUND_ORANGE: rgba(225, 119, 25, 0.1); +$CARE_LIGHT_TAG_BACKGROUND_GREEN: rgba(6, 174, 86, 0.1); +$CARE_LIGHT_TAG_TEXT_RED: rgba(250, 81, 81, 0.6); +$CARE_LIGHT_TAG_BACKGROUND_RED: rgba(250, 81, 81, 0.1); +$CARE_LIGHT_TAG_BACKGROUND_BLUE: rgba(0, 125, 187, 0.1); +$CARE_LIGHT_TAG_BACKGROUND_BLACK: rgba(0, 0, 0, 0.05); diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/dark.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/dark.scss new file mode 100644 index 0000000000..661dc15ed1 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/dark.scss @@ -0,0 +1,149 @@ +$DARK_BG_0: #111111; +$DARK_BG_1: #1E1E1E; +$DARK_BG_2: #191919; +$DARK_BG_3: #202020; +$DARK_BG_4: #404040; +$DARK_BG_5: #2C2C2C; +$DARK_BLUE_100: #10AEFF; +$DARK_BLUE_120: #0C8BCC; +$DARK_BLUE_170: #04344D; +$DARK_BLUE_80: #3FBEFF; +$DARK_BLUE_90: #28B6FF; +$DARK_BLUE_BG_100: #48A6E2; +$DARK_BLUE_BG_110: #4095CB; +$DARK_BLUE_BG_130: #32749E; +$DARK_BLUE_BG_90: #5AAFE4; +$DARK_BRAND_100: #07C160; +$DARK_BRAND_120: #059A4C; +$DARK_BRAND_170: #023A1C; +$DARK_BRAND_80: #38CD7F; +$DARK_BRAND_90: #20C770; +$DARK_BRAND_BG_100: #2AAE67; +$DARK_BRAND_BG_110: #259C5C; +$DARK_BRAND_BG_130: #1D7A48; +$DARK_BRAND_BG_90: #3EB575; +$DARK_FG_0: rgba(255,255,255,0.8); +$DARK_FG_0_5: rgba(255,255,255,0.6); +$DARK_FG_1: rgba(255,255,255,0.5); +$DARK_FG_2: rgba(255,255,255,0.3); +$DARK_FG_3: rgba(255,255,255,0.1); +$DARK_FG_4: rgba(255,255,255,0.15); +$DARK_GLYPH_0: rgba(255,255,255,0.8); +$DARK_GLYPH_1: rgba(255,255,255,0.5); +$DARK_GLYPH_2: rgba(255,255,255,0.3); +$DARK_GLYPH_WHITE_0: rgba(255,255,255,0.8); +$DARK_GLYPH_WHITE_1: rgba(255,255,255,0.5); +$DARK_GLYPH_WHITE_2: rgba(255,255,255,0.3); +$DARK_GLYPH_WHITE_3: #FFFFFF; +$DARK_GREEN_100: #74A800; +$DARK_GREEN_120: #5C8600; +$DARK_GREEN_170: #233200; +$DARK_GREEN_80: #8FB933; +$DARK_GREEN_90: #82B01A; +$DARK_GREEN_BG_100: #789833; +$DARK_GREEN_BG_110: #6B882D; +$DARK_GREEN_BG_130: #65802B; +$DARK_GREEN_BG_90: #85A247; +$DARK_INDIGO_100: #1196FF; +$DARK_INDIGO_120: #0D78CC; +$DARK_INDIGO_170: #052D4D; +$DARK_INDIGO_80: #40ABFF; +$DARK_INDIGO_90: #28A0FF; +$DARK_INDIGO_BG_100: #0D78CC; +$DARK_INDIGO_BG_110: #0B6BB7; +$DARK_INDIGO_BG_130: #09548F; +$DARK_INDIGO_BG_90: #2585D1; +$DARK_LIGHTGREEN_100: #3EB575; +$DARK_LIGHTGREEN_120: #31905D; +$DARK_LIGHTGREEN_170: #123522; +$DARK_LIGHTGREEN_80: #64C390; +$DARK_LIGHTGREEN_90: #51BC83; +$DARK_LIGHTGREEN_BG_100: #31905D; +$DARK_LIGHTGREEN_BG_110: #2C8153; +$DARK_LIGHTGREEN_BG_130: #226541; +$DARK_LIGHTGREEN_BG_90: #31905D; +$DARK_LINK_100: #7D90A9; +$DARK_LINK_120: #647387; +$DARK_LINK_170: #252A32; +$DARK_LINK_80: #97A6BA; +$DARK_LINK_90: #899AB1; +$DARK_LINKFINDER_100: #DEE9FF; +$DARK_MATERIAL_ATTACHMENTCOLUMN: rgba(32,32,32,0.93); +$DARK_MATERIAL_NAVIGATIONBAR: rgba(18,18,18,0.9); +$DARK_MATERIAL_REGULAR: rgba(37,37,37,0.6); +$DARK_MATERIAL_THICK: rgba(34,34,34,0.9); +$DARK_MATERIAL_THIN: rgba(95,95,95,0.4); +$DARK_MATERIAL_TOOLBAR: rgba(35,35,35,0.93); +$DARK_ORANGE_100: #C87D2F; +$DARK_ORANGE_120: #A06425; +$DARK_ORANGE_170: #3B250E; +$DARK_ORANGE_80: #D39758; +$DARK_ORANGE_90: #CD8943; +$DARK_ORANGE_BG_100: #BB6000; +$DARK_ORANGE_BG_110: #A85600; +$DARK_ORANGE_BG_130: #824300; +$DARK_ORANGE_BG_90: #C1701A; +$DARK_ORANGERED_100: #FF6146; +$DARK_OVERLAY: rgba(0,0,0,0.8); +$DARK_OVERLAY_WHITE: rgba(242,242,242,0.8); +$DARK_PURPLE_100: #8183FF; +$DARK_PURPLE_120: #6768CC; +$DARK_PURPLE_170: #26274C; +$DARK_PURPLE_80: #9A9BFF; +$DARK_PURPLE_90: #8D8FFF; +$DARK_PURPLE_BG_100: #6768CC; +$DARK_PURPLE_BG_110: #5C5DB7; +$DARK_PURPLE_BG_130: #48498F; +$DARK_PURPLE_BG_90: #7677D1; +$DARK_RED_100: #FA5151; +$DARK_RED_120: #C84040; +$DARK_RED_170: #4B1818; +$DARK_RED_80: #FB7373; +$DARK_RED_90: #FA6262; +$DARK_RED_BG_100: #CF5148; +$DARK_RED_BG_110: #BA4940; +$DARK_RED_BG_130: #913832; +$DARK_RED_BG_90: #D3625A; +$DARK_SECONDARY_BG: rgba(255,255,255,0.1); +$DARK_SEPARATOR_0: rgba(255,255,255,0.05); +$DARK_SEPARATOR_1: rgba(255,255,255,0.15); +$DARK_STATELAYER_HOVERED: rgba(0,0,0,0.02); +$DARK_STATELAYER_PRESSED: rgba(255,255,255,0.1); +$DARK_STATELAYER_PRESSEDSTRENGTHENED: rgba(255,255,255,0.2); +$DARK_YELLOW_100: #CC9C00; +$DARK_YELLOW_120: #A37C00; +$DARK_YELLOW_170: #3D2F00; +$DARK_YELLOW_80: #D6AF33; +$DARK_YELLOW_90: #D1A519; +$DARK_YELLOW_BG_100: #BF9100; +$DARK_YELLOW_BG_110: #AB8200; +$DARK_YELLOW_BG_130: #866500; +$DARK_YELLOW_BG_90: #C59C1A; +$DARK_FG_HALF: rgba(255,255,255,0.6); +$DARK_RED: #FA5151; +$DARK_ORANGERED: #FF6146; +$DARK_ORANGE: #C87D2F; +$DARK_YELLOW: #CC9C00; +$DARK_GREEN: #74A800; +$DARK_LIGHTGREEN: #3EB575; +$DARK_TEXTGREEN: #259C5C; +$DARK_BRAND: #07C160; +$DARK_BLUE: #10AEFF; +$DARK_INDIGO: #1196FF; +$DARK_PURPLE: #8183FF; +$DARK_LINK: #7D90A9; +$DARK_REDORANGE: #FF6146; +$DARK_TAG_TEXT_BLACK: rgba(255,255,255,0.5); +$DARK_TAG_BACKGROUND_BLACK: rgba(255,255,255,0.05); +$DARK_WHITE: rgba(255,255,255,0.8); +$DARK_FG: #fff; +$DARK_BG: #000; +$DARK_FG_5: rgba(255, 255, 255, 0.1); +$DARK_TAG_BACKGROUND_ORANGE: rgba(250, 157, 59, 0.1); +$DARK_TAG_BACKGROUND_GREEN: rgba(6, 174, 86, 0.1); +$DARK_TAG_TEXT_RED: rgba(250, 81, 81, 0.6); +$DARK_TAG_BACKGROUND_RED: rgba(250, 81, 81, 0.1); +$DARK_TAG_BACKGROUND_BLUE: rgba(16, 174, 255, 0.1); +$DARK_TAG_TEXT_ORANGE: rgba(250, 157, 59, 0.6); +$DARK_TAG_TEXT_GREEN: rgba(6, 174, 86, 0.6); +$DARK_TAG_TEXT_BLUE: rgba(16, 174, 255, 0.6); diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/light.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/light.scss new file mode 100644 index 0000000000..6a97d18581 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/scss-vars/light.scss @@ -0,0 +1,149 @@ +$LIGHT_BG_0: #EDEDED; +$LIGHT_BG_1: #F7F7F7; +$LIGHT_BG_2: #FFFFFF; +$LIGHT_BG_3: #F7F7F7; +$LIGHT_BG_4: #4C4C4C; +$LIGHT_BG_5: #FFFFFF; +$LIGHT_BLUE_100: #10AEFF; +$LIGHT_BLUE_120: #3FBEFF; +$LIGHT_BLUE_170: #B7E6FF; +$LIGHT_BLUE_80: #0C8BCC; +$LIGHT_BLUE_90: #0E9CE6; +$LIGHT_BLUE_BG_100: #48A6E2; +$LIGHT_BLUE_BG_110: #5AAFE4; +$LIGHT_BLUE_BG_130: #7FC0EA; +$LIGHT_BLUE_BG_90: #4095CB; +$LIGHT_BRAND_100: #07C160; +$LIGHT_BRAND_120: #38CD7F; +$LIGHT_BRAND_170: #B4ECCE; +$LIGHT_BRAND_80: #059A4C; +$LIGHT_BRAND_90: #06AE56; +$LIGHT_BRAND_BG_100: #2AAE67; +$LIGHT_BRAND_BG_110: #3EB575; +$LIGHT_BRAND_BG_130: #69C694; +$LIGHT_BRAND_BG_90: #259C5C; +$LIGHT_FG_0: rgba(0,0,0,0.9); +$LIGHT_FG_0_5: rgba(0,0,0,0.9); +$LIGHT_FG_1: rgba(0,0,0,0.55); +$LIGHT_FG_2: rgba(0,0,0,0.3); +$LIGHT_FG_3: rgba(0,0,0,0.1); +$LIGHT_FG_4: rgba(0,0,0,0.15); +$LIGHT_GLYPH_0: rgba(0,0,0,0.9); +$LIGHT_GLYPH_1: rgba(0,0,0,0.55); +$LIGHT_GLYPH_2: rgba(0,0,0,0.3); +$LIGHT_GLYPH_WHITE_0: rgba(255,255,255,0.8); +$LIGHT_GLYPH_WHITE_1: rgba(255,255,255,0.5); +$LIGHT_GLYPH_WHITE_2: rgba(255,255,255,0.3); +$LIGHT_GLYPH_WHITE_3: #FFFFFF; +$LIGHT_GREEN_100: #91D300; +$LIGHT_GREEN_120: #A7DB33; +$LIGHT_GREEN_170: #DEF1B3; +$LIGHT_GREEN_80: #74A800; +$LIGHT_GREEN_90: #82BD00; +$LIGHT_GREEN_BG_100: #96BE40; +$LIGHT_GREEN_BG_110: #A0C452; +$LIGHT_GREEN_BG_130: #B5D179; +$LIGHT_GREEN_BG_90: #86AA39; +$LIGHT_INDIGO_100: #1485EE; +$LIGHT_INDIGO_120: #439DF1; +$LIGHT_INDIGO_170: #B8DAF9; +$LIGHT_INDIGO_80: #106ABE; +$LIGHT_INDIGO_90: #1277D6; +$LIGHT_INDIGO_BG_100: #2B77BF; +$LIGHT_INDIGO_BG_110: #3F84C5; +$LIGHT_INDIGO_BG_130: #6BA0D2; +$LIGHT_INDIGO_BG_90: #266AAB; +$LIGHT_LIGHTGREEN_100: #95EC69; +$LIGHT_LIGHTGREEN_120: #AAEF87; +$LIGHT_LIGHTGREEN_170: #DEF9D1; +$LIGHT_LIGHTGREEN_80: #77BC54; +$LIGHT_LIGHTGREEN_90: #85D35E; +$LIGHT_LIGHTGREEN_BG_100: #72CF60; +$LIGHT_LIGHTGREEN_BG_110: #80D370; +$LIGHT_LIGHTGREEN_BG_130: #9CDD90; +$LIGHT_LIGHTGREEN_BG_90: #66B956; +$LIGHT_LINK_100: #576B95; +$LIGHT_LINK_120: #7888AA; +$LIGHT_LINK_170: #CCD2DE; +$LIGHT_LINK_80: #455577; +$LIGHT_LINK_90: #4E6085; +$LIGHT_LINKFINDER_100: #002666; +$LIGHT_MATERIAL_ATTACHMENTCOLUMN: rgba(245,245,245,0.95); +$LIGHT_MATERIAL_NAVIGATIONBAR: rgba(237,237,237,0.94); +$LIGHT_MATERIAL_REGULAR: rgba(247,247,247,0.3); +$LIGHT_MATERIAL_THICK: rgba(247,247,247,0.8); +$LIGHT_MATERIAL_THIN: rgba(255,255,255,0.2); +$LIGHT_MATERIAL_TOOLBAR: rgba(246,246,246,0.82); +$LIGHT_ORANGE_100: #FA9D3B; +$LIGHT_ORANGE_120: #FBB062; +$LIGHT_ORANGE_170: #FDE1C3; +$LIGHT_ORANGE_80: #C87D2F; +$LIGHT_ORANGE_90: #E08C34; +$LIGHT_ORANGE_BG_100: #EA7800; +$LIGHT_ORANGE_BG_110: #EC8519; +$LIGHT_ORANGE_BG_130: #F0A04D; +$LIGHT_ORANGE_BG_90: #D26B00; +$LIGHT_ORANGERED_100: #FF6146; +$LIGHT_OVERLAY: rgba(0,0,0,0.5); +$LIGHT_OVERLAY_WHITE: rgba(242,242,242,0.8); +$LIGHT_PURPLE_100: #6467F0; +$LIGHT_PURPLE_120: #8385F3; +$LIGHT_PURPLE_170: #D0D1FA; +$LIGHT_PURPLE_80: #5052C0; +$LIGHT_PURPLE_90: #595CD7; +$LIGHT_PURPLE_BG_100: #6769BA; +$LIGHT_PURPLE_BG_110: #7678C1; +$LIGHT_PURPLE_BG_130: #9496CE; +$LIGHT_PURPLE_BG_90: #5C5EA7; +$LIGHT_RED_100: #FA5151; +$LIGHT_RED_120: #FB7373; +$LIGHT_RED_170: #FDCACA; +$LIGHT_RED_80: #C84040; +$LIGHT_RED_90: #E14949; +$LIGHT_RED_BG_100: #CF5148; +$LIGHT_RED_BG_110: #D3625A; +$LIGHT_RED_BG_130: #DD847E; +$LIGHT_RED_BG_90: #B94840; +$LIGHT_SECONDARY_BG: rgba(0,0,0,0.05); +$LIGHT_SEPARATOR_0: rgba(0,0,0,0.1); +$LIGHT_SEPARATOR_1: rgba(0,0,0,0.15); +$LIGHT_STATELAYER_HOVERED: rgba(0,0,0,0.02); +$LIGHT_STATELAYER_PRESSED: rgba(0,0,0,0.1); +$LIGHT_STATELAYER_PRESSEDSTRENGTHENED: rgba(0,0,0,0.2); +$LIGHT_YELLOW_100: #FFC300; +$LIGHT_YELLOW_120: #FFCF33; +$LIGHT_YELLOW_170: #FFECB2; +$LIGHT_YELLOW_80: #CC9C00; +$LIGHT_YELLOW_90: #E6AF00; +$LIGHT_YELLOW_BG_100: #EFB600; +$LIGHT_YELLOW_BG_110: #F0BD19; +$LIGHT_YELLOW_BG_130: #F3CC4D; +$LIGHT_YELLOW_BG_90: #D7A400; +$LIGHT_FG_HALF: rgba(0,0,0,0.9); +$LIGHT_RED: #FA5151; +$LIGHT_ORANGERED: #FF6146; +$LIGHT_ORANGE: #FA9D3B; +$LIGHT_YELLOW: #FFC300; +$LIGHT_GREEN: #91D300; +$LIGHT_LIGHTGREEN: #95EC69; +$LIGHT_TEXTGREEN: #06AE56; +$LIGHT_BRAND: #07C160; +$LIGHT_BLUE: #10AEFF; +$LIGHT_INDIGO: #1485EE; +$LIGHT_PURPLE: #6467F0; +$LIGHT_LINK: #576B95; +$LIGHT_TAG_TEXT_ORANGE: #FA9D3B; +$LIGHT_TAG_TEXT_GREEN: #06AE56; +$LIGHT_TAG_TEXT_BLUE: #10AEFF; +$LIGHT_REDORANGE: #FF6146; +$LIGHT_TAG_TEXT_BLACK: rgba(0,0,0,0.5); +$LIGHT_TAG_BACKGROUND_BLACK: rgba(0,0,0,0.05); +$LIGHT_WHITE: #FFFFFF; +$LIGHT_BG: #FFFFFF; +$LIGHT_FG: #000; +$LIGHT_FG_5: rgba(0, 0, 0, 0.05); +$LIGHT_TAG_BACKGROUND_ORANGE: rgba(250, 157, 59, 0.1); +$LIGHT_TAG_BACKGROUND_GREEN: rgba(6, 174, 86, 0.1); +$LIGHT_TAG_TEXT_RED: rgba(250, 81, 81, 0.6); +$LIGHT_TAG_BACKGROUND_RED: rgba(250, 81, 81, 0.1); +$LIGHT_TAG_BACKGROUND_BLUE: rgba(16, 174, 255, 0.1); diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/care-dark.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/care-dark.scss new file mode 100644 index 0000000000..47b4549f33 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/care-dark.scss @@ -0,0 +1,151 @@ +@mixin varsCareDark() { + --weui-BRAND: #07c160; + --weui-BLUE: #10aeff; + // --weui-GREEN: #74a800; + // --weui-INDIGO: #1196ff; + // --weui-LIGHTGREEN: #3eb575; + --weui-LINK: #7d90a9; + // --weui-ORANGE: #c87d2f; + // --weui-ORANGERED: #ff6146; + // --weui-PURPLE: #8183ff; + --weui-RED: #fa5151; + // --weui-REDORANGE: #ff6146; + // --weui-TEXTGREEN: #259c5c; + --weui-WHITE: rgba(255, 255, 255, 0.8); + --weui-YELLOW: #cc9c00; + --weui-BG: #000; + --weui-BG-0: #111; + --weui-BG-1: #1e1e1e; + --weui-BG-2: #191919; + --weui-BG-3: #202020; + --weui-BG-4: #404040; + --weui-BG-5: #2c2c2c; + --weui-FG: #fff; + --weui-FG-5: rgba(255, 255, 255, 0.1); + --weui-FG-HALF: rgba(255, 255, 255, 0.65); + // --weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, 0.05); + // --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1); + // --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1); + // --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1); + // --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1); + // --weui-TAG-TEXT-BLUE: rgba(16, 174, 255, 0.6); + // --weui-TAG-TEXT-BLACK: rgba(255, 255, 255, 0.5); + --weui-TAG-TEXT-GREEN: rgba(6, 174, 86, 0.6); + // --weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, 0.6); + // --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6); + // --weui-BLUE-100: #10aeff; + // --weui-BLUE-120: #0c8bcc; + // --weui-BLUE-170: #04344d; + // --weui-BLUE-80: #3fbeff; + // --weui-BLUE-90: #28b6ff; + // --weui-BLUE-BG-100: #48a6e2; + // --weui-BLUE-BG-110: #4095cb; + // --weui-BLUE-BG-130: #32749e; + // --weui-BLUE-BG-90: #5aafe4; + // --weui-BRAND-100: #07c160; + // --weui-BRAND-120: #059a4c; + // --weui-BRAND-170: #023a1c; + // --weui-BRAND-80: #38cd7f; + // --weui-BRAND-90: #20c770; + // --weui-BRAND-BG-100: #2aae67; + // --weui-BRAND-BG-110: #259c5c; + // --weui-BRAND-BG-130: #1d7a48; + // --weui-BRAND-BG-90: #3eb575; + // --weui-FG-0: rgba(255, 255, 255, 0.85); + // --weui-FG-0_5: rgba(255, 255, 255, 0.65); + // --weui-FG-1: rgba(255, 255, 255, 0.55); + // --weui-FG-2: rgba(255, 255, 255, 0.35); + // --weui-FG-3: rgba(255, 255, 255, 0.1); + // --weui-FG-4: rgba(255, 255, 255, 0.15); + // --weui-GLYPH-0: rgba(255, 255, 255, 0.85); + // --weui-GLYPH-1: rgba(255, 255, 255, 0.55); + // --weui-GLYPH-2: rgba(255, 255, 255, 0.35); + // --weui-GLYPH-WHITE-0: rgba(255, 255, 255, 0.85); + // --weui-GLYPH-WHITE-1: rgba(255, 255, 255, 0.55); + // --weui-GLYPH-WHITE-2: rgba(255, 255, 255, 0.35); + // --weui-GLYPH-WHITE-3: #fff; + // --weui-GREEN-100: #74a800; + // --weui-GREEN-120: #5c8600; + // --weui-GREEN-170: #233200; + // --weui-GREEN-80: #8fb933; + // --weui-GREEN-90: #82b01a; + // --weui-GREEN-BG-100: #789833; + // --weui-GREEN-BG-110: #6b882d; + // --weui-GREEN-BG-130: #65802b; + // --weui-GREEN-BG-90: #85a247; + // --weui-INDIGO-100: #1196ff; + // --weui-INDIGO-120: #0d78cc; + // --weui-INDIGO-170: #052d4d; + // --weui-INDIGO-80: #40abff; + // --weui-INDIGO-90: #28a0ff; + // --weui-INDIGO-BG-100: #0d78cc; + // --weui-INDIGO-BG-110: #0b6bb7; + // --weui-INDIGO-BG-130: #09548f; + // --weui-INDIGO-BG-90: #2585d1; + // --weui-LIGHTGREEN-100: #3eb575; + // --weui-LIGHTGREEN-120: #31905d; + // --weui-LIGHTGREEN-170: #123522; + // --weui-LIGHTGREEN-80: #64c390; + // --weui-LIGHTGREEN-90: #51bc83; + // --weui-LIGHTGREEN-BG-100: #31905d; + // --weui-LIGHTGREEN-BG-110: #2c8153; + // --weui-LIGHTGREEN-BG-130: #226541; + // --weui-LIGHTGREEN-BG-90: #31905d; + // --weui-LINK-100: #7d90a9; + // --weui-LINK-120: #647387; + // --weui-LINK-170: #252a32; + // --weui-LINK-80: #97a6ba; + // --weui-LINK-90: #899ab1; + // --weui-LINKFINDER-100: #dee9ff; + // --weui-MATERIAL-ATTACHMENTCOLUMN: rgba(32, 32, 32, 0.93); + // --weui-MATERIAL-NAVIGATIONBAR: rgba(18, 18, 18, 0.9); + // --weui-MATERIAL-REGULAR: rgba(37, 37, 37, 0.6); + // --weui-MATERIAL-THICK: rgba(34, 34, 34, 0.9); + // --weui-MATERIAL-THIN: rgba(245, 245, 245, 0.4); + // --weui-MATERIAL-TOOLBAR: rgba(35, 35, 35, 0.93); + // --weui-ORANGE-100: #c87d2f; + // --weui-ORANGE-120: #a06425; + // --weui-ORANGE-170: #3b250e; + // --weui-ORANGE-80: #d39758; + // --weui-ORANGE-90: #cd8943; + // --weui-ORANGE-BG-100: #bb6000; + // --weui-ORANGE-BG-110: #a85600; + // --weui-ORANGE-BG-130: #824300; + // --weui-ORANGE-BG-90: #c1701a; + // --weui-ORANGERED-100: #ff6146; + // --weui-OVERLAY: rgba(0, 0, 0, 0.8); + // --weui-OVERLAY-WHITE: rgba(242, 242, 242, 0.8); + // --weui-PURPLE-100: #8183ff; + // --weui-PURPLE-120: #6768cc; + // --weui-PURPLE-170: #26274c; + // --weui-PURPLE-80: #9a9bff; + // --weui-PURPLE-90: #8d8fff; + // --weui-PURPLE-BG-100: #6768cc; + // --weui-PURPLE-BG-110: #5c5db7; + // --weui-PURPLE-BG-130: #48498f; + // --weui-PURPLE-BG-90: #7677d1; + // --weui-RED-100: #fa5151; + // --weui-RED-120: #c84040; + // --weui-RED-170: #4b1818; + // --weui-RED-80: #fb7373; + // --weui-RED-90: #fa6262; + // --weui-RED-BG-100: #cf5148; + // --weui-RED-BG-110: #ba4940; + // --weui-RED-BG-130: #913832; + // --weui-RED-BG-90: #d3625a; + // --weui-SECONDARY-BG: rgba(255, 255, 255, 0.15); + // --weui-SEPARATOR-0: rgba(255, 255, 255, 0.05); + // --weui-SEPARATOR-1: rgba(255, 255, 255, 0.15); + // --weui-STATELAYER-HOVERED: rgba(0, 0, 0, 0.02); + // --weui-STATELAYER-PRESSED: rgba(255, 255, 255, 0.1); + // --weui-STATELAYER-PRESSEDSTRENGTHENED: rgba(255, 255, 255, 0.2); + // --weui-YELLOW-100: #cc9c00; + // --weui-YELLOW-120: #a37c00; + // --weui-YELLOW-170: #3d2f00; + // --weui-YELLOW-80: #d6af33; + // --weui-YELLOW-90: #d1a519; + // --weui-YELLOW-BG-100: #bf9100; + // --weui-YELLOW-BG-110: #ab8200; + // --weui-YELLOW-BG-130: #866500; + // --weui-YELLOW-BG-90: #c59c1a; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/care-light.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/care-light.scss new file mode 100644 index 0000000000..a31f2a11b6 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/care-light.scss @@ -0,0 +1,151 @@ +@mixin varsCareLight() { + --weui-BRAND: #018942; + --weui-BLUE: #007dbb; + // --weui-GREEN: #4f8400; + // --weui-INDIGO: #0075e2; + // --weui-LIGHTGREEN: #2e8800; + --weui-LINK: #576b95; + // --weui-ORANGE: #e17719; + // --weui-ORANGERED: #d14730; + // --weui-PURPLE: #6265f1; + --weui-RED: #dc3636; + // --weui-REDORANGE: #d14730; + // --weui-TEXTGREEN: #06ae56; + --weui-WHITE: #fff; + --weui-YELLOW: #bb8e00; + --weui-BG: #fff; + --weui-BG-0: #ededed; + --weui-BG-1: #f7f7f7; + --weui-BG-2: #fff; + --weui-BG-3: #f7f7f7; + --weui-BG-4: #4c4c4c; + --weui-BG-5: #fff; + --weui-FG: #000; + --weui-FG-5: rgba(0, 0, 0, 0.05); + --weui-FG-HALF: #000; + // --weui-TAG-BACKGROUND-BLUE: rgba(0, 125, 187, 0.1); + // --weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05); + // --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1); + // --weui-TAG-BACKGROUND-ORANGE: rgba(225, 119, 25, 0.1); + // --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1); + // --weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5); + // --weui-TAG-TEXT-BLUE: #007dbb; + --weui-TAG-TEXT-GREEN: #06ae56; + // --weui-TAG-TEXT-ORANGE: #e17719; + // --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6); + // --weui-BLUE-100: #007dbb; + // --weui-BLUE-120: #3fbeff; + // --weui-BLUE-170: #b7e6ff; + // --weui-BLUE-80: #0c8bcc; + // --weui-BLUE-90: #0e9ce6; + // --weui-BLUE-BG-100: #48a6e2; + // --weui-BLUE-BG-110: #5aafe4; + // --weui-BLUE-BG-130: #7fc0ea; + // --weui-BLUE-BG-90: #4095cb; + // --weui-BRAND-100: #018942; + // --weui-BRAND-120: #38cd7f; + // --weui-BRAND-170: #b4ecce; + // --weui-BRAND-80: #059a4c; + // --weui-BRAND-90: #06ae56; + // --weui-BRAND-BG-100: #2aae67; + // --weui-BRAND-BG-110: #3eb575; + // --weui-BRAND-BG-130: #69c694; + // --weui-BRAND-BG-90: #259c5c; + // --weui-FG-0: #000; + // --weui-FG-0_5: #000; + // --weui-FG-1: rgba(0, 0, 0, 0.6); + // --weui-FG-2: rgba(0, 0, 0, 0.42); + // --weui-FG-3: rgba(0, 0, 0, 0.1); + // --weui-FG-4: rgba(0, 0, 0, 0.15); + // --weui-GLYPH-0: #000; + // --weui-GLYPH-1: rgba(0, 0, 0, 0.6); + // --weui-GLYPH-2: rgba(0, 0, 0, 0.42); + // --weui-GLYPH-WHITE-0: rgba(255, 255, 255, 0.85); + // --weui-GLYPH-WHITE-1: rgba(255, 255, 255, 0.55); + // --weui-GLYPH-WHITE-2: rgba(255, 255, 255, 0.35); + // --weui-GLYPH-WHITE-3: #fff; + // --weui-GREEN-100: #4f8400; + // --weui-GREEN-120: #a7db33; + // --weui-GREEN-170: #def1b3; + // --weui-GREEN-80: #74a800; + // --weui-GREEN-90: #82bd00; + // --weui-GREEN-BG-100: #96be40; + // --weui-GREEN-BG-110: #a0c452; + // --weui-GREEN-BG-130: #b5d179; + // --weui-GREEN-BG-90: #86aa39; + // --weui-INDIGO-100: #0075e2; + // --weui-INDIGO-120: #439df1; + // --weui-INDIGO-170: #b8daf9; + // --weui-INDIGO-80: #106abe; + // --weui-INDIGO-90: #1277d6; + // --weui-INDIGO-BG-100: #2b77bf; + // --weui-INDIGO-BG-110: #3f84c5; + // --weui-INDIGO-BG-130: #6ba0d2; + // --weui-INDIGO-BG-90: #266aab; + // --weui-LIGHTGREEN-100: #2e8800; + // --weui-LIGHTGREEN-120: #aaef87; + // --weui-LIGHTGREEN-170: #def9d1; + // --weui-LIGHTGREEN-80: #77bc54; + // --weui-LIGHTGREEN-90: #85d35e; + // --weui-LIGHTGREEN-BG-100: #72cf60; + // --weui-LIGHTGREEN-BG-110: #80d370; + // --weui-LIGHTGREEN-BG-130: #9cdd90; + // --weui-LIGHTGREEN-BG-90: #66b956; + // --weui-LINK-100: #576b95; + // --weui-LINK-120: #7888aa; + // --weui-LINK-170: #ccd2de; + // --weui-LINK-80: #455577; + // --weui-LINK-90: #4e6085; + // --weui-LINKFINDER-100: #002666; + // --weui-MATERIAL-ATTACHMENTCOLUMN: rgba(245, 245, 245, 0.95); + // --weui-MATERIAL-NAVIGATIONBAR: rgba(237, 237, 237, 0.94); + // --weui-MATERIAL-REGULAR: rgba(247, 247, 247, 0.3); + // --weui-MATERIAL-THICK: rgba(247, 247, 247, 0.8); + // --weui-MATERIAL-THIN: rgba(255, 255, 255, 0.2); + // --weui-MATERIAL-TOOLBAR: rgba(246, 246, 246, 0.82); + // --weui-ORANGE-100: #e17719; + // --weui-ORANGE-120: #fbb062; + // --weui-ORANGE-170: #fde1c3; + // --weui-ORANGE-80: #c87d2f; + // --weui-ORANGE-90: #e08c34; + // --weui-ORANGE-BG-100: #ea7800; + // --weui-ORANGE-BG-110: #ec8519; + // --weui-ORANGE-BG-130: #f0a04d; + // --weui-ORANGE-BG-90: #d26b00; + // --weui-ORANGERED-100: #d14730; + // --weui-OVERLAY: rgba(0, 0, 0, 0.5); + // --weui-OVERLAY-WHITE: rgba(242, 242, 242, 0.8); + // --weui-PURPLE-100: #6265f1; + // --weui-PURPLE-120: #8385f3; + // --weui-PURPLE-170: #d0d1fa; + // --weui-PURPLE-80: #5052c0; + // --weui-PURPLE-90: #595cd7; + // --weui-PURPLE-BG-100: #6769ba; + // --weui-PURPLE-BG-110: #7678c1; + // --weui-PURPLE-BG-130: #9496ce; + // --weui-PURPLE-BG-90: #5c5ea7; + // --weui-RED-100: #dc3636; + // --weui-RED-120: #fb7373; + // --weui-RED-170: #fdcaca; + // --weui-RED-80: #c84040; + // --weui-RED-90: #e14949; + // --weui-RED-BG-100: #cf5148; + // --weui-RED-BG-110: #d3625a; + // --weui-RED-BG-130: #dd847e; + // --weui-RED-BG-90: #b94840; + // --weui-SECONDARY-BG: rgba(0, 0, 0, 0.1); + // --weui-SEPARATOR-0: rgba(0, 0, 0, 0.1); + // --weui-SEPARATOR-1: rgba(0, 0, 0, 0.15); + // --weui-STATELAYER-HOVERED: rgba(0, 0, 0, 0.02); + // --weui-STATELAYER-PRESSED: rgba(0, 0, 0, 0.1); + // --weui-STATELAYER-PRESSEDSTRENGTHENED: rgba(0, 0, 0, 0.2); + // --weui-YELLOW-100: #bb8e00; + // --weui-YELLOW-120: #ffcf33; + // --weui-YELLOW-170: #ffecb2; + // --weui-YELLOW-80: #cc9c00; + // --weui-YELLOW-90: #e6af00; + // --weui-YELLOW-BG-100: #efb600; + // --weui-YELLOW-BG-110: #f0bd19; + // --weui-YELLOW-BG-130: #f3cc4d; + // --weui-YELLOW-BG-90: #d7a400; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/dark.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/dark.scss new file mode 100644 index 0000000000..17161123b3 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/dark.scss @@ -0,0 +1,151 @@ +@mixin varsDark() { + --weui-BRAND: #07c160; + --weui-BLUE: #10aeff; + // --weui-GREEN: #74a800; + // --weui-INDIGO: #1196ff; + // --weui-LIGHTGREEN: #3eb575; + --weui-LINK: #7d90a9; + // --weui-ORANGE: #c87d2f; + // --weui-ORANGERED: #ff6146; + // --weui-PURPLE: #8183ff; + --weui-RED: #fa5151; + // --weui-REDORANGE: #ff6146; + // --weui-TEXTGREEN: #259c5c; + --weui-WHITE: rgba(255, 255, 255, 0.8); + --weui-YELLOW: #cc9c00; + --weui-BG: #000; + --weui-BG-0: #111; + --weui-BG-1: #1e1e1e; + --weui-BG-2: #191919; + --weui-BG-3: #202020; + --weui-BG-4: #404040; + --weui-BG-5: #2c2c2c; + --weui-FG: #fff; + --weui-FG-5: rgba(255, 255, 255, 0.1); + --weui-FG-HALF: rgba(255, 255, 255, 0.6); + // --weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, 0.05); + // --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1); + // --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1); + // --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1); + // --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1); + // --weui-TAG-TEXT-BLACK: rgba(255, 255, 255, 0.5); + // --weui-TAG-TEXT-BLUE: rgba(16, 174, 255, 0.6); + --weui-TAG-TEXT-GREEN: rgba(6, 174, 86, 0.6); + // --weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, 0.6); + // --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6); + // --weui-BLUE-100: #10aeff; + // --weui-BLUE-120: #0c8bcc; + // --weui-BLUE-170: #04344d; + // --weui-BLUE-80: #3fbeff; + // --weui-BLUE-90: #28b6ff; + // --weui-BLUE-BG-100: #48a6e2; + // --weui-BLUE-BG-110: #4095cb; + // --weui-BLUE-BG-130: #32749e; + // --weui-BLUE-BG-90: #5aafe4; + // --weui-BRAND-100: #07c160; + // --weui-BRAND-120: #059a4c; + // --weui-BRAND-170: #023a1c; + // --weui-BRAND-80: #38cd7f; + // --weui-BRAND-90: #20c770; + // --weui-BRAND-BG-100: #2aae67; + // --weui-BRAND-BG-110: #259c5c; + // --weui-BRAND-BG-130: #1d7a48; + // --weui-BRAND-BG-90: #3eb575; + // --weui-FG-0: rgba(255, 255, 255, 0.8); + // --weui-FG-0_5: rgba(255, 255, 255, 0.6); + // --weui-FG-1: rgba(255, 255, 255, 0.5); + // --weui-FG-2: rgba(255, 255, 255, 0.3); + // --weui-FG-3: rgba(255, 255, 255, 0.1); + // --weui-FG-4: rgba(255, 255, 255, 0.15); + // --weui-GLYPH-0: rgba(255, 255, 255, 0.8); + // --weui-GLYPH-1: rgba(255, 255, 255, 0.5); + // --weui-GLYPH-2: rgba(255, 255, 255, 0.3); + // --weui-GLYPH-WHITE-0: rgba(255, 255, 255, 0.8); + // --weui-GLYPH-WHITE-1: rgba(255, 255, 255, 0.5); + // --weui-GLYPH-WHITE-2: rgba(255, 255, 255, 0.3); + // --weui-GLYPH-WHITE-3: #fff; + // --weui-GREEN-100: #74a800; + // --weui-GREEN-120: #5c8600; + // --weui-GREEN-170: #233200; + // --weui-GREEN-80: #8fb933; + // --weui-GREEN-90: #82b01a; + // --weui-GREEN-BG-100: #789833; + // --weui-GREEN-BG-110: #6b882d; + // --weui-GREEN-BG-130: #65802b; + // --weui-GREEN-BG-90: #85a247; + // --weui-INDIGO-100: #1196ff; + // --weui-INDIGO-120: #0d78cc; + // --weui-INDIGO-170: #052d4d; + // --weui-INDIGO-80: #40abff; + // --weui-INDIGO-90: #28a0ff; + // --weui-INDIGO-BG-100: #0d78cc; + // --weui-INDIGO-BG-110: #0b6bb7; + // --weui-INDIGO-BG-130: #09548f; + // --weui-INDIGO-BG-90: #2585d1; + // --weui-LIGHTGREEN-100: #3eb575; + // --weui-LIGHTGREEN-120: #31905d; + // --weui-LIGHTGREEN-170: #123522; + // --weui-LIGHTGREEN-80: #64c390; + // --weui-LIGHTGREEN-90: #51bc83; + // --weui-LIGHTGREEN-BG-100: #31905d; + // --weui-LIGHTGREEN-BG-110: #2c8153; + // --weui-LIGHTGREEN-BG-130: #226541; + // --weui-LIGHTGREEN-BG-90: #31905d; + // --weui-LINK-100: #7d90a9; + // --weui-LINK-120: #647387; + // --weui-LINK-170: #252a32; + // --weui-LINK-80: #97a6ba; + // --weui-LINK-90: #899ab1; + // --weui-LINKFINDER-100: #dee9ff; + // --weui-MATERIAL-ATTACHMENTCOLUMN: rgba(32, 32, 32, 0.93); + // --weui-MATERIAL-NAVIGATIONBAR: rgba(18, 18, 18, 0.9); + // --weui-MATERIAL-REGULAR: rgba(37, 37, 37, 0.6); + // --weui-MATERIAL-THICK: rgba(34, 34, 34, 0.9); + // --weui-MATERIAL-THIN: rgba(95, 95, 95, 0.4); + // --weui-MATERIAL-TOOLBAR: rgba(35, 35, 35, 0.93); + // --weui-ORANGE-100: #c87d2f; + // --weui-ORANGE-120: #a06425; + // --weui-ORANGE-170: #3b250e; + // --weui-ORANGE-80: #d39758; + // --weui-ORANGE-90: #cd8943; + // --weui-ORANGE-BG-100: #bb6000; + // --weui-ORANGE-BG-110: #a85600; + // --weui-ORANGE-BG-130: #824300; + // --weui-ORANGE-BG-90: #c1701a; + // --weui-ORANGERED-100: #ff6146; + // --weui-OVERLAY: rgba(0, 0, 0, 0.8); + // --weui-OVERLAY-WHITE: rgba(242, 242, 242, 0.8); + // --weui-PURPLE-100: #8183ff; + // --weui-PURPLE-120: #6768cc; + // --weui-PURPLE-170: #26274c; + // --weui-PURPLE-80: #9a9bff; + // --weui-PURPLE-90: #8d8fff; + // --weui-PURPLE-BG-100: #6768cc; + // --weui-PURPLE-BG-110: #5c5db7; + // --weui-PURPLE-BG-130: #48498f; + // --weui-PURPLE-BG-90: #7677d1; + // --weui-RED-100: #fa5151; + // --weui-RED-120: #c84040; + // --weui-RED-170: #4b1818; + // --weui-RED-80: #fb7373; + // --weui-RED-90: #fa6262; + // --weui-RED-BG-100: #cf5148; + // --weui-RED-BG-110: #ba4940; + // --weui-RED-BG-130: #913832; + // --weui-RED-BG-90: #d3625a; + // --weui-SECONDARY-BG: rgba(255, 255, 255, 0.1); + // --weui-SEPARATOR-0: rgba(255, 255, 255, 0.05); + // --weui-SEPARATOR-1: rgba(255, 255, 255, 0.15); + // --weui-STATELAYER-HOVERED: rgba(0, 0, 0, 0.02); + // --weui-STATELAYER-PRESSED: rgba(255, 255, 255, 0.1); + // --weui-STATELAYER-PRESSEDSTRENGTHENED: rgba(255, 255, 255, 0.2); + // --weui-YELLOW-100: #cc9c00; + // --weui-YELLOW-120: #a37c00; + // --weui-YELLOW-170: #3d2f00; + // --weui-YELLOW-80: #d6af33; + // --weui-YELLOW-90: #d1a519; + // --weui-YELLOW-BG-100: #bf9100; + // --weui-YELLOW-BG-110: #ab8200; + // --weui-YELLOW-BG-130: #866500; + // --weui-YELLOW-BG-90: #c59c1a; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/light.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/light.scss new file mode 100644 index 0000000000..2af06757e9 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/theme/vars/light.scss @@ -0,0 +1,151 @@ +@mixin varsLight() { + --weui-BRAND: #07c160; + --weui-BLUE: #10aeff; + // --weui-GREEN: #91d300; + // --weui-INDIGO: #1485ee; + // --weui-LIGHTGREEN: #95ec69; + --weui-LINK: #576b95; + // --weui-ORANGE: #fa9d3b; + // --weui-ORANGERED: #ff6146; + // --weui-PURPLE: #6467f0; + --weui-RED: #fa5151; + // --weui-REDORANGE: #ff6146; + // --weui-TEXTGREEN: #06ae56; + --weui-WHITE: #fff; + --weui-YELLOW: #ffc300; + --weui-BG: #fff; + --weui-BG-0: #ededed; + --weui-BG-1: #f7f7f7; + --weui-BG-2: #fff; + --weui-BG-3: #f7f7f7; + --weui-BG-4: #4c4c4c; + --weui-BG-5: #fff; + --weui-FG: #000; + --weui-FG-5: rgba(0, 0, 0, 0.05); + --weui-FG-HALF: rgba(0, 0, 0, 0.9); + // --weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05); + // --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1); + // --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1); + // --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1); + // --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1); + // --weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5); + // --weui-TAG-TEXT-BLUE: #10aeff; + --weui-TAG-TEXT-GREEN: #06ae56; + // --weui-TAG-TEXT-ORANGE: #fa9d3b; + // --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6); + // --weui-BLUE-100: #10aeff; + // --weui-BLUE-120: #3fbeff; + // --weui-BLUE-170: #b7e6ff; + // --weui-BLUE-80: #0c8bcc; + // --weui-BLUE-90: #0e9ce6; + // --weui-BLUE-BG-100: #48a6e2; + // --weui-BLUE-BG-110: #5aafe4; + // --weui-BLUE-BG-130: #7fc0ea; + // --weui-BLUE-BG-90: #4095cb; + // --weui-BRAND-100: #07c160; + // --weui-BRAND-120: #38cd7f; + // --weui-BRAND-170: #b4ecce; + // --weui-BRAND-80: #059a4c; + // --weui-BRAND-90: #06ae56; + // --weui-BRAND-BG-100: #2aae67; + // --weui-BRAND-BG-110: #3eb575; + // --weui-BRAND-BG-130: #69c694; + // --weui-BRAND-BG-90: #259c5c; + // --weui-FG-0: rgba(0, 0, 0, 0.9); + // --weui-FG-0_5: rgba(0, 0, 0, 0.9); + // --weui-FG-1: rgba(0, 0, 0, 0.55); + // --weui-FG-2: rgba(0, 0, 0, 0.3); + // --weui-FG-3: rgba(0, 0, 0, 0.1); + // --weui-FG-4: rgba(0, 0, 0, 0.15); + // --weui-GLYPH-0: rgba(0, 0, 0, 0.9); + // --weui-GLYPH-1: rgba(0, 0, 0, 0.55); + // --weui-GLYPH-2: rgba(0, 0, 0, 0.3); + // --weui-GLYPH-WHITE-0: rgba(255, 255, 255, 0.8); + // --weui-GLYPH-WHITE-1: rgba(255, 255, 255, 0.5); + // --weui-GLYPH-WHITE-2: rgba(255, 255, 255, 0.3); + // --weui-GLYPH-WHITE-3: #fff; + // --weui-GREEN-100: #91d300; + // --weui-GREEN-120: #a7db33; + // --weui-GREEN-170: #def1b3; + // --weui-GREEN-80: #74a800; + // --weui-GREEN-90: #82bd00; + // --weui-GREEN-BG-100: #96be40; + // --weui-GREEN-BG-110: #a0c452; + // --weui-GREEN-BG-130: #b5d179; + // --weui-GREEN-BG-90: #86aa39; + // --weui-INDIGO-100: #1485ee; + // --weui-INDIGO-120: #439df1; + // --weui-INDIGO-170: #b8daf9; + // --weui-INDIGO-80: #106abe; + // --weui-INDIGO-90: #1277d6; + // --weui-INDIGO-BG-100: #2b77bf; + // --weui-INDIGO-BG-110: #3f84c5; + // --weui-INDIGO-BG-130: #6ba0d2; + // --weui-INDIGO-BG-90: #266aab; + // --weui-LIGHTGREEN-100: #95ec69; + // --weui-LIGHTGREEN-120: #aaef87; + // --weui-LIGHTGREEN-170: #def9d1; + // --weui-LIGHTGREEN-80: #77bc54; + // --weui-LIGHTGREEN-90: #85d35e; + // --weui-LIGHTGREEN-BG-100: #72cf60; + // --weui-LIGHTGREEN-BG-110: #80d370; + // --weui-LIGHTGREEN-BG-130: #9cdd90; + // --weui-LIGHTGREEN-BG-90: #66b956; + // --weui-LINK-100: #576b95; + // --weui-LINK-120: #7888aa; + // --weui-LINK-170: #ccd2de; + // --weui-LINK-80: #455577; + // --weui-LINK-90: #4e6085; + // --weui-LINKFINDER-100: #002666; + // --weui-MATERIAL-ATTACHMENTCOLUMN: rgba(245, 245, 245, 0.95); + // --weui-MATERIAL-NAVIGATIONBAR: rgba(237, 237, 237, 0.94); + // --weui-MATERIAL-REGULAR: rgba(247, 247, 247, 0.3); + // --weui-MATERIAL-THICK: rgba(247, 247, 247, 0.8); + // --weui-MATERIAL-THIN: rgba(255, 255, 255, 0.2); + // --weui-MATERIAL-TOOLBAR: rgba(246, 246, 246, 0.82); + // --weui-ORANGE-100: #fa9d3b; + // --weui-ORANGE-120: #fbb062; + // --weui-ORANGE-170: #fde1c3; + // --weui-ORANGE-80: #c87d2f; + // --weui-ORANGE-90: #e08c34; + // --weui-ORANGE-BG-100: #ea7800; + // --weui-ORANGE-BG-110: #ec8519; + // --weui-ORANGE-BG-130: #f0a04d; + // --weui-ORANGE-BG-90: #d26b00; + // --weui-ORANGERED-100: #ff6146; + // --weui-OVERLAY: rgba(0, 0, 0, 0.5); + // --weui-OVERLAY-WHITE: rgba(242, 242, 242, 0.8); + // --weui-PURPLE-100: #6467f0; + // --weui-PURPLE-120: #8385f3; + // --weui-PURPLE-170: #d0d1fa; + // --weui-PURPLE-80: #5052c0; + // --weui-PURPLE-90: #595cd7; + // --weui-PURPLE-BG-100: #6769ba; + // --weui-PURPLE-BG-110: #7678c1; + // --weui-PURPLE-BG-130: #9496ce; + // --weui-PURPLE-BG-90: #5c5ea7; + // --weui-RED-100: #fa5151; + // --weui-RED-120: #fb7373; + // --weui-RED-170: #fdcaca; + // --weui-RED-80: #c84040; + // --weui-RED-90: #e14949; + // --weui-RED-BG-100: #cf5148; + // --weui-RED-BG-110: #d3625a; + // --weui-RED-BG-130: #dd847e; + // --weui-RED-BG-90: #b94840; + // --weui-SECONDARY-BG: rgba(0, 0, 0, 0.05); + // --weui-SEPARATOR-0: rgba(0, 0, 0, 0.1); + // --weui-SEPARATOR-1: rgba(0, 0, 0, 0.15); + // --weui-STATELAYER-HOVERED: rgba(0, 0, 0, 0.02); + // --weui-STATELAYER-PRESSED: rgba(0, 0, 0, 0.1); + // --weui-STATELAYER-PRESSEDSTRENGTHENED: rgba(0, 0, 0, 0.2); + // --weui-YELLOW-100: #ffc300; + // --weui-YELLOW-120: #ffcf33; + // --weui-YELLOW-170: #ffecb2; + // --weui-YELLOW-80: #cc9c00; + // --weui-YELLOW-90: #e6af00; + // --weui-YELLOW-BG-100: #efb600; + // --weui-YELLOW-BG-110: #f0bd19; + // --weui-YELLOW-BG-130: #f3cc4d; + // --weui-YELLOW-BG-90: #d7a400; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/color.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/color.scss new file mode 100644 index 0000000000..4911da3c27 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/color.scss @@ -0,0 +1,29 @@ +// @import '../theme/fn'; + +// @include setColor(--weui-BG-COLOR-ACTIVE, #ececec, overlay(rgba(255, 255, 255, 0.05), #2c2c2c)); + +// color +$weuiColorPrimary: #1AAD19; // var(--weui-BRAND); +$weuiColorWarn: #E64340; // var(--weui-RED); + +// active mask +// $weuiActiveMaskBlack: rgba(0, 0, 0, 0.15); + +// link +$weuiLinkColorDefault: #586C94; // var(--weui-LINK); + +// background +$weuiBgColorDefault: #EFEFF4; // var(--weui-BG-0); +// $weuiBgColorPrimary: var(--weui-BG-1); +$weuiBgColorActive: #ECECEC; // var(--weui-BG-COLOR-ACTIVE); + +// line +$weuiLineColorLight: #E5E5E5; // var(--weui-FG-3); +$weuiLineColorDark: #BCBAB6; // var(--weui-FG-2); + +// text +$weuiTextColorTitle: #000000; // var(--weui-FG-0); +// $weuiTextColorDesc: var(--weui-FG-1); +$weuiTextColorTips: #B2B2B2; // var(--weui-FG-2); +$weuiTextColorWarn: $weuiColorWarn; +$weuiTextColorGray: #999999; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/global.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/global.scss new file mode 100644 index 0000000000..7dd44a1fed --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/global.scss @@ -0,0 +1,5 @@ +// font +$weuiFontEN: -apple-system-font, "Helvetica Neue"; // system-ui, -apple-system, "Helvetica Neue"; +$weuiFontCN: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"; +$weuiFontSans: sans-serif; +$weuiFontDefault: $weuiFontEN, $weuiFontSans; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-button.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-button.scss new file mode 100644 index 0000000000..3653e15610 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-button.scss @@ -0,0 +1,62 @@ +// @use "sass:math"; + +// body, +// .wx-root, +// page { +// --weui-BTN-HEIGHT: 48; +// --weui-BTN-HEIGHT-MEDIUM: 40; +// --weui-BTN-HEIGHT-SMALL: 32; +// } +// @include setColor(--weui-BTN-ACTIVE-MASK, rgba(0,0,0,0.1), rgba(255,255,255,0.1)); + +// @include setColor(--weui-BTN-DEFAULT-ACTIVE-BG, overlay(rgba(0, 0, 0, 0.05), #f2f2f2), overlay(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.08))); + +// $weuiBtnWidth: 184px; +$weuiBtnHeight: 46px; // 48px; +$weuiBtnFontSize: 18px; // 17px; +$weuiBtnBorderRadius: 5px; // 8px; +$weuiBtnDefaultGap: 15px; // 16px; + +$weuiBtnMiniFontSize: 13px; // 14px; +$weuiBtnMiniHeight: 2.3; // 32px; + +// $weuiBtnCellHeight: 56px; +// $weuiBtnCellGap: 16px; +// $weuiBtnCellLineHeight: em(math.div($weuiBtnCellHeight - 2 * $weuiBtnCellGap, $weuiBtnFontSize)); + +$weuiBtnFontColor: #fff; +$weuiBtnDisabledFontColor: rgba(255, 255, 255, 0.6); // var(--weui-FG-4); +// $weuiBtnDisabledBg: var(--weui-FG-5); +$weuiBtnActiveFontColor: rgba(255, 255, 255, 0.6); + +// default +$weuiBtnDefaultFontColor: #000000; // var(--weui-FG-0); +$weuiBtnDefaultDisabledFontColor: rgba(0, 0, 0, 0.3); // $weuiBtnDisabledFontColor; +$weuiBtnDefaultActiveFontColor: rgba(0, 0, 0, 0.6); +$weuiBtnDefaultActiveBg: #DEDEDE; // var(--weui-BTN-DEFAULT-ACTIVE-BG); +$weuiBtnDefaultDisabledBg: #F7F7F7; // $weuiBtnDisabledBg; +$weuiBtnDefaultBg: #F8F8F8; + +// primary +// $weuiBtnPrimaryFontColor: $weuiBtnFontColor; +// $weuiBtnPrimaryDisabledFontColor: $weuiBtnDisabledFontColor; +$weuiBtnPrimaryBg: #1AAD19; // var(--weui-BRAND); +$weuiBtnPrimaryActiveBg: #179B16; // var(--weui-TAG-TEXT-GREEN); +$weuiBtnPrimaryDisabledBg: #9ED99D; // $weuiBtnDisabledBg; + +// warn +// $weuiBtnWarnFontColor: $weuiColorWarn; +// $weuiBtnWarnDisabledFontColor: $weuiBtnDisabledFontColor; +$weuiBtnWarnBg: #E64340; // $weuiBtnDefaultBg; +$weuiBtnWarnActiveBg: #CE3C39; +$weuiBtnwarnDisabledBg: #EC8B89; // $weuiBtnDefaultDisabledBg; + +$weuiBtnPlainPrimaryColor: rgba(26, 173, 25, 1); +$weuiBtnPlainPrimaryBorderColor: rgba(26, 173, 25, 1); +$weuiBtnPlainPrimaryActiveColor: rgba(26, 173, 25, .6); +$weuiBtnPlainPrimaryActiveBorderColor: rgba(26, 173, 25, .6); + +$weuiBtnPlainDefaultColor: rgba(53, 53, 53, 1); +$weuiBtnPlainDefaultBorderColor: rgba(53, 53, 53, 1); +$weuiBtnPlainDefaultActiveColor: rgba(53, 53, 53, .6); +$weuiBtnPlainDefaultActiveBorderColor: rgba(53, 53, 53, .6); diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-cell.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-cell.scss new file mode 100644 index 0000000000..eed0902968 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-cell.scss @@ -0,0 +1,25 @@ +@use 'sass:math'; + +$weuiCellBg:#FFFFFF; // var(--weui-BG-2); +$weuiCellBorderColor:#e5e5e5; // $weuiLineColorLight; +$weuiCellGapV:10px; // 16px; +$weuiCellGapH:15px; // 16px; +$weuiCellInnerGapH:.35em; // 16px; +$weuiCellHeight: 45px; // 56px; +$weuiCellFontSize: 17px; +$weuiCellTipsFontSize: 14px; +$weuiCellLabelWidth: 105px; +// $weuiCellActiveBg: $weuiBgColorActive; + +$weuiCellLineHeight: calc(math.div($weuiCellHeight - 2 * $weuiCellGapV, $weuiCellFontSize)); // 高度减去上下padding的行高 +$weuiCellsMarginTop: em(math.div(20, $weuiCellFontSize)); // 8px; + +// weui switch +$weuiSwitchHeight: 32px; + +// weui uploader +$weuiUploaderBorderColor:#D9D9D9; +$weuiUploaderActiveBorderColor:#999999; +$weuiUploaderFileSpacing: 9px; +$weuiUploaderSize: 79px; +$weuiUploaderBorderWidth: 1px; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-dialog.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-dialog.scss new file mode 100644 index 0000000000..277be6438d --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-dialog.scss @@ -0,0 +1,7 @@ +@include setColor(--weui-DIALOG-LINE-COLOR, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + +$weuiDialogBackgroundColor: #FFFFFF; // var(--weui-BG-2); +$weuiDialogLineColor: #D5D5D6; // var(--weui-DIALOG-LINE-COLOR); +$weuiDialogLinkColor: #3CC51F; // $weuiLinkColorDefault; +$weuiDialogLinkActiveBc: #EEEEEE; // $weuiBgColorActive; +$weuiDialogGapWidth: 1.6em; // 24px; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-grid.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-grid.scss new file mode 100644 index 0000000000..47989bbc41 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-grid.scss @@ -0,0 +1,4 @@ +$weuiGridBorderColor:#D9D9D9; // var(--weui-FG-3); +$weuiGridFontSize: 14px; +$weuiGridIconSize: 28px; +$weuiGridColumnCount: 3; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-msg.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-msg.scss new file mode 100644 index 0000000000..812bfa2aa2 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-msg.scss @@ -0,0 +1,7 @@ +$weuiMsgPaddingTop:36px; // 48px; +$weuiMsgIconGap:30px; +$weuiMsgTitleGap:5px; // 16px; +$weuiMsgTextGap:25px; +$weuiMsgOprGap:25px; +$weuiMsgExtraAreaGap:15px; +$weuiMsgExtraAreaOfMinHeight:438px; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-progress.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-progress.scss new file mode 100644 index 0000000000..e9f458cc95 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-progress.scss @@ -0,0 +1,5 @@ +$weuiProgressBg: #EBEBEB; // $weuiBgColorDefault; +$weuiProgressColor: #09BB07; // $weuiColorPrimary; +$weuiProgressHeight: 3px; +$weuiProgressCloseBg: #EF4F4F; +$weuiProgressActiveBg: #C13E3E; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-tab.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-tab.scss new file mode 100644 index 0000000000..9cd0a79141 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/base/variable/weui-tab.scss @@ -0,0 +1,2 @@ +$weuiNavBarHeight: 56px; +$weuiTabBarHeight: 50px; // Note: WEUI 为 60px diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/icon/weui-font.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/icon/weui-font.scss new file mode 100644 index 0000000000..7427ccb7d0 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/icon/weui-font.scss @@ -0,0 +1,24 @@ +@font-face { + font-weight: normal; + font-style: normal; + font-family: "weui"; + src: url('data:application/octet-stream;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzJAKEx+AAABfAAAAFZjbWFw65cFHQAAAhwAAAJQZ2x5ZvCRR/EAAASUAAAKtGhlYWQMPROtAAAA4AAAADZoaGVhCCwD+gAAALwAAAAkaG10eEJo//8AAAHUAAAASGxvY2EYqhW4AAAEbAAAACZtYXhwASEAVQAAARgAAAAgbmFtZeNcHtgAAA9IAAAB5nBvc3T6bLhLAAARMAAAAOYAAQAAA+gAAABaA+j/////A+kAAQAAAAAAAAAAAAAAAAAAABIAAQAAAAEAACbZbxtfDzz1AAsD6AAAAADUm2dvAAAAANSbZ2///wAAA+kD6gAAAAgAAgAAAAAAAAABAAAAEgBJAAUAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQOwAZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6gHqEQPoAAAAWgPqAAAAAAABAAAAAAAAAAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+j//wPoAAAD6AAAAAAABQAAAAMAAAAsAAAABAAAAXQAAQAAAAAAbgADAAEAAAAsAAMACgAAAXQABABCAAAABAAEAAEAAOoR//8AAOoB//8AAAABAAQAAAABAAIAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAANwAAAAAAAAAEQAA6gEAAOoBAAAAAQAA6gIAAOoCAAAAAgAA6gMAAOoDAAAAAwAA6gQAAOoEAAAABAAA6gUAAOoFAAAABQAA6gYAAOoGAAAABgAA6gcAAOoHAAAABwAA6ggAAOoIAAAACAAA6gkAAOoJAAAACQAA6goAAOoKAAAACgAA6gsAAOoLAAAACwAA6gwAAOoMAAAADAAA6g0AAOoNAAAADQAA6g4AAOoOAAAADgAA6g8AAOoPAAAADwAA6hAAAOoQAAAAEAAA6hEAAOoRAAAAEQAAAAAARgCMANIBJAF4AcQCMgJgAqgC/ANIA6YD/gROBKAE9AVaAAAAAgAAAAADrwOtABQAKQAAASIHBgcGFBcWFxYyNzY3NjQnJicmAyInJicmNDc2NzYyFxYXFhQHBgcGAfV4Z2Q7PDw7ZGfwZmQ7PDw7ZGZ4bl5bNjc3Nlte215bNjc3NlteA608O2Rn8GdjOzw8O2Nn8GdkOzz8rzc1W17bXlw1Nzc1XF7bXls1NwAAAAACAAAAAAOzA7MAFwAtAAABIgcGBwYVFBcWFxYzMjc2NzY1NCcmJyYTBwYiLwEmNjsBETQ2OwEyFhURMzIWAe52Z2Q7PT07ZGd2fGpmOz4+O2ZpIXYOKA52Dg0XXQsHJgcLXRcNA7M+O2ZqfHZnZDs9PTtkZ3Z9aWY7Pv3wmhISmhIaARcICwsI/ukaAAMAAAAAA+UD5QAXACMALAAAASIHBgcGFRQXFhcWMzI3Njc2NTQnJicmAxQrASI1AzQ7ATIHJyImNDYyFhQGAe6Ecm9BRERBb3KEiXZxQkREQnF1aQIxAwgCQgMBIxIZGSQZGQPkREJxdomEcm9BRERBb3KEinVxQkT9HQICAWICAjEZIxkZIxkAAAAAAgAAAAADsQPkABkALgAAAQYHBgc2BREUFxYXFhc2NzY3NjURJBcmJyYTAQYvASY/ATYyHwEWNjclNjIfARYB9VVVQk+v/tFHPmxebGxdbT1I/tGvT0JVo/7VBASKAwMSAQUBcQEFAgESAgUBEQQD4xMYEhk3YP6sjnVlSD8cHD9IZXWOAVRgNxkSGP62/tkDA48EBBkCAVYCAQHlAQIQBAAAAAADAAAAAAOxA+QAGwAqADMAAAEGBwYHBgcGNxEUFxYXFhc2NzY3NjURJBcmJyYHMzIWFQMUBisBIicDNDYTIiY0NjIWFAYB9UFBODssO38gRz5sXmxsXW09SP7YqFBBVW80BAYMAwImBQELBh4PFhYeFRUD5A8SDhIOEikK/q2PdWRJPh0dPklkdY8BU141GRIY/AYE/sYCAwUBOgQG/kAVHxUVHxUAAAACAAAAAAPkA+QAFwAtAAABIgcGBwYVFBcWFxYzMjc2NzY1NCcmJyYTAQYiLwEmPwE2Mh8BFjI3ATYyHwEWAe6Ecm9BQ0NCbnODiXVxQkREQnF1kf6gAQUBowMDFgEFAYUCBQEBQwIFARUEA+NEQnF1iYNzbkJDQ0FvcoSJdXFCRP6j/qUBAagEBR4CAWYBAQENAgIVBAAAAAQAAAAAA68DrQAUACkAPwBDAAABIgcGBwYUFxYXFjI3Njc2NCcmJyYDIicmJyY0NzY3NjIXFhcWFAcGBwYTBQ4BLwEmBg8BBhYfARYyNwE+ASYiFzAfAQH1eGdkOzw8O2Rn8GZkOzw8O2RmeG5eWzY3NzZbXtteWzY3NzZbXmn+9gYSBmAGDwUDBQEGfQUQBgElBQELEBUBAQOtPDtkZ/BnYzs8PDtjZ/BnZDs8/K83NVte215cNTc3NVxe215bNTcCJt0FAQVJBQIGBAcRBoAGBQEhBQ8LBAEBAAABAAAAAAO7AzoAFwAAEy4BPwE+AR8BFjY3ATYWFycWFAcBBiInPQoGBwUHGgzLDCELAh0LHwsNCgr9uQoeCgGzCyEOCw0HCZMJAQoBvgkCCg0LHQv9sQsKAAAAAAIAAAAAA+UD5gAXACwAAAEiBwYHBhUUFxYXFjMyNzY3NjU0JyYnJhMHBi8BJicmNRM0NjsBMhYVExceAQHvhHJvQUNDQm5zg4l1cUJEREJxdVcQAwT6AwIEEAMCKwIDDsUCAQPlREJxdYmDc25CQ0NBb3KEiXVxQkT9VhwEAncCAgMGAXoCAwMC/q2FAgQAAAQAAAAAA68DrQADABgALQAzAAABMB8BAyIHBgcGFBcWFxYyNzY3NjQnJicmAyInJicmNDc2NzYyFxYXFhQHBgcGAyMVMzUjAuUBAfJ4Z2Q7PDw7ZGfwZmQ7PDw7ZGZ4bl5bNjc3Nlte215bNjc3NltemyT92QKDAQEBLDw7ZGfwZ2M7PDw7Y2fwZ2Q7PPyvNzVbXtteXDU3NzVcXtteWzU3AjH9JAAAAAMAAAAAA+QD5AAXACcAMAAAASIHBgcGFRQXFhcWMzI3Njc2NTQnJicmAzMyFhUDFAYrASImNQM0NhMiJjQ2MhYUBgHuhHJvQUNDQm5zg4l1cUJEREJxdZ42BAYMAwInAwMMBh8PFhYeFhYD40RCcXWJg3NuQkNDQW9yhIl1cUJE/vYGBf7AAgMDAgFABQb+NhYfFhYfFgAABAAAAAADwAPAAAgAEgAoAD0AAAEyNjQmIgYUFhcjFTMRIxUzNSMDIgcGBwYVFBYXFjMyNzY3NjU0Jy4BAyInJicmNDc2NzYyFxYXFhQHBgcGAfQYISEwISFRjzk5yTorhG5rPT99am+DdmhlPD4+PMyFbV5bNTc3NVte2l5bNTc3NVteAqAiLyIiLyI5Hf7EHBwCsT89a26Ed8w8Pj48ZWh2g29qffyjNzVbXtpeWzU3NzVbXtpeWzU3AAADAAAAAAOoA6gACwAgADUAAAEHJwcXBxc3FzcnNwMiBwYHBhQXFhcWMjc2NzY0JyYnJgMiJyYnJjQ3Njc2MhcWFxYUBwYHBgKOmpocmpocmpocmpq2dmZiOjs7OmJm7GZiOjs7OmJmdmtdWTQ2NjRZXdZdWTQ2NjRZXQKqmpocmpocmpocmpoBGTs6YmbsZmI6Ozs6YmbsZmI6O/zCNjRZXdZdWTQ2NjRZXdZdWTQ2AAMAAAAAA+kD6gAaAC8AMAAAAQYHBiMiJyYnJjQ3Njc2MhcWFxYVFAcGBwEHATI3Njc2NCcmJyYiBwYHBhQXFhcWMwKONUBCR21dWjU3NzVaXdpdWzU2GBcrASM5/eBXS0grKysrSEuuSkkqLCwqSUpXASMrFxg2NVtd2l1aNTc3NVpdbUdCQDX+3jkBGSsrSEuuSkkqLCwqSUquS0grKwAC//8AAAPoA+gAFAAwAAABIgcGBwYQFxYXFiA3Njc2ECcmJyYTFg4BIi8BBwYuATQ/AScmPgEWHwE3Nh4BBg8BAfSIdHFDRERDcXQBEHRxQ0REQ3F0SQoBFBsKoqgKGxMKqKIKARQbCqKoChsUAQqoA+hEQ3F0/vB0cUNERENxdAEQdHFDRP1jChsTCqiiCgEUGwqiqAobFAEKqKIKARQbCqIAAAIAAAAAA+QD5AAXADQAAAEiBwYHBhUUFxYXFjMyNzY3NjU0JyYnJhMUBiMFFxYUDwEGLwEuAT8BNh8BFhQPAQUyFh0BAe6Ecm9BQ0NCbnODiXVxQkREQnF1fwQC/pGDAQEVAwTsAgEC7AQEFAIBhAFwAgMD40RCcXWJg3NuQkNDQW9yhIl1cUJE/fYCAwuVAgQCFAQE0AIFAtEEBBQCBQGVCwMDJwAAAAUAAAAAA9QD0wAjACcANwBHAEgAAAERFAYjISImNREjIiY9ATQ2MyE1NDYzITIWHQEhMhYdARQGIyERIREHIgYVERQWOwEyNjURNCYjISIGFREUFjsBMjY1ETQmKwEDeyYb/XYbJkMJDQ0JAQYZEgEvExkBBgkNDQn9CQJc0QkNDQktCQ0NCf7sCQ0NCS0JDQ0JLQMi/TQbJiYbAswMCiwJDS4SGRkSLg0JLAoM/UwCtGsNCf5NCQ0NCQGzCQ0NCf5NCQ0NCQGzCQ0AAAAAEADGAAEAAAAAAAEABAAAAAEAAAAAAAIABwAEAAEAAAAAAAMABAALAAEAAAAAAAQABAAPAAEAAAAAAAUACwATAAEAAAAAAAYABAAeAAEAAAAAAAoAKwAiAAEAAAAAAAsAEwBNAAMAAQQJAAEACABgAAMAAQQJAAIADgBoAAMAAQQJAAMACAB2AAMAAQQJAAQACAB+AAMAAQQJAAUAFgCGAAMAAQQJAAYACACcAAMAAQQJAAoAVgCkAAMAAQQJAAsAJgD6d2V1aVJlZ3VsYXJ3ZXVpd2V1aVZlcnNpb24gMS4wd2V1aUdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAHcAZQB1AGkAUgBlAGcAdQBsAGEAcgB3AGUAdQBpAHcAZQB1AGkAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAZQB1AGkARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETAAZjaXJjbGUIZG93bmxvYWQEaW5mbwxzYWZlX3N1Y2Nlc3MJc2FmZV93YXJuB3N1Y2Nlc3MOc3VjY2Vzcy1jaXJjbGURc3VjY2Vzcy1uby1jaXJjbGUHd2FpdGluZw53YWl0aW5nLWNpcmNsZQR3YXJuC2luZm8tY2lyY2xlBmNhbmNlbAZzZWFyY2gFY2xlYXIEYmFjawZkZWxldGUAAAAA') format('truetype'); +} + + +[class^="weui-icon-"], +[class*=" weui-icon-"] { + display: inline-block; + vertical-align: middle; + font: normal normal normal 14px / 1 "weui"; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + + &::before { + // 平滑升级 + display: inline-block; + margin-left: .2em; + margin-right: .2em; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/icon/weui-icon_font.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/icon/weui-icon_font.scss new file mode 100644 index 0000000000..9de8a344fb --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/icon/weui-icon_font.scss @@ -0,0 +1,21 @@ +@import './weui-font'; + +[class^="weui-icon_"]:before, +[class*=" weui-icon_"]:before { + margin: 0; +} + +// [class^="weui-icon-"], +// [class*=" weui-icon-"] { +// & { +// display: inline-block; +// vertical-align: middle; +// font-size: 10px; +// width: 2.4em; +// height: 2.4em; +// mask-position: 50% 50%; +// mask-repeat: no-repeat; +// mask-size: 100%; +// background-color: currentColor; +// } +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/index.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/index.scss new file mode 100644 index 0000000000..aa00ced9ca --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/index.scss @@ -0,0 +1,19 @@ +html, +body { + width: 100%; + height: 100%; +} + +@import './base/variable/global'; +@import './base/reset'; + +// icon font +@import './icon/weui-icon_font'; + +@import './base/variable/weui-cell'; +@import './widget/weui-cell/weui-check'; + +// @import './widget/weui-loading/weui-loading'; + +// 小程序 patch 兼容文件，放在最后 +@import './base/patch'; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-agree.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-agree.scss new file mode 100644 index 0000000000..a8ac4c9a71 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-agree.scss @@ -0,0 +1,130 @@ +.weui-agree { + display: block; // flex; + padding: .5em 15px; + // text-align: justify; + // justify-content: center; + // align-items: center; + // @include hyphens; + + // line-height: 1.6; + font-size: 13px; // 14px; + // -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + + a, + navigator { + color: $weuiLinkColorDefault; + } + navigator { + display: inline; + } +} +.weui-agree__text { + color: $weuiTextColorGray; // $weuiTextColorDesc; + // margin-left: 2px; + // min-width: 0; +} +.weui-agree__checkbox { + appearance: none; + // display: inline-block; + border: 1px solid #D1D1D1; // 0; + outline: 0; + border-radius: 3px; + position: relative; + top: 2px; + // vertical-align: 0; // middle; + // background-color: #FFFFFF; // currentColor; + // mask-position: 0 0; + // mask-repeat: no-repeat; + // mask-size: 100%; + // mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E); + // color: $weuiLineColorDark; + width: 13px; // 1em; + height: 13px; // 1em; + font-size: 0; // 17px; + // flex-shrink: 0; + // margin-top: 0; + + &:checked { + &::before { + font-family: 'weui'; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + text-align: center; + speak: none; + display: inline-block; + vertical-align: middle; + text-decoration: inherit; + content: '\EA08'; + color: #09BB07; + font-size: 13px; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -48%) scale(.73); + } + } + + &:disabled { + background-color: #E1E1E1; + + &:before { + color: #ADADAD; + } + } +} +// .weui-agree__checkbox-check { // 兼容小程序 +// opacity: 0; +// position: absolute; +// width: 1px; +// height: 1px; +// overflow: hidden; +// } +// .weui-agree__checkbox:checked, +// .weui-agree__checkbox-check[aria-checked="true"] + .weui-agree__checkbox { +// mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E); +// color: $weuiColorPrimary; +// } +// .weui-agree_animate { +// animation: weuiAgree 0.3s 1; +// } + +// @keyframes weuiAgree { +// 0% { +// transform: translateX(0); +// } + +// 16% { +// transform: translateX(-8px); +// } + +// 28% { +// transform: translateX(-16px); +// } + +// 44% { +// transform: translateX(0); +// } + +// 59% { +// transform: translateX(-16px); +// } + +// 73% { +// transform: translateX(0); +// } + +// 82% { +// transform: translateX(16px); +// } + +// 94% { +// transform: translateX(8px); +// } + +// 100% { +// transform: translateX(0); +// } +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-animate.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-animate.scss new file mode 100644 index 0000000000..f06c206e21 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-animate.scss @@ -0,0 +1,75 @@ +@keyframes weuiSlideUp { + from { + transform: translate3d(0, 100%, 0); + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.weui-animate-slide-up { + animation: weuiSlideUp ease 0.3s forwards; +} + +@keyframes weuiSlideDown { + from { + transform: translate3d(0, 0, 0); + } + + to { + transform: translate3d(0, 100%, 0); + } +} + +.weui-animate-slide-down { + animation: weuiSlideDown ease 0.3s forwards; +} + +@keyframes weuiFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.weui-animate-fade-in { + animation: weuiFadeIn ease 0.3s forwards; +} + +@keyframes weuiFadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +.weui-animate-fade-out { + animation: weuiFadeOut ease 0.3s forwards; +} +// transition +// //模态弹窗/提示组件通用显示 +// .weui-transition { +// &.weui-mask { +// transition: opacity 0.3s, visibility 0.3s; +// opacity: 0; +// visibility: hidden; +// } +// &.weui-half-screen-dialog { +// transition: transform 0.3s; +// transform: translateY(100%); +// } +// } +// .weui-transition_show { +// &.weui-mask { +// opacity: 1; +// visibility: visible; +// } +// &.weui-half-screen-dialog { +// transform: translateY(0); +// } +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_bottom-fixed.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_bottom-fixed.scss new file mode 100644 index 0000000000..7f959bef40 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_bottom-fixed.scss @@ -0,0 +1,141 @@ +$weuiBottomFixedOprMaskHeight:80px; + +.weui-bottom-fixed-opr-page { + height: 100%; + display: flex; + flex-direction: column; +} +.weui-bottom-fixed-opr-page__content { + min-height: 0; + flex: 1; + padding-bottom: $weuiBottomFixedOprMaskHeight; + box-sizing: border-box; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} +.weui-bottom-fixed-opr-page__tool { + padding: 16px 32px 24px; + padding: 16px calc(32px + constant(safe-area-inset-right)) calc(24px + constant(safe-area-inset-bottom)) calc(32px + constant(safe-area-inset-left)); + padding: 16px calc(32px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(32px + env(safe-area-inset-left)); + background: rgba(255, 255, 255, 1); + position: relative; + z-index: 50; + &::before { + content: ''; + height: $weuiBottomFixedOprMaskHeight; + background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); + position: absolute; + bottom: calc(100% - 1px); + left: 0; + right: 0; + transform: translate3d(0, 0, 0); + pointer-events: none; + } +} + +.weui-bottom-fixed-opr-page__tool { + @include dark { + background:rgba(25,25,25,1); + }; + &::before { + @include dark { + background: linear-gradient(to top, rgba(25,25,25,1), rgba(25,25,25,0)); + }; + } +} +.weui-bottom-fixed-opr-page__tips { + margin-bottom: 24px; + padding: 0 32px; + text-align: center; +} + + +// 按钮组水平布局与垂直布局切换 +.weui-bottom-fixed-opr-page { + .weui-bottom-fixed-opr { + @include weuiBtnWrapLayoutDefault(); + } +} +.weui-bottom-fixed-opr-page_btn-wrap { + .weui-bottom-fixed-opr { + @include weuiBtnWrapLayoutWrap(); + } +} + + +// 新版底部悬浮，支持表单和半屏 +.weui-bottom-fixed-opr-page { + &.weui-form { + padding-top: 0; + + .weui-form__bd { + padding-top: 56px; + padding-top: calc(56px + constant(safe-area-inset-top)); + padding-top: calc(56px + env(safe-area-inset-top)); + } + .weui-form__ft { + padding-bottom: 0; + } + .weui-form__control-area { + margin-bottom: 0; + } + } + + &.weui-half-screen-dialog { + padding: 0; + + .weui-half-screen-dialog__hd, + .weui-half-screen-dialog__bd, + .weui-half-screen-dialog__ft { + padding-left: 24px; + padding-left: calc(24px + constant(safe-area-inset-left)); + padding-left: calc(24px + env(safe-area-inset-left)); + padding-right: 24px; + padding-right: calc(24px + constant(safe-area-inset-right)); + padding-right: calc(24px + env(safe-area-inset-right)); + } + .weui-half-screen-dialog__bd { + padding-bottom: 80px; + } + .weui-half-screen-dialog__ft { + padding-bottom: 64px; + padding-bottom: calc(64px + constant(safe-area-inset-bottom)); + padding-bottom: calc(64px + env(safe-area-inset-bottom)); + } + } +} + + +// 旧版半屏底部悬浮 +.weui-half-screen-dialog_bottom-fixed { + &.weui-half-screen-dialog { + padding: 0; + .weui-half-screen-dialog__hd { + padding: 0 24px; + padding: 0 calc(24px + constant(safe-area-inset-right)) 0 calc(24px + constant(safe-area-inset-left)); + padding: 0 calc(24px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left)); + } + .weui-half-screen-dialog__bd { + padding-bottom: 0; + display: flex; + flex-direction: column; + } + .weui-half-screen-dialog__ft { + padding: 0; // 底部悬浮按钮的半屏不需要ft，但防止开发者封装组件时强制包含ft要把padding设为0 + } + .weui-bottom-fixed-opr-page { + flex: 1; + min-height: 0; + } + .weui-bottom-fixed-opr-page__content { + padding: 0 24px; + padding: 0 calc(24px + constant(safe-area-inset-right)) 0 calc(24px + constant(safe-area-inset-left)); + padding: 0 calc(24px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left)); + } + .weui-bottom-fixed-opr { + padding: 16px 0 64px; + padding: 16px 0 calc(64px + constant(safe-area-inset-bottom)); + padding: 16px 0 calc(64px + env(safe-area-inset-bottom)); + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_cell.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_cell.scss new file mode 100644 index 0000000000..520d7cbf26 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_cell.scss @@ -0,0 +1,41 @@ +.weui-btn_cell { + position: relative; + display: block; + margin-left: auto; + margin-right: auto; + box-sizing: border-box; + font-size: $weuiBtnFontSize; + text-align: center; + text-decoration: none; + color: $weuiBtnFontColor; + line-height: $weuiBtnCellLineHeight; + padding: $weuiBtnCellGap; + @include setTapColor(); + + overflow: hidden; + background-color: var(--weui-BG-5); + & + & { + margin-top: $weuiBtnDefaultGap; + } + &:active { + background-color: $weuiBgColorActive; + } +} +.weui-btn_cell__icon { + display: inline-block; + vertical-align: middle; + width: 24px; + height: 24px; + margin: -0.2em 0.34em 0 0; +} +.weui-btn_cell-default { + color: var(--weui-FG-0); +} +.weui-btn_cell-primary { + color: $weuiLinkColorDefault; +} +.weui-btn_cell-warn { + color: $weuiColorWarn; +} + + diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_default.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_default.scss new file mode 100644 index 0000000000..c860fec9aa --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_default.scss @@ -0,0 +1,11 @@ +.weui-btn_default { + color: $weuiBtnDefaultFontColor; + background-color: $weuiBtnDefaultBg; + &:not(.weui-btn_disabled):visited { + color: $weuiBtnDefaultFontColor; + } + &:not(.weui-btn_disabled):active { + color: $weuiBtnDefaultActiveFontColor; + background-color: $weuiBtnDefaultActiveBg; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_disabled.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_disabled.scss new file mode 100644 index 0000000000..f7e7bf0bd3 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_disabled.scss @@ -0,0 +1,18 @@ +// .weui-btn_disabled, +// .weui-btn[disabled] { +// color: var(--weui-FG-4); +// background-color: var(--weui-BG-1); +// } +.weui-btn_disabled { + color: $weuiBtnDisabledFontColor; + &.weui-btn_default { + color: $weuiBtnDefaultDisabledFontColor; + background-color: $weuiBtnDefaultDisabledBg; + } + &.weui-btn_primary { + background-color: $weuiBtnPrimaryDisabledBg; + } + &.weui-btn_warn { + background-color: $weuiBtnwarnDisabledBg; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_global.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_global.scss new file mode 100644 index 0000000000..fc0e31441c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_global.scss @@ -0,0 +1,62 @@ +@use 'sass:math'; + +.weui-btn { + position: relative; + display: block; + // width: $weuiBtnWidth; + margin-left: auto; + margin-right: auto; + // padding: 12px 24px; + padding-left: 14px; + padding-right: 14px; + box-sizing: border-box; + // font-weight: 500; + font-size: $weuiBtnFontSize; + text-align: center; + text-decoration: none; + color: $weuiBtnFontColor; + line-height: em(math.div(($weuiBtnHeight), $weuiBtnFontSize)); + border-radius: $weuiBtnBorderRadius; + @include setTapColor(); + overflow: hidden; // none; + + &::after { + content: ' '; + width: 200%; + height: 200%; + position: absolute; + top: 0; + left: 0; + border: 1px solid rgba(0, 0, 0, 0.2); + transform: scale(0.5); + transform-origin: 0 0; + box-sizing: border-box; + border-radius: $weuiBtnBorderRadius * 2; + } + // &:active { + // &::before { + // content: ''; + // position: absolute; + // top: 0; + // left: 0; + // width: 100%; + // height: 100%; + // background-color: var(--weui-BTN-ACTIVE-MASK); + // border-radius: $weuiBtnBorderRadius; + // } + + // &.weui-btn_loading, + // &.weui-btn_disabled, + // &[disabled] { + // &::before { + // display: none; + // } + // } + // } +} +// .weui-btn_block { +// width: auto; +// } +.weui-btn_inline { + display: inline-block; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_loading.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_loading.scss new file mode 100644 index 0000000000..a81908a81c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_loading.scss @@ -0,0 +1,31 @@ +.weui-btn_loading { + .weui-loading { + margin: -0.2em 0.34em 0 0; // -0.2em 8px 0 0; + } + // .weui-mask-loading { + // margin: -0.2em 8px 0 0; + // color: currentColor; + // } + // .weui-primary-loading { + // margin: -0.2em 8px 0 0; + // vertical-align: middle; + // color: currentColor; + // &::before { + // content: ''; + // } + // } + + &.weui-btn_primary, + &.weui-btn_warn { + color: $weuiBtnActiveFontColor; + } + + &.weui-btn_primary { + // color: var(--weui-WHITE); + background-color: $weuiBtnPrimaryActiveBg; + } + + &.weui-btn_warn { + background-color: $weuiBtnWarnActiveBg; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_overlay.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_overlay.scss new file mode 100644 index 0000000000..185c8cade6 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_overlay.scss @@ -0,0 +1,7 @@ +.weui-btn_overlay { + color: var(--weui-BRAND); + background-color: $LIGHT_BG_5; + &:not(.weui-btn_disabled):visited { + color: var(--weui-BRAND); + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_plain.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_plain.scss new file mode 100644 index 0000000000..3a2836a7f6 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_plain.scss @@ -0,0 +1,32 @@ +.weui-btn_plain-primary { + color: $weuiBtnPlainPrimaryColor; + border: 1px solid $weuiBtnPlainPrimaryBorderColor; + + &:not(.weui-btn_plain-disabled):active { + color: $weuiBtnPlainPrimaryActiveColor; + border-color: $weuiBtnPlainPrimaryActiveBorderColor; + } + + &:after { + border-width: 0; + } +} + +.weui-btn_plain-default { + color: $weuiBtnPlainDefaultColor; + border: 1px solid $weuiBtnPlainDefaultBorderColor; + + &:not(.weui-btn_plain-disabled):active { + color: $weuiBtnPlainDefaultActiveColor; + border-color: $weuiBtnPlainDefaultActiveBorderColor; + } + + &:after { + border-width: 0; + } +} + +.weui-btn_plain-disabled { + color: rgba(0, 0, 0, .2); + border-color: rgba(0, 0, 0, .2); +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_primary.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_primary.scss new file mode 100644 index 0000000000..5b26e3456b --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_primary.scss @@ -0,0 +1,10 @@ +.weui-btn_primary { + background-color: $weuiBtnPrimaryBg; + &:not(.weui-btn_disabled):visited { + color: $weuiBtnFontColor; // $weuiBtnPrimaryFontColor; + } + &:not(.weui-btn_disabled):active { + color: $weuiBtnActiveFontColor; + background-color: $weuiBtnPrimaryActiveBg; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_warn.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_warn.scss new file mode 100644 index 0000000000..ede6624417 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-btn_warn.scss @@ -0,0 +1,11 @@ +.weui-btn_warn { + // color: $weuiBtnWarnFontColor; + background-color: $weuiBtnWarnBg; + &:not(.weui-btn_disabled):visited { + color: $weuiBtnFontColor; // $weuiBtnWarnFontColor; + } + &:not(.weui-btn_disabled):active { + color: $weuiBtnActiveFontColor; + background-color: $weuiBtnWarnActiveBg; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-button.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-button.scss new file mode 100644 index 0000000000..13cc8f5321 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-button/weui-button.scss @@ -0,0 +1,105 @@ +@import 'weui-btn_global'; +@import 'weui-btn_default'; +@import 'weui-btn_primary'; +@import 'weui-btn_warn'; +@import 'weui-btn_disabled'; +@import 'weui-btn_loading'; +@import 'weui-btn_plain'; + +button, +input { + &.weui-btn { + width: 100%; + border-width: 0; + outline: 0; + -webkit-appearance: none; + &:focus { + outline: 0; + } + } + &.weui-btn_inline, + &.weui-btn_mini { + width: auto; + } + + &.weui-btn_plain-primary, + &.weui-btn_plain-default { + border-width: 1px; + background-color: transparent; + } +} + +.weui-btn_mini { + display: inline-block; + // width: auto; + // line-height: calc((32 - 12) / 14); + padding: 0 1.32em; // 6px 12px; + font-size: $weuiBtnMiniFontSize; // 14px; + line-height: $weuiBtnMiniHeight; + // border-radius: 6px; +} + +// .weui-btn_xmini { +// display: inline-block; +// width: auto; +// padding: 4px 12px; +// line-height: calc((28 - 8) / 14); +// font-size: 14px; +// font-weight: 500; +// border-radius: 4px; +// } + +/* gap between btn */ +.weui-btn { + & + .weui-btn { + margin-top: $weuiBtnDefaultGap; + } + // &.weui-btn_mini + .weui-btn.weui-btn_mini { + // margin-top: auto; + // } + // &.weui-btn_xmini + .weui-btn.weui-btn_xmini { + // margin-top: auto; + // } +} + +.weui-btn.weui-btn_inline + .weui-btn.weui-btn_inline { + margin-top: auto; + margin-left: $weuiBtnDefaultGap; +} + +.weui-btn-area { + // margin: 48px $weuiBtnDefaultGap 8px; + margin: $weuiCellsMarginTop $weuiBtnDefaultGap .3em; +} +.weui-btn-area_inline { + display: flex; + .weui-btn { + margin-top: auto; + margin-right: $weuiBtnDefaultGap; + width: 100%; + flex: 1; + &:last-child { + margin-right: 0; + } + } +} + +// .weui-btn_reset { +// background: transparent; +// border: 0; +// padding: 0; +// outline: 0; +// font-size: inherit; +// } +// .weui-btn_icon { +// background: transparent; +// border: 0; +// padding: 0; +// outline: 0; +// font-size: 0; +// &:active { +// [class*="weui-icon-"] { +// color: var(--weui-FG-1); +// } +// } +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-access.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-access.scss new file mode 100644 index 0000000000..2305143879 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-access.scss @@ -0,0 +1,49 @@ +.weui-cell_access { + @include setTapColor(); + + color: inherit; + &:active { + background-color: #ECECEC; + // &::after { + // content: ''; + // position: absolute; + // left: 0; + // right: 0; + // top: 0; + // bottom: 0; + // background: var(--weui-FG-3); + // pointer-events: none; + // } + } + .weui-cell__ft { + padding-right: 13px; // 24px; + position: relative; + &::after { + content: ' '; + @include setArrow(right, 6px, #C8C8CD, 2px); + // width: 12px; + // height: 24px; + // mask-position: 0 0; + // mask-repeat: no-repeat; + // mask-size: 100%; + // background-color: currentColor; + // color: $weuiTextColorTips; + // mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + position: absolute; + top: 50%; + right: 2px; // 0; + margin-top: -4px; // 12px; + } + } +} +.weui-cell_link { + color: $weuiLinkColorDefault; + font-size: 14px; + + // 由于weui-cell:first-child的:before为隐藏，所以这里要重新显示出来 + &:first-child { + &::before { + display: block; + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-cell_global.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-cell_global.scss new file mode 100644 index 0000000000..1f75c94e57 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-cell_global.scss @@ -0,0 +1,126 @@ +/* +z-index: +0: .weui-swiped-btn +1: .weui-cell_swiped .weui-cell__bd +2: .weui-cells和.weui-cell的1px线 +*/ + +.weui-cells { + margin-top: $weuiCellsMarginTop; + background-color: $weuiCellBg; + line-height: $weuiCellLineHeight; + font-size: $weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致 + + overflow: hidden; //因为每个cell的border使用before元素left搞的，ie下伪元素的containing block估计跟标准不同，在cell上用oh不生效 + + // onepx + position: relative; + &::before { + @include setTopLine($weuiCellBorderColor); + + z-index: 2; + } + &::after { + @include setBottomLine($weuiCellBorderColor); + + z-index: 2; + } +} + +.weui-cells__title { + margin-top: .77em; // 16px - 行高 + margin-bottom: .3em; // 3px - 行高 + padding-left: $weuiCellGapH; + padding-right: $weuiCellGapH; + color: $weuiTextColorGray; // $weuiTextColorDesc; + font-size: $weuiCellTipsFontSize; + // line-height: 1.4; + + & + .weui-cells { + margin-top: 0; + } +} + +.weui-cells__tips { + margin-top: .3em; // 8px - 行高 + color: $weuiTextColorGray; + padding-left: $weuiCellGapH; + padding-right: $weuiCellGapH; + font-size: $weuiCellTipsFontSize; + // line-height: 1.4; + // a, + // navigator { + // color: $weuiLinkColorDefault; + // } + // navigator { + // display: inline; + // } +} + +.weui-cell { + padding: $weuiCellGapV $weuiCellGapH; // $weuiCellGapV; + position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的 + display: flex; + align-items: center; + // line-height: $weuiCellLineHeight; + // font-size: $weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致 + // color: $weuiTextColorTitle; + &::before { + @include setTopLine($weuiCellBorderColor); + + left: $weuiCellGapH; + z-index: 2; + } + &:first-child { + &::before { + display: none; + } + } +} +// .weui-cell_active { +// &:active { +// &::after { +// content: ''; +// position: absolute; +// left: 0; +// right: 0; +// top: 0; +// bottom: 0; +// background: var(--weui-FG-3); +// pointer-events: none; +// } +// } +// } +.weui-cell_primary { + align-items: flex-start; +} +// .weui-cell_vertical { +// flex-direction: column; +// align-items: flex-start; + +// .weui-cell__hd { +// padding-right: 0; +// margin-bottom: 12px; +// } +// .weui-cell__hd, +// .weui-cell__bd { +// width: 100%; +// } +// } +.weui-cell__bd { + flex: 1; + // min-width: 0; +} +.weui-cell__ft { + text-align: right; + color: $weuiTextColorGray; // $weuiTextColorDesc; + // button { + // vertical-align: bottom; + // } +} +// .weui-cell__desc { +// font-size: 12px; +// color: var(--weui-FG-2); +// line-height: 1.4; +// padding-top: 4px; +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-cell_swiped.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-cell_swiped.scss new file mode 100644 index 0000000000..bf7abf80d3 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-cell_swiped.scss @@ -0,0 +1,30 @@ +.weui-cell_swiped { + display: block; + padding: 0; + > .weui-cell__bd { + position: relative; + z-index: 1; + background-color: #FFFFFF; // $weuiCellBg; + } + > .weui-cell__ft { + position: absolute; + right: 0; + top: 0; + bottom: 0; + display: flex; + color: #fff; // 固定色值 + } +} +.weui-swiped-btn { + display: block; // flex; + align-items: center; + padding: $weuiCellGapV 1em; + line-height: $weuiCellLineHeight; + color: inherit; +} +.weui-swiped-btn_default { + background-color: #C7C7CC; // $weuiBgColorDefault; +} +.weui-swiped-btn_warn { + background-color: #FF3B30; // $weuiColorWarn; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-cells__group.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-cells__group.scss new file mode 100644 index 0000000000..7d6d983261 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-cells__group.scss @@ -0,0 +1,223 @@ +@use 'sass:math'; + +page, +body { + --weui-cellMarginLR: 16px; + --weui-cellPaddingLR: 16px; +} + +.weui-cells__group { + border: 0; + &:first-child { margin-top: 0; } +} + + +// 普通表单 +.weui-cells__group_form { + margin-top: 24px; + + // 表单组 + .weui-cells { + margin-left: var(--weui-cellMarginLR); + margin-right: var(--weui-cellMarginLR); + &::before, + &::after { + left: var(--weui-cellPaddingLR); + right: var(--weui-cellPaddingLR); + } + } + .weui-cell { + padding: 16px var(--weui-cellPaddingLR); + &::before { + left: var(--weui-cellPaddingLR); + right: var(--weui-cellPaddingLR); + } + &:not(.weui-cell_vertical) { + .weui-cell__hd { + padding-right: 16px; + } + .weui-cell__ft { + padding-left: 16px; + } + } + } + + + // 表单组标题 + .weui-cells__title { + margin-top: 24px; + margin-bottom: 8px; + padding: 0 32px; + } + &:first-child { + .weui-cells__title { + margin-top: 0; + } + } + + + // 表单组提示 + .weui-cells__tips { + margin-top: 8px; + padding: 0 calc(var(--weui-cellMarginLR) + var(--weui-cellPaddingLR)); + color: var(--weui-FG-2); + a { + font-weight: 700; + } + } + .weui-cells__tips_warn { + color: var(--weui-RED); + } + + + // 表单标题 + .weui-label { + max-width: 5em; + margin-right: 8px; + } + + + // 点击态 + .weui-cell_access, + .weui-cell_active { + &:active { + &::after { + border-radius: 8px; + } + } + } + + + // 报错 + .weui-cell_warn { + input { + color: $weuiColorWarn; + } + } + .weui-icon-warn { + display: none; + } + + + // 抹去点击态 + .weui-cell_switch, + .weui-cell_vcode, + .weui-cell_readonly, + .weui-cell_disabled { + &:active { + &::after { + display: none; + } + } + } + input, + textarea, + label[for] { + @include setTapColor(); + } + + + // 适老化下表单项折行，适用高度不大于默认cell内容高度的元素并排 + // 默认cell内容高度：cell默认高度56px，除去上下padding各16px，默认内容高度为行高1.4（24px） + .weui-cell_wrap { + align-items: initial; + padding-top: 8px; + padding-bottom: 8px; + .weui-cell__hd { + padding-right: 0; + } + .weui-label { + margin-top: 8px; + } + .weui-cell__bd { + display: flex; + flex-wrap: wrap; + align-items: center; + } + } + .weui-cell__control { + margin: 8px 0 8px 16px; + } + .weui-cell__control_flex { + flex: 1; + min-width: 30vw; + } + + + // 验证码 + .weui-vcode-btn { + font-size: 16px; + padding: 0 12px; + height: auto; + width: auto; + line-height: 2; + border-radius: 6px; + color: $weuiBtnDefaultFontColor; + background-color: $weuiBtnDefaultBg; + &::before { + display: none; + } + } + + // 验证码cell适老化：由于小按钮高度32px大于默认内容高度，所以需要把cell的padding改小以保持cell默认高度56px的规范 + .weui-cell_vcode { + &.weui-cell_wrap { + padding-top: 4px; + padding-bottom: 4px; + .weui-label { + margin-top: 12px; + } + .weui-input { + font-size: 17px; + min-height: em(math.div(32, 17)); + } + } + } + + + // 复选框 + .weui-cells_checkbox { + .weui-check__label { + &::before { left: calc(40px + var(--weui-cellPaddingLR)); } + } + } + + + // 选择框 + .weui-cell_select { + padding: 0; + } + .weui-cell_select-before { + .weui-cell__hd { + padding-right: 0; + } + } + + // 开关 + .weui-cell_switch { + padding: 12px 16px; + } +} + + +// 反色表单 +.weui-cells__group_form-primary { + margin-top: 32px; + .weui-cells { + background: var(--weui-BG-1); + border-radius: 8px; + overflow: hidden; + &::before, + &::after { + display: none; + } + } + .weui-cell_access, + .weui-cell_active { + &:active { + &::after { + border-radius: 0; + } + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check.scss new file mode 100644 index 0000000000..26b6bb783d --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check.scss @@ -0,0 +1,3 @@ +@import './weui-check/weui-check_common'; +@import './weui-check/weui-radio'; +@import './weui-check/weui-checkbox'; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check/weui-check_common.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check/weui-check_common.scss new file mode 100644 index 0000000000..94883b6994 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check/weui-check_common.scss @@ -0,0 +1,23 @@ +.weui-check__label { + @include setTapColor(); + // &.weui-cell_readonly, + // &.weui-cell_disabled { + // color: var(--weui-FG-3); + // } + + &:active { + background-color: #ECECEC; + } +} + +.weui-check { + // opacity: 0; + position: absolute; + // width: 0; + // height: 0; + left: -9999em; + // overflow: hidden; + // &[disabled] + .weui-icon-checked { + // opacity: 0.1; + // } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check/weui-checkbox.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check/weui-checkbox.scss new file mode 100644 index 0000000000..2f174d9bd0 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check/weui-checkbox.scss @@ -0,0 +1,45 @@ +.weui-cells_checkbox { + // .weui-check__label { + // &::before { left: 55px; } + // } + .weui-cell__hd { + padding-right: $weuiCellInnerGapH; + // font-size: 0; + } + .weui-icon-checked { + &::before { + content: '\EA01'; + color: #C9C9C9; + font-size: 23px; + display: block; + } + } + // .weui-icon-checked { + // color: $weuiTextColorTips; + // mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E); + // } +} + +// method2 accessbility +.weui-check { + // checkbox + .weui-cells_checkbox & { + &:checked { + &+.weui-icon-checked { + &:before { + content: '\EA06'; + color: #09BB07; // $weuiColorPrimary; + } + } + } + } + // .weui-cells_checkbox & { + // &:checked, + // &[aria-checked="true"] { + // & + .weui-icon-checked { + // color: $weuiColorPrimary; + // mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E); + // } + // } + // } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check/weui-radio.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check/weui-radio.scss new file mode 100644 index 0000000000..5acc88d176 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-check/weui-radio.scss @@ -0,0 +1,33 @@ +// method2 accessbility +.weui-cells_radio { + .weui-cell__ft { + padding-left: $weuiCellInnerGapH; + // font-size: 0; + } +} +.weui-check { + // radio + .weui-cells_radio & { + & + .weui-icon-checked { + min-width: 16px; + // color: transparent; + } + &:checked { + & +.weui-icon-checked { + &::before { + display: block; + content: '\EA08'; + color: #09BB07; + font-size: 16px; + } + } + } + // &:checked, + // &[aria-checked="true"] { + // & + .weui-icon-checked { + // color: $weuiColorPrimary; + // mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + // } + // } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form.scss new file mode 100644 index 0000000000..b1e29610cc --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form.scss @@ -0,0 +1,4 @@ +@import './weui-form/weui-form_common'; +@import './weui-form/weui-form-preview'; +@import './weui-form/weui-select'; +@import './weui-form/weui-vcode'; diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-form-preview.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-form-preview.scss new file mode 100644 index 0000000000..31c1f538d5 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-form-preview.scss @@ -0,0 +1,120 @@ +.weui-form-preview{ + position: relative; + background-color: #FFFFFF; // var(--weui-BG-2); + &::before { + @include setTopLine($weuiCellBorderColor); + } + &::after { + @include setBottomLine($weuiCellBorderColor); + } +} +.weui-form-preview__hd { + position: relative; + padding: $weuiCellGapV $weuiCellGapH; // $weuiCellGapV; + text-align: right; + line-height: 2.5em; + &::after { + @include setBottomLine($weuiCellBorderColor); + + left: $weuiCellGapH; + } + .weui-form-preview__value { + font-style: normal; + font-size: 1.6em; + } +} +.weui-form-preview__bd { + padding: $weuiCellGapV $weuiCellGapH; // $weuiCellGapV; + font-size: 0.9em; + text-align: right; + color: $weuiTextColorGray; // $weuiTextColorDesc; + line-height: 2; +} +.weui-form-preview__ft { + position: relative; + line-height: 50px; + display: flex; + &::before { + @include setTopLine($weuiDialogLineColor); + } +} +.weui-form-preview__item { + overflow: hidden; +} +.weui-form-preview__label { + float: left; + margin-right: 1em; + min-width: 4em; // 4.2em; + color: $weuiTextColorGray; // $weuiTextColorDesc; + text-align: justify; // left; + text-align-last: justify; +} +.weui-form-preview__value { + display: block; + overflow: hidden; + word-break: normal; + word-wrap: break-word; + // color: var(--weui-FG-0); +} +.weui-form-preview__btn { + position: relative; + display: block; + flex: 1; + color: $weuiDialogLinkColor; + text-align: center; + @include setTapColor(); + &:active { + background-color: $weuiDialogLinkActiveBc; + } + &::after { + @include setLeftLine($weuiDialogLineColor); + } + &:first-child { + &::after { + display: none; + } + } +} +button.weui-form-preview__btn { + background-color: transparent; + border: 0; + outline: 0; + line-height: inherit; + font-size: inherit; +} +.weui-form-preview__btn_default { + color: $weuiTextColorGray; // var(--weui-FG-HALF); +} +.weui-form-preview__btn_primary { + color: #0BB20C; // $weuiLinkColorDefault; +} + +// 列表块，一般放msg组件的自定义区域 +// .weui-form-preview__list { +// padding-top: 24px; +// padding-bottom: 24px; +// line-height: 1.4; +// font-size: 14px; +// position: relative; +// &::before { +// content: ''; +// @include setTopLine(var(--weui-FG-3)); +// } +// &:last-child { +// padding-bottom: 0; +// } +// .weui-form-preview__label { +// text-align: left; +// width: 6em; +// } +// .weui-form-preview__value { hyphens: auto; } +// .weui-form-preview__item { +// margin-top: 12px; +// &:first-child { margin-top: 0; } +// } +// & > .weui-cells__title { +// &:first-child { +// margin-top: 0; +// } +// } +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-form_common.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-form_common.scss new file mode 100644 index 0000000000..4897f1b8b7 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-form_common.scss @@ -0,0 +1,104 @@ +// .weui-label { +// display: block; +// width: $weuiCellLabelWidth; +// @include text_wrap(); +// } + +.weui-input { + width: 100%; + border: 0; + outline: 0; + -webkit-appearance: none; + background-color: transparent; + // font-family: inherit; + font-size: inherit; + color: inherit; + height: em($weuiCellLineHeight); + line-height: $weuiCellLineHeight; + + // hides the spin-button + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + // &:focus { + // &:not(:placeholder-shown) { + // & + .weui-btn_input-clear { + // display: inline; + // } + // } + // } +} + +// .weui-textarea { +// display: block; +// border: 0; +// resize: none; +// background: transparent; +// width: 100%; +// color: inherit; +// font-size: 1em; +// font-family: inherit; +// line-height: inherit; +// height: 80px; +// outline: 0; +// } + +// .weui-textarea-counter { +// color: $weuiTextColorTips; +// text-align: right; +// font-size: 14px; +// .weui-cell_warn & { +// color: $weuiTextColorWarn; +// } +// } + +// .weui-cell_warn { +// color: $weuiTextColorWarn; +// .weui-icon-warn { display: inline-block; } +// } +// .weui-cell_readonly, +// .weui-cell_disabled { +// .weui-input, +// .weui-textarea { +// &:disabled { +// opacity: 1; +// -webkit-text-fill-color: $weuiTextColorDesc; +// } +// &[disabled], +// &[readonly] { +// color: $weuiTextColorDesc; +// } +// } +// } +// .weui-btn_input-clear { +// display: none; +// padding-left: 8px; +// [class*="weui-icon-"] { +// width: 18px; +// } +// } + +// todo: 以下为兼容最开始版本的表单，新表单、反色表单均不需要 +// .weui-cells_form { +// .weui-cell_switch, +// .weui-cell_vcode, +// .weui-cell_readonly, +// .weui-cell_disabled { +// &:active { +// background-color: transparent; +// } +// } +// .weui-cell__ft { +// font-size: 0; +// } +// .weui-icon-warn { +// display: none; +// } +// input, +// textarea, +// label[for] { +// @include setTapColor(); +// } +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-select.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-select.scss new file mode 100644 index 0000000000..abb2ea7a08 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-select.scss @@ -0,0 +1,96 @@ +.weui-cell_select { + padding: 0; + + .weui-select { + padding-right: 30px; + } + + .weui-cell__bd { + &::after { + content: ' '; + @include setArrow(right, 6px, #C8C8CD, 2px); + // width: 12px; + // height: 24px; + // mask-position: 0 0; + // mask-repeat: no-repeat; + // mask-size: 100%; + // background-color: currentColor; + // color: $weuiTextColorTips; + // mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + position: absolute; + top: 50%; + right: $weuiCellGapH; + margin-top: -4px; // -12px; + } + } +} + +.weui-select { + -webkit-appearance: none; + border: 0; + outline: 0; + background-color: transparent; + width: 100%; + font-size: inherit; + height: $weuiCellHeight; + // min-height: $weuiCellHeight; + line-height: $weuiCellHeight; + position: relative; + z-index: 1; + padding-left: $weuiCellGapH; + // padding-right: $weuiCellGapH + 24px; + // color: var(--weui-FG-0); + // vertical-align: bottom; + // box-sizing: border-box; +} + +.weui-cell_select-before { + padding-right: $weuiCellGapH; + .weui-select{ + width:$weuiCellLabelWidth; + box-sizing: border-box; + } + .weui-cell__hd { + position: relative; + &::after { + @include setRightLine($weuiCellBorderColor); + } + &::before { + content: ' '; + @include setArrow(right, 6px, #C8C8CD, 2px); + // width: 12px; + // height: 24px; + // mask-position: 0 0; + // mask-repeat: no-repeat; + // mask-size: 100%; + // background-color: currentColor; + // color: $weuiTextColorTips; + // mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + position: absolute; + top: 50%; + right: $weuiCellGapH; + margin-top: -4px; // -12px; + } + } + .weui-cell__bd { + padding-left: $weuiCellGapH; + &::after { + display: none; + } + } + // .weui-select { + // max-width: 5em; + // width: $weuiCellLabelWidth; + // box-sizing: content-box; + // } +} + +.weui-cell_select-after { + padding-left: $weuiCellGapH; + // .weui-cell__hd { + // padding-left: $weuiCellGapH; + // } + .weui-select { + padding-left: 0; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-vcode.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-vcode.scss new file mode 100644 index 0000000000..143cf4d66a --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-form/weui-vcode.scss @@ -0,0 +1,37 @@ +.weui-cell_vcode { + padding-top: 0; + padding-right: 0; + padding-bottom: 0; +} +.weui-vcode-img { + margin-left: 5px; + height: $weuiCellHeight; + vertical-align: middle; +} + +.weui-vcode-btn { + display: inline-block; + height: $weuiCellHeight; + margin-left: 5px; + padding: 0 0.6em 0 0.7em; + border-left: 1px solid $weuiLineColorLight; + line-height: $weuiCellHeight; + vertical-align: middle; + font-size: $weuiCellFontSize; + color: $weuiDialogLinkColor; + // position: relative; + // &::before { + // @include setLeftLine($weuiLineColorLight); + // } + &:active { + color: desaturate($weuiDialogLinkColor, 30%); + } +} +button.weui-vcode-btn { + background-color: transparent; + // border: 0; + border-top: 0; + border-right: 0; + border-bottom: 0; + outline: 0; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-gallery.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-gallery.scss new file mode 100644 index 0000000000..db2fb7cee7 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-gallery.scss @@ -0,0 +1,56 @@ +$weuiGalleryOprHeight: 60px; + +.weui-gallery { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: #000; // 固定色值 + z-index: 1000; +} +.weui-gallery__img, +.weui-gallery__opr { + position: absolute; + top: 0; + left: 0; + left: constant(safe-area-inset-left); + left: env(safe-area-inset-left); + right: 0; + right: constant(safe-area-inset-right); + right: env(safe-area-inset-right); + bottom: $weuiGalleryOprHeight; + background: center center no-repeat; + background-size: contain; +} +// .weui-gallery__img { +// top: 0; +// top: constant(safe-area-inset-top); +// top: env(safe-area-inset-top); +// bottom: $weuiGalleryOprHeight; +// bottom: calc($weuiGalleryOprHeight + constant(safe-area-inset-bottom)); +// bottom: calc($weuiGalleryOprHeight + env(safe-area-inset-bottom)); +// width: 100%; +// background: center center no-repeat; +// background-size: contain; +// } +.weui-gallery__opr { + position: absolute; + right: 0; + bottom: 0; + left: 0; + background-color: #0d0d0d; // 固定色值 + color: #FFFFFF; // var(--weui-WHITE); + line-height: $weuiGalleryOprHeight; + text-align: center; +} +.weui-gallery__del { + display: block; + // padding-bottom: 0; + // padding-bottom: constant(safe-area-inset-bottom); + // padding-bottom: env(safe-area-inset-bottom); + // &:active { + // opacity: 0.5; + // } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-switch.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-switch.scss new file mode 100644 index 0000000000..4218197df5 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-switch.scss @@ -0,0 +1,84 @@ +.weui-cell_switch { + padding-top: calc(($weuiCellHeight - $weuiSwitchHeight) / 2); + padding-bottom: calc(($weuiCellHeight - $weuiSwitchHeight) / 2); + // &.weui-cell_readonly, + // &.weui-cell_disabled { + // color: var(--weui-FG-3); + // } +} +.weui-switch { + appearance: none; +} +.weui-switch, +.weui-switch-cp__box { + // vertical-align: bottom; + position: relative; + width: 52px; + height: $weuiSwitchHeight; + // background-color: var(--weui-FG-3); + border: 1px solid #DFDFDF; // 0; + // padding: 2px; + outline: 0; + border-radius: 16px; + box-sizing: border-box; + background-color: #DFDFDF; + transition: background-color .1s, border .1s; + + &::before { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 50px; + height: $weuiSwitchHeight - 2; + border-radius: 15px; + background-color: #FDFDFD; + transition: transform .35s cubic-bezier(0.45, 1, 0.4, 1); + } + + &::after { + content: ' '; + position: absolute; + top: 0; // 2px; + left: 0; // 2px; + width: $weuiSwitchHeight - 2; // $weuiSwitchHeight - 4; + height: $weuiSwitchHeight - 2; // $weuiSwitchHeight - 4; + border-radius: 15px; + background-color: #fff; // 固定色值 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); // 0 2px 3px 0 rgba(0, 0, 0, 0.06); + transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35); + } +} +.weui-switch:checked, +// .weui-switch-cp__input:checked + .weui-switch-cp__box, +// .weui-switch-cp__input[aria-checked="true"] + .weui-switch-cp__box, +.weui-switch-cp__input:checked ~ .weui-switch-cp__box { + border-color: #04BE02; + background-color: #04BE02; + + &:before { + transform: scale(0); + } + + &::after { + transform: translateX(20px); + } +} +// .weui-switch[disabled], +// .weui-switch-cp__input[disabled] + .weui-switch-cp__box, +// .weui-switch-cp__input[aria-disabled="true"] + .weui-switch-cp__box { +// opacity: 0.1; +// } + +// 兼容小程序/IE Edge的版本 +.weui-switch-cp__input { + position: absolute; + // width: 0; + // height: 0; + // opacity: 0; + // overflow: hidden; + left: -9999px; +} +.weui-switch-cp__box { + display: block; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-uploader.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-uploader.scss new file mode 100644 index 0000000000..6687a36aa9 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-cell/weui-uploader.scss @@ -0,0 +1,114 @@ +.weui-uploader {} + +.weui-uploader__hd { + display: flex; + padding-bottom: $weuiCellGapV; + align-items: center; +} + +.weui-uploader__title { + flex: 1; +} + +.weui-uploader__info { + color: $weuiTextColorTips; +} + +.weui-uploader__bd { + margin-bottom: $weuiCellGapH - ($weuiCellGapV + $weuiUploaderFileSpacing); + margin-right: -$weuiUploaderFileSpacing; + overflow: hidden; +} + +.weui-uploader__files { + list-style: none; +} + +.weui-uploader__file { + float: left; + margin-right: $weuiUploaderFileSpacing; + margin-bottom: $weuiUploaderFileSpacing; + width: $weuiUploaderSize; + height: $weuiUploaderSize; + background: no-repeat center center; + background-size: cover; +} +.weui-uploader__file_status { + position: relative; + &::before { + content: ' '; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.5); // 固定色值 + } + .weui-uploader__file-content { + display: block; + } +} +.weui-uploader__file-content { + display: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #FFFFFF; // var(--weui-WHITE); + .weui-icon-warn { + display: inline-block; + } +} +.weui-uploader__input-box { + float: left; + position: relative; + margin-right: $weuiUploaderFileSpacing; + margin-bottom: $weuiUploaderFileSpacing; + width: $weuiUploaderSize - $weuiUploaderBorderWidth * 2; // $weuiUploaderSize; + height: $weuiUploaderSize - $weuiUploaderBorderWidth * 2; // $weuiUploaderSize; + border: $weuiUploaderBorderWidth solid $weuiUploaderBorderColor; + // box-sizing: border-box; + // background-color: #ededed; + // @include dark { + // background-color: #2e2e2e; + // }; + &::before, + &::after { + content: ' '; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: $weuiUploaderBorderColor; // #a3a3a3; + // @include dark { + // background-color: #6d6d6d; + // }; + } + &::before { + width: $weuiUploaderBorderWidth + 1; + height: $weuiUploaderSize / 2; // 33.33%; + } + &::after { + width: $weuiUploaderSize / 2;// 33.33%; + height: $weuiUploaderBorderWidth + 1; + } + &:active { + border-color: $weuiUploaderActiveBorderColor; + + &::before, + &::after { + // opacity: 0.7; + background-color: $weuiUploaderActiveBorderColor; + } + } +} +.weui-uploader__input { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + @include setTapColor(); +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-flex.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-flex.scss new file mode 100644 index 0000000000..e891142946 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-flex.scss @@ -0,0 +1,7 @@ +.weui-flex { + display: flex; +} +.weui-flex__item { + flex: 1; + // min-width: 0; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-footer.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-footer.scss new file mode 100644 index 0000000000..bed0467441 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-footer.scss @@ -0,0 +1,57 @@ +.weui-footer { + color: $weuiTextColorGray; // rgba(0, 0, 0, 0.2); + // @include dark { + // color:rgba(255,255,255,0.2); + // }; + + font-size: 14px; + // line-height: 1.4; + text-align: center; + a, + navigator { + color: $weuiLinkColorDefault; + } + navigator { + display: inline; + } +} +.weui-footer_fixed-bottom { + position: fixed; + bottom: .52em; // 0; + left: 0; + right: 0; + // padding-top: 16px; + // padding-bottom: 16px; + // padding-bottom: calc(16px + constant(safe-area-inset-bottom)); + // padding-bottom: calc(16px + env(safe-area-inset-bottom)); + // left: constant(safe-area-inset-left); + // left: env(safe-area-inset-left); + // right: constant(safe-area-inset-right); + // right: env(safe-area-inset-right); +} +.weui-footer__links { + font-size: 0; +} +.weui-footer__link { + display: inline-block; + vertical-align: top; + margin: 0 .62em; // 0 8px; + position: relative; + font-size: 14px; + &::before { + @include setLeftLine(); + + left: -.65em; // -8px; + top: 0.36em; + bottom: 0.36em; + } + &:first-child { + &::before { + display: none; + } + } +} +.weui-footer__text { + padding: 0 .34em; // 0 16px; + font-size: 12px; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-grid.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-grid.scss new file mode 100644 index 0000000000..2317f31396 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-grid.scss @@ -0,0 +1,58 @@ +@use 'sass:math'; + +.weui-grids { + position: relative; + overflow: hidden; + + &::before { + @include setTopLine($weuiGridBorderColor); + } + &::after { + @include setLeftLine($weuiGridBorderColor); + } +} + +.weui-grid { + position: relative; + float: left; + padding: 20px 10px; + width: math.div(100%, $weuiGridColumnCount); + box-sizing: border-box; + + &::before { + @include setRightLine($weuiGridBorderColor); + } + &::after { + @include setBottomLine($weuiGridBorderColor); + } + + &:active { + background-color: $weuiBgColorActive; + } +} + +.weui-grid__icon { + width: $weuiGridIconSize; + height: $weuiGridIconSize; + margin: 0 auto; + + img { + display: block; + width: 100%; + height: 100%; + } + + & + .weui-grid__label { + margin-top: 5px; // 4px; + } +} + +.weui-grid__label { + display: block; + text-align: center; + color: $weuiTextColorTitle; + font-size: $weuiGridFontSize; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-link.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-link.scss new file mode 100644 index 0000000000..82504b8562 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-link.scss @@ -0,0 +1,10 @@ +.weui-link { + color: $weuiLinkColorDefault; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + &:visited { + color: $weuiLinkColorDefault; + } + &:active { + opacity: 0.5; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-loading/weui-loading.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-loading/weui-loading.scss new file mode 100644 index 0000000000..853fd36e3b --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-loading/weui-loading.scss @@ -0,0 +1,52 @@ +// @import './weui-primary-loading'; + +.weui-loading { + // font-size: 16px; + width: 20px; // 1em; + height: 20px; // 1em; + display: inline-block; + vertical-align: middle; + animation: weuiLoading 1s steps(12, end) infinite; + background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat; + // background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat; + background-size: 100%; + + // &.weui-loading_transparent, + // &.weui-icon_toast, + // .weui-btn_loading.weui-btn_warn &, + // .weui-btn_loading.weui-btn_primary & { + // background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"); + // } +} + +// .weui-mask-loading { +// display: inline-block; +// vertical-align: middle; +// font-size: 16px; +// width: 1em; +// height: 1em; +// mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A") 0 0 no-repeat; +// mask-size: cover; +// background-color: currentColor; +// color: #606060; +// } + +@-webkit-keyframes weuiLoading { + 0% { + transform: rotate3d(0, 0, 1, 0deg); + } + + 100% { + transform: rotate3d(0, 0, 1, 360deg); + } +} + +@keyframes weuiLoading { + 0% { + transform: rotate3d(0, 0, 1, 0deg); + } + + 100% { + transform: rotate3d(0, 0, 1, 360deg); + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-loading/weui-primary-loading.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-loading/weui-primary-loading.scss new file mode 100644 index 0000000000..e461832c0b --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-loading/weui-primary-loading.scss @@ -0,0 +1,19 @@ +// css画的圆圈loading + +// 默认色 +.weui-primary-loading { + font-size: 16px; + @include setCircleLoading(#606060,1em,0.0875em); +} + +// 跟随系统切换的品牌色 +.weui-primary-loading_brand { + color: var(--weui-BRAND); +} + +// 固定白色半透明 +.weui-primary-loading_transparent { + color: #ededed; +} + + diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-media-box.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-media-box.scss new file mode 100644 index 0000000000..bb26c17050 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-media-box.scss @@ -0,0 +1,95 @@ +.weui-media-box { + padding: 15px; // 16px; + position: relative; + &::before { + @include setTopLine($weuiLineColorLight); + + left: 15px; // 16px; + } + &:first-child { + &::before { + display: none; + } + } + &:active { + background-color:#ECECEC; // $weuiBgColorActive; + } +} + +a.weui-media-box { + color: #000; + @include setTapColor(); +} + +.weui-media-box__title { + // display: block; + font-weight: 400; + font-size: 17px; + // line-height: 1.4; + word-wrap: break-word; + word-break: break-all; + // color: $weuiTextColorTitle; + @include ellipsis(); + // @include hyphens; +} +.weui-media-box__desc { + color: $weuiTextColorGray; // $weuiTextColorTips; + font-size: 13px; //14px; + line-height: 1.2; //1.4; + // padding-top: 4px; + @include ellipsisLn(2); + // @include hyphens; +} +.weui-media-box__info { + // display: block; + margin-top: 15px; // 16px; + padding-bottom: 5px; // 4px; + font-size: 13px; + color: #CECECE; // $weuiTextColorTips; + line-height: 1em; + list-style: none; + overflow: hidden; +} +.weui-media-box__info__meta { + float: left; + padding-right: 1em; +} +.weui-media-box__info__meta_extra { + padding-left: 1em; + border-left: 1px solid #CECECE; // 1px solid $weuiTextColorTips; +} + +.weui-media-box_text { + .weui-media-box__title { + margin-bottom: 8px; + } +} +.weui-media-box_appmsg { + display: flex; + align-items: center; + .weui-media-box__hd { + margin-right: .8em; // 16px; + width: 60px; + height: 60px; + line-height: 60px; + text-align: center; + } + .weui-media-box__thumb { + width: 100%; + max-height: 100%; + vertical-align: top; + } + .weui-media-box__bd { + flex: 1; + min-width: 0; + } +} +.weui-media-box_small-appmsg { + padding: 0; + .weui-cells { + margin-top: 0; + &::before { + display: none; + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-page/weui-article.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-page/weui-article.scss new file mode 100644 index 0000000000..71ada634cc --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-page/weui-article.scss @@ -0,0 +1,91 @@ +.weui-article { + padding: 20px 15px; // 48px 24px; + // padding: 48px calc(24px + constant(safe-area-inset-right)) calc(48px + constant(safe-area-inset-bottom)) calc(24px + constant(safe-area-inset-left)); + // padding: 48px calc(24px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); + // color: var(--weui-FG-0); + font-size: 15px; // 17px; + // line-height: 1.6; + // @include hyphens; + section { + margin-bottom: 1.5em; // 48px; + // section { + // margin-bottom: 32px; + // section { + // margin-bottom: 24px; + // } + // } + } + // h1, + // h2, + // h3, + // h4, + // h5, + // h6 { line-height: 1.4; } + h1 { + font-size: 18px; // 22px; + font-weight: 400; // 500; + margin-bottom: .9em; // 48px; + // text-align: center; + } + h2 { + font-size: 16px; // 20px; + font-weight: 400; // 500; + margin-bottom: .34em; // 16px; + } + h3 { + font-size: 15px; // 17px; + font-weight: 400; // 500; + margin-bottom: .34em; // 8px; + } + // h4 { + // font-size: 17px; + // font-weight: 400; + // margin-bottom: 4px; + // } + // h5, + // h6 { + // font-weight: 400; + // font-size: 17px; + // } + * { + max-width: 100%; + box-sizing: border-box; + word-wrap: break-word; + } + // img { + // vertical-align: bottom; + // } + p { + margin: 0 0 .8em; // 0 0 24px; + } + // ol, + // ul { + // margin-left: 1.2em; + // margin-bottom: 24px; + // & ol, + // & ul { + // margin: 0.5em 0 0.5em 1.2em; + // } + // } + // ol { + // list-style: decimal; + // } + // ul { + // list-style: disc; + // } + // li { + // margin: 0.5em 0; + // } + // .weui-article__list_inside { + // margin-left: 0; + // li { + // list-style-position: inside; + // } + // } + // .weui-article__list_none { + // margin-left: 0; + // li { + // list-style: none; + // } + // } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-page/weui-form.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-page/weui-form.scss new file mode 100644 index 0000000000..d95e31f159 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-page/weui-form.scss @@ -0,0 +1,80 @@ +@import "../weui-cell/weui-cells__group"; + +.weui-form { + padding: 56px 0 0; + padding: calc(56px + constant(safe-area-inset-top)) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); + padding: calc(56px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); + display: flex; + flex-direction: column; + line-height: 1.4; + min-height: 100%; + box-sizing: border-box; + background-color: var(--weui-BG-2); + + .weui-footer, + .weui-footer__link { + font-size: 14px; + } +} +.weui-form__bd { + flex: 1; + display: flex; + flex-direction: column; +} + +.weui-form__text-area { + padding: 0 32px; + color: var(--weui-FG-0); + text-align: center; +} +.weui-form__control-area { + flex: 1; + margin: 48px 0; +} +.weui-form__tips-area, +.weui-form__extra-area { + margin-bottom: 24px; + padding: 0 32px; + text-align: center; +} +.weui-form__extra-area { + margin-top: 52px; +} +.weui-form__opr-area { + padding: 0 32px; + &:last-child { + margin-bottom: 96px; + } + & + .weui-form__tips-area { + margin-top: 16px; + margin-bottom: 0; + } +} +.weui-form__tips-area { + & + .weui-form__extra-area { + margin-top: 32px; + } + &:last-child { + margin-bottom: 60px; + } +} +.weui-form__title { + font-size: 22px; + font-weight: 700; + line-height: 1.36; +} +.weui-form__desc { + font-size: 17px; + margin-top: 16px; +} +.weui-form__tips { + color: $weuiTextColorDesc; + font-size: 14px; + a, + navigator { + color: $weuiLinkColorDefault; + } + navigator { + display: inline; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-page/weui-msg.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-page/weui-msg.scss new file mode 100644 index 0000000000..c36f31effc --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-page/weui-msg.scss @@ -0,0 +1,136 @@ +@import '../weui-button/weui-button'; + +// a { +// .weui-msg__desc &, +// .weui-msg__desc-primary &, +// .weui-msg__tips & { +// color: $weuiLinkColorDefault; +// display: inline-block; +// vertical-align: baseline; +// } +// } +.weui-msg { + padding-top: $weuiMsgPaddingTop; + // padding: calc($weuiMsgPaddingTop + constant(safe-area-inset-top)) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); + // padding: calc($weuiMsgPaddingTop + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); + text-align: center; + // line-height: 1.4; + // min-height: 100%; + // box-sizing: border-box; + // display: flex; + // flex-direction: column; + // background-color: var(--weui-BG-2); +} +.weui-msg__icon-area { + margin-bottom: $weuiMsgIconGap; // 32px; +} +.weui-msg__text-area { + margin-bottom: $weuiMsgTextGap; // 32px; + padding:0 20px; // 0 32px; + // flex: 1; + // line-height: 1.6; + // @include hyphens; + // &:first-child { padding-top: 96px; } +} +.weui-msg__text-area a { + color: $weuiLinkColorDefault; +} +.weui-msg__title { + margin-bottom: $weuiMsgTitleGap; + font-weight: 400; // 500; + font-size: 20px; // 22px; + // color: $weuiTextColorTitle; + word-wrap: break-word; + word-break: break-all; +} +.weui-msg__desc { + font-size: 14px; // 17px; + // font-weight: 400; + color: $weuiTextColorGray; // $weuiTextColorTitle; + // margin-bottom: 16px; + word-wrap:break-word; + word-break:break-all; +} +// .weui-msg__desc-primary { +// font-size: 14px; +// color: $weuiTextColorDesc; +// margin-bottom: 16px; +// } +// .weui-msg__custom-area { +// text-align: left; +// word-wrap: break-word; +// hyphens: auto; +// margin-bottom: 16px; +// .weui-msg__title + & { +// margin-top: 48px; +// } +// .weui-msg__desc + &, +// .weui-msg__desc-primary + & { +// margin-top: 40px; +// } +// .weui-cells__group_form { +// .weui-cells { +// margin: 0; +// } +// } +// } +.weui-msg__opr-area { + margin-bottom: $weuiMsgOprGap; // 16px; + // .weui-btn-area { margin: 0; } + // .weui-btn + .weui-btn { margin-bottom: 16px; } + // &:last-child { margin-bottom: 96px; } + // & + .weui-msg__extra-area { + // margin-top: 48px; + // } +} +// .weui-msg__tips-area { +// margin-bottom: 16px; +// padding: 0 40px; +// @include hyphens; +// .weui-msg__opr-area + & { +// margin-bottom: 48px; +// } +// &:last-child { +// margin-bottom: 64px; +// } +// } +// .weui-msg__tips { +// font-size: 14px; +// color: $weuiTextColorDesc; +// } +.weui-msg__extra-area { + margin-bottom: $weuiMsgExtraAreaGap; // 24px; + // padding: 0 32px; + // box-sizing: border-box; + font-size: 14px; // 12px; + color: $weuiTextColorGray; + a, + navigator { + color: $weuiLinkColorDefault; + } + navigator { + display: inline; + } +} + +// 部分场景需要去掉头部间距 +// .weui-msg_align-top { +// .weui-msg__text-area { +// &:first-child { padding-top: 0; } +// } +// } + +@media screen and (min-height: $weuiMsgExtraAreaOfMinHeight) { + .weui-msg__extra-area { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + text-align: center; + } +} +@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3){ // iPhoneX + .weui-msg__extra-area { + margin-bottom: $weuiMsgExtraAreaGap + 34; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-panel.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-panel.scss new file mode 100644 index 0000000000..635d49dd8c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-panel.scss @@ -0,0 +1,38 @@ +.weui-panel { + background-color: #FFFFFF; // var(--weui-BG-2); + margin-top: 10px; + &:first-child { + margin-top: 0; + } + + position: relative; + overflow: hidden; + &::before { + @include setTopLine($weuiLineColorLight); + } + &::after { + @include setBottomLine($weuiLineColorLight); + } + // .weui-cells { + // &::after { + // display: none; + // } + // } +} + +.weui-panel__hd { + padding: 14px 15px 10px; // 16px 16px 13px; + color: $weuiTextColorGray; // $weuiTextColorTitle; + font-size: 13px; // 15px; + // font-weight: 500; + position: relative; + &::after { + @include setBottomLine($weuiLineColorLight); + + left: 15px; + } +} + + + + diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-picker.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-picker.scss new file mode 100644 index 0000000000..4563a319a9 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-picker.scss @@ -0,0 +1,149 @@ +$pickerItemHeight: 34px; // 56px; + +.weui-picker { + position: fixed; + width: 100%; + box-sizing: border-box; + left: 0; + bottom: 0; + z-index: 5000; + background-color: var(--weui-BG-2); + padding-left: 0; + padding-left: constant(safe-area-inset-left); + padding-left: env(safe-area-inset-left); + padding-right: 0; + padding-right: constant(safe-area-inset-right); + padding-right: env(safe-area-inset-right); + backface-visibility: hidden; + transform: translate(0, 100%); + //slide up animation + transition: transform 0.3s; + // outline: 0; + + // .weui-half-screen-dialog__hd { + // padding-left: 24px; + // padding-right: 24px; + // } + // .weui-half-screen-dialog__bd { + // overflow: visible; + // } +} + +.weui-picker__hd { + display: flex; + padding: 9px 15px; // 16px; + // padding: 16px calc(16px + constant(safe-area-inset-right)) 16px calc(16px + constant(safe-area-inset-left)); + // padding: 16px calc(16px + env(safe-area-inset-right)) 16px calc(16px + env(safe-area-inset-left)); + background-color: #fff; + position: relative; + text-align: center; + font-size: 17px; + // line-height: 1.4; + &::after { + @include setBottomLine($weuiLineColorLight); + } +} + +.weui-picker__action { + display: block; + flex: 1; + color: $weuiColorPrimary; + + &:first-child { + text-align: left; + color: #888; + } + &:last-child { + text-align: right; + } +} + +.weui-picker__bd { + display: flex; + position: relative; + background-color: #fff; // var(--weui-BG-2); + height: 238px; // 240px; + overflow: hidden; +} + +.weui-picker__group { + flex: 1; + position: relative; + height: 100%; + //-webkit-mask-box-image: -webkit-linear-gradient(bottom,transparent,transparent 5%,#fff 50%,#fff 50%,transparent 95%,transparent); + // font-size: 17px; + // &:first-child { + // .weui-picker__indicator { + // left: 8px; + // border-top-left-radius: 8px; + // border-bottom-left-radius: 8px; + // } + // } + // &:last-child { + // .weui-picker__indicator { + // right: 8px; + // border-top-right-radius: 8px; + // border-bottom-right-radius: 8px; + // } + // } +} + +.weui-picker__mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0 auto; + z-index: 3; + background: linear-gradient(180deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6)), linear-gradient(0deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6)); + // background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); + // @include dark { + // background-image: linear-gradient(180deg, rgba(25, 25, 25, 0.95), rgba(25, 25, 25, 0.6)), linear-gradient(0deg, rgba(25, 25, 25, 0.95), rgba(25, 25, 25, 0.6)); + // }; + + background-position: top, bottom; + background-size: 100% 102px; // 100% (2 * $pickerItemHeight); + background-repeat: no-repeat; + transform: translateZ(0); +} + +.weui-picker__indicator { + width: 100%; + height: $pickerItemHeight; + position: absolute; + top: 102px; // 112px; + left: 0; + // right: 0; + z-index: 3; // 1; + // background: var(--weui-BG-3); + &:before { + @include setTopLine($weuiLineColorLight); + } + &:after { + @include setBottomLine($weuiLineColorLight); + } +} + +.weui-picker__content { + position: absolute; + top: 0; + left: 0; + width: 100%; + // z-index: 2; +} + +.weui-picker__item { + padding: 0; + height: $pickerItemHeight; + line-height: $pickerItemHeight; + text-align: center; + color: #000; // $weuiTextColorTitle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.weui-picker__item_disabled { + color: $weuiTextColorGray; // $weuiTextColorDesc; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-progress.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-progress.scss new file mode 100644 index 0000000000..aa79e2d264 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-progress.scss @@ -0,0 +1,22 @@ +.weui-progress { + display: flex; + align-items: center; +} + +// .weui-progress__bar { +// background-color: $weuiProgressBg; +// height: $weuiProgressHeight; +// flex: 1; +// } + +// .weui-progress__inner-bar { +// width: 0; +// height: 100%; +// background-color: $weuiProgressColor; +// } + +// .weui-progress__opr { +// display: block; +// margin-left: 15px; +// font-size: 0; +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-searchbar.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-searchbar.scss new file mode 100644 index 0000000000..c4ae0ec03b --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-searchbar.scss @@ -0,0 +1,159 @@ +@use 'sass:math'; + +// $weuiSearchInputHeight:32px; + +.weui-search-bar { + position: relative; + padding: 8px 10px; // 8px; + display: flex; + box-sizing: border-box; + background-color: #EFEFF4; // $weuiBgColorDefault; + -webkit-text-size-adjust: 100%; + align-items: center; + &::before { + @include setTopLine(#D7D6DC); + } + &::after { + @include setBottomLine(#D7D6DC); + } + &.weui-search-bar_focusing { + .weui-search-bar__cancel-btn { + display: block; + } + .weui-search-bar__label { + display: none; + } + } + + // .weui-icon-search { + // font-size: 10px; + // width: 1.6em; + // height: 1.6em; + // margin-left: 8px; + // margin-right: 4px; + // flex-shrink: 0; + // } +} + +.weui-search-bar__form { + position: relative; + flex: auto; // 1; + // min-width: 0; + background-color: #EFEFF4; // var(--weui-BG-2); + + &::after{ + content: ''; + position: absolute; + left: 0; + top:0; + width: 200%; + height: 200%; + transform: scale(.5); + transform-origin: 0 0; + border-radius: 10px; + border: 1px solid #E6E6EA; + box-sizing: border-box; + background: #FFFFFF; + } +} +.weui-search-bar__box { + position: relative; + padding-left: 30px; + padding-right: 30px; + height: 100%; + width: 100%; + box-sizing: border-box; + z-index: 1; + // display: flex; + // align-items: center; + + .weui-search-bar__input { + padding: 4px 0; // 8px 0; + width: 100%; + height: em(math.div(20, 14)); // em(math.div(($weuiSearchInputHeight - 16px), 14)); + border: 0; + font-size: 14px; + line-height: em(math.div(20, 14)); // em(math.div(($weuiSearchInputHeight - 16px), 14)); + box-sizing: content-box; + background: transparent; + // caret-color: $weuiColorPrimary; + // color: $weuiTextColorTitle; + &:focus { + outline: none; + } + } + .weui-icon-search { + position: absolute; + top: 50%; + left: 10px; + margin-top: -14px; + line-height: 28px; + } + .weui-icon-clear { + // flex-shrink: 0; + // font-size: 10px; + // width: 2em; + // height: 2em; + // margin-left: 8px; + // mask-size: 2em; + // mask-position: calc(100% - 8px) 0; + // min-width: 44px; + position: absolute; + top: 50%; + right: 0; + margin-top: -14px; + padding: 0 10px; + line-height: 28px; + // &::after { + // content: ''; + // position: absolute; + // top: 0; + // bottom: 0; + // width: 44px; + // } + } +} +.weui-search-bar__label { + position: absolute; + top: 1px; // 0; + right: 1px; // 0; + bottom: 1px; // 0; + left: 1px; // 0; + z-index: 2; + // font-size: 0; + border-radius: 3px; // 4px; + text-align: center; + // display: flex; + // align-items: center; + // justify-content: center; + color: #9B9B9B; // $weuiTextColorDesc; + background: #FFFFFF; // var(--weui-BG-2); + span { + display: inline-block; + font-size: 14px; + vertical-align: middle; + } + .weui-icon-search { + margin-right: 5px; + } +} +.weui-search-bar__cancel-btn { + // flex-shrink: 0; + display: none; + margin-left: 10px; // 8px; + line-height: 28px; + color: #09BB07; // $weuiLinkColorDefault; + white-space: nowrap; +} +.weui-search-bar__input:not(:valid) ~ .weui-icon-clear { +// .weui-search-bar__input:not(:valid) + .weui-icon-clear { + display: none; +} + +//干掉input[search]默认的clear button +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-slider.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-slider.scss new file mode 100644 index 0000000000..51b35f4513 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-slider.scss @@ -0,0 +1,45 @@ +.weui-slider { + padding: 15px 18px; + user-select: none; +} + +.weui-slider__inner { + position: relative; + height: 2px; + background-color: #E9E9E9; // $weuiLineColorLight; +} + +.weui-slider__track { + height: 2px; // 100%; + background-color: $weuiColorPrimary; + width: 0; +} + +.weui-slider__handler { + position: absolute; + left: 0; + top: 50%; + width: 28px; + height: 28px; + margin-left: -14px; + margin-top: -14px; + border-radius: 50%; + background-color: #fff; // 固定色值 + box-shadow: 0 0 4px rgba(0, 0, 0, .2); // 0 0 4px var(--weui-FG-3); +} + + +.weui-slider-box { + display: flex; + align-items: center; + .weui-slider { + flex: 1; + } +} +.weui-slider-box__value { + margin-left: 0.5em; + min-width: 24px; + color: #888888; // $weuiTextColorDesc; + text-align: center; + font-size: 14px; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-steps.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-steps.scss new file mode 100644 index 0000000000..f0e140b275 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-steps.scss @@ -0,0 +1,307 @@ +/** +竖版的线上下端和文字区域对齐 +横版的线左右端间距固定4px +**/ + +body, +page { + --weui-STEPS-DEFAULT-COLOR: var(--weui-FG-3); + --weui-STEPS-HIGHLIGHT-COLOR: var(--weui-BRAND); + --weui-STEPS-FONT-SIZE: 17; + --weui-STEPS-LINEHEIGHT: 1.4; + --weui-STEPS-DOT-SIZE: calc(8 / var(--weui-STEPS-FONT-SIZE) * 1em); + --weui-STEPS-ICON-SIZE: 40; + --weui-STEPS-VERTICAL-DOT-GAP: calc((1em - var(--weui-STEPS-DOT-SIZE)) / 2); + --weui-STEPS-HORIZONAL-DOT-GAP: 4px; +} + +.weui-steps { + line-height: var(--weui-STEPS-LINEHEIGHT); + font-size: calc(1px * var(--weui-STEPS-FONT-SIZE)); +} +.weui-steps__item__title, +.weui-steps__item__desc { + display: block; +} +.weui-steps__item__title { + font-weight: 500; +} +.weui-steps__item__desc { + font-size: 14px; + color: var(--weui-FG-2); + margin-top: 4px; +} + +.weui-steps_vertical { + position: relative; + .weui-steps__item { + position: relative; + padding-bottom: 32px; + &::before { + content: ''; + @include setLeftLine(var(--weui-STEPS-DEFAULT-COLOR)); + + top: calc((var(--weui-STEPS-LINEHEIGHT) - (var(--weui-STEPS-LINEHEIGHT) - 1) / 2) * 1em); // 线的顶部跟文字区域底部对齐 + bottom: calc((var(--weui-STEPS-LINEHEIGHT) - 1) / 2 * -1em); // 线的底部跟下个步骤的文字区域顶部对齐 + } + &:first-child { + &:not(.weui-steps__item_success) { + .weui-steps__item__inner { + &::before { + background-color: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + } + } + } + &:last-child { + &::before { + display: none; + } + } + } + .weui-steps__item__inner { + position: relative; + z-index: 1; // 盖在线的上层 + padding-left: 36px; + + // before用来画圆点 + &::before { + content: ''; + width: var(--weui-STEPS-DOT-SIZE); + height: var(--weui-STEPS-DOT-SIZE); + border-radius: 100%; + background-color: var(--weui-STEPS-DEFAULT-COLOR); + position: absolute; + z-index: 1; + left: 0; + top: calc(var(--weui-STEPS-LINEHEIGHT) / 2 * 1em); + transform: translate(-50%, -50%); // 和步骤文本第一行垂直居中 + } + } + .weui-steps__icon { + font-size: calc(1px * var(--weui-STEPS-FONT-SIZE)); + width: calc(var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em); + height: calc(var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em); + position: absolute; + z-index: 1; + left: 0; + top: calc(var(--weui-STEPS-LINEHEIGHT) / 2 * 1em); + transform: translate(-50%, -50%); + margin-top: calc((var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em - 1em) / 2 - .28em); // 和文本第一行顶对齐，不能直接top0，因为上下都需要盖住线，最后的0.28em是图标的空白区域多余出来 + } + .weui-steps__item_icon { + &::before { + top: calc(var(--weui-STEPS-VERTICAL-DOT-GAP) + var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em - .14em); // 最后的0.14em是因为图标的空白区域需要计算进去 + } + .weui-steps__item__inner { + &::before { + display: none; + } + } + } + .weui-steps__item_icon-prev { + &::before { + bottom: calc(var(--weui-STEPS-VERTICAL-DOT-GAP) - (var(--weui-STEPS-LINEHEIGHT) - 1) / 2 * 1em + .14em); // 最后0.14em是因为图标的空白区域需要计算进去 + } + } + .weui-steps__item_success { + &::before { + border-color: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + .weui-steps__item__inner { + &::before { + background-color: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + } + & + .weui-steps__item { + .weui-steps__item__inner { + &::before { + background-color: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + } + } + } +} + +.weui-steps_horizonal { + display: flex; + .weui-steps__item { + flex: 1; + display: flex; + align-items: center; + + &::before { + content: ''; + display: block; + width: var(--weui-STEPS-DOT-SIZE); + height: var(--weui-STEPS-DOT-SIZE); + border-radius: 100%; + background-color: var(--weui-STEPS-DEFAULT-COLOR); + flex-shrink: 0; + } + &::after { + content: ''; + height: 0.5px; + flex: 1; + margin: 0 var(--weui-STEPS-HORIZONAL-DOT-GAP); + background: var(--weui-STEPS-DEFAULT-COLOR); + } + &:last-child { + flex: none; + &::after { + display: none; + } + } + &:first-child { + &:not(.weui-steps__item_success) { + &::before { + background: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + } + } + } + .weui-steps__item__inner { + margin-left: 8px; + } + .weui-steps__item_success { + &::before, + &::after { + background: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + & + .weui-steps__item { + &::before { + background: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + } + } +} + + + +// 以下两种扩展暂时不放出来 +.weui-steps_horizonal-primary { + display: flex; + .weui-steps__item { + flex: 1; + position: relative; + &::before { + @include setTopLine(var(--weui-STEPS-DEFAULT-COLOR)); + } + &:last-child { + flex: none; + &::before { + display: none; + } + } + } + .weui-steps__item__inner { + position: relative; + padding-top: 36px; + &::before { + content: ''; + position: absolute; + z-index: 1; + width: var(--weui-STEPS-DOT-SIZE); + height: var(--weui-STEPS-DOT-SIZE); + border-radius: 100%; + background-color: var(--weui-STEPS-DEFAULT-COLOR); + top: 0; + left: 0; + transform: translateY(-50%); + } + &::after { + content: ''; + background-color: var(--weui-BG-2); + width: calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP)); + height: calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP)); + position: absolute; + top: 0; + left: 0; + transform: translate(calc(-50% + var(--weui-STEPS-DOT-SIZE) / 2), -50%); + } + } + + .weui-steps__item_success { + &::before { + border-color: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + .weui-steps__item__inner { + &::before { + background: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + } + & + .weui-steps__item { + .weui-steps__item__inner { + &::before { + background: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + } + } + } +} +.weui-steps_horizonal-center { + display: flex; + text-align: center; + .weui-steps__item { + flex: 1; + position: relative; + &::after, + &::before { + @include setTopLine(var(--weui-STEPS-DEFAULT-COLOR)); + } + &::before { + right: 50%; + } + &::after { + left: 50%; + } + &:first-child { + &::before { + display: none; + } + } + &:last-child { + &::after { + display: none; + } + } + } + .weui-steps__item__inner { + position: relative; + z-index: 1; + padding-top: 36px; + &::before { + content: ''; + position: absolute; + z-index: 1; + width: var(--weui-STEPS-DOT-SIZE); + height: var(--weui-STEPS-DOT-SIZE); + border-radius: 100%; + background-color: var(--weui-STEPS-DEFAULT-COLOR); + top: 0; + left: 50%; + transform: translate(-50%, -50%); + } + &::after { + content: ''; + background-color: var(--weui-BG-2); + width: calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP)); + height: calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP)); + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, -50%); + } + } + + .weui-steps__item_success { + &::before, + &::after, + .weui-steps__item__inner::before, + & + .weui-steps__item::before, + & + .weui-steps__item .weui-steps__item__inner::before { + background: var(--weui-STEPS-HIGHLIGHT-COLOR); + } + } +} + diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tab/weui-navbar.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tab/weui-navbar.scss new file mode 100644 index 0000000000..f78c0fbce3 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tab/weui-navbar.scss @@ -0,0 +1,57 @@ +.weui-navbar { + display: flex; + position: absolute; // relative; + z-index: 500; + top: 0; + width: 100%; + background-color: #FAFAFA; // var(--weui-BG-2); + // padding-top: constant(safe-area-inset-top); + // padding-top: env(safe-area-inset-top); + + &::after { + @include setBottomLine(#CCCCCC); // $weuiLineColorLight + } + + & + .weui-tab__panel { + padding-top: 50px; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } +} + +.weui-navbar__item { + position: relative; + display: block; + flex: 1; + padding: 13px 0; // 16px 0; + // padding-top: calc(16px + constant(safe-area-inset-top)); + // padding-top: calc(16px + env(safe-area-inset-top)); + text-align: center; + font-size: 15px; // 17px; + // line-height: em(math.div($weuiNavBarHeight - 32, 17)); + @include setTapColor(); + + &:active { + background-color: #EDEDED; // $weuiBgColorActive; + } + + &.weui-bar__item_on { + background-color: #EAEAEA; // $weuiBgColorActive; + } + + &::after { + @include setRightLine(#CCCCCC); // $weuiLineColorLight + } + + // &:first-child { + // padding-left: constant(safe-area-inset-left); + // padding-left: env(safe-area-inset-left); + // } + &:last-child { + // padding-right: constant(safe-area-inset-right); + // padding-right: env(safe-area-inset-right); + &::after { + display: none; + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tab/weui-tab.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tab/weui-tab.scss new file mode 100644 index 0000000000..62073e35f8 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tab/weui-tab.scss @@ -0,0 +1,21 @@ +@import "./weui-tabbar"; +@import "./weui-navbar"; + +.weui-tab { + position: relative; // flex; + height: 100%; + // box-sizing: border-box; + // flex-direction: column; +} + +.weui-tab__panel { + box-sizing: border-box; + // flex: 1; + height: 100%; + padding-bottom: 50px; + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.weui-tab__content { + display: none; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tab/weui-tabbar.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tab/weui-tabbar.scss new file mode 100644 index 0000000000..9b0bb970b4 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tab/weui-tabbar.scss @@ -0,0 +1,67 @@ +.weui-tabbar { + display: flex; + position: absolute; // relative; + z-index: 500; + bottom: 0; + width: 100%; + background-color: #F7F7FA; // $weuiBgColorPrimary; + + &::before { + @include setTopLine(#C0BFC4); // $weuiLineColorLight + } +} + +.weui-tabbar__item { + display: block; + flex: 1; + padding: 5px 0; // 8px 0; + padding-bottom: constant(safe-area-inset-bottom); // calc(8px + constant(safe-area-inset-bottom)); + padding-bottom: env(safe-area-inset-bottom); // calc(8px + env(safe-area-inset-bottom)); + font-size: 0; + color: $weuiTextColorGray; // $weuiTextColorDesc; + text-align: center; + @include setTapColor(); + + // &:first-child { + // padding-left: constant(safe-area-inset-left); + // padding-left: env(safe-area-inset-left); + // } + // &:last-child { + // padding-right: constant(safe-area-inset-right); + // padding-right: env(safe-area-inset-right); + // } + + &.weui-bar__item_on { + .weui-tabbar__icon, + .weui-tabbar__icon > i, + .weui-tabbar__label { + color: #09BB07; // $weuiColorPrimary; + } + } +} + +.weui-tabbar__icon { + display: inline-block; + // font-size: 10px; + width: 27px; // em(math.div(($weuiTabBarHeight - 8 * 2 - 10 * 1.4 - 2), 10)); + height: 27px; // em(math.div(($weuiTabBarHeight - 8 * 2 - 10 * 1.4 - 2), 10)); + // margin-bottom: 2px; + + img { + width: 100%; + height: 100%; + } +} + +i.weui-tabbar__icon, +.weui-tabbar__icon > i { + font-size: 24px; + color: $weuiTextColorGray; // $weuiTextColorDesc; +} + +.weui-tabbar__label { + text-align: center; + color: $weuiTextColorGray; // $weuiTextColorTitle; + font-size: 10px; + line-height: 1.8; // 1.4 +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-actionsheet.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-actionsheet.scss new file mode 100644 index 0000000000..24d936808f --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-actionsheet.scss @@ -0,0 +1,142 @@ +$weuiActionSheetAndroidBorderRadius: 2px; + +.weui-actionsheet { + position: fixed; + left: 0; + bottom: 0; + transform: translate(0, 100%); + backface-visibility: hidden; + z-index: 5000; + width: 100%; + background-color: $weuiBgColorDefault; + //slide up animation + transition: transform 0.3s; + // border-top-left-radius: 12px; + // border-top-right-radius: 12px; + // overflow: hidden; + // outline: 0; +} +.weui-actionsheet__title { + position: relative; + height: 65px; // 56px; + padding: 0 20px; // 8px 24px; + // padding: 8px calc(24px + constant(safe-area-inset-right)) 8px calc(24px + constant(safe-area-inset-left)); + // padding: 8px calc(24px + env(safe-area-inset-right)) 8px calc(24px + env(safe-area-inset-left)); + // box-sizing: border-box; + line-height: 1.4; + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + font-size: 14px; // 12px; + color: #888; // $weuiTextColorDesc; + // line-height: 1.4; + background: #FCFCFD; // var(--weui-BG-2); + &::before { + @include setBottomLine($weuiCellBorderColor); + } + .weui-actionsheet__title-text { + @include ellipsisLn(2); + } +} +.weui-actionsheet__menu { + // color: $weuiTextColorTitle; + background-color: #FCFCFD; // var(--weui-BG-2); +} +.weui-actionsheet__action { + margin-top: 6px; // 8px; + // color: $weuiTextColorTitle; + background-color: #FCFCFD; // var(--weui-BG-2); + // .weui-actionsheet__cell { + // &:last-child { + // padding-bottom: calc($weuiCellGapV + constant(safe-area-inset-bottom)); + // padding-bottom: calc($weuiCellGapV + env(safe-area-inset-bottom)); + // } + // &.weui-actionsheet__cell_tips { + // &:last-child { + // padding-bottom: calc(12px + constant(safe-area-inset-bottom)); + // padding-bottom: calc(12px + env(safe-area-inset-bottom)); + // } + // } + // } +} +.weui-actionsheet__cell { + position: relative; + padding: 10px 0; // $weuiCellGapV; + // padding: $weuiCellGapV calc($weuiCellGapV + constant(safe-area-inset-right)) $weuiCellGapV calc($weuiCellGapV + constant(safe-area-inset-left)); + // padding: $weuiCellGapV calc($weuiCellGapV + env(safe-area-inset-right)) $weuiCellGapV calc($weuiCellGapV + env(safe-area-inset-left)); + text-align: center; + font-size: 18px; // 17px; + // line-height: $weuiCellLineHeight; + // overflow: hidden; + &::before { + @include setTopLine($weuiCellBorderColor); + } + &:active { + background-color: $weuiBgColorActive; + } + &:first-child { + &::before { + display: none; + } + } +} +// .weui-actionsheet__cell__tips { +// display: block; +// font-size: 12px; +// color: var(--weui-FG-1); +// } +// .weui-actionsheet__cell_tips { +// padding-top: 12px; +// padding-bottom: 12px; +// } +// .weui-actionsheet__cell_warn { +// color: $weuiColorWarn; +// } + +//android actionSheet +.weui-skin_android { + .weui-actionsheet { + position: fixed; + left: 50%; + top: 50%; + bottom: auto; + transform: translate(-50%, -50%); + //padding: 0 40px; + width: 274px; + box-sizing: border-box; + backface-visibility: hidden; + background: transparent; + //slide up animation + transition: transform 0.3s; + // border-top-left-radius: 0; + // border-top-right-radius: 0; + } + .weui-actionsheet__action { + display: none; + } + .weui-actionsheet__menu { + border-radius: $weuiActionSheetAndroidBorderRadius; + box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1); + } + .weui-actionsheet__cell { + padding: 13px 24px; // $weuiCellGapV; + font-size: 16px; // 17px; + line-height: 1.4; // $weuiCellLineHeight; + // color: $weuiTextColorTitle; + text-align: left; + &:first-child { + border-top-left-radius: $weuiActionSheetAndroidBorderRadius; + border-top-right-radius: $weuiActionSheetAndroidBorderRadius; + } + &:last-child { + border-bottom-left-radius: $weuiActionSheetAndroidBorderRadius; + border-bottom-right-radius: $weuiActionSheetAndroidBorderRadius; + } + } +} + +//actionSheet aniamtion +.weui-actionsheet_toggle { + transform: translate(0, 0); +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-badge.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-badge.scss new file mode 100644 index 0000000000..d5c268c15a --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-badge.scss @@ -0,0 +1,17 @@ +.weui-badge { + display: inline-block; + padding: 0.15em 0.4em; + min-width: 8px; // em(math.div(8, 12)); + border-radius: 18px; + background-color: #F43530; // $weuiColorWarn; + color: #fff; // 固定色值 + line-height: 1.2; + text-align: center; + font-size: 12px; + vertical-align: middle; +} + +.weui-badge_dot { + padding: 0.4em; + min-width: 0; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-dialog.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-dialog.scss new file mode 100644 index 0000000000..073460c24f --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-dialog.scss @@ -0,0 +1,172 @@ +.weui-dialog { + position: fixed; + z-index: 5000; + width: 80%; + max-width: 300px; + top: 50%; + left: 50%; // 16px; + // right: 16px; + transform: translate(-50%, -50%); // translate(0, -50%); + background-color: $weuiDialogBackgroundColor; + text-align: center; + border-radius: 3px; // 12px; + overflow: hidden; + // display: -webkit-box; + // display: -webkit-flex; + // display: flex; + // -webkit-flex-direction: column; + // flex-direction: column; + // max-height: 90%; + // outline: 0; +} + +.weui-dialog__hd { + padding: 1.3em $weuiDialogGapWidth .5em; +} +.weui-dialog__title { + font-weight: 400; // 700; + font-size: 18px; // 17px; + // line-height: 1.4; + // color: var(--weui-FG-0); +} +.weui-dialog__bd { + // overflow-y: auto; + // -webkit-overflow-scrolling: touch; + padding: 0 $weuiDialogGapWidth .8em; + // margin-bottom: 32px; + font-size: 15px; // 17px; + line-height: 1.3; // 1.4; + // @include hyphens; + min-height: 40px; + word-wrap: break-word; + word-break: break-all; + color: $weuiTextColorGray; // $weuiTextColorDesc; + &:first-child { + // min-height: 40px; + padding: 2.7em 20px 1.7em; // 32px $weuiDialogGapWidth 0; + // font-weight: 700; + color:#353535; // $weuiTextColorTitle; + // display: -webkit-box; + // display: -webkit-flex; + // display: flex; + // -webkit-flex-direction: column; + // flex-direction: column; + // -webkit-box-pack: center; + // -webkit-justify-content: center; + // justify-content: center; + } +} +.weui-dialog__ft { + position: relative; + line-height: 48px; + font-size: 18px; + display: flex; + &::after { + content: ' '; + @include setTopLine($weuiDialogLineColor); + } +} +.weui-dialog__btn { + flex: 1; + display: block; + // line-height: math.div(56 - 32, 17); + // padding: 16px 0; + // font-size: 17px; + color: $weuiDialogLinkColor; + // font-weight: 700; + text-decoration: none; + @include setTapColor(); + + // user-select: none; + &:active { + background-color: $weuiDialogLinkActiveBc; + } + + position: relative; + &::after { + content: ' '; + @include setLeftLine($weuiDialogLineColor); + } + &:first-child { + &::after { + display: none; + } + } +} +.weui-dialog__btn_default { + color: #353535; // var(--weui-FG-HALF); +} +.weui-dialog__btn_primary { + color: #0BB20C; +} + +.weui-skin_android { + .weui-dialog { + text-align: left; + box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1); + } + .weui-dialog__title { + font-size: 21px; // 22px; + // line-height: 1.4; + } + .weui-dialog__hd { + text-align: left; + } + .weui-dialog__bd { + color: $weuiTextColorGray; // $weuiTextColorDesc; + padding:.25em $weuiDialogGapWidth 2em; + font-size: 17px; + text-align: left; + &:first-child { + color: #353535; // $weuiTextColorTitle; + padding:1.6em $weuiDialogGapWidth 2em; + } + } + .weui-dialog__ft { + display: block; + text-align: right; + line-height: 42px; // 40px; + // min-height: 40px; + font-size: 16px; + padding: 0 $weuiDialogGapWidth .7em; // 0 $weuiDialogGapWidth 16px; + &::after { + display: none; + } + } + .weui-dialog__btn { + display: inline-block; + vertical-align: top; + padding: 0 0.8em; + &::after { + display: none; + } + + &:active { + background-color: rgba(0, 0, 0, .06); + } + + &:visited { + background-color: rgba(0, 0, 0, .06); + } + + &:last-child { + margin-right: -0.8em; + } + } + .weui-dialog__btn_default { + color: #808080; // var(--weui-FG-HALF); + } +} + +// @media screen and (min-width: 352px) { +// .weui-dialog { +// width: 320px; +// margin: 0 auto; +// } +// } + +@media screen and (min-width: 1024px) { + .weui-dialog { + width: 35%; + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-half-screen-dialog.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-half-screen-dialog.scss new file mode 100644 index 0000000000..548e8cbdb2 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-half-screen-dialog.scss @@ -0,0 +1,228 @@ +.weui-half-screen-dialog { + position: fixed; + left: 0; + right: 0; + bottom: 0; + min-height: 255px; + max-height: 75%; + z-index: 5000; + line-height: 1.4; + background-color: var(--weui-BG-2); + color: var(--weui-FG-0); + border-top-left-radius: 12px; + border-top-right-radius: 12px; + overflow: hidden; + padding: 0 24px; + padding: 0 calc(24px + constant(safe-area-inset-right)) constant(safe-area-inset-bottom) calc(24px + constant(safe-area-inset-left)); + padding: 0 calc(24px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(24px + env(safe-area-inset-left)); + box-sizing: border-box; + display: flex; + flex-direction: column; + outline: 0; + + @media only screen and (max-device-height: 558px) { + max-height: calc(100% - 16px); + } +} +.weui-half-screen-dialog__hd { + min-height: 64px; + display: flex; + align-items: center; + flex-shrink: 0; + + .weui-btn_icon { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + color: inherit; + &:active { opacity: 0.5; } + } +} +.weui-half-screen-dialog__hd__side { + position: relative; + left: -8px; +} +.weui-half-screen-dialog__hd__main { + flex: 1; + .weui-half-screen-dialog__hd__side + & { + text-align: center; + padding: 0 40px; + } + & + .weui-half-screen-dialog__hd__side { + right: -8px; + left: auto; + //兼容老版本 + .weui-icon-btn, + .weui-btn_icon { + right: 0; + } + } +} +.weui-half-screen-dialog__title { + display: block; + color: var(--weui-FG-0); + font-weight: 500; + font-size: 15px; +} +.weui-half-screen-dialog__subtitle { + display: block; + color: var(--weui-FG-1); + font-size: 10px; +} + +.weui-half-screen-dialog__bd { + flex: 1; + min-height: 0; + overflow-y: auto; + + @include hyphens(); + + padding-bottom: 56px; + font-size: 14px; + color: var(--weui-FG-0); +} +.weui-half-screen-dialog__desc { + font-size: 17px; + font-weight: 700; + color: var(--weui-FG-0); + line-height: 1.4; +} +.weui-half-screen-dialog__tips { + padding-top: 16px; + font-size: 14px; + color: var(--weui-FG-2); + line-height: 1.4; +} +.weui-half-screen-dialog__ft { + padding: 0 0 64px; + text-align: center; + + // 兼容旧版没有.weui-half-screen-dialog__btn-area的场景 + .weui-btn:nth-last-child(n+2), + .weui-btn:nth-last-child(n+2) + .weui-btn { + display: inline-block; + vertical-align: top; + margin: 0 8px; + width: 120px; + } +} +.weui-half-screen-dialog__btn-area { + & + .weui-half-screen-dialog__attachment-area { + margin-top: 24px; + margin-bottom: -34px; + } +} + +.weui-half-screen-dialog_large { + max-height: none; + top: 16px; +} +.weui-half-screen-dialog_slide { + .weui-half-screen-dialog__hd { + min-height: 0; + padding: 12px 16px 16px; + justify-content: center; + } + .weui-half-screen-dialog__slide-icon { + position: absolute; + top: 12px; + display: flex; + width: 40px; + height: 4px; + border-radius: 2px; + background: var(--weui-BG-0); + @include dark { + background:var(--weui-FG-3); + }; + + justify-content: center; + align-items: center; + + .weui-icon-arrow { + transform: rotate(90deg); + width: 0.8em; + height: 1.6em; + opacity: 0; + } + } +} + + +// 按钮组水平布局与垂直布局切换 +.weui-half-screen-dialog__btn-area { + @include weuiBtnWrapLayoutDefault(); +} +.weui-half-screen-dialog_btn-wrap { + .weui-half-screen-dialog__btn-area { + @include weuiBtnWrapLayoutWrap(); + } +} + + +.weui-icon-more { + mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M5 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E%3C/svg%3E") no-repeat 50% 50%; +} +.weui-icon-slide-down { + mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E %3Cdefs%3E %3Crect id='dda90263-a290-4594-926f-6aba8cb4779f-a' width='24' height='24' x='0' y='0' rx='12'/%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cmask id='dda90263-a290-4594-926f-6aba8cb4779f-b' fill='%23fff'%3E %3Cuse xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E %3C/mask%3E %3Cuse fill='%23000' fill-opacity='.05' xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E %3Cg fill-opacity='.9' mask='url(%23dda90263-a290-4594-926f-6aba8cb4779f-b)'%3E %3Cpath fill='%23000' d='M11.407 15.464L6.693 10.75l1.179-1.179 4.125 4.125 4.124-4.125L17.3 10.75l-4.714 4.714a.833.833 0 0 1-1.179 0z'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E"); +} + + +// 下面是兼容旧版本用的 +.weui-half-screen-dialog__hd { + .weui-icon-btn { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + color: inherit; + &:active { opacity: 0.5; } + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + min-width: 44px; + min-height: 44px; + width: 100%; + height: 100%; + } + } +} +.weui-icon-btn { + & { + outline: 0; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + border-width: 0; + background-color: transparent; + color: var(--weui-FG-0); + font-size: 0; + width: auto; + height: auto; + } +} +.weui-icon-btn_goback { + & { + color: $weuiTextColorTitle; + background-color: currentColor; + width: 0.71rem; // 字号17px下的12px + height: 1.42rem; + mask: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.438L8.955%2020.5l-7.666-7.79a1.02%201.02%200%20010-1.42L8.955%203.5%2010%204.563%202.682%2012%2010%2019.438z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E) no-repeat 50% 50%; + mask-size: 100%; + } +} +.weui-icon-btn_close { + & { + color: $weuiTextColorTitle; + background-color: currentColor; + width: 1.42rem; + height: 1.42rem; + mask: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E) no-repeat 50% 50%; + mask-size: 100%; + } +} + diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-information-bar.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-information-bar.scss new file mode 100644 index 0000000000..583331f0a8 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-information-bar.scss @@ -0,0 +1,123 @@ +@include setColor(--weui-informationBar-FG,#FFFFFF,#FFFFFF); +@include setColor(--weui-informationBar-LINK,#FFFFFF,#FFFFFF); +@include setColor(--weui-informationBar-ICON,#FFFFFF,#FFFFFF); +@include setColor(--weui-informationBar-BG, $LIGHT_RED, $DARK_RED); + +@include setColor(--weui-informationBar-warnWeak-FG, $LIGHT_FG_1, $DARK_FG_1); +@include setColor(--weui-informationBar-warnWeak-LINK, $LIGHT_LINK, $DARK_LINK); +@include setColor(--weui-informationBar-warnWeak-ICON , $LIGHT_RED, $DARK_RED); +@include setColor(--weui-informationBar-warnWeak-BG, $LIGHT_TAG_BACKGROUND_RED, $DARK_TAG_BACKGROUND_RED); + +@include setColor(--weui-informationBar-noColor-BG, $LIGHT_FG_2, $DARK_FG_2); + +@include setColor(--weui-informationBar-tipsStrong-BG, $LIGHT_ORANGE, $DARK_ORANGE); + +@include setColor(--weui-informationBar-tipsWeak-FG, $LIGHT_FG_1, $DARK_FG_1); +@include setColor(--weui-informationBar-tipsWeak-LINK, $LIGHT_LINK, $DARK_LINK); +@include setColor(--weui-informationBar-tipsWeak-ICON, $LIGHT_FG_1, $DARK_FG_1); +@include setColor(--weui-informationBar-tipsWeak-BG, $LIGHT_BG_1, $DARK_BG_1); + + + +.weui-information-bar { + position: fixed; + top: 8px; + left: 8px; + right: 8px; + padding: 12px 16px; + border-radius: 8px; + font-size: 14px; + z-index: 5500; + @include text_wrap(); + + transform: translateZ(0); + + .weui-btn_icon { + margin-left: 8px; + + &:active { + opacity: 0.5; + } + } + + // 换色 + color: var(--weui-informationBar-FG); + background: var(--weui-informationBar-BG); + + [class*="weui-icon-"] { + color: var(--weui-informationBar-ICON); + } + + .weui-link { + color: var(--weui-informationBar-LINK); + } + + .weui-btn_icon { + [class*="weui-icon-"] { + color: var(--weui-informationBar-FG); + } + } +} +.weui-information-bar, +.weui-information-bar__hd, +.weui-information-bar__ft { + display: flex; + align-items: center; +} +.weui-information-bar__hd { + [class*="weui-icon-"] { + margin-right: 8px; + } +} +.weui-information-bar__bd { + flex: 1; + min-width: 0; + + &:first-child { + &:last-child { + text-align: center; + } + } +} +.weui-information-bar_warn-weak { + color: var(--weui-informationBar-warnWeak-FG); + background: var(--weui-informationBar-warnWeak-BG); + + [class*="weui-icon-"] { + color: var(--weui-informationBar-warnWeak-ICON); + } + + .weui-link { + color: var(--weui-informationBar-warnWeak-LINK); + } + + .weui-btn_icon { + [class*="weui-icon-"] { + color: var(--weui-informationBar-warnWeak-FG); + } + } +} +.weui-information-bar_warn-no-color { + background: var(--weui-informationBar-noColor-BG); +} +.weui-information-bar_tips-strong { + background: var(--weui-informationBar-tipsStrong-BG); +} +.weui-information-bar_tips-weak { + color: var(--weui-informationBar-tipsWeak-FG); + background: var(--weui-informationBar-tipsWeak-BG); + + [class*="weui-icon-"] { + color: var(--weui-informationBar-tipsWeak-ICON); + } + + .weui-link { + color: var(--weui-informationBar-tipsWeak-LINK); + } + + .weui-btn_icon { + [class*="weui-icon-"] { + color: var(--weui-informationBar-tipsWeak-FG); + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-list-tips.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-list-tips.scss new file mode 100644 index 0000000000..b85a141d27 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-list-tips.scss @@ -0,0 +1,36 @@ +.weui-list-tips { + list-style: none; + padding-top: 24px; + padding-bottom: 24px; + line-height: 1.4; + font-size: 14px; + color: var(--weui-FG-1); + position: relative; + &::before { + content: ''; + @include setTopLine(var(--weui-FG-3)); + } + &:last-child { + padding-bottom: 0; + } +} +.weui-list-tips__item { + position: relative; + padding-left: 15px; + margin: 16px 0; + &::before { + content: '\2022'; + position: absolute; + left: 0; + top: -0.1em; + } + &:first-child { + margin-top: 0; + } + .weui-form-preview__list + .weui-list-tips > & { + &:first-child { + margin-top: 6px; + } + } +} + diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-loadmore.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-loadmore.scss new file mode 100644 index 0000000000..ae803c77f6 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-loadmore.scss @@ -0,0 +1,51 @@ +.weui-loadmore { + width: 65%; + margin: 1.5em auto; // 20px auto; + text-align: center; + font-size: 14px; // 0; + line-height: 1.6em; + + // .weui-loading, + // .weui-primary-loading { + // margin-right: 8px; + // } +} + +.weui-loadmore__tips { + display: inline-block; + vertical-align: middle; + // font-size: 14px; + // line-height: 1.6; + // color: var(--weui-FG-1); +} + +.weui-loadmore_line { + border-top: 1px solid $weuiLineColorLight; + margin-top: 2.4em; // 32px; + + .weui-loadmore__tips { + position: relative; + top: -0.9em; + padding: 0 0.55em; // 0 8px; + background-color: #FFFFFF; // var(--weui-BG-2); + color: $weuiTextColorGray; + } +} + +.weui-loadmore_dot { + .weui-loadmore__tips { + padding: 0 .16em; + + &::before { + content: ' '; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: $weuiLineColorLight; + display: inline-block; + position: relative; + vertical-align: 0; + top: -0.16em; + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-mask.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-mask.scss new file mode 100644 index 0000000000..9ca1e65e2c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-mask.scss @@ -0,0 +1,18 @@ +.weui-mask { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); +} + +.weui-mask_transparent { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + left: 0; + bottom: 0; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-toast.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-toast.scss new file mode 100644 index 0000000000..4e24a370a8 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-toast.scss @@ -0,0 +1,96 @@ +.weui-toast { + position: fixed; + z-index: 5000; // 5500; + // font-size: 10px; + width: 7.6em; // 13.6em; + min-height: 7.6em; // 13.6em; + top: 180px; // 40%; + left: 50%; + // transform: translate(-50%, -50%); + text-align: center; + border-radius: 5px; // 12px; + color: #FFFFFF; // rgba(255, 255, 255, 0.9); + margin-left: -3.8em; + // display: flex; + // flex-direction: column; + // align-items: center; + // justify-content: center; + background: rgba(17, 17, 17, 0.7); + // background-color: var(--weui-BG-4); + // box-sizing: border-box; + // line-height: 1.4; +} +// .weui-toast_text { +// width: auto; +// height: auto; +// min-width: 152px; +// max-width: 216px; +// padding: 12px 0; +// border-radius: 8px; +// .weui-toast__content { +// font-size: 14px; +// padding: 0 20px; +// } +// } +.weui-icon_toast { + // 重置 weui-icon 权重 + // width: 4em; + // height: 4em; + + display: block; + margin: 22px 0 0; + // margin-bottom: 16px; + &.weui-icon-success-no-circle { + // color: rgba(255, 255, 255, 0.9); + &::before { + color: #FFFFFF; + font-size: 55px; + } + } + // &.weui-icon-warn { + // color: rgba(255, 255, 255, 0.9); + // } + &.weui-loading { + margin:30px 0 0; + width:38px; + height:38px; + vertical-align: baseline; + } + // &.weui-primary-loading { + // display: flex; + // width: 1em; + // height: 1em; + // font-size: 40px; + // color: #ededed; + // &::before { + // border-width: 4px 0 4px 4px; + // } + // &::after { + // border-width: 4px 4px 4px 0; + // } + // .weui-primary-loading__dot { + // width: 4px; + // height: 4px; + // border-top-right-radius: 4px; + // border-bottom-right-radius: 4px; + // } + // } +} + +.weui-toast__content { + margin: 0 0 15px; + // font-size: 17px; + // padding: 0 12px; + // @include hyphens; +} + +// 多行文本场景 +// .weui-toast_text-more { +// .weui-icon_toast { +// margin-bottom: 12px; +// } +// .weui-toast__content { +// font-size: 14px; +// line-height: 1.6; +// } +// } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-toptips.scss b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-toptips.scss new file mode 100644 index 0000000000..47c23df6cf --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/styles/widget/weui-tips/weui-toptips.scss @@ -0,0 +1,18 @@ +.weui-toptips { + display: none; + position: fixed; + transform: translateZ(0); + top: 0; // 8px; + left: 0; // 8px; + right: 0; // 8px; + padding: 5px; // 10px; + // border-radius: 8px; + font-size: 14px; + text-align: center; + color: #fff; // 固定色值 + z-index: 5000; // 5500; + @include text_wrap(); +} +.weui-toptips_warn { + background-color: $weuiColorWarn; +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/utils/helper.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/utils/helper.ts similarity index 100% rename from packages/taro-platform-harmony-hybrid/src/components/utils/helper.ts rename to packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/utils/helper.ts diff --git a/packages/taro-platform-harmony-hybrid/src/components/utils/index.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/utils/index.ts similarity index 100% rename from packages/taro-platform-harmony-hybrid/src/components/utils/index.ts rename to packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/utils/index.ts diff --git a/packages/taro-platform-harmony-hybrid/src/components/utils/style.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/utils/style.ts similarity index 100% rename from packages/taro-platform-harmony-hybrid/src/components/utils/style.ts rename to packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/utils/style.ts diff --git a/packages/taro-platform-harmony-hybrid/src/components/utils/url.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/utils/url.ts similarity index 100% rename from packages/taro-platform-harmony-hybrid/src/components/utils/url.ts rename to packages/taro-platform-harmony-hybrid/src/components/harmony-components/src/utils/url.ts diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/tsconfig.json b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/tsconfig.json new file mode 100644 index 0000000000..cec448802c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/tsconfig.json @@ -0,0 +1,28 @@ +{ + "extends": "../../../../../tsconfig.root.json", + "compilerOptions": { + "baseUrl": ".", + "esModuleInterop": true, + "jsx": "react", + "jsxFactory": "h", + "jsxFragmentFactory": "Fragment", + "module": "ESNext", + "sourceMap": true, + "target": "ES2017", + "typeRoots": ["./node_modules/@types"] + }, + "include": ["src", "types"], + "ts-node": { + "compilerOptions": { + "module": "UMD", + "moduleResolution": "Node", + "noEmit": true, + "resolveJsonModule": false, + "rootDir": ".", + "target": "ESNext" + }, + "esm": true, + "experimentalSpecifierResolution": "node", + "require": ["tsconfig-paths/register"] + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/Video.d.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/Video.d.ts new file mode 100644 index 0000000000..7cb6276134 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/Video.d.ts @@ -0,0 +1,604 @@ +import { ComponentType } from 'react' +import { StandardProps, CommonEventFunction } from './common' +interface VideoProps extends StandardProps { + /** 要播放视频的资源地址 + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + src: string + /** 指定视频时长 + * @supported weapp, alipay, qq, h5, rn, harmony_hybrid + */ + duration?: number + /** 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） + * @default true + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + controls?: boolean + /** 弹幕列表 + * @supported weapp, swan, qq, h5, harmony_hybrid + */ + danmuList?: any[] + /** 是否显示弹幕按钮，只在初始化时有效，不能动态变更 + * @default false + * @supported weapp, swan, qq, h5, harmony_hybrid + */ + danmuBtn?: boolean + /** 是否展示弹幕，只在初始化时有效，不能动态变更 + * @default false + * @supported weapp, swan, qq, h5, harmony_hybrid + */ + enableDanmu?: boolean + /** 是否自动播放 + * @default false + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + autoplay?: boolean + /** 是否循环播放 + * @default false + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + loop?: boolean + /** 是否静音播放 + * @default false + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + muted?: boolean + /** 指定视频初始播放位置 + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + initialTime?: number + /** 在非全屏模式下，是否开启亮度与音量调节手势 + * @default false + * @supported weapp, swan, qq + */ + pageGesture?: boolean + /** 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） + * @supported weapp, alipay, swan, tt, qq + */ + direction?: number + /** 若不设置，宽度大于240时才会显示 + * @default true + * @supported weapp, swan, qq, h5, harmony_hybrid + */ + showProgress?: boolean + /** 是否显示全屏按钮 + * @default true + * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid + */ + showFullscreenBtn?: boolean + /** 是否显示视频底部控制栏的播放按钮 + * @default true + * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid + */ + showPlayBtn?: boolean + /** 是否显示视频中间的播放按钮 + * @default true + * @supported weapp, alipay, swan, qq, h5, rn, harmony_hybrid + */ + showCenterPlayBtn?: boolean + /** 是否开启控制进度的手势 + * @default true + * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid + */ + enableProgressGesture?: boolean + /** 当视频大小与 video 容器大小不一致时，视频的表现形式 + * @default "contain" + * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid + */ + objectFit?: keyof VideoProps.ObjectFit + /** 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + poster?: string + /** 是否显示静音按钮 + * @default false + * @supported weapp, alipay, swan, tt, qq, h5, harmony_hybrid + */ + showMuteBtn?: boolean + /** 视频的标题，全屏时在顶部展示 + * @supported weapp, swan, qq + */ + title?: string + /** 播放按钮的位置 + * - `bottom`: controls bar 上 + * - `center`: 视频中间 + * + * @default 'bottom' + * @supported weapp, tt, qq + */ + playBtnPosition?: keyof VideoProps.PlayBtnPosition + /** 是否开启播放手势，即双击切换播放/暂停 + * @default false + * @supported weapp, swan, tt, qq, h5, harmony_hybrid + */ + enablePlayGesture?: boolean + /** 当跳转到其它小程序页面时，是否自动暂停本页面的视频 + * @default true + * @supported weapp, qq + */ + autoPauseIfNavigate?: boolean + /** 当跳转到其它微信原生页面时，是否自动暂停本页面的视频 + * @default true + * @supported weapp, qq + */ + autoPauseIfOpenNative?: boolean + /** 在非全屏模式下，是否开启亮度与音量调节手势（同 `page-gesture`） + * @default false + * @supported weapp, swan, tt, h5, harmony_hybrid + */ + vslideGesture?: boolean + /** 在全屏模式下，是否开启亮度与音量调节手势 + * @default true + * @supported weapp, swan, tt, h5, harmony_hybrid + */ + vslideGestureInFullscreen?: boolean + /** 视频前贴广告单元ID，更多详情可参考开放能力[视频前贴广告](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/video-patch-ad.html) + * @supported weapp + */ + adUnitId?: string + /** 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址 + * @supported weapp + */ + posterForCrawler?: string + /** 显示投屏按钮。只安卓且同层渲染下生效，支持 DLNA 协议 + * @supported weapp + */ + showCastingButton?: boolean + /** + * 设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]） + * @supported weapp + */ + pictureInPictureMode?: ('push' | 'pop')[] | 'push' | 'pop' | '' + /** + * 是否在小窗模式下显示播放进度（目前有bug，先注释掉） + * @supported weapp + * + * 先注释掉，原因如下： + * 该属性超过了 wxml 属性的长度限制，实际无法使用且导致编译报错。可等微信官方修复后再放开。 + * 参考1：https://developers.weixin.qq.com/community/develop/doc/000a429beb87f0eac07acc0fc5b400 + * 参考2: https://developers.weixin.qq.com/community/develop/doc/0006883619c48054286a4308258c00?_at=vyxqpllafi + * + */ + // pictureInPictureShowProgress?: boolean + + /** + * 是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效 + * @supported weapp + */ + enableAutoRotation?: boolean + /** + * 是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作 + * @supported weapp, tt + */ + showScreenLockButton?: boolean + /** + * 是否显示截屏按钮，仅在全屏时显示 + * @supported weapp + */ + showSnapshotButton?: boolean + /** + * 是否展示后台音频播放按钮 + * @supported weapp + */ + showBackgroundPlaybackButton?: boolean + /** + * 进入后台音频播放后的通知栏图标（Android 独有） + * @supported weapp + */ + backgroundPoster?: string + /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上 + * @supported h5, harmony_hybrid + */ + nativeProps?: Record + /** 是否展示底部进度条 + * @supported weapp + * @default true + */ + showBottomProgress?: boolean + /** 是否在小窗模式下显示播放进度 + * @supported weapp + */ + pictureInPictureShowProgress?: string + /** 格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； + * @supported weapp + */ + referrerPolicy?: 'origin' | 'no-referrer' + /** 是否是 DRM 视频源 + * @supported weapp + */ + isDrm?: boolean + /** DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (Android) + * @supported weapp + */ + provisionUrl?: string + /** DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (iOS) + * @supported weapp + */ + certificateUrl?: string + /** DRM 获取加密信息 url，仅 is-drm 为 true 时生效 + * @supported weapp + */ + licenseUrl?: string + /** 当 poster 高宽比跟视频高宽不匹配时，如何显示 poster，设置规则同 background-size 一致。 + * @supported alipay + */ + posterSize?: string + /** 当底部工具条隐藏时，是否显示细进度条（controls=false 时设置无效）。 + * @supported alipay + */ + showThinProgressBar?: string + /** 移动网络提醒样式。 + * + * 0 - 不提醒 + * 1 - tip 提醒 + * 2 - 阻塞提醒(无消耗流量大小) + * 3 - 阻塞提醒(有消耗流量大小提醒) + * + * @supported alipay, jd + */ + mobilenetHintType?: number + /** 浮窗设置。暂时不支持全局浮窗。 + * 可选值： + * + * none：无浮窗。 + * page：页面内浮窗。 + * @supported alipay + */ + floatingMode?: string + /** 非 wifi 环境下是否显示继续播放浮层 + * @supported swan + */ + showNoWifiTip?: string + /** 全屏模式下，是否显示锁屏按钮 + * @supported swan + */ + showLockBtn?: string + /** 是否显示倍速播放按钮 + * @supported swan + */ + showRateBtn?: string + /** 全屏模式下，是否显示侧边栏控制按钮 + * @supported swan + */ + showVslideBtnInFullscreen?: string + /** 是否进入无声视频模式，进入无声视频模式后，视频将静音播放且不响应系统物理音量变化，点击播放器提示无声视频，手势调节失效 + * @supported swan + */ + silentPlay?: string + /** 前贴广告的 unit id + * @supported tt + */ + preRollUnitId?: string + /** 后贴广告的 unit id + * @supported tt + */ + postRollUnitId?: string + /** 是否显示倍速控件，点击倍速控件后可选择倍速，可选值： 0.75/1.0/1.25/1.5/2 + * @supported tt + */ + showPlaybackRateBtn?: string + /** video 播放时宿主退出后台后开启小窗播放，iOS 14 及以上版本支持。开启时首次退出后台后给予弹窗提示用户授权，授权完成后可以到小程序「设置」中重设。支持场景见后台小窗播放 + * @supported tt + */ + enablePlayInBackground?: string + /** 设置署名水印 + * @supported tt + */ + signature?: string + /** 指定码率上界，单位为比特每秒 + * @supported weapp + */ + preferredPeakBitRate?: number + /** 是否为直播源 + * @supported weapp + */ + isLive?: boolean + /** 清晰度，设置清晰度列表和默认播放的清晰度。切换清晰度按钮仅在全屏时展示，属性说明详见 Definition 类型说明。需要保证 src 和 definition 中有一个为必填，若同时设置了 src 和 definition，definition 优先级高于 src + * @supported tt + */ + definition?: string + /** 当开始/继续播放时触发 play 事件 + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + onPlay?: CommonEventFunction + /** 当暂停播放时触发 pause 事件 + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + onPause?: CommonEventFunction + /** 当播放到末尾时触发 ended 事件 + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + onEnded?: CommonEventFunction + /** 播放进度变化时触发, 触发频率 250ms 一次 + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + onTimeUpdate?: CommonEventFunction + /** 当视频进入和退出全屏时触发 + * + * @supported h5, rn, harmony_hybrid + */ + onFullscreenChange?: CommonEventFunction + /** 视频出现缓冲时触发 + * + * @supported weapp, swan, tt, qq, jd + */ + onWaiting?: CommonEventFunction + /** 视频播放出错时触发 + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid + */ + onError?: CommonEventFunction + /** 加载进度变化时触发，只支持一段加载 + * @supported weapp, tt, qq, h5, harmony_hybrid + */ + onProgress?: CommonEventFunction + /** 视频元数据加载完成时触发 + * @supported weapp, swan, tt, jd, rn + */ + onLoadedMetaData?: CommonEventFunction + /** + * 播放器进入小窗 + * @supported weapp + */ + onEnterPictureInPicture?: CommonEventFunction + /** + * 播放器退出小窗 + * @supported weapp + */ + onLeavePictureInPicture?: CommonEventFunction + /** + * seek 完成时触发 + * @supported weapp, tt + */ + onSeekComplete?: CommonEventFunction + /** 视频进入和退出全屏时触发 + * @supported weapp, alipay, swan, tt, qq, jd + */ + onFullScreenChange?: CommonEventFunction + /** 切换 controls 显示隐藏时触发。 + * @supported weapp, swan + */ + onControlsToggle?: CommonEventFunction + /** 视频出现缓冲时触发。 + * @supported alipay + */ + onLoading?: CommonEventFunction + /** 点击视频 view 时触发 + * @supported alipay + */ + onTap?: CommonEventFunction + /** 用户操作事件 + * @supported alipay + */ + onUserAction?: CommonEventFunction + /** 视频播放终止。 + * @supported alipay + */ + onStop?: CommonEventFunction + /** 当视频加载完真正开始播放时触发。 + * @supported alipay + */ + onRenderStart?: CommonEventFunction + /** 贴片广告开始播放时触发 + * @supported tt + */ + onAdStart?: CommonEventFunction + /** 贴片广告播放结束时触发 + * @supported tt + */ + onAdEnded?: CommonEventFunction + /** 贴片广告非自然结束时触发，如：用户关闭广告或广告播放过程中 video 组件被销毁 + * @supported tt + */ + onAdClose?: CommonEventFunction + /** 贴片广告加载失败时触发 + * @supported tt + */ + onAdError?: CommonEventFunction + /** 视频倍速改变完成时触发。返回改变后的倍速值 + * @supported tt + */ + onPlayBackRateChange?: CommonEventFunction<{ + playbackRate: string + }> + /** 静音状态改变完成时触发。返回当前是否静音 + * @supported tt + */ + onMuteChange?: CommonEventFunction<{ + isMuted: boolean + }> + /** 点击控件时触发。返回当前点击的控件类型 + * @supported tt + */ + onControlTap?: CommonEventFunction<{ + controlType + }> + /** 进入小窗播放时触发 + * @supported tt + */ + onEnterBackground?: CommonEventFunction + /** 关闭小窗播放时触发 + * @supported tt + */ + onCloseBackground?: CommonEventFunction + /** 离开小窗进入 app 事件时触发 + * @supported tt + */ + onLeaveBackground?: CommonEventFunction + /** 否 + * @supported jd + */ + onLoadedData?: CommonEventFunction + /** 否 + * @supported jd + */ + onLoadStart?: CommonEventFunction + /** 否 + * @supported jd + */ + onSeeked?: CommonEventFunction + /** 否 + * @supported jd + */ + onSeeking?: CommonEventFunction + /** 贴片广告加载成功时触发，event.detail = { adType: 'preRollAd' | 'postRollAd' } + * @supported tt + */ + onAdLoad?: CommonEventFunction + /** 用户选择投屏设备时触发 detail = { state: "success"/"fail" } + * @supported weapp + */ + onCastingUserSelect?: CommonEventFunction + /** 投屏成功/失败时触发 detail = { type, state: "success"/"fail" } + * @supported weapp + */ + onCastingStateChange?: CommonEventFunction + /** 投屏被中断时触发 + * @supported weapp + */ + onCastingInterrupt?: CommonEventFunction +} +declare namespace VideoProps { + /** direction 的合法值 */ + interface direction { + /** 正常竖向 */ + 0 + /** 屏幕逆时针90度 */ + 90 + /** 屏幕顺时针90度 */ + '-90' + } + /** objectFit 的合法值 */ + interface ObjectFit { + /** 包含 */ + contain + /** 填充 */ + fill + /** 覆盖 */ + cover + } + /** playBtnPosition 的合法值 */ + interface PlayBtnPosition { + /** controls bar上 */ + bottom + /** 视频中间 */ + center + } + interface onTimeUpdateEventDetail { + /** 当前时间 */ + currentTime: number + /** 持续时间 */ + duration: number + /** 用户实际观看时长 + * @supported alipay + */ + userPlayDuration: number + /** 视频总时长 + * @supported alipay + */ + videoDuration: number + } + interface onFullscreenChangeEventDetail { + /** 方向 */ + direction: 'vertical' | 'horizontal' + /** 全屏 */ + fullScreen: number | boolean + } + interface onWaitingEventDetail { + /** 方向 */ + direction: 'vertical' | 'horizontal' + /** 全屏 */ + fullScreen: number | boolean + } + interface onProgressEventDetail { + /** 百分比 */ + buffered: number + } + interface onLoadedMetaDataEventDetail { + /** 视频宽度 */ + width: number + /** 视频高度 */ + height: number + /** 持续时间 */ + duration: number + } + interface onControlsToggleEventDetail { + /** 是否显示 */ + show: boolean + } + interface onTapEventDetail { + ptInView: { + x: number + y: number + } + } + interface onUserActionEventDetail { + /** 用户操作的元素 */ + tag: keyof UserActionTag | string + value: number + } + interface UserActionTag { + /** 底部播放按钮 */ + play + /** 中心播放按钮 */ + centerplay + /** 静音按钮 */ + mute + /** 全屏按钮 */ + fullscreen + /** 重试按钮 */ + retry + /** 网络提醒的播放按钮 */ + mobilenetplay + } + interface onAdTypeCommonEventDetail { + /** 广告类型 */ + adType: 'preRollAd' | 'postRollAd' + } +} +/** 视频。相关api：Taro.createVideoContext + * @classification media + * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid + * @example_react + * ```tsx + * export default class PageView extends Component { + * constructor() { + * super(...arguments) + * } + * + * render() { + * return ( + * + * + * ) + * } + * } + * ``` + * @example_vue + * ```html + * + * ``` + * @see https://developers.weixin.qq.com/miniprogram/dev/component/video.html + */ +declare const Video: ComponentType +export { Video, VideoProps } diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/common.d.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/common.d.ts new file mode 100644 index 0000000000..ccd56263e3 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/common.d.ts @@ -0,0 +1,174 @@ +import { CSSProperties, LegacyRef, ReactNode } from 'react' + +export interface StandardProps = ITouchEvent> extends EventProps { + /** 组件的唯一标示, 保持整个页面唯一 */ + id?: string + /** 同 `class`，在 React/Nerv 里一般使用 `className` 作为 `class` 的代称 */ + className?: string + /** 组件的内联样式, 可以动态设置的内联样式 */ + style?: string | CSSProperties + /** 子节点 */ + children?: ReactNode + /** 如果列表中项目的位置会动态改变或者有新的项目添加到列表中， + * 需要使用 `wx:key` 来指定列表中项目的唯一的标识符。 + */ + key?: string | number + /** 组件是否显示, 所有组件默认显示 */ + hidden?: boolean + /** 动画属性 */ + animation?: { actions: TaroGeneral.IAnyObject[] } | TaroGeneral.IAnyObject + /** 引用 */ + ref?: LegacyRef + /** + * 渲染 HTML + * @see /docs/html + */ + dangerouslySetInnerHTML?: { + __html: string + } + /** + * 是否开启编译模式 + * @supported weapp, harmony + */ + compileMode?: boolean +} + +export interface FormItemProps { + /** 表单数据标识 */ + name?: string +} + +export interface EventProps = ITouchEvent> { + /** 手指触摸动作开始 */ + onTouchStart?: (event: TouchEvent) => void + + /** 手指触摸后移动 */ + onTouchMove?: (event: TouchEvent) => void + + /** 手指触摸动作被打断，如来电提醒，弹窗 */ + onTouchCancel?: (event: TouchEvent) => void + + /** 手指触摸动作结束 */ + onTouchEnd?: (event: TouchEvent) => void + + /** 手指触摸后马上离开 */ + onClick?: (event: ITouchEvent) => void + + /** 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 */ + onLongPress?: (event: CommonEvent) => void + + /** 手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替） */ + onLongClick?: (event: CommonEvent) => void + + /** 会在 WXSS transition 或 Taro.createAnimation 动画结束后触发 */ + onTransitionEnd?: (event: CommonEvent) => void + + /** 会在一个 WXSS animation 动画开始时触发 */ + onAnimationStart?: (event: CommonEvent) => void + + /** 会在一个 WXSS animation 一次迭代结束时触发 */ + onAnimationIteration?: (event: CommonEvent) => void + + /** 会在一个 WXSS animation 动画完成时触发 */ + onAnimationEnd?: (event: CommonEvent) => void + + /** 在支持 3D Touch 的 iPhone 设备，重按时会触发 */ + onTouchForceChange?: (event: CommonEvent) => void +} + +export type BaseEventOrigFunction = (event: BaseEventOrig) => void + +export type TouchEventFunction = (event: ITouchEvent) => void + +export type CanvasTouchEventFunction = (event: CanvasTouchEvent) => void + +export type CommonEvent = BaseEventOrig + +export type CommonEventFunction = BaseEventOrigFunction + +export interface BaseEventOrig { + /** 事件类型 */ + type: string + + /** 事件生成时的时间戳 */ + timeStamp: number + + /** 触发事件的组件的一些属性值集合 */ + target: Target + + /** 当前组件的一些属性值集合 */ + currentTarget: currentTarget + + /** 额外的信息 */ + detail: T + + /** 阻止元素发生默认的行为 */ + preventDefault: () => void + + /** 阻止事件冒泡到父元素,阻止任何父事件处理程序被执行 */ + stopPropagation: () => void +} + +interface BaseTouchEvent extends BaseEventOrig { + /** 触摸事件，当前停留在屏幕中的触摸点信息的数组 */ + touches: Array + + /** 触摸事件，当前变化的触摸点信息的数组 */ + changedTouches: Array +} + +export type CanvasTouchEvent = BaseTouchEvent + +export type ITouchEvent = BaseTouchEvent + +export interface CanvasTouch { + identifier: number + x: number + y: number +} + +export interface ITouch extends Touch { + /** 触摸点的标识符 */ + identifier: number + /** 距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴 */ + pageX: number + /** 距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴 */ + pageY: number + /** 距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴 */ + clientX: number + /** 距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴 */ + clientY: number +} + +export interface Target { + /** 事件源组件的id */ + id: string + /** 当前组件的类型 */ + tagName: string + /** 事件源组件上由data-开头的自定义属性组成的集合 */ + dataset: { + [key: string]: any + } +} + +export type currentTarget = Target + +/** 网络状态数据 */ +export interface NetStatus { + /* 当前视频编/码器输出的比特率，单位 kbps */ + videoBitrate?: number + /* 当前音频编/码器输出的比特率，单位 kbps */ + audioBitrate?: number + /* 当前视频帧率 */ + videoFPS?: number | string + /* 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s */ + videoGOP?: number + /* 当前的发送/接收速度 */ + netSpeed?: number + /* 网络抖动情况，为 0 时表示没有任何抖动，值越大表明网络抖动越大，网络越不稳定 */ + netJitter?: number + /* 视频画面的宽度 */ + videoWidth?: number | string + /* 视频画面的高度 */ + videoHeight?: number | string +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/event.d.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/event.d.ts new file mode 100644 index 0000000000..cb9f05d14f --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/event.d.ts @@ -0,0 +1,7 @@ +export type EventHandler = (ev: Event) => void + +export interface TaroEvent extends Event { + srcElement: T | null + target: T + detail: D +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/index.d.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/index.d.ts new file mode 100644 index 0000000000..298df4f877 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/index.d.ts @@ -0,0 +1,11 @@ +export * from './common' +export * from './event' +export * from './props' + + +/** 媒体组件 */ +export { Video } from './Video' + + +/** 地图 */ +// export { Map } from './Map' diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/index.vue3.d.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/index.vue3.d.ts new file mode 100644 index 0000000000..e4d0959541 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/index.vue3.d.ts @@ -0,0 +1,75 @@ +/** + * vue tsx harmony-components 类型提示文件 + * + * ## 如何使用? + + * 请在醒目全局的类型文件中写入以下代码，覆盖默认的组件类型提示 + * ```typescript + * export declare module 'harmony-components' { + * export * from 'harmony-components/types/index.vue3' + * } + * ``` + */ +import * as CSS from 'csstype' +import { DefineComponent, VNodeRef } from 'vue' + +import { VideoProps } from './Video' + +/** 因为react的事件是CamelCase而vue得是Camelcase, 所以需要转换 */ +type OnCamelCaseToOnCamelcase = T extends `on${infer Rest}` + ? `on${Capitalize>}` + : T; + +type TransformCamelCase> = { + [key in keyof T as OnCamelCaseToOnCamelcase]: T[key] +} + +/** 联合类型不能用omit（比如picker） */ +type DistributiveOmit = T extends unknown ? TransformCamelCase> : never + +interface SlimProps { + class?: any + style?: CSS.Properties + innerHTML?: string +} + +/** 转换 react 的类型到 vue */ +export type RemoveReactAttribute = 'className' | 'style' | 'key' | 'ref' | 'dangerouslySetInnerHTML' +export type TransformReact2VueType

> = DistributiveOmit & SlimProps +export type VueComponentType

> = DefineComponent> + +export * from './common' +export * from './event' +export * from './props' + + +/** 媒体组件 */ + +export declare const Video: VueComponentType +/** 地图 */ +// export declare const Map: VueComponentType + +export type ReservedProps = { + key?: string | number | symbol + ref?: VNodeRef + ref_for?: boolean + ref_key?: string +} + +export type ElementAttrs = T & ReservedProps + +declare global { + namespace JSX { + interface IntrinsicElements { + /** 媒体组件 */ + video: ElementAttrs> + 'taro-video-core': ElementAttrs> + 'voip-room': ElementAttrs> + 'taro-voip-room-core': ElementAttrs> + /** 地图 */ + // map: ElementAttrs> + // 'taro-map-core': ElementAttrs> + + } + } +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/props.d.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/props.d.ts new file mode 100644 index 0000000000..2c72615f84 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/types/props.d.ts @@ -0,0 +1,7 @@ +export { StandardProps } from './common' +/** 媒体组件 */ +export { VideoProps } from './Video' +export { VoipRoomProps } from './VoipRoom' + +/** 地图 */ +// export { MapProps } from './Map' diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/virtual-list/index.d.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/virtual-list/index.d.ts new file mode 100644 index 0000000000..848fb9737c --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/virtual-list/index.d.ts @@ -0,0 +1,4 @@ +import VirtualList from '@tarojs/components-advanced/dist/components/virtual-list/index' + +export * from '@tarojs/components-advanced/dist/components/virtual-list/index' +export default VirtualList diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/virtual-list/index.js b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/virtual-list/index.js new file mode 100644 index 0000000000..2ec06cfb46 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/virtual-list/index.js @@ -0,0 +1,4 @@ +const VirtualList = require('@tarojs/components-advanced/dist/components/virtual-list/index.js') + +module.exports = VirtualList.default +module.exports.default = module.exports diff --git a/packages/taro-platform-harmony-hybrid/src/components/harmony-components/vue3.d.ts b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/vue3.d.ts new file mode 100644 index 0000000000..002479af15 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/components/harmony-components/vue3.d.ts @@ -0,0 +1,3 @@ +declare module 'harmony-components' { + export * from 'harmony-components/types/index.vue3' +} diff --git a/packages/taro-platform-harmony-hybrid/src/components/react/index.ts b/packages/taro-platform-harmony-hybrid/src/components/react/index.ts index d08196c1bb..31ccd55f02 100644 --- a/packages/taro-platform-harmony-hybrid/src/components/react/index.ts +++ b/packages/taro-platform-harmony-hybrid/src/components/react/index.ts @@ -23,7 +23,7 @@ export { FollowSwan } from '@tarojs/components/lib/react' export { Form } from '@tarojs/components/lib/react' export { FunctionalPageNavigator } from '@tarojs/components/lib/react' export { Icon } from '@tarojs/components/lib/react' -// export { Image } from '@tarojs/components/lib/react' +export { Image } from '@tarojs/components/lib/react' export { InlinePaymentPanel } from '@tarojs/components/lib/react' export { Input } from '@tarojs/components/lib/react' export { KeyboardAccessory } from '@tarojs/components/lib/react' @@ -59,14 +59,15 @@ export { Tabbar, TabItem } from '@tarojs/components/lib/react' export { Tabs } from '@tarojs/components/lib/react' export { Text } from '@tarojs/components/lib/react' export { Textarea } from '@tarojs/components/lib/react' -export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/react' +// export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/react' +export { Video, VideoControl, VideoDanmu } from '@tarojs/harmony-components/lib/react' export { View } from '@tarojs/components/lib/react' export { VoipRoom } from '@tarojs/components/lib/react' export { WebView } from '@tarojs/components/lib/react' // export { Video } from '../components/video/video' // export { VideoControl } from '../components/video/video-control' // export { VideoDanmu } from '../components/video/video-danmu' -export { default as Image } from '../components-react/image' +// export { default as Image } from '../components-react/image' // export * from './components/grid/grid' // export * from './components/root-portal/root-portal' // export * from './components/sticky-header/sticky-header' diff --git a/packages/taro-platform-harmony-hybrid/src/components/vue2/index.ts b/packages/taro-platform-harmony-hybrid/src/components/vue2/index.ts index 7d08d27558..c3adcc491d 100644 --- a/packages/taro-platform-harmony-hybrid/src/components/vue2/index.ts +++ b/packages/taro-platform-harmony-hybrid/src/components/vue2/index.ts @@ -25,7 +25,7 @@ export { FunctionalPageNavigator } from '@tarojs/components/lib/vue2' export { Icon } from '@tarojs/components/lib/vue2' export { Image } from '@tarojs/components/lib/vue2' export { InlinePaymentPanel } from '@tarojs/components/lib/vue2' -// export { Input } from '@tarojs/components/lib/vue2' +export { Input } from '@tarojs/components/lib/vue2' export { KeyboardAccessory } from '@tarojs/components/lib/vue2' export { Label } from '@tarojs/components/lib/vue2' // export { Label } from './components/label/label' @@ -60,6 +60,7 @@ export { Tabs } from '@tarojs/components/lib/vue2' export { Text } from '@tarojs/components/lib/vue2' export { Textarea } from '@tarojs/components/lib/vue2' export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/vue2' +// export { Video, VideoControl, VideoDanmu } from '@tarojs/harmony-components/lib/vue2' export { View } from '@tarojs/components/lib/vue2' export { VoipRoom } from '@tarojs/components/lib/vue2' export { WebView } from '@tarojs/components/lib/vue2' @@ -72,6 +73,6 @@ export { WebView } from '@tarojs/components/lib/vue2' // export { default as ListView } from './components/list/list' // export { MatchMedia } from './components/match-media/match-media' // export { default as PageContainer } from './components/page-container/page-container' -export { default as Input } from '../components-vue2/input/index.vue' +// export { default as Input } from '../components-vue2/input/index.vue' // export { default as Image } from '../components-vue2/image/index.vue' export { StickyHeader, StickySection, RootPortal, GridView, ListView, MatchMedia, PageContainer } from '@tarojs/components/lib/vue2' diff --git a/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts b/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts index c7589618ae..bb5b84f006 100644 --- a/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts +++ b/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts @@ -25,7 +25,7 @@ export { FunctionalPageNavigator } from '@tarojs/components/lib/vue3' export { Icon } from '@tarojs/components/lib/vue3' export { Image } from '@tarojs/components/lib/vue3' export { InlinePaymentPanel } from '@tarojs/components/lib/vue3' -// export { Input } from '@tarojs/components/lib/vue3' +export { Input } from '@tarojs/components/lib/vue3' export { KeyboardAccessory } from '@tarojs/components/lib/vue3' export { Label } from '@tarojs/components/lib/vue3' // export { Label } from './components/label/label' @@ -60,6 +60,7 @@ export { Tabs } from '@tarojs/components/lib/vue3' export { Text } from '@tarojs/components/lib/vue3' export { Textarea } from '@tarojs/components/lib/vue3' export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/vue3' +// export { Video, VideoControl, VideoDanmu } from '@tarojs/harmony-components/lib/vue3' export { View } from '@tarojs/components/lib/vue3' export { VoipRoom } from '@tarojs/components/lib/vue3' export { WebView } from '@tarojs/components/lib/vue3' @@ -72,5 +73,5 @@ export { WebView } from '@tarojs/components/lib/vue3' // export { default as ListView } from './components/list/list' // export { MatchMedia } from './components/match-media/match-media' // export { default as PageContainer } from './components/page-container/page-container' -export { default as Input } from '../components-vue3/input/index' +// export { default as Input } from '../components-vue3/input/index' export { StickyHeader, StickySection, RootPortal, GridView, ListView, MatchMedia, PageContainer } from '@tarojs/components/lib/vue3' diff --git a/packages/taro-platform-harmony-hybrid/tsconfig.json b/packages/taro-platform-harmony-hybrid/tsconfig.json index e0d3c12635..be27857d2e 100644 --- a/packages/taro-platform-harmony-hybrid/tsconfig.json +++ b/packages/taro-platform-harmony-hybrid/tsconfig.json @@ -7,9 +7,10 @@ "module": "ESNext", "sourceMap": true, "esModuleInterop": true, - "outDir": "dist" + "outDir": "dist", + "noUnusedLocals": false }, - "include": ["./src", "./types", "rollup.config.ts", "./src/**/*.vue", "./env.d.ts"], + "include": ["./src", "./types", "rollup.config.ts", "./src/**/*.vue", "./env.d.ts", "mini"], "ts-node": { "compilerOptions": { "module": "UMD", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b600e5df1a..48f7a3b86f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2392,6 +2392,9 @@ importers: '@tarojs/components-react': specifier: workspace:* version: link:../taro-components-react + '@tarojs/harmony-components': + specifier: workspace:* + version: link:src/components/harmony-components '@tarojs/router': specifier: workspace:* version: link:../taro-router @@ -2444,14 +2447,14 @@ importers: specifier: ^1.22.0 version: 1.22.2 vue: - specifier: 2.7.16 + specifier: npm:vue@^2.7.16 version: registry.npmjs.org/vue@2.7.16 - vue-demi: - specifier: ^0.14.7 - version: registry.npmjs.org/vue-demi@0.14.7(vue@2.7.16) vue-template-compiler: specifier: 2.7.14 version: registry.npmjs.org/vue-template-compiler@2.7.14 + vue3: + specifier: npm:vue@^3.0.0 + version: registry.npmjs.org/vue@3.2.47 weui: specifier: ^1.1.2 version: registry.npmjs.org/weui@1.1.3 @@ -2474,6 +2477,9 @@ importers: '@rollup/plugin-node-resolve': specifier: ^8.0.0 version: 8.4.0(rollup@3.21.5) + '@rollup/plugin-node-resolve2': + specifier: npm:@rollup/plugin-node-resolve@^15.2.3 + version: registry.npmjs.org/@rollup/plugin-node-resolve@15.2.3(rollup@3.21.5) '@rollup/plugin-typescript': specifier: 11.1.0 version: registry.npmjs.org/@rollup/plugin-typescript@11.1.0(rollup@3.21.5)(typescript@4.9.5) @@ -2481,14 +2487,20 @@ importers: specifier: ^18.2.0 version: registry.npmjs.org/@types/react@18.2.6 '@vue/compiler-sfc': - specifier: ^2.6.11 - version: registry.npmjs.org/@vue/compiler-sfc@2.7.14 + specifier: ^3.0.0 + version: registry.npmjs.org/@vue/compiler-sfc@3.2.47 + components-loader: + specifier: ^1.1.0 + version: registry.npmjs.org/components-loader@1.1.0 fast-glob: specifier: ^3.3.1 version: 3.3.1 lodash: specifier: ^4.17.21 version: 4.17.21 + postcss: + specifier: '>=6.0' + version: registry.npmjs.org/postcss@8.4.23 rollup: specifier: ^3.8.1 version: registry.npmjs.org/rollup@3.21.5 @@ -2504,9 +2516,12 @@ importers: rollup-plugin-typescript2: specifier: ^0.36.0 version: registry.npmjs.org/rollup-plugin-typescript2@0.36.0(rollup@3.21.5)(typescript@4.9.5) - rollup-plugin-vue: - specifier: ^5.1.9 - version: registry.npmjs.org/rollup-plugin-vue@5.1.9(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(vue-template-compiler@2.7.14) + rollup-plugin-vue2: + specifier: npm:rollup-plugin-vue@^5.1.9 + version: registry.npmjs.org/rollup-plugin-vue@5.1.9(lodash@4.17.21)(postcss@8.4.23)(react-dom@18.2.0)(react@18.2.0)(vue-template-compiler@2.7.14) + rollup-plugin-vue3: + specifier: npm:rollup-plugin-vue@latest + version: registry.npmjs.org/rollup-plugin-vue@6.0.0(@vue/compiler-sfc@3.2.47) ts-node: specifier: ^10.9.1 version: 10.9.1(typescript@4.9.5) @@ -2519,10 +2534,268 @@ importers: vue-class-component: specifier: ^7.2.6 version: registry.npmjs.org/vue-class-component@7.2.6(vue@2.7.16) + vue-facing-decorator: + specifier: ^3.0.4 + version: registry.npmjs.org/vue-facing-decorator@3.0.4(vue@2.7.16) vue-property-decorator: specifier: ^9.1.2 version: registry.npmjs.org/vue-property-decorator@9.1.2(vue-class-component@7.2.6)(vue@2.7.16) + packages/taro-platform-harmony-hybrid/src/components/components-library-react: + dependencies: + '@tarojs/harmony-components': + specifier: workspace:* + version: link:../harmony-components + react-dom: + specifier: ^18.2.0 + version: registry.npmjs.org/react-dom@18.2.0(react@18.2.0) + tslib: + specifier: ^2.6.2 + version: registry.npmjs.org/tslib@2.6.2 + devDependencies: + '@babel/cli': + specifier: ^7.14.5 + version: registry.npmjs.org/@babel/cli@7.21.5(@babel/core@7.23.9) + '@babel/core': + specifier: ^7.14.5 + version: registry.npmjs.org/@babel/core@7.23.9 + '@rollup/plugin-commonjs': + specifier: ^20.0.0 + version: registry.npmjs.org/@rollup/plugin-commonjs@20.0.0(rollup@2.79.1) + '@rollup/plugin-node-resolve': + specifier: ^8.0.0 + version: registry.npmjs.org/@rollup/plugin-node-resolve@8.4.0(rollup@2.79.1) + '@types/node': + specifier: ^14.14.31 + version: registry.npmjs.org/@types/node@14.18.45 + babel-preset-taro: + specifier: workspace:* + version: link:../../../../babel-preset-taro + postcss: + specifier: ^8.4.18 + version: registry.npmjs.org/postcss@8.4.23 + react: + specifier: ^18.2.0 + version: registry.npmjs.org/react@18.2.0 + rollup: + specifier: ^2.79.0 + version: registry.npmjs.org/rollup@2.79.1 + rollup-plugin-node-externals: + specifier: ^5.0.0 + version: registry.npmjs.org/rollup-plugin-node-externals@5.1.3(rollup@2.79.1) + rollup-plugin-postcss: + specifier: ^4.0.2 + version: registry.npmjs.org/rollup-plugin-postcss@4.0.2(postcss@8.4.23) + rollup-plugin-ts: + specifier: ^3.0.2 + version: registry.npmjs.org/rollup-plugin-ts@3.2.0(@babel/core@7.23.9)(rollup@2.79.1)(typescript@4.9.5) + typescript: + specifier: ^4.7.4 + version: registry.npmjs.org/typescript@4.9.5 + + packages/taro-platform-harmony-hybrid/src/components/components-library-vue2: + dependencies: + '@tarojs/harmony-components': + specifier: workspace:* + version: link:../harmony-components + tslib: + specifier: ^2.6.2 + version: registry.npmjs.org/tslib@2.6.2 + vue-fragment: + specifier: ^1.6.0 + version: registry.npmjs.org/vue-fragment@1.6.0(vue@2.7.16) + devDependencies: + '@babel/cli': + specifier: ^7.14.5 + version: registry.npmjs.org/@babel/cli@7.21.5(@babel/core@7.23.9) + '@babel/core': + specifier: ^7.14.5 + version: registry.npmjs.org/@babel/core@7.23.9 + '@rollup/plugin-commonjs': + specifier: ^20.0.0 + version: registry.npmjs.org/@rollup/plugin-commonjs@20.0.0(rollup@2.79.1) + '@rollup/plugin-node-resolve': + specifier: ^8.0.0 + version: registry.npmjs.org/@rollup/plugin-node-resolve@8.4.0(rollup@2.79.1) + '@types/node': + specifier: ^14.14.31 + version: registry.npmjs.org/@types/node@14.18.45 + babel-preset-taro: + specifier: workspace:* + version: link:../../../../babel-preset-taro + postcss: + specifier: ^8.4.18 + version: registry.npmjs.org/postcss@8.4.23 + rollup: + specifier: ^2.79.0 + version: registry.npmjs.org/rollup@2.79.1 + rollup-plugin-node-externals: + specifier: ^5.0.0 + version: registry.npmjs.org/rollup-plugin-node-externals@5.1.3(rollup@2.79.1) + rollup-plugin-postcss: + specifier: ^4.0.2 + version: registry.npmjs.org/rollup-plugin-postcss@4.0.2(postcss@8.4.23) + rollup-plugin-ts: + specifier: ^3.0.2 + version: registry.npmjs.org/rollup-plugin-ts@3.2.0(@babel/core@7.23.9)(rollup@2.79.1)(typescript@4.9.5) + typescript: + specifier: ^4.7.4 + version: registry.npmjs.org/typescript@4.9.5 + vue: + specifier: ^2.6.11 + version: registry.npmjs.org/vue@2.7.16 + + packages/taro-platform-harmony-hybrid/src/components/components-library-vue3: + dependencies: + '@tarojs/harmony-components': + specifier: workspace:* + version: link:../harmony-components + tslib: + specifier: ^2.6.2 + version: registry.npmjs.org/tslib@2.6.2 + devDependencies: + '@babel/cli': + specifier: ^7.14.5 + version: registry.npmjs.org/@babel/cli@7.21.5(@babel/core@7.23.9) + '@babel/core': + specifier: ^7.14.5 + version: registry.npmjs.org/@babel/core@7.23.9 + '@rollup/plugin-commonjs': + specifier: ^20.0.0 + version: registry.npmjs.org/@rollup/plugin-commonjs@20.0.0(rollup@2.79.1) + '@rollup/plugin-node-resolve': + specifier: ^8.0.0 + version: registry.npmjs.org/@rollup/plugin-node-resolve@8.4.0(rollup@2.79.1) + '@types/node': + specifier: ^14.14.31 + version: registry.npmjs.org/@types/node@14.18.45 + babel-preset-taro: + specifier: workspace:* + version: link:../../../../babel-preset-taro + postcss: + specifier: ^8.4.18 + version: registry.npmjs.org/postcss@8.4.23 + rollup: + specifier: ^2.79.0 + version: registry.npmjs.org/rollup@2.79.1 + rollup-plugin-node-externals: + specifier: ^5.0.0 + version: registry.npmjs.org/rollup-plugin-node-externals@5.1.3(rollup@2.79.1) + rollup-plugin-postcss: + specifier: ^4.0.2 + version: registry.npmjs.org/rollup-plugin-postcss@4.0.2(postcss@8.4.23) + rollup-plugin-ts: + specifier: ^3.0.2 + version: registry.npmjs.org/rollup-plugin-ts@3.2.0(@babel/core@7.23.9)(rollup@2.79.1)(typescript@4.9.5) + typescript: + specifier: ^4.7.4 + version: registry.npmjs.org/typescript@4.9.5 + vue: + specifier: ^3.0.0 + version: registry.npmjs.org/vue@3.2.47 + + packages/taro-platform-harmony-hybrid/src/components/harmony-components: + dependencies: + '@stencil/core': + specifier: ^2.22.2 + version: registry.npmjs.org/@stencil/core@2.22.3 + '@tarojs/components-advanced': + specifier: workspace:* + version: link:../../../../taro-components-advanced + '@tarojs/taro': + specifier: workspace:* + version: link:../../../../taro + classnames: + specifier: ^2.2.5 + version: registry.npmjs.org/classnames@2.3.2 + hls.js: + specifier: ^1.1.5 + version: registry.npmjs.org/hls.js@1.4.1 + resolve-pathname: + specifier: ^3.0.0 + version: registry.npmjs.org/resolve-pathname@3.0.0 + swiper: + specifier: 6.8.0 + version: registry.npmjs.org/swiper@6.8.0 + tslib: + specifier: ^2.6.2 + version: registry.npmjs.org/tslib@2.6.2 + devDependencies: + '@babel/generator': + specifier: ^7.20.0 + version: registry.npmjs.org/@babel/generator@7.23.6 + '@babel/parser': + specifier: ^7.20.0 + version: registry.npmjs.org/@babel/parser@7.23.9 + '@babel/traverse': + specifier: ^7.20.0 + version: registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': + specifier: ^7.20.0 + version: registry.npmjs.org/@babel/types@7.23.9 + '@stencil/react-output-target': + specifier: 0.4.0 + version: registry.npmjs.org/@stencil/react-output-target@0.4.0(@stencil/core@2.22.3) + '@stencil/vue-output-target': + specifier: 0.7.0 + version: registry.npmjs.org/@stencil/vue-output-target@0.7.0(@stencil/core@2.22.3) + '@types/jest': + specifier: ^27.4.1 + version: registry.npmjs.org/@types/jest@27.5.2 + '@types/node': + specifier: ^14.14.31 + version: registry.npmjs.org/@types/node@14.18.45 + change-case: + specifier: ^4.1.2 + version: registry.npmjs.org/change-case@4.1.2 + csstype: + specifier: ^3.1.1 + version: registry.npmjs.org/csstype@3.1.2 + esbuild: + specifier: ~0.19.5 + version: registry.npmjs.org/esbuild@0.19.7 + jquery: + specifier: ^3.4.1 + version: registry.npmjs.org/jquery@3.6.4 + lightningcss: + specifier: ^1.22.1 + version: registry.npmjs.org/lightningcss@1.22.1 + lodash: + specifier: ^4.17.21 + version: registry.npmjs.org/lodash@4.17.21 + miniapp-types: + specifier: 1.6.0 + version: registry.npmjs.org/miniapp-types@1.6.0 + mkdirp: + specifier: ^1.0.4 + version: registry.npmjs.org/mkdirp@1.0.4 + puppeteer: + specifier: ^19.2.0 + version: registry.npmjs.org/puppeteer@19.11.1(typescript@4.9.5) + rollup: + specifier: ^3.8.1 + version: registry.npmjs.org/rollup@3.21.5 + rollup-plugin-node-externals: + specifier: ^5.0.0 + version: registry.npmjs.org/rollup-plugin-node-externals@5.1.3(rollup@3.21.5) + sass: + specifier: ^1.58.3 + version: registry.npmjs.org/sass@1.69.7 + stencil-vue2-output-target: + specifier: 0.0.4 + version: registry.npmjs.org/stencil-vue2-output-target@0.0.4(@stencil/core@2.22.3) + ts-node: + specifier: ^10.9.1 + version: registry.npmjs.org/ts-node@10.9.1(@types/node@14.18.45)(typescript@4.9.5) + tsconfig-paths: + specifier: ^3.14.1 + version: registry.npmjs.org/tsconfig-paths@3.14.2 + typescript: + specifier: ^4.7.4 + version: registry.npmjs.org/typescript@4.9.5 + + packages/taro-platform-harmony-hybrid/src/components/harmony-components/loader: {} + packages/taro-plugin-html: dependencies: '@babel/generator': @@ -4430,46 +4703,10 @@ importers: packages: - /@babel/code-frame@7.0.0-beta.44: - resolution: {integrity: sha512-cuAuTTIQ9RqcFRJ/Y8PvTh+paepNcaGxwQwjIDRWPXmzzyAeCO4KqS9ikMvq0MCbRk6GlYKwfzStrcP3/jSL8g==, tarball: https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz} - dependencies: - '@babel/highlight': 7.0.0-beta.44 - dev: false - - /@babel/code-frame@7.10.4: - resolution: {integrity: sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==, tarball: https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz} - dependencies: - '@babel/highlight': 7.18.6 - - /@babel/code-frame@7.21.4: - resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==, tarball: https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/highlight': 7.18.6 - /@babel/compat-data@7.21.7: resolution: {integrity: sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==, tarball: https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.7.tgz} engines: {node: '>=6.9.0'} - /@babel/generator@7.0.0-beta.44: - resolution: {integrity: sha512-5xVb7hlhjGcdkKpMXgicAVgx8syK5VJz193k0i/0sLP6DzE6lRrU1K3B/rFefgdo9LPGMAOOOAWW4jycj07ShQ==, tarball: https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.44.tgz} - dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.0.0-beta.44 - jsesc: 2.5.2 - lodash: registry.npmjs.org/lodash@4.17.21 - source-map: registry.npmjs.org/source-map@0.5.7 - trim-right: registry.npmjs.org/trim-right@1.0.1 - dev: false - - /@babel/generator@7.21.5: - resolution: {integrity: sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==, tarball: https://registry.npmjs.org/@babel/generator/-/generator-7.21.5.tgz} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 - '@jridgewell/gen-mapping': 0.3.3 - '@jridgewell/trace-mapping': 0.3.18 - jsesc: 2.5.2 - /@babel/helper-compilation-targets@7.21.5(@babel/core@7.12.3): resolution: {integrity: sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==, tarball: https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz} engines: {node: '>=6.9.0'} @@ -4510,35 +4747,18 @@ packages: lru-cache: 5.1.1 semver: registry.npmjs.org/semver@6.3.1 - /@babel/helper-environment-visitor@7.21.5: - resolution: {integrity: sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==, tarball: https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz} - engines: {node: '>=6.9.0'} - - /@babel/helper-function-name@7.21.0: - resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==, tarball: https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/template': 7.21.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 - - /@babel/helper-hoist-variables@7.18.6: - resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==, tarball: https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 - /@babel/helper-module-transforms@7.21.5: resolution: {integrity: sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==, tarball: https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-environment-visitor': 7.21.5 + '@babel/helper-environment-visitor': registry.npmjs.org/@babel/helper-environment-visitor@7.22.20 '@babel/helper-module-imports': registry.npmjs.org/@babel/helper-module-imports@7.21.4 '@babel/helper-simple-access': 7.21.5 - '@babel/helper-split-export-declaration': 7.18.6 - '@babel/helper-validator-identifier': 7.19.1 - '@babel/template': 7.21.9 - '@babel/traverse': 7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/helper-split-export-declaration': registry.npmjs.org/@babel/helper-split-export-declaration@7.22.6 + '@babel/helper-validator-identifier': registry.npmjs.org/@babel/helper-validator-identifier@7.22.20 + '@babel/template': registry.npmjs.org/@babel/template@7.21.9 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color dev: false @@ -4547,19 +4767,9 @@ packages: resolution: {integrity: sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==, tarball: https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 dev: false - /@babel/helper-split-export-declaration@7.18.6: - resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==, tarball: https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 - - /@babel/helper-validator-identifier@7.19.1: - resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==, tarball: https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz} - engines: {node: '>=6.9.0'} - /@babel/helper-validator-option@7.21.0: resolution: {integrity: sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==, tarball: https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz} engines: {node: '>=6.9.0'} @@ -4568,113 +4778,34 @@ packages: resolution: {integrity: sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==, tarball: https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.5.tgz} engines: {node: '>=6.9.0'} dependencies: - '@babel/template': 7.21.9 - '@babel/traverse': 7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/template': registry.npmjs.org/@babel/template@7.21.9 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color dev: false - /@babel/highlight@7.0.0-beta.44: - resolution: {integrity: sha512-Il19yJvy7vMFm8AVAh6OZzaFoAd0hbkeMZiX3P5HGD+z7dyI7RzndHB0dg6Urh/VAFfHtpOIzDUSxmY6coyZWQ==, tarball: https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.44.tgz} - dependencies: - chalk: registry.npmjs.org/chalk@2.4.2 - esutils: 2.0.3 - js-tokens: 3.0.2 - dev: false - /@babel/highlight@7.18.6: resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==, tarball: https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-validator-identifier': 7.19.1 + '@babel/helper-validator-identifier': registry.npmjs.org/@babel/helper-validator-identifier@7.22.20 chalk: registry.npmjs.org/chalk@2.4.2 js-tokens: 4.0.0 - /@babel/parser@7.23.4: - resolution: {integrity: sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==, tarball: https://registry.npmjs.org/@babel/parser/-/parser-7.23.4.tgz} - engines: {node: '>=6.0.0'} - hasBin: true - dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 - - /@babel/template@7.0.0-beta.44: - resolution: {integrity: sha512-w750Sloq0UNifLx1rUqwfbnC6uSUk0mfwwgGRfdLiaUzfAOiH0tHJE6ILQIUi3KYkjiCDTskoIsnfqZvWLBDng==, tarball: https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.44.tgz} - dependencies: - '@babel/code-frame': 7.0.0-beta.44 - '@babel/types': registry.npmjs.org/@babel/types@7.0.0-beta.44 - babylon: registry.npmjs.org/babylon@7.0.0-beta.44 - lodash: registry.npmjs.org/lodash@4.17.21 - dev: false - /@babel/template@7.21.9: resolution: {integrity: sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==, tarball: https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz} engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 - - /@babel/traverse@7.21.5: - resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==, tarball: https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.5.tgz} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 - '@babel/generator': 7.21.5 - '@babel/helper-environment-visitor': 7.21.5 - '@babel/helper-function-name': 7.21.0 - '@babel/helper-hoist-variables': 7.18.6 - '@babel/helper-split-export-declaration': 7.18.6 - '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 - debug: registry.npmjs.org/debug@4.3.4 - globals: 11.12.0 - transitivePeerDependencies: - - supports-color + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 /@cspotcode/source-map-support@0.8.1: resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==, tarball: https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz} engines: {node: '>=12'} dependencies: - '@jridgewell/trace-mapping': 0.3.9 - dev: true - - /@jridgewell/gen-mapping@0.3.3: - resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==, tarball: https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz} - engines: {node: '>=6.0.0'} - dependencies: - '@jridgewell/set-array': 1.1.2 - '@jridgewell/sourcemap-codec': registry.npmjs.org/@jridgewell/sourcemap-codec@1.4.15 - '@jridgewell/trace-mapping': 0.3.18 - - /@jridgewell/resolve-uri@3.1.0: - resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==, tarball: https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz} - engines: {node: '>=6.0.0'} - - /@jridgewell/resolve-uri@3.1.1: - resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==, tarball: https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz} - engines: {node: '>=6.0.0'} - dev: true - - /@jridgewell/set-array@1.1.2: - resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==, tarball: https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz} - engines: {node: '>=6.0.0'} - - /@jridgewell/sourcemap-codec@1.4.15: - resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==, tarball: https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz} - dev: true - - /@jridgewell/trace-mapping@0.3.18: - resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==, tarball: https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz} - dependencies: - '@jridgewell/resolve-uri': 3.1.0 - '@jridgewell/sourcemap-codec': registry.npmjs.org/@jridgewell/sourcemap-codec@1.4.14 - - /@jridgewell/trace-mapping@0.3.9: - resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==, tarball: https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz} - dependencies: - '@jridgewell/resolve-uri': 3.1.1 - '@jridgewell/sourcemap-codec': registry.npmjs.org/@jridgewell/sourcemap-codec@1.4.15 + '@jridgewell/trace-mapping': registry.npmjs.org/@jridgewell/trace-mapping@0.3.9 dev: true /@mdn/browser-compat-data@5.2.56: @@ -5161,78 +5292,6 @@ packages: '@types/node': registry.npmjs.org/@types/node@17.0.45 dev: true - /csstype@2.6.21: - resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==, tarball: https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz} - - /debug@2.6.9: - resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==, tarball: https://registry.npmjs.org/debug/-/debug-2.6.9.tgz} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: registry.npmjs.org/ms@2.0.0 - - /debug@2.6.9(supports-color@6.1.0): - resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==, tarball: https://registry.npmjs.org/debug/-/debug-2.6.9.tgz} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: 2.0.0 - supports-color: registry.npmjs.org/supports-color@6.1.0 - dev: false - - /debug@3.2.7: - resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==, tarball: https://registry.npmjs.org/debug/-/debug-3.2.7.tgz} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: 2.1.3 - dev: false - - /debug@3.2.7(supports-color@6.1.0): - resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==, tarball: https://registry.npmjs.org/debug/-/debug-3.2.7.tgz} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: 2.1.3 - supports-color: registry.npmjs.org/supports-color@6.1.0 - dev: false - - /debug@4.3.4: - resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==, tarball: https://registry.npmjs.org/debug/-/debug-4.3.4.tgz} - engines: {node: '>=6.0'} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: registry.npmjs.org/ms@2.1.2 - - /debug@4.3.4(supports-color@6.1.0): - resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==, tarball: https://registry.npmjs.org/debug/-/debug-4.3.4.tgz} - engines: {node: '>=6.0'} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: 2.1.2 - supports-color: registry.npmjs.org/supports-color@6.1.0 - dev: false - /decamelize-keys@1.1.1: resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==, tarball: https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz} engines: {node: '>=0.10.0'} @@ -5538,10 +5597,6 @@ packages: path-is-absolute: 1.0.1 dev: true - /globals@11.12.0: - resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==, tarball: https://registry.npmjs.org/globals/-/globals-11.12.0.tgz} - engines: {node: '>=4'} - /globalthis@1.0.3: resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==, tarball: https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz} engines: {node: '>= 0.4'} @@ -5572,10 +5627,6 @@ packages: /has-bigints@1.0.2: resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==, tarball: https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz} - /has-flag@4.0.0: - resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==, tarball: https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz} - engines: {node: '>=8'} - /has-property-descriptors@1.0.0: resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==, tarball: https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz} dependencies: @@ -5845,10 +5896,6 @@ packages: supports-color: registry.npmjs.org/supports-color@8.1.1 dev: true - /js-tokens@3.0.2: - resolution: {integrity: sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg==, tarball: https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz} - dev: false - /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==, tarball: https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz} @@ -5865,15 +5912,6 @@ packages: dependencies: argparse: 2.0.1 - /jsesc@0.5.0: - resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==, tarball: https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz} - hasBin: true - - /jsesc@2.5.2: - resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==, tarball: https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz} - engines: {node: '>=4'} - hasBin: true - /json-schema-traverse@0.4.1: resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==, tarball: https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz} @@ -5881,20 +5919,17 @@ packages: resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==, tarball: https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz} dev: false - /json5@0.4.0: - resolution: {integrity: sha512-5EEuuI7oad0d6c2PcrTRLoLH2JNuI/aJxHsVT2hVFK6fKHu+MXONdhzzzNAlb3JXMeuN1o+kDU78fV1YH6VmKQ==, tarball: https://registry.npmjs.org/json5/-/json5-0.4.0.tgz} - hasBin: true - dev: false - /json5@0.5.1: resolution: {integrity: sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==, tarball: https://registry.npmjs.org/json5/-/json5-0.5.1.tgz} hasBin: true + dev: false /json5@1.0.2: resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==, tarball: https://registry.npmjs.org/json5/-/json5-1.0.2.tgz} hasBin: true dependencies: minimist: 1.2.8 + dev: true /json5@2.2.3: resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==, tarball: https://registry.npmjs.org/json5/-/json5-2.2.3.tgz} @@ -5998,7 +6033,7 @@ packages: resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==, tarball: https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz} engines: {node: '>=12'} dependencies: - '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/sourcemap-codec': registry.npmjs.org/@jridgewell/sourcemap-codec@1.4.15 dev: true /make-error@1.3.6: @@ -6128,14 +6163,6 @@ packages: /minimist@1.2.8: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==, tarball: https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz} - /ms@2.0.0: - resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==, tarball: https://registry.npmjs.org/ms/-/ms-2.0.0.tgz} - dev: false - - /ms@2.1.2: - resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==, tarball: https://registry.npmjs.org/ms/-/ms-2.1.2.tgz} - dev: false - /ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==, tarball: https://registry.npmjs.org/ms/-/ms-2.1.3.tgz} dev: false @@ -6346,7 +6373,7 @@ packages: resolution: {integrity: sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==, tarball: https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz} engines: {node: '>=0.10.0'} dependencies: - object-assign: 4.1.1 + object-assign: registry.npmjs.org/object-assign@4.1.1 strict-uri-encode: 1.1.0 dev: false @@ -6355,7 +6382,7 @@ packages: engines: {node: '>=0.10.0'} dependencies: decode-uri-component: 0.2.2 - object-assign: 4.1.1 + object-assign: registry.npmjs.org/object-assign@4.1.1 strict-uri-encode: 1.1.0 dev: false @@ -6512,7 +6539,7 @@ packages: dependencies: call-bind: 1.0.2 get-intrinsic: 1.2.0 - is-regex: 1.1.4 + is-regex: registry.npmjs.org/is-regex@1.1.4 /schema-utils@1.0.0: resolution: {integrity: sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==, tarball: https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz} @@ -6595,10 +6622,6 @@ packages: tslib: registry.npmjs.org/tslib@2.6.2 dev: false - /source-map@0.5.7: - resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==, tarball: https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz} - engines: {node: '>=0.10.0'} - /sourcemap-codec@1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==, tarball: https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz} deprecated: Please use @jridgewell/sourcemap-codec instead @@ -6755,7 +6778,7 @@ packages: resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==, tarball: https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz} engines: {node: '>=8'} dependencies: - has-flag: 4.0.0 + has-flag: registry.npmjs.org/has-flag@4.0.0 supports-color: registry.npmjs.org/supports-color@7.2.0 /supports-preserve-symlinks-flag@1.0.0: @@ -7103,6 +7126,29 @@ packages: chokidar: registry.npmjs.org/chokidar@3.5.3 dev: true + registry.npmjs.org/@babel/cli@7.21.5(@babel/core@7.23.9): + resolution: {integrity: sha512-TOKytQ9uQW9c4np8F+P7ZfPINy5Kv+pizDIUwSVH8X5zHgYHV4AA8HE5LA450xXeu4jEfmUckTYvv1I4S26M/g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/cli/-/cli-7.21.5.tgz} + id: registry.npmjs.org/@babel/cli/7.21.5 + name: '@babel/cli' + version: 7.21.5 + engines: {node: '>=6.9.0'} + hasBin: true + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': registry.npmjs.org/@babel/core@7.23.9 + '@jridgewell/trace-mapping': registry.npmjs.org/@jridgewell/trace-mapping@0.3.18 + commander: registry.npmjs.org/commander@4.1.1 + convert-source-map: registry.npmjs.org/convert-source-map@1.9.0 + fs-readdir-recursive: registry.npmjs.org/fs-readdir-recursive@1.1.0 + glob: registry.npmjs.org/glob@7.2.3 + make-dir: registry.npmjs.org/make-dir@2.1.0 + slash: registry.npmjs.org/slash@2.0.0 + optionalDependencies: + '@nicolo-ribaudo/chokidar-2': registry.npmjs.org/@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3 + chokidar: registry.npmjs.org/chokidar@3.5.3 + dev: true + registry.npmjs.org/@babel/code-frame@7.0.0-beta.44: resolution: {integrity: sha512-cuAuTTIQ9RqcFRJ/Y8PvTh+paepNcaGxwQwjIDRWPXmzzyAeCO4KqS9ikMvq0MCbRk6GlYKwfzStrcP3/jSL8g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz} name: '@babel/code-frame' @@ -7111,6 +7157,13 @@ packages: '@babel/highlight': registry.npmjs.org/@babel/highlight@7.0.0-beta.44 dev: false + registry.npmjs.org/@babel/code-frame@7.10.4: + resolution: {integrity: sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz} + name: '@babel/code-frame' + version: 7.10.4 + dependencies: + '@babel/highlight': 7.18.6 + registry.npmjs.org/@babel/code-frame@7.21.4: resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz} name: '@babel/code-frame' @@ -7146,14 +7199,14 @@ packages: version: 7.12.3 engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.21.4 - '@babel/generator': 7.21.5 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 + '@babel/generator': registry.npmjs.org/@babel/generator@7.23.6 '@babel/helper-module-transforms': 7.21.5 '@babel/helpers': 7.21.5 '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 '@babel/template': 7.21.9 - '@babel/traverse': 7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 convert-source-map: 1.9.0 debug: registry.npmjs.org/debug@4.3.4 gensync: 1.0.0-beta.2 @@ -7231,13 +7284,25 @@ packages: semver: registry.npmjs.org/semver@6.3.0 dev: false + registry.npmjs.org/@babel/generator@7.0.0-beta.44: + resolution: {integrity: sha512-5xVb7hlhjGcdkKpMXgicAVgx8syK5VJz193k0i/0sLP6DzE6lRrU1K3B/rFefgdo9LPGMAOOOAWW4jycj07ShQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.44.tgz} + name: '@babel/generator' + version: 7.0.0-beta.44 + dependencies: + '@babel/types': registry.npmjs.org/@babel/types@7.0.0-beta.44 + jsesc: registry.npmjs.org/jsesc@2.5.2 + lodash: registry.npmjs.org/lodash@4.17.21 + source-map: registry.npmjs.org/source-map@0.5.7 + trim-right: registry.npmjs.org/trim-right@1.0.1 + dev: false + registry.npmjs.org/@babel/generator@7.17.10: resolution: {integrity: sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/generator/-/generator-7.17.10.tgz} name: '@babel/generator' version: 7.17.10 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@jridgewell/gen-mapping': registry.npmjs.org/@jridgewell/gen-mapping@0.1.1 jsesc: registry.npmjs.org/jsesc@2.5.2 dev: false @@ -7270,7 +7335,7 @@ packages: version: 7.18.6 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor@7.21.5: resolution: {integrity: sha512-uNrjKztPLkUk7bpCNC0jEKDJzzkvel/W+HguzbN8krA+LPfC1CEobJEvAvGka2A/M+ViOqXdcRL0GqPUJSjx9g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.21.5.tgz} @@ -7278,7 +7343,7 @@ packages: version: 7.21.5 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-compilation-targets@7.21.5(@babel/core@7.12.3): resolution: {integrity: sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz} @@ -7462,7 +7527,7 @@ packages: '@babel/core': registry.npmjs.org/@babel/core@7.21.8 '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.21.8) '@babel/helper-plugin-utils': registry.npmjs.org/@babel/helper-plugin-utils@7.22.5 - debug: 4.3.4 + debug: registry.npmjs.org/debug@4.3.4 lodash.debounce: registry.npmjs.org/lodash.debounce@4.0.8 resolve: registry.npmjs.org/resolve@1.22.2 semver: registry.npmjs.org/semver@6.3.1 @@ -7480,7 +7545,7 @@ packages: '@babel/core': registry.npmjs.org/@babel/core@7.23.9 '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.23.9) '@babel/helper-plugin-utils': registry.npmjs.org/@babel/helper-plugin-utils@7.22.5 - debug: 4.3.4 + debug: registry.npmjs.org/debug@4.3.4 lodash.debounce: registry.npmjs.org/lodash.debounce@4.0.8 resolve: registry.npmjs.org/resolve@1.22.2 semver: registry.npmjs.org/semver@6.3.1 @@ -7505,7 +7570,7 @@ packages: version: 7.0.0-beta.44 dependencies: '@babel/helper-get-function-arity': registry.npmjs.org/@babel/helper-get-function-arity@7.0.0-beta.44 - '@babel/template': 7.0.0-beta.44 + '@babel/template': registry.npmjs.org/@babel/template@7.0.0-beta.44 '@babel/types': registry.npmjs.org/@babel/types@7.0.0-beta.44 dev: false @@ -7516,7 +7581,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': registry.npmjs.org/@babel/template@7.21.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-function-name@7.23.0: resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz} @@ -7541,7 +7606,7 @@ packages: version: 7.18.6 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz} @@ -7557,14 +7622,14 @@ packages: version: 7.21.5 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-module-imports@7.12.1: resolution: {integrity: sha512-ZeC1TlMSvikvJNy1v/wPIazCu3NdOwgYZLIkmIyAsGhqkNpiDoQQRmaCK8YP4Pq3GPTLPV9WXaPCJKvx06JxKA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.1.tgz} name: '@babel/helper-module-imports' version: 7.12.1 dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 dev: false registry.npmjs.org/@babel/helper-module-imports@7.21.4: @@ -7573,7 +7638,7 @@ packages: version: 7.21.4 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-module-imports@7.22.15: resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz} @@ -7595,8 +7660,8 @@ packages: '@babel/helper-split-export-declaration': registry.npmjs.org/@babel/helper-split-export-declaration@7.18.6 '@babel/helper-validator-identifier': registry.npmjs.org/@babel/helper-validator-identifier@7.19.1 '@babel/template': registry.npmjs.org/@babel/template@7.21.9 - '@babel/traverse': registry.npmjs.org/@babel/traverse@7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color @@ -7622,7 +7687,7 @@ packages: version: 7.18.6 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-plugin-utils@7.21.5: resolution: {integrity: sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz} @@ -7647,9 +7712,9 @@ packages: dependencies: '@babel/core': registry.npmjs.org/@babel/core@7.12.3 '@babel/helper-annotate-as-pure': registry.npmjs.org/@babel/helper-annotate-as-pure@7.18.6 - '@babel/helper-environment-visitor': registry.npmjs.org/@babel/helper-environment-visitor@7.21.5 + '@babel/helper-environment-visitor': registry.npmjs.org/@babel/helper-environment-visitor@7.22.20 '@babel/helper-wrap-function': registry.npmjs.org/@babel/helper-wrap-function@7.20.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color dev: false @@ -7665,9 +7730,9 @@ packages: dependencies: '@babel/core': registry.npmjs.org/@babel/core@7.21.8 '@babel/helper-annotate-as-pure': registry.npmjs.org/@babel/helper-annotate-as-pure@7.18.6 - '@babel/helper-environment-visitor': registry.npmjs.org/@babel/helper-environment-visitor@7.21.5 + '@babel/helper-environment-visitor': registry.npmjs.org/@babel/helper-environment-visitor@7.22.20 '@babel/helper-wrap-function': registry.npmjs.org/@babel/helper-wrap-function@7.20.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color @@ -7682,9 +7747,9 @@ packages: dependencies: '@babel/core': registry.npmjs.org/@babel/core@7.23.9 '@babel/helper-annotate-as-pure': registry.npmjs.org/@babel/helper-annotate-as-pure@7.18.6 - '@babel/helper-environment-visitor': registry.npmjs.org/@babel/helper-environment-visitor@7.21.5 + '@babel/helper-environment-visitor': registry.npmjs.org/@babel/helper-environment-visitor@7.22.20 '@babel/helper-wrap-function': registry.npmjs.org/@babel/helper-wrap-function@7.20.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color @@ -7698,8 +7763,8 @@ packages: '@babel/helper-member-expression-to-functions': registry.npmjs.org/@babel/helper-member-expression-to-functions@7.21.5 '@babel/helper-optimise-call-expression': registry.npmjs.org/@babel/helper-optimise-call-expression@7.18.6 '@babel/template': registry.npmjs.org/@babel/template@7.21.9 - '@babel/traverse': registry.npmjs.org/@babel/traverse@7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color @@ -7709,7 +7774,7 @@ packages: version: 7.21.5 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-simple-access@7.22.5: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz} @@ -7725,7 +7790,7 @@ packages: version: 7.20.0 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-split-export-declaration@7.0.0-beta.44: resolution: {integrity: sha512-aQ7QowtkgKKzPGf0j6u77kBMdUFVBKNHw2p/3HX/POt5/oz8ec5cs0GwlgM8Hz7ui5EwJnzyfRmkNF1Nx1N7aA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz} @@ -7741,7 +7806,7 @@ packages: version: 7.18.6 engines: {node: '>=6.9.0'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz} @@ -7793,10 +7858,10 @@ packages: version: 7.20.5 engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-function-name': 7.21.0 - '@babel/template': 7.21.9 - '@babel/traverse': 7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/helper-function-name': registry.npmjs.org/@babel/helper-function-name@7.23.0 + '@babel/template': registry.npmjs.org/@babel/template@7.21.9 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color @@ -7806,8 +7871,8 @@ packages: version: 7.12.1 dependencies: '@babel/template': 7.21.9 - '@babel/traverse': 7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color dev: false @@ -7819,8 +7884,8 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': registry.npmjs.org/@babel/template@7.21.9 - '@babel/traverse': registry.npmjs.org/@babel/traverse@7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 transitivePeerDependencies: - supports-color @@ -7873,7 +7938,7 @@ packages: engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 dev: false registry.npmjs.org/@babel/parser@7.17.10: @@ -7883,7 +7948,7 @@ packages: engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 dev: false registry.npmjs.org/@babel/parser@7.21.8: @@ -7902,7 +7967,8 @@ packages: engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 + dev: false registry.npmjs.org/@babel/parser@7.23.9: resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz} @@ -10652,7 +10718,7 @@ packages: '@babel/helper-module-imports': registry.npmjs.org/@babel/helper-module-imports@7.21.4 '@babel/helper-plugin-utils': registry.npmjs.org/@babel/helper-plugin-utils@7.22.5 '@babel/plugin-syntax-jsx': registry.npmjs.org/@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.21.8) - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/plugin-transform-react-jsx@7.21.5(@babel/core@7.23.9): resolution: {integrity: sha512-ELdlq61FpoEkHO6gFRpfj0kUgSwQTGoaEU8eMRoS8Dv3v6e7BjEAj5WMtIBRdHUeAioMhKP5HyxNzNnP+heKbA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.5.tgz} @@ -10668,7 +10734,7 @@ packages: '@babel/helper-module-imports': registry.npmjs.org/@babel/helper-module-imports@7.21.4 '@babel/helper-plugin-utils': registry.npmjs.org/@babel/helper-plugin-utils@7.22.5 '@babel/plugin-syntax-jsx': registry.npmjs.org/@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.23.9) - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/plugin-transform-react-pure-annotations@7.18.6(@babel/core@7.21.8): resolution: {integrity: sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz} @@ -11206,7 +11272,7 @@ packages: '@babel/plugin-transform-unicode-escapes': registry.npmjs.org/@babel/plugin-transform-unicode-escapes@7.21.5(@babel/core@7.12.3) '@babel/plugin-transform-unicode-regex': registry.npmjs.org/@babel/plugin-transform-unicode-regex@7.18.6(@babel/core@7.12.3) '@babel/preset-modules': registry.npmjs.org/@babel/preset-modules@0.1.5(@babel/core@7.12.3) - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 core-js-compat: registry.npmjs.org/core-js-compat@3.30.2 semver: registry.npmjs.org/semver@5.7.1 transitivePeerDependencies: @@ -11418,7 +11484,7 @@ packages: '@babel/helper-plugin-utils': registry.npmjs.org/@babel/helper-plugin-utils@7.22.5 '@babel/plugin-proposal-unicode-property-regex': registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.12.3) '@babel/plugin-transform-dotall-regex': registry.npmjs.org/@babel/plugin-transform-dotall-regex@7.18.6(@babel/core@7.12.3) - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 esutils: registry.npmjs.org/esutils@2.0.3 dev: false @@ -11434,7 +11500,7 @@ packages: '@babel/helper-plugin-utils': registry.npmjs.org/@babel/helper-plugin-utils@7.22.5 '@babel/plugin-proposal-unicode-property-regex': registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.21.8) '@babel/plugin-transform-dotall-regex': registry.npmjs.org/@babel/plugin-transform-dotall-regex@7.18.6(@babel/core@7.21.8) - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 esutils: registry.npmjs.org/esutils@2.0.3 registry.npmjs.org/@babel/preset-modules@0.1.5(@babel/core@7.23.9): @@ -11449,7 +11515,7 @@ packages: '@babel/helper-plugin-utils': registry.npmjs.org/@babel/helper-plugin-utils@7.22.5 '@babel/plugin-proposal-unicode-property-regex': registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.23.9) '@babel/plugin-transform-dotall-regex': registry.npmjs.org/@babel/plugin-transform-dotall-regex@7.18.6(@babel/core@7.23.9) - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 esutils: registry.npmjs.org/esutils@2.0.3 dev: true @@ -11570,15 +11636,26 @@ packages: dependencies: regenerator-runtime: registry.npmjs.org/regenerator-runtime@0.13.11 + registry.npmjs.org/@babel/template@7.0.0-beta.44: + resolution: {integrity: sha512-w750Sloq0UNifLx1rUqwfbnC6uSUk0mfwwgGRfdLiaUzfAOiH0tHJE6ILQIUi3KYkjiCDTskoIsnfqZvWLBDng==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.44.tgz} + name: '@babel/template' + version: 7.0.0-beta.44 + dependencies: + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.0.0-beta.44 + '@babel/types': registry.npmjs.org/@babel/types@7.0.0-beta.44 + babylon: registry.npmjs.org/babylon@7.0.0-beta.44 + lodash: registry.npmjs.org/lodash@4.17.21 + dev: false + registry.npmjs.org/@babel/template@7.16.7: resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz} name: '@babel/template' version: 7.16.7 engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.21.4 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 dev: false registry.npmjs.org/@babel/template@7.20.7: @@ -11598,8 +11675,8 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.21.4 - '@babel/parser': registry.npmjs.org/@babel/parser@7.23.4 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 registry.npmjs.org/@babel/template@7.23.9: resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz} @@ -11616,13 +11693,13 @@ packages: name: '@babel/traverse' version: 7.0.0-beta.44 dependencies: - '@babel/code-frame': 7.0.0-beta.44 - '@babel/generator': 7.0.0-beta.44 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.0.0-beta.44 + '@babel/generator': registry.npmjs.org/@babel/generator@7.0.0-beta.44 '@babel/helper-function-name': registry.npmjs.org/@babel/helper-function-name@7.0.0-beta.44 '@babel/helper-split-export-declaration': registry.npmjs.org/@babel/helper-split-export-declaration@7.0.0-beta.44 '@babel/types': registry.npmjs.org/@babel/types@7.0.0-beta.44 babylon: registry.npmjs.org/babylon@7.0.0-beta.44 - debug: 3.2.7 + debug: registry.npmjs.org/debug@3.2.7 globals: registry.npmjs.org/globals@11.12.0 invariant: registry.npmjs.org/invariant@2.2.4 lodash: registry.npmjs.org/lodash@4.17.21 @@ -11636,16 +11713,16 @@ packages: version: 7.17.10 engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.21.4 - '@babel/generator': 7.21.5 - '@babel/helper-environment-visitor': registry.npmjs.org/@babel/helper-environment-visitor@7.21.5 - '@babel/helper-function-name': registry.npmjs.org/@babel/helper-function-name@7.21.0 - '@babel/helper-hoist-variables': registry.npmjs.org/@babel/helper-hoist-variables@7.18.6 - '@babel/helper-split-export-declaration': registry.npmjs.org/@babel/helper-split-export-declaration@7.18.6 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 + '@babel/generator': registry.npmjs.org/@babel/generator@7.23.6 + '@babel/helper-environment-visitor': registry.npmjs.org/@babel/helper-environment-visitor@7.22.20 + '@babel/helper-function-name': registry.npmjs.org/@babel/helper-function-name@7.23.0 + '@babel/helper-hoist-variables': registry.npmjs.org/@babel/helper-hoist-variables@7.22.5 + '@babel/helper-split-export-declaration': registry.npmjs.org/@babel/helper-split-export-declaration@7.22.6 '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 debug: registry.npmjs.org/debug@4.3.4 - globals: 11.12.0 + globals: registry.npmjs.org/globals@11.12.0 transitivePeerDependencies: - supports-color dev: false @@ -12429,7 +12506,7 @@ packages: name: '@expo/config' version: 7.0.3 dependencies: - '@babel/code-frame': 7.10.4 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.10.4 '@expo/config-plugins': registry.npmjs.org/@expo/config-plugins@5.0.4 '@expo/config-types': registry.npmjs.org/@expo/config-types@47.0.0 '@expo/json-file': registry.npmjs.org/@expo/json-file@8.2.36 @@ -12513,8 +12590,8 @@ packages: name: '@expo/json-file' version: 8.2.36 dependencies: - '@babel/code-frame': 7.10.4 - json5: 1.0.2 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.10.4 + json5: registry.npmjs.org/json5@1.0.2 write-file-atomic: 2.4.3 registry.npmjs.org/@expo/json-file@8.2.37: @@ -12522,8 +12599,8 @@ packages: name: '@expo/json-file' version: 8.2.37 dependencies: - '@babel/code-frame': 7.10.4 - json5: 2.2.3 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.10.4 + json5: registry.npmjs.org/json5@2.2.3 write-file-atomic: 2.4.3 registry.npmjs.org/@expo/metro-config@0.5.2: @@ -12639,7 +12716,7 @@ packages: version: 4.2.2 hasBin: true dependencies: - '@babel/code-frame': 7.10.4 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.10.4 chalk: registry.npmjs.org/chalk@4.1.2 find-up: 5.0.0 js-yaml: 4.1.0 @@ -13463,7 +13540,7 @@ packages: version: 29.4.3 engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@jridgewell/trace-mapping': 0.3.18 + '@jridgewell/trace-mapping': registry.npmjs.org/@jridgewell/trace-mapping@0.3.18 callsites: registry.npmjs.org/callsites@3.1.0 graceful-fs: registry.npmjs.org/graceful-fs@4.2.11 dev: true @@ -13474,7 +13551,7 @@ packages: version: 29.6.3 engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@jridgewell/trace-mapping': 0.3.18 + '@jridgewell/trace-mapping': registry.npmjs.org/@jridgewell/trace-mapping@0.3.18 callsites: registry.npmjs.org/callsites@3.1.0 graceful-fs: registry.npmjs.org/graceful-fs@4.2.11 dev: true @@ -14711,8 +14788,8 @@ packages: name: '@jridgewell/source-map' version: 0.3.3 dependencies: - '@jridgewell/gen-mapping': 0.3.3 - '@jridgewell/trace-mapping': 0.3.18 + '@jridgewell/gen-mapping': registry.npmjs.org/@jridgewell/gen-mapping@0.3.3 + '@jridgewell/trace-mapping': registry.npmjs.org/@jridgewell/trace-mapping@0.3.18 registry.npmjs.org/@jridgewell/sourcemap-codec@1.4.14: resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz} @@ -15106,7 +15183,7 @@ packages: typescript: optional: true dependencies: - debug: 4.3.4 + debug: registry.npmjs.org/debug@4.3.4 extract-zip: registry.npmjs.org/extract-zip@2.0.1 https-proxy-agent: registry.npmjs.org/https-proxy-agent@5.0.1 progress: registry.npmjs.org/progress@2.0.3 @@ -15763,6 +15840,27 @@ packages: rollup: registry.npmjs.org/rollup@3.21.5 dev: true + registry.npmjs.org/@rollup/plugin-node-resolve@15.2.3(rollup@3.21.5): + resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz} + id: registry.npmjs.org/@rollup/plugin-node-resolve/15.2.3 + name: '@rollup/plugin-node-resolve' + version: 15.2.3 + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^2.78.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@rollup/pluginutils': registry.npmjs.org/@rollup/pluginutils@5.1.0(rollup@3.21.5) + '@types/resolve': registry.npmjs.org/@types/resolve@1.20.2 + deepmerge: registry.npmjs.org/deepmerge@4.3.1 + is-builtin-module: registry.npmjs.org/is-builtin-module@3.2.1 + is-module: registry.npmjs.org/is-module@1.0.0 + resolve: registry.npmjs.org/resolve@1.22.2 + rollup: registry.npmjs.org/rollup@3.21.5 + dev: true + registry.npmjs.org/@rollup/plugin-node-resolve@8.4.0(rollup@2.79.1): resolution: {integrity: sha512-LFqKdRLn0ShtQyf6SBYO69bGE1upV6wUhBX0vFOUnLAyzx5cwp8svA0eHUnu8+YU57XOkrMtfG63QOpQx25pHQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-8.4.0.tgz} id: registry.npmjs.org/@rollup/plugin-node-resolve/8.4.0 @@ -16176,7 +16274,7 @@ packages: version: 4.3.2 engines: {node: '>=8'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 dev: false registry.npmjs.org/@svgr/plugin-jsx@4.3.3: @@ -16867,8 +16965,8 @@ packages: name: '@types/babel__core' version: 7.20.0 dependencies: - '@babel/parser': registry.npmjs.org/@babel/parser@7.23.4 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@types/babel__generator': registry.npmjs.org/@types/babel__generator@7.6.4 '@types/babel__template': registry.npmjs.org/@types/babel__template@7.4.1 '@types/babel__traverse': registry.npmjs.org/@types/babel__traverse@7.18.5 @@ -16879,8 +16977,8 @@ packages: name: '@types/babel__core' version: 7.20.5 dependencies: - '@babel/parser': registry.npmjs.org/@babel/parser@7.23.4 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@types/babel__generator': registry.npmjs.org/@types/babel__generator@7.6.4 '@types/babel__template': registry.npmjs.org/@types/babel__template@7.4.1 '@types/babel__traverse': registry.npmjs.org/@types/babel__traverse@7.18.5 @@ -16891,7 +16989,7 @@ packages: name: '@types/babel__generator' version: 7.6.4 dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 dev: true registry.npmjs.org/@types/babel__template@7.4.1: @@ -16899,8 +16997,8 @@ packages: name: '@types/babel__template' version: 7.4.1 dependencies: - '@babel/parser': 7.23.4 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 dev: true registry.npmjs.org/@types/babel__traverse@7.18.5: @@ -16908,7 +17006,7 @@ packages: name: '@types/babel__traverse' version: 7.18.5 dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 dev: true registry.npmjs.org/@types/babylon@6.16.9: @@ -18346,7 +18444,7 @@ packages: name: '@vue/compiler-core' version: 3.2.47 dependencies: - '@babel/parser': registry.npmjs.org/@babel/parser@7.21.8 + '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 '@vue/shared': registry.npmjs.org/@vue/shared@3.2.47 estree-walker: registry.npmjs.org/estree-walker@2.0.2 source-map: registry.npmjs.org/source-map@0.6.1 @@ -18689,7 +18787,7 @@ packages: - whiskers dev: true - registry.npmjs.org/@vue/component-compiler@4.2.4(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(vue-template-compiler@2.7.14): + registry.npmjs.org/@vue/component-compiler@4.2.4(lodash@4.17.21)(postcss@8.4.23)(react-dom@18.2.0)(react@18.2.0)(vue-template-compiler@2.7.14): resolution: {integrity: sha512-tFGw3h3+nxiqnyborwWQ+rUgKAwSFl0Sdg+BCZkWTyFfkEF5fqunTNoklEUDdtRQMmVqsajn1pOZdm0zh4Uicw==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@vue/component-compiler/-/component-compiler-4.2.4.tgz} id: registry.npmjs.org/@vue/component-compiler/4.2.4 name: '@vue/component-compiler' @@ -18701,6 +18799,7 @@ packages: '@vue/component-compiler-utils': registry.npmjs.org/@vue/component-compiler-utils@3.3.0(lodash@4.17.21)(pug@3.0.2)(react-dom@18.2.0)(react@18.2.0) clean-css: registry.npmjs.org/clean-css@4.2.4 hash-sum: registry.npmjs.org/hash-sum@1.0.2 + postcss: registry.npmjs.org/postcss@8.4.23 postcss-modules-sync: registry.npmjs.org/postcss-modules-sync@1.0.0 source-map: registry.npmjs.org/source-map@0.6.1 vue-template-compiler: registry.npmjs.org/vue-template-compiler@2.7.14 @@ -18840,7 +18939,7 @@ packages: dependencies: '@vue/runtime-core': registry.npmjs.org/@vue/runtime-core@3.2.47 '@vue/shared': registry.npmjs.org/@vue/shared@3.2.47 - csstype: 2.6.21 + csstype: registry.npmjs.org/csstype@2.6.21 registry.npmjs.org/@vue/server-renderer@3.2.47(vue@3.2.47): resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz} @@ -19465,7 +19564,7 @@ packages: name: add-dom-event-listener version: 1.1.0 dependencies: - object-assign: 4.1.1 + object-assign: registry.npmjs.org/object-assign@4.1.1 dev: false registry.npmjs.org/add-stream@1.0.0: @@ -20164,7 +20263,7 @@ packages: name: assert version: 1.5.0 dependencies: - object-assign: 4.1.1 + object-assign: registry.npmjs.org/object-assign@4.1.1 util: registry.npmjs.org/util@0.10.3 registry.npmjs.org/assign-symbols@1.0.0: @@ -20378,8 +20477,8 @@ packages: babel-types: registry.npmjs.org/babel-types@6.26.0 babylon: registry.npmjs.org/babylon@6.18.0 convert-source-map: 1.9.0 - debug: 2.6.9 - json5: 0.4.0 + debug: registry.npmjs.org/debug@2.6.9 + json5: registry.npmjs.org/json5@0.4.0 lodash: registry.npmjs.org/lodash@4.17.21 minimatch: registry.npmjs.org/minimatch@3.1.2 path-exists: registry.npmjs.org/path-exists@1.0.0 @@ -20895,8 +20994,8 @@ packages: name: babel-plugin-espower version: 3.0.1 dependencies: - '@babel/generator': 7.21.5 - '@babel/parser': 7.23.4 + '@babel/generator': registry.npmjs.org/@babel/generator@7.23.6 + '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 call-matcher: registry.npmjs.org/call-matcher@1.1.0 core-js: registry.npmjs.org/core-js@2.6.12 espower-location-detector: registry.npmjs.org/espower-location-detector@1.0.0 @@ -20931,8 +21030,8 @@ packages: version: 26.6.2 engines: {node: '>= 10.14.2'} dependencies: - '@babel/template': 7.21.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/template': registry.npmjs.org/@babel/template@7.21.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@types/babel__core': registry.npmjs.org/@types/babel__core@7.20.5 '@types/babel__traverse': registry.npmjs.org/@types/babel__traverse@7.18.5 dev: true @@ -20943,8 +21042,8 @@ packages: version: 27.5.1 engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} dependencies: - '@babel/template': 7.21.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/template': registry.npmjs.org/@babel/template@7.21.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@types/babel__core': registry.npmjs.org/@types/babel__core@7.20.5 '@types/babel__traverse': registry.npmjs.org/@types/babel__traverse@7.18.5 dev: true @@ -20955,8 +21054,8 @@ packages: version: 29.5.0 engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/template': 7.21.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/template': registry.npmjs.org/@babel/template@7.21.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@types/babel__core': registry.npmjs.org/@types/babel__core@7.20.5 '@types/babel__traverse': registry.npmjs.org/@types/babel__traverse@7.18.5 dev: true @@ -20968,7 +21067,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@babel/template': registry.npmjs.org/@babel/template@7.21.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@types/babel__core': registry.npmjs.org/@types/babel__core@7.20.5 '@types/babel__traverse': registry.npmjs.org/@types/babel__traverse@7.18.5 dev: true @@ -23710,6 +23809,14 @@ packages: name: component-type version: 1.2.1 + registry.npmjs.org/components-loader@1.1.0: + resolution: {integrity: sha512-uyZdcpmzWQH2Z8ujWOoTmQwDCi8fAiJdbRjGUprtVcbaNu15HxC9HptdS282pY+UG6pBT8CdMrp5G3qltXLEIA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/components-loader/-/components-loader-1.1.0.tgz} + name: components-loader + version: 1.1.0 + dependencies: + loader-utils: registry.npmjs.org/loader-utils@0.2.17 + dev: true + registry.npmjs.org/compose-function@3.0.3: resolution: {integrity: sha512-xzhzTJ5eC+gmIzvZq+C3kCJHsp9os6tJkrigDRZclyGtOKINbZtE8n1Tzmeh32jW+BUDPbvZpibwvJHBLGMVwg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz} name: compose-function @@ -23735,7 +23842,7 @@ packages: accepts: registry.npmjs.org/accepts@1.3.8 bytes: registry.npmjs.org/bytes@3.0.0 compressible: registry.npmjs.org/compressible@2.0.18 - debug: 2.6.9 + debug: registry.npmjs.org/debug@2.6.9 on-headers: registry.npmjs.org/on-headers@1.0.2 safe-buffer: registry.npmjs.org/safe-buffer@5.1.2 vary: registry.npmjs.org/vary@1.1.2 @@ -23752,7 +23859,7 @@ packages: accepts: registry.npmjs.org/accepts@1.3.8 bytes: registry.npmjs.org/bytes@3.0.0 compressible: registry.npmjs.org/compressible@2.0.18 - debug: 2.6.9(supports-color@6.1.0) + debug: registry.npmjs.org/debug@2.6.9(supports-color@6.1.0) on-headers: registry.npmjs.org/on-headers@1.0.2 safe-buffer: registry.npmjs.org/safe-buffer@5.1.2 vary: registry.npmjs.org/vary@1.1.2 @@ -24250,7 +24357,6 @@ packages: name: consolidate version: 0.15.1 engines: {node: '>= 0.10.0'} - deprecated: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog peerDependencies: arc-templates: ^0.5.3 atpl: '>=0.7.6' @@ -24426,7 +24532,6 @@ packages: name: consolidate version: 0.15.1 engines: {node: '>= 0.10.0'} - deprecated: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog peerDependencies: arc-templates: ^0.5.3 atpl: '>=0.7.6' @@ -25809,6 +25914,11 @@ packages: dependencies: rrweb-cssom: registry.npmjs.org/rrweb-cssom@0.6.0 + registry.npmjs.org/csstype@2.6.21: + resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz} + name: csstype + version: 2.6.21 + registry.npmjs.org/csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz} name: csstype @@ -25981,6 +26091,21 @@ packages: dependencies: ms: registry.npmjs.org/ms@2.1.3 + registry.npmjs.org/debug@3.2.7(supports-color@6.1.0): + resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/debug/-/debug-3.2.7.tgz} + id: registry.npmjs.org/debug/3.2.7 + name: debug + version: 3.2.7 + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: registry.npmjs.org/ms@2.1.3 + supports-color: registry.npmjs.org/supports-color@6.1.0 + dev: false + registry.npmjs.org/debug@4.1.1: resolution: {integrity: sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/debug/-/debug-4.1.1.tgz} name: debug @@ -26366,7 +26491,7 @@ packages: hasBin: true dependencies: '@babel/parser': registry.npmjs.org/@babel/parser@7.16.4 - '@babel/traverse': registry.npmjs.org/@babel/traverse@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 '@vue/compiler-sfc': registry.npmjs.org/@vue/compiler-sfc@3.2.47 camelcase: registry.npmjs.org/camelcase@6.3.0 cosmiconfig: registry.npmjs.org/cosmiconfig@7.1.0 @@ -26383,7 +26508,7 @@ packages: query-ast: registry.npmjs.org/query-ast@1.0.5 readdirp: registry.npmjs.org/readdirp@3.6.0 require-package-name: registry.npmjs.org/require-package-name@2.0.1 - resolve: 1.22.2 + resolve: registry.npmjs.org/resolve@1.22.2 sass: registry.npmjs.org/sass@1.69.7 scss-parser: registry.npmjs.org/scss-parser@1.0.6 semver: registry.npmjs.org/semver@7.5.0 @@ -29135,7 +29260,7 @@ packages: engines: {node: '>= 10.17.0'} hasBin: true dependencies: - debug: 4.3.4 + debug: registry.npmjs.org/debug@4.3.4 get-stream: registry.npmjs.org/get-stream@5.2.0 yauzl: registry.npmjs.org/yauzl@2.10.0 optionalDependencies: @@ -29284,7 +29409,7 @@ packages: cross-fetch: registry.npmjs.org/cross-fetch@3.1.5 fbjs-css-vars: registry.npmjs.org/fbjs-css-vars@1.0.2 loose-envify: 1.4.0 - object-assign: 4.1.1 + object-assign: registry.npmjs.org/object-assign@4.1.1 promise: registry.npmjs.org/promise@7.3.1 setimmediate: registry.npmjs.org/setimmediate@1.0.5 ua-parser-js: registry.npmjs.org/ua-parser-js@0.7.35 @@ -29539,7 +29664,7 @@ packages: version: 1.2.0 engines: {node: '>=4.0.0'} dependencies: - json5: 0.5.1 + json5: registry.npmjs.org/json5@0.5.1 path-exists: registry.npmjs.org/path-exists@3.0.0 registry.npmjs.org/find-cache-dir@2.1.0: @@ -30056,7 +30181,7 @@ packages: version: 2.3.1 engines: {node: '>=0.10.0'} dependencies: - object-assign: 4.1.1 + object-assign: registry.npmjs.org/object-assign@4.1.1 pinkie-promise: registry.npmjs.org/pinkie-promise@2.0.1 dev: false @@ -30497,7 +30622,7 @@ packages: dependencies: array-union: registry.npmjs.org/array-union@1.0.2 glob: registry.npmjs.org/glob@7.2.3 - object-assign: 4.1.1 + object-assign: registry.npmjs.org/object-assign@4.1.1 pify: registry.npmjs.org/pify@2.3.0 pinkie-promise: registry.npmjs.org/pinkie-promise@2.0.1 dev: false @@ -31227,7 +31352,7 @@ packages: dependencies: '@tootallnate/once': registry.npmjs.org/@tootallnate/once@2.0.0 agent-base: registry.npmjs.org/agent-base@6.0.2 - debug: 4.3.4 + debug: registry.npmjs.org/debug@4.3.4 transitivePeerDependencies: - supports-color @@ -32608,7 +32733,7 @@ packages: engines: {node: '>=8'} dependencies: '@babel/core': registry.npmjs.org/@babel/core@7.23.9 - '@babel/parser': 7.23.4 + '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 '@istanbuljs/schema': registry.npmjs.org/@istanbuljs/schema@0.1.3 istanbul-lib-coverage: registry.npmjs.org/istanbul-lib-coverage@3.2.0 semver: registry.npmjs.org/semver@6.3.1 @@ -33110,7 +33235,7 @@ packages: '@jest/types': registry.npmjs.org/@jest/types@26.6.2 babel-jest: registry.npmjs.org/babel-jest@26.6.3(@babel/core@7.23.9) chalk: registry.npmjs.org/chalk@4.1.2 - deepmerge: 4.3.1 + deepmerge: registry.npmjs.org/deepmerge@4.3.1 glob: registry.npmjs.org/glob@7.2.3 graceful-fs: registry.npmjs.org/graceful-fs@4.2.11 jest-environment-jsdom: registry.npmjs.org/jest-environment-jsdom@26.6.2 @@ -33403,7 +33528,7 @@ packages: babel-jest: registry.npmjs.org/babel-jest@29.7.0(@babel/core@7.23.9) chalk: registry.npmjs.org/chalk@4.1.2 ci-info: registry.npmjs.org/ci-info@3.8.0 - deepmerge: 4.3.1 + deepmerge: registry.npmjs.org/deepmerge@4.3.1 glob: registry.npmjs.org/glob@7.2.3 graceful-fs: registry.npmjs.org/graceful-fs@4.2.11 jest-circus: registry.npmjs.org/jest-circus@29.7.0 @@ -33446,7 +33571,7 @@ packages: babel-jest: registry.npmjs.org/babel-jest@29.7.0(@babel/core@7.23.9) chalk: registry.npmjs.org/chalk@4.1.2 ci-info: registry.npmjs.org/ci-info@3.8.0 - deepmerge: 4.3.1 + deepmerge: registry.npmjs.org/deepmerge@4.3.1 glob: registry.npmjs.org/glob@7.2.3 graceful-fs: registry.npmjs.org/graceful-fs@4.2.11 jest-circus: registry.npmjs.org/jest-circus@29.7.0 @@ -33489,7 +33614,7 @@ packages: babel-jest: registry.npmjs.org/babel-jest@29.7.0(@babel/core@7.23.9) chalk: registry.npmjs.org/chalk@4.1.2 ci-info: registry.npmjs.org/ci-info@3.8.0 - deepmerge: 4.3.1 + deepmerge: registry.npmjs.org/deepmerge@4.3.1 glob: registry.npmjs.org/glob@7.2.3 graceful-fs: registry.npmjs.org/graceful-fs@4.2.11 jest-circus: registry.npmjs.org/jest-circus@29.7.0 @@ -33533,7 +33658,7 @@ packages: babel-jest: registry.npmjs.org/babel-jest@29.7.0(@babel/core@7.23.9) chalk: registry.npmjs.org/chalk@4.1.2 ci-info: registry.npmjs.org/ci-info@3.8.0 - deepmerge: 4.3.1 + deepmerge: registry.npmjs.org/deepmerge@4.3.1 glob: registry.npmjs.org/glob@7.2.3 graceful-fs: registry.npmjs.org/graceful-fs@4.2.11 jest-circus: registry.npmjs.org/jest-circus@29.7.0 @@ -33968,7 +34093,7 @@ packages: version: 26.6.3 engines: {node: '>= 10.14.2'} dependencies: - '@babel/traverse': 7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 '@jest/environment': registry.npmjs.org/@jest/environment@26.6.2 '@jest/source-map': registry.npmjs.org/@jest/source-map@26.6.2 '@jest/test-result': registry.npmjs.org/@jest/test-result@26.6.2 @@ -34115,7 +34240,7 @@ packages: version: 26.6.2 engines: {node: '>= 10.14.2'} dependencies: - '@babel/code-frame': 7.21.4 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 '@jest/types': registry.npmjs.org/@jest/types@26.6.2 '@types/stack-utils': registry.npmjs.org/@types/stack-utils@2.0.1 chalk: registry.npmjs.org/chalk@4.1.2 @@ -34132,7 +34257,7 @@ packages: version: 27.5.1 engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} dependencies: - '@babel/code-frame': 7.21.4 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 '@jest/types': registry.npmjs.org/@jest/types@27.5.1 '@types/stack-utils': registry.npmjs.org/@types/stack-utils@2.0.1 chalk: registry.npmjs.org/chalk@4.1.2 @@ -34149,7 +34274,7 @@ packages: version: 29.5.0 engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/code-frame': 7.21.4 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 '@jest/types': registry.npmjs.org/@jest/types@29.5.0 '@types/stack-utils': registry.npmjs.org/@types/stack-utils@2.0.1 chalk: registry.npmjs.org/chalk@4.1.2 @@ -34166,7 +34291,7 @@ packages: version: 29.7.0 engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/code-frame': 7.21.4 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 '@jest/types': registry.npmjs.org/@jest/types@29.6.3 '@types/stack-utils': registry.npmjs.org/@types/stack-utils@2.0.1 chalk: registry.npmjs.org/chalk@4.1.2 @@ -34728,7 +34853,7 @@ packages: version: 26.6.2 engines: {node: '>= 10.14.2'} dependencies: - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@jest/types': registry.npmjs.org/@jest/types@26.6.2 '@types/babel__traverse': registry.npmjs.org/@types/babel__traverse@7.18.5 '@types/prettier': registry.npmjs.org/@types/prettier@2.7.2 @@ -34755,10 +34880,10 @@ packages: engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} dependencies: '@babel/core': registry.npmjs.org/@babel/core@7.23.9 - '@babel/generator': 7.21.5 + '@babel/generator': registry.npmjs.org/@babel/generator@7.23.6 '@babel/plugin-syntax-typescript': registry.npmjs.org/@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.23.9) - '@babel/traverse': 7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@jest/transform': registry.npmjs.org/@jest/transform@27.5.1 '@jest/types': registry.npmjs.org/@jest/types@27.5.1 '@types/babel__traverse': registry.npmjs.org/@types/babel__traverse@7.18.5 @@ -34787,11 +34912,11 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@babel/core': registry.npmjs.org/@babel/core@7.23.9 - '@babel/generator': 7.21.5 + '@babel/generator': registry.npmjs.org/@babel/generator@7.23.6 '@babel/plugin-syntax-jsx': registry.npmjs.org/@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.23.9) '@babel/plugin-syntax-typescript': registry.npmjs.org/@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.23.9) - '@babel/traverse': 7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@jest/expect-utils': registry.npmjs.org/@jest/expect-utils@29.5.0 '@jest/transform': registry.npmjs.org/@jest/transform@29.5.0 '@jest/types': registry.npmjs.org/@jest/types@29.5.0 @@ -34820,10 +34945,10 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@babel/core': registry.npmjs.org/@babel/core@7.23.9 - '@babel/generator': 7.21.5 + '@babel/generator': registry.npmjs.org/@babel/generator@7.23.6 '@babel/plugin-syntax-jsx': registry.npmjs.org/@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.23.9) '@babel/plugin-syntax-typescript': registry.npmjs.org/@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.23.9) - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 '@jest/expect-utils': registry.npmjs.org/@jest/expect-utils@29.7.0 '@jest/transform': registry.npmjs.org/@jest/transform@29.7.0 '@jest/types': registry.npmjs.org/@jest/types@29.6.3 @@ -35630,6 +35755,12 @@ packages: - supports-color - utf-8-validate + registry.npmjs.org/jsesc@0.5.0: + resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz} + name: jsesc + version: 0.5.0 + hasBin: true + registry.npmjs.org/jsesc@1.3.0: resolution: {integrity: sha512-Mke0DA0QjUWuJlhsE0ZPPhYiJkRap642SmI/4ztCFaUs6V2AiH1sfecc+57NgaryfAA2VR3v6O+CSjC1jZJKOA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz} name: jsesc @@ -35707,6 +35838,13 @@ packages: name: json-stringify-safe version: 5.0.1 + registry.npmjs.org/json5@0.4.0: + resolution: {integrity: sha512-5EEuuI7oad0d6c2PcrTRLoLH2JNuI/aJxHsVT2hVFK6fKHu+MXONdhzzzNAlb3JXMeuN1o+kDU78fV1YH6VmKQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/json5/-/json5-0.4.0.tgz} + name: json5 + version: 0.4.0 + hasBin: true + dev: false + registry.npmjs.org/json5@0.5.1: resolution: {integrity: sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/json5/-/json5-0.5.1.tgz} name: json5 @@ -36309,7 +36447,7 @@ packages: dependencies: big.js: registry.npmjs.org/big.js@5.2.2 emojis-list: registry.npmjs.org/emojis-list@2.1.0 - json5: 1.0.2 + json5: registry.npmjs.org/json5@1.0.2 dev: false registry.npmjs.org/loader-utils@1.4.2: @@ -37216,13 +37354,13 @@ packages: name: metro-source-map version: 0.72.3 dependencies: - '@babel/traverse': 7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 invariant: registry.npmjs.org/invariant@2.2.4 metro-symbolicate: registry.npmjs.org/metro-symbolicate@0.72.3 nullthrows: registry.npmjs.org/nullthrows@1.1.1 ob1: registry.npmjs.org/ob1@0.72.3 - source-map: 0.5.7 + source-map: registry.npmjs.org/source-map@0.5.7 vlq: registry.npmjs.org/vlq@1.0.1 transitivePeerDependencies: - supports-color @@ -37249,9 +37387,9 @@ packages: version: 0.72.3 dependencies: '@babel/core': registry.npmjs.org/@babel/core@7.23.9 - '@babel/generator': 7.21.5 + '@babel/generator': registry.npmjs.org/@babel/generator@7.23.6 '@babel/template': 7.21.9 - '@babel/traverse': 7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 nullthrows: registry.npmjs.org/nullthrows@1.1.1 transitivePeerDependencies: - supports-color @@ -37262,9 +37400,9 @@ packages: version: 0.72.3 dependencies: '@babel/core': registry.npmjs.org/@babel/core@7.23.9 - '@babel/generator': 7.21.5 + '@babel/generator': registry.npmjs.org/@babel/generator@7.23.6 '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 babel-preset-fbjs: registry.npmjs.org/babel-preset-fbjs@3.4.0(@babel/core@7.23.9) metro: registry.npmjs.org/metro@0.72.3 metro-babel-transformer: registry.npmjs.org/metro-babel-transformer@0.72.3 @@ -37288,11 +37426,11 @@ packages: dependencies: '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.21.4 '@babel/core': registry.npmjs.org/@babel/core@7.23.9 - '@babel/generator': registry.npmjs.org/@babel/generator@7.21.5 - '@babel/parser': registry.npmjs.org/@babel/parser@7.21.8 + '@babel/generator': registry.npmjs.org/@babel/generator@7.23.6 + '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 '@babel/template': registry.npmjs.org/@babel/template@7.20.7 - '@babel/traverse': registry.npmjs.org/@babel/traverse@7.21.5 - '@babel/types': registry.npmjs.org/@babel/types@7.21.5 + '@babel/traverse': registry.npmjs.org/@babel/traverse@7.23.9 + '@babel/types': registry.npmjs.org/@babel/types@7.23.9 absolute-path: registry.npmjs.org/absolute-path@0.0.0 accepts: registry.npmjs.org/accepts@1.3.8 async: registry.npmjs.org/async@3.2.4 @@ -37697,10 +37835,10 @@ packages: - supports-color dev: false - registry.npmjs.org/miniprogram-compiler@0.2.2: - resolution: {integrity: sha512-fiJXv/15jCcRAU8YKcO7S7fkPKLa5ZBgpLN+d6B3r3KMktM5tAkDEQ+zm6aTfNoHurYOHcRyPyGf26gqQXlFXg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/miniprogram-compiler/-/miniprogram-compiler-0.2.2.tgz} + registry.npmjs.org/miniprogram-compiler@0.2.3: + resolution: {integrity: sha512-/MfFiXTBUwYxnrTbj1hgwk1+qGkMCTL1zi8IReOq/0SPVkUxpx19E89w+ohYCELFXkMfVbD+6ejrHh3Y1u5sVg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/miniprogram-compiler/-/miniprogram-compiler-0.2.3.tgz} name: miniprogram-compiler - version: 0.2.2 + version: 0.2.3 dependencies: glob: registry.npmjs.org/glob@7.2.3 unescape-js: registry.npmjs.org/unescape-js@1.1.4 @@ -37720,7 +37858,7 @@ packages: csso: registry.npmjs.org/csso@3.5.1 j-component: registry.npmjs.org/j-component@1.4.9 less: registry.npmjs.org/less@3.13.1 - miniprogram-compiler: registry.npmjs.org/miniprogram-compiler@0.2.2 + miniprogram-compiler: registry.npmjs.org/miniprogram-compiler@0.2.3 postcss: registry.npmjs.org/postcss@7.0.39 dev: false @@ -39196,7 +39334,7 @@ packages: version: 5.2.0 engines: {node: '>=8'} dependencies: - '@babel/code-frame': 7.21.4 + '@babel/code-frame': registry.npmjs.org/@babel/code-frame@7.23.5 error-ex: registry.npmjs.org/error-ex@1.3.2 json-parse-even-better-errors: registry.npmjs.org/json-parse-even-better-errors@2.3.1 lines-and-columns: registry.npmjs.org/lines-and-columns@1.2.4 @@ -39666,7 +39804,7 @@ packages: engines: {node: '>= 0.12.0'} dependencies: async: registry.npmjs.org/async@2.6.4 - debug: 3.2.7(supports-color@6.1.0) + debug: registry.npmjs.org/debug@3.2.7(supports-color@6.1.0) mkdirp: registry.npmjs.org/mkdirp@0.5.6 transitivePeerDependencies: - supports-color @@ -41407,7 +41545,7 @@ packages: '@puppeteer/browsers': registry.npmjs.org/@puppeteer/browsers@0.5.0(typescript@4.9.5) chromium-bidi: registry.npmjs.org/chromium-bidi@0.4.7(devtools-protocol@0.0.1107588) cross-fetch: registry.npmjs.org/cross-fetch@3.1.5 - debug: 4.3.4 + debug: registry.npmjs.org/debug@4.3.4 devtools-protocol: registry.npmjs.org/devtools-protocol@0.0.1107588 extract-zip: registry.npmjs.org/extract-zip@2.0.1 https-proxy-agent: registry.npmjs.org/https-proxy-agent@5.0.1 @@ -41746,7 +41884,7 @@ packages: name: react-native-codegen version: 0.70.6 dependencies: - '@babel/parser': 7.23.4 + '@babel/parser': registry.npmjs.org/@babel/parser@7.23.9 flow-parser: registry.npmjs.org/flow-parser@0.121.0 jscodeshift: registry.npmjs.org/jscodeshift@0.13.1(@babel/preset-env@7.21.5) nullthrows: registry.npmjs.org/nullthrows@1.1.1 @@ -42560,7 +42698,7 @@ packages: version: 0.1.5 hasBin: true dependencies: - jsesc: 0.5.0 + jsesc: registry.npmjs.org/jsesc@0.5.0 dev: false registry.npmjs.org/regjsparser@0.6.9: @@ -42569,7 +42707,7 @@ packages: version: 0.6.9 hasBin: true dependencies: - jsesc: 0.5.0 + jsesc: registry.npmjs.org/jsesc@0.5.0 dev: true registry.npmjs.org/regjsparser@0.9.1: @@ -42578,7 +42716,7 @@ packages: version: 0.9.1 hasBin: true dependencies: - jsesc: 0.5.0 + jsesc: registry.npmjs.org/jsesc@0.5.0 registry.npmjs.org/relateurl@0.2.7: resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz} @@ -43299,6 +43437,53 @@ packages: typescript: registry.npmjs.org/typescript@4.9.5 dev: true + registry.npmjs.org/rollup-plugin-ts@3.2.0(@babel/core@7.23.9)(rollup@2.79.1)(typescript@4.9.5): + resolution: {integrity: sha512-KkTLVifkUexEiAXS9VtSjDrjKr0TyusmNJpb2ZTAzI9VuPumSu4AktIaVNnwv70iUEitHwZtET7OAM+5n1u1tg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/rollup-plugin-ts/-/rollup-plugin-ts-3.2.0.tgz} + id: registry.npmjs.org/rollup-plugin-ts/3.2.0 + name: rollup-plugin-ts + version: 3.2.0 + engines: {node: '>=14.9.0', npm: '>=7.0.0', pnpm: '>=3.2.0', yarn: '>=1.13'} + peerDependencies: + '@babel/core': '>=6.x || >=7.x' + '@babel/plugin-transform-runtime': '>=6.x || >=7.x' + '@babel/preset-env': '>=6.x || >=7.x' + '@babel/preset-typescript': '>=6.x || >=7.x' + '@babel/runtime': '>=6.x || >=7.x' + '@swc/core': '>=1.x' + '@swc/helpers': '>=0.2' + rollup: '>=1.x || >=2.x' + typescript: '>=3.2.x || >= 4.x' + peerDependenciesMeta: + '@babel/core': + optional: true + '@babel/plugin-transform-runtime': + optional: true + '@babel/preset-env': + optional: true + '@babel/preset-typescript': + optional: true + '@babel/runtime': + optional: true + '@swc/core': + optional: true + '@swc/helpers': + optional: true + dependencies: + '@babel/core': registry.npmjs.org/@babel/core@7.23.9 + '@rollup/pluginutils': registry.npmjs.org/@rollup/pluginutils@5.0.2(rollup@2.79.1) + '@wessberg/stringutil': registry.npmjs.org/@wessberg/stringutil@1.0.19 + ansi-colors: registry.npmjs.org/ansi-colors@4.1.3 + browserslist: registry.npmjs.org/browserslist@4.21.5 + browserslist-generator: registry.npmjs.org/browserslist-generator@2.0.3 + compatfactory: registry.npmjs.org/compatfactory@2.0.9(typescript@4.9.5) + crosspath: registry.npmjs.org/crosspath@2.0.0 + magic-string: registry.npmjs.org/magic-string@0.27.0 + rollup: registry.npmjs.org/rollup@2.79.1 + ts-clone-node: registry.npmjs.org/ts-clone-node@2.0.4(typescript@4.9.5) + tslib: registry.npmjs.org/tslib@2.5.0 + typescript: registry.npmjs.org/typescript@4.9.5 + dev: true + registry.npmjs.org/rollup-plugin-ts@3.2.0(rollup@2.79.1)(typescript@4.9.5): resolution: {integrity: sha512-KkTLVifkUexEiAXS9VtSjDrjKr0TyusmNJpb2ZTAzI9VuPumSu4AktIaVNnwv70iUEitHwZtET7OAM+5n1u1tg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/rollup-plugin-ts/-/rollup-plugin-ts-3.2.0.tgz} id: registry.npmjs.org/rollup-plugin-ts/3.2.0 @@ -43409,7 +43594,7 @@ packages: typescript: 4.9.5 dev: true - registry.npmjs.org/rollup-plugin-vue@5.1.9(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(vue-template-compiler@2.7.14): + registry.npmjs.org/rollup-plugin-vue@5.1.9(lodash@4.17.21)(postcss@8.4.23)(react-dom@18.2.0)(react@18.2.0)(vue-template-compiler@2.7.14): resolution: {integrity: sha512-DXzrBUD2j68Y6nls4MmuJsFL1SrQDpdgjxvhk/oy04LzJmXJoX1x31yLEBFkkmvpbon6Q885WJLvEMiMyT+3rA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-5.1.9.tgz} id: registry.npmjs.org/rollup-plugin-vue/5.1.9 name: rollup-plugin-vue @@ -43417,7 +43602,7 @@ packages: peerDependencies: vue-template-compiler: '*' dependencies: - '@vue/component-compiler': registry.npmjs.org/@vue/component-compiler@4.2.4(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0)(vue-template-compiler@2.7.14) + '@vue/component-compiler': registry.npmjs.org/@vue/component-compiler@4.2.4(lodash@4.17.21)(postcss@8.4.23)(react-dom@18.2.0)(react@18.2.0)(vue-template-compiler@2.7.14) '@vue/component-compiler-utils': registry.npmjs.org/@vue/component-compiler-utils@3.3.0(lodash@4.17.21)(react-dom@18.2.0)(react@18.2.0) debug: registry.npmjs.org/debug@4.3.4 hash-sum: registry.npmjs.org/hash-sum@1.0.2 @@ -43485,6 +43670,22 @@ packages: - whiskers dev: true + registry.npmjs.org/rollup-plugin-vue@6.0.0(@vue/compiler-sfc@3.2.47): + resolution: {integrity: sha512-oVvUd84d5u73M2HYM3XsMDLtZRIA/tw2U0dmHlXU2UWP5JARYHzh/U9vcxaN/x/9MrepY7VH3pHFeOhrWpxs/Q==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0.tgz} + id: registry.npmjs.org/rollup-plugin-vue/6.0.0 + name: rollup-plugin-vue + version: 6.0.0 + peerDependencies: + '@vue/compiler-sfc': '*' + dependencies: + '@vue/compiler-sfc': registry.npmjs.org/@vue/compiler-sfc@3.2.47 + debug: registry.npmjs.org/debug@4.3.4 + hash-sum: registry.npmjs.org/hash-sum@2.0.0 + rollup-pluginutils: registry.npmjs.org/rollup-pluginutils@2.8.2 + transitivePeerDependencies: + - supports-color + dev: true + registry.npmjs.org/rollup-pluginutils@2.8.2: resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz} name: rollup-pluginutils @@ -44004,7 +44205,7 @@ packages: fresh: registry.npmjs.org/fresh@0.5.2 http-errors: registry.npmjs.org/http-errors@2.0.0 mime: registry.npmjs.org/mime@1.6.0 - ms: 2.1.3 + ms: registry.npmjs.org/ms@2.1.3 on-finished: registry.npmjs.org/on-finished@2.4.1 range-parser: registry.npmjs.org/range-parser@1.2.1 statuses: registry.npmjs.org/statuses@2.0.1 @@ -44074,7 +44275,7 @@ packages: dependencies: accepts: registry.npmjs.org/accepts@1.3.8 batch: registry.npmjs.org/batch@0.6.1 - debug: 2.6.9 + debug: registry.npmjs.org/debug@2.6.9 escape-html: registry.npmjs.org/escape-html@1.0.3 http-errors: registry.npmjs.org/http-errors@1.6.3 mime-types: 2.1.35 @@ -44091,7 +44292,7 @@ packages: dependencies: accepts: registry.npmjs.org/accepts@1.3.8 batch: registry.npmjs.org/batch@0.6.1 - debug: 2.6.9(supports-color@6.1.0) + debug: registry.npmjs.org/debug@2.6.9(supports-color@6.1.0) escape-html: registry.npmjs.org/escape-html@1.0.3 http-errors: registry.npmjs.org/http-errors@1.6.3 mime-types: 2.1.35 @@ -44514,7 +44715,7 @@ packages: version: 1.6.1 engines: {node: '>=12'} dependencies: - debug: 3.2.7(supports-color@6.1.0) + debug: registry.npmjs.org/debug@3.2.7(supports-color@6.1.0) eventsource: registry.npmjs.org/eventsource@2.0.2 faye-websocket: registry.npmjs.org/faye-websocket@0.11.4 inherits: registry.npmjs.org/inherits@2.0.4 @@ -44723,7 +44924,7 @@ packages: version: 4.0.2 engines: {node: '>=6.0.0'} dependencies: - debug: 4.3.4 + debug: registry.npmjs.org/debug@4.3.4 handle-thing: registry.npmjs.org/handle-thing@2.0.1 http-deceiver: registry.npmjs.org/http-deceiver@1.2.7 select-hose: registry.npmjs.org/select-hose@2.0.0 @@ -44738,7 +44939,7 @@ packages: version: 4.0.2 engines: {node: '>=6.0.0'} dependencies: - debug: 4.3.4(supports-color@6.1.0) + debug: registry.npmjs.org/debug@4.3.4(supports-color@6.1.0) handle-thing: registry.npmjs.org/handle-thing@2.0.1 http-deceiver: registry.npmjs.org/http-deceiver@1.2.7 select-hose: registry.npmjs.org/select-hose@2.0.0 @@ -45519,7 +45720,7 @@ packages: engines: {node: '>=8'} hasBin: true dependencies: - '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/gen-mapping': registry.npmjs.org/@jridgewell/gen-mapping@0.3.3 commander: registry.npmjs.org/commander@4.1.1 glob: registry.npmjs.org/glob@7.1.6 lines-and-columns: registry.npmjs.org/lines-and-columns@1.2.4 @@ -47755,7 +47956,7 @@ packages: version: 9.1.0 engines: {node: '>=10.12.0'} dependencies: - '@jridgewell/trace-mapping': 0.3.18 + '@jridgewell/trace-mapping': registry.npmjs.org/@jridgewell/trace-mapping@0.3.18 '@types/istanbul-lib-coverage': registry.npmjs.org/@types/istanbul-lib-coverage@2.0.4 convert-source-map: registry.npmjs.org/convert-source-map@1.9.0 dev: true @@ -47857,24 +48058,6 @@ packages: version: 1.8.27 dev: true - registry.npmjs.org/vue-demi@0.14.7(vue@2.7.16): - resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz} - id: registry.npmjs.org/vue-demi/0.14.7 - name: vue-demi - version: 0.14.7 - engines: {node: '>=12'} - hasBin: true - requiresBuild: true - peerDependencies: - '@vue/composition-api': ^1.0.0-rc.1 - vue: ^3.0.0-0 || ^2.6.0 - peerDependenciesMeta: - '@vue/composition-api': - optional: true - dependencies: - vue: registry.npmjs.org/vue@2.7.16 - dev: false - registry.npmjs.org/vue-eslint-parser@8.3.0(eslint@8.40.0): resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz} id: registry.npmjs.org/vue-eslint-parser/8.3.0 @@ -47917,6 +48100,17 @@ packages: - supports-color dev: true + registry.npmjs.org/vue-facing-decorator@3.0.4(vue@2.7.16): + resolution: {integrity: sha512-Lk90PevJllB6qRRdLvLFjATZrv00nof1Ob6afavKL7Pc7V3eEin3vhdvEDRORdWKVvNoXhJbHejngWVuT0Pt0g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/vue-facing-decorator/-/vue-facing-decorator-3.0.4.tgz} + id: registry.npmjs.org/vue-facing-decorator/3.0.4 + name: vue-facing-decorator + version: 3.0.4 + peerDependencies: + vue: ^3.0.0 + dependencies: + vue: registry.npmjs.org/vue@2.7.16 + dev: true + registry.npmjs.org/vue-fragment@1.6.0(vue@2.7.14): resolution: {integrity: sha512-a5T8ZZZK/EQzgVShEl374HbobUJ0a7v12BzOzS6Z/wd/5EE/5SffcyHC+7bf9hP3L7Yc0hhY/GhMdwFQ25O/8A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.6.0.tgz} id: registry.npmjs.org/vue-fragment/1.6.0 @@ -47928,6 +48122,17 @@ packages: vue: registry.npmjs.org/vue@2.7.14 dev: false + registry.npmjs.org/vue-fragment@1.6.0(vue@2.7.16): + resolution: {integrity: sha512-a5T8ZZZK/EQzgVShEl374HbobUJ0a7v12BzOzS6Z/wd/5EE/5SffcyHC+7bf9hP3L7Yc0hhY/GhMdwFQ25O/8A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.6.0.tgz} + id: registry.npmjs.org/vue-fragment/1.6.0 + name: vue-fragment + version: 1.6.0 + peerDependencies: + vue: ^2.5.16 + dependencies: + vue: registry.npmjs.org/vue@2.7.16 + dev: false + registry.npmjs.org/vue-hot-reload-api@2.3.4: resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz} name: vue-hot-reload-api diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 0d9a44b3dd..72d56f6e88 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,5 +1,6 @@ packages: - 'packages/**' + - 'packages/taro-platform-harmony-hybrid/src/components/**' - 'examples/mini-program-example' - 'examples/demo-vue2' - 'examples/demo-vue3'