uiv-lib / uiv Goto Github PK

View Code? Open in Web Editor NEW

944.0 944.0 192.0 10.13 MB

Bootstrap 3 components implemented by Vue.js.

Home Page: https://uiv.wxsm.space

License: MIT License

JavaScript 79.95% Vue 20.05%

bootstrap ui vue vue3

uiv's People

Contributors

Stargazers

Watchers

Forkers

zhengjingchun aquariuslt nkdanfer a410202049 rubythonode zajca looknd tech-no-logical smiledy zhangmuzhi tlianglstyle kavalcante dontfreakout cluo adrianlungu leo9x frohikey mahan-f heromantor nickschot tyrbonit shimpark rofiuddin15 a526684540 pangyuliang jtisler tgies byteuser allenliang520 plumettaz ladykiller pixlo xiaohuilam sedyshev chasenli rohmad-st dimailn coldrock2008 franksoong ouzman jomofrodo johfermq menglidong my9074 godhelpjun ninthz dagnoferreira max13fr lgnap mbelletti pieterprovoost xu-you benyt 48355746 qizhou-tang westleo mavuio leehsueh hanqiufeng jeirasmus antoncom erichfro allpereira sanyamkamat artsasin lomonat joelxr yujiusihuanian zhiqinghuang xgq-git hongquandev llvdl sichorching nguyenvokim lovewitty zeng08 leimite sespindola sabbyjiang hicksben359 hhyserious deme18 zhanglc sznagymisu logispot sbauer coder-caicai viktortat dariaedicas yongfengf12 jamecook johnnaegle moisesads ausook joezheng3 tenwq tudorrotarus25 johnulist newbilitylv dennistw

uiv's Issues

Popover: when title is empty, should no title-node

Now:

Expect:

Auto-placement of popover when top of popover is cutoff

I am rendering some popovers with placement="right" inside of a modal, and in some cases, when the trigger is close to the top of the modal, the popover content goes off the viewport at the top.

Example:

I can play with the content inside of the popover to make the height smaller, but it's not really an ideal work around as the content is dynamic.

Is this an easy thing for autoplacement to account and take care of? I.e. if there isn't enough space in the viewport at the top for the whole height of the popover, it can change to a placement that does (e.g. bottom)?

Thanks for looking int it.

No CSS styling on components

Hi,
I'm using the latest version of uiv
"uiv": "^0.11.5"
but for some reason, it's not loading any CSS stylesheets. I'm importing it like so (in my ConfigPanel.vue component):

import * as uiv from 'uiv';
components: {
    Tabs: uiv.Tabs, Tab: uiv.Tab
}

The tabs work (I can switch between them), but they have no styling. Any suggestions?

Thanks

Feature request: Add custom size to modal

I would like to write

<modal size="my-size" ...>

and get

<div role="document" class="modal-dialog modal-my-size">... </div>

This can be done by changing Modal.vue:98 (not tetsted)
computed: { modalSizeClass () { return 'modal-' + this.size }

Which component

Modal

<body> No scrollable when opening
Make long modal can scroll to bottom
Provide a option to: Disable slidedown translation
When did open, focus on OK button
Esc key to close
Methods, Events: [show, hide with cancel, hide with OK]

Initial current month is incorrect when value from v-model is already set

OS, browser, uiv version

Windows 10
Chrome 60
uiv 0.11.9

Which component

DatePicker

Steps to reproduce the problem

Use datepicker inside a dropdown like in the docs
Set the v-model to a predefined value, ie

//...
<date-picker v-model="date"></date-picker>
//...
data: ()=({
    date: '2017-08-25'
})

Expected behavior

When opening the dropdown, expecting currentMonth to be set to 8 (august).

Actual behavior

currentMonth is set to current date's, which is 9 (september) ..as I type now.

I've checked the source code. It seems that currentMonth and currentYear is set when component is mounted. I see that there is a watch for the value. However, I suspect that the hook will not be called until data changes.

I could use computed to make use of reactive value

computed: {
   dateValue: {
      get() {
        let ts = this.dateParser(val)
        if (!isNaN(ts)) {
          let date = new Date(ts)
          if (date.getHours() !== 0) {
            date = new Date(ts + date.getTimezoneOffset() * 60 * 1000)
          }
          return date;
        }
        return this.now;
      }
      set() {
          if (this.limit && ((this.limit.from && date < this.limit.from) || (this.limit.to && date >= this.limit.to))) 
          {
            this.$emit('input', oldVal || '')
          } else {
            this.currentMonth = this.date.getMonth()
            this.currentYear = this.date.getFullYear()
          }
      }
   }
}

Event API design

present tense

name-style like native DOM event

alert
pagination
tabs

no prefix

custom event won't bubble

modal
pagination
popover
tooltip

emit event when value change

`change` event

carousel
pagination
tabs

better with semantic v-modal

should Alert close animation

like collapse

ADD `fr_FR` locale

Hi there,
I can translate the locales in french and send you the pull request...

Can't work on SSR application

Error document is not defined

Tested cause by style tags in vue file.

Changing contents of src/components

OS, browser, uiv version

0.11.8

Question

I've done some changes to the Modal.vue and some other components but they are not working on my page. I believe I have to rebuild the package with the changes or something similar but I am very new to this so not sure how to make it work. I would appreciate any help!

I am aware that if I make changes to them they will be overwritten once I update uiv but I plan to do some enhancements and when I see they are worthy I would make a pull request to add them to uiv.

Modal unexpected offset

Open modal
Zoom page
Open modal again, look the <body> right-side offset

Scroll bar width changed when zoom, so you should re-calculate scroll bar width changed when resize.

Resetting Typeahead

Perhaps I'm just using the component incorrectly, but I'm needing to reset the Typeahead component to a blank input, but when I clear/null/empty the model the component is bound to nothing changes. I'm binding with v-model on the <typeahead> element. The model updates correctly when I interact with the typeahead, but when I interact with the model directly the Typeahead component is unaffected. I would have expected this binding to be two-way, am I incorrect?

date picker events

Hi uiv.
You can enhancement "open and close" event enhancement on the date picker component

Body padding when modal is open

Hi there!

I'd like to contribute on this issue. Bootstrap adds a padding to the body when the modal is open. I currently have a working example on my own. I can submit a merge request for you to review and possibly merge.

Are you open to MRs?

Can't use special characters with typeahead

OS, browser, uiv version

Mac OS X 10.12.5, Chrome 60, uiv 0.11.6

Which component

Typeahead

Steps to reproduce the problem

Use a special character (*, ?) in the typeahead input

Expected behavior

Show strings that start with or contain the characters

Actual behavior

[Vue warn]: Error in render function: "SyntaxError: Invalid regular expression: /*/: Nothing to repeat"
found in
---> <Typeahead>

newbie seeking help CSS & Import { } from 'uiv'

I tried updating to v0.11.1 but CSS seems to still not work.

Appreciate advise on what I did wrong.

  <dropdown v-model="open">
      <button @click="open = !open" class="btn btn-default dropdown-toggle" type="button">
        <span>Dropdown</span>
        <span class="caret"></span>
      </button>
      <template slot="dropdown">
        <li><a role="button">Action</a></li>
        <li><a role="button">Another action</a></li>
        <li><a role="button">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a role="button">Separated link</a></li>
      </template>
    </dropdown>
  </div>

Datepicker: "weekStartsWith" Option missing

the datepicker supports i18n, which is fine,
but i'm missing an Option to define wether to start a Week on Sunday or Monday.

Popover & Tooltip

click trigger: click outside to close
hover trigger: keep show when hover on content
hover & focus trigger (auto trigger): use in same time [1]
event: fire a event after show/hide
auto position: always in viewport

[1]: fake code:

$(el).on('focus blur mousein mouseout', (event)=>{
  if $(el).matches(':focus, :hover')
    $(el.tooltip).show()
  else
    $(el.tooltip).hide()
})

DatePicker With Dropdown can`t work

I copy the code from official website,but it can`t dropdown the datepicker.
my code:

<template>  
  </div>
    <dropdown tag="div" class="form-group">
		  <div class="input-group">
		    <input class="form-control" type="text" v-model="date" readonly>
		    <div class="input-group-btn">
		      <button class="btn btn-default" type="button" data-role="trigger" >
		        <i class="glyphicon glyphicon-calendar"></i>
		      </button>
		    </div>
		  </div>
		  <ul slot="dropdown" class="dropdown-menu" >
		    <li>
		      <date-picker v-model="date"></date-picker>
		    </li>
		  </ul>
		</dropdown>
  </div>
</template>
<script>
import { Dropdown,Modal,DatePicker } from 'uiv'
export default {
  data () {
    return {
      date:'',
    }
  },
  created () {
  },
  methods: {
  },
  components:{
  	Dropdown,Modal,DatePicker,
  }
}
</script>

New component: navbar [feature request]

Invalid prop: type check failed for prop "backdrop". Expected Boolean, got String.

OS, browser, uiv version

Windows 10 64 bits / UIV: 0.11.10

Which component

Modal

Steps to reproduce the problem

<modal v-model="editing" size="lg" backdrop="false"></modal>

Expected behavior

Backdrop should be considered as boolean false

Actual behavior

Invalid prop: type check failed for prop "backdrop". Expected Boolean, got String.

I'm using UIV registering it all at once and then using it in my components directly in the markup as you can see in the "Step to reproduce the problem section".

Like this...

// Import and register all components once
import * as uiv from 'uiv'
Vue.use(uiv)

modal background is black

OS, browser, uiv version

windows 10, uiv V0.11.6

Which component

Modal

Steps to reproduce the problem

Expected behavior

background has opacity when modal is shown.

Actual behavior

background is solid black when modal is shown.

is ssr supported?

I'm using the library in nuxt and for now everything is fine :) but I want to know if the ssr is fully supported.
Thank you!

Focus issues when modal is open

Bootstrap limits the focus to the items within the modals (no matter how many times you press tab, you'll only focus items inside the modal). I'm not sure about the implementation, but I was going to add it to my own library.

I could make a MR for this.

Ability to change the contents in modal header

Can we have a slot for the modal header itself not just the title so that we can also change the x button.

I am using uiv modals with forms inside of them and I want to have the x be cancelled with Vue when the forms are saving.

This is what I am doing right now for the buttons in the footer and i'd like to do the same for the header.

<template slot="footer">
    <button type="button" class="btn btn-default" :disabled="isSaving" @click="discardEdit"><span>Cancel</span></button>
    <button type="button" data-action="auto-focus" class="btn btn-primary" :disabled="isSaving" @click="save"><span v-if="!isSaving">Save changes</span><i v-else="isSaving" class="fa fa-pulse fa-spinner" aria-hidden="true"></i></button>
</template>

I tried doing this myself to create a pull request but I was having issues getting it to work hence why i'm creating this issue.

Typeahead network

Fast focus, fast typed, fast blur (blur when requesting), then the menu will show after blur.

You should abort requesting after blur (it is nasty for Promise without cancelToken) ,
or don't do prepareItems when blur.

Tabs section class

OS, browser, uiv version

uiv 0.11.8

Which component

Tabs

Improvement

Could we add a class prop to the Tabs component on section? I have quite a few themes which define a class for the parent of ul (in this case section) and having the ability to define a custom class for it would be really helpful.

Thanks!

browser sample does now work in the browser

I have the following code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container container-fluid">
    <div class="row">
      <div class="col-sm-12">

        <tabs>
          <tab title="test">test content...</tab>
          <tab>...</tab>
        </tabs>
      </div>
    </div>
  </div>
  <script src="https://vuejs.org/js/vue.min.js"></script>
  <script src="https://unpkg.com/uiv/dist/uiv.min.js"></script>

<script>
  new Vue({
    components: {
      Tabs: uiv.Tabs, Tab: uiv.Tab
    }
  })
</script>
  <!-- <script src="./script.js"></script> -->

</body>

</html>

it's not working. Am I doing something wrong?

Datepicker not parsing correctly with some format

hi,

I've run into an issue with the format support in the datepicker. I want (or need) to use 'dd-mm-yyyy' as a format (used in some countries, notably the netherlands), but since this is not supported by js's Date.parse() call, this fails horribly.

I've been testing with adding moment.js to parse and format dates, and this seems to work fine so far. however, adding moment.js also allows the easy internationalization of the calendar, which conflicts with the efforts to add i18n to uiv.

is it a good idea to combine these efforts ?

Manual trigger

continue #10

Sometime I want to manually listen events, and control how component shown.
So uiv should provide a option to not listen events.

Dropdown
Popover
Tooltip

Should auto build & deploy to GitHub Pages & npm

https://docs.travis-ci.com/user/deployment/pages/
https://docs.travis-ci.com/user/deployment/npm/

And edit meta:

Custom Typeahead

sub-header & footer

show suggestions when empty

http://element.eleme.io/#/en-US/component/input#autocomplete

show history when empty, show autocomplete when typed

Is there any idea?

Should remind to {import uiv.min.css} in document

have some problem when just import { ... } from 'uiv',
until I import uiv/dist/uiv.min.css

Avoid trap.

Enhance the Auto Adjust Placement option

OS, browser, uiv version

macOS Sierra v10.12.6
Firefox, Mobile Safari
uiv v0.11.9

Which component

Popover

Steps to reproduce the problem

Visit the popover component page in the documentation with a small screen/width (320px)
Click on the button to toggle the "Dynamic Popover"

Expected behavior

I was expecting to see the entire popover content with the Auto Adjust Placement enabled.

Actual behavior

Part of the popover is hidden. This is due to the fact that only four placements options are supported: top, right, left, bottom.

Possible enhancement

Add support for additional placement options like on the Popover x plugin...

Top Left
Top Right
Bottom Left
Bottom Right
Right Top
Right Bottom
Left Top
Left Bottom

Use these new placement options automatically when Auto Adjust Placement is enabled.

Typeahead position

Provide a option to auto width as `input`

use min-width instead of width

Now:

Expext:

Proper position when in `navbar`

Demo code:

<nav class="navbar navbar-toolbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" @click="showNavbar=!showNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Brand</a>
    </div>
    <collapse class="navbar-collapse" v-model="showNavbar">
          
      <form class="navbar-form navbar-right">
        <div class="input-group">
          <typeahead v-model="model2"
                async-src="https://api.github.com/search/users?q="
                async-key="items"
                item-key="login">
            <input data-role="input" class="form-control" type="text" placeholder="Type to search...">
            <template slot="item" scope="props">
              <img width="22px" height="22px" :src=" props.item.avatar_url + '&s=40' ">
              <span v-text="props.item.login"></span>
            </template>
          </typeahead>
          <span class="input-group-btn">
            <button class="btn btn-default">
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
              <span class="sr-only">搜索</span>
            </button>
          </span>
        </div>
      </form>
          
    </collapse>
  </div>
</nav>

Now on mobile:

Now on desktop:

Modal backdrop child elements click issue

When an element that was conditionally rendered (using v-if, not v-show) is clicked, the modal is closed.

I think is because of this condition in Modal.vue:

    backdropClicked (event) {
        if (this.backdrop && !this.$refs.dialog.contains(event.target)) {
          this.toggle(false)
        }
      }

I have a fix for it, I can create a PR.

Consistent open/close/index/number

Set the `v-model: Boolean`, and component shows when it is `true`.

(http://element.eleme.io/#/en-US/component/dialog)

Use `v-model: Number` to identify the current index/number.

Carousel
Progress Bar
Tabs

(https://wxsm.space/uiv/#/pagination)

Don't use props, props can't two-way data flow, use v-modal instead.
(https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow)
(https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events)

And never use methods as API.
(https://vuejs.org/v2/guide/components.html#Authoring-Reusable-Components).

i18n support

on going

Tooltip & Popover: No parent-child element target

Think this:

<article>
  ...
  <span id="el"></span>
  ...
</article>

<tooltip target="#el" text="tooltip text"></tooltip>

Update:

<tooltip :target="document.querySelector('#el')" text="tooltip text"></tooltip>

Dropdown

How to add class dropdown-menu-right

DatePicker

when i use DatePicker component,i want to change the botton text , what should i do

Implement "pull-right" for Tabs

This is actually a feature-request. I hope it is possible to implement it, but I understand that a lot of work goes into making a great library and there might not be time to implement this.

OS, browser, uiv version

Windows 10, All browsers, uiv 0.11.6

Which component

Tab(s)

Steps to reproduce the problem

Try to create multiple tabs, and give one title class="pull-right" to try to make it appear at the right side of the Tabs.

<tab title='This title should appear on the right' class="pull-right">
        Test Content
</tab>

Expected behavior

The tab should appear on the right side of the tabs bar

Actual behavior

The tab appears on the left side of the babs bar and there is no way to make it appear on the right

Display Offset

It looks like the example at https://uiv.wxsm.space/date-picker offsets date displays. I get the same bug when using it within my own code.

In the example, I selected the 26th of May, 2 out of 3 displays are wrong when displaying it.

Document should have version specify

DatePicker demo highlights wrong day

When you click on a day on the inline datepicker demo the previous day is highlighted.

The input shows the correct date, but the alert below it shows the previous day as well.

DatePicker bound to object property does not update correctly

I'm using multiple datepickers in dropdowns bound to object properties like in this gist

https://gist.github.com/tech-no-logical/de701dcaf992a384725f06d905a5e7ea

when using it as such, the bound model (and visually the input) updates one event late, like so

select may 29th -> nothing happens
select may 30th -> updates to may 29th
select may 27th -> updates to may 30th

am I doing something wrong, or is this a bug ? I really need separate datepickers bound to dynamice properties...

Custom class for modals

Thanks for making such a simple, intuitive vue wrapper for bootstrap 3 components. I'd like to suggest considering customization with classes on components, in particular the modal.

Currently the slots under the hood seem to use bootstrap's markup classes for modal-header, modal-body, etc. This is definitely a good default for ease of use. However, if in cases I want to customize the styling inside the modal, I'm not able to do that. I think allowing insertion of a custom class would be the simplest method to allow this.

TimePicker can scroll / click the arrow to change number, when readonly [bug]

Should have looser ESlint rule

Trun Error to Warning

uiv-lib / uiv Goto Github PK

uiv's People

Contributors

Stargazers

Watchers

Forkers

uiv's Issues

Which component

OS, browser, uiv version

Which component

Steps to reproduce the problem

Expected behavior

Actual behavior

present tense

no prefix

emit event when value change

change event

OS, browser, uiv version

Question

OS, browser, uiv version

Which component

Steps to reproduce the problem

Expected behavior

Actual behavior

OS, browser, uiv version

Which component

Steps to reproduce the problem

Expected behavior

Actual behavior

OS, browser, uiv version

Which component

Steps to reproduce the problem

Expected behavior

Actual behavior

OS, browser, uiv version

Which component

Improvement

sub-header & footer

show suggestions when empty

show history when empty, show autocomplete when typed

OS, browser, uiv version

Which component

Steps to reproduce the problem

Expected behavior

Actual behavior

Possible enhancement

Provide a option to auto width as input

Proper position when in navbar

Set the v-model: Boolean, and component shows when it is true.

Use v-model: Number to identify the current index/number.

OS, browser, uiv version

Which component

Steps to reproduce the problem

Expected behavior

Actual behavior

Recommend Projects

Recommend Topics

Recommend Org

`change` event

Provide a option to auto width as `input`

Proper position when in `navbar`

Set the `v-model: Boolean`, and component shows when it is `true`.

Use `v-model: Number` to identify the current index/number.