UI

.gitignore

@@ -2,6 +2,7 @@
 
 .env
 build
+package-lock.json
 
 
 # compiled output

packages/hyper-ui/package.json

@@ -61,6 +61,7 @@
         "emoji-mart-vue": "^2.6.6",
         "howler": "^2.1.2",
         "moment": "^2.24.0",
+        "vue-awesome-swiper": "^3.1.3",
         "vue-multiselect": "^2.1.6",
         "vue-youtube": "^1.3.5"
     }

packages/hyper-ui/src/components/activity-block/index.vue

@@ -69,6 +69,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'ProgressBar': () => import('../progress-bar').then(m => m.ProgressBar)
     },
     props: {

packages/hyper-ui/src/components/add-friends/index.vue

@@ -142,6 +142,9 @@
 
 <script>
 export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button)
+    },
     props: {
         permission: {
             type: Boolean,

packages/hyper-ui/src/components/asset-importer/index.vue

@@ -261,6 +261,7 @@
 
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Loading-bar': () => import('../../').then(m => m.Loading-bar),
         'Button': () => import('../../').then(m => m.Button),
         'NotificationInline': () => import('../../').then(m => m.NotificationInline),

packages/hyper-ui/src/components/asset/list/list-item.vue

@@ -39,6 +39,9 @@
 <script>
 export default {
     name: 'AssetListItem',
+    components: {
+        'Button': () => import('../../').then(m => m.Button)
+    },
     props: {
         asset: {
             type: Object,

packages/hyper-ui/src/components/assets-explorer/index.vue

@@ -23,20 +23,20 @@
 
                 <div class="filter-block d-flex justify-content-between align-items-center margin-bottom-20">
                     <div class="d-inline-flex align-items-center">
-                        <Dropdown-menu
+                        <DropdownMenu
                             class="margin-right-10"
                             title="FILTER BY PRODUCTS">
                             <List
                                 :items="selectableProducts"
                                 @click="item => item.selected = !item.selected" />
-                        </Dropdown-menu>
-                        <Dropdown-menu
+                        </DropdownMenu>
+                        <DropdownMenu
                             class="margin-right-10"
                             title="FILTER BY GENRE">
                             <List
                                 :items="selectableGenres"
                                 @click="item => item.selected = !item.selected" />
-                        </Dropdown-menu>
+                        </DropdownMenu>
                         <InputSearcher
                             v-model="phrase"
                             class="assets-explorer__input-searcher" />
@@ -172,17 +172,17 @@
 </template>
 
 <script>
-
 export default {
     name: 'AssetsExplorer',
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'ContentNavigation': () => import('../../').then(m => m.ContentNavigation),
         'Block': () => import('../../').then(m => m.Block),
         'HeadingBarFields': () => import('../../').then(m => m.HeadingBarFields),
         'Dropdown': () => import('../../').then(m => m.Dropdown),
         'InputSearcher': () => import('../../').then(m => m.InputSearcher),
         'AssetsList': () => import('../../').then(m => m.AssetsList),
-        'Dropdown-menu': () => import('../../').then(m => m.Dropdown-menu),
+        'DropdownMenu': () => import('../../').then(m => m.DropdownMenu),
         'List': () => import('../../').then(m => m.List),
         'OptionTag': () => import('../../').then(m => m.OptionTag)
     },

packages/hyper-ui/src/components/benchmark/index.vue

@@ -53,6 +53,9 @@
 <script>
 export default {
     name: 'Benchmark',
+    components: {
+        'Button': () => import('../../').then(m => m.Button)
+    },
     props: {
         settings: Object
     },

packages/hyper-ui/src/components/broken-page/index.vue

@@ -42,6 +42,9 @@
 
 <script>
 export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+    },
     props: {
         isError: {
             type: Object,

packages/hyper-ui/src/components/browser-ui/index.vue

@@ -64,6 +64,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Dropdown': () => import('../../').then(m => m.Dropdown)
     },
     data() {

packages/hyper-ui/src/components/buttons/favorite.vue

@@ -33,6 +33,9 @@ export default {
             default: 'heart'
         }
     },
+    components:{
+        'Icon': () => import('../../').then(m => m.Icon),
+    },
     computed: {
         dynamicTitle() {
             const { target, active } = this

packages/hyper-ui/src/components/buttons/index.vue

@@ -37,6 +37,8 @@
 import { Howl } from 'howler'
 
 export default {
+    components: {
+    },
     props: {
         tag: {
             type: String,

packages/hyper-ui/src/components/chat-new/content/welcome.vue

@@ -4,7 +4,7 @@
             Welcome to ChanelName!
         </div>
         <div class="welcome-logo">
-            <img src="../../../static/img/logo.png">
+            <img src="/img/logo.png">
         </div>
         <div class="chat-group__welcome-action">
             <ul>

packages/hyper-ui/src/components/collection/list.vue

@@ -91,6 +91,7 @@ export default {
         position: relative;
         backdrop-filter: blur(2px);
         display: flex;
+        flex-direction: column;
     }
     .collection-list__header{
         display: flex;

packages/hyper-ui/src/components/community/comment-v2.vue

@@ -52,9 +52,11 @@ import VueEmojiReact from 'vue-emoji-react'
 
 export default {
     components: {
-        'Dropdown-menu': () => import('../../').then(m => m.Dropdown-menu),
-        'CommunityReply': () => import('../../').then(m => m.CommunityReply),
+        'DropdownMenu': () => import('../../').then(m => m.Dropdown4),
+        'CommunityReply': () => import('../../').then(m => m.ProductCommunityReply),
+        'Button': () => import('../../').then(m => m.Button),
         'ButtonArrows': () => import('../../').then(m => m.ButtonArrows),
+        'Img': () => import('../../').then(m => m.Img),
         'EmojiPicker': VueEmojiReact
     },
     props: {

packages/hyper-ui/src/components/community/comment.vue

@@ -16,7 +16,7 @@
             <div
                 class="comment-container"
                 :class="{ 'w-100' : !rate }">
-                <Dropdown-menu
+                <DropdownMenu
                     dropPosition="right"
                     style="right: 5px; top: 10px;" />
                 <div class="comment-content">
@@ -45,13 +45,13 @@
 </template>
 
 <script>
-import moment from 'moment'
 
 export default {
     name: 'Comment',
     components: {
-        'Dropdown-menu': () => import('../../').then(m => m.Dropdown-menu),
-        'CommunityReply': () => import('../../').then(m => m.CommunityReply),
+        'DropdownMenu': () => import('../../').then(m => m.DropdownPost),
+        'CommunityReply': () => import('../../').then(m => m.ProductCommunityReply),
+        'Img': () => import('../../').then(m => m.Img),
         'ButtonArrows': () => import('../../').then(m => m.ButtonArrows)
     },
     props: {

packages/hyper-ui/src/components/community/post-item.vue

@@ -75,11 +75,13 @@
 
 <script>
 import moment from 'moment'
+import a from './../../index'
 
 export default {
     components: {
-        'PostComment': import('../../').then(m => m.PostComment),
-        'CommunityReply': () => import('../../').then(m => m.CommunityReply)
+        'Img': () => import('./../../index').then(m => m.Img),
+        'PostComment': () => import('../../').then(m => m.ProductCommunityComment),
+        'CommunityReply': () => import('../../').then(m => m.ProductCommunityReply)
     },
     props: {
         id: {

packages/hyper-ui/src/components/contribute/form.vue

@@ -40,8 +40,14 @@ export default {
             type: Boolean,
             default: false
         },
-        value: Number,
-        defaultValue: Number,
+        value: {
+            type: [Number, String],
+            default: 0
+        },
+        defaultValue: {
+            type: [Number, String],
+            default: 0
+        },
         currency: String
     },
     data() {

packages/hyper-ui/src/components/contribute/pledge.vue

@@ -79,7 +79,7 @@ export default {
             default: '$'
         },
         minPrice: {
-            type: String,
+            type: [Number, String],
             default: null
         },
         title: {

packages/hyper-ui/src/components/contributor-box/index.vue

@@ -44,6 +44,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'ProgressBar': () => import('../../').then(m => m.ProgressBar),
         'Checkbox': () => import('../../').then(m => m.Checkbox)
     },

packages/hyper-ui/src/components/curator-review/index.vue

@@ -64,7 +64,8 @@ export default {
     components: {
         'Author': () => import('../../').then(m => m.Author),
         'RatingStars': () => import('../../').then(m => m.RatingStars),
-        'Button': () => import('../../').then(m => m.Button)
+        'Button': () => import('../../').then(m => m.Button),
+        'Img': () => import('../../').then(m => m.Img),
     },
     props: {
         review: {

packages/hyper-ui/src/components/curator-reviews/index.vue

@@ -21,42 +21,45 @@
 </template>
 
 <script>
-    export default {
-        components: {
-            'HeadingBar': () => import('../../').then(m => m.HeadingBar),
-            'CuratorReview': () => import('../../').then(m => m.CuratorReview)
+export default {
+    components: {
+        'Button': () => import('../../').then(m => m.Button),
+        'HeadingBar': () => import('../../').then(m => m.HeadingBar),
+        'CuratorReview': () => import('../../').then(m => m.CuratorReview),
+        'Swiper': () => import('../../').then(m => m.Swiper),
+        'SwiperSlide': () => import('../../').then(m => m.SwiperSlide),
+    },
+    props: {
+        reviews: {
+            type: Array,
+            require: true
         },
-        props: {
-            reviews: {
-                type: Array,
-                require: true
-            },
-            maxPerView: {
-                type: Number,
-                default: 3
-            }
-        },
-        data() {
-            return {
-                sliderOptions: {
-                    slidesPerView: this.maxPerView,
-                    spaceBetween: 15
-                }
-            }
-        },
-        computed: {
-            slider() {
-                return this.$refs.slider.swiper
+        maxPerView: {
+            type: Number,
+            default: 3
+        }
+    },
+    data() {
+        return {
+            sliderOptions: {
+                slidesPerView: this.maxPerView,
+                spaceBetween: 15
             }
-        },
-        methods: {
-            showArrowsState(el, count) {
-                if (el.length > count) {
-                    return true
-                }
-                return false
+        }
+    },
+    computed: {
+        slider() {
+            return this.$refs.slider.swiper
+        }
+    },
+    methods: {
+        showArrowsState(el, count) {
+            if (el.length > count) {
+                return true
             }
+            return false
         }
     }
+}
 </script>
 

packages/hyper-ui/src/components/download-block/index.vue

@@ -9,7 +9,7 @@
                     alt="Logo" />
                 <Img
                     v-if="showPreview"
-                    src="static/img/download-block-bg.png"
+                    src="/img/download-block-bg.png"
                     class="absolute_img"
                     alt="Logo" />
             </div>
@@ -74,6 +74,9 @@
 
 <script>
 export default {
+    components :{
+        'Button': () => import('../../').then(m => m.Button)
+    },
     props: {
         showPreview: {
             type: Boolean,

packages/hyper-ui/src/components/download-popup/index.vue

@@ -34,6 +34,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Popup': () => import('../../').then(m => m.Popup),
         'DownloadBlock': () => import('../../').then(m => m.DownloadBlock)
     },

packages/hyper-ui/src/components/draggable-video/index.vue

@@ -61,6 +61,7 @@
 <script>
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'Draggable': () => import('../../').then(m => m.Draggable)
     },
     props: {

packages/hyper-ui/src/components/emoji/index.vue

@@ -52,6 +52,7 @@ import { Picker, Emoji } from 'emoji-mart-vue'
 
 export default {
     components: {
+        'Button': () => import('../../').then(m => m.Button),
         'EmojiPicker': Picker,
         'Emoji': Emoji
     },