A Vue.js 2.0 UI Toolkit for Web

Overview

Fish-ui

npm package NPM downloads Join the chat at https://gitter.im/myliang/fish-ui

A Vue.js 2.0 UI Toolkit for Web.

Install

npm install less less-loader -S
npm install fish-ui -S

Quick Start

google font & font-awesome

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="https://fonts.proxy.ustclug.org/css?family=Lato:400,700,400italic,700italic&subset=latin"/>

Import all components

import Vue from 'vue'
import FishUI from 'fish-ui'

Vue.use(FishUI)

Manually import

import 'fish-ui/styles/button.less'
import Button from 'fish-ui/src/components/Button.vue'

Vue.component(Button.name, Button)

And if you start with vue-webpack-boilerplate by vue-cli

Demo

https://myliang.github.io/fish-ui/

Features

  • Equip with Vue.js, Moment, Vue-Router, ES6 & Babel 6
  • Cool with Webpack 2.0 & Vue Loader
  • Semantic CSS Components
  • Stylesheets in Less

Components

  • BackTop
  • Button
  • Buttons
  • Calendar
  • Card
  • Carousel
  • CarouselItem
  • Cascader
  • Checkbox
  • Checkboxes
  • Col
  • DatePicker
  • Dropdown
  • Field
  • Fields
  • Form
  • Input
  • InputNumber
  • Layout
  • Menu
  • Message
  • Modal
  • Option
  • Pagination
  • Radio
  • Radios
  • Row
  • Select
  • Steps
  • Step
  • Submenu
  • Table
  • TabPane
  • Tabs
  • Tag
  • Tags
  • TimePicker
  • Upload
  • Tree
  • Tree Select
  • Transfer
  • Divider
  • Image
  • Timeline

Browser Support

Modern browsers and Internet Explorer 9+(no test).

Thanks to

LICENSE

MIT

Comments
  • Modal margin-top option

    Modal margin-top option

    Hello. Option for margin-top in the modal window cmponent will be very useful. Something like: <fish-modal :top="5%"> or <fish-modal :top="20px">

    opened by Deprime 2
  • More detailed example for column cell renderer

    More detailed example for column cell renderer

    In the example given, it would be greatly helpful if more examples were given for

    render: (h, record, column) => h('a', '编辑')}],
    

    In particular, what is the type for h?

    An example where an actual hyperlink with URL or different component is rendered would be greatly helpful.

    The example was taken from https://myliang.github.io/fish-ui/#/components/table

    <template>
      <fish-table :columns="columns" :data="data"></fish-table>
    </template>
    <script>
      export default {
        name: 'demo-table-base',
        data () {
          return {
            columns: [{title: 'Name', key: 'name'},
              {title: 'age', key: 'age'},
              {title: 'Address', key: 'address'},
              {title: 'Operate',
                key: 'operate',
                render: (h, record, column) => h('a', '编辑')}],
            data: [
              {name: 'yanbin.hu', age: 32, address: 'haidi part 1, xihu, Hangzhou'},
              {name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
              {name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
              {name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'}
            ]
          }
        }
      }
    </script>
    
    opened by daniellowtw 2
  • Using component as custom renderer for table

    Using component as custom renderer for table

    I have 2 components: sidebar.vue

    <template>
    <div class="sidebar">
            <div class="logo" style="background: #e0f0fa;">DIV</div>
    </div>
    </template>
    
    <script>
        export default {
            name: 'sidebar',
    
        }
    </script>
    

    and people.vue

    <template>
    <div class="people">
        <sidebar></sidebar>
        <fish-table
                :columns="columns"
                :data="data"
                :pagination="page"
                :loading="data_loading"
                :expandedRowRender="rowRenderer"
                @change="changeHandler">
        </fish-table>
    </div>
    </template>
    
    <script>
    import Sidebar from './sidebar'
    export default {
        name: 'org-people',
        components: {Sidebar}, // saying that I want to use this component
        data: function () {
            return {
                page: {total: 0, current: 1, rows: 15},
                columns: [
                    {title: 'Membership ID', key: 'membership_id'},
                    {title: 'First name', key: 'first_name'},
                    {title: 'Last name', key: 'last_name'},
                    {title: 'Grade', key: 'grade'},
                ],
                data: [
                ],
                data_loading: true
            }
        },
        created (){
            this.changeHandler(this.page.current);
        },
        methods: {
            changeHandler (pagination, filters, sorter){
                let params = {
                    organization_id: this.$route.params.id,
                    page: pagination,
                    per: this.page.rows
                }
    
                this.data_loading = true
                this.$http.get('/api/uploaded_people/', {params: params}).then((res)=> {
                    this.data = res.body.object
                    this.data_loading = false
    
                    this.page.current = res.body.pagination.page
                    this.page.total = res.body.pagination.total
                    this.page.rows = res.body.pagination.per
                })
    
            },
            rowRenderer (h, record){
                debugger
                return h('sidebar', JSON.stringify(record)) // calling sidebar component
            }
        }
    }
    </script>
    

    When I open additional row renderer h('sidebar', JSON.stringify(record)) gives an error

    vue.runtime.esm.js:574 [Vue warn]: Unknown custom element: <sidebar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    
    found in
    
    ---> <ContentRender> at node_modules/fish-ui/src/components/ContentRender.vue
           <FishTableBody> at node_modules/fish-ui/src/components/TableBody.vue
             <FishTable> at node_modules/fish-ui/src/components/Table.vue
               <OrgPeople> at app/javascript/templates/people.vue
                 <OrganizationContent> at app/javascript/templates/organization_content.vue
                   <FishLayout> at node_modules/fish-ui/src/components/Layout.vue
                     <App> at app/javascript/app.vue
                       <Root>
    

    What am I doing wrong?

    opened by kritik 2
  • How to do an new theme ?

    How to do an new theme ?

    Very cool project. Simple but powerful and elegant.

    How to do an new theme ?

    You recomend some approach? Or only I have modify the ** fish-ui/src/styles/ ** files ?

    opened by jmptrader 2
  • Bump lodash from 4.17.4 to 4.17.15

    Bump lodash from 4.17.4 to 4.17.15

    Bumps lodash from 4.17.4 to 4.17.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump is-my-json-valid from 2.16.1 to 2.20.0

    Bump is-my-json-valid from 2.16.1 to 2.20.0

    Bumps is-my-json-valid from 2.16.1 to 2.20.0.

    Commits
    Maintainer changes

    This version was pushed to npm by linusu, a new releaser for is-my-json-valid since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Cannot be selected when the first day of the month is Sunday.

    Cannot be selected when the first day of the month is Sunday.

    Calendar.vue Componet line 196.

    -        let startDate = moment(momentDate).date(1) // 当月第一天
    
    +        let startDate = moment(momentDate).date(0) // 当月第一天
    
    opened by Akira-Tsuruta 1
  • Slot-based Tree node content rendering

    Slot-based Tree node content rendering

    Currently, we can only render static HTML as child content for FishTree nodes.

    This means that we can't nest Vue components (FishUI or otherwise) inside of a FishTree.

    This PR allows you to use a Vue <slot> to define the child node content instead of (or in addition to) onItemRender.

    Example:

    <fish-tree :data="data" :onItemRender="noop">
      <template slot-scope="item">
        <fish-button>{{ item.title }}</fish-button>
      </template>
    </fish-tree>
    
    opened by rchipka 1
  • table pagination doesn't uncheck checkboxes on new page

    table pagination doesn't uncheck checkboxes on new page

    On table I select several checkboxes, then I click to the new page on table. Same checkboxes are selected on new page. New elements are also selected but checkboxes should be unchecked

    opened by kritik 1
  • Can't resolve './https://fonts.proxy.ustclug.org/css?family=Lato:400,700,400italic,700italic&subset=latin'

    Can't resolve './https://fonts.proxy.ustclug.org/css?family=Lato:400,700,400italic,700italic&subset=latin'

    Hi I am a bit suffering

    mian.js import FishUI from 'fish-ui' Vue.use(FishUI) When using all the components, when importing as mentioned above, it becomes Cat`t resolve due to the style sheet of external URL of normalize.less line 1 existing in the source

    fish-ui/src/styles/normalize.less @import url('https://fonts.proxy.ustclug.org/css?family=Lato:400,700,400italic,700italic&subset=latin');

    opened by yoshitaka-motomura 1
  • Details in Manually import

    Details in Manually import

    I thought that the steps of Manually import miss some details.

    For example, I want to use Button component only, the working steps are:

    1. import 'fish-ui/styles/base.less' => import 'fish-ui/src/styles/base.less'
    2. Line 1 of button.less: @import './base.less'; is commented. I need to open it. (It's wired...is there any other consideration?)
    3. Vue needs to use this imported Button component by Vue.component(Button.name, Button), which is not mentioned
    opened by byteyang 1
  • Bump lodash from 4.17.4 to 4.17.21

    Bump lodash from 4.17.4 to 4.17.21

    Bumps lodash from 4.17.4 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Cascader组件有个BUG

    Cascader组件有个BUG

    https://github.com/myliang/fish-ui/blob/24864023a384db9cdbf2ddecc90bc97b820a5196/src/components/Cascader.vue#L98-L116
    当Cascader有初始值的时候不会显示, 因为parseSelectedItems函数的while循环里面使用了for ... in ..., for ... in ...返回的是索引, 修改成for ... of ... 之后就没有问题了👇

               for (let ele of os) { 
                 if (this.value[vIndex] === ele[0]) { 
                   ret.push(ele) 
                   os = this.itemChildren(ele) 
                   break 
                 } 
               } 
    
    opened by walirt 0
  • Menu click & routing

    Menu click & routing

    Hello. I am trying to use the menu component for routing in my app. How do I pass the path to go to the @click() method? There is no description of this functionality in the documentation

    opened by Deprime 1
  • Typo in README

    Typo in README

    Hi!

    There's a typo in the README's "Manually import" section:

    import 'fish-ui/styles/button.less'
    

    shoud be:

    import 'fish-ui/src/styles/button.less'
    
    opened by Vayel 0
  • serve failed with parceljs

    serve failed with parceljs

    run parcel serve index.html with instruction described in documentation applied, will produce:

    $ parcel serve index.html
    Server running at http://localhost:1234 
    × ...\node_modules\fish-ui\src\components\Calendar.vue: invalid expression: Invalid left-hand side in assignment in
    
        "\n      "+_s(index < modeIndex ? (index <= 1="" 2="" ?="" '-'="" :="" index="==" '="" <="4" ':'="" '')="" '')+"=\"\" template=\"\">\n    "
    
      Raw expression: {{index < modeIndex ? (index <= 1="" 2="" ?="" '-'="" :="" index="==" '="" <="4" ':'="" '')="" ''}}="" template="">
    

    i'll suppose it's closely linked with ParcelJS... it's a lightweight and zero-configuration required packaging tool, very suitable for small project. I do hope there's some workaround here...

    BTW parcel will install less and loaded it automatically, so install less and less-loader it's not needed in parcel case. but obviously the error is unrelated with these stuff, IMHO.

    opened by Ray-Eldath 0
  • Bump clean-css from 4.1.9 to 4.1.11

    Bump clean-css from 4.1.9 to 4.1.11

    Bumps clean-css from 4.1.9 to 4.1.11.

    Changelog

    Sourced from clean-css's changelog.

    4.1.11 / 2018-03-06

    • Backports fixes to ReDOS vulnerabilities in validator code.

    4.1.10 / 2018-03-05

    • Fixed issue #988 - edge case in dropping default animation-duration.
    • Fixed issue #989 - edge case in removing unused at rules.
    • Fixed issue #1001 - corrupted tokenizer state.
    • Fixed issue #1006 - edge case in handling invalid source maps.
    • Fixed issue #1008 - edge case in breaking up font shorthand.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
yuliang.liang
I'm a Full-stack Software Engineer. 穷则变,变则通,通则达 @wolf-js
yuliang.liang
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

Sunny Wang 1.5k Nov 26, 2022
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 750 Nov 22, 2022
VUE chinese-lunar date-picker component with festivals and solar terms

vue-jLunar-datePicker @JinWen Lunar-Date-Picker component, lightWeight, powerful, easy to use, with festival and solar terms. Online demo enjoy the de

null 56 Oct 11, 2022
FullCalendar Wrapper for vue

vue-fullcalendar Installation npm install --save vue-full-calendar Or for Vue 1.x users npm install --save [email protected] Installing the pl

Croud Tech 487 Nov 15, 2022
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Nathan Reyes 3.6k Nov 30, 2022
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022
easy datepicker of a vue 2.0 component

vue-datepicker-infinite easy datepicker of a vue 2.0 component install npm install vue2-datepicker-infinite --save how to use template: <transition

Chen Leepyng 16 Nov 24, 2022
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 486 Nov 21, 2022
Vue.js wrapper for TOAST UI Calendar

Vue TOAST UI Calendar A Vue.js wrapper for TOAST UI Calendar Installation npm install --save tui-calendar @lkmadushan/vue-tuicalendar Usage Example Tr

Kalpa Madushan Perera 129 Aug 13, 2022
Toast UI Calendar for Vue

TOAST UI Calendar for Vue This is Vue component wrapping TOAST UI Calendar. ?? Table of Contents Collect statistics on the use of open source Install

NHN 196 Nov 13, 2022
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

Manuk 422 Dec 2, 2022
A Vue JS full calendar, no dependency, no BS. :metal:

vue-cal A Vue JS full calendar, no dependency, no BS. ?? Installation npm i vue-cal Vue 3 npm i [email protected] Demo & Documentation antoniandre.github

Antoni 972 Nov 24, 2022
A full 12-Month view calendar made by vue.js.

English | 繁體中文 There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem. ?? 12

null 112 Nov 10, 2022
Simple and clean calendar written in Vue.js

Vuelendar Simple and clean calendar written in Vue.js. Check out full Vuelendar's documentation here. Features Select single date Select range of date

The Codest 76 Oct 5, 2022
Datepicker Component For Vue

Vue Datepicker Component A Datepicker Component For VueJs (https://edisdev.github.io/vue-datepicker-ui) Props <Calendar v-model="" :range

Hatice Edis 403 Nov 11, 2022
A lightweight collection of Vue components (including molecules and organisms) to manage dates easily

vue-date-tools VueJS Date Components based on the date-fns library Click Here to Try the Live Demo Best features: Lightweight and almost no dependenci

Antoine S 12 Nov 24, 2022
Full Calendar based on Vue.js

Vue Spring Calendar It's a Vue based component which provides the functionality of a full-calendar that shows daily events. Installation npm install v

Brahim 40 Jun 8, 2022