framework7-vue 7.1.5 → 8.0.0-beta.2

package/components/list-item.js

@@ -6,7 +6,6 @@ import { useSmartSelect } from '../shared/use-smart-select.js';
 import { useTooltip } from '../shared/use-tooltip.js';
 import { f7ready, f7 } from '../shared/f7.js';
 import f7Badge from './badge.js';
-
 const ListItemContent = function (_temp) {
   let {
     props,
@@ -53,8 +52,9 @@ const ListItemContent = function (_temp) {
   let inputEl;
   let inputIconEl;
   let headerEl;
-  let footerEl; // Input
+  let footerEl;
 
+  // Input
   if (radio || checkbox) {
     inputEl = h('input', {
       ref: inputElRef,
@@ -70,70 +70,58 @@ const ListItemContent = function (_temp) {
     inputIconEl = h('i', {
       class: `icon icon-${radio ? 'radio' : 'checkbox'}`
     });
-  } // Media
-
-
+  }
+  // Media
   if (media || slots.media) {
     let mediaImgEl;
-
     if (media) {
       mediaImgEl = h('img', {
         src: media
       });
     }
-
     mediaEl = h('div', {
       class: 'item-media'
     }, [mediaImgEl, slots.media && slots.media()]);
-  } // Inner Elements
-
-
+  }
+  // Inner Elements
   if (header || slots.header) {
     headerEl = h('div', {
       class: 'item-header'
     }, [header, slots.header && slots.header()]);
   }
-
   if (footer || slots.footer) {
     footerEl = h('div', {
       class: 'item-footer'
     }, [footer, slots.footer && slots.footer()]);
   }
-
   if (title || slots.title || !isMediaComputed.value && headerEl || !isMediaComputed.value && footerEl) {
     titleEl = h('div', {
       class: 'item-title'
     }, [!isMediaComputed.value && headerEl, title, slots.title && slots.title(), !isMediaComputed.value && footerEl]);
   }
-
   if (subtitle || slots.subtitle) {
     subtitleEl = h('div', {
       class: 'item-subtitle'
     }, [subtitle, slots.subtitle && slots.subtitle()]);
   }
-
   if (text || slots.text) {
     textEl = h('div', {
       class: 'item-text'
     }, [text, slots.text && slots.text()]);
   }
-
   if (after || badge || slots.after) {
     if (after) {
       afterEl = h('span', [after]);
     }
-
     if (badge) {
       badgeEl = h(f7Badge, {
         color: badgeColor
       }, () => badge);
     }
-
     afterWrapEl = h('div', {
       class: 'item-after'
     }, [slots['after-start'] && slots['after-start'](), afterEl, badgeEl, slots.after && slots.after(), slots['after-end'] && slots['after-end']()]);
   }
-
   if (isMediaComputed.value) {
     titleRowEl = h('div', {
       class: 'item-title-row'
@@ -146,7 +134,6 @@ const ListItemContent = function (_temp) {
       class: 'item-inner'
     }, [slots['inner-start'] && slots['inner-start'](), slots['before-title'] && slots['before-title'](), titleEl, slots['after-title'] && slots['after-title'](), afterWrapEl, swipeout || accordionItem ? null : slots.default && slots.default(), slots.inner && slots.inner(), slots['inner-end'] && slots['inner-end']()]);
   }
-
   const ItemContentTag = checkbox || radio ? 'label' : 'div';
   return h(ItemContentTag, {
     class: itemContentClasses.value,
@@ -155,7 +142,6 @@ const ListItemContent = function (_temp) {
     class: 'sortable-handler'
   }), slots['content-start'] && slots['content-start'](), inputEl, inputIconEl, mediaEl, innerEl, slots.content && slots.content(), slots['content-end'] && slots['content-end']()]);
 };
-
 export default {
   name: 'f7-list-item',
   props: {
@@ -179,7 +165,6 @@ export default {
     badgeColor: String,
     mediaItem: Boolean,
     mediaList: Boolean,
-    divider: Boolean,
     groupTitle: Boolean,
     swipeout: Boolean,
     swipeoutOpened: Boolean,
@@ -203,6 +188,7 @@ export default {
     checkbox: Boolean,
     radio: Boolean,
     radioIcon: String,
+    checkboxIcon: String,
     checked: Boolean,
     indeterminate: Boolean,
     name: String,
@@ -219,7 +205,6 @@ export default {
     ...routerProps
   },
   emits: ['click', 'swipeout', 'swipeout:overswipeenter', 'swipeout:overswipeexit', 'swipeout:deleted', 'swipeout:delete', 'swipeout:close', 'swipeout:closed', 'swipeout:open', 'swipeout:opened', 'accordion:beforeclose', 'accordion:close', 'accordion:closed', 'accordion:beforeopen', 'accordion:open', 'accordion:opened', 'change', 'update:checked'],
-
   setup(props, _ref) {
     let {
       slots,
@@ -240,99 +225,80 @@ export default {
     const elRef = ref(null);
     const linkElRef = ref(null);
     const inputElRef = ref(null);
-
     const onClick = event => {
       if (event.target.tagName.toLowerCase() !== 'input') {
         emit('click', event);
       }
     };
-
     const onSwipeoutOverswipeEnter = el => {
       if (elRef.value !== el) return;
       emit('swipeout:overswipeenter');
     };
-
     const onSwipeoutOverswipeExit = el => {
       if (elRef.value !== el) return;
       emit('swipeout:overswipeexit');
     };
-
     const onSwipeoutDeleted = el => {
       if (elRef.value !== el) return;
       emit('swipeout:deleted');
     };
-
     const onSwipeoutDelete = el => {
       if (elRef.value !== el) return;
       emit('swipeout:delete');
     };
-
     const onSwipeoutClose = el => {
       if (elRef.value !== el) return;
       emit('swipeout:close');
     };
-
     const onSwipeoutClosed = el => {
       if (elRef.value !== el) return;
       emit('swipeout:closed');
     };
-
     const onSwipeoutOpen = el => {
       if (elRef.value !== el) return;
       emit('swipeout:open');
     };
-
     const onSwipeoutOpened = el => {
       if (elRef.value !== el) return;
       emit('swipeout:opened');
     };
-
     const onSwipeout = (el, progress) => {
       if (elRef.value !== el) return;
       emit('swipeout', progress);
     };
-
     const onAccBeforeClose = (el, prevent) => {
       if (elRef.value !== el) return;
       emit('accordion:beforeclose', prevent);
     };
-
     const onAccClose = el => {
       if (elRef.value !== el) return;
       emit('accordion:close');
     };
-
     const onAccClosed = el => {
       if (elRef.value !== el) return;
       emit('accordion:closed');
     };
-
     const onAccBeforeOpen = (el, prevent) => {
       if (elRef.value !== el) return;
       emit('accordion:beforeopen', prevent);
     };
-
     const onAccOpen = el => {
       if (elRef.value !== el) return;
       emit('accordion:open');
     };
-
     const onAccOpened = el => {
       if (elRef.value !== el) return;
       emit('accordion:opened');
     };
-
     const onChange = event => {
       emit('change', event);
       emit('update:checked', event.target.checked);
     };
-
     useTooltip(elRef, props);
     useRouteProps(linkElRef, props);
     useSmartSelect(props, () => {}, () => elRef.value.querySelector('a.smart-select'));
     watch(() => props.swipeoutOpened, newValue => {
       if (!props.swipeout || !elRef.value || !f7) return;
-
       if (newValue) {
         f7.swipeout.open(elRef.value);
       } else {
@@ -352,7 +318,6 @@ export default {
           f7.on('swipeoutOverswipeExit', onSwipeoutOverswipeExit);
           f7.on('swipeout', onSwipeout);
         }
-
         if (props.accordionItem) {
           f7.on('accordionBeforeOpen', onAccBeforeOpen);
           f7.on('accordionOpen', onAccOpen);
@@ -361,12 +326,10 @@ export default {
           f7.on('accordionClose', onAccClose);
           f7.on('accordionClosed', onAccClosed);
         }
-
         if (props.swipeout && props.swipeoutOpened) {
           f7.swipeout.open(elRef.value);
         }
       });
-
       if (props.checkbox && inputElRef.value) {
         inputElRef.value.indeterminate = !!props.indeterminate;
       }
@@ -414,11 +377,12 @@ export default {
     const itemContentClasses = computed(() => classNames('item-content', {
       'item-checkbox': props.checkbox,
       'item-radio': props.radio,
+      'item-checkbox-icon-start': props.checkbox && props.checkboxIcon === 'start',
+      'item-checkbox-icon-end': props.checkbox && props.checkboxIcon === 'end',
       'item-radio-icon-start': props.radio && props.radioIcon === 'start',
       'item-radio-icon-end': props.radio && props.radioIcon === 'end'
     }, colorClasses(props)));
     const liClasses = computed(() => classNames({
-      'item-divider': props.divider,
       'list-group-title': props.groupTitle,
       'media-item': isMediaComputed.value,
       swipeout: props.swipeout,
@@ -432,7 +396,6 @@ export default {
     return () => {
       let linkEl;
       let itemContentEl;
-
       if (!listIsSimple.value) {
         // Item Content
         itemContentEl = ListItemContent({
@@ -445,8 +408,9 @@ export default {
           isSortableComputed,
           isSortableOppositeComputed,
           itemContentClasses
-        }); // Link
+        });
 
+        // Link
         if (props.link || props.href || props.accordionItem || props.smartSelect) {
           linkEl = h('a', {
             ref: linkElRef,
@@ -456,8 +420,7 @@ export default {
           }, [itemContentEl]);
         }
       }
-
-      if (props.divider || props.groupTitle) {
+      if (props.groupTitle) {
         return h('li', {
           ref: elRef,
           class: liClasses.value,
@@ -465,7 +428,6 @@ export default {
           onClick
         }, [props.title, slots.default && slots.default()]);
       }
-
       if (listIsSimple.value) {
         return h('li', {
           ref: elRef,
@@ -474,7 +436,6 @@ export default {
           'data-virtual-list-index': props.virtualListIndex
         }, [props.title, slots.default && slots.default()]);
       }
-
       const linkItemEl = props.link || props.href || props.smartSelect || props.accordionItem ? linkEl : itemContentEl;
       return h('li', {
         ref: elRef,
@@ -487,5 +448,4 @@ export default {
       }), (props.swipeout || props.accordionItem) && slots.default(), slots.root && slots.root(), slots['root-end'] && slots['root-end']()]);
     };
   }
-
 };

package/components/list.d.ts

@@ -9,99 +9,151 @@ declare const List: DefineComponent<
       type: BooleanConstructor;
     },
 
+    insetIos: {
+      type: BooleanConstructor;
+    },
+
+    insetMd: {
+      type: BooleanConstructor;
+    },
+
     xsmallInset: {
       type: BooleanConstructor;
     },
 
+    xsmallInsetIos: {
+      type: BooleanConstructor;
+    },
+
+    xsmallInsetMd: {
+      type: BooleanConstructor;
+    },
+
     smallInset: {
       type: BooleanConstructor;
     },
 
+    smallInsetIos: {
+      type: BooleanConstructor;
+    },
+
+    smallInsetMd: {
+      type: BooleanConstructor;
+    },
+
     mediumInset: {
       type: BooleanConstructor;
     },
 
+    mediumInsetIos: {
+      type: BooleanConstructor;
+    },
+
+    mediumInsetMd: {
+      type: BooleanConstructor;
+    },
+
     largeInset: {
       type: BooleanConstructor;
     },
 
+    largeInsetIos: {
+      type: BooleanConstructor;
+    },
+
+    largeInsetMd: {
+      type: BooleanConstructor;
+    },
+
     xlargeInset: {
       type: BooleanConstructor;
     },
 
-    mediaList: {
+    xlargeInsetIos: {
       type: BooleanConstructor;
     },
 
-    sortable: {
+    xlargeInsetMd: {
       type: BooleanConstructor;
     },
 
-    sortableTapHold: {
+    strong: {
       type: BooleanConstructor;
     },
 
-    sortableEnabled: {
+    strongIos: {
       type: BooleanConstructor;
     },
 
-    sortableOpposite: {
+    strongMd: {
       type: BooleanConstructor;
     },
 
-    accordionList: {
+    outline: {
       type: BooleanConstructor;
     },
 
-    accordionOpposite: {
+    outlineIos: {
       type: BooleanConstructor;
     },
 
-    contactsList: {
+    outlineMd: {
       type: BooleanConstructor;
     },
 
-    simpleList: {
+    dividers: {
       type: BooleanConstructor;
     },
 
-    linksList: {
+    dividersIos: {
       type: BooleanConstructor;
     },
 
-    menuList: {
+    dividersMd: {
+      type: BooleanConstructor;
+    },
+
+    mediaList: {
+      type: BooleanConstructor;
+    },
+
+    sortable: {
+      type: BooleanConstructor;
+    },
+
+    sortableTapHold: {
       type: BooleanConstructor;
     },
 
-    noHairlines: {
+    sortableEnabled: {
       type: BooleanConstructor;
     },
 
-    noHairlinesBetween: {
+    sortableOpposite: {
       type: BooleanConstructor;
     },
 
-    noHairlinesMd: {
+    accordionList: {
       type: BooleanConstructor;
     },
 
-    noHairlinesBetweenMd: {
+    accordionOpposite: {
       type: BooleanConstructor;
     },
 
-    noHairlinesIos: {
+    contactsList: {
       type: BooleanConstructor;
     },
 
-    noHairlinesBetweenIos: {
+    simpleList: {
       type: BooleanConstructor;
     },
 
-    noHairlinesAurora: {
+    linksList: {
       type: BooleanConstructor;
     },
 
-    noHairlinesBetweenAurora: {
+    menuList: {
       type: BooleanConstructor;
     },
 
@@ -129,10 +181,6 @@ declare const List: DefineComponent<
       type: BooleanConstructor;
     },
 
-    inlineLabels: {
-      type: BooleanConstructor;
-    },
-
     virtualList: {
       type: BooleanConstructor;
     },

package/components/list.js

@@ -7,11 +7,32 @@ export default {
   name: 'f7-list',
   props: {
     inset: Boolean,
+    insetIos: Boolean,
+    insetMd: Boolean,
     xsmallInset: Boolean,
+    xsmallInsetIos: Boolean,
+    xsmallInsetMd: Boolean,
     smallInset: Boolean,
+    smallInsetIos: Boolean,
+    smallInsetMd: Boolean,
     mediumInset: Boolean,
+    mediumInsetIos: Boolean,
+    mediumInsetMd: Boolean,
     largeInset: Boolean,
+    largeInsetIos: Boolean,
+    largeInsetMd: Boolean,
     xlargeInset: Boolean,
+    xlargeInsetIos: Boolean,
+    xlargeInsetMd: Boolean,
+    strong: Boolean,
+    strongIos: Boolean,
+    strongMd: Boolean,
+    outline: Boolean,
+    outlineIos: Boolean,
+    outlineMd: Boolean,
+    dividers: Boolean,
+    dividersIos: Boolean,
+    dividersMd: Boolean,
     mediaList: Boolean,
     sortable: Boolean,
     sortableTapHold: Boolean,
@@ -27,14 +48,6 @@ export default {
     simpleList: Boolean,
     linksList: Boolean,
     menuList: Boolean,
-    noHairlines: Boolean,
-    noHairlinesBetween: Boolean,
-    noHairlinesMd: Boolean,
-    noHairlinesBetweenMd: Boolean,
-    noHairlinesIos: Boolean,
-    noHairlinesBetweenIos: Boolean,
-    noHairlinesAurora: Boolean,
-    noHairlinesBetweenAurora: Boolean,
     // Links Chevron (Arrow) Icon
     noChevron: Boolean,
     chevronCenter: Boolean,
@@ -44,14 +57,12 @@ export default {
     // Form
     form: Boolean,
     formStoreData: Boolean,
-    inlineLabels: Boolean,
     // Virtual List
     virtualList: Boolean,
     virtualListParams: Object,
     ...colorProps
   },
   emits: ['submit', 'sortable:enable', 'sortable:disable', 'sortable:sort', 'sortable:move', 'virtual:itembeforeinsert', 'virtual:beforeclear', 'virtual:itemsbeforeinsert', 'virtual:itemsafterinsert', 'tab:hide', 'tab:show'],
-
   setup(props, _ref) {
     let {
       emit,
@@ -59,31 +70,25 @@ export default {
     } = _ref;
     let f7VirtualList = null;
     const elRef = ref(null);
-
     const onSubmit = event => {
       emit('submit', event);
     };
-
     const onSortableEnable = el => {
       if (elRef.value !== el) return;
       emit('sortable:enable');
     };
-
     const onSortableDisable = el => {
       if (elRef.value !== el) return;
       emit('sortable:disable');
     };
-
     const onSortableSort = (el, sortData, listEl) => {
       if (elRef.value !== listEl) return;
       emit('sortable:sort', sortData);
     };
-
     const onSortableMove = (el, listEl) => {
       if (elRef.value !== listEl) return;
       emit('sortable:move', el, listEl);
     };
-
     useTab(elRef, emit);
     onMounted(() => {
       f7ready(() => {
@@ -102,22 +107,18 @@ export default {
               const vl = this;
               emit('virtual:itembeforeinsert', vl, itemEl, item);
             },
-
             beforeClear(fragment) {
               const vl = this;
               emit('virtual:beforeclear', vl, fragment);
             },
-
             itemsBeforeInsert(fragment) {
               const vl = this;
               emit('virtual:itemsbeforeinsert', vl, fragment);
             },
-
             itemsAfterInsert(fragment) {
               const vl = this;
               emit('virtual:itemsafterinsert', vl, fragment);
             }
-
           }
         }, vlParams));
       });
@@ -134,11 +135,32 @@ export default {
     });
     const classes = computed(() => classNames('list', {
       inset: props.inset,
+      'inset-ios': props.insetIos,
+      'inset-md': props.insetMd,
       'xsmall-inset': props.xsmallInset,
+      'xsmall-inset-ios': props.xsmallInsetIos,
+      'xsmall-inset-md': props.xsmallInsetMd,
       'small-inset': props.smallInset,
+      'small-inset-ios': props.smallInsetIos,
+      'small-inset-md': props.smallInsetMd,
       'medium-inset': props.mediumInset,
+      'medium-inset-ios': props.mediumInsetIos,
+      'medium-inset-md': props.mediumInsetMd,
       'large-inset': props.largeInset,
+      'large-inset-ios': props.largeInsetIos,
+      'large-inset-md': props.largeInsetMd,
       'xlarge-inset': props.xlargeInset,
+      'xlarge-inset-ios': props.xlargeInsetIos,
+      'xlarge-inset-md': props.xlargeInsetMd,
+      'list-strong': props.strong,
+      'list-strong-ios': props.strongIos,
+      'list-strong-md': props.strongMd,
+      'list-outline': props.outline,
+      'list-outline-ios': props.outlineIos,
+      'list-outline-md': props.outlineMd,
+      'list-dividers': props.dividers,
+      'list-dividers-ios': props.dividersIos,
+      'list-dividers-md': props.dividersMd,
       'media-list': props.mediaList,
       'simple-list': props.simpleList,
       'links-list': props.linksList,
@@ -153,16 +175,7 @@ export default {
       'virtual-list': props.virtualList,
       tab: props.tab,
       'tab-active': props.tabActive,
-      'no-hairlines': props.noHairlines,
-      'no-hairlines-md': props.noHairlinesMd,
-      'no-hairlines-ios': props.noHairlinesIos,
-      'no-hairlines-aurora': props.noHairlinesAurora,
-      'no-hairlines-between': props.noHairlinesBetween,
-      'no-hairlines-between-md': props.noHairlinesBetweenMd,
-      'no-hairlines-between-ios': props.noHairlinesBetweenIos,
-      'no-hairlines-between-aurora': props.noHairlinesBetweenAurora,
       'form-store-data': props.formStoreData,
-      'inline-labels': props.inlineLabels,
       'no-chevron': props.noChevron,
       'chevron-center': props.chevronCenter
     }, colorClasses(props)));
@@ -183,12 +196,10 @@ export default {
       const rootChildrenAfterList = [];
       const ulChildren = slotsList || [];
       let wasUlChild = false;
-
       if (slotsDefault) {
         slotsDefault().forEach(vnode => {
           if (typeof vnode === 'undefined') return;
           const tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
-
           if (tag && typeof tag === 'symbol') {
             wasUlChild = true;
             ulChildren.push(vnode);
@@ -200,7 +211,6 @@ export default {
           }
         });
       }
-
       return h(ListTag.value, {
         ref: elRef,
         class: classes.value,
@@ -209,5 +219,4 @@ export default {
       }, [slots['before-list'] && slots['before-list'](), rootChildrenBeforeList, ulChildren.length > 0 && h('ul', ulChildren), slots['after-list'] && slots['after-list'](), rootChildrenAfterList]);
     };
   }
-
 };