imooc-cli-dev-components44 1.0.0 → 1.0.1

package/examples/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "imooc-cli-dev-components44",
+  "version": "1.0.0",
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
+  transform: {
+    '^.+\\.vue$': 'vue-jest'
+  },
+  transformIgnorePatterns: [
+    '/!node_modules\\/lodash-es/'
+  ]
+}

package/package.json

@@ -1,42 +1,87 @@
 {
   "name": "imooc-cli-dev-components44",
-  "version": "1.0.0",
-  "private": false,
+  "version": "1.0.1",
+  "description": "imooc-cli-dev-components44",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Viking Zhang",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "build": "npm run clean && npm run build:esm && npm run build:umd",
+    "test:watch": "vue-cli-service test:unit --watch",
+    "test": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint --max-warnings 5",
+    "build:esm": "rollup --config build/rollup.esm.config.js",
+    "build:umd": "rollup --config build/rollup.umd.config.js",
+    "build:demo": "npm install && npm run builda && cd examples && npm install && npm run build",
+    "clean": "rimraf ./dist"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint && npm run test"
+    }
   },
+  "main": "dist/lego-bricks.umd.js",
+  "module": "dist/lego-bricks.esm.js",
+  "files": [
+    "build",
+    "examples",
+    "src",
+    "tests",
+    "dist",
+    ".browserslistrc",
+    ".eslintrc.js",
+    ".gitignore",
+    ".travis.yml",
+    "babel.config.js",
+    "jest.config.js",
+    "README.md",
+    "tsconfig.json"
+  ],
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "lodash-es": "^4.17.20"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-typescript": "^8.1.1",
+    "@types/jest": "^24.0.19",
+    "@types/lodash-es": "^4.17.4",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "^5.0.6",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/test-utils": "^2.0.0-0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint-plugin-vue": "^7.0.0-0",
+    "husky": "^4.3.8",
+    "rimraf": "^3.0.2",
+    "rollup": "^3.29.5",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "typescript": "^4.9.5",
+    "vue": "^3.5.26"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
+  "homepage": "https://github.com/imooc-lego/lego-components",
+  "keywords": [
+    "Component",
+    "UI",
+    "Vue3"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/imooc-lego/lego-components.git"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+  "types": "dist/index.d.ts"
 }

package/src/components/LImage/LImage.vue

@@ -0,0 +1,38 @@
+<template>
+  <img 
+    :style="styleProps" 
+    class="l-image-component" 
+    @click.prevent="handleClick"
+    :src="src"
+  />
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import useComponentCommon from '../../hooks/useComponentCommon'
+import { transformToComponentProps, imageDefaultProps, imageStylePropsNames } from '../../defaultProps'
+const defaultProps = transformToComponentProps(imageDefaultProps)
+
+// array that contains style props
+export default defineComponent({
+  name: 'l-image',
+  props: {
+    ...defaultProps
+  },
+  setup (props) {
+    // 重用并且简化
+    // 抽离并且获得 styleProps
+    const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames)
+    return {
+       styleProps,
+       handleClick
+    }
+  }
+})
+</script>
+
+<style scoped>
+.l-image-component {
+  max-width: 100%;
+  position: relative !important;
+}
+</style>

package/src/components/LImage/index.ts

@@ -0,0 +1,7 @@
+// import { App } from 'vue'
+import LImage from './LImage.vue'
+LImage.install = (app: any) => {
+  app.component(LImage.name, LImage)
+}
+
+export default LImage

package/src/components/LShape/LShape.vue

@@ -0,0 +1,30 @@
+<template>
+  <div 
+    :style="styleProps" 
+    class="l-shape-component" 
+    @click.prevent="handleClick"
+  ></div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import useComponentCommon from '../../hooks/useComponentCommon'
+import { transformToComponentProps, shapeDefaultProps, shapeStylePropsNames } from '../../defaultProps'
+const defaultProps = transformToComponentProps(shapeDefaultProps)
+
+// array that contains style props
+export default defineComponent({
+  name: 'l-shape',
+  props: {
+    ...defaultProps
+  },
+  setup (props) {
+    // 重用并且简化
+    // 抽离并且获得 styleProps
+    const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames)
+    return {
+       styleProps,
+       handleClick
+    }
+  }
+})
+</script>

package/src/components/LShape/index.ts

@@ -0,0 +1,7 @@
+// import { App } from 'vue'
+import LShape from './LShape.vue'
+LShape.install = (app: any) => {
+  app.component(LShape.name, LShape)
+}
+
+export default LShape

package/src/components/LText/LText.vue

@@ -0,0 +1,46 @@
+<template>
+  <component :is="tag" :style="styleProps" class="l-text-component" @click="handleClick">
+    {{text}}
+  </component>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import useComponentCommon from '../../hooks/useComponentCommon'
+import { transformToComponentProps, textDefaultProps, textStylePropNames } from '../../defaultProps'
+const defaultProps = transformToComponentProps(textDefaultProps)
+// array that contains style props
+export default defineComponent({
+  name: 'l-text',
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    ...defaultProps
+  },
+  setup (props) {
+    // 重用并且简化
+    // 抽离并且获得 styleProps
+    const { styleProps, handleClick} = useComponentCommon(props, textStylePropNames)
+    return {
+       styleProps,
+       handleClick
+    }
+  }
+})
+</script>
+
+<style scoped>
+h2.l-text-component, p.l-text-component {
+  margin-bottom: 0;
+}
+button.l-text-component {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.l-text-component {
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  position: relative !important;
+}
+</style>

package/src/components/LText/index.ts

@@ -0,0 +1,7 @@
+// import { App } from 'vue'
+import LText from './LText.vue'
+LText.install = (app: any) => {
+  app.component(LText.name, LText)
+}
+
+export default LText

package/src/defaultProps.ts

@@ -0,0 +1,110 @@
+import { mapValues, without } from 'lodash-es'
+export interface CommonComponentProps {
+  // actions
+  actionType: string;
+  url: string;
+  // size
+  height: string;
+  width: string;
+  paddingLeft: string;
+  paddingRight: string;
+  paddingTop: string;
+  paddingBottom: string;
+  // border type
+  borderStyle: string;
+  borderColor: string;
+  borderWidth: string;
+  borderRadius: string;
+  // shadow and opacity
+  boxShadow: string;
+  opacity: string;
+  // position and x,y
+  position: string;
+  left: string;
+  top: string;
+  right: string;
+}
+export const commonDefaultProps: CommonComponentProps = {
+  // actions
+  actionType: '',
+  url: '',
+  // size
+  height: '',
+  width: '373px',
+  paddingLeft: '0px',
+  paddingRight: '0px',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  // border type
+  borderStyle: 'none',
+  borderColor: '#000',
+  borderWidth: '0',
+  borderRadius: '0',
+  // shadow and opacity
+  boxShadow: '0 0 0 #000000',
+  opacity: '1',
+  // position and x,y
+  position: 'absolute',
+  left: '0',
+  top: '0',
+  right: '0'
+}
+export interface TextComponentProps extends CommonComponentProps {
+  text: string;
+  fontSize: string;
+  fontFamily: string;
+  fontWeight: string;
+  fontStyle: string;
+  textDecoration: string;
+  lineHeight: string;
+  textAlign: string;
+  color: string;
+  backgroundColor: string;
+}
+export interface ImageComponentProps extends CommonComponentProps {
+  src: string;
+}
+export interface ShapeComponentProps extends CommonComponentProps {
+  backgroundColor: string;
+}
+export type AllComponentProps = TextComponentProps & ImageComponentProps & ShapeComponentProps
+export const textDefaultProps: TextComponentProps = {
+  // basic props - font styles
+  text: '正文内容',
+  fontSize: '14px',
+  fontFamily: '',
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  textDecoration: 'none',
+  lineHeight: '1',
+  textAlign: 'left',
+  color: '#000000',
+  backgroundColor: '',
+  ...commonDefaultProps
+}
+export const imageDefaultProps: ImageComponentProps = {
+  src: 'test.url',
+  ...commonDefaultProps
+}
+export const shapeDefaultProps: ShapeComponentProps = {
+  backgroundColor: '',
+  ...commonDefaultProps
+}
+export const isEditingProp = {
+  isEditing: {
+    type: Boolean,
+    default: false
+  }
+}
+export const textStylePropNames = without(Object.keys(textDefaultProps), 'actionType', 'url', 'text')
+export const imageStylePropsNames = without(Object.keys(imageDefaultProps), 'actionType', 'url', 'src')
+export const shapeStylePropsNames = without(Object.keys(imageDefaultProps), 'actionType', 'url')
+export const transformToComponentProps = <T extends {}>(props: T) => {
+  const mapProps = mapValues(props, (item) => {
+    return {
+      type: (item as any).constructor as StringConstructor,
+      default: item
+    }
+  })
+  return { ...mapProps, ...isEditingProp }
+}

package/src/hooks/useComponentCommon.ts

@@ -0,0 +1,17 @@
+import { computed } from 'vue'
+import { pick } from 'lodash-es'
+import { CommonComponentProps } from '../defaultProps'
+const useComponentCommon =(props: Readonly<Partial<CommonComponentProps & { isEditing: boolean }>>, picks: string[]) => {
+  const styleProps = computed(() => pick(props, picks))
+  const handleClick = () => {
+    if (props.actionType === 'url' && props.url  && !props.isEditing) {
+      window.location.href = props.url
+    }
+  }
+  return {
+    styleProps,
+    handleClick
+  }
+}
+
+export default useComponentCommon

package/src/index.ts

@@ -0,0 +1,34 @@
+// import   { App } from 'vue'
+export { textDefaultProps , textStylePropNames, TextComponentProps,
+  imageDefaultProps, imageStylePropsNames, ImageComponentProps,
+  shapeDefaultProps, shapeStylePropsNames, ShapeComponentProps,
+  AllComponentProps
+} from './defaultProps'
+
+
+
+import LText from './components/LText'
+import LImage from './components/LImage'
+import LShape from './components/LShape'
+
+const components = [
+  LText,
+  LImage,
+  LShape
+]
+// @ts-ignore
+const install = (app: App) => {
+  components.forEach(component => {
+    app.component(component.name, component)
+  })
+}
+
+export {
+  LText,
+  LImage,
+  LShape,
+  install
+}
+export default {
+  install
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/tests/unit/LText.spec.ts

@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils'
+import LText from '../../src/components/LText'
+import { textDefaultProps } from '../../src/defaultProps'
+describe('LText.vue', () => {
+  const { location } = window 
+  beforeEach(() => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: '' }
+    })
+  })
+  afterEach(() => {
+    window.location = location
+  })
+  it('default LText render', () => {
+    const msg = 'test'
+    const props = {
+      ...textDefaultProps,
+      text: msg
+    }
+    const wrapper = shallowMount(LText, { props })
+    // should have the right text
+    expect(wrapper.text()).toBe(msg)
+    // should be default div tag
+    expect(wrapper.element.tagName).toBe('DIV')
+    // should have certian css attr
+    const style = wrapper.attributes().style
+    console.log(style)
+    expect(style.includes('font-size')).toBeTruthy()
+    // should not have prop has been filtered
+    expect(style.includes('actionType')).toBeFalsy()
+  })
+  it('LText with actionType and URL should trigger location href change', async () => {
+    const props = {
+      ...textDefaultProps,
+      actionType: 'url',
+      url: 'http://dummy.url',
+      tag: 'h2'
+    }
+    const wrapper = shallowMount(LText, { props })
+    expect(wrapper.element.tagName).toBe('H2')
+    await wrapper.trigger('click')
+    expect(window.location.href).toBe('http://dummy.url')
+  })
+  it('LText with isEditing should not trigger location change', async () => {
+    const props = {
+      ...textDefaultProps,
+      actionType: 'url',
+      url: 'http://dummy.url',
+      tag: 'h2',
+      isEditing: true
+    }
+    const wrapper = shallowMount(LText, { props })
+    await wrapper.trigger('click')
+    expect(window.location.href).not.toBe('http://dummy.url')
+  })
+})

package/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": false,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+     "types": ["vue"],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+     "shims-vue.d.ts",  // 添加这一行
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+        "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ]
+}