vdesign-ui 0.2.6 → 0.2.8

package/dist/components/transition/style.less

@@ -0,0 +1,208 @@
+.bounce-enter-active {
+  animation: bounce-in 300ms linear;
+}
+
+.bounce-leave-active {
+  animation: zoom-out 250ms linear;
+}
+
+.zoom-enter,
+.zoom-leave-to {
+  opacity: 0.01;
+  transform: scale(0.75);
+}
+
+.zoom-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.zoom-leave-active {
+  transition: all 250ms linear;
+}
+
+.punch-enter,
+.punch-leave-to {
+  opacity: 0.01;
+  transform: scale(1.35);
+}
+
+.punch-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.punch-leave-active {
+  transition: all 250ms linear;
+}
+
+.slide-up-enter,
+.slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.slide-up-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-up-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-right-enter,
+.slide-right-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.slide-right-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-right-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-left-enter,
+.slide-left-leave-to {
+  transform: translate3d(100%, 0, 0);
+}
+
+.slide-left-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-left-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-down-enter,
+.slide-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.slide-down-enter-active {
+  transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.slide-down-leave-active {
+  transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0.01;
+}
+
+.fade-enter-active {
+  transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-leave-active {
+  transition: opacity 250ms linear;
+}
+
+.fade-up-enter,
+.fade-up-leave-to {
+  opacity: 0.01;
+  transform: translate3d(0, 20%, 0);
+}
+
+.fade-up-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-up-leave-active {
+  transition: all 250ms linear;
+}
+
+.fade-down-enter,
+.fade-down-leave-to {
+  opacity: 0.01;
+  transform: translate3d(0, -20%, 0);
+}
+
+.fade-down-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-down-leave-active {
+  transition: all 250ms linear;
+}
+
+.fade-right-enter,
+.fade-right-leave-to {
+  opacity: 0.01;
+  transform: translate3d(-20%, 0, 0);
+}
+
+.fade-right-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-right-leave-active {
+  transition: all 250ms linear;
+}
+
+.fade-left-enter,
+.fade-left-leave-to {
+  opacity: 0.01;
+  transform: translate3d(20%, 0, 0);
+}
+
+.fade-left-enter-active {
+  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fade-left-leave-active {
+  transition: all 250ms linear;
+}
+
+.fly-enter-active {
+  animation: fly-in 600ms;
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.fly-leave-active {
+  animation: zoom-out 250ms;
+}
+
+
+@keyframes fly-in {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.5) translate3d(0, 50px, 0);
+  }
+
+  45% {
+    opacity: 1;
+    transform: scale(1.05) translate3d(0, -50px, 0);
+  }
+
+  100% {
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+}
+
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0.5);
+  }
+
+  45% {
+    transform: scale(1.05);
+  }
+
+  80% {
+    transform: scale(0.95);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out {
+  to {
+    opacity: 0.01;
+    transform: scale(0.75);
+  }
+}

package/dist/components/upload/index.js

@@ -0,0 +1,7 @@
+import Upload from './index.vue';
+import './style.less';
+Upload.install = function(Vue) {
+    Vue.component(Upload.name, Upload)
+}
+
+export default Upload;

package/dist/components/upload/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="vd-upload" :class="{ 'vd-upload--block': block }">
+    <div class="vd-upload__wrapper">
+      <div class="vd-upload__uploader" :class="{ 'vd-upload__uploader--text': text }">
+        <vd-icon :name="photo" class="vd-upload__icon"></vd-icon>
+        <p class="vd-upload__text" v-if="text">{{ text }}</p>
+        <input type="file" ref="input" class="vd-upload__input" :accept="accept" @change="onChange"
+          :disabled="disabled">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VdIcon from '../icon';
+export default {
+  name: 'vd-upload',
+  components: {
+    VdIcon
+  },
+  inheritAttrs: false,
+  props: {
+    photo: {
+      type: String,
+      default: 'icon_btn_photo'
+    },
+    text: String,
+    block: Boolean,
+    disabled: Boolean,
+    beforeRead: Function,
+    afterRead: Function,
+    accept: {
+      type: String,
+      default: 'image/*'
+    },
+    maxSize: {
+      type: Number,
+      default: Number.MAX_VALUE
+    }
+  },
+
+  methods: {
+    onChange(event) {
+      let { files } = event.target;
+      if (this.disabled || !files.length) {
+        return;
+      }
+
+      files = files.length === 1 ? files[0] : [].slice.call(files, 0);
+      if (!files || (this.beforeRead && !this.beforeRead(files))) {
+        return;
+      }
+
+      if (Array.isArray(files)) {
+        Promise.all(files.map(this.readFile)).then(contents => {
+          let oversize = false;
+          const payload = files.map((file, index) => {
+            if (file.size > this.maxSize) {
+              oversize = true;
+            }
+
+            return {
+              file: files[index],
+              content: contents[index]
+            };
+          });
+
+          this.onAfterRead(payload, oversize);
+        });
+      } else {
+        this.readFile(files).then(content => {
+          this.onAfterRead(
+            { file: files, content },
+            files.size > this.maxSize
+          );
+        });
+      }
+    },
+
+    readFile(file) {
+      return new Promise(resolve => {
+        const reader = new FileReader();
+
+        reader.onload = event => {
+          resolve(event.target.result);
+        };
+        reader.readAsDataURL(file);
+
+      });
+    },
+
+    onAfterRead(files, oversize) {
+      if (oversize) {
+        this.$emit('oversize', files);
+      } else {
+        this.afterRead && this.afterRead(files);
+        this.$refs.input && (this.$refs.input.value = '');
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/upload/style.less

@@ -0,0 +1,147 @@
+@upload-prefix-cls: vd-upload;
+
+.@{upload-prefix-cls}{ 
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    overflow-x: auto;
+    
+    &--block{
+        display: flex;
+        width: 100%;
+        .@{upload-prefix-cls}{
+            &__wrapper{
+                width: 100%;
+            }
+            &__uploader{
+                width: 100%;
+            }
+        }
+    }
+
+    &__wrapper{
+        display: flex;
+        gap: 12px;
+    }
+
+    &__uploader{
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: var(--height-upload-bg);
+        min-width: var(--width-upload-small);
+        background-color: var(--color-upload-bg);
+        border-radius: var(--radius-upload-content);
+
+        &--text{
+            padding-block-start: var(--spacing-upload-padding_top);
+            padding-block-end: var(--spacing-upload-padding_bottom);
+        }
+    } 
+
+    &__preview{
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--width-upload-small);
+        border-radius: var(--radius-upload-content);
+
+        &--pdf{
+            background-color: var(--color-upload-pdf-bg);
+        }
+
+        &-delete{
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0 var(--radius-upload-content);
+            background-color: var(--color-upload-close_bg);
+            &-icon{      
+                font-size: var(--icon-upload-close);
+                color: #ffffff;
+            }
+        }
+        &-word{
+            color: var(--color-upload-pdf-text);
+            font-size: var(--en-single-f-f-b-fontSize);
+            font-weight: var(--en-single-f-f-b-fontWeight);
+        }
+
+        &-img{
+            img{
+                object-fit: cover;
+                width: var(--height-upload-bg);
+                height: var(--height-upload-bg);
+                border-radius: var(--radius-upload-content);
+            }
+        }
+    }
+
+    &__icon{
+        font-size: var(--icon-upload-size);
+        color: var(--color-upload-icon);
+    }
+
+    &__text{
+        margin-block-start: var(--spacing-upload-text-margin_top);
+        color: var(--color-upload-text);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+    }
+
+    &__input{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        cursor: pointer;
+        opacity: 0;
+    }
+}
+
+.vd-image-preview{
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2001;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-dialog-mask_bg);
+    background: rgba(0,0,0,.8);
+
+    &__item{
+        flex-grow: 1;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img{
+            display: block;
+            object-fit: contain;
+        }
+    }
+}
+
+[lang='ar'] {
+    .@{upload-prefix-cls}{ 
+        &__preview{
+            &-delete{
+                left: 0;
+                right: auto;
+                border-radius: var(--radius-upload-content) 0;
+            }
+        }
+    }
+}

package/dist/components/utils/assist.js

@@ -0,0 +1,34 @@
+
+
+// Find components downward
+export function findComponentsDownward (context, componentName, ignoreComponentNames = []) {
+    if (!Array.isArray(ignoreComponentNames)) {
+        ignoreComponentNames = [ignoreComponentNames];
+    }
+    return context.$children.reduce((components, child) => {
+        if (child.$options.name === componentName) components.push(child);
+        if (ignoreComponentNames.indexOf(child.$options.name) < 0) {
+            const foundChilds = findComponentsDownward(child, componentName);
+            return components.concat(foundChilds);
+        } else {
+            return components;
+        }
+    }, []);
+}
+
+// Find components upward
+export function findComponentUpward (context, componentName, componentNames) {
+    if (typeof componentName === 'string') {
+        componentNames = [componentName];
+    } else {
+        componentNames = componentName;
+    }
+
+    let parent = context.$parent;
+    let name = parent.$options.name;
+    while (parent && (!name || componentNames.indexOf(name) < 0)) {
+        parent = parent.$parent;
+        if (parent) name = parent.$options.name;
+    }
+    return parent;
+}

package/dist/components/utils/env.js

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+
+export const inBrowser = typeof window !== 'undefined';
+
+export const isServer = Vue.prototype.$isServer;
+
+export function isObject(val) {
+  return val !== null && typeof val === 'object';
+}
+
+export function isInDocument(element) {
+  return document.body.contains(element);
+}
+
+export function removeNode(el) {
+  const parent = el.parentNode;
+
+  if (parent) {
+    parent.removeChild(el);
+  }
+}

package/dist/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>vdesign-ui demo</title>
+<script src="./vdesign-ui.umd.js"></script>
+
+<link rel="stylesheet" href="./vdesign-ui.css">
+
+
+<script>
+console.log(vdesign-ui)
+</script>

package/dist/locale/ar.js

@@ -0,0 +1,98 @@
+export default {
+    message: {
+      hello: "مرحبا العالم"
+    },
+    button: {
+      loading: "تحميل .",
+      default: "خرق",
+      primary: "الرئيسية الرئيسية",
+      secondary: "ثانوي",
+      warning: "حذر",
+      warning_grey: "تحذير رمادي",
+      tertiary: "المستوى الثالث",
+      tertiary_grey: "التعليم العالي رمادي",
+      wireframe: "خط الإطار",
+      primary_text: "primary_text",
+      warning_text: "النص الرئيسي",
+      tertiary_text: "نص المستوى الثالث",
+      link_text: "ربط النص",
+      small: "صغير",
+      medium: "متوسط",
+      large: "كبير",
+      disabled: "تعطيل",
+      block: "كتلة",
+      buy: "شراء",
+      sell: "بيع .",
+      text: "زر النص"
+    },
+    actionbar: {
+      text: "شريط العمل",
+      filter: "عنوان",
+      edit: "عنوان",
+      add: "عنوان",
+      delete: "عنوان",
+      more: "عنوان",
+      reset: "عنوان",
+      create: "عنوان",
+      alert: "عنوان",
+      chart: "عنوان"
+    },
+    title: {
+      text: "عنوان"
+    },
+    radio: {
+      text: "مذياع"
+    },
+    checkbox: {
+      text: "مذياع"
+    },
+    dropdown: {
+      text: "اسقاط",
+      text1: "المحدد",
+      text2: "المحدد",
+      text3: "المحدد"
+    },
+    tab: {
+      text: "فاتورة غير مدفوعة"
+    },
+    empty: {
+      description: "لايوجد بيانات"
+    },
+    result: {
+      text: "يستخدم هذا النوع بشكل أساسي في النوافذ المنبثقة الأساسية للتنبيه",
+      title: "عنوان"
+    },
+    selector: {
+      text: "محدد"
+    },
+    alert: {
+      title: "نمط العنوان",
+      content: "هذا هو نوع من منبهات الأساسية...",
+      long: "هذا هو نوع من منبهات الأساسية...",
+      confirm: "أكّد",
+      cancel: "ألغى",
+      delete: "حذف"
+    },
+    noticebar: {
+      title: "القمر في الصباح الباكر ، قليلة هي لينة ، وسادة يهز بهدوء .",
+      content: "القمر في الصباح الباكر...",
+      button: "الأزرار",
+      state: "حذف"
+    },
+    steps: {
+      title: "محدد",
+      text: "نمط العنوان",
+      content: "القمر في الصباح الباكر..."
+    },
+    divider: {
+      text: "العنوان"
+    },
+    footnav: {
+      text: "العنوان"
+    },
+    list: {
+      title: "العنوان",
+      text: "القمر في الصباح الباكر..."
+    }
+  };
+