doc update for primeflex 3

src/assets/menu/menu.json

@@ -108,16 +108,7 @@
             "children": []
         },
         {
-            "name": "PrimeFlex 3.0",
+            "name": "PrimeFlex",
-            "meta": ["primeflex"],
-            "banner": true,
-            "imageLight": "demo/images/banner-primeflex.svg",
-            "imageDark": "demo/images/banner-primeflex-dark.svg",
-            "url": "https://www.primefaces.org/primeflex",
-            "children": []
-        },
-        {
-            "name": "PrimeFlex 2.0",
             "meta": ["primeflex"],
             "children": [
                 {

src/views/elevation/ElevationDemo.vue

@@ -10,9 +10,12 @@
 
         <div class="content-section implementation">
             <div class="grid">
+                <div class="p-col">
+                    <div class="shadow-box shadow-none">shadow-none</div>
+                </div>
                 <div class="p-col" v-for="index in 8" :key="index">
                     <div :class="['shadow-box', 'shadow-' + index]">
-                        p-shadow-{{index}}
+                        shadow-{{index}}
                     </div>
                 </div>
             </div>

src/views/elevation/ElevationDoc.vue

@@ -31,6 +31,9 @@ export default {
 <template>
     <div>
         <div class="grid">
+            <div class="p-col">
+                    <div class="shadow-box shadow-none">shadow-none</div>
+                </div>
             <div class="p-col" v-for="index in 8" :key="index">
                 <div :class="['shadow-box', 'shadow-' + index]">
                     shadow-{{index}}
@@ -66,6 +69,9 @@ export default {
 <template>
     <div>
         <div class="grid">
+            <div class="p-col">
+                    <div class="shadow-box shadow-none">shadow-none</div>
+                </div>
             <div class="p-col" v-for="index in 8" :key="index">
                 <div :class="['shadow-box', 'shadow-' + index]">
                     shadow-{{index}}
@@ -99,6 +105,9 @@ export default {
                     tabName: 'Browser Source',
                     content: `<div id="app">
             <div class="grid">
+                <div class="p-col">
+                    <div class="shadow-box shadow-none">shadow-none</div>
+                </div>
                 <div class="p-col" v-for="index in 8" :key="index">
                     <div :class="['shadow-box', 'shadow-' + index]">
                         shadow-{{index}}

src/views/primeflex/PrimeFlexSetup.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="content-section documentation">
-            <h1>PrimeFlex (v2.0.0)</h1>
+            <h1>PrimeFlex (v3.0.0)</h1>
             <p>PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
                 recommended to add PrimeFlex as it is likely to need such utilities when developing applications with PrimeVue.</p>
 
@@ -9,29 +9,52 @@
             <p>PrimeFlex is available at <a href="https://www.npmjs.com/package/primeflex">npm</a>, if you have an existing application run the following commands to install it.</p>
 
 <pre v-code.script><code>
-npm install primeflex@2.0.0 --save
+npm install primeflex --save
 
 </code></pre>
 
-            <h5>Import</h5>
+            <h5>Import via Module</h5>
             <p>Next step is adding the primeflex.css to your application to include all utilities. If you prefer to pick the utilities, move to next step instead.</p>
 
 <pre v-code.css><code>
 import 'primeflex/primeflex.css';
 
+</code></pre>
+
+            <h5>Import via CDN</h5>
+<pre v-code.script><code>
+&lt;link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" /&gt;
+
 </code></pre>
 
             <p>PrimeFlex is a lightweight library still if you have an application such as one based on vue-cli
                 that is able to import scss then you will be able to pick the utilities you need to make the app bundle even smaller.</p>
 <pre v-code.css><code>
-import 'primeflex/src/_variables.scss';
+import 'primeflex/src/_animations.scss';
-import 'primeflex/src/_grid.scss';
+import 'primeflex/src/_border.scss';
-import 'primeflex/src/_formlayout.scss';
+import 'primeflex/src/_borderradius.scss';
+import 'primeflex/src/_colors.scss';
 import 'primeflex/src/_display.scss';
-import 'primeflex/src/_text.scss';
-import 'primeflex/src/flexbox/_flexbox.scss';
-import 'primeflex/src/_spacing.scss';
 import 'primeflex/src/_elevation.scss';
+import 'primeflex/src/_flexbox.scss';
+import 'primeflex/src/_formlayout.scss';
+import 'primeflex/src/_grid.scss';
+import 'primeflex/src/_image.scss';
+import 'primeflex/src/_liststyle.scss';
+import 'primeflex/src/_misc.scss';
+import 'primeflex/src/_mixins.scss';
+import 'primeflex/src/_overflow.scss';
+import 'primeflex/src/_padding.scss';
+import 'primeflex/src/_position.scss';
+import 'primeflex/src/_size.scss';
+import 'primeflex/src/_spacing.scss';
+import 'primeflex/src/_transform.scss';
+import 'primeflex/src/_transition.scss';
+import 'primeflex/src/_typography.scss';
+import 'primeflex/src/_userselect.scss';
+import 'primeflex/src/_utils.scss';
+import 'primeflex/src/_variables.scss';
+import 'primeflex/src/_zindex.scss';
 
 </code></pre>
 
@@ -74,7 +97,7 @@ import 'primeflex/src/_elevation.scss';
                         <tr>
                             <td>$fieldMargin</td>
                             <td>Spacing of a field. Can be vertical of horizontal depending on form layout.</td>
-                            <td>.5rem</td>
+                            <td>1rem</td>
                         </tr>
                         <tr>
                             <td>$fieldLabelMargin</td>
@@ -84,12 +107,17 @@ import 'primeflex/src/_elevation.scss';
                         <tr>
                             <td>$helperTextMargin</td>
                             <td>Top spacing of a helper text.</td>
-                            <td>.5rem</td>
+                            <td>.25rem</td>
                         </tr>
                         <tr>
                             <td>$spacer</td>
                             <td>Base value to use in spacing utilities, view spacing documentation for details.</td>
-                            <td>.5rem</td>
+                            <td>1rem</td>
+                        </tr>
+                        <tr>
+                            <td>$separator</td>
+                            <td>Separator between responsive breakpoints like <i>md:</i> and pseudo classes like <i>hover:</i></td>
+                            <td>:</td>
                         </tr>
                     </tbody>
                 </table>
@@ -115,11 +143,18 @@ import 'primeflex/src/_grid.css';
 import 'primeflex/src/_formlayout.css';
 import 'primeflex/src/_display.css';
 import 'primeflex/src/_text.css';
-import 'primeflex/src/flexbox/_flexbox.css';
+import 'primeflex/src/_flexbox.css';
 import 'primeflex/src/_spacing.css';
 import 'primeflex/src/_elevation.css';
 
 </code></pre>
+
+            <h5>Production Size</h5>
+            <p>When using a utility CSS library like PrimeFlex, it is likely to use only a set of classes from the library leaving the rest of the library as unused. To avoid including
+                the unused part from your application, it is strongly recommended to use a tool like <a href="https://purgecss.com/">PurgeCSS</a> that analyzes your code and generates an optimized primeflex file that only contains the utilities you've used.</p>
+
+            <h5>VSCode Extension</h5>
+            <p>The official PrimeFlex extension for <a href="https://marketplace.visualstudio.com/items?itemName=yigitfindikli.primeflexsnippets">VSCode</a> provides code completion and snippets support for the classes. Search for "PrimeFlex" at VSCode marketplace to download and install the extension.</p>
         </div>
     </div>
 </template>

src/views/spacing/SpacingDoc.vue

@@ -2,7 +2,7 @@
 	<AppDoc name="SpacingDemo" :sources="sources" github="spacing/SpacingDemo.vue" >
         <h5>Getting Started</h5>
         <p>The spacing classes use the <i>{property}{position}-{value}</i> syntax whereas for responsive
-        values <i>{property}{position}-{breakpoint}-{value}</i> format is used.</p>
+        values <i>{breakpoint}:{property}{position}-{value}</i> format is used.</p>
 
         <h5>Property</h5>
         <p>Property can either be a margin or a padding.</p>
@@ -33,6 +33,8 @@
             <li><b>4</b>: $spacer * 1.5</li>
             <li><b>5</b>: $spacer * 2</li>
             <li><b>6</b>: $spacer * 3</li>
+            <li><b>7</b>: $spacer * 4</li>
+            <li><b>8</b>: $spacer * 5</li>
             <li><b>auto</b>: auto margin</li>
         </ul>
 

src/views/text/TextDemo.vue

@@ -18,7 +18,7 @@
                 <h5>Wrap</h5>
                 <div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
                 <div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-                <div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+                <div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
 
                 <h5>Transform</h5>
                 <div class="mb-3 text-lowercase">LOWERCASE</div>

src/views/text/TextDoc.vue

@@ -17,20 +17,6 @@
 <div class="text-right">Right</div>
 <div class="text-justify">Justify</div>
 </template>
-</code></pre>
-
-        <h5>Wrap</h5>
-        <p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
-        <ul>
-            <li>nowrap</li>
-            <li>wrap</li>
-            <li>truncate</li>
-        </ul>
-<pre v-code><code><template v-pre>
-&lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
-&lt;div class="white-space-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
-&lt;div class="white-space-nowrap text-overflow-ellipsis" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
-</template>
 </code></pre>
 
         <h5>Transform</h5>
@@ -45,12 +31,23 @@
 &lt;div class="text-uppercase"&gt;uppercase&lt;/div&gt;
 &lt;div class="text-capitalize"&gt;capitalize&lt;/div&gt;
 </template>
+</code></pre>
+
+        <h5>Wrap</h5>
+        <p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
+<pre v-code><code><template v-pre>
+&lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
+&lt;div class="white-space-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
+&lt;div class="white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
+</template>
 </code></pre>
 
         <h5>Style</h5>
-        <p>Text styling applies to font weight and style.</p>
+        <p>Text styling applies to font weight and style and also uses <i>font-{value}</i> syntax.</p>
         <ul>
             <li>bold</li>
+            <li>semi-bold</li>
+            <li>medium</li>
             <li>normal</li>
             <li>light</li>
             <li>italic</li>
@@ -89,7 +86,7 @@ export default {
         <h5>Wrap</h5>
         <div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
         <div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-        <div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+        <div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
 
         <h5>Transform</h5>
         <div class="mb-3 text-lowercase">LOWERCASE</div>
@@ -129,7 +126,7 @@ export default {
         <h5>Wrap</h5>
         <div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
         <div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-        <div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+        <div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
 
         <h5>Transform</h5>
         <div class="mb-3 text-lowercase">LOWERCASE</div>
@@ -167,7 +164,7 @@ export default {
             <h5>Wrap</h5>
             <div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
             <div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-            <div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+            <div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
 
             <h5>Transform</h5>
             <div class="mb-3 text-lowercase">LOWERCASE</div>