update

Author: kscript

README.md

@@ -1,2 +1,6 @@
-# zero
-一个基于vue-cli 4开发的UI库demo
+# zero-ui
+一个基于vue-cli 4开发的UI库demo  
+
+组件代码参考以下仓库: 
+- [element](https://github.com/ElemeFE/element)  
+- [ele-next](https://github.com/a631807682/ele-next)

examples/App.vue

@@ -4,9 +4,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
-  name: 'App',
-  components: {
-  }
+  name: 'App'
 })
 </script>
 <style>

examples/views/Home.vue

@@ -1,10 +1,19 @@
 <template>
   <div class="home">
-    <el-alert type="success">123</el-alert>
+    <el-container>
+    <el-aside>
+    </el-aside>
+    <el-main>
+      <el-avatar icon="el-icon-user-solid"></el-avatar>
+      <el-alert type="success">123</el-alert>
+    </el-main>
+    </el-container>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
+// @ts-ignore
+import { components } from 'zero-ui'
 export default defineComponent({
   name: 'Home'
 })

package.json

@@ -27,7 +27,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.26.10",
+    "throttle-debounce": "^2.2.1",
     "vue": "^3.0.0-0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"

packages/aside/index.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue'
+import Component from './src/index.vue'
+export const install = function (app: App) {
+  app.component(Component.name as string, Component)
+}
+
+export default Component

packages/aside/src/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <aside class="el-aside" :style="{ width }">
+    <slot></slot>
+  </aside>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ElAside',
+
+  componentName: 'ElAside',
+
+  props: {
+    width: {
+      type: String,
+      default: '300px'
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import 'theme/aside.scss';
+</style>

packages/avatar/index.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue'
+import Component from './src/index.vue'
+export const install = function (app: App) {
+  app.component(Component.name as string, Component)
+}
+
+export default Component

packages/avatar/src/index.vue

@@ -0,0 +1,110 @@
+
+<script lang="tsx">
+import { ref, defineComponent, computed, PropType, reactive, h, Slot } from 'vue'
+import { AvatarSize, AvatarShape, AvatarFit } from './type'
+export default defineComponent({
+  name: 'ElAvatar',
+
+  props: {
+    size: {
+      type: [Number, String] as PropType<AvatarSize>,
+      validator: (val: number | string): boolean => {
+        if (typeof val === 'string') {
+          return ['large', 'medium', 'small'].includes(val)
+        }
+        return typeof val === 'number'
+      }
+    },
+    shape: {
+      type: String as PropType<AvatarShape>,
+      default: 'circle',
+      validator: (val: string): boolean => {
+        return ['circle', 'square'].includes(val)
+      },
+    },
+    icon: String,
+    src: String,
+    alt: String,
+    srcSet: String,
+    error: Function,
+    fit: {
+      type: String,
+      default: 'cover'
+    }
+  },
+
+  setup(props, cxt) {
+    const isImageExist = ref(true)
+
+    const avatarClass = computed(() => {
+      const { size, icon, shape } = props
+      let classList = ['el-avatar']
+
+      if (size && typeof size === 'string') {
+        classList.push(`el-avatar--${size}`)
+      }
+
+      if (icon) {
+        classList.push('el-avatar--icon')
+      }
+
+      if (shape) {
+        classList.push(`el-avatar--${shape}`)
+      }
+      console.log(classList)
+      return classList.join(' ')
+    })
+
+    const handleError = () => {
+      const { error } = props
+      const errorFlag = error ? error() : undefined
+      if (errorFlag !== false) {
+        isImageExist.value = false
+      }
+    }
+
+    const renderAvatar = () => {
+      const { icon, src, alt, srcSet, fit } = props
+      if (isImageExist.value && src) {
+        return h('img', {
+          src,
+          alt,
+          style: {
+            'object-fit': fit,
+          },
+          srcSet,
+          onError: handleError,
+        })
+      }
+
+      if (icon) {
+        return h('i', { class: icon })
+      }
+      const slot = cxt.slots.default as Slot
+      return slot ? slot() : ''
+    }
+
+    return () => {
+      const { size } = props
+      const sizeStyle =
+        typeof size === 'number'
+          ? {
+              height: `${size}px`,
+              width: `${size}px`,
+              lineHeight: `${size}px`,
+            }
+          : {}
+      return (
+        <span class={ avatarClass.value } style={ sizeStyle }>
+          {
+            renderAvatar()
+          }
+        </span>
+      )
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import 'theme/avatar.scss';
+</style>

packages/avatar/src/type.ts

@@ -0,0 +1,3 @@
+export type AvatarSize = number | 'large' | 'medium' | 'small'
+export type AvatarShape = 'circle' | 'square'
+export type AvatarFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'

packages/component.ts

@@ -0,0 +1,23 @@
+import { App, ref } from "vue";
+
+/** ElementUI component common definition */
+export declare class ElementUIComponent extends Plugin {
+  /** Install component into Vue */
+  static install(app: App): void;
+}
+
+/** Component size definition for button, input, etc */
+export type ElementUIComponentSize = "large" | "medium" | "small" | "mini";
+
+/** Horizontal alignment */
+export type ElementUIHorizontalAlignment = "left" | "center" | "right";
+
+export type ElementUIProp = {
+  size: ElementUIComponentSize | "";
+  zIndex: Number;
+};
+
+export const ElementUIOptions = ref({
+  size: "",
+  zIndex: 2000,
+});