@mptw/skylens-ui 1.4.109 → 1.5.1

package/{components → app/components}/SLCard.vue

@@ -62,62 +62,78 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.tabs
-  .tabs
-    .card
-      @apply border-0 rounded-none shadow-none
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  .card
-    @apply rounded-lg border-primary-300 shadow-md
+.tabs .tabs .card {
+  @apply border-0 rounded-none shadow-none;
+}
 
-    .card
-      @apply border-0 rounded-none shadow-none
+.tabs .card {
+  @apply rounded-lg border-primary-300 shadow-md;
+}
 
-.card
-  @apply p-4 border border-primary-600 rounded bg-white shadow
+.tabs .card .card {
+  @apply border-0 rounded-none shadow-none;
+}
 
-  .card-prepend
-    @apply mb-4
+.card {
+  @apply p-4 border border-primary-600 rounded bg-white shadow-default;
+}
 
-  .card-header
-    @apply flex justify-between mb-4
+.card .card-prepend {
+  @apply mb-4;
+}
 
-    .card-title
-      @apply inline-flex flex-col
+.card .card-header {
+  @apply flex justify-between mb-4;
+}
 
-      &-container
-        @apply inline-flex items-center mb-2 text-lg text-primary
+.card .card-header .card-title {
+  @apply inline-flex flex-col;
+}
 
-        .title-icon
-          @apply ml-2
+.card .card-header .card-title-container {
+  @apply inline-flex items-center mb-2 text-lg text-primary;
+}
 
-      &-border
-        @apply s('h-0.5') rounded-full bg-highlight-500
+.card .card-header .card-title-container .title-icon {
+  @apply ml-2;
+}
 
-    .card-desc
-      @apply text-base text-pgray-2
+.card .card-header .card-title-border {
+  @apply h-0.5 rounded-full bg-highlight-500;
+}
 
-      .date-range
-        @apply ml-2 text-sm text-pgray-3
+.card .card-header .card-desc {
+  @apply text-base text-pgray-2;
+}
 
-    .inline-info
-      @apply mt-2 text-sm text-pgray-3
+.card .card-header .card-desc .date-range {
+  @apply ml-2 text-sm text-pgray-3;
+}
 
-  .card-body
-    @apply relative
+.card .card-header .inline-info {
+  @apply mt-2 text-sm text-pgray-3;
+}
+
+.card .card-body {
+  @apply relative;
+}
 
-  .card-footer
-    @apply mt-4 pb-2 border-b s('border-primary-300/30')
+.card .card-footer {
+  @apply mt-4 pb-2 border-b border-primary-300/30;
+}
 
-  .card
-    @apply border-primary-300 rounded-lg shadow-md
+.card {
+  @apply border-primary-300 rounded-lg shadow-md;
+}
 
-    .card-header
-      .card-title
-        &-container
-          @apply mb-0 text-base text-pgray-2
+.card .card-header .card-title-container {
+  @apply mb-0 text-base text-pgray-2;
+}
 
-        &-border
-          @apply hidden
+.card .card-header .card-title-border {
+  @apply hidden;
+}
 </style>

package/{components → app/components}/SLChart.vue

@@ -187,7 +187,10 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.chart
-  @apply flex w-full h-52 min-h-52 overflow-hidden
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.chart {
+  @apply flex w-full h-52 min-h-52 overflow-hidden;
+}
 </style>

package/{components → app/components}/SLCheckbox.vue

@@ -16,8 +16,8 @@
 
 <script lang="ts">
 import { isEqual } from "lodash-es";
-import type IInputOption from "~ui/interface/IInputOption";
-import { getUID } from "~ui/utils";
+import type IInputOption from "~ui/app/interface/IInputOption";
+import { getUID } from "~ui/app/utils";
 
 export default defineComponent({
   name: "SLCheckbox",
@@ -77,10 +77,18 @@ export default defineComponent({
       default: null,
     },
   },
-  emits: ["update:modelValue", 'update:lastCheckValue'],
+  emits: ["update:modelValue", "update:lastCheckValue"],
   setup(props, { emit }) {
-    const { size, disabled, modelValue, trueValue, falseValue, value, options, lastCheckValue } =
-      toRefs(props);
+    const {
+      size,
+      disabled,
+      modelValue,
+      trueValue,
+      falseValue,
+      value,
+      options,
+      lastCheckValue,
+    } = toRefs(props);
     const uid = ref<string | undefined>(undefined);
 
     const checkboxClass = computed(() => {
@@ -109,21 +117,40 @@ export default defineComponent({
       if (Array.isArray(modelValue.value)) {
         const valueSet: Set<any> = new Set(modelValue.value);
 
-        const lastCheckIndex = lastCheckValue.value === null || lastCheckValue.value === undefined || !options.value ? -1 : options.value.findIndex((o) => isEqual(o.value, lastCheckValue.value));
-        const currentCheckIndex = options.value?.findIndex((o) => isEqual(o.value, value.value)) || -1;
-
-        if (!options.value || lastCheckIndex === -1 || lastCheckIndex === currentCheckIndex || !e.shiftKey) {
+        const lastCheckIndex =
+          lastCheckValue.value === null ||
+          lastCheckValue.value === undefined ||
+          !options.value
+            ? -1
+            : options.value.findIndex((o) =>
+                isEqual(o.value, lastCheckValue.value),
+              );
+        const currentCheckIndex =
+          options.value?.findIndex((o) => isEqual(o.value, value.value)) || -1;
+
+        if (
+          !options.value ||
+          lastCheckIndex === -1 ||
+          lastCheckIndex === currentCheckIndex ||
+          !e.shiftKey
+        ) {
           if (isChecked.value) {
             valueSet.delete(value.value);
             emit("update:lastCheckValue", null);
           } else {
             valueSet.add(value.value);
-            emit('update:lastCheckValue', value.value);
+            emit("update:lastCheckValue", value.value);
           }
         } else {
           emit("update:lastCheckValue", null);
-          const start = lastCheckIndex < currentCheckIndex ? lastCheckIndex : currentCheckIndex;
-          const end = lastCheckIndex < currentCheckIndex ? currentCheckIndex : lastCheckIndex;
+          const start =
+            lastCheckIndex < currentCheckIndex
+              ? lastCheckIndex
+              : currentCheckIndex;
+          const end =
+            lastCheckIndex < currentCheckIndex
+              ? currentCheckIndex
+              : lastCheckIndex;
           options.value.slice(start, end + 1).forEach((o) => {
             if (o.disabled) return;
             valueSet.add(o.value);
@@ -135,7 +162,7 @@ export default defineComponent({
 
       emit(
         "update:modelValue",
-        isChecked.value ? falseValue.value : trueValue.value
+        isChecked.value ? falseValue.value : trueValue.value,
       );
     }
 
@@ -153,55 +180,71 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.checkbox
-  @apply inline-flex relative text-base align-top overflow-hidden
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.checkbox {
+  @apply inline-flex relative text-base align-top overflow-hidden;
+}
 
-  &.inactive
-    label
-      @apply pointer-events-none
+.checkbox.inactive label {
+  @apply pointer-events-none;
+}
 
-  &.checkbox-sm
-    @apply text-sm
+.checkbox.checkbox-sm {
+  @apply text-sm;
+}
 
-    label
-      @apply text-sm
+.checkbox.checkbox-sm label {
+  @apply text-sm;
+}
 
-  input
-    @apply absolute s("-top-10") s("-left-10")
+.checkbox input {
+  @apply absolute -top-10 -left-10;
+}
 
-  label
-    @apply relative text-base text-pgray-3 cursor-pointer
+.checkbox label {
+  @apply relative text-base text-pgray-3 cursor-pointer;
+}
 
-    .icon
-      @apply hidden
+.checkbox label .icon {
+  @apply hidden;
+}
 
-    span
-      @apply ml-2
+.checkbox label span {
+  @apply ml-2;
+}
 
-  input:not(:checked) + label:not(.is-check-some)
-    .icon-square
-      @apply inline-block
+.checkbox input:not(:checked) + label:not(.is-check-some) .icon-square {
+  @apply inline-block;
+}
 
-  input:not(:checked) + label.is-check-some
-    @apply text-primary
+.checkbox input:not(:checked) + label.is-check-some {
+  @apply text-primary;
+}
 
-    .icon-square
-      @apply hidden
+.checkbox input:not(:checked) + label.is-check-some .icon-square {
+  @apply hidden;
+}
 
-    .icon-minus-square
-      @apply inline-block
+.checkbox input:not(:checked) + label.is-check-some .icon-minus-square {
+  @apply inline-block;
+}
 
-  input:checked + label, &.is-check-some
-    @apply text-primary
+.checkbox input:checked + label,
+.checkbox.is-check-some {
+  @apply text-primary;
+}
 
-  input:checked + label
-    .icon-check-square
-      @apply inline-block
+.checkbox input:checked + label .icon-check-square {
+  @apply inline-block;
+}
 
-  input:not(:checked):disabled + label
-    @apply text-pgray-4 cursor-default pointer-events-none
+.checkbox input:not(:checked):disabled + label {
+  @apply text-pgray-4 cursor-default pointer-events-none;
+}
 
-  input:checked:disabled + label
-    @apply text-pgray-3 cursor-default pointer-events-none
+.checkbox input:checked:disabled + label {
+  @apply text-pgray-3 cursor-default pointer-events-none;
+}
 </style>

package/{components → app/components}/SLCircleButton.vue

@@ -51,7 +51,7 @@ export default defineComponent({
         btnClass.push(`circle-button-${color.value}`);
       }
       if (shadow.value) {
-        btnClass.push("shadow");
+        btnClass.push("shadow-default");
       }
       if (active.value) {
         btnClass.push("active");
@@ -71,25 +71,34 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.circle-button
-  @apply inline-flex items-center justify-center relative w-10 h-10 rounded-full bg-white text-xl s('leading-5.75') text-white
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &&-lg
-    @apply s('w-13.5') s('h-13.5') s('text-2.67xl')
+.circle-button {
+  @apply inline-flex items-center justify-center relative w-10 h-10 rounded-full bg-white text-xl leading-5.75 text-white;
+}
 
-    .badge
-      @apply s('top-1.75') right-3 w-1 h-1
+.circle-button-lg {
+  @apply w-13.5 h-13.5 text-2.67xl;
+}
 
-  &&-highlight-400
-    @apply bg-highlight-400
+.circle-button-lg .badge {
+  @apply top-1.75 right-3 w-1 h-1;
+}
 
-    &.shadow
-      @apply shadow-md
+.circle-button-highlight-400 {
+  @apply bg-highlight-400;
+}
 
-    &.active
-      @apply border border-highlight text-highlight
+.circle-button-highlight-400.shadow {
+  @apply shadow-md;
+}
 
-  .badge
-    @apply absolute s('top-1.5') right-2 block s('w-0.75') s('h-0.75') rounded-full bg-highlight
+.circle-button-highlight-400.active {
+  @apply border border-highlight text-highlight;
+}
+
+.circle-button .badge {
+  @apply absolute top-1.5 right-2 block w-0.75 h-0.75 rounded-full bg-highlight;
+}
 </style>

package/{components → app/components}/SLCollapsableBlock.vue

@@ -24,7 +24,7 @@ export default defineComponent({
   props: {
     blockTitleIcon: {
       type: String,
-      default: '',
+      default: "",
     },
     blockTitle: {
       type: String,
@@ -95,38 +95,49 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.sl-collapsable-block
-  @apply s('p-3.75') border border-secondary-400 rounded-lg
-
-  &.collapsed
-    .sl-collapsable-block-header
-      .toggle-collapse-button
-        .icon
-          @apply rotate-0
-
-    .sl-collapsable-block-body
-      @apply pt-0
-
-  &-header
-    .collapse-block-title-icon
-      @apply text-sm text-primary
-
-    .collapse-block-title
-      @apply text-base text-pgray-1 font-bold
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-    .toggle-collapse-button
-      @apply inline-flex items-center space-x-2
+.sl-collapsable-block {
+  @apply p-3.75 border border-secondary-400 rounded-lg;
+}
 
-      .button-title
-        @apply text-sm text-primary
-
-      .icon
-        @apply text-xs leading-none text-primary-600 rotate-180 transition-transform
-
-  &-body
-    @apply relative pt-4 overflow-hidden transition-all
-
-    .collapsable-block-wrapper
-      @apply absolute top-4 left-0 w-full
+.sl-collapsable-block.collapsed
+  .sl-collapsable-block-header
+  .toggle-collapse-button
+  .icon {
+  @apply rotate-0;
+}
+
+.sl-collapsable-block.collapsed .sl-collapsable-block-body {
+  @apply pt-0;
+}
+
+.sl-collapsable-block-header .collapse-block-title-icon {
+  @apply text-sm text-primary;
+}
+
+.sl-collapsable-block-header .collapse-block-title {
+  @apply text-base text-pgray-1 font-bold;
+}
+
+.sl-collapsable-block-header .toggle-collapse-button {
+  @apply inline-flex items-center space-x-2;
+}
+
+.sl-collapsable-block-header .toggle-collapse-button .button-title {
+  @apply text-sm text-primary;
+}
+
+.sl-collapsable-block-header .toggle-collapse-button .icon {
+  @apply text-xs leading-none text-primary-600 rotate-180 transition-transform;
+}
+
+.sl-collapsable-block-body {
+  @apply relative pt-4 overflow-hidden transition-all;
+}
+
+.sl-collapsable-block-body .collapsable-block-wrapper {
+  @apply absolute top-4 left-0 w-full;
+}
 </style>

package/{components → app/components}/SLCollapsableMulitPillSelect.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type IInputOption from "~ui/interface/IInputOption";
+import type IInputOption from "~ui/app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLCollapsableMultiPillSelect",
@@ -47,7 +47,7 @@ export default defineComponent({
     const filteredOptions = computed(() => {
       if (!showIndustryTypes.value) {
         return options.value.filter((option) =>
-          modelValue.value.includes(option.value)
+          modelValue.value.includes(option.value),
         );
       }
 
@@ -72,21 +72,26 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.collapsable-multi-pill-select
-  .toggle-button
-    @apply inline-flex items-center justify-between w-80 p-2 mb-2 border border-primary-500 rounded text-base text-pgray-2
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-    &.active
-      .toggle-icon
-        @apply rotate-180
+.collapsable-multi-pill-select .toggle-button {
+  @apply inline-flex items-center justify-between w-80 p-2 mb-2 border border-primary-500 rounded text-base text-pgray-2;
+}
 
-    .toggle-icon
-      @apply transform origin-center
+.collapsable-multi-pill-select .toggle-button.active .toggle-icon {
+  @apply rotate-180;
+}
 
-  .pills
-    @apply s('-mx-1') mb-4 border-b border-primary-300
+.collapsable-multi-pill-select .toggle-button .toggle-icon {
+  @apply transform origin-center;
+}
+
+.collapsable-multi-pill-select .pills {
+  @apply -mx-1 mb-4 border-b border-primary-300;
+}
 
-    .pill-checkbox
-      @apply mx-1 mb-2
+.collapsable-multi-pill-select .pills .pill-checkbox {
+  @apply mx-1 mb-2;
+}
 </style>

package/{components → app/components}/SLConfirmModal.vue

@@ -112,11 +112,14 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.confirm-modal
-  .modal-backdrop
-    @apply s('bg-white/40') backdrop-blur-5
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &-footer
-    @apply flex justify-center space-x-4
+.confirm-modal .modal-backdrop {
+  @apply bg-white/40 backdrop-blur-[5px];
+}
+
+.confirm-modal-footer {
+  @apply flex justify-center space-x-4;
+}
 </style>