Form Components

# Address

Address extends from PopupPicker & Cell.

# Demo

<template>
  <div>
    <group>
      <address :title="title" :value.sync="value" :list="addressData" placeholder="Select address" inline-desc="Placeholder can be customized"></address>
      <cell title="Current value" :value="value | json"></cell>
      <address :title="title2" :value.sync="value2" raw-value :list="addressData"></address>
      <address title="Province/City" :value.sync="value3" raw-value :list="addressData"></address>
    </group>
    <br/>
    <x-button type="primary" @click="changeData">Change Data</x-button>
    <br/>
    <group>
      <address title="Province/City Only" :value.sync="value4" raw-value :list="addressData" hide-district></address>
    </group>
  </div>
</template>

<script>
import { Group, Address, AddressChinaData, XButton, Cell } from '../components';

export default {
  components: {
    Group,
    Address,
    XButton,
    Cell,
  },
  data () {
    return {
      title: 'Default empty',
      value: [],
      title2: 'Manual setting',
      value2: ['Guangdong', 'Shenzhen', 'Nanshan'],
      value3: ['Hainan', 'Danzhou', '--'],
      addressData: AddressChinaData,
      value4: [],
    };
  },
  methods: {
    changeData () {
      this.value2 = ['430000', '430400', '430407'];
    },
  },
};
</script>

# Props

Property	Description	Type	Default
hide-district	Whether to hide district selection	Boolean	-
inline-desc	Subtitle text	String	-
list	Address data, can be loaded asynchronously or stored locally as list.json	Array	-
placeholder	Placeholder text	String	-
raw-value	Whether to use literal Chinese values	Boolean	false
title	Title text	String	-
value	Form value, two-way binding	Array	[]

# Calendar

Calendar extends from InlineCalendar & Popup.

# Demo

<template>
  <div>
    <group title="default">
      <calendar :value.sync="demo1" title="Calendar" disable-past></calendar>
    </group>
  </div>
</template>

<script>
import { Group, Calendar } from '../components';

export default {
  components: {
    Calendar,
    Group,
  },
  data () {
    return {
      demo1: '',
    };
  },
};
</script>

# Props

Property	Description	Type	Default
title	Cell title	String	-

# Inline-Calendar

# Demo

<template>
    <div>
        <inline-calendar
            class="inline-calendar-demo"
            :show.sync="show"
            :value.sync="value"
            start-date="2016-04-01"
            end-date="2017-06-18"
            :range="range"
            :show-last-month="showLastMonth"
            :show-next-month="showNextMonth"
            :highlight-weekend="highlightWeekend"
            :return-six-rows="returnSixRows"
            :hide-header="hideHeader"
            :hide-week-list="hideWeekList"
            :replace-text-list="replaceTextList"
            :weeks-list="weeksList"
            :custom-slot-fn="buildSlotFn"
            :disable-past="disablePast">
        </inline-calendar>
    </div>
</template>

<script>
import InlineCalendar from '../components/inline-calendar';
module.exports = {
    components: {
        InlineCalendar,
    },
    data () {
        return {
            show: true,
            value: '',
            range: false,
            showLastMonth: true,
            showNextMonth: true,
            highlightWeekend: false,
            returnSixRows: true,
            hideHeader: false,
            hideWeekList: false,
            replaceTextList: {},
            weeksList: [],
            buildSlotFn: () => '',
            disablePast: false,
        };
    },
};
</script>

<style lang="less" scoped>
.inline-calendar-demo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(5px);
}
</style>

# Props

Property	Description	Type	Default
hideWeek-list	Whether to hide week list	Boolean	false
replace-text-list	Custom text replacement for dates (e.g. {'TODAY': 'Today'})	Object	{ }
start-date	Start date in 'YYYY-MM-dd' format	String	-
show-last-month	Whether to show last month's dates	Boolean	true
show-next-month	Whether to show next month's dates	Boolean	true
highlight-weekend	Whether to highlight weekends	Boolean	false
return-six-rows	Whether to always render 6 rows	Boolean	true
hide-header	Whether to hide calendar header	Boolean	false
render-month	Only render specified month (e.g. [2016, 10])	Array	-
end-date	End date in 'YYYY-MM-dd' format	String	-
custom-slot-fn	Function to add custom HTML for specific dates	Function	-
render-on-value-change	Whether to re-render when date changes	Boolean	true
disable-past	Whether to disable past date selection	Boolean	false
value	Selected date (two-way binding)	String	-
weeks-list	Weekday labels starting from Sunday	Array	['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

# Cell

Must be used with Group component

# Demo

<template>
  <div>
    <group>
      <cell title="My Account" value="Protected"></cell>
    </group>
  </div>
</template>

<script>
import { Cell, Group } from '../components';

export default {
  components: {
    Group,
    Cell,
  },
};
</script>

# Props

Property	Description	Type	Default
title	Label text	String	-
value	Right-side text	String	-
inline-desc	Secondary label text	String	-
link	Link destination (supports absolute URLs and v-link config)	String or Object	-
is-link	Whether to show as link (shows arrow when true)	Boolean	false
primary	Sets weui_cell_primary class ('title' or 'content')	String	title

# Slots

Name	Description
default	Value area
icon	Area before title for icons
after-title	After title area
value	Value area (same as default, deprecated)

# Checker

Used with CheckerItem component

# Demo

<template>
  <div>
    <checker :value.sync="demo1" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
      <checker-item value="1">1</checker-item>
      <checker-item value="2">2</checker-item>
      <checker-item value="3">3</checker-item>
    </checker>
  </div>
</template>

<script>
import { Checker, CheckerItem } from '../components';

export default {
  components: {
    Checker,
    CheckerItem,
  },
  data () {
    return {
      demo1: '',
    };
  },
};
</script>

<style scoped>
.demo1-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.demo1-item-selected {
  border: 1px solid green;
}
</style>

# Props

Property	Description	Type	Default
default-item-class	Default item class	String	-
disabled-item-class	Disabled item class	String	-
selected-item-class	Selected item class	String	-
value	Selected value (two-way binding)	String or Number	-

# Slots

Name	Description
default	Check item area

# Checklist

# Demo

<template>
  <div>
    <checklist title="default checklist" :options="commonList" :value.sync="checkedValueList" @on-change="change"></checklist>
  </div>
</template>

<script>
import { Group, Checklist } from '../components';

export default {
  components: {
    Group,
    Checklist,
  },
  data () {
    return {
      commonList: ['China', 'Japan', 'America'],
      checkedValueList: [],
    };
  },
  methods: {
    change (val) {
      console.log('change', val);
    },
  },
};
</script>

# Props

Property	Description	Type	Default
max	Maximum selected items	Number	-
min	Minimum selected items	Number	-
options	Option list	Array	-
random-order	Whether to randomize order	Boolean	false
required	Whether selection is required	Boolean	true
title	Title text	String	-
value	Selected values	Array	-

When required=false, min setting becomes invalid (minimum becomes 0)

# Datetime

Must be used with Group component

# Demo

<template>
  <div>
    <group title="default format: YYYY-MM-DD">
      <datetime :value.sync="value1" @on-change="change" title="Birthday"></datetime>
    </group>
  </div>
</template>

<script>
import { Datetime, Group } from '../components';

export default {
  components: {
    Datetime,
    Group,
  },
  data () {
    return {
      value1: '2016-02-11',
    };
  },
  methods: {
    change (val) {
      console.log('change', val);
    },
  },
};
</script>

# Props

Property	Description	Type	Default
inline-desc	Subtitle text	String	-
value	Date value	String	Current date
hour-row	Hour display format	String	{value}
cancel-text	Cancel button text	String	cancel
confirm-text	Confirm button text	String	ok
format	Display format	String	'YYYY-MM-DD'
day-row	Day display format	String	{value}
placeholder	Hint text	String	-
min-year	Minimum selectable year	Number	-
max-year	Maximum selectable year	Number	-
month-row	Month display format	String	{value}
minute-row	Minute display format	String	{value}
title	Title text	String	-
year-row	Year display format	String	{value}

# Radio

Must be used with Group component

# Demo

<template>
  <div>
    <group title="fill mode with custom placeholder and label">
      <radio fill-mode fill-label="Other" fill-placeholder="Enter other value" :options="radioValueList" @on-change="change"></radio>
    </group>
  </div>
</template>

<script>
import { Radio, Group } from '../components';

export default {
  components: {
    Radio,
    Group,
  },
  data () {
    return {
      radioValueList: ['China', 'Japan'],
    };
  },
  methods: {
    change (val) {
      console.log('change', val);
    },
  },
};
</script>

# Props

Property	Description	Type	Default
fill-placeholder	Custom input placeholder	String	-
fill-mode	Whether to enable custom input field	Boolean	false
fill-label	Custom input label	String	-
options	Option list (supports simple array or key-value pairs)	Array	-
value	Form value (required, two-way binding)	String	-

# Events

Event	Params	Description
on-change	value	Value change trigger

# Range

# Demo

<template>
  <div>
    <group title="default range">
      <cell title="Default" :inline-desc="'value: '+data1" primary="content">
        <range slot="value" :value.sync="data1"></range>
      </cell>
      <cell title="allow decimals" :inline-desc="'value is: '+data2" primary="content">
        <range slot="value" :value.sync="data2" decimal></range>
      </cell>
      <cell title="value=20" :inline-desc="'value is: '+data3" primary="content">
        <range slot="value" :value.sync="data3"></range>
      </cell>
    </group>
  </div>
</template>

<script>
import { Range, Group, Cell } from '../components';

export default {
  components: {
    Range,
    Group,
    Cell,
  },
  data () {
    return {
      data1: 0,
      data2: 0,
      data3: 20,
    };
  },
};
</script>

# Props

Property	Description	Type	Default
step	Slider step	Number	0
decimal	Whether to support decimals	Boolean	false
disabled	Whether disabled	Boolean	false
disabled-opacity	Disabled state opacity	Number	0.75
min	Minimum value	Number	0
max	Maximum value	Number	100
min-HTML	Custom minimum content	String	-
max-HTML	Custom maximum content	String	-
range-bar-height	Range bar height	Number	1
range-handle-height	Handle position	Number	30
value	Current value	Number	0

# Rater

# Demo

<template>
    <div>
        <group title="Normal Usage">
            <cell title="set default score = 5" inline-desc="total 5 stars if not specified">
                <rater :value.sync="data" slot="value"></rater>
            </cell>
            <cell title="change color">
                <rater :value.sync="data" slot="value" :max="6" active-color="#04BE02"></rater>
            </cell>
        </group>
    </div>
</template>

<script>
import { Rater, Group, Cell } from '../components';

export default {
  components: {
    Rater,
    Group,
    Cell,
  },
  data () {
    return {
      data: 5,
    };
  },
};
</script>

# Props

Property	Description	Type	Default
disabled	Whether disabled	Boolean	false
active-color	Active color	String	#FFAC38
font-size	Icon size	Number	25
margin	Icon spacing	Number	2
max	Maximum rating	Number	5
star	Rating icon	String	★
value	Rating value (two-way binding)	Number	0

# Selector

Must be used with Group component

# Demo

<template>
    <div>
        <group title="with placeholder">
            <selector placeholder="Select province" title="Province" :options="list" @on-change="onChange"></selector>
        </group>
        <group title="set value=Beijing">
            <selector :value.sync="value1" title="Province" :options="plainList" @on-change="onChange"></selector>
        </group>
    </div>
</template>

<script>
import { Selector, Group } from '../components';

export default {
  components: {
    Selector,
    Group,
  },
  data () {
    return

← Basic Modal→