feat(checkbox): allow to set checkbox icon position - start or end

framework7io · Feb 7, 2023 · db9d799 · db9d799
1 parent 25a9c8e
commit db9d799
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 11 deletions.
diff --git a/kitchen-sink/core/pages/checkbox.html b/kitchen-sink/core/pages/checkbox.html
@@ -25,7 +25,7 @@
       <div class="list list-strong-ios list-outline-ios list-dividers-ios">
         <ul>
           <li>
-            <label class="item-checkbox item-content">
+            <label class="item-checkbox item-checkbox-icon-start item-content">
               <input type="checkbox" name="demo-checkbox" value="Books" checked />
               <i class="icon icon-checkbox"></i>
               <div class="item-inner">
@@ -34,7 +34,7 @@
             </label>
           </li>
           <li>
-            <label class="item-checkbox item-content">
+            <label class="item-checkbox item-checkbox-icon-start item-content">
               <input type="checkbox" name="demo-checkbox" value="Movies" />
               <i class="icon icon-checkbox"></i>
               <div class="item-inner">
@@ -43,7 +43,7 @@
             </label>
           </li>
           <li>
-            <label class="item-checkbox item-content">
+            <label class="item-checkbox item-checkbox-icon-start item-content">
               <input type="checkbox" name="demo-checkbox" value="Food" />
               <i class="icon icon-checkbox"></i>
               <div class="item-inner">
@@ -52,7 +52,48 @@
             </label>
           </li>
           <li>
-            <label class="item-checkbox item-content">
+            <label class="item-checkbox item-checkbox-icon-start item-content">
+              <input type="checkbox" name="demo-checkbox" value="Drinks" />
+              <i class="icon icon-checkbox"></i>
+              <div class="item-inner">
+                <div class="item-title">Drinks</div>
+              </div>
+            </label>
+          </li>
+        </ul>
+      </div>
+
+      <div class="list list-strong-ios list-outline-ios list-dividers-ios">
+        <ul>
+          <li>
+            <label class="item-checkbox item-checkbox-icon-end item-content">
+              <input type="checkbox" name="demo-checkbox" value="Books" checked />
+              <i class="icon icon-checkbox"></i>
+              <div class="item-inner">
+                <div class="item-title">Books</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="item-checkbox item-checkbox-icon-end item-content">
+              <input type="checkbox" name="demo-checkbox" value="Movies" />
+              <i class="icon icon-checkbox"></i>
+              <div class="item-inner">
+                <div class="item-title">Movies</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="item-checkbox item-checkbox-icon-end item-content">
+              <input type="checkbox" name="demo-checkbox" value="Food" />
+              <i class="icon icon-checkbox"></i>
+              <div class="item-inner">
+                <div class="item-title">Food</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="item-checkbox item-checkbox-icon-end item-content">
               <input type="checkbox" name="demo-checkbox" value="Drinks" />
               <i class="icon icon-checkbox"></i>
               <div class="item-inner">
@@ -67,7 +108,7 @@
       <div class="list list-strong-ios list-outline-ios list-dividers-ios">
         <ul>
           <li>
-            <label class="item-checkbox item-content">
+            <label class="item-checkbox item-checkbox-icon-start item-content">
               <input type="checkbox" name="demo-checkbox" checked=${movies.length===2}
                 indeterminate=${movies.length===1} @change=${onMoviesChange} />
               <i class="icon icon-checkbox"></i>
@@ -77,7 +118,7 @@
             </label>
             <ul>
               <li>
-                <label class="item-checkbox item-content">
+                <label class="item-checkbox item-checkbox-icon-start item-content">
                   <input type="checkbox" name="demo-checkbox" value="Movie 1" checked=${movies.indexOf('Movie 1')>= 0}
                   @change=${onMovieChange}
                   />
@@ -88,7 +129,7 @@
                 </label>
               </li>
               <li>
-                <label class="item-checkbox item-content">
+                <label class="item-checkbox item-checkbox-icon-start item-content">
                   <input type="checkbox" name="demo-checkbox" value="Movie 2" checked=${movies.indexOf('Movie 2')>= 0}
                   @change=${onMovieChange}
                   />
@@ -107,7 +148,7 @@
       <div class="list list-strong-ios list-outline-ios list-dividers-ios media-list">
         <ul>
           <li>
-            <label class="item-checkbox item-content">
+            <label class="item-checkbox item-checkbox-icon-start item-content">
               <input type="checkbox" name="demo-media-checkbox" value="1" />
               <i class="icon icon-checkbox"></i>
               <div class="item-inner">
@@ -124,7 +165,7 @@
             </label>
           </li>
           <li>
-            <label class="item-checkbox item-content">
+            <label class="item-checkbox item-checkbox-icon-start item-content">
               <input type="checkbox" name="demo-media-checkbox" value="2" />
               <i class="icon icon-checkbox"></i>
               <div class="item-inner">
@@ -141,7 +182,7 @@
             </label>
           </li>
           <li>
-            <label class="item-checkbox item-content">
+            <label class="item-checkbox item-checkbox-icon-start item-content">
               <input type="checkbox" name="demo-media-checkbox" value="3" />
               <i class="icon icon-checkbox"></i>
               <div class="item-inner">
@@ -158,7 +199,7 @@
             </label>
           </li>
           <li>
-            <label class="item-checkbox item-content">
+            <label class="item-checkbox item-checkbox-icon-start item-content">
               <input type="checkbox" name="demo-media-checkbox" value="4" />
               <i class="icon icon-checkbox"></i>
               <div class="item-inner">

diff --git a/kitchen-sink/react/src/pages/checkbox.jsx b/kitchen-sink/react/src/pages/checkbox.jsx
@@ -40,6 +40,13 @@ export default () => {
         <ListItem checkbox title="Drinks" name="demo-checkbox" />
       </List>
 
+      <List strongIos outlineIos dividersIos>
+        <ListItem checkbox checkboxIcon="end" title="Books" name="demo-checkbox" defaultChecked />
+        <ListItem checkbox checkboxIcon="end" title="Movies" name="demo-checkbox" />
+        <ListItem checkbox checkboxIcon="end" title="Food" name="demo-checkbox" />
+        <ListItem checkbox checkboxIcon="end" title="Drinks" name="demo-checkbox" />
+      </List>
+
       <BlockTitle>Indeterminate State</BlockTitle>
       <List strongIos outlineIos dividersIos>
         <ListItem

diff --git a/kitchen-sink/svelte/src/pages/checkbox.svelte b/kitchen-sink/svelte/src/pages/checkbox.svelte
@@ -43,6 +43,13 @@
     <ListItem checkbox title="Drinks" name="demo-checkbox" />
   </List>
 
+  <List strongIos outlineIos dividersIos>
+    <ListItem checkbox checkboxIcon="end" title="Books" name="demo-checkbox" checked />
+    <ListItem checkbox checkboxIcon="end" title="Movies" name="demo-checkbox" />
+    <ListItem checkbox checkboxIcon="end" title="Food" name="demo-checkbox" />
+    <ListItem checkbox checkboxIcon="end" title="Drinks" name="demo-checkbox" />
+  </List>
+
   <BlockTitle>Indeterminate State</BlockTitle>
   <List strongIos outlineIos dividersIos>
     <ListItem

diff --git a/kitchen-sink/vue/src/pages/checkbox.vue b/kitchen-sink/vue/src/pages/checkbox.vue
@@ -19,6 +19,19 @@
       <f7-list-item checkbox title="Drinks" name="demo-checkbox"></f7-list-item>
     </f7-list>
 
+    <f7-list strong-ios outline-ios dividers-ios>
+      <f7-list-item
+        checkbox
+        checkbox-icon="end"
+        title="Books"
+        name="demo-checkbox"
+        checked
+      ></f7-list-item>
+      <f7-list-item checkbox checkbox-icon="end" title="Movies" name="demo-checkbox"></f7-list-item>
+      <f7-list-item checkbox checkbox-icon="end" title="Food" name="demo-checkbox"></f7-list-item>
+      <f7-list-item checkbox checkbox-icon="end" title="Drinks" name="demo-checkbox"></f7-list-item>
+    </f7-list>
+
     <f7-block-title>Indeterminate State</f7-block-title>
     <f7-list strong-ios outline-ios dividers-ios>
       <f7-list-item

diff --git a/src/core/components/checkbox/checkbox.less b/src/core/components/checkbox/checkbox.less
@@ -125,6 +125,28 @@ label.item-checkbox {
   }
 }
 
+label.item-checkbox.item-checkbox-icon-end {
+  .item-inner {
+    .ltr({
+      padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) + var(--f7-checkbox-size) + 16px);
+    });
+    .rtl({
+      padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) + var(--f7-checkbox-size) + 16px);
+    });
+  }
+  input[type='checkbox'] ~ .icon-checkbox {
+    position: absolute;
+    .ltr({
+      right: calc(var(--f7-safe-area-right) + 16px);
+      margin-right: 0;
+    });
+    .rtl({
+      left: calc(var(--f7-safe-area-left) + 16px);
+      margin-left: 0;
+    });
+  }
+}
+
 .if-ios-theme({
   @import './checkbox-ios.less';
 });

diff --git a/src/react/components/list-item-content.jsx b/src/react/components/list-item-content.jsx
@@ -25,6 +25,7 @@ const ListItemContent = (props) => {
     after,
     badge,
     badgeColor,
+    checkboxIcon,
     radioIcon,
     swipeout,
     sortable,
@@ -193,6 +194,8 @@ const ListItemContent = (props) => {
     {
       'item-checkbox': checkbox,
       'item-radio': radio,
+      'item-checkbox-icon-start': checkbox && checkboxIcon === 'start',
+      'item-checkbox-icon-end': checkbox && checkboxIcon === 'end',
       'item-radio-icon-start': radio && radioIcon === 'start',
       'item-radio-icon-end': radio && radioIcon === 'end',
     },

diff --git a/src/react/components/list-item.jsx b/src/react/components/list-item.jsx
@@ -56,6 +56,7 @@ import { SmartSelect } from 'framework7/types';
   noChevron? : boolean
   chevronCenter? : boolean
   checkbox? : boolean
+  checkboxIcon? : boolean
   radio? : boolean
   radioIcon? : string
   checked? : boolean
@@ -121,6 +122,7 @@ const ListItemContent = ({
     after,
     badge,
     badgeColor,
+    checkboxIcon,
     radioIcon,
     swipeout,
     sortable,

diff --git a/src/svelte/components/list-item.svelte b/src/svelte/components/list-item.svelte
@@ -65,6 +65,7 @@
 
   // Inputs
   export let checkbox = undefined;
+  export let checkboxIcon = undefined;
   export let radio = undefined;
   export let radioIcon = undefined;
   export let checked = undefined;
@@ -121,6 +122,8 @@
     {
       'item-checkbox': checkbox,
       'item-radio': radio,
+      'item-checkbox-icon-start': checkbox && checkboxIcon === 'start',
+      'item-checkbox-icon-end': checkbox && checkboxIcon === 'end',
       'item-radio-icon-start': radio && radioIcon === 'start',
       'item-radio-icon-end': radio && radioIcon === 'end',
     },

diff --git a/src/vue/components/list-item.vue b/src/vue/components/list-item.vue
@@ -236,6 +236,7 @@ export default {
     checkbox: Boolean,
     radio: Boolean,
     radioIcon: String,
+    checkboxIcon: String,
     checked: Boolean,
     indeterminate: Boolean,
     name: String,
@@ -478,6 +479,8 @@ export default {
         {
           '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',
         },