feat(block): support for -inset-[ios|md] classes + similar componen…

…ts props
framework7io · Sep 26, 2022 · 908ca12 · 908ca12
1 parent 0d328c7
commit 908ca12
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 24 deletions.
diff --git a/kitchen-sink/core/pages/home.html b/kitchen-sink/core/pages/home.html
@@ -45,7 +45,7 @@
           </li>
         </ul>
       </div>
-      <div class="block-title block-title-medium searchbar-found">Components</div>
+      <div class="block-title searchbar-found">Components</div>
       <div class="list components-list searchbar-found">
         <ul>
           <li>
@@ -583,7 +583,7 @@
           <li>Nothing found</li>
         </ul>
       </div>
-      <div class="block-title block-title-medium searchbar-hide-on-search">Themes</div>
+      <div class="block-title searchbar-hide-on-search">Themes</div>
       <div class="list searchbar-hide-on-search">
         <ul>
           <li>
@@ -616,7 +616,7 @@
           </li>
         </ul>
       </div>
-      <div class="block-title block-title-medium searchbar-hide-on-search">Page Loaders & Router</div>
+      <div class="block-title searchbar-hide-on-search">Page Loaders & Router</div>
       <div class="list searchbar-hide-on-search">
         <ul>
           <li>

diff --git a/kitchen-sink/react/src/pages/home.jsx b/kitchen-sink/react/src/pages/home.jsx
@@ -81,9 +81,7 @@ export default ({ f7router }) => {
         </ListItem>
       </List>
 
-      <BlockTitle medium className="searchbar-found">
-        Components
-      </BlockTitle>
+      <BlockTitle className="searchbar-found">Components</BlockTitle>
       <List className="components-list searchbar-found">
         <ListItem reloadDetail link="/accordion/" title="Accordion">
           <Icon slot="media" icon="icon-f7" />
@@ -287,18 +285,14 @@ export default ({ f7router }) => {
       <List className="searchbar-not-found">
         <ListItem title="Nothing found" />
       </List>
-      <BlockTitle medium className="searchbar-hide-on-search">
-        Themes
-      </BlockTitle>
+      <BlockTitle className="searchbar-hide-on-search">Themes</BlockTitle>
       <List className="searchbar-hide-on-search">
         <ListItem title="iOS Theme" external link="./index.html?theme=ios" />
         <ListItem title="Material (MD) Theme" external link="./index.html?theme=md" />
         <ListItem title="Aurora Desktop Theme" external link="./index.html?theme=aurora" />
         <ListItem title="Color Themes" reloadDetail link="/color-themes/" />
       </List>
-      <BlockTitle medium className="searchbar-hide-on-search">
-        Page Loaders & Router
-      </BlockTitle>
+      <BlockTitle className="searchbar-hide-on-search">Page Loaders & Router</BlockTitle>
       <List className="searchbar-hide-on-search">
         <ListItem title="Page Transitions" reloadDetail link="/page-transitions/" />
         <ListItem title="Routable Modals" reloadDetail link="/routable-modals/" />

diff --git a/kitchen-sink/svelte/src/pages/home.svelte b/kitchen-sink/svelte/src/pages/home.svelte
@@ -83,7 +83,7 @@
     </ListItem>
   </List>
 
-  <BlockTitle medium class="searchbar-found">Components</BlockTitle>
+  <BlockTitle class="searchbar-found">Components</BlockTitle>
   <List class="components-list searchbar-found">
     <ListItem reloadDetail={theme.aurora} link="/accordion/" title="Accordion">
       <i class="icon icon-f7" slot="media" />
@@ -291,14 +291,14 @@
   <List class="searchbar-not-found">
     <ListItem title="Nothing found" />
   </List>
-  <BlockTitle medium class="searchbar-hide-on-search">Themes</BlockTitle>
+  <BlockTitle class="searchbar-hide-on-search">Themes</BlockTitle>
   <List class="searchbar-hide-on-search">
     <ListItem title="iOS Theme" external link="./index.html?theme=ios" />
     <ListItem title="Material (MD) Theme" external link="./index.html?theme=md" />
     <ListItem title="Aurora Desktop Theme" external link="./index.html?theme=aurora" />
     <ListItem title="Color Themes" reloadDetail={theme.aurora} link="/color-themes/" />
   </List>
-  <BlockTitle medium class="searchbar-hide-on-search">Page Loaders & Router</BlockTitle>
+  <BlockTitle class="searchbar-hide-on-search">Page Loaders & Router</BlockTitle>
   <List class="searchbar-hide-on-search">
     <ListItem title="Page Transitions" reloadDetail={theme.aurora} link="/page-transitions/" />
     <ListItem title="Routable Modals" reloadDetail={theme.aurora} link="/routable-modals/" />

diff --git a/kitchen-sink/vue/src/pages/home.vue b/kitchen-sink/vue/src/pages/home.vue
@@ -37,7 +37,7 @@
       </f7-list-item>
     </f7-list>
 
-    <f7-block-title medium class="searchbar-found">Components</f7-block-title>
+    <f7-block-title class="searchbar-found">Components</f7-block-title>
     <f7-list class="components-list searchbar-found">
       <f7-list-item reload-detail link="/accordion/" title="Accordion">
         <template #media>
@@ -373,15 +373,15 @@
     <f7-list class="searchbar-not-found">
       <f7-list-item title="Nothing found" />
     </f7-list>
-    <f7-block-title medium class="searchbar-hide-on-search">Themes</f7-block-title>
+    <f7-block-title class="searchbar-hide-on-search">Themes</f7-block-title>
     <f7-list class="searchbar-hide-on-search">
       <f7-list-item title="iOS Theme" external link="./index.html?theme=ios" />
       <f7-list-item title="Material (MD) Theme" external link="./index.html?theme=md" />
       <f7-list-item title="Aurora Desktop Theme" external link="./index.html?theme=aurora" />
       <f7-list-item title="Color Themes" reload-detail link="/color-themes/" />
     </f7-list>
 
-    <f7-block-title medium class="searchbar-hide-on-search">Page Loaders & Router</f7-block-title>
+    <f7-block-title class="searchbar-hide-on-search">Page Loaders & Router</f7-block-title>
     <f7-list class="searchbar-hide-on-search">
       <f7-list-item title="Page Transitions" reload-detail link="/page-transitions/" />
       <f7-list-item title="Routable Modals" reload-detail link="/routable-modals/" />

diff --git a/src/core/components/block/block.less b/src/core/components/block/block.less
@@ -32,14 +32,16 @@
   background-color: var(--f7-block-strong-bg-color);
 }
 .block-outline:not(.inset),
-.ios .block-outline-ios:not(.inset),
-.md .block-outline-md:not(.inset) {
+.ios .block-outline-ios:not(.inset):not(.inset-ios),
+.md .block-outline-md:not(.inset):not(.inset-md) {
   .hairline(top, var(--f7-block-outline-border-color));
   .hairline(bottom, var(--f7-block-outline-border-color));
 }
 .block-outline.inset,
 .ios .block-outline-ios.inset,
-.md .block-outline-md.inset {
+.ios .block-outline-ios.inset-ios,
+.md .block-outline-md.inset,
+.md .block-outline-md.inset-md {
   border: 1px solid var(--f7-block-outline-border-color);
 }
 
@@ -156,20 +158,26 @@
   }
 }
 // Inset
-.block.inset {
+.block.inset,
+.ios .block.inset-ios,
+.md .block.inset-md {
   border-radius: var(--f7-block-inset-border-radius);
   margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
   margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
   --f7-safe-area-left: 0px;
   --f7-safe-area-right: 0px;
 }
-.block-strong.inset {
+.block-strong.inset,
+.ios .block-strong.inset-ios,
+.md .block-strong.inset-md {
   .hairline-remove-top-bottom();
 }
 
 each(@breakpoints, {
   @media (min-width:@value) {
-    .block.@{key}-inset {
+    .block.@{key}-inset,
+    .ios .block.@{key}-inset-ios,
+    .md .block.@{key}-inset-md {
       border-radius: var(--f7-block-inset-border-radius);
       margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
       margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));

diff --git a/src/react/components/block.jsx b/src/react/components/block.jsx
@@ -8,11 +8,23 @@ import { useTab } from '../shared/use-tab.js';
   className: string;
   style: React.CSSProperties;
   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
   outline?: boolean
   outlineIos?: boolean
@@ -33,11 +45,23 @@ const Block = forwardRef((props, ref) => {
   const {
     className,
     inset,
+    insetIos,
+    insetMd,
     xsmallInset,
+    xsmallInsetIos,
+    xsmallInsetMd,
     smallInset,
+    smallInsetIos,
+    smallInsetMd,
     mediumInset,
+    mediumInsetIos,
+    mediumInsetMd,
     largeInset,
+    largeInsetIos,
+    largeInsetMd,
     xlargeInset,
+    xlargeInsetIos,
+    xlargeInsetMd,
     strong,
     outline,
     outlineIos,
@@ -66,11 +90,23 @@ const Block = forwardRef((props, ref) => {
     'block',
     {
       inset,
+      'inset-ios': insetIos,
+      'inset-md': insetMd,
       'xsmall-inset': xsmallInset,
+      'xsmall-inset-ios': xsmallInsetIos,
+      'xsmall-inset-md': xsmallInsetMd,
       'small-inset': smallInset,
+      'small-inset-ios': smallInsetIos,
+      'small-inset-md': smallInsetMd,
       'medium-inset': mediumInset,
+      'medium-inset-ios': mediumInsetIos,
+      'medium-inset-md': mediumInsetMd,
       'large-inset': largeInset,
+      'large-inset-ios': largeInsetIos,
+      'large-inset-md': largeInsetMd,
       'xlarge-inset': xlargeInset,
+      'xlarge-inset-ios': xlargeInsetIos,
+      'xlarge-inset-md': xlargeInsetMd,
       'block-strong': strong,
       'block-outline': outline,
       'block-outline-ios': outlineIos,

diff --git a/src/svelte/components/block.svelte b/src/svelte/components/block.svelte
@@ -8,11 +8,23 @@
   const emit = createEmitter(createEventDispatcher, $$props);
 
   export let inset = false;
+  export let insetIos = false;
+  export let insetMd = false;
   export let xsmallInset = false;
+  export let xsmallInsetIos = false;
+  export let xsmallInsetMd = false;
   export let smallInset = false;
+  export let smallInsetIos = false;
+  export let smallInsetMd = false;
   export let mediumInset = false;
+  export let mediumInsetIos = false;
+  export let mediumInsetMd = false;
   export let largeInset = false;
+  export let largeInsetIos = false;
+  export let largeInsetMd = false;
   export let xlargeInset = false;
+  export let xlargeInsetIos = false;
+  export let xlargeInsetMd = false;
   export let strong = false;
   export let tabs = false;
   export let tab = false;
@@ -33,11 +45,23 @@
     'block',
     {
       inset,
+      'inset-ios': insetIos,
+      'inset-md': insetMd,
       'xsmall-inset': xsmallInset,
+      'xsmall-inset-ios': xsmallInsetIos,
+      'xsmall-inset-md': xsmallInsetMd,
       'small-inset': smallInset,
+      'small-inset-ios': smallInsetIos,
+      'small-inset-md': smallInsetMd,
       'medium-inset': mediumInset,
+      'medium-inset-ios': mediumInsetIos,
+      'medium-inset-md': mediumInsetMd,
       'large-inset': largeInset,
+      'large-inset-ios': largeInsetIos,
+      'large-inset-md': largeInsetMd,
       'xlarge-inset': xlargeInset,
+      'xlarge-inset-ios': xlargeInsetIos,
+      'xlarge-inset-md': xlargeInsetMd,
       'block-strong': strong,
       'accordion-list': accordionList,
       'accordion-opposite': accordionOpposite,

diff --git a/src/vue/components/block.vue b/src/vue/components/block.vue
@@ -13,11 +13,23 @@ export default {
   name: 'f7-block',
   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,
     outline: Boolean,
     outlineIos: Boolean,
@@ -38,11 +50,23 @@ export default {
     const classes = computed(() => {
       const {
         inset,
+        insetIos,
+        insetMd,
         xsmallInset,
+        xsmallInsetIos,
+        xsmallInsetMd,
         smallInset,
+        smallInsetIos,
+        smallInsetMd,
         mediumInset,
+        mediumInsetIos,
+        mediumInsetMd,
         largeInset,
+        largeInsetIos,
+        largeInsetMd,
         xlargeInset,
+        xlargeInsetIos,
+        xlargeInsetMd,
         strong,
         outline,
         outlineIos,
@@ -57,11 +81,23 @@ export default {
         'block',
         {
           inset,
+          'inset-ios': insetIos,
+          'inset-md': insetMd,
           'xsmall-inset': xsmallInset,
+          'xsmall-inset-ios': xsmallInsetIos,
+          'xsmall-inset-md': xsmallInsetMd,
           'small-inset': smallInset,
+          'small-inset-ios': smallInsetIos,
+          'small-inset-md': smallInsetMd,
           'medium-inset': mediumInset,
+          'medium-inset-ios': mediumInsetIos,
+          'medium-inset-md': mediumInsetMd,
           'large-inset': largeInset,
+          'large-inset-ios': largeInsetIos,
+          'large-inset-md': largeInsetMd,
           'xlarge-inset': xlargeInset,
+          'xlarge-inset-ios': xlargeInsetIos,
+          'xlarge-inset-md': xlargeInsetMd,
           'block-strong': strong,
           'accordion-list': accordionList,
           'accordion-opposite': accordionOpposite,