@mptw/skylens-ui 1.3.11 → 1.3.13

package/assets/css/icons.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'MEShPlus-font-icon';
-  src:  url('fonts/MEShPlus-font-icon.eot?1oxse');
-  src:  url('fonts/MEShPlus-font-icon.eot?1oxse#iefix') format('embedded-opentype'),
+  src: url('fonts/MEShPlus-font-icon.eot?1oxse');
+  src: url('fonts/MEShPlus-font-icon.eot?1oxse#iefix') format('embedded-opentype'),
     url('fonts/MEShPlus-font-icon.ttf?1oxse') format('truetype'),
     url('fonts/MEShPlus-font-icon.woff?1oxse') format('woff'),
     url('fonts/MEShPlus-font-icon.svg?1oxse#MEShPlus-font-icon') format('svg');
@@ -10,7 +10,8 @@
   font-display: block;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'MEShPlus-font-icon' !important;
   speak: never;
@@ -27,722 +28,752 @@
 
 .icon-insight-icon:before {
   content: "\e961";
-  color: #424242;
 }
+
 .icon-X:before {
   content: "\e962";
-  color: #424242;
 }
+
 .icon-lock:before {
   content: "\e963";
-  color: #424242;
 }
+
 .icon-mail:before {
   content: "\e964";
-  color: #424242;
 }
+
 .icon-loading-circle:before {
   content: "\e960";
-  color: #424242;
 }
+
 .icon-edit:before {
   content: "\e95f";
-  color: #424242;
 }
+
 .icon-angle-double-down:before {
   content: "\e91f";
-  color: #424242;
 }
+
 .icon-angle-double-up:before {
   content: "\e947";
-  color: #424242;
 }
+
 .icon-angle-double-left:before {
   content: "\e902";
-  color: #424242;
 }
+
 .icon-angle-double-right:before {
   content: "\e903";
-  color: #424242;
 }
+
 .icon-arrow2-down:before {
   content: "\e948";
-  color: #424242;
 }
+
 .icon-arrow2-left:before {
   content: "\e949";
-  color: #424242;
 }
+
 .icon-arrow2-right:before {
   content: "\e94a";
-  color: #424242;
 }
+
 .icon-arrow2-up:before {
   content: "\e94b";
-  color: #424242;
 }
+
 .icon-arrow-left:before {
   content: "\e94c";
-  color: #424242;
 }
+
 .icon-arrow-right:before {
   content: "\e94d";
-  color: #424242;
 }
+
 .icon-arrow-down:before {
   content: "\e904";
-  color: #424242;
 }
+
 .icon-arrow-up:before {
   content: "\e905";
-  color: #424242;
 }
+
 .icon-book:before {
   content: "\e94e";
-  color: #424242;
 }
+
 .icon-update:before {
   content: "\e951";
-  color: #424242;
 }
+
 .icon-wrench:before {
   content: "\e952";
-  color: #424242;
 }
+
 .icon-Agent:before {
   content: "\e953";
 }
+
 .icon-Customer:before {
   content: "\e954";
 }
+
 .icon-Drag:before {
   content: "\e955";
 }
+
 .icon-exchange:before {
   content: "\e956";
 }
+
 .icon-flag:before {
   content: "\e957";
 }
+
 .icon-home:before {
   content: "\e958";
 }
+
 .icon-pps:before {
   content: "\e959";
 }
+
 .icon-pps-mirror:before {
   content: "\e95a";
 }
+
 .icon-Report:before {
   content: "\e95b";
 }
+
 .icon-three-dot:before {
   content: "\e95c";
 }
+
 .icon-three-dot-v:before {
   content: "\e95d";
-  color: #424242;
 }
+
 .icon-trashcan:before {
   content: "\e95e";
 }
+
 .icon-trash:before {
   content: "\e900";
-  color: #424242;
 }
+
 .icon-address-book:before {
   content: "\e901";
-  color: #424242;
 }
+
 .icon-box-open:before {
   content: "\e906";
-  color: #424242;
 }
+
 .icon-box:before {
   content: "\e907";
-  color: #424242;
 }
+
 .icon-broadcast-tower:before {
   content: "\e908";
-  color: #424242;
 }
+
 .icon-calendar-done:before {
   content: "\e909";
-  color: #424242;
 }
+
 .icon-calendar-plus:before {
   content: "\e90a";
-  color: #424242;
 }
+
 .icon-calendar:before {
   content: "\e90b";
-  color: #424242;
 }
+
 .icon-caret-right:before {
   content: "\e950";
-  color: #424242;
 }
+
 .icon-caret-left:before {
   content: "\e94f";
-  color: #424242;
 }
+
 .icon-caret-down:before {
   content: "\e90c";
-  color: #424242;
 }
+
 .icon-caret-up:before {
   content: "\e90d";
-  color: #424242;
 }
+
 .icon-chart_with_num:before {
   content: "\e90e";
-  color: #424242;
 }
+
 .icon-chart_without_num:before {
   content: "\e90f";
-  color: #424242;
 }
+
 .icon-chart-bar:before {
   content: "\e910";
-  color: #424242;
 }
+
 .icon-chart-line:before {
   content: "\e911";
-  color: #424242;
 }
+
 .icon-chart-pie-alt:before {
   content: "\e912";
-  color: #424242;
 }
+
 .icon-chart-scatter:before {
   content: "\e913";
-  color: #424242;
 }
+
 .icon-cheers:before {
   content: "\e916";
-  color: #424242;
 }
+
 .icon-chevron-down:before {
   content: "\e917";
-  color: #424242;
 }
+
 .icon-chevron-left:before {
   content: "\e918";
-  color: #424242;
 }
+
 .icon-chevron-right:before {
   content: "\e919";
-  color: #424242;
 }
+
 .icon-chevron-up:before {
   content: "\e91a";
-  color: #424242;
 }
+
 .icon-circle:before {
   content: "\e91b";
-  color: #424242;
 }
+
 .icon-check-circle:before {
   content: "\e914";
-  color: #424242;
 }
+
 .icon-dot-circle:before {
   content: "\e91e";
-  color: #424242;
 }
+
 .icon-clipboard:before {
   content: "\e91c";
-  color: #424242;
 }
+
 .icon-equals:before {
   content: "\e920";
-  color: #424242;
 }
+
 .icon-exclamation-circle:before {
   content: "\e921";
-  color: #424242;
 }
+
 .icon-exclamation-triangle:before {
   content: "\e922";
 }
+
 .icon-external-link-alt:before {
   content: "\e923";
-  color: #424242;
 }
+
 .icon-eye-slash:before {
   content: "\e924";
-  color: #424242;
 }
+
 .icon-eye:before {
   content: "\e925";
-  color: #424242;
 }
+
 .icon-female:before {
   content: "\e926";
-  color: #424242;
 }
+
 .icon-file-excel:before {
   content: "\e927";
-  color: #424242;
 }
+
 .icon-file-image:before {
   content: "\e928";
-  color: #424242;
 }
+
 .icon-heat-map:before {
   content: "\e929";
-  color: #424242;
 }
+
 .icon-info-circle:before {
   content: "\e92a";
-  color: #424242;
 }
+
 .icon-list:before {
   content: "\e92b";
-  color: #424242;
 }
+
 .icon-male:before {
   content: "\e92c";
-  color: #424242;
 }
+
 .icon-map-marker-alt:before {
   content: "\e92d";
-  color: #424242;
 }
+
 .icon-check-square:before {
   content: "\e915";
-  color: #424242;
 }
+
 .icon-square:before {
   content: "\e93d";
-  color: #424242;
 }
+
 .icon-minus-square:before {
   content: "\e92e";
-  color: #424242;
 }
+
 .icon-new:before {
   content: "\e92f";
-  color: #424242;
 }
+
 .icon-person-cog:before {
   content: "\e930";
-  color: #424242;
 }
+
 .icon-personal-info:before {
   content: "\e931";
-  color: #424242;
 }
+
 .icon-plus:before {
   content: "\e932";
-  color: #424242;
 }
+
 .icon-project-info:before {
   content: "\e933";
-  color: #424242;
 }
+
 .icon-search:before {
   content: "\e934";
-  color: #424242;
 }
+
 .icon-sign-out-alt:before {
   content: "\e935";
-  color: #424242;
 }
+
 .icon-skylens-basic:before {
   content: "\e936";
-  color: #424242;
 }
+
 .icon-skylens-poi:before {
   content: "\e937";
-  color: #424242;
 }
+
 .icon-skylens-ta:before {
   content: "\e938";
-  color: #424242;
 }
+
 .icon-skylens-traffic:before {
   content: "\e939";
-  color: #424242;
 }
+
 .icon-smile-arrow:before {
   content: "\e93a";
-  color: #424242;
 }
+
 .icon-sort-down:before {
   content: "\e93b";
-  color: #424242;
 }
+
 .icon-sort-up:before {
   content: "\e93c";
-  color: #424242;
 }
+
 .icon-start-flag:before {
   content: "\e93e";
-  color: #424242;
 }
+
 .icon-sync-alt:before {
   content: "\e93f";
-  color: #424242;
 }
+
 .icon-tag:before {
   content: "\e940";
-  color: #424242;
 }
+
 .icon-th-with-bar:before {
   content: "\e941";
-  color: #424242;
 }
+
 .icon-th:before {
   content: "\e942";
-  color: #424242;
 }
+
 .icon-times:before {
   content: "\e943";
-  color: #424242;
 }
+
 .icon-unique:before {
   content: "\e944";
-  color: #424242;
 }
+
 .icon-unknown-gender:before {
   content: "\e945";
-  color: #424242;
 }
+
 .icon-web:before {
   content: "\e946";
-  color: #424242;
 }
+
 .icon-check-circle-line:before {
   content: "\e965";
-  color: #424242;
 }
+
 .icon-x-circle-line:before {
   content: "\e966";
-  color: #424242;
 }
+
 .icon-pin:before {
   content: "\e967";
-  color: #424242;
 }
+
 .icon-external-link-2:before {
   content: "\e968";
-  color: #424242;
 }
+
 .icon-lengthen:before {
   content: "\e969";
-  color: #424242;
 }
+
 .icon-shorten:before {
   content: "\e96a";
-  color: #424242;
 }
+
 .icon-adjust-2line:before {
   content: "\e96b";
-  color: #424242;
 }
+
 .icon-adjust:before {
   content: "\e96c";
-  color: #424242;
 }
+
 .icon-audience-line:before {
   content: "\e96d";
-  color: #424242;
 }
+
 .icon-audience-solid:before {
   content: "\e96e";
-  color: #424242;
 }
+
 .icon-chart_without_num-line:before {
   content: "\e96f";
-  color: #424242;
 }
+
 .icon-cog-line:before {
   content: "\e970";
-  color: #424242;
 }
+
 .icon-cog:before {
   content: "\e91d";
-  color: #424242;
 }
+
 .icon-customer-money-line:before {
   content: "\e971";
-  color: #424242;
 }
+
 .icon-customer-money-solid:before {
   content: "\e972";
-  color: #424242;
 }
+
 .icon-extend:before {
   content: "\e973";
-  color: #424242;
 }
+
 .icon-shrink:before {
   content: "\e979";
 }
+
 .icon-infor-line:before {
   content: "\e974";
-  color: #424242;
 }
+
 .icon-notice-line:before {
   content: "\e975";
-  color: #424242;
 }
+
 .icon-notice-solid:before {
   content: "\e976";
-  color: #424242;
 }
+
 .icon-support-solid:before {
   content: "\e977";
-  color: #424242;
 }
+
 .icon-support-line:before {
   content: "\e978";
 }
+
 .icon-extend-solid:before {
   content: "\e97a";
-  color: #424242;
 }
+
 .icon-shrink-solid:before {
   content: "\e97b";
-  color: #424242;
 }
+
 .icon-drag:before {
   content: "\e97c";
-  color: #424242;
 }
+
 .icon-www-earth:before {
   content: "\e97d";
 }
+
 .icon-earth:before {
   content: "\e97e";
 }
+
 .icon-wait:before {
   content: "\e97f";
 }
+
 .icon-pin-line:before {
   content: "\e980";
-  color: #424242;
 }
+
 .icon-pause:before {
   content: "\e981";
-  color: #424242;
 }
+
 .icon-map-marker:before {
   content: "\e982";
-  color: #424242;
 }
+
 .icon-info-solid:before {
   content: "\e983";
-  color: #424242;
 }
+
 .icon-map-marker-hide:before {
   content: "\e984";
-  color: #424242;
 }
+
 .icon-wwwearth-with-map:before {
   content: "\e985";
-  color: #424242;
 }
+
 .icon-earth-with-map:before {
   content: "\e987";
-  color: #424242;
 }
+
 .icon-percent:before {
   content: "\e988";
-  color: #424242;
 }
+
 .icon-num:before {
   content: "\e989";
-  color: #424242;
 }
+
 .icon-new-circle:before {
   content: "\e98a";
 }
+
 .icon-group:before {
   content: "\e98b";
 }
+
 .icon-filter:before {
   content: "\e98d";
 }
+
 .icon-eye-slash-line:before {
   content: "\e98e";
-  color: #424242;
 }
+
 .icon-empty:before {
   content: "\e98f";
-  color: #424242;
 }
+
 .icon-download:before {
   content: "\e990";
-  color: #424242;
 }
+
 .icon-ascending:before {
   content: "\e991";
-  color: #424242;
 }
+
 .icon-descending:before {
   content: "\e992";
-  color: #424242;
 }
+
 .icon-triangle-up-small:before {
   content: "\e993";
 }
+
 .icon-triangle-down-small:before {
   content: "\e994";
 }
+
 .icon-filter-on:before {
   content: "\e98c";
 }
+
 .icon-travel:before {
   content: "\e995";
-  color: #424242;
 }
+
 .icon-star:before {
   content: "\e996";
-  color: #424242;
 }
+
 .icon-Study:before {
   content: "\e997";
-  color: #424242;
 }
+
 .icon-glasses:before {
   content: "\e998";
-  color: #424242;
 }
+
 .icon-diamond:before {
   content: "\e999";
-  color: #424242;
 }
+
 .icon-creative:before {
   content: "\e99a";
-  color: #424242;
 }
+
 .icon-clothes:before {
   content: "\e99b";
-  color: #424242;
 }
+
 .icon-case:before {
   content: "\e99c";
-  color: #424242;
 }
+
 .icon-add:before {
   content: "\e99d";
-  color: #424242;
 }
+
 .icon-man:before {
   content: "\e99e";
-  color: #424242;
 }
+
 .icon-woman:before {
   content: "\e99f";
-  color: #424242;
 }
+
 .icon-visit-group:before {
   content: "\e9a0";
-  color: #424242;
 }
+
 .icon-TA-profile:before {
   content: "\e9a1";
-  color: #424242;
 }
+
 .icon-favicon-default:before {
   content: "\e9a2";
-  color: #424242;
 }
+
 .icon-unfold:before {
   content: "\e9a3";
-  color: #424242;
 }
+
 .icon-fold:before {
   content: "\e9a4";
-  color: #424242;
 }
+
 .icon-chart-scatter-smalldot:before {
   content: "\e9a5";
-  color: #424242;
 }
+
 .icon-relative:before {
   content: "\e9a6";
-  color: #424242;
 }
+
 .icon-folder:before {
   content: "\e9a7";
-  color: #424242;
 }
+
 .icon-target:before {
   content: "\e9a8";
-  color: #424242;
 }
+
 .icon-folder-check:before {
   content: "\e9a9";
-  color: #424242;
 }
+
 .icon-star-circle:before {
   content: "\e9aa";
-  color: #424242;
 }
+
 .icon-edit-name:before {
   content: "\e9ab";
-  color: #424242;
 }
+
 .icon-finger-point:before {
   content: "\e9ac";
 }
+
 .icon-add-person:before {
   content: "\e9ad";
-  color: #424242;
 }
+
 .icon-check-with-circle-thin:before {
   content: "\e9ae";
 }
+
 .icon-check:before {
   content: "\e9af";
 }
+
 .icon-caret-right_line:before {
   content: "\e986";
-  color: #424242;
 }
+
 .icon-caret-left_line:before {
   content: "\e9b0";
 }
+
 .icon-caret-down_line:before {
   content: "\e9b1";
 }
+
 .icon-caret-up_line:before {
   content: "\e9b2";
 }
+
 .icon-report-people:before {
   content: "\e9b3";
-  color: #424242;
 }
+
 .icon-ad:before {
   content: "\e9b4";
-  color: #424242;
 }
+
 .icon-re-pack:before {
   content: "\e9b5";
-  color: #424242;
 }
+
 .icon-draft-thick:before {
   content: "\e9b6";
-  color: #424242;
 }
+
 .icon-draft-thin:before {
   content: "\e9b7";
-  color: #424242;
 }
+
 .icon-filter-search:before {
   content: "\e9b8";
-  color: #424242;
 }
+
 .icon-venn:before {
   content: "\e9b9";
 }
+
 .icon-filter-funnel:before {
   content: "\e9ba";
 }
+
 .icon-txt:before {
   content: "\e9bb";
-  color: #424242;
-}
+}

package/components/SLSearchInput.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
-SLTextInput(
+  SLTextInput(
   :size='size'
   :modelValue="modelValue"
   :placeholder="placeholder"
   :lazy="lazy"
+  :class='{ "search-input--sm": size === "sm" }'
   @update:modelValue='onInputedValue'
 ).search-input
   template(#append)
@@ -76,12 +77,23 @@ export default defineComponent({
     .button-group
       @apply border-primary
 
+  &.search-input--sm
+    .button-group
+      @apply s('py-0.75')
+
+      .btn
+        @apply text-sm
+
+  .input-group-append
+    @apply inline-flex border-t border-r border-b border-primary-light rounded-r bg-white
+
   .button-group
-    @apply inline-flex items-center h-full s('py-1.25') border-t border-r border-b border-primary-light rounded rounded-l-none bg-white
+    @apply inline-flex items-center s('py-1.75') s('pr-1.75') s('space-x-1.75')
 
     &-divider
-      @apply s('w-[0.0625rem]') h-full bg-primary-light
+      @apply w-px h-full my-px bg-primary-light
 
     .btn
-      @apply s('p-0') s('mx-1.75') leading-none text-gray-3 s('focus:outline-none') s('active:outline-none')
+      @apply p-0 border-0 text-gray-3 s('focus:outline-none') s('active:outline-none')
 </style>
+    

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",