@vixcom/ui 1.7.0 → 1.7.2

package/src/css/menu.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../styles/menu.scss","../styles/_mixins.scss"],"names":[],"mappings":"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","file":"menu.css"}
+{"version":3,"sourceRoot":"","sources":["../styles/menu.scss","../styles/_mixins.scss"],"names":[],"mappings":"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","file":"menu.css"}

package/src/pages/menu/index.html

@@ -19,95 +19,59 @@
   <!-- <script src="js/alpine" defer></script> -->
 </head>
 
-<body class="main-menu-container" :class="container" x-data="{type:'side-menu', container:'grid', mini: true, active: false, flat: false}">
+<body class="main-menu-container" :class="container" x-data="{type:'side-menu', container:'grid', mini: true, removed:false, active: false, flat: false}">
   <input type="checkbox" id="main-menu-trigger" class="main-menu-trigger" x-model="active">
-  <menu :class="`main-menu bg-primary ${type} ${mini ? 'mini':'max'}`">
-    <nav class="menu-snap bg-text text-black">
-      <template x-for="() in 5">
-        <img src="assets/img/icon.png" class="item icon" alt="icon">
-      </template>
-    </nav>
-    <div class="menu-container p-1 rounded-2 bg-inherit">
-      <header class="menu-header">
-        <img src="assets/img/logo.png" class="main-logo menu-logo silhouette" alt="icon">
-        <img src="assets/img/icon.png" class="main-logo menu-logo-alt" alt="icon-alt">
-      </header>
-      <nav>
-        <template x-for="(v,k) of {flex:'bounding-box', grid: 'grid'}">
-          <label class="item" :class="{active: k === container}" :title="k">
-            <i :class="`icon bi bi-${v}`"></i>
-            <input type="radio" name="container" :value="k" x-model="container" hidden>
-            <span class="label" x-text="k"></span>
-          </label>
-        </template>
-        <divider></divider>
-        <template x-for="(v,k) of {
-          'full-menu':'window-fullscreen',
-          'float-menu':'menu-up',
-          'side-menu':'layout-sidebar',
-        }">
-          <label class="item" :class="{active: k === type}" :title="k">
-            <i :class="`icon bi bi-${v}`"></i>
-            <input type="radio" name="type" :value="k" x-model="type" hidden>
-            <span class="label" x-text="k"></span>
-          </label>
+  <template x-if="!removed">
+    <menu :class="`main-menu bg-primary ${type} ${mini ? 'mini':'max'}`">
+      <nav class="menu-snap bg-text text-black">
+        <template x-for="() in 5">
+          <img src="assets/img/icon.png" class="item icon" alt="icon">
         </template>
-        <button class="bg-green item"><i class="icon bi bi-check"></i><span class="label">Activate</span></button>
-        <button class="bg-blue item"><i class="icon bi bi-share"></i><span class="label">Share</span></button>
-        <button class="bg-white item"><i class="icon bi bi-person"></i><span class="label">Account</span></button>
       </nav>
-      <label for="main-menu-trigger" class="bi bi-list main-menu-toggle icon border bg-text p-2 m-auto rounded-circle align-self-center" />
-    </div>
-  </menu>
-  <template x-if="flat">
-    <header class="p-3 bg-white"><img class="sq-2 ml-auto" src="assets/img/avatar.svg" alt="P"></header>
-  </template>
-  <main>
-    <template x-if="!flat">
-      <header class="p-3 bg-white"><img class="sq-2 ml-auto" src="assets/img/avatar.svg" alt="P"></header>
-    </template>
-    <section>
-      <h1 x-text="`VX Dashboard ${type}`"></h1>
-      <menu>
-        <div class="tabs tabs-primary md">
-          <label>
-            <input class="default" type="checkbox" name="flat" x-model="flat">
-            <span class="label" x-text="`Flat: ${flat}`"></span>
-          </label>
-        </div>
-        <div class="tabs tabs-secondary prefill">
+      <div class="menu-container p-1 rounded-2 bg-inherit">
+        <header class="menu-header">
+          <img src="assets/img/logo.png" class="main-logo menu-logo silhouette" alt="icon">
+          <img src="assets/img/icon.png" class="main-logo menu-logo-alt" alt="icon-alt">
+        </header>
+        <nav>
           <template x-for="(v,k) of {flex:'bounding-box', grid: 'grid'}">
-            <label class="tab" :class="{active: k === container}" :title="k">
+            <label class="item" :class="{active: k === container}" :title="k">
               <i :class="`icon bi bi-${v}`"></i>
               <input type="radio" name="container" :value="k" x-model="container" hidden>
               <span class="label" x-text="k"></span>
             </label>
           </template>
+          <divider></divider>
           <template x-for="(v,k) of {
-              'full-menu':'window-fullscreen',
-              'float-menu':'menu-up',
-              'side-menu':'layout-sidebar',
-            }">
-            <label class="tab" :class="{active: k === type}" :title="k">
+            'full-menu':'window-fullscreen',
+            'float-menu':'menu-up',
+            'side-menu':'layout-sidebar',
+          }">
+            <label class="item" :class="{active: k === type}" :title="k">
               <i :class="`icon bi bi-${v}`"></i>
               <input type="radio" name="type" :value="k" x-model="type" hidden>
               <span class="label" x-text="k"></span>
             </label>
           </template>
-        </div>
-        <label class="item gap-1 checkbox">
-          <input class="default" type="checkbox" name="mini" x-model="mini">
-          <span class="label">Mini</span>
-        </label>
-        <label class="item gap-1 checkbox">
-          <input class="default" type="checkbox" name="menu" x-model="active">
-          <span class="label">Toggle Menu</span>
-        </label>
-      </menu>
-      <template x-for="(v,k) in Array(10)">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-      </template>
-    </section>
+          <button class="bg-green item"><i class="icon bi bi-check"></i><span class="label">Activate</span></button>
+          <button class="bg-blue item"><i class="icon bi bi-share"></i><span class="label">Share</span></button>
+          <button class="bg-white item"><i class="icon bi bi-person"></i><span class="label">Account</span></button>
+        </nav>
+        <label for="main-menu-trigger" class="bi bi-list main-menu-toggle icon border bg-text p-2 rounded-circle" />
+      </div>
+    </menu>
+  </template>
+  <template x-if="flat">
+    <header class="p-3 bg-white"><img class="sq-2 ml-auto" src="assets/img/avatar.svg" alt="P"></header>
+  </template>
+  <template x-else>Else</template>
+  <main>
+    <template x-if="!flat">
+      <header class="p-3 bg-white"><img class="sq-2 ml-auto" src="assets/img/avatar.svg" alt="P"></header>
+    </template>
+    <template x-for="(v,k) in Array(10)">
+      <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
+    </template>
     <template x-if="!flat">
       <footer>All rights reserved</footer>
     </template>
@@ -115,6 +79,91 @@
   <template x-if="flat">
     <footer>All rights reserved</footer>
   </template>
+  <menu id="menu" class="float-menu bg-primary">
+    <nav>
+      <template x-for="(v,k) of {flex: 'bounding-box', grid: 'grid'}">
+        <label class="item" :class="{active: k === container}" :title="k">
+          <i :class="`icon bi bi-${v}`"></i>
+          <input type="radio" name="container" :value="k" x-model="container" hidden>
+          <span class="label" x-text="k"></span>
+        </label>
+      </template>
+      <template x-for="(v,k) of {
+                    'full-menu':'window-fullscreen',
+                    'float-menu':'menu-up',
+                    'side-menu':'layout-sidebar',
+                  }">
+        <label class="item" :class="{active: k === type}" :title="k">
+          <i :class="`icon bi bi-${v}`"></i>
+          <input type="radio" name="type" :value="k" x-model="type" hidden>
+          <span class="label" x-text="k"></span>
+        </label>
+      </template>
+      <label for="main-menu-trigger" class="bi bi-list icon" />
+    </nav>
+    <div class="flex">
+      <label class="item gap-1 checkbox">
+        <input class="default" type="checkbox" name="flat" x-model="flat">
+        <span class="label">Flat</span>
+      </label>
+      <label class="item gap-1 checkbox">
+        <input class="default" type="checkbox" name="mini" x-model="mini">
+        <span class="label">Mini</span>
+      </label>
+      <label class="item gap-1 checkbox">
+        <input class="default" type="checkbox" name="menu" x-model="active">
+        <span class="label">Toggle Menu</span>
+      </label>
+      <label class="item gap-1 checkbox">
+        <input class="default" type="checkbox" name="remove_menu" x-model="removed">
+        <span class="label">Remove Menu</span>
+      </label>
+    </div>
+  </menu>
+  <style>
+    menu#menu {
+      position: fixed;
+      margin: 1rem;
+      right: 0;
+      border-radius: 0.25rem;
+      box-shadow: 0 0 10px -5px black;
+      transition: opacity 0.25s;
+      z-index: 1;
+    }
+
+    menu#menu:not(:hover) {
+      opacity: 0.125;
+    }
+
+    menu#menu nav,
+    menu#menu .flex {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+    }
+
+    menu#menu .flex {
+      padding: 0.5rem;
+      justify-content: space-between;
+    }
+
+    menu#menu nav .item {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      border-radius: 0.25rem;
+      padding: 0.5rem;
+    }
+
+    menu#menu .item.active {
+      background-color: var(--secondary);
+      color: var(--secondary-c);
+    }
+
+    section {
+      min-height: 50dvh;
+    }
+  </style>
 </body>
 
 </html>

package/src/styles/_mixins.scss

@@ -214,7 +214,7 @@ $colors-mapped: map-merge(
 
 // /* Functions and Mixins */
 
-@mixin bg-color-variant($selector, $k, $v) {
+@mixin bg-variant($selector, $k, $v) {
   #{$selector} {
     color: var(--#{$k}-c, map-get($v, 'c'));
     background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));
@@ -265,7 +265,7 @@ $colors-mapped: map-merge(
   }
 }
 
-@mixin group-bg-color-variant($selector, $k, $v) {
+@mixin group-bg-variant($selector, $k, $v) {
   #{$selector} {
     // &:hover >.active {
     //   background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.275);
@@ -316,14 +316,14 @@ $colors-mapped: map-merge(
   }
 }
 
-@mixin neon-color-variant($selector, $k, $v) {
+@mixin neon-fg-variant($selector, $k, $v) {
   #{$selector} {
     /* color: var(--white); */
     text-shadow: 0 0 20px var(--#{$k}, map-get($v, 'bg')), 0 0 10px var(--white);
   }
 }
 
-@mixin color-variant($selector, $k, $v) {
+@mixin fg-variant($selector, $k, $v) {
   #{$selector} {
     color: var(--#{$k}, map-get($v, 'bg'));
   }
@@ -339,7 +339,7 @@ $colors-mapped: map-merge(
   }
 }
 
-@mixin gradient-variant($selector, $k, $v) {
+@mixin bg-gradient-variant($selector, $k, $v) {
   #{$selector} {
     background-image: linear-gradient(
       var(--#{$k}, map-get($v, 'bg')),
@@ -367,23 +367,7 @@ $colors-mapped: map-merge(
   }
 }
 
-// @mixin bg-color-light-variant($selector, $k, $v) {
-//   #{$selector} {
-//     background-color: hsla(
-//       var(--#{$k}-hs),
-//       calc(var(--#{$k}-l) + 45%),
-//       var(--#{$k}-a)
-//     );
-//     color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 45%), var(--#{$k}-a));
-//     border-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));
-
-//     &.is-blur:not(:hover) {
-//       background-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) + 45%), 0.5);
-//     }
-//   }
-// }
-
-@mixin outline-variant($selector, $k, $v) {
+@mixin bg-outline-variant($selector, $k, $v) {
   #{$selector} {
     background-color: transparent;
     color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));

package/src/styles/colors.scss

@@ -13,14 +13,14 @@
 
 @each $k, $v in $colors-mapped {
   // Texts
-  @include color-variant('.text-#{$k}', $k, $v);
-  @include neon-color-variant('.text-neon-#{$k}', $k, $v);
+  @include fg-variant('.text-#{$k}', $k, $v);
+  @include neon-fg-variant('.text-neon-#{$k}', $k, $v);
   // Background
-  @include bg-color-variant('.bg-#{$k}', $k, $v);
-  @include gradient-variant('.bg-g-#{$k}', $k, $v);
-  @include outline-variant('.bg-outline-#{$k}', $k, $v);
-  @include group-bg-color-variant('.tabs-#{$k}', $k, $v);
-  @include group-bg-color-variant('.dots-#{$k}', $k, $v);
+  @include bg-variant('.bg-#{$k}', $k, $v);
+  @include bg-gradient-variant('.bg-gradient-#{$k}', $k, $v);
+  @include bg-outline-variant('.bg-outline-#{$k}', $k, $v);
+  @include group-bg-variant('.tabs-#{$k}', $k, $v);
+  @include group-bg-variant('.dots-#{$k}', $k, $v);
 
   .border-#{$k} {
     border-color: map-get($v, 'bg');
@@ -99,12 +99,6 @@ input {
   @include before-content;
 }
 
-input,
-input::placeholder,
-input::-webkit-input-placeholder {
-  color: currentColor;
-}
-
 .text-unset,
 .text-color-unset {
   color: unset;

package/src/styles/helper/primefaces.scss

@@ -53,6 +53,12 @@
   }
 }
 
+.p-tabmenu {
+  &-nav {
+    align-items: flex-end;
+  }
+}
+
 .p-dialog-mask,
 .p-component-overlay,
 .p-dialog-mask.p-component-overlay {
@@ -130,6 +136,13 @@
   }
 }
 
+.p-dialog,
+.p-overlaypanel {
+  ul {
+    list-style: inside;
+  }
+}
+
 .p-toast {
   z-index: 5;
 }
@@ -138,9 +151,33 @@
   font-size: 0.75rem;
 }
 
-body .p-float-label {
-  display: flex;
-  flex-wrap: wrap;
+.p-float-label {
+  &,
+  &.p-inputgroup {
+    display: flex;
+  }
+
+  :focus,
+  .p-filled {
+    ~ label {
+      top: 0;
+      transform: translateY(-100%);
+    }
+  }
+
+  label {
+    margin-top: 0;
+    /* top: 50%; */
+    left: 0;
+    padding: 0.25rem;
+    transform: translateY(-50%);
+
+    &.bottom {
+      transform: translateY(100%);
+      top: unset;
+      bottom: 0;
+    }
+  }
 
   .p-dropdown .p-placeholder {
     opacity: 1;
@@ -156,16 +193,18 @@ body .p-float-label {
 .p-input-icon-left,
 .p-input-icon-right {
   display: flex;
+  align-items: center;
 
   i {
     display: flex;
     align-items: center;
-    position: relative;
-    top: 0;
+    position: absolute;
+    top: unset;
     margin-top: 0;
   }
 }
-.p-input-group {
+
+.p-inputgroup {
   .p-button {
     width: unset;
   }
@@ -179,7 +218,7 @@ body .p-float-label {
   border-radius: var(--border-radius);
 
   & &-label {
-    display: flex;
+    /* display: flex; */
   }
 }
 
@@ -200,12 +239,13 @@ body .p-float-label {
   }
 }
 
-*:not(.p-paginator) > {
-  .p-dropdown,
-  .p-inputtext,
-  .p-inputnumber {
-    width: 100%;
-  }
+.p-dropdown,
+.p-calendar,
+.p-password,
+.p-inputtext,
+.p-inputnumber {
+  width: 100%;
+  flex: 1 1 auto;
 }
 
 p-chart {
@@ -217,47 +257,47 @@ p-chart {
   }
 }
 
-.p-calendar {
-  /* width: 100%; */
+.p-datepicker {
+  min-width: unset;
 
-  .p-datepicker {
-    min-width: unset;
-
-    .p-datepicker-header {
-      .p-datepicker-month {
-        border: none;
-      }
+  .p-datepicker-header {
+    .p-datepicker-month {
+      border: none;
     }
+  }
 
-    &:not(.p-datepicker-inline) {
-      box-shadow: unset;
+  &:not(.p-datepicker-inline) {
+    box-shadow: unset;
 
-      & > * {
-        position: relative;
-      }
-
-      &::before {
-        content: '';
-        display: block;
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        box-shadow: var(--card-shadow);
-        border-radius: inherit;
-        top: 0;
-        left: 0;
-        z-index: 0;
-      }
+    & > * {
+      position: relative;
     }
 
-    table td > span {
-      width: 2.25rem;
-      height: 2.25rem;
+    &::before {
+      content: '';
+      display: block;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      box-shadow: var(--card-shadow);
+      border-radius: inherit;
+      top: 0;
+      left: 0;
+      z-index: 0;
     }
+  }
 
-    .p-datepicker-buttonbar {
-      padding: 0;
-    }
+  .p-datepicker-buttonbar {
+    padding: 0;
+  }
+
+  .p-timepicker span {
+    font-size: inherit;
+  }
+
+  table td > span {
+    width: 2.25rem;
+    height: 2.25rem;
   }
 }
 
@@ -279,6 +319,15 @@ p-chart {
   }
 }
 
+.p-timeline-horizontal {
+  &.p-timeline-left .p-timeline-event-opposite {
+    text-align: left;
+  }
+  &.p-timeline-right .p-timeline-event-opposite {
+    text-align: right;
+  }
+}
+
 .p-accordion {
   .p-accordion-header-link {
     border-radius: inherit;
@@ -349,6 +398,13 @@ p-chart {
 }
 
 .p-paginator {
+  background-color: unset;
+  padding: 0;
+
+  .p-inputwrapper {
+    width: unset;
+  }
+
   &-left-content {
     margin-right: none;
   }
@@ -359,18 +415,31 @@ p-chart {
 }
 
 .p-datatable {
+  &-header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
   &-thead {
     text-transform: capitalize;
   }
 
   &-thead > tr > th,
   &-tbody > tr > td {
-    padding: 0.25rem 0.5rem;
+    /* max-width: 1px; */
+    padding: 0.5rem;
 
     .p-row-toggler {
       min-width: unset;
     }
   }
+  tr.p-datatable-row-expansion > td {
+    padding: {
+      left: 5%;
+      right: 5%;
+    }
+  }
 }
 
 .p-message {
@@ -391,18 +460,19 @@ p-chart {
   display: flex;
 
   > .p-button {
-    flex: 1 1 100%;
+    /* flex: 1 1 100%; */
     // padding: 1rem;
   }
 }
 
 .p-button {
   width: unset;
-  min-width: 2.5rem;
+  /* min-width: 2.5rem; */
   /* text-transform: capitalize; */
 
   &:hover {
-    background-color: hsl(var(--primary-hs), calc(var(--primary-l) - 20%));
+    /* background-color: hsl(var(--primary-hs), calc(var(--primary-l) - 20%)); */
+    /* color: var(--primary-c); */
   }
 }